*, *:before, *:after {
  box-sizing: border-box;
}

body {
  margin: 10px 5px;
  font-family: 'arial', 'Open Sans', 'sans-serif';
  background-color: #87CEEB;
  color: #000;
  font-size:16px;
  line-height:1.4em;
}

h1 {
  margin: .5em 0 .5em 0;
  line-height:1.2em!important;
}
p {
	margin: .8em 0 .8em 0;
}

#report p {
	margin: 1em 0 1em 0;
	line-height:1.3em;
}

h2, h3, h4, h5 {
  margin: 1.2em 0 .4em 0;
}

h1 {font-size: 2.2em; }
h2 {font-size: 2.0em; }
h3 {font-size: 1.7em; }
h4 {font-size: 1.3em; }
h5 {font-size: 1.1em; }

.xhdrblue {color: #60b1db;}
.hdrblue {color: #336699;}

#bellcurve {
	width: 750px;
	height:384px;
	background: url("../images/reportbellcurve.png") no-repeat;
	z-index:100;
	border:1px solid #333;
	margin-top:20px;
}
#personman {
	position: relative;
	width: 47px;
	height:100px;
	background: url("../images/man.png") no-repeat;
	z-index:101;
	top: 235px;
	cursor: pointer;
}

input[type="radio"] {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);
}

