html, body {
  width:  100%;
  height: 100%;
  margin: 0px;
  background-color: #11111b;
  overflow: none;
}

.btn:focus {
  outline: none;
}

canvas {
  position:absolute;
	left: 0;
	top: 0;
}

.color-pick {
	width: 100px;
	float: left;
	font-size: 14px;
}

#out-style:checked ~ .radio-slider-slide{
  background: rgba(255,255,255,.3);
  left: 3px;
}
#orbit-style:checked ~ .radio-slider-slide{
  background: rgba(255,255,255,.3);
  left: 86px;
}
#swing-style:checked ~ .radio-slider-slide{
  background: rgba(255,255,255,.3);
  left: 175px;
}

.radio-slider {
	margin: 4px;
}

.radio-slider {
	position:relative;
	background:#5BC0DE;
	overflow:hidden;
	padding:0!important;
	position:relative;
	height:26px;
	width:258px;
}
.radio-slider>* {
	float:left;
}
.radio-slider input[type=radio] {
	display:none;
}
.radio-slider label {
	font:90%/1.618 'Roboto';
	color:rgba(255,255,255,.9);
	z-index:0;
	display:block;
	width:80px;
	height:20px;
	margin:3px 3px;
	cursor:pointer;
	z-index:1;
	text-align:center;
}
.radio-slider-slide {
	width:80px;
	height:20px;
	position:absolute;
	top:3px;
	-webkit-transition:all .4s ease;
	-moz-transition:all .4s ease;
	-o-transition:all .4s ease;
	-ms-transition:all .4s ease;
	transition:all .4s ease;
}

.text-center {
	text-align: center;
}

.panelNotification {
  margin-top: -24px;
	width: 20%;
	text-align: center;
	padding: 10px;
	background-color: rgba(0,0,0,0.6);
	font-family: 'Roboto', sans-serif;
	color: #fff;
	position: fixed;
	left: calc(50% - 10%);
	z-index: 99;
  margin-left: auto;
	margin-right: auto;
  overflow: hidden;
  border: 1px solid #68DCF3;
}

.slider.slider-horizontal .slider-tick.triangle, .slider.slider-horizontal .slider-handle.triangle {
  border-bottom-color: #68DCF3;
}

.slider-handle {
  background-color: #68DCF3;
  background-image: none;
}

#config-style {
  margin: 4px;
}

hr {
  margin-top: 2em;
  margin-bottom: 2em;
}