smart-webcomponents-react
Version:
[](https://jqwidgets.com/license/)
4 lines • 409 kB
CSS
smart-scroll-viewer{display:block;width:var(--smart-editor-width);min-width:var(--smart-scroll-viewer-min-width);max-width:var(--smart-scroll-viewer-max-width);height:var(--smart-list-box-default-height);min-height:var(--smart-scroll-viewer-min-height);max-height:var(--smart-scroll-viewer-max-height);padding:3px}.smart-scroll-viewer.smart-container,smart-scroll-viewer>.smart-container{height:100%;width:100%;border:none;position:relative;overflow:hidden}.smart-scroll-viewer>.smart-container,.smart-scroll-viewer>.smart-container>.smart-scroll-viewer-container{max-height:inherit;min-height:inherit;max-width:inherit;min-width:inherit}.smart-scroll-viewer smart-scroll-bar{overflow:visible;position:absolute;bottom:0;height:calc(var(--smart-scroll-bar-size));width:100%}.smart-scroll-viewer smart-scroll-bar:before{position:absolute;content:"";width:100%;height:var(--smart-scroll-bar-size);background-color:var(--smart-surface);left:100%}.smart-scroll-viewer smart-scroll-bar.bottom-corner{width:calc(100% - var(--smart-scroll-bar-size))}.smart-scroll-viewer smart-scroll-bar[orientation=vertical]{right:0;top:0;height:100%;width:calc(var(--smart-scroll-bar-size))}.smart-scroll-viewer smart-scroll-bar[orientation=vertical].bottom-corner{height:calc(100% - var(--smart-scroll-bar-size))}.smart-scroll-viewer .smart-scroll-viewer-container{width:100%;height:100%;overflow:hidden;position:relative;background-color:transparent}.smart-scroll-viewer .smart-scroll-viewer-container.hscroll{height:calc(100% - var(--smart-scroll-bar-size))}.smart-scroll-viewer .smart-scroll-viewer-container.vscroll{width:calc(100% - var(--smart-scroll-bar-size))}.smart-scroll-viewer .smart-scroll-viewer-content-container{width:auto;height:auto;display:inline-block;padding:5px;position:relative;background-color:transparent}.smart-scroll-viewer[right-to-left] .smart-scroll-viewer-container{direction:rtl;text-align:initial}.smart-scroll-viewer[right-to-left] .smart-scroll-viewer-container.vscroll,.smart-scroll-viewer[right-to-left] smart-scroll-bar{left:var(--smart-scroll-bar-size);right:0}.smart-scroll-viewer[right-to-left] smart-scroll-bar:after{left:-100%}.smart-scroll-viewer[right-to-left] smart-scroll-bar[orientation=vertical]{left:0;right:initial}.smart-scroll-viewer[right-to-left] smart-scroll-bar[orientation=vertical]:after{content:none}
.smart-breadcrumb-feedback,.smart-breadcrumb-feedback *,smart-breadcrumb{box-sizing:border-box}smart-breadcrumb{display:block;width:var(--smart-breadcrumb-default-width);min-width:calc(2 * var(--smart-breadcrumb-padding) + 2 * var(--smart-border-width) + 40px);height:var(--smart-breadcrumb-default-height);border:var(--smart-border-width) solid var(--smart-border);padding:var(--smart-breadcrumb-padding);padding-top:0;border-top-right-radius:var(--smart-border-top-right-radius);border-top-left-radius:var(--smart-border-top-left-radius);border-bottom-left-radius:var(--smart-border-bottom-left-radius);border-bottom-right-radius:var(--smart-border-bottom-right-radius)}smart-breadcrumb .smart-template-container{height:auto}smart-breadcrumb .smart-template-container .smart-breadcrumb-items{width:100%;height:auto;display:flex;flex-direction:row;flex-wrap:wrap}.smart-breadcrumb-feedback,smart-breadcrumb .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item{flex-direction:row;margin-top:var(--smart-breadcrumb-padding);width:auto;padding:5px;color:var(--smart-background-color)}smart-breadcrumb .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item{display:flex;align-items:center;position:relative;border:var(--smart-border-width) solid var(--smart-border);margin-right:var(--smart-breadcrumb-horizontal-offset);height:var(--smart-breadcrumb-item-height);background-color:var(--smart-background)}smart-breadcrumb .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item:not(:last-child):after{position:absolute;width:var(--smart-breadcrumb-horizontal-offset);height:2px;background-color:var(--smart-border);left:calc(100% + var(--smart-border-width));top:50%;content:""}smart-breadcrumb .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item>.smart-close-button{display:none;margin-left:10px;margin-right:5px;width:1em;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;cursor:pointer;font-family:smart-icons}smart-breadcrumb .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item>.smart-close-button:after{content:var(--smart-icon-close)}smart-breadcrumb .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item .smart-breadcrumb-item-label{user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}smart-breadcrumb .smart-template-container .smart-breadcrumb-items>.afterTarget:last-child:after,smart-breadcrumb .smart-template-container .smart-breadcrumb-items>.target:before{position:absolute;width:2px;height:100%;background-color:var(--smart-primary);left:calc(-1 * var(--smart-breadcrumb-horizontal-offset)/ 2 - 1px);content:""}smart-breadcrumb .smart-template-container .smart-breadcrumb-items>.afterTarget:last-child:after{left:calc(100% + var(--smart-breadcrumb-horizontal-offset)/ 2)}smart-breadcrumb .smart-breadcrumb-placeholder{width:100%;height:100%;display:flex;padding:5px}smart-breadcrumb[allow-drag] .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item{cursor:pointer;touch-action:none}smart-breadcrumb[allow-drag] .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item.dragged{background-image:linear-gradient(45deg,rgba(0,0,0,.1) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.1) 50%,rgba(0,0,0,.1) 75%,transparent 75%,transparent);background-size:3em 3em}smart-breadcrumb[add-new-item] .smart-template-container .smart-breadcrumb-items>smart-button{--smart-button-padding:0;position:relative;margin-right:var(--smart-breadcrumb-horizontal-offset);margin-top:var(--smart-breadcrumb-padding);border:var(--smart-border-width) solid var(--smart-border);border-radius:initial;width:var(--smart-breadcrumb-item-height);height:var(--smart-breadcrumb-item-height);text-align:center;font-size:25px;overflow:visible}smart-breadcrumb[add-new-item] .smart-template-container .smart-breadcrumb-items>smart-button>button{overflow:hidden;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}smart-breadcrumb[close-buttons] .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item>.smart-close-button{display:block}smart-breadcrumb[minimized]{padding:0;overflow:visible}smart-breadcrumb[minimized] .smart-container{display:flex;align-items:center;position:relative;padding:var(--smart-breadcrumb-padding)}smart-breadcrumb[minimized] .smart-hamburger-icon{width:40px;height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;float:none;cursor:pointer}smart-breadcrumb[minimized] .smart-hamburger-icon.smart-close-button>.smart-hamburger-icon-line-top{width:29px;transform:translateX(4px) rotate(45deg)}smart-breadcrumb[minimized] .smart-hamburger-icon.smart-close-button>.smart-hamburger-icon-line-center{visibility:hidden}smart-breadcrumb[minimized] .smart-hamburger-icon.smart-close-button>.smart-hamburger-icon-line-bottom{width:29px;transform:translateX(4px) rotate(-45deg)}smart-breadcrumb[minimized] .smart-hamburger-icon-line{margin-bottom:5px;border-radius:10px;width:30px;height:5px;background-color:var(--smart-primary);transform-origin:left}smart-breadcrumb[minimized] .smart-hamburger-icon-line-bottom{margin-bottom:0}smart-breadcrumb[minimized] .smart-template-container{position:absolute;left:calc(-1 * var(--smart-border-width));top:calc(100% + 2px + var(--smart-border-width));margin:calc(var(--smart-drop-down-vertical-offset) + var(--smart-drop-down-element-padding-size)) 0;border-width:var(--smart-border-width);border-style:solid;border-color:var(--smart-border);padding:var(--smart-drop-down-element-padding-size);width:var(--smart-breadcrumb-drop-down-width);background-color:var(--smart-background);box-shadow:var(--smart-elevation-8);z-index:1}smart-breadcrumb[minimized] .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item{width:100%;margin:0;justify-content:space-between}smart-breadcrumb[minimized] .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item:not(:last-child):after{content:none}smart-breadcrumb[minimized] .smart-template-container .smart-breadcrumb-items>smart-button{width:100%;margin:0}smart-breadcrumb[minimized] .smart-template-container .smart-breadcrumb-items>smart-button>button{padding:0;justify-content:center}smart-breadcrumb[minimized] .smart-template-container .smart-breadcrumb-items>.afterTarget:last-child:after,smart-breadcrumb[minimized] .smart-template-container .smart-breadcrumb-items>.target:before{width:100%;height:4px;left:0;top:-3px}smart-breadcrumb[minimized] .smart-template-container .smart-breadcrumb-items>.afterTarget:last-child:after{top:100%}smart-breadcrumb[minimized][animation=none] .smart-template-container.smart-visibility-hidden{display:none}smart-breadcrumb[minimized]:not([animation=none]) .smart-template-container{opacity:1;transform:scaleY(1);-webkit-transform-origin:top;transform-origin:top;transition:opacity .2s ease-in,visibility .2s ease-in,transform .2s ease-in}smart-breadcrumb[minimized]:not([animation=none]) .smart-template-container.smart-visibility-hidden.not-in-view{left:-9999px;top:-9999px;transition:none}smart-breadcrumb[minimized]:not([animation=none]) .smart-template-container.smart-visibility-hidden{opacity:.2;transform:scaleY(0)}smart-breadcrumb[minimized]:not([animation=none]) .smart-hamburger-icon-line{transition:visibility 20ms ease-in,transform .2s ease-in,width .2s ease-in}.smart-breadcrumb-feedback{align-items:center;border:var(--smart-border-width) solid var(--smart-border);margin-right:var(--smart-breadcrumb-horizontal-offset);height:var(--smart-breadcrumb-item-height);background-color:var(--smart-background);box-shadow:var(--smart-elevation-12);white-space:nowrap;opacity:.8;position:absolute;display:inline-flex;font-family:var(--smart-font-family);font-size:var(--smart-font-size);z-index:999}.smart-breadcrumb-feedback:after{margin-left:10px;content:var(--smart-icon-check);font-family:smart-icons;font-size:14px;width:1.5em;border-radius:100%;height:1.5em;background-color:var(--smart-success);color:var(--smart-success-color);display:flex;align-items:center;justify-content:center}.smart-breadcrumb-feedback.freeze:after{background-color:inherit;color:var(--smart-primary);content:var(--smart-icon-lock)}.smart-breadcrumb-feedback.unfreeze:after{background-color:inherit;color:var(--smart-primary);content:var(--smart-icon-lock-open)}.smart-breadcrumb-feedback.error:after{background-color:var(--smart-error);color:var(--smart-error-color);content:var(--smart-icon-attention-circled)}.smart-breadcrumb-feedback.data:after{background-color:var(--smart-primary);color:var(--smart-primary-color);content:var(--smart-icon-docs)}smart-breadcrumb[right-to-left]>.smart-container{direction:rtl}smart-breadcrumb[right-to-left]>.smart-container .smart-template-container .smart-breadcrumb-items>.afterTarget:first-child:after{position:absolute;content:"";width:2px;height:100%;top:0;left:calc(100% + var(--smart-breadcrumb-horizontal-offset)/ 2);background-color:var(--smart-success)}smart-breadcrumb[right-to-left]>.smart-container .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item>.smart-close-button{margin-left:5px;margin-right:10px}.smart-breadcrumb-feedback[right-to-left],smart-breadcrumb[right-to-left]:not([minimized]) .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item,smart-breadcrumb[right-to-left]:not([minimized])[add-new-item]:not([minimized]) .smart-breadcrumb-items>smart-button{margin-left:var(--smart-breadcrumb-horizontal-offset);margin-right:initial}smart-breadcrumb[right-to-left]>.smart-container .smart-template-container .smart-breadcrumb-items .smart-breadcrumb-item:not(:last-child):after{left:calc(-1 * var(--smart-breadcrumb-horizontal-offset))}smart-breadcrumb[right-to-left][minimized] .smart-container .smart-template-container{right:calc(-1 * var(--smart-border-width));left:auto}.smart-breadcrumb-feedback[right-to-left]{direction:rtl}.smart-breadcrumb-feedback[right-to-left]:after{margin-left:initial;margin-right:var(--smart-breadcrumb-horizontal-offset)}
smart-drop-down-list{width:var(--smart-drop-down-list-default-width);height:var(--smart-drop-down-list-default-height);overflow:initial;visibility:hidden;cursor:pointer}smart-drop-down-list.smart-element{overflow:visible;visibility:inherit;border-width:0}smart-drop-down-list.smart-element .smart-drop-down.smart-visibility-hidden{transform:scale(0);transition:transform .2s cubic-bezier(.4,0,.2,1) 0s;transform-origin:left top 0}.smart-drop-down-list smart-list-box{position:relative;width:100%;height:100%;border:initial;padding:initial;overflow:hidden;font-size:inherit;font-family:inherit;outline:0}.smart-drop-down-list .smart-buttons-container .smart-action-button .smart-token{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;cursor:pointer;margin:0 2px;user-select:none}.smart-drop-down-list .smart-drop-down-list-unselect-button{pointer-events:none}.smart-drop-down-list .smart-drop-down-list-unselect-button:not(:empty){margin-right:2px}.smart-drop-down-list[selection-display-mode=tokens] .smart-drop-down-list-unselect-button{pointer-events:initial}
.smart-sort-panel .smart-grid-panel-maintain-sort-button,.smart-view-panel,smart-colors-panel,smart-column-panel,smart-formatting-panel,smart-group-panel,smart-multi-column-filter-panel,smart-sort-panel{font-size:var(--smart-font-size);font-family:var(--smart-font-family)}smart-colors-panel,smart-column-panel,smart-formatting-panel,smart-multi-column-filter-panel,smart-sort-panel{display:block;min-width:345px;width:var(--smart-grid-panel-default-width);height:var(--smart-grid-panel-default-height);padding:var(--smart-grid-panel-padding);overflow:auto;background:var(--smart-background);color:var(--smart-background-color)}smart-colors-panel .tabs{width:100%;height:30px;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;margin-bottom:5px}smart-colors-panel .tabs .tab{width:50%;display:flex;align-items:center;justify-content:center;text-transform:uppercase;color:var(--smart-background-color);cursor:pointer}smart-colors-panel .tabs .tab label{cursor:pointer}smart-colors-panel .tabs .tab.active{color:var(--smart-primary);border-bottom:2px solid var(--smart-primary);font-weight:700}.smart-view-panel,smart-group-panel{display:block;background:var(--smart-background);color:var(--smart-background-color)}smart-group-panel{min-width:345px;height:var(--smart-grid-panel-default-height);padding:var(--smart-grid-panel-padding);overflow:auto;width:var(--smart-grid-panel-default-width)}smart-group-panel.smart-mobile{width:345px}.smart-view-panel{min-height:400px;height:400px;max-height:450px;width:250px;padding:0;overflow:hidden}.smart-view-panel smart-list-box input{border:none;border-radius:0;border-bottom:2px solid var(--smart-border)}.smart-group-panel .smart-grid-panel-item.dragged,.smart-sort-panel .smart-grid-panel-item.dragged{opacity:.7}.smart-group-panel .smart-grid-panel-label-by,.smart-sort-panel .smart-grid-panel-label-by{padding:5px;width:60px;flex-grow:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.smart-group-panel .smart-grid-panel-field-container,.smart-sort-panel .smart-grid-panel-field-container{height:100%;width:100px;flex-grow:3}.smart-group-panel .smart-grid-panel-field-selection,.smart-sort-panel .smart-grid-panel-field-selection{height:100%;width:100%}.smart-group-panel .smart-grid-panel-from,.smart-sort-panel .smart-grid-panel-from{display:flex;justify-content:center;padding:5px;width:40px;flex-grow:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.smart-group-panel .smart-grid-panel-direction,.smart-sort-panel .smart-grid-panel-direction{display:flex;width:115px;flex-grow:2;height:100%;background-color:var(--smart-surface);border-top-right-radius:var(--smart-border-top-right-radius);border-top-left-radius:var(--smart-border-top-left-radius);border-bottom-left-radius:var(--smart-border-bottom-left-radius);border-bottom-right-radius:var(--smart-border-bottom-right-radius)}.smart-group-panel .smart-grid-panel-direction:focus,.smart-sort-panel .smart-grid-panel-direction:focus{outline:0;box-shadow:0 0 0 1px var(--smart-primary)}.smart-group-panel .smart-grid-panel-direction>div,.smart-sort-panel .smart-grid-panel-direction>div{display:flex;align-items:center;justify-content:center;margin:3px;width:calc(50% - 6px);height:calc(100% - 6px);border-top-right-radius:var(--smart-border-top-right-radius);border-top-left-radius:var(--smart-border-top-left-radius);border-bottom-left-radius:var(--smart-border-bottom-left-radius);border-bottom-right-radius:var(--smart-border-bottom-right-radius)}.smart-group-panel .smart-grid-panel-direction>div.selected,.smart-sort-panel .smart-grid-panel-direction>div.selected{background-color:var(--smart-primary);color:var(--smart-primary-color)}.smart-sort-panel.smart-mobile smart-input{max-width:150px}.smart-sort-panel .smart-grid-panel-maintain-sort{justify-content:flex-end;margin-top:5px}.smart-sort-panel .smart-grid-panel-buttons-container{align-items:flex-start!important}.smart-sort-panel .smart-grid-panel-maintain-sort-button::before{font-family:var(--smart-font-family-icon);content:var(--smart-icon-check-empty);margin-right:5px}.smart-sort-panel .smart-grid-panel-maintain-sort-button[active]{color:var(--smart-primary)}.smart-sort-panel .smart-grid-panel-maintain-sort-button[active]::before{font-family:var(--smart-font-family-icon);content:var(--smart-icon-check-squared)}.smart-colors-panel .smart-grid-panel-item-close-button,.smart-group-panel .smart-grid-panel-item-close-button,.smart-multi-column-filter-panel .smart-grid-panel-item-close-button,.smart-sort-panel .smart-grid-panel-item-close-button,.smart-view-panel .smart-grid-panel-item-close-button{display:flex;justify-content:center;width:20px}.smart-colors-panel .smart-grid-panel-item-close-button:after,.smart-group-panel .smart-grid-panel-item-close-button:after,.smart-multi-column-filter-panel .smart-grid-panel-item-close-button:after,.smart-sort-panel .smart-grid-panel-item-close-button:after,.smart-view-panel .smart-grid-panel-item-close-button:after{content:var(--smart-icon-close);font-family:var(--smart-font-family-icon)}@media (pointer:coarse){.smart-colors-panel .smart-grid-panel-item-close-button:after,.smart-group-panel .smart-grid-panel-item-close-button:after,.smart-multi-column-filter-panel .smart-grid-panel-item-close-button:after,.smart-sort-panel .smart-grid-panel-item-close-button:after,.smart-view-panel .smart-grid-panel-item-close-button:after{font-size:16px}}.smart-colors-panel .smart-grid-panel-item-close-button:hover,.smart-group-panel .smart-grid-panel-item-close-button:hover,.smart-multi-column-filter-panel .smart-grid-panel-item-close-button:hover,.smart-sort-panel .smart-grid-panel-item-close-button:hover,.smart-view-panel .smart-grid-panel-item-close-button:hover{color:var(--smart-ui-state-color-selected);background:var(--smart-ui-state-selected);border-color:var(--smart-ui-state-selected);cursor:pointer}.smart-colors-panel .smart-grid-panel-item-close-button:active,.smart-colors-panel .smart-grid-panel-item-close-button:focus,.smart-group-panel .smart-grid-panel-item-close-button:active,.smart-group-panel .smart-grid-panel-item-close-button:focus,.smart-multi-column-filter-panel .smart-grid-panel-item-close-button:active,.smart-multi-column-filter-panel .smart-grid-panel-item-close-button:focus,.smart-sort-panel .smart-grid-panel-item-close-button:active,.smart-sort-panel .smart-grid-panel-item-close-button:focus,.smart-view-panel .smart-grid-panel-item-close-button:active,.smart-view-panel .smart-grid-panel-item-close-button:focus{color:var(--smart-primary)}.smart-colors-panel .smart-grid-panel-item-close-button:focus,.smart-group-panel .smart-grid-panel-item-close-button:focus,.smart-multi-column-filter-panel .smart-grid-panel-item-close-button:focus,.smart-sort-panel .smart-grid-panel-item-close-button:focus,.smart-view-panel .smart-grid-panel-item-close-button:focus{outline:0}.smart-colors-panel .smart-grid-panel-item,.smart-group-panel .smart-grid-panel-item,.smart-multi-column-filter-panel .smart-grid-panel-item,.smart-sort-panel .smart-grid-panel-item,.smart-view-panel .smart-grid-panel-item{display:flex;align-items:center;margin-top:calc(var(--smart-grid-panel-vertical-offset)/ 2);margin-bottom:calc(var(--smart-grid-panel-vertical-offset)/ 2);width:calc(100% - var(--smart-sortable-handle-size));height:var(--smart-grid-panel-item-height);min-height:var(--smart-grid-panel-item-height);background-color:var(--smart-background)}.smart-colors-panel[close-button-position=right] .smart-grid-panel-item-close-button,.smart-group-panel[close-button-position=right] .smart-grid-panel-item-close-button,.smart-multi-column-filter-panel[close-button-position=right] .smart-grid-panel-item-close-button,.smart-sort-panel[close-button-position=right] .smart-grid-panel-item-close-button,.smart-view-panel[close-button-position=right] .smart-grid-panel-item-close-button{order:1}.smart-colors-panel[close-button-position=right] .smart-sortable-container,.smart-group-panel[close-button-position=right] .smart-sortable-container,.smart-multi-column-filter-panel[close-button-position=right] .smart-sortable-container,.smart-sort-panel[close-button-position=right] .smart-sortable-container,.smart-view-panel[close-button-position=right] .smart-sortable-container{align-items:flex-end}.smart-colors-panel .smart-grid-panel-container-footer,.smart-column-panel .smart-grid-panel-container-footer,.smart-group-panel .smart-grid-panel-container-footer,.smart-multi-column-filter-panel .smart-grid-panel-container-footer,.smart-sort-panel .smart-grid-panel-container-footer{display:flex;flex-direction:row;justify-content:space-between}.smart-colors-panel .smart-grid-panel-buttons-container,.smart-column-panel .smart-grid-panel-buttons-container,.smart-group-panel .smart-grid-panel-buttons-container,.smart-multi-column-filter-panel .smart-grid-panel-buttons-container,.smart-sort-panel .smart-grid-panel-buttons-container{width:auto;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.smart-colors-panel .smart-grid-panel-buttons-container span,.smart-column-panel .smart-grid-panel-buttons-container span,.smart-group-panel .smart-grid-panel-buttons-container span,.smart-multi-column-filter-panel .smart-grid-panel-buttons-container span,.smart-sort-panel .smart-grid-panel-buttons-container span{display:flex;align-items:center;padding:5px}.smart-colors-panel .smart-grid-panel-buttons-container span:hover,.smart-column-panel .smart-grid-panel-buttons-container span:hover,.smart-group-panel .smart-grid-panel-buttons-container span:hover,.smart-multi-column-filter-panel .smart-grid-panel-buttons-container span:hover,.smart-sort-panel .smart-grid-panel-buttons-container span:hover{color:var(--smart-ui-state-color-selected);background:var(--smart-ui-state-selected);border-color:var(--smart-ui-state-selected);cursor:pointer}.smart-colors-panel .smart-grid-panel-buttons-container span:focus,.smart-column-panel .smart-grid-panel-buttons-container span:focus,.smart-group-panel .smart-grid-panel-buttons-container span:focus,.smart-multi-column-filter-panel .smart-grid-panel-buttons-container span:focus,.smart-sort-panel .smart-grid-panel-buttons-container span:focus{outline:0}.smart-sort-panel .smart-sortable-container{margin-bottom:var(--smart-grid-panel-padding)}.smart-sort-panel .smart-sortable-container:empty:after{content:attr(no-sorting);margin-top:calc(var(--smart-grid-panel-vertical-offset)/ 2);margin-bottom:calc(var(--smart-grid-panel-vertical-offset)/ 2);opacity:.7}.smart-sort-panel .smart-grid-panel-container-footer>smart-input{min-width:215px;width:40%}.smart-sort-panel .smart-grid-panel-container-footer>smart-input.smart-mobile{min-width:100px;width:120px}.smart-sort-panel .smart-grid-panel-item-close-button{display:flex;align-items:center;padding:5px}.smart-sort-panel .smart-grid-panel-buttons-container .smart-grid-panel-apply-button{margin-left:5px}.smart-colors-panel>.smart-container,.smart-multi-column-filter-panel>.smart-container{display:grid;grid-auto-rows:1fr max-content;grid-row-gap:var(--smart-grid-panel-padding)}.smart-colors-panel.smart-colors-panel>.smart-container,.smart-multi-column-filter-panel.smart-colors-panel>.smart-container{grid-auto-rows:auto}.smart-colors-panel .smart-filter-panel-items-container,.smart-multi-column-filter-panel .smart-filter-panel-items-container{overflow:auto;padding-top:10px}.smart-colors-panel .smart-filter-panel-items-container:empty:after,.smart-multi-column-filter-panel .smart-filter-panel-items-container:empty:after{margin-top:calc(var(--smart-grid-panel-vertical-offset)/ 2);margin-bottom:calc(var(--smart-grid-panel-vertical-offset)/ 2);opacity:.7;content:attr(no-filters)}.smart-colors-panel .smart-filter-panel-add-filter-button,.smart-multi-column-filter-panel .smart-filter-panel-add-filter-button{display:flex;align-items:center;padding:5px}.smart-colors-panel .smart-filter-panel-add-filter-button:hover,.smart-multi-column-filter-panel .smart-filter-panel-add-filter-button:hover{color:var(--smart-ui-state-color-selected);background:var(--smart-ui-state-selected);border-color:var(--smart-ui-state-selected);cursor:pointer}.smart-colors-panel .smart-filter-panel-add-filter-button:focus,.smart-multi-column-filter-panel .smart-filter-panel-add-filter-button:focus{outline:0}.smart-colors-panel .smart-grid-panel-item,.smart-multi-column-filter-panel .smart-grid-panel-item{width:100%;display:grid;columns:5;grid-template-columns:var(--smart-multi-column-filter-panel-template-columns);grid-gap:var(--smart-grid-panel-padding)}.smart-colors-panel .smart-grid-panel-item>*,.smart-multi-column-filter-panel .smart-grid-panel-item>*{width:100%}.smart-colors-panel .smart-grid-panel-item-close-button,.smart-multi-column-filter-panel .smart-grid-panel-item-close-button{display:flex;align-items:center;padding:5px}.smart-colors-panel .smart-grid-panel-buttons-container .smart-grid-panel-apply-button,.smart-multi-column-filter-panel .smart-grid-panel-buttons-container .smart-grid-panel-apply-button{margin-left:5px}.smart-colors-panel[close-button-position=right],.smart-multi-column-filter-panel[close-button-position=right]{--smart-multi-column-filter-panel-template-columns:60px 2fr 3fr 3fr 15px}.smart-kanban-column-panel .smart-grid-panel-item::after,.smart-kanban-column-panel .smart-grid-panel-item::before{display:none!important}.smart-group-panel .smart-sortable-container smart-column-panel smart-sortable{margin-bottom:var(--smart-grid-panel-padding)}.smart-group-panel .smart-sortable-container:empty:after{margin-top:calc(var(--smart-grid-panel-vertical-offset)/ 2);margin-bottom:calc(var(--smart-grid-panel-vertical-offset)/ 2);opacity:.7;content:attr(no-grouping)}.smart-group-panel .smart-grid-panel-container-footer>smart-input{min-width:215px;width:40%}.smart-group-panel .smart-grid-panel-container-footer>smart-input.smart-mobile{min-width:100px;width:120px}.smart-group-panel .smart-grid-panel-item-close-button{display:flex;align-items:center;padding:5px}.smart-group-panel .smart-grid-panel-buttons-container .smart-grid-panel-apply-button{margin-left:5px}.smart-group-panel .smart-grid-panel-direction,.smart-group-panel .smart-grid-panel-from{display:none}.smart-group-panel .smart-grid-panel-expand-collapse{justify-content:flex-end;margin-top:10px;margin-bottom:10px}.smart-group-panel .smart-group-panel-expand-button{margin-left:15px}.smart-column-panel .smart-column-panel-label,.smart-column-panel .smart-grid-panel-buttons-container .smart-grid-panel-apply-button,.smart-format-panel .smart-grid-panel-buttons-container .smart-grid-panel-apply-button{margin-left:5px}.smart-group-panel .smart-group-panel-collapse-button[active],.smart-group-panel .smart-group-panel-expand-button[active]{color:var(--smart-primary)}.smart-format-panel .smart-grid-panel-buttons-container{width:auto;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.smart-format-panel .smart-grid-panel-buttons-container span{display:flex;align-items:center;padding:5px}.smart-format-panel .smart-grid-panel-buttons-container span:hover{color:var(--smart-ui-state-color-selected);background:var(--smart-ui-state-selected);border-color:var(--smart-ui-state-selected);cursor:pointer}.smart-format-panel.smart-grid-panel-container-footer{display:flex;flex-direction:row;height:50px;justify-content:center;padding:15px}.smart-column-panel{--smart-grid-panel-item-height:20px;min-width:100px}.smart-column-panel.smart-container,.smart-column-panel>.smart-container{display:flex;flex-direction:column}.smart-column-panel smart-sortable{flex:5;min-height:50px;overflow:auto;max-height:var(--smart-column-panel-drop-down-height)}.smart-column-panel .smart-column-panel-label,.smart-data-view-header-button>div{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.smart-column-panel .smart-column-panel-find-container{display:flex;align-items:center;border-bottom:2px solid var(--smart-border);height:var(--smart-editor-height);position:relative}.smart-column-panel .smart-column-panel-find-container input{outline:0;border:none;width:calc(100% - 16px);height:100%;font-family:var(--smart-font-family);font-size:var(--smart-font-size);background:var(--smart-grid-panel-background);color:var(--smart-grid-panel-color)}.smart-column-panel .smart-column-panel-find-container .clear-button{width:16px;cursor:pointer}.smart-column-panel .smart-column-panel-find-container .clear-button:after{content:var(--smart-icon-cancel);font-family:var(--smart-font-family-icon);display:flex;align-items:center;justify-content:center}.smart-column-panel .smart-column-panel-find-container.no-results:after{content:attr(no-results);position:absolute;top:calc(100% + 10px)}.smart-column-panel .smart-column-panel-label.icon{position:relative;padding-left:var(--smart-column-icon-size)}.smart-column-panel .smart-column-panel-label.icon:after{content:"";position:absolute;left:0;top:0;width:var(--smart-column-icon-size);height:100%;background-repeat:no-repeat;background-position:center}.smart-column-panel .smart-grid-panel-buttons-container{width:100%;justify-content:center;margin-top:3px}.smart-column-panel .smart-grid-panel-container-footer{display:grid;grid-template-columns:auto auto}.smart-column-panel .toggle-visibility{width:16px;height:16px;font-family:var(--smart-font-family-icon);cursor:pointer;display:flex;align-items:center;justify-content:center}.smart-column-panel .toggle-visibility:after{content:var(--smart-icon-visibility)}.smart-column-panel .toggle-visibility:focus{outline:0;color:var(--smart-primary)}.smart-column-panel .toggle-visibility.disable-toggle{pointer-events:none;opacity:.5}.smart-column-panel .toggle-visibility.hidden:after{content:var(--smart-icon-visibility-off)}.smart-column-panel .clear-button:focus{outline:0;color:var(--smart-primary)}.smart-column-panel .smart-grid-panel-item{display:flex;align-items:center;margin-top:calc(var(--smart-grid-panel-vertical-offset)/ 2);margin-bottom:calc(var(--smart-grid-panel-vertical-offset)/ 2);width:calc(100% - var(--smart-sortable-handle-size));height:var(--smart-grid-panel-item-height);min-height:var(--smart-grid-panel-item-height);background-color:var(--smart-background)}.smart-column-panel .smart-grid-panel-item.group:after,.smart-column-panel .smart-grid-panel-item.group:before{opacity:0!important;pointer-events:none}.smart-column-panel .smart-grid-panel-item.indent{padding-left:12px}.smart-grid-panel-apply-button,.smart-grid-panel-cancel-button{padding:5px 8px;min-width:80px;display:flex;text-transform:uppercase}.smart-grid-panel-reset-button{text-decoration:underline;display:flex;align-items:center;cursor:pointer;text-transform:uppercase}.smart-grid-panel-cancel-button{background:var(--smart-surface);color:var(--smart-surface-color);border:1px solid var(--smart-border);border-radius:var(--smart-border-radius);justify-content:center}.smart-grid-panel-apply-button{border-radius:var(--smart-border-radius);justify-content:center;background:var(--smart-primary);color:var(--smart-primary-color);border:1px solid var(--smart-primary)}.smart-data-view-header{padding:3px;position:relative;display:grid;grid-template-areas:"states views customize filter sort format details delete . search";grid-template-columns:minmax(0,max-content) minmax(0,max-content) minmax(50px,max-content) minmax(50px,max-content) minmax(50px,max-content) minmax(50px,max-content) minmax(50px,max-content) 1fr 24px;grid-gap:10px;grid-template-rows:100%;background:var(--smart-surface);color:var(--smart-surface-color)}.smart-data-view-header-button{display:flex;align-items:center;justify-content:center;padding:5px 5px 5px 25px;height:30px;margin-top:5px;position:relative;cursor:pointer;border-top-right-radius:var(--smart-border-top-right-radius);border-top-left-radius:var(--smart-border-top-left-radius);border-bottom-left-radius:var(--smart-border-bottom-left-radius);border-bottom-right-radius:var(--smart-border-bottom-right-radius)}.smart-data-view-header-button:after{position:absolute;font-family:var(--smart-font-family-icon);left:8px}.smart-data-view-header-button:active{color:var(--smart-ui-state-color-active);background-color:var(--smart-ui-state-active)}.smart-data-view-header-button:focus{outline:var(--smart-primary) solid 1px}.smart-data-view-header-button:hover{color:var(--smart-ui-state-color-hover);background-color:var(--smart-ui-state-hover)}.smart-data-view-header-button[aria-expanded=true]{color:var(--smart-ui-state-color-selected);background-color:var(--smart-ui-state-selected);border-color:var(--smart-ui-state-border-selected)}.smart-data-view-header-button.smart-data-view-search-button:active{color:var(--smart-ui-state-active)}.smart-data-view-header-drop-down{position:absolute;background-color:var(--smart-background);box-shadow:var(--smart-elevation-8);z-index:9999;height:auto;transform:scaleY(1);transform-origin:top;opacity:1}.smart-data-view-header-drop-down.smart-mobile{--smart-font-size:12px}.smart-data-view-header-drop-down smart-colors-panel,.smart-data-view-header-drop-down smart-column-panel,.smart-data-view-header-drop-down smart-multi-column-filter-panel,.smart-data-view-header-drop-down smart-sort-panel{width:100%;border:none}.smart-data-view-header-drop-down.smart-visibility-hidden{transform:scaleY(0);opacity:0}.smart-data-view-header-drop-down.customize-panel{width:var(--smart-data-view-customize-panel-width)}.smart-data-view-header-drop-down.colors-panel,.smart-data-view-header-drop-down.filter-panel{width:var(--smart-data-view-filter-panel-width)}.smart-data-view-header-drop-down.format-panel{max-height:320px;overflow:auto}.smart-data-view-header-drop-down.sort-panel{width:var(--smart-data-view-sort-panel-width)}.smart-data-view-header-drop-down.search-panel{width:var(--smart-data-view-search-panel-width);padding:var(--smart-data-view-padding)}.smart-data-view-header-drop-down.search-panel .smart-data-view-search-box{display:grid;grid-template-columns:1fr 16px;grid-template-rows:100%;grid-gap:2px;align-items:center}.smart-data-view-header-drop-down.search-panel .smart-data-view-search-box.matches{grid-template-columns:1fr max-content 16px 16px 16px}.smart-data-view-header-drop-down.search-panel .smart-data-view-search-box.matches .smart-data-view-search-next,.smart-data-view-header-drop-down.search-panel .smart-data-view-search-box.matches .smart-data-view-search-prev{display:flex}.smart-data-view-header-drop-down.search-panel .smart-data-view-search-box.matches .smart-data-view-search-label{display:block}.smart-data-view-header-drop-down.search-panel .smart-data-view-search-box.no-matches{grid-template-columns:1fr max-content 16px}.smart-data-view-header-drop-down.search-panel .smart-data-view-search-box.no-matches .smart-data-view-search-label{display:block}.smart-data-view-header-drop-down.search-panel input{outline:0;border:none;min-width:0;padding:0;font-family:var(--smart-font-family);font-size:var(--smart-font-size);background:var(--smart-background);color:var(--smart-background-color)}.smart-data-view-search-box div:focus{outline:var(--smart-primary) solid 1px}.smart-data-view-search-button{grid-area:search;margin-right:0;padding:0}.smart-data-view-search-button:after{content:var(--smart-icon-search)}.smart-data-view-customize-button{grid-area:customize}.smart-data-view-customize-button:after{content:var(--smart-icon-visibility-off)}.smart-data-view-customize-button.hidden{background-color:#D0F0FD;color:#039BE5}.smart-data-view-delete-button{grid-area:delete}.smart-data-view-delete-button:after{content:var(--smart-icon-delete)}.smart-data-view-details-button{grid-area:details}.smart-data-view-details-button:after{content:var(--smart-icon-resize-full)}.smart-data-view-filter-button{grid-area:filter}.smart-data-view-filter-button:after{content:var(--smart-icon-add-filter)}.smart-data-view-filter-button.filtered{background-color:#D1F7C4;color:#0B8043}.smart-data-view-sort-button{grid-area:sort}.smart-data-view-group-button,.smart-data-view-label-button,.smart-data-view-resource-button{grid-area:group}.smart-data-view-sort-button:after{content:var(--smart-icon-sort)}.smart-data-view-sort-button.sorted{background-color:#FFEBB6;color:#B88707}.smart-data-view-label-button:after{content:var(--smart-icon-font)}.smart-data-view-label-button.grouped{background-color:#FFDAF6;color:#FF36C2}.smart-data-view-colors-button,.smart-data-view-format-button{grid-area:format}.smart-data-view-group-button:after,.smart-data-view-resource-button:after{content:var(--smart-icon-group)}.smart-data-view-group-button.grouped,.smart-data-view-resource-button.grouped{background-color:#D0F0FD;color:#039BE5}.smart-data-view-group-button.scheduler.grouped,.smart-data-view-resource-button.scheduler.grouped{background-color:#FFCFC9;color:#D50000}.smart-data-view-group-button.scheduler:after,.smart-data-view-resource-button.scheduler:after{content:var(--smart-icon-scheduler)}.smart-data-view-format-button:after{content:var(--smart-icon-table)}.smart-data-view-format-button.formatted{background-color:var(--smart-primary);color:var(--smart-primary-color)}.smart-data-view-colors-button:after{content:var(--smart-icon-color-background)}.smart-data-view-colors-button.formatted{background-color:#ECE1FD;color:#8C47FF}.smart-data-view-download-button.formatted,.smart-data-view-states-button.formatted,.smart-data-view-views-button.formatted{background-color:var(--smart-primary);color:var(--smart-primary-color)}.smart-data-view-download-button{grid-area:download}.smart-data-view-download-button:after{content:var(--smart-icon-arrow-down);position:initial;margin-left:8px}.smart-data-view-download-button:before{font-family:var(--smart-font-family-icon);left:8px;content:var(--smart-icon-download-alt);position:absolute}.smart-data-view-views-button{grid-area:views}.smart-data-view-views-button:after{content:var(--smart-icon-arrow-down);position:initial;margin-left:8px}.smart-data-view-views-button:before{font-family:var(--smart-font-family-icon);left:8px;content:var(--smart-icon-grid-alt);position:absolute}.smart-data-view-views-button.kanban:before{content:var(--smart-icon-kanban-alt)}.smart-data-view-views-button.card:before{content:var(--smart-icon-card-alt)}.smart-data-view-states-button{grid-area:states;border-right:1px solid var(--smart-border);padding-right:5px}.smart-data-view-states-button:before{font-family:var(--smart-font-family-icon);left:8px;content:var(--smart-icon-menu);position:absolute}.smart-grid-toolbar .smart-data-view-header{height:100%;display:flex}.smart-grid-toolbar .smart-data-view-header-button{margin-right:0}.smart-grid-toolbar .smart-data-view-header-button.smart-disabled{pointer-events:none;opacity:.5}.smart-grid-toolbar .smart-data-view-search-button{position:absolute;right:30px;top:0}.smart-card-view .smart-data-view-header-button,.smart-kanban .smart-data-view-header-button{margin-top:0;height:100%}.smart-card-view .smart-data-view-header-button.smart-data-view-search-button,.smart-kanban .smart-data-view-header-button.smart-data-view-search-button{min-width:30px}.smart-card-view:not([animation=none]) .smart-data-view-header-drop-down,.smart-data-view-header-drop-down[owner],.smart-kanban:not([animation=none]) .smart-data-view-header-drop-down{transition:height .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1),visibility .2s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1)}.smart-data-view-search-label{display:none;font-size:calc(var(--smart-font-size) - 3px);opacity:.7}.smart-data-view-search-next,.smart-data-view-search-prev{align-items:center;justify-content:center;cursor:pointer;font-family:var(--smart-font-family-icon);font-size:10px;display:none;background-color:var(--smart-surface);color:var(--smart-surface-color);height:100%}.smart-data-view-search-next:hover,.smart-data-view-search-prev:hover{color:var(--smart-ui-state-color-hover);background-color:var(--smart-ui-state-hover)}.smart-data-view-search-next:active,.smart-data-view-search-prev:active{color:var(--smart-ui-state-color-active);background-color:var(--smart-ui-state-active)}.smart-data-view-search-prev:after{content:var(--smart-icon-arrow-up)}.smart-data-view-search-next:after{content:var(--smart-icon-arrow-down)}.smart-data-view-search-close{display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:var(--smart-font-family-icon);font-size:10px;color:var(--smart-background-color)}.smart-data-view-search-close:after{content:var(--smart-icon-close)}.smart-data-view-search-close:hover{color:var(--smart-ui-state-color-hover);background-color:var(--smart-ui-state-hover)}.smart-data-view-search-close:active{color:var(--smart-ui-state-color-active);background-color:var(--smart-ui-state-active)}.smart-data-view-found{outline:var(--smart-outline) solid 4px;outline-offset:-4px}.smart-data-view-highlighted{box-shadow:0 0 23px 1px var(--smart-primary);outline:var(--smart-primary) solid 4px;outline-offset:-4px}[header-position=bottom] .smart-data-view-header-drop-down{transform-origin:bottom}.smart-formatting-panel{width:var(--smart-formatting-panel-default-width);min-height:150px;padding:0;overflow:visible;z-index:999}.smart-formatting-panel>.smart-container{position:relative;min-height:inherit}.smart-formatting-panel .smart-formatting-panel-items-container{width:100%;height:100%;padding:0 calc(2 * var(--smart-grid-panel-padding));overflow:auto}.smart-formatting-panel .smart-formatting-panel-item>.format-label{grid-area:format-label;justify-self:end}.smart-formatting-panel .smart-formatting-panel-item>.font-family-input{grid-area:font-family-input}.smart-formatting-panel .smart-formatting-panel-item>.font-size-input{grid-area:font-size-input}.smart-formatting-panel .smart-formatting-panel-item>.popup-button{display:flex;align-items:center;border:var(--smart-border-width) solid var(--smart-border);width:100%;height:100%;grid-area:popup-button;justify-content:center;cursor:pointer;font-size:20px;font-weight:700}.smart-formatting-panel .smart-formatting-panel-item>.preview{display:flex;align-items:center;border:var(--smart-border-width) solid var(--smart-border);width:100%;height:100%;grid-area:preview;padding:0 var(--smart-grid-panel-padding)}.smart-formatting-panel .smart-add-new-button{display:block;position:absolute;bottom:calc(var(--smart-grid-panel-padding) - 5px);right:calc(var(--smart-grid-panel-padding) - 5px);width:var(--smart-formatting-panel-add-new-button-size);height:var(--smart-formatting-panel-add-new-button-size);border-radius:50%;background-color:var(--smart-primary);color:var(--smart-primary-color);cursor:pointer;opacity:.3}.smart-formatting-panel .smart-add-new-button:after{content:"+";display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:35px}.smart-formatting-panel .smart-add-new-button:focus,.smart-formatting-panel .smart-add-new-button:hover{opacity:1;transform:scale(1.2,1.2)}.smart-formatting-panel .smart-add-new-button:focus{outline:0}.smart-formatting-panel .close-button:focus,.smart-formatting-panel .popup-button:focus,.smart-formatting-panel-popup .colors-container:focus,.smart-formatting-panel-popup .header>div:focus,.smart-formatting-panel-popup input:focus{outline:var(--smart-ui-state-border-active) solid var(--smart-border-width)}.smart-formatting-panel.scroll .smart-add-new-button{right:calc(12px + var(--smart-grid-panel-padding));border-radius:50%}.smart-formatting-panel:not([animation=none]) .smart-add-new-button{transition:transform cubic-bezier(.81,.27,0,.93) .5s,opacity .2s cubic-bezier(.4,0,.2,1)}.smart-formatting-panel-item{display:grid;grid-template-columns:auto 3fr 2fr var(--smart-formatting-panel-row-height) 1fr .5fr 1fr 1fr;grid-template-rows:var(--smart-formatting-panel-row-height) var(--smart-formatting-panel-row-height);grid-template-areas:"value-label columns-input condition-input condition-input first-value first-value first-value close-button" "format-label font-family-input font-size-input popup-button preview preview preview close-button";gap:var(--smart-grid-panel-padding);border-bottom:var(--smart-border-width) solid var(--smart-border);width:100%;padding:calc(2 * var(--smart-grid-panel-padding)) 0}.smart-formatting-panel-item:last-child{border-bottom:none}.smart-formatting-panel-item>*{min-width:0;max-width:none;min-height:0;max-height:none;width:auto;align-self:center;justify-self:center}.smart-formatting-panel-item>.value-label{grid-area:value-label;justify-self:end}.smart-formatting-panel-item>.columns-input{grid-area:columns-input}.smart-formatting-panel-item>.condition-input{grid-area:condition-input}.smart-formatting-panel-item>.first-value{grid-area:first-value}.smart-formatting-panel-item>.ampersand{grid-area:ampersand;display:none}.smart-formatting-panel-item>.second-value{grid-area:second-value;display:none}.smart-formatting-panel-item>.close-button{grid-area:close-button;position:relative;width:16px;height:16px}.smart-formatting-panel-item>.close-button:after{content:var(--smart-icon-close);display:flex;align-items:center;justify-content:center;position:absolute;width:100%;height:100%;font-size:20px;font-family:smart-icons;opacity:.5;cursor:pointer}.smart-formatting-panel-item.between{grid-template-areas:"value-label columns-input condition-input condition-input first-value ampersand second-value close-button" "format-label font-family-input font-size-input popup-button preview preview preview close-button"}.smart-formatting-panel-item.between>.ampersand,.smart-formatting-panel-item.between>.second-value{display:block}.smart-formatting-panel-popup{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:var(--smart-formatting-panel-row-height) var(--smart-formatting-panel-row-height) auto var(--smart-formatting-panel-row-height);grid-template-areas:"header header" "code input" "colors colors" "apply cancel";gap:var(--smart-grid-panel-padding);position:absolute;border:var(--smart-border-width) solid var(--smart-border);border-top-right-radius:var(--smart-border-top-right-radius);border-top-left-radius:var(--smart-border-top-left-radius);border-bottom-left-radius:var(--border-bottom-left-radius);border-bottom-right-radius:var(--smart-border-bottom-right-radius);width:var(--smart-formatting-panel-popup-width);padding:var(--smart-grid-panel-padding);background-color:var(--smart-background);box-shadow:var(--smart-elevation-8);z-index:9999;opacity:1;transform:scale(1);transform-origin:top;font-family:var(--smart-font-family);font-size:var(--smart-font-size)}.smart-formatting-panel-popup .header,.smart-formatting-panel-popup input,.smart-formatting-panel-popup>.color-code{border:var(--smart-border-width) solid var(--smart-border)}.smart-formatting-panel-popup>.color-code{width:100%;height:100%;grid-area:code;display:flex;align-items:center;box-sizing:border-box;padding:var(--smart-grid-panel-padding);color:var(--smart-background-color)}.smart-formatting-panel-popup .header{grid-area:header;display:flex}.smart-formatting-panel-popup .header>div{display:flex;flex-direction:row;align-items:center;justify-content:center;width:50%;height:100%;text-transform:uppercase;font-weight:700;cursor:pointer;color:var(--smart-background-color)}.smart-formatting-panel-popup .header>div:first-child{border-right:var(--smart-border-width) solid var(--smart-border)}.smart-formatting-panel-popup .header>.selected{background-color:var(--smart-ui-state-selected);color:var(--smart-ui-state-color-selected)}.smart-formatting-panel-popup input{width:100%;height:100%;grid-area:input;background-color:var(--smart-background);cursor:pointer}.smart-formatting-panel-popup input:focus{border-color:var(--smart-ui-state-border-focus)}.smart-formatting-panel-popup .colors-container{grid-area:colors;display:grid;grid-template-columns:repeat(8,1fr);grid-auto-rows:var(--smart-formatting-panel-color-box-height);gap:3px;width:100%}.smart-formatting-panel-popup .colors-container>div{border:var(--smart-border-width) solid var(--smart-border);cursor:pointer}.smart-formatting-panel-popup .colors-container>div.selected{position:relative;display:flex;align-items:center;justify-content:center}.smart-formatting-panel-popup .colors-container>div.selected:after{display:flex;align-items:center;justify-content:center;position:absolute;height:100%;font-size:20px;font-family:smart-icons;cursor:pointer;border-radius:50%;content:var(--smart-icon-check);background-color:var(--smart-background-color);color:var(--smart-background);width:var(--smart-formatting-panel-color-box-he