#buttons span {
	background: #7ca6f2;
	border-radius: 6px;
	padding: 3px;
	display: inline-block;
	margin-bottom: 5px;
	cursor: pointer;
	color: #ffffff;
}
#buttons {
  text-align: center;
}
#canvas {
	overflow-x: scroll;
	overflow-y: hidden;
	height: 512px;
	width: 90%;
	border: 3px solid #000;
	margin: 0 auto;
}
#loadout { height: 100%; }
#sum {
	display: block;
	text-align: center;
	margin: 10px auto;
	padding: 10px;
	background-color: #7ca6f2;
	background: rgba(0,0,0,0.2);
}
#sum span img {
	width: 32px;
	height: 32px;
	vertical-align: middle;
	margin: 1px 3px 1px 0;
}
#sum span {
	vertical-align: middle;
	padding: 10px;
}
.choose-note {
	cursor: pointer;
}
#active {
	border: 3px solid gold;
}
#canvas::-webkit-scrollbar {
	height: 0.45em;
}
#canvas::-webkit-scrollbar-button {
    background: #10295c;
}
#canvas::-webkit-scrollbar-track-piece {
    background: #1d479f;
}
#canvas::-webkit-scrollbar-thumb {
    background: #4488ff;
	border-radius: 9px;
}
#canvas::-webkit-scrollbar-thumb:hover  {
    background: #4f8fff;
	border-radius: 9px;
}
#canvas::-webkit-scrollbar-thumb:active  {
    background: #2962c6;
    border-radius: 9px;
}
#ctip-volume, #ctip-button {
    display: inline;
}
#ctip-selector > div, #ctip-selector-note > div {
    display: inline-block;
    margin: 5px auto;
    padding: 5px;
    width: 32px;
    min-height: 32px;
    background: #374f77;
    vertical-align: top;
}
.ctip-drop img {
    display: none !important;
    visibility: hidden;
    position: absolute;
    cursor: pointer;
}
.ctip-drop img.active {
    display: block !important;
    position: initial;
    visibility: visible;
}
.ctip-drop:hover img {
    display: block !important;
    position: initial;
    visibility: visible;
}
.ctip-drop:hover {
    max-height: 128px;
    overflow-y: scroll;
}
@media only screen and (max-width: 600px) {
  #ctip {
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
  }
  #content { padding: 0 3% !important; }
  #canvas { width: 95% !important; height: 100vw !important; }
  #sum span { padding: 5px; }
}
@media only screen and (max-height: 600px) {
  #canvas { width: 95% !important; height: 100vh !important; }
}
@media all and (display-mode: standalone) {
  #content h2 { display: none !important; }
  .backtrack { display: none !important; }
}

#ctip {
  display: block;
  visibility: hidden;
  min-width: 300px;
  height: fit-content;
  position: fixed;
  padding: 3px;
  border-radius: 5px;
  border: 4px solid rgb(55, 79, 119);
  background: rgb(96, 136, 205);
  top: 1em;
  left: 40%;
  left: calc(50% - 150px);
  text-align: center;
}
#footer {
  position: initial !important;
}