/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Apr 4, 2017, 2:28:38 PM
    Author     : Jim Prinston J
*/
@font-face {
    font-family: 'Framework7 Icons';
    font-style: normal;
    font-weight: 400;
    src: url("fonts/Framework7Icons-Regular.eot");
    src: local('Framework7 Icons'),
        local('Framework7Icons-Regular'),
        url("fonts/Framework7Icons-Regular.woff2") format("woff2"),
        url("fonts/Framework7Icons-Regular.woff") format("woff"),
        url("fonts/Framework7Icons-Regular.ttf") format("truetype");
}


@font-face {
    font-family: 'Chalkboard SE';
    font-style: normal;
    font-weight: 400;
    src:
        url("fonts/chalkboardse-regular-webfont.woff2") format("woff2"),
        url("fonts/chalkboardse-regular-webfont.woff") format("woff"),
        url("fonts/ChalkboardSE-Regular.ttf") format("truetype");
}
@font-face{ 
    font-family: 'OpenSans-Regular';
    src: url("../../commonLibrary/fonts/Open_Sans/OpenSans-Regular.ttf");
}
@font-face{ 
    font-family: 'OpenSans-SemiBold';
    src: url("../../commonLibrary/fonts/Open_Sans/OpenSans-SemiBold.ttf");
}@font-face{ 
    font-family: 'OpenSans-Bold';
    src: url("../../commonLibrary/fonts/Open_Sans/OpenSans-Bold.ttf");
}
@font-face{ 
    font-family: 'OpenSans-ExtraBold';
    src: url("../../commonLibrary/fonts/Open_Sans/OpenSans-ExtraBold.ttf");
} 
@font-face{ 
    font-family: 'OpenSans';
    src: url("../../commonLibrary/fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf");
}
*:not(i,.global-modal *){
    font-family: 'OpenSans', sans-serif;
}
/* font weight adjustment for safari browser */
.safari b,
.safari .retail-view .card-listing .card-content h1,
.safari .retail-view .card-content h1,
.safari h3,
.safari price,
.safari .navbar-inner .left span,
.safari .discount-box .bordered-input,
.safari .admin-banner h6
{
    font-family: 'OpenSans-Bold' !important;
    font-weight: normal !important;
}
.safari .retail-view .product_desc .card-content h1{
    font-family: 'OpenSans-SemiBold' !important;
    font-weight: normal !important;
}
.student-font{
    font-family: 'Chalkboard SE';
}
body{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                        supported by Chrome and Opera */
}
.f7-icons, .framework7-icons {
    font-family: 'Framework7 Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 25px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    font-feature-settings: "liga";
}
/*.demo-card-header-pic .card-header {
    min-height: 70vw;
    background-size: cover;
    background-position: center;
    display: block !important;
    color: #6d6d72 !important;
}*/
.demo-card-header-pic .card-header{
    background-size: contain;
    background-position: center;
    display: block !important;
    color: #6d6d72 !important;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    padding: 25%;
}
.event-des-height .card-header {
    /*min-height: 11vw;*/
}
.card-image {
    padding: 0px !important;
    margin: 0px !important;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height:11vw;
    width:100%;
    margin-top:-4px!important;
}
.card-content h3{
    margin: 1px !important;
    padding: 0px !important;
}
.card-element{
    color: white;
    font-size: 25px;
    font-weight: 500;
    text-shadow: 1px 1px #000000;
    display: block;
    width: 100%;
}
.card-head{
    color: white;
    font-size: 22px;
    font-weight: 400;
    color: white;
    text-shadow: 1px 1px #000000;
}
.card-desc{
    font-size: 14px;
    text-shadow: 1px 1px #000000;
    display: block;
    margin: 5% 0px;
}
.card-button{
    color: white;
    width: 130px;
    border: 1px solid white;
    text-shadow: 1px 1px #000000;
}
.card-header h3{
    /*            color: black;*/
    /*            font-size: 21px;*/
    /*            font-weight: 400;*/
    /*            text-shadow: 1px 1px #000000;*/
    text-align: center;
    margin-top: 15%;
}
.card-header h6{
    /*            color: black;*/
    /*            font-size: 12px;*/
    /*            text-shadow: 1px 1px #000000;*/
    text-align: center;
}
.card-header-cur h3{
    text-align: center;
    margin-top: 15%;
}
.card-header-cur h6{
    /*            color: black;*/
    /*            font-size: 12px;*/
    /*            text-shadow: 1px 1px #000000;*/
    text-align: center;
}

.content-block {
    margin-top: 10px;
}

.card{
    margin: 5px;
}
iframe {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    background: url('/assets/images/polina.jpg') no-repeat;
    background-size: cover;
}
.color {
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.5);
    color:#fff;
}
.msg-btn{
    width: 150px;
}
.content-block{
    padding: 0 5px;
    padding-bottom: 18px;
}
.two-one h3{
    /*            color: black;*/
    /*            font-size: 20px;*/
    /*            font-weight: 400;*/
    /*            text-shadow: 1px 1px #000000;*/
    text-align: center;
    margin-top: 50%;
}
#login input, input[placeholder]{
    text-align:left;
}
.button{
    width: 130px;
}
.progressbar, .progressbar-infinite{
    position: absolute;
    z-index: 9999;
}
.login-screen-content {
    background: url('img/login_bg.jpeg');
    background-size: 100% 100%;
}
#login .ip-elements{
    background: white; border-radius: 8px; margin: auto;
}
#login form{
    margin:3%; 
}
.item-input span{
    font-size: 14px;
}

#view-4 .card{
    padding: 20px;
}
/*Center*/
.outer-whitelabel {
    display: table;
    position: absolute;
    height: 50%;
    width: 100%;
}
.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto;
    /*width: whatever width you want;*/
}

.panel p {
    border-bottom: 1px solid lightgray;
    margin: 5px 0;
    padding-bottom: 8px;
}
.menu_icn{
    font-size:32px !important;
}
.pp-list {
    float: right;
    text-align: right;
}
.right {
    float: right;
}
/*pointer events, cursor*/
.cursor-not-allowed{
    cursor: not-allowed;
}
.cursor-pointer{
    cursor: pointer;
} 
.pointer-events-visible{
    pointer-events: visible;
}
.pointer-events-none{
    pointer-events: none;
}
.cursor-not-allowed .custom-form-group input{
    opacity: 0.6;
}
.date-dropdowns.pointer-events-none select{
    color: #999999;
}
.pointer-events-visible{
    pointer-events: visible;
}
.pointer-events-none{
    pointer-events: none;
}
@media all and (min-width: 630px) and (min-height: 630px) {
    .popup:not(.tablet-fullscreen){
        height: 100% !important;
        left: 0% !important;
        margin-left: 0px !important;
        margin-top: 0px !important;
        top: 0% !important;
        transform: translate3d(0px, 1024px, 0px);
        width: 100% !important;
    }
    .popup:not(.tablet-fullscreen).modal-in {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    .popup:not(.tablet-fullscreen).modal-out {
        -webkit-transform: translate3d(0, 1024px, 0);
        transform: translate3d(0, 1024px, 0);
    }
}

.logo-cover {
    object-fit: cover;
    width: auto;
    height: 46px;
}
.waiver-check{
    margin-left: 0;
    margin-top: 20px;
}
.login-screen-title{
    background: url("img/logo_incourage.png") no-repeat;
    background-size: cover;
    width: 190px;
    height: 56px;
    /*margin-top: -15px !important;*/
}
.tabbar a.active .referral{
    content:url("img/ref_blue.png");

}

.tabbar a .referral{
    content:url("img/ref_grey.png");
}

.tabbar a.active .referral::after{
    content:url("img/ref_blue.png");
    width:31px;
}

.tabbar a .referral::after{
    content:url("img/ref_grey.png"); width:31px;
}

.menuimg{
    width: 22px; height:22px; margin-right: 5px; position: relative; vertical-align: middle;
}
.views{
    overflow:hidden;
}
.toolbar-inner-custom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 2px 8px;
    box-sizing: border-box;
    /*  display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      -webkit-justify-content: space-between;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;*/
}
.custom-toolbar-height{
    height: 71px;
}
.custom-toolbar-xlheight{
    height: 84px;
}
.custom-toolbar-xxlheight{
    height: 108px;
}
.custom-toolbar-smheight{
    height: 51px;
}
.custom-toolbar-xsheight{
    height: 31px;
}
.toolbar-inner-custom-content{
    font-size: 11px;
}
.toolbar-button{
    width:100%; margin-top:4px; color:#009a62;
}
.custom-card-cont{
    margin-left:7px;  
    color:black;
    font-family: OpenSans;
    text-overflow: ellipsis;
    white-space: inherit;
    overflow: hidden;
    height: 80px;
}
.subcarthead{
    border: 1px solid black;
    padding: 5px;
}
.subcartqty{
    border: 1px solid gray !important;
    width: 50px !important;
    padding: 1px !important;
    height: 33px !important;
    margin-top: 6px !important;
    text-align: center;
    font-size:14px !important;
}
.item-title{
    margin-top:10px;
}
.Desktop_modal .item-content .item-title:hover, .Medium_desktop_modal .item-content .item-title:hover,
.Small_desktop_modal .item-content .item-title:hover{
    overflow: visible;
    white-space: normal;
    text-align: left;
}
.mild-hr{
    background-color: lightgray;
    height: 1px;
    border: 0;
}
.label_align{
    margin-left:10px;
}
.input-align{
    width:93%;
    margin-top: 5px;
    margin-bottom: 5px;
}
.card-content-cus h3{
    margin: 1px;
    margin-bottom:8px;
    padding: 0px !important;
}
.textareadiv{
    max-height:80px;
    max-width:350px;
    overflow-y:auto;
    margin-left:15px;
    margin-right:15px;
    margin-top: 8px;
    font-size: 12px;
}
.input-cus[placeholder]{
    text-align:left;
    font-size:13px;
    width:93%;
    margin-top:5px;
    margin-bottom:5px;
    height:20px;
}
.input-cuswidth[placeholder]{
    text-align:left;
    font-size:13px;
    width:86%;
    margin-top:5px;
    margin-bottom:5px;
    height:20px;
}
.select-cuswidth1{
    width:43%;
}
.select-cuswidth2{
    width:97%;
}
.select-lswidth{
    width:94%;
}
.button.active-cus {
    background: #00ad68;
    color: #fff;
    border: 0px;
}
.custom-back{
    display: inline-block !important; margin-top: -4px;
}
.oneline{
    display:inline-block;
}
#preloader-transp { position:absolute; left:0; top:0; background: rgba(0,0,0,.2); width:100%; height:100%; overflow-y: hidden; z-index: 10000; } 
.preloader-custom{ width: 44px; height: 44px; position: fixed;margin-left: 46%; top:45%; z-index:10001 }
.play-overlay{
    position: absolute;
    top: 60%;
    left: 50%;
    width: 150px;
    /*height: 150px;*/
    margin-top: -75px; /* Half the height */
    margin-left: -75px;
}

