#formFilters {
    padding: 0.5vh 1vw;
    margin-top: 1vh;
}

table.table-main {
    overflow-x: auto;
    padding: 1vh 1vw;
    max-width: 88vw; /* min(calc(1vh * 80), calc(1vw * 90)); */
    width: min-content;
    align-items: normal;
    justify-content: normal;
}

table.table-main * {
    padding: 0.25vh 0.5vh;
}

table.table-main thead {
    max-height: 4vh;
    overflow-y: visible;
    background-color: var(--colour-text-background);
}

table.table-main tbody {
    max-height: 75vh;
    overflow-y: auto;
    min-width: fit-content;
    max-width: fit-content;
    overflow-x: visible;
}
table.table-main tbody.is_collapsed {
    display: block;
}
table.table-main:has(tbody > div) tbody {
}
table.table-main tbody > div {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    justify-content: center;
    justify-items: center;
    justify-self: center;
    align-content: center;
    align-items: center;
    align-self: center;
    position: relative;
    display: block;
    width: 100%; /* min(calc(90vh), calc(70vw)); */
}

table.table-main select, 
table.table-main input:not([type="checkbox"]), 
table.table-main textarea, 
table.table-main div {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: 100%;
    border: 1px solid var(--colour-accent);
    border-radius: 0.5vh;
    text-align: center;
    background-color: var(--colour-text-background);
    font-size: 16px;
}

table.table-main thead tr th, 
table.table-main tbody tr td {
    max-width: 20vh;
    min-width: 20vh;
    padding: 0 0.5vh;
}
table.table-main tbody tr td {
    height: 3vh;
    /* padding-top: 0.5vh; */
}
table.table-main thead tr th.notes, 
table.table-main tbody tr td.notes {
    max-width: fit-content;
}
table.table-main tbody tr td:has(.dirty) {
    background-color: var(--colour-primary);
}
table.table-main tbody tr td:has(.dirty) table tr:not(:has(.dirty)) {
    background-color: var(--colour-text-background);
}
table.table-main tbody tr:not(:last-of-type) td {
    padding-bottom: 0.25vh;
}
table.table-main tbody tr td.ddl-preview div {
    cursor: pointer;
}
table.table-main tbody tr td.ddl-preview div,
table.table-main tbody tr td.ddl-preview select {
    padding-left: 2vh;
    padding-right: 2vh;
}
table.table-main thead tr th.active, 
table.table-main tbody tr td.active {
    max-width: 6vh;
    min-width: 6vh;
}
table.table-main thead tr th.active svg.active.add {
    fill: var(--colour-primary);
    background-color: var(--colour-accent);
    border: 2px solid var(--colour-accent);
    padding: 0;
    border-radius: 1vh;
}
table.table-main tbody tr td.active svg.active.add {
    fill: var(--colour-primary);
}
table.table-main tbody tr td.active svg.active.delete {
    fill: var(--colour-error);
}
table.table-main tbody tr td.display_order, 
table.table-main thead tr th.display_order {
    max-width: 5vh;
    min-width: 5vh;
}

#container-template-elements {
    display: none;
}


@media screen and (max-width: 850px) {
}
@media screen and (max-width: 400px) {
    #formFilters input[type="text"],
    #formFilters select {
        width: 15vh;
        /* height: 3vh; */
    }
    .topnav .container.company-name {
        margin: 0 auto;
        min-width: 40vw;
        max-width: 64vw;
    }
    .company-name {
        font-size: 1.2rem;
    }
    table.table-main {
        max-height: 61vh;
    }
    table.table-main thead {
        font-size: 0.8rem;
    }
    table.table-main tbody {
        max-height: 53vh;
    }
}