html {
	font-family: Arial, sans-serif;
}

.leftPreview {
	    width: 50%;
	    
    float: left;
    padding: 10px;
}

#leuchte img {
 padding: 0px;
 margin: 0px;
 vertical-align: middle;
 box-sizing: border-box;
}

#leuchte br {
 padding: 0px;
 margin: 0px;
 height: 0px;
}

.ringConf img {
	width: 10%;
}

#ctrlPane {
	margin-top: "24px" !important;
}

.ctrl  {
	background-color: transparent;
	border: 0px solid black;
	height: 82px;
	/* Center items vertically */
	display: flex;
	align-items: center;

}

.ctrl-action {
	background-color: transparent;
	border: 0px solid black;
	height: 40px;
	width: 40px;
	padding-left: 10px;
}

.ctrl-action:active {
	background-color: #f0f0f0;
	filter: brightness(50%);
}

.is-lit {
	/* Make image brighter */
	filter: brightness(120%);
}


/* Blinking anim (no fading) */
@keyframes blinker {
	0% { filter: brightness(120%); }
	50% { filter: brightness(100%); }
	100% { filter: brightness(120%); }
}

.is-alternating-1 {
	animation: blinker 1s linear infinite;
}