/*
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';
    src: url("../../commonLibrary/fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.ttf");
}
@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");
} 
*:not(i,.global-modal *){
    font-family: 'OpenSans', sans-serif;
}
/* font weight adjustment for safari browser */
.safari h3,
.safari b,
.safari .title-bar h1.title,
.safari .navbar-inner .left span,
.safari price,
.safari .admin-banner h6,
.safari h2{
     font-family: 'OpenSans-Bold' !important;
     font-weight: normal !important;
}
.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;
    }
}

.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;
}


.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;
}

/* Takes over .page > .toolbar's position:absolute/bottom:0 anchoring, since nesting the toolbar a
   level deeper (for the wallet button above Pay Now) breaks that selector match. No `display` here
   - .mobile-view on this element handles show/hide. Mirrors /t's .trial-checkout-footer-mobile. */
.membership-checkout-footer-mobile {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 500;

    /* Wallet error slots carry inline margin-top:10px even when empty - collapse it unless there's
       a message. */
    #stripe-wallet-checkout-errors-mobile:empty,
    #stripe-wallet-checkout-errors-desktop:empty {
        margin-top: 0 !important;
    }

    /* Safety cap, not a normal operating limit - scrolls instead of clipping Pay Now off screen. */
    max-height: 45vh;
    overflow-y: auto;
}
.membership-checkout-wallet-buttons {
    /* Edge-to-edge like Pay Now, no background of its own. Same value as /t's
       .trial-checkout-wallet-buttons. */
    padding: 6px 0 14px;
    box-sizing: border-box;
}
/* Centers the ToS/PP notice (both spots it appears) - the smsTosPpNotice component renders an
   inline style="text-align:left", so !important is needed. Scoped via ms-tos-centered rather than
   restyling the shared component globally. Mirrors /t's identical rule. */
.ms-tos-centered .ms-sms-tos-pp-notice {
    text-align: center !important;
}
/* The toolbar sizes to its content (total, breakdown, optional wallet button, Pay Now) rather than
   a fixed height. framework7 sets .toolbar{height:44px}, and this toolbar previously carried its
   own fixed height via custom-toolbar-xxlheight/an inline ng-style - both clip the stack once the
   conditional wallet button is shown. Two class selectors beat both without !important. */
.membership-checkout-footer-mobile .toolbar {
    height: auto;
    padding-bottom: 8px;
}
/* MSA-1800: staff POS "Pay Now" missing in mobile view (<=768px).
   The @media (max-width:768px) rules further down pin .send_cust_btn at bottom:0 and .stc_pay_btn at
   bottom:45px with position:absolute. That relied on the old toolbar's fixed 144px (staff) height,
   which reserved 90px for the two buttons. MSA-353 made this toolbar height:auto, so absolutely
   positioned buttons no longer contribute height: the toolbar collapses to the total/breakdown, Pay Now
   lands above the toolbar's top edge and is clipped by the wrapper's overflow-y:auto - only
   "Send to customer" stays visible. Put the buttons back in normal flow so they stack (Pay Now, then
   Send to customer, per DOM order). Scoped to this wrapper, so every other page keeps the pinning
   rules. Same fix /t already carries for .trial-checkout-footer-mobile (MSA-352). Two class selectors
   beat the single-class pinning rules; .stc_pay_btn's `bottom:45px !important` no longer applies once
   position is static. */
.membership-checkout-footer-mobile .active-cus.toolbar-button,
.membership-checkout-footer-mobile .stc_pay_btn,
.membership-checkout-footer-mobile .send_cust_btn {
    position: static;
    bottom: auto;
    left: auto;
}
/* MSA-1800: on POS (#view-1.with-footer), `.with-footer .page .toolbar { bottom: 40px }` (for the
   "Powered by MyStudio" bar) shifts the now-nested, position:relative toolbar 40px up out of its
   wrapper, where .page-content paints over it. Move the 40px clearance to the positioned wrapper and
   cancel the shift on the toolbar. Mirrors /t. Selector length matters: 0-4-0 beats the 0-3-0 rule. */
