* {border:0; padding:0; margin:0; box-sizing:border-box; border-collapse:collapse; text-align:left; vertical-align:baseline; line-height:1.32; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size:1.05rem; font-weight:400; color:#000; text-decoration:none; list-style-type:none; -moz-hyphens:auto; hyphens:auto; text-rendering:optimizelegibility; -moz-osx-font-smoothing:grayscale;}

body {overflow-y: scroll;}

small, small * {font-size:0.85rem; font-weight:450;}
b, strong, b *, strong * {font-weight:600;}
a {color:mediumblue; font-weight: 600;}
a:hover, a:hover * {color:red;}
hr {margin:1rem 0; border-top:1px solid #ccc;}
body {background-color:#eee;}
code, code * {font-family: monospace;}
summary {cursor: pointer;}
a, input, textarea, button, .btn, label, details.roomselect nav, .box, b {transition-duration:0.2s;}

h2 {font-size:2rem;font-weight:700; margin:0 0 2rem 0;}
h3 {font-weight: 600;font-size:1.8rem; margin:0 0 0.4rem 0;}
h2 *, h3 * {line-height: 1;}
h4, h4 * {line-height: 1; font-size: 1.3rem; font-weight: 650;}

header {position: relative;border-bottom:2px solid #000;padding:0 0 1rem 0; margin:0 0 2rem 0; }
header h1 a {color: #000;}
header nav, header nav * {line-height: 1;}
header nav {position: absolute; bottom: 1rem; right: 0;}
header nav a {margin: 0 0 0 1rem;}

/*tables*/
table {line-height: 1; width:100%;}
th, td {border:1px solid #ccc; padding:10px; transition-duration: 0.2s; vertical-align: top;}
th {background-color:#eee; border-bottom:2px solid #000;}
th, th * {font-weight: 600;}
th small {font-weight: 450; opacity: 0.5;}
tr:nth-of-type(2n) td {background-color:#fafafa; border: 1px solid #aaa;}
tr:hover td {background-color:lightyellow; border-bottom-color:#222;}
td.selector {position: relative;}
/*.datepick {max-width: 140px;}*/

table.emptyend tr th:last-of-type, table.emptyend tr td:last-of-type {border:0; background-color:transparent;}
table.emptyend tr td:last-of-type .btn {filter: saturate(0); opacity: 0.35; margin-bottom:10px;}
table:hover tr td:last-of-type .btn {filter: saturate(1);}
table:hover tr:hover td:last-of-type .btn {opacity: 0.7;}
table:hover tr:hover td:last-of-type:hover .btn {opacity: 1;}
section#home table {margin-bottom: 3rem;}

section#home table tr.no-show td {background-color: pink; border-color: red;}
section#home table td a b {color: mediumblue; font-weight: 760;}
section#home table td a:hover, section#home table td a:hover * {color: red !important;}


/*forms*/
form, label, fieldset {display:block; position:relative;}
form {padding-bottom: 80px;}
label[disabled] {opacity:0.5; cursor:not-allowed;}
label:not(:last-of-type){margin-bottom:0.8rem;}
input, textarea {border:1px solid #aaa; padding:12px; width:100%; border-radius:3px 3px; margin-top:10px;}
table input, table textarea {margin-top: 0;}
input[type=text], input[type=password], input[type=email], input[type=search] {line-height: 1; min-height: 44px;}
label input[type=checkbox], label input[type=radio] {width:auto; position:absolute; top:3px; left:1px;}
label input[type=checkbox] + p, label input[type=radio] + p {margin-left:22px;}
textarea {min-height:200px; min-width:100%; max-width:100%;}
textarea:focus {background-color:lightyellow;}
select {border:1px solid #ccc; border-radius: 3px 3px; width:100%; padding:5px 5px;}
label.f1 select {margin: 10px 0 0 0; padding: 12px;}
label.f1:last-of-type select {width: calc(100% - 10px); margin-left: 10px;}
input[type=text]:hover, input[type=password]:hover, input[type=search]:hover, input[type=email]:hover {border-color:#999;}
input[type=text]:focus, input[type=password]:focus, input[type=search]:focus, input[type=email]:focus {background-color:lightyellow; border-color:#333;}
input[type=submit], button {color:#fff; font-weight:600; width:auto; border:0; background-color:darkblue; margin:1rem 0 0 0; padding:12px 1.5rem; text-align:center; display:inline-block; border-radius:3px 3px; cursor:pointer; font-size:1.3rem; line-height: 1;}
input[type=submit]:hover, button:hover, input[type=submit]:focus, button:focus {cursor:pointer; background-color:blue;}
input[type=submit]:hover {box-shadow:0 0 7px rgba(0,0,255,0.6);}
button[disabled] {background-color:#aaa; color:#666; cursor:not-allowed;}
input[type=submit].br {position: absolute; bottom: 0; right: 0; margin: 0;}
form label h3 small {opacity: 0.65; font-weight: 400;}
input[data-toggle=datepicker], textarea[data-toggle=datepicker] {min-width: 0; min-height: 0; text-align:center;}
textarea[data-toggle=datepicker], div[data-toggle=datepicker] {display: none;}
th.gn {min-width: 200px;}
th.r {width: 130px;}

main {line-height: 1; padding:6rem 6rem; background-color:#fff; border-radius: 3px 3px; margin:2rem auto; max-width: 55%; min-width:800px; min-height:700px;}
main nav#tabs {overflow: hidden; margin: 0 0 -1px 0; position: relative;}
main nav#tabs a {border: 1px solid #999; background-color: #999; color: #eee; display: inline-block; padding: 0.9rem 1.35rem; border-bottom: 0; margin: 0 10px 0 0;}
main nav#tabs a:hover {color: #fff; background-color: #444; border-color: #444;}
main nav#tabs a.active {color: #111; border-color: #ccc; background-color: #fff;}
main nav#tabs a.btn {margin: 0; position: absolute; bottom: 1rem; right: 0; padding: 7px; border: 0; background-color: darkblue;}
main nav#tabs a.btn:hover {background-color: blue; color: #fff;}
main section.content {padding: 1rem 1.2rem; border: 1px solid #ccc; min-height: 600px;}

details.example {margin: 10px 0 0 0;}
details.example summary {margin: 0 0 6px 0;}
details.example summary b {color: mediumblue;}
details.example summary:hover b {color: red;}
details.example summary:after {content: "⌄"; display: inline-block; color: mediumblue; font-weight: 600; margin: 0 5px;}
details.example summary:hover:after {color: red;}
details.example[open] summary b {color: red;}
details.example[open] summary:after {content: "˄";color: red;}



/*Miscellaneous*/
.mid {max-width: 50%; margin:0 auto; text-align: center;}
.flex {display:flex; width:100%; align-items:flex-start;}
.f1 {flex:1;}
.f1:not(:last-of-type) {margin-right: 1rem;}
.nm, .box.nm {margin: 0;}
.warn:hover {color:red !important; transition-duration:0.23s;}
.tr, .tr * {text-align:right;}
.tc {text-align:center;}
.warn, .warn * {color:red;}
td.warn, td.warn *, td .warn {font-weight:600;}
tr:hover td.warn, tr:hover td.warn * {color:red;}
.btn {display:inline-block; padding:10px 1rem; color:#fff; font-weight:700; background-color:darkblue; cursor:pointer; border-radius:3px 3px; font-size:1rem; margin:0 10px 10px 0; text-align: center;}
.btn:hover {background-color:blue; color:#fff;}
.btn-small {padding:6px 7px 7px 7px; margin:0; line-height: 1; font-weight: 600; font-size:1.1rem;}
.btn-small:not(:last-of-type){margin:0 10px 0 0;}
.nh {hyphens:none;}
.btn-orange {background-color:sandybrown; color:saddlebrown;}
.btn-orange:hover {background-color:saddlebrown; color:#fff;}
.btn.warn {background-color:darkred;}
.btn.warn:hover {background-color:red; text-shadow: 0 1px 1px rgba(0,0,0,0.4); color:#fff !important; box-shadow: 0 0 5px red;}
.btn-empty {background-color:#fafafa; border:1px solid #aaa;}
.btn-empty:hover {background-color:#efefef; border-color:#777;}
.btn.warn.btn-empty {background-color:#ffefef !important; border-color:red;}
.no-anim, .no-anim * {transition-duration:0s;}

.btn-checkin, .btn-del, .btn-edit {border: 1px solid #ccc; display: inline-block; line-height: 1; border-radius: 3px 3px; padding: 10px;}
.btn-checkin {border-color: #333;}
.btn-del {background-color: #eee; border: 1px solid red; margin-right: 10px;}
.btn-edit {border-color: green; margin: 0 10px 0 0; background-color: #e9ffe9;}
.box {margin: 0 0 3rem 0; border: 1px solid #ccc; background-color: #fafafa; padding: 1rem; border-radius: 3px 3px;}
.box:hover {background-color: #fcfcfc; border-color: #aaa;}
.box h2 {font-weight: 600;}
.box.tc * {text-align: center;}
a.checking-in {opacity: 0.3 !important;}

@media print {
html, body {background-color:transparent;}
.btn, .btn-edit, .btn-del, .btn-checkin {display: none !important;}

#tabs a {background-color: #000; color: #fff;}
#tabs a.active {background-color: #fff; color: #000;}

main
	{
	padding: 0;
	margin: 0; 
	width: 100%;
	max-width: 100%;
	min-width: 100%;
	min-height: 700px;
	}
}