input, ul, li, p, h1, h2, h3, h4, h5{
  margin:0;
  padding:0;
  list-style:none;
}

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

.light{
  font-weight:lighter;  
}

.bold{
  font-weight:bolder;
}

input[type='number'] {
    -moz-appearance:textfield;
}

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

.column{
  flex-direction:column;
}

.flexbox{
  display:flex;
}

.flex-centered{
  margin:auto;
}

.main-content{
  display:flex;
  margin:auto;
  background:#2d303b;
}

.green{
  background-color:#57cc65;  
  transition:.3s;
}

.green:hover{
  background:#6fcc7a;
}

.red{
  background-color:#ca3f3f;
  transition:.3s;
}

.red:hover{
  background-color:#dc5d5d;
}

.blue{
  background-color:#4f97d6;
  transition:.3s;
}

.blue:hover{
  background-color:#73a7d4;
}

.main-btn{
  border:none;
  padding:10px;
  cursor:pointer;
}

.min-btn{
  background:transparent;
  border:none;
  cursor:pointer;
  font-size:24px;
}

#checkBox{
  margin-right:5px;
  cursor:pointer;
}

.mb-container{
  margin-bottom:5px;
}

.mr-container{
  margin-right:30px;  
}

.mt-container{
  margin-top:10px;
}

#tempo-disp{
  margin-right:5px;
}

#stop{
  display:none;
}



.beat{
  width:20px;
  height:20px;
  background:#7d7d7d;
  border-radius:2px;
  margin:0px 5px;
  cursor:pointer;
  transition:.15s;
}

.beat:hover{
  background-color:#57cc65;
}

.on-temp{
  background:#8ea5ff;
  transform:scale(1.2, 1.2);
}

.box{
  padding:15px;
}

.beat-count{
  text-align:center;
  width:25px;
  border:none;
  background:none;
  font-size:24px;
}

.header-btn{
  font-size:24px;
  border:none;
  padding:5px 10px;
  margin:10px 10px 30px 10px;
  background:#ffffff29;
  cursor:pointer;
  transition:.3s;
}

.button-active{
  background:#83fda842;
}

#digitalDisplayContainer{
  display:none;
}

.sign-svg{
  fill:#000000; 
  transform:translate(-480.000000px, -192.000000px);
}



.metronome-btn {
  background-color:#8ea5ff !important;
  border-color:#8ea5ff!important;
  color: #fff;  
  border: 0px solid transparent;
}

.metronome-btn:hover {
  background-color:#597bff!important;
  border-color:#597bff!important;
  color: #fff;  
  border: 0px solid transparent;
}

.tap-btn {
  background-color:#8ea5ff !important;
  border-color:#8ea5ff !important;
  color: #fff;  
  border: 0px solid transparent;
}

.tap-btn:hover {
  background-color:#597bff!important;
  border-color:#597bff!important;
  color: #fff;  
  border: 0px solid transparent;
}

.tap-btn:active {
  background-color:#597bff!important;
  border-color:#597bff!important; 
  color: #fff;  
  border: 0px solid transparent;
}
input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 60%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 60%;
  height: 12.8px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #fff;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 30px;
  border-radius: 7px;
  background: #8ea5ff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3.6px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #fff;
}
input[type=range]::-moz-range-track {
  width: 60%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #fff;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 30px;
  border-radius: 7px;
  background: #8ea5ff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 60%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #fff;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #fff;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 30px;
  border-radius: 7px;
  background: #8ea5ff;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #fff;
}
input[type=range]:focus::-ms-fill-upper {
  background: #fff;
}