@media (hover: none) /* all touch screen devices */ 
{
    .AdministrationLinkArea
    {
        display: none;
    }

    .breadcrumb {
        display: none;
    }

    .block {
        border-top: 1px solid gray;
        overflow-y: scroll;
        border-bottom-left-radius: 1rem;
        border-bottom-right-radius: 1rem;
        margin: 0;
        width: 100%;
    }

        .block .title {
            margin: 0;
            background-color: lightgray;
            border-radius: 0.5em;
            font-size: 1.25em;
        }

        .block .list a {
            font-size: 0.9em;
        }

    .ButtonBar {
        display: flex;
        width: 100%;
        min-height: 2.5em;
        height: auto;
        margin: 0.25em 0 0 0;
        margin-bottom: 1em;
    }

        .ButtonBar > button {
            width: 24% !important;
            height: 3em;
            border: 0;
            background-color: lightgray;
            color: black;
            padding: 0.5em;
            font-size: 0.75em;
            border-radius: 0.5rem;
            text-align: center;
            box-shadow: 2px 2px 0px gray;
            z-index: 20;
        }

        .ButtonBar button:hover {
            background-color: darkgray
        }

        .ButtonBar button.active {
            background-color: slategray;
            color: white;
        }

            .ButtonBar button.active:hover {
                background-color: dimgray
            }

        .ButtonBar button.dropdown {
            position: relative;
            display: block;
        }

            .ButtonBar button.dropdown > ul {
                display: none;
            }

            .ButtonBar button.dropdown:hover > ul {
                display: flex;
                flex-direction: column;
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                height: 2.5em;
                z-index: 20;
                margin: 0;
                padding: 0;
                padding-top: 0.33em;
                visibility: visible;
            }

                .ButtonBar button.dropdown:hover > ul li > button {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 100%;
                    font-size: 1em;
                    padding: 0;
                    height: 2.5em;
                }

    .button-flag-content {
        margin-left: auto;
    }

    .button-title-popup > p {
        display: flex;
        gap: 0.3em;
        font-size: 1.25em;
    }

    .card-body-links a {
        font-size: 0.8em;
        margin: 1.5rem;
    }

    .cart label {
        display: none;
    }

    .center-2 {
        width: 100%;
    }

    #checkout-2-body #CreditCardEditorArea,
    #checkout-2-body #CardListArea,
    #checkout-2-body #ChargeAccountArea,
    #checkout-2-body #CardOnFileArea {
        margin-left: 0.25rem;
        min-width: 300px;
    }

    #CloseButton {
        font-size: 0.8em;
