:root {
	--irColor:#008080;
}
/* 
*  alphabetical order aside from . and # or die!!!! 
*/
* {box-sizing:border-box;}
html {font-family: Helvetica;box-sizing: border-box;}
body{font-size:1rem;background:#e0e0e0;width:100vw;margin:0;overflow-x:hidden;}
big{font-size:175%;}
code{background-color:rgb(70,70,70); color:white;display:block;margin-top:6px;margin-bottom:6px;padding: 0.25rem;
	cursor:pointer;margin-right:2rem;white-space:break-spaces;overflow:auto;margin-left:0;font-size:10pt;
	tab-size:2;font-family: "Fira Code", Courier, monospace;}
incode{background-color:rgb(70,70,70); color:white;cursor:pointer;}
div {text-align:left;}
fieldset {text-align:left;padding-left:2rem;margin-top:.5rem;margin-bottom:.5rem;}
fieldset legend {font-weight:bold;}
h1 {font-size:2rem;}
h2 {font-size:1.75rem;}
h3 {font-size:1.5rem;}
h4 {font-size:1.25rem;margin:1rem;}
h5 {font-size:1rem;margin:0;padding:0.25rem;text-shadow:1px 1px black;text-transform: uppercase;}
input,select,textarea {
	padding:0.25rem;
	font-size:16px;
	border:1px solid black;
	font-family: Verdana;
	background-color:#fff;
	max-width:100%;
}
input[type='button'],input[type='submit'],button[type='button'],button[type='submit'] {
	min-height:3rem;
	min-width:5rem;
	border:0 none;
	margin-left:.1rem;
	margin-top:.1rem;
	-webkit-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;    
	box-shadow:0px 2px 3px #555;
	position:relative;
	font-size:inherit;
}
input[type='checkbox'],input[type='radio'] {transform:scale(1.5);margin-right:.3rem;}
input[type='number'] {max-width:8rem;}
input[type='number'] { -moz-appearance:textfield;padding-right:.25rem;max-width:10rem;}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
/*input:-moz-read-only,input[readonly='true'] {color:gray;}*/
input[type='button']:hover,input[type='submit']:hover,button[type='button']:hover,button[type='submit']:hover{
	cursor:pointer;
	box-shadow:0px 3px 4px #555;
	top:-1px;
}
input[type='button']:active,input[type='submit']:active,button[type='button']:active,button[type='submit']:active{
	box-shadow:0px 0px 2px #555;
	top:2px;
}
input[type='button']:disabled,input[type='submit']:disabled,button[type='button']:disabled,button[type='submit']:disabled{
	box-shadow:0px 1px 4px #555;
	top:0px;
	cursor:default;
}
ir-delbtn input {color:firebrick; }
li{padding:0.25rem;}
::-webkit-input-placeholder,::-moz-placeholder { color: mediumblue;}
pre {
  font-family: monospace;
  padding: 0.5em;
  line-height: 0;
  counter-reset: line;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  margin-top: 0;
}
pre > span {
    display: block;
    line-height: 1.5rem;
}
pre > span:before {
      counter-increment: line;
      content: counter(line);
      display: inline-block;
      border-right: 1px solid #777;
      padding: 0 .5em;
      margin-right: .5em;
      color: #888
}
pre > span.emptyLog{height: 0px;overflow: hidden;}
pre.highlightsOnly > span{height:0px;overflow:hidden}
table[border="1"] {border-collapse:collapse;width:100%;border:0 none;}
table[border="1"] td, table[border="1"] th{border:1px solid #006464;vertical-align:middle;}
table[border="0"] {border-collapse:collapse;width:100%;border:1px solid black;}
table[border="0"] td, table[border="0"] th{border:0 none;vertical-align:middle;}
td { text-align:left;padding:4px;}
tfoot td {background-color:rgb(203, 254, 254);position:-webkit-sticky;position:sticky;bottom:0;z-index: 2;}
th { text-align:left;font-weight:bold;padding:4px;}
th,thead td {background-color:rgb(203, 254, 254);position:-webkit-sticky;position:sticky;top:0;z-index: 2;}
tr:nth-child(2n) {background-color:#ededed;}
ul{margin-top:2px;margin-bottom:2px;}
/************************************************/
.test{background-color:grey;}
.bgGray, .bgGrey {background-color:lightgray;color:black;}
.bgGray:hover, .bgGrey:hover {background-color:#f0f0f0;color:black;}
.bgPink {background-color:firebrick;color:white;}
.bgPink:hover {background-color:crimson;}
.bgTeal {background-color:var(--irColor);color:white;}
.bgTeal:hover {background-color:darkturquoise;color:white;}
.bgYellow {background-color:lightyellow;}
.big {font-size:1.5rem;}
.blue {color:blue;}
#bodyMain {height:calc(100vh - 6.5rem);overflow-y:auto;}
#bottomMessageWrap{position:absolute;padding-left:1rem;bottom:0;text-align:left;
	width:100%;overflow:auto;max-height:4rem;};
.bold {font-weight:bold;}
.btn {width:8.5rem;height:3rem;font-size:130%;font-weight:500;text-align:center;
	background-color:var(--irColor);color:white;}
.btn:hover{background-color:darkturquoise;}
.buttonRow {text-align:center;margin-top:1rem;}
#calendar { transition: all 0.8s;}
#calendar:hover { max-height: 50rem !important;}
.center {text-align:center;}
.click:hover{background-color:darkturquoise;cursor: pointer;color:white;}
.clock, .clockHand{
	width:100%;
	height:100%;
	margin:auto;
	position:absolute;
	transition: all .5s ease-in-out;	
	pointer-events:initial;
}
.clockHand {
	stroke-linecap: round;
	stroke:silver;
}
.clock, .clock > *, .clockHand, .clockTimeWrapper{
	user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}
.clock path{
	fill:white;
	stroke:white;	
}
.clock path:hover{
	fill:darkturquoise;
	stroke:darkturquoise;	
}
.clock text{
	fill:black;
}
.clockTime, .clockTimeWrapper {
	font-size:10pt;
}
.clockTime:hover {
	cursor:pointer;
	color:darkturquoise;	
}
.clock text, .clock text>*, .clockHand, .clockHand >* {
	pointer-events:none;
}
.clock.hidden, .clockHand.hidden {
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s 0.7s, opacity 0.5s ease-in-out;
}
.clock.visible, .clockHand.visible
{
	visibility: visible;
	opacity: 1;
	transition: opacity 0.7s ease-in-out;	
}
#consoleBtn {position:fixed;text-align:center;bottom:0;right:.5rem;padding:0.25rem 1rem;cursor:pointer;
	color:white;transform:translateX(-50%);right:0;border-top-right-radius:1rem;border-top-left-radius:1rem;}
.darkgray {color:darkgray;}
.dbPopup{padding:1rem;margin:0 auto;border:0.1rem solid black;
	position:absolute;
	z-index:999;
	text-align:center;
	display:none;
	padding-right:1rem;
	background-color:teal;
	box-shadow: 0 6px 12px black;
	max-width:100%;
	min-width:200px;
	min-height:100px;
	box-sizing:border-box;
	color : white;}
.detailGrid {display:grid;grid-gap:.5rem;grid-template-columns:auto auto;margin:0.5rem 0;}
.detailGrid >  *:nth-child(odd) {justify-self:end;align-self: center;font-weight:bold;}
.detailGrid > div {height:100%;display: flex;align-items: center;flex-wrap:wrap;box-sizing:border-box;}
.divTask:hover::after {
    content: attr(data-names);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    opacity: 1;
    padding: 0.5rem;
    transition: opacity ease 0.3s;
    transition-delay: 0.2s;
    background-color: whitesmoke;
    transform: translateY(calc( 100% + 4px ));
}
.divTask::after {
	white-space: pre-wrap;
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    opacity: 0;
    background-color: whitesmoke;
    color: black;
    font-family: 'Fira Sans Condensed';
    box-shadow: 0px 1px 2px black;
}
#graphDateDiv{
	width: 360px;
	margin:1rem 0 0 0;
}
#graphMenu.dropDown{
	top:3rem;
	/*right:0rem;*/
	background-color:#e0e0e0;
	transform:translateX(102%);
}
#graphMenu.dropDown.show{transform:translateX(-14rem);}
#graphMenu .dropLink {
	padding-left:2rem;
	padding-right:5rem;
	justify-content:flex-start;
	width:18rem;}
