:root {
    --icono-btn-dimoi: url('');
}

section.section-ingreso {
    width: 100%;
    background: var(--color-gradiente-01);
}

section.section-ingreso .div-sombreado {
    background: white;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    border: 10px solid #ffffff;
    overflow: hidden;
    position: absolute;
    top: 10%;
}

@media (min-width: 1400px) { /*XXL-Large*/
    section.section-ingreso .div-sombreado {
        top: 10%;
        width: 34%;
    }
}

@media (min-width: 1200px) and (max-width: 1400px) { /*X-Large */
    section.section-ingreso .div-sombreado {
        top: 8%;
        width: 35%;
    }
}

@media (min-width: 992px) and (max-width: 1200px) { /*Large*/
    section.section-ingreso .div-sombreado {
        top: 8%;
        width: 40%;
    }
}

@media (min-width: 768px) and (max-width: 992px) { /*Medium*/
    section.section-ingreso .div-sombreado {
        top: 6%;
        width: 49%;
    }
}

@media (min-width: 576px) and (max-width: 768px) { /*Small*/
    section.section-ingreso .div-sombreado {
        top: 8%;
        width: 65%;
    }
}

@media (min-width: 0px) and (max-width: 576px) { /*Extra small*/
    section.section-ingreso .div-sombreado {
        width: 90%;
    }
}

@media (min-width: 2500px) { /*XXXL-Large*/
    section.section-ingreso {
        height: 105vh;
    }
}

@media (min-width: 1400px) and (max-width: 2500px) { /*XXL-Large*/
    section.section-ingreso .div-principal-ingresar {
        height: 1000px;
    }
}

@media (min-width: 1200px) and (max-width: 1400px) { /*X-Large */
    section.section-ingreso .div-principal-ingresar {
        height: 630px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) { /*Large*/
    section.section-ingreso .div-principal-ingresar {
        height: 630px;
    }
}

@media (min-width: 768px) and (max-width: 992px) { /*Medium*/
    section.section-ingreso .div-principal-ingresar {
        height: 680px;
    }
}

@media (min-width: 576px) and (max-width: 768px) { /*Small*/
    section.section-ingreso .div-principal-ingresar {
        height: 630px;
    }
}

@media (min-width: 0px) and (max-width: 576px) { /*Extra small*/
    section.section-ingreso .div-principal-ingresar {
        height: 740px;
    }
}


section.section-ingreso .div-bordeado {
    border-radius: 10px;
    background: #fff;
    border: 1.5px solid var(--color-d12e71);
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 15px;
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

@media (min-width: 1200px) and (max-width: 1400px) { /*X-Large */
    section.section-ingreso .div-bordeado {
        padding-left: 18px;
        padding-right: 18px;
        padding-bottom: 15px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) { /*Large*/

}

@media (min-width: 768px) and (max-width: 992px) { /*Medium*/
    section.section-ingreso .div-bordeado {
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (min-width: 576px) and (max-width: 768px) { /*Small*/
    section.section-ingreso .div-bordeado {
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (min-width: 0px) and (max-width: 576px) { /*Extra small*/
    section.section-ingreso .div-bordeado {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/*--------------------------------------------------------------
# Formulario ingresar
--------------------------------------------------------------*/
form.form-ingresar label {
    color: var(--color-d12e71);
    font-family: Arboria-Medium; 
}

form.form-ingresar .input-background {
    background: var(--color-e4e4e4);
    border-radius: 9px
}

form.form-ingresar .btn-iniciar-sesion {
    color: #fff;
    font-weight: 400;
    font-family: Arboria-Book;
    transition: 0.3s;
    background: var(--color-00809f);
}

@media (min-width: 0px) and (max-width: 576px) { /*Extra small*/
    form.form-ingresar .btn-iniciar-sesion {
        font-size: 15px;
    }
}

form.form-ingresar .btn-iniciar-sesion:hover {
    border: 0.5px solid var(--color-00809f);
    color: var(--color-00809f);
    background: #FFFFFF;
}

form.form-ingresar .btn-iniciar-sesion:active {
    color: #FFFFFF;
    background: var(--color-4c968c);
}

/*--------------------------------------------------------------
# Opciones de ingresar
--------------------------------------------------------------*/
div.div-opciones-ingresar .div-divider {
    border-left: 1px solid var(--color-00809f);
    border-right: 1px solid var(--color-00809f);
    height: 25px;
}

div.div-opciones-ingresar a {
    text-decoration: none;
    color: var(--color-00809f);
    font-family: Arboria-Book;
    font-weight: 400;
    white-space: normal;
    word-wrap: break-word;
}

div.div-opciones-ingresar a:hover {
    text-decoration: underline;
}

div.div-opciones-ingresar span {    
    color: var(--color-00809f);
}

/*--------------------------------------------------------------
# Divider horizontal
--------------------------------------------------------------*/
div.row-divider .div-divider-horizontal div {
    height: 0px;
    left: 0px;
    border: 1px var(--color-00809f) solid;
}

div.row-divider .div-divider-horizontal-o > p {
    color: var(--color-00809f);
    font-family: Arboria-Book;
    font-weight: 400;
    word-wrap: break-word
}

/*--------------------------------------------------------------
# Divider horizontal
--------------------------------------------------------------*/
div.div-divider {
    border-left: 1px solid var(--color-00809f);
    border-right: 1px solid var(--color-00809f);
    height: 25px;
}


/*--------------------------------------------------------------
# Botones window y Google
--------------------------------------------------------------*/

div.div-divider-buttons {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    height: 25px;
}

section.section-ingreso .fa { /*font awesome*/
    cursor: pointer;
    font-size: 28px;
    color: #fff;
}

@media (min-width: 1200px) and (max-width: 1400px) { /*X-Large*/
    section.section-ingreso .fa { /*font awesome*/
        font-size: 25px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) { /*Large*/
    section.section-ingreso .fa { /*font awesome*/
        font-size: 20px;
    }
}

@media (max-width: 576px) { /*Extra small*/
    section.section-ingreso .fa { /*font awesome*/
        font-size: 20px;
    }
}

section.section-ingreso a.btn-log {
    background: var(--color-aa5180);
    font-weight: 400;
    white-space: normal;
    font-family: Arboria-Bold;
    box-shadow: 0px 4px 13px 5px rgba(185, 185, 185, 0.46);
    border-radius: 9px;
    overflow: hidden;
    justify-content: flex-start;
    align-items: center;
    display: inline-flex;
    color: #fff;
}

@media (min-width: 0px) and (max-width: 576px) { /*Extra small*/
    section.section-ingreso a.btn-log p {
        font-size: 16px !important;
    }
}

section.section-ingreso a.btn-log:hover {
    border: 0.5px solid var(--color-aa5180);
    color: var(--color-aa5180);
    background: #FFFFFF;
}

section.section-ingreso a.btn-log:hover > i {
    color: var(--color-aa5180);
}

section.section-ingreso a.btn-log:hover > div {
    border-left: 1px solid var(--color-aa5180);
    border-right: 1px solid var(--color-aa5180);
}

section.section-ingreso a.btn-log:hover > img {
    content: var(--icono-btn-dimoi)
}

section.section-ingreso a.btn-log:active {
    color: #FFFFFF;
    background: var(--color-aa5180);
}

section.section-ingreso a.btn-log:active > i {
    color: #fff;
}

section.section-ingreso a.btn-log:active > div {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer { /*override margin-top 7% por 0%*/
    margin-top: 0% !important;
}