/* Colors */
:root {
	--hkt-color-label-headline1:				#bbb;
	--hkt-color-label-headline2:				#bbb;
	--hkt-color-label-headline3:				#bbb;
	--hkt-color-label-textlabel:				#666;
	--hkt-color-label-smalllabel:				#666;

	--hkt-color-warn:							#ffdb75;
	--hkt-color-error:							#d64545;

	--hkt-color-tile-on-foreground:				#333;
	--hkt-color-tile-on-background:				#ddd;
	--hkt-color-tile-off-foreground:			#999;
	--hkt-color-tile-off-background:			rgba(255,255,255, 0.15);

	--hkt-color-value-foreground:				#fff;
	--hkt-color-value-background:				#75CA26;

	--hkt-color-notification1-fg:				#fff;
	--hkt-color-notification1-bg:				#d64545;
	--hkt-color-notification2-fg:				#666;
	--hkt-color-notification2-bg:				#ffdb75;
	--hkt-color-notification3-fg:				#666;
	--hkt-color-notification3-bg:				#75CA26;
	--hkt-color-notification4-fg:				#666;
	--hkt-color-notification4-bg:				#add8e6;
	--hkt-color-notification5-fg:				#fff;
	--hkt-color-notification5-bg:				#808080;

	--hkt-color-settings-text:					#666;
	--hkt-color-settings-toggle-on:				#bbb;
	--hkt-color-settings-toggle-off:			#666;

	--hkt-color-dialog-foreground:				#bbb;
	--hkt-color-dialog-background:				#444;
	--hkt-color-dialog-title-fg:				#fff;
	--hkt-color-dialog-title-bg:				#444;

	--hkt-color-datepicker-background:			#444;
	--hkt-color-datepicker-border:				#666;
	--hkt-color-datepicker-head-fg:				#fff;
	--hkt-color-datepicker-daynames:			#fff;
	--hkt-color-datepicker-daynames-weekend:	#bbb;
	--hkt-color-datepicker-days:				#fff;
	--hkt-color-datepicker-days-weekend:		#bbb;
	--hkt-color-datepicker-today:				orange;
	--hkt-color-datepicker-selected-fg:			#000;
	--hkt-color-datepicker-selected-bg:			#fff;

	--hkt-color-button-fg:						#fff;
	--hkt-color-button-bg:						#333;
	--hkt-color-button-bg-2:					#3a3a3a;
	--hkt-color-button-bg-3:					#303030;

	--hkt-color-navigationbutton-default-fg:	#666;
	--hkt-color-navigationbutton-active-fg:		#bbb;

	--hkt-color-table-text:						var(--hkt-color-label-textlabel);
	--hkt-color-table-frame:					var(--hkt-color-label-textlabel);
}

/*---------------------------------------------------------------*/
/*#region Basic design for all widgets */
.homekitTiles {
	font-family: -apple-system, SanFrancisco, Helvetica, Verdana, Geneva, Tahoma, sans-serif;
	font-size: 12px;
	font-weight: 400;
	cursor:pointer;
}
.homekitTiles .invisible-helper {
	display: none;
}
/* Operation blocked */
.homekitTiles .blockOperation,
.homekitTiles .blockOperation .blocked {
	cursor: not-allowed;
}
.homekitTiles .blockOperation .blocked {
	z-index: 999;
}
.homekitTiles:not(.dialog):not(.viewInWidget):has(.blockOperation .show-disabled) {
	opacity: 0.3;
}

/*#endregion*/
/*---------------------------------------------------------------*/
/*#region Label widget */
.homekitTiles.label {
	font-weight: 500;
}
.homekitTiles.label.headline1 {
	color: var(--hkt-color-label-headline1);
	font-size: 24px;
}
.homekitTiles.label.headline2 {
	color: var(--hkt-color-label-headline2);
	font-size: 16px;
}
.homekitTiles.label.headline3 {
	color: var(--hkt-color-label-headline3);
	font-size: 12px;
	text-align: center;
}
.homekitTiles.label.textlabel {
	color: var(--hkt-color-label-textlabel);
	font-size: 16px;
}
.homekitTiles.label.smalllabel {
	color: var(--hkt-color-label-smalllabel);
	font-size: 12px;
}
/*#endregion*/
/*---------------------------------------------------------------*/
/*#region Basic design for tiles */
.homekitTiles.tile {
	border-radius: 15px;
}
.homekitTiles.tile.small {
	border-radius: 10px;
}
.homekitTiles.tile .labelGroup1 {
	bottom: 8px;
	left: 10px;
	right: 1px;
	position: absolute;
}
.homekitTiles.tile .labelGroup2 {
	top: 5px;
	left: 50px;
	right: 1px;
	position: absolute;
	font-size: 10px;
}
.homekitTiles.tile.big .labelGroup1 {
	bottom: 10px;
	left: 15px;
	font-size: 30px;
}
.homekitTiles.tile.big .labelGroup2 {
	top: 30px;
	left: 100px;
	font-size: 15px;
}
.homekitTiles.tile.small .labelGroup1 {
	bottom: 4px;
	left: 0px;
	font-size: 10px;
	text-align: center;
}
.homekitTiles.tile.small .labelGroup2 {
	display: none;
}

/* State active or default */
.homekitTiles.tile.state-default {
	color: var(--hkt-color-tile-off-foreground);
	background-color: var(--hkt-color-tile-off-background);
}
.homekitTiles.tile.state-active {
	color: var(--hkt-color-tile-on-foreground);
	background-color: var(--hkt-color-tile-on-background);
}
.homekitTiles.tile.state-default .tileIcon:not(.iconColored) {
	filter: grayscale(100);
}

/* Icons */
.homekitTiles.tile .tileIcon {
	width: 35px;
	height: 35px;
	top: 10px;
	left: 10px;
	position: absolute;
}
.homekitTiles.tile .tileIcon img {
	width: 100%;
	height: 100%;
}
.homekitTiles.tile .tileIcon .round {
	border-radius: 999px;
}
.homekitTiles.tile.big .tileIcon {
	width: 65px;
	height: 65px;
	top: 20px;
	left: 20px;
}
.homekitTiles.tile.small .tileIcon {
	width: 25px ;
	height: 25px ;
	top: 3px;
	left: 17.5px;
}

/* Value */
.homekitTiles.tile .tileValue {
	color: var(--hkt-color-value-foreground);
	background-color: var(--hkt-color-value-background);
	font-size: 10px;
	min-width: 35px;
	height: 35px;
	top: 10px;
	left: 10px;
	position: absolute;
	border-radius: 999px;
	line-height: 35px;
	text-align: center;
}
.homekitTiles.tile.big .tileValue {
	font-size: 25px;
	min-width: 65px;
	height: 65px;
	top: 20px;
	left: 20px;
	line-height: 65px;
}
.homekitTiles.tile.small .tileValue {
	font-size: 10px;
	min-width: 30px;
	height: 30px;
	top: 3px;
	left: 15px;
	line-height: 30px;
}

