/* ============================================================ */
/* Common                                                       */
/* ============================================================ */

@keyframes flash-opacity {
	100% { opacity: 0; }
}

@keyframes flash-border {
	100% { border-color: whitesmoke; }
}

@keyframes switch-opacity {
	0%        { opacity: 1; }
	17%,  50% { opacity: 0; }
	67%, 100% { opacity: 1; }
}

@keyframes switch-opacity-content {
	0%        { opacity: 0; content: attr(data-delta); }
	8%,   25% { opacity: 1; content: attr(data-delta); }
	33%,  50% { opacity: 0; }
	58%,  75% { opacity: 1; content: attr(data-old); }
	83%, 100% { opacity: 0; }
}

.container.iot {
	order: 1;
	flex: 1 0 46%;
	max-width: 50%;
	line-height: 28px;
	cursor: default;
}

.container.iot .AC:has([data-power="Off"])::before,
.container.iot.offline::before,
.container.iot > .icon.offline::before {
	content: '\00A0';
	position: absolute;
	top: 1px;
	left: 1px;
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	z-index: 9;
}

.container.iot.offline::before,
.container.iot > .icon.offline::before {
	background: rgba(224, 224, 224, 0.4) !important;
	backdrop-filter: blur(2px) grayscale(100%) !important;
}

.container.iot > .icon.AC:has([data-power="Off"])::before,
.container.iot > .icon.offline::before {
	top: -4px;
	height: calc(100% + 4px);
}

.container.iot.offline .overview div:has(.value) {
	position: relative;
	z-index: 0 !important;
}

.container.iot h2:first-letter,
.container.iot legend:first-letter {
	text-transform: uppercase;
}

.container.iot .room-title button {
	width: 20px;
	height: 20px;
	border: none;
	background: white;
	cursor: pointer;
}

.container.iot .room-title button::before {
	content: '\00A0';
}

.container.iot .room-title button.prev {
			mask: url(/images/left.svg) no-repeat 5px 0;
	-webkit-mask: url(/images/left.svg) no-repeat 5px 0;
}

.container.iot .room-title button.next {
			mask: url(/images/right.svg) no-repeat 5px 0;
	-webkit-mask: url(/images/right.svg) no-repeat 5px 0;
}

.container.iot .room-title button.zoom-out {
	margin-top: 3px;
	float: right;
			mask: url(/images/zoom-out.svg) no-repeat;
	-webkit-mask: url(/images/zoom-out.svg) no-repeat;
}

.container.iot.swipe.start {
	cursor: pointer;
}

.container.iot .box {
	height: 100%;
}

.container.iot .icon {
	height: 100%;
	text-align: center;
	display: none;
}

.container.iot h3 {
	color: grey;
}

.container.iot fieldset.icon h3 {
	position: absolute;
	left: 0px;
	width: 100%;
	bottom: 27px;
}

.container.iot .icon > .slider {
	position: relative;
	width: 100%;
	height: 100px;
	overflow: hidden;
	margin-top: 5px;
}

.container.iot .icon > .slider > .circle {
	width: 120px;
	height: 120px;
	background: conic-gradient(from 240deg, lightcyan 0deg, darkcyan 240deg, rgba(0,0,0,0) 0deg);
}

.container.iot .icon .limit.circle {
	width: 100px;
	height: 100px;
	box-shadow: 0 0 20px 5px white;
	background: conic-gradient(from 240deg, lightgrey 0deg 240deg, rgba(0,0,0,0) 0deg);
}

.container.iot .icon .limit.circle > div {
	width: 96px;
	height: 96px;
	background: white;
}

.container.iot .icon .value {
	position: absolute;
	
	width: 100%;
	text-align: center;
	
	top: 40%;
	left: 0;
	transform: translate(0, -50%);
	
	float: none;
	
	font-size: 30px;
}

.container.iot .icon .value > * {
	display: inline-block;
	font-size: 60px;
	line-height: 60px;
	position: relative;
}

