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

.metronome {
   background-color: #EDE9DF;
    padding-top: 22px;
    padding-bottom: 22px;
    border-radius: 25px;
    text-align: center;
}

.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;
z}

.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:8px;
  cursor:pointer;
}

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

#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:30px;
  height:30px;
  background:#7d7d7d;
  border-radius:16px;
  margin:0px 2px;
  cursor:pointer;
  transition:.15s;
  font-size:11px;
  color:grey;
  font-weight: bold;
}

.beat:hover{
  background-color:#7877cf;
}

.on-temp{
  background:#83fef8;
  transform:scale(1.5, 1.5);
}

.off-temp{
  background:#808080;
  transform:scale(1., 1.);
}

.box{
  padding:25px;
}

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

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

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

#digitalDisplayContainer{
  display:none;
}

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



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

.metronome-btn:hover {
  background-color:#dcdcdc !important;
  border-color:rgba(255, 127, 102, 0.59) !important;
  color: #fff;  
  border: 0px solid transparent;
}

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

.tap-btn:hover {
  background-color:rgba(255, 127, 102, 0.59) !important;
  border-color:rgba(255, 127, 102, 0.59) !important;
  color: #fff;  
  border: 0px solid transparent;
}

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


input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 40%;
  border-radius: 20px;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 20%;
  height: 10px;
  cursor: pointer;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #fff;
  border-radius: 15px;
  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: 15px;
  width: 20px;
  border-radius: 7px;
  background: #7d7d7d;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -2.3px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #fff;
}
input[type=range]::-moz-range-track {
  width: 30%;
  height: 10px;
  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: #7d7d7d;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 30%;
  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: #fa9579;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #fff;
}
input[type=range]:focus::-ms-fill-upper {
  background: #fff;
}