/* Labgrown */
:root {
    --heigh-hlight-color-jew: #70CBFF;
    --main-background-color: #04212F;
    --main-background-color-retail: #171717;
    ;
    --main-background-color-light: #18384A;
    --main-background-color-light-retail: #262626;
    ;
    --white-font-color: #ffffff;
}

.certified-theme-labgrown .front_custom_button {
    /* color: white !important; */
    border: 1px solid var(--heigh-hlight-color-jew) !important;
    background-color: transparent;

}

.certified-theme-labgrown .front_custom_button:hover {
    background-color: var(--heigh-hlight-color-jew);
    color: black !important;
}

.certified-theme-labgrown .front_labgrown_btn {
    background-color: var(--main-background-color) !important;
    color: #ffffff !important;
}

.certified-theme-labgrown .dia_tab {
    /* Styles are handled in the redesign section below */
}

.certified-theme-labgrown .dia_tab:hover {
    /* Styles are handled in the redesign section below */
}

.certified-theme-labgrown .front-inv-tab-row .active {
    /* Styles are handled in the redesign section below */
}

/* .certified-theme-labgrown .table-list>thead>tr>th {
    border: none !important;
    color: #ffffff !important;
    background-color: #18384A !important;
}

.certified-theme-labgrown .table-list>tbody>tr>td:not(.blank_line) {
    border: 1px solid var(--heigh-hlight-color-jew) !important;
    border-top: 1px solid black !important;
    color: white;
} */

.certified-theme-labgrown .blank_line {
    border-bottom: 1px solid var(--main-background-color) !important;
}

/* .certified-theme-labgrown .table-list td {
    color: black;
    font-weight: lighter;
} */

.certified-theme-labgrown .advance_srch a:hover,
td a:hover {
    color: white !important;
}

.table-list>thead>tr>td,
.table-list>thead>tr>th {
    border: 1px solid var(--heigh-hlight-color-jew);

}

.title,
.footer_text {
    color: white !important;
}

/*.bg-list-header{*/
/*.    background-color: #18384A !important;*/
/*}*/

.btn .search {
    color: var(--white-font-color) !important;
}

.certified-theme-natural .front_custom_button.active {
    background-color: #007D79 !important;
    color: var(--white-font-color);
}

.certified-theme-labgrown .front_custom_button.active i {
    color: black !important;
}

.certified-theme-labgrown .front_custom_button.active {
    background-color: var(--heigh-hlight-color-jew) !important;
    color: black !important;

}

.front_custom_button {
    border: 1px solid var(--heigh-hlight-color-jew) !important;
    border-radius: 5px !important;
    color: white !important;
    margin: 2px 0;
}

/* ==========================================================================
   Redesign UI for certified diamonds index page to match reference image
   ========================================================================= */

:root {
    --theme-teal: #007d79;
    --theme-teal-glow: rgba(0, 125, 121, 0.1);
    --heigh-hlight-color-jew: #a47e43;
    --bg-darkest: #fdfdfd;
    --bg-card: #ffffff;
    --bg-button: #ffffff;
    --text-white: #1e293b;
    --text-grey: #64748b;
}

