@font-face {
    font-family: Lato;
    src: url('../font/Lato-Light.ttf') format('truetype');
}

@font-face {
    font-family: Ubuntu;
    src: url('../font/Ubuntu-Medium.ttf') format('truetype');
}

body {
    background-image: url("../img/background3.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.login-main {
    width: 529px;
    border-radius: 25px;
    background: #0D0D0D26;
}

.login-title {
    color: #ffffff;
    font-family: Lato;
    font-size: 48px;
    font-weight: 600;
    line-height: 58px;
    letter-spacing: 0.015em;
    text-align: left;
}

.login-data {
    /*width: 419px;*/
    height: 351px;
}

.input-container {
    display: inline-block;
    position: relative;
    background: linear-gradient(91.24deg, #91CBD7 7.16%, #4E74D5 49.52%, #9747FF 93.04%);
    border-radius: 35px;
    padding: 2px;
}

.form-input {
    display: block;
    border-radius: 35px;
    background-color: #FFFFFF;
    /*width: 425px;*/
    height: 50px;
    /*top: 92px;*/
}

/*.wrap-input {*/
/*    position: relative;*/
/*    width: 100%;*/
/*    z-index: 1;*/
/*    margin-bottom: 10px;*/
/*}*/

.btn-submit {
    height: 50px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.7) 16.94%, rgba(255, 255, 255, 0.4) 62.21%, rgba(255, 255, 255, 0) 91.41%);
    border: 1px solid #FFFFFF;
    border-radius: 35px;
    font-family: Lato;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 0.051em;
    text-align: center;
    color: #FFFFFF;
}

#opt-submit, #fido-submit{
    width: 357px;
    margin: 0 12px;
}

#nav-loginPwd-tab {
    padding: 10px 24px 10px 24px;
    color: #ffffff;
    font-size: 18px;
    font-family: Lato
}

#nav-loginFido-tab {
    padding: 10px 48px 10px 45px;
    color: #ffffff;
    font-size: 18px;
    font-family: Lato
}

.nav-tabs > .nav-link.active {
    background: none;
    border-bottom-width: thick;
}

.inputText {
    height: 50px;
    border-style: none;
    outline: none;
    background: #FFFFFF;
}

.rememberMe {
    color: #FFFFFF;
    font-family: Lato;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.006em;
    text-align: left;
}

#nav-title {
    color: #FFFFFF;
    font-family: Ubuntu;
    font-size: 26px;
}

.nav-option {
    color: #FFFFFF;
    font-family: Lato;
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0.006em;
    text-align: left;
}

.nav-option:hover,
.nav-item > .nav-option.active{
    color: #FFFFFF;
    font-weight: bold;
}

#welcome {
    /*height: 158px;*/
    font-family: Lato;
    font-style: normal;
    font-weight: 400;
    font-size: 64px;
    line-height: 77px;
    letter-spacing: 0.000999999em;
    color: #FFFFFF;
}

.loginAfter {
    /*width: 348px;*/
    height: 283px;
    /*margin-left: 91px;*/
    /*margin-top: 104px;*/
}

.loginImg {
    width: 170px;
    height: 170px;
    /*margin-left: 80px;*/
    /*margin-bottom: 23px;*/
}

.loginText {
    font-family: Lato;
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 43px;
    text-align: center;
    letter-spacing: 0.03em;
    color: #FFFFFF;
}

#successText{
    /*margin-left: 30px;*/
}

#failText{
    /*margin-left: 65px;*/
}

#fidoText {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 38px;
    text-align: center;
    letter-spacing: 0.03em;
    color: #FFFFFF;
    /*margin-left: 77px;*/
}

.loginDescription {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
    letter-spacing: 0.03em;
    color: #FFFFFF;
}

.otpVerify{
    /*width: 382px;*/
    /*height: 463px;*/
    /*margin-left: 73px;*/
    /*margin-top: 57px;*/
}

#otpImg{
    width: 120px;
    height: 120px;
    /*margin-left: 130px;*/
}

#checkedImg{
    width: 190px;
    height: 170px;
}

#fidoImg{
    width: 150px;
    height: 120px;
    /*margin-left: 130px;*/
}

#otpDes{
    font-family: Lato;
    font-size: 18px;
    font-weight: 300;
    line-height: 22px;
    letter-spacing: 0.03em;
    text-align: center;
}

#otpText{
    font-family: Lato;
    font-size: 32px;
    font-weight: 700;
    line-height: 38px;
    letter-spacing: 0.03em;
    text-align: center;
}

#inputOtps > .inputOtp {
    font-family: Lato;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: 0.051em;
    text-align: center;
    color: #FFFFFF;
    width: 47px;
    height: 53px;
    background: rgba(255, 255, 255, 0.3);
    border: none;
    border-radius: 8px;
    font-size: 24px;
    cursor: not-allowed;
    pointer-events: none;
}

#inputOtps > .inputOtp:focus {
    outline: none;
}

#inputOtps > .inputOtp:nth-child(1) {
    cursor: pointer;
    pointer-events: all;
}

#otpFail{
    font-family: Lato;
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0.03em;
    text-align: center;
    color: #FFFFFF;
}