.form-control-feedback {top: 9px !important;}.selectbox {width:100%; padding: 6px 12px;}
 .Thumbanail--Product{display: inline-block; float: left; width: calc(33.33%);width: -moz-calc(33.33%);width: -webkit-calc(33.33%); position: relative; padding-top: 10px; padding-bottom: 20px;}
    .Thumbanail--Product:nth-of-type(3n + 4){clear: left;}
    .Product__Img{display: inline-block; float: left; width: calc(100% - 30px);width: -moz-calc(100% - 30px);width: -webkit-calc(100% - 30px); margin-left: 15px; margin-right: 15px; z-index: 1; position: relative;}
    .Product__Img img{width: 100%; max-width: 100%; float: left; display: inline-block;}
    .abs__pro{color: #fff; background: #3175B6; border:1px solid #fff; z-index: 3; position:absolute; top: -5px; width: 29px; height: 29px; line-height: 29px; vertical-align: middle; right: 5px; -moz-border-radius: 50%;-webkit-border-radius: 50%;border-radius: 50%; background-clip: padding-box; font-size: 21px; text-align: center;}
    .abs__pro span{font-size: 21px;}
    .abs__pro:hover,
    .abs__pro:focus,
    .abs__pro:active{text-decoration: none; font-size: 21px; color: #fff; background-color: #ff0000;}
.loadingDiv {background-color: rgba(0, 0, 0, 0.6); background-image: url("../../images/ajax-loader.svg");background-position: center center;background-repeat: no-repeat;height: 100%;opacity: 1;position: fixed;right: 0;top: 0;width: 100%;z-index: 10000000;}

/* Fix grid of user tiles */
/* Should be adjusted for different screen widths */
/*
.grid-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 20px;
}
*/
.group-grid {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns on phone */
  grid-gap: 10px;
}

@media (min-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(4, 1fr); /* 4 columns on medium width device */
  }
}

@media (min-width: 1200px) {
  .grid-container {
    grid-template-columns: repeat(5, 1fr); /* 6 columns on full screen desktop browser */
  }
}

@media (min-width: 1410px) {
  .grid-container {
    grid-template-columns: repeat(6, 1fr); /* 6 columns on full screen desktop browser */
  }
}

.group-tiles-portlet {
  padding: 10px 0 0 5px !important;
}
.group-tiles-usertitle {
  text-align: center;
  margin-top: 8px;
}

/* Alternate approach without the grid-container */
/* For small screens (phones) - 2 tiles per row */
/* For medium screens (tablets) - 4 tiles per row */
/* For large screens (desktops) - 6 tiles per row*/
/* Clear the margin-right on every 6th tile */
/*
@media (max-width: 767px) {
  .group-grid {
    width: 50%;
    margin-bottom: 10px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .group-grid {
    width: 25%;
    margin-bottom: 10px;
  }
}

@media (min-width: 992px) {
  .group-grid {
    width: 16.666%;
    margin-right: 2%;
    margin-bottom: 10px;
  }
  
  .group-grid:nth-child(6n) {
    margin-right: 0;
  }
}
*/


/* ========================================
   SELECT2 DARK MODE FIX - Selected Items Text Color
   Fixes for our new theme
   ======================================== */

/* FIXED: Selected items (pills/tags) in multi-select - WHITE TEXT instead of body-color */
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice,
.theme-dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: rgba(var(--tblr-primary-rgb), 0.3) !important;
    border-color: var(--tblr-primary) !important;
    color: #ffffff !important; /* WHITE TEXT - readable on dark semi-transparent background */
}

/* FIXED: Remove button (X) on selected items - ALSO WHITE */
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
.theme-dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #ffffff !important; /* WHITE TEXT for X button */
    border-right-color: var(--tblr-primary) !important;
}

/* ========================================
   SELECT2 DARK MODE FIX - Search Input Text Color
   Fixes for our new theme
   ======================================== */

/* FIXED: Text color in the search box within the dropdown */
[data-bs-theme="dark"] .select2-search--dropdown .select2-search__field,
.theme-dark .select2-search--dropdown .select2-search__field {
    background-color: var(--tblr-bg-surface-dark) !important;
    border-color: var(--tblr-border-color) !important;
    color: #ffffff !important; /* WHITE TEXT - readable when typing */
}

