.hidden {
    display: none !important;
}

.pointer-none {
    pointer-events: none;
}

.dashboard-display {
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 1px 6px 1px rgba(0, 0, 0, 0.05)
}

.dashboard-display-icon {
    font-size: 2rem;
    color: rgba(0, 0, 0, 0.15);
}

.dashboard-display-number {
    font-size: 1.3rem;
    font-weight: 700;
}

.dashboard-main-col {
    border-radius: 4px;
    box-shadow: 0 1px 6px 1px rgba(0, 0, 0, 0.05);
    background-color: #fff;
}

.translation-section-btn {
    margin-bottom: 2rem;
    background-color: rgba(245, 245, 245, 0.70);
    color: #37474F;
    font-size: 1.2rem;
    border: 3px dotted #8360C3;
    padding: 0 25px;
}

.alert-update {
    color: #FF9800;
    background-color: #ffffff;
    border-color: #d8d8d8;
    border-radius: 0.275rem;
    box-shadow: 0 1px 6px 1px rgba(0, 0, 0, 0.05);
}

@media (min-width: 320px) and (max-width: 767px) {
    .navbar-collapse.collapse {
        z-index: 9999999;
        background-color: #fff;
        box-shadow: 0 5px 20px 0 #ccc;
    }
}

.gllpMap {
    width: 100%;
    height: 350px;
}

@media only screen and (max-width: 600px) {
    .gllpMap {
        width: 100%;
        height: 200px;
    }

    .location-search-block {
        display: none !important;
    }
}

.gllpSearchField {
    border-radius: 20px 0 0 20px;
    box-shadow: 0 2px 5px 2px #ccc;
}

.gllpSearchButton {
    border-radius: 0px 20px 20px 0px;
    box-shadow: 0 2px 5px 2px #ccc;
}

.gm-fullscreen-control {
    display: none;
}

.location-search-block {
    position: relative;
    top: -26rem;
    z-index: 999;
}


@media only screen and (max-width: 600px) {
    .location-search-block {
        display: block !important;
    }

    .location-search-block {
        position: relative;
        top: -24rem;
        z-index: 999;
    }

    .location-search-block {
        position: relative;
        top: -325px;
        z-index: 999;
    }

    #map {
        margin-top: 100px;
    }

    .gllpSearchField {
        border-radius: 20px !important;
    }

    .gllpSearchButton {
        border-radius: 20px;
        width: 100%;
        margin-top: 4px;
    }
}


.navbar-dark {

    color: rgba(255, 255, 255, .9);
    background: #8360c3;
    background: -webkit-linear-gradient(to left, #2ebf91, #8360c3);
    background: linear-gradient(to left, #2ebf91, #048a0c);
    border-bottom-color: rgba(255, 255, 255, .1);

}


.badge-primary {

    color: #fff;
    background-color: #048a0c;

}

a {
    color: #048a0c;
}


.multi_step_form {
    background: #f6f9fb;
    display: block;
    overflow: hidden;
}

.multi_step_form #msform {
    text-align: center;
    position: relative;
    padding-top: 20px;
    margin: 0 auto;
    background: #ffffff;
    z-index: 1;
}

.multi_step_form #msform .tittle {
    text-align: center;
    padding-bottom: 25px;
}

.multi_step_form #msform .tittle h2 {
    font: 500 24px/35px "Roboto", sans-serif;
    color: #3f4553;
    padding-bottom: 5px;
}

.multi_step_form #msform .tittle p {
    font: 400 16px/28px "Roboto", sans-serif;
    color: #5f6771;
}

.multi_step_form #msform fieldset {
    border: 0;
    padding: 20px 105px 0;
    position: relative;
    width: 100%;
    left: 0;
    right: 0;
}

.multi_step_form #msform fieldset:not(:first-of-type) {
    display: none;
}

.multi_step_form #msform fieldset h3 {
    font: 500 18px/35px "Roboto", sans-serif;
    color: #3f4553;
}

.multi_step_form #msform fieldset h6 {
    font: 400 15px/28px "Roboto", sans-serif;
    color: #5f6771;
    padding-bottom: 30px;
}

.multi_step_form #msform fieldset .intl-tel-input {
    display: block;
    background: transparent;
    border: 0;
    box-shadow: none;
    outline: none;
}

.multi_step_form #msform fieldset .intl-tel-input .flag-container .selected-flag {
    padding: 0 20px;
    background: transparent;
    border: 0;
    box-shadow: none;
    outline: none;
    width: 65px;
}

.multi_step_form #msform fieldset .intl-tel-input .flag-container .selected-flag .iti-arrow {
    border: 0;
}

