/* - - - - - - - - - - - - -
- - - GENERAL
 - - - - - - - - - - - - - */
@font-face {
	font-family: 'Noto Sans';
	font-weight: 300;
	font-style: normal;
	
	src: url('/res/noto-sans-v27-latin-300.woff2') format('woff2'),
	     url('/res/noto-sans-v27-latin-300.woff') format('woff');
	
	font-display: swap;
}

@font-face {
	font-family: 'Noto Sans';
	font-weight: 400;
	font-style: normal;
	
	src: url('/res/noto-sans-v27-latin-regular.woff2') format('woff2'),
	     url('/res/noto-sans-v27-latin-regular.woff') format('woff');
	
	font-display: swap;
}

@font-face {
	font-family: 'Noto Sans';
	font-weight: 500;
	font-style: normal;
	
	src: url('/res/noto-sans-v27-latin-500.woff2') format('woff2'),
	     url('/res/noto-sans-v27-latin-500.woff') format('woff');
	
	font-display: swap;
}

@font-face {
	font-family: 'Noto Sans';
	font-weight: 600;
	font-style: normal;
	
	src: url('/res/noto-sans-v27-latin-600.woff2') format('woff2'),
	     url('/res/noto-sans-v27-latin-600.woff') format('woff');
	
	font-display: swap;
}

:root {
	--radius: 8px;
	
	--shadowContrast: 0 0 0 1px hsl(0, 0%, 0%, 0.7);
	--shadowDiluteBlack: 0 0px 15px rgba(0,0,0,0.2);
	--shadowHintBlack: 0 0px 25px rgba(0,0,0,0.2);
	--shadowActive: inset 0 -1px hsla(0, 0%, 100%, 0.275);
	
	--borderContrast: 1px solid hsl(0, 0%, 80%, 0.1);
	--borderBright: 1px solid hsla(0,0%,80%,0.2);
	
	--bgDarkest: hsl(0, 0%, 3%);
	--bgLighter: hsl(200, 10%, 7%);
	--bgLightest: hsla(0, 100%, 100%, 0.2);
	--bgContrast: hsla(0, 100%, 100%, 0.4);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

b {
	font-weight: 600;
}

html {
	height: 100vh;
}

html, body {
	width: 100%;
	-webkit-tap-highlight-color: transparent;
	-webkit-overflow-scrolling: touch;
	background: var(--bgLighter);
}

.pre {
	white-space: pre;
	font-family: monospace;
}

/* tiny phones */
@media screen and (max-width: 370px) {
	#groupRoot { margin: 0 !important; }
	.group { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important; }
}
/*
@media print {
	body[data-page='cal'] *:not(#printTarget) * {
		display: none !important;
	}
}*/

/*
#printTarget {
	height: 100%;
	position: absolute;
	width: 100%;
	background: black;
	z-index: 100000;
}*/

.tabulator-print-table td,
.tabulator-print-table th {
	border-bottom: 1px solid #B4B4B4 !important;
	font-size: 9pt !important;
}

.tabulator-print-table th {
	text-align: center !important;
}

.tabulator .tabulator-tableholder {
	height: unset !important;
}

/*
.tabulator-print-table-row {
	break-inside: avoid !important;
	break-after: avoid !important;
}

.calPrintCellParent {
	break-before: avoid !important;
}*/
/*
.tabulator-print-table-row:nth-child(18n) {
	break-after: always;
}*/

.tabulator-row.tabulator-row-even {
	background-color: inherit;
}
/*
.tabulator-row.calPrintCellParent {
	background-color: #efefef;
}*/

.tabulator-print-table-row:not(.calPrintCellParent) {
	border-top-width: 4px !important;
	border-style: double !important;
}

.calPrintFaux {
	width: 100%;
	line-height: 200%;
	display: grid;
	grid-template-rows: 1fr;
}

.calPrintFaux div {
	print-color-adjust: exact;
	color: #AAA !important;
	padding-left: 0.5ex;
	background: hsl(0deg, 0%, 97%);
}

.calPrintNote {
	grid-template-columns: repeat(1, 1fr);
}

.calPrintNums {
	grid-template-columns: repeat(6, 1fr);
}

.calPrintNums div {
	border-left: 1px solid #B4B4B4;
}

.calPrintNums div b {
	color: #000 !important;
}

.printOption {
	display: inline;
	font-size: 10pt;
	margin: 0.5ex;
	background: rgba(255,255,255,0.2);
	padding: 0 0.75ex;
	border-radius: 0.5ex;
	cursor: pointer;
}

.printOption[data-active='1'] {
	background: rgba(97, 87, 207, 0.66);
}

.calPrintNums .t0, .calPrintNums .m0, .calPrintNums .m1, .calPrintNums .m2 {
	border-left: none;
}

.calPrintNums .t1, .calPrintNums .t2 {
	border-left-width: 4px;
	border-left-style: double;
}

.calPrintNums .t0, .calPrintNums .m0 {
	background: hsl(0deg, 0%, 97%);
}

.calPrintNums .t1, .calPrintNums .m1 {
	background: hsl(0deg, 0%, 97%);
}

.calPrintNums .t2, .calPrintNums .m2 {
	background: hsl(0deg, 0%, 97%);
}

.printColumn {
	cursor: pointer;
	padding-left: 0;
	padding-right: 0;
	text-align: center;
}

.printSelection {
	opacity: 0.75;
}

/* bigger screens */
@media screen and (min-width: 724px ) {
	#groupRoot .list {
		grid-auto-rows: 80px !important;
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		margin: 0 auto;
		padding-top: 15px;
		width: 100%;
	}
	
	html #groupRoot .indexFlex {
		gap: 9px;
	}
	
	#groupRoot .list.width1 { max-width: 222px;  min-width: 222px; }
	#groupRoot .list.width2 { max-width: 454px;  min-width: 454px; }
	#groupRoot .list.width3 { max-width: 686px;  min-width: 686px; }
	#groupRoot .list.width4 { max-width: 918px;  min-width: 686px; }
	#groupRoot .list        { max-width: 1150px; min-width: 686px; }
	
	.groupOpt.logout {
		margin-top: 0 !important;
	}
}