/* Natural theme variable bindings */
.certified-theme-natural {
    --highlight-color: var(--theme-teal) !important;
    --highlight-color-glow: rgba(0, 125, 121, 0.12) !important;
    --highlight-color-border: rgba(0, 125, 121, 0.22) !important;
    --highlight-color-faint: rgba(0, 125, 121, 0.04) !important;
    --theme-gradient: linear-gradient(135deg, #005f5b 0%, #009c96 100%) !important;
    --panel-bg: linear-gradient(180deg, #f5fcfc 0%, #ffffff 100%) !important;
    --table-header-bg: #f2fafa !important;
    --watermark-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' stroke='rgba%280%2C 125%2C 121%2C 0.02%29' stroke-width='0.5' fill='none'%3E%3Cpolygon points='50%2C10 85%2C35 50%2C90 15%2C35'/%3E%3Cline x1='50' y1='10' x2='50' y2='90'/%3E%3Cline x1='15' y1='35' x2='85' y2='35'/%3E%3C/svg%3E") !important;
}

/* Labgrown theme variable bindings */
.certified-theme-labgrown {
    --highlight-color: var(--heigh-hlight-color-jew) !important;
    --highlight-color-glow: rgba(164, 126, 67, 0.12) !important;
    --highlight-color-border: rgba(164, 126, 67, 0.22) !important;
    --highlight-color-faint: rgba(164, 126, 67, 0.04) !important;
    --theme-gradient: linear-gradient(135deg, #8c6830 0%, #c5a059 100%) !important;
    --panel-bg: linear-gradient(180deg, #fdfbf7 0%, #ffffff 100%) !important;
    --table-header-bg: #faf6ef !important;
    --watermark-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' stroke='rgba%28164%2C 126%2C 67%2C 0.02%29' stroke-width='0.5' fill='none'%3E%3Cpolygon points='50%2C10 85%2C35 50%2C90 15%2C35'/%3E%3Cline x1='50' y1='10' x2='50' y2='90'/%3E%3Cline x1='15' y1='35' x2='85' y2='35'/%3E%3C/svg%3E") !important;
}

/* Global Background Override */
body {
    background-color: var(--bg-darkest) !important;
    font-family: 'Nunito', 'Segoe UI', Arial, sans-serif !important;
    color: #1e293b !important;
}

/* Search panel card container */
.search-panel-card {
    background-image:
        url("../../img/front_web_new/images/float-diamond-1.png"),
        url("../../img/front_web_new/images/diamond-small.png"),
        var(--panel-bg) !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-position: left 20px center, left 90px bottom 15px, center !important;
    background-size: 65px auto, 25px auto, cover !important;
    border: 1.5px solid var(--highlight-color-border) !important;
    border-radius: 10px !important;
    padding: 20px 24px 20px 115px !important;
    margin-bottom: 20px !important;
    position: relative !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.search-panel-card::after {
    content: '' !important;
    position: absolute !important;
    top: -20px !important;
    right: -20px !important;
    width: 150px !important;
    height: 150px !important;
    background-image: var(--watermark-bg) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
}

/* Shapes panel card container */
.shapes-panel-card {
    background-image:
        url("../../img/front_web_new/images/float-diamond-1.png"),
        url("../../img/front_web_new/images/diamond-small.png"),
        var(--panel-bg) !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-position: left 20px center, left 90px bottom 15px, center !important;
    background-size: 65px auto, 25px auto, cover !important;
    border: 1.5px solid var(--highlight-color-border) !important;
    border-radius: 10px !important;
    padding: 20px 24px 20px 115px !important;
    /* margin-bottom: 25px !important; */
    position: relative !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

/* Master Search Header Layout */
.master-search-header-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
}

.search-header-left,
.search-header-right,
.search-header-center {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

@media (min-width: 992px) {
    .master-search-header-container {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important;
        align-items: center !important;
        gap: 15px !important;
        width: 100% !important;
        min-height: 50px !important;
    }

    .search-header-left {
        display: flex !important;
        justify-content: flex-start !important;
        width: auto !important;
    }

    .search-header-right {
        display: flex !important;
        justify-content: flex-end !important;
        width: auto !important;
    }

    .search-header-center {
        display: block !important;
        text-align: center !important;
        width: auto !important;
    }
}

@media (max-width: 1199px) {
    .search-header-center .title {
        font-size: 18px !important;
    }
}

/* Shapes Panel Header Layout */
.shapes-card-header {
    display: flex !important;
    justify-content: flex-end !important;
    margin-bottom: 12px !important;
    width: 100% !important;
}

@media (max-width: 767px) {
    .shapes-card-header {
        justify-content: center !important;
        margin-bottom: 10px !important;
    }
}

/* International Inventory Button */
.intl-inv-btn,
.certified-theme-labgrown .intl-inv-btn,
.certified-theme-natural .intl-inv-btn {
    display: inline-flex !important;
    align-items: center !important;
    background-color: #ffffff !important;
    border: 1px solid var(--highlight-color-border) !important;
    border-radius: 6px !important;
    color: var(--highlight-color) !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
}

.intl-inv-btn:hover,
.certified-theme-labgrown .intl-inv-btn:hover,
.certified-theme-natural .intl-inv-btn:hover {
    border-color: var(--highlight-color) !important;
    color: var(--highlight-color) !important;
    background-color: var(--highlight-color-faint) !important;
    box-shadow: 0 4px 10px var(--highlight-color-glow) !important;
}

.intl-inv-btn .globe-icon-wrap {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--highlight-color-faint) !important;
    border-radius: 50% !important;
    width: 22px !important;
    height: 22px !important;
    margin-right: 8px !important;
    transition: all 0.25s ease !important;
}

.intl-inv-btn i,
.certified-theme-labgrown .intl-inv-btn i,
.certified-theme-natural .intl-inv-btn i {
    color: var(--highlight-color) !important;
    font-size: 13px !important;
}

/* Center Title and Advanced Search Link */
.search-header-center .title {
    color: var(--highlight-color) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    margin: 0 0 8px 0 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

.advance-search-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
}

.btn-advanced-search {
    background: transparent !important;
    border: none !important;
    color: var(--highlight-color) !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
}

.btn-advanced-search:hover {
    color: var(--highlight-color) !important;
    opacity: 0.85;
}

.btn-advanced-search .search-link {
    border-bottom: 1px dotted var(--highlight-color) !important;
}

.btn-advanced-search i {
    font-size: 12px !important;
    color: var(--highlight-color) !important;
}

.btn-clear-search {
    color: #dc2626 !important;
    font-size: 12px !important;
    text-decoration: underline !important;
    transition: all 0.2s ease !important;
}

.btn-clear-search:hover {
    color: #ef4444 !important;
}

/* Natural vs Lab Grown Toggle Pills */
.stone-type-toggle-pill {
    display: inline-flex !important;
    background-color: #ffffff !important;
    border: 1px solid var(--highlight-color-border) !important;
    border-radius: 20px !important;
    padding: 2px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

.stone-type-toggle-pill .front_custom_button {
    border: none !important;
    border-radius: 18px !important;
    /* padding: 6px 16px !important; */
    font-size: 12px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    background-color: transparent !important;
    color: #475569 !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
}

.stone-type-toggle-pill .front_custom_button i {
    font-size: 11px !important;
    color: #64748b !important;
}

.stone-type-toggle-pill .front_custom_button.active {
    background: var(--theme-gradient) !important;
    color: #ffffff !important;
}

.stone-type-toggle-pill .front_custom_button.active i {
    color: #ffffff !important;
}

.stone-type-toggle-pill .front_custom_button:not(.active):hover {
    background-color: var(--highlight-color-faint) !important;
    color: var(--highlight-color) !important;
}

@media (max-width: 480px) {
    .stone-type-toggle-pill .front_custom_button {
        font-size: 10px !important;
        padding: 5px 8px !important;
    }
}

@media (max-width: 375px) {
    .stone-type-toggle-pill .front_custom_button {
        font-size: 9px !important;
        padding: 4px 6px !important;
    }
}

/* Shape Grid Tabs */
.front-inv-tabs {
    border: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
}

.front-inv-tab-row {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    width: 100% !important;
}

.certified-theme-natural .dia_tab,
.certified-theme-labgrown .dia_tab {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ffffff !important;
    border-radius: 6px !important;
    padding: 6px 6px !important;
    text-decoration: none !important;
    margin: 0 !important;
    transition: all 0.25s ease !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: auto !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    border: 1px solid var(--highlight-color-border) !important;
    white-space: normal !important;
    text-align: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

.certified-theme-natural .dia_tab {
    color: var(--theme-teal) !important;
}

.certified-theme-labgrown .dia_tab {
    color: var(--heigh-hlight-color-jew) !important;
}

.certified-theme-natural .dia_tab img.vector_img,
.certified-theme-labgrown .dia_tab img.vector_img {
    margin-right: 4px !important;
    width: 16px !important;
    transition: filter 0.25s ease !important;
    flex-shrink: 0 !important;
}

@media (max-width: 991px) {
    .front-inv-tab-row {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
    }

    .certified-theme-natural .dia_tab,
    .certified-theme-labgrown .dia_tab {
        font-size: 11px !important;
        padding: 6px 4px !important;
    }
}

@media (max-width: 768px) {
    .front-inv-tab-row {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .certified-theme-natural .dia_tab,
    .certified-theme-labgrown .dia_tab {
        font-size: 10.5px !important;
        padding: 6px 4px !important;
    }

    .certified-theme-natural .dia_tab img.vector_img,
    .certified-theme-labgrown .dia_tab img.vector_img {
        margin-right: 3px !important;
        width: 12px !important;
    }
}

@media (max-width: 575px) {
    .front-inv-tab-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    .certified-theme-natural .dia_tab,
    .certified-theme-labgrown .dia_tab {
        font-size: 10px !important;
        padding: 5px 4px !important;
    }

    .certified-theme-natural .dia_tab img.vector_img,
    .certified-theme-labgrown .dia_tab img.vector_img {
        margin-right: 2px !important;
        width: 10px !important;
    }
}

/* Active shape tab: Premium Gradient active states */
.certified-theme-natural .dia_tab.active {
    background: var(--theme-gradient) !important;
    border-color: var(--theme-teal) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px var(--highlight-color-glow) !important;
}

.certified-theme-labgrown .dia_tab.active {
    background: var(--theme-gradient) !important;
    border-color: var(--heigh-hlight-color-jew) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px var(--highlight-color-glow) !important;
}

.certified-theme-natural .dia_tab:hover:not(.active),
.certified-theme-labgrown .dia_tab:hover:not(.active) {
    background-color: var(--highlight-color-faint) !important;
    box-shadow: 0 2px 6px var(--highlight-color-glow) !important;
}

/* Share and Action Buttons Row */
.action-buttons-row {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

@media (min-width: 1025px) {
    .action-buttons-row {
        flex-direction: row-reverse !important;
        justify-content: flex-start !important;
    }
}

.action-buttons-row .front_custom_button {
    background-color: #ffffff !important;
    border: 1px solid var(--highlight-color-border) !important;
    color: var(--highlight-color) !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 !important;
    height: 36px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.25s ease !important;
}

.action-buttons-row .front_custom_button:hover {
    border-color: var(--highlight-color) !important;
    background: var(--theme-gradient) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px var(--highlight-color-glow) !important;
}

.action-buttons-row .front_custom_button i {
    color: var(--highlight-color) !important;
    transition: color 0.25s ease !important;
}

.action-buttons-row .front_custom_button:hover i {
    color: #ffffff !important;
}

/* Custom Share button square styling */
.action-buttons-row .action-share {
    width: 36px !important;
    padding: 0 !important;
}

/* General button margins fix */
.action-buttons-row .pull-right {
    float: none !important;
}

/* Data Table Container */
.table-responsive {
    background-color: #ffffff !important;
    border: 1.5px solid var(--highlight-color-border) !important;
    border-radius: 8px !important;
    padding: 0 !important;
    margin-top: 15px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02) !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
}

/* Desktop (1025px+): override forced width, no horizontal scroll */
@media (min-width: 1025px) {

    /* Override the 2200px fixed width from theme_base_common.css */
    #searchtable {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Compress columns to fit using auto layout */
    .table-list {
        table-layout: auto !important;
        width: 100% !important;
    }

    /* Tighten column padding to fit without overflow */
    .table-list>thead>tr.bg-list-header>th,
    .table-list>tbody>tr>td {
        font-size: 11px !important;
        padding: 8px 5px !important;
        white-space: nowrap !important;
    }
}

/* Mobile/Tablet (≤1024px): mobile cards are shown, table is hidden by diamonds-responsive.css */
@media (max-width: 1024px) {
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* Table Style Override */
.table-list {
    background-color: transparent !important;
    border: none !important;
    border-collapse: collapse !important;
    margin: 0 !important;
}

/* Table Header - Styled same as first reference image */
.table-list>thead>tr.bg-list-header {
    background-color: var(--table-header-bg) !important;
}

.table-list>thead>tr.bg-list-header>th {
    background-color: var(--table-header-bg) !important;
    color: #334155 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 8px !important;
    border: none !important;
    border-bottom: 2.5px solid var(--highlight-color) !important;
    border-right: 1px solid var(--highlight-color-border) !important;
    vertical-align: middle !important;
}

.table-list>thead>tr.bg-list-header>th:last-child {
    border-right: none !important;
}

/* Table Row and Body cells */
.table-list>tbody>tr.data {
    background-color: #ffffff !important;
    transition: background-color 0.2s ease !important;
}

.table-list>tbody>tr.data.even {
    background-color: #fafbfc !important;
}

.table-list>tbody>tr.data:hover {
    background-color: var(--highlight-color-faint) !important;
}

.table-list>tbody>tr.data.checked {
    background-color: var(--highlight-color-faint) !important;
}

.table-list>tbody>tr>td {
    border: 1px solid var(--highlight-color-border) !important;
    color: #334155 !important;
    font-size: 12.5px !important;
    padding: 10px 8px !important;
    vertical-align: middle !important;
}

/* Table Link Tags */
.table-list td a {
    color: var(--highlight-color) !important;
    text-decoration: underline !important;
    transition: all 0.2s ease !important;
}

.table-list td a:hover {
    color: #0f172a !important;
}

/* Certificate cell and link — theme aware */
.cert-td {
    color: var(--highlight-color) !important;
}

.cert-link {
    color: var(--highlight-color) !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
    transition: all 0.25s ease !important;
}

.cert-link:hover {
    color: #0f172a !important;
    text-decoration: underline !important;
}

.cert-no-link {
    color: var(--highlight-color) !important;
    font-weight: 500 !important;
}

/* Camera Video Icon */
.table-list td i.aero {
    color: var(--highlight-color) !important;
}

/* Checkboxes */
.table-list input[type="checkbox"] {
    accent-color: var(--highlight-color) !important;
}

/* Statuses Inside Table */
.dia-status-available {
    color: var(--highlight-color) !important;
    font-weight: 600 !important;
}

.dia-status-hold {
    color: var(--text-grey) !important;
}

.dia-status-new-arrival {
    color: var(--heigh-hlight-color-jew) !important;
}

.dia-status-upcoming {
    color: #7c3aed !important;
}

/* Pagination Custom styling */
.pagination {
    margin: 20px 0 !important;
    display: inline-flex !important;
    gap: 5px !important;
}

.pagination>li>a,
.pagination>li>span {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    transition: all 0.3s ease !important;
}

.pagination>li>a:hover {
    border-color: var(--highlight-color) !important;
    color: var(--highlight-color) !important;
    background-color: var(--highlight-color-faint) !important;
}

.pagination>.active>a,
.pagination>.active>span {
    background-color: var(--highlight-color) !important;
    border-color: var(--highlight-color) !important;
    color: #ffffff !important;
}

.pagination>.active>a:hover,
.pagination>.active>span:hover {
    background-color: var(--highlight-color) !important;
    border-color: var(--highlight-color) !important;
    color: #ffffff !important;
}

/* Dropdown styling */
select.form-control,
.dataTables_length select {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    border-radius: 4px !important;
    padding: 6px 12px !important;
    outline: none !important;
    transition: all 0.3s ease !important;
}

select.form-control:focus,
.dataTables_length select:focus {
    border-color: var(--highlight-color) !important;
    box-shadow: 0 0 8px var(--highlight-color-glow) !important;
}

/* Page footer text */
.footer_text,
.footer_text strong {
    color: var(--text-grey) !important;
}

/* ==========================================================================
   Mobile Cards Light Theme Overrides
   ========================================================================= */
@media (max-width: 1024px) {
    .mobile-card {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        color: #1e293b !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    }

    .mobile-card:hover {
        border-color: var(--highlight-color) !important;
    }

    .mobile-card.checked {
        background: var(--highlight-color-faint) !important;
        border-color: var(--highlight-color) !important;
        box-shadow: 0 0 10px var(--highlight-color-glow) !important;
    }

    .mobile-card .card-header {
        border-bottom: 1px solid #f1f5f9 !important;
    }

    .mobile-card .card-header .header-left .lot-no {
        color: var(--highlight-color) !important;
    }

    .mobile-card .card-header .header-right .cert-link {
        color: var(--highlight-color) !important;
    }

    .mobile-card .shape-name {
        color: var(--highlight-color) !important;
    }

    .mobile-card .carat-info {
        background: var(--highlight-color-faint) !important;
        color: var(--highlight-color) !important;
    }

    .mobile-card .card-body .body-top .carat-info {
        color: var(--highlight-color) !important;
    }

    .mobile-card .details-grid {
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
    }

    .mobile-card .details-grid .grid-item .grid-label {
        color: #64748b !important;
    }

    .mobile-card .details-grid .grid-item .grid-val {
        color: #0f172a !important;
    }

    .mobile-card .extra-details {
        border-top: 1px solid #f1f5f9 !important;
    }

    .mobile-card .extra-details .detail-row {
        color: #475569 !important;
    }

    .mobile-card .extra-details .detail-row strong {
        color: #0f172a !important;
    }

    .mobile-card .card-footer {
        border-top: 1px solid #f1f5f9 !important;
    }

    .mobile-card .card-footer .footer-left .media-btn {
        background: #f1f5f9 !important;
        color: #475569 !important;
        border: 1px solid #e2e8f0 !important;
    }

    .mobile-card .card-footer .footer-left .media-btn:hover {
        background: var(--highlight-color-faint) !important;
        color: var(--highlight-color) !important;
        border-color: var(--highlight-color) !important;
    }

    .mobile-card .card-footer .footer-left .media-btn i {
        color: var(--highlight-color) !important;
    }

    .mobile-card .card-footer .footer-right .price {
        color: var(--highlight-color) !important;
    }
}

/* ==========================================================================
   Advanced Search Modal Light Theme Overrides (Overriding inline styles)
   ========================================================================= */
/* ==========================================================================
   Advanced Search Modal Light Theme Overrides (Mockup-Style UI redesign)
   ========================================================================= */

#search .modal-dialog {
    color: #1e293b !important;
    max-width: 600px !important;
    width: 95% !important;
    margin: 20px auto !important;
}

#search .modal-content {
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
}

/* Modern Header Layout */
.modal-header-modern {
    display: flex !important;
    align-items: center !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    background-color: #ffffff !important;
    position: relative !important;
}

.modal-header-modern .search-icon-box {
    width: 32px !important;
    height: 32px !important;
    border-radius: 6px !important;
    background-color: var(--highlight-color-faint) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

.modal-header-modern .search-icon-box i {
    color: var(--highlight-color) !important;
    font-size: 14px !important;
}

.modal-header-modern .search-title-text {
    flex-grow: 1 !important;
}

.modal-header-modern .modal-title-modern {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
}

.modal-header-modern .modal-subtitle-modern {
    margin: 1px 0 0 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    color: #64748b !important;
}

.modal-header-modern .close-btn {
    background: transparent !important;
    border: none !important;
    font-size: 18px !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
    padding: 2px !important;
    line-height: 1 !important;
}

.modal-header-modern .close-btn:hover {
    color: #0f172a !important;
}

/* Modal Body */
#search .modal-body {
    background-color: #ffffff !important;
    color: #334155 !important;
    padding: 12px 16px !important;
}

/* Section Labels */
#search .modal-body label,
#search .modal-body label b {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    margin-bottom: 4px !important;
    margin-top: 8px !important;
    display: block !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

#search .diamond-search-extra label {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
}

/* Search input group override */
#search .page-search .input-group:not(.search-input-wrapper) {
    width: 100% !important;
    display: flex !important;
    position: relative !important;
    /* border: 1px solid #cbd5e1 !important; */
    border-radius: 6px !important;
    overflow: hidden !important;
    transition: all 0.2s ease !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    margin-top: 2px !important;
    margin-bottom: 8px !important;
}

#search .page-search .input-group:focus-within {
    border-color: var(--highlight-color) !important;
    box-shadow: 0 0 0 2px var(--highlight-color-glow) !important;
}

#search .page-search .input-group input[type="search"] {
    border: none !important;
    height: 32px !important;
    font-size: 12px !important;
    color: #1e293b !important;
    padding: 4px 10px !important;
    flex-grow: 1 !important;
    background: transparent !important;
    font-weight: 500 !important;
}

#search .page-search .input-group-btn {
    display: flex !important;
    align-items: center !important;
}

#search .page-search .input-group-btn button {
    background: transparent !important;
    border: 1px solid #cbd5e1 !important;
    /* height: 32px !important; */
    width: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    font-size: 12px !important;
    cursor: pointer !important;
}

/* Search Query Input & Button - dedicated classes for consistent styling */
.search-input-wrapper {
    width: 100% !important;
    display: table !important;
    border-collapse: separate !important;
    position: relative !important;
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    margin-top: 2px !important;
    margin-bottom: 8px !important;
    height: 34px !important;
}

.search-query-input {
    display: table-cell !important;
    width: 100% !important;
    height: 34px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px 0 0 6px !important;
    background-color: #ffffff !important;
    color: #1e293b !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Specificity override to prevent range input styles from changing this */
#search .modal-body .input-group input.search-query-input:first-of-type {
    width: 100% !important;
    display: table-cell !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px 0 0 6px !important;
    background-color: #ffffff !important;
    height: 34px !important;
    padding: 6px 12px !important;
    flex-grow: unset !important;
}

.search-input-wrapper .input-group-btn {
    display: table-cell !important;
    width: 5% !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

.search-query-input::placeholder {
    color: #94a3b8 !important;
    font-weight: 400 !important;
}

.search-query-btn {
    display: inline-block !important;
    height: 34px !important;
    border: 1px solid #cbd5e1 !important;
    border-left: none !important;
    border-radius: 0 6px 6px 0 !important;
    background-color: #ffffff !important;
    color: #64748b !important;
    font-size: 13px !important;
    cursor: pointer !important;
    padding: 0 12px !important;
    line-height: 32px !important;
}

.search-query-btn:hover {
    color: #0d9488 !important;
    background-color: #f8fafc !important;
}

/* Labgrown search input focus state */
.theme-labgrown .search-query-input:focus {
    border-color: var(--heigh-hlight-color-jew) !important;
}

.theme-labgrown .search-query-btn:hover {
    color: var(--heigh-hlight-color-jew) !important;
}

/* Shapes Grid Selection - 7 columns layout as requested */
#search .btn-group-justified.btn-page-search {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
    margin-top: 2px !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

@media (max-width: 767px) {
    #search .btn-group-justified.btn-page-search {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
    }
}

@media (max-width: 480px) {
    #search .btn-group-justified.btn-page-search {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
}

#search .btn-group-justified.btn-page-search::before,
#search .btn-group-justified.btn-page-search::after {
    display: none !important;
}

#search .btn-group-justified.btn-page-search label.btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 6px 2px !important;
    height: auto !important;
    text-transform: capitalize !important;
    color: #475569 !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    float: none !important;
    width: 100% !important;
    box-shadow: none !important;
    margin: 0 !important;
    white-space: normal !important;
    text-align: center !important;
    word-break: break-word !important;
}

