*{
    font-family: Arial, Helvetica, sans-serif;
}
:root{
    --body-color: #E4E9F7;
    --nav-color: #006408;
    --side-nav: #010718;
    --text-color: #FFF;
    --body-text: #000000;
    --search-bar: #F2F2F2;
    --search-text: #010718;
    --logo-color: #ffe600;
    --session-bar: #ffe600;
    --hr-ruler: #e0e0e0;
    --max-Con-w-Bg: #FFFFFF;
    --btn-primary: #3186ee;
    --btn-primary-hover: #1a5fb2;
}
body.dark{
    --body-color: #18191A;
    --nav-color: #242526;
    --body-text: #ffffff;
    --side-nav: #242526;
    --text-color: #CCC;
    --search-bar: #242526;
    --session-bar: #9b9b9b;
    --hr-ruler: #9b9b9b;
    --max-Con-w-Bg: #9b9b9b;
}
section{
    margin-top: 70px;
}
/*element text*/
hr {
    margin-top: 1px;
    border: none;       
    background-color: var(--hr-ruler);
    height: 1px;  
}
.formgroup{
    width: 100%;
}
.formgroup label{
    width: 100%;
    font-weight: bold;
}
.formgroup input{
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: bold;
    padding: 7px;
    border-radius: 5px;
    border: 1px solid black;
}
/*table list*/
.tableList table{
    width: 100%;
    border: 1px solid black;
    padding: 5px;
    min-width: 700px;
    border-collapse: collapse; /* wajib biar garis nyatu */
}
.tableList th,
.tableList td {
    border: 1px solid #000; /* garis hitam */
    padding: 8px;
    text-align: left;
}
/* freeze kolom NO */
.tableList th:nth-child(1),
.tableList td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fffbc1;
}

/* freeze kolom NAMA THE NICE */
.tableList th:nth-child(2),
.tableList td:nth-child(2) {
    position: sticky;
    left: 39px; /* SESUAIKAN lebar kolom No */
    border-right:1px solid black ;
    z-index: 2;
    background: #fffbc1;
}
thead{
    width: 100%;
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 4px;
    padding-bottom: 4px;
}
tbody{
    width: 100%;
    border: 1px solid black;
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 4px;
    padding-bottom: 4px;
}
/*container*/
.maxContainer{
    max-width: 1200px;
    display: block;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
}
.maxContainer-w{
    max-width: 1200px;
    display: block;
    background-color: var(--max-Con-w-Bg);
    border-radius: 10px;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
}
@media screen and (max-width: 790px) {
    .maxContainer-w{
        border-radius: 0px;
    }
    .tableList{
        overflow-x: auto;
    }
}

@font-face {
    font-family: "jelle";
    src: url(../font/Jellee-Roman.ttf);
}