/* desktop monitors */
/*
@media screen and (min-width: 1300px) {
	:root {
		--bgLighter: hsl(200, 10%, 8%);
	}
}*/

body {
	font-family: 'Noto Sans', sans-serif;
	font-weight: 400;
	font-size: 1rem;
	color: #FFF;
	
	position: fixed;
	height: 100%;
	
	display: flex;
	flex-flow: column nowrap;
	
	user-select: none;
	-webkit-user-select: none;
}

body > div {
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}

h1, h2, h3 { 
	font-weight: normal;
	font-style: normal;
	display: inline-block;
}

.hidden { display: none !important; }
.hover { cursor: pointer; }
.hover:hover { opacity: 0.9; }
.hover:active { opacity: 0.8; }
.hover.disabled { opacity: 0.3; cursor: not-allowed; }
.templateUnchanged #calModalCopy, .templateUnchanged #calModalCopyOpen { opacity: 0.3; cursor: not-allowed; }

form.auto input,
form.auto label {
	cursor: pointer;
}

.cal form.block fieldset {
	display: block;
	margin-bottom: 3ex;
}



.resLink {
	margin: auto;
	text-decoration: none;
	position: relative;
	margin-right: 4ex;
}

.resLink a {
	text-decoration: none;
	color: #6698D9;
}

.resLink::after {
	font-size: 60%;
	position: absolute;
	top: 1ex;
	right: -8ex;
}

.resLink[data-rev="1"]::after { content: "Rev 1"; }
.resLink[data-rev="2"]::after { content: "Rev 2"; }
.resLink[data-rev="2014"]::after { content: "2014"; }




/* - - - - - - - - - - - - -
- - - LOADING BAR
 - - - - - - - - - - - - - */
/* adapted from https://codepen.io/snak3/pen/QOOqGW */
#loadingBar {
	position: absolute;
	z-index: 99999;
	transition: width cubic-bezier(.65,.05,.36,1) 0.25s;
	overflow-y: visible;
	overflow-x: clip;
}

