#CherryNode {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

#main-game {
  margin: 5em auto;
}

.controls {
  z-index: 2;
  padding: 0.5em 1em;
  display: flex;
  width: 100%;
  justify-content: center;
  text-align: center;
  position: fixed;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.controls.top {
  top: 0;
}
.controls.bottom {
  bottom: 0;
}
.controls .btn-primary {
  background-color: rgba(0, 0, 0, 0.2);
  border: none;
  margin: 0.1em;
}
.controls .btn-primary, .controls .btn-primary:hover, .controls .btn-primary:focus, .controls .btn-primary:hover:focus {
  outline: none;
  box-shadow: none;
}
.controls .btn-primary:hover {
  background-color: rgba(0, 0, 0, 0.3);
}
.controls .btn-primary:focus:hover {
  background-color: rgba(0, 0, 0, 0.4);
}
.controls .form-control {
  min-width: 80px;
}

#configuration fieldset {
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 1em;
  margin: 1em auto;
}
#configuration fieldset legend {
  font-size: 1.2em;
  background-color: white;
  padding: 3px;
  display: inline-block;
  width: initial;
}

#config-note-heights, #config-note-durations {
  position: relative;
}
#config-note-heights label, #config-note-durations label {
  filter: grayscale(1);
  color: gray;
  margin: 1px;
}
#config-note-heights input[type=checkbox], #config-note-durations input[type=checkbox] {
  width: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
  position: absolute;
}
#config-note-heights input[type=checkbox]:checked + label, #config-note-durations input[type=checkbox]:checked + label {
  filter: none;
  color: white;
}

#config-note-heights label {
  min-width: 55px;
}

#config-note-durations label {
  padding: 0;
}
#config-note-durations .icon {
  width: 48px;
  height: 48px;
  padding: 0;
  margin: 0;
}
#config-note-durations input[type=checkbox]:checked + label {
  filter: none;
  color: white;
  background-color: orange;
}

.icon.whole {
  background-image: url(../svg/notes/whole.svg);
}

.icon.wholerest {
  background-image: url(../svg/notes/wholer.svg);
}

.icon.half {
  background-image: url(../svg/notes/half.svg);
}

.icon.halfrest {
  background-image: url(../svg/notes/halfr.svg);
}

.icon.quarter {
  background-image: url(../svg/notes/quarter.svg);
}

.icon.quarterrest {
  background-image: url(../svg/notes/quarterr.svg);
}

.icon.eighth {
  background-image: url(../svg/notes/eighth.svg);
}

.icon.eighthrest {
  background-image: url(../svg/notes/eighthr.svg);
}

.icon.sixteenth {
  background-image: url(../svg/notes/sixteenth.svg);
}

.icon.sixteenthrest {
  background-image: url(../svg/notes/sixteenthr.svg);
}

.icon.thirtysecond {
  background-image: url(../svg/notes/thirtysecond.svg);
}

.icon.thirtysecondrest {
  background-image: url(../svg/notes/thirtysecondr.svg);
}

.icon.sixtyfourth {
  background-image: url(../svg/notes/sixtyfourth.svg);
}

.icon.sixtyfourthrest {
  background-image: url(../svg/notes/sixtyfourthr.svg);
}

/* ####################################################### */
#randy {
  display: block;
  color: white;
}

#playback {
  margin: 8px auto;
  display: block;
  width: 140px;
  height: 140px;
  border-radius: 500px;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  border: 15px solid white;
  outline: none;
}
#playback #note {
  color: white;
  font-size: 3em;
}

.chk {
  display: inline-block;
  position: relative;
}
.chk label {
  background-color: rgba(0, 0, 0, 0.2);
  color: gray;
  margin: 2px;
}
.chk input[type=checkbox] {
  width: 0;
  height: 0;
  opacity: 0;
  visibility: hidden;
  position: absolute;
}
.chk input[type=checkbox]:checked + label {
  background-color: orange;
  color: white;
}

#dots {
  text-align: center;
}
#dots .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  vertical-align: middle;
  border-radius: 500px;
  margin: 5px;
  border: 1px solid rgba(255, 255, 255, 0.6);
}
#dots .dot.current {
  background-color: white;
  width: 8px;
  height: 8px;
  margin: 3px;
}

