/* Mobile Styles */
@media (max-width: 768px) {
    .searchModule {
        flex-wrap: wrap; /* Allow items to wrap on smaller screens */
        height: auto!important; /* Let height adjust based on content */
    }

    /* Set each child element to take up full width */
    .search-searchBar, .search-orderBy, .search-symbols, .search-categories, .search-region, .search-dates, .search-extras, .search-settings, .search-lists, .search-reset, .search-copytoclipboard {
        flex: 1 1 50%; /* Full width for each element */
        margin: 3px 0; /* Adjust spacing */
        background-color: black;
    }
      /* Set each child element to take up full width */
      .search-orderBy, .search-symbols, .search-categories, .search-region, .search-dates, .search-extras, .search-settings, .search-lists, .search-reset, .search-copytoclipboard {
        display:none!important;
    }
    .search-mobileShowFilters{
    
        display:flex!important;
    }

    /* Adjust padding and height for compact layout */
    .search-reset, .search-settings, .search-copytoclipboard {
        padding: 6px;
    }
}
    /* Flex display toggle */
    .flex-display {
        display: flex !important;
    }





/* Custom Styles */
.searchModule {
    display: flex;
    height: 45px;
    align-items: stretch; /* Make sure all children stretch to the full height of the container */
    z-index: 10;
    position: relative; /* Default position */
    width: 100%;
    background-color: #3d3c3c;
}

.search-searchBar, .search-orderBy, .search-symbols, .search-categories, .search-region, .search-dates, .search-extras, .search-settings, .search-lists, .search-reset, .search-settings, .search-copytoclipboard, .search-mobileShowFilters {
    background-color: #565656;
    border-radius: 5px;
    margin: 5px;
    cursor: pointer;
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center the content */
    position: relative; /* Relative positioning for the search icon */
    flex-grow: 1; /* Allow the items to grow to fill the container */
    box-sizing: border-box; /* Include padding and border in element's width and height */
    transition: background-color 0.2s ease-in-out;
}

 .search-orderBy:hover, .search-symbols:hover, .search-categories:hover, .search-region:hover, .search-dates:hover, .search-extras:hover, .search-settings:hover, .search-lists:hover, .search-reset:hover, .search-settings:hover, .search-copytoclipboard:hover  {
background-color: #339643;
}


.rotate-mobileShowFilters {
    transform: rotate(0deg);
}
.search-mobileShowFilters svg{
    
    max-height: 30px; /* Set a fixed width */
    padding: 8px;
}

.search-mobileShowFilters{
    display:none;
}
.search-reset, .search-settings, .search-copytoclipboard{
    
    max-width: 40px; /* Set a fixed width */
    padding: 8px;
}
.search-reset svg, .search-settings svg, .search-copytoclipboard svg{
    transition: transform 0.3s ease-in-out;
}
/* Scale the SVG when hovering over the .search-reset div */
.search-reset:hover svg, .search-copytoclipboard:hover svg  {
    transform: scale(1.3);
}
.search-settings:hover svg{
    transform: scale(1.2);
}

/* Define a keyframes animation for the rotation */
@keyframes rotate360 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.active-search-button{
    background-color: #20672c;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.hidden-search-module {
    display: none !important;
  }
  


/*active searchbar modules*/


.activeSearchModule {
    background: linear-gradient(234deg, #339643, #339643, #339643, #339643, #339643, #81b289, #339643, #339643, #339643, #339643);
    background-size: 2000% 2000%;

    -webkit-animation: AnimationName 11s ease infinite;
    -moz-animation: AnimationName 11s ease infinite;
    animation: AnimationName 11s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:93% 0%}
    50%{background-position:0% 100%}
    100%{background-position:93% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:93% 0%}
    50%{background-position:0% 100%}
    100%{background-position:93% 0%}
}
@keyframes AnimationName {
    0%{background-position:93% 0%}
    50%{background-position:0% 100%}
    100%{background-position:93% 0%}
}



/* Styles for the hover box */
.imgCopyToClipboardBtnURLHover {
    display: none; /* Initially hidden */
    position: absolute;
    background-color: black;
    color: white;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  
    /* Positioning adjustments */
    top: 100%; /* Place it directly below the button */
    left: 50%; /* Center horizontally relative to the button */
    transform: translateX(-50%) translateY(10px); /* Center and adjust vertical position */
  }
  
  /* Ensure the hover box is visible on hover */
  .search-copytoclipboard {
    position: relative; /* Anchor for absolute positioning */
  }
  
  .search-copytoclipboard:hover .imgCopyToClipboardBtnURLHover {
    display: block; /* Show the box on hover */
  }
  
  






