/* ------------------------- template ------------------------- */
body {margin:0;padding:0;top:0;left:0;font-family:verdana;font-size:16px;background-color:#dde9ed;}
.kontainer{position:absolute;width:100%;top:0;left:0;}
.kontainer-kepala{font-weight:bold;position:sticky;background-color:#edf1f2;width:100%;height:50px;top:0;z-index:99;display:flex;
    box-shadow: 0 3px 8px -5px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.19);}
.kontainer-badan {margin:auto;width:98%;}
.kontainer-kaki {font-weight:bold;font-size:2rem;position:fixed;background-color:#edf1f2;width:100%;height:50px;bottom:0;z-index:1;display:flex;align-items: center;justify-content: center;
    box-shadow: 0 -3px 8px -5px rgba(0, 0, 0, 0.2), 0 -4px 5px 0 rgba(0, 0, 0, 0.19);}

.kontainer-kepala-judul {position:absolute;left:40px;font-size:0.8em;height:50px;color: transparent;background: #666666;-webkit-background-clip: text; -moz-background-clip: text;
    background-clip: text;text-shadow: 0px 3px 3px rgba(255,255,255,0.5);display:flex;align-items: center;}
.kontainer-kepala-judul-teks div:first-child {font-size:2em;}   
.kontainer-kepala-judul-teks div:last-child {font-size:2em;}   
.kontainer-kepala-user {position:absolute;top:25px;text-align:right;right:3px;font-size:0.7rem;color:#476e9e;}
.kontainer-kepala-lastlogin {position:absolute;top:38px;font-weight:normal;text-align:right;right:3px;font-size:0.55rem;color:#476e9e;}
/* ------------------------- template ------------------------- */

/* ------------------------------------------------------------------------------- */
/*button {outline:none;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;border:1px solid #333;margin:0 2px;padding:4px 8px;	
    background-color:#333;color:#FFF;-webkit-transition-duration: 0.4s; transition-duration: 0.4s;}*/
/*button:hover {background-color:#666;color:#FFF;border-color:#666; }*/
button:disabled {background-color: #ccc !important;color: #666 !important;cursor:not-allowed;opacity: 0.6;}
input, select, textarea {outline: none;border:1px solid #999;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;margin:2px;padding:3px 0;width:100%;}
input[type='checkbox'], input[type='radio'] {width:auto;margin-right:5px;}
input[type='file'] {text-indent:2px;}
input {text-indent:5px;}

input:read-only,
textarea:read-only,
select:disabled {background-color:#d7dbd8;cursor:not-allowed;}

.sign-bintang {font-size:.7rem;padding-left:2px;}
.merah {color:#F00;}
.biru {color:#203df7;}
.browse-no-data {color:#C00 !important;text-align: center;font-weight: bold;font-size:1em !important;}
.info-barcode-reader {font-size:0.8rem;word-break: break-all;}
.uppercase {text-transform:uppercase;}
.cover-layer {position:relative;}
/*.cover-layer:before {position:absolute;content:'';z-index:2;top:-20px;right:0;bottom:0;left:0;background-color:#d7dbd8;opacity:0.6;}*/
.cover-layer:before {position:absolute;content:'';z-index:2;top:-15px;right:0;bottom:0;left:0;background-color:#eaeceb;opacity:0.3;cursor:not-allowed;}
.logo-img {height:50px;}

.hide-input {display:none;}
.border-input-on {border-color: #F00;}

a {text-decoration:none;color:#476e9e;}
a:hover {color:#C00;}

.swal-close-btn {font-size:1.4em !important;color:#FFF !important;background-color:#666 !important;font-weight:bold !important;}

.kontainer-span-listbox {border:1px solid #999;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;margin:2px 0;padding:3px 5px;width:100%;font-size:0.9em;}
.kontainer-span-listbox > label {padding-right:10px;}
.kontainer-div-listbox {position:relative;overflow:auto;height:150px;border:1px solid #999;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;margin:2px 0;padding:3px 5px;width:100%;font-size:0.9em;}

.link-btn, button {padding: 3px 6px; margin:2px 3px;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;
    box-shadow: 0px 0px 0px 2px #9fb4f2;font-size:.9rem;background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
	background-color:#7892c2;border:1px solid #4e6096;cursor:pointer;color:#ffffff !important;text-shadow:0px 1px 0px #283966;}
    
.link-btn:hover, button:hover {background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);background-color:#476e9e;}
a:active, .link-btn:active, button:active {position:relative;top:1px;}
/* ------------------------------------------------------------------------------- */

/* -------------------- tampilan loading (default) ------------------------- */
.loading-kontainer {margin:15px 0;}
.teks-loading {display:flex;justify-content:center;}
.gb-loading {height:30px;background-image:url('../img/loading.gif');background-repeat:no-repeat;background-position:center;	background-size: 16px 16px;}
/* -------------------- tampilan loading (default) ------------------------- */

/* -------------------- halaman browse data ------------------------- */
.browse-data-kontainer {position:relative;width:100%;margin-top:8px;box-sizing: border-box; }
.browse-data-cari-field {display:flex;}
.browse-data-cari-field select {width:auto;}
.browse-data-cari-btn {width:100%;}
.browse-data-tambah {display:inline-block;width:100%;}
.browse-data-tambah a {float:right;}	
.browse-data-title {color:#FFF;font-weight:bold;font-size:1rem;padding:5px;background-color:#4b72f5;}		

.browse-data-value {position:fixed;top:205px;width:98%;bottom:50px;overflow:auto;box-sizing: border-box;}
.browse-data-value table {background-color:#FFF;width:100%;border-collapse:separate;border-spacing:0.1px;table-layout:auto;}
.browse-data-value table td {border: 1px solid #ddd;word-break: break-all;padding:3px;}
.browse-data-value table tr:nth-child(even) {background-color:#f2f2f2;}
.browse-data-value table tr:hover {background-color:#ddd;}
.browse-data-value table tbody td {height:1.8rem;}
.browse-data-value table tbody td .link-btn {line-height:2.2em;}
.browse-data-value table thead td {position: sticky; top:0;z-index:1;color:#FFF;font-weight:bold;background-color:#333;font-size:0.9rem;height:1.5rem;}
.browse-data-value table td:last-child {text-align:center;width:50px;}
.browse-data-value .data-browse-detil-judul {font-size:1rem;}
.browse-data-value .data-browse-detil-isi {font-size:0.8rem;color:#000;}
.browse-data-value .data-browse-detil-status {font-size:0.8rem;color:#000;}
/* -------------------- halaman browse data ------------------------- */

/* -------------------- form data ----------------------------------- */
.form-kontainer{position:relative;width:100%;top:8px;overflow:auto;box-sizing: border-box;margin-bottom:50px;}
.form-kontainer .form-title {color:#FFF;font-weight:bold;font-size:1rem;padding:5px;background-color:#4b72f5;text-shadow: 1px 0px 0 #CCC;}
.form-kontainer .form-input {position:relative;margin-top:25px;display:flex;}
.form-kontainer .form-input-no-label {position:relative;margin-top:5px;display:flex;}
.form-kontainer .kontainer-kartu {position:relative;margin-top:5px;display:flex;text-align:center; flex-flow: row wrap;font-size:0.9rem;}
.form-kontainer .kontainer-kartu-isi {flex: 1 auto;}
.form-kontainer .kontainer-kartu-isi img {width:50%; border: 1px solid #787675; border-radius: 4px; padding: 6px;}
.form-kontainer .kontainer-kartu-isi img:hover {box-shadow: 0 0 2px 1px rgba(10, 105, 240, 0.5);border-color:#0a69f0}
.form-kontainer .form-input > label {position:absolute;top:0;left:0;font-size:0.8rem;font-weight:bold;color:#333;text-shadow: 1px 1px 0 #CCC;}
.form-kontainer .form-input > input,
.form-kontainer .form-input > textarea,
.form-kontainer .form-input > select {width:100%;}
.form-kontainer .form-input > input + label,
.form-kontainer .form-input > textarea + label,
.form-kontainer .form-input > select + label,
.form-kontainer .form-input > button + label,
.form-kontainer .form-input > span + label {transform : translate3d(0,-100%,0);}
.form-kontainer .form-button {margin:10px auto;text-align:center;}
.form-kontainer .form-note {font-style: italic;font-size:0.7rem;color:#434547;}
.form-kontainer .form-input .label-data {color:#203df7;font-weight:bold;font-size:0.8rem;}

.form-input-list {position:relative;width:100%;height:150px;margin-top:5px;border:1px solid #333;overflow:auto;background-color:#FFF;box-sizing: border-box;}
.form-input-list table {width:100%;border-collapse:separate;border-spacing:0.1px;table-layout:auto;}
.form-input-list table td {border: 1px solid #ddd;padding:3px;word-break: break-all;}
.form-input-list table tr:nth-child(even) {background-color:#f2f2f2;}
.form-input-list table tr:hover {background-color:#ddd;}
.form-input-list table thead td {position: sticky; top:0;z-index:1;color:#FFF;font-weight:bold;background-color:#333;font-size:0.8rem;}
.form-input-list table td:last-child {text-align:center;}
.form-input-list table td input {margin-left:auto;margin-right:auto;}
.form-input-list table td input.input-qty {width:50px;}
.form-input-list .data-form-input-list-isi {font-size:0.7rem;}
/* -------------------- form data ----------------------------------- */

/* --------------- paging (default) -------------------------- */
.pagination-kontainer {display:block;font-size:0.8rem;box-sizing: border-box;}
.pagination {float:left;}
.pagination-total {float:right;}
.pagination-total span {background-color: #7a7676;color:#FFF;padding: 4px 8px;margin:0 2px;float:right;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}
.pagination a {color: #666; float: left; padding: 4px 8px; text-decoration: none; margin:0 2px;}
.pagination a.active {background-color: #7a7676;color: #FFF;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}
.pagination a:hover:not(.active) {background-color: #FFF;border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}
.pagination a, .pagination-total span { padding: 5px 10px !important;}
.pagination-mobile-view {display:none;}
.pagination-desktop-view {display:block;}

@media screen and (max-width: 720px) {
    .pagination-mobile-view {display:block;}
    .pagination-desktop-view {display:none;	}

    .kontainer-kepala-judul-teks {display:none;}
    
    .form-kontainer .kontainer-kartu-isi {flex: 1 100%;}
    .form-kontainer .kontainer-kartu-isi img {width:95%;}
    
}
/* --------------- paging (default) -------------------------- */

/* -------------------- pop up browse data --------------------------------  */ 
.window-browse-data {background-color:#dde9ed;text-align:left;width:100%;box-sizing: border-box;}
.window-browse-data .title-browse-data {color:#FFF;font-weight:bold;font-size:1rem;padding:5px;background-color:#4b72f5;}
.window-browse-data .isi-browse-data {width:98%;margin:auto;padding-top:.3rem;}
.window-browse-data .parameter-browse-data {margin-bottom:0.2em;border:1px solid #c1c7c9;border-radius:4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;padding:3px;background-color:#f5f0f0;}
.window-browse-data .parameter-browse-data > .input-browse-data {display:flex;}
.window-browse-data .parameter-browse-data > div > select {width:auto;}
.window-browse-data .paging-browse-data {width:100%;display:inline-block;margin-top:5px;}

.window-browse-data .result-browse-data {width:100%;height:200px;border:1px solid #333;overflow:auto;background-color:#FFF;box-sizing: border-box;}
.window-browse-data .result-browse-data table {width:100%;table-layout:auto;border-collapse:separate;border-spacing:0.1px;font-size:0.7rem;}
.window-browse-data .result-browse-data table td {word-break: break-all;border: 1px solid #ddd;padding:2px;color:#000;}
.window-browse-data .result-browse-data table tbody tr:nth-child(even) {background-color:#f2f2f2;}
.window-browse-data .result-browse-data table tbody tr:hover {background-color:#ddd;}
.window-browse-data .result-browse-data table tbody button {font-size:0.7rem;padding: 1px 6px; margin:1px 2px;}
.window-browse-data .result-browse-data table thead td {position: sticky; top:0;z-index:1; font-weight:bold;background-color:#333;color:#FFF;padding:5px 3px;}
.window-browse-data .result-browse-data table thead td:last-child {text-align:center;width:60px;}
/* -------------------- pop up browse data --------------------------------  */ 

/* --------------------- home menu -----------------------------*/
.home-kontainer{margin-top:10px;width:100%;box-sizing: border-box;}
.home-kontainer-menu-title {padding:12px 10px;color:#edf1f2;font-weight:bold;font-size:1.7em;background: rgb(2,0,36);
    background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(61,61,208,1) 0%, rgba(0,212,255,1) 100%); box-shadow:1px 1px 10px 1px rgba(0, 0, 0, 0.2);text-shadow: 1px 0px 0 #CCC; }
.home-kontainer-menu-list ul {list-style:none; padding:0;margin:0;}
.home-kontainer-menu-list a {text-decoration:none; position:relative; display:block; color:#000; white-space:nowrap;font-size:1.2em;
    padding:0 10px;transition: all .125s ease-in-out; -webkit-transition: all .125s ease-in-out;line-height:40px;
    background-color: #476e9e;margin:5px 0;text-align:center;color:#edf1f2;font-weight:bold; box-shadow:1px 1px 10px 1px rgba(0, 0, 0, 0.2);text-shadow: 1px 0px 0 #CCC;}
.home-kontainer-menu-list a:hover {background-color:#364f6f;}
.home-kontainer-menu-list a:active {position:relative;top:1px;}

/* -------------------- kontainer data barcode ------------------------ */
.kontainer-data-barcode {text-align:left;box-sizing: border-box;padding:3px;width:100%;background-color:#dde9ed;}
.kontainer-data-barcode .kontainer-data-barcode-judul {font-weight:bold;font-size:0.7em;margin:2px 0;}
.kontainer-data-barcode .kontainer-data-barcode-detil {color:#FFF;font-weight:bold;font-size:0.7em;padding:5px;background-color:#4b72f5;text-shadow: 1px 0px 0 #CCC;}
.kontainer-data-barcode .kontainer-data-barcode-detil-item {width:100%;height:200px;border:1px solid #333;overflow:auto;background-color:#FFF;box-sizing: border-box;}
.kontainer-data-barcode .kontainer-data-barcode-detil-item table {width:100%;table-layout:auto;border-collapse:separate;border-spacing:0.1px;font-size:0.7em;}
.kontainer-data-barcode .kontainer-data-barcode-detil-item table td {word-break: break-all;border: 1px solid #ddd;padding:2px;vertical-align:top;}
.kontainer-data-barcode .kontainer-data-barcode-detil-item table tbody tr:nth-child(even) {background-color:#f2f2f2;}
.kontainer-data-barcode .kontainer-data-barcode-detil-item table tbody tr:hover {background-color:#ddd;}
.kontainer-data-barcode .kontainer-data-barcode-detil-item table thead td {position: sticky; top:0;z-index:1; font-weight:bold;background-color:#333;color:#FFF;padding:5px 3px;}

/* ----------------------- laporan ------------------------------------ */
#kontainer-laporan {position:fixed;background-color:#FFF;font-family:verdana;font-size:0.95rem;box-sizing: border-box;margin:10px 0;width:98%;bottom:50px;top:50px;overflow:auto;}
#kontainer-laporan table {width:100%;border-collapse:collapse;table-layout:auto;}
#kontainer-laporan #kontainer-laporan-header-col-2 {width:70%;vertical-align:top;}
#kontainer-laporan #kontainer-laporan-header-col-1, #kontainer-laporan #kontainer-laporan-header-col-3 {width:15%;vertical-align:top;}
#kontainer-laporan #kontainer-laporan-header-col-1 td {text-align:left;font-size:0.9em;font-weight:bold;}
#kontainer-laporan #kontainer-laporan-header-col-1 td span {font-size:0.8em;}
#kontainer-laporan #kontainer-laporan-header-col-2 td {text-align:center;font-size:1em;font-weight:bold;}
#kontainer-laporan #kontainer-laporan-header-col-2 tr:last-child td {font-weight:normal;font-size:0.8em;}
#kontainer-laporan #kontainer-laporan-header-col-3 td {text-align:right;font-size:0.5em;}
#kontainer-laporan #tabel-laporan-2 {font-size:0.8em;border-collapse:collapse;}
#kontainer-laporan #tabel-laporan-2 td {padding:0.2em;}
#kontainer-laporan #tabel-laporan-2 tr:first-child {font-weight:bold;border:2px solid #000;}
#kontainer-laporan #tabel-laporan-2 tr:first-child td {padding:0.5em;}
#kontainer-laporan #baris-laporan-total td, #kontainer-laporan #baris-laporan-top-line {font-weight:bold;border-top:2px solid #000;}

#kontainer-laporan #baris-laporan-total td:first-child, #kontainer-laporan #baris-laporan-subtotal td:first-child {padding-right:15px;text-align:right;font-weight:bold;}
#kontainer-laporan #groupcode-laporan {font-weight:bold;}
#kontainer-laporan #footer-laporan-end {text-align:center;font-weight:bold;font-size:0.8em;padding-top:10px;}

#kontainer-laporan #nodata-laporan {color:#F00;font-weight:bold;text-align:center;line-height:2.5em;}

/*.kontainer-laporan-tombol {position:sticky;width:100%;top:0;z-index:1;background-color:#edf1f2;padding-bottom:5px;border-bottom:1px solid #476e9e;}*/
.kontainer-laporan-tombol {padding:5px 0;}

@media print {
    .kontainer-kepala, .kontainer-kaki, .kontainer-laporan-tombol {display:none;}
    .kontainer-badan {width:100%;}
    #kontainer-laporan {margin:0;padding:0;left:0;top:0;position:relative;width:100%;bottom:0;right:0;}
}