/*
#
# common.css
#
# This contains common css definitions
#
# The order of components is top right bottom left or top/bottom left/right
#
# Copyright 2013-24 Steve Lloyd
#
# Permission is hereby granted, free of charge, to any person obtaining a copy of this software
# and associated documentation files (the "Software"), to deal in the Software without restriction,
# including without limitation the rights to use, copy, modify, merge, publish, distribute,
# sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
# furnished to do so, subject to the following conditions:
#
# The above copyright notice and this permission notice shall be included in all copies or 
# substantial portions of the Software.
#
# THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
# INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
# PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
# FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
# ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
#
#
#===========================================================================
*/
:root, root.light{
  /* light styles here */
  /*
  color-scheme: var(--color-scheme, light);*/
    color-scheme: light;
	--default-bgcolor: #ffffff;
	--default-color: #000000;

  	--cell-text-color: #000000;
  	
	--nav-color: #ffffff;
	--nav-bgcolor: #333333;
	--nav-hover-bgcolor: #4b545f;
	--nav-divider-color: #aaaaaa;
	--nav-border-color: #aaaaaa;
	--help-heading-link-color: #ffffff;
	--heading-bgcolor: #aaaaaa;
	--heading-color: #ffffff;
	
	--table-body-color: #000000;
	--table-body-bgcolor: #eeeeee;
	--table-header-bgcolor: #eeeeee;
	--table-header-color: #000000;
	--table-side-bgcolor: #eeeeee;
	--table-side-color: #000000;
	--table-odd-row-bgcolor: #ffffff;
	--table-even-row-bgcolor: #f0f8ff;
	--table-border-color: #000000;
	--table-editable-bgcolor: #ffffdd;
	--table-editable-color: #000000;
	--table-input-bgcolor: #ffffff;
	--table-input-color: #000000;

	--code-bgcolor: #f5f5f5;
	--code-border-color: #666666;
	--border-color: #666666;
	--dark-border-color: #666666;
	--button-bgcolor: #ffffff;
	--button-color: #000000;
	--button-disabled-bgcolor: #eeeeee;
	--button-disabled-color: #aaaaaa;
	--button-hover-bgcolor: #dddddd;
	--button-hover-color: #000000;
	--button-border-color: #cccccc;
	--box-border-color: #000000;
	--link-color: #3333ff;
	--action-link-color: #3333ff;
	--slider-bgcolor: #6f6f6f;
	
	--ok-bgcolor: #00ff00;
	--ok-color: #00ff00;
	--error-bgcolor: #ff0000;
	--error-color: #ff0000;
	--warning-bgcolor: #ffff00;
	--warning-color: #ffff00;
	--light-error-bgcolor: #ffaaaa;
	--light-warning-bgcolor: #ffffee;

	--inactive-bgcolor: #aaaaaa;
	--partactive-bgcolor: #eeeeee;
	--greyed-bgcolor: #cccccc;
	--accent-color: #ffffff;
	--disabled-bgcolor: #aaaaaa;
	--disable-color: #cccccc;
	
	--help-heading-link-color: #ffffff;
}
  /* system preference is "dark" */
  /*
  @media (prefers-color-scheme: dark) {*/
:root.dark{
    color-scheme: dark;
	--default-bgcolor: #1f2127;
	--default-color: #bfc1c6;

  	--cell-text-color: #ffffff;

	--table-body-color: #bfc1c6;
	--table-body-bgcolor: #3f3f3f;
	--table-header-bgcolor: #2f2f2f;
	--table-header-color: #bfc1c6;
	--table-side-bgcolor: #3f3f3f;
	--table-side-color: #bfc1c6;
	--table-odd-row-bgcolor: #1f2127;
	--table-even-row-bgcolor: #333333;
	--table-border-color: #cccccc;
	--table-editable-bgcolor: #ccad00;
	--table-editable-color: #ffffff;
	--table-input-bgcolor: #939393;
	--table-input-color: #ffffff;

	--code-bgcolor: #3f3f3f;
	--code-border-color: #666666;
	--border-color: #cccccc;
	--dark-border-color: #666666;
	--button-bgcolor: #666666;
	--button-color: #bfc1c6;
	--button-disabled-bgcolor: #eeeeee;
	--button-disabled-color: #aaaaaa;
	--button-hover-bgcolor: #888888;
	--button-hover-color: #ffffff;
	--button-border-color: #eeeeee;
	--box-border-color: #eeeeee;
	--link-color: #aa88ee;
	--action-link-color: #ccccff;
	--slider-bgcolor: #cccccc;
	
	--ok-bgcolor: #009900;
	--ok-color: #00ff7f;
	--error-bgcolor: #aa0000;
	--error-color: #ff6666;
	--warning-bgcolor: #ddaa00;
	--warning-color: #ffff7f;
	--light-error-bgcolor: #ffaaaa;
	--light-warning-bgcolor: #ffffee;

	--inactive-bgcolor: #666666;
	--partactive-bgcolor: #444444;
	--greyed-bgcolor: #444444;
	--accent-color: #ffffff;
	--disabled-bgcolor: #3f3f3f;
	--disable-color: #cccccc;
	
	--help-heading-link-color: #ffffff;
}

