/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
input[type=number] {
	-moz-appearance: textfield;
}

.login-form {
	max-width: 25rem;
	width: 100%;
}

#connectionLostDialog {
	position: fixed;
	display: none;
	width: 30em;
	height: 10rem;
	top: calc(50% - 5rem);
	left: calc( 50% - 15rem);
	background-color: rgb( 196, 32, 16 );
}

	#connectionLostDialog IMG {
		width: 3rem;
	}
	
	#connectionLostDialog H5 {
		font-weight: bold;
		color: #FFEE33;
	}

.modal-error-dialog {
	background-color: #a33;
	border: 1px solid #a33;
}

	.modal-error-dialog .modal-title {
		color: #ffc;
	}

	.modal-error-dialog .btn-close {
		filter: invert(93%) sepia(6%) saturate(2102%) hue-rotate(37deg) brightness(122%) contrast(117%);
	}

	.modal-error-dialog .message {
		background-color: #fff;
		color: #a33;
		font-weight: bold;
		font-size: 1.0rem;
		justify-content: start;
	}

.form-error {
	display: none;
}

	.form-error .message {
		color: #d33;
		font-weight: bold;
		font-size: 1.0rem;
	}

.link-with-icon {
		color: #0d6efd;
		text-decoration: none;
	}

	.link-with-icon img {
		filter: invert(41%) sepia(92%) saturate(5275%) hue-rotate(209deg) brightness(101%) contrast(99%);
	}

	.link-with-icon span {
		color: #0d6efd;
		text-decoration: none;
	}

	.link-with-icon:hover {
		color: #0047b0;
	}

		.link-with-icon:hover img {
			filter: invert(22%) sepia(84%) saturate(1866%) hue-rotate(202deg) brightness(90%) contrast(113%);
		}

		.link-with-icon:hover span {
			color: #0047b0;
			text-decoration: none;
		}

	.link-with-icon:active {
		color: #198754;
	}

		.link-with-icon:active img {
			filter: invert(37%) sepia(98%) saturate(361%) hue-rotate(100deg) brightness(92%) contrast(90%);
		}

		.link-with-icon:active span {
			color: #198754;
			text-decoration: none;
		}