/* Inject mockup GIA shapes images using content-bar data attributes - relative path resolves locally in XAMPP */
#search label.btn[data-content]::before {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    margin-bottom: 4px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: filter 0.2s ease !important;
    position: static !important;
    z-index: auto !important;
    background-color: transparent !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}

#search label.btn[data-content="ROUND"]::before {
    background-image: url("../../img/diamonds/diamond_shape_round.png") !important;
}

#search label.btn[data-content="PRINCESS"]::before {
    background-image: url("../../img/diamonds/diamond_shape_princess.png") !important;
}

#search label.btn[data-content="CUSHION"]::before {
    background-image: url("../../img/diamonds/diamond_shape_cushion.png") !important;
}

#search label.btn[data-content="CUSHION-B"]::before {
    background-image: url("../../img/diamonds/diamond_shape_cushion.png") !important;
}

#search label.btn[data-content="PEAR"]::before {
    background-image: url("../../img/diamonds/diamond_shape_pear.png") !important;
}

#search label.btn[data-content="OVAL"]::before {
    background-image: url("../../img/diamonds/diamond_shape_oval.png") !important;
}

#search label.btn[data-content="MARQUISE"]::before {
    background-image: url("../../img/diamonds/diamond_shape_marquise.png") !important;
}

#search label.btn[data-content="HEART"]::before {
    background-image: url("../../img/diamonds/diamond_shape_heart.png") !important;
}