/* lessons */
.exercise { border:2px solid #ccc; padding: 10px 20px 20px 20px; font-weight:bold; border-radius: 10px; background-color:#f5f5f5; margin-bottom:25px;}
.audio {margin: 25px 0px; }
.text {margin: 25px 0px; }
.behavior { border-bottom:3px #f5f5f5 solid; font-weight: bold; } 
#navigation {margin: 25px 0; }
#wherearewe {margin: 15px 0 30px 0px; }
textarea.exercisetext { width:100%; }
.mod1video { width:560px; height:350px; }
.myanswer { background-color:#fff; border:1px solid #ccc; padding:1px 25px;  margin:15px 0px 35px 2px;}
.t2sx { margin: 25px 0px -15px 0px; }
.t2s {float:right; padding:6px 10px 10px 10px; width:200px; border:1px solid #aaa; background-color: #FFFACD; text-align:center; border-radius: 20px; margin:20px 10px 0px 10px;}
.quizarea {margin-top:5px; margin-left:70px; font-size:.8em; line-height: 1.2em;}
.posttestarea {margin-top:25px; margin-left:0px; font-size:1em; line-height: 1.2em;}
/* end lessons */

.wrapper {
  max-width: 1200px;
  margin: 0 20px;
  display: grid;
  grid-gap: 10px;
}

/*  survey-related */
tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

table.table-reset {
    border-collapse: collapse;
    border-spacing: 0;
}
.question-matrix-table {
    margin: 0 0 5px 0;
    width: 100%;
}
.question-matrix-table td {
    padding: 6px;
    vertical-align: middle;
}
.question-matrix-row-even td {
    background-color: #f5f5f5;
}
.radio-button-label {
	width:100%;
	display:block;
	cursor:pointer;
}
.radio-button-label-text {
	display: none; 
}
.radio-button-container {
	text-align:center;
	padding:10px;
}
.question-title-container {
    color: #4db2ec;
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    text-decoration: none;
}
.itemmain {margin-top:20px; }
.itemsection { margin:10px 5px 25px 15px; }

.progress-bar-indicator-wrapper {
    border-color: #ccc;
    border-width: 1px;
}
.progress-bar-indicator-wrapper {
    border-style: solid;
}
.progress-bar-indicator-wrapper {
    background: rgba(204,204,204,0.25);
    overflow: hidden;
    border-radius: 4px;
    background-clip: padding-box;
}
.progress-bar-indicator {
    background-color: #73c2eb;
}
.progress-bar-section {
    background-color: #fff;
    color: #000;
    font-size: 12px;
}
.progress-bar-indicator-container {
    text-align: left;
    padding: 4px;
    width: 100%;
}
.progress-bar-section {
    padding: 4px 6px;
    white-space: nowrap;
}
.progress-bar-container {
    white-space: nowrap;
    text-align: center;
    margin: 0 auto 36px auto;
}
.progress-bar-container {
    border-spacing: 0;
    width: 60%;
}

@media screen and (max-width: 480px) {
	.question-matrix-table.reflow {
    	display: block;
	}
	.question-matrix-table.reflow thead {
	    display: none;
	}
	.question-matrix-table.reflow tbody, .question-matrix-table.reflow tr, .question-matrix-table.reflow td {
    	display: block;
   	 	margin: 5px 0;
    	border-radius: 4px;
	}
	.question-matrix-table.reflow .radio-button-display {
    	margin: 0;
    	float: left;
	}
	.question-matrix-table.reflow .radio-button-label-text {
    	position: static;
		display: inline-block;
    	left: auto;
    	top: auto;
	}
	.radio-button-container {
		text-align:left;
	}
}

#homegrid {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
    background-color: #fff;
    color: #444;
	margin-bottom:10px;
}
.homewidget { 
border:2px solid #eee; 
padding:10px;
}
.mypad {padding:2px 0; }
#hometop {
	padding: 0 0px 0 10px;
	height:50px;
	margin-bottom:5px;
}
#menugrid {
    display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 140px));
    background-color: #fff;
    color: #444;
	margin-bottom:10px;
}
.menuwidget { 
	border:2px solid #ccc; 
	/*padding:40px 0px;*/
	padding:0px 15px;
	height:140px;
	text-align: center;
	cursor:pointer;
	line-height:1.1em;
	display: flex;
	  justify-content: center;
	  align-items: center;
	  margin-bottom:5px;
}
.menucenter { text-align: center; }
.backwidget {border:2px solid #eee !important; }
.menuwidget:hover { background-color: cornsilk; border-color:#336699; }
.breadcrumb { font-size: .8em; padding:0px 0 15px 0px; }

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
#skipper {position: absolute; text-indent: -600em; }
#skipper2 {position: absolute; text-indent: -600em; }

/* navigation */
ul#footerlist {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul#footerlist li, #nav ul li {
    float: left;
	font-size: .8em;
}
ul#footerlist li {
	margin-right: 30px;
	font-size: .75em;
}
ul#leftnav {
	list-style-type: none;
	margin-left: -38px;
	margin-top:5px;
}
ul#leftnav li {

}
ul#leftnav li a {
	display:block;
	border:1px solid #eee;
	padding:15px 3px 15px 10px;
	margin-bottom: 0px;
	text-decoration: none;
	font-size: 1.2em;
	color: #004C5C;
}
ul#leftnav li a:hover, ul#leftnav li a.alternate:hover {
	background-color: #2c7db7;
	color: #fff;
}
ul#leftnav li a.alternate {
	background-color: #2c7db7;
	color: #fff;
}
ul#leftnav li a.alternate i, ul#leftnav li a.alternate i:hover {
	color: #fff !important;
}
.ajax { text-decoration: underline; cursor: pointer; }
/* header and footer */
header {
	background-color:#2c7db7 !important;
}
footer {height:33px; }
#systemname {font-size: 3em; color:#fff; margin:15px 0 15px 10px; line-height:1.0em;}
#systemname a {text-decoration: none !important; color:#fff !important; }
#logo {float: left; margin-right:20px; background-color:#fff;}
#systemdate {float:right; color: #fff; font-size: 1.1em; text-align: right; line-height:1.7em;}
.logout {margin-right: 15px; }
.medium {font-size: 1.2em; }
.sm {font-size: .9em; }
.vsm {font-size: .75em; }

