/******** Overrides of standard css ********/

/* MAKE BIG */
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1500px;
    }
}

/* Prevent elements on page from shifting due to scrollbar */
html {
    overflow-y: scroll;
}

html:has(body.modal-open) {
    overflow-y: hidden;
}

body.modal-open {
    overflow: unset !important;
}

/* Force footer to be on bottom */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

/* @media only screen and (max-width: 768px) {
    body.modal-open {
        padding-right: 0px !important;
    }
}

@media only screen and (min-width: 768px) {
    body.modal-open {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
    body.modal-open>.footer {
        width: calc(100% + 36px);
        left: -18px;
        position: relative;
    }

    body.modal-open>.border-bottom {
        width: calc(100% + 36px);
        left: -18px;
        position: relative;
    }
} */

.modal {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.modal-backdrop {
    height: 100% !important;
}

/* KEYBOARD FOCUS */
:root {
    --focus-outline-color: #335257;
    /* Dark Green Grey */
}

/* Default for every link; the component rules below override it */
a:focus-visible {
    outline: 3px solid var(--focus-outline-color);
    outline-offset: 2px;
}

.btn:focus-visible,
.btn-check:focus-visible+.btn,
.item_remove:focus-visible,
.address_btn:focus-visible,
.embla__button:focus-visible,
.embla__dot:focus-visible,
.quickview-arrow:focus-visible {
    outline: 3px solid var(--focus-outline-color);
    outline-offset: 3px;
}

/* Nav: rounded ring that hugs the link, matching the SWAG header */
.nav-link:focus-visible,
.navbar-toggler:focus-visible,
.navbar .navbar-toggler:focus-visible {
    border-radius: 8px;
    outline: .25rem solid var(--focus-outline-color);
    outline-offset: 0;
}

.nav-link:focus-visible {
    text-decoration: underline;
}

/* Account and Reports are <button> nav links, and a button only stretches to its text. On mobile
   make them fill the row like the <a> nav links so the theme's divider line spans the full width. */
@media (max-width: 992px) {
    .navbar .navbar-nav .nav-item button.nav-link {
        text-align: left;
        width: 100%;
    }
}

/* The theme floats the dropdown caret with line-height: 2. An <a> ignores the float's height but a
   <button> wraps it, which made Account and Reports taller than Contact and Logout and pushed their
   text up. Matching the caret's line-height to the text keeps all the nav links the same height. */
.navbar .dropdown button.dropdown-toggle:after {
    line-height: inherit;
}

/* Inset so neighboring items and the menu edge do not hide it */
.dropdown-item:focus-visible {
    outline: 3px solid var(--focus-outline-color);
    outline-offset: -3px;
}

/* LINKS */
/* Underline text links, including on hover (the theme removes it from every a).
   Buttons, nav and menu links, pagination, carousel controls and icon-only links are left alone. */
/* a:not(.btn, .nav-link, .nav-icon-link, .navbar-brand, .dropdown-item, .page-link, .list-group-item, .carousel-control, .bi, .navbar a) {
    text-decoration: underline;
} */


/* LOGIN */
.password-container {
    border: 1px solid #dfe2e1;
    border-radius: .5rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.password-container:has(.password-input:focus) {
    border-radius: .5rem;
    border-color: #85d685;
    box-shadow: 0 0 0 .25rem rgba(10, 173, 10, .25);
    overflow: hidden;
}

.password-field {
    border: none;
    width: 100%;
}

.password-input {
    border: none;
}

.password-input:focus {
    border: none !important;
    box-shadow: none !important;
}

.passwordToggler {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    height: initial;
    align-content: center;
    text-align: center;
    width: 15%;
    right: 0px;
    border-right: none;
    border-top: none;
    border-bottom: none;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    touch-action: manipulation;
    transform: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* This prevents mobile devices from zooming in when an input is tapped. */
@supports (-webkit-overflow-scrolling: touch) {

    .stopZoom,
    .stopZoom:focus {
        font-size: 16px;
    }
}

.stopTapZoom {
    touch-action: manipulation;
}

/* Dropdown */
.list-unstyled-padding {
    list-style: none;
    padding-left: 32px;
}

a.dropdown-toggle-hidden:after {
    display: none !important;
}

/* The subcategory toggle sits over the parent link's arrow, so keep it see-through when focused too */
a.dropdown-toggle-hidden:hover,
a.dropdown-toggle-hidden:focus {
    background-color: rgba(0, 0, 0, 0) !important;
}

span.dropdown-toggle:after {
    margin-left: 0px !important;
}

/* Arrow turns green on hover, on link focus, and while the subcategory toggle over it has keyboard focus */
a:hover>span.dropdown-toggle:after,
a:focus-visible>span.dropdown-toggle:after,
.dropdown-submenu:has(>.menu-mobile-arrow:focus-visible)>a>span.dropdown-toggle:after {
    color: var(--fc-primary) !important;
}

.blah {
    justify-content: space-between;
}

.dropdown-item {
    width: unset;
}

.dropdown-list-group-item {
    justify-content: space-between;
    /* Move ::after to end of flex */
}

.dropdown-submenu>a:after {
    position: static !important;
}

.dropdown-submenu>.dropdown-menu {
    right: auto !important;
    /* Submenu will grow properly */
}

/* At 1200px+ the theme hides navbar menus and shows them only on :hover, so a menu opened
   from the keyboard got .show but stayed invisible. Show it whenever Bootstrap opens it, and
   show a category submenu while keyboard focus is inside it.
   Visibility is left out of the transition so the items are focusable immediately; otherwise
   Bootstrap's ArrowDown finds no visible item to move focus to. */
@media (min-width: 1200px) {

    .navbar-default .dropdown-menu.show,
    .navbar-default .dropdown-submenu:focus-within>.dropdown-menu {
        opacity: 1;
        transform: scaleY(1);
        transition: opacity .3s ease-in, transform .3s ease-in;
        visibility: visible;
    }
}

/* For alt text */
img {
    text-overflow: ellipsis;
}

/* Primary Buttons */
.btn-primary {
    --fc-btn-color: #fff;
    --fc-btn-bg: #335257;
    /* Dark Green Grey */
    --fc-btn-border-color: #335257;
    /* Dark Green Grey */
    --fc-btn-hover-color: #000000;
    --fc-btn-hover-bg: #eceded;
    /* Light Greyish */
    --fc-btn-hover-border-color: #335257;
    /* Dark Green Grey */
    --fc-btn-focus-shadow-rgb: 47, 185, 47;
    --fc-btn-active-color: #000000;
    --fc-btn-active-bg: #eceded;
    /* Light Greyish */
    --fc-btn-active-border-color: #335257;
    /* Dark Green Grey */
    --fc-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --fc-btn-disabled-color: #fff;
    --fc-btn-disabled-bg: #335257;
    /* Dark Green Grey */
    --fc-btn-disabled-border-color: #335257;
    /* Dark Green Grey */
}

.modal-icon {
    color: var(--fc-btn-bg);
}

/* Card product */
.card-product:hover {
    border: 1px solid #335257;
    /* Dark Green Grey */
}

/* Quick view / favorite buttons: the theme hides them with visibility until hover, which also removes them from the tab order.
   Keep them focusable (still transparent) and show them while anything in the card has keyboard focus. */
.card-product .card-product-action {
    visibility: visible;
}

.card-product:has(:focus-visible) .card-product-action {
    opacity: 1;
}

.footer {
    padding: 0;

}

/* Divider */
.divider:after,
.divider:before {
    content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0";
    text-decoration: line-through;
    color: #dfe2e1;
}

.divider>span {
    pointer-events: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* Legacy ML styles */
.outer-pad {
    padding: 0 9%;
}

.piper-page-header {
    text-align: center;
    padding-bottom: 10px;
}

.free-shipping-corner {
    position: absolute;
    right: 0px;
    z-index: 80;
    padding: 0 var(--fc-card-spacer-x);
    user-select: none;
    pointer-events: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.view-tiered-pricing {
    z-index: 9999999;
    background-color: #001e2b;
    border-color: rgb(62, 68, 70);
    position: absolute;
    bottom: 15px;
    display: block;
    min-width: 128px;
    border: 1px solid #ccc;
    color: white;
}

.btn-xl {
    white-space: normal;
    max-width: 250px;
    font-size: 27px;
    padding: 20px 12px;
}

/* PRODUCT LIST */
.input-spinner .form-input {
    width: auto !important;
}

/* CATEGORY LIST  */
.product_spinner {
    position: absolute;
    background-color: #000000ba; color:
    white; z-index: 100;
    place-content: center; 
}

.added_to_cart_popup {
    position: absolute;
    background-color: #335257;
    color: white;
    z-index: 99;
    place-content: center; 
}

.hide_popup {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.5s, opacity 0.5s linear;
}

.show_popup {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s linear;
}

.popup {
    position: absolute;

}

.sku_drop:after {
    float: none !important;
    vertical-align: 0 !important;
    width: 10%;
}

.qty_edit {
    width: 75%;
}

.disabled-hover {
    cursor: not-allowed;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

#page_select {
    width: max-content;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.unselectable {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.nopointer {
    pointer-events: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

@media(min-width:768px) {
    a[href^="tel:"] {
        pointer-events: none;
    }
}

/* Address */
.form-check {
    display: block;
    padding-left: 1.5em;
    padding-right: 1.5em;
    margin-bottom: .125rem;
    min-height: 1.4rem;
}

/* Slider / Carousel styles */
.slider-img,
.slider-img>img {
    pointer-events: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    image-rendering: auto;
    max-width: 100%;
    height: auto;
}

.slider-div>* {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.slider-img-div {
    justify-content: center;
    -webkit-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
}

.slider-img-quickview {
    max-width: 100%;
    border-radius: 10px;
    align-self: center;
}

/* EMBLA */
.embla {
    max-width: 100%;
    height: auto;
    margin: auto;
    position: relative;
}

/*
    Slider controls (arrows, dots, play/pause, and thumbnails, which the shared
    slider gives role="button"): quick repeated taps change slide instead of
    triggering double-tap zoom on mobile. Pinch zoom still works.
*/
.embla button,
.embla [role="button"] {
    touch-action: manipulation;
}

.embla__viewport {
    overflow: hidden;
}

.embla__container {
    display: flex;
    touch-action: pan-y pinch-zoom;
}

.embla__slide {
    transform: translate3d(0, 0, 0);
    flex: 0 0 100%;
    min-width: 0;
}

.embla__button {
    position: absolute;
    background: transparent;
    border: none;
    color: rgba(0, 0, 0, 0.5);
    font-size: 2rem;
    height: 100%;
    cursor: pointer;
    z-index: 50;
    width: 32px;
}

.embla__button:hover {
    color: rgba(0, 0, 0, 0.75);
}

.embla__button--prev {
    left: 0px;
}

.embla__button--next {
    right: 0px;
}

.embla__dots {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
}

.embla__dot {
    width: 24px;
    height: 24px;
    padding: 7.5px;
    margin: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    background-clip: content-box;
    border: 0;
}

.embla__dot--selected {
    width: 24px;
    height: 24px;
    padding: 7.5px;
    margin: 0;
    border-radius: 50%;
    background: rgb(0, 0, 0, 0.75);
    background-clip: content-box;
    border: 0;
}

.embla__thumb {
    border: 2px solid transparent;
    width: auto;
    height: 80px;
    border-radius: var(--fc-border-radius) !important;
}

.embla__thumb--selected {
    border: 2px solid var(--fc-primary);
}

.embla__thumb:focus-visible {
    outline: 2px solid var(--fc-gray-800);
    outline-offset: -4px;
}


.embla-thumbs {
    --thumbs-slide-spacing: 0.8rem;
    --thumbs-slide-height: 6rem;
    margin-top: var(--thumbs-slide-spacing);
}

.embla-thumbs__viewport {
    overflow: hidden;
}

.embla-thumbs__container {
    display: flex;
    flex-direction: row;
    margin-left: calc(var(--thumbs-slide-spacing) * -1);
}

.embla-thumbs__slide {
    flex: 0 0 15%;
    display: flex;
}

.quickview-arrow {
    align-items: center;
    background-color: var(--fc-gray-200);
    border: 1px solid var(--fc-gray-200);
    border-radius: 50px;
    color: var(--fc-gray-500);
    cursor: pointer;
    display: block;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 20px;
    font-size: 24px;
    height: 44px;
    justify-content: center;
    transition: .3s ease-in-out;
    width: 44px;
}

.quickview-arrow:hover,
.quickview-arrow:focus-visible {
    background: var(--fc-primary);
    color: var(--fc-white);
}


/* VIEW CART */
.list-group-kit > li {
    background-color: #f4f4f4;
    padding-left: 16px !important;
}
@media(max-width:992px) {
    .cart_sidebar {
        order: 0;
    }
}
@media(min-width:992px) {
    .cart_sidebar {
        order: 2;
    }
}

/* BACK TO TOP */
#backToTop {
    opacity: 0;
    position: fixed;
    display: flex;
    visibility: hidden;
    font-size: 1.3rem;
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    z-index: 99;
    /* background-color: rgb(250, 250, 250);
    border: #ebebeb solid 1px; */
    border-radius: 22px;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
}

.showBackToTop {
    visibility: visible !important;
    opacity: 1 !important;
    transition: all .2s ease;
}

/* Account sidebar */
#sidebar_account {
    min-height: 100vh;
}

@media (max-width: 767px) {
    #sidebar_account {
        min-height: unset;
    }
}

#sidebar_account_button {
    background: #335257;
    color: white;
    position: relative;
    left: -88px;
    border-radius: 20px;
}

/* payment page */
.transparent_row {
    border: transparent;
    background: transparent;
    --fc-table-striped-bg: transparent;
}

.bold_row {
    font-size: larger;
    font-weight: bolder;
    border-top: 1px solid;
    border-color: inherit;
    border-bottom: 0px transparent;
}

.menu-mobile-arrow {
    left: -6px;
    position: absolute;
    color:rgb(92, 108, 117);
    width: 36px;
    height: 100%;
    z-index: 999;
}

@media (max-width: 991px) {
    .menu-mobile {
        border-left: 0px transparent #ccc !important;
        border-right: 0px transparent !important;
        border-bottom: 0px transparent !important;
        border-top: 0px transparent !important;
        /* border-top: 1px solid #ccc !important; */
        border-radius: 0px !important;
        padding-right: 0px !important;
        box-shadow: none !important;
        padding-bottom: 0px;
        padding-top: 0px;
    }
    .menu-mobile-item {
        margin-left: 25px !important;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .menu-mobile-arrow {
        height: inherit;
        z-index: 99;
        padding-top: 5px;
        padding-bottom: 5px;
    }
}

@media (min-width: 991px) {
    .menu-mobile-arrow {
        right: 0px !important;
        left: unset !important;
    }
}


/* PRODUCT DETAIL */
@media (max-width: 1200px) {
    .qty-flex-outer {
        
    }
}
.qty-block {
    width: auto !important;
}

/* Edoc */
#product-detail-split-row {
    --splitter-hit-area: 26px;
    align-items: stretch;
}

#product-detail-split-row {
    --splitter-line-color: #dfe2e1;
    --splitter-grip-border: var(--fc-btn-bg);
    --splitter-grip-dot-color: var(--fc-btn-bg);
}

#product-detail-split-row > #product_detail_edoc_div,
#product-detail-split-row > #product-detail-outer {
    width: calc((100% - var(--splitter-hit-area)) / 2);
    max-width: calc((100% - var(--splitter-hit-area)) / 2);
}

#product_detail_edoc_div {
    min-width: 0;
}

#product-detail-resize-handle {
    position: relative;
    flex: 0 0 var(--splitter-hit-area);
    width: var(--splitter-hit-area);
    max-width: var(--splitter-hit-area);
    min-height: 100%;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
    outline: none;
    z-index: 1;
    transition: transform 0.2s ease;
}

#product-detail-resize-handle::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    transform: translateX(-50%);
    background: var(--splitter-line-color);
}

