/* ==========================================================
   ForumHub Common Rich Editor
   Notice / Server Rules / Server Rates
   ========================================================== */


/* ----------------------------------------------------------
   FONT SIZE
   ---------------------------------------------------------- */

.rich-editor .fh-fs-13,
.notice-rendered-body .fh-fs-13,
.server-document-body .fh-fs-13,
.fh-notice-popup-body .fh-fs-13 {
    font-size:13px !important;
}

.rich-editor .fh-fs-15,
.notice-rendered-body .fh-fs-15,
.server-document-body .fh-fs-15,
.fh-notice-popup-body .fh-fs-15 {
    font-size:15px !important;
}

.rich-editor .fh-fs-17,
.notice-rendered-body .fh-fs-17,
.server-document-body .fh-fs-17,
.fh-notice-popup-body .fh-fs-17 {
    font-size:17px !important;
}

.rich-editor .fh-fs-20,
.notice-rendered-body .fh-fs-20,
.server-document-body .fh-fs-20,
.fh-notice-popup-body .fh-fs-20 {
    font-size:20px !important;
}

.rich-editor .fh-fs-24,
.notice-rendered-body .fh-fs-24,
.server-document-body .fh-fs-24,
.fh-notice-popup-body .fh-fs-24 {
    font-size:24px !important;
}

.rich-editor .fh-fs-30,
.notice-rendered-body .fh-fs-30,
.server-document-body .fh-fs-30,
.fh-notice-popup-body .fh-fs-30 {
    font-size:30px !important;
}


/* ----------------------------------------------------------
   LINE HEIGHT
   ---------------------------------------------------------- */

.rich-editor .fh-lh-15,
.notice-rendered-body .fh-lh-15,
.server-document-body .fh-lh-15,
.fh-notice-popup-body .fh-lh-15 {
    line-height:1.5 !important;
}

.rich-editor .fh-lh-18,
.notice-rendered-body .fh-lh-18,
.server-document-body .fh-lh-18,
.fh-notice-popup-body .fh-lh-18 {
    line-height:1.8 !important;
}

.rich-editor .fh-lh-21,
.notice-rendered-body .fh-lh-21,
.server-document-body .fh-lh-21,
.fh-notice-popup-body .fh-lh-21 {
    line-height:2.1 !important;
}


/* ----------------------------------------------------------
   TEXT COLOR
   ---------------------------------------------------------- */

.fh-tc-mint {
    color:#28b7b2 !important;
}

.fh-tc-blue {
    color:#438fd5 !important;
}

.fh-tc-red {
    color:#e55e65 !important;
}

.fh-tc-yellow {
    color:#c99a21 !important;
}

.fh-tc-gray {
    color:#83909b !important;
}


/* ----------------------------------------------------------
   TEXT ALIGNMENT
   ---------------------------------------------------------- */

.rich-editor .text-left,
.notice-rendered-body .text-left,
.server-document-body .text-left,
.fh-notice-popup-body .text-left {
    text-align:left !important;
}

.rich-editor .text-center,
.notice-rendered-body .text-center,
.server-document-body .text-center,
.fh-notice-popup-body .text-center {
    text-align:center !important;
}

.rich-editor .text-right,
.notice-rendered-body .text-right,
.server-document-body .text-right,
.fh-notice-popup-body .text-right {
    text-align:right !important;
}


/* ----------------------------------------------------------
   COMMON TOOLBAR EXTENSIONS
   ---------------------------------------------------------- */

.fh-editor-color-wrap {
    position:relative;
}

.fh-editor-color-palette {
    position:absolute;
    top:42px;
    left:0;
    z-index:999;

    width:178px;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:5px;

    padding:8px;

    border:1px solid #d9e0e6;
    border-radius:10px;

    background:#fff;

    box-shadow:
        0 14px 35px rgba(15,30,45,.18);
}

.fh-editor-color-palette.hidden {
    display:none !important;
}

.fh-editor-color-palette button {
    min-width:48px !important;
    min-height:34px !important;

    padding:0 6px !important;

    border:1px solid #e0e6ea !important;
    background:#fff !important;

    color:#40505e !important;

    font-size:9px !important;
}

.fh-editor-color-dot {
    display:inline-block;

    width:11px;
    height:11px;

    margin-right:3px;

    border-radius:50%;

    vertical-align:-1px;
}

.fh-editor-color-dot.default {
    background:#35414c;
}

.fh-editor-color-dot.mint {
    background:#28b7b2;
}

.fh-editor-color-dot.blue {
    background:#438fd5;
}

.fh-editor-color-dot.red {
    background:#e55e65;
}

.fh-editor-color-dot.yellow {
    background:#c99a21;
}

.fh-editor-color-dot.gray {
    background:#83909b;
}


/* 현재 정렬 상태 */

.rich-toolbar button.fh-align-active {
    border-color:#35b9b5 !important;
    background:#dff6f4 !important;
    color:#147d79 !important;
}


/* 서버 에디터와 공지 에디터 크기/느낌 통일 */

.notice-editor-page .rich-toolbar,
.server-document-rich .rich-toolbar {
    gap:5px;
}

.notice-editor-page .rich-toolbar select,
.server-document-rich .rich-toolbar select {
    min-height:34px;
}

.notice-editor-page .rich-editor,
.server-document-rich .rich-editor {
    font-size:15px;
    line-height:1.85;
}


/* 모바일 */

@media (max-width:760px) {

    .notice-editor-page .rich-toolbar,
    .server-document-rich .rich-toolbar {
        flex-wrap:nowrap;
        overflow-x:auto;
    }

    .notice-editor-page .toolbar-group,
    .server-document-rich .toolbar-group {
        flex:0 0 auto;
    }
}