html {

}

:root {
  --color-body-background: #1f2324;
  --color-menu-background: #2c3739;
  --color-menu-item: #2c3739; /*#394749;*/
  --color-menu-item-hover: #577679;
  --color-menu-item-selected: #5c8185;
  --color-menu-item-selected-hover: #496264;


  /*interval colors*/
  --interval-tonic:hsl(10, 39%, 49%);
  --interval-minor-second:hsl(160, 39%, 49%);
  --interval-major-second:hsl(160, 39%, 49%);
  --interval-minor-third:hsl(60, 39%, 49%);
  --interval-major-third:hsl(70, 39%, 49%);
  --interval-perfect-fourth:hsl(90, 39%, 49%);
  --interval-augmented-fourth:hsl(190, 39%, 49%);
  --interval-perfect-fifth:hsl(120, 39%, 49%);
  --interval-augmented-fifth:hsl(180, 39%, 49%);
  --interval-minor-sixth:hsl(220, 39%, 49%);
  --interval-major-sixth:hsl(220, 39%, 49%);
  --interval-minor-seventh:hsl(293, 39%, 49%);
  --interval-major-seventh:hsl(293, 39%, 49%);
}

body {
  background-color: #1f2324;
  margin: 0;
}

.guitar-neck {
  margin-left: 5vw;
  margin-top: 20px;
  width: 89.7vw;
  height: 240px;
  background-color: #433125;
  /* Dark wood color */
  position: relative;
  border: 2px solid #eee;
  /* Black border around the guitar neck */
  /* border-bottom: 2px solid #eee; */
  /* Black border around the guitar neck */
  box-sizing: border-box;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}


#status-message {
  position:fixed;
  bottom: 46px;
  right: 19px;
  min-width:100px;
  padding-left:10px;
  padding-right:10px;
  padding-top:10px;
  padding-bottom:10px;
  max-width:400px;
  font-weight: bold;
  line-height:30px;
  font-size:16px;
  text-align:center;
  background-color:var(--color-menu-item-hover);
  border:2px solid white;
  border-radius:5px;
  color:white;
  font-family: system-ui;
  margin:0 auto;
  opacity:0;
  transition: opacity ease-in 0.05s;
}

#status-message.hide {
  display: none;
}

#status-message i {
  margin-left: 20px;
}

#status-message i.hidden {
  display:none;
}

#status-message.show {
  opacity: 0.9;
}



.piano {
  display: flex;
  overflow-x: scroll;
  border: 2px solid #fff;
  height: 80px;
  width: 89.7vw;
  position: relative;
  margin-left: 5vw;
  margin-top: 0;
  font-family: sans-serif;
  font-weight: bold;
  box-sizing: border-box;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 5px;
}


.instrument-controls {
  margin-left: 5vw;
  border-left: 2px solid #fff;
  border-right: 2px solid #fff;
  height: 30px;
  width: 89.7vw;
  box-sizing: border-box;
}


.piano-only .instrument-controls,
.piano-only .piano,
.piano-only .guitar-neck {
  margin-left: 0vw;
  width: 94.7vw;
}

.piano-only .piano {
  height: 180px;
}

.piano-only .guitar-neck {
  height:20px;
}

.fret,
.note-button {
  position: absolute;
  height: 100%;
  width: 1.5px;
  background-color: #aaa;
  /* White frets */
}
.fret.first-fret,
.fret.last-fret {
  background-color:rgba(0,0,0,0);
}

.string {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #ccc;
  /* Light grey strings */
}

.fret-marker {
  position: absolute;
  width: 0.7vw;
  height: 0.7vw;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  /* White fret markers */
  top: -15px;
}

.note-button {
  width: 27px;
  /* Button width */
  height: 27px;
  /* Button height */
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 30%;
  background-color: #3c4447;
  /* Button color */
  text-align: center;
  color: #fff;
  font-weight: bold;
  border: none;
  cursor: pointer;
  opacity: 0.2;
  box-sizing: border-box;
  border: 2px solid rgba(0, 0, 0, 0);
  line-height: 23px;
  font-family:system-ui;
  /*display: none;  Initially hidden */
}

.note-button::after {
  width: 23px;
  /* Button width */
  height: 23px;
  /* Button height */
  padding-left: 0;
  padding-right: 0;
  border-radius: 30%;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 23px;
}

.note-button.visible::after {
  background-color: rgba(0, 0, 0, 0);
}

.note-button.root:hover,
.note-button:hover {
  opacity: 0.9;
}

.note-button:hover::after {
  content: '';
  background-color: rgba(0, 0, 0, 0);
}


.note-button.visible {
  opacity: 1;
  border: 2px solid #fff;
}

.note-button.highlight {
  opacity: 1;
  background-color: hsl(210, 39%, 49%);
  /* Button color */
}

.note-button.root {
  opacity: 1;
}

.interval {
  min-width: 38px;
  text-align: center;
}

.interval:hover {
  opacity: 0.9;
}

.interval .inverted,
.interval:hover .real {
  display: none
}

.interval:hover .inverted {
  display: block
}

.I-1P,
.I-8P {
  opacity: 1;
  background-color: var(--interval-tonic);
}

.I-1P,
.I-8P,
button.I-1P::after,
button.I-8P::after,
button.note-button.highlighted-interval.I-1P::after {
  content: 'I';
  background-color: var(--interval-tonic);
}

.I-2m,
.I-8A {
  opacity: 0.6;
  background-color: var(--interval-minor-second);
}

.I-2m,
.I-8A,
button.I-2m::after,
button.I-8A::after,
button.note-button.highlighted-interval.I-2m::after,
button.note-button.highlighted-interval.I-8A::after {
  content: 'ii';
  background-color: var(--interval-minor-second);
}

.I-2M, .I-2A {
  opacity: 0.6;
  background-color: var(--interval-major-second);
}

.I-2M,
button.I-2M::after,
button.note-button.highlighted-interval.I-2M::after {
  content: 'II';
  background-color: var(--interval-major-second);
}

.I-3m {
  opacity: 0.6;
  background-color: var(--interval-minor-third);
}

.I-3m,
button.I-3m::after,
button.note-button.highlighted-interval.I-3m::after {
  content: 'iii';
  background-color: var(--interval-minor-third);

}

.I-3M {
  opacity: 0.6;
  background-color: var(--interval-major-third);
}

.I-3M,
button.I-3M::after,
button.note-button.highlighted-interval.I-3M::after {
  content: 'III';
  background-color: var(--interval-major-third);

}

.I-4P {
  opacity: 0.6;
  background-color: var(--interval-perfect-fourth);
}

.I-4P,
button.I-4P::after,
button.note-button.highlighted-interval.I-4P::after {
  content: 'IV';
  background-color: var(--interval-perfect-fourth);
}


.I-4A,
.I-5d {
  opacity: 0.6;
  background-color: var(--interval-augmented-fourth);
}

.I-5d,
.I-4A,
button.I-5d::after,
button.I-4A::after,
button.note-button.highlighted-interval.I-5d::after, 
button.note-button.highlighted-interval.I-4A::after {
  content: '♭V';
  background-color: var(--interval-augmented-fourth);
}



.I-5P {
  opacity: 0.6;
  background-color: var(--interval-perfect-fifth);
}

.I-5P,
button.I-5P::after,
button.note-button.highlighted-interval.I-5P::after {
  content: 'V';
  background-color: var(--interval-perfect-fifth);
}

.I-5A {
  opacity: 0.6;
  background-color: var(--interval-augmented-fifth);
}

.I-6m {
  opacity: 0.6;
  background-color: var(--interval-minor-sixth);
}

.I-6m,
button.I-6m::after,
button.note-button.highlighted-interval.I-6m::after {
  content: 'vi';
  background-color: var(--interval-minor-sixth);

}

.I-6M {
  opacity: 0.6;
  background-color: var(--interval-major-sixth);
}

.I-6M,
button.I-6M::after,
button.note-button.highlighted-interval.I-6M::after {
  content: 'VI';
  background-color: var(--interval-major-sixth);

}

.I-7m {
  opacity: 0.6;
  background-color: var(--interval-minor-seventh);
}

.I-7m,
button.I-7m::after,
button.note-button.highlighted-interval.I-7m::after {
  content: 'vii';
  background-color: var(--interval-minor-seventh);

}

.I-7M,
.I-8d {
  opacity: 0.6;
  background-color: var(--interval-major-seventh);
}

.I-7M,
.I-8d,
button.I-7M::after,
button.I-8d::after,
button.note-button.highlighted-interval.I-7M::after,
button.note-button.highlighted-interval.I-8d::after {
  content: 'VII';
  background-color: var(--interval-major-seventh);
}

.piano .black .note-button.notediff-0,
.notediff-0 {
  background-color: hsl(120, 39%, 49%);
  color: hsl(120, 39%, 100%);
  opacity: 0.7;
}

.piano .black .note-button.notediff-1,
.notediff-1 {
  background-color: hsl(74, 39%, 49%);
  color: #fff;
  opacity: 0.5;
}

.piano .black .note-button.notediff-2,
.notediff-2 {
  background-color: hsl(53, 39%, 49%);
  opacity: 0.4;
}

.piano .black .note-button.notediff-3,
.notediff-3 {
  background-color: hsl(35, 39%, 49%);
  opacity: 0.3;
}

.piano .black .note-button.notediff-0.visible,
.notediff-0.visible {
  background-color: hsl(271, 78%, 53%);
  color: #fff;
  border-color: #fff;
  opacity: 1;
}

.piano .black .note-button.notediff-1.visible,
.notediff-1.visible {
  background-color: hsl(271, 78%, 73%);
  color: #fff;
  border-color: #fff;
  opacity: 1;
}

