:root {
  --header-bg-color: #243640;
  --header-bg-start-color: #2a404d;
  --header-bg-end-color: #1c2b33;
  --bpm-bg-color: #222222;
  --side-bg-color: #393939;
  --bottom-bg-color: #393939;
  --side-highlight-bg-color: #2484c0;
  --note-overlay-bg-color: #bdebdd;

  --highlight-color: #2484c0;
  --highlight-color-on-white: #2484c0;
}

/* this is for debugging layout issues - puts a read border around everything */
/* body * { border: 1px solid red; }		 */
body {
}
.warnings {
  font-family: monospace;
  display: none;
}

.Printable {
  display: block;
}
.nonPrintable {
  display: block;
}

/* there is another .svgTarget definitiion in groove_writer.css */
.svgTarget {
  width: 100%;
}
.svgTarget svg {
  width: 100%;
  height: calc(
    100%
  ); /* hack, should really be auto, but that causes old webkit to go nuts */
}
.playerControl {
  display: inline-block;
  background-color: #222222;
  width: 100%; /* expand to the surounding element */
  font-family: "Lato", sans-serif;
  white-space: nowrap;
}
.playerControl.large {
  display: block;
  width: calc(50% - 83px);
  min-width: 500px;
  border: 1px solid #009;
  padding-left: 0px;
  margin: 0px 0px 0px 0px;
}
.playerControl.small {
  width: 90px;
  border: 1px solid #009;
  padding-left: 0px;
}
.playerControlsRow {
  /display: flex;
  /display: -webkit-flex;
  padding-left: 6px;
  height: 48px;
  flex-flow: flex-start;
  flex-wrap: nowrap;
  -webkit-flex-flow: flex-start;
  -webkit-flex-wrap: nowrap;
}
.playerControlsRow.large,
.playerControlsRow.small {
  padding-left: 0px;
}
.midiPlayImage,
.midiRepeatImage,
.midiExpandImage {
  display: inline-block;
  width: 40px;
  height: 40px;
  cursor: pointer;
  margin: 4px 0px 4px 0px;
  border: 0px solid #000;
  color: #cccccc;
  font-size: 20px;
  font-family: FontAwesome;
  text-align: center;
  line-height: 40px;
  vertical-align: top;
  border-radius: 50%;
  -webkit-flex: none;
  flex: none;
}
.midiPlayImage,
.midiRepeatImage {
  background: #666666;
  margin: 4px 4px 4px 4px;
}
.midiPlayImage:hover,
.midiRepeatImage:hover {
  color: #ffffff;
  background: #777777;
}
.midiExpandImage {
  font-size: 26px;
  transition: all 0.6s ease-in-out;
}
.midiExpandImage.small:hover {
  color: #68c2ff;
  transform: scale(1.4);
}
.midiExpandImage.large:hover {
  color: #68c2ff;
  transform: scale(0.8);
}
.midiPlayImage:before {
  color: #dd4444;
  content: "\f05e";
}
.midiPlayImage.Stopped:before,
.midiPlayImage.Paused:before {
  color: #fff;
  letter-spacing: -3px;
  content: "\f04b";
}
.midiPlayImage.Playing:before {
  color: #fff;
  content: "\f04c";
}
.midiExpandImage.small:before {
  letter-spacing: -3px;
  content: "\f065";
}
.midiExpandImage.large:before {
  letter-spacing: -3px;
  content: "\f066";
}
.tempoAndProgress {
  display: inline-block;
  width: 60%;
  width: calc(100% - 190px);
  height: 46px;
  vertical-align: top;
  flex: 1;
  -webkit-flex: 1;
}
.tempoAndProgress.small {
  display: none;
}
.tempoRow,
.swingRow {
  /border: 1px solid red;
  display: flex;
  display: -webkit-flex;
  height: 24px;
  vertical-align: top;
  flex-flow: flex-start;
  flex-wrap: nowrap;
}
.tempoInput,
.swingInput {
  background-color: 3f91e5;
  vertical-align: top;
  padding: 0px;
  margin: 8px 10px 0px 0px;
  color: #66c0fe;
  height: 8px;
  width: 100%;
  flex: 1;
  -webkit-flex: 1;
}
.tempoSettings {
  color: #fff;
}
.tempoLabel,
.swingLabel {
  text-align: right;
  padding-top: 0px;
  vertical-align: top;
  font-size: 16px;
  width: 60px;
  color: #999999;
  -webkit-flex: none;
  flex: none;
}
.tempoTextField {
  margin: 1px 6px 0 6px;
  color: #999999;
  background-color: #222;
  border: none;
  width: 30px;
  text-align: center;
  font-size: 16px;
  padding: 0;
  height: 18px;
}
.swingOutput {
  display: inline-block;
  vertical-align: top;
  text-align: left;
  padding-top: 0;
  font-size: 16px;
  color: #999999;
  padding-left: 8px;
  width: 34px;
  -webkit-flex: none;
  flex: none;
}
.swingSettings {
  color: #fff;
}
.MIDIProgressRow {
  display: none;
}
.MIDIProgressRow.large {
  display: block;
  margin-left: 60px;
  display: flex;
  display: -webkit-flex;
  flex-flow: flex-start;
  flex-wrap: nowrap;
  white-space: nowrap;
  height: 20px;
}
.MIDIProgressRow.small {
  display: block;
  margin-left: 8px;
  padding: 0px;
}
.MIDIPlayTime {
  display: inline-block;
  width: 130px;
  color: #999999;
  font-size: 30px;
  margin-left: 6px;
  padding-top: 4px;
  text-align: left;
  line-height: 40px;
  vertical-align: top;
  flex: none;
}
.MIDIPlayTime.small {
  display: none;
}
.MIDIProgress {
  width: 85%;
  height: 8px;
  font-size: 0px;
}
.MIDIProgress.small {
  width: 80px;
}
.MIDIProgress.large {
  margin-top: 3px;
}

