* {
  font-family: 'Courier New', Courier, monospace;
}
body {
  background-image: linear-gradient(to bottom, #333, #222);
  background-repeat: no-repeat;
  background-color: #222;
}
button, input[type=button]{
  outline: none;
}
#display {
  background: rgb(57, 66, 62);
}

#display.edit {
  background: rgb(25, 131, 83);
}

#wrapper {
  margin-left: auto;
  margin-right: auto;
  margin-top: 30px;
  width: 1400px;
  background: rgb(57, 66, 62);
  filter: drop-shadow(30px 40px 100px black);
  padding: 40px;
  border-radius: 10px;
}
#container {
  display: grid;
  grid-template-columns: [first] 400px [mid] 600px [last] 400px;
}

#right-ui {
  display: grid;
  grid-column: last;
  grid-template-rows: 1fr [controlButtons] 80px [bottompart] 150px;
}

#mid-ui {
  grid-column: mid;
  background: rgb(57, 66, 62);
}

#left-ui {
  display: grid;
  grid-column: first;
  grid-template-rows: 1fr 100px;
}

#leftrotaries {
  grid-column: leftrotaries;
  grid-template-rows: [rotary1] 1fr [rotary3] 1fr [rotary5] 1fr;
  grid-row: screen6;
}

#rightrotaries {
  grid-column: rightrotaries;
  grid-template-rows: [rotary2] 1fr [rotary4] 1fr [rotary6] 1fr;
  grid-row: 3;
}

#rotary1,
#rotary2,
#rotary3,
#rotary4,
#rotary5,
#rotary6 {
  background-color: rgb(30, 35, 35);
}

.rotary:hover {
  /* background-color: rgb(49, 49, 49) !important; */
  background-image: radial-gradient(circle, rgb(49, 49, 49), rgb(30, 35, 35))!important;
}

#rotary1 {
  grid-row: rotary1;
}

#rotary3 {
  grid-row: rotary3;
}

#rotary5 {
  grid-row: rotary5;
}

.rotarycol {
  display: grid;
  background-color: rgb(29, 55, 55);
}

#rotary2 {
  grid-row: rotary2;
}

#rotary4 {
  grid-row: rotary4;
}

#rotary6 {
  grid-row: rotary6;
}


#centralcontrol {
  display: grid;
  grid-template-columns: [leftrotaries] 100px [centercol] 1fr [rightrotaries] 100px;
  grid-template-rows: [topbuttons] 50px [header] 50px [screen6] 600px [button4] 50px [bottombuttons] 50px;
  background: rgb(33, 33, 33);
  border-radius: 10px;
}

#displayport {
  display: grid;
  grid-template-rows: [header] 50px [screen6] 600px [button4] 50px;
  grid-row-start: 2;
  grid-row-end: bottombuttons;
  grid-column: centercol;
}

#baseDisplayPort {
  display: grid;
  /*grid-row-start: topbuttons;
  grid-row-end: bottombuttons; */
  grid-template-rows: [header] 50px [screen6] 600px [button4] 50px;
  grid-column-start: initial;
  background: rgb(31, 170, 107);
  color: beige
}

#topbuttons {
  grid-row: initial;
  grid-column: centercol;
}
.screen6 {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  background: rgb(36, 36, 36);
  height: 100%;
}

.screen6>div {
  border: 1px solid black;
  background: rgb(31, 33, 22);
  overflow: hidden;
}
.screen6 .bottom {
  grid-row: 3;
  grid-column: 1;
  grid-column-end: 3;
}

.button4 {
  grid-row: button4;
  grid-column: initial;
  background: rgb(0, 0, 0);
}

.header {
  display: grid;
  grid-row: 1;
  grid-column: initial;
  background: rgb(71, 72, 67);
  font-size: larger;
}

.header>h2 {
  align-self: center;
  justify-self: center;
  margin: 0;
}

#buttons4screen {
  display: grid;
  grid-row: bottombuttons;
  grid-column: centercol;
  grid-template-columns: repeat(4, 25% [col-start]);
  height: 50px;
}
.mainArea {
  display: grid;
  grid-row: 2;
  grid-column: initial;
  background: rgb(57, 66, 62);
}

#buttons4screen>div {
  padding: 0.5em;
}

#buttons4screen button {
  border-radius: 1em;
  width: 100%;
  height: 100%;
  display: block;
  border: 3px solid black;
  color: rgb(57, 66, 62);
  background-color: rgb(57, 66, 62);
}

#buttons4screen button:hover {
  background-color: rgb(60, 60, 60);
}

.button4 {
  display: grid;
  grid-template-columns: repeat(4, 25% [col-start]);

}

.button4 .buttonLabel {
  display: grid;
  align-self: center;
  justify-self: center;
  width: 100%;
  height: 100%;
}
.button4 .selected {
  background-color: #ccc;
  color: black;
}
.buttonLabel div {
  align-self: center;
  justify-self: center;
}

#button8 {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(8, 1fr [col-start]);
}

