.main {
    display: flex;
    flex-direction: row;
}

#create-note-bar {
    display: flex;
    flex-direction: row;
    flex-flow: row wrap;
    justify-content: center;
    padding: 0.5em;
}

#notes-list-filter-container, #notes-list-sort-container {
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    min-width: 5em;
}

#notes-list-filter-container {
    flex-grow: 2;
}

#notes-create-button {
    margin-right: 0.5em;
}

#notes-list-filter {
    width: 100%;
    height: 50%;
}

#notes-list-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    /*background-color: aqua;*/
    max-width: 50em;
}

#notes-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    /*background-color: aqua;*/
    max-width: 50em;
}

.buffer {
    display: flex;
    flex-direction: column;
    flex-shrink: 2;
    width: 100%;
}

.note {
    display: flex;
    flex-direction: column;
    padding: 0.5em 0.5em 0.5em 0.5em;
    margin: 0.2em; /* NB: This makes 0.4em of margin between notes, but 0.2em at the top & bottom of the list. I am fine with this. */
    /*background-color: blueviolet;*/
    background-color: darkgray;
    font-family: monospace;
    border-radius: 0.5em;
    color: black;
    cursor: pointer;
}

.note:link { text-decoration: none; }
.note:visited { text-decoration: none; }
.note:hover { text-decoration: none; }
.note:active { text-decoration: none; }
.note:hover { background-color: lightgray; }
.note:focus { background-color: lightgray; }

.note-metadata {
    display: flex;
    flex-direction: row;
}

.note-timestamp-container {
    display: flex;
    flex-direction: column;
}

.note-delete-button-container {
    margin-left: 0.5em;
}

.note-delete-button {
    font-weight: bold;
    background-color: lightcoral;
    color: black;
}

.note-timestamp {
    color: dimgray;
    font-size: x-small;
    text-wrap: nowrap;
}

.note-title {
    font-weight: bold;
    width: 100%;
}

.note-preview {
    margin-top: 1em;
    font-size: x-small;
}

#note-title-bar {
    display: flex;
    flex-direction: row;
}

#note-title {
    border: 0.1px solid #ccc;
    border-radius: 0.5em;
    padding: 0.3em;
    font-size: x-large;
}

#sort-criterion-select {
    margin-top: 0.8em;
    margin-bottom: 0.8em;
    margin-left: 0.5em;
    height: 50%;
}

.notes-button-container {
    /*margin: 0.5em;*/
    padding: 0.5em;
    margin: auto;
}

.notes-button {
    background-color: darkgrey;
    min-width: 1.3em;
    font-size: 1.5em;
    border-radius: 20%;
    border-width: 0.1em;
}

.save-button {
    padding-left: 0.3em;
    font-size: large;
    padding-top: 0.6em;
}

.delete-button > button {
    background-color: lightcoral;
    color: white;
}

#note-title.note-title-edited {
    background-color: yellow;
}

/* #note-title:hover {
    background-color: aqua;
} */

.editor-console {
    width: 100%;
}

.editor-container {
    width: 100%;
    background-color: aqua;
    min-height: 50em;
    border: 0.3em solid grey;
}

#editor {
    margin: 0.5em;
    width: 100%;
    height: 100%;
    min-height: inherit;
    font-family: monospace;
}

#login-container {
    width: 100%;
    background-color: aqua;
    text-align: center;
}