.markdown.fr-box {
    margin: 10px 0px;
    overflow: visible;
    border: 1px solid #AECADE;
    min-height: 174px;
    background-color: #fff;
    overflow-anchor: none;
    box-sizing: unset;
}

.fr-box.fr-basic {
    border-radius: 0;
}

.fr-box.fr-basic .fr-wrapper {
    border: none;
}

.fr-box.fr-basic .fr-element, .fr-code {
    padding: 0px 20px;
    transition: padding-top 0.2s ease;
    height: 176px;
}

/* custom resize handle for froala */
.fr-element.fr-view,
.fr-box.fr-code-view textarea.fr-code {
    resize: vertical;
}

#requirements_display .fr-wrapper .fr-element.fr-view {
    resize: none !important;
}

#requirements_display .fr-wrapper {
    overflow: auto;
}

.fr-view .fr-class-code {
    padding: 3px;
}

.fr-toolbar.fr-top {
    border-radius: 0px;
    border: none;
    z-index: 2;
    background: white;
}

.fr-toolbar .fr-newline {
    margin: 0px;
}

.fr-toolbar .fr-command.fr-btn svg.fr-svg {
    margin: 6px 7px;
    height: 20px;
}

.fr-toolbar .fr-more-toolbar.fr-expanded {
    height: 38px;
}

.fr-toolbar .fr-command.fr-btn {
    height: 30px;
}

.fr-toolbar .fr-command.fr-btn svg path {
    fill: #44546f;
}

/* even though we make attribution to false in application.froala.js the fr-second-toolbar container stays
   visible, so we hide it */
.fr-second-toolbar {
    display: none;
}

/* overrides css/base-modern.css */
div.fr-element[contenteditable="true"]:focus-visible {
    border-bottom: 0px !important;
}

/* reduces the space between toolbar groups */
.fr-toolbar .fr-btn-grp {
    margin: 0 2px 0 2px;
}

.fr-popup {
    z-index: 200 !important;
    white-space: normal;
}

.fr-view img,
.fr-view img.fr-dii {
    max-width: 425px;
}

/* variables dropdown */
.froala-variable-autocomplete {
    position: fixed;
    z-index: 9999;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    max-height: 200px;
    overflow-y: auto;
    min-width: 150px;
}

.froala-variable-autocomplete ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.froala-variable-autocomplete li a {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    display: block;
    text-decoration: none;
    color: inherit;
    background-color: #fff;
    transition: background-color 0.15s ease;
}

.froala-variable-autocomplete li a:hover {
    background-color: #f5f5f5;
}

.froala-variable-autocomplete li:last-child a {
    border-bottom: none;
}

.fr-toolbar .fr-more-toolbar>.fr-command.fr-btn {
    margin-left: 3px;
    margin-right: 3px;
}

.markdown sub,
.markdown sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

.markdown sup {
    top: -0.5em;
}

.markdown sub {
    bottom: -0.25em;
}

.fr-wrapper .fr-placeholder {
    position: absolute !important;
    top: 12px !important;
    left: 20px !important;
    right: 20px !important;
    padding: 0 !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow-y: hidden !important;
    word-break: break-word !important;
}

.markdown:not(:has(*)) {
    white-space: pre-wrap;
}

.fr-element table, .fr-view table {
    table-layout: auto;
}

.fr-element td, .fr-view td {
    word-break: break-word;
    overflow-wrap: break-word;
}

.fr-element td img, .fr-view td img {
    max-width: 100%;
}

.fr-element td img[style*="width"], .fr-view td img[style*="width"] {
    max-width: none;
}

.fr-element table {
    margin: 10px 0 !important;
}

.markdown .fr-element strong {
    color: unset;
}

.CodeMirror-gutters {
    height: 100%!important;
}

.CodeMirror-gutter.CodeMirror-linenumbers {
    height: 100%;
}

.chosen-container.chosen-with-drop {
    z-index: 10000 !important;
}

.chosen-container.chosen-with-drop .chosen-drop {
    z-index: 10001 !important;
}

.fr-element.fr-view.fr-markdown-editor {
    padding-top: 12px;
    background-color: #f6f6f6;
}