@import url('../../../Global_Css/global_css.css');
:root {
    --overlay-color: rgba(5, 5, 5, 0.6);
    --primary-color: #009a61;
    --white-color: #ffffff;
    --error-color: #CB3C0E;
    --input-fill-color: #f4f6f8;
    --divider-color: #edeced;
    --hint-text-color: #979797;
    --text-highlight-light: #dfdcdc;
    --shadow: 0px 2px 7px #D5D5D5;
    --dropdown-shadow: 0 2px 7px 0 rgb(110 110 110 / 50%);
    --input-font-size: 14px;
    --dropdown-option-height: 200px;
    --dropdown-option-width: 300px;
    --dropdown-option-top: 0;
    --dropdown-option-left: 0;
    --viewport-height: calc(100vh - 0px);
    --viewport-width: calc(100vw - 0px);
}
.mc-component *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.mc-component{
    font-size: 14px;
    font-family: 'Opensans-Regular', sans-serif;
}
.mc-component.detailModal{
    font-family: inherit;
}
.mc-modal{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--overlay-color);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
}
.mc-modal-dialog{
    height: 781px;
    width: 1062px;
    max-width: calc(var(--viewport-width) - 10vw);
    max-height: calc(var(--viewport-height) - 10vh);
    background-color: var(--white-color);
    border-radius: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
}
.mc-modal-topbar{
    font-size: 14px;
    font-family: 'Opensans-Bold', sans-serif;
    background: var(--primary-color);
    color: var(--white-color);
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.9px;
    padding: 8px 0 5px 0;
}
.mc-modal-header{
    padding: 20px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mc-modal-header .mc-btn{
    padding: 0px 20px;
}
.mc-modal-body{
    overflow: hidden;
    flex: 1;
    height:100%;
}
.mc-form{
    height: 100%;
    overflow: auto;
}
.mc-form-search-container, .mc-form-header{
    width: 768px;
    max-width: 100%;
    padding: 20px;
    margin: auto;
}
.mc-form-header{
    padding-bottom: 0;
}
.mc-form-container{
    width: 768px;
    max-width: 100%;
    padding: 20px;
    margin: auto;
}
.mc-modal-footer{
    width: 100%;
    margin: auto;
    padding: 20px 0;
}
.mc-modal-body+.mc-modal-footer{
    padding-top: 0;
}
.mc-modal-footer.fixed-bottom{
    bottom: 0;
}
.mc-footer-container{
    width: 768px;
    max-width: 100%;
    padding: 0 20px;
    margin: auto;
}
.mc-field-listitem{
    margin-bottom: 10px;
}
.mc-field-listitem:last-child{
    margin-bottom: 10px;
}
.mc-summary-container {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 20px;
    margin: auto;
    width: 850px;
    max-width: 90%;
    height: 100%;
}
.mc-card{
    width: 100%;
    max-height: calc(100% - 20px);
    border-radius: 10px;
    border: 1px solid var(--divider-color);
    overflow: auto;
}
.mc-card.mc-flat{
    border: 0;
}
.mc-card-section{
    padding: 20px;
    display: flex;
    flex-direction: column;
}
.mc-card-section + .mc-card-section{
    padding-top: 0;
}
.mc-card-section .mc-btn + .mc-btn{
    margin-top: 20px;
}
.mc-partial-scroll{
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}
.mc-strech-content{
    flex: 1;
    overflow: auto;
}
/* ---------- Form component css ---------- */
.mc-input, .mc-dropdown{
    position: relative;
    width: 100%;
    border-radius: 10px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
}
.mc-input.mc-dense input{
    height: 36px;
}
.mc-input.mc-prepend-icon{
    position: relative;
}
.mc-input.mc-prepend-icon .mc-icon{
    position: absolute;
    height: 100%;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mc-input.mc-prepend-icon input{
    padding-left: 50px;
}
.mc-input.mc-filled, .mc-dropdown.mc-filled{
    background-color: var(--input-fill-color);
    box-shadow: none;
}
.mc-input.mc-outline{
    border: 1px solid #000000;
    box-shadow: none;
}
.mc-input.mc-outline.mc-primary{
    border: 1px solid var(--primary-color);
}
.mc-input.mc-err, .mc-dropdown.mc-err{
    border: 1px solid var(--error-color);
}
.mc-input input, .mc-dropdown input{
    border: 0;
    outline: none;
    width: 100%;
    height: 48px;
    padding: 4px 16px 0 16px;
    cursor: text;
    border-radius: 10px;
    background-color: transparent;
    font-size: var(--input-font-size);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mc-dropdown input{
    cursor: pointer;
}
.mc-input label, .mc-dropdown label{
    display: flex;
    align-items: center;
    height: 100%;
    padding-left: 16px;
    position: absolute;
    transition: all linear 0.1s;
    top: 0;
    cursor: text;
}
.mc-dropdown label{
    cursor: pointer;
}
.mc-dropdown .mc-dd-icon{
    margin-right: 10px;
    cursor: pointer;
}
.mc-input input:focus + label{
    font-size: 10px;
    transform: translateY(-12px);
    transform-origin: left center;
}
.mc-input input:not(:placeholder-shown) ~ label, .mc-dropdown input:not(:placeholder-shown) ~ label{
    font-size: 10px;
    transform: translateY(-12px);
    transform-origin: left center;
}
.mc-dd-options{
    z-index: 999999;
    background-color: var(--white-color);
    box-shadow: var(--dropdown-shadow);
    border-radius: 7px;
    display: none;
    position: fixed;
    max-height: 200px;
    overflow: auto;
}
.mc-dd-options.mc-option-filled{
    background-color: var(--input-fill-color);
}
.mc-dd-options.mc-option-filled .mc-dd-option-listitem:hover{
    background-color: transparent;
}
.mc-dd-option-header{
    padding: 20px;
    padding-bottom: 10px;
    font-family: 'Opensans-Bold', sans-serif;
}
.mc-dd-option-list{
    padding: 20px 0;
}
.mc-dd-option-header+.mc-dd-option-list{
    padding-top: 0;
}
.mc-dd-option-listitem{
    padding: 5px 20px;
    cursor: pointer;
    position: relative;
}
.mc-dd-option-listitem:hover{
    background-color: var(--text-highlight-light);
}
.mc-dd-option-listitem:last-child{
    padding-bottom: 0;
}
.mc-dd-options.open{
    display: block;
}
.mc-dd-option-footer{
    border-top: 1px solid var(--divider-color);
    padding: 16px 20px;
    cursor: pointer;
}
/* ---------- Button css ---------- */
.mc-btn{
    outline: none;
    border: 0;
    height: 40px;
    font-size: 16px;
    font-family: 'Opensans-SemiBold', sans-serif;
    cursor: pointer;
    border-radius: 10px;
    font-size: 16px;
    background: var(--white-color);
}
.mc-btn.mc-primary-btn{
    background-color: var(--primary-color);
    color: var(--white-color);
}
.mc-primary-text{
    color: var(--primary-color);
}
.mc-btn.mc-block{
    width: 100%;
}
.mc-btn.flat{
    background: transparent;
}
.mc-btn.mc-shadow{
    box-shadow: var(--shadow);
}
/* ---------- Expansion panel css ---------- */
.mc-expansion-header{
    cursor: pointer;
}
.mc-expansion-body{
    padding: 15px;
    padding-right: 0;
}
.mc-expansion-body .mc-d-content + .mc-d-content{
    border-top: 1px solid var(--divider-color);
}
/* ---------- Scroll bar css ---------- */
.mc-scrollbar::-webkit-scrollbar{
    background: transparent;
    width: 6px;
}
.mc-scrollbar::-webkit-scrollbar-thumb{
    background: var(--text-highlight-light);
    border-radius: 10px;
}

/* Typography css */
.mc-err-text{
    font-size: 12px !important;
    color: var(--error-color);
}
.mc-title1{
    font-size: 18px;
    font-family: 'Opensans-Bold', sans-serif;
}
.mc-title2{
    font-size: 16px;
    font-family: 'Opensans-Bold', sans-serif;
}
.mc-body1{
    font-size: 14px;
    font-family: 'Opensans-SemiBold', sans-serif;
}
.mc-body2{
    font-size: 14px;
    font-family: 'Opensans-Regular', sans-serif;
}
.mc-lead-text, .mc-hint-text{
    font-size: 12px;
    font-family: 'Opensans-Regular', sans-serif;
    color: var(--hint-text-color);
}
.mc-hint-text{
    font-size: 10px;
}
.mc-primary-text{
    color: var(--primary-color);
}
.mc-text-disabled{
    pointer-events: none;
}
/* Helper style css */
.mc-pos-relative{
    position: relative;
}
.mc-d-flex{
    display: flex;
}
.mc-align-start{
    display: flex;
    align-items: flex-start;
}
.mc-align-center{
    display: flex;
    align-items: center;
}
.mc-justify-spacebetween{
    display: flex;
    justify-content: space-between;
}
.mc-texthighlight{
    background-color: var(--text-highlight-light);
}
.mc-full-width{
    width: 100%;
}
.mc-divider{
    width: 100%;
    border-bottom: 1px solid var(--divider-color);
}
.mc-c-pointer{
    cursor: pointer;
}
.mc-w-10{
    width: 10%;
}
.mc-w-20{
    width: 20%;
}
.mc-w-30{
    width: 30%;
}
.mc-w-40{
    width: 40%;
}
.mc-w-50{
    width: 50%;
}
.mc-w-60{
    width: 60%;
}
.mc-w-70{
    width: 70%;
}
.mc-w-80{
    width: 80%;
}
.mc-w-90{
    width: 90%;
}
.mc-text-right{
    text-align: right;
}
.mc-text-left{
    text-align: left;
}
.mc-text-center{
    text-align: center;
}
.mc-rotate{
    transform: rotate(180deg);
}

/* used to hide the mobile cards in web view  */
.mobile-d-block, .mobile-d-flex{
    display: none;
}

/* Signature pad styles */
.mc-signature-container{
    display: flex;
    /* height: 300px; */
    border-bottom: 1px solid #000;
    padding-bottom: 5px;
    align-items: baseline;
}
#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 
}
.event-clear-discount{
    position: absolute;
    right: 16px;
    top: 16px;
    cursor: pointer;
}
.discount-code-container{
    position: relative;
}
.applied_discount_val{
    font-size: 12px;
    color: #000000;
    opacity: 0.5;
    white-space: nowrap;
    position: relative;
    top: 4px;
}
.line-through {
    text-decoration-line: line-through;
    color: rgba(0, 0, 0, 0.5);
    padding-right: 5px;
}
.mc-pa-top1{
    padding-top: 1px;
}
.text-hover{
    background-color: white;
}
.mc-payment-plan .mc-partial-scroll{
    max-height: calc(100% - 20px);
    height: auto;
}
.mc-payment-plan .mc-partial-scroll .mc-partial-scroll{
    max-height: 100%;
}
.mc-field-waiveri-mb10{
    margin-bottom: 10px;
}
.msp-open-sans-regular{
    font-family: 'Opensans-Regular', sans-serif;
}
.msp-open-sans-bold{
    font-family: 'Opensans-Bold', sans-serif;
}
.msp-open-sans-semiBold{
    font-family: 'Opensans-SemiBold', sans-serif;
}

/* ---------- Stripe Payment Element (MSA-355) ---------- */

/* The Payment Element renders a multi-row layout - card number, then expiry and
   security code on their own row, plus Link's inline row - roughly 280px where the
   old Card Element was a single 40px input. e/css/custom.css still pins
   .StripeElement to height:40px and this div carries that class, which clipped the
   element to its first row. An ID selector beats the class regardless of sheet
   order, so no !important is needed. Same fix /t took in MSA-352. */
#stripe-card-element {
    height: auto;
    min-height: 40px;
    margin-bottom: 10px;
}

/* .mc-card caps every card at max-height: calc(100% - 20px) with overflow:auto.
   That was invisible while this card held a 40px input; with the taller Payment
   Element the card became its own cramped scroll region nested inside the panel's
   own scroll, so the buyer got two scrollbars and could barely see the card fields.
   Let the payment card size to its content and let the surrounding column scroll -
   one scrollbar. overflow stays 'auto' deliberately: with the cap gone the content
   fits, so no inner scrollbar renders, and the card keeps clipping to its radius. */
.mc-card.mc-card-payment-element {
    max-height: none;
}

/* Stripe adds its own .StripeElement class to this mount container, which is styled above
   for the CARD element: a 40px-tall, 6px/12px-padded, rounded, shaded input box. On an
   Apple Pay/Google Pay button that insets it ~12px per side, clips it to 40px when the
   rendered button is ~51px, and paints an input background behind a solid black button.
   Reset to a plain, full-width, self-sizing container. An ID beats the class, so no
   !important. Mirrors t/css/custom.css. */
#stripe-wallet-checkout-element {
    background: none;
    background-color: transparent;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 10px;
}