.material-color-picker-wrapper{--colorpicker-column-count:5;--colorpicker-column-width:calc(100% / var(--colorpicker-column-count));--colorpicker-item-size:48px;--colorpicker-width:350px;--colorpicker-height:360px;--colorpicker-top:0px;--colorpicker-left:0px;--colorpicker-zindex:10;--colorpicker-offset:16px 0;--colorpicker-padding-title:16px;--colorpicker-padding-wrapper:8px 16px;--colorpicker-padding-wrapper_notitle:20px 16px;--colorpicker-shadow:0 0 4px rgba(0, 0, 0, 0.14),0 4px 8px rgba(0, 0, 0, 0.28);font-family:Roboto,sans-serif;-moz-osx-font-smoothing:grayscale;position:absolute;top:var(--colorpicker-top);left:var(--colorpicker-left);width:var(--colorpicker-width);height:1px;z-index:var(--colorpicker-zindex);-webkit-transition:all .3s;transition:all .3s}.material-color-picker-wrapper *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box}.material-color-picker-wrapper .material-color-picker{position:absolute;top:var(--colorpicker-pos_top);right:var(--colorpicker-pos_right);bottom:var(--colorpicker-pos_bottom);left:var(--colorpicker-pos_left);width:var(--colorpicker-width);max-width:var(--colorpicker-width);margin:var(--colorpicker-offset);border-radius:2px;background-color:#fff;-webkit-box-shadow:var(--colorpicker-shadow);box-shadow:var(--colorpicker-shadow);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column;flex-flow:column;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-transition:all .3s cubic-bezier(0,0,.2,1);transition:all .3s cubic-bezier(0,0,.2,1);-webkit-animation:opencolorpicker 350ms cubic-bezier(0,0,.2,1) 0s 1 normal forwards;animation:opencolorpicker 350ms cubic-bezier(0,0,.2,1) 0s 1 normal forwards}.material-color-picker-wrapper .material-color-picker .mcp__title+.mcp__collection-wrapper,.material-color-picker-wrapper .material-color-picker .mcp__title+.mcp__collection-wrapper .mcp-color-item-palette{padding:var(--colorpicker-padding-wrapper)}.material-color-picker-wrapper .material-color-picker .mcp__title{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;cursor:default;padding:var(--colorpicker-padding-title);overflow:hidden;opacity:0;-webkit-animation:slideInDownOpacity 350ms cubic-bezier(0,0,.2,1) .2s 1 normal forwards;animation:slideInDownOpacity 350ms cubic-bezier(0,0,.2,1) .2s 1 normal forwards}.material-color-picker-wrapper .material-color-picker .mcp__title h3{font-family:Roboto,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size: 1rem;font-weight:500;letter-spacing:.02em;line-height:2rem;margin:0;padding:0;}.material-color-picker-wrapper .material-color-picker .mcp__collection-wrapper{padding:var(--colorpicker-padding-wrapper_notitle);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-flow:wrap;flex-flow:wrap;position:relative;overflow-y:auto}.material-color-picker-wrapper .material-color-picker .mcp__collection-wrapper .mcp-color-item{overflow:hidden;margin-bottom:8px;-ms-flex-preferred-size:var(--colorpicker-column-width);flex-basis:var(--colorpicker-column-width);width:var(--colorpicker-column-width);min-width:var(--colorpicker-column-width);max-width:var(--colorpicker-column-width);height:var(--colorpicker-item-size);min-height:var(--colorpicker-item-size);max-height:var(--colorpicker-item-size);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.material-color-picker-wrapper .material-color-picker .mcp__collection-wrapper .mcp-color-item .mcp-color-item__swatch{position:relative;z-index:2;cursor:pointer;background-color:#bdbdbd;border-radius:50%;width:var(--colorpicker-item-size);height:var(--colorpicker-item-size);min-width:var(--colorpicker-item-size);max-width:var(--colorpicker-item-size);min-height:var(--colorpicker-item-size);max-height:var(--colorpicker-item-size);-webkit-transform:scale(0);transform:scale(0);opacity:0;-webkit-transition:all .3s cubic-bezier(0,0,.2,1);transition:all .3s cubic-bezier(0,0,.2,1);pointer-events:initial;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.material-color-picker-wrapper .material-color-picker .mcp__collection-wrapper .mcp-color-item .mcp-color-item__swatch::after{content:"\e5ca";font-family:"Material Icons",sans-serif;font-size:1.5rem;color:#fff;background:rgba(0,0,0,.5);border-radius:50%;position:absolute;top:50%;left:50%;width:calc(var(--colorpicker-item-size)/ 1.5);height:calc(var(--colorpicker-item-size)/ 1.5);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;pointer-events:none;-webkit-transform:translate(-50%,-50%) scale(0);transform:translate(-50%,-50%) scale(0);opacity:0;-webkit-transition:all .3s cubic-bezier(0,0,.2,1);transition:all .3s cubic-bezier(0,0,.2,1)}.material-color-picker-wrapper .material-color-picker .mcp__collection-wrapper .mcp-color-item-palette{padding:var(--colorpicker-padding-wrapper_notitle);overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;display:none;-ms-flex-flow:wrap;flex-flow:wrap;-ms-flex-line-pack:start;align-content:flex-start;background:#fff;position:absolute;top:var(--position-top,0);left:var(--position-left,0);width:var(--colorpicker-item-size);height:var(--colorpicker-item-size);-webkit-animation:closepalette 350ms cubic-bezier(0,0,.2,1) 0s 1 normal forwards;animation:closepalette 350ms cubic-bezier(0,0,.2,1) 0s 1 normal forwards;z-index:1}.material-color-picker-wrapper .material-color-picker .mcp__collection-wrapper .mcp-color-item-palette .mcp-color-back-to-palette{position:relative;cursor:pointer}.material-color-picker-wrapper .material-color-picker .mcp__collection-wrapper .mcp-color-item-palette .mcp-color-back-to-palette::after{content:"\e5c4";font-family:"Material Icons",sans-serif;font-size:24px;color:rgba(0,0,0,.5);border-radius:50%;position:absolute;top:50%;left:50%;width:30px;height:30px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:all .3s cubic-bezier(0,0,.2,1);transition:all .3s cubic-bezier(0,0,.2,1)}.material-color-picker-wrapper .material-color-picker .mcp__collection-wrapper .mcp-color-item-palette>.mcp-color-item>.mcp-color-item__swatch{-webkit-transform:scale(0);transform:scale(0)}.material-color-picker-wrapper .material-color-picker .mcp__collection-wrapper .mcp-color-item-palette_visible{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-animation:openpalette 350ms cubic-bezier(0,0,.2,1) 0s 1 normal forwards;animation:openpalette 350ms cubic-bezier(0,0,.2,1) 0s 1 normal forwards}.material-color-picker-wrapper .material-color-picker .mcp__collection-wrapper .mcp-color-item-palette_visible>.mcp-color-item>.mcp-color-item__swatch{-webkit-transform:scale(1);transform:scale(1)}.material-color-picker-wrapper .material-color-picker .mcp__collection-wrapper .mcp-color-item-palette_closing{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-animation:closepalette 350ms cubic-bezier(0,0,.2,1) 0s 1 normal forwards;animation:closepalette 350ms cubic-bezier(0,0,.2,1) 0s 1 normal forwards}.material-color-picker-wrapper .material-color-picker .mcp__collection-wrapper_loaded .mcp-color-item>.mcp-color-item__swatch{-webkit-transform:scale(1);transform:scale(1);opacity:1}.material-color-picker-wrapper .material-color-picker .mcp__collection-wrapper_loaded .mcp-color-item_selected>.mcp-color-item__swatch::after{opacity:1;-webkit-transform:translate(-50%,-50%) scale(1);transform:translate(-50%,-50%) scale(1)}.material-color-picker-wrapper .material-color-picker .mcp__collection-wrapper_loaded .mcp-color-item_hidden>.mcp-color-item__swatch{-webkit-transform:scale(0);transform:scale(0);opacity:0;pointer-events:none}.material-color-picker-wrapper .material-color-picker .mcp__buttonbar-actions{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;padding:8px;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.material-color-picker-wrapper .material-color-picker .mcp__buttonbar-actions .mcp__action{margin:0 8px 0 0;padding:0 8px}.material-color-picker-wrapper .material-color-picker .mcp__button{will-change:transform,opacity;-webkit-tap-highlight-color:transparent;font-family:Roboto,sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;letter-spacing:.04em;color:rgba(0,0,0,.87);display:inline-block;position:relative;min-width:64px;height:36px;padding:0 16px;border:none;border-radius:2px;outline:0;background:0 0;font-size:14px;font-weight:500;line-height:36px;text-align:center;text-decoration:none;text-transform:uppercase;overflow:hidden;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:none}.material-color-picker-wrapper .material-color-picker_closing{-webkit-animation:closecolorpicker 350ms cubic-bezier(0,0,.2,1) 0s 1 normal forwards;animation:closecolorpicker 350ms cubic-bezier(0,0,.2,1) 0s 1 normal forwards}.material-color-picker-wrapper.mcp--mode_modal{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:99999}.material-color-picker-wrapper.mcp--mode_modal::before{display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);content:"";opacity:0;opacity:var(--mdc-temporary-drawer-opacity,0);will-change:opacity;-webkit-box-sizing:border-box;box-sizing:border-box}.material-color-picker-wrapper.mcp--mode_modal .material-color-picker{position:relative;margin:0 auto;-webkit-transform:translateY(-50%);transform:translateY(-50%);top:50%}.material-color-picker-wrapper.mcp--animating::before{-webkit-transition:opacity .3s 0s cubic-bezier(0,0,.2,1);transition:opacity .3s 0s cubic-bezier(0,0,.2,1)}.material-color-picker-wrapper.mcp--open{pointer-events:auto}.material-color-picker-wrapper.mcp--open::before{opacity:1;opacity:var(--mdc-temporary-drawer-opacity,1)}@-webkit-keyframes openpalette{from{z-index:1;opacity:0;border-radius:500px;top:var(--position-top);left:var(--position-left);width:var(--colorpicker-item-size);height:var(--colorpicker-item-size);background:rgba(255,255,255,0)}70%{background:rgba(255,255,255,.3)}to{z-index:3;opacity:1;border-radius:0;top:0;left:0;width:100%;height:auto;background:#fff}}@keyframes openpalette{from{z-index:1;opacity:0;border-radius:500px;top:var(--position-top);left:var(--position-left);width:var(--colorpicker-item-size);height:var(--colorpicker-item-size);background:rgba(255,255,255,0)}70%{background:rgba(255,255,255,.3)}to{z-index:3;opacity:1;border-radius:0;top:0;left:0;width:100%;height:auto;background:#fff}}@-webkit-keyframes closepalette{from{z-index:3;opacity:1;border-radius:0;top:0;left:0;width:100%;height:auto;background:#fff}30%{background:rgba(255,255,255,.3)}to{z-index:1;opacity:0;border-radius:500px;top:var(--position-top);left:var(--position-left);width:var(--colorpicker-item-size);height:var(--colorpicker-item-size);background:rgba(255,255,255,0)}}@keyframes closepalette{from{z-index:3;opacity:1;border-radius:0;top:0;left:0;width:100%;height:auto;background:#fff}30%{background:rgba(255,255,255,.3)}to{z-index:1;opacity:0;border-radius:500px;top:var(--position-top);left:var(--position-left);width:var(--colorpicker-item-size);height:var(--colorpicker-item-size);background:rgba(255,255,255,0)}}@-webkit-keyframes opencolorpicker{from{opacity:0;width:0;max-height:0}to{opacity:1;width:var(--colorpicker-width);max-height:var(--colorpicker-height)}}@keyframes opencolorpicker{from{opacity:0;width:0;max-height:0}to{opacity:1;width:var(--colorpicker-width);max-height:var(--colorpicker-height)}}@-webkit-keyframes closecolorpicker{to{opacity:0;width:0;max-height:0}from{opacity:1;width:var(--colorpicker-width);max-height:var(--colorpicker-height)}}@keyframes closecolorpicker{to{opacity:0;width:0;max-height:0}from{opacity:1;width:var(--colorpicker-width);max-height:var(--colorpicker-height)}}@-webkit-keyframes slideInDownOpacity{from{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes slideInDownOpacity{from{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}