.default-bgcolor {background-color: var(--default-bgcolor);}
/*.dark-text-color {color: var(--dark-text-color);}*/
.default-color {color: var(--default-color);}
.ok-bgcolor {
	background-color: var(--ok-bgcolor);
	color: var(--cell-text-color);
}
.ok-color {color: var(--ok-color);}
.error-bgcolor {
	background-color: var(--error-bgcolor);
	color: var(--cell-text-color);
}
.error-color {color: var(--error-color);}
.warning-bgcolor {
	background-color: var(--warning-bgcolor);
	color: var(--cell-text-color);
}
.warning-color {color: var(--warning-color);}
.light-error-bgcolor {color: var(--light-error-bgcolor);}
.light-warning-bgcolor {color: var(--light-warning-bgcolor);}
.inactive-bgcolor {background-color: var(--inactive-bgcolor);}
.partactive-bgcolor {background-color: var(--partactive-bgcolor);}
.greyed-bgcolor {background-color: var(--greyed-bgcolor);}
.table-body-color {color: var(--table-body-color);}
.table-body-bgcolor {background-color: var(--table-body-bgcolor);}
.table-header-bgcolor {background-color: var(--table-header-bgcolor);}
.table-header-color {color: var(--table-header-color);}
.table-header {
	background-color: var(--table-header-bgcolor);
	color: var(--table-header-color);
}
.table-side {
	background-color: var(--table-side-bgcolor);
	color: var(--table-side-color);
}
.table-body {
	background-color: var(--table-body-bgcolor);
	color: var(--table-body-color);
}
.table-side-bgcolor {background-color: var(--table-side-bgcolor);}
.table-side-color {color: var(--table-side-color);}
.table-odd-row-bgcolor {background-color: var(--table-odd-row-bgcolor);}
.table-even-row-bgcolor {background-color: var(--table-even-row-bgcolor);}
.table-border-color {color: var(--table-border-color);}
.accent-color {color: var(--accent-color);}
.disabled-bgcolor {color: var(--disabled-bgcolor);}
.disabled-color {color: var(--disabled-color);}
.help-heading-link-color {color: var(--help-heading-link-color);}
	
* {box-sizing: border-box;}

html, body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
	margin:0;
	padding:0;
	height:100%;
    background-color: var(--default-bgcolor);
    color: var(--default-color);
	accent-color: var(--accent-color);
}
body {
	display: table;
	min-width: 100%;
}

#logo{
	position: absolute;
	top: 5px;
	right: 5px;
}
#school{
    font-size: 12px;
    color: #ffffff;
	position: absolute;
	top: 60px;
	right: 5px;
}
#heading{
    background-color: var(--heading-bgcolor);
    color: var(--heading-color);
    font-size: 36px;
    padding: 15px 20px 0px 20px;
    height: 80px;
}
#title{
    text-align: center;
    width: 100%;
}

#container {
	min-height:100%;
	position:relative;
	margin-left:0px;
	margin-right:0px;
}
#main {
	padding: 10px 10px 40px 10px;
	border-top: 1px solid var(--nav-border-color);
}
#footer{
    background-color: var(--heading-bgcolor);
    color: var(--heading-color);
	position: absolute;
	width: 100%;
    font-size: 11px;
	line-height: 28px;
	bottom: 0px;
    height: 30px;
	padding:0px 10px 0px 10px;
	border-top: 1px solid #000000;
	margin-top: 10px;
}
#announce{
    display: inline-block;
    font-size: 11px;
	margin: 0px 0px 10px 0px;
	padding: 3px;
    border: 1px solid var(--border-color);
}

#greeting{
    font-size: 11px;
    padding: 0px 0px 0px 0px;
}
#preferences {
	position: absolute;
	top: 110px;
	right: 10px;
	display: none;
	padding: 0px 3px 5px 3px;
	background-color: var(--table-side-bgcolor);
    border: 1px solid var(--border-color);
    text-align: center;
}
/*---------- Miscellaneous ----------*/ 

h4 {
	margin: 10px 0px 10px 0px;
}
pre {
	font-family: "Courier New", "Courier", monospace;
}

.slider {
	appearance: none;
	height: 5px;
	background-color: var(--slider-bgcolor);
	border-radius: 2px;
}
/*
textarea {
	background-color: var(--table-input-bgcolor);
    color: var(--table-input-color);
}
*/
/*
select {
	background-color: var(--table-input-bgcolor);
	color: var(--table-input-color);
	border: none;
}
*/
/*---------- Default Table ----------*/ 

