.rawt-note {
    position: relative;
    margin: 1.5em 0;
}

.rawt-note .note-date {
    position: absolute;
    top: 0.5em;
    left: 1em;
    font-size: 0.7em;
    font-weight: 600;
}

.rawt-note .note-content {
    position: relative;
    font-size: 0.9em;
    line-height: 1.2em;
    background: #fff;
    padding: 2.8em 1em 1em 1em;
}

.rawt-note .note-content .note-controls {
    position: absolute;
    top: 0.5em;
    right: 0;
    font-size: 1.5em;
}

.rawt-note .note-content .note-controls a {
    display: inline-block;
    padding: 0 0.5em;
}

.rawt-notes.inactive .rawt-note .note-edit,
.rawt-notes.inactive .rawt-note .note-remove {
    opacity: 0.5;
    cursor: default;
}

.rawt-note-empty {
    display: none;
}

.rawt-notes.empty .rawt-note-empty {
    display: block;
}

.rawt-note .note-remove .icon::before {
    content: "\f1f8";
}

.rawt-note .note-content .note-controls a .icon {
    margin: 0;
}

.rawt-note .note-content .edit {
    width: 100%;
    box-sizing: border-box;
}

.rawt-note .note-content .value {
    white-space: pre-wrap;
}

.rawt-note .note-item {
    font-size: 0.8em;
    padding: 0.8em;
    display: table;
    width: 100%;
    box-sizing: border-box;
}

.rawt-note .note-item a {
    display: block;
}

.rawt-note .note-item .item-image,
.rawt-note .note-item .item-title {
    display: table-cell;
    vertical-align: middle;
}

.rawt-note .note-item .item-image {
    width: 32px;
}

.rawt-note .note-item .item-image img {
    width: 32px;
    height: 32px;
}

.rawt-note .note-item .item-title {
    padding-left: 1em;
}

.rawt-note .note-edit .icon::before {
    content: "\f040";
}

.rawt-note .note-remove .icon::before {
    content: "\f1f8";
}

.rawt-note .note-save .icon::before {
    content: "\f00c";
}

.rawt-note .note-cancel .icon::before {
    content: "\f00d";
}

/* Confirm */
.rawt-note-confirm .button {
    display: inline-block;
    margin-right: 1em;
}