/* Keyboard container */
.fchtmkb-container {
    width:100%;
    aspect-ratio:692/231;
    background-size: cover;
    background-image: url(/UltimateChords/HtmlFrets/assets/kb.png);
    background-repeat: no-repeat;
}

/* Container Row for black keys */
.fchtmlkb-top-row {
    display: flex;
    justify-content:flex-start;
    margin-left: calc(100% / 14 / 2);
    padding-top: 10%;
    height: 50%;
    position:relative;
    box-sizing: border-box;
}

/* individual divs for black keys */
.fchtmlkb-top-key {
    text-align: center;
    /*background-color: #CCC;*/
    padding:0;
    width: calc(100% / 13.5);
    margin:0;
    /*border: 1px solid black;*/
    box-sizing: border-box;
}

/* black key that does not exist */
.fchtmlkb-top-key-false {
    border: none;
    background-color: transparent;
}

/* the div for the note circle and content on black key */
.fchtml-top-key-circle {
    margin: 0 auto;
    padding-top: 7%;
    box-sizing: border-box;
    border-radius: 9999px;
    width:70%;
    height:70%;
    text-align: center;
    font-size: min(2vw,36px);
    color:#777;
}
/* the modifier for a select note circle on black key */
.fchtml-top-key-circle-selected {
    color:black;
    background-color: white;
}

/* the div for the note circle and content on white key */
.fchtml-bot-key-circle {
    margin: 0 auto;
    padding-top: 7%;
    box-sizing: border-box;
    border-radius: 9999px;
    width:70%;
    height:70%;
    text-align: center;
    font-size: min(2vw,36px);
    color:#777;
}

.fchtml-bot-key-circle-selected {
    color:white;
    background-color: black;
    border-radius: 9999px;
    border: 1px solid black;
}



/* Container Row for white keys */
.fchtmlkb-bottom-row {
    display: flex;
    justify-content:flex-start;
    margin-left: 0;
    padding-top: 10%;
    height: 50%;
    position:relative;
    box-sizing: border-box;
}

/* individual divs for white keys */
.fchtmlkb-bot-key {
    text-align: center;
    /*background-color: #CCC;*/
    padding:0;
    width: calc(100% / 14);
    margin:0;
    /*border: 1px solid black;*/
    box-sizing: border-box;
}




/******************* Stringed instruments section *************************/

/* Vertical Elements Stringed */
.fchtmlcontainer-v {
   --fretw: 40px;
   --freth: 45px;
   --noteradius: calc(4/5);
   --topspace: 20px;
   --notecolor: #D19319;
   position: relative;
}

/* the container for row of frets */
.fchtmlfretrow-v {
    display: flex;
    justify-content:flex-start;
}

/* a normal fret */
/* fchtmlfret-v -> fret-v */
.fret-v {
    text-align: center;
    border-bottom: 5px solid #666;
    height: var(--freth);
    background-color: #CCC;
    padding:0;
    margin:0;
    width: var(--fretw);
}

/* the first fret */
.fchtmlfret-first-v {
    background-color: #FFF;
    border-bottom: 15px solid #333;  
    margin: 0;
    height: calc(var(--freth)*2/3);
}

.fchtmlstringopenidentifier-v {
    height: var(--topspace);
    border: none;
    background-color: white;
}

.notecheck-v {
    z-index: 4;
    -webkit-appearance: none;
    appearance: none;
    width: var(--fretw);
    height: 100%;
    position:relative;
    margin:0;
    padding:0;
}

.note-v {
    border-radius: 9999px;
    border:0px solid black;
    width:calc(var(--fretw) * var(--noteradius));
    height:calc(var(--fretw) * var(--noteradius));
    z-index: 2;
    display:block;
    text-align: center;
    margin: 0 auto;
    line-height: calc(var(--fretw) * var(--noteradius));
    background-color: #D19319;
    position:relative;
    margin-top: calc( (var(--freth)  - calc(var(--fretw) * var(--noteradius)))/2) ;
    font-size:22px;
}

.notehidden-v {
    border: none;
    background-color: transparent;
}

.string-v {   
    z-index: 2;
    box-sizing: border-box;
    background-image: url(/UltimateChords/HtmlFrets/assets/string-h.png);
    background-repeat: repeat-y;
    background-origin: content-box;
    width: calc(var(--fretw)/2 - 4px);
    height: calc(100% - var(--topspace));
    display:inline-block;
    position:relative;
    margin-left: calc(var(--fretw)/2);
    margin-top: var(--topspace);
    padding:0;

}

.string-v6 {   
    z-index: 2;
    box-sizing: border-box;
    background-image: url(/UltimateChords/HtmlFrets/assets/string-h6.png);
    background-repeat: repeat-y;
    background-origin: content-box;
    width: calc(var(--fretw)/2 - 1px);
    height: calc(100% - var(--topspace));
    display:inline-block;
    position:relative;
    margin-left: calc(var(--fretw)/2 - 3px);
    margin-top: var(--topspace);
    padding:0;
}

.stringcontainer-v {
    z-index: 2;
    position: absolute;
    top:0;
    left:0;
    height: 100%;
    width:100%;
    text-align: left;
}


/* Horizontal Elements Stringed */

.fchtmlcontainer-h {
   width:100%;
   --freth: 40px;
   --noteradius: calc(4/5);
   --leftspace: 20px;
   position: relative;
}

