:root {
    --octave-width: 120px;
    --octave-height: 100px;
    --black-key-height: 65px;
    --black-key-height-offset: -65px;
    --octave-width-mobile: 100px;
    --octave-height-mobile: 80px;
    --black-key-height-mobile: 50px;
    --black-key-height-offset-mobile: -50px;
  
    --left-hand-color: #016162;
    --active-key-color: #6fd0c5;
    --hilite_left2: #009dc4;
    --hilite_left: #0066cc;
    /* --hilite_active2:#7dc8f7; */
    --hilite_active2: #bfed20;
    --hilite_active3: #bff311;
    --hilite_active4: #bfdc00;
    --hilite_active: #00cccc;
    --hilite_optional: orange;
    --hilite_optional2: #ff6600;
    --border-width: 0.01rem;
  }
  
  body {
      margin: 0;
  }
  
  .piano {
    width: calc(var(--octave-width) * 6 + 20px);
    margin: 0 auto;
  }
  
  .octave {
    width: var(--octave-width);
    display: inline-grid;
    background: #044;
  }
  
  .octave-offset {
    margin-left: -0.3rem;
  }
  
  
  
  .keys-black {
    position: relative;
    display: grid;
    z-index: 2;
    /* grid-template-columns: 1.2fr 1.2fr 0.78fr 0.78fr 1.2fr 0.78fr 0.78fr 1.2fr 1.2fr 1.2fr 1.2fr 0.78fr 0.78fr 1.2fr 0.78fr 0.78fr 1.2fr 0.78fr 0.78fr 1.2fr 1.2fr; */
    /* grid-template-columns: 1.25fr 1.25fr 0.725fr 0.725fr 1.25fr 0.725fr 0.725fr 1.25fr 1.25fr 1.25fr 1.25fr 0.725fr 0.725fr 1.25fr 0.725fr 0.725fr 1.25fr 0.725fr 0.725fr 1.25fr 1.25fr; */
    width: var(--octave-width);
    grid-template-rows: var(--black-key-height);
    gap: 0px 0px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1.4fr 1.4fr 0.56fr 0.56fr 1.4fr 0.56fr 0.56fr 1.4fr 1.4fr 1.4fr 1.4fr 0.56fr 0.56fr 1.4fr 0.56fr 0.56fr 1.4fr 0.56fr 0.56fr 1.4fr 1.4fr;
    grid-auto-flow: row;
    grid-template-areas: ". . accCD accCD . accDE accDE . . . . accFG accFG . accGA accGA . accAB accAB . .";
  }
  
  .accCD {
    grid-area: accCD;
  }
  
  .accDE {
    grid-area: accDE;
  }
  
  .accFG {
    grid-area: accFG;
  }
  
  .accGA {
    grid-area: accGA;
  }
  
  .accAB {
    grid-area: accAB;
  }
  
  .key.black {
    background: #222;
    border-radius: 0 0 4px 4px;
    border: 0.02rem solid #222;
  }
  
  .key.white {
    background: #fff;
    border: 1px solid #444;
    border-radius: 0 0 4px 4px;
  }
  
  .key {
    cursor: pointer;
  }
  
  .key:active {
    /*   margin:-0.05rem 0.05rem 0.05rem -0.05rem; */
  }
  
  .key.C:active {
    /*   margin:0.0rem 0.0rem 0.0rem 0.0rem; */
  }
  
  .key:active {
    background: #ffff00;
    border: var(--border-width) solid #444;
  }
  
  .key.white.active {
    background: #ccff00;
    border: var(--border-width) solid #444;
  }
  .key.white.activeL {
    background: dodgerblue;
    border: var(--border-width) solid #444;
  }
  .key.white.activeO {
    background: orange;
    border: var(--border-width) solid #444;
  }
  .key.black.active {
    background: #ccff00;
    border: var(--border-width) solid #444;
  }
  .key.black.activeL {
    background: dodgerblue;
    border: var(--border-width) solid #444;
  }
  .key.black.activeO {
    background: orange;
    border: var(--border-width) solid #444;
  }
  .key.inactive {
    background: white;
    border: var(--border-width) solid #444;
  }
  .key.inactive-blk{
    background: #444;
    border: var(--border-width) solid #444;
  }
    
  .key.active-left {
    background: #4fa83d;
    border: var(--border-width) solid #444;
  }
  
  .key.optional {
    background: var(--hilite_optional);
    border: var(--border-width) solid #444;
  }
  
  .keys-white {
    display: grid;
    position: relative;
    z-index: 1;
    margin-top: var(--black-key-height-offset);
    width: var(--octave-width);
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: var(--octave-height);
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas: "C C C D D D E E E F F F G G G A A A B B B";
  }
  .keys-black {
    margin-left: -3px;
  }
  
  .C {
    grid-area: C;
  }
  
  .D {
    grid-area: D;
  }
  
  .E {
    grid-area: E;
  }
  
  .F {
    grid-area: F;
  }
  
  .G {
    grid-area: G;
  }
  
  .A {
    grid-area: A;
  }
  
  .B {
    grid-area: B;
  }
  
  button {
    cursor: pointer;
    text-align: center;
  }