/*        height: 2em;*/
        margin-bottom: 0.5em;
    }

    .col-md-4 {
        text-align: left;
        min-width: 250px;
    }

        .col-md-4:has(.LinkArea) {
            text-align: right;
            min-width: 100px;
            max-width: 100px;
        }

    .continue-shopping-button {
        min-width: 5em;
    }

    .follow-us {
        margin: 30px auto 0;
        text-align: center
    }

        .follow-us .title {
            margin: 0 0 10px;
            background: none;
            color: #000;
            cursor: auto
        }

        .follow-us .social ul {
            margin: 0 0 30px;
            border-bottom: 1px solid #ddd;
            padding: 0 0 30px;
            font-size: 0
        }

        .follow-us .social li {
            display: inline-block;
            margin: 0 5px
        }

        .follow-us .social a {
            display: block;
            width: 38px;
            height: 38px;
            background: url('../images/social-sprite.png') no-repeat;
            font-size: 0
        }

        .follow-us .social .facebook a {
            background-position: 0 0
        }

        .follow-us .social .twitter a {
            background-position: -38px 0
        }

        .follow-us .social .rss a {
            background-position: -76px 0
        }

        .follow-us .social .youtube a {
            background-position: -114px 0
        }

        .follow-us .social .instagram a {
            background-position: -152px 0
        }

        .follow-us .social .tiktok a {
            background-position: -190px 0
        }

        .follow-us .social .blog a {
            background-position: -228px 0
        }

        .follow-us .social .news a {
            background-position: -266px 0
        }

    .footer {
        background-color: #eee;
        width: 100%;
    }

    .footer-block {
        flex: 1;
        margin: 5px auto;
        text-align: center;
        font-size: 40px;
    }

        .footer-block .title {
            margin: 0 0 1px;
            background: #eee;
            padding: 0.5em;
            border-radius: 0.5em;
            font-size: 0.5em;
            color: black;
            cursor: pointer;
        }

            .footer-block .title strong {
                font-weight: normal
            }


        .footer-block .list {
            display: flex;
            flex-direction: column;
            background-color: #eee;
            padding: 0;
        }

            .footer-block .list a {
                font-size: 0.4em;
                text-decoration: underline;
            }

                .footer-block .list a:hover,
                .footer-block .list a:focus {
                    color: #4ab2f1
                }

    .footer-upper {
        width: 95%;
        margin: auto;
        border-bottom: 1px solid #ddd;
        overflow: hidden;
        padding: 1rem 0;
        font-size: 0;
    }

    .footer-upper-links {
        display: flex;
        border-bottom: 1px solid #ddd;
    }

    .form-control {
        font-size: 0.9em;
        min-width: 175px;
        min-height: 45px;
    }

    .form-group {
        display: flex;
        justify-content: center;
        min-width: 350px;
        gap: 0.5em;
    }

        .form-group > label {
            text-align: right;
            width: 125px;
        }

        .form-group:has(#register-no-eula) {
            min-width: 500px;
        }

    .gallery {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
        width: 75%;
        height: 75%;
    }

        .gallery .picture-wrapper {
            margin: 0 0 10px
        }

        .gallery .picture {
            position: relative;
            margin: 0;
            width: 75%;
            height: 75%;
            max-height: 550px;
            max-width: 550px;
        }

            .gallery .picture:before {
                content: "";
                display: block;
                padding-top: 100%
            }

            .gallery .picture img,
            .picture-gallery .picture-thumbs img,
            .video-gallery .video-thumbs iframe,
            .variant-picture img {
                /*                position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;*/
                width: auto;
                height: 100%;
                max-height: 350px;
                max-width: 350px;
                min-height: 200px;
                /*                min-width: 200px;*/
            }

    .header-menu {
        display: none;
    }

    .InputAppearanceNew {
        max-width: 330px;
        width: 100%;
    }

        .InputAppearanceNew .input-box {
            max-width: 330px;
            width: 100%;
        }

    .input-box-pw-register {
        min-width: 275px;
    }

    .items-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2 equal-width columns */
        grid-template-rows: repeat(2, 1fr); /* 2 equal-height rows */
        width: 100%;
        height: auto;
    }

        .items-grid .item-box {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            width: 100%;
            min-height: 50%;
            border-right: 1px solid #ddd !important;
            border-bottom: 1px solid #ddd;
            margin: 0px;
        }

            /* Undo the default removal */
            .items-grid .item-box:nth-child(3n) {
                border-right: 1px solid #ddd;
            }

            /* Remove the right border of the last item in each row */
            .items-grid .item-box:nth-child(2n) {
                border-right: none !important;
            }

            .items-grid .item-box .item-box-header {
                width: 100%;
                min-height: 75%;
                font-size: 9px;
            }

                .items-grid .item-box .item-box-header .picture {
                    z-index: 1;
                    background-color: #fff;
                    margin-left: auto;
                    margin-right: auto;
                    margin-top: 2em;
                    margin-bottom: 1em;
                    width: 66%;
                    height: 100%;
                }

                    .items-grid .item-box .item-box-header .picture a {
                        display: block;
                        position: relative
                    }

                        .items-grid .item-box .item-box-header .picture a:focus {
                            opacity: .85
                        }

                        .items-grid .item-box .item-box-header .picture a::before {
                            content: "";
                            display: block;
                            padding-top: 100%
                        }

                        .items-grid .item-box .item-box-header .picture a img {
                            position: absolute;
                            top: 0;
                            right: 0;
                            bottom: 0;
                            left: 0;
                            max-width: 100%;
                            max-height: 100%;
                            margin: auto;
                            -webkit-transition: all .3s ease;
                            transition: all .3s ease;
                            -webkit-transform: translateZ(0) scale(1, 1)
                        }

                .items-grid .item-box .item-box-header:hover .picture a img {
                    opacity: .85
                }

            .items-grid .item-box .item-box-footer {
                min-height: 50px;
                width: 100%;
                display: flex;
                justify-content: space-evenly;
                align-items: center;
                padding-top: 5px;
                padding-bottom: 10px;
                font-size: 10px;
                gap: 1.5em;
                padding-bottom: 1.75em;
            }

                .items-grid .item-box .item-box-footer strong {
                    font-size: 2.5em;
                }

                .items-grid .item-box .item-box-footer button {
                    height: 2.5em;
                    width: 7em;
                    border-radius: 1rem;
                    padding: 0 0.75em;
                    font-size: 1.5em;
                }

                    .items-grid .item-box .item-box-footer button:hover {
                        background-color: #248ece
                    }

    .item-grid-related {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        max-width: 600px;
        min-width: 300px;
    }

        .item-grid-related .item-box-related {
            /*            max-width: 550px;
                max-height: 550px;
                padding: 0 0 2rem;*/
            margin: 0;
            border-bottom: 1px solid lightgray;
        }

            .item-grid-related .item-box-related .buttons {
                width: 75%;
            }

                .item-grid-related .item-box-related .buttons > button {
                    min-width: 150px;
                    max-width: 300px;
                    width: 40%;
                }

            .item-grid-related .item-box-related .product-item > .details {
                margin-bottom: 2rem;
            }

                .item-grid-related .item-box-related .product-item > .details .product-title {
                    font-size: 1.25em;
                }

    #LoginArea {
        min-height: unset;
    }

    #LoginPage {
        min-height: 550px;
        min-width: 500px;
        width: 100%;
    }

    .master-wrapper-content,
    .master-wrapper-content-checkout {
        padding-top: 1rem;
        flex-direction: column;
    }

        .master-wrapper-content-checkout .center-1 .page-title > h1 {
            margin: 0;
        }

        .master-wrapper-content-checkout .center-1 .page-title > h1 {
            font-size: 1.75em;
        }

    .master-wrapper-content-store {
        padding-top: 1rem;
        flex-direction: column;
/*        margin: 0 7.5vw 0 0;*/
    }

    .master-column-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin: auto;
    }

    .master-column-wrapper-store {
/*        margin: 0 0 0 7.5vw;*/
    }

    .main-content {
        display: flex;
        flex-direction: column;
    }

    .MainWrapperRecovery {
        padding: 0.5em;
    }

    .menu-button-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    #menu-toggle:checked ~ .navbar-panel-sections {
        display: flex;
    }

    #menu-toggle:not(:checked) ~ .navbar-panel-sections {
        display: none;
    }

    .navbar-error {
        align-items: center;
        animation: showBar 1s forwards;
        background-color: palevioletred;
        display: flex;
        font-weight: bold;
        height: 1.5rem;
        justify-content: center;
        position: fixed;
        width: 100%;
        z-index: 5;
    }

        .navbar-error .center-text {
            font-size: 14px;
            color: black;
        }

        .navbar-error .right-button {
            background-color: palevioletred;
            border: none;
            color: black;
            cursor: pointer;
            font-size: 10px;
            margin-left: 5px;
        }

            .navbar-error .right-button:hover {
                color: gray;
            }

    .navbar-logo {
        align-items: center;
        display: flex;
        flex: 1;
        height: 100%;
        justify-content: center;
        margin-right: 0.25em;
        max-width: 110px;
        text-align: left;
        vertical-align: middle;
    }

        .navbar-logo a {
            line-height: 0
        }

            .navbar-logo a img {
/*                height: 2.5em !important;*/
                opacity: 1;
                width: 100%;
            }

        .navbar-logo img {
            height: auto;
/*            max-width: 110px;*/
        }

        .navbar-logo.portal {
            max-width: revert;
        }

    .navbar-name-long,
    .navbar-name-short {
        display: none;
    }

        .navbar-name-long.portal,
        .navbar-name-short.portal {
            display: inherit;
            min-width: revert;
        }

    .navbar-panel {
        align-items: center;
        border-left: 1px solid lightgray;
        display: flex;
        flex: 1;
        flex-shrink: 1;
        height: 100%;
        justify-content: center;
        margin-left: 0;
        max-width: 110px;
        text-align: right;
    }

    .navbar-panel-sections {
        background-color: snow;
        border: 2px solid gray;
        display: flex;
        flex-direction: column;
        gap: 0;
        list-style-type: none;
        margin: 0;
        min-height: 2em;
        padding: 0;
        position: absolute;
        right: 0;
        top: 100%;
        width: 40%;
    }

        .navbar-panel-sections li a {
            align-items: center;
            color: dodgerblue;
            display: flex;
            font-size: 1.1em;
            height: auto;
            justify-content: left;
            margin: 0;
            min-height: 2.5em;
            overflow: hidden;
            padding-left: 0.25em;
            text-align: left;
            text-decoration: none;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 75%;
        }

        .navbar-panel-sections li > .navbar-panel-welcome-list li a:focus,
        .navbar-panel-sections li > .navbar-panel-welcome-list li a:active {
            text-decoration: underline;
        }

        .navbar-panel-sections li > .navbar-panel-welcome-list li a {
            padding-left: 1.5em;
        }

        .navbar-panel-sections li > .navbar-panel-welcome-list li > .navbar-panel-welcome-acct-list li a {
            padding-left: 3em;
        }

            .navbar-panel-sections a::selection,
            .navbar-panel-sections li > .navbar-panel-welcome-list li a::selection,
            .navbar-panel-sections li > .navbar-panel-welcome-list li > .navbar-panel-welcome-acct-list li a::selection {
                background-color: lightgray;
                text-decoration: underline;
            }

        .navbar-panel-sections li,
        .navbar-panel-sections li > .navbar-panel-welcome-list li,
        .navbar-panel-sections li > .navbar-panel-welcome-list > .navbar-panel-welcome-acct-list li {
            background-color: snow;
            border-bottom: 0;
            border-top: 1px solid lightgray;
            color: dodgerblue;
            display: block;
            height: auto;
            min-height: 2.5em;
            padding: 0;
            position: relative;
            right: 0;
            transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
            width: 100%;
            z-index: 10;
        }

            .navbar-panel-sections li::selection,
            .navbar-panel-sections li > .navbar-panel-welcome-list li::selection,
            .navbar-panel-sections li > .navbar-panel-welcome-list li > .navbar-panel-welcome-acct-list li::selection {
                background-color: antiquewhite;
            }

            .navbar-panel-sections li input[type=checkbox] {
                cursor: pointer;
                height: 100%;
                opacity: 0;
                position: absolute;
                right: 0;
                width: 50%;
                z-index: 1;
            }

                .navbar-panel-sections li input[type=checkbox]:checked ~ ul {
                    display: block;
                }

                .navbar-panel-sections li input[type=checkbox]:not(:checked) ~ ul {
                    display: none;
                }

            .navbar-panel-sections li:last-child {
                margin-right: 0;
            }

    .navbar-search {
        margin-right: 0.5em;
    }

        .navbar-search .search-box #SearchNow {
            flex: 0.67;
            max-width: 120px;
            min-width: 40px;
        }

            .navbar-search .search-box #SearchNow > .search-box-button {
                background-size: 35% 47.5%;
            }

        .navbar-search .search-box #SearchOptions {
            flex: 0.33;
            max-width: 75px;
            min-width: 25px;
        }

        .navbar-search .search-box.store-search-box {
            height: 3em;
        }

            .navbar-search .search-box.store-search-box .search-box-text {
                width: 75%;
                flex: unset;
            }

            .navbar-search .search-box.store-search-box #SearchContent > a {
                font-size: 0.75em;
            }

    .Navigationbar {
        align-items: center;
        background-color: snow;
        border-bottom: 1px solid #d6d5d5;
        display: flex;
        font-size: 16px;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-weight: bold;
        height: 6.25rem;
        justify-content: space-between;
        position: relative;
        top: 0;
        z-index: 100;
    }

    .newsletter-email {
        display: inline-block;
        overflow: hidden
    }

        .newsletter-email:focus-within {
            overflow: visible
        }

        .newsletter-email input[type="email"] {
            float: left;
            width: 180px;
            height: 36px;
            margin: 0 -1px 0 0
        }

    .newsletter-subscribe-button {
        float: left;
        height: 36px;
        border: 0;
        background-color: #186fba;
        padding: 0 15px;
        text-align: center;
        color: #fff;
    }

        .newsletter-subscribe-button:hover,
        .newsletter-subscribe-button:focus {
            background-color: #248ece
        }

    .newsletter-email .options {
        clear: both;
        padding: 10px 0 0
    }

    .newsletter-validation,
    .newsletter-result {
        width: 100%;
        overflow: hidden;
        line-height: 28px
    }

    .orders-card {
        width: 100%;
        margin-bottom: 25px;
    }

        .orders-card .header {
            display: flex;
            width: 100%;
            height: 150px;
            max-height: 200px;
            border-radius: 8px 8px 0 0;
            background-color: #42aedf;
            color: azure;
            font-size: 1em;
            padding: 1em;
        }

            .orders-card .header button {
                display: inline-flex;
                background-color: skyblue;
                padding: 15px;
                color: black;
                border-color: blue;
                border-radius: 0.25rem;
                text-align: center;
                vertical-align: middle;
            }

                .orders-card .header button:hover {
                    background-color: lightblue;
                }

        .orders-card .body {
            border: 1px solid lightgray;
            background-color: white;
            color: black;
            font-size: 18px;
            padding: 15px;
        }

    #orders-center-1, #search-orders-center-1 {
        margin: 0 0 3em;
    }

    .overlay {
        font-size: 1.2em;
    }

    .overview .add-to-cart .product-buy-quantity-container {
        flex-direction: column;
        align-items: center;
    }

    .overview-buttons {
        display: flex;
        justify-content: center;
        margin: 0 0 25px;
        font-size: 0;
        gap: 1rem;
        width: 100%;
    }

        .overview-buttons > div {
            width: 25%;
            min-width: 150px;
            max-width: 300px;
            margin: 0;
        }

    .page {
        min-width: 500px;
    }

    .PopupEditor {
        min-width: 350px;
        width: 80%;
    }

    .product-essential {
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid #ddd;
    }

    .product-review-box {
        justify-content: center;
    }

    .side-2 {
        display: none;
        flex-direction: column;
        height: calc(100vh - 12rem);
        width: 45%;
        position: fixed;
        top: 7rem;
        left: 0;
        z-index: 100;
        background-color: whitesmoke;
        border-radius: 1rem;
        /*        border: 1px solid darkgray;*/
        /*        padding-top: 5.25rem;*/
        transition: 0.5s;
        float: revert;
        max-width: revert;
        margin-bottom: 1em;
    }

        .side-2 > .closebtn {
            display: flex !important;
            justify-content: center;
            font-size: 2.5em;
            width: 20%;
            margin-left: 80%;
            height: 0.9em;
        }

        .side-2 .block > ul {
            display: flex;
            flex-direction: column;
            margin-left: 0.5em;
        }

            .side-2 .block > ul a {
                /*            padding: 0;*/
                font-size: 0.95em;
            }

        .side-2 > .block-apply {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            border-top: 1px solid gray;
            margin-top: auto;
            max-height: 6em;
            min-height: 4em;
        }

            .side-2 > .block-apply button {
                height: 66%;
                max-height: 50px;
                border-radius: 0.5em;
                width: 8em;
            }

    /*        .side-2 a {
                color: dodgerblue;
                white-space: nowrap;
                margin: 0.75rem;
                text-decoration: none;
            }

                .side-2 a:hover {
                    text-decoration: underline;
                }
        */

    .side-2-content {
        width: 50%;
    }

    /*.side-2-open {
            font-size: 2em;
            cursor: pointer;
            background-color: antiquewhite;
            color: dodgerblue;
            border-left: 1px solid lightgray;
        }

            .side-2-open:hover {
                background-color: white;
            }*/

    .side-2-nav-btns {
        display: flex;
        flex-direction: column;
        gap: 0.1em;
        position: fixed;
        top: 5.1rem;
        left: 0;
        z-index: 100;
    }

    .side-2-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        width: 100%;
        height: 100%;
        background-color: rgba(200, 200, 200, 0.77);
    }

    .side-2-show-btn {
        display: revert;
        margin-bottom: 1em;
    }

    .side-2-up-btn {
        display: none;
    }

        .side-2-up-btn.sticky {
            display: revert !important;
            width: 5em;
            height: 3em;
        }

    .state-indicator::before {
        content: '2';
    }

    .toggle {
        display: none;
    }

        .toggle:checked ~ .navbar-error {
            display: none;
        }

    #welcome-container > .navbar-panel-welcome-list,
    #welcome-container > .navbar-panel-welcome-list .navbar-panel-welcome-acct-list {
        all: unset;
    }

