dsi-icl/optimise

.topLevelPanel {
    padding: 0 0 1em 0;
}

.topLevelPanel > form > button {
    width: calc(100% - 2em);
    margin: 0 1em;
    margin: 0 1em;
}

.levelBody .levelBody .levelHeader {
    font-size: 1em;
}

.levelHeader {
    display: inline-block;
    width: 100%;
    line-height: 3em;
    color: var(--color-background);
    font-size: 1em;
    font-weight: bold;
    padding: 0 1em;
    /* background-color: hsl(var(--color-background-h), var(--color-background-s), 90%); */
}

.levelHeader:hover {
    cursor: pointer;
    background-color: hsl(var(--color-background-h), var(--color-background-s), 87%);
}

.levelBody {    
    padding: 0 1em;
}

.levelBody .levelBody {
    border: 0.1em solid hsl(var(--color-background-h), var(--color-background-s), 85%);
    background-color: white;
}

.levelBody:hover {
    cursor: pointer;
}

.levelBody:last-child {
    margin-bottom: 1em;
}

.levelBody .levelHeader {
    text-align: left;
    font-size: 1em;
    margin-top: 1em;
}

.levelBody div:nth-child(1) .levelHeader {
    background-color: hsla(231, 48%, 48%, 0.3);
}

.levelBody div:nth-child(1) .levelBody,
.levelBody div:nth-child(1) .levelBody .levelBody,
.levelBody div:nth-child(1) .levelBody .levelBody .levelBody,
.levelBody div:nth-child(1) .levelBody .levelBody .levelBody .levelBody,
.levelBody div:nth-child(1) .levelBody .levelBody .levelBody .levelBody .levelBody {
    border-color: hsla(231, 48%, 48%, 0.2);
}

.levelBody div:nth-child(1) .levelBody button,
.levelBody div:nth-child(1) .levelBody .levelBody button,
.levelBody div:nth-child(1) .levelBody .levelBody .levelBody button,
.levelBody div:nth-child(1) .levelBody .levelBody .levelBody .levelBody button,
.levelBody div:nth-child(1) .levelBody .levelBody .levelBody .levelBody .levelBody button {
    background-color: hsla(231, 48%, 48%, 0.75);
}

.levelBody div:nth-child(1) .levelHeader:hover {
    background-color: hsla(231, 48%, 48%, 0.4);
}

.levelBody div:nth-child(1) .levelBody .levelHeader {
    background-color: hsla(231, 48%, 48%, 0.2);
}

.levelBody div:nth-child(1) .levelBody .levelHeader:hover {
    background-color: hsla(231, 48%, 48%, 0.3);
}

.levelBody div:nth-child(1) .levelBody .levelBody .levelHeader {
    background-color: hsla(231, 48%, 48%, 0.1);
}

.levelBody div:nth-child(1) .levelBody .levelBody .levelHeader:hover {
    background-color: hsla(231, 48%, 48%, 0.2);
}

.levelBody div:nth-child(2) .levelHeader {
    background-color: hsla(188, 64%, 44%, 0.3);
}

.levelBody div:nth-child(2) .levelBody,
.levelBody div:nth-child(2) .levelBody .levelBody,
.levelBody div:nth-child(2) .levelBody .levelBody .levelBody,
.levelBody div:nth-child(2) .levelBody .levelBody .levelBody .levelBody,
.levelBody div:nth-child(2) .levelBody .levelBody .levelBody .levelBody .levelBody {
    border-color: hsla(188, 64%, 44%, 0.2);
}

.levelBody div:nth-child(2) .levelBody button,
.levelBody div:nth-child(2) .levelBody .levelBody button,
.levelBody div:nth-child(2) .levelBody .levelBody .levelBody button,
.levelBody div:nth-child(2) .levelBody .levelBody .levelBody .levelBody button,
.levelBody div:nth-child(2) .levelBody .levelBody .levelBody .levelBody .levelBody button {
    background-color: hsla(188, 64%, 44%, 0.75);
}

.levelBody div:nth-child(2) .levelHeader:hover {
    background-color: hsla(188, 64%, 44%, 0.4);
}

.levelBody div:nth-child(2) .levelBody .levelHeader {
    background-color: hsla(188, 64%, 44%, 0.2);
}

.levelBody div:nth-child(2) .levelBody .levelHeader:hover {
    background-color: hsla(188, 64%, 44%, 0.3);
}

.levelBody div:nth-child(2) .levelBody .levelBody .levelHeader {
    background-color: hsla(188, 64%, 44%, 0.1);
}