table {
    font-size: 12px;
	border-collapse: collapse;
/*    border: 1px;
    cell-spacing:*/
}
table a {
    text-decoration: none;
    color: var(--action-link-color);
}
/*
table a:hover, table a:active {
    background-color: #cccccc;
}
table tr, td, th{
	border: 1px solid var(--table-border-color);
}
*/
tr {
	height: 30px;
}
td {
	padding: 0px 10px 0px 10px;
}
th {
	padding: 0px 10px 0px 10px;
}
/*
td input{
	background-color: var(--table-input-bgcolor);
    color: var(--table-input-color);
    box-shadow: none;
    border-color: var(--table-border-color);
    border: none;
}
*/
/*---------- Table Miscellanea-----------*/

.divider-row {
	height: 5px !important;
	border-width: 1px 0px 1px 0px;
}
.editable {
  background-color: var(--table-editable-bgcolor);
  color: var(--table-editable-color);
}
.editable-border {
	padding-left: 5px !important;
	border: 1px solid var(--table-border-color) !important;
}

/*---------- Plain Table -----------*/

.plain-table{
/*    background-color: var(--main-bgcolor); 
    color: var(--main-color); */
/*	padding: 5px; */
    font-size: 13px;
	border-collapse: collapse;
	border: 0;
}
.plain-table tr {
/*    background-color: var(--main-bgcolor); 
    color: var(--main-color); */
	height: 20px;
	border: 0;
}
.plain-table td {
	padding: 5px 10px 5px 0px;
	border: 0;
}

/*---------- View Table -----------*/

.view-table{
    font-size: 13px;
	border-collapse: collapse;
}
.view-table tr {
	height: 20px;
}
.view-table td {
	padding: 5px 10px 5px 5px;
    border: 1px solid var(--table-border-color);
}
.view-table td:nth-child(1) {
	background-color: var(--table-side-bgcolor);
    color: var(--table-side-color);
	text-align: right;
	vertical-align: top;
}
.view-table td:nth-child(2) {
	background-color: var(--table-body-bgcolor);
	width: 500px;
}

/*---------- Edit Table -----------*/

.edit-table{
    font-size: 13px;
	border-collapse: collapse;
    border: 1px solid var(--table-border-color);
}
.edit-table tbody {
	display: block;
	margin: -1px;
}
.edit-table td {
	padding: 5px 5px 5px 5px;
    border: 1px solid var(--table-border-color);
	background-color: var(--table-body-bgcolor);
    color: var(--table-body-color);
}
.edit-table tr {
	background-color: var(--table-body-bgcolor);
	height: 25px;
	vertical-align: middle; 
}
.edit-table td:nth-child(1) {
	padding-top: 5px;
	background-color: var(--table-side-bgcolor);
    color: var(--table-side-color);
	text-align: left;
}
.edit-table td:nth-child(2) {
	padding-top: 5px;
	background-color: var(--table-body-bgcolor);
    color: var(--table-body-bgcolor);
	text-align: left;
}
.edit-table-required td:nth-child(2) {
	padding-top: 5px;
	background-color: var(--table-side-bgcolor);
    color: var(--table-side-color);
	text-align: center;
}
.edit-table-header tr:nth-child(1) {
	background-color: var(--table-header-bgcolor);
    color: var(--table-header-color);
    font-weight: normal;
}
.edit-table textarea {
	width: 100%;
}

/*---------- Sticky Table ----------*/ 

.sticky-table {
	border-collapse: separate;
	border-spacing: 0; 
}
.sticky-table thead tr:nth-child(1) th { 
	position: sticky;
	top: 0; 
	padding: 0px 10px 0px 10px;
	z-index: 2;
}
.sticky-table thead tr:nth-child(2) th { 
	position: sticky; 
	top: 30px;
	padding: 0px 10px 0px 10px;
	z-index: 2;
}
.sticky-col thead tr:nth-child(1) th:nth-child(1)  {
  z-index: 3;
}
.sticky-col thead tr:nth-child(2) th:nth-child(1)  {
  z-index: 3;
}
.sticky-col thead tr:nth-child(1) th { 
	position: sticky;
	top: 0; 
	left: 0;
	padding: 0px 10px 0px 10px;
	z-index: 2;
}
.sticky-col thead tr:nth-child(2) th { 
	position: sticky; 
	top: 30px;
	left: 0;
	padding: 0px 10px 0px 10px;
	z-index: 2;
}
.sticky-col tbody td:nth-child(1) { 
	position: sticky;
	left: 0;
	z-index: 1;
}
.x-scroll {
	overflow-x:auto;
}

/*---------- Compact Table -----------*/

.compact-table td {
	padding: 0px 10px 0px 0px;
}