.piano .black .note-button.notediff-2.visible,
.notediff-2.visible {
  background-color: hsl(271, 78%, 83%);
  color: #fff;
  border-color: #fff;
  opacity: 1;
}

.piano .black .note-button.notediff-3.visible,
.notediff-3.visible {
  background-color: hsl(271, 78%, 93%);
  color: hsl(246, 78%, 73%);
  border-color: #fff;
  opacity: 1;
}

.circle-of-fifths {
  position: relative;
  width: 30vw;
  height: 30vw;
  border-radius: 50%;
  margin: 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #465052;
  border: 2px solid #5c6d70;
  box-sizing: border-box;
}

.major-keys,
.minor-keys {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0;
  margin: 0;
  
}

.circle-of-fifths .circle-settings {
  position:absolute;
  background-color: #5e6a6c;
  height:3.5vw;
  width:3.5vw;
  top: calc(50% - 1.75vw);
  left: calc(50% - 1.75vw);
  border-radius:100%;
}

.circle-container {
  margin-top:14px;
  margin-left:20px;
}

.circle-container .settings-bar {
  border-bottom:2px solid rgba(255,255,255, 1);
  height: 32px;
  background: rgba(0, 0, 0, 0.1);
  margin-top: 0px;
  display: flex;
  justify-content: flex-end;
  align-items: end;
}

.circle-container .settings-bar button {
  background-color: var(--color-menu-background);
  color:rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-weight: bold;
  height:100%;
  margin: 0px;
  line-height: 30px;
  font-size:11px;
  box-sizing: border-box;
  padding-top:0;
  padding-bottom:0;
  border: 2px solid hsla(120, 39%, 49%, 0);
  border-radius:5px;
  display:flex;
  margin-left:10px;
}

.circle-container .settings-bar .selected-key {
  height: 100%;
  flex-grow: 1;
  line-height: 30px;
  padding-left: 10px;
  color: white;
  font-family: system-ui;
}

body.selected-tonics-0 .circle-container .settings-bar .selected-key::before {
  content: "Key not selected"
}
body.selected-tonics-2 .circle-container .settings-bar .selected-key::before,
body.selected-tonics-3 .circle-container .settings-bar .selected-key::before,
body.selected-tonics-4 .circle-container .settings-bar .selected-key::before,
body.selected-tonics-5 .circle-container .settings-bar .selected-key::before,
body.selected-tonics-6 .circle-container .settings-bar .selected-key::before,
body.selected-tonics-7 .circle-container .settings-bar .selected-key::before,
body.selected-tonics-8 .circle-container .settings-bar .selected-key::before,
body.selected-tonics-9 .circle-container .settings-bar .selected-key::before,
body.selected-tonics-10 .circle-container .settings-bar .selected-key::before,
body.selected-tonics-11 .circle-container .settings-bar .selected-key::before,
body.selected-tonics-12 .circle-container .settings-bar .selected-key::before{
  content: "Multiple keys"
}

body.selected-tonics-1.key-Db-major .circle-container .settings-bar .selected-key::before {content: "D♭ Major"}
body.selected-tonics-1.key-Bb-minor .circle-container .settings-bar .selected-key::before {content: "B♭ Minor"}
body.selected-tonics-1.key-Ab-major .circle-container .settings-bar .selected-key::before {content: "A♭ Major"}
body.selected-tonics-1.key-F-minor .circle-container .settings-bar .selected-key::before {content: "F Minor"}
body.selected-tonics-1.key-Eb-major .circle-container .settings-bar .selected-key::before {content: "E♭ Major"}
body.selected-tonics-1.key-C-minor .circle-container .settings-bar .selected-key::before {content: "C Minor"}
body.selected-tonics-1.key-Bb-major .circle-container .settings-bar .selected-key::before {content: "B♭ Major"}
body.selected-tonics-1.key-G-minor .circle-container .settings-bar .selected-key::before {content: "G Minor"}
body.selected-tonics-1.key-F-major .circle-container .settings-bar .selected-key::before {content: "F Major"}
body.selected-tonics-1.key-D-minor .circle-container .settings-bar .selected-key::before {content: "D Minor"}
body.selected-tonics-1.key-C-major .circle-container .settings-bar .selected-key::before {content: "C Major"}
body.selected-tonics-1.key-A-minor .circle-container .settings-bar .selected-key::before {content: "A Minor"}
body.selected-tonics-1.key-G-major .circle-container .settings-bar .selected-key::before {content: "G Major"}
body.selected-tonics-1.key-E-minor .circle-container .settings-bar .selected-key::before {content: "E Minor"}
body.selected-tonics-1.key-D-major .circle-container .settings-bar .selected-key::before {content: "D Major"}
body.selected-tonics-1.key-B-minor .circle-container .settings-bar .selected-key::before {content: "B Minor"}
body.selected-tonics-1.key-A-major .circle-container .settings-bar .selected-key::before {content: "A Major"}
body.selected-tonics-1.key-Fsharp-minor .circle-container .settings-bar .selected-key::before {content: "F♯ Minor"}
body.selected-tonics-1.key-E-major .circle-container .settings-bar .selected-key::before {content: "E Major"}
body.selected-tonics-1.key-Csharp-minor .circle-container .settings-bar .selected-key::before {content: "C♯ Minor"}
body.selected-tonics-1.key-B-major .circle-container .settings-bar .selected-key::before {content: "B Major"}
body.selected-tonics-1.key-Gsharp-minor .circle-container .settings-bar .selected-key::before {content: "G♯ Minor"}
body.selected-tonics-1.key-Fsharp-major .circle-container .settings-bar .selected-key::before {content: "F♯ Major"}
body.selected-tonics-1.key-Dsharp-minor .circle-container .settings-bar .selected-key::before {content: "D♯ Minor"}


body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord {font-size: 0;}
body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord::before {font-size: 12px;content: "?"}
body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord::after {position: relative;font-size: 8px;top: -6px;}

body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord.tonic-C::before {content: "I"}
body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord.tonic-Dm::before {content: "ii"}
body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord.tonic-D::before {content: "II"}
body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord.tonic-Em::before {content: "iii"}
body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord.tonic-E::before {content: "III"}
body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord.tonic-F::before {content: "IV"}
body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord.tonic-Fm::before {content: "iv"}
body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord.tonic-G::before {content: "V"}
body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord.tonic-Gm::before {content: "v"}
body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord.tonic-A.minor::before {content: "vi"}
body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord.tonic-B::before {content: "VII"}
body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord.tonic-Bm::before {content: "vii"}

body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord.maj7::after {content: "∆7"}
body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord.maj9::after {content: "∆9"}
body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord.sus4::after {content: "sus4"}
body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord.sus2::after {content: "sus2"}
body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord.add4::after {content: "add4"}
body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord.add9::after {content: "add9"}
body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord.addb9::after {content: "add♭9"}
body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord.M7sharp5::after {content: "7♯5"}
body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord.M7b5::after {content: "ø"}
body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord.dim::after {content: "o"}

body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord.M6::after {content: "6"}
body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord.M7::after {content: "7"}
body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord.M9::after {content: "9"}
body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord.M11::after {content: "11"}
body.selected-tonics-1.key-C-major .songwriter.roman-mode .line-chord.M13::after {content: "13"}


.circle-container .settings-bar button.circle-btn:hover,
.circle-container .settings-bar button.song-btn:hover,
.circle-container .settings-bar button.musical-notation-btn:hover {
  background-color: var(--color-menu-item-hover);
}
.circle-container.circle .settings-bar button.circle-btn:hover,
.circle-container.musical-notation-mode .settings-bar button.musical-notation-btn:hover,
.circle-container.song-mode .settings-bar button.song-btn:hover {
  background-color: var(--color-menu-item-selected-hover);
}
.circle-container.circle .settings-bar button.circle-btn,
.circle-container.musical-notation-mode .settings-bar button.musical-notation-btn,
.circle-container.song-mode .settings-bar button.song-btn {
  -border:2px solid rgba(255,255,255, 1);
  background-color: var(--color-menu-item-selected);
  color:white;
}


.circle-container {
  height: 80vh;
  box-sizing: border-box;
  padding-left:0;
  background: rgba(240,240,255,0.0);
  border-top:2px solid rgba(255,255,255, 1);
  border-bottom:2px solid rgba(255,255,255, 1);
  border-left:2px solid rgba(255,255,255, 1);
  border-right:2px solid rgba(255,255,255, 1);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  color:white;
  overflow: hidden;
  margin-bottom:14px;
}

.circle-container .songwriter {
  display:none;
  width: calc(100% - 0px);
  height: calc(100% - 34px);
  box-sizing: border-box;

  background: rgba(240,240,255,0.1);
  color:white;
  overflow: hidden;
}

.circle-container .songwriter .settings {
  height: 30px;
  width:100%;
  display:flex;
  border-bottom:2px solid white;
  justify-content: space-between;
}
.circle-container .songwriter .settings .chord-symbol-select {
  display:flex;
  font-family: system-ui;
  background-color:#2c3233;
  border-radius: 5px;
  margin-left:5px;
  overflow: hidden;
  
}

.circle-container .songwriter .settings .chord-symbol-select button {
  display:none;
  border: 0;
  cursor:pointer;
  color: white;
  background-color:var(--color-menu-background);
  line-height: 30px;
  padding-left: 5px;
  padding-right:5px;
  font-weight: bold;
}



