html {
  overflow: hidden;
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  overflow: auto;
}

.stop-container {
  position: relative;
  display: inline-block;
}

.stop-button {
  position: absolute;
  top: 100%;
  width: 100%;
  transform: translate(0, 3px);
  left: 0;
}

.alphaTabSurface > svg:first-child, /* Top matter */
/* .alphaTabSurface > svg:last-child, /* Attribution footer */ 
.alphaTabSurface > svg:nth-child(2) > *:nth-child(1), /* beat note */
/* .alphaTabSurface > svg:nth-child(2) > *:nth-child(2), /* bpm */ */
.alphaTabSurface > svg:nth-child(2) > *:nth-last-child(5), /* dynamics */
.alphaTabSurface > svg:not(:first-child):not(:last-child) > *:nth-last-child(-n + 3) /* left brackets */
{
  visibility: hidden;
}

.beatCursor {
  background: rgba(64, 64, 255, 0.75)
}

.atHighlight * {
  fill: #0078ff;
  stroke: #0078ff;
}

#hud-top {
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 5;
}

#hud-bottom {
  position: absolute;
  padding: 10px;
  left: 5px;
  bottom: 5px;
  right: 5px;
  border-radius: 5px;
  border: 1px solid rgb(190, 190, 190);
  z-index: 1;
  background-color: #ceeaff;
  display: none;
}

p {
  margin-top: 0;
}

#hud-bottom p:last-of-type {
  margin-bottom: 0;
}

#blocklyEditor {
  width: 100%;
  height: 100%;
}

#toolbox {
  display: none;
}

#right {
  position: relative;
  flex: 1;
}

#scoreRoot {
  overflow: auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#attribution {
  position: absolute;
  top: 5px;
  right: 5px;
  font-family: sans-serif;
  font-size: 10pt;
}

#scratch {
  display: none;
}

#foo {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
}

.blocklyText, .blocklyHtmlInput, .blocklyTreeLabel, p, div {
  font-family: 'Hind', sans-serif !important;
}

.resizer {
  /* background-color: yellow; */
  position: absolute;
  z-index: 1000000000;
}

.resizer-horizontal {
  width: 20px;
  top: 0;
  bottom: 0;
  cursor: col-resize;
}

.resizer-vertical {
  height: 20px;
  left: 0;
  right: 0;
  cursor: row-resize;
}

.resizer-right {
  right: -20px;
}

.resizer-top {
  top: -10px;
}

.resizer-bottom {
  bottom: -10px;
}

#root {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: 100%;
  height: 100%;
}

#left {
  position: relative;
  min-width: 400px;
  width: 400px;
  height: 100%;
}

#progress-bar {
  border: 1px solid black;
  border-radius: 20px;
  position: relative;
  width: 400px;
  height: 10px;
}

#progress-child {
  border-radius: 20px;
  background-color: #6495ED;
  width: 0%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  /* z-index: -999999; */
}

#progress-label {
  padding: 5px;
  font-family: sans-serif;
}

#controls {
  display: none;
}