:root {
	--color-dark: #233448;
	--color-light: #83849b;
	--color-lighter: #a3a4b7;
	--color-lighterer: #e2e3e7;
	--color-lightererer: #f3f4f8;

	--color-red: #e6381e;
	--color-yellow: rgb(
		255,
		193,
		7
	);
	--color-green: #8abe23;
	--color-white: #fff;
	--color-lightblue: #56b5e1;

	--color-dark-opac008: rgba(
		35,
		52,
		72,
		0.08
	);
	--color-dark-opac08: rgba(
		35,
		52,
		72,
		0.8
	);
	--color-dark-opac06: rgba(
		35,
		52,
		72,
		0.6
	);
	--color-red-opac008: rgba(
		230,
		56,
		30,
		0.08
	);
	--color-red-opac08: rgba(
		230,
		56,
		30,
		0.8
	);
	--color-red-opac06: rgba(
		230,
		56,
		30,
		0.6
	);
	--color-yellow-opac008: rgba(
		255,
		193,
		7,
		0.08
	);
	--color-yellow-opac06: rgba(
		255,
		193,
		7,
		0.6
	);
	--color-yellow-opac08: rgba(
		255,
		193,
		7,
		0.8
	);
	--color-green-opac008: rgba(
		138,
		190,
		35,
		0.08
	);
	--color-green-opac06: rgba(
		138,
		190,
		35,
		0.6
	);
	--color-green-opac08: rgba(
		138,
		190,
		35,
		0.8
	);
	--color-white-opac04: rgba(
		255,
		255,
		255,
		0.4
	);
	--color-white-opac08: rgba(
		255,
		255,
		255,
		0.8
	);

	--cylinder-angle: 20%;
	--cylinder-height: 180%;
	--cylinder-height-small: 130%;
}

.headline-1 {
	color: var(
		--color-dark
	);
	font-size: 2rem;
	font-weight: 400;
	margin-top: 1rem;
	margin-bottom: 2rem;
}

.headline-2 {
	color: var(
		--color-dark
	);
	font-size: 1.6rem;
	font-weight: 600;
	margin: 0;
}

.value-highlight {
	color: var(
		--color-dark
	);
	font-size: 1.6rem;
	font-weight: 700;
	margin: 0;
}

.value-highlight-caption {
	color: var(
		--color-light
	);
	font-size: 1rem;
	font-weight: 400;
}

/* Color */
.color-dark {
	color: var(
		--color-dark
	);
}

.color-light {
	color: var(
		--color-light
	);
}

.color-lighter {
	color: var(
		--color-lighter
	);
}

.color-lighterer {
	color: var(
		--color-lighterer
	);
}

.color-green {
	color: var(
		--color-green
	);
}

.color-yellow {
	color: var(
		--color-yellow
	);
}

.color-red {
	color: var(
		--color-red
	);
}

.bg-green {
	background-color: var(
		--color-green
	);
}

.bg-yellow {
	background-color: var(
		--color-yellow
	);
}

.bg-red {
	background-color: var(
		--color-red
	);
}

.bg-lightblue {
	background-color: var(
		--color-lightblue
	);
}

.bg-lighterer {
	background-color: var(
		--color-lighterer
	);
}

.bg-lightererer {
	background-color: var(
		--color-lightererer
	);
}

.bg-red-lighterer {
	background-color: var(
		--color-red-opac008
	);
}

.bg-yellow-lighterer {
	background-color: var(
		--color-yellow-opac008
	);
}

.bg-green-lighterer {
	background-color: var(
		--color-green-opac008
	);
}

.bg-children-green
	.bg-child {
	background-color: var(
		--color-green
	);
}

.bg-children-yellow
	.bg-child {
	background-color: var(
		--color-yellow
	);
}

.bg-children-red
	.bg-child {
	background-color: var(
		--color-red
	);
}

.bg-children-blue
	.bg-child {
	background-color: var(
		--color-lightblue
	);
}

.bg-children-light
	.bg-child {
	background-color: var(
		--color-light
	);
}

.bg-transparent {
	background: transparent;
}

/* Links */
.link-lighter-dark {
	color: var(
		--color-lighter
	);
}

a.link-lighter-dark:hover,
a.link-lighter-dark:focus {
	color: var(
		--color-dark
	);
}

.link-dark-lighter {
	color: var(
		--color-dark
	);
}

a.link-dark-lighter:hover,
a.link-dark-lighter:focus {
	color: var(
		--color-lighter
	);
}

.link-dark-light {
	color: var(
		--color-dark
	);
}

a.link-dark-light:hover,
a.link-dark-light:focus {
	color: var(
		--color-light
	);
}

.link-white-opac08 {
	color: var(
		--color-white
	);
}

a.link-white-opac08:hover,
a.link-white-opac08:focus {
	color: var(
		--color-white-opac08
	);
}

