.body-bg {
    background-color: #F8F8F8 ;
    min-height: 100vh;
}

.btn-hs {
    background-color: var(--verde);
    color: white;
}

.btn-hs:hover {
    background-color: white;
    color: var(--verde);
}

.btn-shadow {
    box-shadow: 0 3px 5px -1px #888;
}

.container-registrate,
.container-ingresa {
    min-height: 85vh;
}

.container-form-login {
    text-align: center;
}

.container-form-login .titulo {
    color: var(--rojo-oscuro);
    font-weight: bold;
}

.descripcion {
    font-size: var(--f-24);
    font-weight: bold;
}

.ingresar {
    width: 90%;
    max-width: 400px;
    display: block;
    border: none;
    border-bottom: 2px solid var(--verde);
    margin: 25px auto 25px;
    cursor: pointer;
    text-align: center;
    color: var(--verde);
    font-weight: bold;
    padding: 8px;
}

.ingresar::placeholder {
    color: #999;
    text-align: center;
}

.ingresar:focus,
.ingresar:active,
.ingresar:hover {
    /* outline: none; */
    outline: 2px solid var(--verde);
}

.ingresar-perfil {
    width: 90%;
    max-width: 400px;
    display: block;
    border: none;
    border-bottom: 2px solid var(--verde);
    margin: 25px auto 25px;
    cursor: pointer;
    text-align: center;
    color: var(--verde);
    font-weight: bold;
}

.ingresar-perfil::placeholder {
    color: #999;
    text-align: center;
}

.ingresar-perfil:focus,
.ingresar-perfil:active,
.ingresar-perfil:hover {
    /* outline: none; */
    outline: 2px solid var(--verde);
}

.input-hs {
    display: block;
    border: none;
    border-bottom: 3px solid var(--verde);
    text-align: center;
    font-weight: bold;
    padding: 8px;
}

.input-hs:hover {
    border-top: 2px solid var(--verde);
    border-left: 2px solid var(--verde);
    border-right: 2px solid var(--verde);
}

.container-form-login .submit {
    display: block;
    margin: 25px auto 25px;
    background: var(--verde);
    border: none;
    outline: none;
    box-shadow: 0 3px 5px -1px #888;
    padding: 5px 10px;
    color: white;
    font-weight: bold;
    transition: all 0.2s ease-in-out;
}

.container-form-login .submit:focus,
.container-form-login .submit:active,
.container-form-login .submit:hover {
    background: white;
    color: var(--verde);
}

.custom-checkbox {
    color: var(--verde);
    cursor: pointer;
}

.custom-checkbox input {
    margin-right: 10px;
}

.container-ingresa-registrate {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 17%;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

@media screen and (min-width: 1440px) {
    .container-ingresa-registrate {
        padding-left: 11%;
    }
}

.container-ingresa-registrate p {
    box-shadow: 0 3px 5px -1px #888;
    border-radius: 10px;
    padding: 10px 40px 10px 10px;
    color: var(--rojo);
    font-weight: bold;
    font-size: var(--f-16);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.container-ingresa-registrate:active p,
.container-ingresa-registrate:focus p,
.container-ingresa-registrate:hover p {
    box-shadow: 0 5px 5px 0px #888;
    color: white;
    background: var(--rojo);
}

.container-ingresa-registrate img {
    width: 20%;
    max-width: 80px;
    transform: translateX(-40%);
}

.a_no_style {
    color: inherit;
    text-decoration: none;
}

.a_no_style:hover {
    color: inherit;
    text-decoration: none;
}