:root {
	--black: #18181;
	--dark: #212529;
	--gray: #373F46;
	--silver: #606E77;
	--blue: #1e90ff;
	--green: #42C873;
	--navy: #416E8E; /* Грязно-синий */
	--violet: #821AE8;
	--red: #DC5945;
	--orange: #F5BC00;
	
	--ac-heat: #F5BC00;
	/*--ac-cool: #45B4D5;*/
	--ac-cool: #1e90ff;
}

body {
	background-color: var(--dark);
	color: var(--bs-white);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	overflow: hidden;
}
a {
	color: var(--bs-white);
}
.others .bi,
.refresh .bi,
.close .bi {
	font-size: 2rem;
	cursor: pointer;
}
.navbar {
	--margin-bottom: 1rem;
}
.widget {
	background-color: var(--navy);
	padding: 1rem;
	margin-bottom: 1rem;
	height: 140px;
	align-items: center;
	display: grid;
	text-align: center;
	border-radius: 8px;
}
.widget[data-uid] {
	background-color: var(--silver);
	cursor: pointer;
}
	.widget[data-uid]:hover {
		--opacity: 0.75;
		--border-bottom: 2px solid var(--red);
		--box-shadow: 0 0 0 2px var(--red) inset;
	}
.widget.half {
	height: 70px;
	padding: 0.5rem;
}
.widget .bi {
	font-size: 2.5rem;
}
.widget.half .bi {
	font-size: 1.25rem;
}
.widget .bi.small {
	font-size: 1rem !important;
}
.widget.half h5 {
	font-size: 0.9em;
	text-overflow: ellipsis;
	margin-bottom: 0.25rem;
}
.widget.active {
	background-color: var(--green);
}
.widget.waiting {
	opacity: 0.2;
}
.widget.active.cooling {
	background-color: var(--ac-cool);
}
.widget.active.heating {
	background-color: var(--ac-heat);
}
.widget.disabled {
	background-color: var(--dark) !important;
}

/* ЧАСЫ */
.widget.clock {
	background-color: var(--blue);
}
.widget.clock > * {
	margin-left: var(--bs-gutter-y);
	margin-right: var(--bs-gutter-y);
	height: 100%;
}
.widget.clock .time {
	background-color: var(--dark);
	color: var(--bs-white);
	text-align: center;
	font-size: 2.5rem;
	font-weight: 600;
	height: 100%;
	align-items: center;
	display: grid;
	border-radius: 8px;
}
.widget.clock .date {
	color: var(--bs-white);
	text-align: center;
	height: 100%;
	align-items: center;
	display: grid;
}
.widget.clock .date .day {
	font-size: 2rem;
}

.row.grid {
	padding-right: calc(var(--bs-gutter-x) * .25);
    padding-left: calc(var(--bs-gutter-x) * .25);
}
.row.grid > * {
	padding-right: calc(var(--bs-gutter-x) * .25);
    padding-left: calc(var(--bs-gutter-x) * .25);
}
.row > * {
	margin-bottom: -0.15rem;
}

/* ВТОРЫЕ ОКНА */
.dialog {
	background-color: var(--dark);
	position: absolute;
	top: 0;
	z-index: 999;
	width: 100%;
	height: 100%;
	display: none;
}
.dialog a {
	text-decoration: none;
}
.dialog .widget {
	background-color: var(--silver);
}
.dialog .widget.readonly {
	background-color: var(--navy);
}
.dialog .widget.power {
	height: 154px;
}
.dialog .widget.active {
	background-color: var(--green);
}
.dialog .widget.active.power.heating {
	background-color: var(--orange);
}
.dialog .widget.active.power.cooling {
	background-color: var(--blue);
}
.dialog .widget.control.plus {
	background-color: var(--red);
}
.dialog .widget.control.minus {
	background-color: var(--blue);
}
.dialog .widget.camera {
	background-color: var(--red);
}