.container{
    max-width: 1200px;
    margin:auto; 
}

.event-des-imageheight .card-header {
    min-height: 18vw;
}
.card-right {
    min-height: 18vw;
}
.no-padding-top{
    padding-top:0px!important;
}

.eventdesccontent-align{
    margin-left: 10px;
    width:100%;
}

.cus-card{
    margin-top: 40px;
}
.mobile-view{
    display:none;
} 
.web-view{
    display:block;
}

.registerbutton-align{
    position: absolute;
    left: 5%;
    bottom: 30px;
    width: 90%;  
    background: #f7f7f8;
    padding-top: 10px;
}

.button-maxwidth{
    max-width: 500px;
}

.col-33-cardlisting{
    width:33.33%;
}

.web-calender{
    padding:0; 
    margin-right:-15px; 
    width:60%; 
}

/*RETAIL SCREEN CSS STARTS*/
.new_nav .navbar-inner{
    padding: 30px 15px 20px 15px;
    background: white;
}
.retail-view .page-content{
    padding: 100px 10px 60px 10px;
    background: white;
}
/*.retail-view .card-listing+.card-listing{*/
/*margin-top: 15px;*/
/*}*/
.retail-view .card-content h1{
    font-size: 15px;
    font-weight: 600;
}
.retail-view .card-content h1 strike{
    font-weight: 400;
}
.retail-view .card-footer p{
    margin: 0;
    color: black;
    font-family: OpenSans;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.carousal_container{
    padding:110px 0 0 0;
    background: white;
}
.carousal_container:after{
    display:block;
    content:'';
    border-bottom: 1px solid #efefef;
}
.page-content.horz_carousal{
    padding:0 0 50px 0;
}
.page-content.horz_carousal.product_desc{
    /*top:-5px;*/
    background: white;
}
ul.horz_carousal {
    list-style-type: none;
    margin: 0;
    background: white;
    padding: 10px 0;
    position: relative;
    top: -5px;
    height: 20px;
    overflow: auto;
    white-space: nowrap;
}
ul.horz_carousal li {
    padding: 0 15px;
    display: inline;
}
ul.horz_carousal li a{
    color:black;
}
ul.horz_carousal li.active a{
    color:rgb(0,137,87);;
}
.product_desc .card,.retail_cart .card{
    margin: 0;
    height: 85vh;
    overflow: auto;
}
.retail_cart .web-view .card{
    height: auto;
}
.retail_cart .web-view .col-35 .card{
    max-width: 350px;
}
.web-view.product_desc .card{
    margin: auto;
    height: auto;
    max-width: 850px;
    padding: 25px;
}
.web-view.product_desc .card-image{
    margin-top: 0px;
}
.product_desc .web-view .card-content-inner{
    padding: 10px;
}
.retail-view .product_desc .card-content h1{
    padding-left: 15px;
    border-bottom: 1px solid rgb(223,227,233);
    padding-bottom: 5px;
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 500;
}
.web-view.product_desc h1{
    margin-top:-20px;
    padding: 0 !important;
}
.desc_select{
    height: 35px;
    width: 100%;
    color: #000000;
}
.centlabel{
    height: 25px;
    /*width: 75%;*/
    margin-top: 5px;
    padding-left: 3px;
}
.retail-view .active-cus.toolbar-button{
    border-radius: 0;
    height: 45px;
    margin-top: 22px;
    padding-top: 10px;
    font-size: 15px;
    letter-spacing: 0.3px;
    font-weight: 500;
}
.retail-view .toolbar-inner-custom{
    padding:0;
}
.toolbar-inner-custom .price{
    top: 10px;
    position: relative;
    font-size: 16px;
}
.page-content.retail_cart{
    padding:100px 0;
    background: white;
    /*padding-bottom: 170px !important;*/
}
.retail_cart h1{
    padding-left: 15px;
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid rgb(223,227,233);
    padding-bottom: 5px;
    margin-bottom: 0;
}
.retail_cart h3{
    margin: 0 0 10px 0;
    font-size: 14px;
    font-weight: 600;
}
.retail_cart_list{
    padding: 15px;
    position: relative;
    list-style: none;
    margin:0;
    margin:0 0 0 0;
}
ul.retail_cart_list li:after{
    content:'';
    display:block;
    border-bottom:1px solid rgb(223,227,233);
    margin: 0 -15px;
}
ul.retail_cart_list li:last-child:after{
    border-bottom:none;
}
.trash_icon_light{
    width: 16px;
    margin-top: 8px;
    cursor: pointer;
}
.retail_title{
    margin-top: 15px;
}
.retail_title .price{
    font-weight: 600;
}
ul.retail_cart_list li:first-child > .retail_title{
    margin-top: 0;
}
.bordered-input{
    height: 30px;
    width: 100%;
    border-radius: 5px;
    box-shadow: none;
    text-align: center !important;
    color: rgb(155,155,155);
    border-top: 1px solid rgb(211,210,210);
    border-bottom: 1px solid rgb(211,210,210);
    border-right: 1px solid rgb(211,210,210);
    border-left: 1px solid rgb(211,210,210);
}
.retail-view .custom-toolbar-xlheight{
    height:90px;
}
.product_desc .card-content-inner{
    padding-bottom: 190px;
}
.custom-toolbar-xxlheight{
    height:100px;
}
.toolbar-price{
    padding-top: 8px;
}
.toolbar-price .active-cus.toolbar-button{
    margin-top: 9px;
}
.discount-container{
    position: relative;
    bottom: 181px;
    z-index: 6;
    background: white;
    padding: 5px 15px 15px;
    height: 707px;
}
.web-view .discount-container{
    height: auto;
    position: initial;
    padding: 15px;
}
.discount-box{
    margin: 5px 0;
}
.web-view .discount-box{
    margin: 10px 0;
}
.discount-box .bordered-input{
    width: 100%;
    height:35px;
    margin-right: 15px;
    top: 10px;
    position: relative;
    font-size: 14px;
    font-weight:600;
}
.retail_cart .mobile-view .toolbar-price{
    padding-top: 10px;
}
.web-view .discount-box .bordered-input{
    position: initial;
    margin-right: 0;
}
.retail_cart .web-view .registerbutton-align, .product_desc .web-view .registerbutton-align{
    position: initial;
    margin: 15px;
    padding-top: 10px;
}
.discount-container.mobile-view{
    bottom: 5px;
}
.discount-container span{
    /*font-size: 12px;*/
}
.discount-container.mobile-view span{
/*    position: relative;
    top: -10px*/
}
.discount-container.mobile-view .discount-box{
    position: relative;
    top: -15px;
}
.custom-toolbar-mdheight{
    height: 60px;
}
.custom-toolbar-xxxlheight{
    height: 130px;
}
.custom-toolbar-xxxlheight .toolbar-price{
    padding-top: 15px;
}
.retail-view .custom-toolbar-mdheight .active-cus.toolbar-button{
    margin-top: 0px;
    height: 60px;
    padding-top: 17px;
    font-size: 18px;
}
.retail-view .custom-toolbar-xxxlheight .active-cus.toolbar-button{
    margin-top: 16px;
    font-size: 20px;
    height: 60px;
    padding-top: 17px;
}
.decider_signin{
    font-size:15px;
    letter-spacing: -0.24pt;
}
.greentext-sm-signin{
    font-family:OpenSans;
    font-size: 14px;
    color:rgb(0,137,87);
    letter-spacing: -0.24pt;
}
.heading-payment-retail{
    font-size:18px;
    letter-spacing: -0.24pt;
    font-weight: 600;
}

.retail-payment-card{
    margin-right: 10px;
}

.retailwaiver{
    font-size: 14px;
    font-weight: 100;
}
.retail-view .page-content.retail_payment_update{
    background: white;
    padding: 70px 0 60px 0;
}
.retail-view .checkout .page-content{
    background: white;
    padding: 110px 0 60px 0;
}
.form-group {
    position:relative;  

    /*          & + .form-group {
                margin-top: 30px;
              }*/
}
.form-group + .form-group{
    margin-top: 30px;
}
#addNewCard > .form-group + .form-group, #edit_Buyer_Info > .form-group + .form-group{
    margin-top: 20px;
}
.form-label {
    position: absolute;
    left: 0;
    top: 20px;
    color: black;
    background-color: #fff;
    /*z-index: 10;*/
    transition: transform 150ms ease-out, font-size 150ms ease-out;
}
/*
.focused .form-label {
    transform: translateY(-125%);
    font-size: .75em;
}*/