#loadingBarContainer {
	position: relative;
}

#loadingBar, #loadingBar div {
	background: #1b9e77; 
	height: 2px;
	border-radius: 1px;
}

#loadingBar.fault {
	background: hsl(44.8, 92.6%, 36.9%)
}

#loadingBar div {
	border-bottom: var(--borderContrast);
	position: absolute;
	top: 0;
	right: 100%;
	bottom: 0;
	left: 0;
	width: 15%;
	animation: borealisBar 1.5s cubic-bezier(.65,.05,.36,1) infinite;
	background: hsla(0,0%,0%,0.5);
}

@keyframes borealisBar {
    0% {  left: -15%;   right:  100%  }
  100% {  left:  100%;  right: -15%   }
}


/*
.tt {
	position: relative;
	display: inline-block;
}

.tt .ttText {
	visibility: hidden;
	background-color: black;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
}

.tt .ttText.ttLeft {
	position: absolute;
	z-index: 1;
	top: -5px;
	right: 105%;
}

.tt:hover .ttText {
	visibility: visible;
}*/


/* - - - - - - - - - - - - -
- - - HEADER
 - - - - - - - - - - - - - */
#headerRoot {
	padding-top: env(safe-area-inset-top);
	background: var(--bgDarkest);
	border-bottom: var(--borderContrast);
	box-shadow: var(--shadowDiluteBlack), var(--shadowContrast);
	z-index: 1000;
}

#header {
	height: 50px;
	font-size: 1.2em;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	max-width: 1150px;
	margin: auto;
	position: relative;
	overflow: hidden;
}

#header #testBacker {
	position: absolute;
	max-width: 1150px;
	opacity: 0.15;
	line-height: 1.3;
	top: 0;
	text-align: center;
	font-size: 90%;
	z-index: -10;
}

#header div {
	flex: 0 0 0;
}

#header .icon {
	height: 100%;
	width: 0;
	position: relative;
}

#header .icon img {
	object-fit: contain;
}

#header #logo {
	filter: grayscale(100%) brightness(4);
}

#header #icons {
	direction: rtl;
}

#header #icons img {
	filter: invert(0.9);
	padding: 14px 8px 10px 6px;
	box-sizing: content-box;
	opacity: 0.9;
}

#fireCount {
	position: absolute;
	background: #cc0e0e;
	top: 7px;
	right: 3px;
	padding: 0.2ex 0.5ex 0.4ex;
	line-height: 100%;
	border-radius: 0.5ex;
	font-size: 11pt;
	box-shadow: var(--shadowContrast);
	font-weight: bold;
	text-shadow: 0 0 2px hsl(0, 0%, 50%);
}

#fireCount:empty {
	display: none;
}

#header #logo img {
	padding: 5px 4px 3px 6px;
	box-sizing: content-box;
}

#header #pageTitle {
	flex: 1 1 auto;
	white-space: pre;
	text-align: center;
}

.tabs:not(.selector), #loadingBarContainer {
	display: flex;
	margin: auto;
	max-width: 450px;
}

#homeCalHead {
	border-bottom: var(--borderBright);
	background: hsla(0,0%,0%,0.25);
}

#homeCalHead .tabs {
	max-width: 350px;
}

#homeCalHead .tabs div {
	padding: 0.5rem 0 0.55em;
}

.tabs div {
	text-align: center;
	padding: 0.75rem 0 0.65rem;
	cursor: pointer;
	color: hsl(0,0%,65%);
	font-size: 10.5pt;
	flex: 1 1 100px;
	margin-bottom: -1px;
}

.tabs .currentTab {
	color: hsl(0,0%,100%);
	box-shadow: var(--shadowActive);
	cursor: default;
}

#tab_⚙ {
	flex: 1 1 30px;
}

.specialLine {
	text-align: center;
	margin-bottom: 1em;
}

