.palette-color-picker-button{position:relative;display:inline-block;width:28px;height:28px;margin-right:8px;background:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23f5c86c%22%20d%3D%22M2%202h8v8H2z%22/%3E%3Cpath%20fill%3D%22%23f56c6c%22%20d%3D%22M12%202h8v8h-8z%22/%3E%3Cpath%20fill%3D%22%23f46ac6%22%20d%3D%22M22%202h8v8h-8z%22/%3E%3Cpath%20fill%3D%22%23c3f167%22%20d%3D%22M2%2012h8v8H2z%22/%3E%3Cpath%20fill%3D%22%23f3f3f3%22%20d%3D%22M12%2012h8v8h-8z%22/%3E%3Cpath%20fill%3D%22%23c76cf5%22%20d%3D%22M22%2012h8v8h-8z%22/%3E%3Cpath%20fill%3D%22%2369e369%22%20d%3D%22M2%2022h8v8H2z%22/%3E%3Cpath%20fill%3D%22%236bc6f4%22%20d%3D%22M12%2022h8v8h-8z%22/%3E%3Cpath%20fill%3D%22%236b6bf5%22%20d%3D%22M22%2022h8v8h-8z%22/%3E%3Cpath%20d%3D%22M9%203v6H3V3h6m1-1H2v8h8V2zm9%201v6h-6V3h6m1-1h-8v8h8V2zm9%201v6h-6V3h6m1-1h-8v8h8V2zM9%2013v6H3v-6h6m1-1H2v8h8v-8zm9%201v6h-6v-6h6m1-1h-8v8h8v-8zm9%201v6h-6v-6h6m1-1h-8v8h8v-8zM9%2023v6H3v-6h6m1-1H2v8h8v-8zm9%201v6h-6v-6h6m1-1h-8v8h8v-8zm9%201v6h-6v-6h6m1-1h-8v8h8v-8z%22%20opacity%3D%22.25%22/%3E%3C/svg%3E') center center no-repeat;background-size:cover;cursor:pointer;box-shadow:0 0 0 1px #bbb;border:2px solid #fff}
.palette-color-picker-bubble{display:none;margin:12px 0;position:absolute;bottom:100%;width:220px;padding:10px 8px 8px 8px;border:1px solid #bbb;border-radius:3px;background-color:#fff;
right: 0;
}

.palette-color-picker-bubble:after,
.palette-color-picker-bubble:before{top:100%;right:10px;border:solid transparent;content:' ';height:0;width:0;position:absolute;pointer-events:none}
.palette-color-picker-bubble:after{border-color:transparent;border-top-color:#fff;border-width:8px;margin-left:-8px}.palette-color-picker-bubble:before{border-color:transparent;border-top-color:#bbb;border-width:9px;margin-left:-9px}.palette-color-picker-bubble.downside{bottom:auto;top:100%}.palette-color-picker-bubble.downside:after,.palette-color-picker-bubble.downside:before{top:auto;bottom:100%}.palette-color-picker-bubble.downside:after{border-top-color:transparent;border-bottom-color:#fff}.palette-color-picker-bubble.downside:before{border-top-color:transparent;border-bottom-color:#bbb}.palette-color-picker-bubble .swatch{position:relative;display:inline-block;font:0/0 a;width:12.66%;padding-top:11.00%;margin:1% 2%;outline:1px solid #bbb;border:2px solid #fff;border-radius:3px;cursor:pointer;overflow:hidden}.palette-color-picker-bubble .swatch.active{outline-color:#000;-webkit-box-shadow:0px 0px 5px 0px rgba(0,0,0,0.75);-moz-box-shadow:0px 0px 5px 0px rgba(0,0,0,0.75);box-shadow:0px 0px 5px 0px rgba(0,0,0,0.75)}.palette-color-picker-bubble .swatch.clear{background-color:#fff}.palette-color-picker-bubble .swatch.clear:before{position:absolute;content:'';display:block;top:-1px;left:0;width:100px;height:2px;background-color:#e00;transform-origin:0 0;transform:rotate(45deg)}.palette-color-picker-bubble.double .swatch{width:29.30%;padding-top:11.00%;margin:1% 2%}.palette-color-picker-bubble.double .swatch.clear:before{transform:rotate(22.5deg)}.palette-color-picker-bubble.wide .swatch{width:96.2%;padding-top:11.00%;margin:1% 2%}.palette-color-picker-bubble.wide .swatch.clear{width:12.66%}.palette-color-picker-bubble.force-left{left:-178px}.palette-color-picker-bubble.force-left:after,.palette-color-picker-bubble.force-left:before{left:188px}