:root {
  /* --string: url("data:image/gif;base64,R0lGODdhAgAIAOMQAB0aFSUfDyooKTUxJkA6Gk9EJFlPLFRRSGtnZnNpUHRvXIF3bY+Ifp6Xh7Gunby4rywAAAAAAgAIAAAEDHAERV5xpiW20BFABAA7"); */
  --string:url(../img/guitar-string-3.png);
  --main-bg-color:#057;
  --fret-bg:#a7882c;
  /* --populated: linear-gradient(to bottom right, #c9ffa2, #4cb7a5,#66ff00); */
  /* --populated: linear-gradient(to bottom right, #93c572, #a6d608, #c9ffa2); */
  --populated:rgb(161, 21, 166);
  --populated2:rgb(21, 43, 166);
  --note-color:#eee;
  --container-width:calc(25px*15);
  --container-width-plus:calc(27px*15);
  --container-width-plus-adjusted:calc(27px*15-20px);
  --adjusted-container-width:80%;
}
body {
  /* background-color: #000; */
  background: url(../img/acoustic-blue.jpg) no-repeat center center #00446605;
  /* background-size:cover;
  width:100vw;
  width:100vh; */
  /* background-position:center left; */
  /* object-fit: fit; */
  background-size: auto 100%;
  /* background-size: cover; */
}
* {
  box-sizing: border-box;
  font-family: sans-serif;
}
.container {
  background: var(--main-bg-color);
  display:flex;
  flex-direction:column;
  flex-basis:var(--container-width);
  max-width:var(--container-width-plus);
  text-align: center;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  border-radius:15px;
  max-height:1000px;
  overflow: scroll;
}
h3.title {
  padding-top: 5px;
}
main {
  width:var(--container-width);
  margin: 0 auto;
  max-width:var(--container-width);
  max-height:1000px;
  overflow: scroll;
}
.fretboard {
  /* overflow:hidden; */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  /* flex-basis: 100%; */
  width: var(--container-width);
  margin: 0 auto;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.neck {
  /*background-image:url(../img/fretboard-v2.0.3.jpg);*/
  background-image:url(../img/fretboard-v2.0.4.jpg);
  background-position-x: 94px;
  background-position-x: 22px;
  background-position-y: 0;
  width: 474px;
  width:var(--container-width);
  height: 132px;
  /* background-size */
}
.small _{
  font-size: 0.65rem;
}
/* section.tab {
  background: var(--fret-bg);
} */
.fret,
.str-name {
  /* background: var(--fret-bg); */
  display: flex;
  flex-direction: row;
  height: 22px;
  width: 22px;
  /* background-image:var(--string); */
  background-size: 6px;
  /* border: 0.5px solid rgb(98, 83, 64); */
  text-align: center;
  justify-content: center;
  align-items: center;
}
.populated::before {
  content: attr(data-before);
  font-size: 0.75rem;
  font-weight: bold;
  color:var(--note-color);
  z-index: 2;
}
.string {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height:22px;
  flex-basis: 100%;
  text-align: center;
  justify-content: center;
  align-items: center;
  background-size:cover;
}
.string-bg {
  width: 22px;
  height: 22px;
  /* background:var(--string); */
  background-size: 22px;
}
.fret.root {
  /* background-color: white; */
  width: 22px;
  height: 22px;
  /* background-image:var(--string); */
  background-size: 22px;
}
.fret.root.populated {
  /* background:var(--populated); */
  color:white;
  z-index: 2;
}
.populated {
  width: 22px;
  height: 22px;
  background: var(--populated);
  border-radius: 50px;
  font-weight: bold;
  border:1px solid #600;
  text-shadow:0.5px 0.5px #555, 1px 1px #333, 1.5px 1.5px #111;
  color:#fff;
  z-index: 5;
}
/* .populated:nth-of-type(even) {
  background: var(--populated2);
}
.populated:nth-of-type(odd) {
  background: var(--populated);
} */

#scroller {
  display:flex;
  flex-direction:column;
  /* flex-basis:100%; */
  text-align: center;
  justify-content: flex-start;
  align-items: center;

  overflow-y:scroll;
  overflow-x:hidden;
  background: #444;
  border:1px blue solid;
  max-width:var(--container-width); /*-plus*/
  margin: 0 auto;
  max-height:600px;
  height:600px;
}

