@charset "utf-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; background: transparent; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, article { display: block }
body { line-height: 1 }
ol, ul { list-style: none }
:focus, :focus-visible { outline: 0 }
::-moz-focus-inner {border:0;outline:0}
table { border-collapse: collapse; border-spacing: 0;}
.clear { clear: both }
.cf:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; font-size: 0; line-height: 0 }
.cf { display: inline-block }
* {font-variant-numeric: lining-nums;}
* html .cf { height: 1% }
.cf { display: block }
p {padding-bottom: 16px; line-height: normal;}
sub, sup {font-size: 75% !important;}
a, a:hover, a:focus, button:focus, button:hover{outline: none;}
a{color: var(--greyscale-900); vertical-align: top}
a:hover{color: var(--primary-500);}

html.iphone-x-fix-left { margin: 0; padding: 0 0 0 32px; }
html.iphone-x-fix-left::before { content: ''; width: 32px; height: 100vh; position: fixed; left: 0; top: 0; background-color: var(--greyscale-900); }
html.iphone-x-fix-right { margin: 0; padding: 0 32px 0 0; }
html.iphone-x-fix-right::before { content: ''; width: 32px; height: 100vh; position: fixed; right: 0; top: 0; background-color: var(--greyscale-900); }

html, body{min-height: 100vh;}
.al{float: left;}
.ar{float: right;}
.pr {position: relative;}
.margin-auto {margin: 0 auto;}
a,a:after, button {text-decoration: none; cursor: pointer!important;}
a:focus, a:hover{text-decoration: none; outline: none !important;}
img { border: 0; vertical-align: top;}
.imgW100p {width:100%;}
.img-responsive{max-width: 100%;}
.height-100{height: 100%;}

/* Start Transition Effect */
a,a:after{ -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear;}
.btn, .btn-icon path{ -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -ms-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transition-duration: 200ms; -moz-transition-duration: 200ms; -ms-transition-duration: 200ms; -o-transition-duration: 200ms; transition-duration: 200ms;}
.fadeIn{ -webkit-animation-duration: 3s; -moz-animation-duration: 3s; animation-duration: 3s;  -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; animation-name: fadeIn;}
@-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;}}
@keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}}
@keyframes wiggle {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-15deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}
/* End Transition Effect */

h1, h2, h3, h4, h5, h6{font-family: "Nunito", sans-serif; font-weight: 700; color: var(--greyscale-900);}
body {font-family: "Nunito", sans-serif; font-size: 18px; line-height: 20px; color: var(--greyscale-900); overflow: hidden; overflow-y: auto; font-weight: 400;}
h1{font-size: 68px; line-height: 80px;}
h2{font-size: 56px; line-height: 68px;}
h3{font-size: 44px; line-height: 52px;}
h4{font-size: 36px; line-height: 44px;}
h5{font-size: 28px; line-height: 32px;}
.font-24{font-size: 24px; line-height: 28px;}
.font-20{font-size: 20px; line-height: 24px;}
.font-16{font-size: 16px; line-height: 20px;}
.font-14{font-size: 14px; line-height: 16px;}
.font-12, .caption{font-size: 12px; line-height: 14px;}
.font-10{font-size: 10px; line-height: 13px;}
.font-800{font-weight: 800;}
.font-700{font-weight: 700;}
.font-600{font-weight: 600;}
.font-500{font-weight: 500;}
.font-400{font-weight: 400;}
.font-300{font-weight: 300;}
.letter-spacing-1{letter-spacing: 1px;}


/* Start Input, textarea, Select, Switch button */
.btn{font-family: "Nunito", sans-serif; font-size: 18px; line-height: 20px; font-weight: 600; padding: 14px 20px; display: inline-block; color: var(--greyscale-900); border: none;}
.btn-lg{font-size: 24px; line-height: 28px; padding: 18px 24px;}
.btn-sm{font-size: 14px; line-height: 16px; font-weight: 700; padding: 12px 16px;}
.btn-primary{color: var(--white); background: var(--blue-600);}
.btn-primary:hover, .btn-primary:active, .btn-primary:active:hover, .btn-primary.active, .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active{color: var(--white); background: var(--blue-300);}
.btn-primary:focus{color: var(--white); background: var(--blue-300); }
.btn-primary.selected, .btn-primary.selected:hover, .btn-primary.selected:focus{color: var(--white); background: var(--blue-700); -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}
.btn-primary.selected svg path{fill: var(--white) !important;}

