/* ================================= Color Palette | Font ================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap%27);');

:root {
    /* ------------ Primary ------------ */
    --bs-primary: #00C7C7;
    --bs-primary-rgb: 0,199,199;
    --bs-primary-text-emphasis: #005050;
    --bs-primary-bg-subtle: #ccf4f4;
    --bs-primary-border-subtle: #99e9e9;
    /* ------------ Secondary ------------ */
    --bs-secondary: #3a4759;
    --bs-secondary-rgb: 58,71,89;
    --bs-secondary-text-emphasis: #171c24;
    --bs-secondary-bg-subtle: #d8dade;
    --bs-secondary-border-subtle: #b0b5bd;
    /* ------------ Success ------------ */
    --bs-success: #00b385;
    --bs-success-rgb: 0,179,133;
    --bs-success-text-emphasis: #004835;
    --bs-success-bg-subtle: #ccf0e7;
    --bs-success-border-subtle: #99e1ce;
    /* ------------ Info ------------ */
    --bs-info: #38b1d8;
    --bs-info-rgb: 56,177,216;
    --bs-info-text-emphasis: #164756;
    --bs-info-bg-subtle: #d7eff7;
    --bs-info-border-subtle: #afe0ef;
    /* ------------ Warning ------------ */
    --bs-warning: #ffbe2e;
    --bs-warning-rgb: 255,190,46;
    --bs-warning-text-emphasis: #664c12;
    --bs-warning-bg-subtle: #fff2d5;
    --bs-warning-border-subtle: #ffda99;
    /* ------------ Danger ------------ */
    --bs-danger: #dc3545;
    --bs-danger-rgb: 220,53,69;
    --bs-danger-text-emphasis: #58151c;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-danger-border-subtle: #f1aeb5;
    /* ------------ Light ------------ */
    --bs-light: #f3f9fb;
    --bs-light-rgb: 243,249,251;
    --bs-light-text-emphasis: #616464;
    --bs-light-bg-subtle: #fdfefe;
    --bs-light-border-subtle: #fafdfd;
    /* ------------ Dark ------------ */
    --bs-dark: #070f52;
    --bs-dark-rgb: 7,15,82;
    --bs-dark-text-emphasis: #cdcfdc;
    --bs-dark-bg-subtle: #cdcfdc;
    --bs-dark-border-subtle: #9c9fba;
    /* ------------ Body ------------ */
    --bs-body-color: #3a4759;
    --bs-body-color-rgb: 58,71,89;
    --bs-body-bg: var(--bs-white);
    --bs-body-bg-rgb: var(--bs-white-rgb);
    /* ------------ Link ------------ */
    --bs-link-color: var(--bs-primary);
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-decoration: underline;
    --bs-link-hover-color: #00b3b3;
    --bs-link-hover-color-rgb: 0,179,179;
    /* ------------ Border ------------ */
    --bs-border-color: #ddd;
    --bs-form-valid-border-color: var(--bs-success);
    --bs-form-invalid-border-color: var(--bs-danger);
    --bs-border-radius: 1.25rem;
    /* ------------ Shadow ------------ */
    --bs-box-shadow-xs: 0 .125rem .25rem rgba(0,0,0,.075);
    --bs-box-shadow-sm: 0 .25rem .50rem rgba(0,0,0,.1);
    --bs-box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    --bs-box-shadow-lg: 0 1rem 2rem rgba(0,0,0,.175);
    /* ------------ Form State ------------ */
    --bs-form-valid-color: var(--bs-success);
    --bs-form-invalid-color: var(--bs-danger);
    /* ------------ Font ------------ */
    --bs-font-sans-serif: "Inter", sans-serif;
    --bs-body-font-family: var(--bs-font-sans-serif);
}

/* ================================= Utilities ================================= */
/* ------------ Shadow ------------ */
.shadow-xs, .shadow-xs-hover:hover {
    box-shadow: var(--bs-box-shadow-xs);
}

.shadow-sm, .shadow-sm-hover:hover {
    box-shadow: var(--bs-box-shadow-sm);
}

.shadow, .shadow-hover:hover {
    box-shadow: var(--bs-box-shadow);
}

.shadow-lg, .shadow-lg-hover:hover {
    box-shadow: var(--bs-box-shadow-lg);
}

/* ================================= Typography ================================= */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .page-header-learning {
    color: var(--bs-dark);
    font-weight: 700;
}

h1, .h1, .fs-1 {
    font-size: 3.625rem !important;
}

h2, .h2, .fs-2 {
    font-size: 2.75rem;
}

