:root {
  /* set color-scheme to switch between light or dark */
  --light-bg: #f7f7f7;
  --light-color: #202020;
  --light-border: #cccccc;
  --dark-bg: #202020;
  --dark-color: #f7f7f7;
  --dark-border: #404040;
  
  --Grey: #808080;
}

.led-yel { color:#fffff8;}
.light { color-scheme: light;}
.dark { color-scheme: dark;}
@font-face { font-family:led; src: url(../fonts/scoreboard.otf.woff2);}
body { box-sizing: border-box; margin:0 auto;
    background-color: var(--light-bg); color: var(--light-color); border-color:var(--light-border);
    font-family: Roboto, Segoe UI, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size:16px; line-height: 1.5;}

.dark-mode { background-color: var(--dark-bg); color: var(--dark-color); border-color:var(--dark-border); }
a { text-decoration:none;}
a:hover { text-decoration:underline;}
img { height: auto; max-width: 100%; vertical-align: middle;}
progress {width:100px;}
/* Classes */
#outer-container { margin:0; padding: 1em; transition: margin-left .5s;
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" height="16px" width="16px" x="0px" y="0px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill="rgb(32,32,32)" d="M0 0V16A16 16 0 0116 0H0"></path></svg>');
    background-repeat: no-repeat; background-size: 16px 16px;}