/* ####################################################### */
table#main_graphic {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}
table#main_graphic th, table#main_graphic td {
  border: 1px solid rgba(0, 0, 0, 0.1);
}
table#main_graphic th {
  width: 30px;
  height: 30px;
}
table#main_graphic th.black {
  background: #1C1F2A;
  color: #fff;
}
table#main_graphic th.gray {
  background: #D8D7DF;
  color: #333;
}
table#main_graphic td {
  height: 30px;
  width: 30px;
}
table#main_graphic td.checked:after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 2px;
  border-radius: 5px;
  background-color: #FF9D6E;
}

/*.vf-stem path*/
/*.vf-flag path*/
#keyboard_container {
  text-align: center;
}

#keyboard {
  display: inline-block;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  padding: 12px 15px;
  font: bold 15px "Helvetica", "Arial", "Helvetica Neue", sans-serif;
  color: #555;
  border-radius: 5px;
}
#keyboard .row {
  display: block;
  overflow: hidden;
  text-align: center;
}
#keyboard .key {
  display: inline-block;
  float: left;
  width: 60px;
  height: 35px;
  background: #CCCCCC;
  line-height: 35px;
  text-align: center;
  margin: 2px;
  cursor: pointer;
  border-radius: 2px;
  text-transform: lowercase;
}
#keyboard .key:hover, #keyboard .key.hover {
  color: #333;
  background: #ddd;
}
#keyboard .key.lil_key {
  width: 15px;
  border: none;
  background: transparent;
}
#keyboard .key.spacebar {
  width: 60%;
  float: none;
}
#keyboard .key.valid {
  background: #FFC56E;
}

svg {
  background: transparent;
}

body {
  box-shadow: inset 0px 0px 50px rgba(0, 0, 0, 0.85);
  position: relative;
  background: #f7f4ee;
}
body #main-game {
  opacity: 0.75;
  position: relative;
  z-index: 5;
}
body:after {
  content: "";
  display: block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  background-image: url(../bg/texture-web-invert.png);
  background-repeat: repeat;
  mix-blend-mode: normal;
  z-index: 1;
}
body .vf-stavenote {
  transform: rotate(var(--r)) translate(var(--x), var(--y)) scale(var(--k));
  transform-box: fill-box;
  transform-origin: center;
}
body .vf-stavenote:nth-of-type(5n + 1) {
  --r: -1deg;
}
body .vf-stavenote:nth-of-type(5n + 2) {
  --r: 1deg;
}
body .vf-stavenote:nth-of-type(5n + 3) {
  --r: -2deg;
}
body .vf-stavenote:nth-of-type(5n + 4) {
  --r: 1deg;
}
body .vf-stavenote:nth-of-type(5n + 5) {
  --r: -2deg;
}
body .vf-stavenote:nth-of-type(3n + 1) {
  --x: -1px;
  --y: 1px;
}
body .vf-stavenote:nth-of-type(3n + 2) {
  --x: -1px;
  --y: -1px;
}
body .vf-stavenote:nth-of-type(3n + 3) {
  --x: 1px;
  --y: -1px;
}

