#color-picker-panel { position: fixed; top: 0; right: 0; left: 0; bottom: 0; display: none; justify-content: center; align-items: center; background-color: rgba(0,0,0,.5); z-index: 6000; }
#color-picker-panel.active { display: flex; }
#color-picker-panel .color-picker-container { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 16px; background-color: #fff; border-radius: 8px; box-shadow: 0 8px 16px rgba(0, 0, 0, .5); width: 320px; overflow: hidden; z-index: 1; }
#color-picker-panel .color-picker-container .color-picker-close-button { position: absolute; top: 8px; right: 8px; z-index: 1; }
#color-picker-panel .color-picker-container .color-picker-header { text-align: left; }
#color-picker-panel .color-picker-container .color-picker-header .color-picker-title { margin-bottom: 4px; font-weight: bold; }
#color-picker-panel .color-picker-container .color-picker-header .color-picker-description { font-size: 12px; }
#color-picker-panel .color-picker-container .color-picker-body { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 16px 0; }
#color-picker-panel .color-picker-container .color-picker-body .color-picker-divider { width: 2px; height: 16px; background-color: #eee; }
#color-picker-panel .color-picker-container .color-picker-body .picked-color-container { display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 12px; }
#color-picker-panel .color-picker-container .color-picker-body .picked-color { color: #777; padding: 4px; text-align: center; width: 64px; border: 1px solid #ccc; border-radius: 3px; }
#color-picker-panel .color-picker-container .color-picker-body .picked-color-circle { width: 64px; height: 64px; margin: 4px; border: 2px solid #eee; border-radius: 100%; }
#color-picker-panel .color-picker-panel-background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }