html, 
body, #root {
  width:100%;
  background-color:black;
  display:flex;
  justify-content:center;
}

.rackcabinet {
  width: 85%;
  background-color: #854500;
  background-image: url(e3577ddd019c610cedbeb38ebff4e2ef.png);
  margin-top:8px;
  padding:0 2px 0 2px;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  border-radius:10px;
}

.rack {
  display:flex;
  justify-content:center;
  width:92%;
  flex-wrap:wrap;
  background-color:black;
}

.drumrack {
  width: 100%;
  margin-right:6px;
  margin-left:6px;
  padding:4px 2px 4px 2px;
  border-radius: 9px;
  display: flex;
  position:relative;
  justify-content: center;
  flex-direction:row;
  flex-wrap:wrap;
  background-color: #404143;
}

.screwplate {
  width:99%;
  display:flex;
  position:relative;
  justify-content:space-between;
 }

.screw {
  height:20px;
  width:20px;
   background-image: -webkit-radial-gradient(  50%   0%,  8% 50%, hsla(0,0%,100%,.9) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient(  50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient(   0%  50%, 50%  7%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-radial-gradient( 100%  50%, 50%  5%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),
    -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   3%, hsla(0,0%,  0%,.1) 3.5%),
    -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%,.1) 7.5%),
    -webkit-repeating-radial-gradient( 50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),
    -webkit-radial-gradient( 50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
  border-radius:50%;
  position:relative;
  box-shadow:0 0 10px 0 #222;
}

.sequencerrow {
  width:90%;
  display:flex;
  flex-direction: row;
  justify-content:center;
}

.stepbutton {
  cursor: pointer;
  width: 5vw;
  height: 55px;
  background-color: grey;
  margin: 5px;
  border-radius: 5px;
  overflow: hidden;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  position: relative;
  box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.9), inset 0 20px 0 rgba(255, 255, 255, 0.2), inset 0 24px 0 rgba(255, 255, 255, 0.3);
}

.lightoff {
  display: block;
  position: absolute;
  background: #4a2b2b;
  top:10%;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  border: 2px rgba(0, 0, 0, 0.15) solid;
}

.lighton {
  display: block;
  position: absolute;
  background: hsla(0, 87%, 47%, 0.94);
  border-radius: 50%;
  width: 10px;
  height: 10px;
  top: 10%;
  border: 2px rgba(0, 0, 0, 0.15) solid;
}

.stepbutton:nth-of-type(n):nth-of-type(-n+4) {
  background-color: #DD1D00;
}

.stepbutton:nth-of-type(n+5):nth-of-type(-n+8) {
  background-color: #F27900;
}

.stepbutton:nth-of-type(n+9):nth-of-type(-n+12) {
  background-color: #DDDA00;
}

.stepbutton:nth-of-type(n+13):nth-of-type(-n+16) {
  background-color: #E6E8BF;
}

.progressbar {
  width:90%;
  display:flex;
  flex-direction:row;
  justify-content:center;
}

.progresslight {
  width: 5vw;
  height: 10px;
  position:relative;
  margin:5px;
  border-radius: 2px;
  background-color: #1c3030;
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.9), inset 0 28px 0 rgba(255, 255, 255, 0.2), inset 0 28px 0 rgba(255, 255, 255, 0.3);
}

.progresslighton {
  width: 5vw;
  height: 10px;
  margin:5px;
  position:relative;
  border-radius: 2px;
  background-color: red;
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.9), inset 0 28px 0 rgba(221, 29, 0, 0.2), inset 0 28px 0 rgba(255, 255, 255, 0.3);
}

.drumrackbar {
  width:90%;
  margin-top:15px;
  display:flex;
  justify-content: flex-start;
}

.drumracklabel {
  height: 55px;
  font-family: 'Monoton', cursive;
  bottom:4px;
  font-size: 48px;
  color: black;
  position:relative;
}

.slash {
  font-size:34px;
  padding-left:10px;
  padding-right:10px;
  margin-top: 6px;
}

.playstopbutton {
  width: 9em;
  padding-left:4px;
  padding-right:4px;
  cursor: pointer;
  align-self: flex-end;
  font-family: 'Orbitron';
  height: 55px;
  margin-top:1px;
  position:relative;
  border-radius: 5px;
  background-color:silver;
  display:flex;
  justify-content:center;
  align-items:center;
  box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.9), inset 0 180px 0 rgba(255, 255, 255, 0.2), inset 0 190px 0 rgba(255, 255, 255, 0.3);
}

.bpmplaybar{
  display:flex;
  flex-direction:row;
  justify-content:center;
}

.tempolabel {
  font-family: 'Orbitron', sans-serif;
  height: 55px;
  font-size: 32px;
  background-color:black;
  padding-right:10px;
  border-radius: 5px;
  color: #DD1D00;
  margin-right: 7px;
  width: 3em;
  text-align:right;
  border: none;
  display:flex;
  justify-content:center;
  align-items:center;
  border-color: transparent;
}

.togglebox {
  margin:0 20px 0 20px ;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  height:55px;
  position:relative;
  width:100px;
}

.lettera, .letterb {
  margin-top:19px;
  color:black;
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  font-size: 24px;
  font-weight: 300;
  cursor: pointer;
}

.toggle-slider {
  width: 42px;
  height: 20px;
  border-radius: 12px;
  background: silver;
  box-shadow: 1px 1px 6px #aaa;
  transition: all 100ms ease-in-out;
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.toggle-slider-button {
  position: absolute;
  left: 1px;
  top: 0px;
  width: 18px;
  height: 18px;
  background: black;
  border: 1px solid #404143;
  border-radius: 50%;
  box-shadow: 1px 1px 6px #aaa;
  z-index: 1;
  transition: all 100ms ease-in-out;
}

.toggled .toggle-slider {
  background: #388E3C;
}

.toggled .toggle-slider-button {
  left: calc(100% - 19px);
}

.abswitch{
  height:50px;
  width:100px;
  background-color:blue;
  border:1px solid green;
}

textarea:focus, input:focus{
  outline: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  display: none; /**<- Crashes Chrome on hover **/
  -webkit-appearance: none;
  margin: 0; /**<-- Apparently some margin are still there even though it's hidden **/
}

@media only screen and (min-width: 1550px) {
  .drumrackbar{
    margin-left:19em;
    margin-right:19em;
  }
}

@media only screen and (min-width: 1314px) {
  .drumrackbar{
    justify-content:space-around;
    margin-left:7em;
    margin-right:7em;
  }
}

@media only screen and (min-width: 1280px) {

}

@media only screen and (max-width: 1024px) {
  .drumrackbar{
    flex-wrap:wrap;
  }
  .drumracklabel {
    font-size:40px;
  }
}

@media only screen and (max-width: 960px) {
  .drumracklabel{
    font-size:30px;
  }
  .lighton {
    width:5px;
    height:5px;
  }
  .lightoff {
    width:5px;
    height:5px;
  }
}

@media only screen and (max-width: 700px) {
  .sequencerrow {
    width:100%;
  }
  .progressbar {
    width:100%;
  }
  .rackcabinet {
    width:98%;
  }
}