.btn-blank-red {
	background: transparent;
	color: var(
		--color-red
	);
	border: 1px
		solid
		var(
			--color-red
		);
}

a.btn-blank-red:hover {
	background: var(
		--color-red
	);
	color: var(
		--color-white
	);
}

.btn-red,
.btn-blank-red.active {
	background: var(
		--color-red
	);
	color: var(
		--color-white
	);
	border: 1px
		solid
		var(
			--color-red
		);
}

.btn-red:hover {
	background: var(
		--color-red-opac08
	);
	color: var(
		--color-white
	);
}

.btn-blank-yellow {
	background: transparent;
	color: var(
		--color-yellow
	);
	border: 1px
		solid
		var(
			--color-yellow
		);
}

a.btn-blank-yellow:hover {
	background: var(
		--color-yellow
	);
	color: var(
		--color-white
	);
}

.btn-yellow,
.btn-blank-yellow.active {
	background: var(
		--color-yellow
	);
	color: var(
		--color-white
	);
	border: 1px
		solid
		var(
			--color-yellow
		);
}

.btn-yellow:hover {
	background: var(
		--color-yellow-opac08
	);
	color: var(
		--color-white
	);
}

.btn-blank-green {
	background: transparent;
	color: var(
		--color-green
	);
	border: 1px
		solid
		var(
			--color-green
		);
}

a.btn-blank-green:hover {
	background: var(
		--color-green
	);
	color: var(
		--color-white
	);
}

.btn-green,
.btn-blank-green.active {
	background: var(
		--color-green
	);
	color: var(
		--color-white
	);
	border: 1px
		solid
		var(
			--color-green
		);
}

.btn-green:hover {
	background: var(
		--color-green-opac08
	);
	color: var(
		--color-white
	);
}

.btn-blank-dark {
	background: transparent;
	color: var(
		--color-dark
	);
	border: 1px
		solid
		var(
			--color-dark
		);
}

a.btn-blank-dark:hover {
	background: var(
		--color-dark-opac06
	);
	color: var(
		--color-white
	);
}

.btn-dark,
.btn-blank-dark.active {
	background: var(
		--color-dark
	);
	color: var(
		--color-white
	);
	border: 1px
		solid
		var(
			--color-dark
		);
}

.btn-dark:hover {
	background: var(
		--color-dark-opac08
	);
	color: var(
		--color-white
	);
}

.pimm-button {
	border-radius: 0.4rem;
}

/*Borders*/
.bt-lighterer {
	border-top: 1px
		solid
		var(
			--color-lighterer
		);
}

.bb-none {
	border-bottom: none;
}

.bb-lightererer-xl-none {
	border-bottom: 1px
		solid
		var(
			--color-lighterer
		);
}

.bb-widget {
	border-bottom: 1px
		solid
		var(
			--color-lighterer
		);
	padding-bottom: 2rem;
}

@media (min-width: 1200px) {
	.bb-lightererer-xl-none {
		border-bottom: none;
	}

	.bb-widget {
		border-bottom: 0;
		padding-bottom: 0;
		margin-bottom: 0;
	}
}

/*New Webform*/
.pimm-form
	input {
	border: 1px
		solid
		var(
			--color-lighterer
		);
	padding: 0.4rem
		1rem;
}

.pimm-form
	select {
	border: 1px
		solid
		var(
			--color-lighterer
		);
	padding: 0.4rem
		1rem;
}

.pimm-form
	input::-webkit-calendar-picker-indicator {
	opacity: 100;
}

.pimm-form
	input.smallpadding {
	padding: 0.4rem
		0.2rem;
}

.pimm-form
	input.resetStyles {
	height: auto;
}

.pimm-form
	input[type="number"].resetStyles {
	width: auto;
}

/* Cylinder */
.cylinder-canvas {
	position: relative;
	overflow: hidden;
}

.cylinder-canvas-small {
	position: relative;
	overflow: hidden;
}

.cylinder-canvas:after {
	content: "";
	display: block;
	padding-top: var(
		--cylinder-height
	);
	margin-left: auto;
}

.cylinder-canvas-small:after {
	content: "";
	display: block;
	padding-top: var(
		--cylinder-height-small
	);
	margin-left: auto;
}

.cylinder {
	position: absolute;
	width: 100%;
	height: calc(
		100% -
			var(
				--cylinder-angle
			)
	);
	top: calc(
		var(
				--cylinder-angle
			) /
			2
	);
	bottom: 0;
	left: 0;
	right: 0;
}

.cylinder-top {
	bottom: 100%;
}

.cylinder-bottom {
	bottom: 0;
}

.cylinder-level-top02 {
	background-color: var(
		--color-white-opac02
	);
}

.cylinder-level-top04 {
	background-color: var(
		--color-white-opac04
	);
}

.cylinder-level-top06 {
	background-color: var(
		--color-white-opac06
	);
}