#graphMenu .dropLink:hover {
	margin-left:-1rem;
	margin-right:1rem;}
.green {color:green;}
.grey,.gray{background-color:darkgrey;color:white;}
.grey:hover,.gray:hover{background-color:darkturquoise;}
.hdrLink{
	background-color:teal;
	border-radius:1rem;
	color:white;
	float:left;
	font-size:1rem;
	height:2rem;
	margin-bottom:.1rem;
	margin-right:.1rem;
	padding-top:.5rem;
	text-align:center;
	text-shadow:1px 1px black;
    transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	width:6rem;
}
.hdrLink.current{
	background-color:darkturquoise !important;
	box-shadow:5px 1px 4px black !important;
	z-index:10 !important;
	cursor:pointer;
}
.hdrLink:hover{box-shadow:5px 1px 4px black;z-index:10;cursor:pointer;}
.hdrPop{background-color:lightgray;margin-left:0;margin-right:0;width:5rem;}
.highlight{background-color:var(--irColor);color:white;}
.inactive {color:#c9c9c9;font-weight:bold;font-style:italic;text-decoration:line-through;}
.instr {font-size:80%;color:darkgray;}
ir-date td, ir-datetime td {font-size:80%;min-width:28px;}
ir-date th, ir-datetime th {position:initial;}
.ir-delbtnC {background-color:firebrick;color:white;}
.italic{font-style: italic;}
.left{text-align:left;}
.logViewRed{color:red;display:inline}
.mandatory {background-color:lightyellow;}
.middle {vertical-align:middle;}
.ml1 {margin-left:1rem;}
.ml2 {margin-left:2rem;}
.mt_5 {margin-top:.5rem;}
.mt1 {margin-top:1rem;}
.mt2 {margin-top:2rem;}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
.nowrap {white-space:nowrap;}
.onebyone {width:1.5rem;height:1.5rem;}	
.popup {padding:1rem;border:0.1rem solid black;position:absolute;z-index:60;text-align:center;
	display:none;padding-right:1rem;background-color:#e0e0e0;
	box-shadow: 0 6px 12px black;max-width:100%;box-sizing:border-box;}
.popupTitle{
	margin: -1rem -1rem 1rem;
	padding: .25rem;
	background-color: teal;
	color: white;
	text-align: left;
	text-shadow:1px 1px black;
	text-transform: uppercase;
}
#popupBackground { background-color:black; opacity: 0.4; position:fixed;
    z-index: 50; top:0px; left:0px; right:0px; bottom:0px; width:100vw; height:100vh; }
