.oe_form_field_html {
    position: relative;
    word-wrap: break-word;

    .note-editable {
        min-height: 180px;
        font: inherit !important;
        font-family: inherit !important;
        line-height: inherit !important;
        color: inherit !important;
        overflow: visible;

        p, div {
            font-family: 'Lucida Grande', Helvetica, Verdana, Arial, sans-serif;
            font-size: 13px;
        }
    }
    ul > li > p, p {
        margin: 0px;
    }
    > iframe {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        ul > li > p {
            margin: 0px;
        }
        min-height: 300px;
        min-height: -webkit-calc(100vh - 170px);
        min-height: calc(100vh - 170px);
    }
    .rounded {
        border-radius: .25rem !important;
    }
    table.table.table-bordered {
        table-layout: fixed;
    }
}

// FIX (to improve in next versions)
// ---------------------------------
// The web_editor.colorpicker defines a series of color buttons which toggle the bg-* and text-* classes.
// The problem is that themes can define new buttons whose bg-* and text-* classes only exist in the frontend.
// So these buttons should not be displayed in the backend. Only solution for the current implementation is
// to add this ugly rule (in this backend file) which hides every button and redisplayed the default ones.
.note-editor {
    .colorpicker .o_colorpicker_section > button {
        display: none;

        &[data-color="alpha"], &[data-color="beta"], &[data-color="gamma"], &[data-color="delta"], &[data-color="epsilon"],
        &[data-color="white"], &[data-color="gray-lighter"], &[data-color="gray-light"], &[data-color="gray"], &[data-color="gray-dark"], &[data-color="gray-darker"], &[data-color="black"],
        &[data-color="primary"], &[data-color="success"], &[data-color="info"], &[data-color="warning"], &[data-color="danger"] {
            display: block;
        }
    }
}