#scrollButton, #searchButton {
    width: 50px;
    height: 50px;
    background-color: #565656;
    border-radius: 8px;
    position: fixed;
    bottom: 20px;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    cursor: pointer;
    display: flex; /* Ensure flexbox layout for centering */
}

#scrollButton {
    right: 20px;
}

#searchButton {
    right: 80px; /* 50px width + 10px margin + 20px spacing */
}

#scrollButton:hover, #searchButton.checked {
    background-color: #20672c;
}

#scrollButton svg, #searchButton svg {
    width: 30px;
    height: 30px;
    margin: auto;
}



  



  





.search-searchBar input {
    width: calc(100%); /* Subtracting the padding */
    height: calc(100%); /* Subtracting the vertical padding */
    background: transparent;
    text-indent: 20px; /* Adjust as needed */
    color: #ffffff;
}
.search-searchBar input:focus {
    background-color: #339643;
}
.search-searchBar input::placeholder {
    font-style: italic;
    color: rgb(163, 163, 163);

}

.search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    height: 24px; /* Set a fixed height */
    border-radius: 50%;
}


#categoryDisplay {
    position: absolute;
    right: 40px; /* Adjust as needed */
    top: 50%;
    transform: translateY(-50%);
    font-style: italic;
}

#clearSearchBar {
    position: absolute;
    right: 7px; /* Adjust as needed */
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    background-color: #a8a8a8;
    width: 24px; /* Ensure height and width are equal for a perfect circle */
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px; /* Adjust font size of the X as needed */
}



/* Container for suggestions */
.searchText-suggestions {
    top: 100%; /* This will position the div right below the search bar text input */
    left: 0; 
    position: absolute;
    width: 100%;
    max-height: 150px; /* Adjust as needed */
    overflow-y: auto;
    background-color: #3f3f3f;
    z-index: 1000; /* To make it appear above other elements */}
    .uploadText-suggestions {
        left: 0;
        position: absolute; /* Keeps the suggestions floating */
        top: 100%; /* Positions the suggestions right below the input field */
        width: 100%;
        max-height: 150px; /* Adjust as needed */
        overflow-y: auto;
        background-color: #3f3f3f;
        z-index: 1000; /* Keeps suggestions above other elements */
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow for better visibility */
      }
         .editText-suggestions {
            top: 100%; /* This will position the div right below the search bar text input */
            left: 0; 
            position: absolute; /* Makes the suggestions float over content */
            width: 100%;
            max-height: 150px; /* Adjust as needed */
            overflow-y: auto;
            background-color: #3f3f3f;
            z-index: 1000; /* To make it appear above other elements */}

.searchText-suggestionCategory{
    font-style: italic;
    float:right;
    color: lightgrey;
}

/* Each suggestion */
.searchText-suggestions .searchText-suggestion, .uploadText-suggestions .uploadText-suggestion, .editText-suggestions .editText-suggestion {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #888;
}

/* On hover */
.searchText-suggestions .searchText-suggestion:hover, .uploadText-suggestions .uploadText-suggestion:hover, .editText-suggestions .editText-suggestion:hover {
    background-color: #565656;
}

/* Main text */
.searchText-suggestions .searchText-suggestion span  {

    display: inline-block;
    font-size: 14px; /* Adjust as needed */
}

/* Category text */
.searchText-suggestions .searchText-suggestion span:after, .uploadText-suggestions .uploadText-suggestion span:after, .editText-suggestions .editText-suggestion span:after {
    content: attr(data-field);
    font-size: 10px; /* Adjust as needed */
    font-style: italic;
    color: #888;
}
.imgDescBrandEditInputWrapper, .imgDescCreditEditInputWrapper, .imgDescModelsNameEditInputWrapper, .imgDescEditImgTitleBtnsContainer {
    position: relative;
}


.no-match {
    padding: 7px;
    text-align: center;
    font-style: italic;
    color: #bebebe;
    background-color: #565656;
    border-bottom: #888 solid 1px ;
    cursor:default;
}
.noMatch{
    
    padding: 20px;
    text-align: center;
    font-style: italic;
    color: #bebebe;
}
.highlight {
    background-color: #20672c;
    color: #ffffff; /* You can choose a suitable text color */
  }

  #imgBrand-container, #imgCredit-container, #imgLinkToIt-container, #imgModelsName-container, #imgTitle-container{
      position: relative;
  }