.btn-secondary{color: var(--blue-600); background: var(--white);}
.btn-secondary:hover, .btn-secondary:active, .btn-secondary:active:hover, .btn-secondary.active, .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active{color: var(--blue-300); background: var(--white); }
.btn-secondary:focus{color: var(--blue-300); background: var(--white); }
.btn-secondary.selected, .btn-secondary.selected:hover, .btn-secondary.selected:focus{color: var(--blue-600); background: var(--blue-50); }
.btn-secondary:hover .btn-icon svg path{fill: var(--blue-300) !important;}
.btn-secondary.selected svg path, .btn-secondary.selected:hover svg path, .btn-secondary .btn-icon svg path{fill: var(--blue-600) !important;}
button[disabled], button.disabled, .btn[disabled], .btn.disabled{background: var(--greyscale-200); color: var(--greyscale-400); opacity: 1; cursor: not-allowed; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}
button[disabled] .btn-icon svg path, .btn[disabled] .btn-icon svg path, .btn.disabled .btn-icon svg path{fill: var(--greyscale-400) !important;}

.btn-circle{padding: 12px;}
.btn-icon-circle, .btn-circle{height: 48px; width: 48px;}
.btn-circle.btn-lg{padding: 16px; height: 64px; width: 64px;}
.btn-lg .btn-icon, .btn-circle.btn-lg svg, .btn-lg .btn-icon svg{height: 32px !important; width: 32px !important;}
.btn-circle.btn-sm{padding: 10px; height: 40px; width: 40px;}
.btn-sm .btn-icon, .btn-circle.btn-sm svg, .btn-sm .btn-icon svg{height: 20px !important; width: 20px !important;}
.btn-icon-circle:hover{background-color: var(--green-200);}
.btn-icon-circle:focus{background-color: var(--green-200); -moz-box-shadow: inset 0 0 0 4px var(--green-600); -webkit-box-shadow: inset 0 0 0 4px var(--green-600); box-shadow: inset 0 0 0 4px var(--green-600);}
.btn.btn-icon-append, .btn.btn-icon-prepend{display: flex; align-items: center; padding: 12px 20px;}
.btn-icon{background-position: 0 0; background-repeat: no-repeat; height: 24px; width: 24px; display: inline-block;}
.btn-icon svg{height: 24px !important; width: 24px !important;}
.btn-close{background: url(../images/icon/close-big.svg) center center no-repeat; opacity: 1 !important;}
.btn-back{background: url(../images/icon/back-arrow.svg) center center no-repeat;}
.add-icon{background-image: url(../images/icon/add-icon.svg);}
.edit-icon{background-image: url(../images/icon/edit.svg);}
.date-icon{background-image: url(../images/icon/date-icon.svg);}
.clock-icon{background-image: url(../images/icon/clock.svg);}

.form-group{margin-bottom: 16px;}
.form-group.row{margin-bottom: 16px !important;}
.form-group label.label{font-size: 14px; line-height: 16px; color: var(--greyscale-900); display: block; font-weight: 700; margin-bottom: 8px;}
.form-group label.label.font-400{font-weight: 400; font-size: 18px; line-height: 22px;}
.form-control{font-family: "Nunito", sans-serif; font-size: 18px; line-height: 20px; border: 1px solid var(--greyscale-300); background: var(--white); color: var(--greyscale-800); width: 100%; padding: 15px; height: auto;}
.form-control:hover{border-color: var(--blue-600);}
.form-control:focus{background: var(--white); border: 1px solid var(--green-600);  color: var(--greyscale-800); -moz-box-shadow: inset 0 0 0 1px var(--green-600); -webkit-box-shadow: inset 0 0 0 1px var(--green-600); box-shadow: inset 0 0 0 1px var(--green-600);}
select.form-control:not([size]):not([multiple]){height: auto;}
select.form-control{padding-right: 46px; background-color: var(--white); background-image: url(../images/icon/select-icon.svg) !important; background-position: calc(100% - 14px) 14px !important; background-size: 24px 24px !important; background-repeat: no-repeat !important; -webkit-appearance: none; -moz-appearance: none;}
textarea, textarea.form-control{resize: none; height: 90px;}