.levelBody div:nth-child(2) .levelBody .levelBody .levelHeader:hover {
    background-color: hsla(188, 64%, 44%, 0.2);
}

.levelBody div:nth-child(3) .levelHeader {
    background-color: hsla(122, 39%, 49%, 0.3);
}

.levelBody div:nth-child(3) .levelBody,
.levelBody div:nth-child(3) .levelBody .levelBody,
.levelBody div:nth-child(3) .levelBody .levelBody .levelBody,
.levelBody div:nth-child(3) .levelBody .levelBody .levelBody .levelBody,
.levelBody div:nth-child(3) .levelBody .levelBody .levelBody .levelBody .levelBody {
    border-color: hsla(122, 39%, 49%, 0.2);
}

.levelBody div:nth-child(3) .levelBody button,
.levelBody div:nth-child(3) .levelBody .levelBody button,
.levelBody div:nth-child(3) .levelBody .levelBody .levelBody button,
.levelBody div:nth-child(3) .levelBody .levelBody .levelBody .levelBody button,
.levelBody div:nth-child(3) .levelBody .levelBody .levelBody .levelBody .levelBody button {
    background-color: hsla(122, 39%, 49%, 0.75);
}

.levelBody div:nth-child(3) .levelHeader:hover {
    background-color: hsla(122, 39%, 49%, 0.4);
}

.levelBody div:nth-child(3) .levelBody .levelHeader {
    background-color: hsla(122, 39%, 49%, 0.2);
}

.levelBody div:nth-child(3) .levelBody .levelHeader:hover {
    background-color: hsla(122, 39%, 49%, 0.3);
}

.levelBody div:nth-child(3) .levelBody .levelBody .levelHeader {
    background-color: hsla(122, 39%, 49%, 0.1);
}

.levelBody div:nth-child(3) .levelBody .levelBody .levelHeader:hover {
    background-color: hsla(122, 39%, 49%, 0.2);
}

.levelBody div:nth-child(3) .levelBody .levelBody .levelBody .levelHeader {
    background-color: hsla(122, 39%, 49%, 0.05);
}

.levelBody div:nth-child(3) .levelBody .levelBody .levelBody .levelHeader:hover {
    background-color: hsla(122, 39%, 49%, 0.1);
}

.levelBody div:nth-child(4) .levelHeader {
    background-color: hsla(51, 75%, 51%, 0.3);
}

.levelBody div:nth-child(4) .levelBody,
.levelBody div:nth-child(4) .levelBody .levelBody,
.levelBody div:nth-child(4) .levelBody .levelBody .levelBody,
.levelBody div:nth-child(4) .levelBody .levelBody .levelBody .levelBody,
.levelBody div:nth-child(4) .levelBody .levelBody .levelBody .levelBody .levelBody {
    border-color: hsla(51, 75%, 51%, 0.2);
}

.levelBody div:nth-child(4) .levelBody button,
.levelBody div:nth-child(4) .levelBody .levelBody button,
.levelBody div:nth-child(4) .levelBody .levelBody .levelBody button,
.levelBody div:nth-child(4) .levelBody .levelBody .levelBody .levelBody button,
.levelBody div:nth-child(4) .levelBody .levelBody .levelBody .levelBody .levelBody button {
    background-color: hsla(51, 75%, 51%, 0.75);
}

.levelBody div:nth-child(4) .levelHeader:hover {
    background-color: hsla(51, 75%, 51%, 0.4);
}

.levelBody div:nth-child(4) .levelBody .levelHeader {
    background-color: hsla(51, 75%, 51%, 0.2);
}

.levelBody div:nth-child(4) .levelBody .levelHeader:hover {
    background-color: hsla(51, 75%, 51%, 0.3);
}

.levelBody div:nth-child(4) .levelBody .levelBody .levelHeader {
    background-color: hsla(51, 75%, 51%, 0.1);
}

.levelBody div:nth-child(4) .levelBody .levelBody .levelHeader:hover {
    background-color: hsla(51, 75%, 51%, 0.2);
}

.levelBody div:nth-child(5) .levelHeader {
    background-color: hsla(36, 100%, 50%, 0.3);
}

.levelBody div:nth-child(5) .levelBody,
.levelBody div:nth-child(5) .levelBody .levelBody,
.levelBody div:nth-child(5) .levelBody .levelBody .levelBody,
.levelBody div:nth-child(5) .levelBody .levelBody .levelBody .levelBody,
.levelBody div:nth-child(5) .levelBody .levelBody .levelBody .levelBody .levelBody {
    border-color: hsla(36, 100%, 50%, 0.2);
}

