/*logo*/
.easy_logo {
    width: auto !important;
    max-height: 50px !important;
    margin-bottom: 4rem !important;
}

/*cor icones*/
.fa-envelope,
.fa-phone,
.fa-user-group,
.fa-lock,
.fa-eye,
.fa-user-tie,
.fa-eye-slash {
    color: var(--icone-sem-foco);
}
.iconerr{
    color: var(--botao-secundario);
}

.main_btn-enter {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ds-palette-primary, #E52940);
    border-radius: 22px;
    border: 5px;
    color: var(--branco);
    font-weight: 300 !important;
    padding: 10px;
    width: 100%;
    transition: 0.30s;
    font-size: 1rem;    
    font-family: 'Borna', sans-serif;
}

.main_btn-test{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--botao-secundario);
    border-radius: 5px;
    color: var(--branco);
    font-weight: 600;
    padding: 10px;
    width: 100%;
    font-size: 1rem;
    transition: 0.30s;
}
.main_btn-test:hover {
    transition: 0.30s;
    background-color: var(--botao-secundario-hover);
}

/*clase a ser adicionada aos icones quando o inputt estiver on focus*/
.text-focused {
    color: var(--input-focado);
}

/*remove borda interna input senha*/
#login_passwordInput {
    border-radius: 0px !important;
}

#view-password-login,
#login-form input,
#login-form select {
    border-radius: 0 5px 5px 0;
}

#view-password-login {
    text-decoration: none;
}


.login-style-terms {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}


.lgcrm-or,
.lgcrm-term {
    position: relative;
    padding: 0 55px;
    color: var(--botao-principal);
    font-weight: 600;
}

.lgcrm-or::before,
.lgcrm-or::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background-color: var(--botao-principal);
}

.lgcrm-term::before,
.lgcrm-term::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 20%;
    height: 1px;
    background-color: var(--botao-principal);
}

.lgcrm-term::before {
    left: 0;
}

.lgcrm-term::after {
    right: 0;
}


/*botao google*/
.login-google {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--botao-principal);
    padding: 7px;
    text-decoration: none;
    width: 100%;
    border: 1px solid var(--botao-principal);
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: 0.30s;
    gap: 10px;
}

.login-google:hover {
    background-color: var(--botao-secundario);
    transition: 0.30s;
    color: var(--branco);
    border: 1px solid var(--branco);
}

.google-icon {
    width: 30px;
}

.showerr {
    border: solid 2px var(--botao-secundario) !important;
    -webkit-box-shadow: 10px 10px 23px -8px var(--ds-palette-primary, rgba(242, 31, 60, 1));
    -moz-box-shadow: 10px 10px 23px -8px var(--ds-palette-primary, rgba(242, 31, 60, 1));
    box-shadow: 10px 10px 23px -8px var(--ds-palette-primary, rgba(242, 31, 60, 1));
}

.baner_info{
    color: var(--vermelho-sistema-novo) !important;
    font-size: 0.9375rem !important;
}

.lineh{
    line-height: 1.1em;
}

.icon-eye-input {
    cursor: pointer; 
    font-size: 0.7rem !important;
    margin-top: 16px !important;
}