#ABCSource {
  font-family: monospace;
  font-size: 14px;
}

button {
  cursor: pointer;
}

.abcr {
  /* rectangles enclosing notes in ABC SVG */
  fill: transparent;
  fill-opactity: 0.25;
}
.abcr.highlighted {
  fill: var(--highlight-color) !important;
  fill-opacity: 0.2;
}
#GrooveDB_MetaData,
#debugDisplayArea {
  background-color: #ddd;
}

input[type="range"] {
  -webkit-appearance: none;
  background: #888888;
  border-radius: 8px;
}

/* MSIE hacks for range sliders */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  input[type="range"] {
    margin-top: 0px;
    background: #222222;
    height: 24px;
  }
}
@supports (-ms-accelerator: true) {
  input[type="range"] {
    margin-top: 0px;
    background: #222222;
    height: 24px;
  }
}

input[type="range"]:before {
  /* set this color for the runnable-track left of the thumb color */
  color: #888888;
}
input[type="range"]:after {
  /* set this color for the runnable-track right of the thumb color */
  color: #444444;
}
input[type="range"]:focus {
  outline: none;
}
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  cursor: pointer;
  background: #444444;
  border-radius: 6px;
  border: 0px solid #010101;
}
input[type="range"]::-webkit-slider-thumb {
  border: 1px solid #444444;
  height: 18px;
  width: 18px;
  border-radius: 20px;
  background: #888888;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5px;
}

input[type="range"].touch::-webkit-slider-thumb {
  height: 24px;
  width: 24px;
  margin-top: -8px;
}