.form-input {
    font-size: 14px; 
    height: 25px;
    background: transparent;
    font-weight: 500;
    position: relative;
    padding: 15px 0px 5px 0;
    width: 100%;
    outline: 0;
    border: 0;
    /*box-shadow: 0 1px 0 0 #e5e5e5;*/
    transition: box-shadow 150ms ease-out;
    border-bottom: 1px solid lightgrey;
    border-radius: 0;

    /*          &:focus {
                box-shadow: 0 2px 0 0 blue;
              }*/
}
.form-input :focus{
    box-shadow: 0 2px 0 0 blue;
}
.form-input.filled {
    /*box-shadow: 0 2px 0 0 lightgreen;*/
}
.custom-form-group{
    border-radius: 10px;
    background: rgb(244,246,248);
    border:1px solid rgb(244,246,248);
}
.custom-form-label{
    background: #fff0 ;
    left:15px;
    bottom:18px;
}
.custom-form-input{
    border:none;
    padding-left:15px;
    padding-top:20px;
    color: rgb(74,74,74);
    font-weight: 400;
}
.retail-view .form-group + .form-group,.retail-view .labelAlignMT2,.retail-view .labelAlignMT2+.form-group,.form-group+.form-group-split.row,.form-group-split.row+.form-group{
    margin-top: 15px;
}
.retail_payment_update .card-content-inner{
    margin-bottom: 70px;
}
.retail-view .form-label,.retail_payment_update .expirySelect{
    color:rgb(74,74,74);
}
.retail-view .focused .form-label{
    color:black;
}
.waiver_container{
    padding: 15px 15px 25px 15px;
}
.error-span-bottom.expiry{
    left: 5px;
    bottom: -5px;
    position: relative;
}
.desc_input_group{
    margin-bottom: 15px;
}
.retail-view .card-listing .card-content h1{
    margin-bottom: 5px;
}
price{
    font-weight:600;
}
price strike{
    font-weight: 500;
}
.toolbar-price price strike{
    font-weight: 400;
}
.toolbar-price .total-text{
    font-weight: 500;
}
.valid_input{
    border-color: rgb(5,129,81);
}
.invalid_input{
    border-color: rgb(255,4,4);
}
.quantity_box{
    width: 75px;
    height: 27px;
    max-height: 35px;
    text-align: center !important;
}
.web-view .quantity_box{
    height: 20px;
    margin-top: 4px;
    text-align: center;
}
.card-listing .card{
    margin:10px;
    max-width: 389.95px;
    /*box-shadow: 0px 1px 2px #d3d3d7;*/
}
.card-listing .card-image{
    height:8.5vw;
    margin-top: 0px !important;
    max-height: 100px;
}
.navbar.new_nav:after{
    background-color: #efefef;;
}
.registration-dropdowns{
    height: 35px; 
}

.custom-modal-content{
    font-family:OpenSans;
    font-size: 16px;
    letter-spacing: inherit;
    font-weight: 500;
}
.custom-modal-green-button{
    min-height: 52px;
    background:rgb(0,137,87);
    border:1px solid rgb(0,137,87);
    color:white;
    width: 100%;
    font-weight:500;
}
.button-text{
    font-family:OpenSans;
    font-size: 15.7px;
    font-weight: 500;
    text-align: center;
}

.modalCreateButton{
    font-size: 16px;
    margin-bottom:10px;
}
.modalresetButton{
    font-size: 16px;
}

.modalVerificationSent{
    color:#627280; 
    font-weight: 100;
    font-size: 18px;
}
.green{
    color:#009a62;
}
.retail_cc_container{
    padding: 15px;
}
.expiryLabel{
    font-size: 12px;
}
.expiryWidth{
    width:75%;
}
.retail-view .expiryWidth{
    width:100%;
}
.retail-view .expiryWidth select{
    width:60%;
}
.expirySelect{
    margin-top: 5px;
}
.retail_checkout .registerbutton-align{
    position: initial;
    width: 100%;
    padding-top: 10px;
}

.nav_button_color{
    color: #00ad68 !important;
}

.date-dropdowns{
    display: inline-flex;
    margin-bottom: 5px;
}
.date-dropdowns > .dob_month,.dob_day,.dob_year{
    width: 115px;
    height: 35px;
}
.carousal_select{
    border: none;
    -webkit-appearance: none;
    font-size: 14px;
    font-weight: 500;
    max-width: 85%;
    padding-right: 20px;
    cursor: pointer;
    color: #000000;
}
.select_icon{
    position: relative;
    right: 22px;
    top: 1px;
    cursor: pointer;
    pointer-events: none;
}
.select_icon img{
    width:15px;
}
.cart-badge{
    background: #00ad68 !important;
    position: relative;
    top: -15px;
    left: -10px;
}
.trolley-cart{
    position: relative;
    top: -18px;
    /*right: -220px;*/
    right: -140px;
}

.card-listing .card-footer{
    max-height: 35px;
    min-height: 1px;
}

.retail-view .product_desc .active-cus.toolbar-button,.retail-view .retail_cart .active-cus.toolbar-button,.retail-view .retail_checkout .active-cus.toolbar-button{
    padding-top: 0px;
    margin-top: 5px;
}
.confirmbox-list{
    list-style:none;
    margin:0;
    padding:0;
}
.confirmbox-list li{
    padding: 5px;
    cursor:pointer;
    font-size: 16px;
}
.confirmbox-list li span{
    position: relative;
    top:-4px;
}
.confirmbox-list li:after{
    display: block;
    content:'';
    border-bottom: 1px solid rgba(165, 165, 165, 0.5);
}
.confirmbox-list li:last-child:after{
    border-bottom: none;
}
.product_desc .mobile-view .card-content-inner{
    padding:5px 5px 30px 5px;
}
.mobile-view.product_desc .card-content h1{
    padding-left: 0;
}
.retail-view .product_desc .mobile-view.custom-toolbar-xlheight{
    height: 80px;
}
.product_desc .mobile-view .toolbar-price{
    padding-top: 10px;
}
.link{
    cursor:pointer;
}
.col-offset-60{
    margin-left: calc((100% - -25px*0.6666666666666667) / 1.6666666666666667);
}
.custom-modal-green-button{
    min-height: 52px;
    background:rgb(0,137,87);
    border:1px solid rgb(0,137,87);
    color:white;
    /*margin:10px 0px;*/
    width: 100%;
    font-weight:500;
}
.custom-modal-white-black-button{
    min-height: 52px;
    width: 100%;
    font-weight:500;
    background:white;
    border:1px solid lightgray;
    color:black;
}
.custom-modal-white-button{
    min-height: 52px;
    width: 100%;
    font-weight:500;
    background:white;
    border:1px solid rgb(0,137,87);
    color:rgb(0,137,87);
}
.cart_confirm .custom-modal-white-button+.custom-modal-green-button{
    margin-top: 10px;
}
.cart_confirm .custom-modal-green-button,.cart_confirm .custom-modal-white-button{
    min-height: 45px;
}
.expiryLabel{
    padding-left: 15px;
}
.selecttag{
    padding-left: 10px;
}
.retail_cart .registerbutton-align .price-section span small{
    font-size: 68%;
}
.navbar-inner.fixed-navbar.navbar-on-center{
    max-width: 1210px;
    margin: auto;
    position: relative;
    /*padding: 0 !important;*/
}
.navbar-inner.fixed-navbar.navbar-on-left{
    display:none;
}
.navbar-inner.fixed-navbar.desc.navbar-on-center{
    max-width: 905px;
}
.navbar-inner.fixed-navbar.list.navbar-on-center{
    max-width: 1180px;
}
/*RETAIL SCREEN CSS ENDS*/