#search label.btn[data-content="EMERALD"]::before {
    background-image: url("../../img/diamonds/diamond_shape_emerald.png") !important;
}

#search label.btn[data-content="EMERALD SQ."]::before {
    background-image: url("../../img/diamonds/diamond_shape_sqemerald.png") !important;
}

#search label.btn[data-content="RADIANT"]::before {
    background-image: url("../../img/diamonds/diamond_shape_radiant.png") !important;
}

#search label.btn[data-content="RADIANT SQ."]::before {
    background-image: url("../../img/diamonds/diamond_shape_sqradiant.png") !important;
}



/* Side-by-side columns alignment on desktop */
@media (min-width: 768px) {
    #search .modal-body .row>.col-md-6 {
        width: 50% !important;
        float: left !important;
    }
}

/* Range input group styling - 2nd Reference UI look: separate inputs, "to" separator, "Ct." suffix */
#search .modal-body .input-group {
    display: flex !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    height: 32px !important;
    width: 100% !important;
    box-shadow: none !important;
    gap: 0 !important;
}

/* Left Icon addon (e.g. Diamond icon / Currency) */
#search .modal-body .input-group-addon:first-child {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-right: none !important;
    color: #64748b !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 6px !important;
    flex-shrink: 0 !important;
}

#search .modal-body .input-group-addon:first-child i {
    color: #64748b !important;
    font-size: 11px !important;
}