/* Tiles with increment */
.homekitTiles.tile .increment {
	top: 0px;
	right: 0px;
	position: absolute;
}
.homekitTiles.tile .increment div {
	width: 20px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	display: block;
	border-radius: 999px;
	border: 1px solid;
	margin: 10px;
}
.homekitTiles.tile .increment div:first-child {
	margin-bottom: 5px;
}
.homekitTiles.tile .increment div:not(:first-child) {
	margin-top: 5px;
}
.homekitTiles.tile.big .increment div {
	width: 30px;
	height: 30px;
	line-height: 30px;
	margin: 20px;
	font-size: 15px;
}
.homekitTiles.tile.big .increment div:first-child {
	margin-bottom: 10px;
}
.homekitTiles.tile.big .increment div:not(:first-child) {
	margin-top: 10px;
}
.homekitTiles.tile.small .increment div {
	display: none
}

/* Operation blocked */
.homekitTiles.tile .blockOperation .blockedIcon {
	width: 20px;
	height: 20px;
	top: 10px;
	right: 10px;
	position: absolute;
	filter: contrast(0.8);
}
.homekitTiles.tile.big .blockOperation .blockedIcon {
	width: 30px;
	height: 30px;
	top: 20px;
	right: 20px;
}
.homekitTiles.tile.small .blockOperation .blockedIcon {
	top: 2px;
	right: 2px;
}

/* Acknowledged icon */
.homekitTiles.tile .ackIcon {
	width: 20px;
	height: 20px;
	top: 10px;
	right: 10px;
	position: absolute;
}
.homekitTiles.tile .ackIcon .icon {
	width: 100%;
	height: 100%;
	filter: contrast(0.8);
}
.homekitTiles.tile.big .ackIcon {
	width: 30px;
	height: 30px;
	top: 20px;
	right: 20px;
}
.homekitTiles.tile.small .ackIcon {
	top: 2px;
	right: 2px;
}

/* Signal pictures */
.homekitTiles.tile .signals {
	width: 30px;
	top: 10px;
	right: 10px;
	position: absolute;
}
.homekitTiles.tile .signals .icon {
	width: 30px;
	height: 30px;
	top: 0;
	filter: contrast(0.8);
	position: absolute;
}
.homekitTiles.tile .signals .description {
	min-width: 40px;
	top: 30px;
	right: -5px;
	display: block;
	text-align: center;
	position: absolute;
}
.homekitTiles.tile.big .signals {
	width: 50px;
	top: 15px;
	right: 20px;
	position: absolute;
}
.homekitTiles.tile.big .signals .icon {
	width: 50px;
	height: 50px;
	top: 0;
	filter: contrast(0.8);
	position: absolute;
}
.homekitTiles.tile.big .signals .description {
	min-width: 90px;
	top: 50px;
	right: -20px;
	font-size: 20px;
}

/* if someone uses vis-integrated signals */
.homekitTiles.tile .vis-signal {
	top: 10px !important;
	left: unset !important;
	right: 10px;
	text-align: right;
}
/*#endregion*/
/*---------------------------------------------------------------*/
/*#region Basic design for indicators */
.homekitTiles.indicator {
	border-radius: 15px;
}
.homekitTiles.indicator .labelGroup1 {
	top: 50%;
	transform: translateY(-50%);
	left: 40px;
	right: 1px;
	position: absolute;
}
.homekitTiles.indicator .labelGroup1 .label {
	margin-right: 3px;
}
.homekitTiles.indicator .labelGroup1 br {
	display: none;
}
.homekitTiles.indicator .labelGroup2 {
	display: none;
}

/* State active or default */
.homekitTiles.indicator.state-default {
	color: var(--hkt-color-tile-off-foreground);
	background-color: var(--hkt-color-tile-off-background);
}
.homekitTiles.indicator.state-active {
	color: var(--hkt-color-tile-on-foreground);
	background-color: var(--hkt-color-tile-on-background);
}
.homekitTiles.indicator.state-default .tileIcon {
	filter: grayscale(100);
}

/* Icons */
.homekitTiles.indicator .tileIcon {
	width: 20px;
	height: 20px;
	top: 50%;
	transform: translateY(-50%);
	left: 10px;
	position: absolute;
}
.homekitTiles.indicator .tileIcon img {
	width: 100%;
	height: 100%;
}
.homekitTiles.indicator .tileIcon .round {
	border-radius: 999px;
}

/* Value */
.homekitTiles.indicator .tileValue {
	color: var(--hkt-color-value-foreground);
	background-color: var(--hkt-color-value-background);
	font-size: 10px;
	min-width: 26px;
	height: 26px;
	top: 2px;
	left: 5px;
	position: absolute;
	border-radius: 999px;
	line-height: 26px;
	text-align: center;
}

/* Tiles with increment */
.homekitTiles.indicator .increment {
	display: none;
}

/* Operation blocked */
.homekitTiles.indicator:has(.blockedIcon) {
	overflow: visible;
}
.homekitTiles.indicator .blockOperation .blockedIcon {
	width: 20px;
	height: 20px;
	top: 5px;
	left: calc(100% + 3px);
	position: absolute;
	filter: contrast(0.8);
}

/* Acknowledged icon */
.homekitTiles.indicator .ackIcon {
	width: 20px;
	height: 20px;
	top: 5px;
	right: 5px;
	position: absolute;
}
.homekitTiles.indicator .ackIcon .icon {
	width: 100%;
	height: 100%;
	filter: contrast(0.8);
}

/* Signal pictures */
.homekitTiles.indicator:has(.signals) {
	overflow: visible;
}
.homekitTiles.indicator .signals {
	width: auto;
	top: 5px;
	height: 20px;
	left: calc(100% + 3px);
	position: absolute;
	white-space: nowrap;
}
.homekitTiles.indicator .signals .icon {
	width: 20px;
	height: 20px;
}
.homekitTiles.indicator .signals .description {
	height: 20px;
	line-height: 20px;
	margin-left: 3px;
	position: absolute;
	display: inline-block;
	color: var(--hkt-color-tile-off-foreground);
}
/*#endregion*/
/*---------------------------------------------------------------*/
/*#region Basic design for icon-only */
.homekitTiles.tile.iconOnly {
	border-radius: 0;
}
.homekitTiles.tile.iconOnly .labelGroup1,
.homekitTiles.tile.iconOnly .labelGroup2 {
	display: none;
}
.homekitTiles.tile.iconOnly.state-default,
.homekitTiles.tile.iconOnly.state-active {
	background-color: rgba(0,0,0,0);
}
.homekitTiles.tile.state-default .tileIcon:not(.iconColored) {
	filter: grayscale(100);
}
.homekitTiles.tile.iconOnly .tileIcon {
	width: 100%;
	height: auto;
	top: 0px;
	left: 0px;
	position: absolute;
}
.homekitTiles.tile.iconOnly .increment {
	display: none
}
/*#endregion*/
/*---------------------------------------------------------------*/
/*#region Basic design for text-only */
.homekitTiles.tile.textonly .labelGroup1 {
	left: unset;
	right: unset;
	bottom: unset;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	text-align: center;
}
.homekitTiles.tile.textonly .labelGroup2 {
	display: none;
}
.homekitTiles.tile.textonly .tileIcon {
	display: none;
}
.homekitTiles.tile.textonly .increment {
	display: none
}
.homekitTiles.tile.textonly .ackIcon {
	width: 20px;
	height: 20px;
	top: 50%;
	right: 0px;
	position: absolute;
	transform: translate(100%,-50%);
}
/*#endregion*/
/*----------------------------------------------------------------*/
/*#region Date-Picker */