.cylinder-level {
	position: absolute;
	width: 100%;
	height: var(
		--cylinder-angle
	);
	left: 0;
	transform: translateY(
		50%
	);
	border-radius: 100%/100%;
	z-index: 1;
}

.cylinder-water {
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
}

.cylinder-wave-canvas {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
}

.cylinder-level-2 {
	z-index: 2;
}

.cylinder-level-3 {
	z-index: 3;
}

.cylinder-level-4 {
	z-index: 4;
}

.cylinder-level-5 {
	z-index: 5;
}

.bg-tank {
	background-color: var(
		--color-lighterer
	);
}

.bg-tank-bottom {
	background-color: var(
		--color-lighter
	);
}

.cylinder-wave {
	bottom: auto;
	border-bottom: 4px
		solid
		#fff;
	border-top: 0;
	animation: tankwave
		2s
		linear;
	left: 50%;
	transform: translateX(
		-50%
	);
	opacity: 0;
}

.cylinder-scale {
	border-bottom: 0.1rem
		dashed;
	position: absolute;
	width: 100%;
	height: var(
		--cylinder-angle
	);
	left: 0;
	bottom: 20%;
	transform: translateY(
		50%
	);
	border-radius: calc(
			100% -
				0.2rem
		) /
		calc(
			100% -
				0.2rem
		);
	z-index: 2;
}

.cylinder-scale-light {
	border-bottom-color: var(
		--color-light
	);
}

.cylinder-scale-dark {
	border-bottom-color: var(
		--color-dark
	);
}

.cylinder-scale-white {
	border-bottom-color: var(
		--color-white
	);
}

.cylinder-legend-canvas {
	position: relative;
	height: 100%;
	width: 100%;
}

.cylinder-legend-number {
	position: absolute;
	right: 0.2rem;
	right: calc(
		(
				(
						var(
								--bs-gutter-x
							) /
							2
					) *
					-1
			) +
			0.2rem
	);
	background: var(
		--color-white
	);
}

.cylinder-legend-current {
	padding-right: calc(
		(
				(
						var(
								--bs-gutter-x
							) /
							2
					) *
					-1
			) +
			1.6rem
	);
}

.cylinder-legend-current-line {
	border-bottom: 0.1rem
		dotted;
	width: 1.4rem;
	height: 0.1rem;
	right: 0;
	right: calc(
		(
			(
					var(
							--bs-gutter-x
						) /
						2
				) *
				-1
		)
	);
	top: 50%;
	transform: translateY(
		50%
	);
}

.cylinder-sensor {
	width: 40%;
	left: 55%;
	top: -15%;
	transform: translateX(
		-60%
	);
}

.chart-bar {
	position: relative;
	background: var(
		--color-lighterer
	);
}

.chart-bar-section {
	position: absolute;
	left: 0;
}

.chart-bar-limit {
	width: auto;
	height: 300%;
	bottom: -200%;
	transform: translate(
		-50%,
		-50%
	);
}

.chart-bar-limit-line {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 50%;
	height: 70%;
	border-right: 1px
		dashed;
}

.chart-bar-limit-line-yellow {
	border-color: var(
		--color-yellow
	);
}

.chart-bar-scale {
	top: 150%;
}

/*Leaflet Map*/
.map-canvas {
	height: calc(
		100vh -
			20rem
	);
}

.leaflet-container
	.leaflet-control-attribution {
	display: none;
}

/* Disable the Leaflet attribution label incl country flag */

@keyframes tankwave {
	0% {
		top: calc(
			0% -
				(
					var(
							--cylinder-angle
						) /
						2
				)
		);
		opacity: 0;
		width: 10%;
		height: 10%;
	}

	10% {
		opacity: 1;
	}

	50% {
		top: calc(
			100% -
				(
					var(
							--cylinder-angle
						) /
						2
				)
		);
		width: 75%;
	}

	80% {
		opacity: 1;
	}

	100% {
		top: calc(
			0% -
				(
					var(
							--cylinder-angle
						) /
						2
				)
		);
		opacity: 0;
		width: 150%;
		height: 100%;
		border-bottom: 0;
		border-top: 4px
			solid
			#fff;
	}
}

/*// Map Feature by Sohan*/
.mycluster {
	width: 40px;
	height: 40px;
	background-color: greenyellow;
	text-align: center;
	font-size: 24px;
}

.blue-dot {
	background-color: #687dbc !important;
	width: 2rem !important;
	height: 2rem !important;
	border-radius: 50%;
	font-size: 1rem !important;
}

.red-dot {
	background-color: #f60521 !important;
	width: 2rem !important;
	height: 2rem !important;
	border-radius: 50%;
	font-size: 1rem !important;
}

.yellow-dot {
	background-color: #f8d007 !important;
	width: 2rem !important;
	height: 2rem !important;
	border-radius: 50%;
	font-size: 1rem !important;
}