:root {
    --cor-botao-login: #5A5A5A;
    --cor-link: #2563EB;
}

body, form, html {
    margin: 0;
    padding: 0;
    font-family: var(--fonte-padrao), sans-serif;
    font-size: var(--tamanho-fonte-campo);
    width: 100%;
    height: 100%;
    color: var(--cor-fonte);
    background-color: var(--cor-bg-tela);
}

.body-nl {
    min-height: 100vh; /* Garante altura mínima da tela inteira */
    display: flex; /* Ativa flex para alinhar o conteúdo */
    align-items: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: var(--cor-bg-tela);
}

.divLoginExterna {
    display: flex; /* Flex para distribuir o conteúdo dinamicamente */
    flex-direction: column; /* Para conteúdo vertical */
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100%; /* Garante que ocupe no mínimo a altura da tela */
}

.middle {
    width: 100%;
}

.content-main {
    display: flex;
    flex-wrap: wrap; /* Permite que os elementos se ajustem */
    width: 100%;
    align-items: stretch; /* Garante que acompanhem o conteúdo mais alto */
    height: 100%;
}

.content-login {
    width: 570px;
    text-align: center;
    padding: 20px; /* Adiciona espaço interno */
    box-sizing: border-box;
}

.content-image {
    flex: 1; /* Faz a imagem ocupar o restante do espaço */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100%; /* Garante que acompanhe o conteúdo da div pai */
}

.tamanho-titulo {
    font-size: var(--tamanho-titulo);
}

#fraseLogin {
    text-align: right;
}

.content-login-nl {
    width: 450px;
    padding: 60px;
}

.body-nl-image {
    background-image: url('../../Styles/imagem-login-min.jpg?versao=1');
}

.body-nl-image-custom {
    background-image: url('../../Styles/imagem-login-cliente.jpg');
}

.input-field {
    position: relative;
}

.row-margin-top {
    margin-top: 30px;
}

@media only screen and (max-device-width: 800px) {
    .content-login {
        width: 100%;
    }

    .content-login-nl {
        width: 300px;
        padding: 20px;
        margin: auto;
    }

    .content-image {
        display: none;
    }
}

/*Adicionado no novo layout do login*/
td, th {
    padding: 0 !important;
}

/*Adicionado no novo layout do login*/
tr {
    border-bottom: 0 !important;
}

.alterar-senha-wrapper {
    width: 100%;
}

.esqueceu-form-ui {
    display: none;
}

.esqueceu-titulo-ui {
    text-align: center;
    margin: 0px;
    font-weight: lighter;
    padding-bottom: 30px;
    line-height: 20px;
}

.login-cabecalho-ui {
    height: 80px;
    padding: 30px 0px;
    overflow: visible;
    text-align: center;
}

.logo-wrapper {
    display: inline-block;
    padding-bottom: 30px;
}

.logo-width {
    max-width: 230px;
}

.float-right {
    float: right;
}

.login-entrar-ui {
    height: 28px;
    padding: 15px;
}

.login-entrar-btn-ui {
    width: 80px;
    float: right;
    right: 0px;
}

.mensagem-altera-senha {
    font-size: 20px !important;
    position: fixed;
    color: #757575;
    margin-bottom: 40px !important;
}

.div-botoes {
    padding-top: 50px;
}

.texto-login-provedores {
    text-align: center;
    margin-top: 10px;
}

.botao-provedor {
    margin-top: 10px !important;
}

#botoesProvedores {
    margin-bottom: 25px;
    text-align: center;
}

.footer-nl {
    position: relative;
    font-weight: bold;
    margin-top: -15px;
    text-align: left;
}

/*INICIO Mensagens de erro*/
/*.erro-ui, .msg-ui 
{
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #FFE7A2;
    border: 1px solid Orange;
    padding: 25px;
    display: none;
}

.erro-ui
{    
    color:Red;
	font-weight:bold;
}

.erro-ui div.ui-icon-closethick, .msg-ui div.ui-icon-closethick
{
    float:right;  
    cursor:pointer;  
}

.ui-icon-closethick 
{
    background-position: -96px -128px;
}*/
/*a imagem é a mesma em todos os temas*/
/*.ui-icon 
{
    width: 16px;
    height: 16px;
    background-image: url(../Blue/images/ui-icons_f9bd01_256x240.png);
}

.msg-ui
{
    color:Blue;
    font-weight:normal;
}*/
/*FIM Mensagens de Erro*/
.link-ui {
    text-decoration: none;
}

    .link-ui:hover {
        text-decoration: underline;
    }

    .link-ui, .link-ui:hover {
        color: var(--cor-fonte);
    }

/* BUTTON */
/*TODO REMOVER ESSA CLASSE APÓS AJUSTAR OUTRAS TELAS DO LOGIN*/
.grey.darken-3 {
    background-color: var(--cor-botao-login) !important;
}

/* FIM BUTTON */

.formLogin {
    width: 300px;
    padding: 10px;
    margin: auto;
}

.btnLogin {
    height: 35px;
    width: 125px;
    font-size: 15px !important;
}

.footer {
    width: 100%;
    height: 20px;
    position: absolute;
    bottom: 0px;
    text-align: center;
}

.lblMensagem {
    padding: 0px !important;
}

.tooltip {
    background-color: #FFE7A2;
    border: 1px solid Orange;
    max-width: 200px;
    padding: 4px;
}

.tooltipHelp {
    max-width: 550px;
    padding: 4px;
    position: absolute;
    display: none;
    z-index: 9999999;
}

.tooltipBackground {
    background-color: #FFE7A2;
    border: 0px none #000000;
}

.inputCaptcha input {
    width: 241px !important;
}