.form-input-group{position: relative;}
.form-input-group .form-control{padding-right: 42px;}
.form-input-icon .form-control{padding-left: 42px; padding-right: 42px;}
.input-group-append, .span-error-icon, .span-success-icon{position: absolute; right: 12px; top: 14px;}
.form-input-group .input-group-prepend, .form-input-group .input-group-append, .span-error-icon, .span-success-icon{background-position: 0 0; background-repeat: no-repeat; height: 24px; width: 24px; display: inline-block;}
.input-group-prepend{position: absolute; left: 12px; top: 12px;}

.form-control.disabled,.form-control:disabled{cursor: not-allowed; background-color: var(--greyscale-200); border-color: var(--greyscale-200); color: var(--greyscale-400);}
.form-control[readonly], select.form-control[readonly]:focus, input.form-control[readonly]:focus, textarea.form-control[readonly]:focus{color: var(--greyscale-900);}
.input-error, .input-success{position: relative;}
.input-error .form-control{border-color: var(--red-500);}
.input-error .form-control:focus{-moz-box-shadow: inset 0 0 0 1px var(--red-500); -webkit-box-shadow: inset 0 0 0 1px var(--red-500); box-shadow: inset 0 0 0 1px var(--red-500);}
.input-error .span-error{color: var(--red-500); display: block; margin-top: 4px;}
.input-success .form-control{border-color: var(--green-700); background-color: var(--white);}
.input-success .form-control:focus{border-color: var(--green-700);}
.input-success .span-success{color: var(--green-700); display: block; margin-top: 4px;}
.span-error-icon{background-image: url(../images/icon/warning.svg);}
.span-success-icon{background-image: url(../images/icon/success.svg);}

option:disabled{color: var(--greyscale-400);}

.checkBox, .radioBox, .radioBtn { display: block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: var(--greyscale-800);}
.checkBox label, .radioBox label, .radioBtn label{cursor: pointer; padding-left: 32px; font-family: "Nunito", sans-serif; font-size: 18px; line-height: 24px; font-weight: 400;}
.checkBox input, .radioBox input, .radioBtn input, .checkbox-rounded input{ position: absolute; opacity: 0; cursor: pointer; left: 0; top: 0;}
.checkBox .checkmark, .radioBox .checkmark { position: absolute; left: 0; top: 0; height: 24px; width: 24px; border: 2px solid var(--blue-600); }
.checkBox .checkmark{-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}
.checkBox:hover input ~ .checkmark, .radioBox:hover input ~ .checkmark {border-color: var(--blue-300); background-color: var(--blue-50);}
.checkBox input:checked ~ .checkmark, .radioBox input:checked ~ .checkmark { background-color: var(--green-700); border-color: var(--green-700);}
.checkBox input:checked ~ label, .radioBox input:checked ~ label{color: var(--greyscale-800);}

.checkBox .checkmark:after { content: ""; position: absolute; opacity: 0; display: block; left: 6px; top: 2px; width: 8px; height: 12px; border:solid var(--white); border-width: 0 2px 2px 0; -webkit-transform: rotate(0deg) scale(0); -ms-transform: rotate(0deg) scale(0); transform: rotate(0deg) scale(0); }
.checkBox input:checked ~ .checkmark:after {-webkit-transform: rotate(45deg) scale(1); -ms-transform: rotate(45deg) scale(1); transform: rotate(45deg) scale(1); opacity: 1;}
.checkBox span.checkmark{padding: 0 !important;}
.checkBox .checkmark, .checkBox .checkmark:after{transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; }

.radioBox .checkmark {-moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;}
.radioBox .checkmark:after { content: ""; position: absolute; display: none; top: 6px; left: 6px; background:var(--white); width: 8px; height: 8px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;}
.radioBox input:checked ~ .checkmark:after {display: block}

.checkBoxError .checkmark, .radioBoxError .checkmark{border-color: var(--red-500);}

.checkBox-h5.checkBox .checkmark, .checkBox-h5.radioBox .checkmark {top: 2px;}

.checkbox-small label{padding-left: 24px; font-size: 14px; line-height: 16px; vertical-align: text-top;}
.checkbox-small .checkmark{height: 16px; width: 16px;}
.checkbox-small .checkmark:after{border-width: 0 1px 1px 0; left: 4px; top: 0; width: 5px; height: 9px;}

