@font-face {
    font-family: 'Museo Sans';
    src: url('/font/museo/MuseoSans-100.woff2') format('woff2'), url('/font/museo/MuseoSans-100.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Museo Sans';
    src: url('/font/museo/MuseoSans-100Italic.woff2') format('woff2'), url('/font/museo/MuseoSans-100Italic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Museo Sans';
    src: url('/font/museo/MuseoSans-300.woff2') format('woff2'), url('/font/museo/MuseoSans-300.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Museo Sans';
    src: url('/font/museo/MuseoSans-300Italic.woff2') format('woff2'), url('/font/museo/MuseoSans-300Italic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Museo Sans';
    src: url('/font/museo/MuseoSans-500.woff2') format('woff2'), url('/font/museo/MuseoSans-500.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Museo Sans';
    src: url('/font/museo/MuseoSans-500Italic.woff2') format('woff2'), url('/font/museo/MuseoSans-500Italic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Museo Sans';
    src: url('/font/museo/MuseoSans-700.woff2') format('woff2'), url('/font/museo/MuseoSans-700.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Museo Sans';
    src: url('/font/museo/MuseoSans-700Italic.woff2') format('woff2'), url('/font/museo/MuseoSans-700Italic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Museo Sans';
    src: url('/font/museo/MuseoSans-900.woff2') format('woff2'), url('/font/museo/MuseoSans-900.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Museo Sans';
    src: url('/font/museo/MuseoSans-900Italic.woff2') format('woff2'), url('/font/museo/MuseoSans-900Italic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
}




/*Styles Added*/

:root {
    --red: #dc1d3a; /*Style Guide Per William Maroon*/
    --red-dark: #b81a31;
    --blue: #0e7bb1; /*Style Guide Per William Maroon*/
    --gold: #FDB106;
    --dark-grey: #58595b; /*Style Guide Per William Maroon*/
    --mid-grey: #9B9A9B;
    --light-grey: #bcbec0; /*Style Guide Per William Maroon*/
    --orange: #fbb040; /*Style Guide Per William Maroon*/
    --orange-tours: #ffa626;
    --green: #418775;
    --purple: #665a7e;
    --dark-steel-blue: #435365;
    --dark-gold: #E39F05;
    --dark-blue: #657C9A;
    --white-smoke: #f5f5f5;
    --bs-font-family: 'Museo Sans', arial !important;
    --bs-body-font-family: 'Museo Sans', arial !important;
    --bs-body-font-size: 13px;
    --bs-primary-rgb: 75, 93, 113;
    --bs-bg-opacity: 1;
    
}

/* Password-reset requirements styling is intentionally scoped to this page. */
.password-reset-page .password-requirements-alert {
    background-color: var(--bs-gray-300);
    border-color: var(--bs-gray-300);
    color: var(--blue);
}

.password-reset-page .password-requirements-alert .password-help-button,
.password-reset-page .password-requirements-alert .password-help-button:hover,
.password-reset-page .password-requirements-alert .password-help-button:focus,
.password-reset-page .password-requirements-alert .password-help-button:active {
    background-color: #fff;
    border-color: var(--red);
    color: var(--red);
}

.badge {
    font-size: initial;
}

/* Apply Museo Sans site-wide */
html, body {
    font-family: 'Museo Sans', arial !important;
    font-size: 13px;
    font-weight: 500; /* Default weight */
    overflow-x: hidden; /* Hide horizontal scroll bar */  
    background-color: whitesmoke;
    padding: 0;
}


html {
    margin: 0; /* Ensure no margin */
    
}
body {
    padding: 0;
}
h1, h2, h3 {
    font-family: 'Museo Sans', arial !important;
    font-weight: 700; /* Use bold weights */
}

p {
    font-family: 'Museo Sans', arial !important;
    font-weight: 300; /* Use light weights */
}

strong {
    font-family: 'Museo Sans', arial !important;
    font-weight: 900; /* Extra bold */
}

em {
    font-family: 'Museo Sans', arial !important;
    font-style: italic;
}

/*Icons*/
.fas.fa-calendar-alt,
.fas.fa-bell,
.fas.fa-user {
    color: black;
}

.blur-background {
    filter: blur(5px);
    pointer-events: none;
}

/*Header*/
.header-class {
    margin-bottom: 0px;
    background-color: var(--red);
}

.activeAcccount-header {
    color: white;
    text-align: center;
    font-size: 32px !important;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

/*Navigation*/
nav.navbar {
    background-color: white;
    color: white;
    height: 50px;
}

.custom-navbar-brand,  .custom-navbar-toggler {
    line-height: 30px;
}
.custom-menu-nav-item {
    line-height: normal;
    padding-top: 5px;
}

.custom-menu .nav-link:hover {
    background-color: #6C7E8F;
    border-radius: 2px;
    line-height: normal;
    padding-top: 5px;
}


.navbar-toggler, navbar-toggler:focus {
    border: 0px;
    box-shadow: 0 0 0 0rem !important;
    transition: box-shadow 0.0s ease-in-out
}

.navbar-brand .text-white, .navbar-brand .text-black, .navbar-brand .text-red {
    font-weight: bold;
    font-size: 24px;
    font-family: 'Museo Sans', sans-serif;
}

.navbar-brand .text-white {
    color: #FFFFFF !important;
}

.navbar-brand .text-black {
    color: #000000 !important;
}

.navbar-brand .text-red {
    color: var(--red) !important;
}




.navbar-toggler-placeholder {
    display: inline-block;
    width: 30px;
    height: 30px;
    visibility: hidden;
}

/* Style for the overlay menu */
.navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    width: 400px;
    background-color: #6C7E8F;
    z-index: 2000;
    height: 40px;
}

.nav-link {
    color: black;
    background-color: transparent;
    border-radius: 0;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .nav-link:hover, .nav-link:focus, .nav-link.active {
        color: #ffffff;
        background-color: #6C7E8F;
    }

.nav-item.dropdown .nav-link {
    background-image: none !important;
}

    .nav-item.dropdown .nav-link::after,
    .nav-item.dropdown .nav-link::before {
        content: none !important;
    }


/***************************/


/*Menu Redo*/
.custom-menu {
    background-color: var(--dark-grey);
    height: 32px;
}

    .custom-menu .navbar-nav {
        display: flex;
        flex-direction: row;
        justify-content: left;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    .custom-menu .nav-item {
        margin-right: 10px;
    }

    .custom-menu .nav-link {
        color: white;
        text-decoration: none;
        padding: 2px 10px;
    }

      /*  .custom-menu .nav-link:hover {
            background-color: #6C7E8F;
            border-radius: 2px;
            height: 30px;
        }*/



.dropdown-menu {
    background-color: #C0C0C0;
    font-size: 14px;
    height: 30px;
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    margin-top: 0 !important; /* Removes any unintended spacing */
    top: 100%;
}

.dropdown-item {
    color: white;
    text-decoration: none;
    padding: 0px 10px;
    height: 30px;
    background-color: var(--light-grey);
    padding-top: 5px;
}

.dropdown-item:hover {
        background-color: var(--dark-grey);
        border-radius: 2px;
        height: 30px;
        color: white;
    }

.header-shell {
    min-height: 56px;
}

.header-brand-slot,
.header-actions-slot {
    flex: 0 0 auto;
}

.header-account-slot {
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    padding: 0 1rem;
}

.mobile-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    background: rgba(255,255,255,.08);
    font-size: .92rem;
    font-weight: 600;
    line-height: 1;
}

.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus {
    color: #fff;
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.45);
}

@media (max-width: 767.98px) {
    .header-class {
        position: sticky;
        top: 0;
        z-index: 1035;
    }

    .header-shell {
        min-height: 60px;
        gap: .5rem;
        padding-top: .4rem;
        padding-bottom: .4rem;
    }

    .header-brand-slot {
        min-width: auto !important;
        max-width: none !important;
    }

    .header-brand-slot .navbar-brand {
        margin-left: .25rem !important;
        margin-right: .25rem !important;
    }

    .header-brand-slot .navbar-brand img {
        height: 26px;
    }

    .header-account-slot {
        justify-content: flex-start;
        padding: 0;
    }

    .activeAcccount-header {
        display: block;
        width: 100%;
        font-size: 1rem !important;
        line-height: 1.15;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .header-actions-slot {
        min-width: auto !important;
        max-width: none !important;
        flex-shrink: 0;
    }

    .custom-menu {
        height: auto;
        padding: .4rem .5rem .7rem;
        border-top: 1px solid rgba(255,255,255,.08);
    }

    .custom-menu .navbar-nav {
        flex-direction: column;
        gap: .35rem;
    }

    .custom-menu .nav-item {
        margin-right: 0;
    }

    .custom-menu .nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 42px;
        padding: .55rem .8rem;
        border-radius: 8px;
        background: rgba(255,255,255,.08);
        font-size: .98rem;
    }

    .custom-menu .nav-link:hover,
    .custom-menu .nav-link:focus {
        background: rgba(255,255,255,.16);
    }

    .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        height: auto;
        margin-top: .2rem !important;
        padding: .15rem 0 0;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .dropdown-item {
        display: block;
        height: auto;
        min-height: 38px;
        padding: .55rem .9rem;
        border-radius: 8px;
        margin-bottom: .2rem;
        font-size: .92rem;
    }

    .dropdown-item:hover {
        height: auto;
    }
}

/***************************/
/* Login page specific styles */

.login-section {
    flex: 1 0 auto;
    min-height: 0;
    background: transparent; /* Or inherit for the red bg */
}
.login-container {
    color: var(--dark-grey);
    margin-top: 50px;
}

.login-form {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    margin: auto;
}

    .login-form .form-control {
        border: 1px solid var(--dark-grey);
        color: var(--dark-grey);
    }

.form-label {
    color: var(--dark-grey);
}

.btn-primary {
    background-color: var(--red);
    border-color: var(--red);
}

    .btn-primary:disabled {
        background-color: var(--red-dark);
        border-color: var(--red-dark);
    }
    .btn-primary:hover {
        background-color: var(--red-dark);
        border-color: var(--red-dark);
    }

.btn-secondary {
    background-color: var(--blue);
    border-color: var(--blue);
}

    .btn-secondary:disabled {
        background-color: var(--dark-blue);
        border-color: var(--dark-blue);
    }

    .btn-secondary:hover {
        background-color: var(--dark-blue);
        border-color: var(--dark-blue);
    }

.login-form .form-check-input {
    border-color: var(--dark-grey);
}

.login-form .form-check-label {
    color: var(--dark-grey);
}

.login-form .text-body {
    color: var(--blue);
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--red-dark);
    color: white;
}

.custom-label {
    font-size: 14px;
}

/**************************************************************/



/*User Info Popup*/
.user-info-popup {
    position: absolute;
    right: 10px;
    top: 44px;
    border: 1px solid var(--blue);
    background-color: white;
    color: var(--dark-grey);
    padding: 10px;
    border-radius: 8px;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-size: 14px;
}

    .user-info-popup::before {
        content: '';
        position: absolute;
        top: -30px;
        right: 4px;
        border-width: 15px;
        border-style: solid;
        border-color: transparent transparent var(--blue) transparent;
        z-index: 1001;
    }

    .user-info-popup::after {
        content: '';
        position: absolute;
        top: -28px;
        right: 5px;
        border-width: 14px;
        border-style: solid;
        border-color: transparent transparent white transparent;
        z-index: 1002;
    }

    .user-info-popup p {
        padding-bottom: 2px;
        margin-bottom: 2px;
        font-size: 14px;
    }

/**************************************************************/

/*Submit Order Popup*/
.submit-order-popup, .view-detail-popup {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid var(--blue);
    background-color: white;
    color: var(--dark-grey);
    padding: 10px;
    border-radius: 8px;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    width: 700px;
    box-sizing: border-box;
}



/* .submit-order-popup p {
        padding-bottom: 2px;
        margin-bottom: 2px;
        font-size: 14px;
    }*/


.billing-shipping-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.billing-info, .shipping-info {
    width: 48%;
}

.payment-info, .order-line {
    margin-bottom: 00px;
}

.address-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.billing-info, .shipping-info {
    flex: 1;
    padding: 10px;
}

    .billing-info span, .shipping-info span {
        display: inline-block;
        padding-top: 5px;
    }


    .billing-info p, .shipping-info p {
        margin-bottom: 5px
    }

.billing-info {
    margin-right: 10px;
}

.shipping-info {
    margin-left: 10px;
}


/*Subtotal Order Screen*/
/*Do we really need????*/
.price-value {
    text-align: right;
}

/**************************************************************/

/*Coming Soon*/
.coming-soon-container {
    max-width: 1000px;
    padding: 20px;
    margin: auto;
    text-align: center;
}

.coming-soon {
    font-size: 2em;
    margin-bottom: 20px;
}

.coming-soon-description {
    font-size: 1.2em;
}

.coming-soon-image-container {
    margin: 20px 0;
}

    .coming-soon-image-container img {
        max-width: 100%;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }








/* Column Width Styles */

.col-large-20 {
    width: 20%;
}

.col-medium-15 {
    width: 15%;
}

.col-small-10 {
    width: 10%;
}



.col-centered {
    text-align: center;
}

.col-left-align {
    text-align: left;
}

.custom-align-right {
    text-align: right;
}








/*****************************************************/


/*Data Table Loader*/
.loader {
    border: 6px solid #f3f3f3;
    border-top: 6px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
}





@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*Modal Styling*/
/*Override Default Modal Style*/
.modal-header {
    background-color: var(--dark-grey)  !important;
}

.modal-title {
    color: white !important;
}

/*Password Styling*/
.password-container {
    position: relative;
    display: flex;
    align-items: center;
}

.toggle-password {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/*DataTables*/

/* Default Styles for All DataTables */
.dataTable tbody th, .dataTable tbody td {
    /*Add slight padding*/
    padding: 2px !important;
}

/*.dataTables_wrapper .dataTables_paginate, .dataTables_wrapper .dataTables_info {
    font-size: 10px;
}*/


table {
    border-collapse: collapse;
    width: 100%;
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
}

    table th,
    table td {
        border: 1px solid var(--light-grey) ;
        padding: 0px;
        vertical-align: middle;
        box-sizing: border-box;
    }

    table th {
        background-color: var(--dark-grey);
        font-size: 14px;
        text-align: center;
        font-weight: normal !important;
        white-space: normal;
        color: white;
    }

tbody td,
thead td {
    border-top: none;
}

table tbody tr:hover {
    background-color: var(--white-smoke);
}

table thead tr:nth-child(2) input {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

table.dataTable thead th,
table.dataTable thead td {
    /*Override because jquery loves padding*/
    padding: 0px !important;
    border-bottom: 1px solid  !important;
}

table.dataTable thead th {
    background-color: ;
    font-weight: normal !important;
    white-space: normal;
    color: white;
    text-align: center;
    vertical-align: middle;
}

table .reprice-value {
    max-width: 100px;
    height: 20px;
    margin: 3px;   
    -webkit-appearance: none;
    /* For webkit browsers */
    -moz-appearance: textfield;
    /* For Firefox */
}

table .custom-right-alignment {
    text-align: right;
}

table .custom-center-alignment {
    text-align: center;
}

table .col-centered .form-control {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

table .reprice-value::-webkit-inner-spin-button,
table .reprice-value::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.page-item.active .page-link {
    background-color: var(--light-grey);
    border-bottom-color: var(--light-grey);
}
    /******************************************/

    .row {
    margin-right: 0;
    margin-left: 0;
    flex-wrap: wrap !important;
}

/* Table Container Style */
.table-container {
    background-color: white;
    padding: 15px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    margin: 20px 0;
}

#userTable_wrapper .dataTables_filter {
    margin-right: 12px;
}



.center-div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}


/* Override active pagination button color */
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    background-color:  !important; /* Match your app's grey */
    border-color:  !important; /* Match border */
    color: black !important; /* Ensure text is visible */
}

    /* Optional: Hover effect for active page */
    .dataTables_wrapper .dataTables_paginate .page-item.active .page-link:hover {
        background-color:  !important; /* Slightly darker grey */
        color: white !important;
    }

/* Override Bootstrap's pagination hover color */
.dataTables_wrapper .dataTables_paginate .page-link {
    color: black !important; /* Default text color */
}

    /* Ensure text stays black on hover */
    .dataTables_wrapper .dataTables_paginate .page-link:hover {
        color: black !important; /* Change blue hover text to black */
        background-color:  !important; /* Match your theme */
        border-color:  !important;
    }

    /* Override the focus outline on pagination links */
    .dataTables_wrapper .dataTables_paginate .page-link:focus {
        box-shadow: 0 0 0 0.2rem  !important; /* Use your theme's grey */
        border-color:  !important; /* Match existing border styling */
        outline: none !important; /* Remove default blue outline */
    }

/* Apply grey headers to all tables site-wide */
.table thead th {
    background-color: var(--dark-grey) !important; /* Standard grey */
    color: white !important; /* Ensure text contrast */
    border-bottom: 2px solid var(--dark-grey) !important; /* Structured look */
    text-align: center;
    font-weight: bold;
}

    /* Optional: Subtle hover effect */
    .table thead th:hover {
        background-color: var(--dark-grey) !important;
        
    }

    /*Type Ahead*/
    #typeaheadResults {
    position: absolute;
    width: 300px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 5px;
    max-height: auto;
    overflow-y: auto;
    z-index: 1000;
    top:35px;

    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.typeahead-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
}

    .typeahead-item:hover,
    .typeahead-item.selected {
        background-color: #f2f2f2;
    }

.typeahead-line {
    font-size: 14px;
    font-weight: bold;
}

    .typeahead-line.small {
        font-size: 12px;
        color: gray;
    }



table.dataTable thead th {
    vertical-align: middle !important;
    text-align: center !important;
    padding-right: 20px !important; /* Ensures sorting icon space */
    position: relative !important;
   
}



table.dataTable > thead .sorting:before,
table.dataTable > thead .sorting_asc:before,
table.dataTable > thead .sorting_desc:before,
table.dataTable > thead .sorting_asc_disabled:before,
table.dataTable > thead .sorting_desc_disabled:before {
    /*right: 5px !important;*/
    /*position: absolute !important;
    top: 10% !important;
    transform: translateY(-50%) !important;*/
}

table.dataTable > thead .sorting:after,
table.dataTable > thead .sorting_asc:after,
table.dataTable > thead .sorting_desc:after,
table.dataTable > thead .sorting_asc_disabled:after,
table.dataTable > thead .sorting_desc_disabled:after {
    /*right: 8px !important;*/
    /*position: absolute !important;
    top: 10% !important;
    transform: translateY(-50%) !important;*/
}


/*Calendar*/
.calendar-popup {
    position: absolute;
    right: 10px;
    top: 44px;
    border: 1px solid var(--blue);
    background-color: white;
    color: var(--dark-grey);
    padding: 10px;
    border-radius: 8px;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-size: 14px;
}

    .calendar-popup::before {
        content: '';
        position: absolute;
        top: -30px;
        right: 60px;
        border-width: 15px;
        border-style: solid;
        border-color: transparent transparent var(--blue) transparent;
        z-index: 1001;
    }

    .calendar-popup::after {
        content: '';
        position: absolute;
        top: -28px;
        right: 61px;
        border-width: 14px;
        border-style: solid;
        border-color: transparent transparent white transparent;
        z-index: 1002;
    }

/* Add styles for the agenda view and other elements as needed */
.agenda-view {
    /* Styles for your agenda view */
}

.description-container {
    flex-grow: 1; /* Allows the description to fill the available space */
}

.btn-icon {
    border: none;
    background: transparent;
    cursor: pointer;
    margin-left: 10px; /* Adds some space between the description and the button */
}

.clear-icon i {
    color: red; /* or your preferred color */
}


.userIcon:hover {
    color: #007bff;
    cursor: pointer;
}

#notificationBell, #userIcon {
    filter: brightness(0) invert(1);
}

.custom-confirm-box {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* Dimmed background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Ensure it's on top */
}

.confirm-content {
    background: white;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
}

.confirm-message {
    margin-bottom: 20px;
}

.confirm-ok, .confirm-cancel {
    padding: 10px 20px;
    margin: 0 10px;
}




/* General Toast Styling */

.toast {
    background-color: #222 !important;  /*Dark background */
    color: #fff !important;  /*White text */
    box-shadow: 0px 0px 10px rgba(0,0,0,0.3) !important;
    border-radius: 6px;
    font-weight: 600;
    padding: 12px 16px;
}

/* Optionally, style specific types for even more contrast */
.toast-success {
    background-color: #145c2a !important;
}

.toast-error {
    background-color: #8b1a1a !important;
}

.toast-info {
    background-color: var(--blue) !important;
}

.toast-warning {
    background-color: #8b6a1a !important;
}

/*.toast {
    opacity: 1; 
    
    text-shadow: none !important;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3) !important;
    border-radius: 6px;
    font-weight: 600;
    padding: 12px 16px;
}*/

/* Specific Types */
/*.toast-warning {*/
    /*//background-color: #f0ad4e !important;*/
/*}

.toast-error {
    background-color: #d9534f !important;
}

.toast-info {
    background-color: #5bc0de !important;
}

.toast-success {
    background-color: #5cb85c !important;
}*/

.custom-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* or rgba(240,240,240,0.7) for lighter gray */
    z-index: 1040;
}

#loadingContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5); /* Optional: for overlay effect */
    z-index: 1000; /* To ensure it's above other content */
}


#fc_frame, [id^="fc_frame"] {
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;
    z-index: 9999 !important;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main[role="main"] {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

footer.footer {
    flex-shrink: 0;
    background-color: var(--dark-grey);
}

/* Popover layout: thumbnail left, details right */
.popover {
    max-width: 720px; /* allow wider popovers for the 3-column layout */
    white-space: normal; /* ensure internal content can wrap sensibly */
}

    /* Ensure the popover body uses our layout */
    .popover .popover-content-row {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        white-space: normal; /* allow wrapping inside details */
    }

    /* Constrain thumbnail size and keep aspect ratio */
    .popover .popover-product-thumb {
        width: 124px;
        height: 124px;
        max-width: 124px;
        max-height: 124px;
        object-fit: contain;
        flex: 0 0 124px; /* fixed box in flex row */
        display: block;
        border-radius: 4px;
    }

    /* Details column takes remaining space */
    .popover .popover-content-details {
        flex: 1 1 auto;
        overflow: hidden;
        font-size: .9rem;
        line-height: 1.2;
    }
/* Product thumbnail sizing and spacing */
.popover-product-thumb {
  width: 72px;
  height: auto;
  display: block;
  margin: 0;
}

/* Column label alignment inside popover: reserve width for labels */
.popover .col-12 strong {
  display: inline-block;
  width: 130px;
  min-width: 110px;
  vertical-align: top;
}

/* Add breathing room between popover columns */
.popover .row.gx-3 {
  gap: 12px;
}

/* Prevent extremely long words from overflowing */
.popover .col-12 {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Responsive: stack columns on small screens so content doesn't cramp */
@media (max-width: 576px) {
  .popover {
    max-width: 320px;
  }
  .popover .row.gx-3 {
    flex-direction: column;
  }
  .popover .col-12 strong {
    width: auto;
    display: inline;
  }
}


.rounded-8 {
    border-radius: 8px !important;
}


/* Full-width explanation for unavailable NDC search results. */
#catalogTable tbody tr.unavailable-ndc-footer > td {
    padding: 0.35rem 0.75rem 0.65rem;
    background: #fff8e7;
    border-top: 0;
    border-bottom: 1px solid #e8cf87;
}

#catalogTable .unavailable-ndc-message {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem;
    border-left: 3px solid #d69e23;
    color: #493b1c;
    font-size: 0.875rem;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
}

#catalogTable .unavailable-ndc-message i {
    margin-top: 0.15rem;
    flex: none;
}