@import './../lte3/../lte3/dist/css/variables.css';

/**BODY**/
.login-page {
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
}


    .state-session {
        display:flex;
        align-items:center;
        gap: 10px;
        margin-bottom: 2.5vh;
        margin-top: 1vh;
    }

.state-session span {
    font-size: 16px !important;
}

/*Tarjeta grande donde está todo*/
#card-login {
    display: flex;
    flex-direction: inline;
    border-radius: 20px;
    background-color: #ffffff;
    box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.2);
    width:100%;
    height: 100%;
    max-width: 45rem;

    justify-content:center;
    align-items:center;
}


/*Contenedor de la tarjega del login*/
.login-box {
    width: 100vw;
    height: 68vh;
    display:flex;
    justify-content:center;
}

.login-box-msg {
    color: var(--second-title);
}

.login-target {
    height: 100%;
    width: 55%;
    text-align: center;
}

.login-target h3 {
    margin-top: 100px;
    color: var(--second-title);

}

/*Contenedor imagen*/
.login-image {
    height: 100%;
    width: 45%;
    overflow: hidden;
    position: relative;
    margin: auto;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

/*Imágenes*/
.login-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: none;
    /* Necesario para que no limite el tamaño de la imagen */
    display: block;
    /* Ajusta el ancho automáticamente */
    height: auto;
    /* Ajusta la altura automáticamente */
}

/*Imagen de fondo*/
.second-image {
    pointer-events: none;
    z-index: 2;
}

.main-image {
    width: 80%;
    z-index: 1;
}


form{
    width:100%;
}

.principal-form-container {
    padding-top: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/*Inputs del formulario*/
.container-for-input {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--border-grey);
    width: 55%;
    height: 39px;
    border-radius: 24px;
    font-size: 18px;
    transition: all 0.2s ease-in-out;
}

.container-for-input:focus-within {
    border: 2px solid var(--green-color);
}

.container-for-input:focus-within .bx {
    color: var(--green-color);
}

.input {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.input-form {
    color: var(--primary-text);
    margin-right: -10px;
    border-radius: 24px;
    width: 80%;
    height: 34px;
    border: none;
    background-color: transparent;

    &:focus {
        border: none !important;
        outline: 0 none;

    }

    &:active {
        border: none !important;
        outline: 0 none;
    }
}

.separador {

    margin-top: -8px;
}

/**Estos son los iconos**/
.principal-form-container span {
    font-size: 22px;
    margin-right: 3px;
    color: #808080;
    margin-top: -3px;
}


/**Contenedor del botón enviar**/
.contenedor-enviar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#button-enviar {
    background-color: var(--green-color);
    color: white;
    border-radius: 24px;
    margin-top: 10px;
    max-width: 46%;
    transition: all 0.2s ease-in-out 0s;

    &:hover {
        background-color: var(--green-hover);
    }

    &:active {
        background-color: var(--green-active);
    }
}

#button-enviar span{
    color:white;
}


/*Contenedor Imagen del logo*/
.login-logo {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
}

/* Logo agrowen a color */
.login-logo a img{
    width: 40%;
    max-width: 400px;
}


/**Texto ha olvidado supassword**/
#recovery-password a {
    color: var(--second-title);
    transition: all 0.2s ease-in-out 0s;

    &:hover {
        color: var(--second-title-hover);
    }
}

#recovery-password {
    padding-bottom: 10px;
    font-size:18px;
}

body {
    background-color: white !important;
}

.card-body{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;
}

    /*Mensajes de error*/

    .alert{
        background-color:var(--red-color) !important;
        position:absolute;
        z-index:20;
        border-radius:9px;
    }

    .close {
        color:white !important;
    }
    .alert-text div{
        font-size: 14px;
        width:100%;
    }

/*Responsive*/

