smart-webcomponents-react/source/styles/components/smart.editor.css

[](https://jqwidgets.com/license/)

.smart-button-element,smart-button,smart-repeat-button,smart-toggle-button{--smart-button-flat-color:var(--smart-background-color);text-align:center;display:inline-flex;vertical-align:middle;cursor:pointer;text-transform:var(--smart-button-text-transform);letter-spacing:.08929em;overflow:hidden;border-color:var(--smart-border);border-top-left-radius:var(--smart-border-top-left-radius);border-top-right-radius:var(--smart-border-top-right-radius);border-bottom-left-radius:var(--smart-border-bottom-left-radius);border-bottom-right-radius:var(--smart-border-bottom-right-radius);border-width:var(--smart-border-width);border-style:solid;visibility:hidden;font-weight:500}.smart-button-element.smart-element,smart-button.smart-element,smart-repeat-button.smart-element,smart-toggle-button.smart-element{display:inline-flex;visibility:inherit}.smart-button-element button::-moz-focus-inner,smart-button button::-moz-focus-inner,smart-repeat-button button::-moz-focus-inner,smart-toggle-button button::-moz-focus-inner{border:0}.smart-button-element.primary,smart-button.primary,smart-repeat-button.primary,smart-toggle-button.primary{--smart-button-opacity-hover:0.75;--smart-button-opacity-focus:0.7;--smart-button-opacity-active:0.65;--smart-background:var(--smart-primary);--smart-border:var(--smart-primary);--smart-border-rgb:var(--smart-primary-rgb);--smart-background-color:var(--smart-primary-color);--smart-ui-state-hover:var(--smart-primary);--smart-ui-state-border-hover:var(--smart-primary);--smart-ui-state-color-hover:var(--smart-primary-color);--smart-ui-state-active:var(--smart-primary);--smart-ui-state-border-active:var(--smart-primary);--smart-ui-state-color-active:var(--smart-primary-color);--smart-ui-state-focus:var(--smart-primary);--smart-ui-state-border-focus:var(--smart-primary);--smart-ui-state-color-focus:var(--smart-primary-color);--smart-button-flat-color:var(--smart-primary);--smart-button-outlined-color:var(--smart-primary);--smart-button-outlined-border:var(--smart-primary)}.smart-button-element.secondary,smart-button.secondary,smart-repeat-button.secondary,smart-toggle-button.secondary{--smart-button-opacity-hover:0.75;--smart-button-opacity-focus:0.7;--smart-button-opacity-active:0.65;--smart-background:var(--smart-secondary);--smart-border:var(--smart-secondary);--smart-border-rgb:var(--smart-secondary-rgb);--smart-background-color:var(--smart-secondary-color);--smart-ui-state-hover:var(--smart-secondary);--smart-ui-state-border-hover:var(--smart-secondary);--smart-ui-state-color-hover:var(--smart-secondary-color);--smart-ui-state-active:var(--smart-secondary);--smart-ui-state-border-active:var(--smart-secondary);--smart-ui-state-color-active:var(--smart-secondary-color);--smart-ui-state-focus:var(--smart-secondary);--smart-ui-state-border-focus:var(--smart-secondary);--smart-ui-state-color-focus:var(--smart-secondary-color);--smart-button-flat-color:var(--smart-secondary);--smart-button-outlined-color:var(--smart-secondary);--smart-button-outlined-border:var(--smart-secondary)}.smart-button-element.success,smart-button.success,smart-repeat-button.success,smart-toggle-button.success{--smart-button-opacity-hover:0.75;--smart-button-opacity-focus:0.7;--smart-button-opacity-active:0.65;--smart-background:var(--smart-success);--smart-border:var(--smart-success);--smart-border-rgb:var(--smart-success-rgb);--smart-background-color:var(--smart-success-color);--smart-ui-state-hover:var(--smart-success);--smart-ui-state-border-hover:var(--smart-success);--smart-ui-state-color-hover:var(--smart-success-color);--smart-ui-state-active:var(--smart-success);--smart-ui-state-border-active:var(--smart-success);--smart-ui-state-color-active:var(--smart-success-color);--smart-ui-state-focus:var(--smart-success);--smart-ui-state-border-focus:var(--smart-success);--smart-ui-state-color-focus:var(--smart-success-color);--smart-button-flat-color:var(--smart-success);--smart-button-outlined-color:var(--smart-success);--smart-button-outlined-border:var(--smart-success)}.smart-button-element.error,smart-button.error,smart-repeat-button.error,smart-toggle-button.error{--smart-button-opacity-hover:0.75;--smart-button-opacity-focus:0.7;--smart-button-opacity-active:0.65;--smart-background:var(--smart-error);--smart-border:var(--smart-error);--smart-border-rgb:var(--smart-error-rgb);--smart-background-color:var(--smart-error-color);--smart-ui-state-hover:var(--smart-error);--smart-ui-state-border-hover:var(--smart-error);--smart-ui-state-color-hover:var(--smart-error-color);--smart-ui-state-active:var(--smart-error);--smart-ui-state-border-active:var(--smart-error);--smart-ui-state-color-active:var(--smart-error-color);--smart-ui-state-focus:var(--smart-error);--smart-ui-state-border-focus:var(--smart-error);--smart-ui-state-color-focus:var(--smart-error-color);--smart-button-flat-color:var(--smart-error);--smart-button-outlined-color:var(--smart-error);--smart-button-outlined-border:var(--smart-error)}.smart-button-element.info,smart-button.info,smart-repeat-button.info,smart-toggle-button.info{--smart-button-opacity-hover:0.75;--smart-button-opacity-focus:0.7;--smart-button-opacity-active:0.65;--smart-background:var(--smart-info);--smart-border:var(--smart-info);--smart-border-rgb:var(--smart-info-rgb);--smart-background-color:var(--smart-info-color);--smart-ui-state-hover:var(--smart-info);--smart-ui-state-border-hover:var(--smart-info);--smart-ui-state-color-hover:var(--smart-info-color);--smart-ui-state-active:var(--smart-info);--smart-ui-state-border-active:var(--smart-info);--smart-ui-state-color-active:var(--smart-info-color);--smart-ui-state-focus:var(--smart-info);--smart-ui-state-border-focus:var(--smart-info);--smart-ui-state-color-focus:var(--smart-info-color);--smart-button-flat-color:var(--smart-info);--smart-button-outlined-color:var(--smart-info);--smart-button-outlined-border:var(--smart-info)}.smart-button-element.warning,smart-button.warning,smart-repeat-button.warning,smart-toggle-button.warning{--smart-button-opacity-hover:0.75;--smart-button-opacity-focus:0.7;--smart-button-opacity-active:0.65;--smart-background:var(--smart-warning);--smart-border:var(--smart-warning);--smart-border-rgb:var(--smart-warning-rgb);--smart-background-color:var(--smart-warning-color);--smart-ui-state-hover:var(--smart-warning);--smart-ui-state-border-hover:var(--smart-warning);--smart-ui-state-color-hover:var(--smart-warning-color);--smart-ui-state-active:var(--smart-warning);--smart-ui-state-border-active:var(--smart-warning);--smart-ui-state-color-active:var(--smart-warning-color);--smart-ui-state-focus:var(--smart-warning);--smart-ui-state-border-focus:var(--smart-warning);--smart-ui-state-color-focus:var(--smart-warning-color);--smart-button-flat-color:var(--smart-warning);--smart-button-outlined-color:var(--smart-warning);--smart-button-outlined-border:var(--smart-warning)}.smart-button-element.light,smart-button.light,smart-repeat-button.light,smart-toggle-button.light{--smart-button-opacity-hover:0.75;--smart-button-opacity-focus:0.7;--smart-button-opacity-active:0.65;--smart-background:var(--smart-light);--smart-border:var(--smart-light);--smart-border-rgb:var(--smart-light-rgb);--smart-background-color:var(--smart-light-color);--smart-ui-state-hover:var(--smart-light);--smart-ui-state-border-hover:var(--smart-light);--smart-ui-state-color-hover:var(--smart-light-color);--smart-ui-state-active:var(--smart-light);--smart-ui-state-border-active:var(--smart-light);--smart-ui-state-color-active:var(--smart-light-color);--smart-ui-state-focus:var(--smart-light);--smart-ui-state-border-focus:var(--smart-light);--smart-ui-state-color-focus:var(--smart-light-color);--smart-button-flat-color:var(--smart-light);--smart-button-outlined-color:var(--smart-light);--smart-button-outlined-border:var(--smart-light)}.smart-button-element.dark,smart-button.dark,smart-repeat-button.dark,smart-toggle-button.dark{--smart-button-opacity-hover:0.75;--smart-button-opacity-focus:0.7;--smart-button-opacity-active:0.65;--smart-background:var(--smart-dark);--smart-border:var(--smart-dark);--smart-border-rgb:var(--smart-dark-rgb);--smart-background-color:var(--smart-dark-color);--smart-ui-state-hover:var(--smart-dark);--smart-ui-state-border-hover:var(--smart-dark);--smart-ui-state-color-hover:var(--smart-dark-color);--smart-ui-state-active:var(--smart-dark);--smart-ui-state-border-active:var(--smart-dark);--smart-ui-state-color-active:var(--smart-dark-color);--smart-ui-state-focus:var(--smart-dark);--smart-ui-state-border-focus:var(--smart-dark);--smart-ui-state-color-focus:var(--smart-dark-color);--smart-button-flat-color:var(--smart-dark);--smart-button-outlined-color:var(--smart-dark);--smart-button-outlined-border:var(--smart-dark)}.smart-button-element[hover],smart-button[hover],smart-repeat-button[hover],smart-toggle-button[hover]{color:var(--smart-ui-state-color-hover);border-color:var(--smart-ui-state-border-hover);background-color:var(--smart-ui-state-hover);transition:background-color .1s linear,box-shadow 280ms ease-in-out;opacity:var(--smart-button-opacity-hover)}.smart-button-element[focus],smart-button[focus],smart-repeat-button[focus],smart-toggle-button[focus]{color:var(--smart-ui-state-color-focus);border-color:var(--smart-ui-state-border-focus);background-color:var(--smart-ui-state-focus);opacity:var(--smart-button-opacity-focus)}.smart-button-element[active],smart-button[active],smart-repeat-button[active],smart-toggle-button[active]{color:var(--smart-ui-state-color-active);border-color:var(--smart-ui-state-border-active);background-color:var(--smart-ui-state-active);transition:background-color .1s linear,box-shadow 280ms ease-in-out;opacity:var(--smart-button-opacity-active)}.smart-button-element[disabled],smart-button[disabled],smart-repeat-button[disabled],smart-toggle-button[disabled]{color:var(--smart-disabled-color);border-color:var(--smart-disabled);background-color:var(--smart-disabled);cursor:default;--smart-background:var(--smart-disabled);--smart-border:var(--smart-disabled);--smart-background-color:var(--smart-disabled-color)}.smart-button-element.large button,smart-button.large button,smart-repeat-button.large button,smart-toggle-button.large button{padding:var(--smart-button-large-padding);font-size:var(--smart-button-large-font-size)}.smart-button-element.small button,smart-button.small button,smart-repeat-button.small button,smart-toggle-button.small button{padding:var(--smart-button-small-padding);font-size:var(--smart-button-small-font-size)}.smart-button-element.very-small button,smart-button.very-small button,smart-repeat-button.very-small button,smart-toggle-button.very-small button{padding:var(--smart-button-very-small-padding);font-size:var(--smart-button-very-small-font-size)}.smart-button-element.rounded,smart-button.rounded,smart-repeat-button.rounded,smart-toggle-button.rounded{--smart-border-top-left-radius:50px;--smart-border-top-right-radius:50px;--smart-border-bottom-left-radius:50px;--smart-border-bottom-right-radius:50px;border-radius:var(--smart-border-bottom-left-radius)!important}.smart-button-element.squared,smart-button.squared,smart-repeat-button.squared,smart-toggle-button.squared{--smart-border-top-left-radius:0;--smart-border-top-right-radius:0;--smart-border-bottom-left-radius:0;--smart-border-bottom-right-radius:0}.smart-button-element.flat,.smart-button-element.flat[active],.smart-button-element.flat[hover],smart-button.flat,smart-button.flat[active],smart-button.flat[hover],smart-repeat-button.flat,smart-repeat-button.flat[active],smart-repeat-button.flat[hover],smart-toggle-button.flat,smart-toggle-button.flat[active],smart-toggle-button.flat[hover]{color:var(--smart-button-flat-color);background:0 0;border-color:transparent}.smart-button-element.flat[focus],smart-button.flat[focus],smart-repeat-button.flat[focus],smart-toggle-button.flat[focus]{border-color:var(--smart-ui-state-focus)}.smart-button-element.flat[checked],smart-button.flat[checked],smart-repeat-button.flat[checked],smart-toggle-button.flat[checked]{text-decoration:underline;background:var(--smart-ui-state-active)}.smart-button-element.flat .smart-ripple,smart-button.flat .smart-ripple,smart-repeat-button.flat .smart-ripple,smart-toggle-button.flat .smart-ripple{background-color:var(--smart-button-flat-color)}.smart-button-element.outlined,smart-button.outlined,smart-repeat-button.outlined,smart-toggle-button.outlined{color:var(--smart-button-outlined-color);border-color:var(--smart-button-outlined-border);background:0 0;border-width:calc(2 * var(--smart-border-width))}.smart-button-element.outlined[active],.smart-button-element.outlined[hover],smart-button.outlined[active],smart-button.outlined[hover],smart-repeat-button.outlined[active],smart-repeat-button.outlined[hover],smart-toggle-button.outlined[active],smart-toggle-button.outlined[hover]{color:var(--smart-button-outlined-color);border-color:var(--smart-button-outlined-border);background:0 0}.smart-button-element.outlined[focus],smart-button.outlined[focus],smart-repeat-button.outlined[focus],smart-toggle-button.outlined[focus]{color:var(--smart-button-outlined-color);border-color:var(--smart-ui-state-focus);background:0 0}.smart-button-element.outlined[checked],smart-button.outlined[checked],smart-repeat-button.outlined[checked],smart-toggle-button.outlined[checked]{color:var(--smart-ui-state-color-active);border-color:var(--smart-ui-state-active);background:var(--smart-ui-state-active)}.smart-button-element.outlined .smart-ripple,smart-button.outlined .smart-ripple,smart-repeat-button.outlined .smart-ripple,smart-toggle-button.outlined .smart-ripple{background-color:var(--smart-button-outlined-color)}.smart-button-element.outlined button.smart-button,smart-button.outlined button.smart-button,smart-repeat-button.outlined button.smart-button,smart-toggle-button.outlined button.smart-button{border-radius:initial}.smart-button-element.raised,smart-button.raised,smart-repeat-button.raised,smart-toggle-button.raised{box-shadow:var(--smart-elevation-2);transition:background-color .1s linear,box-shadow 280ms ease-in-out}.smart-button-element.raised[hover],smart-button.raised[hover],smart-repeat-button.raised[hover],smart-toggle-button.raised[hover]{box-shadow:var(--smart-elevation-4)}.smart-button-element.raised button[active],.smart-button-element.raised[active],.smart-button-element.raised[checked],smart-button.raised button[active],smart-button.raised[active],smart-button.raised[checked],smart-repeat-button.raised button[active],smart-repeat-button.raised[active],smart-repeat-button.raised[checked],smart-toggle-button.raised button[active],smart-toggle-button.raised[active],smart-toggle-button.raised[checked]{box-shadow:var(--smart-elevation-8)}.smart-button-element.raised[focus],.smart-button-element.raised[focus]:not([checked]),smart-button.raised[focus],smart-button.raised[focus]:not([checked]),smart-repeat-button.raised[focus],smart-repeat-button.raised[focus]:not([checked]),smart-toggle-button.raised[focus],smart-toggle-button.raised[focus]:not([checked]){box-shadow:var(--smart-elevation-6)}.smart-button-element.floating,smart-button.floating,smart-repeat-button.floating,smart-toggle-button.floating{border-radius:50%;width:48px;height:48px;box-shadow:var(--smart-elevation-4);transition:background-color .1s linear,box-shadow 280ms ease-in-out}.smart-button-element.floating[hover],smart-button.floating[hover],smart-repeat-button.floating[hover],smart-toggle-button.floating[hover]{box-shadow:var(--smart-elevation-6)}.smart-button-element.floating[active],.smart-button-element.floating[checked],smart-button.floating[active],smart-button.floating[checked],smart-repeat-button.floating[active],smart-repeat-button.floating[checked],smart-toggle-button.floating[active],smart-toggle-button.floating[checked]{box-shadow:var(--smart-elevation-12)}.smart-button-element.floating[focus],.smart-button-element.floating[focus]:not([checked]),smart-button.floating[focus],smart-button.floating[focus]:not([checked]),smart-repeat-button.floating[focus],smart-repeat-button.floating[focus]:not([checked]),smart-toggle-button.floating[focus],smart-toggle-button.floating[focus]:not([checked]){box-shadow:var(--smart-elevation-6)}button.smart-button{position:relative;padding:var(--smart-button-padding);text-align:inherit;vertical-align:inherit;cursor:inherit;text-transform:inherit;font-weight:inherit;letter-spacing:inherit;background:inherit;color:inherit;border:none;-webkit-font-smoothing:antialiased;opacity:var(--smart-button-opacity);white-space:nowrap;border-radius:inherit}.smart-button .smart-ripple{background:var(--smart-background-color)}[smart-toggle-button] .smart-container,smart-toggle-button .smart-container{font-weight:inherit;font-style:inherit}[smart-toggle-button][checked],smart-toggle-button[checked]{color:var(--smart-ui-state-color-selected);border-color:var(--smart-ui-state-border-selected);background-color:var(--smart-ui-state-selected)}.smart-scroll-button .smart-button{padding:0}:host(.smart-button.flat) .smart-ripple{background-color:var(--smart-button-flat-color)}:host(.smart-button.outlined) .smart-ripple{background-color:var(--smart-button-outlined-color)}button.smart-button[type]:not(.smart-container){border-color:var(--smart-border);border-top-left-radius:var(--smart-border-top-left-radius);border-top-right-radius:var(--smart-border-top-right-radius);border-bottom-left-radius:var(--smart-border-bottom-left-radius);border-bottom-right-radius:var(--smart-border-bottom-right-radius);border-width:var(--smart-border-width);border-style:solid;text-align:center;vertical-align:middle;cursor:pointer;text-transform:var(--smart-button-text-transform);font-weight:500;letter-spacing:.08929em;overflow:hidden;font-style:var(--smart-font-style);font-size:var(--smart-font-size);background:var(--smart-background);outline:0}button.smart-button[type]:hover{color:var(--smart-ui-state-color-hover);border-color:var(--smart-ui-state-border-hover);background-color:var(--smart-ui-state-hover)}button.smart-button[type]:not([disabled]):active{color:var(--smart-ui-state-color-active);border-color:var(--smart-ui-state-border-active);background-color:var(--smart-ui-state-active)}smart-button[right-to-left],smart-repeat-button[right-to-left],smart-toggle-button[right-to-left]{direction:rtl}
smart-scroll-bar{display:block;touch-action:none;width:var(--smart-scroll-bar-default-width);height:var(--smart-scroll-bar-default-height)}smart-scroll-bar .smart-thumb{position:absolute;width:40px;background-clip:content-box;padding:var(--smart-scroll-bar-thumb-padding) 0;height:var(--smart-scroll-bar-thumb-size);cursor:default;box-sizing:border-box;border-width:1px;border-style:solid;border-color:var(--smart-scroll-bar-thumb-border);background-color:var(--smart-scroll-bar-thumb-background);border-top-left-radius:var(--smart-scroll-bar-thumb-border-top-left-radius);border-top-right-radius:var(--smart-scroll-bar-thumb-border-top-right-radius);border-bottom-left-radius:var(--smart-scroll-bar-thumb-border-bottom-left-radius);border-bottom-right-radius:var(--smart-scroll-bar-thumb-border-bottom-right-radius)}smart-scroll-bar .smart-thumb:hover{border-color:var(--smart-scroll-bar-thumb-border-hover);background-color:var(--smart-scroll-bar-thumb-background-hover)}smart-scroll-bar .smart-thumb:active{border-color:var(--smart-scroll-bar-thumb-border-active);background-color:var(--smart-scroll-bar-thumb-background-active)}smart-scroll-bar .smart-track{position:relative;float:left;height:100%;background-color:var(--smart-scroll-bar-track-background);width:100%}smart-scroll-bar .smart-scroll-button{display:none;float:left;width:var(--smart-scroll-button-size);height:100%;cursor:default;background-color:var(--smart-scroll-bar-button-background);color:var(--smart-scroll-bar-button-color);border:1px solid var(--smart-scroll-bar-button-border);min-height:0;padding:0;border-radius:0}smart-scroll-bar .smart-scroll-button:hover{background-color:var(--smart-scroll-bar-button-background-hover);color:var(--smart-scroll-bar-button-color-hover);border-color:var(--smart-scroll-bar-button-border-hover)}smart-scroll-bar .smart-scroll-button:active{background-color:var(--smart-scroll-bar-button-background-active);color:var(--smart-scroll-bar-button-color-active);border-color:var(--smart-scroll-bar-button-border-active)}smart-scroll-bar[show-buttons] .smart-track{width:calc(100% - var(--smart-scroll-button-size) * 2)}smart-scroll-bar[show-buttons] .smart-scroll-button{display:block}smart-scroll-bar[spinner][show-buttons] .smart-track{display:none}smart-scroll-bar[spinner][show-buttons] .smart-scroll-button{width:50%}smart-scroll-bar[discrete]{--smart-scroll-button-size:0px;--smart-scroll-bar-size:15px;--smart-scroll-bar-thumb-border-top-right-radius:6px;--smart-scroll-bar-thumb-border-top-left-radius:6px;--smart-scroll-bar-thumb-border-bottom-left-radius:6px;--smart-scroll-bar-thumb-border-bottom-right-radius:6px;--smart-scroll-bar-thumb-size:100%;--smart-scroll-bar-thumb-padding:3px;--smart-scroll-bar-default-width:var(--smart-editor-width);--smart-scroll-bar-default-height:var(--smart-scroll-bar-size);--smart-scroll-bar-background:#fafafa;--smart-scroll-bar-track-background:var(--smart-scroll-bar-background);--smart-scroll-bar-border:#F1F1F1;--smart-scroll-bar-thumb-background:#C1C1C1;--smart-scroll-bar-thumb-border:transparent}smart-scroll-bar[orientation=vertical]{height:var(--smart-scroll-bar-default-width);width:var(--smart-scroll-bar-default-height)}smart-scroll-bar[orientation=vertical] .smart-thumb{width:var(--smart-scroll-bar-thumb-size);padding:0 var(--smart-scroll-bar-thumb-padding);height:40px;top:0}smart-scroll-bar[orientation=vertical] .smart-track{float:none;width:100%;height:100%}smart-scroll-bar[orientation=vertical] .smart-scroll-button{float:none;height:var(--smart-scroll-button-size);width:100%}smart-scroll-bar[orientation=vertical][show-buttons] .smart-track{height:calc(100% - var(--smart-scroll-button-size) * 2)}smart-scroll-bar[orientation=vertical][spinner] .smart-scroll-button{height:50%;width:100%;float:none}
.smart-circular-progress-bar.smart-element,smart-circular-progress-bar.smart-element,smart-progress-bar.smart-element{border:none}.smart-circular-progress-bar.smart-element:focus>.smart-container,smart-circular-progress-bar.smart-element:focus>.smart-container,smart-progress-bar.smart-element:focus>.smart-container{border-color:var(--smart-outline)}.smart-circular-progress-bar.smart-container,.smart-circular-progress-bar>.smart-container,smart-circular-progress-bar.smart-container,smart-circular-progress-bar>.smart-container,smart-progress-bar.smart-container,smart-progress-bar>.smart-container{border-top-left-radius:var(--smart-border-top-left-radius);border-top-right-radius:var(--smart-border-top-right-radius);border-bottom-left-radius:var(--smart-border-bottom-left-radius);border-bottom-right-radius:var(--smart-border-bottom-right-radius);overflow:hidden;position:relative;border-width:var(--smart-border-width);border-style:solid;border-color:var(--smart-border);color:var(--smart-background-color)}.smart-circular-progress-bar .smart-label,smart-circular-progress-bar .smart-label,smart-progress-bar .smart-label{top:50%;left:50%;transform:translate(-50%,-50%);position:absolute;text-align:center;color:var(--smart-background-color)}smart-progress-bar{width:var(--smart-progress-bar-default-width);height:var(--smart-progress-bar-default-height)}smart-progress-bar .smart-label{width:auto;color:var(--smart-outline)}smart-progress-bar .smart-value{outline:0;height:100%;width:100%;box-sizing:border-box;position:absolute;border:1px solid var(--smart-ui-state-border-active);background-color:var(--smart-ui-state-active);transform-origin:left}smart-progress-bar .smart-value.smart-value-animation{animation:indeterminate 3s infinite linear}smart-progress-bar.primary .smart-value{border:1px solid var(--smart-primary);background-color:var(--smart-primary)}smart-progress-bar.secondary .smart-value{border:1px solid var(--smart-secondary);background-color:var(--smart-secondary)}smart-progress-bar.success .smart-value{border:1px solid var(--smart-success);background-color:var(--smart-success)}smart-progress-bar.info .smart-value{border:1px solid var(--smart-info);background-color:var(--smart-info)}smart-progress-bar.warning .smart-value{border:1px solid var(--smart-warning);background-color:var(--smart-warning)}smart-progress-bar.error .smart-value{border:1px solid var(--smart-error);background-color:var(--smart-error)}smart-progress-bar.light .smart-value{border:1px solid var(--smart-light);background-color:var(--smart-light)}smart-progress-bar.dark .smart-value{border:1px solid var(--smart-dark);background-color:var(--smart-dark)}smart-progress-bar:not([animation=none]) .smart-value{transition:.2s ease-in-out}smart-progress-bar[inverted] .smart-value,smart-progress-bar[orientation][inverted] .smart-value{transform-origin:right}smart-progress-bar[inverted] .smart-value.smart-value-animation{animation:indeterminate-inverted 3s infinite linear}smart-progress-bar[orientation] .smart-value{transform-origin:left}smart-progress-bar[orientation=vertical]{width:var(--smart-progress-bar-default-height);height:var(--smart-progress-bar-default-width)}smart-progress-bar[orientation=vertical][inverted] .smart-value{transform-origin:left bottom}smart-progress-bar[orientation=vertical] .smart-value{transform-origin:left top}smart-progress-bar[orientation=vertical] .smart-value.smart-value-animation{animation:indeterminate-vertical 3s infinite linear}smart-progress-bar[orientation=vertical] .smart-label{width:100%}smart-progress-bar[inverted][orientation=vertical] .smart-value.smart-value-animation{animation:indeterminate-vertical-inverted 3s infinite linear}.smart-circular-progress-bar,smart-circular-progress-bar{width:var(--smart-circular-progress-bar-default-size);height:var(--smart-circular-progress-bar-default-size)}.smart-circular-progress-bar.smart-container,.smart-circular-progress-bar>.smart-container,smart-circular-progress-bar.smart-container,smart-circular-progress-bar>.smart-container{border-radius:50%}.smart-circular-progress-bar .smart-value-animation-ms,smart-circular-progress-bar .smart-value-animation-ms{stroke-dashoffset:114}.smart-circular-progress-bar svg:first-of-type,smart-circular-progress-bar svg:first-of-type{position:absolute;border-radius:50%;pointer-events:none}.smart-circular-progress-bar svg:first-of-type .smart-value.smart-value-animation,smart-circular-progress-bar svg:first-of-type .smart-value.smart-value-animation{animation:circle 2s infinite linear}.smart-circular-progress-bar .smart-label-container,smart-circular-progress-bar .smart-label-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);overflow:hidden;box-sizing:content-box;border-radius:50%;background-color:transparent;border-style:solid;border-width:var(--smart-border-width);border-color:var(--smart-border);width:calc(100% - var(--smart-circular-progress-bar-fill-size));height:calc(100% - var(--smart-circular-progress-bar-fill-size))}.smart-circular-progress-bar .smart-value,.smart-circular-progress-bar .smart-value-path,smart-circular-progress-bar .smart-value,smart-circular-progress-bar .smart-value-path{stroke-width:var(--smart-circular-progress-bar-fill-size);fill:transparent;stroke-dasharray:314.159}.smart-circular-progress-bar .smart-value,smart-circular-progress-bar .smart-value{stroke:var(--smart-ui-state-active)}.smart-circular-progress-bar .smart-value-path,smart-circular-progress-bar .smart-value-path{stroke-dashoffset:0;stroke:transparent}.smart-circular-progress-bar.primary .smart-value,smart-circular-progress-bar.primary .smart-value{stroke:var(--smart-primary)}.smart-circular-progress-bar.secondary .smart-value,smart-circular-progress-bar.secondary .smart-value{stroke:var(--smart-secondary)}.smart-circular-progress-bar.success .smart-value,smart-circular-progress-bar.success .smart-value{stroke:var(--smart-success)}.smart-circular-progress-bar.info .smart-value,smart-circular-progress-bar.info .smart-value{stroke:var(--smart-info)}.smart-circular-progress-bar.warning .smart-value,smart-circular-progress-bar.warning .smart-value{stroke:var(--smart-warning)}.smart-circular-progress-bar.error .smart-value,smart-circular-progress-bar.error .smart-value{stroke:var(--smart-error)}.smart-circular-progress-bar.light .smart-value,smart-circular-progress-bar.light .smart-value{stroke:var(--smart-light)}.smart-circular-progress-bar.dark .smart-value,smart-circular-progress-bar.dark .smart-value{stroke:var(--smart-dark)}.smart-circular-progress-bar:not([animation=none]) .smart-value,smart-circular-progress-bar:not([animation=none]) .smart-value{transition:stroke-dashoffset 1s linear}.smart-circular-progress-bar[inverted] svg:first-of-type .smart-value.smart-value-animation,smart-circular-progress-bar[inverted] svg:first-of-type .smart-value.smart-value-animation{animation:circle-inverted 2s infinite linear}.smart-circular-progress-bar[indeterminate][inverted] svg:first-of-type,.smart-circular-progress-bar[value=null][inverted] svg:first-of-type,smart-circular-progress-bar[indeterminate][inverted] svg:first-of-type,smart-circular-progress-bar[value=null][inverted] svg:first-of-type{animation:rotate-circle-inverted 1s infinite linear}.smart-circular-progress-bar[indeterminate] svg:first-of-type,.smart-circular-progress-bar[value=null] svg:first-of-type,smart-circular-progress-bar[indeterminate] svg:first-of-type,smart-circular-progress-bar[value=null] svg:first-of-type{animation:rotate-circle 1s infinite linear}.barber-shop-effect .smart-value{background-image:linear-gradient(45deg,rgba(0,0,0,.2) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.2) 50%,rgba(0,0,0,.2) 75%,transparent 75%,transparent);background-size:5rem 5rem;background-position:0 -244rem;animation:stripes 10s linear infinite;animation-direction:normal}.barber-shop-effect[inverted] .smart-value,.barber-shop-effect[orientation=vertical] .smart-value{animation-direction:reverse}@keyframes stripes{0%{background-position:0 0}100%{background-position:60rem 0}}@keyframes indeterminate{0%{left:-100%;transform:scaleX(.4);transform-origin:left}20%{left:-40%;transform:scaleX(.3);transform-origin:left}35%{left:35%;transform:scaleX(.4);transform-origin:left}50%{left:75%;transform:scaleX(.6);transform-origin:left}55%{left:100%;transform:scaleX(.7);transform-origin:left}55.99%{left:100%;transform:scaleX(0);transform-origin:left}56%{left:-100%;transform:scaleX(0);transform-origin:left}56.99%{left:-100%;transform:scaleX(.6);transform-origin:left}75%{left:-5%;transform:scaleX(.6);transform-origin:left}80%{left:30%;transform:scaleX(.5);transform-origin:left}85%{left:50%;transform:scaleX(.4);transform-origin:left}90%{left:75%;transform:scaleX(.3);transform-origin:left}95%{left:95%;transform:scaleX(.2);transform-origin:left}98%{left:100%;transform:scaleX(.2);transform-origin:left}99.99%{left:100%;transform:scaleX(0);transform-origin:left}100%{left:-100%;transform:scaleX(0);transform-origin:left}}@keyframes indeterminate-vertical{0%{bottom:-100%;transform:scaleY(.4);transform-origin:bottom}20%{bottom:-40%;transform:scaleY(.3);transform-origin:bottom}35%{bottom:35%;transform:scaleY(.4);transform-origin:bottom}50%{bottom:75%;transform:scaleY(.6);transform-origin:bottom}55%{bottom:100%;transform:scaleY(.7);transform-origin:bottom}55.99%{bottom:100%;transform:scaleY(0);transform-origin:bottom}56%{bottom:-100%;transform:scaleY(0);transform-origin:bottom}56.99%{bottom:-100%;transform:scaleY(.6);transform-origin:bottom}75%{bottom:-5%;transform:scaleY(.6);transform-origin:bottom}80%{bottom:30%;transform:scaleY(.5);transform-origin:bottom}85%{bottom:50%;transform:scaleY(.4);transform-origin:bottom}90%{bottom:75%;transform:scaleY(.3);transform-origin:bottom}95%{bottom:95%;transform:scaleY(.2);transform-origin:bottom}98%{bottom:100%;transform:scaleY(.2);transform-origin:bottom}99.99%{bottom:100%;transform:scaleY(0);transform-origin:bottom}100%{bottom:-100%;transform:scaleY(0);transform-origin:bottom}}@keyframes circle{0%{stroke-dashoffset:314}5%{stroke-dashoffset:164}25%{stroke-dashoffset:104}}@keyframes circle-inverted{0%{stroke-dashoffset:-314}5%{stroke-dashoffset:-164}25%{stroke-dashoffset:-104}}@keyframes rotate-circle{50%{transform:rotate(180deg)}75%{transform:rotate(270deg)}100%{transform:rotate(360deg)}}@keyframes rotate-circle-inverted{50%{transform:rotate(-180deg)}75%{transform:rotate(-270deg)}100%{transform:rotate(-360deg)}}smart-circular-progress-bar[right-to-left] .smart-label,smart-progress-bar[right-to-left] .smart-label{direction:rtl}smart-progress-bar[right-to-left]:not([orientation=vertical]) .smart-value,smart-progress-bar[right-to-left][orientation=horizontal] .smart-value{transform-origin:right}smart-progress-bar[right-to-left]:not([orientation=vertical])[inverted] .smart-value,smart-progress-bar[right-to-left][orientation=horizontal][inverted] .smart-value{transform-origin:left}smart-progress-bar[right-to-left]:not([orientation=vertical]) .smart-value.smart-value-animation,smart-progress-bar[right-to-left][orientation=horizontal] .smart-value.smart-value-animation{animation:indeterminate-inverted 3s infinite linear}smart-progress-bar[right-to-left][inverted]:not([orientation=vertical]) .smart-value.smart-value-animation,smart-progress-bar[right-to-left][inverted][orientation=horizontal] .smart-value.smart-value-animation{animation:indeterminate 3s infinite linear}smart-circular-progress-bar[right-to-left][inverted] svg:first-of-type .smart-value.smart-value-animation{animation:circle 2s infinite linear}smart-circular-progress-bar[right-to-left] svg:first-of-type .smart-value.smart-value-animation{animation:circle-inverted 2s infinite linear}smart-circular-progress-bar[right-to-left][indeterminate] svg:first-of-type,smart-circular-progress-bar[right-to-left][value=null] svg:first-of-type{animation:rotate-circle-inverted 1s infinite linear}smart-circular-progress-bar[right-to-left][indeterminate][inverted] svg:first-of-type,smart-circular-progress-bar[right-to-left][value=null][inverted] svg:first-of-type{animation:rotate-circle 1s infinite linear}.barber-shop-effect[right-to-left] .smart-value{animation-direction:reverse}.barber-shop-effect[right-to-left][inverted] .smart-value{animation-direction:normal}
smart-file-upload{display:inline-block;width:var(--smart-file-upload-default-width);font-size:var(--smart-file-upload-font-size);font-family:var(--smart-file-upload-font-family);color:var(--smart-file-upload-color);overflow:hidden;box-sizing:border-box;border:var(--smart-file-upload-border-width) dashed var(--smart-file-upload-border);background-color:var(--smart-file-upload-background);min-width:200px;min-height:100px}smart-file-upload .smart-selected-files .smart-file.smart-hidden,smart-file-upload .smart-total-files.smart-hidden,smart-file-upload[show-progress] .smart-file smart-progress-bar{display:none}smart-file-upload[disabled]{opacity:.55;cursor:default}smart-file-upload[show-progress] .smart-file smart-progress-bar[value]{display:block}.smart-file.smart-uploading-start:before{width:100%;height:100%;position:absolute;left:0;top:0;font-family:arial;content:var(--smart-file-upload-text-content-uploading-start);background-color:rgba(193,193,193,.4117647059);opacity:1;display:flex;justify-content:flex-end;flex-direction:column;box-sizing:border-box;font-size:11px;color:#737373;padding:0 0 2px 5px;pointer-events:none;z-index:1;animation:connecting 1s linear infinite}.smart-file.smart-error:before,.smart-file.smart-pause:before,.smart-file.smart-uploading:before{height:100%;justify-content:flex-end;font-size:11px;z-index:1;position:absolute;font-family:arial;padding:0 0 2px 5px;width:100%;pointer-events:none;box-sizing:border-box;top:0;left:0}.smart-file.smart-uploading:before{content:var(--smart-file-upload-text-content-uploading);background-color:rgba(193,193,193,.4117647059);opacity:1;display:flex;flex-direction:column;color:var(--smart-ui-state)}.smart-file.smart-uploading .smart-item-upload-button{pointer-events:none}.smart-file.smart-uploading .smart-item-name{opacity:.2;user-select:none}.smart-file.smart-pause:before{content:var(--smart-file-upload-text-content-pause);background-color:rgba(255,0,0,.1882352941);border-radius:3px;opacity:.8;display:flex;flex-direction:column;color:#8a0000}.smart-file.smart-error:before{content:var(--smart-file-upload-text-content-error);background-color:var(--smart-error);border-radius:var(--smart-error-border-radius);opacity:0;display:flex;flex-direction:column;color:var(--smart-on-error);animation:error 6s linear 1}.smart-file.smart-error smart-progress-bar,.smart-selected-files .smart-uploading .smart-item-upload-button{opacity:.3}.smart-file smart-progress-bar{display:none;width:100%;height:4px;position:absolute;bottom:0;left:0}.smart-file smart-progress-bar .smart-container{border-style:none}.smart-file smart-progress-bar .smart-value{background-color:orange}.smart-file-upload .smart-file-upload-container,.smart-file-upload .smart-file-upload-footer,.smart-file-upload .smart-file-upload-header{padding:5px;width:100%;box-sizing:border-box}.smart-file-upload .smart-browse-button{display:block;margin:4px;width:var(--smart-file-upload-browse-button-width);height:var(--smart-file-upload-browse-button-height)}.smart-file-upload .smart-cancel-all-button,.smart-file-upload .smart-pause-all-button,.smart-file-upload .smart-upload-all-button{width:var(--smart-file-upload-footer-button-width);height:var(--smart-file-upload-footer-button-height);margin:4px}.smart-file-upload .smart-browse-input{display:none}.smart-file-upload .smart-drop-zone{display:none;width:100%;height:100px}.smart-file-upload .smart-total-files{font-family:arial;font-size:12px;color:gray;display:block;box-sizing:border-box;padding:0 0 2px 5px}.smart-file-upload .smart-total-files:empty,.smart-file-upload[hide-footer] .smart-file-upload-footer{display:none}.smart-file-upload[disabled] .smart-file-upload-container{pointer-events:none;user-select:none}.smart-file-upload[drop-zone] .smart-drop-zone{display:block}.smart-file-upload[drop-zone] .smart-overflow .smart-drop-zone{display:none}.smart-drop-zone{width:100%;height:100%;background-color:var(--smart-background);position:relative;box-sizing:border-box;border:1px dotted #d3d3d3}.smart-drop-zone:after{font-family:var(--smart-font-family-icon);overflow:hidden;text-overflow:ellipsis;display:flex;justify-content:center;flex-direction:column;height:100%;width:100%;text-align:center;content:var(--smart-file-upload-text-content-drop-zone);color:var(--smart-ui-state);box-sizing:border-box;border:5px dashed transparent;transition:border .5s ease-out}.smart-drop-zone.smart-drag-over:after,[data-theme=modern] .smart-drop-zone.smart-drag-over:after{content:var(--smart-file-upload-text-content-drop-zone-over);transition:border .5s ease-out;animation:drop-zone 1s ease-in infinite}.smart-drop-zone.smart-drag-over:after{font-size:50px;border:3px dashed var(--smart-background-border)}[data-theme=modern]{--smart-file-upload-text-content-drop-zone-over:"Drop here"}[data-theme=modern] .smart-drop-zone{border:2px dashed var(--smart-surface);width:100%;background-size:contain;background-repeat:no-repeat;background-position:bottom center;padding:10px;display:flex;justify-content:center;align-items:center}[data-theme=modern] .smart-drop-zone:after{font-family:Verdana;font-size:.875rem;font-weight:400;line-height:1.5}[data-theme=modern] .smart-drop-zone:hover{border-color:var(--smart-primary);background-color:rgba(var(--smart-primary-rgb),.1)}[data-theme=modern] .smart-drop-zone.smart-drag-over:after{border-color:transparent;font-size:2.5rem}.smart-selected-files{width:100%;height:100%;display:block;box-sizing:border-box;padding:2px}.smart-selected-files .smart-file{height:auto;position:relative;display:block;box-sizing:border-box;border:1px solid #d3d3d3;padding:10px;border-radius:3px;margin-bottom:1px;background-color:#fafafa;transition:border-color .5s ease}.smart-selected-files .smart-file:hover{transition:border-color .5s ease;border-color:gray}.smart-selected-files .smart-item-pause-button{pointer-events:none;box-sizing:border-box;height:16px;position:relative;width:16px;color:#999;transition:color .5s ease;display:none}.smart-selected-files .smart-item-pause-button:after{font-family:var(--smart-font-family-icon);position:absolute;left:0;top:0;font-size:16px;text-shadow:2px 2px 2px #d3d3d3;content:var(--smart-icon-close)}.smart-selected-files .smart-item-cancel-button{display:inline-block;box-sizing:border-box;height:16px;position:relative;width:16px;color:#999;transition:color .5s ease}.smart-selected-files .smart-item-cancel-button:after{font-family:var(--smart-font-family-icon);position:absolute;left:0;top:0;font-size:16px;text-shadow:2px 2px 2px #d3d3d3;content:var(--smart-icon-close)}.smart-selected-files .smart-item-cancel-button:hover{cursor:pointer;transition:color .5s ease;color:orange}.smart-selected-files .smart-item-upload-button{display:inline-block;box-sizing:border-box;height:16px;position:relative;width:16px;color:#999;transition:color .5s ease}.smart-selected-files .smart-item-upload-button:after{font-family:var(--smart-font-family-icon);content:var(--smart-icon-up);position:absolute;left:0;top:0;font-size:16px;text-shadow:2px 2px 2px #d3d3d3}.smart-selected-files .smart-item-upload-button:hover{cursor:pointer;color:var(--smart-success);transition:color .5s ease}.smart-selected-files .smart-item-name{display:inline-block;box-sizing:border-box;position:relative;width:calc(100% - 40px);overflow:hidden;text-overflow:ellipsis;height:auto}.smart-selected-files .smart-uploading .smart-item-name{width:calc(100% - 60px);overflow:hidden;text-overflow:ellipsis;height:auto}.smart-selected-files .smart-uploading .smart-item-pause-button{display:inline-block;cursor:pointer;pointer-events:all;transition:color .5s,opacity .5s ease;color:#dc1919;opacity:.5}.smart-selected-files .smart-uploading .smart-item-pause-button:hover{transition:color .5s,opacity .5s ease;color:red;opacity:1}.smart-selected-files .smart-uploading .smart-item-cancel-button{display:inline-block;cursor:pointer;pointer-events:all;transition:color .5s,opacity .5s ease;opacity:.5;color:#ff8c00}.smart-selected-files .smart-uploading .smart-item-cancel-button:hover{transition:color .5s,opacity .5s ease;color:orange;opacity:1}.smart-drop-zone-square{position:relative}.smart-drop-zone-square:before{content:"";display:block;padding-bottom:100%}.smart-drop-zone-square .smart-drop-zone{position:absolute;top:0;bottom:0;left:0;right:0}.smart-drop-zone-square.smart-drop-zone-small{min-width:115px}.smart-drop-zone-small{position:relative;width:auto;display:inline-block}.smart-drop-zone-small .smart-drop-zone.smart-drag-over:after{font-size:1.25rem}.smart-drop-zone-images-only .smart-drop-zone{display:flex;align-items:center;flex-flow:column;justify-content:space-evenly}.smart-drop-zone-images-only .smart-drop-zone:after{height:auto}.smart-drop-zone-images-only .smart-drop-zone:before{display:block;content:"";background-image:url(../images/dropable_zone_image.svg);width:70px;height:55px;background-size:contain;background-position:center center}@-webkit-keyframes connecting{0%,100%{color:rgba(115,115,115,.3137254902)}50%{color:rgba(115,115,115,.6)}}@-webkit-keyframes drop-zone{0%,100%{color:rgba(177,177,177,0)}50%{color:rgba(177,177,177,.6)}}@-webkit-keyframes rotating{from{transform:rotate(0)}to{transform:rotate(360deg)}}@-webkit-keyframes error{0%{opacity:.8;background-color:rgba(255,0,0,.0823529412)}3%,9%{background-color:rgba(255,0,0,.2509803922)}12%,6%{background-color:rgba(255,0,0,.0823529412)}80%{opacity:.8}100%{opacity:0}}.smart-drop-zone[right-to-left],.smart-file[right-to-left],smart-file-upload[right-to-left]>.smart-container{direction:rtl}
smart-color-panel{width:var(--smart-color-panel-default-width);height:var(--smart-color-panel-default-height);user-select:none}smart-color-panel .no-touch{touch-action:none}smart-color-panel.smart-element{display:inline-block;overflow:initial;border:none;background:var(--smart-background);color:var(--smart-background-color)}smart-color-panel[disabled]{opacity:.55;pointer-events:none;user-select:none}.smart-color-panel .smart-content{position:relative;cursor:pointer;display:flex;width:100%;height:100%}.smart-color-panel label{display:inline-block;user-select:none}.smart-color-panel smart-tooltip .smart-tooltip-content{box-shadow:0 0 20px 0 #8b8b8b}.smart-color-panel input[type=number]::-webkit-inner-spin-button,.smart-color-panel input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.smart-color-panel input[type=number]{-moz-appearance:textfield;-webkit-appearance:textfied}.smart-color-panel .color-input{width:70px;height:var(--smart-editor-height);margin:5px;padding:5px;border:var(--smart-border-width) solid var(--smart-border);border-radius:var(--smart-border-radius);background:var(--smart-background);color:var(--smart-color);outline:0}.smart-color-panel .color-input:focus{border-color:var(--smart-outline)}.smart-color-panel .color-input::selection{background:var(--smart-editor-selection);color:var(--smart-editor-selection-color)}.smart-color-panel .grid-mode-container,.smart-color-panel .palette-mode-container{width:100%;max-height:100%;position:relative}.smart-color-panel .custom-color-selection .buttons-container{display:flex;align-items:center;justify-content:flex-end}.smart-color-panel .custom-colors-box,.smart-color-panel .gray-shades-box,.smart-color-panel .grid-samples-container,.smart-color-panel .spectrum-box{display:grid;grid-template-columns:repeat(var(--smart-color-panel-grid-mode-column-count),auto)}.smart-color-panel .hue-scale{display:block;max-width:100px;height:var(--smart-color-panel-palette-size);background-image:linear-gradient(red,#f0f,#00f,#0ff,#0f0,#ff0,red);width:20px;margin-left:15px;margin-right:15px;position:relative;padding:1px;border:var(--smart-border-width) solid var(--smart-border);background-clip:content-box;-webkit-background-clip:content-box}.smart-color-panel .hue-scale-thumb{width:100%;height:10px;box-sizing:content-box;border:3px solid #fff;border-left-width:10px;border-right-width:10px;position:absolute;left:-10px;top:-3px;box-shadow:0 0 5px #666,inset 0 0 2px 0 #999,inset 0 0 2px 0 #999;opacity:.8;cursor:pointer}.smart-color-panel .color-palette-thumb{width:0;height:0;top:0;position:absolute;z-index:10;pointer-events:none}.smart-color-panel .color-palette-thumb:after{content:" ";position:absolute;left:-14px;top:-14px;width:16px;height:16px;border:5px solid #fff;border-radius:50%;box-shadow:var(--smart-elevation-2)}.smart-color-panel .color-palette{width:var(--smart-color-panel-palette-size);height:var(--smart-color-panel-palette-size);background-color:red;display:block;position:relative;overflow:hidden;cursor:crosshair;padding:1px;border:1px solid #d3d3d3;background-clip:content-box;-webkit-background-clip:content-box}.smart-color-panel .color-palette:after,.smart-color-panel .color-palette:before{width:100%;height:100%;content:" ";display:block;position:absolute;left:0;top:0;z-index:0}.smart-color-panel .color-palette:before{background-image:linear-gradient(90deg,#fff,transparent)}.smart-color-panel .color-palette:after{background-image:linear-gradient(transparent,#000)}.smart-color-panel .color-controls-container{display:block;max-width:100px;overflow:hidden}.smart-color-panel .color-palette-container{width:100%;height:var(--smart-color-panel-palette-size);display:flex;flex-direction:row}.smart-color-panel .preview-container{width:100%;min-width:100px;height:100px;background-color:#fff;margin-bottom:20px;position:relative;padding:1px;border:var(--smart-border-width) solid var(--smart-border);background-clip:content-box;-webkit-background-clip:content-box}.smart-color-panel .preview-container-bottom,.smart-color-panel .preview-container-top{width:100%;height:50%;display:block;background-color:#fff}.smart-color-panel .alpha-channel-container{flex-direction:row;width:100%;align-items:center;align-content:space-around;margin-top:5px;display:none}.smart-color-panel .alpha-channel-container label{width:48px}.smart-color-panel .alpha-channel-scale{width:var(--smart-color-panel-palette-size);height:20px;margin-top:15px;margin-bottom:15px;position:relative;border:var(--smart-border-width) solid var(--smart-border);margin-right:20px}.smart-color-panel .alpha-channel-scale:after,.smart-color-panel .alpha-channel-scale:before{position:absolute;left:0;top:0;display:block;width:100%;height:100%;content:" "}.smart-color-panel .alpha-channel-scale:before{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 74%,#ccc 75%,#ccc),linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 74%,#ccc 75%,#ccc);background-position:0 6px,8px 14px;background-size:16px 16px}.smart-color-panel .alpha-channel-scale:after{background-image:linear-gradient(90deg,var(--smart-color-panel-alpha-channel-color),transparent);box-shadow:inset 1px -1px 0 0 #fff,inset -1px 1px 0 0 #fff}.smart-color-panel .alpha-channel-thumb{width:10px;height:100%;box-sizing:content-box;border:3px solid #fff;border-top-width:10px;border-bottom-width:10px;position:absolute;left:-3px;top:-10px;opacity:.8;box-shadow:0 0 5px #666,inset 0 0 2px 0 #999,inset 0 0 2px 0 #999;cursor:pointer;z-index:1}.smart-color-panel .buttons-container{display:none;flex-direction:row;justify-content:flex-end;padding:10px 0 0}.smart-color-panel .buttons-container smart-button{width:100px}.smart-color-panel .color-sample,.smart-color-panel .user-color-container{width:var(--smart-color-panel-grid-mode-item-size);height:var(--smart-color-panel-grid-mode-item-size)}.smart-color-panel .buttons-container smart-button:last-of-type{margin-left:20px}.smart-color-panel .gradient-background{background-image:linear-gradient(45deg,#ccc 25%,transparent