@font-face{ font-family: 'Vietnam'; src: url(../fonts/BeVietnamPro-Light.ttf); font-weight: 300 }
@font-face{ font-family: 'Vietnam'; src: url(../fonts/BeVietnamPro-Regular.ttf); font-weight: 400 }
@font-face{ font-family: 'Vietnam'; src: url(../fonts/BeVietnamPro-Medium.ttf); font-weight: 500 }
@font-face{ font-family: 'Vietnam'; src: url(../fonts/BeVietnamPro-SemiBold.ttf); font-weight: 600 }
@font-face{ font-family: 'Vietnam'; src: url(../fonts/BeVietnamPro-Bold.ttf); font-weight: 700 }
@font-face{ font-family: 'Vietnam'; src: url(../fonts/BeVietnamPro-ExtraBold.ttf); font-weight: 800 }

:root{
    --branco: #EEEEF3;
    --roxo: #6542EB;
    --laranja: #db9140;
    --verde: #51df9b;
    --cinza: #353535;
    --preto: #141414;
    --muitoPreto: #000;
    --cinza-claro: #979797;
    --vermelho: #c73e3e;
}

*{
	font-family: 'Vietnam';
}

.fundo-total{
	background: #232323;	
}

select:focus { outline: none; /* Remove a borda de foco */ }

input:focus { outline: none; /* Remove a borda de foco */ }

hr { border-color: #Fff; }

body{
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* --- login e cadastro ---*/

.containerGeral{
    background-color:var(--muitoPreto);
    width: 100%;
    height: 100vh;
    display: flex; 
    align-items: center;
    justify-content: center 
}

#containerPai{
    width: 100%;
    max-width: 1080px;

}

.container1{
    background-color: var(--preto);
    border-radius: 6px;
    text-align: center;
    display: flex;
    height: 625px
}

.img-container{
    background-image: linear-gradient(rgba(101,66,235,.5), rgba(101,66,235,.5)), url('../img/tela-login.png');
    width: 55%;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 6px;
    margin-left: -12px;
    background-color: var(--roxo)
}

.login-txt, .cadastro-txt, .recuperar-txt, .novasenha-txt{
    width: 50%;
    /* margin: 130px 0; */
    padding: 0 50px;
    padding-left: 62px;
    color: var(--branco);
    line-height: 1.2;
    font-weight: 200;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    gap: 10px;

}

.checkbox {
    border-radius: 6px;
    float: left;
    font-size: 15px;
    accent-color: var(--roxo)
}

.termosUso-cx{
    float: left; 
    margin-top: 10px; 
    font-size: 15px; 
    display: flex; 
    align-items: center
}


.login-titulo, .cadastro-titulo{
    font-weight: 400;
    font-size: 24px;
}

.login-subtitulo, .esqueciSenha, .cadastro-subtitulo{
    color: var(--cinza-claro);
    font-size: 15px
}

.input{
    width: 100%;
    background-color: var(--cinza) !important;
    bordeR: none;
    margin-top: 5px;
    border-radius: 6px;
    height: 42px;
    color: var(--branco);
    padding: 10px 20px;
}

.input::placeholder{
    font-size: 14px
}


.esqueciSenha{
    margin-top: 5px;
    text-align: left;
    font-size: 13px;
    cursor: pointer;
    width: max-content
}

.btn-entrar, .btn-cadastrar{
    background-color: var(--roxo);
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.semconta{
    font-size: 15px;
    color: var(--cinza-claro);
}

.divErro{
    color: var(--vermelho);
    font-size: 13px;
}

#verSenha-login, #verSenha-cadastro{
    position: absolute;
    right: 24px;
    bottom: 12px;
    color: var(--cinza-claro);
    cursor: pointer
}

@media screen and (max-width: 1024px) {
    .container1{
        height: 514px;
    }
}

@media screen and (max-width: 767px) {
    .img-container{
        display: none;
    }

    .login-txt, .cadastro-txt, .recuperar-txt, .novasenha-txt{
        width: 100%;
        padding-left: 50px;
    }
}

@media screen and (max-width: 590px) {
    #containerPai {
        margin: 25px
    }

    .login-txt, .cadastro-txt, .recuperar-txt, .novasenha-txt{
        padding: 0px 20px;
        padding-left: 20px
    }

}

/* --- dashboard ---*/