.with-footer .membership-checkout-footer-mobile {
    bottom: 40px;
}
.with-footer .page .membership-checkout-footer-mobile .toolbar {
    bottom: auto;
}
/* The wallet mount divs get Stripe's .StripeElement class, which is styled elsewhere in this file
   for the CARD element: a padded, rounded, shaded input box. Applied to an Apple Pay/Google Pay
   button that is wrong on every count - it insets the button, clips it well below its rendered
   height, 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 needed. */
#stripe-wallet-checkout-element-mobile,
#stripe-wallet-checkout-element-desktop {
    background: none;
    background-color: transparent;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.toolbar-inner-custom-content{
    font-size: 11px;
}
.toolbar-button{
    width:100%; margin-top:4px; color:#009a62;
}
.custom-card-cont{
    margin-left:7px;  color:black;
    height:74px;
}
.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:95%;
}
.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: 25%;
    left: 32%;
    width: 150px;
    /*height: 150px;*/
     /* margin-top: -75px; Half the height
    margin-left: -75px; */
}
.play-overlaydesc{
    position: absolute;
    top: 25%;
    left: 32%;
    width: 150px;
    /*height: 150px;*/
     /* margin-top: -75px; /*Half the height */
    /*margin-left: -75px; */
}
/*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;
}
/* without desc */
@media only screen and (min-width: 700px) and (max-width: 800px)  {
    .play-overlay{
    position: absolute;
    top: 35%;   
    left: 40%;
    width: 150px;
    }
}
@media only screen and (max-width: 400px) {
    .play-overlay{
    position: absolute;
    top: 17%; 
    left: 28%;   
    width: 150px;
    }
}
@media only screen and (min-width: 400px) and (max-width: 500px)  {
    .play-overlay{
    position: absolute;
    top: 23%;    
    left: 31%;
    width: 150px;
    }
}
/* with desc */
@media only screen and (min-width: 700px) and (max-width: 800px)  {
    .play-overlaydesc{
    position: absolute;
    top: 37%;
    left: 39%;
    width: 150px;
    }
}
@media only screen and (max-width: 400px) {
    .play-overlaydesc{
    position: absolute;
    top: 19%; 
    left: 29%;
    width: 150px;
    }
}
@media only screen and (min-width: 400px) and (max-width: 500px)  {
    .play-overlaydesc{
    position: absolute;
    top: 23%;     
    left: 31%;
    width: 150px;
    }
}

.cus-pagecontent{
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto; 
    padding-bottom: 44px;
    padding-top: 44px;
}

.navbar-cus-height{
    height:60px!important;
}

.navbar-align{
    width: 1080px;
    padding-left: 5px;
    margin-left: auto;
    margin-right: 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;
} 
.webview{
    display:block;
}

.registerbutton-align{
    position: absolute;
    left: 5%;
    bottom: 30px;
    width: 90%;   
}   
.col-33-cardlisting{
    width:33.33%;
}
.web-calender{
    padding:0; 
    margin-right:-15px; 
    width:100%; 
}
.date-dropdowns{
    display: inline-flex;
    margin-bottom: 5px;
}
.date-dropdowns > .dob_month,.dob_day,.dob_year{
    width: 115px;
    height: 35px;
    margin: 0 5px;
    padding-left: 5px;
}
.date-dropdowns > .dob_day{
    margin-left: 0;
}
.registerbutton-align {
    position: absolute;
    left: 5%;
    bottom: 30px;
    width: 90%;
    padding-top: 10px;
}

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

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

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

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

.date-dropdowns{
    display: inline-flex;
    margin-bottom: 5px;
    margin:10px auto 5px auto;
}
.date-dropdowns > .dob_month,.dob_day,.dob_year{
    width: 115px;
    height: 35px;
    margin: 0 5px;
    padding-left: 12px;
}
.date-dropdowns > .dob_month{
    margin-left: 0;
}

