@font-face {
	font-family: Oswald;
	src: url(/css/Oswald.woff) format('woff');
}

@font-face {
	font-family: Barlow;
	src: url(/css/Barlow.woff) format('woff');
}

@keyframes flash-outline {
	100% {
		outline: solid 1px white;
	}
}

@keyframes flash-background {
	100% {
		background-color: lightgrey;
	}
}

body,
input,
button {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 15px;
	line-height: 20px;
	color: black;
}

input,
button {
	outline-width: 0px;
	border: solid 1px black;
}

button:focus,
input[type=text]:focus,
input[type=password]:focus {
	border: solid 1px darkcyan;
	outline: solid 1px cyan;
}

#all-valves button:focus {
	border: none;
	outline: none;
}

#all-valves button:focus::before {
	background: darkcyan;
}

.swipe {
	transition: opacity 0.35s;
	
	user-select: none;
	
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.swipe.start {
	cursor: pointer;
} 

.swipe.move {
	opacity: 0.2;
} 

input,
button {
	padding: 2px 5px;
}

button[type=submit] {
	font-weight: bold;
}

button.on-off,
button.reboot {
	display: inline-block;
	width: 20px;
	height: 20px;
	padding: 0;
	border: none;
	overflow: hidden;
	background: none;
	cursor: pointer;
}

button.on-off::before,
button.reboot::before {
	content: '\00A0';
	display: inline-block;
	width: 20px;
	height: 20px;
			mask: url(/images/on-off.svg) no-repeat;
	-webkit-mask: url(/images/on-off.svg) no-repeat;
	background: darkcyan;
}

button.reboot::before {
			mask: url(/images/reboot.svg) no-repeat;
	-webkit-mask: url(/images/reboot.svg) no-repeat;
}

a {
	color: darkcyan;
	text-decoration: underline;
}

h1 {
	text-align: center;

	font-family: Oswald, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 25px;

	background-color: lightgray;
}

h2 {
	font-family: Oswald, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 18px;
	line-height: 27px;
}

h2 a {
	color: black;
	text-decoration: none;
}

h3 {
	font-size: 14px;
	font-weight: normal;
	line-height: 20px;
}

div.user {
	font-size: 13px;
	line-height: 20px;
	color: gray;
}

div.user a {
	text-decoration: none;
	color: darkcyan;
	font-weight: bold;
}

div.user.blue a {
	color: blue;
}

label {
	font-size: 14px;
	line-height: 16px;
}

.error {
	color: red;
}

.cold {
	color: deepskyblue !important;
}

.low,
.hot {
	color: orangered !important;
}

.critical,
.glow {
	color: red !important;
	text-shadow: 0 0 3px violet !important;
}

.success {
	color: darkcyan;
}

.fresh {
	color: blue;
}

.center {
	text-align: center;
}

.box {
	border: solid 1px black;
}

#back a {
	background: black;	
}

#logout a {
	background: grey;
}

#back a:hover,
#logout a:hover {
	background: darkcyan;
}

#room-unify > span.fresh {
	border-color: blue;
	outline: solid 1px cyan;
	animation: 500ms infinite alternate flash-outline;
}

#room-unify > span.fresh::before {
	background-color: blue;
	animation: 500ms infinite alternate flash-background;
}

#clock {
	font-family: Barlow, Oswald, Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 40px;
	font-variant-numeric: tabular-nums;
	color: grey;
}

#clock .local {
	font-size: 26px;
	color: lightgrey;
}