#DivFullRowContainer {
    padding: 0px !important;
    margin-bottom: 30px !important;
    /*background-color: #39ABCF;*/
    /*background: linear-gradient(#2c2d3a,#2c2d3a 10%,#0094da 90%,#0094da 100%);*/
    background: linear-gradient(349deg, rgba(76, 175, 80, 1) 28%, rgba(10, 132, 146, 1) 46%, rgba(44, 45, 58, 1) 82%);
    background-color: #2C2D3A;
    background-repeat: no-repeat;
    background-size: 100% 75%;
}

#tblForm {
    width: 100%;
}

    #tblForm td {
        vertical-align: top;
    }


.gtip_grup4 {
    font-weight: bold !important;
    font-size: 18px !important;
}

.panel-gtip_grup4 {
    margin-bottom: 50px;
}

    .panel-gtip_grup4 .panel-heading {
        font-size: 16px !important;
        padding: 15px;
        color: black !important;
    }

/*#SelectedImageContainer {
    width: 80px;
    height: 80px;
    border: 3px dotted #ccc;
    background-color: #f2f2f2;
    margin-bottom: 5px;
    margin-top: 5px;
    margin-left: auto;
    margin-right: auto;
    background-image: url("/images/image.gif");
    background-size: 70px 70px;
    background-position: left top;
}*/

.noimage {
    width: 80px;
    height: 80px;
    border: 0px dotted #ccc;
    margin-bottom: 5px;
    margin-left: 5px;
    background-image: url("/images/no_photo_icon.jpg");
    background-size: 80px 80px;
    background-position: left top;
}



.table > tbody > tr:first-child > td {
    border: none;
}

.debug {
    display: none;
}

.gtip {
    cursor: pointer;
    cursor: hand;
    font-weight: bold;
}

@media (max-width: 550px) {
    .gtip {
        font-size: 12px;
    }
}

.gtip:hover {
    color: red !important;
}

.bottomborder {
    border-bottom: 1px solid #ccc;
}

.col0 {
    float: left;
    width: 2%;
    font-size: 11px;
    color: #808080;
    margin-top: 7px;
}

.col1 {
    float: left;
    width: 18%;
    font-size: 18px;
    margin-top: 5px;
}

.col2 {
    float: left;
    width: 80%;
}

#tblResults {
    width: 500px;
    font-size: 13px;
    border-top: 1px solid #E4E4E4;
}

#DivResults .row:last-child {
    border-bottom: 0px!important;
}

.tdCnt {
    width: 50px;
}

.tdGtip {
    width: 100px;
    font-size: 14px;
}

.thumb {
    width: 75px;
    height: 75px;
    margin: 0px;
    cursor: pointer;
}

.ThumbnailScrollerContent {
    overflow: auto;
    position: relative;
    padding: 10px;
    background: #f2f2f2 !important;
    margin: 3px auto;
    width: auto%;
    height: auto;
}

    .ThumbnailScrollerContent li {
        margin: 0 4px;
    }

        .ThumbnailScrollerContent li a {
            display: block;
            border: 1px solid #eee;
        }

.mTSButton {
    background-color: black;
}

.mTSButtonIcon {
    background-color: white;
}

.mTSButton .mTSButtonIcon {
    opacity: .9;
}

.mTSButton:hover .mTSButtonIcon {
    opacity: 1;
}

.ThumbnailScrollerContent.scroller-ready ul {
    opacity: 1;
}
/* CSS loading spinner (optional) */
@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes spinner {
    to {
        -webkit-transform: rotate(360deg);
    }
}

.spinner {
    min-width: 24px;
    min-height: 24px;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
}

    .spinner:before {
        content: 'Loading…';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 32px;
        height: 32px;
        margin-top: -16px;
        margin-left: -16px;
    }

    .spinner:not(:required):before {
        content: '';
        border-radius: 50%;
        border-top: 5px solid #f18e34;
        border-right: 5px solid transparent;
        animation: spinner .6s linear infinite;
        -webkit-animation: spinner .6s linear infinite;
    }

.ThumbnailScrollerContent.scroller-ready .spinner {
    display: none;
}

#DivSectionsList {
    padding: 0px 10px;
}

    #DivSectionsList label {
        font-weight: normal !important;
    }