.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;
}
.custom-modal-white-button{
    min-height: 52px;
    width: 100%;
    font-weight:500;
    background:white;
    border:1px solid lightgray;
    color:black;
}
.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;
}

/*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.list{
    max-width: 1180px;
    margin: auto;
    position: initial;
}
.with-banner.with-footer .navbar-inner .right img{
    padding-top: 30px;
    /*padding-left: 20px;*/
}
.with-banner.with-footer .navbar-inner .right img.trolley{
    padding-top: 40px;
}
/*HIDE ADMIN BANNER, SEARCH MEMBER, OPTIONAL DICOUNT BOX, HOME ICON BY DEFAULT*/
.admin-banner,.search-member, .opt-disc,.home_icon{
    display: none;
}
/* SHOW ADMIN BANNER, SEARCH MEMBER, OPTIONAL DICOUNT BOX, HOME ICON 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;
}
.with-banner .navbar-inner .left{
    padding-top: 30px;
}
.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;
}
.home_icon{
    padding-top: 0;
}
.with-banner .home_icon{
    padding-top: 30px;
}
.with-banner .home .home_icon{
    padding-top: 55px;
}
.with-banner .cancelbutton{
    padding-top: 35px
}
.container{
    max-width: 1200px;
    margin: auto;
}
.card-listing .card {
    margin: 10px;
    max-width: 389.95px;
}
.card-listing .card-image {
    height: 14vw;
    margin-top: 1px !important;
    max-height: 175px;
}
.card-listing .card-footer{
    max-height: 35px;
    min-height: 1px;
    color:black;
}
.card-listing .card-header{
    padding: 15px;
}
price{
    font-weight: 600;
}
.card-listing .card-footer p {
    margin: 0;
    color: black;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.card-listing .card-footer price{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.card-listing .custom-footer p {
    margin: 0;
    color: black;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.card-listing .custom-footer price{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.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;
}
.holder + .holder{
    margin-top: 15px;
}
.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:150px 0 0 0;
}
.with-banner .web-view.product_desc{
    margin-top: 0;
}
.select-container{
    position: relative;
    z-index: 1;
}
.retail_checkout .container{
    margin-top: 20px;
}
.retail_checkout .card{
    box-shadow:0px 1px 2px rgba(0, 0, 0, 0.3);
}
.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;
}
.title-bar h1.title {
    font-size: 17px;
    letter-spacing: 0.24px;
    font-weight: 600;
    margin: 0;
}
.select-card .title-bar{
    border:none;
    padding-left: 0;
}
/*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: .75em;
}
.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{
    font-size: 16px;
    color:rgb(74,74,74);
    -webkit-appearance: none;
    -moz-appearance: none;
}
.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;
}
.opt-disc-container{
    padding:15px;
}
.expiryWidth{
    width: 100%;
}
.selecttag{
    margin-top: 5px;
    width: 100%;
    height: 45px;
    padding-left: 15px;
}
.form-group + .form-group,.labelAlignMT2,.labelAlignMT2+.form-group,.form-group+.form-group-split.row,.form-group-split.row+.form-group{
    margin-top: 15px;
}
div.mc_search_member input[type="text"]::placeholder { /* Firefox, Chrome, Opera */ 
    color:black;
} 
div.mc_search_member {
    border: 1.5px solid #00ad68;
    border-radius: 5px;
}
.registerbutton-align .price-section span small{
    font-size: 68%;
}
.active-cus.toolbar-button {
    border-radius: 0;
    height: 45px;
    margin-top: 5px;
    padding-top: 10px;
    font-size: 15px;
    letter-spacing: 0.3px;
    font-weight: 500;
}
.checkout .active-cus.toolbar-button {
    padding-top: 5px;
    margin-top: 5px;
}
.checkout .container{
    margin: 20px auto;
}
.checkout .card{
    margin: 15px 0;
}
.with-footer .page .toolbar{
    bottom: 40px;
    background: #f7f7f8;
}