#button8>button {
  display: block;
  border: 1px solid black;
  width: 100%;
  height: 30px;
  align-self: center;
  justify-self: center;
  border-radius: 0.5em;
}



.vsplitscreen {
  grid-row: screen6;
  grid-row-end: button4;
  display: grid;
  grid-template-rows: 1fr 1fr;
  height: 600px;
  width: 100%;
}

.vsplitscreen .topscreen {
  height: 300px;
}

.vsplitscreen .bottomscreen {
  height: 300px;
}

.modalList {
  display: grid;
  background-color: blueviolet;
  grid-template-columns: 50px 1fr 50px;
  grid-template-rows: 50px 1fr 50px;
  height: 100%;
}

.modalList>div {
  grid-row: 2;
  grid-column: 2;
  background-color: rgb(57, 66, 62);
}

.trackmodselectrow {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

#modeselect>div {
  display: grid;
  width: 100px;
  grid-template-columns: 1fr;
}

.patternMutes.active {
  background-color: purple;
}

.globalTrackMute.active {
  background-color: green;
}

.StepMachineSlotChooser.active {
  background-color: blue;
}

.subheader {
  font-size: 1.2em;
  padding: 0.5em 0;
  background-color: rgb(57, 66, 62);
}

#modifications {
  overflow: scroll;
  height: 500px;
}

.valueIndicator {
  display: grid;
  grid-template-rows: 2em 1fr;
}

.valueIndicator>div {
  place-self: center;
  font-size: 1.1em;
}

#toplevelbuttons {
  height: 6em;
  display: grid;
  grid-template-columns: repeat(4, 1fr [col-start]);
  grid-template-rows: 3em 3em;
}
#toplevelbuttons .active {
  background-color: rgb(25, 131, 83);
}
#toplevelbuttons>div {
  margin: 0.2em;
}
#toplevelbuttons>div>button {
  width: 100%;
  height: 100%;

}

#toplevelbuttons>div>button:hover {
  color: white;
}
#triggerbuttons {
  display: grid;
  grid-column-end: end;
  grid-column-start: first;
  margin-top: 1em;
}
#button16 {
  display: grid;
  grid-template-columns: repeat(16, 1fr [col-start]);
}
#button16 button {
  border-radius: 0.5em;
  border: 3px solid rgb(0, 0, 0);
  margin: 0.2em;
  box-sizing: border-box;
  height: 2em;
}
#button16 button:active {
  border: 5px solid rgb(0, 0, 0);
}
#triggerbuttons .active{
  text-shadow: 0 0 1em;
  font-weight: bolder;
}
#transportholder {
  display: grid;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-template-columns: 100px 1fr 100px;
}
#transportholder  button {
  width: 100px;
  height: 100%;
  justify-self: center;
}
#transportholder  button.playing {
  color: rgb(6, 184, 0);
  background-image: radial-gradient(circle,rgb(0, 68, 5) 20%, #333);
}
#transportholder  button.recording {
  color: rgb(255, 35, 57);
  background-image: radial-gradient(circle,rgb(128, 27, 37) 20%, #333);
}
#transportbuttons {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-start: 2;
  grid-column-end: 3;
  height: 3em;
}
.pbutton {
  border-radius: 0.5em;
  border: 3px solid rgb(0, 0, 0);
  margin: 0.2em;
  box-sizing: border-box;
  height: 2em;
  background-color: #333;
  color: #ccc;
}
.pbutton:active, .pbutton.active {
  border: 5px solid rgb(0, 0, 0);
  color: white;
  background-image: radial-gradient(circle,rgb(0, 68, 5) 20%, #333);
}
#bottomPart {
  display: grid;
  grid-template-columns: inherit;
  grid-column-start: 1;
  grid-column-end: 4;
}

#rightbottom, #leftbottom {
  display: grid;
  grid-row-start: 3;
}

#fillbuttonholder {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

#barIndicator {
  display: grid;
  width: 200px;
}
#barIndicatorButtonHolder {
  display: grid;
}
#barIndicatorLeds {
  display: grid;
  grid-template-columns: repeat(4, 1fr [col-start]);
}
.ledHolder {
  display: grid;
  justify-self: center;
}
.led {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  margin: 0.2em;
}
.led.available {
  background-image: radial-gradient(circle, rgb(155, 53, 53), #333 90%);
}
.led.active {
  background-image: radial-gradient(circle, red, #333 90%) !important;
}


/* control buttons (yes no and arrows */

#controlButtonHolder {
  grid-row-start: controlButtons;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#arrowButtonHolder {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
#arrowButtonleft {
  grid-column-start: 1;
  grid-row-start: 2;
}
#arrowButtonup {
  grid-column: 2;
  grid-row:1;
}
#arrowButtondown {
  grid-column: 2;
  grid-row: 2;
}
#arrowButtonright {
  grid-column: 3;
  grid-row: 2;
}
#yesnobuttonholder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}
#yesnobuttonholder, #arrowButtonHolder {
  align-items: end;
}

/* step map */
.stepMapView {
  display: grid;
  grid-template-rows: 2em 1fr;
  align-items: center;
}