/* Date-Picker Kachel */
.homekitTiles.tile.datepicker .labelGroup1 {
	padding-bottom: 15px;
}
.homekitTiles.tile.datepicker input {
	background-color: unset;
	border: unset;
	padding: unset;
	margin: unset;

	color: var(--hkt-color-tile-on-foreground);
	width: 100%;
	height: 100%;
	padding-left: 10px;
	padding-top: 78px;
	box-sizing: border-box;
	cursor: pointer;

	z-index: 2;
	position: absolute;
}
.homekitTiles.tile.datepicker.state-default input {
	color: var(--hkt-color-tile-off-foreground);
}

/* Date-Picker Indikator */
.homekitTiles.indicator.datepicker .labelGroup1 {
	display: none;
}
.homekitTiles.indicator.datepicker input {
	background-color: unset;
	border: unset;
	padding: unset;
	margin: unset;

	color: var(--hkt-color-tile-on-foreground);
	width: 100%;
	height: 100%;
	padding-left: 40px;
	box-sizing: border-box;
	cursor: pointer;

	z-index: 2;
	position: absolute;
	display: inline-block;
}
.homekitTiles.indicator.datepicker.state-default input {
	color: var(--hkt-color-tile-off-foreground);
}

/* Datepicker Fenster */
.homekitTiles.ui-datepicker {
	font-size: 16px;
	background: var(--hkt-color-datepicker-background);
	border: 1px solid var(--hkt-color-datepicker-border);
	border-radius: 10px;
	padding: 2px;
}
/* Datepicker Fenster Kopfzeile */
.homekitTiles.ui-datepicker .ui-datepicker-header {
	color: var(--hkt-color-datepicker-head-fg);
	background: none;
	border: none;
	border-radius: 0;
	padding: 4px 0;
}
/* Datepicker Fenster Kopfzeile Vor/Zurück */
.homekitTiles.ui-datepicker .ui-datepicker-header .ui-icon {
	background-image: none;
}
.homekitTiles.ui-datepicker .ui-datepicker-header .ui-icon.ui-icon-circle-triangle-e,
.homekitTiles.ui-datepicker .ui-datepicker-header .ui-icon.ui-icon-circle-triangle-w {
	background-position: unset;
}
.homekitTiles.ui-datepicker .ui-datepicker-header .ui-datepicker-prev,
.homekitTiles.ui-datepicker .ui-datepicker-header .ui-datepicker-next {
	border: none;
	border-radius: 0;
	width: 30px;
	height: 30px;
}
.homekitTiles.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:hover,
.homekitTiles.ui-datepicker .ui-datepicker-header .ui-datepicker-next:hover {
	background: none;
}
.homekitTiles.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before,
.homekitTiles.ui-datepicker .ui-datepicker-header .ui-datepicker-next:before {
	font-family: verdana;
	font-size: 16px;
	color: var(--hkt-color-datepicker-head-fg);
	display: block;
	width: 100%;
	height: 100%;
	line-height: 30px;
	text-align: center;
}
/* Datepicker Fenster Kopfzeile Zurück */
.homekitTiles.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:hover {
	left: 2px;
	top: 2px;
}
.homekitTiles.ui-datepicker .ui-datepicker-header .ui-datepicker-prev:before {
	content: "<";
}
/* Datepicker Fenster Kopfzeile Vor */
.homekitTiles.ui-datepicker .ui-datepicker-header .ui-datepicker-next:hover {
	right: 2px;
	top: 2px;
}
.homekitTiles.ui-datepicker .ui-datepicker-header .ui-datepicker-next:before {
	content: ">";
}
/* Datepicker Fenster Kopfzeile Monat */
.homekitTiles.ui-datepicker .ui-datepicker-header .ui-datepicker-title .ui-datepicker-month {
	font-weight: 700;
}
.homekitTiles.ui-datepicker .ui-datepicker-header .ui-datepicker-title .ui-datepicker-year {
	font-weight: 300;
}
/* Datepicker Fenster Kalender */
.homekitTiles.ui-datepicker .ui-datepicker-calendar {
	margin: 0 0 2px 0;
}
/* Datepicker Fenster Kalender Überschrift Wochentage Mo-Fr */
.homekitTiles.ui-datepicker .ui-datepicker-calendar thead tr th {
	color: var(--hkt-color-datepicker-daynames);
	font-weight: 800;
	height: 25px;
	width: 25px;
	padding: 0;
}
/* Datepicker Fenster Kalender Überschrift Wochentage Sa-So */
.homekitTiles.ui-datepicker .ui-datepicker-calendar thead tr th.ui-datepicker-week-end {
	color: var(--hkt-color-datepicker-daynames-weekend);
}
/* Datepicker Fenster Kalender Kalendertage (alle) */
.homekitTiles.ui-datepicker .ui-datepicker-calendar tbody tr td a {
	color: var(--hkt-color-datepicker-days);
	background: none;
	border: none;
	border-radius: 9999px;
	font-weight: 400;
	text-align: center;
	height: 25px;
	width: 25px;
	line-height: 25px;
	margin: auto;
}
/* Datepicker Fenster Kalender Kalendertage Sa-So */
.homekitTiles.ui-datepicker .ui-datepicker-calendar tbody tr td.ui-datepicker-week-end a.ui-state-default {
	color: var(--hkt-color-datepicker-days-weekend);
}
/* Datepicker Fenster Kalender Kalendertage heute */
.homekitTiles.ui-datepicker .ui-datepicker-calendar tbody tr td.ui-datepicker-today a.ui-state-default.ui-state-highlight {
	color: var(--hkt-color-datepicker-today);
}
/* Datepicker Fenster Kalender Kalendertage ausgwählt */
.homekitTiles.ui-datepicker .ui-datepicker-calendar tbody tr td.ui-datepicker-current-day a.ui-state-default.ui-state-active {
	color: var(--hkt-color-datepicker-selected-fg);
	background: var(--hkt-color-datepicker-selected-bg);
}
/* Datepicker Fenster Kalender Kalendertage heute ausgwählt */
.homekitTiles.ui-datepicker .ui-datepicker-calendar tbody tr td.ui-datepicker-current-day.ui-datepicker-today a.ui-state-default.ui-state-highlight.ui-state-active {
	color: var(--hkt-color-datepicker-today);
}
/*#endregion*/
/*---------------------------------------------------------------*/
/*#region Notification */
.homekitTiles .notifications {
	cursor: default;
}
.homekitTiles .notifications .notification {
	float: right;
}
.homekitTiles .notifications span {
	min-width: 21px;
	height: 21px;
	box-sizing: border-box;
	padding: 0px 5px;
	line-height: 21px;
	text-align: center;
	border-radius: 9999px;
	float: right;
	margin-left: -5px;
	position: relative;
}
.homekitTiles .notifications .notification1 {
	color: var(--hkt-color-notification1-fg);
	background-color: var(--hkt-color-notification1-bg);
	z-index: 5;
}
.homekitTiles .notifications .notification2 {
	color: var(--hkt-color-notification2-fg);
	background-color: var(--hkt-color-notification2-bg);
	z-index: 4;
}
.homekitTiles .notifications .notification3 {
	color: var(--hkt-color-notification3-fg);
	background-color: var(--hkt-color-notification3-bg);
	z-index: 3;
}
.homekitTiles .notifications .notification4 {
	color: var(--hkt-color-notification4-fg);
	background-color: var(--hkt-color-notification4-bg);
	z-index: 2;
}
.homekitTiles .notifications .notification5 {
	color: var(--hkt-color-notification5-fg);
	background-color: var(--hkt-color-notification5-bg);
	z-index: 1;
}
/*#endregion*/
/*----------------------------------------------------------------*/
/*#region Radiobuttons */
.homekitTiles.radiobuttons {
	border-radius: 15px;
	color: var(--hkt-color-tile-off-foreground);
	background-color: var(--hkt-color-tile-off-background);
}
.homekitTiles.radiobuttons .radiobuttons {
	width: 100%;
	height: 100%;
}
/* Hide the basic radiobutton */
.homekitTiles.radiobuttons .radiobuttons .radiobuttonGroup .radiobutton input[type='radio'] {
	clip: rect(0 0 0 0);
	position: absolute;
}
/* Button labels */
.homekitTiles.radiobuttons .radiobuttons .radiobuttonGroup .radiobutton label {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
/* Button icons */
.homekitTiles.radiobuttons .radiobuttons .radiobuttonGroup .radiobutton .radioIcon {
	width: 35px;
	height: 35px;
}
.homekitTiles.radiobuttons .radiobuttons .radiobuttonGroup.horizontal .radiobutton .radioIcon {
	width: 25px;
	height: 25px;
	margin-bottom: 5px;
}
.homekitTiles.radiobuttons .radiobuttons .radiobuttonGroup .radiobutton .radioIcon img {
	width: 100%;
	height: 100%;
}
.homekitTiles.radiobuttons .radiobuttons .radiobuttonGroup .radiobutton input[type='radio']:not(:checked) + label .radioIcon:not(.iconColored) {
	filter: grayscale(100);
}

/* Button active */
.homekitTiles.radiobuttons .radiobuttons .radiobuttonGroup .radiobutton input[type='radio']:checked + label {
	color: var(--hkt-color-tile-on-foreground);
	background-color: var(--hkt-color-tile-on-background);
}
/* Button active (only preview in VIS editor) */
.homekitTiles.radiobuttons .radiobuttons .radiobuttonGroup .radiobutton.state-active {
	color: var(--hkt-color-tile-on-foreground);
	background-color: var(--hkt-color-tile-on-background);
}

/* Operation blocked icon */
.homekitTiles.radiobuttons .blockedIcon {
	width: 20px;
	height: 20px;
	top: 5px;
	right: 5px;
	position: absolute;
	filter: contrast(0.8);
}
/* Operation blocked icon (show blocked icon only on active button) */
.homekitTiles.radiobuttons .radiobuttons .radiobuttonGroup .radiobutton input[type='radio']:not(:checked) ~ .blockOperation .blockedIcon {
	display: none;
}

/* Acknowledge icon */
.homekitTiles.radiobuttons .ackIcon {
	width: 20px;
	height: 20px;
	top: 10px;
	right: 10px;
	position: absolute;
}
.homekitTiles.radiobuttons .ackIcon .icon {
	width: 100%;
	height: 100%;
	filter: contrast(0.8);
}
/* Acknowledge icon (show ack icon only on active button) */
.homekitTiles.radiobuttons .radiobuttons .radiobuttonGroup .radiobutton input[type='radio']:not(:checked) + label .ackIcon {
	display: none;
}

/* Common properties for group and button */
.homekitTiles.radiobuttons .radiobuttons .radiobuttonGroup {
	display: flex;
	width: 100%;
	height: 100%;
}
.homekitTiles.radiobuttons .radiobuttons .radiobuttonGroup .radiobutton {
	display: flex;
	align-items: center;
	position: relative;
}
.homekitTiles.radiobuttons .radiobuttons .radiobuttonGroup .radiobutton:not(:first-of-type) {
	border-style: solid;
	border-color: var(--hkt-color-tile-off-foreground);
}

/* Arrange buttons one below the other */
.homekitTiles.radiobuttons .radiobuttons .radiobuttonGroup.vertical {
	flex-direction: column;
}
.homekitTiles.radiobuttons .radiobuttons .radiobuttonGroup.vertical .radiobutton {
	height: 100%;
}
.homekitTiles.radiobuttons .radiobuttons .radiobuttonGroup.vertical .radiobutton:not(:first-of-type) {
	border-width: 1px 0 0 0;
}

/* Arrange buttons next to each other */
.homekitTiles.radiobuttons .radiobuttons .radiobuttonGroup.horizontal {
	flex-direction: row;
}
.homekitTiles.radiobuttons .radiobuttons .radiobuttonGroup.horizontal .radiobutton {
	width: 100%;
}
.homekitTiles.radiobuttons .radiobuttons .radiobuttonGroup.horizontal .radiobutton:not(:first-of-type) {
	border-width: 0 0 0 1px;
}
/*#endregion*/
/*---------------------------------------------------------------*/
/*#region Settings */
.homekitTiles.settings {
	color: var(--hkt-color-settings-text);
	min-height: 17px;
}
/* Operation blocked icon */
.homekitTiles.settings:has(.blockedIcon) {
	overflow: visible;
}
.homekitTiles.settings .blockedIcon {
	width: 14px;
	height: 14px;
	top: 0px;
	left: -17px;
	position: absolute;
	filter: contrast(0.3);
}

/* Settings Bool */
/* Toggle frame */
.homekitTiles.settings.bool .toggle {
	width: 28px;
	height: 15px;
	border-radius: 17px;
	position: absolute;
	right: 0px;
	top: 0px;
}
.homekitTiles.settings.bool.state-default .toggle {
	border: 1px solid var(--hkt-color-settings-toggle-off);
}
.homekitTiles.settings.bool.state-active .toggle {
	border: 1px solid var(--hkt-color-settings-toggle-on);
}
/* Toggle bubble */
.homekitTiles.settings.bool .toggle:after {
	content: "";
	border-radius: 50%;
	width: 13px;
	height: 13px;
	position: absolute;
	top: 1px;
	left: 1px;
	transition: .4s;
}
.homekitTiles.settings.bool.state-default .toggle:after {
	background-color: var(--hkt-color-settings-toggle-off);
}
.homekitTiles.settings.bool.state-active .toggle:after{
	background-color: var(--hkt-color-settings-toggle-on);
	transform: translateX(13px);
}

/* Settings Value */
.homekitTiles.settings.value .value {
	box-sizing: border-box;
	min-width: 40px;
	height: 100%;
	float: right;
	text-align: right;
}
.homekitTiles.settings.value .incrementMinus,
.homekitTiles.settings.value .incrementPlus {
	border: 1px solid;
	border-radius: 999px;
	box-sizing: border-box;
	width: 17px;
	height: 17px;
	line-height: 14px;
	float: right;
	text-align: center;
}
.homekitTiles.settings.value .vis-widget-body *:not(.label) {
	margin-left: 5px;
}

/* Settings Select */
.homekitTiles.settings.select select {
	background-color: #808080;
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	float: right;
}
.homekitTiles.settings.select:has(.blockOperation) select {
	opacity: 0.3;
}
/*#endregion*/
/*---------------------------------------------------------------*/
/*#region View in widget swipe */
.homekitTiles.viewInWidget.swipe {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	font-size: unset;
}
.homekitTiles.viewInWidget.swipe .subview {
	scroll-snap-align: start;
	scroll-snap-stop: always;
	flex: 0 0 auto;
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}
.homekitTiles.viewInWidget.swipe .arrow {
	position: relative;
	transform: translateY(-50%);
}
.homekitTiles.viewInWidget.swipe .arrow.left {
	float: left;
}
.homekitTiles.viewInWidget.swipe .arrow.right {
	float: right;
}
.homekitTiles.viewInWidget.swipe .arrow img {
	width: 100%;
}
/*#endregion*/
/*---------------------------------------------------------------*/
/*#region Dialog windows */
.homekitTiles.dialog.ui-dialog {
	background-color: var(--hkt-color-dialog-background);
	padding: 0;
	border-radius: 5px;
	box-shadow: 0 0 50px 10px #000;
	font-size: unset;
}
.homekitTiles.dialog.ui-dialog .header {
	background-color: var(--hkt-color-dialog-title-bg);
	text-align: center;
	border-radius: 5px 5px 0 0;
}
.homekitTiles.dialog.ui-dialog .header .title {
	color: var(--hkt-color-dialog-title-fg);
	font-size: 16px;
}
.homekitTiles.dialog.ui-dialog .content {
	color: var(--hkt-color-dialog-foreground);
	padding: 0px;
}

/* closebutton */
.homekitTiles.dialog .button.integratedClosebutton {
	font-size: 16px;
	cursor: pointer;
	width: 100%;
	height: 50px;
	color: var(--hkt-color-button-fg);
	background-color: var(--hkt-color-button-bg);
	border: none;
	border-radius: 0;
	position: absolute;
	bottom: 0;
}

/* arrows */
.homekitTiles.dialog.arrow-top,
.homekitTiles.dialog.arrow-left,
.homekitTiles.dialog.arrow-right,
.homekitTiles.dialog.arrow-bottom {
	overflow: visible;
}
.homekitTiles.dialog.arrow-top:after,
.homekitTiles.dialog.arrow-right:after,
.homekitTiles.dialog.arrow-bottom:after,
.homekitTiles.dialog.arrow-left:after {
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-width: 30px;
}
.homekitTiles.dialog.arrow-top:after {
	bottom: 100%;
	left: 50%;
	border-bottom-color: var(--hkt-color-dialog-background);
	margin-left: -30px;
}
.homekitTiles.dialog.arrow-right:after {
	left: 100%;
	top: 50%;
	border-left-color: var(--hkt-color-dialog-background);
	margin-top: -30px;
}
.homekitTiles.dialog.arrow-bottom:after {
	top: 100%;
	left: 50%;
	border-top-color: var(--hkt-color-dialog-background);
	margin-left: -30px;
}
.homekitTiles.dialog.arrow-left:after {
	right: 100%;
	top: 50%;
	border-right-color: var(--hkt-color-dialog-background);
	margin-top: -30px;
}
/*#endregion*/
/*---------------------------------------------------------------*/
/*#region Buttons */

.homekitTiles .button {
	width: 100%;
	height: 100%;
	color: var(--hkt-color-button-fg);
	background-color: var(--hkt-color-button-bg);
	font-size: 16px;
	cursor: pointer;
	border: none;
	border-radius: 0;
}
/* Button-Set */
.homekitTiles.button-set .vis-widget-body,
.homekitTiles.dialog .dialog.button-set {
	display: flex;
	flex-direction: row;
}
.homekitTiles.button-set .button-set {
	flex-grow: 1;
	margin: 0;
}
.homekitTiles.dialog .dialog.button-set {
	height: 50px;
	width: 100%;
	bottom: 0px;
	position: absolute;
}

/* Button colors */
.homekitTiles .button.button-set.button-1,
.homekitTiles .button.button-set.button-4,
.homekitTiles .button.button-set.button-7,
.homekitTiles .button.button-set.button-10 {
	background-color: var(--hkt-color-button-bg-3);
}
.homekitTiles .button.button-set.button-2,
.homekitTiles .button.button-set.button-5,
.homekitTiles .button.button-set.button-8 {
	background-color: var(--hkt-color-button-bg-2);
}
.homekitTiles .button.button-set.button-3,
.homekitTiles .button.button-set.button-6,
.homekitTiles .button.button-set.button-9 {
	background-color: var(--hkt-color-button-bg);
}
/*#endregion*/
/*---------------------------------------------------------------*/
/*#region Pinpad */
.homekitTiles.dialog .pinpad.head {
	text-align: center;
	font-size: 16px;
}
.homekitTiles.dialog .pinpad.content {
  margin-top: 20px;
	display: flex;
	flex-direction: column;
}
.homekitTiles.dialog .pinpad.content .inputfield {
	display: flex;
	justify-content: center;
	margin: 5px;
	text-align: center;
}
.homekitTiles.dialog .pinpad.content .inputfield .hkt-pinpad-inputfield {
	width: 225px;
	height: 30px;
	font-size: 24px;
	text-align: center;
	color: #bbb;
	background-color: #333;
	border: 1px solid #666;
	outline: none;
}
.homekitTiles.dialog .pinpad.content .buttons {
	margin-top: 20px;
}
.homekitTiles.dialog .pinpad.content .buttons .row {
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.homekitTiles.dialog .pinpad.content .buttons .row .hkt-pinpad-btn-number,
.homekitTiles.dialog .pinpad.content .buttons .row .hkt-pinpad-btn-delete,
.homekitTiles.dialog .pinpad.content .buttons .row .hkt-pinpad-btn-enter {
	width: 70px;
	height: 50px;
	margin: 5px;
	padding: 5px;
	font-size: 20px;
	cursor: pointer;
	color: #bbb;
	background-color: #333;
	border: 1px solid #666;
}
.homekitTiles.dialog .pinpad.content .buttons .value {
	display: block;
	height: 24px;
}
  .homekitTiles.dialog .pinpad.content .buttons .additional-signs {
	display: block;
	font-size: 10px;
	color: #666;
}
  .homekitTiles.dialog .pinpad.content .buttons [value="0"] .additional-signs {
	font-size: 20px;
	transform: translateY(-17px);
	height: 12px;
}
/*#endregion*/
/*---------------------------------------------------------------*/
/*#region Navigation-Button-Set Mainmenu */
.homekitTiles.navigationbuttonset.mainmenu {
	color: var(--hkt-color-navigationbutton-default-fg);
	font-size: 12px;
	overflow:visible; /* needed for notifications */
}
.homekitTiles.navigationbuttonset.mainmenu .navigationbutton {
	box-sizing: border-box;
}
/* Icons */
.homekitTiles.navigationbuttonset.mainmenu .navigationbutton img {
	height: 16px;
	width: 16px;
	margin-right: 5px;
	filter: brightness(0.4);
}
/* Labels */
.homekitTiles.navigationbuttonset.mainmenu .navigationbutton label {
	cursor: pointer;
}
/* Button active */
.homekitTiles.navigationbuttonset.mainmenu .navigationbutton.state-active {
	color: var(--hkt-color-navigationbutton-active-fg);
}
.homekitTiles.navigationbuttonset.mainmenu .navigationbutton.state-active img {
	filter: brightness(0.8);
}
/* Common properties for navigationbuttons */
.homekitTiles.navigationbuttonset.mainmenu .horizontal,
.homekitTiles.navigationbuttonset.mainmenu .vertical {
	display: flex;
}
.homekitTiles.navigationbuttonset.mainmenu .navigationbutton {
	display: flex;
	flex-direction: row;
	align-items: center;
}
/* Arrange buttons next to each other */
.homekitTiles.navigationbuttonset.mainmenu .horizontal {
	flex-direction: row;
}
.homekitTiles.navigationbuttonset.mainmenu .horizontal .navigationbutton {
	/* width: 120px; */
	max-width: 120px;
	flex-grow: 1;
	justify-content: center;
}
.homekitTiles.navigationbuttonset.mainmenu .horizontal .navigationbutton ~ .navigationbutton {
	border: 1px solid;
	border-width: 0 0 0 1px;
	border-color: var(--hkt-color-navigationbutton-default-fg);
}
/* Arrange buttons one below the other */
.homekitTiles.navigationbuttonset.mainmenu .vertical {
	flex-direction: column;
}
.homekitTiles.navigationbuttonset.mainmenu .vertical .navigationbutton {
	height: 30px;
	justify-content: left;
	padding: 0 0 0 5px;
}
.homekitTiles.navigationbuttonset.mainmenu .vertical .navigationbutton ~ .navigationbutton {
	border: 1px solid;
	border-width: 1px 0 0 0;
	border-color: var(--hkt-color-navigationbutton-default-fg);
}
/* Notification at nav-button */
.homekitTiles.navigationbuttonset.mainmenu .notifications {
	cursor: default;
	width:85px;
	height:21px;
	position: absolute;
	display: block;
	margin-top: -30px;
	margin-right: -34px;
}
.homekitTiles.navigationbuttonset.mainmenu .notifications .notification {
	float: right;
}

/*#endregion*/
/*---------------------------------------------------------------*/
/*#region Navigation-Button-Set Submenu */
.homekitTiles.navigationbuttonset.submenu {
	color: var(--hkt-color-navigationbutton-default-fg);
	font-size: 12px;
	overflow:visible; /* needed for notifications */
}
.homekitTiles.navigationbuttonset.submenu .submenuButtonGroup {
	display: flex;
	width: 100%;
	height: 100%;
	position: absolute;
	font-size: 12px;
}
.homekitTiles.navigationbuttonset.submenu .submenuButtonGroup .navigationbutton {
	flex-grow: 1;
	max-width: 100px;
	box-sizing: border-box;
}
.homekitTiles.navigationbuttonset.submenu .submenuButtonGroup .navigationbutton input[type='radio'] {
	clip: rect(0 0 0 0);
	position: absolute;
}
.homekitTiles.navigationbuttonset.submenu .submenuButtonGroup .navigationbutton label {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: pointer;
}
/* Button active */
.homekitTiles.navigationbuttonset.submenu .submenuButtonGroup .navigationbutton  input[type='radio']:checked + label {
	color: var(--hkt-color-navigationbutton-active-fg);
}

/* Notification at nav-button */
.homekitTiles.navigationbuttonset.submenu .notifications {
	cursor: default;
	width: 85px;
	height: 21px;
	display: block;
	margin-top: -41px;
	float: right;
}
.homekitTiles.navigationbuttonset.submenu .notifications .notification {
	float: right;
}

/* Submenu strokes */
.homekitTiles.navigationbuttonset.submenu .submenue-stroke {
    stroke: var(--hkt-color-navigationbutton-active-fg);
    stroke-width: 1;
    fill: none;
    position: absolute;
    left: 0px;
    top: 23px;
}
.homekitTiles.navigationbuttonset.submenu .navigationbutton input[type='radio']:not(:checked) ~ .submenue-stroke {
    display: none;
}
.vis_container_edit .homekitTiles.navigationbuttonset.submenu .navigationbutton input[type='radio'] ~ .submenue-stroke {
    display: block;
	stroke-dasharray: 2;
    stroke: var(--hkt-color-navigationbutton-default-fg);
}

/*#endregion*/
/*---------------------------------------------------------------*/
/*#region Thermostat Kachel */
.homekitTiles.thermostatDialog .tileValue.cooling {
	background-color: deepskyblue;
}
.homekitTiles.thermostatDialog .tileValue.heating {
	background-color: darkorange;
}
.homekitTiles.tile.thermostatDialog .labelGroup2 {
	top: 9px;
	left: 48px;
	right: 1px;
	position: absolute;
	font-size: 10px;
}
.homekitTiles.tile.thermostatDialog.big .labelGroup2 {
	top: 20px;
	left: 110px;
	font-size: 18px;
}
.homekitTiles.tile.thermostatDialog .labelGroup2 .label3value,
.homekitTiles.tile.thermostatDialog .labelGroup2 .label4value,
.homekitTiles.tile.thermostatDialog .labelGroup2 .label5value,
.homekitTiles.tile.thermostatDialog .labelGroup2 .label6value {
	display: inline-block;
	width: 62px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.homekitTiles.tile.thermostatDialog .labelGroup2 .label3value:before,
.homekitTiles.tile.thermostatDialog .labelGroup2 .label4value:before,
.homekitTiles.tile.thermostatDialog .labelGroup2 .label5value:before,
.homekitTiles.tile.thermostatDialog .labelGroup2 .label6value:before {
	display: inline-block;
	width: 12px;
	text-align: center;
}
.homekitTiles.tile.thermostatDialog .labelGroup2 .label3value:before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='fill:%23000'%3E%3Cpath d='M5,10c-1.7,0-3.1-1.4-3.1-3.1S5,0,5,0s3.1,5.1,3.1,6.9S6.7,10,5,10z'/%3E%3C/svg%3E ");
	width: 10px;
	height: 10px;
}
.homekitTiles.tile.thermostatDialog .labelGroup2 .label4value:before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='fill:%23000'%3E%3Cpath d='M5,10C6.3,10,7.3,9,7.3,7.7c0-0.7-0.3-1.3-0.8-1.8C6.4,5.8,6.4,5.7,6.4,5.6V1.6c0-0.9-0.5-1.5-1.4-1.5 C4.2,0,3.6,0.6,3.6,1.5v4.1c0,0.2,0,0.2-0.1,0.3C2.9,6.4,2.7,7,2.7,7.6C2.7,9,3.7,10,5,10z M4.3,3.7V1.6C4.3,1,4.5,0.7,5,0.7 S5.7,1,5.7,1.6v2.2C4.3,3.7,5.8,3.7,4.3,3.7z'/%3E%3C/svg%3E ");
	width: 10px;
	height: 12px;
}
.homekitTiles.tile.thermostatDialog .labelGroup2 .label5value:before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='fill:%23000'%3E%3Cpath d='M9.7,10V0H0.3v10H9.7z M1.2,0.9h3.3v3.3H1.2V0.9z M1.2,5.1h3.3v4H1.2V5.1z M8.8,9.1H5.4v-4h3.3V9.1z M8.8,4.2H5.4V0.9h3.3 V4.2z'/%3E%3C/svg%3E ");
	width: 8px;
	height: 10px;
	margin: 0 1px;
}
.homekitTiles.tile.thermostatDialog .labelGroup2 .label6value:before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='fill:%23000'%3E%3Cpath d='M8,10H4c-0.2,0-0.3-0.1-0.3-0.3c0-0.5-0.2-0.8-0.6-1.3C2.8,8.1,2.6,7.9,2.4,7.5c-0.6-1-1.2-2.2-1.3-2.6C0.9,4.4,1,4.1,1.1,4 c0.1-0.2,0.4-0.3,0.7-0.3C2.2,3.7,2.6,4,3,4.4V1c0-0.6,0.5-1,1-1s1,0.5,1,1v1.4c0.1,0,0.2-0.1,0.3-0.1c0.4,0,0.7,0.2,0.9,0.5 c0.1-0.1,0.3-0.1,0.5-0.1c0.5,0,0.9,0.3,1,0.7c0.1,0,0.2-0.1,0.4-0.1c0.6,0,1,0.5,1,1v1c0,0.9-0.2,1.6-0.3,2.2 C8.5,8.2,8.3,8.9,8.3,9.6C8.3,9.8,8.2,10,8,10L8,10z M4.3,9.3h3.4C7.7,8.6,7.9,8,8,7.4c0.2-0.7,0.3-1.3,0.3-2.1V4.3 c0-0.2-0.1-0.3-0.3-0.3S7.7,4.1,7.7,4.3v0.4C7.7,4.8,7.5,5,7.3,5C7.2,5,7,4.8,7,4.7V3.6c0-0.2-0.1-0.3-0.3-0.3 c-0.2,0-0.3,0.1-0.3,0.3v0.7c0,0.2-0.1,0.3-0.3,0.3c-0.2,0-0.3-0.1-0.3-0.3V3.3c0-0.2-0.1-0.3-0.3-0.3C5.2,2.9,5,3.1,5,3.3V4 c0,0.2-0.1,0.3-0.3,0.3C4.5,4.3,4.3,4.2,4.3,4V0.9c0-0.2-0.1-0.3-0.3-0.3c-0.2,0-0.3,0.1-0.3,0.3V6c0,0.2-0.1,0.3-0.3,0.3 C3.2,6.3,3,6.2,3,6V5.7c-0.3-0.8-1-1.4-1.2-1.4c-0.1,0-0.1,0-0.1,0.1c0,0,0,0.1,0,0.3C1.8,5,2.3,6.1,3,7.2C3.2,7.5,3.4,7.7,3.6,8 C3.9,8.4,4.2,8.8,4.3,9.3L4.3,9.3z'/%3E%3C/svg%3E ");
	width: 10px;
	height: 10px;
}
.homekitTiles.tile.thermostatDialog.big .labelGroup2 .label3value,
.homekitTiles.tile.thermostatDialog.big .labelGroup2 .label4value,
.homekitTiles.tile.thermostatDialog.big .labelGroup2 .label5value,
.homekitTiles.tile.thermostatDialog.big .labelGroup2 .label6value {
	width: 124px;

}
.homekitTiles.tile.thermostatDialog.big .labelGroup2 .label3value:before,
.homekitTiles.tile.thermostatDialog.big .labelGroup2 .label4value:before,
.homekitTiles.tile.thermostatDialog.big .labelGroup2 .label6value:before {
	width: 15px;
	margin-right: 5px;
}
.homekitTiles.tile.thermostatDialog.big .labelGroup2 .label5value:before {
	width: 13px;
	margin: 0   7px 0 0;
}