/* Min Input Field */
#search .modal-body .input-group input:first-of-type:not(.search-query-input) {
    border: 1px solid #cbd5e1 !important;
    border-left: none !important;
    background-color: #ffffff !important;
    height: 30px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    padding: 0 8px !important;
    width: 65px !important;
    flex-grow: 0 !important;
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
    text-align: left !important;
}

/* Separator addon (replace colon with "to") */
#search .modal-body .input-group-addon:nth-child(3) {
    border: none !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
    padding: 0 10px !important;
    min-width: unset !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    margin-right: 10px;
}

#search .modal-body .input-group-addon:nth-child(3)::before {
    content: "to" !important;
    font-size: 12px !important;
    color: #64748b !important;
    font-weight: 500 !important;
}

/* Max Input Field */
#search .modal-body .input-group input:nth-child(4) {
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    height: 30px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    padding: 0 8px !important;
    width: 65px !important;
    flex-grow: 0 !important;
    text-align: left !important;
}

/* Inject "Ct." suffix on the Carat Range group */
#search .modal-body .input-group:has(input[name^="srch_carat"])::after {
    content: "Ct." !important;
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding-left: 8px !important;
    display: inline-block !important;
}

/* Dropdown select groups (Lab & Office styling) */
#search .modal-body .input-group:has(select) {
    display: flex !important;
    align-items: center !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    height: 30px !important;
    width: 100% !important;
    box-shadow: none !important;
}

