*
{
	margin:0px;
	padding:0px;
}
a
{
	text-decoration : none;
	color : inherit;
}
ul
{
	list-style-type: none;
}
select
{
	font-family: Monospace, Helvetica, Arial, sans-serif;
	border-radius : 8px;
	padding : 3px 5px;
	width : calc(100% - 10px); /* 10px padding input + 2px border input */
	font-size : 12px;
	max-width:290px;
}
input[type=text],input[type=password]
{
	font-family: Monospace, Helvetica, Arial, sans-serif;
	border-radius : 8px;
	padding : 3px 5px;
	width : calc(100% - 10px); /* 10px padding input + 2px border input */
	font-size : 18px;
	max-width:290px;
}
input[type=button]
{
	font-family: Monospace, Helvetica, Arial, sans-serif;
	border-radius : 8px;
	padding : 3px 5px;
	font-weight: normal;
	font-size : 18px;
	cursor : pointer;
	max-width:290px;
}
input[type=text]:disabled
{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:10px;height:20px;'%3E%3Cline x1='1' y1='19' x2='5' y2='19' style='stroke:grey;width-stroke:1px;' /%3E%3C/svg%3E");
}
textarea
{
	/*position : relative;
	top : -2px;*/
	resize: none;
	border-radius : 8px;
	width : calc(100% - 14px);
	min-height : 60px;
	max-width : 290px;
	font-family: Monospace, Helvetica, Arial, sans-serif;
	font-size : 18px;
	line-height:20px;
	border-style : inset;
	padding : 0 5px;
	border: none;
	/*background-color : #8E5;*/
	background-color : #ffc107;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:10px;height:20px;'%3E%3Cline x1='1' y1='19' x2='5' y2='19' style='stroke:black;width-stroke:1px;' /%3E%3C/svg%3E");
	background-size : 10px 20px;
	background-position:0 0;
}
textarea:active,textarea:focus
{
	outline : none;
}
textarea:disabled
{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:10px;height:20px;'%3E%3Cline x1='1' y1='19' x2='5' y2='19' style='stroke:grey;width-stroke:1px;' /%3E%3C/svg%3E");
}
fieldset
{
	padding-right:5px;
	padding-left:5px;
	padding-bottom:5px;
}
table
{
	border-collapse : collapse;
	cellspacing : 0;
}
table td
{
	line-height : 40px;
	vertical-align: top;
	word-break : break-all;
}
/*-------------------------------------------kalender start------------------------------------------------------*/
.main-kalender
{
	width : 280px;
}
.main-kalender .header-dynamic-kalender
{
	display:flex;
}
.main-kalender .header-dynamic-kalender .left-header-dynamic-kalender,
.main-kalender .header-dynamic-kalender .right-header-dynamic-kalender
{
	width : 40px;
	cursor : pointer;
	background-color : #d9534f;
	color : #fff;
	text-align : center;
}
.main-kalender .header-dynamic-kalender .left-header-dynamic-kalender
{
	border-top-left-radius : 15px;
}
.main-kalender .header-dynamic-kalender .right-header-dynamic-kalender
{
	border-top-right-radius : 15px;
}
.main-kalender .header-dynamic-kalender .center-header-dynamic-kalender
{
	flex :1;
	text-align : center;
	cursor : pointer;
	width : 40px;
	cursor : pointer;
	background-color : #d9534f;
	color : #fff;
}
.main-kalender .content-dynamic-kalender table
{
	table-layout : fixed;
	width : 100%;
}
.main-kalender .content-dynamic-kalender tr
{
	display:flex;
}
.main-kalender .content-dynamic-kalender td
{
	background-color : #ddd;
	flex : 1;
	text-align : center;
	cursor : pointer;
	border : none !important;
}
.main-kalender .content-dynamic-kalender td:nth-child(7),
.main-kalender .content-dynamic-kalender th:nth-child(7)
{
	color : #F00;
}
.main-kalender .content-dynamic-kalender th
{
	background-color : #fff;
	flex : 1;
	text-align : center;
	border : none !important;
}
/*-------------------------------------------kalender end----------------------------------------------------*/
.nav-content-pasif
{
	padding:0 10px;
	cursor:pointer;
	border:1px solid black;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	height:38px;
	background-color : #d9534f;
	color : #fff;
}
.nav-content-aktif
{
	padding:0 10px;
	border:1px solid black;
	border-bottom:0;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	height:38px;
}

.error-message
{
	color : #F81234;
	font-size:12px;
}
.paginasi-based-nav
{
	flex-wrap:wrap;
	width:100%;
}
.inputeks
{
	/*border : none;
	font-family: Comic Sans MS, Monospace, Helvetica, Arial, sans-serif;
	font-size : 18px;
	color : #f98866;
	line-height:20px;
	background-color : #F0F8FF;
	background-color : #8E5;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:10px;height:20px;'%3E%3Cline x1='1' y1='19' x2='5' y2='19' style='stroke:black;width-stroke:1px;' /%3E%3C/svg%3E");
	background-size : 10px 20px;
	background-position:0 0;*/
	border : none;
	font-family: Comic Sans MS, Monospace, Helvetica, Arial, sans-serif;
	/*border-radius : 5px;*/
	padding : 0px 5px;
	width : calc(100% - 10px); /* 10px padding input + 2px border input */
	max-width:290px;
	line-height:20px;
	background-color : #ffc107;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:10px;height:20px;'%3E%3Cline x1='1' y1='19' x2='5' y2='19' style='stroke:black;width-stroke:1px;' /%3E%3C/svg%3E");
	background-size : 10px 20px;
	background-position:0 0;
}
.inputeks:active,.inputeks:focus
{
	outline : none;
}
inputeks:disabled
{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:10px;height:20px;'%3E%3Cline x1='1' y1='19' x2='5' y2='19' style='stroke:grey;width-stroke:1px;' /%3E%3C/svg%3E");
}
body
{
	width:100%;
	height:100%;
	font-family: Monospace, Helvetica, Arial, sans-serif;
	color : #345;
	background-color : #6c757d;
	/*background-color : #F3F8FF;*/
	font-size: 18px;
}
#dynamic
{
	margin : 0;
	padding: 0;
}
#overlay
{
	z-index:6;
	width:100%;
	min-height:100vh;
	position:fixed;
	top:0;
	bottom:0;
	background-color:rgba(0,0,0, 0.7);
	overflow-y:scroll;
}
#overlay > div:nth-child(1)
{
	margin-top:5vh;
}
#dialogbox
{
	width:90%;
	min-width : 260px;
	max-height:95vh;
	margin: 0 auto;
	background-color:#ffc107;
}
#dialogbox > div:nth-child(1)
{
	padding : 10px 5px;
	text-align : right;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}
