
<style>
    .sample-class {
        width: auto;
    }

    

    :root {
        --inverted-color: #c3c3c3;
    }

    .custom-location-icon {
        background: url('https://cloudfront-dkxj8skx6o8xc.mobi-pos.com/gpcloudsync/assets/img/location.png') no-repeat;
        background-size: contain;
        height: 100%;
        width: 100%;
    }

    .search-bar-top-bg {
        background-color: white;
    }

    
    .default-white {
        background-color: white;
    }

    .body-background {
        background-color: white;
        box-shadow: none;
    }

    .reward-progression-bar { 
        background: #808080;
        color: #fff;
        height: 12px;
    }

    .giftcard-amount-container.selected-gc-amount {
        background: #808080;
        color: #fff;
        border-color: #696969;
    }

    .thumbnail_bg {
        background: #808080;
    }

    .grey-btn { 
        background: #808080;
        color: #fff;
        border-color: #696969;
    }

    .grey-btn:hover {
        opacity: 0.7;
        background: #808080;
        color: #fff;
    }

    .secondary-grey-btn {
        border: 1px solid#808080;
        color: #808080;
        background: white;
    }

    .secondary-grey-btn:hover, .secondary-grey-btn:focus {
        opacity: 0.7;
        border: 1px solid#808080;
        color: #808080;
    }

    
    
    #reader__dashboard_section_csr button {
        background: #808080;
        color: #fff;
        border: none;
        border-color: #696969;
        padding: 6px 12px;
        border-radius: 0.25rem;
    }

    #reader__dashboard_section_csr button:hover {
        opacity: 0.7;
        background: #808080;
        color: #fff;
    }

    

        .secondary-red-btn {
        border: 2px solid#FF6550;
        color: #FF6550;
        background: #fff;
    }

    .secondary-red-btn:hover, .secondary-red-btn:focus {
        opacity: 0.7;
        border: 2px solid#FF6550;
        color: #FF6550;
    }

    .red-btn {
        background-color: #FF6550;
        color: #fff; 
        border-color: #E21405;
    }

    .red-btn:hover {
        opacity: 0.7;
        background: #FF6550;
        color: #fff;
    }

    .red-btn:disabled, .red-btn.disabled-css {
        border-color: rgba(226, 20, 5, 0.4);
    }

    .grey-btn:disabled {
        border-color: rgba(105, 105, 105, 0.4);
    }

        
    
    
    .reward-radio-btn-toggle {
        border-width: 0 0 1px 0;
        border-color: rgba(0, 0, 0, .125);
        border-style: solid;
        font-weight: bold;
        background-color: white; 
    }

    .reward-radio-btn-toggle.active { 
        background-color: #F6F6F6 !important; 
        color: #212529 !important;
        
     
    }

    
    
    .reward-radio-btn-toggle.active::before {
        content: '';
        position: absolute;
        bottom: 0; 
        left: 0;
        height: 4px; 
        width: 100%;
        background-color: #212529    }

    .reward-radio-btn-toggle.first-toggle.active::before {
        border-bottom-left-radius: 4px;
    }

    .reward-radio-btn-toggle.last-toggle.active::before {
        border-bottom-right-radius: 4px;
    }

    .list-group-item {
        border-radius: 0 !important;
        border-width: 0px 0 1px 0;
        border-color: rgba(0, 0, 0, .125);
        border-style: solid;
        background-color: white; 
    }

    .list_active_override.active { 
        border-left: 0px !important;
        border-bottom: 3px solid #212529 !important;
        font-weight: normal !important;
        text-shadow: 1px 0px 0px#212529; 
    }

    .list_active_override.active:hover {
        color: #212529;
    }

    .vert-list-active-override.active:hover {
        color: #212529;
    }

    .list-group-item.active { 
        background-color: #F6F6F6; 
        border: 1px solid rgba(0, 0, 0, .125); 
        border-left: 4px solid#212529;
        font-weight: bold;
        color: #212529;
    }

    .plus-minus-button.btn-secondary:not([disabled]):hover {
        opacity: 0.7;
        color: #fff;
        background-color: #808080;
        border-color: #6c757d;
    }

    
    @media (hover: none) {
        
        .nav > li > a:hover {
            background: none !important;
            background-color: initial !important;
        }

        
        .nav > li > a:hover.list-group-item.active {
            background: #F6F6F6 !important;
            background-color: #F6F6F6 !important;
        }

        .promo_banner_center {
            
            height: auto;
            width: 100%;
        }

        
        
        .hover-div:hover, .hover-div:active {
            background-color: white;
            animation: hover-div-mobile 150ms;
            -webkit-animation: hover-div-mobile 150ms;
        }

        .hover-div-bg:hover, .hover-div-bg:active {
            animation: hover-div-mobile 150ms;
            -webkit-animation: hover-div-mobile 150ms;
        }

        
        .plus-minus-button.btn-secondary:not([disabled]):hover, .plus-minus-button.btn-secondary:not([disabled]):active {
            opacity: 1;
            animation: btn-secondary-mobile 150ms;
            color: #fff;
            background-color: #6c757d;
            border-color: #6c757d;
            -webkit-animation: btn-secondary-mobile 150ms;
        }

        @keyframes btn-secondary-mobile {
            0%, 100% {
                opacity: 0.7;
                background-color: #6c757d;
                border-color: #6c757d;
            }
        }

        
        .plus-minus-button.btn-outline-secondary:not([disabled]):hover, .plus-minus-button.btn-outline-secondary:not([disabled]):active {
            opacity: 1;
            animation: btn-outline-secondary-mobile 150ms;
            color: #6c757d; 
            background-color: #fff; 
            border-color: #6c757d; 
            -webkit-animation: btn-outline-secondary-mobile 150ms;
        }

        @keyframes btn-outline-secondary-mobile {
            0%, 100% {
                opacity: 0.7;
                color: #fff;
                background-color: #6c757d;
                border-color: #6c757d;
            }
        }
        
        
        @keyframes collapse-header-mobile {
            0%, 100% {
                background-color: rgba(108, 117, 125, 0.4);
            }
        }

        .collapse-header:hover {
            background-color: #f6f6f6;
            -webkit-animation: collapse-header-mobile 150ms;
        }

        
        @keyframes revert-opacity {
            0%, 100% {
                opacity: 0.7;
            }
        }

        .grey-btn:hover {
            opacity: 1;
            -webkit-animation: revert-opacity 150ms;
        }

        @keyframes red-btn-mobile {
            0%, 100% {
                opacity: 0.7;
            }
        }

        .red-btn:hover {
            opacity: 1;
            -webkit-animation: revert-opacity 150ms;
        }
    }

    .nav > li > a:hover { 
        background: #f6f6f6;
        background-color: #F6F6F6;
        }

    .category-button-text, .category-button-text:hover {
        
        color: #212529;
        
     
    }

    
    
    
    
    .big-product-pad {
        
        padding-right: 5px;
        padding-bottom: 5px;
    }

    .my-header-background {
        background-color: #f6f6f6;
    }

    .selected-category-header-text-color { 
        color: ;
    }

    
    
    
    
    
    
    
    
    @media (min-width: 992px) {
        
        .top-nav-select-text-color { 
            color:  !important;
        }

        .top-nav-select-text-color:hover:not(.tnc_alignment) { 
            background-color:  !important;
            color: ;
            opacity: 0.7;
        }


            .btn-lg-override {
            color: inherit;
        }

    
    }

        
        .nav-hover-text:hover {
        background-color: white;
        border-color: transparent;
        color: black;
        opacity: 0.7;
    }

    @media (min-width: 992px) {
        .btn-lg-override:hover {
            background-color: white;
            border-color: transparent;
            color: black;
            opacity: 0.7;
        }

        
        .btn-lg-override:active {
            background-color: white !important;
            border-color: transparent !important;
            color: black !important;
        }

        .btn-lg-override:not(:disabled):not(.disabled).active {
            background-color: white;
            border-color: transparent;
            color: black;
        }
    }

    

    
    
    .select-language-font {
        }

    .badge-style {
        right: 64px !important;
    }

    .banner-img-style {
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        min-height: 120px;
        object-fit: cover;
    }

    .search-input-style {
        height: 44px;
        font-size: 1rem;
        display: inline-block;
        padding-left: 40px;
        padding-right: 30px;
        text-overflow: ellipsis;
    }

    
    @media (max-width: 991.88px) {
        .top-nav-style {
            min-height: 50px;
            max-height: 50px;
        }

        .nav-off-set-pad {
            padding-top: 50px;
        }

        .oo-logo-style {
            max-width: 46px;
            max-height: 46px;
            cursor: pointer;
        }

        .top-nav-content-style {
            left: 55px;
            width: calc(100% - 60px) !important;
        }

        .vertical-scrollspy-style {
            top: 55px;
            position: -webkit-sticky;
            position: sticky;
            overflow: scroll;
            
         
            height: calc(100vh - 99px);
        }

        .min-scrollspy-height {
            min-height: calc(100vh - 102px);
            margin-bottom: 5px;
        }

        .horizontal-scrollspy-style {
            position: -webkit-sticky;
            position: sticky;
            display: block;
            z-index: 999;
            max-height: 94px;
            height: auto;
            top: 94px;
            padding-left: 3px;
            padding-right: 10px;
        }

        .search-div-style {
            height: 44px;
            max-height: 44px;
            top: 50px;
            padding-left: 3px;
            padding-right: 1px;
            background-color: white;
            position: -webkit-sticky;
            position: sticky;
            z-index: 1000;
        }

        #content {
            position: sticky;
            top: 94px;
        }

        .search-bar-top-bg-style {
            position: -webkit-sticky;
            position: sticky;
            z-index: 999;
            top: 49px;
            width: 100%;
            padding: 3px;
        }
    }

    
    @media (min-width: 991.88px) {
        .top-nav-style {
            min-height: 70px;
            max-height: 70px;
        }

        .nav-off-set-pad {
            padding-top: 70px;
        }

        .oo-logo-style {
            max-width: 66px;
            max-height: 66px;
            cursor: pointer;
        }

        .top-nav-content-style {
            left: 75px;
            width: calc(100% - 80px) !important;
        }

        .vertical-scrollspy-style {
            top: 75px;
            position: -webkit-sticky;
            position: sticky;
            overflow: scroll;
            
         
            height: calc(100vh - 122px);
        }

        .min-scrollspy-height {
            min-height: calc(100vh - 122px);
            margin-bottom: 5px;
        }

        .horizontal-scrollspy-style {
            position: -webkit-sticky;
            position: sticky;
            display: block;
            z-index: 999;
            max-height: 114px;
            height: auto;
            top: 114px;
            padding-left: 3px;
            padding-right: 10px;
        }

        .search-div-style {
            height: 44px;
            max-height: 44px;
            top: 70px;
            padding-left: 3px;
            padding-right: 1px;
            background-color: white;
            position: -webkit-sticky;
            position: sticky;
            z-index: 1000;
        }

        #content {
            position: sticky;
            top: 114px;
        }

        .search-bar-top-bg-style {
            position: -webkit-sticky;
            position: sticky;
            z-index: 999;
            top: 69px;
            width: 100%;
            padding: 3px;
        }
    }

    .footer-row-style {
        width: 100%;
        padding-top: 3px;
        min-height: 44px;
        position: absolute;
        bottom: 0;
    }

    #nav_and_content {
        padding-bottom: 44px;
    }

    .main-bg-img {
        background-color: rgba(245, 245, 245);
        }

    .darkgrey-transparent-btn:not(.selected-btn-color) {
        background-color: #fff;
        color: #000;
        border-color: #000;
    }

    .darkgrey-transparent-btn:hover {
        color: #000;
        opacity: 0.5;
    }

    .darkgrey-transparent-btn:focus, .grey-transparent-btn:active:focus {
        color: #000;
    }

    .grey-transparent-btn {
        background-color: #fff;
        color: #000;
        border-color: #000;
        opacity: 0.6;
    }

    .grey-transparent-btn:hover {
        color: #000;
        border-color: #000;
        opacity: 0.4;
    }

    
    
    input[type="text"]:disabled {
        color: inherit;
        background-color: inherit;
    }

    
    
    
    
    .selected-product-color { 
        background-color: #fff;
        cursor: pointer;
    }

    .selected-product-color:hover {
        background-color: #f5f5f5 !important;
        opacity: 0.9;
    }

    .selected-paper-menu-color {
        background-color: #fff !important;
    }

    .selected-paper-menu-color:hover {
        background-color: #f5f5f5 !important;
        opacity: 0.9;
    }

    .paper-menu-div {
        background-color: #fff !important;
    }

    .selected-product-text-color {
        color: #444 !important;
    }

    .reward-radio-btn-toggle.active::before {
        content: '';
        position: absolute;
        bottom: 0; 
        left: 0;
        height: 4px; 
        width: 100%;
        background-color:     }

    .highlight {
        background:  !important;
        color: ;
    }

    .cart-category-header-color {
        color: ;
        background-color: #fff;
    }

    .cart-category-header-color:hover:not(.qty-div) {
        background-color: #f5f5f5 !important;
    }

    
    
    .cart-child-border-class {
        border-top: none;
        border-bottom: none;
    }


    
    
    
    
        
    .top-nav-selected-background-2 {
        background-color: ;
    }

    
    
    
    
    
    
</style>