.flexboxContainer {
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 0;
  margin: 0;
}





.copyLinkToClipboardBtnContainer {
  /* Your existing styles */
  cursor: pointer;
}

.imgCopyToClipboardBtnHover {
  /* Your existing styles */
}

.copyImgToClipboardBtnhighlight {
  background-color: #339643;
  /* Add any other highlight styles you need */
}


.imgDesc {
  z-index: 1500;
}


.imgFetch-row{
  padding-top: 20px;
  padding-bottom: 60px;
}

.imgFetchHeaders{
  font-style: italic;
  font-size: 19px;
  color: #808080; /* Lighter color for dark background */
  margin-bottom: 5px; /* Added for better spacing */
}

.imgDescBox img {
  width: 100%;
  height: auto;
}

.imgResults{
  cursor: pointer;
  transition: transform 0.3s ease; /* Added for subtle hover effect */
  z-index: 1;
}

.imgResults:hover{
  box-shadow: #339643 0px 0px 20px;
}

.imgDataContainer {
  display: flex;
  align-items: center;
  width: 100%;
}

.imgDataFetch {
  white-space: nowrap; 
  text-overflow: ellipsis; /* Adds an ellipsis when the text overflows */
  flex-grow: 1; /* Allows the element to take up the remaining space */
}

.imgParamEditContainer {
  height: 20px;
  width: 20px; /* Assuming you also want a width of 20px, adjust if needed */
  margin-left: 10px; /* Adds some spacing between imgDataFetch and imgParamEditContainer */
}

.imgParamEditContainer svg {
  height: 1em; /* SVG height relative to font size */
  transition: background-color 0.3s ease; /* Smooth transition on hover */
  color: #cfcfcf; /* Lighter color for dark background */
}


.imgParamEditContainer svg:hover{
  background-color: #339643; /* Darker shade for hover on dark background */
  cursor: pointer;
}


.imgParamEditBtns{
  float: right;
  margin-right: 10px;
  z-index: 2000 !important;
}
.flex{
  display: flex;
  padding: 0;
}
.imgEditInputOK {
  display: flex;           /* Turn it into a flex container to center its content */
  flex: 1;    
  justify-content: center; /* Horizontally center content */
  align-items: center;     /* Vertically center content */
  height: 50px;
border-radius: 8px;
}
.imgEditInputOK svg{
  width: 36px;             /* Take full width of the column */
height: 36px;
padding: 5px;
}
.imgEditInputOK:hover {
  background-color: #339643;
}

.contextTextArea{
  width: 100%;
  margin-bottom: 10px;
  background-color: #565656;
  color: white;
}

.descboxImg{
  position: relative;
}
#imgParamEdit-imgURL{
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    padding: 5px;
    border-radius: 8px;
    background-color: rgba(154, 154, 154, 0.6);
}
#imgParamEdit-imgURL:hover{
  background-color: #339643;
}


.imgEditInput {
  width: 100%; /* Make sure input takes full width */
  box-sizing: border-box; /* Ensure padding and borders are included in width */
}








.imgFetch-MarginBottom{
  margin-bottom: 50px;
}
.imgFetch-MarginTop{
  margin-top: 50px;
}

.imgFetch-Symbols{
  margin-bottom: 10px;
}
#imgDataFetch-imgCountry, #imgDataFetch-imgSubCategory{
  margin-bottom: 8px;
}
.imgFetch-Highlight{
  border-radius: 3px;
  padding-top: 15px;
  padding-bottom: 15px;
  margin-bottom: 20px;
}

.imgFetch-Highlight:hover{
  background-color: #2d2d2d;
  box-shadow: #339643 0px 0px 20px;
}


@media (max-width: 768px) {
  .imgFetch-Highlight{
    padding-top: 0;
    padding-bottom: 0;
  }
}














.sideBtnsContainer {
  position: fixed; /* Fix position on mobile */
  top: 60px;
  right: 10px;
  text-align: center; /* This will center the inline-block or inline elements */
  z-index: 500;
}