div.retail_search_member input[type="text"]::placeholder { /* Firefox, Chrome, Opera */ 
    color:black;
} 
div.retail_search_member {
    border: 1.5px solid #00ad68;
    border-radius: 5px;
}
/*div.retail_search_member input{
    border: 1px solid green;
    border-radius: 5px;
}*/

.retail_optional_discount{
    padding: 10px 0px;
    border: solid 0.8px #d3d2d2;
}
.retail_optional_discount_div input[type="text"]::placeholder { /* Firefox, Chrome, Opera */ 
    font-family: OpenSans;
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: 0;
    letter-spacing: -0.3px;
    color: #000000;
}
#search_member{
    height: 45px;
    width: 100%;
}
.autocomplete-dropdown.autocomplete-dropdown-in{
    font-family: OpenSans;
    font-size: 11px;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: -0.3px;
    color: #000000;
    /*left:0 !important;*/
}
.retail-txt{
    font-family: OpenSans;
    font-size: 11px;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: -0.3px;
    color: #00ad68;
}

/*NEW CSS FOR REDESIGN*/
body{
    font-family: OpenSans;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #000000;
}
.navbar{
    height:110px;
    background-color: white;
}
.navbar .navbar-inner{
    padding: 0;
    background: white;
}
.with-banner .navbar{
    /* height = topbar + banner =  110 + 30 */
    height:140px;
}
.navbar::after{
    background-color: #efefef;
    /*border: 1px solid #efefef;*/
}
.navbar-inner .left{
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.1px;
    margin-right: 0;
    cursor:pointer;
    z-index: 1;
}
.navbar-inner .left span{
    position: relative;
    top: -3px;
}
.navbar-inner .left img{
    width: 10px;
    padding-top: 5px;
}
.navbar-inner a {
    color:black;
}
.navbar-inner .right img{
    width: 30px;
    cursor:pointer;
}
.navbar-inner.home{
    padding-top: 0px !important;
    padding-bottom: 30px !important;
    max-width: 1180px;
    margin: auto;
    position: initial;
}
.retail_cart .web-view .container,.navbar-inner.fixed-navbar.cart.navbar-on-center{
    max-width:1000px
}
/*HIDE ADMIN BANNER, SEARCH MEMBER, OPTIONAL DICOUNT BOX BY DEFAULT*/
.admin-banner,.search-member, .opt-disc, .home_icon{
    display: none;
}
/* SHOW ADMIN BANNER, SEARCH MEMBER, OPTIONAL DICOUNT BOX FOR ADMIN*/
.with-banner .admin-banner,.with-banner .search-member,.with-banner .opt-disc, .from-pos .home_icon{
    display: block;
}
.navbar .left a + a, .navbar .right a + a{
    margin-left: 0;
}
.logo-center{
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.with-banner .logo-center{
    top: 60px;
}
.admin-banner{
    height: 20px;
    background: #009a61;
    padding: 8px 0 5px 0;
    z-index: 1;
    position: absolute;
    width: 100%;
}
.admin-banner h6{
    font-size: 14px;
    font-weight: 600;
    color: white;
    letter-spacing: 0.9px;
    margin: 0;
}
.footer{
    height: 40px;
    width: 100%;
    box-sizing: border-box;
    font-size: 17px;
    position: absolute;
    margin: 0;
    z-index: 500;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    display:none;
    left:0;
    bottom:0;
    background: #efefef;
}
.footer:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
    height: 1px;
    width: 100%;
    background-color: #efefef;
    display: block;
    z-index: 15;
}
.footer span{
    font-size: 15px;
    color: #627280;
    letter-spacing: 0.3px;
    position:relative;
    top:2px;
}
.footer img{
    position: relative;
    top: 10px;
    width: 80px;
    height: auto;
}
.with-footer .footer{
    display:block;
}
.page-content{
    padding: 20px !important;
    background: white;
    margin-top: 110px;
    /* height = topbar =  110 */
    height: calc(100% - 110px);
}
.with-footer .page-content {
    /* height = topbar + footer =  110 + 40  */
    height: calc(100% - 150px);
}
.with-banner.with-footer .page-content {
    /* height = topbar + adminbanner + footer =  110 + 30 + 40 */
    height: calc(100% - 180px);
    margin-top: 140px;
}
.retail_products .page-content.horz_carousal{
   height: calc(100% - 154px); 
}
.with-footer .retail_products .page-content.horz_carousal{
   height: calc(100% - 194px); 
}
.retail_products .page-content.horz_carousal{
   height: calc(100% - 224px); 
}
 .home_icon{
    padding-top: 0;
}
.with-banner .home_icon{
    padding-top: 30px;
}
.with-banner .home .home_icon, .with-banner .desc .home_icon{
    padding-top: 55px;
}
.checkout .home_icon{
    padding-right: 10px;
}
.trolley{
    padding-top: 10px;
    /*padding-right: 5px;*/
}
.checkout .trolley{
    position: relative;
    right: -5px;
}
.with-banner .trolley {
    padding-top: 40px;
}
.with-banner.with-footer .product_desc.page-content {
    height: calc(100% - 240px);
    margin-top: 140px;
}
.search-member{
   padding: 15px 0 0;
}
.search-member input{
    border-radius: 5px;
    box-shadow: none;
    border: 1px solid #009a61;
    width: calc(100% - 20px);
    padding: 10px;
    font-size: 16px;
}
.search-member input::placeholder{
    opacity:1
}
.opt-disc{
    padding-bottom: 15px;
}
.opt-disc .holder{
    border-radius: 5px;
    border: 1px solid #d3d2d2;
    width: 96%;
    padding: 10px;
}
.opt-disc label{
    font-size: 16px;
}
.opt-disc input{
    box-shadow: none;
    border: none;
    width: 18%;
    font-size: 16px;
    float: right;
}
.with-banner .carousal_container{
    padding:140px 0 0 0;
}
.with-banner .web-view.product_desc{
    margin-top: 0;
}
.with-banner .navbar-inner .left{
    padding-top: 30px;
}
.select-container{
    position: relative;
    z-index: 1;
}
.checkout .card{
    margin: 15px 0;
}
.page-content.horz_carousal{
    margin: 0 !important;
}
.title-bar{
    border-bottom: 1px solid #efefef;
    padding: 15px;
}
.safari .title-bar h1.title {
    font-size: 16.5px !important;
    font-family: 'OpenSans-Bold' !important;
    font-weight: normal !important;
}
.title-bar h1.title {
    font-size: 17px;
    letter-spacing: 0.24px;
    font-weight: 600;
    margin: 0;
}
.checkout .container{
    /*margin: 20px auto;*/
}
.select-card .title-bar{
    border:none;
    padding-left: 10px;
}
/*FORM CSS GOES HERE*/
.form-group{
    position: relative;
}
.form-group + .form-group {
    margin-top: 15px;
}
.form-group input{
    font-size: 14px;
    height: 25px;
    background: transparent;
    position: relative;
    padding: 20px 0px 5px 15px;
    width: 95.5%;
    outline: 0;
    /*box-shadow: 0 1px 0 0 #e5e5e5;*/
    transition: box-shadow 150ms ease-out;
    border-bottom: 1px solid lightgrey;
    border-radius: 0;
    border: none;
    color: rgb(74,74,74);
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.form-group label{
    position: absolute;
    top: 20px;
    z-index: 10;
    transition: transform 150ms ease-out, font-size 150ms ease-out;
    background: #fff0;
    left: 15px;
    bottom: 18px;
    color: rgb(74,74,74);
    pointer-events: none;
    font-size: 16px;
}
.focused label{
    transform: translateY(-125%);
    font-size: .90em;
}
.expiryLabel{
    font-size: 12px;
    padding-left:15px;
    border-radius: 0;
    background: white;
    border: none;
}
.form-group,.form-group select{
    border-radius: 10px;
    background: rgb(244,246,248);
    border: 1px solid rgb(244,246,248);
}
.form-group select{
    color:rgb(74,74,74);
    font-size: 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
}
 .error-span-bottom{
    color: red !important;
    font-size: 12px !important;
    margin: 0 !important;
    position: absolute;
    right: 0;
    bottom: 0px;
}
.paymentselect{
    width: 100%;
    padding-left: 10px;
    height: 45px;
    margin: 0;
    font-size: 14px;
}
.expiryLabel+br+.paymentselect{
    margin-top: 5px;
}
.form-group .ip-alone{
    padding: 10px 10px 10px 15px;
}
.misc_charge_ip{
    font-size: 18px;
    width: 100%;
    text-align: center !important;
    border: none;
    color: #5f5f5f;
}
.form-group.white-bg{
    position: initial;
    border-radius: 0;
    background: white;
    border: none;
}
.form-group.white-bg label.expiryLabel{
    position: initial;
    padding-left: 16px;
}
.form-group.expiryWidth label{
    font-size: 12px;
}
.p-relative{
    position:relative;
}
.p-relative .dropdown, .dropdown1, .dropdown2{
    position: absolute;
    top: 5px;
    left: -25px;
    width: 15px;
    pointer-events: none;
}
.dropdown1{
    top: 10px;
    width: 12px;
}
.dropdown2{
    top: 0px;
    left: -25px;
    width: 12px;
    transform: rotateX(180deg);
}

/*NEW CSS DROPDOWN*/
.dropdown, .dropdown1, .dropdown2{
    position: absolute;
    top: 20px;
    left: auto;
    width: 15px;
    right: 10px;
    pointer-events: none;
}
.dropdown1{
    top: 30px;
    width: 12px;
}
.dropdown2{
    top: 20px;
    /*left: -22px;*/
    width: 12px;
    transform: rotateX(180deg);
}



.empty-back{
    width: 50.5167px;
}
.ph-text{
    position: absolute;
    top: 13px;
    pointer-events: none;
    left: 15px;
}
.search-lens{
    width: 20px;
}
.search-txt{
    position: relative;
    top: -5px;
    left: 10px;
    font-size: 16px;
    font-weight: 500;
}
.expiryWidth{
    width: 100%;
}
.selecttag{
    margin-top: 5px;
    width: 100%;
    height: 45px;
    padding-left: 15px;
}
.opt-disc-container{
    padding:15px;
}
.with-banner.with-footer .discount-container.mobile-view {
   bottom: 5px;
}
.desc-container{
    margin-top: 10px;
    width: 100%;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
.desc-container p{
   margin-top: 10px;
/*   max-height: 150px;
   overflow: auto;*/
}
.safari .desc-container p,.safari .waiver-text{
    /* Check if font-weight is bold and exclude a font family */
    :is([style*="font-weight: bold"]:not([style*="font-family"])){
        font-family: 'OpenSans-Bold' !important;
        font-weight: normal !important;
    }
}
.web-cart{
    position: absolute;
    left: 48%;
    top: 75px;
}
.checkout .cart-badge{
    left:0;
}
.desc .page-content{
    margin-top: 0 !important;
    height: calc(100% - 160px);
}
.with-footer .desc .page-content{
    height: calc(100% - 200px)
}
.checkout .total-text,.checkout price{
    font-size: 18px;
}
.waiver-text{
    font-size: 14px;
    font-weight: 100;
    max-height:92px;
    overflow-y:auto;
}

/*Stripe CSS*/

.StripeElement {
    background-color: white;
    height: 40px;
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid transparent;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
    border-radius: 5px;
    background: rgb(244,246,248);
}
.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
  border-color: #fa755a;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}
/* The Payment Element renders a taller, multi-row layout - card number, then expiration
   date and security code on their own row, plus Link's inline row - than the single-line
   Card Element the shared .StripeElement 40px height was sized for. Override it here so the
   box grows to fit its content instead of clipping everything below the first row. An ID
   beats the class, so no !important. Mirrors t/css/custom.css and m/css/custom.css. */
#stripe-card-element {
    height: auto;
    min-height: 40px;
    margin-bottom: 10px;
}
#stripe-card-element iframe{
    position: relative;
    top: 10px;
    z-index: 9999;
}
.with-banner.from-pos.with-footer .cancel_shipping_details{
    top: 15px;
    position: relative;
}
/*DISCOUNT SECTION FOOTER CONTENTS*/
.bottom-row{
    width: 100% !important;
    position: relative !important;
    bottom: 137px;
    z-index: 501; 
    background: white;
}
.cart-ckout-row{
    box-shadow: none;
}
.bottom-row .disc-sec{
    padding-right: 20px;
}
.disc-sec.disc-row, .sf-disc.disc-sec.disc-row + .mf-disc.disc-sec.disc-row{
    padding-top: 7px;
}
.disc-sec.disc-row span{
    position: relative;
    top: 2px;
}
.bordered-input{
    height: 30px;
    width: 100%;
    border-radius: 5px;
    box-shadow: none;
    text-align: center !important;
    color: rgb(155,155,155);
    border-top: 1px solid rgb(211,210,210);
    border-bottom: 1px solid rgb(211,210,210);
    border-right: 1px solid rgb(211,210,210);
    border-left: 1px solid rgb(211,210,210);
}
input[type="text"].retail-discount-box::-ms-input-placeholder, input[type="text"].retail-discount-box::placeholder {
    color: black;
}
input[type="text"].retail-discount-box::-webkit-input-placeholder {
    color: black;
}
.retail-discount-box{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 1px;
    color:black;
}

