* {
  box-sizing: border-box;
}

html {
  font-size: 10px;
}

body {
  background-color: #FFFFFF;
  color: #0A0A0A;
  font-size: 1.5rem;
  font-weight: 400;
  margin-left: 10%;
  margin-right: 10%;
}
form {
  margin: 0 auto;
  width: 100%;
  padding: 1rem;
}
ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
textarea {
  font: 1.5rem sans-serif;
  width: 300px;
  height: 150px;
  box-sizing: border-box;
  border: 1px solid #0A0A0A;
}
label {
  margin-right: 2px;
}
h1 {
  text-align: center;
}
p {
  margin-bottom: .2rem;
}

button, .bigButton, .bigSelect, .medButton {
  font-weight: 600;
  font-size: 1.5rem;
  margin: 2px;
}
.bigButton {
  width: 100%;
  height: 3rem;
}
.medButton {
  width: 50%;
  height: 3rem;
}

select, .bigSelect, .medSelect, .smallSelect {
  font-size: 1.4rem;
  margin: .2rem;
  font-weight: 400;
}
.bigSelect {
  width: 23rem;
}
.medSelect {
  width: 10rem;
}
.smallSelect {
  width: 5rem;
}

/* fb/table-related styling */
table {
  table-layout: fixed;
  border-collapse: collapse; /* collapse cell borders into 1 */
  border-spacing: 0;  /* remove spacing between cells */
  margin: 0 auto; /* this centers the table | center the table | center table */
}
th {
  background-color: #D2B48C;  /* tan for fb */
  position: relative;
  left: 1.6rem; /* offset for th content (e.g., string name, tuners) */
}
tbody{
  margin: 5px 5px;
}
td, .openFret, .openFret1, .emptyCol, .emptyCol1, .nut, .emptCell {
  border: solid thin;
  border-color: #8D918D;  /* gunmetal gray for frets */
  border-right-color: #8D918D;  /* gunmetal gray for strings */
  height: 3rem;
  width: 3.5rem;
  background-color: #D2B48C;  /* tan for fb */
}
.lgndHdr, .lgndBdy {
  background-color: #D2B48C;  /* tan for fb */
  position: static;
  border-color: #0A0A0A;
  border: solid thin;
  padding: .5rem;
  font-size: 1.2rem;
  font-weight: 300;
  width: 10rem;
}
.lgndHdr {
  font-weight: bolder;
}
.strngNmbrs {
  border-top: none;
  border-right: none;
  border-left: none;
  background-color: transparent;
}
.strngNtes {
  background-color: #D2B48C;  /* tan for fb */
}
.tuneBtn {
  font-weight: 600;
  font-size: 1.2rem;
  width: 3rem;
  text-align: center;
  font-size: 2rem;
  radius: 10;
}
  .styled {
      border: 0;
      border-radius: 10px;
      line-height: 2.5;
      padding: 0;
      font-size: 1rem;
      text-align: center;
      color: #0A0A0A;
      font-weight: 800;
      background-color: #FFFFFF;
      background-image: linear-gradient(to top left,
                                        rgba(0, 0, 0, .2),
                                        rgba(0, 0, 0, .2) 30%,
                                        rgba(0, 0, 0, 0));
      box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                  inset -2px -2px 3px rgba(0, 0, 0, .6);
  }
  .styled:hover {
      /* background-color: rgba(255, 0, 0, 1); */
      background-color: #8D918D;  /* gunmetal gray for strings */
  }
  .styled:active {
      box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
                  inset 2px 2px 3px rgba(0, 0, 0, .6);
  }

.openFret, .openFret1, .emptyCol, .emptyCol1, .nut {
  background-color: transparent;
}
.openFret, .openFret1 {
  border-top: none;
  border-right: solid thin #8D918D;
  border-left: none;
  border-bottom: none;
  padding-bottom: .7rem;  /* this padding pushes the lowest note up a bit to */
                          /* match the position of other "open fret" notes */
  height: 5rem;
}
.openFret1 {
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom: none;
}
.nut {  /* this is placed on the fb between the lowest and highest strings */
  border-top: none;
  border-right: solid thick #8D918D;
  border-left: none;
  border-bottom: none;
  border-bottom: 4mm ridge #0A0A0A;
}
.emptyCol {
  border-left: none;
  border-top: none;
  border-bottom: none;
}
.emptyCol1 {
  border-right: none;
  border-top: none;
  border-bottom: none;
}
.emptCell {
  border: none;
  background-color: transparent;
  height: 3rem;
  width: 1rem;
}