.modal-container { padding:1rem;}
.row { padding: 6px 0 6px 0;}
.label { color: #565656; margin-bottom: 2px;}
.card { padding: 1rem 2rem; border-radius: 4px; box-shadow: 0 1px 3px #747681;}
.message { padding: 6px 20px; font-size: 1em; color: rgb(40, 40, 40); box-sizing: border-box; margin: 0px;
    border-radius: 3px; width: 100%; overflow: auto;}
.error { background-color: #fb817c; border: 1px solid #e46b66;}
.success { background-color: #48e0a4; border: #40cc94 1px solid;}
.validation-message { color: #e20900;}
.font-bold { font-weight: bold;} .font-italic { font-style:italic;}
.font24 {font-size:24px;}
.font-led { font-family: led; font-size:1.5rem; font-weight: bold; line-height:1.25;}
.display-none {display:none;} .inline-block {display:inline-block;}

.float-left {float:left;} .float-right {float:right;}
.text-left {text-align:left; padding-left:.5em;} .text-center {text-align:center;} .text-right {text-align:right;}
.relative { position: relative;}
.sticky { position:sticky; top:0;}
.align-top { position:absolute; top: 6px;}
.bg-green {background-color:green;}
.bg-red {background-color:hsl( 0, 50%, 50%);}

.text-red { color:#ff6633;}
.text-green {color:#33cc66;}
.text-grey {color:var(--Grey);}

.led-red {color:#ff3300;}
.led-green {color:#00ff33;}
.led-blue {color:#66ccff;}


.width-auto {width:auto;} .width-25 { width:25%;} .width-33 { width:33%;} .width-50 { width:50%;} .full-width { width: 100%;} 
.w-48 { width:48px;} 
.cursor-pointer { cursor: pointer;}
.m-6 {margin:6px;} .ml-8 {margin-left:8px;} .mr-8 {margin-right:8px;} .mr-20 {margin-right:20px;}
.m-20 { margin: 20px;}
.margin-auto {margin:auto;}
.tile-container { width: 240px; border: #9a9a9a 1px solid; border-radius: 3px; padding: 10px 20px 10px 20px;}
.valign-middle { display:inline; vertical-align: middle;}

/* svg Icons */
svg {overflow:visible; fill:none; vertical-align:-.125em; stroke-linecap:round; stroke-linejoin:round;}

svg.icon { height:24px; max-width:48px; viewBox:0 0 48 24; stroke-width:2; stroke:currentColor;}
svg.icon24 { height:24px; width:24px; max-width:48px; stroke-width:2; stroke:currentColor;}
svg.icon32 { height:32px; width:32px; stroke-width:2; viewBox:0 0 24 24; fill:none; stroke:currentColor;}
svg.icon48 { height:48px; width:48px; stroke-width:3; viewBox:0 0 24 24; fill:none; stroke:currentColor;}


/* The Modal (background) */
.modal {
  display:none; position:fixed; z-index:1; padding-top: 100px; /* Location of the box */
  left:0; top:0; width:100%; height:100%; overflow:auto; /* Scroll if needed */
  background-color: var(--dark-bg); /* Fallback color */ background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}
/* Modal Content */
.modal-content { width:90%; min-height:96px; background-color: #fefefe; margin:auto; padding:0; 
    border:1px solid #808080; border-radius:1.5em; box-shadow:inset 0 0 1em #808080;}

/* The Close Button */
.close { font-size:24px; padding:12px 16px; color:#808080; float:right; margin:.5em .5em 0 0; border:3px solid #808080; border-radius:12px;}
.close:hover, .close:focus { color:#000; text-decoration:none; cursor:pointer;}

/* Top Navbar */
.navbar { overflow: hidden; background-color: #112233;}
.navbar a { color:#6699ff; float:left; font-size:1.5rem; text-align: center; padding: 12px 16px; text-decoration: none;}
.navbar a:hover, .dropdown:hover .dropbtn, .dropbtn:focus { background-color:#555555;}

.dropdown { float:right; overflow:hidden;}

.dropdown .dropbtn { cursor:pointer; border:none; outline:none; padding: 10px 16px; margin: 0;}

.dropdown-content { display:none; position:absolute; background-color:#eeeeff; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}
#weatherDropdown { width:150px; background-color:#eeeeff; box-shadow:inset 0 0 16px white;}

#userDropdown { width:150px; background-color:#fff0cc; box-shadow:inset 0 0 16px #aa8866;}
.dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; }
.dropdown-content a:hover { background-color: #ddd;}
.show { display: block;}

.clock { color:#80ffff; font-size:1.5rem;}

#searchBox {height:auto; overflow:hidden; max-height:0; transition: 0.5s;}

/* Side Nav*/

.sidenav { height:100%; width:0; position:fixed; z-index:1; top:60; left:0;
  background-color: #202020; overflow-x:hidden; transition:0.5s; padding-top:48px;}
  
.sidenav a { box-shadow: 0 0 8px #000000 inset;
  background-color: #203040;
  color: #d0d0d0;
  text-shadow: 1px 1px 2px #000000; padding: 4px 12px; text-decoration:none; font-size: 24px; 
  color: #a0a0a0; border-top:1px solid #000000; display: block; transition: 0.3s;}
.sidenav a:hover { color:#f1f1f1; background-color:#405060; cursor:pointer;}
.sidenav a:hover svg { color:#00ff00; background-color:#405060; cursor:pointer;}

.sidenav .closebtn { position:absolute; top:0; right:25px; font-size:36px; margin-left:50px;}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/* Form */
input, textarea, select { box-sizing: border-box; height:initial; font-size:1rem;
	padding: 6px; border: 1px solid #cccccc; border-radius: .25rem;}
input[type="text"], input[type="datetime-local"] { width: 300px;}
input[type="checkbox"] { width:auto; vertical-align:text-bottom;}
textarea { width: 75%; max-width:600px;}
select { display: initial; height: 30px; padding: 2px 5px;}
button, input[type=submit] { padding:8px 12px; font-size:1.5em; font-weight:normal; border-radius:25px;}
	
	.btnSearch { box-shadow:0 0 5px #202020 inset; }
	.btnReset { border: 2px solid #d2d6dd; }
	.search-input { margin-right: 5px; }	

input[type=submit]:hover { background-color: #f7c027;}
::placeholder {	color: #778899;}

label { width:25%; text-align:right; display:inline-block; color:#808080;}
.edit-form label {border-radius:8px; margin:6px 6px 0 6px;}
.edit-form {border-radius:8px; box-shadow:inset 0 0 16px #000000;}
fieldset { border-color:#d0d0d0; border-radius:1em;}
legend { font-size:1.5rem; color:#808080; margin:.5em 1em 0 1em;}

/* Table */
table { width:100%; border:none; border-collapse:collapse; border-spacing:0;}
th { padding: 0.25rem; color:#808080;}
th:hover {color:#339966;}
td { }
tbody td { border-bottom: 1px solid #808080; border-right: 1px solid #e0e0e0;}
thead { border-bottom: 2px solid #808080;}
tfoot td { color:#808080; border-top: 2px solid #808080; padding-top:.75rem;}
table.striped tr:nth-of-type(2n) {opacity:0.75;}
.ccw90 { transform:rotate(-90deg); transform-origin: 50% 25%; margin-left: 0;}


/* Pagination */
	input[type=button].perpage-link { width: auto; font-size:1rem; font-weight:bold; color:#fefefe; text-shadow:1px 1px 2px #000000;
		padding: 5px 10px; border: 2px solid #808080; border-radius: 4px;
		background-color: #5c8572; margin: 0px 5px; }
	input[type=button].perpage-link:hover { color:#fefefe; box-shadow:0 0 2px #000000 inset;
		 border: 2px solid #808080; background-color: #04AA6D; }
	.current-page { width:auto; font-size:1rem; padding:5px 10px; margin: 0px 5px;
		color: #808080; border: 2px solid #808080; border-radius: 4px; }

@media screen and (max-width: 780px) { /* < 780px */
    #outer-container { width: auto;}
    label {	display:block; width:100%; text-align:left; margin-left:.5em;}
}
@media screen and (max-width: 400px) { /* < 400px */
    #outer-container { padding: 0;}
    .tile-container { width: auto;}
    input, textarea, select { width: 100%;}
}

footer {box-sizing:border-box; width:100%; height:44px; padding:4px 12px;
    text-align:center; font-size:.75rem; color:#808080; border-top:1px solid #808080;}
footer a {height:30px; font-size:24px; color:#808080;}