.lbl{
	  vertical-align: middle;
	}

	.smf{
		border-radius: 15px;
		width: 30px;
		height: 30px;
		 display: inline-block; 
	}
	.smf_grey{
		background: grey;
	}
	
	.smf_red{
		background: red;
	}

	.smf_green{
		background: #00aa00;
	}

	.egg{
		animation-duration: 1s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
		animation-name: animateeggback;
	}
	.rotated {
		animation-name: animateegg;
	}
	@keyframes animateegg{
		100% {transform: rotate(180deg);}
	}
	@keyframes animateeggback{
		0% {transform: rotate(180deg);}
		100% {transform: rotate(0deg);}
	}
	
	.sliderN {
		overflow: hidden;
		width: 180px;
		height: 30px;
		-webkit-appearance: none;
		border-radius: 3px;
		background: lightgray;
		accent-color: black;
		bbackground-color:red;
		border: 1px solid #000000;
		box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
		cursor: pointer;
	}
	
	input[type=range][orient=vertical].sliderN {
		appearance: slider-vertical;
		width: 30px;
		height: 180px;
		ppadding: 0 5px;
		background: lightgray;
		accent-color: black;
		-webkit-appearance: none;
	}
	
	
	#toastDiv {
	  visibility: hidden;
	  min-width: 250px;
	  margin-left: -125px;
	  background-color: #a47f70;
	  color: #fff;
	  text-align: center;
	  border-radius: 2px;
	  padding: 16px;
	  position: fixed;
	  z-index: 1;
	  left: 50%;
	  bottom: 30px;
	  font-size: 17px;
	}

	#toastDiv.showToast {
	  visibility: visible;
	  -webkit-animation: fadeinToast 0.5s, fadeoutToast 0.5s 2.5s;
	  animation: fadeinToast 0.5s, fadeoutToast 0.5s 2.5s;
	}

	@-webkit-keyframes fadeinToast {
	  from {bottom: 0; opacity: 0;} 
	  to {bottom: 30px; opacity: 1;}
	}

	@keyframes fadeinToast {
	  from {bottom: 0; opacity: 0;}
	  to {bottom: 30px; opacity: 1;}
	}

	@-webkit-keyframes fadeoutToast {
	  from {bottom: 30px; opacity: 1;} 
	  to {bottom: 0; opacity: 0;}
	}

	@keyframes fadeoutToast {
	  from {bottom: 30px; opacity: 1;}
	  to {bottom: 0; opacity: 0;}
	}