.container.iot .value > *::before {
	background: grey;
	display: inline-block;
	position: absolute;
	
	font-size: 13px;
	
	top: 0;
	right: 3px;
	
	width: 0.8em;
}

.container.iot .icon .value > *::before {
	background: lightgrey;
	
	font-size: 40px;
	
	top: 0.1em;
	right: -0.85em;
}

.container.iot .value > .up::before {
	content: '\00A0';
			mask: url(/images/up.svg) no-repeat;
	-webkit-mask: url(/images/up.svg) no-repeat;
}

.container.iot .value > .down::before {
	content: '\00A0';
			mask: url(/images/down.svg) no-repeat;
	-webkit-mask: url(/images/down.svg) no-repeat;
}

.container.iot .icon .circle .value {
	font-size: 20px;
	line-height: 20px;
	top: 35%;
}

.container.iot .icon .circle .value.hover {	
	display: none;
}

.container.iot .icon:hover .circle .value.default {	
	display: none;
}

.container.iot .icon:hover .circle .value.hover {	
	display: initial;
}

.container.iot .icon .circle .value > * {
	font-size: 36px;
	line-height: 36px;
	
	position: relative;
	transform: initial;
}

.container.iot .icon .circle .value > *::before {
	font-size: 26px;
}

.container.iot .icon .circle .value:hover > [data-old][data-delta]::after {
	top: 0;
	right: -11px;
	font-size: 16px;
}

.container.iot .icon .circle .name {
	font-family: Oswald, Arial, Helvetica, sans-serif;	
}

.container.iot .icon .circle .name,
.container.iot .icon .circle .value:last-child {
	color: grey;

	font-size: 12px;
	line-height: 12px;
	
	top: initial;
	bottom: 0;
}

.container.iot .icon .circle .name,
.container.iot .icon .circle .value:last-child > * {
	font-size: 20px;
	line-height: 20px;
}

.container.iot .icon .circle .value:last-child > *::before {
	font-size: 12px;	
}

.container.iot .icon .value:hover > [data-old][data-delta]::before {
	animation: linear 3s infinite switch-opacity;
}

.container.iot .icon .value:hover > [data-old][data-delta]::after {
	content: attr(data-delta);
	font-family: Barlow, Arial, Helvetica, sans-serif;
	
	position: absolute;
	top: 3px;
	right: -18px;
	
	text-wrap: nowrap;
	width: fit-content;
	
	transform: translate(50%, 0);
	
	color: black;
	font-size: 22px;
	line-height: 16px;
	
	animation: linear 6s infinite switch-opacity-content;
}

.container.iot .icon .circle .value:last-child > [data-old][data-delta]::after {
	font-size: 10px;	
	top: -6px;
	right: -6px;
}

.container.iot .value > .fresh::before {
	background: grey;
	animation: 500ms infinite alternate flash-opacity;
}

.container.iot h2 {
	background: lightgrey;
	color: black;
	padding: 0 5px;
	margin-bottom: 5px;
	text-align: left;
	z-index: 99;
}

.container.iot fieldset {
	border: solid 1px grey;
	padding: 5px;
	position: relative;
}

.container.iot fieldset legend {
	padding: 0 5px;
	text-align: left;
}

.container.iot .icon > legend {
	font-family: Oswald, Arial, Helvetica, sans-serif;
	font-weight: normal;
	line-height: 10px;
	position: relative;
	z-index: 99;
}

.container.iot .value {
	float: right;
	text-align: right;
	color: darkcyan;
	
	font-family: Oswald, Arial, Helvetica, sans-serif;
	font-weight: normal;
	
	line-height: 25px;
	position: relative;
}

.container.iot .value:has(.fresh) {
	color: blue;
}

.container.iot .value > * {
	font-size: 20px;
}

.container .value.target {
	color: grey;
}

.container.iot .value.target > * {
	font-size: 15px;
}

