/*
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-LightItalic';
    src: url("fonts/Open_Sans/OpenSans-LightItalic.ttf");
}
.student-font{
  font-family: 'Chalkboard SE';
}
@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 h3,
.safari b,
.safari .title-bar h1.title,
.safari price,
.safari .navbar-inner .left span,
.safari .active-cus.toolbar-button,
.safari .admin-banner h6,
.safari h2:not(.safari .desc .card-content h2){
     font-family: 'OpenSans-Bold' !important;
     font-weight: normal !important;
}
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: 45px;
}
.custom-toolbar-xsheight{
 height: 31px;
}
.toolbar-inner-custom-content{
    font-size: 11px;
}
.toolbar-button{
    width:100%; margin-top:4px; color:#009a62;
}
.custom-toolbar-xlheight.with-tax{
   height: 92px;
}
.custom-toolbar-height.with-tax{
   height: 82px;
}
.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;
 }
 
.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;
} 
.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: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;
}
.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;
}
/*//Muthulakshmi*/
.trial_search_member{
    border: 1.8px solid #00ad68;;
    border-radius: 5px; 
    width: 400px;
    position: relative;
    left: 10px;
}
.new_trial_text{
    font-family: OpenSans;
    font-size: 11px;
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: -0.3px;
    color: #00ad68;
}
.custom-modal-white-button{
    min-height: 52px;
    width: 100%;
    font-weight:500;
    background:white;
    border:1px solid lightgray;
    color:black;
}
.unver_text{
    font-size: 15px;
    color:red;
    margin:10px 5px;
}
.dot{
    height: 9px;
    width: 9px;
    background-color:red;
    border-radius: 50%;
    display: inline-block;
}
/*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-image {
    height: 47vw;
}
.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;
}
.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;
}
.date_text{
    font-size: 16px;
    letter-spacing: 0.24px;
    font-weight: 600;
    margin: 0;
}
.safari .date_text{
     font-family: 'OpenSans-SemiBold' !important;
     font-weight: normal !important;
}
.trial_discount_apply{
    box-shadow: 0px 3.21267px 6.41349px rgba(0, 0, 0, 0.25);
    border-radius: 9.4839px;
    background: #009A61;
    height: 40px;
    border: none;
    color: #FFFFFF;
    width: 100%;
    font-weight: 500;
    line-height: 29px;
    text-align: center;
    letter-spacing: 0.14881px;
}
.trial_discount_box{
    width: 100%;
    height: 40px;
    border: none;
    background: #FFFFFF;
    box-shadow: 0px 2px 7px rgba(184, 184, 184, 0.5);
    border-radius: 9.4839px;
    font-weight: 500;
    line-height: 29px;
    letter-spacing: 0.14881px;
    color: #000000;
    padding-left: 20px;
    box-sizing: border-box;
    font-size: 14px;
    -webkit-appearance: none;
    -moz-appearance: none;
}
input[type="text"].trial_discount_box::placeholder { /* Most modern browsers support this now. */
    color:#000000;
}
.trial-clear-discount{
    position: absolute;
    right: 30px;
    top: 30px;
    cursor: pointer;
}
.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;
}
.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;
}
.additionalfocused label{
    transform: translateY(-40%);
    font-size: .85em;
}
.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;
}
.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: 35.517px;
}
.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: 13px;
}
.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: 0px;
    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.calendar-select.navbar-on-center{
    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;*/
}
.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;
    }
}
.desc .active-cus.toolbar-button{
    padding-top: 0px;
}
.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;
}
.toolbar .toolbar-inner-custom{
    padding:0;
}
.cart .active-cus.toolbar-button,.clist .active-cus.toolbar-button{
    margin: 0;
}
.desc .mobile-view .active-cus.toolbar-button{
    margin: 0;
    padding-top: 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;
}
.send_cust_btn{
    border-radius: 0;
    height: 45px;
    margin-top: 10px;
    font-size: 16px;
    letter-spacing: 0.3px;
    font-weight: 500;
    border: 1px solid #009a62;
    background: #fff;
    cursor: pointer;
}
.send_cust_popup{
    padding: 32px !important;
    height: 0 !important;
    white-space: nowrap;
}
/*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 (used by #stripe-card-element) renders a taller, multi-row layout
   (card number, then expiration date + security code on their own row) than the old single-line
   Card Element .StripeElement was sized for. Override the shared 40px fixed height here (ID beats
   class specificity) so the box grows to fit its content instead of clipping the second row. */
