.color-picker-container {
     z-index : 45;
     position : fixed;
     width: 28px;
     height: 28px;
     border-radius:50%;
     background-color: white;
     box-shadow:0px 1px 3px 0px rgba(0,0,0,0.2);
     border-radius:10px;

}

    .color-picker-container.animate-appear{
        width:167px;
        border-radius:3px;
        opacity: 1;
    }
    .color-picker-container.animate-disappear {
        width:28px;
        height:28px !important;
        border-radius:50%;
        opacity:0;
    }
.color-picker-container {
    transition: width 250ms cubic-bezier(0.785, 0.135, 0.15, 0.86), height 250ms cubic-bezier(0.785, 0.135, 0.15, 0.86), border-radius 250ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 250ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
    -webkit-transition:height 250ms cubic-bezier(0.785, 0.135, 0.15, 0.86), width 250ms cubic-bezier(0.785, 0.135, 0.15, 0.86), border-radius 250ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 250ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
}