body{

    background-image: url('../img/bg-login.svg');
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 16px;

}

.login-content{

        width: 400px;
       
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      


}

.login-box{

    width: 100%;
    border-radius: 1rem;
    background-color:  #fff;
    margin: 2rem 0;
    height: auto;
    padding: 2rem;
    -webkit-box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.33); 
box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.33);

}

.login-box h2{

font-size: 1.5rem;
margin-top: 0;
font-weight: 500;

}


.item-form{

    margin-bottom: 1rem;

}


.item-form label{

    display: block;
    font-size: 1rem;
    margin-bottom: .25rem;
    font-weight: 500;

}

.item-form .input{

    padding: 8px;
    color: #000;
    border-width: thin;
    border-style: solid;
    border-color: #ccc;
    width: 100%;
    display: block;
    height: auto;

}

.item-form .input:focus-visible{

    border-color: #0B00CF;
    border-width: thin;
    outline-color: #0B00CF;
    outline-width: 1px;

}




.button--isi{margin: 0; border-radius: .5rem!important; background-color: #0B00CF; float: none; padding: 1rem 1.2rem;}

.control-buttons{

    margin-top: 2rem;
    text-align: right;
    display: flex;
    justify-content: flex-end;

}

.alert-error{

    background-color: #c701322a;
    border-left: 3px solid #c70132;
    color: #000;
    padding: 1rem;
    width: 100%;
    font-size: 1rem;
    font-weight: 500;


}

.logo{text-align: center;}


.copy-login{

    font-size: .875rem; 
    color: rgba(255,255,255,.8);
    text-align: center;
    line-height: 1.4;

}

.button--isi::before{

    background-color: #3127E2;

}