/* FIXED: Placeholder text in search box */
[data-bs-theme="dark"] .select2-search--dropdown .select2-search__field::placeholder,
.theme-dark .select2-search--dropdown .select2-search__field::placeholder {
    color: rgba(255, 255, 255, 0.5) !important; /* Semi-transparent white for placeholder */
}

/* FIXED: Search input within inline multi-select (if used) */
[data-bs-theme="dark"] .select2-search--inline .select2-search__field,
.theme-dark .select2-search--inline .select2-search__field {
    color: #ffffff !important; /* WHITE TEXT when typing inline */
}

[data-bs-theme="dark"] .select2-search--inline .select2-search__field::placeholder,
.theme-dark .select2-search--inline .select2-search__field::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}


/* ========================================
   SUMMERNOTE DARK MODE IMPROVEMENTS
   Fixes for our new theme
   Fix button styling, alignment, and heights
   ======================================== */

/* Fix button group alignment and consistent heights */
[data-bs-theme="dark"] .note-toolbar .note-btn-group,
.theme-dark .note-toolbar .note-btn-group {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    margin-right: 0.25rem !important;
    margin-bottom: 0.25rem !important;
}

/* Standardize button appearance and sizing */
[data-bs-theme="dark"] .note-btn,
.theme-dark .note-btn {
    color: rgba(255, 255, 255, 0.8) !important; /* Softer white, not harsh bright white */
    background-color: rgba(255, 255, 255, 0.05) !important; /* Very subtle background */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0.375rem 0.5rem !important; /* Consistent padding */
    height: 2rem !important; /* Fixed height for all buttons */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0.25rem !important;
}

/* Button hover state - more subtle */
[data-bs-theme="dark"] .note-btn:hover,
.theme-dark .note-btn:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Active/pressed button state */
[data-bs-theme="dark"] .note-btn:active,
[data-bs-theme="dark"] .note-btn.active,
.theme-dark .note-btn:active,
.theme-dark .note-btn.active {
    background-color: rgba(var(--tblr-primary-rgb), 0.3) !important;
    color: #ffffff !important;
    border-color: var(--tblr-primary) !important;
}

/* Fix dropdown toggle buttons to match */
[data-bs-theme="dark"] .note-btn.dropdown-toggle,
.theme-dark .note-btn.dropdown-toggle {
    height: 2rem !important;
}

/* Ensure icons inside buttons are properly sized and colored */
[data-bs-theme="dark"] .note-btn i,
.theme-dark .note-btn i {
    color: inherit !important;
    font-size: 0.875rem !important;
    line-height: 1 !important;
}

/* Fix color palette buttons specifically */
[data-bs-theme="dark"] .note-color .note-btn,
.theme-dark .note-color .note-btn {
    padding: 0.25rem 0.375rem !important;
}

/* Ensure toolbar has consistent padding and alignment */
[data-bs-theme="dark"] .note-toolbar,
.theme-dark .note-toolbar {
    padding: 0.5rem 0.75rem !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.25rem !important;
}

/* Fix separator lines between button groups */
[data-bs-theme="dark"] .note-toolbar .dropdown-divider,
.theme-dark .note-toolbar .dropdown-divider {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ========================================
   SUMMERNOTE TEXT SELECTION HIGHLIGHTING FIX
   Make highlighted/selected text visible in dark mode
   ======================================== */

/* Fix text selection highlighting in Summernote editor - dark mode */
[data-bs-theme="dark"] .note-editing-area .note-editable::selection,
[data-bs-theme="dark"] .note-editing-area .note-editable *::selection,
.theme-dark .note-editing-area .note-editable::selection,
.theme-dark .note-editing-area .note-editable *::selection {
    background-color: rgba(66, 153, 225, 0.5) !important; /* Light blue highlight */
    color: #ffffff !important; /* White text */
}

/* Alternative: Use primary color for selection */
[data-bs-theme="dark"] .note-editing-area .note-editable::-moz-selection,
[data-bs-theme="dark"] .note-editing-area .note-editable *::-moz-selection,
.theme-dark .note-editing-area .note-editable::-moz-selection,
.theme-dark .note-editing-area .note-editable *::-moz-selection {
    background-color: rgba(66, 153, 225, 0.5) !important; /* Light blue highlight */
    color: #ffffff !important; /* White text */
}