.section-button .navbar, .section-search .navbar { border-radius: 6px; background-color: rgb(184, 204, 240, 0.5); font-size: 12px; }

.section-button .tombol { width: auto; margin: auto 0; order: 1; }
.section-button .tombol a { font-size: 13px; margin-right: 5px; }
.section-button .search-table-page { order: 2; }
.section-button .search-table-page label { display: flex; align-items: center; margin: auto;}
.section-button .search-table-page input { margin-left: 5px;}

.section-search nav { font-size: 13px !important; }
.section-search nav label { margin-right: 5px; }
.section-search nav .form-btn-search #btn-semua { margin-left: 5px; }

.section-data-table table { display: block; height: 250px; overflow-y: scroll; border: 1px solid black; margin-bottom: 0; }
.section-data-table table tr { font-size: 13px; }
.section-data-table .marked td{ background-color:#FFCC99 !important; }
.section-data-table .table-responsive { box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.6); margin-bottom: 1.3em; }
.section-data-table tr td:first-child { text-align: center; }
.section-data-table .setWidth { max-width: 200px; }
.section-data-table .concat div { overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis;
    white-space: nowrap; width: inherit; }

.list-data-table { font-size: 13px;}
.list-data-table .table-responsive { height: 290px; }
/* .list-data-table thead { position: fixed; } */
.list-data-table tbody td { padding: 4px; }
.list-data-table tbody .marked td { background-color:#FFCC99 !important; }

.pagination-page { padding: 0 20px; display: grid; grid-template-columns: repeat(3, 1.5fr); font-size: 13px; }
.pagination-page>.pagination-grid { text-align: center; }
.pagination-page>.pagination-grid .dataTables_paginate ul { justify-content: flex-end;}
.pagination-page>.pagination-grid label { text-align: left; white-space: nowrap;}
.img-topbar { width: 180px;}
.select2-container { width: 450px !important; }

/* MOBILE VERSION */
@media (max-width: 767.98px) {
    .section-button .tombol { order: 2; }
    .section-button .search-table-page { order: 1; width: 90%; }
    .section-button .search-table-page label { margin-bottom: 8px; }

    .section-search nav { font-size: 14px !important; }
    .section-search nav select { width: 110px; }
    .section-search nav .input-search-keyword { margin-left: 10px; }
    .section-search nav .form-btn-search { margin-bottom: 0; margin-left: 10px; margin-top: 10px; }
    /* .section-search nav .form-btn-search { margin: 0; } */

    .select2-container { width: 350px !important; }

    .section-data-table table tr { font-size: 14px; }
    .dataTables_scroll .dataTables_scrollBody { height: 270px !important; }

    .pagination-page { display: flex; grid-template-columns: none; flex-direction: column; }
    .pagination-page>.pagination-grid { display: flex; align-items: left; justify-content: left; height: 39px; }
    .pagination-page .pagination-grid.pgs { order: 3; justify-content: center; align-items: center; }
    .pagination-page .pagination-grid.pgf { order: 1; }
    .pagination-page .pagination-grid.pgt { order: 2; justify-content: center; }
}

/* TAB VERSION */
@media (min-width: 768px) {
    .section-search nav { font-size: 13px !important; }
}

@media (min-width: 992px) {
    .section-search nav .search-field { width: 110px; }
    .section-search nav .input-search-keyword { width: 110px; }
    .section-search nav .input-date { width: 100px !important; }
}

@media (min-width: 1200px) {
    .section-button .tombol a { margin-right: 5px; }

    .section-search { font-size: 13px !important; }
    .section-search nav select { font-size: 13px !important; }
    .section-search nav label { font-size: 13px !important; }
    .section-search nav input { font-size: 13px !important; }
    .section-search nav button { font-size: 13px; }
    .section-search nav .search-field { width: 150px; }
    .section-search nav .input-search-keyword { width: 150px; }
    .section-search nav .input-date { width: 150px !important; }
}

@media (min-width: 1280px) and (min-height: 585px) {
    .dataTables_scroll .dataTables_scrollBody { height: 230px !important; }
}
@media (min-width: 1280px) and (min-height: 720px) {
    .dataTables_scroll .dataTables_scrollBody { height: 230px !important; }
}
@media (min-width: 1920px) and (min-height: 1080px) {
    .dataTables_scroll .dataTables_scrollBody { height: 230px !important; }
}