/*
{
	margin:0px;
	padding:0px;
}*/
h1 
{
	color: #2c3e50;
}
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;
	background-color: transparent;   /* transparent background */
    border: none;                    /* remove default border */
    border-bottom: 2px dotted #000;  /* dotted underline */
    outline: none;                   /* remove focus outline */
    padding: 5px;
    font-size: 16px;
}
input[type="text"]::placeholder,input[type="password"]::placeholder
{
    color: #aaa;                     /* placeholder color */
}
input[type="text"]:focus,input[type="password"]:focus
{
  border-bottom: 2px dotted #007BFF; /* blue dotted underline on focus */
}
/*
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");
}
*/
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;
}
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 : transparent;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='20'><circle cx='1' cy='19' r='1' fill='black'/></svg>");
    background-size: 4px 20px;
	background-position:0 0;
}
textarea:active,textarea:focus
{
	outline : none;
}
textarea:disabled
{
	background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' style='width:4px;height:20px;'><circle cx='1' cy='19' r='1' fill='grey' /></svg>");
}
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 : #0077b6;
	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: Monospace, Helvetica, Arial, sans-serif;
	padding : 0px 5px;
	width : calc(100% - 10px); /* 10px padding input + 2px border input */
	max-width:290px;
	line-height:20px;
	/*background-color : #B9D9EB;
	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");
}
html, body {
  height: 100%;
  margin: 0;
}
body
{
	/*width:100%;
	height:100%;*/
	margin: 0;
	padding: 0;
	font-family: Monospace, Helvetica, Arial, sans-serif;
	color: #333;
	background: linear-gradient(135deg, #e0f7fa, #f4f6f9);
	background-color: #f4f6f9;
	font-size: 16px;
}
#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:50%;
	min-width : 260px;
	max-height:95vh;
	margin: 0 auto;
	background-color:#B9D9EB;
}
#dialogbox > div:nth-child(1)
{
	padding : 10px 5px;
	text-align : right;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
}
#wrapper
{
	height:100%;
	display: flex;
    flex-direction: column;
	margin : 0;
    line-height: 1.6;
}
header {
	color: #2c3e50;
	padding: 20px;
	text-align: center;
}
content
{
	flex: 1; /* pushes footer down */
	display:block;
	/*min-height : calc(100vh - 210px);*/
	/*background-color : #B9D9EB;*/
    max-width: 960px;
	/*min-height:100%;*/
    margin: 0 auto;
	padding : 10px;
	/*line-height:40px;*/
}
.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;
}
footer 
{
	text-align: center;
	padding: 20px;
	color: #fff;
	margin-top: 40px;
}
header, footer 
{
	background: linear-gradient(
	to bottom,
	rgba(173, 216, 230, 0.7),  /* light aqua */
	rgba(70, 130, 180, 0.7)    /* steel blue */
	);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px); /* Safari support */
	border: 1px solid rgba(255, 255, 255, 0.3);
	box-shadow: inset 0 1px rgba(255,255,255,0.6),
				0 4px 20px rgba(0,0,0,0.2);
	color: #2c3e50;
	text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
/* Optional: add a glossy highlight strip */
header::after, footer::after 
{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 40%;
	background: linear-gradient(
	to bottom,
	rgba(255,255,255,0.4),
	rgba(255,255,255,0)
	);
	border-radius: inherit;
	pointer-events: none;
}

.login-form {
	position: relative;
	background: linear-gradient(
	to bottom,
	rgba(173, 216, 230, 0.6),   /* light aqua */
	rgba(70, 130, 180, 0.6)     /* deeper blue */
	);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px); /* Safari support */
	/*background-color: #fff;*/
	border: 1px solid rgba(255, 255, 255, 0.3);
	box-shadow: inset 0 1px rgba(255,255,255,0.6),
				0 4px 20px rgba(0,0,0,0.25);
	border-radius: 12px;
	padding: 20px;
	max-width: 400px;
	margin: auto;
	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