#product-detail-resize-handle .product-detail-resize-grip {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 40px;
    border: 1.5px solid var(--splitter-line-color);
    border-radius: 999px;
    transform: translate(-50%, -50%);
    background: #fff;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, top 1s ease;
}

#product-detail-resize-handle .product-detail-resize-grip::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: var(--splitter-grip-dot-color);
    box-shadow: 0 -8px 0 var(--splitter-grip-dot-color), 0 8px 0 var(--splitter-grip-dot-color);
    opacity: 0.8;
}

#product-detail-resize-handle:hover::before,
#product-detail-resize-handle:focus-visible::before,
#product-detail-split-row.is-resizing #product-detail-resize-handle::before {
    background: var(--splitter-grip-border);
    opacity: 0.6;
}

#product-detail-resize-handle:hover .product-detail-resize-grip,
#product-detail-resize-handle:focus-visible .product-detail-resize-grip,
#product-detail-split-row.is-resizing #product-detail-resize-handle .product-detail-resize-grip {
    transform: translate(-50%, -50%) scale(1.2);
}

#product-detail-resize-handle:focus-visible {
    outline: 3px solid var(--focus-outline-color);
    outline-offset: -3px;
}

#product-detail-split-row.is-resizing,
#product-detail-split-row.is-resizing * {
    cursor: col-resize !important;
    user-select: none;
}

