body {
    padding: 0;
    margin: 0;
    /* background-image: url(../assetAdmin/img/kp2ks.jpg); */
    background-image: url(../assetAdmin/img/bg_kp2ks.png);
    background-size: cover;
    /* background-repeat: no-repeat; */
    /* background-repeat: repeat; */
    background-size: 100%;
    background-position: center;
    background-size: 100vw 200vh;
    /* font-family: 'Montserrat', sans-serif; */
}

.overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

/* @media only screen and (min-width: 768px) { */
/* layar hp */
@media only screen 
   and (max-width : 1440px) 
   and (max-height : 2560px) {
   /* Styles here */
    .box {
        position: absolute;
        /* width: 400px; */
        width: 350px;
        background-color: white;
        /* top: 50%; */
        top: 55%;
        /* margin-top: 155px; */
        left: 50%;
        /* left: 21%; */
        transform: translate(-50%, -50%);
        border-radius: 15px;
        /* box-shadow: 0 10px 10px 10px rgb(0, 0, 0, .2); */
        box-shadow: 0 1px 1px 10px rgba(255, 255, 255, 0.2)
    }
}
/* layar pc */
@media only screen and (min-width: 480px) {
    .box {
        position: absolute;
        /* width: 400px; */
        width: 350px;
        background-color: white;
        /* top: 50%; */
        top: 55%;
        /* left: 50%; */
        left: 17%;
        margin-top: 0px;
        transform: translate(-50%, -50%);
        border-radius: 15px;
        /* box-shadow: 0 10px 10px 10px rgb(0, 0, 0, .2); */
        box-shadow: 0 1px 1px 10px rgba(255, 255, 255, 0.2)

    }
}

.header {
    /* background-image: url(../assetAdmin/img/kop2.jpg); */
    background-image: url(../assetAdmin/img/header.jpg);
    background-size: cover;
    /* padding: 90px 30px; */
    /* padding: 60px 30px; */
    padding: 80px 30px;
    color: white;
    border-radius: 15px 15px 0 0;
    margin-top: -3px;
}

.header p {
    font-size: x-small;
}

.login-area {
    text-align: center;
    padding: 50px 50px 30px 50px;
    /* background-image: linear-gradient(180deg, #64704deb, transparent); */
    /* background-image: linear-gradient(180deg, #bdbdbdeb, #fff0, transparent);  */
    background-image: linear-gradient(180deg, #eed4bdeb, transparent);
}

.username,
.password {
    width: 100%;
    text-align: center;
    padding: 13px 0;
    border-radius: 20px;
    outline: none;
    border: none;
    color: white;
    /* background-color: rgba(55, 10, 114, .5); */
    background-color: rgb(12 70 185 / 54%);
    
    margin-bottom: 15px;
    transition: ,5s;
}

.username::placeholder,
.password::placeholder {
    color: rgba(255, 255, 255, .7);
}

.username:focus,
.password:focus {
    /* background-color: rgba(55, 10, 114, .7); */
    /* background-color:  rgba(55, 10, 114, .5); */ */
   
}

.submit {
    width: 150px;
    padding: 10px;
    /* background-color: rgba(55, 10, 114, 1); */
    background-color: rgb(210 13 13);
    
    border-radius: 10px;
    font-weight: bold;
    color: white;
    border: none;
    outline: none;
    margin: 10px;
    transition: .2s;
    cursor: pointer;
}

.submit:hover {
    background-color: #1f0344;
}

a {
    display: block;
    font-size: x-small;
    text-decoration: none;
    color: rgba(55, 10, 114, 1);
    margin-top: 10px;
}
.pesan{
    margin-left: 10px;
    margin-top: -20px;
    margin-bottom: 20px;
    text-align-last: center
}