/*body*/
* {
    box-sizing: border-box;
}

body {font-family: Arial, Helvetica, sans-serif; background: #dfdfdf; padding: 0px; margin: 0px auto;}
    @media (max-width: 768px) {body {flex-direction: column; align-items: stretch;}}


/*CONTAINER*/

.card {width: 100px; background: white; margin-bottom: 25px; font-size: 14px;}
.container {width: 100%; font-size: 14px;}
.container1 {display: flex; width: 100%; justify-content: center; align-items: center; text-align: center; font-size: 14px; padding: 2px; gap: 5px;}
.container2 {width: 100%; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 14px; 
                padding: 0px; margin: 0px auto; flex-direction: column;}
.container-form {width: 40%; background: white; justify-content: center; padding: 25px; margin: 0px auto; gap: 0px; font-size: 14px; 
                    border-radius: 15px; box-shadow: 0 0 0 3px rgba(53,108,184,0.12);}
.container-40 {width: 50%; display: flex; justify-content: center; align-items: center; margin: 0px auto; font-size: 14px;}
.container-60 {width: 60%; background: white; justify-content: center; padding: 15px; margin: 0px auto; gap: 15px; font-size: 14px;
                    border-radius: 15px; box-shadow: 0 0 0 3px rgba(53,108,184,0.12);}
.container-cari {width: 70%; display: flex; justify-content: center; align-items: center; margin: 0px auto; padding: none; font-size: 14px;}
.container-nav {width: 5%; display: flex; justify-content: center; margin: 0px auto; gap: 5px; font-size: 14px;}
    @media (max-width: 768px) {
        .container {width: 95%;}
        .container1 {width: 100%; flex-direction: column; align-items: stretch; padding: 5px; gap: 0px;}
        .container2 {width: 100%;}
        .container-form {width: 95%;}
        .container-40 {width: 40%; flex-direction: column; align-items: stretch; padding: 5px; gap: 0px;}
        .container-60 {width: 80%; gap: 25PX;}
        .container-cari {width: 70%;}
    }
    

/*GRID*/
.grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); background: white;}
    @media (max-width: 768px) {
        .grid {width: 100%; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 5px;}
    }