/*   
  button.active,
  button:active,
  button:focus {
    border: var(--border-width) solid #444;
    outline: rgba(225, 225, 225, 0);
    background: var(--hilite_active4);
    background: -moz-linear-gradient(45deg, var(--hilite_active4) 0%, var(--hilite_active2) 100%);
    background: -webkit-linear-gradient(45deg, var(--hilite_active4) 0%, var(--hilite_active2) 100%);
    background: linear-gradient(45deg, var(--hilite_active4) 0%, var(--hilite_active2) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--hilite_active4)', endColorstr='var(--hilite_active2)', GradientType=1);
    ;
  }
  
  button.activeL {
    border: var(--border-width) solid var(--hilite_left);
    outline: rgba(225, 225, 225, 0);
    background: var(--hilite_left);
    background: -moz-linear-gradient(45deg, var(--hilite_left) 0%, var(--hilite_left2) 100%);
    background: -webkit-linear-gradient(45deg, var(--hilite_left) 0%, var(--hilite_left2) 100%);
    background: linear-gradient(45deg, var(--hilite_left) 0%, var(--hilite_left2) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--hilite_left)', endColorstr='var(--hilite_left2)', GradientType=1);
  
  }
  
  button.activeO {
    border: var(--border-width) solid var(--hilite_left);
    outline: rgba(225, 225, 225, 0);
    background: var(--hilite_optional);
    background: -moz-linear-gradient(45deg, var(--hilite_optional) 0%, var(--hilite_optional2) 100%);
    background: -webkit-linear-gradient(45deg, var(--hilite_optional) 0%, var(--hilite_optional2) 100%);
    background: linear-gradient(45deg, var(--hilite_optional) 0%, var(--hilite_optional2) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--hilite_optional)', endColorstr='var(--hilite_optional2)', GradientType=1);
  }
   */
  * {
    font-family: sans-serif;
    font-size: 1.1rem;
  }
  
  body {
    background: #066;
  }
  
  h1 {
    font-size: 1.5rem;
  }
  
  select {
    width: 80px;
  }
  
  .inlblk {
    display: inline-block;
  }
  
  main {
    width: 600px;
    margin: 1rem auto;
    background: #fff;
    padding: 1rem;
    line-height: 1.5;
    text-align: center;
    border-radius: 0.5rem;
    border: 1px solid #aaa;
  }
  
  label {
    font-weight: bold;
  }
  
  .group {
    background: #ddd;
    line-height: 1.8;
    border-radius: 0.5rem;
    border: 1px solid #aaa;
    padding: 0.25rem;
    display: inline-block;
    line-height: 1.5;
  }
  
  .form {
    margin: 0.5rem;
    line-height: 1.5;
  }
  
  .spacer {
    height: 15px;
  }
  
  input[type="text"] {
    width: 200px;
  }
  
  .title {
    padding: 1rem;
  }
  
  #songinfo {
    width: 90%;
  }
  #show_Array {
      width: 150px;
      margin: 0 auto;
  }
  
  #show_chordArr {
      width: 250px;
  }
  
      button {
        cursor: pointer;
        text-align: center;
      }
  
      button.active,
      button:active,
      button:focus {
        border: var(--border-width) solid #444;
        outline: rgba(225, 225, 225, 0);
        background: var(--hilite_active4);
        background: -moz-linear-gradient(45deg, var(--hilite_active4) 0%, var(--hilite_active2) 100%);
        background: -webkit-linear-gradient(45deg, var(--hilite_active4) 0%, var(--hilite_active2) 100%);
        background: linear-gradient(45deg, var(--hilite_active4) 0%, var(--hilite_active2) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--hilite_active4)', endColorstr='var(--hilite_active2)', GradientType=1);
        ;
      }
  
      button.activeL {
        border: var(--border-width) solid var(--hilite_left);
        outline: rgba(225, 225, 225, 0);
        background: var(--hilite_left);
        background: -moz-linear-gradient(45deg, var(--hilite_left) 0%, var(--hilite_left2) 100%);
        background: -webkit-linear-gradient(45deg, var(--hilite_left) 0%, var(--hilite_left2) 100%);
        background: linear-gradient(45deg, var(--hilite_left) 0%, var(--hilite_left2) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--hilite_left)', endColorstr='var(--hilite_left2)', GradientType=1);
  
      }
  
      button.activeO {
        border: var(--border-width) solid var(--hilite_left);
        outline: rgba(225, 225, 225, 0);
        background: var(--hilite_optional);
        background: -moz-linear-gradient(45deg, var(--hilite_optional) 0%, var(--hilite_optional2) 100%);
        background: -webkit-linear-gradient(45deg, var(--hilite_optional) 0%, var(--hilite_optional2) 100%);
        background: linear-gradient(45deg, var(--hilite_optional) 0%, var(--hilite_optional2) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='var(--hilite_optional)', endColorstr='var(--hilite_optional2)', GradientType=1);
      }
  
      * {
        font-family: sans-serif;
        font-size: 1.1rem;
      }
  
      body {
        background: #066;
      }
  
      h1 {
        font-size: 1.5rem;
      }
  
      select {
        width: 80px;
      }
  
      .inlblk {
        display: inline-block;
      }
  
      main {
        width: 880px;
        margin: 0.5rem auto;
        background: #fff;
        padding: 1rem;
        line-height: 1.5;
        text-align: center;
        border-radius: 0.5rem;
        border: 1px solid #aaa;
      }
  
      label {
        font-weight: bold;
      }
  
      .group {
        background: #ddd;
        line-height: 1.8;
        border-radius: 0.5rem;
        border: 1px solid #aaa;
        padding: 0.25rem;
        display: inline-block;
        line-height: 1.5;
      }
  
      .form {
        margin: 0.5rem;
        line-height: 1.5;
      }
  
      .spacer {
        height: 15px;
      }
  
      input[type="text"] {
        width: 200px;
      }
  
      .title {
        padding: 1rem;
      }
  
      #songinfo {
        width: 90%;
      }
  
      .title_code {
        background: #ccc;
        border-radius: 0 0 0.5rem 0.5rem;
        border: 2px solid #055;
        padding: 0.5rem;
      }
  
      .create_code {
        background: #ddd;
        border-radius: 0 0 0.5rem 0.5rem;
        border: 2px solid #055;
        padding: 0.5rem;
      }
  
      .showcode {
        background: #aaa;
        border-radius: 0 0 0.5rem 0.5rem;
        border: 2px solid #055;
        padding: 0.5rem;
      }
  
      h2.code  {
        background: #066;
        width:calc(100%-1);
        font-size: 0.8rem;
        color:#ccc;
        font-weight: normal;
        margin: 0 auto;
        border: 2px solid #055;
        padding: 0.001rem;
        margin-top: -0.5rem;
        color: #044;/*Use Darker Color*/
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
        font-weight: bold;
        text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
        border-radius: 0.5rem 0.5rem 0 0;
        cursor:pointer;
      }
  
      .roundedAll {
        border-radius: 0.5rem 0.5rem 0.5rem 0.5rem!important;
      }
      .roundedTop {
        border-radius: 0.5rem 0.5rem 0 0;
      }
  
  .expand,
  .contract {
    float:right;
    margin-right:10px;
    margin-top: -2px;
    z-index: 0;
  }
  
  .no-select {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
  }

  .none {
    display:none;
  }
  
  #section { 
    width:150px;
    height:30px;
  }