* {
  box-sizing: border-box;
}

#outer.grey {
  background-color: var(--color-primary-fill);
}

#heading {
  grid-column: 1 / span 7;
}

.outer2d {
  /* making up for lack of fitView,infoView */
  width: 100%;
  display: flex;
}

.wrapper2d {
  /* making up for lack of fitView,infoView */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#messageWrapper {
  min-height: 2rem;
  padding-top: 0;
  padding-bottom: 0;
}

#message {
  font-size: 1.2rem;
}

#appW {
  width: 100%;
  padding: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
}

#appW.disabled, #headingWrapper.disabled, #footerWrapper.disabled, #messageWrapper.disabled {
  opacity: 0.1;
}

#instrumentsWW {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  z-index: 5;
}

#instrumentsW {
  margin-top: 3rem;
  width: 100%;
  padding: 0.5rem;
  max-height: calc(100% - 4rem);

  display: flex;
  flex-direction: column;
  align-items: center;
}

#instruments {
  cursor: auto;
  padding: 0.5rem;
  background-color: var(--color-primary-light);
  width: 100%;
  max-width: min(calc(100% - 2rem), 40rem);
  max-height: 100%;
  overflow-y: scroll;
  border: var(--dialog-border-width) solid var(--color-emphasis-border);

  display: flex;
  flex-direction: column;
  align-items: center;
}

#addInstrument {
  font-weight: bold;
  margin: 1rem;
  display: flex;
  align-items: center;
}

#addText {
  margin-left: auto;
  margin-right: auto;
}

#instrumentsInner {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.instrument {
  margin: 0.5rem;
  min-width: 5rem;
  width: 15%;

  display: flex;
  flex-direction: column;
  align-items: center;
}

.addInstrImg {
  pointer-events: none;
  width: 100%;
  padding: 5% 15% 5% 15%;
  margin-bottom: 0.4rem;
}

#tempoSlider {
  width: 100%;
  max-width: 40rem;
  height: 2rem;
  min-height: 2rem;
  max-height: 2rem;
  margin-bottom: 0.75rem;
  padding: 0 0.5rem 0 0.5rem;

  display: flex;
  flex-direction: row;
}

#tempoRange {
  width: 100%;
}

#controlWrapper {
  width: 100%;
  max-width: 50rem;
  padding: 0.5rem;
  padding-left: 0;
  display: grid;
  grid-template-columns: 2rem auto;
  grid-template-rows: 1fr;
}

#control {
  position: relative;
  width: 100%;
}

.track, .trackNums {
  display: flex;
}

.trackControls, .keyControls {
  height: 4rem;

  width: 100%;
  border-bottom: 0.24rem solid var(--color-primary-fill);
  margin-bottom: 0.5rem;
  display: flex;
}

.trackControls {
  border-right: 0.24rem solid var(--color-primary-fill);
}

.keyControls {
  cursor: pointer;
}

.keyControls,
.key.open {
  background-color: var(--color-primary-fill);
}

#canvas {
  width: 100%;
  height: 100%;

  position: absolute;
  top: 0;
  left: 0;

  z-index: 4;
  pointer-events: none;
}

.bar, .barNums {
  display: flex;
  width: 100%;
}

div.key > img {
  width: 75%;
  pointer-events: none;
}

div.key, .keyNums {
  display: flex;
  justify-content: center;
  align-items: center;
}

div.key {
  position: relative; /* for .keyTri */
  cursor: pointer;
  /* same as .beat */
  height: 3rem;
}

div.key::before {
  content: "\25B6";
  position: absolute;
  width: 75%;
  font-size: 0.5rem;
  top: 0.1rem;
  left: 45%;
  transform: translateX(-50%);
  display: block;
  padding-top: 100%;
}

.toggleArrow.opened,
.toggleArrow {
  opacity: 1;
}

.toggleArrow::after {
  content: "\25C0";
}

.toggleArrow.opened::after {
  content: "\25BC";
}

div.key.open::before {
  content: "\25BC";
}

.beat, .beatNums {
  width: 100%;
  background-color: var(--color-primary-fill);

  box-shadow: inset -0.44rem 0 var(--color-primary-light);

  display: flex;
  align-items: center;
}

.beat, .firstEmph, .noEmph {
  height: 3rem;
}

.switch, .switchNums {
  display: inline;
  width: 85%;
  max-width: 3rem;
}

.switchNums, .keyNums {
  text-align: center;
  margin-top: 0.3rem;
}

.firstEmph, .firstEmphNum {
  background-color: var(--color-primary-fill);
  width: 100%;

  display: flex;
  align-items: center;
}

.noEmph, .noEmphNum {
  background-color: var(--color-primary-light);
  width: 100%;

  display: flex;
  align-items: center;
}

.switch {
  cursor: pointer;
  height: 2.4rem;
  background-color: var(--color-primary-fill);
  border: 0.12rem solid var(--color-emphasis-border);
}

.switch.on {
  background-color: var(--color-emphasis-border);
}

#startWrapper {
  width: 100%;
  max-width: 50rem;

  padding: 0.5rem;
  padding-top: 0;
  padding-bottom: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#aboveStart {
  width: 100%;

  display: flex;
}

#plusButton, #fullscreenButton {
  width: 3rem;
}

#plusButton {
  font-size: 1.6rem;
}

#fullscreenButton {
  margin-left: 0.5rem;
}

#fullscreenIcon {
  pointer-events: none;
  padding: 25%;
  width: 100%;
}

#addClose {
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

#closeI {
  pointer-events: none;
  width: 90%;
  height: 90%;
}

#grooveClear, #groovesToggle {
  cursor: pointer;
  margin-left: auto;
}

#playButton {
  height: 4rem;
  width: 12rem;
  font-size: 1.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

#playButton.down {
  background-color: var(--color-emphasis-border);
}

#buttonWrapper {
  width: 100%;
  max-width: 50rem;
  padding: 0.5rem;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: start;
}

#grooves {
  width: 100%;
  margin-bottom: 0.5rem;

  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
  flex-wrap: wrap;
}

.groove {
  cursor: pointer;
  margin: 0.4rem 0.2rem 0 0.2rem;
}

.grooveHead {
  font-weight: bold;
  text-align: center;
  margin-bottom: 0;
  padding: 0.2rem;
}

.grooveSet {
  margin: 0 0.5rem 0 0.5rem;
  margin-bottom: 0.8rem;

  display: flex;
  flex-direction: column;
}

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

#setupButton {
  min-height: 4rem;
  min-width: 6rem;
  max-width: 6rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

#grooveClear {
  width: 2.2rem;
}

#grooveClear, #fullscreenIcon, #plusButton {
  display: flex;
  justify-content: center;
  align-items: center;
}

.clearImg, #clearImg {
  width: 100%;
  pointer-events: none;
}

.clearB, .minusB, .trackName, .fineB {
  height: 2rem;
  margin: 0.5rem;
  min-width: 2rem;
}

.minusB, .fineB {
  border-radius: 0;
  margin-right: 0;
}

.trackControls > .volumeSlider {
  margin: 0.5rem;
  margin-left: auto;
  max-width: 16rem;
  align-items: center;
}

.trackControls > .volumeSlider > .bpmHackW > .volumeIconWrapper {
  display: flex;
  align-items: center;
}

.trackName {
  display: flex;
  align-items: center;
}

#plusButton.retracted,
.trackNums.retracted,
.noEmph.retracted,
#addClose.retracted,
#instrumentsWW.retracted,
.trackControls.retracted,
.keyControls.retracted,
.track.retracted,
.key.retracted,
#grooves.retracted {
  display: none;
}