* { font-size:13px; font-family:"Lucida Grande",arial; letter-spacing:0.75px;  }
/*scroll bar for safari & chrome*/
::-webkit-scrollbar {width: 15px;height: 15px;}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment { height: 1px; display: block; background-color: #EFF7FF; }
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:horizontal:end:increment { height: 1px; display: block; background-color: #EFF7FF;}
::-webkit-scrollbar-track-piece { background-color: #EFF7FF; }
::-webkit-scrollbar-thumb:vertical,
::-webkit-scrollbar-thumb:horizontal { background-color: #A9A9A9; border: 1px solid #CCC;}

header,menu,main,footer,system { 
	width:99%; min-width:200px; max-width:2400px; text-align:left; color:#333;
}
header h1,header h2, header h3 { color:#003366; text-shadow:1px 1px 1px #999; }
header h1 { font-size:150%; }
header h2 { font-size:175%; }
header h3 { font-size:115%; color:#F22ffF; text-shadow:1px 1px 1px #1d1d1d; }

main {
	padding:5px 12px;
	padding-top:5px;
}

footer {
	margin-top:1.5em;
	border-top:1px solid #888;
	padding-top:4px;
}
footer .code { font-size:85%; color:#767676;  }
footer .copyright { font-size:85%; color:#565656; }

.navtop {
	background-color: #F2F6F2;
	color:#33;
}

h2.title { 
	background: #194537;
	color:#fff;
	font-size:120%;
	padding:1em;
	font-weight:bold;
}
h3.title { 
	background: #2A5648;
	color:#fff;
	font-size:120%;
	padding:1em;
	font-weight:bold;
}
h4.title { 
	background: #6F9A8C;
	color:#fff;
	font-size:120%;
	padding:1em;
	font-weight:bold;
}
h2.title a,h3.title a,h4.title a { font-weight:normal; }
h2.title a,h3.title a,h4.title a { 
	margin-left:1em;
	color:#ffff00; padding:2px;
}
h2.title a,h3.title a:hover,h4.title a:hover { 
	margin-left:1em;
	color:#fff; padding:2px;
	text-decoration:none;
}

.row h2.title,.row h3.title,.row h1.title {
//	margin-left:-0.9em;
}
.modform-frm,#modform-frm {
	background:#EAEAEA;
	padding:1em;
	color:#111;
}
.modtitle div {font-size:120%; }

.profile .readonly { background:transparent;}
.boxuser * { font-size:96%; }

.alert ul {
	list-style-type:none;
	margin-left:0;
}
.alert ul li {
	margin-left:-3em;
}

.table .table-secondary td,.table .table-secondary th { background:#545454 !important; color:#F2F2F2; border:none; font-weight:bold;}
.table .table-secondary td a,.table .table-secondary th a { color:#FFFF66; border:none; font-weight:bold;}
tr.trjudul { background:#A8CFA9; }
.table-title { background:#A8CFA9; }
.table-subtitle { background:#B9DFB9; padding:0.75em; }
.fs80 { font-size:80%; }
.fs85 { font-size:85%; }
.fs92 { font-size:92%; }
.fs115 { font-size:115%; }
.fs125 { font-size:125%; }
.fs135 { font-size:135%; }
.fs150 { font-size:150%; }
.h25 { height:25%; min-height:50px; max-height:75px; }
.h50 { height:50%; min-height:100px; max-height:125px;  }
.h75 { height:75%; min-height:150px; max-height:175px;  }
.h100 { height:100%; min-height:150px; }

.bg-title { background: #008282;}
.bg1 { background:#FAFAFA;}
.bg2 { background:#EEEEEE;}

.mytab a { background:transparent; display:block; float:left; margin-right:0.5em;padding:0.5em; margin-bottom:0.5em; border-bottom:1px solid #d1d1d1; }
.mytab a.active { background:#008282; color:#fff; font-weight:bold;}


/* form-control width */
.w10 { display:inline; width:10% !important; min-width:50px !important; }
.w25 { display:inline; width:25% !important; min-width:100px !important; }
.w30 { display:inline; width:30% !important; min-width:100px !important; }
.w45 { display:inline; width:45% !important; min-width:50px !important; }
.w50 { display:inline; width:50% !important; min-width:100px !important; }
.w60 { display:inline; width:60% !important; min-width:100px !important; }
.w75 { display:inline; width:75% !important; min-width:150px !important; }
.w80 { display:inline; width:80% !important; min-width:150px !important; }
.w90 { display:inline; width:90% !important; min-width:150px !important; }
.w100 { display:inline; width:100% !important; min-width:150px !important; }

.custom-file-input { opacity:100%;}
select, .custom-select { 
	width: max-content;
	width: min-content;
	width: fit-content(25em);
	width: auto !important;
}
.submenu { 
	background:#FAFAFA;
	border:1px solid #eee; border-left:5px solid #EE6600;
	margin-bottom:7px; padding:7px 14px; 
} 
.submenu a { 
	display:block; 
	float:left; padding:4px 5px; 
	margin-right:10px; background:transparent;
	border-bottom:1px solid #999;
	color:#2456b2; 
	text-decoration:none; 
	line-height:24px; 
}
.submenu a.active { 
	display:block; font-weight:bold; background:#2A5648; color:#fff;
}
.submenu a:hover,.submenu a.active:hover,
.submenu a:hover { 
	background:#455656; color:#fff; 
}

.bi { 
	font-size: 1.27em;
	margin-right:0.133em; 
}
.bi-lg { 
	font-size: 1.33333em;
    line-height: .75em;
    vertical-align: -.0667em;
	margin-right:0.333em; 
}
.bi-md {
	font-size: 1.311em;
    line-height: .71em;
    vertical-align: -.061em;
	margin-right:0.311em; 
}
.bi-orange { color:#FFAA00; }
.bi-green { color:#24b256; }
.bi-blue { color:#2456b2; }
.bi-red { color:#aa3300; }

.textbox_ro,.textbox_half, .textbox_short, .textbox { font-size:100%; padding:0.525rem 1.2rem; margin-bottom:0.25rem; }
.textbox { width:80%; min-width:200px; }
.textbox_half { width:50%; min-width:140px; }
.textbox_short { width:25%; min-width:70px; }

.left { float:left; }
.right { float:right; }

hr { margin-top:0.2rem;margin-bottom:0.2rem;}
del { text-decoration:line-through 1px #aa3300; }
a del { color: #aa3300; }
a.alert { display:block; }

#modform-frm .alert {
	line-height:3em;
}

.alert .alert {
	padding:0 0.75rem;
}

@media all and (min-width: 320px) {
	header,menu,main,footer,system { 
		width:99%; min-width:200px; max-width:2400px; text-align:left; color:#333;
	}
	.textbox_half, .textbox_short, .textbox { width:100%; min-width:100px; font-size:100%; }
}
@media all and (min-width: 760px) {
	header,menu,main,footer,system { 
		width:99%; min-width:200px; max-width:2400px; text-align:left; color:#333;
	}
	.textbox_short { width:12%; min-width:80px; }
	.textbox_half { width:30%; min-width:150px; }
	.textbox { width:100%; min-width:200px; font-size:100%; }
}