/* --------------- 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;}
/* --------------- 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 {outline: none;border:1px solid #999;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;margin:2px;padding:3px 0;width:100%;text-indent:5px;} 
.window-browse-data .parameter-browse-data select {outline: none;border:1px solid #999;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;margin:2px;height:33px;width:100%;}
.window-browse-data button {border:none;color:#FFF;padding:7px;margin-left:3px;font-size:12px;}
.window-browse-data button.Btn-YES {background-color:#345eeb;}
.window-browse-data button.Btn-YES:hover {background-color:#3477eb;transition: all 0.3s ease 0s;}
.window-browse-data button.Btn-NO {background-color:#C00;}
.window-browse-data button.Btn-NO:hover {background-color:#F00;transition: all 0.3s ease 0s;}
.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;}
.window-browse-data .result-browse-data table button {line-height:20px;}
/* -------------------- pop up browse data --------------------------------  */ 

a.link-prdk {text-decoration: none;}
a.link-prdk:hover > span {font-weight:bold !important;}

.browse-no-data {color:#C00 !important;text-align: center;font-weight: bold;font-size:1em !important;}

.wa-icon img {width: 35px;}

.wa-icon {
    position:fixed;
    z-index: 9;
    right: 10px;
    bottom: 60px;
    width : 60px;
    height: 60px;
    display: flex;    
    justify-content :center;
    color: #FFF;
    /*box-shadow: 0 2px 4px rgb(0 0 0 / 75%);    */
    background-color: #25d366;
    border-radius:50%;
}

@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed, video {
	max-width: 100%;
	height:auto;	
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}
body {
	font-family:arial, san-serif;
	background: #fffefe;
	margin:0; padding:0;
}
body a{
	transition:0.3s all;
	-webkit-transition:0.3s all;
	-moz-transition:0.3s all;
	-o-transition:0.3s all;
	-ms-transition:0.3s all;
}

.header-title-transaksi {	
	width:100%;
	margin:30px 0;		
	text-align:center;
	font-size:20px;
	position:relative;	
}

.pesan-data-container-transaksi-teks-success,
.pesan-data-container-transaksidoku-teks-success,
.pesan-data-container-transaksi-teks-fail {
	background-color:#EBEBEB;
	overflow:auto;	
	padding:20px;
	margin-bottom:10px; 
	text-align:center;
	font-size:16px;		
}

.pesan-data-container-transaksidoku-teks-success {background-color:#FFF !important;color:#f59295;font-size:20px !important;}
.pesan-data-container-transaksi-teks-success {color:#090;}
.pesan-data-container-transaksi-teks-fail {color:#F00;}
.pesan-data-container-transaksi-teks-fail p {font-size:12px;}
.pesan-data-container-transaksi-teks-fail p a {text-decoration:none;}
.pesan-data-container-transaksi {clear:none;float:left;width:100%;display:block;}
.gridContainer-in h4	{color: #464646;text-shadow: 0 1px 0 #cccccc;text-transform: capitalize;}
.info-success-transaksi {color:#666;font-size:16px;text-align:center;}
.page-header-menu,.page-footer-menu {text-transform: uppercase !important;}

/* Make Header Sticky */
#header_container {  left:0; position:fixed; width:100%; top:0;z-index:9;}
#header_fix {  margin:0 auto; width:100%; }

/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container { margin:0 auto; overflow:auto; padding-top:90px; width:100%; }

.hide-voucher {display:none !important;}
.show-voucher {display:block !important;}

/* Mobile Layout: 480px and below. */

.gridContainer {
  	margin-left: auto;
	margin-right: auto;	
	/*
	width: 90%;
	padding-left: 1.82%;
	padding-right: 1.82%;			
	*/
	width: 100%;
	padding-left: 0%;
	padding-right: 0%;
}
.gridContainer-in {margin:0 5%;width:auto;}
.header-title-transaksi-line {display:none;}
.header-title-transaksi-teks {display:block;background-color:#FFF;width:auto;}
.masuk-daftar {position:absolute;top:53px;z-index:100;left:10px;font-size: 1.1em;}
.bendera-bahasa {position:absolute;top:53px;z-index:100;right:10px;}
.bendera-bahasa a, .masuk-daftar a {text-decoration: none;}
.bendera-bahasa a:active, .masuk-daftar a:active {color:#C00;}
.pagination-mobile-view {display:block;}
.pagination-desktop-view {display:none;	}

.disabled-scrollbar {position: fixed;overflow-y: scroll;width: 100%;}
input[name="popup_check"] {display: none;}
#modal-popup {z-index:10;overflow:hidden;width:100%;height:100%;position:fixed;left:0;top:0;background-color: rgba(0,0,0,1); /* Black w/ opacity */}
/*input[name="popup_check"]:checked + #modal-popup {display:block;}
input[name="popup_check"]:not(:checked) + #modal-popup {
	animation-name: hideimg;
	animation-duration: 2s;
	animation-fill-mode: forwards;	
	}*/
/*#popup-img {width:100%;display:block;position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);}*/
#popup-img {background-repeat: no-repeat;background-size: contain;background-position: center;height:100%;width:100%;cursor:pointer;}
#popup-img {background-image: url("../images/banner_welcome2.jpg");}

.teks-khusus-vvip-member {
	border: 4px solid #C00;background-color: #ffffcc;
	padding: 6px;margin-bottom:8px;border-radius: 7px;display:flex;
	gap:5px;font-size: 14px;	
}
.teks-khusus-vvip-member i {font-size: 22px;color:#0066ff;}

/* ====================================================================================================================
 * RESPONSIVE
 * ====================================================================================================================*/
@media only screen and (min-width: 481px) {
	.gridContainer {
		/*
		width: 90%;
		padding-left: 1.1625%;
		padding-right: 1.1625%;	
		*/
		width: 100%;
		padding-left: 0%;
		padding-right: 0%;	
	}
	.gridContainer-in {margin:0 5%;width:auto;}
	.header-title-transaksi-line {display:block;}
	.header-title-transaksi-teks {display:block;position:absolute;background-color:#FFF;width:150px;top:50%;left:50%;transform:translate(-50%,-60%);}
	.pesan-data-container-transaksidoku-teks-success {background-color:#FFF !important;color:#f59295;font-size:22px !important;}
	/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
	#container { margin:0 auto; overflow:auto; padding-top:95px; width:100%; }
	.masuk-daftar {top:59px;left:10px;font-size:1.2em;}
	.bendera-bahasa {top:58px;right:10px;}
	.pagination-mobile-view {display:block;}
	.pagination-desktop-view {display:none;	}
}

@media only screen and (min-width: 769px) {
	.gridContainer {width: 95%;max-width: 1000px;padding-left: 0.9%;padding-right: 0.9%;margin: auto;}
	.gridContainer-in {margin:0;width:auto;}
	.header-title-transaksi-line {display:block;}
	.header-title-transaksi-teks {display:block;position:absolute;background-color:#FFF;width:150px;top:50%;left:50%;transform:translate(-50%,-60%);}
	.pesan-data-container-transaksidoku-teks-success {background-color:#FFF !important;color:#f59295;font-size:26px !important;}
	.pagination-mobile-view {display:none;}
	.pagination-desktop-view {display:block;}
	/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
	#container { margin:0 auto; overflow:auto; padding-top:99px; width:100%; }
	.masuk-daftar {display:none;}
	.bendera-bahasa {top:70px;right:20px;}
	#popup-img {background-image: url("../images/banner_welcome1.jpg");}
}