@nova-ui/bits
Version:
SolarWinds Nova Framework
172 lines • 167 kB
JavaScript
// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to
// deal in the Software without restriction, including without limitation the
// rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
// sell copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
import { Attribute, ChangeDetectionStrategy, Component, ElementRef, HostBinding, Input, ViewChild, ViewContainerRef, ViewEncapsulation, } from "@angular/core";
import { fromEvent, merge, Subject, timer } from "rxjs";
import { filter, takeUntil } from "rxjs/operators";
import { ButtonSizeType } from "./public-api";
import { buttonConstants } from "../../constants/button.constants";
import { LoggerService } from "../../services/log-service";
import * as i0 from "@angular/core";
import * as i1 from "../../services/log-service";
import * as i2 from "@angular/common";
import * as i3 from "../icon/icon.component";
// <example-url>./../examples/index.html#/button</example-url>
export class ButtonComponent {
/**
* Optionally, specify an icon color. Note: The icon color for displayStyle "primary" is "white" and is not configurable.
*/
get iconColor() {
return this._iconColor ? this._iconColor : "";
}
set iconColor(value) {
this._iconColor = value;
}
/**
* Optionally, set the size of the button. Supported values are "compact", "default", and "large".
*/
// TODO: Remove this setter/getter logic in scope of NUI-3475
get size() {
return this._size;
}
set size(value) {
this._size =
value === "small" ? ButtonSizeType.compact : value;
}
get sizeClassLarge() {
return this.size === "large";
}
get sizeClassCompact() {
return this.size === "compact";
}
get iconRightClass() {
return this.iconRight;
}
get iconleftClass() {
return !this.iconRight;
}
get isBusyClass() {
return this.isBusy;
}
get isEmptyClass() {
return this.isEmpty ?? this._isContentEmpty;
}
get dispStylePrimClass() {
return this.displayStyle === "primary";
}
get dispStyleActionClass() {
return this.displayStyle === "action";
}
get displayStyleDestructiveClass() {
return this.displayStyle === "destructive";
}
get dispStyleDefaultClass() {
return (this.displayStyle === "default" ||
!(this.dispStylePrimClass ||
this.dispStyleActionClass ||
this.displayStyleDestructiveClass));
}
get ariaIconLabel() {
return this.ariaLabel || this.getAriaLabel();
}
constructor(type, el, logger) {
this.type = type;
this.el = el;
this.logger = logger;
/** Sets aria-label for the component */
this.ariaLabel = "";
/**
* Optionally, set whether to fire a "click" event repeatedly while the button is pressed.
*/
this.isRepeat = false;
this.ngUnsubscribe = new Subject();
if (this.getHostElement().tagName === "BUTTON" && !type) {
this.logger.error(`No type specified for button element. To avoid potential problems, the "type" attribute \
should be set explicitly: `, el.nativeElement);
}
}
ngOnInit() {
this.setupRepeatEvent();
}
ngAfterContentChecked() {
if (this.isEmpty === undefined) {
this.setIsContentEmptyValue();
}
}
ngOnDestroy() {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
}
/**
* Passes correct size of icon to inner HTML template.
*/
getIconSize() {
return this.size
? buttonConstants.iconSizeMap[this.size.toLowerCase()]
: "";
}
/**
* Passes correct styles to inner HTML template for displaying busy state.
*/
getRippleContainerStyle() {
const host = this.getHostElement();
const d = Math.max(host.offsetWidth, host.offsetHeight);
const x = Math.floor((host.offsetWidth - d) / 2);
const y = Math.floor((host.offsetHeight - d) / 2);
return {
left: `${x}px`,
top: `${y}px`,
width: `${d}px`,
height: `${d}px`,
};
}
getAriaLabel() {
// In chrome once innerText gets touched in a native element this caused issues in table-sticky-header NUI-6033
return this._isContentEmpty
? this.icon
: this.contentContainer.element.nativeElement.textContent.trim();
}
setIsContentEmptyValue() {
const innerHTML = this.contentContainer.element.nativeElement.innerHTML;
this._isContentEmpty = !innerHTML || !innerHTML.trim();
}
setupRepeatEvent() {
const hostElement = this.getHostElement();
const mouseUp$ = fromEvent(hostElement, "mouseup").pipe(takeUntil(this.ngUnsubscribe));
const mouseLeave$ = fromEvent(hostElement, "mouseleave").pipe(takeUntil(this.ngUnsubscribe));
fromEvent(hostElement, "mousedown")
.pipe(takeUntil(this.ngUnsubscribe), filter(() => this.isRepeat))
.subscribe(() => {
const repeatSubscription = timer(buttonConstants.repeatDelay, buttonConstants.repeatInterval)
.pipe(takeUntil(merge(mouseUp$, mouseLeave$, this.ngUnsubscribe)))
.subscribe(() => {
if (hostElement.disabled) {
repeatSubscription.unsubscribe();
}
else {
hostElement.click();
}
});
});
}
getHostElement() {
return this.el.nativeElement;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, deps: [{ token: "type", attribute: true }, { token: i0.ElementRef }, { token: i1.LoggerService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ButtonComponent, selector: "[nui-button]", inputs: { displayStyle: "displayStyle", icon: "icon", iconColor: "iconColor", iconRight: "iconRight", isBusy: "isBusy", isEmpty: "isEmpty", ariaLabel: "ariaLabel", isRepeat: "isRepeat", size: "size" }, host: { properties: { "attr.aria-busy": "isBusy || null", "class.btn-lg": "this.sizeClassLarge", "class.btn-xs": "this.sizeClassCompact", "class.icon-right": "this.iconRightClass", "class.icon-left": "this.iconleftClass", "class.is-busy": "this.isBusyClass", "class.is-empty": "this.isEmptyClass", "class.btn-primary": "this.dispStylePrimClass", "class.btn-action": "this.dispStyleActionClass", "class.btn-destructive": "this.displayStyleDestructiveClass", "class.btn-default": "this.dispStyleDefaultClass", "attr.aria-label": "this.ariaIconLabel" }, classAttribute: "nui-button btn" }, viewQueries: [{ propertyName: "contentContainer", first: true, predicate: ["contentContainer"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n *ngIf=\"isBusy\"\n [ngStyle]=\"getRippleContainerStyle()\"\n class=\"nui-button-ripple-container\"\n>\n <div class=\"ripple ripple-1\"></div>\n <div class=\"ripple ripple-2\"></div>\n</div>\n<nui-icon\n class=\"nui-button__icon\"\n *ngIf=\"icon\"\n [icon]=\"icon\"\n [iconSize]=\"getIconSize()\"\n [iconColor]=\"iconColor\"\n></nui-icon>\n<div #contentContainer class=\"nui-button__content\">\n <ng-content></ng-content>\n</div>\n", styles: [".nui .nui-button{border-color:var(--nui-color-line-default,#d9d9d9);border-width:1px;border-style:solid;border-radius:3px;min-width:100px;max-width:250px;position:relative;overflow:hidden;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;transition:transform .1s ease-in-out;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}.nui .nui-button.unlimited-width{max-width:unset}.nui .nui-button:active{transform:scale(.98)}.nui .nui-button__icon{display:flex}.nui .nui-button:not(.btn-lg) .nui-icon{margin-top:0}.nui .nui-button .nui-button__content{white-space:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;-o-text-overflow:ellipsis;text-overflow:ellipsis;position:relative}.nui .nui-button.icon-right nui-icon{order:1}.nui .nui-button.icon-right nui-icon+.nui-button__content{margin-right:5px}.nui .nui-button.icon-left nui-icon+.nui-button__content{margin-left:5px}.nui .nui-button.is-busy{pointer-events:none;outline:none}.nui .nui-button .nui-button-ripple-container{position:absolute;z-index:1}.nui .nui-button .nui-button-ripple-container .ripple{position:absolute;inset:0;border-radius:50%;transform:scale(.01)}.nui .nui-button .nui-button-ripple-container .ripple.ripple-1{animation:ripple 1.2s ease-in-out .1s infinite}.nui .nui-button .nui-button-ripple-container .ripple.ripple-2{animation:ripple 1.2s ease-in-out .32s infinite}@media print{.nui .nui-button .nui-button-ripple-container{display:none}}@keyframes ripple{50%,to{opacity:0;transform:scale(2)}0%{opacity:0}1%{opacity:1}}.nui .nui-button.btn-default{color:var(--nui-color-text-link,#0079aa);background-color:var(--transparent,transparent);border-color:var(--nui-color-line-default,#d9d9d9)}.nui .nui-button.btn-default:focus,.nui .nui-button.btn-default.focus{color:var(--nui-color-text-link,#0079aa);background-color:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05));border-color:var(--nui-color-btn1-focusBrd,#cbcbcb);outline:none;z-index:500;box-shadow:0 0 0 2px #00c4d280}.nui .nui-button.btn-default:hover{color:var(--nui-color-text-link,#0079aa);background-color:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05));border-color:var(--nui-color-btn1-focusBrd,#cbcbcb)}.nui .nui-button.btn-default:active,.nui .nui-button.btn-default.active,.open>.dropdown-toggle.nui .nui-button.btn-default{color:var(--nui-color-text-link,#0079aa);background-color:var(--transparent,transparent);border-color:var(--nui-color-btn1-activeOpenBrd,#bababa)}.nui .nui-button.btn-default:active:hover,.nui .nui-button.btn-default.active:hover,.open>.dropdown-toggle.nui .nui-button.btn-default:hover,.nui .nui-button.btn-default:active:focus,.nui .nui-button.btn-default.active:focus,.open>.dropdown-toggle.nui .nui-button.btn-default:focus,.nui .nui-button.btn-default:active.focus,.nui .nui-button.btn-default.active.focus,.open>.dropdown-toggle.nui .nui-button.btn-default.focus{color:var(--nui-color-text-link,#0079aa);background-color:var(--transparent,transparent);border-color:var(--nui-color-btn1-activeHoverBrd,#999999)}.nui .nui-button.btn-default:active,.nui .nui-button.btn-default.active,.open>.dropdown-toggle.nui .nui-button.btn-default{background-image:none}.nui .nui-button.btn-default.disabled,.nui .nui-button.btn-default[disabled],fieldset[disabled] .nui .nui-button.btn-default,.nui .nui-button.btn-default.disabled:hover,.nui .nui-button.btn-default[disabled]:hover,fieldset[disabled] .nui .nui-button.btn-default:hover,.nui .nui-button.btn-default.disabled:focus,.nui .nui-button.btn-default[disabled]:focus,fieldset[disabled] .nui .nui-button.btn-default:focus,.nui .nui-button.btn-default.disabled.focus,.nui .nui-button.btn-default[disabled].focus,fieldset[disabled] .nui .nui-button.btn-default.focus,.nui .nui-button.btn-default.disabled:active,.nui .nui-button.btn-default[disabled]:active,fieldset[disabled] .nui .nui-button.btn-default:active,.nui .nui-button.btn-default.disabled.active,.nui .nui-button.btn-default[disabled].active,fieldset[disabled] .nui .nui-button.btn-default.active{background-color:var(--transparent,transparent);border-color:var(--nui-color-line-default,#d9d9d9);color:var(--nui-color-disabled,#b3b3b3)}.nui .nui-button.btn-default.is-busy .ripple-1,.nui .nui-button.btn-default.is-busy .ripple-2{background:var(--nui-color-busy-default,rgba(0, 196, 210, .2))}.nui .nui-button.btn-default.has-error{border-color:var(--nui-color-line-critical,#dd2c00)}.nui .nui-button.btn-default.has-error:hover,.nui .nui-button.btn-default.has-error:focus,.nui .nui-button.btn-default.has-error:active{border-color:var(--nui-color-line-critical,#dd2c00)}.nui .nui-button.btn-default .badge{color:var(--transparent,transparent);background-color:var(--nui-color-text-link,#0079aa)}.nui .nui-button.btn-default .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-default .nui-icon:not(.custom-icon-color) polygon{fill:var(--nui-color-text-link,#0079aa)}.nui .nui-button.btn-default.disabled .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-default[disabled] .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.btn-default .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-default.disabled:hover .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-default[disabled]:hover .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.btn-default:hover .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-default.disabled:focus .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-default[disabled]:focus .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.btn-default:focus .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-default.disabled.focus .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-default[disabled].focus .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.btn-default.focus .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-default.disabled:active .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-default[disabled]:active .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.btn-default:active .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-default.disabled.active .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-default[disabled].active .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.btn-default.active .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-default.disabled .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-default[disabled] .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.btn-default .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-default.disabled:hover .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-default[disabled]:hover .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.btn-default:hover .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-default.disabled:focus .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-default[disabled]:focus .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.btn-default:focus .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-default.disabled.focus .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-default[disabled].focus .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.btn-default.focus .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-default.disabled:active .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-default[disabled]:active .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.btn-default:active .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-default.disabled.active .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-default[disabled].active .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.btn-default.active .nui-icon:not(.custom-icon-color) polygon{fill:var(--nui-color-disabled,#b3b3b3)}.nui .nui-button.btn-primary{color:var(--nui-color-text-light,#fff);background-color:var(--nui-color-active,#0079aa);border-color:var(--transparent,transparent);font-weight:600}.nui .nui-button.btn-primary:focus,.nui .nui-button.btn-primary.focus{color:var(--nui-color-text-light,#fff);background-color:var(--nui-color-active-hover,#006d99);border-color:var(--transparent,transparent);outline:none;z-index:500;box-shadow:0 0 0 2px #00c4d280}.nui .nui-button.btn-primary:hover{color:var(--nui-color-text-light,#fff);background-color:var(--nui-color-active-hover,#006d99);border-color:var(--transparent,transparent)}.nui .nui-button.btn-primary:active,.nui .nui-button.btn-primary.active,.open>.dropdown-toggle.nui .nui-button.btn-primary{color:var(--nui-color-text-light,#fff);background-color:var(--nui-color-btn2-activeOpenBk,#004d6d);border-color:var(--transparent,transparent)}.nui .nui-button.btn-primary:active:hover,.nui .nui-button.btn-primary.active:hover,.open>.dropdown-toggle.nui .nui-button.btn-primary:hover,.nui .nui-button.btn-primary:active:focus,.nui .nui-button.btn-primary.active:focus,.open>.dropdown-toggle.nui .nui-button.btn-primary:focus,.nui .nui-button.btn-primary:active.focus,.nui .nui-button.btn-primary.active.focus,.open>.dropdown-toggle.nui .nui-button.btn-primary.focus{color:var(--nui-color-text-light,#fff);background-color:var(--nui-color-btn2-activeHoverBk,#001e2a);border-color:var(--transparent,transparent)}.nui .nui-button.btn-primary:active,.nui .nui-button.btn-primary.active,.open>.dropdown-toggle.nui .nui-button.btn-primary{background-image:none}.nui .nui-button.btn-primary.disabled,.nui .nui-button.btn-primary[disabled],fieldset[disabled] .nui .nui-button.btn-primary,.nui .nui-button.btn-primary.disabled:hover,.nui .nui-button.btn-primary[disabled]:hover,fieldset[disabled] .nui .nui-button.btn-primary:hover,.nui .nui-button.btn-primary.disabled:focus,.nui .nui-button.btn-primary[disabled]:focus,fieldset[disabled] .nui .nui-button.btn-primary:focus,.nui .nui-button.btn-primary.disabled.focus,.nui .nui-button.btn-primary[disabled].focus,fieldset[disabled] .nui .nui-button.btn-primary.focus,.nui .nui-button.btn-primary.disabled:active,.nui .nui-button.btn-primary[disabled]:active,fieldset[disabled] .nui .nui-button.btn-primary:active,.nui .nui-button.btn-primary.disabled.active,.nui .nui-button.btn-primary[disabled].active,fieldset[disabled] .nui .nui-button.btn-primary.active{background-color:var(--nui-color-disabled,#b3b3b3);border-color:var(--transparent,transparent);color:var(--white,#fff)}.nui .nui-button.btn-primary.is-busy .ripple-1,.nui .nui-button.btn-primary.is-busy .ripple-2{background:var(--nui-color-busy-default,rgba(0, 196, 210, .2))}.nui .nui-button.btn-primary.has-error{border-color:var(--nui-color-line-critical,#dd2c00)}.nui .nui-button.btn-primary.has-error:hover,.nui .nui-button.btn-primary.has-error:focus,.nui .nui-button.btn-primary.has-error:active{border-color:var(--nui-color-line-critical,#dd2c00)}.nui .nui-button.btn-primary .badge{color:var(--nui-color-active,#0079aa);background-color:var(--nui-color-text-light,#fff)}.nui .nui-button.btn-primary .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-primary .nui-icon:not(.custom-icon-color) polygon{fill:var(--nui-color-icon-light,#fff)}.nui .nui-button.btn-primary.disabled .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-primary[disabled] .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.btn-primary .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-primary.disabled:hover .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-primary[disabled]:hover .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.btn-primary:hover .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-primary.disabled:focus .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-primary[disabled]:focus .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.btn-primary:focus .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-primary.disabled.focus .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-primary[disabled].focus .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.btn-primary.focus .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-primary.disabled:active .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-primary[disabled]:active .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.btn-primary:active .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-primary.disabled.active .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-primary[disabled].active .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.btn-primary.active .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-primary.disabled .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-primary[disabled] .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.btn-primary .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-primary.disabled:hover .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-primary[disabled]:hover .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.btn-primary:hover .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-primary.disabled:focus .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-primary[disabled]:focus .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.btn-primary:focus .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-primary.disabled.focus .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-primary[disabled].focus .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.btn-primary.focus .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-primary.disabled:active .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-primary[disabled]:active .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.btn-primary:active .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-primary.disabled.active .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-primary[disabled].active .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.btn-primary.active .nui-icon:not(.custom-icon-color) polygon{fill:var(--white,#fff)}.nui .nui-button.btn-action{min-width:0;color:var(--nui-color-text-link,#0079aa);background-color:var(--transparent,transparent);border-color:var(--transparent,transparent)}.nui .nui-button.btn-action:focus,.nui .nui-button.btn-action.focus{color:var(--nui-color-text-link,#0079aa);background-color:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05));border-color:var(--transparent,transparent);outline:none;z-index:500;box-shadow:0 0 0 2px #00c4d280}.nui .nui-button.btn-action:hover{color:var(--nui-color-text-link,#0079aa);background-color:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05));border-color:var(--transparent,transparent)}.nui .nui-button.btn-action:active,.nui .nui-button.btn-action.active,.open>.dropdown-toggle.nui .nui-button.btn-action{color:var(--nui-color-text-link,#0079aa);background-color:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05));border-color:var(--transparent,transparent)}.nui .nui-button.btn-action:active:hover,.nui .nui-button.btn-action.active:hover,.open>.dropdown-toggle.nui .nui-button.btn-action:hover,.nui .nui-button.btn-action:active:focus,.nui .nui-button.btn-action.active:focus,.open>.dropdown-toggle.nui .nui-button.btn-action:focus,.nui .nui-button.btn-action:active.focus,.nui .nui-button.btn-action.active.focus,.open>.dropdown-toggle.nui .nui-button.btn-action.focus{color:var(--nui-color-text-link,#0079aa);background-color:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05));border-color:var(--transparent,transparent)}.nui .nui-button.btn-action:active,.nui .nui-button.btn-action.active,.open>.dropdown-toggle.nui .nui-button.btn-action{background-image:none}.nui .nui-button.btn-action.disabled,.nui .nui-button.btn-action[disabled],fieldset[disabled] .nui .nui-button.btn-action,.nui .nui-button.btn-action.disabled:hover,.nui .nui-button.btn-action[disabled]:hover,fieldset[disabled] .nui .nui-button.btn-action:hover,.nui .nui-button.btn-action.disabled:focus,.nui .nui-button.btn-action[disabled]:focus,fieldset[disabled] .nui .nui-button.btn-action:focus,.nui .nui-button.btn-action.disabled.focus,.nui .nui-button.btn-action[disabled].focus,fieldset[disabled] .nui .nui-button.btn-action.focus,.nui .nui-button.btn-action.disabled:active,.nui .nui-button.btn-action[disabled]:active,fieldset[disabled] .nui .nui-button.btn-action:active,.nui .nui-button.btn-action.disabled.active,.nui .nui-button.btn-action[disabled].active,fieldset[disabled] .nui .nui-button.btn-action.active{background-color:var(--transparent,transparent);border-color:var(--transparent,transparent);color:var(--nui-color-disabled,#b3b3b3)}.nui .nui-button.btn-action.is-busy .ripple-1,.nui .nui-button.btn-action.is-busy .ripple-2{background:var(--nui-color-busy-default,rgba(0, 196, 210, .2))}.nui .nui-button.btn-action.has-error{border-color:var(--nui-color-line-critical,#dd2c00)}.nui .nui-button.btn-action.has-error:hover,.nui .nui-button.btn-action.has-error:focus,.nui .nui-button.btn-action.has-error:active{border-color:var(--nui-color-line-critical,#dd2c00)}.nui .nui-button.btn-action .badge{color:var(--transparent,transparent);background-color:var(--nui-color-text-link,#0079aa)}.nui .nui-button.btn-action .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-action .nui-icon:not(.custom-icon-color) polygon{fill:var(--nui-color-text-link,#0079aa)}.nui .nui-button.btn-action.disabled .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-action[disabled] .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.btn-action .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-action.disabled:hover .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-action[disabled]:hover .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.btn-action:hover .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-action.disabled:focus .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-action[disabled]:focus .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.btn-action:focus .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-action.disabled.focus .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-action[disabled].focus .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.btn-action.focus .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-action.disabled:active .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-action[disabled]:active .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.btn-action:active .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-action.disabled.active .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-action[disabled].active .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.btn-action.active .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-action.disabled .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-action[disabled] .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.btn-action .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-action.disabled:hover .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-action[disabled]:hover .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.btn-action:hover .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-action.disabled:focus .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-action[disabled]:focus .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.btn-action:focus .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-action.disabled.focus .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-action[disabled].focus .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.btn-action.focus .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-action.disabled:active .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-action[disabled]:active .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.btn-action:active .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-action.disabled.active .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-action[disabled].active .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.btn-action.active .nui-icon:not(.custom-icon-color) polygon{fill:var(--nui-color-disabled,#b3b3b3)}.nui .nui-button.btn-destructive{color:var(--nui-color-text-critical,#dd2c00);background-color:var(--transparent,transparent);border-color:var(--nui-color-line-default,#d9d9d9)}.nui .nui-button.btn-destructive:focus,.nui .nui-button.btn-destructive.focus{color:var(--nui-color-text-critical,#dd2c00);background-color:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05));border-color:var(--nui-color-btn1-focusBrd,#cbcbcb);outline:none;z-index:500;box-shadow:0 0 0 2px #00c4d280}.nui .nui-button.btn-destructive:hover{color:var(--nui-color-text-critical,#dd2c00);background-color:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05));border-color:var(--nui-color-btn1-focusBrd,#cbcbcb)}.nui .nui-button.btn-destructive:active,.nui .nui-button.btn-destructive.active,.open>.dropdown-toggle.nui .nui-button.btn-destructive{color:var(--nui-color-text-critical,#dd2c00);background-color:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05));border-color:var(--nui-color-btn1-activeOpenBrd,#bababa)}.nui .nui-button.btn-destructive:active:hover,.nui .nui-button.btn-destructive.active:hover,.open>.dropdown-toggle.nui .nui-button.btn-destructive:hover,.nui .nui-button.btn-destructive:active:focus,.nui .nui-button.btn-destructive.active:focus,.open>.dropdown-toggle.nui .nui-button.btn-destructive:focus,.nui .nui-button.btn-destructive:active.focus,.nui .nui-button.btn-destructive.active.focus,.open>.dropdown-toggle.nui .nui-button.btn-destructive.focus{color:var(--nui-color-text-critical,#dd2c00);background-color:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05));border-color:var(--nui-color-btn1-activeHoverBrd,#999999)}.nui .nui-button.btn-destructive:active,.nui .nui-button.btn-destructive.active,.open>.dropdown-toggle.nui .nui-button.btn-destructive{background-image:none}.nui .nui-button.btn-destructive.disabled,.nui .nui-button.btn-destructive[disabled],fieldset[disabled] .nui .nui-button.btn-destructive,.nui .nui-button.btn-destructive.disabled:hover,.nui .nui-button.btn-destructive[disabled]:hover,fieldset[disabled] .nui .nui-button.btn-destructive:hover,.nui .nui-button.btn-destructive.disabled:focus,.nui .nui-button.btn-destructive[disabled]:focus,fieldset[disabled] .nui .nui-button.btn-destructive:focus,.nui .nui-button.btn-destructive.disabled.focus,.nui .nui-button.btn-destructive[disabled].focus,fieldset[disabled] .nui .nui-button.btn-destructive.focus,.nui .nui-button.btn-destructive.disabled:active,.nui .nui-button.btn-destructive[disabled]:active,fieldset[disabled] .nui .nui-button.btn-destructive:active,.nui .nui-button.btn-destructive.disabled.active,.nui .nui-button.btn-destructive[disabled].active,fieldset[disabled] .nui .nui-button.btn-destructive.active{background-color:var(--transparent,transparent);border-color:var(--nui-color-line-default,#d9d9d9);color:var(--nui-color-disabled,#b3b3b3)}.nui .nui-button.btn-destructive.is-busy .ripple-1,.nui .nui-button.btn-destructive.is-busy .ripple-2{background:var(--nui-color-busy-destructive,rgba(221, 44, 0, .2))}.nui .nui-button.btn-destructive.has-error{border-color:var(--nui-color-line-critical,#dd2c00)}.nui .nui-button.btn-destructive.has-error:hover,.nui .nui-button.btn-destructive.has-error:focus,.nui .nui-button.btn-destructive.has-error:active{border-color:var(--nui-color-line-critical,#dd2c00)}.nui .nui-button.btn-destructive .badge{color:var(--transparent,transparent);background-color:var(--nui-color-text-critical,#dd2c00)}.nui .nui-button.btn-destructive .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-destructive .nui-icon:not(.custom-icon-color) polygon{fill:var(--nui-color-text-critical,#dd2c00)}.nui .nui-button.btn-destructive.disabled .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-destructive[disabled] .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.btn-destructive .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-destructive.disabled:hover .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-destructive[disabled]:hover .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.btn-destructive:hover .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-destructive.disabled:focus .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-destructive[disabled]:focus .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.btn-destructive:focus .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-destructive.disabled.focus .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-destructive[disabled].focus .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.btn-destructive.focus .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-destructive.disabled:active .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-destructive[disabled]:active .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.btn-destructive:active .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-destructive.disabled.active .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-destructive[disabled].active .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.btn-destructive.active .nui-icon:not(.custom-icon-color) path,.nui .nui-button.btn-destructive.disabled .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-destructive[disabled] .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.btn-destructive .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-destructive.disabled:hover .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-destructive[disabled]:hover .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.btn-destructive:hover .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-destructive.disabled:focus .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-destructive[disabled]:focus .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.btn-destructive:focus .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-destructive.disabled.focus .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-destructive[disabled].focus .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.btn-destructive.focus .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-destructive.disabled:active .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-destructive[disabled]:active .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.btn-destructive:active .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-destructive.disabled.active .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.btn-destructive[disabled].active .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.btn-destructive.active .nui-icon:not(.custom-icon-color) polygon{fill:var(--nui-color-disabled,#b3b3b3)}.nui .nui-button.is-empty{min-width:30px;min-height:30px;padding:6px}.nui .nui-button.is-empty>.nui-button__content{display:none}.nui .nui-button.is-empty.btn-xs{min-height:0;min-width:20px}.nui .nui-button svg{overflow:auto}.nui .nui-button.btn-lg{padding:13px 15px;font-size:13px;line-height:1.4;border-radius:3px}.nui .nui-button.btn-xs{padding:0;font-size:11px;line-height:18px;border-radius:3px;height:20px}.nui .nui-button.default{color:var(--nui-color-text-link,#0079aa);background-color:var(--transparent,transparent);border-color:var(--nui-color-line-default,#d9d9d9)}.nui .nui-button.default:focus,.nui .nui-button.default.focus{color:var(--nui-color-text-link,#0079aa);background-color:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05));border-color:var(--nui-color-btn1-focusBrd,#cbcbcb);outline:none;z-index:500;box-shadow:0 0 0 2px #00c4d280}.nui .nui-button.default:hover{color:var(--nui-color-text-link,#0079aa);background-color:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05));border-color:var(--nui-color-btn1-focusBrd,#cbcbcb)}.nui .nui-button.default:active,.nui .nui-button.default.active,.open>.dropdown-toggle.nui .nui-button.default{color:var(--nui-color-text-link,#0079aa);background-color:var(--transparent,transparent);border-color:var(--nui-color-btn1-activeOpenBrd,#bababa)}.nui .nui-button.default:active:hover,.nui .nui-button.default.active:hover,.open>.dropdown-toggle.nui .nui-button.default:hover,.nui .nui-button.default:active:focus,.nui .nui-button.default.active:focus,.open>.dropdown-toggle.nui .nui-button.default:focus,.nui .nui-button.default:active.focus,.nui .nui-button.default.active.focus,.open>.dropdown-toggle.nui .nui-button.default.focus{color:var(--nui-color-text-link,#0079aa);background-color:var(--transparent,transparent);border-color:var(--nui-color-btn1-activeHoverBrd,#999999)}.nui .nui-button.default:active,.nui .nui-button.default.active,.open>.dropdown-toggle.nui .nui-button.default{background-image:none}.nui .nui-button.default.disabled,.nui .nui-button.default[disabled],fieldset[disabled] .nui .nui-button.default,.nui .nui-button.default.disabled:hover,.nui .nui-button.default[disabled]:hover,fieldset[disabled] .nui .nui-button.default:hover,.nui .nui-button.default.disabled:focus,.nui .nui-button.default[disabled]:focus,fieldset[disabled] .nui .nui-button.default:focus,.nui .nui-button.default.disabled.focus,.nui .nui-button.default[disabled].focus,fieldset[disabled] .nui .nui-button.default.focus,.nui .nui-button.default.disabled:active,.nui .nui-button.default[disabled]:active,fieldset[disabled] .nui .nui-button.default:active,.nui .nui-button.default.disabled.active,.nui .nui-button.default[disabled].active,fieldset[disabled] .nui .nui-button.default.active{background-color:var(--transparent,transparent);border-color:var(--nui-color-line-default,#d9d9d9);color:var(--nui-color-disabled,#b3b3b3)}.nui .nui-button.default.is-busy .ripple-1,.nui .nui-button.default.is-busy .ripple-2{background:var(--nui-color-busy-default,rgba(0, 196, 210, .2))}.nui .nui-button.default.has-error{border-color:var(--nui-color-line-critical,#dd2c00)}.nui .nui-button.default.has-error:hover,.nui .nui-button.default.has-error:focus,.nui .nui-button.default.has-error:active{border-color:var(--nui-color-line-critical,#dd2c00)}.nui .nui-button.default .badge{color:var(--transparent,transparent);background-color:var(--nui-color-text-link,#0079aa)}.nui .nui-button.default .nui-icon:not(.custom-icon-color) path,.nui .nui-button.default .nui-icon:not(.custom-icon-color) polygon{fill:var(--nui-color-text-link,#0079aa)}.nui .nui-button.default.disabled .nui-icon:not(.custom-icon-color) path,.nui .nui-button.default[disabled] .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.default .nui-icon:not(.custom-icon-color) path,.nui .nui-button.default.disabled:hover .nui-icon:not(.custom-icon-color) path,.nui .nui-button.default[disabled]:hover .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.default:hover .nui-icon:not(.custom-icon-color) path,.nui .nui-button.default.disabled:focus .nui-icon:not(.custom-icon-color) path,.nui .nui-button.default[disabled]:focus .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.default:focus .nui-icon:not(.custom-icon-color) path,.nui .nui-button.default.disabled.focus .nui-icon:not(.custom-icon-color) path,.nui .nui-button.default[disabled].focus .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.default.focus .nui-icon:not(.custom-icon-color) path,.nui .nui-button.default.disabled:active .nui-icon:not(.custom-icon-color) path,.nui .nui-button.default[disabled]:active .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.default:active .nui-icon:not(.custom-icon-color) path,.nui .nui-button.default.disabled.active .nui-icon:not(.custom-icon-color) path,.nui .nui-button.default[disabled].active .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.default.active .nui-icon:not(.custom-icon-color) path,.nui .nui-button.default.disabled .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.default[disabled] .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.default .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.default.disabled:hover .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.default[disabled]:hover .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.default:hover .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.default.disabled:focus .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.default[disabled]:focus .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.default:focus .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.default.disabled.focus .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.default[disabled].focus .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.default.focus .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.default.disabled:active .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.default[disabled]:active .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.default:active .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.default.disabled.active .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.default[disabled].active .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.default.active .nui-icon:not(.custom-icon-color) polygon{fill:var(--nui-color-disabled,#b3b3b3)}.nui .nui-button.primary{color:var(--nui-color-text-light,#fff);background-color:var(--nui-color-active,#0079aa);border-color:var(--transparent,transparent)}.nui .nui-button.primary:focus,.nui .nui-button.primary.focus{color:var(--nui-color-text-light,#fff);background-color:var(--nui-color-active-hover,#006d99);border-color:var(--transparent,transparent);outline:none;z-index:500;box-shadow:0 0 0 2px #00c4d280}.nui .nui-button.primary:hover{color:var(--nui-color-text-light,#fff);background-color:var(--nui-color-active-hover,#006d99);border-color:var(--transparent,transparent)}.nui .nui-button.primary:active,.nui .nui-button.primary.active,.open>.dropdown-toggle.nui .nui-button.primary{color:var(--nui-color-text-light,#fff);background-color:var(--nui-color-btn2-activeOpenBk,#004d6d);border-color:var(--transparent,transparent)}.nui .nui-button.primary:active:hover,.nui .nui-button.primary.active:hover,.open>.dropdown-toggle.nui .nui-button.primary:hover,.nui .nui-button.primary:active:focus,.nui .nui-button.primary.active:focus,.open>.dropdown-toggle.nui .nui-button.primary:focus,.nui .nui-button.primary:active.focus,.nui .nui-button.primary.active.focus,.open>.dropdown-toggle.nui .nui-button.primary.focus{color:var(--nui-color-text-light,#fff);background-color:var(--nui-color-btn2-activeHoverBk,#001e2a);border-color:var(--transparent,transparent)}.nui .nui-button.primary:active,.nui .nui-button.primary.active,.open>.dropdown-toggle.nui .nui-button.primary{background-image:none}.nui .nui-button.primary.disabled,.nui .nui-button.primary[disabled],fieldset[disabled] .nui .nui-button.primary,.nui .nui-button.primary.disabled:hover,.nui .nui-button.primary[disabled]:hover,fieldset[disabled] .nui .nui-button.primary:hover,.nui .nui-button.primary.disabled:focus,.nui .nui-button.primary[disabled]:focus,fieldset[disabled] .nui .nui-button.primary:focus,.nui .nui-button.primary.disabled.focus,.nui .nui-button.primary[disabled].focus,fieldset[disabled] .nui .nui-button.primary.focus,.nui .nui-button.primary.disabled:active,.nui .nui-button.primary[disabled]:active,fieldset[disabled] .nui .nui-button.primary:active,.nui .nui-button.primary.disabled.active,.nui .nui-button.primary[disabled].active,fieldset[disabled] .nui .nui-button.primary.active{background-color:var(--nui-color-disabled,#b3b3b3);border-color:var(--transparent,transparent);color:var(--white,#fff)}.nui .nui-button.primary.is-busy .ripple-1,.nui .nui-button.primary.is-busy .ripple-2{background:var(--nui-color-busy-default,rgba(0, 196, 210, .2))}.nui .nui-button.primary.has-error{border-color:var(--nui-color-line-critical,#dd2c00)}.nui .nui-button.primary.has-error:hover,.nui .nui-button.primary.has-error:focus,.nui .nui-button.primary.has-error:active{border-color:var(--nui-color-line-critical,#dd2c00)}.nui .nui-button.primary .badge{color:var(--nui-color-active,#0079aa);background-color:var(--nui-color-text-light,#fff)}.nui .nui-button.primary .nui-icon:not(.custom-icon-color) path,.nui .nui-button.primary .nui-icon:not(.custom-icon-color) polygon{fill:var(--nui-color-icon-light,#fff)}.nui .nui-button.primary.disabled .nui-icon:not(.custom-icon-color) path,.nui .nui-button.primary[disabled] .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.primary .nui-icon:not(.custom-icon-color) path,.nui .nui-button.primary.disabled:hover .nui-icon:not(.custom-icon-color) path,.nui .nui-button.primary[disabled]:hover .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.primary:hover .nui-icon:not(.custom-icon-color) path,.nui .nui-button.primary.disabled:focus .nui-icon:not(.custom-icon-color) path,.nui .nui-button.primary[disabled]:focus .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.primary:focus .nui-icon:not(.custom-icon-color) path,.nui .nui-button.primary.disabled.focus .nui-icon:not(.custom-icon-color) path,.nui .nui-button.primary[disabled].focus .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.primary.focus .nui-icon:not(.custom-icon-color) path,.nui .nui-button.primary.disabled:active .nui-icon:not(.custom-icon-color) path,.nui .nui-button.primary[disabled]:active .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.primary:active .nui-icon:not(.custom-icon-color) path,.nui .nui-button.primary.disabled.active .nui-icon:not(.custom-icon-color) path,.nui .nui-button.primary[disabled].active .nui-icon:not(.custom-icon-color) path,fieldset[disabled] .nui .nui-button.primary.active .nui-icon:not(.custom-icon-color) path,.nui .nui-button.primary.disabled .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.primary[disabled] .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.primary .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.primary.disabled:hover .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.primary[disabled]:hover .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.primary:hover .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.primary.disabled:focus .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.primary[disabled]:focus .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.primary:focus .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.primary.disabled.focus .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.primary[disabled].focus .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.primary.focus .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.primary.disabled:active .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.primary[disabled]:active .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.primary:active .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.primary.disabled.active .nui-icon:not(.custom-icon-color) polygon,.nui .nui-button.primary[disabled].active .nui-icon:not(.custom-icon-color) polygon,fieldset[disabled] .nui .nui-button.primary.active .nui-icon:not(.custom-icon-color) polygon{fill:var(--white,#fff)}.nui .nui-button.action{color:var(--nui-color-text-link,#0079aa);background-color:var(--transparent,transparent);border-color:var(--transparent,transparent)}.nui .nui-button.action:focus,.nui .nui-button.action.focus{color:var(--nui-color-text-link,#0079aa);background-color:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05));border-color:var(--transparent,transparent);outline:none;z-index:500;box-shadow:0 0 0 2px #00c4d280}.nui .nui-button.action:hover{color:var(--nui-color-text-link,#0079aa);background-color:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05));border-color:var(--transparent,transparent)}.nui .nui-button.action:active,.nui .nui-button.action.active,.open>.dropdown-toggle.nui