.login-box .login-bg { padding-bottom: 60px; }
.login-box .login-bg .login-main { width: 1130px; align-items: flex-start; }
.login-box .login-bg .login-main .login-right .login-text { font-size: 30px; margin-bottom: 30px; }
.login-box .login-bg .login-main .login-right .form-control { margin-bottom: 20px; }
.login-box .login-bg .login-main .login-right .form-control label { color: #606060; font-size: 18px; line-height: 24px; margin-bottom: 10px; padding: 0; }
.login-box .login-bg .login-main .login-right .form-control .itemNote { font-size: 16px; line-height: 22px; color: #FFFFFF; margin: 0; margin-bottom: 10px; }

/*.login-box .login-bg .login-main .login-right .orange-btn { margin-top: 20px; background: #FE8E14; color: #FFFFFF; transition: all ease-in-out .3s; }
.login-box .login-bg .login-main .login-right .orange-btn:hover { box-shadow: -8px 8px 0 0 #FFFFFF; transform: translate(8px,-8px); }
*/
.login-box .login-bg .login-main .login-right p.changeSignin { display: inline-block; text-align: left; margin-bottom: 0; float: right; line-height: 26px; }

.login-box .login-bg .login-main .login-right .errorMsgSpan { display: none; color: #DF3838; float: right; font-size: 16px; }
.login-box .login-bg .login-main .login-right .errorLine .login-input { border: 2px solid #DF3838; }


.login-box .login-bg .login-main .login-right .errorMsg { margin: 0 !important; bottom: -23px; }
.login-box .login-bg .login-main .login-right .errorMsg.pstatic { position: static; }
.iti { width: 100%; }
.iti--separate-dial-code .iti__selected-dial-code { color: #323235; }
.iti__country { color: #323234; }

/* Dymansoft Checkbox And Select */
.d-checkbox { display: block; margin-top: 25px; }
.d-checkbox input[type=checkbox] { position: relative; appearance: none; -moz-appearance: none; -webkit-appearance: none; cursor: pointer; margin: 0; outline: none; vertical-align: top; margin-top: 2px; }
.d-checkbox input[type=checkbox]:active, input[type=checkbox]:focus { box-shadow: 0; border: 0; }
.d-checkbox input[type=checkbox]:before { display: inline-block; border: 2px solid #FE8E14; background: #FFFFFF; content: ""; color: #999999; font-size: 14px; width: 18px; height: 18px; line-height: 21px; text-align: center; border-radius: 0; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; vertical-align: middle; }
.d-checkbox input[type=checkbox]:hover:before { border-color: #FE8E14; box-shadow: 0px 0px 4px 1px #FE8E14B8; }
.d-checkbox input[type=checkbox]:checked:after { position: absolute; top: 10px; left: 6px; display: table; border: 2px solid #FE8E14; border-top: 0; border-left: 0; transform: rotate(45deg) scale(1) translate(-50%, -50%); opacity: 1; transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s; content: ' '; width: 5px; height: 10px; }
.d-checkbox label { margin-bottom: 0; line-height: 20px; font-size: 14px; vertical-align: middle; margin-left: 10px; display: inline; padding: 0; color: #fff; display: inline-block; width: calc(100% - 50px); }
.d-checkbox:last-child { margin-top: 10px; }
.login-box .login-bg .login-main .login-right .form-control .d-checkbox label { line-height: 20px; font-size: 14px; color: #606060; }

/* website prefix */
.form-control.prefix { position: relative; }
.form-control.prefix div { position: absolute; background-color: #f5f5f5; height: 54px; line-height: 54px; font-size: 16px; bottom: 0; left: 0; padding: 0 10px; color: black; }
.login-box .login-bg .login-main .login-right .form-control.prefix input.login-input { padding-left: 82px; }

.registLoading { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(255,255,255,.5); z-index: 5; display: flex; justify-content: center; align-items: center; }
.registLoading::after { content: ""; display: block; width: 4em; height: 4em; border: 6px solid #fe8e14; border-bottom-color: transparent; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; }

.login-box .login-bg .privacyStatement { width: 100%; max-width: 800px; margin: 30px auto; }
.login-box .login-bg .privacyStatement p { margin: 0; font-size: 12px; color: #606060; line-height: 20px; text-align: center; }

.login-box .login-bg .login-main .login-right .orange-btn { width: 170px; }

@keyframes rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (max-width: 1366px) {
    .login-box .login-bg .login-main { width: 1050px; }
    .login-box .login-bg .login-main .login-left { width: 400px; }
    .login-box .login-bg .login-main .login-right .form-control label { font-size: 16px; line-height: 22px; }
    .login-box .login-bg .login-main .login-right .form-control .itemNote { font-size: 14px; line-height: 20px; }
    .login-box .login-bg .login-main .login-right .orange-btn { margin-top: 10px; }
    .login-box .login-bg .login-main .login-right .form-control { margin-bottom: 14px; }
    .login-box .login-bg .login-main .login-right .content { padding-top: 48px; }
    .login-box .login-bg .login-main .login-right .errorMsgSpan { font-size: 14px; }
    .login-box .login-bg .login-main .login-right p.changeSignin { margin-top: 10px; }
}

@media (max-width: 1200px) {
    .login-box .login-bg .login-main { width: 970px; }
    .login-box .login-bg .login-main .login-left { margin-right: 70px; /*padding-top: 90px;*/ }
    .login-box .login-bg .login-main .login-right { width: 470px;  }
    .login-box .login-bg .login-main .login-right .login-text { font-size: 26px; }
    .login-box .login-bg .login-main .login-right .content { padding: 35px 0 10px 0; }
}

@media(max-width: 991px) {
    .login-box .login-bg .login-main { width: 100%; }
    .login-box .login-bg .login-main .login-left { display: block; margin: 0 auto; padding-top: 20px; padding-bottom: 20px; }
    .login-box .login-bg .login-main .login-right { display: block; margin: 0 auto; padding: 0 }
    .login-box .login-bg .login-main .login-right .content { padding: 0; top: 30px; }
    .d-checkbox { margin-right: 40px; }
    .d-checkbox input[type=checkbox]:before { width: 18px; height: 18px; line-height: 16px; }
    .d-checkbox input[type=checkbox]:checked:after { top: 8px; left: 4px; width: 7px; height: 12px; }
    .d-checkbox label { height: 18px; line-height: 18px; font-size: 14px; margin-left: 6px; }

    .form-control.prefix div { height: 40px; line-height: 40px; }
}

@media(max-width: 767px) {
    .show-sm { display: inline-block; }
    .d-checkbox { margin-right: 0; }
    .login-box .login-bg .login-main .login-right .content { padding: 0;  top: 30px; }
}

@media(max-width: 550px) {
    .d-checkbox { margin-right: 0; }
    .login-box .login-bg .login-main .login-right, .login-box .login-bg .login-main .login-left { width: 100%; max-width: 400px; margin: 0 auto; }
    .login-box .login-bg .login-main .login-right p.changeSignin { display: block; float: none; }
    .login-box .login-bg .login-main .login-right p.changeSignin br { display: none; }
}

.login-box .login-bg .login-main .login-right p.itemNote { margin-top: 0; }
.basicForm .basicFormGroup { margin-bottom: 15px; height: 55px; background-color: white; position: relative; border: 1px solid #606060; }
.basicForm .basicFormGroup.errorLine { border: 2px solid #DF3838; }
.basicFormGroup.phoneNumberField { overflow: visible; }

.basicFormGroup .prefix { position: absolute; line-height: 55px; width: 80px; padding: 0 12px; height: 100%; font-size: 16px; color: #323234; background-color: #F5F5F5; }
.basicFormGroup .iti { width: 100% !important; height: 100%; font-size: 16px; }
.iti--separate-dial-code .iti__selected-flag { min-width: 80px; }

.basicForm .basicFormGroup .basicFormInput,
.basicForm .basicFormGroup .basicFormTextArea { width: 100%; height: 100%; border: none; outline: none; font-size: 16px; padding: 0; padding-left: 20px; padding-top: 12px; }
.basicForm .basicFormGroup .basicFormInput:placeholder-shown + .fieldLabel { font-size: 16px; top: 50%; transform: translateY(-50%); }
.basicForm .basicFormGroup .basicFormInput:placeholder-shown + .fieldLabel::after { content: attr(placeholder) }

/* field label */
.fieldLabel { transition: ease-in-out all .3s; pointer-events: none; color: #AAAAAA; margin: 0; display: inline-block; position: absolute; left: 20px; }
.fieldLabel.websiteLabel, .fieldLabel.phoneNumberLabel { left: 100px; }

.basicFormInput#Website { padding-left: 100px; }
.basicFormInput#PhoneNumber { padding-left: 100px !important; }

.fieldLabel { transition: ease-in-out all .3s; pointer-events: none; color: #AAAAAA; margin: 0; display: inline-block; position: absolute; left: 20px; }
.basicForm .basicFormGroup .basicFormInput + .fieldLabel,
.basicForm .basicFormGroup .basicFormInput:focus + .fieldLabel { font-size: 13px; top: 5px; transform: unset; }
.basicForm .basicFormGroup .basicFormInput + .fieldLabel::after,
.basicForm .basicFormGroup .basicFormInput:focus + .fieldLabel::after { content: attr(value) }

.devideLine { color: #707070; margin: 20px 0; position: relative; font-size: 16px; line-height: 20px; text-align: center; }
.devideLine::after { content: ""; position: absolute; width: 30%; height: 1px; background: #aaaaaa; right: 0; top: 10px; }
.devideLine::before { content: ""; position: absolute; width: 30%; height: 1px; background: #aaaaaa; left: 0; top: 10px; }