body{display:flex;justify-content:center;align-items:center;height:100vh;background:#efefef;overflow:scroll;margin:0;padding:1em}.wrapper{display:flex;background:#fff;padding:1em;border-radius:8px;border:1px solid #888a;min-width:300px;max-width:600px;justify-content:center;flex:1;flex-wrap:wrap}.example-wrapper{display:flex;align-items:center;justify-content:center;min-width:300px;max-width:400px;height:300px;flex:1}.example{width:200px;height:200px;background:#f5f5f5;border-radius:100%}.shadow-picker{margin-top:1em}.custom-picker.shadow-picker{background:#faebd7;color:#00f}.custom-picker .shadow-picker__position{border:1px solid blue}.custom-picker .shadow-picker__position.active{background:#7fffd4}.custom-picker .shadow-picker__grid{border:1px solid blue}.custom-picker .shadow-picker__grid-line,.custom-picker .shadow-picker__grid-handle{color:red}.custom-picker .shadow-picker__input{border:1px solid teal}.custom-picker .shadow-picker__slider{background:red}.custom-picker .shadow-picker__slider::-webkit-slider-thumb{background:#00f}