@media (max-width: 768px) {
  .sideBtnsContainer {
      background-color: rgba(0, 0, 0, 0.5); /* Black background with 0.8 opacity */
      border-radius: 8px; /* 8px border radius */
      z-index: 500;
  }
}



/* 1. Stack divs on top of each other */
.sideBtn {
  z-index: 13;
  display: block; 
  position: relative; 
  margin-bottom: 5px; /* Space between each div */
  border-radius: 8px;
  padding: 7px;
  cursor: pointer;
}

/* 2. Ensure SVGs inside the divs are of the same size */
.sideBtn svg {
  width: 35px;
}



/* Show the hover divs when the respective button or its SVG is hovered over */
.sideBtn:hover .imgDescBtnHover
 {
  display: block;
}




/* Opacity on hover for imgDescClose */
.sideBtn:hover {
  background-color: #565656;
}


/* Active class for imgHistoryBtn */
.sideBtn.active {
  background-color: green;
  border-radius: 8px;
}


/* 3. Hide the hover divs by default */
.imgEditorBtnHover, .imgHistoryBtnHover, .imgCopyToClipboardBtnHover, .imgBookmarkBtnHover, .imgCopyToClipboardBtnURLHover, .AIsearchButtonImgDescBtnHover, .imgDuplicateImgInfoBtnHover {
  display: none;
  position: absolute;
  left: auto;      /* Reset the left value */
  right: 150%;     /* Adjust this value for space between hover div and button */
  top: 50%;        /* Start at the middle of the parent div */
  transform: translateY(-50%); 
  z-index: 10;
}











#bookmarks {
  display: flex;
  align-items: center; /* This will align the items vertically in the middle */
  justify-content: space-between; /* This will put a space between the button and the square */
  width: 100%; /* Assumes that the #bookmarks div should take up 100% of its parent's width */
}
  
#addToBookmark {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1; /* Takes up the remaining space in the flex container */
  height: 50px; /* Arbitrary height, set this to whatever you want */
}
  
#viewCount, #bookmarkCount {
  display: inline-flex;
  align-items: center;
  color: #808080;
  font-style: italic;
  padding-right: 10px;
}

#bookmarkCount svg, #viewCount svg {
  width: 30px;
  height: 30px;
  fill: #808080;
  padding-right: 7px;
}

#bookmarkCount:hover {
  color: hsl(131, 37%, 65%);
  cursor: pointer;
}

  
.loginToBookmark {
  background-color: darkslategrey;
}  
.verifyToBookmark {
  background-color: red;
}
.bookmarkBtn {
  background-color:#20672c;
}
.bookmarkedBtn {
  background-color:#3150b3;
}

.loginToBookmark, .verifyToBookmark {
  cursor: not-allowed;
}
.bookmarkBtn, .bookmarkedBtn {
  cursor: pointer;
}



























.verticalAlign {
  display: flex;
  align-items: center; /* Center vertically */
}




.imgIntentLabel{
  display: flex; 
align-items: center; /* Center vertically */
justify-content: center; /* Center horizontally */
cursor: pointer;
position: relative;
padding-left: 15px;
padding-right: 15px;
border-radius: 8px;
}
.imgIntentLabel:hover{
  
 background-color: #565656;
  }



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



.imgSubCategorySelectContainer{   
  flex: 1;  /* This ensures that the container takes up all available space */
  width: 100%; 
  margin-bottom: 10px;
}


.deleteNameBtn, .deleteBrandBtn, .deleteLinkBtn, .deleteCreditBtn{  
  margin-left: 5px;  
  padding: 10px;
  border-radius: 8px;          
  flex-shrink: 0;  
}
.deleteUploadBtn {
  position: absolute; /* Position the delete button next to the input */
  right: 5px; /* Align it to the right of the wrapper */
  top: 50%; /* Vertically center it */
  transform: translateY(-50%); /* Adjust for proper centering */
  padding: 10px;
  border-radius: 8px;          
}