/*    #welcome-container > input[type=checkbox] {
        position: absolute;
        right: 0;
        width: 35%;
        height: 100%;
        opacity: 0;
    }

        #welcome-container > input[type=checkbox]:checked ~ .navbar-panel-welcome-list {
            display: block;
        }

        #welcome-container > input[type=checkbox]:not(:checked) ~ .navbar-panel-welcome-list {
            display: none;
        }*/

    #welcome-identity {
        font-size: 1.2em;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }

    #welcome-link {
        align-items: start;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
    }

    @keyframes showBar {
        from {
            height: 0;
        }

        to {
            height: 1.5rem
        }
    }
}

@media (hover: none) and (max-width: 1075px) 
{
    .cart-total-left {
        width: 67%;
    }
}

@media (hover: none) and (min-width: 500.01px) and (max-width: 900px) 
{
    .col-md-2 {
        width: 31% !important;
    }
}

@media (hover: none) and (max-width: 835px) {
    .pmtcol {
        width: 48%;
    }
}

@media (hover: none) and (max-width: 780px) 
{
    .pagination-bar {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }
}

@media (hover: none) and (max-width: 725px) 
{
    .items-grid .item-box .item-box-footer {
        padding-right: 0.35em;
        padding-right: 0.35em;
        padding-bottom: 2em;
    }

        .items-grid .item-box .item-box-footer strong {
            font-size: 2em;
        }

        .items-grid .item-box .item-box-footer button {
            height: 2.5em;
            width: 7em;
            border-radius: 1rem;
            padding: 0 0.75em;
            font-size: 1.5em;
        }

    .navbar-panel-sections li a {
        font-size: 0.95em;
    }

    .navbar-panel-sections li > .navbar-panel-welcome-list li a {
        font-size: 0.95em;
    }

    .navbar-panel-sections li > .navbar-panel-welcome-list li > .navbar-panel-welcome-acct-list li a {
        font-size: 0.95em;
    }

    .navbar-search .search-box #SearchOptions .search-box-button:hover ~ .search-options-form,
    .navbar-search .search-box #SearchOptions .search-box-button:active ~ .search-options-form,
    .navbar-search .search-box #SearchOptions .search-options-form:hover {
        font-size: 0.85em;
    }

    .orders-card .header button {
        width: 80%;
    }

    .pagination-bar {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        min-height: 6em;
        padding: 0;
    }

    #pagination-buttons {
        display: flex;
        justify-content: center;
        width: 100%;
    }

        #pagination-buttons button {
            width: 3em;
            height: 2.75em;
        }

        #pagination-buttons .arrow,
        #pagination-search .arrow {
            width: 4em;
            height: 2.75em;
        }

        #pagination-buttons .arrow2 {
            width: 2.5em;
            height: 2.75em;
            margin: 0.2em;
            margin-top: 0;
            margin-bottom: 0;
        }

    #pagination-search {
        display: flex;
        justify-content: center;
        justify-content: center;
    }

        #pagination-search input {
            width: 4em;
            height: 2.75em;
            margin: 0;
        }

    .pmtcol {
        width: 100%;
    }

    .PopupEditor-Checkout {
        min-width: 300px;
    }

    .popup-card-footer > .popup-card-footer-buttons {
        gap: 1em;
    }

    #checkout-popup-pi-phone-email {
        display: flex;
        flex-direction: column;
    }
}

