body{

    margin:0;

    background:#f0ebf8;

    font-family:Arial, sans-serif;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    padding:24px;

    box-sizing:border-box;

}

.card{

width:100%;

max-width:760px;

background:white;

padding:42px;

border-top:10px solid #673AB7;

border-radius:12px;

}

h1{

    margin:10px 0 20px;

    color:#202124;

    font-size:2.2rem;

    font-weight:500;

}

.form-group{

    margin-top:24px;

}

.form-group:first-of-type{

    margin-top:18px;

}

input[type=text]{

width:100%;
padding:15px;
font-size:16px;
border:1px solid #dadce0;
border-radius:8px;
transition:.2s;
box-sizing:border-box;
margin-top: 8px;
}

input[readonly]{

background:#f5f5f5;

}

input[type=text]:focus{

outline:none;

border-color:#673AB7;

box-shadow:0 0 0 3px rgba(103,58,183,.12);

}

button{

width:100%;

margin-top:30px;

background:#673ab7;

color:white;

padding:15px;

font-size:17px;

font-weight:600;

letter-spacing:.4px;

border:none;

border-radius:8px;

cursor:pointer;

transition:.2s;

}

button:disabled{

background:#bdbdbd;

cursor:not-allowed;

}

button:hover:not(:disabled){

background:#5a31a8;

transform:translateY(-2px);

box-shadow:0 8px 20px rgba(103,58,183,.25);

}

.radio-group{

display:flex;

gap:20px;

margin:20px 0;

}

#autocomplete{

margin-top:5px;

border-radius:6px;

overflow:hidden;

}

.autocomplete-wrapper{

    position:relative;

}

.autocomplete-list{

    position:absolute;

    left:0;

    right:0;

    top:100%;

    background:white;

    border:1px solid #dadce0;

    border-top:none;

    max-height:250px;

    overflow-y:auto;

    display:none;

    z-index:100;

}

.autocomplete-item{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 14px;

}

.autocomplete-item::before{

    content:"👤";

}

.autocomplete-item.team::before{

    content:"👥";

}

.autocomplete-item:hover{

    background:#f1f3f4;

}

#status{

    margin-top:8px;

    font-size:14px;

    color:#188038;

}

.status{

margin-top:8px;

display:none;

padding:10px 14px;

border-radius:6px;

font-size:14px;

}

.status.success{

display:block;

background:#E6F4EA;

color:#137333;

border:1px solid #CEEAD6;

}

.status.error{

display:block;

background:#FCE8E6;

color:#C5221F;

border:1px solid #F6C7C4;

}

.type-selector{

    display:flex;

    gap:12px;

    margin:20px 0;

}

.type-card{

    flex:1;

    display:flex;
    align-items:center;
    gap:12px;

    padding:14px 18px;

    border:1px solid #dadce0;

    border-radius:8px;

    cursor:pointer;

    transition:.2s;

    background:white;

}

.type-card:hover{

    border-color:#673AB7;

}

.type-card.active{

    border:2px solid #673AB7;

    background:#F4EEFF;

}

.type-card .icon{

    font-size:24px;

    margin:0;

}

.type-card .title{

    font-size:16px;

    font-weight:600;

}

.info-box{

    background:#E8F0FE;

    border-left:4px solid #1A73E8;

    border-radius:8px;

    padding:14px 18px;

    margin:16px 0 24px;

}

.info-title{
    font-size:16px;
    font-weight:600;
    color:#174EA6;
    margin-bottom:8px;
}

.info-content{
    font-size:15px;
    line-height:1.6;
    color:#3C4043;
}

.info-content p{
    margin:0;
}

.info-content ol{
    margin:0 0 0 20px;
    padding:0;
}

.info-content li{
    margin: 0;
}

.date-group{

    display:flex;
    align-items:center;
    gap:10px;

}

.date-group input{

    flex:1;
    min-width:0;

}

#btnTanggal{

    flex:0 0 92px;

    width:92px;

    height:46px;

    margin:8px 0 0;

    padding:0;

    font-size:15px;

    border-radius:8px;

}

/* ==========================================
   MOBILE
========================================== */

@media (max-width:768px){

    body{

        padding:20px;
        align-items:flex-start;

    }

    .card{

        max-width:100%;
        padding:22px 30px 24px;
        border-radius:6px;
        box-sizing:border-box;
        /* min-height:100vh; */
        box-shadow:none;

    }

    h1{

        font-size:2rem;
        line-height:1.25;
        margin-bottom:18px;

    }

    .info-box{

        padding:12px;
        margin:16px 0 20px;

    }

    .info-content{

        font-size:14px;
        line-height:1.55;

    }

    .info-content ol{

        margin-top:6px;
        margin-left:18px;

    }

    .type-selector{

        gap:10px;

    }

    .type-card{

        padding:14px;

    }

    .type-card .icon{

        font-size:22px;

    }

    .type-card .title{

        font-size:15px;

    }

    .form-group{

        margin-top:18px;

    }

    label{

        font-size:15px;
        font-weight:bolder;

    }

    input[type=text]{

        height:50px;
        font-size:16px;
        padding:0 14px;

    }

    .autocomplete-list{

        max-height:220px;

    }

    .autocomplete-item{

        padding:14px;

        font-size:15px;

    }

    .status{

        font-size:13px;

    }

    .date-group{

        flex-direction:row;

        align-items:center;

        gap:8px;

    }

    .date-group input{

        flex:1;

    }

    #btnTanggal{

        width:88px;

        min-width:88px;

        height:48px;

        margin-top:8px;

        font-size:15px;

    }

    button{

        margin-top:22px;
        height:52px;
        font-size:17px;

    }

}