#stripe-card-element {
    height: auto;
    min-height: 40px;
    margin-bottom: 10px;
}
#stripe-card-element iframe{
    position: relative;
    top: 10px;
    z-index: 9999;
}

/*TAX CSS CHANGES*/
.toolbar-inner-custom center small span{
    font-size:13px;
}
.date-select .active-cus.toolbar-button{
    margin: 0;
    height: 45px;
    padding: 11px;
}
.sm-curr .custom-toolbar-xlheight.with-tax{
    height: 85px;
}
.md-curr .custom-toolbar-xlheight.with-tax{
    height: 85px;
}
/* Wrapper around the trial checkout's mobile Pay Now toolbar. It takes over the
   position:absolute/bottom:0 anchoring that `.page > .toolbar` normally provides (see
   framework7.ios.css) - the .toolbar inside no longer matches that selector once it is
   nested a level deeper, so it lays out as a normal element instead.
   NOTE: unlike Web_Mobile's copy, the Apple Pay/Google Pay buttons here sit INSIDE that
   toolbar (after Pay Now), not as a sibling above it - which is why the toolbar's ng-style
   height in index.html grows when they are shown.
   Deliberately NOT setting `display` here: `.mobile-view` on this same element is what
   toggles display:none on desktop / display:block on narrow widths, and an explicit
   display would fight that at equal specificity. */
.trial-checkout-footer-mobile {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 500;
    max-height: 45vh;
    overflow-y: auto;
}
/* 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 Pay Now. Collapse it unless there is a message.
   :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-mobile:empty,
#stripe-wallet-checkout-errors-desktop:empty {
    margin-top: 0 !important;
}

/* Centre the "By submitting, you agree to our Terms of Service and Privacy Policy" line in the
   mobile footer, where everything else in the stack is centred. The smsTosPpNotice component
   (commonLibrary/components/smsConsent/smsConsentBlock.js) renders its wrapper with an INLINE
   style="text-align:left", so !important is required to win - a plain rule loses to the inline
   style regardless of specificity. Scoped to this footer so the same shared component keeps its
   left alignment everywhere else it is used (e.g. buyerInfo.html), opt in per usage with the
   ms-tos-centered class rather than restyling the component globally. */
.ms-tos-centered .ms-sms-tos-pp-notice {
    text-align: center !important;
}
.trial-checkout-wallet-buttons {
    /* No background of its own - it sits inside the toolbar and should read as part of the same
       payment group as Pay Now, not as a separate floating strip. No horizontal padding, so the
       wallet button runs edge to edge exactly like the full-width Pay Now button
       (.toolbar-button{width:100%}). The bottom padding keeps the two from rendering flush. */
    /* Bottom gap is deliberately generous: Stripe's own iframe carries an inline
       margin:-4px, so it overhangs this container and swallows ~4px of whatever is set
       here before any gap becomes visible. 24px renders as roughly 20px of daylight
       above Pay Now (which adds its own 4px margin-top via .toolbar-button). */
    /* Spacing here is counter-intuitive, so the numbers are measured, not guessed. Stripe's
       Express Checkout iframe is ~51px tall but only draws a ~38px button inside it, leaving
       ~13px of blank space WITHIN the iframe that no CSS here can reclaim. On top of that its
       inline margin:-4px makes it overhang this container. So the CSS gap has to go slightly
       NEGATIVE to land at a sensible visible gap: measured live, padding-bottom:0 with
       margin-bottom:-8px gives a 2px CSS gap that reads as ~14px on screen - matching the
       ~12px above the button. The negative margin is safe because this row is display:none
       when no wallet is available, so it cannot pull Pay Now up in the card-only layout. */
    padding: 6px 0 0;
    margin-bottom: -8px;
    box-sizing: border-box;
}