.multi_step_form #msform fieldset .intl-tel-input .flag-container .selected-flag .iti-arrow:after {
    content: "\f35f";
    position: absolute;
    top: 0;
    right: 0;
    font: normal normal normal 24px/7px Ionicons;
    color: #5f6771;
}

.multi_step_form #msform fieldset #phone {
    padding-left: 80px;
}

.multi_step_form #msform fieldset .form-group {
    padding: 0 10px;
}

.multi_step_form #msform fieldset .fg_2,
.multi_step_form #msform fieldset .fg_3 {
    padding-top: 10px;
    display: block;
    overflow: hidden;
}

.multi_step_form #msform fieldset .fg_3 {
    padding-bottom: 70px;
}

.multi_step_form #msform fieldset .form-control,
.multi_step_form #msform fieldset .product_select {
    border-radius: 3px;
    border: 1px solid #d8e1e7;
    padding: 0 20px;
    height: auto;
    font: 400 15px/48px "Roboto", sans-serif;
    color: #5f6771;
    box-shadow: none;
    outline: none;
    width: 100%;
}

.multi_step_form #msform fieldset .form-control.placeholder,
.multi_step_form #msform fieldset .product_select.placeholder {
    color: #5f6771;
}

.multi_step_form #msform fieldset .form-control:-moz-placeholder,
.multi_step_form #msform fieldset .product_select:-moz-placeholder {
    color: #5f6771;
}

.multi_step_form #msform fieldset .form-control::-moz-placeholder,
.multi_step_form #msform fieldset .product_select::-moz-placeholder {
    color: #5f6771;
}

.multi_step_form #msform fieldset .form-control::-webkit-input-placeholder,
.multi_step_form #msform fieldset .product_select::-webkit-input-placeholder {
    color: #5f6771;
}

.multi_step_form #msform fieldset .form-control:hover,
.multi_step_form #msform fieldset .form-control:focus,
.multi_step_form #msform fieldset .product_select:hover,
.multi_step_form #msform fieldset .product_select:focus {
    border-color: #5cb85c;
}

.multi_step_form #msform fieldset .form-control:focus.placeholder,
.multi_step_form #msform fieldset .product_select:focus.placeholder {
    color: transparent;
}

.multi_step_form #msform fieldset .form-control:focus:-moz-placeholder,
.multi_step_form #msform fieldset .product_select:focus:-moz-placeholder {
    color: transparent;
}

.multi_step_form #msform fieldset .form-control:focus::-moz-placeholder,
.multi_step_form #msform fieldset .product_select:focus::-moz-placeholder {
    color: transparent;
}

.multi_step_form #msform fieldset .form-control:focus::-webkit-input-placeholder,
.multi_step_form #msform fieldset .product_select:focus::-webkit-input-placeholder {
    color: transparent;
}

.multi_step_form #msform fieldset .product_select:after {
    display: none;
}

.multi_step_form #msform fieldset .product_select:before {
    content: "\f35f";
    position: absolute;
    top: 0;
    right: 20px;
    font: normal normal normal 24px/48px Ionicons;
    color: #5f6771;
}

.multi_step_form #msform fieldset .product_select .list {
    width: 100%;
}

.multi_step_form #msform fieldset .done_text {
    padding-top: 40px;
}

.multi_step_form #msform fieldset .done_text .don_icon {
    height: 36px;
    width: 36px;
    line-height: 36px;
    font-size: 22px;
    margin-bottom: 10px;
    background: #5cb85c;
    display: inline-block;
    border-radius: 50%;
    color: #ffffff;
    text-align: center;
}

.multi_step_form #msform fieldset .done_text h6 {
    line-height: 23px;
}

.multi_step_form #msform fieldset .code_group {
    margin-bottom: 60px;
}

.multi_step_form #msform fieldset .code_group .form-control {
    border: 0;
    border-bottom: 1px solid #a1a7ac;
    border-radius: 0;
    display: inline-block;
    width: 30px;
    font-size: 30px;
    color: #5f6771;
    padding: 0;
    margin-right: 7px;
    text-align: center;
    line-height: 1;
}

.multi_step_form #msform fieldset .passport {
    margin-top: -10px;
    padding-bottom: 30px;
    position: relative;
}

.multi_step_form #msform fieldset .passport .don_icon {
    height: 36px;
    width: 36px;
    line-height: 36px;
    font-size: 22px;
    position: absolute;
    top: 4px;
    right: 0;
    background: #5cb85c;
    display: inline-block;
    border-radius: 50%;
    color: #ffffff;
    text-align: center;
}