.with-footer .page .toolbar::before{
    background: #f7f7f8;
}
.with-footer .page .toolbar.calendar-custom-toolbar{
    bottom:0;
    background: white;
}
.navbar-inner.fixed-navbar.navbar-on-center{
    max-width: 1200px;
    margin: auto;
    position: relative;
    /*padding: 0 !important;*/
}
.navbar-inner.fixed-navbar.navbar-on-left{
    display:none;
}
.navbar-inner.fixed-navbar.desc.navbar-on-center,.desc .container,.navbar-inner.fixed-navbar.date-select.navbar-on-center,.date-select .container, .navbar-inner.fixed-navbar.clist.navbar-on-center, .clist .container{
    max-width: 905px;
}
.navbar-inner.fixed-navbar.list.navbar-on-center{
    max-width: 1200px;
}
.navbar-inner.fixed-navbar.cart.navbar-on-center,.cart .container{
    max-width:1000px
}
.navbar-inner.list{
    position: initial;
}
.desc .registerbutton-align,.checkout .registerbutton-align{
    position: initial;
    margin: 0;
    width: 100%;
    padding-top: 10px;
}
.desc .card-content h1,.desc .card-content h2{
    border-bottom: 1px solid rgb(223,227,233);
    padding-bottom: 5px;
    margin: 0;
    font-size: 18px;
    font-weight: 500;
}
.desc .card-content h2{
    font-size: 16px;
    border:none;
    margin-top: 10px;
    font-weight: 400;
}
.desc .card-image{
    height: 22vw;
    max-height: 215px;
}
.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;*/
}
.fixed-text{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.desc .web-view .card{
    padding: 15px;
}
.desc .web-view .active-cus.toolbar-button{
    padding-top: 0;
}
.parent.desc .web-view .active-cus.toolbar-button, .child.desc .web-view .active-cus.toolbar-button{
    padding-top: 10px;
}
.cart .active-cus.toolbar-button,.clist .active-cus.toolbar-button{
    margin: 0;
}
.desc .mobile-view .active-cus.toolbar-button{
    margin: 0;
    padding-top: 10px;
}
.date-select .content-block-title{
    text-align: center;
}
.toolbar{
    background: #efefef;
}
.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;*/
}
.date-select .page-content{
    height: calc(100% - 160px);
}
.with-footer .date-select .page-content {
    height: calc(100% - 200px);
}
.with-banner.with-footer .date-select .page-content{
    /*margin-top: 0 !important;*/
    height: calc(100% - 230px);
}
.cart .page-content{
    height: calc(100% - 190px);
}
.with-footer .cart .page-content {
    height: calc(100% - 230px);
}
.with-banner.with-footer .cart .page-content{
    height: calc(100% - 260px);
}
.web-calender .toolbar-inner{
    background: white;
}
.waiver_container{
    padding: 15px 15px 25px 15px;
}
.checkout .total-text,.checkout price{
    font-size: 18px;
}
.waiver-text{
    font-size: 14px;
    font-weight: 100;
    max-height:92px;
    overflow-y:auto;
}
.card-listing .card-header price{
    color:black;
}
.toolbar .toolbar-inner-custom{
    padding:0;
}
.clist .card-listing .web-view.card-header{
    /*max-height: 54px;*/
    overflow: hidden;
    height: 75px;
}