.deleteNameBtn svg, .deleteBrandBtn svg, .deleteLinkBtn svg, .deleteCreditBtn svg, .deleteUploadBtn svg {  
  width: 25px;
  height: 25px;
}

.deleteNameBtn:hover, .deleteBrandBtn:hover, .deleteLinkBtn:hover, .deleteCreditBtn:hover, .deleteUploadBtn:hover {  
  background-color: #565656;
}


.imgDescModelsNameEditInputWrapper, .imgDescBrandEditInputWrapper, .imgDescCreditEditInputWrapper, .imgDescLinkToItEditInputWrapper {
  display: flex;              
  align-items: center;        
  margin-bottom: 5px;        
  width: 100%;                
  box-sizing: border-box; 
}
.input-wrapper {
  display: flex;           
  flex-direction: column; /* Stack the suggestions below the input field */
  position: relative;    
}

.imgDescModelsNameEditInputWrapper input, .imgDescBrandEditInputWrapper input,  .imgDescCreditEditInputWrapper input, .imgDescLinkToItEditInputWrapper input {
  flex-grow: 1;               /* Allows the input to grow and take up the available space */
  margin-right: 10px;         
  width: 0;                   /* Start with a width of 0 but let it grow */
  box-sizing: border-box; 
  display: flex;
  max-width: calc(100% - 40px);   
  margin: 0 !important;
  padding: 5px 5px !important
}

.input-wrapper-upload-dynamic input{
  flex-grow: 1;               /* Allows the input to grow and take up the available space */
  margin-right: 10px;         
  width: 0;                   /* Start with a width of 0 but let it grow */
  box-sizing: border-box; 
  display: flex;
  max-width: calc(100% - 60px);   
}

.inputFieldsContainer{
  
  box-sizing: border-box; 
}




/* Style the checkbox labels corresponding to those checkboxes */
.imgModelsEditCheckboxContainer input[type="checkbox"][name="imgModels-edit"] + label,
.imgModelsUploadCheckboxContainer input[type="checkbox"][name="imgModels"] + label {
  display: block;
  background-color: #565656;
  color: #fff;
  padding: 7px  12px; 
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 5px;
  transition: background-color 0.1s ease; /* smooth color transition */
}

/* Hover effect for labels corresponding to those checkboxes */
.imgModelsEditCheckboxContainer input[type="checkbox"][name="imgModels-edit"] + label:hover,
.imgModelsUploadCheckboxContainer input[type="checkbox"][name="imgModels"] + label:hover {
  background-color: #339643;
}

/* Style the label when the associated checkbox with specific names is checked */
input[type="checkbox"][name="imgModels-edit"]:checked + label,
input[type="checkbox"][name="imgModels"]:checked + label{
  background-color: #20672c;
}

/* Hover effect for the label when checkbox with specific names is checked */
input[type="checkbox"][name="imgModels-edit"]:checked + label:hover,
input[type="checkbox"][name="imgModels"]:checked + label:hover {
  background-color: #339643;
}


/* Active (click) effect for labels corresponding to those checkboxes */
.imgModelsEditCheckboxContainer input[type="checkbox"][name="imgModels-edit"] + label:active,
.imgModelsUploadCheckboxContainer input[type="checkbox"][name="imgModels"] + label:active {
  background-color: #a4d7a5; /* Lighter green for the click effect */
}

/* Active (click) effect for the label when checkbox with specific names is checked */
input[type="checkbox"][name="imgModels-edit"]:checked + label:active,
input[type="checkbox"][name="imgModels"]:checked + label:active {
  background-color: #a4d7a5; /* Lighter green for the click effect */
}







/* Style the checkbox labels corresponding to those checkboxes */
.imgCelebEditCheckboxContainer input[type="radio"][name="edit-imgCeleb"] + label,
.imgCelebUploadCheckboxContainer input[type="radio"][name="upload-imgCeleb"] + label {
  display: block;
  background-color: #565656;
  color: #fff;
  padding: 7px  12px; 
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 5px;
  transition: background-color 0.3s ease; /* smooth color transition */
}