.str-name {
  border-radius: 50%;
  background: #000;
  color: #fff;
}
.marker {
  display:flex;
  flex-direction:row;
  flex-basis:100%;
  text-align: center;
  justify-content: center;
  align-items: center;
  border:0px solid #444;
  font-size: 0.5rem;
  color:yellow;
  height: 12px;
  background: #000;
  font-weight: bold;
}
.fret-marker {
  width: var(--container-width);
  display:flex;
  flex-direction:row;
  flex-basis:100%;
  text-align: center;
  justify-content: center;
  align-items: center;
  border:0px solid #444;
  font-size: 0.5rem;
  color:yellow;
  height: 12px;
  background: #000;
  font-weight: bold;  
}
.nada { color:#111; }
aside {
  display: flex;
  flex-direction: row;
  flex-basis: 100%;
  text-align: center;
  justify-content: center;
  align-items: center;
  color: white;
  gap: 5px;
}
aside a {
  color: white;
}
h1 {
  font-size: 1.5rem;
  text-align: center;
  color:#fff;
  text-shadow:0.5px 0.5px #ccc, 1px 1px #aaa, 1.5px 1.5px #999, 2px 2px #777;
}
h3 {
  display: flex;
  flex-direction: row;
  flex-basis: 100%;
  text-align: center;
  justify-content: center;
  align-items: center;
  color: white;
  margin: 5px;
  background: var(--main-bg-color);
  border:1px solid var(--main-bg-color);
  margin: 0;
  padding-bottom:8px;
}
.fret {
  cursor: pointer;
}

.chord-blocks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 5px;
}
.chord-block {
  border: 2px solid #444;
  border-radius: 4%;
  background: #444;
}
.chord {
  display: flex;
  flex-direction: column;
  padding: 0.25rem;
  height: 1.5rem;
  /* border: 1px dashed blue; */
}
.tab_chord_arr {
  text-align: center;
  font-family: sans-serif;
  color: #eee;
  background: #024;
  min-width: var(--adjusted-container-width-)-20px;
  margin: 0 auto;
  margin-top: 0.2rem;
  min-height: 1.5rem;
  border-radius:10px;
  border:1px solid #555;
  overflow:scroll;
}
.spacer {
  height: 20px;
  max-height:20px;
  display:flex;
  flex-direction:row;
  flex-basis:100%;
  text-align: center;
  justify-content: center;
  align-items: center;
  background: var(--main-bg-color);
  /* border:1px dashed yellow; */
}
.row {
  display:flex;
  flex-direction:row;
  flex-basis:100%;
  width: 100%;
  text-align: center;
  justify-content: center;
  align-items: center;  
}
.chord_btns {
  width: var(--container-width-plus);
  margin:0 auto;
  text-align: center;
}

.btn {
  font-size:0.75rem;
  font-kerning: -3px;
}
#createChordBtn {
  font-size: 0.75rem;
  color:#057;
}
.btn:nth-child(odd) {
  background: #785023;
  border:1px solid #97682c;
  border-radius: 5px;
  color:#ddd;
  transition:0.75s color;
  color:#aaa;
  cursor:pointer;
  text-align: center;
}
.btn:nth-child(even) {
  background: #556906;
  border:1px solid #727565;
  border-radius: 5px;
  color:#ddd;
  margin: 2px;
  transition:0.75s color;
  color:#aaa;
  cursor:pointer;
  text-align: center;
}

.btn_D,
.btn_Dm,
.btn_F,
.btn_Fm,
.btn_A,
.btn_Am {
  background: #57440c;
  border:1px solid #97682c;
  border-radius: 5px;
  color:#ddd;
  margin: 2px;
  transition:0.75s color;
}
.btn_As,
.btn_Cs,
.btn_Ds,
.btn_Es,
.btn_Fs,
.btn_Gs {
  background: #556906;
  background: #273a81;
  border:1px solid #727565;
  border-radius: 5px;
  color:#ddd;
  margin: 2px;
  transition:0.75s color;

}

