.back-btn-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 3%;
    display: flex;
    align-items: center;
}

.back-btn-wrapper.noBoMarg {
    margin-bottom: 0;
}

.back-btn {
    position: relative;
    cursor: pointer;
}

.back-btn::after {
    content: '\2190';
    position: relative;
    top: 0;
    left: 0;
    font-size: 2rem;
    color: #2E431D;
    
    margin-right: 5px;
}

.back-btn-wrapper span {
    font-size: 1rem;
    color: #2E431D;
    cursor: pointer;
    font-weight: 500;
}

.form {
    overflow: hidden;
}

.form.row, .form.center {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.form textarea {
    width: 100%;
    resize: vertical;
}

.form.row textarea {
    width: 70%;
    font-size: 1.125rem;
    border: none;
    padding: 0 30% 0 1rem;
    height: 8.75rem;
}

.form input, .form select {
    width: 100%;
    font-size: 1.125rem;
    padding: .8rem 2.5rem .8rem .8rem;
    border: 1px solid #727272;
}

.form input.upper {
    text-transform: uppercase;
}

.form select:disabled {
    pointer-events: none;
}

.form input:disabled {
    background-color: #F5F5F5;
    color: rgb(99, 99, 99);
}

/* .form select {
    appearance: none;
    background-image: url('/assets/icon/arrow-down.svg');
    background-repeat: no-repeat;
    background-position: 95% center;
    cursor: pointer;
} */

.form .select-container {
    width: 100%;
    z-index: 1;
}

.form .select-container select {
    background: transparent;
    border: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('/assets/icon/arrow-down.svg');
    background-repeat: no-repeat;
    background-position: 95% center;
    cursor: pointer;
}

.form .select-box {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid #727272;
    background-color: white;
    top: 0;
    left: 0;
    z-index: -1;
}

.form .select-box.disabled {
    background-color: #F8F8F8;
}

.form select.fullWidth {
    background-position: 98% center;
}

.form .radio-container {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 1em;
}

.form .radio-container input[type="radio"] {
    width: fit-content;
    width: -moz-fit-content;
    padding: 0;
    margin-right: 1.25em;
}

.form .radio-container label, .form .channel-option label {
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
}

.form.row input {
    width: 100%;
    font-size: 1.125rem;
    border: none;
    padding: 0 30% 0 1rem;
}

.form label {
    display: block;
    font-size: 1.125rem;
    color: #2B2B2B;
    font-weight: 400;
    margin-bottom: .625rem;
}

.form.row label {
    white-space: nowrap;
    color: #2E431D;
    margin-bottom: 0;
}

.form .required-remind {
    color: red;
}

.input-col-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.input-col-container.end {
    align-items: flex-end;
}

.input-col-container.stretch {
    align-items: stretch;
}

.input-col-container.center {
    align-items: center;
}

.input-col-container.upload-field.hide {
    display: none;
}



.input-col {
    width: 100%;
    margin-right: 1.5em;
}

.form.margin .input-col {
    margin-bottom: 2%;
}

.input-col:last-of-type {
    margin-right: 0;
}

.form.row .input-col {
    margin-right: 0;
}

.input-col.noSpace,
.input-col-container .option-field.noSpace {
    width: calc((100% - 1.5em)/2);
}

/* .input-col.noSpace:last-of-type {
    margin-right: 1.5em;
} */

.input-container:focus-within .input-placeholder:not(.no-focus), .input-container:focus .input-placeholder:not(.no-focus) {
    top: 2.5px;
    transform: translateY(-90%) scale(0.9);
    background-color: transparent;
    width: auto;
}

.form.row .input-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3% 0;
}

.form.row .input-wrapper.first {
    padding: 0 0 3%;
}

.form.row .input-wrapper::after {
    content: '';
    width: 100%;
    height: 2px;
    background-color: #CECECE;
    position: absolute;
    bottom: 0;
    left: 0;
}