.dropdown-search-symbols{
    width: 272px!important;
}


.dropdown-search-orderBy,
.dropdown-search-symbols,
.dropdown-search-categories,
.dropdown-search-region,
.dropdown-search-dates,
.dropdown-search-extras,
.dropdown-search-settings {
    display: none; /* Hide initially */
    position: absolute;
    top: 100%; /* Position it right below the parent div */
    left: 50%; /* Center the dropdown */
    transform: translateX(-50%); /* Center the dropdown */
    width: auto; /* Set to auto or any specific value you prefer */
    min-width: 100%; /* Ensure it's at least as wide as the parent */
   
    box-sizing: border-box; /* Include padding and border in element's content width */
    overflow: hidden; 
    background-color: #3f3f3f; /* Or any color you prefer */
    color: #ddd;
    border: 2px solid #646464; /* Or any border styling you prefer */ /* To ensure the dropdown appears above other elements */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Optional: for better dropdown visibility */
    z-index: 900;
}

/* Styling for the parent divs to position the dropdown correctly */
.search-orderBy, .search-symbols, .search-categories, .search-region, .search-dates, .search-extras, .search-settings, .search-lists {
    position: relative;
}


.dropdown-search-symbols{
    overflow: visible;
    height: auto;
}

.dropdown-search-symbols * {
    box-sizing: border-box;
}

.linkSymbolsContainer label{
    width:100% !important;
    text-align: center;
}
.linkSymbolsContainer:hover{
    background-color: #565656;
}
/* Style for the label when checkbox is checked */
#searchInput-symbols-linkSymbols:checked + label {
    background-color: #20672c;
}
#searchInput-symbols-linkSymbols:checked + label:hover {
    background-color: #339643;
}

.visibleFlex {
    display: flex !important;
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
}
.visibleFlexSymbols {
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
}

#imgDataFetch-imgSymbols{
    white-space:normal!important;
}









/* Hide the inputs */
.searchOrder-inputContainer input[type="radio"] {
    display: none;
}

/* Style the label */
.searchOrder-inputContainer label {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px; 
    box-sizing: border-box;
    cursor: pointer;
    color: #ffffff;
}


/* Style the hover effect */
.searchOrder-inputContainer label:hover {
    background-color: #565656; /* Hover color */
}

/* Style the active label */
.searchOrder-inputContainer input[type="radio"]:checked + label, .search-settings input[type="radio"]:checked + label {
    background-color: #20672c; /* Active color */
}

















/* Style the category dropdown */
.categoryDropdown,
.subCategoryDropdown {
    width: 100%; /* Full width of the parent container */
    height: 40px; /* Consistent with your label height */
    box-sizing: border-box; /* Include padding and border in element's content width */
    padding-left: 10px; /* 10px space from the left */
    color: #ffffff; /* Text color */
    background-color: #3f3f3f; /* Background color */
    cursor: pointer; /* Pointer cursor on hover */
    appearance: none; /* Remove default appearance */
    -webkit-appearance: none; /* Remove default appearance for Safari */
    -moz-appearance: none; /* Remove default appearance for Firefox */
    outline: none; /* Remove outline */
}

/* Style the dropdown options */
.categoryDropdown option,
.subCategoryDropdown option {
    color: #ffffff; /* Text color for options */
    background-color: #3f3f3f; /* Background color for options */
    padding: 10px; /* Padding for options */
}

/* Style the dropdown on hover */
.categoryDropdown:hover,
.subCategoryDropdown:hover {
    background-color: #20672c; /* Background color on hover */
}

/* Style the dropdown when focused */
.categoryDropdown:focus,
.subCategoryDropdown:focus {
    border-color: #20672c; /* Border color on focus */
}


/* Style the placeholder options */
.categoryDropdown option:first-child,
.subCategoryDropdown option:first-child {
    color: grey; /* Grey text color */
    font-style: italic; /* Italic font style */
    padding: 10px;
}

/* Style the other options */
.categoryDropdown option:not(:first-child),
.subCategoryDropdown option:not(:first-child) {
    color: #ffffff; /* Regular text color */
    font-style: normal; /* Normal font style */
}