.btn_C,
.btn_Cm,
.btn_E,
.btn_Em,
.btn_G,
.btn_Gm,
.btn_B,
.btn_Bm {
  background: #785023;
  border:1px solid #97682c;
  border-radius: 5px;
  color:#ddd;
  margin: 2px;
}
.btn {
  padding: 3px 4px;
  margin: 0.025px;
  border:#444 solid 1px;
}
.btn:nth-child(even) {
  background: #273a81;

}
.btn:nth-child(odd) {
  background: #220878;
}
.btn:hover {
  transition:0.5s color;
  color:#fff;
  border:#777 solid 1px;
  filter:brightness(120%);
}
.triggers {
  width: var(--container-width);
  max-width:var(--container-width);
}
.target {
  width: var(--container-width);
  max-width: var(--container-width);
  background: var(--main-bg-color)!important;
}
button.reset {
  width:50px;
  background:var(--main-bg-color);
  border:1px solid var(--main-bg-color);
    /* margin:0 auto; */
  margin-left: -40px;
  margin-right: 20px;
  color:#dfdfdf;
  border-radius:6px;
}

.btn0 {
  border-radius:5px 0 0 5px!important;
  margin-right:0!important;
  font-size: 0.7rem;
  background-color: FireBrick!important;
  color:#fff!important;
}
.btn1 {
  border-radius:0!important;
  margin-left:0!important;
  margin-right:0!important;
  font-size: 0.7rem;
  background: blue!important;
  color:#fff!important;
}
.btn2 {
  border-radius:0 5px 5px 0!important;
  margin-left:0!important;
  font-size: 0.7rem;
  background: green!important;
  color:#fff!important;
}

aside.intro,
aside.chorus,
aside.pre-chorus,
aside.bridge,
aside.verse,
aside.outro {
  color:white;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  flex-basis:100%;
  text-align: center;
  justify-content: center;
  align-items: center;

}
/*********************************************+
**************************************************/
:root {
  --min-h: 200px;
  --reg-h: 400px;
  --max-h: 400px;
  --nav-ht: 40px;
  --min-w: 400px;
  --reg-w: 600px;
  --max-w: 800px;
  --width: clamp(var(--min-w), var(--reg-w), var(--max-w));
}
/* main { border:2px blue dashed; }
header { border:2px red dotted;}
nav { border:2px green dotted;}
section { border:4px yellow dotted;}
article { border:4px orange dotted;}
 */