.levelBody div:nth-child(5) .levelBody button,
.levelBody div:nth-child(5) .levelBody .levelBody button,
.levelBody div:nth-child(5) .levelBody .levelBody .levelBody button,
.levelBody div:nth-child(5) .levelBody .levelBody .levelBody .levelBody button,
.levelBody div:nth-child(5) .levelBody .levelBody .levelBody .levelBody .levelBody button {
    background-color: hsla(36, 100%, 50%, 0.75);
}

.levelBody div:nth-child(5) .levelHeader:hover {
    background-color: hsla(36, 100%, 50%, 0.4);
}

.levelBody div:nth-child(5) .levelBody .levelHeader {
    background-color: hsla(36, 100%, 50%, 0.2);
}

.levelBody div:nth-child(5) .levelBody .levelHeader:hover {
    background-color: hsla(36, 100%, 50%, 0.3);
}

.levelBody div:nth-child(5) .levelBody .levelBody .levelHeader {
    background-color: hsla(36, 100%, 50%, 0.1);
}

.levelBody div:nth-child(5) .levelBody .levelBody .levelHeader:hover {
    background-color: hsla(36, 100%, 50%, 0.2);
}

.levelBody div:nth-child(6) .levelHeader {
    background-color: hsla(4, 90%, 58%, 0.3);
}

.levelBody div:nth-child(6) .levelBody,
.levelBody div:nth-child(6) .levelBody .levelBody,
.levelBody div:nth-child(6) .levelBody .levelBody .levelBody,
.levelBody div:nth-child(6) .levelBody .levelBody .levelBody .levelBody,
.levelBody div:nth-child(6) .levelBody .levelBody .levelBody .levelBody .levelBody {
    border-color: hsla(4, 90%, 58%, 0.2);
}

.levelBody div:nth-child(6) .levelBody button,
.levelBody div:nth-child(6) .levelBody .levelBody button,
.levelBody div:nth-child(6) .levelBody .levelBody .levelBody button,
.levelBody div:nth-child(6) .levelBody .levelBody .levelBody .levelBody button,
.levelBody div:nth-child(6) .levelBody .levelBody .levelBody .levelBody .levelBody button {
    background-color: hsla(4, 90%, 58%, 0.75);
}

.levelBody div:nth-child(6) .levelHeader:hover {
    background-color: hsla(4, 90%, 58%, 0.4);
}

.levelBody div:nth-child(6) .levelBody .levelHeader {
    background-color: hsla(4, 90%, 58%, 0.2);
}

.levelBody div:nth-child(6) .levelBody .levelHeader:hover {
    background-color: hsla(4, 90%, 58%, 0.3);
}

.levelBody div:nth-child(6) .levelBody .levelBody .levelHeader {
    background-color: hsla(4, 90%, 58%, 0.1);
}

.levelBody div:nth-child(6) .levelBody .levelBody .levelHeader:hover {
    background-color: hsla(4, 90%, 58%, 0.2);
}

.levelBody div .levelBody .levelBody .levelBody .levelBody .levelHeader,
.levelBody div .levelBody .levelBody .levelBody .levelBody .levelBody .levelHeader {
    background-color: hsl(var(--color-background-h), var(--color-background-s), 90%);
}

.levelBody div .levelBody .levelBody .levelBody .levelBody .levelHeader:hover,
.levelBody div .levelBody .levelBody .levelBody .levelBody .levelBody .levelHeader:hover {
    background-color: hsl(var(--color-background-h), var(--color-background-s), 85%);
}

.dataItem:first-child {
    margin-top: 1em;
}

.dataItem em {
    color: hsl(var(--color-background-h), var(--color-background-s), 75%);
}

.leftRightSelect {
    display: none;
}

.leftRightButton button,
.otButton button {
    width: 100%;
}

.otButton td {
    width: 50%;
}

.otButton td:first-child {
    padding: 0 0.2em 0 0;
}

.otButton td:last-child {
    padding: 0 0 0 0.2em;
}

.leftRightButton td {
    padding: 0 0.2em;
    width: 33.33%;
}

.leftRightButton td:first-child {
    padding: 0 0.4em 0 0;
}

.leftRightButton td:last-child {
    padding: 0 0 0 0.4em;
}

button.noActive {
    color: var(--color-input) !important;
    background-color: hsl(var(--color-background-h), var(--color-background-s), 94%) !important;
}

button.noActive:hover {
    background-color: hsl(var(--color-background-h), var(--color-background-s), 90%) !important;
}

.antibodyContainer button {
    width: 10em;
    margin-right: 1em;
}

.antibodyContainer input {
    width: calc(100% - 11em);
}