#search .modal-body .input-group:has(select) .input-group-addon:first-child {
    border: none !important;
    border-radius: 0 !important;
}

#search .modal-body .input-group select {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    height: 100% !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    padding: 0 6px !important;
    flex-grow: 1 !important;
    width: 100% !important;
    padding-right: 16px !important;
    cursor: pointer !important;
}

/* Slider Track mockup styles (jQuery UI Range Sliders) */
#search .ui-slider {
    background: #cbd5e1 !important;
    border: none !important;
    height: 3px !important;
    border-radius: 2px !important;
    margin-top: 6px !important;
    margin-bottom: 3px !important;
    width: calc(100% - 8px) !important;
    margin-left: 4px !important;
}

#search .ui-slider-handle {
    border: 1.5px solid #ffffff !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    top: -4px !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    outline: none !important;
}

/* Checkbox Chip Filters (Color & Clarity Lists) - Row Layout No-wrap */
#search .btn-page-search {
    display: flex !important;
    gap: 4px !important;
    margin-top: 2px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
}

#search .btn-page-search label.btn {
    flex: 1 1 0px !important;
    min-width: 0 !important;
    height: 24px !important;
    /* Tightened height */
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    box-shadow: none !important;
}

#search .btn-page-search label.btn input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Modal Footer Action Buttons */
.search-modal-footer-actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 12px !important;
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 8px !important;
}