/*BUTTON*/
.btn-1 {display: inline-block; background: #f59638; font-size: 16px; justify-content: center; align-items: center; 
            text-align: center; padding: 8px 20px ; margin-bottom: 0px; text-decoration: none; border-radius: 8px;}
    .btn-1:hover {background: #fab47b;}

.btn-2 {display: inline-block; background: #0883bc; font-size: 16px; color: white; justify-content: center; align-items: center; 
            text-align: center;  padding: 8px 20px ; margin-bottom: 0px; text-decoration: none; border-radius: 8px;}
    .btn-2:hover {background: #10c7e8;}

button {display: inline-block; background: #66e849; font-size: 16px; justify-content: center; align-items: center; border: none; padding: 8px 20px;
            text-align: center; margin-bottom: 0px; text-decoration: none; border-radius: 8px;}
    button:hover {background: #74d8ad;}

.btn-nav1 {background-color: rgb(255, 68, 0);  padding: 8px 20px ; font-size: 10px; cursor: pointer; border-radius: 15px;  border-radius: 15px; 
            color: #ffffffff; text-align: center; margin: 5px; display: flex; text-decoration: none;}
    .btn-nav1:hover {background-color: rgb(255, 153, 106); cursor: pointer; color: #ffffffff;}

.btn-nav2 {background-color: rgb(0, 41, 188); padding: 8px 20px ; font-size: 10px; cursor: pointer; color: rgb(255, 255, 255); 
            text-align: center; margin: 5px; display: flex; text-decoration: none;  border-radius: 15px;}
    .btn-nav2:hover {background-color: rgb(75, 162, 255); cursor: pointer; color: #ffffffff;}

.btn-img1 {display: flex; background: #5edaf9; font-size: 16px; justify-content: center; align-items: center; 
            text-align: center; padding: 8px 25px; margin-bottom: 5px; text-decoration: none; border-radius: 15px; gap: 15px;}
    .btn-img1:hover {background: #abeefe;}

.btn-img2 {display: flex; background: #ffb571; font-size: 16px; justify-content: center; align-items: center; 
            text-align: center; padding: 8px 25px; margin-bottom: 5px; text-decoration: none; border-radius: 15px; gap: 15px;}
    .btn-img2:hover {background: hsl(38, 100%, 86%);}

.clickable-row {cursor: pointer; background-color: #ffffffff;}
    .clickable-row:hover {background-color: #c3e2ffff; transition: background-color 0.3s ease;}



/*HURUF*/
h1 {font-size: 45px; margin: 0px auto;}
h2 {font-size: 35px; margin: 0px auto;}
h3 {font-size: 20px; margin: 0px auto;}
h4 {font-size: 14px; margin: 0px auto;}
h5 {font-size: 12px; margin: 0px auto;}
    @media (max-width: 768px) {
        h1 {font-size: 45px;}
        h2 {font-size: 35px;}
        h3 {font-size: 20px;}
        h4 {font-size: 14px;}
        h5 {font-size: 12px;}
        }


/*TABEL*/
table {background-color: white; width: 100%; border-collapse: collapse; font-size: 14px;}
th, td {padding: 8px; border: 1px solid #ccc; text-align: left;}
.table-wrapper {width: 100%; overflow-x: auto; overflow-y: hidden; border: 1px solid #ccc; background: #fff; padding: 0px;}
.table-wrapper table {border-collapse: collapse; min-width: 800px; width: 100%;}
.table-wrapper th,
.table-wrapper td {padding-bottom: 10px; text-align: left; white-space: nowrap;}
.table-container {width: 100%; overflow-x: auto;}



/*KOLOM PENCARIAN*/
.search-form {display: flex; width: 30%; padding: 0px; font-size: 14px;}
.search-form input[type="text"] {flex-grow: 1; padding: 10px 15px; border: 2px solid #ccc; border-right: none; border-radius: 5px 0 0 5px;
                                    font-size: 14px; height: 30px; box-sizing: border-box;}
.search-form button[type="submit"] {padding: 10px 15px; height: 30px; background-color: #356cb8; color: white; border: none; border-radius: 0 5px 5px 0;
                                    cursor: pointer; font-weight: bold; font-size: 14px; width: auto; box-sizing: border-box; margin-left: 0px;}


/*FORM*/
label {display: inline-block; font-size: 14px; margin-bottom: 2px;}
input, select {background-color: none; width: 100%; font-size: 14px; font-weight: bold; padding: 5px; border-radius: 5px;
                                        margin-bottom: 0px;}
input[readonly], textarea[readonly] {background: none; color: rgb(86, 86, 86); cursor: no-drop; font-size: 14px;}
textarea {width: 100%; height: 200px; padding: 10px; margin: 0px; font-size: 14px; border-radius: 5px; border: 1px solid #6c757d; resize: vertical;}


.pesan {background:#d4edda; color:#155724; padding:10px; margin:10px 0; border-radius:5px; border:1px solid #c3e6cb; font-size: 14px;}

.password-wrapper {position: relative; width: 100%; font-size: 14px;}
.password-wrapper input {width: 100%; padding-right: 40px; font-size: 14px;}


.toggle-text {color: #f10303; padding: 10px; cursor: pointer; font-size: 14px; text-decoration: none; box-sizing: border-box;}


.form-group {width: 90%; display: flex; margin-bottom: 0px; font-size: 14px;}
        .form-group label {background-color: none; width: 50%; font-size: 14px; margin-bottom: 0px;}
        .form-group input, select {background-color: none; width: 100%; font-size: 14px; font-weight: bold; padding: 5px; border-radius: 5px;
                                        margin-bottom: 10px;}
        .form-group input[readonly] {background: none; width: 100%; font-size: 14px; font-weight: bold; border: none; padding: 5px; border-radius: 5px;
                                        margin-bottom: 10px;}



/*HEADER*/
ul {list-style: none; margin: 0; padding: 0; background: rgb(0, 42, 63);}
ul li {position: relative; float: left;}
ul li a {display: block; padding: 10px 15px; color: #fff; text-decoration: none;}
ul li a:hover {background: rgb(12, 96, 205);}

    /* Submenu level 1 */
    ul li ul {display: none; position: absolute; top: 100%; right: 0; background: rgb(56, 142, 255); min-width: 280px;}
    ul li ul li {float: none;}

    /* Submenu level 2 */
    ul li ul li ul {top: 0; left: 50%;}

    /* Munculkan submenu saat hover */
    ul li:hover > ul {display: block;}


/*GAMBAR*/
img {width: 100%;}
.img-1 {width: 50px; justify-content: center; text-align: center;}
.img-2 {width: 250px; justify-content: center; text-align: center;}
.img-3 {width: 500px; justify-content: center; text-align: center;}
.button-img {width: 100%; padding: 0px; margin: 0px auto;}
    .button-img:hover {transform: scale(1.05);}

    @media (max-width: 768px) {
        .button-img {width: 100%;}
    }