#dynamic2
{
	margin : 0;
	padding: 0;
}
#overlay2
{
	z-index:3;
	width:100%;
	min-height:100vh;
	position:fixed;
	top:0;
	bottom:0;
	background-color:rgba(0,0,0, 0.7);
	overflow-y:scroll;
}
#overlay2 > div:nth-child(1)
{
	margin-top:5vh;
}
#dialogbox2
{
	width:100%;
	min-width : 360px;
	/*max-height:95vh;*/
	margin: 0 auto;
	background-color:#ffc107;
}
#dialogbox2 > div:nth-child(1)
{
	padding : 10px 5px;
	text-align : right;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}
#dialog2
{
	padding-bottom : 25px;
}
content
{
	display:block;
	min-height : calc(100vh - 210px);
	padding : 5px;
	padding-bottom : 0;
	background-color : #ffc107;
	line-height:40px;
	/*background-color : #8E5;
	background-color : #F0F8FF;
	line-height:40px;
	background-image : linear-gradient(to bottom, #F0F8FF 97%, #4567D9 100%);
	background-size:40px 40px;
	background-position:0 5px;*/
}
#wrapper
{
	width:960px;
	min-height:100%;
	margin:0 auto;
}
.container-form
{
	display:flex;
	flex-wrap:wrap;
}
.child-container-form-left
{
	flex-basis:calc(25% - 10px);
	margin-right:10px;
	min-width:100px;
}
.child-container-form-right
{
	flex-basis:calc(75% - 10px);
	min-width:100px;
}
/*---------------- scroller elem start -----------------*/
.display-scrolling
{
	font-size : 12px;
}
.scroller-top
{
	display:flex;
}
.scroller-top .scroller-top-left
{
	background-color:#d9534f;
	color:#fff;
	border-top-left-radius:7px;
	border-right:1px solid red;
	padding : 0 5px;
}
.scroller-top .scroller-top-right
{
	flex:1;
	overflow-x:hidden;
}
.scroller-top .scroller-top-right .row-right-top
{
	position : relative;
	z-index : 2;
}
.scroller-top .scroller-top-right .row-right-top .cell-right-top
{
	border-left:1px solid red;
	background-color:#d9534f;
	color:#fff;
	word-wrap:break-word;
	padding : 0 5px;
}
.scroller-top .scroller-top-right .row-right-top .cell-right-top:last-child
{
	border-top-right-radius:7px;
}
.scroller-bottom
{
	display:flex;
	overflow-y:hidden;
}
.scroller-bottom .scroller-bottom-left .column-left-bottom
{
	position:relative;
	z-index : 2;
}
.scroller-bottom .scroller-bottom-left .column-left-bottom .cell-left-bottom
{
	border-right:1px solid red;
	word-wrap:break-word;
	cursor:pointer;
	padding : 0 5px;
}
.scroller-bottom .scroller-bottom-right
{
	flex:1;
	overflow:auto;
}
.scroller-bottom .scroller-bottom-right .row-right-bottom,
.scroller-top .scroller-top-right .row-right-top
{
	display:flex;
}
.scroller-bottom .scroller-bottom-right .row-right-bottom .cell-right-bottom
{
	border-left:1px solid red;
	word-wrap:break-word;
	padding : 0 5px;
}
.cell-left-bottom:nth-child(odd),
.row-right-bottom:nth-child(odd) .cell-right-bottom,
.single-column-scroll:nth-child(odd)
{
	background-color : #5bc0de;
}
.cell-left-bottom:nth-child(even),
.row-right-bottom:nth-child(even) .cell-right-bottom,
.single-column-scroll:nth-child(even)
{
	background-color : #F0F8FF;
}
/*---------------- scroller elem end -----------------*/
/*---------------table fixed left start -------------*/
.tabel-biasa
{
	border: 1px solid black;
    table-layout: fixed;
}
.tabel-biasa th,
.tabel-biasa td
{
	border: 1px solid black;
	border-collapse: collapse;
	padding : 0 5px;
}
/*---------------table fixed left end -------------*/

footer{
	display:block;
	min-height : 100px;
	width: calc(100% - 10px);
	padding : 5px;
	background-image: radial-gradient(#222 70%,#666  100%);
	background-size : 5px 5px;
	border-radius :15px;
	margin-top:40px;
	color : #ccc;
}
@media screen and (max-width:959px){
	#wrapper{
		width:100%;
	}
}
@media screen and (max-width:799px){
	
}
@media screen and (max-width:619px){
	
}
@media screen and (max-width:320px){
	#wrapper{
		width : 320px;
	}
}