body {
  margin: 0;
  padding: 0 10px;
  font-size: 16px;
  text-align: center;
  font-family: "Arial", sans-serif;
  
}

h1 {
  color: #137600;
  font-size: 18px;
  line-height: 5px;
  padding: 0px 0;
  
}

h1 .LogisticAlgo {
    width:23px;
    Margin-left: 5px;  
    Vertical-align:middle;
}

.span, .text {
    Vertical-align:middle;  
   }

h1 {
    display:table;
    width:100%;
}

.menu {
  margin-bottom: 0px;
  display: flex;
}

.menu span {
   
  padding: 3px 0;
  flex-basis: auto;
  flex-grow:1;
  text-align: center;
  font-size: 12px;
  border-radius: 5px;
  color: #031400;
  background-color: #39ff14;
}
.menu span:hover {
  background: #137600
}

span.menu-active {
  background: #137600;
  color: #efffec;
}
.digits {
  margin-top: 5px;
  margin-bottom: 5px;
  display: flex;
}
.digits span {
  padding: 3px 0;
  flex-basis: auto;
  flex-grow: 10;
  text-align: center;
  font-size: 16px;
  border-radius: 5px;
  color: #fff;
}

.digits_moved_down {
  background-color: #ff1439;
}
.digits_moved_up {
  background-color: #1439ff;
}
.headcol {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 5px;
  display: flex;
}

.headcol span {
  padding: 2px 0;
  flex-basis: auto;
  flex-grow: 1;
  text-align: center;
  font-size: 0px;
  border-radius: 5px;
  color: #fff;
  margin-bottom: 10px;
}

.Head_moved_down {
  background-color: #ff1439;
}
.Head_moved_up {
  background-color: #1439ff;
}
.Head_moved_mid {
  background-color: #39ff14;
}

.digit_red {
  border-radius: 50% ;
  background: red;
  
}

.digit_blue {
  border-radius: 50% ;
  background: blue;
  
}

.chartContainer {
 margin-bottom: 2px;
  min-height: 120px;
  min-width: 125px;

}

.switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 15px;
}

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

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #4379FF;
  -webkit-transition: .4s;
  transition: .4s;
  
}

.slider:before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  left: 9%;
  bottom: 0px;
  border-color: black;
  background-image: repeating-linear-gradient(90deg,darkgrey, white 20%, green 20%);
  -webkit-transition: .4s;
  transition: .4s;
  
}

input:checked + .slider {
  background-color: green;
}

input:focus + .slider {
  box-shadow: 0 0 1px #91D3D9;
}


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

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

.slider.round:before {
  border-radius: 50%;
 
}
/* xz zz Text */
.slider:after
{
 content:'xZ';
 color: white;
 display: block;
 position: absolute;
 transform: translate(-50%,-50%);
 top: 50%;
 left: 70%;
 font-size: 10px;
 font-family: Verdana, sans-serif;
}

input:checked + .slider:after
{  
  content:'ZZ';
  color: white;
 display: block;
 position: absolute;
 transform: translate(-50%,-50%);
 top: 50%;
 left: 30%;
 font-size: 10px;
 font-family: Verdana, sans-serif;
}