/* styles for '...' */ 
.block-with-text {
  /* hide text if it more than N lines  */
  overflow: hidden;
  /* for set '...' in absolute position */
  position: relative; 
  max-height: 50px;
  height:50px;
  text-align: left;
  margin: 0;
  /* use this value to count block height */
  /*line-height: 1.2em;*/
  /* max-height = line-height (1.2) * lines max number (3) */
  /*max-height: 3.6em;*/ 
  /* fix problem when last visible word doesn't adjoin right side  */
  /*text-align: justify;*/  
  /* place for '...' */
  /*margin-right: -1em;*/
  /*padding-right: 1em;*/
}
/* create the ... */
.block-with-text:before {
  /* points in the end */
  content: '...';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of block */
  right: 0;
  bottom: 0;
  color: black;
}
/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text:after {
  /* points in the end */
  content: '';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of text */
  right: 0;
  /* set width and height */
  width: 1em;
  height: 3em;
  margin-top: 0.2em;
  /* bg color = bg color under block */
  background: white;
}
.block-with-text p{
    margin:0;
}
.block-with-text.sub-tit{
    overflow: hidden;
    /* for set '...' in absolute position */
    position: relative; 
    text-align: left;
    margin: 0;
    max-height: 60px;
    height:60px;
    color:black;
}
/* create the ... */
.block-with-text.sub-tit:before {
  /* points in the end */
  content: '...';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of block */
  right: 0;
  bottom: 0;
  color: black;
}
/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text.sub-tit:after {
  /* points in the end */
  content: '';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of text */
  right: 0;
  /* set width and height */
  width: 1em;
  height: 4em;
  margin-top: 0.2em;
  /* bg color = bg color under block */
  background: white;
}
.clistmobile-view{
    display:none;
}
.clistweb-view{
    display: block;
}

/* 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;
}
#stripe-card-element iframe{
    position: relative;
    top: 10px;
    z-index: 9999;
}
/* .StripeElement's fixed height:40px was sized for the legacy single-line Card Element - the
   Payment Element that replaced it renders multiple stacked rows and would get clipped. Mirrors
   /t's override. */
#stripe-card-element {
    height: auto;
    min-height: 40px;
    margin-bottom: 10px;
}
.signaturediv{
    height: 100% !important;
    padding: 0px 15px;
}
.signsavebtn{
    height: 50px;
    width:140px;
    font-size:16px;
    border-radius:5px;
    color:#ffffff;
    background:#00ad68;
    cursor: pointer;
    border: none;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.26px;
}
.p0{
    padding: 0px !important;
}
.p15{
    padding: 15px !important;
}
.p10{
    padding: 10px !important;
}
.signshowdiv{
    /*display: flex;*/
    border-bottom: 1px solid black;
}
.signtxtrw{
    margin: 10px 0px;
    text-align: left;
    display: inline-block;
}
.signbb{
    border-bottom: 1px solid black;
}
.signsubmitrow{
    padding: 15px;
    min-height: 50px;
}
.btnrgt{
    float: right;
    right: 15px !important;
    position: absolute;
    bottom: 15px;
}
.signbyrtxt{
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.26px;
}
.signdiv{
    height: 100%;
    margin: 0 15px;
    width: inherit !important;
}
.signwebdiv,.signtabdiv,.signsmallwebdiv{
   height: 100%;
}
.signwebdiv{
     display:block;
}
.signsmallwebdiv{
     display:none;
}
.signtabdiv{
     display:none;
}
.editsign-icn{
    width: 20px;
    cursor: pointer;
    /* bottom: 50px;
    position: absolute; */
}
.card-content-inner .col-5{
    margin-top: auto;
}
.bbprop{
    border-bottom: 1px solid black;
    margin: 0 15px;
    width: inherit !important;
    text-align: center;
}
.sign_pg_cnt{
    background: white;
    overflow-x: hidden;
}
.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: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:767px){
    .labelAlignMT2 > .col-100.tablet-50:nth-child(2), .mob-form-group-align{
        margin-top: 15px;
    }
}

@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;
    }
    .checkout .custom-page-content .container{
        margin: 20px auto 50px!important;
    }
    .cart .page-content{
        padding: 20px !important;
    }
    .clist .container{
        max-width: none;
    }
    .signwebdiv, .signtabdiv{
        display:none;
    }
    .signsmallwebdiv{
        display:block;
    }
/*    :root{
       --modal-width: calc(var(--screen-width) / 100 * 50); 
    }*/
}

@media only screen and (max-width:1100px){
    .event-des-height .card-header {
        /*min-height: 14vw;*/
    }
    .event-des-imageheight .card-header {
        min-height: 27vw;
    }
    .card-right {
        min-height: 27vw;
    }
    .mobile-view{
        display:none;
    }
    .web-view{
        display:block;
    }
}