#genDeviceId.populated::before {
	content: 'Token copied to clipboard';
	margin-bottom: 1em;
	display: block;
	color: white;
	text-align: center;
}

#genDeviceId.populated.error::before {
	content: 'Error';
}

#authMethod::before {
	content: "Auth method: ";
}

#tokenHash::before {
	content: "Hash: ";
}

#genDeviceId:not(.populated) {
	cursor: pointer;
	font-style: italic;
}

#genDeviceId {
	word-wrap: anywhere;
	word-break: break-all;
	width: 90%;
	margin: auto;
}

#genDeviceId.populated {
	color: rgba(255,255,255,0.5);
	text-align: justify;
}


/* - - - - - - - - - - - - -
- - - BODY
 - - - - - - - - - - - - - */
#groupRoot {
	overflow: auto;
	flex: 1;
	display: flex;
	flex-flow: column nowrap;
	padding-right:  calc( env(safe-area-inset-right )*0.7 );
	padding-left:   calc( env(safe-area-inset-left  )*0.7 );
	padding-bottom: calc( env(safe-area-inset-bottom)*0.7 );
}

#alarms, #systemAlarms, #fire, .group {
	padding: 15px 8px;
}

#systemAlarms:empty {
	display: none;
}

#alarms, #systemAlarms, #fire {
	padding-bottom: 0;
	display: flex;
	flex-direction: column;
	max-width: 860px;
	width: 100%;
	margin: 0 auto;
}

.group {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}

.group:not(.currentGroup) {
	display: none !important;
}

.group .groupOpt, .box, #alarms div, #systemAlarms div, #fire div, .notice {
	color: #FFF;
	background: var(--bgDarkest);
	border: var(--borderContrast);
	box-shadow: var(--shadowContrast), var(--shadowDiluteBlack);
	border-radius: var(--radius);
}

#fire div span {
	white-space: nowrap;
}

#fire div {
	line-height: 150%;
	padding: 0.5ex !important;
}

#fire div[data-priority="fire"] {
	background: #4f1313;
}

#fire div[data-priority="system"] {
	opacity: 0.5;
	color: #DDD;
}

/* - - - - - - - - - - - - -
- - - INDEX
 - - - - - - - - - - - - - */
#groupRoot .indexFlex {
	flex: 1 1 auto;
	align-content: start;
	grid-auto-rows: minmax(48px,1fr);
	gap: 7px;
}

#indexLeft {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

#groupRoot .signin {
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
}

#groupRoot .signin div {
	flex: 0 0 auto;
	text-align: center;
	max-width: 460px;
	width: 100%;
}


/* - - - - - - - - - - - - -
- - - CALIBRATIONS
 - - - - - - - - - - - - - */
.modalOverlay {
	display: none;
}

#mapModalOverlay {
	/*display: initial;*/
}

#calModalFailComment {
	width: 100%;
}

#calModal table {
	margin: 0;
	table-layout: fixed;
}

#calModalTarget tbody input {
	width: 5.5em;
}

#groupRoot #homeCalGroup, #calModalOverlay {
	background: hsla(240, 9%, 11%, 0.9);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

#calModal, #calModal td, #calModal th {
	color: #000;
}
/*
#calModal th {
	font-size: 11pt;
}*/

#calModal {
	width: 25em;
	margin: 8ex auto auto;
	padding: 5em 1em 1.5em;
}

.modalOverlay .modal, .modal .close, #mapModalTarget, #mapModalZoom {
	background: hsl(0, 0%, 90%);
	border-radius: var(--radius);
}

.modalOverlay .modal {
	position: relative;
}

#calModalTargetShadow {
	display: none;
}
/*
#calModal hr {
	display: none;
}*/

#calModal label {
	font-weight: 500;
}

#calModalCopy, .modal .close, #calModalCopyOpen {
	position: absolute;
	top: 0;
	box-sizing: content-box;
}

#calModalCopyOpen {
	margin-top: 1ex;
}

#calModal .singleLineField {
	display: flex;
	flex-direction: row;
}
#calModal .singleLineField label {
	flex: 1 0 50%;
}
#calModal .singleLineField select {
	text-align: right;
	flex: 1 1 50%;
}