#product-detail-split-row.product-detail-preview-expanded > #product-detail-resize-handle,
#product-detail-split-row.product-detail-preview-expanded > #product-detail-outer {
    display: none !important;
}

#product-detail-split-row.product-detail-preview-expanded > #product_detail_edoc_div {
    width: 100% !important;
    max-width: 100% !important;
}

@media (max-width: 949px) {
    #expand_div {
        display: none;
    }
    #product-detail-split-row {
        flex-wrap: wrap;
    }

    #product-detail-split-row > #product_detail_edoc_div,
    #product-detail-split-row > #product-detail-outer {
        width: 100% !important;
        max-width: 100% !important;
    }

    #product-detail-resize-handle {
        display: none;
    }

    #product-detail-outer {
        min-width: 0 !important;
    }
}

@media (max-width: 949px) {
    #product-detail-outer {
        left: initial !important;
    }
}

/* CHECKOUT */
.checkout-shipping-option {
    border: 1px solid #d0d7e2;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    gap: 1rem;
    padding: 1rem;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.checkout-shipping-option + .checkout-shipping-option {
    margin-top: .75rem;
}

.checkout-shipping-option.checked {
    background: #f4fff6;
    border-color: #14a538;
    box-shadow: 0 0 0 1px rgba(20, 165, 56, .1);
}

.checkout-shipping-option .form-check-input {
    flex: 0 0 auto;
    height: 1.5rem;
    margin-top: .1rem;
    width: 1.5rem;
}

.checkout-shipping-option .form-check-input:checked {
    background-color: #14a538;
    border-color: #14a538;
}

/* Keyboard focus: the theme's faint glow disappears against the checked card */
.checkout-shipping-option:has(.form-check-input:focus-visible) {
    outline: 3px solid var(--focus-outline-color);
    outline-offset: 3px;
}

.address_input:focus-visible {
    outline: 3px solid var(--focus-outline-color);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    display : 'none'!important;
}


/* COMPONENTS */

/* ModalInfo.php */
i.p3component-modal-info {
    font-size: .8em;
}

.p3component-modal-info:hover {
    cursor : pointer;
}