/* Paragraph field: lightweight rich-text box (contenteditable) */
.mf-rte { box-sizing: border-box; width: 100%; margin: 0; border: 1px solid #d5d9e3; border-radius: 12px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); overflow: hidden; color: #000; font-family: Arial, Helvetica, sans-serif; }
.mf-rte.mf-rte-small { width: 50%; min-width: 260px; }
.mf-rte.mf-rte-medium { width: 75%; }
.mf-rte-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 8px; background: #f4f5f8; border-bottom: 1px solid #e1e4ec; }
.mf-rte-bar .sep { width: 1px; height: 22px; background: #d5d9e3; margin: 0 4px; }
.mf-rte-bar button, .mf-rte-bar select { box-sizing: border-box; height: 30px; border: 1px solid #d5d9e3; border-radius: 6px; background: #fff; color: #070e4a; font-size: 14px; cursor: pointer; padding: 0 8px; line-height: 1; }
.mf-rte-bar button { min-width: 32px; display: inline-flex; align-items: center; justify-content: center; }
.mf-rte-bar button:hover, .mf-rte-bar select:hover { background: #eef1f8; }
.mf-rte-bar button.on { background: #070e4a; color: #fff; border-color: #070e4a; }
.mf-rte-bar button svg { display: block; }
.mf-rte-bar input[type=color] { width: 32px; height: 30px; padding: 2px; border: 1px solid #d5d9e3; border-radius: 6px; background: #fff; cursor: pointer; }
.mf-rte-area { box-sizing: border-box; min-height: 340px; max-height: 70vh; overflow: auto; resize: vertical; padding: 14px 16px; outline: none; font-size: 16px; line-height: 1.5; background: #fff; color: #000; word-wrap: break-word; }
.mf-rte-small .mf-rte-area { min-height: 130px; }
.mf-rte-medium .mf-rte-area { min-height: 230px; }
.mf-rte-area:focus { box-shadow: inset 0 0 0 2px rgba(0,103,192,.35); }
.mf-rte-area.is-empty:before { content: attr(data-placeholder); color: #8a8fa3; pointer-events: none; }
.mf-rte-area p { margin: 0 0 .6em; }
.mf-rte-area ul, .mf-rte-area ol { margin: 0 0 .6em 1.4em; padding: 0; }
.mf-rte-area ul { list-style: disc; } .mf-rte-area ol { list-style: decimal; }
.mf-rte-area li { background: none; float: none; width: auto; margin: 0; padding: 0; list-style: inherit; }
.mf-rte-area img { max-width: 100%; height: auto; }
.mf-rte-area table { border-collapse: collapse; } .mf-rte-area td, .mf-rte-area th { border: 1px solid #ccc; padding: 4px 8px; }
.mf-rte-area a { color: #0b5fd1; text-decoration: underline; }
.mf-rte-ro { box-shadow: none; background: #f7f7f9; }
.mf-rte-ro .mf-rte-bar { display: none; }
.mf-rte-ro .mf-rte-area { background: #f7f7f9; min-height: 0; resize: none; }
@media (max-width: 600px) { .mf-rte.mf-rte-small, .mf-rte.mf-rte-medium { width: 100%; } }

/* win against the form theme's generic "li div" / "li div span" rules and the transparent-form text colour */
html #main_body form li div.mf-rte { margin: 0 !important; padding: 0 !important; float: none !important; display: block !important; box-sizing: border-box !important; }
html #main_body form li div.mf-rte-bar { margin: 0 !important; padding: 6px 8px !important; float: none !important; display: flex !important; }
html #main_body form li div.mf-rte .mf-rte-area { margin: 0 !important; padding: 14px 16px !important; float: none !important; display: block !important; width: auto !important; box-sizing: border-box !important; }
html #main_body form li div.mf-rte-bar .sep { float: none !important; display: inline-block !important; width: 1px !important; height: 22px !important; margin: 0 4px !important; padding: 0 !important; background: #d5d9e3 !important; }
html #main_body#main_body#main_body .mf-rte-area { color: #000 !important; -webkit-text-fill-color: #000 !important; background: #fff !important; }
html #main_body#main_body#main_body .mf-rte-area.is-empty:before { color: #8a8fa3 !important; }
html #main_body#main_body#main_body .mf-rte-ro .mf-rte-area { background: #f7f7f9 !important; }
html #main_body#main_body#main_body .mf-rte-bar button, html #main_body#main_body#main_body .mf-rte-bar select { color: #070e4a !important; -webkit-text-fill-color: #070e4a !important; background: #fff !important; border: 1px solid #d5d9e3 !important; border-radius: 6px !important; width: auto !important; }
html #main_body#main_body#main_body .mf-rte-bar button.on { background: #070e4a !important; color: #fff !important; -webkit-text-fill-color: #fff !important; }

/* icons / B I U inside toolbar buttons must follow the button's colour (a page-wide "* { color }" rule recoloured them) */
html #main_body#main_body#main_body .mf-rte-bar button *, html #main_body#main_body#main_body .mf-rte-bar button svg { color: inherit !important; -webkit-text-fill-color: currentColor !important; stroke: currentColor; }
html #main_body#main_body#main_body .mf-rte-bar button.on, html #main_body#main_body#main_body .mf-rte-bar button.on * { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html #main_body#main_body#main_body .mf-rte-bar button.on svg { stroke: #fff; }