.btn-clear-all {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.btn-clear-all:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    text-decoration: none !important;
}

.btn-clear-all i {
    color: #475569 !important;
}

/* Search Diamonds Button */
#search .btn-search-diamonds {
    background-color: #042f2e !important;
    border: 1px solid #042f2e !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

/* Hover state fix - ensures button is NEVER blank */
#search .btn-search-diamonds i,
#search .btn-search-diamonds:hover i,
#search .btn-search-diamonds:focus i {
    color: #ffffff !important;
}

/* ==========================================================================
   DYNAMIC STONE THEME OVERRIDES (Natural vs Labgrown accents)
   ========================================================================== */

/* NATURAL INVENTORY: GREEN THEME */
#search .theme-natural .btn-group-justified.btn-page-search label.btn.active,
#search .theme-natural .btn-page-search label.btn.active {
    background-color: rgba(13, 148, 136, 0.08) !important;
    border: 1.5px solid #0d9488 !important;
    color: #0d9488 !important;
    font-weight: 700 !important;
}

#search .theme-natural .btn-group-justified.btn-page-search label.btn:hover,
#search .theme-natural .btn-page-search label.btn:hover {
    border-color: #0d9488 !important;
    background-color: rgba(13, 148, 136, 0.05) !important;
    color: #0d9488 !important;
}

#search .theme-natural .ui-slider-range {
    background: #0d9488 !important;
}

#search .theme-natural .ui-slider-handle {
    background: #0d9488 !important;
    border-color: #ffffff !important;
}

#search .theme-natural .view-all-shapes-btn {
    color: #0d9488 !important;
}

#search .theme-natural .btn-search-diamonds {
    background-color: #0d9488 !important;
    border-color: #0d9488 !important;
}

#search .theme-natural .btn-search-diamonds:hover,
#search .theme-natural .btn-search-diamonds:focus,
#search .theme-natural .btn-search-diamonds:active {
    background-color: #0f766e !important;
    border-color: #0f766e !important;
    color: #ffffff !important;
}

/* LABGROWN INVENTORY: YELLOW/GOLD THEME */
#search .theme-labgrown .btn-group-justified.btn-page-search label.btn.active,
#search .theme-labgrown .btn-page-search label.btn.active {
    background-color: rgba(217, 119, 6, 0.08) !important;
    border: 1.5px solid var(--heigh-hlight-color-jew) !important;
    color: #b45309 !important;
    font-weight: 700 !important;
}

#search .theme-labgrown .btn-group-justified.btn-page-search label.btn:hover,
#search .theme-labgrown .btn-page-search label.btn:hover {
    border-color: var(--heigh-hlight-color-jew) !important;
    background-color: rgba(217, 119, 6, 0.05) !important;
    color: #b45309 !important;
}