h3, .h3, .fs-3 {
    font-size: 1.875rem;
}

h4, .h4, .fs-4 {
    font-size: 1.375rem;
}

h5, .h5, .fs-5 {
    font-size: 1.25rem;
}

h6, .h6, .fs-6 {
    font-size: 1rem;
}

/* ------------ Text ------------ */

.text-bg-primary {
    color: var(--bs-light) !important;
    background-color: var(--bs-primary) !important;
}

.text-bg-dark {
    color: var(--bs-light) !important;
    background-color: var(--bs-dark) !important;
}

/* ================================= Components ================================= */

/* ------------ Alerts ------------ */

.alert {
    border-radius: var(--bs-border-radius);
}

.alert-primary {
    --bs-alert-color: var(--bs-light);
    --bs-alert-bg: var(--bs-primary);
    --bs-alert-border-color: var(--bs-primary);
    --bs-alert-link-color: var(--bs-primary-text-emphasis);
}

.alert-secondary {
    --bs-alert-color: var(--bs-dark);
    --bs-alert-bg: var(--bs-secondary);
    --bs-alert-border-color: var(--bs-secondary);
    --bs-alert-link-color: var(--bs-secondary-text-emphasis);
}

.alert-success {
    --bs-alert-color: var(--bs-light);
    --bs-alert-bg: var(--bs-success);
    --bs-alert-border-color: var(--bs-success);
    --bs-alert-link-color: var(--bs-success-text-emphasis);
}

.alert-danger {
    --bs-alert-color: var(--bs-light);
    --bs-alert-bg: var(--bs-danger);
    --bs-alert-border-color: var(--bs-danger);
    --bs-alert-link-color: var(--bs-danger-text-emphasis);
}

.alert-info {
    --bs-alert-color: var(--bs-light);
    --bs-alert-bg: var(--bs-info);
    --bs-alert-border-color: var(--bs-info);
    --bs-alert-link-color: var(--bs-info-text-emphasis);
}

.alert-warning {
    --bs-alert-color: var(--bs-dark);
    --bs-alert-bg: var(--bs-warning);
    --bs-alert-border-color: var(--bs-warning);
    --bs-alert-link-color: var(--bs-warning-text-emphasis);
}

/* ------------ Buttons ------------ */

.btn {
    --bs-btn-border-radius: var(--bs-border-radius-pill);
    border-radius: var(--bs-btn-border-radius);
    font-weight: 500;
}

.btn-link {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-hover-color: #00b3b3;
    --bs-btn-active-color: #009f9f;
    --bs-btn-disabled-color: var(--bs-primary);
}

    .btn-link:before {
        border-bottom: 1px solid #00b3b3;
    }

    .btn-link.text-danger:before {
        border-bottom: 1px solid #c6303e;
    }

    .btn-link.dismiss {
        --bs-btn-color: #999;
        --bs-btn-hover-color: #8a8a8a;
        --bs-btn-active-color: #7a7a7a;
        --bs-btn-disabled-color: var(--bs-primary);
    }

        .btn-link.dismiss:before {
            border-bottom: 1px solid #8a8a8a;
        }

.dismiss-notification .bi-trash3 {
    color: #999;
}

    .dismiss-notification .bi-trash3:hover {
        color: #8a8a8a;
    }

    .dismiss-notification .bi-trash3:active {
        color: #7a7a7a;
    }

.btn-primary {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-dark);
    --bs-btn-hover-bg: #00b3b3;
    --bs-btn-hover-border-color: #00b3b3;
    --bs-btn-active-color: var(--bs-dark);
    --bs-btn-active-bg: #009f9f;
    --bs-btn-active-border-color: #009f9f;
    --bs-btn-disabled-color: var(--bs-dark);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-light);
    --bs-btn-hover-bg: #00b3b3;
    --bs-btn-hover-border-color: #00b3b3;
    --bs-btn-active-color: var(--bs-light);
    --bs-btn-active-bg: #009f9f;
    --bs-btn-active-border-color: #009f9f;
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-secondary {
    --bs-btn-color: var(--bs-light);
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-bg: #344050;
    --bs-btn-hover-border-color: #344050;
    --bs-btn-active-bg: #2e3947;
    --bs-btn-active-border-color: #2e3947;
    --bs-btn-disabled-bg: var(--bs-secondary);
    --bs-btn-disabled-border-color: var(--bs-secondary);
}

