@media screen
{
    .printable{ 
    	display : none !important; 
    }
    .notprintable{}
	body {
		background: #e1e1f1;
	}
	body::before {
	  content: "";
	  position: fixed;
	  top: 0; left: 0; width: 100%; height: 100%;
	  background: url('images/dataran.jpg') no-repeat center center;
	  background-size: cover;
	  will-change: transform;
	  z-index: -1;
	  opacity: 0.1;
	}
}

@media print
{
    table.p1 td {
    	border-bottom: 1px solid !important;
    }
    table.p1 {
    	border-spacing: 0px !important;
    }
    .notprintable{ 
    	display : none !important;
    }
    .printable{}
}
html, body {
	margin: 0px;
	height: 100%;
	/*overflow: hidden;	*/
}
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  /*position: relative;*/
	padding-bottom: 3.5rem;
	min-height: 100%;
	font-family: Inter, sans-serif;
	font-size: 16px;
	color: #2C3345;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	//overflow: scroll;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;  
}
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
}
#dimmer {
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	background: #000;
	opacity: 0.60;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
	filter: alpha(opacity=60);
	-moz-opacity: 0.60;
	z-index: 150;
	display: none;
	visibility: visible;
	position: fixed;
	overflow: hidden;
}

.popup {
	margin: 0 auto;
	position: fixed;
	top : 0px;
	display: block; 
	visibility: hidden;
	//background-color: #FFFFFF; 
	padding: 1px; 
	/*
	border-top: 1px; 
	border-left: 1px; 
	border-right: 1px; 
	border-bottom: 1px; 
	border-style: solid; 
	border-color: #c0c0c0;//#94a3c4;
	*/
	z-index: 151;	
}

.qbox_outer {
	padding-bottom: 10px;
}
.qbox {
	font-family: Inter, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif;
	padding: 20px;
	display: block;
	border: solid #a6292d 2px;
	display: table;
	margin: auto;
	max-width: 450px;
	width: 100%;
	background: #FFF;
	border-radius: 10px;
	//color: #FFF;
	
}
.form-required {
    color: #dc2626;
	margin-left: 4px;
	font-weight: bold;
}

.inputText {
	width: 400px; 
	border-radius: 4px; 
	border-width: 1px; 
	height: 2.5em; 
	padding: 0 .625em; 
	font-size: 1em; 
}
/*
textarea[class="inputTextarea"] {
	font-size: 1em; 
}
*/

.input_required_highlight {
	box-shadow: 0 0 4px 4px rgba(255, 0, 0, .3);
	border-color: #FF0000;
}	

::placeholder {
  color: #bfbfbf; /* Use your desired color */
  font-style: italic;
}

/* Vendor prefixes for older browser compatibility */
::-webkit-input-placeholder { /* Chrome, Opera, Safari */
  color: #bfbfbf;
  font-style: italic;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #bfbfbf;
  font-style: italic;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #bfbfbf;
  font-style: italic;
}
:-moz-placeholder { /* Firefox 18- */
  color: #bfbfbf;
  font-style: italic;
}
/* Hide arrow/spinner */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
/*-----------*/

.ui-icon-light {
	//top: 3px; 
	position: relative;
	display: inline-block;
	overflow: hidden; 
	background-repeat: no-repeat; 
	width: 16px; 
	height: 15px; 
	background-image: url(images/ui-icons_ffffff_256x240.png);
	vertical-align: bottom;
}

._button, ._button_green, ._button_red, ._button_darkred {
	outline: none !important;
	background-color: #7373ff;
	border-color: #7373ff;
	color: #FFF;
	width: auto;
	//min-width: 180px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 3em;
	font-size: 1em;
	border-radius: 4px;
	border: 1px solid;
	padding: 0 .75rem;
	cursor: pointer;
	font-weight: 500;
}
._button_green {
	background-color: #18bd5b;
	border-color: #18bd5b;
	height: 2em;	
}

._button_red, ._button_darkred {
	background-color: #d03b3b;
	border-color: #d03b3b;
	height: 2em;	
}

._button_darkred {
	background-color: #a6292d;
}

