li label {
    display: inline-block;
    width: 280px;
}

li input {
    margin: 3px;
}

body {
    counter-reset: section-count -1; /* Initialize counter */
}

h2 {
    counter-increment: section-count; /* Increase counter for every h2 */
}

/* h2::before { */
/*     content: counter(section-count) '. '; /* Display counter */
/* } */

body {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;
}

#main {
    width: 700px;
}

input[type='number'] {
    width: 80px;
}

textarea {
    width: 440px;
}

span.line-text {
    display: inline-block;
    width: 335px;
}

span.def {
    display: inline-block;
    width: 110px;
}

span.cost {
    display: inline-block;
    text-align: right;
    width: 110px;
}

span.def {
    visibility: hidden;
}

.edit > span.def {
    visibility: visible;
}

.hidden {
    display: none;
    visibility: hidden;
}

#ol-trigger {
    position: fixed;
    top: 10px;
    right: 10px;
}

#overlay {
    position: fixed;
    top: 10px;
    white-space: pre-wrap;
    font-family: monospace;
    background-color: lightgray;
    overflow: auto; /* Adds scrollbars only when content overflows */
    border: 1px solid #ccc;
    padding: 10px;
    height: 800px;
}

#calcline {
    display: flex;
    flex-direction: row; /* Use row for horizontal filling */
    /* height: 100vh; */
}

.cstep {
    border: 1px solid black;
    border-radius: 5px;
    margin: 3px;
    flex: 1; /* Fills all remaining space */
}

.cstep span {
    display: block;
}

.cstep.selected {
    background-color: lightblue;
}

.edit > div > span.line-text {
    background-color: lightsalmon;
}