.--color-picker-ui-overlay{
    position:fixed; top:0px; left:0px; bottom:0px; right:0px; background-color:rgba(0,0,0,0.5);
}
.--color-picker-ui{
    position:fixed; top:0px; left:0px; bottom:0px; right:0px; display:none; align-items:center; 
}

.--color-picker-ui.--active{
    display:flex; 
}
.--color-picker-ui-holder{
    position:relative; z-index:1; width:400px; height:400px; margin:auto; background-color:#ffffff; border-radius:1rem; box-shadow:0px 10px 20px -10px rgba(0,0,0,0.1);
}
.--color-picker-ui-header{
    padding:1rem; font-size: 1.5rem; font-weight:600; border-bottom:1px solid rgba(0,0,0,0.1);
}
.--color-picker-ui-content{
    padding:1rem; 
}
.--color-picker-ui-blocks{display:flex; flex-wrap:wrap;}
.--color-picker-ui-block{padding:0.2rem;}
.--color-picker-ui-block-inner{width:2rem; height:2rem; border-radius:0.5rem; box-shadow:0px 4px 6px -3px rgba(0,0,0,0.3); 
border:2px solid #ffffff; cursor:pointer; transition:all 0.2s ease-in;}
.--color-picker-ui-block-inner:hover{transform:scale(1.05);}