/* Thermostat Dialog */
.homekitTiles.dialog .content {
	display: flex;
	flex-direction: column;
	height: 200px;
}

/* Thermostat Dialog Kopf */
.homekitTiles.dialog .thermostat.head {
	width: 100%;
	text-align: center;
}
.homekitTiles.dialog .thermostat.head .actualTemperature {
	display: flex;
	flex-direction: column;
	margin-top: 5px;
	margin-bottom: 10px;
}
.homekitTiles.dialog .thermostat.head .actualTemperature .title {
	display: flex;
	flex-direction: column;
}
.homekitTiles.dialog .thermostat.head .actualTemperature .value {
	color: white;
	font-size: 26px;
}

/* Thermostat Dialog Inhalte */
.homekitTiles.dialog .thermostat.content {
	display: flex;
	flex-direction: row-reverse;
}
.homekitTiles.dialog .thermostat.content > div {
	width: 50%;
}
.homekitTiles.dialog .thermostat.content .values {
	justify-content: space-around;
	display: flex;
	flex-direction: column;
}
.homekitTiles.dialog .thermostat.content .values > div {
	display: flex;
	flex-direction: column;
}
.homekitTiles.dialog .thermostat.content .values > div .title {
	font-size: 10px;
}
.homekitTiles.dialog .thermostat.content .values > div .value {
	color: white;
	font-size: 16px;
}
.homekitTiles.dialog .thermostat.content .values .selectMode,
.homekitTiles.dialog .thermostat.content .values .selectProfile {
	width: 88px;
	font-size: 1.25rem;
	line-height: 1.1;
	display: grid;
	grid-template-areas: "select";
	align-items: center;
}
.homekitTiles.dialog .thermostat.content .values .selectMode::after,
.homekitTiles.dialog .thermostat.content .values .selectProfile::after {
	content: "";
	width: 0.5em;
	height: 0.3em;
	background-color: white;
	clip-path: polygon(100% 0%, 0 0%, 50% 100%);
	justify-self: end;
	grid-area: select;
	margin-left: 10px;
}
.homekitTiles.dialog .thermostat.content .values .selectMode select,
.homekitTiles.dialog .thermostat.content .values .selectProfile select {
	appearance: none;
	background-color: transparent;
	border: none;
	font-size: 16px;
	cursor: inherit;
	outline: none;
	grid-area: select;
	color: white;
}
.homekitTiles.dialog .thermostat.content .values .lowBat.false {
	display: none;
}
.homekitTiles.dialog .thermostat.content .values .lowBat .value {
	color: var(--hkt-color-warn);
}
.homekitTiles.dialog .thermostat.content .values .unreach.false {
	display: none;
}
.homekitTiles.dialog .thermostat.content .values .unreach .value {
	color: var(--hkt-color-error);
}