.pulse 
{
	will-change: filter;
  	animation: pulse 2s infinite;
 	-webkit-animation: pulse 2s infinite;
}
.red{background-color:firebrick;color:white;}
.redText{color:red;}
.red:hover{background-color:crimson;}
.rem2 {width:2rem;}
.rem4 {width:4rem;}
.rem6 {width:6rem;}
.rem10 {width:10rem;}
.rem15 {width:15rem;}
.rem20 {width:20rem;}
.rem20min {min-width:20rem;}
.rem25 {width:25rem;}
.right{text-align:right;}
.size2 {font-size:200%;}
.shimmer {
  animation: shimmer 5s linear infinite;
  background: #f0f0f0 linear-gradient(to right, transparent 15%, rgba(255, 255, 255, 0.2) 25%, transparent 45%);
  background-size: 200%;
}
.shown{display:inline-block;height:auto !important}
.small {font-size:75%;color:#505050;}
.smallBtn {min-height:2rem !important;min-width:3rem !important;}
.status {font-size:130%;font-weight:bold;text-align:center;width:100%;}
#StatusBox {position: fixed;bottom: -3px;width: 100%;left: 0rem;height: auto;z-index: 50;overflow-x:auto;box-sizing: border-box;white-space: nowrap;}
.statusBoxText{transform: skew(-10deg);pointer-events: none;font-size:larger;}
.statusBase {position: relative;-webkit-transition: all ease 0.3s;transition: all ease 0.3s;opacity: 0;height: auto;max-height:300px;width: 0; /*16rem*/overflow: hidden;-webkit-user-select: none;-moz-user-select: none;user-select: none;display: inline-block;white-space: normal;transform:skew(10deg);box-shadow: 2px 1px 5px black !important;padding: 0.5rem 0rem 0.25rem 1.75rem;margin-left:-0.75rem;box-sizing: border-box;}
.statusError {background-color: firebrick;color: #ffffff;}
.statusInfo {background-color: teal;color: #fff;}
.statusTask {background-color: var(--irColor);color: #fff;}
.statusWarn {background-color: orange;color: #222;}
.statusSuccess {background-color: darkturquoise;color: #222;}
.statusBtn {float: right;top: 3px;right: 3px;width: 25px;height: 25px;display: table-cell;
	vertical-align:middle;text-align: center;-webkit-user-select: none;-moz-user-select: none;user-select: none;font-weight: bold;line-height: 16px;transform:skew(-10deg);}
.statusBtn:hover {color:darkturquoise;cursor: pointer;}
.stretchAnim{-moz-animation: stretch 1s infinite alternate-reverse;
		  -webkit-animation: stretch 1s infinite alternate-reverse;
		  -webkit-transform-origin: 50% 50%;  
		  animation: stretch 1s infinite alternate-reverse  ;
		  transform-origin: 50% 50%; 			  
	      -webkit-transition: 1.5s all;
		  transition:1.5s all; }
.strikeout {text-decoration:line-through;}
.taskPanel{z-index:51;padding:1rem;background-color:#e0e0e0;position: fixed; top: 10rem; right: 0px;width:auto;border:1px solid #006464;min-height:200px;
-ms-transform: translateX(100%);-webkit-transform: translateX(100%);-o-transform: translateX(100%);
transform: translateX(100%);-webkit-transition: all ease 0.3s;transition: all ease 0.3s;}
.taskPanelHdr{margin:-1rem;height: 3.8rem;width:calc(100% + 2rem);background-color:firebrick;}
.taskPanelTab{position: absolute;transform: rotate(90deg);background-color: firebrick;
	width: auto;height: auto;color: white;text-transform: uppercase;font-family: 'Fira Sans Condensed';
	font-weight: bold;font-size: x-large;margin: -1rem;	padding: 1rem;cursor:pointer;
	transform-origin: top left;-webkit-transition: all ease 0.3s;transition: all ease 0.3s;
	}
.taskPanel.open{-ms-transform: translateX(0%);-webkit-transform: translateX(0%);-o-transform: translateX(0%);transform: translateX(0%);}
.taskPanel.open > .taskPanelTab {transform: rotate(0deg);}
.taskPanelContainer{max-height: calc( 70vh - 10rem );overflow-y:auto;margin-top:2rem;}
.tdc {text-align:center;}
.tdcb {text-align:center;font-weight:bold;}
.tdl {text-align:left;padding-left:4px;}
.tdlb {text-align:left;padding-left:4px;font-weight:bold;}
.tdr {text-align:right;padding-right:4px;}
.tdrb {text-align:right;padding-right:4px;font-weight:bold;}
.teal {	background-color:var(--irColor);color:white;}
.toggleLink {
	cursor: pointer; color: teal; font-size: 20pt; margin-top: 0.5rem; margin-left: 1rem; margin-right: 2rem;
}
.twobytwo {width:2rem;height:2rem;}
.underline{text-decoration:underline;}
#updateLog {color: green;max-height: 4rem;overflow: auto;position: fixed;bottom: 0;left: 0;width: 100%;z-index:1000;}
#updateLog > p {margin: 0;padding:4px;}
.w1 {width:1rem;}
.w1_5 {width:1.5rem;}
.w100p {width:100%;}
.w2 {width:2rem;}
.w5 {width:5rem;}
.w6 {width:6rem;}
.w50p {width:50%;}
.w8 {width:8rem;}
.w20 {width:20rem;}
.w25 {width:25rem;}
.w30 {width:30rem;}

.waitCenter{
	color:teal;font-family:Gerogia;font-size:64pt;
	position: absolute;top: 50%; left: 50%; font-weight: bold;
	transform: translate(-50%,-50%);text-align:center;
	width:16rem;height:4rem;line-height:5rem;
}
@keyframes pulse {
0% {
    background-color:rgba(0, 206, 209,0);
  }
  50% {
   background-color:rgba(0, 206, 209,1);
  }
  100% {
    background-color:rgba(0, 206, 209,0);
  }
}
@keyframes shimmer {
  from { background-position: -200% 0; }
  to { background-position: 200% 0; }
}	
@keyframes stretch 
{
    0%    { width:1rem;} 
    100% { width:2rem;}   
}
@media (max-width: 640px) {
	.hdrLink{
		font-size:medium;
	}
	.taskPanel{width:calc( 100% - 3rem);}
}
@media (max-width: 480px) {
	.shorten{
		display:none;
	}
}