/*!
 * TOAST UI Editor : Color Syntax Plugin
 * @version 3.0.3 | Thu Apr 14 2022
 * @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
 * @license MIT
 */
.toastui-editor-popup-color {
    padding: 0
}

.toastui-editor-popup-color .tui-colorpicker-container,
.toastui-editor-popup-color .tui-colorpicker-palette-container {
    width: 147px
}

.toastui-editor-popup-color .tui-colorpicker-container ul {
    margin-bottom: 10px;
    width: 152px
}

.toastui-editor-popup-color .tui-colorpicker-container li {
    padding: 0 3px 3px 0
}

.toastui-editor-popup-color .tui-colorpicker-container li .tui-colorpicker-palette-button {
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 50%;
    box-sizing: border-box;
    height: 16px;
    width: 16px
}

.toastui-editor-popup-color .tui-popup-body {
    padding: 10px
}

.toastui-editor-popup-color .tui-colorpicker-container .tui-colorpicker-palette-toggle-slider {
    display: none
}

.toastui-editor-popup-color .tui-colorpicker-container .tui-colorpicker-svg-slider {
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 3px
}

.toastui-editor-popup-color .tui-colorpicker-palette-hex {
    float: right
}

.toastui-editor-popup-body input[type=text].tui-colorpicker-palette-hex {
    border: 1px solid #e1e3e9;
    border-radius: 2px;
    float: left;
    font-family: inherit;
    font-size: 14px;
    height: 32px;
    padding: 3px 10px 3px 10px;
    width: 100px
}

.toastui-editor-popup-color button {
    background: #f7f9fc;
    border: 1px solid #e1e3e9;
    color: #555;
    height: 32px;
    position: absolute;
    right: 15px;
    top: 68px;
    width: 40px
}

.toastui-editor-popup-color button:hover {
    border-color: #cbcfdb
}

.toastui-editor-popup-color .tui-colorpicker-container div.tui-colorpicker-clearfix {
    display: inline-block;
    margin: 5px 0;
    width: 102px
}

.toastui-editor-popup-color .tui-colorpicker-container .tui-colorpicker-palette-preview {
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 50%;
    box-sizing: border-box;
    height: 16px;
    margin-left: -22px;
    margin-top: 8px;
    width: 16px
}

.toastui-editor-popup-color .tui-colorpicker-slider-container .tui-colorpicker-slider-right {
    width: 19px
}

.toastui-editor-popup-color .tui-colorpicker-slider-container .tui-colorpicker-svg-huebar {
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: 3px;
    overflow: auto
}

.toastui-editor-popup-color .tui-colorpicker-slider-container .tui-colorpicker-huebar-handle {
    display: none
}

.toastui-editor-toolbar-icons.color {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIxMTYiPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGc+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIvPjxwYXRoIGZpbGw9IiM1NTUiIGQ9Ik04IDEzaDh2MS41SDh6Ii8+PHBhdGggc3Ryb2tlPSIjNTU1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBkPSJtNiAxOS4yNSA2LTE0LjUgNiAxNC41Ii8+PHJlY3Qgd2lkdGg9IjUiIGhlaWdodD0iNSIgeD0iMTgiIHk9IjQiIGZpbGw9IiNGQTI4MjgiIHJ4PSIyLjUiLz48L2c+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCA1MikiPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiLz48cGF0aCBmaWxsPSIjRUVFIiBkPSJNOCAxM2g4djEuNUg4eiIvPjxwYXRoIHN0cm9rZT0iI0VFRSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjEuNSIgZD0ibTYgMTkuMjUgNi0xNC41IDYgMTQuNSIvPjxyZWN0IHdpZHRoPSI1IiBoZWlnaHQ9IjUiIHg9IjE4IiB5PSI0IiBmaWxsPSIjRkY0ODQ4IiByeD0iMi41Ii8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMjYpIj48cGF0aCBkPSJNMCAwaDI0djI0SDB6Ii8+PHBhdGggZmlsbD0iIzAwQTlGRiIgZD0iTTggMTNoOHYxLjVIOHoiLz48cGF0aCBzdHJva2U9IiMwMEE5RkYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Im02IDE5LjI1IDYtMTQuNSA2IDE0LjUiLz48cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB4PSIxOCIgeT0iNCIgZmlsbD0iI0ZBMjgyOCIgcng9IjIuNSIvPjwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDc4KSI+PHBhdGggZD0iTTAgMGgyNHYyNEgweiIvPjxwYXRoIGZpbGw9IiM2N0NDRkYiIGQ9Ik04IDEzaDh2MS41SDh6Ii8+PHBhdGggc3Ryb2tlPSIjNjdDQ0ZGIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBkPSJtNiAxOS4yNSA2LTE0LjUgNiAxNC41Ii8+PHJlY3Qgd2lkdGg9IjUiIGhlaWdodD0iNSIgeD0iMTgiIHk9IjQiIGZpbGw9IiNGRjQ4NDgiIHJ4PSIyLjUiLz48L2c+PHBhdGggZD0iTTYgMTA0LjVhNS40OSA1LjQ5IDAgMCAxIDMuODkgMS42MUE1LjQ5IDUuNDkgMCAwIDEgMTEuNSAxMTBhNS40OSA1LjQ5IDAgMCAxLTEuNjEgMy44OUE1LjQ5IDUuNDkgMCAwIDEgNiAxMTUuNSA1LjQ5OCA1LjQ5OCAwIDAgMSAuNSAxMTBhNS40OTggNS40OTggMCAwIDEgNS41LTUuNXptMCAyLjVhMi45OSAyLjk5IDAgMCAwLTIuMTIxLjg3OUEyLjk5IDIuOTkgMCAwIDAgMyAxMTBjMCAuODI4LjMzNiAxLjU3OC44NzkgMi4xMjFBMi45OSAyLjk5IDAgMCAwIDYgMTEzYTIuOTkgMi45OSAwIDAgMCAyLjEyMS0uODc5QTIuOTkgMi45OSAwIDAgMCA5IDExMGEyLjk5IDIuOTkgMCAwIDAtLjg3OS0yLjEyMUEyLjk5IDIuOTkgMCAwIDAgNiAxMDd6IiBmaWxsPSIjRkZGIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1vcGFjaXR5PSIuMiIvPjwvZz48L3N2Zz4=);
    background-position: 3px 3px;
    background-size: 23px 112px
}

.toastui-editor-dark .toastui-editor-toolbar-icons.color {
    background-position-y: -47px
}

.toastui-editor-dark .toastui-editor-popup-body input[type=text].tui-colorpicker-palette-hex {
    border-color: #303238
}

.toastui-editor-dark .toastui-editor-popup-color button {
    background-color: #232428;
    border-color: #303238;
    color: #eee
}

.toastui-editor-dark .toastui-editor-popup-color button:hover {
    border-color: #494c56
}

.toastui-editor-dark .toastui-editor-popup-color .tui-colorpicker-container li .tui-colorpicker-palette-button {
    border-color: hsla(0, 0%, 100%, .1)
}

.toastui-editor-dark .toastui-editor-popup-color .tui-colorpicker-container .tui-colorpicker-svg-slider,
.toastui-editor-dark .toastui-editor-popup-color .tui-colorpicker-slider-container .tui-colorpicker-svg-huebar {
    border-color: hsla(0, 0%, 100%, .05)
}