/* ////////////////////////////////////////////////////////////////////
*
*  Style Login
*   
* - body
* - wrapper-main / container-login
* - item-form
* - item-info
* - media
*
* //////////////////////////////////////////////////////////////////// */

/* --------------------------------------------------------------------
* - body
* -------------------------------------------------------------------- */
svg.bg-bottom{
   position: fixed;
   bottom: -10%;
   left: 0;
   z-index: -1;
}

/* --------------------------------------------------------------------
* - wrapper-main 
* -------------------------------------------------------------------- */
.wrapper-main-login {
    position: relative;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;

    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 100px;
    justify-content: center;
    align-items: center;
}

/* --------------------------------------------------------------------
* - container-login
* -------------------------------------------------------------------- */
.container-login{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
.container-login .item{
    height: 100%;
    padding: 20px;
}

/* --------------------------------------------------------------------
* - item-form
* -------------------------------------------------------------------- */
.item-form{
    position: relative;
    width: 330px;
    background-color: #fff;
}
.item-form .logo-login { margin-bottom: 30px;}
.item-form .logo-login img { height: 30px;}

.item-form form .form-group{ margin-bottom: 1.4rem;}

.item-form form { text-align: center;}

.item-form form .form-control{
    font-size: 0.9rem;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    outline: none;
    background-color: transparent;
}
.item-form form .form-control:focus{ 
    outline-style: none;
    box-shadow: none;
    border-bottom-color: var(--color-verde-alqia-75);
}

.item-form form .content-btn-login{ padding: 2rem 0 3rem 0;}
.item-form form .btn-login{ padding: 0.3rem 2.4rem;}

.item-form form .recover-password{ 
    font-size: 0.8rem;
    color: #999;
    margin-bottom: 2.4rem;
    cursor: pointer;
}
.item-form form .recover-password:hover{ color: #777;}

.form-group-password{ position: relative;}
.form-group-password .form-control{ padding-right: 20px;}
.form-group-password .btn-showPass {
    position: absolute;
    right: 5px;
    top: 10px;
    font-size: 14px;
    cursor: pointer;
}

/* --------------------------------------------------------------------
* - item-info
* -------------------------------------------------------------------- */
.item-info{
    position: relative;
    color: #fff;
    background-color: #52755E;
}
.item-info::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 90px 100px;
    background-repeat: no-repeat;
    background-image: url('/login/assets/bg-info.png?v=1.0');
}
.item-info h3,
.item-info h5{ font-weight: 200;}

/* --------------------------------------------------------------------
* - media
* -------------------------------------------------------------------- */
@media(max-width: 980px){
    svg.bg-bottom { bottom: 0;}

    .wrapper-main-login { 
        padding: 20px;
        padding-top: 60px;
        justify-content: flex-start;
    }

    .container-login { 
        flex-direction: column;
        height: auto;
    }

    .item-form{ order: 2;}
    .item-form .logo-login { margin-bottom: 1rem;}
    .item-form form .form-group { margin-bottom: 1.0rem;}
    .item-form form .content-btn-login{ padding: 0rem 0 0.5rem 0;}
    .item-form form .recover-password { margin-bottom: 0;}

    .item-info{ order: 1;}
    .item-info h5{ font-size: 1.0rem;}
}
@media(max-width: 480px){
    .item-info h3{ font-size: 1.1rem;}
    .item-info h5{ font-size: 0.9rem;}
}
@media(max-width: 350px){
    .container-login .item { width: 250px;}
}

@media (max-width: 1600px) and (orientation: landscape) {
    svg.bg-bottom { bottom: -10%;}
    .wrapper-main-login { height: 100%; padding-top: 60px;}
}