#search .theme-labgrown .ui-slider-range {
    background: var(--heigh-hlight-color-jew) !important;
}

#search .theme-labgrown .ui-slider-handle {
    background: var(--heigh-hlight-color-jew) !important;
    border-color: #ffffff !important;
}

#search .theme-labgrown .view-all-shapes-btn {
    color: var(--heigh-hlight-color-jew) !important;
}

#search .theme-labgrown .btn-search-diamonds {
    background-color: var(--heigh-hlight-color-jew) !important;
    border-color: var(--heigh-hlight-color-jew) !important;
}

#search .theme-labgrown .btn-search-diamonds:hover,
#search .theme-labgrown .btn-search-diamonds:focus,
#search .theme-labgrown .btn-search-diamonds:active {
    background-color: #b45309 !important;
    border-color: #b45309 !important;
    color: #ffffff !important;
}

/* Responsive Media Queries & Mobile Custom Rules */
.shapes-header-row label {
    margin-bottom: 0 !important;
}

@media (max-width: 767px) {
    #search .modal-dialog {
        max-width: 95% !important;
        margin: 10px auto !important;
    }

    #search .modal-body {
        padding: 10px 12px !important;
    }

    /* Shapes Grid - 4 columns on mobile as shown in the mobile view mockup */
    #search .btn-group-justified.btn-page-search {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 6px !important;
    }

    /* On mobile, side-by-side rows stack vertically */
    #search .modal-body .row>.col-md-6,
    #search .modal-body .row>.col-xs-12 {
        width: 100% !important;
        float: none !important;
        margin-bottom: 8px !important;
    }

    /* Hide shapes after the 4th child by default on mobile unless toggled */
    #search .btn-group-justified.btn-page-search:not(.show-all-shapes) label.btn:nth-child(n+5) {
        display: none !important;
    }

    /* Center the footer buttons slightly or align for touch targets */
    .search-modal-footer-actions {
        margin-top: 10px !important;
        padding-top: 8px !important;
        gap: 8px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    #search .modal-dialog {
        max-width: 600px !important;
    }
}

@media (min-width: 1025px) {
    #search .modal-dialog {
        max-width: 680px !important;
    }
}

@media (max-width: 767px) {

    .search-panel-card,
    .shapes-panel-card {
        background-image: var(--panel-bg) !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: cover !important;
        padding: 20px 15px !important;
    }

    .certified-theme-natural .dia_tab,
    .certified-theme-labgrown .dia_tab {
        font-size: 11px !important;
        padding: 6px 8px !important;
        min-width: 110px !important;
        min-height: 36px !important;
        height: auto !important;
        flex: 1 1 calc(50% - 12px) !important;
    }
}

i.fa.fa-sort {
    margin-left: 6px;
    font-size: 14px;
}

/* ==========================================================================
   Retail Mode Alignment and Responsive Layout Tweaks
   ========================================================================= */

/* Align intermediate tabpanel wrapper with the grid columns */
.row.certified-theme-natural>div[role="tabpanel"],
.row.certified-theme-labgrown>div[role="tabpanel"] {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Card Header Responsive Alignment for Mini Screens */
@media (max-width: 480px) {
    .mobile-card .card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    .mobile-card .card-header .header-right {
        width: 100% !important;
        justify-content: space-between !important;
    }
}

.btn::before {
    position: revert !important;
    background: #ffffff !important;
}

.certified-theme-natural .front_custom_button.active,
.certified-theme-natural .front_custom_button.active i,
.stone-type-toggle-pill .front_custom_button.active,
.stone-type-toggle-pill .front_custom_button.active i,
.stone-type-toggle-pill #natural_dia.active,
.stone-type-toggle-pill #natural_dia.active i {
    color: #ffffff !important;
}

/* Position Login/Register popup modal (#dia_view_price) right below top header */
#dia_view_price.modal {
    text-align: center;
    padding: 0 !important;
}

#dia_view_price.modal.in,
#dia_view_price.modal[style*="display: block"] {
    display: block !important;
}

#dia_view_price .modal-dialog {
    margin: 75px auto 30px auto !important;
    width: 90% !important;
    max-width: 480px !important;
}

#dia_view_price .modal-content {
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}

/* Login Modal Button Text & Color Updates */
#dia_view_price .modal-footer a,
#dia_view_price .modal-footer .btn,
#dia_view_price .modal-footer .login-btn,
#dia_view_price .modal-footer .btn-primary,
#dia_view_price .modal-footer .btn-default {
    color: #007D79 !important;
    background-color: #ffffff !important;
    border: 1px solid #ffffff !important;
    font-weight: 700 !important;
}

#dia_view_price .modal-footer a:hover,
#dia_view_price .modal-footer .btn:hover,
#dia_view_price .modal-footer .login-btn:hover,
#dia_view_price .modal-footer .btn-primary:hover,
#dia_view_price .modal-footer .btn-default:hover {
    color: #ffffff !important;
    background-color: #007D79 !important;
    border-color: #007D79 !important;
}

.tab-pane.table-responsive {
    margin-bottom: 40px !important;
}
.mobile-cards-container {
    margin-bottom: 40px !important;
}