header {
   top: 0;
   left: 0;
   position: fixed;
   z-index: 10;
   display: flex;

   transition: 1s ease-in-out;
}

header>div {
   border: var(--brd);
   border-top: 0;
   border-radius: 0 0 .75em .75em;

   background-color: var(--bl);
   box-shadow: var(--shd);
   height: fit-content;

   padding: .5em .5em;

   display: flex;
   gap: .25em;
   z-index: 2;

   margin-right: .5rem;

}

#money {
   border-left: 0;
   border-bottom-left-radius: 0;
}

#money {
   font-size: 2rem;
   width: fit-content;

   gap: .5rem;
   padding: 0 .25em 0 0;
   border-bottom-right-radius: 1rem;
   background-color: var(--bl);
   z-index: 3;
}

#money::before {
   content: '$';
   background-color: var(--w);
   color: var(--bl);
   padding: .25rem;
}

#u-cost::after {
   content: ' / μg';
}

#u-cost::before {
   content: 'NT price : ';
   font-size: .85rem;
}

#prod-goals::before {
   content: 'Goal : ';
   font-size: .85rem;
}

#failure-count:empty {
   display: none;
}

#failure-count::before {
   content: 'Failed : ';
   font-size: .85rem;
}

#top-options {
   display: flex;
   gap: 1.5rem;
   position: fixed;
   right: 5vw;
}

#kpi-but:hover {
   padding-top: 1rem;

}

/* typo flag button */

#typo-commit {
   position: fixed;
   top: 1em;
   right: 0;
   border-right: 0;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   transition: .3s;
   z-index: 100;
}

#typo-commit.stowed {
   margin-right: -10em;
}