.discount-apply{
    width: 95%;
    height:40px;
    /*height: 40px;    HEIGHT VARIES FOR ANDROID - 43px */
    background: #009a61;
    color:white;
    top:0;
    left:10px !important;
    border: 1px solid #009a61;
}

.discount-apply[disabled]{
    background: #d3d2d2;
    color: white;
    border-color: #d3d2d2;
}
.discount-apply:active[disabled]{
    background: #009a61;
    border-color: #808080;
}
.stripeCheckoutDecideModal{
    width:330px!important;
    background: white;
    margin-left: -150px;
}
.stripeCheckoutDecideModal .modal-inner{
    padding:0px;
}
.stripeCheckoutDecideModal .modalVerification {
    padding :15px 25px;
    font-size: 16px;
}
.stripeCheckoutDecideModal button{
    border-radius: 0px;
    font-size: 17px;
}
.stripeCheckoutDecideModal .price-section{
    background: #f7f7f8;
    padding: 10px 9px;
}
.stripeCheckoutDecideModal .price-section span small{
    font-size: 13px;
}
.stripeCheckoutDecideModal .processing_fee_span{
    position: relative;
    top: 5px;
}
.stripeCheckoutDecideModal .price-section price {
    font-weight: 700;
}
.modal.buyer_name_decideText {
    width: 300px;
    border-radius: 10px;
}
.buyer_name_decideText .modal-inner{
    padding:0px;
    background: white;
    border-radius:10px;
}
.buyer_name_decideText button{
     border-radius: 0px;
    border: solid 1px #dfdfdf;
}
.buyer_name_decideText .custom-modal-white-button{
    background: white;
    color: rgb(0,137,87);
}

.modal{
    width: var(--modal-width);
    max-height: var(--modal-maxheight);
    border-radius: var(--modal-borderradius);
    font-size: var(--modal-font);
    background: white;
    margin: 0!important;
    transform: translate(-50%,-50%) !important;
}
.modal .modal-title{
    font-family: OpenSans-Regular !important;
    font-size: var(--modal-font);
    line-height: normal;
}
.modal .modal-inner{
    width: 80%;
    padding: 10%;
    font-family: OpenSans-Regular !important;
    font-size: var(--modal-font);
    line-height: normal;
    letter-spacing: 0px;
    margin: 0px;
    overflow-y: auto;
}
.modal-inner::after,.modal-buttons-vertical .modal-button::after {
    height: 0px;
}
.modal-buttons-1 .modal-button{
    border-top: 1px solid #E5E5E5!important;
     padding: var( --modal-padding); /* calculating 8% of the modal width */
    line-height: 0.5;
    background: #FFFFFF;
    color: #009A61 !important;
    height: var(--modal-button);
    width: 100%;
    font-family: OpenSans-SemiBold !important;
    margin:0px;
    font-size: var(--modal-font);
    cursor: pointer;
}
.modal-buttons{
     height: var(--modal-button);
}

.modal.modal-no-buttons{
    width: 270px;
    height: auto;
    font-family: OpenSans;
    max-height: 100%;
}
.modal.modal-no-buttons .modal-inner{
    padding: 0px;
    width: 100%;
    font-family: OpenSans;
    overflow: hidden;
    max-height: inherit;
}
.modal.modal-no-buttons .modal-inner::after {
    height: 2px;
}
/*.modal.modal-in{
   transition-delay: 600ms;
   transition-duration: 600ms;  
}*/
/*GLOBAL MODAL CSS*/
.global-modal,.modal.modal-no-buttons.global-modal{
    width: var(--modal-width);
    max-height: var(--modal-maxheight);
    border-radius: var(--modal-borderradius);
    font-size: var(--modal-font);
    margin: 0!important;
    transform: translate(-50%,-50%) !important;
    background-color: transparent;
}

