.x-froala {
    /* prevent popus outside of visible space create second scrollbar in fat */
     /* overflow: hidden; */
     display: flex;
     flex-direction: column;
    
    .fr-box {
        height: 100%;
        overflow: auto;
        flex: 1;
        
        border: 0;

        .fr-wrapper {
            cursor: text;
            border: 0;
            /* overflow: auto; */
        }
    }
    .fr-toolbar.fr-top {
        border: 0;
    }
    .fr-second-toolbar {
        border: 0;
        display: none;
    }

    /* Platz zwischen dropdown menu ikone und dem Pfeil vom dropdown */
    .fr-toolbar .fr-command.fr-btn.fr-dropdown i, .fr-toolbar .fr-command.fr-btn.fr-dropdown span, .fr-toolbar .fr-command.fr-btn.fr-dropdown img, .fr-toolbar .fr-command.fr-btn.fr-dropdown svg, .fr-popup .fr-command.fr-btn.fr-dropdown i, .fr-popup .fr-command.fr-btn.fr-dropdown span, .fr-popup .fr-command.fr-btn.fr-dropdown img, .fr-popup .fr-command.fr-btn.fr-dropdown svg, .fr-modal .fr-command.fr-btn.fr-dropdown i, .fr-modal .fr-command.fr-btn.fr-dropdown span, .fr-modal .fr-command.fr-btn.fr-dropdown img, .fr-modal .fr-command.fr-btn.fr-dropdown svg {
        margin-right: 1em;
    }
    
    /* Wenn Button aktiv (z.B. cursor in einem Fetten, Kursiven...etc. text), dann Hintergrund blau zum Markieren. */
    .fr-toolbar button.fr-command.fr-btn.fr-active{
        background-color: rgba(0, 0, 255, 0.15);
    }
    
    /* Toolbar verkleinern */
    /* Button Höhe */
    .fr-toolbar .fr-command.fr-btn, .fr-popup .fr-command.fr-btn, .fr-modal .fr-command.fr-btn {
        height: 1.7em;
    }
    
    
    
    /* FAT Button Ikonen größe und Platz um Ikone (Fat benutzt img-tags und Web span-tags für Ikonen) */
    .fr-toolbar .fr-command.fr-btn img, .fr-popup .fr-command.fr-btn img, .fr-modal .fr-command.fr-btn img {
        width: 1.5em;
        height: 1.5em;
        margin: 0;
        padding: 3px;
    }
    /* SVG (Menu Buttons) platz nach oben und zur seite */
    .fr-toolbar .fr-command.fr-btn i, .fr-toolbar .fr-command.fr-btn svg, .fr-popup .fr-command.fr-btn i, .fr-popup .fr-command.fr-btn svg, .fr-modal .fr-command.fr-btn i, .fr-modal .fr-command.fr-btn svg {
        margin: 0;
    }
    /* Menu Button height */
    .fr-toolbar .fr-command.fr-btn svg.fr-svg, .fr-popup .fr-command.fr-btn svg.fr-svg, .fr-modal .fr-command.fr-btn svg.fr-svg {
        height: 1.5em;
    }
    /* Seitlicher Platz zwischen Button gruppen */
    .fr-toolbar .fr-btn-grp {
        margin: 0; 
    }
    /* Untermenü höhe */
    .fr-toolbar .fr-more-toolbar.fr-expanded {
        height: auto;
    }
    
    /* Platzhalter text verschieben */
    .fr-wrapper.show-placeholder .fr-placeholder {
        padding: 5px 10px !important;
        margin: 0.5em 0 !important;
    }
    
    .fr-command.fr-btn+.fr-dropdown-menu {
        /*Web fix: Dropdown overflow hidden in formularen*/
        /* top: auto !important;
        left: auto !important;
        position: fixed; */

        .fr-dropdown-wrapper{
            .fr-dropdown-content {
                /* Text im Dropdown kleiner */
                ul.fr-dropdown-list li {
                    font-size: 1em;
                
                    /* Fix: Pharagraph format dropdown Normal und Code haben falsche größe, weil froala da fest 15px dran schreibt.*/
                    p {
                        font-size: 1em !important;
                    }
                    pre {
                        font-size: 1em !important;
                    }
                }
            }
        }
    }
    
    /* Toolbar Font */
    .fr-toolbar {
        /* color: #293136; */
        font-size: 1em;
        font-weight: normal;
        font-family: tahoma, arial, verdana, sans-serif;
    }
    
    /* Tooltip Font (Extra color weggelassen, weil beim Tooltip der Hintergrund schwarz und die Font weiß ist.) */
    .fr-tooltip {
        font-size: 1em;
        font-weight: normal;
        font-family: tahoma, arial, verdana, sans-serif;
    }
    
    .fr-toolbar .fr-command.fr-btn span, .fr-popup .fr-command.fr-btn span, .fr-modal .fr-command.fr-btn span {
        font-size: 1em;
    }
    
    button {
        font-size: 1em;
    }
    
    /* Dropdown Pfeil Ikone an Schriftgröße anpassen*/
    .fr-command.fr-btn.fr-options {
        width: 1.2em;
    }
    .fr-toolbar .fr-command.fr-btn.fr-dropdown:after, .fr-popup .fr-command.fr-btn.fr-dropdown:after, .fr-modal .fr-command.fr-btn.fr-dropdown:after {
        border-left: 0.4em solid transparent;
        border-right: 0.4em solid transparent;
        border-top: 0.4em solid #333333;
        /* Dropdown Pfeil Position */
        top: 0.75em;
    }
    .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:after, .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:after, .fr-modal .fr-command.fr-btn.fr-dropdown.fr-active:after {
        border-top: 0;
        border-bottom: 0.4em solid #222222;
    }

    /* Fix: Toolbar menu "ausrichtung" dropdown breiter als es sein muss */
    .fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list {
        min-width: 16px;
    }
    body[dir="rtl"] .mp-icon-0159 {
    }
}

/* von mariproject.css gesetzt, macht aber z.B. den table selector in froala kaputt, deswegen in froala zurücksetzen */
.x-border-box {
    .x-froala * {
        box-sizing: unset;
        -moz-box-sizing: unset;
        -ms-box-sizing: unset;
        -webkit-box-sizing: unset;
    }
}


/*https://github.com/froala/wysiwyg-editor/issues/1195 every image keeps the cursor: pointer rule even, when not in froala editor*/
.fr-element img { cursor: default !important; }