/* icon */
@import url('https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css');

.nav {
	font-family:  Arial, Helvetica, sans-serif;
}	
.nav .jud {
	<!-- margin: 0px 5px 0px 5px; -->
	background-color : ##006b6e;	
	color: #fcfcfc;	
	padding: 12px 0px 12px 0px;
	text-align: center;
	font-weight: 500;
	font-size: 15px;
	border-bottom: 1px solid #1d6163;
}	
.nav .menuuser {
	<!-- margin: 0px 5px 0px 5px; -->
	background-color: #006b6e;
	font-size: small;
	font-weight: 500;
	color: #fcfcfc;
	padding-top: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid #1d6163;
}	

.nav .lbl {
	padding: 7px 14px 7px 14px;
	color: #333333;
	font-size: smaller;
	font-weight: bold;
}	
.nav .group {
	margin: 0px 0px 0px 0px;
	background-color: #006b6e;	
	font-weight: bold;
	font-size : smaller;
	border-style: solid solid solid solid;
	border-color: #006b6e;
	border-width: 1px;
	vertical-align: middle;
}	


.nav .group .kiri {
	float: left;
	width: 50px;
	text-align: right;
	font-weight: normal;
	padding-right: 4px;
}	
.nav .group .kanan {
	float: left;
	font-weight: bold;
}	
.nav .group .rest {
	text-align: right;
}
.nav .group input.button {
	font-size: x-small;
}	
.nav .last {
	border-style: solid solid solid solid;
	margin-bottom: 5px;
}
.nav .menu {
	<!-- margin: 0px 5px 0px 5px; -->
	background-color: #006b6e;	
	font-size: smaller;
	padding:0px;
}
.nav .menu ul{
	margin:0px;
	padding:0px;
	list-style:none;
}
.nav .menu li a {
	text-decoration: none;
	font-weight: bold;
	color: #FFFFFF;
	display: block;
	padding: 10px 7px 10px 7px;
	height: 18px;
}
.nav .menu li a:hover {
	background-color : #044042;	
	color: #FFFFFF;
	border-radius: 5px;
}
.nav .menu li a .kiri {
	float: left;
}
.nav .menu li a .kanan {
	font-size: 100%;
	font-weight: normal;
	text-align: right;
}
.cont {
	font-family:   Tahoma, Geneva, sans-serif;
	font-size: smaller;
	background-color : #fff;
	border-radius: 5px;
    box-shadow: rgb(204, 204, 204) 0px -7px 25px -5px, rgba(0, 0, 0, 0.1) 0px 1px 5px 0px, transparent 0px 0px 0px 0px;
    width: 100% !important;
}	
.cont:not(last-child) {
	margin-bottom: 20px;
}	
.cont .head {
	background-color : #fff;	
	padding: 3px 4px 10px 4px;
	border-radius: 6px 0px 6px 0px;
	border-bottom: 1px solid rgb(224, 224, 224);
}	
.cont .head .jud {
	background-color: #0a969b;
	color: #fff;
	margin: -3px 0px 0px 8px;
	padding: 5px 10px 5px 10px;
	float: left;
	font-weight: 500;
	font-size: 12px;
}	
.cont .head .rest {
	padding: 4px 8px 0px 8px;
	text-align: right;
	background: rgba(0,0,0,0);
}
.cont .isi {
	padding: 6px 12px;
	font-size: 12px;
	border-bottom: 1px solid #eff2f7;
	overflow-x: auto;
}	
.cont .isi .kiri {
	float: left;
	width: 150px;
	text-align: right;
	margin-top: 4px;
	margin-right: 4px;
}	
.cont .isi .kirilebar {
	float: left;
	width: 200px;
	text-align: right;
	padding: 4px;
}


.cont .isi .kanan {
	font-weight: bold;
	padding: 4px 4px 4px 0px;
	margin-left: 6px;
}
.cont .isi .biasa {
	padding: 4px;
}	

.cont .isi .kanan input[type="text"] {
	border-style: solid;
	border-width: 1px;
	border-color: #AFABAB;
	padding: 5px 8px 5px 8px;
	border-radius: 3px;
	width: 400px;
}

.cont .isi .kanan input.range {
	width: 120px !important;
}

.biasa input[type="text"], div.kanan select, input.color {
	border-style: solid;
	border-width: 1px;
	border-color: #AFABAB;
	padding: 5px 12px 5px 8px;
	border-radius: 3px;
	width: 400px;
}

div.biasa.flex-start-wrap select {
	border-style: solid;
	border-width: 1px;
	border-color: #AFABAB;
	padding: 4px 12px 4px 8px;
	border-radius: 3px;
}

div.biasa.flex-start-wrap > div:nth-child(3) > input[type=text], .flex-item input[type="text"] {
	border-style: solid;
	border-width: 1px;
	border-color: #AFABAB;
	padding: 5px 12px 5px 8px;
	border-radius: 3px;
	width: 180px !important;
}