.nav-tabs {
    margin-bottom: 0;
}



#ModalResultView {
    z-index: 99999;
}

    #ModalResultView .modal-dialog {
        width: 95%;
        height: 92%;
        padding: 0;
    }

    #ModalResultView .modal-content {
        height: 100%;
        border-radius: 0;
    }

    #ModalResultView .modal-body {
        height: calc(100vh - 180px);
        overflow-y: auto;
        margin-top: 0px;
        padding-top: 0px;
    }

#ModalSectionSelection .modal-dialog {
    width: 95%;
    height: 92%;
    padding: 0;
}

/* Tab Navigation */
.nav-tabs {
    margin: 0;
    padding: 0;
}

    .nav-tabs > li > a {
        border-radius: 0;
        background-color: #286090;
        /*border: 1px solid #ccc;*/
        font-size: 13px;
        color: white;
        margin-left: 0px;
    }



    .nav-tabs > li.active > a {
        background-color: #ffffff;
        color: black !important;
    }

    .nav-tabs > li > a:hover {
        color: black !important;
    }


#NavResults > li > a {
    border-radius: 0;
    background-color: #286090;
    font-size: 13px;
    color: #fff;
    margin-left: 0px!important;
}

.nav-tabs > li > a:hover {
    color: black !important;
    background-color: #f2f2f2!important;
}

#NavResults > li.active > a, #NavResults > li.active > a:hover {
    background-color: #ffffff !important;
    color: black !important;
}

/* Tab Content */
.tab-pane {
    border-left: 0px solid #ddd;
    border-right: 0px solid #ddd;
    border-radius: 0px 0px 5px 5px;
    padding: 10px;
    padding-top: 20px;
    height: 100%;
}

#MainTabContent {
    border: 0px;
    padding: 0px!important;
    margin: 0px!important;
    padding-top: 15px!important;
}

    #MainTabContent .tab-pane {
        padding: 0px!important;
        margin: 0px!important;
    }

/* used for sidebar tab/collapse*/
@media (max-width: 991px) {
    .visible-tabs {
        display: none;
    }


    #ModalResultView .modal-dialog {
        width: auto;
        height: auto;
    }

    #ModalResultView .modal-content {
        height: auto;
    }
}

@media (min-width: 992px) {
    .visible-tabs {
        display: block !important;
    }
}

@media (min-width: 992px) {
    .hidden-tabs {
        display: none !important;
    }
}

.gtip0 {
    color: black;
    font-weight: bold;
}

.gtip1 {
    color: Red;
}

.gtip2 {
    color: blue;
}

.gtip3 {
    color: #00CC66;
}

.TRGtipSelected td {
    background-color: #f2f2f2;
    font-weight: bold;
}

#DivThumbResim {
    border: 1px solid #E4E4E4;
    padding: 5px;
    display: none;
    color: #fff;
    z-index: 100;
    top: 35px;
    right: 0;
    position: fixed;
    background-color: #f4f4f4;
}

.img {
    float: left;
    cursor: pointer;
}


.imgListMA li {
    text-align: center;
}

.bti_item {
    width: 200px;
    font-size: 12px;
    border: #E4E4E4 1px solid;
    float: left;
    margin: 3px;
    background-color: #f4f4f4;
    text-align: center;
    padding-bottom: 10px;
}

    .bti_item:hover {
        background-color: #cce6ff;
    }

    .bti_item IMG {
        border: #ffffff 1px solid;
        cursor: pointer;
        display: inline;
        margin: 3px;
        width: 120px;
        height: 120px;
    }


#BagTarifeABHeaderContainer, #BagTarifeTRHeaderContainer, #BestMatchesHeaderContainer {
    position: fixed;
    left: 25px;
    z-index: 3;
    margin-top: 0px;
    background-color: white;
    border-bottom: 1px solid #ccc;
    padding: 10px;
    top: 92px;
}

#DivBagTarifeAB, #DivBagTarifeTR, #DivBestMatches {
    padding-top: 65px;
}

#ImgResult {
    width: 100%;
    height: auto;
}

.tblTarifeYazim th, .tblTarifeYazim td {
    font-size: 12px !important;
}

#RatingContainer {
    display: inline-block;
}