#calModalCopy {
	left: 0;
	padding: 0.75ex 0.75ex 0 0.75ex;
}

#calModalCopyOpen {
	top: 2.5ex;
	left: 14px;
	padding: 0 0.75ex 0 6px;
	margin: 0.75ex;
}

#calModal td, #calModal th {
	padding-left: 0;
	padding-right: 0;
}

.templateUnchanged #calModalCopy, .templateUnchanged #calModalCopyOpen { opacity: 0.3; cursor: not-allowed; }

.modal .hover {
	color: #000;
	transition: 0.1s color ease-in-out;
}

#calModal:not(.templateUnchanged) .hover:hover {
	color: hsl(240, 80%, 60%);
}

#mapModalZoom {
	position: absolute;
	width: 300px;
	height: 300px;
}

.modal .close {
	right: 0;
	padding: 0.75ex 0.75ex 0.4ex 0.75ex;
}

#calModalCopy img { float: left }
.modal .close img { float: right }

#calModalCopy::after, .modal .close::before, #calModalCopyOpen::after {
	font-size: 10pt;
	vertical-align: top;
	padding: 0 0.8ex 0 1ex;
}

#calModalCopy::after {
	content: "copy report";
}

#calModalCopyOpen::after {
	content: "⤷ and open W.O.";
}

.modal .close::before {
	content: "close";
}

#groupRoot #homeCalGroup.fullscreen,
.modalOverlay {
	position: absolute;
	left: 0;
	right: 0;
	border: none;
	height: 100%;
	min-width: 100%;
	min-height: 100%;
}

.modalOverlay {
	top: 0;
	bottom: 0;
	background: hsla(240, 9%, 11%, 0.9);
	margin: 12px;
	position: sticky;
	min-width: unset;
	z-index: 1000;
}

#groupRoot #homeCalGroup {
	flex: 0 0 auto;
	padding: 0;
	z-index: 1000;
	box-shadow: var(--shadowDiluteBlack);
	overflow-y: scroll;
}

#homeCalGroup > div:not(#homeCalExp), #calModalOverlay {
	margin-left: 12px;
}

#mapModalOverlay {
	position: absolute;
}

#mapModalTargetContainer {
	margin-top: 2em;
}

#mapModalTarget {
	width: 100%;
	cursor: crosshair;
}

#homeCalExp {
	background: var(--bgLightest);
	width: 12px;
	height: 100%;
	float: left;
	position: sticky;
	top: 0;
	border: 1px solid var(--bgLightest);
	border-width: 0 1px 0 2px;
	display: flex;
	align-items: center;
	color: #FFF;
	font-size: 8pt;
	text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000, 0 0 1px #000;
	word-wrap: anywhere;
	cursor: pointer;
	margin-left: -1px;
	line-height: 170%;
	box-shadow: 0 0px 10px rgba(0,0,0,0.4)
}

.fullscreen #homeCalExp {
	transform: scale(-1,1);
	border-width: 0 2px 0 1px;
}

#calModal select {
	width: 100%;
	padding: 0 2px 0 6px;
}

#calModal select.short {
	width: initial;
}

#calModalTarget > div {
	margin-bottom: 2ex;
}

#homeCalGroup #calModal td, #homeCalGroup #calModal th {
	padding: 0;
}

#groupRoot #instGroup {
	flex: 1 1 auto;
	background: hsla(240, 9%, 11%, 0.9);
	padding: 0;
}

#instListDev td:nth-child(2) {
	padding-right: 6px;
}

#instListPar {
	text-align: right;
}

#instListPar td:first-child,
#instListPar th:first-child {
	text-align: center;
}

@media screen and (max-width: 1300px) {
	#groupRoot #homeCalGroup, #groupRoot #homeCalGroup.fullscreen {
		position: absolute;
		left: 0;
		right: 0;
		border: none;
		height: 100%;
		min-width: 100%;
	}
	
	#homeCalExp {
		display: none;
	}
	
	#homeCalGroup > div:not(#homeCalExp) {
		margin-left: 0;
	}
	
	#groupRoot #homeCalGroupRoot {
		padding: 0 env(safe-area-inset-right) 8px env(safe-area-inset-left);
	}
	
	.cal td:not(:last-child) {
		word-break: keep-all;
	}
}