/* 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 inset the button ~12px per side, clipped it to 40px
   when the rendered button is ~51px, and drew 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. */
#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;
}

/* Pay Now / the staff Pay Now variant / Send to customer are pinned position:absolute with
   bottom:0 (and bottom:45px for .stc_pay_btn) in the mobile media queries further down. That was
   correct while this toolbar had a fixed 108px/144px height - the button sat at the bottom of a
   box that was sized to leave room for it. Now the toolbar auto-sizes to its content (total,
   breakdown, ToS/privacy notice, optional wallet button), so an absolutely-positioned button
   overlays the last ~45px of that content - it was covering the Terms of Service line whenever
   the wallet button was absent. Put them back in normal flow so every row simply stacks.
   These selectors outrank the pinning rules on specificity, so no !important is needed, and
   `bottom` stops applying at all once position is static. */
.trial-checkout-footer-mobile .active-cus.toolbar-button,
.trial-checkout-footer-mobile .stc_pay_btn,
.trial-checkout-footer-mobile .send_cust_btn {
    position: static;
    bottom: auto;
    left: auto;
}
/* The toolbar sizes to its content (total, breakdown, ToS notice, optional wallet button, Pay Now)
   instead of a fixed 108px/144px. framework7 sets .toolbar{height:44px} and custom-toolbar-xxlheight
   set 108px; both clipped the ToS/privacy line, and the wallet button made it worse. Two class
   selectors beat both without needing !important. */
.trial-checkout-footer-mobile .toolbar {
    height: auto;
    padding-bottom: 8px;
}
/* POS-only layout bug: the trial total was rendering UNDERNEATH .page-content and so was
   invisible on the staff/public POS checkout in mobile view (the "Total : $55.04" line was simply
   missing above the "(Includes ... taxes and ... admin fees)" line).
   Cause: `.with-footer .page .toolbar { bottom: 40px }` (added for the POS "Powered by MyStudio"
   bar, further up this file). .with-footer is only ever put on #view-1 from the POS URL branches
   (see IndexPageController.js: $('#view-1').addClass('from-pos with-footer')), which is why this
   never reproduced on the open URL. framework7 gives .toolbar position:relative, so `bottom:40px`
   does NOT resize or reposition its box - it paints the toolbar 40px higher than the box it still
   occupies. That worked while the toolbar WAS the bottom-anchored element, but the toolbar now
   lives inside .trial-checkout-footer-mobile, which is the position:absolute/bottom:0 element. So
   the offset just pushed the toolbar's top 40px out of its wrapper, and .page-content - painted
   after it with an opaque background - covered exactly that band: the total line.
   Fix: apply the 40px clearance to the WRAPPER, which is genuinely positioned, and cancel the
   relative shift on the toolbar so its painted position matches its box again. NOTE the selector
   length: `.with-footer .page .toolbar` is specificity 0-3-0, so a plain
   `.trial-checkout-footer-mobile .toolbar` (0-2-0) loses to it - the extra `.with-footer .page`
   here is what makes `bottom: auto` actually win, without reaching for !important.
   Independent of the Apple Pay/Google Pay row: verified live with the wallet button both shown and
   hidden, the total is only painted once this offset moves to the wrapper. */
.with-footer .trial-checkout-footer-mobile {
    bottom: 40px;
}
.with-footer .page .trial-checkout-footer-mobile .toolbar {
    bottom: auto;
}