#btnSearch, #btnHidPlusSearch {
    display: none;
}

#ResultsHeader {
    margin-top: 15px;
    padding-bottom: 10px;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 15px;
}




a.morelink {
    text-decoration: none;
    outline: none;
    font-weight: bold;
}

.morecontent span {
    display: none;
}

#NoImagesModal .thumbnail {
    background-color: #eee!important;
    min-height: 350px!important;
    max-height: 350px!important;
    overflow: auto!important;
}

    #NoImagesModal .thumbnail p {
        margin-bottom: 8px;
    }

.glyphicon {
    margin-right: 5px;
    width: 4px;
}

.thumbnail {
    margin-bottom: 20px;
    padding: 10px !important;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    background: none;
    min-height: 390px!important;
}



.item.list-group-item .thumbnail {
    border: 0px !important;
    min-height: auto !important;
    padding: 0px !important;
}

.item.list-group-item {
    float: none;
    width: 100%;
    background-color: #fff;
    margin-bottom: 10px;
    border: 0px;
    border-bottom: 1px solid #ccc;
    padding: 0px !important;
}

    .item.list-group-item:nth-of-type(odd):hover, .item.list-group-item:hover {
        /*background: #428bca;*/
    }

    .item.list-group-item .list-group-image {
    }

    .item.list-group-item .thumbnail {
        margin-bottom: 0px;
    }

    .item.list-group-item .caption {
        padding: 9px 9px 9px 9px;
    }

    .item.list-group-item:before, .item.list-group-item:after {
        display: table;
        content: " ";
    }

    .item.list-group-item img {
        float: left;
    }

    .item.list-group-item:after {
        clear: both;
    }

.list-group-item-text {
    margin: 0 0 11px;
}

.btiDescription {
    font-size: 12px;
}


.btiThumb {
    width: 120px !important;
    height: 120px !important;
    margin: 10px !important;
    margin-top: 0px !important;
    background-image: url("/images/no_photo_icon.jpg");
    background-size: 120px 120px;
    background-position: left top;
    cursor: pointer;
}


.item_thumb_container {
    float: right;
    padding: 5px;
    padding-top: 0px;
    font-size: 11px;
    text-align: center;
}




a.morelink {
    text-decoration: none;
    outline: none;
    font-weight: bold;
}

.morecontent span {
    display: none;
}

.itemDesc {
    font-size: 13px!important;
    border: 1px solid #ccc;
    padding: 5px;
    background: #f2f2f2;
}

.itemDescOriginal {
    color: #808080;
    background: #f2f2d2;
}

.itemKeywords {
    font-size: 13px;
}

.item.list-group-item .thumbnail .itemDesc {
    font-size: 13px;
}

.item.list-group-item .thumbnail .itemKeywords {
    font-size: 13px;
}

.DivBestMatchDetail {
    min-height: 480px;
}

    .DivBestMatchDetail .group,
    .DivBestMatchDetail .list-group-image,
    .DivBestMatchDetail .btiThumb,
    .DivBestMatchDetail .thumbnail {
        border: 0px !important;
        box-shadow: none !important;
    }

    .DivBestMatchDetail .btiThumb {
        width: 130px !important;
        height: 130px !important;
        margin-right: 30px !important;
        background-image: none !important;
    }

    .DivBestMatchDetail .itemDesc {
        font-size: 13px !important;
    }





@media (max-width: 550px) {
    #btnStartSearch {
        width: 100%;
        margin-top: 0px;
        margin: 0px!important;
    }

    /*#divSearchByEnteringTheTariffSectionGroup, #divSearchByEnteringTheTariffSectionGroup button {
        display: block !important;
        width: 100%;
        margin-bottom: 0px;
    }

    #btnSearchByEnteringTheTariffSectionInfo, #RatingMainContainer, .RatingContainer {
        visibility: hidden;
    }*/

    .searchbar1, .searchbar2 {
        padding: 10px!important;

    }
    
   




    .modal {
        padding: 0 !important;
        margin: 0px !important;
    }

    .modal-dialog {
        width: 100% !important;
        padding: 0 !important;
        margin: 0px !important;
    }

    .modal-content {
        border-radius: 0 !important;
    }

    #ImageContainer {
        width: 100%;
        clear: both;
        text-align: center;
        padding-top: 10px;
        margin-bottom: 10px;
    }

    #SelectedImageContainer {
        
    }

        #SelectedImageContainer:not(:empty) {
            /*display:block;*/
        }


    #upload_button_group {
        display: inline-block;
        text-align: center;
    }
}