.circle-container .songwriter .settings .icons button {
  border: 0;
  cursor:pointer;
  color: white;
  background-color:var(--color-menu-item);
  line-height: 28px;
  padding-left: 10px;
  padding-right:10px;
  font-weight: bold;
  border-radius: 0px;
  border:2px solid #0000;
  border-bottom:0px;
  border-top:0px;
}

.circle-container .songwriter .settings .icons button .menu {
  display:none;
  background:var(--color-menu-item);
  min-height:100px;
  max-height:370px;
  overflow:scroll;
  width:200px;
  margin-top:0.5px;
  margin-left:-173px;
  position:absolute;
  display:none;
  border-radius:5px;
  border:2px solid white;
  text-align: left;
  z-index:100;
  border-top-right-radius: 0px;
  box-sizing: border-box;
  font-family: monospace;
}

.circle-container .songwriter .settings .icons button.import .menu,
.circle-container .songwriter .settings .icons button.song-settings .menu,
.circle-container .songwriter .settings .icons button.save .menu {
  overflow:visible
}

.circle-container .songwriter .settings .icons button.song-settings .menu .menu-item .sub-menu .key-selector,
.circle-container .songwriter .settings .icons button.save .menu .menu-item .sub-menu .key-selector {

}

body.selected-tonics-1.key-Db-major .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-Db-major,
body.selected-tonics-1.key-Bb-minor .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-Bb-minor,
body.selected-tonics-1.key-Ab-major .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-Ab-major,
body.selected-tonics-1.key-F-minor .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-F-minor,
body.selected-tonics-1.key-Eb-major .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-Eb-major,
body.selected-tonics-1.key-C-minor .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-C-minor,
body.selected-tonics-1.key-Bb-major .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-Bb-major,
body.selected-tonics-1.key-G-minor .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-G-minor,
body.selected-tonics-1.key-F-major .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-F-major,
body.selected-tonics-1.key-D-minor .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-D-minor,
body.selected-tonics-1.key-C-major .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-C-major,
body.selected-tonics-1.key-A-minor .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-A-minor,
body.selected-tonics-1.key-G-major .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-G-major,
body.selected-tonics-1.key-E-minor .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-E-minor,
body.selected-tonics-1.key-D-major .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-D-major,
body.selected-tonics-1.key-B-minor .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-B-minor,
body.selected-tonics-1.key-A-major .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-A-major,
body.selected-tonics-1.key-Fsharp-minor .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-Fsharp-minor,
body.selected-tonics-1.key-E-major .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-E-major,
body.selected-tonics-1.key-Csharp-minor .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-Csharp-minor,
body.selected-tonics-1.key-B-major .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-B-major,
body.selected-tonics-1.key-Gsharp-minor .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-Gsharp-minor,
body.selected-tonics-1.key-Fsharp-major .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-Fsharp-major,
body.selected-tonics-1.key-Dsharp-minor .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-Dsharp-minor {
  background:var(--color-menu-item-selected);
  font-weight:bold;
}

.circle-container .songwriter .settings .icons button.song-settings .menu .menu-item .sub-menu .key-selector .icon,
.circle-container .songwriter .settings .icons button.save .menu .menu-item .sub-menu .key-selector .icon {
  display: none;
  margin-right:5px;
}

body.selected-tonics-1.key-Db-major .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-Db-major .icon,
body.selected-tonics-1.key-Bb-minor .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-Bb-minor .icon,
body.selected-tonics-1.key-Ab-major .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-Ab-major .icon,
body.selected-tonics-1.key-F-minor .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-F-minor .icon,
body.selected-tonics-1.key-Eb-major .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-Eb-major .icon,
body.selected-tonics-1.key-C-minor .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-C-minor .icon,
body.selected-tonics-1.key-Bb-major .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-Bb-major .icon,
body.selected-tonics-1.key-G-minor .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-G-minor .icon,
body.selected-tonics-1.key-F-major .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-F-major .icon,
body.selected-tonics-1.key-D-minor .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-D-minor .icon,
body.selected-tonics-1.key-C-major .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-C-major .icon,
body.selected-tonics-1.key-A-minor .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-A-minor .icon,
body.selected-tonics-1.key-G-major .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-G-major .icon,
body.selected-tonics-1.key-E-minor .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-E-minor .icon,
body.selected-tonics-1.key-D-major .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-D-major .icon,
body.selected-tonics-1.key-B-minor .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-B-minor .icon,
body.selected-tonics-1.key-A-major .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-A-major .icon,
body.selected-tonics-1.key-Fsharp-minor .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-Fsharp-minor .icon,
body.selected-tonics-1.key-E-major .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-E-major .icon,
body.selected-tonics-1.key-Csharp-minor .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-Csharp-minor .icon,
body.selected-tonics-1.key-B-major .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-B-major .icon,
body.selected-tonics-1.key-Gsharp-minor .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-Gsharp-minor .icon,
body.selected-tonics-1.key-Fsharp-major .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-Fsharp-major .icon,
body.selected-tonics-1.key-Dsharp-minor .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .key-selector.key-Dsharp-minor .icon {
  display: inline;
}

.circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu {
  display:none;
  background:var(--color-menu-item);
  width:200px;
  max-height:400px;
  overflow:scroll;
  position:absolute;
  margin-top: -10px;
  margin-left: -208px;
  display: none;
  border: 2px solid white;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  text-align: left;
  z-index:100;
  box-sizing: border-box;
  font-family: monospace;
}

.circle-container .songwriter .settings .icons button.import .menu .menu-item .sub-menu {
  width:300px;
  margin-left: -308px;
  max-height:500px;
  /* margin-top:-55px; */
}

.circle-container .songwriter .settings .icons button.import .menu {
  width:240px;
  margin-left: -213px;
  max-height:300px;
}
.circle-container .songwriter .settings .icons button.open .menu {
  width:280px;
  margin-left: -253px;
  max-height:300px;
}


body.selected-tonics-1 .circle-container .songwriter .settings .icons button .menu .menu-item:hover .sub-menu,
body.selected-tonics-1 .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu:hover {
  display:block;
  z-index:101;
}

.circle-container .songwriter .settings .icons button i {
  width: 15px;
}
.circle-container .songwriter .settings .icons button:hover {
  border:2px solid white;
  background-color: var(--color-menu-item-hover);
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom:0px;
  border-top:0px;
}

.circle-container .songwriter .settings .icons button .menu:hover,
.circle-container .songwriter .settings .icons button:hover .menu {
  display:block;
}

.circle-container .songwriter .settings .icons button .menu .menu-item:first-child {
  background:#2c3739;
  border-bottom: 1px solid white;
}

.circle-container .songwriter .settings .icons button .menu .menu-item {
  padding:8px;
  font-weight: 100;
}

.circle-container .songwriter .settings .icons button .menu .menu-item.clickable {
  font-weight: bold;
}

.circle-container .songwriter .settings .icons button .menu .menu-item.clickable:hover {
  background:var(--color-menu-item-hover);
}

.circle-container .songwriter .settings .icons button .menu .menu-item.disabled,
.circle-container .songwriter .settings .icons button .menu .menu-item.clickabl.disabled {
  opacity: 0.5;
}

.circle-container .songwriter .settings .icons button .menu .menu-item .hidden-lyrics {
  opacity: 0.01;
  height: 1px;
  width: 1px;
  margin: 0;
  padding: 0;
}

.circle-container .songwriter .settings .icons button.open .menu .menu-item .icon {
  display:none;
}

.circle-container .songwriter .settings .icons button.open .menu .menu-item .song-name {
  display:inline-block;
  max-width:calc(100% - 25px);
}

.circle-container .songwriter .settings .icons button.open .menu .menu-item .song-info {
  font-size: 8px;
  line-height:10px;
  color:rgb(192, 204, 204);
}
.circle-container .songwriter .settings .icons button.open .menu .menu-item .has-edit {
  display:none;
  font-size: 8px;
  line-height:10px;
  color:rgb(145, 198, 200);
}

.circle-container .songwriter .settings .icons button.open .menu .menu-item.unsaved .has-edit {
  display:block;
}

.circle-container .songwriter .settings .icons button .menu .menu-item.save-song,
.circle-container .songwriter .settings .icons button .menu .menu-item.discard-changes {
  opacity: 0.3;
}

.circle-container .songwriter.has-unsaved-changes .settings .icons button .menu .menu-item.save-song,
.circle-container .songwriter.has-unsaved-changes .settings .icons button .menu .menu-item.discard-changes {
  opacity: 1;
}


.circle-container .songwriter .settings .icons button .menu .menu-item.selected {
  background:var(--color-menu-item-selected);
}

.circle-container .songwriter .settings .icons button .menu .menu-item.selected:hover {
  background:var(--color-menu-item-selected-hover);
}

.circle-container .songwriter .settings .icons button .menu .menu-item .icon,
.circle-container .songwriter .settings .icons button.open .menu .menu-item.selected .icon {
  display:inline;
  float: right;
  line-height: 28px;
}

.circle-container .songwriter .settings .icons button .menu input,
.circle-container .songwriter .settings .icons button .menu textarea {
  outline: none;
  border: 0px;
  color:white;
  background-color:var(--color-menu-item-selected-hover);
  padding:8px;
  width: calc(100% - 16px);
  border:1px solid #0000;
  border-radius: 5px;
}

.circle-container .songwriter .settings .icons button .menu .menu-item:hover > input,
.circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .menu-item:hover > input,
.circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu .menu-item:hover > textarea {
  background-color:var(--color-menu-item);
  border:1px solid white;
}

.circle-container .songwriter.chordname-mode .settings .chord-symbol-select button.chord-names,
.circle-container .songwriter.roman-mode .settings .chord-symbol-select button.roman-numerals {
  background-color:#485f61;
}

