:root{--color-picker-border-color:#e2e6ed;--color-picker-background-color:#fff;--color-picker-hover-background-color:#e6e6e6;--color-picker-text-color:#767c85;--color-picker-shadow-color:rgba(56, 56, 56, 0.2);--color-picker-highlight-color:#efefef;--color-picker-primary-color:#68646477}.component-color-pickup{position:fixed;display:flex;z-index:1000;max-height:100%;user-select:none}.component-color-panel-wrap{min-width:180px;display:flex;padding:8px;overflow-x:hidden;overflow-y:auto;background:var(--color-picker-background-color);box-shadow:0 2px 12px 0 var(--color-picker-shadow-color);border:1px solid var(--color-picker-border-color);border-radius:8px}.color-pickup-content{width:180px;position:relative;flex-grow:1;height:100%;display:flex;flex-direction:column;cursor:default}.color-group-selected{height:14px;font-size:12px;transition:background-color .3s ease}.color-group-selected:hover{background-color:var(--color-picker-hover-background-color)}.color-hex,.color-preview{width:80px;height:20px;float:left}.color-preview{border:2px ridge}.color-hex{margin-left:20px}.color-rgb{margin-top:3px;width:100%;display:flex;height:20px}.color-group-input input{outline:0;border:1px solid var(--color-picker-primary-color);width:100%;padding:2px 0 2px 17px;height:20px;font-size:14px}.color-group-input .color-rgb input{width:60px}.color-hex,.color-rgb>div{position:relative}.color-hex::before,.color-rgb>div::before{display:block;content:attr(data-color);width:18px;height:20px;position:absolute;font-size:14px;top:1px;left:3px;z-index:1}.icons{vertical-align:middle;display:inline-block;background-repeat:no-repeat;background-size:100% 100%;flex-shrink:0}.color-group-selected .title{padding-left:8px;vertical-align:middle}.color-group-already,.color-group-input,.color-group-standard,.color-group-theme{padding-bottom:4px}.item-group{height:18px;display:flex;align-items:center;justify-content:space-between}.color-item{display:inline-block;width:16px;height:16px}.color-item:first-child{margin-left:0}.color-item.white{border:1px solid var(--color-picker-border-color)}.color-item.selected,.color-item:hover{box-shadow:0 0 0 1px #fff,0 0 0 2px var(--color-picker-border-color)}.color-group-recorded .text,.color-group-standard .text{color:var(--color-picker-text-color);line-height:12px;font-size:12px;margin-bottom:3px;text-align:left}.color-group-more{height:14px;position:relative;font-size:12px;line-height:14px;cursor:pointer;user-select:none;transition:background-color .3s ease}.color-group-more:hover{background-color:var(--color-picker-hover-background-color)}.color-group-more::after,.color-group-more::before{content:"";display:block;width:1px;height:7px;background-color:#000;position:absolute;right:8px}.color-group-more::before{top:3px;transform:rotateZ(135deg)}.color-group-more::after{top:7px;transform:rotateZ(45deg)}.color-pickup-disc{width:194px;height:218px;background:var(--color-picker-background-color);position:absolute;z-index:2;left:2px;bottom:3px;box-shadow:0 2px 12px 0 var(--color-picker-shadow-color);border:1px solid var(--color-picker-border-color);border-radius:8px;overflow:hidden}.divider{margin:0 8px 8px;height:1px;background:var(--color-picker-border-color)}.upDownSmallArrowForColorPicker{width:15px;height:20px;position:absolute;padding:1px;top:0;right:0;z-index:10000}.udsafcp-doarrow,.udsafcp-uparrow{display:block;width:100%;height:50%;outline:0;border:none;border-left:1px solid var(--color-picker-primary-color);background-color:transparent;position:relative;cursor:pointer;transition:background-color .3s ease}.upDownSmallArrowForColorPicker button:hover{background-color:var(--color-picker-highlight-color)}.upDownSmallArrowForColorPicker [disabled]:hover{background-color:transparent}.upDownSmallArrowForColorPicker [disabled] span{border-bottom-color:rgba(118,124,135,.2)}.colorPickerTriangle{width:0;height:0;border:4px solid transparent;border-top:0;border-bottom:4px solid var(--color-picker-text-color);position:absolute;top:3px;left:2px}.udsafcp-doarrow .colorPickerTriangle{transform:rotateZ(180deg)}.moreColor{display:none;width:100%;height:80%;position:absolute;z-index:2;left:0;bottom:0;background:var(--color-picker-background-color);justify-content:center;align-items:center;box-shadow:0 2px 12px 0 var(--color-picker-shadow-color);border:1px solid var(--color-picker-border-color);border-radius:8px}