input[type="range"]:focus::-webkit-slider-runnable-track {
  background: #666666;
}
input[type="range"]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: #444444;
  border-radius: 6px;
  border: 0px solid #010101;
}
input[type="range"]::-moz-range-thumb {
  border: 1px solid #444444;
  height: 18px;
  width: 18px;
  border-radius: 20px;
  background: #888888;
  cursor: pointer;
}
input[type="range"]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type="range"]::-ms-fill-lower {
  background: #888888;
  border: 0px solid #010101;
  border-radius: 2.6px;
}
input[type="range"]::-ms-fill-upper {
  background: #444444;
  border: 0px solid #010101;
  border-radius: 6px;
}
input[type="range"]::-ms-thumb {
  border: 1px solid #444444;
  height: 16px;
  width: 16px;
  border-radius: 18px;
  background: #888888;
  cursor: pointer;
  margin-top: 0px;
}
input[type="range"]:active::-moz-range-thumb {
  background: #fff;
}
input[type="range"]:active::-webkit-slider-thumb {
  background: #fff;
}
@media print {
  /* keep at bottom so it overrides the styles above */
  body {
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
  }
  div.newpage {
    page-break-before: always;
  }
  div.nobrk {
    page-break-inside: avoid;
  }

  .nonPrintable {
    display: none !important;
  }
}

/* Mobile control surface */
:root {
  --header-bg-color: #101426;
  --header-bg-start-color: #11182d;
  --header-bg-end-color: #0b0d19;
  --bpm-bg-color: #0b0e1b;
  --side-bg-color: #070914;
  --bottom-bg-color: #111426;
  --side-highlight-bg-color: #18c7d7;
  --note-overlay-bg-color: rgba(55, 245, 255, 0.18);
  --highlight-color: #37f5ff;
  --highlight-color-on-white: #0d8fa3;
}

#midiPlayer {
  order: 3;
  padding: 10px;
  background: linear-gradient(
    180deg,
    rgba(29, 31, 55, 0.98),
    rgba(18, 20, 38, 0.98)
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow:
    inset 0 0 36px rgba(55, 245, 255, 0.06),
    0 14px 34px rgba(0, 0, 0, 0.25);
}

.playerControl {
  display: block;
  width: 100%;
  background: transparent;
  color: #eef4ff;
  font-family: "Lato", sans-serif;
  white-space: normal;
}

.playerControl.large,
.playerControl.small {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.playerControlsRow {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 96px 1fr;
  grid-template-areas:
    "tempo tempo tempo"
    "time play repeat"
    "progress progress expand";
  gap: 10px;
  align-items: center;
  min-height: 176px;
  height: auto;
  padding: 0;
}

.playerControlsRow.large,
.playerControlsRow.small {
  padding-left: 0;
}

.midiPlayImage,
.midiRepeatImage,
.midiExpandImage {
  width: 42px;
  height: 42px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  background: rgba(8, 10, 22, 0.86);
  color: #dfe7f8;
  font-size: 18px;
  line-height: 40px;
  box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.04);
}

.midiPlayImage {
  grid-area: play;
  justify-self: center;
  width: 94px;
  height: 94px;
  border: 4px solid rgba(55, 245, 255, 0.16);
  background: radial-gradient(
    circle at 50% 50%,
    #171a2b 0%,
    #0d101e 56%,
    #242843 100%
  );
  font-size: 30px;
  line-height: 86px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 34px rgba(55, 245, 255, 0.2),
    inset 0 0 20px rgba(0, 0, 0, 0.8);
}

.midiRepeatImage {
  grid-area: repeat;
  justify-self: start;
}

.midiExpandImage {
  grid-area: expand;
  justify-self: end;
  font-size: 22px;
  transition: all 0.18s ease-in-out;
}

.midiPlayImage:hover,
.midiRepeatImage:hover,
.midiExpandImage.small:hover,
.midiExpandImage.large:hover {
  color: #37f5ff;
  background: rgba(19, 32, 48, 0.96);
  border-color: rgba(55, 245, 255, 0.45);
  transform: none;
}

.midiPlayImage:before {
  color: #ff2f74;
  content: "\f05e";
}

.midiPlayImage.Stopped:before,
.midiPlayImage.Paused:before {
  color: #ffffff;
  letter-spacing: -3px;
  content: "\f04b";
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.42);
}

.midiPlayImage.Playing:before {
  color: #37f5ff;
  content: "\f04c";
  text-shadow: 0 0 18px rgba(55, 245, 255, 0.72);
}

