html, body {
    height: 100%;
    margin: 0;
}

.full-height {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.top-section {
    flex: 0 0 auto;
    min-height: 750px;
    max-height: 850px;
    height: 80vh;
    display: flex;
    flex-wrap: wrap;
    background-color: #f8f9fa;
}

.image-side {
    flex: 1 1 65%;
    background: url('/img/loginLeft.png') no-repeat center center;
    background-size: 100% 100%;
    min-height: 300px;
}

.form-side {
    flex: 1 1 35%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background-color: #ffffff;
}

.bottom-section {
    flex: 1;
    /*background-color: #e9ecef;*/
    display: flex;
    align-items: end;
    justify-content: center;
}
/*768*/
@media (max-width: 768px) {
    .top-section {
        flex-direction: column;
        height: auto;
    }

    .image-side, .form-side {
        flex: 1 1 100%;
    }
}

/*Teléfonos pequeños*/
@media (max-width: 600px) {
    .divimglft {
        background-image: url('/img/loginLeft.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
}

/* Tablets */
@media (min-width: 601px) and (max-width: 1024px) {
    .divimglft {
        background-image: url('/img/loginLeft1.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;        
    }
}

/* Escritorio */
@media (min-width: 1025px) {
    .divimglft {
        background-image: url('/img/loginLeft.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
}


.btn-primary-vexapurple {
    background-color: #AE192D; /* Púrpura de Vexa */
    border-color: #C90166;
    border-radius: 0.5rem; /* Esquinas ligeramente redondeadas */
    font-weight: bold;
    color: white;
    font-size: 15px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    transition: box-shadow 0.2s ease;
}

    .btn-primary-vexapurple:hover {
        /*background-color: #911425;*/ /* Tono más oscuro al pasar el ratón */
        border-color: #C90166;
        color: white;
        box-shadow: 0 6px 12px rgba(0,0,0,0.4);
    }

/* Estilo del enlace "¿Olvidaste la contraseña?" */
.forgot-password-link {
    color: #6f42c1; /* Color púrpura para el enlace */
    font-size: 0.9rem;
}

.forgot-password-link:hover {
    color: #5a34a0; /* Tono más oscuro al pasar el ratón */
}

/* Estilo del enlace "Sign up" */
.signup-link {
    color: #333333; /* Color púrpura para el enlace */
    font-weight: bold;
    font-size: 1rem;
}

.signup-link:hover {
    color: #000; /* Tono más oscuro al pasar el ratón */
}

.btn-outline-google {
    color: #009887; /* Color del icono y borde para Google */
    border-color: #009887;
    border-width: 2px; /* Borde más grueso */
}

.btn-outline-google:hover {
    background-color: #009887;
    color: white;
}

/*Nuevo*/

#iconList {
    overflow-y: auto
}

#iconList .js-showcase-icon {
    min-height: 130px;
}

#iconList .js-showcase-icon.has-svg .sa-icon {
    width: 40px;
    height: 40px
}

#iconList .js-showcase-icon.has-svg:not(:hover) .sa-icon {
    fill: rgba(var(--bs-emphasis-color-rgb),.1);
    stroke: rgba(var(--bs-emphasis-color-rgb),.8)
}

#iconList.stack-demo .small, #iconList.stack-demo small {
    font-size: .755em
}

#iconList.stack-demo .js-showcase-icon.has-svg {
    height: 85px
}

#iconList.stack-demo .js-showcase-icon {
    height: 85px;
    min-height: 90px
}

.icon-preview i {
    font-size: 3em
}

.rounded {
    /*border-radius: var(--bs-border-radius) !important*/
    border-radius: 0.375rem!important
}

.rounded-0 {
    border-radius: 0 !important
}

.rounded-plus {
    border-radius: .625rem
}

.rounded-bottom {
    border-radius: 0 0 .25rem .25rem
}

.rounded-bottom {
    /*border-bottom-right-radius: var(--bs-border-radius) !important;*/
    /*border-bottom-left-radius: var(--bs-border-radius) !important*/
    border-bottom-right-radius: 0.375rem!important;
    border-bottom-left-radius: 0.375rem!important;
}

.rounded-top {
    border-radius: .25rem .25rem 0 0
}

/*.js-showcase-icon {
    height: 90px;
    min-height: 100px;
    border: 3px solid transparent;
    border-radius: 8px
}*/

.js-showcase-icon {
    height: 115px;
    min-height: 130px;
    border: 3px solid transparent;
    border-radius: 8px
}

.js-showcase-icon.has-svg {
    height: 125px;
}

.js-showcase-icon:hover {
    /*background: rgba(var(--bs-body-color-rgb),.8);*/
    /*color: var(--bs-body-bg)*/
    background: #c90166;
    color: #fff;
}

.js-showcase-icon:hover .text-muted {
    /*color: var(--bs-body-bg) !important*/
    color: #fff;
}

.js-showcase-icon:focus {
    border: 3px solid var(--primary-500)
}

.js-showcase-icon:active {
    scale: .95
}

.shadow-2, .shadow-hover-2:hover {
    -webkit-box-shadow: 0 .1rem .15rem rgba(0,0,0,.1);
    box-shadow: 0 .1rem .15rem rgba(0,0,0,.1);
}

/*.js-showcase-icon.has-svg .sa-icon {
    width: 55px;
    height: 55px;
    stroke-width: .5px;
    fill: rgba(var(--bs-body-color-rgb),.1);
    stroke: rgba(var(--bs-body-color-rgb),.9)
}

.js-showcase-icon.has-svg:hover .sa-icon {
    fill: rgba(var(--white),.1);
    stroke: rgba(var(--white),1);
    stroke-width: 1px
}*/

.js-showcase-icon.has-svg:hover .icon-preview {
    background: rgba(var(--primary),.9) !important
}

.js-showcase-icon.has-svg:hover .icon-preview>div {
    background: inherit !important
}

.js-showcase-icon {
    /*color: var(--bs-body-color)*/
    color: #4d4d4d;
}

.js-showcase-icon:hover .icon-preview {
    color: rgba(var(--white),.9);
    /*background: rgba(var(--primary),.9) !important*/
    background: #AE192D;
}

.js-showcase-icon:hover .icon-preview>div {
    background: inherit !important
}

/*.js-showcase-icon:focus {
    border: 3px solid var(--primary-500)
}*/

/*.js-showcase-icon:active {
    scale: .95
}*/