@font-face {
  font-family: 'roboto_mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v7/L0x5DF4xlVMF-BfR8bXMIjhLq38.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.mi {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: 14px;  /* Preferred icon size */
	vertical-align: middle;
	font-size: x-large;				
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	word-wrap: normal;
	white-space: nowrap;
	direction: ltr;

	/* Support for all WebKit browsers. */
	-webkit-font-smoothing: antialiased;
	/* Support for Safari and Chrome. */
	text-rendering: optimizeLegibility;

	/* Support for Firefox. */
	-moz-osx-font-smoothing: grayscale;

	/* Support for IE. */
	font-feature-settings: 'liga';

}
.md-inactive { color: rgba(0, 0, 0, 0.26); }

.icon::before { content: "\e14a"; font-family: "mi" }

body{font-family: Roboto; background-color: #F8F8F8;}

.fixed_headers {
	border-collapse: collapse; table-layout: fixed;
}
.fixed_headers th,
.fixed_headers td {
	vertical-align: top;
	text-align: left; 
	word-wrap: break-word;
	border-width: 0px 1px 0px 1px;
	border-style: dotted;
	border-color: grey;
	padding: 5px 5px ;
	overflow: hidden;
	text-overflow: ellipsis;
}
.fixed_headers th{
	border-color: white;
}			
.fixed_headers tr:nth-child(even){background-color: #DEDEDE;}
.fixed_headers tr:nth-child(odd){background-color: #ECECEC;}
.fixed_headers tr:hover {background-color: rgba(255, 255, 255,.1);}
.fixed_headers td:hover {background-color: rgba(255, 255, 255,.2);}
.fixed_headers ::-webkit-scrollbar {
	width: 20px;
	background-color: #ccc;
}
.fixed_headers ::-webkit-scrollbar-thumb {
 	background-color: #888;
}
 

/*  ////////////////////////////////////////////TABLE PEGAWAI */
.fixed_headers_pegawai {white-space: nowrap;}
.fixed_headers_pegawai th:nth-child(1),
.fixed_headers_pegawai td:nth-child(1) {
	min-width: 75px; max-width: 75px;
	padding: 0px 10px 0px 0px ;
}
.fixed_headers_pegawai th:nth-child(2),
.fixed_headers_pegawai td:nth-child(2) {
	width: 60px; max-width:60px
}
.fixed_headers_pegawai th:nth-child(3),
.fixed_headers_pegawai td:nth-child(3) {
	min-width: 300px; max-width:300px
}
.fixed_headers_pegawai th:nth-child(4),
.fixed_headers_pegawai td:nth-child(4) {
	min-width: 200px; max-width:200px
}
.fixed_headers_pegawai th:nth-child(5),
.fixed_headers_pegawai td:nth-child(5) {
	min-width: 250px; max-width:250px
}
.fixed_headers_pegawai th:nth-child(6),
.fixed_headers_pegawai td:nth-child(6) {
	min-width: 70px; max-width:70px
}
.fixed_headers_pegawai th:nth-child(7),
.fixed_headers_pegawai td:nth-child(7) {
	min-width: 200px; max-width:200px; 
}

.fixed_headers_pegawai th:nth-child(8),
.fixed_headers_pegawai td:nth-child(8) {
	min-width: 70px; max-width:70px
}

.fixed_headers_pegawai thead {
	background-color: #333;
	color: #FDFDFD;
}
.fixed_headers_pegawai thead tr {
	display: block;
	position: relative;
}
.fixed_headers_pegawai tbody {
	display: block;
	overflow-y: scroll;
	/*overflow-x: scroll;*/
	height: 79vh; 
}

/* ///////////////////////////////////////// TABEL SPD */

.fixed_headers_spd th:nth-child(1),
.fixed_headers_spd td:nth-child(1) {
	min-width: 180px; max-width: 180px;
	padding: 0px 10px 0px 0px ;
}
.fixed_headers_spd th:nth-child(2),
.fixed_headers_spd td:nth-child(2) {
	width: 60px; max-width:60px
}
.fixed_headers_spd th:nth-child(3),
.fixed_headers_spd td:nth-child(3) {
	min-width: 180px; max-width:170px
}
.fixed_headers_spd th:nth-child(4),
.fixed_headers_spd td:nth-child(4) {
	min-width: 300px; max-width:300px
}
.fixed_headers_spd th:nth-child(5),
.fixed_headers_spd td:nth-child(5) {
	min-width: 100px; max-width:100px
}
.fixed_headers_spd th:nth-child(6),
.fixed_headers_spd td:nth-child(6) {
	min-width: 120px; max-width:120px
}

.fixed_headers_spd th:nth-child(7),
.fixed_headers_spd td:nth-child(7) {
	min-width: 120px; max-width:120px
}
.fixed_headers_spd th:nth-child(8),
.fixed_headers_spd td:nth-child(8) {
	min-width: 130px; max-width:130px
}

.fixed_headers_spd thead {
	background-color: #333;
	color: #FDFDFD;
}
.fixed_headers_spd thead tr {
	display: block;
	position: relative;
}
.fixed_headers_spd tbody {
	display: block;
	overflow-y: scroll;
	/*overflow-x: scroll;*/
	height: 79vh; 
}

/* ///////////////////////////////////////// TABEL DIPA */

.fixed_headers_dipa th:nth-child(1),
.fixed_headers_dipa td:nth-child(1) {
	min-width: 50px; max-width: 50px;
 }
.fixed_headers_dipa th:nth-child(2),
.fixed_headers_dipa td:nth-child(2) {
	width: 60px; max-width:60px
}
.fixed_headers_dipa th:nth-child(3),
.fixed_headers_dipa td:nth-child(3) {
	min-width: 100px; max-width:100px
}
.fixed_headers_dipa th:nth-child(4),
.fixed_headers_dipa td:nth-child(4) {
	min-width: 100px; max-width:100px
}
.fixed_headers_dipa th:nth-child(5),
.fixed_headers_dipa td:nth-child(5) {
	min-width: 60px; max-width:60px
}
.fixed_headers_dipa th:nth-child(6),
.fixed_headers_dipa td:nth-child(6) {
	min-width: 50px; max-width:50px
}

.fixed_headers_dipa th:nth-child(7),
.fixed_headers_dipa td:nth-child(7) {
	min-width: 80px; max-width:80px
}
.fixed_headers_dipa th:nth-child(8),
.fixed_headers_dipa td:nth-child(8) {
	min-width: 120px; max-width:120px
}
.fixed_headers_dipa th:nth-child(9),
.fixed_headers_dipa td:nth-child(9) {
	min-width: 120px; max-width:120px
}
.fixed_headers_dipa th:nth-child(10),
.fixed_headers_dipa td:nth-child(10) {
	min-width: 120px; max-width:120px
}
.fixed_headers_dipa th:nth-child(11),
.fixed_headers_dipa td:nth-child(11) {
	min-width: 100px; max-width:100px
}
.fixed_headers_dipa th:nth-child(12),
.fixed_headers_dipa td:nth-child(12) {
	min-width: 90px; max-width:90px
}
.fixed_headers_dipa th:nth-child(13),
.fixed_headers_dipa td:nth-child(13) {
	min-width: 90px; max-width:90px
}
 

.fixed_headers_dipa thead {
	background-color: #333;
	color: #FDFDFD;
}
.fixed_headers_dipa thead tr {
	display: block;
	position: relative;
}
.fixed_headers_dipa tbody {
	display: block;
	overflow-y: scroll;
	/*overflow-x: scroll;*/
	height: 79vh; 
}

/*  ////////////////////////////////////////////TABLE PENGATURAN */
.fixed_headers_pengaturan th:nth-child(1),
.fixed_headers_pengaturan td:nth-child(1) {
	min-width: 250px; max-width: 250px;
	padding:  10px ;
}
.fixed_headers_pengaturan th:nth-child(2),
.fixed_headers_pengaturan td:nth-child(2) {
	width: 500px; max-width:500px
}
.fixed_headers_pengaturan th:nth-child(3),
.fixed_headers_pengaturan td:nth-child(3) {
	min-width: 400px; max-width:400px
}
.fixed_headers_pengaturan thead {
	background-color: #333;
	color: #FDFDFD;
}
.fixed_headers_pengaturan thead tr {
	display: block;
	position: relative;
}
.fixed_headers_pengaturan tbody {
	display: block;
	overflow-y: scroll;
	/*overflow-x: scroll;*/
	 
}

/*  ////////////////////////////////////////////TABLE INPUT SPD */
.fixed_headers_inputspd th:nth-child(1),
.fixed_headers_inputspd td:nth-child(1) {
	min-width: 40px; max-width: 40px;
 }
.fixed_headers_inputspd th:nth-child(2),
.fixed_headers_inputspd td:nth-child(2) {
	min-width: 400px; max-width:400px
}
.fixed_headers_inputspd th:nth-child(3),
.fixed_headers_inputspd td:nth-child(3) {
	min-width: 150px; max-width:150px
}
.fixed_headers_inputspd th:nth-child(4),
.fixed_headers_inputspd td:nth-child(4) {
	min-width: 150px; max-width:150px
}
.fixed_headers_inputspd th:nth-child(5),
.fixed_headers_inputspd td:nth-child(5) {
	min-width: 150px; max-width:150px
}
.fixed_headers_inputspd th:nth-child(6),
.fixed_headers_inputspd td:nth-child(6) {
	min-width: 150px; max-width:150px
}
.fixed_headers_inputspd th:nth-child(7),
.fixed_headers_inputspd td:nth-child(7) {
	min-width: 150px; max-width:150px
}
.fixed_headers_inputspd thead {
	background-color: #333;
	color: #FDFDFD; font-size: 14px;
}
.fixed_headers_inputspd thead tr {
	display: block;
	position: relative;
}
.fixed_headers_inputspd tbody {
	display: block;
	overflow-y: scroll;
	/*overflow-x: scroll;*/
	height: 70vh;
}


/*  ////////////////////////////////////////////TABLE MONITOR PEGAWAI */
.fixed_headers_monitor_pegawai th:nth-child(1),
.fixed_headers_monitor_pegawai td:nth-child(1) {
	min-width: 60px; max-width: 60px;
 }
.fixed_headers_monitor_pegawai th:nth-child(2),
.fixed_headers_monitor_pegawai td:nth-child(2) {
	min-width: 250px; max-width:250px
}
.fixed_headers_monitor_pegawai th:nth-child(3),
.fixed_headers_monitor_pegawai td:nth-child(3) {
	min-width: 250px; max-width:250px; 
}
.fixed_headers_monitor_pegawai th:nth-child(4),
.fixed_headers_monitor_pegawai td:nth-child(4) {
	min-width: 230px; max-width:230px
}
 
.fixed_headers_monitor_pegawai th:nth-child(5),
.fixed_headers_monitor_pegawai td:nth-child(5) {
	min-width: 220px; max-width:220px
}
.fixed_headers_monitor_pegawai th:nth-child(6),
.fixed_headers_monitor_pegawai td:nth-child(6) {
	min-width: 220px; max-width:220px
}
 
.fixed_headers_monitor_pegawai thead {
	background-color: #333;
	color: #FDFDFD; font-size: 14px;
}
.fixed_headers_monitor_pegawai thead tr {
	display: block;
	position: relative;
}
.fixed_headers_monitor_pegawai tbody {
	display: block;
	overflow-y: scroll;
	/*overflow-x: scroll;*/
	height: 79vh; 
	 
}


input[type=checkbox]{
	width: 20px;
	height: 20px;
	vertical-align: middle;
}
.paging a{
	color: black;
	font-weight: normal;
	background-color: #e3e3e3;
	padding: 4px 8px ; margin : 0px 1px;
	text-decoration: none;
	transition: background-color .3s;
	border: 1px solid #aaa;
	border-radius: 100px;
}
.paging a.active {
	background-color: red;
	color: white;
	border: 1px solid #4CAF50;
}

.input_flat{
	border: hidden;  
	padding: 0px; margin: 0px; text-align: right; width: 100% 
}
.input_normal{
	padding: 0px; margin: 0px; text-align: right; width: 100% 
}
.input_flat[readonly]{
	background-color: #efefef;
}