table {
    border-collapse: collapse;
    height: fit-content;
}

tr, tr > * {
    border: 1px solid #4f4f4f;
}

ul {
    margin: 0;
}

tbody > tr > td > ul {
    padding: 0;
}

h2, h3 {
    padding: 1rem 0.5rem;
    margin: 0;
}

#vt1 {
    margin: 0;
    padding: 0;
    & > div {
        display: flex;
        flex-wrap: nowrap;
        gap: 1em;
        min-width: fit-content;
        & > table td {
            padding: 2px;
            & ul {
                margin-left: 1em;
            }
        }
        & > table tr {
            position: relative;
            & > td:nth-of-type(3) {
                & li:last-of-type {
                    color: red;
                    cursor: pointer;
                    position: absolute;
                    left: 0.2em;
                    margin-top: 1em;
                    visibility: hidden;
                }
                & > ul {
                    margin-left: 0;
                    list-style: none;
                    display: flex;
                    flex-direction: row;
                    & > li:not(:first-child):not(:last-child) {
                        padding-left: 0.3em;
                    }
                }
                & > ul > li:nth-last-of-type(n+3)::after {
                    content: ", ";
                }
            }
            &:hover > td:nth-of-type(3) > ul > li:last-of-type {
                visibility: visible;
            }
            & > th:not(:nth-of-type(3)):not(:nth-of-type(4)) {
                padding-left: 0.2em;
                text-align: left;
            }
            & > * {
                vertical-align: top;
            }
        }
        & > div:last-of-type > ul:last-of-type > li > span {
            float: inline-end;
            margin-left: 1em;
        }
        & > * {
            min-width: fit-content;
        }
        & > table > caption {
            font-weight: bold;
            font-size: 1.5em;
            padding: 1em 0 0 2px;
            text-align: left;
        }
        & > div {
            border: 2px solid black;
            height: fit-content;
            & > :last-child {
                margin: 0 1em 1em 0;
            }
        }
    }
}

fieldset {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.1em;
    justify-content: space-between;
    & > * {
        grid-column: 1 / -1;
    }
    & fieldset {
        border: none;
        &:not(:last-of-type) {
            width: fit-content;
            grid-row: 2;
        }
        & legend {
            font-weight: bold;
        }
    }
    & fieldset:nth-of-type(1) {
        grid-column: 2;
        justify-self: start;
    }
    & fieldset:nth-of-type(2) {
        grid-column: 1;
        justify-self: end;
    }
    & fieldset:last-of-type {
        padding: 0;
        justify-content: space-between;
        margin-bottom: 1em;
    }
}

form {
    margin: 0 1em;
    & > fieldset:first-of-type > label {
        font-weight: bold;
    }
}

input {
    float: right;
}

button {
    width: fit-content;
}

button, input[type="radio"], input[type="checkbox"], thead > tr > th > span {
    cursor: pointer;
}

span[id^="up"], span[id^="down"] {
    float: right;
    padding-right: 0.5em;
    line-height: 1;
}