.circle-container .songwriter .lyrics {
  overflow: scroll;
  height: calc(100% - 30px);
  font-family: monospace;
  padding: 20px;
  box-sizing: border-box;
}

.circle-container .songwriter .lyrics .song-name {
  background: #0000;
  padding-top:2px;
  padding-bottom:10px;
  border: 0px;
  outline:none;
  color:white;
  font-size:18px;
  width:100%;
}

.circle-container .songwriter .line {
  padding-top:5px;
  padding-bottom:5px;
  font-size:11px;
}
.circle-container .songwriter .line .line-chords {
  height:15px;
  position:relative;
  cursor:crosshair;
  height:20px;
  width:100%;
  left: -7px;
}
.circle-container .songwriter .line .line-chords .line-chord {
  position:absolute;
  cursor: pointer;
  user-select: none;
  padding-left:7px;
  padding-right:7px;
  height:20px;
  line-height:20px;
  text-align:center;
  border-radius: 5px;
}
.circle-container .songwriter .line .line-chords .line-chord.dragging {
  z-index: 10;
  background:#ffbbff00 !important;
  font-weight: bold;
  border-radius:10px;
  padding-left:15px;
  padding-right:15px;
  padding-top:10px;
  padding-bottom:10px;
  margin-left:-7.5px;
  margin-top:-10px;
}

.circle-container .songwriter .line .line-chords .line-chord.removing {
  opacity: 0.5;
}

.circle-container .songwriter .line .line-chords {

}

.circle-container .songwriter .line .line-chords .line-chord.selected {
  font-weight: bold;
  background:#77f;
  color:white;
}

.circle-container .songwriter .line .line-settings {
  height: 20px;
  width: 20px;
  float:left;
  -background:#bbf;
  margin-left:-22px;
  border-radius:100%;
  text-align:center;
  border:1px solid rgba(0,0,0,0);
  font-size:10px;
  line-height:20px;
  cursor:pointer;
}

.circle-container .songwriter .line.no-chords .line-settings {
  display:none;
}

.circle-container .songwriter .line .line-settings:hover {
  border:1px solid white;
}

.circle-container .songwriter .line .line-settings .line-settings-menu {
  background:#394749;
  
  height:200px;
  overflow: scroll;
  width:200px;
  margin-top:-10.5px;
  margin-left:2.5px;
  position:absolute;
  display:none;
  border-radius:5px;
  border:2px solid white;
  text-align: left;
}

.circle-container .songwriter .line .line-settings .line-settings-menu .key-selector:first-child,
.circle-container .songwriter .line .line-settings .line-settings-menu .key-selector:first-child:hover {
  background:#2c3739;
  border-bottom: 1px solid white;
}

.circle-container .songwriter .line:not(.line-key) .line-settings .line-settings-menu .key-selector.no-key,
.circle-container .songwriter .line.line-key.key-Db-major .line-settings .line-settings-menu .key-selector.key-Db-major,
.circle-container .songwriter .line.line-key.key-Bb-minor .line-settings .line-settings-menu .key-selector.key-Bb-minor,
.circle-container .songwriter .line.line-key.key-Ab-major .line-settings .line-settings-menu .key-selector.key-Ab-major,
.circle-container .songwriter .line.line-key.key-F-minor .line-settings .line-settings-menu .key-selector.key-F-minor,
.circle-container .songwriter .line.line-key.key-Eb-major .line-settings .line-settings-menu .key-selector.key-Eb-major,
.circle-container .songwriter .line.line-key.key-C-minor .line-settings .line-settings-menu .key-selector.key-C-minor,
.circle-container .songwriter .line.line-key.key-Bb-major .line-settings .line-settings-menu .key-selector.key-Bb-major,
.circle-container .songwriter .line.line-key.key-G-minor .line-settings .line-settings-menu .key-selector.key-G-minor,
.circle-container .songwriter .line.line-key.key-F-major .line-settings .line-settings-menu .key-selector.key-F-major,
.circle-container .songwriter .line.line-key.key-D-minor .line-settings .line-settings-menu .key-selector.key-D-minor,
.circle-container .songwriter .line.line-key.key-C-major .line-settings .line-settings-menu .key-selector.key-C-major,
.circle-container .songwriter .line.line-key.key-A-minor .line-settings .line-settings-menu .key-selector.key-A-minor,
.circle-container .songwriter .line.line-key.key-G-major .line-settings .line-settings-menu .key-selector.key-G-major,
.circle-container .songwriter .line.line-key.key-E-minor .line-settings .line-settings-menu .key-selector.key-E-minor,
.circle-container .songwriter .line.line-key.key-D-major .line-settings .line-settings-menu .key-selector.key-D-major,
.circle-container .songwriter .line.line-key.key-B-minor .line-settings .line-settings-menu .key-selector.key-B-minor,
.circle-container .songwriter .line.line-key.key-A-major .line-settings .line-settings-menu .key-selector.key-A-major,
.circle-container .songwriter .line.line-key.key-Fsharp-minor .line-settings .line-settings-menu .key-selector.key-Fsharp-minor,
.circle-container .songwriter .line.line-key.key-E-major .line-settings .line-settings-menu .key-selector.key-E-major,
.circle-container .songwriter .line.line-key.key-Csharp-minor .line-settings .line-settings-menu .key-selector.key-Csharp-minor,
.circle-container .songwriter .line.line-key.key-B-major .line-settings .line-settings-menu .key-selector.key-B-major,
.circle-container .songwriter .line.line-key.key-Gsharp-minor .line-settings .line-settings-menu .key-selector.key-Gsharp-minor,
.circle-container .songwriter .line.line-key.key-Fsharp-major .line-settings .line-settings-menu .key-selector.key-Fsharp-major,
.circle-container .songwriter .line.line-key.key-Dsharp-minor .line-settings .line-settings-menu .key-selector.key-Dsharp-minor {
  background:var(--color-menu-item-selected);
  font-weight:bold;
}

.circle-container .songwriter .line .line-settings .line-settings-menu .key-selector .icon {
  display:none;
  float:right;
  line-height:20px;
  margin-right:5px;
}

.circle-container .songwriter .line:not(.line-key) .line-settings .line-settings-menu .key-selector.no-key .icon,
.circle-container .songwriter .line.line-key.key-Db-major .line-settings .line-settings-menu .key-selector.key-Db-major .icon,
.circle-container .songwriter .line.line-key.key-Bb-minor .line-settings .line-settings-menu .key-selector.key-Bb-minor .icon,
.circle-container .songwriter .line.line-key.key-Ab-major .line-settings .line-settings-menu .key-selector.key-Ab-major .icon,
.circle-container .songwriter .line.line-key.key-F-minor .line-settings .line-settings-menu .key-selector.key-F-minor .icon,
.circle-container .songwriter .line.line-key.key-Eb-major .line-settings .line-settings-menu .key-selector.key-Eb-major .icon,
.circle-container .songwriter .line.line-key.key-C-minor .line-settings .line-settings-menu .key-selector.key-C-minor .icon,
.circle-container .songwriter .line.line-key.key-Bb-major .line-settings .line-settings-menu .key-selector.key-Bb-major .icon,
.circle-container .songwriter .line.line-key.key-G-minor .line-settings .line-settings-menu .key-selector.key-G-minor .icon,
.circle-container .songwriter .line.line-key.key-F-major .line-settings .line-settings-menu .key-selector.key-F-major .icon,
.circle-container .songwriter .line.line-key.key-D-minor .line-settings .line-settings-menu .key-selector.key-D-minor .icon,
.circle-container .songwriter .line.line-key.key-C-major .line-settings .line-settings-menu .key-selector.key-C-major .icon,
.circle-container .songwriter .line.line-key.key-A-minor .line-settings .line-settings-menu .key-selector.key-A-minor .icon,
.circle-container .songwriter .line.line-key.key-G-major .line-settings .line-settings-menu .key-selector.key-G-major .icon,
.circle-container .songwriter .line.line-key.key-E-minor .line-settings .line-settings-menu .key-selector.key-E-minor .icon,
.circle-container .songwriter .line.line-key.key-D-major .line-settings .line-settings-menu .key-selector.key-D-major .icon,
.circle-container .songwriter .line.line-key.key-B-minor .line-settings .line-settings-menu .key-selector.key-B-minor .icon,
.circle-container .songwriter .line.line-key.key-A-major .line-settings .line-settings-menu .key-selector.key-A-major .icon,
.circle-container .songwriter .line.line-key.key-Fsharp-minor .line-settings .line-settings-menu .key-selector.key-Fsharp-minor .icon,
.circle-container .songwriter .line.line-key.key-E-major .line-settings .line-settings-menu .key-selector.key-E-major .icon,
.circle-container .songwriter .line.line-key.key-Csharp-minor .line-settings .line-settings-menu .key-selector.key-Csharp-minor .icon,
.circle-container .songwriter .line.line-key.key-B-major .line-settings .line-settings-menu .key-selector.key-B-major .icon,
.circle-container .songwriter .line.line-key.key-Gsharp-minor .line-settings .line-settings-menu .key-selector.key-Gsharp-minor .icon,
.circle-container .songwriter .line.line-key.key-Fsharp-major .line-settings .line-settings-menu .key-selector.key-Fsharp-major .icon,
.circle-container .songwriter .line.line-key.key-Dsharp-minor .line-settings .line-settings-menu .key-selector.key-Dsharp-minor .icon {
  display:initial;
}

