body {
}

div.note-to-editor {
    width: 100%;
    display: flex;
    align-items: center;
}

p.note-to-editor {
    font-size: small;
}

span.note-to-editor-obs {
    color: red;
    vertical-align: middle;
    margin-left: .5em;
}

input.note-to-editor {
    float: left;
    flex: auto;
}

input.note-to-editor.changed {
    background-color: lightyellow;
}

button.note-to-editor {
    float:right;
    flex: 0;
    margin-left: .5em;
}

button.note-to-editor.changed {
    border: 2px solid red;
}

@keyframes infoHighlight {
    0% {background-color: white }
    25% {background-color: moccasin }
    50% { background-color: white }
    75% { background-color: moccasin }
    100% { background-color: white }
}

div.note-to-editor-info-highlight {
    animation-name: infoHighlight;
    animation-duration: 2s;
}