.controls [disabled], .main-sort.disabled {
    display: none;
}

.election-selector > :empty {
    display: none;
}

menu {
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
    gap: 1rem;
}

select, button {
    font-size: 1rem;
    font-family: 'Roboto Condensed';
    background: #eee;
    border: 1px solid black;
    border-radius: 0.25rem;
}

.all-centre {
    gap: 1rem;
}

.information {
    width: 100%;
    border: 1px solid var(--accent-a);
    color: var(--accent-a);
    background: var(--accent-b);
    padding: 0.5rem;
    text-align: center;
}

.main-sort {
    font-size: 16px;
    font-family: "Roboto Condensed";
    display: flex;
    align-items: start;
    gap: 0.5em;
    justify-content: center;

    main {
        display: grid;
        grid-template-columns: minmax(auto, 1.2em) 1fr;
        row-gap: 0.2em;
        padding: 0.5em;
        width: 25em;
        background: white;
        color: black;
        user-select: none;
        height: 85vh;
        grid-auto-rows: min-content;
        overflow-y: scroll;
    }

        @media (hover: none) {
            main {
                padding-right: 2em;
            }
        }

    section {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: span 2;
        gap: 0.2em 1em;
        break-inside: avoid;
        background: #ccc;
        padding: 0.2em;
        margin: 0.2em 0;
        height: fit-content;

        .groups-mode & {
            background: white;
            border: 1px solid black;
            row-gap: 0em;
        }
    }

    section.ui-sortable-helper {
        grid-template-columns: auto 1fr;
        height: max-content !important;
    }

    section.ui-sortable-helper article {
        display: none;
    }

    .section-placeholder {
        border: 1px dotted yellow;
        height: 0.8em;
    }

    header {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: span 2;
        align-items: baseline;
        font-weight: bold;
        pointer-events: none;
    }

    header .box {
        height: 1.2em;
        width: 100%;
        min-width: 0.8em;
        text-align: center;
        padding: 0 0.2em;
    }

    header div:not(.box) {
        grid-column-start: 2;
    }

    .groupCandidates {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: span 2;
        gap: 0.2em 1em;
    }

    article {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 2;
        align-items: baseline;

        .groups-mode & {
            pointer-events: none;
        }

        .groups-mode &[data-group="UG"] {
            display: none;
        }
    }

    article>div {
        pointer-events: none;
    }

    article.ui-sortable-helper {
        grid-template-columns: 1.2em 1fr;
    }

    article .box {
        border: 1pt solid black;
        height: 1.2em;
        width: 100%;
        min-width: 0.8em;
        text-align: center;
        padding: 0 0.2em;
    }

    article .box:empty::before {
        content: "\00a0";
    }

    article>div:not(.box) {
        background: white;
        border: 1px solid black;
        padding: 0 0.2em;
        grid-column-start: 2;

        .groups-mode & {
            border: none;
            padding: 0;
        }
    }

    article>div:not(.box)>div {
        font-size: 75%;
        text-transform: uppercase;

        &:empty {
            display: none;
        }
    }

    section article>div:not(.box)>div {
        display: none;
    }

    .placeholder {
        background: white;
        border: 1px dotted black;
        padding: 0 0.2em;
        grid-column-start: 2;
    }

    .placeholder::before {
        content: "\00a0";
    }

    footer {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: span 2;
    }

    footer div {
        grid-column: 1 / 3;
    }
}

.print-result {
    column-count: 5;
    column-rule: solid 1pt black;
    column-gap: 0.5cm;
    column-fill: auto;
    font-family: "Roboto Condensed";
    display: none;

    &.shortlist {
        column-count: 3;
        font-size: 150%;
    }

    main {
        display: grid;
        grid-template-columns: auto 1fr;
        break-inside: avoid-page;
        row-gap: 0.35cm;
    }

    section {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: span 2;
        gap: 0.2em 1em;
        break-inside: avoid;

        .groups-mode &[data-group="UG"] {
            display: none;
        }
    }

    header {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: span 2;
        font-weight: bold;
        align-items: baseline;

        section[data-group="UG"]:first-child & {
            display: none;
        }
    }

    article {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: span 2;
        align-items: baseline;
    }

        article>div:not(.box)>div {
            display: none;
        }

    .box {
        border: 1pt solid black;
        height: 1.2em;
        width: 100%;
        min-width: 0.8em;
        text-align: center;
        padding: 0 0.2em;
    }

    &.groups-mode article .box {
        border: transparent;
    }

    &:not(.groups-mode) header .box {
        border-color: transparent;
    }

    &.groups-mode header .name:before {
        content: attr(data-group) ": ";
    }

        &.groups-mode header .name:empty:before {
            content: attr(data-group);
        }

    .box:empty::before {
        content: "\00a0";
    }

    footer {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: span 2;
    }

    footer div {
        grid-column: 1 / 3;
    }
}

@media print {
    .result body {
        background: none;
    }

    .result :not(body, .print-result, .print-result *) {
        display: none;
    }

    .result .print-result {
        display: block;
        min-height: 100%;
    }

    @media (orientation: portrait) {
        .print-result {
            column-count: 3;

            &.shortlist {
                column-count: 2;
            }
        }
    }

}

.super-result .print-result {
    display: block;
}