/* Typography ----------------------------------*/

@font-face {
    font-family: "NunitoSans-Regular";
    src: url("/assets/fonts/Nunito-Sans/NunitoSans-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Nunito-Sans-Italic";
    src: url("/assets/fonts/Nunito-Sans/NunitoSans-Italic.ttf") format("truetype");
}

@font-face {
    font-family: "Nunito-Sans-SemiBold";
    src: url("/assets/fonts/Nunito-Sans/NunitoSans-SemiBold.ttf") format("truetype");
}

@font-face {
    font-family: "Nunito-Sans-SemiBoldItalic";
    src: url("/assets/fonts/Nunito-Sans/NunitoSans-SemiBoldItalic.ttf") format("truetype");
}

@font-face {
    font-family: "Nunito-Sans-Bold";
    src: url("/assets/fonts/Nunito-Sans/NunitoSans-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "Brand-Itallic";
    src: url("/assets/fonts/Brand-Font/Poppins-Italic.ttf") format("truetype");
}

@font-face {
    font-family: "Brand-SemiBold-Italic";
    src: url("/assets/fonts/Brand-Font/Poppins-SemiBoldItalic.ttf") format("truetype");
}

/*Typography----------------------------------*/

* {
    box-sizing: border-box;
}

body,
html {
    font-size: 14px;
}

body {
    font-size: 14px;
    margin: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    font-family: "NunitoSans-Regular", Sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "NunitoSans-Regular", Sans-serif;
    margin-bottom: 0.5rem;
    font-weight: 400;
    line-height: 1;
}

a {
    text-decoration: none;
}

[class*=" col-custom-"],
[class^="col-custom-"] {
    position: relative;
    width: 100%;
}

.col-custom-5 {
    width: 41.6666666667%;
}

.col-custom-7 {
    width: 58.3333333333%;
}

.parent-flex,
.parent-flex-cards {
    display: flex;
}

.no-margin {
    margin: 0;
}

.mt-0 {
    margin-top: 0;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.display-none {
    display: none;
}

.highlight-border {
    border: 1px solid #DA3849 !important;
}

/*.disabled {
    cursor: no-drop !important;
    color: #5A6278 !important;
    background: #D7E0E9 !important;
}*/

.login-main {
    min-height: 100vh;
    height: 100%;
}

.login-main .login-bg-wrapper {
    background: rgb(55,39,116);
    background-image: url("/assets/images/login_background.svg");
    width: 100%;
    background-position: 0 100%;
    background-size: cover;
    min-height: 100vh;
    height: 100%;
    padding: 0 69px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-main .login-wrapper {
    width: 100%;
    max-width: 520px;
    position: relative;
}

.login-main .login-wrapper h1 {
    margin: 0;
    font-size: 26px;
    line-height: 36px;
    color: #332970;
    font-family: "Brand-Itallic", Sans-serif;
}

.login-main .login-wrapper .logo-wrapper {
    padding: 0;
    text-align: center;
}

.login-main .login-wrapper .logo-wrapper .logo {
    width: 208px;
}

.input-wrapper {
    position: relative;
}

.input-wrapper label,
.input-wrapper input {
    font-size: 14px;
    line-height: 18px;
    color: #5A6278;
    display: block;
    width: 100%;
    margin-bottom: 6px;
}

.input-wrapper label {
    margin-top: 16px;
}

.input-wrapper input {
    height: 40px;
    padding: 0 16px;
    border-radius: 6px;
    /* margin: 0 0 16px; */
    border: 1px solid #BDC5CB;
    font-family: "Nunito-Sans-SemiBold", sans-serif;
}

input:focus,
input:focus-visible {
    outline: none;
    border: 1px solid #00CFFF !important;
}

.login-main .login-wrapper__right-block {
    background: #fff;
    border-radius: 6px;
    padding: 12% 10%;
    box-shadow: 0px 30px 75px 0px #00000033;
}

.login-block #login-form {
    margin-bottom: 0;
}

.login-main .login-wrapper__right-block .login-form-wrapper {
    margin-top: 25px;
}

.login-main .login-wrapper__right-block .login-form-wrapper h4 {
    font-size: 20px;
    line-height: 26px;
    color: #332970;
    margin: 0 0 16px;
    font-family: "Nunito-Sans-SemiBoldItalic", sans-serif;
}

.login-main .login-wrapper__right-block .button-wrapper {
    padding-top: 16px;
    margin-top:16px;
}

.login-main .login-wrapper__right-block .link-wrapper {
    display: inline-block;
    text-align: right;
    color: #08A0C3;
    padding-top: 16px;
    font-size: 14px;
    line-height: 18px;
    font-family: "Nunito-Sans-SemiBold", sans-serif;
}

.login-main .login-wrapper__right-block .back-btn {
    padding-top: 8px;
    color: #08A0C3;
    cursor: pointer;
}

.login-main .login-wrapper__right-block .button-primary {
    padding: 11px;
    border: none;
    height: 40px;
    border-radius: 5px;
    color: #332970;
    cursor: pointer;
    width: 100%;
    background-color: #00CFFF;
    transition: 0.2s ease-in-out;
    font-size: 14px;
    line-height: 18px;
    font-family: "Nunito-Sans-SemiBold", Sans-serif;
}

.login-main .login-wrapper__right-block .button-primary:hover {
    box-shadow: 0px 5px 7px rgba(32, 122, 167, 0.1);
}
.login-main .login-wrapper .bottom-info-wrapper {
    padding-top: 5px;
}

.login-main .login-wrapper .bottom-info-wrapper .bottom-info-left,
.login-main .login-wrapper .bottom-info-wrapper .bottom-info-right {
    font-size: 14px;
    line-height: 18px;
    color: #ffffff;
}

.login-main .login-wrapper .bottom-info-wrapper .bottom-info-left span,
.login-main .login-wrapper .bottom-info-wrapper .bottom-info-right span,
.login-main .login-wrapper .bottom-info-wrapper .bottom-info-left em,
.login-main .login-wrapper .bottom-info-wrapper .bottom-info-right em {
    font-family: "Nunito-Sans-Bold", Sans-serif;
    font-style: normal;
}

.login-main .login-wrapper .bottom-info-wrapper .bottom-info-right {
    float: right;
}

.login-main .login-form-invalid > div {
    font-size: 14px;
    line-height: 18px;
    border-radius: 3px;
    color: #DA3849;
}

.sent-mail-header {
    font-size: 20px;
    color: #34c6f4;
}

.field-validation-error {
    font-size: 12px;
    border-radius: 3px;
    color: #DA3849;
    padding: 0;
    display: none;
}

.login-main .otp-wrapper h1 {
    margin-top: 0;
}

.login-main .otp-wrapper .login-wrapper__right-block {
    min-height: 480px;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.otp-wrapper .login-label {
    font-size: 14px;
    line-height: 18px;
    text-align: center;
    display: inline-block;
}

.login-main .otp-form-wrapper .otp-form {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0;
}

.login-main .otp-form-wrapper .otp-form input {
    height: 40px;
    width: 40px;
    border: 1px solid #bdc5cb;
    margin-right: 7px;
    border-radius: 6px;
    background: transparent;
    text-align: center;
    font-size: 20px;
    line-height: 26px;
    font-family: "Nunito-Sans-SemiBoldItalic", sans-serif;
}

.login-main .otp-form-wrapper .otp-form_label {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 21px;
    color: #080e21;
    margin: 48px 0 16px;
    padding: 0 20px;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}
.floating-input {
    height: 110px;
    border-radius: 6px;
    border: 1px solid #BDC5CB;
    font-family: "Nunito-Sans-SemiBold", sans-serif;
    color: #5A6278;
    font-size: 14px;
    line-height: 18px;
    width: 100%;
    display: block;
}
textarea{
    resize: none;
}
textarea:focus,
textarea:focus-visible {
    outline: none;
    border: 1px solid #00CFFF !important;
}
#otpForm .button-wrapper {
    width: 100%;
    padding: 0;
}

#invalid-otp-message .field-validation-error {
    padding: 16px 0 0;
    font-size: 14px;
    display: none;
}
.error-message {
    font-size: 12px;
    border-radius: 3px;
    color: #DA3849;
    padding: 0;
    display:none
}
.common-error {
    font-size: 14px;
    border-radius: 3px;
    color: #DA3849;
    padding: 12px 60px 0;
}

.flex-container {
    display: flex;
    justify-content: space-between;
    height: 24px;
    margin: 12.5px auto;
}

.link-wrapper-mine {
    color: var(--light-theme-dark-tones-001, #5A6278);
    /* Help Text/Regular */
    font-family: "NunitoSans-Regular";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 15px; /* 125% */
    display: contents;
}

.content-wrapp {
    display: flex;
    justify-content: space-between;
}
.link-go-back-bottom {
    color: var(--light-theme-primary-primary-buttons, #08A0C3);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 21px;
    font-family: "NunitoSans-Regular", Sans-serif;
    display: block;
    width: 120px;
    border-radius: 5px;
    border: 1px solid var(--dark-theme-blue-grey-b-200, #738EAB);
    text-align: center;
    height: 40px;
    padding: 9px 15px;
}
.login-form-wrapper .button-send:disabled {
    background: var(--light-theme-dark-tones-004, #D7E0E9);
    color: var(--light-theme-dark-tones-001, #5A6278);
    cursor: not-allowed;
}
.button-send {
    width: 150px;
    height: 40px;
    padding: 9px 20px;
    border: none;
    border-radius: 5px;
    color: #332970;
    cursor: pointer;
    background: #00CFFF;
    transition: 0.2s ease-in-out;
    font-size: 14px;
    line-height: 18px;
    font-family: "Nunito-Sans-SemiBold", Sans-serif;
}

.login-main .login-wrapper__right-block .button-send:hover {
    box-shadow: 0px 5px 7px rgba(32, 122, 167, 0.1);
}
.login-main .login-wrapper__right-block .link-go-back-bottom:hover {
    box-shadow: 0px 5px 7px rgba(32, 122, 167, 0.1);
}

@media(max-device-width: 570px) {
    .content-wrapp {
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        margin-top: 0px;
    }
    .link-go-back-bottom {
        width: 100%;
    }
    .button-send {
        width: 100%;
    }
}
@media(max-device-width: 540px) {
    .flex-container {
        margin: 15px auto;
    }
}

@media(max-device-width: 520px) {
    .flex-container {
        margin: 17px auto;
    }
}

@media(max-device-width: 470px) {
    .flex-container {
        margin: 19px auto;
    }
}

@media(max-device-width: 430px) {

    .flex-container {
        flex-direction: column;
        align-items: center;
        margin: 0;
    }
}

@media(max-device-width: 303px) {
    .login-wrapper__right-block {
        height: 550px !important;
    }
}

@media (max-device-width: 992px) {
    .login-main .login-bg-wrapper {
        padding: 20px 30px;
    }
}

@media (max-device-width: 768px) {

    .common-error,
    .login-main .otp-form-wrapper .otp-form_label {
        padding: 0;
    }
}