/* Thermostat Dialog Slider */
.homekitTiles.dialog .thermostat.content .thermostatSlider {
	padding-left: 20px;
	box-sizing: border-box;
	overflow: visible;
	cursor: pointer;
	font-size: 12px;
	color: rgb(255, 255, 255);
	z-index: 1;
	position: relative;
}
.homekitTiles.dialog .thermostat.content .thermostatSlider .slider-container {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	margin-left: 50px;
}
.homekitTiles.dialog .thermostat.content .thermostatSlider .ui-slider {
	background: linear-gradient(0deg, rgba(87,0,255,1) 0%, rgba(255,0,131,1) 100%);
	width: 7px;
	height: 100%;
}
.homekitTiles.dialog .thermostat.content .thermostatSlider .ui-slider .ui-slider-handle {
	background: none;
	background-color: #333;
	width: 30px;
	height: 30px;
	border: 1px solid #555;
	border-radius: 50%;
	left: -12.5px;
	margin-bottom: -17px;
	color: #fff;
	font-size: 25px;
	font-weight: bold;
}
.homekitTiles.dialog .thermostat.content .thermostatSlider .ui-slider .ui-slider-handle:focus-visible {
	outline-style: none;
}
.homekitTiles.dialog .thermostat.content .thermostatSlider .ui-slider .ui-slider-handle:before,
.homekitTiles.dialog .thermostat.content .thermostatSlider .ui-slider .ui-slider-handle:after {
	content: '';
	width: 0;
	height: 0;
	display: block;
	border-width: 0 5px 5px 5px;
	border-color: #fff transparent;
	border-style: solid;
	position: absolute;
}
.homekitTiles.dialog .thermostat.content .thermostatSlider .ui-slider .ui-slider-handle:before {
	transform: rotate(0deg);
	left: 10px;
	top: 6px;
}
.homekitTiles.dialog .thermostat.content .thermostatSlider .ui-slider .ui-slider-handle:after {
	transform: rotate(180deg);
	left: 10px;
	top: 19px;
}
.homekitTiles.dialog .thermostat.content .thermostatSlider .ui-slider .step-label {
	transform: translateY(-50%);
	position: absolute;
	text-align: center;
	box-shadow: unset !important;
	color: #999;
	font-size: 8px;
	left: -34px;
}
.homekitTiles.dialog .thermostat.content .thermostatSlider .ui-slider .step-label:after {
	content: '';
	width: 6px;
	height: 1px;
	background: #999;
	position: absolute;
	margin-top: 5px;
	margin-left: 3px;
}
/*#endregion*/
/*---------------------------------------------------------------*/
/*#region Table */
.homekitTiles.jsonTable .table {
	border-collapse: collapse;
	box-sizing: border-box;
	width: 100%;
	table-layout: fixed;
	color: var(--hkt-color-table-text);
}
.homekitTiles.jsonTable .table-head {
	height: 20px;
}
.homekitTiles.jsonTable .table-head .row-item {
	font-weight: inherit;
}
.homekitTiles.jsonTable .row-item {
	box-sizing: border-box;
	padding: 0 5px;
}