.multi_step_form #msform fieldset .passport h4 {
    font: 500 15px/23px "Roboto", sans-serif;
    color: #5f6771;
    padding: 0;
}

.multi_step_form #msform fieldset .input-group {
    padding-bottom: 40px;
}

.multi_step_form #msform fieldset .input-group .custom-file {
    width: 100%;
    height: auto;
}

.multi_step_form #msform fieldset .input-group .custom-file .custom-file-label {
    width: 168px;
    border-radius: 5px;
    cursor: pointer;
    font: 700 14px/40px "Roboto", sans-serif;
    border: 1px solid #99a2a8;
    text-align: center;
    transition: all 300ms linear 0s;
    color: #5f6771;
}

.multi_step_form #msform fieldset .input-group .custom-file .custom-file-label i {
    font-size: 20px;
    padding-right: 10px;
}

.multi_step_form #msform fieldset .input-group .custom-file .custom-file-label:hover,
.multi_step_form #msform fieldset .input-group .custom-file .custom-file-label:focus {
    background: #5cb85c;
    border-color: #5cb85c;
    color: #fff;
}

.multi_step_form #msform fieldset .input-group .custom-file input {
    display: none;
}

.multi_step_form #msform fieldset .file_added {
    text-align: left;
    padding-left: 190px;
    padding-bottom: 60px;
}

.multi_step_form #msform fieldset .file_added li {
    font: 400 15px/28px "Roboto", sans-serif;
    color: #5f6771;
}

.multi_step_form #msform fieldset .file_added li a {
    color: #5cb85c;
    font-weight: 500;
    display: inline-block;
    position: relative;
    padding-left: 15px;
}

.multi_step_form #msform fieldset .file_added li a i {
    font-size: 22px;
    padding-right: 8px;
    position: absolute;
    left: 0;
    transform: rotate(20deg);
}

.multi_step_form #msform #progressbar {
    margin-bottom: 30px;
    overflow: hidden;
}

.multi_step_form #msform #progressbar li {
    list-style-type: none;
    color: #99a2a8;
    font-size: 9px;
    width: calc(100% / 3);
    float: left;
    position: relative;
    font: 500 13px/1 "Roboto", sans-serif;
}

.multi_step_form #msform #progressbar li:nth-child(2):before {
    content: "2";
}

.multi_step_form #msform #progressbar li:nth-child(3):before {
    content: "3";
}

.multi_step_form #msform #progressbar li:before {
    content: "1";
    /*font: normal normal normal 30px/50px Ionicons;*/
    width: 50px;
    height: 50px;
    line-height: 50px;
    display: block;
    background: #eaf0f4;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    font-size: 28px;
}

.multi_step_form #msform #progressbar li:after {
    content: '';
    width: 100%;
    height: 10px;
    background: #eaf0f4;
    position: absolute;
    left: -50%;
    top: 21px;
    z-index: -1;
}

.multi_step_form #msform #progressbar li:last-child:after {
    width: 150%;
}

.multi_step_form #msform #progressbar li.active {
    color: #5cb85c;
}

.multi_step_form #msform #progressbar li.active:before,
.multi_step_form #msform #progressbar li.active:after {
    background: #5cb85c;
    color: white;
}

.multi_step_form #msform .action-button {
    background: #5cb85c;
    color: white;
    border: 0 none;
    border-radius: 5px;
    cursor: pointer;
    min-width: 130px;
    font: 700 14px/40px "Roboto", sans-serif;
    border: 1px solid #5cb85c;
    margin: 0 5px;
    text-transform: uppercase;
    display: inline-block;
}

.multi_step_form #msform .action-button:hover,
.multi_step_form #msform .action-button:focus {
    background: #405867;
    border-color: #405867;
}

.multi_step_form #msform .previous_button {
    background: transparent;
    color: #99a2a8;
    border-color: #99a2a8;
}

.multi_step_form #msform .previous_button:hover,
.multi_step_form #msform .previous_button:focus {
    background: #405867;
    border-color: #405867;
    color: #fff;
}

.navbar-brand a {
    font-size: 12px !important;
    color: #b6aeec !important;
    display: inline-flex !important;
}

.required-indicator::after {
    content: " *";
    color: #dc3545;
    font-weight: bold;
}

/* Product unit styling */
.product-unit {
    font-size: medium;
    font-weight: 400;
    font-style: normal;
    margin-left: 11px;
}

/* Professional styling for Mark as Picked button */
.markItemPickedBtn--professional {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
    transition: all 0.3s ease;
    text-transform: none;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
}