@media (max-width: 30em) {

    /*Contenedor de la tarjega del login*/
    .login-box {
        width: 90vw;
        height: 42vh;
    }


    .principal-form-container {
        padding-top: 0px;
    }


    .login-target h3 {
        margin-top: 2.5vh;
        color: var(--second-title);
        font-size:20px;
    }

    .input {
        width: 100%;
    }

    .input-form {
        font-size:14px;
        width: 78%;
    }

    .separador {

        margin-top: 0px;
    }

    /**Estos son los iconos**/
    .principal-form-container span {
        font-size: 16px;
        margin-right: 0px;
        color: #808080;
        margin-top: -2px;
        margin-left: -10px;
    }


    #button-enviar {
        background-color: var(--green-color);
        color: white;
        height: 26px;
        border-radius: 24px;
        margin-top: 0px;
        max-width: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease-in-out 0s;

        &:hover {
            background-color: var(--green-hover);
        }

        &:active {
            background-color: var(--green-active);
        }
    }

    #button-enviar span {
        margin-top: 3px;
        margin-left: -2px;
        color: white;
        font-size: 14px;
    }

    /*Contenedor Imagen del logo*/
    .login-logo {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        padding-bottom:0px;
    }

    .login-logo img {
        width: 70% !important;
    }


    .state-session span{
        font-size: 12px !important;
    }

    /*Inputs del formulario*/
    .container-for-input {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px solid var(--border-grey);
        width: 100%;
        height: 32px;
        border-radius: 24px;
        font-size: 16px;
        transition: all 0.2s ease-in-out;
        margin-top: 0px;
    }

    /**Texto ha olvidado supassword**/
    #recovery-password a {
        width:100%;
        font-size:12px;
        color: var(--second-title);
        transition: all 0.2s ease-in-out 0s;

        &:hover {
            color: var(--second-title-hover);
        }
    }

    #recovery-password  {
        padding-bottom: 0px;
        width:100%;
        font-size:12px;
    }

    .login-box-msg{
        font-size:18px;
    }

    /*Mensajes de error*/

    .alert{
        background-color:var(--red-color) !important;
        position:absolute;
        z-index:20;
        border-radius:9px;
        display:flex;
        align-items: center;
        justify-content: center;
        width:80%;


    }

    .close {
        color:white !important;
    }
    .alert-text div{
        display:block;
        font-size: 14px;

    }

}
@media (min-width: 30em ) and (min-height:60em) {

    /*Contenedor de la tarjega del login*/
    .login-box {
        width: 75vw;
        height: 40vh;
    }

    .login-target h3 {
        margin-top: 40px;
        color: var(--second-title);
        font-size:20px;

    }

    .input {
        width: 100%;
    }

    .input-form {
        font-size:14px;
        width: 78%;
    }

    .separador {

        margin-top: 0px;
    }

    /**Estos son los iconos**/
    .principal-form-container span {
        font-size: 16px;
        margin-right: 0px;
        color: #808080;
        margin-top: -2px;
        margin-left: -10px;
    }


    #button-enviar {
        background-color: var(--green-color);
        color: white;
        height: 26px;
        border-radius: 24px;
        margin-top: 0px;
        max-width: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease-in-out 0s;

        &:hover {
            background-color: var(--green-hover);
        }

        &:active {
            background-color: var(--green-active);
        }
    }

    #button-enviar span {
        margin-top: 3px;
        margin-left: -2px;
        color: white;
        font-size: 14px;
    }

    /*Contenedor Imagen del logo*/
    .login-logo {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        padding-bottom:10px;
    }

    .login-logo img {
        width: 70% !important;
    }

    /*Inputs del formulario*/
    .container-for-input {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px solid var(--border-grey);
        width: 100%;
        height: 32px;
        border-radius: 24px;
        font-size: 16px;
        transition: all 0.2s ease-in-out;
        margin-top: 0px;
    }

    /**Texto ha olvidado supassword**/
    #recovery-password a {
        width:100%;
        font-size:12px;
        color: var(--second-title);
        transition: all 0.2s ease-in-out 0s;

        &:hover {
            color: var(--second-title-hover);
        }
    }

    #recovery-password  {
        padding-bottom: 0px;
        width:100%;
        font-size:12px;
    }

    .login-box-msg{
        font-size:18px;
    }

    /*Mensajes de error*/

    .alert{
        background-color:var(--red-color) !important;
        position:absolute;
        z-index:20;
        border-radius:9px;
    }

    .close {
        color:white !important;
    }
    .alert-text div{
        font-size: 14px;
        width:100%;

    }

    form{
        width:65%;
    }


}