.found-gtip {
    font-weight: bold;
    margin-right: 8px;
    cursor: pointer;
}

.found-anahtargtip {
    float: left;
    margin-right: 15px;
}



#DivFeedback, #DivFeedbackFooter {
    text-align: center;
}



.gtip_popover {
    font-size: 11px;
    line-height: 1em !important;
}

    .gtip_popover .popover-content {
        padding: 4px;
        color: red;
    }




.custom_line_text {
    margin-bottom: 30px;
}

    .custom_line_text h2 {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #ccc;
        line-height: 0.1em;
        margin: 10px 0 20px;
    }

        .custom_line_text h2 span {
            background: #fff;
            padding: 0 10px;
        }





/* Small devices (tablets, 768px and up) */
@media (min-width: 300px) {
    .modalAdd {
        width: 125px;
        height: 125px;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 600px) {
    .modalAdd {
        width: 200px;
        height: 200px;
    }
    

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 800px) {
    .modalAdd {
        width: 300px;
        height: 250px;
        margin: 0 auto;
    }

    
}


@media (max-width: 780px) {
    #imgSearch {
        width:100%;
        height:auto;
    }
}

#DivCantFind {
    border-radius: 0px; font-size: 15px; padding: 5px; font-weight: bold; margin-top: -20px; margin-bottom:10px; text-align:right;
}
    #DivCantFind .imgCantFind {
        display: none;
    }
@media (min-width: 1388px) {
    

    #DivCantFind {
        border-radius: 0px; position:fixed; right:0; width:150px; 
        /*background-color:#0094DA; color:white;*/ 
        background-color:#fff;
        font-size: 18px; 
        padding: 10px; font-weight: bold; 
        text-align:center;
        border-top-left-radius:15px;
        border-bottom-left-radius:15px;
        z-index:1;
    }
        #DivCantFind a {
            /*color:white;*/
        }
        #DivCantFind .imgCantFind {
            width: 100%; height: auto;
            display:block;
        }
        
}

.tab-content {
    padding: 15px 15px;
    border: 1px solid #ddd;
    border-top: 0;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}



#ProgressMainContainer {
    background-color: transparent;
    padding:30px;
    display:none;
    text-align:center;
}

#SearchBarHeader {
    text-align: center;
    font-size: 42px !important;
    font-weight: normal !important;
    margin: 0px;
    padding-top: 0px;
    margin-bottom: 50px;
    color: #fff;
}

    #SearchBarHeader .header-bold {
        color: #3ECDF7;
        font-weight:bold;
    }

#btnStartSearch {
}

.searchbar1 {
    padding-right: 70px;
    padding-left: 70px;
    margin-top: 30px;
    margin-bottom: 60px;
    padding-top: 0px;
    height: calc(100vh - 80px);
    box-sizing: border-box;
}

    .searchbar1 input {
        border: 1px solid #5ea4f3!important;
        /*border: 0px!important;*/
        /*box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);*/
        padding: 12px;
        font-size: 15px;
    }

#SearchExamples {
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 12px;
    text-align: left;
    color: #3ECDF7;
}
    #SearchExamples div {
        display:inline-block;
        margin-right:35px;
    }
    #SearchExamples span {
    font-style:italic;
    text-decoration:underline;
    }
    #SearchExamples i {
        margin-left:15px;
    }

.searchbar2 {
    border-top: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #fff !important;
    margin-bottom: 0px;
    
}
    .searchbar2 #SearcTabs {
        margin: 0px;
    }
       .searchbar2 #SearchExamples{
        display:none;
    }


    .searchbar2 #SearcTabs .nav-tabs > li > a {
        font-size: 16px;
    }


    .searchbar2 #txtQuery {
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    }


#SearcTabs .nav-tabs > li.active > a,
#SearcTabs .nav-tabs > li.active > a:focus,
#SearcTabs .nav-tabs > li.active > a:hover,
#SearcTabs .nav-tabs > li.active,
#SearcTabs .nav-tabs > li.active {
    border: 0 !important;
    background-color: #d4dfe5;
    color: #028700;
}

