@import url('https://fonts.googleapis.com/css?family=Roboto');

*{
    box-sizing:border-box;
}

body{
	min-height: 100vh;
    margin:0;
    padding:20px 0;
    font-family:'Poppins',sans-serif;
    font-weight:bolder;
    background:
				radial-gradient(circle at top left, rgb(76 116 203),
				transparent 24rem), radial-gradient(circle at bottom right,
				rgb(14 25 143), #0f6dab 28rem), linear-gradient(135deg, #082f49 0%, #0c118e 100%);		
}

/*
|--------------------------------------------------------------------------
| CONTAINER
|--------------------------------------------------------------------------
*/
div.container{
    margin:20px auto;
    padding:1em;
    overflow:hidden;
    border:2px solid #0078a8;
    border-radius:20px;
    background:#fff;
	box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
	
	
}


/*
|--------------------------------------------------------------------------
| FORM ELEMENT
|--------------------------------------------------------------------------
*/

div.container label,
div.container input,
div.container button{
    display:block;
    width:100%;
    font-size:1em;
}

div.container label{
    margin:.5em 0;
}

div.container input{
    width:100%;
    padding:.8em .8em;
    outline:none;
    border:none;
    border-bottom:2px solid #0078a8;
    margin:.5em 0;
    background:transparent;
}

div.container button{
    width:100%;
    outline:none;
    margin:.5em 0 1em;
    padding:1em;
    cursor:pointer;
    letter-spacing:.15em;
    background-color:#0078a8;
    color:#fff;
    border:none;
    border-radius:5px;
}

/*
|--------------------------------------------------------------------------
| TAB
|--------------------------------------------------------------------------
*/

.tab{
    display:flex;
    width:100%;
}

.tablinks{
    width:50%;
    text-align:center;
    cursor:pointer;
    border:.4px solid #0078a8;
    padding:1em;
    transition:.2s;
}

.active{
    animation:activetab .5s;
    background:#0d70cb;
    color:#fff;
}

@keyframes activetab{
    from{
        transform:rotateY(180deg);
    }
    to{
        transform:rotateY(0deg);
    }
}

.tabcontent{
    width:100%;
    display:none;
    padding:1.5em 0;
    overflow:hidden;
}

/*
|--------------------------------------------------------------------------
| INPUT BOX
|--------------------------------------------------------------------------
*/

.input-box{
    position:relative;
    width:100%;
    margin-bottom:10px;
}

.input-box input{
    width:100%;
    margin:0;
    padding-right:45px;
}

.input-box i{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    font-size:20px;
    color:#666;
}

/*
|--------------------------------------------------------------------------
| PASSWORD
|--------------------------------------------------------------------------
*/

.password-wrapper{
    position:relative;
    width:100%;
}

.password-wrapper input{
    width:100%;
    padding-right:50px;
}

.password-wrapper .toggle-password{
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    background:none;
    border:none;
    box-shadow:none;
    width:auto;
    margin:0;
    padding:0;
    color:#666;
    cursor:pointer;
}

.password-wrapper .toggle-password:hover{
    color:#0078a8;
}

/*
|--------------------------------------------------------------------------
| CAPTCHA
|--------------------------------------------------------------------------
*/

.captcha-group{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
}

.captcha-group input{
    flex:1;
    min-width:0;
    margin:0;
}

.captcha-box{
    min-width:120px;
    text-align:center;
    cursor:pointer;
}

.captcha-box canvas{
    display:block;
    max-width:100%;
}

/*
|--------------------------------------------------------------------------
| CHECKBOX
|--------------------------------------------------------------------------
*/

.checkbox-container{
    display:flex;
    align-items:flex-start;
    gap:8px;
    margin:10px 0;
}

.checkbox-container input[type="checkbox"]{
    width:18px;
    height:18px;
    margin-top:2px;
    flex-shrink:0;
}

.checkbox-container label{
    width:auto;
    margin:0;
    line-height:1.4;
    font-size:.8em;
    font-weight:600;
}

/*
|--------------------------------------------------------------------------
| RESPONSE AREA
|--------------------------------------------------------------------------
*/

.login-response,
#absenResponse{
    margin-top:10px;
    width:100%;
    word-break:break-word;
}

/*
|--------------------------------------------------------------------------
| BUTTON DISABLED
|--------------------------------------------------------------------------
*/

button:disabled{
    opacity:.6;
    cursor:not-allowed;
}

/*
|--------------------------------------------------------------------------
| DESKTOP
|--------------------------------------------------------------------------
*/

@media only screen and (min-width:1224px){

    div.container{
        width:470px;
        max-width:470px;
    }
}

@media only screen and (min-width:1824px){

    div.container{
        width:470px;
        max-width:470px;
    }
}

/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media only screen and (max-width:768px){

    div.container{
        width:92%;
        max-width:500px;
    }
}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media only screen and (max-width:480px){

    div.container{
        width:95%;
        padding:.8em;
    }

    .captcha-group{
        gap:6px;
    }

    .captcha-box{
        min-width:90px;
    }

    .checkbox-container label{
        font-size:.75em;
    }

    div.container button{
        padding:.9em;
    }
}

/*
|--------------------------------------------------------------------------
| FOOTER
|--------------------------------------------------------------------------
*/

.footer-text{
    width:100%;
    text-align:center;
    font-size:.8em;
    line-height:1.5;
    margin-top:15px;
    color:#605d5d;
    word-wrap:break-word;
}

.footer-text strong{
    font-weight:700;
}

@media (max-width:768px){
    .footer-text{
        font-size:.75em;
        line-height:1.4;
    }
}

@media (max-width:480px){
    .footer-text{
        font-size:.70em;
        padding:0 10px;
    }
}

/*
|--------------------------------------------------------------------------
| LOGO HEADER
|--------------------------------------------------------------------------
*/

.logo-wrapper{
    width:100%;
    text-align:center;
    margin:0 auto 20px auto;
    padding-bottom:10px;
}

.login-logo{
    display:block;
    margin:0 auto 10px auto;
    width:min(220px, 90%);
    height:auto;
    object-fit:contain;
}

.logo-wrapper p{
    margin:0;
    padding:0;
    font-size:1rem;
    font-weight:600;
    line-height:1.4;
    color:#333;
    text-align:center;
    word-break:break-word;
}

/* Tablet */
@media (max-width:768px){

    .login-logo{
        width:min(180px, 85%);
    }

    .logo-wrapper p{
        font-size:.9rem;
    }
}

/* Mobile */
@media (max-width:480px){

    .logo-wrapper{
        margin-bottom:15px;
    }

    .login-logo{
        width:min(140px, 80%);
    }

    .logo-wrapper p{
        font-size:.8rem;
        line-height:1.3;
        padding:0 10px;
    }
}