/*================================================
 WTC LOGIN INTERFACE
 IAM V1.0
================================================*/


*{

    box-sizing:border-box;

}


html,
body{

    margin:0;

    min-height:100%;

}


body{

    min-height:100vh;

    font-family:
    Tahoma,
    Arial,
    sans-serif;

    background:#f3f5f4;

    color:#1d312b;

}


button,
input{

    font:inherit;

}


.login-page{

    min-height:100vh;

    display:grid;

    grid-template-columns:
    minmax(360px, 46%)
    1fr;

}


/*================================
 IDENTITY PANEL
================================*/


.identity-panel{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:

    linear-gradient(
        rgba(0,62,47,.86),
        rgba(0,45,35,.93)
    ),

    url("../assets/login-background.jpg")
    center
    / cover
    no-repeat;

}


.identity-overlay{

    position:absolute;

    inset:0;

    background:

    radial-gradient(
        circle at center,
        rgba(210,171,48,.16),
        transparent 58%
    );

}


.identity-content{

    position:relative;

    z-index:1;

    width:min(520px, 88%);

    text-align:center;

    color:#ffffff;

}


.system-logo{

    width:145px;

    max-height:170px;

    object-fit:contain;

    margin-bottom:22px;

    filter:
    drop-shadow(
        0 10px 20px
        rgba(0,0,0,.35)
    );

}


.identity-content h1{

    margin:0 0 12px;

    color:#dfbd4b;

    font-size:34px;

}


.identity-content h2{

    margin:0;

    font-size:22px;

    font-weight:normal;

}


.identity-line{

    width:120px;

    height:3px;

    margin:28px auto;

    background:#d2aa31;

    border-radius:5px;

}


.identity-content p{

    margin:0 0 14px;

    font-size:24px;

    direction:ltr;

}


.identity-content span{

    display:block;

    font-size:17px;

    line-height:1.8;

    color:#e9efed;

}


/*================================
 LOGIN PANEL
================================*/


.login-panel{

    min-height:100vh;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:40px 25px 24px;

    background:

    radial-gradient(
        circle at top left,
        rgba(201,162,39,.12),
        transparent 32%
    ),

    #f3f5f4;

}


.login-card{

    width:min(470px, 100%);

    padding:42px 38px 34px;

    background:#ffffff;

    border-radius:24px;

    border-top:7px solid #c9a227;

    box-shadow:
    0 25px 65px
    rgba(0,54,41,.15);

}


.security-icon{

    width:82px;

    height:82px;

    margin:0 auto 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#f8f2dc;

    border:2px solid #d5b548;

    font-size:40px;

}


.login-card h2{

    margin:0 0 10px;

    text-align:center;

    color:#004832;

    font-size:30px;

}


.login-description{

    margin:0 0 30px;

    text-align:center;

    color:#687671;

    line-height:1.8;

}


form label{

    display:block;

    margin:0 0 8px;

    color:#263c35;

    font-weight:bold;

}


form input{

    width:100%;

    height:52px;

    padding:0 15px;

    border:1px solid #bdc9c5;

    border-radius:11px;

    background:#fbfcfc;

    color:#172722;

    outline:none;

    transition:
    border-color .2s,
    box-shadow .2s;

}


form input:focus{

    border-color:#087555;

    box-shadow:
    0 0 0 4px
    rgba(8,117,85,.12);

}


#username{

    margin-bottom:22px;

    direction:ltr;

    text-align:left;

}


.password-field{

    position:relative;

}


.password-field input{

    padding-left:52px;

    direction:ltr;

    text-align:left;

}


.toggle-password{

    position:absolute;

    left:5px;

    top:5px;

    width:42px;

    height:42px;

    border:0;

    border-radius:9px;

    background:transparent;

    cursor:pointer;

}


.login-message{

    display:none;

    margin-top:18px;

    padding:12px 14px;

    border-radius:10px;

    font-size:14px;

    line-height:1.6;

}


.login-message.error{

    display:block;

    color:#841d1d;

    background:#fff0f0;

    border:1px solid #efbbbb;

}


.login-message.success{

    display:block;

    color:#075f45;

    background:#edf9f5;

    border:1px solid #a8d9c9;

}


.login-button{

    width:100%;

    height:54px;

    margin-top:22px;

    border:0;

    border-radius:12px;

    background:
    linear-gradient(
        135deg,
        #006747,
        #004832
    );

    color:#ffffff;

    font-weight:bold;

    font-size:17px;

    cursor:pointer;

    box-shadow:
    0 10px 22px
    rgba(0,72,50,.22);

}


.login-button:hover{

    transform:translateY(-1px);

}


.login-button:disabled{

    opacity:.65;

    cursor:wait;

    transform:none;

}


.security-note{

    margin-top:22px;

    text-align:center;

    color:#75827e;

    font-size:13px;

}


.support-box{

    margin-top:26px;

    padding:17px;

    text-align:center;

    border-radius:13px;

    background:#faf7ec;

    border:1px solid #e3d39c;

    line-height:1.8;

}


.support-box span,
.support-box strong{

    display:block;

}


.support-box strong{

    color:#31463f;

    font-size:14px;

}


.support-box a{

    color:#006747;

    font-weight:bold;

    text-decoration:none;

    direction:ltr;

}


.login-panel footer{

    margin-top:28px;

    color:#82908b;

    text-align:center;

    font-size:13px;

}


/*================================
 RESPONSIVE
================================*/


@media(max-width:900px){

    .login-page{

        grid-template-columns:1fr;

    }


    .identity-panel{

        min-height:auto;

        padding:34px 20px;

    }


    .system-logo{

        width:90px;

        margin-bottom:12px;

    }


    .identity-content h1{

        font-size:25px;

    }


    .identity-content h2{

        font-size:17px;

    }


    .identity-line{

        margin:18px auto;

    }


    .identity-content p{

        font-size:18px;

    }


    .login-panel{

        min-height:auto;

        padding-top:32px;

    }

}


@media(max-width:520px){

    .login-card{

        padding:
        34px 22px 28px;

    }


    .login-card h2{

        font-size:26px;

    }

}