#txtcari {
	min-width: 100px;
}

.cont .isi .kanan .color{
	border-style: solid;
	border-width: 1px;
	border-color: #AFABAB;
}

.cont .isi .kanan select{
	border-style: solid;
	border-width: 1px;
	border-color: #AFABAB;
}

.cont .isi .biasa input[type="text"]{
	border-style: solid;
	border-width: 1px;
	border-color: #AFABAB;	
}
.cont .isi .biasa {
	padding: 4px;
}
.cont .isi .l{
	text-align: left;
	padding-left: 5px;
	vertical-align: middle;
}	
.cont .isi .c{
	text-align: center;
}
.cont .isi .r{
	text-align: right;
}
.cont .isi table {
	font-size: 100%;
	width: 100%; 
	border-collapse: collapse; 
	font-size: small;
	margin-top: 8px;
	margin-bottom: 15px;
}	
.cont .isi table th {
	background-color: #0a969b;
	color : #fff;	
	padding: 8px 3px 8px 3px;
	font-weight: bold;
	border: 1px solid #eff2f7;
}	
.cont .isi table th span {
	background-color: #0a969b;
	color : #fff;	
	padding: 8px 3px 8px 3px;
	font-weight: bold;
}	
.cont .isi table td {
	padding: 4px;
	border: 1px solid #eff2f7;
	min-width: 30px;
}	
.cont .isi:nth-child(odd), 
tbody tr:nth-child(odd), tbody tr:nth-child(odd) textarea.textpalsu {
	background-color: #F7FAFB;
}
tbody tr:nth-child(even) {
	background-color: #fff;
}
.isi:has(table), tbody:has(.cjudul), .cont .isi:only-child, tr.cdate {
	background-color: #fff !important;
}	
.isi:first-child:nth-last-child(1) {
	background-color: #fff !important;
}
.isi:first-child:nth-last-child(2),
.isi:first-child:nth-last-child(2) ~ .isi {
	background-color: #fff !important;
}

.cont .isi table tr:hover td, .cont .isi table tr:hover td > textarea {
	background-color : #F0F3F6;
	color : black;	
}	
.cont .isi table td.c {
	text-align: center;
}	
.cont .isi table td.r {
	text-align: right;
}	
.cont .isi table td.tot, .cont .isi table tr:hover td.tot {
	font-weight: bolder;
	background-color : #e7e7e7;	
}	
.cont a:not(.sort) :not(.button) {
	text-decoration: none;
	color: #0f92e9;
	padding: 4px;
	white-space: nowrap;
}
.cont a:not(.sort) :not(.button) :hover {
	text-decoration: none;
	background-color: #0f92e9;
	color: #fff;
	border: 1px solid rgba(7, 105, 170, 0);
	border-radius: 3px;
}
.textpalsu{
	resize:none;
	border:none;
	font-family:  Arial, Helvetica, sans-serif;
	background-color : #fcfcfc;
	font-weight: 500;	
	font-size: 10pt;
	box-sizing: border-box;
	max-width: 95%;
}

input.button, a.button, input[type="submit"] {
	text-decoration: none;
	align-items: center;
	font-size: x-small;
	border-radius: 3px;
	box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
	box-sizing: border-box;
	cursor: pointer;
	padding: 3px 7px;
	margin-left: 4px;
	margin-right: 4px;
	margin-bottom: 4px;
}
div.biasa.flex-start-wrap input.button, div.head div.rest a.button, div.head div.rest input.button, div.biasa input[type=submit], div.biasa input.button  {
	padding: 6px 9px !important;
}

#_browser div.head div.rest .button {
	padding: 3px 7px !important;
}
input[type="submit"] {
	margin-bottom: 8px;
}
input.button:hover, a.button:hover {
	border-color: rgba(0, 0, 0, 0.15);
	box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
}	
input.button:not([value~='Delete']), a.button, input[type="submit"] {
	background-color: #0f92e9;
	color: #fff;
	border: 1px solid rgba(7, 105, 170, 0.1);
}	
input.button[value~='Delete'] {
	background-color: #c81e1e;
	color: #fff;
	border: 1px solid rgba(189, 21, 44, 0.1);
}
input.button:not([value~='Delete']):hover, a.button:hover, input[type="submit"]:hover {
	background-color: #057bc9;
	text-decoration: none;
}
input.button[value~='Delete']:hover {
	background-color: #a30909;
	text-decoration: none;
}
textarea {
	<!-- padding: 4px 6px 4px 6px; -->
	border : solid 1px #bdbdbd;
	border-radius: 4px;	
	margin-bottom: 2px;
}