.circle-container .songwriter .line:not(.line-key) .line-settings .line-settings-menu .key-selector.no-key:hover,
.circle-container .songwriter .line.line-key.key-Db-major .line-settings .line-settings-menu .key-selector.key-Db-major:hover,
.circle-container .songwriter .line.line-key.key-Bb-minor .line-settings .line-settings-menu .key-selector.key-Bb-minor:hover,
.circle-container .songwriter .line.line-key.key-Ab-major .line-settings .line-settings-menu .key-selector.key-Ab-major:hover,
.circle-container .songwriter .line.line-key.key-F-minor .line-settings .line-settings-menu .key-selector.key-F-minor:hover,
.circle-container .songwriter .line.line-key.key-Eb-major .line-settings .line-settings-menu .key-selector.key-Eb-major:hover,
.circle-container .songwriter .line.line-key.key-C-minor .line-settings .line-settings-menu .key-selector.key-C-minor:hover,
.circle-container .songwriter .line.line-key.key-Bb-major .line-settings .line-settings-menu .key-selector.key-Bb-major:hover,
.circle-container .songwriter .line.line-key.key-G-minor .line-settings .line-settings-menu .key-selector.key-G-minor:hover,
.circle-container .songwriter .line.line-key.key-F-major .line-settings .line-settings-menu .key-selector.key-F-major:hover,
.circle-container .songwriter .line.line-key.key-D-minor .line-settings .line-settings-menu .key-selector.key-D-minor:hover,
.circle-container .songwriter .line.line-key.key-C-major .line-settings .line-settings-menu .key-selector.key-C-major:hover,
.circle-container .songwriter .line.line-key.key-A-minor .line-settings .line-settings-menu .key-selector.key-A-minor:hover,
.circle-container .songwriter .line.line-key.key-G-major .line-settings .line-settings-menu .key-selector.key-G-major:hover,
.circle-container .songwriter .line.line-key.key-E-minor .line-settings .line-settings-menu .key-selector.key-E-minor:hover,
.circle-container .songwriter .line.line-key.key-D-major .line-settings .line-settings-menu .key-selector.key-D-major:hover,
.circle-container .songwriter .line.line-key.key-B-minor .line-settings .line-settings-menu .key-selector.key-B-minor:hover,
.circle-container .songwriter .line.line-key.key-A-major .line-settings .line-settings-menu .key-selector.key-A-major:hover,
.circle-container .songwriter .line.line-key.key-Fsharp-minor .line-settings .line-settings-menu .key-selector.key-Fsharp-minor:hover,
.circle-container .songwriter .line.line-key.key-E-major .line-settings .line-settings-menu .key-selector.key-E-major:hover,
.circle-container .songwriter .line.line-key.key-Csharp-minor .line-settings .line-settings-menu .key-selector.key-Csharp-minor:hover,
.circle-container .songwriter .line.line-key.key-B-major .line-settings .line-settings-menu .key-selector.key-B-major:hover,
.circle-container .songwriter .line.line-key.key-Gsharp-minor .line-settings .line-settings-menu .key-selector.key-Gsharp-minor:hover,
.circle-container .songwriter .line.line-key.key-Fsharp-major .line-settings .line-settings-menu .key-selector.key-Fsharp-major:hover,
.circle-container .songwriter .line.line-key.key-Dsharp-minor .line-settings .line-settings-menu .key-selector.key-Dsharp-minor:hover {
  background:var(--color-menu-item-hover);
}


.circle-container .songwriter .line .line-settings .line-settings-menu .key-selector {
  width:100%;
  padding:10px;
  box-sizing: border-box;
}

.circle-container .songwriter .line .line-settings .line-settings-menu .key-selector:hover {
  background:var(--color-menu-item-hover);
} 

.circle-container .songwriter .line .line-settings:hover .line-settings-menu,
.circle-container .songwriter .line .line-settings .line-settings-menu:hover {
  display:block;
  z-index: 100;
}

/* .circle-container .songwriter .line .line-settings::before {
  content: "⚙";
  color:#aaa;
  text-align:center;
  height: 15px;
  width: 15px;
  
} */

.circle-container .songwriter .line .line-text {
  margin-top:5px;
  display:block;
  min-width:100%;
  color:white;
  background:rgba(0,0,0,0);
  border:0;
  font-family: monospace;
  font-size:11px;
}

.circle-container .songwriter .line .line-text:focus {
  outline: none;
  color:#bbf;
}

.circle-container.circle .circle-of-fifths {
  display: flex;
}

.circle-container.musical-notation-mode .circle-of-fifths,
.circle-container.musical-notation-mode .songwriter,
.circle-container.song-mode .circle-of-fifths,
.circle-container.song-mode .musical-notation-container {
  display:none;
}

.circle-container.musical-notation-mode .musical-notation-container,
.circle-container.song-mode .songwriter {
  display: block;
}

.songwrite-chord-selected .possible-chords .chord {
  cursor: pointer;
}

.minor-keys {
  width: 70%;
  height: 70%;
  background: rgba(0, 0, 0, 0.1);
  /* Slightly darker to distinguish from major keys */
}

.key-button {
  font-family:system-ui;
  position: absolute;
  width: 3.5vw;
  height: 3.5vw;
  border-radius: 50%;
  /* background-color: #fff; */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: white;
  font-weight: bold;
  font-size: 1vw;
  border: 0px solid #333;
  box-sizing: border-box;
}

.chordmatch-1 {
  border: 2px solid hsla(120, 39%, 69%, 1);
  background-color: hsla(120, 39%, 69%, 0.15);
}

.chordmatch-2 {
  border: 2px solid hsla(60, 39%, 69%, 0.4);
  background-color: hsla(60, 39%, 69%, 0.2);
}

.chordmatch-3 {
  border: 2px solid hsla(20, 39%, 69%, 0.1);
  background-color: hsla(20, 39%, 69%, 0.1);
}


.chord {
  display: flex;
  padding-bottom: 10px;
}

.chord-symbol {
  padding: 5px;
  margin: 5px;
  border-radius: 5px;
  background-color: hsla(120, 39%, 69%, 0.15);
  font-family: system-ui;
}

.chord-name {
  padding: 5px;
  margin: 5px;
  font-style: italic;
  font-family: system-ui;
}

.chord-intervals {
  display: flex;
  flex-wrap:wrap
}

.chord-intervals .interval {
  padding: 5px;
  margin-left: 15px;
  margin-right: 5px;
  border-radius: 5px;
  line-height: 20px;
  margin-bottom:5px;
}

.key-C-major .button-C-major,
.key-C-minor .button-C-minor,
.key-Csharp-major .button-Csharp-major,
.key-Csharp-minor .button-Csharp-minor,
.key-Db-major .button-Db-major,
.key-Db-minor .button-Db-minor,
.key-D-major .button-D-major,
.key-D-minor .button-D-minor,
.key-Eb-major .button-Eb-major,
.key-Dsharp-minor .button-Dsharp-minor,
.key-E-major .button-E-major,
.key-E-minor .button-E-minor,
.key-F-major .button-F-major,
.key-F-minor .button-F-minor,
.key-Fsharp-major .button-Fsharp-major,
.key-Fsharp-minor .button-Fsharp-minor,
.key-G-major .button-G-major,
.key-G-minor .button-G-minor,
.key-Gsharp-major .button-Gsharp-major,
.key-Gsharp-minor .button-Gsharp-minor,
.key-Ab-major .button-Ab-major,
.key-Ab-minor .button-Ab-minor,
.key-A-major .button-A-major,
.key-A-minor .button-A-minor,
.key-Asharp-major .button-Asharp-major,
.key-Asharp-minor .button-Asharp-minor,
.key-Bb-major .button-Bb-major,
.key-Bb-minor .button-Bb-minor,
.key-B-major .button-B-major,
.key-B-minor .button-B-minor {
  background-color: hsla(120, 39%, 49%, 0.9);
}

.chords {
  font-family: sans-serif;
  color: white;
  line-height:30px;
}

.chords .notes {
  display:flex;
}

.chords .notes .note-name {
  padding-left:4px;
  padding-right:4px;
  font-family: system-ui;
}

.chords .notes .note-name .tooltip {
  display:none;
}

.chords .notes .note-name:hover .tooltip {
  display:block;
  position:absolute;
  background-color: #ffffffdd;
  color:#000;
  padding:5px;
  border-radius:5px;
  font-weight:bold;
  text-wrap: nowrap;
  opacity: 1;
  animation: tooltip-fade-in 1s;
}

.possible-chords {
  font-family: sans-serif;
  color: white;
  padding-top:20px;
  padding-bottom:20px;
}