/* time */
.tctop {border:3px solid #eee; padding: 4px 6px 4px 6px; border-radius:3px; display:inline-block;}
#summarytable {position: absolute; top:170px; }
#reviewarea {float:right; max-width:330px; height:600px; margin-left:5px; }
#reviewarea.home {max-width:330px; height:600px; margin-left:5px; }
#tipsarea {float:right; width:300px; min-height:600px; margin-left:5px;}
.tips {display:none; padding:10px 0px;}
.tiplist li {margin-bottom:5px; }
.tiplist {padding-left:20px;}
/* blog */
.blogentry { margin-bottom: 15px; }
.blogtitle { font-size:1.3em; margin: 5px 0; color: #A62A57;}
.blogmeta { font-size: .7em; }
.blogcontent { padding:5px; margin: 10px 0px; font-size:.9em; background-color: #f5f5f5;}
.bloglist { 
	font-size: .7em; 	
	list-style-type: none;
	margin-left: -38px;
}
.bloglist li { 
	margin-bottom:3px;
}
/* forums */
#forumarea {margin-bottom:5px;}
#forumheader {float: right; margin-top:3px; }
#forumheader a { color: #fff; }
.hl {color: #000; padding:1px; background: yellow; mso-highlight: yellow;}
.newpost {border-left: 8px solid #990000 !important; }
#freply {
	position: absolute;
	top:20px;
	left:200px;
	width: 650px;
	border:3px solid #aaa;
	background-color: #fff;
	padding:10px;
	border-radius: 5px;
}
.fentry {
	border:1px solid #ccc;
	padding: 10px 10px 10px 5px;
	margin-bottom: 10px;
	background-color:#f5f5f5;
}
.fanswer {
	margin-left: 20px;
	background-color:#FAF0E6 !important;
}
.fname { font-size: 1em; color: #336699; margin-bottom:5px; font-weight: bold; }
.fdate { font-size: .8em;  font-weight: bold;}
.fpost { font-size: .9em; margin: 6px 0; padding: 10px; background-color:#fff; border:1px solid #ccc; border-radius: 5px; }
.fheader { border:0px solid #000; padding:3px;}
.fage {color:#990000; }

.todaydate {font-size:1.6em; display:inline-block; margin-top:15px}
/* weather */
#weatherarea {width: 600px; height:40px; float:right;}
#weather {
    display: grid;
    grid-gap: 1px;
    grid-template-columns: 150px 150px 150px 150px;
    background-color: transparent;
    color: #444;
}
.city {
	padding: 3px 1px 0px 8px;
	border:1px #fff solid; 
	cursor: pointer;
}
@media screen and (max-width: 900px) {
	 #weatherarea { display: none; }
}
/* alerts */
#alerts {
}
.alert, .alertpin {
	border:1px solid #ddd;
	padding:5px 10px 5px 5px;
	margin-bottom: 5px;
	border-radius: 2px;
	box-shadow: 1px 1px 1px #ddd;
}
.today {background-color:Cornsilk;}
.alert:hover, .alertpin:hover {
	background-color: #FAEBD7;
}
.mobileshow, .mobileshowblock {display:none;}
.alertpin {background-color: #F8F8FF;}
.alertdate { color: #A62A57; margin-left: -15px; font-size: .9em; font-weight: bold; float: left; width: 70px; border:1px solid #aaa; padding:3px; text-align: center; border-radius: 5px; background-color:#f5f5f5; margin-right:10px;}
.alertcontent {font-size: .8em; }
.alertcat { float: right; font-style: italic; font-weight: bold; font-size: .8em; color: #00758C;}
.alertfooter {font-size: .7em; padding: 2px 5px 2px 5px; text-align: right; border:1px solid#eee; background-color: #fff; display: inline-block; }
.alertack {font-size: .8em; background-color: #eee; padding:3px;}
.userlist { margin-right: 15px; font-size: .8em; }
.links li {
	margin-left: -24px;
	font-size:.9em;
	margin-bottom:2px;
}
.hide { display: none; }
.bigclock { font-size: 3em; color: #990000; }
.work, .lunch, .breakpaid, .breaknotpaid, .nonwork, .switch { font-size: .8em; }
.system, .manual, .override, .details {font-size:.7em !important;}
.system {background-color:#E0FFFF; }
.manual {background-color:#FAEBD7; }
.override {background-color:#FFA07A; }
.details {background-color:#D8BFD8; }
.billable {color:#355e3b; font-weight:bold;}
.notbillable {color:#990000; font-weight:bold;}
.work { background-color:#009900; color: #fff; }
.nonwork { background-color:#3399ff; color: #fff; }
.lunch { background-color:red; color: #fff; }
.breakpaid, .green {background-color:green; color: #fff;}
.breaknotpaid, .red {background-color:red; color: #fff;}
.yellow {background-color:yellow; color: #fff;}
.switch {background-color:#ccc; color: #fff;}
.message { font-weight:bold; color: #990000; display:block; margin: 5px 0px; }
.messagered { font-weight:bold; color: #FF0000; text-transform:uppercase;}
.messagelite { font-weight:bold; color: #990000; background-color: yellow; display:block; margin: 5px 0px; }
.warning { font-weight:bold; color: #FF0000; }
.good { font-weight:bold; color: #009900; }
.label { text-align: right; font-weight: bold; }
.under {text-decoration:underline;}
.icon {cursor:pointer; text-align:center !important;}
.open {background-color:red}
.complete {background-color:orange}
.approved {background-color:green}
.missing {background-color:black}
.nostat {background-color:grey}
/* tables */
table.gridfull, table.gridbig {width: 100%; }
table.grid, table.gridfull, table.dash, table.tc, table.gridbig, table.tcgrid, table.tcgridsm {border-collapse: collapse;}
.grid td, .grid th, .gridfull td, .gridfull th, .tc td, .tcgrid td { border: 1px solid #eee; font-size:.8em; padding:3px 4px; text-align:left;}
.gridbig td, .gridbig th { border: 1px solid #eee; font-size:.1.2em; padding:3px 4px; text-align:left;}
.gridnone td, .gridnone th { border: none; font-size:.1.1em; padding:3px 4px; text-align:left;}
.tc th { border: 1px solid #eee; font-size:.7em; padding:3px 4px; text-align:center;}
.grid th, .gridfull th, .dash th, .tcgrid th { background-color: #f5f5f5 !important; }
.tcgrid th, .tcgridsm th { border: 1px solid #eee; font-size:.7em; padding:3px 4px; text-align:left;}
.tcgridsm td { border: 1px solid #eee; font-size:.7em; padding:3px 4px; text-align:left;}
.grid th.ot { background-color: #D8BFD8 !important; text-align: center;}
.grid th.reg { background-color: #90EE90 !important; text-align: center; }
.dash td, .dash th { border: 1px solid #eee; font-size:.8em; padding:2px; text-align:center;}
.entry td { font-size:.8em; padding:2px; }
.comment {cursor: pointer; }
.comment:hover i {font-weight:bold; }
.bigbtn { font-size: 1.2em; }
.smbtn { font-size: .8em; }
.pagebtn { font-size:1.2em; 
mid-width: 100px; border-radius: 2px; padding: 15px 25px; 
border: 1px solid rgba(0,0,0,0.2); 
 box-shadow: 0 3px 0 rgb(0 0 0 / 10%); margin: 5px 15px; }
.pagebtnsm { font-size:1.0em; 
mid-width: 80px; border-radius: 2px; padding: 12px 22px; 
border: 1px solid rgba(0,0,0,0.2); 
 box-shadow: 0 3px 0 rgb(0 0 0 / 10%); margin: 5px 15px; }
 .pagebtnmed { font-size:1.5em; 
mid-width: 80px; border-radius: 2px; padding: 12px 22px; 
border: 1px solid rgba(0,0,0,0.2); 
 box-shadow: 0 3px 0 rgb(0 0 0 / 10%); margin: 5px 15px; }
.pagebtn:hover, .pagebtnsm:hover, .pagebtnmed:hover {opacity:1;box-shadow:0 0 10px #2683cc}
.backbtn {background-color: #eee; color: #000;}
.nextbtn {background-color: #2c7db7; color: #fff;}
.savebtn {background-color: #2E8B57; color: #fff;}
.exitbtn {background-color: #FA8072; color: #fff;}
.vsmbtn { font-size: .65em; }
.bigfld { padding: 5px; font-size: 1.2em; }
.box {font-size: .8em !important;}
.box input {font-size: .9em !important;}
.greyline {background-color:#ccc; }
.boxreadonly input {font-size: .9em !important; background-color:#f5f5f5; border:1px solid #ccc;}
.right { text-align: right !important; }
.center { text-align: center !important; }

/* what to do if we are using mobile */
@media screen and (max-width: 850px) {
	#systemdate, #logo { display: none; }
	#nav ul li a { padding: 4px 6px; }
	ul#footerlist li {margin-right: 10px;}
	#nav ul { width: 95%; }
	.mobilehide {display:none; }
	.mobileshow {display:inline-block;}
	.mobileshowblock {display:block;}
	.wrapper { 	margin: 0px;	}
	.mobilesm {font-size:.7em;}
	.gridbig td, .gridbig th { border: 1px solid #eee; font-size:..9em; padding:3px 4px; text-align:left;}
	ul#leftnav li a {
		padding:5px;
		font-size: 1.0em;
	}
	#homegrid {
	    grid-gap: 5px;
	    grid-template-columns: 1fr;
		margin-bottom:10px;
	}
	.bigbtn { font-size: .9em; }
	#menugrid {
	    grid-gap: 5px;
    	grid-template-columns: repeat(auto-fit, minmax(100px, 100px));
		margin-bottom:10px;
	}
	.menuwidget { 
		border:2px solid #ccc; 
		padding:0px 10px;
		height:100px;
		text-align: center;
		cursor:pointer;
		line-height:1.1em;
		display: flex;
		  justify-content: center;
		  align-items: center;
		  margin-bottom:5px;
	}
	.menucenter {font-size:.8em;}
	.fa-4x { font-size:3em !important; }
	h1 {   margin: 0 0 .5em 0; }
	h2, h3, h4 {
  		margin: .5em 0 .5em 0;
	}
	h1 {font-size: 2.0em; }
	h2 {font-size: 1.8em; }
	h3 {font-size: 1.6em; }
	h4 {font-size: 1.4em; }
	h5 {font-size: 1.2em; }
	#dtheader { height: 100px!important; }
	.todaydate {font-size:1.3em; margin-top:2px}
	#hometop { padding: 0px; height:30px; text-align:center;}
	#summarytable {position: static; }
	#leftnav { display:none; }
	.bigclock { font-size: 2em; color: #990000; }
	.mod1video { width:310px; height:220px; }
	
}

.w3-green{color:#fff!important;background-color:#4CAF50!important}
.w3-red{color:#fff!important;background-color:#990000!important}

/* what to do if we are not mobile (tablet or desktop) */
@media screen and (min-width: 850px) {

  /* no grid support? */
  .sidebar {
    float: left;
    width: 19.1489%;
  }

  .content {
    float: right;
    width: 79.7872%;
	min-height:300px;
  }
  
  #report {
  	padding: 0 25px 0 10px;
 }
 

  .wrapper {
    margin: 0 auto;
    grid-template-columns: 1fr 6fr;		/* TODO - we can play games here on the sidebar - for widths */
  }
  
  .header, .footer {
    grid-column: 1 / -1;
    clear: both;
  }

}

.wrapper > * {
  background-color: #fff;
  color: #000;
  border-radius: 5px;
  padding: 10px 15px 8px 15px;
  /*font-size: 110%;*/
  margin-bottom: 10px;
}

@supports (display: grid) {
  .wrapper > * {
    width: auto;
    margin: 0;
  }
}