.flex-start-wrap {
	display: flex; 
	flex-direction: row; 
	justify-content: flex-start; 
	align-items: last baseline; 
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 4px;
}
.flex-item {
	display: flex; 
	flex-direction: column; 
	gap: 10px
}

/* scrollbar */
::-webkit-scrollbar {
	width: 5px;
	background-color: #F5F5F5;
}
::-webkit-scrollbar-track {
	box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
}
::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background-color: #c1c1c1;
}
/* scrollbar end */

.button--loading::after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	border: 2px solid transparent;
	border-top-color: #dadada;
	border-radius: 50%;
	animation: button-loading-spinner 1s ease infinite;
}
@keyframes button-loading-spinner {
	from {
		transform: rotate(0turn);
	}
	to {
		transform: rotate(1turn);
	}
}

th a.sort, a, td.c a { color: #0f92e9; text-decoration: none;}
th a:not(.sort), th a:not(.sort) span {
	color: #ffffff !important;
	padding: 2px 5px;
	border-radius: 3px;
	transition: color .2s ease-in-out, box-shadow .2s ease-in-out;
}
th a:not(.sort):hover, th a:not(.sort) span:hover {
	box-shadow: inset 100px 0 0 0 white;
	color: #404e67 !important ;
	text-decoration: underline;
}
th div { display: none; }
td.edit { width: 30px; }
td input.in { display: none; width: 70px; }
		
a.action { font-size:75%; text-decoration : none; background-color: #FFFFFF; color: #000000; border: 1px solid #CCC; padding: 1px 5px 1px 5px;  margin-left: 5px;}
a.action:hover { text-decoration : none; background-color:#fbff4d;}
a.actionidx:hover { text-decoration : none; background-color: #fbff4d;}
a.actionidx { font-size:100%; text-decoration : none; background-color: #FFFFFF; color: #00578F; border: 1px solid #CCC;}
input.readonly { background-color: #E0E0E0; }
div#browser {
	background-color : #fff !important;
	border-radius: 4px;
	color: #057bc9;
	float:left; 
}
div#browser a.actionbro { 
	margin: 5px; 
	float:right;  
	text-decoration: none; 
	color: #fff; 
	background-color: #0f92e9;
	padding: 4px 8px;
	white-space: nowrap; 
	font-size: 9px;
	border-radius: 4px;}
div#browse  a.actionbro:hover { text-decoration : none; color: #fff; background-color: #057bc9;}
div#browser a.l { color: #0f92e9; text-decoration : none; font-size:9px;}
div#browser a.r { margin: 5px; float:right;  color: #00000; text-decoration : none; font-size:10px;}
div#browser div.browserhasil a { color: #804000; text-decoration : none;}
table#tgl th, table#tgl td  {
	border: none !important;
	padding-top: 6px;
	padding-bottom: 6px;
	margin-top: -20px;
}

.wbreak {
	white-space: wrap !important;
}	

tr.cjudul { font : 9pt Arial, Helvetica, sans-serif; background-color : #23C9FF !important; text-align: center; }
tr.cjudulcal { font : 9pt Arial, Helvetica, sans-serif; background-color : white; text-align: center; }
td.cjudul { font : 9pt Arial, Helvetica, sans-serif; color : white; text-align: center; width: 30px; }
a.cbukan { font : 9pt Arial, Helvetica, sans-serif;  color : #A0A0A0; text-decoration : none;  padding: 0 5px 0 5px;}
a.chari { font : 9pt Arial, Helvetica, sans-serif;  color : black; text-decoration : none;  padding: 0 5px 0 5px;}
a.chari1 { font : 9pt Arial, Helvetica, sans-serif;  color : red;  text-decoration : none;  padding: 0 5px 0 5px;}
a.chari7 { font : 9pt Arial, Helvetica, sans-serif;  color : blue; text-decoration : none;  padding: 0 5px 0 5px;}
tr.cdate { font : 9pt Arial, Helvetica, sans-serif; background-color : White; text-align: center; }
td.cdate { font : 9pt Arial, Helvetica, sans-serif; background-color : White; text-align: center; }
td.ctheday { font : 9pt Arial, Helvetica, sans-serif; background-color : #23c8ff5d; text-align: center; }
td.cbiasa { font-size : 9pt !important; font-family: Arial, Helvetica, sans-serif; color : rgb(24, 22, 22); text-align: center; }
td.csabtu { font-size : 9pt !important; font-family: Arial, Helvetica, sans-serif; background-color : #fff; color : rgb(24, 22, 22); text-align: center; }
td.cminggu { font-size : 9pt !important; font-family: Arial, Helvetica, sans-serif; background-color : #fff; color : #E42256; text-align: center; font-weight: 500; }
td.cminggu:hover { color : ee2345 !important; font-weight: 500; }

.hand-pointer {
	cursor: pointer;
}
.no-wrap {
	white-space: nowrap;
}