html {
	width: 100%;
	height: 100%;
	font-family: Arial, Helvetica, sans-serif;
}

body {
	width: 100%;
	height: 100%;
	margin: 0;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	background-color: #222;
	background-image: url("/imgs/background.jpeg");
	background-size: cover;
	box-shadow: inset 0 0 0 2000px #000000C0;

	color: white;
}

#login-container {
	background-color: #4f4f4f;
	border-radius: 0.2em;
	padding: 2em;
	width: 20em;
	/* border: 1px solid black; */
	box-shadow: white 0px 0px 1px;
}

#logo {
	width: 100%;
}

form {
	text-align: right;
	display: flex;
	flex-direction: column;
}

form > button {
	margin-bottom: 0.5em;
}

.form-row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: baseline;
}

.form-row button, .form-row input
{
	height: 2em;
}

button {
	border: none;
	border-radius: 0.2em;
	padding: 0.5em 1em;
	font-size: 1em;
	background-color: #262626;
	color: white;
	transition: 0.3s background-color;
	cursor: pointer;
}

button:disabled {
	background-color: #262626 !important;
	color: #AAAAAA !important;
}

button:hover {
	background-color: #372d14;
}

button:active {
	background-color: #000000;
	transition: none;
}

label {
	display: block;
	width: 100%;
	text-align: left;
}

.form-row > label {
	width: fit-content;
}

input {
	display: block;
	/* width: 100%; */
	height: 2em;
	color: white;
	background-color: #FFFFFF11;
	border: none;
	border-bottom: 1px solid white;
	border-radius: 0.2em;
	transition: 0.2s box-shadow;
	margin-bottom: 1em;
	flex-grow: 1;
}

input:focus-visible {
	outline: none;
	box-shadow: #ffcf5e 0px 10px 7px -7px;
}

input:disabled {
	background-color: #00000000;
	color: #FFFFFFBB;
}

#error-message {
	color: red;
	margin-bottom: 1em;
}
.error-message {
	color: red;
	margin-bottom: 1em;
}

.fullscreen-page {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	display: flex;
}

.left-block {
	width: 20em;
	height: 100%;
}

.right-block {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.top-bar {
	width: 100%;
}

.content {
	width: 100%;
	height: 100%;
	flex-grow: 1;
	overflow-y: auto;
}

.menu {
	width: 100%;
	height: 100%;
	margin: 0;
	background-color: #010f0170;
	display: flex;
	flex-direction: column;
	backdrop-filter: blur(50px);
}

.menu-entry {
	margin: 0;
	padding: 0;
}

.menu-entry > a {
	margin: 0;
	padding: 0.5em 1em;
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	text-decoration: none;
	color: white;
}

.menu-entry:hover {
	background-color: #000000;
}

.menu-entry .icon {
	font-size: 2em;
	vertical-align: middle;
	margin-right: 0.5em;
}

.header {
	width: 100%;
	height: 100%;
	margin: 0;
	background-color: rgba(29, 29, 77, 0.291);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	backdrop-filter: blur(50px);
}

.header-entry {
	margin: 0;
	padding: 0;
}

.header-entry > a {
	margin: 0;
	padding: 1em;
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	text-decoration: none;
	color: white;
}

.header-entry:hover {
	background-color: #000000;
}

.container {
	margin: 1em 0em;
	padding: 1em;
	border-radius: 0.2em;
	box-shadow: white 0px 0px 1px;
	overflow: hidden;
	background-color: #FFFFFF11;
	backdrop-filter: blur(50px);
}

.sensor-widget {
	margin: 2em;
	/* padding: 1.5em; */
	background-color: #0000001C;
	display: inline-block;
	border-radius: 0.2em;
	box-shadow: white 0px 0px 1px;
	overflow: hidden;
	backdrop-filter: blur(50px);
}

.sensor-name {
	padding: 0.3em 1em;
	/* border-bottom: 1px solid white; */
	background-color: #327b32;
}

.sensor-time {
	padding: 0.3em 1em;
	/* border-top: 1px solid white; */
	background-color: #FFF2;
	font-size: 0.7em;
	text-align: right;
}

.sensor-values-container {
	display: flex;
	flex-direction: row;
	align-content: center;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.sensor-value-single {
	text-align: center;

	display: flex;
	flex-direction: row;
	padding: 1em;
	align-items: center;

	/* border-left: 1px solid white ; */
}

.sensor-divider {
	display: block;
	width: 1px;
	height: 5em;
	background-color: white;
}

.sensor-value {
	/* display: inline-block; */
}

.sensor-icon {
	font-size: 3em;
	margin-right: 0.2em;
}

.sensor-value-integer {
	font-size: 4em;
}
.sensor-value-decimal {
	font-size: 2em;
}

.sensor-decimals {
	font-size: .5em;
}

.sensor-unit {
	text-align: center;
	align-self: start;
}

.page-container {
	padding: 2em;
	display: flex;
	flex-direction: column;
}

table {
	/* border: 1px solid white; */
	border-radius: 0.2em;
	box-shadow: white 0px 0px 1px;
	overflow: hidden;
	border-collapse: collapse;
	backdrop-filter: blur(50px);
}

table tbody {
	overflow: auto;
}

table tr {
	/* background-color: #F00; */
}

table th {
	background-color: #327b32;
	padding: 0.5em 1em;
	text-align: left;
}

table td {
	padding: 0.5em 1em;
}

table tr:nth-child(odd) {
	background-color: #00000055;
}

table tr:nth-child(even) {

}

.error-box {
	border: 1px solid red;
	background-color: #4F0000;
	color: #ffc1c1;
	border-radius: 0.2em;
	margin: 1em;
	padding: 1em;
}

.hidden {
	display: none;
}

.table-action-column {
	text-align: right;
	vertical-align: middle;
	width: fit-content;
	padding: 0.3em;
}

.button-small {
	padding: 0.3em 0.5em;
	border-radius: 0.2em;
}

.modal-fullpage {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(50px);
}

.modal {
	border-radius: 0.2em;
	box-shadow: white 0px 0px 1px;

	background-color: #222;
	width: fit-content;
	margin: 1em auto;
	overflow-x: hidden;
	overflow-y: auto;

	padding: 1.5em 2em;
	min-width: 20em;
	max-width: 100%;
}

.modal h1 {
	margin: 0;
	width: 100%;
	border-bottom: 1px solid white;
	margin-bottom: 0.5em;
}

.toast-container {
	position: absolute;
	bottom: 1em;
	right: 1em;
}

.toast {
	width: 10em;
	border-radius: 0.2em;
	border: 1px solid black;
	background-color: #FFFFFF11;
}

.toast.success {
	border-color: #00FF00;
	background-color: #327b32;
}

.toast.error {
	border-color: #FF0000;
}

.toast .titlebar {
	border-bottom: 1px solid white;
	display: flex;
	flex-direction: row;

}

.toast .titlebar .title {
	flex-grow: 1;
	align-content: center;
	font-weight: bold;
}