.checkbox-rounded{display: block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.checkbox-rounded label{cursor: pointer; font-family: "Nunito", sans-serif; font-size: 18px; line-height: 24px; font-weight: 400; color: var(--greyscale-600);}
.checkbox-rounded .checkmark{display: flex; align-items: center; justify-content: center; height: 40px; width: 40px; background: var(--greyscale-100); color: var(--greyscale-600);}
.checkbox-rounded .checkmark:hover{background: var(--green-300);}
.checkbox-rounded input:checked ~ .checkmark{background: var(--green-700); color: var(--white);}

.checkbox-group .checkBox{margin-top: 16px;}
.checkbox-group .checkBox:first-child{margin-top: 0;}

/* Start Placeholder */
.form-control::placeholder{color: var(--greyscale-500) !important; opacity: 1;}
.form-control::-ms-input-placeholder{color: var(--greyscale-500) !important; opacity: 1;}
.form-control::-ms-input-placeholder{color: var(--greyscale-500) !important; opacity: 1;}
.input-error .form-control::placeholder{color: var(--red-500) !important;}
.input-error .form-control::-ms-input-placeholder{color: var(--red-500) !important;}
.input-error .form-control::-ms-input-placeholder{color: var(--red-500) !important;}
.input-success .form-control::placeholder{color: var(--green-700) !important;}
.input-success .form-control::-ms-input-placeholder{color: var(--green-700) !important;}
.input-success .form-control::-ms-input-placeholder{color: var(--green-700) !important;}
.form-control.disabled::placeholder,.form-control:disabled::placeholder{color: var(--greyscale-400) !important;}
.form-control.disabled::-ms-input-placeholder,.form-control:disabled::-ms-input-placeholder{color: var(--greyscale-400) !important;}
.placeholder{color: var(--greyscale-500) !important; opacity: 1;}

select option{color: var(--greyscale-900);}


/* Start Margin & Padding */
.pt-240{padding-top: 240px;}
.pt-160{padding-top: 160px;}
.pt-120{padding-top: 120px;}
.mt-240{margin-top: 240px;}
.mt-160{margin-top: 160px;}
.mt-120{margin-top: 120px;}
.mt-64{margin-top: 64px;}
.mt-48{margin-top: 48px;}
.mt-32{margin-top: 32px;}
.mt-24{margin-top: 24px;}
.mt-20{margin-top: 20px;}
.mt-16{margin-top: 16px;}
.mt-12{margin-top: 12px;}
.mt-8{margin-top: 8px;}
.mt-4{margin-top: 4px !important;}

.p-32{padding: 32px;}
.p-24{padding: 24px;}
.p-20{padding: 20px;}
.p-16{padding: 16px;}
.p-12{padding: 12px;}
.p-8{padding: 8px;}
.pt-64{padding-top: 64px;}
.pt-48{padding-top: 48px;}
/* End Margin & Padding */

/* Start Text and Bg Color */
.bg-blue-600{background: var(--blue-600);}
.bg-blue-50, .notification-unread{background: var(--blue-50);}
.bg-white{background-color: var(--white);}
.bg-blur{background: rgba(96, 97, 98, 0.5);}
.bg-greyscale-50{background: var(--greyscale-50);}
.bg-green-700{background: var(--green-700);}
.bg-blue-800{background: var(--blue-800);}
.gradient-bg, .step-content-right ul:before{background: #A5D6A7; background: linear-gradient(180deg, rgba(165, 214, 167, 1) 0%, rgba(71, 121, 163, 1) 100%);}
.top-bg{background: #A5D6A7; background: linear-gradient(88deg, rgba(165, 214, 167, 1) 0%, rgba(71, 121, 163, 1) 100%);}

.text-blue-500{color: var(--blue-500);}
.text-blue-600{color: var(--blue-600);}
.text-blue-700{color: var(--blue-700);}
.text-greyscale-200{color: var(--greyscale-200);}
.text-greyscale-400{color: var(--greyscale-400);}
.text-greyscale-500{color: var(--greyscale-500);}
.text-greyscale-600{color: var(--greyscale-600);}
.text-greyscale-700{color: var(--greyscale-700);}
.text-greyscale-800{color: var(--greyscale-800);}
.text-greyscale-900{color: var(--greyscale-900);}
.text-greyscale-950{color: var(--greyscale-950);}
.text-red-500{color: var(--red-500);}
.text-white{color: var(--white);}
.text-green-700{color: var(--green-700);}
.text-gradient{background: linear-gradient(0deg, var(--blue-500) 0%, var(--green-500) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}

.underline-link{border-bottom: 1px solid var(--blue-700); color: var(--blue-700);}
.underline-red{border-bottom: 1px solid var(--red-600); color: var(--red-600);}
.underline-warning{border-bottom: 1px solid var(--orange-600); color: var(--orange-600);}
.underline-success{border-bottom: 1px solid var(--green-600); color: var(--green-600);}
.underline-link:hover{border-bottom: 1px solid transparent;}
.underline-link-small{font-size: 14px; line-height: 16px;}
.underline-link-small img{height: 16px;}
.text-red-link{color: var(--red-600);}
.text-red-link:hover{color: var(--red-500); text-decoration: underline;}
.text-link, .footer-link li a{color: var(--blue-700);}
.text-link:hover, .footer-link li a:hover{color: var(--blue-500); text-decoration: underline;}

.shadow-xs{-webkit-box-shadow: 0px 2px 4px 0px rgba(33,33,34,0.16); -moz-box-shadow: 0px 2px 4px 0px rgba(33,33,34,0.16); box-shadow: 0px 2px 4px 0px rgba(33,33,34,0.16);}
.shadow-s{-webkit-box-shadow: 0px 16px 32px -4px rgba(33,33,34,0.10); -moz-box-shadow: 0px 16px 32px -4px rgba(33,33,34,0.10); box-shadow: 0px 16px 32px -4px rgba(33,33,34,0.10);}
.shadow-m{-webkit-box-shadow: 0px 24px 48px -8px rgba(33,33,34,0.12); -moz-box-shadow: 0px 24px 48px -8px rgba(33,33,34,0.12); box-shadow: 0px 24px 48px -8px rgba(33,33,34,0.12);}
.shadow-l{-webkit-box-shadow: 0px 40px 80px -16px rgba(33,33,34,0.16); -moz-box-shadow: 0px 40px 80px -16px rgba(33,33,34,0.16); box-shadow: 0px 40px 80px -16px rgba(33,33,34,0.16);}
.shadow-xl{-webkit-box-shadow: 0px 56px 112px -20px rgba(33,33,34,0.20); -moz-box-shadow: 0px 56px 112px -20px rgba(33,33,34,0.20); box-shadow: 0px 56px 112px -20px rgba(33,33,34,0.20);}
/* End Text and Bg Color */

/* Start Border Radius */
.rounded-xs{-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}
.rounded-s{-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;}
.rounded-m{-moz-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px;}
.rounded-l{-moz-border-radius: 24px; -webkit-border-radius: 24px; border-radius: 24px;}
.rounded-xl{-moz-border-radius: 32px; -webkit-border-radius: 32px; border-radius: 32px;}
.rounded-full{-moz-border-radius: 999px; -webkit-border-radius: 999px; border-radius: 999px;}
.rounded-0{-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;}
/* End Border Radius */

/* Start Common */
.wrap { margin: 0 auto; max-width: 1368px; width: 100%; padding: 0 24px; }
.page-box{max-width: 1024px;}
.row-8{margin-left: -8px; margin-right: -8px;}
.row-12{margin-left: -12px; margin-right: -12px;}
.row-24{margin-left: -24px; margin-right: -24px;}
/* .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12{ padding: 0 12px;} */
.row-8 [class*="col-"], .row-24 .row-8 [class*="col-"], .row-8 [class*="col-md-"], .row-8 [class*="col-sm-"]{padding-left: 8px; padding-right: 8px;}
.row-12 [class*="col-"], .row-12 [class*="col-md-"], .row-12 [class*="col-sm-"]{padding-left: 12px; padding-right: 12px;}
.row-24 [class*="col-"], .row-24 [class*="col-md-"], .row-24 [class*="col-sm-"]{padding-left: 24px; padding-right: 24px;}

.hw-48{height: 48px; width: 48px; min-width: 48px;}
.custom-video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.custom-video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.overHidden{overflow: hidden;}
.page-box ol{list-style: decimal; margin-left: 24px;}
/* End Common */