@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root { --yellow: #f4e51c; --black: #000; --white: #fff; --green: #46ba77; --gray1: #aaaaaa; --gray2:  #231f20; --red: #ff0000; --background: #2e2e2e; --border-radius: 20px; --opacity: 0.7; --transition: all 0.3s; }

body { margin: 0; background-color: var(--white) !important; font-family: "Poppins", sans-serif !important; }

/* LOGIN */
.login .container { width: 100%; height: 100vh; display: flex; align-items: center; }
.login .container .col1 { background-color: var(--black); border-radius: 20px 0px 0px 20px; }
.login .container .col1 .logo { position: relative;  left: 2%; width:300px; }
.login .container div:nth-child(1) { width:50%; height: 90vh; display: flex; align-items: center; justify-content: center; }
.login .container div:nth-child(2) { background: var(--background); width:50%; height: 90vh; border-radius: 0px 20px 20px 0px;  }

.login .container .blocked { display: flex; flex-direction: column; align-items: center ; justify-content: center; }
.login .container .blocked .header { width: 80%; height: 20%; }
.login .container .blocked div:nth-child(2) { width: 80%; height: 40%;}
.login .container .blocked div h1 { color: var(--yellow); margin: 0px !important; }
.login .container .blocked div p span { color: var(--yellow); }
.login .container .blocked div p { color: var(--white); margin: 0px; }

/* Formulario Login */
.login .container div:nth-child(2) form { width: 100%; height: 90vh; display: flex; align-items: center; justify-content: center; flex-direction: column; margin: 1px; }
.login .container div:nth-child(2) form .login {display: flex; flex-direction: column; align-items: start; }
.login .container div:nth-child(2) form .login h1 {height: auto; margin: 0 !important; }
.login .container div:nth-child(2) form .login .forgot {text-decoration: none; font-size: 14px; }
.login .container div:nth-child(2) form div { height: auto; margin-bottom: 20px; width: 50%; position: relative; }
.login .container div:nth-child(2) form div h1 { color: var(--white); width: 100%; font-size: 25px; }
.login .container div:nth-child(2) form div h1 span { color: var(--yellow);}
.login .container div:nth-child(2) form div img { width: 20px; position: absolute; top: 7px; left: 15px; opacity: var(--opacity); filter: invert(0%); }
.login .container div:nth-child(2) form div img.emailIcon { position: absolute; top: 11px; left: 15px; opacity: var(--opacity); filter: invert(0%); }
.login .container div:nth-child(2) form div img.senhaIcon { width: 18px; position: absolute; top: 10px; left: 15px; opacity: var(--opacity); filter: invert(0%); }
.login .container div:nth-child(2) form div .form-control { font-size: 15px; padding: 10px 15px 10px 45px; border-radius: 20px; border: none; }
.login .container div:nth-child(2) form div .form-control:focus { box-shadow: none; border: 1px; }
.login .container div:nth-child(2) form .login-group { display: flex; align-items: center; margin: 0 !important; }
.login .container div:nth-child(2) form .login-group .error { display: flex; height: 100%; flex-direction: column;  align-items: flex-end; margin: 0; }
.login .container div:nth-child(2) form .login-group .error p { color: var(--red); font-size: 12px; height: auto; margin: 2px 0px 0px 0px; }
.login .container div:nth-child(2) form .login-group .error span { color: var(--yellow); font-size: 12px; }
.custom-checkbox { display: flex; align-items: center; justify-content: flex-start !important; position: relative;   }
.custom-checkbox .viewPassword { display: inline-block; margin-right: 10px; position: relative; cursor: pointer; }
.custom-checkbox .viewPassword { appearance: none; width: 20px; height: 20px; background-image: url('../images/eyeOpen.png');  background-size:contain; background-position: center center; background-repeat: no-repeat; filter: invert(100%); transition: background-image 0.1s ease; padding: 11px; }
.custom-checkbox .viewPassword:checked { width: 22px; height: 22px; background-image: url('../images/eyeClosed.png');  background-size: contain; background-position: center center; background-repeat: no-repeat; filter: invert(100%); position: relative; }
.custom-checkbox label { font-size: 12px; color: var(--white); opacity: 0.8; cursor: default; user-select: none; }

/* Formulario Telefone */
.login .container div:nth-child(2) form .validacao-txt { display: flex; flex-direction: column ; }
.login .container div:nth-child(2) form .validacao-txt h1 { color: var(--white); width: 100%; font-size: 25px; margin-bottom: 1px !important; }
.login .container div:nth-child(2) form .validacao-txt p { color: var(--white); width: 100%; font-size: 14px; margin: 0 !important;}
.login .container div:nth-child(2) form div img.phoneIcon {width: 20px; position: absolute; top: 11px; left: 15px; opacity: var(--opacity); filter: invert(0%); }
.login .container div:nth-child(2) form div img.smsIcon { width: 25px; position: absolute; top: 9px; left: 15px; opacity: var(--opacity); filter: invert(0%); }

.login .container div:nth-child(2) form div.warning{ display: flex; color: var(--white); font-size: 12px;}
.login .container div:nth-child(2) form div.warning span { color: var(--yellow); font-size: 12px;}


/* Botões */
.login .container div:nth-child(2) form .button-group { display: flex; justify-content: space-between; align-items: center; }
.login .container div:nth-child(2) form .btn-entrar { background-color:var(--yellow);  color: var(--black); width: 45%; font-weight: 600; padding: 8px; border-radius: 20px; border: 0px; transition: all 0.3s; }
.login .container div:nth-child(2) form .btn-entrar:hover { opacity: var(--opacity); color:var(--white); }
.login .container div:nth-child(2) form .btn-voltar { background-color:var(--black); width: 45%; color: var(--white); font-weight: 600; padding: 8px; border-radius: 20px; text-decoration: none; text-align: center; }
.login .container div:nth-child(2) form .btn-voltar:hover { opacity:var(--opacity); }

.errorfogot { display: flex; flex-direction: column;  align-items: flex-end; margin-bottom: 2px !important; }
.errorfogot p { color: var(--red); font-size: 12px; height: auto; margin: 0; }
.group-error {display: flex; justify-content: space-between;}