body {
	font-size: 16px;
	color: #000;
	background-color: #fff;
}

#header-nav { /* Navigation bar */
	background-color: #DEE;
	border-radius: 20px;
	border: 2px solid #BCC;
	margin-bottom: 15px;
}

#logo-img { /* Logo */
	background: url("../img/logo_md.png") no-repeat;
	width: 71px;
	height: 55px;
	margin: 5px;
}
.navbar-brand h1 { /* Name */
	color: #259;
	font-size: 1.8em;
	font-weight: bold;
	text-shadow: 1px 2px 3px #424;
	margin: 15px;
	line-height: .75;
}
.navbar-brand h2 { /* Department */
	color: #831;
	font-size: 1.2em;
	font-weight: bold;
	margin: 15px;
	line-height: .75;
}
.navbar-brand a:hover, .navbar-brand a:focus { /* Remove underlines */
	text-decoration: none;
}
.navbar-brand p { 
	color: #F00;
	font-size: 1em;
	font-weight: bold;
	margin: 15px;
}

.nav-item a {
	background-color: #8BC;
	margin: 2px;
	text-align: center;
}
.nav-item a:hover {
	background: #ADE;
}

.navbar-header button.navbar-toggler {
	border: 1px solid #8BC;
}
.navbar-header button.navbar-toggler {
	clear: both;
}

nav svg { /* Menu icon */
	width: 1em;
	height: 1em;
	margin: 5px;
	fill: currentColor;
}

/* Body */
span.markR {
	color: #F00;
}
span.markG {
	color: #080;
}
span.markB {
	color: #00F;
}
span.blink {
	animation: blinkEffect 1s ease infinite;
}
@keyframes blinkEffect {
	0% {
		opacity: 0;
		color: #822;
	}
	100% {
		opacity: 1;
		color: #D44;
	}
}

div img {
	margin-top: 0px;
	margin-bottom: 20px;
}

div img.float {
	float: right;
	margin-left: 10px;
}
sup {
	color: #F36;
	font-style: italic;
	font-weight: bold;
}

/* Peep reservation table */
@media screen and (max-device-width: 600px) { /* Smart phone */
	div.frm{
	  pointer-events: none;
	  style=border: none;
	  width: 200px;
	  height: 1000px;
	  margin-top: 0px;
	  overflow: hidden;
	  position: absolute;
	}
	div.frm iframe {
	  pointer-events: none;
	  pointer-events: none;
	  style=border: none;
	  width: 220px;
	  height: 1050px;
	  margin-top: -378px;
	  transform-origin: 0% 0%;
	  transform: scale(1, 0.8);
	}
	/*div.box{
	  transform: translate(52px, 65px);
	  width: 140px;
	  height: 830px;
	  background-color: #ccc2;
	  border: none;
	  margin-bottom: 100px;
	  position: relative;
	}*/
}
@media screen and (min-device-width: 601px) and (max-device-width: 1024px) { /* Tablet */
	div.frm{
	  pointer-events: none;
	  style=border: none;
	  width: 200px;
	  height: 1000px;
	  margin-top: 0px;
	  overflow: hidden;
	  position: absolute;
	}
	div.frm iframe {
	  pointer-events: none;
	  style=border: none;
	  width: 220px;
	  height: 1050px;
	  margin-top: -378px;
	  transform-origin: 0% 0%;
	  transform: scale(1, 0.8);
	}
	/*div.box{
	  transform: translate(75px, 70px);
	  width: 135px;
	  height: 1830px;
	  background-color: #ccc2;
	  border: none;
	  margin-bottom: 100px;
	  position: relative;
	}*/
}
@media screen and (min-device-width: 1025px) { /* PC */
	div.frm{
	  pointer-events: none;
	  style=border: none;
	  width: 200px;
	  height: 1000px;
	  margin-top: 0px;
	  overflow: hidden;
	  position: absolute;
	}
	div.frm iframe {
	  pointer-events: none;
	  style=border: none;
	  width: 220px;
	  height: 1050px;
	  margin-top: -378px;
	  transform-origin: 0% 0%;
	  transform: scale(1, 0.8);
	}
	/*div.box{
	  transform: translate(53px, 40px);
	  width: 150px;
	  height: 390px;
	  background-color: #ccc4;
	  border: none;
	  margin-bottom: 100px;
	  position: relative;
	}*/
}


div h2 {
	color: #831;
	font-size: 24px;
	font-weight: bold;
	margin-top: 15px;
}
div h3 {
	color: #002;
	font-size: 18px;
	font-weight: bold;
}
div h4 {
	display: table-cell;
	color: #022;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	background-color: #E40;
	line-height: 120%;
	padding: 0px;
}
div h2#reserve a { /* Online reservation */
	background-color: #FE3;
	border: 1px solid #DA1;
	border-radius: 5px;
	color: #000;
	padding: 5px 10px 5px 10px;
}
div h2#febrile a {	/* Febrile consultation */
	background-color: #F42;
	border: 1px solid #D20;
	border-radius: 5px;
	color: #000;
	padding: 5px 10px 5px 10px;
}
div h2#queue a.active { /* Online queuing */
	background-color: #2CE;
	border: 1px solid #1BD;
	border-radius: 5px;
	color: #000;
	padding: 5px 10px 5px 10px;
}
div h2#queue a.inactive { /* Online queuing */
	background-color: #28A;
	border: 1px solid #156;
	border-radius: 5px;
	color: #444;
	padding: 5px 10px 5px 10px;
}
div h2#telemed a { /* Telemedicine */
	background-color: #AC4;
	border: 1px solid #8A2;
	border-radius: 5px;
	color: #000;
	padding: 5px 10px 5px 10px;
}
div h2#vaccine a {	/* Vaccine */
	background-color: #68C;
	border: 1px solid #48A;
	border-radius: 5px;
	color: #000;
	padding: 5px 10px 5px 10px;
}
div h2#interview a { /* Interview sheet */
	background-color: #7CC;
	border: 1px solid #5AA;
	border-radius: 5px;
	color: #000;
	padding: 5px 10px 5px 10px;
}