.btn-success {
    --bs-btn-color: var(--bs-light);
    --bs-btn-bg: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-bg: #00a178;
    --bs-btn-hover-border-color: #00a178;
    --bs-btn-active-bg: #008f6a;
    --bs-btn-active-border-color: #008f6a;
    --bs-btn-disabled-bg: var(--bs-success);
    --bs-btn-disabled-border-color: var(--bs-success);
}

.btn-info {
    --bs-btn-color: var(--bs-light);
    --bs-btn-bg: var(--bs-info);
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-bg: #329fc2;
    --bs-btn-hover-border-color: #329fc2;
    --bs-btn-active-bg: #2d8ead;
    --bs-btn-active-border-color: #2d8ead;
    --bs-btn-disabled-bg: var(--bs-info);
    --bs-btn-disabled-border-color: var(--bs-info);
}

.btn-warning {
    --bs-btn-color: var(--bs-light);
    --bs-btn-bg: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-bg: #e6ab29;
    --bs-btn-hover-border-color: #e6ab29;
    --bs-btn-active-bg: #cc9825;
    --bs-btn-active-border-color: #cc9825;
    --bs-btn-disabled-bg: var(--bs-warning);
    --bs-btn-disabled-border-color: var(--bs-warning);
}

.btn-danger {
    --bs-btn-color: var(--bs-light);
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-bg: #c6303e;
    --bs-btn-hover-border-color: #c6303e;
    --bs-btn-active-bg: #b02a37;
    --bs-btn-active-border-color: #b02a37;
    --bs-btn-disabled-bg: var(--bs-danger);
    --bs-btn-disabled-border-color: var(--bs-danger);
}

.btn-light {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-bg: var(--bs-light);
    --bs-btn-border-color: var(--bs-light);
    --bs-btn-hover-bg: #dbe0e2;
    --bs-btn-hover-border-color: #dbe0e2;
    --bs-btn-active-bg: #c2c7c9;
    --bs-btn-active-border-color: #c2c7c9;
    --bs-btn-disabled-bg: var(--bs-light);
    --bs-btn-disabled-border-color: var(--bs-light);
}

.btn-dark {
    --bs-btn-color: var(--bs-light);
    --bs-btn-bg: var(--bs-dark);
    --bs-btn-border-color: var(--bs-dark);
    --bs-btn-hover-bg: #202763;
    --bs-btn-hover-border-color: #202763;
    --bs-btn-active-bg: #393f75;
    --bs-btn-active-border-color: #393f75;
    --bs-btn-disabled-bg: var(--bs-dark);
    --bs-btn-disabled-border-color: var(--bs-dark);
}

/* ------------ Cards ------------ */

.card {
    --bs-card-color: var(--bs-body-color);
    --bs-card-title-color: var(--bs-dark);
    --bs-card-subtitle-color: var(--bs-dark-bg-subtle);
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-border-radius: var(--bs-border-radius);
    --bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
    --bs-card-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15);
}

.card.text-bg-dark {
    --bs-card-color: var(--bs-light);
    --bs-card-title-color: var(--bs-light);
}

    .card:hover {
        box-shadow: var(--bs-card-box-shadow);
        border-color: var(--bs-secondary);
    }

.card.card-no-hover:hover {
    box-shadow: none;
    border-color: var(--bs-card-border-color);
}

.card.profile-dashboard {
    background-color: var(--bs-light);
}

.card-body.profile-dashboard h3,
.card-body.profile-dashboard p,
#pointSummary {
    color: var(--bs-body-color) !important;
}
/* ------------ Chapter/Resource Cards ------------ */
.card-img-custom-chapters {
    border-top-left-radius: var(--bs-card-inner-border-radius) !important;
    border-bottom-left-radius: var(--bs-card-inner-border-radius) !important;
}

.chapters > div[aria-expanded="false"].card > div:not(.card-body) > .card-img-custom-chapters {
    border-bottom-left-radius: var(--bs-card-inner-border-radius) !important;
}

/* ------------ Progress ------------ */

.progress, .progress-stacked {
    --bs-progress-bar-bg: var(--bs-primary);
}

/* ------------ Dropdown ------------ */

.dropdown-menu {
    --bs-dropdown-link-hover-color: var(--bs-body-color);
    --bs-dropdown-link-hover-bg: var(--bs-light);
    --bs-dropdown-link-active-color: var(--bs-dark);
    --bs-dropdown-link-active-bg: var(--bs-primary);
    --bs-dropdown-border-radius: .625rem;
}

.dropdown-item:focus, .dropdown-item:hover {
    color: var(--bs-dropdown-link-hover-color);
    background-color: var(--bs-dropdown-link-hover-bg);
}