.form.row .input-wrapper::before {
    content: '';
    width: 20%;
    height: 2px;
    background-color: #507C39;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.form.row .input-wrapper .label {
    width: 20%;
}

.form.row .input-wrapper .input {
    width: 80%;
}

/* tick ok css */

.input-container .input-icon {
    position: absolute;
    /* top: 50%; */
    right: .5rem;
    width: 2rem;
    height: 2rem;
    bottom: 0;
    transform: translateY(-30%);
    z-index: 2;
}

.input-container .input-icon.pw {
    right: 2rem;
}

.input-container .input-icon.ca {
    right: 2.5rem;
}

.form.row .input-container .input-icon {
    transform: none;
}

.input-icon>svg .arrow {
    fill: #000;
}

.input-icon>svg, .input-icon>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

svg.tick-ok path {
    transition: stroke-dashoffset 0.3s ease;
    stroke-dashoffset: 60;
}

svg.tick-ok.show path {
    stroke-dashoffset: 0;
}

svg.tick-ok path {
    fill: none;
    stroke: #507C39;
    stroke-miterlimit: 4;
    stroke-width: 1.5;
    stroke-dasharray: 60;
}

.upload-preview .input-icon {
    width: 6%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.upload-preview svg.tick-ok path {
    stroke: #ffffff;
}

/* error css */
.label-des {
    display: inline-block;
    margin-left: 10px;
    color: #CC5071;
    font-size: .75rem;
}

.input-des span.required {
    color: #CC5071;
}

.input-des.sans {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 300;
}

.input-des.sans a {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
}

.input-des {
    font-size: .75rem;
    color: #2B2B2B;
}

.input-des-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #BCBCBC;
    font-size: .9375rem;
    font-weight: 400;
    margin-top: .5em;
    margin-bottom: .5em;
    letter-spacing: .015rem;
}

.form.row .input-des-block {
    position: absolute;
    bottom: .3125rem;
    margin: 0;
    right: 0;
}

.input-des-block.rev {
    margin-bottom: .5em;
    margin-top: 0;
}

.form:not(.row) input.error, .form:not(.row) select.error {
    border: 1px solid red;
}

.input-des-block .error-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .8rem;
    color: #CC5071;
    letter-spacing: .015rem;
}

.input-des-block .error-block>div {
    visibility: hidden;
    justify-content: space-between;
    align-items: center;
    width: 0;
    height: 0;
}

.input-des-block .error-block>div.show {
    display: flex;
    visibility: visible;
    width: auto;
    height: auto;
}

.input-des-block .error-block>.input-error::before {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    background: url("/assets/icon/icon-error.svg") center/100% no-repeat;
    margin-right: .5em;
}

.form a.link {
    display: block;
    position: relative;
    cursor: pointer;
    color: #2B2B2B;
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: .0625rem;
    margin-bottom: 10%;
    width: fit-content;
    width: -moz-fit-content;
}

.form a.link:hover {
    text-decoration: underline;
    color: #507C39;
}

.form a.link-underline {
    display: block;
    text-decoration: underline;
    font-size: .875rem;
    margin-top: 5%;
    color: #2B2B2B;
    font-weight: 400;
}

.form a.link-underline:hover {
    color: #2E431D;
}

.button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.form .button-wrapper {
    justify-content: flex-start;
}

.form .button-wrapper>button:not(:last-of-type) {
    margin-right: 5%;
}

.button-wrapper.start {
    width: 100%;
    justify-content: flex-start;
}


.form-btn {
    width: 100%;
    height: auto;
    font-size: .875rem;
    padding: .8rem;
    box-sizing: border-box;
    background-color: #2E431D;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-btn {
    width: 12.5rem;
    height: 3.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: .625rem;
    color: white;
    font-size: 1rem;
    transition: .3s ease-in-out;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    font-weight: 400;
}

.action-btn.submit {
    background-color: #2E431D;
}