@media only screen and (max-width:900px){
    .checkout .row.split_view > .col-50 {
        width: 100%;
    }
    .navbar .navbar-inner.fixed-navbar{
        padding: 0 10px;
    }
    .signwebdiv, .signsmallwebdiv{
        display:none;
    }
    .signtabdiv{
        display:block;
    }
    .custom-card-content-inner{
        padding: 20px 8px !important;
        margin-left: 8px;
    }
    .custom-page-content{
        height: calc(100% - 140px) !important;
    }
    .custom-card{
        border: none !important;
    }
    .checkout-due-label{
        margin-bottom: 40px;
    }
    .checkout-first-container{
        margin-bottom: 0px !important;
    }
}

@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% - 170px);
    }
    .date-select .page-content{
        /*margin-top: 0 !important;*/
        height: calc(100% - 140px);
    }
    .cart .page-content{
        height: calc(100% - 170px);
    }
    .checkout .page-content{
        height: calc(100% - 195px);
    }
    .with-footer .page-content{
        height: calc(100% - 130px);
    }
    .with-banner.with-footer .page-content {
        margin-top: 120px;
        height: calc(100% - 160px);
    }
    .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 .date-select .page-content{
        /*margin-top: 0 !important;*/
        height: calc(100% - 255px);
    }
    .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;
    }
    .mobile-view{
        display:block;
    } 
    .web-view{
        display:none;
    }
    .navbar-inner.list {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
    .with-footer .desc .page-content {
        height: calc(100% - 215px);
    }
    .with-footer .date-select .page-content {
        height: calc(100% - 180px);
    }
    .with-footer .cart .page-content {
        height: calc(100% - 215px);
    }
    .card-image {
        height: 47vw;
    }
    .card-listing .card-image {
       height: 21vw;
        margin-top: 1px !important;
    }
    .desc .card-image{
        height: 48vw;
        max-height: inherit;
    }
    .with-footer .toolbar{
        bottom: 40px;
    }
    .checkout .container {
        max-width: 80%;
        margin: auto;
    }
    .search-member input {
        margin-bottom: 10px;
    }
    .with-banner.with-footer .desc .page-content{
        height: calc(100% - 245px);
    }
    .with-banner.with-footer .date-select .page-content{
        /*margin-top: 0;*/
        padding-top: 10px !important;
        height: calc(100% - 210px);
    }
    .with-banner.with-footer .cart .page-content {
        height: calc(100% - 245px);
    }
    .with-banner  .list .home_icon{
        padding-left: 5px;
        padding-top: 35px;
    }
    .navbar-inner .right img{
        width: 25px;
    }
    .ph-text{
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    .editsign-icn{
        bottom: 70px;
        right: 5px;
    }
    .labelAlignMT2 > .col-100.tablet-50:nth-child(2), .mob-form-group-align{
        margin-top: 15px;
    }
    .discount-redesign{
        padding-top: 9px !important;
        height: 33px !important;
    }
    .half-container-mobile{
        padding-top: 0px !important;
    }
    .custom-page-content{
        margin-top: 90px !important;
    }
    .with-banner  .custom-page-content{
        margin-top: 90px;
    }
    .linebreak-mobile{
        display: block !important;
    }
    .discount-content{
        position: fixed;
        bottom: 84px;
        left: 0;
        background-color: white;
        padding: 0px 15px 16px;
        width: calc(100% - 30px);
        z-index: 500;
    }
    .with-footer .discount-content{
        bottom: 123px;
    }
    .twilio_err_modal{
        width: calc(100% - 440px);
    }
    .twilio_err_footer{
        padding: 4px;
    }
}

@media only screen and (max-width:743px){
   .active-cus.toolbar-button{
       /* position: absolute; */
       bottom: 0; 
    }    
    .checkout .active-cus.toolbar-button {
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    }
}

@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);
    }
}