/*---------- Fixed Table ----------*/ 

.fixed-table {
	table-layout: fixed;
}

/*---------- Action Link ----------*/ 

.action-span {
	cursor: pointer;
}
.action-link {
	cursor: pointer;
    text-decoration: none;
    color: var(--action-link-color);
}
.action-link:hover, .action-link a:active {
    background-color: transparent;
}
/*
.action-disabled {
	color: #cccccc;
}
*/
/*---------- Sort Link ----------*/ 

.sort-link {
	cursor: pointer;
	text-decoration: none;
	color: var(--table-header-color);
}
.sort-link:hover {
	background: transparent;
}

/*---------- Button ----------*/ 

.button {
/*    font-family: Verdana, Arial, Helvetica, sans-serif;*/
	display: inline-block;
	background-color: var(--button-bgcolor);
	color: var(--button-color);
	font-size: 11px;
    text-align: center;
	padding: 4px;
	min-width: 50px;
	cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
	border: 1px solid var(--button-border-color);
	border-radius: 5px;
}
.button:hover {
	background-color: var(--button-hover-bgcolor);
	color: var(--button-hover-color);
}
.button-disabled{
	background-color: var(--button-disabled-bgcolor);
	color: var(--button-disabled-color);
}
.small-button{
	border: none;
	padding: 2px;
	min-width: 40px;
}
/*---------- Boxes -----------*/

.box-section {
    border: 1px solid var(--box-border-color);
    padding: 0px 10px 10px 10px;
    margin: 10px 20px 0px 0px;
}

.big-box {
    border: 1px solid var(--box-border-color);
	border-radius: 5px;
	padding: 5px 10px 7px 10px;
	width: fit-content;
}

.monospace {
	font-family: "Courier New", "Courier", monospace;
	font-size: 16px;
}

input[disabled]{
	color: var(--disabled-color);
    background-color: var(--disabled-bgcolor);
}


.rotate {
  transform: rotate(-90deg);
}

/* On page links */
/*
a.linkbox:link, a.linkbox:visited {
    display: inline-block;
	font-size: 11px;
    color: #ffffff;
    color: #000000;
    background-color: #96a0b0;
    background-color: #ffffff;
    border-radius: 6px;
	min-width: 50px;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    white-space:nowrap;
    border: 1px solid #000000;
    border: 1px solid #aaaaaa;
}

a.linkbox:hover, a.linkbox:active {
    background-color: #757575;
    background-color: #aaaaaa;
    border: 1px solid #000000;
    border: 1px solid #aaaaaa;
}
*/
/* Navigation Bar */

nav {
	background-color: var(--nav-bgcolor);
	height: 30px;
	padding: 0px 0px 0px 0px;
}
nav ul {
	font-family: Helvetica, sans-serif;
	font-size: 14px;
	line-height: 16px; 
	background-color: var(--nav-bgcolor); 
	padding: 0 0px;
	border-radius: 0px;  
	list-style: none;
	position: relative;
	margin-top: 0px;
	display: inline-table;
	z-index: 1000;
}
nav ul:after {
	content: ""; 
	clear: both; 
	display: block;
}

nav ul li {
	float: left;
}

nav ul li a {
	display: block;
	padding: 7px 10px; 
	text-decoration: none;
	color: var(--nav-color); 
}
nav ul li:hover {
	background: var(--nav-hover-bgcolor);
}
nav ul li:hover > ul {
	display: block;
}
nav ul li:hover a {
	color: var(--nav-color);
}
nav ul ul {
	display: none;
	top: 30px;
}

nav ul ul {
	background-color: var(--nav-bgcolor); 
	border-radius: 0px;
	padding: 0;
	position: absolute; 
	top: 100%;
}
nav ul ul li {
	background-color: var(--nav-bgcolor); 
	float: none; 
	border-top: 0px;
	border-bottom: 0px;
	position: relative;
}
nav ul ul li a {
	padding: 10px 10px;
	color: var(--nav-color); 
}	
nav ul ul li a:hover {
	background-color: var(--nav-hover-bgcolor); 
}
nav ul ul ul {
	position: absolute; left: 100%; top: 0;
}
.nav-blank {
	background-color: var(--nav-bgcolor);
	color: var(--nav-bgcolor);
}
.nav-divider {
	border-top: 1px solid var(--nav-divider-color);
	min-width: 100px;
}
.nav-right {
	float: right;
    font-size: 26px;
    padding: 0px 10px 0px 0px;
    margin-top: -3px;
    cursor: pointer;
	color: var(--nav-color); 
}

.nav-right-help {
    font-size: 26px;
    margin-top: -3px;
}

/* Google Map */

.google-map {
     padding-bottom: 50%;
     position: relative;
}
.google-map iframe {
     height: 100%;
     width: 100%;
     left: 0;
     top: 0;
     position: absolute;
}