@charset "utf-8";

@media screen {

    #loginbox {
        width: 100%;
        max-width: 380px;
        float: none;
        margin: 12vh auto;
    }

    #loginbox .panel {
        background-color: var(--glass-bg, #fff);
        -webkit-backdrop-filter: blur(calc(var(--glass-blur, 0px) * 2)) saturate(110%);
        backdrop-filter: blur(calc(var(--glass-blur, 0px) * 2)) saturate(110%);
        border: 1px solid var(--glass-borda, #e5e7eb);
        border-radius: 18px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 16px 40px rgba(31, 41, 55, .16);
        overflow: hidden;
    }

    #loginbox .panel-heading {
        padding: 28px 28px 0;
        text-align: center;
        color: var(--cor-texto);
        background: transparent;
        border: none;
    }

    #loginbox .panel-title {
        font-size: 22px;
        font-weight: bold;
    }

    #loginbox .login-subtitulo {
        margin-top: 6px;
        color: #4b5563;
    }

    #loginbox .panel-body {
        padding: 24px 28px;
        background-color: transparent;
    }

    #loginbox .input-group {
        display: flex;
        width: 100%;
        margin-bottom: 14px;
    }

    #loginbox .input-group-addon,
    #loginbox .form-control {
        height: var(--controle-altura-lg);
        background-color: rgba(255, 255, 255, .85);
        border: 1px solid rgba(31, 41, 55, .10);
        box-shadow: none;
    }

    #loginbox .input-group-addon {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 44px;
        width: 44px;
        color: var(--cor-texto-suave);
        border-right: none;
        border-radius: 10px 0 0 10px;
    }

    #loginbox .input-group .form-control {
        flex: 1 1 auto;
        width: auto;
        font-size: 14px;
        border-left: none;
        border-radius: 0 10px 10px 0;
    }

    #loginbox .form-control:focus,
    #loginbox .input-group:focus-within .input-group-addon {
        background-color: #fff;
        border-color: rgba(var(--cor-primaria-rgb), .55);
    }

    #loginbox .input-group:focus-within {
        border-radius: 10px;
        box-shadow: 0 0 0 3px rgba(var(--cor-primaria-rgb), .15);
    }

    #loginbox input:-webkit-autofill,
    #loginbox input:-webkit-autofill:hover,
    #loginbox input:-webkit-autofill:focus {
        -webkit-text-fill-color: var(--cor-texto);
        -webkit-box-shadow: 0 0 0 40px #fff inset;
        transition: background-color 9999s ease-out;
    }

    #loginbox #btn-login {
        height: var(--controle-altura-lg);
        margin-top: 8px;
        font-size: 15px;
    }

    #loginbox .login-conexao {
        margin-top: 16px;
        text-align: center;
    }

    #loginbox .login-conexao a {
        font-size: 12px;
        color: #374151;
    }

    #loginbox #area_conexao {
        margin-top: 10px;
    }

    #loginbox #area_conexao .form-control {
        color: var(--cor-texto);
        border-radius: 10px;
    }
}