/* CUSTOM CSS - LOGIN */


body {
    --containerBackgroundColor: #fff;
}


div.row {
    height: 100vh;
    background-color: var(--defaultBackgroundColor);
    display: flex;
}

div.container-login {
    width: 100%;
    max-width: 540px;
    min-height: calc(100vh - 64px);
    margin: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 64px;
}



img.logotipo-desenvolvedor {
    width: 100%;
    max-width: 296px;
}



/* FORM */
div.container-login > div.container-form {
    width: 100%;
    max-width: 530px;
    padding: 54px 24px;
    margin-bottom: 80px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12);
}

div.container-login > div.container-form > div.container-form-inputs {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

div.container-login > div.container-form > div.container-form-inputs .form-control:not(:placeholder-shown) ~ label,
div.container-login > div.container-form > div.container-form-inputs .form-select:not(:placeholder-shown) ~ label,
div.container-login > div.container-form > div.container-form-inputs .form-control:focus:placeholder-shown ~ label,
div.container-login > div.container-form > div.container-form-inputs .form-select:focus:placeholder-shown ~ label {
  color: var(--primaryColor);
}

div.container-login > div.container-form > div.container-form-inputs-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

div.container-login > div.container-form > div.container-form-inputs-2 .form-check {
    gap: 16px;
}

div.container-login > div.container-form > div.container-form-inputs-2 .form-check > .form-check-label:hover {
    text-decoration: underline;
}

div.container-login > div.container-form span.password_recovery {
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.15px;
    color: #000;
    text-decoration: underline;
}

div.container-login > div.container-form > div > button.btn-login {
    height: 44px;
}




div.login-footer {
    width: 100%;
    height: 63px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--dividerColor);
    padding: 0 20px;
}

div.login-footer > ul.login-footer-navigation {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: none;
}

div.login-footer > ul.login-footer-navigation li {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

div.login-footer > ul.login-footer-navigation li a {
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0.5px;
    padding: 0px 5px;
    margin-left: 20px;
    text-decoration: none;
    color: rgba(0,0,0,0.54);
}

div.login-footer > ul.login-footer-navigation li:first-of-type a {
    margin-left: 0px;
}

div.login-footer > ul.login-footer-navigation li a:hover {
    transition: 0.3s;
    color: var(--primaryTextColor);
}





@media (min-width: 472px) {
    div.login-footer > ul.login-footer-navigation.md {
        display: inline-block;
    }
}


@media (max-width: 471px) {
    div.login-footer  {
        display: block;
        height: auto;
        padding: 0;
    }

    div.login-footer > ul.login-footer-navigation.sm {
        display: block;
    }

    div.login-footer > ul.login-footer-navigation li {
        display: block;
        text-align: left;
        padding: 17px;
    }

    div.login-footer > ul.login-footer-navigation li a {
        margin: 0;
    }
}



@media (max-width: 480px) {
    div.container-login > div.container-form > div.container-form-inputs-2 {
        flex-direction: column;
        align-items: flex-start;
    }
}