/* Style the country and continent dropdown */
#search-imgCountry,
#search-imgContinent,
#edit-imgCountry,
#edit-imgContinent,
#upload-imgCountry,
#upload-imgContinent {
    width: 100%; /* Full width of the parent container */
    height: 40px; /* Consistent with your label height */
    box-sizing: border-box; /* Include padding and border in element's content width */
    padding-left: 10px; /* 10px space from the left */
    color: #ffffff; /* Text color */
    background-color: #3f3f3f; /* Background color */
    cursor: pointer; /* Pointer cursor on hover */
    appearance: none !important; /* Remove default appearance */
    -webkit-appearance: none !important; /* Remove default appearance for Safari */
    -moz-appearance: none !important; /* Remove default appearance for Firefox */
    outline: none; /* Remove outline */
}

/* Style the dropdown options */
#search-imgCountry option,
#search-imgContinent option,
#edit-imgCountry option,
#edit-imgContinent option,
#upload-imgCountry option,
#upload-imgContinent option {
    color: #ffffff; /* Text color for options */
    background-color: #3f3f3f; /* Background color for options */
    padding: 10px; /* Padding for options */
}

/* Style the dropdown on hover */
#search-imgCountry:hover,
#search-imgContinent:hover,
#edit-imgCountry:hover,
#edit-imgContinent:hover,
#upload-imgCountry:hover,
#upload-imgContinent:hover 
 {
    background-color: #20672c; /* Background color on hover */
}

/* Style the placeholder options */
#search-imgCountry option:first-child,
#search-imgContinent option:first-child,
#edit-imgCountry option:first-child,
#edit-imgContinent option:first-child {
    color: grey; /* Grey text color */
    font-style: italic; /* Italic font style */
}

/* Style the other options */
#search-imgCountry option:not(:first-child),
#search-imgContinent option:not(:first-child),
#edit-imgCountry option:not(:first-child),
#edit-imgContinent option:not(:first-child) {
    color: #ffffff; /* Regular text color */
    font-style: normal; /* Normal font style */
}



/* Style the dropdown when focused */
#search-imgCountry:focus,
#search-imgContinent:focus {
    border-color: #20672c; /* Border color on focus */
}





.searchDate-tabs {
    display: flex;
    width: 100%;
    border-bottom: #888 solid 1px;
}

.searchDate-tab {
    flex: 1;
    padding: 10px 15px;
    cursor: pointer;
    background-color: #3f3f3f;
    color: #ddd;
    text-align: center;
    text-transform: uppercase;
    border-right: 1px solid #888;
}

.searchDate-tab:hover {
    background-color: #339643;
}

.searchDate-tab.active {
    background-color: #20672c;
}

.searchDate-tab:last-child {
    border-right: none;
}

.searchDate-content {
    padding: 10px;
    cursor: default;
}

#searchDate-dayContainer {
    display: none;
    text-align: center; /* Center the content horizontally */
    padding: 10px;
    margin-bottom: 10px;
}

.searchDate-dayLabel {
    font-size: 16px;
    margin-bottom: 10px;
    color: white;
    font-weight: bold;
}

#searchDate-dayInput {
    width: 100%;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
    display: inline-block; /* To align it with the label */
    margin: 0 auto; /* Center the input */
}

.searchDate-clearBtn {
    cursor: pointer;
    text-align: center;
    margin-top: 5px;
    margin-left: 20%;
    margin-right: 20%;
    transition: background-color 0.3s;
    border-radius: 4px;
}

.searchDate-clearBtn:hover {
    background-color: #666666;
}
















.symbol-label {
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: relative;
}

.symbol-label svg {
    width: 70%; 
    height: 70%;
}



.symbol-label:active,
input:checked + .symbol-label{
background-color: #20672c;
}
.symbol-label:active,
input:checked + .symbol-label:hover{
background-color: #339643;
}

.hover-div {
    display: none;
    position: absolute;
    background-color: #2b2b2b;
    color: white;
    padding: 5px;
    border: 1px solid #cccccc;
    z-index: 15;
    top: 100%; /* Position it below the symbol */
    left: 50%; /* Center it horizontally */
    transform: translateX(-50%); /* Adjust the position to truly center it */

    white-space: nowrap; 
}

.symbol-label:hover .hover-div {
    display: block;
}
.link-hover-info:hover .hover-div {
    display: block;
    color: #007BFF;
}
.link-hover-info{
    
    position: relative;
    display: inline-block;
    color: #007BFF;
}