/* the container for the string rows */
.fchtmlstring-h {
    display: flex;
    flex-direction: row;
    justify-content: center;
    position:relative;
    align-items: stretch;
}

/* a normal fret */
/* .fchtmlfret-h -> fret-h */
.fret-h {
    text-align: center;
    border-right: 5px solid #666;
    flex-grow: 2;
    flex-shrink: 2;
    flex-basis: auto;
    height: var(--freth);
    background-color: #CCC;
    padding:0;
    margin:0;
}

/* border for top fret */

.ffret-top {border-top: 1px solid black;}

/* border for botton fret */

.ffret-bot {border-bottom: 1px solid black}


/* the first fret */
.fchtmlfret-first-h {
    background-color: #FFF;
    border-right: 15px solid #333;
    flex-grow: 1;
    flex-shrink: 1;
    margin: 0;
}

/* the string note */
.fchtmlstringopenidentifier-h {
    width: var(--leftspace);
    margin:auto 0;
    border: none;
}


.note-h {
    border-radius: 9999px;
    border:0px solid black;
    width:calc(var(--freth) * var(--noteradius));
    height:calc(var(--freth) * var(--noteradius));
    z-index: 2;
    display:block;
    text-align: center;
    margin: 0 auto;
    line-height: calc(var(--freth) * var(--noteradius));
    background-color: #D19319;
    position:relative;
    margin-top: calc((var(--freth) * (1 - var(--noteradius)) / 2));
    font-size:22px;
}

.notehidden-h {
    border: none;
    background-color: transparent;
}


.notecheck-h {
    z-index: 4;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: var(--freth);
    position:relative;
    margin:0;
    padding:0;
}

.string-h {   
    z-index:1;
    box-sizing: border-box;
    background-image: url(/UltimateChords/HtmlFrets/assets/string-h.png);
    background-repeat: repeat-x;
    background-origin: content-box;
    /*width:calc(100% - var(--leftspace)) ;*/
    right: 0;
    height:4px;
    position:absolute;
    left: var(--leftspace);
    background-clip: border-box;
    /*background-position-x: 0%;
    background-position-y: 0%;*/
    margin: 0;
    margin-top: calc( (2px - calc(var(--freth) / 2)));
    padding:0;
}



.string-h6 {   
    z-index:1;
    box-sizing: border-box;
    background-image: url(/UltimateChords/HtmlFrets/assets/string-h6.png);
    background-repeat: repeat-x;
    background-origin: content-box;
    /*width:calc(100% - var(--leftspace)) ;*/
    right: 0;
    height:4px;
    position:absolute;
    left: var(--leftspace);
    background-clip: border-box;
    /*background-position-x: 0%;
    background-position-y: 0%;*/
    margin: 0;
    margin-top: calc( (0px - calc(var(--freth) / 2)));
    padding:0;
}


/* h fretball on the string */
.fretball-h {
    border-radius: 9999px;
    border:0px solid white;
    background-color: white;
    z-index: 1;
    position:relative;
    left:0px;
    top:calc(-1 * var(--freth) + 4px);
    width:0;
    height:0;
    color: white;
}

/* h fretball under the string */
.fretball-hc {
    border-radius: 9999px;
    border:0px solid white;
    background-color: white;
    z-index: 1;
    position:relative;
    left:0px;
    top:calc(-1.5 * var(--freth) + 4px);
    width:0;
    height:0;
    color: white;
}    


 /* v fretball on the string */
.fretball-v {
    border-radius: 9999px;
    border:0px solid white;
    background-color: white;
    z-index: 1;
    position:relative;
    left:0px;
    top:calc(-1 * var(--freth) + 4px);
    width:0;
    height:0;
    color: white;
}

/* v fretball after the string */
.fretball-vc {
    border-radius: 9999px;
    border:0px solid white;
    background-color: white;
    z-index: 1;
    position:relative;
    left:calc(0.5 * var(--fretw) + 2px);
    top:calc(-1 * var(--freth) + 4px);
    width:0;
    height:0;
    color: white;
}

/* media queries */
@media screen and (max-width: 900px) {
#fchtmlcontainermain-h {display:none;height:0;width:0;}
}

@media screen and (min-width: 900px) {
#fchtmlcontainermain-v {display:none;height:0;width:0;}
}


/*********** Section for buttons **********/

.fchtmlbutton, .fchtmlbuttonactive {
    display: table-cell;
    vertical-align: middle;
    color:white;
    cursor:pointer;
    border-radius:4px;
    border-color: #3399ff; 
    height: 15vh;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 16px;
    min-width:40px;
    max-width:120px;
    max-height:40px;
    margin-bottom: 8px;
}
.fchtmlbutton {background-color:#0099CC;}
.fchtmlbutton:hover {background-color:#3da1d1;}
.fchtmlbuttonactive {background-color:#009933;}
.fchtmlbuttonactive:hover {background-color:#33cc33;} 
.fchtmlspace {visibility:hidden;border:none;padding:12px 12px 12px 12px;color:white;font-size:14px;min-height:42px;cursor:default;background-color:white;}
.fchtmlbuttonhalf {
    width:40px;
}
/* modifier for vertical buttons */
.fchtmlbutton-v {
    clear: both;
}