.global-modal .modal-inner,.modal.modal-no-buttons.global-modal .modal-inner{
   padding: 0px;
   width: 100%;
   overflow-y: hidden!important;
}
.global-modal .modal-action{
    border: 0;
    padding: 0;
    background-color: white;
    border-radius: 0 0 10px 10px;
}
.global-modal .modal-action button.green-button,.modal-buttons-vertical .modal-button .green-button{
   background: #009A61;
   color: #FFFFFF;
}
.global-modal .white-button{
   background: #FFFFFF;
   color: #777777;
}
.global-modal .modal-action button{
    padding: var( --modal-padding); /* calculating 8% of the modal width */
    line-height: 0;
    height: var(--modal-button); /* calculating 20% of the modal width */
    width: 100%;
    font-family: OpenSans-SemiBold !important;
    margin:0px;
    font-size: var(--modal-font);
    border: 0px;
    cursor: pointer;
    outline: 0;
}

.global-modal .modal-body{
  width: 80%;
  padding: 10%;
  font-family: OpenSans-Regular !important;
  line-height: normal;
  letter-spacing: 0px;
   margin: 0px;
   font-size: var(--modal-font);
   overflow-y: auto;
}
.global-modal .modal-action button:last-child{
    background: #FFFFFF;
    color: #777777;
    border: 0px;
}
.global-modal .border{
    border: 1px solid #E5E5E5;
}

.global-modal p{
    /*font-size: 16px;*/
    margin: 0px;
    font-size: var(--modal-font);
}

.global-modal .green-text{
   background: #FFFFFF;
   color: #009A61 !important;
}
.global-modal .border_top{
    border-top: 1px solid #E5E5E5!important;
}
.global-modal .modal-body button[disabled]{
   opacity: 0.3;
}

.no-padding-bottom{
    padding-bottom:0px;
}

.global-modal .modal-body.single-btn,.modal .modal-inner{
    max-height: calc((var(--modal-maxheight)) - (var(--modal-button)) - (2*var(--modal-padding)));
}
.global-modal .modal-body.two-btn{
    max-height: calc((var(--modal-maxheight)) - (2 * var(--modal-button)) - (2*var(--modal-padding)));
}
.global-modal .modal-body.three-btn{
    max-height: calc((var(--modal-maxheight)) - (3 *var(--modal-button)) - (2*var(--modal-padding)));
}
.modal-button:first-child,.modal-button:last-child,.modal-button:first-child:last-child,.modal .modal-inner{
    border-radius: 0;
}
.modal-overlay.modal-overlay-visible{
    visibility: visible;
    opacity: 0.6;
    background: black;
}
.global-modal.only-button .modal-inner{
    background-color: transparent;
}
.modal-buttons-2 {
    height: auto;
    border-top: 1px solid #E5E5E5!important;
}
.Medium_desktop_modal{
    --modal-font : calc(var(--screen-width) / 100 * 0.9); 
}
.Small_desktop_modal{
    --modal-font : calc(var(--screen-width) / 100 * 1); 
}
.Big_tablet_modal{
    --modal-width: 30vw;
    --modal-font : calc(30vw / 100 * 4.5); 
    --modal-button: calc(30vw / 100 * 20);
    --modal-padding : calc(30vw / 100 * 8);
    --modal-maxheight : 80vh; 
}
.Medium_tablet_modal{
    --modal-width: 35vw;
    --modal-font : calc(35vw / 100 * 4.5); 
    --modal-button: calc(35vw / 100 * 20);
    --modal-padding : calc(35vw / 100 * 8);
    --modal-maxheight : 80vh; 
}
.Tablet_modal{
    --modal-width: 50vw;
    --modal-font : calc(50vw / 100 * 4.5); 
    --modal-button: calc(50vw / 100 * 20);
    --modal-padding : calc(50vw / 100 * 8);
    --modal-maxheight : 80vh; 
}
.Mobile_modal{
    --modal-width: 80vw;
    --modal-font : calc(80vw / 100 * 5); 
    --modal-button: calc(80vw / 100 * 20);
    --modal-padding : calc(80vw / 100 * 8);
    --modal-maxheight : 80vh; 
    --modal-borderradius : calc(80vw / 100 * 3);
}
/*GLOBAL MODAL CSS*/

/* MEDIA QUERIES STARTS*/
@media only screen and (max-width:1200px){
    .navbar-inner.fixed-navbar, .navbar-inner.fixed-navbar.navbar-on-center{
        padding: 0 10px;
    }
    .page-content{
        padding: 10px !important;
    }
    .product_desc .page-content{
        padding: 20px !important;
    }
    .checkout .container{
        max-width: 90%;
        margin: auto;
    }
    .cart .page-content{
        padding: 20px !important;
    }
/*    :root{
       --modal-width: calc(var(--screen-width) / 100 * 50); 
    }*/
}
@media only screen and (max-width:1350px){
    .event-des-height .card-header {
        /*min-height: 14vw;*/
    }
    .event-des-imageheight .card-header {
        min-height: 24vw;
    }
    .card-right {
        min-height: 24vw;
    }
    .mobile-view{
        display:none;
    }
    .web-view{
        display:block;
    }
/*    .global-modal,.modal.modal-no-buttons.global-modal,.modal,.global-modal .modal-action button,.modal-buttons-1 .modal-button,.global-modal p,.global-modal .modal-body,.modal .modal-inner,.modal .modal-title{
        font-size: calc(var(--screen-width) / 100 * 1.2);
    }*/
}