@media (max-width: 768px) {

    .searchbar1 {
        height: auto!important;
    }
    #SearcTabs > li {
        display: table-cell;
        width: 1%;
    }

        #SearcTabs > li > a {
            border-bottom: 1px solid #ddd !important;
            border-radius: 4px 4px 0 0 !important;
            margin-bottom: 0 !important;
        }

    #SearcTabs > .active > a,
    #SearcTabs > .active > a:hover,
    #SearcTabs > .active > a:focus {
        border-bottom-color: #fff !important;
    }
}

.searchbar2 #SearcTabs .nav-tabs > li.active {
    border-bottom: 3px solid #028700 !important;
}



.searchbar2 #SearcTabs .nav-tabs > li > a {
    color: white !important;
    background-color: none !important;
}

    .searchbar2 #SearcTabs .nav-tabs > li > a:hover {
        color: #093 !important;
        background-color: none !important;
    }

.searchbar2 #SearcTabs .nav-item {
    border-right: 0 solid #ccc;
}

    .searchbar2 #SearcTabs .nav-item:last-child {
        border-right: none;
    }

    .searchbar2 #SearcTabs .nav-item.active .nav-link {
        background-color: transparent;
    }

.searchbar2 #SearcTabs .nav-link {
    color: #041D31 !important;
}

    .searchbar2 #SearcTabs .nav-link.active,
    .searchbar2 #SearcTabs .nav-link.active:hover {
        color: #041D31 !important;
    }

    .searchbar2 #SearcTabs .nav-link:hover {
        color: #3ECDF7 !important;
        background-color: transparent!important;
    }

    .searchbar2 #SearcTabs .nav-link.active::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 50%;
        /*width: 100px;*/
        width: 80%;
        height: 3px;
        background-color: limegreen;
        transform: translateX(-50%);
    }

#examples1_container[data-rel="searchbar2"] {

    display:none;
}
.quicksearch {
    cursor: pointer;
    color: #3186BE!important;
}

    .quicksearch:hover {
        text-decoration: underline;
    }

.examples {
    min-height: 300px;
    background-color: #fff;
        border: 1px solid #DBF1FB;
}
    .examples .panel-body {
    
        font-size:16px;
        padding:20px;
        text-align:center
    }
    .examples .panel-heading {
        background-color: #0094DA;
        border-bottom: 1px solid #eee;
        font-size: 22px;
        text-align: center!important;
        margin: 0px;
        font-weight: normal!important;
        color:white;
    }

    .examples .examples_image {
        text-align:center;
    }


    .examples:hover {
        box-shadow: 0px 4px 15px rgba(0,0,255,0.3);
    }

.e1 {
 
}

#examples1_container {
    padding-top: 20px!important;
    background-color:#fff;
    clear:both;
    display:block;
}

@media (max-width: 1200px)  {
    #examples1_container {
        margin-bottom: 50px;
    }

    .examples1 {
       
        
    }
}

.examples1 {
    height: 280px;
    background-color: #e3ecfc;
   
    text-align: center;
    font-size: 17px;
    padding: 20px 20px;
    margin-bottom: 20px;
    box-shadow: 0px 4px 15px rgba(0,0,255,0.05);
    border-radius:5px;
}

.examples2 {
   
   clear:both;
   background-image:url(https://substatic.findhs.codes/img/bg/background-dots-blue-2.png); background-repeat:no-repeat; background-position: right; background-size: 45%;
}


    .examples1 a {
        color:black
    }
    .examples1 table {
        color:black;
        font-size:13px;
    }
    .examples1 ul {
        list-style: none;
        text-align: left;
    }

    .examples1:hover {
        /*box-shadow: 0px 4px 15px rgba(0,0,255,0.3);*/
    }

.examples1_header {
    color: #0094DA;
    font-size: 22px;
    font-weight:bold;
}

.country_flag_container {
    margin-top:10px;
}
.country_flag {
    margin-right:3px;
    
 display:inline-block;
   
}
.country_flag:hover {
    background-color:white;
    border-radius:2px;
    box-shadow: 0px 2px 3px rgba(0,0,255,0.2);
}
    .country_flag a {
    text-decoration:none;
     padding:8px 12px!important;
     text-align:center;
     display:block;
    }

.UpdatesReady {
    font-weight: bold;
    color: red;
}

.UpdatesInProgress {
    font-weight: bold;
    color: black;
}

#Suggestions {
}

    #Suggestions .SuggestionsContainer {
        color: black;
        background-color: white;
        max-height: 300px;
        overflow: auto;
        position: absolute;
    }

    #Suggestions span {
        cursor: pointer;
        display: block;
        padding: 5px;
        font-size: 12px;
        border-bottom: 1px solid #ccc;
    }

        #Suggestions span:hover {
        }