.transpose-btns {
  margin-top: 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-start-mic {
  background-color: #2c3233;
  color:rgba(255, 255, 255, 0.7);
  cursor: pointer;
  font-weight: bold;
  height:100%;
  margin: 0px;
  line-height: 30px;
  font-size:11px;
  box-sizing: border-box;
  padding-top:0;
  padding-bottom:0;
  border: 1px solid hsla(120, 39%, 49%, 0);
  border-radius:5px;
  display:flex;
}

.btn-start-mic::after {
  content: "⏺";
  margin-left:10px;
  font-size:18px;
  line-height: 30px;
  color:rgba(255, 0, 0, 0.4);
}

.btn-start-mic.mic-on {
  color:white;
}

.btn-start-mic.mic-on::after {
  color:rgba(255, 0, 0, 1);
}

.btn-start-mic .detected-note {
  display:block;
  padding-left:10px;
  padding-right:10px;
  width:30px;
  text-align:center;
  background: linear-gradient(to left, #333, #333 50%, #3a5 50%, #3a5 50%, #333 50%);
}

.btn-start-mic.mic-on .detected-note {
  display:block;
}


.transpose-btns .transpose-btn-container {
  background-color: #2c3233;

  /* background-color: hsla(120, 39%, 49%, 1); */
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;

  border-left: 0px solid hsla(120, 39%, 100%, 1);
  color: white;
  margin: 0px;
  margin-left: 10px;
  font-family: sans-serif;
  line-height: 30px;
  height:30px;
  font-size:11px;
  box-sizing: border-box;
  padding-left:10px;
  text-transform: uppercase;
  font-weight: bold;

}
.transpose-btns .btn-transpose {
  background-color: hsla(120, 39%, 49%, 0);
  border: 1px solid hsla(120, 39%, 49%, 0);
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  height:100%;
  font-size:15px;
  padding-left:15px;
  padding-right:15px;
}

.transpose-btns .btn-transpose.btn-transpose-down {
  margin-left:10px;

}

.transpose-btns .btn-transpose:hover {
  background-color: #4e676c;
}

.transpose-btns .btn-transpose:active {
  background-color: #53737a;

}

.controls {
  display: flex;
}

.left-container {
  height:770px;
}

.controls .chords-container {
  background-color: #2c3233;
  width: 89.7vw;
  margin-left:5vw;
  flex-grow:1;
  max-height: 440px;
  border:2px solid white;
  border-radius: 5px;
  margin-top:0px;
  margin-bottom:14px;
  overflow-y:scroll;
  padding:15px;
  box-sizing: border-box;
  min-height:390px;
  border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  border-top:0px;
}
.controls .circle-container {
  width: 89.7vw;
  margin-left: 5vw;
  overflow:hidden;
}

.controls .circle-container .circle-of-fifths {
  /* transform:scale(0.7); */
}

select {

  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='30' viewBox='0 0 30 30' width='30' xmlns='http://www.w3.org/2000/svg'><path d='M7 7l5 5 5-5z'/><path d='M0 0h30v30H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 5px;

  font-size: 11px;
  font-weight: bold;
  padding-left: 15px;
  padding-right: 15px;
  background-color: #2c3233;
  border: 0px solid #caced1;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  color: #fff;
  cursor: pointer;
  box-sizing: border-box;
  height:30px;
}

select option::before {
  content: "Selected tuning:";
  display:block;
}


select:hover {
  background-color: #4e676c;
}

select:focus-visible {
  outline: none;
  background-color: #53737a;
}


.piano .key {
  cursor: pointer;
  border: 1px solid rgb(12, 23, 28);
  box-sizing: border-box;
  height: 100%;
  z-index: 1;
}

.piano .white {
  background-color: #eef;
  min-width: 50px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  color: rgb(12, 23, 28);
}

.piano .black {
  background-color: rgb(12, 23, 28);
  width: 40px;
  height: 50%;
  position: absolute;
  margin-left: 0px;
  z-index: 2;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.piano .note-button {
  position: absolute;
  bottom: 5px;
  margin-left: 10.5px;
  text-align: center;
  border: 2px solid rgba(0, 0, 0, 0);
}

.note-button .tooltip {
  display:none;
}

.note-button:hover .tooltip {
  font-family: monospace;
  font-size:12px;
  display:block;
  position:absolute;
  background-color: inherit;
  color:#fff;
  padding:5px;
  border-radius:5px;
  font-weight:bold;
  bottom: -5px;
  right: 30px;
  text-wrap: nowrap;
  opacity: 1;
  animation: tooltip-fade-in 1s;
}

.selected-tonics-1[class^=key-Gb-] .note-Gb .tooltip .interval::after,
.selected-tonics-1[class^=key-Fsharp-] .note-Fsharp .tooltip .interval::after,
.selected-tonics-1[class^=key-Db-] .note-Db .tooltip .interval::after,
.selected-tonics-1[class^=key-Csharp-] .note-Csharp .tooltip .interval::after,
.selected-tonics-1[class^=key-Ab-] .note-Ab .tooltip .interval::after,
.selected-tonics-1[class^=key-Gsharp-] .note-Gsharp .tooltip .interval::after,
.selected-tonics-1[class^=key-Eb-] .note-Eb .tooltip .interval::after,
.selected-tonics-1[class^=key-Dsharp-] .note-Dsharp .tooltip .interval::after,
.selected-tonics-1[class^=key-Bb-] .note-Bb .tooltip .interval::after,
.selected-tonics-1[class^=key-Asharp-] .note-Asharp .tooltip .interval::after,
.selected-tonics-1[class^=key-F-] .note-F .tooltip .interval::after,
.selected-tonics-1[class^=key-C-] .note-C .tooltip .interval::after,
.selected-tonics-1[class^=key-G-] .note-G .tooltip .interval::after,
.selected-tonics-1[class^=key-D-] .note-D .tooltip .interval::after,
.selected-tonics-1[class^=key-A-] .note-A .tooltip .interval::after,
.selected-tonics-1[class^=key-E-] .note-E .tooltip .interval::after,
.selected-tonics-1[class^=key-B-] .note-B .tooltip .interval::after {
  content: "(Tonic)"
}

.selected-tonics-1[class^=key-Gb-] .note-G .tooltip .interval::after,
.selected-tonics-1[class^=key-Fsharp-] .note-G .tooltip .interval::after,
.selected-tonics-1[class^=key-Db-] .note-D .tooltip .interval::after,
.selected-tonics-1[class^=key-Csharp-] .note-D .tooltip .interval::after,
.selected-tonics-1[class^=key-Ab-] .note-A .tooltip .interval::after,
.selected-tonics-1[class^=key-Gsharp-] .note-A .tooltip .interval::after,
.selected-tonics-1[class^=key-Eb-] .note-E .tooltip .interval::after,
.selected-tonics-1[class^=key-Dsharp-] .note-E .tooltip .interval::after,
.selected-tonics-1[class^=key-Bb-] .note-B .tooltip .interval::after,
.selected-tonics-1[class^=key-Asharp-] .note-B .tooltip .interval::after,
.selected-tonics-1[class^=key-F-] .note-Gb .tooltip .interval::after,
.selected-tonics-1[class^=key-C-] .note-Db .tooltip .interval::after,
.selected-tonics-1[class^=key-G-] .note-Ab .tooltip .interval::after,
.selected-tonics-1[class^=key-D-] .note-Eb .tooltip .interval::after,
.selected-tonics-1[class^=key-A-] .note-Bb .tooltip .interval::after,
.selected-tonics-1[class^=key-E-] .note-F .tooltip .interval::after,
.selected-tonics-1[class^=key-B-] .note-C .tooltip .interval::after {
  content: "(Minor Second)"
}

.selected-tonics-1[class^=key-Gb-] .note-Ab .tooltip .interval::after,
.selected-tonics-1[class^=key-Fsharp-] .note-Gsharp .tooltip .interval::after,
.selected-tonics-1[class^=key-Db-] .note-Eb .tooltip .interval::after,
.selected-tonics-1[class^=key-Csharp-] .note-Dsharp .tooltip .interval::after,
.selected-tonics-1[class^=key-Ab-] .note-Bb .tooltip .interval::after,
.selected-tonics-1[class^=key-Gsharp-] .note-Asharp .tooltip .interval::after,
.selected-tonics-1[class^=key-Eb-] .note-F .tooltip .interval::after,
.selected-tonics-1[class^=key-Dsharp-] .note-Esharp .tooltip .interval::after,
.selected-tonics-1[class^=key-Bb-] .note-C .tooltip .interval::after,
.selected-tonics-1[class^=key-Asharp-] .note-Bsharp .tooltip .interval::after,
.selected-tonics-1[class^=key-F-] .note-G .tooltip .interval::after,
.selected-tonics-1[class^=key-C-] .note-D .tooltip .interval::after,
.selected-tonics-1[class^=key-G-] .note-A .tooltip .interval::after,
.selected-tonics-1[class^=key-D-] .note-E .tooltip .interval::after,
.selected-tonics-1[class^=key-A-] .note-B .tooltip .interval::after,
.selected-tonics-1[class^=key-E-] .note-Fsharp .tooltip .interval::after,
.selected-tonics-1[class^=key-B-] .note-Csharp .tooltip .interval::after {
  content: "(Major Second)"
}

.selected-tonics-1[class^=key-Gb-] .note-A .tooltip .interval::after,
.selected-tonics-1[class^=key-Fsharp-] .note-A .tooltip .interval::after,
.selected-tonics-1[class^=key-Db-] .note-E .tooltip .interval::after,
.selected-tonics-1[class^=key-Csharp-] .note-E .tooltip .interval::after,
.selected-tonics-1[class^=key-Ab-] .note-B .tooltip .interval::after,
.selected-tonics-1[class^=key-Gsharp-] .note-B .tooltip .interval::after,
.selected-tonics-1[class^=key-Eb-] .note-Gb .tooltip .interval::after,
.selected-tonics-1[class^=key-Dsharp-] .note-Fsharp .tooltip .interval::after,
.selected-tonics-1[class^=key-Bb-] .note-Db .tooltip .interval::after,
.selected-tonics-1[class^=key-Asharp-] .note-Csharp .tooltip .interval::after,
.selected-tonics-1[class^=key-F-] .note-Ab .tooltip .interval::after,
.selected-tonics-1[class^=key-C-] .note-Eb .tooltip .interval::after,
.selected-tonics-1[class^=key-G-] .note-Bb .tooltip .interval::after,
.selected-tonics-1[class^=key-D-] .note-F .tooltip .interval::after,
.selected-tonics-1[class^=key-A-] .note-C .tooltip .interval::after,
.selected-tonics-1[class^=key-E-] .note-G .tooltip .interval::after,
.selected-tonics-1[class^=key-B-] .note-D .tooltip .interval::after {
  content: "(Minor Third)"
}

.selected-tonics-1[class^=key-Gb-] .note-Bb .tooltip .interval::after,
.selected-tonics-1[class^=key-Fsharp-] .note-Asharp .tooltip .interval::after,
.selected-tonics-1[class^=key-Db-] .note-F .tooltip .interval::after,
.selected-tonics-1[class^=key-Csharp-] .note-F .tooltip .interval::after,
.selected-tonics-1[class^=key-Ab-] .note-C .tooltip .interval::after,
.selected-tonics-1[class^=key-Gsharp-] .note-C .tooltip .interval::after,
.selected-tonics-1[class^=key-Eb-] .note-G .tooltip .interval::after,
.selected-tonics-1[class^=key-Dsharp-] .note-G .tooltip .interval::after,
.selected-tonics-1[class^=key-Bb-] .note-D .tooltip .interval::after,
.selected-tonics-1[class^=key-Asharp-] .note-D .tooltip .interval::after,
.selected-tonics-1[class^=key-F-] .note-Ab .tooltip .interval::after,
.selected-tonics-1[class^=key-C-] .note-E .tooltip .interval::after,
.selected-tonics-1[class^=key-G-] .note-B .tooltip .interval::after,
.selected-tonics-1[class^=key-D-] .note-Fsharp .tooltip .interval::after,
.selected-tonics-1[class^=key-A-] .note-Csharp .tooltip .interval::after,
.selected-tonics-1[class^=key-E-] .note-Gsharp .tooltip .interval::after,
.selected-tonics-1[class^=key-B-] .note-Dsharp .tooltip .interval::after {
  content: "(Major Third)"
}

.selected-tonics-1[class^=key-Gb-] .note-B .tooltip .interval::after,
.selected-tonics-1[class^=key-Fsharp-] .note-B .tooltip .interval::after,
.selected-tonics-1[class^=key-Db-] .note-Gb .tooltip .interval::after,
.selected-tonics-1[class^=key-Csharp-] .note-Fsharp .tooltip .interval::after,
.selected-tonics-1[class^=key-Ab-] .note-Db .tooltip .interval::after,
.selected-tonics-1[class^=key-Gsharp-] .note-Csharp .tooltip .interval::after,
.selected-tonics-1[class^=key-Eb-] .note-Ab .tooltip .interval::after,
.selected-tonics-1[class^=key-Dsharp-] .note-Gsharp .tooltip .interval::after,
.selected-tonics-1[class^=key-Bb-] .note-Eb .tooltip .interval::after,
.selected-tonics-1[class^=key-Asharp-] .note-Dsharp .tooltip .interval::after,
.selected-tonics-1[class^=key-F-] .note-Bb .tooltip .interval::after,
.selected-tonics-1[class^=key-C-] .note-F .tooltip .interval::after,
.selected-tonics-1[class^=key-G-] .note-C .tooltip .interval::after,
.selected-tonics-1[class^=key-D-] .note-G .tooltip .interval::after,
.selected-tonics-1[class^=key-A-] .note-D .tooltip .interval::after,
.selected-tonics-1[class^=key-E-] .note-A .tooltip .interval::after,
.selected-tonics-1[class^=key-B-] .note-E .tooltip .interval::after {
  content: "(Perfect Fourth)"
}

.selected-tonics-1[class^=key-Gb-] .note-Db .tooltip .interval::after,
.selected-tonics-1[class^=key-Fsharp-] .note-Csharp .tooltip .interval::after,
.selected-tonics-1[class^=key-Db-] .note-Ab .tooltip .interval::after,
.selected-tonics-1[class^=key-Csharp-] .note-Gsharp .tooltip .interval::after,
.selected-tonics-1[class^=key-Ab-] .note-Eb .tooltip .interval::after,
.selected-tonics-1[class^=key-Gsharp-] .note-Dsharp .tooltip .interval::after,
.selected-tonics-1[class^=key-Eb-] .note-Bb .tooltip .interval::after,
.selected-tonics-1[class^=key-Dsharp-] .note-Asharp .tooltip .interval::after,
.selected-tonics-1[class^=key-Bb-] .note-F .tooltip .interval::after,
.selected-tonics-1[class^=key-Asharp-] .note-F .tooltip .interval::after,
.selected-tonics-1[class^=key-F-] .note-C .tooltip .interval::after,
.selected-tonics-1[class^=key-C-] .note-G .tooltip .interval::after,
.selected-tonics-1[class^=key-G-] .note-D .tooltip .interval::after,
.selected-tonics-1[class^=key-D-] .note-A .tooltip .interval::after,
.selected-tonics-1[class^=key-A-] .note-E .tooltip .interval::after,
.selected-tonics-1[class^=key-E-] .note-B .tooltip .interval::after,
.selected-tonics-1[class^=key-B-] .note-Fsharp .tooltip .interval::after {
  content: "(Perfect Fifth)"
}


.selected-tonics-1[class^=key-Gb-] .note-D .tooltip .interval::after,
.selected-tonics-1[class^=key-Fsharp-] .note-D .tooltip .interval::after,
.selected-tonics-1[class^=key-Db-] .note-A .tooltip .interval::after,
.selected-tonics-1[class^=key-Csharp-] .note-A .tooltip .interval::after,
.selected-tonics-1[class^=key-Ab-] .note-E .tooltip .interval::after,
.selected-tonics-1[class^=key-Gsharp-] .note-E .tooltip .interval::after,
.selected-tonics-1[class^=key-Eb-] .note-B .tooltip .interval::after,
.selected-tonics-1[class^=key-Dsharp-] .note-B .tooltip .interval::after,
.selected-tonics-1[class^=key-Bb-] .note-Gb .tooltip .interval::after,
.selected-tonics-1[class^=key-Asharp-] .note-Fsharp .tooltip .interval::after,
.selected-tonics-1[class^=key-F-] .note-Db .tooltip .interval::after,
.selected-tonics-1[class^=key-C-] .note-Ab .tooltip .interval::after,
.selected-tonics-1[class^=key-G-] .note-Eb .tooltip .interval::after,
.selected-tonics-1[class^=key-D-] .note-Bb .tooltip .interval::after,
.selected-tonics-1[class^=key-A-] .note-F .tooltip .interval::after,
.selected-tonics-1[class^=key-E-] .note-C .tooltip .interval::after,
.selected-tonics-1[class^=key-B-] .note-G .tooltip .interval::after {
  content: "(Minor Sixth)"
}

.selected-tonics-1[class^=key-Gb-] .note-Eb .tooltip .interval::after,
.selected-tonics-1[class^=key-Fsharp-] .note-Dsharp .tooltip .interval::after,
.selected-tonics-1[class^=key-Db-] .note-Bb .tooltip .interval::after,
.selected-tonics-1[class^=key-Csharp-] .note-Asharp .tooltip .interval::after,
.selected-tonics-1[class^=key-Ab-] .note-F .tooltip .interval::after,
.selected-tonics-1[class^=key-Gsharp-] .note-F .tooltip .interval::after,
.selected-tonics-1[class^=key-Eb-] .note-C .tooltip .interval::after,
.selected-tonics-1[class^=key-Dsharp-] .note-C .tooltip .interval::after,
.selected-tonics-1[class^=key-Bb-] .note-G .tooltip .interval::after,
.selected-tonics-1[class^=key-Asharp-] .note-G .tooltip .interval::after,
.selected-tonics-1[class^=key-F-] .note-D .tooltip .interval::after,
.selected-tonics-1[class^=key-C-] .note-A .tooltip .interval::after,
.selected-tonics-1[class^=key-G-] .note-E .tooltip .interval::after,
.selected-tonics-1[class^=key-D-] .note-B .tooltip .interval::after,
.selected-tonics-1[class^=key-A-] .note-Fsharp .tooltip .interval::after,
.selected-tonics-1[class^=key-E-] .note-Csharp .tooltip .interval::after,
.selected-tonics-1[class^=key-B-] .note-Gsharp .tooltip .interval::after {
  content: "(Major Sixth)"
}


.selected-tonics-1[class^=key-Gb-] .note-E .tooltip .interval::after,
.selected-tonics-1[class^=key-Fsharp-] .note-E .tooltip .interval::after,
.selected-tonics-1[class^=key-Db-] .note-B .tooltip .interval::after,
.selected-tonics-1[class^=key-Csharp-] .note-B .tooltip .interval::after,
.selected-tonics-1[class^=key-Ab-] .note-Gb .tooltip .interval::after,
.selected-tonics-1[class^=key-Gsharp-] .note-Fsharp .tooltip .interval::after,
.selected-tonics-1[class^=key-Eb-] .note-Db .tooltip .interval::after,
.selected-tonics-1[class^=key-Dsharp-] .note-Csharp .tooltip .interval::after,
.selected-tonics-1[class^=key-Bb-] .note-Ab .tooltip .interval::after,
.selected-tonics-1[class^=key-Asharp-] .note-Gsharp .tooltip .interval::after,
.selected-tonics-1[class^=key-F-] .note-Eb .tooltip .interval::after,
.selected-tonics-1[class^=key-C-] .note-Bb .tooltip .interval::after,
.selected-tonics-1[class^=key-G-] .note-F .tooltip .interval::after,
.selected-tonics-1[class^=key-D-] .note-C .tooltip .interval::after,
.selected-tonics-1[class^=key-A-] .note-G .tooltip .interval::after,
.selected-tonics-1[class^=key-E-] .note-D .tooltip .interval::after,
.selected-tonics-1[class^=key-B-] .note-A .tooltip .interval::after {
  content: "(Minor Seventh)"
}

.selected-tonics-1[class^=key-Gb-] .note-F .tooltip .interval::after,
.selected-tonics-1[class^=key-Fsharp-] .note-F .tooltip .interval::after,
.selected-tonics-1[class^=key-Db-] .note-C .tooltip .interval::after,
.selected-tonics-1[class^=key-Csharp-] .note-C .tooltip .interval::after,
.selected-tonics-1[class^=key-Ab-] .note-G .tooltip .interval::after,
.selected-tonics-1[class^=key-Gsharp-] .note-G .tooltip .interval::after,
.selected-tonics-1[class^=key-Eb-] .note-D .tooltip .interval::after,
.selected-tonics-1[class^=key-Dsharp-] .note-D .tooltip .interval::after,
.selected-tonics-1[class^=key-Bb-] .note-A .tooltip .interval::after,
.selected-tonics-1[class^=key-Asharp-] .note-A .tooltip .interval::after,
.selected-tonics-1[class^=key-F-] .note-E .tooltip .interval::after,
.selected-tonics-1[class^=key-C-] .note-B .tooltip .interval::after,
.selected-tonics-1[class^=key-G-] .note-Fsharp .tooltip .interval::after,
.selected-tonics-1[class^=key-D-] .note-Csharp .tooltip .interval::after,
.selected-tonics-1[class^=key-A-] .note-Gsharp .tooltip .interval::after,
.selected-tonics-1[class^=key-E-] .note-Dsharp .tooltip .interval::after,
.selected-tonics-1[class^=key-B-] .note-Asharp .tooltip .interval::after {
  content: "(Major Seventh)"
}


@keyframes tooltip-fade-in {
  0% {
    opacity: 0;
  }

  90% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.piano .black.is-low,
.piano .black.is-high {
  background-color: rgb(45, 54, 58);
  border: 1px solid rgb(45, 54, 58);
}

.piano .white.is-low,
.piano .white.is-high {
  opacity: 0.2;
}

.piano .black .note-button {
  color: rgb(255, 255, 255);
  margin-left: 5.5px;
}

.piano .black:hover .note-button:not(.intrvl) {
  background-color: hsl(198, 32%, 31%);
}

.piano .white .note-button.visible {
  border: 2px solid #000;
}

.piano .black .note-button.visible {
  border: 2px solid #fff;
}

.controls {
  flex-wrap: wrap;
  justify-content: center;
}

.osmd-container {
  margin-top:14px;
  width: 150px;
  height:400px;
  /* flex-grow: 1; */
  padding-left:0vw;
  box-sizing: border-box;
}

.osmd-container > div {
  transform:scale(0.8) translateX(-20%) translateY(-10%);
}

@media (max-width: 770px) {
  .transpose-btns .btn-transpose {
    padding-left:12px;
    padding-right:12px;
  }
  
  .transpose-btns .btn-transpose.btn-transpose-down {
    margin-left: 5px
  }

  .controls {

  }
  .controls .chords-container,
  .controls .circle-container {
    width: 80vw;
  }


  .chordmatch-1 {
    border-width: 1px;
  }
  
  .chordmatch-2 {
    border-width: 1px;
  }
  
  .chordmatch-3 {
    border-width: 1px;
  }

  .btn-start-mic {
    display:none;
  }
  
}

@media (max-width: 770px) {
  .guitar-neck {
    margin-left: 5vw;
    margin-top: 20px;
    width: 89.0vw;
    border-top-right-radius: 5px;
  }

  .piano {
    height: 80px;
    width: 89.0vw;
    margin-left: 5vw;
    border-bottom-right-radius: 5px;
  }

  .instrument-controls {
    width: 89.0vw;
    margin-left: 5vw;
  }

  .piano .white {
    min-width: 38px;
    width: 38px;
  }
  .piano .black {
    min-width: 34px;
    width: 34px;
  }

  .piano .note-button {
    margin-left: 3.5px;
  }

  .piano .black .note-button {
    margin-left: 1.5px;
  }

  .controls {
    flex-wrap: wrap;
    padding-left:5vw;
    padding-right:5vw;
  }
  .controls .chords-container,
  .controls .circle-container {
    width: 89.0vw;
    /* height:60vw; */
    margin-left:5vw;
    padding-right:0;
    margin-right:0;
    border-right: 2px solid white;
    border-radius: 5px;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
  }

  .controls .circle-container .circle-of-fifths {
    transform:scale(1.8) translateY(20%);
  }
  .osmd-container {
    flex-grow:1;
    width:95vw;
  }
  .osmd-container > div {
    transform:scale(0.8) translateX(-15%) translateY(-10%);
  }
}

@media (max-width: 950px) {
  .guitar-neck {
    border-top-right-radius: 5px;
  }

  .piano {
    border-bottom-right-radius: 0px;
  }
}

/* @media (max-width: 950px) and ( min-width: 770px) {
  .circle-container .songwriter .settings .icons button .menu,
  .circle-container .songwriter .settings .icons button.open .menu,
  .circle-container .songwriter .settings .icons button.import .menu {
    margin-left:-12px;
    border-top-left-radius: 0px;
    border-top-right-radius: 5px;
  }

  .circle-container .songwriter .settings .icons button .menu .menu-item .sub-menu {
    margin-left:188px;
    border-top-left-radius: 0px;
    border-top-right-radius: 5px;
  }

  .circle-container .songwriter .settings .icons button.import .menu .menu-item .sub-menu {
    margin-left:228px;
    border-top-left-radius: 0px;
    border-top-right-radius: 5px;
  }
} */

@media (min-width: 950px) {
  .guitar-neck {
    margin-left: 4vw;
    margin-top: 20px;
    width: 60vw;
    border-top-right-radius: 0px;
  }

  .piano {
    height: 90px;
    width: 60vw;
    margin-left: 4vw;
    border-bottom-right-radius: 0px;
  }

  .instrument-controls {
    width: 60vw;
    margin-left: 4vw;
  }

  .piano-only .instrument-controls,
  .piano-only .piano,
  .piano-only .guitar-neck {
    margin-left: 4vw;
    width: 60vw;
  }

  .controls {
    padding-left:0vw;
    padding-right:0vw;
  }
  .controls .chords-container {
    width: calc(100% - 4vw);
    margin-left: 4vw;
  }
  .controls .circle-container {
    width: 32.5vw;
    overflow:hidden;
    margin-left:0;
    height:calc(770px - 20px);
    box-sizing: border-box;
    padding-left:0;
    background: rgba(240,240,255,0.0);
    border-top:2px solid rgba(255,255,255, 1);
    border-bottom:2px solid rgba(255,255,255, 1);
    border-left:0px solid rgba(255,255,255, 1);
    border-right:2px solid rgba(255,255,255, 1);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    color:white;
    overflow: hidden;
    margin-top:20px;
    margin-right:0.0vw;
  }
  .controls .circle-container .circle-of-fifths {
    transform:scale(0.95) translateY(-5%);
  }
  .instruments {
    overflow:hidden;
  }
  .osmd-container {
    padding-left:0vw;
    min-width: 290px;
    width:32vw;
  }
  .osmd-container > div {
    transform:scale(1);
  }
}

@media (min-width: 1150px) {
  .controls .circle-container .circle-of-fifths {
    transform:scale(0.8) translateY(-9%);
  }
}

@media (min-width: 1250px) {
  .controls .circle-container .circle-of-fifths {
    transform:scale(0.7) translateY(-18%);
  }
}


.osmd-container path[fill^="#00000"],
.osmd-container path[stroke^="#00000"],
.osmd-container rect[fill^="#00000"],
.osmd-container rect[stroke^="#00000"],
.osmd-container text[fill^="#00000"],
.osmd-container text[stroke^="#00000"] {
  stroke: white;
  fill: white;
  /* font-family: sans-serif; */
}


.piano .key.white.octave-1,
.piano .key.white.octave-2,
.piano .key.white.octave-3,
.piano .key.white.octave-4,
.piano .key.white.octave-5,
.piano .key.white.octave-6,
.piano .key.white.octave-7 {
  background-color:#eaeaff;
}

.piano .key.white.octave-1::after,
.piano .key.white.octave-2::after,
.piano .key.white.octave-3::after,
.piano .key.white.octave-4::after,
.piano .key.white.octave-5::after,
.piano .key.white.octave-6::after,
.piano .key.white.octave-7::after {
  color:rgba(0,0,190,0.2);
  margin-left:7px;
  line-height:25px;
  font-size: 15px;
  font-weight: bold;
  font-family: monospace;
}

.piano .key.white.octave-1::after { content: "1"; }
.piano .key.white.octave-2::after { content: "2"; }
.piano .key.white.octave-3::after { content: "3"; }
.piano .key.white.octave-4::after { content: "4"; }
.piano .key.white.octave-5::after { content: "5"; }
.piano .key.white.octave-6::after { content: "6"; }
.piano .key.white.octave-7::after { content: "7"; }

.piano-only .piano .white .note-button {
  bottom:15px;
}


.chord .chordTooltip {
  display: none;
  position: absolute;
  background-color: #1f2324dd;
  border: 2px solid white;
  border-radius: 5px; 
  padding:10px;
  z-index:10;
  animation: tooltip-fade-in 1s;
  font-family: system-ui;
}

.chord .chordTooltip .name {
  font-weight: bold;
}

.chord:hover .chordTooltip {
  display: block;
}

.highlighted-interval {
  opacity:0.4;
  filter: brightness(0.8)
}

.highlighted-interval.I-1P {
  opacity:1;
}

.note-button.visible {
  filter: brightness(1.2)
}