@media (hover: none) and (max-width: 650px) 
{
    #buy-it-again-notify,
    #buy-it-again-notify-product {
        font-size: 0.8rem;
    }
}

@media (hover: none) and (max-width: 600px) 
{
    .cart-footer .order-details-general-details {
        width: 100%;
        margin: 0;
        padding: 16px 30px 15px;
        border: 1px solid #ddd;
        background-color: #f9f9f9;
        padding: 10px;
        color: #000;
        font-size: 0.9em;
    }

    .cart-footer .order-details-financial-details {
        display: revert;
        flex-direction: revert;
    }

    #checkout-2-body #CreditCardEditorArea {
        max-width: 500px;
    }

    #LoginPage {
        min-height: 450px;
        min-width: 325px;
    }

    .Navigationbar {
        height: 5rem;
    }

    .navbar-search .search-box.store-search-box {
        height: 2.5em;
    }

    .page {
        min-width: 300px;
    }

    .payment-portal-content .pp-method .pp-method-options { /*note - was in max-width: 550px */
        align-items: center;
        flex-direction: column;
        gap: 1em;
        font-size: 1.1em;
        gap: 1em;
    }

    /*should match Navigationbar*/
    .side-2 {
        height: calc(100vh - 10rem);
        top: 5rem;
    }
}

