@font-face {
    font-family: 'Bravura';
    src: url('../Fonts/Bravura.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display:swap;
}

text {
    font-family: Bravura;
    dominant-baseline: middle;
    alignment-baseline: central;
    max-height:.8em;
    overflow-y:hidden;
}

g {
    text-anchor: middle;
    dominant-baseline: middle;
    transform-origin: center center;

}

circle {
    stroke:darkgrey;
    stroke-width:.05em;
    fill:rgba(255, 255, 255, 0.255);
}


.chord:hover {
    cursor: pointer
}

.chord:not(.sel1,.sel2,.sel3):hover > circle {
    r: 1.2em;
    fill:rgba(174, 174, 174, 0.596);
}

.chord:hover > text {
    visibility:visible;
}

.hexNode > text {
    user-select: none;
}

.hexNode > polygon {
    fill:white;
    stroke-width:.05em;
    stroke:grey;
}

.hexNode:hover {
    cursor:cell;
}

.sel > circle {
    transform-box:fill-box;
    fill:rgba(97, 97, 189, 0.556) !important;
    r: 1.2em;
}

.sel > text {
    transform-box: fill-box;
    transform-origin: center;
    fill:white;
    visibility: visible;
}



#drawing {
    width:90%;
    overflow: scroll;
}

.void {
    visibility:hidden;
}

.active > polygon {
    stroke:darkgrey;
    stroke-width:.05em;
    fill:grey !important;
}

.dark > polygon {
    fill: rgb(49, 49, 49);
}

.dark > text {
    fill:white;
}

.test > circle {
    stroke-dasharray: 3,2;
}

.test > text {
    visibility: visible !important;
}

.primary {
    background-color:rgb(144, 144, 208);
    position:relative;
    min-width:10em;
    border: 1px solid grey;
    margin-bottom: 3em;
}

.parent {
    display:flex;
    flex-direction:row;
}

h4 {
    margin:.8em;
}

.stor {
    visibility:hidden;
    display:flex;
    flex-direction:column;
    position:absolute;
    width:99%;
    max-height:20em;
    overflow-y:auto;
    overflow-x:hidden;
    border:1px solid black;
}

.primary:hover {
    background-color:rgb(100, 100, 208);
    cursor:pointer;
}

.primary:hover > .stor {
    visibility:visible;
}

.myOption {
    background-color:rgb(198, 198, 198);
    text-align:center;
    width: 100%;
    height:2em;
    line-height:2em;
    box-sizing:border-box;
    border: 1px solid grey;
}

.myOption:hover {
    background-color:rgb(59, 59, 59);
    color:white;
    transform: scale(1.1);
    overflow:visible;
}

.ddownSelect {
    background-color:rgb(94, 94, 94);
    color:white;
}

#upper {
    display:flex;
    flex-direction:column;
}

.wham > polygon {
    fill:rgba(255, 103, 103, 0.551);
}

.both > polygon {
    fill: rgba(255, 132, 0, 0.89);
}

.wham2 > polygon {
    fill: rgba(255, 217, 0, 0.458);
}

.horiz {
    display:flex;
    flex-direction: row;
    padding-bottom: 1em;
}

#info > * {
    padding-left: 1em;
    padding-right: 1em;
}

.box {
    border-radius: .2em;
    border-color:grey;
    border-style: inset;
}

.box > * {
    text-align: center;
}

.sel1 > circle {
    fill:rgb(255, 243, 22);
    /* r: 1.2em; */
}

.active1 > text {
    fill:black;
    /* visibility:hidden; */
}

.sel2 > circle {
    fill:rgb(204, 129, 9);
    /* r: 1.2em; */
}

.active1 > polygon {
    fill:rgba(135, 148, 149, 0.345);
    stroke-width: .3em;
    /* stroke-dasharray: 3,3; */
    stroke: black;
    transform:scale(.85);
}

.active2 > text {
    fill:black;
    /* visibility:hidden; */
}

.active2 > polygon {
    fill:rgba(135, 148, 149, 0.345);
    stroke-width: .3em;
    /* stroke-dasharray: 3,3; */
    stroke: black;
    transform:scale(.85);
}

.sel3 > circle {
    fill:rgb(200, 36, 241);
    /* r: 1.2em; */
}


.active3 > polygon {
    fill:rgba(135, 148, 149, 0.345);
    stroke-width: .3em;
    /* stroke-dasharray: 3,3; */
    stroke: black;
    transform:scale(.85);
}

.active3 > text {
    fill:black;
    /* visibility:hidden; */
}

#tBox {
    padding-left: 2em;
}

.sel1:hover > circle {
    r:1.2em;
}

.sel2:hover > circle {
    r:1.2em;
}

.sel3:hover > circle {
    r:1.2em;
}