*{
    /* Nesta seção é possível alterar as cores dos elementos do formulário */
    --bkg_color-login-3im: var(--pallete-white);
    --title_color-login-3im: var(--pallete-1);
    --label_color-login-3im: var(--pallete-4);
}

login-3im {
    width: 100%;
    max-height: 80vh;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    padding: 23px;
}

login-3im .login-box {
    width: 100%;
    max-width: 400px;

    background: var(--bkg_color-login-3im);

    padding: 30px;

    border-radius: 12px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    text-align: center;
}

login-3im .login-box img {
    width: 100%;
    max-width: 96px;
}

login-3im .login-box h2 {
    margin: 10px 0 18px;

    color: var(--title_color-login-3im);
}


/* =========================================
   TEXTOS DO LOGIN
   ========================================= */

login-3im .login-admin {
    margin-top: -15px;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;
}

login-3im .login-description {
    margin: 0 0 10px;

    color: var(--label_color-login-3im);

    font-size: 15px;
    font-weight: 400;
}

login-3im .login-instruction {
    margin: 0 0 24px;

    color: var(--label_color-login-3im);

    font-size: 15px;
}

login-3im .login-instruction strong {
    font-weight: 700;
}


/* =========================================
   BOTÃO GOOGLE
   ========================================= */

login-3im .google-login {

    width: 100%;
    max-width: 320px;
    height: 43px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 0 20px;

    box-sizing: border-box;

    background-color: #ffffff;

    border: 1px solid #dadce0;
    border-radius: 6px;

    color: #3c4043;

    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;

    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}


/* Efeito ao passar o mouse */

login-3im .google-login:hover {
    background-color: #f8f9fa;

    border-color: #c8c9ca;

    box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3);
}


/* Efeito ao clicar */

login-3im .google-login:active {
    background-color: #f1f3f4;

    box-shadow: none;
}


/* =========================================
   ÍCONE DO GOOGLE
   ========================================= */

login-3im .google-icon {

    width: 23px;
    height: 23px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}

login-3im .google-icon svg {

    width: 23px;
    height: 23px;

    display: block;
}


/* =========================================
   TEXTO ABAIXO DO BOTÃO
   ========================================= */

login-3im .login-note {

    margin: 18px 0 0;

    color: #6b7280;

    font-size: 12px;

    line-height: 1.5;
}

login-3im .login-note strong {
    font-weight: 700;
}


/* =========================================
   MENSAGEM DE ERRO
   ========================================= */

login-3im .error-msg {

    display: flex;
    justify-content: center;
    align-items: center;

    color: white;

    font-weight: 600;
    font-size: 0.9em;

    background-color: #ff7777;

    width: 100%;
    max-width: 300px;

    height: 80px;

    border-radius: 7px;

    margin: 23px auto;

    animation: login-3im-error-msg-show 0.75s ease-in-out;
}


/* =========================================
   ANIMAÇÃO DA MENSAGEM DE ERRO
   ========================================= */

@keyframes login-3im-error-msg-show {

    0% {
        transform: translateX(-23px);
        opacity: 0;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}