*{
    box-sizing: border-box;
}
.fr,.isotope{
    position: relative;
    display: flex;
    flex-direction: column;
    width: fit-content;
    padding: 4px;
    padding-right: 2px;
}
.isotope{
    flex-direction: row;
    /* background: yellow; */
    align-items: center;
}
.symbol{
    height: 100%;
    font-stretch: narrower;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 150%;
}
.symbol *{
    font-size: normal;
}
.num{
    border-bottom: 1px solid black;
}
.tool .num{
    border-color: white;
}
.tool .isotope{
    padding: 1px;
}
.tool:has(.fr){
    padding:0 8px;
}
.num:empty, .den:empty, 
.symbol:empty, .before:empty, .after:empty{
    border: 1px dotted blue;
}
.tool .num:empty, .tool .den:empty, 
.tool .symbol:empty, .tool .before:empty,
 .tool .after:empty, .isotope:has(.ebase) .den{
    border: none;
}
.num, .den, .symbol, .after,
.before{
    text-align: center;
    min-height: 15px;
    white-space: nowrap;
    /* min-width: 25px; */
}
.after,
.before{
    padding: 0 5px;
    min-width: 25px;
} 
.tool .num,.tool .den,.tool .symbol,.tool .before,.tool .after{
    min-width: fit-content;
    padding: 0;
}
.fr.isotope .num, .fr.isotope .den{
    text-align: right;
    font-size: 80%;
}

.isotope .fr .num{
    border-bottom: none;
}
[class*=brackets]{
    border-top: 1px solid transparent;
    border-bottom: 1px solid green;
}
[class*=brackets]:not(:has(.fr)),[class*=brackets] .fr{
    border: 1px solid black;
    border-top: 0;
    border-bottom: 0;
    border-radius: 18%; 
} 
.tool [class*=brackets]{
    border-color: white;
    padding:0 6px;
}
.tool [class*=brackets-o],[class*=brackets-o]{
    border-radius: 50%;
    padding: 0 8px;
}
.tool [class*=brackets-m],[class*=brackets-m]{
    border-radius: 5%;
    border-top: 1px solid transparent;
    padding: 0 8px;
}
.tool .after{
    display: none;
}
.exponent{
    position: relative;
}
.ebase{
    font-size: 120%;
}
.epower{
    font-size: 60%;
}
.ebase+.fr{
    padding-left: 2px;
}
.ebase+.fr .den{ 
    border: none;
}
.ebase+.fr .num{ 
    padding: 0;
    min-width: 15px;
}
.arrow:not(.equation .arrow){
    position: relative;
    width: 200px;
    /* min-width: 100px; */
    padding: 2px;
    display: grid;
    padding-left: 15px;
    padding-right: 15px;
}
.arrow:not(.equation .arrow) span{
    border-bottom: 1px solid black;
    width: 100%;
    padding: 4px;
    text-align: center;
    position: relative;
    padding-right: 20px;
} 
.space{
    padding: 2px;
    height: 100%;
    display: flex;
}
.arrow.produces{
    position: relative;
    height: 2px;
    background: black;
    min-width:50px;
}
.arrow.produces::after{
    content: '';
    width: 10px;
    height: 10px;
    border: 2px solid black;
    position: absolute;
    right:1px;
    transform: rotate(-45deg);
    border-left: none; 
    border-top: none; 
    top: -5px;
} 
.hexagon {
position: relative;
width: var(--s, 100px);
margin: 15px;
height: calc(var(--s) * 1.1547);
font-size: 0; /* disable white space between inline block element */
filter: drop-shadow(0px 0.5px 1px rgb(0, 0, 0));
counter-reset: span;
}
.hexagon div {
width: var(--s, 100px);
margin: var(--m, 0px);
height: calc(var(--s) * 1.1547);
display: inline-block;
background: rgb(255, 255, 255);
z-index: 1;
font-size: initial; /* we reset the font-size if we want to add some content */
clip-path: polygon(0% 25%, 0% 75%, 50% 100%, 100% 75%, 100% 25%, 50% 0%);
} 
.hexagon .corner,
.benzene-ring::before{ 
    content: '';
    border: 1px solid rgba(43, 42, 42, 0.453);
    width: 70%;
    height:60%;
    background: rgb(255, 255, 255);
    top: 20%;
    left: 15%;
    position: absolute;
    border-radius: 50%;
    z-index: 2;
}
.hexagon .corner{
    top: calc((100 - var(--w)) * 1%);
    left: calc((50 - var(--w)) * 1%);
    width: calc(var(--w) * 1%);
    height: calc(var(--w) * 1%);
    background: rebeccapurple;
    z-index: 5;
}
/* .hexagon .corner::before{
    counter-increment: span;
    --w: counter(span);
    content: 'Softumba';
    font-size: 25px;
    padding: 4px;
    color: rgb(8, 197, 211);
} */