.input_required_notice, #upload_error_notice, #submit_error_notice, #size_input_required_notice, #pass_error_notice {
    color: #fff;
    background-color: #dc2626;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='14' height='15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 14.515a7 7 0 110-14 7 7 0 010 14zm-.814-5.86h1.628v-5.21H6.186v5.21zM7 11.259a.82.82 0 00.814-.824A.816.816 0 007 9.631a.813.813 0 100 1.628z' fill='%23fff'/%3E%3C/svg%3E");
    font-size: .75em;
    margin-top: 8px;
    border-radius: 4px;
    background-size: .875em;
    background-position: .375em;
    background-repeat: no-repeat;
    display: none;
    width: auto;
    padding: .25em .5em .25em 1.625em;
}

._button:active {
	font-weight: normal; color: #000; 
    box-shadow: 0 0 4px 4px rgba(74, 133, 239, .3);
	border-color: #7373ff;
}
._button_green:active {
	font-weight: normal; color: #000; 
    box-shadow: 0 0 4px 4px rgba(74, 133, 239, .3);
	border-color: #18bd5b;
}
._button_red:active {
	font-weight: normal; color: #000; 
    box-shadow: 0 0 4px 4px rgba(74, 133, 239, .3);
	border-color: #d03b3b;
}

._button:hover {
    background-color: #8686ff;
}
._button_green:hover {
    background-color: #5fb783;
}
._button_red:hover {
    background-color: #f75858;
}

._radio {
	cursor: pointer;
	//font-weight: bold;
	font-size: .9em;
	padding: 5px;
}
input[class="_radio"] {
	transform: scale(1.5); 
}

table.t1, table.t2 {
	border: 0px; 
	border-spacing: 1px;
	border-color: ##7373ff; 
	border-style: solid; 
	width: 100%;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	
}
table.t1 {
	background-color: #FFF;
	
}
/*
table.t2 {
	-webkit-border-radius: 10px 10px 0 0; 
	border-radius: 10px 10px 0 0;
}
*/
tr.header, tr.header-red { 
	border: 1px solid #aaaaaa;
	/*background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x;*/
	background: #7373ff;
	color: #FFF;
	font-weight: bold;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
tr.header-red { 
	background: #bb3535;
}

td.header-red {
	-webkit-border-radius: 10px 10px 0 0; 
	border-radius: 10px 10px 0 0;		
}

td.header, td.headerfirst, td.headerlast { 
	font-weight: bold; 
	color: #FFF; 
	padding: 10px;	
}
td.headerfirst {
	border-radius: 8px 0 0 0;
}
td.headerlast {
	border-radius: 0 8px 0 0;
}

td.regular { 
	padding: 10px; 
	text-align: left;
}
td.center { 
	text-align: center;
}
td.clickable {
	cursor: pointer;
}

.titleMain {
	background-image: linear-gradient(to right, rgba(0, 120, 0, 1), rgba(65,16,16,0));
	padding:5px;
	border-radius: 5px; 
	color: #FFF;
	padding-left: 15px;
}

@media (min-width: 600px) { /* desktop version */
	.hide-ondesktop {
		display: none;
	}
}

@media (max-width: 600px) { /* mobile version */
	.inputText {
		width: 300px; 
	}
	.hide-onmobile {
		display: none;
	}
	table.t1 {
		border-style: none;
	}
}

.custom-select {
    display: none;
    position: absolute;
    background-color: #FFF;
    //min-width: 160px;
	padding: 5px 5px;
	margin-top: -30px;
    z-index: 140;
	border: 1px solid;
	-moz-box-shadow: 0px 5px 5px gray;
	-webkit-box-shadow: 0px 5px 5px gray;
	box-shadow: 0px 5px 5px gray;
	text-align: left;

}
.custom-select-child:hover,.custom-select-child:active {
	background-color: #e1e1f1;
}
@font-face {	
    font-family: 'seadog';
    src: url('fonts/seadog.ttf') format("truetype");
    font-weight: normal;
    font-style: normal;	
}

@font-face {
    font-family: 'Verdana';
    src: url('fonts/verdana.ttf') format("truetype");
    font-weight: normal;
    font-style: normal;
}