body       { background-color: #2f62b6; padding: 0px; }
h1         { font-family: Verdana,Helvetica,sans-serif; }
.topholder { top: 0px; left: 0px; width: 100%; overflow: auto; background-color: white; margin: 0%; }
.top       { width: auto; overflow: auto; background-color: white; padding: 1em; }
.logo      { float: left; }
.title     { float: right; margin-top: -0.5em; margin-bottom: -0.5em; font-family: Arial,Helvetica,sans-serif; text-align: center; }
/*.content   { padding: 1em; }

#login     { padding-top: 10em; text-align: center; display: none; }
#login2    { min-width: 20em; margin: 0 auto; background-color: #1b66e4; padding-top: 1em; padding-bottom: 1em; padding-left: 2em; padding-right: 2em; display: inline-block; text-align: center; }
#login3    { background-color: white; padding: 0.5em; margin: auto; width: 30em; }
#error     { color: red; font-weight: bold; font-family: "Times New Roman",Times,serif; font-size: 1.2em; padding-top: 0.5em; display: none; }

#selector  { display: none; }
#logout    { float: right; }

.question  { font-family: Verdana,Helvetica,sans-serif; font-weight: bold; padding: 1em; }
.message   { font-family: Verdana,Helvetica,sans-serif; padding: 1em; margin-bottom: 1em; }
.answers   { font-family: "Times New Roman",Times,serif; font-size: 1.2em; padding: 0.5em; }
.button    { font-family: Verdana,Helvetica,sans-serif; padding: 0.3em; background-color: #2f62b6; color: white; border: solid #1b66e4; }
.textbox   { font-size: 1em; margin: 0.5em; }
.password  { font-size: 1em; margin: 0.5em; }
.input     { margin-bottom: 0.25em; }
.example   { font-family: Verdana,Helvetica,sans-serif; padding: 0px 1em 0px 1em; }
.hidden    { display: none; }

.nobr		{ white-space: nowrap; }
#hideextra	{ display: inline; cursor: pointer; }
#showextra	{ display: none; }
#studentlist	{ margin: 1em; }
#students	{ background-color: #fff; }
#students tr th	{ padding-right: 0.5em; padding-left: 0.5em; font-size: 1.2em; cursor: pointer; }
#students tr td	{ padding-right: 0.5em; padding-left: 0.5em; }
#theader	{ background-color: #ccc; }
.ValPass.odd	{ background-color: #cfc; }
.ValPass.even	{ background-color: #dfd; }
.ValFail.odd	{ background-color: #fbb; }
.ValFail.even	{ background-color: #fcc; }
.ValNA.odd	{ background-color: #ffc; }
.ValNA.even	{ background-color: #fff; }
.ID		{ text-align: right; }
.User		{ font-family: "Courier New",Courier,monotype; font-weight: bold; }
.Pass		{ font-family: "Courier New",Courier,monotype; font-weight: bold; }
.Name		{ font-family: Verdana,Helvetica,sans-serif; }
.Grade		{ text-align: center; font-family: Arial,Helvetica,sans-serif; font-weight: bold; }
.Homeroom	{ text-align: center; font-family: "Courier New",Courier,monotype; font-weight: bold; }
.HRTeach	{ text-align: center; font-family: Arial,Helvetica,sans-serif; }
.Valid		{ text-align: center; font-family: Verdana,Helvetica,sans-serif; font-weight: bold; }
*/

.hidden		{ display: none !important; background-color: silver; padding: 0 1em 0 1em; color: blue; border: 1px dotted black; }
.dbghide	{ background-color: lightgrey; padding: 0 1em 0 1em; color: blue; border: 1px dotted silver; }
.invisible	{ visibility: hidden; }

.centerin	{ display: flex; width: 100%; }
.centerdiv	{ margin: auto; }
.center		{ text-align: center; }
.right		{ text-align: right; }
#login		{ padding: 1em; }
#loginbox	{ padding: 1em; background-color: white; border-radius: 1em; }
#login_nopass_inside
		{ font-family: Verdana,Helvetica,sans-serif; font-weight: bold; font-size: larger; }
#loginerror	{ font-family: Verdana,Helvetica,sans-serif; font-weight: bold; margin-top: 0.25em; color: red; }

#userinfo	{ padding: 1em; display: grid; grid-template-columns: 50% 50%; background-color: white; }
#uinf_name	{ grid-column-start: 1; grid-row-start: 1; font-family: Verdana,Helvetica,sans-serif; font-weight: bold; }
#uinf_email	{ grid-column-start: 1; grid-row-start: 2; font-family: Arial,Helvetica,sans-serif; }
#uinf_logout	{ grid-column-start: 1; grid-row-start: 3; }
#uinf_phone	{ grid-column-start: 2; grid-row-start: 1; }
#uinf_mobile	{ grid-column-start: 2; grid-row-start: 2; }
#uinf_room	{ grid-column-start: 2; grid-row-start: 3; }
#uinf_note	{ grid-column-end: span 2; font-family: Verdana,Helvetica,sans-serif; background-color: lightyellow; margin-top: 1em; padding: 0.5em; }
#uinf_phone_label,#uinf_mobile_label,#uinf_room_label
		{ font-weight: bold; font-family: Verdana,Helvetica,sans-serif;}
#uinf_phone_edit,#uinf_mobile_edit,#uinf_room_edit
		{ font-family: Arial,Helvetica,sans-serif; }
#uinf_phone_update,#uinf_mobile_update,#uinf_room_update
		{ font-family: Arial,Helvetica,sans-serif; font-size: 0.8em; color: #0c4676; cursor: pointer; }

#userbasicinfo	{ padding: 1em; display: grid; grid-template-columns: 50% 50%; background-color: white; }
#ubinf_name	{ grid-column-start: 1; grid-row-start: 1; font-family: Verdana,Helvetica,sans-serif; font-weight: bold; }
#ubinf_logout	{ grid-column-start: 2; grid-row-start: 1; text-align: right; }

#lno_emp	{ display: grid; grid-template-columns: 25% 75%; padding-right: 1em; }
#lno_continue	{ padding-top: 1em; }

#ticket		{ margin: 1em; }
#requestbox	{ width: 90vw; height: 15vh; }

.floatin	{ display: flex; width: 100%; }
.floatin .grid2	{ margin: 1em auto 0.25em auto; }
.indent		{ margin-left: 1em; margin-right: 0.25em; }

.grid2		{ display: grid; grid-template-columns: auto auto; margin: 1em 1em 0 1em; padding: 0.25em 1em 0.25em 1em; border-radius: 0.75em; border: 1px solid silver; background-color: #ffe; }
.grid2head	{ grid-column-start: 1; grid-column-end: -1; font-family: Verdana,Helvetica,sans-serif; font-weight: bold; font-size: 1em; text-align: center; padding-bottom: 0.5em; }
.grid2foot	{ grid-column-start: 1; grid-column-end: -1; font-family: Arial,Helvetica,sans-serif; text-align: center; padding-bottom: 0.5em; }

#submit input	{ margin: 1em; font-size: 1.5em; font-weight: bold; padding: 0.5em; border-radius: 0.75em; background-color: #ffe; }

.match_ok	{ background-color: green; color: white; font-weight: bold; padding: 0.25em; }
.match_close	{ background-color: yellowgreen; font-weight: bold; padding: 0.25em; }
.match_many	{ background-color: goldenrod; font-weight: bold; padding: 0.25em; }
.match_none	{ background-color: pink; }

#demo		{ display: flex; flex-direction: column; width: 100%; }
#notices	{ display: flex; flex-direction: column; width: 100%; }
.notice		{ margin: 0.5em auto 0.5em auto; background-color: deepskyblue; border-radius: 1em; padding: 1em; color: yellow; font-weight: bold; font-size: large; font-family: Verdana,Helvetica,sans-serif; text-align: center; }
.noticephone	{ color: blue; font-size: 1em; }

#printer	{ cursor: pointer; }