.typeahead {
    z-index: 999999999999!important;
   
}
.typeahead li a {
    padding: 7px !important;
}

    .typeahead li a::before {
        font-family: "FontAwesome";
        margin-right: 10px;
        color: #ddd;
        content: "\f002";
    }



.UpdatesReady {
    font-weight: bold;
    color: red;
}

.UpdatesInProgress {
    font-weight: bold;
    color: black;
}

.pnlCredit {
    padding-left: 20px;
    margin-left: 7px;
}

    .pnlCredit a {
        color: white;
    }

    .pnlCredit .spanCredit {
        background-color: #2c2d3a;
        font-size: 11px;
        font-style: italic;
        color: white;
        padding: 5px;
        border-radius: 3px 3px 0px 0px;
    }

.DivMainResultHeader {
    margin-bottom: 15px;
}

.tabbable-line .tab-content {
    border: 0px !important;
    padding: 0px !important;
}

.tabbable-line .tabbable-tabs {
}

    .tabbable-line .tabbable-tabs > li {
        float: none !important;
        display: inline-block !important;
        zoom: 1 !important;
    }

        .tabbable-line .tabbable-tabs > li:first-child {
            margin-left: 70px;
        }

@media screen and (max-width: 600px) {
    .tabbable-line .tabbable-tabs > li {
    }

        .tabbable-line .tabbable-tabs > li a {
            font-size: 10px !important;
            padding: 5px !important;
        }

            .tabbable-line .tabbable-tabs > li a img {
                display: none;
            }

        .tabbable-line .tabbable-tabs > li:first-child {
            margin-left: 10px;
        }
}

.tabbable-line .tabbable-tabs > li.active > a, .tabbable-line .tabbable-tabs > li.active > a:hover {
    background-color: #fff !important;
    color: black !important;
}

.tabbable-line .tabbable-tabs > li a {
    font-size: 16px !important;
    background-color: #DBF1FB !important;
    color: black !important;
}

    .tabbable-line .tabbable-tabs > li a:hover {
        background-color: #1DA1F2 !important;
        color: #fff !important;
    }

.disabledTab {
    opacity: 0.9 !important;
    pointer-events: none;
}

    .disabledTab li > a {
        color: #ccc !important;
    }

.beta {
    color: darkmagenta
}
/*esra ekledi*/
#ImageSearchScreen {
    padding: 0px;
    background-color: #B1EBFB;
    margin: 0 auto;
    border-radius: 5px;
    overflow: hidden;
}


    @media (max-width: 768px) {
        #ImageSearchScreen {
            height: auto; /* İçeriğe göre yükseklik */
            padding: 30px 15px; /* Dışarı taşmayı önlemek için yastık ekleyin */
        }

        .bottom {
            padding-top: 40px;
            padding-right: 15px;
            padding-left: 15px;
            padding-bottom: 15px;
        }

        #btnStartImageSearch {
            box-shadow: 0 0 2px white; /* Adjust the values as needed */
        }
    }

    #ImageSearchScreen #innergrey {
    padding: 5px 5px 5px 5px;
    background-color: #f1f7fa;
    height: 100%;
    border-color: #bce6fb;
    border-style: dashed;
    border-width: 2px;
    border-radius: 5px;
}

#btnStartImageSearch {
    font-size: 13px;
    box-shadow: 0 0 2px #0094da; /* Adjust the values as needed */
}

/*#upload_button {
    background-color: white;
    border: 1px solid #0094da;*/ /* Kenarlığın rengini #f1f7fa olarak ayarlar */
    /*color: #0094da;
    padding: 5px;
}

    #upload_button:hover {
        background-color: white;
        color: #0094da;
        border: 1px solid transparent;
        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
    }*/