.home-container DIV.sensor-button {
	display: inline-block;
	width: 100%;
	height: 8rem;
	font-size: 1.4rem;
	text-decoration: none;
	font-weight: bold;
	border-radius: 1rem;
	border: 1px solid #2d7907;
	background: radial-gradient( #aaf683 0%, #89d663 120%);
}

	.home-container DIV.sensor-button A {
		text-decoration: none;
		background: revert;
	}

	.home-container DIV.sensor-button DIV {
		pointer-events: none;
		background: revert;
	}

	.home-container DIV.sensor-button SPAN {
		color: #2d7907;
		text-align: center !important;
		pointer-events: none;
		background: revert;
	}

	.home-container DIV.sensor-button IMG {
		width: 2.5rem;
		filter: invert(27%) sepia(32%) saturate(4793%) hue-rotate(74deg) brightness(100%) contrast(94%);
		margin-right: 0.3rem;
		pointer-events: none;
		background: revert;
	}

	.home-container DIV.sensor-button .svg-image {
		filter: invert(27%) sepia(32%) saturate(4793%) hue-rotate(74deg) brightness(100%) contrast(94%);
	}

	.home-container DIV.sensor-button.warning {
		border-color: #d79904;
		background: radial-gradient( #ffd97d 0%, #dcb96d 120%);
	}

		.home-container DIV.sensor-button.warning SPAN {
			color: #a07100;
		}

		.home-container DIV.sensor-button.warning IMG,
		.home-container DIV.sensor-button.warning .svg-image {
			filter: invert(39%) sepia(99%) saturate(460%) hue-rotate(6deg) brightness(95%) contrast(101%);
		}

	.home-container DIV.sensor-button.critical {
		border-color: #821109;
		background: radial-gradient( #ee6055 0%, #ce4035 120%);
		color: yellow;
	}

		.home-container DIV.sensor-button.critical SPAN {
			color: #fffdce;
		}

		.home-container DIV.sensor-button.critical IMG,
		.home-container DIV.sensor-button.critical .svg-image {
			filter: invert(98%) sepia(92%) saturate(375%) hue-rotate(0deg) brightness(108%) contrast(103%);
		}

	.home-container DIV.sensor-button.disabled {
		border-color: #AFAFAF;
		background: radial-gradient( #EFEFEF 0%, #DFDFDF 120%);
		color: yellow;
	}

		.home-container DIV.sensor-button.disabled SPAN {
			color: #CFCFCF;
		}

		.home-container DIV.sensor-button.disabled IMG,
		.home-container DIV.sensor-button.disabled .svg-image {
			filter: invert(93%) sepia(0%) saturate(935%) hue-rotate(246deg) brightness(117%) contrast(62%);
		}

	.home-container DIV.sensor-button:hover {
		outline: 2px solid #000000;
	}

.element-list{
}

	.element-list .user-name ,
	.element-list .device-name {
		font-weight: bold;
		font-family: var(--bs-font-sans-serif);
		font-size: 1.1rem;
		color: #000;
	}

	.element-list .user-email,
	.element-list .device-id {
		font-size: 0.9rem;
	}

	.element-list .element {
		padding: 5px;
		border: 1px solid #8e8286;
		border-radius: 5px;
	}

	.element-list .col-12:nth-child(2n) .element {
		background-color: #FAFAFA;
	}

	.element-list .col-12:nth-child(2n+1) .element {
		background-color: #EEEEEE;
	}

	.element-list .col-12 .element:hover {
		border-color: #369;
		background-color: #ddd;
	}

	.element-list .edit-button {
		border-radius: 3px;
		background-color: #f8f9fa;
		border: 1px solid #dee2e6;
		width: 100%;
		height: 100%;
		min-height: 2rem;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		font-size: 0.9rem;
		font-family: var(--bs-font-sans-serif);
		color: #000;
		text-decoration: none;
	}

		.element-list .edit-button:hover {
			border: 1px solid #414549;
			background-color: #e8e9ea;
		}

		.element-list .edit-button:active {
			background-color: #FFFFFF;
		}

		.element-list .edit-button img {
			width: 1.3rem;
			padding: 0px;
		}

		.element-list .user-button {
			width: 100%;
			height: 100%;
			min-height: 2rem;
			display: flex !important;
			align-items: center !important;
			justify-content: center !important;
		}

		.element-list .device-button {
			width: 100%;
			min-height: 2rem;
			display: flex !important;
			align-items: center !important;
			justify-content: center !important;
		}

	.element-list .sensor-button {
		width: 100%;
		height: 5rem;
		display: flex !important;
		flex-direction: column;
		align-items: center !important;
		justify-content: center !important;
	}

		.element-list .sensor-button img {
			width: 1.5rem;
		}

	.element-list .toggle-button {
		border-radius: 3px;
		background-color: #f8f9fa;
		border: 1px solid #dee2e6;
	}

		.element-list .toggle-button IMG {
			filter: invert(100%) brightness(80%);
		}

		.element-list .toggle-button:hover {
			border: 1px solid #414549;
			background-color: #e8e9ea;
		}

		.element-list .toggle-button:active {
			background-color: #FFFFFF;
		}

		.element-list .toggle-button span {
			font-size: 0.9rem;
			font-family: var(--bs-font-sans-serif);
			color: #BBB;
			display: inline;
		}

		.element-list .toggle-button.checked IMG {
			filter: invert(26%) sepia(65%) saturate(2039%) hue-rotate(95deg) brightness(89%) contrast(80%);
		}

		.element-list .toggle-button.checked span {
			color: #197219;
			display: inline;
		}

		.element-list .toggle-button.loading span {
			color: #ccc;
			display: inline;
		}

		.element-list .toggle-button.loading > span.auto-hide {
			display: none;
		}

		.element-list .toggle-button i.icon {
			height: 2em;
			width: 2em;
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
			background-image: url('/icon/toggle-off.svg');
		}

		.element-list .toggle-button.loading i.icon {
			background-image: url("/icon/loading.svg");
		}

		.element-list .toggle-button.checked i.icon {
			background-image: url("/icon/toggle-on.svg");
		}


.tab-bar-contents {
	border: 1px solid #dee2e6;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	padding-top: 0rem;
	padding-bottom: 0rem;
	padding-left: 0rem;
	padding-right: 0rem;
	row-gap: 0.2rem;
}

.tab-bar-header {
	border-left: 1px solid #dee2e6;
	border-right: 1px solid #dee2e6;
}

.tab-bar-button {
	border-radius: 0px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border: 1px solid #dee2e6;
	min-height: 2rem;
	padding: 0.5rem;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 0.9rem;
	font-family: var(--bs-font-sans-serif);
	text-decoration: none;
}

	A.tab-bar-button {
		background-color: #f8f9fa;
		color: #00A;
	}

	A.tab-bar-button:hover {
		border: 1px solid #414549;
		background-color: #e8e9ea;
	}

	A.tab-bar-button:active {
		background-color: #FFFFFF;
	}

	.tab-bar-button img {
		width: 1.3rem;
		padding: 0px;
	}

span.tab-bar-button span {
	font-weight: bold;
}


A.graph-link {
	color: #666;
	font-weight: bold;
	padding: 5px;
}

	A.graph-link img.icon {
		width: 1.5rem;
		filter: invert(41%) sepia(0%) saturate(1%) hue-rotate(106deg) brightness(93%) contrast(87%);
	}

	A.graph-link:hover {
		color: #0d6efd;
		outline: 2px solid #0d6efd;
	}

	A.graph-link:hover img.icon {
		filter: invert(41%) sepia(92%) saturate(5275%) hue-rotate(209deg) brightness(101%) contrast(99%);
	}


ul.report-settings {
	margin-top: 1rem;
	margin-bottom: 1rem;

}

.report-settings-panel {
	padding: 1rem;
	display: flex;
	justify-content: center;
}

	.report-settings-panel .section {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border: 1px solid #AAA;
		padding: 0.25rem;
		text-decoration: none;
		font-size: 0.8rem;
		font-family: var(--bs-body-font-family);
	}

		.report-settings-panel .section IMG {
			width: 1.25rem;
		}

		.report-settings-panel .section:first-child {
			border-top-left-radius: 1rem;
			border-bottom-left-radius: 1rem;
			border-right: 0px;
		}

		.report-settings-panel .section:last-child {
			border-top-right-radius: 1rem;
			border-bottom-right-radius: 1rem;
			border-left: 0px;
		}

	.report-settings-panel A.section:hover {
		background-color: #ccc;
	}