@media only screen and (max-width:1100px){
    .navbar-inner.fixed-navbar, .navbar-inner.fixed-navbar.navbar-on-center{
        padding: 0 10px;
    }
    .event-des-height .card-header {
        /*min-height: 14vw;*/
    }
    .event-des-imageheight .card-header {
        min-height: 27vw;
    }
    .card-right {
        min-height: 27vw;
    }
    .cus-card{
        margin-top:30px;      
    }
    .container{
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        /*         padding-bottom: 24px;
                 padding-top: 24px;*/
    }
    .navbar-cus-height {
        height: 100px;
    }
    .mobile-view{
        display:none;
    }
    .web-view{
        display:block;
    }
    .checkout .container {
        padding-top:0;
        padding-bottom:0;
    }
}
@media only screen and (max-width:900px){
    .checkout .row.split_view > .col-50 {
        width: 100%;
    }
    .navbar .navbar-inner.fixed-navbar{
        padding: 0 10px;
    }
   
}
@media only screen and (max-width:767px){
    .labelAlignMT2 > .col-100.tablet-50:nth-child(2), .mob-form-group-align{
        margin-top: 15px;
    }
}
@media only screen and (max-width:768px){
    .navbar{
        height: 90px;
    }
    .with-banner .navbar{
        height: 120px;
    }
    .page-content{
        margin-top: 90px;
        height: calc(100% - 90px);
        padding:10px !important;
    }
    .desc .page-content{
        margin-top: 0 !important;
        height: calc(100% - 215px);
    }
    .cart .page-content{
        padding: 0px !important;
        height: calc(100% - 255px);
    }
    .checkout .page-content{
         height: calc(100% - 190px);
    }
    .with-footer .page-content{
        height: calc(100% - 130px);
    }
    .with-banner.with-footer .page-content {
        margin-top: 120px;
        height: calc(100% - 160px);
    }
    .retail_products .page-content.horz_carousal{
        height: calc(100% - 134px); 
    }
    .with-footer .retail_products .page-content.horz_carousal{
        height: calc(100% - 174px); 
    }
    .retail_products .page-content.horz_carousal{
        height: calc(100% - 204px); 
    }
    .with-footer .checkout .page-content{
        /*INCLUDES TOOLBAR HEIGHT*/
        height: calc(100% - 230px);
    }
    .with-banner.with-footer .checkout .page-content{
        /*INCLUDES TOOLBAR HEIGHT*/
        height: calc(100% - 260px);
    }
    .with-banner .desc .page-content{
        margin-top: 0 !important;
        height: calc(100% - 255px);
    }
    .with-banner .cart .page-content{
        height: calc(100% - 255px);
    }
    .col-33-cardlisting{
        width:50%!important;
    }
    .event-des-height .card-header {
        /*min-height: 40vw;*/
    }
    .event-des-imageheight .card-header {
        min-height: 40vw;
    }
    .cus-card{
        margin-top: 20px;
    }
    .mobile-view{
        display:block;
    } 
    .web-view,.mobile-hide{
        display:none;
    }
    .toolbar-price .active-cus.toolbar-button {
        position: absolute;
        bottom: 0;
        max-width: 100%;
    }
    .toolbar-price{
        font-size: 16px;
    }
    .navbar-inner.home {
        padding: 15px !important;
    }
    .carousal_container{
        padding:90px 0 0 0;
    }
    .with-banner .carousal_container{
        padding:120px 0 0 0;
    }
    .with-footer .desc .page-content {
        height: calc(100% - 258px);
    }
    .with-footer .cart .page-content {
        height: calc(100% - 230px);
    }
    .card-listing .card-image {
        height: 14.5vw;
    }
    .with-footer .toolbar{
        bottom: 40px;
    }
    .checkout .row.split_view > .col-50{
        /*width: 100%;*/
    }
    .row.labelAlignMT2 .col-50+.col-50{
        /*margin-top:15px;*/
    }
    .checkout .container{
        max-width: 100%;
        margin: 0 0 15px 0;
    }
    .search-member input {
        margin-bottom: 10px;
    }
    .with-banner.with-footer .desc .page-content{
        margin-top: 0;
        padding-top: 10px !important;
        height: calc(100% - 280px);
    }
    .with-banner.with-footer .cart .page-content {
        height: calc(100% - 325px);
        padding-bottom: 10px !important;
    }
    .with-banner  .home .home_icon, .with-banner .desc .home_icon{
        padding-right: 10px;
        padding-top: 35px;
    }
    .with-banner  .home .trolley {
        padding-top: 45px;
    }
    .home .cart-badge{
        /*margin-right: -15px !important;*/
    }
    .navbar-inner .right img{
        width: 25px;
    }
    .ph-text{
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    /*.has-cent-pro - has century product*/
    .has-cent-pro.checkout .page-content {
        height: calc(100% - 220px);

    }
    .has-cent-pro.cart .page-content{
        height: calc(100% - 280px);
        padding-bottom: 10px !important;
    }
    
    .with-footer .has-cent-pro.cart .page-content{
        height: calc(100% - 321px);
        padding-bottom: 10px !important;
    }
     
    .with-banner.with-footer .has-cent-pro.cart .page-content {
        height: calc(100% - 350px);
        padding-bottom: 10px !important;
    }
    .has-cent-pro .custom-toolbar-xxlheight {
        height: 130px;
    }
    .has-cent-pro .discount-container.mobile-view {
        bottom: 15px !important;
    }
    .with-banner.with-footer .has-cent-pro.checkout .page-content {
        height: calc(100% - 290px);
    }
    .with-footer .has-cent-pro.checkout .page-content{
        /*INCLUDES TOOLBAR HEIGHT*/
        height: calc(100% - 260px);
    }
    .discount-container{
        padding: 10px 0 0 0;
    }
    .discount-apply{
        height: 34px;
    }
    .bottom-row{
        bottom: 155px;
        z-index:500;
    }
    .bottom-row .cart-ckout-row{
        padding:15px;
    }
    .cart-page.zerocost.with-disc .bottom-row,has-cent-oneline.cart-page.zerocost.with-disc .bottom-row{
        bottom: 135px;
        z-index: 500;
    }
    .bothdisc-cart .bottom-row{
      bottom: 190px;  
    }
    .bothdisc-cart.zerocost .bottom-row{
        bottom: 201px; 
    }
    .centlabel{
        width:auto;
        padding-left: 0;
    }
}
@media only screen and (max-width:641px){
    .navbar {
        height: 60px;
    }
    .page-content{
        padding: 5px 10px !important;
        margin-top: 60px;
        height: calc(100% - 60px);
    }
    .with-banner .navbar {
        height: 90px;
    }
    .with-footer .page-content{
        margin-top: 60px;
        height: calc(100% - 100px);
    }
    .with-banner.with-footer .page-content{
        margin-top: 90px;
        height: calc(100% - 130px);
    }
    .retail_products .page-content.horz_carousal{
        height: calc(100% - 110px); 
    }
    .with-footer .retail_products .page-content.horz_carousal{
        height: calc(100% - 150px); 
    }
    .retail_products .page-content.horz_carousal{
        height: calc(100% - 180px); 
    }
   .checkout .page-content {
        height: calc(100% - 160px);
        padding: 10px !important;
    }
    .with-footer .checkout .page-content {
        height: calc(100% - 190px);
    }
    .with-banner.with-footer .checkout .page-content {
        height: calc(100% - 230px);
    }
    .checkout .container{
        padding: 0 0 10px 0;
        max-width:100%
    }
    .checkout .card-content-inner{
        padding: 15px 0 !important;
    }
    .container{
        max-width: 100%;
        margin-bottom: 10px;
    }
    .title-bar{
        margin: auto -10px;
    }
    .title-bar::before{
        display: block;
        content:'';
        border-bottom: 1px solid #efefef;
        margin: 15px -15px 15px -15px;
    }
    .select-card .title-bar{
        padding-left: 10px;
    }
    .desc .page-content {
        padding-top: 20px !important;
        height: calc(100% - 185px);
    }
    .with-footer .desc .page-content {
        height: calc(100% - 228px);
    }
    .with-banner.with-footer .desc .page-content {
        height: calc(100% - 260px);
    }
    .checkout .card{
        box-shadow: none;
        margin: 0;
    }
    .search-member{
        padding: 0;
    }
    .carousal_container{
        padding: 60px 0 0 0;
    }
    .with-banner .carousal_container {
        padding: 90px 0 0 0;
    }
    .cart .page-content {
        height: calc(100% - 225px);
    }
    .with-footer .cart .page-content {
        height: calc(100% - 265px);
    }
    .with-banner.with-footer .cart .page-content {
        height: calc(100% - 295px);
        padding: 0 !important;
    }
    .navbar-inner.fixed-navbar{
        padding: 0 15px;
        max-width: 100%;
    }
    .logo-cover {
        height: 36px;
        /*width: 130px;*/
        padding-top: 8px;
    }
    .with-banner .logo-cover{
        padding-top: 6px;
    }
    .with-banner .logo-center {
        top: 37px;
    }
    .navbar-inner .right img{
        width: 25px;
    }
    .with-banner .navbar-inner .right img{
        width: 25px;
    }
    .with-banner .home_icon{
        padding-top: 30px;
    }
    .with-banner .trolley{
        padding-top: 40px;
    }
    .card-listing .card{
        max-width: 100%;
    }
    .form-group label{
        font-size: 14px;
    }
    .focused label{
        font-size: .75em;
    }
    .checkout .total-text,.checkout price{
        font-size: 16px;
    }
    .form-group select{
        font-size: 14px;
        padding-left: 10px;
    }
    
    .has-cent-pro .custom-toolbar-xxlheight {
        height: 140px;
    }
    .has-cent-pro .discount-container.mobile-view {
        bottom: 10px;
    }
    .has-cent-pro.cart .page-content{
        height: calc(100% - 260px);
    }
    .with-footer .has-cent-pro.cart .page-content {
        height: calc(100% - 305px);
    }
    .with-banner.with-footer .has-cent-pro.cart .page-content {
        height: calc(100% - 335px);
        padding: 0 !important;
    }
    .has-cent-pro.checkout .page-content {
        height: calc(100% - 200px);
        padding: 10px !important;
    }
    .with-footer .has-cent-pro.checkout .page-content {
        height: calc(100% - 230px);
    }
    .with-banner.with-footer .has-cent-pro.checkout .page-content {
        height: calc(100% - 270px);
    }
    .has-cent-oneline.has-cent-pro .custom-toolbar-xxlheight {
        height: 120px;
    }
    .has-cent-oneline.has-cent-pro.cart .page-content {
        height: calc(100% - 240px);
    }
    .with-banner.with-footer .has-cent-oneline.has-cent-pro.cart .page-content {
        height: calc(100% - 310px);
    }
    .with-footer .has-cent-oneline.has-cent-pro.cart .page-content{
        /*INCLUDES TOOLBAR HEIGHT*/
        height: calc(100% - 280px);
    }
    .has-cent-oneline.has-cent-pro.checkout .page-content {
        height: calc(100% - 185px);
    }
    .with-banner.with-footer .has-cent-oneline.has-cent-pro.checkout .page-content {
        height: calc(100% - 255px);
    }
    .with-footer .has-cent-oneline.has-cent-pro.checkout .page-content{
        /*INCLUDES TOOLBAR HEIGHT*/
       height: calc(100% - 225px);
    }
    .retail_payment_update.shipping_details .card-content-inner{
        padding:0;
    }
/*    .global-modal,.modal,.modal.modal-no-buttons.global-modal{
        max-height: 80vh;
        border-radius: 10px;
        width: 80vw;
        padding: 0;
        margin: 0!important;
        transform: translate(-50%,-50%) !important;
        border-radius: calc(80vw / 100 * 3);
        font-size: calc(80vw / 100 * 5);
    }
    .global-modal .modal-action button,.modal-buttons-1 .modal-button{
        height: calc(80vw / 100 * 20);
        padding: calc(80vw / 100 * 8);
        font-size: calc(80vw / 100 * 5);
        cursor: pointer;
    }
    .global-modal p,.global-modal .modal-body,.modal .modal-inner,.modal .modal-title{
        font-size: calc(80vw / 100 * 5);
    }
    .global-modal .modal-body.single-btn,.modal .modal-inner{
        max-height: calc(80vh - (80vw / 100 * 20) - (2 * (80vw / 100 * 10)));
    }
    .global-modal .modal-body.two-btn{
        max-height: calc(80vh - (2 * (80vw / 100 * 20)) - (2 * (80vw / 100 * 10)));
    }
    .global-modal .modal-body.three-btn{
        max-height: calc(80vh - (3 * (80vw / 100 * 20)) - (2 * (80vw / 100 * 10)));
    }
    .modal-buttons{
        height: calc(80vw / 100 * 20);
    }
    .modal-buttons-2 {
        height: auto;
    }*/
}

@media only screen and (max-width:481px){
    .col-33-cardlisting{
        width:100%!important;
    }
    .card-listing .card{
        margin:5px auto;
    }
    .event-des-height .card-header {
        /*min-height: 40vw;*/
    }
    .event-des-imageheight .card-header {
        min-height: 47vw;
    }
    .cus-card{
        margin-top: 5px;
    }
    .mobile-view{
        display:block;
    } 
    .web-view{
        display:none;
    }    
    .web-calender{
        padding:0; 
        margin-right:-15px; 
        width:auto; 
    }
    .new_nav .navbar-inner{
        padding: 15px;
    }
    .retail-view .page-content{
        padding:60px 10px 60px 10px;
    }
    .page-content.horz_carousal{
        padding-top: 0px;
    }
    .mobile-view.page-content{
        padding-top: 15px;
    }
    .retail-view .checkout .page-content{
        padding: 60px 0 60px 0;
    }
    .card-listing .card-image{
        height: 17vh;
    }
    .retail-view .card-content h1 {
        font-size: 14px;
        font-weight: 600;
    }
    .card-listing price {
        font-weight: 500;
        font-size: 12px;
    }
    .toolbar-price .active-cus.toolbar-button {
        margin-top: 0px;
    }
    .price-section small{

    }
    .toolbar-price {
        padding-top: 5px;
        font-size: 14px;
    }
    .carousal_select{
        max-width: 75%;
        color: #000000;
    }
    .retail-view .expiryWidth select{
        width:70%;
    }
    .toolbar-price span small{
        font-size: 75%;
    }
    .navbar-inner.fixed-navbar.navbar-on-center,.navbar-inner.fixed-navbar.desc.navbar-on-center,.navbar-inner.fixed-navbar.list.navbar-on-center{
        max-width: none;
        margin: auto;
        position: initial;
        padding: 10px !important;
    }
    .with-banner .navbar {
        height: 90px;
    }
    .with-banner.with-footer .page-content {
        margin-top: 90px;
        height: calc(100% - 130px);
    }
    .with-banner .carousal_container {
        padding: 90px 0 0 0;
    }
    .with-banner.with-footer .product_desc .page-content {
        height: calc(100% - 255px);
    }
    .search-member{
        padding-top: 5px;
    }
    .title-bar{
        margin: auto -10px;
        padding: 0 15px 10px;
    }
    .title-bar h1.title{
        font-size: 16px;
    }
    .form-group-split > .col-50{
        width: 100%;
        margin-bottom: 15px;
    }
    #shipping_details .col-50{
        width: 48%;
        margin-bottom: 0px;
    }
    .retail_payment_update .card-content-inner{
        margin-bottom: 0px;
    }
}

