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

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


/*CARD & CONTAINER*/

.card {width: 100px; background: white; margin-bottom: 25px; font-size: 14px;}
.card-body {width: 100%; padding: 0px 20px 10px 20px; box-sizing: border-box; text-decoration: none;}
.card-img{break-inside: avoid; margin: 0px; gap: 20px; background:white; text-decoration: none;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.575); overflow:hidden; margin-bottom: 10px; border-radius: 10px; padding: 8px 8px 20px 8px;}
    .card-img:hover {transform: scale(1.01);}



.container {width: 100%;}
.container1 {display: flex; width: 100%; justify-content: center; font-size: 13px; gap: 5px;}
.container11 {display: flex; width: 100%; justify-content: center; font-size: 13px; gap: 5px;}
.container-kolom {display: flex; width: 100%; justify-content: center; margin-bottom: 8px; font-size: 13px; 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;}

.container22 {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-form2 {width: 60%; 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-card {width: 100%; background: white; justify-content: center; padding: 0px; margin-bottom: 15px; gap: 0px; font-size: 14px; 
                   box-shadow: 0 0 0 1px rgba(53,108,184,0.12); break-inside: avoid; page-break-inside: avoid;}

.container-40 {width: 40%; justify-content: center; align-items: center; margin: 0px auto; flex-direction: column; 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-70 {width: 70%; 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-100 {width: 100%; background: rgb(250, 250, 251); 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: 100%; display: flex; justify-content: center; align-items: center; margin: 0px auto; padding: 1px 50px; font-size: 13px; gap: 15px;}
.container-nav {width: 5%; display: flex; justify-content: center; margin: 0px auto; gap: 5px; font-size: 14px;}
    @media (max-width: 768px) {
        .container {width: 100%;}
        .container1 {flex-direction: column; align-items: stretch;}
        .container-kolom {width: 100%; flex-direction: column; align-items: stretch; padding: 5px; gap: 0px;}
        .container2 {width: 100%;}
        .container22 {width: 100%;}
        .container-form {width: 100%;}
        .container-form2 {width: 100%;}
        .container-40 {width: 100%;}
        .container-60 {width: 80%; gap: 25PX;}
        .container-cari {width: 100%; flex-direction: column; align-items: stretch; padding: 5px; gap: 0px;}
        .container-card {font-size: 13px;}
    }

    


/*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;}
    }

.grid-2 {column-count: 2; column-gap: 8px; width:100%; margin: 15px 0px 15px 0px;}
.grid-3 {column-count: 3; column-gap: 5px; width:100%; margin:auto;}
.grid-4 {column-count: 5; column-gap: 20px; width:100%; margin:auto;}
.grid-5 {column-count: 5; column-gap: 5px; width:100%; margin:auto; gap: 25px; padding: 25px;}
.grid-6 {column-count: 6; column-gap: 20px; width:100%; margin:auto;}
        @media (max-width: 768px) {
            .grid-2 {column-count: 1; column-gap: 20px; width:100%; margin:auto;}
            .grid-3 {column-count: 2; column-gap: 2px; width:100%; margin:auto;}
            .grid-4 {column-count: 2; column-gap: 2px; width:100%; margin:auto;}
            .grid-5 {column-count: 2; padding: 8px; gap: 12px;}
            .grid-6 {column-count: 2; column-gap: 2px; width:100%; margin:auto;}
            }




/*BUTTON*/
.btn-menu1 {display: block; width: 100%; background: hsl(210, 100%, 17%); color: white; font-size: 25px; justify-content: center; align-items: center; 
            text-align: center; padding: 10px; margin-bottom: 5px; text-decoration: none; border-radius: 20px;}
    .btn-menu1:hover {background: hsl(210, 67%, 43%); transform: scale(1.06);}

.btn-menu2 {display: block; width: 100%; background: hsl(15, 87%, 36%); color: white; font-size: 25px; justify-content: center; align-items: center; 
            text-align: center; padding: 10px; margin-bottom: 5px; text-decoration: none; border-radius: 20px;}
    .btn-menu2:hover {background: hsl(15, 64%, 51%); transform: scale(1.06);}



.btn-1 {display: inline-block; background: hsl(122, 98%, 24%); color: white; font-size: 13px; justify-content: center; align-items: center; 
            text-align: center; padding: 8px 20px ; margin-bottom: 5px; text-decoration: none; border-radius: 8px;}
    .btn-1:hover {background: hsl(117, 100%, 39%);}

.btn-2 {display: inline-block; background: #014f87; font-size: 13px; color: white; justify-content: center; align-items: center; 
            text-align: center;  padding: 8px 20px ; margin-bottom: 5px; text-decoration: none; border-radius: 8px;}
    .btn-2:hover {background: #20aef0;}

.btn-3 {display: inline-block; background: #e00000; font-size: 13px; color: white; justify-content: center; align-items: center; 
            text-align: center;  padding: 8px 20px ; margin-bottom: 5px; text-decoration: none; border-radius: 8px;}
    .btn-3:hover {background: #eb5858;}

button {display: inline-block; background: hsl(0, 0%, 41%); color: white; font-size: 13px; justify-content: center; align-items: center; border: none; padding: 8px 20px;
            text-align: center; margin-bottom: 5px; text-decoration: none; border-radius: 8px;}
    button:hover {background: hsl(0, 1%, 72%);}

.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: 25px;}
        h3 {font-size: 20px;}
        h4 {font-size: 14px;}
        h5 {font-size: 12px;}
        }


/*TABEL*/
table {background-color: white; width: 100%; border-collapse: collapse; font-size: 12px;}
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;}

        /* TAMPILAN MOBILE */
        @media screen and (max-width: 768px) {
            table,table tbody {width: 100%; display: block;}

            /* Sembunyikan judul tabel */
            table thead {display: none;}

            /* Setiap baris menjadi card */
            table tbody tr {display: block; margin-bottom: 15px; padding: 10px; border: 1px solid #ddd; 
                                border-radius: 8px; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);}

            /* Setiap kolom menjadi baris label dan isi */
            table tbody td {display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; width: 100%; box-sizing: border-box; 
                                padding: 8px 4px; border: none; border-bottom: 1px solid #eee; overflow-wrap: anywhere;}

            /* Nama kolom di sebelah kiri */
            table tbody td::before {content: attr(data-label); font-weight: bold; color: #444;}

            /* Hilangkan garis pada kolom terakhir */
            table tbody td:last-child {border-bottom: none;}

            /* Ukuran gambar */
            table tbody td img {max-width: 100%; height: auto;}

            /* Tombol aksi */
            table tbody td .container1 {display: flex; flex-wrap: wrap; gap: 6px;}
        }









/*FORM*/
label {display: inline-block; font-size: 13px; padding: 0px;}
input, select {width: 100%; background: rgb(255, 255, 255); font-size: 13px; border: 1px solid rgba(0, 0, 0, 0.442); 
                border-radius: 5px; padding: 8px; margin-bottom: 1px;}
input[readonly], textarea[readonly] {background: none; color: rgb(86, 86, 86); margin-bottom: 1px; padding: 1px; cursor: no-drop; font-size: 14px; border: none;}
textarea {width: 100%; height: 70px; margin-bottom: 1px; padding: 8px; font-size: 13px; 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; margin-left: 500px; cursor: pointer; font-size: 14px; text-decoration: none; box-sizing: border-box; z-index: 1000; position: fixed;}


.form-grup {width: 100%; display: flex; justify-content: center; font-size: 13px; margin-bottom: 5px;}
        .form-grup label {background-color: none; width: 60%; font-size: 13px;}
        .form-grup input, select {background-color: none; width: 100%; font-size: 13px; font-weight: bold; border-radius: 5px;}
        .form-grup input[readonly] {background: none; width: 100%; font-size: 13px; font-weight: bold; border: none; border-radius: 5px;}
         @media (max-width: 768px) {
            .form-grup label {width: 40%; font-size: 12px;}
            .form-grup input, select {font-size: 12px;}
            .form-grup input[readonly] {font-size: 12px;}
            input[readonly], textarea[readonly] {border: none;}
            }


.style_judul {font-size: 13px; color: rgb(170, 0, 0); font-weight: bold;}
.style_keterangan {font-size: 13px; color: rgb(0, 0, 0); margin-bottom: 0px;}



/*GAMBAR*/
img {width: 100%;}
.img-cover {width: 80%;}
.img-card {border-radius: 8px; justify-content: center; text-align: center; margin-bottom: 8px;}
.img-20 {width: 50px; justify-content: center; text-align: center;}
.img-70 {width: 150px;}
.img-100 {width: 80%; background-color: white; margin-bottom: 15px; border-radius: 0px; box-shadow: 1px 1px 10px rgba(64, 64, 64, 0.575);}
.img-250 {width: 50%;}
.img-full {width: 100%;}
.button-img {width: 100%; padding: 0px; margin: 0px auto;}
    .button-img:hover {transform: scale(1.05);}

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