:root {
  --dark: rgb(85, 85, 85);
  --dark: #555555;
}

body {
  background-color: #FFF;
  font-size: 14pt;
  font-family: Arial;
  color: var(--dark);
}

#corda {
  display: block;
  /* height: 350px; */
  /* width: 350px; */
}


h1 {
  font-weight: 300;
  font-weight: bold;
  color: rgb(81, 203, 238);
}

#container {
  /* padding: 5px; */
  margin: auto;
  background-color: white;
}

#selectors {
  width: fit-content;
  margin: auto;
}

#guitar-panel {
  width: fit-content;
  margin: auto;
}

#logo {
  margin-top: 42px;
}

#pick {
  display: block;
  width: 65px;
  height: 65px;
  margin-top: 25px;
}

#pick:hover {
  opacity: .6;
}

.accidentalon {
  display: inline;
}

.accidentaloff {
  display: none;
}

.spellingson {
  visibility: visible;
}

.spellingsoff {
  visibility: hidden;
}

.enharmonics {
  color: #ddd;
  cursor: pointer;
}

#alternatespelling {
  height: 30;
}

#Root {
  width: 81px;
}

#Type {
  width: 145px;
}

#Voicing {
  width: 75px;
}

#tab {
  width: 142px;
}

#note {
  width: 142px;
}

.selector {
  display: inline-block;
  text-align: center;
  height: 68px;
}

.selector>label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

#tabnote-panel {
  /* display: grid; */
  /* display: none; */
  /* grid-template-columns: 171px 156px; */
  width: fit-content;
  margin: auto;
  padding: 8px;
}

.tabNote {
  text-align: center;
  display: inline-block;
  /* height: 68px; */
}

.this {

  background: #b6ada5;

}