.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, 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, 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: 13px;
	height: 24px;
	padding: 3px 25px 3px 10px;
	width: 65px;
}

.toastui-editor-popup-color button {
	background: #f7f9fc;
	border: 1px solid #e1e3e9;
	color: #555;
	height: 32px;
	position: absolute;
	right: 15px;
	top: 50px;
	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, 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, 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%, 0.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%, 0.05);
}