.icon.audio {
  background-image: url("../svg/audio.svg");
  background-image: url("data:image/svg+xml,%3Csvg%20id%3D%22Capa_1%22%20enable-background%3D%22new%200%200%20512%20512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20width%3D%22512%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22m376%20136.011c-8.284%200-15%206.716-15%2015v210c0%208.284%206.716%2015%2015%2015s15-6.716%2015-15v-210c0-8.284-6.716-15-15-15z%22%2F%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22m316%20211.011c-8.284%200-15%206.716-15%2015v60c0%208.284%206.716%2015%2015%2015s15-6.716%2015-15v-60c0-8.284-6.716-15-15-15z%22%2F%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22m436%20196.011c-8.284%200-15%206.716-15%2015v90c0%208.284%206.716%2015%2015%2015s15-6.716%2015-15v-90c0-8.284-6.716-15-15-15z%22%2F%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22m497%20166.011c-8.284%200-15%206.716-15%2015v150c0%208.284%206.716%2015%2015%2015s15-6.716%2015-15v-150c0-8.284-6.716-15-15-15z%22%2F%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22m0%20181.011v150c0%208.284%206.716%2015%2015%2015h61v-180h-61c-8.284%200-15%206.716-15%2015z%22%2F%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22m247.398%2063.723-141.398%2098.978v186.62l141.398%2098.979c9.836%206.885%2023.602-.094%2023.602-12.289v-360c0-12.065-13.624-19.273-23.602-12.288z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.icon.config {
  background-image: url("../svg/config.svg");
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Asvgjs%3D%22http%3A%2F%2Fsvgjs.com%2Fsvgjs%22%20width%3D%22512%22%20height%3D%22512%22%20x%3D%220%22%20y%3D%220%22%20viewBox%3D%220%200%20512%20512%22%20style%3D%22enable-background%3Anew%200%200%20512%20512%22%20xml%3Aspace%3D%22preserve%22%20class%3D%22%22%3E%3Cg%3E%3Cpath%20d%3D%22m500.6%20212.6-59.9-14.7c-3.3-10.5-7.5-20.7-12.6-30.6l30.6-51c3.6-6%202.7-13.5-2.1-18.3L414%2055.4c-4.8-4.8-12.3-5.7-18.3-2.1l-51%2030.6c-9.9-5.1-20.1-9.3-30.6-12.6l-14.4-59.9C297.9%204.8%20291.9%200%20285%200h-60c-6.9%200-12.9%204.8-14.7%2011.4l-14.4%2059.9c-10.5%203.3-20.7%207.5-30.6%2012.6l-51-30.6c-6-3.6-13.5-2.7-18.3%202.1L53.4%2098c-4.8%204.8-5.7%2012.3-2.1%2018.3l30.6%2051c-5.1%209.9-9.3%2020.1-12.6%2030.6l-57.9%2014.7C4.8%20214.1%200%20220.1%200%20227v60c0%206.9%204.8%2012.9%2011.4%2014.4l57.9%2014.7c3.3%2010.5%207.5%2020.7%2012.6%2030.6l-30.6%2051c-3.6%206-2.7%2013.5%202.1%2018.3L96%20458.6c4.8%204.8%2012.3%205.7%2018.3%202.1l51-30.6c9.9%205.1%2020.1%209.3%2030.6%2012.6l14.4%2057.9c1.8%206.6%207.8%2011.4%2014.7%2011.4h60c6.9%200%2012.9-4.8%2014.7-11.4l14.4-57.9c10.5-3.3%2020.7-7.5%2030.6-12.6l51%2030.6c6%203.6%2013.5%202.7%2018.3-2.1l42.6-42.6c4.8-4.8%205.7-12.3%202.1-18.3l-30.6-51c5.1-9.9%209.3-20.1%2012.6-30.6l59.9-14.7c6.6-1.5%2011.4-7.5%2011.4-14.4v-60c0-6.9-4.8-12.9-11.4-14.4zM255%20332c-41.4%200-75-33.6-75-75s33.6-75%2075-75%2075%2033.6%2075%2075-33.6%2075-75%2075z%22%20fill%3D%22%23000000%22%20data-original%3D%22%23000000%22%20class%3D%22%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.icon.deny {
  background-image: url("../svg/deny.svg");
  background-image: url("data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Capa_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20329.328%20329.328%22%20style%3D%22enable-background%3Anew%200%200%20329.328%20329.328%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M164.666%2C0C73.871%2C0%2C0.004%2C73.871%2C0.004%2C164.672c0.009%2C90.792%2C73.876%2C164.656%2C164.662%2C164.656%20c90.793%2C0%2C164.658-73.865%2C164.658-164.658C329.324%2C73.871%2C255.459%2C0%2C164.666%2C0z%20M164.666%2C30c31.734%2C0%2C60.933%2C11.042%2C83.975%2C29.477%20L59.478%2C248.638c-18.431-23.04-29.471-52.237-29.474-83.967C30.004%2C90.413%2C90.413%2C30%2C164.666%2C30z%20M164.666%2C299.328%20c-31.733%2C0-60.934-11.042-83.977-29.477L269.854%2C80.691c18.431%2C23.043%2C29.471%2C52.244%2C29.471%2C83.979%20C299.324%2C238.921%2C238.917%2C299.328%2C164.666%2C299.328z%22%2F%3E%3C%2Fsvg%3E%0D%0A");
}

.icon.eighth {
  background-image: url("../svg/eighth.svg");
  background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0D%0A%3C!--%20Created%20with%20Inkscape%20(http%3A%2F%2Fwww.inkscape.org%2F)%20--%3E%0D%0A%3Csvg%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Asodipodi%3D%22http%3A%2F%2Fsodipodi.sourceforge.net%2FDTD%2Fsodipodi-0.dtd%22%20xmlns%3Ainkscape%3D%22http%3A%2F%2Fwww.inkscape.org%2Fnamespaces%2Finkscape%22%20id%3D%22svg2%22%20version%3D%221.1%22%20inkscape%3Aversion%3D%220.48.1%20r9760%22%20width%3D%22200%22%20height%3D%22200%22%20sodipodi%3Adocname%3D%22Music-eighthnote.png%22%3E%0D%0A%20%20%3Cmetadata%20id%3D%22metadata8%22%3E%0D%0A%20%20%20%20%3Crdf%3ARDF%3E%0D%0A%20%20%20%20%20%20%3Ccc%3AWork%20rdf%3Aabout%3D%22%22%3E%0D%0A%20%20%20%20%20%20%20%20%3Cdc%3Aformat%3Eimage%2Fsvg%2Bxml%3C%2Fdc%3Aformat%3E%0D%0A%20%20%20%20%20%20%20%20%3Cdc%3Atype%20rdf%3Aresource%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fdcmitype%2FStillImage%22%2F%3E%0D%0A%20%20%20%20%20%20%20%20%3Cdc%3Atitle%2F%3E%0D%0A%20%20%20%20%20%20%3C%2Fcc%3AWork%3E%0D%0A%20%20%20%20%3C%2Frdf%3ARDF%3E%0D%0A%20%20%3C%2Fmetadata%3E%0D%0A%20%20%3Cdefs%20id%3D%22defs6%22%2F%3E%0D%0A%20%20%3Csodipodi%3Anamedview%20pagecolor%3D%22%23ffffff%22%20bordercolor%3D%22%23666666%22%20borderopacity%3D%221%22%20objecttolerance%3D%2210%22%20gridtolerance%3D%2210%22%20guidetolerance%3D%2210%22%20inkscape%3Apageopacity%3D%220%22%20inkscape%3Apageshadow%3D%222%22%20inkscape%3Awindow-width%3D%221920%22%20inkscape%3Awindow-height%3D%221031%22%20id%3D%22namedview4%22%20showgrid%3D%22false%22%20showguides%3D%22true%22%20inkscape%3Aguide-bbox%3D%22true%22%20inkscape%3Aobject-nodes%3D%22false%22%20inkscape%3Azoom%3D%221.455%22%20inkscape%3Acx%3D%22297.72051%22%20inkscape%3Acy%3D%22117.3622%22%20inkscape%3Awindow-x%3D%220%22%20inkscape%3Awindow-y%3D%2224%22%20inkscape%3Awindow-maximized%3D%221%22%20inkscape%3Acurrent-layer%3D%22svg2%22%3E%0D%0A%20%20%20%20%3Csodipodi%3Aguide%20orientation%3D%221%2C0%22%20position%3D%220%2C43.25258%22%20id%3D%22guide3770%22%2F%3E%0D%0A%20%20%20%20%3Csodipodi%3Aguide%20orientation%3D%221%2C0%22%20position%3D%22199.98243%2C27.70109%22%20id%3D%22guide3772%22%2F%3E%0D%0A%20%20%3C%2Fsodipodi%3Anamedview%3E%0D%0A%20%20%3Cg%20id%3D%22g3782%22%20transform%3D%22translate(-143.36529%2C7.6738959)%22%3E%0D%0A%20%20%20%20%3Cpath%20sodipodi%3Anodetypes%3D%22ccssscccccc%22%20inkscape%3Aconnector-curvature%3D%220%22%20id%3D%22rect2987%22%20d%3D%22m%20254.30279%2C43.363271%200%2C74.531249%20c%20-2.19436%2C-3.1329%20-11.11823%2C-3.60474%20-17.375%2C-0.15625%20-7.41543%2C4.0871%20-10.79756%2C11.75107%20-7.5625%2C17.125%203.23507%2C5.37393%2011.86582%2C6.43085%2019.28125%2C2.34375%204.45154%2C-2.45352%207.41871%2C-6.2048%208.40625%2C-9.96875%200.45244%2C-2.06878%200.18854%2C-3.14209%200.15625%2C-4.59375%20l%200%2C-52.656249%20c%2032.53399%2C8.241492%2017.51919%2C36.811079%2014.59268%2C46.902749%2026.72779%2C-36.505741%20-14.22819%2C-51.395935%20-14.59268%2C-73.527749%20z%22%20style%3D%22fill%3A%23000000%3Bfill-rule%3Aevenodd%3Bstroke%3Anone%22%2F%3E%0D%0A%20%20%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E");
}

.icon.half {
  background-image: url("../svg/half.svg");
  background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0D%0A%3C!--%20Created%20with%20Inkscape%20(http%3A%2F%2Fwww.inkscape.org%2F)%20--%3E%0D%0A%3Csvg%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22199.46988%22%20height%3D%22103.0457%22%20id%3D%22svg2%22%3E%0D%0A%20%20%3Cdefs%20id%3D%22defs6%22%2F%3E%0D%0A%20%20%3Cg%20transform%3D%22translate(-0.24707682%2C-46.942827)%22%20id%3D%22g3862%22%3E%0D%0A%20%20%20%20%3Cpath%20d%3D%22m%2085.093708%2C139.34944%20c%20-5e-6%2C-4.5246%202.149825%2C-8.52714%206.449494%2C-12.00763%204.299646%2C-3.56747%208.852228%2C-5.35121%2013.657748%2C-5.35123%202.78211%2C2e-5%205.26916%2C0.73961%207.46118%2C2.2188%20l%200%2C-77.266553%202.78214%2C0%200%2C84.445033%20c%20-4e-5%2C4.87267%20-2.06556%2C8.91872%20-6.19658%2C12.13816%20-4.13107%2C3.21943%20-8.68365%2C4.82916%20-13.657747%2C4.82916%20-2.782148%2C0%20-5.227051%2C-0.82662%20-7.334718%2C-2.47984%20-2.107683%2C-1.74024%20-3.161522%2C-3.91554%20-3.161517%2C-6.5259%20m%205.81719%2C3.91554%20c%204.468261%2C0%208.978687%2C-1.95776%2013.531292%2C-5.8733%204.63686%2C-3.91553%206.9553%2C-6.83042%206.95533%2C-8.7447%20-3e-5%2C-1.21814%20-0.50587%2C-1.82723%20-1.51753%2C-1.82725%20-3.11938%2C2e-5%20-7.41904%2C1.87077%20-12.898981%2C5.61227%20-5.395665%2C3.6545%20-8.09349%2C6.69992%20-8.093481%2C9.13625%20-9e-6%2C1.13116%200.674447%2C1.69673%202.02337%2C1.69673%22%20id%3D%22path3859%22%20style%3D%22font-size%3A128.47322083px%3Bfont-style%3Anormal%3Bfont-weight%3Anormal%3Bline-height%3A125%25%3Bletter-spacing%3A0px%3Bword-spacing%3A0px%3Bfill%3A%23000000%3Bfill-opacity%3A1%3Bstroke%3Anone%3Bfont-family%3ASans%22%2F%3E%0D%0A%20%20%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E");
}

.icon.home {
  background-image: url("../svg/home.svg");
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Asvgjs%3D%22http%3A%2F%2Fsvgjs.com%2Fsvgjs%22%20width%3D%22512%22%20height%3D%22512%22%20x%3D%220%22%20y%3D%220%22%20viewBox%3D%220%200%20100%20100%22%20style%3D%22enable-background%3Anew%200%200%20512%20512%22%20xml%3Aspace%3D%22preserve%22%20class%3D%22%22%3E%3Cg%3E%3Cpath%20d%3D%22M83.5%20100h-67C7.5%20100%200%2092.4%200%2083.3V46.8c0-4.6%202-9.1%205.5-12.2L39%204.2c6.5-5.6%2015.5-5.6%2022%200l33.5%2030.4c3.5%203%205.5%207.6%205.5%2012.2v36.5c-.5%209.6-7.5%2016.7-16.5%2016.7zM50%2010.3c-1.5%200-3%20.5-4.5%201.5L12%2042.2c-1.5%201-2%203-2%205.1v36.5c0%203.5%203%206.6%206.5%206.6H83c3.5%200%206.5-3%206.5-6.6V47.3c0-2-1-3.5-2-5.1L54%2011.8c-1-1-2.5-1.5-4-1.5z%22%20fill%3D%22%23000000%22%20data-original%3D%22%23000000%22%20class%3D%22%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.icon.install {
  background-image: url("../svg/install.svg");
  background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Capa_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20512%20512%22%20style%3D%22enable-background%3Anew%200%200%20512%20512%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%09%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M382.56%2C233.376C379.968%2C227.648%2C374.272%2C224%2C368%2C224h-64V16c0-8.832-7.168-16-16-16h-64c-8.832%2C0-16%2C7.168-16%2C16v208h-64%20c-6.272%2C0-11.968%2C3.68-14.56%2C9.376c-2.624%2C5.728-1.6%2C12.416%2C2.528%2C17.152l112%2C128c3.04%2C3.488%2C7.424%2C5.472%2C12.032%2C5.472%20c4.608%2C0%2C8.992-2.016%2C12.032-5.472l112-128C384.192%2C245.824%2C385.152%2C239.104%2C382.56%2C233.376z%22%2F%3E%0D%0A%09%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M432%2C352v96H80v-96H16v128c0%2C17.696%2C14.336%2C32%2C32%2C32h416c17.696%2C0%2C32-14.304%2C32-32V352H432z%22%2F%3E%0D%0A%3C%2Fsvg%3E%0D%0A");
}

.icon.next {
  background-image: url("../svg/next.svg");
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20x%3D%220%22%20y%3D%220%22%20viewBox%3D%220%200%2016.933%2016.933%22%20style%3D%22enable-background%3Anew%200%200%20512%20512%22%20xml%3Aspace%3D%22preserve%22%20class%3D%22%22%3E%3Cg%3E%3Cpath%20d%3D%22M13.764%201.06a1.06%201.06%200%200%200-1.045%201.076v6.327a1.053%201.053%200%200%200-.422-.83L3.817%201.27a1.06%201.06%200%200%200-1.696.849v12.72a1.06%201.06%200%200%200%201.695.848l8.48-6.36c.278-.207.418-.517.423-.829v6.34c0%201.414%202.121%201.414%202.121%200V2.136a1.06%201.06%200%200%200-1.076-1.076z%22%20fill%3D%22%23000000%22%20opacity%3D%221%22%20data-original%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.icon.pause {
  background-image: url("../svg/pause.svg");
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20x%3D%220%22%20y%3D%220%22%20viewBox%3D%220%200%2032%2032%22%20style%3D%22enable-background%3Anew%200%200%20512%20512%22%20xml%3Aspace%3D%22preserve%22%20class%3D%22%22%3E%3Cg%3E%3Cpath%20d%3D%22M14%205v22a3%203%200%200%201-3%203H8a3%203%200%200%201-3-3V5a3%203%200%200%201%203-3h3a3%203%200%200%201%203%203zm10-3h-3a3%203%200%200%200-3%203v22a3%203%200%200%200%203%203h3a3%203%200%200%200%203-3V5a3%203%200%200%200-3-3z%22%20data-name%3D%22Layer%2033%22%20fill%3D%22%23000000%22%20opacity%3D%221%22%20data-original%3D%22%23000000%22%20class%3D%22%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.icon.play {
  background-image: url("../svg/play.svg");
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20x%3D%220%22%20y%3D%220%22%20viewBox%3D%220%200%20512%20512%22%20style%3D%22enable-background%3Anew%200%200%20512%20512%22%20xml%3Aspace%3D%22preserve%22%20class%3D%22%22%3E%3Cg%3E%3Cpath%20d%3D%22M22.4%20256V89.7c0-68.9%2074.6-112%20134.2-77.5l144.1%2083.2%20144.1%2083.2c59.7%2034.4%2059.7%20120.6%200%20155l-144.1%2083.2L156.6%20500C97%20534.3%2022.4%20491.3%2022.4%20422.4z%22%20fill%3D%22%23000000%22%20opacity%3D%221%22%20data-original%3D%22%23000000%22%20class%3D%22%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.icon.prev {
  background-image: url("../svg/prev.svg");
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20x%3D%220%22%20y%3D%220%22%20viewBox%3D%220%200%2016.933%2016.933%22%20style%3D%22enable-background%3Anew%200%200%20512%20512%22%20xml%3Aspace%3D%22preserve%22%20class%3D%22%22%3E%3Cg%3E%3Cpath%20d%3D%22M3.196%201.06a1.06%201.06%200%200%200-1.075%201.076v12.703c0%201.414%202.12%201.414%202.12%200v-6.34c.005.312.146.622.423.83l8.48%206.36a1.06%201.06%200%200%200%201.696-.85V2.12a1.06%201.06%200%200%200-1.696-.849l-8.48%206.362a1.053%201.053%200%200%200-.423.83V2.136A1.06%201.06%200%200%200%203.196%201.06z%22%20fill%3D%22%23000000%22%20opacity%3D%221%22%20data-original%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.icon.quarter {
  background-image: url("../svg/quarter.svg");
  background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0D%0A%3C!--%20Created%20with%20Inkscape%20(http%3A%2F%2Fwww.inkscape.org%2F)%20--%3E%0D%0A%3Csvg%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20width%3D%22200%22%20height%3D%22200%22%20id%3D%22svg2%22%3E%0D%0A%20%20%3Cdefs%20id%3D%22defs4%22%2F%3E%0D%0A%20%20%3Cg%20transform%3D%22translate(0%2C-852.36218)%22%20id%3D%22layer1%22%3E%0D%0A%20%20%20%20%3Cpath%20d%3D%22m%20113.13433%2C900.47269%200%2C83.14019%22%20id%3D%22path3821%22%20style%3D%22fill%3Anone%3Bstroke%3A%23000000%3Bstroke-width%3A1.95333612px%3Bstroke-linecap%3Abutt%3Bstroke-linejoin%3Amiter%3Bstroke-opacity%3A1%22%2F%3E%0D%0A%20%20%20%20%3Cpath%20d%3D%22m%20153.03812%2C108.7706%20a%2011.237947%2C7.3223042%200%201%201%20-0.33175%2C-1.76601%22%20transform%3D%22matrix(1.2477873%2C-0.63522684%2C0.59622185%2C1.3694102%2C-142.33379%2C929.29558)%22%20id%3D%22path3827%22%20style%3D%22fill-opacity%3A1%3Bstroke%3A%23000000%3Bstroke-width%3A0%3Bstroke-miterlimit%3A4%3Bstroke-opacity%3A0.26666667%3Bstroke-dasharray%3Anone%22%2F%3E%0D%0A%20%20%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E");
}

.icon.sixteenth {
  background-image: url("../svg/sixteenth.svg");
  background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0D%0A%3C!--%20Created%20with%20Inkscape%20(http%3A%2F%2Fwww.inkscape.org%2F)%20--%3E%0D%0A%3Csvg%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Asodipodi%3D%22http%3A%2F%2Fsodipodi.sourceforge.net%2FDTD%2Fsodipodi-0.dtd%22%20xmlns%3Ainkscape%3D%22http%3A%2F%2Fwww.inkscape.org%2Fnamespaces%2Finkscape%22%20id%3D%22svg2%22%20version%3D%221.1%22%20inkscape%3Aversion%3D%220.48.1%20r9760%22%20width%3D%22200%22%20height%3D%22200%22%20sodipodi%3Adocname%3D%22Music-sixteenthnote.svg%22%3E%0D%0A%20%20%3Cdefs%20id%3D%22defs6%22%2F%3E%0D%0A%20%20%3Cg%20id%3D%22g3821%22%3E%0D%0A%20%20%20%20%3Cpath%20id%3D%22path2991%22%20d%3D%22M%20110.9375%2051.9375%20L%20110.9375%20126%20C%20109.0629%20123.45712%20101.17892%20121.80239%2094.375%20126.15625%20C%2087.571079%20130.51012%2083.486486%20137.79063%2085.84375%20142.09375%20C%2088.534497%20147.00564%2097.479358%20149.63478%20104.59375%20144.53125%20C%20109.73852%20140.84063%20112.21225%20136.09844%20113%20134.6875%20L%20113%2090.03125%20C%20132.07989%20101.68901%20142.43114%20105.02254%20132.8125%20131.34375%20C%20151.18862%20103.26621%20128.27477%2099.576267%20113%2072.03125%20L%20113%2069.9375%20C%20138.86683%2083.055749%20133.67706%2095.328918%20136%20102.0625%20C%20142.43454%2075.101798%20119.34006%2072.375773%20113%2053.25%20L%20113%2052.09375%20L%20110.9375%2051.9375%20z%20%22%20style%3D%22opacity%3A1%3Bfill%3A%23000000%3Bstroke%3Anone%22%2F%3E%0D%0A%20%20%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E");
}

.icon.stop {
  background-image: url("../svg/stop.svg");
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22512%22%20height%3D%22512%22%20x%3D%220%22%20y%3D%220%22%20viewBox%3D%220%200%2024%2024%22%20style%3D%22enable-background%3Anew%200%200%20512%20512%22%20xml%3Aspace%3D%22preserve%22%20class%3D%22%22%3E%3Cg%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M6%203.25A2.75%202.75%200%200%200%203.25%206v12A2.75%202.75%200%200%200%206%2020.75h12A2.75%202.75%200%200%200%2020.75%2018V6A2.75%202.75%200%200%200%2018%203.25z%22%20opacity%3D%221%22%20data-original%3D%22%23000000%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.icon.vibration {
  background-image: url("../svg/vibration.svg");
  background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Capa_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%20512.016%20512.016%22%20style%3D%22enable-background%3Anew%200%200%20512.016%20512.016%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%09%3Cg%3E%0D%0A%09%09%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M91.336%2C292.712l-52.704-52.704l52.672-52.672c6.272-6.272%2C6.272-16.384%2C0.032-22.656l-64-64%0D%0A%09%09%09c-6.24-6.24-16.384-6.24-22.624%2C0c-6.24%2C6.24-6.24%2C16.384%2C0%2C22.624l52.672%2C52.704L4.68%2C228.68c-6.24%2C6.24-6.24%2C16.384%2C0%2C22.624%0D%0A%09%09%09l52.704%2C52.704L4.712%2C356.68c-6.24%2C6.24-6.24%2C16.384%2C0%2C22.624c3.104%2C3.136%2C7.2%2C4.704%2C11.296%2C4.704s8.192-1.568%2C11.328-4.672l64-64%0D%0A%09%09%09C97.576%2C309.096%2C97.576%2C298.952%2C91.336%2C292.712z%22%2F%3E%0D%0A%09%09%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M507.336%2C356.712l-52.704-52.704l52.672-52.672c6.272-6.272%2C6.272-16.384%2C0.032-22.656l-52.704-52.672l52.672-52.672%0D%0A%09%09%09c6.24-6.24%2C6.24-16.384%2C0-22.624c-6.24-6.24-16.384-6.24-22.624%2C0l-64%2C64c-6.24%2C6.24-6.24%2C16.384%2C0%2C22.624l52.704%2C52.672%0D%0A%09%09%09l-52.672%2C52.672c-6.24%2C6.24-6.24%2C16.384%2C0%2C22.624l64%2C64c3.104%2C3.136%2C7.2%2C4.704%2C11.296%2C4.704s8.192-1.568%2C11.328-4.672%0D%0A%09%09%09C513.576%2C373.096%2C513.576%2C362.952%2C507.336%2C356.712z%22%2F%3E%0D%0A%09%09%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M352.008%2C64.008h-192c-17.632%2C0-32%2C14.368-32%2C32v320c0%2C17.664%2C14.368%2C32%2C32%2C32h192c17.664%2C0%2C32-14.336%2C32-32v-320%0D%0A%09%09%09C384.008%2C78.376%2C369.672%2C64.008%2C352.008%2C64.008z%20M352.008%2C384.008h-192v-256h192V384.008z%22%2F%3E%0D%0A%09%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E");
}

.icon.whole {
  background-image: url("../svg/whole.svg");
  background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0D%0A%3C!--%20Created%20with%20Inkscape%20(http%3A%2F%2Fwww.inkscape.org%2F)%20--%3E%0D%0A%3Csvg%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Asodipodi%3D%22http%3A%2F%2Fsodipodi.sourceforge.net%2FDTD%2Fsodipodi-0.dtd%22%20xmlns%3Ainkscape%3D%22http%3A%2F%2Fwww.inkscape.org%2Fnamespaces%2Finkscape%22%20id%3D%22svg2%22%20version%3D%221.1%22%20inkscape%3Aversion%3D%220.47%20r22583%22%20width%3D%22600%22%20height%3D%22299.13995%22%20sodipodi%3Adocname%3D%22Music-wholenote.svg%22%3E%0D%0A%20%20%3Cg%20id%3D%22g2830%22%20transform%3D%22matrix(2.9945185%2C0%2C0%2C2.9945185%2C-405.68296%2C-117.96426)%22%3E%0D%0A%20%20%20%20%3Cpath%20id%3D%22path2818%22%20d%3D%22m%20225.36285%2C99.817998%20c%20-5.49692%2C-1.69186%20-9.83405%2C-6.28944%20-9.83405%2C-10.4246%200%2C-11.704229%2025.13958%2C-16.335904%2035.52156%2C-6.544434%2011.22686%2C10.588284%20-7.09488%2C22.691526%20-25.68751%2C16.969034%20z%20m%2016.76819%2C-2.9403%20c%203.05854%2C-4.66792%200.13433%2C-13.916407%20-5.16332%2C-16.330174%20-7.77978%2C-3.544708%20-12.54851%2C2.495846%20-9.30827%2C11.790804%202.2412%2C6.42911%2011.35935%2C9.289252%2014.47159%2C4.53937%20z%22%20style%3D%22fill%3A%23000000%22%2F%3E%0D%0A%20%20%3C%2Fg%3E%0D%0A%3C%2Fsvg%3E");
}