@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);
    }
    .checkout .page-content {
        height: calc(100% - 165px);
        padding: 10px !important;
    }
    .with-footer .checkout .page-content {
        height: calc(100% - 210px);
    }
    .with-banner.with-footer .checkout .page-content {
        height: calc(100% - 230px);
    }
    .container{
        max-width: 100%;
        margin-bottom: 10px;
    }
    .checkout .container{
        padding: 0 0 10px 0;
        max-width:100%;
        margin: 0;
    }
    .checkout .card-content-inner{
        padding: 15px 0 !important;
    }
    .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: 10px !important;
        height: calc(100% - 140px);
    }
    .date-select .page-content {
        padding-top: 10px !important;
        height: calc(100% - 110px);
    }
    .with-footer .desc .page-content {
        height: calc(100% - 180px);
    }
    .with-footer .date-select .page-content {
        height: calc(100% - 150px);
    }
    .with-banner.with-footer .desc .page-content {
        height: calc(100% - 215px);
    }
    .with-banner.with-footer .date-select .page-content {
        height: calc(100% - 180px);
    }
    .checkout .card{
        box-shadow: none;
        margin: 0;
    }
    .search-member{
        padding: 0;
    }
    .cart .page-content {
        height: calc(100% - 140px);
    }
    .with-footer .cart .page-content {
        height: calc(100% - 180px);
    }
    .with-banner.with-footer .cart .page-content {
        height: calc(100% - 215px);
    }
    .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;
    }
    .card-listing .card{
        max-width: 100%;
    }
    .date-select .content-block-title{
        margin-top:10px;
    }
    .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;
    }
    .desc .card-image{
        height: 46.5vw;
    }
    .custom-page-content{
        margin-top: 60px !important;
    }
/*    .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;
    }
    .event-des-height .card-header {
        /*min-height: 40vw;*/
    }
    .event-des-imageheight .card-header {
        min-height: 47vw;
    }
    .mobile-view{
        display:block;
    } 
    .web-view{
        display:none;
    }    
    .web-calender{
        padding:0; 
        margin-right:-15px; 
        width:auto; 
    }
    .card-listing .card{
        margin:5px;
    }
    .card-listing .card-image{
        height: 45vw;
        margin-top: 1px !important;
    }
    .card-listing .card-header{
        padding: 5px;
    }
    .card-listing .card-content-inner{
        padding: 10px;
    }
    .retail-view .card-content h1 {
        font-size: 14px;
        font-weight: 600;
    }
    .card-listing price {
/*        font-weight: 600;
        font-size: 14px;*/
    }
    .toolbar-price .active-cus.toolbar-button {
        margin-top: 10px;
    }
    .price-section small{

    }
    .toolbar-price {
        padding-top: 5px;
        font-size: 14px;
    }
    .carousal_select{
        max-width: 75%;
    }
    .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;
    }
    .search-member{
        padding-top: 5px;
    }
    .title-bar{
        margin: auto -10px;
        padding: 0 10px 10px;
    }
    .title-bar h1.title{
        font-size: 16px;
    }
    .form-group-split > .col-50{
        width: 100%;
        margin-bottom: 15px;
    }
    .clistmobile-view{
        display:block;
    }
    .clistweb-view{
        display: none;
    }
}
@media only screen and (max-width: 410px) {
    .date-dropdowns > .dob_month,.dob_day,.dob_year{
        width: 90px;
        height: 35px;
    }
}

@media only screen and (min-width:900px){
    .custom-card-content-inner{
        max-height: calc(100vh - 267px);
        overflow: auto;
    }
}