/* Hover effect for labels corresponding to those checkboxes */
.imgCelebEditCheckboxContainer input[type="radio"][name="edit-imgCeleb"] + label:hover,
.imgCelebUploadCheckboxContainer input[type="radio"][name="upload-imgCeleb"] + label:hover {
  background-color: #339643;
}

/* Style the label when the associated checkbox with specific names is checked */
input[type="radio"][name="edit-imgCeleb"]:checked + label,
input[type="radio"][name="upload-imgCeleb"]:checked + label {
  background-color: #20672c;
}

/* Hover effect for the label when checkbox with specific names is checked */
input[type="radio"][name="edit-imgCeleb"]:checked + label:hover,
input[type="radio"][name="upload-imgCeleb"]:checked + label:hover {
  background-color: #339643;
}




.addBtnUpload{
  margin-left: 10px;
  background-color: black;
  border:#808080 1px solid;
  cursor :pointer;
  color: #808080;
}
.addBtnUpload:hover{
  color: black;
  background-color: #fff;
}





.imgDescLinkToItHover{
  position: relative;
}
#imgDataFetch-imgLinkToIt svg{
  width: 30px;
  margin-left: 15px;
}
.imgDescLinkToItHover a:hover .hover-div{
  display: block;
}
/* Apply hover only to the links */
.imgDescLinkToItHover a:hover {
  background-color: #565656;
  color: white;
}
.imgDataContainer-imgLinkToIt{ 
  align-items: center; /* This will align child items vertically in the center */
  height: 100%;
}

 .imgDataContainer-imgBrand, .imgDataContainer-imgTitle,
.imgDataContainer-imgCredit, .imgDataContainer-imgIntent, .imgDataContainer-imgModels,
.imgDataContainer-imgCeleb, .imgDataContainer-imgModelsName{
  

  display: flex;
  align-items: center; /* This will align child items vertically in the center */
 
  height: 100%;
}

#imgDataFetch-imgUserContext {
  white-space: pre-wrap; /* Respect line breaks and formatting in the text */
  word-wrap: break-word; /* Break long words to fit within the container */
  overflow-wrap: break-word; /* Ensure words break to prevent overflow */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  line-height: 1.6; /* Optional: Improve text readability */
}


.imgDayStyle {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  margin-top: 8px;
}
#imgEditInput-imgCredit{
  width: 100%;
}

.imgDescNoValue{
  color: #808080 !important;
}

.dropdown-edit-region select{
  width: 100%;
}



.unsavedChanges {
     /* Enable flexbox for buttons */
  justify-content: center; /* Center children horizontally */
  width: 100%;     
}
.button-container{
  display: flex;          /* Enable flexbox for buttons */
  justify-content: center; /* Center children horizontally */
  width: 100%;            /* Take full width of the parent */
  gap: 10px;              /* Space between buttons */
  margin-top: 20px;
}

/* Common styles for both buttons */
.windowBtn {
  display: inline-block; /* Display side by side */
  padding: 5px 20px; /* Adjust as needed for padding */
  cursor: pointer; /* Hand cursor on hover */
  border: 1px solid #565656; /* Border color */
  border-radius: 8px;
  transition: background-color 0.3s; /* Smooth transition for hover effect */
}

/* Hover effect */
.windowBtn:hover{
  background-color: #339643;
}







/*full screen mask*/


#fullscreenImageContainer {
  position: relative;
  max-width: 100%;
  max-height: 100%;
}

#fullscreenOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.fullscreenImageBase {
  object-fit: contain;
  width: 100%;
  height: 100vh;
}

.fullscreenImageMove {
  object-fit: contain;
  width: auto;
  height: auto;
}

.zoomed {
  transform: scale(2);
  cursor: move;
}


#fullscreenImage.zoomed {
  pointer-events: auto;
}



#imageBox-imgURL {
  cursor:pointer 

}




.clickTagForSearch:hover{
  color: hsl(131, 37%, 65%);
  cursor:pointer
}