/* Scrollbare Tabelle */
.homekitTiles.jsonTable .table-content-wrapper,
.homekitTiles.jsonTable .table-content-wrapper.scrollable.noheader {
	height: 100%;
}
.homekitTiles.jsonTable .table-content-wrapper.scrollable {
	overflow-y: auto;
	height: calc(100% - 20px);
}

/* Zeilenumbruch */
.homekitTiles.jsonTable .row-item.nowrap {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

/* Ausrichtung der Spalten */
.homekitTiles.jsonTable .row-item.alignleft {
	text-align: left;
}
.homekitTiles.jsonTable .row-item.aligncenter {
	text-align: center;
}
.homekitTiles.jsonTable .row-item.alignright {
	text-align: right;
}

/* Tabellenrahmen */
.homekitTiles.jsonTable .table-head {
	border-bottom: 1px solid var(--hkt-color-table-frame);
}
.homekitTiles.jsonTable .row-item:not(:last-of-type) {
	border-right: 1px dashed  var(--hkt-color-table-frame);
}

/* Hinweis wenn Tabelle leer */
.homekitTiles.jsonTable .row-item.content.empty-table.notice {
	text-align: center;
}

/*#endregion*/
/*----------------------------------------------------------------*/
/*#region DYNAMIZATION */
.spin {
	animation-name: spin;
	animation-duration: 4000ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
@keyframes spin {
	from { transform:rotate(0deg); } to { transform:rotate(360deg); }
}

.pulse {
	animation: pulse 2s ease-in-out infinite both;
}
@keyframes pulse {
	0%   { transform: scale(1); }
	50%  { transform: scale(0.8); }
	100% { transform: scale(1); }
}
/*#endregion*/
/*----------------------------------------------------------------*/
/*#region CONFIG-ITEMS */
.homekitTiles.config-item {
	border: 1px solid #666;
	color: #666;
	padding: 2px;
	box-sizing: border-box;
}
/*#endregion*/
/*----------------------------------------------------------------*/