.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;
} 
.custom-card{
    border: 1px solid #CDD0D5;
    position: relative;
    border-radius: 10px;
    font-size: 14px;
    width: 463px;
}
.custom-card-content-inner{
    padding: 35px 30px 10px 30px;
    position: relative;
} 
.checkout-button{
    background: #00ad68;
    font-size: 18px;
    line-height: 25px;
    color: #fff;
    padding-top: 8px;
    border: 0px;
    width: 100%;
    height: 40px;
    border-radius: 10px;
}
.custom-card-content-spacing{
    margin-top: 20px;
}
.checkout-button-spacing{
    margin:40px 0px;
    padding: 0px 16%;
}
.checkout-label{
    font-size: 12px;
    text-align: right; 
    color: #7C7C7C;
}
.checkout-tax-fees{
    font-size: 10px;
    text-align:left;
    color: #000000;
    opacity: 0.5;
    white-space: nowrap;
}
.custom-page-content{
    height: calc(100% - 110px );
    margin-top: 110px;
    /* padding: 0px; */
    background: white;
    overflow: auto;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}
.discount-redesign{
    margin-top: 20px;
    position: relative;
    padding-top: 13px;
    height: 32px;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    letter-spacing: 0.433333px;
    color: #000000;
    box-shadow: 0px 2px 7px rgb(181 181 181 / 50%);
    border-radius: 10px;
}
.checkout-prorated-label{
    font-size: 12px;
    color: #7C7C7C;
    text-align: right;
    position: relative;
    right: 10px;
}
.footer-total{
    font-size: 12px;
    padding-right: 16px;
    font-weight: 600;
}
.linebreak-mobile{
    display: none;
}
.checkout-first-container{
    margin-bottom: 50px;
}
.mem_fee_mobileView{
    white-space: nowrap;
}
.with-banner  .custom-page-content{
    margin-top: 140px;
}
.line-through{
    text-decoration-line: line-through;
    color: rgba(0, 0, 0, 0.5);
    padding-right: 5px
}
.signup-memfee-discount{
    position: absolute;
    right: 16px;
    top: 16px;
    cursor: pointer;
}
.discount-code-applied{
    color: #009A61;
}
.applied_discount_val{
    font-size: 12px;
    color: #000000;
    opacity: 0.5;
    white-space: nowrap;
    position: relative;
    top: 4px;
}
.cancel-discount-inpage{
    position: absolute;
    right: 18px;
    cursor: pointer;
}
.discount-code-container{
    position: relative;
    margin-top: 15px;
}
.send_cust_btn{
    border-radius: 0;
    height: 45px;
    margin-top: 10px;
    padding-top: 10px;
    font-size: 16px;
    letter-spacing: 0.3px;
    font-weight: 500;
    padding-top: 5px;
    border: 1px solid #009a62;
    background: #fff;
    cursor: pointer;
}


.send_cust_popup{
    padding: 32px !important;
    height: 0 !important;
    white-space: nowrap;
}
    .register_btn_stc{
       max-width: unset;
    }

    #twilio_manager_popup{
        display:none;
        position: absolute; 
        background: #0009; 
        z-index: 999; 
        top:0; 
        bottom:0; 
        left:0; 
        right:0;
    }
    
    .twilio_err_modal{
        position: absolute;
        /* background: #fff; */
        /* height: 275px;
        width: 422px; */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 9;
        border-radius: 10px;
        box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
        min-width: 300px;
        max-width: 300px;
        /* width: calc(100% - 1460px); */
        /* width: 300px; */
    }
    
    .twilio_err_body{
        font-family: OpenSans-Regular;
        color: #000;
        padding: 10%;
        /* line-height: 105px; */
        text-align: center;
        background-color: #fff;
        box-shadow: 0px 1px 0px rgb(0 0 0 / 15%);
        border-radius: 10px 10px 0 0;
        font-size: 16px;
        letter-spacing: -0.25px;
    }
    .twilio_err_footer{
        font-family: 'OpenSans-SemiBold';
        border-radius: 0 0 10px 10px;
        /* color: #009A61; */
        color: #FFF;
        background-color: #009A61;
        text-align: center;
        cursor: pointer;
        height: 100%;
        font-size: 16px;
        line-height: 65px;
        letter-spacing: 0.25px;
    }

@media (max-width: 768px){
    .send_cust_btn{
        border: none;
        margin-top: 0;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .stc_pay_btn{
        bottom: 45px !important;
        position: absolute;
    }
    
}