.stripeCheckoutDecideModal{
    width:300px!important;
    background: white;
    margin-left: -150px;
}
.stripeCheckoutDecideModal .modal-inner{
    padding:0px;
}
.stripeCheckoutDecideModal .modalVerification {
    padding :15px 25px;
}
.stripeCheckoutDecideModal button{
    border-radius: 0px;
}
.stripeCheckoutDecideModal .price-section{
    background: #f7f7f8;
    padding: 10px 9px;
}
.stripeCheckoutDecideModal .price-section span small{
    font-size: 13px;
}
.stripeCheckoutDecideModal .processing_fee_span{
    position: relative;
    top: 5px;
}
.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);
}
/*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;
}
.page {
    background: #fff;
}
#trial_success_popup_modal,#twilio_manager_popup{
    display:none;
    position: absolute; 
    background: #0009; 
    z-index: 999; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0;
}

.stc_trial_popup_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; */
}

.stc_trial_popup_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;
}
.stc_trial_popup_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;
}
.custom-card{
    border: 1px solid #CDD0D5;
    position: relative;
    border-radius: 10px;
    font-size: 14px;
    width: 463px;
}
.checkout-first-container{
    margin-bottom: 50px;
}
.custom-card-content-spacing{
    margin-top: 20px;
}
.custom-card-content-inner{
    padding: 35px 30px 10px 30px;
    position: relative;
} 
.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;
}
.with-banner  .custom-page-content{
    margin-top: 140px;
}
/*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;
    }
    .cart .page-content{
        padding: 20px !important;
    }
    .signwebdiv, .signtabdiv{
        display:none;
    }
    .signsmallwebdiv{
        display:block;
    }
    .checkout .custom-page-content .container{
        margin: 20px auto 50px!important;
    }
/*    :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-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-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%);
    }
    .registerbutton-align .price-section span small{
        font-size: 68%;
    }
    .send_cust_btn{
        border: none;
        margin-top: 0;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    .stc_pay_btn{
        bottom: 45px !important;
        position: absolute;
    }
    .stc_trial_popup_modal{
        width: calc(100% - 440px);
    }
    .stc_trial_popup_footer{
        padding: 4px;
    }
    .checkout .container {
        max-width: 80%;
        margin: auto;
    }
}

@media only screen and (max-width:743px){
    .active-cus.toolbar-button{
       position: absolute;
       bottom: 0; 
    }           
}

@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){
    .trial-clear-discount{
        right: 20px !important;
    }
    .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;
    }
    .opt-disc{
        padding: 0px 0px 15px 0px !important;
        margin-bottom: 30px;
    }
    .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);
    }
    .calendar-select .page-content {
        padding: 0px !important;
    }
    .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;
    }
    .additionalfocused 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;
    }
    .unver_text{
        font-size: 13px;
    }
/*    .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;
        border-top: 1px solid #E5E5E5!important;
    }
    .custom-page-content{
        margin-top: 60px !important;
    }
}

@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: 500;
        font-size: 12px;
    }
    .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: 12px;
    }
    .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;
    }
    .toolbar-inner-custom center small span{
        font-size:11px;
    }
}
@media only screen and (max-width: 410px) {
    .date-dropdowns > .dob_month,.dob_day,.dob_year{
        width: 90px;
        height: 35px;
    }
}

.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;
}
/* .trial_stc_err_popup_bg{
    background-color: unset;
} */
.checkout-label{
    font-size: 12px;
    text-align: right; 
    color: #7C7C7C;
}
@media only screen and (min-width:900px){
    .custom-card-content-inner{
        max-height: calc(100vh - 267px);
        overflow: auto;
    }
}
.checkout-tax-fees{
    font-size: 10px;
    text-align:left;
    color: #000000;
    opacity: 0.5;
    white-space: nowrap;
}
.line-through{
    text-decoration-line: line-through;
    color: rgba(0, 0, 0, 0.5);
    padding-right: 5px
}