div#milkbank { /* Milk Bank */
	font-size: 24px;
	font-weight: bold;
	margin-top: 15px;
	background-color: #F88;
	border: 1px solid #D66;
	border-radius: 5px;
	padding: 5px 10px 5px 10px;
	width: 260px;
	a {
		color: #000;
	}
	a:hover, a:focus {
		text-decoration: none;
	}
	a svg { /* Button icon */
		width: 1em;
		height: 1em;
		margin-bottom: 6px;
		margin-right: 6px;
		fill: currentColor;
	}
}

div h2#back a { /* Back to index */
	background-color: #999;
	border: 1px solid #777;
	border-radius: 3px;
	color: #000;
	padding: 3px 6px 3px 6px;
 }

div h2 a:hover, div h2 a:focus {
	text-decoration: none;
}
div h2 a svg { /* Button icon */
	width: 1em;
	height: 1em;
	margin-bottom: 6px;
	margin-right: 6px;
	fill: currentColor;
}
button.btn-primary { /* Accordion button */
	/*background-color: #8BC;
	border: 1px solid #048;*/
	padding: 2px;
	margin-bottom: 15px;
}
button.btn-danger { /* Verify button */
	font-size: 24px;
	font-weight: bold;
	padding: 2px;
	margin-bottom: 15px;
}
div#collapseDetail div.card {
	width: 360px;
	background-color: #AFF;
	padding: 5px;
	margin-bottom: 15px;
}
div#collapseDetailN div.card {
	width: 340px;
	background-color: #FFA;
	padding: 5px;
	margin-bottom: 15px;
}
div#collapseSoftbank div.card {
	background-color: #CCC;
	padding: 5px;
	margin-bottom: 15px;
}
div#collapseYmobile div.card {
	background-color: #FAA;
	padding: 5px;
	margin-bottom: 15px;
}

div .table.table-dark tr.thin { /* Thin row */
	line-height: 10px;
}
div .table.table-dark td, div .table.table-dark th {
	padding: 5px;
	text-align: center;
}
div .table.table-dark td.markG { /* Marked table */
	background-color: #572;
}
div .table.table-dark td.markR { /* Marked table */
	background-color: #602;
}
div .table.table-dark td.markB { /* Marked table */
	background-color: #046;
}

div.container table.status thead th {
	padding: 8px;
	text-align: center;
}
div.container table.status tr td {
	padding: 8px;
	text-align: center;
}
div.container table.status .table-bg {
	border: 1px solid #BBB;
	background-color: #DDD;
}
div.container table.status .table-am {
	border: 1px solid #DA8;
	background-color: #FCA;
}
div.container table.status .table-pm {
	border: 1px solid #99D;
	background-color: #BBF;
}

div .border {
	padding: 5px;
	font-size: 14px;
}

div .card {
	text-align: left;
	background-color: #FCC;
	padding-top: 0px;
	padding-bottom: 0px;
}
div .card-body {
	padding-top: 10px;
	padding-bottom: 10px;
}
div.watermark {
	background-image: url("../img/wm.png");
	padding: 15px;
}

form.form-inline {
	-ms-flex-flow: nowrap;
	flex-flow: nowrap;
}

ul {
	padding-left:25px;
}
ol.list-group-numbered li {
	font-weight: bold;
	color: #000;
}
ol.list-group-numbered li ul {
	font-weight: normal;
	color: #000;
}
li.list-group-item {
	font-weight: bold;
}
li.list-group-item li {
	font-weight: normal;
}
li.list-group-item ul img {
	float: right;
}
li article {
	font-weight: normal;
}
ol {
	padding-left:25px;
}

select#doclist {
	margin: 5px;
	border: 2px solid #662;
	height: 40px;
	font-size: 20px;
	background-color: #884;
	color: white;
	text-align: left;
}


/* Footer */
footer {
	background-color: #8A2;
}
footer p {
	color: #FFF;
	font-size: 0.8em;
	margin-bottom: 0px;
}
footer a {
	background-color: #8BC;
	border: 1px solid #69A;
	border-radius: 5px;
	margin-top: 7px;
	color: #000;
}

div.bible {
	border: 3px solid #844;
	border-radius: 10px;
	background-color: #A44;
	padding: 3px;
}
div.bible blockquote {
	border-radius: 5px;
	background-color: #FFE;
	margin: 0px;
	font-size: 14px;
}
div.bible p {
	background-color: #A44;
	margin: 0px;
	text-align: right;
	font-size: 12px;
	color: #FFF;
}

/* Inventory */
ul.today {
	background-color: #FDE;
}