.multiTable table {
	width: unset;
	white-space: nowrap;
}

#calModalTarget table {
	width: 100%;
}

.filterLabel {
  display: block;
  margin: 0 0.4em;
  font-size: 10pt;
  opacity: 0.9;
}

/*
body[data-page="cal"] .tabs {
	max-width: 600px;
}*/

.cal table td {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.group.cal {
	display: block;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.cal table {
	margin: 1em auto;
	/*width: 650px;*/
	border-collapse: collapse;
	text-align: left;
	table-layout: auto;
	user-select: text;
	-webkit-user-select: text;
}
/*
#group_CompletedWOs table {
	width: 750px;
}*/

.cal form fieldset[data-type="search"] input {
	width: 120px !important;
	font-size: 11pt;
}

.cal tbody {
	border-top: 2px solid hsla(0, 0%, 100%, 0.15);
}

.cal .fade { opacity: 0.3; }
.cal tr.attn { background: hsla(0,98%,30%,20%) }
.cal tr.due { background: hsla(40,60%,25%,20%); }
.cal tr.attn.due { background: hsla(15.556, 78.261%, 27.059%, 0.2); }
.cal tr.printed { opacity: 0.3 }

.cal table  td:only-child {
	text-align: left !important;
}

.cal form {
	margin: 0 auto 1em;
	display: block;
}

.cal form fieldset {
	padding: 0.4em 1.5em 0.5em 1em;
	display: inline-block;
	border: var(--borderContrast);
	border-radius: var(--radius);
	margin: 0.5ex;
}

.cal form input[type="submit"] {
	display: block;
	border: var(--borderContrast);
	box-shadow: var(--shadowDiluteBlack);
	border-radius: calc( var(--radius)/2 );
	padding: 0.7ex 10ex;
	margin-top: 1ex;
	width: 100%;
	max-width: 15em;
	margin: 0.5ex auto 0;
}

input[type="radio"] {
	caret-color: transparent;
}

.cal .hiddenRadio {
	-webkit-appearance: none;
	appearance: none;
	display: none;
}

.cal fieldset legend {
	padding: 0 0.4em;
}

.cal fieldset input {
	margin: 0.4em;
}

.cal .multiTable {
	display: flex;
	margin-top: 0.5em;
}

.cal .multiTable::before, .cal .multiTable::after { content:''; flex:1; }

.cal .suppress {
	opacity: 0.5;
	transition: opacity 1s cubic-bezier(.23,1,.32,1);
}
.cal .suppress .calButton {
	opacity: 0.75
}

.cal .multiTable th {
	height: 3.5em;
	vertical-align: bottom;
}

.cal:not(#calModalOverlay) thead {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--bgLighter);
}

.cal:not(#calModalOverlay) thead th {
  position: relative;
  left: -1px;
  background: var(--bgLighter);
	padding: 0 4px 8px;
}

.cal .heading {
	text-align: center;
	height: unset;
	font-size: 160%;
	font-weight: 500;
	padding: 6px 0 !important;
}

.cal th {
	font-weight: 500;
	padding-bottom: 3px;
}

.cal .multiTable table {
	flex: 0 0 auto;
	width: unset;
	margin: 0 2ex 2ex;
}

#fullCalSchedule {
	margin: auto;
}

#fullCalSchedule div {
	width: 9.5ex;
	display: inline-block;
	font-size: 7pt;
	line-height: 100%;
	vertical-align: top;
	background: hsl(190deg,50%,20%);
}

#instListPms td:last-child, #instListPms th:not(.heading):last-child {
	text-align: right;
}

#fullCalSchedule div b {
    background: black;
    width: 100%;
    display: inline-block;

}

.cal table td:first-child, .cal table th:first-child {
	padding-left: 6px;
}

