:root {  
  /*========== Colors ==========*/
  --bgr-color: #1D2327;
  --panel-bgr-color: #2c3338;
  --menu-bgr-color: #3c434a;
  --accent-color: ~actclr~;
  --neutral-grey: #606060;
  --text-color:#F0F0F1;
  --border-color: #ffffff66;
  
  /*========== Font and typography ==========*/
  --body-font: 'Consolas','Roboto', monospace;
  --large-font-size: 1.2rem;
  --normal-font-size: 0.9rem;
  --small-font-size: .9rem;
  --smaller-font-size: .8rem;
  
    /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semi-bold: 600;
}
.rl{text-align:right;}

input, select, .btn, .lab, textarea {
	font:.85rem consolas,monospace;
	padding: 5px;
	background-color:var(--panel-bgr-color);
	color:var(--text-color);
	border:1px solid var(--border-color);
	border-radius: 5px;
	height:2.0rem;
	margin: 15px 3px;
	vertical-align: middle;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
	background-color: var(--panel-bgr-color);
	min-width: 100px;
}

.btn{min-width:100px; color:var(--text-color);}
.btn:active{background-color:  var(--accent-color); border:none;}
.btn:hover {border:1px solid var(--border-color);}

.lab {border: none;}

textarea {
	height: 4.0rem;
	margin:auto;
	vertical-align: top;
	min-width: 300px; 
}

.stg td{width:auto;padding:1px;margin:0}
.stg input {height:25px}
input[type="radio"] { margin-top: -1px; vertical-align: middle;}
.stg table{margin: 5px auto}
.dot {height: 30px;
	  width: 30px;
	  background-color: #d0d0d0;
	  border-radius: 40%;
	  display: inline-block;
	  margin: 7px 20px}

.cntr {
   margin:auto;
   font: .85rem consolas, monospace;}

.pwrbox{width:80%; height:auto; padding:5px; margin:10px auto; box-sizing:border-box;}
.pwrbox td {font: .9rem consolas, monospace; width:30%; padding:0;margin:0;}

.container{
display: flex;
flex-wrap:wrap;}

div label input {margin-right: 100px;}

.cat{
  margin: 4px;
  background-color: var(--first-color);
  border-radius: 5px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  float: left;
}
.cat label {float: left; line-height: 2.6em; width: 2.6em; height: 2.6em;}
.cat label span {text-align: center; padding: 0px 0px; display: block;}
.cat label input { position: absolute; display: none;color: var(--text-color) !important;}
.cat label input + span{color: var(--text-color);}

.cat input:checked + span {
    color: var(--text-color);
    text-shadow: 0 0  6px rgba(0, 0, 0, 0.8);
}
input:checked + span{background-color: var(--accent-color);}

.channel{	width:100%;
			display: flex;
			flex-wrap:no-wrap;
			margin:10px;
}

.chnam{
    display: flex;
    align-items: center;
}

.rngval {
  -webkit-appearance: none;
  margin: auto 10px;
  width: 80%;
  height: 5px;
  border: none; 
  background: var(--accent-color);
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.rngval::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%; 
  background: var(--text-color);
  cursor: pointer;
}

.rngval::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--text-color);
  cursor: pointer;
}

.inpval{
    display: flex;
    align-items: center;
}

.switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  margin: 10px 20px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--neutral-grey);
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: var(--text-color);
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--accent-color);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--accent-color);
}

input:checked + .slider:before {
  -webkit-transform: translateX(18px);
  -ms-transform: translateX(18px);
  transform: translateX(18px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 50%;
}

/*Timer styles*/
.timer
{
width:100%;
margin: 10px 0 0 0;
padding: 10px;
border: 1px solid var(--border-color); 
border-radius: 10px;
}

.timerrec {
width:100%;
display: flex;
flex-wrap:wrap;
}

.tmbtn{
float:right;
	
}
.tmlab{
float:left;	
color: var(--accent-color); 
}

.nowrap
{
display: flex;
flex-wrap:no-wrap;
align-items: center;
width:100%;
}

.crselect
{
display: inline-block;
vertical-align: top;
overflow: hidden;
height:auto;
min-height:30px;
width:120px;
margin-top: 0; 
}
.selhed
{
	margin: 15px 5px 2px 5px;
}