body {
    background-color: #e6f9ff;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#pageContainer {
    width: 80vw;
    margin-top: 5vh;
    margin-bottom: 2em;
}

/* Controls */

#controlContainer {
    display: none;
}

#controlForm {
    margin-bottom: 0.8em;
}

#noteCol {
    min-width: 6.3em;
}

#scaleCol {
    min-width: 11.5em;
}

#keysigCol {
    min-width: 10em;
}

#clefCol {
    min-width: 6.5em;
}

#transposeCol {
    min-width: 8.5em;
}

#noteCol, #scaleCol, .buttonCol, #keysigCol, #clefCol, #transposeCol, #octaveRow {
    margin-bottom: 0.5em;
}

#bottomOptionsContainer {
    width: 100%;
    display: none;
}

#octaveRow, #bpmRow {
    width: max-content;
}

#bottomOptionsForm .col {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

#bpmInput {
    width: 4.6em;
}

/* Page Content */

#titlesContainer {
    margin-bottom: 0.5rem;
    display: none;
}

#renderTitle {
    margin-bottom: 0;
}

#transposeTitle {
    margin-bottom: 0;
    display: none;
}

#renderContainer {
    margin-bottom: 1.5em;
}

/* Playback */

#audio svg {
    vertical-align: unset;
    /* vertical-align has no effect on music render since it’s not an inline or table-cell element. That is what we want, so this is okay */
    /*TODO: comment still relevant? */
}

.highlight {
    fill: #0a9ecc; /* Note highlighting when playing */
}

.abcjs-cursor {
    stroke: red;
}

.audio-error {
    color: red;
    border: 2px solid red;
    padding: 10px;
}

.abcjs-inline-audio .abcjs-midi-loop.abcjs-pushed {
    background-color: var(--info) !important;
    border: 1px solid transparent !important; /* Same as the default from .abcjs-inline-audio .abcjs-btn */
}

/* Responsiveness */

@media only screen and (min-width: 1200px) {
    #renderContainer {
        width: 50%;
    }
}

@media only screen and (max-width: 1200px) {
    #renderContainer {
        width: 60%;
    }
}

@media only screen and (max-width: 1000px) {
    #renderContainer {
        width: 70%;
    }
}

@media only screen and (max-width: 800px) {
    #renderContainer {
        width: 90%;
    }
}

@media only screen and (max-width: 560px) {
    #pageContainer {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    #titlesContainer {
        text-align: center;
    }

    #renderContainer {
        flex-shrink: 0;
        width: 90vw;
    }
}