/* * main */
.main{
    min-height: 100vh;
}

/* * logo */
.logo{
    width: 100%;
    height: 8rem;
    object-fit: contain;
}

/* * notification js */
.notification{
    position: fixed;
    z-index: 1;
}

/* * error de validacion */
.support{
    display: block;
    position: absolute;
    bottom: -1.5rem;
    height: fit-content;
    padding: 0;
    margin: 0;
    background: transparent;
    color: var(--invalid-color);
}
.support.info{
    display: block;
    position: absolute;
    bottom: -1.5rem;
    height: fit-content;
    padding: 0;
    margin: 0;
    background: transparent;
    color: #222;
}

/* * ver contraseña */
.see-password {
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 45px;
    color: var(--color-one);
    transition: 500ms;
    z-index: 1;
}

.see-password.active,
.see-password:hover {
    color: var(--color-two);
}

/* * login centrado */

.centrar-form .row {
    justify-content: center;
    align-items: center;
}

/* * color del h2 */

.main h2 {
    color: #fff;
}

/* * btn submit */

.btn.btn-two{
    width: 100%;
}

/* * MD */

@media(min-width: 768px) {
    /* * ver contraseña */
    .see-password {
        right: 25%;
    }
}


/* * LG */

@media(min-width: 1024px) {
    /* * ver contraseña */
    .see-password {
        right: calc( ( 100% - 83.3333333333% ) / 2 );
    }

    /* * background login-wrapper lg */
    .form-container {
        min-height: 100vh;
        align-items: center;
    }
    /* *color del h2 en laptop */
    .main h2 {
        color: #222;
    }
    .centrar-form .row {
        overflow: hidden;
        padding: 0;
    }
    .form-image-container {
        border-top-left-radius: .5rem;
        border-bottom-left-radius: .5rem;
        overflow: hidden;
        height: 100%;
    }
    .form-image-container img {
        height: 25rem;
        object-fit: cover;
        width: 100%;
    }
    form {
        box-shadow: 0 0 0 1px #ccc inset;
        padding: 0;
        background: #fff;
        border-top-right-radius: 0.5rem;
        border-bottom-right-radius: .5rem;
        min-height: 25rem;
    }
    /* * ingresar btn lg*/
    .ingresarBtn {
        margin-left: 1px;
    }

    /* * btn submit */
    
    .btn.btn-two{
        background-color: transparent;
        color: rgba(250,250,250,.95);
        border: 2px solid var(--color-one);
        background-image: linear-gradient(90deg,transparent 50%,var(--color-one) 50%);
    }
    .btn.btn-two:hover {
        background-color: transparent;
        color: var(--color-one);
        border-color: var(--color-one);
        background-image: linear-gradient(90deg,transparent 50%,var(--color-one) 50%);
    }
}


/* * XL */

@media(min-width: 1200px) {
    /* * ver contraseña */
    .see-password {
        right: 0;
    }

    .ingresarBtn {
        margin-left: 1.5rem;
    }
}