:root {
	--erieblue: #1779ba;
}

/* stop text selection on every element */
* {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

@font-face {
	/***
	 * 7segments font found via dafont.com
	 *
	 * SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
	 *
	 * Copyright (c) 2020,  “rikyozone”
	 *  (https://fontstruct.com/fontstructors/1749823/rikyozone)
	 */
	font-family: scale;
	src: url(./fonts/7segments.ttf);
}

@font-face {
    font-family: 'Inconsolata Regular';
    src: url('./fonts/Inconsolata-Regular.woff2');
}

.scale {
	font-family: scale;
	padding: 10px;
	margin: 0;
	background-color: #280000;
	color: #FF0000;
}

.clock {
	white-space: nowrap;
}

.popover {
	max-width: none;
}

html, body {
	height: 100vh;
	display: flex;
	flex-direction: column;
	overscroll-behavior: none;
}

#identify {
	opacity: 75%;
	display: none;
	width: 100%;
	height: 100%;
	color: #ff0000;
	position: absolute;
	top: 0em;
	right: 0em;
	background-color: #ff0000;
}

/* Show & Hide Pages */
.main-content {
	margin-bottom: -20px;
	padding-top: 20px;
}
.page-link {
	color: #0000ff;
	padding: 10px;
	border-top: 2px solid lightgray;
}
.selected-page-link {
	color: #ff0000;
}
.page {
	width: 100%;
	height: 100%;
	min-height: 0px;
	display: none;
	overflow: scroll;
	padding: 5px;
}
.selected-page {
	display: block;
}

/* .modal-body {
	background: url('../images/bg.png');
	background-size: cover;
} */

.disconnected-notification {
	opacity: 75%;
	border: 1px solid #5050aa;
	color: #303066;
	position: absolute;
	top: 1em;
	right: 1em;
	padding: 1em;
	background-color: #c0c0ff;
	display: flex;
	flex-direction: column;
	z-index: 6000;
}

#error-overlay-section {
	opacity: 85%;
	display: none;
	position: absolute;
	top: 4em;
	left: 4em;
	overflow: scroll;
	max-height: calc(100vh - 8em);
}

.error-overlay {
	border: 1px solid red;
	color: black;
	background-color: firebrick;
	display: flex;
	flex-direction: column;
	z-index: 1;
	width: 23em;
}

#disconnected-mute, .notif-clear-btn {
	background-color: #e0e0ff;
}

.material-divider td {
	height: 5px;
	padding: 0px !important;
	background-color: #c8c8c8;
}

/* DISPATCH QUEUE */
.queue-item:nth-child(odd) {
    background-color: #ddd;
}
.queue-item:nth-child(even) {
    background-color: #eee;
}

/* active tabs bar */
#active-tabs-bar {
	overflow-x: auto;
	overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
	margin-top: -20px;
	padding-top: 20px;
}

.oneline {
	white-space: nowrap;
}

#batch-tabs-row {
	box-shadow: 0px 0px 6px 0px;
	margin-top: 20px;
}

.batch-tab {
	margin-bottom: 0;
}

.current-batch-tab {
	box-shadow: 0 0 6px;
	z-index: 2;
	margin-top: -10px;
	margin-left: 6px;

}

.batch-tab button {
	margin: 0;
}

/* batch controls */
#action-lock {
	background: repeating-linear-gradient(-45deg, #222, #222 10px, #444 10px, #444 20px) !important;
	opacity: 100%;
	margin: 0px;
}

#action-cycle-stop {
	background: repeating-linear-gradient(-45deg, #211, #211 10px, #433 10px, #433 20px) !important;
	opacity: 100%;
	right: 0px;
	z-index: 10000 !important;
}

#batchControls {
	background: none;
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	z-index: 9000 !important;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0%;
	display: none;
	/* pointer-events: none; */
	/* touch-action: none; */
	vertical-align: center;
	color: #eee;
}

#batchControls_content {
	flex-direction: column;
	position: absolute;
	width: 80%;
	left: 10%;
	height: 100%;
}

#batchControls_control {
	flex-direction: column;
	visibility: hidden;
	background: none;
}

#batchControls_login {
	flex-direction: column;
	background: none;
}

.action-holder {
	flex: 1;
	flex-direction: column;
}