body[data-page="cal"] #tabs {
	max-width: 600px;
}

.calButton {
	filter: invert();
	position: absolute;
	top: 1px;
	opacity: 0.9;
	margin-left: 1.25ex;
	padding: 2.5px;
}

.cal td {
	border: 1px solid hsla(0, 0%, 100%, 0.15);
	/*border-width: 1px 0 1px;*/
	color: hsla(0,0%,100%,0.85);
	position: relative;
	padding: 0 4px;
}

.cal td span {
	display: block;
	overflow: clip;
	text-overflow: ellipsis;
	white-space: nowrap;
	position: absolute;
	top: 0;
	max-width: 100%;
}

.cal td a {
	text-decoration: none;
	position: relative;
	color: hsl(240, 100%, 80%);
}

#homeCalGroup td:first-child, #homeCalGroup th:first-child, .cal .noWos {
	padding-left: 6px;
}
/*
table:not(.multiTable) td:last-child, th:last-child {
	padding-right: 6px;
}*/

.cal .notice {
	margin: 15px 8px;
}

#groupRoot .signin::before { flex: 1 1 auto;  content: ''; }
#groupRoot .signin::after  { flex: 2 2 auto;  content: ''; }

.group .groupOpt {
	font-size: 1.15em;
	text-decoration: none;
	text-shadow: 0 0 2px #000;
	display: flex;
	border-raidus: 8px;
}

.group .groupOpt span {
	margin: auto;
}

#opt_cal {
	background: hsla(240, 13%, 12%, 0.9);
}

#opt_fire {
	background: hsla(0, 13%, 12%, 0.9);
}

#opt_logout {
	background: hsla(39, 15%, 12%, 0.9);
	margin-top: 10px;
}


/* - - - - - - - - - - - - -
- - - LOGIN
 - - - - - - - - - - - - - */
#msLogin {
	width: 100%;
	margin: 2ex auto;
	max-width: 140px;
	display: block;
	box-shadow: var(--shadowDiluteBlack);
}

.loginMsg:empty {
	display: none;
}

#addToHomeScreen {
	display: none;
}

#addToHomeScreen img {
	margin: 0 2px -4px;
	filter: drop-shadow(0 0 1px rgba(255,255,255,0.1));
}


/* - - - - - - - - - - - - -
- - - BOXES
 - - - - - - - - - - - - - */
.box {
	display: flex;
	flex-flow: column nowrap;
}

.box .boxHeader {
	margin-top: 16px;
	text-align: center;
}

.box .boxHeader h3 {
	font-size: 24px;
	text-decoration: underline;
	text-decoration-thickness: 0.05rem;
	font-weight: 300;
}

.box .boxContents {
	display: flex;
	flex: 1 1 auto;
	flex-flow: column nowrap;
	margin: 30px 0;
	justify-content: center;
}

.plotBox {
	position: relative;
}

.plotBox .histIcon {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 26px;
	padding: 3px;
	opacity: 0.5;
	display: none;
}

.plotBox .boxContents {
	margin: 0;
}

.plotCont {
	margin: auto;
	padding: 14px 8px 16px;
	
	width: 100%;
	max-width: 400px;
	
	height: 230px;
	cursor: pointer;
}

.plotCont.withLegend {
	padding-top: 6px;
	height: 246px;
}

.selector {
	display: flex;
	border-top: var(--borderContrast);
}

.selector div {
	flex: 1 1 auto;
	padding: 0.35rem;
	margin: -1px 0 0;
	transition: ease-in-out 0.05s;
}

.selector div.currentTab {
	box-shadow: inset 0 1px hsla(0,0%,100%,0.275);
}


.lcdRow {
	display: flex;
	margin: 3px;
	flex: 0 0 31px;
	text-align: center;
	overflow: hidden;
}

.lcdRow > * {
	align-self: center;
}

/*
.lcdRow span {
	line-height: 31px;
}
*/

.lcdRow > div { flex: 0 0 200px; }
.lcdRow::before, .lcdRow::after { flex: 1 1 200px; content: ''; }