.SearcTabsContent {
    background-color: #d4dfe5;
}

#SearcTabs {
    font-size: 20px;
    margin-bottom:20px;
}


.searchbar1 #txtQuery {
    font-size: 24px !important;
    height: 70px !important;
    padding-left:30px;
    background: #D3F4FD !important;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.searchbar1 #btnStartSearch {
    height: 70px !important;
    width: 80px !important;
    font-size: 30px;
    background-color: #3ecdf7 !important;
    border-color: #3ecdf7 !important;
}
    .searchbar1 #btnStartSearch:hover {
        background-color: #000 !important;
        border-color: #000 !important;
    }

    .searchbar1 #SearcTabs .nav-tabs > li > a {
        font-size: 20px;
    }

    #SearcTabs .nav-tabs > li.active > a,
    #SearcTabs .nav-tabs > li.active > a:focus,
    #SearcTabs .nav-tabs > li.active > a:hover,
    #SearcTabs .nav-tabs > li.active,
    #SearcTabs .nav-tabs > li.active {
        border: 0 !important;
        background-color: #d4dfe5;
        color: #028700;
        
    }

.searchbar1 #SearcTabs .nav-tabs > li.active {
    border-bottom: 3px solid #028700 !important;
}



.searchbar1 #SearcTabs .nav-tabs > li > a {
    color: white !important;
}

    .searchbar1 #SearcTabs .nav-tabs > li > a:hover {
        color: #093 !important;
        background-color: none !important;
    }

.searchbar1 #SearcTabs .nav-item {
    border-right: 0 solid #ccc;
}

    .searchbar1 #SearcTabs .nav-item:last-child {
        border-right: none;
    }

    .searchbar1 #SearcTabs .nav-item.active .nav-link {
        background-color: transparent;
    }

.searchbar1 #SearcTabs .nav-link {
    color: #d7d6d6 !important;
}

    .searchbar1 #SearcTabs .nav-link.active,
    .searchbar1 #SearcTabs .nav-link.active:hover {
        color: white !important;
    }

    .searchbar1 #SearcTabs .nav-link:hover {
        color: #3ECDF7 !important;
        background-color: transparent;
    }

    .searchbar1 #SearcTabs .nav-link.active::after {
        content: "";
        display: block;
        position: absolute;
        bottom: 0;
        left: 50%;
        /*width: 100px;*/
        width: 80%;
        height: 3px;
        background-color: limegreen;
        transform: translateX(-50%);
    }

#divTextSearch {
    padding-top: 0;
}










.startSearch {
    padding-top: 20px;
  
    justify-content: center;
 
}


#UploadedImg {
    width: 300px!important;
    height: 300px!important;
    border-radius: 5px;
}

#txtImageProductDesc {
    border:0px!important;
    margin-bottom:5px;
    width:90%;
}

.pl {
    display: block;
    width: 200px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
    align-content: center;
}
.searchbar2 .pl {
    width: 100px;
    height: 100px;
}

.pl__ring, .pl__ball {
    animation: ring 2s ease-out infinite;
}

.pl__ball {
    animation-name: ball;
}

/* Dark theme  */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: hsl(var(--hue),10%,10%);
        --fg: hsl(var(--hue),10%,90%);
    }
}

/* Animation */
@keyframes ring {
    from {
        stroke-dasharray: 0 257 0 0 1 0 0 258;
    }

    25% {
        stroke-dasharray: 0 0 0 0 257 0 258 0;
    }

    50%, to {
        stroke-dasharray: 0 0 0 0 0 515 0 0;
    }
}

@keyframes ball {
    from, 50% {
        animation-timing-function: ease-in;
        stroke-dashoffset: 1;
    }

    64% {
        animation-timing-function: ease-in;
        stroke-dashoffset: -109;
    }

    78% {
        animation-timing-function: ease-in;
        stroke-dashoffset: -145;
    }

    92% {
        animation-timing-function: ease-in;
        stroke-dashoffset: -157;
    }

    57%, 71%, 85%, 99%, to {
        animation-timing-function: ease-out;
        stroke-dashoffset: -163;
    }
}