.dropdown-item.active, .dropdown-item:active {
    color: var(--bs-dropdown-link-active-color);
    background-color: var(--bs-dropdown-link-active-bg);
}

/* ------------ Pagination ------------ */

.pagination {
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
    --bs-pagination-bg: transparent;
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-color: rgba(var(--bs-primary-rgb), .3);
}

/* ------------ Tabs ------------ */

.nav-tabs {
    --bs-nav-tabs-link-hover-border-color: #fff0 #fff0 var(--bs-primary);
    --bs-nav-tabs-link-active-border-color: #fff0 #fff0 var(--bs-primary);
    font-family: "AYTP-Semibold",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

.navbar-nav .nav-link,
.navbar-nav .nav-link:active,
.navbar-nav .nav-link.active {
    color: var(--bs-black);
}

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link:focus {
        color: #1e2125
    }

.nav-tabs .nav-link.active {
    background-color: transparent;
}

.nav-tabs .nav-link {
    color: var(--bs-primary);
}

/* ------------ Navbar ------------ */

#navbar {
    background-color: var(--bs-body-bg);
    --bs-navbar-active-color: var(--bs-primary);
    --bs-nav-link-font-size: 1rem;
    font-weight: 500;
    border-bottom: 1px solid #D6DFE3;
}


    #navbar .navbar-nav .nav-link:active,
    #navbar .navbar-nav .nav-link.active {
        color: var(--bs-primary);
        border-bottom: 0;
    }

    #navbar .dropdown-toggle::after {
        display: inline-block;
        font-family: bootstrap-icons !important;
        font-style: normal;
        font-weight: normal !important;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        vertical-align: -0.125em;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: "\F282";
        border: none;
    }

/* ------------ Offcanvas ------------ */

.offcanvas {
    --bs-offcanvas-width: 600px;
    background: #F8FBFA;
    background: linear-gradient(65deg, #F8FBFA 0%, #E1F3F7 100%);
}

.offcanvas-header .btn-close {
    --bs-btn-close-opacity: 1;
    --bs-btn-close-hover-opacity: 1;
    background: none;
    color: var(--bs-secondary);
    font-size: 2rem;
}

    .offcanvas-header .btn-close:before {
        display: inline-block;
        font-family: bootstrap-icons !important;
        content: '\F622';
        transition: .15s ease-in-out;
        height: 2rem;
        position: relative;
        bottom: .5rem;
    }

    .offcanvas-header .btn-close:hover:before {
        color: #474747;
    }

    .offcanvas-header .btn-close:active:before {
        color: #5c5c5c;
    }

/* ------------ Page Header ------------ */

.page-header {
    background: #F8FBFA;
    background: linear-gradient(65deg, #F8FBFA 0%, #E1F3F7 100%);
    color: var(--bs-dark);
}

    .page-header-container, .page-header-container h1, .page-header-container:not(.gradient-mask) .lead, .page-header-container p, .page-header-container .dropdown-toggle::after, .page-header-container .user-profile-info > h3, .page-header-container .user-profile-info #userEmail, .page-header-container label, .page-header #defaultProfilePic {
        color: var(--bs-dark);
    }

    .page-header-container #dropdownText {
        font-weight: 700;
    }

        .page-header-container .page-header-learning {
            border-radius: 0.625rem;
        }

/* ------------ Table ------------ */

.table-light {
    --bs-table-bg: var(--bs-light);
}

.card-table {
    --bs-card-border-radius: .625rem;
    --bs-card-inner-border-radius: var(--bs-card-border-radius);
}

/* ------------ Table Stacked ------------ */

.table-stacked tr:not(:first-of-type) {
    border-top: 1px solid var(--bs-border-color);
}

.card .table-stacked th:first-of-type, .card .table-stacked-lg th:first-of-type {
    border-top-left-radius: calc(var(--bs-border-radius) - 1px);
}

.card .table-stacked th:last-of-type, .card .table-stacked-lg th:last-of-type {
    border-top-right-radius: calc(var(--bs-border-radius) - 1px);
}

.table-stacked-lg tr:not(:first-of-type) {
    border-top: 1px solid var(--bs-border-color);
}

.k-grid .k-pager-wrap.k-grid-pager .k-pager-numbers .k-link:hover,
.k-grid .k-pager-wrap.k-grid-pager .k-pager-nav.k-link:hover {
    color: #e55218;
}

/*.k-grid .k-pager-wrap.k-grid-pager .k-pager-numbers .k-link.k-state-selected {
    color: var(--bs-light);
}*/

