﻿.mce-fontawesome-panel .mce-container-body > .mce-container,
.mce-fontawesome-panel .mce-container-body > .mce-container > .mce-container-body {
    height: auto !important;
    width: 670px;
}

.mce-fontawesome-panel .mce-container-body > .mce-container {
    position: static;
    margin-top: 10px;
    margin-left: 10px;
}

.mce-fontawesome-panel-title {
    display: flex;
    align-items: center;
    font-weight: 700;
    margin-top: 5px;
    margin-bottom: 4px;
    cursor: pointer;
    padding: 6px;
    border-bottom: 1px solid transparent;
}

    .mce-fontawesome-panel-title:hover,
    .mce-fontawesome-panel-title:focus {
        background-color: rgba(0,0,0,.1);
    }

.mce-fontawesome-panel-search .mce-fontawesome-panel-title:hover,
.mce-fontawesome-panel-search .mce-fontawesome-panel-title:focus {
    background-color: transparent;
}

.mce-fontawesome-panel-accordion-open .mce-fontawesome-panel-title {
    border-bottom: 1px solid #eee;
}

.mce-fontawesome-panel-accordion:first-child .mce-fontawesome-panel-title {
    margin-top: 0;
}

.mce-fontawesome-panel-accordion-indicator {
    margin-left: auto;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.mce-fontawesome-panel-content {
    transition: .5s height;
    overflow: hidden;
}

.mce-fontawesome-panel .mce-icon-cell {
    position: relative;
    float: left;
    width: 29px;
    height: 29px;
}

.mce-fontawesome-panel .fa {
    display: block;
    line-height: 29px;
    font-family: "Font Awesome 5 Free";
    cursor: pointer;
    text-align: center;
    border-radius: 3px;
}

    .mce-fontawesome-panel .fa:hover,
    .mce-fontawesome-panel .fa:focus {
        background-color: rgba(0,0,0,.1);
    }

/* Search */
.mce-fontawesome-search-container {
    position: absolute;
    margin: 10px 0 0 10px;
}

    .mce-fontawesome-search-container::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f002";
        position: absolute;
        top: 0;
        left: 0;
        line-height: 30px;
        color: rgba(0,0,0,.4);
    }

.mce-fontawesome-search-container-clear {
    position: absolute;
    display: none;
    top: 0;
    right: 0;
}

.mce-fontawesome-panel-search .mce-fontawesome-search-container-clear {
    display: block;
}

.mce-fontawesome-search-container-clear span {
    line-height: 30px;
    color: rgba(0,0,0,.4);
}

.mce-fontawesome-search-container-clear:hover span,
.mce-fontawesome-search-container-clear:focus span {
    color: rgba(0,0,0,.8);
}

.mce-fontawesome-search-container input {
    display: block;
    width: 200px;
    height: 30px;
    line-height: 30px;
    margin: 0;
    padding: 0 25px 0 25px;
    border: 0 solid;
    border-bottom: 1px solid rgba(0,0,0,.2);
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

    .mce-fontawesome-search-container input::-webkit-input-placeholder {
        color: rgba(0,0,0,.4);
    }

    .mce-fontawesome-search-container input::-moz-placeholder {
        color: rgba(0,0,0,.4);
    }

    .mce-fontawesome-search-container input:-ms-input-placeholder {
        color: rgba(0,0,0,.4);
    }

.mce-fontawesome-search-noresults {
    text-align: center;
    color: rgba(0, 0, 0, 0.4);
    position: absolute;
    left: 0px;
    right: 0px;
    top: calc(50% - 8px);
}

/* Toolbar icon */
.mce-i-flag {
    display: inline-block;
    font-family: "Font Awesome 5 Brands";
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-right: 1px;
    position: relative;
    top: 1px;
}

    .mce-i-flag:before {
        content: "\f280";
    }