.container.iot .value.grey,
.container.iot .value.hover {
	color: grey;
}

.container.iot .overview .value[data-rssi-level]::before {
	display: inline-block;
	position: relative;
}

.container.iot.Room {
	max-width: 100%;
}

.container.iot.Room:has(.iot.room .overview .value .fresh) > .icon {
	border-color: blue;
	animation: 500ms infinite alternate flash-border;
}

.container.iot.Room:has(.iot.room .overview .value .fresh) > .icon > legend {
	color: blue;
}

.container.iot.battery-low:not(.Room) > *,
.container.iot.Room:has(.iot.room .container.iot.battery-low) > .icon {
	border-color: orangered;
}

.container.iot.Room:has(.iot.room .container.iot.battery-low) > .icon > legend {
	color: orangered;
}

.container.iot.battery-critical:not(.Room) > *,
.container.iot.Room:has(.iot.room .container.iot.battery-critical) > .icon {
	border-color: red;
	animation: 500ms infinite alternate flash-border;
}

.container.iot.Room:has(.iot.room .container.iot.battery-critical) > .icon > legend {
	color: red;
}

.room.iot {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.room.iot > h2 {
	width: 100%;
	min-width: 340px;
}

/* ============================================================ */
/* icon navigation & thumbs                                     */
/* ============================================================ */

.container.iot .navigation {
	position: absolute;
	line-height: 20px;
	color: grey;
	z-index: 99;
}

.container.iot .box {
	padding-bottom: 35px;
}

.container.iot .box .navigation {
	right: 6px;
	bottom: 6px;
}

.container.iot .icon .navigation {
	right: 5px;
	bottom: 5px;
}

.container.iot .navigation span,
.container.iot .navigation span::before {
	display: inline-block;
	width: 20px;
	height: 20px;
	cursor: pointer;
}

.container.iot .navigation span {
	margin-left: 5px;
}

.container.iot .navigation span::before {
	content: '\00A0';
	background: grey;
}

.container.iot .navigation span.room-details::before {
			mask: url(/images/zoom-in.svg) no-repeat;
	-webkit-mask: url(/images/zoom-in.svg) no-repeat;
}

.container.iot .navigation span.icons::before {
			mask: url(/images/zoom.svg) no-repeat;
	-webkit-mask: url(/images/zoom.svg) no-repeat;
}

.container.iot .navigation span.settings::before {
			mask: url(/images/settings.svg) no-repeat;
	-webkit-mask: url(/images/settings.svg) no-repeat;
}

.container.iot .navigation span.power::before {
			mask: url(/images/on-off.svg) no-repeat;
	-webkit-mask: url(/images/on-off.svg) no-repeat;
}

.container.iot .navigation span.overview::before {
			mask: url(/images/overview.svg) no-repeat;
	-webkit-mask: url(/images/overview.svg) no-repeat;
}

.container.iot .icon     .navigation span.icons::before,
.container.iot .overview .navigation span.overview::before,
.container.iot .settings .navigation span.settings::before,
.container.iot .power    .navigation span.power::before {
	background: darkcyan;
}

.container.iot .navigation span:hover::before {
	background: blue !important;
}

.container.iot .icon .thumbs {
	color: grey;
	position: absolute;
	z-index: 99;

	left: 50%;
	transform: translate(-50%, 0);
	bottom: 0;

	font-size: 20px;
}

.container.iot .icon .thumbs span::before {
	content: '\25CB';
}

.container.iot .icon .thumbs span.active::before {
	content: '\25CF';
}


/* ============================================================ */
/* room-details                                                 */
/* ============================================================ */

.container.iot .room.iot {
	position: relative;
}

.container.iot .room.iot > h2 {
	color: white;
	background: darkcyan;
}

/* ============================================================ */
/* data-time                                                    */
/* ============================================================ */

.container.iot [data-rssi],
.container.iot [data-time] {
	position: relative;
}

.container.iot .icon [data-battery] {
	position: absolute !important;

	left: 10px;
	bottom: 0px;

	width: 20px;
	height: 20px;

	z-index: 99;
}

.container.iot .icon [data-rssi],
.container.iot .icon [data-time] {
	position: absolute;
	
	top: 0;
	right: 3px;
	
	width: 20px;
	height: 20px;
}

.container.iot .icon [data-rssi] {
	right: 27px;	
	width: 25px;
}

.container.iot [data-battery-level]::before,
.container.iot [data-rssi-level]::before,
.container.iot [data-rssi]::before,
.container.iot [data-time]::before {
	content: '\00A0';
	display: inline-block;

	position: absolute;
	top: 0;
	right: 0;
	
	width: 20px;
	height: 20px;
			mask: url(/images/clock.svg) no-repeat;
	-webkit-mask: url(/images/clock.svg) no-repeat;
	
	background: grey;
	z-index: 99;
}

.container.iot.offline .overview .value,
.container.iot > .icon.offline [data-battery]::before,
.container.iot > .icon.offline [data-rssi]::before {
	position: relative;
	z-index: 0 !important;
}


.container.iot h2[data-time]::before {
	top: 3px;
	right: 3px;
	background: black;
}

.container.iot [data-battery-level]::before {
	width: 25px;
			mask: url(/images/battery.svg) no-repeat;
	-webkit-mask: url(/images/battery.svg) no-repeat;
}

.container.iot .low[data-battery-level]::before {
	background: orangered;
}

.container.iot .critical[data-battery-level]::before {
	background: red;
	animation: 500ms infinite alternate flash-opacity;
}

.container.iot [data-battery-level="0"]::before {
			mask: url(/images/battery-0.svg) no-repeat;
	-webkit-mask: url(/images/battery-0.svg) no-repeat;
}

.container.iot [data-battery-level="1"]::before {
			mask: url(/images/battery-1.svg) no-repeat;
	-webkit-mask: url(/images/battery-1.svg) no-repeat;
}

.container.iot [data-battery-level="2"]::before {
			mask: url(/images/battery-2.svg) no-repeat;
	-webkit-mask: url(/images/battery-2.svg) no-repeat;
}

.container.iot [data-battery-level="3"]::before {
			mask: url(/images/battery-3.svg) no-repeat;
	-webkit-mask: url(/images/battery-3.svg) no-repeat;
}

.container.iot [data-battery-level="4"]::before {
			mask: url(/images/battery-4.svg) no-repeat;
	-webkit-mask: url(/images/battery-4.svg) no-repeat;
}

.container.iot [data-rssi-level]::before,
.container.iot [data-rssi]::before {
	width: 25px;
			mask: url(/images/wifi.svg) no-repeat;
	-webkit-mask: url(/images/wifi.svg) no-repeat;
}

.container.iot [data-rssi-level="0"]::before {
			mask: url(/images/wifi-0.svg) no-repeat;
	-webkit-mask: url(/images/wifi-0.svg) no-repeat;
}

.container.iot [data-rssi-level="1"]::before {
			mask: url(/images/wifi-1.svg) no-repeat;
	-webkit-mask: url(/images/wifi-1.svg) no-repeat;
}

.container.iot [data-rssi-level="2"]::before {
			mask: url(/images/wifi-2.svg) no-repeat;
	-webkit-mask: url(/images/wifi-2.svg) no-repeat;
}

.container.iot [data-rssi-level="3"]::before {
			mask: url(/images/wifi-3.svg) no-repeat;
	-webkit-mask: url(/images/wifi-3.svg) no-repeat;
}

.container.iot .icon [data-battery]:hover::before,
.container.iot .icon [data-rssi]:hover::before,
.container.iot [data-time]:hover::before {
	content: attr(data-time);
	
	position: absolute;
	
	text-wrap: nowrap;
	width: fit-content;
	height: 20px;
	
	line-height: 20px;
	
			mask: none;
	-webkit-mask: none;

	color: black;
	
	background: white !important;
	
	padding: 0 3px;
	border: solid 1px black;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	
	z-index: 999;
}

.container.iot h2[data-time]:hover::before {
	top: 3px;
	right: 3px;
}

.container.iot .icon [data-rssi]:hover::before {
	content: attr(data-rssi);
	top: 0;
	right: 0;
}

.container.iot .icon [data-battery]:hover::before {
	content: attr(data-battery);
	top: 0;
	left: -5px;
}

/* ============================================================ */
/* Settings                                                     */
/* ============================================================ */

.container.iot .setting {
	display: inline-block;
	text-align: center;
	width: auto;
	position: relative;
	top: 40%;
	transform: translate(0, -50%);
}

.container.iot input[type=number] {
	font-family: Oswald, Arial, Helvetica, sans-serif;
	font-size: 60px;
	line-height: 70px;
	height: 60px;
	width: 120px;

	border: none;
	padding: 0;
	touch-action: none;

	text-align: center;
	
	color: darkslateblue;
	cursor: default;
}

.container.iot input[type=number]::-webkit-inner-spin-button,
.container.iot input[type=number]::-webkit-outer-spin-button {
	opacity: 0.5;
	padding: 10px;
}

.container.iot input[type=number][disabled] {
	color: grey !important;
}

.container.iot button.on-off,
.container.iot button.reboot {
	width: 50px;
	height: 50px;
}

.container.iot button.on-off::before,
.container.iot button.reboot::before {
	width: 50px;
	height: 50px;
}

.container.iot button.on-off {
	margin: 23px 0 7px 0;
	background: white;
	border-radius: 50%;
	border: none;
	box-shadow: 0 0 15px 2px red;
}

.container.iot button.on-off[data-power="On"],
.container.iot button.on-off.on {
	box-shadow: 0 0 15px 2px green;	
}

.container.iot button.on-off::before {
	mask-size: 54px 54px;
	mask-position: -2px -4px;
	background: red;
	opacity: 0.8;
}

.container.iot button.on-off[data-power="On"]::before,
.container.iot button.on-off.on::before {
	background: green;
}

.container.iot button.on-off.dark::before {
	background: grey !important;
}

/* ============================================================ */
/* Shelly TRV                                                   */
/* ============================================================ */

.container.SHTRV-01 {
	order: 2;
}

.container.SHTRV-01 .settings .setting {
	width: 100%;
	text-align: center;
}

.container.SHTRV-01 div.power {
	font-size: 0;
}

.container.SHTRV-01 .power .setting {
	width: 50%;
	text-align: center;
}

.container.SHTRV-01 input[type=number] {
	font-size: 50px;
	height: 50px;
	line-height: 60px;
	width: 90px;
}

.container.SHTRV-01 button.on-off,
.container.SHTRV-01 button.reboot {
	margin: 0 0 7px 0;
}

/* ============================================================ */
/* Stove                                                        */
/* ============================================================ */

.container.Stove {
	order: 999;
	flex: 0 0 100%;
	max-width: 100%;
}
	
.container.iot.Stove h3 {
	margin-top: 20px;
	height: 40px;
}

.container.Stove .grid {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.container.Stove .overview fieldset {
	flex: 1 1 20%;
}

.container.Stove .overview fieldset:has(.Power) {
	flex: 1 1 5%;
}

.container.Stove .overview fieldset:has(.State) {
	flex: 0 0 100%;
}

.container.Stove .overview .value {
	display: inline-block;
}

.container.Stove .settings {
	text-align: center;
}

.container.Stove .settings .setting {
	top: auto;
	transform: none;
}

.container.Stove .settings .setting.on-off {
	flex: 1 1 10%;
}

.container.Stove .settings .setting.power {
	flex: 1 1 15%;
}

.container.Stove .settings .setting.water {
	flex: 1 1 25%;
}

.container.Stove input[type=number] {
	margin-top: 15px;
}

.container.Stove input[name=MaxPower] {
	width: 75px;
}

.container.Stove input[name=WaterTemperatureTarget] {
	width: 100px;
}

.container.Stove .value {
	margin-left: 5px;
}

.container.Stove .value > *::before {
	top: -3px;
}

.container.Stove .value > .Power::before {
	left: 1em;
}

.container.Stove .value.state,
.container.Stove .value.current {
	float: none;
	text-align: left;
}

.container.Stove .value.state > * {
	font-size: 20px;
}

.container.Stove .value.current > * {
	font-size: 24px;
	line-height: 11px;
}

.container.Stove .value.phase {
	position: absolute;
	top: -15px;
	right: 5px;
	color: black;
}

.container.Stove .value.phase > * {
	font-size: 15px;
	line-height: 15px;
}

.container.Stove .indicator {
	display: inline-block;

	position: absolute;
	bottom: 0;
	right: 5px;

	width: auto;	
	height: 25px;
}

.container.Stove .indicator > .value {
	display: inline-block;
	width: 23px;	
	height: 23px;
	overflow: hidden;
	float: left;
}

.container.Stove .indicator .value > *::before {
	content: '\00A0';
	display: inline-block;
	position: relative;
	width: 20px;
	height: 20px;
}

.container.Stove .indicator .value > [data-value="on"]::before {
	background: darkcyan;
}

.container.Stove .indicator .value > [data-value="off"]::before {
	background: lightgrey;
}

.container.Stove .indicator .value > .chrono::before {
			mask: url(/images/schedule.svg) no-repeat;
	-webkit-mask: url(/images/schedule.svg) no-repeat;
}

.container.Stove .indicator .value > .lighter::before {
			mask: url(/images/fire.svg) no-repeat;
	-webkit-mask: url(/images/fire.svg) no-repeat;
}

.container.Stove .indicator .value > .screw::before {
	transform: rotate(45deg);
			mask: url(/images/screw.svg) no-repeat;
	-webkit-mask: url(/images/screw.svg) no-repeat;
}

.container.Stove .indicator .value > .blower::before {
			mask: url(/images/blow.svg) no-repeat;
	-webkit-mask: url(/images/blow.svg) no-repeat;
}

.container.Stove .indicator .value > .pump::before {
			mask: url(/images/pump.svg) no-repeat;
	-webkit-mask: url(/images/pump.svg) no-repeat;
}

.container.Stove .indicator .value > .alarm::before {
			mask: url(/images/warning.svg) no-repeat;
	-webkit-mask: url(/images/warning.svg) no-repeat;
}

.container.Stove .indicator .value > .fan::before {
			mask: url(/images/fan.svg) no-repeat;
	-webkit-mask: url(/images/fan.svg) no-repeat;
}

.container.iot.Stove [data-rssi-level] {
	display: inline-block;
	width: 25px;
	height: 20px;
}

.container.iot.Stove [data-rssi-level]::before {
	background: grey;
}

/* ============================================================ */
/* BW-RC1-AC                                                    */
/* ============================================================ */

.container.BW-RC1:has(.AC),
.container.BW-RC1-AC {
	order: 3;
	max-width: 100%;
}

.container.iot .overview.AC {
	columns: 2;
}

.container.iot .overview.AC > h2 {
	column-span: all;
}

.container.iot .settings.AC {
	text-align: center;
}

.container.iot .AC:has([data-power="Off"])::before {
	background: rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(2px) grayscale(40%);
}

.container.iot .AC:has([data-power="Off"]) button[data-power],
.container.iot .AC:has([data-power="Off"]) div:has([data-rssi]),
.container.iot .AC:has([data-power="Off"]) div:has([data-power]) {
	position: relative;
	z-index: 99;
}

.container.iot.offline .AC button[data-power],
.container.iot.offline .AC div:has([data-rssi]),
.container.iot.offline .AC div:has([data-power]),
.container.iot .AC.offline div:has([data-rssi]),
.container.iot .AC.offline div:has([data-power]) {
	z-index: 0 !important;
}

.container.iot .settings.AC .grid {
	height: 112px;
	width: 100%;

	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 5px;
	align-content: space-between;
	
	z-index: initial !important;
}

.container.iot .settings.AC .grid > * {
	flex: 0 0 fit-content;
}

.container.iot .settings.AC .grid > .power,
.container.iot .settings.AC .grid > .misc {
	flex: 0 0 100%;
	align-content: center;
}

.container.iot .settings.AC .grid > .selector {
	display: inline-block;
	position: relative;
}

.container.iot .settings.AC input[type=number] {
	font-size: 50px;
	height: 50px;
	line-height: 60px;
	width: 90px;
}

.container.iot .settings.AC button {
	margin-top: 0;
}

.container.iot .settings.AC div.setting {
	display: inline-block;
	position: relative;
	transform: initial;
	top: initial;
}

.container.iot .settings.AC .options {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	
	width: 125px;
	position: absolute;
	top: 0px;

	background: white;
	z-index: 999;
}

.container.iot .settings.AC .options.hidden {
	display: none;
}

.container.iot .settings.AC .mode .options {
	left: 65px;
}
.container.iot .settings.AC .fan .options {
	right: 65px;
}

.container.iot .settings.AC button.toggle,
.container.iot .settings.AC .selector button {
	display: inline-block;
	
	width: 60px;
	height: 67px;

	padding: 2px;	

	border: solid 1px grey;
	border-radius: 5px;

	font-family: Oswald, Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 25px;	
	color: grey;
}

.container.iot .settings.AC .selector button.active {
	display: none;
}

.container.iot .settings.AC button.toggle {
	position: relative;
	
	width: 60px;
	height: 40px;
	line-height: 40px;	
	
	text-align: center;
}

.container.iot .settings.AC button.toggle::before {
	content: '\00A0';
	
	display: block;
	position: absolute;
	
	top: 5px;
	right: 5px;
	
	width: 10px;
	height: 5px;
	
	border: solid 1px black;
	
	background: lightcyan;
}

.container.iot .settings.AC button.toggle.off::before {
	background: darkgrey;
}

.container.iot .settings.AC button.toggle.on {
	color: darkcyan;
}

.container.iot .settings.AC button.toggle.on::before {
	background: cyan;	
}

.container.iot .icon.AC .state {
	position: relative;
	top: 40%;
}

.container.iot .icon.AC .power,
.container.iot .icon.AC .mode,
.container.iot .icon.AC .fan {
	position: relative;
	display: inline-block;
	white-space: pre-line;
	
	text-align: center;
	width: 30px;
	
	font-size: 12px;
	line-height: 15px;
}

.container.iot .icon.AC .power {
	position: absolute !important;
	left: 2px;
	bottom: 0;
	z-index: 99;
}

.container.iot .settings.AC .selector button::before,
.container.iot .icon.AC .power::before,
.container.iot .icon.AC .mode::before,
.container.iot .icon.AC .fan::before {
	content: '\00A0';
	display: block;
	
	width: 25px;
	height: 25px;
	
	background: darkcyan;
	margin: auto;
}

.container.iot .settings.AC .selector button::before {
	display: block;

	width: 25px;
	height: 25px;
	
	background: grey;
}

.container.iot .settings.AC button.selected::before,
.container.iot .settings.AC button.active::before {
	background: darkcyan;
}

.container.iot .icon.AC .power .value,
.container.iot .icon.AC .power .value > *,
.container.iot .icon.AC .mode .value,
.container.iot .icon.AC .mode .value > *,
.container.iot .icon.AC .fan .value,
.container.iot .icon.AC .fan .value > * {
	position: initial;
	font-size: inherit;
	line-height: inherit;
}

.container.iot .icon.AC .power::before {
			mask: url(/images/on-off.svg) no-repeat;
	-webkit-mask: url(/images/on-off.svg) no-repeat;
}

.container.iot .icon.AC .power:has([data-power="On"])::before {
	background: green;
}

.container.iot .icon.AC .power:has([data-power="Off"])::before {
	background: red;
}

.container.iot .settings.AC .mode button::before,
.container.iot .icon.AC .mode::before {
			mask: url(/images/temperature.svg) no-repeat 6px 0;
	-webkit-mask: url(/images/temperature.svg) no-repeat 6px 0;
}

.container.iot .settings.AC .mode button.Auto::before,
.container.iot .icon.AC .mode:has([data-mode="Auto"])::before {
			mask: url(/images/temperature.svg) no-repeat 6px 0;
	-webkit-mask: url(/images/temperature.svg) no-repeat 6px 0;
}

.container.iot .settings.AC .mode button.Cool::before,
.container.iot .icon.AC .mode:has([data-mode="Cool"])::before {
			mask: url(/images/cool.svg) no-repeat;
	-webkit-mask: url(/images/cool.svg) no-repeat;
}

.container.iot .settings.AC .mode button.Dry::before,
.container.iot .icon.AC .mode:has([data-mode="Dry"])::before {
			mask: url(/images/humidity.svg) no-repeat;
	-webkit-mask: url(/images/humidity.svg) no-repeat;
}

.container.iot .settings.AC .mode button.Fan::before,
.container.iot .icon.AC .mode:has([data-mode="Fan"])::before {
			mask: url(/images/fan.svg) no-repeat;
	-webkit-mask: url(/images/fan.svg) no-repeat;
}

.container.iot .settings.AC .mode button.Heat::before,
.container.iot .icon.AC .mode:has([data-mode="Heat"])::before {
			mask: url(/images/fire.svg) no-repeat;
	-webkit-mask: url(/images/fire.svg) no-repeat;
}

.container.iot .settings.AC .fan button::before,
.container.iot .icon.AC .fan::before {
			mask: url(/images/fan.svg) no-repeat;
	-webkit-mask: url(/images/fan.svg) no-repeat;
}

.container.iot .settings.AC .fan button.Auto::before,
.container.iot .icon.AC .fan:has([data-fan-level="a"])::before {
			mask: url(/images/fan-a.svg) no-repeat;
	-webkit-mask: url(/images/fan-a.svg) no-repeat;
}

.container.iot .settings.AC .fan button.Off::before,
.container.iot .icon.AC .fan:has([data-fan-level="0"])::before {
			mask: url(/images/fan-0.svg) no-repeat;
	-webkit-mask: url(/images/fan-0.svg) no-repeat;
}

.container.iot .settings.AC .fan button.Min::before,
.container.iot .icon.AC .fan:has([data-fan-level="1"])::before {
			mask: url(/images/fan-1.svg) no-repeat;
	-webkit-mask: url(/images/fan-1.svg) no-repeat;
}

.container.iot .settings.AC .fan button.Low::before,
.container.iot .icon.AC .fan:has([data-fan-level="2"])::before {
			mask: url(/images/fan-2.svg) no-repeat;
	-webkit-mask: url(/images/fan-2.svg) no-repeat;
}

.container.iot .settings.AC .fan button.Medium::before,
.container.iot .icon.AC .fan:has([data-fan-level="3"])::before {
			mask: url(/images/fan-3.svg) no-repeat;
	-webkit-mask: url(/images/fan-3.svg) no-repeat;
}

.container.iot .settings.AC .fan button.Max::before,
.container.iot .icon.AC .fan:has([data-fan-level="4"])::before {
			mask: url(/images/fan-4.svg) no-repeat;
	-webkit-mask: url(/images/fan-4.svg) no-repeat;
}