@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;800&display=swap');
html, body {
    position: relative;
    height: 100%;
}
body{font-family: 'Inter', sans-serif;  font-weight:400; position: relative;}
body::before{content: ''; position: fixed; top: 0px; left: 50%; margin-left: -240px; background: #F2FAFF; width: 480px; height: 100vh; z-index: 1}
body::after{content: ''; position: fixed; top: 0px; left:0px; width: 100%; height: 100%; background: rgb(62,73,159); background: linear-gradient(133deg, rgba(62,73,159,1) 0%, rgba(79,159,215,1) 100%);}
.form-control::-moz-placeholder {color: #818181 !important; opacity: 1;}
.form-control:-ms-input-placeholder {color: #818181 !important;}
.form-control::-webkit-input-placeholder {color: #818181 !important;}
a{text-decoration: none !important}

.md-10{margin: 0 -10px}
.pd-10{padding: 0 10px}
.md-5{margin: 0 -5px}
.pd-5{padding: 0 5px}
.full{width: 100%}

.content-main-area{max-width: 460px; margin: 0 auto; padding: 20px; height: 100%; position: relative;}

.content-main-area .logo-area{width: 240px; margin: 0 auto 20px auto; position: relative; z-index: 1}
.content-main-area .logo-area img{width: 100%}
.content-main-area h1{text-align: center; margin: 0 0 20px 0; font-size: 30px; font-weight: 800; color: #3E499F; position: relative; z-index: 1}
.content-main-area p{font-size: 16px; line-height: 26px; color: #000; margin-bottom: 40px; position: relative; z-index: 1}
.content-main-area label{font-size: 12px; font-weight: 700; color: #3E499F; margin: 0px 0px 4px 0px; position: relative; z-index: 1}
.content-main-area label span { cursor: pointer;font-weight: bolder; text-decoration: underline;}
.content-main-area label span:hover { text-decoration: underline;}
.content-main-area .form-control{background: #fff; border:none; font-size: 16px; color: #3E499F; padding: 12px 15px; height: auto; -webkit-box-shadow: 0px 3px 15px 0px rgba(170,196,213,0.5); -moz-box-shadow: 0px 3px 15px 0px rgba(170,196,213,0.5); box-shadow: 0px 3px 15px 0px rgba(170,196,213,0.5); border-radius: 8px; position: relative; z-index: 1}
.content-main-area .input-flex{display: flex; gap:10px; text-align: center; position: relative; z-index: 1}
.content-main-area .input-flex .form-control{text-align: center; font-size: 24px; font-weight: 700;}
.content-main-area .form-area{padding-bottom: 100px}
.content-main-area .btn-continue{background: #3E499F; border-radius: 10px; font-size: 18px; font-weight: 700; color: #fff; width: 100%; display: block; padding: 10px; text-align: center; -webkit-box-shadow: 0px 3px 15px 0px rgba(170,196,213,0.5); -moz-box-shadow: 0px 3px 15px 0px rgba(170,196,213,0.5); box-shadow: 0px 3px 15px 0px rgba(170,196,213,0.5);}
.content-main-area .btn-area {position: fixed; bottom: 0px; width: 460px; background: #f2faff; left: 50%; margin-left: -230px; padding: 0 20px 25px 20px; z-index: 1}
.content-main-area #openSweetAlert{text-align: center; cursor: pointer; color: red; opacity: 0.5; position: relative; z-index: 1}
.content-main-area .mb-20{margin: 0 0 20px 0}
.swal2-title{font-size: 18px !important}
.swal2-close:focus{box-shadow: none !important}

.form-area .name{position: relative; z-index: 1; font-size: 24px; font-weight: 700; margin: 0 0 20px 0; text-align: center;}
.form-area .name a{display: block; font-size: 14px; line-height: 14px; font-weight: bolder; color: #3e499f !important; opacity: 1 !important; text-decoration: underline !important;}
.form-area .name a:hover { text-decoration: underline;}
.balance-block{background: rgb(62,73,159); background: linear-gradient(133deg, rgba(62,73,159,1) 0%, rgba(79,159,215,1) 100%); border-radius: 15px; padding: 25px; text-align: center; font-size: 24px; color: #fff; font-weight: 400; line-height: 24px; margin-bottom:20px; position: relative; z-index: 1}
.balance-block strong{display: block; font-size: 50px; font-weight: 700; line-height: 50px; margin-top: 10px}


input[type=checkbox].css-checkbox {position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0; }
input[type=checkbox].css-checkbox + label.css-label{font-size: 16px; line-height: 26px; color: #000; font-weight: 400; position: relative; padding-left: 35px; display: block;}
input[type=checkbox].css-checkbox + label.css-label svg{margin-right: 10px; width: 21px; height: 21px}
input[type=checkbox].css-checkbox + label.css-label::before{content: ''; width: 21px; height: 21px; border-radius: 6px; border: 1px solid #3E499F; background: #fff; position: absolute; top: 3px; left: 0px}
input[type=checkbox].css-checkbox:checked + label.css-label::after{content: ''; position: absolute; top: 10px; left: 5px; width: 11px; height: 8px; background: url(../images/check-icon.png) center center no-repeat}


.thank-message{position: relative; z-index: 1; padding: 100px 0}
.thank-message .icon{width: 120px; height: 120px; margin: 0px auto 35px auto; }
.thank-message .icon svg{width:100%; height: 100%}
.thank-message h2{text-align: center; color: #15A809; font-weight: 700; font-size: 30px; margin: 0 0 15px 0}
.thank-message p{text-align: center; margin: 0px; font-weight: 700; font-size: 20px;}
.thank-message p a{font-weight: 700; color: #3E499F; display: block;}
.gj-datepicker-md [role="right-icon"]{position: absolute; right: 10px !important; top: 13px !important; font-size: 24px !important; z-index: 1; color: #3e499f;}
.gj-textbox-md{line-height: 18px !important; padding: 15px !important;}
.gj-textbox-md:active, .gj-textbox-md:focus{border-bottom: none !important}


@media (max-width: 479px) {
    .content-main-area .logo-area {width: 180px;}
    .content-main-area h1{margin:0 0 8px 0; font-size: 24px;}
    .content-main-area p{margin-bottom:20px; font-size: 12px; line-height: 20px;}
    .form-group {margin-bottom: 10px !important;}
    .content-main-area .btn-area{left: 0; margin-left: 0; padding: 0 20px 20px 20px; width: 100%;}
    input[type="checkbox"].css-checkbox + label.css-label{font-size: 12px; line-height: 20px;}
    .content-main-area .input-flex{gap:6px}
    .content-main-area .input-flex .form-control{padding:5px 0px; font-size: 20px;}
    .thank-message .icon {width: 80px; height: 80px; margin: 0px auto 20px auto;}
    .thank-message h2{font-size:22px;}
}
.g-recaptcha {position: relative;z-index: 1;}
.resend-link {margin-top: 5px;}

.form-group{position:relative}
.form-group .parsley-success .parsley-error-list{display:none!important}
/*.form-group .parsley-error-list{position:relative;display:inline-block!important;padding:4px 10px;margin:0;list-style:none;color:#fff!important;font-size:14px;background:#37cfdc;-webkit-border-radius:0;-webkit-background-clip:padding-box;-moz-border-radius:0;-moz-background-clip:padding;border-radius:4px;background-clip:padding-box}
.form-group .parsley-error-list::after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #37cfdc;position:absolute;top:-6px;left:10px}*/
.form-horizontal .form-group span.error{margin-left:15px}
.howl{padding:0;list-style:none;background:#353535;border:1px solid #111;-webkit-border-radius:4px;-webkit-background-clip:padding-box;-moz-border-radius:4px;-moz-background-clip:padding;border-radius:4px;background-clip:padding-box}
.parsley-error-list li {position: relative;color: #fff !important;font-family: arial;font-size: 12px;margin-bottom: 10px;background-color: #af0606;padding: 5px;border-radius: 4px;}
.parsley-error-list li:after {bottom: 100%;left: 5%;border: solid transparent;content: "";height: 0;width: 0;position: absolute; pointer-events: none;border-color: rgba(136, 183, 213, 0);border-bottom-color: #af0606; border-width: 6px;margin-left: -6px;}
.parsley-error-list{margin:0px; padding: 0px; list-style: none; position: relative; z-index: 1;}
.leftside .content-left .form-area .halfbox .parsley-error-list{float: left;}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}