#lessonNoteDialog {
    width: 50vw;
    max-width: 50vw;
    height: 50vh;
    overflow: hidden;
}

#lessonNoteDialog[open] {
    display: flex;
    flex-direction: column;
}

#lessonNoteDialog .dialogBody {
    display: flex;
    flex-direction: column;
    flex: 1 1 100%;
    min-height: 0;
}

#lessonNoteDialog input[type="checkbox"] {
    height: unset;
    width: unset;
}

#noteEditorContainer {
    display: flex;
    flex-direction: column;
    flex: 1 1 100%;
    min-height: 0;

}

#noteContentEditor {
    border: solid 1px var(--bodyBackground);
    padding: 0.5rem;
    background-color: white;
    flex: 1 1 100%;
    overflow-y: auto;
    min-height: 0;
}

#noteContentEditor>*:first-child {
    margin-top: 0;
}

.placeholder {
    color: var(--lightgrey);
}

#noteContentEditor p,
#noteContentEditor div {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#editorButtonContainer button[aria-pressed="true"] {
    background-color: var(--lightgrey);
}

#editorButtonContainer button {
    color: black;
    display: flex;
    align-items: center;
    border: none;
    padding: 0.25rem 1rem;
    border-radius: var(--smallRadius);
    background-color: var(--lightergrey);
}

#editorButtonContainer button svg {
    width: 1rem;
    height: 1rem;
    fill: black;
}

#noteSavedMessage {
    visibility: hidden;
    color: var(--matteGreen);
}

#noteSavedMessage.active {
    visibility: visible;
    animation-name: showSavedMessage;
    animation-duration: 2s;
    animation-timing-function: ease-out;
}

@keyframes showSavedMessage {
    0% {opacity: 100}
    50% {opacity: 100}
    100% {opacity: 0}
}
 
@media screen and (max-width: 620px) {
    
    #lessonNoteDialog {
        min-width: 100%;
        max-width: 100%;
        height: 100vh;
        max-height: 100%;
        margin: 0;
    }
}