@media (hover: none) and (max-width: 500px) 
{
    .card-body {
        padding: 0.75rem;
    }

    .card-body-links a {
        margin: 0.75rem;
    }

    .card-body-payment-portal .form-row .form-group label {
        min-width: unset;
    }

    .card-body-payment-portal .form-row .form-group span {
        min-width: unset;
    }

    .card-body-payment-portal .form-row .form-group,
    .card-body-payment-portal > div .form-row .form-group {
        justify-content: start;
    }

    .card-body-payment-portal .form-row-alt .form-group label {
        min-width: unset;
    }

    .card-body-payment-portal .form-row-alt .form-group span {
        min-width: unset;
    }

    .card-body-payment-portal .form-row-alt .form-group,
    .card-body-payment-portal > div .form-row-alt .form-group {
        justify-content: start;
    }

    .card-footer-alt {
        padding: 1em;
    }

        .card-footer-alt button {
            font-size: 0.9em;
            /*            height: 2.25em;*/
        }

    #CardListArea {
        font-size: 0.9em;
    }

    .card-review .card-body-review .row:nth-child(2) > textarea {
        height: 90%;
    }

    .card-review .card-body-review .row > label {
        font-size: 1em;
    }

    .card-review .card-footer-review button {
        font-size: 0.85em;
    }

    .cart-footer .general-details {
        float: left;
        margin: 0 auto 2em;
        padding: 0.5em;
        border: 1px solid #ddd;
        overflow-x: auto;
    }

    .cart-footer .totals {
        float: right;
        /*        margin: 0 auto 2em;*/
        padding: 0.5em !important;
        border: 1px solid #ddd;
        font-size: 0.8em;
        overflow-x: auto;
    }

    .cart-footer .total-info {
        all: unset;
    }

    .cart-total .order-total {
        font-size: 1.3em;
    }

    .cart-total-left {
        width: 40%;
    }

    .CenterBox {
        width: 360px;
        min-width: revert;
    }

    .CenterField {
        font-size: 0.9em;
    }

    #checkout-1-body,
    #checkout-2-body {
        font-size: 0.8em;
    }

        #checkout-1-body > div:nth-child(1),
        #checkout-2-body > div:nth-child(1) {
            gap: 0.8em;
        }

            #checkout-1-body > div:nth-child(1) > label,
            #checkout-2-body > div:nth-child(1) > label {
                padding: 0;
                font-size: 0.75em;
                width: 100px;
            }

            #checkout-1-body > div:nth-child(1) > select,
            #checkout-2-body > div:nth-child(1) > select {
                max-width: 250px;
                min-width: 190px;
                width: 60%;
                font-size: 0.8em;
                margin-right: 0;
            }

    #checkout-1-body-row-1 > .checkout-list-info p,
    #checkout-1-body-row-2 > .checkout-list-info p,
    .checkoutBodyRow > .checkout-list-info p,
    #checkout-2-body-row-2 > .checkout-list-info p {
        width: 100px;
        font-size: 0.95em;
    }

    #checkout-1-body-row-1 > .checkout-list-info span,
    #checkout-1-body-row-2 > .checkout-list-info span,
    .checkoutBodyRow > .checkout-list-info span,
    #checkout-2-body-row-2 > .checkout-list-info span {
        font-size: 1em;
    }

    #checkout-1-body-row-1 > #checkout-1-popup-card-body .row,
    .checkoutBodyRow > .checkoutPopupCardRow .row,
    #checkout-2-body-row-2 > .checkoutPopupCardRow .row {
        width: 275px !important;
        font-size: 0.8em;
    }

    .checkout-page .cart-footer .error-section,
    .shopping-cart-page .cart-footer .error-section {
        font-size: 0.75em
    }

    .checkout-section-buttons button {
        font-size: 0.8em;
    }

    .col-md-2 {
        width: 37% !important;
    }

    .col-md-4 {
        text-align: left;
        min-width: 175px;
    }

        .col-md-4:has(.LinkArea) {
            text-align: right;
            min-width: 75px;
            max-width: 75px;
        }

    .ecom-order-search {
        /*        justify-content: space-between;*/
    }

        .ecom-order-search .eos-container {
            width: 240px;
        }

            .ecom-order-search .eos-container .eos-container-searchbox > input {
                padding-left: 0.75em;
                width: 160px;
                font-size: 0.8em;
            }

            .ecom-order-search .eos-container .eos-container-searchbox > text {
                padding-left: 0.2em;
                font-size: 0.8em;
                width: 40px;
            }

            .ecom-order-search .eos-container > button {
                width: 45px;
            }

        .ecom-order-search .eos-error {
            padding-left: 1em;
            font-size: 0.9em;
        }

    #edit-checkout-1-body-row-1,
    #edit-checkout-1-body-row-2,
    #edit-checkout-2-body-row-1,
    #edit-checkout-2-body-row-2 {
        padding-bottom: 0.3em;
    }

    .footer-block {
        font-size: 2.25rem;
    }

    .FormFields {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.67em;
    }

    .form-group {
        min-width: 300px !important;
    }

        .form-group > label {
            font-size: 0.8em;
            width: 100px;
        }

            .form-group > label + input,
            .form-group > label + div > input {
                font-size: 0.85em !important;
                min-width: 175px
            }

        .form-group:has(#register-no-eula) {
            min-width: 300px;
        }

    .form-row-validation {
        font-size: 0.9em;
    }

    .gallery {
        margin: auto;
    }

        .gallery .picture-wrapper {
            margin: 0 0 10px
        }

        .gallery .picture {
            position: relative;
            margin: 0;
            width: 100%;
            height: 40%
        }

            /*            .gallery .picture:before {
                content: "";
                display: block;
                padding-top: 100%
            }*/

            .gallery .picture img,
            .picture-gallery .picture-thumbs img,
            .video-gallery .video-thumbs iframe,
            .variant-picture img {
                /*                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;*/
                width: auto;
                height: 90%;
            }

    .InputAppearanceNew {
        font-size: 0.9em
    }

        .InputAppearanceNew .input-box {
            height: 2.25em;
        }

    .InputAppearance {
        justify-content: center;
        min-width: 350px;
    }

        .InputAppearance label {
            width: 100px;
            font-size: 12px;
        }

        .InputAppearance .input-box {
            width: 200px;
        }

            .InputAppearance .input-box input {
                font-size: 14px;
            }

            .InputAppearance .input-box img {
                width: 1rem;
                height: 1.2rem;
                cursor: pointer;
            }

    #InputAppearance-PwReset1,
    #InputAppearance-PwReset2 {
        display: flex;
        flex-direction: column;
    }

    .input-box-pw-register {
        min-width: 250px;
    }

    .items-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(1, 1fr);
        width: 100%;
        height: auto;
    }

        .items-grid .item-box {
            /*            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            width: 100%;
            min-height: 50%;
            border-right: 1px solid #ddd !important;
            border-bottom: 1px solid #ddd;
            margin: 0px;*/
        }

        /* Remove the right border of the last item in each row */
        .items-grid .item-box {
            border-right: none !important;
            border-left: none !important;
        }

            .items-grid .item-box .item-box-footer {
                padding-left: 0.4em;
                padding-right: 0.4em;
                padding-bottom: 1em;
            }

                .items-grid .item-box .item-box-footer strong {
                    font-size: 1.75em;
                }

                .items-grid .item-box .item-box-footer button {
                    height: 2.5em;
                    width: 7em;
                    border-radius: 1rem;
                    padding: 0 0.75em;
                    font-size: 1.1em;
                }

    .loading-checkout-page .text {
        font-size: 0.9em;
        margin-left: 0;
        max-width: 150px
    }

    .SubTitle {
        font-size: 1em;
    }

    .menu-button, .menu-button::before, .menu-button::after {
        height: 0.15em !important;
        width: 1.25em !important;
    }

    .navbar-logo {
        margin-right: 0.25em !important;
        width: 6em;
    }

        .navbar-logo a img {
            width: 6em !important;
        }

        .navbar-logo.portal {
            gap: 0;
        }

    .navbar-name-long,
    .navbar-name-short {
        font-size: 1em;
    }

    .navbar-panel {
        /*        margin-left: 0.5em;*/
    }

    .navbar-panel-sections {
        width: 50%;
    }

        .navbar-panel-sections li,
        .navbar-panel-sections li > .navbar-panel-welcome-list li,
        .navbar-panel-sections li > .navbar-panel-welcome-list li > .navbar-panel-welcome-acct-list li {
            min-height: 2em;
        }

            .navbar-panel-sections li a {
                font-size: 0.8em;
            }

            .navbar-panel-sections li > .navbar-panel-welcome-list li a {
                font-size: 0.8em;
            }

            .navbar-panel-sections li > .navbar-panel-welcome-list li > .navbar-panel-welcome-acct-list li a {
                font-size: 0.8em;
            }

    .navbar-search {
        display: flex;
        justify-content: end;
    }

        .navbar-search .search-box #SearchOptions .search-box-button {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 0.67em;
        }
        
        .navbar-search .search-box #SearchOptions .search-box-button:hover ~ .search-options-form,
        .navbar-search .search-box #SearchOptions .search-box-button:active ~ .search-options-form,
        .navbar-search .search-box #SearchOptions .search-options-form:hover {
            font-size: 0.75em;
        }

        .navbar-search .search-box.store-search-box #SearchContent > .search-box-text {
            font-size: 0.75em;
        }

        .navbar-search .search-box.store-search-box #SearchContent > #search-clear {
            display: none !important;
        }

        .navbar-search .search-box.store-search-box #SearchContent > #search-clear-x {
            display: flex !important;
            font-size: 1.2em;
        }

    .orders-card .body > table tr > .img-column {
        width: 80px;
    }

    .order-details-header {
        font-size: 0.8em;
    }

        .order-details-header img {
            object-fit: contain;
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
        }

    #order-details-print {
        height: 40px;
        font-size: 0.75em
    }

    .orders-card {
    }

        .orders-card .header {
            font-size: 0.8em;
            overflow-y: scroll;
            min-height: 175px;
        }

            .orders-card .header button {
                font-size: 0.9em;
                padding: 0.5em;
                border-radius: 0.25rem;
                position: absolute;
                bottom: 0;
                right: 0;
                height: 4em;
                align-items: center;
                width: unset;
            }

                .orders-card .header button:hover {
                }

        .orders-card .body {
            font-size: 0.8em;
            padding: 0.5em;
        }

    .overlay {
        font-size: 1em;
    }

    .page-title h1 {
        font-size: 1.5em;
    }

    .pagination-bar {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        min-height: 5em;
        padding: 0;
    }

    #pagination-buttons {
        display: flex;
        justify-content: center;
        width: 100%;
    }

        #pagination-buttons button {
            width: 2.5em;
            height: 2.4em;
        }

        #pagination-buttons .arrow,
        #pagination-search .arrow {
            width: 3.5em;
            height: 2.4em;
        }

        #pagination-buttons .arrow2 {
            width: 2em;
            height: 2.4em;
            margin: 0.2em;
            margin-top: 0;
            margin-bottom: 0;
        }

    #pagination-search {
        display: flex;
        justify-content: center;
        justify-content: center;
    }

        #pagination-search input {
            width: 3.5em;
            height: 2.25em;
            margin: 0;
        }

    .payment-portal-content .pp-method,
    .pmtcol {
        min-width: 250px;
    }

    .PopupBody {
        flex: 1 1 auto;
        padding: 1rem 1rem;
    }

    .PopupButton {
        display: inline-block;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        background-color: transparent;
        border: 1px solid transparent;
        margin: 4px 4px;
        padding: 4px 4px;
        font-size: 12pt;
        border-radius: 8px;
        transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }

    .PopupConfirm {
        color: white;
        background-color: gray;
        border-style: solid;
        border-width: 1px;
        border-color: lightblue;
        padding: 10px;
        border-radius: 15px;
        min-width: 250px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .PopupContainer {
        min-width: 350px;
    }

    .PopupColumn {
        flex: 0 0 auto;
        text-align: center;
        width: 40%;
    }

    .PopupEditor-Checkout {
        min-width: 300px;
        min-height: 50%;
        max-height: 80%;
    }

    .PopupGradient {
        background: linear-gradient(0deg,#000000,#1155cc) !important;
        color: #fff;
    }

    .PopupHeader {
        color: white;
        padding: .5rem 1rem;
        margin-bottom: 0;
        background-color: #1887ba;
        border-bottom: 1px solid rgba(0,0,0,.125);
        text-align: center;
        font-size: 14pt;
        font-weight: bold;
    }

    .PopupPanel, .PopupPanel div {
        background-color: rgba(99, 99, 99, 0.00) !important;
    }

    .PopupRow {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin: auto;
        flex-wrap: wrap;
        text-align: center;
    }

    .PopupTable td, .PopupTable th {
        padding: 3px;
    }

    .popup-card {
        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
        border: 1px solid rgba(0,0,0,.125);
        border-radius: .25rem;
    }

    .popup-card-body {
        flex: 1 1 auto;
        padding: 1rem 0 1rem 0;
        background-color: #fff;
        overflow-x: auto;
    }

    .popup-card-body-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
        background-color: #fff;
    }

        .popup-card-body-links a {
            flex: 0 0 20%;
            color: slategray;
            font-size: 16px;
            font-weight: bold;
            margin: 2rem;
            padding-top: 2rem;
            padding-bottom: 2rem;
            border: 1px solid gray;
            border-radius: 0.5rem;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            height: 100%;
        }

            .popup-card-body-links a:hover {
                color: slategray;
                background-color: lightgray;
            }

    .popup-card-footer {
        display: flex;
        flex-direction: column
    }

        .popup-card-footer > .popup-card-footer-buttons {
            display: flex;
            padding-top: 1em;
            padding-bottom: 1em;
            justify-content: space-between;
        }

            .popup-card-footer > .popup-card-footer-buttons button {
                font-size: 0.75em;
            }

        .popup-card-footer > label {
            font-size: 0.9em;
        }

    .popup-card-header {
        display: flex;
        justify-content: space-between;
        color: white !important;
        padding: .5rem 1rem;
        margin-bottom: 0;
        background-color: #1887ba;
        border-bottom: 1px solid rgba(0,0,0,.125);
    }

        .popup-card-header .button-1 {
            display: inline-block;
            min-width: 140px;
            border: 0;
            background-color: #4ab2f1;
            padding: 10px 30px;
            text-align: center;
            font-size: 15px;
            color: #fff;
            text-transform: uppercase
        }

    .popup-card-sub-header {
        color: white;
        padding: .5rem 1rem;
        margin-bottom: 0;
        background-color: #42aedf;
        border-bottom: 1px solid rgba(0,0,0,.125);
    }

    .popup-card-title {
        color: #fff !important;
        margin-bottom: 0;
        font-size: 1em;
    }

    #register-no-eula {
        font-size: 0.8em;
    }

    #ReturnToOrdersButton {
        min-width: 125px;
        min-height: revert;
        font-size: 0.8em;
    }

    .shopping-cart-page .page-title {
        padding-left: 0;
        padding-bottom: 2em;
    }

    .side-2 {
        width: 50% !important;
    }

        .side-2 .closebtn {
            font-size: 2em;
        }

        .side-2 .block > ul a {
            font-size: 0.75em;
        }

        .side-2 > .block-apply {
            height: 6em;
        }

            .side-2 > .block-apply button {
                height: 66%;
                border-radius: 0.5em;
                /*                width: 5.5em;*/
                font-size: 0.75em;
            }

    /*        .side-2 a {
            color: dodgerblue;
            white-space: nowrap;
            margin: 0.75rem;
            text-decoration: none;
        }

            .side-2 a:hover {
                text-decoration: underline;
            }

        .side-2 .closebtn {
            position: absolute;
            top: 0;
            right: auto;
            font-size: 2em;
        }

    .side-2-open {
        font-size: 2em;
        cursor: pointer;
        background-color: antiquewhite;
        color: dodgerblue;
        border-left: 1px solid lightgray;
    }

        .side-2-open:hover {
            background-color: white;
        }*/

    .side-2-show-btn {
        height: 2.5em;
        width: 12em;
    }

    .side-2-up-btn {
        display: none;
    }

        .side-2-up-btn.sticky {
            display: revert !important;
            height: 2.5em;
            width: 4em;
        }
}

@media (hover: none) and (max-width: 450px) 
{
    .block .title {
        margin: 0;
        background-color: lightgray;
        border-radius: 0.5em;
        font-size: 1em;
    }

    .block .list a {
        font-size: 0.75em;
    }

    /*    .block input[type=checkbox]:checked ~ .listbox > .list li a {
        font-size: 0.75em;
    }*/

    .item-grid-related .item-box-related {
        margin: 0;
        /*        padding: 0 0 2rem;*/
        border-bottom: 1px solid lightgray;
    }

        .item-grid-related .item-box-related .buttons {
            width: 100%;
        }

            .item-grid-related .item-box-related .buttons > button {
                min-width: 75px;
                max-width: 150px;
                width: 40%;
            }

    .overview-buttons {
        display: flex;
        justify-content: center;
        margin: 0 0 25px;
        font-size: 0;
        gap: 1rem;
        width: 100%;
    }

        .overview-buttons > div {
            width: 40%;
            min-width: 75px;
            max-width: 150px;
            margin: 0;
        }
}