/* ------------ Carousel ------------ */

.carousel-inner {
    border-radius: var(--bs-border-radius) !important;
}

.featured-column .carousel-control-prev,
.featured-column .carousel-control-next {
    color: var(--bs-primary);
    background-color: var(--bs-white);
    border-color: var(--bs-white);
    box-shadow: var(--bs-box-shadow-sm);
    opacity: 1;
    transition: .15s ease-in-out;
}

    .featured-column .carousel-control-prev:hover,
    .featured-column .carousel-control-next:hover {
        background-color: #e6e6e6;
        border-color: #e6e6e6;
    }

    .featured-column .carousel-control-prev:active,
    .featured-column .carousel-control-next:active {
        background-color: #ccc;
        border-color: #ccc;
    }

.featured-column .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300C7C7'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.featured-column .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2300C7C7'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* ------------ Inputs ------------ */

.form-control,
.form-select,
.input-group-text
 {
    border-color: #525C66 !important;
    border-radius: .375rem;
}

    .form-control[readonly] {
        background-color: var(--bs-secondary-bg);
    }

.k-datepicker .k-picker-wrap,
.k-timepicker .k-picker-wrap {
    border-radius: .375rem !important;
}

.form-check-input {
    border-color: #525C66 !important;
}

#dob .k-datepicker .form-floating input.k-input.form-control {
    border-radius: .375rem 0 0 .375rem !important;
}

#dob .k-select.input-group-text {
    border-radius: 0 .375rem .375rem 0 !important;
}

.k-datepicker .form-floating input#birthdatepicker.k-input.form-control,
#dob .k-datepicker.input-group .k-select.input-group-text {
    border-color: #525C66 !important
}

.select2-selection.select2-selection--multiple,
.k-multiselect-wrap,
.k-textarea,
.k-textbox,
.select2-container--default .select2-selection--single,
.ui-autocomplete,
.select2-results__options,
.k-list-container,
.ui-datepicker,
.select2-results__options {
    border-radius: .375rem !important;
    border-color: #525C66 !important;
}

.k-dateinput,
.k-datepicker,
.k-datetimepicker,
.k-timepicker {
    border-width: 1px !important;
}

    .k-datepicker .k-picker-wrap,
    .k-timepicker .k-picker-wrap,
    .k-datetimepicker .k-picker-wrap,
    .k-dateinput .k-dateinput-wrap {
        border-color: #525C66 !important;
    }

        .k-datepicker .k-picker-wrap .k-select {
            border-radius: 0 calc(.375rem - 1px) calc(.375rem - 1px) 0 !important;
        }

.form-check.form-switch .form-check-input,
.form-check.form-switch .form-check-label {
    height: 1.3rem;
}

.form-check.form-switch .form-check-label {
    margin-top: 2px;
}

.form-check.form-switch .form-check-input {
    margin-bottom: 0.25rem;
}

.form-check.form-switch .form-check-input {
    border: none;
    --bs-form-check-bg: var(--bs-secondary);
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

/* ------------ SKU List ------------ */
#small-searchlist {
    border-top-left-radius: .625rem !important;
    border-bottom-left-radius: .625rem !important;
}

#ddlClaimTypes {
    border-top-right-radius: .625rem !important;
    border-bottom-right-radius: .625rem !important;
}

#datePickerIcon {
    background-color: var(--bs-body-bg);
}

.bg-sku-list {
    background-color: transparent !important;
    border-color: transparent !important;
    margin-left: -1rem;
    margin-right: -1rem;
    margin-bottom: -1rem;
}

#small-searchlist {
    border-right-color: var(--bs-border-color) !important;
}

#ddlCategories {
    border-left-color: var(--bs-border-color) !important;
    border-right-color: var(--bs-border-color) !important;
}

#ddlClaimTypes {
    border-left-color: var(--bs-border-color) !important;
}

@media (max-width: 768px) {
    #ddlClaimTypes, #ddlSubCategories {
        border-bottom: 1px solid #525C66 !important;
    }

    #ddlSubCategories {
        border-bottom-left-radius: .625rem !important;
    }

    #small-searchlist {
        border-bottom-left-radius: 0 !important;
        border-right-color: #525C66 !important;
    }

    .sku-row-1 {
        border-top-right-radius: .625rem !important;
    }

    #ddlCategories {
        border-left-color: var(--bs-border-color) !important;
        border-right-color: #525C66 !important;
    }

    #ddlClaimTypes,
    #ddlSubCategories,
    #pointsdatepicker,
    #datePickerIcon,
    #ddlCategories {
        border-top-color: var(--bs-border-color) !important;
    }
}

