@charset "utf-8";

/* BODY */
body:has(#swe_area_cliente) {background: url(/img/bg_topo.jpg) no-repeat;}

/* TOPO */
body:has(#swe_area_cliente) #swe_topo {background: linear-gradient(to bottom, #202224 55px, transparent 55px);}

#swe_main:has(#swe_area_cliente) {background: none;}

#swe_main:has(#swe_area_cliente) {display: flex; justify-content: center; align-items: center;}

#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login {display: flex; flex-flow: column; align-items: center; gap: 50px 20px; justify-content: center;}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login {display: flex; justify-content: center; align-items: center; padding: 40px 50px 50px 50px; width: 100%; height: 100%; backdrop-filter: blur(5px); background: #202224 ; border-radius: 5px; box-shadow: 0 0 3px 1px rgba(0,0,0,.5); min-width: 500px; max-width: 500px; overflow: hidden;}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_info_login {display: flex; flex-flow: wrap; justify-content: space-between; gap: 20px;}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_info_login > form {width: 100%;}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_info_login .e_input {display: flex; flex-flow: column; gap: 30px; flex: 100%;}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_info_login .e_input input {background: none; border: 0; border-bottom: solid 1px rgba(255,255,255,0.1); height: 50px; width: 100%; flex: 100%; padding-left: 30px; font-size: 16px; font-weight: 100; color: rgba(255,255,255,0.8);}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_info_login .e_input input::-webkit-input-placeholder {font-size: 16px; font-weight: 100; color: rgba(255,255,255,0.5);}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_info_login .e_input > div {display: flex; flex-flow: wrap; gap: 0 10px; position: relative;}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_info_login .e_input .swfa {position: absolute; left: 3px; top: calc(50% - 2px); transform: translateY(-50%);}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_info_login .e_input .e_login .swfa:before {content:"\f007"; font-family: "Font Awesome\ 5 Free"; font-weight: bold; color: rgba(255,255,255,0.55); font-size: 15px;}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_info_login .e_input .e_senha .swfa:before {content:"\f023"; font-family: "Font Awesome\ 5 Free"; font-weight: bold; color: rgba(255,255,255,0.55); font-size: 15px;}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_info_login .e_area_btn {flex: 100%; margin-top: 10px; }
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_info_login .e_area_btn button {width: 100%; cursor: pointer; height: 50px; background: var(--cor2); border: 0; border-radius: 3px; transition: .25s;}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_info_login .e_area_btn button:hover {background: var(--cor1);}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_info_login .e_area_btn button span {color: #fff;}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_info_login > a {display: contents;}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_info_login a span {color: #fff; font-size: 14px; font-weight: 200; opacity: 0.7; transition: .25s;}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_info_login a:hover span {opacity: 1;}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_area_img_login {max-width: 200px;}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_area_img_login img {width: 100%;}

/* RODAPÉ */
body:has(#swe_area_cliente) #swe_rodape {margin-top: 0;}
body:has(#swe_area_cliente) #swe_rodape:before {display: none;}
body:has(#swe_area_cliente) #swe_rodape .e_cont_rodape {display: none;}

@media (max-width: 550px){
    #swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login {margin: 15px; min-width: unset; padding: 40px 30px;}
    #swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_info_login {min-width: unset;}
    #swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login {margin: 15px;}
}

@media (max-width: 400px){
    #swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_token_login .input_group {gap: 5px !important;}
}

/* ------------------- TOKEN ------------------- */
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_token_login {display: flex; flex-flow: column; gap: 0; opacity: 1; width: 100%;}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_token_login .e_top_bar {display: flex; align-items: center; margin-bottom: 35px;}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_token_login .e_top_bar .e_voltar .swfa:before {content: "\f104"; color: #fff; font-weight: bold; font-size: 16px; font-family: "Font Awesome\ 5 Free"; opacity: 0.5; cursor: pointer;}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_token_login .e_top_bar .e_titulo {color: #fff; font-size: 24px; flex: 1; text-align: center; font-weight: 700;}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_token_login .e_top_bar .e_titulo span {padding-right: 10px;}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_token_login .e_descricao {color: #fff; font-size: 14px; font-weight: 200; opacity: 0.7; transition: .25s; text-align: center; display: flex; flex-flow: column; align-items: center; gap: 10px;}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_token_login .e_descricao .e_email {font-weight: 500;}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_token_login #otpForm_cliente {display: flex; flex-flow: column; gap: 35px; margin-top: 25px; margin-bottom: 10px;}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_token_login .input_group {display: flex; flex-flow: row; gap: 10px;}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_token_login .input_group .otp_input {max-width: 60px; height: 60px; width: 100%; text-align: center; font-size: 24px; border: solid 2px var(--cor6); border-radius: 4px; background: rgba(0,0,0,0.1); color: #fff;}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_token_login .btn_submit {width: 100%; cursor: pointer; height: 50px; background: var(--cor2); border: 0; border-radius: 3px; transition: .25s; color: #fff;}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_token_login .btn_submit:hover {background: var(--cor1);}

#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_token_login .e_reenviar {color: #fff; font-size: 14px; font-weight: 200; opacity: 0.7; transition: .25s;}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_token_login .e_reenviar strong {font-weight: 500;}
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_token_login .e_reenviar a:hover strong {opacity: 1;}

/* --------- TRANSITION PARA TOKEN --------- */
#swe_main #swe_area_cliente .e_cont_area_cliente .e_area_login .e_cont_area_login .e_area_token_login {transition: .0s;}
#swe_main #swe_area_cliente .e_cont_area_cliente:not(.acesso) .e_area_login .e_cont_area_login .e_area_token_login {opacity: 0; visibility: hidden; width: 0; height: 0; transform: scale(0.7) translateX(200%); }
#swe_main #swe_area_cliente .e_cont_area_cliente.acesso .e_area_login .e_cont_area_login .e_area_token_login {opacity: 1; visibility: visible; width: 100%; height: 100%; transform: scale(1) translateX(0); transition: visibility 0s 0s, width 0s 0s, height 0s 0s, transform .2s .1s, opacity .2s .1s;}

/* --------- TRANSITION PARA LOGIN  --------- */
#swe_main #swe_area_cliente .e_cont_area_cliente.acesso .e_area_login .e_cont_area_login .e_area_info_login {opacity: 0; visibility: hidden; width: 0; height: 0; transform: scale(0.7) translateX(-200%);}
#swe_main #swe_area_cliente .e_cont_area_cliente:not(.acesso) .e_area_login .e_cont_area_login .e_area_info_login {opacity: 1; visibility: visible; width: 100%; height: 100%; transform: scale(1) translateX(0); transition: visibility 0s 0s, width 0s 0s, height 0s 0s, transform .2s .1s, opacity .2s .1s;}