/* CONTENEDOR GENERAL */

.login-wrapper{
    display:flex;
    min-height:100vh;
    font-family:'Segoe UI',sans-serif;
}

/* LADO IZQUIERDO */

.login-left{
    flex:1;
    background:linear-gradient(135deg,#27c27c,#1a9e63);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.login-illustration img{
    width:420px;
}

/* LADO DERECHO */

.login-right{
    flex:1;
    background:#f5f7f6;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* TARJETA */

.login-card{
    width:350px;
    text-align:center;
}

/* AVATAR */

.login-avatar{
    width:90px;
    height:90px;
    border-radius:50%;
    background:white;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
    margin-bottom:30px;
    box-shadow:0 10px 25px rgba(0,0,0,.1);
}

.login-avatar img{
    width:60px;
}

/* TITULO */

.login-title{
    font-weight:700;
    margin-bottom:30px;
    letter-spacing:2px;
}

/* INPUTS */

.input-group-modern{
    display:flex;
    align-items:center;
    border-bottom:2px solid #ddd;
    margin-bottom:25px;
    padding:8px;
}

.input-group-modern i{
    color:#999;
    margin-right:10px;
}

.input-group-modern input{
    border:none;
    outline:none;
    flex:1;
    background:transparent;
}

/* BOTON VER PASSWORD */

.password-toggle{
    border:none;
    background:none;
    color:#777;
}

/* OPCIONES */

.login-options{
    text-align:right;
    margin-bottom:25px;
}

.login-options a{
    font-size:13px;
    color:#777;
    text-decoration:none;
}

/* BOTON LOGIN */

.btn-login{
    width:100%;
    border:none;
    padding:14px;
    border-radius:30px;
    background:linear-gradient(135deg,#27c27c,#1a9e63);
    color:white;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}
.btn-login:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}

/* LOADER */

.btn-loader{
    display:none;
}

/* ESTADO CARGANDO */

.btn-login.loading .btn-text{
    display:none;
}

.btn-login.loading .btn-loader{
    display:inline-block;
}
html, body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}
/* LADO IZQUIERDO */

.login-left{
    flex:1;
    background:linear-gradient(135deg,#27c27c,#1a9e63);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    overflow:hidden;
}

/* FORMAS DECORATIVAS */

.shape{
    position:absolute;
    border-radius:50%;
    filter:blur(60px);
    opacity:.4;
}

.shape1{
    width:400px;
    height:400px;
    background:#6ee7b7;
    top:-100px;
    left:-100px;
}

.shape2{
    width:350px;
    height:350px;
    background:#34d399;
    bottom:-120px;
    right:-120px;
}

/* CONTENEDOR MARCA */

.brand-container{
    text-align:center;
    color:white;
    position:relative;
    z-index:2;
}

/* LOGO */

.brand-logo{
    width:160px;
    height:160px;
    background:white;
    border-radius:25px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:auto;
    box-shadow:0 20px 40px rgba(0,0,0,.2);
    animation:float 5s ease-in-out infinite;
}

.brand-logo img{
    width:120px;
}

/* TITULO */

.brand-title{
    margin-top:30px;
    font-size:40px;
    font-weight:800;
    letter-spacing:3px;
}

/* SUBTITULO */

.brand-subtitle{
    opacity:.9;
    margin-top:10px;
}

/* ANIMACION */

@keyframes float{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0px);
    }

}