.action-btn.submit:hover {
    background-color: #507C39;
}

.action-btn.link {
    background-color: #696969;
}

.action-btn.link:hover {
    background-color: #919191;
}

.action-btn.margin {
    margin-top: 10%;
}

.action-btn.margin-sm {
    margin-top: 3%;
}

.action-btn.fullWidth {
    width: 100%;
}

.forget-btn.hide {
    display: none;
}

.form-top {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.form-top>a {
    color: #B9B9B9;
    font-weight: 500;
    font-size: 1.25rem;
}

.form-top>a:hover {
    color: #2E431D;
}

.form .btn-show-pw {
    position: absolute;
    z-index: 2;
    right: .5rem;
    width: 1.5rem;
    height: 1.5rem;
    bottom: 0;
    transform: translateY(-50%);
    cursor: pointer;
}

.form small {
    font-size: .875rem;
    color: #2B2B2B;
    width: 100%;
    display: block;
    font-weight: 400;
    margin-bottom: 3%;
}

.form small.center {
    margin-top: 3%;
    text-align: center;
}

.form small>a {
    font-weight: 500;
}

.form small>a:hover {
    text-decoration: underline;
}

/* credit card css */

.input-container .input-icon.card {
    width: 3rem;
    right: 2.75rem;
}

.input-container .input-icon.card span {
    width: 100%;
    height: 100%;
}

.input-icon.card[data-type="AmEx"] span {
    background: url('/assets/icon/creditcard/amex.svg') center/contain no-repeat;
}

.input-icon.card[data-type="Visa"] span {
    background: url('/assets/icon/creditcard/visa.svg') center/contain no-repeat;
}

.input-icon.card[data-type="Mastercard"] span {
    background: url('/assets/icon/creditcard/mastercard.svg') center/contain no-repeat;
}

.input-icon.card[data-type="Maestro"] span {
    background: url('/assets/icon/creditcard/maestro.svg') center/contain no-repeat;
}

.input-icon.card[data-type="JCB"] span, .input-icon.card[data-type="JCB15"] span {
    background: url('/assets/icon/creditcard/jcb.svg') center/contain no-repeat;
}

.input-icon.card[data-type="UnionPay"] span {
    background: url('/assets/icon/creditcard/unionpay.svg') center/contain no-repeat;
}

.input-icon.card[data-type="Discover"] span {
    background: url('/assets/icon/creditcard/discover.svg') center/contain no-repeat;
}

.input-icon.card[data-type="Diners"] span {
    background: url('/assets/icon/creditcard/diners.svg') center/contain no-repeat;
}

/* phone input css */

.phone-container .num-input {
    padding-left: 4.5rem;
}

.form .dropdown {
    position: absolute;
    top: 50%;
    left: .5rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    height: fit-content;
    height: -moz-fit-content;
    cursor: pointer;
    z-index: 2;
}

.form .dropdown.input-dropdown {
    width: 100%;
    top: 100%;
    left: 0;
    transform: none;
}

/* .form .dropdown.input-dropdown ul {
    background-color: white;
    padding: 0 .5em;
    overflow: hidden;
    max-height: 0;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 16%);
    transition: all .2s ease;
}

.form .dropdown.input-dropdown ul.active {
    max-height: 1000px !important;
    padding: .5em;
} */

.channel-option ul, .channel-option li {
    width: 100%;
}

.channel-option li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.channel-option li input[type="checkbox"] {
    width: fit-content;
    width: -moz-fit-content;
    margin-right: 1.5em;
}

.dropdown input {
    width: 100%;
    font-size: .9375rem;
    padding: .5rem;
    border: 1px solid #b5b5b5;
    border-radius: 5px;
    background-color: #F8F8F8;
}

.flag {
    width: 2.0625rem;
    height: 1.375rem;
}

.dropdown .dropdown-btn {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.current-option-text {
    position: relative;
    margin-right: 8px;
}

.lang-dropdown .current-option-text {
    text-transform: uppercase;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.current-option-text .country-code {
    display: none;
}

.country-code {
    font-size: .875rem;
}

.option-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    z-index: 2;
    width: 12.5rem;
    max-height: 0px;
    left: 0;
    transition: all .2s ease;
    overflow: hidden;
    box-shadow: 0px 3px 6px rgb(0 0 0 / 16%);
}

.option-container .option {
    text-align: center;
    background-color: white;
    padding: 3px;
    border: 4px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.option-container .option .flag {
    display: none;
}

.dropdown.active .country-select-container, .dropdown:hover .country-select-container {
    max-height: 12.5rem;
    overflow: auto
}

.disCode-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.disCode-container .input-col {
    width: 67%;
}

.disCode-container button {
    width: 30%;
}

input[type="file"] {
    width: 0;
    height: 0;
    opacity: 0;
}

.upload-preview{
    width: 100%;
    height: auto;
    background-color: #507C39;
    margin-top: .3125rem;
    justify-content: space-between;
    align-items: center;
    padding: .1875rem 1.2rem;
    display: none;
}

.upload-preview.show {
    display: flex;
}

.upload-preview>* {
    color: #ffffff;
}

.upload-preview .btn-delete::after {
    content: '\2715';
    font-size: 1rem;
    font-weight: 500;
    color: white;
    cursor: pointer;
}

.upload-preview .filename,
.upload-preview .filename>* {
    font-size: .875rem;
    color: #ffffff;
}

.upload-loading {
    width: 100%;
    height: 1.875rem;
    background-color: #507C39;
    margin-top: .3125rem;
    display: none;
}

.upload-loading.show {
    display: block;
}

.upload-loading.processing {
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background-color: #507C39;
    background: linear-gradient(to right, #507C39 8%, #2E431D 18%, #507C39 33%);
    background-size: 100%;
    position: relative;
    color: white;
    pointer-events: none;
}

@keyframes placeHolderShimmer {
    0% {
        background-position: 0 0
    }
    100% {
        background-position: 1000px 0
    }
}



.option-field {
    width: 100%;
    display: block;
}

.input-col-container .option-field:not(:last-of-type) {
    margin-right: 1.5em;
}

.form .hide {
    display: none;
}

/* .date-remind {
    display: none;
} */

/* .course-date-container.show .date-remind {
    display: inline;
} */

.partTwo, .partOneTime {
    display: none;
}

.course-date-container.show .partTwo {
    display: flex;
}

.course-date-container.show .partOneTime {
    display: block;
}

.course-date-container.show .partOne .input-col.noSpace {
    width: 100%;
}

.payment-details label {
    font-size: 1rem;
    color: #2B2B2B;
}

.btn-form-field {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: transparent;
    padding: 0;
    margin: 0;
    z-index: 10;
    background-repeat: no-repeat;
    background-position: 95% center;
    cursor: pointer;
}

.btn-form-field.ca {
    background-image: url('/assets/icon/calendar.svg');
}

.btn-form-field.arrow {
    background-image: url('/assets/icon/arrow-down.svg');
}

.btn-form-field.disabled {
    pointer-events: none;
    background-color: #F8F8F8;
    border: 1px solid #727272;
}

.form-remind {
    display: block;
}

.form-remind.hide {
    display: none;
}

@media(max-width:700px) {
    .input-col-container {
        flex-direction: column;
    }
    .input-col.noSpace,
    .input-col-container .option-field.noSpace {
        width: 100%;
    }
    .form label, .form input, .form a.link, .form textarea, .form input::-webkit-input-placeholder, .form textarea::-webkit-input-placeholder, input {
        font-size: 1rem;
    }
    .input-des-block .error-block {
        font-size: .625rem;
    }
}

@media(max-width:500px) {
    .action-btn {
        width: 9.5rem;
        height: 2.9rem;
        font-size: .825rem;
    }
}