.action-pb {
	/* unselectable text */
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
	touch-action: none;

	margin: 20px;
	/* padding: 20px; */
	border: 3px solid black;
	background-color: #444;
	color: white;
	opacity: 30%;
	text-transform: uppercase;
	min-height: 85px;
	min-width: 85px;
	text-align: center;
}

/* VMP */
.vmp-controls {
	text-align: left;
	width: 100%;
}

#vmp-overlay {
	background-color: #bdbcbd;
	border-radius: 20px;
	/* margin: 20px; */
	padding: 10px;
	overflow: hidden;
}

#vmp-border {
	border: 2px solid #100e0c;
	height: 100%;
	width: 100%;
}

#vmp-scale-wrapper {
	transform-origin: top left;
}

#vmp-buttons {
	padding: 10px;
}

#vmp-footer {
	border: 2px solid #100e0c;
	padding: 10px;
}

.vmp-pb {
	/* unselectable text */
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
	touch-action: none;

	text-align: center;
	vertical-align: middle;

	height: 96px;
	width: 96px;

	/* margin: 5px; */
}

/* LOGIN DIALOG */
#login-body {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 0em;
	right: 0em;
	margin: 0em;
	padding: 0em;

	z-index: 11000 !important;
	background: lightgray;
	background-image: url('../images/plant4.png');
	background-size: cover;
	background-repeat: no-repeat;
}

#login-error {
	display: none;
	color: #ff3333;
}

#logo {
	height: 4em;
	padding: .5em;
}

#logo_img {
	height: 6em;
	max-width: 30%;
	text-align: center;
}

.log-in-form {
	margin-top: 15%;
	border: 1px solid #000064;
	padding: 1rem;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.3);
}

#login-body input {
	background: white;
	margin-bottom: 2em;
}

#login-title {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	padding-top: 2%;
	color: white;
	font-size: 3.3em;
	text-shadow: 2px 2px 8px #1c3e79;
}

/* PROMPT DIALOG */
#prompt-body {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 0em;
	right: 0em;
	margin: 0em;
	padding: 0em;
	display: none;

	z-index: 5000 !important;
	background: rgba(0,0,0,0.5);
}

#prompt-background {
	background: white;
}

.hold-bar {
	display: none;
	position: absolute;
	bottom: 100px;
	width: 83px;
	margin-left: 1px; /* center the 83px over the 85px width */
	height: 12px;
	border: 1px solid black;
	background: white;
}

.hold-bar > span {
	display: inline-block;
	position: absolute;
	padding: 0;
	margin: 0;
	width: 100%;
	height: inherit;
	background: rgb(20,20,20);
	z-index: 100010; /* above the cycle stop overlay */
}

.cycle-stop-overlay {
	border: 24px dashed yellow;

	/* position over the entire screen */
	height: 100%;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	padding: 0;
	margin: 0;

	/* Shown above the z-index 10000 cycle stop */
	z-index: 10010;

	/* Allow input to pass through */
	pointer-events: none;
	touch-action: none;

	/* Text adjustments to show "CYCLE STOP" on the top*/
	color: black;

	opacity: 0.75;

	display: none; /* manually set to flex when enabled */
	align-items: center;
}

.cycle-stop-overlay > .notice {
	font-size: 7em;
	font-color: rgba(0,0,0,0.2);
	text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;

	/* center notice text horizontally */
	text-align: center;
	width: 100%;
}

/* Adjust Dialog */
/* NOTE(dev): Used to limit input, essentially making it a modal */
.batch-adjust {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.25);
	z-index: 1000;
	display: none;
}

.batch-adjust-dialog {
	position: absolute;
	top: 10%;
	right: 100px;
	min-width: 400px;
	max-width: 50%;
	max-height: 80%;
	box-shadow: 0 0 6px;
	border-radius: 6px;
	background: white;
	display: flex;
	flex-direction: column;
}

.batch-adjust-header {
	flex-grow: 0;
	text-decoration: underline;
	width: 100%;
}
.batch-adjust-content {
	flex-grow: 1;
	overflow: scroll;
}
.batch-adjust-footer {
	flex-grow: 0;
	padding-top: 5px;
	border-top: 1px solid lightgray;
}

.batch-adjust-title > h3 {
	flex-grow: 1;
}

#batch-adjust-trim {
	text-align: right;
}
#water-trim-span {
	float: right;
}