/* flex stuff */
.container {
  width: auto;
  height: auto;
  margin: auto;
}
.row {
  display: flex;
}
.col, .col-3, .col-4, .col-6, .col-8, .col-9, .col-12 {
  flex-shrink: 1;
  flex-grow: 1;
  flex-basis: auto;
  margin: .2rem;
  padding: .3rem;
  border: #000 1px solid;
}
.col-3 {
  width: 25%;
}
.col-4 {
  width: 33.333%;
}
.col-6 {
  width: 50%;
}
.col-8 {
  width: 66.666%;
}
.col-9 {
  width: 75%;
}
.col-12 {
  width: 100%;
}
.noBdr {
  border: 0;
}

.alignRight {
  text-align: right;
}
.alignLeft {
  text-align: left;
}
.alignCenter {
  text-align: center;
}

/* Control visibility of extended chord options */
#fb0_majOpts {
  display: block;
}
#fb0_minOpts {
  display: none;
}
#fb0_augOpts {
  display: none;
}
#fb0_dimOpts {
  display: none;
}
#fb0_sus2Opts {
  display: none;
}
#fb0_sus4Opts {
  display: none;
}

/* Actual notes circle-related stuff */
.A, .Asharp, .B, .C, .Csharp, .D, .Dsharp, .E, .F, .Fsharp, .G, .Gsharp,
.openNote {
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
  border: none;
  padding: 0;
  display: inline-block;
  position: relative;
  left: 2.2rem; /* offset to place on "string" */
  top: .2rem; /* offset to place near "fret" */
  text-align: center;
  color: white; /* color for text denoting note name */
  font-size: 1.2rem;
  /* default background color */
  background-color: #0A0A0A;  /* jet black */
}
.noNote { /* the "X" above strings that are not played */
  display: inline-block;
  position: relative;
  left: 2.8rem; /* offset to place on "string" */
  top: .4rem; /* offset to place near "fret" */
  text-align: center;
  color: #0A0A0A; /* color for text denoting note name */
  font-size: 1.6rem;
  font-weight: bolder;
}
.openNote {
  background-color: #8D918D;  /* gunmetal gray for strings */
  color: #0A0A0A;
  font-size: 1.6rem;
  font-weight: bolder;
}
.B {
  background-color: #7100FF;
}
.C {
  background-color: #000FFF;
}
.Csharp {
  background-color: #008EFF;
}
.D {
  background-color: #00FFF0;
  color: #0A0A0A;
}
.Dsharp {
  background-color: #00FF71;
  color: #0A0A0A;
}
.E {
  background-color: #0FFF00;
  color: #0A0A0A;
}
.F {
  background-color: #8EFF00;
  color: #0A0A0A;
}
.Fsharp {
  background-color: #FFF000;
  color: #0A0A0A;
}
.G {
  background-color: #FF7100;
}
.Gsharp {
  background-color: #FF000F;
}
.A {
  background-color: #FF008E;
}
.Asharp {
  background-color: #F000FF;
}

.hideTunersHere {
  visibility: hidden;
}

.logoImg {
  width: 250px;
}

#fb0_fb {
  visibility: hidden;
}

/* the following decreases the size of the Chord Notes fb */
#notesfb {
  transform: scale(.8);
}

#fb0_notes_strng8_fret0, #fb0_notes_strng7_fret0,
#fb0_notes_strng6_fret0, #fb0_notes_strng5_fret0,
#fb0_notes_strng4_fret0, #fb0_notes_strng3_fret0,
#fb0_notes_strng2_fret0, #fb0_notes_strng1_fret0,
#fb0_notes_strng0_fret0 {
  border-right: none;
}

#fb0_setTng {
  background-color: #8D918D;  /* gunmetal gray for strings */
  display: none;   /* this hides the element and the space it takes up */
}
#chordMapTitleRow {
  display: none;
  font-weight: 600;
  font-size: 1.8rem;
}

[id*="fb0_strng1"] {
  border-right-width: .25em;
}
[id*="fb0_strng2"] {
  border-right-width: .3em;
}
[id*="fb0_strng3"] {
  border-right-width: .35em;
}
[id*="fb0_strng4"] {
  border-right-width: .4em;
}
[id*="fb0_strng5"] {
  border-right-width: .45em;
}
[id*="fb0_strng6"] {
  border-right-width: .5em;
}
[id*="fb0_strng7"] {
  border-right-width: .55em;
}
[id*="fb0_strng8"] {
  border-right-width: .8em;
}


@media (max-width: 900px) {
  html {
    font-size: 10px;
  }
  body {
    margin-left: 5px;
    margin-right: 5px;
  }
  .row {
    display: block;
  }
  [class*="col-"] {
    width: 100%;
  }
}