body{font-family: 'Soleil', sans-serif !important;font-weight:100;color:var(--fifth);line-height: normal;background-color: #f1f5f6 !important;}

/* Header */

.content{padding:50px 8px}
.mbottom20{margin-bottom:20px}
.card-header section{background-color:var(--iti-hover-color);border-bottom:1px solid var(--iti-border-gray);font-weight:bold}
.card-header section .head{padding: 10px}
.iti{width: 100%}
.white-popup-block {background: #fff;padding: 20px 30px;text-align: left;max-width: 75%;margin: 40px auto;position: relative;border-radius: 6px;overflow: auto;box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, .2), 0px 24px 38px 3px rgba(0, 0, 0, .14), 0px 9px 46px 8px rgba(0, 0, 0, .12);}


/* Payment */
.checkLabel{display: flex;align-items: center;font-size: 14px}
.checkLabel .checkControl{margin-right: 7px;width: 20px;height: 20px}


.paymentContent,.paymentContentDetail{float: none;margin: auto;}
.stepContent{position: relative;height: 100px}
.stepContent.active .stepNameDot{left: 0;}
.stepContent .stepNameDot{left: inherit;right: 0}
.stepNameDot{    position: absolute;width: 30px;height: 30px;display: block;background: #fff;border: 1px solid #28a745;top: 45px;border-radius: 50%;}
.stepNameDot:after{width: 10px;height: 10px;border-radius: 50px;position: absolute;top: 9px;left: 9px;content: "";}
.active .stepNameDot:after{background-color: green;}
.stepNameProcess{position: relative;background: #bbb;height: 0.5px;box-shadow: none;top:38px;width: 100%;}
.stepContent:first-child .stepNameProcess{left: 30px;}
.stepContent:last-child.stepNameProcess{right: 0;}
.paymentContentDetail{background-color: white;box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;}
.paymentContentDetail .title{font-size: 18px;margin-bottom:20px;padding:24px 48px; border-bottom: 1px solid #ccc}
.posContent{padding: 24px 48px}
.iconInput{position: relative}
.iconInput .icon_svg {position: absolute;top: 27px;left: 15px;color: #94a3b8;align-content: center;height: 49px;padding-right: 15px;border-right: 1px solid #ced4da;}
.posContent input{font-size: 16px;padding: .810rem .96rem;height: inherit;text-indent: 45px;}
.br0{border-top-right-radius: 0 !important;border-bottom-right-radius: 0 !important;}
.posContent .cs-btn{height: 50px;border-top-left-radius: 0 !important;border-bottom-left-radius: 0 !important;border-left: 0}
.exper .w3-third:first-child,.exper .w3-third:nth-child(2){padding-right: 8px}
.exper .w3-third:last-child{padding-left: 8px}
.exper select{height: 50px}
.btnSend{padding: 12px !important;width: 100%}
.totalPay{margin-top: 40px;padding-top: 20px;border-top: 1px solid #ccc;font-size: 18px;font-weight: bold;}
#phone{text-indent: 0 !important;}
.cs{position:relative;}
.cs-btn{width:100%; padding:10px 12px; border:1px solid #ccc; border-radius:.25rem; background:#fff; display:flex; justify-content:space-between; align-items:center; cursor:pointer}
.cs-menu{display:none; position:absolute; left:0; right:0; margin-top:6px; border:1px solid #ddd; border-radius:8px; background:#fff; overflow:hidden; z-index:10}
.cs.open .cs-menu{display:block}
.cs-opt{width:100%; padding:10px 12px; border:0; background:#fff; display:flex; gap:8px; align-items:center; cursor:pointer; text-align:left}
.cs-opt:hover{background:#f5f5f5}
svg{display:block; border-radius:3px}
.cs-btn span:first-child{display:flex; gap: 8px}
#currency{position:absolute;opacity:0;pointer-events:none;height:0;}

/* Success */
h1{color: #04c416}
.paymentDetailContent{margin: auto;float: none;margin-top: 20px}
.paymentDetailContent .paymentDetail:first-child .w3-half{border: 1px solid #ced4da !important;}
.paymentDetailContent .paymentDetail:first-child .w3-half:last-child{border-left: 0 !important;}
.paymentDetailContent .paymentDetail .w3-half{border: 1px solid #ced4da;padding: 15px;border-top: 0}
.paymentDetailContent .paymentDetail .w3-half:last-child{border-left: 0;border-top: 0}

/* Error */
.posError h1{color: red !important;}
.posError .backBtn{margin-top: 25px}
.posError .backBtn a{display: inline-flex;align-items:center;gap:10px}

/* Logo */
.footer{background: rgba(0, 0, 0, 0.05)}
.footer .copy{padding: 15px 0}

.footerLogo ul{list-style: none;display: ruby;padding: 0}
.footerLogo li{float: left;width:16%;margin-bottom: 20px;margin-top:20px;display: block}
.footerLogo li:last-child{margin-right: 0}


/* Soleil */
@font-face {font-family: 'Soleil';font-style: normal;font-weight: 700;font-display: swap;src: url(../../images/fonts/SoleilBold.woff2) format('Woff');}
@font-face {font-family: 'Soleil';font-style: normal;font-weight: 400;font-display: swap;src: url(../../images/fonts/SoleilRegular.woff2) format('Woff');}
@font-face {font-family: 'Soleil';font-style: normal;font-weight: 100;font-display: swap;src: url(../../images/fonts/SoleilLight.woff2) format('Woff');}



/* MOBIL CSS */
@media only screen and (max-width: 559px) {
    body{overflow-x:hidden}
    .desktop{display: none}
    .mobil{display: block;}
    .header{padding: 0 8px}
    .header .logo{margin-left: 0 !important;}
    .header .mobil_menu{margin-right: 0 !important;display:contents}
    .content{padding: 70px 8px 50px 8px}
    .paymentDetail .w3-half,.stepContent, .totalPay .w3-half{width: 50% !important;}
    .paymentContentDetail .title, .posContent{padding: 12px 24px;}
    .currencyContent .w3-twothird {width: 60%}
    .currencyContent .w3-third{width: 40%}
    .exper .w3-third{width: 33.33333% !important;}
    .checkLabel{display: block}
    .footerLogo li{width: 32%}


}