html, body {height: 100%;margin: 0;padding: 0; overflow: hidden;}

/* gaya container */
        .container-fluid {display: flex;justify-content: center;align-items: flex-start;height: 100vh;}
        .container {margin-top: 50px;height: calc(100vh - 20px);display: flex;flex-direction: column;}
/* ---------------------- gaya container */

/* gaya card */ 
        .card {width: 100%;position: relative;display: flex;flex-direction: column;height: 100%;}
        .card-header {padding-top:15px;margin-bottom: 0;background-color: #fff;border-bottom: 1px solid rgba(0, 0, 0, .125);height: 140px;}
        .card-body {flex-grow: 1;display: flex;flex-direction: column;padding-right: 0;padding-left: 0;padding-bottom: 0px;height: 500px;}
        .card-footer {position: sticky;bottom: 0;background-color: black;text-align: center;color: white;padding: 10px;width: 100%;z-index: 10;}
/* ---------------------- batas gaya card */ 

/* gaya datatables */

        .table-container {overflow-x: hidden;overflow-y: auto;height: 100%px;}
        .dataTables_wrapper {padding-top: 10px; }
        .dt-search {display: none;}
        ::-webkit-scrollbar {width:20px; white-space: pre;}
        .dataTables_wrapper .dataTables_paginate {margin-top: 10px;text-align: center;}
        dataTables_wrapper {position: relative;}
        .dataTables_paginate {position: sticky;bottom: 0;background-color: white;border-top: 1px solid #ddd;padding: 10px 0;z-index: 100;width: 100%;text-align: center;}
        #example {width: 100%;border-collapse: collapse;margin-right: 0;}
        #example thead {position: sticky;top: 0;background-color: #fff;z-index: 1;}
        #example tbody {display: block;max-height: 450px; /* Atur tinggi yang diinginkan untuk scroll */overflow-y: auto;overflow-x: hidden;width: 100%;}
        #example td, #example th {width: 100%; /* Setel lebar kolom sesuai kebutuhan */}
        #example_wrapper {overflow: auto;height: 100%;}
        #paging-container {position: sticky;}
        div.dt-container div.dt-layout-cell.dt-start {text-align: center; padding-top: 0px; padding-bottom: 0px;}
        .highlight {background-color: lightgreen;font-weight: bold;}
        /* ----- batas gaya datatables------*/

        .judulTema {color:white;}
        .hasil {color:white;font-size: 12pt;}
        .hasilCari {color:white;height: 15px;padding: 0;}
        .arab {line-height: 1.5;font-family: "UthmanThaha", sans-serif;font-size:14pt !important;font-weight: 500;color:blue !important;text-align: justify;direction: rtl;padding-right: 15px;padding-left: 15px;padding-bottom: 0px;padding-top:-20px;color: blue;}
        .indo {font-size: 14px;font-family: Verdana, Geneva, sans-serif;font-weight: normal;font-style: normal;direction: ltr;text-align: justify;padding-right: 15px;padding-left: 15px;padding-bottom: 5px;text-align: justify;line-height: 1.25;}
        .latin {font-size: 12px;font-family: Verdana, Geneva, sans-serif;font-weight: normal;font-style: normal;direction: ltr;text-align: justify;padding-right: 15px;padding-left: 15px;padding-bottom: 15px;color: darkred;}
        .hasil {font-size: 12pt; font-weight: 500;}
        .input-group-text {width: 150px;}
        #spinner {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 9999;}

        /* -------------responsive ----------*/
        @media only screen and (max-width: 600px) {
            .arab {font-size:12pt}
            .indo {font-size:12pt}
            .judulTema {font-size: 10pt;}
            .hasilCari {display: block;visibility: visible;background-color: #f8f9fa;padding: 10px;font-size: 10pt; font-weight: 600;}
            .hasil {font-size: 10pt; font-weight: 600;}
            .input-group-text {width: 100px;font-size: 10pt; font-weight: 600;height: 26px;margin-top: 2px}
            .input-group-prepend {margin-right: 3px;}
            .arab {font-size:12pt}
            .indo {font-size:12pt}
            div.dt-container div.dt-layout-cell {display: table-cell;vertical-align: middle;padding: 0px 0;font-size: 10pt;}
            .formIsian {margin-top: -10px;}
            #example tbody {max-height: 400px;}
            #example_wrapper {overflow: auto;height: 100%;padding-right: -20px;margin-right: -20px;}
            .input-group-text {width: 100px;font-size: 10px; font-weight: 600;}
            .input-group {height: 30px; margin-bottom: 10px;}
            #example td, #example th {width: 100%;padding-right: 0px;padding-left: 0px;}
            .card-header {height: 120px;}
            .card-body {margin-top: 0px;}
            .card-footer {font-size: 10px;}
            .btn {display: inline-block;font-weight: 400;color: #212529;text-align: center;vertical-align: middle;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;background-color: transparent;padding: .375rem .75rem;font-size: 1rem;line-height: 1.5;border-radius: .25rem;
                transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
                padding-top: 0px;padding-bottom: 0px;color: white;}
            .fa {font-family: var(--fa-style-family, "Font Awesome 6 Free");font-weight: var(--fa-style, 900);font-size: 10px;color: white;}
            div.dt-container .dt-paging .dt-paging-button {box-sizing: border-box;display: inline-block;min-width: 1.5em;padding: 0.5em 0.7em;margin-left: 2px;text-align: center;text-decoration: none !important;cursor: pointer;color: inherit !important;border: 1px solid transparent;border-radius: 2px;background: transparent;}
            #reservation, #table {height: 30px; font-size: 10pt;}
            #kolTabel {margin-top: -10px;}
            label {display: inline-block;margin-bottom: .5rem;font-size: 10pt;}
            .dataTables_wrapper .dataTables_paginate {margin-top: 10px;text-align: center;font-size: 10pt;}
        }