iframe {
    border: none;
}

div {
    display: inline;
}

.column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.column.page {
    height: 100vh;
    overflow-y: auto;
}

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

.row.left {
    justify-content: flex-start;
}

.bare {
    list-style: none;
    padding: 0;
}

.row>li {
    margin-right: 1em;
}

.status {
    position: absolute;
    right: 0;
    top: 0;
    background-color: white;
    display: none;
    animation-fill-mode: forwards;
}

:has(.status) {
    position: relative;
}

/* Keep each research entry together */
#research li {
    display: flex;
    align-items: center;
}

/* Don't let the checkbox get pushed onto another line */
#research li input {
    flex: 0 0 auto;
}

/* Let the research image stay beside its checkbox */
#research li img {
    display: block;
    flex: 0 0 auto;
}

#research .show_all:not(:checked)+ul>li:has(input:checked).toggle {
    display: none;
}

.toggle>input:not(:checked) {
    display: none;
}

li.lastrow {
    margin-bottom: 1em;
}

.research:not(.item) {
    display: block;
}

.research.item {
    border: solid black 0.5px;
    padding: 0;
}

.research.icon {
    background: radial-gradient(#f4ead2, #dac184 65%, #dac184);
}

.research.number {
    background-color: #846f1d;
    height: 16px;
}

.research.number>div {
    width: 40%;
    /*padding: 0px 5px;*/
    font-family: sans-serif;
    background-color: #fffcc1;
    text-align: center;
    vertical-align: middle;
    line-height: 16px;
}

.research.flasks {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: -12px;
    background-color: #6e5900;
    height: 21px;
}

.research.flasks * {
    margin-left: -3px;
    margin-right: -3px;
}

table {
    border-spacing: 0;
}

.research.flasks {
    --containerW: 64px;
    --flaskW: 17.75px;
    width: var(--containerW);
    white-space: nowrap;
    position: relative;
}

/* default: no overlap */
.research.flasks>img {
    display: inline-block;
    position: relative;
}

/* overlap amount depends on how many flasks exist:
   choose step(k) = (containerW - flaskW)/(k-1)
   margin-right = step(k) - flaskW
*/

/* at least 7 children: k=7 -> step(7) */
.research.flasks:has(> img:nth-child(7))>img {
    margin-right: calc(((var(--containerW) - var(--flaskW)) / 6) - var(--flaskW));
}

/* at least 8 children: override margin-right for k=8 -> step(8) */
.research-flasks:has(> img:nth-child(8))>img {
    margin-right: calc(((var(--containerW) - var(--flaskW)) / 7) - var(--flaskW));
}

/* at least 9 children */
.research.flasks:has(> img:nth-child(9))>img {
    margin-right: calc(((var(--containerW) - var(--flaskW)) / 8) - var(--flaskW));
}

/* at least 10 children */
.research.flasks:has(> img:nth-child(10))>img {
    margin-right: calc(((var(--containerW) - var(--flaskW)) / 9) - var(--flaskW));
}

/* at least 11 children */
.research.flasks:has(> img:nth-child(11))>img {
    margin-right: calc(((var(--containerW) - var(--flaskW)) / 10) - var(--flaskW));
}

/* at least 12 children */
.research.flasks:has(> img:nth-child(12))>img {
    margin-right: calc(((var(--containerW) - var(--flaskW)) / 11) - var(--flaskW));
}