mahmoud-colorpicker{display:inline-block}.mcp-wrapper{position:relative;display:inline-block}.mcp-preview{width:2.2rem;height:2.2rem;border-radius:.5rem;border:.125rem solid #e1e1e1;cursor:pointer;transition:border-color .2s ease;display:flex;align-items:center;justify-content:center;color:#fff;text-shadow:0 .0625rem .125rem rgba(0,0,0,.3)}.mcp-preview:hover{border-color:#999}.mcp-preview svg{filter:drop-shadow(0 .0625rem .125rem rgba(0,0,0,.3))}.mcp-popup{position:fixed;background:#fff;border:.125rem solid #e0e0e0;border-radius:.75rem;padding:1rem;box-shadow:0 .5rem 1.5rem #00000026;z-index:10000;min-width:19.375rem}.mcp-canvas-wrapper{position:relative;margin-bottom:.75rem;border-radius:.5rem;overflow:hidden}.mcp-canvas{display:block;border-radius:.5rem;cursor:crosshair;touch-action:none}.mcp-cursor{position:absolute;width:.875rem;height:.875rem;border:.125rem solid white;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 0 0 .0625rem #0000004d,0 .125rem .25rem #0003;left:0;top:0}.mcp-hue-wrapper{margin-bottom:.75rem}.mcp-hue-bar{position:relative;height:.75rem;border-radius:.375rem;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red);cursor:pointer;touch-action:none}.mcp-hue-cursor{position:absolute;width:1rem;height:1rem;border:.125rem solid white;border-radius:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;box-shadow:0 0 0 .0625rem #0000004d,0 .125rem .25rem #0003;left:0}.mcp-hex-input-wrapper{margin-bottom:.75rem}.mcp-hex-input{width:100%;padding:.5rem .75rem;border:.0625rem solid #d0d0d0;border-radius:.375rem;font-size:.875rem;font-family:Courier New,Courier,monospace;text-transform:uppercase;letter-spacing:.0625rem;text-align:center}.mcp-hex-input:focus{outline:none;border-color:#000;box-shadow:0 0 0 .1875rem #0000001a}.mcp-presets{display:grid;grid-template-columns:repeat(8,1fr);gap:.375rem}.mcp-preset{width:100%;aspect-ratio:1;border-radius:.25rem;cursor:pointer;border:.0625rem solid #ddd;transition:transform .15s ease}.mcp-preset:hover{transform:scale(1.15);box-shadow:0 .125rem .5rem #0003;z-index:1}@media(max-width:768px){.color-picker-popup{min-width:auto!important;width:85vw!important;max-width:320px!important;padding:12px!important}.color-picker-popup>div:first-child{width:100%!important;height:180px!important}.color-canvas{width:100%!important;height:180px!important}.hue-canvas{width:100%!important}}@media(max-width:30rem){.mcp-popup{left:50%;transform:translate(-50%)}.mcp-presets{grid-template-columns:repeat(6,1fr)}}
/*# sourceMappingURL=/cdn/shop/t/4/assets/designer-color-picker.css.map */