.metronome {
  text-align: center;
  background: #095360;
  color: white;
  display:block;
  font-family: 'Muli', 'Helvetica', 'Arial', 'sans-serif';
}

.metronome .btn-outline:hover,
.metronome .btn-outline:focus,
.metronome .btn-outline:active,
.metronome .btn-outline.active {
  color: white;
  background-color: #1B9FB8;
  border-color: #1B9FB8;
}
.metronome .btn {
  font-family: 'Lato', 'Helvetica', 'Arial', 'sans-serif';
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 300px;
}

.metronome #lights1 {
	  margin-bottom:30px;
    }
.metronome #lights2 {
	  margin-bottom:30px;
	  display:none;
    }

.metronome .circle {
      width: 20px;
      height: 20px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      background: transparent;
	  margin-left:5px;
	  margin-right:5px;
    }

@media (min-width: 320px) {
.metronome .circle {
      width: 30px;
      height: 30px;
      -webkit-border-radius: 15px;
      -moz-border-radius: 15px;
      border-radius: 15px;
    }
  }

@media (min-width: 500px) {
.metronome .circle {
      width: 30px;
      height: 30px;
      -webkit-border-radius: 15px;
      -moz-border-radius: 15px;
	  border-radius: 15px;
	  margin-left:15px;
	  margin-right:15px;
    }
  }

.metronome .red-filled:hover {
    background-color: rgba(256, 0, 0,.8);
}

.metronome .yellow-filled:hover {
    background-color: rgba(256,256,0,.8);
}

.metronome .grey-filled:hover {
    background-color: rgba(158,158,158,.8);
}

.metronome .red:hover {
    background-color: rgba(158,158,158,.2);
}

.metronome .yellow:hover {
    background-color: rgba(158,158,158,.2);
}

.metronome .grey:hover {
    background-color: rgba(158,158,158,.2);
}


.metronome .circle:focus {
    box-shadow: 0 0 0 0.2rem rgba(248,249,250,.5);
    outline: 0;
}

.metronome .yellow {
	  border:2px solid yellow;
}

.metronome .yellow-filled {
	  border:2px solid yellow;
      background: yellow;
}

.metronome .red {
	  border:2px solid red;
}

.metronome .red-filled {
	  border:2px solid red;
      background: red;
}

.metronome .grey {
	  border:2px solid grey;
}

.metronome .grey-filled {
	  border:2px solid grey;
}

.metronome #beatmarker {
	font-size: 20px;
	margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.metronome #clickmarker {
	font-size: 20px;
	margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.metronome .veryLarge {
	font-size: 3em;
}
.metronome #play {
	color:#ffffff
}
.metronome #plusminus {
margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.metronome #beattitle {
margin-bottom: 16px;
}

.scroll-wheel {
    overflow-y: hidden;
    padding: 0;
    pointer: cursor;
    height: 3em;
}

.scroll-wheel-list {
    list-style: none;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    padding: 0;
    cursor: pointer;
}

.scroll-wheel-top-mask {
    z-index:10;
    position: absolute;
    top:0;
    height: 40px;
    width:100%;
    background: linear-gradient(0deg,#09536000,#095360);
    pointer-events: none;
}

.scroll-wheel-bottom-mask {
    z-index:10;
    position: absolute;
    bottom:0;
    height: 40px;
    width:100%;
    background: linear-gradient(0deg,#095360,#09536000);
    pointer-events: none;
}