@media (min-width: 768px) {
    .sku-row-3:not(#ddlCategories.sku-row-3) {
        border-top-right-radius: .625rem !important;
    }
}

/* ------------ Footer ------------ */
.footer {
    padding-top: 40px;
}

.footer-row-1 {
    padding-top: 40px;
    padding-bottom: 40px;
    border-top: 1px solid #D6DFE3;
    background-color: #F6F9FC;
}

    .footer-row-1 h2 {
        margin-top: 0px;
    }

.footer-row-2 {
    border-top: 1px solid #D6DFE3;
    padding-top: 30px;
    padding-bottom: 30px;
}

.login-bg {
    background-color: var(--bs-light);
}

#loginRight {
    display: flex;
    height: calc(100vh - 2rem);
    flex-direction: column;
    background-image: url(../images/login-bg.png);
/*    background-position: left;*/
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--bs-white);
    margin: 1rem 0 1rem 1rem;
    border-radius: var(--bs-border-radius);
}

.login-wrapper .card,
.forgot-password,
.card-register {
    border: none;
    background-color: transparent;
}

.login-wrapper .btn-lg {
    --bs-btn-font-size: 1rem;
}

.login-bg .copyright {
    display: none;
}

.home-offer {
    height: 150px;
    width: 100%;
}

.gradient-mask {
    mask-image: none;
    filter: none;
}

    .gradient-mask .page-header {
        background: transparent;
        backdrop-filter: blur(20px) brightness(.9)
    }

.form-floating > label {
    opacity: 1;
}

#promotionMask + .gradient-mask-container,
#resourceMask + .gradient-mask-container {
    margin-bottom: 8rem !important;
}

#_products .rounded-pill.border {
    --bs-border-color: var(--bs-secondary);
}

#orderTable .btn.btn-link {
    font-family: var(--bs-font-sans-serif);
}

.ClaimStatus_New:before {
    color: var(--bs-info);
}

.promotion-item .text-black-50 {
    color: var(--bs-body-color) !important;
}

.chapters .bi-check-circle-fill.text-muted {
    opacity: .5;
}

.pagination .page-link {
    border-radius: var(--bs-border-radius-sm) !important;
}