.tempoAndProgress,
.tempoAndProgress.small {
  grid-area: tempo;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
  height: auto;
  padding: 0;
}

.tempoAndProgress.large {
  display: grid;
  width: 100%;
}

.tempoRow,
.swingRow {
  display: grid;
  grid-template-columns: 62px 52px 1fr;
  align-items: center;
  gap: 8px;
  height: auto;
  padding: 10px;
  background: rgba(8, 10, 22, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
}

.tempoLabel,
.swingLabel {
  width: auto;
  padding-top: 0;
  text-align: left;
  color: #37f5ff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(55, 245, 255, 0.36);
}

.tempoTextField {
  width: 46px;
  height: 34px;
  margin: 0;
  padding: 0 4px;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 27px;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.32);
}

.tempoInput,
.swingInput {
  width: 100%;
  height: 8px;
  margin: 0;
  padding: 0;
  background: transparent;
  accent-color: #37f5ff;
}

.tempoSettings,
.swingSettings {
  color: #fff;
}

.swingOutput {
  width: auto;
  padding: 0;
  color: #dfe7f8;
  font-size: 14px;
}

.MIDIPlayTime {
  grid-area: time;
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0;
  color: #748196;
  font-size: 14px;
  line-height: 1.2;
  text-align: left;
}

.MIDIPlayTime.small {
  display: inline-block;
}

.MIDIProgressRow,
.MIDIProgressRow.large,
.MIDIProgressRow.small {
  grid-area: progress;
  display: flex;
  align-items: center;
  gap: 8px;
  height: auto;
  margin: 0;
  padding: 0;
}

.MIDIProgress,
.MIDIProgress.large,
.MIDIProgress.small {
  width: 100%;
  height: 8px;
  margin-top: 0;
  border-radius: 999px;
}

input[type="range"] {
  background: transparent;
  border-radius: 999px;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  background: linear-gradient(
    90deg,
    rgba(55, 245, 255, 0.38),
    rgba(255, 47, 116, 0.28)
  );
  border-radius: 999px;
}

input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -6px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  background: #37f5ff;
  box-shadow: 0 0 14px rgba(55, 245, 255, 0.72);
}

input[type="range"]::-moz-range-track {
  height: 8px;
  background: linear-gradient(
    90deg,
    rgba(55, 245, 255, 0.38),
    rgba(255, 47, 116, 0.28)
  );
  border-radius: 999px;
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  background: #37f5ff;
  box-shadow: 0 0 14px rgba(55, 245, 255, 0.72);
}

.abcr.highlighted {
  fill: var(--highlight-color) !important;
  fill-opacity: 0.18;
}

@media (max-width: 390px) {
  .playerControlsRow {
    grid-template-columns: 1fr 88px 1fr;
    min-height: 168px;
  }

  .midiPlayImage {
    width: 86px;
    height: 86px;
    line-height: 78px;
  }

  .tempoRow,
  .swingRow {
    grid-template-columns: 58px 48px 1fr;
    gap: 6px;
    padding: 8px;
  }

  .tempoTextField {
    width: 42px;
    font-size: 24px;
  }
}

@media (max-width: 375px) {
  #midiPlayer {
    padding: 8px;
  }

  .playerControlsRow {
    grid-template-columns: 1fr 82px 1fr;
    gap: 8px;
    min-height: 160px;
  }

  .midiPlayImage {
    width: 80px;
    height: 80px;
    line-height: 72px;
    font-size: 26px;
  }

  .tempoRow,
  .swingRow {
    grid-template-columns: 54px 42px 1fr;
    gap: 6px;
    padding: 8px;
  }

  .tempoLabel,
  .swingLabel {
    font-size: 10px;
  }

  .tempoTextField {
    width: 40px;
    font-size: 18px;
  }

  .MIDIPlayTime {
    font-size: 12px;
  }
}

@media print {
  #midiPlayer {
    display: none !important;
  }
}