.itemLcd {
	text-align: center;
	font-size: 19px;
	flex: 0 0 90px;
	position: relative;
}

.item {
  font-weight: 500;
}
/*
.item:not(.itemLcd)::before {
  content: ' ';
  white-space: pre;
}*/


.itemLcd::before {
	content: '';
	background: hsla(0,0%,80%,0.22);
	width: 1px;
	display: inline-block;
	position: absolute;
	top: 15%;
	bottom: 5%;
	left: 0;
}

/*
.itemLcd::before {
  content: '|';
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0;
  color: hsla(0,0%,80%,0.22);
  margin: -0.1rem 0 0 -0.23rem;
  font-size: 19px;
  font-weight: 300;
}*/

.box .boxHeader span, .itemUnits {
	opacity: 0.4;
	font-size: 11pt;
	position: relative;
}

.box .boxHeader span {
	padding-left: 8px;
	top: -2px;
}
.itemUnits { padding-left: 4px; }


/* - - - - - - - - - - - - -
- - - ALARMS
 - - - - - - - - - - - - - */
#alarms:empty {
	display: none;
}

#fire:empty::after {
	content: "No notable events found in past 24 hours";
	margin: auto;
	text-align: center;
}

#alarms div, #systemAlarms div, #fire div, .notice {
	margin: 0 0 10px;
	font-size: 1em;
	background: hsla(0,0%,100%,0.08);
	text-align: center;
	padding: 0.5ex 0.5ex 0.3ex;
	text-shadow: 0 0 2px #000;
	margin-bottom: 6px;
}

.notice.instUpdate {
	background: none;
	box-shadow: none;
	border: none;
}

#alarms div[data-priority="0"] { order: 5; }
#alarms div[data-priority="1"] { order: 4; background: #735959 }
#alarms div[data-priority="2"] { order: 3; background: #AA5553 }
#alarms div[data-priority="3"] { order: 2; background: #913837 }
#alarms div[data-priority="4"] { order: 1; background: #7C2320 }
#systemAlarms div { background: #278A81 }




.box .singleLine {
	display: flex;
	margin: 2.5ex 0 2ex;
}

.box .singleLine .lcdRow {
	flex: 1 1 auto;
    justify-content: center;
}

.box .singleLine .lcdRow > div {
	flex: 1 1 auto;
	flex: none;
}

.box .singleLine .lcdRow > div:after {
	content: ':  ';
	white-space: pre;
}

.box .singleLine .itemLcd {
	border: var(--borderContrast);
	border-radius: 3px;
	background: #000;
	padding-top: 1px;
}

.box .singleLine .itemLcd::before { content: none; }

.box .singleLine .lcdRow::before, .box .singleLine .lcdRow::after { display: none }


td[data-check] {
	color: rgba(0,0,0,0);
	opacity: 0.5;
}

td[data-check="p"] {
	background: green;
}

td[data-check="f"] {
	background: red;
}

.center {
	text-align: center;
}


/* - - - - - - - - - - - - -
- - - Instrument details
 - - - - - - - - - - - - - */
#instrDetails {
	display: none;
	position: absolute;
	width: 320px;
	background: hsl(0, 0%, 95%);
	z-index: 100000;
	padding: 20px 4px;
	border-radius: var(--radius);
	box-shadow: var(--shadowHintBlack), var(--shadowHintBlack), var(--shadowDiluteBlack), var(--shadowDiluteBlack);
	color: black !important;
}

#instrDetails::before {
	content: "";
	position: absolute;
	top: 100%;
	right: 100%;
	margin-right: -5ex;
	border-width: 10px;
	border-style: solid;
	border-color: hsl(0, 0%, 95%) transparent transparent transparent;
}

#instrDetails td {
	padding: 0 6px;
}

.compid:hover {
	filter: saturate(0.7) brightness(1.5);
}

#instrDetails .padded td {
	padding: 6px 6px 0;
}

#instrDetails td:first-child {
	text-align: right;
	vertical-align: top;
	opacity: 0.8;
	text-transform: lowercase;
}