div .link-esqueceu-senha {
    color: var(--ds-gray-600, #3E4B52) !important;
    font-size: 14px;
    margin-right: 17px;
    font-family: 'Borna', sans-serif;
}

div[aria-labelledby="button-label"] {
    border-radius: 22px;
}

.g_id_signin {
    max-width: 100%;
}

.g_id_onload {
    max-width: 100%;
}

.box-login-google-logado {
    margin-left: 20%;
}

.link-criar-conta {
    color: var(--ds-palette-primary, #E52940) !important;
}

.left_image-bg {
    width: 50%
}

.right_image-bg {
    background-image: url('/acesso/utils/img/easyjur-login.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100vh;
    width: 50%;
    font-family: 'Borna', sans-serif;
    background-position: calc(100% - -24px);
}

.baner_info-text {
    color: var(--ds-gray-600, #3E4B52) !important;
    font-size: 1.5625rem !important;
}
.box-criar-conta { 
    font-family: 'Borna', sans-serif;
}

.resized-image {
    width: 80%;
    height: auto;
    max-height: 873px;
}

.box-text-info {
    width: 292px;
}

.fonte-label {
    font-family: 'Borna', sans-serif;
    padding-left: 3%;
}

input::placeholder {
    font-family: 'Borna', sans-serif;
}

.baner_info_title {
    color: var(--vermelho-sistema-novo) !important;
    font-size: 0.9375rem !important;
}

.baner_info_text {
    color: var(--ds-gray-600, #3E4B52) !important;
    font-size: 1.5625rem !important;
    width: 292px;
}

@media (max-width: 576px) {
    .box-criar-conta {
        display: flex;
        align-content: center;
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 12%; 
    }
} 
 
@media (min-width: 577px) and (max-width: 768px) {
    .right_image-bg {
        background-position: calc(100% - -314px);  
    }

    .box-criar-conta {
        display: flex;
        align-content: center;
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 12%; 
        font-size: 14px;
    }
} 

@media (min-width: 768px) and (max-width: 820px) {
    .right_image-bg {
        background-position: calc(100% - -311px);   
    }
} 

@media (min-width: 769px) and (max-width: 1023px) {
    .right_image-bg {
        background-position: calc(100% - -110px);    
    }

    .box-criar-conta {
        display: flex;
        align-content: center;
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 12%;
    }
}

@media (min-width: 1024px) and (max-width: 1280px) {
    .right_image-bg {
        background-position: calc(100% - -110px);  
    }

} 

@media (min-width: 1281px) and (max-width: 1430px) {

    .right_image-bg {
        background-position: calc(100% - -95px);  
    }
}

@media (min-width: 1440px) and (max-width: 1920px) {

    .right_image-bg {
        background-position: calc(100% - -40px);  
    }
}

@media (min-width: 1921px) and (max-width: 2560px) {

    .right_image-bg {
        background-position: calc(100% - -125px);  
    }

    .box-text-info {
        width: 322px !important;
    }

    .banner-info-block-text {
        margin-left: 10%;
    }
}

/* tablet */
@media screen and (min-width: 768px) and (max-width: 1024px) and (pointer: coarse) {

    section.right_image-bg {
        display: none !important;
    }

    .left_image-bg{
        flex: 0 0 auto !important;
        width: 100% !important;
    }
}

.fonte-label {
    font-family: 'Borna', sans-serif;
    padding-left: 3%;
    margin-bottom: 10px;
}

input::placeholder {
    font-family: 'Borna', sans-serif;
}

form input{
    font-family: 'Borna', sans-serif;
}

form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="number"],
form input[type="password"]{
    font-size: 13px;
    padding-left: 17px;
}

.dnone{
    display: none !important;
}

.ff-default{
    font-family: 'Borna', sans-serif;
}

.fs-13{
    font-size: 13px;
}

.fc-gray{
    color: var(--ds-palette-tint-gray-text, #515F67);
}

@media screen and (max-width: 478px){
    form{
        width: 90% !important;
    }
}

input.form-control:focus {
    border-color:  var(--ds-palette-secondary, #AFBDC5) !important;
    box-shadow: 0 0 0 .25rem  rgb(var(--ds-palette-secondary-rgb, 175 189 197) / 0.5) !important;
    outline: none !important;
}

/* Seletor composto (.icon-eye-input.icone-eye-invalid = 0,2,0) p/ VENCER o
   utilitário .top-50 do Bootstrap (0,1,0), que carrega depois e ganharia por
   ordem se usássemos só .icone-eye-invalid (0,1,0). */
.icon-eye-input.icone-eye-invalid {
    /* Ancora o olho ao CENTRO DO INPUT (48px/2 = 24px), não ao centro do wrapper.
       O .invalid-feedback fica DENTRO do mesmo .position-relative; ao exibi-lo o
       wrapper cresce e o `top:50%` (top-50) jogava o olho pra baixo (desalinhado).
       Bug de layout — vale claro e dark. */
    top: 24px !important;
    margin-top: 0 !important;
}

#input-senha_login.is-invalid {
    background-image: none !important;
} 
/* ============================================================================
 * EJ-5732 — Nova tela de LOGIN (dark-only), padrão "EASYJUR | OS".
 * Tudo escopado em .login-os (login.css é compartilhado com cadastro/trial/oabmg,
 * então NADA aqui pode vazar). Cores via tokens do DS; layout espelha o protótipo.
 * !important nos inputs vence a regra genérica de input dark do dark-overrides.
 * ========================================================================== */
.login-os {
    display: flex;
    min-height: 100vh;
    width: 100%;
    background-color: var(--ds-body-bg, #1d1d21);
    color: #fff;
}

/* ----- Lado do formulário ----- */
.login-os__form-side {
    flex: 0 0 42%;
    max-width: 42%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    background-color: var(--ds-body-bg, #1d1d21);
}
.login-os__form { width: 100%; max-width: 380px; }
.login-os__logo { margin-bottom: 2.5rem; display: flex; justify-content: center; }
.login-os__logo img { height: 3rem; width: auto; display: block; }

/* Heading título + subtítulo (recuperar_senha / alterar_senha). Alinhado à esquerda. */
.login-os__heading { margin-bottom: 1.75rem; }
.login-os__heading-title { color: #fff; font-weight: 700; font-size: 1.5rem; margin: 0; line-height: 1.2; }
.login-os__heading-sub { color: rgba(255, 255, 255, 0.8); font-weight: 400; font-size: 0.875rem; margin: 0.5rem 0 0; }

.login-os__field { margin-bottom: 1.1rem; }
.login-os .fonte-label,
.login-os label { color: #fff !important; font-weight: 500; font-size: 0.875rem; margin-bottom: 0.4rem; }

/* Inputs translúcidos (rounded-full) — !important p/ vencer o input dark genérico */
.login-os .form-control {
    height: 48px;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    border-radius: 9999px !important;
    padding-left: 1.25rem;
}
.login-os .form-control::placeholder { color: rgba(255, 255, 255, 0.45) !important; }
.login-os .form-control:focus {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--ds-palette-primary, #e5293f) !important;
    box-shadow: 0 0 0 0.25rem rgb(var(--ds-palette-primary-rgb, 229 41 63) / 0.25) !important;
}
/* Olho da senha: zera o margin-top:16px !important da base (que desalinhava) e
 * deixa o ícone centrado verticalmente no input (top-50/translate do Bootstrap). */
.login-os .icon-eye-input { color: rgba(255, 255, 255, 0.55) !important; font-size: 1.05rem !important; margin-top: 0 !important; }

/* Esqueci minha senha */
.login-os__forgot { margin: 0.5rem 0 1.5rem; }
.login-os .link-esqueceu-senha { color: rgba(255, 255, 255, 0.7) !important; font-size: 0.8rem; margin-right: 0; }
.login-os .link-esqueceu-senha:hover { color: #fff !important; text-decoration: underline !important; }

/* Botão ENTRAR (cor da marca, pill, full-width) */
.login-os .main_btn-enter {
    height: 48px;
    border-radius: 9999px;
    background-color: var(--ds-palette-primary, #e5293f);
    color: #fff;
    font-weight: 700;
    width: 100%;
    border: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.login-os .main_btn-enter:not(:disabled):hover {
    background-color: #c4172f; /* vermelho da marca escurecido (hover perceptível) */
    box-shadow: 0 6px 18px rgba(229, 41, 63, 0.35);
    transform: translateY(-1px);
}
.login-os .main_btn-enter:not(:disabled):active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(229, 41, 63, 0.30);
}
/* Estado desabilitado (alterar_senha: ativa só quando as senhas são válidas) */
.login-os .main_btn-enter:disabled,
.login-os .main_btn-enter[disabled] {
    /* tom mais claro do vermelho da marca (mesma cor, opacidade reduzida) */
    background-color: rgb(var(--ds-palette-primary-rgb, 229 41 63) / 0.45);
    color: rgba(255, 255, 255, 0.85);
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

/* Divisor "ou" */
.login-os__divider { margin: 2rem 0 0.5rem; }
.login-os__divider hr { border-top: 1px solid rgba(255, 255, 255, 0.15); opacity: 1; margin: 0; }
.login-os .login-os__or { color: rgba(255, 255, 255, 0.6); font-size: 0.8rem; }

/* Google + criar conta */
.login-os__google { position: relative; height: 48px; margin-top: 1.25rem; }
/* Botão visual (estilo protótipo) — sem clique; o GSI invisível por cima é quem recebe */
.login-os__google-btn {
    position: absolute; inset: 0; z-index: 1;
    width: 100%; height: 48px;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 9999px;
    color: #fff; font-weight: 500; font-size: 0.95rem;
    pointer-events: none; /* clique atravessa para o botão real do Google */
    transition: background-color 0.2s ease;
}
.login-os__google-g { flex-shrink: 0; }
.login-os__google:hover .login-os__google-btn { background-color: rgba(255, 255, 255, 0.1); }
/* Botão REAL do Google (GSI) invisível, sobreposto e esticado p/ cobrir a área toda */
.login-os__google .g_id_signin {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transform: scaleY(1.3); /* cobre a altura inteira do botão visual */
}
.login-os__google .g_id_signin > div,
.login-os__google .g_id_signin iframe { margin: 0 auto !important; }

.login-os__signup { margin-top: 2rem; color: rgba(255, 255, 255, 0.75); }
.login-os .link-criar-conta { color: var(--ds-palette-primary, #e5293f) !important; font-weight: 600; }

/* Popover de regras de senha (alterar_senha) — dark. Vive no <body> (fora do .login-os),
 * por isso a classe customClass 'login-os-popover'. BS 5.3: bg/borda/seta seguem as vars. */
.login-os-popover.popover {
    --bs-popover-bg: var(--ds-card-bg, #242424);
    --bs-popover-border-color: rgba(255, 255, 255, 0.12);
    --bs-popover-body-color: rgba(255, 255, 255, 0.9);
    --bs-popover-max-width: 320px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.login-os-popover .text-muted { color: rgba(255, 255, 255, 0.45) !important; }

/* "Voltar para a tela de login" — mesma fonte do "Ainda não tem uma conta?" (13px, normal, muted) */
.login-os .link-voltar-login {
    color: rgba(255, 255, 255, 0.75) !important;
    font-weight: 400;
    font-size: 13px;
    font-family: 'Borna', sans-serif;
}
.login-os .link-voltar-login:hover { color: #fff !important; text-decoration: underline !important; }

/* ===== Autenticação 2FA — 6 caixas de código (dark, dimensionadas p/ caber no form) ===== */
.login-os .number-code { border: 0; padding: 0; margin: 0; }
.login-os .caixa-validacao {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;            /* ocupa a largura do botão/form */
    padding: 0;
    margin: 0.5rem 0 1.5rem;
}
.login-os .code-input {
    flex: 1 1 0;            /* dividem a largura igualmente */
    min-width: 0;
    aspect-ratio: 1 / 1;    /* quadradas */
    height: auto;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 10px;
    outline: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.login-os .code-input:focus {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--ds-palette-primary, #e5293f) !important;
    box-shadow: 0 0 0 3px rgb(var(--ds-palette-primary-rgb, 229 41 63) / 0.25);
}

/* Manter logado + entrar com outra conta */
.login-os__2fa-extra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}
.login-os .manter-login {
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    margin: 0;
    cursor: pointer;
}
.login-os .manter-login .form-check-input {
    width: 1.05rem; height: 1.05rem;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: none;
}
.login-os .manter-login .form-check-input:checked {
    background-color: var(--ds-palette-primary, #e5293f);
    border-color: var(--ds-palette-primary, #e5293f) !important;
}
.login-os .link-login { color: var(--ds-palette-primary, #e5293f) !important; font-weight: 600; font-size: 13px; }

/* ----- Hero (lado direito) ----- */
.login-os__hero {
    position: relative;
    flex: 1 1 58%;
    overflow: hidden;
    background-color: var(--ds-body-bg, #1d1d21);
}
.login-os__hero-img {
    position: absolute; inset: 0;
    background-image: url('/acesso/utils/img/login-hero.jpg');
    background-repeat: no-repeat;
    /* cover (como estava). background-position sobe a imagem um pouco (mostra mais
     * da parte inferior da foto). Abaixo do breakpoint lg a coluna é ocultada. */
    background-size: cover;
    background-position: center 32%;
    /* Filtro do protótipo: foto dessaturada e mais escura. */
    filter: grayscale(85%) brightness(0.7);
}
/* funde a foto no lado do formulário (esquerda) */
.login-os__hero-fade {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to left, rgba(0, 0, 0, 0) 60%, var(--ds-body-bg, #1d1d21) 100%);
}
/* escurece o canto inferior-direito p/ legibilidade do texto */
.login-os__hero-vignette {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(60% 55% at 85% 90%, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 35%, rgba(0, 0, 0, 0) 70%);
}
.login-os__hero-text {
    position: absolute; right: 3rem; bottom: 2.5rem; z-index: 2;
    text-align: right; max-width: 75%;
}
.login-os__hero-title {
    color: #fff; font-weight: 700; font-size: 2rem; margin: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.login-os__hero-title span { color: var(--ds-palette-primary, #e5293f); }
.login-os__hero-sub {
    margin-top: 0.5rem; color: rgba(255, 255, 255, 0.85);
    font-size: 0.875rem; letter-spacing: 0.04em;
}

/* Responsivo: abaixo de lg, esconde o hero e o form ocupa tudo */
@media (max-width: 991.98px) {
    .login-os { flex-direction: column; }
    .login-os__hero { display: none !important; }
    .login-os__form-side { flex: 1 1 100%; max-width: 100%; }
}

/* Autofill do Chrome nos inputs da login dark: mantém fundo translúcido e texto branco
 * (o padrão do navegador pinta azul-claro, quebrando o tema escuro). */
.login-os .form-control:-webkit-autofill,
.login-os .form-control:-webkit-autofill:hover,
.login-os .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.06) inset;
    caret-color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    transition: background-color 9999s ease-in-out 0s;
}

/* main_btn-enter quando é <a> (trial_encerrado): texto branco vence a cor de link do dark */
.login-os a.main_btn-enter,
.login-os .main_btn-enter span { color: #fff !important; }