/* Glossy highlight strip */
.login-form::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 35%;
	background: linear-gradient(
	to bottom,
	rgba(255,255,255,0.4),
	rgba(255,255,255,0)
	);
	border-radius: inherit;
	pointer-events: none;
}
.login-form h2 {
	margin-bottom: 20px;
	text-align: center;
	color: #2c3e50;
}
.login-form label {
	display: block;
	margin-bottom: 8px;
	font-weight: bold;
}
/* Input fields */
.login-form input {
	background: linear-gradient(
	to bottom,
	rgba(255,255,255,0.7),
	rgba(230,245,255,0.6)
	);
	width: calc(100% - 20px);
	border: 1px solid rgba(255,255,255,0.4);
	border-radius: 6px;
	padding: 10px;
	margin-bottom: 15px;
	color: #000;
	box-shadow: inset 0 1px 2px rgba(255,255,255,0.8),
				0 2px 6px rgba(0,0,0,0.15);
	transition: all 0.3s ease;
}
.login-form input:focus {
	outline: none;
	border-color: rgba(70,130,180,0.8);
	box-shadow: 0 0 8px rgba(70,130,180,0.6);
}
/* Submit button */
.login-form button {
	background: linear-gradient(
	to bottom,
	rgba(135,206,250,0.9),   /* light sky blue */
	rgba(70,130,180,0.9)     /* steel blue */
	);
	/*background-color: #2c3e50;*/
	border: 1px solid rgba(255,255,255,0.4);
	border-radius: 6px;
	width: 100%;
	padding: 12px;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	text-shadow: 0 1px 2px rgba(0,0,0,0.6);
	box-shadow: inset 0 1px rgba(255,255,255,0.6),
				0 3px 8px rgba(0,0,0,0.25);
	transition: all 0.3s ease;
}

.login-form button:hover {
	background: linear-gradient(
	to bottom,
	rgba(173,216,230,1),
	rgba(70,130,180,1)
	);
	/*background-color: #1a252f;*/
	box-shadow: 0 0 12px rgba(135,206,250,0.8);
}
.login-form button:active {
	transform: scale(0.98);
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}
.password-wrapper {
	position: relative;
}
.password-wrapper input {
	width: 100%;
	padding-right: 40px; /* space for the icon */
	box-sizing: border-box;
}
.toggle-password {
	position: absolute;
	right: 10px;
	top: 35%;              /* slightly higher than center */
	transform: translateY(-50%);
	cursor: pointer;       /* pointer cursor */
	font-size: 18px;
	user-select: none;
}

/*---------------- 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 -------------*/
/*---------------------odontogram start-----------------*/
table#odontogram-ra,table#odontogram-rb, table#apel-gigi
{
	border-collapse : collapse;
	margin : 0 auto;
}
table#apel-gigi td
{
	height : 14px;
	width : 25px;
	line-height : 14px;
	vertical-align : center;
	text-align : center;
	font-size : 12px;
}
table#apel-gigi tr:nth-child(3),
table#apel-gigi tr:nth-child(8),
table#apel-gigi tr:nth-child(12),
table#apel-gigi tr:nth-child(17)
{
	height : 100%;
	line-height : 100%;
}
table#apel-gigi tr td.atas-bawah:nth-child(9)
{
	width : 2px;
	border-left:1px solid black;
	border-right:1px solid black;
}
table#odontogram-ra td,table#odontogram-rb td
{
	border : 1px solid #000;
	vertical-align : center;
	font-size : .8em;
	line-height:1em;
}
table#odontogram-ra td span,table#odontogram-rb td span
{
	display : none;
}
table#odontogram-ra td:nth-child(4), table#odontogram-rb td:nth-child(4)
{
	text-align : right;
}
table#apel-gigi tr:nth-child(4),
table#apel-gigi tr:nth-child(12)
{
	border-bottom : 1px solid black;
}
table#apel-gigi tr:nth-child(8)
{
	border-bottom : 3px double black;
}
table#apel-gigi svg
{
	border : 1px solid #000;
	height : 18px;
	width : 21px;
	cursor : pointer;
}
table#apel-gigi svg polygon
{
	height : 18px;
	width : 21px;
	stroke : #000;
	stroke-width : 0.5px;
	fill : none;
}
table#apel-gigi svg:hover
{
	background-color : #faa;
}
table#apel-gigi svg.tambahan:hover
{
	background-color : transparent;
}
table#apel-gigi svg line
{
	stroke : #000;
	stroke-width : 2px;
}
table#apel-gigi svg line.merah-muda
{
	stroke : #f50;
	stroke-width : 1px;
}
/*---------------------odontogram end-----------------*/
@media screen and (max-width:959px){
	#wrapper{
		width:100%;
	}
}
@media screen and (max-width:799px){
	#dialogbox{
		width:80%;
	}
}
@media screen and (max-width:619px){
	#dialogbox{
		width:88%;
	}
}
@media screen and (max-width:320px){
	#wrapper{
		width : 320px;
	}
	#dialogbox{
		width:95%;
	}
}