@media only screen and (max-width: 410px) {
    .date-dropdowns > .dob_month,.dob_day,.dob_year{
        width: 90px;
        height: 35px;
    }
    .card-listing .card{
        max-width: 100%;
    }
    .stripeCheckoutDecideModal{
        width:300px!important;
    }
}

.custom_dropdown {
  position: relative;
  display: inline-block;
}

.custom-dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9; 
  box-shadow: 0 2px 7px 0 rgba(110, 110, 110, 0.5);
  z-index: 10000;
  width: 100%;
  border-radius: 7px;
  background-color: #ffffff; 
}

.custom-dropdown-content li{
  font-family: OpenSans;
  font-size: 14px;
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.53;
  letter-spacing: normal;
  color: #4a4a4a;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 1px;
  padding-bottom: 1px;
  list-style: none;
}
.custom-dropdown-content li:hover{ 
    background: #dfdcdc;
}
.custom-dropdown-heading:hover{
    background: white !important;
} 
/*.publicurl-normal-view{
    width: 33.33%;
}
.publicurl-two-view{
    width: 50.00%;
}
.publicurl-one-view{
    width: 100%;
}*/
/* MEDIA QUERIES ENDS*/

/* ===================== MSA-356: Apple Pay / Google Pay (retail checkout) =====================
   Everything below is appended at the end of the file on purpose: these rules have to beat
   earlier ones of equal specificity (.custom-toolbar-xxlheight's fixed height, the mobile media
   query's absolutely-positioned Place order button), and source order is what does that without
   reaching for !important. */

/* The wallet mount divs get Stripe's .StripeElement class, which above is styled for the CARD
   element: a 40px-tall, 6px/12px-padded, rounded, shaded input box. Applied to an Apple Pay /
   Google Pay button that is wrong on every count - it insets the button ~12px per side, clips it
   to 40px when the rendered button is ~51px, and draws an input-style background behind a solid
   black button. Reset to a plain, full-width, self-sizing container. IDs beat the .StripeElement
   class, so no !important is needed. Same defect class as the #stripe-card-element override
   further up, on a different container - tests/RetailWalletCheckoutTest.php pins both. */
#stripe-wallet-checkout-element-desktop,
#stripe-wallet-checkout-element-mobile {
    background: none;
    background-color: transparent;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* The wallet error slots carry an inline style="margin-top:10px" so a real error is spaced off
   the button - but that margin applies even when the slot is empty (height 0), adding dead space
   between the wallet button and Place order. :empty matches only when the node has no children
   AND no text, so a rendered error still gets its spacing. !important is needed to beat the
   inline style. */
#stripe-wallet-checkout-errors-desktop:empty,
#stripe-wallet-checkout-errors-mobile:empty {
    margin-top: 0 !important;
}

/* The row itself. No background of its own - it sits in the same payment group as Place order,
   not as a separate floating strip - and no horizontal padding, so the wallet button runs edge to
   edge exactly like the full-width Place order button.
   THE 14px BOTTOM PADDING IS THE VISIBLE GAP, and the value is /m's. Verified on a real iPhone
   against cp-dev on 2026-09-28: /m showed clear daylight between the wallet button and Pay Now,
   this checkout showed none.
   Stripe's Express Checkout iframe is ~51px tall but draws only a ~38px button inside it, and
   carries an inline margin:-4px that makes it overhang this container, so some of whatever is
   set here is swallowed before any daylight appears - hence a value this large for a modest gap.
   An earlier revision here used `padding: 6px 0 0` with `margin-bottom: -8px`, copied from
   /t, whose own comment states that combination was "measured live" and "reads as ~14px on
   screen". On a real device it does not: /t, /r and /cs all rendered the wallet button flush
   against the submit button, while /m on 14px showed clear daylight. /t now carries this same
   value too, so all four checkouts agree. */
.retail-checkout-wallet-buttons {
    padding: 6px 0 14px;
    box-sizing: border-box;
}

/* The mobile checkout footer sizes to its content (total, breakdown, the Century shipping line,
   the ToS/privacy notice, the optional wallet button, Place order) instead of
   .custom-toolbar-xxlheight's fixed 100px, which was sized before the wallet button existed and
   clipped everything below the first row. max-height/overflow-y are a backstop for a very small
   viewport: a footer taller than the screen would otherwise push the whole form out of reach.
   NOTE the class sits on the toolbar itself, not on a new wrapper. framework7 gives
   `.page > .toolbar` position:absolute;bottom:0, and the POS clearance for the "Powered by
   MyStudio" bar (`.with-footer .toolbar { bottom: 40px }`, in the mobile media query above) is
   written against that same element. Moving the class to a wrapper would leave that offset
   painting the toolbar 40px outside its box - the bug /t had to fix after introducing one. */
.retail-checkout-footer-mobile {
    height: auto;
    padding-bottom: 8px;
    max-height: 45vh;
    overflow-y: auto;
}

/* Place order is pinned position:absolute;bottom:0 by the mobile media query above. That was
   correct while this toolbar had a fixed 100px height - the button sat at the bottom of a box
   sized to leave room for it. Now the toolbar auto-sizes to its content, so an absolutely
   positioned button overlays whatever the last row happens to be (the ToS/privacy line when no
   wallet is available, the wallet button when there is one). Put it back in normal flow so every
   row simply stacks. `bottom` stops applying at all once position is static.

   THIS RULE WINS ON SOURCE ORDER, NOT SPECIFICITY. The pinning rule is
   `.toolbar-price .active-cus.toolbar-button` in the mobile media query above, which is three
   classes - exactly the same specificity as this selector, since a media query adds none. The
   only reason this one applies is that it comes later in the file, so keep it below that media
   query: moving it above, or reintroducing the pinning declarations after it, silently restores
   the overlap without changing either selector. */
.retail-checkout-footer-mobile .active-cus.toolbar-button {
    position: static;
    bottom: auto;
    left: auto;
}