.bi-reward-points:before {
    mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 151 151'%3E%3C!-- Generator: Adobe Illustrator 30.1.0, SVG Export Plug-In . SVG Version: 2.1.1 Build 136) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: %23070f52; %7D %3C/style%3E%3C/defs%3E%3Cpath class='st0' d='M54,102.6v17c0,1.6-1.3,3-3,3h-17c-1.6,0-3-1.3-3-3v-17c0-1.6,1.3-3,3-3h17c1.6,0,3,1.3,3,3ZM51.9,125.6l-8.4,8.4c-1.2,1.1-.9,2.7.5,3.5l7.2,3.4c1.5.6,2.8-.2,2.8-1.8v-12.6c0-1.6-1-2-2.1-.9h0ZM14.6,52.5h12.6c1.6,0,2-1,.9-2.1l-8.4-8.4c-1.2-1.2-2.7-.9-3.5.5l-3.4,7.2c-.6,1.5.2,2.7,1.8,2.7h0ZM51.6,78.2c1.2-1.2,1.2-3.1,0-4.2l-18.8-18.8c-1.2-1.2-3-1.2-4.2,0l-18.9,18.8c-1.2,1.2-1.2,3.1,0,4.2l18.9,18.8c1.2,1.2,3,1.2,4.2,0l18.8-18.8h0ZM128,52.5h12.6c1.6,0,2.5-1.2,1.8-2.8l-3.4-7.2c-.8-1.4-2.4-1.7-3.5-.5l-8.4,8.4c-1.2,1.2-.8,2.1.9,2.1h0ZM104.2,52.5h17c1.6,0,3-1.3,3-3v-17c0-1.6-1.3-3-3-3h-17c-1.6,0-3,1.3-3,3v17c0,1.6,1.3,3,3,3ZM103.3,26.5l8.4-8.4c1.2-1.1.9-2.7-.5-3.5l-7.2-3.4c-1.5-.6-2.8.2-2.8,1.8v12.6c0,1.6.9,2,2.1.9h0ZM27.2,99.6h-12.6c-1.6,0-2.5,1.2-1.8,2.7l3.4,7.2c.8,1.4,2.4,1.7,3.5.5l8.4-8.4c1.2-1.2.8-2.1-.9-2.1h0ZM140.6,99.6h-12.6c-1.6,0-2,.9-.9,2.1l8.4,8.4c1.2,1.2,2.7.9,3.5-.5l3.4-7.2c.6-1.5-.2-2.7-1.8-2.7h0ZM121.1,99.6h-17c-1.6,0-3,1.3-3,3v17c0,1.6,1.3,3,3,3h17c1.6,0,3-1.3,3-3v-17c0-1.6-1.3-3-3-3ZM145.5,73.9l-18.8-18.8c-1.2-1.2-3.1-1.2-4.2,0l-18.8,18.8c-1.2,1.2-1.2,3.1,0,4.2l18.8,18.8c1.2,1.2,3.1,1.2,4.2,0l18.8-18.8c1.2-1.2,1.2-3.1,0-4.2h0ZM103.3,125.6c-1.2-1.2-2.1-.8-2.1.9v12.6c0,1.6,1.2,2.5,2.8,1.8l7.2-3.4c1.4-.8,1.7-2.4.5-3.5l-8.4-8.4h0ZM79.7,8.2c-1.2-1.2-3.1-1.2-4.2,0l-18.8,18.8c-1.2,1.1-1.2,3,0,4.2l18.8,18.8c1.2,1.2,3.1,1.2,4.2,0l18.8-18.8c1.2-1.1,1.2-3,0-4.2,0,0-18.8-18.8-18.8-18.8ZM51.3,11.2l-7.2,3.4c-1.4.8-1.7,2.4-.5,3.5l8.4,8.4c1.2,1.1,2.1.8,2.1-.9v-12.6c0-1.6-1.2-2.5-2.8-1.8h0ZM51,29.6h-17c-1.6,0-3,1.3-3,3v17c0,1.6,1.3,3,3,3h17c1.6,0,3-1.3,3-3v-17c0-1.6-1.3-3-3-3ZM79.7,102.2c-1.2-1.2-3.1-1.2-4.2,0l-18.8,18.8c-1.2,1.2-1.2,3,0,4.2l18.8,18.8c1.2,1.1,3.1,1.1,4.2,0l18.8-18.8c1.2-1.2,1.2-3.1,0-4.2l-18.8-18.8Z'/%3E%3C/svg%3E");
}

