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

h1 {
    border-bottom-width: .1em;
    border-bottom-color:grey;
    border-bottom-style:solid;
}

.primary {
    background-color:rgb(144, 144, 208);
    position:relative;
    min-width:15%;
    border: 1px solid grey;
}

.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;
}

svg {
    padding:.9%;
    /* border-radius:.08em;
    border-style:inset;
    border-color:grey; */
}

#Search {
    display:flex;
    flex-direction:row;
}

#drawing {
    text-align:center;
    /* Find a way to center */
}

.void {
    visibility:hidden !important;
}

.MyNode {
    cursor:pointer;
}

.MyNode > * {
    transform-origin:center center;
    -webkit-transform-origin: center center;
}

.bord > circle {
    stroke-dasharray: 4,2;
    stroke-width:2px;
}

.MyNode:hover > circle {
    stroke-width: 2px;
    r: 1.4em;
}

.small.MyNode:hover > circle {
    stroke-width: 2px;
    r:0.85em;
}

.MyNode:hover > text {
    font-weight:bolder;
}

.MyNode:hover > .noteNames {
    font-weight:bolder;
}

.inSub > circle {
    fill: rgb(106, 106, 106) !important;
}

.inSub > text {
    fill: white !important;
}

.inSub.small > text {
    visibility:visible;
    fill:black !important;
}

.inSuper > circle {
    fill: rgb(193, 193, 193);
}

.inSuper.small > text {
    visibility:visible;
    font-size:1.2em;
}

#tooltips {
    visibility:hidden;
    background-color:rgb(221, 221, 221);
    border-radius:1px;
    border-color:grey;
    border-style:solid;
    position:absolute;
    line-height:1.4em;
    vertical-align:bottom;
    padding:.04em;
}

.supersetPolygon {
    fill:rgb(198, 198, 198);
}

.supersetPolygon:hover {
    fill:rgb(144, 144, 144);
}

.subsetPolygon {
    fill:rgb(138, 138, 138)
}

.subsetPolygon:hover {
    fill:rgb(87, 87, 87)
}

#moreInfo {
    display:flex;
    min-width:100%;
    flex-direction:row;
}

#moreInfo > div {
    max-width:50%;
    padding-right:1%;
    border-radius:.08em;
    border-style:inset;
    border-color:grey;
}

polygon:hover {
    cursor:pointer;
}

#moreInfo > div {
    display:flex;
    flex-direction:column;
}

.transform {
    stroke-width:1px;
    stroke:rgb(87, 87, 87);
    fill: rgba(147, 147, 216, 0.458);
}

.transform:hover {
    fill: rgba(65, 65, 197, 0.644);
}

.highlight:hover {
    cursor:pointer;
    background-color:lightblue;
    font-weight:bolder;
}

#inputs {
    display:flex;
    flex-direction: row;
    max-width:100%;
    min-width:fit-content;
}

#inputs > * {
    padding-left: 1%;
    padding-right:1%;
    border-radius:.08em;
    border-style:inset;
    border-color:grey;
    text-align:center;
}

.but {
    background-color: rgb(158, 158, 211);
}

.but:hover {
    cursor:pointer;
    transform:scale(1.1);
    -webkit-transform:scale(1.1);
}

.drop {
    cursor:pointer;
}

.drop:hover {
    transform:scale(1.2);
    -webkit-transform:scale(1.2);
}

.small > * {
    transform-origin:center,center;
}

.small > circle {
    r: .32em;
}

.small > text {
    visibility:hidden;
}

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

.noteName {
    transform-origin:initial initial;
    -webkit-transform-origin:initial initial;
}

#tContain, #iContain, #mContain {
    visibility:hidden;
}

.subSymmetryLine {
    visibility: hidden;
    stroke-width:2px;
    stroke:blue;
    stroke-dasharray: 3,3;
}

.superSymmetryLine {
    visibility: hidden;
    stroke-width:2px;
    stroke:red;
    stroke-dasharray: 3,3;
}

.subSymmetryLine:hover {
    stroke-width: 3px;
}

.superSymmetryLine:hover {
    stroke-width:3px;
}

.row {
    display:flex;
    flex-direction:row;
    max-width:100%;
}

.row:hover > * {
    font-weight:bolder; 
    background-color:rgb(184, 230, 245); 
    cursor:pointer;
}

.wow:hover {
    transform:scale(1.1);
    -webkit-transform:scale(1.1);
    font-weight:bolder;
    cursor:pointer;
    border-color:grey;
    border-width:.1em;
    border-style:solid;
}

.centDis {
    fill:darkgrey;
    stroke:black;
    stroke-width:1px;
}

.centDis:hover {
    cursor:pointer;
    r:0.55em;
    fill:rgb(1, 0, 83);
    stroke:darkgrey;
}

#superInfo, #subInfo {
    display:flex;
    flex-direction:row !important;
    width:50%;
}

.col {
    display:flex;
    flex-direction: column;
    border-width:.03em;
    border-color:grey;
    border-style:solid;
    align-content:space-evenly;
}

p {
    margin-top:.5em;
    margin-bottom: .5em;
}

#SupCol2,#SubCol2 {
    max-width:100%;
    overflow:scroll;
}

#SupCol1, #SubCol1 {
    min-width:fit-content;
}

#infoLabels {
    display:flex;
    flex-direction:row;
}

#infoLabels > * {
    background-color:lightgrey;;
    text-align:center;
    width:50%;
    /* border-radius: .08em; */
    border-style:inset;
    border-color:grey;;
}

body {
    max-width:95%;
    align-self:center;
}

.frozen:hover {
    font-weight:bolder;
    cursor:pointer;
}


.textNoteName,#tooltips {
    font-family: 'Bravura';
    max-height:fit-content;
    max-width:fit-content;
}