.symbol-display-container {
    display: inline-block;
    position: relative;
    box-sizing: border-box; 
}

.symbol-display-container svg {
    width: 50px;
    height: 50px;
    padding: 5px;
}

.symbol-display-container:hover{
    background-color: #565656;
}



.symbol-display-container:hover .hover-div {
    display: block;
}















/* Hide the checkboxes */
.search-extras input[type="checkbox"], .search-settings input[type="checkbox"] {
    display: none;
}

/* Style the dropdown */
.dropdown-search-extras {
    position: absolute;
    top: 100%;
    width: 100%; /* Adjust as needed */


    box-sizing: border-box;
    z-index: 1;
}
 .dropdown-search-settings {
    position: absolute;
    top: 100%;
    width: 150px; /* Adjust as needed */


    box-sizing: border-box;
    z-index: 1;
}

/* Style the header */
#searchImgModels-header,
#searchimgIntent-header,
#searchImgCeleb-header,
#viewOptions-header,
#imageTags-header  {
    font-weight: bold;
    font-style: italic;
    padding: 6px;
    background-color: #2d2d2d; /* Adjust as needed */
    color: rgb(177, 177, 177);
}

/* Style the label */
.search-extras label, .search-settings label, #scrollButton label {
    display: block;
    width: 100%;
    padding: 10px;
    cursor: pointer;
    text-align: left;
}

/* Style the label on hover and active state */
.search-extras label:hover, .search-settings label:hover , #scrollButton label:hover {
background-color: #565656;
}

.search-extras input[type="checkbox"]:checked + label, .search-settings input[type="checkbox"]:checked + label {
    background-color: #20672c;
    color: #ffffff;
}

.search-extras input[type="checkbox"]:checked + label:hover , .search-settings input[type="checkbox"]:checked + label:hover {
    background-color: #339643;
    color: #ffffff;
}

/* Arrange the intentionality inputs side by side */
#search-imgIntent input[type="checkbox"] + label {
    display: inline-block;
    width: 30.00%; /* For three side by side */
    text-align: center;
}

/* Ensure models and notoriety labels take one line each */
#search-imgModels .searchImgModels-inputContainers,
#search-imgCeleb {
    width: 100%;
}

/* Adjust padding for intentionality labels */
#search-imgIntent label {
    padding: 10px 0; /* Adjust as needed */
}








.listsContainer {
    display: flex; /* Enable Flexbox */
    justify-content: space-between; /* Distribute space between columns */
    align-items: flex-start; /* Align items to the start of the container */
    flex-wrap: wrap; /* Allow the items to wrap as needed */
  }
  
  .list {
    display: block;
    flex: 0 0 18%; /* Do not grow, do not shrink, start at 18% of the parent container */
    margin: 1%; /* Provide some space between the columns */
    box-sizing: border-box; /* Include padding and borders in the element's total width and height */
  }

  @media (max-width: 768px) { /* Adjust breakpoint as needed */
    .list {
      flex: none; /* Disable flex behavior */
      width: 100%; /* Make each list take the full width */
      margin: 0; /* Remove extra margins for a cleaner look */
    }
  }

  .mobile-tab-list {
    color: white;
    padding: 10px;
    cursor: pointer;
  }
  
  .mobile-tab-list.active {
    background-color: #20672c;
    border-radius: 5px;
  }

  @media (max-width: 768px) { /* Adjust the breakpoint as needed */
    .listsContainer .list {
      display: none; /* Hide all lists by default on mobile */
    }
    .listsContainer .list#imgBrandList {
      display: block; /* Show only the Brand list by default */
    }
  }


.listItem:hover {
    background-color: #20672C;
    color: white;
    cursor: pointer;
}

.lists-header {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    font-size: 18px;
    padding-bottom: 20px;
    color :#20672C;
}

.sort-buttons {
    margin-left: 5px;
    display: flex;
    gap: 10px; /* Space between the buttons */
    margin-bottom: 10px; /* Space between the buttons and the lists */
}

.sortlists-name, .sortlists-count {
    padding: 5px 10px;
    border: 1px solid #ccc;
    color: #ccc;
    cursor: pointer;
    border-radius: 5px;
}

.sortlists-name:hover, .sortlists-count:hover {
    background-color: #20672C;
    color: white;
}

.sortLists-active {
    background-color: #20672C;
    color: white;
    border: 1px solid #ccc;
}