.bi-reward-points-footer:before {
    content: "";
    height: 62px;
    width: 62px;
    background-color: var(--bs-dark);
    mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 151 151'%3E%3C!-- Generator: Adobe Illustrator 30.1.0, SVG Export Plug-In . SVG Version: 2.1.1 Build 136) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: %23070f52; %7D %3C/style%3E%3C/defs%3E%3Cpath class='st0' d='M54,102.6v17c0,1.6-1.3,3-3,3h-17c-1.6,0-3-1.3-3-3v-17c0-1.6,1.3-3,3-3h17c1.6,0,3,1.3,3,3ZM51.9,125.6l-8.4,8.4c-1.2,1.1-.9,2.7.5,3.5l7.2,3.4c1.5.6,2.8-.2,2.8-1.8v-12.6c0-1.6-1-2-2.1-.9h0ZM14.6,52.5h12.6c1.6,0,2-1,.9-2.1l-8.4-8.4c-1.2-1.2-2.7-.9-3.5.5l-3.4,7.2c-.6,1.5.2,2.7,1.8,2.7h0ZM51.6,78.2c1.2-1.2,1.2-3.1,0-4.2l-18.8-18.8c-1.2-1.2-3-1.2-4.2,0l-18.9,18.8c-1.2,1.2-1.2,3.1,0,4.2l18.9,18.8c1.2,1.2,3,1.2,4.2,0l18.8-18.8h0ZM128,52.5h12.6c1.6,0,2.5-1.2,1.8-2.8l-3.4-7.2c-.8-1.4-2.4-1.7-3.5-.5l-8.4,8.4c-1.2,1.2-.8,2.1.9,2.1h0ZM104.2,52.5h17c1.6,0,3-1.3,3-3v-17c0-1.6-1.3-3-3-3h-17c-1.6,0-3,1.3-3,3v17c0,1.6,1.3,3,3,3ZM103.3,26.5l8.4-8.4c1.2-1.1.9-2.7-.5-3.5l-7.2-3.4c-1.5-.6-2.8.2-2.8,1.8v12.6c0,1.6.9,2,2.1.9h0ZM27.2,99.6h-12.6c-1.6,0-2.5,1.2-1.8,2.7l3.4,7.2c.8,1.4,2.4,1.7,3.5.5l8.4-8.4c1.2-1.2.8-2.1-.9-2.1h0ZM140.6,99.6h-12.6c-1.6,0-2,.9-.9,2.1l8.4,8.4c1.2,1.2,2.7.9,3.5-.5l3.4-7.2c.6-1.5-.2-2.7-1.8-2.7h0ZM121.1,99.6h-17c-1.6,0-3,1.3-3,3v17c0,1.6,1.3,3,3,3h17c1.6,0,3-1.3,3-3v-17c0-1.6-1.3-3-3-3ZM145.5,73.9l-18.8-18.8c-1.2-1.2-3.1-1.2-4.2,0l-18.8,18.8c-1.2,1.2-1.2,3.1,0,4.2l18.8,18.8c1.2,1.2,3.1,1.2,4.2,0l18.8-18.8c1.2-1.2,1.2-3.1,0-4.2h0ZM103.3,125.6c-1.2-1.2-2.1-.8-2.1.9v12.6c0,1.6,1.2,2.5,2.8,1.8l7.2-3.4c1.4-.8,1.7-2.4.5-3.5l-8.4-8.4h0ZM79.7,8.2c-1.2-1.2-3.1-1.2-4.2,0l-18.8,18.8c-1.2,1.1-1.2,3,0,4.2l18.8,18.8c1.2,1.2,3.1,1.2,4.2,0l18.8-18.8c1.2-1.1,1.2-3,0-4.2,0,0-18.8-18.8-18.8-18.8ZM51.3,11.2l-7.2,3.4c-1.4.8-1.7,2.4-.5,3.5l8.4,8.4c1.2,1.1,2.1.8,2.1-.9v-12.6c0-1.6-1.2-2.5-2.8-1.8h0ZM51,29.6h-17c-1.6,0-3,1.3-3,3v17c0,1.6,1.3,3,3,3h17c1.6,0,3-1.3,3-3v-17c0-1.6-1.3-3-3-3ZM79.7,102.2c-1.2-1.2-3.1-1.2-4.2,0l-18.8,18.8c-1.2,1.2-1.2,3,0,4.2l18.8,18.8c1.2,1.1,3.1,1.1,4.2,0l18.8-18.8c1.2-1.2,1.2-3.1,0-4.2l-18.8-18.8Z'/%3E%3C/svg%3E");
}

.eat-btn {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: 0;
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-hover-color: #344050;
    --bs-btn-active-color: #2e3947;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
}

    .eat-btn .bi.bi-arrow-left {
        height: 16px;
        width: 16px;
        background-color: var(--bs-secondary);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 8px;
        background-image: url("data:image/svg+xml,%3csvg viewBox='-3 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.35355 0.646447C7.54882 0.841709 7.54882 1.15829 7.35355 1.35355L1.70711 7L7.35355 12.6464C7.54882 12.8417 7.54882 13.1583 7.35355 13.3536C7.15829 13.5488 6.84171 13.5488 6.64645 13.3536L0.646447 7.35355C0.451184 7.15829 0.451184 6.84171 0.646447 6.64645L6.64645 0.646447C6.84171 0.451184 7.15829 0.451184 7.35355 0.646447Z' fill='white' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
        border-radius: 50%;
    }

.eat-btn:hover .bi.bi-arrow-left {
    background-color: var(--bs-btn-hover-color);
}

.eat-btn:active .bi.bi-arrow-left {
    background-color: var(--bs-btn-active-color);
}

.eat-btn .bi.bi-arrow-left:before {
    content: "";
}

.bi.bi-chevron-right-circle,
#promoForms .bi.bi-arrow-right-circle-fill {
    background-image: url("../images/chevron-right.svg");
    width: 33px;
    height: 33px;
    display: block;
    background-repeat: no-repeat;
    padding-left: 1rem;
    padding-right: 1rem;
}

    .bi-chevron-right-circle:before,
    #promoForms .bi.bi-arrow-right-circle-fill:before {
        content: "";
    }

#decline-confirmation-popup .modal-title {
    color: var(--bs-black);
}

#decline-confirmation-popup .modal-footer {
    background-color: var(--bs-light);
}

.custom-scroll::-webkit-scrollbar-track {
    background-color: #eee;
}

.bi-person-circle.profile-icon {
    color: var(--bs-dark);
}

.page-header-container .dropdown-toggle::after {
    margin-left: 0;
    vertical-align: .15em;
    border-top: .2em solid;
    border-right: .2em solid transparent;
    border-left: .2em solid transparent;
}