.markItemPickedBtn--professional:hover {
    background: linear-gradient(135deg, #218838 0%, #1aa179 100%);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
    transform: translateY(-1px);
    color: #ffffff;
}

.markItemPickedBtn--professional:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
}

.markItemPickedBtn--professional:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.25);
}

.markItemPickedBtn--professional:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.15);
}

.markItemPickedBtn--professional i {
    font-size: 1rem;
    margin-right: 0.375rem;
}

/* Password visibility toggle styles */
#showPassword {
    cursor: pointer;
    padding: 5px;
    border: 1px solid #E0E0E0;
    border-radius: 0.275rem;
    color: #9E9E9E;
}

#showPassword:hover {
    color: #616161;
}

/* Professional styling for Picked badge */
.picked-badge--professional {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.3px;
    min-width: 140px;
    justify-content: center;
}

.picked-badge--professional i {
    font-size: 1rem;
}

/* Mobile responsive styles for Mark as Picked button */
@media (max-width: 767.98px) {
    .markItemPickedBtn--professional {
        width: 100%;
        min-width: auto;
        margin-top: 0.5rem;
    }

    .picked-badge--professional {
        width: 100%;
        min-width: auto;
        margin-top: 0.5rem;
    }

    [id^="itemPickedContainer_"] {
        width: 100% !important;
    }
}

/* Scroll to Top Button Styles */
.scroll-to-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: #43a047;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
    transition: all 0.3s ease;
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px);
}

.scroll-to-top-btn:hover {
    background-color: #2e7d32;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46, 125, 50, 0.4);
}