body {
  font-family: sans-serif;
  border:0 solid #fff;
}
* {
  box-sizing: border-box;
/*   margin:0 auto; */
/*   padding:0; */
/*   border: 0.5px solid gray; */
}
main {
  display: flex;
  flex-direction: column;
  width: var(--width);
  margin: 0 auto;
  /* establish primary containing box */
  border-radius:20px;
  overflow: hidden;
  position: relative;
}
main > section {
  /* be pushy about consuming all space */
  block-size: 100%;
  height: clamp(var(--min-height), var(--reg-h), var(--max-height));
}
header > nav {
  height: var(--nav-ht);
  padding: 1rem;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  text-align: center;
  justify-content: center;
  align-items: center;
}
a._tab {
  height: var(--nav-ht);
  padding: 1rem;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  text-align: center;
  width: 50px;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  text-decoration: none;
}
main > header {
  /* defend against 
 needing 100% */
  flex-shrink: 0;
    background:linear-gradient(to top, #32174d, #702670, #080808);
  width: var(--width);/* fixes cross browser quarks */
  min-block-size: fit-content;
}
._tab {
    background:linear-gradient(to top, #32174d, #702670, #080808);
  transition:1s;
  color:#aaa;
}
._tab:hover {
  background:linear-gradient(to bottom, #32174d, #702670, #080808);
  background:linear-gradient(to bottom right, #32174d, #702670, #080808);
  transition:1s;
  color:#fff;
}

._tab._active {
  background:linear-gradient(to bottom, #32174d, #702670, #080808);
/*   background:linear-gradient(to bottom right, #32174d, #702670, #080808); */
  transition:1s;
  color:#fff;
}

._tabbed {
  display: none;
  height: 100%;
    background:linear-gradient(to top, #32174d, #702670, #080808);
}
._inactive {
  display:none;
}
._active {
  display: flex;
}
article {
  display: flex;
  flex-direction: row;
  flex-basis: 100%;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.insert_form {
  color: #fff;
  width:260px;
  margin: 0 auto;
  display:flex;
  flex-direction:column;
  flex-basis:100%;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.insert_form input, 
.insert_form select option {
  color: rgb(80, 80, 216);
}
.insert_form ::placeholder {
  color:#dfdfdf;
}
/* .insert_form > * {
  border:1px solid #999;
} */
.row {
  display:flex;
  flex-direction:row;
  flex-basis:100%;
  width: 100%;
  text-align: center;
  justify-content: center;
  align-items: center;

}
.insert_form label {
  display:flex;
  width: 40%;
  flex-grow:0;
  flex-shrink:1;
  text-align: center;
  justify-content: flex-start;
  align-items: center;
}
.insert_form input {
  display:flex;
  width: 60%;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.insert_form select {
  display:flex;
  width: 50%;
  text-align: center;
  justify-content: center;
  align-items: center;
}
.none {
  display: none;
}
.show_insert {
  margin-left: 10px;
  background:var(--main-bg-color);
  border:1px solid var(--main-bg-color);
  color:#dfdfdf;
  border-radius:6px;
}
.insert_form {
  background: #ccc;
  color:var(--main-bg-color);
  border-radius:10px;
  overflow:hidden;
  margin-bottom: 15px;
  margin-top: -20px;
}
span.fret_spacer {
  display: inline-block;
  width: 30px;
}
.chkbox {
  margin: 2px;
  display:inline-flex;
  flex-direction:row;

  text-align: center;
  justify-content: center;
  align-items: center;  
  width: 10px!important;
}
#all_non_accidentals {
  display:flex;
  flex-direction:row;
  /* flex-basis:100%; */
  max-width:250px;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin: 5px;
}

.shownote { padding:5px;
  border-radius:50%;
  border:1px solid #999;
  display:flex;
  flex-direction:row;
  /* flex-basis:100%; */
  text-align: center;
  justify-content: center;
  align-items: center;
 }
.green { background: green; text-shadow:0.5px 0.5px #555, 1px 1px #333, 1.5px 1.5px #111; }
.purple { background: purple;text-shadow:0.5px 0.5px #555, 1px 1px #333, 1.5px 1.5px #111;}
.red { background: red;text-shadow:0.5px 0.5px #555, 1px 1px #333, 1.5px 1.5px #111;}
.Chocolate { background: Chocolate;text-shadow:0.5px 0.5px #555, 1px 1px #333, 1.5px 1.5px #111;}
.blue { background: blue;text-shadow:0.5px 0.5px #555, 1px 1px #333, 1.5px 1.5px #111;}
.teal { background: teal;text-shadow:0.5px 0.5px #555, 1px 1px #333, 1.5px 1.5px #111;}
.DarkGoldenRod { background: DarkGoldenRod;text-shadow:0.5px 0.5px #555, 1px 1px #333, 1.5px 1.5px #111;}
.Maroon { background: Maroon;text-shadow:0.5px 0.5px #555, 1px 1px #333, 1.5px 1.5px #111;}
.Orchid { background: Orchid;text-shadow:0.5px 0.5px #555, 1px 1px #333, 1.5px 1.5px #111;}
.FireBrick { background: FireBrick;text-shadow:0.5px 0.5px #555, 1px 1px #333, 1.5px 1.5px #111;}
.transparent { background: transparent; }
.Lime { background: Lime;text-shadow:0.5px 0.5px #555, 1px 1px #333, 1.5px 1.5px #111;}
.Gold { background: Gold;text-shadow:0.5px 0.5px #555, 1px 1px #333, 1.5px 1.5px #111;}
.Aqua { background: Aqua;text-shadow:0.5px 0.5px #555, 1px 1px #333, 1.5px 1.5px #111;}
.Magenta { background: Magenta;text-shadow:0.5px 0.5px #555, 1px 1px #333, 1.5px 1.5px #111;}
.none { display:none; }






.all_notes {
  font-size: 0.75rem;
  font-weight: normal;
  border-radius: 5px;
  border:1px solid #ccc;
}
.all_notes:active,
.all_notes:hover {
  /* font-weight: bold; */
  background: purple;
  color:white;
  border:#306;
  border-radius: 5px;
}
.small_notes {
  font-weight: normal;
  border-radius: 5px;
  font-size: 0.7rem;
}
.small_notes:active,
.small_notes:hover {
  /* font-weight: bold; */
  background: purple;
  color:white;
  border:#306;
  border-radius: 5px;
}