.inputCaptcha td {
    padding-left: 4px !important;
    padding-right: 5px !important;
}

.buttonPopup, .buttonPopup:hover {
    padding: 0px;
}

/*#region novo layout*/

.erro-ui a {
    color: red !important;
}

#captcha input[type=text]:focus {
    outline: none !important;
    font-family: var(--fonte-padrao) !important;
    border-bottom: 1px solid black !important;
    box-shadow: 0 1px 0 0 black !important;
    font-size: 15px !important;
    color: black !important;
}

.captcha-button a {
    color: black !important;
}

/* INICIO BOTAO */
.botao {
    border-radius: var(--valor-border-radius-btn);
    width: 100%;
    height: 36px !important;
    margin-top: 25px !important;
    font-size: var(--tamanho-fonte-campo) !important;
    line-height: 30px !important;
    font-weight: bold;
    border: none;
    cursor: pointer;
    outline: none !important;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    color: #fff;
    padding: 0px !important;
}

    .botao:active,
    .botao-login-provedor:active {
        transform: scale(0.98); /* Encolhe o botão levemente */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.08); /* Diminui o sombreamento */
        opacity: 0.9;
    }

.botao-login-principal {
    background-color: var(--cor-botao-login);
}

.botao-login-secundario {
    background-color: white !important;
    color: var(--cor-botao-login);
    border: 2px solid var(--cor-botao-login);
}

.divProvedores {
    flex-wrap: wrap;
}

.botao-login-provedor {
    background-color: white !important;
    height: 36px !important;
    border-radius: var(--valor-border-radius-btn);
    color: var(--cor-botao-login);
    border: 2px solid var(--cor-botao-login);
    margin-bottom: 4%;
    width: 48%;
    cursor: pointer;
}

.divProvedores {
    flex-wrap: wrap;
}

.botao-login-provedor {
    margin-bottom: 4%;
    margin-top:0px !important;
    width: 48%;
}
/* FIM BOTAO */

/*INICIO DIVISÃO LOGIN PROVEDORES*/
.divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
}

    .divider::before,
    .divider::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid var(--cor-botao-login);
        margin: 0 10px;
    }

.divider-text {
    font-size: 14px;
    color: var(--cor-fonte);
}
/*FIM DIVISÃO LOGIN PROVEDORES*/


.centraliza {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* INICIO ESQUECEU SENHA */
.botao-esqueceu {
    width: 215px !important;
    margin-top: 15px !important;
}

.div-botao-esqueceu-left {
    display: inline-block;
    float: left;
}

.div-botao-esqueceu-right {
    display: inline-block;
    float: right;
}

.esqueceu-senha, .esqueceu-senha:hover, .esqueceu-senha:visited, .captcha-link, #Captcha_RTS {
    text-decoration-color: none;
    color: var(--cor-link);
    text-decoration: none;
}

/* FIM ESQUECEU SENHA */


.quero-me-cadastrar {
    box-sizing: border-box;
}

    .quero-me-cadastrar > a {
        color: var(--cor-fonte);
        text-decoration: none;
        line-height: 34px;
    }


/*dev-express - Ver outro código - Captcha*/
.dxcaRefreshButtonCell_Aqua {
    font-size: 15px;
    text-align: center !important;
}

.linha-sem-borda tr {
    border: none !important;
}

/*dev-express - imagem - Captcha*/
.responsive-captcha,
.responsive-captcha table,
.responsive-captcha div {
    width: 100% !important;
    height: auto !important;
}


/* INICIO INPUT */

input {
    font-family: var(--fonte-padrao), sans-serif !important;
}

.input-field input[type=text],
.input-field input[type=password] {
    box-sizing: border-box;
    padding-left: 12px;
    padding-bottom: 3px;
    color: var(--cor-fonte-label-valor);
    line-height: 23px;
    border: 1px solid var(--cor-borda-input);
    border-radius: var(--valor-border-radius-input);
    margin-bottom: 5px;
    height: 36px;
    padding-right: 12px;
    font-size: var(--tamanho-fonte-campo) !important;
    padding-top: 10px;
    width: 100%;
}

/*Ajuste para que no chrome caso tenha usuário/senha salvos e faça o preenchimento automático funcione corretamente o label flutuante*/
.input-field input:-webkit-autofill ~ label {
    /* CSS property  */
}

input[type=text]:focus,
input[type=password]:focus {
    border-color: var(--cor-fonte-label-valor);
}

input:focus ~ .floating-label,
input:not(:focus):not(:placeholder-shown) ~ .floating-label {
    top: 2px;
    font-size: var(--tamanho-label-info-campo);
    opacity: 1;
    color: var(--cor-fonte-label-campos);
}

.floating-label {
    position: absolute;
    pointer-events: none;
    left: 12px;
    top: 11px;
    transition: 0.2s ease all;
}

/* Remove a cor feia do chrome no auto completar dados salvos. No firefox ja eh transparente por padrão.*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-internal-autofill-selected {
    transition: background-color 5000s ease-in-out 0s !important;
}

/*Remove a cor do autocomplete no firefox*/
input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0px 9999px white;
}

/*Remove ícone de ver senha para o navegador edge*/
input::-ms-reveal,
input::-ms-clear {
    display: none;
}

/*FIM INPUT*/

.usuario-altera-senha {
    font-size: 20px !important;
}

/*#endregion*/

/* Password Visibility */
span.field-icon {
    float: right;
    position: absolute;
    right: 10px;
    top: 3px;
    cursor: pointer;
    z-index: 2;
    color: var(--cor-fonte-label-campos);
}


input:focus ~ .field-icon {
    color: var(--cor-icone-header-ou-principal);
}