.scroll-to-top-btn.show {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.scroll-to-top-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .scroll-to-top-btn {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .scroll-to-top-btn {
        bottom: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
}

/* Scroll to Bottom Button Styles */
.scroll-to-bottom-btn {
    position: fixed;
    bottom: 90px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: #43a047;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.3);
    transition: all 0.3s ease;
    z-index: 1000;
    opacity: 0;
    transform: translateY(20px);
}

.scroll-to-bottom-btn:hover {
    background-color: #2e7d32;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46, 125, 50, 0.4);
}

.scroll-to-bottom-btn.show {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.scroll-to-bottom-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.3);
}

@media (max-width: 768px) {
    .scroll-to-bottom-btn {
        bottom: 75px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .scroll-to-bottom-btn {
        bottom: 65px;
        right: 15px;
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
}

/* Premium Out of Stock Badge */
.badge-out-of-stock {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    background-color: #ef4444 !important;
    color: #ffffff !important;
    padding: 4px 10px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    border-radius: 5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    z-index: 999 !important;
    line-height: 1 !important;
    box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    border: none !important;
    transition: all 0.2s ease-in-out !important;
}

.badge-out-of-stock:hover {
    transform: scale(1.1) !important;
}



.each-soratable-item .card {
    position: relative;
    overflow: hidden;
}

/* Laptops and tablets (768–1399px): use the whole width. Bootstrap's fixed steps (720 / 960 / 1140px) left wide empty
   margins, e.g. a 1160px window got a 960px page. Only the top menu and page body; phones are already full width. */
@media (min-width: 768px) and (max-width: 1399.98px) {
    .navbar > .container,
    .page-content.container {
        max-width: 100%;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Wider layout on large screens. Bootstrap caps .container at 1140px, which leaves
   big empty margins on modern monitors. Only the top menu and page body grow. */
@media (min-width: 1400px) {
    .navbar > .container,
    .page-content.container {
        max-width: 1320px;
    }
}

@media (min-width: 1680px) {
    .navbar > .container,
    .page-content.container {
        max-width: 1560px;
    }
}

/* Phone navbar: quick links either side of the "Menu" toggle. The side slots share
   the leftover width equally so "Menu" stays centred even with only one link. */
.mobile-navbar-bar .mobile-quick-links { flex: 1 1 0; display: flex; min-width: 0; }
.mobile-navbar-bar .mobile-quick-links-left { justify-content: flex-start; }
.mobile-navbar-bar .mobile-quick-links-right { justify-content: flex-end; }
.mobile-navbar-bar .navbar-toggler { flex: 0 0 auto; }
.mobile-quick-link {
    display: inline-flex; align-items: center; padding: .4375rem .75rem; border-radius: 1rem;
    font-weight: 500; color: #333; background-color: #f5f5f5; white-space: nowrap;
}
.mobile-quick-link:hover, .mobile-quick-link:focus { color: #333; background-color: #ececec; }
.mobile-quick-link.active { color: #fff; background-color: #8360c3; }
.mobile-quick-link i { margin-right: .375rem; }
/* Very narrow phones: icon only, the label is still read out via aria-label. */
@media (max-width: 359.98px) {
    .mobile-quick-link span { display: none; }
    .mobile-quick-link i { margin-right: 0; }
}

/* Search boxes: .search-input is 45px tall, but the theme sizes the icon for a 40px
   input and nudges it down 3px, so it floats high. Centre it on the input instead. */
.search-box > .form-control-feedback {
    top: 0;
    bottom: 0;
    margin-top: 0;
    display: flex;
    align-items: center;
    line-height: 1;
}

/* Native <select>: drop the OS look (macOS draws its own glossy control) and match
   the theme's select2 dropdowns. Multi-selects and list boxes keep the native UI. */
select.form-control:not([multiple]):not([size]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23777' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 14px 14px;
    padding-right: 2.25rem;
    cursor: pointer;
}
select.form-control:not([multiple]):not([size])::-ms-expand { display: none; }
select.form-control:not([multiple]):not([size]):disabled { background-color: #fafafa; cursor: default; }
select.form-control-sm:not([multiple]):not([size]) { background-position: right .5rem center; padding-right: 1.75rem; }

/* A filter dropdown that sits beside a search box: same height, card look and shadow. */
select.form-control.search-select {
    height: 45px;
    border: 0;
    border-radius: .275rem;
    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, .03);
    padding-left: 1rem;
}
select.form-control.search-select:focus { box-shadow: 0 1px 8px 1px rgba(0, 0, 0, .08); }
/* Same treatment for select2 filters beside a search box (wrap them in .search-select-wrapper). */
.search-select-wrapper .select2-container .select2-selection--single {
    padding-top: .71875rem;
    padding-bottom: .71875rem;
    background-color: #fff;
    border-color: transparent;
    border-radius: .275rem;
    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, .03);
}

/* Main menu stays pinned to the top while scrolling (desktop and phone). The green
   top bar above it scrolls away so the pinned area stays slim. z-index sits above
   page dropdowns (1000) and below modals/backdrops (1040+). */
.navbar-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1020;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

/* The green top bar must stack above the pinned menu, otherwise its dropdowns (user
   menu / logout) open underneath it. The two bars never overlap, only the dropdowns do. */
.top-navbar {
    position: relative;
    z-index: 1030;
}

/* In-page anchor jumps land below the pinned menu instead of under it. */
html { scroll-padding-top: 4rem; }

/* Phone: the opened menu can be longer than the screen. Because the bar is pinned,
   the page can't scroll it into view, so the menu scrolls inside itself. */
@media (max-width: 767.98px) {
    .navbar-sticky .navbar-collapse.show,
    .navbar-sticky .navbar-collapse.collapsing {
        max-height: calc(100vh - 3.5rem);
        max-height: calc(100dvh - 3.5rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

@media print {
    .navbar-sticky { position: static; box-shadow: none; }
}

/* Tablet and small laptop widths: the main menu stays on one line and scrolls sideways (no visible scrollbar)
   instead of wrapping and stacking icons over labels. Dropdowns are positioned against the viewport while open
   (see the script in common/layouts/master.blade.php) because a scrolling row would otherwise clip them. */
@media (min-width: 768px) {
    /* Flex items default to min-width:auto, i.e. "at least as wide as my content": without these the one-line
       menu stretched its containers and pushed the whole page wider than the screen instead of scrolling. */
    .navbar-sticky > .container { min-width: 0; }
    .navbar-sticky .navbar-collapse { min-width: 0; max-width: 100%; }
    .navbar-sticky .navbar-collapse > .navbar-nav {
        min-width: 0;
        max-width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    .navbar-sticky .navbar-collapse > .navbar-nav::-webkit-scrollbar { display: none; }
    .navbar-sticky .navbar-collapse > .navbar-nav > .nav-item { flex-shrink: 0; }
    .navbar-sticky .navbar-collapse > .navbar-nav .navbar-nav-link { white-space: nowrap; }
    .navbar-sticky .navbar-collapse > .navbar-nav.has-more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); }
    .navbar-sticky .navbar-collapse > .navbar-nav.has-more-left { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 2.5rem), transparent); }
    .navbar-sticky .navbar-collapse > .navbar-nav.has-more-left.has-more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); }
}

/* An open main-menu dropdown lifted onto <body> (see common/layouts/master.blade.php): above the sticky menu. */
.dropdown-menu.is-viewport-fixed { position: fixed !important; margin-top: 0; z-index: 1025; display: block; }