body {
    font-family: sans-serif;
    margin: 0 1em 50vh 1em;
}

#panelDiv {
    background: white;
    position: sticky;
    top: 0;
}

#mediaMedio {
    /* Prevent videos with weird aspect ratios from messing up the app */
    max-height: 50vw;
    width: 100%;
}

#editorDiv {
    display: flex;
    align-items: center;
}

#lyricsDiv {
    background: linear-gradient(to right, transparent 49.9%, silver 49.9%, silver 50.1%, transparent 50.1%);
    height: 10vh;
    overflow: hidden;
    position: relative;
}

.lyricDiv {
    display: inline-flex;
    flex-direction: column;
    position: absolute;
}

.lyricDiv progress {
    /* `width: auto` doesn't work in Firefox so we need to use the combo of `min-width` and `width` */
    min-width: 100%;
    width: 0;
}

.timeSpan {
    font-family: monospace;
    white-space: pre;
}

#helpButton {
    margin-left: auto;
}

.stampDiv {
    display: flex;
    flex-direction: column;
    margin: 1ex 0;
}

.toolDiv {
    display: flex;
    align-items: center;
}

.pivotStampDiv {
    background: lightblue;
    outline: lightblue;
}