/*=====================================================
    CREDIHOME LOGIN
    MantisBT 2.28.4
======================================================*/

:root{

    --ch-primary:#0B4F99;
    --ch-primary-dark:#083A73;

    --ch-bg1:#071B35;
    --ch-bg2:#0A2D59;
    --ch-bg3:#0F5DAF;

    --ch-white:#FFF;

    --ch-text:#1F2937;
    --ch-text-light:#6B7280;

}

/****************
    RESET
*****************/

body.login-layout,
body.login-layout html{

    margin:0;
    padding:0;
    width:100%;
    min-height:100vh;

}

/****************
    FONDO
*****************/

body.login-layout{

    background:
    radial-gradient(circle at top,
        #1D63BA 0%,
        var(--ch-bg3) 30%,
        var(--ch-bg2) 65%,
        var(--ch-bg1) 100%) !important;

    overflow-x:hidden;

    position:relative;

}

/* C¨Ērculos decorativos */

body.login-layout::before{

    content:"";

    position:fixed;

    top:-220px;
    right:-180px;

    width:620px;
    height:620px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    pointer-events:none;

}

body.login-layout::after{

    content:"";

    position:fixed;

    bottom:-170px;
    left:-170px;

    width:480px;
    height:480px;

    border-radius:50%;

    background:rgba(255,255,255,.04);

    pointer-events:none;

}

/**************************************************
    CONTENEDORES BOOTSTRAP DEL LOGIN
**************************************************/

body.login-layout .main-container,
body.login-layout .main-content{

    width:100%;
    min-height:100vh;

}

body.login-layout .main-content .row{

    margin:0;

}

body.login-layout .col-md-6,
body.login-layout .col-md-offset-3,
body.login-layout .col-sm-10,
body.login-layout .col-sm-offset-1{

    width:100% !important;

    max-width:100% !important;

    margin:0 !important;

    padding:0 !important;

    left:auto !important;

}

/****************
    CONTENEDOR
*****************/

body.login-layout .login-container{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    min-height:100vh;

    padding:40px;

    position:relative;

    z-index:5;

}

/****************
    LOGO
*****************/

/****************
    SUBTITULO
*****************/

body.login-layout .login-container::before{

    content:"CrediHome";

    display:block;

    color:#FFF;

    font-size:42px;

    font-weight:700;

    margin-bottom:8px;

}

body.login-layout .login-container::after{

    content:"Portal de Mesa de Ayuda";

    display:block;

    color:rgba(255,255,255,.85);

    font-size:18px;

    margin-bottom:35px;

}

/****************
    TARJETA
*****************/

body.login-layout .widget-box{

    width:560px;

    max-width:95%;

    background:#FFF;

    border:none;

    border-radius:24px;

    overflow:hidden;

    box-shadow:
        0 30px 80px rgba(0,0,0,.28);

    animation:ch-login .7s ease;

}

/****************
    CONTENIDO
*****************/

body.login-layout .widget-main{

    padding:60px 55px;

}

/****************
    TITULO
*****************/

body.login-layout .widget-main h4{

    text-align:center;

    color:var(--ch-primary-dark);

    font-size:34px;

    border:none;

}

body.login-layout .widget-main h4::after{

    content:"Ingrese sus credenciales";

    display:block;

    margin-top:12px;

    font-size:16px;

    color:var(--ch-text-light);

    font-weight:400;

}

/****************
    INPUT
*****************/

body.login-layout .form-control{

    height:55px;

    border-radius:12px;

    background:#FBFCFE;

    border:1px solid #D8DEE7;

    transition:.25s;

}

body.login-layout .form-control:focus{

    background:#FFF;

    border-color:var(--ch-primary);

    box-shadow:0 0 0 4px rgba(11,79,153,.18);

}

/****************
    BOTON
*****************/

body.login-layout .btn-success{

    width:100%;

    height:55px;

    border:none;

    border-radius:12px;

    background:linear-gradient(
        180deg,
        #1976D2,
        var(--ch-primary)
    );

    font-size:17px;

    font-weight:600;

}

/****************
    ALERTAS
*****************/

body.login-layout .alert{

    border:none;

    border-radius:14px;

}

/****************
    FOOTER
*****************/

body.login-layout .toolbar{

    padding:18px;

    background:#F8FAFC;

}

/****************
    ANIMACION
*****************/

@keyframes ch-login{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

body.login-layout img[src*="credihome"]{

    width: 250px !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;

}