dsi-icl/optimise

.ariane {
    grid-area: ariane;
    display: block;
    width: 100%;
    height: 100%;
    padding: 1.2em;
    border-bottom: 0.1em solid hsl(var(--color-background-h), var(--color-background-s), 90%);
}

.ariane a {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1.2em;
    font-size: 1.1em;
    line-height: 0.9em;
}

.ariane a:hover {
    color: var(--color-background)
}

.panelWrapper {
    position: relative;
}

.panel {
    grid-area: panel;
    display: block;
    width: 100%;
    height: 100%;
    padding: 1.2em;
    overflow: auto;
}

.error {
    display: block;
    width: 100%;
    line-height: 2em;
    background-color: var(--color-error);
    color: var(--color-font-active);
    padding: 0.5em;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.deleteButton {
    background-color: var(--color-button-red)
}

.deleteButton:hover {
    background-color: var(--color-button-red-lighter)
}

.editorWrapper {
    margin-top: 1em;
    background: white;
    height: 25em;
    padding: 0.5em;
    display: block;
    overflow: auto;
    border: 1px solid rgb(200, 200, 200);
}

.editorWrapper * {
    white-space: pre;
}

.editorWrapper > div {
    height: 100%;
}

.commentButtonsGroup {
    width: 100%;
}

.commentButtonsGroup > div {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.commentButtonsGroup button {
    height: 2.5em;
    line-height: 2.5em;
    text-align: center;
    padding: 0 1em;
    margin: 2px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--color-background);
    background-color: hsl(var(--color-background-h), var(--color-background-s), 90%);
}

.commentButtonsGroup button:hover {
    color: var(--color-font-active);
    background-color: var(--color-accent);
}

.commentButtonsGroup button:active {
    background-color: var(--color-accent);
}

.commentButtonsGroup .selectedHop {
    background: hsl(var(--color-accent-h), var(--color-accent-s), 80%);
}

.editorButtonsGroup {
    width: 100%;
}

.editorButtonsGroup u {
    text-decoration: underline;
}

.editorButtonsGroup > button {
    width: 5em;
    height: 2.5em;
    line-height: 2.5em;
    text-align: center;
    padding: 0 1em;
    color: var(--color-background);
    background-color: hsl(var(--color-background-h), var(--color-background-s), 90%);
}

.editorButtonsGroup > button:active {
    color: var(--color-font-active);
    background-color: var(--color-accent);
}

.openCalculator {
    color: var(--color-background);
    display: inline-block;
    text-align: center;
    width: 100%;
    line-height: 2.7em;
    height: 2.7em;
    background: hsl(var(--color-background-h), var(--color-background-s), 88%);
}

.openCalculator:hover {
    background: hsl(var(--color-background-h), var(--color-background-s), 86%);
}

.comIntervalBox {
    max-height: 0;
    transition: max-height 200ms ease-out;
    overflow: hidden;
}

.comIntervalBox.showInterval {
    max-height: 10em;
}

.comIntervalBox td:first-child {
    width: 50%;
    padding-right: 0.4em;
}

.comIntervalBox td:last-child {
    padding-left: 0.4em;
}