/*!********************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/@angular/material/prebuilt-themes/indigo-pink.css ***! \********************************************************************************************************************************************************************************************************************************************************/ .mat-badge-content{font-weight:600;font-size:12px;font-family:Roboto, "Helvetica Neue", sans-serif}.mat-badge-small .mat-badge-content{font-size:9px}.mat-badge-large .mat-badge-content{font-size:24px}.mat-h1,.mat-headline,.mat-typography .mat-h1,.mat-typography .mat-headline,.mat-typography h1{font:400 24px/32px Roboto, "Helvetica Neue", sans-serif;letter-spacing:normal;margin:0 0 16px}.mat-h2,.mat-title,.mat-typography .mat-h2,.mat-typography .mat-title,.mat-typography h2{font:500 20px/32px Roboto, "Helvetica Neue", sans-serif;letter-spacing:normal;margin:0 0 16px}.mat-h3,.mat-subheading-2,.mat-typography .mat-h3,.mat-typography .mat-subheading-2,.mat-typography h3{font:400 16px/28px Roboto, "Helvetica Neue", sans-serif;letter-spacing:normal;margin:0 0 16px}.mat-h4,.mat-subheading-1,.mat-typography .mat-h4,.mat-typography .mat-subheading-1,.mat-typography h4{font:400 15px/24px Roboto, "Helvetica Neue", sans-serif;letter-spacing:normal;margin:0 0 16px}.mat-h5,.mat-typography .mat-h5,.mat-typography h5{font:400 calc(14px * 0.83)/20px Roboto, "Helvetica Neue", sans-serif;margin:0 0 12px}.mat-h6,.mat-typography .mat-h6,.mat-typography h6{font:400 calc(14px * 0.67)/20px Roboto, "Helvetica Neue", sans-serif;margin:0 0 12px}.mat-body-strong,.mat-body-2,.mat-typography .mat-body-strong,.mat-typography .mat-body-2{font:500 14px/24px Roboto, "Helvetica Neue", sans-serif;letter-spacing:normal}.mat-body,.mat-body-1,.mat-typography .mat-body,.mat-typography .mat-body-1,.mat-typography{font:400 14px/20px Roboto, "Helvetica Neue", sans-serif;letter-spacing:normal}.mat-body p,.mat-body-1 p,.mat-typography .mat-body p,.mat-typography .mat-body-1 p,.mat-typography p{margin:0 0 12px}.mat-small,.mat-caption,.mat-typography .mat-small,.mat-typography .mat-caption{font:400 12px/20px Roboto, "Helvetica Neue", sans-serif;letter-spacing:normal}.mat-display-4,.mat-typography .mat-display-4{font:300 112px/112px Roboto, "Helvetica Neue", sans-serif;letter-spacing:-0.05em;margin:0 0 56px}.mat-display-3,.mat-typography .mat-display-3{font:400 56px/56px Roboto, "Helvetica Neue", sans-serif;letter-spacing:-0.02em;margin:0 0 64px}.mat-display-2,.mat-typography .mat-display-2{font:400 45px/48px Roboto, "Helvetica Neue", sans-serif;letter-spacing:-0.005em;margin:0 0 64px}.mat-display-1,.mat-typography .mat-display-1{font:400 34px/40px Roboto, "Helvetica Neue", sans-serif;letter-spacing:normal;margin:0 0 64px}.mat-bottom-sheet-container{font:400 14px/20px Roboto, "Helvetica Neue", sans-serif;letter-spacing:normal}.mat-button,.mat-raised-button,.mat-icon-button,.mat-stroked-button,.mat-flat-button,.mat-fab,.mat-mini-fab{font-family:Roboto, "Helvetica Neue", sans-serif;font-size:14px;font-weight:500}.mat-button-toggle{font-family:Roboto, "Helvetica Neue", sans-serif}.mat-card{font-family:Roboto, "Helvetica Neue", sans-serif}.mat-card-title{font-size:24px;font-weight:500}.mat-card-header .mat-card-title{font-size:20px}.mat-card-subtitle,.mat-card-content{font-size:14px}.mat-checkbox{font-family:Roboto, "Helvetica Neue", sans-serif}.mat-checkbox-layout .mat-checkbox-label{line-height:24px}.mat-chip{font-size:14px;font-weight:500}.mat-chip .mat-chip-trailing-icon.mat-icon,.mat-chip .mat-chip-remove.mat-icon{font-size:18px}.mat-table{font-family:Roboto, "Helvetica Neue", sans-serif}.mat-header-cell{font-size:12px;font-weight:500}.mat-cell,.mat-footer-cell{font-size:14px}.mat-calendar{font-family:Roboto, "Helvetica Neue", sans-serif}.mat-calendar-body{font-size:13px}.mat-calendar-body-label,.mat-calendar-period-button{font-size:14px;font-weight:500}.mat-calendar-table-header th{font-size:11px;font-weight:400}.mat-dialog-title{font:500 20px/32px Roboto, "Helvetica Neue", sans-serif;letter-spacing:normal}.mat-expansion-panel-header{font-family:Roboto, "Helvetica Neue", sans-serif;font-size:15px;font-weight:400}.mat-expansion-panel-content{font:400 14px/20px Roboto, "Helvetica Neue", sans-serif;letter-spacing:normal}.mat-form-field{font-size:inherit;font-weight:400;line-height:1.125;font-family:Roboto, "Helvetica Neue", sans-serif;letter-spacing:normal}.mat-form-field-wrapper{padding-bottom:1.34375em}.mat-form-field-prefix .mat-icon,.mat-form-field-suffix .mat-icon{font-size:150%;line-height:1.125}.mat-form-field-prefix .mat-icon-button,.mat-form-field-suffix .mat-icon-button{height:1.5em;width:1.5em}.mat-form-field-prefix .mat-icon-button .mat-icon,.mat-form-field-suffix .mat-icon-button .mat-icon{height:1.125em;line-height:1.125}.mat-form-field-infix{padding:.5em 0;border-top:.84375em solid rgba(0,0,0,0)}.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.34375em) scale(0.75);width:133.3333333333%}.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.34374em) scale(0.75);width:133.3333433333%}.mat-form-field-label-wrapper{top:-0.84375em;padding-top:.84375em}.mat-form-field-label{top:1.34375em}.mat-form-field-underline{bottom:1.34375em}.mat-form-field-subscript-wrapper{font-size:75%;margin-top:.6666666667em;top:calc(100% - 1.7916666667em)}.mat-form-field-appearance-legacy .mat-form-field-wrapper{padding-bottom:1.25em}.mat-form-field-appearance-legacy .mat-form-field-infix{padding:.4375em 0}.mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px);width:133.3333333333%}.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.00101px);width:133.3333433333%}.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.00102px);width:133.3333533333%}.mat-form-field-appearance-legacy .mat-form-field-label{top:1.28125em}.mat-form-field-appearance-legacy .mat-form-field-underline{bottom:1.25em}.mat-form-field-appearance-legacy .mat-form-field-subscript-wrapper{margin-top:.5416666667em;top:calc(100% - 1.6666666667em)}@media print{.mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.28122em) scale(0.75)}.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.28121em) scale(0.75)}.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.2812em) scale(0.75)}}.mat-form-field-appearance-fill .mat-form-field-infix{padding:.25em 0 .75em 0}.mat-form-field-appearance-fill .mat-form-field-label{top:1.09375em;margin-top:-0.5em}.mat-form-field-appearance-fill.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.mat-form-field-appearance-fill.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-0.59375em) scale(0.75);width:133.3333333333%}.mat-form-field-appearance-fill.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-0.59374em) scale(0.75);width:133.3333433333%}.mat-form-field-appearance-outline .mat-form-field-infix{padding:1em 0 1em 0}.mat-form-field-appearance-outline .mat-form-field-label{top:1.84375em;margin-top:-0.25em}.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.59375em) scale(0.75);width:133.3333333333%}.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server[label]:not(:label-shown)+.mat-form-field-label-wrapper .mat-form-field-label{transform:translateY(-1.59374em) scale(0.75);width:133.3333433333%}.mat-grid-tile-header,.mat-grid-tile-footer{font-size:14px}.mat-grid-tile-header .mat-line,.mat-grid-tile-footer .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-grid-tile-header .mat-line:nth-child(n+2),.mat-grid-tile-footer .mat-line:nth-child(n+2){font-size:12px}input.mat-input-element{margin-top:-0.0625em}.mat-menu-item{font-family:Roboto, "Helvetica Neue", sans-serif;font-size:14px;font-weight:400}.mat-paginator,.mat-paginator-page-size .mat-select-trigger{font-family:Roboto, "Helvetica Neue", sans-serif;font-size:12px}.mat-radio-button{font-family:Roboto, "Helvetica Neue", sans-serif}.mat-select{font-family:Roboto, "Helvetica Neue", sans-serif}.mat-select-trigger{height:1.125em}.mat-slide-toggle-content{font-family:Roboto, "Helvetica Neue", sans-serif}.mat-slider-thumb-label-text{font-family:Roboto, "Helvetica Neue", sans-serif;font-size:12px;font-weight:500}.mat-stepper-vertical,.mat-stepper-horizontal{font-family:Roboto, "Helvetica Neue", sans-serif}.mat-step-label{font-size:14px;font-weight:400}.mat-step-sub-label-error{font-weight:normal}.mat-step-label-error{font-size:14px}.mat-step-label-selected{font-size:14px;font-weight:500}.mat-tab-group{font-family:Roboto, "Helvetica Neue", sans-serif}.mat-tab-label,.mat-tab-link{font-family:Roboto, "Helvetica Neue", sans-serif;font-size:14px;font-weight:500}.mat-toolbar,.mat-toolbar h1,.mat-toolbar h2,.mat-toolbar h3,.mat-toolbar h4,.mat-toolbar h5,.mat-toolbar h6{font:500 20px/32px Roboto, "Helvetica Neue", sans-serif;letter-spacing:normal;margin:0}.mat-tooltip{font-family:Roboto, "Helvetica Neue", sans-serif;font-size:10px;padding-top:6px;padding-bottom:6px}.mat-tooltip-handset{font-size:14px;padding-top:8px;padding-bottom:8px}.mat-list-item{font-family:Roboto, "Helvetica Neue", sans-serif}.mat-list-option{font-family:Roboto, "Helvetica Neue", sans-serif}.mat-list-base .mat-list-item{font-size:16px}.mat-list-base .mat-list-item .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-list-base .mat-list-item .mat-line:nth-child(n+2){font-size:14px}.mat-list-base .mat-list-option{font-size:16px}.mat-list-base .mat-list-option .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-list-base .mat-list-option .mat-line:nth-child(n+2){font-size:14px}.mat-list-base .mat-subheader{font-family:Roboto, "Helvetica Neue", sans-serif;font-size:14px;font-weight:500}.mat-list-base[dense] .mat-list-item{font-size:12px}.mat-list-base[dense] .mat-list-item .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-list-base[dense] .mat-list-item .mat-line:nth-child(n+2){font-size:12px}.mat-list-base[dense] .mat-list-option{font-size:12px}.mat-list-base[dense] .mat-list-option .mat-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;box-sizing:border-box}.mat-list-base[dense] .mat-list-option .mat-line:nth-child(n+2){font-size:12px}.mat-list-base[dense] .mat-subheader{font-family:Roboto, "Helvetica Neue", sans-serif;font-size:12px;font-weight:500}.mat-option{font-family:Roboto, "Helvetica Neue", sans-serif;font-size:16px}.mat-optgroup-label{font:500 14px/24px Roboto, "Helvetica Neue", sans-serif;letter-spacing:normal}.mat-simple-snackbar{font-family:Roboto, "Helvetica Neue", sans-serif;font-size:14px}.mat-simple-snackbar-action{line-height:1;font-family:inherit;font-size:inherit;font-weight:500}.mat-tree{font-family:Roboto, "Helvetica Neue", sans-serif}.mat-tree-node,.mat-nested-tree-node{font-weight:400;font-size:14px}.mat-ripple{overflow:hidden;position:relative}.mat-ripple:not(:empty){transform:translateZ(0)}.mat-ripple.mat-ripple-unbounded{overflow:visible}.mat-ripple-element{position:absolute;border-radius:50%;pointer-events:none;transition:opacity,transform 0ms cubic-bezier(0, 0, 0.2, 1);transform:scale3d(0, 0, 0)}.cdk-high-contrast-active .mat-ripple-element{display:none}.cdk-visually-hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap;outline:0;-webkit-appearance:none;-moz-appearance:none;left:0}[dir=rtl] .cdk-visually-hidden{left:auto;right:0}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}textarea.cdk-textarea-autosize{resize:none}textarea.cdk-textarea-autosize-measuring{padding:2px 0 !important;box-sizing:content-box !important;height:auto !important;overflow:hidden !important}textarea.cdk-textarea-autosize-measuring-firefox{padding:2px 0 !important;box-sizing:content-box !important;height:0 !important}@keyframes cdk-text-field-autofill-start{/*!*/}@keyframes cdk-text-field-autofill-end{/*!*/}.cdk-text-field-autofill-monitored:-webkit-autofill{animation:cdk-text-field-autofill-start 0s 1ms}.cdk-text-field-autofill-monitored:not(:-webkit-autofill){animation:cdk-text-field-autofill-end 0s 1ms}.mat-focus-indicator{position:relative}.mat-focus-indicator::before{top:0;left:0;right:0;bottom:0;position:absolute;box-sizing:border-box;pointer-events:none;display:none;display:var(--mat-focus-indicator-display, none);border:3px solid transparent;border:var(--mat-focus-indicator-border-width, 3px) var(--mat-focus-indicator-border-style, solid) var(--mat-focus-indicator-border-color, transparent);border-radius:4px;border-radius:var(--mat-focus-indicator-border-radius, 4px)}.mat-focus-indicator:focus::before{content:""}.cdk-high-contrast-active{--mat-focus-indicator-display: block}.mat-mdc-focus-indicator{position:relative}.mat-mdc-focus-indicator::before{top:0;left:0;right:0;bottom:0;position:absolute;box-sizing:border-box;pointer-events:none;display:none;display:var(--mat-mdc-focus-indicator-display, none);border:3px solid transparent;border:var(--mat-mdc-focus-indicator-border-width, 3px) var(--mat-mdc-focus-indicator-border-style, solid) var(--mat-mdc-focus-indicator-border-color, transparent);border-radius:4px;border-radius:var(--mat-mdc-focus-indicator-border-radius, 4px)}.mat-mdc-focus-indicator:focus::before{content:""}.cdk-high-contrast-active{--mat-mdc-focus-indicator-display: block}.mat-ripple-element{background-color:rgba(0,0,0,.1)}.mat-option{color:rgba(0,0,0,.87)}.mat-option:hover:not(.mat-option-disabled),.mat-option:focus:not(.mat-option-disabled){background:rgba(0,0,0,.04)}.mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled){background:rgba(0,0,0,.04)}.mat-option.mat-active{background:rgba(0,0,0,.04);color:rgba(0,0,0,.87)}.mat-option.mat-option-disabled{color:rgba(0,0,0,.38)}.mat-primary .mat-option.mat-selected:not(.mat-option-disabled){color:#3f51b5}.mat-accent .mat-option.mat-selected:not(.mat-option-disabled){color:#ff4081}.mat-warn .mat-option.mat-selected:not(.mat-option-disabled){color:#f44336}.mat-optgroup-label{color:rgba(0,0,0,.54)}.mat-optgroup-disabled .mat-optgroup-label{color:rgba(0,0,0,.38)}.mat-pseudo-checkbox{color:rgba(0,0,0,.54)}.mat-pseudo-checkbox::after{color:#fafafa}.mat-pseudo-checkbox-disabled{color:#b0b0b0}.mat-primary .mat-pseudo-checkbox-checked,.mat-primary .mat-pseudo-checkbox-indeterminate{background:#3f51b5}.mat-pseudo-checkbox-checked,.mat-pseudo-checkbox-indeterminate,.mat-accent .mat-pseudo-checkbox-checked,.mat-accent .mat-pseudo-checkbox-indeterminate{background:#ff4081}.mat-warn .mat-pseudo-checkbox-checked,.mat-warn .mat-pseudo-checkbox-indeterminate{background:#f44336}.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-disabled,.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-disabled{background:#b0b0b0}.mat-app-background{background-color:#fafafa;color:rgba(0,0,0,.87)}.mat-elevation-z0{box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.2),0px 0px 0px 0px rgba(0, 0, 0, 0.14),0px 0px 0px 0px rgba(0, 0, 0, 0.12)}.mat-elevation-z1{box-shadow:0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 1px 3px 0px rgba(0, 0, 0, 0.12)}.mat-elevation-z2{box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2),0px 2px 2px 0px rgba(0, 0, 0, 0.14),0px 1px 5px 0px rgba(0, 0, 0, 0.12)}.mat-elevation-z3{box-shadow:0px 3px 3px -2px rgba(0, 0, 0, 0.2),0px 3px 4px 0px rgba(0, 0, 0, 0.14),0px 1px 8px 0px rgba(0, 0, 0, 0.12)}.mat-elevation-z4{box-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.2),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 1px 10px 0px rgba(0, 0, 0, 0.12)}.mat-elevation-z5{box-shadow:0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 5px 8px 0px rgba(0, 0, 0, 0.14),0px 1px 14px 0px rgba(0, 0, 0, 0.12)}.mat-elevation-z6{box-shadow:0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px 0px rgba(0, 0, 0, 0.14),0px 1px 18px 0px rgba(0, 0, 0, 0.12)}.mat-elevation-z7{box-shadow:0px 4px 5px -2px rgba(0, 0, 0, 0.2),0px 7px 10px 1px rgba(0, 0, 0, 0.14),0px 2px 16px 1px rgba(0, 0, 0, 0.12)}.mat-elevation-z8{box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2),0px 8px 10px 1px rgba(0, 0, 0, 0.14),0px 3px 14px 2px rgba(0, 0, 0, 0.12)}.mat-elevation-z9{box-shadow:0px 5px 6px -3px rgba(0, 0, 0, 0.2),0px 9px 12px 1px rgba(0, 0, 0, 0.14),0px 3px 16px 2px rgba(0, 0, 0, 0.12)}.mat-elevation-z10{box-shadow:0px 6px 6px -3px rgba(0, 0, 0, 0.2),0px 10px 14px 1px rgba(0, 0, 0, 0.14),0px 4px 18px 3px rgba(0, 0, 0, 0.12)}.mat-elevation-z11{box-shadow:0px 6px 7px -4px rgba(0, 0, 0, 0.2),0px 11px 15px 1px rgba(0, 0, 0, 0.14),0px 4px 20px 3px rgba(0, 0, 0, 0.12)}.mat-elevation-z12{box-shadow:0px 7px 8px -4px rgba(0, 0, 0, 0.2),0px 12px 17px 2px rgba(0, 0, 0, 0.14),0px 5px 22px 4px rgba(0, 0, 0, 0.12)}.mat-elevation-z13{box-shadow:0px 7px 8px -4px rgba(0, 0, 0, 0.2),0px 13px 19px 2px rgba(0, 0, 0, 0.14),0px 5px 24px 4px rgba(0, 0, 0, 0.12)}.mat-elevation-z14{box-shadow:0px 7px 9px -4px rgba(0, 0, 0, 0.2),0px 14px 21px 2px rgba(0, 0, 0, 0.14),0px 5px 26px 4px rgba(0, 0, 0, 0.12)}.mat-elevation-z15{box-shadow:0px 8px 9px -5px rgba(0, 0, 0, 0.2),0px 15px 22px 2px rgba(0, 0, 0, 0.14),0px 6px 28px 5px rgba(0, 0, 0, 0.12)}.mat-elevation-z16{box-shadow:0px 8px 10px -5px rgba(0, 0, 0, 0.2),0px 16px 24px 2px rgba(0, 0, 0, 0.14),0px 6px 30px 5px rgba(0, 0, 0, 0.12)}.mat-elevation-z17{box-shadow:0px 8px 11px -5px rgba(0, 0, 0, 0.2),0px 17px 26px 2px rgba(0, 0, 0, 0.14),0px 6px 32px 5px rgba(0, 0, 0, 0.12)}.mat-elevation-z18{box-shadow:0px 9px 11px -5px rgba(0, 0, 0, 0.2),0px 18px 28px 2px rgba(0, 0, 0, 0.14),0px 7px 34px 6px rgba(0, 0, 0, 0.12)}.mat-elevation-z19{box-shadow:0px 9px 12px -6px rgba(0, 0, 0, 0.2),0px 19px 29px 2px rgba(0, 0, 0, 0.14),0px 7px 36px 6px rgba(0, 0, 0, 0.12)}.mat-elevation-z20{box-shadow:0px 10px 13px -6px rgba(0, 0, 0, 0.2),0px 20px 31px 3px rgba(0, 0, 0, 0.14),0px 8px 38px 7px rgba(0, 0, 0, 0.12)}.mat-elevation-z21{box-shadow:0px 10px 13px -6px rgba(0, 0, 0, 0.2),0px 21px 33px 3px rgba(0, 0, 0, 0.14),0px 8px 40px 7px rgba(0, 0, 0, 0.12)}.mat-elevation-z22{box-shadow:0px 10px 14px -6px rgba(0, 0, 0, 0.2),0px 22px 35px 3px rgba(0, 0, 0, 0.14),0px 8px 42px 7px rgba(0, 0, 0, 0.12)}.mat-elevation-z23{box-shadow:0px 11px 14px -7px rgba(0, 0, 0, 0.2),0px 23px 36px 3px rgba(0, 0, 0, 0.14),0px 9px 44px 8px rgba(0, 0, 0, 0.12)}.mat-elevation-z24{box-shadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2),0px 24px 38px 3px rgba(0, 0, 0, 0.14),0px 9px 46px 8px rgba(0, 0, 0, 0.12)}.mat-theme-loaded-marker{display:none}.mat-autocomplete-panel{background:#fff;color:rgba(0,0,0,.87)}.mat-autocomplete-panel:not([class*=mat-elevation-z]){box-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.2),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 1px 10px 0px rgba(0, 0, 0, 0.12)}.mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover){background:#fff}.mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover):not(.mat-option-disabled){color:rgba(0,0,0,.87)}.mat-badge{position:relative}.mat-badge.mat-badge{overflow:visible}.mat-badge-hidden .mat-badge-content{display:none}.mat-badge-content{position:absolute;text-align:center;display:inline-block;border-radius:50%;transition:transform 200ms ease-in-out;transform:scale(0.6);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}.ng-animate-disabled .mat-badge-content,.mat-badge-content._mat-animation-noopable{transition:none}.mat-badge-content.mat-badge-active{transform:none}.mat-badge-small .mat-badge-content{width:16px;height:16px;line-height:16px}.mat-badge-small.mat-badge-above .mat-badge-content{top:-8px}.mat-badge-small.mat-badge-below .mat-badge-content{bottom:-8px}.mat-badge-small.mat-badge-before .mat-badge-content{left:-16px}[dir=rtl] .mat-badge-small.mat-badge-before .mat-badge-content{left:auto;right:-16px}.mat-badge-small.mat-badge-after .mat-badge-content{right:-16px}[dir=rtl] .mat-badge-small.mat-badge-after .mat-badge-content{right:auto;left:-16px}.mat-badge-small.mat-badge-overlap.mat-badge-before .mat-badge-content{left:-8px}[dir=rtl] .mat-badge-small.mat-badge-overlap.mat-badge-before .mat-badge-content{left:auto;right:-8px}.mat-badge-small.mat-badge-overlap.mat-badge-after .mat-badge-content{right:-8px}[dir=rtl] .mat-badge-small.mat-badge-overlap.mat-badge-after .mat-badge-content{right:auto;left:-8px}.mat-badge-medium .mat-badge-content{width:22px;height:22px;line-height:22px}.mat-badge-medium.mat-badge-above .mat-badge-content{top:-11px}.mat-badge-medium.mat-badge-below .mat-badge-content{bottom:-11px}.mat-badge-medium.mat-badge-before .mat-badge-content{left:-22px}[dir=rtl] .mat-badge-medium.mat-badge-before .mat-badge-content{left:auto;right:-22px}.mat-badge-medium.mat-badge-after .mat-badge-content{right:-22px}[dir=rtl] .mat-badge-medium.mat-badge-after .mat-badge-content{right:auto;left:-22px}.mat-badge-medium.mat-badge-overlap.mat-badge-before .mat-badge-content{left:-11px}[dir=rtl] .mat-badge-medium.mat-badge-overlap.mat-badge-before .mat-badge-content{left:auto;right:-11px}.mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content{right:-11px}[dir=rtl] .mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content{right:auto;left:-11px}.mat-badge-large .mat-badge-content{width:28px;height:28px;line-height:28px}.mat-badge-large.mat-badge-above .mat-badge-content{top:-14px}.mat-badge-large.mat-badge-below .mat-badge-content{bottom:-14px}.mat-badge-large.mat-badge-before .mat-badge-content{left:-28px}[dir=rtl] .mat-badge-large.mat-badge-before .mat-badge-content{left:auto;right:-28px}.mat-badge-large.mat-badge-after .mat-badge-content{right:-28px}[dir=rtl] .mat-badge-large.mat-badge-after .mat-badge-content{right:auto;left:-28px}.mat-badge-large.mat-badge-overlap.mat-badge-before .mat-badge-content{left:-14px}[dir=rtl] .mat-badge-large.mat-badge-overlap.mat-badge-before .mat-badge-content{left:auto;right:-14px}.mat-badge-large.mat-badge-overlap.mat-badge-after .mat-badge-content{right:-14px}[dir=rtl] .mat-badge-large.mat-badge-overlap.mat-badge-after .mat-badge-content{right:auto;left:-14px}.mat-badge-content{color:#fff;background:#3f51b5}.cdk-high-contrast-active .mat-badge-content{outline:solid 1px;border-radius:0}.mat-badge-accent .mat-badge-content{background:#ff4081;color:#fff}.mat-badge-warn .mat-badge-content{color:#fff;background:#f44336}.mat-badge-disabled .mat-badge-content{background:#b9b9b9;color:rgba(0,0,0,.38)}.mat-bottom-sheet-container{box-shadow:0px 8px 10px -5px rgba(0, 0, 0, 0.2),0px 16px 24px 2px rgba(0, 0, 0, 0.14),0px 6px 30px 5px rgba(0, 0, 0, 0.12);background:#fff;color:rgba(0,0,0,.87)}.mat-button,.mat-icon-button,.mat-stroked-button{color:inherit;background:rgba(0,0,0,0)}.mat-button.mat-primary,.mat-icon-button.mat-primary,.mat-stroked-button.mat-primary{color:#3f51b5}.mat-button.mat-accent,.mat-icon-button.mat-accent,.mat-stroked-button.mat-accent{color:#ff4081}.mat-button.mat-warn,.mat-icon-button.mat-warn,.mat-stroked-button.mat-warn{color:#f44336}.mat-button.mat-primary.mat-button-disabled,.mat-button.mat-accent.mat-button-disabled,.mat-button.mat-warn.mat-button-disabled,.mat-button.mat-button-disabled.mat-button-disabled,.mat-icon-button.mat-primary.mat-button-disabled,.mat-icon-button.mat-accent.mat-button-disabled,.mat-icon-button.mat-warn.mat-button-disabled,.mat-icon-button.mat-button-disabled.mat-button-disabled,.mat-stroked-button.mat-primary.mat-button-disabled,.mat-stroked-button.mat-accent.mat-button-disabled,.mat-stroked-button.mat-warn.mat-button-disabled,.mat-stroked-button.mat-button-disabled.mat-button-disabled{color:rgba(0,0,0,.26)}.mat-button.mat-primary .mat-button-focus-overlay,.mat-icon-button.mat-primary .mat-button-focus-overlay,.mat-stroked-button.mat-primary .mat-button-focus-overlay{background-color:#3f51b5}.mat-button.mat-accent .mat-button-focus-overlay,.mat-icon-button.mat-accent .mat-button-focus-overlay,.mat-stroked-button.mat-accent .mat-button-focus-overlay{background-color:#ff4081}.mat-button.mat-warn .mat-button-focus-overlay,.mat-icon-button.mat-warn .mat-button-focus-overlay,.mat-stroked-button.mat-warn .mat-button-focus-overlay{background-color:#f44336}.mat-button.mat-button-disabled .mat-button-focus-overlay,.mat-icon-button.mat-button-disabled .mat-button-focus-overlay,.mat-stroked-button.mat-button-disabled .mat-button-focus-overlay{background-color:rgba(0,0,0,0)}.mat-button .mat-ripple-element,.mat-icon-button .mat-ripple-element,.mat-stroked-button .mat-ripple-element{opacity:.1;background-color:currentColor}.mat-button-focus-overlay{background:#000}.mat-stroked-button:not(.mat-button-disabled){border-color:rgba(0,0,0,.12)}.mat-flat-button,.mat-raised-button,.mat-fab,.mat-mini-fab{color:rgba(0,0,0,.87);background-color:#fff}.mat-flat-button.mat-primary,.mat-raised-button.mat-primary,.mat-fab.mat-primary,.mat-mini-fab.mat-primary{color:#fff}.mat-flat-button.mat-accent,.mat-raised-button.mat-accent,.mat-fab.mat-accent,.mat-mini-fab.mat-accent{color:#fff}.mat-flat-button.mat-warn,.mat-raised-button.mat-warn,.mat-fab.mat-warn,.mat-mini-fab.mat-warn{color:#fff}.mat-flat-button.mat-primary.mat-button-disabled,.mat-flat-button.mat-accent.mat-button-disabled,.mat-flat-button.mat-warn.mat-button-disabled,.mat-flat-button.mat-button-disabled.mat-button-disabled,.mat-raised-button.mat-primary.mat-button-disabled,.mat-raised-button.mat-accent.mat-button-disabled,.mat-raised-button.mat-warn.mat-button-disabled,.mat-raised-button.mat-button-disabled.mat-button-disabled,.mat-fab.mat-primary.mat-button-disabled,.mat-fab.mat-accent.mat-button-disabled,.mat-fab.mat-warn.mat-button-disabled,.mat-fab.mat-button-disabled.mat-button-disabled,.mat-mini-fab.mat-primary.mat-button-disabled,.mat-mini-fab.mat-accent.mat-button-disabled,.mat-mini-fab.mat-warn.mat-button-disabled,.mat-mini-fab.mat-button-disabled.mat-button-disabled{color:rgba(0,0,0,.26)}.mat-flat-button.mat-primary,.mat-raised-button.mat-primary,.mat-fab.mat-primary,.mat-mini-fab.mat-primary{background-color:#3f51b5}.mat-flat-button.mat-accent,.mat-raised-button.mat-accent,.mat-fab.mat-accent,.mat-mini-fab.mat-accent{background-color:#ff4081}.mat-flat-button.mat-warn,.mat-raised-button.mat-warn,.mat-fab.mat-warn,.mat-mini-fab.mat-warn{background-color:#f44336}.mat-flat-button.mat-primary.mat-button-disabled,.mat-flat-button.mat-accent.mat-button-disabled,.mat-flat-button.mat-warn.mat-button-disabled,.mat-flat-button.mat-button-disabled.mat-button-disabled,.mat-raised-button.mat-primary.mat-button-disabled,.mat-raised-button.mat-accent.mat-button-disabled,.mat-raised-button.mat-warn.mat-button-disabled,.mat-raised-button.mat-button-disabled.mat-button-disabled,.mat-fab.mat-primary.mat-button-disabled,.mat-fab.mat-accent.mat-button-disabled,.mat-fab.mat-warn.mat-button-disabled,.mat-fab.mat-button-disabled.mat-button-disabled,.mat-mini-fab.mat-primary.mat-button-disabled,.mat-mini-fab.mat-accent.mat-button-disabled,.mat-mini-fab.mat-warn.mat-button-disabled,.mat-mini-fab.mat-button-disabled.mat-button-disabled{background-color:rgba(0,0,0,.12)}.mat-flat-button.mat-primary .mat-ripple-element,.mat-raised-button.mat-primary .mat-ripple-element,.mat-fab.mat-primary .mat-ripple-element,.mat-mini-fab.mat-primary .mat-ripple-element{background-color:rgba(255,255,255,.1)}.mat-flat-button.mat-accent .mat-ripple-element,.mat-raised-button.mat-accent .mat-ripple-element,.mat-fab.mat-accent .mat-ripple-element,.mat-mini-fab.mat-accent .mat-ripple-element{background-color:rgba(255,255,255,.1)}.mat-flat-button.mat-warn .mat-ripple-element,.mat-raised-button.mat-warn .mat-ripple-element,.mat-fab.mat-warn .mat-ripple-element,.mat-mini-fab.mat-warn .mat-ripple-element{background-color:rgba(255,255,255,.1)}.mat-stroked-button:not([class*=mat-elevation-z]),.mat-flat-button:not([class*=mat-elevation-z]){box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.2),0px 0px 0px 0px rgba(0, 0, 0, 0.14),0px 0px 0px 0px rgba(0, 0, 0, 0.12)}.mat-raised-button:not([class*=mat-elevation-z]){box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2),0px 2px 2px 0px rgba(0, 0, 0, 0.14),0px 1px 5px 0px rgba(0, 0, 0, 0.12)}.mat-raised-button:not(.mat-button-disabled):active:not([class*=mat-elevation-z]){box-shadow:0px 5px 5px -3px rgba(0, 0, 0, 0.2),0px 8px 10px 1px rgba(0, 0, 0, 0.14),0px 3px 14px 2px rgba(0, 0, 0, 0.12)}.mat-raised-button.mat-button-disabled:not([class*=mat-elevation-z]){box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.2),0px 0px 0px 0px rgba(0, 0, 0, 0.14),0px 0px 0px 0px rgba(0, 0, 0, 0.12)}.mat-fab:not([class*=mat-elevation-z]),.mat-mini-fab:not([class*=mat-elevation-z]){box-shadow:0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px 0px rgba(0, 0, 0, 0.14),0px 1px 18px 0px rgba(0, 0, 0, 0.12)}.mat-fab:not(.mat-button-disabled):active:not([class*=mat-elevation-z]),.mat-mini-fab:not(.mat-button-disabled):active:not([class*=mat-elevation-z]){box-shadow:0px 7px 8px -4px rgba(0, 0, 0, 0.2),0px 12px 17px 2px rgba(0, 0, 0, 0.14),0px 5px 22px 4px rgba(0, 0, 0, 0.12)}.mat-fab.mat-button-disabled:not([class*=mat-elevation-z]),.mat-mini-fab.mat-button-disabled:not([class*=mat-elevation-z]){box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.2),0px 0px 0px 0px rgba(0, 0, 0, 0.14),0px 0px 0px 0px rgba(0, 0, 0, 0.12)}.mat-button-toggle-standalone:not([class*=mat-elevation-z]),.mat-button-toggle-group:not([class*=mat-elevation-z]){box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2),0px 2px 2px 0px rgba(0, 0, 0, 0.14),0px 1px 5px 0px rgba(0, 0, 0, 0.12)}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard:not([class*=mat-elevation-z]),.mat-button-toggle-group-appearance-standard:not([class*=mat-elevation-z]){box-shadow:none}.mat-button-toggle{color:rgba(0,0,0,.38)}.mat-button-toggle .mat-button-toggle-focus-overlay{background-color:rgba(0,0,0,.12)}.mat-button-toggle-appearance-standard{color:rgba(0,0,0,.87);background:#fff}.mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay{background-color:#000}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:solid 1px #e0e0e0}[dir=rtl] .mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:none;border-right:solid 1px #e0e0e0}.mat-button-toggle-group-appearance-standard.mat-button-toggle-vertical .mat-button-toggle+.mat-button-toggle{border-left:none;border-right:none;border-top:solid 1px #e0e0e0}.mat-button-toggle-checked{background-color:#e0e0e0;color:rgba(0,0,0,.54)}.mat-button-toggle-checked.mat-button-toggle-appearance-standard{color:rgba(0,0,0,.87)}.mat-button-toggle-disabled{color:rgba(0,0,0,.26);background-color:#eee}.mat-button-toggle-disabled.mat-button-toggle-appearance-standard{background:#fff}.mat-button-toggle-disabled.mat-button-toggle-checked{background-color:#bdbdbd}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:solid 1px #e0e0e0}.mat-button-toggle-appearance-standard .mat-button-toggle-label-content{line-height:48px}.mat-card{background:#fff;color:rgba(0,0,0,.87)}.mat-card:not([class*=mat-elevation-z]){box-shadow:0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 1px 3px 0px rgba(0, 0, 0, 0.12)}.mat-card.mat-card-flat:not([class*=mat-elevation-z]){box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.2),0px 0px 0px 0px rgba(0, 0, 0, 0.14),0px 0px 0px 0px rgba(0, 0, 0, 0.12)}.mat-card-subtitle{color:rgba(0,0,0,.54)}.mat-checkbox-frame{border-color:rgba(0,0,0,.54)}.mat-checkbox-checkmark{fill:#fafafa}.mat-checkbox-checkmark-path{stroke:#fafafa !important}.mat-checkbox-mixedmark{background-color:#fafafa}.mat-checkbox-indeterminate.mat-primary .mat-checkbox-background,.mat-checkbox-checked.mat-primary .mat-checkbox-background{background-color:#3f51b5}.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,.mat-checkbox-checked.mat-accent .mat-checkbox-background{background-color:#ff4081}.mat-checkbox-indeterminate.mat-warn .mat-checkbox-background,.mat-checkbox-checked.mat-warn .mat-checkbox-background{background-color:#f44336}.mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background,.mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background{background-color:#b0b0b0}.mat-checkbox-disabled:not(.mat-checkbox-checked) .mat-checkbox-frame{border-color:#b0b0b0}.mat-checkbox-disabled .mat-checkbox-label{color:rgba(0,0,0,.38)}.mat-checkbox .mat-ripple-element{background-color:#000}.mat-checkbox-checked:not(.mat-checkbox-disabled).mat-primary .mat-ripple-element,.mat-checkbox:active:not(.mat-checkbox-disabled).mat-primary .mat-ripple-element{background:#3f51b5}.mat-checkbox-checked:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element,.mat-checkbox:active:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element{background:#ff4081}.mat-checkbox-checked:not(.mat-checkbox-disabled).mat-warn .mat-ripple-element,.mat-checkbox:active:not(.mat-checkbox-disabled).mat-warn .mat-ripple-element{background:#f44336}.mat-chip.mat-standard-chip{background-color:#e0e0e0;color:rgba(0,0,0,.87)}.mat-chip.mat-standard-chip .mat-chip-remove{color:rgba(0,0,0,.87);opacity:.4}.mat-chip.mat-standard-chip:not(.mat-chip-disabled):active{box-shadow:0px 3px 3px -2px rgba(0, 0, 0, 0.2),0px 3px 4px 0px rgba(0, 0, 0, 0.14),0px 1px 8px 0px rgba(0, 0, 0, 0.12)}.mat-chip.mat-standard-chip:not(.mat-chip-disabled) .mat-chip-remove:hover{opacity:.54}.mat-chip.mat-standard-chip.mat-chip-disabled{opacity:.4}.mat-chip.mat-standard-chip::after{background:#000}.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary{background-color:#3f51b5;color:#fff}.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary .mat-chip-remove{color:#fff;opacity:.4}.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary .mat-ripple-element{background-color:rgba(255,255,255,.1)}.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn{background-color:#f44336;color:#fff}.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn .mat-chip-remove{color:#fff;opacity:.4}.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn .mat-ripple-element{background-color:rgba(255,255,255,.1)}.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent{background-color:#ff4081;color:#fff}.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent .mat-chip-remove{color:#fff;opacity:.4}.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent .mat-ripple-element{background-color:rgba(255,255,255,.1)}.mat-table{background:#fff}.mat-table thead,.mat-table tbody,.mat-table tfoot,mat-header-row,mat-row,mat-footer-row,[mat-header-row],[mat-row],[mat-footer-row],.mat-table-sticky{background:inherit}mat-row,mat-header-row,mat-footer-row,th.mat-header-cell,td.mat-cell,td.mat-footer-cell{border-bottom-color:rgba(0,0,0,.12)}.mat-header-cell{color:rgba(0,0,0,.54)}.mat-cell,.mat-footer-cell{color:rgba(0,0,0,.87)}.mat-calendar-arrow{fill:rgba(0,0,0,.54)}.mat-datepicker-toggle,.mat-datepicker-content .mat-calendar-next-button,.mat-datepicker-content .mat-calendar-previous-button{color:rgba(0,0,0,.54)}.mat-calendar-table-header-divider::after{background:rgba(0,0,0,.12)}.mat-calendar-table-header,.mat-calendar-body-label{color:rgba(0,0,0,.54)}.mat-calendar-body-cell-content,.mat-date-range-input-separator{color:rgba(0,0,0,.87);border-color:rgba(0,0,0,0)}.mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){color:rgba(0,0,0,.38)}.mat-form-field-disabled .mat-date-range-input-separator{color:rgba(0,0,0,.38)}.mat-calendar-body-in-preview{color:rgba(0,0,0,.24)}.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){border-color:rgba(0,0,0,.38)}.mat-calendar-body-disabled>.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){border-color:rgba(0,0,0,.18)}.mat-calendar-body-in-range::before{background:rgba(63,81,181,.2)}.mat-calendar-body-comparison-identical,.mat-calendar-body-in-comparison-range::before{background:rgba(249,171,0,.2)}.mat-calendar-body-comparison-bridge-start::before,[dir=rtl] .mat-calendar-body-comparison-bridge-end::before{background:linear-gradient(to right, rgba(63, 81, 181, 0.2) 50%, rgba(249, 171, 0, 0.2) 50%)}.mat-calendar-body-comparison-bridge-end::before,[dir=rtl] .mat-calendar-body-comparison-bridge-start::before{background:linear-gradient(to left, rgba(63, 81, 181, 0.2) 50%, rgba(249, 171, 0, 0.2) 50%)}.mat-calendar-body-in-range>.mat-calendar-body-comparison-identical,.mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::after{background:#a8dab5}.mat-calendar-body-comparison-identical.mat-calendar-body-selected,.mat-calendar-body-in-comparison-range>.mat-calendar-body-selected{background:#46a35e}.mat-calendar-body-selected{background-color:#3f51b5;color:#fff}.mat-calendar-body-disabled>.mat-calendar-body-selected{background-color:rgba(63,81,181,.4)}.mat-calendar-body-today.mat-calendar-body-selected{box-shadow:inset 0 0 0 1px #fff}.cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),.cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:rgba(63,81,181,.3)}@media(hover: hover){.mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:rgba(63,81,181,.3)}}.mat-datepicker-content{box-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.2),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 1px 10px 0px rgba(0, 0, 0, 0.12);background-color:#fff;color:rgba(0,0,0,.87)}.mat-datepicker-content.mat-accent .mat-calendar-body-in-range::before{background:rgba(255,64,129,.2)}.mat-datepicker-content.mat-accent .mat-calendar-body-comparison-identical,.mat-datepicker-content.mat-accent .mat-calendar-body-in-comparison-range::before{background:rgba(249,171,0,.2)}.mat-datepicker-content.mat-accent .mat-calendar-body-comparison-bridge-start::before,.mat-datepicker-content.mat-accent [dir=rtl] .mat-calendar-body-comparison-bridge-end::before{background:linear-gradient(to right, rgba(255, 64, 129, 0.2) 50%, rgba(249, 171, 0, 0.2) 50%)}.mat-datepicker-content.mat-accent .mat-calendar-body-comparison-bridge-end::before,.mat-datepicker-content.mat-accent [dir=rtl] .mat-calendar-body-comparison-bridge-start::before{background:linear-gradient(to left, rgba(255, 64, 129, 0.2) 50%, rgba(249, 171, 0, 0.2) 50%)}.mat-datepicker-content.mat-accent .mat-calendar-body-in-range>.mat-calendar-body-comparison-identical,.mat-datepicker-content.mat-accent .mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::after{background:#a8dab5}.mat-datepicker-content.mat-accent .mat-calendar-body-comparison-identical.mat-calendar-body-selected,.mat-datepicker-content.mat-accent .mat-calendar-body-in-comparison-range>.mat-calendar-body-selected{background:#46a35e}.mat-datepicker-content.mat-accent .mat-calendar-body-selected{background-color:#ff4081;color:#fff}.mat-datepicker-content.mat-accent .mat-calendar-body-disabled>.mat-calendar-body-selected{background-color:rgba(255,64,129,.4)}.mat-datepicker-content.mat-accent .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:inset 0 0 0 1px #fff}.mat-datepicker-content.mat-accent .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),.mat-datepicker-content.mat-accent .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:rgba(255,64,129,.3)}@media(hover: hover){.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:rgba(255,64,129,.3)}}.mat-datepicker-content.mat-warn .mat-calendar-body-in-range::before{background:rgba(244,67,54,.2)}.mat-datepicker-content.mat-warn .mat-calendar-body-comparison-identical,.mat-datepicker-content.mat-warn .mat-calendar-body-in-comparison-range::before{background:rgba(249,171,0,.2)}.mat-datepicker-content.mat-warn .mat-calendar-body-comparison-bridge-start::before,.mat-datepicker-content.mat-warn [dir=rtl] .mat-calendar-body-comparison-bridge-end::before{background:linear-gradient(to right, rgba(244, 67, 54, 0.2) 50%, rgba(249, 171, 0, 0.2) 50%)}.mat-datepicker-content.mat-warn .mat-calendar-body-comparison-bridge-end::before,.mat-datepicker-content.mat-warn [dir=rtl] .mat-calendar-body-comparison-bridge-start::before{background:linear-gradient(to left, rgba(244, 67, 54, 0.2) 50%, rgba(249, 171, 0, 0.2) 50%)}.mat-datepicker-content.mat-warn .mat-calendar-body-in-range>.mat-calendar-body-comparison-identical,.mat-datepicker-content.mat-warn .mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::after{background:#a8dab5}.mat-datepicker-content.mat-warn .mat-calendar-body-comparison-identical.mat-calendar-body-selected,.mat-datepicker-content.mat-warn .mat-calendar-body-in-comparison-range>.mat-calendar-body-selected{background:#46a35e}.mat-datepicker-content.mat-warn .mat-calendar-body-selected{background-color:#f44336;color:#fff}.mat-datepicker-content.mat-warn .mat-calendar-body-disabled>.mat-calendar-body-selected{background-color:rgba(244,67,54,.4)}.mat-datepicker-content.mat-warn .mat-calendar-body-today.mat-calendar-body-selected{box-shadow:inset 0 0 0 1px #fff}.mat-datepicker-content.mat-warn .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),.mat-datepicker-content.mat-warn .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:rgba(244,67,54,.3)}@media(hover: hover){.mat-datepicker-content.mat-warn .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:rgba(244,67,54,.3)}}.mat-datepicker-content-touch{box-shadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2),0px 24px 38px 3px rgba(0, 0, 0, 0.14),0px 9px 46px 8px rgba(0, 0, 0, 0.12)}.mat-datepicker-toggle-active{color:#3f51b5}.mat-datepicker-toggle-active.mat-accent{color:#ff4081}.mat-datepicker-toggle-active.mat-warn{color:#f44336}.mat-date-range-input-inner[disabled]{color:rgba(0,0,0,.38)}.mat-dialog-container{box-shadow:0px 11px 15px -7px rgba(0, 0, 0, 0.2),0px 24px 38px 3px rgba(0, 0, 0, 0.14),0px 9px 46px 8px rgba(0, 0, 0, 0.12);background:#fff;color:rgba(0,0,0,.87)}.mat-divider{border-top-color:rgba(0,0,0,.12)}.mat-divider-vertical{border-right-color:rgba(0,0,0,.12)}.mat-expansion-panel{background:#fff;color:rgba(0,0,0,.87)}.mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2),0px 2px 2px 0px rgba(0, 0, 0, 0.14),0px 1px 5px 0px rgba(0, 0, 0, 0.12)}.mat-action-row{border-top-color:rgba(0,0,0,.12)}.mat-expansion-panel .mat-expansion-panel-header.cdk-keyboard-focused:not([aria-disabled=true]),.mat-expansion-panel .mat-expansion-panel-header.cdk-program-focused:not([aria-disabled=true]),.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:hover:not([aria-disabled=true]){background:rgba(0,0,0,.04)}@media(hover: none){.mat-expansion-panel:not(.mat-expanded):not([aria-disabled=true]) .mat-expansion-panel-header:hover{background:#fff}}.mat-expansion-panel-header-title{color:rgba(0,0,0,.87)}.mat-expansion-panel-header-description,.mat-expansion-indicator::after{color:rgba(0,0,0,.54)}.mat-expansion-panel-header[aria-disabled=true]{color:rgba(0,0,0,.26)}.mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-title,.mat-expansion-panel-header[aria-disabled=true] .mat-expansion-panel-header-description{color:inherit}.mat-expansion-panel-header{height:48px}.mat-expansion-panel-header.mat-expanded{height:64px}.mat-form-field-label{color:rgba(0,0,0,.6)}.mat-hint{color:rgba(0,0,0,.6)}.mat-form-field.mat-focused .mat-form-field-label{color:#3f51b5}.mat-form-field.mat-focused .mat-form-field-label.mat-accent{color:#ff4081}.mat-form-field.mat-focused .mat-form-field-label.mat-warn{color:#f44336}.mat-focused .mat-form-field-required-marker{color:#ff4081}.mat-form-field-ripple{background-color:rgba(0,0,0,.87)}.mat-form-field.mat-focused .mat-form-field-ripple{background-color:#3f51b5}.mat-form-field.mat-focused .mat-form-field-ripple.mat-accent{background-color:#ff4081}.mat-form-field.mat-focused .mat-form-field-ripple.mat-warn{background-color:#f44336}.mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid) .mat-form-field-infix::after{color:#3f51b5}.mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid).mat-accent .mat-form-field-infix::after{color:#ff4081}.mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid).mat-warn .mat-form-field-infix::after{color:#f44336}.mat-form-field.mat-form-field-invalid .mat-form-field-label{color:#f44336}.mat-form-field.mat-form-field-invalid .mat-form-field-label.mat-accent,.mat-form-field.mat-form-field-invalid .mat-form-field-label .mat-form-field-required-marker{color:#f44336}.mat-form-field.mat-form-field-invalid .mat-form-field-ripple,.mat-form-field.mat-form-field-invalid .mat-form-field-ripple.mat-accent{background-color:#f44336}.mat-error{color:#f44336}.mat-form-field-appearance-legacy .mat-form-field-label{color:rgba(0,0,0,.54)}.mat-form-field-appearance-legacy .mat-hint{color:rgba(0,0,0,.54)}.mat-form-field-appearance-legacy .mat-form-field-underline{background-color:rgba(0,0,0,.42)}.mat-form-field-appearance-legacy.mat-form-field-disabled .mat-form-field-underline{background-image:linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%);background-size:4px 100%;background-repeat:repeat-x}.mat-form-field-appearance-standard .mat-form-field-underline{background-color:rgba(0,0,0,.42)}.mat-form-field-appearance-standard.mat-form-field-disabled .mat-form-field-underline{background-image:linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%);background-size:4px 100%;background-repeat:repeat-x}.mat-form-field-appearance-fill .mat-form-field-flex{background-color:rgba(0,0,0,.04)}.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-flex{background-color:rgba(0,0,0,.02)}.mat-form-field-appearance-fill .mat-form-field-underline::before{background-color:rgba(0,0,0,.42)}.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-label{color:rgba(0,0,0,.38)}.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-underline::before{background-color:rgba(0,0,0,0)}.mat-form-field-appearance-outline .mat-form-field-outline{color:rgba(0,0,0,.12)}.mat-form-field-appearance-outline .mat-form-field-outline-thick{color:rgba(0,0,0,.87)}.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick{color:#3f51b5}.mat-form-field-appearance-outline.mat-focused.mat-accent .mat-form-field-outline-thick{color:#ff4081}.mat-form-field-appearance-outline.mat-focused.mat-warn .mat-form-field-outline-thick{color:#f44336}.mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick{color:#f44336}.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-label{color:rgba(0,0,0,.38)}.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline{color:rgba(0,0,0,.06)}.mat-icon.mat-primary{color:#3f51b5}.mat-icon.mat-accent{color:#ff4081}.mat-icon.mat-warn{color:#f44336}.mat-form-field-type-mat-native-select .mat-form-field-infix::after{color:rgba(0,0,0,.54)}.mat-input-element:disabled,.mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after{color:rgba(0,0,0,.38)}.mat-input-element{caret-color:#3f51b5}.mat-input-element::-moz-placeholder{color:rgba(0,0,0,.42)}.mat-input-element::placeholder{color:rgba(0,0,0,.42)}.mat-input-element::-moz-placeholder{color:rgba(0,0,0,.42)}.mat-input-element::-webkit-input-placeholder{color:rgba(0,0,0,.42)}.mat-input-element:-ms-input-placeholder{color:rgba(0,0,0,.42)}.mat-form-field.mat-accent .mat-input-element{caret-color:#ff4081}.mat-form-field.mat-warn .mat-input-element,.mat-form-field-invalid .mat-input-element{caret-color:#f44336}.mat-form-field-type-mat-native-select.mat-form-field-invalid .mat-form-field-infix::after{color:#f44336}.mat-list-base .mat-list-item{color:rgba(0,0,0,.87)}.mat-list-base .mat-list-option{color:rgba(0,0,0,.87)}.mat-list-base .mat-subheader{color:rgba(0,0,0,.54)}.mat-list-base .mat-list-item-disabled{background-color:#eee;color:rgba(0,0,0,.38)}.mat-list-option:hover,.mat-list-option:focus,.mat-nav-list .mat-list-item:hover,.mat-nav-list .mat-list-item:focus,.mat-action-list .mat-list-item:hover,.mat-action-list .mat-list-item:focus{background:rgba(0,0,0,.04)}.mat-list-single-selected-option,.mat-list-single-selected-option:hover,.mat-list-single-selected-option:focus{background:rgba(0,0,0,.12)}.mat-menu-panel{background:#fff}.mat-menu-panel:not([class*=mat-elevation-z]){box-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.2),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 1px 10px 0px rgba(0, 0, 0, 0.12)}.mat-menu-item{background:rgba(0,0,0,0);color:rgba(0,0,0,.87)}.mat-menu-item[disabled],.mat-menu-item[disabled] .mat-menu-submenu-icon,.mat-menu-item[disabled] .mat-icon-no-color{color:rgba(0,0,0,.38)}.mat-menu-item .mat-icon-no-color,.mat-menu-submenu-icon{color:rgba(0,0,0,.54)}.mat-menu-item:hover:not([disabled]),.mat-menu-item.cdk-program-focused:not([disabled]),.mat-menu-item.cdk-keyboard-focused:not([disabled]),.mat-menu-item-highlighted:not([disabled]){background:rgba(0,0,0,.04)}.mat-paginator{background:#fff}.mat-paginator,.mat-paginator-page-size .mat-select-trigger{color:rgba(0,0,0,.54)}.mat-paginator-decrement,.mat-paginator-increment{border-top:2px solid rgba(0,0,0,.54);border-right:2px solid rgba(0,0,0,.54)}.mat-paginator-first,.mat-paginator-last{border-top:2px solid rgba(0,0,0,.54)}.mat-icon-button[disabled] .mat-paginator-decrement,.mat-icon-button[disabled] .mat-paginator-increment,.mat-icon-button[disabled] .mat-paginator-first,.mat-icon-button[disabled] .mat-paginator-last{border-color:rgba(0,0,0,.38)}.mat-paginator-container{min-height:56px}.mat-progress-bar-background{fill:#cbd0e9}.mat-progress-bar-buffer{background-color:#cbd0e9}.mat-progress-bar-fill::after{background-color:#3f51b5}.mat-progress-bar.mat-accent .mat-progress-bar-background{fill:#fbccdc}.mat-progress-bar.mat-accent .mat-progress-bar-buffer{background-color:#fbccdc}.mat-progress-bar.mat-accent .mat-progress-bar-fill::after{background-color:#ff4081}.mat-progress-bar.mat-warn .mat-progress-bar-background{fill:#f9ccc9}.mat-progress-bar.mat-warn .mat-progress-bar-buffer{background-color:#f9ccc9}.mat-progress-bar.mat-warn .mat-progress-bar-fill::after{background-color:#f44336}.mat-progress-spinner circle,.mat-spinner circle{stroke:#3f51b5}.mat-progress-spinner.mat-accent circle,.mat-spinner.mat-accent circle{stroke:#ff4081}.mat-progress-spinner.mat-warn circle,.mat-spinner.mat-warn circle{stroke:#f44336}.mat-radio-outer-circle{border-color:rgba(0,0,0,.54)}.mat-radio-button.mat-primary.mat-radio-checked .mat-radio-outer-circle{border-color:#3f51b5}.mat-radio-button.mat-primary .mat-radio-inner-circle,.mat-radio-button.mat-primary .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),.mat-radio-button.mat-primary.mat-radio-checked .mat-radio-persistent-ripple,.mat-radio-button.mat-primary:active .mat-radio-persistent-ripple{background-color:#3f51b5}.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle{border-color:#ff4081}.mat-radio-button.mat-accent .mat-radio-inner-circle,.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-persistent-ripple,.mat-radio-button.mat-accent:active .mat-radio-persistent-ripple{background-color:#ff4081}.mat-radio-button.mat-warn.mat-radio-checked .mat-radio-outer-circle{border-color:#f44336}.mat-radio-button.mat-warn .mat-radio-inner-circle,.mat-radio-button.mat-warn .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),.mat-radio-button.mat-warn.mat-radio-checked .mat-radio-persistent-ripple,.mat-radio-button.mat-warn:active .mat-radio-persistent-ripple{background-color:#f44336}.mat-radio-button.mat-radio-disabled.mat-radio-checked .mat-radio-outer-circle,.mat-radio-button.mat-radio-disabled .mat-radio-outer-circle{border-color:rgba(0,0,0,.38)}.mat-radio-button.mat-radio-disabled .mat-radio-ripple .mat-ripple-element,.mat-radio-button.mat-radio-disabled .mat-radio-inner-circle{background-color:rgba(0,0,0,.38)}.mat-radio-button.mat-radio-disabled .mat-radio-label-content{color:rgba(0,0,0,.38)}.mat-radio-button .mat-ripple-element{background-color:#000}.mat-select-value{color:rgba(0,0,0,.87)}.mat-select-placeholder{color:rgba(0,0,0,.42)}.mat-select-disabled .mat-select-value{color:rgba(0,0,0,.38)}.mat-select-arrow{color:rgba(0,0,0,.54)}.mat-select-panel{background:#fff}.mat-select-panel:not([class*=mat-elevation-z]){box-shadow:0px 2px 4px -1px rgba(0, 0, 0, 0.2),0px 4px 5px 0px rgba(0, 0, 0, 0.14),0px 1px 10px 0px rgba(0, 0, 0, 0.12)}.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple){background:rgba(0,0,0,.12)}.mat-form-field.mat-focused.mat-primary .mat-select-arrow{color:#3f51b5}.mat-form-field.mat-focused.mat-accent .mat-select-arrow{color:#ff4081}.mat-form-field.mat-focused.mat-warn .mat-select-arrow{color:#f44336}.mat-form-field .mat-select.mat-select-invalid .mat-select-arrow{color:#f44336}.mat-form-field .mat-select.mat-select-disabled .mat-select-arrow{color:rgba(0,0,0,.38)}.mat-drawer-container{background-color:#fafafa;color:rgba(0,0,0,.87)}.mat-drawer{background-color:#fff;color:rgba(0,0,0,.87)}.mat-drawer.mat-drawer-push{background-color:#fff}.mat-drawer:not(.mat-drawer-side){box-shadow:0px 8px 10px -5px rgba(0, 0, 0, 0.2),0px 16px 24px 2px rgba(0, 0, 0, 0.14),0px 6px 30px 5px rgba(0, 0, 0, 0.12)}.mat-drawer-side{border-right:solid 1px rgba(0,0,0,.12)}.mat-drawer-side.mat-drawer-end{border-left:solid 1px rgba(0,0,0,.12);border-right:none}[dir=rtl] .mat-drawer-side{border-left:solid 1px rgba(0,0,0,.12);border-right:none}[dir=rtl] .mat-drawer-side.mat-drawer-end{border-left:none;border-right:solid 1px rgba(0,0,0,.12)}.mat-drawer-backdrop.mat-drawer-shown{background-color:rgba(0,0,0,.6)}.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb{background-color:#ff4081}.mat-slide-toggle.mat-checked .mat-slide-toggle-bar{background-color:rgba(255,64,129,.54)}.mat-slide-toggle.mat-checked .mat-ripple-element{background-color:#ff4081}.mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-thumb{background-color:#3f51b5}.mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-bar{background-color:rgba(63,81,181,.54)}.mat-slide-toggle.mat-primary.mat-checked .mat-ripple-element{background-color:#3f51b5}.mat-slide-toggle.mat-warn.mat-checked .mat-slide-toggle-thumb{background-color:#f44336}.mat-slide-toggle.mat-warn.mat-checked .mat-slide-toggle-bar{background-color:rgba(244,67,54,.54)}.mat-slide-toggle.mat-warn.mat-checked .mat-ripple-element{background-color:#f44336}.mat-slide-toggle:not(.mat-checked) .mat-ripple-element{background-color:#000}.mat-slide-toggle-thumb{box-shadow:0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 1px 3px 0px rgba(0, 0, 0, 0.12);background-color:#fafafa}.mat-slide-toggle-bar{background-color:rgba(0,0,0,.38)}.mat-slider-track-background{background-color:rgba(0,0,0,.26)}.mat-slider.mat-primary .mat-slider-track-fill,.mat-slider.mat-primary .mat-slider-thumb,.mat-slider.mat-primary .mat-slider-thumb-label{background-color:#3f51b5}.mat-slider.mat-primary .mat-slider-thumb-label-text{color:#fff}.mat-slider.mat-primary .mat-slider-focus-ring{background-color:rgba(63,81,181,.2)}.mat-slider.mat-accent .mat-slider-track-fill,.mat-slider.mat-accent .mat-slider-thumb,.mat-slider.mat-accent .mat-slider-thumb-label{background-color:#ff4081}.mat-slider.mat-accent .mat-slider-thumb-label-text{color:#fff}.mat-slider.mat-accent .mat-slider-focus-ring{background-color:rgba(255,64,129,.2)}.mat-slider.mat-warn .mat-slider-track-fill,.mat-slider.mat-warn .mat-slider-thumb,.mat-slider.mat-warn .mat-slider-thumb-label{background-color:#f44336}.mat-slider.mat-warn .mat-slider-thumb-label-text{color:#fff}.mat-slider.mat-warn .mat-slider-focus-ring{background-color:rgba(244,67,54,.2)}.mat-slider:hover .mat-slider-track-background,.mat-slider.cdk-focused .mat-slider-track-background{background-color:rgba(0,0,0,.38)}.mat-slider.mat-slider-disabled .mat-slider-track-background,.mat-slider.mat-slider-disabled .mat-slider-track-fill,.mat-slider.mat-slider-disabled .mat-slider-thumb{background-color:rgba(0,0,0,.26)}.mat-slider.mat-slider-disabled:hover .mat-slider-track-background{background-color:rgba(0,0,0,.26)}.mat-slider.mat-slider-min-value .mat-slider-focus-ring{background-color:rgba(0,0,0,.12)}.mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb,.mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label{background-color:rgba(0,0,0,.87)}.mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb,.mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label{background-color:rgba(0,0,0,.26)}.mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb{border-color:rgba(0,0,0,.26);background-color:rgba(0,0,0,0)}.mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover .mat-slider-thumb,.mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused .mat-slider-thumb{border-color:rgba(0,0,0,.38)}.mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover.mat-slider-disabled .mat-slider-thumb,.mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused.mat-slider-disabled .mat-slider-thumb{border-color:rgba(0,0,0,.26)}.mat-slider-has-ticks .mat-slider-wrapper::after{border-color:rgba(0,0,0,.7)}.mat-slider-horizontal .mat-slider-ticks{background-image:repeating-linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) 2px, transparent 0, transparent);background-image:-moz-repeating-linear-gradient(0.0001deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) 2px, transparent 0, transparent)}.mat-slider-vertical .mat-slider-ticks{background-image:repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) 2px, transparent 0, transparent)}.mat-step-header.cdk-keyboard-focused,.mat-step-header.cdk-program-focused,.mat-step-header:hover:not([aria-disabled]),.mat-step-header:hover[aria-disabled=false]{background-color:rgba(0,0,0,.04)}.mat-step-header:hover[aria-disabled=true]{cursor:default}@media(hover: none){.mat-step-header:hover{background:none}}.mat-step-header .mat-step-label,.mat-step-header .mat-step-optional{color:rgba(0,0,0,.54)}.mat-step-header .mat-step-icon{background-color:rgba(0,0,0,.54);color:#fff}.mat-step-header .mat-step-icon-selected,.mat-step-header .mat-step-icon-state-done,.mat-step-header .mat-step-icon-state-edit{background-color:#3f51b5;color:#fff}.mat-step-header.mat-accent .mat-step-icon{color:#fff}.mat-step-header.mat-accent .mat-step-icon-selected,.mat-step-header.mat-accent .mat-step-icon-state-done,.mat-step-header.mat-accent .mat-step-icon-state-edit{background-color:#ff4081;color:#fff}.mat-step-header.mat-warn .mat-step-icon{color:#fff}.mat-step-header.mat-warn .mat-step-icon-selected,.mat-step-header.mat-warn .mat-step-icon-state-done,.mat-step-header.mat-warn .mat-step-icon-state-edit{background-color:#f44336;color:#fff}.mat-step-header .mat-step-icon-state-error{background-color:rgba(0,0,0,0);color:#f44336}.mat-step-header .mat-step-label.mat-step-label-active{color:rgba(0,0,0,.87)}.mat-step-header .mat-step-label.mat-step-label-error{color:#f44336}.mat-stepper-horizontal,.mat-stepper-vertical{background-color:#fff}.mat-stepper-vertical-line::before{border-left-color:rgba(0,0,0,.12)}.mat-horizontal-stepper-header::before,.mat-horizontal-stepper-header::after,.mat-stepper-horizontal-line{border-top-color:rgba(0,0,0,.12)}.mat-horizontal-stepper-header{height:72px}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header,.mat-vertical-stepper-header{padding:24px 24px}.mat-stepper-vertical-line::before{top:-16px;bottom:-16px}.mat-stepper-label-position-bottom .mat-horizontal-stepper-header::after,.mat-stepper-label-position-bottom .mat-horizontal-stepper-header::before{top:36px}.mat-stepper-label-position-bottom .mat-stepper-horizontal-line{top:36px}.mat-sort-header-arrow{color:#757575}.mat-tab-nav-bar,.mat-tab-header{border-bottom:1px solid rgba(0,0,0,.12)}.mat-tab-group-inverted-header .mat-tab-nav-bar,.mat-tab-group-inverted-header .mat-tab-header{border-top:1px solid rgba(0,0,0,.12);border-bottom:none}.mat-tab-label,.mat-tab-link{color:rgba(0,0,0,.87)}.mat-tab-label.mat-tab-disabled,.mat-tab-link.mat-tab-disabled{color:rgba(0,0,0,.38)}.mat-tab-header-pagination-chevron{border-color:rgba(0,0,0,.87)}.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron{border-color:rgba(0,0,0,.38)}.mat-tab-group[class*=mat-background-]>.mat-tab-header,.mat-tab-nav-bar[class*=mat-background-]{border-bottom:none;border-top:none}.mat-tab-group.mat-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-group.mat-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-group.mat-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-group.mat-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled){background-color:rgba(197,202,233,.3)}.mat-tab-group.mat-primary .mat-ink-bar,.mat-tab-nav-bar.mat-primary .mat-ink-bar{background-color:#3f51b5}.mat-tab-group.mat-primary.mat-background-primary>.mat-tab-header .mat-ink-bar,.mat-tab-group.mat-primary.mat-background-primary>.mat-tab-link-container .mat-ink-bar,.mat-tab-nav-bar.mat-primary.mat-background-primary>.mat-tab-header .mat-ink-bar,.mat-tab-nav-bar.mat-primary.mat-background-primary>.mat-tab-link-container .mat-ink-bar{background-color:#fff}.mat-tab-group.mat-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-group.mat-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-group.mat-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-group.mat-accent .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-accent .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled){background-color:rgba(255,128,171,.3)}.mat-tab-group.mat-accent .mat-ink-bar,.mat-tab-nav-bar.mat-accent .mat-ink-bar{background-color:#ff4081}.mat-tab-group.mat-accent.mat-background-accent>.mat-tab-header .mat-ink-bar,.mat-tab-group.mat-accent.mat-background-accent>.mat-tab-link-container .mat-ink-bar,.mat-tab-nav-bar.mat-accent.mat-background-accent>.mat-tab-header .mat-ink-bar,.mat-tab-nav-bar.mat-accent.mat-background-accent>.mat-tab-link-container .mat-ink-bar{background-color:#fff}.mat-tab-group.mat-warn .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-group.mat-warn .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-group.mat-warn .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-group.mat-warn .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-warn .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-warn .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-warn .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-warn .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled){background-color:rgba(255,205,210,.3)}.mat-tab-group.mat-warn .mat-ink-bar,.mat-tab-nav-bar.mat-warn .mat-ink-bar{background-color:#f44336}.mat-tab-group.mat-warn.mat-background-warn>.mat-tab-header .mat-ink-bar,.mat-tab-group.mat-warn.mat-background-warn>.mat-tab-link-container .mat-ink-bar,.mat-tab-nav-bar.mat-warn.mat-background-warn>.mat-tab-header .mat-ink-bar,.mat-tab-nav-bar.mat-warn.mat-background-warn>.mat-tab-link-container .mat-ink-bar{background-color:#fff}.mat-tab-group.mat-background-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-group.mat-background-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-group.mat-background-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-group.mat-background-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-background-primary .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-background-primary .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-background-primary .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-background-primary .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled){background-color:rgba(197,202,233,.3)}.mat-tab-group.mat-background-primary>.mat-tab-header,.mat-tab-group.mat-background-primary>.mat-tab-link-container,.mat-tab-group.mat-background-primary>.mat-tab-header-pagination,.mat-tab-nav-bar.mat-background-primary>.mat-tab-header,.mat-tab-nav-bar.mat-background-primary>.mat-tab-link-container,.mat-tab-nav-bar.mat-background-primary>.mat-tab-header-pagination{background-color:#3f51b5}.mat-tab-group.mat-background-primary>.mat-tab-header .mat-tab-label,.mat-tab-group.mat-background-primary>.mat-tab-link-container .mat-tab-link,.mat-tab-nav-bar.mat-background-primary>.mat-tab-header .mat-tab-label,.mat-tab-nav-bar.mat-background-primary>.mat-tab-link-container .mat-tab-link{color:#fff}.mat-tab-group.mat-background-primary>.mat-tab-header .mat-tab-label.mat-tab-disabled,.mat-tab-group.mat-background-primary>.mat-tab-link-container .mat-tab-link.mat-tab-disabled,.mat-tab-nav-bar.mat-background-primary>.mat-tab-header .mat-tab-label.mat-tab-disabled,.mat-tab-nav-bar.mat-background-primary>.mat-tab-link-container .mat-tab-link.mat-tab-disabled{color:rgba(255,255,255,.4)}.mat-tab-group.mat-background-primary>.mat-tab-header .mat-tab-header-pagination-chevron,.mat-tab-group.mat-background-primary>.mat-tab-header-pagination .mat-tab-header-pagination-chevron,.mat-tab-group.mat-background-primary>.mat-tab-link-container .mat-focus-indicator::before,.mat-tab-group.mat-background-primary>.mat-tab-header .mat-focus-indicator::before,.mat-tab-nav-bar.mat-background-primary>.mat-tab-header .mat-tab-header-pagination-chevron,.mat-tab-nav-bar.mat-background-primary>.mat-tab-header-pagination .mat-tab-header-pagination-chevron,.mat-tab-nav-bar.mat-background-primary>.mat-tab-link-container .mat-focus-indicator::before,.mat-tab-nav-bar.mat-background-primary>.mat-tab-header .mat-focus-indicator::before{border-color:#fff}.mat-tab-group.mat-background-primary>.mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,.mat-tab-group.mat-background-primary>.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,.mat-tab-nav-bar.mat-background-primary>.mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,.mat-tab-nav-bar.mat-background-primary>.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron{border-color:#fff;opacity:.4}.mat-tab-group.mat-background-primary>.mat-tab-header .mat-ripple-element,.mat-tab-group.mat-background-primary>.mat-tab-link-container .mat-ripple-element,.mat-tab-group.mat-background-primary>.mat-tab-header-pagination .mat-ripple-element,.mat-tab-nav-bar.mat-background-primary>.mat-tab-header .mat-ripple-element,.mat-tab-nav-bar.mat-background-primary>.mat-tab-link-container .mat-ripple-element,.mat-tab-nav-bar.mat-background-primary>.mat-tab-header-pagination .mat-ripple-element{background-color:#fff;opacity:.12}.mat-tab-group.mat-background-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-group.mat-background-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-group.mat-background-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-group.mat-background-accent .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-background-accent .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-background-accent .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-background-accent .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-background-accent .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled){background-color:rgba(255,128,171,.3)}.mat-tab-group.mat-background-accent>.mat-tab-header,.mat-tab-group.mat-background-accent>.mat-tab-link-container,.mat-tab-group.mat-background-accent>.mat-tab-header-pagination,.mat-tab-nav-bar.mat-background-accent>.mat-tab-header,.mat-tab-nav-bar.mat-background-accent>.mat-tab-link-container,.mat-tab-nav-bar.mat-background-accent>.mat-tab-header-pagination{background-color:#ff4081}.mat-tab-group.mat-background-accent>.mat-tab-header .mat-tab-label,.mat-tab-group.mat-background-accent>.mat-tab-link-container .mat-tab-link,.mat-tab-nav-bar.mat-background-accent>.mat-tab-header .mat-tab-label,.mat-tab-nav-bar.mat-background-accent>.mat-tab-link-container .mat-tab-link{color:#fff}.mat-tab-group.mat-background-accent>.mat-tab-header .mat-tab-label.mat-tab-disabled,.mat-tab-group.mat-background-accent>.mat-tab-link-container .mat-tab-link.mat-tab-disabled,.mat-tab-nav-bar.mat-background-accent>.mat-tab-header .mat-tab-label.mat-tab-disabled,.mat-tab-nav-bar.mat-background-accent>.mat-tab-link-container .mat-tab-link.mat-tab-disabled{color:rgba(255,255,255,.4)}.mat-tab-group.mat-background-accent>.mat-tab-header .mat-tab-header-pagination-chevron,.mat-tab-group.mat-background-accent>.mat-tab-header-pagination .mat-tab-header-pagination-chevron,.mat-tab-group.mat-background-accent>.mat-tab-link-container .mat-focus-indicator::before,.mat-tab-group.mat-background-accent>.mat-tab-header .mat-focus-indicator::before,.mat-tab-nav-bar.mat-background-accent>.mat-tab-header .mat-tab-header-pagination-chevron,.mat-tab-nav-bar.mat-background-accent>.mat-tab-header-pagination .mat-tab-header-pagination-chevron,.mat-tab-nav-bar.mat-background-accent>.mat-tab-link-container .mat-focus-indicator::before,.mat-tab-nav-bar.mat-background-accent>.mat-tab-header .mat-focus-indicator::before{border-color:#fff}.mat-tab-group.mat-background-accent>.mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,.mat-tab-group.mat-background-accent>.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,.mat-tab-nav-bar.mat-background-accent>.mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,.mat-tab-nav-bar.mat-background-accent>.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron{border-color:#fff;opacity:.4}.mat-tab-group.mat-background-accent>.mat-tab-header .mat-ripple-element,.mat-tab-group.mat-background-accent>.mat-tab-link-container .mat-ripple-element,.mat-tab-group.mat-background-accent>.mat-tab-header-pagination .mat-ripple-element,.mat-tab-nav-bar.mat-background-accent>.mat-tab-header .mat-ripple-element,.mat-tab-nav-bar.mat-background-accent>.mat-tab-link-container .mat-ripple-element,.mat-tab-nav-bar.mat-background-accent>.mat-tab-header-pagination .mat-ripple-element{background-color:#fff;opacity:.12}.mat-tab-group.mat-background-warn .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-group.mat-background-warn .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-group.mat-background-warn .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-group.mat-background-warn .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-background-warn .mat-tab-label.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-background-warn .mat-tab-label.cdk-program-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-background-warn .mat-tab-link.cdk-keyboard-focused:not(.mat-tab-disabled),.mat-tab-nav-bar.mat-background-warn .mat-tab-link.cdk-program-focused:not(.mat-tab-disabled){background-color:rgba(255,205,210,.3)}.mat-tab-group.mat-background-warn>.mat-tab-header,.mat-tab-group.mat-background-warn>.mat-tab-link-container,.mat-tab-group.mat-background-warn>.mat-tab-header-pagination,.mat-tab-nav-bar.mat-background-warn>.mat-tab-header,.mat-tab-nav-bar.mat-background-warn>.mat-tab-link-container,.mat-tab-nav-bar.mat-background-warn>.mat-tab-header-pagination{background-color:#f44336}.mat-tab-group.mat-background-warn>.mat-tab-header .mat-tab-label,.mat-tab-group.mat-background-warn>.mat-tab-link-container .mat-tab-link,.mat-tab-nav-bar.mat-background-warn>.mat-tab-header .mat-tab-label,.mat-tab-nav-bar.mat-background-warn>.mat-tab-link-container .mat-tab-link{color:#fff}.mat-tab-group.mat-background-warn>.mat-tab-header .mat-tab-label.mat-tab-disabled,.mat-tab-group.mat-background-warn>.mat-tab-link-container .mat-tab-link.mat-tab-disabled,.mat-tab-nav-bar.mat-background-warn>.mat-tab-header .mat-tab-label.mat-tab-disabled,.mat-tab-nav-bar.mat-background-warn>.mat-tab-link-container .mat-tab-link.mat-tab-disabled{color:rgba(255,255,255,.4)}.mat-tab-group.mat-background-warn>.mat-tab-header .mat-tab-header-pagination-chevron,.mat-tab-group.mat-background-warn>.mat-tab-header-pagination .mat-tab-header-pagination-chevron,.mat-tab-group.mat-background-warn>.mat-tab-link-container .mat-focus-indicator::before,.mat-tab-group.mat-background-warn>.mat-tab-header .mat-focus-indicator::before,.mat-tab-nav-bar.mat-background-warn>.mat-tab-header .mat-tab-header-pagination-chevron,.mat-tab-nav-bar.mat-background-warn>.mat-tab-header-pagination .mat-tab-header-pagination-chevron,.mat-tab-nav-bar.mat-background-warn>.mat-tab-link-container .mat-focus-indicator::before,.mat-tab-nav-bar.mat-background-warn>.mat-tab-header .mat-focus-indicator::before{border-color:#fff}.mat-tab-group.mat-background-warn>.mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,.mat-tab-group.mat-background-warn>.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,.mat-tab-nav-bar.mat-background-warn>.mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,.mat-tab-nav-bar.mat-background-warn>.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron{border-color:#fff;opacity:.4}.mat-tab-group.mat-background-warn>.mat-tab-header .mat-ripple-element,.mat-tab-group.mat-background-warn>.mat-tab-link-container .mat-ripple-element,.mat-tab-group.mat-background-warn>.mat-tab-header-pagination .mat-ripple-element,.mat-tab-nav-bar.mat-background-warn>.mat-tab-header .mat-ripple-element,.mat-tab-nav-bar.mat-background-warn>.mat-tab-link-container .mat-ripple-element,.mat-tab-nav-bar.mat-background-warn>.mat-tab-header-pagination .mat-ripple-element{background-color:#fff;opacity:.12}.mat-toolbar{background:#f5f5f5;color:rgba(0,0,0,.87)}.mat-toolbar.mat-primary{background:#3f51b5;color:#fff}.mat-toolbar.mat-accent{background:#ff4081;color:#fff}.mat-toolbar.mat-warn{background:#f44336;color:#fff}.mat-toolbar .mat-form-field-underline,.mat-toolbar .mat-form-field-ripple,.mat-toolbar .mat-focused .mat-form-field-ripple{background-color:currentColor}.mat-toolbar .mat-form-field-label,.mat-toolbar .mat-focused .mat-form-field-label,.mat-toolbar .mat-select-value,.mat-toolbar .mat-select-arrow,.mat-toolbar .mat-form-field.mat-focused .mat-select-arrow{color:inherit}.mat-toolbar .mat-input-element{caret-color:currentColor}.mat-toolbar-multiple-rows{min-height:64px}.mat-toolbar-row,.mat-toolbar-single-row{height:64px}@media(max-width: 599px){.mat-toolbar-multiple-rows{min-height:56px}.mat-toolbar-row,.mat-toolbar-single-row{height:56px}}.mat-tooltip{background:rgba(97,97,97,.9)}.mat-tree{background:#fff}.mat-tree-node,.mat-nested-tree-node{color:rgba(0,0,0,.87)}.mat-tree-node{min-height:48px}.mat-snack-bar-container{color:rgba(255,255,255,.7);background:#323232;box-shadow:0px 3px 5px -1px rgba(0, 0, 0, 0.2),0px 6px 10px 0px rgba(0, 0, 0, 0.14),0px 1px 18px 0px rgba(0, 0, 0, 0.12)}.mat-simple-snackbar-action{color:#ff4081} /*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/theme/variables.scss ***! \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ @charset "UTF-8"; /* Declare variables before making them global. dart-sass doesn't allow to declare variable with !global. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * This mixin generates keyfames. * Because of all keyframes can't be scoped, * we need to puts unique name in each btn-pulse call. */ /* According to the specification (https://www.w3.org/TR/css-scoping-1/#host-selector) :host and :host-context are pseudo-classes. So we assume they could be combined, like other pseudo-classes, even same ones. For example: ':nth-of-type(2n):nth-of-type(even)'. Ideal solution would be to prepend any selector with :host-context([dir=rtl]). Then nebular components will behave as an html element and respond to [dir] attribute on any level, so direction could be overridden on any component level. Implementation code: @mixin nb-rtl() { // add # to scss interpolation statement. // it works in comments and we can't use it here @at-root {selector-append(':host-context([dir=rtl])', &)} { @content; } } And when we call it somewhere: :host { .some-class { @include nb-rtl() { ... } } } :host-context(...) { .some-class { @include nb-rtl() { ... } } } Result will look like: :host-context([dir=rtl]):host .some-class { ... } :host-context([dir=rtl]):host-context(...) .some-class { ... } * Side note: :host-context():host selector are valid. https://lists.w3.org/Archives/Public/www-style/2015Feb/0305.html :host-context([dir=rtl]):host-context(...) should match any permutation, so order is not important. * Currently, there're two problems with this approach: First, is that we can't combine :host, :host-context. Angular bugs #14349, #19199. For the moment of writing, the only possible way is: :host { :host-context(...) { ... } } It doesn't work for us because mixin could be called somewhere deeper, like: :host { p { @include nb-rtl() { ... } } } We are not able to go up to :host level to place content passed to mixin. The second problem is that we only can be sure that we appending :host-context([dir=rtl]) to another :host/:host-context pseudo-class when called in theme files (*.theme.scss). * Side note: Currently, nb-install-component uses another approach where :host prepended with the theme name (https://github.com/angular/angular/blob/5b96078624b0a4760f2dbcf6fdf0bd62791be5bb/packages/compiler/src/shadow_css.ts#L441), but it was made to be able to use current realization of rtl and it can be rewritten back to :host-context($theme) once we will be able to use multiple shadow selectors. * But when it's called in *.component.scss we can't be sure, that selector starts with :host/:host-context, because angular allows omitting pseudo-classes if we don't need to style :host component itself. We can break such selectors, by just appending :host-context([dir=rtl]) to them. *** Possible solution check if we in theme by some theme variables and if so append, otherwise nest like @at-root :host-context([dir=rtl]) { // add # to scss interpolation statement. // it works in comments and we can't use it here {&} { @content; } } What if :host specified? Can we add space in :host-context(...) :host? Or maybe add :host selector anyway? If multiple :host selectors are allowed *** Problems with the current approach. 1. Direction can be applied only on document level, because mixin prepends theme class, which placed on the body. 2. *.component.scss styles should be in :host selector. Otherwise angular will add host attribute to [dir=rtl] attribute as well. General problems. Ltr is default document direction, but for proper work of nb-ltr (means ltr only), [dir=ltr] should be specified at least somewhere. ':not([dir=rtl]' not applicable here, because it's satisfy any parent, that don't have [dir=rtl] attribute. Previous approach was to use single rtl mixin and reset ltr properties to initial value. But sometimes it's hard to find, what the previous value should be. And such mixin call looks too verbose. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /* Declare variables before making them global. dart-sass doesn't allow to declare variable with !global. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * Sass map contains a list of all Theme variables and also their mappings into Component variables * A theme consists of a list of colors, backgrounds, borders, text styles and supporting variables. */ /*! * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ .visually-hidden { /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } /* Declare variables before making them global. dart-sass doesn't allow to declare variable with !global. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * This mixin generates keyfames. * Because of all keyframes can't be scoped, * we need to puts unique name in each btn-pulse call. */ /* According to the specification (https://www.w3.org/TR/css-scoping-1/#host-selector) :host and :host-context are pseudo-classes. So we assume they could be combined, like other pseudo-classes, even same ones. For example: ':nth-of-type(2n):nth-of-type(even)'. Ideal solution would be to prepend any selector with :host-context([dir=rtl]). Then nebular components will behave as an html element and respond to [dir] attribute on any level, so direction could be overridden on any component level. Implementation code: @mixin nb-rtl() { // add # to scss interpolation statement. // it works in comments and we can't use it here @at-root {selector-append(':host-context([dir=rtl])', &)} { @content; } } And when we call it somewhere: :host { .some-class { @include nb-rtl() { ... } } } :host-context(...) { .some-class { @include nb-rtl() { ... } } } Result will look like: :host-context([dir=rtl]):host .some-class { ... } :host-context([dir=rtl]):host-context(...) .some-class { ... } * Side note: :host-context():host selector are valid. https://lists.w3.org/Archives/Public/www-style/2015Feb/0305.html :host-context([dir=rtl]):host-context(...) should match any permutation, so order is not important. * Currently, there're two problems with this approach: First, is that we can't combine :host, :host-context. Angular bugs #14349, #19199. For the moment of writing, the only possible way is: :host { :host-context(...) { ... } } It doesn't work for us because mixin could be called somewhere deeper, like: :host { p { @include nb-rtl() { ... } } } We are not able to go up to :host level to place content passed to mixin. The second problem is that we only can be sure that we appending :host-context([dir=rtl]) to another :host/:host-context pseudo-class when called in theme files (*.theme.scss). * Side note: Currently, nb-install-component uses another approach where :host prepended with the theme name (https://github.com/angular/angular/blob/5b96078624b0a4760f2dbcf6fdf0bd62791be5bb/packages/compiler/src/shadow_css.ts#L441), but it was made to be able to use current realization of rtl and it can be rewritten back to :host-context($theme) once we will be able to use multiple shadow selectors. * But when it's called in *.component.scss we can't be sure, that selector starts with :host/:host-context, because angular allows omitting pseudo-classes if we don't need to style :host component itself. We can break such selectors, by just appending :host-context([dir=rtl]) to them. *** Possible solution check if we in theme by some theme variables and if so append, otherwise nest like @at-root :host-context([dir=rtl]) { // add # to scss interpolation statement. // it works in comments and we can't use it here {&} { @content; } } What if :host specified? Can we add space in :host-context(...) :host? Or maybe add :host selector anyway? If multiple :host selectors are allowed *** Problems with the current approach. 1. Direction can be applied only on document level, because mixin prepends theme class, which placed on the body. 2. *.component.scss styles should be in :host selector. Otherwise angular will add host attribute to [dir=rtl] attribute as well. General problems. Ltr is default document direction, but for proper work of nb-ltr (means ltr only), [dir=ltr] should be specified at least somewhere. ':not([dir=rtl]' not applicable here, because it's satisfy any parent, that don't have [dir=rtl] attribute. Previous approach was to use single rtl mixin and reset ltr properties to initial value. But sometimes it's hard to find, what the previous value should be. And such mixin call looks too verbose. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ .cdk-overlay-container, .cdk-global-overlay-wrapper { pointer-events: none; top: 0; left: 0; height: 100%; width: 100%; } .cdk-overlay-container { position: fixed; z-index: 1000; } .cdk-overlay-container:empty { display: none; } .cdk-global-overlay-wrapper { display: flex; position: absolute; z-index: 1000; } .cdk-overlay-pane { position: absolute; pointer-events: auto; box-sizing: border-box; z-index: 1000; display: flex; max-width: 100%; max-height: 100%; } .cdk-overlay-backdrop { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1000; pointer-events: auto; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); opacity: 0; } .cdk-overlay-backdrop.cdk-overlay-backdrop-showing { opacity: 1; } .cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing { opacity: 0.6; } .cdk-overlay-dark-backdrop { background: rgba(0, 0, 0, 0.32); } .cdk-overlay-transparent-backdrop { transition: visibility 1ms linear, opacity 1ms linear; visibility: hidden; opacity: 1; } .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing { opacity: 0; visibility: visible; } .cdk-overlay-backdrop-noop-animation { transition: none; } .cdk-overlay-connected-position-bounding-box { position: absolute; z-index: 1000; display: flex; flex-direction: column; min-width: 1px; min-height: 1px; } .cdk-global-scrollblock { position: fixed; width: 100%; overflow-y: scroll; } /** * In case when Nebular Layout custom scroll `withScroll` mode is enabled * we need to disable default CDK scroll blocker (@link NbBlockScrollStrategyAdapter) on HTML element * so that it won't add additional positioning. */ .nb-global-scrollblock { position: static; width: auto; overflow: hidden; } /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /* * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /* * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /* * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /*! * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /* * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /*! * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /* * Normalization of HTML elements, manually forked from Normalize.css to remove * styles targeting irrelevant browsers while applying new styles. * * Normalize is licensed MIT. https://github.com/necolas/normalize.css */ html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } html, body { margin: 0; padding: 0; } /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type=checkbox], [type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type=search] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ nb-layout .scrollable-container { scrollbar-face-color: var(--layout-scrollbar-color); scrollbar-track-color: var(--layout-scrollbar-background-color); } nb-layout .scrollable-container::-webkit-scrollbar { width: var(--layout-scrollbar-width); height: var(--layout-scrollbar-width); } nb-layout .scrollable-container::-webkit-scrollbar-thumb { background: var(--layout-scrollbar-color); cursor: pointer; border-radius: calc(var(--layout-scrollbar-width) * 0.5); } nb-layout .scrollable-container::-webkit-scrollbar-track { background: var(--layout-scrollbar-background-color); } nb-layout .scrollable-container::-webkit-scrollbar-corner { background: var(--layout-scrollbar-background-color); } nb-layout.with-scroll .scrollable-container { overflow: auto; height: 100vh; display: block; } @media (max-width: 767.98px) { nb-layout.with-scroll .scrollable-container { overflow-y: scroll; -webkit-overflow-scrolling: touch; } } .layout { min-width: var(--layout-window-mode-min-width); } nb-layout.window-mode { background: var(--layout-window-mode-background-color); display: block; } nb-layout.window-mode .scrollable-container { max-width: 1920px; margin: 0 auto; } nb-layout.window-mode .layout nb-layout-header { max-width: 1920px; margin-left: auto; margin-right: auto; width: 100%; } nb-layout.window-mode .layout nb-layout-header nav { max-width: 1920px; margin: 0 auto; } @media screen and (min-width: 1940px) { nb-layout.window-mode { padding-top: calc(var(--layout-window-mode-padding-top) * 0.25); } nb-layout.window-mode nb-layout-header.fixed { top: calc(var(--layout-window-mode-padding-top) * 0.25); } nb-layout.window-mode nb-layout-header.fixed ~ .layout-container nb-sidebar .main-container-fixed { height: calc(100vh - calc(var(--layout-window-mode-padding-top) * 0.25) - var(--header-height)); top: calc(calc(var(--layout-window-mode-padding-top) * 0.25) + var(--header-height)); } nb-layout.window-mode nb-sidebar.fixed { left: calc((100vw - 1920px) / 2); } nb-layout.window-mode .layout .layout-container nb-sidebar.fixed.right { right: calc((100vw - 1920px) / 2); } nb-layout.window-mode .layout .layout-container nb-sidebar.fixed { top: calc(var(--header-height) + calc(var(--layout-window-mode-padding-top) * 0.25)); } nb-layout.window-mode .scrollable-container { height: calc(100vh - calc(var(--layout-window-mode-padding-top) * 0.25)); box-shadow: var(--layout-window-shadow); } nb-layout.window-mode nb-layout.with-scroll .scrollable-container { height: calc(100vh - calc(var(--layout-window-mode-padding-top) * 0.25)); } } @media screen and (min-width: 2070px) { nb-layout.window-mode { padding-top: calc(var(--layout-window-mode-padding-top) * 0.5); } nb-layout.window-mode nb-layout-header.fixed { top: calc(var(--layout-window-mode-padding-top) * 0.5); } nb-layout.window-mode nb-layout-header.fixed ~ .layout-container nb-sidebar .main-container-fixed { height: calc(100vh - calc(var(--layout-window-mode-padding-top) * 0.5) - var(--header-height)); top: calc(calc(var(--layout-window-mode-padding-top) * 0.5) + var(--header-height)); } nb-layout.window-mode nb-sidebar.fixed { left: calc((100vw - 1920px) / 2); } nb-layout.window-mode .layout .layout-container nb-sidebar.fixed.right { right: calc((100vw - 1920px) / 2); } nb-layout.window-mode .layout .layout-container nb-sidebar.fixed { top: calc(var(--header-height) + calc(var(--layout-window-mode-padding-top) * 0.5)); } nb-layout.window-mode .scrollable-container { height: calc(100vh - calc(var(--layout-window-mode-padding-top) * 0.5)); box-shadow: var(--layout-window-shadow); } nb-layout.window-mode nb-layout.with-scroll .scrollable-container { height: calc(100vh - calc(var(--layout-window-mode-padding-top) * 0.5)); } } @media screen and (min-width: 2220px) { nb-layout.window-mode { padding-top: var(--layout-window-mode-padding-top); } nb-layout.window-mode nb-layout-header.fixed { top: var(--layout-window-mode-padding-top); } nb-layout.window-mode nb-layout-header.fixed ~ .layout-container nb-sidebar .main-container-fixed { height: calc(100vh - var(--layout-window-mode-padding-top) - var(--header-height)); top: calc(var(--layout-window-mode-padding-top) + var(--header-height)); } nb-layout.window-mode nb-sidebar.fixed { left: calc((100vw - 1920px) / 2); } nb-layout.window-mode .layout .layout-container nb-sidebar.fixed.right { right: calc((100vw - 1920px) / 2); } nb-layout.window-mode .layout .layout-container nb-sidebar.fixed { top: calc(var(--header-height) + var(--layout-window-mode-padding-top)); } nb-layout.window-mode .scrollable-container { height: calc(100vh - var(--layout-window-mode-padding-top)); box-shadow: var(--layout-window-shadow); } nb-layout.window-mode nb-layout.with-scroll .scrollable-container { height: calc(100vh - var(--layout-window-mode-padding-top)); } } nb-layout .layout { background-color: var(--layout-background-color); color: var(--layout-text-color); font-family: var(--layout-text-font-family); font-size: var(--layout-text-font-size); font-weight: var(--layout-text-font-weight); line-height: var(--layout-text-line-height); min-height: var(--layout-min-height); } nb-layout .layout .layout-container nb-sidebar.fixed, nb-layout .layout .layout-container nb-sidebar .main-container-fixed { top: var(--header-height); } nb-layout .layout .layout-container .content nb-layout-footer { box-shadow: var(--footer-shadow); } nb-layout .layout .layout-container .content nb-layout-footer nav { background-color: var(--footer-background-color); border-top: var(--footer-divider-width) var(--footer-divider-style) var(--footer-divider-color); color: var(--footer-text-color); font-family: var(--footer-text-font-family); font-size: var(--footer-text-font-size); font-weight: var(--footer-text-font-weight); line-height: var(--footer-text-line-height); padding: var(--footer-padding); } nb-layout .layout .layout-container .content nb-layout-footer nav a { color: var(--footer-text-highlight-color); } nb-layout .layout .layout-container .content nb-layout-footer nav a:focus, nb-layout .layout .layout-container .content nb-layout-footer nav a:active, nb-layout .layout .layout-container .content nb-layout-footer nav a:hover { color: var(--footer-text-highlight-color); } nb-layout .layout .layout-container .content.center { width: var(--layout-content-width); flex: 0 100 var(--layout-content-width) !important; } nb-layout .layout .layout-container .content .columns nb-layout-column { padding: var(--layout-padding); } @media (max-width: 991.98px) { nb-layout .layout .layout-container .content .columns nb-layout-column { padding: var(--layout-medium-padding); } } @media (max-width: 767.98px) { nb-layout .layout .layout-container .content .columns nb-layout-column { padding: var(--layout-small-padding); } } nb-layout-header { background-color: var(--header-background-color); color: var(--header-text-color); font-family: var(--header-text-font-family); font-size: var(--header-text-font-size); font-weight: var(--header-text-font-weight); line-height: var(--header-text-line-height); } nb-layout-header nav { color: var(--header-text-color); box-shadow: var(--header-shadow); height: var(--header-height); padding: var(--header-padding); } nb-layout-header nav a { color: var(--header-text-color); } nb-layout-header nav a:focus, nb-layout-header nav a:active, nb-layout-header nav a:hover { color: var(--header-text-color); } nb-layout-header ~ .layout-container { min-height: calc(var(--layout-min-height) - var(--header-height)); } nb-layout-header.fixed ~ .layout-container { padding-top: var(--header-height); min-height: var(--layout-min-height); } nb-layout-header.fixed ~ .layout-container nb-sidebar .main-container { height: calc(var(--sidebar-height) - var(--header-height)); } nb-layout.with-subheader nb-sidebar .main-container { box-shadow: none; } nb-sidebar { background-color: var(--sidebar-background-color); box-shadow: var(--sidebar-shadow); color: var(--sidebar-text-color); font-family: var(--sidebar-text-font-family); font-size: var(--sidebar-text-font-size); font-weight: var(--sidebar-text-font-weight); line-height: var(--sidebar-text-line-height); width: var(--sidebar-width); } nb-sidebar .main-container { height: var(--sidebar-height); width: var(--sidebar-width); } nb-sidebar .scrollable { padding: var(--sidebar-padding); position: relative; -webkit-transform: translate3d(0, 0, 0); scrollbar-face-color: var(--sidebar-scrollbar-color); scrollbar-track-color: var(--sidebar-scrollbar-background-color); } @media (max-width: 767.98px) { nb-sidebar .scrollable { overflow-y: scroll; -webkit-overflow-scrolling: touch; } } nb-sidebar .scrollable::-webkit-scrollbar { width: var(--sidebar-scrollbar-width); height: var(--sidebar-scrollbar-width); } nb-sidebar .scrollable::-webkit-scrollbar-thumb { background: var(--sidebar-scrollbar-color); cursor: pointer; border-radius: calc(var(--sidebar-scrollbar-width) * 0.5); } nb-sidebar .scrollable::-webkit-scrollbar-track { background: var(--sidebar-scrollbar-background-color); } nb-sidebar .scrollable::-webkit-scrollbar-corner { background: var(--sidebar-scrollbar-background-color); } nb-sidebar.collapsed { width: 0; padding: 0; } nb-sidebar.collapsed .main-container { width: 0; padding: 0; } nb-sidebar.collapsed .scrollable { width: 0; padding: 0; overflow: hidden; } nb-sidebar.collapsed nb-sidebar-header, nb-sidebar.collapsed nb-sidebar-footer { width: 0; padding: 0; overflow: hidden; } nb-sidebar.compacted { width: var(--sidebar-width-compact); } nb-sidebar.compacted .main-container { width: var(--sidebar-width-compact); } nb-sidebar.compacted nb-menu { width: var(--sidebar-width-compact); } nb-sidebar.compacted nb-menu .menu-item a.active { position: relative; } nb-sidebar.compacted nb-menu .menu-item a.active::before { position: absolute; content: ""; top: 0; height: 100%; width: 4px; background: var(--sidebar-menu-item-highlight-color); } [dir=ltr] nb-sidebar.compacted nb-menu .menu-item a.active::before { left: 0; } [dir=rtl] nb-sidebar.compacted nb-menu .menu-item a.active::before { right: 0; } nb-sidebar.compacted nb-menu > .menu-items > .menu-item > a span, nb-sidebar.compacted nb-menu > .menu-items > .menu-item > a nb-badge, nb-sidebar.compacted nb-menu > .menu-items > .menu-item > a .expand-state { display: none; } nb-sidebar.compacted nb-menu .menu-items > .menu-item { transition: border-color 1s ease; } nb-sidebar.compacted nb-menu .menu-items > .menu-item.menu-group { display: block; color: transparent; width: 0; padding: 0; overflow: hidden; } nb-sidebar.compacted nb-menu .menu-items > .menu-item i { margin-right: 0; } nb-sidebar.compacted nb-menu .menu-items > .menu-item a { justify-content: center; } nb-sidebar.compacted nb-menu .menu-items > .menu-item > .expanded { display: none; } nb-sidebar.compacted.left.fixed ~ .content { margin-left: var(--sidebar-width-compact); } nb-sidebar.compacted.fixed.right ~ .content { margin-left: 0; margin-right: var(--sidebar-width-compact); } nb-sidebar.compacted.left.fixed ~ .content.center { padding-left: var(--sidebar-width-compact); } nb-sidebar.compacted.fixed.right ~ .content.center { padding-left: 0; padding-right: var(--sidebar-width-compact); } [dir=ltr] nb-sidebar.compacted.start.fixed ~ .content { margin-left: var(--sidebar-width-compact); } [dir=rtl] nb-sidebar.compacted.start.fixed ~ .content { margin-right: var(--sidebar-width-compact); } [dir=ltr] nb-sidebar.compacted.fixed.end ~ .content { margin-right: var(--sidebar-width-compact); } [dir=rtl] nb-sidebar.compacted.fixed.end ~ .content { margin-left: var(--sidebar-width-compact); } [dir=ltr] nb-sidebar.compacted.start.fixed ~ .content.center { padding-left: var(--sidebar-width-compact); } [dir=rtl] nb-sidebar.compacted.start.fixed ~ .content.center { padding-right: var(--sidebar-width-compact); } [dir=ltr] nb-sidebar.compacted.fixed.end ~ .content.center { padding-right: var(--sidebar-width-compact); } [dir=rtl] nb-sidebar.compacted.fixed.end ~ .content.center { padding-left: var(--sidebar-width-compact); } nb-sidebar.fixed.left.collapsed + .content, nb-sidebar.fixed.start.collapsed + .content { margin-left: 0; } nb-sidebar.fixed.right.collapsed + .content, nb-sidebar.fixed.end.collapsed + .content { margin-right: 0; } nb-sidebar.expanded { width: var(--sidebar-width); } nb-sidebar.expanded > .scrollable { width: var(--sidebar-width); } nb-sidebar nb-sidebar-header { padding: var(--sidebar-padding); height: var(--sidebar-header-height); } nb-sidebar nb-sidebar-footer { padding: var(--sidebar-padding); height: var(--sidebar-footer-height); } nb-sidebar nb-menu { margin: 0 calc(var(--sidebar-padding) * -1) calc(var(--sidebar-padding) * -1); } nb-calendar-view-mode [nbButton].appearance-ghost.status-basic, nb-calendar-view-mode .appearance-ghost.status-basic[nbButtonToggle], nb-calendar-view-mode [nbButton].appearance-ghost.status-basic:hover, nb-calendar-view-mode [nbButton].appearance-ghost.status-basic:focus, nb-calendar-view-mode [nbButton].appearance-ghost.status-basic:active, nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic, nb-calendar-pageable-navigation .appearance-ghost.status-basic[nbButtonToggle], nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic:hover, nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic:focus, nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic:active { color: var(--calendar-navigation-text-color); font-family: var(--calendar-navigation-text-font-family); font-size: var(--calendar-navigation-title-text-font-size); font-weight: var(--calendar-navigation-title-text-font-weight); line-height: var(--calendar-navigation-title-text-line-height); } nb-calendar-view-mode [nbButton].appearance-ghost.status-basic:focus, nb-calendar-view-mode .appearance-ghost.status-basic[nbButtonToggle]:focus, nb-calendar-view-mode [nbButton].appearance-ghost.status-basic:focus:not(:hover):not(:active), nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic:focus, nb-calendar-pageable-navigation .appearance-ghost.status-basic[nbButtonToggle]:focus, nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic:focus:not(:hover):not(:active) { box-shadow: none; } [dir=ltr] nb-calendar-pageable-navigation { margin-left: auto; } [dir=rtl] nb-calendar-pageable-navigation { margin-right: auto; } nb-calendar-picker { display: block; padding-top: var(--calendar-picker-padding-top); padding-bottom: var(--calendar-picker-padding-bottom); } [dir=ltr] nb-calendar-picker { padding-right: var(--calendar-picker-padding-end); padding-left: var(--calendar-picker-padding-start); } [dir=rtl] nb-calendar-picker { padding-right: var(--calendar-picker-padding-start); padding-left: var(--calendar-picker-padding-end); } nb-calendar-days-names { background: var(--calendar-weekday-background); border-top: var(--calendar-weekday-divider-width) solid var(--calendar-weekday-divider-color); border-bottom: var(--calendar-weekday-divider-width) solid var(--calendar-weekday-divider-color); } [dir=ltr] nb-calendar-days-names { padding-left: var(--calendar-picker-padding-start); padding-right: var(--calendar-picker-padding-end); } [dir=rtl] nb-calendar-days-names { padding-left: var(--calendar-picker-padding-end); padding-right: var(--calendar-picker-padding-start); } nb-calendar-days-names .day { width: var(--calendar-weekday-width); height: var(--calendar-weekday-height); color: var(--calendar-weekday-text-color); font-size: var(--calendar-weekday-text-font-size); font-weight: var(--calendar-weekday-text-font-weight); line-height: var(--calendar-weekday-text-line-height); } nb-calendar-days-names .day.holiday { color: var(--calendar-weekday-holiday-text-color); } nb-calendar-days-names.size-large .day { width: var(--calendar-weekday-large-width); height: var(--calendar-weekday-large-height); } nb-calendar-week-numbers { background: var(--calendar-weeknumber-background); font-size: var(--calendar-weeknumber-text-font-size); font-weight: var(--calendar-weeknumber-text-font-weight); line-height: var(--calendar-weeknumber-text-line-height); color: var(--calendar-weeknumber-text-color); padding-bottom: var(--calendar-picker-padding-bottom); } nb-calendar-week-numbers .sign-container { display: flex; flex-direction: column; border-top: var(--calendar-weeknumber-divider-width) solid var(--calendar-weeknumber-divider-color); border-bottom: var(--calendar-weeknumber-divider-width) solid var(--calendar-weeknumber-divider-color); margin-bottom: var(--calendar-picker-padding-top); } nb-calendar-week-numbers .sign, nb-calendar-week-numbers .week-number { display: flex; align-items: center; justify-content: center; height: var(--calendar-weeknumber-height); width: var(--calendar-weeknumber-width); } nb-calendar-week-numbers.size-large .sign, nb-calendar-week-numbers.size-large .week-number { height: var(--calendar-weeknumber-large-height); width: var(--calendar-weeknumber-large-width); } [dir=ltr] nb-calendar-day-picker nb-calendar-week-numbers { border-right: var(--calendar-weeknumber-divider-width) solid var(--calendar-weeknumber-divider-color); } [dir=rtl] nb-calendar-day-picker nb-calendar-week-numbers { border-left: var(--calendar-weeknumber-divider-width) solid var(--calendar-weeknumber-divider-color); } nb-calendar-picker .day-cell { width: var(--calendar-day-cell-width); height: var(--calendar-day-cell-height); } nb-calendar-picker .day-cell.size-large { width: var(--calendar-day-cell-large-width); height: var(--calendar-day-cell-large-height); } nb-calendar-picker .month-cell { width: var(--calendar-month-cell-width); height: var(--calendar-month-cell-height); } nb-calendar-picker .month-cell.size-large { width: var(--calendar-month-cell-large-width); height: var(--calendar-month-cell-large-height); } nb-calendar-picker .year-cell { width: var(--calendar-year-cell-width); height: var(--calendar-year-cell-height); } nb-calendar-picker .year-cell.size-large { width: var(--calendar-year-cell-large-width); height: var(--calendar-year-cell-large-height); } nb-calendar-picker .cell-content { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; border-radius: var(--calendar-border-radius); } nb-calendar-picker .day-cell, nb-calendar-picker .month-cell, nb-calendar-picker .year-cell { display: flex; align-items: center; justify-content: center; font-family: var(--calendar-text-font-family); font-size: var(--calendar-text-font-size); font-weight: var(--calendar-text-font-weight); line-height: var(--calendar-text-line-height); color: var(--calendar-text-color); text-transform: uppercase; cursor: pointer; } nb-calendar-picker .day-cell, nb-calendar-picker .day-cell .cell-content, nb-calendar-picker .month-cell, nb-calendar-picker .month-cell .cell-content, nb-calendar-picker .year-cell, nb-calendar-picker .year-cell .cell-content { transition-duration: 0.15s; transition-property: background-color, border-color, color; transition-timing-function: ease-in; } nb-calendar-picker .day-cell.empty, nb-calendar-picker .day-cell.disabled, nb-calendar-picker .month-cell.empty, nb-calendar-picker .month-cell.disabled, nb-calendar-picker .year-cell.empty, nb-calendar-picker .year-cell.disabled { cursor: default; } nb-calendar-picker .day-cell.bounding-month, nb-calendar-picker .month-cell.bounding-month, nb-calendar-picker .year-cell.bounding-month { color: var(--calendar-cell-inactive-text-color); } nb-calendar-picker .day-cell:not(.disabled):not(.empty):hover .cell-content, nb-calendar-picker .month-cell:not(.disabled):not(.empty):hover .cell-content, nb-calendar-picker .year-cell:not(.disabled):not(.empty):hover .cell-content { background-color: var(--calendar-cell-hover-background-color); border-color: var(--calendar-cell-hover-border-color); color: var(--calendar-cell-hover-text-color); font-size: var(--calendar-cell-hover-text-font-size); font-weight: var(--calendar-cell-hover-text-font-weight); line-height: var(--calendar-cell-hover-text-line-height); } nb-calendar-picker .day-cell:not(.disabled):not(.empty):active .cell-content, nb-calendar-picker .month-cell:not(.disabled):not(.empty):active .cell-content, nb-calendar-picker .year-cell:not(.disabled):not(.empty):active .cell-content { background-color: var(--calendar-cell-active-background-color); border-color: var(--calendar-cell-active-border-color); color: var(--calendar-cell-active-text-color); font-size: var(--calendar-cell-active-text-font-size); font-weight: var(--calendar-cell-active-text-font-weight); line-height: var(--calendar-cell-active-text-line-height); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).today .cell-content, nb-calendar-picker .month-cell:not(.disabled):not(.empty).today .cell-content, nb-calendar-picker .year-cell:not(.disabled):not(.empty).today .cell-content { background-color: var(--calendar-cell-today-background-color); border: 1px solid var(--calendar-cell-today-border-color); color: var(--calendar-cell-today-text-color); font-size: var(--calendar-cell-today-text-font-size); font-weight: var(--calendar-cell-today-text-font-weight); line-height: var(--calendar-cell-today-text-line-height); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).today .cell-content:hover, nb-calendar-picker .month-cell:not(.disabled):not(.empty).today .cell-content:hover, nb-calendar-picker .year-cell:not(.disabled):not(.empty).today .cell-content:hover { background-color: var(--calendar-cell-today-hover-background-color); border-color: var(--calendar-cell-today-hover-border-color); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).today .cell-content:active, nb-calendar-picker .month-cell:not(.disabled):not(.empty).today .cell-content:active, nb-calendar-picker .year-cell:not(.disabled):not(.empty).today .cell-content:active { background-color: var(--calendar-cell-today-active-background-color); border-color: var(--calendar-cell-today-active-border-color); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).selected .cell-content, nb-calendar-picker .month-cell:not(.disabled):not(.empty).selected .cell-content, nb-calendar-picker .year-cell:not(.disabled):not(.empty).selected .cell-content { background-color: var(--calendar-cell-selected-background-color); border-color: var(--calendar-cell-selected-border-color); color: var(--calendar-cell-selected-text-color); font-size: var(--calendar-cell-selected-text-font-size); font-weight: var(--calendar-cell-selected-text-font-weight); line-height: var(--calendar-cell-selected-text-line-height); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).selected .cell-content:hover, nb-calendar-picker .month-cell:not(.disabled):not(.empty).selected .cell-content:hover, nb-calendar-picker .year-cell:not(.disabled):not(.empty).selected .cell-content:hover { background-color: var(--calendar-cell-selected-hover-background-color); border-color: var(--calendar-cell-selected-hover-border-color); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).selected .cell-content:active, nb-calendar-picker .month-cell:not(.disabled):not(.empty).selected .cell-content:active, nb-calendar-picker .year-cell:not(.disabled):not(.empty).selected .cell-content:active { background-color: var(--calendar-cell-selected-active-background-color); border-color: var(--calendar-cell-selected-active-border-color); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).today.selected, nb-calendar-picker .month-cell:not(.disabled):not(.empty).today.selected, nb-calendar-picker .year-cell:not(.disabled):not(.empty).today.selected { background-color: var(--calendar-cell-selected-background-color); border-radius: var(--calendar-border-radius); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).today.selected .cell-content, nb-calendar-picker .month-cell:not(.disabled):not(.empty).today.selected .cell-content, nb-calendar-picker .year-cell:not(.disabled):not(.empty).today.selected .cell-content { background-color: var(--calendar-cell-today-selected-background-color); border-color: var(--calendar-cell-today-selected-border-color); color: var(--calendar-cell-today-selected-text-color); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).today.selected .cell-content:hover, nb-calendar-picker .month-cell:not(.disabled):not(.empty).today.selected .cell-content:hover, nb-calendar-picker .year-cell:not(.disabled):not(.empty).today.selected .cell-content:hover { background-color: var(--calendar-cell-today-selected-hover-background-color); border-color: var(--calendar-cell-today-selected-hover-border-color); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).today.selected .cell-content:focus, nb-calendar-picker .month-cell:not(.disabled):not(.empty).today.selected .cell-content:focus, nb-calendar-picker .year-cell:not(.disabled):not(.empty).today.selected .cell-content:focus { background-color: var(--calendar-cell-today-selected-active-background-color); border-color: var(--calendar-cell-today-selected-active-border-color); } nb-calendar-picker .day-cell.disabled, nb-calendar-picker .month-cell.disabled, nb-calendar-picker .year-cell.disabled { color: var(--calendar-cell-disabled-text-color); } nb-calendar-picker .day-cell.disabled.today .cell-content, nb-calendar-picker .month-cell.disabled.today .cell-content, nb-calendar-picker .year-cell.disabled.today .cell-content { border: 1px solid var(--calendar-cell-today-disabled-border-color); } nb-calendar-picker .range-cell.in-range.selected:not(.disabled):not(.empty) { background-color: var(--calendar-cell-selected-background-color); border-radius: 0; } [dir=ltr] nb-calendar-picker .range-cell.in-range.selected:not(.disabled):not(.empty).start { border-top-left-radius: var(--calendar-border-radius); border-bottom-left-radius: var(--calendar-border-radius); } [dir=rtl] nb-calendar-picker .range-cell.in-range.selected:not(.disabled):not(.empty).start { border-top-right-radius: var(--calendar-border-radius); border-bottom-right-radius: var(--calendar-border-radius); } [dir=ltr] nb-calendar-picker .range-cell.in-range.selected:not(.disabled):not(.empty).end { border-top-right-radius: var(--calendar-border-radius); border-bottom-right-radius: var(--calendar-border-radius); } [dir=rtl] nb-calendar-picker .range-cell.in-range.selected:not(.disabled):not(.empty).end { border-top-left-radius: var(--calendar-border-radius); border-bottom-left-radius: var(--calendar-border-radius); } nb-base-calendar nb-card { background-color: var(--calendar-background-color); border: var(--calendar-border-width) var(--calendar-border-style) var(--calendar-border-color); box-shadow: none; margin: 0; width: var(--calendar-width); overflow: hidden; } nb-base-calendar nb-card-body { padding: 0; } nb-base-calendar .calendar-navigation { border: none; display: flex; padding: var(--calendar-navigation-padding); color: var(--calendar-navigation-text-color); font-family: var(--calendar-navigation-text-font-family); font-size: var(--calendar-navigation-title-text-font-size); font-weight: var(--calendar-navigation-title-text-font-weight); line-height: var(--calendar-navigation-title-text-line-height); } nb-base-calendar:not(.has-navigation) nb-calendar-week-numbers .sign-container, nb-base-calendar:not(.has-navigation) nb-calendar-days-names { border-top: 0; } nb-base-calendar.has-week-number nb-card { width: calc(var(--calendar-width) + var(--calendar-weeknumber-width) + var(--calendar-weeknumber-divider-width)); } nb-base-calendar.has-week-number .month-cell, nb-base-calendar.has-week-number .year-cell { flex: 1 0 auto; } nb-base-calendar.size-large nb-card { width: var(--calendar-large-width); } nb-base-calendar.size-large.has-week-number nb-card { width: calc(var(--calendar-large-width) + var(--calendar-weeknumber-large-width) + var(--calendar-weeknumber-divider-width)); } nb-card { background-color: var(--card-background-color); border: var(--card-border-width) var(--card-border-style) var(--card-border-color); border-radius: var(--card-border-radius); box-shadow: var(--card-shadow); color: var(--card-text-color); font-family: var(--card-text-font-family); font-size: var(--card-text-font-size); font-weight: var(--card-text-font-weight); line-height: var(--card-text-line-height); margin-bottom: var(--card-margin-bottom); scrollbar-face-color: var(--card-scrollbar-color); scrollbar-track-color: var(--card-scrollbar-background-color); } nb-card::-webkit-scrollbar { width: var(--card-scrollbar-width); height: var(--card-scrollbar-width); } nb-card::-webkit-scrollbar-thumb { background: var(--card-scrollbar-color); cursor: pointer; border-radius: calc(var(--card-scrollbar-width) * 0.5); } nb-card::-webkit-scrollbar-track { background: var(--card-scrollbar-background-color); } nb-card::-webkit-scrollbar-corner { background: var(--card-scrollbar-background-color); } nb-card.size-tiny { height: var(--card-height-tiny); } nb-card.size-small { height: var(--card-height-small); } nb-card.size-medium { height: var(--card-height-medium); } nb-card.size-large { height: var(--card-height-large); } nb-card.size-giant { height: var(--card-height-giant); } nb-card.status-basic nb-card-header { background-color: var(--card-header-basic-background-color); border-bottom-width: 0; border-bottom-color: var(--card-header-basic-background-color); color: var(--card-header-basic-text-color); } nb-card.status-basic nb-card-header a, nb-card.status-basic nb-card-header a:hover { color: var(--card-header-basic-text-color); } nb-card.status-primary nb-card-header { background-color: var(--card-header-primary-background-color); border-bottom-width: 0; border-bottom-color: var(--card-header-primary-background-color); color: var(--card-header-primary-text-color); } nb-card.status-primary nb-card-header a, nb-card.status-primary nb-card-header a:hover { color: var(--card-header-primary-text-color); } nb-card.status-success nb-card-header { background-color: var(--card-header-success-background-color); border-bottom-width: 0; border-bottom-color: var(--card-header-success-background-color); color: var(--card-header-success-text-color); } nb-card.status-success nb-card-header a, nb-card.status-success nb-card-header a:hover { color: var(--card-header-success-text-color); } nb-card.status-warning nb-card-header { background-color: var(--card-header-warning-background-color); border-bottom-width: 0; border-bottom-color: var(--card-header-warning-background-color); color: var(--card-header-warning-text-color); } nb-card.status-warning nb-card-header a, nb-card.status-warning nb-card-header a:hover { color: var(--card-header-warning-text-color); } nb-card.status-danger nb-card-header { background-color: var(--card-header-danger-background-color); border-bottom-width: 0; border-bottom-color: var(--card-header-danger-background-color); color: var(--card-header-danger-text-color); } nb-card.status-danger nb-card-header a, nb-card.status-danger nb-card-header a:hover { color: var(--card-header-danger-text-color); } nb-card.status-info nb-card-header { background-color: var(--card-header-info-background-color); border-bottom-width: 0; border-bottom-color: var(--card-header-info-background-color); color: var(--card-header-info-text-color); } nb-card.status-info nb-card-header a, nb-card.status-info nb-card-header a:hover { color: var(--card-header-info-text-color); } nb-card.status-control nb-card-header { background-color: var(--card-header-control-background-color); border-bottom-width: 0; border-bottom-color: var(--card-header-control-background-color); color: var(--card-header-control-text-color); } nb-card.status-control nb-card-header a, nb-card.status-control nb-card-header a:hover { color: var(--card-header-control-text-color); } nb-card.accent-basic { border-top-color: var(--card-header-basic-background-color); } nb-card.accent-primary { border-top-color: var(--card-header-primary-background-color); } nb-card.accent-success { border-top-color: var(--card-header-success-background-color); } nb-card.accent-warning { border-top-color: var(--card-header-warning-background-color); } nb-card.accent-danger { border-top-color: var(--card-header-danger-background-color); } nb-card.accent-info { border-top-color: var(--card-header-info-background-color); } nb-card.accent-control { border-top-color: var(--card-header-control-background-color); } nb-card.accent { border-top-style: var(--card-border-style); border-top-width: var(--card-border-radius); } nb-card.accent nb-card-header { border-radius: 0; } nb-card-body { flex: 1; -ms-flex: 1 1 auto; overflow: auto; padding: var(--card-padding); position: relative; scrollbar-face-color: var(--card-scrollbar-color); scrollbar-track-color: var(--card-scrollbar-background-color); } nb-card-body::-webkit-scrollbar { width: var(--card-scrollbar-width); height: var(--card-scrollbar-width); } nb-card-body::-webkit-scrollbar-thumb { background: var(--card-scrollbar-color); cursor: pointer; border-radius: calc(var(--card-scrollbar-width) * 0.5); } nb-card-body::-webkit-scrollbar-track { background: var(--card-scrollbar-background-color); } nb-card-body::-webkit-scrollbar-corner { background: var(--card-scrollbar-background-color); } nb-card-footer { padding: var(--card-padding); border-top: var(--card-divider-width) var(--card-divider-style) var(--card-divider-color); border-bottom-left-radius: var(--card-border-radius); border-bottom-right-radius: var(--card-border-radius); } nb-card-header { padding: var(--card-padding); border-bottom: var(--card-divider-width) var(--card-divider-style) var(--card-divider-color); border-top-left-radius: var(--card-border-radius); border-top-right-radius: var(--card-border-radius); color: var(--card-header-text-color); font-family: var(--card-header-text-font-family); font-size: var(--card-header-text-font-size); font-weight: var(--card-header-text-font-weight); line-height: var(--card-header-text-line-height); } nb-card-header h1 { margin: 0; } nb-card-header h2 { margin: 0; } nb-card-header h3 { margin: 0; } nb-card-header h4 { margin: 0; } nb-card-header h5 { margin: 0; } nb-card-header h6 { margin: 0; } nb-reveal-card { box-shadow: var(--card-shadow); margin-bottom: var(--card-margin-bottom); } .second-card-container { height: 100%; border-radius: var(--card-border-radius); } .reveal-button { line-height: var(--card-text-line-height); padding: var(--card-padding); } .flip-button { line-height: var(--card-text-line-height); margin-bottom: var(--card-margin-bottom); padding: var(--card-padding); } [dir=ltr] .flipcard-body .front-container { margin-right: -100%; } [dir=rtl] .flipcard-body .front-container { margin-left: -100%; } nb-tabset { background-color: var(--tabset-background-color); border-radius: var(--tabset-border-radius); box-shadow: var(--tabset-shadow); } nb-tabset .tabset { border-bottom: var(--tabset-divider-width) var(--tabset-divider-style) var(--tabset-divider-color); } nb-tabset .tab-link { background-color: var(--tabset-tab-background-color); cursor: pointer; padding: var(--tabset-tab-padding); color: var(--tabset-tab-text-color); font-family: var(--tabset-tab-text-font-family); font-size: var(--tabset-tab-text-font-size); font-weight: var(--tabset-tab-text-font-weight); line-height: var(--tabset-tab-text-line-height); text-transform: var(--tabset-tab-text-transform); } nb-tabset .tab-link::before { background-color: var(--tabset-tab-underline-color); height: var(--tabset-tab-underline-width); } nb-tabset nb-badge.dot-mode.position-left { left: var(--tabset-tab–badge-dot-mode-horizontal-offset); } nb-tabset nb-badge.dot-mode.position-right { right: var(--tabset-tab–badge-dot-mode-horizontal-offset); } [dir=ltr] nb-tabset nb-badge.dot-mode.position-start { left: var(--tabset-tab–badge-dot-mode-horizontal-offset); } [dir=rtl] nb-tabset nb-badge.dot-mode.position-start { right: var(--tabset-tab–badge-dot-mode-horizontal-offset); } [dir=ltr] nb-tabset nb-badge.dot-mode.position-end { right: var(--tabset-tab–badge-dot-mode-horizontal-offset); } [dir=rtl] nb-tabset nb-badge.dot-mode.position-end { left: var(--tabset-tab–badge-dot-mode-horizontal-offset); } nb-tabset .tab.active .tab-link { background-color: var(--tabset-tab-active-background-color); color: var(--tabset-tab-active-text-color); } nb-tabset .tab.active .tab-link::before { background-color: var(--tabset-tab-active-underline-color); } nb-tabset .tab:focus .tab-link { background-color: var(--tabset-tab-focus-background-color); color: var(--tabset-tab-focus-text-color); } nb-tabset .tab:focus .tab-link::before { background-color: var(--tabset-tab-focus-underline-color); } nb-tabset .tab:hover .tab-link { color: var(--tabset-tab-hover-text-color); background-color: var(--tabset-tab-hover-background-color); } nb-tabset .tab:hover .tab-link::before { background-color: var(--tabset-tab-hover-underline-color); } nb-tabset .tab.disabled { cursor: default; pointer-events: none; } nb-tabset .tab.disabled .tab-link { background-color: var(--tabset-tab-disabled-background-color); color: var(--tabset-tab-disabled-text-color); cursor: default; pointer-events: none; } nb-tabset .tab.disabled .tab-link::before { background-color: var(--tabset-tab-disabled-underline-color); } @media screen and (max-width: 36rem) { nb-tabset .tab.responsive .tab-text { display: none; } } nb-tabset nb-tab { background-color: var(--tabset-content-background-color); color: var(--tabset-content-text-color); font-family: var(--tabset-content-text-font-family); font-size: var(--tabset-content-text-font-size); font-weight: var(--tabset-content-text-font-weight); line-height: var(--tabset-content-text-line-height); padding: var(--tabset-content-padding); scrollbar-face-color: var(--tabset-scrollbar-color); scrollbar-track-color: var(--tabset-scrollbar-background-color); } nb-tabset nb-tab::-webkit-scrollbar { width: var(--tabset-scrollbar-width); height: var(--tabset-scrollbar-width); } nb-tabset nb-tab::-webkit-scrollbar-thumb { background: var(--tabset-scrollbar-color); cursor: pointer; border-radius: calc(var(--tabset-scrollbar-width) * 0.5); } nb-tabset nb-tab::-webkit-scrollbar-track { background: var(--tabset-scrollbar-background-color); } nb-tabset nb-tab::-webkit-scrollbar-corner { background: var(--tabset-scrollbar-background-color); } nb-route-tabset { scrollbar-face-color: var(--route-tabset-scrollbar-color); scrollbar-track-color: var(--route-tabset-scrollbar-background-color); background-color: var(--route-tabset-background-color); border-radius: var(--route-tabset-border-radius); box-shadow: var(--route-tabset-shadow); } nb-route-tabset::-webkit-scrollbar { width: var(--route-tabset-scrollbar-width); height: var(--route-tabset-scrollbar-width); } nb-route-tabset::-webkit-scrollbar-thumb { background: var(--route-tabset-scrollbar-color); cursor: pointer; border-radius: calc(var(--route-tabset-scrollbar-width) * 0.5); } nb-route-tabset::-webkit-scrollbar-track { background: var(--route-tabset-scrollbar-background-color); } nb-route-tabset::-webkit-scrollbar-corner { background: var(--route-tabset-scrollbar-background-color); } nb-route-tabset .route-tabset { border-bottom: var(--route-tabset-divider-width) var(--route-tabset-divider-style) var(--route-tabset-divider-color); } nb-route-tabset .tab-link { background-color: var(--route-tabset-tab-background-color); cursor: pointer; padding: var(--route-tabset-tab-padding); color: var(--route-tabset-tab-text-color); font-family: var(--route-tabset-tab-text-font-family); font-size: var(--route-tabset-tab-text-font-size); font-weight: var(--route-tabset-tab-text-font-weight); line-height: var(--route-tabset-tab-text-line-height); text-transform: var(--route-tabset-tab-text-transform); } nb-route-tabset .tab-link::before { background-color: var(--route-tabset-tab-underline-color); height: var(--route-tabset-tab-underline-width); } nb-route-tabset .route-tab.active .tab-link { background-color: var(--tabset-tab-active-background-color); color: var(--tabset-tab-active-text-color); } nb-route-tabset .route-tab.active .tab-link::before { background-color: var(--tabset-tab-active-underline-color); } nb-route-tabset .tab-link:focus { background-color: var(--route-tabset-tab-focus-background-color); color: var(--route-tabset-tab-focus-text-color); } nb-route-tabset .tab-link:focus::before { background-color: var(--route-tabset-tab-focus-underline-color); } nb-route-tabset .tab-link:hover { background-color: var(--route-tabset-tab-hover-background-color); color: var(--route-tabset-tab-hover-text-color); } nb-route-tabset .tab-link:hover::before { background-color: var(--route-tabset-tab-hover-underline-color); } nb-route-tabset .route-tab.disabled { cursor: default; pointer-events: none; } nb-route-tabset .route-tab.disabled .tab-link { background-color: var(--route-tabset-tab-disabled-background-color); color: var(--route-tabset-tab-disabled-text-color); cursor: default; pointer-events: none; } nb-route-tabset .route-tab.disabled .tab-link::before { background-color: var(--route-tabset-tab-disabled-underline-color); } @media screen and (max-width: 36rem) { nb-route-tabset .route-tab.responsive .tab-text { display: none; } } nb-menu { background-color: var(--menu-background-color); } nb-menu ul.menu-items { margin: 0; padding: 0; } nb-menu .menu-group, nb-menu .menu-item a { font-family: var(--menu-text-font-family); font-size: var(--menu-text-font-size); font-weight: var(--menu-text-font-weight); line-height: var(--menu-text-line-height); padding: var(--menu-item-padding); } nb-menu .menu-group, nb-menu .menu-group nb-icon.menu-icon { color: var(--menu-group-text-color); } nb-menu .menu-item a { color: var(--menu-text-color); border-radius: var(--menu-item-border-radius); } nb-menu .menu-item a.active { background-color: var(--menu-item-active-background-color); color: var(--menu-item-active-text-color); } nb-menu .menu-item a.active .menu-icon { color: var(--menu-item-icon-active-color); } nb-menu .menu-item a:hover { background-color: var(--menu-item-hover-background-color); color: var(--menu-item-hover-text-color); cursor: var(--menu-item-hover-cursor); } nb-menu .menu-item a:hover .menu-icon { color: var(--menu-item-icon-hover-color); } nb-menu .menu-item .menu-icon { color: var(--menu-item-icon-color); font-size: var(--menu-item-icon-width); margin: var(--menu-item-icon-margin); width: 1em; text-align: center; } nb-menu .menu-item .expand-state { color: var(--menu-item-icon-color); } nb-menu .menu-item { border-bottom: var(--menu-item-divider-width) var(--menu-item-divider-style) var(--menu-item-divider-color); } nb-menu .menu-item:first-child { border-top: none; } nb-menu .menu-item:last-child { border-bottom: none; } nb-menu .menu-item .menu-item:first-child { border-top: var(--menu-item-divider-width) var(--menu-item-divider-style) var(--menu-item-divider-color); } nb-menu .menu-item > .menu-items { background-color: var(--menu-submenu-background-color); margin: var(--menu-submenu-margin); padding: var(--menu-submenu-padding); } nb-menu .menu-item > .menu-items > .menu-item { background: var(--menu-submenu-background-color); color: var(--menu-submenu-text-color); } nb-menu .menu-item > .menu-items > .menu-item a { border-color: var(--menu-submenu-item-border-color); border-style: var(--menu-submenu-item-border-style); border-width: var(--menu-submenu-item-border-width); padding: var(--menu-submenu-item-padding); } nb-menu .menu-item > .menu-items > .menu-item a.active { background-color: var(--menu-submenu-item-active-background-color); border-color: var(--menu-submenu-item-active-border-color); color: var(--menu-submenu-item-active-text-color); } nb-menu .menu-item > .menu-items > .menu-item a.active .menu-icon { color: var(--menu-submenu-item-icon-active-color); } nb-menu .menu-item > .menu-items > .menu-item a:hover { background-color: var(--menu-submenu-item-hover-background-color); border-color: var(--menu-submenu-item-hover-border-color); color: var(--menu-submenu-item-hover-text-color); } nb-menu .menu-item > .menu-items > .menu-item a:hover .menu-icon { color: var(--menu-submenu-item-icon-hover-color); } nb-menu .menu-item > .menu-items > .menu-item a.active:hover { background-color: var(--menu-submenu-item-active-hover-background-color); border-color: var(--menu-submenu-item-active-hover-border-color); color: var(--menu-submenu-item-active-hover-text-color); } nb-menu .menu-item > .menu-items > .menu-item a.active:hover .menu-icon { color: var(--menu-submenu-item-icon-active-hover-color); } nb-menu .menu-item > .menu-items > .menu-group, nb-menu .menu-item > .menu-items > .menu-group nb-icon.menu-icon { color: var(--menu-group-text-color); } nb-user .user-picture { background-color: var(--user-picture-box-background-color); border: var(--user-picture-box-border-width) solid var(--user-picture-box-border-color); } nb-user .initials { color: var(--user-initials-text-color); font-family: var(--user-initials-text-font-family); font-weight: var(--user-initials-text-font-weight); } nb-user .user-name { color: var(--user-name-text-color); font-family: var(--user-name-text-font-family); font-weight: var(--user-name-text-font-weight); } nb-user .user-title { color: var(--user-title-text-color); font-family: var(--user-title-text-font-family); font-weight: var(--user-title-text-font-weight); } nb-user.size-tiny .user-picture { height: var(--user-tiny-height); width: var(--user-tiny-width); } nb-user.size-tiny .initials { font-size: var(--user-tiny-initials-text-font-size); line-height: var(--user-tiny-initials-text-line-height); } nb-user.size-tiny .user-name { font-size: var(--user-tiny-name-text-font-size); line-height: var(--user-tiny-name-text-line-height); } nb-user.size-tiny .user-title { font-size: var(--user-tiny-title-text-font-size); line-height: var(--user-tiny-title-text-line-height); } nb-user.size-small .user-picture { height: var(--user-small-height); width: var(--user-small-width); } nb-user.size-small .initials { font-size: var(--user-small-initials-text-font-size); line-height: var(--user-small-initials-text-line-height); } nb-user.size-small .user-name { font-size: var(--user-small-name-text-font-size); line-height: var(--user-small-name-text-line-height); } nb-user.size-small .user-title { font-size: var(--user-small-title-text-font-size); line-height: var(--user-small-title-text-line-height); } nb-user.size-medium .user-picture { height: var(--user-medium-height); width: var(--user-medium-width); } nb-user.size-medium .initials { font-size: var(--user-medium-initials-text-font-size); line-height: var(--user-medium-initials-text-line-height); } nb-user.size-medium .user-name { font-size: var(--user-medium-name-text-font-size); line-height: var(--user-medium-name-text-line-height); } nb-user.size-medium .user-title { font-size: var(--user-medium-title-text-font-size); line-height: var(--user-medium-title-text-line-height); } nb-user.size-large .user-picture { height: var(--user-large-height); width: var(--user-large-width); } nb-user.size-large .initials { font-size: var(--user-large-initials-text-font-size); line-height: var(--user-large-initials-text-line-height); } nb-user.size-large .user-name { font-size: var(--user-large-name-text-font-size); line-height: var(--user-large-name-text-line-height); } nb-user.size-large .user-title { font-size: var(--user-large-title-text-font-size); line-height: var(--user-large-title-text-line-height); } nb-user.size-giant .user-picture { height: var(--user-giant-height); width: var(--user-giant-width); } nb-user.size-giant .initials { font-size: var(--user-giant-initials-text-font-size); line-height: var(--user-giant-initials-text-line-height); } nb-user.size-giant .user-name { font-size: var(--user-giant-name-text-font-size); line-height: var(--user-giant-name-text-line-height); } nb-user.size-giant .user-title { font-size: var(--user-giant-title-text-font-size); line-height: var(--user-giant-title-text-line-height); } nb-user.shape-rectangle .user-picture { border-radius: var(--user-rectangle-border-radius); } nb-user.shape-semi-round .user-picture { border-radius: var(--user-semi-round-border-radius); } nb-user.shape-round .user-picture { border-radius: var(--user-round-border-radius); } nb-actions { background-color: var(--actions-background-color); color: var(--actions-text-color); font-family: var(--actions-text-font-family); font-weight: var(--actions-text-font-weight); line-height: var(--actions-text-line-height); } nb-actions.size-tiny nb-action { font-size: var(--actions-tiny-text-font-size); height: var(--actions-tiny-height); padding: var(--actions-tiny-padding); } nb-actions.size-tiny nb-action nb-icon { font-size: var(--actions-tiny-icon-height); } nb-actions.size-small nb-action { font-size: var(--actions-small-text-font-size); height: var(--actions-small-height); padding: var(--actions-small-padding); } nb-actions.size-small nb-action nb-icon { font-size: var(--actions-small-icon-height); } nb-actions.size-medium nb-action { font-size: var(--actions-medium-text-font-size); height: var(--actions-medium-height); padding: var(--actions-medium-padding); } nb-actions.size-medium nb-action nb-icon { font-size: var(--actions-medium-icon-height); } nb-actions.size-large nb-action { font-size: var(--actions-large-text-font-size); height: var(--actions-large-height); padding: var(--actions-large-padding); } nb-actions.size-large nb-action nb-icon { font-size: var(--actions-large-icon-height); } nb-actions.size-giant nb-action { font-size: var(--actions-giant-text-font-size); height: var(--actions-giant-height); padding: var(--actions-giant-padding); } nb-actions.size-giant nb-action nb-icon { font-size: var(--actions-giant-icon-height); } [dir=ltr] nb-action { border-left: var(--actions-divider-width) var(--actions-divider-style) var(--actions-divider-color); } [dir=rtl] nb-action { border-right: var(--actions-divider-width) var(--actions-divider-style) var(--actions-divider-color); } [dir=ltr] nb-action:first-child { border-left: none !important; } [dir=rtl] nb-action:first-child { border-right: none !important; } nb-action nb-icon { color: var(--actions-icon-color); } nb-action.disabled { color: var(--actions-disabled-text-color); } nb-action.disabled nb-icon { color: var(--actions-disabled-icon-color); } nb-search-field .close-button { z-index: 1; } nb-search-field .search { background: var(--search-background-color); } nb-search-field .search span.info { color: var(--search-info-text-color); font-family: var(--search-info-text-font-family); font-size: var(--search-info-text-font-size); font-weight: var(--search-info-text-font-weight); line-height: var(--search-info-text-line-height); } nb-search-field .search input { border-bottom: var(--search-divider-width) var(--search-divider-style) var(--search-divider-color); color: var(--search-text-color); font-family: var(--search-text-font-family); font-size: var(--search-text-font-size); font-weight: var(--search-text-font-weight); line-height: var(--search-text-line-height); } nb-search-field .search input::-moz-placeholder { color: var(--search-placeholder-text-color); } nb-search-field .search input::placeholder { color: var(--search-placeholder-text-color); } nb-search-field .search input::-ms-clear { display: none; } nb-search-field.rotate-layout { opacity: 0; background: var(--search-background-color); } nb-search-field.modal-zoomin .search::before, nb-search-field.modal-zoomin .search::after { border: 1.5rem solid var(--search-extra-background-color); } nb-search-field.modal-half .form-wrapper { background: var(--search-background-color); } nb-search-field.modal-half .search::before { background: var(--search-extra-background-color); } nb-search-field.modal-drop .form-content::after { background: var(--search-divider-color); } nb-search-field.modal-drop .search::before { background: var(--search-background-color); } nb-search-field.curtain .search::after { background: var(--search-background-color); } nb-search-field.curtain .search { background: var(--search-background-color); } nb-search-field.column-curtain::before { background: var(--search-background-color); } nb-search-field.column-curtain::after { background: transparent; } nb-search-field.column-curtain.show::after { background: var(--search-extra-background-color); } .nb-spinner-container { position: relative; } nb-spinner .message { color: var(--spinner-text-color); font-family: var(--spinner-text-font-family); font-size: var(--spinner-text-font-size); font-weight: var(--spinner-text-font-weight); line-height: var(--spinner-text-line-height); } nb-spinner.status-basic { background-color: var(--spinner-basic-background-color); } nb-spinner.status-basic .spin-circle { border-top-color: var(--spinner-basic-circle-filled-color); border-right-color: var(--spinner-basic-circle-empty-color); border-bottom-color: var(--spinner-basic-circle-filled-color); border-left-color: var(--spinner-basic-circle-filled-color); } nb-spinner.status-primary { background-color: var(--spinner-primary-background-color); } nb-spinner.status-primary .spin-circle { border-top-color: var(--spinner-primary-circle-filled-color); border-right-color: var(--spinner-primary-circle-empty-color); border-bottom-color: var(--spinner-primary-circle-filled-color); border-left-color: var(--spinner-primary-circle-filled-color); } nb-spinner.status-success { background-color: var(--spinner-success-background-color); } nb-spinner.status-success .spin-circle { border-top-color: var(--spinner-success-circle-filled-color); border-right-color: var(--spinner-success-circle-empty-color); border-bottom-color: var(--spinner-success-circle-filled-color); border-left-color: var(--spinner-success-circle-filled-color); } nb-spinner.status-warning { background-color: var(--spinner-warning-background-color); } nb-spinner.status-warning .spin-circle { border-top-color: var(--spinner-warning-circle-filled-color); border-right-color: var(--spinner-warning-circle-empty-color); border-bottom-color: var(--spinner-warning-circle-filled-color); border-left-color: var(--spinner-warning-circle-filled-color); } nb-spinner.status-danger { background-color: var(--spinner-danger-background-color); } nb-spinner.status-danger .spin-circle { border-top-color: var(--spinner-danger-circle-filled-color); border-right-color: var(--spinner-danger-circle-empty-color); border-bottom-color: var(--spinner-danger-circle-filled-color); border-left-color: var(--spinner-danger-circle-filled-color); } nb-spinner.status-info { background-color: var(--spinner-info-background-color); } nb-spinner.status-info .spin-circle { border-top-color: var(--spinner-info-circle-filled-color); border-right-color: var(--spinner-info-circle-empty-color); border-bottom-color: var(--spinner-info-circle-filled-color); border-left-color: var(--spinner-info-circle-filled-color); } nb-spinner.status-control { background-color: var(--spinner-control-background-color); } nb-spinner.status-control .spin-circle { border-top-color: var(--spinner-control-circle-filled-color); border-right-color: var(--spinner-control-circle-empty-color); border-bottom-color: var(--spinner-control-circle-filled-color); border-left-color: var(--spinner-control-circle-filled-color); } nb-spinner.size-tiny { font-size: var(--spinner-height-tiny); } nb-spinner.size-small { font-size: var(--spinner-height-small); } nb-spinner.size-medium { font-size: var(--spinner-height-medium); } nb-spinner.size-large { font-size: var(--spinner-height-large); } nb-spinner.size-giant { font-size: var(--spinner-height-giant); } @keyframes spin { 0% { transform: rotate(0deg); } 40% { transform: rotate(230deg); } 100% { transform: rotate(360deg); } } .nb-timepicker-container { width: var(--timepicker-container-width); height: var(--timepicker-container-height); } .nb-timepicker-container .list-item { color: var(--timepicker-cell-text-color); font-size: var(--timepicker-cell-text-font-size); font-family: var(--timepicker-cell-text-font-family); height: var(--timepicker-cell-height); line-height: var(--timepicker-cell-text-line-height); font-weight: var(--timepicker-cell-text-font-weight); } .nb-timepicker-container .list-item:first-child { border-top: none; } .nb-timepicker-container .list-item:hover { background-color: var(--timepicker-cell-hover-background-color); color: var(--timepicker-cell-hover-text-color); } .nb-timepicker-container .list-item:focus { background-color: var(--timepicker-cell-focus-background-color); color: var(--timepicker-cell-focus-text-color); } .nb-timepicker-container .list-item.selected { background-color: var(--timepicker-cell-active-background-color); color: var(--timepicker-cell-active-text-color); } .nb-timepicker-container .values-list { scrollbar-face-color: var(--timepicker-scrollbar-color); scrollbar-track-color: var(--timepicker-scrollbar-background-color); } [dir=ltr] .nb-timepicker-container .values-list:not(:last-of-type) { border-right: var(--timepicker-border-width) var(--timepicker-border-style) var(--timepicker-border-color); } [dir=rtl] .nb-timepicker-container .values-list:not(:last-of-type) { border-left: var(--timepicker-border-width) var(--timepicker-border-style) var(--timepicker-border-color); } .nb-timepicker-container .values-list::-webkit-scrollbar { width: var(--timepicker-scrollbar-width); height: var(--timepicker-scrollbar-width); } .nb-timepicker-container .values-list::-webkit-scrollbar-thumb { background: var(--timepicker-scrollbar-color); cursor: pointer; border-radius: calc(var(--timepicker-scrollbar-width) * 0.5); } .nb-timepicker-container .values-list::-webkit-scrollbar-track { background: var(--timepicker-scrollbar-background-color); } .nb-timepicker-container .values-list::-webkit-scrollbar-corner { background: var(--timepicker-scrollbar-background-color); } [dir=ltr] .nb-timepicker-container.supports-scrollbar-theming .values-list:hover .list-item:not(.am-pm-item) { margin-right: calc(var(--timepicker-scrollbar-width) * -1); } [dir=rtl] .nb-timepicker-container.supports-scrollbar-theming .values-list:hover .list-item:not(.am-pm-item) { margin-left: calc(var(--timepicker-scrollbar-width) * -1); } .nb-timepicker-container .header-cell { color: var(--timepicker-header-cell-text-color); font-size: var(--timepicker-header-cell-text-font-size); font-family: var(--timepicker-header-cell-text-font-family); height: var(--timepicker-header-cell-height); line-height: var(--timepicker-header-cell-text-line-height); font-weight: var(--timepicker-header-cell-text-font-weight); } [dir=ltr] .nb-timepicker-container .header-cell:not(:last-child) { border-right: var(--timepicker-border-width) var(--timepicker-border-style) var(--timepicker-border-color); } [dir=rtl] .nb-timepicker-container .header-cell:not(:last-child) { border-left: var(--timepicker-border-width) var(--timepicker-border-style) var(--timepicker-border-color); } .nb-timepicker-container .column-header { border-bottom: var(--timepicker-border-width) var(--timepicker-border-style) var(--timepicker-border-color); } [dir=ltr] .nb-timepicker-container .actions-footer { padding-left: 0.625rem; } [dir=rtl] .nb-timepicker-container .actions-footer { padding-right: 0.625rem; } nb-checkbox .label { padding: var(--checkbox-padding); } nb-checkbox .custom-checkbox { width: var(--checkbox-width); height: var(--checkbox-height); border-style: var(--checkbox-border-style); border-width: var(--checkbox-border-width); border-radius: var(--checkbox-border-radius); position: relative; } nb-checkbox .native-input:focus:not(:checked) + .custom-checkbox { box-shadow: 0 0 0 var(--checkbox-outline-width) var(--checkbox-outline-color); } nb-checkbox .native-input:focus:not(:checked) + .custom-checkbox:not(:hover):not(:active) { box-shadow: 0 0 0 var(--checkbox-outline-width) var(--checkbox-outline-color), inset var(--checkbox-focus-inset-shadow-length) var(--checkbox-outline-color); } nb-checkbox .native-input:focus:checked + .custom-checkbox { box-shadow: 0 0 0 var(--checkbox-outline-width) var(--checkbox-outline-color); } nb-checkbox .custom-checkbox-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; } nb-checkbox .text { font-family: var(--checkbox-text-font-family); font-size: var(--checkbox-text-font-size); font-weight: var(--checkbox-text-font-weight); line-height: var(--checkbox-text-line-height); } [dir=ltr] nb-checkbox .text:not(:empty) { padding-left: var(--checkbox-text-space); } [dir=rtl] nb-checkbox .text:not(:empty) { padding-right: var(--checkbox-text-space); } nb-checkbox.status-basic .custom-checkbox { background-color: var(--checkbox-basic-background-color); border-color: var(--checkbox-basic-border-color); } nb-checkbox.status-basic .text { color: var(--checkbox-basic-text-color); } nb-checkbox.status-basic .custom-checkbox.checked { background-color: var(--checkbox-basic-checked-background-color); border-color: var(--checkbox-basic-checked-border-color); } nb-checkbox.status-basic .custom-checkbox.checked .custom-checkbox-icon { color: var(--checkbox-basic-checked-checkmark-color); } nb-checkbox.status-basic .custom-checkbox.indeterminate { background-color: var(--checkbox-basic-indeterminate-background-color); border-color: var(--checkbox-basic-indeterminate-border-color); } nb-checkbox.status-basic .custom-checkbox.indeterminate .custom-checkbox-icon { color: var(--checkbox-basic-indeterminate-checkmark-color); } nb-checkbox.status-basic .native-input:enabled:focus + .custom-checkbox { background-color: var(--checkbox-basic-focus-background-color); border-color: var(--checkbox-basic-focus-border-color); } nb-checkbox.status-basic .native-input:enabled:focus + .custom-checkbox.indeterminate, nb-checkbox.status-basic .native-input:enabled:focus + .custom-checkbox.checked { background-color: var(--checkbox-basic-focus-checked-background-color); border-color: var(--checkbox-basic-focus-checked-border-color); } nb-checkbox.status-basic .custom-checkbox:hover { background-color: var(--checkbox-basic-hover-background-color); border-color: var(--checkbox-basic-hover-border-color); } nb-checkbox.status-basic .custom-checkbox:hover.indeterminate, nb-checkbox.status-basic .custom-checkbox:hover.checked { background-color: var(--checkbox-basic-hover-checked-background-color); border-color: var(--checkbox-basic-hover-checked-border-color); } nb-checkbox.status-basic .native-input:enabled:active + .custom-checkbox { background-color: var(--checkbox-basic-active-background-color); border-color: var(--checkbox-basic-active-border-color); } nb-checkbox.status-basic .native-input:enabled:active + .custom-checkbox.indeterminate, nb-checkbox.status-basic .native-input:enabled:active + .custom-checkbox.checked { background-color: var(--checkbox-basic-active-checked-background-color); border-color: var(--checkbox-basic-active-checked-border-color); } nb-checkbox.status-basic .native-input:disabled + .custom-checkbox { background-color: var(--checkbox-basic-disabled-background-color); border-color: var(--checkbox-basic-disabled-border-color); } nb-checkbox.status-basic .native-input:disabled + .custom-checkbox .custom-checkbox-icon { color: var(--checkbox-basic-disabled-checkmark-color); } nb-checkbox.status-basic .native-input:disabled ~ .text { color: var(--checkbox-basic-disabled-text-color); } nb-checkbox.status-basic .native-input:disabled:indeterminate + .custom-checkbox, nb-checkbox.status-basic .native-input:disabled:checked + .custom-checkbox { background-color: var(--checkbox-basic-disabled-checked-background-color); border-color: var(--checkbox-basic-disabled-checked-border-color); } nb-checkbox.status-primary .custom-checkbox { background-color: var(--checkbox-primary-background-color); border-color: var(--checkbox-primary-border-color); } nb-checkbox.status-primary .text { color: var(--checkbox-primary-text-color); } nb-checkbox.status-primary .custom-checkbox.checked { background-color: var(--checkbox-primary-checked-background-color); border-color: var(--checkbox-primary-checked-border-color); } nb-checkbox.status-primary .custom-checkbox.checked .custom-checkbox-icon { color: var(--checkbox-primary-checked-checkmark-color); } nb-checkbox.status-primary .custom-checkbox.indeterminate { background-color: var(--checkbox-primary-indeterminate-background-color); border-color: var(--checkbox-primary-indeterminate-border-color); } nb-checkbox.status-primary .custom-checkbox.indeterminate .custom-checkbox-icon { color: var(--checkbox-primary-indeterminate-checkmark-color); } nb-checkbox.status-primary .native-input:enabled:focus + .custom-checkbox { background-color: var(--checkbox-primary-focus-background-color); border-color: var(--checkbox-primary-focus-border-color); } nb-checkbox.status-primary .native-input:enabled:focus + .custom-checkbox.indeterminate, nb-checkbox.status-primary .native-input:enabled:focus + .custom-checkbox.checked { background-color: var(--checkbox-primary-focus-checked-background-color); border-color: var(--checkbox-primary-focus-checked-border-color); } nb-checkbox.status-primary .custom-checkbox:hover { background-color: var(--checkbox-primary-hover-background-color); border-color: var(--checkbox-primary-hover-border-color); } nb-checkbox.status-primary .custom-checkbox:hover.indeterminate, nb-checkbox.status-primary .custom-checkbox:hover.checked { background-color: var(--checkbox-primary-hover-checked-background-color); border-color: var(--checkbox-primary-hover-checked-border-color); } nb-checkbox.status-primary .native-input:enabled:active + .custom-checkbox { background-color: var(--checkbox-primary-active-background-color); border-color: var(--checkbox-primary-active-border-color); } nb-checkbox.status-primary .native-input:enabled:active + .custom-checkbox.indeterminate, nb-checkbox.status-primary .native-input:enabled:active + .custom-checkbox.checked { background-color: var(--checkbox-primary-active-checked-background-color); border-color: var(--checkbox-primary-active-checked-border-color); } nb-checkbox.status-primary .native-input:disabled + .custom-checkbox { background-color: var(--checkbox-primary-disabled-background-color); border-color: var(--checkbox-primary-disabled-border-color); } nb-checkbox.status-primary .native-input:disabled + .custom-checkbox .custom-checkbox-icon { color: var(--checkbox-primary-disabled-checkmark-color); } nb-checkbox.status-primary .native-input:disabled ~ .text { color: var(--checkbox-primary-disabled-text-color); } nb-checkbox.status-primary .native-input:disabled:indeterminate + .custom-checkbox, nb-checkbox.status-primary .native-input:disabled:checked + .custom-checkbox { background-color: var(--checkbox-primary-disabled-checked-background-color); border-color: var(--checkbox-primary-disabled-checked-border-color); } nb-checkbox.status-success .custom-checkbox { background-color: var(--checkbox-success-background-color); border-color: var(--checkbox-success-border-color); } nb-checkbox.status-success .text { color: var(--checkbox-success-text-color); } nb-checkbox.status-success .custom-checkbox.checked { background-color: var(--checkbox-success-checked-background-color); border-color: var(--checkbox-success-checked-border-color); } nb-checkbox.status-success .custom-checkbox.checked .custom-checkbox-icon { color: var(--checkbox-success-checked-checkmark-color); } nb-checkbox.status-success .custom-checkbox.indeterminate { background-color: var(--checkbox-success-indeterminate-background-color); border-color: var(--checkbox-success-indeterminate-border-color); } nb-checkbox.status-success .custom-checkbox.indeterminate .custom-checkbox-icon { color: var(--checkbox-success-indeterminate-checkmark-color); } nb-checkbox.status-success .native-input:enabled:focus + .custom-checkbox { background-color: var(--checkbox-success-focus-background-color); border-color: var(--checkbox-success-focus-border-color); } nb-checkbox.status-success .native-input:enabled:focus + .custom-checkbox.indeterminate, nb-checkbox.status-success .native-input:enabled:focus + .custom-checkbox.checked { background-color: var(--checkbox-success-focus-checked-background-color); border-color: var(--checkbox-success-focus-checked-border-color); } nb-checkbox.status-success .custom-checkbox:hover { background-color: var(--checkbox-success-hover-background-color); border-color: var(--checkbox-success-hover-border-color); } nb-checkbox.status-success .custom-checkbox:hover.indeterminate, nb-checkbox.status-success .custom-checkbox:hover.checked { background-color: var(--checkbox-success-hover-checked-background-color); border-color: var(--checkbox-success-hover-checked-border-color); } nb-checkbox.status-success .native-input:enabled:active + .custom-checkbox { background-color: var(--checkbox-success-active-background-color); border-color: var(--checkbox-success-active-border-color); } nb-checkbox.status-success .native-input:enabled:active + .custom-checkbox.indeterminate, nb-checkbox.status-success .native-input:enabled:active + .custom-checkbox.checked { background-color: var(--checkbox-success-active-checked-background-color); border-color: var(--checkbox-success-active-checked-border-color); } nb-checkbox.status-success .native-input:disabled + .custom-checkbox { background-color: var(--checkbox-success-disabled-background-color); border-color: var(--checkbox-success-disabled-border-color); } nb-checkbox.status-success .native-input:disabled + .custom-checkbox .custom-checkbox-icon { color: var(--checkbox-success-disabled-checkmark-color); } nb-checkbox.status-success .native-input:disabled ~ .text { color: var(--checkbox-success-disabled-text-color); } nb-checkbox.status-success .native-input:disabled:indeterminate + .custom-checkbox, nb-checkbox.status-success .native-input:disabled:checked + .custom-checkbox { background-color: var(--checkbox-success-disabled-checked-background-color); border-color: var(--checkbox-success-disabled-checked-border-color); } nb-checkbox.status-warning .custom-checkbox { background-color: var(--checkbox-warning-background-color); border-color: var(--checkbox-warning-border-color); } nb-checkbox.status-warning .text { color: var(--checkbox-warning-text-color); } nb-checkbox.status-warning .custom-checkbox.checked { background-color: var(--checkbox-warning-checked-background-color); border-color: var(--checkbox-warning-checked-border-color); } nb-checkbox.status-warning .custom-checkbox.checked .custom-checkbox-icon { color: var(--checkbox-warning-checked-checkmark-color); } nb-checkbox.status-warning .custom-checkbox.indeterminate { background-color: var(--checkbox-warning-indeterminate-background-color); border-color: var(--checkbox-warning-indeterminate-border-color); } nb-checkbox.status-warning .custom-checkbox.indeterminate .custom-checkbox-icon { color: var(--checkbox-warning-indeterminate-checkmark-color); } nb-checkbox.status-warning .native-input:enabled:focus + .custom-checkbox { background-color: var(--checkbox-warning-focus-background-color); border-color: var(--checkbox-warning-focus-border-color); } nb-checkbox.status-warning .native-input:enabled:focus + .custom-checkbox.indeterminate, nb-checkbox.status-warning .native-input:enabled:focus + .custom-checkbox.checked { background-color: var(--checkbox-warning-focus-checked-background-color); border-color: var(--checkbox-warning-focus-checked-border-color); } nb-checkbox.status-warning .custom-checkbox:hover { background-color: var(--checkbox-warning-hover-background-color); border-color: var(--checkbox-warning-hover-border-color); } nb-checkbox.status-warning .custom-checkbox:hover.indeterminate, nb-checkbox.status-warning .custom-checkbox:hover.checked { background-color: var(--checkbox-warning-hover-checked-background-color); border-color: var(--checkbox-warning-hover-checked-border-color); } nb-checkbox.status-warning .native-input:enabled:active + .custom-checkbox { background-color: var(--checkbox-warning-active-background-color); border-color: var(--checkbox-warning-active-border-color); } nb-checkbox.status-warning .native-input:enabled:active + .custom-checkbox.indeterminate, nb-checkbox.status-warning .native-input:enabled:active + .custom-checkbox.checked { background-color: var(--checkbox-warning-active-checked-background-color); border-color: var(--checkbox-warning-active-checked-border-color); } nb-checkbox.status-warning .native-input:disabled + .custom-checkbox { background-color: var(--checkbox-warning-disabled-background-color); border-color: var(--checkbox-warning-disabled-border-color); } nb-checkbox.status-warning .native-input:disabled + .custom-checkbox .custom-checkbox-icon { color: var(--checkbox-warning-disabled-checkmark-color); } nb-checkbox.status-warning .native-input:disabled ~ .text { color: var(--checkbox-warning-disabled-text-color); } nb-checkbox.status-warning .native-input:disabled:indeterminate + .custom-checkbox, nb-checkbox.status-warning .native-input:disabled:checked + .custom-checkbox { background-color: var(--checkbox-warning-disabled-checked-background-color); border-color: var(--checkbox-warning-disabled-checked-border-color); } nb-checkbox.status-danger .custom-checkbox { background-color: var(--checkbox-danger-background-color); border-color: var(--checkbox-danger-border-color); } nb-checkbox.status-danger .text { color: var(--checkbox-danger-text-color); } nb-checkbox.status-danger .custom-checkbox.checked { background-color: var(--checkbox-danger-checked-background-color); border-color: var(--checkbox-danger-checked-border-color); } nb-checkbox.status-danger .custom-checkbox.checked .custom-checkbox-icon { color: var(--checkbox-danger-checked-checkmark-color); } nb-checkbox.status-danger .custom-checkbox.indeterminate { background-color: var(--checkbox-danger-indeterminate-background-color); border-color: var(--checkbox-danger-indeterminate-border-color); } nb-checkbox.status-danger .custom-checkbox.indeterminate .custom-checkbox-icon { color: var(--checkbox-danger-indeterminate-checkmark-color); } nb-checkbox.status-danger .native-input:enabled:focus + .custom-checkbox { background-color: var(--checkbox-danger-focus-background-color); border-color: var(--checkbox-danger-focus-border-color); } nb-checkbox.status-danger .native-input:enabled:focus + .custom-checkbox.indeterminate, nb-checkbox.status-danger .native-input:enabled:focus + .custom-checkbox.checked { background-color: var(--checkbox-danger-focus-checked-background-color); border-color: var(--checkbox-danger-focus-checked-border-color); } nb-checkbox.status-danger .custom-checkbox:hover { background-color: var(--checkbox-danger-hover-background-color); border-color: var(--checkbox-danger-hover-border-color); } nb-checkbox.status-danger .custom-checkbox:hover.indeterminate, nb-checkbox.status-danger .custom-checkbox:hover.checked { background-color: var(--checkbox-danger-hover-checked-background-color); border-color: var(--checkbox-danger-hover-checked-border-color); } nb-checkbox.status-danger .native-input:enabled:active + .custom-checkbox { background-color: var(--checkbox-danger-active-background-color); border-color: var(--checkbox-danger-active-border-color); } nb-checkbox.status-danger .native-input:enabled:active + .custom-checkbox.indeterminate, nb-checkbox.status-danger .native-input:enabled:active + .custom-checkbox.checked { background-color: var(--checkbox-danger-active-checked-background-color); border-color: var(--checkbox-danger-active-checked-border-color); } nb-checkbox.status-danger .native-input:disabled + .custom-checkbox { background-color: var(--checkbox-danger-disabled-background-color); border-color: var(--checkbox-danger-disabled-border-color); } nb-checkbox.status-danger .native-input:disabled + .custom-checkbox .custom-checkbox-icon { color: var(--checkbox-danger-disabled-checkmark-color); } nb-checkbox.status-danger .native-input:disabled ~ .text { color: var(--checkbox-danger-disabled-text-color); } nb-checkbox.status-danger .native-input:disabled:indeterminate + .custom-checkbox, nb-checkbox.status-danger .native-input:disabled:checked + .custom-checkbox { background-color: var(--checkbox-danger-disabled-checked-background-color); border-color: var(--checkbox-danger-disabled-checked-border-color); } nb-checkbox.status-info .custom-checkbox { background-color: var(--checkbox-info-background-color); border-color: var(--checkbox-info-border-color); } nb-checkbox.status-info .text { color: var(--checkbox-info-text-color); } nb-checkbox.status-info .custom-checkbox.checked { background-color: var(--checkbox-info-checked-background-color); border-color: var(--checkbox-info-checked-border-color); } nb-checkbox.status-info .custom-checkbox.checked .custom-checkbox-icon { color: var(--checkbox-info-checked-checkmark-color); } nb-checkbox.status-info .custom-checkbox.indeterminate { background-color: var(--checkbox-info-indeterminate-background-color); border-color: var(--checkbox-info-indeterminate-border-color); } nb-checkbox.status-info .custom-checkbox.indeterminate .custom-checkbox-icon { color: var(--checkbox-info-indeterminate-checkmark-color); } nb-checkbox.status-info .native-input:enabled:focus + .custom-checkbox { background-color: var(--checkbox-info-focus-background-color); border-color: var(--checkbox-info-focus-border-color); } nb-checkbox.status-info .native-input:enabled:focus + .custom-checkbox.indeterminate, nb-checkbox.status-info .native-input:enabled:focus + .custom-checkbox.checked { background-color: var(--checkbox-info-focus-checked-background-color); border-color: var(--checkbox-info-focus-checked-border-color); } nb-checkbox.status-info .custom-checkbox:hover { background-color: var(--checkbox-info-hover-background-color); border-color: var(--checkbox-info-hover-border-color); } nb-checkbox.status-info .custom-checkbox:hover.indeterminate, nb-checkbox.status-info .custom-checkbox:hover.checked { background-color: var(--checkbox-info-hover-checked-background-color); border-color: var(--checkbox-info-hover-checked-border-color); } nb-checkbox.status-info .native-input:enabled:active + .custom-checkbox { background-color: var(--checkbox-info-active-background-color); border-color: var(--checkbox-info-active-border-color); } nb-checkbox.status-info .native-input:enabled:active + .custom-checkbox.indeterminate, nb-checkbox.status-info .native-input:enabled:active + .custom-checkbox.checked { background-color: var(--checkbox-info-active-checked-background-color); border-color: var(--checkbox-info-active-checked-border-color); } nb-checkbox.status-info .native-input:disabled + .custom-checkbox { background-color: var(--checkbox-info-disabled-background-color); border-color: var(--checkbox-info-disabled-border-color); } nb-checkbox.status-info .native-input:disabled + .custom-checkbox .custom-checkbox-icon { color: var(--checkbox-info-disabled-checkmark-color); } nb-checkbox.status-info .native-input:disabled ~ .text { color: var(--checkbox-info-disabled-text-color); } nb-checkbox.status-info .native-input:disabled:indeterminate + .custom-checkbox, nb-checkbox.status-info .native-input:disabled:checked + .custom-checkbox { background-color: var(--checkbox-info-disabled-checked-background-color); border-color: var(--checkbox-info-disabled-checked-border-color); } nb-checkbox.status-control .custom-checkbox { background-color: var(--checkbox-control-background-color); border-color: var(--checkbox-control-border-color); } nb-checkbox.status-control .text { color: var(--checkbox-control-text-color); } nb-checkbox.status-control .custom-checkbox.checked { background-color: var(--checkbox-control-checked-background-color); border-color: var(--checkbox-control-checked-border-color); } nb-checkbox.status-control .custom-checkbox.checked .custom-checkbox-icon { color: var(--checkbox-control-checked-checkmark-color); } nb-checkbox.status-control .custom-checkbox.indeterminate { background-color: var(--checkbox-control-indeterminate-background-color); border-color: var(--checkbox-control-indeterminate-border-color); } nb-checkbox.status-control .custom-checkbox.indeterminate .custom-checkbox-icon { color: var(--checkbox-control-indeterminate-checkmark-color); } nb-checkbox.status-control .native-input:enabled:focus + .custom-checkbox { background-color: var(--checkbox-control-focus-background-color); border-color: var(--checkbox-control-focus-border-color); } nb-checkbox.status-control .native-input:enabled:focus + .custom-checkbox.indeterminate, nb-checkbox.status-control .native-input:enabled:focus + .custom-checkbox.checked { background-color: var(--checkbox-control-focus-checked-background-color); border-color: var(--checkbox-control-focus-checked-border-color); } nb-checkbox.status-control .custom-checkbox:hover { background-color: var(--checkbox-control-hover-background-color); border-color: var(--checkbox-control-hover-border-color); } nb-checkbox.status-control .custom-checkbox:hover.indeterminate, nb-checkbox.status-control .custom-checkbox:hover.checked { background-color: var(--checkbox-control-hover-checked-background-color); border-color: var(--checkbox-control-hover-checked-border-color); } nb-checkbox.status-control .native-input:enabled:active + .custom-checkbox { background-color: var(--checkbox-control-active-background-color); border-color: var(--checkbox-control-active-border-color); } nb-checkbox.status-control .native-input:enabled:active + .custom-checkbox.indeterminate, nb-checkbox.status-control .native-input:enabled:active + .custom-checkbox.checked { background-color: var(--checkbox-control-active-checked-background-color); border-color: var(--checkbox-control-active-checked-border-color); } nb-checkbox.status-control .native-input:disabled + .custom-checkbox { background-color: var(--checkbox-control-disabled-background-color); border-color: var(--checkbox-control-disabled-border-color); } nb-checkbox.status-control .native-input:disabled + .custom-checkbox .custom-checkbox-icon { color: var(--checkbox-control-disabled-checkmark-color); } nb-checkbox.status-control .native-input:disabled ~ .text { color: var(--checkbox-control-disabled-text-color); } nb-checkbox.status-control .native-input:disabled:indeterminate + .custom-checkbox, nb-checkbox.status-control .native-input:disabled:checked + .custom-checkbox { background-color: var(--checkbox-control-disabled-checked-background-color); border-color: var(--checkbox-control-disabled-checked-border-color); } nb-toggle .toggle { height: var(--toggle-height); width: var(--toggle-width); border-width: var(--toggle-border-width); border-style: solid; border-radius: var(--toggle-border-radius); cursor: var(--toggle-cursor); /* We need to set initial positions as Angular animations won't work in IE11 if positions have no initial value. Setting it in SCSS as we don't have access to theme variables from TS. */ } [dir=ltr] nb-toggle .toggle.checked .toggle-switcher { left: calc(100% - var(--toggle-switcher-size) - var(--toggle-border-width) - var(--toggle-border-width)); } [dir=ltr] nb-toggle .toggle:not(.checked) .toggle-switcher { right: 0; } [dir=rtl] nb-toggle .toggle.checked .toggle-switcher { right: calc(100% - var(--toggle-switcher-size) - var(--toggle-border-width) - var(--toggle-border-width)); } [dir=rtl] nb-toggle .toggle:not(.checked) .toggle-switcher { left: 0; } nb-toggle .native-input:enabled:focus + .toggle { box-shadow: 0 0 0 var(--toggle-outline-width) var(--toggle-outline-color); } nb-toggle .native-input:disabled + .toggle { cursor: var(--toggle-disabled-cursor); } nb-toggle .toggle-switcher { width: var(--toggle-switcher-size); height: var(--toggle-switcher-size); } nb-toggle .toggle-switcher nb-icon { height: var(--toggle-switcher-icon-size); width: var(--toggle-switcher-icon-size); } nb-toggle .text { font-family: var(--toggle-text-font-family); font-size: var(--toggle-text-font-size); font-weight: var(--toggle-text-font-weight); line-height: var(--toggle-text-line-height); } nb-toggle.status-basic .text { color: var(--toggle-basic-text-color); } nb-toggle.status-basic .toggle { background-color: var(--toggle-basic-background-color); border-color: var(--toggle-basic-border-color); } nb-toggle.status-basic .toggle.checked { background-color: var(--toggle-basic-checked-background-color); border-color: var(--toggle-basic-checked-border-color); } nb-toggle.status-basic .native-input:enabled:focus + .toggle { background-color: var(--toggle-basic-focus-background-color); border-color: var(--toggle-basic-focus-border-color); } nb-toggle.status-basic .native-input:enabled:focus + .toggle.checked { background-color: var(--toggle-basic-focus-checked-background-color); border-color: var(--toggle-basic-focus-checked-border-color); } nb-toggle.status-basic .native-input:enabled:active + .toggle { background-color: var(--toggle-basic-active-background-color); border-color: var(--toggle-basic-active-border-color); } nb-toggle.status-basic .native-input:enabled:active + .toggle.checked { background-color: var(--toggle-basic-active-checked-background-color); border-color: var(--toggle-basic-active-checked-border-color); } nb-toggle.status-basic .native-input:enabled + .toggle:hover { background-color: var(--toggle-basic-hover-background-color); border-color: var(--toggle-basic-hover-border-color); } nb-toggle.status-basic .native-input:enabled + .toggle:hover.checked { background-color: var(--toggle-basic-hover-checked-background-color); border-color: var(--toggle-basic-hover-checked-border-color); } nb-toggle.status-basic .toggle-switcher { background-color: var(--toggle-basic-checked-switcher-background-color); } nb-toggle.status-basic .toggle-switcher nb-icon { color: var(--toggle-basic-checked-switcher-checkmark-color); } nb-toggle.status-basic .native-input:disabled + .toggle { background-color: var(--toggle-basic-disabled-background-color); border-color: var(--toggle-basic-disabled-border-color); } nb-toggle.status-basic .native-input:disabled + .toggle .toggle-switcher { background-color: var(--toggle-basic-disabled-switcher-background-color); } nb-toggle.status-basic .native-input:disabled + .toggle .toggle-switcher nb-icon { color: var(--toggle-basic-disabled-checked-switcher-checkmark-color); } nb-toggle.status-basic .native-input:disabled ~ .text { color: var(--toggle-basic-disabled-text-color); } nb-toggle.status-primary .text { color: var(--toggle-primary-text-color); } nb-toggle.status-primary .toggle { background-color: var(--toggle-primary-background-color); border-color: var(--toggle-primary-border-color); } nb-toggle.status-primary .toggle.checked { background-color: var(--toggle-primary-checked-background-color); border-color: var(--toggle-primary-checked-border-color); } nb-toggle.status-primary .native-input:enabled:focus + .toggle { background-color: var(--toggle-primary-focus-background-color); border-color: var(--toggle-primary-focus-border-color); } nb-toggle.status-primary .native-input:enabled:focus + .toggle.checked { background-color: var(--toggle-primary-focus-checked-background-color); border-color: var(--toggle-primary-focus-checked-border-color); } nb-toggle.status-primary .native-input:enabled:active + .toggle { background-color: var(--toggle-primary-active-background-color); border-color: var(--toggle-primary-active-border-color); } nb-toggle.status-primary .native-input:enabled:active + .toggle.checked { background-color: var(--toggle-primary-active-checked-background-color); border-color: var(--toggle-primary-active-checked-border-color); } nb-toggle.status-primary .native-input:enabled + .toggle:hover { background-color: var(--toggle-primary-hover-background-color); border-color: var(--toggle-primary-hover-border-color); } nb-toggle.status-primary .native-input:enabled + .toggle:hover.checked { background-color: var(--toggle-primary-hover-checked-background-color); border-color: var(--toggle-primary-hover-checked-border-color); } nb-toggle.status-primary .toggle-switcher { background-color: var(--toggle-primary-checked-switcher-background-color); } nb-toggle.status-primary .toggle-switcher nb-icon { color: var(--toggle-primary-checked-switcher-checkmark-color); } nb-toggle.status-primary .native-input:disabled + .toggle { background-color: var(--toggle-primary-disabled-background-color); border-color: var(--toggle-primary-disabled-border-color); } nb-toggle.status-primary .native-input:disabled + .toggle .toggle-switcher { background-color: var(--toggle-primary-disabled-switcher-background-color); } nb-toggle.status-primary .native-input:disabled + .toggle .toggle-switcher nb-icon { color: var(--toggle-primary-disabled-checked-switcher-checkmark-color); } nb-toggle.status-primary .native-input:disabled ~ .text { color: var(--toggle-primary-disabled-text-color); } nb-toggle.status-success .text { color: var(--toggle-success-text-color); } nb-toggle.status-success .toggle { background-color: var(--toggle-success-background-color); border-color: var(--toggle-success-border-color); } nb-toggle.status-success .toggle.checked { background-color: var(--toggle-success-checked-background-color); border-color: var(--toggle-success-checked-border-color); } nb-toggle.status-success .native-input:enabled:focus + .toggle { background-color: var(--toggle-success-focus-background-color); border-color: var(--toggle-success-focus-border-color); } nb-toggle.status-success .native-input:enabled:focus + .toggle.checked { background-color: var(--toggle-success-focus-checked-background-color); border-color: var(--toggle-success-focus-checked-border-color); } nb-toggle.status-success .native-input:enabled:active + .toggle { background-color: var(--toggle-success-active-background-color); border-color: var(--toggle-success-active-border-color); } nb-toggle.status-success .native-input:enabled:active + .toggle.checked { background-color: var(--toggle-success-active-checked-background-color); border-color: var(--toggle-success-active-checked-border-color); } nb-toggle.status-success .native-input:enabled + .toggle:hover { background-color: var(--toggle-success-hover-background-color); border-color: var(--toggle-success-hover-border-color); } nb-toggle.status-success .native-input:enabled + .toggle:hover.checked { background-color: var(--toggle-success-hover-checked-background-color); border-color: var(--toggle-success-hover-checked-border-color); } nb-toggle.status-success .toggle-switcher { background-color: var(--toggle-success-checked-switcher-background-color); } nb-toggle.status-success .toggle-switcher nb-icon { color: var(--toggle-success-checked-switcher-checkmark-color); } nb-toggle.status-success .native-input:disabled + .toggle { background-color: var(--toggle-success-disabled-background-color); border-color: var(--toggle-success-disabled-border-color); } nb-toggle.status-success .native-input:disabled + .toggle .toggle-switcher { background-color: var(--toggle-success-disabled-switcher-background-color); } nb-toggle.status-success .native-input:disabled + .toggle .toggle-switcher nb-icon { color: var(--toggle-success-disabled-checked-switcher-checkmark-color); } nb-toggle.status-success .native-input:disabled ~ .text { color: var(--toggle-success-disabled-text-color); } nb-toggle.status-warning .text { color: var(--toggle-warning-text-color); } nb-toggle.status-warning .toggle { background-color: var(--toggle-warning-background-color); border-color: var(--toggle-warning-border-color); } nb-toggle.status-warning .toggle.checked { background-color: var(--toggle-warning-checked-background-color); border-color: var(--toggle-warning-checked-border-color); } nb-toggle.status-warning .native-input:enabled:focus + .toggle { background-color: var(--toggle-warning-focus-background-color); border-color: var(--toggle-warning-focus-border-color); } nb-toggle.status-warning .native-input:enabled:focus + .toggle.checked { background-color: var(--toggle-warning-focus-checked-background-color); border-color: var(--toggle-warning-focus-checked-border-color); } nb-toggle.status-warning .native-input:enabled:active + .toggle { background-color: var(--toggle-warning-active-background-color); border-color: var(--toggle-warning-active-border-color); } nb-toggle.status-warning .native-input:enabled:active + .toggle.checked { background-color: var(--toggle-warning-active-checked-background-color); border-color: var(--toggle-warning-active-checked-border-color); } nb-toggle.status-warning .native-input:enabled + .toggle:hover { background-color: var(--toggle-warning-hover-background-color); border-color: var(--toggle-warning-hover-border-color); } nb-toggle.status-warning .native-input:enabled + .toggle:hover.checked { background-color: var(--toggle-warning-hover-checked-background-color); border-color: var(--toggle-warning-hover-checked-border-color); } nb-toggle.status-warning .toggle-switcher { background-color: var(--toggle-warning-checked-switcher-background-color); } nb-toggle.status-warning .toggle-switcher nb-icon { color: var(--toggle-warning-checked-switcher-checkmark-color); } nb-toggle.status-warning .native-input:disabled + .toggle { background-color: var(--toggle-warning-disabled-background-color); border-color: var(--toggle-warning-disabled-border-color); } nb-toggle.status-warning .native-input:disabled + .toggle .toggle-switcher { background-color: var(--toggle-warning-disabled-switcher-background-color); } nb-toggle.status-warning .native-input:disabled + .toggle .toggle-switcher nb-icon { color: var(--toggle-warning-disabled-checked-switcher-checkmark-color); } nb-toggle.status-warning .native-input:disabled ~ .text { color: var(--toggle-warning-disabled-text-color); } nb-toggle.status-danger .text { color: var(--toggle-danger-text-color); } nb-toggle.status-danger .toggle { background-color: var(--toggle-danger-background-color); border-color: var(--toggle-danger-border-color); } nb-toggle.status-danger .toggle.checked { background-color: var(--toggle-danger-checked-background-color); border-color: var(--toggle-danger-checked-border-color); } nb-toggle.status-danger .native-input:enabled:focus + .toggle { background-color: var(--toggle-danger-focus-background-color); border-color: var(--toggle-danger-focus-border-color); } nb-toggle.status-danger .native-input:enabled:focus + .toggle.checked { background-color: var(--toggle-danger-focus-checked-background-color); border-color: var(--toggle-danger-focus-checked-border-color); } nb-toggle.status-danger .native-input:enabled:active + .toggle { background-color: var(--toggle-danger-active-background-color); border-color: var(--toggle-danger-active-border-color); } nb-toggle.status-danger .native-input:enabled:active + .toggle.checked { background-color: var(--toggle-danger-active-checked-background-color); border-color: var(--toggle-danger-active-checked-border-color); } nb-toggle.status-danger .native-input:enabled + .toggle:hover { background-color: var(--toggle-danger-hover-background-color); border-color: var(--toggle-danger-hover-border-color); } nb-toggle.status-danger .native-input:enabled + .toggle:hover.checked { background-color: var(--toggle-danger-hover-checked-background-color); border-color: var(--toggle-danger-hover-checked-border-color); } nb-toggle.status-danger .toggle-switcher { background-color: var(--toggle-danger-checked-switcher-background-color); } nb-toggle.status-danger .toggle-switcher nb-icon { color: var(--toggle-danger-checked-switcher-checkmark-color); } nb-toggle.status-danger .native-input:disabled + .toggle { background-color: var(--toggle-danger-disabled-background-color); border-color: var(--toggle-danger-disabled-border-color); } nb-toggle.status-danger .native-input:disabled + .toggle .toggle-switcher { background-color: var(--toggle-danger-disabled-switcher-background-color); } nb-toggle.status-danger .native-input:disabled + .toggle .toggle-switcher nb-icon { color: var(--toggle-danger-disabled-checked-switcher-checkmark-color); } nb-toggle.status-danger .native-input:disabled ~ .text { color: var(--toggle-danger-disabled-text-color); } nb-toggle.status-info .text { color: var(--toggle-info-text-color); } nb-toggle.status-info .toggle { background-color: var(--toggle-info-background-color); border-color: var(--toggle-info-border-color); } nb-toggle.status-info .toggle.checked { background-color: var(--toggle-info-checked-background-color); border-color: var(--toggle-info-checked-border-color); } nb-toggle.status-info .native-input:enabled:focus + .toggle { background-color: var(--toggle-info-focus-background-color); border-color: var(--toggle-info-focus-border-color); } nb-toggle.status-info .native-input:enabled:focus + .toggle.checked { background-color: var(--toggle-info-focus-checked-background-color); border-color: var(--toggle-info-focus-checked-border-color); } nb-toggle.status-info .native-input:enabled:active + .toggle { background-color: var(--toggle-info-active-background-color); border-color: var(--toggle-info-active-border-color); } nb-toggle.status-info .native-input:enabled:active + .toggle.checked { background-color: var(--toggle-info-active-checked-background-color); border-color: var(--toggle-info-active-checked-border-color); } nb-toggle.status-info .native-input:enabled + .toggle:hover { background-color: var(--toggle-info-hover-background-color); border-color: var(--toggle-info-hover-border-color); } nb-toggle.status-info .native-input:enabled + .toggle:hover.checked { background-color: var(--toggle-info-hover-checked-background-color); border-color: var(--toggle-info-hover-checked-border-color); } nb-toggle.status-info .toggle-switcher { background-color: var(--toggle-info-checked-switcher-background-color); } nb-toggle.status-info .toggle-switcher nb-icon { color: var(--toggle-info-checked-switcher-checkmark-color); } nb-toggle.status-info .native-input:disabled + .toggle { background-color: var(--toggle-info-disabled-background-color); border-color: var(--toggle-info-disabled-border-color); } nb-toggle.status-info .native-input:disabled + .toggle .toggle-switcher { background-color: var(--toggle-info-disabled-switcher-background-color); } nb-toggle.status-info .native-input:disabled + .toggle .toggle-switcher nb-icon { color: var(--toggle-info-disabled-checked-switcher-checkmark-color); } nb-toggle.status-info .native-input:disabled ~ .text { color: var(--toggle-info-disabled-text-color); } nb-toggle.status-control .text { color: var(--toggle-control-text-color); } nb-toggle.status-control .toggle { background-color: var(--toggle-control-background-color); border-color: var(--toggle-control-border-color); } nb-toggle.status-control .toggle.checked { background-color: var(--toggle-control-checked-background-color); border-color: var(--toggle-control-checked-border-color); } nb-toggle.status-control .native-input:enabled:focus + .toggle { background-color: var(--toggle-control-focus-background-color); border-color: var(--toggle-control-focus-border-color); } nb-toggle.status-control .native-input:enabled:focus + .toggle.checked { background-color: var(--toggle-control-focus-checked-background-color); border-color: var(--toggle-control-focus-checked-border-color); } nb-toggle.status-control .native-input:enabled:active + .toggle { background-color: var(--toggle-control-active-background-color); border-color: var(--toggle-control-active-border-color); } nb-toggle.status-control .native-input:enabled:active + .toggle.checked { background-color: var(--toggle-control-active-checked-background-color); border-color: var(--toggle-control-active-checked-border-color); } nb-toggle.status-control .native-input:enabled + .toggle:hover { background-color: var(--toggle-control-hover-background-color); border-color: var(--toggle-control-hover-border-color); } nb-toggle.status-control .native-input:enabled + .toggle:hover.checked { background-color: var(--toggle-control-hover-checked-background-color); border-color: var(--toggle-control-hover-checked-border-color); } nb-toggle.status-control .toggle-switcher { background-color: var(--toggle-control-checked-switcher-background-color); } nb-toggle.status-control .toggle-switcher nb-icon { color: var(--toggle-control-checked-switcher-checkmark-color); } nb-toggle.status-control .native-input:disabled + .toggle { background-color: var(--toggle-control-disabled-background-color); border-color: var(--toggle-control-disabled-border-color); } nb-toggle.status-control .native-input:disabled + .toggle .toggle-switcher { background-color: var(--toggle-control-disabled-switcher-background-color); } nb-toggle.status-control .native-input:disabled + .toggle .toggle-switcher nb-icon { color: var(--toggle-control-disabled-checked-switcher-checkmark-color); } nb-toggle.status-control .native-input:disabled ~ .text { color: var(--toggle-control-disabled-text-color); } nb-progress-bar .progress-container { border-radius: var(--progress-bar-border-radius); } nb-progress-bar .progress-value { display: flex; align-items: center; justify-content: center; font-family: var(--progress-bar-text-font-family); transition-duration: var(--progress-bar-animation-duration); transition-property: width, background-color; } nb-progress-bar.size-tiny .progress-container { height: var(--progress-bar-tiny-height); } nb-progress-bar.size-tiny .progress-value { font-size: var(--progress-bar-tiny-text-font-size); font-weight: var(--progress-bar-tiny-text-font-weight); line-height: var(--progress-bar-tiny-text-line-height); } nb-progress-bar.size-small .progress-container { height: var(--progress-bar-small-height); } nb-progress-bar.size-small .progress-value { font-size: var(--progress-bar-small-text-font-size); font-weight: var(--progress-bar-small-text-font-weight); line-height: var(--progress-bar-small-text-line-height); } nb-progress-bar.size-medium .progress-container { height: var(--progress-bar-medium-height); } nb-progress-bar.size-medium .progress-value { font-size: var(--progress-bar-medium-text-font-size); font-weight: var(--progress-bar-medium-text-font-weight); line-height: var(--progress-bar-medium-text-line-height); } nb-progress-bar.size-large .progress-container { height: var(--progress-bar-large-height); } nb-progress-bar.size-large .progress-value { font-size: var(--progress-bar-large-text-font-size); font-weight: var(--progress-bar-large-text-font-weight); line-height: var(--progress-bar-large-text-line-height); } nb-progress-bar.size-giant .progress-container { height: var(--progress-bar-giant-height); } nb-progress-bar.size-giant .progress-value { font-size: var(--progress-bar-giant-text-font-size); font-weight: var(--progress-bar-giant-text-font-weight); line-height: var(--progress-bar-giant-text-line-height); } nb-progress-bar.status-basic .progress-container { background-color: var(--progress-bar-basic-background-color); } nb-progress-bar.status-basic .progress-value { background-color: var(--progress-bar-basic-filled-background-color); color: var(--progress-bar-basic-text-color); } nb-progress-bar.status-primary .progress-container { background-color: var(--progress-bar-primary-background-color); } nb-progress-bar.status-primary .progress-value { background-color: var(--progress-bar-primary-filled-background-color); color: var(--progress-bar-primary-text-color); } nb-progress-bar.status-success .progress-container { background-color: var(--progress-bar-success-background-color); } nb-progress-bar.status-success .progress-value { background-color: var(--progress-bar-success-filled-background-color); color: var(--progress-bar-success-text-color); } nb-progress-bar.status-warning .progress-container { background-color: var(--progress-bar-warning-background-color); } nb-progress-bar.status-warning .progress-value { background-color: var(--progress-bar-warning-filled-background-color); color: var(--progress-bar-warning-text-color); } nb-progress-bar.status-danger .progress-container { background-color: var(--progress-bar-danger-background-color); } nb-progress-bar.status-danger .progress-value { background-color: var(--progress-bar-danger-filled-background-color); color: var(--progress-bar-danger-text-color); } nb-progress-bar.status-info .progress-container { background-color: var(--progress-bar-info-background-color); } nb-progress-bar.status-info .progress-value { background-color: var(--progress-bar-info-filled-background-color); color: var(--progress-bar-info-text-color); } nb-progress-bar.status-control .progress-container { background-color: var(--progress-bar-control-background-color); } nb-progress-bar.status-control .progress-value { background-color: var(--progress-bar-control-filled-background-color); color: var(--progress-bar-control-text-color); } nb-badge { border-radius: var(--badge-border-radius); font-family: var(--badge-text-font-family); font-size: var(--badge-text-font-size); font-weight: var(--badge-text-font-weight); line-height: var(--badge-text-line-height); padding: var(--badge-padding); } nb-badge.dot-mode { padding: var(--badge-dot-mode-padding); border-radius: var(--badge-dot-mode-border-radius); } nb-badge.status-basic { color: var(--badge-basic-text-color); background-color: var(--badge-basic-background-color); } nb-badge.status-primary { color: var(--badge-primary-text-color); background-color: var(--badge-primary-background-color); } nb-badge.status-success { color: var(--badge-success-text-color); background-color: var(--badge-success-background-color); } nb-badge.status-warning { color: var(--badge-warning-text-color); background-color: var(--badge-warning-background-color); } nb-badge.status-danger { color: var(--badge-danger-text-color); background-color: var(--badge-danger-background-color); } nb-badge.status-info { color: var(--badge-info-text-color); background-color: var(--badge-info-background-color); } nb-badge.status-control { color: var(--badge-control-text-color); background-color: var(--badge-control-background-color); } nb-stepper.horizontal .header .step { width: var(--stepper-step-index-width); margin: 0 calc(var(--stepper-step-index-width) * 0.5); } nb-stepper.horizontal .header .connector { margin: var(--stepper-horizontal-connector-margin); } nb-stepper.vertical .header .connector { margin: var(--stepper-vertical-connector-margin); } nb-stepper .header .connector { background-color: var(--stepper-connector-background-color); } nb-stepper .header .connector-past { background-color: var(--stepper-connector-completed-background-color); } nb-stepper .header .label-index { border-radius: var(--stepper-step-index-border-radius); border-color: var(--stepper-step-index-border-color); border-style: var(--stepper-step-index-border-style); border-width: var(--stepper-step-index-border-width); width: var(--stepper-step-index-width); height: var(--stepper-step-index-width); } nb-stepper .header .step { color: var(--stepper-step-text-color); font-family: var(--stepper-step-text-font-family); font-size: var(--stepper-step-text-font-size); font-weight: var(--stepper-step-text-font-weight); line-height: var(--stepper-step-text-line-height); } nb-stepper .header .step.label-index { border-color: var(--stepper-step-index-border-color); } nb-stepper .header .step.selected { color: var(--stepper-step-active-text-color); } nb-stepper .header .step.selected .label-index { border-color: var(--stepper-step-index-active-border-color); } nb-stepper .header .step.completed { color: var(--stepper-step-completed-text-color); } nb-stepper .header .step.completed .label-index { background-color: var(--stepper-step-index-completed-background-color); border-color: var(--stepper-step-index-completed-border-color); color: var(--stepper-step-index-completed-text-color); } nb-stepper .step-content { padding: var(--stepper-step-content-padding); } nb-alert { border-radius: var(--alert-border-radius); box-shadow: var(--alert-shadow); font-family: var(--alert-text-font-family); font-size: var(--alert-text-font-size); font-weight: var(--alert-text-font-weight); line-height: var(--alert-text-line-height); padding: var(--alert-padding); margin-bottom: var(--alert-bottom-margin); scrollbar-face-color: var(--alert-scrollbar-color); scrollbar-track-color: var(--alert-scrollbar-background-color); } nb-alert::-webkit-scrollbar { width: var(--alert-scrollbar-width); height: var(--alert-scrollbar-width); } nb-alert::-webkit-scrollbar-thumb { background: var(--alert-scrollbar-color); cursor: pointer; border-radius: calc(var(--alert-scrollbar-width) * 0.5); } nb-alert::-webkit-scrollbar-track { background: var(--alert-scrollbar-background-color); } nb-alert::-webkit-scrollbar-corner { background: var(--alert-scrollbar-background-color); } [dir=ltr] nb-alert.closable { padding-right: var(--alert-closable-start-padding); } [dir=rtl] nb-alert.closable { padding-left: var(--alert-closable-start-padding); } nb-alert .close { padding: var(--alert-padding); font-size: 1.5rem; line-height: 1; cursor: pointer; font-family: monospace; } nb-alert.size-tiny { height: var(--alert-tiny-height); } nb-alert.size-small { height: var(--alert-small-height); } nb-alert.size-medium { height: var(--alert-medium-height); } nb-alert.size-large { height: var(--alert-large-height); } nb-alert.size-giant { height: var(--alert-giant-height); } nb-alert.status-basic { color: var(--alert-basic-text-color); background-color: var(--alert-basic-background-color); } nb-alert.status-basic a, nb-alert.status-basic a:hover { color: var(--alert-basic-text-color); } nb-alert.accent-basic { border-top: var(--alert-border-radius) solid var(--alert-accent-basic-color); } nb-alert.outline-basic { border: var(--alert-outline-width) solid var(--alert-outline-basic-color); } nb-alert.status-primary { color: var(--alert-primary-text-color); background-color: var(--alert-primary-background-color); } nb-alert.status-primary a, nb-alert.status-primary a:hover { color: var(--alert-primary-text-color); } nb-alert.accent-primary { border-top: var(--alert-border-radius) solid var(--alert-accent-primary-color); } nb-alert.outline-primary { border: var(--alert-outline-width) solid var(--alert-outline-primary-color); } nb-alert.status-success { color: var(--alert-success-text-color); background-color: var(--alert-success-background-color); } nb-alert.status-success a, nb-alert.status-success a:hover { color: var(--alert-success-text-color); } nb-alert.accent-success { border-top: var(--alert-border-radius) solid var(--alert-accent-success-color); } nb-alert.outline-success { border: var(--alert-outline-width) solid var(--alert-outline-success-color); } nb-alert.status-warning { color: var(--alert-warning-text-color); background-color: var(--alert-warning-background-color); } nb-alert.status-warning a, nb-alert.status-warning a:hover { color: var(--alert-warning-text-color); } nb-alert.accent-warning { border-top: var(--alert-border-radius) solid var(--alert-accent-warning-color); } nb-alert.outline-warning { border: var(--alert-outline-width) solid var(--alert-outline-warning-color); } nb-alert.status-danger { color: var(--alert-danger-text-color); background-color: var(--alert-danger-background-color); } nb-alert.status-danger a, nb-alert.status-danger a:hover { color: var(--alert-danger-text-color); } nb-alert.accent-danger { border-top: var(--alert-border-radius) solid var(--alert-accent-danger-color); } nb-alert.outline-danger { border: var(--alert-outline-width) solid var(--alert-outline-danger-color); } nb-alert.status-info { color: var(--alert-info-text-color); background-color: var(--alert-info-background-color); } nb-alert.status-info a, nb-alert.status-info a:hover { color: var(--alert-info-text-color); } nb-alert.accent-info { border-top: var(--alert-border-radius) solid var(--alert-accent-info-color); } nb-alert.outline-info { border: var(--alert-outline-width) solid var(--alert-outline-info-color); } nb-alert.status-control { color: var(--alert-control-text-color); background-color: var(--alert-control-background-color); } nb-alert.status-control a, nb-alert.status-control a:hover { color: var(--alert-control-text-color); } nb-alert.accent-control { border-top: var(--alert-border-radius) solid var(--alert-accent-control-color); } nb-alert.outline-control { border: var(--alert-outline-width) solid var(--alert-outline-control-color); } nb-chat { background-color: var(--chat-background-color); border: var(--chat-border); border-radius: var(--chat-border-radius); box-shadow: var(--chat-shadow); color: var(--chat-text-color); font-family: var(--chat-text-font-family); font-size: var(--chat-text-font-size); font-weight: var(--chat-text-font-weight); line-height: var(--chat-text-line-height); } nb-chat nb-icon { font-size: inherit; } nb-chat .header { border-bottom: var(--chat-divider-width) var(--chat-divider-style) var(--chat-divider-color); border-top-left-radius: var(--chat-border-radius); border-top-right-radius: var(--chat-border-radius); padding: var(--chat-padding); font-family: var(--chat-header-text-font-family); font-size: var(--chat-header-text-font-size); font-weight: var(--chat-header-text-font-weight); line-height: var(--chat-header-text-line-height); } nb-chat .scrollable { overflow: auto; flex: 1; scrollbar-face-color: var(--chat-scrollbar-color); scrollbar-track-color: var(--chat-scrollbar-background-color); } nb-chat .scrollable::-webkit-scrollbar { width: var(--chat-scrollbar-width); height: var(--chat-scrollbar-width); } nb-chat .scrollable::-webkit-scrollbar-thumb { background: var(--chat-scrollbar-color); cursor: pointer; border-radius: calc(var(--chat-scrollbar-width) * 0.5); } nb-chat .scrollable::-webkit-scrollbar-track { background: var(--chat-scrollbar-background-color); } nb-chat .scrollable::-webkit-scrollbar-corner { background: var(--chat-scrollbar-background-color); } nb-chat .messages { padding: var(--chat-padding); overflow-y: auto; overflow-x: hidden; display: flex; flex-shrink: 0; flex-direction: column; } nb-chat .no-messages { text-align: center; } nb-chat.size-tiny { height: var(--chat-tiny-height); } nb-chat.size-small { height: var(--chat-small-height); } nb-chat.size-medium { height: var(--chat-medium-height); } nb-chat.size-large { height: var(--chat-large-height); } nb-chat.size-giant { height: var(--chat-giant-height); } nb-chat.status-basic .header { background-color: var(--chat-basic-background-color); color: var(--chat-basic-text-color); } nb-chat.status-primary .header { background-color: var(--chat-primary-background-color); color: var(--chat-primary-text-color); } nb-chat.status-success .header { background-color: var(--chat-success-background-color); color: var(--chat-success-text-color); } nb-chat.status-warning .header { background-color: var(--chat-warning-background-color); color: var(--chat-warning-text-color); } nb-chat.status-danger .header { background-color: var(--chat-danger-background-color); color: var(--chat-danger-text-color); } nb-chat.status-info .header { background-color: var(--chat-info-background-color); color: var(--chat-info-text-color); } nb-chat.status-control .header { background-color: var(--chat-control-background-color); color: var(--chat-control-text-color); } nb-chat-message { margin-bottom: 1.5rem; display: flex; flex-direction: row; } nb-chat-message .message { flex: 1; } nb-chat-message .avatar { display: block; border-radius: 50%; flex-shrink: 0; background: var(--chat-message-avatar-background-color); background-position: center; background-size: cover; background-repeat: no-repeat; width: 2.5rem; height: 2.5rem; text-align: center; line-height: 2.5rem; font-size: 0.875rem; color: white; } nb-chat-message nb-chat-message-text { display: flex; flex-direction: column; } nb-chat-message nb-chat-message-text .sender { font-size: 0.875rem; color: var(--chat-message-sender-text-color); margin-top: 0; margin-bottom: 0.5rem; } nb-chat-message nb-chat-message-text p { word-break: break-word; white-space: pre-wrap; max-width: 100%; margin-top: 0; margin-bottom: 0; } nb-chat-message nb-chat-message-text .text { padding: 1rem; border-radius: 0.5rem; } nb-chat-message nb-chat-message-file { display: flex; flex-direction: column; } nb-chat-message nb-chat-message-file a { color: var(--chat-message-file-text-color); background: var(--chat-message-file-background-color); font-size: 4rem; text-align: center; border: 1px solid var(--chat-message-file-text-color); width: 10rem; height: 10rem; overflow: hidden; display: flex; justify-content: center; align-items: center; flex-shrink: 0; border-radius: 0.5rem; } nb-chat-message nb-chat-message-file a:hover, nb-chat-message nb-chat-message-file a:focus { text-decoration: none; color: var(--chat-message-file-text-color); } nb-chat-message nb-chat-message-file a div { background-size: cover; width: 100%; height: 100%; } nb-chat-message nb-chat-message-file nb-chat-message-text { display: block; margin-bottom: 0.5rem; } nb-chat-message nb-chat-message-file .message-content-group { display: flex; flex-direction: row; justify-content: flex-end; flex-wrap: wrap; } nb-chat-message nb-chat-message-file .message-content-group a { margin-bottom: 1rem; width: 5rem; height: 5rem; } [dir=ltr] nb-chat-message nb-chat-message-file .message-content-group a { margin-right: 1rem; } [dir=rtl] nb-chat-message nb-chat-message-file .message-content-group a { margin-left: 1rem; } nb-chat-message nb-chat-message-quote p.quote { font-style: italic; font-size: 0.875rem; background: var(--chat-message-quote-background-color); color: var(--chat-message-quote-text-color); padding: 1rem; border-radius: 0.5rem; margin-top: 0; margin-bottom: 0.5rem; } nb-chat-message nb-chat-message-quote .sender { font-size: 0.875rem; color: var(--chat-message-sender-text-color); margin-bottom: 0.5rem; } [dir=ltr] nb-chat-message.not-reply .message { margin-left: 0.5rem; } [dir=rtl] nb-chat-message.not-reply .message { margin-right: 0.5rem; } [dir=ltr] nb-chat-message.not-reply .message { margin-right: 3rem; } [dir=rtl] nb-chat-message.not-reply .message { margin-left: 3rem; } nb-chat-message.not-reply nb-chat-message-text { align-items: flex-start; } nb-chat-message.not-reply nb-chat-message-text .text { background: var(--chat-message-background); color: var(--chat-message-text-color); } [dir=ltr] nb-chat-message.not-reply nb-chat-message-text .text { border-top-left-radius: 0; } [dir=rtl] nb-chat-message.not-reply nb-chat-message-text .text { border-top-right-radius: 0; } nb-chat-message.not-reply nb-chat-message-file { align-items: flex-start; } nb-chat-message.reply { flex-direction: row-reverse; } nb-chat-message.reply .message { display: flex; flex-direction: column; align-items: flex-end; margin-left: 0; } [dir=ltr] nb-chat-message.reply .message { margin-right: 0.5rem; } [dir=rtl] nb-chat-message.reply .message { margin-left: 0.5rem; } [dir=ltr] nb-chat-message.reply .message { margin-left: 3rem; } [dir=rtl] nb-chat-message.reply .message { margin-right: 3rem; } nb-chat-message.reply nb-chat-message-text { align-items: flex-end; } [dir=ltr] nb-chat-message.reply nb-chat-message-text .sender { text-align: right; } [dir=rtl] nb-chat-message.reply nb-chat-message-text .sender { text-align: left; } nb-chat-message.reply nb-chat-message-text .text { background: var(--chat-message-reply-background-color); color: var(--chat-message-reply-text-color); } [dir=ltr] nb-chat-message.reply nb-chat-message-text .text { border-top-right-radius: 0; } [dir=rtl] nb-chat-message.reply nb-chat-message-text .text { border-top-left-radius: 0; } nb-chat-message.reply nb-chat-message-file { align-items: flex-end; } nb-chat-form { display: flex; flex-direction: column; padding: var(--chat-padding); border-top: var(--chat-divider-width) var(--chat-divider-style) var(--chat-divider-color); } nb-chat-form .message-row { flex-direction: row; display: flex; } nb-chat-form input { flex: 1; } nb-chat-form input.with-button { border-bottom-right-radius: 0; border-top-right-radius: 0; } [dir=ltr] nb-chat-form input.with-button { border-bottom-right-radius: 0; border-top-right-radius: 0; } [dir=rtl] nb-chat-form input.with-button { border-bottom-left-radius: 0; border-top-left-radius: 0; } nb-chat-form .send-button nb-icon { font-size: 1.5rem; } [dir=ltr] nb-chat-form .send-button { border-bottom-left-radius: 0; border-top-left-radius: 0; } [dir=rtl] nb-chat-form .send-button { border-bottom-right-radius: 0; border-top-right-radius: 0; } nb-chat-form .dropped-files { display: flex; flex-direction: row; margin-bottom: 0.5rem; flex-wrap: wrap; } nb-chat-form .dropped-files div { background-size: cover; width: 3rem; height: 3rem; border-radius: 0.5rem; margin-bottom: 0.5rem; border: 1px solid currentColor; text-align: center; font-size: 2rem; position: relative; } [dir=ltr] nb-chat-form .dropped-files div { margin-right: 0.5rem; } [dir=rtl] nb-chat-form .dropped-files div { margin-left: 0.5rem; } nb-chat-form .dropped-files div .remove { position: absolute; right: -0.5rem; top: -0.875rem; font-size: 0.875rem; line-height: 1; cursor: pointer; } nb-chat-form .dropped-files div nb-icon { width: 65%; height: 100%; } .nb-custom-message { display: inline-block; padding: var(--chat-padding); margin-top: 0.5rem; border-radius: 0.5rem; } .nb-custom-message-full-width { width: 100%; } .nb-custom-message-no-space { margin-top: 0; } .nb-custom-message-not-reply { background: var(--chat-message-background); color: var(--chat-message-text-color); } [dir=ltr] .nb-custom-message-not-reply { border-top-left-radius: 0; } [dir=rtl] .nb-custom-message-not-reply { border-top-right-radius: 0; } .nb-custom-message-not-reply a, .nb-custom-message-not-reply a:hover, .nb-custom-message-not-reply a:focus { color: var(--chat-message-text-color); } .nb-custom-message-reply { background: var(--chat-message-reply-background-color); color: var(--chat-message-reply-text-color); } [dir=ltr] .nb-custom-message-reply { border-top-right-radius: 0; } [dir=rtl] .nb-custom-message-reply { border-top-left-radius: 0; } nb-accordion { display: block; box-shadow: var(--accordion-shadow); border-radius: var(--accordion-border-radius); } nb-accordion-item-header { position: relative; border-bottom-width: var(--accordion-header-border-width); border-bottom-style: var(--accordion-header-border-style); border-bottom-color: var(--accordion-header-border-color); color: var(--accordion-header-text-color); font-family: var(--accordion-header-text-font-family); font-size: var(--accordion-header-text-font-size); font-weight: var(--accordion-header-text-font-weight); line-height: var(--accordion-header-text-line-height); padding: var(--accordion-padding); } nb-accordion-item-header h1 { margin: 0; } nb-accordion-item-header h2 { margin: 0; } nb-accordion-item-header h3 { margin: 0; } nb-accordion-item-header h4 { margin: 0; } nb-accordion-item-header h5 { margin: 0; } nb-accordion-item-header h6 { margin: 0; } nb-accordion-item-header .expansion-indicator { position: absolute; } [dir=ltr] nb-accordion-item-header .expansion-indicator { right: 1rem; } [dir=rtl] nb-accordion-item-header .expansion-indicator { left: 1rem; } nb-accordion-item { background-color: var(--accordion-item-background-color); color: var(--accordion-item-text-color); font-family: var(--accordion-item-text-font-family); font-size: var(--accordion-item-text-font-size); font-weight: var(--accordion-item-text-font-weight); line-height: var(--accordion-item-text-line-height); } nb-accordion-item.disabled nb-accordion-item-header { color: var(--accordion-header-disabled-text-color); cursor: default; } nb-accordion-item:first-child { border-top-left-radius: var(--accordion-border-radius); border-top-right-radius: var(--accordion-border-radius); } nb-accordion-item:last-child { border-bottom-left-radius: var(--accordion-border-radius); border-bottom-right-radius: var(--accordion-border-radius); } nb-accordion-item:last-child.collapsed nb-accordion-item-header { border-bottom: none; } nb-accordion-item:not(.collapsed) + nb-accordion-item nb-accordion-item-header { border-top-color: var(--accordion-header-border-color); border-top-style: var(--accordion-header-border-style); border-top-width: var(--accordion-header-border-width); } nb-accordion-item-body .item-body { flex: 1; -ms-flex: 1 1 auto; overflow: auto; padding: var(--accordion-padding); position: relative; } [nbButton], [nbButtonToggle] { -webkit-appearance: none; -moz-appearance: none; appearance: none; text-align: center; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: var(--button-cursor); font-family: var(--button-text-font-family); font-weight: var(--button-text-font-weight); } [nbButton]:hover, [nbButtonToggle]:hover, [nbButton]:focus, [nbButtonToggle]:focus { text-decoration: none; } [nbButton].full-width, .full-width[nbButtonToggle] { width: 100%; } [nbButton] nb-icon, [nbButtonToggle] nb-icon { vertical-align: top; } [nbButton].nb-transition, .nb-transition[nbButtonToggle] { transition-duration: 0.15s; transition-property: background-color, border-color, box-shadow, color; transition-timing-function: ease-in; } [nbButton]:focus, [nbButtonToggle]:focus { position: relative; outline: none; box-shadow: 0 0 0 var(--button-outline-width) var(--button-outline-color); } [nbButton][disabled], [disabled][nbButtonToggle], [nbButton].btn-disabled, .btn-disabled[nbButtonToggle] { cursor: var(--button-disabled-cursor); } [nbButton].size-tiny, .size-tiny[nbButtonToggle] { font-size: var(--button-tiny-text-font-size); line-height: var(--button-tiny-text-line-height); } [nbButton].size-tiny nb-icon, .size-tiny[nbButtonToggle] nb-icon { font-size: var(--button-tiny-text-font-size); height: var(--button-tiny-icon-size); width: var(--button-tiny-icon-size); margin-top: var(--button-tiny-icon-vertical-margin); margin-bottom: var(--button-tiny-icon-vertical-margin); } [dir=ltr] [nbButton].size-tiny.icon-start:not(.icon-end) nb-icon, [dir=ltr] .size-tiny.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-right: var(--button-tiny-icon-offset); } [dir=rtl] [nbButton].size-tiny.icon-start:not(.icon-end) nb-icon, [dir=rtl] .size-tiny.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-left: var(--button-tiny-icon-offset); } [dir=ltr] [nbButton].size-tiny.icon-end:not(.icon-start) nb-icon, [dir=ltr] .size-tiny.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-left: var(--button-tiny-icon-offset); } [dir=rtl] [nbButton].size-tiny.icon-end:not(.icon-start) nb-icon, [dir=rtl] .size-tiny.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-right: var(--button-tiny-icon-offset); } [nbButton].size-tiny.icon-start.icon-end.appearance-filled, .size-tiny.icon-start.icon-end.appearance-filled[nbButtonToggle] { padding: var(--icon-button-filled-tiny-padding); } [nbButton].size-tiny.icon-start.icon-end.appearance-outline, .size-tiny.icon-start.icon-end.appearance-outline[nbButtonToggle] { padding: var(--icon-button-outline-tiny-padding); } [nbButton].size-tiny.icon-start.icon-end.appearance-ghost, .size-tiny.icon-start.icon-end.appearance-ghost[nbButtonToggle] { padding: var(--icon-button-ghost-tiny-padding); } [nbButton].size-tiny.icon-start.icon-end.appearance-hero, .size-tiny.icon-start.icon-end.appearance-hero[nbButtonToggle] { padding: var(--icon-button-hero-tiny-padding); } [nbButton].size-small, .size-small[nbButtonToggle] { font-size: var(--button-small-text-font-size); line-height: var(--button-small-text-line-height); } [nbButton].size-small nb-icon, .size-small[nbButtonToggle] nb-icon { font-size: var(--button-small-text-font-size); height: var(--button-small-icon-size); width: var(--button-small-icon-size); margin-top: var(--button-small-icon-vertical-margin); margin-bottom: var(--button-small-icon-vertical-margin); } [dir=ltr] [nbButton].size-small.icon-start:not(.icon-end) nb-icon, [dir=ltr] .size-small.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-right: var(--button-small-icon-offset); } [dir=rtl] [nbButton].size-small.icon-start:not(.icon-end) nb-icon, [dir=rtl] .size-small.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-left: var(--button-small-icon-offset); } [dir=ltr] [nbButton].size-small.icon-end:not(.icon-start) nb-icon, [dir=ltr] .size-small.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-left: var(--button-small-icon-offset); } [dir=rtl] [nbButton].size-small.icon-end:not(.icon-start) nb-icon, [dir=rtl] .size-small.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-right: var(--button-small-icon-offset); } [nbButton].size-small.icon-start.icon-end.appearance-filled, .size-small.icon-start.icon-end.appearance-filled[nbButtonToggle] { padding: var(--icon-button-filled-small-padding); } [nbButton].size-small.icon-start.icon-end.appearance-outline, .size-small.icon-start.icon-end.appearance-outline[nbButtonToggle] { padding: var(--icon-button-outline-small-padding); } [nbButton].size-small.icon-start.icon-end.appearance-ghost, .size-small.icon-start.icon-end.appearance-ghost[nbButtonToggle] { padding: var(--icon-button-ghost-small-padding); } [nbButton].size-small.icon-start.icon-end.appearance-hero, .size-small.icon-start.icon-end.appearance-hero[nbButtonToggle] { padding: var(--icon-button-hero-small-padding); } [nbButton].size-medium, .size-medium[nbButtonToggle] { font-size: var(--button-medium-text-font-size); line-height: var(--button-medium-text-line-height); } [nbButton].size-medium nb-icon, .size-medium[nbButtonToggle] nb-icon { font-size: var(--button-medium-text-font-size); height: var(--button-medium-icon-size); width: var(--button-medium-icon-size); margin-top: var(--button-medium-icon-vertical-margin); margin-bottom: var(--button-medium-icon-vertical-margin); } [dir=ltr] [nbButton].size-medium.icon-start:not(.icon-end) nb-icon, [dir=ltr] .size-medium.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-right: var(--button-medium-icon-offset); } [dir=rtl] [nbButton].size-medium.icon-start:not(.icon-end) nb-icon, [dir=rtl] .size-medium.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-left: var(--button-medium-icon-offset); } [dir=ltr] [nbButton].size-medium.icon-end:not(.icon-start) nb-icon, [dir=ltr] .size-medium.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-left: var(--button-medium-icon-offset); } [dir=rtl] [nbButton].size-medium.icon-end:not(.icon-start) nb-icon, [dir=rtl] .size-medium.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-right: var(--button-medium-icon-offset); } [nbButton].size-medium.icon-start.icon-end.appearance-filled, .size-medium.icon-start.icon-end.appearance-filled[nbButtonToggle] { padding: var(--icon-button-filled-medium-padding); } [nbButton].size-medium.icon-start.icon-end.appearance-outline, .size-medium.icon-start.icon-end.appearance-outline[nbButtonToggle] { padding: var(--icon-button-outline-medium-padding); } [nbButton].size-medium.icon-start.icon-end.appearance-ghost, .size-medium.icon-start.icon-end.appearance-ghost[nbButtonToggle] { padding: var(--icon-button-ghost-medium-padding); } [nbButton].size-medium.icon-start.icon-end.appearance-hero, .size-medium.icon-start.icon-end.appearance-hero[nbButtonToggle] { padding: var(--icon-button-hero-medium-padding); } [nbButton].size-large, .size-large[nbButtonToggle] { font-size: var(--button-large-text-font-size); line-height: var(--button-large-text-line-height); } [nbButton].size-large nb-icon, .size-large[nbButtonToggle] nb-icon { font-size: var(--button-large-text-font-size); height: var(--button-large-icon-size); width: var(--button-large-icon-size); margin-top: var(--button-large-icon-vertical-margin); margin-bottom: var(--button-large-icon-vertical-margin); } [dir=ltr] [nbButton].size-large.icon-start:not(.icon-end) nb-icon, [dir=ltr] .size-large.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-right: var(--button-large-icon-offset); } [dir=rtl] [nbButton].size-large.icon-start:not(.icon-end) nb-icon, [dir=rtl] .size-large.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-left: var(--button-large-icon-offset); } [dir=ltr] [nbButton].size-large.icon-end:not(.icon-start) nb-icon, [dir=ltr] .size-large.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-left: var(--button-large-icon-offset); } [dir=rtl] [nbButton].size-large.icon-end:not(.icon-start) nb-icon, [dir=rtl] .size-large.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-right: var(--button-large-icon-offset); } [nbButton].size-large.icon-start.icon-end.appearance-filled, .size-large.icon-start.icon-end.appearance-filled[nbButtonToggle] { padding: var(--icon-button-filled-large-padding); } [nbButton].size-large.icon-start.icon-end.appearance-outline, .size-large.icon-start.icon-end.appearance-outline[nbButtonToggle] { padding: var(--icon-button-outline-large-padding); } [nbButton].size-large.icon-start.icon-end.appearance-ghost, .size-large.icon-start.icon-end.appearance-ghost[nbButtonToggle] { padding: var(--icon-button-ghost-large-padding); } [nbButton].size-large.icon-start.icon-end.appearance-hero, .size-large.icon-start.icon-end.appearance-hero[nbButtonToggle] { padding: var(--icon-button-hero-large-padding); } [nbButton].size-giant, .size-giant[nbButtonToggle] { font-size: var(--button-giant-text-font-size); line-height: var(--button-giant-text-line-height); } [nbButton].size-giant nb-icon, .size-giant[nbButtonToggle] nb-icon { font-size: var(--button-giant-text-font-size); height: var(--button-giant-icon-size); width: var(--button-giant-icon-size); margin-top: var(--button-giant-icon-vertical-margin); margin-bottom: var(--button-giant-icon-vertical-margin); } [dir=ltr] [nbButton].size-giant.icon-start:not(.icon-end) nb-icon, [dir=ltr] .size-giant.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-right: var(--button-giant-icon-offset); } [dir=rtl] [nbButton].size-giant.icon-start:not(.icon-end) nb-icon, [dir=rtl] .size-giant.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-left: var(--button-giant-icon-offset); } [dir=ltr] [nbButton].size-giant.icon-end:not(.icon-start) nb-icon, [dir=ltr] .size-giant.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-left: var(--button-giant-icon-offset); } [dir=rtl] [nbButton].size-giant.icon-end:not(.icon-start) nb-icon, [dir=rtl] .size-giant.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-right: var(--button-giant-icon-offset); } [nbButton].size-giant.icon-start.icon-end.appearance-filled, .size-giant.icon-start.icon-end.appearance-filled[nbButtonToggle] { padding: var(--icon-button-filled-giant-padding); } [nbButton].size-giant.icon-start.icon-end.appearance-outline, .size-giant.icon-start.icon-end.appearance-outline[nbButtonToggle] { padding: var(--icon-button-outline-giant-padding); } [nbButton].size-giant.icon-start.icon-end.appearance-ghost, .size-giant.icon-start.icon-end.appearance-ghost[nbButtonToggle] { padding: var(--icon-button-ghost-giant-padding); } [nbButton].size-giant.icon-start.icon-end.appearance-hero, .size-giant.icon-start.icon-end.appearance-hero[nbButtonToggle] { padding: var(--icon-button-hero-giant-padding); } [nbButton].shape-rectangle, .shape-rectangle[nbButtonToggle] { border-radius: var(--button-rectangle-border-radius); } [nbButton].shape-semi-round, .shape-semi-round[nbButtonToggle] { border-radius: var(--button-semi-round-border-radius); } [nbButton].shape-round, .shape-round[nbButtonToggle] { border-radius: var(--button-round-border-radius); } a[nbButton], a[nbButtonToggle] { text-decoration: none; } [nbButton].appearance-filled, .appearance-filled[nbButtonToggle] { border-style: var(--button-filled-border-style); border-width: var(--button-filled-border-width); text-transform: var(--button-filled-text-transform); } [nbButton].appearance-filled.size-tiny, .appearance-filled.size-tiny[nbButtonToggle] { padding: var(--button-filled-tiny-padding); } [nbButton].appearance-filled.size-small, .appearance-filled.size-small[nbButtonToggle] { padding: var(--button-filled-small-padding); } [nbButton].appearance-filled.size-medium, .appearance-filled.size-medium[nbButtonToggle] { padding: var(--button-filled-medium-padding); } [nbButton].appearance-filled.size-large, .appearance-filled.size-large[nbButtonToggle] { padding: var(--button-filled-large-padding); } [nbButton].appearance-filled.size-giant, .appearance-filled.size-giant[nbButtonToggle] { padding: var(--button-filled-giant-padding); } [nbButton].appearance-filled.status-basic, .appearance-filled.status-basic[nbButtonToggle] { background-color: var(--button-filled-basic-background-color); border-color: var(--button-filled-basic-border-color); color: var(--button-filled-basic-text-color); } [nbButton].appearance-filled.status-basic:focus, .appearance-filled.status-basic[nbButtonToggle]:focus { background-color: var(--button-filled-basic-focus-background-color); border-color: var(--button-filled-basic-focus-border-color); } [nbButton].appearance-filled.status-basic:hover, .appearance-filled.status-basic[nbButtonToggle]:hover { background-color: var(--button-filled-basic-hover-background-color); border-color: var(--button-filled-basic-hover-border-color); } [nbButton].appearance-filled.status-basic:active, .appearance-filled.status-basic[nbButtonToggle]:active { background-color: var(--button-filled-basic-active-background-color); border-color: var(--button-filled-basic-active-border-color); } [nbButton].appearance-filled.status-basic[disabled], .appearance-filled.status-basic[disabled][nbButtonToggle], [nbButton].appearance-filled.status-basic.btn-disabled, .appearance-filled.status-basic.btn-disabled[nbButtonToggle] { background-color: var(--button-filled-basic-disabled-background-color); border-color: var(--button-filled-basic-disabled-border-color); color: var(--button-filled-basic-disabled-text-color); } [nbButton].appearance-filled.status-primary, .appearance-filled.status-primary[nbButtonToggle] { background-color: var(--button-filled-primary-background-color); border-color: var(--button-filled-primary-border-color); color: var(--button-filled-primary-text-color); } [nbButton].appearance-filled.status-primary:focus, .appearance-filled.status-primary[nbButtonToggle]:focus { background-color: var(--button-filled-primary-focus-background-color); border-color: var(--button-filled-primary-focus-border-color); } [nbButton].appearance-filled.status-primary:hover, .appearance-filled.status-primary[nbButtonToggle]:hover { background-color: var(--button-filled-primary-hover-background-color); border-color: var(--button-filled-primary-hover-border-color); } [nbButton].appearance-filled.status-primary:active, .appearance-filled.status-primary[nbButtonToggle]:active { background-color: var(--button-filled-primary-active-background-color); border-color: var(--button-filled-primary-active-border-color); } [nbButton].appearance-filled.status-primary[disabled], .appearance-filled.status-primary[disabled][nbButtonToggle], [nbButton].appearance-filled.status-primary.btn-disabled, .appearance-filled.status-primary.btn-disabled[nbButtonToggle] { background-color: var(--button-filled-primary-disabled-background-color); border-color: var(--button-filled-primary-disabled-border-color); color: var(--button-filled-primary-disabled-text-color); } [nbButton].appearance-filled.status-success, .appearance-filled.status-success[nbButtonToggle] { background-color: var(--button-filled-success-background-color); border-color: var(--button-filled-success-border-color); color: var(--button-filled-success-text-color); } [nbButton].appearance-filled.status-success:focus, .appearance-filled.status-success[nbButtonToggle]:focus { background-color: var(--button-filled-success-focus-background-color); border-color: var(--button-filled-success-focus-border-color); } [nbButton].appearance-filled.status-success:hover, .appearance-filled.status-success[nbButtonToggle]:hover { background-color: var(--button-filled-success-hover-background-color); border-color: var(--button-filled-success-hover-border-color); } [nbButton].appearance-filled.status-success:active, .appearance-filled.status-success[nbButtonToggle]:active { background-color: var(--button-filled-success-active-background-color); border-color: var(--button-filled-success-active-border-color); } [nbButton].appearance-filled.status-success[disabled], .appearance-filled.status-success[disabled][nbButtonToggle], [nbButton].appearance-filled.status-success.btn-disabled, .appearance-filled.status-success.btn-disabled[nbButtonToggle] { background-color: var(--button-filled-success-disabled-background-color); border-color: var(--button-filled-success-disabled-border-color); color: var(--button-filled-success-disabled-text-color); } [nbButton].appearance-filled.status-warning, .appearance-filled.status-warning[nbButtonToggle] { background-color: var(--button-filled-warning-background-color); border-color: var(--button-filled-warning-border-color); color: var(--button-filled-warning-text-color); } [nbButton].appearance-filled.status-warning:focus, .appearance-filled.status-warning[nbButtonToggle]:focus { background-color: var(--button-filled-warning-focus-background-color); border-color: var(--button-filled-warning-focus-border-color); } [nbButton].appearance-filled.status-warning:hover, .appearance-filled.status-warning[nbButtonToggle]:hover { background-color: var(--button-filled-warning-hover-background-color); border-color: var(--button-filled-warning-hover-border-color); } [nbButton].appearance-filled.status-warning:active, .appearance-filled.status-warning[nbButtonToggle]:active { background-color: var(--button-filled-warning-active-background-color); border-color: var(--button-filled-warning-active-border-color); } [nbButton].appearance-filled.status-warning[disabled], .appearance-filled.status-warning[disabled][nbButtonToggle], [nbButton].appearance-filled.status-warning.btn-disabled, .appearance-filled.status-warning.btn-disabled[nbButtonToggle] { background-color: var(--button-filled-warning-disabled-background-color); border-color: var(--button-filled-warning-disabled-border-color); color: var(--button-filled-warning-disabled-text-color); } [nbButton].appearance-filled.status-danger, .appearance-filled.status-danger[nbButtonToggle] { background-color: var(--button-filled-danger-background-color); border-color: var(--button-filled-danger-border-color); color: var(--button-filled-danger-text-color); } [nbButton].appearance-filled.status-danger:focus, .appearance-filled.status-danger[nbButtonToggle]:focus { background-color: var(--button-filled-danger-focus-background-color); border-color: var(--button-filled-danger-focus-border-color); } [nbButton].appearance-filled.status-danger:hover, .appearance-filled.status-danger[nbButtonToggle]:hover { background-color: var(--button-filled-danger-hover-background-color); border-color: var(--button-filled-danger-hover-border-color); } [nbButton].appearance-filled.status-danger:active, .appearance-filled.status-danger[nbButtonToggle]:active { background-color: var(--button-filled-danger-active-background-color); border-color: var(--button-filled-danger-active-border-color); } [nbButton].appearance-filled.status-danger[disabled], .appearance-filled.status-danger[disabled][nbButtonToggle], [nbButton].appearance-filled.status-danger.btn-disabled, .appearance-filled.status-danger.btn-disabled[nbButtonToggle] { background-color: var(--button-filled-danger-disabled-background-color); border-color: var(--button-filled-danger-disabled-border-color); color: var(--button-filled-danger-disabled-text-color); } [nbButton].appearance-filled.status-info, .appearance-filled.status-info[nbButtonToggle] { background-color: var(--button-filled-info-background-color); border-color: var(--button-filled-info-border-color); color: var(--button-filled-info-text-color); } [nbButton].appearance-filled.status-info:focus, .appearance-filled.status-info[nbButtonToggle]:focus { background-color: var(--button-filled-info-focus-background-color); border-color: var(--button-filled-info-focus-border-color); } [nbButton].appearance-filled.status-info:hover, .appearance-filled.status-info[nbButtonToggle]:hover { background-color: var(--button-filled-info-hover-background-color); border-color: var(--button-filled-info-hover-border-color); } [nbButton].appearance-filled.status-info:active, .appearance-filled.status-info[nbButtonToggle]:active { background-color: var(--button-filled-info-active-background-color); border-color: var(--button-filled-info-active-border-color); } [nbButton].appearance-filled.status-info[disabled], .appearance-filled.status-info[disabled][nbButtonToggle], [nbButton].appearance-filled.status-info.btn-disabled, .appearance-filled.status-info.btn-disabled[nbButtonToggle] { background-color: var(--button-filled-info-disabled-background-color); border-color: var(--button-filled-info-disabled-border-color); color: var(--button-filled-info-disabled-text-color); } [nbButton].appearance-filled.status-control, .appearance-filled.status-control[nbButtonToggle] { background-color: var(--button-filled-control-background-color); border-color: var(--button-filled-control-border-color); color: var(--button-filled-control-text-color); } [nbButton].appearance-filled.status-control:focus, .appearance-filled.status-control[nbButtonToggle]:focus { background-color: var(--button-filled-control-focus-background-color); border-color: var(--button-filled-control-focus-border-color); } [nbButton].appearance-filled.status-control:hover, .appearance-filled.status-control[nbButtonToggle]:hover { background-color: var(--button-filled-control-hover-background-color); border-color: var(--button-filled-control-hover-border-color); } [nbButton].appearance-filled.status-control:active, .appearance-filled.status-control[nbButtonToggle]:active { background-color: var(--button-filled-control-active-background-color); border-color: var(--button-filled-control-active-border-color); } [nbButton].appearance-filled.status-control[disabled], .appearance-filled.status-control[disabled][nbButtonToggle], [nbButton].appearance-filled.status-control.btn-disabled, .appearance-filled.status-control.btn-disabled[nbButtonToggle] { background-color: var(--button-filled-control-disabled-background-color); border-color: var(--button-filled-control-disabled-border-color); color: var(--button-filled-control-disabled-text-color); } [nbButton].appearance-outline, .appearance-outline[nbButtonToggle] { border-style: var(--button-outline-border-style); border-width: var(--button-outline-border-width); text-transform: var(--button-outline-text-transform); } [nbButton].appearance-outline:focus, .appearance-outline[nbButtonToggle]:focus { box-shadow: 0 0 0 var(--button-outline-width) var(--button-outline-color); } [nbButton].appearance-outline:focus:not(:hover):not(:active), .appearance-outline[nbButtonToggle]:focus:not(:hover):not(:active) { box-shadow: 0 0 0 var(--button-outline-width) var(--button-outline-color), inset var(--button-outline-focus-inset-shadow-length) var(--button-outline-color); } [nbButton].appearance-outline.size-tiny, .appearance-outline.size-tiny[nbButtonToggle] { padding: var(--button-outline-tiny-padding); } [nbButton].appearance-outline.size-small, .appearance-outline.size-small[nbButtonToggle] { padding: var(--button-outline-small-padding); } [nbButton].appearance-outline.size-medium, .appearance-outline.size-medium[nbButtonToggle] { padding: var(--button-outline-medium-padding); } [nbButton].appearance-outline.size-large, .appearance-outline.size-large[nbButtonToggle] { padding: var(--button-outline-large-padding); } [nbButton].appearance-outline.size-giant, .appearance-outline.size-giant[nbButtonToggle] { padding: var(--button-outline-giant-padding); } [nbButton].appearance-outline.status-basic, .appearance-outline.status-basic[nbButtonToggle] { background-color: var(--button-outline-basic-background-color); border-color: var(--button-outline-basic-border-color); color: var(--button-outline-basic-text-color); } [nbButton].appearance-outline.status-basic:focus, .appearance-outline.status-basic[nbButtonToggle]:focus { background-color: var(--button-outline-basic-focus-background-color); border-color: var(--button-outline-basic-focus-border-color); color: var(--button-outline-basic-focus-text-color); } [nbButton].appearance-outline.status-basic:hover, .appearance-outline.status-basic[nbButtonToggle]:hover { background-color: var(--button-outline-basic-hover-background-color); border-color: var(--button-outline-basic-hover-border-color); color: var(--button-outline-basic-hover-text-color); } [nbButton].appearance-outline.status-basic:active, .appearance-outline.status-basic[nbButtonToggle]:active { background-color: var(--button-outline-basic-active-background-color); border-color: var(--button-outline-basic-active-border-color); color: var(--button-outline-basic-active-text-color); } [nbButton].appearance-outline.status-basic[disabled], .appearance-outline.status-basic[disabled][nbButtonToggle], [nbButton].appearance-outline.status-basic.btn-disabled, .appearance-outline.status-basic.btn-disabled[nbButtonToggle] { background-color: var(--button-outline-basic-disabled-background-color); border-color: var(--button-outline-basic-disabled-border-color); color: var(--button-outline-basic-disabled-text-color); } [nbButton].appearance-outline.status-primary, .appearance-outline.status-primary[nbButtonToggle] { background-color: var(--button-outline-primary-background-color); border-color: var(--button-outline-primary-border-color); color: var(--button-outline-primary-text-color); } [nbButton].appearance-outline.status-primary:focus, .appearance-outline.status-primary[nbButtonToggle]:focus { background-color: var(--button-outline-primary-focus-background-color); border-color: var(--button-outline-primary-focus-border-color); color: var(--button-outline-primary-focus-text-color); } [nbButton].appearance-outline.status-primary:hover, .appearance-outline.status-primary[nbButtonToggle]:hover { background-color: var(--button-outline-primary-hover-background-color); border-color: var(--button-outline-primary-hover-border-color); color: var(--button-outline-primary-hover-text-color); } [nbButton].appearance-outline.status-primary:active, .appearance-outline.status-primary[nbButtonToggle]:active { background-color: var(--button-outline-primary-active-background-color); border-color: var(--button-outline-primary-active-border-color); color: var(--button-outline-primary-active-text-color); } [nbButton].appearance-outline.status-primary[disabled], .appearance-outline.status-primary[disabled][nbButtonToggle], [nbButton].appearance-outline.status-primary.btn-disabled, .appearance-outline.status-primary.btn-disabled[nbButtonToggle] { background-color: var(--button-outline-primary-disabled-background-color); border-color: var(--button-outline-primary-disabled-border-color); color: var(--button-outline-primary-disabled-text-color); } [nbButton].appearance-outline.status-success, .appearance-outline.status-success[nbButtonToggle] { background-color: var(--button-outline-success-background-color); border-color: var(--button-outline-success-border-color); color: var(--button-outline-success-text-color); } [nbButton].appearance-outline.status-success:focus, .appearance-outline.status-success[nbButtonToggle]:focus { background-color: var(--button-outline-success-focus-background-color); border-color: var(--button-outline-success-focus-border-color); color: var(--button-outline-success-focus-text-color); } [nbButton].appearance-outline.status-success:hover, .appearance-outline.status-success[nbButtonToggle]:hover { background-color: var(--button-outline-success-hover-background-color); border-color: var(--button-outline-success-hover-border-color); color: var(--button-outline-success-hover-text-color); } [nbButton].appearance-outline.status-success:active, .appearance-outline.status-success[nbButtonToggle]:active { background-color: var(--button-outline-success-active-background-color); border-color: var(--button-outline-success-active-border-color); color: var(--button-outline-success-active-text-color); } [nbButton].appearance-outline.status-success[disabled], .appearance-outline.status-success[disabled][nbButtonToggle], [nbButton].appearance-outline.status-success.btn-disabled, .appearance-outline.status-success.btn-disabled[nbButtonToggle] { background-color: var(--button-outline-success-disabled-background-color); border-color: var(--button-outline-success-disabled-border-color); color: var(--button-outline-success-disabled-text-color); } [nbButton].appearance-outline.status-warning, .appearance-outline.status-warning[nbButtonToggle] { background-color: var(--button-outline-warning-background-color); border-color: var(--button-outline-warning-border-color); color: var(--button-outline-warning-text-color); } [nbButton].appearance-outline.status-warning:focus, .appearance-outline.status-warning[nbButtonToggle]:focus { background-color: var(--button-outline-warning-focus-background-color); border-color: var(--button-outline-warning-focus-border-color); color: var(--button-outline-warning-focus-text-color); } [nbButton].appearance-outline.status-warning:hover, .appearance-outline.status-warning[nbButtonToggle]:hover { background-color: var(--button-outline-warning-hover-background-color); border-color: var(--button-outline-warning-hover-border-color); color: var(--button-outline-warning-hover-text-color); } [nbButton].appearance-outline.status-warning:active, .appearance-outline.status-warning[nbButtonToggle]:active { background-color: var(--button-outline-warning-active-background-color); border-color: var(--button-outline-warning-active-border-color); color: var(--button-outline-warning-active-text-color); } [nbButton].appearance-outline.status-warning[disabled], .appearance-outline.status-warning[disabled][nbButtonToggle], [nbButton].appearance-outline.status-warning.btn-disabled, .appearance-outline.status-warning.btn-disabled[nbButtonToggle] { background-color: var(--button-outline-warning-disabled-background-color); border-color: var(--button-outline-warning-disabled-border-color); color: var(--button-outline-warning-disabled-text-color); } [nbButton].appearance-outline.status-danger, .appearance-outline.status-danger[nbButtonToggle] { background-color: var(--button-outline-danger-background-color); border-color: var(--button-outline-danger-border-color); color: var(--button-outline-danger-text-color); } [nbButton].appearance-outline.status-danger:focus, .appearance-outline.status-danger[nbButtonToggle]:focus { background-color: var(--button-outline-danger-focus-background-color); border-color: var(--button-outline-danger-focus-border-color); color: var(--button-outline-danger-focus-text-color); } [nbButton].appearance-outline.status-danger:hover, .appearance-outline.status-danger[nbButtonToggle]:hover { background-color: var(--button-outline-danger-hover-background-color); border-color: var(--button-outline-danger-hover-border-color); color: var(--button-outline-danger-hover-text-color); } [nbButton].appearance-outline.status-danger:active, .appearance-outline.status-danger[nbButtonToggle]:active { background-color: var(--button-outline-danger-active-background-color); border-color: var(--button-outline-danger-active-border-color); color: var(--button-outline-danger-active-text-color); } [nbButton].appearance-outline.status-danger[disabled], .appearance-outline.status-danger[disabled][nbButtonToggle], [nbButton].appearance-outline.status-danger.btn-disabled, .appearance-outline.status-danger.btn-disabled[nbButtonToggle] { background-color: var(--button-outline-danger-disabled-background-color); border-color: var(--button-outline-danger-disabled-border-color); color: var(--button-outline-danger-disabled-text-color); } [nbButton].appearance-outline.status-info, .appearance-outline.status-info[nbButtonToggle] { background-color: var(--button-outline-info-background-color); border-color: var(--button-outline-info-border-color); color: var(--button-outline-info-text-color); } [nbButton].appearance-outline.status-info:focus, .appearance-outline.status-info[nbButtonToggle]:focus { background-color: var(--button-outline-info-focus-background-color); border-color: var(--button-outline-info-focus-border-color); color: var(--button-outline-info-focus-text-color); } [nbButton].appearance-outline.status-info:hover, .appearance-outline.status-info[nbButtonToggle]:hover { background-color: var(--button-outline-info-hover-background-color); border-color: var(--button-outline-info-hover-border-color); color: var(--button-outline-info-hover-text-color); } [nbButton].appearance-outline.status-info:active, .appearance-outline.status-info[nbButtonToggle]:active { background-color: var(--button-outline-info-active-background-color); border-color: var(--button-outline-info-active-border-color); color: var(--button-outline-info-active-text-color); } [nbButton].appearance-outline.status-info[disabled], .appearance-outline.status-info[disabled][nbButtonToggle], [nbButton].appearance-outline.status-info.btn-disabled, .appearance-outline.status-info.btn-disabled[nbButtonToggle] { background-color: var(--button-outline-info-disabled-background-color); border-color: var(--button-outline-info-disabled-border-color); color: var(--button-outline-info-disabled-text-color); } [nbButton].appearance-outline.status-control, .appearance-outline.status-control[nbButtonToggle] { background-color: var(--button-outline-control-background-color); border-color: var(--button-outline-control-border-color); color: var(--button-outline-control-text-color); } [nbButton].appearance-outline.status-control:focus, .appearance-outline.status-control[nbButtonToggle]:focus { background-color: var(--button-outline-control-focus-background-color); border-color: var(--button-outline-control-focus-border-color); color: var(--button-outline-control-focus-text-color); } [nbButton].appearance-outline.status-control:hover, .appearance-outline.status-control[nbButtonToggle]:hover { background-color: var(--button-outline-control-hover-background-color); border-color: var(--button-outline-control-hover-border-color); color: var(--button-outline-control-hover-text-color); } [nbButton].appearance-outline.status-control:active, .appearance-outline.status-control[nbButtonToggle]:active { background-color: var(--button-outline-control-active-background-color); border-color: var(--button-outline-control-active-border-color); color: var(--button-outline-control-active-text-color); } [nbButton].appearance-outline.status-control[disabled], .appearance-outline.status-control[disabled][nbButtonToggle], [nbButton].appearance-outline.status-control.btn-disabled, .appearance-outline.status-control.btn-disabled[nbButtonToggle] { background-color: var(--button-outline-control-disabled-background-color); border-color: var(--button-outline-control-disabled-border-color); color: var(--button-outline-control-disabled-text-color); } [nbButton].appearance-ghost, .appearance-ghost[nbButtonToggle] { background-color: var(--button-ghost-background-color); border-color: var(--button-ghost-border-color); border-style: var(--button-ghost-border-style); border-width: var(--button-ghost-border-width); text-transform: var(--button-ghost-text-transform); } [nbButton].appearance-ghost:focus, .appearance-ghost[nbButtonToggle]:focus { box-shadow: 0 0 0 var(--button-outline-width) var(--button-outline-color); } [nbButton].appearance-ghost:focus:not(:hover):not(:active), .appearance-ghost[nbButtonToggle]:focus:not(:hover):not(:active) { box-shadow: 0 0 0 var(--button-outline-width) var(--button-outline-color), inset var(--button-ghost-focus-inset-shadow-length) var(--button-outline-color); } [nbButton].appearance-ghost.size-tiny, .appearance-ghost.size-tiny[nbButtonToggle] { padding: var(--button-ghost-tiny-padding); } [nbButton].appearance-ghost.size-small, .appearance-ghost.size-small[nbButtonToggle] { padding: var(--button-ghost-small-padding); } [nbButton].appearance-ghost.size-medium, .appearance-ghost.size-medium[nbButtonToggle] { padding: var(--button-ghost-medium-padding); } [nbButton].appearance-ghost.size-large, .appearance-ghost.size-large[nbButtonToggle] { padding: var(--button-ghost-large-padding); } [nbButton].appearance-ghost.size-giant, .appearance-ghost.size-giant[nbButtonToggle] { padding: var(--button-ghost-giant-padding); } [nbButton].appearance-ghost.status-basic, .appearance-ghost.status-basic[nbButtonToggle] { color: var(--button-ghost-basic-text-color); } [nbButton].appearance-ghost.status-basic:focus, .appearance-ghost.status-basic[nbButtonToggle]:focus { background-color: var(--button-ghost-basic-focus-background-color); border-color: var(--button-ghost-basic-focus-border-color); color: var(--button-ghost-basic-focus-text-color); } [nbButton].appearance-ghost.status-basic:hover, .appearance-ghost.status-basic[nbButtonToggle]:hover { background-color: var(--button-ghost-basic-hover-background-color); border-color: var(--button-ghost-basic-hover-border-color); color: var(--button-ghost-basic-hover-text-color); } [nbButton].appearance-ghost.status-basic:active, .appearance-ghost.status-basic[nbButtonToggle]:active { background-color: var(--button-ghost-basic-active-background-color); border-color: var(--button-ghost-basic-active-border-color); color: var(--button-ghost-basic-active-text-color); } [nbButton].appearance-ghost.status-basic[disabled], .appearance-ghost.status-basic[disabled][nbButtonToggle], [nbButton].appearance-ghost.status-basic.btn-disabled, .appearance-ghost.status-basic.btn-disabled[nbButtonToggle] { background-color: var(--button-ghost-basic-disabled-background-color); border-color: var(--button-ghost-basic-disabled-border-color); color: var(--button-ghost-basic-disabled-text-color); } [nbButton].appearance-ghost.status-primary, .appearance-ghost.status-primary[nbButtonToggle] { color: var(--button-ghost-primary-text-color); } [nbButton].appearance-ghost.status-primary:focus, .appearance-ghost.status-primary[nbButtonToggle]:focus { background-color: var(--button-ghost-primary-focus-background-color); border-color: var(--button-ghost-primary-focus-border-color); color: var(--button-ghost-primary-focus-text-color); } [nbButton].appearance-ghost.status-primary:hover, .appearance-ghost.status-primary[nbButtonToggle]:hover { background-color: var(--button-ghost-primary-hover-background-color); border-color: var(--button-ghost-primary-hover-border-color); color: var(--button-ghost-primary-hover-text-color); } [nbButton].appearance-ghost.status-primary:active, .appearance-ghost.status-primary[nbButtonToggle]:active { background-color: var(--button-ghost-primary-active-background-color); border-color: var(--button-ghost-primary-active-border-color); color: var(--button-ghost-primary-active-text-color); } [nbButton].appearance-ghost.status-primary[disabled], .appearance-ghost.status-primary[disabled][nbButtonToggle], [nbButton].appearance-ghost.status-primary.btn-disabled, .appearance-ghost.status-primary.btn-disabled[nbButtonToggle] { background-color: var(--button-ghost-primary-disabled-background-color); border-color: var(--button-ghost-primary-disabled-border-color); color: var(--button-ghost-primary-disabled-text-color); } [nbButton].appearance-ghost.status-success, .appearance-ghost.status-success[nbButtonToggle] { color: var(--button-ghost-success-text-color); } [nbButton].appearance-ghost.status-success:focus, .appearance-ghost.status-success[nbButtonToggle]:focus { background-color: var(--button-ghost-success-focus-background-color); border-color: var(--button-ghost-success-focus-border-color); color: var(--button-ghost-success-focus-text-color); } [nbButton].appearance-ghost.status-success:hover, .appearance-ghost.status-success[nbButtonToggle]:hover { background-color: var(--button-ghost-success-hover-background-color); border-color: var(--button-ghost-success-hover-border-color); color: var(--button-ghost-success-hover-text-color); } [nbButton].appearance-ghost.status-success:active, .appearance-ghost.status-success[nbButtonToggle]:active { background-color: var(--button-ghost-success-active-background-color); border-color: var(--button-ghost-success-active-border-color); color: var(--button-ghost-success-active-text-color); } [nbButton].appearance-ghost.status-success[disabled], .appearance-ghost.status-success[disabled][nbButtonToggle], [nbButton].appearance-ghost.status-success.btn-disabled, .appearance-ghost.status-success.btn-disabled[nbButtonToggle] { background-color: var(--button-ghost-success-disabled-background-color); border-color: var(--button-ghost-success-disabled-border-color); color: var(--button-ghost-success-disabled-text-color); } [nbButton].appearance-ghost.status-warning, .appearance-ghost.status-warning[nbButtonToggle] { color: var(--button-ghost-warning-text-color); } [nbButton].appearance-ghost.status-warning:focus, .appearance-ghost.status-warning[nbButtonToggle]:focus { background-color: var(--button-ghost-warning-focus-background-color); border-color: var(--button-ghost-warning-focus-border-color); color: var(--button-ghost-warning-focus-text-color); } [nbButton].appearance-ghost.status-warning:hover, .appearance-ghost.status-warning[nbButtonToggle]:hover { background-color: var(--button-ghost-warning-hover-background-color); border-color: var(--button-ghost-warning-hover-border-color); color: var(--button-ghost-warning-hover-text-color); } [nbButton].appearance-ghost.status-warning:active, .appearance-ghost.status-warning[nbButtonToggle]:active { background-color: var(--button-ghost-warning-active-background-color); border-color: var(--button-ghost-warning-active-border-color); color: var(--button-ghost-warning-active-text-color); } [nbButton].appearance-ghost.status-warning[disabled], .appearance-ghost.status-warning[disabled][nbButtonToggle], [nbButton].appearance-ghost.status-warning.btn-disabled, .appearance-ghost.status-warning.btn-disabled[nbButtonToggle] { background-color: var(--button-ghost-warning-disabled-background-color); border-color: var(--button-ghost-warning-disabled-border-color); color: var(--button-ghost-warning-disabled-text-color); } [nbButton].appearance-ghost.status-danger, .appearance-ghost.status-danger[nbButtonToggle] { color: var(--button-ghost-danger-text-color); } [nbButton].appearance-ghost.status-danger:focus, .appearance-ghost.status-danger[nbButtonToggle]:focus { background-color: var(--button-ghost-danger-focus-background-color); border-color: var(--button-ghost-danger-focus-border-color); color: var(--button-ghost-danger-focus-text-color); } [nbButton].appearance-ghost.status-danger:hover, .appearance-ghost.status-danger[nbButtonToggle]:hover { background-color: var(--button-ghost-danger-hover-background-color); border-color: var(--button-ghost-danger-hover-border-color); color: var(--button-ghost-danger-hover-text-color); } [nbButton].appearance-ghost.status-danger:active, .appearance-ghost.status-danger[nbButtonToggle]:active { background-color: var(--button-ghost-danger-active-background-color); border-color: var(--button-ghost-danger-active-border-color); color: var(--button-ghost-danger-active-text-color); } [nbButton].appearance-ghost.status-danger[disabled], .appearance-ghost.status-danger[disabled][nbButtonToggle], [nbButton].appearance-ghost.status-danger.btn-disabled, .appearance-ghost.status-danger.btn-disabled[nbButtonToggle] { background-color: var(--button-ghost-danger-disabled-background-color); border-color: var(--button-ghost-danger-disabled-border-color); color: var(--button-ghost-danger-disabled-text-color); } [nbButton].appearance-ghost.status-info, .appearance-ghost.status-info[nbButtonToggle] { color: var(--button-ghost-info-text-color); } [nbButton].appearance-ghost.status-info:focus, .appearance-ghost.status-info[nbButtonToggle]:focus { background-color: var(--button-ghost-info-focus-background-color); border-color: var(--button-ghost-info-focus-border-color); color: var(--button-ghost-info-focus-text-color); } [nbButton].appearance-ghost.status-info:hover, .appearance-ghost.status-info[nbButtonToggle]:hover { background-color: var(--button-ghost-info-hover-background-color); border-color: var(--button-ghost-info-hover-border-color); color: var(--button-ghost-info-hover-text-color); } [nbButton].appearance-ghost.status-info:active, .appearance-ghost.status-info[nbButtonToggle]:active { background-color: var(--button-ghost-info-active-background-color); border-color: var(--button-ghost-info-active-border-color); color: var(--button-ghost-info-active-text-color); } [nbButton].appearance-ghost.status-info[disabled], .appearance-ghost.status-info[disabled][nbButtonToggle], [nbButton].appearance-ghost.status-info.btn-disabled, .appearance-ghost.status-info.btn-disabled[nbButtonToggle] { background-color: var(--button-ghost-info-disabled-background-color); border-color: var(--button-ghost-info-disabled-border-color); color: var(--button-ghost-info-disabled-text-color); } [nbButton].appearance-ghost.status-control, .appearance-ghost.status-control[nbButtonToggle] { color: var(--button-ghost-control-text-color); } [nbButton].appearance-ghost.status-control:focus, .appearance-ghost.status-control[nbButtonToggle]:focus { background-color: var(--button-ghost-control-focus-background-color); border-color: var(--button-ghost-control-focus-border-color); color: var(--button-ghost-control-focus-text-color); } [nbButton].appearance-ghost.status-control:hover, .appearance-ghost.status-control[nbButtonToggle]:hover { background-color: var(--button-ghost-control-hover-background-color); border-color: var(--button-ghost-control-hover-border-color); color: var(--button-ghost-control-hover-text-color); } [nbButton].appearance-ghost.status-control:active, .appearance-ghost.status-control[nbButtonToggle]:active { background-color: var(--button-ghost-control-active-background-color); border-color: var(--button-ghost-control-active-border-color); color: var(--button-ghost-control-active-text-color); } [nbButton].appearance-ghost.status-control[disabled], .appearance-ghost.status-control[disabled][nbButtonToggle], [nbButton].appearance-ghost.status-control.btn-disabled, .appearance-ghost.status-control.btn-disabled[nbButtonToggle] { background-color: var(--button-ghost-control-disabled-background-color); border-color: var(--button-ghost-control-disabled-border-color); color: var(--button-ghost-control-disabled-text-color); } [nbButton].appearance-hero, .appearance-hero[nbButtonToggle] { text-shadow: var(--button-hero-text-shadow); text-transform: var(--button-hero-text-transform); } [nbButton].appearance-hero.size-tiny, .appearance-hero.size-tiny[nbButtonToggle] { padding: var(--button-hero-tiny-padding); } [nbButton].appearance-hero.size-small, .appearance-hero.size-small[nbButtonToggle] { padding: var(--button-hero-small-padding); } [nbButton].appearance-hero.size-medium, .appearance-hero.size-medium[nbButtonToggle] { padding: var(--button-hero-medium-padding); } [nbButton].appearance-hero.size-large, .appearance-hero.size-large[nbButtonToggle] { padding: var(--button-hero-large-padding); } [nbButton].appearance-hero.size-giant, .appearance-hero.size-giant[nbButtonToggle] { padding: var(--button-hero-giant-padding); } [nbButton].appearance-hero.status-basic, .appearance-hero.status-basic[nbButtonToggle] { background-image: linear-gradient(to right, var(--button-hero-basic-left-background-color), var(--button-hero-basic-right-background-color)); border: none; box-shadow: var(--button-hero-bevel-size) var(--button-hero-basic-bevel-color), var(--button-hero-glow-size) var(--button-hero-basic-glow-color), var(--button-hero-shadow); color: var(--button-hero-basic-text-color); } [nbButton].appearance-hero.status-basic:focus, .appearance-hero.status-basic[nbButtonToggle]:focus { background-image: linear-gradient(to right, var(--button-hero-basic-focus-left-background-color), var(--button-hero-basic-focus-right-background-color)); box-shadow: var(--button-hero-bevel-size) var(--button-hero-basic-bevel-color), var(--button-hero-glow-size) var(--button-hero-basic-glow-color), var(--button-hero-shadow), 0 0 0 var(--button-hero-outline-width) var(--button-hero-outline-color); } [nbButton].appearance-hero.status-basic:hover, .appearance-hero.status-basic[nbButtonToggle]:hover { background-image: linear-gradient(to right, var(--button-hero-basic-hover-left-background-color), var(--button-hero-basic-hover-right-background-color)); } [nbButton].appearance-hero.status-basic:active, .appearance-hero.status-basic[nbButtonToggle]:active { background-image: linear-gradient(to right, var(--button-hero-basic-active-left-background-color), var(--button-hero-basic-active-right-background-color)); } [nbButton].appearance-hero.status-basic[disabled], .appearance-hero.status-basic[disabled][nbButtonToggle], [nbButton].appearance-hero.status-basic.btn-disabled, .appearance-hero.status-basic.btn-disabled[nbButtonToggle] { background-color: var(--button-hero-basic-disabled-background-color); background-image: none; color: var(--button-hero-basic-disabled-text-color); } [nbButton].appearance-hero.status-basic.button-pulse, .appearance-hero.status-basic.button-pulse[nbButtonToggle] { animation: button-hero-basic-pulse 0.75s infinite alternate; } @keyframes button-hero-basic-pulse { 0% { box-shadow: none; opacity: 0.3; } 100% { box-shadow: 0 0 1rem 0 var(--button-hero-basic-left-background-color); opacity: 0.8; } } [nbButton].appearance-hero.status-primary, .appearance-hero.status-primary[nbButtonToggle] { background-image: linear-gradient(to right, var(--button-hero-primary-left-background-color), var(--button-hero-primary-right-background-color)); border: none; box-shadow: var(--button-hero-bevel-size) var(--button-hero-primary-bevel-color), var(--button-hero-glow-size) var(--button-hero-primary-glow-color), var(--button-hero-shadow); color: var(--button-hero-primary-text-color); } [nbButton].appearance-hero.status-primary:focus, .appearance-hero.status-primary[nbButtonToggle]:focus { background-image: linear-gradient(to right, var(--button-hero-primary-focus-left-background-color), var(--button-hero-primary-focus-right-background-color)); box-shadow: var(--button-hero-bevel-size) var(--button-hero-primary-bevel-color), var(--button-hero-glow-size) var(--button-hero-primary-glow-color), var(--button-hero-shadow), 0 0 0 var(--button-hero-outline-width) var(--button-hero-outline-color); } [nbButton].appearance-hero.status-primary:hover, .appearance-hero.status-primary[nbButtonToggle]:hover { background-image: linear-gradient(to right, var(--button-hero-primary-hover-left-background-color), var(--button-hero-primary-hover-right-background-color)); } [nbButton].appearance-hero.status-primary:active, .appearance-hero.status-primary[nbButtonToggle]:active { background-image: linear-gradient(to right, var(--button-hero-primary-active-left-background-color), var(--button-hero-primary-active-right-background-color)); } [nbButton].appearance-hero.status-primary[disabled], .appearance-hero.status-primary[disabled][nbButtonToggle], [nbButton].appearance-hero.status-primary.btn-disabled, .appearance-hero.status-primary.btn-disabled[nbButtonToggle] { background-color: var(--button-hero-primary-disabled-background-color); background-image: none; color: var(--button-hero-primary-disabled-text-color); } [nbButton].appearance-hero.status-primary.button-pulse, .appearance-hero.status-primary.button-pulse[nbButtonToggle] { animation: button-hero-primary-pulse 0.75s infinite alternate; } @keyframes button-hero-primary-pulse { 0% { box-shadow: none; opacity: 0.3; } 100% { box-shadow: 0 0 1rem 0 var(--button-hero-primary-left-background-color); opacity: 0.8; } } [nbButton].appearance-hero.status-success, .appearance-hero.status-success[nbButtonToggle] { background-image: linear-gradient(to right, var(--button-hero-success-left-background-color), var(--button-hero-success-right-background-color)); border: none; box-shadow: var(--button-hero-bevel-size) var(--button-hero-success-bevel-color), var(--button-hero-glow-size) var(--button-hero-success-glow-color), var(--button-hero-shadow); color: var(--button-hero-success-text-color); } [nbButton].appearance-hero.status-success:focus, .appearance-hero.status-success[nbButtonToggle]:focus { background-image: linear-gradient(to right, var(--button-hero-success-focus-left-background-color), var(--button-hero-success-focus-right-background-color)); box-shadow: var(--button-hero-bevel-size) var(--button-hero-success-bevel-color), var(--button-hero-glow-size) var(--button-hero-success-glow-color), var(--button-hero-shadow), 0 0 0 var(--button-hero-outline-width) var(--button-hero-outline-color); } [nbButton].appearance-hero.status-success:hover, .appearance-hero.status-success[nbButtonToggle]:hover { background-image: linear-gradient(to right, var(--button-hero-success-hover-left-background-color), var(--button-hero-success-hover-right-background-color)); } [nbButton].appearance-hero.status-success:active, .appearance-hero.status-success[nbButtonToggle]:active { background-image: linear-gradient(to right, var(--button-hero-success-active-left-background-color), var(--button-hero-success-active-right-background-color)); } [nbButton].appearance-hero.status-success[disabled], .appearance-hero.status-success[disabled][nbButtonToggle], [nbButton].appearance-hero.status-success.btn-disabled, .appearance-hero.status-success.btn-disabled[nbButtonToggle] { background-color: var(--button-hero-success-disabled-background-color); background-image: none; color: var(--button-hero-success-disabled-text-color); } [nbButton].appearance-hero.status-success.button-pulse, .appearance-hero.status-success.button-pulse[nbButtonToggle] { animation: button-hero-success-pulse 0.75s infinite alternate; } @keyframes button-hero-success-pulse { 0% { box-shadow: none; opacity: 0.3; } 100% { box-shadow: 0 0 1rem 0 var(--button-hero-success-left-background-color); opacity: 0.8; } } [nbButton].appearance-hero.status-warning, .appearance-hero.status-warning[nbButtonToggle] { background-image: linear-gradient(to right, var(--button-hero-warning-left-background-color), var(--button-hero-warning-right-background-color)); border: none; box-shadow: var(--button-hero-bevel-size) var(--button-hero-warning-bevel-color), var(--button-hero-glow-size) var(--button-hero-warning-glow-color), var(--button-hero-shadow); color: var(--button-hero-warning-text-color); } [nbButton].appearance-hero.status-warning:focus, .appearance-hero.status-warning[nbButtonToggle]:focus { background-image: linear-gradient(to right, var(--button-hero-warning-focus-left-background-color), var(--button-hero-warning-focus-right-background-color)); box-shadow: var(--button-hero-bevel-size) var(--button-hero-warning-bevel-color), var(--button-hero-glow-size) var(--button-hero-warning-glow-color), var(--button-hero-shadow), 0 0 0 var(--button-hero-outline-width) var(--button-hero-outline-color); } [nbButton].appearance-hero.status-warning:hover, .appearance-hero.status-warning[nbButtonToggle]:hover { background-image: linear-gradient(to right, var(--button-hero-warning-hover-left-background-color), var(--button-hero-warning-hover-right-background-color)); } [nbButton].appearance-hero.status-warning:active, .appearance-hero.status-warning[nbButtonToggle]:active { background-image: linear-gradient(to right, var(--button-hero-warning-active-left-background-color), var(--button-hero-warning-active-right-background-color)); } [nbButton].appearance-hero.status-warning[disabled], .appearance-hero.status-warning[disabled][nbButtonToggle], [nbButton].appearance-hero.status-warning.btn-disabled, .appearance-hero.status-warning.btn-disabled[nbButtonToggle] { background-color: var(--button-hero-warning-disabled-background-color); background-image: none; color: var(--button-hero-warning-disabled-text-color); } [nbButton].appearance-hero.status-warning.button-pulse, .appearance-hero.status-warning.button-pulse[nbButtonToggle] { animation: button-hero-warning-pulse 0.75s infinite alternate; } @keyframes button-hero-warning-pulse { 0% { box-shadow: none; opacity: 0.3; } 100% { box-shadow: 0 0 1rem 0 var(--button-hero-warning-left-background-color); opacity: 0.8; } } [nbButton].appearance-hero.status-danger, .appearance-hero.status-danger[nbButtonToggle] { background-image: linear-gradient(to right, var(--button-hero-danger-left-background-color), var(--button-hero-danger-right-background-color)); border: none; box-shadow: var(--button-hero-bevel-size) var(--button-hero-danger-bevel-color), var(--button-hero-glow-size) var(--button-hero-danger-glow-color), var(--button-hero-shadow); color: var(--button-hero-danger-text-color); } [nbButton].appearance-hero.status-danger:focus, .appearance-hero.status-danger[nbButtonToggle]:focus { background-image: linear-gradient(to right, var(--button-hero-danger-focus-left-background-color), var(--button-hero-danger-focus-right-background-color)); box-shadow: var(--button-hero-bevel-size) var(--button-hero-danger-bevel-color), var(--button-hero-glow-size) var(--button-hero-danger-glow-color), var(--button-hero-shadow), 0 0 0 var(--button-hero-outline-width) var(--button-hero-outline-color); } [nbButton].appearance-hero.status-danger:hover, .appearance-hero.status-danger[nbButtonToggle]:hover { background-image: linear-gradient(to right, var(--button-hero-danger-hover-left-background-color), var(--button-hero-danger-hover-right-background-color)); } [nbButton].appearance-hero.status-danger:active, .appearance-hero.status-danger[nbButtonToggle]:active { background-image: linear-gradient(to right, var(--button-hero-danger-active-left-background-color), var(--button-hero-danger-active-right-background-color)); } [nbButton].appearance-hero.status-danger[disabled], .appearance-hero.status-danger[disabled][nbButtonToggle], [nbButton].appearance-hero.status-danger.btn-disabled, .appearance-hero.status-danger.btn-disabled[nbButtonToggle] { background-color: var(--button-hero-danger-disabled-background-color); background-image: none; color: var(--button-hero-danger-disabled-text-color); } [nbButton].appearance-hero.status-danger.button-pulse, .appearance-hero.status-danger.button-pulse[nbButtonToggle] { animation: button-hero-danger-pulse 0.75s infinite alternate; } @keyframes button-hero-danger-pulse { 0% { box-shadow: none; opacity: 0.3; } 100% { box-shadow: 0 0 1rem 0 var(--button-hero-danger-left-background-color); opacity: 0.8; } } [nbButton].appearance-hero.status-info, .appearance-hero.status-info[nbButtonToggle] { background-image: linear-gradient(to right, var(--button-hero-info-left-background-color), var(--button-hero-info-right-background-color)); border: none; box-shadow: var(--button-hero-bevel-size) var(--button-hero-info-bevel-color), var(--button-hero-glow-size) var(--button-hero-info-glow-color), var(--button-hero-shadow); color: var(--button-hero-info-text-color); } [nbButton].appearance-hero.status-info:focus, .appearance-hero.status-info[nbButtonToggle]:focus { background-image: linear-gradient(to right, var(--button-hero-info-focus-left-background-color), var(--button-hero-info-focus-right-background-color)); box-shadow: var(--button-hero-bevel-size) var(--button-hero-info-bevel-color), var(--button-hero-glow-size) var(--button-hero-info-glow-color), var(--button-hero-shadow), 0 0 0 var(--button-hero-outline-width) var(--button-hero-outline-color); } [nbButton].appearance-hero.status-info:hover, .appearance-hero.status-info[nbButtonToggle]:hover { background-image: linear-gradient(to right, var(--button-hero-info-hover-left-background-color), var(--button-hero-info-hover-right-background-color)); } [nbButton].appearance-hero.status-info:active, .appearance-hero.status-info[nbButtonToggle]:active { background-image: linear-gradient(to right, var(--button-hero-info-active-left-background-color), var(--button-hero-info-active-right-background-color)); } [nbButton].appearance-hero.status-info[disabled], .appearance-hero.status-info[disabled][nbButtonToggle], [nbButton].appearance-hero.status-info.btn-disabled, .appearance-hero.status-info.btn-disabled[nbButtonToggle] { background-color: var(--button-hero-info-disabled-background-color); background-image: none; color: var(--button-hero-info-disabled-text-color); } [nbButton].appearance-hero.status-info.button-pulse, .appearance-hero.status-info.button-pulse[nbButtonToggle] { animation: button-hero-info-pulse 0.75s infinite alternate; } @keyframes button-hero-info-pulse { 0% { box-shadow: none; opacity: 0.3; } 100% { box-shadow: 0 0 1rem 0 var(--button-hero-info-left-background-color); opacity: 0.8; } } [nbButton].appearance-hero.status-control, .appearance-hero.status-control[nbButtonToggle] { background-image: linear-gradient(to right, var(--button-hero-control-left-background-color), var(--button-hero-control-right-background-color)); border: none; box-shadow: var(--button-hero-bevel-size) var(--button-hero-control-bevel-color), var(--button-hero-glow-size) var(--button-hero-control-glow-color), var(--button-hero-shadow); color: var(--button-hero-control-text-color); } [nbButton].appearance-hero.status-control:focus, .appearance-hero.status-control[nbButtonToggle]:focus { background-image: linear-gradient(to right, var(--button-hero-control-focus-left-background-color), var(--button-hero-control-focus-right-background-color)); box-shadow: var(--button-hero-bevel-size) var(--button-hero-control-bevel-color), var(--button-hero-glow-size) var(--button-hero-control-glow-color), var(--button-hero-shadow), 0 0 0 var(--button-hero-outline-width) var(--button-hero-outline-color); } [nbButton].appearance-hero.status-control:hover, .appearance-hero.status-control[nbButtonToggle]:hover { background-image: linear-gradient(to right, var(--button-hero-control-hover-left-background-color), var(--button-hero-control-hover-right-background-color)); } [nbButton].appearance-hero.status-control:active, .appearance-hero.status-control[nbButtonToggle]:active { background-image: linear-gradient(to right, var(--button-hero-control-active-left-background-color), var(--button-hero-control-active-right-background-color)); } [nbButton].appearance-hero.status-control[disabled], .appearance-hero.status-control[disabled][nbButtonToggle], [nbButton].appearance-hero.status-control.btn-disabled, .appearance-hero.status-control.btn-disabled[nbButtonToggle] { background-color: var(--button-hero-control-disabled-background-color); background-image: none; color: var(--button-hero-control-disabled-text-color); } [nbButton].appearance-hero.status-control.button-pulse, .appearance-hero.status-control.button-pulse[nbButtonToggle] { animation: button-hero-control-pulse 0.75s infinite alternate; } @keyframes button-hero-control-pulse { 0% { box-shadow: none; opacity: 0.3; } 100% { box-shadow: 0 0 1rem 0 var(--button-hero-control-left-background-color); opacity: 0.8; } } nb-button-group { display: inline-flex; } [dir=ltr] nb-button-group [nbButton]:first-child:not(:last-child), [dir=ltr] nb-button-group [nbButtonToggle]:first-child:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } [dir=ltr] nb-button-group [nbButton]:last-child:not(:first-child), [dir=ltr] nb-button-group [nbButtonToggle]:last-child:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } [dir=rtl] nb-button-group [nbButton]:first-child:not(:last-child), [dir=rtl] nb-button-group [nbButtonToggle]:first-child:not(:last-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } [dir=rtl] nb-button-group [nbButton]:last-child:not(:first-child), [dir=rtl] nb-button-group [nbButtonToggle]:last-child:not(:first-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } nb-button-group [nbButton]:not(:first-child):not(:last-child), nb-button-group [nbButtonToggle]:not(:first-child):not(:last-child) { border-radius: 0; } nb-button-group [nbButton].appearance-filled, nb-button-group [nbButton].appearance-ghost, nb-button-group [nbButtonToggle].appearance-filled, nb-button-group [nbButtonToggle].appearance-ghost { border-color: transparent; } [dir=ltr] nb-button-group [nbButton].appearance-filled.status-basic:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=ltr] nb-button-group [nbButtonToggle].appearance-filled.status-basic:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-left-color: var(--button-group-filled-basic-divider-color); } [dir=rtl] nb-button-group [nbButton].appearance-filled.status-basic:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=rtl] nb-button-group [nbButtonToggle].appearance-filled.status-basic:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-right-color: var(--button-group-filled-basic-divider-color); } nb-button-group [nbButton].appearance-filled.status-basic, nb-button-group [nbButtonToggle].appearance-filled.status-basic { color: var(--button-group-filled-button-basic-text-color); } [dir=ltr] nb-button-group [nbButton].appearance-filled.status-primary:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=ltr] nb-button-group [nbButtonToggle].appearance-filled.status-primary:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-left-color: var(--button-group-filled-primary-divider-color); } [dir=rtl] nb-button-group [nbButton].appearance-filled.status-primary:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=rtl] nb-button-group [nbButtonToggle].appearance-filled.status-primary:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-right-color: var(--button-group-filled-primary-divider-color); } nb-button-group [nbButton].appearance-filled.status-primary, nb-button-group [nbButtonToggle].appearance-filled.status-primary { color: var(--button-group-filled-button-primary-text-color); } [dir=ltr] nb-button-group [nbButton].appearance-filled.status-success:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=ltr] nb-button-group [nbButtonToggle].appearance-filled.status-success:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-left-color: var(--button-group-filled-success-divider-color); } [dir=rtl] nb-button-group [nbButton].appearance-filled.status-success:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=rtl] nb-button-group [nbButtonToggle].appearance-filled.status-success:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-right-color: var(--button-group-filled-success-divider-color); } nb-button-group [nbButton].appearance-filled.status-success, nb-button-group [nbButtonToggle].appearance-filled.status-success { color: var(--button-group-filled-button-success-text-color); } [dir=ltr] nb-button-group [nbButton].appearance-filled.status-warning:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=ltr] nb-button-group [nbButtonToggle].appearance-filled.status-warning:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-left-color: var(--button-group-filled-warning-divider-color); } [dir=rtl] nb-button-group [nbButton].appearance-filled.status-warning:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=rtl] nb-button-group [nbButtonToggle].appearance-filled.status-warning:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-right-color: var(--button-group-filled-warning-divider-color); } nb-button-group [nbButton].appearance-filled.status-warning, nb-button-group [nbButtonToggle].appearance-filled.status-warning { color: var(--button-group-filled-button-warning-text-color); } [dir=ltr] nb-button-group [nbButton].appearance-filled.status-danger:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=ltr] nb-button-group [nbButtonToggle].appearance-filled.status-danger:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-left-color: var(--button-group-filled-danger-divider-color); } [dir=rtl] nb-button-group [nbButton].appearance-filled.status-danger:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=rtl] nb-button-group [nbButtonToggle].appearance-filled.status-danger:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-right-color: var(--button-group-filled-danger-divider-color); } nb-button-group [nbButton].appearance-filled.status-danger, nb-button-group [nbButtonToggle].appearance-filled.status-danger { color: var(--button-group-filled-button-danger-text-color); } [dir=ltr] nb-button-group [nbButton].appearance-filled.status-info:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=ltr] nb-button-group [nbButtonToggle].appearance-filled.status-info:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-left-color: var(--button-group-filled-info-divider-color); } [dir=rtl] nb-button-group [nbButton].appearance-filled.status-info:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=rtl] nb-button-group [nbButtonToggle].appearance-filled.status-info:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-right-color: var(--button-group-filled-info-divider-color); } nb-button-group [nbButton].appearance-filled.status-info, nb-button-group [nbButtonToggle].appearance-filled.status-info { color: var(--button-group-filled-button-info-text-color); } [dir=ltr] nb-button-group [nbButton].appearance-filled.status-control:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=ltr] nb-button-group [nbButtonToggle].appearance-filled.status-control:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-left-color: var(--button-group-filled-control-divider-color); } [dir=rtl] nb-button-group [nbButton].appearance-filled.status-control:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=rtl] nb-button-group [nbButtonToggle].appearance-filled.status-control:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-right-color: var(--button-group-filled-control-divider-color); } nb-button-group [nbButton].appearance-filled.status-control, nb-button-group [nbButtonToggle].appearance-filled.status-control { color: var(--button-group-filled-button-control-text-color); } [dir=ltr] nb-button-group [nbButton].appearance-ghost:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=ltr] nb-button-group [nbButtonToggle].appearance-ghost:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-left-color: var(--button-group-ghost-divider-color); } [dir=rtl] nb-button-group [nbButton].appearance-ghost:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=rtl] nb-button-group [nbButtonToggle].appearance-ghost:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-right-color: var(--button-group-ghost-divider-color); } nb-list-item { border-bottom: var(--list-item-divider-width) var(--list-item-divider-style) var(--list-item-divider-color); color: var(--list-item-text-color); font-family: var(--list-item-font-family); font-size: var(--list-item-font-size); font-weight: var(--list-item-font-weight); line-height: var(--list-item-line-height); padding: var(--list-item-padding); } nb-list-item:first-child { border-top: var(--list-item-divider-width) var(--list-item-divider-style) var(--list-item-divider-color); } [nbInput] { border-style: var(--input-border-style); border-width: var(--input-border-width); font-family: var(--input-text-font-family); -webkit-appearance: none; -moz-appearance: none; appearance: none; } [nbInput].nb-transition { transition-duration: 0.15s; transition-property: border, background-color, color, box-shadow; transition-timing-function: ease-in; } [nbInput]::-moz-placeholder { font-family: var(--input-placeholder-text-font-family); text-overflow: ellipsis; } [nbInput]::placeholder { font-family: var(--input-placeholder-text-font-family); text-overflow: ellipsis; } [nbInput]:focus { outline: none; } [nbInput].input-full-width { width: 100%; } [nbInput].status-basic { background-color: var(--input-basic-background-color); border-color: var(--input-basic-border-color); color: var(--input-basic-text-color); } [nbInput].status-basic::-moz-placeholder { color: var(--input-basic-placeholder-text-color); } [nbInput].status-basic::placeholder { color: var(--input-basic-placeholder-text-color); } [nbInput].status-basic:focus { background-color: var(--input-basic-focus-background-color); border-color: var(--input-basic-focus-border-color); } [nbInput].status-basic:hover { background-color: var(--input-basic-hover-background-color); border-color: var(--input-basic-hover-border-color); } [nbInput].status-basic:focus:hover { background-color: var(--input-basic-focus-and-hover-background-color); border-color: var(--input-basic-focus-and-hover-border-color); } [nbInput].status-basic:disabled { background-color: var(--input-basic-disabled-background-color); border-color: var(--input-basic-disabled-border-color); color: var(--input-basic-disabled-text-color); } [nbInput].status-basic:disabled::-moz-placeholder { color: var(--input-basic-disabled-placeholder-text-color); } [nbInput].status-basic:disabled::placeholder { color: var(--input-basic-disabled-placeholder-text-color); } [nbInput].status-primary { background-color: var(--input-primary-background-color); border-color: var(--input-primary-border-color); color: var(--input-primary-text-color); } [nbInput].status-primary::-moz-placeholder { color: var(--input-primary-placeholder-text-color); } [nbInput].status-primary::placeholder { color: var(--input-primary-placeholder-text-color); } [nbInput].status-primary:focus { background-color: var(--input-primary-focus-background-color); border-color: var(--input-primary-focus-border-color); } [nbInput].status-primary:hover { background-color: var(--input-primary-hover-background-color); border-color: var(--input-primary-hover-border-color); } [nbInput].status-primary:focus:hover { background-color: var(--input-primary-focus-and-hover-background-color); border-color: var(--input-primary-focus-and-hover-border-color); } [nbInput].status-primary:disabled { background-color: var(--input-primary-disabled-background-color); border-color: var(--input-primary-disabled-border-color); color: var(--input-primary-disabled-text-color); } [nbInput].status-primary:disabled::-moz-placeholder { color: var(--input-primary-disabled-placeholder-text-color); } [nbInput].status-primary:disabled::placeholder { color: var(--input-primary-disabled-placeholder-text-color); } [nbInput].status-success { background-color: var(--input-success-background-color); border-color: var(--input-success-border-color); color: var(--input-success-text-color); } [nbInput].status-success::-moz-placeholder { color: var(--input-success-placeholder-text-color); } [nbInput].status-success::placeholder { color: var(--input-success-placeholder-text-color); } [nbInput].status-success:focus { background-color: var(--input-success-focus-background-color); border-color: var(--input-success-focus-border-color); } [nbInput].status-success:hover { background-color: var(--input-success-hover-background-color); border-color: var(--input-success-hover-border-color); } [nbInput].status-success:focus:hover { background-color: var(--input-success-focus-and-hover-background-color); border-color: var(--input-success-focus-and-hover-border-color); } [nbInput].status-success:disabled { background-color: var(--input-success-disabled-background-color); border-color: var(--input-success-disabled-border-color); color: var(--input-success-disabled-text-color); } [nbInput].status-success:disabled::-moz-placeholder { color: var(--input-success-disabled-placeholder-text-color); } [nbInput].status-success:disabled::placeholder { color: var(--input-success-disabled-placeholder-text-color); } [nbInput].status-warning { background-color: var(--input-warning-background-color); border-color: var(--input-warning-border-color); color: var(--input-warning-text-color); } [nbInput].status-warning::-moz-placeholder { color: var(--input-warning-placeholder-text-color); } [nbInput].status-warning::placeholder { color: var(--input-warning-placeholder-text-color); } [nbInput].status-warning:focus { background-color: var(--input-warning-focus-background-color); border-color: var(--input-warning-focus-border-color); } [nbInput].status-warning:hover { background-color: var(--input-warning-hover-background-color); border-color: var(--input-warning-hover-border-color); } [nbInput].status-warning:focus:hover { background-color: var(--input-warning-focus-and-hover-background-color); border-color: var(--input-warning-focus-and-hover-border-color); } [nbInput].status-warning:disabled { background-color: var(--input-warning-disabled-background-color); border-color: var(--input-warning-disabled-border-color); color: var(--input-warning-disabled-text-color); } [nbInput].status-warning:disabled::-moz-placeholder { color: var(--input-warning-disabled-placeholder-text-color); } [nbInput].status-warning:disabled::placeholder { color: var(--input-warning-disabled-placeholder-text-color); } [nbInput].status-danger { background-color: var(--input-danger-background-color); border-color: var(--input-danger-border-color); color: var(--input-danger-text-color); } [nbInput].status-danger::-moz-placeholder { color: var(--input-danger-placeholder-text-color); } [nbInput].status-danger::placeholder { color: var(--input-danger-placeholder-text-color); } [nbInput].status-danger:focus { background-color: var(--input-danger-focus-background-color); border-color: var(--input-danger-focus-border-color); } [nbInput].status-danger:hover { background-color: var(--input-danger-hover-background-color); border-color: var(--input-danger-hover-border-color); } [nbInput].status-danger:focus:hover { background-color: var(--input-danger-focus-and-hover-background-color); border-color: var(--input-danger-focus-and-hover-border-color); } [nbInput].status-danger:disabled { background-color: var(--input-danger-disabled-background-color); border-color: var(--input-danger-disabled-border-color); color: var(--input-danger-disabled-text-color); } [nbInput].status-danger:disabled::-moz-placeholder { color: var(--input-danger-disabled-placeholder-text-color); } [nbInput].status-danger:disabled::placeholder { color: var(--input-danger-disabled-placeholder-text-color); } [nbInput].status-info { background-color: var(--input-info-background-color); border-color: var(--input-info-border-color); color: var(--input-info-text-color); } [nbInput].status-info::-moz-placeholder { color: var(--input-info-placeholder-text-color); } [nbInput].status-info::placeholder { color: var(--input-info-placeholder-text-color); } [nbInput].status-info:focus { background-color: var(--input-info-focus-background-color); border-color: var(--input-info-focus-border-color); } [nbInput].status-info:hover { background-color: var(--input-info-hover-background-color); border-color: var(--input-info-hover-border-color); } [nbInput].status-info:focus:hover { background-color: var(--input-info-focus-and-hover-background-color); border-color: var(--input-info-focus-and-hover-border-color); } [nbInput].status-info:disabled { background-color: var(--input-info-disabled-background-color); border-color: var(--input-info-disabled-border-color); color: var(--input-info-disabled-text-color); } [nbInput].status-info:disabled::-moz-placeholder { color: var(--input-info-disabled-placeholder-text-color); } [nbInput].status-info:disabled::placeholder { color: var(--input-info-disabled-placeholder-text-color); } [nbInput].status-control { background-color: var(--input-control-background-color); border-color: var(--input-control-border-color); color: var(--input-control-text-color); } [nbInput].status-control::-moz-placeholder { color: var(--input-control-placeholder-text-color); } [nbInput].status-control::placeholder { color: var(--input-control-placeholder-text-color); } [nbInput].status-control:focus { background-color: var(--input-control-focus-background-color); border-color: var(--input-control-focus-border-color); } [nbInput].status-control:hover { background-color: var(--input-control-hover-background-color); border-color: var(--input-control-hover-border-color); } [nbInput].status-control:focus:hover { background-color: var(--input-control-focus-and-hover-background-color); border-color: var(--input-control-focus-and-hover-border-color); } [nbInput].status-control:disabled { background-color: var(--input-control-disabled-background-color); border-color: var(--input-control-disabled-border-color); color: var(--input-control-disabled-text-color); } [nbInput].status-control:disabled::-moz-placeholder { color: var(--input-control-disabled-placeholder-text-color); } [nbInput].status-control:disabled::placeholder { color: var(--input-control-disabled-placeholder-text-color); } [nbInput].size-tiny { font-size: var(--input-tiny-text-font-size); font-weight: var(--input-tiny-text-font-weight); line-height: var(--input-tiny-text-line-height); padding: var(--input-tiny-padding); } [nbInput].size-tiny:not(.input-full-width) { max-width: var(--input-tiny-max-width); } [nbInput].size-tiny::-moz-placeholder { font-size: var(--input-tiny-placeholder-text-font-size); font-weight: var(--input-tiny-placeholder-text-font-weight); line-height: var(--input-tiny-placeholder-text-line-height); } [nbInput].size-tiny::placeholder { font-size: var(--input-tiny-placeholder-text-font-size); font-weight: var(--input-tiny-placeholder-text-font-weight); line-height: var(--input-tiny-placeholder-text-line-height); } [nbInput].size-small { font-size: var(--input-small-text-font-size); font-weight: var(--input-small-text-font-weight); line-height: var(--input-small-text-line-height); padding: var(--input-small-padding); } [nbInput].size-small:not(.input-full-width) { max-width: var(--input-small-max-width); } [nbInput].size-small::-moz-placeholder { font-size: var(--input-small-placeholder-text-font-size); font-weight: var(--input-small-placeholder-text-font-weight); line-height: var(--input-small-placeholder-text-line-height); } [nbInput].size-small::placeholder { font-size: var(--input-small-placeholder-text-font-size); font-weight: var(--input-small-placeholder-text-font-weight); line-height: var(--input-small-placeholder-text-line-height); } [nbInput].size-medium { font-size: var(--input-medium-text-font-size); font-weight: var(--input-medium-text-font-weight); line-height: var(--input-medium-text-line-height); padding: var(--input-medium-padding); } [nbInput].size-medium:not(.input-full-width) { max-width: var(--input-medium-max-width); } [nbInput].size-medium::-moz-placeholder { font-size: var(--input-medium-placeholder-text-font-size); font-weight: var(--input-medium-placeholder-text-font-weight); line-height: var(--input-medium-placeholder-text-line-height); } [nbInput].size-medium::placeholder { font-size: var(--input-medium-placeholder-text-font-size); font-weight: var(--input-medium-placeholder-text-font-weight); line-height: var(--input-medium-placeholder-text-line-height); } [nbInput].size-large { font-size: var(--input-large-text-font-size); font-weight: var(--input-large-text-font-weight); line-height: var(--input-large-text-line-height); padding: var(--input-large-padding); } [nbInput].size-large:not(.input-full-width) { max-width: var(--input-large-max-width); } [nbInput].size-large::-moz-placeholder { font-size: var(--input-large-placeholder-text-font-size); font-weight: var(--input-large-placeholder-text-font-weight); line-height: var(--input-large-placeholder-text-line-height); } [nbInput].size-large::placeholder { font-size: var(--input-large-placeholder-text-font-size); font-weight: var(--input-large-placeholder-text-font-weight); line-height: var(--input-large-placeholder-text-line-height); } [nbInput].size-giant { font-size: var(--input-giant-text-font-size); font-weight: var(--input-giant-text-font-weight); line-height: var(--input-giant-text-line-height); padding: var(--input-giant-padding); } [nbInput].size-giant:not(.input-full-width) { max-width: var(--input-giant-max-width); } [nbInput].size-giant::-moz-placeholder { font-size: var(--input-giant-placeholder-text-font-size); font-weight: var(--input-giant-placeholder-text-font-weight); line-height: var(--input-giant-placeholder-text-line-height); } [nbInput].size-giant::placeholder { font-size: var(--input-giant-placeholder-text-font-size); font-weight: var(--input-giant-placeholder-text-font-weight); line-height: var(--input-giant-placeholder-text-line-height); } [nbInput].shape-rectangle { border-radius: var(--input-rectangle-border-radius); } [nbInput].shape-semi-round { border-radius: var(--input-semi-round-border-radius); } [nbInput].shape-round { border-radius: var(--input-round-border-radius); } nb-form-field [nbInput] { width: 100%; } [dir=ltr] .nb-form-field-control-with-prefix [nbInput].size-tiny { padding-left: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-prefix [nbInput].size-tiny { padding-right: var(--form-field-addon-tiny-width); } [dir=ltr] .nb-form-field-control-with-suffix [nbInput].size-tiny { padding-right: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-suffix [nbInput].size-tiny { padding-left: var(--form-field-addon-tiny-width); } [dir=ltr] .nb-form-field-control-with-prefix [nbInput].size-small { padding-left: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-prefix [nbInput].size-small { padding-right: var(--form-field-addon-small-width); } [dir=ltr] .nb-form-field-control-with-suffix [nbInput].size-small { padding-right: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-suffix [nbInput].size-small { padding-left: var(--form-field-addon-small-width); } [dir=ltr] .nb-form-field-control-with-prefix [nbInput].size-medium { padding-left: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-prefix [nbInput].size-medium { padding-right: var(--form-field-addon-medium-width); } [dir=ltr] .nb-form-field-control-with-suffix [nbInput].size-medium { padding-right: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-suffix [nbInput].size-medium { padding-left: var(--form-field-addon-medium-width); } [dir=ltr] .nb-form-field-control-with-prefix [nbInput].size-large { padding-left: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-prefix [nbInput].size-large { padding-right: var(--form-field-addon-large-width); } [dir=ltr] .nb-form-field-control-with-suffix [nbInput].size-large { padding-right: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-suffix [nbInput].size-large { padding-left: var(--form-field-addon-large-width); } [dir=ltr] .nb-form-field-control-with-prefix [nbInput].size-giant { padding-left: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-prefix [nbInput].size-giant { padding-right: var(--form-field-addon-giant-width); } [dir=ltr] .nb-form-field-control-with-suffix [nbInput].size-giant { padding-right: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-suffix [nbInput].size-giant { padding-left: var(--form-field-addon-giant-width); } .overlay-backdrop { background: var(--overlay-backdrop-background-color); } .cdk-overlay-container { z-index: 1040; } nb-popover { border: var(--popover-border-width) solid var(--popover-border-color); border-radius: var(--popover-border-radius); background: var(--popover-background-color); box-shadow: var(--popover-shadow); color: var(--popover-text-color); } nb-popover .primitive-overlay { font-family: var(--popover-text-font-family); font-size: var(--popover-text-font-size); font-weight: var(--popover-text-font-weight); line-height: var(--popover-text-line-height); padding: var(--popover-padding); } nb-popover .arrow { border-left: var(--popover-arrow-size) solid transparent; border-right: var(--popover-arrow-size) solid transparent; border-bottom: var(--popover-arrow-size) solid var(--popover-border-color); } nb-popover .arrow::after { position: absolute; content: " "; width: 0; height: 0; top: 3px; left: calc(50% - var(--popover-arrow-size)); border-left: var(--popover-arrow-size) solid transparent; border-right: var(--popover-arrow-size) solid transparent; border-bottom: var(--popover-arrow-size) solid var(--popover-background-color); -webkit-clip-path: inset(0 0 2px); clip-path: inset(0 0 2px); } nb-popover.nb-overlay-bottom .arrow { top: calc(-1 * var(--popover-arrow-size) + 1px); left: calc(50% - var(--popover-arrow-size)); } nb-popover.nb-overlay-bottom-start .arrow { top: calc(-1 * var(--popover-arrow-size) + 1px); } [dir=ltr] nb-popover.nb-overlay-bottom-start .arrow { right: var(--popover-arrow-size); } [dir=rtl] nb-popover.nb-overlay-bottom-start .arrow { left: var(--popover-arrow-size); } nb-popover.nb-overlay-bottom-end .arrow { top: calc(-1 * var(--popover-arrow-size) + 1px); } [dir=ltr] nb-popover.nb-overlay-bottom-end .arrow { left: var(--popover-arrow-size); } [dir=rtl] nb-popover.nb-overlay-bottom-end .arrow { right: var(--popover-arrow-size); } nb-popover.nb-overlay-left .arrow { right: calc(-1 * var(--popover-arrow-size) - var(--popover-arrow-size) / 2 + 2px); top: calc(50% - var(--popover-arrow-size) * 0.5); transform: rotate(90deg); } nb-popover.nb-overlay-start-top .arrow { right: calc(-1 * var(--popover-arrow-size) - var(--popover-arrow-size) / 2 + 2px); bottom: var(--popover-arrow-size); transform: rotate(90deg); } nb-popover.nb-overlay-start-bottom .arrow { right: calc(-1 * var(--popover-arrow-size) - var(--popover-arrow-size) / 2 + 2px); top: var(--popover-arrow-size); transform: rotate(90deg); } nb-popover.nb-overlay-top .arrow { bottom: calc(-1 * var(--popover-arrow-size) + 1px); left: calc(50% - var(--popover-arrow-size)); transform: rotate(180deg); } nb-popover.nb-overlay-top-start .arrow { bottom: calc(-1 * var(--popover-arrow-size) + 1px); transform: rotate(180deg); } [dir=ltr] nb-popover.nb-overlay-top-start .arrow { right: var(--popover-arrow-size); } [dir=rtl] nb-popover.nb-overlay-top-start .arrow { left: var(--popover-arrow-size); } nb-popover.nb-overlay-top-end .arrow { bottom: calc(-1 * var(--popover-arrow-size) + 1px); transform: rotate(180deg); } [dir=ltr] nb-popover.nb-overlay-top-end .arrow { left: var(--popover-arrow-size); } [dir=rtl] nb-popover.nb-overlay-top-end .arrow { right: var(--popover-arrow-size); } nb-popover.nb-overlay-right .arrow { left: calc(-1 * var(--popover-arrow-size) - var(--popover-arrow-size) / 2 + 2px); top: calc(50% - var(--popover-arrow-size) * 0.5); transform: rotate(270deg); } nb-popover.nb-overlay-end-top .arrow { left: calc(-1 * var(--popover-arrow-size) - var(--popover-arrow-size) / 2 + 2px); bottom: var(--popover-arrow-size); transform: rotate(270deg); } nb-popover.nb-overlay-end-bottom .arrow { left: calc(-1 * var(--popover-arrow-size) - var(--popover-arrow-size) / 2 + 2px); top: var(--popover-arrow-size); transform: rotate(270deg); } .context-menu-host { /* Fixes click not being bubbled to the body in Safari. https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html */ cursor: pointer; } nb-context-menu { background-color: var(--context-menu-background-color); border-color: var(--context-menu-border-color); border-style: var(--context-menu-border-style); border-width: var(--context-menu-border-width); border-radius: var(--context-menu-border-radius); box-shadow: var(--context-menu-shadow); min-width: var(--context-menu-min-width); max-width: var(--context-menu-max-width); } nb-context-menu nb-menu { border-radius: var(--context-menu-border-radius); overflow: hidden; text-align: var(--context-menu-text-align); } nb-context-menu nb-menu nb-icon.expand-state svg { pointer-events: none; } nb-select .select-button { min-width: var(--select-min-width); cursor: var(--select-cursor); font-family: var(--select-text-font-family); } nb-select .select-button.placeholder { font-family: var(--select-placeholder-text-font-family); } nb-select .select-button:focus { outline: none; } nb-select .select-button[disabled] { cursor: var(--select-disabled-cursor); } nb-select.size-tiny .select-button { font-size: var(--select-tiny-text-font-size); font-weight: var(--select-tiny-text-font-weight); line-height: var(--select-tiny-text-line-height); } nb-select.size-tiny .select-button.placeholder { font-size: var(--select-tiny-placeholder-text-font-size); font-weight: var(--select-tiny-placeholder-text-font-weight); } nb-select.size-tiny .select-button.empty::before { content: " "; display: block; height: var(--select-tiny-text-line-height); } nb-select.size-tiny:not(.full-width) { max-width: var(--select-tiny-max-width); } nb-select.size-small .select-button { font-size: var(--select-small-text-font-size); font-weight: var(--select-small-text-font-weight); line-height: var(--select-small-text-line-height); } nb-select.size-small .select-button.placeholder { font-size: var(--select-small-placeholder-text-font-size); font-weight: var(--select-small-placeholder-text-font-weight); } nb-select.size-small .select-button.empty::before { content: " "; display: block; height: var(--select-small-text-line-height); } nb-select.size-small:not(.full-width) { max-width: var(--select-small-max-width); } nb-select.size-medium .select-button { font-size: var(--select-medium-text-font-size); font-weight: var(--select-medium-text-font-weight); line-height: var(--select-medium-text-line-height); } nb-select.size-medium .select-button.placeholder { font-size: var(--select-medium-placeholder-text-font-size); font-weight: var(--select-medium-placeholder-text-font-weight); } nb-select.size-medium .select-button.empty::before { content: " "; display: block; height: var(--select-medium-text-line-height); } nb-select.size-medium:not(.full-width) { max-width: var(--select-medium-max-width); } nb-select.size-large .select-button { font-size: var(--select-large-text-font-size); font-weight: var(--select-large-text-font-weight); line-height: var(--select-large-text-line-height); } nb-select.size-large .select-button.placeholder { font-size: var(--select-large-placeholder-text-font-size); font-weight: var(--select-large-placeholder-text-font-weight); } nb-select.size-large .select-button.empty::before { content: " "; display: block; height: var(--select-large-text-line-height); } nb-select.size-large:not(.full-width) { max-width: var(--select-large-max-width); } nb-select.size-giant .select-button { font-size: var(--select-giant-text-font-size); font-weight: var(--select-giant-text-font-weight); line-height: var(--select-giant-text-line-height); } nb-select.size-giant .select-button.placeholder { font-size: var(--select-giant-placeholder-text-font-size); font-weight: var(--select-giant-placeholder-text-font-weight); } nb-select.size-giant .select-button.empty::before { content: " "; display: block; height: var(--select-giant-text-line-height); } nb-select.size-giant:not(.full-width) { max-width: var(--select-giant-max-width); } nb-select.shape-rectangle .select-button { border-radius: var(--select-rectangle-border-radius); } nb-select.shape-semi-round .select-button { border-radius: var(--select-semi-round-border-radius); } nb-select.shape-round .select-button { border-radius: var(--select-round-border-radius); } nb-select.appearance-outline .select-button { border-style: var(--select-outline-border-style); border-width: var(--select-outline-border-width); } nb-select.appearance-outline .select-button.top { border-top-style: var(--select-outline-adjacent-border-style); border-top-width: var(--select-outline-adjacent-border-width); } nb-select.appearance-outline .select-button.bottom { border-bottom-style: var(--select-outline-adjacent-border-style); border-bottom-width: var(--select-outline-adjacent-border-width); } nb-select.appearance-outline.status-basic .select-button { background-color: var(--select-outline-basic-background-color); border-color: var(--select-outline-basic-border-color); color: var(--select-outline-basic-text-color); } nb-select.appearance-outline.status-basic .select-button.placeholder { color: var(--select-outline-basic-placeholder-text-color); } nb-select.appearance-outline.status-basic .select-button nb-icon { color: var(--select-outline-basic-icon-color); } nb-select.appearance-outline.status-basic .select-button:focus { background-color: var(--select-outline-basic-focus-background-color); border-color: var(--select-outline-basic-focus-border-color); } nb-select.appearance-outline.status-basic .select-button:hover { background-color: var(--select-outline-basic-hover-background-color); border-color: var(--select-outline-basic-hover-border-color); } nb-select.appearance-outline.status-basic .select-button:focus:hover { background-color: var(--select-outline-basic-focus-and-hover-background-color); border-color: var(--select-outline-basic-focus-and-hover-border-color); } nb-select.appearance-outline.status-basic .select-button[disabled] { color: var(--select-outline-basic-disabled-text-color); background-color: var(--select-outline-basic-disabled-background-color); border-color: var(--select-outline-basic-disabled-border-color); } nb-select.appearance-outline.status-basic .select-button[disabled] nb-icon { color: var(--select-outline-basic-disabled-icon-color); } nb-select.appearance-outline.status-basic .select-button.bottom, nb-select.appearance-outline.status-basic .select-button.top { border-color: var(--select-outline-basic-open-border-color); } nb-select.appearance-outline.status-basic .select-button.top { border-top-color: var(--select-outline-basic-adjacent-border-color); } nb-select.appearance-outline.status-basic .select-button.bottom { border-bottom-color: var(--select-outline-basic-adjacent-border-color); } nb-select.appearance-outline.status-primary .select-button { background-color: var(--select-outline-primary-background-color); border-color: var(--select-outline-primary-border-color); color: var(--select-outline-primary-text-color); } nb-select.appearance-outline.status-primary .select-button.placeholder { color: var(--select-outline-primary-placeholder-text-color); } nb-select.appearance-outline.status-primary .select-button nb-icon { color: var(--select-outline-primary-icon-color); } nb-select.appearance-outline.status-primary .select-button:focus { background-color: var(--select-outline-primary-focus-background-color); border-color: var(--select-outline-primary-focus-border-color); } nb-select.appearance-outline.status-primary .select-button:hover { background-color: var(--select-outline-primary-hover-background-color); border-color: var(--select-outline-primary-hover-border-color); } nb-select.appearance-outline.status-primary .select-button:focus:hover { background-color: var(--select-outline-primary-focus-and-hover-background-color); border-color: var(--select-outline-primary-focus-and-hover-border-color); } nb-select.appearance-outline.status-primary .select-button[disabled] { color: var(--select-outline-primary-disabled-text-color); background-color: var(--select-outline-primary-disabled-background-color); border-color: var(--select-outline-primary-disabled-border-color); } nb-select.appearance-outline.status-primary .select-button[disabled] nb-icon { color: var(--select-outline-primary-disabled-icon-color); } nb-select.appearance-outline.status-primary .select-button.bottom, nb-select.appearance-outline.status-primary .select-button.top { border-color: var(--select-outline-primary-open-border-color); } nb-select.appearance-outline.status-primary .select-button.top { border-top-color: var(--select-outline-primary-adjacent-border-color); } nb-select.appearance-outline.status-primary .select-button.bottom { border-bottom-color: var(--select-outline-primary-adjacent-border-color); } nb-select.appearance-outline.status-success .select-button { background-color: var(--select-outline-success-background-color); border-color: var(--select-outline-success-border-color); color: var(--select-outline-success-text-color); } nb-select.appearance-outline.status-success .select-button.placeholder { color: var(--select-outline-success-placeholder-text-color); } nb-select.appearance-outline.status-success .select-button nb-icon { color: var(--select-outline-success-icon-color); } nb-select.appearance-outline.status-success .select-button:focus { background-color: var(--select-outline-success-focus-background-color); border-color: var(--select-outline-success-focus-border-color); } nb-select.appearance-outline.status-success .select-button:hover { background-color: var(--select-outline-success-hover-background-color); border-color: var(--select-outline-success-hover-border-color); } nb-select.appearance-outline.status-success .select-button:focus:hover { background-color: var(--select-outline-success-focus-and-hover-background-color); border-color: var(--select-outline-success-focus-and-hover-border-color); } nb-select.appearance-outline.status-success .select-button[disabled] { color: var(--select-outline-success-disabled-text-color); background-color: var(--select-outline-success-disabled-background-color); border-color: var(--select-outline-success-disabled-border-color); } nb-select.appearance-outline.status-success .select-button[disabled] nb-icon { color: var(--select-outline-success-disabled-icon-color); } nb-select.appearance-outline.status-success .select-button.bottom, nb-select.appearance-outline.status-success .select-button.top { border-color: var(--select-outline-success-open-border-color); } nb-select.appearance-outline.status-success .select-button.top { border-top-color: var(--select-outline-success-adjacent-border-color); } nb-select.appearance-outline.status-success .select-button.bottom { border-bottom-color: var(--select-outline-success-adjacent-border-color); } nb-select.appearance-outline.status-warning .select-button { background-color: var(--select-outline-warning-background-color); border-color: var(--select-outline-warning-border-color); color: var(--select-outline-warning-text-color); } nb-select.appearance-outline.status-warning .select-button.placeholder { color: var(--select-outline-warning-placeholder-text-color); } nb-select.appearance-outline.status-warning .select-button nb-icon { color: var(--select-outline-warning-icon-color); } nb-select.appearance-outline.status-warning .select-button:focus { background-color: var(--select-outline-warning-focus-background-color); border-color: var(--select-outline-warning-focus-border-color); } nb-select.appearance-outline.status-warning .select-button:hover { background-color: var(--select-outline-warning-hover-background-color); border-color: var(--select-outline-warning-hover-border-color); } nb-select.appearance-outline.status-warning .select-button:focus:hover { background-color: var(--select-outline-warning-focus-and-hover-background-color); border-color: var(--select-outline-warning-focus-and-hover-border-color); } nb-select.appearance-outline.status-warning .select-button[disabled] { color: var(--select-outline-warning-disabled-text-color); background-color: var(--select-outline-warning-disabled-background-color); border-color: var(--select-outline-warning-disabled-border-color); } nb-select.appearance-outline.status-warning .select-button[disabled] nb-icon { color: var(--select-outline-warning-disabled-icon-color); } nb-select.appearance-outline.status-warning .select-button.bottom, nb-select.appearance-outline.status-warning .select-button.top { border-color: var(--select-outline-warning-open-border-color); } nb-select.appearance-outline.status-warning .select-button.top { border-top-color: var(--select-outline-warning-adjacent-border-color); } nb-select.appearance-outline.status-warning .select-button.bottom { border-bottom-color: var(--select-outline-warning-adjacent-border-color); } nb-select.appearance-outline.status-danger .select-button { background-color: var(--select-outline-danger-background-color); border-color: var(--select-outline-danger-border-color); color: var(--select-outline-danger-text-color); } nb-select.appearance-outline.status-danger .select-button.placeholder { color: var(--select-outline-danger-placeholder-text-color); } nb-select.appearance-outline.status-danger .select-button nb-icon { color: var(--select-outline-danger-icon-color); } nb-select.appearance-outline.status-danger .select-button:focus { background-color: var(--select-outline-danger-focus-background-color); border-color: var(--select-outline-danger-focus-border-color); } nb-select.appearance-outline.status-danger .select-button:hover { background-color: var(--select-outline-danger-hover-background-color); border-color: var(--select-outline-danger-hover-border-color); } nb-select.appearance-outline.status-danger .select-button:focus:hover { background-color: var(--select-outline-danger-focus-and-hover-background-color); border-color: var(--select-outline-danger-focus-and-hover-border-color); } nb-select.appearance-outline.status-danger .select-button[disabled] { color: var(--select-outline-danger-disabled-text-color); background-color: var(--select-outline-danger-disabled-background-color); border-color: var(--select-outline-danger-disabled-border-color); } nb-select.appearance-outline.status-danger .select-button[disabled] nb-icon { color: var(--select-outline-danger-disabled-icon-color); } nb-select.appearance-outline.status-danger .select-button.bottom, nb-select.appearance-outline.status-danger .select-button.top { border-color: var(--select-outline-danger-open-border-color); } nb-select.appearance-outline.status-danger .select-button.top { border-top-color: var(--select-outline-danger-adjacent-border-color); } nb-select.appearance-outline.status-danger .select-button.bottom { border-bottom-color: var(--select-outline-danger-adjacent-border-color); } nb-select.appearance-outline.status-info .select-button { background-color: var(--select-outline-info-background-color); border-color: var(--select-outline-info-border-color); color: var(--select-outline-info-text-color); } nb-select.appearance-outline.status-info .select-button.placeholder { color: var(--select-outline-info-placeholder-text-color); } nb-select.appearance-outline.status-info .select-button nb-icon { color: var(--select-outline-info-icon-color); } nb-select.appearance-outline.status-info .select-button:focus { background-color: var(--select-outline-info-focus-background-color); border-color: var(--select-outline-info-focus-border-color); } nb-select.appearance-outline.status-info .select-button:hover { background-color: var(--select-outline-info-hover-background-color); border-color: var(--select-outline-info-hover-border-color); } nb-select.appearance-outline.status-info .select-button:focus:hover { background-color: var(--select-outline-info-focus-and-hover-background-color); border-color: var(--select-outline-info-focus-and-hover-border-color); } nb-select.appearance-outline.status-info .select-button[disabled] { color: var(--select-outline-info-disabled-text-color); background-color: var(--select-outline-info-disabled-background-color); border-color: var(--select-outline-info-disabled-border-color); } nb-select.appearance-outline.status-info .select-button[disabled] nb-icon { color: var(--select-outline-info-disabled-icon-color); } nb-select.appearance-outline.status-info .select-button.bottom, nb-select.appearance-outline.status-info .select-button.top { border-color: var(--select-outline-info-open-border-color); } nb-select.appearance-outline.status-info .select-button.top { border-top-color: var(--select-outline-info-adjacent-border-color); } nb-select.appearance-outline.status-info .select-button.bottom { border-bottom-color: var(--select-outline-info-adjacent-border-color); } nb-select.appearance-outline.status-control .select-button { background-color: var(--select-outline-control-background-color); border-color: var(--select-outline-control-border-color); color: var(--select-outline-control-text-color); } nb-select.appearance-outline.status-control .select-button.placeholder { color: var(--select-outline-control-placeholder-text-color); } nb-select.appearance-outline.status-control .select-button nb-icon { color: var(--select-outline-control-icon-color); } nb-select.appearance-outline.status-control .select-button:focus { background-color: var(--select-outline-control-focus-background-color); border-color: var(--select-outline-control-focus-border-color); } nb-select.appearance-outline.status-control .select-button:hover { background-color: var(--select-outline-control-hover-background-color); border-color: var(--select-outline-control-hover-border-color); } nb-select.appearance-outline.status-control .select-button:focus:hover { background-color: var(--select-outline-control-focus-and-hover-background-color); border-color: var(--select-outline-control-focus-and-hover-border-color); } nb-select.appearance-outline.status-control .select-button[disabled] { color: var(--select-outline-control-disabled-text-color); background-color: var(--select-outline-control-disabled-background-color); border-color: var(--select-outline-control-disabled-border-color); } nb-select.appearance-outline.status-control .select-button[disabled] nb-icon { color: var(--select-outline-control-disabled-icon-color); } nb-select.appearance-outline.status-control .select-button.bottom, nb-select.appearance-outline.status-control .select-button.top { border-color: var(--select-outline-control-open-border-color); } nb-select.appearance-outline.status-control .select-button.top { border-top-color: var(--select-outline-control-adjacent-border-color); } nb-select.appearance-outline.status-control .select-button.bottom { border-bottom-color: var(--select-outline-control-adjacent-border-color); } nb-select.appearance-outline.size-tiny .select-button { padding: var(--select-outline-tiny-padding); } [dir=ltr] nb-select.appearance-outline.size-tiny .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-outline.size-tiny .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-tiny .select-button { padding-left: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-tiny .select-button { padding-right: var(--form-field-addon-tiny-width); } nb-select.appearance-outline.size-small .select-button { padding: var(--select-outline-small-padding); } [dir=ltr] nb-select.appearance-outline.size-small .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-outline.size-small .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-small .select-button { padding-left: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-small .select-button { padding-right: var(--form-field-addon-small-width); } nb-select.appearance-outline.size-medium .select-button { padding: var(--select-outline-medium-padding); } [dir=ltr] nb-select.appearance-outline.size-medium .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-outline.size-medium .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-medium .select-button { padding-left: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-medium .select-button { padding-right: var(--form-field-addon-medium-width); } nb-select.appearance-outline.size-large .select-button { padding: var(--select-outline-large-padding); } [dir=ltr] nb-select.appearance-outline.size-large .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-outline.size-large .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-large .select-button { padding-left: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-large .select-button { padding-right: var(--form-field-addon-large-width); } nb-select.appearance-outline.size-giant .select-button { padding: var(--select-outline-giant-padding); } [dir=ltr] nb-select.appearance-outline.size-giant .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-outline.size-giant .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-giant .select-button { padding-left: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-giant .select-button { padding-right: var(--form-field-addon-giant-width); } nb-select.appearance-filled .select-button { border-style: var(--select-filled-border-style); border-width: var(--select-filled-border-width); } nb-select.appearance-filled.size-tiny .select-button { padding: var(--select-filled-tiny-padding); } [dir=ltr] nb-select.appearance-filled.size-tiny .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-filled.size-tiny .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-tiny .select-button { padding-left: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-tiny .select-button { padding-right: var(--form-field-addon-tiny-width); } nb-select.appearance-filled.size-small .select-button { padding: var(--select-filled-small-padding); } [dir=ltr] nb-select.appearance-filled.size-small .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-filled.size-small .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-small .select-button { padding-left: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-small .select-button { padding-right: var(--form-field-addon-small-width); } nb-select.appearance-filled.size-medium .select-button { padding: var(--select-filled-medium-padding); } [dir=ltr] nb-select.appearance-filled.size-medium .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-filled.size-medium .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-medium .select-button { padding-left: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-medium .select-button { padding-right: var(--form-field-addon-medium-width); } nb-select.appearance-filled.size-large .select-button { padding: var(--select-filled-large-padding); } [dir=ltr] nb-select.appearance-filled.size-large .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-filled.size-large .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-large .select-button { padding-left: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-large .select-button { padding-right: var(--form-field-addon-large-width); } nb-select.appearance-filled.size-giant .select-button { padding: var(--select-filled-giant-padding); } [dir=ltr] nb-select.appearance-filled.size-giant .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-filled.size-giant .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-giant .select-button { padding-left: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-giant .select-button { padding-right: var(--form-field-addon-giant-width); } nb-select.appearance-filled.status-basic .select-button { background-color: var(--select-filled-basic-background-color); border-color: var(--select-filled-basic-border-color); color: var(--select-filled-basic-text-color); } nb-select.appearance-filled.status-basic .select-button.placeholder { color: var(--select-filled-basic-placeholder-text-color); } nb-select.appearance-filled.status-basic .select-button:focus { background-color: var(--select-filled-basic-focus-background-color); border-color: var(--select-filled-basic-focus-border-color); } nb-select.appearance-filled.status-basic .select-button:hover { background-color: var(--select-filled-basic-hover-background-color); border-color: var(--select-filled-basic-hover-border-color); } nb-select.appearance-filled.status-basic .select-button:focus:hover { background-color: var(--select-filled-basic-focus-and-hover-background-color); border-color: var(--select-filled-basic-focus-and-hover-border-color); } nb-select.appearance-filled.status-basic .select-button[disabled] { background-color: var(--select-filled-basic-disabled-background-color); border-color: var(--select-filled-basic-disabled-border-color); color: var(--select-filled-basic-disabled-text-color); } nb-select.appearance-filled.status-basic .select-button[disabled] nb-icon { color: var(--select-filled-basic-disabled-icon-color); } nb-select.appearance-filled.status-basic .select-button nb-icon { color: var(--select-filled-basic-icon-color); } nb-select.appearance-filled.status-primary .select-button { background-color: var(--select-filled-primary-background-color); border-color: var(--select-filled-primary-border-color); color: var(--select-filled-primary-text-color); } nb-select.appearance-filled.status-primary .select-button.placeholder { color: var(--select-filled-primary-placeholder-text-color); } nb-select.appearance-filled.status-primary .select-button:focus { background-color: var(--select-filled-primary-focus-background-color); border-color: var(--select-filled-primary-focus-border-color); } nb-select.appearance-filled.status-primary .select-button:hover { background-color: var(--select-filled-primary-hover-background-color); border-color: var(--select-filled-primary-hover-border-color); } nb-select.appearance-filled.status-primary .select-button:focus:hover { background-color: var(--select-filled-primary-focus-and-hover-background-color); border-color: var(--select-filled-primary-focus-and-hover-border-color); } nb-select.appearance-filled.status-primary .select-button[disabled] { background-color: var(--select-filled-primary-disabled-background-color); border-color: var(--select-filled-primary-disabled-border-color); color: var(--select-filled-primary-disabled-text-color); } nb-select.appearance-filled.status-primary .select-button[disabled] nb-icon { color: var(--select-filled-primary-disabled-icon-color); } nb-select.appearance-filled.status-primary .select-button nb-icon { color: var(--select-filled-primary-icon-color); } nb-select.appearance-filled.status-success .select-button { background-color: var(--select-filled-success-background-color); border-color: var(--select-filled-success-border-color); color: var(--select-filled-success-text-color); } nb-select.appearance-filled.status-success .select-button.placeholder { color: var(--select-filled-success-placeholder-text-color); } nb-select.appearance-filled.status-success .select-button:focus { background-color: var(--select-filled-success-focus-background-color); border-color: var(--select-filled-success-focus-border-color); } nb-select.appearance-filled.status-success .select-button:hover { background-color: var(--select-filled-success-hover-background-color); border-color: var(--select-filled-success-hover-border-color); } nb-select.appearance-filled.status-success .select-button:focus:hover { background-color: var(--select-filled-success-focus-and-hover-background-color); border-color: var(--select-filled-success-focus-and-hover-border-color); } nb-select.appearance-filled.status-success .select-button[disabled] { background-color: var(--select-filled-success-disabled-background-color); border-color: var(--select-filled-success-disabled-border-color); color: var(--select-filled-success-disabled-text-color); } nb-select.appearance-filled.status-success .select-button[disabled] nb-icon { color: var(--select-filled-success-disabled-icon-color); } nb-select.appearance-filled.status-success .select-button nb-icon { color: var(--select-filled-success-icon-color); } nb-select.appearance-filled.status-warning .select-button { background-color: var(--select-filled-warning-background-color); border-color: var(--select-filled-warning-border-color); color: var(--select-filled-warning-text-color); } nb-select.appearance-filled.status-warning .select-button.placeholder { color: var(--select-filled-warning-placeholder-text-color); } nb-select.appearance-filled.status-warning .select-button:focus { background-color: var(--select-filled-warning-focus-background-color); border-color: var(--select-filled-warning-focus-border-color); } nb-select.appearance-filled.status-warning .select-button:hover { background-color: var(--select-filled-warning-hover-background-color); border-color: var(--select-filled-warning-hover-border-color); } nb-select.appearance-filled.status-warning .select-button:focus:hover { background-color: var(--select-filled-warning-focus-and-hover-background-color); border-color: var(--select-filled-warning-focus-and-hover-border-color); } nb-select.appearance-filled.status-warning .select-button[disabled] { background-color: var(--select-filled-warning-disabled-background-color); border-color: var(--select-filled-warning-disabled-border-color); color: var(--select-filled-warning-disabled-text-color); } nb-select.appearance-filled.status-warning .select-button[disabled] nb-icon { color: var(--select-filled-warning-disabled-icon-color); } nb-select.appearance-filled.status-warning .select-button nb-icon { color: var(--select-filled-warning-icon-color); } nb-select.appearance-filled.status-danger .select-button { background-color: var(--select-filled-danger-background-color); border-color: var(--select-filled-danger-border-color); color: var(--select-filled-danger-text-color); } nb-select.appearance-filled.status-danger .select-button.placeholder { color: var(--select-filled-danger-placeholder-text-color); } nb-select.appearance-filled.status-danger .select-button:focus { background-color: var(--select-filled-danger-focus-background-color); border-color: var(--select-filled-danger-focus-border-color); } nb-select.appearance-filled.status-danger .select-button:hover { background-color: var(--select-filled-danger-hover-background-color); border-color: var(--select-filled-danger-hover-border-color); } nb-select.appearance-filled.status-danger .select-button:focus:hover { background-color: var(--select-filled-danger-focus-and-hover-background-color); border-color: var(--select-filled-danger-focus-and-hover-border-color); } nb-select.appearance-filled.status-danger .select-button[disabled] { background-color: var(--select-filled-danger-disabled-background-color); border-color: var(--select-filled-danger-disabled-border-color); color: var(--select-filled-danger-disabled-text-color); } nb-select.appearance-filled.status-danger .select-button[disabled] nb-icon { color: var(--select-filled-danger-disabled-icon-color); } nb-select.appearance-filled.status-danger .select-button nb-icon { color: var(--select-filled-danger-icon-color); } nb-select.appearance-filled.status-info .select-button { background-color: var(--select-filled-info-background-color); border-color: var(--select-filled-info-border-color); color: var(--select-filled-info-text-color); } nb-select.appearance-filled.status-info .select-button.placeholder { color: var(--select-filled-info-placeholder-text-color); } nb-select.appearance-filled.status-info .select-button:focus { background-color: var(--select-filled-info-focus-background-color); border-color: var(--select-filled-info-focus-border-color); } nb-select.appearance-filled.status-info .select-button:hover { background-color: var(--select-filled-info-hover-background-color); border-color: var(--select-filled-info-hover-border-color); } nb-select.appearance-filled.status-info .select-button:focus:hover { background-color: var(--select-filled-info-focus-and-hover-background-color); border-color: var(--select-filled-info-focus-and-hover-border-color); } nb-select.appearance-filled.status-info .select-button[disabled] { background-color: var(--select-filled-info-disabled-background-color); border-color: var(--select-filled-info-disabled-border-color); color: var(--select-filled-info-disabled-text-color); } nb-select.appearance-filled.status-info .select-button[disabled] nb-icon { color: var(--select-filled-info-disabled-icon-color); } nb-select.appearance-filled.status-info .select-button nb-icon { color: var(--select-filled-info-icon-color); } nb-select.appearance-filled.status-control .select-button { background-color: var(--select-filled-control-background-color); border-color: var(--select-filled-control-border-color); color: var(--select-filled-control-text-color); } nb-select.appearance-filled.status-control .select-button.placeholder { color: var(--select-filled-control-placeholder-text-color); } nb-select.appearance-filled.status-control .select-button:focus { background-color: var(--select-filled-control-focus-background-color); border-color: var(--select-filled-control-focus-border-color); } nb-select.appearance-filled.status-control .select-button:hover { background-color: var(--select-filled-control-hover-background-color); border-color: var(--select-filled-control-hover-border-color); } nb-select.appearance-filled.status-control .select-button:focus:hover { background-color: var(--select-filled-control-focus-and-hover-background-color); border-color: var(--select-filled-control-focus-and-hover-border-color); } nb-select.appearance-filled.status-control .select-button[disabled] { background-color: var(--select-filled-control-disabled-background-color); border-color: var(--select-filled-control-disabled-border-color); color: var(--select-filled-control-disabled-text-color); } nb-select.appearance-filled.status-control .select-button[disabled] nb-icon { color: var(--select-filled-control-disabled-icon-color); } nb-select.appearance-filled.status-control .select-button nb-icon { color: var(--select-filled-control-icon-color); } nb-select.appearance-hero .select-button { border: none; } nb-select.appearance-hero.size-tiny .select-button { padding: var(--select-hero-tiny-padding); } [dir=ltr] nb-select.appearance-hero.size-tiny .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-hero.size-tiny .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-tiny .select-button { padding-left: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-tiny .select-button { padding-right: var(--form-field-addon-tiny-width); } nb-select.appearance-hero.size-small .select-button { padding: var(--select-hero-small-padding); } [dir=ltr] nb-select.appearance-hero.size-small .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-hero.size-small .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-small .select-button { padding-left: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-small .select-button { padding-right: var(--form-field-addon-small-width); } nb-select.appearance-hero.size-medium .select-button { padding: var(--select-hero-medium-padding); } [dir=ltr] nb-select.appearance-hero.size-medium .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-hero.size-medium .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-medium .select-button { padding-left: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-medium .select-button { padding-right: var(--form-field-addon-medium-width); } nb-select.appearance-hero.size-large .select-button { padding: var(--select-hero-large-padding); } [dir=ltr] nb-select.appearance-hero.size-large .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-hero.size-large .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-large .select-button { padding-left: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-large .select-button { padding-right: var(--form-field-addon-large-width); } nb-select.appearance-hero.size-giant .select-button { padding: var(--select-hero-giant-padding); } [dir=ltr] nb-select.appearance-hero.size-giant .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-hero.size-giant .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-giant .select-button { padding-left: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-giant .select-button { padding-right: var(--form-field-addon-giant-width); } nb-select.appearance-hero.status-basic .select-button { background-image: linear-gradient(to right, var(--select-hero-basic-left-background-color), var(--select-hero-basic-right-background-color)); color: var(--select-hero-basic-text-color); } nb-select.appearance-hero.status-basic .select-button.placeholder { color: var(--select-hero-basic-placeholder-text-color); } nb-select.appearance-hero.status-basic .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-basic-focus-left-background-color), var(--select-hero-basic-focus-right-background-color)); } nb-select.appearance-hero.status-basic .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-basic-hover-left-background-color), var(--select-hero-basic-hover-right-background-color)); } nb-select.appearance-hero.status-basic .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-basic-focus-and-hover-left-background-color), var(--select-hero-basic-focus-and-hover-right-background-color)); } nb-select.appearance-hero.status-basic .select-button[disabled] { color: var(--select-hero-basic-disabled-text-color); background-color: var(--select-hero-basic-disabled-background-color); background-image: none; } nb-select.appearance-hero.status-basic .select-button[disabled] nb-icon { color: var(--select-hero-basic-disabled-icon-color); } nb-select.appearance-hero.status-basic .select-button nb-icon { color: var(--select-hero-basic-icon-color); } nb-select.appearance-hero.status-primary .select-button { background-image: linear-gradient(to right, var(--select-hero-primary-left-background-color), var(--select-hero-primary-right-background-color)); color: var(--select-hero-primary-text-color); } nb-select.appearance-hero.status-primary .select-button.placeholder { color: var(--select-hero-primary-placeholder-text-color); } nb-select.appearance-hero.status-primary .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-primary-focus-left-background-color), var(--select-hero-primary-focus-right-background-color)); } nb-select.appearance-hero.status-primary .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-primary-hover-left-background-color), var(--select-hero-primary-hover-right-background-color)); } nb-select.appearance-hero.status-primary .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-primary-focus-and-hover-left-background-color), var(--select-hero-primary-focus-and-hover-right-background-color)); } nb-select.appearance-hero.status-primary .select-button[disabled] { color: var(--select-hero-primary-disabled-text-color); background-color: var(--select-hero-primary-disabled-background-color); background-image: none; } nb-select.appearance-hero.status-primary .select-button[disabled] nb-icon { color: var(--select-hero-primary-disabled-icon-color); } nb-select.appearance-hero.status-primary .select-button nb-icon { color: var(--select-hero-primary-icon-color); } nb-select.appearance-hero.status-success .select-button { background-image: linear-gradient(to right, var(--select-hero-success-left-background-color), var(--select-hero-success-right-background-color)); color: var(--select-hero-success-text-color); } nb-select.appearance-hero.status-success .select-button.placeholder { color: var(--select-hero-success-placeholder-text-color); } nb-select.appearance-hero.status-success .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-success-focus-left-background-color), var(--select-hero-success-focus-right-background-color)); } nb-select.appearance-hero.status-success .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-success-hover-left-background-color), var(--select-hero-success-hover-right-background-color)); } nb-select.appearance-hero.status-success .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-success-focus-and-hover-left-background-color), var(--select-hero-success-focus-and-hover-right-background-color)); } nb-select.appearance-hero.status-success .select-button[disabled] { color: var(--select-hero-success-disabled-text-color); background-color: var(--select-hero-success-disabled-background-color); background-image: none; } nb-select.appearance-hero.status-success .select-button[disabled] nb-icon { color: var(--select-hero-success-disabled-icon-color); } nb-select.appearance-hero.status-success .select-button nb-icon { color: var(--select-hero-success-icon-color); } nb-select.appearance-hero.status-warning .select-button { background-image: linear-gradient(to right, var(--select-hero-warning-left-background-color), var(--select-hero-warning-right-background-color)); color: var(--select-hero-warning-text-color); } nb-select.appearance-hero.status-warning .select-button.placeholder { color: var(--select-hero-warning-placeholder-text-color); } nb-select.appearance-hero.status-warning .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-warning-focus-left-background-color), var(--select-hero-warning-focus-right-background-color)); } nb-select.appearance-hero.status-warning .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-warning-hover-left-background-color), var(--select-hero-warning-hover-right-background-color)); } nb-select.appearance-hero.status-warning .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-warning-focus-and-hover-left-background-color), var(--select-hero-warning-focus-and-hover-right-background-color)); } nb-select.appearance-hero.status-warning .select-button[disabled] { color: var(--select-hero-warning-disabled-text-color); background-color: var(--select-hero-warning-disabled-background-color); background-image: none; } nb-select.appearance-hero.status-warning .select-button[disabled] nb-icon { color: var(--select-hero-warning-disabled-icon-color); } nb-select.appearance-hero.status-warning .select-button nb-icon { color: var(--select-hero-warning-icon-color); } nb-select.appearance-hero.status-danger .select-button { background-image: linear-gradient(to right, var(--select-hero-danger-left-background-color), var(--select-hero-danger-right-background-color)); color: var(--select-hero-danger-text-color); } nb-select.appearance-hero.status-danger .select-button.placeholder { color: var(--select-hero-danger-placeholder-text-color); } nb-select.appearance-hero.status-danger .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-danger-focus-left-background-color), var(--select-hero-danger-focus-right-background-color)); } nb-select.appearance-hero.status-danger .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-danger-hover-left-background-color), var(--select-hero-danger-hover-right-background-color)); } nb-select.appearance-hero.status-danger .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-danger-focus-and-hover-left-background-color), var(--select-hero-danger-focus-and-hover-right-background-color)); } nb-select.appearance-hero.status-danger .select-button[disabled] { color: var(--select-hero-danger-disabled-text-color); background-color: var(--select-hero-danger-disabled-background-color); background-image: none; } nb-select.appearance-hero.status-danger .select-button[disabled] nb-icon { color: var(--select-hero-danger-disabled-icon-color); } nb-select.appearance-hero.status-danger .select-button nb-icon { color: var(--select-hero-danger-icon-color); } nb-select.appearance-hero.status-info .select-button { background-image: linear-gradient(to right, var(--select-hero-info-left-background-color), var(--select-hero-info-right-background-color)); color: var(--select-hero-info-text-color); } nb-select.appearance-hero.status-info .select-button.placeholder { color: var(--select-hero-info-placeholder-text-color); } nb-select.appearance-hero.status-info .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-info-focus-left-background-color), var(--select-hero-info-focus-right-background-color)); } nb-select.appearance-hero.status-info .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-info-hover-left-background-color), var(--select-hero-info-hover-right-background-color)); } nb-select.appearance-hero.status-info .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-info-focus-and-hover-left-background-color), var(--select-hero-info-focus-and-hover-right-background-color)); } nb-select.appearance-hero.status-info .select-button[disabled] { color: var(--select-hero-info-disabled-text-color); background-color: var(--select-hero-info-disabled-background-color); background-image: none; } nb-select.appearance-hero.status-info .select-button[disabled] nb-icon { color: var(--select-hero-info-disabled-icon-color); } nb-select.appearance-hero.status-info .select-button nb-icon { color: var(--select-hero-info-icon-color); } nb-select.appearance-hero.status-control .select-button { background-image: linear-gradient(to right, var(--select-hero-control-left-background-color), var(--select-hero-control-right-background-color)); color: var(--select-hero-control-text-color); } nb-select.appearance-hero.status-control .select-button.placeholder { color: var(--select-hero-control-placeholder-text-color); } nb-select.appearance-hero.status-control .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-control-focus-left-background-color), var(--select-hero-control-focus-right-background-color)); } nb-select.appearance-hero.status-control .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-control-hover-left-background-color), var(--select-hero-control-hover-right-background-color)); } nb-select.appearance-hero.status-control .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-control-focus-and-hover-left-background-color), var(--select-hero-control-focus-and-hover-right-background-color)); } nb-select.appearance-hero.status-control .select-button[disabled] { color: var(--select-hero-control-disabled-text-color); background-color: var(--select-hero-control-disabled-background-color); background-image: none; } nb-select.appearance-hero.status-control .select-button[disabled] nb-icon { color: var(--select-hero-control-disabled-icon-color); } nb-select.appearance-hero.status-control .select-button nb-icon { color: var(--select-hero-control-icon-color); } nb-form-field nb-select { width: 100%; } nb-select-with-autocomplete .select-button { min-width: var(--select-min-width); cursor: var(--select-cursor); font-family: var(--select-text-font-family); } nb-select-with-autocomplete .select-button.placeholder { font-family: var(--select-placeholder-text-font-family); } nb-select-with-autocomplete .select-button:focus { outline: none; } nb-select-with-autocomplete .select-button[disabled] { cursor: var(--select-disabled-cursor); } nb-select-with-autocomplete.size-tiny .select-button { font-size: var(--select-tiny-text-font-size); font-weight: var(--select-tiny-text-font-weight); line-height: var(--select-tiny-text-line-height); } nb-select-with-autocomplete.size-tiny .select-button.placeholder { font-size: var(--select-tiny-placeholder-text-font-size); font-weight: var(--select-tiny-placeholder-text-font-weight); } nb-select-with-autocomplete.size-tiny .select-button.empty::before { content: " "; display: block; height: var(--select-tiny-text-line-height); } nb-select-with-autocomplete.size-tiny:not(.full-width) { max-width: var(--select-tiny-max-width); } nb-select-with-autocomplete.size-small .select-button { font-size: var(--select-small-text-font-size); font-weight: var(--select-small-text-font-weight); line-height: var(--select-small-text-line-height); } nb-select-with-autocomplete.size-small .select-button.placeholder { font-size: var(--select-small-placeholder-text-font-size); font-weight: var(--select-small-placeholder-text-font-weight); } nb-select-with-autocomplete.size-small .select-button.empty::before { content: " "; display: block; height: var(--select-small-text-line-height); } nb-select-with-autocomplete.size-small:not(.full-width) { max-width: var(--select-small-max-width); } nb-select-with-autocomplete.size-medium .select-button { font-size: var(--select-medium-text-font-size); font-weight: var(--select-medium-text-font-weight); line-height: var(--select-medium-text-line-height); } nb-select-with-autocomplete.size-medium .select-button.placeholder { font-size: var(--select-medium-placeholder-text-font-size); font-weight: var(--select-medium-placeholder-text-font-weight); } nb-select-with-autocomplete.size-medium .select-button.empty::before { content: " "; display: block; height: var(--select-medium-text-line-height); } nb-select-with-autocomplete.size-medium:not(.full-width) { max-width: var(--select-medium-max-width); } nb-select-with-autocomplete.size-large .select-button { font-size: var(--select-large-text-font-size); font-weight: var(--select-large-text-font-weight); line-height: var(--select-large-text-line-height); } nb-select-with-autocomplete.size-large .select-button.placeholder { font-size: var(--select-large-placeholder-text-font-size); font-weight: var(--select-large-placeholder-text-font-weight); } nb-select-with-autocomplete.size-large .select-button.empty::before { content: " "; display: block; height: var(--select-large-text-line-height); } nb-select-with-autocomplete.size-large:not(.full-width) { max-width: var(--select-large-max-width); } nb-select-with-autocomplete.size-giant .select-button { font-size: var(--select-giant-text-font-size); font-weight: var(--select-giant-text-font-weight); line-height: var(--select-giant-text-line-height); } nb-select-with-autocomplete.size-giant .select-button.placeholder { font-size: var(--select-giant-placeholder-text-font-size); font-weight: var(--select-giant-placeholder-text-font-weight); } nb-select-with-autocomplete.size-giant .select-button.empty::before { content: " "; display: block; height: var(--select-giant-text-line-height); } nb-select-with-autocomplete.size-giant:not(.full-width) { max-width: var(--select-giant-max-width); } nb-select-with-autocomplete.shape-rectangle .select-button { border-radius: var(--select-rectangle-border-radius); } nb-select-with-autocomplete.shape-semi-round .select-button { border-radius: var(--select-semi-round-border-radius); } nb-select-with-autocomplete.shape-round .select-button { border-radius: var(--select-round-border-radius); } nb-select-with-autocomplete.appearance-outline .select-button { border-style: var(--select-outline-border-style); border-width: var(--select-outline-border-width); } nb-select-with-autocomplete.appearance-outline .select-button.top { border-top-style: var(--select-outline-adjacent-border-style); border-top-width: var(--select-outline-adjacent-border-width); } nb-select-with-autocomplete.appearance-outline .select-button.bottom { border-bottom-style: var(--select-outline-adjacent-border-style); border-bottom-width: var(--select-outline-adjacent-border-width); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button { background-color: var(--select-outline-basic-background-color); border-color: var(--select-outline-basic-border-color); color: var(--select-outline-basic-text-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button.placeholder { color: var(--select-outline-basic-placeholder-text-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button nb-icon { color: var(--select-outline-basic-icon-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button:focus { background-color: var(--select-outline-basic-focus-background-color); border-color: var(--select-outline-basic-focus-border-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button:hover { background-color: var(--select-outline-basic-hover-background-color); border-color: var(--select-outline-basic-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button:focus:hover { background-color: var(--select-outline-basic-focus-and-hover-background-color); border-color: var(--select-outline-basic-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button[disabled] { color: var(--select-outline-basic-disabled-text-color); background-color: var(--select-outline-basic-disabled-background-color); border-color: var(--select-outline-basic-disabled-border-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button[disabled] nb-icon { color: var(--select-outline-basic-disabled-icon-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button.bottom, nb-select-with-autocomplete.appearance-outline.status-basic .select-button.top { border-color: var(--select-outline-basic-open-border-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button.top { border-top-color: var(--select-outline-basic-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button.bottom { border-bottom-color: var(--select-outline-basic-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button { background-color: var(--select-outline-primary-background-color); border-color: var(--select-outline-primary-border-color); color: var(--select-outline-primary-text-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button.placeholder { color: var(--select-outline-primary-placeholder-text-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button nb-icon { color: var(--select-outline-primary-icon-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button:focus { background-color: var(--select-outline-primary-focus-background-color); border-color: var(--select-outline-primary-focus-border-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button:hover { background-color: var(--select-outline-primary-hover-background-color); border-color: var(--select-outline-primary-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button:focus:hover { background-color: var(--select-outline-primary-focus-and-hover-background-color); border-color: var(--select-outline-primary-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button[disabled] { color: var(--select-outline-primary-disabled-text-color); background-color: var(--select-outline-primary-disabled-background-color); border-color: var(--select-outline-primary-disabled-border-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button[disabled] nb-icon { color: var(--select-outline-primary-disabled-icon-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button.bottom, nb-select-with-autocomplete.appearance-outline.status-primary .select-button.top { border-color: var(--select-outline-primary-open-border-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button.top { border-top-color: var(--select-outline-primary-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button.bottom { border-bottom-color: var(--select-outline-primary-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button { background-color: var(--select-outline-success-background-color); border-color: var(--select-outline-success-border-color); color: var(--select-outline-success-text-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button.placeholder { color: var(--select-outline-success-placeholder-text-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button nb-icon { color: var(--select-outline-success-icon-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button:focus { background-color: var(--select-outline-success-focus-background-color); border-color: var(--select-outline-success-focus-border-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button:hover { background-color: var(--select-outline-success-hover-background-color); border-color: var(--select-outline-success-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button:focus:hover { background-color: var(--select-outline-success-focus-and-hover-background-color); border-color: var(--select-outline-success-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button[disabled] { color: var(--select-outline-success-disabled-text-color); background-color: var(--select-outline-success-disabled-background-color); border-color: var(--select-outline-success-disabled-border-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button[disabled] nb-icon { color: var(--select-outline-success-disabled-icon-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button.bottom, nb-select-with-autocomplete.appearance-outline.status-success .select-button.top { border-color: var(--select-outline-success-open-border-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button.top { border-top-color: var(--select-outline-success-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button.bottom { border-bottom-color: var(--select-outline-success-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button { background-color: var(--select-outline-warning-background-color); border-color: var(--select-outline-warning-border-color); color: var(--select-outline-warning-text-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button.placeholder { color: var(--select-outline-warning-placeholder-text-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button nb-icon { color: var(--select-outline-warning-icon-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button:focus { background-color: var(--select-outline-warning-focus-background-color); border-color: var(--select-outline-warning-focus-border-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button:hover { background-color: var(--select-outline-warning-hover-background-color); border-color: var(--select-outline-warning-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button:focus:hover { background-color: var(--select-outline-warning-focus-and-hover-background-color); border-color: var(--select-outline-warning-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button[disabled] { color: var(--select-outline-warning-disabled-text-color); background-color: var(--select-outline-warning-disabled-background-color); border-color: var(--select-outline-warning-disabled-border-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button[disabled] nb-icon { color: var(--select-outline-warning-disabled-icon-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button.bottom, nb-select-with-autocomplete.appearance-outline.status-warning .select-button.top { border-color: var(--select-outline-warning-open-border-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button.top { border-top-color: var(--select-outline-warning-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button.bottom { border-bottom-color: var(--select-outline-warning-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button { background-color: var(--select-outline-danger-background-color); border-color: var(--select-outline-danger-border-color); color: var(--select-outline-danger-text-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button.placeholder { color: var(--select-outline-danger-placeholder-text-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button nb-icon { color: var(--select-outline-danger-icon-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button:focus { background-color: var(--select-outline-danger-focus-background-color); border-color: var(--select-outline-danger-focus-border-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button:hover { background-color: var(--select-outline-danger-hover-background-color); border-color: var(--select-outline-danger-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button:focus:hover { background-color: var(--select-outline-danger-focus-and-hover-background-color); border-color: var(--select-outline-danger-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button[disabled] { color: var(--select-outline-danger-disabled-text-color); background-color: var(--select-outline-danger-disabled-background-color); border-color: var(--select-outline-danger-disabled-border-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button[disabled] nb-icon { color: var(--select-outline-danger-disabled-icon-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button.bottom, nb-select-with-autocomplete.appearance-outline.status-danger .select-button.top { border-color: var(--select-outline-danger-open-border-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button.top { border-top-color: var(--select-outline-danger-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button.bottom { border-bottom-color: var(--select-outline-danger-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button { background-color: var(--select-outline-info-background-color); border-color: var(--select-outline-info-border-color); color: var(--select-outline-info-text-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button.placeholder { color: var(--select-outline-info-placeholder-text-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button nb-icon { color: var(--select-outline-info-icon-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button:focus { background-color: var(--select-outline-info-focus-background-color); border-color: var(--select-outline-info-focus-border-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button:hover { background-color: var(--select-outline-info-hover-background-color); border-color: var(--select-outline-info-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button:focus:hover { background-color: var(--select-outline-info-focus-and-hover-background-color); border-color: var(--select-outline-info-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button[disabled] { color: var(--select-outline-info-disabled-text-color); background-color: var(--select-outline-info-disabled-background-color); border-color: var(--select-outline-info-disabled-border-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button[disabled] nb-icon { color: var(--select-outline-info-disabled-icon-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button.bottom, nb-select-with-autocomplete.appearance-outline.status-info .select-button.top { border-color: var(--select-outline-info-open-border-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button.top { border-top-color: var(--select-outline-info-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button.bottom { border-bottom-color: var(--select-outline-info-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button { background-color: var(--select-outline-control-background-color); border-color: var(--select-outline-control-border-color); color: var(--select-outline-control-text-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button.placeholder { color: var(--select-outline-control-placeholder-text-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button nb-icon { color: var(--select-outline-control-icon-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button:focus { background-color: var(--select-outline-control-focus-background-color); border-color: var(--select-outline-control-focus-border-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button:hover { background-color: var(--select-outline-control-hover-background-color); border-color: var(--select-outline-control-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button:focus:hover { background-color: var(--select-outline-control-focus-and-hover-background-color); border-color: var(--select-outline-control-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button[disabled] { color: var(--select-outline-control-disabled-text-color); background-color: var(--select-outline-control-disabled-background-color); border-color: var(--select-outline-control-disabled-border-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button[disabled] nb-icon { color: var(--select-outline-control-disabled-icon-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button.bottom, nb-select-with-autocomplete.appearance-outline.status-control .select-button.top { border-color: var(--select-outline-control-open-border-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button.top { border-top-color: var(--select-outline-control-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button.bottom { border-bottom-color: var(--select-outline-control-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.size-tiny .select-button { padding: var(--select-outline-tiny-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-tiny .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-tiny .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-outline.size-tiny .nb-form-field-prefix-tiny, nb-select-with-autocomplete.appearance-outline.size-tiny .nb-form-field-suffix-tiny { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-tiny .nb-form-field-prefix-tiny { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-tiny .nb-form-field-prefix-tiny { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-tiny .nb-form-field-suffix-tiny { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-tiny .nb-form-field-suffix-tiny { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-tiny [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-tiny [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-tiny .select-button { padding-left: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-tiny .select-button { padding-right: var(--form-field-addon-tiny-width); } nb-select-with-autocomplete.appearance-outline.size-small .select-button { padding: var(--select-outline-small-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-small .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-small .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-outline.size-small .nb-form-field-prefix-small, nb-select-with-autocomplete.appearance-outline.size-small .nb-form-field-suffix-small { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-small .nb-form-field-prefix-small { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-small .nb-form-field-prefix-small { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-small .nb-form-field-suffix-small { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-small .nb-form-field-suffix-small { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-small [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-small [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-small .select-button { padding-left: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-small .select-button { padding-right: var(--form-field-addon-small-width); } nb-select-with-autocomplete.appearance-outline.size-medium .select-button { padding: var(--select-outline-medium-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-medium .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-medium .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-outline.size-medium .nb-form-field-prefix-medium, nb-select-with-autocomplete.appearance-outline.size-medium .nb-form-field-suffix-medium { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-medium .nb-form-field-prefix-medium { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-medium .nb-form-field-prefix-medium { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-medium .nb-form-field-suffix-medium { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-medium .nb-form-field-suffix-medium { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-medium [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-medium [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-medium .select-button { padding-left: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-medium .select-button { padding-right: var(--form-field-addon-medium-width); } nb-select-with-autocomplete.appearance-outline.size-large .select-button { padding: var(--select-outline-large-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-large .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-large .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-outline.size-large .nb-form-field-prefix-large, nb-select-with-autocomplete.appearance-outline.size-large .nb-form-field-suffix-large { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-large .nb-form-field-prefix-large { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-large .nb-form-field-prefix-large { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-large .nb-form-field-suffix-large { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-large .nb-form-field-suffix-large { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-large [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-large [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-large .select-button { padding-left: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-large .select-button { padding-right: var(--form-field-addon-large-width); } nb-select-with-autocomplete.appearance-outline.size-giant .select-button { padding: var(--select-outline-giant-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-giant .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-giant .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-outline.size-giant .nb-form-field-prefix-giant, nb-select-with-autocomplete.appearance-outline.size-giant .nb-form-field-suffix-giant { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-giant .nb-form-field-prefix-giant { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-giant .nb-form-field-prefix-giant { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-giant .nb-form-field-suffix-giant { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-giant .nb-form-field-suffix-giant { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-giant [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-giant [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-giant .select-button { padding-left: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-giant .select-button { padding-right: var(--form-field-addon-giant-width); } nb-select-with-autocomplete.appearance-filled .select-button { border-style: var(--select-filled-border-style); border-width: var(--select-filled-border-width); } nb-select-with-autocomplete.appearance-filled.size-tiny .select-button { padding: var(--select-filled-tiny-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-tiny .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-tiny .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-filled.size-tiny .nb-form-field-prefix-tiny, nb-select-with-autocomplete.appearance-filled.size-tiny .nb-form-field-suffix-tiny { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-tiny .nb-form-field-prefix-tiny { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-tiny .nb-form-field-prefix-tiny { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-tiny .nb-form-field-suffix-tiny { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-tiny .nb-form-field-suffix-tiny { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-tiny [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-tiny [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-tiny .select-button { padding-left: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-tiny .select-button { padding-right: var(--form-field-addon-tiny-width); } nb-select-with-autocomplete.appearance-filled.size-small .select-button { padding: var(--select-filled-small-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-small .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-small .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-filled.size-small .nb-form-field-prefix-small, nb-select-with-autocomplete.appearance-filled.size-small .nb-form-field-suffix-small { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-small .nb-form-field-prefix-small { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-small .nb-form-field-prefix-small { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-small .nb-form-field-suffix-small { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-small .nb-form-field-suffix-small { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-small [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-small [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-small .select-button { padding-left: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-small .select-button { padding-right: var(--form-field-addon-small-width); } nb-select-with-autocomplete.appearance-filled.size-medium .select-button { padding: var(--select-filled-medium-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-medium .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-medium .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-filled.size-medium .nb-form-field-prefix-medium, nb-select-with-autocomplete.appearance-filled.size-medium .nb-form-field-suffix-medium { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-medium .nb-form-field-prefix-medium { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-medium .nb-form-field-prefix-medium { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-medium .nb-form-field-suffix-medium { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-medium .nb-form-field-suffix-medium { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-medium [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-medium [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-medium .select-button { padding-left: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-medium .select-button { padding-right: var(--form-field-addon-medium-width); } nb-select-with-autocomplete.appearance-filled.size-large .select-button { padding: var(--select-filled-large-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-large .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-large .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-filled.size-large .nb-form-field-prefix-large, nb-select-with-autocomplete.appearance-filled.size-large .nb-form-field-suffix-large { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-large .nb-form-field-prefix-large { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-large .nb-form-field-prefix-large { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-large .nb-form-field-suffix-large { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-large .nb-form-field-suffix-large { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-large [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-large [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-large .select-button { padding-left: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-large .select-button { padding-right: var(--form-field-addon-large-width); } nb-select-with-autocomplete.appearance-filled.size-giant .select-button { padding: var(--select-filled-giant-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-giant .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-giant .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-filled.size-giant .nb-form-field-prefix-giant, nb-select-with-autocomplete.appearance-filled.size-giant .nb-form-field-suffix-giant { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-giant .nb-form-field-prefix-giant { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-giant .nb-form-field-prefix-giant { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-giant .nb-form-field-suffix-giant { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-giant .nb-form-field-suffix-giant { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-giant [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-giant [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-giant .select-button { padding-left: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-giant .select-button { padding-right: var(--form-field-addon-giant-width); } nb-select-with-autocomplete.appearance-filled.status-basic .select-button { background-color: var(--select-filled-basic-background-color); border-color: var(--select-filled-basic-border-color); color: var(--select-filled-basic-text-color); } nb-select-with-autocomplete.appearance-filled.status-basic .select-button.placeholder { color: var(--select-filled-basic-placeholder-text-color); } nb-select-with-autocomplete.appearance-filled.status-basic .select-button:focus { background-color: var(--select-filled-basic-focus-background-color); border-color: var(--select-filled-basic-focus-border-color); } nb-select-with-autocomplete.appearance-filled.status-basic .select-button:hover { background-color: var(--select-filled-basic-hover-background-color); border-color: var(--select-filled-basic-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-basic .select-button:focus:hover { background-color: var(--select-filled-basic-focus-and-hover-background-color); border-color: var(--select-filled-basic-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-basic .select-button[disabled] { background-color: var(--select-filled-basic-disabled-background-color); border-color: var(--select-filled-basic-disabled-border-color); color: var(--select-filled-basic-disabled-text-color); } nb-select-with-autocomplete.appearance-filled.status-basic .select-button[disabled] nb-icon { color: var(--select-filled-basic-disabled-icon-color); } nb-select-with-autocomplete.appearance-filled.status-basic .select-button nb-icon { color: var(--select-filled-basic-icon-color); } nb-select-with-autocomplete.appearance-filled.status-primary .select-button { background-color: var(--select-filled-primary-background-color); border-color: var(--select-filled-primary-border-color); color: var(--select-filled-primary-text-color); } nb-select-with-autocomplete.appearance-filled.status-primary .select-button.placeholder { color: var(--select-filled-primary-placeholder-text-color); } nb-select-with-autocomplete.appearance-filled.status-primary .select-button:focus { background-color: var(--select-filled-primary-focus-background-color); border-color: var(--select-filled-primary-focus-border-color); } nb-select-with-autocomplete.appearance-filled.status-primary .select-button:hover { background-color: var(--select-filled-primary-hover-background-color); border-color: var(--select-filled-primary-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-primary .select-button:focus:hover { background-color: var(--select-filled-primary-focus-and-hover-background-color); border-color: var(--select-filled-primary-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-primary .select-button[disabled] { background-color: var(--select-filled-primary-disabled-background-color); border-color: var(--select-filled-primary-disabled-border-color); color: var(--select-filled-primary-disabled-text-color); } nb-select-with-autocomplete.appearance-filled.status-primary .select-button[disabled] nb-icon { color: var(--select-filled-primary-disabled-icon-color); } nb-select-with-autocomplete.appearance-filled.status-primary .select-button nb-icon { color: var(--select-filled-primary-icon-color); } nb-select-with-autocomplete.appearance-filled.status-success .select-button { background-color: var(--select-filled-success-background-color); border-color: var(--select-filled-success-border-color); color: var(--select-filled-success-text-color); } nb-select-with-autocomplete.appearance-filled.status-success .select-button.placeholder { color: var(--select-filled-success-placeholder-text-color); } nb-select-with-autocomplete.appearance-filled.status-success .select-button:focus { background-color: var(--select-filled-success-focus-background-color); border-color: var(--select-filled-success-focus-border-color); } nb-select-with-autocomplete.appearance-filled.status-success .select-button:hover { background-color: var(--select-filled-success-hover-background-color); border-color: var(--select-filled-success-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-success .select-button:focus:hover { background-color: var(--select-filled-success-focus-and-hover-background-color); border-color: var(--select-filled-success-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-success .select-button[disabled] { background-color: var(--select-filled-success-disabled-background-color); border-color: var(--select-filled-success-disabled-border-color); color: var(--select-filled-success-disabled-text-color); } nb-select-with-autocomplete.appearance-filled.status-success .select-button[disabled] nb-icon { color: var(--select-filled-success-disabled-icon-color); } nb-select-with-autocomplete.appearance-filled.status-success .select-button nb-icon { color: var(--select-filled-success-icon-color); } nb-select-with-autocomplete.appearance-filled.status-warning .select-button { background-color: var(--select-filled-warning-background-color); border-color: var(--select-filled-warning-border-color); color: var(--select-filled-warning-text-color); } nb-select-with-autocomplete.appearance-filled.status-warning .select-button.placeholder { color: var(--select-filled-warning-placeholder-text-color); } nb-select-with-autocomplete.appearance-filled.status-warning .select-button:focus { background-color: var(--select-filled-warning-focus-background-color); border-color: var(--select-filled-warning-focus-border-color); } nb-select-with-autocomplete.appearance-filled.status-warning .select-button:hover { background-color: var(--select-filled-warning-hover-background-color); border-color: var(--select-filled-warning-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-warning .select-button:focus:hover { background-color: var(--select-filled-warning-focus-and-hover-background-color); border-color: var(--select-filled-warning-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-warning .select-button[disabled] { background-color: var(--select-filled-warning-disabled-background-color); border-color: var(--select-filled-warning-disabled-border-color); color: var(--select-filled-warning-disabled-text-color); } nb-select-with-autocomplete.appearance-filled.status-warning .select-button[disabled] nb-icon { color: var(--select-filled-warning-disabled-icon-color); } nb-select-with-autocomplete.appearance-filled.status-warning .select-button nb-icon { color: var(--select-filled-warning-icon-color); } nb-select-with-autocomplete.appearance-filled.status-danger .select-button { background-color: var(--select-filled-danger-background-color); border-color: var(--select-filled-danger-border-color); color: var(--select-filled-danger-text-color); } nb-select-with-autocomplete.appearance-filled.status-danger .select-button.placeholder { color: var(--select-filled-danger-placeholder-text-color); } nb-select-with-autocomplete.appearance-filled.status-danger .select-button:focus { background-color: var(--select-filled-danger-focus-background-color); border-color: var(--select-filled-danger-focus-border-color); } nb-select-with-autocomplete.appearance-filled.status-danger .select-button:hover { background-color: var(--select-filled-danger-hover-background-color); border-color: var(--select-filled-danger-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-danger .select-button:focus:hover { background-color: var(--select-filled-danger-focus-and-hover-background-color); border-color: var(--select-filled-danger-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-danger .select-button[disabled] { background-color: var(--select-filled-danger-disabled-background-color); border-color: var(--select-filled-danger-disabled-border-color); color: var(--select-filled-danger-disabled-text-color); } nb-select-with-autocomplete.appearance-filled.status-danger .select-button[disabled] nb-icon { color: var(--select-filled-danger-disabled-icon-color); } nb-select-with-autocomplete.appearance-filled.status-danger .select-button nb-icon { color: var(--select-filled-danger-icon-color); } nb-select-with-autocomplete.appearance-filled.status-info .select-button { background-color: var(--select-filled-info-background-color); border-color: var(--select-filled-info-border-color); color: var(--select-filled-info-text-color); } nb-select-with-autocomplete.appearance-filled.status-info .select-button.placeholder { color: var(--select-filled-info-placeholder-text-color); } nb-select-with-autocomplete.appearance-filled.status-info .select-button:focus { background-color: var(--select-filled-info-focus-background-color); border-color: var(--select-filled-info-focus-border-color); } nb-select-with-autocomplete.appearance-filled.status-info .select-button:hover { background-color: var(--select-filled-info-hover-background-color); border-color: var(--select-filled-info-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-info .select-button:focus:hover { background-color: var(--select-filled-info-focus-and-hover-background-color); border-color: var(--select-filled-info-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-info .select-button[disabled] { background-color: var(--select-filled-info-disabled-background-color); border-color: var(--select-filled-info-disabled-border-color); color: var(--select-filled-info-disabled-text-color); } nb-select-with-autocomplete.appearance-filled.status-info .select-button[disabled] nb-icon { color: var(--select-filled-info-disabled-icon-color); } nb-select-with-autocomplete.appearance-filled.status-info .select-button nb-icon { color: var(--select-filled-info-icon-color); } nb-select-with-autocomplete.appearance-filled.status-control .select-button { background-color: var(--select-filled-control-background-color); border-color: var(--select-filled-control-border-color); color: var(--select-filled-control-text-color); } nb-select-with-autocomplete.appearance-filled.status-control .select-button.placeholder { color: var(--select-filled-control-placeholder-text-color); } nb-select-with-autocomplete.appearance-filled.status-control .select-button:focus { background-color: var(--select-filled-control-focus-background-color); border-color: var(--select-filled-control-focus-border-color); } nb-select-with-autocomplete.appearance-filled.status-control .select-button:hover { background-color: var(--select-filled-control-hover-background-color); border-color: var(--select-filled-control-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-control .select-button:focus:hover { background-color: var(--select-filled-control-focus-and-hover-background-color); border-color: var(--select-filled-control-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-control .select-button[disabled] { background-color: var(--select-filled-control-disabled-background-color); border-color: var(--select-filled-control-disabled-border-color); color: var(--select-filled-control-disabled-text-color); } nb-select-with-autocomplete.appearance-filled.status-control .select-button[disabled] nb-icon { color: var(--select-filled-control-disabled-icon-color); } nb-select-with-autocomplete.appearance-filled.status-control .select-button nb-icon { color: var(--select-filled-control-icon-color); } nb-select-with-autocomplete.appearance-hero .select-button { border: none; } nb-select-with-autocomplete.appearance-hero.size-tiny .select-button { padding: var(--select-hero-tiny-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-tiny .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-tiny .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-hero.size-tiny .nb-form-field-prefix-tiny, nb-select-with-autocomplete.appearance-hero.size-tiny .nb-form-field-suffix-tiny { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-tiny .nb-form-field-prefix-tiny { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-tiny .nb-form-field-prefix-tiny { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-tiny .nb-form-field-suffix-tiny { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-tiny .nb-form-field-suffix-tiny { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-tiny [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-tiny [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-tiny .select-button { padding-left: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-tiny .select-button { padding-right: var(--form-field-addon-tiny-width); } nb-select-with-autocomplete.appearance-hero.size-small .select-button { padding: var(--select-hero-small-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-small .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-small .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-hero.size-small .nb-form-field-prefix-small, nb-select-with-autocomplete.appearance-hero.size-small .nb-form-field-suffix-small { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-small .nb-form-field-prefix-small { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-small .nb-form-field-prefix-small { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-small .nb-form-field-suffix-small { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-small .nb-form-field-suffix-small { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-small [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-small [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-small .select-button { padding-left: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-small .select-button { padding-right: var(--form-field-addon-small-width); } nb-select-with-autocomplete.appearance-hero.size-medium .select-button { padding: var(--select-hero-medium-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-medium .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-medium .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-hero.size-medium .nb-form-field-prefix-medium, nb-select-with-autocomplete.appearance-hero.size-medium .nb-form-field-suffix-medium { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-medium .nb-form-field-prefix-medium { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-medium .nb-form-field-prefix-medium { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-medium .nb-form-field-suffix-medium { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-medium .nb-form-field-suffix-medium { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-medium [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-medium [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-medium .select-button { padding-left: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-medium .select-button { padding-right: var(--form-field-addon-medium-width); } nb-select-with-autocomplete.appearance-hero.size-large .select-button { padding: var(--select-hero-large-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-large .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-large .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-hero.size-large .nb-form-field-prefix-large, nb-select-with-autocomplete.appearance-hero.size-large .nb-form-field-suffix-large { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-large .nb-form-field-prefix-large { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-large .nb-form-field-prefix-large { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-large .nb-form-field-suffix-large { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-large .nb-form-field-suffix-large { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-large [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-large [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-large .select-button { padding-left: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-large .select-button { padding-right: var(--form-field-addon-large-width); } nb-select-with-autocomplete.appearance-hero.size-giant .select-button { padding: var(--select-hero-giant-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-giant .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-giant .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-hero.size-giant .nb-form-field-prefix-giant, nb-select-with-autocomplete.appearance-hero.size-giant .nb-form-field-suffix-giant { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-giant .nb-form-field-prefix-giant { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-giant .nb-form-field-prefix-giant { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-giant .nb-form-field-suffix-giant { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-giant .nb-form-field-suffix-giant { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-giant [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-giant [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-giant .select-button { padding-left: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-giant .select-button { padding-right: var(--form-field-addon-giant-width); } nb-select-with-autocomplete.appearance-hero.status-basic .select-button { background-image: linear-gradient(to right, var(--select-hero-basic-left-background-color), var(--select-hero-basic-right-background-color)); color: var(--select-hero-basic-text-color); } nb-select-with-autocomplete.appearance-hero.status-basic .select-button.placeholder { color: var(--select-hero-basic-placeholder-text-color); } nb-select-with-autocomplete.appearance-hero.status-basic .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-basic-focus-left-background-color), var(--select-hero-basic-focus-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-basic .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-basic-hover-left-background-color), var(--select-hero-basic-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-basic .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-basic-focus-and-hover-left-background-color), var(--select-hero-basic-focus-and-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-basic .select-button[disabled] { color: var(--select-hero-basic-disabled-text-color); background-color: var(--select-hero-basic-disabled-background-color); background-image: none; } nb-select-with-autocomplete.appearance-hero.status-basic .select-button[disabled] nb-icon { color: var(--select-hero-basic-disabled-icon-color); } nb-select-with-autocomplete.appearance-hero.status-basic .select-button nb-icon { color: var(--select-hero-basic-icon-color); } nb-select-with-autocomplete.appearance-hero.status-primary .select-button { background-image: linear-gradient(to right, var(--select-hero-primary-left-background-color), var(--select-hero-primary-right-background-color)); color: var(--select-hero-primary-text-color); } nb-select-with-autocomplete.appearance-hero.status-primary .select-button.placeholder { color: var(--select-hero-primary-placeholder-text-color); } nb-select-with-autocomplete.appearance-hero.status-primary .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-primary-focus-left-background-color), var(--select-hero-primary-focus-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-primary .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-primary-hover-left-background-color), var(--select-hero-primary-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-primary .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-primary-focus-and-hover-left-background-color), var(--select-hero-primary-focus-and-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-primary .select-button[disabled] { color: var(--select-hero-primary-disabled-text-color); background-color: var(--select-hero-primary-disabled-background-color); background-image: none; } nb-select-with-autocomplete.appearance-hero.status-primary .select-button[disabled] nb-icon { color: var(--select-hero-primary-disabled-icon-color); } nb-select-with-autocomplete.appearance-hero.status-primary .select-button nb-icon { color: var(--select-hero-primary-icon-color); } nb-select-with-autocomplete.appearance-hero.status-success .select-button { background-image: linear-gradient(to right, var(--select-hero-success-left-background-color), var(--select-hero-success-right-background-color)); color: var(--select-hero-success-text-color); } nb-select-with-autocomplete.appearance-hero.status-success .select-button.placeholder { color: var(--select-hero-success-placeholder-text-color); } nb-select-with-autocomplete.appearance-hero.status-success .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-success-focus-left-background-color), var(--select-hero-success-focus-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-success .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-success-hover-left-background-color), var(--select-hero-success-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-success .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-success-focus-and-hover-left-background-color), var(--select-hero-success-focus-and-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-success .select-button[disabled] { color: var(--select-hero-success-disabled-text-color); background-color: var(--select-hero-success-disabled-background-color); background-image: none; } nb-select-with-autocomplete.appearance-hero.status-success .select-button[disabled] nb-icon { color: var(--select-hero-success-disabled-icon-color); } nb-select-with-autocomplete.appearance-hero.status-success .select-button nb-icon { color: var(--select-hero-success-icon-color); } nb-select-with-autocomplete.appearance-hero.status-warning .select-button { background-image: linear-gradient(to right, var(--select-hero-warning-left-background-color), var(--select-hero-warning-right-background-color)); color: var(--select-hero-warning-text-color); } nb-select-with-autocomplete.appearance-hero.status-warning .select-button.placeholder { color: var(--select-hero-warning-placeholder-text-color); } nb-select-with-autocomplete.appearance-hero.status-warning .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-warning-focus-left-background-color), var(--select-hero-warning-focus-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-warning .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-warning-hover-left-background-color), var(--select-hero-warning-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-warning .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-warning-focus-and-hover-left-background-color), var(--select-hero-warning-focus-and-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-warning .select-button[disabled] { color: var(--select-hero-warning-disabled-text-color); background-color: var(--select-hero-warning-disabled-background-color); background-image: none; } nb-select-with-autocomplete.appearance-hero.status-warning .select-button[disabled] nb-icon { color: var(--select-hero-warning-disabled-icon-color); } nb-select-with-autocomplete.appearance-hero.status-warning .select-button nb-icon { color: var(--select-hero-warning-icon-color); } nb-select-with-autocomplete.appearance-hero.status-danger .select-button { background-image: linear-gradient(to right, var(--select-hero-danger-left-background-color), var(--select-hero-danger-right-background-color)); color: var(--select-hero-danger-text-color); } nb-select-with-autocomplete.appearance-hero.status-danger .select-button.placeholder { color: var(--select-hero-danger-placeholder-text-color); } nb-select-with-autocomplete.appearance-hero.status-danger .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-danger-focus-left-background-color), var(--select-hero-danger-focus-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-danger .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-danger-hover-left-background-color), var(--select-hero-danger-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-danger .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-danger-focus-and-hover-left-background-color), var(--select-hero-danger-focus-and-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-danger .select-button[disabled] { color: var(--select-hero-danger-disabled-text-color); background-color: var(--select-hero-danger-disabled-background-color); background-image: none; } nb-select-with-autocomplete.appearance-hero.status-danger .select-button[disabled] nb-icon { color: var(--select-hero-danger-disabled-icon-color); } nb-select-with-autocomplete.appearance-hero.status-danger .select-button nb-icon { color: var(--select-hero-danger-icon-color); } nb-select-with-autocomplete.appearance-hero.status-info .select-button { background-image: linear-gradient(to right, var(--select-hero-info-left-background-color), var(--select-hero-info-right-background-color)); color: var(--select-hero-info-text-color); } nb-select-with-autocomplete.appearance-hero.status-info .select-button.placeholder { color: var(--select-hero-info-placeholder-text-color); } nb-select-with-autocomplete.appearance-hero.status-info .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-info-focus-left-background-color), var(--select-hero-info-focus-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-info .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-info-hover-left-background-color), var(--select-hero-info-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-info .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-info-focus-and-hover-left-background-color), var(--select-hero-info-focus-and-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-info .select-button[disabled] { color: var(--select-hero-info-disabled-text-color); background-color: var(--select-hero-info-disabled-background-color); background-image: none; } nb-select-with-autocomplete.appearance-hero.status-info .select-button[disabled] nb-icon { color: var(--select-hero-info-disabled-icon-color); } nb-select-with-autocomplete.appearance-hero.status-info .select-button nb-icon { color: var(--select-hero-info-icon-color); } nb-select-with-autocomplete.appearance-hero.status-control .select-button { background-image: linear-gradient(to right, var(--select-hero-control-left-background-color), var(--select-hero-control-right-background-color)); color: var(--select-hero-control-text-color); } nb-select-with-autocomplete.appearance-hero.status-control .select-button.placeholder { color: var(--select-hero-control-placeholder-text-color); } nb-select-with-autocomplete.appearance-hero.status-control .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-control-focus-left-background-color), var(--select-hero-control-focus-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-control .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-control-hover-left-background-color), var(--select-hero-control-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-control .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-control-focus-and-hover-left-background-color), var(--select-hero-control-focus-and-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-control .select-button[disabled] { color: var(--select-hero-control-disabled-text-color); background-color: var(--select-hero-control-disabled-background-color); background-image: none; } nb-select-with-autocomplete.appearance-hero.status-control .select-button[disabled] nb-icon { color: var(--select-hero-control-disabled-icon-color); } nb-select-with-autocomplete.appearance-hero.status-control .select-button nb-icon { color: var(--select-hero-control-icon-color); } nb-form-field nb-select-with-autocomplete { width: 100%; } nb-option-list { background-color: var(--option-list-background-color); border-color: var(--option-list-border-color); border-style: var(--option-list-border-style); border-width: var(--option-list-border-width); border-radius: var(--option-list-border-radius); box-shadow: var(--option-list-shadow); overflow: hidden; } nb-option-list .option-list { height: 100%; max-height: var(--option-list-max-height); margin: 0; padding: 0; overflow: auto; } nb-option-list.position-top { border-bottom: var(--option-list-adjacent-border-width) var(--option-list-adjacent-border-style) var(--option-list-adjacent-border-color); } nb-option-list.position-bottom { border-top: var(--option-list-adjacent-border-width) var(--option-list-adjacent-border-style) var(--option-list-adjacent-border-color); } nb-option-group { color: var(--option-group-text-color); font-family: var(--option-text-font-family); } nb-option-list.size-tiny nb-option-group { font-size: var(--option-tiny-text-font-size); font-weight: var(--option-tiny-text-font-weight); line-height: var(--option-tiny-text-line-height); } nb-option-list.size-tiny nb-option-group .option-group-title { padding: var(--option-tiny-padding); } nb-option-list.size-tiny nb-option-group nb-option { padding-left: var(--option-group-tiny-start-padding); } nb-option-list.size-small nb-option-group { font-size: var(--option-small-text-font-size); font-weight: var(--option-small-text-font-weight); line-height: var(--option-small-text-line-height); } nb-option-list.size-small nb-option-group .option-group-title { padding: var(--option-small-padding); } nb-option-list.size-small nb-option-group nb-option { padding-left: var(--option-group-small-start-padding); } nb-option-list.size-medium nb-option-group { font-size: var(--option-medium-text-font-size); font-weight: var(--option-medium-text-font-weight); line-height: var(--option-medium-text-line-height); } nb-option-list.size-medium nb-option-group .option-group-title { padding: var(--option-medium-padding); } nb-option-list.size-medium nb-option-group nb-option { padding-left: var(--option-group-medium-start-padding); } nb-option-list.size-large nb-option-group { font-size: var(--option-large-text-font-size); font-weight: var(--option-large-text-font-weight); line-height: var(--option-large-text-line-height); } nb-option-list.size-large nb-option-group .option-group-title { padding: var(--option-large-padding); } nb-option-list.size-large nb-option-group nb-option { padding-left: var(--option-group-large-start-padding); } nb-option-list.size-giant nb-option-group { font-size: var(--option-giant-text-font-size); font-weight: var(--option-giant-text-font-weight); line-height: var(--option-giant-text-line-height); } nb-option-list.size-giant nb-option-group .option-group-title { padding: var(--option-giant-padding); } nb-option-list.size-giant nb-option-group nb-option { padding-left: var(--option-group-giant-start-padding); } nb-option { background-color: var(--option-background-color); color: var(--option-text-color); font-family: var(--option-text-font-family); } nb-option.active { background-color: var(--option-active-background-color); color: var(--option-active-text-color); } nb-option.selected { background-color: var(--option-selected-background-color); color: var(--option-selected-text-color); } nb-option:focus { background-color: var(--option-focus-background-color); color: var(--option-focus-text-color); outline: none; } nb-option:focus.selected { background-color: var(--option-selected-focus-background-color); color: var(--option-selected-focus-text-color); } nb-option:hover { background-color: var(--option-hover-background-color); color: var(--option-hover-text-color); } nb-option:hover.selected { background-color: var(--option-selected-hover-background-color); color: var(--option-selected-hover-text-color); } nb-option.multiple.selected { background-color: var(--option-background-color); color: var(--option-text-color); } nb-option.multiple:focus { background-color: var(--option-focus-background-color); color: var(--option-focus-text-color); } nb-option-list.size-tiny nb-option { font-size: var(--option-tiny-text-font-size); font-weight: var(--option-tiny-text-font-weight); line-height: var(--option-tiny-text-line-height); padding: var(--option-tiny-padding); } nb-option-list.size-small nb-option { font-size: var(--option-small-text-font-size); font-weight: var(--option-small-text-font-weight); line-height: var(--option-small-text-line-height); padding: var(--option-small-padding); } nb-option-list.size-medium nb-option { font-size: var(--option-medium-text-font-size); font-weight: var(--option-medium-text-font-weight); line-height: var(--option-medium-text-line-height); padding: var(--option-medium-padding); } nb-option-list.size-large nb-option { font-size: var(--option-large-text-font-size); font-weight: var(--option-large-text-font-weight); line-height: var(--option-large-text-line-height); padding: var(--option-large-padding); } nb-option-list.size-giant nb-option { font-size: var(--option-giant-text-font-size); font-weight: var(--option-giant-text-font-weight); line-height: var(--option-giant-text-line-height); padding: var(--option-giant-padding); } nb-option, nb-option-group { -webkit-user-select: none; -moz-user-select: none; user-select: none; } nb-option[disabled], nb-option-group[disabled] { background-color: var(--option-disabled-background-color); color: var(--option-disabled-text-color); } nb-toast { border-style: var(--toastr-border-style); border-width: var(--toastr-border-width); border-radius: var(--toastr-border-radius); padding: var(--toastr-padding); box-shadow: var(--toastr-shadow); } nb-toast .title { font-family: var(--toastr-title-text-font-family); font-size: var(--toastr-title-text-font-size); font-weight: var(--toastr-title-text-font-weight); line-height: var(--toastr-title-text-line-height); } nb-toast .message { font-family: var(--toastr-text-font-family); font-size: var(--toastr-text-font-size); font-weight: var(--toastr-text-font-weight); line-height: var(--toastr-text-line-height); } nb-toast .icon-container { border-radius: var(--toastr-border-radius); min-width: 2.5rem; min-height: 2.5rem; display: flex; justify-content: center; align-items: center; } [dir=ltr] nb-toast .icon-container { margin-right: 1.25rem; } [dir=rtl] nb-toast .icon-container { margin-left: 1.25rem; } nb-toast .icon-container nb-icon { font-size: 1.5rem; } nb-toast.status-basic { background: var(--toastr-basic-background-color); border-color: var(--toastr-basic-border-color); color: var(--toastr-basic-text-color); } nb-toast.status-basic .title { color: var(--toastr-basic-text-color); } nb-toast.status-basic.destroy-by-click:hover { background: var(--toastr-destroyable-basic-hover-background-color); border-color: var(--toastr-destroyable-basic-hover-border-color); } nb-toast.status-basic .icon-container { background: var(--toastr-icon-basic-background-color); color: var(--toastr-icon-basic-color); } nb-toast.status-primary { background: var(--toastr-primary-background-color); border-color: var(--toastr-primary-border-color); color: var(--toastr-primary-text-color); } nb-toast.status-primary .title { color: var(--toastr-primary-text-color); } nb-toast.status-primary.destroy-by-click:hover { background: var(--toastr-destroyable-primary-hover-background-color); border-color: var(--toastr-destroyable-primary-hover-border-color); } nb-toast.status-primary .icon-container { background: var(--toastr-icon-primary-background-color); color: var(--toastr-icon-primary-color); } nb-toast.status-success { background: var(--toastr-success-background-color); border-color: var(--toastr-success-border-color); color: var(--toastr-success-text-color); } nb-toast.status-success .title { color: var(--toastr-success-text-color); } nb-toast.status-success.destroy-by-click:hover { background: var(--toastr-destroyable-success-hover-background-color); border-color: var(--toastr-destroyable-success-hover-border-color); } nb-toast.status-success .icon-container { background: var(--toastr-icon-success-background-color); color: var(--toastr-icon-success-color); } nb-toast.status-warning { background: var(--toastr-warning-background-color); border-color: var(--toastr-warning-border-color); color: var(--toastr-warning-text-color); } nb-toast.status-warning .title { color: var(--toastr-warning-text-color); } nb-toast.status-warning.destroy-by-click:hover { background: var(--toastr-destroyable-warning-hover-background-color); border-color: var(--toastr-destroyable-warning-hover-border-color); } nb-toast.status-warning .icon-container { background: var(--toastr-icon-warning-background-color); color: var(--toastr-icon-warning-color); } nb-toast.status-danger { background: var(--toastr-danger-background-color); border-color: var(--toastr-danger-border-color); color: var(--toastr-danger-text-color); } nb-toast.status-danger .title { color: var(--toastr-danger-text-color); } nb-toast.status-danger.destroy-by-click:hover { background: var(--toastr-destroyable-danger-hover-background-color); border-color: var(--toastr-destroyable-danger-hover-border-color); } nb-toast.status-danger .icon-container { background: var(--toastr-icon-danger-background-color); color: var(--toastr-icon-danger-color); } nb-toast.status-info { background: var(--toastr-info-background-color); border-color: var(--toastr-info-border-color); color: var(--toastr-info-text-color); } nb-toast.status-info .title { color: var(--toastr-info-text-color); } nb-toast.status-info.destroy-by-click:hover { background: var(--toastr-destroyable-info-hover-background-color); border-color: var(--toastr-destroyable-info-hover-border-color); } nb-toast.status-info .icon-container { background: var(--toastr-icon-info-background-color); color: var(--toastr-icon-info-color); } nb-toast.status-control { background: var(--toastr-control-background-color); border-color: var(--toastr-control-border-color); color: var(--toastr-control-text-color); } nb-toast.status-control .title { color: var(--toastr-control-text-color); } nb-toast.status-control.destroy-by-click:hover { background: var(--toastr-destroyable-control-hover-background-color); border-color: var(--toastr-destroyable-control-hover-border-color); } nb-toast.status-control .icon-container { background: var(--toastr-icon-control-background-color); color: var(--toastr-icon-control-color); } .toastr-overlay-container { z-index: 1041; } nb-tooltip { box-shadow: var(--tooltip-shadow); background: var(--tooltip-background-color); border: var(--tooltip-border-width) var(--tooltip-border-style) var(--tooltip-border-color); border-radius: var(--tooltip-border-radius); padding: var(--tooltip-padding); max-width: var(--tooltip-max-width); } nb-tooltip nb-icon:only-child { height: var(--tooltip-icon-height); width: var(--tooltip-icon-width); } nb-tooltip nb-icon:not(:only-child) { height: var(--tooltip-text-font-size); width: var(--tooltip-text-font-size); } nb-tooltip .content { color: var(--tooltip-text-color); font-family: var(--tooltip-text-font-family); font-size: var(--tooltip-text-font-size); font-weight: var(--tooltip-text-font-weight); line-height: var(--tooltip-text-line-height); } nb-tooltip .arrow { border-bottom: 6px var(--tooltip-border-style) var(--tooltip-background-color); } nb-tooltip.status-basic { background: var(--tooltip-basic-background-color); border-color: var(--tooltip-basic-border-color); } nb-tooltip.status-basic .arrow { border-bottom-color: var(--tooltip-basic-background-color); } nb-tooltip.status-basic .content { color: var(--tooltip-basic-text-color); } nb-tooltip.status-primary { background: var(--tooltip-primary-background-color); border-color: var(--tooltip-primary-border-color); } nb-tooltip.status-primary .arrow { border-bottom-color: var(--tooltip-primary-background-color); } nb-tooltip.status-primary .content { color: var(--tooltip-primary-text-color); } nb-tooltip.status-success { background: var(--tooltip-success-background-color); border-color: var(--tooltip-success-border-color); } nb-tooltip.status-success .arrow { border-bottom-color: var(--tooltip-success-background-color); } nb-tooltip.status-success .content { color: var(--tooltip-success-text-color); } nb-tooltip.status-warning { background: var(--tooltip-warning-background-color); border-color: var(--tooltip-warning-border-color); } nb-tooltip.status-warning .arrow { border-bottom-color: var(--tooltip-warning-background-color); } nb-tooltip.status-warning .content { color: var(--tooltip-warning-text-color); } nb-tooltip.status-danger { background: var(--tooltip-danger-background-color); border-color: var(--tooltip-danger-border-color); } nb-tooltip.status-danger .arrow { border-bottom-color: var(--tooltip-danger-background-color); } nb-tooltip.status-danger .content { color: var(--tooltip-danger-text-color); } nb-tooltip.status-info { background: var(--tooltip-info-background-color); border-color: var(--tooltip-info-border-color); } nb-tooltip.status-info .arrow { border-bottom-color: var(--tooltip-info-background-color); } nb-tooltip.status-info .content { color: var(--tooltip-info-text-color); } nb-tooltip.status-control { background: var(--tooltip-control-background-color); border-color: var(--tooltip-control-border-color); } nb-tooltip.status-control .arrow { border-bottom-color: var(--tooltip-control-background-color); } nb-tooltip.status-control .content { color: var(--tooltip-control-text-color); } nb-datepicker-container nb-card { border-color: var(--datepicker-border-color); border-style: var(--datepicker-border-style); border-width: var(--datepicker-border-width); border-radius: var(--datepicker-border-radius); background: var(--datepicker-background-color); box-shadow: var(--datepicker-shadow); } nb-calendar-with-time .nb-timepicker-container, nb-calendar-with-time nb-base-calendar nb-card { border: none; } nb-calendar-with-time .column-header { border-top: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border-color); border-radius: 0; } nb-calendar-with-time .timepicker-section.size-large nb-list-item { height: var(--calendar-day-cell-large-height); } nb-calendar-with-time .timepicker-section.size-large .header-cell { height: var(--calendar-weekday-large-height); } [dir=ltr] nb-calendar-with-time .timepicker-section { border-left: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border-color); } [dir=rtl] nb-calendar-with-time .timepicker-section { border-right: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border-color); } nb-calendar-with-time .timepicker-single-column-width { width: var(--timepicker-single-column-width); } nb-calendar-with-time .timepicker-multiple-column-width { width: var(--timepicker-multiple-column-width); } nb-calendar-with-time .picker-title { height: var(--timepicker-title-height); padding: var(--timepicker-title-padding); } nb-radio .outer-circle, nb-radio .inner-circle { height: var(--radio-height); width: var(--radio-width); } nb-radio .outer-circle { border-style: var(--radio-border-style); border-width: var(--radio-border-width); } nb-radio .native-input:enabled:focus + .outer-circle { box-shadow: 0 0 0 var(--radio-outline-width) var(--radio-outline-color); } nb-radio.status-basic .native-input:enabled + .outer-circle { background-color: var(--radio-basic-background-color); border-color: var(--radio-basic-border-color); } nb-radio.status-basic .native-input:enabled:checked + .outer-circle { background-color: var(--radio-basic-checked-background-color); border-color: var(--radio-basic-checked-border-color); } nb-radio.status-basic .native-input:enabled:checked ~ .inner-circle { background-color: var(--radio-basic-inner-circle-color); } nb-radio.status-basic .native-input:enabled:focus + .outer-circle { background-color: var(--radio-basic-focus-background-color); border-color: var(--radio-basic-focus-border-color); } nb-radio.status-basic .native-input:enabled:checked:focus + .outer-circle { background-color: var(--radio-basic-focus-checked-background-color); border-color: var(--radio-basic-focus-checked-border-color); } nb-radio.status-basic .native-input:enabled:checked:focus ~ .inner-circle { background-color: var(--radio-basic-focus-inner-circle-color); } nb-radio.status-basic label:hover .native-input:enabled + .outer-circle { background-color: var(--radio-basic-hover-background-color); border-color: var(--radio-basic-hover-border-color); } nb-radio.status-basic label:hover .native-input:checked:enabled + .outer-circle { background-color: var(--radio-basic-hover-checked-background-color); border-color: var(--radio-basic-hover-checked-border-color); } nb-radio.status-basic label:hover .native-input:checked:enabled ~ .inner-circle { background-color: var(--radio-basic-hover-inner-circle-color); } nb-radio.status-basic label .native-input:enabled:active + .outer-circle { background-color: var(--radio-basic-active-background-color); border-color: var(--radio-basic-active-border-color); } nb-radio.status-basic label .native-input:enabled:checked:active + .outer-circle { background-color: var(--radio-basic-active-checked-background-color); border-color: var(--radio-basic-active-checked-border-color); } nb-radio.status-basic label .native-input:enabled:checked:active ~ .inner-circle { background-color: var(--radio-basic-active-inner-circle-color); } nb-radio.status-basic .text { color: var(--radio-basic-text-color); } nb-radio.status-basic .native-input:disabled + .outer-circle { background-color: var(--radio-basic-disabled-background-color); border-color: var(--radio-basic-disabled-border-color); } nb-radio.status-basic .native-input:disabled ~ .text { color: var(--radio-basic-disabled-text-color); } nb-radio.status-basic .native-input:disabled:checked + .outer-circle { background-color: var(--radio-basic-disabled-checked-background-color); border-color: var(--radio-basic-disabled-checked-border-color); } nb-radio.status-basic .native-input:disabled:checked ~ .inner-circle { background-color: var(--radio-basic-disabled-checked-inner-circle-color); } nb-radio.status-primary .native-input:enabled + .outer-circle { background-color: var(--radio-primary-background-color); border-color: var(--radio-primary-border-color); } nb-radio.status-primary .native-input:enabled:checked + .outer-circle { background-color: var(--radio-primary-checked-background-color); border-color: var(--radio-primary-checked-border-color); } nb-radio.status-primary .native-input:enabled:checked ~ .inner-circle { background-color: var(--radio-primary-inner-circle-color); } nb-radio.status-primary .native-input:enabled:focus + .outer-circle { background-color: var(--radio-primary-focus-background-color); border-color: var(--radio-primary-focus-border-color); } nb-radio.status-primary .native-input:enabled:checked:focus + .outer-circle { background-color: var(--radio-primary-focus-checked-background-color); border-color: var(--radio-primary-focus-checked-border-color); } nb-radio.status-primary .native-input:enabled:checked:focus ~ .inner-circle { background-color: var(--radio-primary-focus-inner-circle-color); } nb-radio.status-primary label:hover .native-input:enabled + .outer-circle { background-color: var(--radio-primary-hover-background-color); border-color: var(--radio-primary-hover-border-color); } nb-radio.status-primary label:hover .native-input:checked:enabled + .outer-circle { background-color: var(--radio-primary-hover-checked-background-color); border-color: var(--radio-primary-hover-checked-border-color); } nb-radio.status-primary label:hover .native-input:checked:enabled ~ .inner-circle { background-color: var(--radio-primary-hover-inner-circle-color); } nb-radio.status-primary label .native-input:enabled:active + .outer-circle { background-color: var(--radio-primary-active-background-color); border-color: var(--radio-primary-active-border-color); } nb-radio.status-primary label .native-input:enabled:checked:active + .outer-circle { background-color: var(--radio-primary-active-checked-background-color); border-color: var(--radio-primary-active-checked-border-color); } nb-radio.status-primary label .native-input:enabled:checked:active ~ .inner-circle { background-color: var(--radio-primary-active-inner-circle-color); } nb-radio.status-primary .text { color: var(--radio-primary-text-color); } nb-radio.status-primary .native-input:disabled + .outer-circle { background-color: var(--radio-primary-disabled-background-color); border-color: var(--radio-primary-disabled-border-color); } nb-radio.status-primary .native-input:disabled ~ .text { color: var(--radio-primary-disabled-text-color); } nb-radio.status-primary .native-input:disabled:checked + .outer-circle { background-color: var(--radio-primary-disabled-checked-background-color); border-color: var(--radio-primary-disabled-checked-border-color); } nb-radio.status-primary .native-input:disabled:checked ~ .inner-circle { background-color: var(--radio-primary-disabled-checked-inner-circle-color); } nb-radio.status-success .native-input:enabled + .outer-circle { background-color: var(--radio-success-background-color); border-color: var(--radio-success-border-color); } nb-radio.status-success .native-input:enabled:checked + .outer-circle { background-color: var(--radio-success-checked-background-color); border-color: var(--radio-success-checked-border-color); } nb-radio.status-success .native-input:enabled:checked ~ .inner-circle { background-color: var(--radio-success-inner-circle-color); } nb-radio.status-success .native-input:enabled:focus + .outer-circle { background-color: var(--radio-success-focus-background-color); border-color: var(--radio-success-focus-border-color); } nb-radio.status-success .native-input:enabled:checked:focus + .outer-circle { background-color: var(--radio-success-focus-checked-background-color); border-color: var(--radio-success-focus-checked-border-color); } nb-radio.status-success .native-input:enabled:checked:focus ~ .inner-circle { background-color: var(--radio-success-focus-inner-circle-color); } nb-radio.status-success label:hover .native-input:enabled + .outer-circle { background-color: var(--radio-success-hover-background-color); border-color: var(--radio-success-hover-border-color); } nb-radio.status-success label:hover .native-input:checked:enabled + .outer-circle { background-color: var(--radio-success-hover-checked-background-color); border-color: var(--radio-success-hover-checked-border-color); } nb-radio.status-success label:hover .native-input:checked:enabled ~ .inner-circle { background-color: var(--radio-success-hover-inner-circle-color); } nb-radio.status-success label .native-input:enabled:active + .outer-circle { background-color: var(--radio-success-active-background-color); border-color: var(--radio-success-active-border-color); } nb-radio.status-success label .native-input:enabled:checked:active + .outer-circle { background-color: var(--radio-success-active-checked-background-color); border-color: var(--radio-success-active-checked-border-color); } nb-radio.status-success label .native-input:enabled:checked:active ~ .inner-circle { background-color: var(--radio-success-active-inner-circle-color); } nb-radio.status-success .text { color: var(--radio-success-text-color); } nb-radio.status-success .native-input:disabled + .outer-circle { background-color: var(--radio-success-disabled-background-color); border-color: var(--radio-success-disabled-border-color); } nb-radio.status-success .native-input:disabled ~ .text { color: var(--radio-success-disabled-text-color); } nb-radio.status-success .native-input:disabled:checked + .outer-circle { background-color: var(--radio-success-disabled-checked-background-color); border-color: var(--radio-success-disabled-checked-border-color); } nb-radio.status-success .native-input:disabled:checked ~ .inner-circle { background-color: var(--radio-success-disabled-checked-inner-circle-color); } nb-radio.status-warning .native-input:enabled + .outer-circle { background-color: var(--radio-warning-background-color); border-color: var(--radio-warning-border-color); } nb-radio.status-warning .native-input:enabled:checked + .outer-circle { background-color: var(--radio-warning-checked-background-color); border-color: var(--radio-warning-checked-border-color); } nb-radio.status-warning .native-input:enabled:checked ~ .inner-circle { background-color: var(--radio-warning-inner-circle-color); } nb-radio.status-warning .native-input:enabled:focus + .outer-circle { background-color: var(--radio-warning-focus-background-color); border-color: var(--radio-warning-focus-border-color); } nb-radio.status-warning .native-input:enabled:checked:focus + .outer-circle { background-color: var(--radio-warning-focus-checked-background-color); border-color: var(--radio-warning-focus-checked-border-color); } nb-radio.status-warning .native-input:enabled:checked:focus ~ .inner-circle { background-color: var(--radio-warning-focus-inner-circle-color); } nb-radio.status-warning label:hover .native-input:enabled + .outer-circle { background-color: var(--radio-warning-hover-background-color); border-color: var(--radio-warning-hover-border-color); } nb-radio.status-warning label:hover .native-input:checked:enabled + .outer-circle { background-color: var(--radio-warning-hover-checked-background-color); border-color: var(--radio-warning-hover-checked-border-color); } nb-radio.status-warning label:hover .native-input:checked:enabled ~ .inner-circle { background-color: var(--radio-warning-hover-inner-circle-color); } nb-radio.status-warning label .native-input:enabled:active + .outer-circle { background-color: var(--radio-warning-active-background-color); border-color: var(--radio-warning-active-border-color); } nb-radio.status-warning label .native-input:enabled:checked:active + .outer-circle { background-color: var(--radio-warning-active-checked-background-color); border-color: var(--radio-warning-active-checked-border-color); } nb-radio.status-warning label .native-input:enabled:checked:active ~ .inner-circle { background-color: var(--radio-warning-active-inner-circle-color); } nb-radio.status-warning .text { color: var(--radio-warning-text-color); } nb-radio.status-warning .native-input:disabled + .outer-circle { background-color: var(--radio-warning-disabled-background-color); border-color: var(--radio-warning-disabled-border-color); } nb-radio.status-warning .native-input:disabled ~ .text { color: var(--radio-warning-disabled-text-color); } nb-radio.status-warning .native-input:disabled:checked + .outer-circle { background-color: var(--radio-warning-disabled-checked-background-color); border-color: var(--radio-warning-disabled-checked-border-color); } nb-radio.status-warning .native-input:disabled:checked ~ .inner-circle { background-color: var(--radio-warning-disabled-checked-inner-circle-color); } nb-radio.status-danger .native-input:enabled + .outer-circle { background-color: var(--radio-danger-background-color); border-color: var(--radio-danger-border-color); } nb-radio.status-danger .native-input:enabled:checked + .outer-circle { background-color: var(--radio-danger-checked-background-color); border-color: var(--radio-danger-checked-border-color); } nb-radio.status-danger .native-input:enabled:checked ~ .inner-circle { background-color: var(--radio-danger-inner-circle-color); } nb-radio.status-danger .native-input:enabled:focus + .outer-circle { background-color: var(--radio-danger-focus-background-color); border-color: var(--radio-danger-focus-border-color); } nb-radio.status-danger .native-input:enabled:checked:focus + .outer-circle { background-color: var(--radio-danger-focus-checked-background-color); border-color: var(--radio-danger-focus-checked-border-color); } nb-radio.status-danger .native-input:enabled:checked:focus ~ .inner-circle { background-color: var(--radio-danger-focus-inner-circle-color); } nb-radio.status-danger label:hover .native-input:enabled + .outer-circle { background-color: var(--radio-danger-hover-background-color); border-color: var(--radio-danger-hover-border-color); } nb-radio.status-danger label:hover .native-input:checked:enabled + .outer-circle { background-color: var(--radio-danger-hover-checked-background-color); border-color: var(--radio-danger-hover-checked-border-color); } nb-radio.status-danger label:hover .native-input:checked:enabled ~ .inner-circle { background-color: var(--radio-danger-hover-inner-circle-color); } nb-radio.status-danger label .native-input:enabled:active + .outer-circle { background-color: var(--radio-danger-active-background-color); border-color: var(--radio-danger-active-border-color); } nb-radio.status-danger label .native-input:enabled:checked:active + .outer-circle { background-color: var(--radio-danger-active-checked-background-color); border-color: var(--radio-danger-active-checked-border-color); } nb-radio.status-danger label .native-input:enabled:checked:active ~ .inner-circle { background-color: var(--radio-danger-active-inner-circle-color); } nb-radio.status-danger .text { color: var(--radio-danger-text-color); } nb-radio.status-danger .native-input:disabled + .outer-circle { background-color: var(--radio-danger-disabled-background-color); border-color: var(--radio-danger-disabled-border-color); } nb-radio.status-danger .native-input:disabled ~ .text { color: var(--radio-danger-disabled-text-color); } nb-radio.status-danger .native-input:disabled:checked + .outer-circle { background-color: var(--radio-danger-disabled-checked-background-color); border-color: var(--radio-danger-disabled-checked-border-color); } nb-radio.status-danger .native-input:disabled:checked ~ .inner-circle { background-color: var(--radio-danger-disabled-checked-inner-circle-color); } nb-radio.status-info .native-input:enabled + .outer-circle { background-color: var(--radio-info-background-color); border-color: var(--radio-info-border-color); } nb-radio.status-info .native-input:enabled:checked + .outer-circle { background-color: var(--radio-info-checked-background-color); border-color: var(--radio-info-checked-border-color); } nb-radio.status-info .native-input:enabled:checked ~ .inner-circle { background-color: var(--radio-info-inner-circle-color); } nb-radio.status-info .native-input:enabled:focus + .outer-circle { background-color: var(--radio-info-focus-background-color); border-color: var(--radio-info-focus-border-color); } nb-radio.status-info .native-input:enabled:checked:focus + .outer-circle { background-color: var(--radio-info-focus-checked-background-color); border-color: var(--radio-info-focus-checked-border-color); } nb-radio.status-info .native-input:enabled:checked:focus ~ .inner-circle { background-color: var(--radio-info-focus-inner-circle-color); } nb-radio.status-info label:hover .native-input:enabled + .outer-circle { background-color: var(--radio-info-hover-background-color); border-color: var(--radio-info-hover-border-color); } nb-radio.status-info label:hover .native-input:checked:enabled + .outer-circle { background-color: var(--radio-info-hover-checked-background-color); border-color: var(--radio-info-hover-checked-border-color); } nb-radio.status-info label:hover .native-input:checked:enabled ~ .inner-circle { background-color: var(--radio-info-hover-inner-circle-color); } nb-radio.status-info label .native-input:enabled:active + .outer-circle { background-color: var(--radio-info-active-background-color); border-color: var(--radio-info-active-border-color); } nb-radio.status-info label .native-input:enabled:checked:active + .outer-circle { background-color: var(--radio-info-active-checked-background-color); border-color: var(--radio-info-active-checked-border-color); } nb-radio.status-info label .native-input:enabled:checked:active ~ .inner-circle { background-color: var(--radio-info-active-inner-circle-color); } nb-radio.status-info .text { color: var(--radio-info-text-color); } nb-radio.status-info .native-input:disabled + .outer-circle { background-color: var(--radio-info-disabled-background-color); border-color: var(--radio-info-disabled-border-color); } nb-radio.status-info .native-input:disabled ~ .text { color: var(--radio-info-disabled-text-color); } nb-radio.status-info .native-input:disabled:checked + .outer-circle { background-color: var(--radio-info-disabled-checked-background-color); border-color: var(--radio-info-disabled-checked-border-color); } nb-radio.status-info .native-input:disabled:checked ~ .inner-circle { background-color: var(--radio-info-disabled-checked-inner-circle-color); } nb-radio.status-control .native-input:enabled + .outer-circle { background-color: var(--radio-control-background-color); border-color: var(--radio-control-border-color); } nb-radio.status-control .native-input:enabled:checked + .outer-circle { background-color: var(--radio-control-checked-background-color); border-color: var(--radio-control-checked-border-color); } nb-radio.status-control .native-input:enabled:checked ~ .inner-circle { background-color: var(--radio-control-inner-circle-color); } nb-radio.status-control .native-input:enabled:focus + .outer-circle { background-color: var(--radio-control-focus-background-color); border-color: var(--radio-control-focus-border-color); } nb-radio.status-control .native-input:enabled:checked:focus + .outer-circle { background-color: var(--radio-control-focus-checked-background-color); border-color: var(--radio-control-focus-checked-border-color); } nb-radio.status-control .native-input:enabled:checked:focus ~ .inner-circle { background-color: var(--radio-control-focus-inner-circle-color); } nb-radio.status-control label:hover .native-input:enabled + .outer-circle { background-color: var(--radio-control-hover-background-color); border-color: var(--radio-control-hover-border-color); } nb-radio.status-control label:hover .native-input:checked:enabled + .outer-circle { background-color: var(--radio-control-hover-checked-background-color); border-color: var(--radio-control-hover-checked-border-color); } nb-radio.status-control label:hover .native-input:checked:enabled ~ .inner-circle { background-color: var(--radio-control-hover-inner-circle-color); } nb-radio.status-control label .native-input:enabled:active + .outer-circle { background-color: var(--radio-control-active-background-color); border-color: var(--radio-control-active-border-color); } nb-radio.status-control label .native-input:enabled:checked:active + .outer-circle { background-color: var(--radio-control-active-checked-background-color); border-color: var(--radio-control-active-checked-border-color); } nb-radio.status-control label .native-input:enabled:checked:active ~ .inner-circle { background-color: var(--radio-control-active-inner-circle-color); } nb-radio.status-control .text { color: var(--radio-control-text-color); } nb-radio.status-control .native-input:disabled + .outer-circle { background-color: var(--radio-control-disabled-background-color); border-color: var(--radio-control-disabled-border-color); } nb-radio.status-control .native-input:disabled ~ .text { color: var(--radio-control-disabled-text-color); } nb-radio.status-control .native-input:disabled:checked + .outer-circle { background-color: var(--radio-control-disabled-checked-background-color); border-color: var(--radio-control-disabled-checked-border-color); } nb-radio.status-control .native-input:disabled:checked ~ .inner-circle { background-color: var(--radio-control-disabled-checked-inner-circle-color); } nb-radio .text { font-family: var(--radio-text-font-family); font-size: var(--radio-text-font-size); font-weight: var(--radio-text-font-weight); line-height: var(--radio-text-line-height); } [dir=ltr] nb-radio .text { margin-left: var(--radio-width); } [dir=rtl] nb-radio .text { margin-right: var(--radio-width); } .nb-tree-grid-header-cell, .nb-tree-grid-cell, .nb-tree-grid-footer-cell { height: var(--tree-grid-row-min-height); padding: var(--tree-grid-cell-padding); border: var(--tree-grid-cell-border-width) var(--tree-grid-cell-border-style) var(--tree-grid-cell-border-color); } .nb-tree-grid-header-row { background: var(--tree-grid-header-background-color); color: var(--tree-grid-header-text-color); font-family: var(--tree-grid-header-text-font-family); font-size: var(--tree-grid-header-text-font-size); font-weight: var(--tree-grid-header-text-font-weight); line-height: var(--tree-grid-header-text-line-height); } .nb-tree-grid-footer-row { background: var(--tree-grid-footer-background-color); color: var(--tree-grid-footer-text-color); font-family: var(--tree-grid-footer-text-font-family); font-size: var(--tree-grid-footer-text-font-size); font-weight: var(--tree-grid-footer-text-font-weight); line-height: var(--tree-grid-footer-text-line-height); } .nb-tree-grid-row { background: var(--tree-grid-row-background-color); color: var(--tree-grid-row-text-color); font-family: var(--tree-grid-row-text-font-family); font-size: var(--tree-grid-row-text-font-size); font-weight: var(--tree-grid-row-text-font-weight); line-height: var(--tree-grid-row-text-line-height); } .nb-tree-grid-row:hover { background: var(--tree-grid-row-hover-background-color); } .nb-tree-grid-row:nth-child(2n):not(:hover) { background-color: var(--tree-grid-row-even-background-color); } .nb-tree-grid-header-cell button { vertical-align: middle; } nb-tree-grid-row-toggle nb-icon, nb-sort-icon nb-icon { font-size: inherit; vertical-align: middle; color: currentColor; } .nb-tree-grid-header-change-sort-button { background: var(--tree-grid-sort-header-button-background-color); border: var(--tree-grid-sort-header-button-border); padding: var(--tree-grid-sort-header-button-padding); color: inherit; font-size: inherit; font-weight: inherit; font-family: inherit; line-height: inherit; } nb-icon { font-size: var(--icon-font-size); line-height: var(--icon-line-height); width: var(--icon-width); height: var(--icon-height); } nb-icon svg { vertical-align: var(--icon-svg-vertical-align); } nb-icon.status-basic { color: var(--icon-basic-color); } nb-icon.status-primary { color: var(--icon-primary-color); } nb-icon.status-success { color: var(--icon-success-color); } nb-icon.status-warning { color: var(--icon-warning-color); } nb-icon.status-danger { color: var(--icon-danger-color); } nb-icon.status-info { color: var(--icon-info-color); } nb-icon.status-control { color: var(--icon-control-color); } .nb-form-control-container { max-width: inherit; } .nb-form-field-addon { display: flex; justify-content: center; align-items: center; z-index: 1; } .nb-form-field-addon-disabled { color: var(--form-field-addon-disabled-text-color); } nb-form-field.nb-transition .nb-form-field-addon { transition-duration: 0.15s; transition-property: color; transition-timing-function: ease-in; } .nb-form-field-addon-basic { color: var(--form-field-addon-basic-text-color); } .nb-form-field-addon-basic-highlight { color: var(--form-field-addon-basic-highlight-text-color); } .nb-form-field-addon-primary { color: var(--form-field-addon-primary-text-color); } .nb-form-field-addon-primary-highlight { color: var(--form-field-addon-primary-highlight-text-color); } .nb-form-field-addon-success { color: var(--form-field-addon-success-text-color); } .nb-form-field-addon-success-highlight { color: var(--form-field-addon-success-highlight-text-color); } .nb-form-field-addon-warning { color: var(--form-field-addon-warning-text-color); } .nb-form-field-addon-warning-highlight { color: var(--form-field-addon-warning-highlight-text-color); } .nb-form-field-addon-danger { color: var(--form-field-addon-danger-text-color); } .nb-form-field-addon-danger-highlight { color: var(--form-field-addon-danger-highlight-text-color); } .nb-form-field-addon-info { color: var(--form-field-addon-info-text-color); } .nb-form-field-addon-info-highlight { color: var(--form-field-addon-info-highlight-text-color); } .nb-form-field-addon-control { color: var(--form-field-addon-control-text-color); } .nb-form-field-addon-control-highlight { color: var(--form-field-addon-control-highlight-text-color); } .nb-form-field-limited-width.nb-form-field-size-tiny { max-width: var(--form-field-tiny-max-width); } .nb-form-field-prefix-tiny, .nb-form-field-suffix-tiny { height: var(--form-field-addon-tiny-height); width: var(--form-field-addon-tiny-width); font-size: var(--form-field-addon-tiny-font-size); line-height: var(--form-field-addon-tiny-line-height); font-weight: var(--form-field-addon-tiny-font-weight); } .nb-form-field-prefix-tiny nb-icon, .nb-form-field-suffix-tiny nb-icon { font-size: var(--form-field-addon-tiny-icon-size); line-height: var(--form-field-addon-tiny-icon-size); } [dir=ltr] .nb-form-field-prefix-tiny { margin-right: calc(var(--form-field-addon-tiny-width) * -1); } [dir=rtl] .nb-form-field-prefix-tiny { margin-left: calc(var(--form-field-addon-tiny-width) * -1); } [dir=ltr] .nb-form-field-suffix-tiny { margin-left: calc(var(--form-field-addon-tiny-width) * -1); } [dir=rtl] .nb-form-field-suffix-tiny { margin-right: calc(var(--form-field-addon-tiny-width) * -1); } .nb-form-field-limited-width.nb-form-field-size-small { max-width: var(--form-field-small-max-width); } .nb-form-field-prefix-small, .nb-form-field-suffix-small { height: var(--form-field-addon-small-height); width: var(--form-field-addon-small-width); font-size: var(--form-field-addon-small-font-size); line-height: var(--form-field-addon-small-line-height); font-weight: var(--form-field-addon-small-font-weight); } .nb-form-field-prefix-small nb-icon, .nb-form-field-suffix-small nb-icon { font-size: var(--form-field-addon-small-icon-size); line-height: var(--form-field-addon-small-icon-size); } [dir=ltr] .nb-form-field-prefix-small { margin-right: calc(var(--form-field-addon-small-width) * -1); } [dir=rtl] .nb-form-field-prefix-small { margin-left: calc(var(--form-field-addon-small-width) * -1); } [dir=ltr] .nb-form-field-suffix-small { margin-left: calc(var(--form-field-addon-small-width) * -1); } [dir=rtl] .nb-form-field-suffix-small { margin-right: calc(var(--form-field-addon-small-width) * -1); } .nb-form-field-limited-width.nb-form-field-size-medium { max-width: var(--form-field-medium-max-width); } .nb-form-field-prefix-medium, .nb-form-field-suffix-medium { height: var(--form-field-addon-medium-height); width: var(--form-field-addon-medium-width); font-size: var(--form-field-addon-medium-font-size); line-height: var(--form-field-addon-medium-line-height); font-weight: var(--form-field-addon-medium-font-weight); } .nb-form-field-prefix-medium nb-icon, .nb-form-field-suffix-medium nb-icon { font-size: var(--form-field-addon-medium-icon-size); line-height: var(--form-field-addon-medium-icon-size); } [dir=ltr] .nb-form-field-prefix-medium { margin-right: calc(var(--form-field-addon-medium-width) * -1); } [dir=rtl] .nb-form-field-prefix-medium { margin-left: calc(var(--form-field-addon-medium-width) * -1); } [dir=ltr] .nb-form-field-suffix-medium { margin-left: calc(var(--form-field-addon-medium-width) * -1); } [dir=rtl] .nb-form-field-suffix-medium { margin-right: calc(var(--form-field-addon-medium-width) * -1); } .nb-form-field-limited-width.nb-form-field-size-large { max-width: var(--form-field-large-max-width); } .nb-form-field-prefix-large, .nb-form-field-suffix-large { height: var(--form-field-addon-large-height); width: var(--form-field-addon-large-width); font-size: var(--form-field-addon-large-font-size); line-height: var(--form-field-addon-large-line-height); font-weight: var(--form-field-addon-large-font-weight); } .nb-form-field-prefix-large nb-icon, .nb-form-field-suffix-large nb-icon { font-size: var(--form-field-addon-large-icon-size); line-height: var(--form-field-addon-large-icon-size); } [dir=ltr] .nb-form-field-prefix-large { margin-right: calc(var(--form-field-addon-large-width) * -1); } [dir=rtl] .nb-form-field-prefix-large { margin-left: calc(var(--form-field-addon-large-width) * -1); } [dir=ltr] .nb-form-field-suffix-large { margin-left: calc(var(--form-field-addon-large-width) * -1); } [dir=rtl] .nb-form-field-suffix-large { margin-right: calc(var(--form-field-addon-large-width) * -1); } .nb-form-field-limited-width.nb-form-field-size-giant { max-width: var(--form-field-giant-max-width); } .nb-form-field-prefix-giant, .nb-form-field-suffix-giant { height: var(--form-field-addon-giant-height); width: var(--form-field-addon-giant-width); font-size: var(--form-field-addon-giant-font-size); line-height: var(--form-field-addon-giant-line-height); font-weight: var(--form-field-addon-giant-font-weight); } .nb-form-field-prefix-giant nb-icon, .nb-form-field-suffix-giant nb-icon { font-size: var(--form-field-addon-giant-icon-size); line-height: var(--form-field-addon-giant-icon-size); } [dir=ltr] .nb-form-field-prefix-giant { margin-right: calc(var(--form-field-addon-giant-width) * -1); } [dir=rtl] .nb-form-field-prefix-giant { margin-left: calc(var(--form-field-addon-giant-width) * -1); } [dir=ltr] .nb-form-field-suffix-giant { margin-left: calc(var(--form-field-addon-giant-width) * -1); } [dir=rtl] .nb-form-field-suffix-giant { margin-right: calc(var(--form-field-addon-giant-width) * -1); } nb-tag { border-style: var(--tag-border-style); border-width: var(--tag-border-width); border-radius: var(--tag-border-radius); display: inline-flex; align-items: center; font-family: var(--tag-text-font-family); text-transform: var(--tag-text-transform); cursor: default; } nb-tag.nb-transition { transition-duration: 0.15s; transition-property: background-color, border-color, color; transition-timing-function: ease-in; } nb-tag.size-tiny { font-size: var(--tag-tiny-text-font-size); font-weight: var(--tag-tiny-text-font-weight); line-height: var(--tag-tiny-text-line-height); padding: var(--tag-tiny-padding); } nb-tag.size-small { font-size: var(--tag-small-text-font-size); font-weight: var(--tag-small-text-font-weight); line-height: var(--tag-small-text-line-height); padding: var(--tag-small-padding); } nb-tag.size-medium { font-size: var(--tag-medium-text-font-size); font-weight: var(--tag-medium-text-font-weight); line-height: var(--tag-medium-text-line-height); padding: var(--tag-medium-padding); } nb-tag.size-large { font-size: var(--tag-large-text-font-size); font-weight: var(--tag-large-text-font-weight); line-height: var(--tag-large-text-line-height); padding: var(--tag-large-padding); } nb-tag.size-giant { font-size: var(--tag-giant-text-font-size); font-weight: var(--tag-giant-text-font-weight); line-height: var(--tag-giant-text-line-height); padding: var(--tag-giant-padding); } nb-tag.appearance-filled.status-basic { background-color: var(--tag-filled-basic-background-color); border-color: var(--tag-filled-basic-border-color); color: var(--tag-filled-basic-text-color); } nb-tag.appearance-filled.status-basic.selected { background-color: var(--tag-filled-basic-selected-background-color); border-color: var(--tag-filled-basic-selected-border-color); } nb-tag.appearance-filled.status-basic.active { background-color: var(--tag-filled-basic-active-background-color); border-color: var(--tag-filled-basic-active-border-color); } nb-tag.appearance-filled.status-basic:hover { background-color: var(--tag-filled-basic-hover-background-color); border-color: var(--tag-filled-basic-hover-border-color); } nb-tag.appearance-filled.status-primary { background-color: var(--tag-filled-primary-background-color); border-color: var(--tag-filled-primary-border-color); color: var(--tag-filled-primary-text-color); } nb-tag.appearance-filled.status-primary.selected { background-color: var(--tag-filled-primary-selected-background-color); border-color: var(--tag-filled-primary-selected-border-color); } nb-tag.appearance-filled.status-primary.active { background-color: var(--tag-filled-primary-active-background-color); border-color: var(--tag-filled-primary-active-border-color); } nb-tag.appearance-filled.status-primary:hover { background-color: var(--tag-filled-primary-hover-background-color); border-color: var(--tag-filled-primary-hover-border-color); } nb-tag.appearance-filled.status-success { background-color: var(--tag-filled-success-background-color); border-color: var(--tag-filled-success-border-color); color: var(--tag-filled-success-text-color); } nb-tag.appearance-filled.status-success.selected { background-color: var(--tag-filled-success-selected-background-color); border-color: var(--tag-filled-success-selected-border-color); } nb-tag.appearance-filled.status-success.active { background-color: var(--tag-filled-success-active-background-color); border-color: var(--tag-filled-success-active-border-color); } nb-tag.appearance-filled.status-success:hover { background-color: var(--tag-filled-success-hover-background-color); border-color: var(--tag-filled-success-hover-border-color); } nb-tag.appearance-filled.status-warning { background-color: var(--tag-filled-warning-background-color); border-color: var(--tag-filled-warning-border-color); color: var(--tag-filled-warning-text-color); } nb-tag.appearance-filled.status-warning.selected { background-color: var(--tag-filled-warning-selected-background-color); border-color: var(--tag-filled-warning-selected-border-color); } nb-tag.appearance-filled.status-warning.active { background-color: var(--tag-filled-warning-active-background-color); border-color: var(--tag-filled-warning-active-border-color); } nb-tag.appearance-filled.status-warning:hover { background-color: var(--tag-filled-warning-hover-background-color); border-color: var(--tag-filled-warning-hover-border-color); } nb-tag.appearance-filled.status-danger { background-color: var(--tag-filled-danger-background-color); border-color: var(--tag-filled-danger-border-color); color: var(--tag-filled-danger-text-color); } nb-tag.appearance-filled.status-danger.selected { background-color: var(--tag-filled-danger-selected-background-color); border-color: var(--tag-filled-danger-selected-border-color); } nb-tag.appearance-filled.status-danger.active { background-color: var(--tag-filled-danger-active-background-color); border-color: var(--tag-filled-danger-active-border-color); } nb-tag.appearance-filled.status-danger:hover { background-color: var(--tag-filled-danger-hover-background-color); border-color: var(--tag-filled-danger-hover-border-color); } nb-tag.appearance-filled.status-info { background-color: var(--tag-filled-info-background-color); border-color: var(--tag-filled-info-border-color); color: var(--tag-filled-info-text-color); } nb-tag.appearance-filled.status-info.selected { background-color: var(--tag-filled-info-selected-background-color); border-color: var(--tag-filled-info-selected-border-color); } nb-tag.appearance-filled.status-info.active { background-color: var(--tag-filled-info-active-background-color); border-color: var(--tag-filled-info-active-border-color); } nb-tag.appearance-filled.status-info:hover { background-color: var(--tag-filled-info-hover-background-color); border-color: var(--tag-filled-info-hover-border-color); } nb-tag.appearance-filled.status-control { background-color: var(--tag-filled-control-background-color); border-color: var(--tag-filled-control-border-color); color: var(--tag-filled-control-text-color); } nb-tag.appearance-filled.status-control.selected { background-color: var(--tag-filled-control-selected-background-color); border-color: var(--tag-filled-control-selected-border-color); } nb-tag.appearance-filled.status-control.active { background-color: var(--tag-filled-control-active-background-color); border-color: var(--tag-filled-control-active-border-color); } nb-tag.appearance-filled.status-control:hover { background-color: var(--tag-filled-control-hover-background-color); border-color: var(--tag-filled-control-hover-border-color); } nb-tag.appearance-outline.status-basic { background-color: var(--tag-outline-basic-background-color); border-color: var(--tag-outline-basic-border-color); color: var(--tag-outline-basic-text-color); } nb-tag.appearance-outline.status-basic.selected { background-color: var(--tag-outline-basic-selected-background-color); border-color: var(--tag-outline-basic-selected-border-color); color: var(--tag-outline-basic-selected-text-color); } nb-tag.appearance-outline.status-basic.active { background-color: var(--tag-outline-basic-active-background-color); border-color: var(--tag-outline-basic-active-border-color); color: var(--tag-outline-basic-active-text-color); } nb-tag.appearance-outline.status-basic:hover { background-color: var(--tag-outline-basic-hover-background-color); border-color: var(--tag-outline-basic-hover-border-color); color: var(--tag-outline-basic-hover-text-color); } nb-tag.appearance-outline.status-primary { background-color: var(--tag-outline-primary-background-color); border-color: var(--tag-outline-primary-border-color); color: var(--tag-outline-primary-text-color); } nb-tag.appearance-outline.status-primary.selected { background-color: var(--tag-outline-primary-selected-background-color); border-color: var(--tag-outline-primary-selected-border-color); color: var(--tag-outline-primary-selected-text-color); } nb-tag.appearance-outline.status-primary.active { background-color: var(--tag-outline-primary-active-background-color); border-color: var(--tag-outline-primary-active-border-color); color: var(--tag-outline-primary-active-text-color); } nb-tag.appearance-outline.status-primary:hover { background-color: var(--tag-outline-primary-hover-background-color); border-color: var(--tag-outline-primary-hover-border-color); color: var(--tag-outline-primary-hover-text-color); } nb-tag.appearance-outline.status-success { background-color: var(--tag-outline-success-background-color); border-color: var(--tag-outline-success-border-color); color: var(--tag-outline-success-text-color); } nb-tag.appearance-outline.status-success.selected { background-color: var(--tag-outline-success-selected-background-color); border-color: var(--tag-outline-success-selected-border-color); color: var(--tag-outline-success-selected-text-color); } nb-tag.appearance-outline.status-success.active { background-color: var(--tag-outline-success-active-background-color); border-color: var(--tag-outline-success-active-border-color); color: var(--tag-outline-success-active-text-color); } nb-tag.appearance-outline.status-success:hover { background-color: var(--tag-outline-success-hover-background-color); border-color: var(--tag-outline-success-hover-border-color); color: var(--tag-outline-success-hover-text-color); } nb-tag.appearance-outline.status-warning { background-color: var(--tag-outline-warning-background-color); border-color: var(--tag-outline-warning-border-color); color: var(--tag-outline-warning-text-color); } nb-tag.appearance-outline.status-warning.selected { background-color: var(--tag-outline-warning-selected-background-color); border-color: var(--tag-outline-warning-selected-border-color); color: var(--tag-outline-warning-selected-text-color); } nb-tag.appearance-outline.status-warning.active { background-color: var(--tag-outline-warning-active-background-color); border-color: var(--tag-outline-warning-active-border-color); color: var(--tag-outline-warning-active-text-color); } nb-tag.appearance-outline.status-warning:hover { background-color: var(--tag-outline-warning-hover-background-color); border-color: var(--tag-outline-warning-hover-border-color); color: var(--tag-outline-warning-hover-text-color); } nb-tag.appearance-outline.status-danger { background-color: var(--tag-outline-danger-background-color); border-color: var(--tag-outline-danger-border-color); color: var(--tag-outline-danger-text-color); } nb-tag.appearance-outline.status-danger.selected { background-color: var(--tag-outline-danger-selected-background-color); border-color: var(--tag-outline-danger-selected-border-color); color: var(--tag-outline-danger-selected-text-color); } nb-tag.appearance-outline.status-danger.active { background-color: var(--tag-outline-danger-active-background-color); border-color: var(--tag-outline-danger-active-border-color); color: var(--tag-outline-danger-active-text-color); } nb-tag.appearance-outline.status-danger:hover { background-color: var(--tag-outline-danger-hover-background-color); border-color: var(--tag-outline-danger-hover-border-color); color: var(--tag-outline-danger-hover-text-color); } nb-tag.appearance-outline.status-info { background-color: var(--tag-outline-info-background-color); border-color: var(--tag-outline-info-border-color); color: var(--tag-outline-info-text-color); } nb-tag.appearance-outline.status-info.selected { background-color: var(--tag-outline-info-selected-background-color); border-color: var(--tag-outline-info-selected-border-color); color: var(--tag-outline-info-selected-text-color); } nb-tag.appearance-outline.status-info.active { background-color: var(--tag-outline-info-active-background-color); border-color: var(--tag-outline-info-active-border-color); color: var(--tag-outline-info-active-text-color); } nb-tag.appearance-outline.status-info:hover { background-color: var(--tag-outline-info-hover-background-color); border-color: var(--tag-outline-info-hover-border-color); color: var(--tag-outline-info-hover-text-color); } nb-tag.appearance-outline.status-control { background-color: var(--tag-outline-control-background-color); border-color: var(--tag-outline-control-border-color); color: var(--tag-outline-control-text-color); } nb-tag.appearance-outline.status-control.selected { background-color: var(--tag-outline-control-selected-background-color); border-color: var(--tag-outline-control-selected-border-color); color: var(--tag-outline-control-selected-text-color); } nb-tag.appearance-outline.status-control.active { background-color: var(--tag-outline-control-active-background-color); border-color: var(--tag-outline-control-active-border-color); color: var(--tag-outline-control-active-text-color); } nb-tag.appearance-outline.status-control:hover { background-color: var(--tag-outline-control-hover-background-color); border-color: var(--tag-outline-control-hover-border-color); color: var(--tag-outline-control-hover-text-color); } .nb-tag-remove { cursor: pointer; } .nb-tag-remove.size-tiny { font-size: var(--tag-tiny-text-line-height); } [dir=ltr] .nb-tag-remove.size-tiny { margin-left: var(--tag-tiny-close-offset); margin-right: calc(var(--tag-tiny-close-offset) * -1); } [dir=rtl] .nb-tag-remove.size-tiny { margin-right: var(--tag-tiny-close-offset); margin-left: calc(var(--tag-tiny-close-offset) * -1); } .nb-tag-remove.size-small { font-size: var(--tag-small-text-line-height); } [dir=ltr] .nb-tag-remove.size-small { margin-left: var(--tag-small-close-offset); margin-right: calc(var(--tag-small-close-offset) * -1); } [dir=rtl] .nb-tag-remove.size-small { margin-right: var(--tag-small-close-offset); margin-left: calc(var(--tag-small-close-offset) * -1); } .nb-tag-remove.size-medium { font-size: var(--tag-medium-text-line-height); } [dir=ltr] .nb-tag-remove.size-medium { margin-left: var(--tag-medium-close-offset); margin-right: calc(var(--tag-medium-close-offset) * -1); } [dir=rtl] .nb-tag-remove.size-medium { margin-right: var(--tag-medium-close-offset); margin-left: calc(var(--tag-medium-close-offset) * -1); } .nb-tag-remove.size-large { font-size: var(--tag-large-text-line-height); } [dir=ltr] .nb-tag-remove.size-large { margin-left: var(--tag-large-close-offset); margin-right: calc(var(--tag-large-close-offset) * -1); } [dir=rtl] .nb-tag-remove.size-large { margin-right: var(--tag-large-close-offset); margin-left: calc(var(--tag-large-close-offset) * -1); } .nb-tag-remove.size-giant { font-size: var(--tag-giant-text-line-height); } [dir=ltr] .nb-tag-remove.size-giant { margin-left: var(--tag-giant-close-offset); margin-right: calc(var(--tag-giant-close-offset) * -1); } [dir=rtl] .nb-tag-remove.size-giant { margin-right: var(--tag-giant-close-offset); margin-left: calc(var(--tag-giant-close-offset) * -1); } nb-tag-list { display: inline-flex; outline: none; } nb-tag-list.size-tiny .nb-tag-list-tags-wrapper { margin: calc(var(--tag-list-tiny-tag-offset) * -1); } nb-tag-list.size-tiny .nb-tag-list-tags-wrapper nb-tag, nb-tag-list.size-tiny .nb-tag-list-tags-wrapper .nb-tag-input { margin: var(--tag-list-tiny-tag-offset); } nb-tag-list.size-small .nb-tag-list-tags-wrapper { margin: calc(var(--tag-list-small-tag-offset) * -1); } nb-tag-list.size-small .nb-tag-list-tags-wrapper nb-tag, nb-tag-list.size-small .nb-tag-list-tags-wrapper .nb-tag-input { margin: var(--tag-list-small-tag-offset); } nb-tag-list.size-medium .nb-tag-list-tags-wrapper { margin: calc(var(--tag-list-medium-tag-offset) * -1); } nb-tag-list.size-medium .nb-tag-list-tags-wrapper nb-tag, nb-tag-list.size-medium .nb-tag-list-tags-wrapper .nb-tag-input { margin: var(--tag-list-medium-tag-offset); } nb-tag-list.size-large .nb-tag-list-tags-wrapper { margin: calc(var(--tag-list-large-tag-offset) * -1); } nb-tag-list.size-large .nb-tag-list-tags-wrapper nb-tag, nb-tag-list.size-large .nb-tag-list-tags-wrapper .nb-tag-input { margin: var(--tag-list-large-tag-offset); } nb-tag-list.size-giant .nb-tag-list-tags-wrapper { margin: calc(var(--tag-list-giant-tag-offset) * -1); } nb-tag-list.size-giant .nb-tag-list-tags-wrapper nb-tag, nb-tag-list.size-giant .nb-tag-list-tags-wrapper .nb-tag-input { margin: var(--tag-list-giant-tag-offset); } .nb-tag-list-tags-wrapper { display: inline-flex; align-items: center; align-content: center; flex-wrap: wrap; flex: 1; } .nb-tag-list-with-input { border-style: var(--input-border-style); border-width: var(--input-border-width); font-family: var(--input-text-font-family); -webkit-appearance: none; -moz-appearance: none; appearance: none; } .nb-tag-list-with-input.nb-transition { transition-duration: 0.15s; transition-property: border, background-color, color, box-shadow; transition-timing-function: ease-in; } .nb-tag-list-with-input::-moz-placeholder { font-family: var(--input-placeholder-text-font-family); text-overflow: ellipsis; } .nb-tag-list-with-input::placeholder { font-family: var(--input-placeholder-text-font-family); text-overflow: ellipsis; } .nb-tag-list-with-input:focus { outline: none; } .nb-tag-list-with-input.input-full-width { width: 100%; } .nb-tag-list-with-input.shape-rectangle { border-radius: var(--tag-list-with-input-rectangle-border-radius); } .nb-tag-list-with-input.shape-semi-round { border-radius: var(--tag-list-with-input-semi-round-border-radius); } .nb-tag-list-with-input.shape-round { border-radius: var(--tag-list-with-input-round-border-radius); } .nb-tag-list-with-input.size-tiny { padding: var(--tag-list-with-input-tiny-padding); } .nb-tag-list-with-input.size-small { padding: var(--tag-list-with-input-small-padding); } .nb-tag-list-with-input.size-medium { padding: var(--tag-list-with-input-medium-padding); } .nb-tag-list-with-input.size-large { padding: var(--tag-list-with-input-large-padding); } .nb-tag-list-with-input.size-giant { padding: var(--tag-list-with-input-giant-padding); } .nb-tag-list-with-input.status-basic { background-color: var(--tag-input-basic-background-color); border-color: var(--tag-input-basic-border-color); } .nb-tag-list-with-input.status-basic.focus { background-color: var(--tag-input-basic-focus-background-color); border-color: var(--tag-input-basic-focus-border-color); } .nb-tag-list-with-input.status-primary { background-color: var(--tag-input-primary-background-color); border-color: var(--tag-input-primary-border-color); } .nb-tag-list-with-input.status-primary.focus { background-color: var(--tag-input-primary-focus-background-color); border-color: var(--tag-input-primary-focus-border-color); } .nb-tag-list-with-input.status-success { background-color: var(--tag-input-success-background-color); border-color: var(--tag-input-success-border-color); } .nb-tag-list-with-input.status-success.focus { background-color: var(--tag-input-success-focus-background-color); border-color: var(--tag-input-success-focus-border-color); } .nb-tag-list-with-input.status-warning { background-color: var(--tag-input-warning-background-color); border-color: var(--tag-input-warning-border-color); } .nb-tag-list-with-input.status-warning.focus { background-color: var(--tag-input-warning-focus-background-color); border-color: var(--tag-input-warning-focus-border-color); } .nb-tag-list-with-input.status-danger { background-color: var(--tag-input-danger-background-color); border-color: var(--tag-input-danger-border-color); } .nb-tag-list-with-input.status-danger.focus { background-color: var(--tag-input-danger-focus-background-color); border-color: var(--tag-input-danger-focus-border-color); } .nb-tag-list-with-input.status-info { background-color: var(--tag-input-info-background-color); border-color: var(--tag-input-info-border-color); } .nb-tag-list-with-input.status-info.focus { background-color: var(--tag-input-info-focus-background-color); border-color: var(--tag-input-info-focus-border-color); } .nb-tag-list-with-input.status-control { background-color: var(--tag-input-control-background-color); border-color: var(--tag-input-control-border-color); } .nb-tag-list-with-input.status-control.focus { background-color: var(--tag-input-control-focus-background-color); border-color: var(--tag-input-control-focus-border-color); } nb-form-field nb-tag-list { width: 100%; } [dir=ltr] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-tiny { padding-left: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-tiny { padding-right: var(--form-field-addon-tiny-width); } [dir=ltr] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-tiny { padding-right: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-tiny { padding-left: var(--form-field-addon-tiny-width); } [dir=ltr] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-small { padding-left: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-small { padding-right: var(--form-field-addon-small-width); } [dir=ltr] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-small { padding-right: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-small { padding-left: var(--form-field-addon-small-width); } [dir=ltr] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-medium { padding-left: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-medium { padding-right: var(--form-field-addon-medium-width); } [dir=ltr] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-medium { padding-right: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-medium { padding-left: var(--form-field-addon-medium-width); } [dir=ltr] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-large { padding-left: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-large { padding-right: var(--form-field-addon-large-width); } [dir=ltr] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-large { padding-right: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-large { padding-left: var(--form-field-addon-large-width); } [dir=ltr] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-giant { padding-left: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-giant { padding-right: var(--form-field-addon-giant-width); } [dir=ltr] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-giant { padding-right: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-giant { padding-left: var(--form-field-addon-giant-width); } .nb-tag-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: transparent; background: transparent; outline: none; flex: 1; padding: 0; min-width: var(--tag-input-min-width); font-family: var(--tag-input-text-font-family); } .nb-tag-input::-moz-placeholder { font-family: var(--tag-input-placeholder-text-font-family); } .nb-tag-input::placeholder { font-family: var(--tag-input-placeholder-text-font-family); } .nb-tag-input.size-tiny { font-size: var(--tag-input-tiny-text-font-size); font-weight: var(--tag-input-tiny-text-font-weight); line-height: var(--tag-input-tiny-text-line-height); padding: var(--tag-input-tiny-padding); } .nb-tag-input.size-tiny::-moz-placeholder { font-size: var(--tag-input-tiny-placeholder-text-font-size); font-weight: var(--tag-input-tiny-placeholder-text-font-weight); line-height: var(--tag-input-tiny-placeholder-text-line-height); } .nb-tag-input.size-tiny::placeholder { font-size: var(--tag-input-tiny-placeholder-text-font-size); font-weight: var(--tag-input-tiny-placeholder-text-font-weight); line-height: var(--tag-input-tiny-placeholder-text-line-height); } .nb-tag-input.size-small { font-size: var(--tag-input-small-text-font-size); font-weight: var(--tag-input-small-text-font-weight); line-height: var(--tag-input-small-text-line-height); padding: var(--tag-input-small-padding); } .nb-tag-input.size-small::-moz-placeholder { font-size: var(--tag-input-small-placeholder-text-font-size); font-weight: var(--tag-input-small-placeholder-text-font-weight); line-height: var(--tag-input-small-placeholder-text-line-height); } .nb-tag-input.size-small::placeholder { font-size: var(--tag-input-small-placeholder-text-font-size); font-weight: var(--tag-input-small-placeholder-text-font-weight); line-height: var(--tag-input-small-placeholder-text-line-height); } .nb-tag-input.size-medium { font-size: var(--tag-input-medium-text-font-size); font-weight: var(--tag-input-medium-text-font-weight); line-height: var(--tag-input-medium-text-line-height); padding: var(--tag-input-medium-padding); } .nb-tag-input.size-medium::-moz-placeholder { font-size: var(--tag-input-medium-placeholder-text-font-size); font-weight: var(--tag-input-medium-placeholder-text-font-weight); line-height: var(--tag-input-medium-placeholder-text-line-height); } .nb-tag-input.size-medium::placeholder { font-size: var(--tag-input-medium-placeholder-text-font-size); font-weight: var(--tag-input-medium-placeholder-text-font-weight); line-height: var(--tag-input-medium-placeholder-text-line-height); } .nb-tag-input.size-large { font-size: var(--tag-input-large-text-font-size); font-weight: var(--tag-input-large-text-font-weight); line-height: var(--tag-input-large-text-line-height); padding: var(--tag-input-large-padding); } .nb-tag-input.size-large::-moz-placeholder { font-size: var(--tag-input-large-placeholder-text-font-size); font-weight: var(--tag-input-large-placeholder-text-font-weight); line-height: var(--tag-input-large-placeholder-text-line-height); } .nb-tag-input.size-large::placeholder { font-size: var(--tag-input-large-placeholder-text-font-size); font-weight: var(--tag-input-large-placeholder-text-font-weight); line-height: var(--tag-input-large-placeholder-text-line-height); } .nb-tag-input.size-giant { font-size: var(--tag-input-giant-text-font-size); font-weight: var(--tag-input-giant-text-font-weight); line-height: var(--tag-input-giant-text-line-height); padding: var(--tag-input-giant-padding); } .nb-tag-input.size-giant::-moz-placeholder { font-size: var(--tag-input-giant-placeholder-text-font-size); font-weight: var(--tag-input-giant-placeholder-text-font-weight); line-height: var(--tag-input-giant-placeholder-text-line-height); } .nb-tag-input.size-giant::placeholder { font-size: var(--tag-input-giant-placeholder-text-font-size); font-weight: var(--tag-input-giant-placeholder-text-font-weight); line-height: var(--tag-input-giant-placeholder-text-line-height); } .nb-tag-input.status-basic { color: var(--tag-input-basic-text-color); } .nb-tag-input.status-basic::-moz-placeholder { color: var(--tag-input-basic-placeholder-text-color); } .nb-tag-input.status-basic::placeholder { color: var(--tag-input-basic-placeholder-text-color); } .nb-tag-input.status-basic:disabled { color: var(--tag-input-basic-disabled-text-color); } .nb-tag-input.status-basic:disabled::-moz-placeholder { color: var(--tag-input-basic-disabled-placeholder-text-color); } .nb-tag-input.status-basic:disabled::placeholder { color: var(--tag-input-basic-disabled-placeholder-text-color); } .nb-tag-input.status-primary { color: var(--tag-input-primary-text-color); } .nb-tag-input.status-primary::-moz-placeholder { color: var(--tag-input-primary-placeholder-text-color); } .nb-tag-input.status-primary::placeholder { color: var(--tag-input-primary-placeholder-text-color); } .nb-tag-input.status-primary:disabled { color: var(--tag-input-primary-disabled-text-color); } .nb-tag-input.status-primary:disabled::-moz-placeholder { color: var(--tag-input-primary-disabled-placeholder-text-color); } .nb-tag-input.status-primary:disabled::placeholder { color: var(--tag-input-primary-disabled-placeholder-text-color); } .nb-tag-input.status-success { color: var(--tag-input-success-text-color); } .nb-tag-input.status-success::-moz-placeholder { color: var(--tag-input-success-placeholder-text-color); } .nb-tag-input.status-success::placeholder { color: var(--tag-input-success-placeholder-text-color); } .nb-tag-input.status-success:disabled { color: var(--tag-input-success-disabled-text-color); } .nb-tag-input.status-success:disabled::-moz-placeholder { color: var(--tag-input-success-disabled-placeholder-text-color); } .nb-tag-input.status-success:disabled::placeholder { color: var(--tag-input-success-disabled-placeholder-text-color); } .nb-tag-input.status-warning { color: var(--tag-input-warning-text-color); } .nb-tag-input.status-warning::-moz-placeholder { color: var(--tag-input-warning-placeholder-text-color); } .nb-tag-input.status-warning::placeholder { color: var(--tag-input-warning-placeholder-text-color); } .nb-tag-input.status-warning:disabled { color: var(--tag-input-warning-disabled-text-color); } .nb-tag-input.status-warning:disabled::-moz-placeholder { color: var(--tag-input-warning-disabled-placeholder-text-color); } .nb-tag-input.status-warning:disabled::placeholder { color: var(--tag-input-warning-disabled-placeholder-text-color); } .nb-tag-input.status-danger { color: var(--tag-input-danger-text-color); } .nb-tag-input.status-danger::-moz-placeholder { color: var(--tag-input-danger-placeholder-text-color); } .nb-tag-input.status-danger::placeholder { color: var(--tag-input-danger-placeholder-text-color); } .nb-tag-input.status-danger:disabled { color: var(--tag-input-danger-disabled-text-color); } .nb-tag-input.status-danger:disabled::-moz-placeholder { color: var(--tag-input-danger-disabled-placeholder-text-color); } .nb-tag-input.status-danger:disabled::placeholder { color: var(--tag-input-danger-disabled-placeholder-text-color); } .nb-tag-input.status-info { color: var(--tag-input-info-text-color); } .nb-tag-input.status-info::-moz-placeholder { color: var(--tag-input-info-placeholder-text-color); } .nb-tag-input.status-info::placeholder { color: var(--tag-input-info-placeholder-text-color); } .nb-tag-input.status-info:disabled { color: var(--tag-input-info-disabled-text-color); } .nb-tag-input.status-info:disabled::-moz-placeholder { color: var(--tag-input-info-disabled-placeholder-text-color); } .nb-tag-input.status-info:disabled::placeholder { color: var(--tag-input-info-disabled-placeholder-text-color); } .nb-tag-input.status-control { color: var(--tag-input-control-text-color); } .nb-tag-input.status-control::-moz-placeholder { color: var(--tag-input-control-placeholder-text-color); } .nb-tag-input.status-control::placeholder { color: var(--tag-input-control-placeholder-text-color); } .nb-tag-input.status-control:disabled { color: var(--tag-input-control-disabled-text-color); } .nb-tag-input.status-control:disabled::-moz-placeholder { color: var(--tag-input-control-disabled-placeholder-text-color); } .nb-tag-input.status-control:disabled::placeholder { color: var(--tag-input-control-disabled-placeholder-text-color); } body { color: var(--text-basic-color); font-family: var(--text-paragraph-font-family); font-size: var(--text-paragraph-font-size); font-weight: var(--text-paragraph-font-weight); line-height: var(--text-paragraph-line-height); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--text-basic-color); } h1, .h1 { font-size: var(--text-heading-1-font-size); font-family: var(--text-heading-1-font-family); font-weight: var(--text-heading-1-font-weight); line-height: var(--text-heading-1-line-height); } h2, .h2 { font-size: var(--text-heading-2-font-size); font-family: var(--text-heading-2-font-family); font-weight: var(--text-heading-2-font-weight); line-height: var(--text-heading-2-line-height); } h3, .h3 { font-size: var(--text-heading-3-font-size); font-family: var(--text-heading-3-font-family); font-weight: var(--text-heading-3-font-weight); line-height: var(--text-heading-3-line-height); } h4, .h4 { font-size: var(--text-heading-4-font-size); font-family: var(--text-heading-4-font-family); font-weight: var(--text-heading-4-font-weight); line-height: var(--text-heading-4-line-height); } h5, .h5 { font-size: var(--text-heading-5-font-size); font-family: var(--text-heading-5-font-family); font-weight: var(--text-heading-5-font-weight); line-height: var(--text-heading-5-line-height); } h6, .h6 { font-size: var(--text-heading-6-font-size); font-family: var(--text-heading-6-font-family); font-weight: var(--text-heading-6-font-weight); line-height: var(--text-heading-6-line-height); } .subtitle, .subtitle-2 { color: var(--text-basic-color); } .subtitle { font-family: var(--text-subtitle-font-family); font-size: var(--text-subtitle-font-size); font-weight: var(--text-subtitle-font-weight); line-height: var(--text-subtitle-line-height); } .subtitle-2 { font-family: var(--text-subtitle-2-font-family); font-size: var(--text-subtitle-2-font-size); font-weight: var(--text-subtitle-2-font-weight); line-height: var(--text-subtitle-2-line-height); } p, .paragraph { color: var(--text-basic-color); font-family: var(--text-paragraph-font-family); font-size: var(--text-paragraph-font-size); font-weight: var(--text-paragraph-font-weight); line-height: var(--text-paragraph-line-height); } .paragraph-2 { color: var(--text-basic-color); font-family: var(--text-paragraph-2-font-family); font-size: var(--text-paragraph-2-font-size); font-weight: var(--text-paragraph-2-font-weight); line-height: var(--text-paragraph-2-line-height); } a { color: var(--link-text-color); -webkit-text-decoration: var(--link-text-decoration); text-decoration: var(--link-text-decoration); font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; } a:focus { color: var(--link-text-focus-color); } a:hover { color: var(--link-text-hover-color); } a.link-control, a.link-control:hover { color: var(--text-control-color); } a.link-alternate, a.link-alternate:hover { color: var(--text-alternate-color); } .label { color: var(--text-hint-color); font-family: var(--text-label-font-family); font-size: var(--text-label-font-size); font-weight: var(--text-label-font-weight); line-height: var(--text-label-line-height); } .caption { font-family: var(--text-caption-font-family); font-size: var(--text-caption-font-size); font-weight: var(--text-caption-font-weight); line-height: var(--text-caption-line-height); } .caption-2 { font-family: var(--text-caption-2-font-family); font-size: var(--text-caption-2-font-size); font-weight: var(--text-caption-2-font-weight); line-height: var(--text-caption-2-line-height); } .caption, .caption-2 { color: var(--text-hint-color); } .caption.status-basic, .caption-2.status-basic { color: var(--text-basic-color); } .caption.status-primary, .caption-2.status-primary { color: var(--text-primary-color); } .caption.status-success, .caption-2.status-success { color: var(--text-success-color); } .caption.status-warning, .caption-2.status-warning { color: var(--text-warning-color); } .caption.status-danger, .caption-2.status-danger { color: var(--text-danger-color); } .caption.status-info, .caption-2.status-info { color: var(--text-info-color); } .caption.status-control, .caption-2.status-control { color: var(--text-control-color); } li { color: var(--list-item-text-color); font-family: var(--list-item-font-family); font-size: var(--list-item-font-size); font-weight: var(--list-item-font-weight); line-height: var(--list-item-line-height); } .text-alternate { color: var(--text-alternate-color); } .text-disabled { color: var(--text-disabled-color); } .text-hint { color: var(--text-hint-color); } .text-basic { color: var(--text-basic-color); } .text-primary { color: var(--text-primary-color); } .text-success { color: var(--text-success-color); } .text-warning { color: var(--text-warning-color); } .text-danger { color: var(--text-danger-color); } .text-info { color: var(--text-info-color); } .text-control { color: var(--text-control-color); } ng2-smart-table table tr th, ng2-smart-table table tr th a { font-family: var(--smart-table-header-font-family); font-size: var(--smart-table-header-font-size); font-weight: var(--smart-table-header-font-weight); line-height: var(--smart-table-header-line-height); color: var(--smart-table-header-fg); } ng2-smart-table table tr td { font-family: var(--smart-table-font-family); font-size: var(--smart-table-font-size); font-weight: var(--smart-table-font-weight); line-height: var(--smart-table-line-height); color: var(--smart-table-fg); } ng2-smart-table table tr th, ng2-smart-table table tr td { position: relative; padding: var(--smart-table-padding); border: 1px solid var(--smart-table-separator); vertical-align: middle; } ng2-smart-table table tr.ng2-smart-titles th { padding: var(--smart-table-padding); } [dir=ltr] ng2-smart-table table tr.ng2-smart-titles th { padding-right: 1.75rem; } [dir=rtl] ng2-smart-table table tr.ng2-smart-titles th { padding-left: 1.75rem; } ng2-smart-table table tr.ng2-smart-titles th a:hover, ng2-smart-table table tr.ng2-smart-titles th a:active, ng2-smart-table table tr.ng2-smart-titles th a:visited { color: var(--smart-table-header-fg); text-decoration: none; } ng2-smart-table table tr.ng2-smart-titles th a.sort.asc, ng2-smart-table table tr.ng2-smart-titles th a.sort.desc { font-weight: var(--smart-table-header-font-weight); } ng2-smart-table table tr.ng2-smart-titles th a.sort.asc::after, ng2-smart-table table tr.ng2-smart-titles th a.sort.desc::after { border-bottom-color: var(--smart-table-fg-secondary); border-width: 0.375rem; position: absolute; margin: 0; top: 50%; transform: translate(0, -50%); } [dir=ltr] ng2-smart-table table tr.ng2-smart-titles th a.sort.asc::after, [dir=ltr] ng2-smart-table table tr.ng2-smart-titles th a.sort.desc::after { right: 0.75rem; } [dir=rtl] ng2-smart-table table tr.ng2-smart-titles th a.sort.asc::after, [dir=rtl] ng2-smart-table table tr.ng2-smart-titles th a.sort.desc::after { left: 0.75rem; } ng2-smart-table table tr.ng2-smart-titles th a.sort.asc.desc::after, ng2-smart-table table tr.ng2-smart-titles th a.sort.desc.desc::after { transform: translate(0, -50%) rotate(180deg); } ng2-smart-table thead tr { background: var(--smart-table-header-bg); } ng2-smart-table thead tr.ng2-smart-filters th { padding: var(--smart-table-filter-padding); } ng2-smart-table thead tr.ng2-smart-filters th .ng2-smart-filter input { line-height: var(--smart-table-line-height); } ng2-smart-table tbody tr.selected, ng2-smart-table tbody tr:hover { background: var(--smart-table-bg-active) !important; } ng2-smart-table tbody tr:nth-child(2n) { background-color: var(--smart-table-bg-even); } ng2-smart-table th.ng2-smart-actions-title-add a { display: flex; align-items: center; justify-content: center; font-size: 1.75rem !important; padding: var(--smart-table-filter-padding); border-color: var(--smart-table-add-button-border-color); background-color: var(--smart-table-add-button-background-color); color: var(--smart-table-add-button-text-color); border-radius: 0.375rem; } ng2-smart-table th.ng2-smart-actions-title-add a:focus { border-color: var(--smart-table-add-button-focus-border-color); } ng2-smart-table th.ng2-smart-actions-title-add a:hover { text-decoration: none; background-color: var(--smart-table-add-button-hover-background-color); border-color: var(--smart-table-add-button-hover-border-color); } ng2-smart-table th.ng2-smart-actions-title-add a:active { background-color: var(--smart-table-add-button-active-background-color); border-color: var(--smart-table-add-button-active-border-color); } ng2-smart-table .ng2-smart-actions { padding: 0; height: 1px; } ng2-smart-table .ng2-smart-actions ng2-st-tbody-edit-delete, ng2-smart-table .ng2-smart-actions ng2-st-tbody-create-cancel, ng2-smart-table .ng2-smart-actions ng2-st-actions { display: flex; height: 100%; } ng2-smart-table .ng2-smart-actions a.ng2-smart-action { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; font-size: 2rem !important; color: var(--smart-table-fg-secondary); } ng2-smart-table .ng2-smart-actions a.ng2-smart-action:not(:last-child) { border-right: 1px solid var(--smart-table-separator); } ng2-smart-table .ng2-smart-actions a.ng2-smart-action:hover { text-decoration: none; } ng2-smart-table .ng2-smart-actions .ng2-smart-action-add-create:hover, ng2-smart-table .ng2-smart-actions .ng2-smart-action-edit-edit:hover, ng2-smart-table .ng2-smart-actions .ng2-smart-action-edit-save:hover { color: var(--smart-table-action-add-edit-hover-text-color); } ng2-smart-table .ng2-smart-actions .ng2-smart-action-add-cancel:hover, ng2-smart-table .ng2-smart-actions .ng2-smart-action-delete-delete:hover, ng2-smart-table .ng2-smart-actions .ng2-smart-action-edit-cancel:hover { color: var(--smart-table-action-cancel-delete-hover-text-color); } ng2-smart-table table-cell-edit-mode { display: block; margin: -7.5px -12px; } ng2-smart-table ng2-smart-table-pager { display: block; } ng2-smart-table nav.ng2-smart-pagination-nav { display: flex; justify-content: center; margin-top: 1.25rem; } ng2-smart-table nav.ng2-smart-pagination-nav .ng2-smart-pagination { display: flex; padding: 0; } ng2-smart-table nav.ng2-smart-pagination-nav .ng2-smart-pagination .page-item.disabled .page-link, ng2-smart-table nav.ng2-smart-pagination-nav .ng2-smart-pagination .page-item.disabled .page-link:focus, ng2-smart-table nav.ng2-smart-pagination-nav .ng2-smart-pagination .page-item.disabled .page-link:hover { background-color: var(--smart-table-paging-hover); color: var(--smart-table-paging-disabled-text-color); } ng2-smart-table nav.ng2-smart-pagination-nav .pagination { font-family: var(--smart-table-paging-font-family); font-size: var(--smart-table-paging-font-size); line-height: var(--smart-table-paging-line-height); border: var(--smart-table-paging-border-color) solid var(--smart-table-paging-border-width); border-radius: var(--smart-table-border-radius); } ng2-smart-table nav.ng2-smart-pagination-nav .pagination li { overflow: hidden; } [dir=ltr] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:not(:last-child) { border-right: 1px solid var(--smart-table-separator); } [dir=rtl] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:not(:last-child) { border-left: 1px solid var(--smart-table-separator); } ng2-smart-table nav.ng2-smart-pagination-nav .pagination li a.page-link-prev, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li a.page-link-next { font-size: var(--smart-table-paging-font-size); line-height: var(--smart-table-paging-line-height); } ng2-smart-table nav.ng2-smart-pagination-nav .pagination li a, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li > span { font-size: var(--smart-table-paging-font-size); line-height: var(--smart-table-paging-line-height); background-color: transparent; color: var(--smart-table-paging-page-text-color); padding: 0.75rem 1.25rem; border: none; } ng2-smart-table nav.ng2-smart-pagination-nav .pagination li a:focus, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li > span:focus { border-color: var(--smart-table-paging-page-focus-border-color); color: var(--smart-table-paging-page-focus-text-color); } ng2-smart-table nav.ng2-smart-pagination-nav .pagination li a:hover, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li > span:hover { background-color: var(--smart-table-paging-hover); border-color: var(--smart-table-paging-hover-border-color); color: var(--smart-table-paging-hover-text-color); text-decoration: none; } [dir=ltr] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:first-child a, [dir=ltr] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:first-child > span { border-top-left-radius: var(--smart-table-border-radius); border-bottom-left-radius: var(--smart-table-border-radius); } [dir=rtl] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:first-child a, [dir=rtl] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:first-child > span { border-top-right-radius: var(--smart-table-border-radius); border-bottom-right-radius: var(--smart-table-border-radius); } [dir=ltr] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:last-child a, [dir=ltr] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:last-child > span { border-top-right-radius: var(--smart-table-border-radius); border-bottom-right-radius: var(--smart-table-border-radius); } [dir=rtl] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:last-child a, [dir=rtl] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:last-child > span { border-top-left-radius: var(--smart-table-border-radius); border-bottom-left-radius: var(--smart-table-border-radius); } ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active a, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active a:hover, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active a:focus, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active > span, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active > span:hover, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active > span:focus { color: var(--smart-table-paging-fg-active); background-color: var(--smart-table-paging-bg-active); } .nb-theme-default { --link-text-color: var(--text-primary-color); --link-text-decoration: underline; --link-text-focus-color: var(--text-primary-focus-color); --link-text-hover-color: var(--text-primary-hover-color); --card-background-color: var(--background-basic-color-1); --card-text-color: var(--text-basic-color); --card-text-font-family: var(--text-paragraph-font-family); --card-text-font-size: var(--text-paragraph-font-size); --card-text-font-weight: var(--text-paragraph-font-weight); --card-text-line-height: var(--text-paragraph-line-height); --card-border-width: 0.0625rem; --card-border-style: solid; --card-border-color: var(--border-basic-color-4); --card-border-radius: var(--border-radius); --card-padding: 1rem 1.5rem; --card-shadow: none; --card-divider-color: var(--divider-color); --card-divider-style: var(--divider-style); --card-divider-width: var(--divider-width); --card-header-text-color: var(--text-basic-color); --card-header-text-font-family: var(--text-subtitle-font-family); --card-header-text-font-size: var(--text-subtitle-font-size); --card-header-text-font-weight: var(--text-subtitle-font-weight); --card-header-text-line-height: var(--text-subtitle-line-height); --card-header-basic-background-color: var(--background-basic-color-2); --card-header-basic-text-color: var(--text-basic-color); --card-header-primary-background-color: var(--color-primary-default); --card-header-primary-text-color: var(--text-control-color); --card-header-info-background-color: var(--color-info-default); --card-header-info-text-color: var(--text-control-color); --card-header-success-background-color: var(--color-success-default); --card-header-success-text-color: var(--text-control-color); --card-header-warning-background-color: var(--color-warning-default); --card-header-warning-text-color: var(--text-control-color); --card-header-danger-background-color: var(--color-danger-default); --card-header-danger-text-color: var(--text-control-color); --card-header-control-background-color: var(--color-control-default); --card-header-control-text-color: var(--color-basic-800); --card-height-tiny: 13.5rem; --card-height-small: 21.1875rem; --card-height-medium: 28.875rem; --card-height-large: 36.5625rem; --card-height-giant: 44.25rem; --card-margin-bottom: 1.875rem; --card-scrollbar-color: var(--scrollbar-color); --card-scrollbar-background-color: var(--scrollbar-background-color); --card-scrollbar-width: var(--scrollbar-width); --header-background-color: var(--background-basic-color-1); --header-text-color: var(--text-basic-color); --header-text-font-family: var(--text-paragraph-font-family); --header-text-font-size: var(--text-paragraph-font-size); --header-text-font-weight: var(--text-paragraph-font-weight); --header-text-line-height: var(--text-paragraph-line-height); --header-height: 4.75rem; --header-padding: 1.25rem; --header-shadow: var(--shadow); --footer-background-color: var(--background-basic-color-1); --footer-text-color: var(--text-basic-color); --footer-text-font-family: var(--text-paragraph-font-family); --footer-text-font-size: var(--text-paragraph-font-size); --footer-text-font-weight: var(--text-paragraph-font-weight); --footer-text-line-height: var(--text-paragraph-line-height); --footer-text-highlight-color: var(--color-primary-hover); --footer-height: 4.725rem; --footer-padding: 1.25rem; --footer-divider-color: var(--divider-color); --footer-divider-style: var(--divider-style); --footer-divider-width: var(--divider-width); --footer-shadow: var(--shadow); --layout-background-color: var(--background-basic-color-3); --layout-text-color: var(--text-basic-color); --layout-text-font-family: var(--text-paragraph-font-family); --layout-text-font-size: var(--text-paragraph-font-size); --layout-text-font-weight: var(--text-paragraph-font-weight); --layout-text-line-height: var(--text-paragraph-line-height); --layout-min-height: 100vh; --layout-content-width: 900px; --layout-window-mode-min-width: 300px; --layout-window-mode-background-color: var(--background-basic-color-3); --layout-window-mode-padding-top: 4.75rem; --layout-window-shadow: var(--shadow); --layout-padding: 2.25rem 2.25rem 0.75rem; --layout-medium-padding: 1.5rem 1.5rem 0.5rem; --layout-small-padding: 1rem 1rem 0; --layout-scrollbar-background-color: var(--scrollbar-background-color); --layout-scrollbar-color: var(--scrollbar-color); --layout-scrollbar-width: var(--scrollbar-width); --sidebar-background-color: var(--background-basic-color-1); --sidebar-text-color: var(--text-basic-color); --sidebar-text-font-family: var(--text-paragraph-font-family); --sidebar-text-font-size: var(--text-paragraph-font-size); --sidebar-text-font-weight: var(--text-paragraph-font-weight); --sidebar-text-line-height: var(--text-paragraph-line-height); --sidebar-height: 100vh; --sidebar-width: 16rem; --sidebar-width-compact: 3.5rem; --sidebar-padding: 1.25rem; --sidebar-header-height: 3.5rem; --sidebar-footer-height: 3.5rem; --sidebar-shadow: var(--shadow); --sidebar-menu-item-highlight-color: var(--color-primary-default); --sidebar-scrollbar-background-color: var(--scrollbar-background-color); --sidebar-scrollbar-color: var(--scrollbar-color); --sidebar-scrollbar-width: var(--scrollbar-width); --menu-background-color: transparent; --menu-text-color: var(--text-basic-color); --menu-text-font-family: var(--text-subtitle-2-font-family); --menu-text-font-size: var(--text-subtitle-2-font-size); --menu-text-font-weight: var(--text-subtitle-2-font-weight); --menu-text-line-height: var(--text-subtitle-2-line-height); --menu-group-text-color: var(--text-hint-color); --menu-item-border-radius: 0; --menu-item-padding: 0.75rem 1rem; --menu-item-hover-background-color: var(--menu-background-color); --menu-item-hover-cursor: pointer; --menu-item-hover-text-color: var(--text-primary-hover-color); --menu-item-icon-hover-color: var(--menu-item-hover-text-color); --menu-item-active-background-color: var(--menu-background-color); --menu-item-active-text-color: var(--text-primary-color); --menu-item-icon-active-color: var(--menu-item-active-text-color); --menu-item-icon-color: var(--text-hint-color); --menu-item-icon-margin: 0 0.5rem 0 0; --menu-item-icon-width: 1.25rem; --menu-item-divider-color: var(--divider-color); --menu-item-divider-style: var(--divider-style); --menu-item-divider-width: var(--divider-width); --menu-submenu-background-color: var(--menu-background-color); --menu-submenu-text-color: var(--text-basic-color); --menu-submenu-margin: 0; --menu-submenu-padding: 0 1.25rem; --menu-submenu-item-border-color: var(--menu-submenu-background-color); --menu-submenu-item-border-style: solid; --menu-submenu-item-border-width: 0; --menu-submenu-item-border-radius: 0; --menu-submenu-item-padding: var(--menu-item-padding); --menu-submenu-item-hover-background-color: var(--menu-background-color); --menu-submenu-item-hover-border-color: var(--menu-submenu-item-border-color); --menu-submenu-item-hover-text-color: var(--menu-item-hover-text-color); --menu-submenu-item-icon-hover-color: var(--menu-item-icon-hover-color); --menu-submenu-item-active-background-color: var(--menu-background-color); --menu-submenu-item-active-border-color: var(--color-primary-default); --menu-submenu-item-active-text-color: var(--menu-item-active-text-color); --menu-submenu-item-icon-active-color: var(--menu-item-icon-active-color); --menu-submenu-item-active-hover-background-color: var(--menu-submenu-item-hover-background-color); --menu-submenu-item-active-hover-border-color: var(--color-primary-hover); --menu-submenu-item-active-hover-text-color: var(--menu-submenu-item-hover-text-color); --menu-submenu-item-icon-active-hover-color: var(--menu-submenu-item-icon-hover-color); --tabset-background-color: transparent; --tabset-border-radius: 0; --tabset-shadow: none; --tabset-tab-background-color: transparent; --tabset-tab-padding: 1rem 2rem; --tabset-tab-text-color: var(--text-hint-color); --tabset-tab-text-font-family: var(--text-button-font-family); --tabset-tab-text-font-size: var(--text-button-medium-font-size); --tabset-tab-text-font-weight: var(--text-button-font-weight); --tabset-tab-text-line-height: var(--text-button-medium-line-height); --tabset-tab-text-transform: uppercase; --tabset-tab-underline-width: 0.25rem; --tabset-tab-underline-color: transparent; --tabset-tab-active-background-color: transparent; --tabset-tab-active-text-color: var(--text-primary-color); --tabset-tab-active-underline-color: var(--text-primary-color); --tabset-tab-focus-background-color: transparent; --tabset-tab-focus-text-color: var(--text-primary-focus-color); --tabset-tab-focus-underline-color: var(--text-primary-focus-color); --tabset-tab-hover-background-color: transparent; --tabset-tab-hover-text-color: var(--text-primary-hover-color); --tabset-tab-hover-underline-color: var(--text-primary-hover-color); --tabset-tab-disabled-background-color: transparent; --tabset-tab-disabled-text-color: var(--text-disabled-color); --tabset-tab-disabled-underline-color: transparent; --tabset-tab–badge-dot-mode-horizontal-offset: 0.75rem; --tabset-tab-badge-dot-mode-padding: 0.25rem; --tabset-divider-color: var(--divider-color); --tabset-divider-style: var(--divider-style); --tabset-divider-width: var(--divider-width); --tabset-content-background-color: transparent; --tabset-content-padding: 1rem 2rem; --tabset-content-text-color: var(--text-basic-color); --tabset-content-text-font-family: var(--text-paragraph-font-family); --tabset-content-text-font-size: var(--text-paragraph-font-size); --tabset-content-text-font-weight: var(--text-paragraph-font-weight); --tabset-content-text-line-height: var(--text-paragraph-line-height); --tabset-scrollbar-color: var(--scrollbar-color); --tabset-scrollbar-background-color: var(--scrollbar-background-color); --tabset-scrollbar-width: var(--scrollbar-width); --route-tabset-background-color: transparent; --route-tabset-border-radius: 0; --route-tabset-shadow: none; --route-tabset-tab-background-color: transparent; --route-tabset-tab-padding: 1rem 2rem; --route-tabset-tab-text-color: var(--text-hint-color); --route-tabset-tab-text-font-family: var(--text-button-font-family); --route-tabset-tab-text-font-size: var(--text-button-medium-font-size); --route-tabset-tab-text-font-weight: var(--text-button-font-weight); --route-tabset-tab-text-line-height: var(--text-button-medium-line-height); --route-tabset-tab-text-transform: uppercase; --route-tabset-tab-underline-width: 0.25rem; --route-tabset-tab-underline-color: transparent; --route-tabset-tab-active-background-color: transparent; --route-tabset-tab-active-text-color: var(--text-primary-color); --route-tabset-tab-active-underline-color: var(--text-primary-color); --route-tabset-tab-focus-background-color: transparent; --route-tabset-tab-focus-text-color: var(--text-primary-focus-color); --route-tabset-tab-focus-underline-color: var(--text-primary-focus-color); --route-tabset-tab-hover-background-color: transparent; --route-tabset-tab-hover-text-color: var(--text-primary-hover-color); --route-tabset-tab-hover-underline-color: var(--text-primary-hover-color); --route-tabset-tab-disabled-background-color: transparent; --route-tabset-tab-disabled-text-color: var(--text-disabled-color); --route-tabset-tab-disabled-underline-color: transparent; --route-tabset-divider-color: var(--divider-color); --route-tabset-divider-style: var(--divider-style); --route-tabset-divider-width: var(--divider-width); --route-tabset-scrollbar-color: var(--scrollbar-color); --route-tabset-scrollbar-background-color: var(--scrollbar-background-color); --route-tabset-scrollbar-width: var(--scrollbar-width); --user-picture-box-background-color: transparent; --user-picture-box-border-color: var(--border-basic-color-3); --user-picture-box-border-width: 1px; --user-initials-text-color: var(--text-basic-color); --user-initials-text-font-family: var(--text-paragraph-font-family); --user-initials-text-font-weight: var(--text-paragraph-font-weight); --user-name-text-color: var(--text-basic-color); --user-name-text-font-family: var(--text-paragraph-font-family); --user-name-text-font-weight: var(--text-paragraph-font-weight); --user-title-text-color: var(--text-basic-color); --user-title-text-font-family: var(--text-paragraph-2-font-family); --user-title-text-font-weight: var(--text-paragraph-2-font-weight); --user-rectangle-border-radius: 0.5rem; --user-semi-round-border-radius: 0.75rem; --user-round-border-radius: 50%; --user-tiny-height: 1.25rem; --user-tiny-width: 1.25rem; --user-tiny-initials-text-font-size: var(--text-caption-font-size); --user-tiny-initials-text-line-height: var(--text-caption-line-height); --user-tiny-name-text-font-size: var(--text-caption-font-size); --user-tiny-name-text-line-height: var(--text-caption-line-height); --user-tiny-title-text-font-size: var(--text-caption-font-size); --user-tiny-title-text-line-height: var(--text-caption-line-height); --user-small-height: 1.5rem; --user-small-width: 1.5rem; --user-small-initials-text-font-size: var(--text-caption-font-size); --user-small-initials-text-line-height: var(--text-caption-line-height); --user-small-name-text-font-size: var(--text-caption-font-size); --user-small-name-text-line-height: var(--text-caption-line-height); --user-small-title-text-font-size: var(--text-caption-font-size); --user-small-title-text-line-height: var(--text-caption-line-height); --user-medium-height: 2.5rem; --user-medium-width: 2.5rem; --user-medium-initials-text-font-size: var(--text-paragraph-font-size); --user-medium-initials-text-line-height: var(--text-paragraph-line-height); --user-medium-name-text-font-size: var(--text-paragraph-font-size); --user-medium-name-text-line-height: var(--text-paragraph-line-height); --user-medium-title-text-font-size: var(--text-caption-font-size); --user-medium-title-text-line-height: var(--text-caption-line-height); --user-large-height: 3.25rem; --user-large-width: 3.25rem; --user-large-initials-text-font-size: var(--text-paragraph-font-size); --user-large-initials-text-line-height: var(--text-paragraph-line-height); --user-large-name-text-font-size: var(--text-paragraph-font-size); --user-large-name-text-line-height: var(--text-paragraph-line-height); --user-large-title-text-font-size: var(--text-paragraph-2-font-size); --user-large-title-text-line-height: var(--text-paragraph-2-line-height); --user-giant-height: 4rem; --user-giant-width: 4rem; --user-giant-initials-text-font-size: var(--text-paragraph-font-size); --user-giant-initials-text-line-height: var(--text-paragraph-line-height); --user-giant-name-text-font-size: var(--text-paragraph-font-size); --user-giant-name-text-line-height: var(--text-paragraph-line-height); --user-giant-title-text-font-size: var(--text-paragraph-font-size); --user-giant-title-text-line-height: var(--text-paragraph-line-height); --popover-text-color: var(--text-basic-color); --popover-text-font-family: var(--text-paragraph-font-family); --popover-text-font-size: var(--text-paragraph-font-size); --popover-text-font-weight: var(--text-paragraph-font-weight); --popover-text-line-height: var(--text-paragraph-line-height); --popover-background-color: var(--background-basic-color-1); --popover-border-width: 1px; --popover-border-color: transparent; --popover-border-radius: var(--border-radius); --popover-shadow: var(--shadow); --popover-arrow-size: 0.6875rem; --popover-padding: 0.75rem 1rem; --context-menu-background-color: var(--background-basic-color-1); --context-menu-border-color: transparent; --context-menu-border-style: solid; --context-menu-border-width: 0; --context-menu-border-radius: var(--border-radius); --context-menu-text-align: center; --context-menu-min-width: 10rem; --context-menu-max-width: 15rem; --context-menu-shadow: var(--shadow); --actions-background-color: transparent; --actions-divider-color: var(--divider-color); --actions-divider-style: var(--divider-style); --actions-divider-width: var(--divider-width); --actions-icon-color: var(--text-hint-color); --actions-text-color: var(--text-basic-color); --actions-text-font-family: var(--text-button-font-family); --actions-text-font-weight: var(--text-button-font-weight); --actions-text-line-height: var(--text-button-medium-line-height); --actions-disabled-icon-color: var(--text-disabled-color); --actions-disabled-text-color: var(--text-disabled-color); --actions-tiny-height: 1rem; --actions-tiny-icon-height: var(--actions-tiny-height); --actions-tiny-padding: 0 1.25rem; --actions-tiny-text-font-size: var(--text-button-tiny-font-size); --actions-small-height: 1.5rem; --actions-small-icon-height: var(--actions-small-height); --actions-small-padding: 0 1.25rem; --actions-small-text-font-size: var(--text-button-small-font-size); --actions-medium-height: 2.25rem; --actions-medium-icon-height: var(--actions-medium-height); --actions-medium-padding: 0 1.25rem; --actions-medium-text-font-size: var(--text-button-medium-font-size); --actions-large-height: 3.5rem; --actions-large-icon-height: var(--actions-large-height); --actions-large-padding: 0 1.25rem; --actions-large-text-font-size: var(--text-button-large-font-size); --actions-giant-height: 4rem; --actions-giant-icon-height: var(--actions-giant-height); --actions-giant-padding: 0 1.25rem; --actions-giant-text-font-size: var(--text-button-giant-font-size); --search-background-color: var(--background-basic-color-1); --search-divider-color: var(--divider-color); --search-divider-style: var(--divider-style); --search-divider-width: var(--divider-width); --search-extra-background-color: var(--color-primary-default); --search-text-color: var(--text-basic-color); --search-text-font-family: var(--text-heading-1-font-family); --search-text-font-size: var(--text-heading-1-font-size); --search-text-font-weight: var(--text-heading-1-font-weight); --search-text-line-height: var(--text-heading-1-line-height); --search-placeholder-text-color: var(--text-hint-color); --search-info-text-color: var(--text-hint-color); --search-info-text-font-family: var(--text-subtitle-font-family); --search-info-text-font-size: var(--text-subtitle-font-size); --search-info-text-font-weight: var(--text-subtitle-font-weight); --search-info-text-line-height: var(--text-subtitle-line-height); --smart-table-header-font-family: var(--text-paragraph-font-family); --smart-table-header-font-size: var(--text-paragraph-font-size); --smart-table-header-font-weight: var(--text-paragraph-font-weight); --smart-table-header-line-height: var(--text-paragraph-line-height); --smart-table-header-fg: var(--text-basic-color); --smart-table-header-bg: var(--background-basic-color-1); --smart-table-font-family: var(--text-paragraph-font-family); --smart-table-font-size: var(--text-paragraph-font-size); --smart-table-font-weight: var(--text-paragraph-font-weight); --smart-table-line-height: var(--text-paragraph-line-height); --smart-table-fg: var(--text-basic-color); --smart-table-bg: var(--background-basic-color-1); --smart-table-bg-even: var(--background-basic-color-2); --smart-table-fg-secondary: var(--text-basic-color); --smart-table-bg-active: var(--background-basic-color-3); --smart-table-padding: 0.875rem 1.25rem; --smart-table-filter-padding: 0.375rem 0.5rem; --smart-table-separator: var(--divider-color); --smart-table-border-radius: var(--border-radius); --smart-table-action-add-edit-hover-text-color: var(--color-primary-default); --smart-table-action-cancel-delete-hover-text-color: var(--color-danger-default); --smart-table-add-button-border-color: var(--button-filled-primary-border-color); --smart-table-add-button-background-color: var(--button-filled-primary-background-color); --smart-table-add-button-text-color: var(--button-filled-primary-text-color); --smart-table-add-button-focus-border-color: var(--button-filled-primary-focus-border-color); --smart-table-add-button-hover-background-color: var(--button-filled-primary-hover-background-color); --smart-table-add-button-hover-border-color: var(--button-filled-primary-hover-border-color); --smart-table-add-button-active-background-color: var(--button-filled-primary-active-background-color); --smart-table-add-button-active-border-color: var(--button-filled-primary-active-border-color); --smart-table-paging-font-family: var(--button-text-font-family); --smart-table-paging-font-size: var(--button-medium-text-font-size); --smart-table-paging-line-height: var(--button-medium-text-line-height); --smart-table-paging-border-color: var(--divider-color); --smart-table-paging-border-width: var(--divider-width); --smart-table-paging-fg-active: var(--text-control-color); --smart-table-paging-bg-active: var(--color-primary-default); --smart-table-paging-hover: transparent; --smart-table-paging-hover-border-color: var(--button-outline-primary-hover-border-color); --smart-table-paging-hover-text-color: var(--button-outline-primary-hover-text-color); --smart-table-paging-disabled-text-color: var(--button-outline-primary-disabled-text-color); --smart-table-paging-page-text-color: var(--button-outline-primary-text-color); --smart-table-paging-page-focus-border-color: var(--button-outline-primary-focus-border-color); --smart-table-paging-page-focus-text-color: var(--button-outline-primary-focus-text-color); --toastr-border-style: solid; --toastr-border-width: 1px; --toastr-border-radius: var(--border-radius); --toastr-padding: 1rem; --toastr-shadow: var(--shadow); --toastr-text-font-family: var(--text-paragraph-2-font-family); --toastr-text-font-size: var(--text-paragraph-2-font-size); --toastr-text-font-weight: var(--text-paragraph-2-font-weight); --toastr-text-line-height: var(--text-paragraph-2-line-height); --toastr-title-text-font-family: var(--text-subtitle-font-family); --toastr-title-text-font-size: var(--text-subtitle-font-size); --toastr-title-text-font-weight: var(--text-subtitle-font-weight); --toastr-title-text-line-height: var(--text-subtitle-line-height); --toastr-basic-background-color: var(--background-basic-color-1); --toastr-basic-border-color: var(--border-basic-color-3); --toastr-basic-text-color: var(--text-basic-color); --toastr-icon-basic-background-color: var(--background-basic-color-1); --toastr-icon-basic-color: var(--text-basic-color); --toastr-destroyable-basic-hover-background-color: var(--background-basic-color-1); --toastr-destroyable-basic-hover-border-color: var(--border-basic-color-3); --toastr-primary-background-color: var(--color-primary-default); --toastr-primary-border-color: var(--color-primary-default); --toastr-primary-text-color: var(--text-control-color); --toastr-icon-primary-background-color: var(--background-basic-color-1); --toastr-icon-primary-color: var(--color-primary-default); --toastr-destroyable-primary-hover-background-color: var(--color-primary-hover); --toastr-destroyable-primary-hover-border-color: var(--color-primary-hover); --toastr-success-background-color: var(--color-success-default); --toastr-success-border-color: var(--color-success-default); --toastr-success-text-color: var(--text-control-color); --toastr-icon-success-background-color: var(--background-basic-color-1); --toastr-icon-success-color: var(--color-success-default); --toastr-destroyable-success-hover-background-color: var(--color-success-hover); --toastr-destroyable-success-hover-border-color: var(--color-success-hover); --toastr-info-background-color: var(--color-info-default); --toastr-info-border-color: var(--color-info-default); --toastr-info-text-color: var(--text-control-color); --toastr-icon-info-background-color: var(--background-basic-color-1); --toastr-icon-info-color: var(--color-info-default); --toastr-destroyable-info-hover-background-color: var(--color-info-hover); --toastr-destroyable-info-hover-border-color: var(--color-info-hover); --toastr-warning-background-color: var(--color-warning-default); --toastr-warning-border-color: var(--color-warning-default); --toastr-warning-text-color: var(--text-control-color); --toastr-icon-warning-background-color: var(--background-basic-color-1); --toastr-icon-warning-color: var(--color-warning-default); --toastr-destroyable-warning-hover-background-color: var(--color-warning-hover); --toastr-destroyable-warning-hover-border-color: var(--color-warning-hover); --toastr-danger-background-color: var(--color-danger-default); --toastr-danger-border-color: var(--color-danger-default); --toastr-danger-text-color: var(--text-control-color); --toastr-icon-danger-background-color: var(--background-basic-color-1); --toastr-icon-danger-color: var(--color-danger-default); --toastr-destroyable-danger-hover-background-color: var(--color-danger-hover); --toastr-destroyable-danger-hover-border-color: var(--color-danger-hover); --toastr-control-background-color: var(--color-control-default); --toastr-control-border-color: var(--color-control-default); --toastr-control-text-color: var(--color-basic-800); --toastr-icon-control-background-color: var(--color-control-default); --toastr-icon-control-color: var(--color-basic-800); --toastr-destroyable-control-hover-background-color: var(--color-control-hover); --toastr-destroyable-control-hover-border-color: var(--color-control-hover); --button-cursor: pointer; --button-outline-width: var(--outline-width); --button-outline-color: var(--outline-color); --button-text-font-family: var(--text-button-font-family); --button-text-font-weight: var(--text-button-font-weight); --button-disabled-cursor: default; --button-tiny-text-font-size: var(--text-button-tiny-font-size); --button-tiny-text-line-height: var(--text-button-tiny-line-height); --button-tiny-icon-size: 0.75rem; --button-tiny-icon-vertical-margin: -0.125rem; --button-tiny-icon-offset: 0.375rem; --button-small-text-font-size: var(--text-button-small-font-size); --button-small-text-line-height: var(--text-button-small-line-height); --button-small-icon-size: 1rem; --button-small-icon-vertical-margin: -0.125rem; --button-small-icon-offset: 0.375rem; --button-medium-text-font-size: var(--text-button-medium-font-size); --button-medium-text-line-height: var(--text-button-medium-line-height); --button-medium-icon-size: 1.25rem; --button-medium-icon-vertical-margin: -0.125rem; --button-medium-icon-offset: 0.5rem; --button-large-text-font-size: var(--text-button-large-font-size); --button-large-text-line-height: var(--text-button-large-line-height); --button-large-icon-size: 1.5rem; --button-large-icon-vertical-margin: -0.125rem; --button-large-icon-offset: 0.75rem; --button-giant-text-font-size: var(--text-button-giant-font-size); --button-giant-text-line-height: var(--text-button-giant-line-height); --button-giant-icon-size: 1.5rem; --button-giant-icon-vertical-margin: -0.125rem; --button-giant-icon-offset: 0.75rem; --button-rectangle-border-radius: var(--border-radius); --button-semi-round-border-radius: 0.75rem; --button-round-border-radius: 1.5rem; --button-filled-border-style: solid; --button-filled-border-width: 0.0625rem; --button-filled-text-transform: uppercase; --button-filled-tiny-padding: 0.3125rem 0.625rem; --button-filled-small-padding: 0.4375rem 0.875rem; --button-filled-medium-padding: 0.6875rem 1.125rem; --button-filled-large-padding: 0.8125rem 1.125rem; --button-filled-giant-padding: 0.9375rem 1.375rem; --button-filled-basic-background-color: var(--color-basic-default); --button-filled-basic-border-color: var(--color-basic-default-border); --button-filled-basic-text-color: var(--color-basic-800); --button-filled-basic-focus-background-color: var(--color-basic-focus); --button-filled-basic-focus-border-color: var(--color-basic-focus-border); --button-filled-basic-hover-background-color: var(--color-basic-hover); --button-filled-basic-hover-border-color: var(--color-basic-hover-border); --button-filled-basic-active-background-color: var(--color-basic-active); --button-filled-basic-active-border-color: var(--color-basic-active-border); --button-filled-basic-disabled-background-color: var(--color-basic-disabled); --button-filled-basic-disabled-border-color: var(--color-basic-disabled-border); --button-filled-basic-disabled-text-color: var(--text-disabled-color); --button-filled-primary-background-color: var(--color-primary-default); --button-filled-primary-border-color: var(--color-primary-default-border); --button-filled-primary-text-color: var(--text-control-color); --button-filled-primary-focus-background-color: var(--color-primary-focus); --button-filled-primary-focus-border-color: var(--color-primary-focus-border); --button-filled-primary-hover-background-color: var(--color-primary-hover); --button-filled-primary-hover-border-color: var(--color-primary-hover-border); --button-filled-primary-active-background-color: var(--color-primary-active); --button-filled-primary-active-border-color: var(--color-primary-active-border); --button-filled-primary-disabled-background-color: var(--color-primary-disabled); --button-filled-primary-disabled-border-color: var(--color-primary-disabled-border); --button-filled-primary-disabled-text-color: var(--text-disabled-color); --button-filled-success-background-color: var(--color-success-default); --button-filled-success-border-color: var(--color-success-default-border); --button-filled-success-text-color: var(--text-control-color); --button-filled-success-focus-background-color: var(--color-success-focus); --button-filled-success-focus-border-color: var(--color-success-focus-border); --button-filled-success-hover-background-color: var(--color-success-hover); --button-filled-success-hover-border-color: var(--color-success-hover-border); --button-filled-success-active-background-color: var(--color-success-active); --button-filled-success-active-border-color: var(--color-success-active-border); --button-filled-success-disabled-background-color: var(--color-success-disabled); --button-filled-success-disabled-border-color: var(--color-success-disabled-border); --button-filled-success-disabled-text-color: var(--text-disabled-color); --button-filled-info-background-color: var(--color-info-default); --button-filled-info-border-color: var(--color-info-default-border); --button-filled-info-text-color: var(--text-control-color); --button-filled-info-focus-background-color: var(--color-info-focus); --button-filled-info-focus-border-color: var(--color-info-focus-border); --button-filled-info-hover-background-color: var(--color-info-hover); --button-filled-info-hover-border-color: var(--color-info-hover-border); --button-filled-info-active-background-color: var(--color-info-active); --button-filled-info-active-border-color: var(--color-info-active-border); --button-filled-info-disabled-background-color: var(--color-info-disabled); --button-filled-info-disabled-border-color: var(--color-info-disabled-border); --button-filled-info-disabled-text-color: var(--text-disabled-color); --button-filled-warning-background-color: var(--color-warning-default); --button-filled-warning-border-color: var(--color-warning-default-border); --button-filled-warning-text-color: var(--text-control-color); --button-filled-warning-focus-background-color: var(--color-warning-focus); --button-filled-warning-focus-border-color: var(--color-warning-focus-border); --button-filled-warning-hover-background-color: var(--color-warning-hover); --button-filled-warning-hover-border-color: var(--color-warning-hover-border); --button-filled-warning-active-background-color: var(--color-warning-active); --button-filled-warning-active-border-color: var(--color-warning-active-border); --button-filled-warning-disabled-background-color: var(--color-warning-disabled); --button-filled-warning-disabled-border-color: var(--color-warning-disabled-border); --button-filled-warning-disabled-text-color: var(--text-disabled-color); --button-filled-danger-background-color: var(--color-danger-default); --button-filled-danger-border-color: var(--color-danger-default-border); --button-filled-danger-text-color: var(--text-control-color); --button-filled-danger-focus-background-color: var(--color-danger-focus); --button-filled-danger-focus-border-color: var(--color-danger-focus-border); --button-filled-danger-hover-background-color: var(--color-danger-hover); --button-filled-danger-hover-border-color: var(--color-danger-hover-border); --button-filled-danger-active-background-color: var(--color-danger-active); --button-filled-danger-active-border-color: var(--color-danger-active-border); --button-filled-danger-disabled-background-color: var(--color-danger-disabled); --button-filled-danger-disabled-border-color: var(--color-danger-disabled-border); --button-filled-danger-disabled-text-color: var(--text-disabled-color); --button-filled-control-background-color: var(--color-control-default); --button-filled-control-border-color: var(--color-control-default-border); --button-filled-control-text-color: var(--color-basic-800); --button-filled-control-focus-background-color: var(--color-control-focus); --button-filled-control-focus-border-color: var(--color-control-focus-border); --button-filled-control-hover-background-color: var(--color-control-hover); --button-filled-control-hover-border-color: var(--color-control-hover-border); --button-filled-control-active-background-color: var(--color-control-active); --button-filled-control-active-border-color: var(--color-control-active-border); --button-filled-control-disabled-background-color: var(--color-control-disabled); --button-filled-control-disabled-border-color: var(--color-control-disabled-border); --button-filled-control-disabled-text-color: var(--text-disabled-color); --button-outline-border-style: solid; --button-outline-border-width: 0.0625rem; --button-outline-text-transform: uppercase; --button-outline-focus-inset-shadow-length: 0 0 0 100vmax; --button-outline-tiny-padding: 0.3125rem 0.625rem; --button-outline-small-padding: 0.4375rem 0.875rem; --button-outline-medium-padding: 0.6875rem 1.125rem; --button-outline-large-padding: 0.8125rem 1.125rem; --button-outline-giant-padding: 0.9375rem 1.375rem; --button-outline-basic-background-color: var(--color-basic-transparent-default); --button-outline-basic-border-color: var(--color-basic-transparent-default-border); --button-outline-basic-text-color: var(--text-hint-color); --button-outline-basic-focus-background-color: var(--color-basic-transparent-focus); --button-outline-basic-focus-border-color: var(--color-basic-transparent-focus-border); --button-outline-basic-focus-text-color: var(--text-hint-color); --button-outline-basic-hover-background-color: var(--color-basic-transparent-hover); --button-outline-basic-hover-border-color: var(--color-basic-transparent-hover-border); --button-outline-basic-hover-text-color: var(--text-hint-color); --button-outline-basic-active-background-color: var(--color-basic-transparent-active); --button-outline-basic-active-border-color: var(--color-basic-transparent-active-border); --button-outline-basic-active-text-color: var(--text-hint-color); --button-outline-basic-disabled-background-color: var(--color-basic-transparent-disabled); --button-outline-basic-disabled-border-color: var(--color-basic-transparent-disabled-border); --button-outline-basic-disabled-text-color: var(--text-disabled-color); --button-outline-primary-background-color: var(--color-primary-transparent-default); --button-outline-primary-border-color: var(--color-primary-transparent-default-border); --button-outline-primary-text-color: var(--text-primary-color); --button-outline-primary-focus-background-color: var(--color-primary-transparent-focus); --button-outline-primary-focus-border-color: var(--color-primary-transparent-focus-border); --button-outline-primary-focus-text-color: var(--text-primary-color); --button-outline-primary-hover-background-color: var(--color-primary-transparent-hover); --button-outline-primary-hover-border-color: var(--color-primary-transparent-hover-border); --button-outline-primary-hover-text-color: var(--text-primary-color); --button-outline-primary-active-background-color: var(--color-primary-transparent-active); --button-outline-primary-active-border-color: var(--color-primary-transparent-active-border); --button-outline-primary-active-text-color: var(--text-primary-color); --button-outline-primary-disabled-background-color: var(--color-primary-transparent-disabled); --button-outline-primary-disabled-border-color: var(--color-primary-transparent-disabled-border); --button-outline-primary-disabled-text-color: var(--text-disabled-color); --button-outline-success-background-color: var(--color-success-transparent-default); --button-outline-success-border-color: var(--color-success-transparent-default-border); --button-outline-success-text-color: var(--text-success-color); --button-outline-success-focus-background-color: var(--color-success-transparent-focus); --button-outline-success-focus-border-color: var(--color-success-transparent-focus-border); --button-outline-success-focus-text-color: var(--text-success-color); --button-outline-success-hover-background-color: var(--color-success-transparent-hover); --button-outline-success-hover-border-color: var(--color-success-transparent-hover-border); --button-outline-success-hover-text-color: var(--text-success-color); --button-outline-success-active-background-color: var(--color-success-transparent-active); --button-outline-success-active-border-color: var(--color-success-transparent-active-border); --button-outline-success-active-text-color: var(--text-success-color); --button-outline-success-disabled-background-color: var(--color-success-transparent-disabled); --button-outline-success-disabled-border-color: var(--color-success-transparent-disabled-border); --button-outline-success-disabled-text-color: var(--text-disabled-color); --button-outline-info-background-color: var(--color-info-transparent-default); --button-outline-info-border-color: var(--color-info-transparent-default-border); --button-outline-info-text-color: var(--text-info-color); --button-outline-info-focus-background-color: var(--color-info-transparent-focus); --button-outline-info-focus-border-color: var(--color-info-transparent-focus-border); --button-outline-info-focus-text-color: var(--text-info-color); --button-outline-info-hover-background-color: var(--color-info-transparent-hover); --button-outline-info-hover-border-color: var(--color-info-transparent-hover-border); --button-outline-info-hover-text-color: var(--text-info-color); --button-outline-info-active-background-color: var(--color-info-transparent-active); --button-outline-info-active-border-color: var(--color-info-transparent-active-border); --button-outline-info-active-text-color: var(--text-info-color); --button-outline-info-disabled-background-color: var(--color-info-transparent-disabled); --button-outline-info-disabled-border-color: var(--color-info-transparent-disabled-border); --button-outline-info-disabled-text-color: var(--text-disabled-color); --button-outline-warning-background-color: var(--color-warning-transparent-default); --button-outline-warning-border-color: var(--color-warning-transparent-default-border); --button-outline-warning-text-color: var(--text-warning-color); --button-outline-warning-focus-background-color: var(--color-warning-transparent-focus); --button-outline-warning-focus-border-color: var(--color-warning-transparent-focus-border); --button-outline-warning-focus-text-color: var(--text-warning-color); --button-outline-warning-hover-background-color: var(--color-warning-transparent-hover); --button-outline-warning-hover-border-color: var(--color-warning-transparent-hover-border); --button-outline-warning-hover-text-color: var(--text-warning-color); --button-outline-warning-active-background-color: var(--color-warning-transparent-active); --button-outline-warning-active-border-color: var(--color-warning-transparent-active-border); --button-outline-warning-active-text-color: var(--text-warning-color); --button-outline-warning-disabled-background-color: var(--color-warning-transparent-disabled); --button-outline-warning-disabled-border-color: var(--color-warning-transparent-disabled-border); --button-outline-warning-disabled-text-color: var(--text-disabled-color); --button-outline-danger-background-color: var(--color-danger-transparent-default); --button-outline-danger-border-color: var(--color-danger-transparent-default-border); --button-outline-danger-text-color: var(--text-danger-color); --button-outline-danger-focus-background-color: var(--color-danger-transparent-focus); --button-outline-danger-focus-border-color: var(--color-danger-transparent-focus-border); --button-outline-danger-focus-text-color: var(--text-danger-color); --button-outline-danger-hover-background-color: var(--color-danger-transparent-hover); --button-outline-danger-hover-border-color: var(--color-danger-transparent-hover-border); --button-outline-danger-hover-text-color: var(--text-danger-color); --button-outline-danger-active-background-color: var(--color-danger-transparent-active); --button-outline-danger-active-border-color: var(--color-danger-transparent-active-border); --button-outline-danger-active-text-color: var(--text-danger-color); --button-outline-danger-disabled-background-color: var(--color-danger-transparent-disabled); --button-outline-danger-disabled-border-color: var(--color-danger-transparent-disabled-border); --button-outline-danger-disabled-text-color: var(--text-disabled-color); --button-outline-control-background-color: var(--color-control-transparent-default); --button-outline-control-border-color: var(--color-control-transparent-default-border); --button-outline-control-text-color: var(--text-control-color); --button-outline-control-focus-background-color: var(--color-control-transparent-focus); --button-outline-control-focus-border-color: var(--color-control-transparent-focus-border); --button-outline-control-focus-text-color: var(--text-control-color); --button-outline-control-hover-background-color: var(--color-control-transparent-hover); --button-outline-control-hover-border-color: var(--color-control-transparent-hover-border); --button-outline-control-hover-text-color: var(--text-control-color); --button-outline-control-active-background-color: var(--color-control-transparent-active); --button-outline-control-active-border-color: var(--color-control-transparent-active-border); --button-outline-control-active-text-color: var(--text-control-color); --button-outline-control-disabled-background-color: var(--color-control-transparent-disabled); --button-outline-control-disabled-border-color: var(--color-control-transparent-disabled-border); --button-outline-control-disabled-text-color: var(--text-disabled-color); --button-ghost-background-color: transparent; --button-ghost-border-color: transparent; --button-ghost-border-style: solid; --button-ghost-border-width: 0.0625rem; --button-ghost-text-transform: uppercase; --button-ghost-focus-inset-shadow-length: 0 0 0 100vmax; --button-ghost-tiny-padding: 0.3125rem 0.625rem; --button-ghost-small-padding: 0.4375rem 0.875rem; --button-ghost-medium-padding: 0.6875rem 1.125rem; --button-ghost-large-padding: 0.8125rem 1.125rem; --button-ghost-giant-padding: 0.9375rem 1.375rem; --button-ghost-basic-text-color: var(--color-basic-600); --button-ghost-basic-focus-background-color: var(--color-basic-transparent-200); --button-ghost-basic-focus-border-color: var(--color-basic-transparent-500); --button-ghost-basic-focus-text-color: var(--color-basic-600); --button-ghost-basic-hover-background-color: var(--color-basic-transparent-100); --button-ghost-basic-hover-border-color: transparent; --button-ghost-basic-hover-text-color: var(--color-basic-600); --button-ghost-basic-active-background-color: var(--color-basic-transparent-200); --button-ghost-basic-active-border-color: transparent; --button-ghost-basic-active-text-color: var(--color-basic-600); --button-ghost-basic-disabled-background-color: var(--color-basic-transparent-200); --button-ghost-basic-disabled-border-color: transparent; --button-ghost-basic-disabled-text-color: var(--text-disabled-color); --button-ghost-primary-text-color: var(--text-primary-color); --button-ghost-primary-focus-background-color: var(--color-basic-transparent-200); --button-ghost-primary-focus-border-color: var(--color-basic-transparent-500); --button-ghost-primary-focus-text-color: var(--text-primary-color); --button-ghost-primary-hover-background-color: var(--color-basic-transparent-100); --button-ghost-primary-hover-border-color: transparent; --button-ghost-primary-hover-text-color: var(--text-primary-color); --button-ghost-primary-active-background-color: var(--color-basic-transparent-200); --button-ghost-primary-active-border-color: transparent; --button-ghost-primary-active-text-color: var(--text-primary-color); --button-ghost-primary-disabled-background-color: var(--color-basic-transparent-200); --button-ghost-primary-disabled-border-color: transparent; --button-ghost-primary-disabled-text-color: var(--text-disabled-color); --button-ghost-success-text-color: var(--text-success-color); --button-ghost-success-focus-background-color: var(--color-basic-transparent-200); --button-ghost-success-focus-border-color: var(--color-basic-transparent-500); --button-ghost-success-focus-text-color: var(--text-success-color); --button-ghost-success-hover-background-color: var(--color-basic-transparent-100); --button-ghost-success-hover-border-color: transparent; --button-ghost-success-hover-text-color: var(--text-success-color); --button-ghost-success-active-background-color: var(--color-basic-transparent-200); --button-ghost-success-active-border-color: transparent; --button-ghost-success-active-text-color: var(--text-success-color); --button-ghost-success-disabled-background-color: var(--color-basic-transparent-200); --button-ghost-success-disabled-border-color: transparent; --button-ghost-success-disabled-text-color: var(--text-disabled-color); --button-ghost-info-text-color: var(--text-info-color); --button-ghost-info-focus-background-color: var(--color-basic-transparent-200); --button-ghost-info-focus-border-color: var(--color-basic-transparent-500); --button-ghost-info-focus-text-color: var(--text-info-color); --button-ghost-info-hover-background-color: var(--color-basic-transparent-100); --button-ghost-info-hover-border-color: transparent; --button-ghost-info-hover-text-color: var(--text-info-color); --button-ghost-info-active-background-color: var(--color-basic-transparent-200); --button-ghost-info-active-border-color: transparent; --button-ghost-info-active-text-color: var(--text-info-color); --button-ghost-info-disabled-background-color: var(--color-basic-transparent-200); --button-ghost-info-disabled-border-color: transparent; --button-ghost-info-disabled-text-color: var(--text-disabled-color); --button-ghost-warning-text-color: var(--text-warning-color); --button-ghost-warning-focus-background-color: var(--color-basic-transparent-200); --button-ghost-warning-focus-border-color: var(--color-basic-transparent-500); --button-ghost-warning-focus-text-color: var(--text-warning-color); --button-ghost-warning-hover-background-color: var(--color-basic-transparent-100); --button-ghost-warning-hover-border-color: transparent; --button-ghost-warning-hover-text-color: var(--text-warning-color); --button-ghost-warning-active-background-color: var(--color-basic-transparent-200); --button-ghost-warning-active-border-color: transparent; --button-ghost-warning-active-text-color: var(--text-warning-color); --button-ghost-warning-disabled-background-color: var(--color-basic-transparent-200); --button-ghost-warning-disabled-border-color: transparent; --button-ghost-warning-disabled-text-color: var(--text-disabled-color); --button-ghost-danger-text-color: var(--text-danger-color); --button-ghost-danger-focus-background-color: var(--color-basic-transparent-200); --button-ghost-danger-focus-border-color: var(--color-basic-transparent-500); --button-ghost-danger-focus-text-color: var(--text-danger-color); --button-ghost-danger-hover-background-color: var(--color-basic-transparent-100); --button-ghost-danger-hover-border-color: transparent; --button-ghost-danger-hover-text-color: var(--text-danger-color); --button-ghost-danger-active-background-color: var(--color-basic-transparent-200); --button-ghost-danger-active-border-color: transparent; --button-ghost-danger-active-text-color: var(--text-danger-color); --button-ghost-danger-disabled-background-color: var(--color-basic-transparent-200); --button-ghost-danger-disabled-border-color: transparent; --button-ghost-danger-disabled-text-color: var(--text-disabled-color); --button-ghost-control-text-color: var(--color-basic-100); --button-ghost-control-focus-background-color: var(--color-basic-transparent-200); --button-ghost-control-focus-border-color: var(--color-basic-transparent-500); --button-ghost-control-focus-text-color: var(--color-basic-100); --button-ghost-control-hover-background-color: var(--color-basic-transparent-100); --button-ghost-control-hover-border-color: transparent; --button-ghost-control-hover-text-color: var(--color-basic-100); --button-ghost-control-active-background-color: var(--color-basic-transparent-200); --button-ghost-control-active-border-color: transparent; --button-ghost-control-active-text-color: var(--color-basic-100); --button-ghost-control-disabled-background-color: var(--color-basic-transparent-200); --button-ghost-control-disabled-border-color: transparent; --button-ghost-control-disabled-text-color: var(--text-disabled-color); --button-hero-border-color: transparent; --button-hero-border-style: solid; --button-hero-border-width: 0; --button-hero-text-transform: uppercase; --button-hero-tiny-padding: 0.375rem 0.6875rem; --button-hero-small-padding: 0.5rem 0.9375rem; --button-hero-medium-padding: 0.75rem 1.1875rem; --button-hero-large-padding: 0.875rem 1.1875rem; --button-hero-giant-padding: 1rem 1.4375rem; --button-hero-shadow: 0 0 transparent; --button-hero-text-shadow: var(--shadow); --button-hero-bevel-size: 0 0 0 0; --button-hero-glow-size: 0 0 0 0; --button-hero-outline-color: var(--outline-color); --button-hero-outline-width: var(--outline-width); --button-hero-basic-text-color: var(--color-basic-600); --button-hero-basic-bevel-color: var(--color-basic-600); --button-hero-basic-glow-color: var(--color-basic-700); --button-hero-basic-left-background-color: var(--color-basic-200); --button-hero-basic-right-background-color: var(--color-basic-default); --button-hero-basic-focus-left-background-color: var(--color-basic-300); --button-hero-basic-focus-right-background-color: var(--color-basic-focus); --button-hero-basic-hover-left-background-color: var(--color-basic-100); --button-hero-basic-hover-right-background-color: var(--color-basic-hover); --button-hero-basic-active-left-background-color: var(--color-basic-300); --button-hero-basic-active-right-background-color: var(--color-basic-active); --button-hero-basic-disabled-background-color: var(--color-basic-disabled); --button-hero-basic-disabled-text-color: var(--text-disabled-color); --button-hero-primary-text-color: var(--text-control-color); --button-hero-primary-bevel-color: var(--color-primary-600); --button-hero-primary-glow-color: var(--color-primary-700); --button-hero-primary-left-background-color: var(--color-primary-400); --button-hero-primary-right-background-color: var(--color-primary-default); --button-hero-primary-focus-left-background-color: var(--color-primary-500); --button-hero-primary-focus-right-background-color: var(--color-primary-focus); --button-hero-primary-hover-left-background-color: var(--color-primary-300); --button-hero-primary-hover-right-background-color: var(--color-primary-hover); --button-hero-primary-active-left-background-color: var(--color-primary-500); --button-hero-primary-active-right-background-color: var(--color-primary-active); --button-hero-primary-disabled-background-color: var(--color-primary-disabled); --button-hero-primary-disabled-text-color: var(--text-disabled-color); --button-hero-success-text-color: var(--text-control-color); --button-hero-success-bevel-color: var(--color-success-600); --button-hero-success-glow-color: var(--color-success-700); --button-hero-success-left-background-color: var(--color-success-400); --button-hero-success-right-background-color: var(--color-success-default); --button-hero-success-focus-left-background-color: var(--color-success-500); --button-hero-success-focus-right-background-color: var(--color-success-focus); --button-hero-success-hover-left-background-color: var(--color-success-300); --button-hero-success-hover-right-background-color: var(--color-success-hover); --button-hero-success-active-left-background-color: var(--color-success-500); --button-hero-success-active-right-background-color: var(--color-success-active); --button-hero-success-disabled-background-color: var(--color-success-disabled); --button-hero-success-disabled-text-color: var(--text-disabled-color); --button-hero-info-text-color: var(--text-control-color); --button-hero-info-bevel-color: var(--color-info-600); --button-hero-info-glow-color: var(--color-info-700); --button-hero-info-left-background-color: var(--color-info-400); --button-hero-info-right-background-color: var(--color-info-default); --button-hero-info-focus-left-background-color: var(--color-info-500); --button-hero-info-focus-right-background-color: var(--color-info-focus); --button-hero-info-hover-left-background-color: var(--color-info-300); --button-hero-info-hover-right-background-color: var(--color-info-hover); --button-hero-info-active-left-background-color: var(--color-info-500); --button-hero-info-active-right-background-color: var(--color-info-active); --button-hero-info-disabled-background-color: var(--color-info-disabled); --button-hero-info-disabled-text-color: var(--text-disabled-color); --button-hero-warning-text-color: var(--text-control-color); --button-hero-warning-bevel-color: var(--color-warning-600); --button-hero-warning-glow-color: var(--color-warning-700); --button-hero-warning-left-background-color: var(--color-warning-400); --button-hero-warning-right-background-color: var(--color-warning-default); --button-hero-warning-focus-left-background-color: var(--color-warning-500); --button-hero-warning-focus-right-background-color: var(--color-warning-focus); --button-hero-warning-hover-left-background-color: var(--color-warning-300); --button-hero-warning-hover-right-background-color: var(--color-warning-hover); --button-hero-warning-active-left-background-color: var(--color-warning-500); --button-hero-warning-active-right-background-color: var(--color-warning-active); --button-hero-warning-disabled-background-color: var(--color-warning-disabled); --button-hero-warning-disabled-text-color: var(--text-disabled-color); --button-hero-danger-text-color: var(--text-control-color); --button-hero-danger-bevel-color: var(--color-danger-600); --button-hero-danger-glow-color: var(--color-danger-700); --button-hero-danger-left-background-color: var(--color-danger-400); --button-hero-danger-right-background-color: var(--color-danger-default); --button-hero-danger-focus-left-background-color: var(--color-danger-500); --button-hero-danger-focus-right-background-color: var(--color-danger-focus); --button-hero-danger-hover-left-background-color: var(--color-danger-300); --button-hero-danger-hover-right-background-color: var(--color-danger-hover); --button-hero-danger-active-left-background-color: var(--color-danger-500); --button-hero-danger-active-right-background-color: var(--color-danger-active); --button-hero-danger-disabled-background-color: var(--color-danger-disabled); --button-hero-danger-disabled-text-color: var(--text-disabled-color); --button-hero-control-text-color: var(--color-basic-800); --button-hero-control-bevel-color: var(--color-basic-600); --button-hero-control-glow-color: var(--color-basic-700); --button-hero-control-left-background-color: var(--color-control-default); --button-hero-control-right-background-color: var(--color-control-default); --button-hero-control-focus-left-background-color: var(--color-basic-200); --button-hero-control-focus-right-background-color: var(--color-control-focus); --button-hero-control-hover-left-background-color: var(--color-basic-100); --button-hero-control-hover-right-background-color: var(--color-control-hover); --button-hero-control-active-left-background-color: var(--color-basic-200); --button-hero-control-active-right-background-color: var(--color-control-active); --button-hero-control-disabled-background-color: var(--color-basic-transparent-300); --button-hero-control-disabled-text-color: var(--text-disabled-color); --button-group-filled-button-basic-text-color: var(--text-hint-color); --button-group-filled-button-primary-text-color: var(--button-filled-primary-text-color); --button-group-filled-button-success-text-color: var(--button-filled-success-text-color); --button-group-filled-button-info-text-color: var(--button-filled-info-text-color); --button-group-filled-button-warning-text-color: var(--button-filled-warning-text-color); --button-group-filled-button-danger-text-color: var(--button-filled-danger-text-color); --button-group-filled-button-control-text-color: var(--button-filled-control-text-color); --button-group-filled-basic-divider-color: var(--color-basic-focus-border); --button-group-filled-primary-divider-color: var(--color-primary-focus); --button-group-filled-success-divider-color: var(--color-success-focus); --button-group-filled-info-divider-color: var(--color-info-focus); --button-group-filled-warning-divider-color: var(--color-warning-focus); --button-group-filled-danger-divider-color: var(--color-danger-focus); --button-group-filled-control-divider-color: var(--color-control-focus); --button-group-ghost-divider-color: var(--color-basic-focus-border); --icon-button-filled-tiny-padding: 0.4375rem 0.3125rem; --icon-button-filled-small-padding: 0.5625rem 0.4375rem; --icon-button-filled-medium-padding: 0.6875rem 0.5625rem; --icon-button-filled-large-padding: 0.8125rem 0.6875rem; --icon-button-filled-giant-padding: 1.0625rem 0.9375rem; --icon-button-outline-tiny-padding: 0.4375rem 0.3125rem; --icon-button-outline-small-padding: 0.5625rem 0.4375rem; --icon-button-outline-medium-padding: 0.6875rem 0.5625rem; --icon-button-outline-large-padding: 0.8125rem 0.6875rem; --icon-button-outline-giant-padding: 1.0625rem 0.9375rem; --icon-button-ghost-tiny-padding: 0.4375rem 0.3125rem; --icon-button-ghost-small-padding: 0.5625rem 0.4375rem; --icon-button-ghost-medium-padding: 0.6875rem 0.5625rem; --icon-button-ghost-large-padding: 0.8125rem 0.6875rem; --icon-button-ghost-giant-padding: 1.0625rem 0.9375rem; --icon-button-hero-tiny-padding: 0.5rem 0.375rem; --icon-button-hero-small-padding: 0.5625rem 0.5rem; --icon-button-hero-medium-padding: 0.75rem 0.5625rem; --icon-button-hero-large-padding: 0.875rem 0.6875rem; --icon-button-hero-giant-padding: 1.0625rem 1rem; --input-border-style: solid; --input-border-width: 1px; --input-outline-color: var(--outline-color); --input-outline-width: var(--outline-width); --input-placeholder-text-font-family: var(--text-paragraph-font-family); --input-text-font-family: var(--text-subtitle-font-family); --input-basic-text-color: var(--text-basic-color); --input-basic-placeholder-text-color: var(--text-hint-color); --input-basic-background-color: var(--background-basic-color-2); --input-basic-border-color: var(--border-basic-color-4); --input-basic-focus-background-color: var(--background-basic-color-1); --input-basic-focus-border-color: var(--color-primary-default-border); --input-basic-hover-background-color: var(--background-basic-color-3); --input-basic-hover-border-color: var(--border-basic-color-4); --input-basic-focus-and-hover-background-color: var(--input-basic-hover-background-color); --input-basic-focus-and-hover-border-color: var(--input-basic-hover-border-color); --input-basic-disabled-background-color: var(--background-basic-color-2); --input-basic-disabled-border-color: var(--border-basic-color-4); --input-basic-disabled-text-color: var(--text-disabled-color); --input-basic-disabled-placeholder-text-color: var(--text-disabled-color); --input-primary-text-color: var(--text-basic-color); --input-primary-placeholder-text-color: var(--text-hint-color); --input-primary-background-color: var(--background-basic-color-2); --input-primary-border-color: var(--color-primary-default); --input-primary-focus-background-color: var(--background-basic-color-1); --input-primary-focus-border-color: var(--color-primary-focus-border); --input-primary-hover-background-color: var(--background-basic-color-3); --input-primary-hover-border-color: var(--color-primary-hover-border); --input-primary-focus-and-hover-background-color: var(--input-primary-hover-background-color); --input-primary-focus-and-hover-border-color: var(--input-primary-hover-border-color); --input-primary-disabled-background-color: var(--background-basic-color-2); --input-primary-disabled-border-color: var(--border-basic-color-4); --input-primary-disabled-text-color: var(--text-disabled-color); --input-primary-disabled-placeholder-text-color: var(--text-disabled-color); --input-success-text-color: var(--text-basic-color); --input-success-placeholder-text-color: var(--text-hint-color); --input-success-background-color: var(--background-basic-color-2); --input-success-border-color: var(--color-success-default); --input-success-focus-background-color: var(--background-basic-color-1); --input-success-focus-border-color: var(--color-success-focus-border); --input-success-hover-background-color: var(--background-basic-color-3); --input-success-hover-border-color: var(--color-success-hover-border); --input-success-focus-and-hover-background-color: var(--input-success-hover-background-color); --input-success-focus-and-hover-border-color: var(--input-success-hover-border-color); --input-success-disabled-background-color: var(--background-basic-color-2); --input-success-disabled-border-color: var(--border-basic-color-4); --input-success-disabled-text-color: var(--text-disabled-color); --input-success-disabled-placeholder-text-color: var(--text-disabled-color); --input-info-text-color: var(--text-basic-color); --input-info-placeholder-text-color: var(--text-hint-color); --input-info-background-color: var(--background-basic-color-2); --input-info-border-color: var(--color-info-default); --input-info-focus-background-color: var(--background-basic-color-1); --input-info-focus-border-color: var(--color-info-focus-border); --input-info-hover-background-color: var(--background-basic-color-3); --input-info-hover-border-color: var(--color-info-hover-border); --input-info-focus-and-hover-background-color: var(--input-info-hover-background-color); --input-info-focus-and-hover-border-color: var(--input-info-hover-border-color); --input-info-disabled-background-color: var(--background-basic-color-2); --input-info-disabled-border-color: var(--border-basic-color-4); --input-info-disabled-text-color: var(--text-disabled-color); --input-info-disabled-placeholder-text-color: var(--text-disabled-color); --input-warning-text-color: var(--text-basic-color); --input-warning-placeholder-text-color: var(--text-hint-color); --input-warning-background-color: var(--background-basic-color-2); --input-warning-border-color: var(--color-warning-default); --input-warning-focus-background-color: var(--background-basic-color-1); --input-warning-focus-border-color: var(--color-warning-focus-border); --input-warning-hover-background-color: var(--background-basic-color-3); --input-warning-hover-border-color: var(--color-warning-hover-border); --input-warning-focus-and-hover-background-color: var(--input-warning-hover-background-color); --input-warning-focus-and-hover-border-color: var(--input-warning-hover-border-color); --input-warning-disabled-background-color: var(--background-basic-color-2); --input-warning-disabled-border-color: var(--border-basic-color-4); --input-warning-disabled-text-color: var(--text-disabled-color); --input-warning-disabled-placeholder-text-color: var(--text-disabled-color); --input-danger-text-color: var(--text-basic-color); --input-danger-placeholder-text-color: var(--text-hint-color); --input-danger-background-color: var(--background-basic-color-2); --input-danger-border-color: var(--color-danger-default); --input-danger-focus-background-color: var(--background-basic-color-1); --input-danger-focus-border-color: var(--color-danger-focus-border); --input-danger-hover-background-color: var(--background-basic-color-3); --input-danger-hover-border-color: var(--color-danger-hover-border); --input-danger-focus-and-hover-background-color: var(--input-danger-hover-background-color); --input-danger-focus-and-hover-border-color: var(--input-danger-hover-border-color); --input-danger-disabled-background-color: var(--background-basic-color-2); --input-danger-disabled-border-color: var(--border-basic-color-4); --input-danger-disabled-text-color: var(--text-disabled-color); --input-danger-disabled-placeholder-text-color: var(--text-disabled-color); --input-control-text-color: var(--text-control-color); --input-control-placeholder-text-color: var(--text-control-color); --input-control-background-color: var(--color-basic-control-transparent-300); --input-control-border-color: var(--color-basic-control-transparent-500); --input-control-focus-background-color: var(--color-basic-control-transparent-500); --input-control-focus-border-color: var(--color-control-transparent-focus-border); --input-control-hover-background-color: var(--color-basic-control-transparent-400); --input-control-hover-border-color: var(--color-control-transparent-hover-border); --input-control-focus-and-hover-background-color: var(--input-control-hover-background-color); --input-control-focus-and-hover-border-color: var(--input-control-hover-border-color); --input-control-disabled-background-color: var(--color-control-transparent-disabled); --input-control-disabled-border-color: var(--color-control-transparent-disabled-border); --input-control-disabled-text-color: var(--text-control-color); --input-control-disabled-placeholder-text-color: var(--text-control-color); --input-rectangle-border-radius: var(--border-radius); --input-semi-round-border-radius: 0.75rem; --input-round-border-radius: 1.5rem; --input-tiny-text-font-size: var(--text-caption-2-font-size); --input-tiny-text-font-weight: var(--text-caption-2-font-weight); --input-tiny-text-line-height: var(--text-caption-2-line-height); --input-tiny-placeholder-text-font-size: var(--text-paragraph-font-size); --input-tiny-placeholder-text-font-weight: var(--text-paragraph-font-weight); --input-tiny-placeholder-text-line-height: var(--text-paragraph-line-height); --input-tiny-padding: 0.1875rem 1rem; --input-tiny-max-width: 20rem; --input-small-text-font-size: var(--text-subtitle-2-font-size); --input-small-text-font-weight: var(--text-subtitle-2-font-weight); --input-small-text-line-height: var(--text-subtitle-2-line-height); --input-small-placeholder-text-font-size: var(--text-paragraph-font-size); --input-small-placeholder-text-font-weight: var(--text-paragraph-font-weight); --input-small-placeholder-text-line-height: var(--text-paragraph-line-height); --input-small-padding: 0.1875rem 1rem; --input-small-max-width: 20rem; --input-medium-text-font-size: var(--text-subtitle-font-size); --input-medium-text-font-weight: var(--text-subtitle-font-weight); --input-medium-text-line-height: var(--text-subtitle-line-height); --input-medium-placeholder-text-font-size: var(--text-paragraph-font-size); --input-medium-placeholder-text-font-weight: var(--text-paragraph-font-weight); --input-medium-placeholder-text-line-height: var(--text-paragraph-line-height); --input-medium-padding: 0.4375rem 1rem; --input-medium-max-width: 20rem; --input-large-text-font-size: var(--text-subtitle-font-size); --input-large-text-font-weight: var(--text-subtitle-font-weight); --input-large-text-line-height: var(--text-subtitle-line-height); --input-large-placeholder-text-font-size: var(--text-paragraph-font-size); --input-large-placeholder-text-font-weight: var(--text-paragraph-font-weight); --input-large-placeholder-text-line-height: var(--text-paragraph-line-height); --input-large-padding: 0.6875rem 1rem; --input-large-max-width: 30rem; --input-giant-text-font-size: var(--text-heading-6-font-size); --input-giant-text-font-weight: var(--text-heading-6-font-weight); --input-giant-text-line-height: var(--text-heading-6-line-height); --input-giant-placeholder-text-font-size: var(--text-paragraph-font-size); --input-giant-placeholder-text-font-weight: var(--text-paragraph-font-weight); --input-giant-placeholder-text-line-height: var(--text-paragraph-line-height); --input-giant-padding: 0.9375rem 1rem; --input-giant-max-width: 30rem; --checkbox-height: 1.25rem; --checkbox-width: 1.25rem; --checkbox-border-style: solid; --checkbox-border-width: 1px; --checkbox-border-radius: 3px; --checkbox-outline-width: var(--outline-width); --checkbox-outline-color: var(--outline-color); --checkbox-text-font-family: var(--text-subtitle-2-font-family); --checkbox-text-font-size: var(--text-subtitle-2-font-size); --checkbox-text-font-weight: var(--text-subtitle-2-font-weight); --checkbox-text-line-height: var(--text-subtitle-2-line-height); --checkbox-text-space: 0.6875rem; --checkbox-padding: 0; --checkbox-focus-inset-shadow-length: 0 0 0 100vmax; --checkbox-basic-text-color: var(--text-basic-color); --checkbox-basic-background-color: var(--color-basic-transparent-default); --checkbox-basic-border-color: var(--color-basic-transparent-default-border); --checkbox-basic-checked-background-color: var(--color-primary-default); --checkbox-basic-checked-border-color: var(--color-primary-default-border); --checkbox-basic-checked-checkmark-color: var(--text-control-color); --checkbox-basic-indeterminate-background-color: var(--color-primary-default); --checkbox-basic-indeterminate-border-color: var(--color-primary-default-border); --checkbox-basic-indeterminate-checkmark-color: var(--text-control-color); --checkbox-basic-focus-background-color: var(--color-basic-transparent-focus); --checkbox-basic-focus-border-color: var(--color-basic-transparent-focus-border); --checkbox-basic-focus-checked-background-color: var(--color-primary-focus); --checkbox-basic-focus-checked-border-color: var(--color-primary-focus-border); --checkbox-basic-hover-background-color: var(--color-primary-transparent-hover); --checkbox-basic-hover-border-color: var(--color-primary-transparent-hover-border); --checkbox-basic-hover-checked-background-color: var(--color-primary-hover); --checkbox-basic-hover-checked-border-color: var(--color-primary-hover-border); --checkbox-basic-active-background-color: var(--color-basic-transparent-active); --checkbox-basic-active-border-color: var(--color-basic-transparent-active-border); --checkbox-basic-active-checked-background-color: var(--color-primary-active); --checkbox-basic-active-checked-border-color: var(--color-primary-active-border); --checkbox-basic-disabled-background-color: var(--color-basic-transparent-disabled); --checkbox-basic-disabled-border-color: var(--color-basic-transparent-disabled-border); --checkbox-basic-disabled-checkmark-color: var(--text-control-color); --checkbox-basic-disabled-text-color: var(--text-disabled-color); --checkbox-basic-disabled-checked-background-color: var(--color-basic-transparent-600); --checkbox-basic-disabled-checked-border-color: var(--color-basic-transparent-600); --checkbox-primary-text-color: var(--text-basic-color); --checkbox-primary-background-color: var(--color-primary-transparent-default); --checkbox-primary-border-color: var(--color-primary-transparent-default-border); --checkbox-primary-checked-background-color: var(--color-primary-default); --checkbox-primary-checked-border-color: var(--color-primary-default-border); --checkbox-primary-checked-checkmark-color: var(--text-control-color); --checkbox-primary-indeterminate-background-color: var(--color-primary-default); --checkbox-primary-indeterminate-border-color: var(--color-primary-default-border); --checkbox-primary-indeterminate-checkmark-color: var(--text-control-color); --checkbox-primary-focus-background-color: var(--color-primary-transparent-focus); --checkbox-primary-focus-border-color: var(--color-primary-transparent-focus-border); --checkbox-primary-focus-checked-background-color: var(--color-primary-focus); --checkbox-primary-focus-checked-border-color: var(--color-primary-focus-border); --checkbox-primary-hover-background-color: var(--color-primary-transparent-hover); --checkbox-primary-hover-border-color: var(--color-primary-transparent-hover-border); --checkbox-primary-hover-checked-background-color: var(--color-primary-hover); --checkbox-primary-hover-checked-border-color: var(--color-primary-hover-border); --checkbox-primary-active-background-color: var(--color-primary-transparent-active); --checkbox-primary-active-border-color: var(--color-primary-transparent-active-border); --checkbox-primary-active-checked-background-color: var(--color-primary-active); --checkbox-primary-active-checked-border-color: var(--color-primary-active-border); --checkbox-primary-disabled-background-color: var(--color-basic-transparent-disabled); --checkbox-primary-disabled-border-color: var(--color-basic-transparent-disabled-border); --checkbox-primary-disabled-checkmark-color: var(--text-control-color); --checkbox-primary-disabled-text-color: var(--text-disabled-color); --checkbox-primary-disabled-checked-background-color: var(--color-basic-transparent-600); --checkbox-primary-disabled-checked-border-color: var(--color-basic-transparent-600); --checkbox-success-text-color: var(--text-basic-color); --checkbox-success-background-color: var(--color-success-transparent-default); --checkbox-success-border-color: var(--color-success-transparent-default-border); --checkbox-success-checked-background-color: var(--color-success-default); --checkbox-success-checked-border-color: var(--color-success-default-border); --checkbox-success-checked-checkmark-color: var(--text-control-color); --checkbox-success-indeterminate-background-color: var(--color-success-default); --checkbox-success-indeterminate-border-color: var(--color-success-default-border); --checkbox-success-indeterminate-checkmark-color: var(--text-control-color); --checkbox-success-focus-background-color: var(--color-success-transparent-focus); --checkbox-success-focus-border-color: var(--color-success-transparent-focus-border); --checkbox-success-focus-checked-background-color: var(--color-success-focus); --checkbox-success-focus-checked-border-color: var(--color-success-focus-border); --checkbox-success-hover-background-color: var(--color-success-transparent-hover); --checkbox-success-hover-border-color: var(--color-success-transparent-hover-border); --checkbox-success-hover-checked-background-color: var(--color-success-hover); --checkbox-success-hover-checked-border-color: var(--color-success-hover-border); --checkbox-success-active-background-color: var(--color-success-transparent-active); --checkbox-success-active-border-color: var(--color-success-transparent-active-border); --checkbox-success-active-checked-background-color: var(--color-success-active); --checkbox-success-active-checked-border-color: var(--color-success-active-border); --checkbox-success-disabled-background-color: var(--color-basic-transparent-disabled); --checkbox-success-disabled-border-color: var(--color-basic-transparent-disabled-border); --checkbox-success-disabled-checkmark-color: var(--text-control-color); --checkbox-success-disabled-text-color: var(--text-disabled-color); --checkbox-success-disabled-checked-background-color: var(--color-basic-transparent-600); --checkbox-success-disabled-checked-border-color: var(--color-basic-transparent-600); --checkbox-info-text-color: var(--text-basic-color); --checkbox-info-background-color: var(--color-info-transparent-default); --checkbox-info-border-color: var(--color-info-transparent-default-border); --checkbox-info-checked-background-color: var(--color-info-default); --checkbox-info-checked-border-color: var(--color-info-default-border); --checkbox-info-checked-checkmark-color: var(--text-control-color); --checkbox-info-indeterminate-background-color: var(--color-info-default); --checkbox-info-indeterminate-border-color: var(--color-info-default-border); --checkbox-info-indeterminate-checkmark-color: var(--text-control-color); --checkbox-info-focus-background-color: var(--color-info-transparent-focus); --checkbox-info-focus-border-color: var(--color-info-transparent-focus-border); --checkbox-info-focus-checked-background-color: var(--color-info-focus); --checkbox-info-focus-checked-border-color: var(--color-info-focus-border); --checkbox-info-hover-background-color: var(--color-info-transparent-hover); --checkbox-info-hover-border-color: var(--color-info-transparent-hover-border); --checkbox-info-hover-checked-background-color: var(--color-info-hover); --checkbox-info-hover-checked-border-color: var(--color-info-hover-border); --checkbox-info-active-background-color: var(--color-info-transparent-active); --checkbox-info-active-border-color: var(--color-info-transparent-active-border); --checkbox-info-active-checked-background-color: var(--color-info-active); --checkbox-info-active-checked-border-color: var(--color-info-active-border); --checkbox-info-disabled-background-color: var(--color-basic-transparent-disabled); --checkbox-info-disabled-border-color: var(--color-basic-transparent-disabled-border); --checkbox-info-disabled-checkmark-color: var(--text-control-color); --checkbox-info-disabled-text-color: var(--text-disabled-color); --checkbox-info-disabled-checked-background-color: var(--color-basic-transparent-600); --checkbox-info-disabled-checked-border-color: var(--color-basic-transparent-600); --checkbox-warning-text-color: var(--text-basic-color); --checkbox-warning-background-color: var(--color-warning-transparent-default); --checkbox-warning-border-color: var(--color-warning-transparent-default-border); --checkbox-warning-checked-background-color: var(--color-warning-default); --checkbox-warning-checked-border-color: var(--color-warning-default-border); --checkbox-warning-checked-checkmark-color: var(--text-control-color); --checkbox-warning-indeterminate-background-color: var(--color-warning-default); --checkbox-warning-indeterminate-border-color: var(--color-warning-default-border); --checkbox-warning-indeterminate-checkmark-color: var(--text-control-color); --checkbox-warning-focus-background-color: var(--color-warning-transparent-focus); --checkbox-warning-focus-border-color: var(--color-warning-transparent-focus-border); --checkbox-warning-focus-checked-background-color: var(--color-warning-focus); --checkbox-warning-focus-checked-border-color: var(--color-warning-focus-border); --checkbox-warning-hover-background-color: var(--color-warning-transparent-hover); --checkbox-warning-hover-border-color: var(--color-warning-transparent-hover-border); --checkbox-warning-hover-checked-background-color: var(--color-warning-hover); --checkbox-warning-hover-checked-border-color: var(--color-warning-hover-border); --checkbox-warning-active-background-color: var(--color-warning-transparent-active); --checkbox-warning-active-border-color: var(--color-warning-transparent-active-border); --checkbox-warning-active-checked-background-color: var(--color-warning-active); --checkbox-warning-active-checked-border-color: var(--color-warning-active-border); --checkbox-warning-disabled-background-color: var(--color-basic-transparent-disabled); --checkbox-warning-disabled-border-color: var(--color-basic-transparent-disabled-border); --checkbox-warning-disabled-checkmark-color: var(--text-control-color); --checkbox-warning-disabled-text-color: var(--text-disabled-color); --checkbox-warning-disabled-checked-background-color: var(--color-basic-transparent-600); --checkbox-warning-disabled-checked-border-color: var(--color-basic-transparent-600); --checkbox-danger-text-color: var(--text-basic-color); --checkbox-danger-background-color: var(--color-danger-transparent-default); --checkbox-danger-border-color: var(--color-danger-transparent-default-border); --checkbox-danger-checked-background-color: var(--color-danger-default); --checkbox-danger-checked-border-color: var(--color-danger-default-border); --checkbox-danger-checked-checkmark-color: var(--text-control-color); --checkbox-danger-indeterminate-background-color: var(--color-danger-default); --checkbox-danger-indeterminate-border-color: var(--color-danger-default-border); --checkbox-danger-indeterminate-checkmark-color: var(--text-control-color); --checkbox-danger-focus-background-color: var(--color-danger-transparent-focus); --checkbox-danger-focus-border-color: var(--color-danger-transparent-focus-border); --checkbox-danger-focus-checked-background-color: var(--color-danger-focus); --checkbox-danger-focus-checked-border-color: var(--color-danger-focus-border); --checkbox-danger-hover-background-color: var(--color-danger-transparent-hover); --checkbox-danger-hover-border-color: var(--color-danger-transparent-hover-border); --checkbox-danger-hover-checked-background-color: var(--color-danger-hover); --checkbox-danger-hover-checked-border-color: var(--color-danger-hover-border); --checkbox-danger-active-background-color: var(--color-danger-transparent-active); --checkbox-danger-active-border-color: var(--color-danger-transparent-active-border); --checkbox-danger-active-checked-background-color: var(--color-danger-active); --checkbox-danger-active-checked-border-color: var(--color-danger-active-border); --checkbox-danger-disabled-background-color: var(--color-basic-transparent-disabled); --checkbox-danger-disabled-border-color: var(--color-basic-transparent-disabled-border); --checkbox-danger-disabled-checkmark-color: var(--text-control-color); --checkbox-danger-disabled-text-color: var(--text-disabled-color); --checkbox-danger-disabled-checked-background-color: var(--color-basic-transparent-600); --checkbox-danger-disabled-checked-border-color: var(--color-basic-transparent-600); --checkbox-control-text-color: var(--text-control-color); --checkbox-control-background-color: var(--color-control-transparent-default); --checkbox-control-border-color: var(--color-control-transparent-default-border); --checkbox-control-checked-background-color: var(--color-control-default); --checkbox-control-checked-border-color: var(--color-control-default-border); --checkbox-control-checked-checkmark-color: var(--color-basic-800); --checkbox-control-indeterminate-background-color: var(--color-control-default); --checkbox-control-indeterminate-border-color: var(--color-control-default-border); --checkbox-control-indeterminate-checkmark-color: var(--color-basic-800); --checkbox-control-focus-background-color: var(--color-control-transparent-focus); --checkbox-control-focus-border-color: var(--color-control-transparent-focus-border); --checkbox-control-focus-checked-background-color: var(--color-control-focus); --checkbox-control-focus-checked-border-color: var(--color-control-focus-border); --checkbox-control-hover-background-color: var(--color-control-transparent-hover); --checkbox-control-hover-border-color: var(--color-control-transparent-hover-border); --checkbox-control-hover-checked-background-color: var(--color-control-hover); --checkbox-control-hover-checked-border-color: var(--color-control-hover-border); --checkbox-control-active-background-color: var(--color-control-transparent-active); --checkbox-control-active-border-color: var(--color-control-transparent-active-border); --checkbox-control-active-checked-background-color: var(--color-control-active); --checkbox-control-active-checked-border-color: var(--color-control-active-border); --checkbox-control-disabled-background-color: var(--color-control-transparent-disabled); --checkbox-control-disabled-border-color: var(--color-control-transparent-disabled-border); --checkbox-control-disabled-checkmark-color: var(--text-control-color); --checkbox-control-disabled-text-color: var(--text-control-color); --checkbox-control-disabled-checked-background-color: var(--color-basic-transparent-600); --checkbox-control-disabled-checked-border-color: var(--color-basic-transparent-600); --badge-dot-mode-border-radius: 0.5rem; --badge-dot-mode-padding: 0.3rem; --badge-border-radius: var(--border-radius); --badge-text-font-family: var(--text-button-font-family); --badge-text-font-size: var(--text-button-tiny-font-size); --badge-text-font-weight: var(--text-button-font-weight); --badge-text-line-height: var(--text-button-tiny-line-height); --badge-padding: 0.25rem 0.4rem; --badge-basic-background-color: var(--background-basic-color-2); --badge-basic-text-color: var(--text-basic-color); --badge-primary-background-color: var(--color-primary-default); --badge-primary-text-color: var(--text-control-color); --badge-success-background-color: var(--color-success-default); --badge-success-text-color: var(--text-control-color); --badge-info-background-color: var(--color-info-default); --badge-info-text-color: var(--text-control-color); --badge-warning-background-color: var(--color-warning-default); --badge-warning-text-color: var(--text-control-color); --badge-danger-background-color: var(--color-danger-default); --badge-danger-text-color: var(--text-control-color); --badge-control-background-color: var(--color-control-default); --badge-control-text-color: var(--color-basic-800); --progress-bar-animation-duration: 400ms; --progress-bar-border-radius: var(--border-radius); --progress-bar-text-font-family: var(--text-subtitle-font-family); --progress-bar-tiny-height: 1rem; --progress-bar-tiny-text-font-size: var(--text-subtitle-2-font-size); --progress-bar-tiny-text-font-weight: var(--text-subtitle-2-font-weight); --progress-bar-tiny-text-line-height: var(--text-subtitle-2-line-height); --progress-bar-small-height: 1.25rem; --progress-bar-small-text-font-size: var(--text-subtitle-2-font-size); --progress-bar-small-text-font-weight: var(--text-subtitle-2-font-weight); --progress-bar-small-text-line-height: var(--text-subtitle-2-line-height); --progress-bar-medium-height: 1.375rem; --progress-bar-medium-text-font-size: var(--text-subtitle-font-size); --progress-bar-medium-text-font-weight: var(--text-subtitle-font-weight); --progress-bar-medium-text-line-height: var(--text-subtitle-line-height); --progress-bar-large-height: 1.5rem; --progress-bar-large-text-font-size: var(--text-subtitle-font-size); --progress-bar-large-text-font-weight: var(--text-subtitle-font-weight); --progress-bar-large-text-line-height: var(--text-subtitle-line-height); --progress-bar-giant-height: 1.75rem; --progress-bar-giant-text-font-size: var(--text-subtitle-font-size); --progress-bar-giant-text-font-weight: var(--text-subtitle-font-weight); --progress-bar-giant-text-line-height: var(--text-subtitle-line-height); --progress-bar-basic-background-color: var(--background-basic-color-2); --progress-bar-basic-filled-background-color: var(--background-basic-color-4); --progress-bar-basic-text-color: var(--text-basic-color); --progress-bar-primary-background-color: var(--background-basic-color-3); --progress-bar-primary-filled-background-color: var(--color-primary-default); --progress-bar-primary-text-color: var(--text-control-color); --progress-bar-success-background-color: var(--background-basic-color-3); --progress-bar-success-filled-background-color: var(--color-success-default); --progress-bar-success-text-color: var(--text-control-color); --progress-bar-info-background-color: var(--background-basic-color-3); --progress-bar-info-filled-background-color: var(--color-info-default); --progress-bar-info-text-color: var(--text-control-color); --progress-bar-warning-background-color: var(--background-basic-color-3); --progress-bar-warning-filled-background-color: var(--color-warning-default); --progress-bar-warning-text-color: var(--text-control-color); --progress-bar-danger-background-color: var(--background-basic-color-3); --progress-bar-danger-filled-background-color: var(--color-danger-default); --progress-bar-danger-text-color: var(--text-control-color); --progress-bar-control-background-color: var(--background-basic-color-3); --progress-bar-control-filled-background-color: var(--color-control-default); --progress-bar-control-text-color: var(--color-basic-800); --alert-border-radius: var(--border-radius); --alert-bottom-margin: 1.5rem; --alert-padding: 1rem 1.125rem; --alert-scrollbar-color: var(--scrollbar-color); --alert-scrollbar-background-color: var(--scrollbar-background-color); --alert-scrollbar-width: var(--scrollbar-width); --alert-shadow: none; --alert-text-font-family: var(--text-paragraph-font-family); --alert-text-font-size: var(--text-subtitle-font-size); --alert-text-font-weight: var(--text-subtitle-font-weight); --alert-text-line-height: var(--text-subtitle-line-height); --alert-closable-start-padding: 3rem; --alert-tiny-height: 4.5rem; --alert-small-height: 5.75rem; --alert-medium-height: 7rem; --alert-medium-padding: 1rem 1.125rem; --alert-large-height: 8.25rem; --alert-giant-height: 9.5rem; --alert-basic-background-color: var(--background-basic-color-2); --alert-basic-text-color: var(--text-basic-color); --alert-primary-background-color: var(--color-primary-default); --alert-primary-text-color: var(--text-control-color); --alert-success-background-color: var(--color-success-default); --alert-success-text-color: var(--text-control-color); --alert-info-background-color: var(--color-info-default); --alert-info-text-color: var(--text-control-color); --alert-warning-background-color: var(--color-warning-default); --alert-warning-text-color: var(--text-control-color); --alert-danger-background-color: var(--color-danger-default); --alert-danger-text-color: var(--text-control-color); --alert-control-background-color: var(--color-control-default); --alert-control-text-color: var(--color-basic-800); --alert-accent-basic-color: var(--border-basic-color-3); --alert-accent-primary-color: var(--color-primary-default); --alert-accent-info-color: var(--color-info-default); --alert-accent-success-color: var(--color-success-default); --alert-accent-warning-color: var(--color-warning-default); --alert-accent-danger-color: var(--color-danger-default); --alert-accent-control-color: var(--color-control-default); --alert-outline-width: 1px; --alert-outline-basic-color: var(--color-basic-focus-border); --alert-outline-primary-color: var(--color-primary-focus-border); --alert-outline-info-color: var(--color-info-focus-border); --alert-outline-success-color: var(--color-success-focus-border); --alert-outline-warning-color: var(--color-warning-focus-border); --alert-outline-danger-color: var(--color-danger-focus-border); --alert-outline-control-color: var(--color-control-focus-border); --chat-background-color: var(--background-basic-color-1); --chat-border: none; --chat-border-radius: var(--border-radius); --chat-shadow: var(--shadow); --chat-padding: 1rem 1.25rem; --chat-scrollbar-color: var(--scrollbar-color); --chat-scrollbar-background-color: var(--scrollbar-background-color); --chat-scrollbar-width: var(--scrollbar-width); --chat-text-color: var(--text-basic-color); --chat-text-font-family: var(--text-paragraph-font-family); --chat-text-font-size: var(--text-paragraph-font-size); --chat-text-font-weight: var(--text-paragraph-font-weight); --chat-text-line-height: var(--text-paragraph-line-height); --chat-header-text-font-family: var(--text-subtitle-font-family); --chat-header-text-font-size: var(--text-subtitle-font-size); --chat-header-text-font-weight: var(--text-subtitle-font-weight); --chat-header-text-line-height: var(--text-subtitle-line-height); --chat-tiny-height: 13.5rem; --chat-small-height: 21rem; --chat-medium-height: 28.5rem; --chat-large-height: 36rem; --chat-giant-height: 43.5rem; --chat-basic-background-color: var(--background-basic-color-1); --chat-basic-text-color: var(--text-basic-color); --chat-primary-background-color: var(--color-primary-default); --chat-primary-text-color: var(--text-control-color); --chat-success-background-color: var(--color-success-default); --chat-success-text-color: var(--text-control-color); --chat-info-background-color: var(--color-info-default); --chat-info-text-color: var(--text-control-color); --chat-warning-background-color: var(--color-warning-default); --chat-warning-text-color: var(--text-control-color); --chat-danger-background-color: var(--color-danger-default); --chat-danger-text-color: var(--text-control-color); --chat-control-background-color: var(--color-control-default); --chat-control-text-color: var(--color-basic-800); --chat-divider-color: var(--divider-color); --chat-divider-style: var(--divider-style); --chat-divider-width: var(--divider-width); --chat-message-background: var(--color-primary-default); --chat-message-text-color: var(--text-control-color); --chat-message-reply-background-color: var(--background-basic-color-2); --chat-message-reply-text-color: var(--text-basic-color); --chat-message-avatar-background-color: var(--color-basic-500); --chat-message-sender-text-color: var(--text-hint-color); --chat-message-quote-background-color: var(--background-basic-color-2); --chat-message-quote-text-color: var(--text-hint-color); --chat-message-file-text-color: var(--text-hint-color); --chat-message-file-background-color: transparent; --spinner-text-color: var(--text-basic-color); --spinner-text-font-family: var(--text-button-font-family); --spinner-text-font-size: var(--text-button-medium-font-size); --spinner-text-font-weight: var(--text-button-font-weight); --spinner-text-line-height: var(--text-button-medium-line-height); --spinner-basic-background-color: var(--color-basic-transparent-200); --spinner-basic-circle-filled-color: var(--text-hint-color); --spinner-basic-circle-empty-color: transparent; --spinner-primary-background-color: var(--color-basic-transparent-200); --spinner-primary-circle-filled-color: var(--color-primary-default); --spinner-primary-circle-empty-color: transparent; --spinner-info-background-color: var(--color-basic-transparent-200); --spinner-info-circle-filled-color: var(--color-info-default); --spinner-info-circle-empty-color: transparent; --spinner-success-background-color: var(--color-basic-transparent-200); --spinner-success-circle-filled-color: var(--color-success-default); --spinner-success-circle-empty-color: transparent; --spinner-warning-background-color: var(--color-basic-transparent-200); --spinner-warning-circle-filled-color: var(--color-warning-default); --spinner-warning-circle-empty-color: transparent; --spinner-danger-background-color: var(--color-basic-transparent-200); --spinner-danger-circle-filled-color: var(--color-danger-default); --spinner-danger-circle-empty-color: transparent; --spinner-control-background-color: var(--color-basic-control-transparent-200); --spinner-control-circle-filled-color: var(--color-control-default); --spinner-control-circle-empty-color: transparent; --spinner-height-tiny: 1rem; --spinner-height-small: 1.25rem; --spinner-height-medium: 1.5rem; --spinner-height-large: 1.75rem; --spinner-height-giant: 2rem; --stepper-step-text-color: var(--text-hint-color); --stepper-step-text-font-family: var(--text-paragraph-font-family); --stepper-step-text-font-size: var(--text-paragraph-font-size); --stepper-step-text-font-weight: var(--text-paragraph-font-weight); --stepper-step-text-line-height: var(--text-paragraph-line-height); --stepper-step-active-text-color: var(--text-primary-active-color); --stepper-step-completed-text-color: var(--text-primary-color); --stepper-step-index-border-color: var(--border-basic-color-4); --stepper-step-index-border-style: solid; --stepper-step-index-border-width: 1px; --stepper-step-index-border-radius: 50%; --stepper-step-index-width: 2rem; --stepper-step-index-active-border-color: var(--color-primary-active); --stepper-step-index-completed-background-color: var(--color-primary-default); --stepper-step-index-completed-border-color: var(--color-primary-default); --stepper-step-index-completed-text-color: var(--text-control-color); --stepper-connector-background-color: var(--background-basic-color-3); --stepper-connector-completed-background-color: var(--color-primary-default); --stepper-horizontal-connector-margin: 1rem; --stepper-vertical-connector-margin: 1rem; --stepper-step-content-padding: 1.25rem; --accordion-border-radius: var(--border-radius); --accordion-padding: 1.25rem; --accordion-shadow: var(--shadow); --accordion-header-text-color: var(--text-basic-color); --accordion-header-text-font-family: var(--text-subtitle-font-family); --accordion-header-text-font-size: var(--text-subtitle-font-size); --accordion-header-text-font-weight: var(--text-subtitle-font-weight); --accordion-header-text-line-height: var(--text-subtitle-line-height); --accordion-header-disabled-text-color: var(--text-disabled-color); --accordion-header-border-color: var(--border-basic-color-3); --accordion-header-border-style: solid; --accordion-header-border-width: 1px; --accordion-item-background-color: var(--background-basic-color-1); --accordion-item-text-color: var(--text-basic-color); --accordion-item-text-font-family: var(--text-paragraph-font-family); --accordion-item-text-font-size: var(--text-paragraph-font-size); --accordion-item-text-font-weight: var(--text-paragraph-font-weight); --accordion-item-text-line-height: var(--text-paragraph-line-height); --list-item-divider-color: var(--divider-color); --list-item-divider-style: var(--divider-style); --list-item-divider-width: var(--divider-width); --list-item-padding: 1rem; --list-item-text-color: var(--text-basic-color); --list-item-font-family: var(--text-paragraph-font-family); --list-item-font-size: var(--text-paragraph-font-size); --list-item-font-weight: var(--text-paragraph-font-weight); --list-item-line-height: var(--text-paragraph-line-height); --calendar-width: 20.625rem; --calendar-background-color: var(--background-basic-color-1); --calendar-border-color: var(--border-basic-color-4); --calendar-border-style: solid; --calendar-border-width: 0.0625rem; --calendar-border-radius: var(--border-radius); --calendar-text-color: var(--text-basic-color); --calendar-text-font-family: var(--text-subtitle-font-family); --calendar-text-font-size: var(--text-subtitle-font-size); --calendar-text-font-weight: var(--text-subtitle-font-weight); --calendar-text-line-height: var(--text-subtitle-line-height); --calendar-picker-padding-top: 0.25rem; --calendar-picker-padding-bottom: 0.625rem; --calendar-picker-padding-start: 0.625rem; --calendar-picker-padding-end: 0.625rem; --calendar-navigation-text-color: var(--text-basic-color); --calendar-navigation-text-font-family: var(--text-button-font-family); --calendar-navigation-title-text-font-size: var(--text-button-medium-font-size); --calendar-navigation-title-text-font-weight: var(--text-button-font-weight); --calendar-navigation-title-text-line-height: var(--text-button-medium-line-height); --calendar-navigation-padding: 0.625rem 0.25rem; --calendar-cell-inactive-text-color: var(--text-hint-color); --calendar-cell-disabled-text-color: var(--text-disabled-color); --calendar-cell-hover-background-color: var(--background-basic-color-2); --calendar-cell-hover-border-color: var(--background-basic-color-2); --calendar-cell-hover-text-color: var(--text-basic-color); --calendar-cell-hover-text-font-size: var(--calendar-text-font-size); --calendar-cell-hover-text-font-weight: var(--calendar-text-font-weight); --calendar-cell-hover-text-line-height: var(--calendar-text-line-height); --calendar-cell-active-background-color: var(--color-primary-active); --calendar-cell-active-border-color: var(--color-primary-active-border); --calendar-cell-active-text-color: var(--text-control-color); --calendar-cell-active-text-font-size: var(--calendar-text-font-size); --calendar-cell-active-text-font-weight: var(--calendar-text-font-weight); --calendar-cell-active-text-line-height: var(--calendar-text-line-height); --calendar-cell-today-background-color: var(--color-primary-transparent-default); --calendar-cell-today-border-color: var(--color-primary-transparent-default-border); --calendar-cell-today-text-color: var(--text-basic-color); --calendar-cell-today-text-font-size: var(--calendar-text-font-size); --calendar-cell-today-text-font-weight: var(--calendar-text-font-weight); --calendar-cell-today-text-line-height: var(--calendar-text-line-height); --calendar-cell-today-hover-background-color: var(--color-primary-transparent-hover); --calendar-cell-today-hover-border-color: var(--color-primary-transparent-hover-border); --calendar-cell-today-active-background-color: var(--color-primary-transparent-active); --calendar-cell-today-active-border-color: var(--color-primary-transparent-active-border); --calendar-cell-today-disabled-border-color: var(--border-basic-color-4); --calendar-cell-today-selected-background-color: var(--color-control-transparent-default); --calendar-cell-today-selected-border-color: transparent; --calendar-cell-today-selected-text-color: var(--text-control-color); --calendar-cell-today-selected-hover-background-color: var(--color-control-transparent-hover); --calendar-cell-today-selected-hover-border-color: transparent; --calendar-cell-today-selected-active-background-color: var(--color-control-transparent-active); --calendar-cell-today-selected-active-border-color: transparent; --calendar-cell-today-in-range-background-color: var(--color-control-transparent-default); --calendar-cell-today-in-range-border-color: transparent; --calendar-cell-today-in-range-text-color: var(--text-control-color); --calendar-cell-today-in-range-hover-background-color: var(--color-control-transparent-hover); --calendar-cell-today-in-range-hover-border-color: transparent; --calendar-cell-today-in-range-active-background-color: var(--color-control-transparent-active); --calendar-cell-today-in-range-active-border-color: transparent; --calendar-cell-selected-background-color: var(--color-primary-default); --calendar-cell-selected-border-color: var(--color-primary-default-border); --calendar-cell-selected-text-color: var(--text-control-color); --calendar-cell-selected-text-font-size: var(--calendar-text-font-size); --calendar-cell-selected-text-font-weight: var(--calendar-text-font-weight); --calendar-cell-selected-text-line-height: var(--calendar-text-line-height); --calendar-cell-selected-hover-background-color: var(--color-primary-hover); --calendar-cell-selected-hover-border-color: var(--color-primary-hover-border); --calendar-cell-selected-active-background-color: var(--color-primary-active); --calendar-cell-selected-active-border-color: var(--color-primary-active-border); --calendar-day-cell-width: 2.75rem; --calendar-day-cell-height: 2.75rem; --calendar-month-cell-width: 4.8125rem; --calendar-month-cell-height: var(--calendar-day-cell-height); --calendar-year-cell-width: var(--calendar-month-cell-width); --calendar-year-cell-height: var(--calendar-month-cell-height); --calendar-weekday-background: transparent; --calendar-weekday-divider-color: var(--divider-color); --calendar-weekday-divider-width: var(--divider-width); --calendar-weekday-text-color: var(--text-hint-color); --calendar-weekday-text-font-size: var(--text-subtitle-font-size); --calendar-weekday-text-font-weight: var(--text-subtitle-font-weight); --calendar-weekday-text-line-height: var(--text-subtitle-line-height); --calendar-weekday-holiday-text-color: var(--calendar-weekday-text-color); --calendar-weekday-height: var(--calendar-day-cell-height); --calendar-weekday-width: var(--calendar-day-cell-width); --calendar-weeknumber-background: transparent; --calendar-weeknumber-divider-color: var(--divider-color); --calendar-weeknumber-divider-width: var(--divider-width); --calendar-weeknumber-text-color: var(--text-hint-color); --calendar-weeknumber-text-font-size: var(--text-subtitle-font-size); --calendar-weeknumber-text-font-weight: var(--text-subtitle-font-weight); --calendar-weeknumber-text-line-height: var(--text-subtitle-line-height); --calendar-weeknumber-height: var(--calendar-weekday-height); --calendar-weeknumber-width: var(--calendar-weekday-width); --calendar-large-width: 22.375rem; --calendar-day-cell-large-width: 3rem; --calendar-day-cell-large-height: 3rem; --calendar-weekday-large-height: var(--calendar-day-cell-large-width); --calendar-weekday-large-width: var(--calendar-day-cell-large-height); --calendar-weeknumber-large-height: var(--calendar-weekday-large-height); --calendar-weeknumber-large-width: var(--calendar-weekday-large-width); --calendar-month-cell-large-width: 5.25rem; --calendar-month-cell-large-height: var(--calendar-day-cell-large-height); --calendar-year-cell-large-width: var(--calendar-month-cell-large-width); --calendar-year-cell-large-height: var(--calendar-month-cell-large-height); --overlay-backdrop-background-color: rgba(0, 0, 0, 0.35); --tooltip-background-color: var(--background-alternative-color-3); --tooltip-border-color: transparent; --tooltip-border-style: dashed; --tooltip-border-width: 0; --tooltip-border-radius: var(--border-radius); --tooltip-padding: 0.5rem 1rem; --tooltip-text-color: var(--text-alternate-color); --tooltip-text-font-family: var(--text-caption-font-family); --tooltip-text-font-size: var(--text-caption-font-size); --tooltip-text-font-weight: var(--text-caption-font-weight); --tooltip-text-line-height: var(--text-caption-line-height); --tooltip-icon-height: 1rem; --tooltip-icon-width: 1rem; --tooltip-max-width: 16rem; --tooltip-basic-background-color: var(--background-basic-color-3); --tooltip-basic-border-color: transparent; --tooltip-basic-text-color: var(--text-basic-color); --tooltip-primary-background-color: var(--color-primary-default); --tooltip-primary-border-color: transparent; --tooltip-primary-text-color: var(--text-control-color); --tooltip-info-background-color: var(--color-info-default); --tooltip-info-border-color: transparent; --tooltip-info-text-color: var(--text-control-color); --tooltip-success-background-color: var(--color-success-default); --tooltip-success-border-color: transparent; --tooltip-success-text-color: var(--text-control-color); --tooltip-warning-background-color: var(--color-warning-default); --tooltip-warning-border-color: transparent; --tooltip-warning-text-color: var(--text-control-color); --tooltip-danger-background-color: var(--color-danger-default); --tooltip-danger-border-color: transparent; --tooltip-danger-text-color: var(--text-control-color); --tooltip-control-background-color: var(--color-control-default); --tooltip-control-border-color: transparent; --tooltip-control-text-color: var(--color-basic-800); --tooltip-shadow: var(--shadow); --option-list-max-height: 20rem; --option-list-shadow: none; --option-list-background-color: var(--background-basic-color-1); --option-list-border-style: solid; --option-list-border-width: 0.0625rem; --option-list-border-color: var(--border-basic-color-4); --option-list-border-radius: var(--border-radius); --option-list-adjacent-border-color: var(--option-list-border-color); --option-list-adjacent-border-style: var(--option-list-border-style); --option-list-adjacent-border-width: var(--option-list-border-width); --option-group-text-color: var(--text-hint-color); --option-group-tiny-start-padding: 1.25rem; --option-group-small-start-padding: 1.75rem; --option-group-medium-start-padding: 2.25rem; --option-group-large-start-padding: 2.25rem; --option-group-giant-start-padding: 2.75rem; --option-background-color: var(--background-basic-color-1); --option-text-color: var(--text-basic-color); --option-text-font-family: var(--text-subtitle-font-family); --option-hover-background-color: var(--color-basic-transparent-hover); --option-hover-text-color: var(--text-basic-color); --option-active-background-color: var(--color-basic-transparent-active); --option-active-text-color: var(--text-basic-color); --option-focus-background-color: var(--color-basic-transparent-focus); --option-focus-text-color: var(--text-basic-color); --option-selected-background-color: var(--color-primary-default); --option-selected-text-color: var(--text-control-color); --option-selected-hover-background-color: var(--color-primary-hover); --option-selected-hover-text-color: var(--text-control-color); --option-selected-active-background-color: var(--color-primary-active); --option-selected-active-text-color: var(--text-control-color); --option-selected-focus-background-color: var(--color-primary-focus); --option-selected-focus-text-color: var(--text-control-color); --option-disabled-background-color: var(--background-basic-color-1); --option-disabled-text-color: var(--text-disabled-color); --option-tiny-text-font-size: var(--text-caption-2-font-size); --option-tiny-text-font-weight: var(--text-caption-2-font-weight); --option-tiny-text-line-height: var(--text-caption-2-line-height); --option-tiny-padding: var(--select-outline-tiny-padding); --option-small-text-font-size: var(--text-subtitle-2-font-size); --option-small-text-font-weight: var(--text-subtitle-2-font-weight); --option-small-text-line-height: var(--text-subtitle-2-line-height); --option-small-padding: var(--select-outline-small-padding); --option-medium-text-font-size: var(--text-subtitle-font-size); --option-medium-text-font-weight: var(--text-subtitle-font-weight); --option-medium-text-line-height: var(--text-subtitle-line-height); --option-medium-padding: var(--select-outline-medium-padding); --option-large-text-font-size: var(--text-subtitle-font-size); --option-large-text-font-weight: var(--text-subtitle-font-weight); --option-large-text-line-height: var(--text-subtitle-line-height); --option-large-padding: var(--select-outline-large-padding); --option-giant-text-font-size: var(--text-heading-6-font-size); --option-giant-text-font-weight: var(--text-heading-6-font-weight); --option-giant-text-line-height: var(--text-heading-6-line-height); --option-giant-padding: var(--select-outline-giant-padding); --select-cursor: pointer; --select-disabled-cursor: default; --select-min-width: 13rem; --select-outline-width: var(--outline-width); --select-outline-color: var(--outline-color); --select-icon-offset: 2rem; --select-text-font-family: var(--text-subtitle-font-family); --select-placeholder-text-font-family: var(--text-paragraph-font-family); --select-tiny-text-font-size: var(--text-caption-2-font-size); --select-tiny-text-font-weight: var(--text-caption-2-font-weight); --select-tiny-text-line-height: var(--text-caption-2-line-height); --select-tiny-placeholder-text-font-size: var(--text-paragraph-font-size); --select-tiny-placeholder-text-font-weight: var(--text-paragraph-font-weight); --select-tiny-max-width: 20rem; --select-small-text-font-size: var(--text-subtitle-2-font-size); --select-small-text-font-weight: var(--text-subtitle-2-font-weight); --select-small-text-line-height: var(--text-subtitle-2-line-height); --select-small-placeholder-text-font-size: var(--text-paragraph-font-size); --select-small-placeholder-text-font-weight: var(--text-paragraph-font-weight); --select-small-max-width: 20rem; --select-medium-text-font-size: var(--text-subtitle-font-size); --select-medium-text-font-weight: var(--text-subtitle-font-weight); --select-medium-text-line-height: var(--text-subtitle-line-height); --select-medium-placeholder-text-font-size: var(--text-paragraph-font-size); --select-medium-placeholder-text-font-weight: var(--text-paragraph-font-weight); --select-medium-max-width: 20rem; --select-large-text-font-size: var(--text-subtitle-font-size); --select-large-text-font-weight: var(--text-subtitle-font-weight); --select-large-text-line-height: var(--text-subtitle-line-height); --select-large-placeholder-text-font-size: var(--text-paragraph-font-size); --select-large-placeholder-text-font-weight: var(--text-paragraph-font-weight); --select-large-max-width: 30rem; --select-giant-text-font-size: var(--text-heading-6-font-size); --select-giant-text-font-weight: var(--text-heading-6-font-weight); --select-giant-text-line-height: var(--text-heading-6-line-height); --select-giant-placeholder-text-font-size: var(--text-paragraph-font-size); --select-giant-placeholder-text-font-weight: var(--text-paragraph-font-weight); --select-giant-max-width: 30rem; --select-rectangle-border-radius: var(--border-radius); --select-semi-round-border-radius: 0.75rem; --select-round-border-radius: 1.5rem; --select-outline-border-style: solid; --select-outline-border-width: 1px; --select-outline-tiny-padding: 0.1875rem 1rem; --select-outline-small-padding: 0.1875rem 1rem; --select-outline-medium-padding: 0.4375rem 1rem; --select-outline-large-padding: 0.6875rem 1rem; --select-outline-giant-padding: 0.9375rem 1rem; --select-outline-basic-icon-color: var(--text-hint-color); --select-outline-basic-text-color: var(--text-basic-color); --select-outline-basic-placeholder-text-color: var(--text-hint-color); --select-outline-basic-background-color: var(--background-basic-color-2); --select-outline-basic-border-color: var(--border-basic-color-4); --select-outline-basic-focus-background-color: var(--background-basic-color-1); --select-outline-basic-focus-border-color: var(--color-primary-default); --select-outline-basic-hover-background-color: var(--background-basic-color-3); --select-outline-basic-hover-border-color: var(--border-basic-color-4); --select-outline-basic-focus-and-hover-background-color: var(--select-outline-basic-hover-background-color); --select-outline-basic-focus-and-hover-border-color: var(--select-outline-basic-hover-border-color); --select-outline-basic-disabled-background-color: var(--background-basic-color-2); --select-outline-basic-disabled-border-color: var(--border-basic-color-4); --select-outline-basic-disabled-icon-color: var(--text-disabled-color); --select-outline-basic-disabled-text-color: var(--text-disabled-color); --select-outline-primary-icon-color: var(--text-hint-color); --select-outline-primary-text-color: var(--text-basic-color); --select-outline-primary-placeholder-text-color: var(--text-hint-color); --select-outline-primary-background-color: var(--background-basic-color-2); --select-outline-primary-border-color: var(--color-primary-default); --select-outline-primary-focus-background-color: var(--background-basic-color-1); --select-outline-primary-focus-border-color: var(--color-primary-focus); --select-outline-primary-hover-background-color: var(--background-basic-color-3); --select-outline-primary-hover-border-color: var(--color-primary-hover); --select-outline-primary-focus-and-hover-background-color: var(--select-outline-primary-hover-background-color); --select-outline-primary-focus-and-hover-border-color: var(--select-outline-primary-hover-border-color); --select-outline-primary-disabled-background-color: var(--background-basic-color-2); --select-outline-primary-disabled-border-color: var(--border-basic-color-4); --select-outline-primary-disabled-icon-color: var(--text-disabled-color); --select-outline-primary-disabled-text-color: var(--text-disabled-color); --select-outline-success-icon-color: var(--text-hint-color); --select-outline-success-text-color: var(--text-basic-color); --select-outline-success-placeholder-text-color: var(--text-hint-color); --select-outline-success-background-color: var(--background-basic-color-2); --select-outline-success-border-color: var(--color-success-default); --select-outline-success-focus-background-color: var(--background-basic-color-1); --select-outline-success-focus-border-color: var(--color-success-focus); --select-outline-success-focus-and-hover-background-color: var(--select-outline-success-hover-background-color); --select-outline-success-focus-and-hover-border-color: var(--select-outline-success-hover-border-color); --select-outline-success-hover-background-color: var(--background-basic-color-3); --select-outline-success-hover-border-color: var(--color-success-hover); --select-outline-success-disabled-background-color: var(--background-basic-color-2); --select-outline-success-disabled-border-color: var(--border-basic-color-4); --select-outline-success-disabled-icon-color: var(--text-disabled-color); --select-outline-success-disabled-text-color: var(--text-disabled-color); --select-outline-info-icon-color: var(--text-hint-color); --select-outline-info-text-color: var(--text-basic-color); --select-outline-info-placeholder-text-color: var(--text-hint-color); --select-outline-info-background-color: var(--background-basic-color-2); --select-outline-info-border-color: var(--color-info-default); --select-outline-info-focus-background-color: var(--background-basic-color-1); --select-outline-info-focus-border-color: var(--color-info-focus); --select-outline-info-hover-background-color: var(--background-basic-color-3); --select-outline-info-hover-border-color: var(--color-info-hover); --select-outline-info-focus-and-hover-background-color: var(--select-outline-info-hover-background-color); --select-outline-info-focus-and-hover-border-color: var(--select-outline-info-hover-border-color); --select-outline-info-disabled-background-color: var(--background-basic-color-2); --select-outline-info-disabled-border-color: var(--border-basic-color-4); --select-outline-info-disabled-icon-color: var(--text-disabled-color); --select-outline-info-disabled-text-color: var(--text-disabled-color); --select-outline-warning-icon-color: var(--text-hint-color); --select-outline-warning-text-color: var(--text-basic-color); --select-outline-warning-placeholder-text-color: var(--text-hint-color); --select-outline-warning-background-color: var(--background-basic-color-2); --select-outline-warning-border-color: var(--color-warning-default); --select-outline-warning-focus-background-color: var(--background-basic-color-1); --select-outline-warning-focus-border-color: var(--color-warning-focus); --select-outline-warning-hover-background-color: var(--background-basic-color-3); --select-outline-warning-hover-border-color: var(--color-warning-hover); --select-outline-warning-focus-and-hover-background-color: var(--select-outline-warning-hover-background-color); --select-outline-warning-focus-and-hover-border-color: var(--select-outline-warning-hover-border-color); --select-outline-warning-disabled-background-color: var(--background-basic-color-2); --select-outline-warning-disabled-border-color: var(--border-basic-color-4); --select-outline-warning-disabled-icon-color: var(--text-disabled-color); --select-outline-warning-disabled-text-color: var(--text-disabled-color); --select-outline-danger-icon-color: var(--text-hint-color); --select-outline-danger-text-color: var(--text-basic-color); --select-outline-danger-placeholder-text-color: var(--text-hint-color); --select-outline-danger-background-color: var(--background-basic-color-2); --select-outline-danger-border-color: var(--color-danger-default); --select-outline-danger-focus-background-color: var(--background-basic-color-1); --select-outline-danger-focus-border-color: var(--color-danger-focus); --select-outline-danger-hover-background-color: var(--background-basic-color-3); --select-outline-danger-hover-border-color: var(--color-danger-hover); --select-outline-danger-focus-and-hover-background-color: var(--select-outline-danger-hover-background-color); --select-outline-danger-focus-and-hover-border-color: var(--select-outline-danger-hover-border-color); --select-outline-danger-disabled-background-color: var(--background-basic-color-2); --select-outline-danger-disabled-border-color: var(--border-basic-color-4); --select-outline-danger-disabled-icon-color: var(--text-disabled-color); --select-outline-danger-disabled-text-color: var(--text-disabled-color); --select-outline-control-icon-color: var(--color-basic-100); --select-outline-control-text-color: var(--color-basic-100); --select-outline-control-placeholder-text-color: var(--color-basic-100); --select-outline-control-background-color: var(--color-basic-control-transparent-300); --select-outline-control-border-color: var(--color-basic-control-transparent-500); --select-outline-control-focus-background-color: var(--color-basic-control-transparent-500); --select-outline-control-focus-border-color: var(--color-control-transparent-focus-border); --select-outline-control-hover-background-color: var(--color-basic-control-transparent-400); --select-outline-control-hover-border-color: var(--color-control-transparent-hover-border); --select-outline-control-focus-and-hover-background-color: var(--select-outline-control-hover-background-color); --select-outline-control-focus-and-hover-border-color: var(--select-outline-control-hover-border-color); --select-outline-control-disabled-background-color: var(--color-control-transparent-disabled); --select-outline-control-disabled-border-color: var(--color-basic-control-transparent-500); --select-outline-control-disabled-icon-color: var(--color-basic-100); --select-outline-control-disabled-text-color: var(--color-basic-100); --select-outline-adjacent-border-style: var(--select-outline-border-style); --select-outline-adjacent-border-width: var(--select-outline-border-width); --select-outline-basic-open-border-color: var(--select-outline-basic-border-color); --select-outline-basic-adjacent-border-color: var(--select-outline-basic-border-color); --select-outline-primary-open-border-color: var(--select-outline-primary-border-color); --select-outline-primary-adjacent-border-color: var(--select-outline-primary-border-color); --select-outline-success-open-border-color: var(--select-outline-success-border-color); --select-outline-success-adjacent-border-color: var(--select-outline-success-border-color); --select-outline-info-open-border-color: var(--select-outline-info-border-color); --select-outline-info-adjacent-border-color: var(--select-outline-info-border-color); --select-outline-warning-open-border-color: var(--select-outline-warning-border-color); --select-outline-warning-adjacent-border-color: var(--select-outline-warning-border-color); --select-outline-danger-open-border-color: var(--select-outline-danger-border-color); --select-outline-danger-adjacent-border-color: var(--select-outline-danger-border-color); --select-outline-control-open-border-color: var(--select-outline-control-border-color); --select-outline-control-adjacent-border-color: var(--select-outline-control-border-color); --select-filled-border-style: solid; --select-filled-border-width: 1px; --select-filled-tiny-padding: 0.1875rem 1rem; --select-filled-small-padding: 0.1875rem 1rem; --select-filled-medium-padding: 0.4375rem 1rem; --select-filled-large-padding: 0.6875rem 1rem; --select-filled-giant-padding: 0.9375rem 1rem; --select-filled-basic-background-color: var(--color-basic-default); --select-filled-basic-border-color: var(--color-basic-default-border); --select-filled-basic-icon-color: var(--color-basic-800); --select-filled-basic-text-color: var(--color-basic-800); --select-filled-basic-placeholder-text-color: var(--text-hint-color); --select-filled-basic-focus-background-color: var(--color-basic-focus); --select-filled-basic-focus-border-color: var(--color-basic-focus-border); --select-filled-basic-hover-background-color: var(--color-basic-hover); --select-filled-basic-hover-border-color: var(--color-basic-hover-border); --select-filled-basic-focus-and-hover-background-color: var(--select-filled-basic-hover-background-color); --select-filled-basic-focus-and-hover-border-color: var(--select-filled-basic-hover-border-color); --select-filled-basic-disabled-background-color: var(--background-basic-color-2); --select-filled-basic-disabled-border-color: var(--border-basic-color-2); --select-filled-basic-disabled-icon-color: var(--text-disabled-color); --select-filled-basic-disabled-text-color: var(--text-disabled-color); --select-filled-primary-background-color: var(--color-primary-default); --select-filled-primary-border-color: var(--color-primary-default-border); --select-filled-primary-icon-color: var(--text-control-color); --select-filled-primary-text-color: var(--text-control-color); --select-filled-primary-placeholder-text-color: var(--text-control-color); --select-filled-primary-focus-background-color: var(--color-primary-focus); --select-filled-primary-focus-border-color: var(--color-primary-focus-border); --select-filled-primary-hover-background-color: var(--color-primary-hover); --select-filled-primary-hover-border-color: var(--color-primary-hover-border); --select-filled-primary-focus-and-hover-background-color: var(--select-filled-primary-hover-background-color); --select-filled-primary-focus-and-hover-border-color: var(--select-filled-primary-hover-border-color); --select-filled-primary-disabled-background-color: var(--background-basic-color-2); --select-filled-primary-disabled-border-color: var(--border-basic-color-2); --select-filled-primary-disabled-icon-color: var(--text-disabled-color); --select-filled-primary-disabled-text-color: var(--text-disabled-color); --select-filled-success-background-color: var(--color-success-default); --select-filled-success-border-color: var(--color-success-default-border); --select-filled-success-icon-color: var(--text-control-color); --select-filled-success-text-color: var(--text-control-color); --select-filled-success-placeholder-text-color: var(--text-control-color); --select-filled-success-focus-background-color: var(--color-success-focus); --select-filled-success-focus-border-color: var(--color-success-focus-border); --select-filled-success-hover-background-color: var(--color-success-hover); --select-filled-success-hover-border-color: var(--color-success-hover-border); --select-filled-success-focus-and-hover-background-color: var(--select-filled-success-hover-background-color); --select-filled-success-focus-and-hover-border-color: var(--select-filled-success-hover-border-color); --select-filled-success-disabled-background-color: var(--background-basic-color-2); --select-filled-success-disabled-border-color: var(--border-basic-color-2); --select-filled-success-disabled-icon-color: var(--text-disabled-color); --select-filled-success-disabled-text-color: var(--text-disabled-color); --select-filled-info-background-color: var(--color-info-default); --select-filled-info-border-color: var(--color-info-default-border); --select-filled-info-icon-color: var(--text-control-color); --select-filled-info-text-color: var(--text-control-color); --select-filled-info-placeholder-text-color: var(--text-control-color); --select-filled-info-focus-background-color: var(--color-info-focus); --select-filled-info-focus-border-color: var(--color-info-focus-border); --select-filled-info-hover-background-color: var(--color-info-hover); --select-filled-info-hover-border-color: var(--color-info-hover-border); --select-filled-info-focus-and-hover-background-color: var(--select-filled-info-hover-background-color); --select-filled-info-focus-and-hover-border-color: var(--select-filled-info-hover-border-color); --select-filled-info-disabled-background-color: var(--background-basic-color-2); --select-filled-info-disabled-border-color: var(--border-basic-color-2); --select-filled-info-disabled-icon-color: var(--text-disabled-color); --select-filled-info-disabled-text-color: var(--text-disabled-color); --select-filled-warning-background-color: var(--color-warning-default); --select-filled-warning-border-color: var(--color-warning-default-border); --select-filled-warning-icon-color: var(--text-control-color); --select-filled-warning-text-color: var(--text-control-color); --select-filled-warning-placeholder-text-color: var(--text-control-color); --select-filled-warning-focus-background-color: var(--color-warning-focus); --select-filled-warning-focus-border-color: var(--color-warning-focus-border); --select-filled-warning-hover-background-color: var(--color-warning-hover); --select-filled-warning-hover-border-color: var(--color-warning-hover-border); --select-filled-warning-focus-and-hover-background-color: var(--select-filled-warning-hover-background-color); --select-filled-warning-focus-and-hover-border-color: var(--select-filled-warning-hover-border-color); --select-filled-warning-disabled-background-color: var(--background-basic-color-2); --select-filled-warning-disabled-border-color: var(--border-basic-color-2); --select-filled-warning-disabled-icon-color: var(--text-disabled-color); --select-filled-warning-disabled-text-color: var(--text-disabled-color); --select-filled-danger-background-color: var(--color-danger-default); --select-filled-danger-border-color: var(--color-danger-default-border); --select-filled-danger-icon-color: var(--text-control-color); --select-filled-danger-text-color: var(--text-control-color); --select-filled-danger-placeholder-text-color: var(--text-control-color); --select-filled-danger-focus-background-color: var(--color-danger-focus); --select-filled-danger-focus-border-color: var(--color-danger-focus-border); --select-filled-danger-hover-background-color: var(--color-danger-hover); --select-filled-danger-hover-border-color: var(--color-danger-hover-border); --select-filled-danger-focus-and-hover-background-color: var(--select-filled-danger-hover-background-color); --select-filled-danger-focus-and-hover-border-color: var(--select-filled-danger-hover-border-color); --select-filled-danger-disabled-background-color: var(--background-basic-color-2); --select-filled-danger-disabled-border-color: var(--border-basic-color-2); --select-filled-danger-disabled-icon-color: var(--text-disabled-color); --select-filled-danger-disabled-text-color: var(--text-disabled-color); --select-filled-control-background-color: var(--color-control-default); --select-filled-control-border-color: var(--color-control-default-border); --select-filled-control-icon-color: var(--color-basic-800); --select-filled-control-text-color: var(--color-basic-800); --select-filled-control-placeholder-text-color: var(--text-hint-color); --select-filled-control-focus-background-color: var(--color-control-focus); --select-filled-control-focus-border-color: var(--color-control-focus-border); --select-filled-control-hover-background-color: var(--color-control-hover); --select-filled-control-hover-border-color: var(--color-control-hover-border); --select-filled-control-focus-and-hover-background-color: var(--select-filled-control-hover-background-color); --select-filled-control-focus-and-hover-border-color: var(--select-filled-control-hover-border-color); --select-filled-control-disabled-background-color: var(--background-basic-color-2); --select-filled-control-disabled-border-color: var(--border-basic-color-2); --select-filled-control-disabled-icon-color: var(--text-disabled-color); --select-filled-control-disabled-text-color: var(--text-disabled-color); --select-hero-tiny-padding: 0.25rem 1rem; --select-hero-small-padding: 0.25rem 1rem; --select-hero-medium-padding: 0.5rem 1rem; --select-hero-large-padding: 0.75rem 1rem; --select-hero-giant-padding: 1rem 1rem; --select-hero-basic-left-background-color: var(--color-basic-200); --select-hero-basic-right-background-color: var(--color-basic-default); --select-hero-basic-icon-color: var(--color-basic-800); --select-hero-basic-text-color: var(--color-basic-800); --select-hero-basic-placeholder-text-color: var(--text-hint-color); --select-hero-basic-focus-left-background-color: var(--color-basic-300); --select-hero-basic-focus-right-background-color: var(--color-basic-400); --select-hero-basic-hover-left-background-color: var(--color-basic-100); --select-hero-basic-hover-right-background-color: var(--color-basic-hover); --select-hero-basic-focus-and-hover-left-background-color: var(--select-hero-basic-hover-left-background-color); --select-hero-basic-focus-and-hover-right-background-color: var(--select-hero-basic-hover-right-background-color); --select-hero-basic-disabled-background-color: var(--background-basic-color-2); --select-hero-basic-disabled-icon-color: var(--text-disabled-color); --select-hero-basic-disabled-text-color: var(--text-disabled-color); --select-hero-primary-left-background-color: var(--color-primary-400); --select-hero-primary-right-background-color: var(--color-primary-default); --select-hero-primary-icon-color: var(--text-control-color); --select-hero-primary-text-color: var(--text-control-color); --select-hero-primary-placeholder-text-color: var(--text-control-color); --select-hero-primary-focus-left-background-color: var(--color-primary-500); --select-hero-primary-focus-right-background-color: var(--color-primary-focus); --select-hero-primary-hover-left-background-color: var(--color-primary-300); --select-hero-primary-hover-right-background-color: var(--color-primary-hover); --select-hero-primary-focus-and-hover-left-background-color: var(--select-hero-primary-hover-left-background-color); --select-hero-primary-focus-and-hover-right-background-color: var(--select-hero-primary-hover-right-background-color); --select-hero-primary-disabled-background-color: var(--background-basic-color-2); --select-hero-primary-disabled-icon-color: var(--text-disabled-color); --select-hero-primary-disabled-text-color: var(--text-disabled-color); --select-hero-success-left-background-color: var(--color-success-400); --select-hero-success-right-background-color: var(--color-success-default); --select-hero-success-icon-color: var(--text-control-color); --select-hero-success-text-color: var(--text-control-color); --select-hero-success-placeholder-text-color: var(--text-control-color); --select-hero-success-focus-left-background-color: var(--color-success-500); --select-hero-success-focus-right-background-color: var(--color-success-focus); --select-hero-success-hover-left-background-color: var(--color-success-300); --select-hero-success-hover-right-background-color: var(--color-success-hover); --select-hero-success-focus-and-hover-left-background-color: var(--select-hero-success-hover-left-background-color); --select-hero-success-focus-and-hover-right-background-color: var(--select-hero-success-hover-right-background-color); --select-hero-success-disabled-background-color: var(--background-basic-color-2); --select-hero-success-disabled-icon-color: var(--text-disabled-color); --select-hero-success-disabled-text-color: var(--text-disabled-color); --select-hero-info-left-background-color: var(--color-info-400); --select-hero-info-right-background-color: var(--color-info-default); --select-hero-info-icon-color: var(--text-control-color); --select-hero-info-text-color: var(--text-control-color); --select-hero-info-placeholder-text-color: var(--text-control-color); --select-hero-info-focus-left-background-color: var(--color-info-500); --select-hero-info-focus-right-background-color: var(--color-info-focus); --select-hero-info-hover-left-background-color: var(--color-info-300); --select-hero-info-hover-right-background-color: var(--color-info-hover); --select-hero-info-focus-and-hover-left-background-color: var(--select-hero-info-hover-left-background-color); --select-hero-info-focus-and-hover-right-background-color: var(--select-hero-info-hover-right-background-color); --select-hero-info-disabled-background-color: var(--background-basic-color-2); --select-hero-info-disabled-icon-color: var(--text-disabled-color); --select-hero-info-disabled-text-color: var(--text-disabled-color); --select-hero-warning-left-background-color: var(--color-warning-400); --select-hero-warning-right-background-color: var(--color-warning-default); --select-hero-warning-icon-color: var(--text-control-color); --select-hero-warning-text-color: var(--text-control-color); --select-hero-warning-placeholder-text-color: var(--text-control-color); --select-hero-warning-focus-left-background-color: var(--color-warning-500); --select-hero-warning-focus-right-background-color: var(--color-warning-focus); --select-hero-warning-hover-left-background-color: var(--color-warning-300); --select-hero-warning-hover-right-background-color: var(--color-warning-hover); --select-hero-warning-focus-and-hover-left-background-color: var(--select-hero-warning-hover-left-background-color); --select-hero-warning-focus-and-hover-right-background-color: var(--select-hero-warning-hover-right-background-color); --select-hero-warning-disabled-background-color: var(--background-basic-color-2); --select-hero-warning-disabled-icon-color: var(--text-disabled-color); --select-hero-warning-disabled-text-color: var(--text-disabled-color); --select-hero-danger-left-background-color: var(--color-danger-400); --select-hero-danger-right-background-color: var(--color-danger-default); --select-hero-danger-icon-color: var(--text-control-color); --select-hero-danger-text-color: var(--text-control-color); --select-hero-danger-placeholder-text-color: var(--text-control-color); --select-hero-danger-focus-left-background-color: var(--color-danger-500); --select-hero-danger-focus-right-background-color: var(--color-danger-focus); --select-hero-danger-hover-left-background-color: var(--color-danger-300); --select-hero-danger-hover-right-background-color: var(--color-danger-hover); --select-hero-danger-focus-and-hover-left-background-color: var(--select-hero-danger-hover-left-background-color); --select-hero-danger-focus-and-hover-right-background-color: var(--select-hero-danger-hover-right-background-color); --select-hero-danger-disabled-background-color: var(--background-basic-color-2); --select-hero-danger-disabled-icon-color: var(--text-disabled-color); --select-hero-danger-disabled-text-color: var(--text-disabled-color); --select-hero-control-left-background-color: var(--color-control-default); --select-hero-control-right-background-color: var(--color-control-default); --select-hero-control-icon-color: var(--color-basic-800); --select-hero-control-text-color: var(--color-basic-800); --select-hero-control-placeholder-text-color: var(--text-hint-color); --select-hero-control-focus-left-background-color: var(--color-basic-200); --select-hero-control-focus-right-background-color: var(--color-control-focus); --select-hero-control-hover-left-background-color: var(--color-basic-100); --select-hero-control-hover-right-background-color: var(--color-control-hover); --select-hero-control-focus-and-hover-left-background-color: var(--select-hero-control-hover-left-background-color); --select-hero-control-focus-and-hover-right-background-color: var(--select-hero-control-hover-right-background-color); --select-hero-control-disabled-background-color: var(--background-basic-color-2); --select-hero-control-disabled-icon-color: var(--text-disabled-color); --select-hero-control-disabled-text-color: var(--text-disabled-color); --datepicker-background-color: var(--background-basic-color-1); --datepicker-border-color: var(--border-basic-color-4); --datepicker-border-style: solid; --datepicker-border-width: 0.0625rem; --datepicker-border-radius: var(--border-radius); --datepicker-shadow: none; --timepicker-cell-text-color: var(--text-basic-color); --timepicker-cell-hover-background-color: var(--background-basic-color-2); --timepicker-cell-hover-text-color: var(--text-basic-color); --timepicker-cell-focus-background-color: var(--color-basic-focus); --timepicker-cell-focus-text-color: var(--text-basic-color); --timepicker-cell-active-background-color: var(--color-primary-default); --timepicker-cell-active-text-color: var(--text-control-color); --timepicker-cell-text-font-size: var(--text-subtitle-font-size); --timepicker-cell-text-font-family: var(--text-subtitle-font-family); --timepicker-cell-text-line-height: var(--text-subtitle-line-height); --timepicker-cell-text-font-weight: var(--text-subtitle-font-weight); --timepicker-cell-height: 2.75rem; --timepicker-header-cell-text-color: var(--text-hint-color); --timepicker-header-cell-text-font-size: var(--text-subtitle-font-size); --timepicker-header-cell-text-font-family: var(--text-subtitle-font-family); --timepicker-header-cell-height: 2.75rem; --timepicker-header-cell-text-line-height: var(--text-subtitle-line-height); --timepicker-header-cell-text-font-weight: var(--text-subtitle-font-weight); --timepicker-border-color: var(--datepicker-border-color); --timepicker-border-style: var(--datepicker-border-style); --timepicker-border-width: var(--datepicker-border-width); --timepicker-scrollbar-color: var(--scrollbar-color); --timepicker-scrollbar-background-color: var(--scrollbar-background-color); --timepicker-scrollbar-width: var(--scrollbar-width); --timepicker-single-column-width: 5rem; --timepicker-multiple-column-width: 13.875rem; --timepicker-title-height: 3.75rem; --timepicker-title-padding: var(--text-paragraph-line-height); --timepicker-container-width: 20rem; --timepicker-container-height: 26.1875rem; --radio-width: 1.25rem; --radio-height: 1.25rem; --radio-border-style: solid; --radio-border-width: 1px; --radio-text-font-family: var(--text-subtitle-2-font-family); --radio-text-font-size: var(--text-subtitle-2-font-size); --radio-text-font-weight: var(--text-subtitle-2-font-weight); --radio-text-line-height: var(--text-subtitle-2-line-height); --radio-outline-color: var(--outline-color); --radio-outline-width: var(--outline-width); --radio-basic-text-color: var(--text-basic-color); --radio-basic-border-color: var(--color-basic-transparent-default-border); --radio-basic-background-color: var(--color-basic-transparent-default); --radio-basic-checked-background-color: transparent; --radio-basic-checked-border-color: var(--color-primary-default-border); --radio-basic-inner-circle-color: var(--color-primary-default); --radio-basic-focus-border-color: var(--color-primary-transparent-focus-border); --radio-basic-focus-background-color: var(--color-primary-transparent-focus); --radio-basic-focus-checked-background-color: transparent; --radio-basic-focus-checked-border-color: var(--color-primary-focus-border); --radio-basic-focus-inner-circle-color: var(--color-primary-focus); --radio-basic-hover-background-color: var(--color-primary-transparent-hover); --radio-basic-hover-border-color: var(--color-primary-transparent-hover-border); --radio-basic-hover-inner-circle-color: var(--color-primary-hover); --radio-basic-hover-checked-background-color: transparent; --radio-basic-hover-checked-border-color: var(--color-primary-hover-border); --radio-basic-active-background-color: var(--color-primary-transparent-active); --radio-basic-active-border-color: var(--color-primary-transparent-active-border); --radio-basic-active-inner-circle-color: var(--color-primary-active); --radio-basic-active-checked-background-color: transparent; --radio-basic-active-checked-border-color: var(--color-primary-active-border); --radio-basic-disabled-background-color: var(--color-basic-transparent-disabled); --radio-basic-disabled-border-color: var(--color-basic-transparent-disabled-border); --radio-basic-disabled-text-color: var(--text-disabled-color); --radio-basic-disabled-checked-background-color: transparent; --radio-basic-disabled-checked-border-color: var(--color-basic-transparent-600); --radio-basic-disabled-checked-inner-circle-color: var(--color-basic-transparent-600); --radio-primary-text-color: var(--text-basic-color); --radio-primary-border-color: var(--color-primary-transparent-default-border); --radio-primary-background-color: var(--color-primary-transparent-default); --radio-primary-checked-background-color: transparent; --radio-primary-checked-border-color: var(--color-primary-default-border); --radio-primary-inner-circle-color: var(--color-primary-default); --radio-primary-focus-border-color: var(--color-primary-transparent-focus-border); --radio-primary-focus-background-color: var(--color-primary-transparent-focus); --radio-primary-focus-checked-background-color: transparent; --radio-primary-focus-checked-border-color: var(--color-primary-focus-border); --radio-primary-focus-inner-circle-color: var(--color-primary-focus); --radio-primary-hover-background-color: var(--color-primary-transparent-hover); --radio-primary-hover-border-color: var(--color-primary-transparent-hover-border); --radio-primary-hover-inner-circle-color: var(--color-primary-hover); --radio-primary-hover-checked-background-color: transparent; --radio-primary-hover-checked-border-color: var(--color-primary-hover-border); --radio-primary-active-border-color: var(--color-primary-transparent-active-border); --radio-primary-active-background-color: var(--color-primary-transparent-active); --radio-primary-active-checked-background-color: transparent; --radio-primary-active-checked-border-color: var(--color-primary-active-border); --radio-primary-active-inner-circle-color: var(--color-primary-active); --radio-primary-disabled-background-color: var(--color-basic-transparent-disabled); --radio-primary-disabled-border-color: var(--color-basic-transparent-disabled-border); --radio-primary-disabled-text-color: var(--text-disabled-color); --radio-primary-disabled-checked-background-color: transparent; --radio-primary-disabled-checked-border-color: var(--color-basic-transparent-600); --radio-primary-disabled-checked-inner-circle-color: var(--color-basic-transparent-600); --radio-success-text-color: var(--text-basic-color); --radio-success-border-color: var(--color-success-transparent-default-border); --radio-success-background-color: var(--color-success-transparent-default); --radio-success-checked-background-color: transparent; --radio-success-checked-border-color: var(--color-success-default-border); --radio-success-inner-circle-color: var(--color-success-default); --radio-success-focus-border-color: var(--color-success-transparent-focus-border); --radio-success-focus-background-color: var(--color-success-transparent-focus); --radio-success-focus-checked-background-color: transparent; --radio-success-focus-checked-border-color: var(--color-success-focus-border); --radio-success-focus-inner-circle-color: var(--color-success-focus); --radio-success-hover-background-color: var(--color-success-transparent-hover); --radio-success-hover-border-color: var(--color-success-transparent-hover-border); --radio-success-hover-inner-circle-color: var(--color-success-hover); --radio-success-hover-checked-background-color: transparent; --radio-success-hover-checked-border-color: var(--color-success-hover-border); --radio-success-active-background-color: var(--color-success-transparent-active); --radio-success-active-border-color: var(--color-success-transparent-active-border); --radio-success-active-checked-background-color: transparent; --radio-success-active-checked-border-color: var(--color-success-active-border); --radio-success-active-inner-circle-color: var(--color-success-active); --radio-success-disabled-background-color: var(--color-basic-transparent-disabled); --radio-success-disabled-border-color: var(--color-basic-transparent-disabled-border); --radio-success-disabled-text-color: var(--text-disabled-color); --radio-success-disabled-checked-background-color: transparent; --radio-success-disabled-checked-border-color: var(--color-basic-transparent-600); --radio-success-disabled-checked-inner-circle-color: var(--color-basic-transparent-600); --radio-info-text-color: var(--text-basic-color); --radio-info-border-color: var(--color-info-transparent-default-border); --radio-info-background-color: var(--color-info-transparent-default); --radio-info-checked-background-color: transparent; --radio-info-checked-border-color: var(--color-info-default-border); --radio-info-inner-circle-color: var(--color-info-default); --radio-info-focus-background-color: var(--color-info-transparent-focus); --radio-info-focus-border-color: var(--color-info-transparent-focus-border); --radio-info-focus-checked-background-color: transparent; --radio-info-focus-checked-border-color: var(--color-info-focus-border); --radio-info-focus-inner-circle-color: var(--color-info-focus); --radio-info-hover-background-color: var(--color-info-transparent-hover); --radio-info-hover-border-color: var(--color-info-transparent-hover-border); --radio-info-hover-inner-circle-color: var(--color-info-hover); --radio-info-hover-checked-background-color: transparent; --radio-info-hover-checked-border-color: var(--color-info-hover-border); --radio-info-active-background-color: var(--color-info-transparent-active); --radio-info-active-border-color: var(--color-info-transparent-active-border); --radio-info-active-checked-background-color: transparent; --radio-info-active-checked-border-color: var(--color-info-active-border); --radio-info-active-inner-circle-color: var(--color-info-active); --radio-info-disabled-background-color: var(--color-basic-transparent-disabled); --radio-info-disabled-border-color: var(--color-basic-transparent-disabled-border); --radio-info-disabled-text-color: var(--text-disabled-color); --radio-info-disabled-checked-background-color: transparent; --radio-info-disabled-checked-border-color: var(--color-basic-transparent-600); --radio-info-disabled-checked-inner-circle-color: var(--color-basic-transparent-600); --radio-warning-text-color: var(--text-basic-color); --radio-warning-border-color: var(--color-warning-transparent-default-border); --radio-warning-background-color: var(--color-warning-transparent-default); --radio-warning-checked-background-color: transparent; --radio-warning-checked-border-color: var(--color-warning-default-border); --radio-warning-inner-circle-color: var(--color-warning-default); --radio-warning-focus-background-color: var(--color-warning-transparent-focus); --radio-warning-focus-border-color: var(--color-warning-transparent-focus-border); --radio-warning-focus-checked-background-color: transparent; --radio-warning-focus-checked-border-color: var(--color-warning-focus-border); --radio-warning-focus-inner-circle-color: var(--color-warning-focus); --radio-warning-hover-background-color: var(--color-warning-transparent-hover); --radio-warning-hover-border-color: var(--color-warning-transparent-hover-border); --radio-warning-hover-inner-circle-color: var(--color-warning-hover); --radio-warning-hover-checked-background-color: transparent; --radio-warning-hover-checked-border-color: var(--color-warning-hover-border); --radio-warning-active-background-color: var(--color-warning-transparent-active); --radio-warning-active-border-color: var(--color-warning-transparent-active-border); --radio-warning-active-checked-background-color: transparent; --radio-warning-active-checked-border-color: var(--color-warning-active-border); --radio-warning-active-inner-circle-color: var(--color-warning-active); --radio-warning-disabled-background-color: var(--color-basic-transparent-disabled); --radio-warning-disabled-border-color: var(--color-basic-transparent-disabled-border); --radio-warning-disabled-text-color: var(--text-disabled-color); --radio-warning-disabled-checked-background-color: transparent; --radio-warning-disabled-checked-border-color: var(--color-basic-transparent-600); --radio-warning-disabled-checked-inner-circle-color: var(--color-basic-transparent-600); --radio-danger-text-color: var(--text-basic-color); --radio-danger-border-color: var(--color-danger-transparent-default-border); --radio-danger-background-color: var(--color-danger-transparent-default); --radio-danger-checked-background-color: transparent; --radio-danger-checked-border-color: var(--color-danger-default-border); --radio-danger-inner-circle-color: var(--color-danger-default); --radio-danger-focus-background-color: var(--color-danger-transparent-focus); --radio-danger-focus-border-color: var(--color-danger-transparent-focus-border); --radio-danger-focus-checked-background-color: transparent; --radio-danger-focus-checked-border-color: var(--color-danger-focus-border); --radio-danger-focus-inner-circle-color: var(--color-danger-focus); --radio-danger-hover-background-color: var(--color-danger-transparent-hover); --radio-danger-hover-border-color: var(--color-danger-transparent-hover-border); --radio-danger-hover-inner-circle-color: var(--color-danger-hover); --radio-danger-hover-checked-background-color: transparent; --radio-danger-hover-checked-border-color: var(--color-danger-hover-border); --radio-danger-active-background-color: var(--color-danger-transparent-active); --radio-danger-active-border-color: var(--color-danger-transparent-active-border); --radio-danger-active-checked-background-color: transparent; --radio-danger-active-checked-border-color: var(--color-danger-active-border); --radio-danger-active-inner-circle-color: var(--color-danger-active); --radio-danger-disabled-background-color: var(--color-basic-transparent-disabled); --radio-danger-disabled-border-color: var(--color-basic-transparent-disabled-border); --radio-danger-disabled-text-color: var(--text-disabled-color); --radio-danger-disabled-checked-background-color: transparent; --radio-danger-disabled-checked-border-color: var(--color-basic-transparent-600); --radio-danger-disabled-checked-inner-circle-color: var(--color-basic-transparent-600); --radio-control-text-color: var(--text-control-color); --radio-control-background-color: var(--color-control-transparent-default); --radio-control-border-color: var(--color-control-transparent-default-border); --radio-control-checked-background-color: transparent; --radio-control-checked-border-color: var(--color-control-default-border); --radio-control-inner-circle-color: var(--color-control-default); --radio-control-focus-background-color: var(--color-control-transparent-focus); --radio-control-focus-border-color: var(--color-control-transparent-focus-border); --radio-control-focus-checked-background-color: transparent; --radio-control-focus-checked-border-color: var(--color-control-focus-border); --radio-control-focus-inner-circle-color: var(--color-control-focus); --radio-control-hover-background-color: var(--color-control-transparent-hover); --radio-control-hover-border-color: var(--color-control-transparent-hover-border); --radio-control-hover-inner-circle-color: var(--color-control-hover); --radio-control-hover-checked-background-color: transparent; --radio-control-hover-checked-border-color: var(--color-control-hover-border); --radio-control-active-background-color: var(--color-control-transparent-active); --radio-control-active-border-color: var(--color-control-transparent-active-border); --radio-control-active-checked-background-color: transparent; --radio-control-active-checked-border-color: var(--color-control-active-border); --radio-control-active-inner-circle-color: var(--color-control-active); --radio-control-disabled-background-color: var(--color-control-transparent-disabled); --radio-control-disabled-border-color: var(--color-control-transparent-disabled-border); --radio-control-disabled-text-color: var(--color-basic-100); --radio-control-disabled-checked-background-color: transparent; --radio-control-disabled-checked-border-color: var(--color-basic-transparent-600); --radio-control-disabled-checked-inner-circle-color: var(--color-basic-transparent-600); --tree-grid-cell-border-width: 1px; --tree-grid-cell-border-style: solid; --tree-grid-cell-border-color: var(--border-basic-color-2); --tree-grid-row-min-height: 2rem; --tree-grid-cell-padding: 0.875rem 1.25rem; --tree-grid-header-background-color: var(--background-basic-color-1); --tree-grid-header-text-color: var(--text-basic-color); --tree-grid-header-text-font-family: var(--text-subtitle-font-family); --tree-grid-header-text-font-size: var(--text-subtitle-font-size); --tree-grid-header-text-font-weight: var(--text-subtitle-font-weight); --tree-grid-header-text-line-height: var(--text-subtitle-line-height); --tree-grid-footer-background-color: var(--background-basic-color-1); --tree-grid-footer-text-color: var(--text-basic-color); --tree-grid-footer-text-font-family: var(--tree-grid-header-text-font-family); --tree-grid-footer-text-font-size: var(--tree-grid-header-text-font-size); --tree-grid-footer-text-font-weight: var(--tree-grid-header-text-font-weight); --tree-grid-footer-text-line-height: var(--tree-grid-header-text-line-height); --tree-grid-row-background-color: var(--background-basic-color-1); --tree-grid-row-even-background-color: var(--background-basic-color-1); --tree-grid-row-hover-background-color: var(--background-basic-color-1); --tree-grid-row-text-color: var(--text-basic-color); --tree-grid-row-text-font-family: var(--text-paragraph-font-family); --tree-grid-row-text-font-size: var(--text-paragraph-font-size); --tree-grid-row-text-font-weight: var(--text-paragraph-font-weight); --tree-grid-row-text-line-height: var(--text-paragraph-line-height); --tree-grid-sort-header-button-background-color: transparent; --tree-grid-sort-header-button-border: none; --tree-grid-sort-header-button-padding: 0; --icon-font-size: 1.25rem; --icon-line-height: 1; --icon-width: 1em; --icon-height: 1em; --icon-svg-vertical-align: top; --icon-basic-color: var(--text-hint-color); --icon-primary-color: var(--color-primary-default); --icon-info-color: var(--color-info-default); --icon-success-color: var(--color-success-default); --icon-warning-color: var(--color-warning-default); --icon-danger-color: var(--color-danger-default); --icon-control-color: var(--color-basic-100); --tag-text-font-family: var(--text-subtitle-font-family); --tag-text-transform: capitalize; --tag-border-width: 0.0625rem; --tag-border-style: solid; --tag-border-radius: 1.5rem; --tag-tiny-text-font-size: var(--input-tiny-text-font-size); --tag-tiny-text-font-weight: var(--input-tiny-text-font-weight); --tag-tiny-text-line-height: var(--input-tiny-text-line-height); --tag-tiny-padding: 0.0625rem 0.9375rem; --tag-tiny-close-offset: 0.625rem; --tag-small-text-font-size: var(--input-small-text-font-size); --tag-small-text-font-weight: var(--input-small-text-font-weight); --tag-small-text-line-height: var(--input-small-text-line-height); --tag-small-padding: 0.0625rem 0.9375rem; --tag-small-close-offset: 0.625rem; --tag-medium-text-font-size: var(--input-medium-text-font-size); --tag-medium-text-font-weight: var(--input-medium-text-font-weight); --tag-medium-text-line-height: var(--input-medium-text-line-height); --tag-medium-padding: 0.1875rem 0.9375rem; --tag-medium-close-offset: 0.625rem; --tag-large-text-font-size: var(--input-large-text-font-size); --tag-large-text-font-weight: var(--input-large-text-font-weight); --tag-large-text-line-height: var(--input-large-text-line-height); --tag-large-padding: 0.3125rem 0.9375rem; --tag-large-close-offset: 0.625rem; --tag-giant-text-font-size: var(--input-giant-text-font-size); --tag-giant-text-font-weight: var(--input-giant-text-font-weight); --tag-giant-text-line-height: var(--input-giant-text-line-height); --tag-giant-padding: 0.4375rem 0.9375rem; --tag-giant-close-offset: 0.625rem; --tag-filled-basic-background-color: var(--color-basic-default); --tag-filled-basic-border-color: var(--color-basic-default-border); --tag-filled-basic-text-color: var(--color-basic-800); --tag-filled-basic-active-background-color: var(--color-basic-focus); --tag-filled-basic-active-border-color: var(--color-basic-focus-border); --tag-filled-basic-hover-background-color: var(--color-basic-hover); --tag-filled-basic-hover-border-color: var(--color-basic-hover-border); --tag-filled-basic-selected-background-color: color-basic-actove; --tag-filled-basic-selected-border-color: var(--color-basic-active-border); --tag-filled-primary-background-color: var(--color-primary-default); --tag-filled-primary-border-color: var(--color-primary-default-border); --tag-filled-primary-text-color: var(--text-control-color); --tag-filled-primary-active-background-color: var(--color-primary-focus); --tag-filled-primary-active-border-color: var(--color-primary-focus-border); --tag-filled-primary-hover-background-color: var(--color-primary-hover); --tag-filled-primary-hover-border-color: var(--color-primary-hover-border); --tag-filled-primary-selected-background-color: color-primary-actove; --tag-filled-primary-selected-border-color: var(--color-primary-active-border); --tag-filled-success-background-color: var(--color-success-default); --tag-filled-success-border-color: var(--color-success-default-border); --tag-filled-success-text-color: var(--text-control-color); --tag-filled-success-active-background-color: var(--color-success-focus); --tag-filled-success-active-border-color: var(--color-success-focus-border); --tag-filled-success-hover-background-color: var(--color-success-hover); --tag-filled-success-hover-border-color: var(--color-success-hover-border); --tag-filled-success-selected-background-color: color-success-actove; --tag-filled-success-selected-border-color: var(--color-success-active-border); --tag-filled-info-background-color: var(--color-info-default); --tag-filled-info-border-color: var(--color-info-default-border); --tag-filled-info-text-color: var(--text-control-color); --tag-filled-info-active-background-color: var(--color-info-focus); --tag-filled-info-active-border-color: var(--color-info-focus-border); --tag-filled-info-hover-background-color: var(--color-info-hover); --tag-filled-info-hover-border-color: var(--color-info-hover-border); --tag-filled-info-selected-background-color: color-info-actove; --tag-filled-info-selected-border-color: var(--color-info-active-border); --tag-filled-warning-background-color: var(--color-warning-default); --tag-filled-warning-border-color: var(--color-warning-default-border); --tag-filled-warning-text-color: var(--text-control-color); --tag-filled-warning-active-background-color: var(--color-warning-focus); --tag-filled-warning-active-border-color: var(--color-warning-focus-border); --tag-filled-warning-hover-background-color: var(--color-warning-hover); --tag-filled-warning-hover-border-color: var(--color-warning-hover-border); --tag-filled-warning-selected-background-color: color-warning-actove; --tag-filled-warning-selected-border-color: var(--color-warning-active-border); --tag-filled-danger-background-color: var(--color-danger-default); --tag-filled-danger-border-color: var(--color-danger-default-border); --tag-filled-danger-text-color: var(--text-control-color); --tag-filled-danger-active-background-color: var(--color-danger-focus); --tag-filled-danger-active-border-color: var(--color-danger-focus-border); --tag-filled-danger-hover-background-color: var(--color-danger-hover); --tag-filled-danger-hover-border-color: var(--color-danger-hover-border); --tag-filled-danger-selected-background-color: color-danger-actove; --tag-filled-danger-selected-border-color: var(--color-danger-active-border); --tag-filled-control-background-color: var(--color-control-default); --tag-filled-control-border-color: var(--color-control-default-border); --tag-filled-control-text-color: var(--color-basic-800); --tag-filled-control-active-background-color: var(--color-control-hover); --tag-filled-control-active-border-color: var(--color-control-hover-border); --tag-filled-control-hover-background-color: var(--color-control-focus); --tag-filled-control-hover-border-color: var(--color-control-focus-border); --tag-filled-control-selected-background-color: color-control-actove; --tag-filled-control-selected-border-color: var(--color-control-active-border); --tag-outline-basic-background-color: var(--color-basic-transparent-default); --tag-outline-basic-border-color: var(--color-basic-transparent-default-border); --tag-outline-basic-text-color: var(--text-hint-color); --tag-outline-basic-active-background-color: var(--color-basic-transparent-focus); --tag-outline-basic-active-border-color: var(--color-basic-transparent-focus-border); --tag-outline-basic-active-text-color: var(--text-hint-color); --tag-outline-basic-hover-background-color: var(--color-basic-transparent-hover); --tag-outline-basic-hover-border-color: var(--color-basic-transparent-hover-border); --tag-outline-basic-hover-text-color: var(--text-hint-color); --tag-outline-basic-selected-background-color: var(--color-basic-transparent-active); --tag-outline-basic-selected-border-color: var(--color-basic-transparent-active-border); --tag-outline-basic-selected-text-color: var(--text-hint-color); --tag-outline-primary-background-color: var(--color-primary-transparent-default); --tag-outline-primary-border-color: var(--color-primary-transparent-default-border); --tag-outline-primary-text-color: var(--text-primary-color); --tag-outline-primary-active-background-color: var(--color-primary-transparent-focus); --tag-outline-primary-active-border-color: var(--color-primary-transparent-focus-border); --tag-outline-primary-active-text-color: var(--text-primary-color); --tag-outline-primary-hover-background-color: var(--color-primary-transparent-hover); --tag-outline-primary-hover-border-color: var(--color-primary-transparent-hover-border); --tag-outline-primary-hover-text-color: var(--text-primary-color); --tag-outline-primary-selected-background-color: var(--color-primary-transparent-active); --tag-outline-primary-selected-border-color: var(--color-primary-transparent-active-border); --tag-outline-primary-selected-text-color: var(--text-primary-color); --tag-outline-success-background-color: var(--color-success-transparent-default); --tag-outline-success-border-color: var(--color-success-transparent-default-border); --tag-outline-success-text-color: var(--text-success-color); --tag-outline-success-active-background-color: var(--color-success-transparent-focus); --tag-outline-success-active-border-color: var(--color-success-transparent-focus-border); --tag-outline-success-active-text-color: var(--text-success-color); --tag-outline-success-hover-background-color: var(--color-success-transparent-hover); --tag-outline-success-hover-border-color: var(--color-success-transparent-hover-border); --tag-outline-success-hover-text-color: var(--text-success-color); --tag-outline-success-selected-background-color: var(--color-success-transparent-active); --tag-outline-success-selected-border-color: var(--color-success-transparent-active-border); --tag-outline-success-selected-text-color: var(--text-success-color); --tag-outline-info-background-color: var(--color-info-transparent-default); --tag-outline-info-border-color: var(--color-info-transparent-default-border); --tag-outline-info-text-color: var(--text-info-color); --tag-outline-info-active-background-color: var(--color-info-transparent-focus); --tag-outline-info-active-border-color: var(--color-info-transparent-focus-border); --tag-outline-info-active-text-color: var(--text-info-color); --tag-outline-info-hover-background-color: var(--color-info-transparent-hover); --tag-outline-info-hover-border-color: var(--color-info-transparent-hover-border); --tag-outline-info-hover-text-color: var(--text-info-color); --tag-outline-info-selected-background-color: var(--color-info-transparent-active); --tag-outline-info-selected-border-color: var(--color-info-transparent-active-border); --tag-outline-info-selected-text-color: var(--text-info-color); --tag-outline-warning-background-color: var(--color-warning-transparent-default); --tag-outline-warning-border-color: var(--color-warning-transparent-default-border); --tag-outline-warning-text-color: var(--text-warning-color); --tag-outline-warning-active-background-color: var(--color-warning-transparent-focus); --tag-outline-warning-active-border-color: var(--color-warning-transparent-focus-border); --tag-outline-warning-active-text-color: var(--text-warning-color); --tag-outline-warning-hover-background-color: var(--color-warning-transparent-hover); --tag-outline-warning-hover-border-color: var(--color-warning-transparent-hover-border); --tag-outline-warning-hover-text-color: var(--text-warning-color); --tag-outline-warning-selected-background-color: var(--color-warning-transparent-active); --tag-outline-warning-selected-border-color: var(--color-warning-transparent-active-border); --tag-outline-warning-selected-text-color: var(--text-warning-color); --tag-outline-danger-background-color: var(--color-danger-transparent-default); --tag-outline-danger-border-color: var(--color-danger-transparent-default-border); --tag-outline-danger-text-color: var(--text-danger-color); --tag-outline-danger-active-background-color: var(--color-danger-transparent-focus); --tag-outline-danger-active-border-color: var(--color-danger-transparent-focus-border); --tag-outline-danger-active-text-color: var(--text-danger-color); --tag-outline-danger-hover-background-color: var(--color-danger-transparent-hover); --tag-outline-danger-hover-border-color: var(--color-danger-transparent-hover-border); --tag-outline-danger-hover-text-color: var(--text-danger-color); --tag-outline-danger-selected-background-color: var(--color-danger-transparent-active); --tag-outline-danger-selected-border-color: var(--color-danger-transparent-active-border); --tag-outline-danger-selected-text-color: var(--text-danger-color); --tag-outline-control-background-color: var(--color-control-transparent-default); --tag-outline-control-border-color: var(--color-control-transparent-default-border); --tag-outline-control-text-color: var(--text-control-color); --tag-outline-control-active-background-color: var(--color-control-transparent-focus); --tag-outline-control-active-border-color: var(--color-control-transparent-focus-border); --tag-outline-control-active-text-color: var(--text-control-color); --tag-outline-control-hover-background-color: var(--color-control-transparent-hover); --tag-outline-control-hover-border-color: var(--color-control-transparent-hover-border); --tag-outline-control-hover-text-color: var(--text-control-color); --tag-outline-control-selected-background-color: var(--color-control-transparent-active); --tag-outline-control-selected-border-color: var(--color-control-transparent-active-border); --tag-outline-control-selected-text-color: var(--text-control-color); --tag-list-tiny-tag-offset: 0.0625rem; --tag-list-small-tag-offset: 0.125rem; --tag-list-medium-tag-offset: 0.25rem; --tag-list-large-tag-offset: 0.375rem; --tag-list-giant-tag-offset: 0.5rem; --tag-list-with-input-tiny-padding: 0.0625rem 1rem; --tag-list-with-input-small-padding: 0.0625rem 1rem; --tag-list-with-input-medium-padding: 0.1875rem 1rem; --tag-list-with-input-large-padding: 0.3125rem 1rem; --tag-list-with-input-giant-padding: 0.4375rem 1rem; --tag-list-with-input-rectangle-border-radius: var(--input-rectangle-border-radius); --tag-list-with-input-semi-round-border-radius: var(--input-semi-round-border-radius); --tag-list-with-input-round-border-radius: var(--input-round-border-radius); --tag-input-min-width: 6rem; --tag-input-text-font-family: var(--input-text-font-family); --tag-input-placeholder-text-font-family: var(--input-placeholder-text-font-family); --tag-input-basic-background-color: var(--input-basic-background-color); --tag-input-basic-border-color: var(--input-basic-border-color); --tag-input-basic-text-color: var(--input-basic-text-color); --tag-input-basic-placeholder-text-color: var(--input-basic-placeholder-text-color); --tag-input-basic-focus-background-color: var(--input-basic-focus-background-color); --tag-input-basic-focus-border-color: var(--input-basic-focus-border-color); --tag-input-basic-disabled-text-color: var(--input-basic-disabled-text-color); --tag-input-basic-disabled-placeholder-text-color: var(--input-basic-disabled-placeholder-text-color); --tag-input-primary-background-color: var(--input-primary-background-color); --tag-input-primary-border-color: var(--input-primary-border-color); --tag-input-primary-text-color: var(--input-primary-text-color); --tag-input-primary-placeholder-text-color: var(--input-primary-placeholder-text-color); --tag-input-primary-focus-background-color: var(--input-primary-focus-background-color); --tag-input-primary-focus-border-color: var(--input-primary-focus-border-color); --tag-input-primary-disabled-text-color: var(--input-primary-disabled-text-color); --tag-input-primary-disabled-placeholder-text-color: var(--input-primary-disabled-placeholder-text-color); --tag-input-success-background-color: var(--input-success-background-color); --tag-input-success-border-color: var(--input-success-border-color); --tag-input-success-text-color: var(--input-success-text-color); --tag-input-success-placeholder-text-color: var(--input-success-placeholder-text-color); --tag-input-success-focus-background-color: var(--input-success-focus-background-color); --tag-input-success-focus-border-color: var(--input-success-focus-border-color); --tag-input-success-disabled-text-color: var(--input-success-disabled-text-color); --tag-input-success-disabled-placeholder-text-color: var(--input-success-disabled-placeholder-text-color); --tag-input-info-background-color: var(--input-info-background-color); --tag-input-info-border-color: var(--input-info-border-color); --tag-input-info-text-color: var(--input-info-text-color); --tag-input-info-placeholder-text-color: var(--input-info-placeholder-text-color); --tag-input-info-focus-background-color: var(--input-info-focus-background-color); --tag-input-info-focus-border-color: var(--input-info-focus-border-color); --tag-input-info-disabled-text-color: var(--input-info-disabled-text-color); --tag-input-info-disabled-placeholder-text-color: var(--input-info-disabled-placeholder-text-color); --tag-input-warning-background-color: var(--input-warning-background-color); --tag-input-warning-border-color: var(--input-warning-border-color); --tag-input-warning-text-color: var(--input-warning-text-color); --tag-input-warning-placeholder-text-color: var(--input-warning-placeholder-text-color); --tag-input-warning-focus-background-color: var(--input-warning-focus-background-color); --tag-input-warning-focus-border-color: var(--input-warning-focus-border-color); --tag-input-warning-disabled-text-color: var(--input-warning-disabled-text-color); --tag-input-warning-disabled-placeholder-text-color: var(--input-warning-disabled-placeholder-text-color); --tag-input-danger-background-color: var(--input-danger-background-color); --tag-input-danger-border-color: var(--input-danger-border-color); --tag-input-danger-text-color: var(--input-danger-text-color); --tag-input-danger-placeholder-text-color: var(--input-danger-placeholder-text-color); --tag-input-danger-focus-background-color: var(--input-danger-focus-background-color); --tag-input-danger-focus-border-color: var(--input-danger-focus-border-color); --tag-input-danger-disabled-text-color: var(--input-danger-disabled-text-color); --tag-input-danger-disabled-placeholder-text-color: var(--input-danger-disabled-placeholder-text-color); --tag-input-control-background-color: var(--input-control-background-color); --tag-input-control-border-color: var(--input-control-border-color); --tag-input-control-text-color: var(--input-control-text-color); --tag-input-control-placeholder-text-color: var(--input-control-placeholder-text-color); --tag-input-control-focus-background-color: var(--input-control-focus-background-color); --tag-input-control-focus-border-color: var(--input-control-focus-border-color); --tag-input-control-disabled-text-color: var(--input-control-disabled-text-color); --tag-input-control-disabled-placeholder-text-color: var(--input-control-disabled-placeholder-text-color); --tag-input-tiny-text-font-size: var(--input-tiny-text-font-size); --tag-input-tiny-text-font-weight: var(--input-tiny-text-font-weight); --tag-input-tiny-text-line-height: var(--input-tiny-text-line-height); --tag-input-tiny-placeholder-text-font-size: var(--input-tiny-placeholder-text-font-size); --tag-input-tiny-placeholder-text-font-weight: var(--input-tiny-placeholder-text-font-weight); --tag-input-tiny-placeholder-text-line-height: var(--input-tiny-placeholder-text-line-height); --tag-input-tiny-padding: 0.125rem 0; --tag-input-small-text-font-size: var(--input-small-text-font-size); --tag-input-small-text-font-weight: var(--input-small-text-font-weight); --tag-input-small-text-line-height: var(--input-small-text-line-height); --tag-input-small-placeholder-text-font-size: var(--input-small-placeholder-text-font-size); --tag-input-small-placeholder-text-font-weight: var(--input-small-placeholder-text-font-weight); --tag-input-small-placeholder-text-line-height: var(--input-small-placeholder-text-line-height); --tag-input-small-padding: 0.125rem 0; --tag-input-medium-text-font-size: var(--input-medium-text-font-size); --tag-input-medium-text-font-weight: var(--input-medium-text-font-weight); --tag-input-medium-text-line-height: var(--input-medium-text-line-height); --tag-input-medium-placeholder-text-font-size: var(--input-medium-placeholder-text-font-size); --tag-input-medium-placeholder-text-font-weight: var(--input-medium-placeholder-text-font-weight); --tag-input-medium-placeholder-text-line-height: var(--input-medium-placeholder-text-line-height); --tag-input-medium-padding: 0.25rem 0; --tag-input-large-text-font-size: var(--input-large-text-font-size); --tag-input-large-text-font-weight: var(--input-large-text-font-weight); --tag-input-large-text-line-height: var(--input-large-text-line-height); --tag-input-large-placeholder-text-font-size: var(--input-large-placeholder-text-font-size); --tag-input-large-placeholder-text-font-weight: var(--input-large-placeholder-text-font-weight); --tag-input-large-placeholder-text-line-height: var(--input-large-placeholder-text-line-height); --tag-input-large-padding: 0.375rem 0; --tag-input-giant-text-font-size: var(--input-giant-text-font-size); --tag-input-giant-text-font-weight: var(--input-giant-text-font-weight); --tag-input-giant-text-line-height: var(--input-giant-text-line-height); --tag-input-giant-placeholder-text-font-size: var(--input-giant-placeholder-text-font-size); --tag-input-giant-placeholder-text-font-weight: var(--input-giant-placeholder-text-font-weight); --tag-input-giant-placeholder-text-line-height: var(--input-giant-placeholder-text-line-height); --tag-input-giant-padding: 0.5rem 0; --toggle-height: 1.875rem; --toggle-width: 3.125rem; --toggle-border-width: 1px; --toggle-border-radius: 100px; --toggle-outline-width: var(--outline-width); --toggle-outline-color: var(--outline-color); --toggle-switcher-size: 1.75rem; --toggle-switcher-icon-size: 0.75rem; --toggle-text-font-family: var(--text-subtitle-2-font-family); --toggle-text-font-size: var(--text-subtitle-2-font-size); --toggle-text-font-weight: var(--text-subtitle-2-font-weight); --toggle-text-line-height: var(--text-subtitle-2-line-height); --toggle-cursor: pointer; --toggle-disabled-cursor: default; --toggle-basic-text-color: var(--text-basic-color); --toggle-basic-background-color: var(--color-basic-transparent-default); --toggle-basic-border-color: var(--color-basic-transparent-default-border); --toggle-basic-checked-background-color: var(--color-primary-default); --toggle-basic-checked-border-color: var(--color-primary-default-border); --toggle-basic-checked-switcher-background-color: var(--background-basic-color-1); --toggle-basic-checked-switcher-checkmark-color: var(--color-primary-default); --toggle-basic-focus-background-color: var(--color-primary-transparent-focus); --toggle-basic-focus-border-color: var(--color-primary-transparent-focus-border); --toggle-basic-focus-checked-background-color: var(--color-primary-focus); --toggle-basic-focus-checked-border-color: var(--color-primary-focus-border); --toggle-basic-hover-background-color: var(--color-primary-transparent-hover); --toggle-basic-hover-border-color: var(--color-primary-transparent-hover-border); --toggle-basic-hover-checked-background-color: var(--color-primary-hover); --toggle-basic-hover-checked-border-color: var(--color-primary-hover-border); --toggle-basic-active-background-color: var(--color-primary-transparent-active); --toggle-basic-active-border-color: var(--color-primary-transparent-active-border); --toggle-basic-active-checked-background-color: var(--color-primary-active); --toggle-basic-active-checked-border-color: var(--color-primary-active-border); --toggle-basic-disabled-background-color: var(--color-basic-transparent-disabled); --toggle-basic-disabled-border-color: var(--color-basic-transparent-disabled-border); --toggle-basic-disabled-switcher-background-color: var(--color-basic-disabled); --toggle-basic-disabled-checked-switcher-checkmark-color: var(--text-control-color); --toggle-basic-disabled-text-color: var(--text-disabled-color); --toggle-primary-text-color: var(--text-basic-color); --toggle-primary-background-color: var(--color-primary-transparent-default); --toggle-primary-border-color: var(--color-primary-transparent-default-border); --toggle-primary-checked-background-color: var(--color-primary-default); --toggle-primary-checked-border-color: var(--color-primary-default-border); --toggle-primary-checked-switcher-background-color: var(--background-basic-color-1); --toggle-primary-checked-switcher-checkmark-color: var(--color-primary-default); --toggle-primary-focus-background-color: var(--color-primary-transparent-focus); --toggle-primary-focus-border-color: var(--color-primary-transparent-focus-border); --toggle-primary-focus-checked-background-color: var(--color-primary-focus); --toggle-primary-focus-checked-border-color: var(--color-primary-focus-border); --toggle-primary-hover-background-color: var(--color-primary-transparent-hover); --toggle-primary-hover-border-color: var(--color-primary-transparent-hover-border); --toggle-primary-hover-checked-background-color: var(--color-primary-hover); --toggle-primary-hover-checked-border-color: var(--color-primary-hover-border); --toggle-primary-active-background-color: var(--color-primary-transparent-active); --toggle-primary-active-border-color: var(--color-primary-transparent-active-border); --toggle-primary-active-checked-background-color: var(--color-primary-active); --toggle-primary-active-checked-border-color: var(--color-primary-active-border); --toggle-primary-disabled-background-color: var(--color-basic-transparent-disabled); --toggle-primary-disabled-border-color: var(--color-basic-transparent-disabled-border); --toggle-primary-disabled-switcher-background-color: var(--color-basic-disabled); --toggle-primary-disabled-checked-switcher-checkmark-color: var(--text-control-color); --toggle-primary-disabled-text-color: var(--text-disabled-color); --toggle-success-text-color: var(--text-basic-color); --toggle-success-background-color: var(--color-success-transparent-default); --toggle-success-border-color: var(--color-success-transparent-default-border); --toggle-success-checked-background-color: var(--color-success-default); --toggle-success-checked-border-color: var(--color-success-default-border); --toggle-success-checked-switcher-background-color: var(--background-basic-color-1); --toggle-success-checked-switcher-checkmark-color: var(--color-success-default); --toggle-success-focus-background-color: var(--color-success-transparent-focus); --toggle-success-focus-border-color: var(--color-success-transparent-focus-border); --toggle-success-focus-checked-background-color: var(--color-success-focus); --toggle-success-focus-checked-border-color: var(--color-success-focus-border); --toggle-success-hover-background-color: var(--color-success-transparent-hover); --toggle-success-hover-border-color: var(--color-success-transparent-hover-border); --toggle-success-hover-checked-background-color: var(--color-success-hover); --toggle-success-hover-checked-border-color: var(--color-success-hover-border); --toggle-success-active-background-color: var(--color-success-transparent-active); --toggle-success-active-border-color: var(--color-success-transparent-active-border); --toggle-success-active-checked-background-color: var(--color-success-active); --toggle-success-active-checked-border-color: var(--color-success-active-border); --toggle-success-disabled-background-color: var(--color-basic-transparent-disabled); --toggle-success-disabled-border-color: var(--color-basic-transparent-disabled-border); --toggle-success-disabled-switcher-background-color: var(--color-basic-disabled); --toggle-success-disabled-checked-switcher-checkmark-color: var(--text-control-color); --toggle-success-disabled-text-color: var(--text-disabled-color); --toggle-info-text-color: var(--text-basic-color); --toggle-info-background-color: var(--color-info-transparent-default); --toggle-info-border-color: var(--color-info-transparent-default-border); --toggle-info-checked-background-color: var(--color-info-default); --toggle-info-checked-border-color: var(--color-info-default-border); --toggle-info-checked-switcher-background-color: var(--background-basic-color-1); --toggle-info-checked-switcher-checkmark-color: var(--color-info-default); --toggle-info-focus-background-color: var(--color-info-transparent-focus); --toggle-info-focus-border-color: var(--color-info-transparent-focus-border); --toggle-info-focus-checked-background-color: var(--color-info-focus); --toggle-info-focus-checked-border-color: var(--color-info-focus-border); --toggle-info-hover-background-color: var(--color-info-transparent-hover); --toggle-info-hover-border-color: var(--color-info-transparent-hover-border); --toggle-info-hover-checked-background-color: var(--color-info-hover); --toggle-info-hover-checked-border-color: var(--color-info-hover-border); --toggle-info-active-background-color: var(--color-info-transparent-active); --toggle-info-active-border-color: var(--color-info-transparent-active-border); --toggle-info-active-checked-background-color: var(--color-info-active); --toggle-info-active-checked-border-color: var(--color-info-active-border); --toggle-info-disabled-background-color: var(--color-basic-transparent-disabled); --toggle-info-disabled-border-color: var(--color-basic-transparent-disabled-border); --toggle-info-disabled-switcher-background-color: var(--color-basic-disabled); --toggle-info-disabled-checked-switcher-checkmark-color: var(--text-control-color); --toggle-info-disabled-text-color: var(--text-disabled-color); --toggle-warning-text-color: var(--text-basic-color); --toggle-warning-background-color: var(--color-warning-transparent-default); --toggle-warning-border-color: var(--color-warning-transparent-default-border); --toggle-warning-checked-background-color: var(--color-warning-default); --toggle-warning-checked-border-color: var(--color-warning-default-border); --toggle-warning-checked-switcher-background-color: var(--background-basic-color-1); --toggle-warning-checked-switcher-checkmark-color: var(--color-warning-default); --toggle-warning-focus-background-color: var(--color-warning-transparent-focus); --toggle-warning-focus-border-color: var(--color-warning-transparent-focus-border); --toggle-warning-focus-checked-background-color: var(--color-warning-focus); --toggle-warning-focus-checked-border-color: var(--color-warning-focus-border); --toggle-warning-hover-background-color: var(--color-warning-transparent-hover); --toggle-warning-hover-border-color: var(--color-warning-transparent-hover-border); --toggle-warning-hover-checked-background-color: var(--color-warning-hover); --toggle-warning-hover-checked-border-color: var(--color-warning-hover-border); --toggle-warning-active-background-color: var(--color-warning-transparent-active); --toggle-warning-active-border-color: var(--color-warning-transparent-active-border); --toggle-warning-active-checked-background-color: var(--color-warning-active); --toggle-warning-active-checked-border-color: var(--color-warning-active-border); --toggle-warning-disabled-background-color: var(--color-basic-transparent-disabled); --toggle-warning-disabled-border-color: var(--color-basic-transparent-disabled-border); --toggle-warning-disabled-switcher-background-color: var(--color-basic-disabled); --toggle-warning-disabled-checked-switcher-checkmark-color: var(--text-control-color); --toggle-warning-disabled-text-color: var(--text-disabled-color); --toggle-danger-text-color: var(--text-basic-color); --toggle-danger-background-color: var(--color-danger-transparent-default); --toggle-danger-border-color: var(--color-danger-transparent-default-border); --toggle-danger-checked-background-color: var(--color-danger-default); --toggle-danger-checked-border-color: var(--color-danger-default-border); --toggle-danger-checked-switcher-background-color: var(--background-basic-color-1); --toggle-danger-checked-switcher-checkmark-color: var(--color-danger-default); --toggle-danger-focus-background-color: var(--color-danger-transparent-focus); --toggle-danger-focus-border-color: var(--color-danger-transparent-focus-border); --toggle-danger-focus-checked-background-color: var(--color-danger-focus); --toggle-danger-focus-checked-border-color: var(--color-danger-focus-border); --toggle-danger-hover-background-color: var(--color-danger-transparent-hover); --toggle-danger-hover-border-color: var(--color-danger-transparent-hover-border); --toggle-danger-hover-checked-background-color: var(--color-danger-hover); --toggle-danger-hover-checked-border-color: var(--color-danger-hover-border); --toggle-danger-active-background-color: var(--color-danger-transparent-active); --toggle-danger-active-border-color: var(--color-danger-transparent-active-border); --toggle-danger-active-checked-background-color: var(--color-danger-active); --toggle-danger-active-checked-border-color: var(--color-danger-active-border); --toggle-danger-disabled-background-color: var(--color-basic-transparent-disabled); --toggle-danger-disabled-border-color: var(--color-basic-transparent-disabled-border); --toggle-danger-disabled-switcher-background-color: var(--color-basic-disabled); --toggle-danger-disabled-checked-switcher-checkmark-color: var(--text-control-color); --toggle-danger-disabled-text-color: var(--text-disabled-color); --toggle-control-text-color: var(--color-basic-100); --toggle-control-background-color: var(--color-control-transparent-default); --toggle-control-border-color: var(--color-control-transparent-default-border); --toggle-control-checked-background-color: var(--color-control-transparent-default); --toggle-control-checked-border-color: var(--color-control-transparent-default-border); --toggle-control-checked-switcher-background-color: var(--color-control-default); --toggle-control-checked-switcher-checkmark-color: var(--color-basic-800); --toggle-control-focus-background-color: var(--color-control-transparent-focus); --toggle-control-focus-border-color: var(--color-control-transparent-focus-border); --toggle-control-focus-checked-background-color: var(--color-control-transparent-focus); --toggle-control-focus-checked-border-color: var(--color-control-transparent-focus-border); --toggle-control-hover-background-color: var(--color-control-transparent-hover); --toggle-control-hover-border-color: var(--color-control-transparent-hover-border); --toggle-control-hover-checked-background-color: var(--color-control-transparent-hover); --toggle-control-hover-checked-border-color: var(--color-control-transparent-hover-border); --toggle-control-active-background-color: var(--color-control-transparent-active); --toggle-control-active-border-color: var(--color-control-transparent-active-border); --toggle-control-active-checked-background-color: var(--color-control-transparent-active); --toggle-control-active-checked-border-color: var(--color-control-transparent-active-border); --toggle-control-disabled-background-color: var(--color-control-transparent-disabled); --toggle-control-disabled-border-color: var(--color-control-transparent-disabled-border); --toggle-control-disabled-switcher-background-color: var(--color-basic-transparent-600); --toggle-control-disabled-checked-switcher-checkmark-color: var(--color-basic-100); --toggle-control-disabled-text-color: var(--text-control-color); --form-field-tiny-max-width: var(--input-tiny-max-width); --form-field-small-max-width: var(--input-small-max-width); --form-field-medium-max-width: var(--input-medium-max-width); --form-field-large-max-width: var(--input-large-max-width); --form-field-giant-max-width: var(--input-giant-max-width); --form-field-addon-basic-text-color: var(--color-basic-600); --form-field-addon-basic-highlight-text-color: var(--color-primary-500); --form-field-addon-primary-text-color: var(--color-primary-500); --form-field-addon-primary-highlight-text-color: var(--color-primary-600); --form-field-addon-success-text-color: var(--color-success-500); --form-field-addon-success-highlight-text-color: var(--color-success-600); --form-field-addon-info-text-color: var(--color-info-500); --form-field-addon-info-highlight-text-color: var(--color-info-600); --form-field-addon-warning-text-color: var(--color-warning-500); --form-field-addon-warning-highlight-text-color: var(--color-warning-600); --form-field-addon-danger-text-color: var(--color-danger-500); --form-field-addon-danger-highlight-text-color: var(--color-danger-600); --form-field-addon-control-text-color: var(--color-control-default); --form-field-addon-control-highlight-text-color: var(--color-control-default); --form-field-addon-disabled-text-color: var(--text-disabled-color); --form-field-addon-tiny-height: 1.5rem; --form-field-addon-tiny-width: var(--form-field-addon-tiny-height); --form-field-addon-tiny-icon-size: var(--button-tiny-icon-size); --form-field-addon-tiny-font-size: var(--text-button-tiny-font-size); --form-field-addon-tiny-line-height: var(--text-button-tiny-line-height); --form-field-addon-tiny-font-weight: var(--text-button-font-weight); --form-field-addon-small-height: 2rem; --form-field-addon-small-width: var(--form-field-addon-small-height); --form-field-addon-small-icon-size: var(--button-small-icon-size); --form-field-addon-small-font-size: var(--text-button-small-font-size); --form-field-addon-small-line-height: var(--text-button-small-line-height); --form-field-addon-small-font-weight: var(--text-button-font-weight); --form-field-addon-medium-height: 2.5rem; --form-field-addon-medium-width: var(--form-field-addon-medium-height); --form-field-addon-medium-icon-size: var(--button-medium-icon-size); --form-field-addon-medium-font-size: var(--text-button-medium-font-size); --form-field-addon-medium-line-height: var(--text-button-medium-line-height); --form-field-addon-medium-font-weight: var(--text-button-font-weight); --form-field-addon-large-height: 3rem; --form-field-addon-large-width: var(--form-field-addon-large-height); --form-field-addon-large-icon-size: var(--button-large-icon-size); --form-field-addon-large-font-size: var(--text-button-large-font-size); --form-field-addon-large-line-height: var(--text-button-large-line-height); --form-field-addon-large-font-weight: var(--text-button-font-weight); --form-field-addon-giant-height: 3.5rem; --form-field-addon-giant-width: var(--form-field-addon-giant-height); --form-field-addon-giant-icon-size: var(--button-giant-icon-size); --form-field-addon-giant-font-size: var(--text-button-giant-font-size); --form-field-addon-giant-line-height: var(--text-button-giant-line-height); --form-field-addon-giant-font-weight: var(--text-button-font-weight); --color-primary-100: #f2f6ff; --color-primary-200: #d9e4ff; --color-primary-300: #a6c1ff; --color-primary-400: #598bff; --color-primary-500: #3366ff; --color-primary-600: #274bdb; --color-primary-700: #1a34b8; --color-primary-800: #102694; --color-primary-900: #091c7a; --color-primary-transparent-100: rgba(51, 102, 255, 0.08); --color-primary-transparent-200: rgba(51, 102, 255, 0.16); --color-primary-transparent-300: rgba(51, 102, 255, 0.24); --color-primary-transparent-400: rgba(51, 102, 255, 0.32); --color-primary-transparent-500: rgba(51, 102, 255, 0.4); --color-primary-transparent-600: rgba(51, 102, 255, 0.48); --color-success-100: #f0fff5; --color-success-200: #ccfce3; --color-success-300: #8cfac7; --color-success-400: #2ce69b; --color-success-500: #00d68f; --color-success-600: #00b887; --color-success-700: #00997a; --color-success-800: #007d6c; --color-success-900: #004a45; --color-success-transparent-100: rgba(0, 214, 143, 0.08); --color-success-transparent-200: rgba(0, 214, 143, 0.16); --color-success-transparent-300: rgba(0, 214, 143, 0.24); --color-success-transparent-400: rgba(0, 214, 143, 0.32); --color-success-transparent-500: rgba(0, 214, 143, 0.4); --color-success-transparent-600: rgba(0, 214, 143, 0.48); --color-info-100: #f2f8ff; --color-info-200: #c7e2ff; --color-info-300: #94cbff; --color-info-400: #42aaff; --color-info-500: #0095ff; --color-info-600: #006fd6; --color-info-700: #0057c2; --color-info-800: #0041a8; --color-info-900: #002885; --color-info-transparent-100: rgba(0, 149, 255, 0.08); --color-info-transparent-200: rgba(0, 149, 255, 0.16); --color-info-transparent-300: rgba(0, 149, 255, 0.24); --color-info-transparent-400: rgba(0, 149, 255, 0.32); --color-info-transparent-500: rgba(0, 149, 255, 0.4); --color-info-transparent-600: rgba(0, 149, 255, 0.48); --color-warning-100: #fffdf2; --color-warning-200: #fff1c2; --color-warning-300: #ffe59e; --color-warning-400: #ffc94d; --color-warning-500: #ffaa00; --color-warning-600: #db8b00; --color-warning-700: #b86e00; --color-warning-800: #945400; --color-warning-900: #703c00; --color-warning-transparent-100: rgba(255, 170, 0, 0.08); --color-warning-transparent-200: rgba(255, 170, 0, 0.16); --color-warning-transparent-300: rgba(255, 170, 0, 0.24); --color-warning-transparent-400: rgba(255, 170, 0, 0.32); --color-warning-transparent-500: rgba(255, 170, 0, 0.4); --color-warning-transparent-600: rgba(255, 170, 0, 0.48); --color-danger-100: #fff2f2; --color-danger-200: #ffd6d9; --color-danger-300: #ffa8b4; --color-danger-400: #ff708d; --color-danger-500: #ff3d71; --color-danger-600: #db2c66; --color-danger-700: #b81d5b; --color-danger-800: #94124e; --color-danger-900: #700940; --color-danger-transparent-100: rgba(255, 61, 113, 0.08); --color-danger-transparent-200: rgba(255, 61, 113, 0.16); --color-danger-transparent-300: rgba(255, 61, 113, 0.24); --color-danger-transparent-400: rgba(255, 61, 113, 0.32); --color-danger-transparent-500: rgba(255, 61, 113, 0.4); --color-danger-transparent-600: rgba(255, 61, 113, 0.48); --color-basic-100: #ffffff; --color-basic-200: #f7f9fc; --color-basic-300: #edf1f7; --color-basic-400: #e4e9f2; --color-basic-500: #c5cee0; --color-basic-600: #8f9bb3; --color-basic-700: #2e3a59; --color-basic-800: #222b45; --color-basic-900: #192038; --color-basic-1000: #151a30; --color-basic-1100: #101426; --color-basic-transparent-100: rgba(143, 155, 179, 0.08); --color-basic-transparent-200: rgba(143, 155, 179, 0.16); --color-basic-transparent-300: rgba(143, 155, 179, 0.24); --color-basic-transparent-400: rgba(143, 155, 179, 0.32); --color-basic-transparent-500: rgba(143, 155, 179, 0.4); --color-basic-transparent-600: rgba(143, 155, 179, 0.48); --color-basic-control-transparent-100: rgba(255, 255, 255, 0.08); --color-basic-control-transparent-200: rgba(255, 255, 255, 0.16); --color-basic-control-transparent-300: rgba(255, 255, 255, 0.24); --color-basic-control-transparent-400: rgba(255, 255, 255, 0.32); --color-basic-control-transparent-500: rgba(255, 255, 255, 0.4); --color-basic-control-transparent-600: rgba(255, 255, 255, 0.48); --color-basic-focus: var(--color-basic-400); --color-basic-hover: var(--color-basic-200); --color-basic-default: var(--color-basic-300); --color-basic-active: var(--color-basic-400); --color-basic-disabled: var(--color-basic-transparent-300); --color-basic-focus-border: var(--color-basic-500); --color-basic-hover-border: var(--color-basic-hover); --color-basic-default-border: var(--color-basic-default); --color-basic-active-border: var(--color-basic-active); --color-basic-disabled-border: var(--color-basic-disabled); --color-basic-transparent-focus: var(--color-basic-transparent-300); --color-basic-transparent-hover: var(--color-basic-transparent-200); --color-basic-transparent-default: var(--color-basic-transparent-100); --color-basic-transparent-active: var(--color-basic-transparent-300); --color-basic-transparent-disabled: var(--color-basic-transparent-200); --color-basic-transparent-focus-border: var(--color-basic-600); --color-basic-transparent-hover-border: var(--color-basic-600); --color-basic-transparent-default-border: var(--color-basic-600); --color-basic-transparent-active-border: var(--color-basic-600); --color-basic-transparent-disabled-border: var(--color-basic-transparent-300); --color-primary-focus: var(--color-primary-600); --color-primary-hover: var(--color-primary-400); --color-primary-default: var(--color-primary-500); --color-primary-active: var(--color-primary-600); --color-primary-disabled: var(--color-basic-transparent-300); --color-primary-focus-border: var(--color-primary-700); --color-primary-hover-border: var(--color-primary-hover); --color-primary-default-border: var(--color-primary-default); --color-primary-active-border: var(--color-primary-active); --color-primary-disabled-border: var(--color-primary-disabled); --color-primary-transparent-focus: var(--color-primary-transparent-300); --color-primary-transparent-hover: var(--color-primary-transparent-200); --color-primary-transparent-default: var(--color-primary-transparent-100); --color-primary-transparent-active: var(--color-primary-transparent-300); --color-primary-transparent-disabled: var(--color-basic-transparent-200); --color-primary-transparent-focus-border: var(--color-primary-500); --color-primary-transparent-hover-border: var(--color-primary-500); --color-primary-transparent-default-border: var(--color-primary-500); --color-primary-transparent-active-border: var(--color-primary-500); --color-primary-transparent-disabled-border: var(--color-basic-transparent-300); --color-success-focus: var(--color-success-600); --color-success-hover: var(--color-success-400); --color-success-default: var(--color-success-500); --color-success-active: var(--color-success-600); --color-success-disabled: var(--color-basic-transparent-300); --color-success-focus-border: var(--color-success-700); --color-success-hover-border: var(--color-success-hover); --color-success-default-border: var(--color-success-default); --color-success-active-border: var(--color-success-active); --color-success-disabled-border: var(--color-success-disabled); --color-success-transparent-focus: var(--color-success-transparent-300); --color-success-transparent-focus-border: var(--color-success-500); --color-success-transparent-hover: var(--color-success-transparent-200); --color-success-transparent-hover-border: var(--color-success-500); --color-success-transparent-default: var(--color-success-transparent-100); --color-success-transparent-default-border: var(--color-success-500); --color-success-transparent-active: var(--color-success-transparent-300); --color-success-transparent-active-border: var(--color-success-500); --color-success-transparent-disabled: var(--color-basic-transparent-200); --color-success-transparent-disabled-border: var(--color-basic-transparent-300); --color-info-focus: var(--color-info-600); --color-info-hover: var(--color-info-400); --color-info-default: var(--color-info-500); --color-info-active: var(--color-info-600); --color-info-disabled: var(--color-basic-transparent-300); --color-info-focus-border: var(--color-info-700); --color-info-hover-border: var(--color-info-hover); --color-info-default-border: var(--color-info-default); --color-info-active-border: var(--color-info-active); --color-info-disabled-border: var(--color-info-disabled); --color-info-transparent-focus: var(--color-info-transparent-300); --color-info-transparent-hover: var(--color-info-transparent-200); --color-info-transparent-default: var(--color-info-transparent-100); --color-info-transparent-active: var(--color-info-transparent-300); --color-info-transparent-disabled: var(--color-basic-transparent-200); --color-info-transparent-focus-border: var(--color-info-500); --color-info-transparent-hover-border: var(--color-info-500); --color-info-transparent-default-border: var(--color-info-500); --color-info-transparent-active-border: var(--color-info-500); --color-info-transparent-disabled-border: var(--color-basic-transparent-300); --color-warning-focus: var(--color-warning-600); --color-warning-hover: var(--color-warning-400); --color-warning-default: var(--color-warning-500); --color-warning-active: var(--color-warning-600); --color-warning-disabled: var(--color-basic-transparent-300); --color-warning-focus-border: var(--color-warning-700); --color-warning-hover-border: var(--color-warning-hover); --color-warning-default-border: var(--color-warning-default); --color-warning-active-border: var(--color-warning-active); --color-warning-disabled-border: var(--color-warning-disabled); --color-warning-transparent-focus: var(--color-warning-transparent-300); --color-warning-transparent-hover: var(--color-warning-transparent-200); --color-warning-transparent-default: var(--color-warning-transparent-100); --color-warning-transparent-active: var(--color-warning-transparent-300); --color-warning-transparent-disabled: var(--color-basic-transparent-200); --color-warning-transparent-focus-border: var(--color-warning-500); --color-warning-transparent-hover-border: var(--color-warning-500); --color-warning-transparent-default-border: var(--color-warning-500); --color-warning-transparent-active-border: var(--color-warning-500); --color-warning-transparent-disabled-border: var(--color-basic-transparent-300); --color-danger-focus: var(--color-danger-600); --color-danger-hover: var(--color-danger-400); --color-danger-default: var(--color-danger-500); --color-danger-active: var(--color-danger-600); --color-danger-disabled: var(--color-basic-transparent-300); --color-danger-focus-border: var(--color-danger-700); --color-danger-hover-border: var(--color-danger-hover); --color-danger-default-border: var(--color-danger-default); --color-danger-active-border: var(--color-danger-active); --color-danger-disabled-border: var(--color-danger-disabled); --color-danger-transparent-focus: var(--color-danger-transparent-300); --color-danger-transparent-hover: var(--color-danger-transparent-200); --color-danger-transparent-default: var(--color-danger-transparent-100); --color-danger-transparent-active: var(--color-danger-transparent-300); --color-danger-transparent-disabled: var(--color-basic-transparent-200); --color-danger-transparent-focus-border: var(--color-danger-500); --color-danger-transparent-hover-border: var(--color-danger-500); --color-danger-transparent-default-border: var(--color-danger-500); --color-danger-transparent-active-border: var(--color-danger-500); --color-danger-transparent-disabled-border: var(--color-basic-transparent-300); --color-control-focus: var(--color-basic-300); --color-control-hover: var(--color-basic-200); --color-control-default: var(--color-basic-100); --color-control-active: var(--color-basic-300); --color-control-disabled: var(--color-basic-transparent-300); --color-control-focus-border: var(--color-basic-500); --color-control-hover-border: var(--color-control-hover); --color-control-default-border: var(--color-control-default); --color-control-active-border: var(--color-control-active); --color-control-disabled-border: var(--color-control-disabled); --color-control-transparent-focus: var(--color-basic-control-transparent-300); --color-control-transparent-hover: var(--color-basic-control-transparent-200); --color-control-transparent-default: var(--color-basic-control-transparent-100); --color-control-transparent-active: var(--color-basic-control-transparent-300); --color-control-transparent-disabled: var(--color-basic-transparent-200); --color-control-transparent-focus-border: var(--color-basic-100); --color-control-transparent-hover-border: var(--color-basic-100); --color-control-transparent-default-border: var(--color-basic-100); --color-control-transparent-active-border: var(--color-basic-100); --color-control-transparent-disabled-border: var(--color-basic-transparent-300); --background-basic-color-1: var(--color-basic-100); --background-basic-color-2: var(--color-basic-200); --background-basic-color-3: var(--color-basic-300); --background-basic-color-4: var(--color-basic-400); --border-basic-color-1: var(--color-basic-100); --border-basic-color-2: var(--color-basic-200); --border-basic-color-3: var(--color-basic-300); --border-basic-color-4: var(--color-basic-400); --border-basic-color-5: var(--color-basic-500); --background-alternative-color-1: var(--color-basic-800); --background-alternative-color-2: var(--color-basic-900); --background-alternative-color-3: var(--color-basic-1000); --background-alternative-color-4: var(--color-basic-1100); --border-alternative-color-1: var(--color-basic-800); --border-alternative-color-2: var(--color-basic-900); --border-alternative-color-3: var(--color-basic-1000); --border-alternative-color-4: var(--color-basic-1100); --border-alternative-color-5: var(--color-basic-1100); --background-primary-color-1: var(--color-primary-500); --background-primary-color-2: var(--color-primary-600); --background-primary-color-3: var(--color-primary-700); --background-primary-color-4: var(--color-primary-800); --border-primary-color-1: var(--color-basic-500); --border-primary-color-2: var(--color-basic-600); --border-primary-color-3: var(--color-basic-700); --border-primary-color-4: var(--color-basic-800); --border-primary-color-5: var(--color-basic-900); --text-basic-color: var(--color-basic-800); --text-alternate-color: var(--color-basic-100); --text-control-color: var(--color-basic-100); --text-disabled-color: var(--color-basic-transparent-600); --text-hint-color: var(--color-basic-600); --text-primary-color: var(--color-primary-default); --text-primary-focus-color: var(--color-primary-focus); --text-primary-hover-color: var(--color-primary-hover); --text-primary-active-color: var(--color-primary-active); --text-primary-disabled-color: var(--color-primary-400); --text-success-color: var(--color-success-default); --text-success-focus-color: var(--color-success-focus); --text-success-hover-color: var(--color-success-hover); --text-success-active-color: var(--color-success-active); --text-success-disabled-color: var(--color-success-400); --text-info-color: var(--color-info-default); --text-info-focus-color: var(--color-info-focus); --text-info-hover-color: var(--color-info-hover); --text-info-active-color: var(--color-info-active); --text-info-disabled-color: var(--color-info-400); --text-warning-color: var(--color-warning-default); --text-warning-focus-color: var(--color-warning-focus); --text-warning-hover-color: var(--color-warning-hover); --text-warning-active-color: var(--color-warning-active); --text-warning-disabled-color: var(--color-warning-400); --text-danger-color: var(--color-danger-default); --text-danger-focus-color: var(--color-danger-focus); --text-danger-hover-color: var(--color-danger-hover); --text-danger-active-color: var(--color-danger-active); --text-danger-disabled-color: var(--color-danger-400); --font-family-primary: Open Sans, sans-serif; --font-family-secondary: var(--font-family-primary); --text-heading-1-font-family: var(--font-family-secondary); --text-heading-1-font-size: 2.25rem; --text-heading-1-font-weight: 700; --text-heading-1-line-height: 3rem; --text-heading-2-font-family: var(--font-family-secondary); --text-heading-2-font-size: 2rem; --text-heading-2-font-weight: 700; --text-heading-2-line-height: 2.5rem; --text-heading-3-font-family: var(--font-family-secondary); --text-heading-3-font-size: 1.875rem; --text-heading-3-font-weight: 700; --text-heading-3-line-height: 2.5rem; --text-heading-4-font-family: var(--font-family-secondary); --text-heading-4-font-size: 1.625rem; --text-heading-4-font-weight: 700; --text-heading-4-line-height: 2rem; --text-heading-5-font-family: var(--font-family-secondary); --text-heading-5-font-size: 1.375rem; --text-heading-5-font-weight: 700; --text-heading-5-line-height: 2rem; --text-heading-6-font-family: var(--font-family-secondary); --text-heading-6-font-size: 1.125rem; --text-heading-6-font-weight: 700; --text-heading-6-line-height: 1.5rem; --text-subtitle-font-family: var(--font-family-primary); --text-subtitle-font-size: 0.9375rem; --text-subtitle-font-weight: 600; --text-subtitle-line-height: 1.5rem; --text-subtitle-2-font-family: var(--font-family-primary); --text-subtitle-2-font-size: 0.8125rem; --text-subtitle-2-font-weight: 600; --text-subtitle-2-line-height: 1.5rem; --text-paragraph-font-family: var(--font-family-primary); --text-paragraph-font-size: 0.9375rem; --text-paragraph-font-weight: 400; --text-paragraph-line-height: 1.25rem; --text-paragraph-2-font-family: var(--font-family-primary); --text-paragraph-2-font-size: 0.8125rem; --text-paragraph-2-font-weight: 400; --text-paragraph-2-line-height: 1.125rem; --text-label-font-family: var(--font-family-primary); --text-label-font-size: 0.75rem; --text-label-font-weight: 700; --text-label-line-height: 1rem; --text-caption-font-family: var(--font-family-primary); --text-caption-font-size: 0.75rem; --text-caption-font-weight: 400; --text-caption-line-height: 1rem; --text-caption-2-font-family: var(--font-family-primary); --text-caption-2-font-size: 0.75rem; --text-caption-2-font-weight: 600; --text-caption-2-line-height: 1rem; --text-button-font-family: var(--font-family-primary); --text-button-font-weight: 700; --text-button-tiny-font-size: 0.625rem; --text-button-tiny-line-height: 0.75rem; --text-button-small-font-size: 0.75rem; --text-button-small-line-height: 1rem; --text-button-medium-font-size: 0.875rem; --text-button-medium-line-height: 1rem; --text-button-large-font-size: 1rem; --text-button-large-line-height: 1.25rem; --text-button-giant-font-size: 1.125rem; --text-button-giant-line-height: 1.5rem; --border-radius: 0.25rem; --outline-width: 0.375rem; --outline-color: var(--color-basic-transparent-200); --scrollbar-color: var(--background-basic-color-4); --scrollbar-background-color: var(--background-basic-color-2); --scrollbar-width: 0.3125rem; --shadow: 0 0.5rem 1rem 0 rgba(44, 51, 73, 0.1); --divider-color: var(--border-basic-color-3); --divider-style: solid; --divider-width: 1px; } /* Declare variables before making them global. dart-sass doesn't allow to declare variable with !global. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * This mixin generates keyfames. * Because of all keyframes can't be scoped, * we need to puts unique name in each btn-pulse call. */ /* According to the specification (https://www.w3.org/TR/css-scoping-1/#host-selector) :host and :host-context are pseudo-classes. So we assume they could be combined, like other pseudo-classes, even same ones. For example: ':nth-of-type(2n):nth-of-type(even)'. Ideal solution would be to prepend any selector with :host-context([dir=rtl]). Then nebular components will behave as an html element and respond to [dir] attribute on any level, so direction could be overridden on any component level. Implementation code: @mixin nb-rtl() { // add # to scss interpolation statement. // it works in comments and we can't use it here @at-root {selector-append(':host-context([dir=rtl])', &)} { @content; } } And when we call it somewhere: :host { .some-class { @include nb-rtl() { ... } } } :host-context(...) { .some-class { @include nb-rtl() { ... } } } Result will look like: :host-context([dir=rtl]):host .some-class { ... } :host-context([dir=rtl]):host-context(...) .some-class { ... } * Side note: :host-context():host selector are valid. https://lists.w3.org/Archives/Public/www-style/2015Feb/0305.html :host-context([dir=rtl]):host-context(...) should match any permutation, so order is not important. * Currently, there're two problems with this approach: First, is that we can't combine :host, :host-context. Angular bugs #14349, #19199. For the moment of writing, the only possible way is: :host { :host-context(...) { ... } } It doesn't work for us because mixin could be called somewhere deeper, like: :host { p { @include nb-rtl() { ... } } } We are not able to go up to :host level to place content passed to mixin. The second problem is that we only can be sure that we appending :host-context([dir=rtl]) to another :host/:host-context pseudo-class when called in theme files (*.theme.scss). * Side note: Currently, nb-install-component uses another approach where :host prepended with the theme name (https://github.com/angular/angular/blob/5b96078624b0a4760f2dbcf6fdf0bd62791be5bb/packages/compiler/src/shadow_css.ts#L441), but it was made to be able to use current realization of rtl and it can be rewritten back to :host-context($theme) once we will be able to use multiple shadow selectors. * But when it's called in *.component.scss we can't be sure, that selector starts with :host/:host-context, because angular allows omitting pseudo-classes if we don't need to style :host component itself. We can break such selectors, by just appending :host-context([dir=rtl]) to them. *** Possible solution check if we in theme by some theme variables and if so append, otherwise nest like @at-root :host-context([dir=rtl]) { // add # to scss interpolation statement. // it works in comments and we can't use it here {&} { @content; } } What if :host specified? Can we add space in :host-context(...) :host? Or maybe add :host selector anyway? If multiple :host selectors are allowed *** Problems with the current approach. 1. Direction can be applied only on document level, because mixin prepends theme class, which placed on the body. 2. *.component.scss styles should be in :host selector. Otherwise angular will add host attribute to [dir=rtl] attribute as well. General problems. Ltr is default document direction, but for proper work of nb-ltr (means ltr only), [dir=ltr] should be specified at least somewhere. ':not([dir=rtl]' not applicable here, because it's satisfy any parent, that don't have [dir=rtl] attribute. Previous approach was to use single rtl mixin and reset ltr properties to initial value. But sometimes it's hard to find, what the previous value should be. And such mixin call looks too verbose. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /* Declare variables before making them global. dart-sass doesn't allow to declare variable with !global. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * Sass map contains a list of all Theme variables and also their mappings into Component variables * A theme consists of a list of colors, backgrounds, borders, text styles and supporting variables. */ /*! * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ .visually-hidden { /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } /* Declare variables before making them global. dart-sass doesn't allow to declare variable with !global. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * This mixin generates keyfames. * Because of all keyframes can't be scoped, * we need to puts unique name in each btn-pulse call. */ /* According to the specification (https://www.w3.org/TR/css-scoping-1/#host-selector) :host and :host-context are pseudo-classes. So we assume they could be combined, like other pseudo-classes, even same ones. For example: ':nth-of-type(2n):nth-of-type(even)'. Ideal solution would be to prepend any selector with :host-context([dir=rtl]). Then nebular components will behave as an html element and respond to [dir] attribute on any level, so direction could be overridden on any component level. Implementation code: @mixin nb-rtl() { // add # to scss interpolation statement. // it works in comments and we can't use it here @at-root {selector-append(':host-context([dir=rtl])', &)} { @content; } } And when we call it somewhere: :host { .some-class { @include nb-rtl() { ... } } } :host-context(...) { .some-class { @include nb-rtl() { ... } } } Result will look like: :host-context([dir=rtl]):host .some-class { ... } :host-context([dir=rtl]):host-context(...) .some-class { ... } * Side note: :host-context():host selector are valid. https://lists.w3.org/Archives/Public/www-style/2015Feb/0305.html :host-context([dir=rtl]):host-context(...) should match any permutation, so order is not important. * Currently, there're two problems with this approach: First, is that we can't combine :host, :host-context. Angular bugs #14349, #19199. For the moment of writing, the only possible way is: :host { :host-context(...) { ... } } It doesn't work for us because mixin could be called somewhere deeper, like: :host { p { @include nb-rtl() { ... } } } We are not able to go up to :host level to place content passed to mixin. The second problem is that we only can be sure that we appending :host-context([dir=rtl]) to another :host/:host-context pseudo-class when called in theme files (*.theme.scss). * Side note: Currently, nb-install-component uses another approach where :host prepended with the theme name (https://github.com/angular/angular/blob/5b96078624b0a4760f2dbcf6fdf0bd62791be5bb/packages/compiler/src/shadow_css.ts#L441), but it was made to be able to use current realization of rtl and it can be rewritten back to :host-context($theme) once we will be able to use multiple shadow selectors. * But when it's called in *.component.scss we can't be sure, that selector starts with :host/:host-context, because angular allows omitting pseudo-classes if we don't need to style :host component itself. We can break such selectors, by just appending :host-context([dir=rtl]) to them. *** Possible solution check if we in theme by some theme variables and if so append, otherwise nest like @at-root :host-context([dir=rtl]) { // add # to scss interpolation statement. // it works in comments and we can't use it here {&} { @content; } } What if :host specified? Can we add space in :host-context(...) :host? Or maybe add :host selector anyway? If multiple :host selectors are allowed *** Problems with the current approach. 1. Direction can be applied only on document level, because mixin prepends theme class, which placed on the body. 2. *.component.scss styles should be in :host selector. Otherwise angular will add host attribute to [dir=rtl] attribute as well. General problems. Ltr is default document direction, but for proper work of nb-ltr (means ltr only), [dir=ltr] should be specified at least somewhere. ':not([dir=rtl]' not applicable here, because it's satisfy any parent, that don't have [dir=rtl] attribute. Previous approach was to use single rtl mixin and reset ltr properties to initial value. But sometimes it's hard to find, what the previous value should be. And such mixin call looks too verbose. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ .cdk-overlay-container, .cdk-global-overlay-wrapper { pointer-events: none; top: 0; left: 0; height: 100%; width: 100%; } .cdk-overlay-container { position: fixed; z-index: 1000; } .cdk-overlay-container:empty { display: none; } .cdk-global-overlay-wrapper { display: flex; position: absolute; z-index: 1000; } .cdk-overlay-pane { position: absolute; pointer-events: auto; box-sizing: border-box; z-index: 1000; display: flex; max-width: 100%; max-height: 100%; } .cdk-overlay-backdrop { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1000; pointer-events: auto; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); opacity: 0; } .cdk-overlay-backdrop.cdk-overlay-backdrop-showing { opacity: 1; } .cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing { opacity: 0.6; } .cdk-overlay-dark-backdrop { background: rgba(0, 0, 0, 0.32); } .cdk-overlay-transparent-backdrop { transition: visibility 1ms linear, opacity 1ms linear; visibility: hidden; opacity: 1; } .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing { opacity: 0; visibility: visible; } .cdk-overlay-backdrop-noop-animation { transition: none; } .cdk-overlay-connected-position-bounding-box { position: absolute; z-index: 1000; display: flex; flex-direction: column; min-width: 1px; min-height: 1px; } .cdk-global-scrollblock { position: fixed; width: 100%; overflow-y: scroll; } /** * In case when Nebular Layout custom scroll `withScroll` mode is enabled * we need to disable default CDK scroll blocker (@link NbBlockScrollStrategyAdapter) on HTML element * so that it won't add additional positioning. */ .nb-global-scrollblock { position: static; width: auto; overflow: hidden; } /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /* * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /* * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /* * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /*! * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /* * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /*! * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /* * Normalization of HTML elements, manually forked from Normalize.css to remove * styles targeting irrelevant browsers while applying new styles. * * Normalize is licensed MIT. https://github.com/necolas/normalize.css */ html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } html, body { margin: 0; padding: 0; } /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type=checkbox], [type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type=search] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ nb-layout .scrollable-container { scrollbar-face-color: var(--layout-scrollbar-color); scrollbar-track-color: var(--layout-scrollbar-background-color); } nb-layout .scrollable-container::-webkit-scrollbar { width: var(--layout-scrollbar-width); height: var(--layout-scrollbar-width); } nb-layout .scrollable-container::-webkit-scrollbar-thumb { background: var(--layout-scrollbar-color); cursor: pointer; border-radius: calc(var(--layout-scrollbar-width) * 0.5); } nb-layout .scrollable-container::-webkit-scrollbar-track { background: var(--layout-scrollbar-background-color); } nb-layout .scrollable-container::-webkit-scrollbar-corner { background: var(--layout-scrollbar-background-color); } nb-layout.with-scroll .scrollable-container { overflow: auto; height: 100vh; display: block; } @media (max-width: 767.98px) { nb-layout.with-scroll .scrollable-container { overflow-y: scroll; -webkit-overflow-scrolling: touch; } } .layout { min-width: var(--layout-window-mode-min-width); } nb-layout.window-mode { background: var(--layout-window-mode-background-color); display: block; } nb-layout.window-mode .scrollable-container { max-width: 1920px; margin: 0 auto; } nb-layout.window-mode .layout nb-layout-header { max-width: 1920px; margin-left: auto; margin-right: auto; width: 100%; } nb-layout.window-mode .layout nb-layout-header nav { max-width: 1920px; margin: 0 auto; } @media screen and (min-width: 1940px) { nb-layout.window-mode { padding-top: calc(var(--layout-window-mode-padding-top) * 0.25); } nb-layout.window-mode nb-layout-header.fixed { top: calc(var(--layout-window-mode-padding-top) * 0.25); } nb-layout.window-mode nb-layout-header.fixed ~ .layout-container nb-sidebar .main-container-fixed { height: calc(100vh - calc(var(--layout-window-mode-padding-top) * 0.25) - var(--header-height)); top: calc(calc(var(--layout-window-mode-padding-top) * 0.25) + var(--header-height)); } nb-layout.window-mode nb-sidebar.fixed { left: calc((100vw - 1920px) / 2); } nb-layout.window-mode .layout .layout-container nb-sidebar.fixed.right { right: calc((100vw - 1920px) / 2); } nb-layout.window-mode .layout .layout-container nb-sidebar.fixed { top: calc(var(--header-height) + calc(var(--layout-window-mode-padding-top) * 0.25)); } nb-layout.window-mode .scrollable-container { height: calc(100vh - calc(var(--layout-window-mode-padding-top) * 0.25)); box-shadow: var(--layout-window-shadow); } nb-layout.window-mode nb-layout.with-scroll .scrollable-container { height: calc(100vh - calc(var(--layout-window-mode-padding-top) * 0.25)); } } @media screen and (min-width: 2070px) { nb-layout.window-mode { padding-top: calc(var(--layout-window-mode-padding-top) * 0.5); } nb-layout.window-mode nb-layout-header.fixed { top: calc(var(--layout-window-mode-padding-top) * 0.5); } nb-layout.window-mode nb-layout-header.fixed ~ .layout-container nb-sidebar .main-container-fixed { height: calc(100vh - calc(var(--layout-window-mode-padding-top) * 0.5) - var(--header-height)); top: calc(calc(var(--layout-window-mode-padding-top) * 0.5) + var(--header-height)); } nb-layout.window-mode nb-sidebar.fixed { left: calc((100vw - 1920px) / 2); } nb-layout.window-mode .layout .layout-container nb-sidebar.fixed.right { right: calc((100vw - 1920px) / 2); } nb-layout.window-mode .layout .layout-container nb-sidebar.fixed { top: calc(var(--header-height) + calc(var(--layout-window-mode-padding-top) * 0.5)); } nb-layout.window-mode .scrollable-container { height: calc(100vh - calc(var(--layout-window-mode-padding-top) * 0.5)); box-shadow: var(--layout-window-shadow); } nb-layout.window-mode nb-layout.with-scroll .scrollable-container { height: calc(100vh - calc(var(--layout-window-mode-padding-top) * 0.5)); } } @media screen and (min-width: 2220px) { nb-layout.window-mode { padding-top: var(--layout-window-mode-padding-top); } nb-layout.window-mode nb-layout-header.fixed { top: var(--layout-window-mode-padding-top); } nb-layout.window-mode nb-layout-header.fixed ~ .layout-container nb-sidebar .main-container-fixed { height: calc(100vh - var(--layout-window-mode-padding-top) - var(--header-height)); top: calc(var(--layout-window-mode-padding-top) + var(--header-height)); } nb-layout.window-mode nb-sidebar.fixed { left: calc((100vw - 1920px) / 2); } nb-layout.window-mode .layout .layout-container nb-sidebar.fixed.right { right: calc((100vw - 1920px) / 2); } nb-layout.window-mode .layout .layout-container nb-sidebar.fixed { top: calc(var(--header-height) + var(--layout-window-mode-padding-top)); } nb-layout.window-mode .scrollable-container { height: calc(100vh - var(--layout-window-mode-padding-top)); box-shadow: var(--layout-window-shadow); } nb-layout.window-mode nb-layout.with-scroll .scrollable-container { height: calc(100vh - var(--layout-window-mode-padding-top)); } } nb-layout .layout { background-color: var(--layout-background-color); color: var(--layout-text-color); font-family: var(--layout-text-font-family); font-size: var(--layout-text-font-size); font-weight: var(--layout-text-font-weight); line-height: var(--layout-text-line-height); min-height: var(--layout-min-height); } nb-layout .layout .layout-container nb-sidebar.fixed, nb-layout .layout .layout-container nb-sidebar .main-container-fixed { top: var(--header-height); } nb-layout .layout .layout-container .content nb-layout-footer { box-shadow: var(--footer-shadow); } nb-layout .layout .layout-container .content nb-layout-footer nav { background-color: var(--footer-background-color); border-top: var(--footer-divider-width) var(--footer-divider-style) var(--footer-divider-color); color: var(--footer-text-color); font-family: var(--footer-text-font-family); font-size: var(--footer-text-font-size); font-weight: var(--footer-text-font-weight); line-height: var(--footer-text-line-height); padding: var(--footer-padding); } nb-layout .layout .layout-container .content nb-layout-footer nav a { color: var(--footer-text-highlight-color); } nb-layout .layout .layout-container .content nb-layout-footer nav a:focus, nb-layout .layout .layout-container .content nb-layout-footer nav a:active, nb-layout .layout .layout-container .content nb-layout-footer nav a:hover { color: var(--footer-text-highlight-color); } nb-layout .layout .layout-container .content.center { width: var(--layout-content-width); flex: 0 100 var(--layout-content-width) !important; } nb-layout .layout .layout-container .content .columns nb-layout-column { padding: var(--layout-padding); } @media (max-width: 991.98px) { nb-layout .layout .layout-container .content .columns nb-layout-column { padding: var(--layout-medium-padding); } } @media (max-width: 767.98px) { nb-layout .layout .layout-container .content .columns nb-layout-column { padding: var(--layout-small-padding); } } nb-layout-header { background-color: var(--header-background-color); color: var(--header-text-color); font-family: var(--header-text-font-family); font-size: var(--header-text-font-size); font-weight: var(--header-text-font-weight); line-height: var(--header-text-line-height); } nb-layout-header nav { color: var(--header-text-color); box-shadow: var(--header-shadow); height: var(--header-height); padding: var(--header-padding); } nb-layout-header nav a { color: var(--header-text-color); } nb-layout-header nav a:focus, nb-layout-header nav a:active, nb-layout-header nav a:hover { color: var(--header-text-color); } nb-layout-header ~ .layout-container { min-height: calc(var(--layout-min-height) - var(--header-height)); } nb-layout-header.fixed ~ .layout-container { padding-top: var(--header-height); min-height: var(--layout-min-height); } nb-layout-header.fixed ~ .layout-container nb-sidebar .main-container { height: calc(var(--sidebar-height) - var(--header-height)); } nb-layout.with-subheader nb-sidebar .main-container { box-shadow: none; } nb-sidebar { background-color: var(--sidebar-background-color); box-shadow: var(--sidebar-shadow); color: var(--sidebar-text-color); font-family: var(--sidebar-text-font-family); font-size: var(--sidebar-text-font-size); font-weight: var(--sidebar-text-font-weight); line-height: var(--sidebar-text-line-height); width: var(--sidebar-width); } nb-sidebar .main-container { height: var(--sidebar-height); width: var(--sidebar-width); } nb-sidebar .scrollable { padding: var(--sidebar-padding); position: relative; -webkit-transform: translate3d(0, 0, 0); scrollbar-face-color: var(--sidebar-scrollbar-color); scrollbar-track-color: var(--sidebar-scrollbar-background-color); } @media (max-width: 767.98px) { nb-sidebar .scrollable { overflow-y: scroll; -webkit-overflow-scrolling: touch; } } nb-sidebar .scrollable::-webkit-scrollbar { width: var(--sidebar-scrollbar-width); height: var(--sidebar-scrollbar-width); } nb-sidebar .scrollable::-webkit-scrollbar-thumb { background: var(--sidebar-scrollbar-color); cursor: pointer; border-radius: calc(var(--sidebar-scrollbar-width) * 0.5); } nb-sidebar .scrollable::-webkit-scrollbar-track { background: var(--sidebar-scrollbar-background-color); } nb-sidebar .scrollable::-webkit-scrollbar-corner { background: var(--sidebar-scrollbar-background-color); } nb-sidebar.collapsed { width: 0; padding: 0; } nb-sidebar.collapsed .main-container { width: 0; padding: 0; } nb-sidebar.collapsed .scrollable { width: 0; padding: 0; overflow: hidden; } nb-sidebar.collapsed nb-sidebar-header, nb-sidebar.collapsed nb-sidebar-footer { width: 0; padding: 0; overflow: hidden; } nb-sidebar.compacted { width: var(--sidebar-width-compact); } nb-sidebar.compacted .main-container { width: var(--sidebar-width-compact); } nb-sidebar.compacted nb-menu { width: var(--sidebar-width-compact); } nb-sidebar.compacted nb-menu .menu-item a.active { position: relative; } nb-sidebar.compacted nb-menu .menu-item a.active::before { position: absolute; content: ""; top: 0; height: 100%; width: 4px; background: var(--sidebar-menu-item-highlight-color); } [dir=ltr] nb-sidebar.compacted nb-menu .menu-item a.active::before { left: 0; } [dir=rtl] nb-sidebar.compacted nb-menu .menu-item a.active::before { right: 0; } nb-sidebar.compacted nb-menu > .menu-items > .menu-item > a span, nb-sidebar.compacted nb-menu > .menu-items > .menu-item > a nb-badge, nb-sidebar.compacted nb-menu > .menu-items > .menu-item > a .expand-state { display: none; } nb-sidebar.compacted nb-menu .menu-items > .menu-item { transition: border-color 1s ease; } nb-sidebar.compacted nb-menu .menu-items > .menu-item.menu-group { display: block; color: transparent; width: 0; padding: 0; overflow: hidden; } nb-sidebar.compacted nb-menu .menu-items > .menu-item i { margin-right: 0; } nb-sidebar.compacted nb-menu .menu-items > .menu-item a { justify-content: center; } nb-sidebar.compacted nb-menu .menu-items > .menu-item > .expanded { display: none; } nb-sidebar.compacted.left.fixed ~ .content { margin-left: var(--sidebar-width-compact); } nb-sidebar.compacted.fixed.right ~ .content { margin-left: 0; margin-right: var(--sidebar-width-compact); } nb-sidebar.compacted.left.fixed ~ .content.center { padding-left: var(--sidebar-width-compact); } nb-sidebar.compacted.fixed.right ~ .content.center { padding-left: 0; padding-right: var(--sidebar-width-compact); } [dir=ltr] nb-sidebar.compacted.start.fixed ~ .content { margin-left: var(--sidebar-width-compact); } [dir=rtl] nb-sidebar.compacted.start.fixed ~ .content { margin-right: var(--sidebar-width-compact); } [dir=ltr] nb-sidebar.compacted.fixed.end ~ .content { margin-right: var(--sidebar-width-compact); } [dir=rtl] nb-sidebar.compacted.fixed.end ~ .content { margin-left: var(--sidebar-width-compact); } [dir=ltr] nb-sidebar.compacted.start.fixed ~ .content.center { padding-left: var(--sidebar-width-compact); } [dir=rtl] nb-sidebar.compacted.start.fixed ~ .content.center { padding-right: var(--sidebar-width-compact); } [dir=ltr] nb-sidebar.compacted.fixed.end ~ .content.center { padding-right: var(--sidebar-width-compact); } [dir=rtl] nb-sidebar.compacted.fixed.end ~ .content.center { padding-left: var(--sidebar-width-compact); } nb-sidebar.fixed.left.collapsed + .content, nb-sidebar.fixed.start.collapsed + .content { margin-left: 0; } nb-sidebar.fixed.right.collapsed + .content, nb-sidebar.fixed.end.collapsed + .content { margin-right: 0; } nb-sidebar.expanded { width: var(--sidebar-width); } nb-sidebar.expanded > .scrollable { width: var(--sidebar-width); } nb-sidebar nb-sidebar-header { padding: var(--sidebar-padding); height: var(--sidebar-header-height); } nb-sidebar nb-sidebar-footer { padding: var(--sidebar-padding); height: var(--sidebar-footer-height); } nb-sidebar nb-menu { margin: 0 calc(var(--sidebar-padding) * -1) calc(var(--sidebar-padding) * -1); } nb-calendar-view-mode [nbButton].appearance-ghost.status-basic, nb-calendar-view-mode .appearance-ghost.status-basic[nbButtonToggle], nb-calendar-view-mode [nbButton].appearance-ghost.status-basic:hover, nb-calendar-view-mode [nbButton].appearance-ghost.status-basic:focus, nb-calendar-view-mode [nbButton].appearance-ghost.status-basic:active, nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic, nb-calendar-pageable-navigation .appearance-ghost.status-basic[nbButtonToggle], nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic:hover, nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic:focus, nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic:active { color: var(--calendar-navigation-text-color); font-family: var(--calendar-navigation-text-font-family); font-size: var(--calendar-navigation-title-text-font-size); font-weight: var(--calendar-navigation-title-text-font-weight); line-height: var(--calendar-navigation-title-text-line-height); } nb-calendar-view-mode [nbButton].appearance-ghost.status-basic:focus, nb-calendar-view-mode .appearance-ghost.status-basic[nbButtonToggle]:focus, nb-calendar-view-mode [nbButton].appearance-ghost.status-basic:focus:not(:hover):not(:active), nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic:focus, nb-calendar-pageable-navigation .appearance-ghost.status-basic[nbButtonToggle]:focus, nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic:focus:not(:hover):not(:active) { box-shadow: none; } [dir=ltr] nb-calendar-pageable-navigation { margin-left: auto; } [dir=rtl] nb-calendar-pageable-navigation { margin-right: auto; } nb-calendar-picker { display: block; padding-top: var(--calendar-picker-padding-top); padding-bottom: var(--calendar-picker-padding-bottom); } [dir=ltr] nb-calendar-picker { padding-right: var(--calendar-picker-padding-end); padding-left: var(--calendar-picker-padding-start); } [dir=rtl] nb-calendar-picker { padding-right: var(--calendar-picker-padding-start); padding-left: var(--calendar-picker-padding-end); } nb-calendar-days-names { background: var(--calendar-weekday-background); border-top: var(--calendar-weekday-divider-width) solid var(--calendar-weekday-divider-color); border-bottom: var(--calendar-weekday-divider-width) solid var(--calendar-weekday-divider-color); } [dir=ltr] nb-calendar-days-names { padding-left: var(--calendar-picker-padding-start); padding-right: var(--calendar-picker-padding-end); } [dir=rtl] nb-calendar-days-names { padding-left: var(--calendar-picker-padding-end); padding-right: var(--calendar-picker-padding-start); } nb-calendar-days-names .day { width: var(--calendar-weekday-width); height: var(--calendar-weekday-height); color: var(--calendar-weekday-text-color); font-size: var(--calendar-weekday-text-font-size); font-weight: var(--calendar-weekday-text-font-weight); line-height: var(--calendar-weekday-text-line-height); } nb-calendar-days-names .day.holiday { color: var(--calendar-weekday-holiday-text-color); } nb-calendar-days-names.size-large .day { width: var(--calendar-weekday-large-width); height: var(--calendar-weekday-large-height); } nb-calendar-week-numbers { background: var(--calendar-weeknumber-background); font-size: var(--calendar-weeknumber-text-font-size); font-weight: var(--calendar-weeknumber-text-font-weight); line-height: var(--calendar-weeknumber-text-line-height); color: var(--calendar-weeknumber-text-color); padding-bottom: var(--calendar-picker-padding-bottom); } nb-calendar-week-numbers .sign-container { display: flex; flex-direction: column; border-top: var(--calendar-weeknumber-divider-width) solid var(--calendar-weeknumber-divider-color); border-bottom: var(--calendar-weeknumber-divider-width) solid var(--calendar-weeknumber-divider-color); margin-bottom: var(--calendar-picker-padding-top); } nb-calendar-week-numbers .sign, nb-calendar-week-numbers .week-number { display: flex; align-items: center; justify-content: center; height: var(--calendar-weeknumber-height); width: var(--calendar-weeknumber-width); } nb-calendar-week-numbers.size-large .sign, nb-calendar-week-numbers.size-large .week-number { height: var(--calendar-weeknumber-large-height); width: var(--calendar-weeknumber-large-width); } [dir=ltr] nb-calendar-day-picker nb-calendar-week-numbers { border-right: var(--calendar-weeknumber-divider-width) solid var(--calendar-weeknumber-divider-color); } [dir=rtl] nb-calendar-day-picker nb-calendar-week-numbers { border-left: var(--calendar-weeknumber-divider-width) solid var(--calendar-weeknumber-divider-color); } nb-calendar-picker .day-cell { width: var(--calendar-day-cell-width); height: var(--calendar-day-cell-height); } nb-calendar-picker .day-cell.size-large { width: var(--calendar-day-cell-large-width); height: var(--calendar-day-cell-large-height); } nb-calendar-picker .month-cell { width: var(--calendar-month-cell-width); height: var(--calendar-month-cell-height); } nb-calendar-picker .month-cell.size-large { width: var(--calendar-month-cell-large-width); height: var(--calendar-month-cell-large-height); } nb-calendar-picker .year-cell { width: var(--calendar-year-cell-width); height: var(--calendar-year-cell-height); } nb-calendar-picker .year-cell.size-large { width: var(--calendar-year-cell-large-width); height: var(--calendar-year-cell-large-height); } nb-calendar-picker .cell-content { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; border-radius: var(--calendar-border-radius); } nb-calendar-picker .day-cell, nb-calendar-picker .month-cell, nb-calendar-picker .year-cell { display: flex; align-items: center; justify-content: center; font-family: var(--calendar-text-font-family); font-size: var(--calendar-text-font-size); font-weight: var(--calendar-text-font-weight); line-height: var(--calendar-text-line-height); color: var(--calendar-text-color); text-transform: uppercase; cursor: pointer; } nb-calendar-picker .day-cell, nb-calendar-picker .day-cell .cell-content, nb-calendar-picker .month-cell, nb-calendar-picker .month-cell .cell-content, nb-calendar-picker .year-cell, nb-calendar-picker .year-cell .cell-content { transition-duration: 0.15s; transition-property: background-color, border-color, color; transition-timing-function: ease-in; } nb-calendar-picker .day-cell.empty, nb-calendar-picker .day-cell.disabled, nb-calendar-picker .month-cell.empty, nb-calendar-picker .month-cell.disabled, nb-calendar-picker .year-cell.empty, nb-calendar-picker .year-cell.disabled { cursor: default; } nb-calendar-picker .day-cell.bounding-month, nb-calendar-picker .month-cell.bounding-month, nb-calendar-picker .year-cell.bounding-month { color: var(--calendar-cell-inactive-text-color); } nb-calendar-picker .day-cell:not(.disabled):not(.empty):hover .cell-content, nb-calendar-picker .month-cell:not(.disabled):not(.empty):hover .cell-content, nb-calendar-picker .year-cell:not(.disabled):not(.empty):hover .cell-content { background-color: var(--calendar-cell-hover-background-color); border-color: var(--calendar-cell-hover-border-color); color: var(--calendar-cell-hover-text-color); font-size: var(--calendar-cell-hover-text-font-size); font-weight: var(--calendar-cell-hover-text-font-weight); line-height: var(--calendar-cell-hover-text-line-height); } nb-calendar-picker .day-cell:not(.disabled):not(.empty):active .cell-content, nb-calendar-picker .month-cell:not(.disabled):not(.empty):active .cell-content, nb-calendar-picker .year-cell:not(.disabled):not(.empty):active .cell-content { background-color: var(--calendar-cell-active-background-color); border-color: var(--calendar-cell-active-border-color); color: var(--calendar-cell-active-text-color); font-size: var(--calendar-cell-active-text-font-size); font-weight: var(--calendar-cell-active-text-font-weight); line-height: var(--calendar-cell-active-text-line-height); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).today .cell-content, nb-calendar-picker .month-cell:not(.disabled):not(.empty).today .cell-content, nb-calendar-picker .year-cell:not(.disabled):not(.empty).today .cell-content { background-color: var(--calendar-cell-today-background-color); border: 1px solid var(--calendar-cell-today-border-color); color: var(--calendar-cell-today-text-color); font-size: var(--calendar-cell-today-text-font-size); font-weight: var(--calendar-cell-today-text-font-weight); line-height: var(--calendar-cell-today-text-line-height); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).today .cell-content:hover, nb-calendar-picker .month-cell:not(.disabled):not(.empty).today .cell-content:hover, nb-calendar-picker .year-cell:not(.disabled):not(.empty).today .cell-content:hover { background-color: var(--calendar-cell-today-hover-background-color); border-color: var(--calendar-cell-today-hover-border-color); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).today .cell-content:active, nb-calendar-picker .month-cell:not(.disabled):not(.empty).today .cell-content:active, nb-calendar-picker .year-cell:not(.disabled):not(.empty).today .cell-content:active { background-color: var(--calendar-cell-today-active-background-color); border-color: var(--calendar-cell-today-active-border-color); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).selected .cell-content, nb-calendar-picker .month-cell:not(.disabled):not(.empty).selected .cell-content, nb-calendar-picker .year-cell:not(.disabled):not(.empty).selected .cell-content { background-color: var(--calendar-cell-selected-background-color); border-color: var(--calendar-cell-selected-border-color); color: var(--calendar-cell-selected-text-color); font-size: var(--calendar-cell-selected-text-font-size); font-weight: var(--calendar-cell-selected-text-font-weight); line-height: var(--calendar-cell-selected-text-line-height); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).selected .cell-content:hover, nb-calendar-picker .month-cell:not(.disabled):not(.empty).selected .cell-content:hover, nb-calendar-picker .year-cell:not(.disabled):not(.empty).selected .cell-content:hover { background-color: var(--calendar-cell-selected-hover-background-color); border-color: var(--calendar-cell-selected-hover-border-color); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).selected .cell-content:active, nb-calendar-picker .month-cell:not(.disabled):not(.empty).selected .cell-content:active, nb-calendar-picker .year-cell:not(.disabled):not(.empty).selected .cell-content:active { background-color: var(--calendar-cell-selected-active-background-color); border-color: var(--calendar-cell-selected-active-border-color); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).today.selected, nb-calendar-picker .month-cell:not(.disabled):not(.empty).today.selected, nb-calendar-picker .year-cell:not(.disabled):not(.empty).today.selected { background-color: var(--calendar-cell-selected-background-color); border-radius: var(--calendar-border-radius); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).today.selected .cell-content, nb-calendar-picker .month-cell:not(.disabled):not(.empty).today.selected .cell-content, nb-calendar-picker .year-cell:not(.disabled):not(.empty).today.selected .cell-content { background-color: var(--calendar-cell-today-selected-background-color); border-color: var(--calendar-cell-today-selected-border-color); color: var(--calendar-cell-today-selected-text-color); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).today.selected .cell-content:hover, nb-calendar-picker .month-cell:not(.disabled):not(.empty).today.selected .cell-content:hover, nb-calendar-picker .year-cell:not(.disabled):not(.empty).today.selected .cell-content:hover { background-color: var(--calendar-cell-today-selected-hover-background-color); border-color: var(--calendar-cell-today-selected-hover-border-color); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).today.selected .cell-content:focus, nb-calendar-picker .month-cell:not(.disabled):not(.empty).today.selected .cell-content:focus, nb-calendar-picker .year-cell:not(.disabled):not(.empty).today.selected .cell-content:focus { background-color: var(--calendar-cell-today-selected-active-background-color); border-color: var(--calendar-cell-today-selected-active-border-color); } nb-calendar-picker .day-cell.disabled, nb-calendar-picker .month-cell.disabled, nb-calendar-picker .year-cell.disabled { color: var(--calendar-cell-disabled-text-color); } nb-calendar-picker .day-cell.disabled.today .cell-content, nb-calendar-picker .month-cell.disabled.today .cell-content, nb-calendar-picker .year-cell.disabled.today .cell-content { border: 1px solid var(--calendar-cell-today-disabled-border-color); } nb-calendar-picker .range-cell.in-range.selected:not(.disabled):not(.empty) { background-color: var(--calendar-cell-selected-background-color); border-radius: 0; } [dir=ltr] nb-calendar-picker .range-cell.in-range.selected:not(.disabled):not(.empty).start { border-top-left-radius: var(--calendar-border-radius); border-bottom-left-radius: var(--calendar-border-radius); } [dir=rtl] nb-calendar-picker .range-cell.in-range.selected:not(.disabled):not(.empty).start { border-top-right-radius: var(--calendar-border-radius); border-bottom-right-radius: var(--calendar-border-radius); } [dir=ltr] nb-calendar-picker .range-cell.in-range.selected:not(.disabled):not(.empty).end { border-top-right-radius: var(--calendar-border-radius); border-bottom-right-radius: var(--calendar-border-radius); } [dir=rtl] nb-calendar-picker .range-cell.in-range.selected:not(.disabled):not(.empty).end { border-top-left-radius: var(--calendar-border-radius); border-bottom-left-radius: var(--calendar-border-radius); } nb-base-calendar nb-card { background-color: var(--calendar-background-color); border: var(--calendar-border-width) var(--calendar-border-style) var(--calendar-border-color); box-shadow: none; margin: 0; width: var(--calendar-width); overflow: hidden; } nb-base-calendar nb-card-body { padding: 0; } nb-base-calendar .calendar-navigation { border: none; display: flex; padding: var(--calendar-navigation-padding); color: var(--calendar-navigation-text-color); font-family: var(--calendar-navigation-text-font-family); font-size: var(--calendar-navigation-title-text-font-size); font-weight: var(--calendar-navigation-title-text-font-weight); line-height: var(--calendar-navigation-title-text-line-height); } nb-base-calendar:not(.has-navigation) nb-calendar-week-numbers .sign-container, nb-base-calendar:not(.has-navigation) nb-calendar-days-names { border-top: 0; } nb-base-calendar.has-week-number nb-card { width: calc(var(--calendar-width) + var(--calendar-weeknumber-width) + var(--calendar-weeknumber-divider-width)); } nb-base-calendar.has-week-number .month-cell, nb-base-calendar.has-week-number .year-cell { flex: 1 0 auto; } nb-base-calendar.size-large nb-card { width: var(--calendar-large-width); } nb-base-calendar.size-large.has-week-number nb-card { width: calc(var(--calendar-large-width) + var(--calendar-weeknumber-large-width) + var(--calendar-weeknumber-divider-width)); } nb-card { background-color: var(--card-background-color); border: var(--card-border-width) var(--card-border-style) var(--card-border-color); border-radius: var(--card-border-radius); box-shadow: var(--card-shadow); color: var(--card-text-color); font-family: var(--card-text-font-family); font-size: var(--card-text-font-size); font-weight: var(--card-text-font-weight); line-height: var(--card-text-line-height); margin-bottom: var(--card-margin-bottom); scrollbar-face-color: var(--card-scrollbar-color); scrollbar-track-color: var(--card-scrollbar-background-color); } nb-card::-webkit-scrollbar { width: var(--card-scrollbar-width); height: var(--card-scrollbar-width); } nb-card::-webkit-scrollbar-thumb { background: var(--card-scrollbar-color); cursor: pointer; border-radius: calc(var(--card-scrollbar-width) * 0.5); } nb-card::-webkit-scrollbar-track { background: var(--card-scrollbar-background-color); } nb-card::-webkit-scrollbar-corner { background: var(--card-scrollbar-background-color); } nb-card.size-tiny { height: var(--card-height-tiny); } nb-card.size-small { height: var(--card-height-small); } nb-card.size-medium { height: var(--card-height-medium); } nb-card.size-large { height: var(--card-height-large); } nb-card.size-giant { height: var(--card-height-giant); } nb-card.status-basic nb-card-header { background-color: var(--card-header-basic-background-color); border-bottom-width: 0; border-bottom-color: var(--card-header-basic-background-color); color: var(--card-header-basic-text-color); } nb-card.status-basic nb-card-header a, nb-card.status-basic nb-card-header a:hover { color: var(--card-header-basic-text-color); } nb-card.status-primary nb-card-header { background-color: var(--card-header-primary-background-color); border-bottom-width: 0; border-bottom-color: var(--card-header-primary-background-color); color: var(--card-header-primary-text-color); } nb-card.status-primary nb-card-header a, nb-card.status-primary nb-card-header a:hover { color: var(--card-header-primary-text-color); } nb-card.status-success nb-card-header { background-color: var(--card-header-success-background-color); border-bottom-width: 0; border-bottom-color: var(--card-header-success-background-color); color: var(--card-header-success-text-color); } nb-card.status-success nb-card-header a, nb-card.status-success nb-card-header a:hover { color: var(--card-header-success-text-color); } nb-card.status-warning nb-card-header { background-color: var(--card-header-warning-background-color); border-bottom-width: 0; border-bottom-color: var(--card-header-warning-background-color); color: var(--card-header-warning-text-color); } nb-card.status-warning nb-card-header a, nb-card.status-warning nb-card-header a:hover { color: var(--card-header-warning-text-color); } nb-card.status-danger nb-card-header { background-color: var(--card-header-danger-background-color); border-bottom-width: 0; border-bottom-color: var(--card-header-danger-background-color); color: var(--card-header-danger-text-color); } nb-card.status-danger nb-card-header a, nb-card.status-danger nb-card-header a:hover { color: var(--card-header-danger-text-color); } nb-card.status-info nb-card-header { background-color: var(--card-header-info-background-color); border-bottom-width: 0; border-bottom-color: var(--card-header-info-background-color); color: var(--card-header-info-text-color); } nb-card.status-info nb-card-header a, nb-card.status-info nb-card-header a:hover { color: var(--card-header-info-text-color); } nb-card.status-control nb-card-header { background-color: var(--card-header-control-background-color); border-bottom-width: 0; border-bottom-color: var(--card-header-control-background-color); color: var(--card-header-control-text-color); } nb-card.status-control nb-card-header a, nb-card.status-control nb-card-header a:hover { color: var(--card-header-control-text-color); } nb-card.accent-basic { border-top-color: var(--card-header-basic-background-color); } nb-card.accent-primary { border-top-color: var(--card-header-primary-background-color); } nb-card.accent-success { border-top-color: var(--card-header-success-background-color); } nb-card.accent-warning { border-top-color: var(--card-header-warning-background-color); } nb-card.accent-danger { border-top-color: var(--card-header-danger-background-color); } nb-card.accent-info { border-top-color: var(--card-header-info-background-color); } nb-card.accent-control { border-top-color: var(--card-header-control-background-color); } nb-card.accent { border-top-style: var(--card-border-style); border-top-width: var(--card-border-radius); } nb-card.accent nb-card-header { border-radius: 0; } nb-card-body { flex: 1; -ms-flex: 1 1 auto; overflow: auto; padding: var(--card-padding); position: relative; scrollbar-face-color: var(--card-scrollbar-color); scrollbar-track-color: var(--card-scrollbar-background-color); } nb-card-body::-webkit-scrollbar { width: var(--card-scrollbar-width); height: var(--card-scrollbar-width); } nb-card-body::-webkit-scrollbar-thumb { background: var(--card-scrollbar-color); cursor: pointer; border-radius: calc(var(--card-scrollbar-width) * 0.5); } nb-card-body::-webkit-scrollbar-track { background: var(--card-scrollbar-background-color); } nb-card-body::-webkit-scrollbar-corner { background: var(--card-scrollbar-background-color); } nb-card-footer { padding: var(--card-padding); border-top: var(--card-divider-width) var(--card-divider-style) var(--card-divider-color); border-bottom-left-radius: var(--card-border-radius); border-bottom-right-radius: var(--card-border-radius); } nb-card-header { padding: var(--card-padding); border-bottom: var(--card-divider-width) var(--card-divider-style) var(--card-divider-color); border-top-left-radius: var(--card-border-radius); border-top-right-radius: var(--card-border-radius); color: var(--card-header-text-color); font-family: var(--card-header-text-font-family); font-size: var(--card-header-text-font-size); font-weight: var(--card-header-text-font-weight); line-height: var(--card-header-text-line-height); } nb-card-header h1 { margin: 0; } nb-card-header h2 { margin: 0; } nb-card-header h3 { margin: 0; } nb-card-header h4 { margin: 0; } nb-card-header h5 { margin: 0; } nb-card-header h6 { margin: 0; } nb-reveal-card { box-shadow: var(--card-shadow); margin-bottom: var(--card-margin-bottom); } .second-card-container { height: 100%; border-radius: var(--card-border-radius); } .reveal-button { line-height: var(--card-text-line-height); padding: var(--card-padding); } .flip-button { line-height: var(--card-text-line-height); margin-bottom: var(--card-margin-bottom); padding: var(--card-padding); } [dir=ltr] .flipcard-body .front-container { margin-right: -100%; } [dir=rtl] .flipcard-body .front-container { margin-left: -100%; } nb-tabset { background-color: var(--tabset-background-color); border-radius: var(--tabset-border-radius); box-shadow: var(--tabset-shadow); } nb-tabset .tabset { border-bottom: var(--tabset-divider-width) var(--tabset-divider-style) var(--tabset-divider-color); } nb-tabset .tab-link { background-color: var(--tabset-tab-background-color); cursor: pointer; padding: var(--tabset-tab-padding); color: var(--tabset-tab-text-color); font-family: var(--tabset-tab-text-font-family); font-size: var(--tabset-tab-text-font-size); font-weight: var(--tabset-tab-text-font-weight); line-height: var(--tabset-tab-text-line-height); text-transform: var(--tabset-tab-text-transform); } nb-tabset .tab-link::before { background-color: var(--tabset-tab-underline-color); height: var(--tabset-tab-underline-width); } nb-tabset nb-badge.dot-mode.position-left { left: var(--tabset-tab–badge-dot-mode-horizontal-offset); } nb-tabset nb-badge.dot-mode.position-right { right: var(--tabset-tab–badge-dot-mode-horizontal-offset); } [dir=ltr] nb-tabset nb-badge.dot-mode.position-start { left: var(--tabset-tab–badge-dot-mode-horizontal-offset); } [dir=rtl] nb-tabset nb-badge.dot-mode.position-start { right: var(--tabset-tab–badge-dot-mode-horizontal-offset); } [dir=ltr] nb-tabset nb-badge.dot-mode.position-end { right: var(--tabset-tab–badge-dot-mode-horizontal-offset); } [dir=rtl] nb-tabset nb-badge.dot-mode.position-end { left: var(--tabset-tab–badge-dot-mode-horizontal-offset); } nb-tabset .tab.active .tab-link { background-color: var(--tabset-tab-active-background-color); color: var(--tabset-tab-active-text-color); } nb-tabset .tab.active .tab-link::before { background-color: var(--tabset-tab-active-underline-color); } nb-tabset .tab:focus .tab-link { background-color: var(--tabset-tab-focus-background-color); color: var(--tabset-tab-focus-text-color); } nb-tabset .tab:focus .tab-link::before { background-color: var(--tabset-tab-focus-underline-color); } nb-tabset .tab:hover .tab-link { color: var(--tabset-tab-hover-text-color); background-color: var(--tabset-tab-hover-background-color); } nb-tabset .tab:hover .tab-link::before { background-color: var(--tabset-tab-hover-underline-color); } nb-tabset .tab.disabled { cursor: default; pointer-events: none; } nb-tabset .tab.disabled .tab-link { background-color: var(--tabset-tab-disabled-background-color); color: var(--tabset-tab-disabled-text-color); cursor: default; pointer-events: none; } nb-tabset .tab.disabled .tab-link::before { background-color: var(--tabset-tab-disabled-underline-color); } @media screen and (max-width: 36rem) { nb-tabset .tab.responsive .tab-text { display: none; } } nb-tabset nb-tab { background-color: var(--tabset-content-background-color); color: var(--tabset-content-text-color); font-family: var(--tabset-content-text-font-family); font-size: var(--tabset-content-text-font-size); font-weight: var(--tabset-content-text-font-weight); line-height: var(--tabset-content-text-line-height); padding: var(--tabset-content-padding); scrollbar-face-color: var(--tabset-scrollbar-color); scrollbar-track-color: var(--tabset-scrollbar-background-color); } nb-tabset nb-tab::-webkit-scrollbar { width: var(--tabset-scrollbar-width); height: var(--tabset-scrollbar-width); } nb-tabset nb-tab::-webkit-scrollbar-thumb { background: var(--tabset-scrollbar-color); cursor: pointer; border-radius: calc(var(--tabset-scrollbar-width) * 0.5); } nb-tabset nb-tab::-webkit-scrollbar-track { background: var(--tabset-scrollbar-background-color); } nb-tabset nb-tab::-webkit-scrollbar-corner { background: var(--tabset-scrollbar-background-color); } nb-route-tabset { scrollbar-face-color: var(--route-tabset-scrollbar-color); scrollbar-track-color: var(--route-tabset-scrollbar-background-color); background-color: var(--route-tabset-background-color); border-radius: var(--route-tabset-border-radius); box-shadow: var(--route-tabset-shadow); } nb-route-tabset::-webkit-scrollbar { width: var(--route-tabset-scrollbar-width); height: var(--route-tabset-scrollbar-width); } nb-route-tabset::-webkit-scrollbar-thumb { background: var(--route-tabset-scrollbar-color); cursor: pointer; border-radius: calc(var(--route-tabset-scrollbar-width) * 0.5); } nb-route-tabset::-webkit-scrollbar-track { background: var(--route-tabset-scrollbar-background-color); } nb-route-tabset::-webkit-scrollbar-corner { background: var(--route-tabset-scrollbar-background-color); } nb-route-tabset .route-tabset { border-bottom: var(--route-tabset-divider-width) var(--route-tabset-divider-style) var(--route-tabset-divider-color); } nb-route-tabset .tab-link { background-color: var(--route-tabset-tab-background-color); cursor: pointer; padding: var(--route-tabset-tab-padding); color: var(--route-tabset-tab-text-color); font-family: var(--route-tabset-tab-text-font-family); font-size: var(--route-tabset-tab-text-font-size); font-weight: var(--route-tabset-tab-text-font-weight); line-height: var(--route-tabset-tab-text-line-height); text-transform: var(--route-tabset-tab-text-transform); } nb-route-tabset .tab-link::before { background-color: var(--route-tabset-tab-underline-color); height: var(--route-tabset-tab-underline-width); } nb-route-tabset .route-tab.active .tab-link { background-color: var(--tabset-tab-active-background-color); color: var(--tabset-tab-active-text-color); } nb-route-tabset .route-tab.active .tab-link::before { background-color: var(--tabset-tab-active-underline-color); } nb-route-tabset .tab-link:focus { background-color: var(--route-tabset-tab-focus-background-color); color: var(--route-tabset-tab-focus-text-color); } nb-route-tabset .tab-link:focus::before { background-color: var(--route-tabset-tab-focus-underline-color); } nb-route-tabset .tab-link:hover { background-color: var(--route-tabset-tab-hover-background-color); color: var(--route-tabset-tab-hover-text-color); } nb-route-tabset .tab-link:hover::before { background-color: var(--route-tabset-tab-hover-underline-color); } nb-route-tabset .route-tab.disabled { cursor: default; pointer-events: none; } nb-route-tabset .route-tab.disabled .tab-link { background-color: var(--route-tabset-tab-disabled-background-color); color: var(--route-tabset-tab-disabled-text-color); cursor: default; pointer-events: none; } nb-route-tabset .route-tab.disabled .tab-link::before { background-color: var(--route-tabset-tab-disabled-underline-color); } @media screen and (max-width: 36rem) { nb-route-tabset .route-tab.responsive .tab-text { display: none; } } nb-menu { background-color: var(--menu-background-color); } nb-menu ul.menu-items { margin: 0; padding: 0; } nb-menu .menu-group, nb-menu .menu-item a { font-family: var(--menu-text-font-family); font-size: var(--menu-text-font-size); font-weight: var(--menu-text-font-weight); line-height: var(--menu-text-line-height); padding: var(--menu-item-padding); } nb-menu .menu-group, nb-menu .menu-group nb-icon.menu-icon { color: var(--menu-group-text-color); } nb-menu .menu-item a { color: var(--menu-text-color); border-radius: var(--menu-item-border-radius); } nb-menu .menu-item a.active { background-color: var(--menu-item-active-background-color); color: var(--menu-item-active-text-color); } nb-menu .menu-item a.active .menu-icon { color: var(--menu-item-icon-active-color); } nb-menu .menu-item a:hover { background-color: var(--menu-item-hover-background-color); color: var(--menu-item-hover-text-color); cursor: var(--menu-item-hover-cursor); } nb-menu .menu-item a:hover .menu-icon { color: var(--menu-item-icon-hover-color); } nb-menu .menu-item .menu-icon { color: var(--menu-item-icon-color); font-size: var(--menu-item-icon-width); margin: var(--menu-item-icon-margin); width: 1em; text-align: center; } nb-menu .menu-item .expand-state { color: var(--menu-item-icon-color); } nb-menu .menu-item { border-bottom: var(--menu-item-divider-width) var(--menu-item-divider-style) var(--menu-item-divider-color); } nb-menu .menu-item:first-child { border-top: none; } nb-menu .menu-item:last-child { border-bottom: none; } nb-menu .menu-item .menu-item:first-child { border-top: var(--menu-item-divider-width) var(--menu-item-divider-style) var(--menu-item-divider-color); } nb-menu .menu-item > .menu-items { background-color: var(--menu-submenu-background-color); margin: var(--menu-submenu-margin); padding: var(--menu-submenu-padding); } nb-menu .menu-item > .menu-items > .menu-item { background: var(--menu-submenu-background-color); color: var(--menu-submenu-text-color); } nb-menu .menu-item > .menu-items > .menu-item a { border-color: var(--menu-submenu-item-border-color); border-style: var(--menu-submenu-item-border-style); border-width: var(--menu-submenu-item-border-width); padding: var(--menu-submenu-item-padding); } nb-menu .menu-item > .menu-items > .menu-item a.active { background-color: var(--menu-submenu-item-active-background-color); border-color: var(--menu-submenu-item-active-border-color); color: var(--menu-submenu-item-active-text-color); } nb-menu .menu-item > .menu-items > .menu-item a.active .menu-icon { color: var(--menu-submenu-item-icon-active-color); } nb-menu .menu-item > .menu-items > .menu-item a:hover { background-color: var(--menu-submenu-item-hover-background-color); border-color: var(--menu-submenu-item-hover-border-color); color: var(--menu-submenu-item-hover-text-color); } nb-menu .menu-item > .menu-items > .menu-item a:hover .menu-icon { color: var(--menu-submenu-item-icon-hover-color); } nb-menu .menu-item > .menu-items > .menu-item a.active:hover { background-color: var(--menu-submenu-item-active-hover-background-color); border-color: var(--menu-submenu-item-active-hover-border-color); color: var(--menu-submenu-item-active-hover-text-color); } nb-menu .menu-item > .menu-items > .menu-item a.active:hover .menu-icon { color: var(--menu-submenu-item-icon-active-hover-color); } nb-menu .menu-item > .menu-items > .menu-group, nb-menu .menu-item > .menu-items > .menu-group nb-icon.menu-icon { color: var(--menu-group-text-color); } nb-user .user-picture { background-color: var(--user-picture-box-background-color); border: var(--user-picture-box-border-width) solid var(--user-picture-box-border-color); } nb-user .initials { color: var(--user-initials-text-color); font-family: var(--user-initials-text-font-family); font-weight: var(--user-initials-text-font-weight); } nb-user .user-name { color: var(--user-name-text-color); font-family: var(--user-name-text-font-family); font-weight: var(--user-name-text-font-weight); } nb-user .user-title { color: var(--user-title-text-color); font-family: var(--user-title-text-font-family); font-weight: var(--user-title-text-font-weight); } nb-user.size-tiny .user-picture { height: var(--user-tiny-height); width: var(--user-tiny-width); } nb-user.size-tiny .initials { font-size: var(--user-tiny-initials-text-font-size); line-height: var(--user-tiny-initials-text-line-height); } nb-user.size-tiny .user-name { font-size: var(--user-tiny-name-text-font-size); line-height: var(--user-tiny-name-text-line-height); } nb-user.size-tiny .user-title { font-size: var(--user-tiny-title-text-font-size); line-height: var(--user-tiny-title-text-line-height); } nb-user.size-small .user-picture { height: var(--user-small-height); width: var(--user-small-width); } nb-user.size-small .initials { font-size: var(--user-small-initials-text-font-size); line-height: var(--user-small-initials-text-line-height); } nb-user.size-small .user-name { font-size: var(--user-small-name-text-font-size); line-height: var(--user-small-name-text-line-height); } nb-user.size-small .user-title { font-size: var(--user-small-title-text-font-size); line-height: var(--user-small-title-text-line-height); } nb-user.size-medium .user-picture { height: var(--user-medium-height); width: var(--user-medium-width); } nb-user.size-medium .initials { font-size: var(--user-medium-initials-text-font-size); line-height: var(--user-medium-initials-text-line-height); } nb-user.size-medium .user-name { font-size: var(--user-medium-name-text-font-size); line-height: var(--user-medium-name-text-line-height); } nb-user.size-medium .user-title { font-size: var(--user-medium-title-text-font-size); line-height: var(--user-medium-title-text-line-height); } nb-user.size-large .user-picture { height: var(--user-large-height); width: var(--user-large-width); } nb-user.size-large .initials { font-size: var(--user-large-initials-text-font-size); line-height: var(--user-large-initials-text-line-height); } nb-user.size-large .user-name { font-size: var(--user-large-name-text-font-size); line-height: var(--user-large-name-text-line-height); } nb-user.size-large .user-title { font-size: var(--user-large-title-text-font-size); line-height: var(--user-large-title-text-line-height); } nb-user.size-giant .user-picture { height: var(--user-giant-height); width: var(--user-giant-width); } nb-user.size-giant .initials { font-size: var(--user-giant-initials-text-font-size); line-height: var(--user-giant-initials-text-line-height); } nb-user.size-giant .user-name { font-size: var(--user-giant-name-text-font-size); line-height: var(--user-giant-name-text-line-height); } nb-user.size-giant .user-title { font-size: var(--user-giant-title-text-font-size); line-height: var(--user-giant-title-text-line-height); } nb-user.shape-rectangle .user-picture { border-radius: var(--user-rectangle-border-radius); } nb-user.shape-semi-round .user-picture { border-radius: var(--user-semi-round-border-radius); } nb-user.shape-round .user-picture { border-radius: var(--user-round-border-radius); } nb-actions { background-color: var(--actions-background-color); color: var(--actions-text-color); font-family: var(--actions-text-font-family); font-weight: var(--actions-text-font-weight); line-height: var(--actions-text-line-height); } nb-actions.size-tiny nb-action { font-size: var(--actions-tiny-text-font-size); height: var(--actions-tiny-height); padding: var(--actions-tiny-padding); } nb-actions.size-tiny nb-action nb-icon { font-size: var(--actions-tiny-icon-height); } nb-actions.size-small nb-action { font-size: var(--actions-small-text-font-size); height: var(--actions-small-height); padding: var(--actions-small-padding); } nb-actions.size-small nb-action nb-icon { font-size: var(--actions-small-icon-height); } nb-actions.size-medium nb-action { font-size: var(--actions-medium-text-font-size); height: var(--actions-medium-height); padding: var(--actions-medium-padding); } nb-actions.size-medium nb-action nb-icon { font-size: var(--actions-medium-icon-height); } nb-actions.size-large nb-action { font-size: var(--actions-large-text-font-size); height: var(--actions-large-height); padding: var(--actions-large-padding); } nb-actions.size-large nb-action nb-icon { font-size: var(--actions-large-icon-height); } nb-actions.size-giant nb-action { font-size: var(--actions-giant-text-font-size); height: var(--actions-giant-height); padding: var(--actions-giant-padding); } nb-actions.size-giant nb-action nb-icon { font-size: var(--actions-giant-icon-height); } [dir=ltr] nb-action { border-left: var(--actions-divider-width) var(--actions-divider-style) var(--actions-divider-color); } [dir=rtl] nb-action { border-right: var(--actions-divider-width) var(--actions-divider-style) var(--actions-divider-color); } [dir=ltr] nb-action:first-child { border-left: none !important; } [dir=rtl] nb-action:first-child { border-right: none !important; } nb-action nb-icon { color: var(--actions-icon-color); } nb-action.disabled { color: var(--actions-disabled-text-color); } nb-action.disabled nb-icon { color: var(--actions-disabled-icon-color); } nb-search-field .close-button { z-index: 1; } nb-search-field .search { background: var(--search-background-color); } nb-search-field .search span.info { color: var(--search-info-text-color); font-family: var(--search-info-text-font-family); font-size: var(--search-info-text-font-size); font-weight: var(--search-info-text-font-weight); line-height: var(--search-info-text-line-height); } nb-search-field .search input { border-bottom: var(--search-divider-width) var(--search-divider-style) var(--search-divider-color); color: var(--search-text-color); font-family: var(--search-text-font-family); font-size: var(--search-text-font-size); font-weight: var(--search-text-font-weight); line-height: var(--search-text-line-height); } nb-search-field .search input::-moz-placeholder { color: var(--search-placeholder-text-color); } nb-search-field .search input::placeholder { color: var(--search-placeholder-text-color); } nb-search-field .search input::-ms-clear { display: none; } nb-search-field.rotate-layout { opacity: 0; background: var(--search-background-color); } nb-search-field.modal-zoomin .search::before, nb-search-field.modal-zoomin .search::after { border: 1.5rem solid var(--search-extra-background-color); } nb-search-field.modal-half .form-wrapper { background: var(--search-background-color); } nb-search-field.modal-half .search::before { background: var(--search-extra-background-color); } nb-search-field.modal-drop .form-content::after { background: var(--search-divider-color); } nb-search-field.modal-drop .search::before { background: var(--search-background-color); } nb-search-field.curtain .search::after { background: var(--search-background-color); } nb-search-field.curtain .search { background: var(--search-background-color); } nb-search-field.column-curtain::before { background: var(--search-background-color); } nb-search-field.column-curtain::after { background: transparent; } nb-search-field.column-curtain.show::after { background: var(--search-extra-background-color); } .nb-spinner-container { position: relative; } nb-spinner .message { color: var(--spinner-text-color); font-family: var(--spinner-text-font-family); font-size: var(--spinner-text-font-size); font-weight: var(--spinner-text-font-weight); line-height: var(--spinner-text-line-height); } nb-spinner.status-basic { background-color: var(--spinner-basic-background-color); } nb-spinner.status-basic .spin-circle { border-top-color: var(--spinner-basic-circle-filled-color); border-right-color: var(--spinner-basic-circle-empty-color); border-bottom-color: var(--spinner-basic-circle-filled-color); border-left-color: var(--spinner-basic-circle-filled-color); } nb-spinner.status-primary { background-color: var(--spinner-primary-background-color); } nb-spinner.status-primary .spin-circle { border-top-color: var(--spinner-primary-circle-filled-color); border-right-color: var(--spinner-primary-circle-empty-color); border-bottom-color: var(--spinner-primary-circle-filled-color); border-left-color: var(--spinner-primary-circle-filled-color); } nb-spinner.status-success { background-color: var(--spinner-success-background-color); } nb-spinner.status-success .spin-circle { border-top-color: var(--spinner-success-circle-filled-color); border-right-color: var(--spinner-success-circle-empty-color); border-bottom-color: var(--spinner-success-circle-filled-color); border-left-color: var(--spinner-success-circle-filled-color); } nb-spinner.status-warning { background-color: var(--spinner-warning-background-color); } nb-spinner.status-warning .spin-circle { border-top-color: var(--spinner-warning-circle-filled-color); border-right-color: var(--spinner-warning-circle-empty-color); border-bottom-color: var(--spinner-warning-circle-filled-color); border-left-color: var(--spinner-warning-circle-filled-color); } nb-spinner.status-danger { background-color: var(--spinner-danger-background-color); } nb-spinner.status-danger .spin-circle { border-top-color: var(--spinner-danger-circle-filled-color); border-right-color: var(--spinner-danger-circle-empty-color); border-bottom-color: var(--spinner-danger-circle-filled-color); border-left-color: var(--spinner-danger-circle-filled-color); } nb-spinner.status-info { background-color: var(--spinner-info-background-color); } nb-spinner.status-info .spin-circle { border-top-color: var(--spinner-info-circle-filled-color); border-right-color: var(--spinner-info-circle-empty-color); border-bottom-color: var(--spinner-info-circle-filled-color); border-left-color: var(--spinner-info-circle-filled-color); } nb-spinner.status-control { background-color: var(--spinner-control-background-color); } nb-spinner.status-control .spin-circle { border-top-color: var(--spinner-control-circle-filled-color); border-right-color: var(--spinner-control-circle-empty-color); border-bottom-color: var(--spinner-control-circle-filled-color); border-left-color: var(--spinner-control-circle-filled-color); } nb-spinner.size-tiny { font-size: var(--spinner-height-tiny); } nb-spinner.size-small { font-size: var(--spinner-height-small); } nb-spinner.size-medium { font-size: var(--spinner-height-medium); } nb-spinner.size-large { font-size: var(--spinner-height-large); } nb-spinner.size-giant { font-size: var(--spinner-height-giant); } @keyframes spin { 0% { transform: rotate(0deg); } 40% { transform: rotate(230deg); } 100% { transform: rotate(360deg); } } .nb-timepicker-container { width: var(--timepicker-container-width); height: var(--timepicker-container-height); } .nb-timepicker-container .list-item { color: var(--timepicker-cell-text-color); font-size: var(--timepicker-cell-text-font-size); font-family: var(--timepicker-cell-text-font-family); height: var(--timepicker-cell-height); line-height: var(--timepicker-cell-text-line-height); font-weight: var(--timepicker-cell-text-font-weight); } .nb-timepicker-container .list-item:first-child { border-top: none; } .nb-timepicker-container .list-item:hover { background-color: var(--timepicker-cell-hover-background-color); color: var(--timepicker-cell-hover-text-color); } .nb-timepicker-container .list-item:focus { background-color: var(--timepicker-cell-focus-background-color); color: var(--timepicker-cell-focus-text-color); } .nb-timepicker-container .list-item.selected { background-color: var(--timepicker-cell-active-background-color); color: var(--timepicker-cell-active-text-color); } .nb-timepicker-container .values-list { scrollbar-face-color: var(--timepicker-scrollbar-color); scrollbar-track-color: var(--timepicker-scrollbar-background-color); } [dir=ltr] .nb-timepicker-container .values-list:not(:last-of-type) { border-right: var(--timepicker-border-width) var(--timepicker-border-style) var(--timepicker-border-color); } [dir=rtl] .nb-timepicker-container .values-list:not(:last-of-type) { border-left: var(--timepicker-border-width) var(--timepicker-border-style) var(--timepicker-border-color); } .nb-timepicker-container .values-list::-webkit-scrollbar { width: var(--timepicker-scrollbar-width); height: var(--timepicker-scrollbar-width); } .nb-timepicker-container .values-list::-webkit-scrollbar-thumb { background: var(--timepicker-scrollbar-color); cursor: pointer; border-radius: calc(var(--timepicker-scrollbar-width) * 0.5); } .nb-timepicker-container .values-list::-webkit-scrollbar-track { background: var(--timepicker-scrollbar-background-color); } .nb-timepicker-container .values-list::-webkit-scrollbar-corner { background: var(--timepicker-scrollbar-background-color); } [dir=ltr] .nb-timepicker-container.supports-scrollbar-theming .values-list:hover .list-item:not(.am-pm-item) { margin-right: calc(var(--timepicker-scrollbar-width) * -1); } [dir=rtl] .nb-timepicker-container.supports-scrollbar-theming .values-list:hover .list-item:not(.am-pm-item) { margin-left: calc(var(--timepicker-scrollbar-width) * -1); } .nb-timepicker-container .header-cell { color: var(--timepicker-header-cell-text-color); font-size: var(--timepicker-header-cell-text-font-size); font-family: var(--timepicker-header-cell-text-font-family); height: var(--timepicker-header-cell-height); line-height: var(--timepicker-header-cell-text-line-height); font-weight: var(--timepicker-header-cell-text-font-weight); } [dir=ltr] .nb-timepicker-container .header-cell:not(:last-child) { border-right: var(--timepicker-border-width) var(--timepicker-border-style) var(--timepicker-border-color); } [dir=rtl] .nb-timepicker-container .header-cell:not(:last-child) { border-left: var(--timepicker-border-width) var(--timepicker-border-style) var(--timepicker-border-color); } .nb-timepicker-container .column-header { border-bottom: var(--timepicker-border-width) var(--timepicker-border-style) var(--timepicker-border-color); } [dir=ltr] .nb-timepicker-container .actions-footer { padding-left: 0.625rem; } [dir=rtl] .nb-timepicker-container .actions-footer { padding-right: 0.625rem; } nb-checkbox .label { padding: var(--checkbox-padding); } nb-checkbox .custom-checkbox { width: var(--checkbox-width); height: var(--checkbox-height); border-style: var(--checkbox-border-style); border-width: var(--checkbox-border-width); border-radius: var(--checkbox-border-radius); position: relative; } nb-checkbox .native-input:focus:not(:checked) + .custom-checkbox { box-shadow: 0 0 0 var(--checkbox-outline-width) var(--checkbox-outline-color); } nb-checkbox .native-input:focus:not(:checked) + .custom-checkbox:not(:hover):not(:active) { box-shadow: 0 0 0 var(--checkbox-outline-width) var(--checkbox-outline-color), inset var(--checkbox-focus-inset-shadow-length) var(--checkbox-outline-color); } nb-checkbox .native-input:focus:checked + .custom-checkbox { box-shadow: 0 0 0 var(--checkbox-outline-width) var(--checkbox-outline-color); } nb-checkbox .custom-checkbox-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; } nb-checkbox .text { font-family: var(--checkbox-text-font-family); font-size: var(--checkbox-text-font-size); font-weight: var(--checkbox-text-font-weight); line-height: var(--checkbox-text-line-height); } [dir=ltr] nb-checkbox .text:not(:empty) { padding-left: var(--checkbox-text-space); } [dir=rtl] nb-checkbox .text:not(:empty) { padding-right: var(--checkbox-text-space); } nb-checkbox.status-basic .custom-checkbox { background-color: var(--checkbox-basic-background-color); border-color: var(--checkbox-basic-border-color); } nb-checkbox.status-basic .text { color: var(--checkbox-basic-text-color); } nb-checkbox.status-basic .custom-checkbox.checked { background-color: var(--checkbox-basic-checked-background-color); border-color: var(--checkbox-basic-checked-border-color); } nb-checkbox.status-basic .custom-checkbox.checked .custom-checkbox-icon { color: var(--checkbox-basic-checked-checkmark-color); } nb-checkbox.status-basic .custom-checkbox.indeterminate { background-color: var(--checkbox-basic-indeterminate-background-color); border-color: var(--checkbox-basic-indeterminate-border-color); } nb-checkbox.status-basic .custom-checkbox.indeterminate .custom-checkbox-icon { color: var(--checkbox-basic-indeterminate-checkmark-color); } nb-checkbox.status-basic .native-input:enabled:focus + .custom-checkbox { background-color: var(--checkbox-basic-focus-background-color); border-color: var(--checkbox-basic-focus-border-color); } nb-checkbox.status-basic .native-input:enabled:focus + .custom-checkbox.indeterminate, nb-checkbox.status-basic .native-input:enabled:focus + .custom-checkbox.checked { background-color: var(--checkbox-basic-focus-checked-background-color); border-color: var(--checkbox-basic-focus-checked-border-color); } nb-checkbox.status-basic .custom-checkbox:hover { background-color: var(--checkbox-basic-hover-background-color); border-color: var(--checkbox-basic-hover-border-color); } nb-checkbox.status-basic .custom-checkbox:hover.indeterminate, nb-checkbox.status-basic .custom-checkbox:hover.checked { background-color: var(--checkbox-basic-hover-checked-background-color); border-color: var(--checkbox-basic-hover-checked-border-color); } nb-checkbox.status-basic .native-input:enabled:active + .custom-checkbox { background-color: var(--checkbox-basic-active-background-color); border-color: var(--checkbox-basic-active-border-color); } nb-checkbox.status-basic .native-input:enabled:active + .custom-checkbox.indeterminate, nb-checkbox.status-basic .native-input:enabled:active + .custom-checkbox.checked { background-color: var(--checkbox-basic-active-checked-background-color); border-color: var(--checkbox-basic-active-checked-border-color); } nb-checkbox.status-basic .native-input:disabled + .custom-checkbox { background-color: var(--checkbox-basic-disabled-background-color); border-color: var(--checkbox-basic-disabled-border-color); } nb-checkbox.status-basic .native-input:disabled + .custom-checkbox .custom-checkbox-icon { color: var(--checkbox-basic-disabled-checkmark-color); } nb-checkbox.status-basic .native-input:disabled ~ .text { color: var(--checkbox-basic-disabled-text-color); } nb-checkbox.status-basic .native-input:disabled:indeterminate + .custom-checkbox, nb-checkbox.status-basic .native-input:disabled:checked + .custom-checkbox { background-color: var(--checkbox-basic-disabled-checked-background-color); border-color: var(--checkbox-basic-disabled-checked-border-color); } nb-checkbox.status-primary .custom-checkbox { background-color: var(--checkbox-primary-background-color); border-color: var(--checkbox-primary-border-color); } nb-checkbox.status-primary .text { color: var(--checkbox-primary-text-color); } nb-checkbox.status-primary .custom-checkbox.checked { background-color: var(--checkbox-primary-checked-background-color); border-color: var(--checkbox-primary-checked-border-color); } nb-checkbox.status-primary .custom-checkbox.checked .custom-checkbox-icon { color: var(--checkbox-primary-checked-checkmark-color); } nb-checkbox.status-primary .custom-checkbox.indeterminate { background-color: var(--checkbox-primary-indeterminate-background-color); border-color: var(--checkbox-primary-indeterminate-border-color); } nb-checkbox.status-primary .custom-checkbox.indeterminate .custom-checkbox-icon { color: var(--checkbox-primary-indeterminate-checkmark-color); } nb-checkbox.status-primary .native-input:enabled:focus + .custom-checkbox { background-color: var(--checkbox-primary-focus-background-color); border-color: var(--checkbox-primary-focus-border-color); } nb-checkbox.status-primary .native-input:enabled:focus + .custom-checkbox.indeterminate, nb-checkbox.status-primary .native-input:enabled:focus + .custom-checkbox.checked { background-color: var(--checkbox-primary-focus-checked-background-color); border-color: var(--checkbox-primary-focus-checked-border-color); } nb-checkbox.status-primary .custom-checkbox:hover { background-color: var(--checkbox-primary-hover-background-color); border-color: var(--checkbox-primary-hover-border-color); } nb-checkbox.status-primary .custom-checkbox:hover.indeterminate, nb-checkbox.status-primary .custom-checkbox:hover.checked { background-color: var(--checkbox-primary-hover-checked-background-color); border-color: var(--checkbox-primary-hover-checked-border-color); } nb-checkbox.status-primary .native-input:enabled:active + .custom-checkbox { background-color: var(--checkbox-primary-active-background-color); border-color: var(--checkbox-primary-active-border-color); } nb-checkbox.status-primary .native-input:enabled:active + .custom-checkbox.indeterminate, nb-checkbox.status-primary .native-input:enabled:active + .custom-checkbox.checked { background-color: var(--checkbox-primary-active-checked-background-color); border-color: var(--checkbox-primary-active-checked-border-color); } nb-checkbox.status-primary .native-input:disabled + .custom-checkbox { background-color: var(--checkbox-primary-disabled-background-color); border-color: var(--checkbox-primary-disabled-border-color); } nb-checkbox.status-primary .native-input:disabled + .custom-checkbox .custom-checkbox-icon { color: var(--checkbox-primary-disabled-checkmark-color); } nb-checkbox.status-primary .native-input:disabled ~ .text { color: var(--checkbox-primary-disabled-text-color); } nb-checkbox.status-primary .native-input:disabled:indeterminate + .custom-checkbox, nb-checkbox.status-primary .native-input:disabled:checked + .custom-checkbox { background-color: var(--checkbox-primary-disabled-checked-background-color); border-color: var(--checkbox-primary-disabled-checked-border-color); } nb-checkbox.status-success .custom-checkbox { background-color: var(--checkbox-success-background-color); border-color: var(--checkbox-success-border-color); } nb-checkbox.status-success .text { color: var(--checkbox-success-text-color); } nb-checkbox.status-success .custom-checkbox.checked { background-color: var(--checkbox-success-checked-background-color); border-color: var(--checkbox-success-checked-border-color); } nb-checkbox.status-success .custom-checkbox.checked .custom-checkbox-icon { color: var(--checkbox-success-checked-checkmark-color); } nb-checkbox.status-success .custom-checkbox.indeterminate { background-color: var(--checkbox-success-indeterminate-background-color); border-color: var(--checkbox-success-indeterminate-border-color); } nb-checkbox.status-success .custom-checkbox.indeterminate .custom-checkbox-icon { color: var(--checkbox-success-indeterminate-checkmark-color); } nb-checkbox.status-success .native-input:enabled:focus + .custom-checkbox { background-color: var(--checkbox-success-focus-background-color); border-color: var(--checkbox-success-focus-border-color); } nb-checkbox.status-success .native-input:enabled:focus + .custom-checkbox.indeterminate, nb-checkbox.status-success .native-input:enabled:focus + .custom-checkbox.checked { background-color: var(--checkbox-success-focus-checked-background-color); border-color: var(--checkbox-success-focus-checked-border-color); } nb-checkbox.status-success .custom-checkbox:hover { background-color: var(--checkbox-success-hover-background-color); border-color: var(--checkbox-success-hover-border-color); } nb-checkbox.status-success .custom-checkbox:hover.indeterminate, nb-checkbox.status-success .custom-checkbox:hover.checked { background-color: var(--checkbox-success-hover-checked-background-color); border-color: var(--checkbox-success-hover-checked-border-color); } nb-checkbox.status-success .native-input:enabled:active + .custom-checkbox { background-color: var(--checkbox-success-active-background-color); border-color: var(--checkbox-success-active-border-color); } nb-checkbox.status-success .native-input:enabled:active + .custom-checkbox.indeterminate, nb-checkbox.status-success .native-input:enabled:active + .custom-checkbox.checked { background-color: var(--checkbox-success-active-checked-background-color); border-color: var(--checkbox-success-active-checked-border-color); } nb-checkbox.status-success .native-input:disabled + .custom-checkbox { background-color: var(--checkbox-success-disabled-background-color); border-color: var(--checkbox-success-disabled-border-color); } nb-checkbox.status-success .native-input:disabled + .custom-checkbox .custom-checkbox-icon { color: var(--checkbox-success-disabled-checkmark-color); } nb-checkbox.status-success .native-input:disabled ~ .text { color: var(--checkbox-success-disabled-text-color); } nb-checkbox.status-success .native-input:disabled:indeterminate + .custom-checkbox, nb-checkbox.status-success .native-input:disabled:checked + .custom-checkbox { background-color: var(--checkbox-success-disabled-checked-background-color); border-color: var(--checkbox-success-disabled-checked-border-color); } nb-checkbox.status-warning .custom-checkbox { background-color: var(--checkbox-warning-background-color); border-color: var(--checkbox-warning-border-color); } nb-checkbox.status-warning .text { color: var(--checkbox-warning-text-color); } nb-checkbox.status-warning .custom-checkbox.checked { background-color: var(--checkbox-warning-checked-background-color); border-color: var(--checkbox-warning-checked-border-color); } nb-checkbox.status-warning .custom-checkbox.checked .custom-checkbox-icon { color: var(--checkbox-warning-checked-checkmark-color); } nb-checkbox.status-warning .custom-checkbox.indeterminate { background-color: var(--checkbox-warning-indeterminate-background-color); border-color: var(--checkbox-warning-indeterminate-border-color); } nb-checkbox.status-warning .custom-checkbox.indeterminate .custom-checkbox-icon { color: var(--checkbox-warning-indeterminate-checkmark-color); } nb-checkbox.status-warning .native-input:enabled:focus + .custom-checkbox { background-color: var(--checkbox-warning-focus-background-color); border-color: var(--checkbox-warning-focus-border-color); } nb-checkbox.status-warning .native-input:enabled:focus + .custom-checkbox.indeterminate, nb-checkbox.status-warning .native-input:enabled:focus + .custom-checkbox.checked { background-color: var(--checkbox-warning-focus-checked-background-color); border-color: var(--checkbox-warning-focus-checked-border-color); } nb-checkbox.status-warning .custom-checkbox:hover { background-color: var(--checkbox-warning-hover-background-color); border-color: var(--checkbox-warning-hover-border-color); } nb-checkbox.status-warning .custom-checkbox:hover.indeterminate, nb-checkbox.status-warning .custom-checkbox:hover.checked { background-color: var(--checkbox-warning-hover-checked-background-color); border-color: var(--checkbox-warning-hover-checked-border-color); } nb-checkbox.status-warning .native-input:enabled:active + .custom-checkbox { background-color: var(--checkbox-warning-active-background-color); border-color: var(--checkbox-warning-active-border-color); } nb-checkbox.status-warning .native-input:enabled:active + .custom-checkbox.indeterminate, nb-checkbox.status-warning .native-input:enabled:active + .custom-checkbox.checked { background-color: var(--checkbox-warning-active-checked-background-color); border-color: var(--checkbox-warning-active-checked-border-color); } nb-checkbox.status-warning .native-input:disabled + .custom-checkbox { background-color: var(--checkbox-warning-disabled-background-color); border-color: var(--checkbox-warning-disabled-border-color); } nb-checkbox.status-warning .native-input:disabled + .custom-checkbox .custom-checkbox-icon { color: var(--checkbox-warning-disabled-checkmark-color); } nb-checkbox.status-warning .native-input:disabled ~ .text { color: var(--checkbox-warning-disabled-text-color); } nb-checkbox.status-warning .native-input:disabled:indeterminate + .custom-checkbox, nb-checkbox.status-warning .native-input:disabled:checked + .custom-checkbox { background-color: var(--checkbox-warning-disabled-checked-background-color); border-color: var(--checkbox-warning-disabled-checked-border-color); } nb-checkbox.status-danger .custom-checkbox { background-color: var(--checkbox-danger-background-color); border-color: var(--checkbox-danger-border-color); } nb-checkbox.status-danger .text { color: var(--checkbox-danger-text-color); } nb-checkbox.status-danger .custom-checkbox.checked { background-color: var(--checkbox-danger-checked-background-color); border-color: var(--checkbox-danger-checked-border-color); } nb-checkbox.status-danger .custom-checkbox.checked .custom-checkbox-icon { color: var(--checkbox-danger-checked-checkmark-color); } nb-checkbox.status-danger .custom-checkbox.indeterminate { background-color: var(--checkbox-danger-indeterminate-background-color); border-color: var(--checkbox-danger-indeterminate-border-color); } nb-checkbox.status-danger .custom-checkbox.indeterminate .custom-checkbox-icon { color: var(--checkbox-danger-indeterminate-checkmark-color); } nb-checkbox.status-danger .native-input:enabled:focus + .custom-checkbox { background-color: var(--checkbox-danger-focus-background-color); border-color: var(--checkbox-danger-focus-border-color); } nb-checkbox.status-danger .native-input:enabled:focus + .custom-checkbox.indeterminate, nb-checkbox.status-danger .native-input:enabled:focus + .custom-checkbox.checked { background-color: var(--checkbox-danger-focus-checked-background-color); border-color: var(--checkbox-danger-focus-checked-border-color); } nb-checkbox.status-danger .custom-checkbox:hover { background-color: var(--checkbox-danger-hover-background-color); border-color: var(--checkbox-danger-hover-border-color); } nb-checkbox.status-danger .custom-checkbox:hover.indeterminate, nb-checkbox.status-danger .custom-checkbox:hover.checked { background-color: var(--checkbox-danger-hover-checked-background-color); border-color: var(--checkbox-danger-hover-checked-border-color); } nb-checkbox.status-danger .native-input:enabled:active + .custom-checkbox { background-color: var(--checkbox-danger-active-background-color); border-color: var(--checkbox-danger-active-border-color); } nb-checkbox.status-danger .native-input:enabled:active + .custom-checkbox.indeterminate, nb-checkbox.status-danger .native-input:enabled:active + .custom-checkbox.checked { background-color: var(--checkbox-danger-active-checked-background-color); border-color: var(--checkbox-danger-active-checked-border-color); } nb-checkbox.status-danger .native-input:disabled + .custom-checkbox { background-color: var(--checkbox-danger-disabled-background-color); border-color: var(--checkbox-danger-disabled-border-color); } nb-checkbox.status-danger .native-input:disabled + .custom-checkbox .custom-checkbox-icon { color: var(--checkbox-danger-disabled-checkmark-color); } nb-checkbox.status-danger .native-input:disabled ~ .text { color: var(--checkbox-danger-disabled-text-color); } nb-checkbox.status-danger .native-input:disabled:indeterminate + .custom-checkbox, nb-checkbox.status-danger .native-input:disabled:checked + .custom-checkbox { background-color: var(--checkbox-danger-disabled-checked-background-color); border-color: var(--checkbox-danger-disabled-checked-border-color); } nb-checkbox.status-info .custom-checkbox { background-color: var(--checkbox-info-background-color); border-color: var(--checkbox-info-border-color); } nb-checkbox.status-info .text { color: var(--checkbox-info-text-color); } nb-checkbox.status-info .custom-checkbox.checked { background-color: var(--checkbox-info-checked-background-color); border-color: var(--checkbox-info-checked-border-color); } nb-checkbox.status-info .custom-checkbox.checked .custom-checkbox-icon { color: var(--checkbox-info-checked-checkmark-color); } nb-checkbox.status-info .custom-checkbox.indeterminate { background-color: var(--checkbox-info-indeterminate-background-color); border-color: var(--checkbox-info-indeterminate-border-color); } nb-checkbox.status-info .custom-checkbox.indeterminate .custom-checkbox-icon { color: var(--checkbox-info-indeterminate-checkmark-color); } nb-checkbox.status-info .native-input:enabled:focus + .custom-checkbox { background-color: var(--checkbox-info-focus-background-color); border-color: var(--checkbox-info-focus-border-color); } nb-checkbox.status-info .native-input:enabled:focus + .custom-checkbox.indeterminate, nb-checkbox.status-info .native-input:enabled:focus + .custom-checkbox.checked { background-color: var(--checkbox-info-focus-checked-background-color); border-color: var(--checkbox-info-focus-checked-border-color); } nb-checkbox.status-info .custom-checkbox:hover { background-color: var(--checkbox-info-hover-background-color); border-color: var(--checkbox-info-hover-border-color); } nb-checkbox.status-info .custom-checkbox:hover.indeterminate, nb-checkbox.status-info .custom-checkbox:hover.checked { background-color: var(--checkbox-info-hover-checked-background-color); border-color: var(--checkbox-info-hover-checked-border-color); } nb-checkbox.status-info .native-input:enabled:active + .custom-checkbox { background-color: var(--checkbox-info-active-background-color); border-color: var(--checkbox-info-active-border-color); } nb-checkbox.status-info .native-input:enabled:active + .custom-checkbox.indeterminate, nb-checkbox.status-info .native-input:enabled:active + .custom-checkbox.checked { background-color: var(--checkbox-info-active-checked-background-color); border-color: var(--checkbox-info-active-checked-border-color); } nb-checkbox.status-info .native-input:disabled + .custom-checkbox { background-color: var(--checkbox-info-disabled-background-color); border-color: var(--checkbox-info-disabled-border-color); } nb-checkbox.status-info .native-input:disabled + .custom-checkbox .custom-checkbox-icon { color: var(--checkbox-info-disabled-checkmark-color); } nb-checkbox.status-info .native-input:disabled ~ .text { color: var(--checkbox-info-disabled-text-color); } nb-checkbox.status-info .native-input:disabled:indeterminate + .custom-checkbox, nb-checkbox.status-info .native-input:disabled:checked + .custom-checkbox { background-color: var(--checkbox-info-disabled-checked-background-color); border-color: var(--checkbox-info-disabled-checked-border-color); } nb-checkbox.status-control .custom-checkbox { background-color: var(--checkbox-control-background-color); border-color: var(--checkbox-control-border-color); } nb-checkbox.status-control .text { color: var(--checkbox-control-text-color); } nb-checkbox.status-control .custom-checkbox.checked { background-color: var(--checkbox-control-checked-background-color); border-color: var(--checkbox-control-checked-border-color); } nb-checkbox.status-control .custom-checkbox.checked .custom-checkbox-icon { color: var(--checkbox-control-checked-checkmark-color); } nb-checkbox.status-control .custom-checkbox.indeterminate { background-color: var(--checkbox-control-indeterminate-background-color); border-color: var(--checkbox-control-indeterminate-border-color); } nb-checkbox.status-control .custom-checkbox.indeterminate .custom-checkbox-icon { color: var(--checkbox-control-indeterminate-checkmark-color); } nb-checkbox.status-control .native-input:enabled:focus + .custom-checkbox { background-color: var(--checkbox-control-focus-background-color); border-color: var(--checkbox-control-focus-border-color); } nb-checkbox.status-control .native-input:enabled:focus + .custom-checkbox.indeterminate, nb-checkbox.status-control .native-input:enabled:focus + .custom-checkbox.checked { background-color: var(--checkbox-control-focus-checked-background-color); border-color: var(--checkbox-control-focus-checked-border-color); } nb-checkbox.status-control .custom-checkbox:hover { background-color: var(--checkbox-control-hover-background-color); border-color: var(--checkbox-control-hover-border-color); } nb-checkbox.status-control .custom-checkbox:hover.indeterminate, nb-checkbox.status-control .custom-checkbox:hover.checked { background-color: var(--checkbox-control-hover-checked-background-color); border-color: var(--checkbox-control-hover-checked-border-color); } nb-checkbox.status-control .native-input:enabled:active + .custom-checkbox { background-color: var(--checkbox-control-active-background-color); border-color: var(--checkbox-control-active-border-color); } nb-checkbox.status-control .native-input:enabled:active + .custom-checkbox.indeterminate, nb-checkbox.status-control .native-input:enabled:active + .custom-checkbox.checked { background-color: var(--checkbox-control-active-checked-background-color); border-color: var(--checkbox-control-active-checked-border-color); } nb-checkbox.status-control .native-input:disabled + .custom-checkbox { background-color: var(--checkbox-control-disabled-background-color); border-color: var(--checkbox-control-disabled-border-color); } nb-checkbox.status-control .native-input:disabled + .custom-checkbox .custom-checkbox-icon { color: var(--checkbox-control-disabled-checkmark-color); } nb-checkbox.status-control .native-input:disabled ~ .text { color: var(--checkbox-control-disabled-text-color); } nb-checkbox.status-control .native-input:disabled:indeterminate + .custom-checkbox, nb-checkbox.status-control .native-input:disabled:checked + .custom-checkbox { background-color: var(--checkbox-control-disabled-checked-background-color); border-color: var(--checkbox-control-disabled-checked-border-color); } nb-toggle .toggle { height: var(--toggle-height); width: var(--toggle-width); border-width: var(--toggle-border-width); border-style: solid; border-radius: var(--toggle-border-radius); cursor: var(--toggle-cursor); /* We need to set initial positions as Angular animations won't work in IE11 if positions have no initial value. Setting it in SCSS as we don't have access to theme variables from TS. */ } [dir=ltr] nb-toggle .toggle.checked .toggle-switcher { left: calc(100% - var(--toggle-switcher-size) - var(--toggle-border-width) - var(--toggle-border-width)); } [dir=ltr] nb-toggle .toggle:not(.checked) .toggle-switcher { right: 0; } [dir=rtl] nb-toggle .toggle.checked .toggle-switcher { right: calc(100% - var(--toggle-switcher-size) - var(--toggle-border-width) - var(--toggle-border-width)); } [dir=rtl] nb-toggle .toggle:not(.checked) .toggle-switcher { left: 0; } nb-toggle .native-input:enabled:focus + .toggle { box-shadow: 0 0 0 var(--toggle-outline-width) var(--toggle-outline-color); } nb-toggle .native-input:disabled + .toggle { cursor: var(--toggle-disabled-cursor); } nb-toggle .toggle-switcher { width: var(--toggle-switcher-size); height: var(--toggle-switcher-size); } nb-toggle .toggle-switcher nb-icon { height: var(--toggle-switcher-icon-size); width: var(--toggle-switcher-icon-size); } nb-toggle .text { font-family: var(--toggle-text-font-family); font-size: var(--toggle-text-font-size); font-weight: var(--toggle-text-font-weight); line-height: var(--toggle-text-line-height); } nb-toggle.status-basic .text { color: var(--toggle-basic-text-color); } nb-toggle.status-basic .toggle { background-color: var(--toggle-basic-background-color); border-color: var(--toggle-basic-border-color); } nb-toggle.status-basic .toggle.checked { background-color: var(--toggle-basic-checked-background-color); border-color: var(--toggle-basic-checked-border-color); } nb-toggle.status-basic .native-input:enabled:focus + .toggle { background-color: var(--toggle-basic-focus-background-color); border-color: var(--toggle-basic-focus-border-color); } nb-toggle.status-basic .native-input:enabled:focus + .toggle.checked { background-color: var(--toggle-basic-focus-checked-background-color); border-color: var(--toggle-basic-focus-checked-border-color); } nb-toggle.status-basic .native-input:enabled:active + .toggle { background-color: var(--toggle-basic-active-background-color); border-color: var(--toggle-basic-active-border-color); } nb-toggle.status-basic .native-input:enabled:active + .toggle.checked { background-color: var(--toggle-basic-active-checked-background-color); border-color: var(--toggle-basic-active-checked-border-color); } nb-toggle.status-basic .native-input:enabled + .toggle:hover { background-color: var(--toggle-basic-hover-background-color); border-color: var(--toggle-basic-hover-border-color); } nb-toggle.status-basic .native-input:enabled + .toggle:hover.checked { background-color: var(--toggle-basic-hover-checked-background-color); border-color: var(--toggle-basic-hover-checked-border-color); } nb-toggle.status-basic .toggle-switcher { background-color: var(--toggle-basic-checked-switcher-background-color); } nb-toggle.status-basic .toggle-switcher nb-icon { color: var(--toggle-basic-checked-switcher-checkmark-color); } nb-toggle.status-basic .native-input:disabled + .toggle { background-color: var(--toggle-basic-disabled-background-color); border-color: var(--toggle-basic-disabled-border-color); } nb-toggle.status-basic .native-input:disabled + .toggle .toggle-switcher { background-color: var(--toggle-basic-disabled-switcher-background-color); } nb-toggle.status-basic .native-input:disabled + .toggle .toggle-switcher nb-icon { color: var(--toggle-basic-disabled-checked-switcher-checkmark-color); } nb-toggle.status-basic .native-input:disabled ~ .text { color: var(--toggle-basic-disabled-text-color); } nb-toggle.status-primary .text { color: var(--toggle-primary-text-color); } nb-toggle.status-primary .toggle { background-color: var(--toggle-primary-background-color); border-color: var(--toggle-primary-border-color); } nb-toggle.status-primary .toggle.checked { background-color: var(--toggle-primary-checked-background-color); border-color: var(--toggle-primary-checked-border-color); } nb-toggle.status-primary .native-input:enabled:focus + .toggle { background-color: var(--toggle-primary-focus-background-color); border-color: var(--toggle-primary-focus-border-color); } nb-toggle.status-primary .native-input:enabled:focus + .toggle.checked { background-color: var(--toggle-primary-focus-checked-background-color); border-color: var(--toggle-primary-focus-checked-border-color); } nb-toggle.status-primary .native-input:enabled:active + .toggle { background-color: var(--toggle-primary-active-background-color); border-color: var(--toggle-primary-active-border-color); } nb-toggle.status-primary .native-input:enabled:active + .toggle.checked { background-color: var(--toggle-primary-active-checked-background-color); border-color: var(--toggle-primary-active-checked-border-color); } nb-toggle.status-primary .native-input:enabled + .toggle:hover { background-color: var(--toggle-primary-hover-background-color); border-color: var(--toggle-primary-hover-border-color); } nb-toggle.status-primary .native-input:enabled + .toggle:hover.checked { background-color: var(--toggle-primary-hover-checked-background-color); border-color: var(--toggle-primary-hover-checked-border-color); } nb-toggle.status-primary .toggle-switcher { background-color: var(--toggle-primary-checked-switcher-background-color); } nb-toggle.status-primary .toggle-switcher nb-icon { color: var(--toggle-primary-checked-switcher-checkmark-color); } nb-toggle.status-primary .native-input:disabled + .toggle { background-color: var(--toggle-primary-disabled-background-color); border-color: var(--toggle-primary-disabled-border-color); } nb-toggle.status-primary .native-input:disabled + .toggle .toggle-switcher { background-color: var(--toggle-primary-disabled-switcher-background-color); } nb-toggle.status-primary .native-input:disabled + .toggle .toggle-switcher nb-icon { color: var(--toggle-primary-disabled-checked-switcher-checkmark-color); } nb-toggle.status-primary .native-input:disabled ~ .text { color: var(--toggle-primary-disabled-text-color); } nb-toggle.status-success .text { color: var(--toggle-success-text-color); } nb-toggle.status-success .toggle { background-color: var(--toggle-success-background-color); border-color: var(--toggle-success-border-color); } nb-toggle.status-success .toggle.checked { background-color: var(--toggle-success-checked-background-color); border-color: var(--toggle-success-checked-border-color); } nb-toggle.status-success .native-input:enabled:focus + .toggle { background-color: var(--toggle-success-focus-background-color); border-color: var(--toggle-success-focus-border-color); } nb-toggle.status-success .native-input:enabled:focus + .toggle.checked { background-color: var(--toggle-success-focus-checked-background-color); border-color: var(--toggle-success-focus-checked-border-color); } nb-toggle.status-success .native-input:enabled:active + .toggle { background-color: var(--toggle-success-active-background-color); border-color: var(--toggle-success-active-border-color); } nb-toggle.status-success .native-input:enabled:active + .toggle.checked { background-color: var(--toggle-success-active-checked-background-color); border-color: var(--toggle-success-active-checked-border-color); } nb-toggle.status-success .native-input:enabled + .toggle:hover { background-color: var(--toggle-success-hover-background-color); border-color: var(--toggle-success-hover-border-color); } nb-toggle.status-success .native-input:enabled + .toggle:hover.checked { background-color: var(--toggle-success-hover-checked-background-color); border-color: var(--toggle-success-hover-checked-border-color); } nb-toggle.status-success .toggle-switcher { background-color: var(--toggle-success-checked-switcher-background-color); } nb-toggle.status-success .toggle-switcher nb-icon { color: var(--toggle-success-checked-switcher-checkmark-color); } nb-toggle.status-success .native-input:disabled + .toggle { background-color: var(--toggle-success-disabled-background-color); border-color: var(--toggle-success-disabled-border-color); } nb-toggle.status-success .native-input:disabled + .toggle .toggle-switcher { background-color: var(--toggle-success-disabled-switcher-background-color); } nb-toggle.status-success .native-input:disabled + .toggle .toggle-switcher nb-icon { color: var(--toggle-success-disabled-checked-switcher-checkmark-color); } nb-toggle.status-success .native-input:disabled ~ .text { color: var(--toggle-success-disabled-text-color); } nb-toggle.status-warning .text { color: var(--toggle-warning-text-color); } nb-toggle.status-warning .toggle { background-color: var(--toggle-warning-background-color); border-color: var(--toggle-warning-border-color); } nb-toggle.status-warning .toggle.checked { background-color: var(--toggle-warning-checked-background-color); border-color: var(--toggle-warning-checked-border-color); } nb-toggle.status-warning .native-input:enabled:focus + .toggle { background-color: var(--toggle-warning-focus-background-color); border-color: var(--toggle-warning-focus-border-color); } nb-toggle.status-warning .native-input:enabled:focus + .toggle.checked { background-color: var(--toggle-warning-focus-checked-background-color); border-color: var(--toggle-warning-focus-checked-border-color); } nb-toggle.status-warning .native-input:enabled:active + .toggle { background-color: var(--toggle-warning-active-background-color); border-color: var(--toggle-warning-active-border-color); } nb-toggle.status-warning .native-input:enabled:active + .toggle.checked { background-color: var(--toggle-warning-active-checked-background-color); border-color: var(--toggle-warning-active-checked-border-color); } nb-toggle.status-warning .native-input:enabled + .toggle:hover { background-color: var(--toggle-warning-hover-background-color); border-color: var(--toggle-warning-hover-border-color); } nb-toggle.status-warning .native-input:enabled + .toggle:hover.checked { background-color: var(--toggle-warning-hover-checked-background-color); border-color: var(--toggle-warning-hover-checked-border-color); } nb-toggle.status-warning .toggle-switcher { background-color: var(--toggle-warning-checked-switcher-background-color); } nb-toggle.status-warning .toggle-switcher nb-icon { color: var(--toggle-warning-checked-switcher-checkmark-color); } nb-toggle.status-warning .native-input:disabled + .toggle { background-color: var(--toggle-warning-disabled-background-color); border-color: var(--toggle-warning-disabled-border-color); } nb-toggle.status-warning .native-input:disabled + .toggle .toggle-switcher { background-color: var(--toggle-warning-disabled-switcher-background-color); } nb-toggle.status-warning .native-input:disabled + .toggle .toggle-switcher nb-icon { color: var(--toggle-warning-disabled-checked-switcher-checkmark-color); } nb-toggle.status-warning .native-input:disabled ~ .text { color: var(--toggle-warning-disabled-text-color); } nb-toggle.status-danger .text { color: var(--toggle-danger-text-color); } nb-toggle.status-danger .toggle { background-color: var(--toggle-danger-background-color); border-color: var(--toggle-danger-border-color); } nb-toggle.status-danger .toggle.checked { background-color: var(--toggle-danger-checked-background-color); border-color: var(--toggle-danger-checked-border-color); } nb-toggle.status-danger .native-input:enabled:focus + .toggle { background-color: var(--toggle-danger-focus-background-color); border-color: var(--toggle-danger-focus-border-color); } nb-toggle.status-danger .native-input:enabled:focus + .toggle.checked { background-color: var(--toggle-danger-focus-checked-background-color); border-color: var(--toggle-danger-focus-checked-border-color); } nb-toggle.status-danger .native-input:enabled:active + .toggle { background-color: var(--toggle-danger-active-background-color); border-color: var(--toggle-danger-active-border-color); } nb-toggle.status-danger .native-input:enabled:active + .toggle.checked { background-color: var(--toggle-danger-active-checked-background-color); border-color: var(--toggle-danger-active-checked-border-color); } nb-toggle.status-danger .native-input:enabled + .toggle:hover { background-color: var(--toggle-danger-hover-background-color); border-color: var(--toggle-danger-hover-border-color); } nb-toggle.status-danger .native-input:enabled + .toggle:hover.checked { background-color: var(--toggle-danger-hover-checked-background-color); border-color: var(--toggle-danger-hover-checked-border-color); } nb-toggle.status-danger .toggle-switcher { background-color: var(--toggle-danger-checked-switcher-background-color); } nb-toggle.status-danger .toggle-switcher nb-icon { color: var(--toggle-danger-checked-switcher-checkmark-color); } nb-toggle.status-danger .native-input:disabled + .toggle { background-color: var(--toggle-danger-disabled-background-color); border-color: var(--toggle-danger-disabled-border-color); } nb-toggle.status-danger .native-input:disabled + .toggle .toggle-switcher { background-color: var(--toggle-danger-disabled-switcher-background-color); } nb-toggle.status-danger .native-input:disabled + .toggle .toggle-switcher nb-icon { color: var(--toggle-danger-disabled-checked-switcher-checkmark-color); } nb-toggle.status-danger .native-input:disabled ~ .text { color: var(--toggle-danger-disabled-text-color); } nb-toggle.status-info .text { color: var(--toggle-info-text-color); } nb-toggle.status-info .toggle { background-color: var(--toggle-info-background-color); border-color: var(--toggle-info-border-color); } nb-toggle.status-info .toggle.checked { background-color: var(--toggle-info-checked-background-color); border-color: var(--toggle-info-checked-border-color); } nb-toggle.status-info .native-input:enabled:focus + .toggle { background-color: var(--toggle-info-focus-background-color); border-color: var(--toggle-info-focus-border-color); } nb-toggle.status-info .native-input:enabled:focus + .toggle.checked { background-color: var(--toggle-info-focus-checked-background-color); border-color: var(--toggle-info-focus-checked-border-color); } nb-toggle.status-info .native-input:enabled:active + .toggle { background-color: var(--toggle-info-active-background-color); border-color: var(--toggle-info-active-border-color); } nb-toggle.status-info .native-input:enabled:active + .toggle.checked { background-color: var(--toggle-info-active-checked-background-color); border-color: var(--toggle-info-active-checked-border-color); } nb-toggle.status-info .native-input:enabled + .toggle:hover { background-color: var(--toggle-info-hover-background-color); border-color: var(--toggle-info-hover-border-color); } nb-toggle.status-info .native-input:enabled + .toggle:hover.checked { background-color: var(--toggle-info-hover-checked-background-color); border-color: var(--toggle-info-hover-checked-border-color); } nb-toggle.status-info .toggle-switcher { background-color: var(--toggle-info-checked-switcher-background-color); } nb-toggle.status-info .toggle-switcher nb-icon { color: var(--toggle-info-checked-switcher-checkmark-color); } nb-toggle.status-info .native-input:disabled + .toggle { background-color: var(--toggle-info-disabled-background-color); border-color: var(--toggle-info-disabled-border-color); } nb-toggle.status-info .native-input:disabled + .toggle .toggle-switcher { background-color: var(--toggle-info-disabled-switcher-background-color); } nb-toggle.status-info .native-input:disabled + .toggle .toggle-switcher nb-icon { color: var(--toggle-info-disabled-checked-switcher-checkmark-color); } nb-toggle.status-info .native-input:disabled ~ .text { color: var(--toggle-info-disabled-text-color); } nb-toggle.status-control .text { color: var(--toggle-control-text-color); } nb-toggle.status-control .toggle { background-color: var(--toggle-control-background-color); border-color: var(--toggle-control-border-color); } nb-toggle.status-control .toggle.checked { background-color: var(--toggle-control-checked-background-color); border-color: var(--toggle-control-checked-border-color); } nb-toggle.status-control .native-input:enabled:focus + .toggle { background-color: var(--toggle-control-focus-background-color); border-color: var(--toggle-control-focus-border-color); } nb-toggle.status-control .native-input:enabled:focus + .toggle.checked { background-color: var(--toggle-control-focus-checked-background-color); border-color: var(--toggle-control-focus-checked-border-color); } nb-toggle.status-control .native-input:enabled:active + .toggle { background-color: var(--toggle-control-active-background-color); border-color: var(--toggle-control-active-border-color); } nb-toggle.status-control .native-input:enabled:active + .toggle.checked { background-color: var(--toggle-control-active-checked-background-color); border-color: var(--toggle-control-active-checked-border-color); } nb-toggle.status-control .native-input:enabled + .toggle:hover { background-color: var(--toggle-control-hover-background-color); border-color: var(--toggle-control-hover-border-color); } nb-toggle.status-control .native-input:enabled + .toggle:hover.checked { background-color: var(--toggle-control-hover-checked-background-color); border-color: var(--toggle-control-hover-checked-border-color); } nb-toggle.status-control .toggle-switcher { background-color: var(--toggle-control-checked-switcher-background-color); } nb-toggle.status-control .toggle-switcher nb-icon { color: var(--toggle-control-checked-switcher-checkmark-color); } nb-toggle.status-control .native-input:disabled + .toggle { background-color: var(--toggle-control-disabled-background-color); border-color: var(--toggle-control-disabled-border-color); } nb-toggle.status-control .native-input:disabled + .toggle .toggle-switcher { background-color: var(--toggle-control-disabled-switcher-background-color); } nb-toggle.status-control .native-input:disabled + .toggle .toggle-switcher nb-icon { color: var(--toggle-control-disabled-checked-switcher-checkmark-color); } nb-toggle.status-control .native-input:disabled ~ .text { color: var(--toggle-control-disabled-text-color); } nb-progress-bar .progress-container { border-radius: var(--progress-bar-border-radius); } nb-progress-bar .progress-value { display: flex; align-items: center; justify-content: center; font-family: var(--progress-bar-text-font-family); transition-duration: var(--progress-bar-animation-duration); transition-property: width, background-color; } nb-progress-bar.size-tiny .progress-container { height: var(--progress-bar-tiny-height); } nb-progress-bar.size-tiny .progress-value { font-size: var(--progress-bar-tiny-text-font-size); font-weight: var(--progress-bar-tiny-text-font-weight); line-height: var(--progress-bar-tiny-text-line-height); } nb-progress-bar.size-small .progress-container { height: var(--progress-bar-small-height); } nb-progress-bar.size-small .progress-value { font-size: var(--progress-bar-small-text-font-size); font-weight: var(--progress-bar-small-text-font-weight); line-height: var(--progress-bar-small-text-line-height); } nb-progress-bar.size-medium .progress-container { height: var(--progress-bar-medium-height); } nb-progress-bar.size-medium .progress-value { font-size: var(--progress-bar-medium-text-font-size); font-weight: var(--progress-bar-medium-text-font-weight); line-height: var(--progress-bar-medium-text-line-height); } nb-progress-bar.size-large .progress-container { height: var(--progress-bar-large-height); } nb-progress-bar.size-large .progress-value { font-size: var(--progress-bar-large-text-font-size); font-weight: var(--progress-bar-large-text-font-weight); line-height: var(--progress-bar-large-text-line-height); } nb-progress-bar.size-giant .progress-container { height: var(--progress-bar-giant-height); } nb-progress-bar.size-giant .progress-value { font-size: var(--progress-bar-giant-text-font-size); font-weight: var(--progress-bar-giant-text-font-weight); line-height: var(--progress-bar-giant-text-line-height); } nb-progress-bar.status-basic .progress-container { background-color: var(--progress-bar-basic-background-color); } nb-progress-bar.status-basic .progress-value { background-color: var(--progress-bar-basic-filled-background-color); color: var(--progress-bar-basic-text-color); } nb-progress-bar.status-primary .progress-container { background-color: var(--progress-bar-primary-background-color); } nb-progress-bar.status-primary .progress-value { background-color: var(--progress-bar-primary-filled-background-color); color: var(--progress-bar-primary-text-color); } nb-progress-bar.status-success .progress-container { background-color: var(--progress-bar-success-background-color); } nb-progress-bar.status-success .progress-value { background-color: var(--progress-bar-success-filled-background-color); color: var(--progress-bar-success-text-color); } nb-progress-bar.status-warning .progress-container { background-color: var(--progress-bar-warning-background-color); } nb-progress-bar.status-warning .progress-value { background-color: var(--progress-bar-warning-filled-background-color); color: var(--progress-bar-warning-text-color); } nb-progress-bar.status-danger .progress-container { background-color: var(--progress-bar-danger-background-color); } nb-progress-bar.status-danger .progress-value { background-color: var(--progress-bar-danger-filled-background-color); color: var(--progress-bar-danger-text-color); } nb-progress-bar.status-info .progress-container { background-color: var(--progress-bar-info-background-color); } nb-progress-bar.status-info .progress-value { background-color: var(--progress-bar-info-filled-background-color); color: var(--progress-bar-info-text-color); } nb-progress-bar.status-control .progress-container { background-color: var(--progress-bar-control-background-color); } nb-progress-bar.status-control .progress-value { background-color: var(--progress-bar-control-filled-background-color); color: var(--progress-bar-control-text-color); } nb-badge { border-radius: var(--badge-border-radius); font-family: var(--badge-text-font-family); font-size: var(--badge-text-font-size); font-weight: var(--badge-text-font-weight); line-height: var(--badge-text-line-height); padding: var(--badge-padding); } nb-badge.dot-mode { padding: var(--badge-dot-mode-padding); border-radius: var(--badge-dot-mode-border-radius); } nb-badge.status-basic { color: var(--badge-basic-text-color); background-color: var(--badge-basic-background-color); } nb-badge.status-primary { color: var(--badge-primary-text-color); background-color: var(--badge-primary-background-color); } nb-badge.status-success { color: var(--badge-success-text-color); background-color: var(--badge-success-background-color); } nb-badge.status-warning { color: var(--badge-warning-text-color); background-color: var(--badge-warning-background-color); } nb-badge.status-danger { color: var(--badge-danger-text-color); background-color: var(--badge-danger-background-color); } nb-badge.status-info { color: var(--badge-info-text-color); background-color: var(--badge-info-background-color); } nb-badge.status-control { color: var(--badge-control-text-color); background-color: var(--badge-control-background-color); } nb-stepper.horizontal .header .step { width: var(--stepper-step-index-width); margin: 0 calc(var(--stepper-step-index-width) * 0.5); } nb-stepper.horizontal .header .connector { margin: var(--stepper-horizontal-connector-margin); } nb-stepper.vertical .header .connector { margin: var(--stepper-vertical-connector-margin); } nb-stepper .header .connector { background-color: var(--stepper-connector-background-color); } nb-stepper .header .connector-past { background-color: var(--stepper-connector-completed-background-color); } nb-stepper .header .label-index { border-radius: var(--stepper-step-index-border-radius); border-color: var(--stepper-step-index-border-color); border-style: var(--stepper-step-index-border-style); border-width: var(--stepper-step-index-border-width); width: var(--stepper-step-index-width); height: var(--stepper-step-index-width); } nb-stepper .header .step { color: var(--stepper-step-text-color); font-family: var(--stepper-step-text-font-family); font-size: var(--stepper-step-text-font-size); font-weight: var(--stepper-step-text-font-weight); line-height: var(--stepper-step-text-line-height); } nb-stepper .header .step.label-index { border-color: var(--stepper-step-index-border-color); } nb-stepper .header .step.selected { color: var(--stepper-step-active-text-color); } nb-stepper .header .step.selected .label-index { border-color: var(--stepper-step-index-active-border-color); } nb-stepper .header .step.completed { color: var(--stepper-step-completed-text-color); } nb-stepper .header .step.completed .label-index { background-color: var(--stepper-step-index-completed-background-color); border-color: var(--stepper-step-index-completed-border-color); color: var(--stepper-step-index-completed-text-color); } nb-stepper .step-content { padding: var(--stepper-step-content-padding); } nb-alert { border-radius: var(--alert-border-radius); box-shadow: var(--alert-shadow); font-family: var(--alert-text-font-family); font-size: var(--alert-text-font-size); font-weight: var(--alert-text-font-weight); line-height: var(--alert-text-line-height); padding: var(--alert-padding); margin-bottom: var(--alert-bottom-margin); scrollbar-face-color: var(--alert-scrollbar-color); scrollbar-track-color: var(--alert-scrollbar-background-color); } nb-alert::-webkit-scrollbar { width: var(--alert-scrollbar-width); height: var(--alert-scrollbar-width); } nb-alert::-webkit-scrollbar-thumb { background: var(--alert-scrollbar-color); cursor: pointer; border-radius: calc(var(--alert-scrollbar-width) * 0.5); } nb-alert::-webkit-scrollbar-track { background: var(--alert-scrollbar-background-color); } nb-alert::-webkit-scrollbar-corner { background: var(--alert-scrollbar-background-color); } [dir=ltr] nb-alert.closable { padding-right: var(--alert-closable-start-padding); } [dir=rtl] nb-alert.closable { padding-left: var(--alert-closable-start-padding); } nb-alert .close { padding: var(--alert-padding); font-size: 1.5rem; line-height: 1; cursor: pointer; font-family: monospace; } nb-alert.size-tiny { height: var(--alert-tiny-height); } nb-alert.size-small { height: var(--alert-small-height); } nb-alert.size-medium { height: var(--alert-medium-height); } nb-alert.size-large { height: var(--alert-large-height); } nb-alert.size-giant { height: var(--alert-giant-height); } nb-alert.status-basic { color: var(--alert-basic-text-color); background-color: var(--alert-basic-background-color); } nb-alert.status-basic a, nb-alert.status-basic a:hover { color: var(--alert-basic-text-color); } nb-alert.accent-basic { border-top: var(--alert-border-radius) solid var(--alert-accent-basic-color); } nb-alert.outline-basic { border: var(--alert-outline-width) solid var(--alert-outline-basic-color); } nb-alert.status-primary { color: var(--alert-primary-text-color); background-color: var(--alert-primary-background-color); } nb-alert.status-primary a, nb-alert.status-primary a:hover { color: var(--alert-primary-text-color); } nb-alert.accent-primary { border-top: var(--alert-border-radius) solid var(--alert-accent-primary-color); } nb-alert.outline-primary { border: var(--alert-outline-width) solid var(--alert-outline-primary-color); } nb-alert.status-success { color: var(--alert-success-text-color); background-color: var(--alert-success-background-color); } nb-alert.status-success a, nb-alert.status-success a:hover { color: var(--alert-success-text-color); } nb-alert.accent-success { border-top: var(--alert-border-radius) solid var(--alert-accent-success-color); } nb-alert.outline-success { border: var(--alert-outline-width) solid var(--alert-outline-success-color); } nb-alert.status-warning { color: var(--alert-warning-text-color); background-color: var(--alert-warning-background-color); } nb-alert.status-warning a, nb-alert.status-warning a:hover { color: var(--alert-warning-text-color); } nb-alert.accent-warning { border-top: var(--alert-border-radius) solid var(--alert-accent-warning-color); } nb-alert.outline-warning { border: var(--alert-outline-width) solid var(--alert-outline-warning-color); } nb-alert.status-danger { color: var(--alert-danger-text-color); background-color: var(--alert-danger-background-color); } nb-alert.status-danger a, nb-alert.status-danger a:hover { color: var(--alert-danger-text-color); } nb-alert.accent-danger { border-top: var(--alert-border-radius) solid var(--alert-accent-danger-color); } nb-alert.outline-danger { border: var(--alert-outline-width) solid var(--alert-outline-danger-color); } nb-alert.status-info { color: var(--alert-info-text-color); background-color: var(--alert-info-background-color); } nb-alert.status-info a, nb-alert.status-info a:hover { color: var(--alert-info-text-color); } nb-alert.accent-info { border-top: var(--alert-border-radius) solid var(--alert-accent-info-color); } nb-alert.outline-info { border: var(--alert-outline-width) solid var(--alert-outline-info-color); } nb-alert.status-control { color: var(--alert-control-text-color); background-color: var(--alert-control-background-color); } nb-alert.status-control a, nb-alert.status-control a:hover { color: var(--alert-control-text-color); } nb-alert.accent-control { border-top: var(--alert-border-radius) solid var(--alert-accent-control-color); } nb-alert.outline-control { border: var(--alert-outline-width) solid var(--alert-outline-control-color); } nb-chat { background-color: var(--chat-background-color); border: var(--chat-border); border-radius: var(--chat-border-radius); box-shadow: var(--chat-shadow); color: var(--chat-text-color); font-family: var(--chat-text-font-family); font-size: var(--chat-text-font-size); font-weight: var(--chat-text-font-weight); line-height: var(--chat-text-line-height); } nb-chat nb-icon { font-size: inherit; } nb-chat .header { border-bottom: var(--chat-divider-width) var(--chat-divider-style) var(--chat-divider-color); border-top-left-radius: var(--chat-border-radius); border-top-right-radius: var(--chat-border-radius); padding: var(--chat-padding); font-family: var(--chat-header-text-font-family); font-size: var(--chat-header-text-font-size); font-weight: var(--chat-header-text-font-weight); line-height: var(--chat-header-text-line-height); } nb-chat .scrollable { overflow: auto; flex: 1; scrollbar-face-color: var(--chat-scrollbar-color); scrollbar-track-color: var(--chat-scrollbar-background-color); } nb-chat .scrollable::-webkit-scrollbar { width: var(--chat-scrollbar-width); height: var(--chat-scrollbar-width); } nb-chat .scrollable::-webkit-scrollbar-thumb { background: var(--chat-scrollbar-color); cursor: pointer; border-radius: calc(var(--chat-scrollbar-width) * 0.5); } nb-chat .scrollable::-webkit-scrollbar-track { background: var(--chat-scrollbar-background-color); } nb-chat .scrollable::-webkit-scrollbar-corner { background: var(--chat-scrollbar-background-color); } nb-chat .messages { padding: var(--chat-padding); overflow-y: auto; overflow-x: hidden; display: flex; flex-shrink: 0; flex-direction: column; } nb-chat .no-messages { text-align: center; } nb-chat.size-tiny { height: var(--chat-tiny-height); } nb-chat.size-small { height: var(--chat-small-height); } nb-chat.size-medium { height: var(--chat-medium-height); } nb-chat.size-large { height: var(--chat-large-height); } nb-chat.size-giant { height: var(--chat-giant-height); } nb-chat.status-basic .header { background-color: var(--chat-basic-background-color); color: var(--chat-basic-text-color); } nb-chat.status-primary .header { background-color: var(--chat-primary-background-color); color: var(--chat-primary-text-color); } nb-chat.status-success .header { background-color: var(--chat-success-background-color); color: var(--chat-success-text-color); } nb-chat.status-warning .header { background-color: var(--chat-warning-background-color); color: var(--chat-warning-text-color); } nb-chat.status-danger .header { background-color: var(--chat-danger-background-color); color: var(--chat-danger-text-color); } nb-chat.status-info .header { background-color: var(--chat-info-background-color); color: var(--chat-info-text-color); } nb-chat.status-control .header { background-color: var(--chat-control-background-color); color: var(--chat-control-text-color); } nb-chat-message { margin-bottom: 1.5rem; display: flex; flex-direction: row; } nb-chat-message .message { flex: 1; } nb-chat-message .avatar { display: block; border-radius: 50%; flex-shrink: 0; background: var(--chat-message-avatar-background-color); background-position: center; background-size: cover; background-repeat: no-repeat; width: 2.5rem; height: 2.5rem; text-align: center; line-height: 2.5rem; font-size: 0.875rem; color: white; } nb-chat-message nb-chat-message-text { display: flex; flex-direction: column; } nb-chat-message nb-chat-message-text .sender { font-size: 0.875rem; color: var(--chat-message-sender-text-color); margin-top: 0; margin-bottom: 0.5rem; } nb-chat-message nb-chat-message-text p { word-break: break-word; white-space: pre-wrap; max-width: 100%; margin-top: 0; margin-bottom: 0; } nb-chat-message nb-chat-message-text .text { padding: 1rem; border-radius: 0.5rem; } nb-chat-message nb-chat-message-file { display: flex; flex-direction: column; } nb-chat-message nb-chat-message-file a { color: var(--chat-message-file-text-color); background: var(--chat-message-file-background-color); font-size: 4rem; text-align: center; border: 1px solid var(--chat-message-file-text-color); width: 10rem; height: 10rem; overflow: hidden; display: flex; justify-content: center; align-items: center; flex-shrink: 0; border-radius: 0.5rem; } nb-chat-message nb-chat-message-file a:hover, nb-chat-message nb-chat-message-file a:focus { text-decoration: none; color: var(--chat-message-file-text-color); } nb-chat-message nb-chat-message-file a div { background-size: cover; width: 100%; height: 100%; } nb-chat-message nb-chat-message-file nb-chat-message-text { display: block; margin-bottom: 0.5rem; } nb-chat-message nb-chat-message-file .message-content-group { display: flex; flex-direction: row; justify-content: flex-end; flex-wrap: wrap; } nb-chat-message nb-chat-message-file .message-content-group a { margin-bottom: 1rem; width: 5rem; height: 5rem; } [dir=ltr] nb-chat-message nb-chat-message-file .message-content-group a { margin-right: 1rem; } [dir=rtl] nb-chat-message nb-chat-message-file .message-content-group a { margin-left: 1rem; } nb-chat-message nb-chat-message-quote p.quote { font-style: italic; font-size: 0.875rem; background: var(--chat-message-quote-background-color); color: var(--chat-message-quote-text-color); padding: 1rem; border-radius: 0.5rem; margin-top: 0; margin-bottom: 0.5rem; } nb-chat-message nb-chat-message-quote .sender { font-size: 0.875rem; color: var(--chat-message-sender-text-color); margin-bottom: 0.5rem; } [dir=ltr] nb-chat-message.not-reply .message { margin-left: 0.5rem; } [dir=rtl] nb-chat-message.not-reply .message { margin-right: 0.5rem; } [dir=ltr] nb-chat-message.not-reply .message { margin-right: 3rem; } [dir=rtl] nb-chat-message.not-reply .message { margin-left: 3rem; } nb-chat-message.not-reply nb-chat-message-text { align-items: flex-start; } nb-chat-message.not-reply nb-chat-message-text .text { background: var(--chat-message-background); color: var(--chat-message-text-color); } [dir=ltr] nb-chat-message.not-reply nb-chat-message-text .text { border-top-left-radius: 0; } [dir=rtl] nb-chat-message.not-reply nb-chat-message-text .text { border-top-right-radius: 0; } nb-chat-message.not-reply nb-chat-message-file { align-items: flex-start; } nb-chat-message.reply { flex-direction: row-reverse; } nb-chat-message.reply .message { display: flex; flex-direction: column; align-items: flex-end; margin-left: 0; } [dir=ltr] nb-chat-message.reply .message { margin-right: 0.5rem; } [dir=rtl] nb-chat-message.reply .message { margin-left: 0.5rem; } [dir=ltr] nb-chat-message.reply .message { margin-left: 3rem; } [dir=rtl] nb-chat-message.reply .message { margin-right: 3rem; } nb-chat-message.reply nb-chat-message-text { align-items: flex-end; } [dir=ltr] nb-chat-message.reply nb-chat-message-text .sender { text-align: right; } [dir=rtl] nb-chat-message.reply nb-chat-message-text .sender { text-align: left; } nb-chat-message.reply nb-chat-message-text .text { background: var(--chat-message-reply-background-color); color: var(--chat-message-reply-text-color); } [dir=ltr] nb-chat-message.reply nb-chat-message-text .text { border-top-right-radius: 0; } [dir=rtl] nb-chat-message.reply nb-chat-message-text .text { border-top-left-radius: 0; } nb-chat-message.reply nb-chat-message-file { align-items: flex-end; } nb-chat-form { display: flex; flex-direction: column; padding: var(--chat-padding); border-top: var(--chat-divider-width) var(--chat-divider-style) var(--chat-divider-color); } nb-chat-form .message-row { flex-direction: row; display: flex; } nb-chat-form input { flex: 1; } nb-chat-form input.with-button { border-bottom-right-radius: 0; border-top-right-radius: 0; } [dir=ltr] nb-chat-form input.with-button { border-bottom-right-radius: 0; border-top-right-radius: 0; } [dir=rtl] nb-chat-form input.with-button { border-bottom-left-radius: 0; border-top-left-radius: 0; } nb-chat-form .send-button nb-icon { font-size: 1.5rem; } [dir=ltr] nb-chat-form .send-button { border-bottom-left-radius: 0; border-top-left-radius: 0; } [dir=rtl] nb-chat-form .send-button { border-bottom-right-radius: 0; border-top-right-radius: 0; } nb-chat-form .dropped-files { display: flex; flex-direction: row; margin-bottom: 0.5rem; flex-wrap: wrap; } nb-chat-form .dropped-files div { background-size: cover; width: 3rem; height: 3rem; border-radius: 0.5rem; margin-bottom: 0.5rem; border: 1px solid currentColor; text-align: center; font-size: 2rem; position: relative; } [dir=ltr] nb-chat-form .dropped-files div { margin-right: 0.5rem; } [dir=rtl] nb-chat-form .dropped-files div { margin-left: 0.5rem; } nb-chat-form .dropped-files div .remove { position: absolute; right: -0.5rem; top: -0.875rem; font-size: 0.875rem; line-height: 1; cursor: pointer; } nb-chat-form .dropped-files div nb-icon { width: 65%; height: 100%; } .nb-custom-message { display: inline-block; padding: var(--chat-padding); margin-top: 0.5rem; border-radius: 0.5rem; } .nb-custom-message-full-width { width: 100%; } .nb-custom-message-no-space { margin-top: 0; } .nb-custom-message-not-reply { background: var(--chat-message-background); color: var(--chat-message-text-color); } [dir=ltr] .nb-custom-message-not-reply { border-top-left-radius: 0; } [dir=rtl] .nb-custom-message-not-reply { border-top-right-radius: 0; } .nb-custom-message-not-reply a, .nb-custom-message-not-reply a:hover, .nb-custom-message-not-reply a:focus { color: var(--chat-message-text-color); } .nb-custom-message-reply { background: var(--chat-message-reply-background-color); color: var(--chat-message-reply-text-color); } [dir=ltr] .nb-custom-message-reply { border-top-right-radius: 0; } [dir=rtl] .nb-custom-message-reply { border-top-left-radius: 0; } nb-accordion { display: block; box-shadow: var(--accordion-shadow); border-radius: var(--accordion-border-radius); } nb-accordion-item-header { position: relative; border-bottom-width: var(--accordion-header-border-width); border-bottom-style: var(--accordion-header-border-style); border-bottom-color: var(--accordion-header-border-color); color: var(--accordion-header-text-color); font-family: var(--accordion-header-text-font-family); font-size: var(--accordion-header-text-font-size); font-weight: var(--accordion-header-text-font-weight); line-height: var(--accordion-header-text-line-height); padding: var(--accordion-padding); } nb-accordion-item-header h1 { margin: 0; } nb-accordion-item-header h2 { margin: 0; } nb-accordion-item-header h3 { margin: 0; } nb-accordion-item-header h4 { margin: 0; } nb-accordion-item-header h5 { margin: 0; } nb-accordion-item-header h6 { margin: 0; } nb-accordion-item-header .expansion-indicator { position: absolute; } [dir=ltr] nb-accordion-item-header .expansion-indicator { right: 1rem; } [dir=rtl] nb-accordion-item-header .expansion-indicator { left: 1rem; } nb-accordion-item { background-color: var(--accordion-item-background-color); color: var(--accordion-item-text-color); font-family: var(--accordion-item-text-font-family); font-size: var(--accordion-item-text-font-size); font-weight: var(--accordion-item-text-font-weight); line-height: var(--accordion-item-text-line-height); } nb-accordion-item.disabled nb-accordion-item-header { color: var(--accordion-header-disabled-text-color); cursor: default; } nb-accordion-item:first-child { border-top-left-radius: var(--accordion-border-radius); border-top-right-radius: var(--accordion-border-radius); } nb-accordion-item:last-child { border-bottom-left-radius: var(--accordion-border-radius); border-bottom-right-radius: var(--accordion-border-radius); } nb-accordion-item:last-child.collapsed nb-accordion-item-header { border-bottom: none; } nb-accordion-item:not(.collapsed) + nb-accordion-item nb-accordion-item-header { border-top-color: var(--accordion-header-border-color); border-top-style: var(--accordion-header-border-style); border-top-width: var(--accordion-header-border-width); } nb-accordion-item-body .item-body { flex: 1; -ms-flex: 1 1 auto; overflow: auto; padding: var(--accordion-padding); position: relative; } [nbButton], [nbButtonToggle] { -webkit-appearance: none; -moz-appearance: none; appearance: none; text-align: center; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: var(--button-cursor); font-family: var(--button-text-font-family); font-weight: var(--button-text-font-weight); } [nbButton]:hover, [nbButtonToggle]:hover, [nbButton]:focus, [nbButtonToggle]:focus { text-decoration: none; } [nbButton].full-width, .full-width[nbButtonToggle] { width: 100%; } [nbButton] nb-icon, [nbButtonToggle] nb-icon { vertical-align: top; } [nbButton].nb-transition, .nb-transition[nbButtonToggle] { transition-duration: 0.15s; transition-property: background-color, border-color, box-shadow, color; transition-timing-function: ease-in; } [nbButton]:focus, [nbButtonToggle]:focus { position: relative; outline: none; box-shadow: 0 0 0 var(--button-outline-width) var(--button-outline-color); } [nbButton][disabled], [disabled][nbButtonToggle], [nbButton].btn-disabled, .btn-disabled[nbButtonToggle] { cursor: var(--button-disabled-cursor); } [nbButton].size-tiny, .size-tiny[nbButtonToggle] { font-size: var(--button-tiny-text-font-size); line-height: var(--button-tiny-text-line-height); } [nbButton].size-tiny nb-icon, .size-tiny[nbButtonToggle] nb-icon { font-size: var(--button-tiny-text-font-size); height: var(--button-tiny-icon-size); width: var(--button-tiny-icon-size); margin-top: var(--button-tiny-icon-vertical-margin); margin-bottom: var(--button-tiny-icon-vertical-margin); } [dir=ltr] [nbButton].size-tiny.icon-start:not(.icon-end) nb-icon, [dir=ltr] .size-tiny.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-right: var(--button-tiny-icon-offset); } [dir=rtl] [nbButton].size-tiny.icon-start:not(.icon-end) nb-icon, [dir=rtl] .size-tiny.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-left: var(--button-tiny-icon-offset); } [dir=ltr] [nbButton].size-tiny.icon-end:not(.icon-start) nb-icon, [dir=ltr] .size-tiny.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-left: var(--button-tiny-icon-offset); } [dir=rtl] [nbButton].size-tiny.icon-end:not(.icon-start) nb-icon, [dir=rtl] .size-tiny.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-right: var(--button-tiny-icon-offset); } [nbButton].size-tiny.icon-start.icon-end.appearance-filled, .size-tiny.icon-start.icon-end.appearance-filled[nbButtonToggle] { padding: var(--icon-button-filled-tiny-padding); } [nbButton].size-tiny.icon-start.icon-end.appearance-outline, .size-tiny.icon-start.icon-end.appearance-outline[nbButtonToggle] { padding: var(--icon-button-outline-tiny-padding); } [nbButton].size-tiny.icon-start.icon-end.appearance-ghost, .size-tiny.icon-start.icon-end.appearance-ghost[nbButtonToggle] { padding: var(--icon-button-ghost-tiny-padding); } [nbButton].size-tiny.icon-start.icon-end.appearance-hero, .size-tiny.icon-start.icon-end.appearance-hero[nbButtonToggle] { padding: var(--icon-button-hero-tiny-padding); } [nbButton].size-small, .size-small[nbButtonToggle] { font-size: var(--button-small-text-font-size); line-height: var(--button-small-text-line-height); } [nbButton].size-small nb-icon, .size-small[nbButtonToggle] nb-icon { font-size: var(--button-small-text-font-size); height: var(--button-small-icon-size); width: var(--button-small-icon-size); margin-top: var(--button-small-icon-vertical-margin); margin-bottom: var(--button-small-icon-vertical-margin); } [dir=ltr] [nbButton].size-small.icon-start:not(.icon-end) nb-icon, [dir=ltr] .size-small.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-right: var(--button-small-icon-offset); } [dir=rtl] [nbButton].size-small.icon-start:not(.icon-end) nb-icon, [dir=rtl] .size-small.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-left: var(--button-small-icon-offset); } [dir=ltr] [nbButton].size-small.icon-end:not(.icon-start) nb-icon, [dir=ltr] .size-small.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-left: var(--button-small-icon-offset); } [dir=rtl] [nbButton].size-small.icon-end:not(.icon-start) nb-icon, [dir=rtl] .size-small.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-right: var(--button-small-icon-offset); } [nbButton].size-small.icon-start.icon-end.appearance-filled, .size-small.icon-start.icon-end.appearance-filled[nbButtonToggle] { padding: var(--icon-button-filled-small-padding); } [nbButton].size-small.icon-start.icon-end.appearance-outline, .size-small.icon-start.icon-end.appearance-outline[nbButtonToggle] { padding: var(--icon-button-outline-small-padding); } [nbButton].size-small.icon-start.icon-end.appearance-ghost, .size-small.icon-start.icon-end.appearance-ghost[nbButtonToggle] { padding: var(--icon-button-ghost-small-padding); } [nbButton].size-small.icon-start.icon-end.appearance-hero, .size-small.icon-start.icon-end.appearance-hero[nbButtonToggle] { padding: var(--icon-button-hero-small-padding); } [nbButton].size-medium, .size-medium[nbButtonToggle] { font-size: var(--button-medium-text-font-size); line-height: var(--button-medium-text-line-height); } [nbButton].size-medium nb-icon, .size-medium[nbButtonToggle] nb-icon { font-size: var(--button-medium-text-font-size); height: var(--button-medium-icon-size); width: var(--button-medium-icon-size); margin-top: var(--button-medium-icon-vertical-margin); margin-bottom: var(--button-medium-icon-vertical-margin); } [dir=ltr] [nbButton].size-medium.icon-start:not(.icon-end) nb-icon, [dir=ltr] .size-medium.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-right: var(--button-medium-icon-offset); } [dir=rtl] [nbButton].size-medium.icon-start:not(.icon-end) nb-icon, [dir=rtl] .size-medium.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-left: var(--button-medium-icon-offset); } [dir=ltr] [nbButton].size-medium.icon-end:not(.icon-start) nb-icon, [dir=ltr] .size-medium.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-left: var(--button-medium-icon-offset); } [dir=rtl] [nbButton].size-medium.icon-end:not(.icon-start) nb-icon, [dir=rtl] .size-medium.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-right: var(--button-medium-icon-offset); } [nbButton].size-medium.icon-start.icon-end.appearance-filled, .size-medium.icon-start.icon-end.appearance-filled[nbButtonToggle] { padding: var(--icon-button-filled-medium-padding); } [nbButton].size-medium.icon-start.icon-end.appearance-outline, .size-medium.icon-start.icon-end.appearance-outline[nbButtonToggle] { padding: var(--icon-button-outline-medium-padding); } [nbButton].size-medium.icon-start.icon-end.appearance-ghost, .size-medium.icon-start.icon-end.appearance-ghost[nbButtonToggle] { padding: var(--icon-button-ghost-medium-padding); } [nbButton].size-medium.icon-start.icon-end.appearance-hero, .size-medium.icon-start.icon-end.appearance-hero[nbButtonToggle] { padding: var(--icon-button-hero-medium-padding); } [nbButton].size-large, .size-large[nbButtonToggle] { font-size: var(--button-large-text-font-size); line-height: var(--button-large-text-line-height); } [nbButton].size-large nb-icon, .size-large[nbButtonToggle] nb-icon { font-size: var(--button-large-text-font-size); height: var(--button-large-icon-size); width: var(--button-large-icon-size); margin-top: var(--button-large-icon-vertical-margin); margin-bottom: var(--button-large-icon-vertical-margin); } [dir=ltr] [nbButton].size-large.icon-start:not(.icon-end) nb-icon, [dir=ltr] .size-large.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-right: var(--button-large-icon-offset); } [dir=rtl] [nbButton].size-large.icon-start:not(.icon-end) nb-icon, [dir=rtl] .size-large.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-left: var(--button-large-icon-offset); } [dir=ltr] [nbButton].size-large.icon-end:not(.icon-start) nb-icon, [dir=ltr] .size-large.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-left: var(--button-large-icon-offset); } [dir=rtl] [nbButton].size-large.icon-end:not(.icon-start) nb-icon, [dir=rtl] .size-large.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-right: var(--button-large-icon-offset); } [nbButton].size-large.icon-start.icon-end.appearance-filled, .size-large.icon-start.icon-end.appearance-filled[nbButtonToggle] { padding: var(--icon-button-filled-large-padding); } [nbButton].size-large.icon-start.icon-end.appearance-outline, .size-large.icon-start.icon-end.appearance-outline[nbButtonToggle] { padding: var(--icon-button-outline-large-padding); } [nbButton].size-large.icon-start.icon-end.appearance-ghost, .size-large.icon-start.icon-end.appearance-ghost[nbButtonToggle] { padding: var(--icon-button-ghost-large-padding); } [nbButton].size-large.icon-start.icon-end.appearance-hero, .size-large.icon-start.icon-end.appearance-hero[nbButtonToggle] { padding: var(--icon-button-hero-large-padding); } [nbButton].size-giant, .size-giant[nbButtonToggle] { font-size: var(--button-giant-text-font-size); line-height: var(--button-giant-text-line-height); } [nbButton].size-giant nb-icon, .size-giant[nbButtonToggle] nb-icon { font-size: var(--button-giant-text-font-size); height: var(--button-giant-icon-size); width: var(--button-giant-icon-size); margin-top: var(--button-giant-icon-vertical-margin); margin-bottom: var(--button-giant-icon-vertical-margin); } [dir=ltr] [nbButton].size-giant.icon-start:not(.icon-end) nb-icon, [dir=ltr] .size-giant.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-right: var(--button-giant-icon-offset); } [dir=rtl] [nbButton].size-giant.icon-start:not(.icon-end) nb-icon, [dir=rtl] .size-giant.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-left: var(--button-giant-icon-offset); } [dir=ltr] [nbButton].size-giant.icon-end:not(.icon-start) nb-icon, [dir=ltr] .size-giant.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-left: var(--button-giant-icon-offset); } [dir=rtl] [nbButton].size-giant.icon-end:not(.icon-start) nb-icon, [dir=rtl] .size-giant.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-right: var(--button-giant-icon-offset); } [nbButton].size-giant.icon-start.icon-end.appearance-filled, .size-giant.icon-start.icon-end.appearance-filled[nbButtonToggle] { padding: var(--icon-button-filled-giant-padding); } [nbButton].size-giant.icon-start.icon-end.appearance-outline, .size-giant.icon-start.icon-end.appearance-outline[nbButtonToggle] { padding: var(--icon-button-outline-giant-padding); } [nbButton].size-giant.icon-start.icon-end.appearance-ghost, .size-giant.icon-start.icon-end.appearance-ghost[nbButtonToggle] { padding: var(--icon-button-ghost-giant-padding); } [nbButton].size-giant.icon-start.icon-end.appearance-hero, .size-giant.icon-start.icon-end.appearance-hero[nbButtonToggle] { padding: var(--icon-button-hero-giant-padding); } [nbButton].shape-rectangle, .shape-rectangle[nbButtonToggle] { border-radius: var(--button-rectangle-border-radius); } [nbButton].shape-semi-round, .shape-semi-round[nbButtonToggle] { border-radius: var(--button-semi-round-border-radius); } [nbButton].shape-round, .shape-round[nbButtonToggle] { border-radius: var(--button-round-border-radius); } a[nbButton], a[nbButtonToggle] { text-decoration: none; } [nbButton].appearance-filled, .appearance-filled[nbButtonToggle] { border-style: var(--button-filled-border-style); border-width: var(--button-filled-border-width); text-transform: var(--button-filled-text-transform); } [nbButton].appearance-filled.size-tiny, .appearance-filled.size-tiny[nbButtonToggle] { padding: var(--button-filled-tiny-padding); } [nbButton].appearance-filled.size-small, .appearance-filled.size-small[nbButtonToggle] { padding: var(--button-filled-small-padding); } [nbButton].appearance-filled.size-medium, .appearance-filled.size-medium[nbButtonToggle] { padding: var(--button-filled-medium-padding); } [nbButton].appearance-filled.size-large, .appearance-filled.size-large[nbButtonToggle] { padding: var(--button-filled-large-padding); } [nbButton].appearance-filled.size-giant, .appearance-filled.size-giant[nbButtonToggle] { padding: var(--button-filled-giant-padding); } [nbButton].appearance-filled.status-basic, .appearance-filled.status-basic[nbButtonToggle] { background-color: var(--button-filled-basic-background-color); border-color: var(--button-filled-basic-border-color); color: var(--button-filled-basic-text-color); } [nbButton].appearance-filled.status-basic:focus, .appearance-filled.status-basic[nbButtonToggle]:focus { background-color: var(--button-filled-basic-focus-background-color); border-color: var(--button-filled-basic-focus-border-color); } [nbButton].appearance-filled.status-basic:hover, .appearance-filled.status-basic[nbButtonToggle]:hover { background-color: var(--button-filled-basic-hover-background-color); border-color: var(--button-filled-basic-hover-border-color); } [nbButton].appearance-filled.status-basic:active, .appearance-filled.status-basic[nbButtonToggle]:active { background-color: var(--button-filled-basic-active-background-color); border-color: var(--button-filled-basic-active-border-color); } [nbButton].appearance-filled.status-basic[disabled], .appearance-filled.status-basic[disabled][nbButtonToggle], [nbButton].appearance-filled.status-basic.btn-disabled, .appearance-filled.status-basic.btn-disabled[nbButtonToggle] { background-color: var(--button-filled-basic-disabled-background-color); border-color: var(--button-filled-basic-disabled-border-color); color: var(--button-filled-basic-disabled-text-color); } [nbButton].appearance-filled.status-primary, .appearance-filled.status-primary[nbButtonToggle] { background-color: var(--button-filled-primary-background-color); border-color: var(--button-filled-primary-border-color); color: var(--button-filled-primary-text-color); } [nbButton].appearance-filled.status-primary:focus, .appearance-filled.status-primary[nbButtonToggle]:focus { background-color: var(--button-filled-primary-focus-background-color); border-color: var(--button-filled-primary-focus-border-color); } [nbButton].appearance-filled.status-primary:hover, .appearance-filled.status-primary[nbButtonToggle]:hover { background-color: var(--button-filled-primary-hover-background-color); border-color: var(--button-filled-primary-hover-border-color); } [nbButton].appearance-filled.status-primary:active, .appearance-filled.status-primary[nbButtonToggle]:active { background-color: var(--button-filled-primary-active-background-color); border-color: var(--button-filled-primary-active-border-color); } [nbButton].appearance-filled.status-primary[disabled], .appearance-filled.status-primary[disabled][nbButtonToggle], [nbButton].appearance-filled.status-primary.btn-disabled, .appearance-filled.status-primary.btn-disabled[nbButtonToggle] { background-color: var(--button-filled-primary-disabled-background-color); border-color: var(--button-filled-primary-disabled-border-color); color: var(--button-filled-primary-disabled-text-color); } [nbButton].appearance-filled.status-success, .appearance-filled.status-success[nbButtonToggle] { background-color: var(--button-filled-success-background-color); border-color: var(--button-filled-success-border-color); color: var(--button-filled-success-text-color); } [nbButton].appearance-filled.status-success:focus, .appearance-filled.status-success[nbButtonToggle]:focus { background-color: var(--button-filled-success-focus-background-color); border-color: var(--button-filled-success-focus-border-color); } [nbButton].appearance-filled.status-success:hover, .appearance-filled.status-success[nbButtonToggle]:hover { background-color: var(--button-filled-success-hover-background-color); border-color: var(--button-filled-success-hover-border-color); } [nbButton].appearance-filled.status-success:active, .appearance-filled.status-success[nbButtonToggle]:active { background-color: var(--button-filled-success-active-background-color); border-color: var(--button-filled-success-active-border-color); } [nbButton].appearance-filled.status-success[disabled], .appearance-filled.status-success[disabled][nbButtonToggle], [nbButton].appearance-filled.status-success.btn-disabled, .appearance-filled.status-success.btn-disabled[nbButtonToggle] { background-color: var(--button-filled-success-disabled-background-color); border-color: var(--button-filled-success-disabled-border-color); color: var(--button-filled-success-disabled-text-color); } [nbButton].appearance-filled.status-warning, .appearance-filled.status-warning[nbButtonToggle] { background-color: var(--button-filled-warning-background-color); border-color: var(--button-filled-warning-border-color); color: var(--button-filled-warning-text-color); } [nbButton].appearance-filled.status-warning:focus, .appearance-filled.status-warning[nbButtonToggle]:focus { background-color: var(--button-filled-warning-focus-background-color); border-color: var(--button-filled-warning-focus-border-color); } [nbButton].appearance-filled.status-warning:hover, .appearance-filled.status-warning[nbButtonToggle]:hover { background-color: var(--button-filled-warning-hover-background-color); border-color: var(--button-filled-warning-hover-border-color); } [nbButton].appearance-filled.status-warning:active, .appearance-filled.status-warning[nbButtonToggle]:active { background-color: var(--button-filled-warning-active-background-color); border-color: var(--button-filled-warning-active-border-color); } [nbButton].appearance-filled.status-warning[disabled], .appearance-filled.status-warning[disabled][nbButtonToggle], [nbButton].appearance-filled.status-warning.btn-disabled, .appearance-filled.status-warning.btn-disabled[nbButtonToggle] { background-color: var(--button-filled-warning-disabled-background-color); border-color: var(--button-filled-warning-disabled-border-color); color: var(--button-filled-warning-disabled-text-color); } [nbButton].appearance-filled.status-danger, .appearance-filled.status-danger[nbButtonToggle] { background-color: var(--button-filled-danger-background-color); border-color: var(--button-filled-danger-border-color); color: var(--button-filled-danger-text-color); } [nbButton].appearance-filled.status-danger:focus, .appearance-filled.status-danger[nbButtonToggle]:focus { background-color: var(--button-filled-danger-focus-background-color); border-color: var(--button-filled-danger-focus-border-color); } [nbButton].appearance-filled.status-danger:hover, .appearance-filled.status-danger[nbButtonToggle]:hover { background-color: var(--button-filled-danger-hover-background-color); border-color: var(--button-filled-danger-hover-border-color); } [nbButton].appearance-filled.status-danger:active, .appearance-filled.status-danger[nbButtonToggle]:active { background-color: var(--button-filled-danger-active-background-color); border-color: var(--button-filled-danger-active-border-color); } [nbButton].appearance-filled.status-danger[disabled], .appearance-filled.status-danger[disabled][nbButtonToggle], [nbButton].appearance-filled.status-danger.btn-disabled, .appearance-filled.status-danger.btn-disabled[nbButtonToggle] { background-color: var(--button-filled-danger-disabled-background-color); border-color: var(--button-filled-danger-disabled-border-color); color: var(--button-filled-danger-disabled-text-color); } [nbButton].appearance-filled.status-info, .appearance-filled.status-info[nbButtonToggle] { background-color: var(--button-filled-info-background-color); border-color: var(--button-filled-info-border-color); color: var(--button-filled-info-text-color); } [nbButton].appearance-filled.status-info:focus, .appearance-filled.status-info[nbButtonToggle]:focus { background-color: var(--button-filled-info-focus-background-color); border-color: var(--button-filled-info-focus-border-color); } [nbButton].appearance-filled.status-info:hover, .appearance-filled.status-info[nbButtonToggle]:hover { background-color: var(--button-filled-info-hover-background-color); border-color: var(--button-filled-info-hover-border-color); } [nbButton].appearance-filled.status-info:active, .appearance-filled.status-info[nbButtonToggle]:active { background-color: var(--button-filled-info-active-background-color); border-color: var(--button-filled-info-active-border-color); } [nbButton].appearance-filled.status-info[disabled], .appearance-filled.status-info[disabled][nbButtonToggle], [nbButton].appearance-filled.status-info.btn-disabled, .appearance-filled.status-info.btn-disabled[nbButtonToggle] { background-color: var(--button-filled-info-disabled-background-color); border-color: var(--button-filled-info-disabled-border-color); color: var(--button-filled-info-disabled-text-color); } [nbButton].appearance-filled.status-control, .appearance-filled.status-control[nbButtonToggle] { background-color: var(--button-filled-control-background-color); border-color: var(--button-filled-control-border-color); color: var(--button-filled-control-text-color); } [nbButton].appearance-filled.status-control:focus, .appearance-filled.status-control[nbButtonToggle]:focus { background-color: var(--button-filled-control-focus-background-color); border-color: var(--button-filled-control-focus-border-color); } [nbButton].appearance-filled.status-control:hover, .appearance-filled.status-control[nbButtonToggle]:hover { background-color: var(--button-filled-control-hover-background-color); border-color: var(--button-filled-control-hover-border-color); } [nbButton].appearance-filled.status-control:active, .appearance-filled.status-control[nbButtonToggle]:active { background-color: var(--button-filled-control-active-background-color); border-color: var(--button-filled-control-active-border-color); } [nbButton].appearance-filled.status-control[disabled], .appearance-filled.status-control[disabled][nbButtonToggle], [nbButton].appearance-filled.status-control.btn-disabled, .appearance-filled.status-control.btn-disabled[nbButtonToggle] { background-color: var(--button-filled-control-disabled-background-color); border-color: var(--button-filled-control-disabled-border-color); color: var(--button-filled-control-disabled-text-color); } [nbButton].appearance-outline, .appearance-outline[nbButtonToggle] { border-style: var(--button-outline-border-style); border-width: var(--button-outline-border-width); text-transform: var(--button-outline-text-transform); } [nbButton].appearance-outline:focus, .appearance-outline[nbButtonToggle]:focus { box-shadow: 0 0 0 var(--button-outline-width) var(--button-outline-color); } [nbButton].appearance-outline:focus:not(:hover):not(:active), .appearance-outline[nbButtonToggle]:focus:not(:hover):not(:active) { box-shadow: 0 0 0 var(--button-outline-width) var(--button-outline-color), inset var(--button-outline-focus-inset-shadow-length) var(--button-outline-color); } [nbButton].appearance-outline.size-tiny, .appearance-outline.size-tiny[nbButtonToggle] { padding: var(--button-outline-tiny-padding); } [nbButton].appearance-outline.size-small, .appearance-outline.size-small[nbButtonToggle] { padding: var(--button-outline-small-padding); } [nbButton].appearance-outline.size-medium, .appearance-outline.size-medium[nbButtonToggle] { padding: var(--button-outline-medium-padding); } [nbButton].appearance-outline.size-large, .appearance-outline.size-large[nbButtonToggle] { padding: var(--button-outline-large-padding); } [nbButton].appearance-outline.size-giant, .appearance-outline.size-giant[nbButtonToggle] { padding: var(--button-outline-giant-padding); } [nbButton].appearance-outline.status-basic, .appearance-outline.status-basic[nbButtonToggle] { background-color: var(--button-outline-basic-background-color); border-color: var(--button-outline-basic-border-color); color: var(--button-outline-basic-text-color); } [nbButton].appearance-outline.status-basic:focus, .appearance-outline.status-basic[nbButtonToggle]:focus { background-color: var(--button-outline-basic-focus-background-color); border-color: var(--button-outline-basic-focus-border-color); color: var(--button-outline-basic-focus-text-color); } [nbButton].appearance-outline.status-basic:hover, .appearance-outline.status-basic[nbButtonToggle]:hover { background-color: var(--button-outline-basic-hover-background-color); border-color: var(--button-outline-basic-hover-border-color); color: var(--button-outline-basic-hover-text-color); } [nbButton].appearance-outline.status-basic:active, .appearance-outline.status-basic[nbButtonToggle]:active { background-color: var(--button-outline-basic-active-background-color); border-color: var(--button-outline-basic-active-border-color); color: var(--button-outline-basic-active-text-color); } [nbButton].appearance-outline.status-basic[disabled], .appearance-outline.status-basic[disabled][nbButtonToggle], [nbButton].appearance-outline.status-basic.btn-disabled, .appearance-outline.status-basic.btn-disabled[nbButtonToggle] { background-color: var(--button-outline-basic-disabled-background-color); border-color: var(--button-outline-basic-disabled-border-color); color: var(--button-outline-basic-disabled-text-color); } [nbButton].appearance-outline.status-primary, .appearance-outline.status-primary[nbButtonToggle] { background-color: var(--button-outline-primary-background-color); border-color: var(--button-outline-primary-border-color); color: var(--button-outline-primary-text-color); } [nbButton].appearance-outline.status-primary:focus, .appearance-outline.status-primary[nbButtonToggle]:focus { background-color: var(--button-outline-primary-focus-background-color); border-color: var(--button-outline-primary-focus-border-color); color: var(--button-outline-primary-focus-text-color); } [nbButton].appearance-outline.status-primary:hover, .appearance-outline.status-primary[nbButtonToggle]:hover { background-color: var(--button-outline-primary-hover-background-color); border-color: var(--button-outline-primary-hover-border-color); color: var(--button-outline-primary-hover-text-color); } [nbButton].appearance-outline.status-primary:active, .appearance-outline.status-primary[nbButtonToggle]:active { background-color: var(--button-outline-primary-active-background-color); border-color: var(--button-outline-primary-active-border-color); color: var(--button-outline-primary-active-text-color); } [nbButton].appearance-outline.status-primary[disabled], .appearance-outline.status-primary[disabled][nbButtonToggle], [nbButton].appearance-outline.status-primary.btn-disabled, .appearance-outline.status-primary.btn-disabled[nbButtonToggle] { background-color: var(--button-outline-primary-disabled-background-color); border-color: var(--button-outline-primary-disabled-border-color); color: var(--button-outline-primary-disabled-text-color); } [nbButton].appearance-outline.status-success, .appearance-outline.status-success[nbButtonToggle] { background-color: var(--button-outline-success-background-color); border-color: var(--button-outline-success-border-color); color: var(--button-outline-success-text-color); } [nbButton].appearance-outline.status-success:focus, .appearance-outline.status-success[nbButtonToggle]:focus { background-color: var(--button-outline-success-focus-background-color); border-color: var(--button-outline-success-focus-border-color); color: var(--button-outline-success-focus-text-color); } [nbButton].appearance-outline.status-success:hover, .appearance-outline.status-success[nbButtonToggle]:hover { background-color: var(--button-outline-success-hover-background-color); border-color: var(--button-outline-success-hover-border-color); color: var(--button-outline-success-hover-text-color); } [nbButton].appearance-outline.status-success:active, .appearance-outline.status-success[nbButtonToggle]:active { background-color: var(--button-outline-success-active-background-color); border-color: var(--button-outline-success-active-border-color); color: var(--button-outline-success-active-text-color); } [nbButton].appearance-outline.status-success[disabled], .appearance-outline.status-success[disabled][nbButtonToggle], [nbButton].appearance-outline.status-success.btn-disabled, .appearance-outline.status-success.btn-disabled[nbButtonToggle] { background-color: var(--button-outline-success-disabled-background-color); border-color: var(--button-outline-success-disabled-border-color); color: var(--button-outline-success-disabled-text-color); } [nbButton].appearance-outline.status-warning, .appearance-outline.status-warning[nbButtonToggle] { background-color: var(--button-outline-warning-background-color); border-color: var(--button-outline-warning-border-color); color: var(--button-outline-warning-text-color); } [nbButton].appearance-outline.status-warning:focus, .appearance-outline.status-warning[nbButtonToggle]:focus { background-color: var(--button-outline-warning-focus-background-color); border-color: var(--button-outline-warning-focus-border-color); color: var(--button-outline-warning-focus-text-color); } [nbButton].appearance-outline.status-warning:hover, .appearance-outline.status-warning[nbButtonToggle]:hover { background-color: var(--button-outline-warning-hover-background-color); border-color: var(--button-outline-warning-hover-border-color); color: var(--button-outline-warning-hover-text-color); } [nbButton].appearance-outline.status-warning:active, .appearance-outline.status-warning[nbButtonToggle]:active { background-color: var(--button-outline-warning-active-background-color); border-color: var(--button-outline-warning-active-border-color); color: var(--button-outline-warning-active-text-color); } [nbButton].appearance-outline.status-warning[disabled], .appearance-outline.status-warning[disabled][nbButtonToggle], [nbButton].appearance-outline.status-warning.btn-disabled, .appearance-outline.status-warning.btn-disabled[nbButtonToggle] { background-color: var(--button-outline-warning-disabled-background-color); border-color: var(--button-outline-warning-disabled-border-color); color: var(--button-outline-warning-disabled-text-color); } [nbButton].appearance-outline.status-danger, .appearance-outline.status-danger[nbButtonToggle] { background-color: var(--button-outline-danger-background-color); border-color: var(--button-outline-danger-border-color); color: var(--button-outline-danger-text-color); } [nbButton].appearance-outline.status-danger:focus, .appearance-outline.status-danger[nbButtonToggle]:focus { background-color: var(--button-outline-danger-focus-background-color); border-color: var(--button-outline-danger-focus-border-color); color: var(--button-outline-danger-focus-text-color); } [nbButton].appearance-outline.status-danger:hover, .appearance-outline.status-danger[nbButtonToggle]:hover { background-color: var(--button-outline-danger-hover-background-color); border-color: var(--button-outline-danger-hover-border-color); color: var(--button-outline-danger-hover-text-color); } [nbButton].appearance-outline.status-danger:active, .appearance-outline.status-danger[nbButtonToggle]:active { background-color: var(--button-outline-danger-active-background-color); border-color: var(--button-outline-danger-active-border-color); color: var(--button-outline-danger-active-text-color); } [nbButton].appearance-outline.status-danger[disabled], .appearance-outline.status-danger[disabled][nbButtonToggle], [nbButton].appearance-outline.status-danger.btn-disabled, .appearance-outline.status-danger.btn-disabled[nbButtonToggle] { background-color: var(--button-outline-danger-disabled-background-color); border-color: var(--button-outline-danger-disabled-border-color); color: var(--button-outline-danger-disabled-text-color); } [nbButton].appearance-outline.status-info, .appearance-outline.status-info[nbButtonToggle] { background-color: var(--button-outline-info-background-color); border-color: var(--button-outline-info-border-color); color: var(--button-outline-info-text-color); } [nbButton].appearance-outline.status-info:focus, .appearance-outline.status-info[nbButtonToggle]:focus { background-color: var(--button-outline-info-focus-background-color); border-color: var(--button-outline-info-focus-border-color); color: var(--button-outline-info-focus-text-color); } [nbButton].appearance-outline.status-info:hover, .appearance-outline.status-info[nbButtonToggle]:hover { background-color: var(--button-outline-info-hover-background-color); border-color: var(--button-outline-info-hover-border-color); color: var(--button-outline-info-hover-text-color); } [nbButton].appearance-outline.status-info:active, .appearance-outline.status-info[nbButtonToggle]:active { background-color: var(--button-outline-info-active-background-color); border-color: var(--button-outline-info-active-border-color); color: var(--button-outline-info-active-text-color); } [nbButton].appearance-outline.status-info[disabled], .appearance-outline.status-info[disabled][nbButtonToggle], [nbButton].appearance-outline.status-info.btn-disabled, .appearance-outline.status-info.btn-disabled[nbButtonToggle] { background-color: var(--button-outline-info-disabled-background-color); border-color: var(--button-outline-info-disabled-border-color); color: var(--button-outline-info-disabled-text-color); } [nbButton].appearance-outline.status-control, .appearance-outline.status-control[nbButtonToggle] { background-color: var(--button-outline-control-background-color); border-color: var(--button-outline-control-border-color); color: var(--button-outline-control-text-color); } [nbButton].appearance-outline.status-control:focus, .appearance-outline.status-control[nbButtonToggle]:focus { background-color: var(--button-outline-control-focus-background-color); border-color: var(--button-outline-control-focus-border-color); color: var(--button-outline-control-focus-text-color); } [nbButton].appearance-outline.status-control:hover, .appearance-outline.status-control[nbButtonToggle]:hover { background-color: var(--button-outline-control-hover-background-color); border-color: var(--button-outline-control-hover-border-color); color: var(--button-outline-control-hover-text-color); } [nbButton].appearance-outline.status-control:active, .appearance-outline.status-control[nbButtonToggle]:active { background-color: var(--button-outline-control-active-background-color); border-color: var(--button-outline-control-active-border-color); color: var(--button-outline-control-active-text-color); } [nbButton].appearance-outline.status-control[disabled], .appearance-outline.status-control[disabled][nbButtonToggle], [nbButton].appearance-outline.status-control.btn-disabled, .appearance-outline.status-control.btn-disabled[nbButtonToggle] { background-color: var(--button-outline-control-disabled-background-color); border-color: var(--button-outline-control-disabled-border-color); color: var(--button-outline-control-disabled-text-color); } [nbButton].appearance-ghost, .appearance-ghost[nbButtonToggle] { background-color: var(--button-ghost-background-color); border-color: var(--button-ghost-border-color); border-style: var(--button-ghost-border-style); border-width: var(--button-ghost-border-width); text-transform: var(--button-ghost-text-transform); } [nbButton].appearance-ghost:focus, .appearance-ghost[nbButtonToggle]:focus { box-shadow: 0 0 0 var(--button-outline-width) var(--button-outline-color); } [nbButton].appearance-ghost:focus:not(:hover):not(:active), .appearance-ghost[nbButtonToggle]:focus:not(:hover):not(:active) { box-shadow: 0 0 0 var(--button-outline-width) var(--button-outline-color), inset var(--button-ghost-focus-inset-shadow-length) var(--button-outline-color); } [nbButton].appearance-ghost.size-tiny, .appearance-ghost.size-tiny[nbButtonToggle] { padding: var(--button-ghost-tiny-padding); } [nbButton].appearance-ghost.size-small, .appearance-ghost.size-small[nbButtonToggle] { padding: var(--button-ghost-small-padding); } [nbButton].appearance-ghost.size-medium, .appearance-ghost.size-medium[nbButtonToggle] { padding: var(--button-ghost-medium-padding); } [nbButton].appearance-ghost.size-large, .appearance-ghost.size-large[nbButtonToggle] { padding: var(--button-ghost-large-padding); } [nbButton].appearance-ghost.size-giant, .appearance-ghost.size-giant[nbButtonToggle] { padding: var(--button-ghost-giant-padding); } [nbButton].appearance-ghost.status-basic, .appearance-ghost.status-basic[nbButtonToggle] { color: var(--button-ghost-basic-text-color); } [nbButton].appearance-ghost.status-basic:focus, .appearance-ghost.status-basic[nbButtonToggle]:focus { background-color: var(--button-ghost-basic-focus-background-color); border-color: var(--button-ghost-basic-focus-border-color); color: var(--button-ghost-basic-focus-text-color); } [nbButton].appearance-ghost.status-basic:hover, .appearance-ghost.status-basic[nbButtonToggle]:hover { background-color: var(--button-ghost-basic-hover-background-color); border-color: var(--button-ghost-basic-hover-border-color); color: var(--button-ghost-basic-hover-text-color); } [nbButton].appearance-ghost.status-basic:active, .appearance-ghost.status-basic[nbButtonToggle]:active { background-color: var(--button-ghost-basic-active-background-color); border-color: var(--button-ghost-basic-active-border-color); color: var(--button-ghost-basic-active-text-color); } [nbButton].appearance-ghost.status-basic[disabled], .appearance-ghost.status-basic[disabled][nbButtonToggle], [nbButton].appearance-ghost.status-basic.btn-disabled, .appearance-ghost.status-basic.btn-disabled[nbButtonToggle] { background-color: var(--button-ghost-basic-disabled-background-color); border-color: var(--button-ghost-basic-disabled-border-color); color: var(--button-ghost-basic-disabled-text-color); } [nbButton].appearance-ghost.status-primary, .appearance-ghost.status-primary[nbButtonToggle] { color: var(--button-ghost-primary-text-color); } [nbButton].appearance-ghost.status-primary:focus, .appearance-ghost.status-primary[nbButtonToggle]:focus { background-color: var(--button-ghost-primary-focus-background-color); border-color: var(--button-ghost-primary-focus-border-color); color: var(--button-ghost-primary-focus-text-color); } [nbButton].appearance-ghost.status-primary:hover, .appearance-ghost.status-primary[nbButtonToggle]:hover { background-color: var(--button-ghost-primary-hover-background-color); border-color: var(--button-ghost-primary-hover-border-color); color: var(--button-ghost-primary-hover-text-color); } [nbButton].appearance-ghost.status-primary:active, .appearance-ghost.status-primary[nbButtonToggle]:active { background-color: var(--button-ghost-primary-active-background-color); border-color: var(--button-ghost-primary-active-border-color); color: var(--button-ghost-primary-active-text-color); } [nbButton].appearance-ghost.status-primary[disabled], .appearance-ghost.status-primary[disabled][nbButtonToggle], [nbButton].appearance-ghost.status-primary.btn-disabled, .appearance-ghost.status-primary.btn-disabled[nbButtonToggle] { background-color: var(--button-ghost-primary-disabled-background-color); border-color: var(--button-ghost-primary-disabled-border-color); color: var(--button-ghost-primary-disabled-text-color); } [nbButton].appearance-ghost.status-success, .appearance-ghost.status-success[nbButtonToggle] { color: var(--button-ghost-success-text-color); } [nbButton].appearance-ghost.status-success:focus, .appearance-ghost.status-success[nbButtonToggle]:focus { background-color: var(--button-ghost-success-focus-background-color); border-color: var(--button-ghost-success-focus-border-color); color: var(--button-ghost-success-focus-text-color); } [nbButton].appearance-ghost.status-success:hover, .appearance-ghost.status-success[nbButtonToggle]:hover { background-color: var(--button-ghost-success-hover-background-color); border-color: var(--button-ghost-success-hover-border-color); color: var(--button-ghost-success-hover-text-color); } [nbButton].appearance-ghost.status-success:active, .appearance-ghost.status-success[nbButtonToggle]:active { background-color: var(--button-ghost-success-active-background-color); border-color: var(--button-ghost-success-active-border-color); color: var(--button-ghost-success-active-text-color); } [nbButton].appearance-ghost.status-success[disabled], .appearance-ghost.status-success[disabled][nbButtonToggle], [nbButton].appearance-ghost.status-success.btn-disabled, .appearance-ghost.status-success.btn-disabled[nbButtonToggle] { background-color: var(--button-ghost-success-disabled-background-color); border-color: var(--button-ghost-success-disabled-border-color); color: var(--button-ghost-success-disabled-text-color); } [nbButton].appearance-ghost.status-warning, .appearance-ghost.status-warning[nbButtonToggle] { color: var(--button-ghost-warning-text-color); } [nbButton].appearance-ghost.status-warning:focus, .appearance-ghost.status-warning[nbButtonToggle]:focus { background-color: var(--button-ghost-warning-focus-background-color); border-color: var(--button-ghost-warning-focus-border-color); color: var(--button-ghost-warning-focus-text-color); } [nbButton].appearance-ghost.status-warning:hover, .appearance-ghost.status-warning[nbButtonToggle]:hover { background-color: var(--button-ghost-warning-hover-background-color); border-color: var(--button-ghost-warning-hover-border-color); color: var(--button-ghost-warning-hover-text-color); } [nbButton].appearance-ghost.status-warning:active, .appearance-ghost.status-warning[nbButtonToggle]:active { background-color: var(--button-ghost-warning-active-background-color); border-color: var(--button-ghost-warning-active-border-color); color: var(--button-ghost-warning-active-text-color); } [nbButton].appearance-ghost.status-warning[disabled], .appearance-ghost.status-warning[disabled][nbButtonToggle], [nbButton].appearance-ghost.status-warning.btn-disabled, .appearance-ghost.status-warning.btn-disabled[nbButtonToggle] { background-color: var(--button-ghost-warning-disabled-background-color); border-color: var(--button-ghost-warning-disabled-border-color); color: var(--button-ghost-warning-disabled-text-color); } [nbButton].appearance-ghost.status-danger, .appearance-ghost.status-danger[nbButtonToggle] { color: var(--button-ghost-danger-text-color); } [nbButton].appearance-ghost.status-danger:focus, .appearance-ghost.status-danger[nbButtonToggle]:focus { background-color: var(--button-ghost-danger-focus-background-color); border-color: var(--button-ghost-danger-focus-border-color); color: var(--button-ghost-danger-focus-text-color); } [nbButton].appearance-ghost.status-danger:hover, .appearance-ghost.status-danger[nbButtonToggle]:hover { background-color: var(--button-ghost-danger-hover-background-color); border-color: var(--button-ghost-danger-hover-border-color); color: var(--button-ghost-danger-hover-text-color); } [nbButton].appearance-ghost.status-danger:active, .appearance-ghost.status-danger[nbButtonToggle]:active { background-color: var(--button-ghost-danger-active-background-color); border-color: var(--button-ghost-danger-active-border-color); color: var(--button-ghost-danger-active-text-color); } [nbButton].appearance-ghost.status-danger[disabled], .appearance-ghost.status-danger[disabled][nbButtonToggle], [nbButton].appearance-ghost.status-danger.btn-disabled, .appearance-ghost.status-danger.btn-disabled[nbButtonToggle] { background-color: var(--button-ghost-danger-disabled-background-color); border-color: var(--button-ghost-danger-disabled-border-color); color: var(--button-ghost-danger-disabled-text-color); } [nbButton].appearance-ghost.status-info, .appearance-ghost.status-info[nbButtonToggle] { color: var(--button-ghost-info-text-color); } [nbButton].appearance-ghost.status-info:focus, .appearance-ghost.status-info[nbButtonToggle]:focus { background-color: var(--button-ghost-info-focus-background-color); border-color: var(--button-ghost-info-focus-border-color); color: var(--button-ghost-info-focus-text-color); } [nbButton].appearance-ghost.status-info:hover, .appearance-ghost.status-info[nbButtonToggle]:hover { background-color: var(--button-ghost-info-hover-background-color); border-color: var(--button-ghost-info-hover-border-color); color: var(--button-ghost-info-hover-text-color); } [nbButton].appearance-ghost.status-info:active, .appearance-ghost.status-info[nbButtonToggle]:active { background-color: var(--button-ghost-info-active-background-color); border-color: var(--button-ghost-info-active-border-color); color: var(--button-ghost-info-active-text-color); } [nbButton].appearance-ghost.status-info[disabled], .appearance-ghost.status-info[disabled][nbButtonToggle], [nbButton].appearance-ghost.status-info.btn-disabled, .appearance-ghost.status-info.btn-disabled[nbButtonToggle] { background-color: var(--button-ghost-info-disabled-background-color); border-color: var(--button-ghost-info-disabled-border-color); color: var(--button-ghost-info-disabled-text-color); } [nbButton].appearance-ghost.status-control, .appearance-ghost.status-control[nbButtonToggle] { color: var(--button-ghost-control-text-color); } [nbButton].appearance-ghost.status-control:focus, .appearance-ghost.status-control[nbButtonToggle]:focus { background-color: var(--button-ghost-control-focus-background-color); border-color: var(--button-ghost-control-focus-border-color); color: var(--button-ghost-control-focus-text-color); } [nbButton].appearance-ghost.status-control:hover, .appearance-ghost.status-control[nbButtonToggle]:hover { background-color: var(--button-ghost-control-hover-background-color); border-color: var(--button-ghost-control-hover-border-color); color: var(--button-ghost-control-hover-text-color); } [nbButton].appearance-ghost.status-control:active, .appearance-ghost.status-control[nbButtonToggle]:active { background-color: var(--button-ghost-control-active-background-color); border-color: var(--button-ghost-control-active-border-color); color: var(--button-ghost-control-active-text-color); } [nbButton].appearance-ghost.status-control[disabled], .appearance-ghost.status-control[disabled][nbButtonToggle], [nbButton].appearance-ghost.status-control.btn-disabled, .appearance-ghost.status-control.btn-disabled[nbButtonToggle] { background-color: var(--button-ghost-control-disabled-background-color); border-color: var(--button-ghost-control-disabled-border-color); color: var(--button-ghost-control-disabled-text-color); } [nbButton].appearance-hero, .appearance-hero[nbButtonToggle] { text-shadow: var(--button-hero-text-shadow); text-transform: var(--button-hero-text-transform); } [nbButton].appearance-hero.size-tiny, .appearance-hero.size-tiny[nbButtonToggle] { padding: var(--button-hero-tiny-padding); } [nbButton].appearance-hero.size-small, .appearance-hero.size-small[nbButtonToggle] { padding: var(--button-hero-small-padding); } [nbButton].appearance-hero.size-medium, .appearance-hero.size-medium[nbButtonToggle] { padding: var(--button-hero-medium-padding); } [nbButton].appearance-hero.size-large, .appearance-hero.size-large[nbButtonToggle] { padding: var(--button-hero-large-padding); } [nbButton].appearance-hero.size-giant, .appearance-hero.size-giant[nbButtonToggle] { padding: var(--button-hero-giant-padding); } [nbButton].appearance-hero.status-basic, .appearance-hero.status-basic[nbButtonToggle] { background-image: linear-gradient(to right, var(--button-hero-basic-left-background-color), var(--button-hero-basic-right-background-color)); border: none; box-shadow: var(--button-hero-bevel-size) var(--button-hero-basic-bevel-color), var(--button-hero-glow-size) var(--button-hero-basic-glow-color), var(--button-hero-shadow); color: var(--button-hero-basic-text-color); } [nbButton].appearance-hero.status-basic:focus, .appearance-hero.status-basic[nbButtonToggle]:focus { background-image: linear-gradient(to right, var(--button-hero-basic-focus-left-background-color), var(--button-hero-basic-focus-right-background-color)); box-shadow: var(--button-hero-bevel-size) var(--button-hero-basic-bevel-color), var(--button-hero-glow-size) var(--button-hero-basic-glow-color), var(--button-hero-shadow), 0 0 0 var(--button-hero-outline-width) var(--button-hero-outline-color); } [nbButton].appearance-hero.status-basic:hover, .appearance-hero.status-basic[nbButtonToggle]:hover { background-image: linear-gradient(to right, var(--button-hero-basic-hover-left-background-color), var(--button-hero-basic-hover-right-background-color)); } [nbButton].appearance-hero.status-basic:active, .appearance-hero.status-basic[nbButtonToggle]:active { background-image: linear-gradient(to right, var(--button-hero-basic-active-left-background-color), var(--button-hero-basic-active-right-background-color)); } [nbButton].appearance-hero.status-basic[disabled], .appearance-hero.status-basic[disabled][nbButtonToggle], [nbButton].appearance-hero.status-basic.btn-disabled, .appearance-hero.status-basic.btn-disabled[nbButtonToggle] { background-color: var(--button-hero-basic-disabled-background-color); background-image: none; color: var(--button-hero-basic-disabled-text-color); } [nbButton].appearance-hero.status-basic.button-pulse, .appearance-hero.status-basic.button-pulse[nbButtonToggle] { animation: button-hero-basic-pulse 0.75s infinite alternate; } @keyframes button-hero-basic-pulse { 0% { box-shadow: none; opacity: 0.3; } 100% { box-shadow: 0 0 1rem 0 var(--button-hero-basic-left-background-color); opacity: 0.8; } } [nbButton].appearance-hero.status-primary, .appearance-hero.status-primary[nbButtonToggle] { background-image: linear-gradient(to right, var(--button-hero-primary-left-background-color), var(--button-hero-primary-right-background-color)); border: none; box-shadow: var(--button-hero-bevel-size) var(--button-hero-primary-bevel-color), var(--button-hero-glow-size) var(--button-hero-primary-glow-color), var(--button-hero-shadow); color: var(--button-hero-primary-text-color); } [nbButton].appearance-hero.status-primary:focus, .appearance-hero.status-primary[nbButtonToggle]:focus { background-image: linear-gradient(to right, var(--button-hero-primary-focus-left-background-color), var(--button-hero-primary-focus-right-background-color)); box-shadow: var(--button-hero-bevel-size) var(--button-hero-primary-bevel-color), var(--button-hero-glow-size) var(--button-hero-primary-glow-color), var(--button-hero-shadow), 0 0 0 var(--button-hero-outline-width) var(--button-hero-outline-color); } [nbButton].appearance-hero.status-primary:hover, .appearance-hero.status-primary[nbButtonToggle]:hover { background-image: linear-gradient(to right, var(--button-hero-primary-hover-left-background-color), var(--button-hero-primary-hover-right-background-color)); } [nbButton].appearance-hero.status-primary:active, .appearance-hero.status-primary[nbButtonToggle]:active { background-image: linear-gradient(to right, var(--button-hero-primary-active-left-background-color), var(--button-hero-primary-active-right-background-color)); } [nbButton].appearance-hero.status-primary[disabled], .appearance-hero.status-primary[disabled][nbButtonToggle], [nbButton].appearance-hero.status-primary.btn-disabled, .appearance-hero.status-primary.btn-disabled[nbButtonToggle] { background-color: var(--button-hero-primary-disabled-background-color); background-image: none; color: var(--button-hero-primary-disabled-text-color); } [nbButton].appearance-hero.status-primary.button-pulse, .appearance-hero.status-primary.button-pulse[nbButtonToggle] { animation: button-hero-primary-pulse 0.75s infinite alternate; } @keyframes button-hero-primary-pulse { 0% { box-shadow: none; opacity: 0.3; } 100% { box-shadow: 0 0 1rem 0 var(--button-hero-primary-left-background-color); opacity: 0.8; } } [nbButton].appearance-hero.status-success, .appearance-hero.status-success[nbButtonToggle] { background-image: linear-gradient(to right, var(--button-hero-success-left-background-color), var(--button-hero-success-right-background-color)); border: none; box-shadow: var(--button-hero-bevel-size) var(--button-hero-success-bevel-color), var(--button-hero-glow-size) var(--button-hero-success-glow-color), var(--button-hero-shadow); color: var(--button-hero-success-text-color); } [nbButton].appearance-hero.status-success:focus, .appearance-hero.status-success[nbButtonToggle]:focus { background-image: linear-gradient(to right, var(--button-hero-success-focus-left-background-color), var(--button-hero-success-focus-right-background-color)); box-shadow: var(--button-hero-bevel-size) var(--button-hero-success-bevel-color), var(--button-hero-glow-size) var(--button-hero-success-glow-color), var(--button-hero-shadow), 0 0 0 var(--button-hero-outline-width) var(--button-hero-outline-color); } [nbButton].appearance-hero.status-success:hover, .appearance-hero.status-success[nbButtonToggle]:hover { background-image: linear-gradient(to right, var(--button-hero-success-hover-left-background-color), var(--button-hero-success-hover-right-background-color)); } [nbButton].appearance-hero.status-success:active, .appearance-hero.status-success[nbButtonToggle]:active { background-image: linear-gradient(to right, var(--button-hero-success-active-left-background-color), var(--button-hero-success-active-right-background-color)); } [nbButton].appearance-hero.status-success[disabled], .appearance-hero.status-success[disabled][nbButtonToggle], [nbButton].appearance-hero.status-success.btn-disabled, .appearance-hero.status-success.btn-disabled[nbButtonToggle] { background-color: var(--button-hero-success-disabled-background-color); background-image: none; color: var(--button-hero-success-disabled-text-color); } [nbButton].appearance-hero.status-success.button-pulse, .appearance-hero.status-success.button-pulse[nbButtonToggle] { animation: button-hero-success-pulse 0.75s infinite alternate; } @keyframes button-hero-success-pulse { 0% { box-shadow: none; opacity: 0.3; } 100% { box-shadow: 0 0 1rem 0 var(--button-hero-success-left-background-color); opacity: 0.8; } } [nbButton].appearance-hero.status-warning, .appearance-hero.status-warning[nbButtonToggle] { background-image: linear-gradient(to right, var(--button-hero-warning-left-background-color), var(--button-hero-warning-right-background-color)); border: none; box-shadow: var(--button-hero-bevel-size) var(--button-hero-warning-bevel-color), var(--button-hero-glow-size) var(--button-hero-warning-glow-color), var(--button-hero-shadow); color: var(--button-hero-warning-text-color); } [nbButton].appearance-hero.status-warning:focus, .appearance-hero.status-warning[nbButtonToggle]:focus { background-image: linear-gradient(to right, var(--button-hero-warning-focus-left-background-color), var(--button-hero-warning-focus-right-background-color)); box-shadow: var(--button-hero-bevel-size) var(--button-hero-warning-bevel-color), var(--button-hero-glow-size) var(--button-hero-warning-glow-color), var(--button-hero-shadow), 0 0 0 var(--button-hero-outline-width) var(--button-hero-outline-color); } [nbButton].appearance-hero.status-warning:hover, .appearance-hero.status-warning[nbButtonToggle]:hover { background-image: linear-gradient(to right, var(--button-hero-warning-hover-left-background-color), var(--button-hero-warning-hover-right-background-color)); } [nbButton].appearance-hero.status-warning:active, .appearance-hero.status-warning[nbButtonToggle]:active { background-image: linear-gradient(to right, var(--button-hero-warning-active-left-background-color), var(--button-hero-warning-active-right-background-color)); } [nbButton].appearance-hero.status-warning[disabled], .appearance-hero.status-warning[disabled][nbButtonToggle], [nbButton].appearance-hero.status-warning.btn-disabled, .appearance-hero.status-warning.btn-disabled[nbButtonToggle] { background-color: var(--button-hero-warning-disabled-background-color); background-image: none; color: var(--button-hero-warning-disabled-text-color); } [nbButton].appearance-hero.status-warning.button-pulse, .appearance-hero.status-warning.button-pulse[nbButtonToggle] { animation: button-hero-warning-pulse 0.75s infinite alternate; } @keyframes button-hero-warning-pulse { 0% { box-shadow: none; opacity: 0.3; } 100% { box-shadow: 0 0 1rem 0 var(--button-hero-warning-left-background-color); opacity: 0.8; } } [nbButton].appearance-hero.status-danger, .appearance-hero.status-danger[nbButtonToggle] { background-image: linear-gradient(to right, var(--button-hero-danger-left-background-color), var(--button-hero-danger-right-background-color)); border: none; box-shadow: var(--button-hero-bevel-size) var(--button-hero-danger-bevel-color), var(--button-hero-glow-size) var(--button-hero-danger-glow-color), var(--button-hero-shadow); color: var(--button-hero-danger-text-color); } [nbButton].appearance-hero.status-danger:focus, .appearance-hero.status-danger[nbButtonToggle]:focus { background-image: linear-gradient(to right, var(--button-hero-danger-focus-left-background-color), var(--button-hero-danger-focus-right-background-color)); box-shadow: var(--button-hero-bevel-size) var(--button-hero-danger-bevel-color), var(--button-hero-glow-size) var(--button-hero-danger-glow-color), var(--button-hero-shadow), 0 0 0 var(--button-hero-outline-width) var(--button-hero-outline-color); } [nbButton].appearance-hero.status-danger:hover, .appearance-hero.status-danger[nbButtonToggle]:hover { background-image: linear-gradient(to right, var(--button-hero-danger-hover-left-background-color), var(--button-hero-danger-hover-right-background-color)); } [nbButton].appearance-hero.status-danger:active, .appearance-hero.status-danger[nbButtonToggle]:active { background-image: linear-gradient(to right, var(--button-hero-danger-active-left-background-color), var(--button-hero-danger-active-right-background-color)); } [nbButton].appearance-hero.status-danger[disabled], .appearance-hero.status-danger[disabled][nbButtonToggle], [nbButton].appearance-hero.status-danger.btn-disabled, .appearance-hero.status-danger.btn-disabled[nbButtonToggle] { background-color: var(--button-hero-danger-disabled-background-color); background-image: none; color: var(--button-hero-danger-disabled-text-color); } [nbButton].appearance-hero.status-danger.button-pulse, .appearance-hero.status-danger.button-pulse[nbButtonToggle] { animation: button-hero-danger-pulse 0.75s infinite alternate; } @keyframes button-hero-danger-pulse { 0% { box-shadow: none; opacity: 0.3; } 100% { box-shadow: 0 0 1rem 0 var(--button-hero-danger-left-background-color); opacity: 0.8; } } [nbButton].appearance-hero.status-info, .appearance-hero.status-info[nbButtonToggle] { background-image: linear-gradient(to right, var(--button-hero-info-left-background-color), var(--button-hero-info-right-background-color)); border: none; box-shadow: var(--button-hero-bevel-size) var(--button-hero-info-bevel-color), var(--button-hero-glow-size) var(--button-hero-info-glow-color), var(--button-hero-shadow); color: var(--button-hero-info-text-color); } [nbButton].appearance-hero.status-info:focus, .appearance-hero.status-info[nbButtonToggle]:focus { background-image: linear-gradient(to right, var(--button-hero-info-focus-left-background-color), var(--button-hero-info-focus-right-background-color)); box-shadow: var(--button-hero-bevel-size) var(--button-hero-info-bevel-color), var(--button-hero-glow-size) var(--button-hero-info-glow-color), var(--button-hero-shadow), 0 0 0 var(--button-hero-outline-width) var(--button-hero-outline-color); } [nbButton].appearance-hero.status-info:hover, .appearance-hero.status-info[nbButtonToggle]:hover { background-image: linear-gradient(to right, var(--button-hero-info-hover-left-background-color), var(--button-hero-info-hover-right-background-color)); } [nbButton].appearance-hero.status-info:active, .appearance-hero.status-info[nbButtonToggle]:active { background-image: linear-gradient(to right, var(--button-hero-info-active-left-background-color), var(--button-hero-info-active-right-background-color)); } [nbButton].appearance-hero.status-info[disabled], .appearance-hero.status-info[disabled][nbButtonToggle], [nbButton].appearance-hero.status-info.btn-disabled, .appearance-hero.status-info.btn-disabled[nbButtonToggle] { background-color: var(--button-hero-info-disabled-background-color); background-image: none; color: var(--button-hero-info-disabled-text-color); } [nbButton].appearance-hero.status-info.button-pulse, .appearance-hero.status-info.button-pulse[nbButtonToggle] { animation: button-hero-info-pulse 0.75s infinite alternate; } @keyframes button-hero-info-pulse { 0% { box-shadow: none; opacity: 0.3; } 100% { box-shadow: 0 0 1rem 0 var(--button-hero-info-left-background-color); opacity: 0.8; } } [nbButton].appearance-hero.status-control, .appearance-hero.status-control[nbButtonToggle] { background-image: linear-gradient(to right, var(--button-hero-control-left-background-color), var(--button-hero-control-right-background-color)); border: none; box-shadow: var(--button-hero-bevel-size) var(--button-hero-control-bevel-color), var(--button-hero-glow-size) var(--button-hero-control-glow-color), var(--button-hero-shadow); color: var(--button-hero-control-text-color); } [nbButton].appearance-hero.status-control:focus, .appearance-hero.status-control[nbButtonToggle]:focus { background-image: linear-gradient(to right, var(--button-hero-control-focus-left-background-color), var(--button-hero-control-focus-right-background-color)); box-shadow: var(--button-hero-bevel-size) var(--button-hero-control-bevel-color), var(--button-hero-glow-size) var(--button-hero-control-glow-color), var(--button-hero-shadow), 0 0 0 var(--button-hero-outline-width) var(--button-hero-outline-color); } [nbButton].appearance-hero.status-control:hover, .appearance-hero.status-control[nbButtonToggle]:hover { background-image: linear-gradient(to right, var(--button-hero-control-hover-left-background-color), var(--button-hero-control-hover-right-background-color)); } [nbButton].appearance-hero.status-control:active, .appearance-hero.status-control[nbButtonToggle]:active { background-image: linear-gradient(to right, var(--button-hero-control-active-left-background-color), var(--button-hero-control-active-right-background-color)); } [nbButton].appearance-hero.status-control[disabled], .appearance-hero.status-control[disabled][nbButtonToggle], [nbButton].appearance-hero.status-control.btn-disabled, .appearance-hero.status-control.btn-disabled[nbButtonToggle] { background-color: var(--button-hero-control-disabled-background-color); background-image: none; color: var(--button-hero-control-disabled-text-color); } [nbButton].appearance-hero.status-control.button-pulse, .appearance-hero.status-control.button-pulse[nbButtonToggle] { animation: button-hero-control-pulse 0.75s infinite alternate; } @keyframes button-hero-control-pulse { 0% { box-shadow: none; opacity: 0.3; } 100% { box-shadow: 0 0 1rem 0 var(--button-hero-control-left-background-color); opacity: 0.8; } } nb-button-group { display: inline-flex; } [dir=ltr] nb-button-group [nbButton]:first-child:not(:last-child), [dir=ltr] nb-button-group [nbButtonToggle]:first-child:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } [dir=ltr] nb-button-group [nbButton]:last-child:not(:first-child), [dir=ltr] nb-button-group [nbButtonToggle]:last-child:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } [dir=rtl] nb-button-group [nbButton]:first-child:not(:last-child), [dir=rtl] nb-button-group [nbButtonToggle]:first-child:not(:last-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } [dir=rtl] nb-button-group [nbButton]:last-child:not(:first-child), [dir=rtl] nb-button-group [nbButtonToggle]:last-child:not(:first-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } nb-button-group [nbButton]:not(:first-child):not(:last-child), nb-button-group [nbButtonToggle]:not(:first-child):not(:last-child) { border-radius: 0; } nb-button-group [nbButton].appearance-filled, nb-button-group [nbButton].appearance-ghost, nb-button-group [nbButtonToggle].appearance-filled, nb-button-group [nbButtonToggle].appearance-ghost { border-color: transparent; } [dir=ltr] nb-button-group [nbButton].appearance-filled.status-basic:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=ltr] nb-button-group [nbButtonToggle].appearance-filled.status-basic:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-left-color: var(--button-group-filled-basic-divider-color); } [dir=rtl] nb-button-group [nbButton].appearance-filled.status-basic:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=rtl] nb-button-group [nbButtonToggle].appearance-filled.status-basic:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-right-color: var(--button-group-filled-basic-divider-color); } nb-button-group [nbButton].appearance-filled.status-basic, nb-button-group [nbButtonToggle].appearance-filled.status-basic { color: var(--button-group-filled-button-basic-text-color); } [dir=ltr] nb-button-group [nbButton].appearance-filled.status-primary:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=ltr] nb-button-group [nbButtonToggle].appearance-filled.status-primary:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-left-color: var(--button-group-filled-primary-divider-color); } [dir=rtl] nb-button-group [nbButton].appearance-filled.status-primary:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=rtl] nb-button-group [nbButtonToggle].appearance-filled.status-primary:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-right-color: var(--button-group-filled-primary-divider-color); } nb-button-group [nbButton].appearance-filled.status-primary, nb-button-group [nbButtonToggle].appearance-filled.status-primary { color: var(--button-group-filled-button-primary-text-color); } [dir=ltr] nb-button-group [nbButton].appearance-filled.status-success:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=ltr] nb-button-group [nbButtonToggle].appearance-filled.status-success:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-left-color: var(--button-group-filled-success-divider-color); } [dir=rtl] nb-button-group [nbButton].appearance-filled.status-success:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=rtl] nb-button-group [nbButtonToggle].appearance-filled.status-success:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-right-color: var(--button-group-filled-success-divider-color); } nb-button-group [nbButton].appearance-filled.status-success, nb-button-group [nbButtonToggle].appearance-filled.status-success { color: var(--button-group-filled-button-success-text-color); } [dir=ltr] nb-button-group [nbButton].appearance-filled.status-warning:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=ltr] nb-button-group [nbButtonToggle].appearance-filled.status-warning:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-left-color: var(--button-group-filled-warning-divider-color); } [dir=rtl] nb-button-group [nbButton].appearance-filled.status-warning:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=rtl] nb-button-group [nbButtonToggle].appearance-filled.status-warning:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-right-color: var(--button-group-filled-warning-divider-color); } nb-button-group [nbButton].appearance-filled.status-warning, nb-button-group [nbButtonToggle].appearance-filled.status-warning { color: var(--button-group-filled-button-warning-text-color); } [dir=ltr] nb-button-group [nbButton].appearance-filled.status-danger:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=ltr] nb-button-group [nbButtonToggle].appearance-filled.status-danger:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-left-color: var(--button-group-filled-danger-divider-color); } [dir=rtl] nb-button-group [nbButton].appearance-filled.status-danger:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=rtl] nb-button-group [nbButtonToggle].appearance-filled.status-danger:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-right-color: var(--button-group-filled-danger-divider-color); } nb-button-group [nbButton].appearance-filled.status-danger, nb-button-group [nbButtonToggle].appearance-filled.status-danger { color: var(--button-group-filled-button-danger-text-color); } [dir=ltr] nb-button-group [nbButton].appearance-filled.status-info:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=ltr] nb-button-group [nbButtonToggle].appearance-filled.status-info:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-left-color: var(--button-group-filled-info-divider-color); } [dir=rtl] nb-button-group [nbButton].appearance-filled.status-info:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=rtl] nb-button-group [nbButtonToggle].appearance-filled.status-info:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-right-color: var(--button-group-filled-info-divider-color); } nb-button-group [nbButton].appearance-filled.status-info, nb-button-group [nbButtonToggle].appearance-filled.status-info { color: var(--button-group-filled-button-info-text-color); } [dir=ltr] nb-button-group [nbButton].appearance-filled.status-control:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=ltr] nb-button-group [nbButtonToggle].appearance-filled.status-control:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-left-color: var(--button-group-filled-control-divider-color); } [dir=rtl] nb-button-group [nbButton].appearance-filled.status-control:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=rtl] nb-button-group [nbButtonToggle].appearance-filled.status-control:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-right-color: var(--button-group-filled-control-divider-color); } nb-button-group [nbButton].appearance-filled.status-control, nb-button-group [nbButtonToggle].appearance-filled.status-control { color: var(--button-group-filled-button-control-text-color); } [dir=ltr] nb-button-group [nbButton].appearance-ghost:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=ltr] nb-button-group [nbButtonToggle].appearance-ghost:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-left-color: var(--button-group-ghost-divider-color); } [dir=rtl] nb-button-group [nbButton].appearance-ghost:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=rtl] nb-button-group [nbButtonToggle].appearance-ghost:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-right-color: var(--button-group-ghost-divider-color); } nb-list-item { border-bottom: var(--list-item-divider-width) var(--list-item-divider-style) var(--list-item-divider-color); color: var(--list-item-text-color); font-family: var(--list-item-font-family); font-size: var(--list-item-font-size); font-weight: var(--list-item-font-weight); line-height: var(--list-item-line-height); padding: var(--list-item-padding); } nb-list-item:first-child { border-top: var(--list-item-divider-width) var(--list-item-divider-style) var(--list-item-divider-color); } [nbInput] { border-style: var(--input-border-style); border-width: var(--input-border-width); font-family: var(--input-text-font-family); -webkit-appearance: none; -moz-appearance: none; appearance: none; } [nbInput].nb-transition { transition-duration: 0.15s; transition-property: border, background-color, color, box-shadow; transition-timing-function: ease-in; } [nbInput]::-moz-placeholder { font-family: var(--input-placeholder-text-font-family); text-overflow: ellipsis; } [nbInput]::placeholder { font-family: var(--input-placeholder-text-font-family); text-overflow: ellipsis; } [nbInput]:focus { outline: none; } [nbInput].input-full-width { width: 100%; } [nbInput].status-basic { background-color: var(--input-basic-background-color); border-color: var(--input-basic-border-color); color: var(--input-basic-text-color); } [nbInput].status-basic::-moz-placeholder { color: var(--input-basic-placeholder-text-color); } [nbInput].status-basic::placeholder { color: var(--input-basic-placeholder-text-color); } [nbInput].status-basic:focus { background-color: var(--input-basic-focus-background-color); border-color: var(--input-basic-focus-border-color); } [nbInput].status-basic:hover { background-color: var(--input-basic-hover-background-color); border-color: var(--input-basic-hover-border-color); } [nbInput].status-basic:focus:hover { background-color: var(--input-basic-focus-and-hover-background-color); border-color: var(--input-basic-focus-and-hover-border-color); } [nbInput].status-basic:disabled { background-color: var(--input-basic-disabled-background-color); border-color: var(--input-basic-disabled-border-color); color: var(--input-basic-disabled-text-color); } [nbInput].status-basic:disabled::-moz-placeholder { color: var(--input-basic-disabled-placeholder-text-color); } [nbInput].status-basic:disabled::placeholder { color: var(--input-basic-disabled-placeholder-text-color); } [nbInput].status-primary { background-color: var(--input-primary-background-color); border-color: var(--input-primary-border-color); color: var(--input-primary-text-color); } [nbInput].status-primary::-moz-placeholder { color: var(--input-primary-placeholder-text-color); } [nbInput].status-primary::placeholder { color: var(--input-primary-placeholder-text-color); } [nbInput].status-primary:focus { background-color: var(--input-primary-focus-background-color); border-color: var(--input-primary-focus-border-color); } [nbInput].status-primary:hover { background-color: var(--input-primary-hover-background-color); border-color: var(--input-primary-hover-border-color); } [nbInput].status-primary:focus:hover { background-color: var(--input-primary-focus-and-hover-background-color); border-color: var(--input-primary-focus-and-hover-border-color); } [nbInput].status-primary:disabled { background-color: var(--input-primary-disabled-background-color); border-color: var(--input-primary-disabled-border-color); color: var(--input-primary-disabled-text-color); } [nbInput].status-primary:disabled::-moz-placeholder { color: var(--input-primary-disabled-placeholder-text-color); } [nbInput].status-primary:disabled::placeholder { color: var(--input-primary-disabled-placeholder-text-color); } [nbInput].status-success { background-color: var(--input-success-background-color); border-color: var(--input-success-border-color); color: var(--input-success-text-color); } [nbInput].status-success::-moz-placeholder { color: var(--input-success-placeholder-text-color); } [nbInput].status-success::placeholder { color: var(--input-success-placeholder-text-color); } [nbInput].status-success:focus { background-color: var(--input-success-focus-background-color); border-color: var(--input-success-focus-border-color); } [nbInput].status-success:hover { background-color: var(--input-success-hover-background-color); border-color: var(--input-success-hover-border-color); } [nbInput].status-success:focus:hover { background-color: var(--input-success-focus-and-hover-background-color); border-color: var(--input-success-focus-and-hover-border-color); } [nbInput].status-success:disabled { background-color: var(--input-success-disabled-background-color); border-color: var(--input-success-disabled-border-color); color: var(--input-success-disabled-text-color); } [nbInput].status-success:disabled::-moz-placeholder { color: var(--input-success-disabled-placeholder-text-color); } [nbInput].status-success:disabled::placeholder { color: var(--input-success-disabled-placeholder-text-color); } [nbInput].status-warning { background-color: var(--input-warning-background-color); border-color: var(--input-warning-border-color); color: var(--input-warning-text-color); } [nbInput].status-warning::-moz-placeholder { color: var(--input-warning-placeholder-text-color); } [nbInput].status-warning::placeholder { color: var(--input-warning-placeholder-text-color); } [nbInput].status-warning:focus { background-color: var(--input-warning-focus-background-color); border-color: var(--input-warning-focus-border-color); } [nbInput].status-warning:hover { background-color: var(--input-warning-hover-background-color); border-color: var(--input-warning-hover-border-color); } [nbInput].status-warning:focus:hover { background-color: var(--input-warning-focus-and-hover-background-color); border-color: var(--input-warning-focus-and-hover-border-color); } [nbInput].status-warning:disabled { background-color: var(--input-warning-disabled-background-color); border-color: var(--input-warning-disabled-border-color); color: var(--input-warning-disabled-text-color); } [nbInput].status-warning:disabled::-moz-placeholder { color: var(--input-warning-disabled-placeholder-text-color); } [nbInput].status-warning:disabled::placeholder { color: var(--input-warning-disabled-placeholder-text-color); } [nbInput].status-danger { background-color: var(--input-danger-background-color); border-color: var(--input-danger-border-color); color: var(--input-danger-text-color); } [nbInput].status-danger::-moz-placeholder { color: var(--input-danger-placeholder-text-color); } [nbInput].status-danger::placeholder { color: var(--input-danger-placeholder-text-color); } [nbInput].status-danger:focus { background-color: var(--input-danger-focus-background-color); border-color: var(--input-danger-focus-border-color); } [nbInput].status-danger:hover { background-color: var(--input-danger-hover-background-color); border-color: var(--input-danger-hover-border-color); } [nbInput].status-danger:focus:hover { background-color: var(--input-danger-focus-and-hover-background-color); border-color: var(--input-danger-focus-and-hover-border-color); } [nbInput].status-danger:disabled { background-color: var(--input-danger-disabled-background-color); border-color: var(--input-danger-disabled-border-color); color: var(--input-danger-disabled-text-color); } [nbInput].status-danger:disabled::-moz-placeholder { color: var(--input-danger-disabled-placeholder-text-color); } [nbInput].status-danger:disabled::placeholder { color: var(--input-danger-disabled-placeholder-text-color); } [nbInput].status-info { background-color: var(--input-info-background-color); border-color: var(--input-info-border-color); color: var(--input-info-text-color); } [nbInput].status-info::-moz-placeholder { color: var(--input-info-placeholder-text-color); } [nbInput].status-info::placeholder { color: var(--input-info-placeholder-text-color); } [nbInput].status-info:focus { background-color: var(--input-info-focus-background-color); border-color: var(--input-info-focus-border-color); } [nbInput].status-info:hover { background-color: var(--input-info-hover-background-color); border-color: var(--input-info-hover-border-color); } [nbInput].status-info:focus:hover { background-color: var(--input-info-focus-and-hover-background-color); border-color: var(--input-info-focus-and-hover-border-color); } [nbInput].status-info:disabled { background-color: var(--input-info-disabled-background-color); border-color: var(--input-info-disabled-border-color); color: var(--input-info-disabled-text-color); } [nbInput].status-info:disabled::-moz-placeholder { color: var(--input-info-disabled-placeholder-text-color); } [nbInput].status-info:disabled::placeholder { color: var(--input-info-disabled-placeholder-text-color); } [nbInput].status-control { background-color: var(--input-control-background-color); border-color: var(--input-control-border-color); color: var(--input-control-text-color); } [nbInput].status-control::-moz-placeholder { color: var(--input-control-placeholder-text-color); } [nbInput].status-control::placeholder { color: var(--input-control-placeholder-text-color); } [nbInput].status-control:focus { background-color: var(--input-control-focus-background-color); border-color: var(--input-control-focus-border-color); } [nbInput].status-control:hover { background-color: var(--input-control-hover-background-color); border-color: var(--input-control-hover-border-color); } [nbInput].status-control:focus:hover { background-color: var(--input-control-focus-and-hover-background-color); border-color: var(--input-control-focus-and-hover-border-color); } [nbInput].status-control:disabled { background-color: var(--input-control-disabled-background-color); border-color: var(--input-control-disabled-border-color); color: var(--input-control-disabled-text-color); } [nbInput].status-control:disabled::-moz-placeholder { color: var(--input-control-disabled-placeholder-text-color); } [nbInput].status-control:disabled::placeholder { color: var(--input-control-disabled-placeholder-text-color); } [nbInput].size-tiny { font-size: var(--input-tiny-text-font-size); font-weight: var(--input-tiny-text-font-weight); line-height: var(--input-tiny-text-line-height); padding: var(--input-tiny-padding); } [nbInput].size-tiny:not(.input-full-width) { max-width: var(--input-tiny-max-width); } [nbInput].size-tiny::-moz-placeholder { font-size: var(--input-tiny-placeholder-text-font-size); font-weight: var(--input-tiny-placeholder-text-font-weight); line-height: var(--input-tiny-placeholder-text-line-height); } [nbInput].size-tiny::placeholder { font-size: var(--input-tiny-placeholder-text-font-size); font-weight: var(--input-tiny-placeholder-text-font-weight); line-height: var(--input-tiny-placeholder-text-line-height); } [nbInput].size-small { font-size: var(--input-small-text-font-size); font-weight: var(--input-small-text-font-weight); line-height: var(--input-small-text-line-height); padding: var(--input-small-padding); } [nbInput].size-small:not(.input-full-width) { max-width: var(--input-small-max-width); } [nbInput].size-small::-moz-placeholder { font-size: var(--input-small-placeholder-text-font-size); font-weight: var(--input-small-placeholder-text-font-weight); line-height: var(--input-small-placeholder-text-line-height); } [nbInput].size-small::placeholder { font-size: var(--input-small-placeholder-text-font-size); font-weight: var(--input-small-placeholder-text-font-weight); line-height: var(--input-small-placeholder-text-line-height); } [nbInput].size-medium { font-size: var(--input-medium-text-font-size); font-weight: var(--input-medium-text-font-weight); line-height: var(--input-medium-text-line-height); padding: var(--input-medium-padding); } [nbInput].size-medium:not(.input-full-width) { max-width: var(--input-medium-max-width); } [nbInput].size-medium::-moz-placeholder { font-size: var(--input-medium-placeholder-text-font-size); font-weight: var(--input-medium-placeholder-text-font-weight); line-height: var(--input-medium-placeholder-text-line-height); } [nbInput].size-medium::placeholder { font-size: var(--input-medium-placeholder-text-font-size); font-weight: var(--input-medium-placeholder-text-font-weight); line-height: var(--input-medium-placeholder-text-line-height); } [nbInput].size-large { font-size: var(--input-large-text-font-size); font-weight: var(--input-large-text-font-weight); line-height: var(--input-large-text-line-height); padding: var(--input-large-padding); } [nbInput].size-large:not(.input-full-width) { max-width: var(--input-large-max-width); } [nbInput].size-large::-moz-placeholder { font-size: var(--input-large-placeholder-text-font-size); font-weight: var(--input-large-placeholder-text-font-weight); line-height: var(--input-large-placeholder-text-line-height); } [nbInput].size-large::placeholder { font-size: var(--input-large-placeholder-text-font-size); font-weight: var(--input-large-placeholder-text-font-weight); line-height: var(--input-large-placeholder-text-line-height); } [nbInput].size-giant { font-size: var(--input-giant-text-font-size); font-weight: var(--input-giant-text-font-weight); line-height: var(--input-giant-text-line-height); padding: var(--input-giant-padding); } [nbInput].size-giant:not(.input-full-width) { max-width: var(--input-giant-max-width); } [nbInput].size-giant::-moz-placeholder { font-size: var(--input-giant-placeholder-text-font-size); font-weight: var(--input-giant-placeholder-text-font-weight); line-height: var(--input-giant-placeholder-text-line-height); } [nbInput].size-giant::placeholder { font-size: var(--input-giant-placeholder-text-font-size); font-weight: var(--input-giant-placeholder-text-font-weight); line-height: var(--input-giant-placeholder-text-line-height); } [nbInput].shape-rectangle { border-radius: var(--input-rectangle-border-radius); } [nbInput].shape-semi-round { border-radius: var(--input-semi-round-border-radius); } [nbInput].shape-round { border-radius: var(--input-round-border-radius); } nb-form-field [nbInput] { width: 100%; } [dir=ltr] .nb-form-field-control-with-prefix [nbInput].size-tiny { padding-left: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-prefix [nbInput].size-tiny { padding-right: var(--form-field-addon-tiny-width); } [dir=ltr] .nb-form-field-control-with-suffix [nbInput].size-tiny { padding-right: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-suffix [nbInput].size-tiny { padding-left: var(--form-field-addon-tiny-width); } [dir=ltr] .nb-form-field-control-with-prefix [nbInput].size-small { padding-left: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-prefix [nbInput].size-small { padding-right: var(--form-field-addon-small-width); } [dir=ltr] .nb-form-field-control-with-suffix [nbInput].size-small { padding-right: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-suffix [nbInput].size-small { padding-left: var(--form-field-addon-small-width); } [dir=ltr] .nb-form-field-control-with-prefix [nbInput].size-medium { padding-left: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-prefix [nbInput].size-medium { padding-right: var(--form-field-addon-medium-width); } [dir=ltr] .nb-form-field-control-with-suffix [nbInput].size-medium { padding-right: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-suffix [nbInput].size-medium { padding-left: var(--form-field-addon-medium-width); } [dir=ltr] .nb-form-field-control-with-prefix [nbInput].size-large { padding-left: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-prefix [nbInput].size-large { padding-right: var(--form-field-addon-large-width); } [dir=ltr] .nb-form-field-control-with-suffix [nbInput].size-large { padding-right: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-suffix [nbInput].size-large { padding-left: var(--form-field-addon-large-width); } [dir=ltr] .nb-form-field-control-with-prefix [nbInput].size-giant { padding-left: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-prefix [nbInput].size-giant { padding-right: var(--form-field-addon-giant-width); } [dir=ltr] .nb-form-field-control-with-suffix [nbInput].size-giant { padding-right: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-suffix [nbInput].size-giant { padding-left: var(--form-field-addon-giant-width); } .overlay-backdrop { background: var(--overlay-backdrop-background-color); } .cdk-overlay-container { z-index: 1040; } nb-popover { border: var(--popover-border-width) solid var(--popover-border-color); border-radius: var(--popover-border-radius); background: var(--popover-background-color); box-shadow: var(--popover-shadow); color: var(--popover-text-color); } nb-popover .primitive-overlay { font-family: var(--popover-text-font-family); font-size: var(--popover-text-font-size); font-weight: var(--popover-text-font-weight); line-height: var(--popover-text-line-height); padding: var(--popover-padding); } nb-popover .arrow { border-left: var(--popover-arrow-size) solid transparent; border-right: var(--popover-arrow-size) solid transparent; border-bottom: var(--popover-arrow-size) solid var(--popover-border-color); } nb-popover .arrow::after { position: absolute; content: " "; width: 0; height: 0; top: 3px; left: calc(50% - var(--popover-arrow-size)); border-left: var(--popover-arrow-size) solid transparent; border-right: var(--popover-arrow-size) solid transparent; border-bottom: var(--popover-arrow-size) solid var(--popover-background-color); -webkit-clip-path: inset(0 0 2px); clip-path: inset(0 0 2px); } nb-popover.nb-overlay-bottom .arrow { top: calc(-1 * var(--popover-arrow-size) + 1px); left: calc(50% - var(--popover-arrow-size)); } nb-popover.nb-overlay-bottom-start .arrow { top: calc(-1 * var(--popover-arrow-size) + 1px); } [dir=ltr] nb-popover.nb-overlay-bottom-start .arrow { right: var(--popover-arrow-size); } [dir=rtl] nb-popover.nb-overlay-bottom-start .arrow { left: var(--popover-arrow-size); } nb-popover.nb-overlay-bottom-end .arrow { top: calc(-1 * var(--popover-arrow-size) + 1px); } [dir=ltr] nb-popover.nb-overlay-bottom-end .arrow { left: var(--popover-arrow-size); } [dir=rtl] nb-popover.nb-overlay-bottom-end .arrow { right: var(--popover-arrow-size); } nb-popover.nb-overlay-left .arrow { right: calc(-1 * var(--popover-arrow-size) - var(--popover-arrow-size) / 2 + 2px); top: calc(50% - var(--popover-arrow-size) * 0.5); transform: rotate(90deg); } nb-popover.nb-overlay-start-top .arrow { right: calc(-1 * var(--popover-arrow-size) - var(--popover-arrow-size) / 2 + 2px); bottom: var(--popover-arrow-size); transform: rotate(90deg); } nb-popover.nb-overlay-start-bottom .arrow { right: calc(-1 * var(--popover-arrow-size) - var(--popover-arrow-size) / 2 + 2px); top: var(--popover-arrow-size); transform: rotate(90deg); } nb-popover.nb-overlay-top .arrow { bottom: calc(-1 * var(--popover-arrow-size) + 1px); left: calc(50% - var(--popover-arrow-size)); transform: rotate(180deg); } nb-popover.nb-overlay-top-start .arrow { bottom: calc(-1 * var(--popover-arrow-size) + 1px); transform: rotate(180deg); } [dir=ltr] nb-popover.nb-overlay-top-start .arrow { right: var(--popover-arrow-size); } [dir=rtl] nb-popover.nb-overlay-top-start .arrow { left: var(--popover-arrow-size); } nb-popover.nb-overlay-top-end .arrow { bottom: calc(-1 * var(--popover-arrow-size) + 1px); transform: rotate(180deg); } [dir=ltr] nb-popover.nb-overlay-top-end .arrow { left: var(--popover-arrow-size); } [dir=rtl] nb-popover.nb-overlay-top-end .arrow { right: var(--popover-arrow-size); } nb-popover.nb-overlay-right .arrow { left: calc(-1 * var(--popover-arrow-size) - var(--popover-arrow-size) / 2 + 2px); top: calc(50% - var(--popover-arrow-size) * 0.5); transform: rotate(270deg); } nb-popover.nb-overlay-end-top .arrow { left: calc(-1 * var(--popover-arrow-size) - var(--popover-arrow-size) / 2 + 2px); bottom: var(--popover-arrow-size); transform: rotate(270deg); } nb-popover.nb-overlay-end-bottom .arrow { left: calc(-1 * var(--popover-arrow-size) - var(--popover-arrow-size) / 2 + 2px); top: var(--popover-arrow-size); transform: rotate(270deg); } .context-menu-host { /* Fixes click not being bubbled to the body in Safari. https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html */ cursor: pointer; } nb-context-menu { background-color: var(--context-menu-background-color); border-color: var(--context-menu-border-color); border-style: var(--context-menu-border-style); border-width: var(--context-menu-border-width); border-radius: var(--context-menu-border-radius); box-shadow: var(--context-menu-shadow); min-width: var(--context-menu-min-width); max-width: var(--context-menu-max-width); } nb-context-menu nb-menu { border-radius: var(--context-menu-border-radius); overflow: hidden; text-align: var(--context-menu-text-align); } nb-context-menu nb-menu nb-icon.expand-state svg { pointer-events: none; } nb-select .select-button { min-width: var(--select-min-width); cursor: var(--select-cursor); font-family: var(--select-text-font-family); } nb-select .select-button.placeholder { font-family: var(--select-placeholder-text-font-family); } nb-select .select-button:focus { outline: none; } nb-select .select-button[disabled] { cursor: var(--select-disabled-cursor); } nb-select.size-tiny .select-button { font-size: var(--select-tiny-text-font-size); font-weight: var(--select-tiny-text-font-weight); line-height: var(--select-tiny-text-line-height); } nb-select.size-tiny .select-button.placeholder { font-size: var(--select-tiny-placeholder-text-font-size); font-weight: var(--select-tiny-placeholder-text-font-weight); } nb-select.size-tiny .select-button.empty::before { content: " "; display: block; height: var(--select-tiny-text-line-height); } nb-select.size-tiny:not(.full-width) { max-width: var(--select-tiny-max-width); } nb-select.size-small .select-button { font-size: var(--select-small-text-font-size); font-weight: var(--select-small-text-font-weight); line-height: var(--select-small-text-line-height); } nb-select.size-small .select-button.placeholder { font-size: var(--select-small-placeholder-text-font-size); font-weight: var(--select-small-placeholder-text-font-weight); } nb-select.size-small .select-button.empty::before { content: " "; display: block; height: var(--select-small-text-line-height); } nb-select.size-small:not(.full-width) { max-width: var(--select-small-max-width); } nb-select.size-medium .select-button { font-size: var(--select-medium-text-font-size); font-weight: var(--select-medium-text-font-weight); line-height: var(--select-medium-text-line-height); } nb-select.size-medium .select-button.placeholder { font-size: var(--select-medium-placeholder-text-font-size); font-weight: var(--select-medium-placeholder-text-font-weight); } nb-select.size-medium .select-button.empty::before { content: " "; display: block; height: var(--select-medium-text-line-height); } nb-select.size-medium:not(.full-width) { max-width: var(--select-medium-max-width); } nb-select.size-large .select-button { font-size: var(--select-large-text-font-size); font-weight: var(--select-large-text-font-weight); line-height: var(--select-large-text-line-height); } nb-select.size-large .select-button.placeholder { font-size: var(--select-large-placeholder-text-font-size); font-weight: var(--select-large-placeholder-text-font-weight); } nb-select.size-large .select-button.empty::before { content: " "; display: block; height: var(--select-large-text-line-height); } nb-select.size-large:not(.full-width) { max-width: var(--select-large-max-width); } nb-select.size-giant .select-button { font-size: var(--select-giant-text-font-size); font-weight: var(--select-giant-text-font-weight); line-height: var(--select-giant-text-line-height); } nb-select.size-giant .select-button.placeholder { font-size: var(--select-giant-placeholder-text-font-size); font-weight: var(--select-giant-placeholder-text-font-weight); } nb-select.size-giant .select-button.empty::before { content: " "; display: block; height: var(--select-giant-text-line-height); } nb-select.size-giant:not(.full-width) { max-width: var(--select-giant-max-width); } nb-select.shape-rectangle .select-button { border-radius: var(--select-rectangle-border-radius); } nb-select.shape-semi-round .select-button { border-radius: var(--select-semi-round-border-radius); } nb-select.shape-round .select-button { border-radius: var(--select-round-border-radius); } nb-select.appearance-outline .select-button { border-style: var(--select-outline-border-style); border-width: var(--select-outline-border-width); } nb-select.appearance-outline .select-button.top { border-top-style: var(--select-outline-adjacent-border-style); border-top-width: var(--select-outline-adjacent-border-width); } nb-select.appearance-outline .select-button.bottom { border-bottom-style: var(--select-outline-adjacent-border-style); border-bottom-width: var(--select-outline-adjacent-border-width); } nb-select.appearance-outline.status-basic .select-button { background-color: var(--select-outline-basic-background-color); border-color: var(--select-outline-basic-border-color); color: var(--select-outline-basic-text-color); } nb-select.appearance-outline.status-basic .select-button.placeholder { color: var(--select-outline-basic-placeholder-text-color); } nb-select.appearance-outline.status-basic .select-button nb-icon { color: var(--select-outline-basic-icon-color); } nb-select.appearance-outline.status-basic .select-button:focus { background-color: var(--select-outline-basic-focus-background-color); border-color: var(--select-outline-basic-focus-border-color); } nb-select.appearance-outline.status-basic .select-button:hover { background-color: var(--select-outline-basic-hover-background-color); border-color: var(--select-outline-basic-hover-border-color); } nb-select.appearance-outline.status-basic .select-button:focus:hover { background-color: var(--select-outline-basic-focus-and-hover-background-color); border-color: var(--select-outline-basic-focus-and-hover-border-color); } nb-select.appearance-outline.status-basic .select-button[disabled] { color: var(--select-outline-basic-disabled-text-color); background-color: var(--select-outline-basic-disabled-background-color); border-color: var(--select-outline-basic-disabled-border-color); } nb-select.appearance-outline.status-basic .select-button[disabled] nb-icon { color: var(--select-outline-basic-disabled-icon-color); } nb-select.appearance-outline.status-basic .select-button.bottom, nb-select.appearance-outline.status-basic .select-button.top { border-color: var(--select-outline-basic-open-border-color); } nb-select.appearance-outline.status-basic .select-button.top { border-top-color: var(--select-outline-basic-adjacent-border-color); } nb-select.appearance-outline.status-basic .select-button.bottom { border-bottom-color: var(--select-outline-basic-adjacent-border-color); } nb-select.appearance-outline.status-primary .select-button { background-color: var(--select-outline-primary-background-color); border-color: var(--select-outline-primary-border-color); color: var(--select-outline-primary-text-color); } nb-select.appearance-outline.status-primary .select-button.placeholder { color: var(--select-outline-primary-placeholder-text-color); } nb-select.appearance-outline.status-primary .select-button nb-icon { color: var(--select-outline-primary-icon-color); } nb-select.appearance-outline.status-primary .select-button:focus { background-color: var(--select-outline-primary-focus-background-color); border-color: var(--select-outline-primary-focus-border-color); } nb-select.appearance-outline.status-primary .select-button:hover { background-color: var(--select-outline-primary-hover-background-color); border-color: var(--select-outline-primary-hover-border-color); } nb-select.appearance-outline.status-primary .select-button:focus:hover { background-color: var(--select-outline-primary-focus-and-hover-background-color); border-color: var(--select-outline-primary-focus-and-hover-border-color); } nb-select.appearance-outline.status-primary .select-button[disabled] { color: var(--select-outline-primary-disabled-text-color); background-color: var(--select-outline-primary-disabled-background-color); border-color: var(--select-outline-primary-disabled-border-color); } nb-select.appearance-outline.status-primary .select-button[disabled] nb-icon { color: var(--select-outline-primary-disabled-icon-color); } nb-select.appearance-outline.status-primary .select-button.bottom, nb-select.appearance-outline.status-primary .select-button.top { border-color: var(--select-outline-primary-open-border-color); } nb-select.appearance-outline.status-primary .select-button.top { border-top-color: var(--select-outline-primary-adjacent-border-color); } nb-select.appearance-outline.status-primary .select-button.bottom { border-bottom-color: var(--select-outline-primary-adjacent-border-color); } nb-select.appearance-outline.status-success .select-button { background-color: var(--select-outline-success-background-color); border-color: var(--select-outline-success-border-color); color: var(--select-outline-success-text-color); } nb-select.appearance-outline.status-success .select-button.placeholder { color: var(--select-outline-success-placeholder-text-color); } nb-select.appearance-outline.status-success .select-button nb-icon { color: var(--select-outline-success-icon-color); } nb-select.appearance-outline.status-success .select-button:focus { background-color: var(--select-outline-success-focus-background-color); border-color: var(--select-outline-success-focus-border-color); } nb-select.appearance-outline.status-success .select-button:hover { background-color: var(--select-outline-success-hover-background-color); border-color: var(--select-outline-success-hover-border-color); } nb-select.appearance-outline.status-success .select-button:focus:hover { background-color: var(--select-outline-success-focus-and-hover-background-color); border-color: var(--select-outline-success-focus-and-hover-border-color); } nb-select.appearance-outline.status-success .select-button[disabled] { color: var(--select-outline-success-disabled-text-color); background-color: var(--select-outline-success-disabled-background-color); border-color: var(--select-outline-success-disabled-border-color); } nb-select.appearance-outline.status-success .select-button[disabled] nb-icon { color: var(--select-outline-success-disabled-icon-color); } nb-select.appearance-outline.status-success .select-button.bottom, nb-select.appearance-outline.status-success .select-button.top { border-color: var(--select-outline-success-open-border-color); } nb-select.appearance-outline.status-success .select-button.top { border-top-color: var(--select-outline-success-adjacent-border-color); } nb-select.appearance-outline.status-success .select-button.bottom { border-bottom-color: var(--select-outline-success-adjacent-border-color); } nb-select.appearance-outline.status-warning .select-button { background-color: var(--select-outline-warning-background-color); border-color: var(--select-outline-warning-border-color); color: var(--select-outline-warning-text-color); } nb-select.appearance-outline.status-warning .select-button.placeholder { color: var(--select-outline-warning-placeholder-text-color); } nb-select.appearance-outline.status-warning .select-button nb-icon { color: var(--select-outline-warning-icon-color); } nb-select.appearance-outline.status-warning .select-button:focus { background-color: var(--select-outline-warning-focus-background-color); border-color: var(--select-outline-warning-focus-border-color); } nb-select.appearance-outline.status-warning .select-button:hover { background-color: var(--select-outline-warning-hover-background-color); border-color: var(--select-outline-warning-hover-border-color); } nb-select.appearance-outline.status-warning .select-button:focus:hover { background-color: var(--select-outline-warning-focus-and-hover-background-color); border-color: var(--select-outline-warning-focus-and-hover-border-color); } nb-select.appearance-outline.status-warning .select-button[disabled] { color: var(--select-outline-warning-disabled-text-color); background-color: var(--select-outline-warning-disabled-background-color); border-color: var(--select-outline-warning-disabled-border-color); } nb-select.appearance-outline.status-warning .select-button[disabled] nb-icon { color: var(--select-outline-warning-disabled-icon-color); } nb-select.appearance-outline.status-warning .select-button.bottom, nb-select.appearance-outline.status-warning .select-button.top { border-color: var(--select-outline-warning-open-border-color); } nb-select.appearance-outline.status-warning .select-button.top { border-top-color: var(--select-outline-warning-adjacent-border-color); } nb-select.appearance-outline.status-warning .select-button.bottom { border-bottom-color: var(--select-outline-warning-adjacent-border-color); } nb-select.appearance-outline.status-danger .select-button { background-color: var(--select-outline-danger-background-color); border-color: var(--select-outline-danger-border-color); color: var(--select-outline-danger-text-color); } nb-select.appearance-outline.status-danger .select-button.placeholder { color: var(--select-outline-danger-placeholder-text-color); } nb-select.appearance-outline.status-danger .select-button nb-icon { color: var(--select-outline-danger-icon-color); } nb-select.appearance-outline.status-danger .select-button:focus { background-color: var(--select-outline-danger-focus-background-color); border-color: var(--select-outline-danger-focus-border-color); } nb-select.appearance-outline.status-danger .select-button:hover { background-color: var(--select-outline-danger-hover-background-color); border-color: var(--select-outline-danger-hover-border-color); } nb-select.appearance-outline.status-danger .select-button:focus:hover { background-color: var(--select-outline-danger-focus-and-hover-background-color); border-color: var(--select-outline-danger-focus-and-hover-border-color); } nb-select.appearance-outline.status-danger .select-button[disabled] { color: var(--select-outline-danger-disabled-text-color); background-color: var(--select-outline-danger-disabled-background-color); border-color: var(--select-outline-danger-disabled-border-color); } nb-select.appearance-outline.status-danger .select-button[disabled] nb-icon { color: var(--select-outline-danger-disabled-icon-color); } nb-select.appearance-outline.status-danger .select-button.bottom, nb-select.appearance-outline.status-danger .select-button.top { border-color: var(--select-outline-danger-open-border-color); } nb-select.appearance-outline.status-danger .select-button.top { border-top-color: var(--select-outline-danger-adjacent-border-color); } nb-select.appearance-outline.status-danger .select-button.bottom { border-bottom-color: var(--select-outline-danger-adjacent-border-color); } nb-select.appearance-outline.status-info .select-button { background-color: var(--select-outline-info-background-color); border-color: var(--select-outline-info-border-color); color: var(--select-outline-info-text-color); } nb-select.appearance-outline.status-info .select-button.placeholder { color: var(--select-outline-info-placeholder-text-color); } nb-select.appearance-outline.status-info .select-button nb-icon { color: var(--select-outline-info-icon-color); } nb-select.appearance-outline.status-info .select-button:focus { background-color: var(--select-outline-info-focus-background-color); border-color: var(--select-outline-info-focus-border-color); } nb-select.appearance-outline.status-info .select-button:hover { background-color: var(--select-outline-info-hover-background-color); border-color: var(--select-outline-info-hover-border-color); } nb-select.appearance-outline.status-info .select-button:focus:hover { background-color: var(--select-outline-info-focus-and-hover-background-color); border-color: var(--select-outline-info-focus-and-hover-border-color); } nb-select.appearance-outline.status-info .select-button[disabled] { color: var(--select-outline-info-disabled-text-color); background-color: var(--select-outline-info-disabled-background-color); border-color: var(--select-outline-info-disabled-border-color); } nb-select.appearance-outline.status-info .select-button[disabled] nb-icon { color: var(--select-outline-info-disabled-icon-color); } nb-select.appearance-outline.status-info .select-button.bottom, nb-select.appearance-outline.status-info .select-button.top { border-color: var(--select-outline-info-open-border-color); } nb-select.appearance-outline.status-info .select-button.top { border-top-color: var(--select-outline-info-adjacent-border-color); } nb-select.appearance-outline.status-info .select-button.bottom { border-bottom-color: var(--select-outline-info-adjacent-border-color); } nb-select.appearance-outline.status-control .select-button { background-color: var(--select-outline-control-background-color); border-color: var(--select-outline-control-border-color); color: var(--select-outline-control-text-color); } nb-select.appearance-outline.status-control .select-button.placeholder { color: var(--select-outline-control-placeholder-text-color); } nb-select.appearance-outline.status-control .select-button nb-icon { color: var(--select-outline-control-icon-color); } nb-select.appearance-outline.status-control .select-button:focus { background-color: var(--select-outline-control-focus-background-color); border-color: var(--select-outline-control-focus-border-color); } nb-select.appearance-outline.status-control .select-button:hover { background-color: var(--select-outline-control-hover-background-color); border-color: var(--select-outline-control-hover-border-color); } nb-select.appearance-outline.status-control .select-button:focus:hover { background-color: var(--select-outline-control-focus-and-hover-background-color); border-color: var(--select-outline-control-focus-and-hover-border-color); } nb-select.appearance-outline.status-control .select-button[disabled] { color: var(--select-outline-control-disabled-text-color); background-color: var(--select-outline-control-disabled-background-color); border-color: var(--select-outline-control-disabled-border-color); } nb-select.appearance-outline.status-control .select-button[disabled] nb-icon { color: var(--select-outline-control-disabled-icon-color); } nb-select.appearance-outline.status-control .select-button.bottom, nb-select.appearance-outline.status-control .select-button.top { border-color: var(--select-outline-control-open-border-color); } nb-select.appearance-outline.status-control .select-button.top { border-top-color: var(--select-outline-control-adjacent-border-color); } nb-select.appearance-outline.status-control .select-button.bottom { border-bottom-color: var(--select-outline-control-adjacent-border-color); } nb-select.appearance-outline.size-tiny .select-button { padding: var(--select-outline-tiny-padding); } [dir=ltr] nb-select.appearance-outline.size-tiny .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-outline.size-tiny .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-tiny .select-button { padding-left: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-tiny .select-button { padding-right: var(--form-field-addon-tiny-width); } nb-select.appearance-outline.size-small .select-button { padding: var(--select-outline-small-padding); } [dir=ltr] nb-select.appearance-outline.size-small .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-outline.size-small .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-small .select-button { padding-left: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-small .select-button { padding-right: var(--form-field-addon-small-width); } nb-select.appearance-outline.size-medium .select-button { padding: var(--select-outline-medium-padding); } [dir=ltr] nb-select.appearance-outline.size-medium .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-outline.size-medium .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-medium .select-button { padding-left: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-medium .select-button { padding-right: var(--form-field-addon-medium-width); } nb-select.appearance-outline.size-large .select-button { padding: var(--select-outline-large-padding); } [dir=ltr] nb-select.appearance-outline.size-large .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-outline.size-large .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-large .select-button { padding-left: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-large .select-button { padding-right: var(--form-field-addon-large-width); } nb-select.appearance-outline.size-giant .select-button { padding: var(--select-outline-giant-padding); } [dir=ltr] nb-select.appearance-outline.size-giant .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-outline.size-giant .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-giant .select-button { padding-left: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-giant .select-button { padding-right: var(--form-field-addon-giant-width); } nb-select.appearance-filled .select-button { border-style: var(--select-filled-border-style); border-width: var(--select-filled-border-width); } nb-select.appearance-filled.size-tiny .select-button { padding: var(--select-filled-tiny-padding); } [dir=ltr] nb-select.appearance-filled.size-tiny .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-filled.size-tiny .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-tiny .select-button { padding-left: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-tiny .select-button { padding-right: var(--form-field-addon-tiny-width); } nb-select.appearance-filled.size-small .select-button { padding: var(--select-filled-small-padding); } [dir=ltr] nb-select.appearance-filled.size-small .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-filled.size-small .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-small .select-button { padding-left: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-small .select-button { padding-right: var(--form-field-addon-small-width); } nb-select.appearance-filled.size-medium .select-button { padding: var(--select-filled-medium-padding); } [dir=ltr] nb-select.appearance-filled.size-medium .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-filled.size-medium .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-medium .select-button { padding-left: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-medium .select-button { padding-right: var(--form-field-addon-medium-width); } nb-select.appearance-filled.size-large .select-button { padding: var(--select-filled-large-padding); } [dir=ltr] nb-select.appearance-filled.size-large .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-filled.size-large .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-large .select-button { padding-left: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-large .select-button { padding-right: var(--form-field-addon-large-width); } nb-select.appearance-filled.size-giant .select-button { padding: var(--select-filled-giant-padding); } [dir=ltr] nb-select.appearance-filled.size-giant .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-filled.size-giant .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-giant .select-button { padding-left: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-giant .select-button { padding-right: var(--form-field-addon-giant-width); } nb-select.appearance-filled.status-basic .select-button { background-color: var(--select-filled-basic-background-color); border-color: var(--select-filled-basic-border-color); color: var(--select-filled-basic-text-color); } nb-select.appearance-filled.status-basic .select-button.placeholder { color: var(--select-filled-basic-placeholder-text-color); } nb-select.appearance-filled.status-basic .select-button:focus { background-color: var(--select-filled-basic-focus-background-color); border-color: var(--select-filled-basic-focus-border-color); } nb-select.appearance-filled.status-basic .select-button:hover { background-color: var(--select-filled-basic-hover-background-color); border-color: var(--select-filled-basic-hover-border-color); } nb-select.appearance-filled.status-basic .select-button:focus:hover { background-color: var(--select-filled-basic-focus-and-hover-background-color); border-color: var(--select-filled-basic-focus-and-hover-border-color); } nb-select.appearance-filled.status-basic .select-button[disabled] { background-color: var(--select-filled-basic-disabled-background-color); border-color: var(--select-filled-basic-disabled-border-color); color: var(--select-filled-basic-disabled-text-color); } nb-select.appearance-filled.status-basic .select-button[disabled] nb-icon { color: var(--select-filled-basic-disabled-icon-color); } nb-select.appearance-filled.status-basic .select-button nb-icon { color: var(--select-filled-basic-icon-color); } nb-select.appearance-filled.status-primary .select-button { background-color: var(--select-filled-primary-background-color); border-color: var(--select-filled-primary-border-color); color: var(--select-filled-primary-text-color); } nb-select.appearance-filled.status-primary .select-button.placeholder { color: var(--select-filled-primary-placeholder-text-color); } nb-select.appearance-filled.status-primary .select-button:focus { background-color: var(--select-filled-primary-focus-background-color); border-color: var(--select-filled-primary-focus-border-color); } nb-select.appearance-filled.status-primary .select-button:hover { background-color: var(--select-filled-primary-hover-background-color); border-color: var(--select-filled-primary-hover-border-color); } nb-select.appearance-filled.status-primary .select-button:focus:hover { background-color: var(--select-filled-primary-focus-and-hover-background-color); border-color: var(--select-filled-primary-focus-and-hover-border-color); } nb-select.appearance-filled.status-primary .select-button[disabled] { background-color: var(--select-filled-primary-disabled-background-color); border-color: var(--select-filled-primary-disabled-border-color); color: var(--select-filled-primary-disabled-text-color); } nb-select.appearance-filled.status-primary .select-button[disabled] nb-icon { color: var(--select-filled-primary-disabled-icon-color); } nb-select.appearance-filled.status-primary .select-button nb-icon { color: var(--select-filled-primary-icon-color); } nb-select.appearance-filled.status-success .select-button { background-color: var(--select-filled-success-background-color); border-color: var(--select-filled-success-border-color); color: var(--select-filled-success-text-color); } nb-select.appearance-filled.status-success .select-button.placeholder { color: var(--select-filled-success-placeholder-text-color); } nb-select.appearance-filled.status-success .select-button:focus { background-color: var(--select-filled-success-focus-background-color); border-color: var(--select-filled-success-focus-border-color); } nb-select.appearance-filled.status-success .select-button:hover { background-color: var(--select-filled-success-hover-background-color); border-color: var(--select-filled-success-hover-border-color); } nb-select.appearance-filled.status-success .select-button:focus:hover { background-color: var(--select-filled-success-focus-and-hover-background-color); border-color: var(--select-filled-success-focus-and-hover-border-color); } nb-select.appearance-filled.status-success .select-button[disabled] { background-color: var(--select-filled-success-disabled-background-color); border-color: var(--select-filled-success-disabled-border-color); color: var(--select-filled-success-disabled-text-color); } nb-select.appearance-filled.status-success .select-button[disabled] nb-icon { color: var(--select-filled-success-disabled-icon-color); } nb-select.appearance-filled.status-success .select-button nb-icon { color: var(--select-filled-success-icon-color); } nb-select.appearance-filled.status-warning .select-button { background-color: var(--select-filled-warning-background-color); border-color: var(--select-filled-warning-border-color); color: var(--select-filled-warning-text-color); } nb-select.appearance-filled.status-warning .select-button.placeholder { color: var(--select-filled-warning-placeholder-text-color); } nb-select.appearance-filled.status-warning .select-button:focus { background-color: var(--select-filled-warning-focus-background-color); border-color: var(--select-filled-warning-focus-border-color); } nb-select.appearance-filled.status-warning .select-button:hover { background-color: var(--select-filled-warning-hover-background-color); border-color: var(--select-filled-warning-hover-border-color); } nb-select.appearance-filled.status-warning .select-button:focus:hover { background-color: var(--select-filled-warning-focus-and-hover-background-color); border-color: var(--select-filled-warning-focus-and-hover-border-color); } nb-select.appearance-filled.status-warning .select-button[disabled] { background-color: var(--select-filled-warning-disabled-background-color); border-color: var(--select-filled-warning-disabled-border-color); color: var(--select-filled-warning-disabled-text-color); } nb-select.appearance-filled.status-warning .select-button[disabled] nb-icon { color: var(--select-filled-warning-disabled-icon-color); } nb-select.appearance-filled.status-warning .select-button nb-icon { color: var(--select-filled-warning-icon-color); } nb-select.appearance-filled.status-danger .select-button { background-color: var(--select-filled-danger-background-color); border-color: var(--select-filled-danger-border-color); color: var(--select-filled-danger-text-color); } nb-select.appearance-filled.status-danger .select-button.placeholder { color: var(--select-filled-danger-placeholder-text-color); } nb-select.appearance-filled.status-danger .select-button:focus { background-color: var(--select-filled-danger-focus-background-color); border-color: var(--select-filled-danger-focus-border-color); } nb-select.appearance-filled.status-danger .select-button:hover { background-color: var(--select-filled-danger-hover-background-color); border-color: var(--select-filled-danger-hover-border-color); } nb-select.appearance-filled.status-danger .select-button:focus:hover { background-color: var(--select-filled-danger-focus-and-hover-background-color); border-color: var(--select-filled-danger-focus-and-hover-border-color); } nb-select.appearance-filled.status-danger .select-button[disabled] { background-color: var(--select-filled-danger-disabled-background-color); border-color: var(--select-filled-danger-disabled-border-color); color: var(--select-filled-danger-disabled-text-color); } nb-select.appearance-filled.status-danger .select-button[disabled] nb-icon { color: var(--select-filled-danger-disabled-icon-color); } nb-select.appearance-filled.status-danger .select-button nb-icon { color: var(--select-filled-danger-icon-color); } nb-select.appearance-filled.status-info .select-button { background-color: var(--select-filled-info-background-color); border-color: var(--select-filled-info-border-color); color: var(--select-filled-info-text-color); } nb-select.appearance-filled.status-info .select-button.placeholder { color: var(--select-filled-info-placeholder-text-color); } nb-select.appearance-filled.status-info .select-button:focus { background-color: var(--select-filled-info-focus-background-color); border-color: var(--select-filled-info-focus-border-color); } nb-select.appearance-filled.status-info .select-button:hover { background-color: var(--select-filled-info-hover-background-color); border-color: var(--select-filled-info-hover-border-color); } nb-select.appearance-filled.status-info .select-button:focus:hover { background-color: var(--select-filled-info-focus-and-hover-background-color); border-color: var(--select-filled-info-focus-and-hover-border-color); } nb-select.appearance-filled.status-info .select-button[disabled] { background-color: var(--select-filled-info-disabled-background-color); border-color: var(--select-filled-info-disabled-border-color); color: var(--select-filled-info-disabled-text-color); } nb-select.appearance-filled.status-info .select-button[disabled] nb-icon { color: var(--select-filled-info-disabled-icon-color); } nb-select.appearance-filled.status-info .select-button nb-icon { color: var(--select-filled-info-icon-color); } nb-select.appearance-filled.status-control .select-button { background-color: var(--select-filled-control-background-color); border-color: var(--select-filled-control-border-color); color: var(--select-filled-control-text-color); } nb-select.appearance-filled.status-control .select-button.placeholder { color: var(--select-filled-control-placeholder-text-color); } nb-select.appearance-filled.status-control .select-button:focus { background-color: var(--select-filled-control-focus-background-color); border-color: var(--select-filled-control-focus-border-color); } nb-select.appearance-filled.status-control .select-button:hover { background-color: var(--select-filled-control-hover-background-color); border-color: var(--select-filled-control-hover-border-color); } nb-select.appearance-filled.status-control .select-button:focus:hover { background-color: var(--select-filled-control-focus-and-hover-background-color); border-color: var(--select-filled-control-focus-and-hover-border-color); } nb-select.appearance-filled.status-control .select-button[disabled] { background-color: var(--select-filled-control-disabled-background-color); border-color: var(--select-filled-control-disabled-border-color); color: var(--select-filled-control-disabled-text-color); } nb-select.appearance-filled.status-control .select-button[disabled] nb-icon { color: var(--select-filled-control-disabled-icon-color); } nb-select.appearance-filled.status-control .select-button nb-icon { color: var(--select-filled-control-icon-color); } nb-select.appearance-hero .select-button { border: none; } nb-select.appearance-hero.size-tiny .select-button { padding: var(--select-hero-tiny-padding); } [dir=ltr] nb-select.appearance-hero.size-tiny .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-hero.size-tiny .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-tiny .select-button { padding-left: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-tiny .select-button { padding-right: var(--form-field-addon-tiny-width); } nb-select.appearance-hero.size-small .select-button { padding: var(--select-hero-small-padding); } [dir=ltr] nb-select.appearance-hero.size-small .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-hero.size-small .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-small .select-button { padding-left: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-small .select-button { padding-right: var(--form-field-addon-small-width); } nb-select.appearance-hero.size-medium .select-button { padding: var(--select-hero-medium-padding); } [dir=ltr] nb-select.appearance-hero.size-medium .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-hero.size-medium .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-medium .select-button { padding-left: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-medium .select-button { padding-right: var(--form-field-addon-medium-width); } nb-select.appearance-hero.size-large .select-button { padding: var(--select-hero-large-padding); } [dir=ltr] nb-select.appearance-hero.size-large .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-hero.size-large .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-large .select-button { padding-left: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-large .select-button { padding-right: var(--form-field-addon-large-width); } nb-select.appearance-hero.size-giant .select-button { padding: var(--select-hero-giant-padding); } [dir=ltr] nb-select.appearance-hero.size-giant .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-hero.size-giant .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-giant .select-button { padding-left: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-giant .select-button { padding-right: var(--form-field-addon-giant-width); } nb-select.appearance-hero.status-basic .select-button { background-image: linear-gradient(to right, var(--select-hero-basic-left-background-color), var(--select-hero-basic-right-background-color)); color: var(--select-hero-basic-text-color); } nb-select.appearance-hero.status-basic .select-button.placeholder { color: var(--select-hero-basic-placeholder-text-color); } nb-select.appearance-hero.status-basic .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-basic-focus-left-background-color), var(--select-hero-basic-focus-right-background-color)); } nb-select.appearance-hero.status-basic .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-basic-hover-left-background-color), var(--select-hero-basic-hover-right-background-color)); } nb-select.appearance-hero.status-basic .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-basic-focus-and-hover-left-background-color), var(--select-hero-basic-focus-and-hover-right-background-color)); } nb-select.appearance-hero.status-basic .select-button[disabled] { color: var(--select-hero-basic-disabled-text-color); background-color: var(--select-hero-basic-disabled-background-color); background-image: none; } nb-select.appearance-hero.status-basic .select-button[disabled] nb-icon { color: var(--select-hero-basic-disabled-icon-color); } nb-select.appearance-hero.status-basic .select-button nb-icon { color: var(--select-hero-basic-icon-color); } nb-select.appearance-hero.status-primary .select-button { background-image: linear-gradient(to right, var(--select-hero-primary-left-background-color), var(--select-hero-primary-right-background-color)); color: var(--select-hero-primary-text-color); } nb-select.appearance-hero.status-primary .select-button.placeholder { color: var(--select-hero-primary-placeholder-text-color); } nb-select.appearance-hero.status-primary .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-primary-focus-left-background-color), var(--select-hero-primary-focus-right-background-color)); } nb-select.appearance-hero.status-primary .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-primary-hover-left-background-color), var(--select-hero-primary-hover-right-background-color)); } nb-select.appearance-hero.status-primary .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-primary-focus-and-hover-left-background-color), var(--select-hero-primary-focus-and-hover-right-background-color)); } nb-select.appearance-hero.status-primary .select-button[disabled] { color: var(--select-hero-primary-disabled-text-color); background-color: var(--select-hero-primary-disabled-background-color); background-image: none; } nb-select.appearance-hero.status-primary .select-button[disabled] nb-icon { color: var(--select-hero-primary-disabled-icon-color); } nb-select.appearance-hero.status-primary .select-button nb-icon { color: var(--select-hero-primary-icon-color); } nb-select.appearance-hero.status-success .select-button { background-image: linear-gradient(to right, var(--select-hero-success-left-background-color), var(--select-hero-success-right-background-color)); color: var(--select-hero-success-text-color); } nb-select.appearance-hero.status-success .select-button.placeholder { color: var(--select-hero-success-placeholder-text-color); } nb-select.appearance-hero.status-success .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-success-focus-left-background-color), var(--select-hero-success-focus-right-background-color)); } nb-select.appearance-hero.status-success .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-success-hover-left-background-color), var(--select-hero-success-hover-right-background-color)); } nb-select.appearance-hero.status-success .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-success-focus-and-hover-left-background-color), var(--select-hero-success-focus-and-hover-right-background-color)); } nb-select.appearance-hero.status-success .select-button[disabled] { color: var(--select-hero-success-disabled-text-color); background-color: var(--select-hero-success-disabled-background-color); background-image: none; } nb-select.appearance-hero.status-success .select-button[disabled] nb-icon { color: var(--select-hero-success-disabled-icon-color); } nb-select.appearance-hero.status-success .select-button nb-icon { color: var(--select-hero-success-icon-color); } nb-select.appearance-hero.status-warning .select-button { background-image: linear-gradient(to right, var(--select-hero-warning-left-background-color), var(--select-hero-warning-right-background-color)); color: var(--select-hero-warning-text-color); } nb-select.appearance-hero.status-warning .select-button.placeholder { color: var(--select-hero-warning-placeholder-text-color); } nb-select.appearance-hero.status-warning .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-warning-focus-left-background-color), var(--select-hero-warning-focus-right-background-color)); } nb-select.appearance-hero.status-warning .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-warning-hover-left-background-color), var(--select-hero-warning-hover-right-background-color)); } nb-select.appearance-hero.status-warning .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-warning-focus-and-hover-left-background-color), var(--select-hero-warning-focus-and-hover-right-background-color)); } nb-select.appearance-hero.status-warning .select-button[disabled] { color: var(--select-hero-warning-disabled-text-color); background-color: var(--select-hero-warning-disabled-background-color); background-image: none; } nb-select.appearance-hero.status-warning .select-button[disabled] nb-icon { color: var(--select-hero-warning-disabled-icon-color); } nb-select.appearance-hero.status-warning .select-button nb-icon { color: var(--select-hero-warning-icon-color); } nb-select.appearance-hero.status-danger .select-button { background-image: linear-gradient(to right, var(--select-hero-danger-left-background-color), var(--select-hero-danger-right-background-color)); color: var(--select-hero-danger-text-color); } nb-select.appearance-hero.status-danger .select-button.placeholder { color: var(--select-hero-danger-placeholder-text-color); } nb-select.appearance-hero.status-danger .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-danger-focus-left-background-color), var(--select-hero-danger-focus-right-background-color)); } nb-select.appearance-hero.status-danger .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-danger-hover-left-background-color), var(--select-hero-danger-hover-right-background-color)); } nb-select.appearance-hero.status-danger .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-danger-focus-and-hover-left-background-color), var(--select-hero-danger-focus-and-hover-right-background-color)); } nb-select.appearance-hero.status-danger .select-button[disabled] { color: var(--select-hero-danger-disabled-text-color); background-color: var(--select-hero-danger-disabled-background-color); background-image: none; } nb-select.appearance-hero.status-danger .select-button[disabled] nb-icon { color: var(--select-hero-danger-disabled-icon-color); } nb-select.appearance-hero.status-danger .select-button nb-icon { color: var(--select-hero-danger-icon-color); } nb-select.appearance-hero.status-info .select-button { background-image: linear-gradient(to right, var(--select-hero-info-left-background-color), var(--select-hero-info-right-background-color)); color: var(--select-hero-info-text-color); } nb-select.appearance-hero.status-info .select-button.placeholder { color: var(--select-hero-info-placeholder-text-color); } nb-select.appearance-hero.status-info .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-info-focus-left-background-color), var(--select-hero-info-focus-right-background-color)); } nb-select.appearance-hero.status-info .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-info-hover-left-background-color), var(--select-hero-info-hover-right-background-color)); } nb-select.appearance-hero.status-info .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-info-focus-and-hover-left-background-color), var(--select-hero-info-focus-and-hover-right-background-color)); } nb-select.appearance-hero.status-info .select-button[disabled] { color: var(--select-hero-info-disabled-text-color); background-color: var(--select-hero-info-disabled-background-color); background-image: none; } nb-select.appearance-hero.status-info .select-button[disabled] nb-icon { color: var(--select-hero-info-disabled-icon-color); } nb-select.appearance-hero.status-info .select-button nb-icon { color: var(--select-hero-info-icon-color); } nb-select.appearance-hero.status-control .select-button { background-image: linear-gradient(to right, var(--select-hero-control-left-background-color), var(--select-hero-control-right-background-color)); color: var(--select-hero-control-text-color); } nb-select.appearance-hero.status-control .select-button.placeholder { color: var(--select-hero-control-placeholder-text-color); } nb-select.appearance-hero.status-control .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-control-focus-left-background-color), var(--select-hero-control-focus-right-background-color)); } nb-select.appearance-hero.status-control .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-control-hover-left-background-color), var(--select-hero-control-hover-right-background-color)); } nb-select.appearance-hero.status-control .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-control-focus-and-hover-left-background-color), var(--select-hero-control-focus-and-hover-right-background-color)); } nb-select.appearance-hero.status-control .select-button[disabled] { color: var(--select-hero-control-disabled-text-color); background-color: var(--select-hero-control-disabled-background-color); background-image: none; } nb-select.appearance-hero.status-control .select-button[disabled] nb-icon { color: var(--select-hero-control-disabled-icon-color); } nb-select.appearance-hero.status-control .select-button nb-icon { color: var(--select-hero-control-icon-color); } nb-form-field nb-select { width: 100%; } nb-select-with-autocomplete .select-button { min-width: var(--select-min-width); cursor: var(--select-cursor); font-family: var(--select-text-font-family); } nb-select-with-autocomplete .select-button.placeholder { font-family: var(--select-placeholder-text-font-family); } nb-select-with-autocomplete .select-button:focus { outline: none; } nb-select-with-autocomplete .select-button[disabled] { cursor: var(--select-disabled-cursor); } nb-select-with-autocomplete.size-tiny .select-button { font-size: var(--select-tiny-text-font-size); font-weight: var(--select-tiny-text-font-weight); line-height: var(--select-tiny-text-line-height); } nb-select-with-autocomplete.size-tiny .select-button.placeholder { font-size: var(--select-tiny-placeholder-text-font-size); font-weight: var(--select-tiny-placeholder-text-font-weight); } nb-select-with-autocomplete.size-tiny .select-button.empty::before { content: " "; display: block; height: var(--select-tiny-text-line-height); } nb-select-with-autocomplete.size-tiny:not(.full-width) { max-width: var(--select-tiny-max-width); } nb-select-with-autocomplete.size-small .select-button { font-size: var(--select-small-text-font-size); font-weight: var(--select-small-text-font-weight); line-height: var(--select-small-text-line-height); } nb-select-with-autocomplete.size-small .select-button.placeholder { font-size: var(--select-small-placeholder-text-font-size); font-weight: var(--select-small-placeholder-text-font-weight); } nb-select-with-autocomplete.size-small .select-button.empty::before { content: " "; display: block; height: var(--select-small-text-line-height); } nb-select-with-autocomplete.size-small:not(.full-width) { max-width: var(--select-small-max-width); } nb-select-with-autocomplete.size-medium .select-button { font-size: var(--select-medium-text-font-size); font-weight: var(--select-medium-text-font-weight); line-height: var(--select-medium-text-line-height); } nb-select-with-autocomplete.size-medium .select-button.placeholder { font-size: var(--select-medium-placeholder-text-font-size); font-weight: var(--select-medium-placeholder-text-font-weight); } nb-select-with-autocomplete.size-medium .select-button.empty::before { content: " "; display: block; height: var(--select-medium-text-line-height); } nb-select-with-autocomplete.size-medium:not(.full-width) { max-width: var(--select-medium-max-width); } nb-select-with-autocomplete.size-large .select-button { font-size: var(--select-large-text-font-size); font-weight: var(--select-large-text-font-weight); line-height: var(--select-large-text-line-height); } nb-select-with-autocomplete.size-large .select-button.placeholder { font-size: var(--select-large-placeholder-text-font-size); font-weight: var(--select-large-placeholder-text-font-weight); } nb-select-with-autocomplete.size-large .select-button.empty::before { content: " "; display: block; height: var(--select-large-text-line-height); } nb-select-with-autocomplete.size-large:not(.full-width) { max-width: var(--select-large-max-width); } nb-select-with-autocomplete.size-giant .select-button { font-size: var(--select-giant-text-font-size); font-weight: var(--select-giant-text-font-weight); line-height: var(--select-giant-text-line-height); } nb-select-with-autocomplete.size-giant .select-button.placeholder { font-size: var(--select-giant-placeholder-text-font-size); font-weight: var(--select-giant-placeholder-text-font-weight); } nb-select-with-autocomplete.size-giant .select-button.empty::before { content: " "; display: block; height: var(--select-giant-text-line-height); } nb-select-with-autocomplete.size-giant:not(.full-width) { max-width: var(--select-giant-max-width); } nb-select-with-autocomplete.shape-rectangle .select-button { border-radius: var(--select-rectangle-border-radius); } nb-select-with-autocomplete.shape-semi-round .select-button { border-radius: var(--select-semi-round-border-radius); } nb-select-with-autocomplete.shape-round .select-button { border-radius: var(--select-round-border-radius); } nb-select-with-autocomplete.appearance-outline .select-button { border-style: var(--select-outline-border-style); border-width: var(--select-outline-border-width); } nb-select-with-autocomplete.appearance-outline .select-button.top { border-top-style: var(--select-outline-adjacent-border-style); border-top-width: var(--select-outline-adjacent-border-width); } nb-select-with-autocomplete.appearance-outline .select-button.bottom { border-bottom-style: var(--select-outline-adjacent-border-style); border-bottom-width: var(--select-outline-adjacent-border-width); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button { background-color: var(--select-outline-basic-background-color); border-color: var(--select-outline-basic-border-color); color: var(--select-outline-basic-text-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button.placeholder { color: var(--select-outline-basic-placeholder-text-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button nb-icon { color: var(--select-outline-basic-icon-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button:focus { background-color: var(--select-outline-basic-focus-background-color); border-color: var(--select-outline-basic-focus-border-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button:hover { background-color: var(--select-outline-basic-hover-background-color); border-color: var(--select-outline-basic-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button:focus:hover { background-color: var(--select-outline-basic-focus-and-hover-background-color); border-color: var(--select-outline-basic-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button[disabled] { color: var(--select-outline-basic-disabled-text-color); background-color: var(--select-outline-basic-disabled-background-color); border-color: var(--select-outline-basic-disabled-border-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button[disabled] nb-icon { color: var(--select-outline-basic-disabled-icon-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button.bottom, nb-select-with-autocomplete.appearance-outline.status-basic .select-button.top { border-color: var(--select-outline-basic-open-border-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button.top { border-top-color: var(--select-outline-basic-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button.bottom { border-bottom-color: var(--select-outline-basic-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button { background-color: var(--select-outline-primary-background-color); border-color: var(--select-outline-primary-border-color); color: var(--select-outline-primary-text-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button.placeholder { color: var(--select-outline-primary-placeholder-text-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button nb-icon { color: var(--select-outline-primary-icon-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button:focus { background-color: var(--select-outline-primary-focus-background-color); border-color: var(--select-outline-primary-focus-border-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button:hover { background-color: var(--select-outline-primary-hover-background-color); border-color: var(--select-outline-primary-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button:focus:hover { background-color: var(--select-outline-primary-focus-and-hover-background-color); border-color: var(--select-outline-primary-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button[disabled] { color: var(--select-outline-primary-disabled-text-color); background-color: var(--select-outline-primary-disabled-background-color); border-color: var(--select-outline-primary-disabled-border-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button[disabled] nb-icon { color: var(--select-outline-primary-disabled-icon-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button.bottom, nb-select-with-autocomplete.appearance-outline.status-primary .select-button.top { border-color: var(--select-outline-primary-open-border-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button.top { border-top-color: var(--select-outline-primary-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button.bottom { border-bottom-color: var(--select-outline-primary-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button { background-color: var(--select-outline-success-background-color); border-color: var(--select-outline-success-border-color); color: var(--select-outline-success-text-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button.placeholder { color: var(--select-outline-success-placeholder-text-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button nb-icon { color: var(--select-outline-success-icon-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button:focus { background-color: var(--select-outline-success-focus-background-color); border-color: var(--select-outline-success-focus-border-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button:hover { background-color: var(--select-outline-success-hover-background-color); border-color: var(--select-outline-success-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button:focus:hover { background-color: var(--select-outline-success-focus-and-hover-background-color); border-color: var(--select-outline-success-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button[disabled] { color: var(--select-outline-success-disabled-text-color); background-color: var(--select-outline-success-disabled-background-color); border-color: var(--select-outline-success-disabled-border-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button[disabled] nb-icon { color: var(--select-outline-success-disabled-icon-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button.bottom, nb-select-with-autocomplete.appearance-outline.status-success .select-button.top { border-color: var(--select-outline-success-open-border-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button.top { border-top-color: var(--select-outline-success-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button.bottom { border-bottom-color: var(--select-outline-success-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button { background-color: var(--select-outline-warning-background-color); border-color: var(--select-outline-warning-border-color); color: var(--select-outline-warning-text-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button.placeholder { color: var(--select-outline-warning-placeholder-text-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button nb-icon { color: var(--select-outline-warning-icon-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button:focus { background-color: var(--select-outline-warning-focus-background-color); border-color: var(--select-outline-warning-focus-border-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button:hover { background-color: var(--select-outline-warning-hover-background-color); border-color: var(--select-outline-warning-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button:focus:hover { background-color: var(--select-outline-warning-focus-and-hover-background-color); border-color: var(--select-outline-warning-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button[disabled] { color: var(--select-outline-warning-disabled-text-color); background-color: var(--select-outline-warning-disabled-background-color); border-color: var(--select-outline-warning-disabled-border-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button[disabled] nb-icon { color: var(--select-outline-warning-disabled-icon-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button.bottom, nb-select-with-autocomplete.appearance-outline.status-warning .select-button.top { border-color: var(--select-outline-warning-open-border-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button.top { border-top-color: var(--select-outline-warning-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button.bottom { border-bottom-color: var(--select-outline-warning-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button { background-color: var(--select-outline-danger-background-color); border-color: var(--select-outline-danger-border-color); color: var(--select-outline-danger-text-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button.placeholder { color: var(--select-outline-danger-placeholder-text-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button nb-icon { color: var(--select-outline-danger-icon-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button:focus { background-color: var(--select-outline-danger-focus-background-color); border-color: var(--select-outline-danger-focus-border-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button:hover { background-color: var(--select-outline-danger-hover-background-color); border-color: var(--select-outline-danger-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button:focus:hover { background-color: var(--select-outline-danger-focus-and-hover-background-color); border-color: var(--select-outline-danger-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button[disabled] { color: var(--select-outline-danger-disabled-text-color); background-color: var(--select-outline-danger-disabled-background-color); border-color: var(--select-outline-danger-disabled-border-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button[disabled] nb-icon { color: var(--select-outline-danger-disabled-icon-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button.bottom, nb-select-with-autocomplete.appearance-outline.status-danger .select-button.top { border-color: var(--select-outline-danger-open-border-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button.top { border-top-color: var(--select-outline-danger-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button.bottom { border-bottom-color: var(--select-outline-danger-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button { background-color: var(--select-outline-info-background-color); border-color: var(--select-outline-info-border-color); color: var(--select-outline-info-text-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button.placeholder { color: var(--select-outline-info-placeholder-text-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button nb-icon { color: var(--select-outline-info-icon-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button:focus { background-color: var(--select-outline-info-focus-background-color); border-color: var(--select-outline-info-focus-border-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button:hover { background-color: var(--select-outline-info-hover-background-color); border-color: var(--select-outline-info-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button:focus:hover { background-color: var(--select-outline-info-focus-and-hover-background-color); border-color: var(--select-outline-info-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button[disabled] { color: var(--select-outline-info-disabled-text-color); background-color: var(--select-outline-info-disabled-background-color); border-color: var(--select-outline-info-disabled-border-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button[disabled] nb-icon { color: var(--select-outline-info-disabled-icon-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button.bottom, nb-select-with-autocomplete.appearance-outline.status-info .select-button.top { border-color: var(--select-outline-info-open-border-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button.top { border-top-color: var(--select-outline-info-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button.bottom { border-bottom-color: var(--select-outline-info-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button { background-color: var(--select-outline-control-background-color); border-color: var(--select-outline-control-border-color); color: var(--select-outline-control-text-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button.placeholder { color: var(--select-outline-control-placeholder-text-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button nb-icon { color: var(--select-outline-control-icon-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button:focus { background-color: var(--select-outline-control-focus-background-color); border-color: var(--select-outline-control-focus-border-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button:hover { background-color: var(--select-outline-control-hover-background-color); border-color: var(--select-outline-control-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button:focus:hover { background-color: var(--select-outline-control-focus-and-hover-background-color); border-color: var(--select-outline-control-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button[disabled] { color: var(--select-outline-control-disabled-text-color); background-color: var(--select-outline-control-disabled-background-color); border-color: var(--select-outline-control-disabled-border-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button[disabled] nb-icon { color: var(--select-outline-control-disabled-icon-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button.bottom, nb-select-with-autocomplete.appearance-outline.status-control .select-button.top { border-color: var(--select-outline-control-open-border-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button.top { border-top-color: var(--select-outline-control-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button.bottom { border-bottom-color: var(--select-outline-control-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.size-tiny .select-button { padding: var(--select-outline-tiny-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-tiny .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-tiny .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-outline.size-tiny .nb-form-field-prefix-tiny, nb-select-with-autocomplete.appearance-outline.size-tiny .nb-form-field-suffix-tiny { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-tiny .nb-form-field-prefix-tiny { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-tiny .nb-form-field-prefix-tiny { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-tiny .nb-form-field-suffix-tiny { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-tiny .nb-form-field-suffix-tiny { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-tiny [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-tiny [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-tiny .select-button { padding-left: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-tiny .select-button { padding-right: var(--form-field-addon-tiny-width); } nb-select-with-autocomplete.appearance-outline.size-small .select-button { padding: var(--select-outline-small-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-small .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-small .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-outline.size-small .nb-form-field-prefix-small, nb-select-with-autocomplete.appearance-outline.size-small .nb-form-field-suffix-small { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-small .nb-form-field-prefix-small { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-small .nb-form-field-prefix-small { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-small .nb-form-field-suffix-small { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-small .nb-form-field-suffix-small { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-small [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-small [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-small .select-button { padding-left: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-small .select-button { padding-right: var(--form-field-addon-small-width); } nb-select-with-autocomplete.appearance-outline.size-medium .select-button { padding: var(--select-outline-medium-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-medium .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-medium .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-outline.size-medium .nb-form-field-prefix-medium, nb-select-with-autocomplete.appearance-outline.size-medium .nb-form-field-suffix-medium { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-medium .nb-form-field-prefix-medium { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-medium .nb-form-field-prefix-medium { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-medium .nb-form-field-suffix-medium { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-medium .nb-form-field-suffix-medium { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-medium [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-medium [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-medium .select-button { padding-left: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-medium .select-button { padding-right: var(--form-field-addon-medium-width); } nb-select-with-autocomplete.appearance-outline.size-large .select-button { padding: var(--select-outline-large-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-large .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-large .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-outline.size-large .nb-form-field-prefix-large, nb-select-with-autocomplete.appearance-outline.size-large .nb-form-field-suffix-large { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-large .nb-form-field-prefix-large { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-large .nb-form-field-prefix-large { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-large .nb-form-field-suffix-large { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-large .nb-form-field-suffix-large { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-large [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-large [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-large .select-button { padding-left: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-large .select-button { padding-right: var(--form-field-addon-large-width); } nb-select-with-autocomplete.appearance-outline.size-giant .select-button { padding: var(--select-outline-giant-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-giant .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-giant .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-outline.size-giant .nb-form-field-prefix-giant, nb-select-with-autocomplete.appearance-outline.size-giant .nb-form-field-suffix-giant { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-giant .nb-form-field-prefix-giant { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-giant .nb-form-field-prefix-giant { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-giant .nb-form-field-suffix-giant { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-giant .nb-form-field-suffix-giant { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-giant [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-giant [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-giant .select-button { padding-left: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-giant .select-button { padding-right: var(--form-field-addon-giant-width); } nb-select-with-autocomplete.appearance-filled .select-button { border-style: var(--select-filled-border-style); border-width: var(--select-filled-border-width); } nb-select-with-autocomplete.appearance-filled.size-tiny .select-button { padding: var(--select-filled-tiny-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-tiny .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-tiny .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-filled.size-tiny .nb-form-field-prefix-tiny, nb-select-with-autocomplete.appearance-filled.size-tiny .nb-form-field-suffix-tiny { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-tiny .nb-form-field-prefix-tiny { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-tiny .nb-form-field-prefix-tiny { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-tiny .nb-form-field-suffix-tiny { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-tiny .nb-form-field-suffix-tiny { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-tiny [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-tiny [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-tiny .select-button { padding-left: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-tiny .select-button { padding-right: var(--form-field-addon-tiny-width); } nb-select-with-autocomplete.appearance-filled.size-small .select-button { padding: var(--select-filled-small-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-small .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-small .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-filled.size-small .nb-form-field-prefix-small, nb-select-with-autocomplete.appearance-filled.size-small .nb-form-field-suffix-small { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-small .nb-form-field-prefix-small { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-small .nb-form-field-prefix-small { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-small .nb-form-field-suffix-small { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-small .nb-form-field-suffix-small { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-small [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-small [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-small .select-button { padding-left: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-small .select-button { padding-right: var(--form-field-addon-small-width); } nb-select-with-autocomplete.appearance-filled.size-medium .select-button { padding: var(--select-filled-medium-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-medium .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-medium .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-filled.size-medium .nb-form-field-prefix-medium, nb-select-with-autocomplete.appearance-filled.size-medium .nb-form-field-suffix-medium { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-medium .nb-form-field-prefix-medium { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-medium .nb-form-field-prefix-medium { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-medium .nb-form-field-suffix-medium { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-medium .nb-form-field-suffix-medium { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-medium [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-medium [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-medium .select-button { padding-left: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-medium .select-button { padding-right: var(--form-field-addon-medium-width); } nb-select-with-autocomplete.appearance-filled.size-large .select-button { padding: var(--select-filled-large-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-large .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-large .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-filled.size-large .nb-form-field-prefix-large, nb-select-with-autocomplete.appearance-filled.size-large .nb-form-field-suffix-large { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-large .nb-form-field-prefix-large { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-large .nb-form-field-prefix-large { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-large .nb-form-field-suffix-large { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-large .nb-form-field-suffix-large { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-large [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-large [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-large .select-button { padding-left: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-large .select-button { padding-right: var(--form-field-addon-large-width); } nb-select-with-autocomplete.appearance-filled.size-giant .select-button { padding: var(--select-filled-giant-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-giant .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-giant .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-filled.size-giant .nb-form-field-prefix-giant, nb-select-with-autocomplete.appearance-filled.size-giant .nb-form-field-suffix-giant { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-giant .nb-form-field-prefix-giant { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-giant .nb-form-field-prefix-giant { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-giant .nb-form-field-suffix-giant { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-giant .nb-form-field-suffix-giant { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-giant [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-giant [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-giant .select-button { padding-left: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-giant .select-button { padding-right: var(--form-field-addon-giant-width); } nb-select-with-autocomplete.appearance-filled.status-basic .select-button { background-color: var(--select-filled-basic-background-color); border-color: var(--select-filled-basic-border-color); color: var(--select-filled-basic-text-color); } nb-select-with-autocomplete.appearance-filled.status-basic .select-button.placeholder { color: var(--select-filled-basic-placeholder-text-color); } nb-select-with-autocomplete.appearance-filled.status-basic .select-button:focus { background-color: var(--select-filled-basic-focus-background-color); border-color: var(--select-filled-basic-focus-border-color); } nb-select-with-autocomplete.appearance-filled.status-basic .select-button:hover { background-color: var(--select-filled-basic-hover-background-color); border-color: var(--select-filled-basic-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-basic .select-button:focus:hover { background-color: var(--select-filled-basic-focus-and-hover-background-color); border-color: var(--select-filled-basic-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-basic .select-button[disabled] { background-color: var(--select-filled-basic-disabled-background-color); border-color: var(--select-filled-basic-disabled-border-color); color: var(--select-filled-basic-disabled-text-color); } nb-select-with-autocomplete.appearance-filled.status-basic .select-button[disabled] nb-icon { color: var(--select-filled-basic-disabled-icon-color); } nb-select-with-autocomplete.appearance-filled.status-basic .select-button nb-icon { color: var(--select-filled-basic-icon-color); } nb-select-with-autocomplete.appearance-filled.status-primary .select-button { background-color: var(--select-filled-primary-background-color); border-color: var(--select-filled-primary-border-color); color: var(--select-filled-primary-text-color); } nb-select-with-autocomplete.appearance-filled.status-primary .select-button.placeholder { color: var(--select-filled-primary-placeholder-text-color); } nb-select-with-autocomplete.appearance-filled.status-primary .select-button:focus { background-color: var(--select-filled-primary-focus-background-color); border-color: var(--select-filled-primary-focus-border-color); } nb-select-with-autocomplete.appearance-filled.status-primary .select-button:hover { background-color: var(--select-filled-primary-hover-background-color); border-color: var(--select-filled-primary-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-primary .select-button:focus:hover { background-color: var(--select-filled-primary-focus-and-hover-background-color); border-color: var(--select-filled-primary-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-primary .select-button[disabled] { background-color: var(--select-filled-primary-disabled-background-color); border-color: var(--select-filled-primary-disabled-border-color); color: var(--select-filled-primary-disabled-text-color); } nb-select-with-autocomplete.appearance-filled.status-primary .select-button[disabled] nb-icon { color: var(--select-filled-primary-disabled-icon-color); } nb-select-with-autocomplete.appearance-filled.status-primary .select-button nb-icon { color: var(--select-filled-primary-icon-color); } nb-select-with-autocomplete.appearance-filled.status-success .select-button { background-color: var(--select-filled-success-background-color); border-color: var(--select-filled-success-border-color); color: var(--select-filled-success-text-color); } nb-select-with-autocomplete.appearance-filled.status-success .select-button.placeholder { color: var(--select-filled-success-placeholder-text-color); } nb-select-with-autocomplete.appearance-filled.status-success .select-button:focus { background-color: var(--select-filled-success-focus-background-color); border-color: var(--select-filled-success-focus-border-color); } nb-select-with-autocomplete.appearance-filled.status-success .select-button:hover { background-color: var(--select-filled-success-hover-background-color); border-color: var(--select-filled-success-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-success .select-button:focus:hover { background-color: var(--select-filled-success-focus-and-hover-background-color); border-color: var(--select-filled-success-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-success .select-button[disabled] { background-color: var(--select-filled-success-disabled-background-color); border-color: var(--select-filled-success-disabled-border-color); color: var(--select-filled-success-disabled-text-color); } nb-select-with-autocomplete.appearance-filled.status-success .select-button[disabled] nb-icon { color: var(--select-filled-success-disabled-icon-color); } nb-select-with-autocomplete.appearance-filled.status-success .select-button nb-icon { color: var(--select-filled-success-icon-color); } nb-select-with-autocomplete.appearance-filled.status-warning .select-button { background-color: var(--select-filled-warning-background-color); border-color: var(--select-filled-warning-border-color); color: var(--select-filled-warning-text-color); } nb-select-with-autocomplete.appearance-filled.status-warning .select-button.placeholder { color: var(--select-filled-warning-placeholder-text-color); } nb-select-with-autocomplete.appearance-filled.status-warning .select-button:focus { background-color: var(--select-filled-warning-focus-background-color); border-color: var(--select-filled-warning-focus-border-color); } nb-select-with-autocomplete.appearance-filled.status-warning .select-button:hover { background-color: var(--select-filled-warning-hover-background-color); border-color: var(--select-filled-warning-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-warning .select-button:focus:hover { background-color: var(--select-filled-warning-focus-and-hover-background-color); border-color: var(--select-filled-warning-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-warning .select-button[disabled] { background-color: var(--select-filled-warning-disabled-background-color); border-color: var(--select-filled-warning-disabled-border-color); color: var(--select-filled-warning-disabled-text-color); } nb-select-with-autocomplete.appearance-filled.status-warning .select-button[disabled] nb-icon { color: var(--select-filled-warning-disabled-icon-color); } nb-select-with-autocomplete.appearance-filled.status-warning .select-button nb-icon { color: var(--select-filled-warning-icon-color); } nb-select-with-autocomplete.appearance-filled.status-danger .select-button { background-color: var(--select-filled-danger-background-color); border-color: var(--select-filled-danger-border-color); color: var(--select-filled-danger-text-color); } nb-select-with-autocomplete.appearance-filled.status-danger .select-button.placeholder { color: var(--select-filled-danger-placeholder-text-color); } nb-select-with-autocomplete.appearance-filled.status-danger .select-button:focus { background-color: var(--select-filled-danger-focus-background-color); border-color: var(--select-filled-danger-focus-border-color); } nb-select-with-autocomplete.appearance-filled.status-danger .select-button:hover { background-color: var(--select-filled-danger-hover-background-color); border-color: var(--select-filled-danger-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-danger .select-button:focus:hover { background-color: var(--select-filled-danger-focus-and-hover-background-color); border-color: var(--select-filled-danger-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-danger .select-button[disabled] { background-color: var(--select-filled-danger-disabled-background-color); border-color: var(--select-filled-danger-disabled-border-color); color: var(--select-filled-danger-disabled-text-color); } nb-select-with-autocomplete.appearance-filled.status-danger .select-button[disabled] nb-icon { color: var(--select-filled-danger-disabled-icon-color); } nb-select-with-autocomplete.appearance-filled.status-danger .select-button nb-icon { color: var(--select-filled-danger-icon-color); } nb-select-with-autocomplete.appearance-filled.status-info .select-button { background-color: var(--select-filled-info-background-color); border-color: var(--select-filled-info-border-color); color: var(--select-filled-info-text-color); } nb-select-with-autocomplete.appearance-filled.status-info .select-button.placeholder { color: var(--select-filled-info-placeholder-text-color); } nb-select-with-autocomplete.appearance-filled.status-info .select-button:focus { background-color: var(--select-filled-info-focus-background-color); border-color: var(--select-filled-info-focus-border-color); } nb-select-with-autocomplete.appearance-filled.status-info .select-button:hover { background-color: var(--select-filled-info-hover-background-color); border-color: var(--select-filled-info-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-info .select-button:focus:hover { background-color: var(--select-filled-info-focus-and-hover-background-color); border-color: var(--select-filled-info-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-info .select-button[disabled] { background-color: var(--select-filled-info-disabled-background-color); border-color: var(--select-filled-info-disabled-border-color); color: var(--select-filled-info-disabled-text-color); } nb-select-with-autocomplete.appearance-filled.status-info .select-button[disabled] nb-icon { color: var(--select-filled-info-disabled-icon-color); } nb-select-with-autocomplete.appearance-filled.status-info .select-button nb-icon { color: var(--select-filled-info-icon-color); } nb-select-with-autocomplete.appearance-filled.status-control .select-button { background-color: var(--select-filled-control-background-color); border-color: var(--select-filled-control-border-color); color: var(--select-filled-control-text-color); } nb-select-with-autocomplete.appearance-filled.status-control .select-button.placeholder { color: var(--select-filled-control-placeholder-text-color); } nb-select-with-autocomplete.appearance-filled.status-control .select-button:focus { background-color: var(--select-filled-control-focus-background-color); border-color: var(--select-filled-control-focus-border-color); } nb-select-with-autocomplete.appearance-filled.status-control .select-button:hover { background-color: var(--select-filled-control-hover-background-color); border-color: var(--select-filled-control-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-control .select-button:focus:hover { background-color: var(--select-filled-control-focus-and-hover-background-color); border-color: var(--select-filled-control-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-control .select-button[disabled] { background-color: var(--select-filled-control-disabled-background-color); border-color: var(--select-filled-control-disabled-border-color); color: var(--select-filled-control-disabled-text-color); } nb-select-with-autocomplete.appearance-filled.status-control .select-button[disabled] nb-icon { color: var(--select-filled-control-disabled-icon-color); } nb-select-with-autocomplete.appearance-filled.status-control .select-button nb-icon { color: var(--select-filled-control-icon-color); } nb-select-with-autocomplete.appearance-hero .select-button { border: none; } nb-select-with-autocomplete.appearance-hero.size-tiny .select-button { padding: var(--select-hero-tiny-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-tiny .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-tiny .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-hero.size-tiny .nb-form-field-prefix-tiny, nb-select-with-autocomplete.appearance-hero.size-tiny .nb-form-field-suffix-tiny { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-tiny .nb-form-field-prefix-tiny { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-tiny .nb-form-field-prefix-tiny { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-tiny .nb-form-field-suffix-tiny { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-tiny .nb-form-field-suffix-tiny { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-tiny [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-tiny [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-tiny .select-button { padding-left: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-tiny .select-button { padding-right: var(--form-field-addon-tiny-width); } nb-select-with-autocomplete.appearance-hero.size-small .select-button { padding: var(--select-hero-small-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-small .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-small .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-hero.size-small .nb-form-field-prefix-small, nb-select-with-autocomplete.appearance-hero.size-small .nb-form-field-suffix-small { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-small .nb-form-field-prefix-small { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-small .nb-form-field-prefix-small { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-small .nb-form-field-suffix-small { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-small .nb-form-field-suffix-small { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-small [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-small [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-small .select-button { padding-left: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-small .select-button { padding-right: var(--form-field-addon-small-width); } nb-select-with-autocomplete.appearance-hero.size-medium .select-button { padding: var(--select-hero-medium-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-medium .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-medium .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-hero.size-medium .nb-form-field-prefix-medium, nb-select-with-autocomplete.appearance-hero.size-medium .nb-form-field-suffix-medium { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-medium .nb-form-field-prefix-medium { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-medium .nb-form-field-prefix-medium { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-medium .nb-form-field-suffix-medium { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-medium .nb-form-field-suffix-medium { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-medium [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-medium [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-medium .select-button { padding-left: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-medium .select-button { padding-right: var(--form-field-addon-medium-width); } nb-select-with-autocomplete.appearance-hero.size-large .select-button { padding: var(--select-hero-large-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-large .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-large .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-hero.size-large .nb-form-field-prefix-large, nb-select-with-autocomplete.appearance-hero.size-large .nb-form-field-suffix-large { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-large .nb-form-field-prefix-large { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-large .nb-form-field-prefix-large { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-large .nb-form-field-suffix-large { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-large .nb-form-field-suffix-large { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-large [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-large [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-large .select-button { padding-left: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-large .select-button { padding-right: var(--form-field-addon-large-width); } nb-select-with-autocomplete.appearance-hero.size-giant .select-button { padding: var(--select-hero-giant-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-giant .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-giant .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-hero.size-giant .nb-form-field-prefix-giant, nb-select-with-autocomplete.appearance-hero.size-giant .nb-form-field-suffix-giant { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-giant .nb-form-field-prefix-giant { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-giant .nb-form-field-prefix-giant { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-giant .nb-form-field-suffix-giant { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-giant .nb-form-field-suffix-giant { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-giant [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-giant [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-giant .select-button { padding-left: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-giant .select-button { padding-right: var(--form-field-addon-giant-width); } nb-select-with-autocomplete.appearance-hero.status-basic .select-button { background-image: linear-gradient(to right, var(--select-hero-basic-left-background-color), var(--select-hero-basic-right-background-color)); color: var(--select-hero-basic-text-color); } nb-select-with-autocomplete.appearance-hero.status-basic .select-button.placeholder { color: var(--select-hero-basic-placeholder-text-color); } nb-select-with-autocomplete.appearance-hero.status-basic .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-basic-focus-left-background-color), var(--select-hero-basic-focus-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-basic .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-basic-hover-left-background-color), var(--select-hero-basic-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-basic .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-basic-focus-and-hover-left-background-color), var(--select-hero-basic-focus-and-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-basic .select-button[disabled] { color: var(--select-hero-basic-disabled-text-color); background-color: var(--select-hero-basic-disabled-background-color); background-image: none; } nb-select-with-autocomplete.appearance-hero.status-basic .select-button[disabled] nb-icon { color: var(--select-hero-basic-disabled-icon-color); } nb-select-with-autocomplete.appearance-hero.status-basic .select-button nb-icon { color: var(--select-hero-basic-icon-color); } nb-select-with-autocomplete.appearance-hero.status-primary .select-button { background-image: linear-gradient(to right, var(--select-hero-primary-left-background-color), var(--select-hero-primary-right-background-color)); color: var(--select-hero-primary-text-color); } nb-select-with-autocomplete.appearance-hero.status-primary .select-button.placeholder { color: var(--select-hero-primary-placeholder-text-color); } nb-select-with-autocomplete.appearance-hero.status-primary .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-primary-focus-left-background-color), var(--select-hero-primary-focus-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-primary .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-primary-hover-left-background-color), var(--select-hero-primary-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-primary .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-primary-focus-and-hover-left-background-color), var(--select-hero-primary-focus-and-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-primary .select-button[disabled] { color: var(--select-hero-primary-disabled-text-color); background-color: var(--select-hero-primary-disabled-background-color); background-image: none; } nb-select-with-autocomplete.appearance-hero.status-primary .select-button[disabled] nb-icon { color: var(--select-hero-primary-disabled-icon-color); } nb-select-with-autocomplete.appearance-hero.status-primary .select-button nb-icon { color: var(--select-hero-primary-icon-color); } nb-select-with-autocomplete.appearance-hero.status-success .select-button { background-image: linear-gradient(to right, var(--select-hero-success-left-background-color), var(--select-hero-success-right-background-color)); color: var(--select-hero-success-text-color); } nb-select-with-autocomplete.appearance-hero.status-success .select-button.placeholder { color: var(--select-hero-success-placeholder-text-color); } nb-select-with-autocomplete.appearance-hero.status-success .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-success-focus-left-background-color), var(--select-hero-success-focus-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-success .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-success-hover-left-background-color), var(--select-hero-success-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-success .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-success-focus-and-hover-left-background-color), var(--select-hero-success-focus-and-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-success .select-button[disabled] { color: var(--select-hero-success-disabled-text-color); background-color: var(--select-hero-success-disabled-background-color); background-image: none; } nb-select-with-autocomplete.appearance-hero.status-success .select-button[disabled] nb-icon { color: var(--select-hero-success-disabled-icon-color); } nb-select-with-autocomplete.appearance-hero.status-success .select-button nb-icon { color: var(--select-hero-success-icon-color); } nb-select-with-autocomplete.appearance-hero.status-warning .select-button { background-image: linear-gradient(to right, var(--select-hero-warning-left-background-color), var(--select-hero-warning-right-background-color)); color: var(--select-hero-warning-text-color); } nb-select-with-autocomplete.appearance-hero.status-warning .select-button.placeholder { color: var(--select-hero-warning-placeholder-text-color); } nb-select-with-autocomplete.appearance-hero.status-warning .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-warning-focus-left-background-color), var(--select-hero-warning-focus-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-warning .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-warning-hover-left-background-color), var(--select-hero-warning-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-warning .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-warning-focus-and-hover-left-background-color), var(--select-hero-warning-focus-and-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-warning .select-button[disabled] { color: var(--select-hero-warning-disabled-text-color); background-color: var(--select-hero-warning-disabled-background-color); background-image: none; } nb-select-with-autocomplete.appearance-hero.status-warning .select-button[disabled] nb-icon { color: var(--select-hero-warning-disabled-icon-color); } nb-select-with-autocomplete.appearance-hero.status-warning .select-button nb-icon { color: var(--select-hero-warning-icon-color); } nb-select-with-autocomplete.appearance-hero.status-danger .select-button { background-image: linear-gradient(to right, var(--select-hero-danger-left-background-color), var(--select-hero-danger-right-background-color)); color: var(--select-hero-danger-text-color); } nb-select-with-autocomplete.appearance-hero.status-danger .select-button.placeholder { color: var(--select-hero-danger-placeholder-text-color); } nb-select-with-autocomplete.appearance-hero.status-danger .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-danger-focus-left-background-color), var(--select-hero-danger-focus-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-danger .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-danger-hover-left-background-color), var(--select-hero-danger-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-danger .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-danger-focus-and-hover-left-background-color), var(--select-hero-danger-focus-and-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-danger .select-button[disabled] { color: var(--select-hero-danger-disabled-text-color); background-color: var(--select-hero-danger-disabled-background-color); background-image: none; } nb-select-with-autocomplete.appearance-hero.status-danger .select-button[disabled] nb-icon { color: var(--select-hero-danger-disabled-icon-color); } nb-select-with-autocomplete.appearance-hero.status-danger .select-button nb-icon { color: var(--select-hero-danger-icon-color); } nb-select-with-autocomplete.appearance-hero.status-info .select-button { background-image: linear-gradient(to right, var(--select-hero-info-left-background-color), var(--select-hero-info-right-background-color)); color: var(--select-hero-info-text-color); } nb-select-with-autocomplete.appearance-hero.status-info .select-button.placeholder { color: var(--select-hero-info-placeholder-text-color); } nb-select-with-autocomplete.appearance-hero.status-info .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-info-focus-left-background-color), var(--select-hero-info-focus-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-info .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-info-hover-left-background-color), var(--select-hero-info-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-info .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-info-focus-and-hover-left-background-color), var(--select-hero-info-focus-and-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-info .select-button[disabled] { color: var(--select-hero-info-disabled-text-color); background-color: var(--select-hero-info-disabled-background-color); background-image: none; } nb-select-with-autocomplete.appearance-hero.status-info .select-button[disabled] nb-icon { color: var(--select-hero-info-disabled-icon-color); } nb-select-with-autocomplete.appearance-hero.status-info .select-button nb-icon { color: var(--select-hero-info-icon-color); } nb-select-with-autocomplete.appearance-hero.status-control .select-button { background-image: linear-gradient(to right, var(--select-hero-control-left-background-color), var(--select-hero-control-right-background-color)); color: var(--select-hero-control-text-color); } nb-select-with-autocomplete.appearance-hero.status-control .select-button.placeholder { color: var(--select-hero-control-placeholder-text-color); } nb-select-with-autocomplete.appearance-hero.status-control .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-control-focus-left-background-color), var(--select-hero-control-focus-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-control .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-control-hover-left-background-color), var(--select-hero-control-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-control .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-control-focus-and-hover-left-background-color), var(--select-hero-control-focus-and-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-control .select-button[disabled] { color: var(--select-hero-control-disabled-text-color); background-color: var(--select-hero-control-disabled-background-color); background-image: none; } nb-select-with-autocomplete.appearance-hero.status-control .select-button[disabled] nb-icon { color: var(--select-hero-control-disabled-icon-color); } nb-select-with-autocomplete.appearance-hero.status-control .select-button nb-icon { color: var(--select-hero-control-icon-color); } nb-form-field nb-select-with-autocomplete { width: 100%; } nb-option-list { background-color: var(--option-list-background-color); border-color: var(--option-list-border-color); border-style: var(--option-list-border-style); border-width: var(--option-list-border-width); border-radius: var(--option-list-border-radius); box-shadow: var(--option-list-shadow); overflow: hidden; } nb-option-list .option-list { height: 100%; max-height: var(--option-list-max-height); margin: 0; padding: 0; overflow: auto; } nb-option-list.position-top { border-bottom: var(--option-list-adjacent-border-width) var(--option-list-adjacent-border-style) var(--option-list-adjacent-border-color); } nb-option-list.position-bottom { border-top: var(--option-list-adjacent-border-width) var(--option-list-adjacent-border-style) var(--option-list-adjacent-border-color); } nb-option-group { color: var(--option-group-text-color); font-family: var(--option-text-font-family); } nb-option-list.size-tiny nb-option-group { font-size: var(--option-tiny-text-font-size); font-weight: var(--option-tiny-text-font-weight); line-height: var(--option-tiny-text-line-height); } nb-option-list.size-tiny nb-option-group .option-group-title { padding: var(--option-tiny-padding); } nb-option-list.size-tiny nb-option-group nb-option { padding-left: var(--option-group-tiny-start-padding); } nb-option-list.size-small nb-option-group { font-size: var(--option-small-text-font-size); font-weight: var(--option-small-text-font-weight); line-height: var(--option-small-text-line-height); } nb-option-list.size-small nb-option-group .option-group-title { padding: var(--option-small-padding); } nb-option-list.size-small nb-option-group nb-option { padding-left: var(--option-group-small-start-padding); } nb-option-list.size-medium nb-option-group { font-size: var(--option-medium-text-font-size); font-weight: var(--option-medium-text-font-weight); line-height: var(--option-medium-text-line-height); } nb-option-list.size-medium nb-option-group .option-group-title { padding: var(--option-medium-padding); } nb-option-list.size-medium nb-option-group nb-option { padding-left: var(--option-group-medium-start-padding); } nb-option-list.size-large nb-option-group { font-size: var(--option-large-text-font-size); font-weight: var(--option-large-text-font-weight); line-height: var(--option-large-text-line-height); } nb-option-list.size-large nb-option-group .option-group-title { padding: var(--option-large-padding); } nb-option-list.size-large nb-option-group nb-option { padding-left: var(--option-group-large-start-padding); } nb-option-list.size-giant nb-option-group { font-size: var(--option-giant-text-font-size); font-weight: var(--option-giant-text-font-weight); line-height: var(--option-giant-text-line-height); } nb-option-list.size-giant nb-option-group .option-group-title { padding: var(--option-giant-padding); } nb-option-list.size-giant nb-option-group nb-option { padding-left: var(--option-group-giant-start-padding); } nb-option { background-color: var(--option-background-color); color: var(--option-text-color); font-family: var(--option-text-font-family); } nb-option.active { background-color: var(--option-active-background-color); color: var(--option-active-text-color); } nb-option.selected { background-color: var(--option-selected-background-color); color: var(--option-selected-text-color); } nb-option:focus { background-color: var(--option-focus-background-color); color: var(--option-focus-text-color); outline: none; } nb-option:focus.selected { background-color: var(--option-selected-focus-background-color); color: var(--option-selected-focus-text-color); } nb-option:hover { background-color: var(--option-hover-background-color); color: var(--option-hover-text-color); } nb-option:hover.selected { background-color: var(--option-selected-hover-background-color); color: var(--option-selected-hover-text-color); } nb-option.multiple.selected { background-color: var(--option-background-color); color: var(--option-text-color); } nb-option.multiple:focus { background-color: var(--option-focus-background-color); color: var(--option-focus-text-color); } nb-option-list.size-tiny nb-option { font-size: var(--option-tiny-text-font-size); font-weight: var(--option-tiny-text-font-weight); line-height: var(--option-tiny-text-line-height); padding: var(--option-tiny-padding); } nb-option-list.size-small nb-option { font-size: var(--option-small-text-font-size); font-weight: var(--option-small-text-font-weight); line-height: var(--option-small-text-line-height); padding: var(--option-small-padding); } nb-option-list.size-medium nb-option { font-size: var(--option-medium-text-font-size); font-weight: var(--option-medium-text-font-weight); line-height: var(--option-medium-text-line-height); padding: var(--option-medium-padding); } nb-option-list.size-large nb-option { font-size: var(--option-large-text-font-size); font-weight: var(--option-large-text-font-weight); line-height: var(--option-large-text-line-height); padding: var(--option-large-padding); } nb-option-list.size-giant nb-option { font-size: var(--option-giant-text-font-size); font-weight: var(--option-giant-text-font-weight); line-height: var(--option-giant-text-line-height); padding: var(--option-giant-padding); } nb-option, nb-option-group { -webkit-user-select: none; -moz-user-select: none; user-select: none; } nb-option[disabled], nb-option-group[disabled] { background-color: var(--option-disabled-background-color); color: var(--option-disabled-text-color); } nb-toast { border-style: var(--toastr-border-style); border-width: var(--toastr-border-width); border-radius: var(--toastr-border-radius); padding: var(--toastr-padding); box-shadow: var(--toastr-shadow); } nb-toast .title { font-family: var(--toastr-title-text-font-family); font-size: var(--toastr-title-text-font-size); font-weight: var(--toastr-title-text-font-weight); line-height: var(--toastr-title-text-line-height); } nb-toast .message { font-family: var(--toastr-text-font-family); font-size: var(--toastr-text-font-size); font-weight: var(--toastr-text-font-weight); line-height: var(--toastr-text-line-height); } nb-toast .icon-container { border-radius: var(--toastr-border-radius); min-width: 2.5rem; min-height: 2.5rem; display: flex; justify-content: center; align-items: center; } [dir=ltr] nb-toast .icon-container { margin-right: 1.25rem; } [dir=rtl] nb-toast .icon-container { margin-left: 1.25rem; } nb-toast .icon-container nb-icon { font-size: 1.5rem; } nb-toast.status-basic { background: var(--toastr-basic-background-color); border-color: var(--toastr-basic-border-color); color: var(--toastr-basic-text-color); } nb-toast.status-basic .title { color: var(--toastr-basic-text-color); } nb-toast.status-basic.destroy-by-click:hover { background: var(--toastr-destroyable-basic-hover-background-color); border-color: var(--toastr-destroyable-basic-hover-border-color); } nb-toast.status-basic .icon-container { background: var(--toastr-icon-basic-background-color); color: var(--toastr-icon-basic-color); } nb-toast.status-primary { background: var(--toastr-primary-background-color); border-color: var(--toastr-primary-border-color); color: var(--toastr-primary-text-color); } nb-toast.status-primary .title { color: var(--toastr-primary-text-color); } nb-toast.status-primary.destroy-by-click:hover { background: var(--toastr-destroyable-primary-hover-background-color); border-color: var(--toastr-destroyable-primary-hover-border-color); } nb-toast.status-primary .icon-container { background: var(--toastr-icon-primary-background-color); color: var(--toastr-icon-primary-color); } nb-toast.status-success { background: var(--toastr-success-background-color); border-color: var(--toastr-success-border-color); color: var(--toastr-success-text-color); } nb-toast.status-success .title { color: var(--toastr-success-text-color); } nb-toast.status-success.destroy-by-click:hover { background: var(--toastr-destroyable-success-hover-background-color); border-color: var(--toastr-destroyable-success-hover-border-color); } nb-toast.status-success .icon-container { background: var(--toastr-icon-success-background-color); color: var(--toastr-icon-success-color); } nb-toast.status-warning { background: var(--toastr-warning-background-color); border-color: var(--toastr-warning-border-color); color: var(--toastr-warning-text-color); } nb-toast.status-warning .title { color: var(--toastr-warning-text-color); } nb-toast.status-warning.destroy-by-click:hover { background: var(--toastr-destroyable-warning-hover-background-color); border-color: var(--toastr-destroyable-warning-hover-border-color); } nb-toast.status-warning .icon-container { background: var(--toastr-icon-warning-background-color); color: var(--toastr-icon-warning-color); } nb-toast.status-danger { background: var(--toastr-danger-background-color); border-color: var(--toastr-danger-border-color); color: var(--toastr-danger-text-color); } nb-toast.status-danger .title { color: var(--toastr-danger-text-color); } nb-toast.status-danger.destroy-by-click:hover { background: var(--toastr-destroyable-danger-hover-background-color); border-color: var(--toastr-destroyable-danger-hover-border-color); } nb-toast.status-danger .icon-container { background: var(--toastr-icon-danger-background-color); color: var(--toastr-icon-danger-color); } nb-toast.status-info { background: var(--toastr-info-background-color); border-color: var(--toastr-info-border-color); color: var(--toastr-info-text-color); } nb-toast.status-info .title { color: var(--toastr-info-text-color); } nb-toast.status-info.destroy-by-click:hover { background: var(--toastr-destroyable-info-hover-background-color); border-color: var(--toastr-destroyable-info-hover-border-color); } nb-toast.status-info .icon-container { background: var(--toastr-icon-info-background-color); color: var(--toastr-icon-info-color); } nb-toast.status-control { background: var(--toastr-control-background-color); border-color: var(--toastr-control-border-color); color: var(--toastr-control-text-color); } nb-toast.status-control .title { color: var(--toastr-control-text-color); } nb-toast.status-control.destroy-by-click:hover { background: var(--toastr-destroyable-control-hover-background-color); border-color: var(--toastr-destroyable-control-hover-border-color); } nb-toast.status-control .icon-container { background: var(--toastr-icon-control-background-color); color: var(--toastr-icon-control-color); } .toastr-overlay-container { z-index: 1041; } nb-tooltip { box-shadow: var(--tooltip-shadow); background: var(--tooltip-background-color); border: var(--tooltip-border-width) var(--tooltip-border-style) var(--tooltip-border-color); border-radius: var(--tooltip-border-radius); padding: var(--tooltip-padding); max-width: var(--tooltip-max-width); } nb-tooltip nb-icon:only-child { height: var(--tooltip-icon-height); width: var(--tooltip-icon-width); } nb-tooltip nb-icon:not(:only-child) { height: var(--tooltip-text-font-size); width: var(--tooltip-text-font-size); } nb-tooltip .content { color: var(--tooltip-text-color); font-family: var(--tooltip-text-font-family); font-size: var(--tooltip-text-font-size); font-weight: var(--tooltip-text-font-weight); line-height: var(--tooltip-text-line-height); } nb-tooltip .arrow { border-bottom: 6px var(--tooltip-border-style) var(--tooltip-background-color); } nb-tooltip.status-basic { background: var(--tooltip-basic-background-color); border-color: var(--tooltip-basic-border-color); } nb-tooltip.status-basic .arrow { border-bottom-color: var(--tooltip-basic-background-color); } nb-tooltip.status-basic .content { color: var(--tooltip-basic-text-color); } nb-tooltip.status-primary { background: var(--tooltip-primary-background-color); border-color: var(--tooltip-primary-border-color); } nb-tooltip.status-primary .arrow { border-bottom-color: var(--tooltip-primary-background-color); } nb-tooltip.status-primary .content { color: var(--tooltip-primary-text-color); } nb-tooltip.status-success { background: var(--tooltip-success-background-color); border-color: var(--tooltip-success-border-color); } nb-tooltip.status-success .arrow { border-bottom-color: var(--tooltip-success-background-color); } nb-tooltip.status-success .content { color: var(--tooltip-success-text-color); } nb-tooltip.status-warning { background: var(--tooltip-warning-background-color); border-color: var(--tooltip-warning-border-color); } nb-tooltip.status-warning .arrow { border-bottom-color: var(--tooltip-warning-background-color); } nb-tooltip.status-warning .content { color: var(--tooltip-warning-text-color); } nb-tooltip.status-danger { background: var(--tooltip-danger-background-color); border-color: var(--tooltip-danger-border-color); } nb-tooltip.status-danger .arrow { border-bottom-color: var(--tooltip-danger-background-color); } nb-tooltip.status-danger .content { color: var(--tooltip-danger-text-color); } nb-tooltip.status-info { background: var(--tooltip-info-background-color); border-color: var(--tooltip-info-border-color); } nb-tooltip.status-info .arrow { border-bottom-color: var(--tooltip-info-background-color); } nb-tooltip.status-info .content { color: var(--tooltip-info-text-color); } nb-tooltip.status-control { background: var(--tooltip-control-background-color); border-color: var(--tooltip-control-border-color); } nb-tooltip.status-control .arrow { border-bottom-color: var(--tooltip-control-background-color); } nb-tooltip.status-control .content { color: var(--tooltip-control-text-color); } nb-datepicker-container nb-card { border-color: var(--datepicker-border-color); border-style: var(--datepicker-border-style); border-width: var(--datepicker-border-width); border-radius: var(--datepicker-border-radius); background: var(--datepicker-background-color); box-shadow: var(--datepicker-shadow); } nb-calendar-with-time .nb-timepicker-container, nb-calendar-with-time nb-base-calendar nb-card { border: none; } nb-calendar-with-time .column-header { border-top: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border-color); border-radius: 0; } nb-calendar-with-time .timepicker-section.size-large nb-list-item { height: var(--calendar-day-cell-large-height); } nb-calendar-with-time .timepicker-section.size-large .header-cell { height: var(--calendar-weekday-large-height); } [dir=ltr] nb-calendar-with-time .timepicker-section { border-left: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border-color); } [dir=rtl] nb-calendar-with-time .timepicker-section { border-right: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border-color); } nb-calendar-with-time .timepicker-single-column-width { width: var(--timepicker-single-column-width); } nb-calendar-with-time .timepicker-multiple-column-width { width: var(--timepicker-multiple-column-width); } nb-calendar-with-time .picker-title { height: var(--timepicker-title-height); padding: var(--timepicker-title-padding); } nb-radio .outer-circle, nb-radio .inner-circle { height: var(--radio-height); width: var(--radio-width); } nb-radio .outer-circle { border-style: var(--radio-border-style); border-width: var(--radio-border-width); } nb-radio .native-input:enabled:focus + .outer-circle { box-shadow: 0 0 0 var(--radio-outline-width) var(--radio-outline-color); } nb-radio.status-basic .native-input:enabled + .outer-circle { background-color: var(--radio-basic-background-color); border-color: var(--radio-basic-border-color); } nb-radio.status-basic .native-input:enabled:checked + .outer-circle { background-color: var(--radio-basic-checked-background-color); border-color: var(--radio-basic-checked-border-color); } nb-radio.status-basic .native-input:enabled:checked ~ .inner-circle { background-color: var(--radio-basic-inner-circle-color); } nb-radio.status-basic .native-input:enabled:focus + .outer-circle { background-color: var(--radio-basic-focus-background-color); border-color: var(--radio-basic-focus-border-color); } nb-radio.status-basic .native-input:enabled:checked:focus + .outer-circle { background-color: var(--radio-basic-focus-checked-background-color); border-color: var(--radio-basic-focus-checked-border-color); } nb-radio.status-basic .native-input:enabled:checked:focus ~ .inner-circle { background-color: var(--radio-basic-focus-inner-circle-color); } nb-radio.status-basic label:hover .native-input:enabled + .outer-circle { background-color: var(--radio-basic-hover-background-color); border-color: var(--radio-basic-hover-border-color); } nb-radio.status-basic label:hover .native-input:checked:enabled + .outer-circle { background-color: var(--radio-basic-hover-checked-background-color); border-color: var(--radio-basic-hover-checked-border-color); } nb-radio.status-basic label:hover .native-input:checked:enabled ~ .inner-circle { background-color: var(--radio-basic-hover-inner-circle-color); } nb-radio.status-basic label .native-input:enabled:active + .outer-circle { background-color: var(--radio-basic-active-background-color); border-color: var(--radio-basic-active-border-color); } nb-radio.status-basic label .native-input:enabled:checked:active + .outer-circle { background-color: var(--radio-basic-active-checked-background-color); border-color: var(--radio-basic-active-checked-border-color); } nb-radio.status-basic label .native-input:enabled:checked:active ~ .inner-circle { background-color: var(--radio-basic-active-inner-circle-color); } nb-radio.status-basic .text { color: var(--radio-basic-text-color); } nb-radio.status-basic .native-input:disabled + .outer-circle { background-color: var(--radio-basic-disabled-background-color); border-color: var(--radio-basic-disabled-border-color); } nb-radio.status-basic .native-input:disabled ~ .text { color: var(--radio-basic-disabled-text-color); } nb-radio.status-basic .native-input:disabled:checked + .outer-circle { background-color: var(--radio-basic-disabled-checked-background-color); border-color: var(--radio-basic-disabled-checked-border-color); } nb-radio.status-basic .native-input:disabled:checked ~ .inner-circle { background-color: var(--radio-basic-disabled-checked-inner-circle-color); } nb-radio.status-primary .native-input:enabled + .outer-circle { background-color: var(--radio-primary-background-color); border-color: var(--radio-primary-border-color); } nb-radio.status-primary .native-input:enabled:checked + .outer-circle { background-color: var(--radio-primary-checked-background-color); border-color: var(--radio-primary-checked-border-color); } nb-radio.status-primary .native-input:enabled:checked ~ .inner-circle { background-color: var(--radio-primary-inner-circle-color); } nb-radio.status-primary .native-input:enabled:focus + .outer-circle { background-color: var(--radio-primary-focus-background-color); border-color: var(--radio-primary-focus-border-color); } nb-radio.status-primary .native-input:enabled:checked:focus + .outer-circle { background-color: var(--radio-primary-focus-checked-background-color); border-color: var(--radio-primary-focus-checked-border-color); } nb-radio.status-primary .native-input:enabled:checked:focus ~ .inner-circle { background-color: var(--radio-primary-focus-inner-circle-color); } nb-radio.status-primary label:hover .native-input:enabled + .outer-circle { background-color: var(--radio-primary-hover-background-color); border-color: var(--radio-primary-hover-border-color); } nb-radio.status-primary label:hover .native-input:checked:enabled + .outer-circle { background-color: var(--radio-primary-hover-checked-background-color); border-color: var(--radio-primary-hover-checked-border-color); } nb-radio.status-primary label:hover .native-input:checked:enabled ~ .inner-circle { background-color: var(--radio-primary-hover-inner-circle-color); } nb-radio.status-primary label .native-input:enabled:active + .outer-circle { background-color: var(--radio-primary-active-background-color); border-color: var(--radio-primary-active-border-color); } nb-radio.status-primary label .native-input:enabled:checked:active + .outer-circle { background-color: var(--radio-primary-active-checked-background-color); border-color: var(--radio-primary-active-checked-border-color); } nb-radio.status-primary label .native-input:enabled:checked:active ~ .inner-circle { background-color: var(--radio-primary-active-inner-circle-color); } nb-radio.status-primary .text { color: var(--radio-primary-text-color); } nb-radio.status-primary .native-input:disabled + .outer-circle { background-color: var(--radio-primary-disabled-background-color); border-color: var(--radio-primary-disabled-border-color); } nb-radio.status-primary .native-input:disabled ~ .text { color: var(--radio-primary-disabled-text-color); } nb-radio.status-primary .native-input:disabled:checked + .outer-circle { background-color: var(--radio-primary-disabled-checked-background-color); border-color: var(--radio-primary-disabled-checked-border-color); } nb-radio.status-primary .native-input:disabled:checked ~ .inner-circle { background-color: var(--radio-primary-disabled-checked-inner-circle-color); } nb-radio.status-success .native-input:enabled + .outer-circle { background-color: var(--radio-success-background-color); border-color: var(--radio-success-border-color); } nb-radio.status-success .native-input:enabled:checked + .outer-circle { background-color: var(--radio-success-checked-background-color); border-color: var(--radio-success-checked-border-color); } nb-radio.status-success .native-input:enabled:checked ~ .inner-circle { background-color: var(--radio-success-inner-circle-color); } nb-radio.status-success .native-input:enabled:focus + .outer-circle { background-color: var(--radio-success-focus-background-color); border-color: var(--radio-success-focus-border-color); } nb-radio.status-success .native-input:enabled:checked:focus + .outer-circle { background-color: var(--radio-success-focus-checked-background-color); border-color: var(--radio-success-focus-checked-border-color); } nb-radio.status-success .native-input:enabled:checked:focus ~ .inner-circle { background-color: var(--radio-success-focus-inner-circle-color); } nb-radio.status-success label:hover .native-input:enabled + .outer-circle { background-color: var(--radio-success-hover-background-color); border-color: var(--radio-success-hover-border-color); } nb-radio.status-success label:hover .native-input:checked:enabled + .outer-circle { background-color: var(--radio-success-hover-checked-background-color); border-color: var(--radio-success-hover-checked-border-color); } nb-radio.status-success label:hover .native-input:checked:enabled ~ .inner-circle { background-color: var(--radio-success-hover-inner-circle-color); } nb-radio.status-success label .native-input:enabled:active + .outer-circle { background-color: var(--radio-success-active-background-color); border-color: var(--radio-success-active-border-color); } nb-radio.status-success label .native-input:enabled:checked:active + .outer-circle { background-color: var(--radio-success-active-checked-background-color); border-color: var(--radio-success-active-checked-border-color); } nb-radio.status-success label .native-input:enabled:checked:active ~ .inner-circle { background-color: var(--radio-success-active-inner-circle-color); } nb-radio.status-success .text { color: var(--radio-success-text-color); } nb-radio.status-success .native-input:disabled + .outer-circle { background-color: var(--radio-success-disabled-background-color); border-color: var(--radio-success-disabled-border-color); } nb-radio.status-success .native-input:disabled ~ .text { color: var(--radio-success-disabled-text-color); } nb-radio.status-success .native-input:disabled:checked + .outer-circle { background-color: var(--radio-success-disabled-checked-background-color); border-color: var(--radio-success-disabled-checked-border-color); } nb-radio.status-success .native-input:disabled:checked ~ .inner-circle { background-color: var(--radio-success-disabled-checked-inner-circle-color); } nb-radio.status-warning .native-input:enabled + .outer-circle { background-color: var(--radio-warning-background-color); border-color: var(--radio-warning-border-color); } nb-radio.status-warning .native-input:enabled:checked + .outer-circle { background-color: var(--radio-warning-checked-background-color); border-color: var(--radio-warning-checked-border-color); } nb-radio.status-warning .native-input:enabled:checked ~ .inner-circle { background-color: var(--radio-warning-inner-circle-color); } nb-radio.status-warning .native-input:enabled:focus + .outer-circle { background-color: var(--radio-warning-focus-background-color); border-color: var(--radio-warning-focus-border-color); } nb-radio.status-warning .native-input:enabled:checked:focus + .outer-circle { background-color: var(--radio-warning-focus-checked-background-color); border-color: var(--radio-warning-focus-checked-border-color); } nb-radio.status-warning .native-input:enabled:checked:focus ~ .inner-circle { background-color: var(--radio-warning-focus-inner-circle-color); } nb-radio.status-warning label:hover .native-input:enabled + .outer-circle { background-color: var(--radio-warning-hover-background-color); border-color: var(--radio-warning-hover-border-color); } nb-radio.status-warning label:hover .native-input:checked:enabled + .outer-circle { background-color: var(--radio-warning-hover-checked-background-color); border-color: var(--radio-warning-hover-checked-border-color); } nb-radio.status-warning label:hover .native-input:checked:enabled ~ .inner-circle { background-color: var(--radio-warning-hover-inner-circle-color); } nb-radio.status-warning label .native-input:enabled:active + .outer-circle { background-color: var(--radio-warning-active-background-color); border-color: var(--radio-warning-active-border-color); } nb-radio.status-warning label .native-input:enabled:checked:active + .outer-circle { background-color: var(--radio-warning-active-checked-background-color); border-color: var(--radio-warning-active-checked-border-color); } nb-radio.status-warning label .native-input:enabled:checked:active ~ .inner-circle { background-color: var(--radio-warning-active-inner-circle-color); } nb-radio.status-warning .text { color: var(--radio-warning-text-color); } nb-radio.status-warning .native-input:disabled + .outer-circle { background-color: var(--radio-warning-disabled-background-color); border-color: var(--radio-warning-disabled-border-color); } nb-radio.status-warning .native-input:disabled ~ .text { color: var(--radio-warning-disabled-text-color); } nb-radio.status-warning .native-input:disabled:checked + .outer-circle { background-color: var(--radio-warning-disabled-checked-background-color); border-color: var(--radio-warning-disabled-checked-border-color); } nb-radio.status-warning .native-input:disabled:checked ~ .inner-circle { background-color: var(--radio-warning-disabled-checked-inner-circle-color); } nb-radio.status-danger .native-input:enabled + .outer-circle { background-color: var(--radio-danger-background-color); border-color: var(--radio-danger-border-color); } nb-radio.status-danger .native-input:enabled:checked + .outer-circle { background-color: var(--radio-danger-checked-background-color); border-color: var(--radio-danger-checked-border-color); } nb-radio.status-danger .native-input:enabled:checked ~ .inner-circle { background-color: var(--radio-danger-inner-circle-color); } nb-radio.status-danger .native-input:enabled:focus + .outer-circle { background-color: var(--radio-danger-focus-background-color); border-color: var(--radio-danger-focus-border-color); } nb-radio.status-danger .native-input:enabled:checked:focus + .outer-circle { background-color: var(--radio-danger-focus-checked-background-color); border-color: var(--radio-danger-focus-checked-border-color); } nb-radio.status-danger .native-input:enabled:checked:focus ~ .inner-circle { background-color: var(--radio-danger-focus-inner-circle-color); } nb-radio.status-danger label:hover .native-input:enabled + .outer-circle { background-color: var(--radio-danger-hover-background-color); border-color: var(--radio-danger-hover-border-color); } nb-radio.status-danger label:hover .native-input:checked:enabled + .outer-circle { background-color: var(--radio-danger-hover-checked-background-color); border-color: var(--radio-danger-hover-checked-border-color); } nb-radio.status-danger label:hover .native-input:checked:enabled ~ .inner-circle { background-color: var(--radio-danger-hover-inner-circle-color); } nb-radio.status-danger label .native-input:enabled:active + .outer-circle { background-color: var(--radio-danger-active-background-color); border-color: var(--radio-danger-active-border-color); } nb-radio.status-danger label .native-input:enabled:checked:active + .outer-circle { background-color: var(--radio-danger-active-checked-background-color); border-color: var(--radio-danger-active-checked-border-color); } nb-radio.status-danger label .native-input:enabled:checked:active ~ .inner-circle { background-color: var(--radio-danger-active-inner-circle-color); } nb-radio.status-danger .text { color: var(--radio-danger-text-color); } nb-radio.status-danger .native-input:disabled + .outer-circle { background-color: var(--radio-danger-disabled-background-color); border-color: var(--radio-danger-disabled-border-color); } nb-radio.status-danger .native-input:disabled ~ .text { color: var(--radio-danger-disabled-text-color); } nb-radio.status-danger .native-input:disabled:checked + .outer-circle { background-color: var(--radio-danger-disabled-checked-background-color); border-color: var(--radio-danger-disabled-checked-border-color); } nb-radio.status-danger .native-input:disabled:checked ~ .inner-circle { background-color: var(--radio-danger-disabled-checked-inner-circle-color); } nb-radio.status-info .native-input:enabled + .outer-circle { background-color: var(--radio-info-background-color); border-color: var(--radio-info-border-color); } nb-radio.status-info .native-input:enabled:checked + .outer-circle { background-color: var(--radio-info-checked-background-color); border-color: var(--radio-info-checked-border-color); } nb-radio.status-info .native-input:enabled:checked ~ .inner-circle { background-color: var(--radio-info-inner-circle-color); } nb-radio.status-info .native-input:enabled:focus + .outer-circle { background-color: var(--radio-info-focus-background-color); border-color: var(--radio-info-focus-border-color); } nb-radio.status-info .native-input:enabled:checked:focus + .outer-circle { background-color: var(--radio-info-focus-checked-background-color); border-color: var(--radio-info-focus-checked-border-color); } nb-radio.status-info .native-input:enabled:checked:focus ~ .inner-circle { background-color: var(--radio-info-focus-inner-circle-color); } nb-radio.status-info label:hover .native-input:enabled + .outer-circle { background-color: var(--radio-info-hover-background-color); border-color: var(--radio-info-hover-border-color); } nb-radio.status-info label:hover .native-input:checked:enabled + .outer-circle { background-color: var(--radio-info-hover-checked-background-color); border-color: var(--radio-info-hover-checked-border-color); } nb-radio.status-info label:hover .native-input:checked:enabled ~ .inner-circle { background-color: var(--radio-info-hover-inner-circle-color); } nb-radio.status-info label .native-input:enabled:active + .outer-circle { background-color: var(--radio-info-active-background-color); border-color: var(--radio-info-active-border-color); } nb-radio.status-info label .native-input:enabled:checked:active + .outer-circle { background-color: var(--radio-info-active-checked-background-color); border-color: var(--radio-info-active-checked-border-color); } nb-radio.status-info label .native-input:enabled:checked:active ~ .inner-circle { background-color: var(--radio-info-active-inner-circle-color); } nb-radio.status-info .text { color: var(--radio-info-text-color); } nb-radio.status-info .native-input:disabled + .outer-circle { background-color: var(--radio-info-disabled-background-color); border-color: var(--radio-info-disabled-border-color); } nb-radio.status-info .native-input:disabled ~ .text { color: var(--radio-info-disabled-text-color); } nb-radio.status-info .native-input:disabled:checked + .outer-circle { background-color: var(--radio-info-disabled-checked-background-color); border-color: var(--radio-info-disabled-checked-border-color); } nb-radio.status-info .native-input:disabled:checked ~ .inner-circle { background-color: var(--radio-info-disabled-checked-inner-circle-color); } nb-radio.status-control .native-input:enabled + .outer-circle { background-color: var(--radio-control-background-color); border-color: var(--radio-control-border-color); } nb-radio.status-control .native-input:enabled:checked + .outer-circle { background-color: var(--radio-control-checked-background-color); border-color: var(--radio-control-checked-border-color); } nb-radio.status-control .native-input:enabled:checked ~ .inner-circle { background-color: var(--radio-control-inner-circle-color); } nb-radio.status-control .native-input:enabled:focus + .outer-circle { background-color: var(--radio-control-focus-background-color); border-color: var(--radio-control-focus-border-color); } nb-radio.status-control .native-input:enabled:checked:focus + .outer-circle { background-color: var(--radio-control-focus-checked-background-color); border-color: var(--radio-control-focus-checked-border-color); } nb-radio.status-control .native-input:enabled:checked:focus ~ .inner-circle { background-color: var(--radio-control-focus-inner-circle-color); } nb-radio.status-control label:hover .native-input:enabled + .outer-circle { background-color: var(--radio-control-hover-background-color); border-color: var(--radio-control-hover-border-color); } nb-radio.status-control label:hover .native-input:checked:enabled + .outer-circle { background-color: var(--radio-control-hover-checked-background-color); border-color: var(--radio-control-hover-checked-border-color); } nb-radio.status-control label:hover .native-input:checked:enabled ~ .inner-circle { background-color: var(--radio-control-hover-inner-circle-color); } nb-radio.status-control label .native-input:enabled:active + .outer-circle { background-color: var(--radio-control-active-background-color); border-color: var(--radio-control-active-border-color); } nb-radio.status-control label .native-input:enabled:checked:active + .outer-circle { background-color: var(--radio-control-active-checked-background-color); border-color: var(--radio-control-active-checked-border-color); } nb-radio.status-control label .native-input:enabled:checked:active ~ .inner-circle { background-color: var(--radio-control-active-inner-circle-color); } nb-radio.status-control .text { color: var(--radio-control-text-color); } nb-radio.status-control .native-input:disabled + .outer-circle { background-color: var(--radio-control-disabled-background-color); border-color: var(--radio-control-disabled-border-color); } nb-radio.status-control .native-input:disabled ~ .text { color: var(--radio-control-disabled-text-color); } nb-radio.status-control .native-input:disabled:checked + .outer-circle { background-color: var(--radio-control-disabled-checked-background-color); border-color: var(--radio-control-disabled-checked-border-color); } nb-radio.status-control .native-input:disabled:checked ~ .inner-circle { background-color: var(--radio-control-disabled-checked-inner-circle-color); } nb-radio .text { font-family: var(--radio-text-font-family); font-size: var(--radio-text-font-size); font-weight: var(--radio-text-font-weight); line-height: var(--radio-text-line-height); } [dir=ltr] nb-radio .text { margin-left: var(--radio-width); } [dir=rtl] nb-radio .text { margin-right: var(--radio-width); } .nb-tree-grid-header-cell, .nb-tree-grid-cell, .nb-tree-grid-footer-cell { height: var(--tree-grid-row-min-height); padding: var(--tree-grid-cell-padding); border: var(--tree-grid-cell-border-width) var(--tree-grid-cell-border-style) var(--tree-grid-cell-border-color); } .nb-tree-grid-header-row { background: var(--tree-grid-header-background-color); color: var(--tree-grid-header-text-color); font-family: var(--tree-grid-header-text-font-family); font-size: var(--tree-grid-header-text-font-size); font-weight: var(--tree-grid-header-text-font-weight); line-height: var(--tree-grid-header-text-line-height); } .nb-tree-grid-footer-row { background: var(--tree-grid-footer-background-color); color: var(--tree-grid-footer-text-color); font-family: var(--tree-grid-footer-text-font-family); font-size: var(--tree-grid-footer-text-font-size); font-weight: var(--tree-grid-footer-text-font-weight); line-height: var(--tree-grid-footer-text-line-height); } .nb-tree-grid-row { background: var(--tree-grid-row-background-color); color: var(--tree-grid-row-text-color); font-family: var(--tree-grid-row-text-font-family); font-size: var(--tree-grid-row-text-font-size); font-weight: var(--tree-grid-row-text-font-weight); line-height: var(--tree-grid-row-text-line-height); } .nb-tree-grid-row:hover { background: var(--tree-grid-row-hover-background-color); } .nb-tree-grid-row:nth-child(2n):not(:hover) { background-color: var(--tree-grid-row-even-background-color); } .nb-tree-grid-header-cell button { vertical-align: middle; } nb-tree-grid-row-toggle nb-icon, nb-sort-icon nb-icon { font-size: inherit; vertical-align: middle; color: currentColor; } .nb-tree-grid-header-change-sort-button { background: var(--tree-grid-sort-header-button-background-color); border: var(--tree-grid-sort-header-button-border); padding: var(--tree-grid-sort-header-button-padding); color: inherit; font-size: inherit; font-weight: inherit; font-family: inherit; line-height: inherit; } nb-icon { font-size: var(--icon-font-size); line-height: var(--icon-line-height); width: var(--icon-width); height: var(--icon-height); } nb-icon svg { vertical-align: var(--icon-svg-vertical-align); } nb-icon.status-basic { color: var(--icon-basic-color); } nb-icon.status-primary { color: var(--icon-primary-color); } nb-icon.status-success { color: var(--icon-success-color); } nb-icon.status-warning { color: var(--icon-warning-color); } nb-icon.status-danger { color: var(--icon-danger-color); } nb-icon.status-info { color: var(--icon-info-color); } nb-icon.status-control { color: var(--icon-control-color); } .nb-form-control-container { max-width: inherit; } .nb-form-field-addon { display: flex; justify-content: center; align-items: center; z-index: 1; } .nb-form-field-addon-disabled { color: var(--form-field-addon-disabled-text-color); } nb-form-field.nb-transition .nb-form-field-addon { transition-duration: 0.15s; transition-property: color; transition-timing-function: ease-in; } .nb-form-field-addon-basic { color: var(--form-field-addon-basic-text-color); } .nb-form-field-addon-basic-highlight { color: var(--form-field-addon-basic-highlight-text-color); } .nb-form-field-addon-primary { color: var(--form-field-addon-primary-text-color); } .nb-form-field-addon-primary-highlight { color: var(--form-field-addon-primary-highlight-text-color); } .nb-form-field-addon-success { color: var(--form-field-addon-success-text-color); } .nb-form-field-addon-success-highlight { color: var(--form-field-addon-success-highlight-text-color); } .nb-form-field-addon-warning { color: var(--form-field-addon-warning-text-color); } .nb-form-field-addon-warning-highlight { color: var(--form-field-addon-warning-highlight-text-color); } .nb-form-field-addon-danger { color: var(--form-field-addon-danger-text-color); } .nb-form-field-addon-danger-highlight { color: var(--form-field-addon-danger-highlight-text-color); } .nb-form-field-addon-info { color: var(--form-field-addon-info-text-color); } .nb-form-field-addon-info-highlight { color: var(--form-field-addon-info-highlight-text-color); } .nb-form-field-addon-control { color: var(--form-field-addon-control-text-color); } .nb-form-field-addon-control-highlight { color: var(--form-field-addon-control-highlight-text-color); } .nb-form-field-limited-width.nb-form-field-size-tiny { max-width: var(--form-field-tiny-max-width); } .nb-form-field-prefix-tiny, .nb-form-field-suffix-tiny { height: var(--form-field-addon-tiny-height); width: var(--form-field-addon-tiny-width); font-size: var(--form-field-addon-tiny-font-size); line-height: var(--form-field-addon-tiny-line-height); font-weight: var(--form-field-addon-tiny-font-weight); } .nb-form-field-prefix-tiny nb-icon, .nb-form-field-suffix-tiny nb-icon { font-size: var(--form-field-addon-tiny-icon-size); line-height: var(--form-field-addon-tiny-icon-size); } [dir=ltr] .nb-form-field-prefix-tiny { margin-right: calc(var(--form-field-addon-tiny-width) * -1); } [dir=rtl] .nb-form-field-prefix-tiny { margin-left: calc(var(--form-field-addon-tiny-width) * -1); } [dir=ltr] .nb-form-field-suffix-tiny { margin-left: calc(var(--form-field-addon-tiny-width) * -1); } [dir=rtl] .nb-form-field-suffix-tiny { margin-right: calc(var(--form-field-addon-tiny-width) * -1); } .nb-form-field-limited-width.nb-form-field-size-small { max-width: var(--form-field-small-max-width); } .nb-form-field-prefix-small, .nb-form-field-suffix-small { height: var(--form-field-addon-small-height); width: var(--form-field-addon-small-width); font-size: var(--form-field-addon-small-font-size); line-height: var(--form-field-addon-small-line-height); font-weight: var(--form-field-addon-small-font-weight); } .nb-form-field-prefix-small nb-icon, .nb-form-field-suffix-small nb-icon { font-size: var(--form-field-addon-small-icon-size); line-height: var(--form-field-addon-small-icon-size); } [dir=ltr] .nb-form-field-prefix-small { margin-right: calc(var(--form-field-addon-small-width) * -1); } [dir=rtl] .nb-form-field-prefix-small { margin-left: calc(var(--form-field-addon-small-width) * -1); } [dir=ltr] .nb-form-field-suffix-small { margin-left: calc(var(--form-field-addon-small-width) * -1); } [dir=rtl] .nb-form-field-suffix-small { margin-right: calc(var(--form-field-addon-small-width) * -1); } .nb-form-field-limited-width.nb-form-field-size-medium { max-width: var(--form-field-medium-max-width); } .nb-form-field-prefix-medium, .nb-form-field-suffix-medium { height: var(--form-field-addon-medium-height); width: var(--form-field-addon-medium-width); font-size: var(--form-field-addon-medium-font-size); line-height: var(--form-field-addon-medium-line-height); font-weight: var(--form-field-addon-medium-font-weight); } .nb-form-field-prefix-medium nb-icon, .nb-form-field-suffix-medium nb-icon { font-size: var(--form-field-addon-medium-icon-size); line-height: var(--form-field-addon-medium-icon-size); } [dir=ltr] .nb-form-field-prefix-medium { margin-right: calc(var(--form-field-addon-medium-width) * -1); } [dir=rtl] .nb-form-field-prefix-medium { margin-left: calc(var(--form-field-addon-medium-width) * -1); } [dir=ltr] .nb-form-field-suffix-medium { margin-left: calc(var(--form-field-addon-medium-width) * -1); } [dir=rtl] .nb-form-field-suffix-medium { margin-right: calc(var(--form-field-addon-medium-width) * -1); } .nb-form-field-limited-width.nb-form-field-size-large { max-width: var(--form-field-large-max-width); } .nb-form-field-prefix-large, .nb-form-field-suffix-large { height: var(--form-field-addon-large-height); width: var(--form-field-addon-large-width); font-size: var(--form-field-addon-large-font-size); line-height: var(--form-field-addon-large-line-height); font-weight: var(--form-field-addon-large-font-weight); } .nb-form-field-prefix-large nb-icon, .nb-form-field-suffix-large nb-icon { font-size: var(--form-field-addon-large-icon-size); line-height: var(--form-field-addon-large-icon-size); } [dir=ltr] .nb-form-field-prefix-large { margin-right: calc(var(--form-field-addon-large-width) * -1); } [dir=rtl] .nb-form-field-prefix-large { margin-left: calc(var(--form-field-addon-large-width) * -1); } [dir=ltr] .nb-form-field-suffix-large { margin-left: calc(var(--form-field-addon-large-width) * -1); } [dir=rtl] .nb-form-field-suffix-large { margin-right: calc(var(--form-field-addon-large-width) * -1); } .nb-form-field-limited-width.nb-form-field-size-giant { max-width: var(--form-field-giant-max-width); } .nb-form-field-prefix-giant, .nb-form-field-suffix-giant { height: var(--form-field-addon-giant-height); width: var(--form-field-addon-giant-width); font-size: var(--form-field-addon-giant-font-size); line-height: var(--form-field-addon-giant-line-height); font-weight: var(--form-field-addon-giant-font-weight); } .nb-form-field-prefix-giant nb-icon, .nb-form-field-suffix-giant nb-icon { font-size: var(--form-field-addon-giant-icon-size); line-height: var(--form-field-addon-giant-icon-size); } [dir=ltr] .nb-form-field-prefix-giant { margin-right: calc(var(--form-field-addon-giant-width) * -1); } [dir=rtl] .nb-form-field-prefix-giant { margin-left: calc(var(--form-field-addon-giant-width) * -1); } [dir=ltr] .nb-form-field-suffix-giant { margin-left: calc(var(--form-field-addon-giant-width) * -1); } [dir=rtl] .nb-form-field-suffix-giant { margin-right: calc(var(--form-field-addon-giant-width) * -1); } nb-tag { border-style: var(--tag-border-style); border-width: var(--tag-border-width); border-radius: var(--tag-border-radius); display: inline-flex; align-items: center; font-family: var(--tag-text-font-family); text-transform: var(--tag-text-transform); cursor: default; } nb-tag.nb-transition { transition-duration: 0.15s; transition-property: background-color, border-color, color; transition-timing-function: ease-in; } nb-tag.size-tiny { font-size: var(--tag-tiny-text-font-size); font-weight: var(--tag-tiny-text-font-weight); line-height: var(--tag-tiny-text-line-height); padding: var(--tag-tiny-padding); } nb-tag.size-small { font-size: var(--tag-small-text-font-size); font-weight: var(--tag-small-text-font-weight); line-height: var(--tag-small-text-line-height); padding: var(--tag-small-padding); } nb-tag.size-medium { font-size: var(--tag-medium-text-font-size); font-weight: var(--tag-medium-text-font-weight); line-height: var(--tag-medium-text-line-height); padding: var(--tag-medium-padding); } nb-tag.size-large { font-size: var(--tag-large-text-font-size); font-weight: var(--tag-large-text-font-weight); line-height: var(--tag-large-text-line-height); padding: var(--tag-large-padding); } nb-tag.size-giant { font-size: var(--tag-giant-text-font-size); font-weight: var(--tag-giant-text-font-weight); line-height: var(--tag-giant-text-line-height); padding: var(--tag-giant-padding); } nb-tag.appearance-filled.status-basic { background-color: var(--tag-filled-basic-background-color); border-color: var(--tag-filled-basic-border-color); color: var(--tag-filled-basic-text-color); } nb-tag.appearance-filled.status-basic.selected { background-color: var(--tag-filled-basic-selected-background-color); border-color: var(--tag-filled-basic-selected-border-color); } nb-tag.appearance-filled.status-basic.active { background-color: var(--tag-filled-basic-active-background-color); border-color: var(--tag-filled-basic-active-border-color); } nb-tag.appearance-filled.status-basic:hover { background-color: var(--tag-filled-basic-hover-background-color); border-color: var(--tag-filled-basic-hover-border-color); } nb-tag.appearance-filled.status-primary { background-color: var(--tag-filled-primary-background-color); border-color: var(--tag-filled-primary-border-color); color: var(--tag-filled-primary-text-color); } nb-tag.appearance-filled.status-primary.selected { background-color: var(--tag-filled-primary-selected-background-color); border-color: var(--tag-filled-primary-selected-border-color); } nb-tag.appearance-filled.status-primary.active { background-color: var(--tag-filled-primary-active-background-color); border-color: var(--tag-filled-primary-active-border-color); } nb-tag.appearance-filled.status-primary:hover { background-color: var(--tag-filled-primary-hover-background-color); border-color: var(--tag-filled-primary-hover-border-color); } nb-tag.appearance-filled.status-success { background-color: var(--tag-filled-success-background-color); border-color: var(--tag-filled-success-border-color); color: var(--tag-filled-success-text-color); } nb-tag.appearance-filled.status-success.selected { background-color: var(--tag-filled-success-selected-background-color); border-color: var(--tag-filled-success-selected-border-color); } nb-tag.appearance-filled.status-success.active { background-color: var(--tag-filled-success-active-background-color); border-color: var(--tag-filled-success-active-border-color); } nb-tag.appearance-filled.status-success:hover { background-color: var(--tag-filled-success-hover-background-color); border-color: var(--tag-filled-success-hover-border-color); } nb-tag.appearance-filled.status-warning { background-color: var(--tag-filled-warning-background-color); border-color: var(--tag-filled-warning-border-color); color: var(--tag-filled-warning-text-color); } nb-tag.appearance-filled.status-warning.selected { background-color: var(--tag-filled-warning-selected-background-color); border-color: var(--tag-filled-warning-selected-border-color); } nb-tag.appearance-filled.status-warning.active { background-color: var(--tag-filled-warning-active-background-color); border-color: var(--tag-filled-warning-active-border-color); } nb-tag.appearance-filled.status-warning:hover { background-color: var(--tag-filled-warning-hover-background-color); border-color: var(--tag-filled-warning-hover-border-color); } nb-tag.appearance-filled.status-danger { background-color: var(--tag-filled-danger-background-color); border-color: var(--tag-filled-danger-border-color); color: var(--tag-filled-danger-text-color); } nb-tag.appearance-filled.status-danger.selected { background-color: var(--tag-filled-danger-selected-background-color); border-color: var(--tag-filled-danger-selected-border-color); } nb-tag.appearance-filled.status-danger.active { background-color: var(--tag-filled-danger-active-background-color); border-color: var(--tag-filled-danger-active-border-color); } nb-tag.appearance-filled.status-danger:hover { background-color: var(--tag-filled-danger-hover-background-color); border-color: var(--tag-filled-danger-hover-border-color); } nb-tag.appearance-filled.status-info { background-color: var(--tag-filled-info-background-color); border-color: var(--tag-filled-info-border-color); color: var(--tag-filled-info-text-color); } nb-tag.appearance-filled.status-info.selected { background-color: var(--tag-filled-info-selected-background-color); border-color: var(--tag-filled-info-selected-border-color); } nb-tag.appearance-filled.status-info.active { background-color: var(--tag-filled-info-active-background-color); border-color: var(--tag-filled-info-active-border-color); } nb-tag.appearance-filled.status-info:hover { background-color: var(--tag-filled-info-hover-background-color); border-color: var(--tag-filled-info-hover-border-color); } nb-tag.appearance-filled.status-control { background-color: var(--tag-filled-control-background-color); border-color: var(--tag-filled-control-border-color); color: var(--tag-filled-control-text-color); } nb-tag.appearance-filled.status-control.selected { background-color: var(--tag-filled-control-selected-background-color); border-color: var(--tag-filled-control-selected-border-color); } nb-tag.appearance-filled.status-control.active { background-color: var(--tag-filled-control-active-background-color); border-color: var(--tag-filled-control-active-border-color); } nb-tag.appearance-filled.status-control:hover { background-color: var(--tag-filled-control-hover-background-color); border-color: var(--tag-filled-control-hover-border-color); } nb-tag.appearance-outline.status-basic { background-color: var(--tag-outline-basic-background-color); border-color: var(--tag-outline-basic-border-color); color: var(--tag-outline-basic-text-color); } nb-tag.appearance-outline.status-basic.selected { background-color: var(--tag-outline-basic-selected-background-color); border-color: var(--tag-outline-basic-selected-border-color); color: var(--tag-outline-basic-selected-text-color); } nb-tag.appearance-outline.status-basic.active { background-color: var(--tag-outline-basic-active-background-color); border-color: var(--tag-outline-basic-active-border-color); color: var(--tag-outline-basic-active-text-color); } nb-tag.appearance-outline.status-basic:hover { background-color: var(--tag-outline-basic-hover-background-color); border-color: var(--tag-outline-basic-hover-border-color); color: var(--tag-outline-basic-hover-text-color); } nb-tag.appearance-outline.status-primary { background-color: var(--tag-outline-primary-background-color); border-color: var(--tag-outline-primary-border-color); color: var(--tag-outline-primary-text-color); } nb-tag.appearance-outline.status-primary.selected { background-color: var(--tag-outline-primary-selected-background-color); border-color: var(--tag-outline-primary-selected-border-color); color: var(--tag-outline-primary-selected-text-color); } nb-tag.appearance-outline.status-primary.active { background-color: var(--tag-outline-primary-active-background-color); border-color: var(--tag-outline-primary-active-border-color); color: var(--tag-outline-primary-active-text-color); } nb-tag.appearance-outline.status-primary:hover { background-color: var(--tag-outline-primary-hover-background-color); border-color: var(--tag-outline-primary-hover-border-color); color: var(--tag-outline-primary-hover-text-color); } nb-tag.appearance-outline.status-success { background-color: var(--tag-outline-success-background-color); border-color: var(--tag-outline-success-border-color); color: var(--tag-outline-success-text-color); } nb-tag.appearance-outline.status-success.selected { background-color: var(--tag-outline-success-selected-background-color); border-color: var(--tag-outline-success-selected-border-color); color: var(--tag-outline-success-selected-text-color); } nb-tag.appearance-outline.status-success.active { background-color: var(--tag-outline-success-active-background-color); border-color: var(--tag-outline-success-active-border-color); color: var(--tag-outline-success-active-text-color); } nb-tag.appearance-outline.status-success:hover { background-color: var(--tag-outline-success-hover-background-color); border-color: var(--tag-outline-success-hover-border-color); color: var(--tag-outline-success-hover-text-color); } nb-tag.appearance-outline.status-warning { background-color: var(--tag-outline-warning-background-color); border-color: var(--tag-outline-warning-border-color); color: var(--tag-outline-warning-text-color); } nb-tag.appearance-outline.status-warning.selected { background-color: var(--tag-outline-warning-selected-background-color); border-color: var(--tag-outline-warning-selected-border-color); color: var(--tag-outline-warning-selected-text-color); } nb-tag.appearance-outline.status-warning.active { background-color: var(--tag-outline-warning-active-background-color); border-color: var(--tag-outline-warning-active-border-color); color: var(--tag-outline-warning-active-text-color); } nb-tag.appearance-outline.status-warning:hover { background-color: var(--tag-outline-warning-hover-background-color); border-color: var(--tag-outline-warning-hover-border-color); color: var(--tag-outline-warning-hover-text-color); } nb-tag.appearance-outline.status-danger { background-color: var(--tag-outline-danger-background-color); border-color: var(--tag-outline-danger-border-color); color: var(--tag-outline-danger-text-color); } nb-tag.appearance-outline.status-danger.selected { background-color: var(--tag-outline-danger-selected-background-color); border-color: var(--tag-outline-danger-selected-border-color); color: var(--tag-outline-danger-selected-text-color); } nb-tag.appearance-outline.status-danger.active { background-color: var(--tag-outline-danger-active-background-color); border-color: var(--tag-outline-danger-active-border-color); color: var(--tag-outline-danger-active-text-color); } nb-tag.appearance-outline.status-danger:hover { background-color: var(--tag-outline-danger-hover-background-color); border-color: var(--tag-outline-danger-hover-border-color); color: var(--tag-outline-danger-hover-text-color); } nb-tag.appearance-outline.status-info { background-color: var(--tag-outline-info-background-color); border-color: var(--tag-outline-info-border-color); color: var(--tag-outline-info-text-color); } nb-tag.appearance-outline.status-info.selected { background-color: var(--tag-outline-info-selected-background-color); border-color: var(--tag-outline-info-selected-border-color); color: var(--tag-outline-info-selected-text-color); } nb-tag.appearance-outline.status-info.active { background-color: var(--tag-outline-info-active-background-color); border-color: var(--tag-outline-info-active-border-color); color: var(--tag-outline-info-active-text-color); } nb-tag.appearance-outline.status-info:hover { background-color: var(--tag-outline-info-hover-background-color); border-color: var(--tag-outline-info-hover-border-color); color: var(--tag-outline-info-hover-text-color); } nb-tag.appearance-outline.status-control { background-color: var(--tag-outline-control-background-color); border-color: var(--tag-outline-control-border-color); color: var(--tag-outline-control-text-color); } nb-tag.appearance-outline.status-control.selected { background-color: var(--tag-outline-control-selected-background-color); border-color: var(--tag-outline-control-selected-border-color); color: var(--tag-outline-control-selected-text-color); } nb-tag.appearance-outline.status-control.active { background-color: var(--tag-outline-control-active-background-color); border-color: var(--tag-outline-control-active-border-color); color: var(--tag-outline-control-active-text-color); } nb-tag.appearance-outline.status-control:hover { background-color: var(--tag-outline-control-hover-background-color); border-color: var(--tag-outline-control-hover-border-color); color: var(--tag-outline-control-hover-text-color); } .nb-tag-remove { cursor: pointer; } .nb-tag-remove.size-tiny { font-size: var(--tag-tiny-text-line-height); } [dir=ltr] .nb-tag-remove.size-tiny { margin-left: var(--tag-tiny-close-offset); margin-right: calc(var(--tag-tiny-close-offset) * -1); } [dir=rtl] .nb-tag-remove.size-tiny { margin-right: var(--tag-tiny-close-offset); margin-left: calc(var(--tag-tiny-close-offset) * -1); } .nb-tag-remove.size-small { font-size: var(--tag-small-text-line-height); } [dir=ltr] .nb-tag-remove.size-small { margin-left: var(--tag-small-close-offset); margin-right: calc(var(--tag-small-close-offset) * -1); } [dir=rtl] .nb-tag-remove.size-small { margin-right: var(--tag-small-close-offset); margin-left: calc(var(--tag-small-close-offset) * -1); } .nb-tag-remove.size-medium { font-size: var(--tag-medium-text-line-height); } [dir=ltr] .nb-tag-remove.size-medium { margin-left: var(--tag-medium-close-offset); margin-right: calc(var(--tag-medium-close-offset) * -1); } [dir=rtl] .nb-tag-remove.size-medium { margin-right: var(--tag-medium-close-offset); margin-left: calc(var(--tag-medium-close-offset) * -1); } .nb-tag-remove.size-large { font-size: var(--tag-large-text-line-height); } [dir=ltr] .nb-tag-remove.size-large { margin-left: var(--tag-large-close-offset); margin-right: calc(var(--tag-large-close-offset) * -1); } [dir=rtl] .nb-tag-remove.size-large { margin-right: var(--tag-large-close-offset); margin-left: calc(var(--tag-large-close-offset) * -1); } .nb-tag-remove.size-giant { font-size: var(--tag-giant-text-line-height); } [dir=ltr] .nb-tag-remove.size-giant { margin-left: var(--tag-giant-close-offset); margin-right: calc(var(--tag-giant-close-offset) * -1); } [dir=rtl] .nb-tag-remove.size-giant { margin-right: var(--tag-giant-close-offset); margin-left: calc(var(--tag-giant-close-offset) * -1); } nb-tag-list { display: inline-flex; outline: none; } nb-tag-list.size-tiny .nb-tag-list-tags-wrapper { margin: calc(var(--tag-list-tiny-tag-offset) * -1); } nb-tag-list.size-tiny .nb-tag-list-tags-wrapper nb-tag, nb-tag-list.size-tiny .nb-tag-list-tags-wrapper .nb-tag-input { margin: var(--tag-list-tiny-tag-offset); } nb-tag-list.size-small .nb-tag-list-tags-wrapper { margin: calc(var(--tag-list-small-tag-offset) * -1); } nb-tag-list.size-small .nb-tag-list-tags-wrapper nb-tag, nb-tag-list.size-small .nb-tag-list-tags-wrapper .nb-tag-input { margin: var(--tag-list-small-tag-offset); } nb-tag-list.size-medium .nb-tag-list-tags-wrapper { margin: calc(var(--tag-list-medium-tag-offset) * -1); } nb-tag-list.size-medium .nb-tag-list-tags-wrapper nb-tag, nb-tag-list.size-medium .nb-tag-list-tags-wrapper .nb-tag-input { margin: var(--tag-list-medium-tag-offset); } nb-tag-list.size-large .nb-tag-list-tags-wrapper { margin: calc(var(--tag-list-large-tag-offset) * -1); } nb-tag-list.size-large .nb-tag-list-tags-wrapper nb-tag, nb-tag-list.size-large .nb-tag-list-tags-wrapper .nb-tag-input { margin: var(--tag-list-large-tag-offset); } nb-tag-list.size-giant .nb-tag-list-tags-wrapper { margin: calc(var(--tag-list-giant-tag-offset) * -1); } nb-tag-list.size-giant .nb-tag-list-tags-wrapper nb-tag, nb-tag-list.size-giant .nb-tag-list-tags-wrapper .nb-tag-input { margin: var(--tag-list-giant-tag-offset); } .nb-tag-list-tags-wrapper { display: inline-flex; align-items: center; align-content: center; flex-wrap: wrap; flex: 1; } .nb-tag-list-with-input { border-style: var(--input-border-style); border-width: var(--input-border-width); font-family: var(--input-text-font-family); -webkit-appearance: none; -moz-appearance: none; appearance: none; } .nb-tag-list-with-input.nb-transition { transition-duration: 0.15s; transition-property: border, background-color, color, box-shadow; transition-timing-function: ease-in; } .nb-tag-list-with-input::-moz-placeholder { font-family: var(--input-placeholder-text-font-family); text-overflow: ellipsis; } .nb-tag-list-with-input::placeholder { font-family: var(--input-placeholder-text-font-family); text-overflow: ellipsis; } .nb-tag-list-with-input:focus { outline: none; } .nb-tag-list-with-input.input-full-width { width: 100%; } .nb-tag-list-with-input.shape-rectangle { border-radius: var(--tag-list-with-input-rectangle-border-radius); } .nb-tag-list-with-input.shape-semi-round { border-radius: var(--tag-list-with-input-semi-round-border-radius); } .nb-tag-list-with-input.shape-round { border-radius: var(--tag-list-with-input-round-border-radius); } .nb-tag-list-with-input.size-tiny { padding: var(--tag-list-with-input-tiny-padding); } .nb-tag-list-with-input.size-small { padding: var(--tag-list-with-input-small-padding); } .nb-tag-list-with-input.size-medium { padding: var(--tag-list-with-input-medium-padding); } .nb-tag-list-with-input.size-large { padding: var(--tag-list-with-input-large-padding); } .nb-tag-list-with-input.size-giant { padding: var(--tag-list-with-input-giant-padding); } .nb-tag-list-with-input.status-basic { background-color: var(--tag-input-basic-background-color); border-color: var(--tag-input-basic-border-color); } .nb-tag-list-with-input.status-basic.focus { background-color: var(--tag-input-basic-focus-background-color); border-color: var(--tag-input-basic-focus-border-color); } .nb-tag-list-with-input.status-primary { background-color: var(--tag-input-primary-background-color); border-color: var(--tag-input-primary-border-color); } .nb-tag-list-with-input.status-primary.focus { background-color: var(--tag-input-primary-focus-background-color); border-color: var(--tag-input-primary-focus-border-color); } .nb-tag-list-with-input.status-success { background-color: var(--tag-input-success-background-color); border-color: var(--tag-input-success-border-color); } .nb-tag-list-with-input.status-success.focus { background-color: var(--tag-input-success-focus-background-color); border-color: var(--tag-input-success-focus-border-color); } .nb-tag-list-with-input.status-warning { background-color: var(--tag-input-warning-background-color); border-color: var(--tag-input-warning-border-color); } .nb-tag-list-with-input.status-warning.focus { background-color: var(--tag-input-warning-focus-background-color); border-color: var(--tag-input-warning-focus-border-color); } .nb-tag-list-with-input.status-danger { background-color: var(--tag-input-danger-background-color); border-color: var(--tag-input-danger-border-color); } .nb-tag-list-with-input.status-danger.focus { background-color: var(--tag-input-danger-focus-background-color); border-color: var(--tag-input-danger-focus-border-color); } .nb-tag-list-with-input.status-info { background-color: var(--tag-input-info-background-color); border-color: var(--tag-input-info-border-color); } .nb-tag-list-with-input.status-info.focus { background-color: var(--tag-input-info-focus-background-color); border-color: var(--tag-input-info-focus-border-color); } .nb-tag-list-with-input.status-control { background-color: var(--tag-input-control-background-color); border-color: var(--tag-input-control-border-color); } .nb-tag-list-with-input.status-control.focus { background-color: var(--tag-input-control-focus-background-color); border-color: var(--tag-input-control-focus-border-color); } nb-form-field nb-tag-list { width: 100%; } [dir=ltr] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-tiny { padding-left: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-tiny { padding-right: var(--form-field-addon-tiny-width); } [dir=ltr] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-tiny { padding-right: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-tiny { padding-left: var(--form-field-addon-tiny-width); } [dir=ltr] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-small { padding-left: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-small { padding-right: var(--form-field-addon-small-width); } [dir=ltr] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-small { padding-right: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-small { padding-left: var(--form-field-addon-small-width); } [dir=ltr] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-medium { padding-left: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-medium { padding-right: var(--form-field-addon-medium-width); } [dir=ltr] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-medium { padding-right: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-medium { padding-left: var(--form-field-addon-medium-width); } [dir=ltr] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-large { padding-left: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-large { padding-right: var(--form-field-addon-large-width); } [dir=ltr] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-large { padding-right: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-large { padding-left: var(--form-field-addon-large-width); } [dir=ltr] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-giant { padding-left: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-giant { padding-right: var(--form-field-addon-giant-width); } [dir=ltr] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-giant { padding-right: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-giant { padding-left: var(--form-field-addon-giant-width); } .nb-tag-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: transparent; background: transparent; outline: none; flex: 1; padding: 0; min-width: var(--tag-input-min-width); font-family: var(--tag-input-text-font-family); } .nb-tag-input::-moz-placeholder { font-family: var(--tag-input-placeholder-text-font-family); } .nb-tag-input::placeholder { font-family: var(--tag-input-placeholder-text-font-family); } .nb-tag-input.size-tiny { font-size: var(--tag-input-tiny-text-font-size); font-weight: var(--tag-input-tiny-text-font-weight); line-height: var(--tag-input-tiny-text-line-height); padding: var(--tag-input-tiny-padding); } .nb-tag-input.size-tiny::-moz-placeholder { font-size: var(--tag-input-tiny-placeholder-text-font-size); font-weight: var(--tag-input-tiny-placeholder-text-font-weight); line-height: var(--tag-input-tiny-placeholder-text-line-height); } .nb-tag-input.size-tiny::placeholder { font-size: var(--tag-input-tiny-placeholder-text-font-size); font-weight: var(--tag-input-tiny-placeholder-text-font-weight); line-height: var(--tag-input-tiny-placeholder-text-line-height); } .nb-tag-input.size-small { font-size: var(--tag-input-small-text-font-size); font-weight: var(--tag-input-small-text-font-weight); line-height: var(--tag-input-small-text-line-height); padding: var(--tag-input-small-padding); } .nb-tag-input.size-small::-moz-placeholder { font-size: var(--tag-input-small-placeholder-text-font-size); font-weight: var(--tag-input-small-placeholder-text-font-weight); line-height: var(--tag-input-small-placeholder-text-line-height); } .nb-tag-input.size-small::placeholder { font-size: var(--tag-input-small-placeholder-text-font-size); font-weight: var(--tag-input-small-placeholder-text-font-weight); line-height: var(--tag-input-small-placeholder-text-line-height); } .nb-tag-input.size-medium { font-size: var(--tag-input-medium-text-font-size); font-weight: var(--tag-input-medium-text-font-weight); line-height: var(--tag-input-medium-text-line-height); padding: var(--tag-input-medium-padding); } .nb-tag-input.size-medium::-moz-placeholder { font-size: var(--tag-input-medium-placeholder-text-font-size); font-weight: var(--tag-input-medium-placeholder-text-font-weight); line-height: var(--tag-input-medium-placeholder-text-line-height); } .nb-tag-input.size-medium::placeholder { font-size: var(--tag-input-medium-placeholder-text-font-size); font-weight: var(--tag-input-medium-placeholder-text-font-weight); line-height: var(--tag-input-medium-placeholder-text-line-height); } .nb-tag-input.size-large { font-size: var(--tag-input-large-text-font-size); font-weight: var(--tag-input-large-text-font-weight); line-height: var(--tag-input-large-text-line-height); padding: var(--tag-input-large-padding); } .nb-tag-input.size-large::-moz-placeholder { font-size: var(--tag-input-large-placeholder-text-font-size); font-weight: var(--tag-input-large-placeholder-text-font-weight); line-height: var(--tag-input-large-placeholder-text-line-height); } .nb-tag-input.size-large::placeholder { font-size: var(--tag-input-large-placeholder-text-font-size); font-weight: var(--tag-input-large-placeholder-text-font-weight); line-height: var(--tag-input-large-placeholder-text-line-height); } .nb-tag-input.size-giant { font-size: var(--tag-input-giant-text-font-size); font-weight: var(--tag-input-giant-text-font-weight); line-height: var(--tag-input-giant-text-line-height); padding: var(--tag-input-giant-padding); } .nb-tag-input.size-giant::-moz-placeholder { font-size: var(--tag-input-giant-placeholder-text-font-size); font-weight: var(--tag-input-giant-placeholder-text-font-weight); line-height: var(--tag-input-giant-placeholder-text-line-height); } .nb-tag-input.size-giant::placeholder { font-size: var(--tag-input-giant-placeholder-text-font-size); font-weight: var(--tag-input-giant-placeholder-text-font-weight); line-height: var(--tag-input-giant-placeholder-text-line-height); } .nb-tag-input.status-basic { color: var(--tag-input-basic-text-color); } .nb-tag-input.status-basic::-moz-placeholder { color: var(--tag-input-basic-placeholder-text-color); } .nb-tag-input.status-basic::placeholder { color: var(--tag-input-basic-placeholder-text-color); } .nb-tag-input.status-basic:disabled { color: var(--tag-input-basic-disabled-text-color); } .nb-tag-input.status-basic:disabled::-moz-placeholder { color: var(--tag-input-basic-disabled-placeholder-text-color); } .nb-tag-input.status-basic:disabled::placeholder { color: var(--tag-input-basic-disabled-placeholder-text-color); } .nb-tag-input.status-primary { color: var(--tag-input-primary-text-color); } .nb-tag-input.status-primary::-moz-placeholder { color: var(--tag-input-primary-placeholder-text-color); } .nb-tag-input.status-primary::placeholder { color: var(--tag-input-primary-placeholder-text-color); } .nb-tag-input.status-primary:disabled { color: var(--tag-input-primary-disabled-text-color); } .nb-tag-input.status-primary:disabled::-moz-placeholder { color: var(--tag-input-primary-disabled-placeholder-text-color); } .nb-tag-input.status-primary:disabled::placeholder { color: var(--tag-input-primary-disabled-placeholder-text-color); } .nb-tag-input.status-success { color: var(--tag-input-success-text-color); } .nb-tag-input.status-success::-moz-placeholder { color: var(--tag-input-success-placeholder-text-color); } .nb-tag-input.status-success::placeholder { color: var(--tag-input-success-placeholder-text-color); } .nb-tag-input.status-success:disabled { color: var(--tag-input-success-disabled-text-color); } .nb-tag-input.status-success:disabled::-moz-placeholder { color: var(--tag-input-success-disabled-placeholder-text-color); } .nb-tag-input.status-success:disabled::placeholder { color: var(--tag-input-success-disabled-placeholder-text-color); } .nb-tag-input.status-warning { color: var(--tag-input-warning-text-color); } .nb-tag-input.status-warning::-moz-placeholder { color: var(--tag-input-warning-placeholder-text-color); } .nb-tag-input.status-warning::placeholder { color: var(--tag-input-warning-placeholder-text-color); } .nb-tag-input.status-warning:disabled { color: var(--tag-input-warning-disabled-text-color); } .nb-tag-input.status-warning:disabled::-moz-placeholder { color: var(--tag-input-warning-disabled-placeholder-text-color); } .nb-tag-input.status-warning:disabled::placeholder { color: var(--tag-input-warning-disabled-placeholder-text-color); } .nb-tag-input.status-danger { color: var(--tag-input-danger-text-color); } .nb-tag-input.status-danger::-moz-placeholder { color: var(--tag-input-danger-placeholder-text-color); } .nb-tag-input.status-danger::placeholder { color: var(--tag-input-danger-placeholder-text-color); } .nb-tag-input.status-danger:disabled { color: var(--tag-input-danger-disabled-text-color); } .nb-tag-input.status-danger:disabled::-moz-placeholder { color: var(--tag-input-danger-disabled-placeholder-text-color); } .nb-tag-input.status-danger:disabled::placeholder { color: var(--tag-input-danger-disabled-placeholder-text-color); } .nb-tag-input.status-info { color: var(--tag-input-info-text-color); } .nb-tag-input.status-info::-moz-placeholder { color: var(--tag-input-info-placeholder-text-color); } .nb-tag-input.status-info::placeholder { color: var(--tag-input-info-placeholder-text-color); } .nb-tag-input.status-info:disabled { color: var(--tag-input-info-disabled-text-color); } .nb-tag-input.status-info:disabled::-moz-placeholder { color: var(--tag-input-info-disabled-placeholder-text-color); } .nb-tag-input.status-info:disabled::placeholder { color: var(--tag-input-info-disabled-placeholder-text-color); } .nb-tag-input.status-control { color: var(--tag-input-control-text-color); } .nb-tag-input.status-control::-moz-placeholder { color: var(--tag-input-control-placeholder-text-color); } .nb-tag-input.status-control::placeholder { color: var(--tag-input-control-placeholder-text-color); } .nb-tag-input.status-control:disabled { color: var(--tag-input-control-disabled-text-color); } .nb-tag-input.status-control:disabled::-moz-placeholder { color: var(--tag-input-control-disabled-placeholder-text-color); } .nb-tag-input.status-control:disabled::placeholder { color: var(--tag-input-control-disabled-placeholder-text-color); } body { color: var(--text-basic-color); font-family: var(--text-paragraph-font-family); font-size: var(--text-paragraph-font-size); font-weight: var(--text-paragraph-font-weight); line-height: var(--text-paragraph-line-height); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--text-basic-color); } h1, .h1 { font-size: var(--text-heading-1-font-size); font-family: var(--text-heading-1-font-family); font-weight: var(--text-heading-1-font-weight); line-height: var(--text-heading-1-line-height); } h2, .h2 { font-size: var(--text-heading-2-font-size); font-family: var(--text-heading-2-font-family); font-weight: var(--text-heading-2-font-weight); line-height: var(--text-heading-2-line-height); } h3, .h3 { font-size: var(--text-heading-3-font-size); font-family: var(--text-heading-3-font-family); font-weight: var(--text-heading-3-font-weight); line-height: var(--text-heading-3-line-height); } h4, .h4 { font-size: var(--text-heading-4-font-size); font-family: var(--text-heading-4-font-family); font-weight: var(--text-heading-4-font-weight); line-height: var(--text-heading-4-line-height); } h5, .h5 { font-size: var(--text-heading-5-font-size); font-family: var(--text-heading-5-font-family); font-weight: var(--text-heading-5-font-weight); line-height: var(--text-heading-5-line-height); } h6, .h6 { font-size: var(--text-heading-6-font-size); font-family: var(--text-heading-6-font-family); font-weight: var(--text-heading-6-font-weight); line-height: var(--text-heading-6-line-height); } .subtitle, .subtitle-2 { color: var(--text-basic-color); } .subtitle { font-family: var(--text-subtitle-font-family); font-size: var(--text-subtitle-font-size); font-weight: var(--text-subtitle-font-weight); line-height: var(--text-subtitle-line-height); } .subtitle-2 { font-family: var(--text-subtitle-2-font-family); font-size: var(--text-subtitle-2-font-size); font-weight: var(--text-subtitle-2-font-weight); line-height: var(--text-subtitle-2-line-height); } p, .paragraph { color: var(--text-basic-color); font-family: var(--text-paragraph-font-family); font-size: var(--text-paragraph-font-size); font-weight: var(--text-paragraph-font-weight); line-height: var(--text-paragraph-line-height); } .paragraph-2 { color: var(--text-basic-color); font-family: var(--text-paragraph-2-font-family); font-size: var(--text-paragraph-2-font-size); font-weight: var(--text-paragraph-2-font-weight); line-height: var(--text-paragraph-2-line-height); } a { color: var(--link-text-color); -webkit-text-decoration: var(--link-text-decoration); text-decoration: var(--link-text-decoration); font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; } a:focus { color: var(--link-text-focus-color); } a:hover { color: var(--link-text-hover-color); } a.link-control, a.link-control:hover { color: var(--text-control-color); } a.link-alternate, a.link-alternate:hover { color: var(--text-alternate-color); } .label { color: var(--text-hint-color); font-family: var(--text-label-font-family); font-size: var(--text-label-font-size); font-weight: var(--text-label-font-weight); line-height: var(--text-label-line-height); } .caption { font-family: var(--text-caption-font-family); font-size: var(--text-caption-font-size); font-weight: var(--text-caption-font-weight); line-height: var(--text-caption-line-height); } .caption-2 { font-family: var(--text-caption-2-font-family); font-size: var(--text-caption-2-font-size); font-weight: var(--text-caption-2-font-weight); line-height: var(--text-caption-2-line-height); } .caption, .caption-2 { color: var(--text-hint-color); } .caption.status-basic, .caption-2.status-basic { color: var(--text-basic-color); } .caption.status-primary, .caption-2.status-primary { color: var(--text-primary-color); } .caption.status-success, .caption-2.status-success { color: var(--text-success-color); } .caption.status-warning, .caption-2.status-warning { color: var(--text-warning-color); } .caption.status-danger, .caption-2.status-danger { color: var(--text-danger-color); } .caption.status-info, .caption-2.status-info { color: var(--text-info-color); } .caption.status-control, .caption-2.status-control { color: var(--text-control-color); } li { color: var(--list-item-text-color); font-family: var(--list-item-font-family); font-size: var(--list-item-font-size); font-weight: var(--list-item-font-weight); line-height: var(--list-item-line-height); } .text-alternate { color: var(--text-alternate-color); } .text-disabled { color: var(--text-disabled-color); } .text-hint { color: var(--text-hint-color); } .text-basic { color: var(--text-basic-color); } .text-primary { color: var(--text-primary-color); } .text-success { color: var(--text-success-color); } .text-warning { color: var(--text-warning-color); } .text-danger { color: var(--text-danger-color); } .text-info { color: var(--text-info-color); } .text-control { color: var(--text-control-color); } ng2-smart-table table tr th, ng2-smart-table table tr th a { font-family: var(--smart-table-header-font-family); font-size: var(--smart-table-header-font-size); font-weight: var(--smart-table-header-font-weight); line-height: var(--smart-table-header-line-height); color: var(--smart-table-header-fg); } ng2-smart-table table tr td { font-family: var(--smart-table-font-family); font-size: var(--smart-table-font-size); font-weight: var(--smart-table-font-weight); line-height: var(--smart-table-line-height); color: var(--smart-table-fg); } ng2-smart-table table tr th, ng2-smart-table table tr td { position: relative; padding: var(--smart-table-padding); border: 1px solid var(--smart-table-separator); vertical-align: middle; } ng2-smart-table table tr.ng2-smart-titles th { padding: var(--smart-table-padding); } [dir=ltr] ng2-smart-table table tr.ng2-smart-titles th { padding-right: 1.75rem; } [dir=rtl] ng2-smart-table table tr.ng2-smart-titles th { padding-left: 1.75rem; } ng2-smart-table table tr.ng2-smart-titles th a:hover, ng2-smart-table table tr.ng2-smart-titles th a:active, ng2-smart-table table tr.ng2-smart-titles th a:visited { color: var(--smart-table-header-fg); text-decoration: none; } ng2-smart-table table tr.ng2-smart-titles th a.sort.asc, ng2-smart-table table tr.ng2-smart-titles th a.sort.desc { font-weight: var(--smart-table-header-font-weight); } ng2-smart-table table tr.ng2-smart-titles th a.sort.asc::after, ng2-smart-table table tr.ng2-smart-titles th a.sort.desc::after { border-bottom-color: var(--smart-table-fg-secondary); border-width: 0.375rem; position: absolute; margin: 0; top: 50%; transform: translate(0, -50%); } [dir=ltr] ng2-smart-table table tr.ng2-smart-titles th a.sort.asc::after, [dir=ltr] ng2-smart-table table tr.ng2-smart-titles th a.sort.desc::after { right: 0.75rem; } [dir=rtl] ng2-smart-table table tr.ng2-smart-titles th a.sort.asc::after, [dir=rtl] ng2-smart-table table tr.ng2-smart-titles th a.sort.desc::after { left: 0.75rem; } ng2-smart-table table tr.ng2-smart-titles th a.sort.asc.desc::after, ng2-smart-table table tr.ng2-smart-titles th a.sort.desc.desc::after { transform: translate(0, -50%) rotate(180deg); } ng2-smart-table thead tr { background: var(--smart-table-header-bg); } ng2-smart-table thead tr.ng2-smart-filters th { padding: var(--smart-table-filter-padding); } ng2-smart-table thead tr.ng2-smart-filters th .ng2-smart-filter input { line-height: var(--smart-table-line-height); } ng2-smart-table tbody tr.selected, ng2-smart-table tbody tr:hover { background: var(--smart-table-bg-active) !important; } ng2-smart-table tbody tr:nth-child(2n) { background-color: var(--smart-table-bg-even); } ng2-smart-table th.ng2-smart-actions-title-add a { display: flex; align-items: center; justify-content: center; font-size: 1.75rem !important; padding: var(--smart-table-filter-padding); border-color: var(--smart-table-add-button-border-color); background-color: var(--smart-table-add-button-background-color); color: var(--smart-table-add-button-text-color); border-radius: 0.375rem; } ng2-smart-table th.ng2-smart-actions-title-add a:focus { border-color: var(--smart-table-add-button-focus-border-color); } ng2-smart-table th.ng2-smart-actions-title-add a:hover { text-decoration: none; background-color: var(--smart-table-add-button-hover-background-color); border-color: var(--smart-table-add-button-hover-border-color); } ng2-smart-table th.ng2-smart-actions-title-add a:active { background-color: var(--smart-table-add-button-active-background-color); border-color: var(--smart-table-add-button-active-border-color); } ng2-smart-table .ng2-smart-actions { padding: 0; height: 1px; } ng2-smart-table .ng2-smart-actions ng2-st-tbody-edit-delete, ng2-smart-table .ng2-smart-actions ng2-st-tbody-create-cancel, ng2-smart-table .ng2-smart-actions ng2-st-actions { display: flex; height: 100%; } ng2-smart-table .ng2-smart-actions a.ng2-smart-action { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; font-size: 2rem !important; color: var(--smart-table-fg-secondary); } ng2-smart-table .ng2-smart-actions a.ng2-smart-action:not(:last-child) { border-right: 1px solid var(--smart-table-separator); } ng2-smart-table .ng2-smart-actions a.ng2-smart-action:hover { text-decoration: none; } ng2-smart-table .ng2-smart-actions .ng2-smart-action-add-create:hover, ng2-smart-table .ng2-smart-actions .ng2-smart-action-edit-edit:hover, ng2-smart-table .ng2-smart-actions .ng2-smart-action-edit-save:hover { color: var(--smart-table-action-add-edit-hover-text-color); } ng2-smart-table .ng2-smart-actions .ng2-smart-action-add-cancel:hover, ng2-smart-table .ng2-smart-actions .ng2-smart-action-delete-delete:hover, ng2-smart-table .ng2-smart-actions .ng2-smart-action-edit-cancel:hover { color: var(--smart-table-action-cancel-delete-hover-text-color); } ng2-smart-table table-cell-edit-mode { display: block; margin: -7.5px -12px; } ng2-smart-table ng2-smart-table-pager { display: block; } ng2-smart-table nav.ng2-smart-pagination-nav { display: flex; justify-content: center; margin-top: 1.25rem; } ng2-smart-table nav.ng2-smart-pagination-nav .ng2-smart-pagination { display: flex; padding: 0; } ng2-smart-table nav.ng2-smart-pagination-nav .ng2-smart-pagination .page-item.disabled .page-link, ng2-smart-table nav.ng2-smart-pagination-nav .ng2-smart-pagination .page-item.disabled .page-link:focus, ng2-smart-table nav.ng2-smart-pagination-nav .ng2-smart-pagination .page-item.disabled .page-link:hover { background-color: var(--smart-table-paging-hover); color: var(--smart-table-paging-disabled-text-color); } ng2-smart-table nav.ng2-smart-pagination-nav .pagination { font-family: var(--smart-table-paging-font-family); font-size: var(--smart-table-paging-font-size); line-height: var(--smart-table-paging-line-height); border: var(--smart-table-paging-border-color) solid var(--smart-table-paging-border-width); border-radius: var(--smart-table-border-radius); } ng2-smart-table nav.ng2-smart-pagination-nav .pagination li { overflow: hidden; } [dir=ltr] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:not(:last-child) { border-right: 1px solid var(--smart-table-separator); } [dir=rtl] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:not(:last-child) { border-left: 1px solid var(--smart-table-separator); } ng2-smart-table nav.ng2-smart-pagination-nav .pagination li a.page-link-prev, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li a.page-link-next { font-size: var(--smart-table-paging-font-size); line-height: var(--smart-table-paging-line-height); } ng2-smart-table nav.ng2-smart-pagination-nav .pagination li a, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li > span { font-size: var(--smart-table-paging-font-size); line-height: var(--smart-table-paging-line-height); background-color: transparent; color: var(--smart-table-paging-page-text-color); padding: 0.75rem 1.25rem; border: none; } ng2-smart-table nav.ng2-smart-pagination-nav .pagination li a:focus, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li > span:focus { border-color: var(--smart-table-paging-page-focus-border-color); color: var(--smart-table-paging-page-focus-text-color); } ng2-smart-table nav.ng2-smart-pagination-nav .pagination li a:hover, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li > span:hover { background-color: var(--smart-table-paging-hover); border-color: var(--smart-table-paging-hover-border-color); color: var(--smart-table-paging-hover-text-color); text-decoration: none; } [dir=ltr] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:first-child a, [dir=ltr] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:first-child > span { border-top-left-radius: var(--smart-table-border-radius); border-bottom-left-radius: var(--smart-table-border-radius); } [dir=rtl] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:first-child a, [dir=rtl] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:first-child > span { border-top-right-radius: var(--smart-table-border-radius); border-bottom-right-radius: var(--smart-table-border-radius); } [dir=ltr] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:last-child a, [dir=ltr] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:last-child > span { border-top-right-radius: var(--smart-table-border-radius); border-bottom-right-radius: var(--smart-table-border-radius); } [dir=rtl] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:last-child a, [dir=rtl] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:last-child > span { border-top-left-radius: var(--smart-table-border-radius); border-bottom-left-radius: var(--smart-table-border-radius); } ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active a, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active a:hover, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active a:focus, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active > span, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active > span:hover, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active > span:focus { color: var(--smart-table-paging-fg-active); background-color: var(--smart-table-paging-bg-active); } .nb-theme-default { --link-text-color: var(--text-primary-color); --link-text-decoration: underline; --link-text-focus-color: var(--text-primary-focus-color); --link-text-hover-color: var(--text-primary-hover-color); --card-background-color: var(--background-basic-color-1); --card-text-color: var(--text-basic-color); --card-text-font-family: var(--text-paragraph-font-family); --card-text-font-size: var(--text-paragraph-font-size); --card-text-font-weight: var(--text-paragraph-font-weight); --card-text-line-height: var(--text-paragraph-line-height); --card-border-width: 0.0625rem; --card-border-style: solid; --card-border-color: var(--border-basic-color-4); --card-border-radius: var(--border-radius); --card-padding: 1rem 1.5rem; --card-shadow: none; --card-divider-color: var(--divider-color); --card-divider-style: var(--divider-style); --card-divider-width: var(--divider-width); --card-header-text-color: var(--text-basic-color); --card-header-text-font-family: var(--text-subtitle-font-family); --card-header-text-font-size: var(--text-subtitle-font-size); --card-header-text-font-weight: var(--text-subtitle-font-weight); --card-header-text-line-height: var(--text-subtitle-line-height); --card-header-basic-background-color: var(--background-basic-color-2); --card-header-basic-text-color: var(--text-basic-color); --card-header-primary-background-color: var(--color-primary-default); --card-header-primary-text-color: var(--text-control-color); --card-header-info-background-color: var(--color-info-default); --card-header-info-text-color: var(--text-control-color); --card-header-success-background-color: var(--color-success-default); --card-header-success-text-color: var(--text-control-color); --card-header-warning-background-color: var(--color-warning-default); --card-header-warning-text-color: var(--text-control-color); --card-header-danger-background-color: var(--color-danger-default); --card-header-danger-text-color: var(--text-control-color); --card-header-control-background-color: var(--color-control-default); --card-header-control-text-color: var(--color-basic-800); --card-height-tiny: 13.5rem; --card-height-small: 21.1875rem; --card-height-medium: 28.875rem; --card-height-large: 36.5625rem; --card-height-giant: 44.25rem; --card-margin-bottom: 1.875rem; --card-scrollbar-color: var(--scrollbar-color); --card-scrollbar-background-color: var(--scrollbar-background-color); --card-scrollbar-width: var(--scrollbar-width); --header-background-color: var(--background-basic-color-1); --header-text-color: var(--text-basic-color); --header-text-font-family: var(--text-paragraph-font-family); --header-text-font-size: var(--text-paragraph-font-size); --header-text-font-weight: var(--text-paragraph-font-weight); --header-text-line-height: var(--text-paragraph-line-height); --header-height: 4.75rem; --header-padding: 1.25rem; --header-shadow: var(--shadow); --footer-background-color: var(--background-basic-color-1); --footer-text-color: var(--text-basic-color); --footer-text-font-family: var(--text-paragraph-font-family); --footer-text-font-size: var(--text-paragraph-font-size); --footer-text-font-weight: var(--text-paragraph-font-weight); --footer-text-line-height: var(--text-paragraph-line-height); --footer-text-highlight-color: var(--color-primary-hover); --footer-height: 4.725rem; --footer-padding: 1.25rem; --footer-divider-color: var(--divider-color); --footer-divider-style: var(--divider-style); --footer-divider-width: var(--divider-width); --footer-shadow: var(--shadow); --layout-background-color: var(--background-basic-color-3); --layout-text-color: var(--text-basic-color); --layout-text-font-family: var(--text-paragraph-font-family); --layout-text-font-size: var(--text-paragraph-font-size); --layout-text-font-weight: var(--text-paragraph-font-weight); --layout-text-line-height: var(--text-paragraph-line-height); --layout-min-height: 100vh; --layout-content-width: 900px; --layout-window-mode-min-width: 300px; --layout-window-mode-background-color: var(--background-basic-color-3); --layout-window-mode-padding-top: 4.75rem; --layout-window-shadow: var(--shadow); --layout-padding: 2.25rem 2.25rem 0.75rem; --layout-medium-padding: 1.5rem 1.5rem 0.5rem; --layout-small-padding: 1rem 1rem 0; --layout-scrollbar-background-color: var(--scrollbar-background-color); --layout-scrollbar-color: var(--scrollbar-color); --layout-scrollbar-width: var(--scrollbar-width); --sidebar-background-color: var(--background-basic-color-1); --sidebar-text-color: var(--text-basic-color); --sidebar-text-font-family: var(--text-paragraph-font-family); --sidebar-text-font-size: var(--text-paragraph-font-size); --sidebar-text-font-weight: var(--text-paragraph-font-weight); --sidebar-text-line-height: var(--text-paragraph-line-height); --sidebar-height: 100vh; --sidebar-width: 16rem; --sidebar-width-compact: 3.5rem; --sidebar-padding: 1.25rem; --sidebar-header-height: 3.5rem; --sidebar-footer-height: 3.5rem; --sidebar-shadow: var(--shadow); --sidebar-menu-item-highlight-color: var(--color-primary-default); --sidebar-scrollbar-background-color: var(--scrollbar-background-color); --sidebar-scrollbar-color: var(--scrollbar-color); --sidebar-scrollbar-width: var(--scrollbar-width); --menu-background-color: transparent; --menu-text-color: var(--text-basic-color); --menu-text-font-family: var(--text-subtitle-2-font-family); --menu-text-font-size: var(--text-subtitle-2-font-size); --menu-text-font-weight: var(--text-subtitle-2-font-weight); --menu-text-line-height: var(--text-subtitle-2-line-height); --menu-group-text-color: var(--text-hint-color); --menu-item-border-radius: 0; --menu-item-padding: 0.75rem 1rem; --menu-item-hover-background-color: var(--menu-background-color); --menu-item-hover-cursor: pointer; --menu-item-hover-text-color: var(--text-primary-hover-color); --menu-item-icon-hover-color: var(--menu-item-hover-text-color); --menu-item-active-background-color: var(--menu-background-color); --menu-item-active-text-color: var(--text-primary-color); --menu-item-icon-active-color: var(--menu-item-active-text-color); --menu-item-icon-color: var(--text-hint-color); --menu-item-icon-margin: 0 0.5rem 0 0; --menu-item-icon-width: 1.25rem; --menu-item-divider-color: var(--divider-color); --menu-item-divider-style: var(--divider-style); --menu-item-divider-width: var(--divider-width); --menu-submenu-background-color: var(--menu-background-color); --menu-submenu-text-color: var(--text-basic-color); --menu-submenu-margin: 0; --menu-submenu-padding: 0 1.25rem; --menu-submenu-item-border-color: var(--menu-submenu-background-color); --menu-submenu-item-border-style: solid; --menu-submenu-item-border-width: 0; --menu-submenu-item-border-radius: 0; --menu-submenu-item-padding: var(--menu-item-padding); --menu-submenu-item-hover-background-color: var(--menu-background-color); --menu-submenu-item-hover-border-color: var(--menu-submenu-item-border-color); --menu-submenu-item-hover-text-color: var(--menu-item-hover-text-color); --menu-submenu-item-icon-hover-color: var(--menu-item-icon-hover-color); --menu-submenu-item-active-background-color: var(--menu-background-color); --menu-submenu-item-active-border-color: var(--color-primary-default); --menu-submenu-item-active-text-color: var(--menu-item-active-text-color); --menu-submenu-item-icon-active-color: var(--menu-item-icon-active-color); --menu-submenu-item-active-hover-background-color: var(--menu-submenu-item-hover-background-color); --menu-submenu-item-active-hover-border-color: var(--color-primary-hover); --menu-submenu-item-active-hover-text-color: var(--menu-submenu-item-hover-text-color); --menu-submenu-item-icon-active-hover-color: var(--menu-submenu-item-icon-hover-color); --tabset-background-color: transparent; --tabset-border-radius: 0; --tabset-shadow: none; --tabset-tab-background-color: transparent; --tabset-tab-padding: 1rem 2rem; --tabset-tab-text-color: var(--text-hint-color); --tabset-tab-text-font-family: var(--text-button-font-family); --tabset-tab-text-font-size: var(--text-button-medium-font-size); --tabset-tab-text-font-weight: var(--text-button-font-weight); --tabset-tab-text-line-height: var(--text-button-medium-line-height); --tabset-tab-text-transform: uppercase; --tabset-tab-underline-width: 0.25rem; --tabset-tab-underline-color: transparent; --tabset-tab-active-background-color: transparent; --tabset-tab-active-text-color: var(--text-primary-color); --tabset-tab-active-underline-color: var(--text-primary-color); --tabset-tab-focus-background-color: transparent; --tabset-tab-focus-text-color: var(--text-primary-focus-color); --tabset-tab-focus-underline-color: var(--text-primary-focus-color); --tabset-tab-hover-background-color: transparent; --tabset-tab-hover-text-color: var(--text-primary-hover-color); --tabset-tab-hover-underline-color: var(--text-primary-hover-color); --tabset-tab-disabled-background-color: transparent; --tabset-tab-disabled-text-color: var(--text-disabled-color); --tabset-tab-disabled-underline-color: transparent; --tabset-tab–badge-dot-mode-horizontal-offset: 0.75rem; --tabset-tab-badge-dot-mode-padding: 0.25rem; --tabset-divider-color: var(--divider-color); --tabset-divider-style: var(--divider-style); --tabset-divider-width: var(--divider-width); --tabset-content-background-color: transparent; --tabset-content-padding: 1rem 2rem; --tabset-content-text-color: var(--text-basic-color); --tabset-content-text-font-family: var(--text-paragraph-font-family); --tabset-content-text-font-size: var(--text-paragraph-font-size); --tabset-content-text-font-weight: var(--text-paragraph-font-weight); --tabset-content-text-line-height: var(--text-paragraph-line-height); --tabset-scrollbar-color: var(--scrollbar-color); --tabset-scrollbar-background-color: var(--scrollbar-background-color); --tabset-scrollbar-width: var(--scrollbar-width); --route-tabset-background-color: transparent; --route-tabset-border-radius: 0; --route-tabset-shadow: none; --route-tabset-tab-background-color: transparent; --route-tabset-tab-padding: 1rem 2rem; --route-tabset-tab-text-color: var(--text-hint-color); --route-tabset-tab-text-font-family: var(--text-button-font-family); --route-tabset-tab-text-font-size: var(--text-button-medium-font-size); --route-tabset-tab-text-font-weight: var(--text-button-font-weight); --route-tabset-tab-text-line-height: var(--text-button-medium-line-height); --route-tabset-tab-text-transform: uppercase; --route-tabset-tab-underline-width: 0.25rem; --route-tabset-tab-underline-color: transparent; --route-tabset-tab-active-background-color: transparent; --route-tabset-tab-active-text-color: var(--text-primary-color); --route-tabset-tab-active-underline-color: var(--text-primary-color); --route-tabset-tab-focus-background-color: transparent; --route-tabset-tab-focus-text-color: var(--text-primary-focus-color); --route-tabset-tab-focus-underline-color: var(--text-primary-focus-color); --route-tabset-tab-hover-background-color: transparent; --route-tabset-tab-hover-text-color: var(--text-primary-hover-color); --route-tabset-tab-hover-underline-color: var(--text-primary-hover-color); --route-tabset-tab-disabled-background-color: transparent; --route-tabset-tab-disabled-text-color: var(--text-disabled-color); --route-tabset-tab-disabled-underline-color: transparent; --route-tabset-divider-color: var(--divider-color); --route-tabset-divider-style: var(--divider-style); --route-tabset-divider-width: var(--divider-width); --route-tabset-scrollbar-color: var(--scrollbar-color); --route-tabset-scrollbar-background-color: var(--scrollbar-background-color); --route-tabset-scrollbar-width: var(--scrollbar-width); --user-picture-box-background-color: transparent; --user-picture-box-border-color: var(--border-basic-color-3); --user-picture-box-border-width: 1px; --user-initials-text-color: var(--text-basic-color); --user-initials-text-font-family: var(--text-paragraph-font-family); --user-initials-text-font-weight: var(--text-paragraph-font-weight); --user-name-text-color: var(--text-basic-color); --user-name-text-font-family: var(--text-paragraph-font-family); --user-name-text-font-weight: var(--text-paragraph-font-weight); --user-title-text-color: var(--text-basic-color); --user-title-text-font-family: var(--text-paragraph-2-font-family); --user-title-text-font-weight: var(--text-paragraph-2-font-weight); --user-rectangle-border-radius: 0.5rem; --user-semi-round-border-radius: 0.75rem; --user-round-border-radius: 50%; --user-tiny-height: 1.25rem; --user-tiny-width: 1.25rem; --user-tiny-initials-text-font-size: var(--text-caption-font-size); --user-tiny-initials-text-line-height: var(--text-caption-line-height); --user-tiny-name-text-font-size: var(--text-caption-font-size); --user-tiny-name-text-line-height: var(--text-caption-line-height); --user-tiny-title-text-font-size: var(--text-caption-font-size); --user-tiny-title-text-line-height: var(--text-caption-line-height); --user-small-height: 1.5rem; --user-small-width: 1.5rem; --user-small-initials-text-font-size: var(--text-caption-font-size); --user-small-initials-text-line-height: var(--text-caption-line-height); --user-small-name-text-font-size: var(--text-caption-font-size); --user-small-name-text-line-height: var(--text-caption-line-height); --user-small-title-text-font-size: var(--text-caption-font-size); --user-small-title-text-line-height: var(--text-caption-line-height); --user-medium-height: 2.5rem; --user-medium-width: 2.5rem; --user-medium-initials-text-font-size: var(--text-paragraph-font-size); --user-medium-initials-text-line-height: var(--text-paragraph-line-height); --user-medium-name-text-font-size: var(--text-paragraph-font-size); --user-medium-name-text-line-height: var(--text-paragraph-line-height); --user-medium-title-text-font-size: var(--text-caption-font-size); --user-medium-title-text-line-height: var(--text-caption-line-height); --user-large-height: 3.25rem; --user-large-width: 3.25rem; --user-large-initials-text-font-size: var(--text-paragraph-font-size); --user-large-initials-text-line-height: var(--text-paragraph-line-height); --user-large-name-text-font-size: var(--text-paragraph-font-size); --user-large-name-text-line-height: var(--text-paragraph-line-height); --user-large-title-text-font-size: var(--text-paragraph-2-font-size); --user-large-title-text-line-height: var(--text-paragraph-2-line-height); --user-giant-height: 4rem; --user-giant-width: 4rem; --user-giant-initials-text-font-size: var(--text-paragraph-font-size); --user-giant-initials-text-line-height: var(--text-paragraph-line-height); --user-giant-name-text-font-size: var(--text-paragraph-font-size); --user-giant-name-text-line-height: var(--text-paragraph-line-height); --user-giant-title-text-font-size: var(--text-paragraph-font-size); --user-giant-title-text-line-height: var(--text-paragraph-line-height); --popover-text-color: var(--text-basic-color); --popover-text-font-family: var(--text-paragraph-font-family); --popover-text-font-size: var(--text-paragraph-font-size); --popover-text-font-weight: var(--text-paragraph-font-weight); --popover-text-line-height: var(--text-paragraph-line-height); --popover-background-color: var(--background-basic-color-1); --popover-border-width: 1px; --popover-border-color: transparent; --popover-border-radius: var(--border-radius); --popover-shadow: var(--shadow); --popover-arrow-size: 0.6875rem; --popover-padding: 0.75rem 1rem; --context-menu-background-color: var(--background-basic-color-1); --context-menu-border-color: transparent; --context-menu-border-style: solid; --context-menu-border-width: 0; --context-menu-border-radius: var(--border-radius); --context-menu-text-align: center; --context-menu-min-width: 10rem; --context-menu-max-width: 15rem; --context-menu-shadow: var(--shadow); --actions-background-color: transparent; --actions-divider-color: var(--divider-color); --actions-divider-style: var(--divider-style); --actions-divider-width: var(--divider-width); --actions-icon-color: var(--text-hint-color); --actions-text-color: var(--text-basic-color); --actions-text-font-family: var(--text-button-font-family); --actions-text-font-weight: var(--text-button-font-weight); --actions-text-line-height: var(--text-button-medium-line-height); --actions-disabled-icon-color: var(--text-disabled-color); --actions-disabled-text-color: var(--text-disabled-color); --actions-tiny-height: 1rem; --actions-tiny-icon-height: var(--actions-tiny-height); --actions-tiny-padding: 0 1.25rem; --actions-tiny-text-font-size: var(--text-button-tiny-font-size); --actions-small-height: 1.5rem; --actions-small-icon-height: var(--actions-small-height); --actions-small-padding: 0 1.25rem; --actions-small-text-font-size: var(--text-button-small-font-size); --actions-medium-height: 2.25rem; --actions-medium-icon-height: var(--actions-medium-height); --actions-medium-padding: 0 1.25rem; --actions-medium-text-font-size: var(--text-button-medium-font-size); --actions-large-height: 3.5rem; --actions-large-icon-height: var(--actions-large-height); --actions-large-padding: 0 1.25rem; --actions-large-text-font-size: var(--text-button-large-font-size); --actions-giant-height: 4rem; --actions-giant-icon-height: var(--actions-giant-height); --actions-giant-padding: 0 1.25rem; --actions-giant-text-font-size: var(--text-button-giant-font-size); --search-background-color: var(--background-basic-color-1); --search-divider-color: var(--divider-color); --search-divider-style: var(--divider-style); --search-divider-width: var(--divider-width); --search-extra-background-color: var(--color-primary-default); --search-text-color: var(--text-basic-color); --search-text-font-family: var(--text-heading-1-font-family); --search-text-font-size: var(--text-heading-1-font-size); --search-text-font-weight: var(--text-heading-1-font-weight); --search-text-line-height: var(--text-heading-1-line-height); --search-placeholder-text-color: var(--text-hint-color); --search-info-text-color: var(--text-hint-color); --search-info-text-font-family: var(--text-subtitle-font-family); --search-info-text-font-size: var(--text-subtitle-font-size); --search-info-text-font-weight: var(--text-subtitle-font-weight); --search-info-text-line-height: var(--text-subtitle-line-height); --smart-table-header-font-family: var(--text-paragraph-font-family); --smart-table-header-font-size: var(--text-paragraph-font-size); --smart-table-header-font-weight: var(--text-paragraph-font-weight); --smart-table-header-line-height: var(--text-paragraph-line-height); --smart-table-header-fg: var(--text-basic-color); --smart-table-header-bg: var(--background-basic-color-1); --smart-table-font-family: var(--text-paragraph-font-family); --smart-table-font-size: var(--text-paragraph-font-size); --smart-table-font-weight: var(--text-paragraph-font-weight); --smart-table-line-height: var(--text-paragraph-line-height); --smart-table-fg: var(--text-basic-color); --smart-table-bg: var(--background-basic-color-1); --smart-table-bg-even: var(--background-basic-color-2); --smart-table-fg-secondary: var(--text-basic-color); --smart-table-bg-active: var(--background-basic-color-3); --smart-table-padding: 0.875rem 1.25rem; --smart-table-filter-padding: 0.375rem 0.5rem; --smart-table-separator: var(--divider-color); --smart-table-border-radius: var(--border-radius); --smart-table-action-add-edit-hover-text-color: var(--color-primary-default); --smart-table-action-cancel-delete-hover-text-color: var(--color-danger-default); --smart-table-add-button-border-color: var(--button-filled-primary-border-color); --smart-table-add-button-background-color: var(--button-filled-primary-background-color); --smart-table-add-button-text-color: var(--button-filled-primary-text-color); --smart-table-add-button-focus-border-color: var(--button-filled-primary-focus-border-color); --smart-table-add-button-hover-background-color: var(--button-filled-primary-hover-background-color); --smart-table-add-button-hover-border-color: var(--button-filled-primary-hover-border-color); --smart-table-add-button-active-background-color: var(--button-filled-primary-active-background-color); --smart-table-add-button-active-border-color: var(--button-filled-primary-active-border-color); --smart-table-paging-font-family: var(--button-text-font-family); --smart-table-paging-font-size: var(--button-medium-text-font-size); --smart-table-paging-line-height: var(--button-medium-text-line-height); --smart-table-paging-border-color: var(--divider-color); --smart-table-paging-border-width: var(--divider-width); --smart-table-paging-fg-active: var(--text-control-color); --smart-table-paging-bg-active: var(--color-primary-default); --smart-table-paging-hover: transparent; --smart-table-paging-hover-border-color: var(--button-outline-primary-hover-border-color); --smart-table-paging-hover-text-color: var(--button-outline-primary-hover-text-color); --smart-table-paging-disabled-text-color: var(--button-outline-primary-disabled-text-color); --smart-table-paging-page-text-color: var(--button-outline-primary-text-color); --smart-table-paging-page-focus-border-color: var(--button-outline-primary-focus-border-color); --smart-table-paging-page-focus-text-color: var(--button-outline-primary-focus-text-color); --toastr-border-style: solid; --toastr-border-width: 1px; --toastr-border-radius: var(--border-radius); --toastr-padding: 1rem; --toastr-shadow: var(--shadow); --toastr-text-font-family: var(--text-paragraph-2-font-family); --toastr-text-font-size: var(--text-paragraph-2-font-size); --toastr-text-font-weight: var(--text-paragraph-2-font-weight); --toastr-text-line-height: var(--text-paragraph-2-line-height); --toastr-title-text-font-family: var(--text-subtitle-font-family); --toastr-title-text-font-size: var(--text-subtitle-font-size); --toastr-title-text-font-weight: var(--text-subtitle-font-weight); --toastr-title-text-line-height: var(--text-subtitle-line-height); --toastr-basic-background-color: var(--background-basic-color-1); --toastr-basic-border-color: var(--border-basic-color-3); --toastr-basic-text-color: var(--text-basic-color); --toastr-icon-basic-background-color: var(--background-basic-color-1); --toastr-icon-basic-color: var(--text-basic-color); --toastr-destroyable-basic-hover-background-color: var(--background-basic-color-1); --toastr-destroyable-basic-hover-border-color: var(--border-basic-color-3); --toastr-primary-background-color: var(--color-primary-default); --toastr-primary-border-color: var(--color-primary-default); --toastr-primary-text-color: var(--text-control-color); --toastr-icon-primary-background-color: var(--background-basic-color-1); --toastr-icon-primary-color: var(--color-primary-default); --toastr-destroyable-primary-hover-background-color: var(--color-primary-hover); --toastr-destroyable-primary-hover-border-color: var(--color-primary-hover); --toastr-success-background-color: var(--color-success-default); --toastr-success-border-color: var(--color-success-default); --toastr-success-text-color: var(--text-control-color); --toastr-icon-success-background-color: var(--background-basic-color-1); --toastr-icon-success-color: var(--color-success-default); --toastr-destroyable-success-hover-background-color: var(--color-success-hover); --toastr-destroyable-success-hover-border-color: var(--color-success-hover); --toastr-info-background-color: var(--color-info-default); --toastr-info-border-color: var(--color-info-default); --toastr-info-text-color: var(--text-control-color); --toastr-icon-info-background-color: var(--background-basic-color-1); --toastr-icon-info-color: var(--color-info-default); --toastr-destroyable-info-hover-background-color: var(--color-info-hover); --toastr-destroyable-info-hover-border-color: var(--color-info-hover); --toastr-warning-background-color: var(--color-warning-default); --toastr-warning-border-color: var(--color-warning-default); --toastr-warning-text-color: var(--text-control-color); --toastr-icon-warning-background-color: var(--background-basic-color-1); --toastr-icon-warning-color: var(--color-warning-default); --toastr-destroyable-warning-hover-background-color: var(--color-warning-hover); --toastr-destroyable-warning-hover-border-color: var(--color-warning-hover); --toastr-danger-background-color: var(--color-danger-default); --toastr-danger-border-color: var(--color-danger-default); --toastr-danger-text-color: var(--text-control-color); --toastr-icon-danger-background-color: var(--background-basic-color-1); --toastr-icon-danger-color: var(--color-danger-default); --toastr-destroyable-danger-hover-background-color: var(--color-danger-hover); --toastr-destroyable-danger-hover-border-color: var(--color-danger-hover); --toastr-control-background-color: var(--color-control-default); --toastr-control-border-color: var(--color-control-default); --toastr-control-text-color: var(--color-basic-800); --toastr-icon-control-background-color: var(--color-control-default); --toastr-icon-control-color: var(--color-basic-800); --toastr-destroyable-control-hover-background-color: var(--color-control-hover); --toastr-destroyable-control-hover-border-color: var(--color-control-hover); --button-cursor: pointer; --button-outline-width: var(--outline-width); --button-outline-color: var(--outline-color); --button-text-font-family: var(--text-button-font-family); --button-text-font-weight: var(--text-button-font-weight); --button-disabled-cursor: default; --button-tiny-text-font-size: var(--text-button-tiny-font-size); --button-tiny-text-line-height: var(--text-button-tiny-line-height); --button-tiny-icon-size: 0.75rem; --button-tiny-icon-vertical-margin: -0.125rem; --button-tiny-icon-offset: 0.375rem; --button-small-text-font-size: var(--text-button-small-font-size); --button-small-text-line-height: var(--text-button-small-line-height); --button-small-icon-size: 1rem; --button-small-icon-vertical-margin: -0.125rem; --button-small-icon-offset: 0.375rem; --button-medium-text-font-size: var(--text-button-medium-font-size); --button-medium-text-line-height: var(--text-button-medium-line-height); --button-medium-icon-size: 1.25rem; --button-medium-icon-vertical-margin: -0.125rem; --button-medium-icon-offset: 0.5rem; --button-large-text-font-size: var(--text-button-large-font-size); --button-large-text-line-height: var(--text-button-large-line-height); --button-large-icon-size: 1.5rem; --button-large-icon-vertical-margin: -0.125rem; --button-large-icon-offset: 0.75rem; --button-giant-text-font-size: var(--text-button-giant-font-size); --button-giant-text-line-height: var(--text-button-giant-line-height); --button-giant-icon-size: 1.5rem; --button-giant-icon-vertical-margin: -0.125rem; --button-giant-icon-offset: 0.75rem; --button-rectangle-border-radius: var(--border-radius); --button-semi-round-border-radius: 0.75rem; --button-round-border-radius: 1.5rem; --button-filled-border-style: solid; --button-filled-border-width: 0.0625rem; --button-filled-text-transform: uppercase; --button-filled-tiny-padding: 0.3125rem 0.625rem; --button-filled-small-padding: 0.4375rem 0.875rem; --button-filled-medium-padding: 0.6875rem 1.125rem; --button-filled-large-padding: 0.8125rem 1.125rem; --button-filled-giant-padding: 0.9375rem 1.375rem; --button-filled-basic-background-color: var(--color-basic-default); --button-filled-basic-border-color: var(--color-basic-default-border); --button-filled-basic-text-color: var(--color-basic-800); --button-filled-basic-focus-background-color: var(--color-basic-focus); --button-filled-basic-focus-border-color: var(--color-basic-focus-border); --button-filled-basic-hover-background-color: var(--color-basic-hover); --button-filled-basic-hover-border-color: var(--color-basic-hover-border); --button-filled-basic-active-background-color: var(--color-basic-active); --button-filled-basic-active-border-color: var(--color-basic-active-border); --button-filled-basic-disabled-background-color: var(--color-basic-disabled); --button-filled-basic-disabled-border-color: var(--color-basic-disabled-border); --button-filled-basic-disabled-text-color: var(--text-disabled-color); --button-filled-primary-background-color: var(--color-primary-default); --button-filled-primary-border-color: var(--color-primary-default-border); --button-filled-primary-text-color: var(--text-control-color); --button-filled-primary-focus-background-color: var(--color-primary-focus); --button-filled-primary-focus-border-color: var(--color-primary-focus-border); --button-filled-primary-hover-background-color: var(--color-primary-hover); --button-filled-primary-hover-border-color: var(--color-primary-hover-border); --button-filled-primary-active-background-color: var(--color-primary-active); --button-filled-primary-active-border-color: var(--color-primary-active-border); --button-filled-primary-disabled-background-color: var(--color-primary-disabled); --button-filled-primary-disabled-border-color: var(--color-primary-disabled-border); --button-filled-primary-disabled-text-color: var(--text-disabled-color); --button-filled-success-background-color: var(--color-success-default); --button-filled-success-border-color: var(--color-success-default-border); --button-filled-success-text-color: var(--text-control-color); --button-filled-success-focus-background-color: var(--color-success-focus); --button-filled-success-focus-border-color: var(--color-success-focus-border); --button-filled-success-hover-background-color: var(--color-success-hover); --button-filled-success-hover-border-color: var(--color-success-hover-border); --button-filled-success-active-background-color: var(--color-success-active); --button-filled-success-active-border-color: var(--color-success-active-border); --button-filled-success-disabled-background-color: var(--color-success-disabled); --button-filled-success-disabled-border-color: var(--color-success-disabled-border); --button-filled-success-disabled-text-color: var(--text-disabled-color); --button-filled-info-background-color: var(--color-info-default); --button-filled-info-border-color: var(--color-info-default-border); --button-filled-info-text-color: var(--text-control-color); --button-filled-info-focus-background-color: var(--color-info-focus); --button-filled-info-focus-border-color: var(--color-info-focus-border); --button-filled-info-hover-background-color: var(--color-info-hover); --button-filled-info-hover-border-color: var(--color-info-hover-border); --button-filled-info-active-background-color: var(--color-info-active); --button-filled-info-active-border-color: var(--color-info-active-border); --button-filled-info-disabled-background-color: var(--color-info-disabled); --button-filled-info-disabled-border-color: var(--color-info-disabled-border); --button-filled-info-disabled-text-color: var(--text-disabled-color); --button-filled-warning-background-color: var(--color-warning-default); --button-filled-warning-border-color: var(--color-warning-default-border); --button-filled-warning-text-color: var(--text-control-color); --button-filled-warning-focus-background-color: var(--color-warning-focus); --button-filled-warning-focus-border-color: var(--color-warning-focus-border); --button-filled-warning-hover-background-color: var(--color-warning-hover); --button-filled-warning-hover-border-color: var(--color-warning-hover-border); --button-filled-warning-active-background-color: var(--color-warning-active); --button-filled-warning-active-border-color: var(--color-warning-active-border); --button-filled-warning-disabled-background-color: var(--color-warning-disabled); --button-filled-warning-disabled-border-color: var(--color-warning-disabled-border); --button-filled-warning-disabled-text-color: var(--text-disabled-color); --button-filled-danger-background-color: var(--color-danger-default); --button-filled-danger-border-color: var(--color-danger-default-border); --button-filled-danger-text-color: var(--text-control-color); --button-filled-danger-focus-background-color: var(--color-danger-focus); --button-filled-danger-focus-border-color: var(--color-danger-focus-border); --button-filled-danger-hover-background-color: var(--color-danger-hover); --button-filled-danger-hover-border-color: var(--color-danger-hover-border); --button-filled-danger-active-background-color: var(--color-danger-active); --button-filled-danger-active-border-color: var(--color-danger-active-border); --button-filled-danger-disabled-background-color: var(--color-danger-disabled); --button-filled-danger-disabled-border-color: var(--color-danger-disabled-border); --button-filled-danger-disabled-text-color: var(--text-disabled-color); --button-filled-control-background-color: var(--color-control-default); --button-filled-control-border-color: var(--color-control-default-border); --button-filled-control-text-color: var(--color-basic-800); --button-filled-control-focus-background-color: var(--color-control-focus); --button-filled-control-focus-border-color: var(--color-control-focus-border); --button-filled-control-hover-background-color: var(--color-control-hover); --button-filled-control-hover-border-color: var(--color-control-hover-border); --button-filled-control-active-background-color: var(--color-control-active); --button-filled-control-active-border-color: var(--color-control-active-border); --button-filled-control-disabled-background-color: var(--color-control-disabled); --button-filled-control-disabled-border-color: var(--color-control-disabled-border); --button-filled-control-disabled-text-color: var(--text-disabled-color); --button-outline-border-style: solid; --button-outline-border-width: 0.0625rem; --button-outline-text-transform: uppercase; --button-outline-focus-inset-shadow-length: 0 0 0 100vmax; --button-outline-tiny-padding: 0.3125rem 0.625rem; --button-outline-small-padding: 0.4375rem 0.875rem; --button-outline-medium-padding: 0.6875rem 1.125rem; --button-outline-large-padding: 0.8125rem 1.125rem; --button-outline-giant-padding: 0.9375rem 1.375rem; --button-outline-basic-background-color: var(--color-basic-transparent-default); --button-outline-basic-border-color: var(--color-basic-transparent-default-border); --button-outline-basic-text-color: var(--text-hint-color); --button-outline-basic-focus-background-color: var(--color-basic-transparent-focus); --button-outline-basic-focus-border-color: var(--color-basic-transparent-focus-border); --button-outline-basic-focus-text-color: var(--text-hint-color); --button-outline-basic-hover-background-color: var(--color-basic-transparent-hover); --button-outline-basic-hover-border-color: var(--color-basic-transparent-hover-border); --button-outline-basic-hover-text-color: var(--text-hint-color); --button-outline-basic-active-background-color: var(--color-basic-transparent-active); --button-outline-basic-active-border-color: var(--color-basic-transparent-active-border); --button-outline-basic-active-text-color: var(--text-hint-color); --button-outline-basic-disabled-background-color: var(--color-basic-transparent-disabled); --button-outline-basic-disabled-border-color: var(--color-basic-transparent-disabled-border); --button-outline-basic-disabled-text-color: var(--text-disabled-color); --button-outline-primary-background-color: var(--color-primary-transparent-default); --button-outline-primary-border-color: var(--color-primary-transparent-default-border); --button-outline-primary-text-color: var(--text-primary-color); --button-outline-primary-focus-background-color: var(--color-primary-transparent-focus); --button-outline-primary-focus-border-color: var(--color-primary-transparent-focus-border); --button-outline-primary-focus-text-color: var(--text-primary-color); --button-outline-primary-hover-background-color: var(--color-primary-transparent-hover); --button-outline-primary-hover-border-color: var(--color-primary-transparent-hover-border); --button-outline-primary-hover-text-color: var(--text-primary-color); --button-outline-primary-active-background-color: var(--color-primary-transparent-active); --button-outline-primary-active-border-color: var(--color-primary-transparent-active-border); --button-outline-primary-active-text-color: var(--text-primary-color); --button-outline-primary-disabled-background-color: var(--color-primary-transparent-disabled); --button-outline-primary-disabled-border-color: var(--color-primary-transparent-disabled-border); --button-outline-primary-disabled-text-color: var(--text-disabled-color); --button-outline-success-background-color: var(--color-success-transparent-default); --button-outline-success-border-color: var(--color-success-transparent-default-border); --button-outline-success-text-color: var(--text-success-color); --button-outline-success-focus-background-color: var(--color-success-transparent-focus); --button-outline-success-focus-border-color: var(--color-success-transparent-focus-border); --button-outline-success-focus-text-color: var(--text-success-color); --button-outline-success-hover-background-color: var(--color-success-transparent-hover); --button-outline-success-hover-border-color: var(--color-success-transparent-hover-border); --button-outline-success-hover-text-color: var(--text-success-color); --button-outline-success-active-background-color: var(--color-success-transparent-active); --button-outline-success-active-border-color: var(--color-success-transparent-active-border); --button-outline-success-active-text-color: var(--text-success-color); --button-outline-success-disabled-background-color: var(--color-success-transparent-disabled); --button-outline-success-disabled-border-color: var(--color-success-transparent-disabled-border); --button-outline-success-disabled-text-color: var(--text-disabled-color); --button-outline-info-background-color: var(--color-info-transparent-default); --button-outline-info-border-color: var(--color-info-transparent-default-border); --button-outline-info-text-color: var(--text-info-color); --button-outline-info-focus-background-color: var(--color-info-transparent-focus); --button-outline-info-focus-border-color: var(--color-info-transparent-focus-border); --button-outline-info-focus-text-color: var(--text-info-color); --button-outline-info-hover-background-color: var(--color-info-transparent-hover); --button-outline-info-hover-border-color: var(--color-info-transparent-hover-border); --button-outline-info-hover-text-color: var(--text-info-color); --button-outline-info-active-background-color: var(--color-info-transparent-active); --button-outline-info-active-border-color: var(--color-info-transparent-active-border); --button-outline-info-active-text-color: var(--text-info-color); --button-outline-info-disabled-background-color: var(--color-info-transparent-disabled); --button-outline-info-disabled-border-color: var(--color-info-transparent-disabled-border); --button-outline-info-disabled-text-color: var(--text-disabled-color); --button-outline-warning-background-color: var(--color-warning-transparent-default); --button-outline-warning-border-color: var(--color-warning-transparent-default-border); --button-outline-warning-text-color: var(--text-warning-color); --button-outline-warning-focus-background-color: var(--color-warning-transparent-focus); --button-outline-warning-focus-border-color: var(--color-warning-transparent-focus-border); --button-outline-warning-focus-text-color: var(--text-warning-color); --button-outline-warning-hover-background-color: var(--color-warning-transparent-hover); --button-outline-warning-hover-border-color: var(--color-warning-transparent-hover-border); --button-outline-warning-hover-text-color: var(--text-warning-color); --button-outline-warning-active-background-color: var(--color-warning-transparent-active); --button-outline-warning-active-border-color: var(--color-warning-transparent-active-border); --button-outline-warning-active-text-color: var(--text-warning-color); --button-outline-warning-disabled-background-color: var(--color-warning-transparent-disabled); --button-outline-warning-disabled-border-color: var(--color-warning-transparent-disabled-border); --button-outline-warning-disabled-text-color: var(--text-disabled-color); --button-outline-danger-background-color: var(--color-danger-transparent-default); --button-outline-danger-border-color: var(--color-danger-transparent-default-border); --button-outline-danger-text-color: var(--text-danger-color); --button-outline-danger-focus-background-color: var(--color-danger-transparent-focus); --button-outline-danger-focus-border-color: var(--color-danger-transparent-focus-border); --button-outline-danger-focus-text-color: var(--text-danger-color); --button-outline-danger-hover-background-color: var(--color-danger-transparent-hover); --button-outline-danger-hover-border-color: var(--color-danger-transparent-hover-border); --button-outline-danger-hover-text-color: var(--text-danger-color); --button-outline-danger-active-background-color: var(--color-danger-transparent-active); --button-outline-danger-active-border-color: var(--color-danger-transparent-active-border); --button-outline-danger-active-text-color: var(--text-danger-color); --button-outline-danger-disabled-background-color: var(--color-danger-transparent-disabled); --button-outline-danger-disabled-border-color: var(--color-danger-transparent-disabled-border); --button-outline-danger-disabled-text-color: var(--text-disabled-color); --button-outline-control-background-color: var(--color-control-transparent-default); --button-outline-control-border-color: var(--color-control-transparent-default-border); --button-outline-control-text-color: var(--text-control-color); --button-outline-control-focus-background-color: var(--color-control-transparent-focus); --button-outline-control-focus-border-color: var(--color-control-transparent-focus-border); --button-outline-control-focus-text-color: var(--text-control-color); --button-outline-control-hover-background-color: var(--color-control-transparent-hover); --button-outline-control-hover-border-color: var(--color-control-transparent-hover-border); --button-outline-control-hover-text-color: var(--text-control-color); --button-outline-control-active-background-color: var(--color-control-transparent-active); --button-outline-control-active-border-color: var(--color-control-transparent-active-border); --button-outline-control-active-text-color: var(--text-control-color); --button-outline-control-disabled-background-color: var(--color-control-transparent-disabled); --button-outline-control-disabled-border-color: var(--color-control-transparent-disabled-border); --button-outline-control-disabled-text-color: var(--text-disabled-color); --button-ghost-background-color: transparent; --button-ghost-border-color: transparent; --button-ghost-border-style: solid; --button-ghost-border-width: 0.0625rem; --button-ghost-text-transform: uppercase; --button-ghost-focus-inset-shadow-length: 0 0 0 100vmax; --button-ghost-tiny-padding: 0.3125rem 0.625rem; --button-ghost-small-padding: 0.4375rem 0.875rem; --button-ghost-medium-padding: 0.6875rem 1.125rem; --button-ghost-large-padding: 0.8125rem 1.125rem; --button-ghost-giant-padding: 0.9375rem 1.375rem; --button-ghost-basic-text-color: var(--color-basic-600); --button-ghost-basic-focus-background-color: var(--color-basic-transparent-200); --button-ghost-basic-focus-border-color: var(--color-basic-transparent-500); --button-ghost-basic-focus-text-color: var(--color-basic-600); --button-ghost-basic-hover-background-color: var(--color-basic-transparent-100); --button-ghost-basic-hover-border-color: transparent; --button-ghost-basic-hover-text-color: var(--color-basic-600); --button-ghost-basic-active-background-color: var(--color-basic-transparent-200); --button-ghost-basic-active-border-color: transparent; --button-ghost-basic-active-text-color: var(--color-basic-600); --button-ghost-basic-disabled-background-color: var(--color-basic-transparent-200); --button-ghost-basic-disabled-border-color: transparent; --button-ghost-basic-disabled-text-color: var(--text-disabled-color); --button-ghost-primary-text-color: var(--text-primary-color); --button-ghost-primary-focus-background-color: var(--color-basic-transparent-200); --button-ghost-primary-focus-border-color: var(--color-basic-transparent-500); --button-ghost-primary-focus-text-color: var(--text-primary-color); --button-ghost-primary-hover-background-color: var(--color-basic-transparent-100); --button-ghost-primary-hover-border-color: transparent; --button-ghost-primary-hover-text-color: var(--text-primary-color); --button-ghost-primary-active-background-color: var(--color-basic-transparent-200); --button-ghost-primary-active-border-color: transparent; --button-ghost-primary-active-text-color: var(--text-primary-color); --button-ghost-primary-disabled-background-color: var(--color-basic-transparent-200); --button-ghost-primary-disabled-border-color: transparent; --button-ghost-primary-disabled-text-color: var(--text-disabled-color); --button-ghost-success-text-color: var(--text-success-color); --button-ghost-success-focus-background-color: var(--color-basic-transparent-200); --button-ghost-success-focus-border-color: var(--color-basic-transparent-500); --button-ghost-success-focus-text-color: var(--text-success-color); --button-ghost-success-hover-background-color: var(--color-basic-transparent-100); --button-ghost-success-hover-border-color: transparent; --button-ghost-success-hover-text-color: var(--text-success-color); --button-ghost-success-active-background-color: var(--color-basic-transparent-200); --button-ghost-success-active-border-color: transparent; --button-ghost-success-active-text-color: var(--text-success-color); --button-ghost-success-disabled-background-color: var(--color-basic-transparent-200); --button-ghost-success-disabled-border-color: transparent; --button-ghost-success-disabled-text-color: var(--text-disabled-color); --button-ghost-info-text-color: var(--text-info-color); --button-ghost-info-focus-background-color: var(--color-basic-transparent-200); --button-ghost-info-focus-border-color: var(--color-basic-transparent-500); --button-ghost-info-focus-text-color: var(--text-info-color); --button-ghost-info-hover-background-color: var(--color-basic-transparent-100); --button-ghost-info-hover-border-color: transparent; --button-ghost-info-hover-text-color: var(--text-info-color); --button-ghost-info-active-background-color: var(--color-basic-transparent-200); --button-ghost-info-active-border-color: transparent; --button-ghost-info-active-text-color: var(--text-info-color); --button-ghost-info-disabled-background-color: var(--color-basic-transparent-200); --button-ghost-info-disabled-border-color: transparent; --button-ghost-info-disabled-text-color: var(--text-disabled-color); --button-ghost-warning-text-color: var(--text-warning-color); --button-ghost-warning-focus-background-color: var(--color-basic-transparent-200); --button-ghost-warning-focus-border-color: var(--color-basic-transparent-500); --button-ghost-warning-focus-text-color: var(--text-warning-color); --button-ghost-warning-hover-background-color: var(--color-basic-transparent-100); --button-ghost-warning-hover-border-color: transparent; --button-ghost-warning-hover-text-color: var(--text-warning-color); --button-ghost-warning-active-background-color: var(--color-basic-transparent-200); --button-ghost-warning-active-border-color: transparent; --button-ghost-warning-active-text-color: var(--text-warning-color); --button-ghost-warning-disabled-background-color: var(--color-basic-transparent-200); --button-ghost-warning-disabled-border-color: transparent; --button-ghost-warning-disabled-text-color: var(--text-disabled-color); --button-ghost-danger-text-color: var(--text-danger-color); --button-ghost-danger-focus-background-color: var(--color-basic-transparent-200); --button-ghost-danger-focus-border-color: var(--color-basic-transparent-500); --button-ghost-danger-focus-text-color: var(--text-danger-color); --button-ghost-danger-hover-background-color: var(--color-basic-transparent-100); --button-ghost-danger-hover-border-color: transparent; --button-ghost-danger-hover-text-color: var(--text-danger-color); --button-ghost-danger-active-background-color: var(--color-basic-transparent-200); --button-ghost-danger-active-border-color: transparent; --button-ghost-danger-active-text-color: var(--text-danger-color); --button-ghost-danger-disabled-background-color: var(--color-basic-transparent-200); --button-ghost-danger-disabled-border-color: transparent; --button-ghost-danger-disabled-text-color: var(--text-disabled-color); --button-ghost-control-text-color: var(--color-basic-100); --button-ghost-control-focus-background-color: var(--color-basic-transparent-200); --button-ghost-control-focus-border-color: var(--color-basic-transparent-500); --button-ghost-control-focus-text-color: var(--color-basic-100); --button-ghost-control-hover-background-color: var(--color-basic-transparent-100); --button-ghost-control-hover-border-color: transparent; --button-ghost-control-hover-text-color: var(--color-basic-100); --button-ghost-control-active-background-color: var(--color-basic-transparent-200); --button-ghost-control-active-border-color: transparent; --button-ghost-control-active-text-color: var(--color-basic-100); --button-ghost-control-disabled-background-color: var(--color-basic-transparent-200); --button-ghost-control-disabled-border-color: transparent; --button-ghost-control-disabled-text-color: var(--text-disabled-color); --button-hero-border-color: transparent; --button-hero-border-style: solid; --button-hero-border-width: 0; --button-hero-text-transform: uppercase; --button-hero-tiny-padding: 0.375rem 0.6875rem; --button-hero-small-padding: 0.5rem 0.9375rem; --button-hero-medium-padding: 0.75rem 1.1875rem; --button-hero-large-padding: 0.875rem 1.1875rem; --button-hero-giant-padding: 1rem 1.4375rem; --button-hero-shadow: 0 0 transparent; --button-hero-text-shadow: var(--shadow); --button-hero-bevel-size: 0 0 0 0; --button-hero-glow-size: 0 0 0 0; --button-hero-outline-color: var(--outline-color); --button-hero-outline-width: var(--outline-width); --button-hero-basic-text-color: var(--color-basic-600); --button-hero-basic-bevel-color: var(--color-basic-600); --button-hero-basic-glow-color: var(--color-basic-700); --button-hero-basic-left-background-color: var(--color-basic-200); --button-hero-basic-right-background-color: var(--color-basic-default); --button-hero-basic-focus-left-background-color: var(--color-basic-300); --button-hero-basic-focus-right-background-color: var(--color-basic-focus); --button-hero-basic-hover-left-background-color: var(--color-basic-100); --button-hero-basic-hover-right-background-color: var(--color-basic-hover); --button-hero-basic-active-left-background-color: var(--color-basic-300); --button-hero-basic-active-right-background-color: var(--color-basic-active); --button-hero-basic-disabled-background-color: var(--color-basic-disabled); --button-hero-basic-disabled-text-color: var(--text-disabled-color); --button-hero-primary-text-color: var(--text-control-color); --button-hero-primary-bevel-color: var(--color-primary-600); --button-hero-primary-glow-color: var(--color-primary-700); --button-hero-primary-left-background-color: var(--color-primary-400); --button-hero-primary-right-background-color: var(--color-primary-default); --button-hero-primary-focus-left-background-color: var(--color-primary-500); --button-hero-primary-focus-right-background-color: var(--color-primary-focus); --button-hero-primary-hover-left-background-color: var(--color-primary-300); --button-hero-primary-hover-right-background-color: var(--color-primary-hover); --button-hero-primary-active-left-background-color: var(--color-primary-500); --button-hero-primary-active-right-background-color: var(--color-primary-active); --button-hero-primary-disabled-background-color: var(--color-primary-disabled); --button-hero-primary-disabled-text-color: var(--text-disabled-color); --button-hero-success-text-color: var(--text-control-color); --button-hero-success-bevel-color: var(--color-success-600); --button-hero-success-glow-color: var(--color-success-700); --button-hero-success-left-background-color: var(--color-success-400); --button-hero-success-right-background-color: var(--color-success-default); --button-hero-success-focus-left-background-color: var(--color-success-500); --button-hero-success-focus-right-background-color: var(--color-success-focus); --button-hero-success-hover-left-background-color: var(--color-success-300); --button-hero-success-hover-right-background-color: var(--color-success-hover); --button-hero-success-active-left-background-color: var(--color-success-500); --button-hero-success-active-right-background-color: var(--color-success-active); --button-hero-success-disabled-background-color: var(--color-success-disabled); --button-hero-success-disabled-text-color: var(--text-disabled-color); --button-hero-info-text-color: var(--text-control-color); --button-hero-info-bevel-color: var(--color-info-600); --button-hero-info-glow-color: var(--color-info-700); --button-hero-info-left-background-color: var(--color-info-400); --button-hero-info-right-background-color: var(--color-info-default); --button-hero-info-focus-left-background-color: var(--color-info-500); --button-hero-info-focus-right-background-color: var(--color-info-focus); --button-hero-info-hover-left-background-color: var(--color-info-300); --button-hero-info-hover-right-background-color: var(--color-info-hover); --button-hero-info-active-left-background-color: var(--color-info-500); --button-hero-info-active-right-background-color: var(--color-info-active); --button-hero-info-disabled-background-color: var(--color-info-disabled); --button-hero-info-disabled-text-color: var(--text-disabled-color); --button-hero-warning-text-color: var(--text-control-color); --button-hero-warning-bevel-color: var(--color-warning-600); --button-hero-warning-glow-color: var(--color-warning-700); --button-hero-warning-left-background-color: var(--color-warning-400); --button-hero-warning-right-background-color: var(--color-warning-default); --button-hero-warning-focus-left-background-color: var(--color-warning-500); --button-hero-warning-focus-right-background-color: var(--color-warning-focus); --button-hero-warning-hover-left-background-color: var(--color-warning-300); --button-hero-warning-hover-right-background-color: var(--color-warning-hover); --button-hero-warning-active-left-background-color: var(--color-warning-500); --button-hero-warning-active-right-background-color: var(--color-warning-active); --button-hero-warning-disabled-background-color: var(--color-warning-disabled); --button-hero-warning-disabled-text-color: var(--text-disabled-color); --button-hero-danger-text-color: var(--text-control-color); --button-hero-danger-bevel-color: var(--color-danger-600); --button-hero-danger-glow-color: var(--color-danger-700); --button-hero-danger-left-background-color: var(--color-danger-400); --button-hero-danger-right-background-color: var(--color-danger-default); --button-hero-danger-focus-left-background-color: var(--color-danger-500); --button-hero-danger-focus-right-background-color: var(--color-danger-focus); --button-hero-danger-hover-left-background-color: var(--color-danger-300); --button-hero-danger-hover-right-background-color: var(--color-danger-hover); --button-hero-danger-active-left-background-color: var(--color-danger-500); --button-hero-danger-active-right-background-color: var(--color-danger-active); --button-hero-danger-disabled-background-color: var(--color-danger-disabled); --button-hero-danger-disabled-text-color: var(--text-disabled-color); --button-hero-control-text-color: var(--color-basic-800); --button-hero-control-bevel-color: var(--color-basic-600); --button-hero-control-glow-color: var(--color-basic-700); --button-hero-control-left-background-color: var(--color-control-default); --button-hero-control-right-background-color: var(--color-control-default); --button-hero-control-focus-left-background-color: var(--color-basic-200); --button-hero-control-focus-right-background-color: var(--color-control-focus); --button-hero-control-hover-left-background-color: var(--color-basic-100); --button-hero-control-hover-right-background-color: var(--color-control-hover); --button-hero-control-active-left-background-color: var(--color-basic-200); --button-hero-control-active-right-background-color: var(--color-control-active); --button-hero-control-disabled-background-color: var(--color-basic-transparent-300); --button-hero-control-disabled-text-color: var(--text-disabled-color); --button-group-filled-button-basic-text-color: var(--text-hint-color); --button-group-filled-button-primary-text-color: var(--button-filled-primary-text-color); --button-group-filled-button-success-text-color: var(--button-filled-success-text-color); --button-group-filled-button-info-text-color: var(--button-filled-info-text-color); --button-group-filled-button-warning-text-color: var(--button-filled-warning-text-color); --button-group-filled-button-danger-text-color: var(--button-filled-danger-text-color); --button-group-filled-button-control-text-color: var(--button-filled-control-text-color); --button-group-filled-basic-divider-color: var(--color-basic-focus-border); --button-group-filled-primary-divider-color: var(--color-primary-focus); --button-group-filled-success-divider-color: var(--color-success-focus); --button-group-filled-info-divider-color: var(--color-info-focus); --button-group-filled-warning-divider-color: var(--color-warning-focus); --button-group-filled-danger-divider-color: var(--color-danger-focus); --button-group-filled-control-divider-color: var(--color-control-focus); --button-group-ghost-divider-color: var(--color-basic-focus-border); --icon-button-filled-tiny-padding: 0.4375rem 0.3125rem; --icon-button-filled-small-padding: 0.5625rem 0.4375rem; --icon-button-filled-medium-padding: 0.6875rem 0.5625rem; --icon-button-filled-large-padding: 0.8125rem 0.6875rem; --icon-button-filled-giant-padding: 1.0625rem 0.9375rem; --icon-button-outline-tiny-padding: 0.4375rem 0.3125rem; --icon-button-outline-small-padding: 0.5625rem 0.4375rem; --icon-button-outline-medium-padding: 0.6875rem 0.5625rem; --icon-button-outline-large-padding: 0.8125rem 0.6875rem; --icon-button-outline-giant-padding: 1.0625rem 0.9375rem; --icon-button-ghost-tiny-padding: 0.4375rem 0.3125rem; --icon-button-ghost-small-padding: 0.5625rem 0.4375rem; --icon-button-ghost-medium-padding: 0.6875rem 0.5625rem; --icon-button-ghost-large-padding: 0.8125rem 0.6875rem; --icon-button-ghost-giant-padding: 1.0625rem 0.9375rem; --icon-button-hero-tiny-padding: 0.5rem 0.375rem; --icon-button-hero-small-padding: 0.5625rem 0.5rem; --icon-button-hero-medium-padding: 0.75rem 0.5625rem; --icon-button-hero-large-padding: 0.875rem 0.6875rem; --icon-button-hero-giant-padding: 1.0625rem 1rem; --input-border-style: solid; --input-border-width: 1px; --input-outline-color: var(--outline-color); --input-outline-width: var(--outline-width); --input-placeholder-text-font-family: var(--text-paragraph-font-family); --input-text-font-family: var(--text-subtitle-font-family); --input-basic-text-color: var(--text-basic-color); --input-basic-placeholder-text-color: var(--text-hint-color); --input-basic-background-color: var(--background-basic-color-2); --input-basic-border-color: var(--border-basic-color-4); --input-basic-focus-background-color: var(--background-basic-color-1); --input-basic-focus-border-color: var(--color-primary-default-border); --input-basic-hover-background-color: var(--background-basic-color-3); --input-basic-hover-border-color: var(--border-basic-color-4); --input-basic-focus-and-hover-background-color: var(--input-basic-hover-background-color); --input-basic-focus-and-hover-border-color: var(--input-basic-hover-border-color); --input-basic-disabled-background-color: var(--background-basic-color-2); --input-basic-disabled-border-color: var(--border-basic-color-4); --input-basic-disabled-text-color: var(--text-disabled-color); --input-basic-disabled-placeholder-text-color: var(--text-disabled-color); --input-primary-text-color: var(--text-basic-color); --input-primary-placeholder-text-color: var(--text-hint-color); --input-primary-background-color: var(--background-basic-color-2); --input-primary-border-color: var(--color-primary-default); --input-primary-focus-background-color: var(--background-basic-color-1); --input-primary-focus-border-color: var(--color-primary-focus-border); --input-primary-hover-background-color: var(--background-basic-color-3); --input-primary-hover-border-color: var(--color-primary-hover-border); --input-primary-focus-and-hover-background-color: var(--input-primary-hover-background-color); --input-primary-focus-and-hover-border-color: var(--input-primary-hover-border-color); --input-primary-disabled-background-color: var(--background-basic-color-2); --input-primary-disabled-border-color: var(--border-basic-color-4); --input-primary-disabled-text-color: var(--text-disabled-color); --input-primary-disabled-placeholder-text-color: var(--text-disabled-color); --input-success-text-color: var(--text-basic-color); --input-success-placeholder-text-color: var(--text-hint-color); --input-success-background-color: var(--background-basic-color-2); --input-success-border-color: var(--color-success-default); --input-success-focus-background-color: var(--background-basic-color-1); --input-success-focus-border-color: var(--color-success-focus-border); --input-success-hover-background-color: var(--background-basic-color-3); --input-success-hover-border-color: var(--color-success-hover-border); --input-success-focus-and-hover-background-color: var(--input-success-hover-background-color); --input-success-focus-and-hover-border-color: var(--input-success-hover-border-color); --input-success-disabled-background-color: var(--background-basic-color-2); --input-success-disabled-border-color: var(--border-basic-color-4); --input-success-disabled-text-color: var(--text-disabled-color); --input-success-disabled-placeholder-text-color: var(--text-disabled-color); --input-info-text-color: var(--text-basic-color); --input-info-placeholder-text-color: var(--text-hint-color); --input-info-background-color: var(--background-basic-color-2); --input-info-border-color: var(--color-info-default); --input-info-focus-background-color: var(--background-basic-color-1); --input-info-focus-border-color: var(--color-info-focus-border); --input-info-hover-background-color: var(--background-basic-color-3); --input-info-hover-border-color: var(--color-info-hover-border); --input-info-focus-and-hover-background-color: var(--input-info-hover-background-color); --input-info-focus-and-hover-border-color: var(--input-info-hover-border-color); --input-info-disabled-background-color: var(--background-basic-color-2); --input-info-disabled-border-color: var(--border-basic-color-4); --input-info-disabled-text-color: var(--text-disabled-color); --input-info-disabled-placeholder-text-color: var(--text-disabled-color); --input-warning-text-color: var(--text-basic-color); --input-warning-placeholder-text-color: var(--text-hint-color); --input-warning-background-color: var(--background-basic-color-2); --input-warning-border-color: var(--color-warning-default); --input-warning-focus-background-color: var(--background-basic-color-1); --input-warning-focus-border-color: var(--color-warning-focus-border); --input-warning-hover-background-color: var(--background-basic-color-3); --input-warning-hover-border-color: var(--color-warning-hover-border); --input-warning-focus-and-hover-background-color: var(--input-warning-hover-background-color); --input-warning-focus-and-hover-border-color: var(--input-warning-hover-border-color); --input-warning-disabled-background-color: var(--background-basic-color-2); --input-warning-disabled-border-color: var(--border-basic-color-4); --input-warning-disabled-text-color: var(--text-disabled-color); --input-warning-disabled-placeholder-text-color: var(--text-disabled-color); --input-danger-text-color: var(--text-basic-color); --input-danger-placeholder-text-color: var(--text-hint-color); --input-danger-background-color: var(--background-basic-color-2); --input-danger-border-color: var(--color-danger-default); --input-danger-focus-background-color: var(--background-basic-color-1); --input-danger-focus-border-color: var(--color-danger-focus-border); --input-danger-hover-background-color: var(--background-basic-color-3); --input-danger-hover-border-color: var(--color-danger-hover-border); --input-danger-focus-and-hover-background-color: var(--input-danger-hover-background-color); --input-danger-focus-and-hover-border-color: var(--input-danger-hover-border-color); --input-danger-disabled-background-color: var(--background-basic-color-2); --input-danger-disabled-border-color: var(--border-basic-color-4); --input-danger-disabled-text-color: var(--text-disabled-color); --input-danger-disabled-placeholder-text-color: var(--text-disabled-color); --input-control-text-color: var(--text-control-color); --input-control-placeholder-text-color: var(--text-control-color); --input-control-background-color: var(--color-basic-control-transparent-300); --input-control-border-color: var(--color-basic-control-transparent-500); --input-control-focus-background-color: var(--color-basic-control-transparent-500); --input-control-focus-border-color: var(--color-control-transparent-focus-border); --input-control-hover-background-color: var(--color-basic-control-transparent-400); --input-control-hover-border-color: var(--color-control-transparent-hover-border); --input-control-focus-and-hover-background-color: var(--input-control-hover-background-color); --input-control-focus-and-hover-border-color: var(--input-control-hover-border-color); --input-control-disabled-background-color: var(--color-control-transparent-disabled); --input-control-disabled-border-color: var(--color-control-transparent-disabled-border); --input-control-disabled-text-color: var(--text-control-color); --input-control-disabled-placeholder-text-color: var(--text-control-color); --input-rectangle-border-radius: var(--border-radius); --input-semi-round-border-radius: 0.75rem; --input-round-border-radius: 1.5rem; --input-tiny-text-font-size: var(--text-caption-2-font-size); --input-tiny-text-font-weight: var(--text-caption-2-font-weight); --input-tiny-text-line-height: var(--text-caption-2-line-height); --input-tiny-placeholder-text-font-size: var(--text-paragraph-font-size); --input-tiny-placeholder-text-font-weight: var(--text-paragraph-font-weight); --input-tiny-placeholder-text-line-height: var(--text-paragraph-line-height); --input-tiny-padding: 0.1875rem 1rem; --input-tiny-max-width: 20rem; --input-small-text-font-size: var(--text-subtitle-2-font-size); --input-small-text-font-weight: var(--text-subtitle-2-font-weight); --input-small-text-line-height: var(--text-subtitle-2-line-height); --input-small-placeholder-text-font-size: var(--text-paragraph-font-size); --input-small-placeholder-text-font-weight: var(--text-paragraph-font-weight); --input-small-placeholder-text-line-height: var(--text-paragraph-line-height); --input-small-padding: 0.1875rem 1rem; --input-small-max-width: 20rem; --input-medium-text-font-size: var(--text-subtitle-font-size); --input-medium-text-font-weight: var(--text-subtitle-font-weight); --input-medium-text-line-height: var(--text-subtitle-line-height); --input-medium-placeholder-text-font-size: var(--text-paragraph-font-size); --input-medium-placeholder-text-font-weight: var(--text-paragraph-font-weight); --input-medium-placeholder-text-line-height: var(--text-paragraph-line-height); --input-medium-padding: 0.4375rem 1rem; --input-medium-max-width: 20rem; --input-large-text-font-size: var(--text-subtitle-font-size); --input-large-text-font-weight: var(--text-subtitle-font-weight); --input-large-text-line-height: var(--text-subtitle-line-height); --input-large-placeholder-text-font-size: var(--text-paragraph-font-size); --input-large-placeholder-text-font-weight: var(--text-paragraph-font-weight); --input-large-placeholder-text-line-height: var(--text-paragraph-line-height); --input-large-padding: 0.6875rem 1rem; --input-large-max-width: 30rem; --input-giant-text-font-size: var(--text-heading-6-font-size); --input-giant-text-font-weight: var(--text-heading-6-font-weight); --input-giant-text-line-height: var(--text-heading-6-line-height); --input-giant-placeholder-text-font-size: var(--text-paragraph-font-size); --input-giant-placeholder-text-font-weight: var(--text-paragraph-font-weight); --input-giant-placeholder-text-line-height: var(--text-paragraph-line-height); --input-giant-padding: 0.9375rem 1rem; --input-giant-max-width: 30rem; --checkbox-height: 1.25rem; --checkbox-width: 1.25rem; --checkbox-border-style: solid; --checkbox-border-width: 1px; --checkbox-border-radius: 3px; --checkbox-outline-width: var(--outline-width); --checkbox-outline-color: var(--outline-color); --checkbox-text-font-family: var(--text-subtitle-2-font-family); --checkbox-text-font-size: var(--text-subtitle-2-font-size); --checkbox-text-font-weight: var(--text-subtitle-2-font-weight); --checkbox-text-line-height: var(--text-subtitle-2-line-height); --checkbox-text-space: 0.6875rem; --checkbox-padding: 0; --checkbox-focus-inset-shadow-length: 0 0 0 100vmax; --checkbox-basic-text-color: var(--text-basic-color); --checkbox-basic-background-color: var(--color-basic-transparent-default); --checkbox-basic-border-color: var(--color-basic-transparent-default-border); --checkbox-basic-checked-background-color: var(--color-primary-default); --checkbox-basic-checked-border-color: var(--color-primary-default-border); --checkbox-basic-checked-checkmark-color: var(--text-control-color); --checkbox-basic-indeterminate-background-color: var(--color-primary-default); --checkbox-basic-indeterminate-border-color: var(--color-primary-default-border); --checkbox-basic-indeterminate-checkmark-color: var(--text-control-color); --checkbox-basic-focus-background-color: var(--color-basic-transparent-focus); --checkbox-basic-focus-border-color: var(--color-basic-transparent-focus-border); --checkbox-basic-focus-checked-background-color: var(--color-primary-focus); --checkbox-basic-focus-checked-border-color: var(--color-primary-focus-border); --checkbox-basic-hover-background-color: var(--color-primary-transparent-hover); --checkbox-basic-hover-border-color: var(--color-primary-transparent-hover-border); --checkbox-basic-hover-checked-background-color: var(--color-primary-hover); --checkbox-basic-hover-checked-border-color: var(--color-primary-hover-border); --checkbox-basic-active-background-color: var(--color-basic-transparent-active); --checkbox-basic-active-border-color: var(--color-basic-transparent-active-border); --checkbox-basic-active-checked-background-color: var(--color-primary-active); --checkbox-basic-active-checked-border-color: var(--color-primary-active-border); --checkbox-basic-disabled-background-color: var(--color-basic-transparent-disabled); --checkbox-basic-disabled-border-color: var(--color-basic-transparent-disabled-border); --checkbox-basic-disabled-checkmark-color: var(--text-control-color); --checkbox-basic-disabled-text-color: var(--text-disabled-color); --checkbox-basic-disabled-checked-background-color: var(--color-basic-transparent-600); --checkbox-basic-disabled-checked-border-color: var(--color-basic-transparent-600); --checkbox-primary-text-color: var(--text-basic-color); --checkbox-primary-background-color: var(--color-primary-transparent-default); --checkbox-primary-border-color: var(--color-primary-transparent-default-border); --checkbox-primary-checked-background-color: var(--color-primary-default); --checkbox-primary-checked-border-color: var(--color-primary-default-border); --checkbox-primary-checked-checkmark-color: var(--text-control-color); --checkbox-primary-indeterminate-background-color: var(--color-primary-default); --checkbox-primary-indeterminate-border-color: var(--color-primary-default-border); --checkbox-primary-indeterminate-checkmark-color: var(--text-control-color); --checkbox-primary-focus-background-color: var(--color-primary-transparent-focus); --checkbox-primary-focus-border-color: var(--color-primary-transparent-focus-border); --checkbox-primary-focus-checked-background-color: var(--color-primary-focus); --checkbox-primary-focus-checked-border-color: var(--color-primary-focus-border); --checkbox-primary-hover-background-color: var(--color-primary-transparent-hover); --checkbox-primary-hover-border-color: var(--color-primary-transparent-hover-border); --checkbox-primary-hover-checked-background-color: var(--color-primary-hover); --checkbox-primary-hover-checked-border-color: var(--color-primary-hover-border); --checkbox-primary-active-background-color: var(--color-primary-transparent-active); --checkbox-primary-active-border-color: var(--color-primary-transparent-active-border); --checkbox-primary-active-checked-background-color: var(--color-primary-active); --checkbox-primary-active-checked-border-color: var(--color-primary-active-border); --checkbox-primary-disabled-background-color: var(--color-basic-transparent-disabled); --checkbox-primary-disabled-border-color: var(--color-basic-transparent-disabled-border); --checkbox-primary-disabled-checkmark-color: var(--text-control-color); --checkbox-primary-disabled-text-color: var(--text-disabled-color); --checkbox-primary-disabled-checked-background-color: var(--color-basic-transparent-600); --checkbox-primary-disabled-checked-border-color: var(--color-basic-transparent-600); --checkbox-success-text-color: var(--text-basic-color); --checkbox-success-background-color: var(--color-success-transparent-default); --checkbox-success-border-color: var(--color-success-transparent-default-border); --checkbox-success-checked-background-color: var(--color-success-default); --checkbox-success-checked-border-color: var(--color-success-default-border); --checkbox-success-checked-checkmark-color: var(--text-control-color); --checkbox-success-indeterminate-background-color: var(--color-success-default); --checkbox-success-indeterminate-border-color: var(--color-success-default-border); --checkbox-success-indeterminate-checkmark-color: var(--text-control-color); --checkbox-success-focus-background-color: var(--color-success-transparent-focus); --checkbox-success-focus-border-color: var(--color-success-transparent-focus-border); --checkbox-success-focus-checked-background-color: var(--color-success-focus); --checkbox-success-focus-checked-border-color: var(--color-success-focus-border); --checkbox-success-hover-background-color: var(--color-success-transparent-hover); --checkbox-success-hover-border-color: var(--color-success-transparent-hover-border); --checkbox-success-hover-checked-background-color: var(--color-success-hover); --checkbox-success-hover-checked-border-color: var(--color-success-hover-border); --checkbox-success-active-background-color: var(--color-success-transparent-active); --checkbox-success-active-border-color: var(--color-success-transparent-active-border); --checkbox-success-active-checked-background-color: var(--color-success-active); --checkbox-success-active-checked-border-color: var(--color-success-active-border); --checkbox-success-disabled-background-color: var(--color-basic-transparent-disabled); --checkbox-success-disabled-border-color: var(--color-basic-transparent-disabled-border); --checkbox-success-disabled-checkmark-color: var(--text-control-color); --checkbox-success-disabled-text-color: var(--text-disabled-color); --checkbox-success-disabled-checked-background-color: var(--color-basic-transparent-600); --checkbox-success-disabled-checked-border-color: var(--color-basic-transparent-600); --checkbox-info-text-color: var(--text-basic-color); --checkbox-info-background-color: var(--color-info-transparent-default); --checkbox-info-border-color: var(--color-info-transparent-default-border); --checkbox-info-checked-background-color: var(--color-info-default); --checkbox-info-checked-border-color: var(--color-info-default-border); --checkbox-info-checked-checkmark-color: var(--text-control-color); --checkbox-info-indeterminate-background-color: var(--color-info-default); --checkbox-info-indeterminate-border-color: var(--color-info-default-border); --checkbox-info-indeterminate-checkmark-color: var(--text-control-color); --checkbox-info-focus-background-color: var(--color-info-transparent-focus); --checkbox-info-focus-border-color: var(--color-info-transparent-focus-border); --checkbox-info-focus-checked-background-color: var(--color-info-focus); --checkbox-info-focus-checked-border-color: var(--color-info-focus-border); --checkbox-info-hover-background-color: var(--color-info-transparent-hover); --checkbox-info-hover-border-color: var(--color-info-transparent-hover-border); --checkbox-info-hover-checked-background-color: var(--color-info-hover); --checkbox-info-hover-checked-border-color: var(--color-info-hover-border); --checkbox-info-active-background-color: var(--color-info-transparent-active); --checkbox-info-active-border-color: var(--color-info-transparent-active-border); --checkbox-info-active-checked-background-color: var(--color-info-active); --checkbox-info-active-checked-border-color: var(--color-info-active-border); --checkbox-info-disabled-background-color: var(--color-basic-transparent-disabled); --checkbox-info-disabled-border-color: var(--color-basic-transparent-disabled-border); --checkbox-info-disabled-checkmark-color: var(--text-control-color); --checkbox-info-disabled-text-color: var(--text-disabled-color); --checkbox-info-disabled-checked-background-color: var(--color-basic-transparent-600); --checkbox-info-disabled-checked-border-color: var(--color-basic-transparent-600); --checkbox-warning-text-color: var(--text-basic-color); --checkbox-warning-background-color: var(--color-warning-transparent-default); --checkbox-warning-border-color: var(--color-warning-transparent-default-border); --checkbox-warning-checked-background-color: var(--color-warning-default); --checkbox-warning-checked-border-color: var(--color-warning-default-border); --checkbox-warning-checked-checkmark-color: var(--text-control-color); --checkbox-warning-indeterminate-background-color: var(--color-warning-default); --checkbox-warning-indeterminate-border-color: var(--color-warning-default-border); --checkbox-warning-indeterminate-checkmark-color: var(--text-control-color); --checkbox-warning-focus-background-color: var(--color-warning-transparent-focus); --checkbox-warning-focus-border-color: var(--color-warning-transparent-focus-border); --checkbox-warning-focus-checked-background-color: var(--color-warning-focus); --checkbox-warning-focus-checked-border-color: var(--color-warning-focus-border); --checkbox-warning-hover-background-color: var(--color-warning-transparent-hover); --checkbox-warning-hover-border-color: var(--color-warning-transparent-hover-border); --checkbox-warning-hover-checked-background-color: var(--color-warning-hover); --checkbox-warning-hover-checked-border-color: var(--color-warning-hover-border); --checkbox-warning-active-background-color: var(--color-warning-transparent-active); --checkbox-warning-active-border-color: var(--color-warning-transparent-active-border); --checkbox-warning-active-checked-background-color: var(--color-warning-active); --checkbox-warning-active-checked-border-color: var(--color-warning-active-border); --checkbox-warning-disabled-background-color: var(--color-basic-transparent-disabled); --checkbox-warning-disabled-border-color: var(--color-basic-transparent-disabled-border); --checkbox-warning-disabled-checkmark-color: var(--text-control-color); --checkbox-warning-disabled-text-color: var(--text-disabled-color); --checkbox-warning-disabled-checked-background-color: var(--color-basic-transparent-600); --checkbox-warning-disabled-checked-border-color: var(--color-basic-transparent-600); --checkbox-danger-text-color: var(--text-basic-color); --checkbox-danger-background-color: var(--color-danger-transparent-default); --checkbox-danger-border-color: var(--color-danger-transparent-default-border); --checkbox-danger-checked-background-color: var(--color-danger-default); --checkbox-danger-checked-border-color: var(--color-danger-default-border); --checkbox-danger-checked-checkmark-color: var(--text-control-color); --checkbox-danger-indeterminate-background-color: var(--color-danger-default); --checkbox-danger-indeterminate-border-color: var(--color-danger-default-border); --checkbox-danger-indeterminate-checkmark-color: var(--text-control-color); --checkbox-danger-focus-background-color: var(--color-danger-transparent-focus); --checkbox-danger-focus-border-color: var(--color-danger-transparent-focus-border); --checkbox-danger-focus-checked-background-color: var(--color-danger-focus); --checkbox-danger-focus-checked-border-color: var(--color-danger-focus-border); --checkbox-danger-hover-background-color: var(--color-danger-transparent-hover); --checkbox-danger-hover-border-color: var(--color-danger-transparent-hover-border); --checkbox-danger-hover-checked-background-color: var(--color-danger-hover); --checkbox-danger-hover-checked-border-color: var(--color-danger-hover-border); --checkbox-danger-active-background-color: var(--color-danger-transparent-active); --checkbox-danger-active-border-color: var(--color-danger-transparent-active-border); --checkbox-danger-active-checked-background-color: var(--color-danger-active); --checkbox-danger-active-checked-border-color: var(--color-danger-active-border); --checkbox-danger-disabled-background-color: var(--color-basic-transparent-disabled); --checkbox-danger-disabled-border-color: var(--color-basic-transparent-disabled-border); --checkbox-danger-disabled-checkmark-color: var(--text-control-color); --checkbox-danger-disabled-text-color: var(--text-disabled-color); --checkbox-danger-disabled-checked-background-color: var(--color-basic-transparent-600); --checkbox-danger-disabled-checked-border-color: var(--color-basic-transparent-600); --checkbox-control-text-color: var(--text-control-color); --checkbox-control-background-color: var(--color-control-transparent-default); --checkbox-control-border-color: var(--color-control-transparent-default-border); --checkbox-control-checked-background-color: var(--color-control-default); --checkbox-control-checked-border-color: var(--color-control-default-border); --checkbox-control-checked-checkmark-color: var(--color-basic-800); --checkbox-control-indeterminate-background-color: var(--color-control-default); --checkbox-control-indeterminate-border-color: var(--color-control-default-border); --checkbox-control-indeterminate-checkmark-color: var(--color-basic-800); --checkbox-control-focus-background-color: var(--color-control-transparent-focus); --checkbox-control-focus-border-color: var(--color-control-transparent-focus-border); --checkbox-control-focus-checked-background-color: var(--color-control-focus); --checkbox-control-focus-checked-border-color: var(--color-control-focus-border); --checkbox-control-hover-background-color: var(--color-control-transparent-hover); --checkbox-control-hover-border-color: var(--color-control-transparent-hover-border); --checkbox-control-hover-checked-background-color: var(--color-control-hover); --checkbox-control-hover-checked-border-color: var(--color-control-hover-border); --checkbox-control-active-background-color: var(--color-control-transparent-active); --checkbox-control-active-border-color: var(--color-control-transparent-active-border); --checkbox-control-active-checked-background-color: var(--color-control-active); --checkbox-control-active-checked-border-color: var(--color-control-active-border); --checkbox-control-disabled-background-color: var(--color-control-transparent-disabled); --checkbox-control-disabled-border-color: var(--color-control-transparent-disabled-border); --checkbox-control-disabled-checkmark-color: var(--text-control-color); --checkbox-control-disabled-text-color: var(--text-control-color); --checkbox-control-disabled-checked-background-color: var(--color-basic-transparent-600); --checkbox-control-disabled-checked-border-color: var(--color-basic-transparent-600); --badge-dot-mode-border-radius: 0.5rem; --badge-dot-mode-padding: 0.3rem; --badge-border-radius: var(--border-radius); --badge-text-font-family: var(--text-button-font-family); --badge-text-font-size: var(--text-button-tiny-font-size); --badge-text-font-weight: var(--text-button-font-weight); --badge-text-line-height: var(--text-button-tiny-line-height); --badge-padding: 0.25rem 0.4rem; --badge-basic-background-color: var(--background-basic-color-2); --badge-basic-text-color: var(--text-basic-color); --badge-primary-background-color: var(--color-primary-default); --badge-primary-text-color: var(--text-control-color); --badge-success-background-color: var(--color-success-default); --badge-success-text-color: var(--text-control-color); --badge-info-background-color: var(--color-info-default); --badge-info-text-color: var(--text-control-color); --badge-warning-background-color: var(--color-warning-default); --badge-warning-text-color: var(--text-control-color); --badge-danger-background-color: var(--color-danger-default); --badge-danger-text-color: var(--text-control-color); --badge-control-background-color: var(--color-control-default); --badge-control-text-color: var(--color-basic-800); --progress-bar-animation-duration: 400ms; --progress-bar-border-radius: var(--border-radius); --progress-bar-text-font-family: var(--text-subtitle-font-family); --progress-bar-tiny-height: 1rem; --progress-bar-tiny-text-font-size: var(--text-subtitle-2-font-size); --progress-bar-tiny-text-font-weight: var(--text-subtitle-2-font-weight); --progress-bar-tiny-text-line-height: var(--text-subtitle-2-line-height); --progress-bar-small-height: 1.25rem; --progress-bar-small-text-font-size: var(--text-subtitle-2-font-size); --progress-bar-small-text-font-weight: var(--text-subtitle-2-font-weight); --progress-bar-small-text-line-height: var(--text-subtitle-2-line-height); --progress-bar-medium-height: 1.375rem; --progress-bar-medium-text-font-size: var(--text-subtitle-font-size); --progress-bar-medium-text-font-weight: var(--text-subtitle-font-weight); --progress-bar-medium-text-line-height: var(--text-subtitle-line-height); --progress-bar-large-height: 1.5rem; --progress-bar-large-text-font-size: var(--text-subtitle-font-size); --progress-bar-large-text-font-weight: var(--text-subtitle-font-weight); --progress-bar-large-text-line-height: var(--text-subtitle-line-height); --progress-bar-giant-height: 1.75rem; --progress-bar-giant-text-font-size: var(--text-subtitle-font-size); --progress-bar-giant-text-font-weight: var(--text-subtitle-font-weight); --progress-bar-giant-text-line-height: var(--text-subtitle-line-height); --progress-bar-basic-background-color: var(--background-basic-color-2); --progress-bar-basic-filled-background-color: var(--background-basic-color-4); --progress-bar-basic-text-color: var(--text-basic-color); --progress-bar-primary-background-color: var(--background-basic-color-3); --progress-bar-primary-filled-background-color: var(--color-primary-default); --progress-bar-primary-text-color: var(--text-control-color); --progress-bar-success-background-color: var(--background-basic-color-3); --progress-bar-success-filled-background-color: var(--color-success-default); --progress-bar-success-text-color: var(--text-control-color); --progress-bar-info-background-color: var(--background-basic-color-3); --progress-bar-info-filled-background-color: var(--color-info-default); --progress-bar-info-text-color: var(--text-control-color); --progress-bar-warning-background-color: var(--background-basic-color-3); --progress-bar-warning-filled-background-color: var(--color-warning-default); --progress-bar-warning-text-color: var(--text-control-color); --progress-bar-danger-background-color: var(--background-basic-color-3); --progress-bar-danger-filled-background-color: var(--color-danger-default); --progress-bar-danger-text-color: var(--text-control-color); --progress-bar-control-background-color: var(--background-basic-color-3); --progress-bar-control-filled-background-color: var(--color-control-default); --progress-bar-control-text-color: var(--color-basic-800); --alert-border-radius: var(--border-radius); --alert-bottom-margin: 1.5rem; --alert-padding: 1rem 1.125rem; --alert-scrollbar-color: var(--scrollbar-color); --alert-scrollbar-background-color: var(--scrollbar-background-color); --alert-scrollbar-width: var(--scrollbar-width); --alert-shadow: none; --alert-text-font-family: var(--text-paragraph-font-family); --alert-text-font-size: var(--text-subtitle-font-size); --alert-text-font-weight: var(--text-subtitle-font-weight); --alert-text-line-height: var(--text-subtitle-line-height); --alert-closable-start-padding: 3rem; --alert-tiny-height: 4.5rem; --alert-small-height: 5.75rem; --alert-medium-height: 7rem; --alert-medium-padding: 1rem 1.125rem; --alert-large-height: 8.25rem; --alert-giant-height: 9.5rem; --alert-basic-background-color: var(--background-basic-color-2); --alert-basic-text-color: var(--text-basic-color); --alert-primary-background-color: var(--color-primary-default); --alert-primary-text-color: var(--text-control-color); --alert-success-background-color: var(--color-success-default); --alert-success-text-color: var(--text-control-color); --alert-info-background-color: var(--color-info-default); --alert-info-text-color: var(--text-control-color); --alert-warning-background-color: var(--color-warning-default); --alert-warning-text-color: var(--text-control-color); --alert-danger-background-color: var(--color-danger-default); --alert-danger-text-color: var(--text-control-color); --alert-control-background-color: var(--color-control-default); --alert-control-text-color: var(--color-basic-800); --alert-accent-basic-color: var(--border-basic-color-3); --alert-accent-primary-color: var(--color-primary-default); --alert-accent-info-color: var(--color-info-default); --alert-accent-success-color: var(--color-success-default); --alert-accent-warning-color: var(--color-warning-default); --alert-accent-danger-color: var(--color-danger-default); --alert-accent-control-color: var(--color-control-default); --alert-outline-width: 1px; --alert-outline-basic-color: var(--color-basic-focus-border); --alert-outline-primary-color: var(--color-primary-focus-border); --alert-outline-info-color: var(--color-info-focus-border); --alert-outline-success-color: var(--color-success-focus-border); --alert-outline-warning-color: var(--color-warning-focus-border); --alert-outline-danger-color: var(--color-danger-focus-border); --alert-outline-control-color: var(--color-control-focus-border); --chat-background-color: var(--background-basic-color-1); --chat-border: none; --chat-border-radius: var(--border-radius); --chat-shadow: var(--shadow); --chat-padding: 1rem 1.25rem; --chat-scrollbar-color: var(--scrollbar-color); --chat-scrollbar-background-color: var(--scrollbar-background-color); --chat-scrollbar-width: var(--scrollbar-width); --chat-text-color: var(--text-basic-color); --chat-text-font-family: var(--text-paragraph-font-family); --chat-text-font-size: var(--text-paragraph-font-size); --chat-text-font-weight: var(--text-paragraph-font-weight); --chat-text-line-height: var(--text-paragraph-line-height); --chat-header-text-font-family: var(--text-subtitle-font-family); --chat-header-text-font-size: var(--text-subtitle-font-size); --chat-header-text-font-weight: var(--text-subtitle-font-weight); --chat-header-text-line-height: var(--text-subtitle-line-height); --chat-tiny-height: 13.5rem; --chat-small-height: 21rem; --chat-medium-height: 28.5rem; --chat-large-height: 36rem; --chat-giant-height: 43.5rem; --chat-basic-background-color: var(--background-basic-color-1); --chat-basic-text-color: var(--text-basic-color); --chat-primary-background-color: var(--color-primary-default); --chat-primary-text-color: var(--text-control-color); --chat-success-background-color: var(--color-success-default); --chat-success-text-color: var(--text-control-color); --chat-info-background-color: var(--color-info-default); --chat-info-text-color: var(--text-control-color); --chat-warning-background-color: var(--color-warning-default); --chat-warning-text-color: var(--text-control-color); --chat-danger-background-color: var(--color-danger-default); --chat-danger-text-color: var(--text-control-color); --chat-control-background-color: var(--color-control-default); --chat-control-text-color: var(--color-basic-800); --chat-divider-color: var(--divider-color); --chat-divider-style: var(--divider-style); --chat-divider-width: var(--divider-width); --chat-message-background: var(--color-primary-default); --chat-message-text-color: var(--text-control-color); --chat-message-reply-background-color: var(--background-basic-color-2); --chat-message-reply-text-color: var(--text-basic-color); --chat-message-avatar-background-color: var(--color-basic-500); --chat-message-sender-text-color: var(--text-hint-color); --chat-message-quote-background-color: var(--background-basic-color-2); --chat-message-quote-text-color: var(--text-hint-color); --chat-message-file-text-color: var(--text-hint-color); --chat-message-file-background-color: transparent; --spinner-text-color: var(--text-basic-color); --spinner-text-font-family: var(--text-button-font-family); --spinner-text-font-size: var(--text-button-medium-font-size); --spinner-text-font-weight: var(--text-button-font-weight); --spinner-text-line-height: var(--text-button-medium-line-height); --spinner-basic-background-color: var(--color-basic-transparent-200); --spinner-basic-circle-filled-color: var(--text-hint-color); --spinner-basic-circle-empty-color: transparent; --spinner-primary-background-color: var(--color-basic-transparent-200); --spinner-primary-circle-filled-color: var(--color-primary-default); --spinner-primary-circle-empty-color: transparent; --spinner-info-background-color: var(--color-basic-transparent-200); --spinner-info-circle-filled-color: var(--color-info-default); --spinner-info-circle-empty-color: transparent; --spinner-success-background-color: var(--color-basic-transparent-200); --spinner-success-circle-filled-color: var(--color-success-default); --spinner-success-circle-empty-color: transparent; --spinner-warning-background-color: var(--color-basic-transparent-200); --spinner-warning-circle-filled-color: var(--color-warning-default); --spinner-warning-circle-empty-color: transparent; --spinner-danger-background-color: var(--color-basic-transparent-200); --spinner-danger-circle-filled-color: var(--color-danger-default); --spinner-danger-circle-empty-color: transparent; --spinner-control-background-color: var(--color-basic-control-transparent-200); --spinner-control-circle-filled-color: var(--color-control-default); --spinner-control-circle-empty-color: transparent; --spinner-height-tiny: 1rem; --spinner-height-small: 1.25rem; --spinner-height-medium: 1.5rem; --spinner-height-large: 1.75rem; --spinner-height-giant: 2rem; --stepper-step-text-color: var(--text-hint-color); --stepper-step-text-font-family: var(--text-paragraph-font-family); --stepper-step-text-font-size: var(--text-paragraph-font-size); --stepper-step-text-font-weight: var(--text-paragraph-font-weight); --stepper-step-text-line-height: var(--text-paragraph-line-height); --stepper-step-active-text-color: var(--text-primary-active-color); --stepper-step-completed-text-color: var(--text-primary-color); --stepper-step-index-border-color: var(--border-basic-color-4); --stepper-step-index-border-style: solid; --stepper-step-index-border-width: 1px; --stepper-step-index-border-radius: 50%; --stepper-step-index-width: 2rem; --stepper-step-index-active-border-color: var(--color-primary-active); --stepper-step-index-completed-background-color: var(--color-primary-default); --stepper-step-index-completed-border-color: var(--color-primary-default); --stepper-step-index-completed-text-color: var(--text-control-color); --stepper-connector-background-color: var(--background-basic-color-3); --stepper-connector-completed-background-color: var(--color-primary-default); --stepper-horizontal-connector-margin: 1rem; --stepper-vertical-connector-margin: 1rem; --stepper-step-content-padding: 1.25rem; --accordion-border-radius: var(--border-radius); --accordion-padding: 1.25rem; --accordion-shadow: var(--shadow); --accordion-header-text-color: var(--text-basic-color); --accordion-header-text-font-family: var(--text-subtitle-font-family); --accordion-header-text-font-size: var(--text-subtitle-font-size); --accordion-header-text-font-weight: var(--text-subtitle-font-weight); --accordion-header-text-line-height: var(--text-subtitle-line-height); --accordion-header-disabled-text-color: var(--text-disabled-color); --accordion-header-border-color: var(--border-basic-color-3); --accordion-header-border-style: solid; --accordion-header-border-width: 1px; --accordion-item-background-color: var(--background-basic-color-1); --accordion-item-text-color: var(--text-basic-color); --accordion-item-text-font-family: var(--text-paragraph-font-family); --accordion-item-text-font-size: var(--text-paragraph-font-size); --accordion-item-text-font-weight: var(--text-paragraph-font-weight); --accordion-item-text-line-height: var(--text-paragraph-line-height); --list-item-divider-color: var(--divider-color); --list-item-divider-style: var(--divider-style); --list-item-divider-width: var(--divider-width); --list-item-padding: 1rem; --list-item-text-color: var(--text-basic-color); --list-item-font-family: var(--text-paragraph-font-family); --list-item-font-size: var(--text-paragraph-font-size); --list-item-font-weight: var(--text-paragraph-font-weight); --list-item-line-height: var(--text-paragraph-line-height); --calendar-width: 20.625rem; --calendar-background-color: var(--background-basic-color-1); --calendar-border-color: var(--border-basic-color-4); --calendar-border-style: solid; --calendar-border-width: 0.0625rem; --calendar-border-radius: var(--border-radius); --calendar-text-color: var(--text-basic-color); --calendar-text-font-family: var(--text-subtitle-font-family); --calendar-text-font-size: var(--text-subtitle-font-size); --calendar-text-font-weight: var(--text-subtitle-font-weight); --calendar-text-line-height: var(--text-subtitle-line-height); --calendar-picker-padding-top: 0.25rem; --calendar-picker-padding-bottom: 0.625rem; --calendar-picker-padding-start: 0.625rem; --calendar-picker-padding-end: 0.625rem; --calendar-navigation-text-color: var(--text-basic-color); --calendar-navigation-text-font-family: var(--text-button-font-family); --calendar-navigation-title-text-font-size: var(--text-button-medium-font-size); --calendar-navigation-title-text-font-weight: var(--text-button-font-weight); --calendar-navigation-title-text-line-height: var(--text-button-medium-line-height); --calendar-navigation-padding: 0.625rem 0.25rem; --calendar-cell-inactive-text-color: var(--text-hint-color); --calendar-cell-disabled-text-color: var(--text-disabled-color); --calendar-cell-hover-background-color: var(--background-basic-color-2); --calendar-cell-hover-border-color: var(--background-basic-color-2); --calendar-cell-hover-text-color: var(--text-basic-color); --calendar-cell-hover-text-font-size: var(--calendar-text-font-size); --calendar-cell-hover-text-font-weight: var(--calendar-text-font-weight); --calendar-cell-hover-text-line-height: var(--calendar-text-line-height); --calendar-cell-active-background-color: var(--color-primary-active); --calendar-cell-active-border-color: var(--color-primary-active-border); --calendar-cell-active-text-color: var(--text-control-color); --calendar-cell-active-text-font-size: var(--calendar-text-font-size); --calendar-cell-active-text-font-weight: var(--calendar-text-font-weight); --calendar-cell-active-text-line-height: var(--calendar-text-line-height); --calendar-cell-today-background-color: var(--color-primary-transparent-default); --calendar-cell-today-border-color: var(--color-primary-transparent-default-border); --calendar-cell-today-text-color: var(--text-basic-color); --calendar-cell-today-text-font-size: var(--calendar-text-font-size); --calendar-cell-today-text-font-weight: var(--calendar-text-font-weight); --calendar-cell-today-text-line-height: var(--calendar-text-line-height); --calendar-cell-today-hover-background-color: var(--color-primary-transparent-hover); --calendar-cell-today-hover-border-color: var(--color-primary-transparent-hover-border); --calendar-cell-today-active-background-color: var(--color-primary-transparent-active); --calendar-cell-today-active-border-color: var(--color-primary-transparent-active-border); --calendar-cell-today-disabled-border-color: var(--border-basic-color-4); --calendar-cell-today-selected-background-color: var(--color-control-transparent-default); --calendar-cell-today-selected-border-color: transparent; --calendar-cell-today-selected-text-color: var(--text-control-color); --calendar-cell-today-selected-hover-background-color: var(--color-control-transparent-hover); --calendar-cell-today-selected-hover-border-color: transparent; --calendar-cell-today-selected-active-background-color: var(--color-control-transparent-active); --calendar-cell-today-selected-active-border-color: transparent; --calendar-cell-today-in-range-background-color: var(--color-control-transparent-default); --calendar-cell-today-in-range-border-color: transparent; --calendar-cell-today-in-range-text-color: var(--text-control-color); --calendar-cell-today-in-range-hover-background-color: var(--color-control-transparent-hover); --calendar-cell-today-in-range-hover-border-color: transparent; --calendar-cell-today-in-range-active-background-color: var(--color-control-transparent-active); --calendar-cell-today-in-range-active-border-color: transparent; --calendar-cell-selected-background-color: var(--color-primary-default); --calendar-cell-selected-border-color: var(--color-primary-default-border); --calendar-cell-selected-text-color: var(--text-control-color); --calendar-cell-selected-text-font-size: var(--calendar-text-font-size); --calendar-cell-selected-text-font-weight: var(--calendar-text-font-weight); --calendar-cell-selected-text-line-height: var(--calendar-text-line-height); --calendar-cell-selected-hover-background-color: var(--color-primary-hover); --calendar-cell-selected-hover-border-color: var(--color-primary-hover-border); --calendar-cell-selected-active-background-color: var(--color-primary-active); --calendar-cell-selected-active-border-color: var(--color-primary-active-border); --calendar-day-cell-width: 2.75rem; --calendar-day-cell-height: 2.75rem; --calendar-month-cell-width: 4.8125rem; --calendar-month-cell-height: var(--calendar-day-cell-height); --calendar-year-cell-width: var(--calendar-month-cell-width); --calendar-year-cell-height: var(--calendar-month-cell-height); --calendar-weekday-background: transparent; --calendar-weekday-divider-color: var(--divider-color); --calendar-weekday-divider-width: var(--divider-width); --calendar-weekday-text-color: var(--text-hint-color); --calendar-weekday-text-font-size: var(--text-subtitle-font-size); --calendar-weekday-text-font-weight: var(--text-subtitle-font-weight); --calendar-weekday-text-line-height: var(--text-subtitle-line-height); --calendar-weekday-holiday-text-color: var(--calendar-weekday-text-color); --calendar-weekday-height: var(--calendar-day-cell-height); --calendar-weekday-width: var(--calendar-day-cell-width); --calendar-weeknumber-background: transparent; --calendar-weeknumber-divider-color: var(--divider-color); --calendar-weeknumber-divider-width: var(--divider-width); --calendar-weeknumber-text-color: var(--text-hint-color); --calendar-weeknumber-text-font-size: var(--text-subtitle-font-size); --calendar-weeknumber-text-font-weight: var(--text-subtitle-font-weight); --calendar-weeknumber-text-line-height: var(--text-subtitle-line-height); --calendar-weeknumber-height: var(--calendar-weekday-height); --calendar-weeknumber-width: var(--calendar-weekday-width); --calendar-large-width: 22.375rem; --calendar-day-cell-large-width: 3rem; --calendar-day-cell-large-height: 3rem; --calendar-weekday-large-height: var(--calendar-day-cell-large-width); --calendar-weekday-large-width: var(--calendar-day-cell-large-height); --calendar-weeknumber-large-height: var(--calendar-weekday-large-height); --calendar-weeknumber-large-width: var(--calendar-weekday-large-width); --calendar-month-cell-large-width: 5.25rem; --calendar-month-cell-large-height: var(--calendar-day-cell-large-height); --calendar-year-cell-large-width: var(--calendar-month-cell-large-width); --calendar-year-cell-large-height: var(--calendar-month-cell-large-height); --overlay-backdrop-background-color: rgba(0, 0, 0, 0.35); --tooltip-background-color: var(--background-alternative-color-3); --tooltip-border-color: transparent; --tooltip-border-style: dashed; --tooltip-border-width: 0; --tooltip-border-radius: var(--border-radius); --tooltip-padding: 0.5rem 1rem; --tooltip-text-color: var(--text-alternate-color); --tooltip-text-font-family: var(--text-caption-font-family); --tooltip-text-font-size: var(--text-caption-font-size); --tooltip-text-font-weight: var(--text-caption-font-weight); --tooltip-text-line-height: var(--text-caption-line-height); --tooltip-icon-height: 1rem; --tooltip-icon-width: 1rem; --tooltip-max-width: 16rem; --tooltip-basic-background-color: var(--background-basic-color-3); --tooltip-basic-border-color: transparent; --tooltip-basic-text-color: var(--text-basic-color); --tooltip-primary-background-color: var(--color-primary-default); --tooltip-primary-border-color: transparent; --tooltip-primary-text-color: var(--text-control-color); --tooltip-info-background-color: var(--color-info-default); --tooltip-info-border-color: transparent; --tooltip-info-text-color: var(--text-control-color); --tooltip-success-background-color: var(--color-success-default); --tooltip-success-border-color: transparent; --tooltip-success-text-color: var(--text-control-color); --tooltip-warning-background-color: var(--color-warning-default); --tooltip-warning-border-color: transparent; --tooltip-warning-text-color: var(--text-control-color); --tooltip-danger-background-color: var(--color-danger-default); --tooltip-danger-border-color: transparent; --tooltip-danger-text-color: var(--text-control-color); --tooltip-control-background-color: var(--color-control-default); --tooltip-control-border-color: transparent; --tooltip-control-text-color: var(--color-basic-800); --tooltip-shadow: var(--shadow); --option-list-max-height: 20rem; --option-list-shadow: none; --option-list-background-color: var(--background-basic-color-1); --option-list-border-style: solid; --option-list-border-width: 0.0625rem; --option-list-border-color: var(--border-basic-color-4); --option-list-border-radius: var(--border-radius); --option-list-adjacent-border-color: var(--option-list-border-color); --option-list-adjacent-border-style: var(--option-list-border-style); --option-list-adjacent-border-width: var(--option-list-border-width); --option-group-text-color: var(--text-hint-color); --option-group-tiny-start-padding: 1.25rem; --option-group-small-start-padding: 1.75rem; --option-group-medium-start-padding: 2.25rem; --option-group-large-start-padding: 2.25rem; --option-group-giant-start-padding: 2.75rem; --option-background-color: var(--background-basic-color-1); --option-text-color: var(--text-basic-color); --option-text-font-family: var(--text-subtitle-font-family); --option-hover-background-color: var(--color-basic-transparent-hover); --option-hover-text-color: var(--text-basic-color); --option-active-background-color: var(--color-basic-transparent-active); --option-active-text-color: var(--text-basic-color); --option-focus-background-color: var(--color-basic-transparent-focus); --option-focus-text-color: var(--text-basic-color); --option-selected-background-color: var(--color-primary-default); --option-selected-text-color: var(--text-control-color); --option-selected-hover-background-color: var(--color-primary-hover); --option-selected-hover-text-color: var(--text-control-color); --option-selected-active-background-color: var(--color-primary-active); --option-selected-active-text-color: var(--text-control-color); --option-selected-focus-background-color: var(--color-primary-focus); --option-selected-focus-text-color: var(--text-control-color); --option-disabled-background-color: var(--background-basic-color-1); --option-disabled-text-color: var(--text-disabled-color); --option-tiny-text-font-size: var(--text-caption-2-font-size); --option-tiny-text-font-weight: var(--text-caption-2-font-weight); --option-tiny-text-line-height: var(--text-caption-2-line-height); --option-tiny-padding: var(--select-outline-tiny-padding); --option-small-text-font-size: var(--text-subtitle-2-font-size); --option-small-text-font-weight: var(--text-subtitle-2-font-weight); --option-small-text-line-height: var(--text-subtitle-2-line-height); --option-small-padding: var(--select-outline-small-padding); --option-medium-text-font-size: var(--text-subtitle-font-size); --option-medium-text-font-weight: var(--text-subtitle-font-weight); --option-medium-text-line-height: var(--text-subtitle-line-height); --option-medium-padding: var(--select-outline-medium-padding); --option-large-text-font-size: var(--text-subtitle-font-size); --option-large-text-font-weight: var(--text-subtitle-font-weight); --option-large-text-line-height: var(--text-subtitle-line-height); --option-large-padding: var(--select-outline-large-padding); --option-giant-text-font-size: var(--text-heading-6-font-size); --option-giant-text-font-weight: var(--text-heading-6-font-weight); --option-giant-text-line-height: var(--text-heading-6-line-height); --option-giant-padding: var(--select-outline-giant-padding); --select-cursor: pointer; --select-disabled-cursor: default; --select-min-width: 13rem; --select-outline-width: var(--outline-width); --select-outline-color: var(--outline-color); --select-icon-offset: 2rem; --select-text-font-family: var(--text-subtitle-font-family); --select-placeholder-text-font-family: var(--text-paragraph-font-family); --select-tiny-text-font-size: var(--text-caption-2-font-size); --select-tiny-text-font-weight: var(--text-caption-2-font-weight); --select-tiny-text-line-height: var(--text-caption-2-line-height); --select-tiny-placeholder-text-font-size: var(--text-paragraph-font-size); --select-tiny-placeholder-text-font-weight: var(--text-paragraph-font-weight); --select-tiny-max-width: 20rem; --select-small-text-font-size: var(--text-subtitle-2-font-size); --select-small-text-font-weight: var(--text-subtitle-2-font-weight); --select-small-text-line-height: var(--text-subtitle-2-line-height); --select-small-placeholder-text-font-size: var(--text-paragraph-font-size); --select-small-placeholder-text-font-weight: var(--text-paragraph-font-weight); --select-small-max-width: 20rem; --select-medium-text-font-size: var(--text-subtitle-font-size); --select-medium-text-font-weight: var(--text-subtitle-font-weight); --select-medium-text-line-height: var(--text-subtitle-line-height); --select-medium-placeholder-text-font-size: var(--text-paragraph-font-size); --select-medium-placeholder-text-font-weight: var(--text-paragraph-font-weight); --select-medium-max-width: 20rem; --select-large-text-font-size: var(--text-subtitle-font-size); --select-large-text-font-weight: var(--text-subtitle-font-weight); --select-large-text-line-height: var(--text-subtitle-line-height); --select-large-placeholder-text-font-size: var(--text-paragraph-font-size); --select-large-placeholder-text-font-weight: var(--text-paragraph-font-weight); --select-large-max-width: 30rem; --select-giant-text-font-size: var(--text-heading-6-font-size); --select-giant-text-font-weight: var(--text-heading-6-font-weight); --select-giant-text-line-height: var(--text-heading-6-line-height); --select-giant-placeholder-text-font-size: var(--text-paragraph-font-size); --select-giant-placeholder-text-font-weight: var(--text-paragraph-font-weight); --select-giant-max-width: 30rem; --select-rectangle-border-radius: var(--border-radius); --select-semi-round-border-radius: 0.75rem; --select-round-border-radius: 1.5rem; --select-outline-border-style: solid; --select-outline-border-width: 1px; --select-outline-tiny-padding: 0.1875rem 1rem; --select-outline-small-padding: 0.1875rem 1rem; --select-outline-medium-padding: 0.4375rem 1rem; --select-outline-large-padding: 0.6875rem 1rem; --select-outline-giant-padding: 0.9375rem 1rem; --select-outline-basic-icon-color: var(--text-hint-color); --select-outline-basic-text-color: var(--text-basic-color); --select-outline-basic-placeholder-text-color: var(--text-hint-color); --select-outline-basic-background-color: var(--background-basic-color-2); --select-outline-basic-border-color: var(--border-basic-color-4); --select-outline-basic-focus-background-color: var(--background-basic-color-1); --select-outline-basic-focus-border-color: var(--color-primary-default); --select-outline-basic-hover-background-color: var(--background-basic-color-3); --select-outline-basic-hover-border-color: var(--border-basic-color-4); --select-outline-basic-focus-and-hover-background-color: var(--select-outline-basic-hover-background-color); --select-outline-basic-focus-and-hover-border-color: var(--select-outline-basic-hover-border-color); --select-outline-basic-disabled-background-color: var(--background-basic-color-2); --select-outline-basic-disabled-border-color: var(--border-basic-color-4); --select-outline-basic-disabled-icon-color: var(--text-disabled-color); --select-outline-basic-disabled-text-color: var(--text-disabled-color); --select-outline-primary-icon-color: var(--text-hint-color); --select-outline-primary-text-color: var(--text-basic-color); --select-outline-primary-placeholder-text-color: var(--text-hint-color); --select-outline-primary-background-color: var(--background-basic-color-2); --select-outline-primary-border-color: var(--color-primary-default); --select-outline-primary-focus-background-color: var(--background-basic-color-1); --select-outline-primary-focus-border-color: var(--color-primary-focus); --select-outline-primary-hover-background-color: var(--background-basic-color-3); --select-outline-primary-hover-border-color: var(--color-primary-hover); --select-outline-primary-focus-and-hover-background-color: var(--select-outline-primary-hover-background-color); --select-outline-primary-focus-and-hover-border-color: var(--select-outline-primary-hover-border-color); --select-outline-primary-disabled-background-color: var(--background-basic-color-2); --select-outline-primary-disabled-border-color: var(--border-basic-color-4); --select-outline-primary-disabled-icon-color: var(--text-disabled-color); --select-outline-primary-disabled-text-color: var(--text-disabled-color); --select-outline-success-icon-color: var(--text-hint-color); --select-outline-success-text-color: var(--text-basic-color); --select-outline-success-placeholder-text-color: var(--text-hint-color); --select-outline-success-background-color: var(--background-basic-color-2); --select-outline-success-border-color: var(--color-success-default); --select-outline-success-focus-background-color: var(--background-basic-color-1); --select-outline-success-focus-border-color: var(--color-success-focus); --select-outline-success-focus-and-hover-background-color: var(--select-outline-success-hover-background-color); --select-outline-success-focus-and-hover-border-color: var(--select-outline-success-hover-border-color); --select-outline-success-hover-background-color: var(--background-basic-color-3); --select-outline-success-hover-border-color: var(--color-success-hover); --select-outline-success-disabled-background-color: var(--background-basic-color-2); --select-outline-success-disabled-border-color: var(--border-basic-color-4); --select-outline-success-disabled-icon-color: var(--text-disabled-color); --select-outline-success-disabled-text-color: var(--text-disabled-color); --select-outline-info-icon-color: var(--text-hint-color); --select-outline-info-text-color: var(--text-basic-color); --select-outline-info-placeholder-text-color: var(--text-hint-color); --select-outline-info-background-color: var(--background-basic-color-2); --select-outline-info-border-color: var(--color-info-default); --select-outline-info-focus-background-color: var(--background-basic-color-1); --select-outline-info-focus-border-color: var(--color-info-focus); --select-outline-info-hover-background-color: var(--background-basic-color-3); --select-outline-info-hover-border-color: var(--color-info-hover); --select-outline-info-focus-and-hover-background-color: var(--select-outline-info-hover-background-color); --select-outline-info-focus-and-hover-border-color: var(--select-outline-info-hover-border-color); --select-outline-info-disabled-background-color: var(--background-basic-color-2); --select-outline-info-disabled-border-color: var(--border-basic-color-4); --select-outline-info-disabled-icon-color: var(--text-disabled-color); --select-outline-info-disabled-text-color: var(--text-disabled-color); --select-outline-warning-icon-color: var(--text-hint-color); --select-outline-warning-text-color: var(--text-basic-color); --select-outline-warning-placeholder-text-color: var(--text-hint-color); --select-outline-warning-background-color: var(--background-basic-color-2); --select-outline-warning-border-color: var(--color-warning-default); --select-outline-warning-focus-background-color: var(--background-basic-color-1); --select-outline-warning-focus-border-color: var(--color-warning-focus); --select-outline-warning-hover-background-color: var(--background-basic-color-3); --select-outline-warning-hover-border-color: var(--color-warning-hover); --select-outline-warning-focus-and-hover-background-color: var(--select-outline-warning-hover-background-color); --select-outline-warning-focus-and-hover-border-color: var(--select-outline-warning-hover-border-color); --select-outline-warning-disabled-background-color: var(--background-basic-color-2); --select-outline-warning-disabled-border-color: var(--border-basic-color-4); --select-outline-warning-disabled-icon-color: var(--text-disabled-color); --select-outline-warning-disabled-text-color: var(--text-disabled-color); --select-outline-danger-icon-color: var(--text-hint-color); --select-outline-danger-text-color: var(--text-basic-color); --select-outline-danger-placeholder-text-color: var(--text-hint-color); --select-outline-danger-background-color: var(--background-basic-color-2); --select-outline-danger-border-color: var(--color-danger-default); --select-outline-danger-focus-background-color: var(--background-basic-color-1); --select-outline-danger-focus-border-color: var(--color-danger-focus); --select-outline-danger-hover-background-color: var(--background-basic-color-3); --select-outline-danger-hover-border-color: var(--color-danger-hover); --select-outline-danger-focus-and-hover-background-color: var(--select-outline-danger-hover-background-color); --select-outline-danger-focus-and-hover-border-color: var(--select-outline-danger-hover-border-color); --select-outline-danger-disabled-background-color: var(--background-basic-color-2); --select-outline-danger-disabled-border-color: var(--border-basic-color-4); --select-outline-danger-disabled-icon-color: var(--text-disabled-color); --select-outline-danger-disabled-text-color: var(--text-disabled-color); --select-outline-control-icon-color: var(--color-basic-100); --select-outline-control-text-color: var(--color-basic-100); --select-outline-control-placeholder-text-color: var(--color-basic-100); --select-outline-control-background-color: var(--color-basic-control-transparent-300); --select-outline-control-border-color: var(--color-basic-control-transparent-500); --select-outline-control-focus-background-color: var(--color-basic-control-transparent-500); --select-outline-control-focus-border-color: var(--color-control-transparent-focus-border); --select-outline-control-hover-background-color: var(--color-basic-control-transparent-400); --select-outline-control-hover-border-color: var(--color-control-transparent-hover-border); --select-outline-control-focus-and-hover-background-color: var(--select-outline-control-hover-background-color); --select-outline-control-focus-and-hover-border-color: var(--select-outline-control-hover-border-color); --select-outline-control-disabled-background-color: var(--color-control-transparent-disabled); --select-outline-control-disabled-border-color: var(--color-basic-control-transparent-500); --select-outline-control-disabled-icon-color: var(--color-basic-100); --select-outline-control-disabled-text-color: var(--color-basic-100); --select-outline-adjacent-border-style: var(--select-outline-border-style); --select-outline-adjacent-border-width: var(--select-outline-border-width); --select-outline-basic-open-border-color: var(--select-outline-basic-border-color); --select-outline-basic-adjacent-border-color: var(--select-outline-basic-border-color); --select-outline-primary-open-border-color: var(--select-outline-primary-border-color); --select-outline-primary-adjacent-border-color: var(--select-outline-primary-border-color); --select-outline-success-open-border-color: var(--select-outline-success-border-color); --select-outline-success-adjacent-border-color: var(--select-outline-success-border-color); --select-outline-info-open-border-color: var(--select-outline-info-border-color); --select-outline-info-adjacent-border-color: var(--select-outline-info-border-color); --select-outline-warning-open-border-color: var(--select-outline-warning-border-color); --select-outline-warning-adjacent-border-color: var(--select-outline-warning-border-color); --select-outline-danger-open-border-color: var(--select-outline-danger-border-color); --select-outline-danger-adjacent-border-color: var(--select-outline-danger-border-color); --select-outline-control-open-border-color: var(--select-outline-control-border-color); --select-outline-control-adjacent-border-color: var(--select-outline-control-border-color); --select-filled-border-style: solid; --select-filled-border-width: 1px; --select-filled-tiny-padding: 0.1875rem 1rem; --select-filled-small-padding: 0.1875rem 1rem; --select-filled-medium-padding: 0.4375rem 1rem; --select-filled-large-padding: 0.6875rem 1rem; --select-filled-giant-padding: 0.9375rem 1rem; --select-filled-basic-background-color: var(--color-basic-default); --select-filled-basic-border-color: var(--color-basic-default-border); --select-filled-basic-icon-color: var(--color-basic-800); --select-filled-basic-text-color: var(--color-basic-800); --select-filled-basic-placeholder-text-color: var(--text-hint-color); --select-filled-basic-focus-background-color: var(--color-basic-focus); --select-filled-basic-focus-border-color: var(--color-basic-focus-border); --select-filled-basic-hover-background-color: var(--color-basic-hover); --select-filled-basic-hover-border-color: var(--color-basic-hover-border); --select-filled-basic-focus-and-hover-background-color: var(--select-filled-basic-hover-background-color); --select-filled-basic-focus-and-hover-border-color: var(--select-filled-basic-hover-border-color); --select-filled-basic-disabled-background-color: var(--background-basic-color-2); --select-filled-basic-disabled-border-color: var(--border-basic-color-2); --select-filled-basic-disabled-icon-color: var(--text-disabled-color); --select-filled-basic-disabled-text-color: var(--text-disabled-color); --select-filled-primary-background-color: var(--color-primary-default); --select-filled-primary-border-color: var(--color-primary-default-border); --select-filled-primary-icon-color: var(--text-control-color); --select-filled-primary-text-color: var(--text-control-color); --select-filled-primary-placeholder-text-color: var(--text-control-color); --select-filled-primary-focus-background-color: var(--color-primary-focus); --select-filled-primary-focus-border-color: var(--color-primary-focus-border); --select-filled-primary-hover-background-color: var(--color-primary-hover); --select-filled-primary-hover-border-color: var(--color-primary-hover-border); --select-filled-primary-focus-and-hover-background-color: var(--select-filled-primary-hover-background-color); --select-filled-primary-focus-and-hover-border-color: var(--select-filled-primary-hover-border-color); --select-filled-primary-disabled-background-color: var(--background-basic-color-2); --select-filled-primary-disabled-border-color: var(--border-basic-color-2); --select-filled-primary-disabled-icon-color: var(--text-disabled-color); --select-filled-primary-disabled-text-color: var(--text-disabled-color); --select-filled-success-background-color: var(--color-success-default); --select-filled-success-border-color: var(--color-success-default-border); --select-filled-success-icon-color: var(--text-control-color); --select-filled-success-text-color: var(--text-control-color); --select-filled-success-placeholder-text-color: var(--text-control-color); --select-filled-success-focus-background-color: var(--color-success-focus); --select-filled-success-focus-border-color: var(--color-success-focus-border); --select-filled-success-hover-background-color: var(--color-success-hover); --select-filled-success-hover-border-color: var(--color-success-hover-border); --select-filled-success-focus-and-hover-background-color: var(--select-filled-success-hover-background-color); --select-filled-success-focus-and-hover-border-color: var(--select-filled-success-hover-border-color); --select-filled-success-disabled-background-color: var(--background-basic-color-2); --select-filled-success-disabled-border-color: var(--border-basic-color-2); --select-filled-success-disabled-icon-color: var(--text-disabled-color); --select-filled-success-disabled-text-color: var(--text-disabled-color); --select-filled-info-background-color: var(--color-info-default); --select-filled-info-border-color: var(--color-info-default-border); --select-filled-info-icon-color: var(--text-control-color); --select-filled-info-text-color: var(--text-control-color); --select-filled-info-placeholder-text-color: var(--text-control-color); --select-filled-info-focus-background-color: var(--color-info-focus); --select-filled-info-focus-border-color: var(--color-info-focus-border); --select-filled-info-hover-background-color: var(--color-info-hover); --select-filled-info-hover-border-color: var(--color-info-hover-border); --select-filled-info-focus-and-hover-background-color: var(--select-filled-info-hover-background-color); --select-filled-info-focus-and-hover-border-color: var(--select-filled-info-hover-border-color); --select-filled-info-disabled-background-color: var(--background-basic-color-2); --select-filled-info-disabled-border-color: var(--border-basic-color-2); --select-filled-info-disabled-icon-color: var(--text-disabled-color); --select-filled-info-disabled-text-color: var(--text-disabled-color); --select-filled-warning-background-color: var(--color-warning-default); --select-filled-warning-border-color: var(--color-warning-default-border); --select-filled-warning-icon-color: var(--text-control-color); --select-filled-warning-text-color: var(--text-control-color); --select-filled-warning-placeholder-text-color: var(--text-control-color); --select-filled-warning-focus-background-color: var(--color-warning-focus); --select-filled-warning-focus-border-color: var(--color-warning-focus-border); --select-filled-warning-hover-background-color: var(--color-warning-hover); --select-filled-warning-hover-border-color: var(--color-warning-hover-border); --select-filled-warning-focus-and-hover-background-color: var(--select-filled-warning-hover-background-color); --select-filled-warning-focus-and-hover-border-color: var(--select-filled-warning-hover-border-color); --select-filled-warning-disabled-background-color: var(--background-basic-color-2); --select-filled-warning-disabled-border-color: var(--border-basic-color-2); --select-filled-warning-disabled-icon-color: var(--text-disabled-color); --select-filled-warning-disabled-text-color: var(--text-disabled-color); --select-filled-danger-background-color: var(--color-danger-default); --select-filled-danger-border-color: var(--color-danger-default-border); --select-filled-danger-icon-color: var(--text-control-color); --select-filled-danger-text-color: var(--text-control-color); --select-filled-danger-placeholder-text-color: var(--text-control-color); --select-filled-danger-focus-background-color: var(--color-danger-focus); --select-filled-danger-focus-border-color: var(--color-danger-focus-border); --select-filled-danger-hover-background-color: var(--color-danger-hover); --select-filled-danger-hover-border-color: var(--color-danger-hover-border); --select-filled-danger-focus-and-hover-background-color: var(--select-filled-danger-hover-background-color); --select-filled-danger-focus-and-hover-border-color: var(--select-filled-danger-hover-border-color); --select-filled-danger-disabled-background-color: var(--background-basic-color-2); --select-filled-danger-disabled-border-color: var(--border-basic-color-2); --select-filled-danger-disabled-icon-color: var(--text-disabled-color); --select-filled-danger-disabled-text-color: var(--text-disabled-color); --select-filled-control-background-color: var(--color-control-default); --select-filled-control-border-color: var(--color-control-default-border); --select-filled-control-icon-color: var(--color-basic-800); --select-filled-control-text-color: var(--color-basic-800); --select-filled-control-placeholder-text-color: var(--text-hint-color); --select-filled-control-focus-background-color: var(--color-control-focus); --select-filled-control-focus-border-color: var(--color-control-focus-border); --select-filled-control-hover-background-color: var(--color-control-hover); --select-filled-control-hover-border-color: var(--color-control-hover-border); --select-filled-control-focus-and-hover-background-color: var(--select-filled-control-hover-background-color); --select-filled-control-focus-and-hover-border-color: var(--select-filled-control-hover-border-color); --select-filled-control-disabled-background-color: var(--background-basic-color-2); --select-filled-control-disabled-border-color: var(--border-basic-color-2); --select-filled-control-disabled-icon-color: var(--text-disabled-color); --select-filled-control-disabled-text-color: var(--text-disabled-color); --select-hero-tiny-padding: 0.25rem 1rem; --select-hero-small-padding: 0.25rem 1rem; --select-hero-medium-padding: 0.5rem 1rem; --select-hero-large-padding: 0.75rem 1rem; --select-hero-giant-padding: 1rem 1rem; --select-hero-basic-left-background-color: var(--color-basic-200); --select-hero-basic-right-background-color: var(--color-basic-default); --select-hero-basic-icon-color: var(--color-basic-800); --select-hero-basic-text-color: var(--color-basic-800); --select-hero-basic-placeholder-text-color: var(--text-hint-color); --select-hero-basic-focus-left-background-color: var(--color-basic-300); --select-hero-basic-focus-right-background-color: var(--color-basic-400); --select-hero-basic-hover-left-background-color: var(--color-basic-100); --select-hero-basic-hover-right-background-color: var(--color-basic-hover); --select-hero-basic-focus-and-hover-left-background-color: var(--select-hero-basic-hover-left-background-color); --select-hero-basic-focus-and-hover-right-background-color: var(--select-hero-basic-hover-right-background-color); --select-hero-basic-disabled-background-color: var(--background-basic-color-2); --select-hero-basic-disabled-icon-color: var(--text-disabled-color); --select-hero-basic-disabled-text-color: var(--text-disabled-color); --select-hero-primary-left-background-color: var(--color-primary-400); --select-hero-primary-right-background-color: var(--color-primary-default); --select-hero-primary-icon-color: var(--text-control-color); --select-hero-primary-text-color: var(--text-control-color); --select-hero-primary-placeholder-text-color: var(--text-control-color); --select-hero-primary-focus-left-background-color: var(--color-primary-500); --select-hero-primary-focus-right-background-color: var(--color-primary-focus); --select-hero-primary-hover-left-background-color: var(--color-primary-300); --select-hero-primary-hover-right-background-color: var(--color-primary-hover); --select-hero-primary-focus-and-hover-left-background-color: var(--select-hero-primary-hover-left-background-color); --select-hero-primary-focus-and-hover-right-background-color: var(--select-hero-primary-hover-right-background-color); --select-hero-primary-disabled-background-color: var(--background-basic-color-2); --select-hero-primary-disabled-icon-color: var(--text-disabled-color); --select-hero-primary-disabled-text-color: var(--text-disabled-color); --select-hero-success-left-background-color: var(--color-success-400); --select-hero-success-right-background-color: var(--color-success-default); --select-hero-success-icon-color: var(--text-control-color); --select-hero-success-text-color: var(--text-control-color); --select-hero-success-placeholder-text-color: var(--text-control-color); --select-hero-success-focus-left-background-color: var(--color-success-500); --select-hero-success-focus-right-background-color: var(--color-success-focus); --select-hero-success-hover-left-background-color: var(--color-success-300); --select-hero-success-hover-right-background-color: var(--color-success-hover); --select-hero-success-focus-and-hover-left-background-color: var(--select-hero-success-hover-left-background-color); --select-hero-success-focus-and-hover-right-background-color: var(--select-hero-success-hover-right-background-color); --select-hero-success-disabled-background-color: var(--background-basic-color-2); --select-hero-success-disabled-icon-color: var(--text-disabled-color); --select-hero-success-disabled-text-color: var(--text-disabled-color); --select-hero-info-left-background-color: var(--color-info-400); --select-hero-info-right-background-color: var(--color-info-default); --select-hero-info-icon-color: var(--text-control-color); --select-hero-info-text-color: var(--text-control-color); --select-hero-info-placeholder-text-color: var(--text-control-color); --select-hero-info-focus-left-background-color: var(--color-info-500); --select-hero-info-focus-right-background-color: var(--color-info-focus); --select-hero-info-hover-left-background-color: var(--color-info-300); --select-hero-info-hover-right-background-color: var(--color-info-hover); --select-hero-info-focus-and-hover-left-background-color: var(--select-hero-info-hover-left-background-color); --select-hero-info-focus-and-hover-right-background-color: var(--select-hero-info-hover-right-background-color); --select-hero-info-disabled-background-color: var(--background-basic-color-2); --select-hero-info-disabled-icon-color: var(--text-disabled-color); --select-hero-info-disabled-text-color: var(--text-disabled-color); --select-hero-warning-left-background-color: var(--color-warning-400); --select-hero-warning-right-background-color: var(--color-warning-default); --select-hero-warning-icon-color: var(--text-control-color); --select-hero-warning-text-color: var(--text-control-color); --select-hero-warning-placeholder-text-color: var(--text-control-color); --select-hero-warning-focus-left-background-color: var(--color-warning-500); --select-hero-warning-focus-right-background-color: var(--color-warning-focus); --select-hero-warning-hover-left-background-color: var(--color-warning-300); --select-hero-warning-hover-right-background-color: var(--color-warning-hover); --select-hero-warning-focus-and-hover-left-background-color: var(--select-hero-warning-hover-left-background-color); --select-hero-warning-focus-and-hover-right-background-color: var(--select-hero-warning-hover-right-background-color); --select-hero-warning-disabled-background-color: var(--background-basic-color-2); --select-hero-warning-disabled-icon-color: var(--text-disabled-color); --select-hero-warning-disabled-text-color: var(--text-disabled-color); --select-hero-danger-left-background-color: var(--color-danger-400); --select-hero-danger-right-background-color: var(--color-danger-default); --select-hero-danger-icon-color: var(--text-control-color); --select-hero-danger-text-color: var(--text-control-color); --select-hero-danger-placeholder-text-color: var(--text-control-color); --select-hero-danger-focus-left-background-color: var(--color-danger-500); --select-hero-danger-focus-right-background-color: var(--color-danger-focus); --select-hero-danger-hover-left-background-color: var(--color-danger-300); --select-hero-danger-hover-right-background-color: var(--color-danger-hover); --select-hero-danger-focus-and-hover-left-background-color: var(--select-hero-danger-hover-left-background-color); --select-hero-danger-focus-and-hover-right-background-color: var(--select-hero-danger-hover-right-background-color); --select-hero-danger-disabled-background-color: var(--background-basic-color-2); --select-hero-danger-disabled-icon-color: var(--text-disabled-color); --select-hero-danger-disabled-text-color: var(--text-disabled-color); --select-hero-control-left-background-color: var(--color-control-default); --select-hero-control-right-background-color: var(--color-control-default); --select-hero-control-icon-color: var(--color-basic-800); --select-hero-control-text-color: var(--color-basic-800); --select-hero-control-placeholder-text-color: var(--text-hint-color); --select-hero-control-focus-left-background-color: var(--color-basic-200); --select-hero-control-focus-right-background-color: var(--color-control-focus); --select-hero-control-hover-left-background-color: var(--color-basic-100); --select-hero-control-hover-right-background-color: var(--color-control-hover); --select-hero-control-focus-and-hover-left-background-color: var(--select-hero-control-hover-left-background-color); --select-hero-control-focus-and-hover-right-background-color: var(--select-hero-control-hover-right-background-color); --select-hero-control-disabled-background-color: var(--background-basic-color-2); --select-hero-control-disabled-icon-color: var(--text-disabled-color); --select-hero-control-disabled-text-color: var(--text-disabled-color); --datepicker-background-color: var(--background-basic-color-1); --datepicker-border-color: var(--border-basic-color-4); --datepicker-border-style: solid; --datepicker-border-width: 0.0625rem; --datepicker-border-radius: var(--border-radius); --datepicker-shadow: none; --timepicker-cell-text-color: var(--text-basic-color); --timepicker-cell-hover-background-color: var(--background-basic-color-2); --timepicker-cell-hover-text-color: var(--text-basic-color); --timepicker-cell-focus-background-color: var(--color-basic-focus); --timepicker-cell-focus-text-color: var(--text-basic-color); --timepicker-cell-active-background-color: var(--color-primary-default); --timepicker-cell-active-text-color: var(--text-control-color); --timepicker-cell-text-font-size: var(--text-subtitle-font-size); --timepicker-cell-text-font-family: var(--text-subtitle-font-family); --timepicker-cell-text-line-height: var(--text-subtitle-line-height); --timepicker-cell-text-font-weight: var(--text-subtitle-font-weight); --timepicker-cell-height: 2.75rem; --timepicker-header-cell-text-color: var(--text-hint-color); --timepicker-header-cell-text-font-size: var(--text-subtitle-font-size); --timepicker-header-cell-text-font-family: var(--text-subtitle-font-family); --timepicker-header-cell-height: 2.75rem; --timepicker-header-cell-text-line-height: var(--text-subtitle-line-height); --timepicker-header-cell-text-font-weight: var(--text-subtitle-font-weight); --timepicker-border-color: var(--datepicker-border-color); --timepicker-border-style: var(--datepicker-border-style); --timepicker-border-width: var(--datepicker-border-width); --timepicker-scrollbar-color: var(--scrollbar-color); --timepicker-scrollbar-background-color: var(--scrollbar-background-color); --timepicker-scrollbar-width: var(--scrollbar-width); --timepicker-single-column-width: 5rem; --timepicker-multiple-column-width: 13.875rem; --timepicker-title-height: 3.75rem; --timepicker-title-padding: var(--text-paragraph-line-height); --timepicker-container-width: 20rem; --timepicker-container-height: 26.1875rem; --radio-width: 1.25rem; --radio-height: 1.25rem; --radio-border-style: solid; --radio-border-width: 1px; --radio-text-font-family: var(--text-subtitle-2-font-family); --radio-text-font-size: var(--text-subtitle-2-font-size); --radio-text-font-weight: var(--text-subtitle-2-font-weight); --radio-text-line-height: var(--text-subtitle-2-line-height); --radio-outline-color: var(--outline-color); --radio-outline-width: var(--outline-width); --radio-basic-text-color: var(--text-basic-color); --radio-basic-border-color: var(--color-basic-transparent-default-border); --radio-basic-background-color: var(--color-basic-transparent-default); --radio-basic-checked-background-color: transparent; --radio-basic-checked-border-color: var(--color-primary-default-border); --radio-basic-inner-circle-color: var(--color-primary-default); --radio-basic-focus-border-color: var(--color-primary-transparent-focus-border); --radio-basic-focus-background-color: var(--color-primary-transparent-focus); --radio-basic-focus-checked-background-color: transparent; --radio-basic-focus-checked-border-color: var(--color-primary-focus-border); --radio-basic-focus-inner-circle-color: var(--color-primary-focus); --radio-basic-hover-background-color: var(--color-primary-transparent-hover); --radio-basic-hover-border-color: var(--color-primary-transparent-hover-border); --radio-basic-hover-inner-circle-color: var(--color-primary-hover); --radio-basic-hover-checked-background-color: transparent; --radio-basic-hover-checked-border-color: var(--color-primary-hover-border); --radio-basic-active-background-color: var(--color-primary-transparent-active); --radio-basic-active-border-color: var(--color-primary-transparent-active-border); --radio-basic-active-inner-circle-color: var(--color-primary-active); --radio-basic-active-checked-background-color: transparent; --radio-basic-active-checked-border-color: var(--color-primary-active-border); --radio-basic-disabled-background-color: var(--color-basic-transparent-disabled); --radio-basic-disabled-border-color: var(--color-basic-transparent-disabled-border); --radio-basic-disabled-text-color: var(--text-disabled-color); --radio-basic-disabled-checked-background-color: transparent; --radio-basic-disabled-checked-border-color: var(--color-basic-transparent-600); --radio-basic-disabled-checked-inner-circle-color: var(--color-basic-transparent-600); --radio-primary-text-color: var(--text-basic-color); --radio-primary-border-color: var(--color-primary-transparent-default-border); --radio-primary-background-color: var(--color-primary-transparent-default); --radio-primary-checked-background-color: transparent; --radio-primary-checked-border-color: var(--color-primary-default-border); --radio-primary-inner-circle-color: var(--color-primary-default); --radio-primary-focus-border-color: var(--color-primary-transparent-focus-border); --radio-primary-focus-background-color: var(--color-primary-transparent-focus); --radio-primary-focus-checked-background-color: transparent; --radio-primary-focus-checked-border-color: var(--color-primary-focus-border); --radio-primary-focus-inner-circle-color: var(--color-primary-focus); --radio-primary-hover-background-color: var(--color-primary-transparent-hover); --radio-primary-hover-border-color: var(--color-primary-transparent-hover-border); --radio-primary-hover-inner-circle-color: var(--color-primary-hover); --radio-primary-hover-checked-background-color: transparent; --radio-primary-hover-checked-border-color: var(--color-primary-hover-border); --radio-primary-active-border-color: var(--color-primary-transparent-active-border); --radio-primary-active-background-color: var(--color-primary-transparent-active); --radio-primary-active-checked-background-color: transparent; --radio-primary-active-checked-border-color: var(--color-primary-active-border); --radio-primary-active-inner-circle-color: var(--color-primary-active); --radio-primary-disabled-background-color: var(--color-basic-transparent-disabled); --radio-primary-disabled-border-color: var(--color-basic-transparent-disabled-border); --radio-primary-disabled-text-color: var(--text-disabled-color); --radio-primary-disabled-checked-background-color: transparent; --radio-primary-disabled-checked-border-color: var(--color-basic-transparent-600); --radio-primary-disabled-checked-inner-circle-color: var(--color-basic-transparent-600); --radio-success-text-color: var(--text-basic-color); --radio-success-border-color: var(--color-success-transparent-default-border); --radio-success-background-color: var(--color-success-transparent-default); --radio-success-checked-background-color: transparent; --radio-success-checked-border-color: var(--color-success-default-border); --radio-success-inner-circle-color: var(--color-success-default); --radio-success-focus-border-color: var(--color-success-transparent-focus-border); --radio-success-focus-background-color: var(--color-success-transparent-focus); --radio-success-focus-checked-background-color: transparent; --radio-success-focus-checked-border-color: var(--color-success-focus-border); --radio-success-focus-inner-circle-color: var(--color-success-focus); --radio-success-hover-background-color: var(--color-success-transparent-hover); --radio-success-hover-border-color: var(--color-success-transparent-hover-border); --radio-success-hover-inner-circle-color: var(--color-success-hover); --radio-success-hover-checked-background-color: transparent; --radio-success-hover-checked-border-color: var(--color-success-hover-border); --radio-success-active-background-color: var(--color-success-transparent-active); --radio-success-active-border-color: var(--color-success-transparent-active-border); --radio-success-active-checked-background-color: transparent; --radio-success-active-checked-border-color: var(--color-success-active-border); --radio-success-active-inner-circle-color: var(--color-success-active); --radio-success-disabled-background-color: var(--color-basic-transparent-disabled); --radio-success-disabled-border-color: var(--color-basic-transparent-disabled-border); --radio-success-disabled-text-color: var(--text-disabled-color); --radio-success-disabled-checked-background-color: transparent; --radio-success-disabled-checked-border-color: var(--color-basic-transparent-600); --radio-success-disabled-checked-inner-circle-color: var(--color-basic-transparent-600); --radio-info-text-color: var(--text-basic-color); --radio-info-border-color: var(--color-info-transparent-default-border); --radio-info-background-color: var(--color-info-transparent-default); --radio-info-checked-background-color: transparent; --radio-info-checked-border-color: var(--color-info-default-border); --radio-info-inner-circle-color: var(--color-info-default); --radio-info-focus-background-color: var(--color-info-transparent-focus); --radio-info-focus-border-color: var(--color-info-transparent-focus-border); --radio-info-focus-checked-background-color: transparent; --radio-info-focus-checked-border-color: var(--color-info-focus-border); --radio-info-focus-inner-circle-color: var(--color-info-focus); --radio-info-hover-background-color: var(--color-info-transparent-hover); --radio-info-hover-border-color: var(--color-info-transparent-hover-border); --radio-info-hover-inner-circle-color: var(--color-info-hover); --radio-info-hover-checked-background-color: transparent; --radio-info-hover-checked-border-color: var(--color-info-hover-border); --radio-info-active-background-color: var(--color-info-transparent-active); --radio-info-active-border-color: var(--color-info-transparent-active-border); --radio-info-active-checked-background-color: transparent; --radio-info-active-checked-border-color: var(--color-info-active-border); --radio-info-active-inner-circle-color: var(--color-info-active); --radio-info-disabled-background-color: var(--color-basic-transparent-disabled); --radio-info-disabled-border-color: var(--color-basic-transparent-disabled-border); --radio-info-disabled-text-color: var(--text-disabled-color); --radio-info-disabled-checked-background-color: transparent; --radio-info-disabled-checked-border-color: var(--color-basic-transparent-600); --radio-info-disabled-checked-inner-circle-color: var(--color-basic-transparent-600); --radio-warning-text-color: var(--text-basic-color); --radio-warning-border-color: var(--color-warning-transparent-default-border); --radio-warning-background-color: var(--color-warning-transparent-default); --radio-warning-checked-background-color: transparent; --radio-warning-checked-border-color: var(--color-warning-default-border); --radio-warning-inner-circle-color: var(--color-warning-default); --radio-warning-focus-background-color: var(--color-warning-transparent-focus); --radio-warning-focus-border-color: var(--color-warning-transparent-focus-border); --radio-warning-focus-checked-background-color: transparent; --radio-warning-focus-checked-border-color: var(--color-warning-focus-border); --radio-warning-focus-inner-circle-color: var(--color-warning-focus); --radio-warning-hover-background-color: var(--color-warning-transparent-hover); --radio-warning-hover-border-color: var(--color-warning-transparent-hover-border); --radio-warning-hover-inner-circle-color: var(--color-warning-hover); --radio-warning-hover-checked-background-color: transparent; --radio-warning-hover-checked-border-color: var(--color-warning-hover-border); --radio-warning-active-background-color: var(--color-warning-transparent-active); --radio-warning-active-border-color: var(--color-warning-transparent-active-border); --radio-warning-active-checked-background-color: transparent; --radio-warning-active-checked-border-color: var(--color-warning-active-border); --radio-warning-active-inner-circle-color: var(--color-warning-active); --radio-warning-disabled-background-color: var(--color-basic-transparent-disabled); --radio-warning-disabled-border-color: var(--color-basic-transparent-disabled-border); --radio-warning-disabled-text-color: var(--text-disabled-color); --radio-warning-disabled-checked-background-color: transparent; --radio-warning-disabled-checked-border-color: var(--color-basic-transparent-600); --radio-warning-disabled-checked-inner-circle-color: var(--color-basic-transparent-600); --radio-danger-text-color: var(--text-basic-color); --radio-danger-border-color: var(--color-danger-transparent-default-border); --radio-danger-background-color: var(--color-danger-transparent-default); --radio-danger-checked-background-color: transparent; --radio-danger-checked-border-color: var(--color-danger-default-border); --radio-danger-inner-circle-color: var(--color-danger-default); --radio-danger-focus-background-color: var(--color-danger-transparent-focus); --radio-danger-focus-border-color: var(--color-danger-transparent-focus-border); --radio-danger-focus-checked-background-color: transparent; --radio-danger-focus-checked-border-color: var(--color-danger-focus-border); --radio-danger-focus-inner-circle-color: var(--color-danger-focus); --radio-danger-hover-background-color: var(--color-danger-transparent-hover); --radio-danger-hover-border-color: var(--color-danger-transparent-hover-border); --radio-danger-hover-inner-circle-color: var(--color-danger-hover); --radio-danger-hover-checked-background-color: transparent; --radio-danger-hover-checked-border-color: var(--color-danger-hover-border); --radio-danger-active-background-color: var(--color-danger-transparent-active); --radio-danger-active-border-color: var(--color-danger-transparent-active-border); --radio-danger-active-checked-background-color: transparent; --radio-danger-active-checked-border-color: var(--color-danger-active-border); --radio-danger-active-inner-circle-color: var(--color-danger-active); --radio-danger-disabled-background-color: var(--color-basic-transparent-disabled); --radio-danger-disabled-border-color: var(--color-basic-transparent-disabled-border); --radio-danger-disabled-text-color: var(--text-disabled-color); --radio-danger-disabled-checked-background-color: transparent; --radio-danger-disabled-checked-border-color: var(--color-basic-transparent-600); --radio-danger-disabled-checked-inner-circle-color: var(--color-basic-transparent-600); --radio-control-text-color: var(--text-control-color); --radio-control-background-color: var(--color-control-transparent-default); --radio-control-border-color: var(--color-control-transparent-default-border); --radio-control-checked-background-color: transparent; --radio-control-checked-border-color: var(--color-control-default-border); --radio-control-inner-circle-color: var(--color-control-default); --radio-control-focus-background-color: var(--color-control-transparent-focus); --radio-control-focus-border-color: var(--color-control-transparent-focus-border); --radio-control-focus-checked-background-color: transparent; --radio-control-focus-checked-border-color: var(--color-control-focus-border); --radio-control-focus-inner-circle-color: var(--color-control-focus); --radio-control-hover-background-color: var(--color-control-transparent-hover); --radio-control-hover-border-color: var(--color-control-transparent-hover-border); --radio-control-hover-inner-circle-color: var(--color-control-hover); --radio-control-hover-checked-background-color: transparent; --radio-control-hover-checked-border-color: var(--color-control-hover-border); --radio-control-active-background-color: var(--color-control-transparent-active); --radio-control-active-border-color: var(--color-control-transparent-active-border); --radio-control-active-checked-background-color: transparent; --radio-control-active-checked-border-color: var(--color-control-active-border); --radio-control-active-inner-circle-color: var(--color-control-active); --radio-control-disabled-background-color: var(--color-control-transparent-disabled); --radio-control-disabled-border-color: var(--color-control-transparent-disabled-border); --radio-control-disabled-text-color: var(--color-basic-100); --radio-control-disabled-checked-background-color: transparent; --radio-control-disabled-checked-border-color: var(--color-basic-transparent-600); --radio-control-disabled-checked-inner-circle-color: var(--color-basic-transparent-600); --tree-grid-cell-border-width: 1px; --tree-grid-cell-border-style: solid; --tree-grid-cell-border-color: var(--border-basic-color-2); --tree-grid-row-min-height: 2rem; --tree-grid-cell-padding: 0.875rem 1.25rem; --tree-grid-header-background-color: var(--background-basic-color-1); --tree-grid-header-text-color: var(--text-basic-color); --tree-grid-header-text-font-family: var(--text-subtitle-font-family); --tree-grid-header-text-font-size: var(--text-subtitle-font-size); --tree-grid-header-text-font-weight: var(--text-subtitle-font-weight); --tree-grid-header-text-line-height: var(--text-subtitle-line-height); --tree-grid-footer-background-color: var(--background-basic-color-1); --tree-grid-footer-text-color: var(--text-basic-color); --tree-grid-footer-text-font-family: var(--tree-grid-header-text-font-family); --tree-grid-footer-text-font-size: var(--tree-grid-header-text-font-size); --tree-grid-footer-text-font-weight: var(--tree-grid-header-text-font-weight); --tree-grid-footer-text-line-height: var(--tree-grid-header-text-line-height); --tree-grid-row-background-color: var(--background-basic-color-1); --tree-grid-row-even-background-color: var(--background-basic-color-1); --tree-grid-row-hover-background-color: var(--background-basic-color-1); --tree-grid-row-text-color: var(--text-basic-color); --tree-grid-row-text-font-family: var(--text-paragraph-font-family); --tree-grid-row-text-font-size: var(--text-paragraph-font-size); --tree-grid-row-text-font-weight: var(--text-paragraph-font-weight); --tree-grid-row-text-line-height: var(--text-paragraph-line-height); --tree-grid-sort-header-button-background-color: transparent; --tree-grid-sort-header-button-border: none; --tree-grid-sort-header-button-padding: 0; --icon-font-size: 1.25rem; --icon-line-height: 1; --icon-width: 1em; --icon-height: 1em; --icon-svg-vertical-align: top; --icon-basic-color: var(--text-hint-color); --icon-primary-color: var(--color-primary-default); --icon-info-color: var(--color-info-default); --icon-success-color: var(--color-success-default); --icon-warning-color: var(--color-warning-default); --icon-danger-color: var(--color-danger-default); --icon-control-color: var(--color-basic-100); --tag-text-font-family: var(--text-subtitle-font-family); --tag-text-transform: capitalize; --tag-border-width: 0.0625rem; --tag-border-style: solid; --tag-border-radius: 1.5rem; --tag-tiny-text-font-size: var(--input-tiny-text-font-size); --tag-tiny-text-font-weight: var(--input-tiny-text-font-weight); --tag-tiny-text-line-height: var(--input-tiny-text-line-height); --tag-tiny-padding: 0.0625rem 0.9375rem; --tag-tiny-close-offset: 0.625rem; --tag-small-text-font-size: var(--input-small-text-font-size); --tag-small-text-font-weight: var(--input-small-text-font-weight); --tag-small-text-line-height: var(--input-small-text-line-height); --tag-small-padding: 0.0625rem 0.9375rem; --tag-small-close-offset: 0.625rem; --tag-medium-text-font-size: var(--input-medium-text-font-size); --tag-medium-text-font-weight: var(--input-medium-text-font-weight); --tag-medium-text-line-height: var(--input-medium-text-line-height); --tag-medium-padding: 0.1875rem 0.9375rem; --tag-medium-close-offset: 0.625rem; --tag-large-text-font-size: var(--input-large-text-font-size); --tag-large-text-font-weight: var(--input-large-text-font-weight); --tag-large-text-line-height: var(--input-large-text-line-height); --tag-large-padding: 0.3125rem 0.9375rem; --tag-large-close-offset: 0.625rem; --tag-giant-text-font-size: var(--input-giant-text-font-size); --tag-giant-text-font-weight: var(--input-giant-text-font-weight); --tag-giant-text-line-height: var(--input-giant-text-line-height); --tag-giant-padding: 0.4375rem 0.9375rem; --tag-giant-close-offset: 0.625rem; --tag-filled-basic-background-color: var(--color-basic-default); --tag-filled-basic-border-color: var(--color-basic-default-border); --tag-filled-basic-text-color: var(--color-basic-800); --tag-filled-basic-active-background-color: var(--color-basic-focus); --tag-filled-basic-active-border-color: var(--color-basic-focus-border); --tag-filled-basic-hover-background-color: var(--color-basic-hover); --tag-filled-basic-hover-border-color: var(--color-basic-hover-border); --tag-filled-basic-selected-background-color: color-basic-actove; --tag-filled-basic-selected-border-color: var(--color-basic-active-border); --tag-filled-primary-background-color: var(--color-primary-default); --tag-filled-primary-border-color: var(--color-primary-default-border); --tag-filled-primary-text-color: var(--text-control-color); --tag-filled-primary-active-background-color: var(--color-primary-focus); --tag-filled-primary-active-border-color: var(--color-primary-focus-border); --tag-filled-primary-hover-background-color: var(--color-primary-hover); --tag-filled-primary-hover-border-color: var(--color-primary-hover-border); --tag-filled-primary-selected-background-color: color-primary-actove; --tag-filled-primary-selected-border-color: var(--color-primary-active-border); --tag-filled-success-background-color: var(--color-success-default); --tag-filled-success-border-color: var(--color-success-default-border); --tag-filled-success-text-color: var(--text-control-color); --tag-filled-success-active-background-color: var(--color-success-focus); --tag-filled-success-active-border-color: var(--color-success-focus-border); --tag-filled-success-hover-background-color: var(--color-success-hover); --tag-filled-success-hover-border-color: var(--color-success-hover-border); --tag-filled-success-selected-background-color: color-success-actove; --tag-filled-success-selected-border-color: var(--color-success-active-border); --tag-filled-info-background-color: var(--color-info-default); --tag-filled-info-border-color: var(--color-info-default-border); --tag-filled-info-text-color: var(--text-control-color); --tag-filled-info-active-background-color: var(--color-info-focus); --tag-filled-info-active-border-color: var(--color-info-focus-border); --tag-filled-info-hover-background-color: var(--color-info-hover); --tag-filled-info-hover-border-color: var(--color-info-hover-border); --tag-filled-info-selected-background-color: color-info-actove; --tag-filled-info-selected-border-color: var(--color-info-active-border); --tag-filled-warning-background-color: var(--color-warning-default); --tag-filled-warning-border-color: var(--color-warning-default-border); --tag-filled-warning-text-color: var(--text-control-color); --tag-filled-warning-active-background-color: var(--color-warning-focus); --tag-filled-warning-active-border-color: var(--color-warning-focus-border); --tag-filled-warning-hover-background-color: var(--color-warning-hover); --tag-filled-warning-hover-border-color: var(--color-warning-hover-border); --tag-filled-warning-selected-background-color: color-warning-actove; --tag-filled-warning-selected-border-color: var(--color-warning-active-border); --tag-filled-danger-background-color: var(--color-danger-default); --tag-filled-danger-border-color: var(--color-danger-default-border); --tag-filled-danger-text-color: var(--text-control-color); --tag-filled-danger-active-background-color: var(--color-danger-focus); --tag-filled-danger-active-border-color: var(--color-danger-focus-border); --tag-filled-danger-hover-background-color: var(--color-danger-hover); --tag-filled-danger-hover-border-color: var(--color-danger-hover-border); --tag-filled-danger-selected-background-color: color-danger-actove; --tag-filled-danger-selected-border-color: var(--color-danger-active-border); --tag-filled-control-background-color: var(--color-control-default); --tag-filled-control-border-color: var(--color-control-default-border); --tag-filled-control-text-color: var(--color-basic-800); --tag-filled-control-active-background-color: var(--color-control-hover); --tag-filled-control-active-border-color: var(--color-control-hover-border); --tag-filled-control-hover-background-color: var(--color-control-focus); --tag-filled-control-hover-border-color: var(--color-control-focus-border); --tag-filled-control-selected-background-color: color-control-actove; --tag-filled-control-selected-border-color: var(--color-control-active-border); --tag-outline-basic-background-color: var(--color-basic-transparent-default); --tag-outline-basic-border-color: var(--color-basic-transparent-default-border); --tag-outline-basic-text-color: var(--text-hint-color); --tag-outline-basic-active-background-color: var(--color-basic-transparent-focus); --tag-outline-basic-active-border-color: var(--color-basic-transparent-focus-border); --tag-outline-basic-active-text-color: var(--text-hint-color); --tag-outline-basic-hover-background-color: var(--color-basic-transparent-hover); --tag-outline-basic-hover-border-color: var(--color-basic-transparent-hover-border); --tag-outline-basic-hover-text-color: var(--text-hint-color); --tag-outline-basic-selected-background-color: var(--color-basic-transparent-active); --tag-outline-basic-selected-border-color: var(--color-basic-transparent-active-border); --tag-outline-basic-selected-text-color: var(--text-hint-color); --tag-outline-primary-background-color: var(--color-primary-transparent-default); --tag-outline-primary-border-color: var(--color-primary-transparent-default-border); --tag-outline-primary-text-color: var(--text-primary-color); --tag-outline-primary-active-background-color: var(--color-primary-transparent-focus); --tag-outline-primary-active-border-color: var(--color-primary-transparent-focus-border); --tag-outline-primary-active-text-color: var(--text-primary-color); --tag-outline-primary-hover-background-color: var(--color-primary-transparent-hover); --tag-outline-primary-hover-border-color: var(--color-primary-transparent-hover-border); --tag-outline-primary-hover-text-color: var(--text-primary-color); --tag-outline-primary-selected-background-color: var(--color-primary-transparent-active); --tag-outline-primary-selected-border-color: var(--color-primary-transparent-active-border); --tag-outline-primary-selected-text-color: var(--text-primary-color); --tag-outline-success-background-color: var(--color-success-transparent-default); --tag-outline-success-border-color: var(--color-success-transparent-default-border); --tag-outline-success-text-color: var(--text-success-color); --tag-outline-success-active-background-color: var(--color-success-transparent-focus); --tag-outline-success-active-border-color: var(--color-success-transparent-focus-border); --tag-outline-success-active-text-color: var(--text-success-color); --tag-outline-success-hover-background-color: var(--color-success-transparent-hover); --tag-outline-success-hover-border-color: var(--color-success-transparent-hover-border); --tag-outline-success-hover-text-color: var(--text-success-color); --tag-outline-success-selected-background-color: var(--color-success-transparent-active); --tag-outline-success-selected-border-color: var(--color-success-transparent-active-border); --tag-outline-success-selected-text-color: var(--text-success-color); --tag-outline-info-background-color: var(--color-info-transparent-default); --tag-outline-info-border-color: var(--color-info-transparent-default-border); --tag-outline-info-text-color: var(--text-info-color); --tag-outline-info-active-background-color: var(--color-info-transparent-focus); --tag-outline-info-active-border-color: var(--color-info-transparent-focus-border); --tag-outline-info-active-text-color: var(--text-info-color); --tag-outline-info-hover-background-color: var(--color-info-transparent-hover); --tag-outline-info-hover-border-color: var(--color-info-transparent-hover-border); --tag-outline-info-hover-text-color: var(--text-info-color); --tag-outline-info-selected-background-color: var(--color-info-transparent-active); --tag-outline-info-selected-border-color: var(--color-info-transparent-active-border); --tag-outline-info-selected-text-color: var(--text-info-color); --tag-outline-warning-background-color: var(--color-warning-transparent-default); --tag-outline-warning-border-color: var(--color-warning-transparent-default-border); --tag-outline-warning-text-color: var(--text-warning-color); --tag-outline-warning-active-background-color: var(--color-warning-transparent-focus); --tag-outline-warning-active-border-color: var(--color-warning-transparent-focus-border); --tag-outline-warning-active-text-color: var(--text-warning-color); --tag-outline-warning-hover-background-color: var(--color-warning-transparent-hover); --tag-outline-warning-hover-border-color: var(--color-warning-transparent-hover-border); --tag-outline-warning-hover-text-color: var(--text-warning-color); --tag-outline-warning-selected-background-color: var(--color-warning-transparent-active); --tag-outline-warning-selected-border-color: var(--color-warning-transparent-active-border); --tag-outline-warning-selected-text-color: var(--text-warning-color); --tag-outline-danger-background-color: var(--color-danger-transparent-default); --tag-outline-danger-border-color: var(--color-danger-transparent-default-border); --tag-outline-danger-text-color: var(--text-danger-color); --tag-outline-danger-active-background-color: var(--color-danger-transparent-focus); --tag-outline-danger-active-border-color: var(--color-danger-transparent-focus-border); --tag-outline-danger-active-text-color: var(--text-danger-color); --tag-outline-danger-hover-background-color: var(--color-danger-transparent-hover); --tag-outline-danger-hover-border-color: var(--color-danger-transparent-hover-border); --tag-outline-danger-hover-text-color: var(--text-danger-color); --tag-outline-danger-selected-background-color: var(--color-danger-transparent-active); --tag-outline-danger-selected-border-color: var(--color-danger-transparent-active-border); --tag-outline-danger-selected-text-color: var(--text-danger-color); --tag-outline-control-background-color: var(--color-control-transparent-default); --tag-outline-control-border-color: var(--color-control-transparent-default-border); --tag-outline-control-text-color: var(--text-control-color); --tag-outline-control-active-background-color: var(--color-control-transparent-focus); --tag-outline-control-active-border-color: var(--color-control-transparent-focus-border); --tag-outline-control-active-text-color: var(--text-control-color); --tag-outline-control-hover-background-color: var(--color-control-transparent-hover); --tag-outline-control-hover-border-color: var(--color-control-transparent-hover-border); --tag-outline-control-hover-text-color: var(--text-control-color); --tag-outline-control-selected-background-color: var(--color-control-transparent-active); --tag-outline-control-selected-border-color: var(--color-control-transparent-active-border); --tag-outline-control-selected-text-color: var(--text-control-color); --tag-list-tiny-tag-offset: 0.0625rem; --tag-list-small-tag-offset: 0.125rem; --tag-list-medium-tag-offset: 0.25rem; --tag-list-large-tag-offset: 0.375rem; --tag-list-giant-tag-offset: 0.5rem; --tag-list-with-input-tiny-padding: 0.0625rem 1rem; --tag-list-with-input-small-padding: 0.0625rem 1rem; --tag-list-with-input-medium-padding: 0.1875rem 1rem; --tag-list-with-input-large-padding: 0.3125rem 1rem; --tag-list-with-input-giant-padding: 0.4375rem 1rem; --tag-list-with-input-rectangle-border-radius: var(--input-rectangle-border-radius); --tag-list-with-input-semi-round-border-radius: var(--input-semi-round-border-radius); --tag-list-with-input-round-border-radius: var(--input-round-border-radius); --tag-input-min-width: 6rem; --tag-input-text-font-family: var(--input-text-font-family); --tag-input-placeholder-text-font-family: var(--input-placeholder-text-font-family); --tag-input-basic-background-color: var(--input-basic-background-color); --tag-input-basic-border-color: var(--input-basic-border-color); --tag-input-basic-text-color: var(--input-basic-text-color); --tag-input-basic-placeholder-text-color: var(--input-basic-placeholder-text-color); --tag-input-basic-focus-background-color: var(--input-basic-focus-background-color); --tag-input-basic-focus-border-color: var(--input-basic-focus-border-color); --tag-input-basic-disabled-text-color: var(--input-basic-disabled-text-color); --tag-input-basic-disabled-placeholder-text-color: var(--input-basic-disabled-placeholder-text-color); --tag-input-primary-background-color: var(--input-primary-background-color); --tag-input-primary-border-color: var(--input-primary-border-color); --tag-input-primary-text-color: var(--input-primary-text-color); --tag-input-primary-placeholder-text-color: var(--input-primary-placeholder-text-color); --tag-input-primary-focus-background-color: var(--input-primary-focus-background-color); --tag-input-primary-focus-border-color: var(--input-primary-focus-border-color); --tag-input-primary-disabled-text-color: var(--input-primary-disabled-text-color); --tag-input-primary-disabled-placeholder-text-color: var(--input-primary-disabled-placeholder-text-color); --tag-input-success-background-color: var(--input-success-background-color); --tag-input-success-border-color: var(--input-success-border-color); --tag-input-success-text-color: var(--input-success-text-color); --tag-input-success-placeholder-text-color: var(--input-success-placeholder-text-color); --tag-input-success-focus-background-color: var(--input-success-focus-background-color); --tag-input-success-focus-border-color: var(--input-success-focus-border-color); --tag-input-success-disabled-text-color: var(--input-success-disabled-text-color); --tag-input-success-disabled-placeholder-text-color: var(--input-success-disabled-placeholder-text-color); --tag-input-info-background-color: var(--input-info-background-color); --tag-input-info-border-color: var(--input-info-border-color); --tag-input-info-text-color: var(--input-info-text-color); --tag-input-info-placeholder-text-color: var(--input-info-placeholder-text-color); --tag-input-info-focus-background-color: var(--input-info-focus-background-color); --tag-input-info-focus-border-color: var(--input-info-focus-border-color); --tag-input-info-disabled-text-color: var(--input-info-disabled-text-color); --tag-input-info-disabled-placeholder-text-color: var(--input-info-disabled-placeholder-text-color); --tag-input-warning-background-color: var(--input-warning-background-color); --tag-input-warning-border-color: var(--input-warning-border-color); --tag-input-warning-text-color: var(--input-warning-text-color); --tag-input-warning-placeholder-text-color: var(--input-warning-placeholder-text-color); --tag-input-warning-focus-background-color: var(--input-warning-focus-background-color); --tag-input-warning-focus-border-color: var(--input-warning-focus-border-color); --tag-input-warning-disabled-text-color: var(--input-warning-disabled-text-color); --tag-input-warning-disabled-placeholder-text-color: var(--input-warning-disabled-placeholder-text-color); --tag-input-danger-background-color: var(--input-danger-background-color); --tag-input-danger-border-color: var(--input-danger-border-color); --tag-input-danger-text-color: var(--input-danger-text-color); --tag-input-danger-placeholder-text-color: var(--input-danger-placeholder-text-color); --tag-input-danger-focus-background-color: var(--input-danger-focus-background-color); --tag-input-danger-focus-border-color: var(--input-danger-focus-border-color); --tag-input-danger-disabled-text-color: var(--input-danger-disabled-text-color); --tag-input-danger-disabled-placeholder-text-color: var(--input-danger-disabled-placeholder-text-color); --tag-input-control-background-color: var(--input-control-background-color); --tag-input-control-border-color: var(--input-control-border-color); --tag-input-control-text-color: var(--input-control-text-color); --tag-input-control-placeholder-text-color: var(--input-control-placeholder-text-color); --tag-input-control-focus-background-color: var(--input-control-focus-background-color); --tag-input-control-focus-border-color: var(--input-control-focus-border-color); --tag-input-control-disabled-text-color: var(--input-control-disabled-text-color); --tag-input-control-disabled-placeholder-text-color: var(--input-control-disabled-placeholder-text-color); --tag-input-tiny-text-font-size: var(--input-tiny-text-font-size); --tag-input-tiny-text-font-weight: var(--input-tiny-text-font-weight); --tag-input-tiny-text-line-height: var(--input-tiny-text-line-height); --tag-input-tiny-placeholder-text-font-size: var(--input-tiny-placeholder-text-font-size); --tag-input-tiny-placeholder-text-font-weight: var(--input-tiny-placeholder-text-font-weight); --tag-input-tiny-placeholder-text-line-height: var(--input-tiny-placeholder-text-line-height); --tag-input-tiny-padding: 0.125rem 0; --tag-input-small-text-font-size: var(--input-small-text-font-size); --tag-input-small-text-font-weight: var(--input-small-text-font-weight); --tag-input-small-text-line-height: var(--input-small-text-line-height); --tag-input-small-placeholder-text-font-size: var(--input-small-placeholder-text-font-size); --tag-input-small-placeholder-text-font-weight: var(--input-small-placeholder-text-font-weight); --tag-input-small-placeholder-text-line-height: var(--input-small-placeholder-text-line-height); --tag-input-small-padding: 0.125rem 0; --tag-input-medium-text-font-size: var(--input-medium-text-font-size); --tag-input-medium-text-font-weight: var(--input-medium-text-font-weight); --tag-input-medium-text-line-height: var(--input-medium-text-line-height); --tag-input-medium-placeholder-text-font-size: var(--input-medium-placeholder-text-font-size); --tag-input-medium-placeholder-text-font-weight: var(--input-medium-placeholder-text-font-weight); --tag-input-medium-placeholder-text-line-height: var(--input-medium-placeholder-text-line-height); --tag-input-medium-padding: 0.25rem 0; --tag-input-large-text-font-size: var(--input-large-text-font-size); --tag-input-large-text-font-weight: var(--input-large-text-font-weight); --tag-input-large-text-line-height: var(--input-large-text-line-height); --tag-input-large-placeholder-text-font-size: var(--input-large-placeholder-text-font-size); --tag-input-large-placeholder-text-font-weight: var(--input-large-placeholder-text-font-weight); --tag-input-large-placeholder-text-line-height: var(--input-large-placeholder-text-line-height); --tag-input-large-padding: 0.375rem 0; --tag-input-giant-text-font-size: var(--input-giant-text-font-size); --tag-input-giant-text-font-weight: var(--input-giant-text-font-weight); --tag-input-giant-text-line-height: var(--input-giant-text-line-height); --tag-input-giant-placeholder-text-font-size: var(--input-giant-placeholder-text-font-size); --tag-input-giant-placeholder-text-font-weight: var(--input-giant-placeholder-text-font-weight); --tag-input-giant-placeholder-text-line-height: var(--input-giant-placeholder-text-line-height); --tag-input-giant-padding: 0.5rem 0; --toggle-height: 1.875rem; --toggle-width: 3.125rem; --toggle-border-width: 1px; --toggle-border-radius: 100px; --toggle-outline-width: var(--outline-width); --toggle-outline-color: var(--outline-color); --toggle-switcher-size: 1.75rem; --toggle-switcher-icon-size: 0.75rem; --toggle-text-font-family: var(--text-subtitle-2-font-family); --toggle-text-font-size: var(--text-subtitle-2-font-size); --toggle-text-font-weight: var(--text-subtitle-2-font-weight); --toggle-text-line-height: var(--text-subtitle-2-line-height); --toggle-cursor: pointer; --toggle-disabled-cursor: default; --toggle-basic-text-color: var(--text-basic-color); --toggle-basic-background-color: var(--color-basic-transparent-default); --toggle-basic-border-color: var(--color-basic-transparent-default-border); --toggle-basic-checked-background-color: var(--color-primary-default); --toggle-basic-checked-border-color: var(--color-primary-default-border); --toggle-basic-checked-switcher-background-color: var(--background-basic-color-1); --toggle-basic-checked-switcher-checkmark-color: var(--color-primary-default); --toggle-basic-focus-background-color: var(--color-primary-transparent-focus); --toggle-basic-focus-border-color: var(--color-primary-transparent-focus-border); --toggle-basic-focus-checked-background-color: var(--color-primary-focus); --toggle-basic-focus-checked-border-color: var(--color-primary-focus-border); --toggle-basic-hover-background-color: var(--color-primary-transparent-hover); --toggle-basic-hover-border-color: var(--color-primary-transparent-hover-border); --toggle-basic-hover-checked-background-color: var(--color-primary-hover); --toggle-basic-hover-checked-border-color: var(--color-primary-hover-border); --toggle-basic-active-background-color: var(--color-primary-transparent-active); --toggle-basic-active-border-color: var(--color-primary-transparent-active-border); --toggle-basic-active-checked-background-color: var(--color-primary-active); --toggle-basic-active-checked-border-color: var(--color-primary-active-border); --toggle-basic-disabled-background-color: var(--color-basic-transparent-disabled); --toggle-basic-disabled-border-color: var(--color-basic-transparent-disabled-border); --toggle-basic-disabled-switcher-background-color: var(--color-basic-disabled); --toggle-basic-disabled-checked-switcher-checkmark-color: var(--text-control-color); --toggle-basic-disabled-text-color: var(--text-disabled-color); --toggle-primary-text-color: var(--text-basic-color); --toggle-primary-background-color: var(--color-primary-transparent-default); --toggle-primary-border-color: var(--color-primary-transparent-default-border); --toggle-primary-checked-background-color: var(--color-primary-default); --toggle-primary-checked-border-color: var(--color-primary-default-border); --toggle-primary-checked-switcher-background-color: var(--background-basic-color-1); --toggle-primary-checked-switcher-checkmark-color: var(--color-primary-default); --toggle-primary-focus-background-color: var(--color-primary-transparent-focus); --toggle-primary-focus-border-color: var(--color-primary-transparent-focus-border); --toggle-primary-focus-checked-background-color: var(--color-primary-focus); --toggle-primary-focus-checked-border-color: var(--color-primary-focus-border); --toggle-primary-hover-background-color: var(--color-primary-transparent-hover); --toggle-primary-hover-border-color: var(--color-primary-transparent-hover-border); --toggle-primary-hover-checked-background-color: var(--color-primary-hover); --toggle-primary-hover-checked-border-color: var(--color-primary-hover-border); --toggle-primary-active-background-color: var(--color-primary-transparent-active); --toggle-primary-active-border-color: var(--color-primary-transparent-active-border); --toggle-primary-active-checked-background-color: var(--color-primary-active); --toggle-primary-active-checked-border-color: var(--color-primary-active-border); --toggle-primary-disabled-background-color: var(--color-basic-transparent-disabled); --toggle-primary-disabled-border-color: var(--color-basic-transparent-disabled-border); --toggle-primary-disabled-switcher-background-color: var(--color-basic-disabled); --toggle-primary-disabled-checked-switcher-checkmark-color: var(--text-control-color); --toggle-primary-disabled-text-color: var(--text-disabled-color); --toggle-success-text-color: var(--text-basic-color); --toggle-success-background-color: var(--color-success-transparent-default); --toggle-success-border-color: var(--color-success-transparent-default-border); --toggle-success-checked-background-color: var(--color-success-default); --toggle-success-checked-border-color: var(--color-success-default-border); --toggle-success-checked-switcher-background-color: var(--background-basic-color-1); --toggle-success-checked-switcher-checkmark-color: var(--color-success-default); --toggle-success-focus-background-color: var(--color-success-transparent-focus); --toggle-success-focus-border-color: var(--color-success-transparent-focus-border); --toggle-success-focus-checked-background-color: var(--color-success-focus); --toggle-success-focus-checked-border-color: var(--color-success-focus-border); --toggle-success-hover-background-color: var(--color-success-transparent-hover); --toggle-success-hover-border-color: var(--color-success-transparent-hover-border); --toggle-success-hover-checked-background-color: var(--color-success-hover); --toggle-success-hover-checked-border-color: var(--color-success-hover-border); --toggle-success-active-background-color: var(--color-success-transparent-active); --toggle-success-active-border-color: var(--color-success-transparent-active-border); --toggle-success-active-checked-background-color: var(--color-success-active); --toggle-success-active-checked-border-color: var(--color-success-active-border); --toggle-success-disabled-background-color: var(--color-basic-transparent-disabled); --toggle-success-disabled-border-color: var(--color-basic-transparent-disabled-border); --toggle-success-disabled-switcher-background-color: var(--color-basic-disabled); --toggle-success-disabled-checked-switcher-checkmark-color: var(--text-control-color); --toggle-success-disabled-text-color: var(--text-disabled-color); --toggle-info-text-color: var(--text-basic-color); --toggle-info-background-color: var(--color-info-transparent-default); --toggle-info-border-color: var(--color-info-transparent-default-border); --toggle-info-checked-background-color: var(--color-info-default); --toggle-info-checked-border-color: var(--color-info-default-border); --toggle-info-checked-switcher-background-color: var(--background-basic-color-1); --toggle-info-checked-switcher-checkmark-color: var(--color-info-default); --toggle-info-focus-background-color: var(--color-info-transparent-focus); --toggle-info-focus-border-color: var(--color-info-transparent-focus-border); --toggle-info-focus-checked-background-color: var(--color-info-focus); --toggle-info-focus-checked-border-color: var(--color-info-focus-border); --toggle-info-hover-background-color: var(--color-info-transparent-hover); --toggle-info-hover-border-color: var(--color-info-transparent-hover-border); --toggle-info-hover-checked-background-color: var(--color-info-hover); --toggle-info-hover-checked-border-color: var(--color-info-hover-border); --toggle-info-active-background-color: var(--color-info-transparent-active); --toggle-info-active-border-color: var(--color-info-transparent-active-border); --toggle-info-active-checked-background-color: var(--color-info-active); --toggle-info-active-checked-border-color: var(--color-info-active-border); --toggle-info-disabled-background-color: var(--color-basic-transparent-disabled); --toggle-info-disabled-border-color: var(--color-basic-transparent-disabled-border); --toggle-info-disabled-switcher-background-color: var(--color-basic-disabled); --toggle-info-disabled-checked-switcher-checkmark-color: var(--text-control-color); --toggle-info-disabled-text-color: var(--text-disabled-color); --toggle-warning-text-color: var(--text-basic-color); --toggle-warning-background-color: var(--color-warning-transparent-default); --toggle-warning-border-color: var(--color-warning-transparent-default-border); --toggle-warning-checked-background-color: var(--color-warning-default); --toggle-warning-checked-border-color: var(--color-warning-default-border); --toggle-warning-checked-switcher-background-color: var(--background-basic-color-1); --toggle-warning-checked-switcher-checkmark-color: var(--color-warning-default); --toggle-warning-focus-background-color: var(--color-warning-transparent-focus); --toggle-warning-focus-border-color: var(--color-warning-transparent-focus-border); --toggle-warning-focus-checked-background-color: var(--color-warning-focus); --toggle-warning-focus-checked-border-color: var(--color-warning-focus-border); --toggle-warning-hover-background-color: var(--color-warning-transparent-hover); --toggle-warning-hover-border-color: var(--color-warning-transparent-hover-border); --toggle-warning-hover-checked-background-color: var(--color-warning-hover); --toggle-warning-hover-checked-border-color: var(--color-warning-hover-border); --toggle-warning-active-background-color: var(--color-warning-transparent-active); --toggle-warning-active-border-color: var(--color-warning-transparent-active-border); --toggle-warning-active-checked-background-color: var(--color-warning-active); --toggle-warning-active-checked-border-color: var(--color-warning-active-border); --toggle-warning-disabled-background-color: var(--color-basic-transparent-disabled); --toggle-warning-disabled-border-color: var(--color-basic-transparent-disabled-border); --toggle-warning-disabled-switcher-background-color: var(--color-basic-disabled); --toggle-warning-disabled-checked-switcher-checkmark-color: var(--text-control-color); --toggle-warning-disabled-text-color: var(--text-disabled-color); --toggle-danger-text-color: var(--text-basic-color); --toggle-danger-background-color: var(--color-danger-transparent-default); --toggle-danger-border-color: var(--color-danger-transparent-default-border); --toggle-danger-checked-background-color: var(--color-danger-default); --toggle-danger-checked-border-color: var(--color-danger-default-border); --toggle-danger-checked-switcher-background-color: var(--background-basic-color-1); --toggle-danger-checked-switcher-checkmark-color: var(--color-danger-default); --toggle-danger-focus-background-color: var(--color-danger-transparent-focus); --toggle-danger-focus-border-color: var(--color-danger-transparent-focus-border); --toggle-danger-focus-checked-background-color: var(--color-danger-focus); --toggle-danger-focus-checked-border-color: var(--color-danger-focus-border); --toggle-danger-hover-background-color: var(--color-danger-transparent-hover); --toggle-danger-hover-border-color: var(--color-danger-transparent-hover-border); --toggle-danger-hover-checked-background-color: var(--color-danger-hover); --toggle-danger-hover-checked-border-color: var(--color-danger-hover-border); --toggle-danger-active-background-color: var(--color-danger-transparent-active); --toggle-danger-active-border-color: var(--color-danger-transparent-active-border); --toggle-danger-active-checked-background-color: var(--color-danger-active); --toggle-danger-active-checked-border-color: var(--color-danger-active-border); --toggle-danger-disabled-background-color: var(--color-basic-transparent-disabled); --toggle-danger-disabled-border-color: var(--color-basic-transparent-disabled-border); --toggle-danger-disabled-switcher-background-color: var(--color-basic-disabled); --toggle-danger-disabled-checked-switcher-checkmark-color: var(--text-control-color); --toggle-danger-disabled-text-color: var(--text-disabled-color); --toggle-control-text-color: var(--color-basic-100); --toggle-control-background-color: var(--color-control-transparent-default); --toggle-control-border-color: var(--color-control-transparent-default-border); --toggle-control-checked-background-color: var(--color-control-transparent-default); --toggle-control-checked-border-color: var(--color-control-transparent-default-border); --toggle-control-checked-switcher-background-color: var(--color-control-default); --toggle-control-checked-switcher-checkmark-color: var(--color-basic-800); --toggle-control-focus-background-color: var(--color-control-transparent-focus); --toggle-control-focus-border-color: var(--color-control-transparent-focus-border); --toggle-control-focus-checked-background-color: var(--color-control-transparent-focus); --toggle-control-focus-checked-border-color: var(--color-control-transparent-focus-border); --toggle-control-hover-background-color: var(--color-control-transparent-hover); --toggle-control-hover-border-color: var(--color-control-transparent-hover-border); --toggle-control-hover-checked-background-color: var(--color-control-transparent-hover); --toggle-control-hover-checked-border-color: var(--color-control-transparent-hover-border); --toggle-control-active-background-color: var(--color-control-transparent-active); --toggle-control-active-border-color: var(--color-control-transparent-active-border); --toggle-control-active-checked-background-color: var(--color-control-transparent-active); --toggle-control-active-checked-border-color: var(--color-control-transparent-active-border); --toggle-control-disabled-background-color: var(--color-control-transparent-disabled); --toggle-control-disabled-border-color: var(--color-control-transparent-disabled-border); --toggle-control-disabled-switcher-background-color: var(--color-basic-transparent-600); --toggle-control-disabled-checked-switcher-checkmark-color: var(--color-basic-100); --toggle-control-disabled-text-color: var(--text-control-color); --form-field-tiny-max-width: var(--input-tiny-max-width); --form-field-small-max-width: var(--input-small-max-width); --form-field-medium-max-width: var(--input-medium-max-width); --form-field-large-max-width: var(--input-large-max-width); --form-field-giant-max-width: var(--input-giant-max-width); --form-field-addon-basic-text-color: var(--color-basic-600); --form-field-addon-basic-highlight-text-color: var(--color-primary-500); --form-field-addon-primary-text-color: var(--color-primary-500); --form-field-addon-primary-highlight-text-color: var(--color-primary-600); --form-field-addon-success-text-color: var(--color-success-500); --form-field-addon-success-highlight-text-color: var(--color-success-600); --form-field-addon-info-text-color: var(--color-info-500); --form-field-addon-info-highlight-text-color: var(--color-info-600); --form-field-addon-warning-text-color: var(--color-warning-500); --form-field-addon-warning-highlight-text-color: var(--color-warning-600); --form-field-addon-danger-text-color: var(--color-danger-500); --form-field-addon-danger-highlight-text-color: var(--color-danger-600); --form-field-addon-control-text-color: var(--color-control-default); --form-field-addon-control-highlight-text-color: var(--color-control-default); --form-field-addon-disabled-text-color: var(--text-disabled-color); --form-field-addon-tiny-height: 1.5rem; --form-field-addon-tiny-width: var(--form-field-addon-tiny-height); --form-field-addon-tiny-icon-size: var(--button-tiny-icon-size); --form-field-addon-tiny-font-size: var(--text-button-tiny-font-size); --form-field-addon-tiny-line-height: var(--text-button-tiny-line-height); --form-field-addon-tiny-font-weight: var(--text-button-font-weight); --form-field-addon-small-height: 2rem; --form-field-addon-small-width: var(--form-field-addon-small-height); --form-field-addon-small-icon-size: var(--button-small-icon-size); --form-field-addon-small-font-size: var(--text-button-small-font-size); --form-field-addon-small-line-height: var(--text-button-small-line-height); --form-field-addon-small-font-weight: var(--text-button-font-weight); --form-field-addon-medium-height: 2.5rem; --form-field-addon-medium-width: var(--form-field-addon-medium-height); --form-field-addon-medium-icon-size: var(--button-medium-icon-size); --form-field-addon-medium-font-size: var(--text-button-medium-font-size); --form-field-addon-medium-line-height: var(--text-button-medium-line-height); --form-field-addon-medium-font-weight: var(--text-button-font-weight); --form-field-addon-large-height: 3rem; --form-field-addon-large-width: var(--form-field-addon-large-height); --form-field-addon-large-icon-size: var(--button-large-icon-size); --form-field-addon-large-font-size: var(--text-button-large-font-size); --form-field-addon-large-line-height: var(--text-button-large-line-height); --form-field-addon-large-font-weight: var(--text-button-font-weight); --form-field-addon-giant-height: 3.5rem; --form-field-addon-giant-width: var(--form-field-addon-giant-height); --form-field-addon-giant-icon-size: var(--button-giant-icon-size); --form-field-addon-giant-font-size: var(--text-button-giant-font-size); --form-field-addon-giant-line-height: var(--text-button-giant-line-height); --form-field-addon-giant-font-weight: var(--text-button-font-weight); --color-primary-100: #f2f6ff; --color-primary-200: #d9e4ff; --color-primary-300: #a6c1ff; --color-primary-400: #598bff; --color-primary-500: #3366ff; --color-primary-600: #274bdb; --color-primary-700: #1a34b8; --color-primary-800: #102694; --color-primary-900: #091c7a; --color-primary-transparent-100: rgba(51, 102, 255, 0.08); --color-primary-transparent-200: rgba(51, 102, 255, 0.16); --color-primary-transparent-300: rgba(51, 102, 255, 0.24); --color-primary-transparent-400: rgba(51, 102, 255, 0.32); --color-primary-transparent-500: rgba(51, 102, 255, 0.4); --color-primary-transparent-600: rgba(51, 102, 255, 0.48); --color-success-100: #f0fff5; --color-success-200: #ccfce3; --color-success-300: #8cfac7; --color-success-400: #2ce69b; --color-success-500: #00d68f; --color-success-600: #00b887; --color-success-700: #00997a; --color-success-800: #007d6c; --color-success-900: #004a45; --color-success-transparent-100: rgba(0, 214, 143, 0.08); --color-success-transparent-200: rgba(0, 214, 143, 0.16); --color-success-transparent-300: rgba(0, 214, 143, 0.24); --color-success-transparent-400: rgba(0, 214, 143, 0.32); --color-success-transparent-500: rgba(0, 214, 143, 0.4); --color-success-transparent-600: rgba(0, 214, 143, 0.48); --color-info-100: #f2f8ff; --color-info-200: #c7e2ff; --color-info-300: #94cbff; --color-info-400: #42aaff; --color-info-500: #0095ff; --color-info-600: #006fd6; --color-info-700: #0057c2; --color-info-800: #0041a8; --color-info-900: #002885; --color-info-transparent-100: rgba(0, 149, 255, 0.08); --color-info-transparent-200: rgba(0, 149, 255, 0.16); --color-info-transparent-300: rgba(0, 149, 255, 0.24); --color-info-transparent-400: rgba(0, 149, 255, 0.32); --color-info-transparent-500: rgba(0, 149, 255, 0.4); --color-info-transparent-600: rgba(0, 149, 255, 0.48); --color-warning-100: #fffdf2; --color-warning-200: #fff1c2; --color-warning-300: #ffe59e; --color-warning-400: #ffc94d; --color-warning-500: #ffaa00; --color-warning-600: #db8b00; --color-warning-700: #b86e00; --color-warning-800: #945400; --color-warning-900: #703c00; --color-warning-transparent-100: rgba(255, 170, 0, 0.08); --color-warning-transparent-200: rgba(255, 170, 0, 0.16); --color-warning-transparent-300: rgba(255, 170, 0, 0.24); --color-warning-transparent-400: rgba(255, 170, 0, 0.32); --color-warning-transparent-500: rgba(255, 170, 0, 0.4); --color-warning-transparent-600: rgba(255, 170, 0, 0.48); --color-danger-100: #fff2f2; --color-danger-200: #ffd6d9; --color-danger-300: #ffa8b4; --color-danger-400: #ff708d; --color-danger-500: #ff3d71; --color-danger-600: #db2c66; --color-danger-700: #b81d5b; --color-danger-800: #94124e; --color-danger-900: #700940; --color-danger-transparent-100: rgba(255, 61, 113, 0.08); --color-danger-transparent-200: rgba(255, 61, 113, 0.16); --color-danger-transparent-300: rgba(255, 61, 113, 0.24); --color-danger-transparent-400: rgba(255, 61, 113, 0.32); --color-danger-transparent-500: rgba(255, 61, 113, 0.4); --color-danger-transparent-600: rgba(255, 61, 113, 0.48); --color-basic-100: #ffffff; --color-basic-200: #f7f9fc; --color-basic-300: #edf1f7; --color-basic-400: #e4e9f2; --color-basic-500: #c5cee0; --color-basic-600: #8f9bb3; --color-basic-700: #2e3a59; --color-basic-800: #222b45; --color-basic-900: #192038; --color-basic-1000: #151a30; --color-basic-1100: #101426; --color-basic-transparent-100: rgba(143, 155, 179, 0.08); --color-basic-transparent-200: rgba(143, 155, 179, 0.16); --color-basic-transparent-300: rgba(143, 155, 179, 0.24); --color-basic-transparent-400: rgba(143, 155, 179, 0.32); --color-basic-transparent-500: rgba(143, 155, 179, 0.4); --color-basic-transparent-600: rgba(143, 155, 179, 0.48); --color-basic-control-transparent-100: rgba(255, 255, 255, 0.08); --color-basic-control-transparent-200: rgba(255, 255, 255, 0.16); --color-basic-control-transparent-300: rgba(255, 255, 255, 0.24); --color-basic-control-transparent-400: rgba(255, 255, 255, 0.32); --color-basic-control-transparent-500: rgba(255, 255, 255, 0.4); --color-basic-control-transparent-600: rgba(255, 255, 255, 0.48); --color-basic-focus: var(--color-basic-400); --color-basic-hover: var(--color-basic-200); --color-basic-default: var(--color-basic-300); --color-basic-active: var(--color-basic-400); --color-basic-disabled: var(--color-basic-transparent-300); --color-basic-focus-border: var(--color-basic-500); --color-basic-hover-border: var(--color-basic-hover); --color-basic-default-border: var(--color-basic-default); --color-basic-active-border: var(--color-basic-active); --color-basic-disabled-border: var(--color-basic-disabled); --color-basic-transparent-focus: var(--color-basic-transparent-300); --color-basic-transparent-hover: var(--color-basic-transparent-200); --color-basic-transparent-default: var(--color-basic-transparent-100); --color-basic-transparent-active: var(--color-basic-transparent-300); --color-basic-transparent-disabled: var(--color-basic-transparent-200); --color-basic-transparent-focus-border: var(--color-basic-600); --color-basic-transparent-hover-border: var(--color-basic-600); --color-basic-transparent-default-border: var(--color-basic-600); --color-basic-transparent-active-border: var(--color-basic-600); --color-basic-transparent-disabled-border: var(--color-basic-transparent-300); --color-primary-focus: var(--color-primary-600); --color-primary-hover: var(--color-primary-400); --color-primary-default: var(--color-primary-500); --color-primary-active: var(--color-primary-600); --color-primary-disabled: var(--color-basic-transparent-300); --color-primary-focus-border: var(--color-primary-700); --color-primary-hover-border: var(--color-primary-hover); --color-primary-default-border: var(--color-primary-default); --color-primary-active-border: var(--color-primary-active); --color-primary-disabled-border: var(--color-primary-disabled); --color-primary-transparent-focus: var(--color-primary-transparent-300); --color-primary-transparent-hover: var(--color-primary-transparent-200); --color-primary-transparent-default: var(--color-primary-transparent-100); --color-primary-transparent-active: var(--color-primary-transparent-300); --color-primary-transparent-disabled: var(--color-basic-transparent-200); --color-primary-transparent-focus-border: var(--color-primary-500); --color-primary-transparent-hover-border: var(--color-primary-500); --color-primary-transparent-default-border: var(--color-primary-500); --color-primary-transparent-active-border: var(--color-primary-500); --color-primary-transparent-disabled-border: var(--color-basic-transparent-300); --color-success-focus: var(--color-success-600); --color-success-hover: var(--color-success-400); --color-success-default: var(--color-success-500); --color-success-active: var(--color-success-600); --color-success-disabled: var(--color-basic-transparent-300); --color-success-focus-border: var(--color-success-700); --color-success-hover-border: var(--color-success-hover); --color-success-default-border: var(--color-success-default); --color-success-active-border: var(--color-success-active); --color-success-disabled-border: var(--color-success-disabled); --color-success-transparent-focus: var(--color-success-transparent-300); --color-success-transparent-focus-border: var(--color-success-500); --color-success-transparent-hover: var(--color-success-transparent-200); --color-success-transparent-hover-border: var(--color-success-500); --color-success-transparent-default: var(--color-success-transparent-100); --color-success-transparent-default-border: var(--color-success-500); --color-success-transparent-active: var(--color-success-transparent-300); --color-success-transparent-active-border: var(--color-success-500); --color-success-transparent-disabled: var(--color-basic-transparent-200); --color-success-transparent-disabled-border: var(--color-basic-transparent-300); --color-info-focus: var(--color-info-600); --color-info-hover: var(--color-info-400); --color-info-default: var(--color-info-500); --color-info-active: var(--color-info-600); --color-info-disabled: var(--color-basic-transparent-300); --color-info-focus-border: var(--color-info-700); --color-info-hover-border: var(--color-info-hover); --color-info-default-border: var(--color-info-default); --color-info-active-border: var(--color-info-active); --color-info-disabled-border: var(--color-info-disabled); --color-info-transparent-focus: var(--color-info-transparent-300); --color-info-transparent-hover: var(--color-info-transparent-200); --color-info-transparent-default: var(--color-info-transparent-100); --color-info-transparent-active: var(--color-info-transparent-300); --color-info-transparent-disabled: var(--color-basic-transparent-200); --color-info-transparent-focus-border: var(--color-info-500); --color-info-transparent-hover-border: var(--color-info-500); --color-info-transparent-default-border: var(--color-info-500); --color-info-transparent-active-border: var(--color-info-500); --color-info-transparent-disabled-border: var(--color-basic-transparent-300); --color-warning-focus: var(--color-warning-600); --color-warning-hover: var(--color-warning-400); --color-warning-default: var(--color-warning-500); --color-warning-active: var(--color-warning-600); --color-warning-disabled: var(--color-basic-transparent-300); --color-warning-focus-border: var(--color-warning-700); --color-warning-hover-border: var(--color-warning-hover); --color-warning-default-border: var(--color-warning-default); --color-warning-active-border: var(--color-warning-active); --color-warning-disabled-border: var(--color-warning-disabled); --color-warning-transparent-focus: var(--color-warning-transparent-300); --color-warning-transparent-hover: var(--color-warning-transparent-200); --color-warning-transparent-default: var(--color-warning-transparent-100); --color-warning-transparent-active: var(--color-warning-transparent-300); --color-warning-transparent-disabled: var(--color-basic-transparent-200); --color-warning-transparent-focus-border: var(--color-warning-500); --color-warning-transparent-hover-border: var(--color-warning-500); --color-warning-transparent-default-border: var(--color-warning-500); --color-warning-transparent-active-border: var(--color-warning-500); --color-warning-transparent-disabled-border: var(--color-basic-transparent-300); --color-danger-focus: var(--color-danger-600); --color-danger-hover: var(--color-danger-400); --color-danger-default: var(--color-danger-500); --color-danger-active: var(--color-danger-600); --color-danger-disabled: var(--color-basic-transparent-300); --color-danger-focus-border: var(--color-danger-700); --color-danger-hover-border: var(--color-danger-hover); --color-danger-default-border: var(--color-danger-default); --color-danger-active-border: var(--color-danger-active); --color-danger-disabled-border: var(--color-danger-disabled); --color-danger-transparent-focus: var(--color-danger-transparent-300); --color-danger-transparent-hover: var(--color-danger-transparent-200); --color-danger-transparent-default: var(--color-danger-transparent-100); --color-danger-transparent-active: var(--color-danger-transparent-300); --color-danger-transparent-disabled: var(--color-basic-transparent-200); --color-danger-transparent-focus-border: var(--color-danger-500); --color-danger-transparent-hover-border: var(--color-danger-500); --color-danger-transparent-default-border: var(--color-danger-500); --color-danger-transparent-active-border: var(--color-danger-500); --color-danger-transparent-disabled-border: var(--color-basic-transparent-300); --color-control-focus: var(--color-basic-300); --color-control-hover: var(--color-basic-200); --color-control-default: var(--color-basic-100); --color-control-active: var(--color-basic-300); --color-control-disabled: var(--color-basic-transparent-300); --color-control-focus-border: var(--color-basic-500); --color-control-hover-border: var(--color-control-hover); --color-control-default-border: var(--color-control-default); --color-control-active-border: var(--color-control-active); --color-control-disabled-border: var(--color-control-disabled); --color-control-transparent-focus: var(--color-basic-control-transparent-300); --color-control-transparent-hover: var(--color-basic-control-transparent-200); --color-control-transparent-default: var(--color-basic-control-transparent-100); --color-control-transparent-active: var(--color-basic-control-transparent-300); --color-control-transparent-disabled: var(--color-basic-transparent-200); --color-control-transparent-focus-border: var(--color-basic-100); --color-control-transparent-hover-border: var(--color-basic-100); --color-control-transparent-default-border: var(--color-basic-100); --color-control-transparent-active-border: var(--color-basic-100); --color-control-transparent-disabled-border: var(--color-basic-transparent-300); --background-basic-color-1: var(--color-basic-100); --background-basic-color-2: var(--color-basic-200); --background-basic-color-3: var(--color-basic-300); --background-basic-color-4: var(--color-basic-400); --border-basic-color-1: var(--color-basic-100); --border-basic-color-2: var(--color-basic-200); --border-basic-color-3: var(--color-basic-300); --border-basic-color-4: var(--color-basic-400); --border-basic-color-5: var(--color-basic-500); --background-alternative-color-1: var(--color-basic-800); --background-alternative-color-2: var(--color-basic-900); --background-alternative-color-3: var(--color-basic-1000); --background-alternative-color-4: var(--color-basic-1100); --border-alternative-color-1: var(--color-basic-800); --border-alternative-color-2: var(--color-basic-900); --border-alternative-color-3: var(--color-basic-1000); --border-alternative-color-4: var(--color-basic-1100); --border-alternative-color-5: var(--color-basic-1100); --background-primary-color-1: var(--color-primary-500); --background-primary-color-2: var(--color-primary-600); --background-primary-color-3: var(--color-primary-700); --background-primary-color-4: var(--color-primary-800); --border-primary-color-1: var(--color-basic-500); --border-primary-color-2: var(--color-basic-600); --border-primary-color-3: var(--color-basic-700); --border-primary-color-4: var(--color-basic-800); --border-primary-color-5: var(--color-basic-900); --text-basic-color: var(--color-basic-800); --text-alternate-color: var(--color-basic-100); --text-control-color: var(--color-basic-100); --text-disabled-color: var(--color-basic-transparent-600); --text-hint-color: var(--color-basic-600); --text-primary-color: var(--color-primary-default); --text-primary-focus-color: var(--color-primary-focus); --text-primary-hover-color: var(--color-primary-hover); --text-primary-active-color: var(--color-primary-active); --text-primary-disabled-color: var(--color-primary-400); --text-success-color: var(--color-success-default); --text-success-focus-color: var(--color-success-focus); --text-success-hover-color: var(--color-success-hover); --text-success-active-color: var(--color-success-active); --text-success-disabled-color: var(--color-success-400); --text-info-color: var(--color-info-default); --text-info-focus-color: var(--color-info-focus); --text-info-hover-color: var(--color-info-hover); --text-info-active-color: var(--color-info-active); --text-info-disabled-color: var(--color-info-400); --text-warning-color: var(--color-warning-default); --text-warning-focus-color: var(--color-warning-focus); --text-warning-hover-color: var(--color-warning-hover); --text-warning-active-color: var(--color-warning-active); --text-warning-disabled-color: var(--color-warning-400); --text-danger-color: var(--color-danger-default); --text-danger-focus-color: var(--color-danger-focus); --text-danger-hover-color: var(--color-danger-hover); --text-danger-active-color: var(--color-danger-active); --text-danger-disabled-color: var(--color-danger-400); --font-family-primary: Open Sans, sans-serif; --font-family-secondary: var(--font-family-primary); --text-heading-1-font-family: var(--font-family-secondary); --text-heading-1-font-size: 2.25rem; --text-heading-1-font-weight: 700; --text-heading-1-line-height: 3rem; --text-heading-2-font-family: var(--font-family-secondary); --text-heading-2-font-size: 2rem; --text-heading-2-font-weight: 700; --text-heading-2-line-height: 2.5rem; --text-heading-3-font-family: var(--font-family-secondary); --text-heading-3-font-size: 1.875rem; --text-heading-3-font-weight: 700; --text-heading-3-line-height: 2.5rem; --text-heading-4-font-family: var(--font-family-secondary); --text-heading-4-font-size: 1.625rem; --text-heading-4-font-weight: 700; --text-heading-4-line-height: 2rem; --text-heading-5-font-family: var(--font-family-secondary); --text-heading-5-font-size: 1.375rem; --text-heading-5-font-weight: 700; --text-heading-5-line-height: 2rem; --text-heading-6-font-family: var(--font-family-secondary); --text-heading-6-font-size: 1.125rem; --text-heading-6-font-weight: 700; --text-heading-6-line-height: 1.5rem; --text-subtitle-font-family: var(--font-family-primary); --text-subtitle-font-size: 0.9375rem; --text-subtitle-font-weight: 600; --text-subtitle-line-height: 1.5rem; --text-subtitle-2-font-family: var(--font-family-primary); --text-subtitle-2-font-size: 0.8125rem; --text-subtitle-2-font-weight: 600; --text-subtitle-2-line-height: 1.5rem; --text-paragraph-font-family: var(--font-family-primary); --text-paragraph-font-size: 0.9375rem; --text-paragraph-font-weight: 400; --text-paragraph-line-height: 1.25rem; --text-paragraph-2-font-family: var(--font-family-primary); --text-paragraph-2-font-size: 0.8125rem; --text-paragraph-2-font-weight: 400; --text-paragraph-2-line-height: 1.125rem; --text-label-font-family: var(--font-family-primary); --text-label-font-size: 0.75rem; --text-label-font-weight: 700; --text-label-line-height: 1rem; --text-caption-font-family: var(--font-family-primary); --text-caption-font-size: 0.75rem; --text-caption-font-weight: 400; --text-caption-line-height: 1rem; --text-caption-2-font-family: var(--font-family-primary); --text-caption-2-font-size: 0.75rem; --text-caption-2-font-weight: 600; --text-caption-2-line-height: 1rem; --text-button-font-family: var(--font-family-primary); --text-button-font-weight: 700; --text-button-tiny-font-size: 0.625rem; --text-button-tiny-line-height: 0.75rem; --text-button-small-font-size: 0.75rem; --text-button-small-line-height: 1rem; --text-button-medium-font-size: 0.875rem; --text-button-medium-line-height: 1rem; --text-button-large-font-size: 1rem; --text-button-large-line-height: 1.25rem; --text-button-giant-font-size: 1.125rem; --text-button-giant-line-height: 1.5rem; --border-radius: 0.25rem; --outline-width: 0.375rem; --outline-color: var(--color-basic-transparent-200); --scrollbar-color: var(--background-basic-color-4); --scrollbar-background-color: var(--background-basic-color-2); --scrollbar-width: 0.3125rem; --shadow: 0 0.5rem 1rem 0 rgba(44, 51, 73, 0.1); --divider-color: var(--border-basic-color-3); --divider-style: solid; --divider-width: 1px; } /** Ionic CSS Variables **/ :root { /** primary **/ --ion-color-primary: #3880ff; --ion-color-primary-rgb: 56, 128, 255; --ion-color-primary-contrast: #ffffff; --ion-color-primary-contrast-rgb: 255, 255, 255; --ion-color-primary-shade: #3171e0; --ion-color-primary-tint: #4c8dff; /** secondary **/ --ion-color-secondary: #0cd1e8; --ion-color-secondary-rgb: 12, 209, 232; --ion-color-secondary-contrast: #ffffff; --ion-color-secondary-contrast-rgb: 255, 255, 255; --ion-color-secondary-shade: #0bb8cc; --ion-color-secondary-tint: #24d6ea; /** tertiary **/ --ion-color-tertiary: #7044ff; --ion-color-tertiary-rgb: 112, 68, 255; --ion-color-tertiary-contrast: #ffffff; --ion-color-tertiary-contrast-rgb: 255, 255, 255; --ion-color-tertiary-shade: #633ce0; --ion-color-tertiary-tint: #7e57ff; /** success **/ --ion-color-success: #10dc60; --ion-color-success-rgb: 16, 220, 96; --ion-color-success-contrast: #ffffff; --ion-color-success-contrast-rgb: 255, 255, 255; --ion-color-success-shade: #0ec254; --ion-color-success-tint: #28e070; /** warning **/ --ion-color-warning: #ffce00; --ion-color-warning-rgb: 255, 206, 0; --ion-color-warning-contrast: #ffffff; --ion-color-warning-contrast-rgb: 255, 255, 255; --ion-color-warning-shade: #e0b500; --ion-color-warning-tint: #ffd31a; /** danger **/ --ion-color-danger: #f04141; --ion-color-danger-rgb: 245, 61, 61; --ion-color-danger-contrast: #ffffff; --ion-color-danger-contrast-rgb: 255, 255, 255; --ion-color-danger-shade: #d33939; --ion-color-danger-tint: #f25454; /** dark **/ --ion-color-dark: #222428; --ion-color-dark-rgb: 34, 34, 34; --ion-color-dark-contrast: #ffffff; --ion-color-dark-contrast-rgb: 255, 255, 255; --ion-color-dark-shade: #1e2023; --ion-color-dark-tint: #383a3e; /** medium **/ --ion-color-medium: #989aa2; --ion-color-medium-rgb: 152, 154, 162; --ion-color-medium-contrast: #ffffff; --ion-color-medium-contrast-rgb: 255, 255, 255; --ion-color-medium-shade: #86888f; --ion-color-medium-tint: #a2a4ab; /** light **/ --ion-color-light: #f4f5f8; --ion-color-light-rgb: 244, 244, 244; --ion-color-light-contrast: #000000; --ion-color-light-contrast-rgb: 0, 0, 0; --ion-color-light-shade: #d7d8da; --ion-color-light-tint: #f5f6f9; } /*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/global.scss ***! \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ @charset "UTF-8"; /* * App Global CSS * ---------------------------------------------------------------------------- * Put style rules here that you want to apply globally. These styles are for * the entire app and not just one component. Additionally, this file can be * used as an entry point to import other CSS/Sass files to be included in the * output CSS. * For more information on global stylesheets, visit the documentation: * https://ionicframework.com/docs/layout/global-stylesheets */ /* Core CSS required for Ionic components to work properly */ html.ios { --ion-default-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif; } html.md { --ion-default-font: "Roboto", "Helvetica Neue", sans-serif; } html { --ion-font-family: var(--ion-default-font); } body { background: var(--ion-background-color); } body.backdrop-no-scroll { overflow: hidden; } /** * Card style modal needs additional padding on the * top of the header. We accomplish this by targeting * the first toolbar in the header. * Footer also needs this. We do not adjust the bottom * padding though because of the safe area. */ html.ios ion-modal.modal-card ion-header ion-toolbar:first-of-type, html.ios ion-modal.modal-sheet ion-header ion-toolbar:first-of-type, html.ios ion-modal ion-footer ion-toolbar:first-of-type { padding-top: 6px; } /** * Card style modal needs additional padding on the * bottom of the header. We accomplish this by targeting * the last toolbar in the header. */ html.ios ion-modal.modal-card ion-header ion-toolbar:last-of-type, html.ios ion-modal.modal-sheet ion-header ion-toolbar:last-of-type { padding-bottom: 6px; } /** * Add padding on the left and right * of toolbars while accounting for * safe area values when in landscape. */ html.ios ion-modal ion-toolbar { padding-right: calc(var(--ion-safe-area-right) + 8px); padding-left: calc(var(--ion-safe-area-left) + 8px); } /** * Card style modal on iPadOS * should only have backdrop on first instance. */ @media screen and (min-width: 768px) { html.ios ion-modal.modal-card:first-of-type { --backdrop-opacity: 0.18; } } /** * Subsequent modals should not have a backdrop/box shadow * as it will cause the screen to appear to get progressively * darker. With Ionic 6, declarative modals made it * possible to have multiple non-presented modals in the DOM, * so we could no longer rely on ion-modal:first-of-type. * Here we disable the opacity/box-shadow for every modal * that comes after the first presented modal. * * Note: ion-modal:not(.overlay-hidden):first-of-type * does not match the first modal to not have * the .overlay-hidden class, it will match the * first modal in general only if it does not * have the .overlay-hidden class. * The :nth-child() pseudo-class has support * for selectors which would help us here. At the * time of writing it does not have great cross browser * support. * * Note 2: This should only apply to non-card and * non-sheet modals. Card and sheet modals have their * own criteria for displaying backdrops/box shadows. * * Do not use :not(.overlay-hidden) in place of * .show-modal because that triggers a memory * leak in Blink: https://bugs.chromium.org/p/chromium/issues/detail?id=1418768 */ ion-modal.modal-default.show-modal ~ ion-modal.modal-default { --backdrop-opacity: 0; --box-shadow: none; } /** * This works around a bug in WebKit where the * content will overflow outside of the bottom border * radius when re-painting. As long as a single * border radius value is set on .ion-page, this * issue does not happen. We set the top left radius * here because the top left corner will always have a * radius no matter the platform. * This behavior only applies to card modals. */ html.ios ion-modal.modal-card .ion-page { border-top-left-radius: var(--border-radius); } .ion-color-primary { --ion-color-base: var(--ion-color-primary, #3880ff) !important; --ion-color-base-rgb: var(--ion-color-primary-rgb, 56, 128, 255) !important; --ion-color-contrast: var(--ion-color-primary-contrast, #fff) !important; --ion-color-contrast-rgb: var(--ion-color-primary-contrast-rgb, 255, 255, 255) !important; --ion-color-shade: var(--ion-color-primary-shade, #3171e0) !important; --ion-color-tint: var(--ion-color-primary-tint, #4c8dff) !important; } .ion-color-secondary { --ion-color-base: var(--ion-color-secondary, #3dc2ff) !important; --ion-color-base-rgb: var(--ion-color-secondary-rgb, 61, 194, 255) !important; --ion-color-contrast: var(--ion-color-secondary-contrast, #fff) !important; --ion-color-contrast-rgb: var(--ion-color-secondary-contrast-rgb, 255, 255, 255) !important; --ion-color-shade: var(--ion-color-secondary-shade, #36abe0) !important; --ion-color-tint: var(--ion-color-secondary-tint, #50c8ff) !important; } .ion-color-tertiary { --ion-color-base: var(--ion-color-tertiary, #5260ff) !important; --ion-color-base-rgb: var(--ion-color-tertiary-rgb, 82, 96, 255) !important; --ion-color-contrast: var(--ion-color-tertiary-contrast, #fff) !important; --ion-color-contrast-rgb: var(--ion-color-tertiary-contrast-rgb, 255, 255, 255) !important; --ion-color-shade: var(--ion-color-tertiary-shade, #4854e0) !important; --ion-color-tint: var(--ion-color-tertiary-tint, #6370ff) !important; } .ion-color-success { --ion-color-base: var(--ion-color-success, #2dd36f) !important; --ion-color-base-rgb: var(--ion-color-success-rgb, 45, 211, 111) !important; --ion-color-contrast: var(--ion-color-success-contrast, #fff) !important; --ion-color-contrast-rgb: var(--ion-color-success-contrast-rgb, 255, 255, 255) !important; --ion-color-shade: var(--ion-color-success-shade, #28ba62) !important; --ion-color-tint: var(--ion-color-success-tint, #42d77d) !important; } .ion-color-warning { --ion-color-base: var(--ion-color-warning, #ffc409) !important; --ion-color-base-rgb: var(--ion-color-warning-rgb, 255, 196, 9) !important; --ion-color-contrast: var(--ion-color-warning-contrast, #000) !important; --ion-color-contrast-rgb: var(--ion-color-warning-contrast-rgb, 0, 0, 0) !important; --ion-color-shade: var(--ion-color-warning-shade, #e0ac08) !important; --ion-color-tint: var(--ion-color-warning-tint, #ffca22) !important; } .ion-color-danger { --ion-color-base: var(--ion-color-danger, #eb445a) !important; --ion-color-base-rgb: var(--ion-color-danger-rgb, 235, 68, 90) !important; --ion-color-contrast: var(--ion-color-danger-contrast, #fff) !important; --ion-color-contrast-rgb: var(--ion-color-danger-contrast-rgb, 255, 255, 255) !important; --ion-color-shade: var(--ion-color-danger-shade, #cf3c4f) !important; --ion-color-tint: var(--ion-color-danger-tint, #ed576b) !important; } .ion-color-light { --ion-color-base: var(--ion-color-light, #f4f5f8) !important; --ion-color-base-rgb: var(--ion-color-light-rgb, 244, 245, 248) !important; --ion-color-contrast: var(--ion-color-light-contrast, #000) !important; --ion-color-contrast-rgb: var(--ion-color-light-contrast-rgb, 0, 0, 0) !important; --ion-color-shade: var(--ion-color-light-shade, #d7d8da) !important; --ion-color-tint: var(--ion-color-light-tint, #f5f6f9) !important; } .ion-color-medium { --ion-color-base: var(--ion-color-medium, #92949c) !important; --ion-color-base-rgb: var(--ion-color-medium-rgb, 146, 148, 156) !important; --ion-color-contrast: var(--ion-color-medium-contrast, #fff) !important; --ion-color-contrast-rgb: var(--ion-color-medium-contrast-rgb, 255, 255, 255) !important; --ion-color-shade: var(--ion-color-medium-shade, #808289) !important; --ion-color-tint: var(--ion-color-medium-tint, #9d9fa6) !important; } .ion-color-dark { --ion-color-base: var(--ion-color-dark, #222428) !important; --ion-color-base-rgb: var(--ion-color-dark-rgb, 34, 36, 40) !important; --ion-color-contrast: var(--ion-color-dark-contrast, #fff) !important; --ion-color-contrast-rgb: var(--ion-color-dark-contrast-rgb, 255, 255, 255) !important; --ion-color-shade: var(--ion-color-dark-shade, #1e2023) !important; --ion-color-tint: var(--ion-color-dark-tint, #383a3e) !important; } .ion-page { left: 0; right: 0; top: 0; bottom: 0; display: flex; position: absolute; flex-direction: column; justify-content: space-between; contain: layout size style; overflow: hidden; z-index: 0; } /** * When making custom dialogs, using * ion-content is not required. As a result, * some developers may wish to have dialogs * that are automatically sized by the browser. * These changes allow certain dimension values * such as fit-content to work correctly. */ ion-modal > .ion-page { position: relative; contain: layout style; height: 100%; } .split-pane-visible > .ion-page.split-pane-main { position: relative; } ion-route, ion-route-redirect, ion-router, ion-select-option, ion-nav-controller, ion-menu-controller, ion-action-sheet-controller, ion-alert-controller, ion-loading-controller, ion-modal-controller, ion-picker-controller, ion-popover-controller, ion-toast-controller, .ion-page-hidden { /* stylelint-disable-next-line declaration-no-important */ display: none !important; } .ion-page-invisible { opacity: 0; } .can-go-back > ion-header ion-back-button { display: block; } html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa { --ion-statusbar-padding: 20px; } @supports (padding-top: 20px) { html { --ion-safe-area-top: var(--ion-statusbar-padding); } } @supports (padding-top: constant(safe-area-inset-top)) { html { --ion-safe-area-top: constant(safe-area-inset-top); --ion-safe-area-bottom: constant(safe-area-inset-bottom); --ion-safe-area-left: constant(safe-area-inset-left); --ion-safe-area-right: constant(safe-area-inset-right); } } @supports (padding-top: env(safe-area-inset-top)) { html { --ion-safe-area-top: env(safe-area-inset-top); --ion-safe-area-bottom: env(safe-area-inset-bottom); --ion-safe-area-left: env(safe-area-inset-left); --ion-safe-area-right: env(safe-area-inset-right); } } ion-card.ion-color .ion-inherit-color, ion-card-header.ion-color .ion-inherit-color { color: inherit; } .menu-content { transform: translate3d(0, 0, 0); } .menu-content-open { cursor: pointer; touch-action: manipulation; pointer-events: none; } .ios .menu-content-reveal { box-shadow: -8px 0 42px rgba(0, 0, 0, 0.08); } [dir=rtl].ios .menu-content-reveal { box-shadow: 8px 0 42px rgba(0, 0, 0, 0.08); } .md .menu-content-reveal { box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18); } .md .menu-content-push { box-shadow: 4px 0px 16px rgba(0, 0, 0, 0.18); } ion-accordion-group.accordion-group-expand-inset > ion-accordion:first-of-type { border-top-left-radius: 8px; border-top-right-radius: 8px; } ion-accordion-group.accordion-group-expand-inset > ion-accordion:last-of-type { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } ion-accordion-group > ion-accordion:last-of-type ion-item[slot=header] { --border-width: 0px; } ion-accordion.accordion-animated > [slot=header] .ion-accordion-toggle-icon { transition: 300ms transform cubic-bezier(0.25, 0.8, 0.5, 1); } @media (prefers-reduced-motion: reduce) { ion-accordion .ion-accordion-toggle-icon { /* stylelint-disable declaration-no-important */ transition: none !important; } } /** * The > [slot="header"] selector ensures that we do * not modify toggle icons for any nested accordions. The state * of one accordion should not affect any accordions inside * of a nested accordion group. */ ion-accordion.accordion-expanding > [slot=header] .ion-accordion-toggle-icon, ion-accordion.accordion-expanded > [slot=header] .ion-accordion-toggle-icon { transform: rotate(180deg); } ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-previous ion-item[slot=header] { --border-width: 0px; --inner-border-width: 0px; } ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanding:first-of-type, ion-accordion-group.accordion-group-expand-inset.md > ion-accordion.accordion-expanded:first-of-type { margin-top: 0; } ion-input input::-webkit-date-and-time-value { text-align: start; } /** * The .ion-datetime-button-overlay class contains * styles that allow any modal/popover to be * sized according to the dimensions of the datetime * when used with ion-datetime-button. */ .ion-datetime-button-overlay { --width: fit-content; --height: fit-content; } /** * The grid variant can scale down when inline. * When used in a `fit-content` overlay, this causes * the overlay to shrink when the month/year picker is open. * Explicitly setting the dimensions lets us have a consistently * sized grid interface. */ .ion-datetime-button-overlay ion-datetime.datetime-grid { width: 320px; min-height: 320px; } /* Basic CSS for apps built with Ionic */ audio, canvas, progress, video { vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } b, strong { font-weight: bold; } img { max-width: 100%; } hr { height: 1px; border-width: 0; box-sizing: content-box; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } label, input, select, textarea { font-family: inherit; line-height: normal; } textarea { overflow: auto; height: auto; font: inherit; color: inherit; } textarea::-moz-placeholder { padding-left: 2px; } textarea::placeholder { padding-left: 2px; } form, input, optgroup, select { margin: 0; font: inherit; color: inherit; } html input[type=button], input[type=reset], input[type=submit] { cursor: pointer; -webkit-appearance: button; } a, a div, a span, a ion-icon, a ion-label, button, button div, button span, button ion-icon, button ion-label, .ion-tappable, [tappable], [tappable] div, [tappable] span, [tappable] ion-icon, [tappable] ion-label, input, textarea { touch-action: manipulation; } a ion-label, button ion-label { pointer-events: none; } button { padding: 0; border: 0; border-radius: 0; font-family: inherit; font-style: inherit; font-feature-settings: inherit; font-variant: inherit; line-height: 1; text-transform: none; cursor: pointer; -webkit-appearance: button; } [tappable] { cursor: pointer; } a[disabled], button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { height: auto; } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } * { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } html { width: 100%; height: 100%; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; } html:not(.hydrated) body { display: none; } html.ion-ce body { display: block; } html.plt-pwa { height: 100vh; } body { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; position: fixed; width: 100%; max-width: 100%; height: 100%; max-height: 100%; /** * Because body has position: fixed, * it should be promoted to its own * layer. * * WebKit does not always promote * the body to its own layer on page * load in Ionic apps. Once scrolling on * ion-content starts, WebKit will promote * body. Unfortunately, this causes a re-paint * which results in scrolling being halted * until the next user gesture. * * This impacts the Custom Elements build. * The lazy loaded build causes the browser to * re-paint during hydration which causes WebKit * to promote body to its own layer. * In the CE Build, this hydration does not * happen, so the additional re-paint does not occur. */ transform: translateZ(0); text-rendering: optimizeLegibility; overflow: hidden; touch-action: manipulation; -webkit-user-drag: none; -ms-content-zooming: none; word-wrap: break-word; overscroll-behavior-y: none; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; text-size-adjust: none; } html { font-family: var(--ion-default-font); font-family: var(--ion-font-family); } a { background-color: transparent; color: #3880ff; color: var(--ion-color-primary, #3880ff); } h1, h2, h3, h4, h5, h6 { margin-top: 16px; margin-bottom: 10px; font-weight: 500; line-height: 1.2; } h1 { margin-top: 20px; font-size: 26px; } h2 { margin-top: 18px; font-size: 24px; } h3 { font-size: 22px; } h4 { font-size: 20px; } h5 { font-size: 18px; } h6 { font-size: 16px; } small { font-size: 75%; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } .ion-hide { display: none !important; } .ion-hide-up { display: none !important; } .ion-hide-down { display: none !important; } @media (min-width: 576px) { .ion-hide-sm-up { display: none !important; } } @media (max-width: 575.98px) { .ion-hide-sm-down { display: none !important; } } @media (min-width: 768px) { .ion-hide-md-up { display: none !important; } } @media (max-width: 767.98px) { .ion-hide-md-down { display: none !important; } } @media (min-width: 992px) { .ion-hide-lg-up { display: none !important; } } @media (max-width: 991.98px) { .ion-hide-lg-down { display: none !important; } } @media (min-width: 1200px) { .ion-hide-xl-up { display: none !important; } } @media (max-width: 1199.98px) { .ion-hide-xl-down { display: none !important; } } /* Optional CSS utils that can be commented out */ .ion-no-padding { --padding-start: 0; --padding-end: 0; --padding-top: 0; --padding-bottom: 0; padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; } .ion-padding { --padding-start: var(--ion-padding, 16px); --padding-end: var(--ion-padding, 16px); --padding-top: var(--ion-padding, 16px); --padding-bottom: var(--ion-padding, 16px); -webkit-padding-start: 16px; -webkit-padding-start: var(--ion-padding, 16px); padding-inline-start: 16px; padding-inline-start: var(--ion-padding, 16px); -webkit-padding-end: 16px; -webkit-padding-end: var(--ion-padding, 16px); padding-inline-end: 16px; padding-inline-end: var(--ion-padding, 16px); padding-top: 16px; padding-top: var(--ion-padding, 16px); padding-bottom: 16px; padding-bottom: var(--ion-padding, 16px); } .ion-padding-top { --padding-top: var(--ion-padding, 16px); padding-top: 16px; padding-top: var(--ion-padding, 16px); } .ion-padding-start { --padding-start: var(--ion-padding, 16px); -webkit-padding-start: 16px; -webkit-padding-start: var(--ion-padding, 16px); padding-inline-start: 16px; padding-inline-start: var(--ion-padding, 16px); } .ion-padding-end { --padding-end: var(--ion-padding, 16px); -webkit-padding-end: 16px; -webkit-padding-end: var(--ion-padding, 16px); padding-inline-end: 16px; padding-inline-end: var(--ion-padding, 16px); } .ion-padding-bottom { --padding-bottom: var(--ion-padding, 16px); padding-bottom: 16px; padding-bottom: var(--ion-padding, 16px); } .ion-padding-vertical { --padding-top: var(--ion-padding, 16px); --padding-bottom: var(--ion-padding, 16px); padding-top: 16px; padding-top: var(--ion-padding, 16px); padding-bottom: 16px; padding-bottom: var(--ion-padding, 16px); } .ion-padding-horizontal { --padding-start: var(--ion-padding, 16px); --padding-end: var(--ion-padding, 16px); -webkit-padding-start: 16px; -webkit-padding-start: var(--ion-padding, 16px); padding-inline-start: 16px; padding-inline-start: var(--ion-padding, 16px); -webkit-padding-end: 16px; -webkit-padding-end: var(--ion-padding, 16px); padding-inline-end: 16px; padding-inline-end: var(--ion-padding, 16px); } .ion-no-margin { --margin-start: 0; --margin-end: 0; --margin-top: 0; --margin-bottom: 0; margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; } .ion-margin { --margin-start: var(--ion-margin, 16px); --margin-end: var(--ion-margin, 16px); --margin-top: var(--ion-margin, 16px); --margin-bottom: var(--ion-margin, 16px); -webkit-margin-start: 16px; -webkit-margin-start: var(--ion-margin, 16px); margin-inline-start: 16px; margin-inline-start: var(--ion-margin, 16px); -webkit-margin-end: 16px; -webkit-margin-end: var(--ion-margin, 16px); margin-inline-end: 16px; margin-inline-end: var(--ion-margin, 16px); margin-top: 16px; margin-top: var(--ion-margin, 16px); margin-bottom: 16px; margin-bottom: var(--ion-margin, 16px); } .ion-margin-top { --margin-top: var(--ion-margin, 16px); margin-top: 16px; margin-top: var(--ion-margin, 16px); } .ion-margin-start { --margin-start: var(--ion-margin, 16px); -webkit-margin-start: 16px; -webkit-margin-start: var(--ion-margin, 16px); margin-inline-start: 16px; margin-inline-start: var(--ion-margin, 16px); } .ion-margin-end { --margin-end: var(--ion-margin, 16px); -webkit-margin-end: 16px; -webkit-margin-end: var(--ion-margin, 16px); margin-inline-end: 16px; margin-inline-end: var(--ion-margin, 16px); } .ion-margin-bottom { --margin-bottom: var(--ion-margin, 16px); margin-bottom: 16px; margin-bottom: var(--ion-margin, 16px); } .ion-margin-vertical { --margin-top: var(--ion-margin, 16px); --margin-bottom: var(--ion-margin, 16px); margin-top: 16px; margin-top: var(--ion-margin, 16px); margin-bottom: 16px; margin-bottom: var(--ion-margin, 16px); } .ion-margin-horizontal { --margin-start: var(--ion-margin, 16px); --margin-end: var(--ion-margin, 16px); -webkit-margin-start: 16px; -webkit-margin-start: var(--ion-margin, 16px); margin-inline-start: 16px; margin-inline-start: var(--ion-margin, 16px); -webkit-margin-end: 16px; -webkit-margin-end: var(--ion-margin, 16px); margin-inline-end: 16px; margin-inline-end: var(--ion-margin, 16px); } .ion-float-left { float: left !important; } .ion-float-right { float: right !important; } .ion-float-start { float: left !important; } :host-context([dir=rtl]) .ion-float-start { float: right !important; } [dir=rtl] .ion-float-start { float: right !important; } @supports selector(:dir(rtl)) { .ion-float-start:dir(rtl) { float: right !important; } } .ion-float-end { float: right !important; } :host-context([dir=rtl]) .ion-float-end { float: left !important; } [dir=rtl] .ion-float-end { float: left !important; } @supports selector(:dir(rtl)) { .ion-float-end:dir(rtl) { float: left !important; } } @media (min-width: 576px) { .ion-float-sm-left { float: left !important; } .ion-float-sm-right { float: right !important; } .ion-float-sm-start { float: left !important; } :host-context([dir=rtl]) .ion-float-sm-start { float: right !important; } [dir=rtl] .ion-float-sm-start { float: right !important; } @supports selector(:dir(rtl)) { .ion-float-sm-start:dir(rtl) { float: right !important; } } .ion-float-sm-end { float: right !important; } :host-context([dir=rtl]) .ion-float-sm-end { float: left !important; } [dir=rtl] .ion-float-sm-end { float: left !important; } @supports selector(:dir(rtl)) { .ion-float-sm-end:dir(rtl) { float: left !important; } } } @media (min-width: 768px) { .ion-float-md-left { float: left !important; } .ion-float-md-right { float: right !important; } .ion-float-md-start { float: left !important; } :host-context([dir=rtl]) .ion-float-md-start { float: right !important; } [dir=rtl] .ion-float-md-start { float: right !important; } @supports selector(:dir(rtl)) { .ion-float-md-start:dir(rtl) { float: right !important; } } .ion-float-md-end { float: right !important; } :host-context([dir=rtl]) .ion-float-md-end { float: left !important; } [dir=rtl] .ion-float-md-end { float: left !important; } @supports selector(:dir(rtl)) { .ion-float-md-end:dir(rtl) { float: left !important; } } } @media (min-width: 992px) { .ion-float-lg-left { float: left !important; } .ion-float-lg-right { float: right !important; } .ion-float-lg-start { float: left !important; } :host-context([dir=rtl]) .ion-float-lg-start { float: right !important; } [dir=rtl] .ion-float-lg-start { float: right !important; } @supports selector(:dir(rtl)) { .ion-float-lg-start:dir(rtl) { float: right !important; } } .ion-float-lg-end { float: right !important; } :host-context([dir=rtl]) .ion-float-lg-end { float: left !important; } [dir=rtl] .ion-float-lg-end { float: left !important; } @supports selector(:dir(rtl)) { .ion-float-lg-end:dir(rtl) { float: left !important; } } } @media (min-width: 1200px) { .ion-float-xl-left { float: left !important; } .ion-float-xl-right { float: right !important; } .ion-float-xl-start { float: left !important; } :host-context([dir=rtl]) .ion-float-xl-start { float: right !important; } [dir=rtl] .ion-float-xl-start { float: right !important; } @supports selector(:dir(rtl)) { .ion-float-xl-start:dir(rtl) { float: right !important; } } .ion-float-xl-end { float: right !important; } :host-context([dir=rtl]) .ion-float-xl-end { float: left !important; } [dir=rtl] .ion-float-xl-end { float: left !important; } @supports selector(:dir(rtl)) { .ion-float-xl-end:dir(rtl) { float: left !important; } } } .ion-text-center { text-align: center !important; } .ion-text-justify { text-align: justify !important; } .ion-text-start { text-align: start !important; } .ion-text-end { text-align: end !important; } .ion-text-left { text-align: left !important; } .ion-text-right { text-align: right !important; } .ion-text-nowrap { white-space: nowrap !important; } .ion-text-wrap { white-space: normal !important; } @media (min-width: 576px) { .ion-text-sm-center { text-align: center !important; } .ion-text-sm-justify { text-align: justify !important; } .ion-text-sm-start { text-align: start !important; } .ion-text-sm-end { text-align: end !important; } .ion-text-sm-left { text-align: left !important; } .ion-text-sm-right { text-align: right !important; } .ion-text-sm-nowrap { white-space: nowrap !important; } .ion-text-sm-wrap { white-space: normal !important; } } @media (min-width: 768px) { .ion-text-md-center { text-align: center !important; } .ion-text-md-justify { text-align: justify !important; } .ion-text-md-start { text-align: start !important; } .ion-text-md-end { text-align: end !important; } .ion-text-md-left { text-align: left !important; } .ion-text-md-right { text-align: right !important; } .ion-text-md-nowrap { white-space: nowrap !important; } .ion-text-md-wrap { white-space: normal !important; } } @media (min-width: 992px) { .ion-text-lg-center { text-align: center !important; } .ion-text-lg-justify { text-align: justify !important; } .ion-text-lg-start { text-align: start !important; } .ion-text-lg-end { text-align: end !important; } .ion-text-lg-left { text-align: left !important; } .ion-text-lg-right { text-align: right !important; } .ion-text-lg-nowrap { white-space: nowrap !important; } .ion-text-lg-wrap { white-space: normal !important; } } @media (min-width: 1200px) { .ion-text-xl-center { text-align: center !important; } .ion-text-xl-justify { text-align: justify !important; } .ion-text-xl-start { text-align: start !important; } .ion-text-xl-end { text-align: end !important; } .ion-text-xl-left { text-align: left !important; } .ion-text-xl-right { text-align: right !important; } .ion-text-xl-nowrap { white-space: nowrap !important; } .ion-text-xl-wrap { white-space: normal !important; } } .ion-text-uppercase { /* stylelint-disable-next-line declaration-no-important */ text-transform: uppercase !important; } .ion-text-lowercase { /* stylelint-disable-next-line declaration-no-important */ text-transform: lowercase !important; } .ion-text-capitalize { /* stylelint-disable-next-line declaration-no-important */ text-transform: capitalize !important; } @media (min-width: 576px) { .ion-text-sm-uppercase { /* stylelint-disable-next-line declaration-no-important */ text-transform: uppercase !important; } .ion-text-sm-lowercase { /* stylelint-disable-next-line declaration-no-important */ text-transform: lowercase !important; } .ion-text-sm-capitalize { /* stylelint-disable-next-line declaration-no-important */ text-transform: capitalize !important; } } @media (min-width: 768px) { .ion-text-md-uppercase { /* stylelint-disable-next-line declaration-no-important */ text-transform: uppercase !important; } .ion-text-md-lowercase { /* stylelint-disable-next-line declaration-no-important */ text-transform: lowercase !important; } .ion-text-md-capitalize { /* stylelint-disable-next-line declaration-no-important */ text-transform: capitalize !important; } } @media (min-width: 992px) { .ion-text-lg-uppercase { /* stylelint-disable-next-line declaration-no-important */ text-transform: uppercase !important; } .ion-text-lg-lowercase { /* stylelint-disable-next-line declaration-no-important */ text-transform: lowercase !important; } .ion-text-lg-capitalize { /* stylelint-disable-next-line declaration-no-important */ text-transform: capitalize !important; } } @media (min-width: 1200px) { .ion-text-xl-uppercase { /* stylelint-disable-next-line declaration-no-important */ text-transform: uppercase !important; } .ion-text-xl-lowercase { /* stylelint-disable-next-line declaration-no-important */ text-transform: lowercase !important; } .ion-text-xl-capitalize { /* stylelint-disable-next-line declaration-no-important */ text-transform: capitalize !important; } } .ion-align-self-start { align-self: flex-start !important; } .ion-align-self-end { align-self: flex-end !important; } .ion-align-self-center { align-self: center !important; } .ion-align-self-stretch { align-self: stretch !important; } .ion-align-self-baseline { align-self: baseline !important; } .ion-align-self-auto { align-self: auto !important; } .ion-wrap { flex-wrap: wrap !important; } .ion-nowrap { flex-wrap: nowrap !important; } .ion-wrap-reverse { flex-wrap: wrap-reverse !important; } .ion-justify-content-start { justify-content: flex-start !important; } .ion-justify-content-center { justify-content: center !important; } .ion-justify-content-end { justify-content: flex-end !important; } .ion-justify-content-around { justify-content: space-around !important; } .ion-justify-content-between { justify-content: space-between !important; } .ion-justify-content-evenly { justify-content: space-evenly !important; } .ion-align-items-start { align-items: flex-start !important; } .ion-align-items-center { align-items: center !important; } .ion-align-items-end { align-items: flex-end !important; } .ion-align-items-stretch { align-items: stretch !important; } .ion-align-items-baseline { align-items: baseline !important; } /* Declare variables before making them global. dart-sass doesn't allow to declare variable with !global. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * This mixin generates keyfames. * Because of all keyframes can't be scoped, * we need to puts unique name in each btn-pulse call. */ /* According to the specification (https://www.w3.org/TR/css-scoping-1/#host-selector) :host and :host-context are pseudo-classes. So we assume they could be combined, like other pseudo-classes, even same ones. For example: ':nth-of-type(2n):nth-of-type(even)'. Ideal solution would be to prepend any selector with :host-context([dir=rtl]). Then nebular components will behave as an html element and respond to [dir] attribute on any level, so direction could be overridden on any component level. Implementation code: @mixin nb-rtl() { // add # to scss interpolation statement. // it works in comments and we can't use it here @at-root {selector-append(':host-context([dir=rtl])', &)} { @content; } } And when we call it somewhere: :host { .some-class { @include nb-rtl() { ... } } } :host-context(...) { .some-class { @include nb-rtl() { ... } } } Result will look like: :host-context([dir=rtl]):host .some-class { ... } :host-context([dir=rtl]):host-context(...) .some-class { ... } * Side note: :host-context():host selector are valid. https://lists.w3.org/Archives/Public/www-style/2015Feb/0305.html :host-context([dir=rtl]):host-context(...) should match any permutation, so order is not important. * Currently, there're two problems with this approach: First, is that we can't combine :host, :host-context. Angular bugs #14349, #19199. For the moment of writing, the only possible way is: :host { :host-context(...) { ... } } It doesn't work for us because mixin could be called somewhere deeper, like: :host { p { @include nb-rtl() { ... } } } We are not able to go up to :host level to place content passed to mixin. The second problem is that we only can be sure that we appending :host-context([dir=rtl]) to another :host/:host-context pseudo-class when called in theme files (*.theme.scss). * Side note: Currently, nb-install-component uses another approach where :host prepended with the theme name (https://github.com/angular/angular/blob/5b96078624b0a4760f2dbcf6fdf0bd62791be5bb/packages/compiler/src/shadow_css.ts#L441), but it was made to be able to use current realization of rtl and it can be rewritten back to :host-context($theme) once we will be able to use multiple shadow selectors. * But when it's called in *.component.scss we can't be sure, that selector starts with :host/:host-context, because angular allows omitting pseudo-classes if we don't need to style :host component itself. We can break such selectors, by just appending :host-context([dir=rtl]) to them. *** Possible solution check if we in theme by some theme variables and if so append, otherwise nest like @at-root :host-context([dir=rtl]) { // add # to scss interpolation statement. // it works in comments and we can't use it here {&} { @content; } } What if :host specified? Can we add space in :host-context(...) :host? Or maybe add :host selector anyway? If multiple :host selectors are allowed *** Problems with the current approach. 1. Direction can be applied only on document level, because mixin prepends theme class, which placed on the body. 2. *.component.scss styles should be in :host selector. Otherwise angular will add host attribute to [dir=rtl] attribute as well. General problems. Ltr is default document direction, but for proper work of nb-ltr (means ltr only), [dir=ltr] should be specified at least somewhere. ':not([dir=rtl]' not applicable here, because it's satisfy any parent, that don't have [dir=rtl] attribute. Previous approach was to use single rtl mixin and reset ltr properties to initial value. But sometimes it's hard to find, what the previous value should be. And such mixin call looks too verbose. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /* Declare variables before making them global. dart-sass doesn't allow to declare variable with !global. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * Sass map contains a list of all Theme variables and also their mappings into Component variables * A theme consists of a list of colors, backgrounds, borders, text styles and supporting variables. */ /*! * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ .visually-hidden { /* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px); } /* Declare variables before making them global. dart-sass doesn't allow to declare variable with !global. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * This mixin generates keyfames. * Because of all keyframes can't be scoped, * we need to puts unique name in each btn-pulse call. */ /* According to the specification (https://www.w3.org/TR/css-scoping-1/#host-selector) :host and :host-context are pseudo-classes. So we assume they could be combined, like other pseudo-classes, even same ones. For example: ':nth-of-type(2n):nth-of-type(even)'. Ideal solution would be to prepend any selector with :host-context([dir=rtl]). Then nebular components will behave as an html element and respond to [dir] attribute on any level, so direction could be overridden on any component level. Implementation code: @mixin nb-rtl() { // add # to scss interpolation statement. // it works in comments and we can't use it here @at-root {selector-append(':host-context([dir=rtl])', &)} { @content; } } And when we call it somewhere: :host { .some-class { @include nb-rtl() { ... } } } :host-context(...) { .some-class { @include nb-rtl() { ... } } } Result will look like: :host-context([dir=rtl]):host .some-class { ... } :host-context([dir=rtl]):host-context(...) .some-class { ... } * Side note: :host-context():host selector are valid. https://lists.w3.org/Archives/Public/www-style/2015Feb/0305.html :host-context([dir=rtl]):host-context(...) should match any permutation, so order is not important. * Currently, there're two problems with this approach: First, is that we can't combine :host, :host-context. Angular bugs #14349, #19199. For the moment of writing, the only possible way is: :host { :host-context(...) { ... } } It doesn't work for us because mixin could be called somewhere deeper, like: :host { p { @include nb-rtl() { ... } } } We are not able to go up to :host level to place content passed to mixin. The second problem is that we only can be sure that we appending :host-context([dir=rtl]) to another :host/:host-context pseudo-class when called in theme files (*.theme.scss). * Side note: Currently, nb-install-component uses another approach where :host prepended with the theme name (https://github.com/angular/angular/blob/5b96078624b0a4760f2dbcf6fdf0bd62791be5bb/packages/compiler/src/shadow_css.ts#L441), but it was made to be able to use current realization of rtl and it can be rewritten back to :host-context($theme) once we will be able to use multiple shadow selectors. * But when it's called in *.component.scss we can't be sure, that selector starts with :host/:host-context, because angular allows omitting pseudo-classes if we don't need to style :host component itself. We can break such selectors, by just appending :host-context([dir=rtl]) to them. *** Possible solution check if we in theme by some theme variables and if so append, otherwise nest like @at-root :host-context([dir=rtl]) { // add # to scss interpolation statement. // it works in comments and we can't use it here {&} { @content; } } What if :host specified? Can we add space in :host-context(...) :host? Or maybe add :host selector anyway? If multiple :host selectors are allowed *** Problems with the current approach. 1. Direction can be applied only on document level, because mixin prepends theme class, which placed on the body. 2. *.component.scss styles should be in :host selector. Otherwise angular will add host attribute to [dir=rtl] attribute as well. General problems. Ltr is default document direction, but for proper work of nb-ltr (means ltr only), [dir=ltr] should be specified at least somewhere. ':not([dir=rtl]' not applicable here, because it's satisfy any parent, that don't have [dir=rtl] attribute. Previous approach was to use single rtl mixin and reset ltr properties to initial value. But sometimes it's hard to find, what the previous value should be. And such mixin call looks too verbose. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ .cdk-overlay-container, .cdk-global-overlay-wrapper { pointer-events: none; top: 0; left: 0; height: 100%; width: 100%; } .cdk-overlay-container { position: fixed; z-index: 1000; } .cdk-overlay-container:empty { display: none; } .cdk-global-overlay-wrapper { display: flex; position: absolute; z-index: 1000; } .cdk-overlay-pane { position: absolute; pointer-events: auto; box-sizing: border-box; z-index: 1000; display: flex; max-width: 100%; max-height: 100%; } .cdk-overlay-backdrop { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1000; pointer-events: auto; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1); opacity: 0; } .cdk-overlay-backdrop.cdk-overlay-backdrop-showing { opacity: 1; } .cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing { opacity: 0.6; } .cdk-overlay-dark-backdrop { background: rgba(0, 0, 0, 0.32); } .cdk-overlay-transparent-backdrop { transition: visibility 1ms linear, opacity 1ms linear; visibility: hidden; opacity: 1; } .cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing { opacity: 0; visibility: visible; } .cdk-overlay-backdrop-noop-animation { transition: none; } .cdk-overlay-connected-position-bounding-box { position: absolute; z-index: 1000; display: flex; flex-direction: column; min-width: 1px; min-height: 1px; } .cdk-global-scrollblock { position: fixed; width: 100%; overflow-y: scroll; } /** * In case when Nebular Layout custom scroll `withScroll` mode is enabled * we need to disable default CDK scroll blocker (@link NbBlockScrollStrategyAdapter) on HTML element * so that it won't add additional positioning. */ .nb-global-scrollblock { position: static; width: auto; overflow: hidden; } /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /* * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /* * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /* * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /*! * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /* * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /*! * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /* * Normalization of HTML elements, manually forked from Normalize.css to remove * styles targeting irrelevant browsers while applying new styles. * * Normalize is licensed MIT. https://github.com/necolas/normalize.css */ html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } html, body { margin: 0; padding: 0; } /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type=checkbox], [type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type=search] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /** * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */ /* ! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com */ /* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: #E5E7EB; /* 2 */ } ::before, ::after { --tw-content: ''; } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. */ html { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; tab-size: 4; /* 3 */ font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ font-feature-settings: normal; /* 5 */ font-variation-settings: normal; /* 6 */ } /* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; /* 1 */ line-height: inherit; /* 2 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Ensure horizontal rules are visible by default. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font family by default. 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Add the correct font size in all browsers. */ small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ } /* Remove the inheritance of text transform in Edge and Firefox. */ button, select { text-transform: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles. */ button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { outline: auto; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /* Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Removes the default spacing and border for appropriate elements. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color. */ input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; /* 1 */ color: #9CA3AF; /* 2 */ } input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ color: #9CA3AF; /* 2 */ } /* Set the default cursor for buttons. */ button, [role="button"] { cursor: pointer; } /* Make sure disabled buttons don't get the pointer cursor. */ :disabled { cursor: default; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } /* Make elements with the HTML hidden attribute stay hidden by default */ [hidden] { display: none; } .tooltip-arrow,.tooltip-arrow:before{ position: absolute; width: 8px; height: 8px; background: inherit; } .tooltip-arrow{ visibility: hidden; } .tooltip-arrow:before{ content: ""; visibility: visible; transform: rotate(45deg); } [data-tooltip-style^='light'] + .tooltip > .tooltip-arrow:before{ border-style: solid; border-color: #e5e7eb; } [data-tooltip-style^='light'] + .tooltip[data-popper-placement^='top'] > .tooltip-arrow:before{ border-bottom-width: 1px; border-right-width: 1px; } [data-tooltip-style^='light'] + .tooltip[data-popper-placement^='right'] > .tooltip-arrow:before{ border-bottom-width: 1px; border-left-width: 1px; } [data-tooltip-style^='light'] + .tooltip[data-popper-placement^='bottom'] > .tooltip-arrow:before{ border-top-width: 1px; border-left-width: 1px; } [data-tooltip-style^='light'] + .tooltip[data-popper-placement^='left'] > .tooltip-arrow:before{ border-top-width: 1px; border-right-width: 1px; } .tooltip[data-popper-placement^='top'] > .tooltip-arrow{ bottom: -4px; } .tooltip[data-popper-placement^='bottom'] > .tooltip-arrow{ top: -4px; } .tooltip[data-popper-placement^='left'] > .tooltip-arrow{ right: -4px; } .tooltip[data-popper-placement^='right'] > .tooltip-arrow{ left: -4px; } .tooltip.invisible > .tooltip-arrow:before{ visibility: hidden; } [data-popper-arrow],[data-popper-arrow]:before{ position: absolute; width: 8px; height: 8px; background: inherit; } [data-popper-arrow]{ visibility: hidden; } [data-popper-arrow]:before{ content: ""; visibility: visible; transform: rotate(45deg); } [data-popper-arrow]:after{ content: ""; visibility: visible; transform: rotate(45deg); position: absolute; width: 9px; height: 9px; background: inherit; } [role="tooltip"] > [data-popper-arrow]:before{ border-style: solid; border-color: #e5e7eb; } .dark [role="tooltip"] > [data-popper-arrow]:before{ border-style: solid; border-color: #4b5563; } [role="tooltip"] > [data-popper-arrow]:after{ border-style: solid; border-color: #e5e7eb; } .dark [role="tooltip"] > [data-popper-arrow]:after{ border-style: solid; border-color: #4b5563; } [data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow]:before{ border-bottom-width: 1px; border-right-width: 1px; } [data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow]:after{ border-bottom-width: 1px; border-right-width: 1px; } [data-popover][role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow]:before{ border-bottom-width: 1px; border-left-width: 1px; } [data-popover][role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow]:after{ border-bottom-width: 1px; border-left-width: 1px; } [data-popover][role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow]:before{ border-top-width: 1px; border-left-width: 1px; } [data-popover][role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow]:after{ border-top-width: 1px; border-left-width: 1px; } [data-popover][role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow]:before{ border-top-width: 1px; border-right-width: 1px; } [data-popover][role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow]:after{ border-top-width: 1px; border-right-width: 1px; } [data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow]{ bottom: -5px; } [data-popover][role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow]{ top: -5px; } [data-popover][role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow]{ right: -5px; } [data-popover][role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow]{ left: -5px; } [role="tooltip"].invisible > [data-popper-arrow]:before{ visibility: hidden; } [role="tooltip"].invisible > [data-popper-arrow]:after{ visibility: hidden; } [type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fff; border-color: #6B7280; border-width: 1px; border-radius: 0px; padding-top: 0.5rem; padding-right: 0.75rem; padding-bottom: 0.5rem; padding-left: 0.75rem; font-size: 1rem; line-height: 1.5rem; --tw-shadow: 0 0 #0000; } [type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus{ outline: 2px solid transparent; outline-offset: 2px; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: #1C64F2; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); border-color: #1C64F2; } input::-moz-placeholder, textarea::-moz-placeholder{ color: #6B7280; opacity: 1; } input::placeholder,textarea::placeholder{ color: #6B7280; opacity: 1; } ::-webkit-datetime-edit-fields-wrapper{ padding: 0; } ::-webkit-date-and-time-value{ min-height: 1.5em; } select:not([size]){ background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 6'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3e %3c/svg%3e"); background-position: right 0.75rem center; background-repeat: no-repeat; background-size: 0.75em 0.75em; padding-right: 2.5rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; } [multiple]{ background-image: none; background-image: initial; background-position: 0 0; background-position: initial; background-repeat: repeat; background-repeat: initial; background-size: auto auto; background-size: initial; padding-right: 0.75rem; -webkit-print-color-adjust: inherit; print-color-adjust: inherit; } [type='checkbox'],[type='radio']{ -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; display: inline-block; vertical-align: middle; background-origin: border-box; -webkit-user-select: none; -moz-user-select: none; user-select: none; flex-shrink: 0; height: 1rem; width: 1rem; color: #1C64F2; background-color: #fff; border-color: #6B7280; border-width: 1px; --tw-shadow: 0 0 #0000; } [type='checkbox']{ border-radius: 0px; } [type='radio']{ border-radius: 100%; } [type='checkbox']:focus,[type='radio']:focus{ outline: 2px solid transparent; outline-offset: 2px; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 2px; --tw-ring-offset-color: #fff; --tw-ring-color: #1C64F2; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } [type='checkbox']:checked,[type='radio']:checked,.dark [type='checkbox']:checked,.dark [type='radio']:checked{ border-color: transparent; background-color: currentColor; background-size: 0.55em 0.55em; background-position: center; background-repeat: no-repeat; } [type='checkbox']:checked{ background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1 5.917 5.724 10.5 15 1.5'/%3e %3c/svg%3e"); background-repeat: no-repeat; background-size: 0.55em 0.55em; -webkit-print-color-adjust: exact; print-color-adjust: exact; } [type='radio']:checked{ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); background-size: 1em 1em; } .dark [type='radio']:checked{ background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); background-size: 1em 1em; } [type='checkbox']:indeterminate{ background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1 5.917 5.724 10.5 15 1.5'/%3e %3c/svg%3e"); background-color: currentColor; border-color: transparent; background-position: center; background-repeat: no-repeat; background-size: 0.55em 0.55em; -webkit-print-color-adjust: exact; print-color-adjust: exact; } [type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{ border-color: transparent; background-color: currentColor; } [type='file']{ background: transparent none repeat 0 0 / auto auto padding-box border-box scroll; background: initial; border-color: inherit; border-width: 0; border-radius: 0; padding: 0; font-size: inherit; line-height: inherit; } [type='file']:focus{ outline: 1px auto inherit; } input[type=file]::file-selector-button{ color: white; background: #1F2937; border: 0; font-weight: 500; font-size: 0.875rem; cursor: pointer; padding-top: 0.625rem; padding-bottom: 0.625rem; padding-left: 2rem; padding-right: 1rem; -webkit-margin-start: -1rem; margin-inline-start: -1rem; -webkit-margin-end: 1rem; margin-inline-end: 1rem; } input[type=file]::file-selector-button:hover{ background: #374151; } .dark input[type=file]::file-selector-button{ color: white; background: #4B5563; } .dark input[type=file]::file-selector-button:hover{ background: #6B7280; } input[type="range"]::-webkit-slider-thumb{ height: 1.25rem; width: 1.25rem; background: #1C64F2; border-radius: 9999px; border: 0; appearance: none; -moz-appearance: none; -webkit-appearance: none; cursor: pointer; } input[type="range"]:disabled::-webkit-slider-thumb{ background: #9CA3AF; } .dark input[type="range"]:disabled::-webkit-slider-thumb{ background: #6B7280; } input[type="range"]:focus::-webkit-slider-thumb{ outline: 2px solid transparent; outline-offset: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-opacity: 1px; --tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity)); } input[type="range"]::-moz-range-thumb{ height: 1.25rem; width: 1.25rem; background: #1C64F2; border-radius: 9999px; border: 0; appearance: none; -moz-appearance: none; -webkit-appearance: none; cursor: pointer; } input[type="range"]:disabled::-moz-range-thumb{ background: #9CA3AF; } .dark input[type="range"]:disabled::-moz-range-thumb{ background: #6B7280; } input[type="range"]::-moz-range-progress{ background: #3F83F8; } input[type="range"]::-ms-fill-lower{ background: #3F83F8; } .toggle-bg:after{ content: ""; position: absolute; top: 0.125rem; left: 0.125rem; background: white; border-color: #D1D5DB; border-width: 1px; border-radius: 9999px; height: 1.25rem; width: 1.25rem; transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter; transition-duration: .15s; box-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); } input:checked + .toggle-bg:after{ transform: translateX(100%);; border-color: white; } input:checked + .toggle-bg{ background: #1C64F2; border-color: #1C64F2; } *, ::before, ::after{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(63 131 248 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; } ::backdrop{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(63 131 248 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; } .container{ width: 100%; } @media (min-width: 640px){ .container{ max-width: 640px; } } @media (min-width: 768px){ .container{ max-width: 768px; } } @media (min-width: 1024px){ .container{ max-width: 1024px; } } @media (min-width: 1280px){ .container{ max-width: 1280px; } } @media (min-width: 1536px){ .container{ max-width: 1536px; } } .visible{ visibility: visible !important; } .invisible{ visibility: hidden !important; } .collapse{ visibility: collapse !important; } .static{ position: static !important; } .fixed{ position: fixed !important; } .absolute{ position: absolute !important; } .relative{ position: relative !important; } .inset-0{ inset: 0px !important; } .bottom-0{ bottom: 0px !important; } .bottom-\[60px\]{ bottom: 60px !important; } .left-0{ left: 0px !important; } .right-0{ right: 0px !important; } .top-0{ top: 0px !important; } .z-10{ z-index: 10 !important; } .z-20{ z-index: 20 !important; } .z-30{ z-index: 30 !important; } .z-40{ z-index: 40 !important; } .z-50{ z-index: 50 !important; } .mx-2{ margin-left: 0.5rem !important; margin-right: 0.5rem !important; } .mx-auto{ margin-left: auto !important; margin-right: auto !important; } .my-auto{ margin-top: auto !important; margin-bottom: auto !important; } .mb-1{ margin-bottom: 0.25rem !important; } .mb-2{ margin-bottom: 0.5rem !important; } .ml-2{ margin-left: 0.5rem !important; } .mr-2{ margin-right: 0.5rem !important; } .mt-10{ margin-top: 2.5rem !important; } .mt-2{ margin-top: 0.5rem !important; } .mt-5{ margin-top: 1.25rem !important; } .block{ display: block !important; } .inline-block{ display: inline-block !important; } .inline{ display: inline !important; } .flex{ display: flex !important; } .inline-flex{ display: inline-flex !important; } .table{ display: table !important; } .grid{ display: grid !important; } .hidden{ display: none !important; } .h-0{ height: 0px !important; } .h-0\.5{ height: 0.125rem !important; } .h-10{ height: 2.5rem !important; } .h-2{ height: 0.5rem !important; } .h-4{ height: 1rem !important; } .h-52{ height: 13rem !important; } .h-6{ height: 1.5rem !important; } .h-9{ height: 2.25rem !important; } .h-fit{ height: -moz-fit-content !important; height: fit-content !important; } .h-full{ height: 100% !important; } .max-h-0{ max-height: 0px !important; } .max-h-96{ max-height: 24rem !important; } .w-1\/2{ width: 50% !important; } .w-32{ width: 8rem !important; } .w-4{ width: 1rem !important; } .w-40{ width: 10rem !important; } .w-6{ width: 1.5rem !important; } .w-64{ width: 16rem !important; } .w-96{ width: 24rem !important; } .w-auto{ width: auto !important; } .w-full{ width: 100% !important; } .max-w-md{ max-width: 28rem !important; } .flex-1{ flex: 1 1 0% !important; } .flex-shrink{ flex-shrink: 1 !important; } .-translate-x-full{ --tw-translate-x: -100% !important; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important; } .-translate-y-full{ --tw-translate-y: -100% !important; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important; } .translate-x-0{ --tw-translate-x: 0px !important; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important; } .translate-x-full{ --tw-translate-x: 100% !important; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important; } .translate-y-full{ --tw-translate-y: 100% !important; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important; } .rotate-180{ --tw-rotate: 180deg !important; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important; } .transform{ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important; } .transform-none{ transform: none !important; } .cursor-default{ cursor: default !important; } .cursor-not-allowed{ cursor: not-allowed !important; } .cursor-pointer{ cursor: pointer !important; } .resize{ resize: both !important; } .grid-cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .grid-cols-7{ grid-template-columns: repeat(7, minmax(0, 1fr)) !important; } .flex-row{ flex-direction: row !important; } .flex-col{ flex-direction: column !important; } .items-start{ align-items: flex-start !important; } .items-end{ align-items: flex-end !important; } .items-center{ align-items: center !important; } .justify-start{ justify-content: flex-start !important; } .justify-end{ justify-content: flex-end !important; } .justify-center{ justify-content: center !important; } .justify-between{ justify-content: space-between !important; } .space-x-2 > :not([hidden]) ~ :not([hidden]){ --tw-space-x-reverse: 0 !important; margin-right: calc(0.5rem * var(--tw-space-x-reverse)) !important; margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))) !important; } .overflow-hidden{ overflow: hidden !important; } .overflow-y-auto{ overflow-y: auto !important; } .hyphens-auto{ -webkit-hyphens: auto !important; hyphens: auto !important; } .break-words{ overflow-wrap: break-word !important; } .rounded{ border-radius: 0.25rem !important; } .rounded-lg{ border-radius: 0.5rem !important; } .rounded-md{ border-radius: 0.375rem !important; } .rounded-l-lg{ border-top-left-radius: 0.5rem !important; border-bottom-left-radius: 0.5rem !important; } .rounded-r-lg{ border-top-right-radius: 0.5rem !important; border-bottom-right-radius: 0.5rem !important; } .border{ border-width: 1px !important; } .border-0{ border-width: 0px !important; } .border-blue-600{ --tw-border-opacity: 1 !important; border-color: rgb(28 100 242 / var(--tw-border-opacity)) !important; } .border-blue-700{ --tw-border-opacity: 1 !important; border-color: rgb(26 86 219 / var(--tw-border-opacity)) !important; } .border-gray-100{ --tw-border-opacity: 1 !important; border-color: rgb(243 244 246 / var(--tw-border-opacity)) !important; } .border-gray-300{ --tw-border-opacity: 1 !important; border-color: rgb(209 213 219 / var(--tw-border-opacity)) !important; } .bg-black{ --tw-bg-opacity: 1 !important; background-color: rgb(0 0 0 / var(--tw-bg-opacity)) !important; } .bg-blue-700{ --tw-bg-opacity: 1 !important; background-color: rgb(26 86 219 / var(--tw-bg-opacity)) !important; } .bg-gray-100{ --tw-bg-opacity: 1 !important; background-color: rgb(243 244 246 / var(--tw-bg-opacity)) !important; } .bg-gray-200{ --tw-bg-opacity: 1 !important; background-color: rgb(229 231 235 / var(--tw-bg-opacity)) !important; } .bg-gray-500{ --tw-bg-opacity: 1 !important; background-color: rgb(107 114 128 / var(--tw-bg-opacity)) !important; } .bg-gray-800{ --tw-bg-opacity: 1 !important; background-color: rgb(31 41 55 / var(--tw-bg-opacity)) !important; } .bg-gray-900{ --tw-bg-opacity: 1 !important; background-color: rgb(17 24 39 / var(--tw-bg-opacity)) !important; } .bg-gray-950{ --tw-bg-opacity: 1 !important; background-color: rgb(3 7 18 / var(--tw-bg-opacity)) !important; } .bg-green-500{ --tw-bg-opacity: 1 !important; background-color: rgb(14 159 110 / var(--tw-bg-opacity)) !important; } .bg-green-600{ --tw-bg-opacity: 1 !important; background-color: rgb(5 122 85 / var(--tw-bg-opacity)) !important; } .bg-red-400{ --tw-bg-opacity: 1 !important; background-color: rgb(249 128 128 / var(--tw-bg-opacity)) !important; } .bg-red-600{ --tw-bg-opacity: 1 !important; background-color: rgb(224 36 36 / var(--tw-bg-opacity)) !important; } .bg-white{ --tw-bg-opacity: 1 !important; background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important; } .bg-white\/50{ background-color: rgb(255 255 255 / 0.5) !important; } .bg-opacity-50{ --tw-bg-opacity: 0.5 !important; } .p-1{ padding: 0.25rem !important; } .p-2{ padding: 0.5rem !important; } .p-2\.5{ padding: 0.625rem !important; } .p-4{ padding: 1rem !important; } .p-5{ padding: 1.25rem !important; } .px-2{ padding-left: 0.5rem !important; padding-right: 0.5rem !important; } .px-4{ padding-left: 1rem !important; padding-right: 1rem !important; } .px-5{ padding-left: 1.25rem !important; padding-right: 1.25rem !important; } .py-2{ padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .py-2\.5{ padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; } .py-3{ padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } .pt-2{ padding-top: 0.5rem !important; } .text-center{ text-align: center !important; } .text-lg{ font-size: 1.125rem !important; line-height: 1.75rem !important; } .text-sm{ font-size: 0.875rem !important; line-height: 1.25rem !important; } .text-xl{ font-size: 1.25rem !important; line-height: 1.75rem !important; } .font-bold{ font-weight: 700 !important; } .font-medium{ font-weight: 500 !important; } .font-semibold{ font-weight: 600 !important; } .uppercase{ text-transform: uppercase !important; } .leading-6{ line-height: 1.5rem !important; } .leading-9{ line-height: 2.25rem !important; } .text-black{ --tw-text-opacity: 1 !important; color: rgb(0 0 0 / var(--tw-text-opacity)) !important; } .text-blue-600{ --tw-text-opacity: 1 !important; color: rgb(28 100 242 / var(--tw-text-opacity)) !important; } .text-gray-500{ --tw-text-opacity: 1 !important; color: rgb(107 114 128 / var(--tw-text-opacity)) !important; } .text-gray-700{ --tw-text-opacity: 1 !important; color: rgb(55 65 81 / var(--tw-text-opacity)) !important; } .text-gray-900{ --tw-text-opacity: 1 !important; color: rgb(17 24 39 / var(--tw-text-opacity)) !important; } .text-white{ --tw-text-opacity: 1 !important; color: rgb(255 255 255 / var(--tw-text-opacity)) !important; } .opacity-0{ opacity: 0 !important; } .opacity-100{ opacity: 1 !important; } .shadow{ --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important; --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important; box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow) !important; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; } .shadow-lg{ --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) !important; --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color) !important; box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow) !important; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; } .shadow-md{ --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) !important; --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color) !important; box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow) !important; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important; } .outline{ outline-style: solid !important; } .blur{ --tw-blur: blur(8px) !important; filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important; } .filter{ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important; } .transition{ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter !important; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-duration: 150ms !important; } .transition-opacity{ transition-property: opacity !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-duration: 150ms !important; } .transition-transform{ transition-property: transform !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-duration: 150ms !important; } .ease-out{ transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important; } nb-layout .scrollable-container { scrollbar-face-color: var(--layout-scrollbar-color); scrollbar-track-color: var(--layout-scrollbar-background-color); } nb-layout .scrollable-container::-webkit-scrollbar { width: var(--layout-scrollbar-width); height: var(--layout-scrollbar-width); } nb-layout .scrollable-container::-webkit-scrollbar-thumb { background: var(--layout-scrollbar-color); cursor: pointer; border-radius: calc(var(--layout-scrollbar-width) * 0.5); } nb-layout .scrollable-container::-webkit-scrollbar-track { background: var(--layout-scrollbar-background-color); } nb-layout .scrollable-container::-webkit-scrollbar-corner { background: var(--layout-scrollbar-background-color); } nb-layout.with-scroll .scrollable-container { overflow: auto; height: 100vh; display: block; } @media (max-width: 767.98px) { nb-layout.with-scroll .scrollable-container { overflow-y: scroll; -webkit-overflow-scrolling: touch; } } .layout { min-width: var(--layout-window-mode-min-width); } nb-layout.window-mode { background: var(--layout-window-mode-background-color); display: block; } nb-layout.window-mode .scrollable-container { max-width: 1920px; margin: 0 auto; } nb-layout.window-mode .layout nb-layout-header { max-width: 1920px; margin-left: auto; margin-right: auto; width: 100%; } nb-layout.window-mode .layout nb-layout-header nav { max-width: 1920px; margin: 0 auto; } @media screen and (min-width: 1940px) { nb-layout.window-mode { padding-top: calc(var(--layout-window-mode-padding-top) * 0.25); } nb-layout.window-mode nb-layout-header.fixed { top: calc(var(--layout-window-mode-padding-top) * 0.25); } nb-layout.window-mode nb-layout-header.fixed ~ .layout-container nb-sidebar .main-container-fixed { height: calc(100vh - calc(var(--layout-window-mode-padding-top) * 0.25) - var(--header-height)); top: calc(calc(var(--layout-window-mode-padding-top) * 0.25) + var(--header-height)); } nb-layout.window-mode nb-sidebar.fixed { left: calc((100vw - 1920px) / 2); } nb-layout.window-mode .layout .layout-container nb-sidebar.fixed.right { right: calc((100vw - 1920px) / 2); } nb-layout.window-mode .layout .layout-container nb-sidebar.fixed { top: calc(var(--header-height) + calc(var(--layout-window-mode-padding-top) * 0.25)); } nb-layout.window-mode .scrollable-container { height: calc(100vh - calc(var(--layout-window-mode-padding-top) * 0.25)); box-shadow: var(--layout-window-shadow); } nb-layout.window-mode nb-layout.with-scroll .scrollable-container { height: calc(100vh - calc(var(--layout-window-mode-padding-top) * 0.25)); } } @media screen and (min-width: 2070px) { nb-layout.window-mode { padding-top: calc(var(--layout-window-mode-padding-top) * 0.5); } nb-layout.window-mode nb-layout-header.fixed { top: calc(var(--layout-window-mode-padding-top) * 0.5); } nb-layout.window-mode nb-layout-header.fixed ~ .layout-container nb-sidebar .main-container-fixed { height: calc(100vh - calc(var(--layout-window-mode-padding-top) * 0.5) - var(--header-height)); top: calc(calc(var(--layout-window-mode-padding-top) * 0.5) + var(--header-height)); } nb-layout.window-mode nb-sidebar.fixed { left: calc((100vw - 1920px) / 2); } nb-layout.window-mode .layout .layout-container nb-sidebar.fixed.right { right: calc((100vw - 1920px) / 2); } nb-layout.window-mode .layout .layout-container nb-sidebar.fixed { top: calc(var(--header-height) + calc(var(--layout-window-mode-padding-top) * 0.5)); } nb-layout.window-mode .scrollable-container { height: calc(100vh - calc(var(--layout-window-mode-padding-top) * 0.5)); box-shadow: var(--layout-window-shadow); } nb-layout.window-mode nb-layout.with-scroll .scrollable-container { height: calc(100vh - calc(var(--layout-window-mode-padding-top) * 0.5)); } } @media screen and (min-width: 2220px) { nb-layout.window-mode { padding-top: var(--layout-window-mode-padding-top); } nb-layout.window-mode nb-layout-header.fixed { top: var(--layout-window-mode-padding-top); } nb-layout.window-mode nb-layout-header.fixed ~ .layout-container nb-sidebar .main-container-fixed { height: calc(100vh - var(--layout-window-mode-padding-top) - var(--header-height)); top: calc(var(--layout-window-mode-padding-top) + var(--header-height)); } nb-layout.window-mode nb-sidebar.fixed { left: calc((100vw - 1920px) / 2); } nb-layout.window-mode .layout .layout-container nb-sidebar.fixed.right { right: calc((100vw - 1920px) / 2); } nb-layout.window-mode .layout .layout-container nb-sidebar.fixed { top: calc(var(--header-height) + var(--layout-window-mode-padding-top)); } nb-layout.window-mode .scrollable-container { height: calc(100vh - var(--layout-window-mode-padding-top)); box-shadow: var(--layout-window-shadow); } nb-layout.window-mode nb-layout.with-scroll .scrollable-container { height: calc(100vh - var(--layout-window-mode-padding-top)); } } nb-layout .layout { background-color: var(--layout-background-color); color: var(--layout-text-color); font-family: var(--layout-text-font-family); font-size: var(--layout-text-font-size); font-weight: var(--layout-text-font-weight); line-height: var(--layout-text-line-height); min-height: var(--layout-min-height); } nb-layout .layout .layout-container nb-sidebar.fixed, nb-layout .layout .layout-container nb-sidebar .main-container-fixed { top: var(--header-height); } nb-layout .layout .layout-container .content nb-layout-footer { box-shadow: var(--footer-shadow); } nb-layout .layout .layout-container .content nb-layout-footer nav { background-color: var(--footer-background-color); border-top: var(--footer-divider-width) var(--footer-divider-style) var(--footer-divider-color); color: var(--footer-text-color); font-family: var(--footer-text-font-family); font-size: var(--footer-text-font-size); font-weight: var(--footer-text-font-weight); line-height: var(--footer-text-line-height); padding: var(--footer-padding); } nb-layout .layout .layout-container .content nb-layout-footer nav a { color: var(--footer-text-highlight-color); } nb-layout .layout .layout-container .content nb-layout-footer nav a:focus, nb-layout .layout .layout-container .content nb-layout-footer nav a:active, nb-layout .layout .layout-container .content nb-layout-footer nav a:hover { color: var(--footer-text-highlight-color); } nb-layout .layout .layout-container .content.center { width: var(--layout-content-width); flex: 0 100 var(--layout-content-width) !important; } nb-layout .layout .layout-container .content .columns nb-layout-column { padding: var(--layout-padding); } @media (max-width: 991.98px) { nb-layout .layout .layout-container .content .columns nb-layout-column { padding: var(--layout-medium-padding); } } @media (max-width: 767.98px) { nb-layout .layout .layout-container .content .columns nb-layout-column { padding: var(--layout-small-padding); } } nb-layout-header { background-color: var(--header-background-color); color: var(--header-text-color); font-family: var(--header-text-font-family); font-size: var(--header-text-font-size); font-weight: var(--header-text-font-weight); line-height: var(--header-text-line-height); } nb-layout-header nav { color: var(--header-text-color); box-shadow: var(--header-shadow); height: var(--header-height); padding: var(--header-padding); } nb-layout-header nav a { color: var(--header-text-color); } nb-layout-header nav a:focus, nb-layout-header nav a:active, nb-layout-header nav a:hover { color: var(--header-text-color); } nb-layout-header ~ .layout-container { min-height: calc(var(--layout-min-height) - var(--header-height)); } nb-layout-header.fixed ~ .layout-container { padding-top: var(--header-height); min-height: var(--layout-min-height); } nb-layout-header.fixed ~ .layout-container nb-sidebar .main-container { height: calc(var(--sidebar-height) - var(--header-height)); } nb-layout.with-subheader nb-sidebar .main-container { box-shadow: none; } nb-sidebar { background-color: var(--sidebar-background-color); box-shadow: var(--sidebar-shadow); color: var(--sidebar-text-color); font-family: var(--sidebar-text-font-family); font-size: var(--sidebar-text-font-size); font-weight: var(--sidebar-text-font-weight); line-height: var(--sidebar-text-line-height); width: var(--sidebar-width); } nb-sidebar .main-container { height: var(--sidebar-height); width: var(--sidebar-width); } nb-sidebar .scrollable { padding: var(--sidebar-padding); position: relative; -webkit-transform: translate3d(0, 0, 0); scrollbar-face-color: var(--sidebar-scrollbar-color); scrollbar-track-color: var(--sidebar-scrollbar-background-color); } @media (max-width: 767.98px) { nb-sidebar .scrollable { overflow-y: scroll; -webkit-overflow-scrolling: touch; } } nb-sidebar .scrollable::-webkit-scrollbar { width: var(--sidebar-scrollbar-width); height: var(--sidebar-scrollbar-width); } nb-sidebar .scrollable::-webkit-scrollbar-thumb { background: var(--sidebar-scrollbar-color); cursor: pointer; border-radius: calc(var(--sidebar-scrollbar-width) * 0.5); } nb-sidebar .scrollable::-webkit-scrollbar-track { background: var(--sidebar-scrollbar-background-color); } nb-sidebar .scrollable::-webkit-scrollbar-corner { background: var(--sidebar-scrollbar-background-color); } nb-sidebar.collapsed { width: 0; padding: 0; } nb-sidebar.collapsed .main-container { width: 0; padding: 0; } nb-sidebar.collapsed .scrollable { width: 0; padding: 0; overflow: hidden; } nb-sidebar.collapsed nb-sidebar-header, nb-sidebar.collapsed nb-sidebar-footer { width: 0; padding: 0; overflow: hidden; } nb-sidebar.compacted { width: var(--sidebar-width-compact); } nb-sidebar.compacted .main-container { width: var(--sidebar-width-compact); } nb-sidebar.compacted nb-menu { width: var(--sidebar-width-compact); } nb-sidebar.compacted nb-menu .menu-item a.active { position: relative; } nb-sidebar.compacted nb-menu .menu-item a.active::before { position: absolute; content: ""; top: 0; height: 100%; width: 4px; background: var(--sidebar-menu-item-highlight-color); } [dir=ltr] nb-sidebar.compacted nb-menu .menu-item a.active::before { left: 0; } [dir=rtl] nb-sidebar.compacted nb-menu .menu-item a.active::before { right: 0; } nb-sidebar.compacted nb-menu > .menu-items > .menu-item > a span, nb-sidebar.compacted nb-menu > .menu-items > .menu-item > a nb-badge, nb-sidebar.compacted nb-menu > .menu-items > .menu-item > a .expand-state { display: none; } nb-sidebar.compacted nb-menu .menu-items > .menu-item { transition: border-color 1s ease; } nb-sidebar.compacted nb-menu .menu-items > .menu-item.menu-group { display: block; color: transparent; width: 0; padding: 0; overflow: hidden; } nb-sidebar.compacted nb-menu .menu-items > .menu-item i { margin-right: 0; } nb-sidebar.compacted nb-menu .menu-items > .menu-item a { justify-content: center; } nb-sidebar.compacted nb-menu .menu-items > .menu-item > .expanded { display: none; } nb-sidebar.compacted.left.fixed ~ .content { margin-left: var(--sidebar-width-compact); } nb-sidebar.compacted.fixed.right ~ .content { margin-left: 0; margin-right: var(--sidebar-width-compact); } nb-sidebar.compacted.left.fixed ~ .content.center { padding-left: var(--sidebar-width-compact); } nb-sidebar.compacted.fixed.right ~ .content.center { padding-left: 0; padding-right: var(--sidebar-width-compact); } [dir=ltr] nb-sidebar.compacted.start.fixed ~ .content { margin-left: var(--sidebar-width-compact); } [dir=rtl] nb-sidebar.compacted.start.fixed ~ .content { margin-right: var(--sidebar-width-compact); } [dir=ltr] nb-sidebar.compacted.fixed.end ~ .content { margin-right: var(--sidebar-width-compact); } [dir=rtl] nb-sidebar.compacted.fixed.end ~ .content { margin-left: var(--sidebar-width-compact); } [dir=ltr] nb-sidebar.compacted.start.fixed ~ .content.center { padding-left: var(--sidebar-width-compact); } [dir=rtl] nb-sidebar.compacted.start.fixed ~ .content.center { padding-right: var(--sidebar-width-compact); } [dir=ltr] nb-sidebar.compacted.fixed.end ~ .content.center { padding-right: var(--sidebar-width-compact); } [dir=rtl] nb-sidebar.compacted.fixed.end ~ .content.center { padding-left: var(--sidebar-width-compact); } nb-sidebar.fixed.left.collapsed + .content, nb-sidebar.fixed.start.collapsed + .content { margin-left: 0; } nb-sidebar.fixed.right.collapsed + .content, nb-sidebar.fixed.end.collapsed + .content { margin-right: 0; } nb-sidebar.expanded { width: var(--sidebar-width); } nb-sidebar.expanded > .scrollable { width: var(--sidebar-width); } nb-sidebar nb-sidebar-header { padding: var(--sidebar-padding); height: var(--sidebar-header-height); } nb-sidebar nb-sidebar-footer { padding: var(--sidebar-padding); height: var(--sidebar-footer-height); } nb-sidebar nb-menu { margin: 0 calc(var(--sidebar-padding) * -1) calc(var(--sidebar-padding) * -1); } nb-calendar-view-mode [nbButton].appearance-ghost.status-basic, nb-calendar-view-mode .appearance-ghost.status-basic[nbButtonToggle], nb-calendar-view-mode [nbButton].appearance-ghost.status-basic:hover, nb-calendar-view-mode [nbButton].appearance-ghost.status-basic:focus, nb-calendar-view-mode [nbButton].appearance-ghost.status-basic:active, nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic, nb-calendar-pageable-navigation .appearance-ghost.status-basic[nbButtonToggle], nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic:hover, nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic:focus, nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic:active { color: var(--calendar-navigation-text-color); font-family: var(--calendar-navigation-text-font-family); font-size: var(--calendar-navigation-title-text-font-size); font-weight: var(--calendar-navigation-title-text-font-weight); line-height: var(--calendar-navigation-title-text-line-height); } nb-calendar-view-mode [nbButton].appearance-ghost.status-basic:focus, nb-calendar-view-mode .appearance-ghost.status-basic[nbButtonToggle]:focus, nb-calendar-view-mode [nbButton].appearance-ghost.status-basic:focus:not(:hover):not(:active), nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic:focus, nb-calendar-pageable-navigation .appearance-ghost.status-basic[nbButtonToggle]:focus, nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic:focus:not(:hover):not(:active) { box-shadow: none; } [dir=ltr] nb-calendar-pageable-navigation { margin-left: auto; } [dir=rtl] nb-calendar-pageable-navigation { margin-right: auto; } nb-calendar-picker { display: block; padding-top: var(--calendar-picker-padding-top); padding-bottom: var(--calendar-picker-padding-bottom); } [dir=ltr] nb-calendar-picker { padding-right: var(--calendar-picker-padding-end); padding-left: var(--calendar-picker-padding-start); } [dir=rtl] nb-calendar-picker { padding-right: var(--calendar-picker-padding-start); padding-left: var(--calendar-picker-padding-end); } nb-calendar-days-names { background: var(--calendar-weekday-background); border-top: var(--calendar-weekday-divider-width) solid var(--calendar-weekday-divider-color); border-bottom: var(--calendar-weekday-divider-width) solid var(--calendar-weekday-divider-color); } [dir=ltr] nb-calendar-days-names { padding-left: var(--calendar-picker-padding-start); padding-right: var(--calendar-picker-padding-end); } [dir=rtl] nb-calendar-days-names { padding-left: var(--calendar-picker-padding-end); padding-right: var(--calendar-picker-padding-start); } nb-calendar-days-names .day { width: var(--calendar-weekday-width); height: var(--calendar-weekday-height); color: var(--calendar-weekday-text-color); font-size: var(--calendar-weekday-text-font-size); font-weight: var(--calendar-weekday-text-font-weight); line-height: var(--calendar-weekday-text-line-height); } nb-calendar-days-names .day.holiday { color: var(--calendar-weekday-holiday-text-color); } nb-calendar-days-names.size-large .day { width: var(--calendar-weekday-large-width); height: var(--calendar-weekday-large-height); } nb-calendar-week-numbers { background: var(--calendar-weeknumber-background); font-size: var(--calendar-weeknumber-text-font-size); font-weight: var(--calendar-weeknumber-text-font-weight); line-height: var(--calendar-weeknumber-text-line-height); color: var(--calendar-weeknumber-text-color); padding-bottom: var(--calendar-picker-padding-bottom); } nb-calendar-week-numbers .sign-container { display: flex; flex-direction: column; border-top: var(--calendar-weeknumber-divider-width) solid var(--calendar-weeknumber-divider-color); border-bottom: var(--calendar-weeknumber-divider-width) solid var(--calendar-weeknumber-divider-color); margin-bottom: var(--calendar-picker-padding-top); } nb-calendar-week-numbers .sign, nb-calendar-week-numbers .week-number { display: flex; align-items: center; justify-content: center; height: var(--calendar-weeknumber-height); width: var(--calendar-weeknumber-width); } nb-calendar-week-numbers.size-large .sign, nb-calendar-week-numbers.size-large .week-number { height: var(--calendar-weeknumber-large-height); width: var(--calendar-weeknumber-large-width); } [dir=ltr] nb-calendar-day-picker nb-calendar-week-numbers { border-right: var(--calendar-weeknumber-divider-width) solid var(--calendar-weeknumber-divider-color); } [dir=rtl] nb-calendar-day-picker nb-calendar-week-numbers { border-left: var(--calendar-weeknumber-divider-width) solid var(--calendar-weeknumber-divider-color); } nb-calendar-picker .day-cell { width: var(--calendar-day-cell-width); height: var(--calendar-day-cell-height); } nb-calendar-picker .day-cell.size-large { width: var(--calendar-day-cell-large-width); height: var(--calendar-day-cell-large-height); } nb-calendar-picker .month-cell { width: var(--calendar-month-cell-width); height: var(--calendar-month-cell-height); } nb-calendar-picker .month-cell.size-large { width: var(--calendar-month-cell-large-width); height: var(--calendar-month-cell-large-height); } nb-calendar-picker .year-cell { width: var(--calendar-year-cell-width); height: var(--calendar-year-cell-height); } nb-calendar-picker .year-cell.size-large { width: var(--calendar-year-cell-large-width); height: var(--calendar-year-cell-large-height); } nb-calendar-picker .cell-content { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; border-radius: var(--calendar-border-radius); } nb-calendar-picker .day-cell, nb-calendar-picker .month-cell, nb-calendar-picker .year-cell { display: flex; align-items: center; justify-content: center; font-family: var(--calendar-text-font-family); font-size: var(--calendar-text-font-size); font-weight: var(--calendar-text-font-weight); line-height: var(--calendar-text-line-height); color: var(--calendar-text-color); text-transform: uppercase; cursor: pointer; } nb-calendar-picker .day-cell, nb-calendar-picker .day-cell .cell-content, nb-calendar-picker .month-cell, nb-calendar-picker .month-cell .cell-content, nb-calendar-picker .year-cell, nb-calendar-picker .year-cell .cell-content { transition-duration: 0.15s; transition-property: background-color, border-color, color; transition-timing-function: ease-in; } nb-calendar-picker .day-cell.empty, nb-calendar-picker .day-cell.disabled, nb-calendar-picker .month-cell.empty, nb-calendar-picker .month-cell.disabled, nb-calendar-picker .year-cell.empty, nb-calendar-picker .year-cell.disabled { cursor: default; } nb-calendar-picker .day-cell.bounding-month, nb-calendar-picker .month-cell.bounding-month, nb-calendar-picker .year-cell.bounding-month { color: var(--calendar-cell-inactive-text-color); } nb-calendar-picker .day-cell:not(.disabled):not(.empty):hover .cell-content, nb-calendar-picker .month-cell:not(.disabled):not(.empty):hover .cell-content, nb-calendar-picker .year-cell:not(.disabled):not(.empty):hover .cell-content { background-color: var(--calendar-cell-hover-background-color); border-color: var(--calendar-cell-hover-border-color); color: var(--calendar-cell-hover-text-color); font-size: var(--calendar-cell-hover-text-font-size); font-weight: var(--calendar-cell-hover-text-font-weight); line-height: var(--calendar-cell-hover-text-line-height); } nb-calendar-picker .day-cell:not(.disabled):not(.empty):active .cell-content, nb-calendar-picker .month-cell:not(.disabled):not(.empty):active .cell-content, nb-calendar-picker .year-cell:not(.disabled):not(.empty):active .cell-content { background-color: var(--calendar-cell-active-background-color); border-color: var(--calendar-cell-active-border-color); color: var(--calendar-cell-active-text-color); font-size: var(--calendar-cell-active-text-font-size); font-weight: var(--calendar-cell-active-text-font-weight); line-height: var(--calendar-cell-active-text-line-height); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).today .cell-content, nb-calendar-picker .month-cell:not(.disabled):not(.empty).today .cell-content, nb-calendar-picker .year-cell:not(.disabled):not(.empty).today .cell-content { background-color: var(--calendar-cell-today-background-color); border: 1px solid var(--calendar-cell-today-border-color); color: var(--calendar-cell-today-text-color); font-size: var(--calendar-cell-today-text-font-size); font-weight: var(--calendar-cell-today-text-font-weight); line-height: var(--calendar-cell-today-text-line-height); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).today .cell-content:hover, nb-calendar-picker .month-cell:not(.disabled):not(.empty).today .cell-content:hover, nb-calendar-picker .year-cell:not(.disabled):not(.empty).today .cell-content:hover { background-color: var(--calendar-cell-today-hover-background-color); border-color: var(--calendar-cell-today-hover-border-color); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).today .cell-content:active, nb-calendar-picker .month-cell:not(.disabled):not(.empty).today .cell-content:active, nb-calendar-picker .year-cell:not(.disabled):not(.empty).today .cell-content:active { background-color: var(--calendar-cell-today-active-background-color); border-color: var(--calendar-cell-today-active-border-color); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).selected .cell-content, nb-calendar-picker .month-cell:not(.disabled):not(.empty).selected .cell-content, nb-calendar-picker .year-cell:not(.disabled):not(.empty).selected .cell-content { background-color: var(--calendar-cell-selected-background-color); border-color: var(--calendar-cell-selected-border-color); color: var(--calendar-cell-selected-text-color); font-size: var(--calendar-cell-selected-text-font-size); font-weight: var(--calendar-cell-selected-text-font-weight); line-height: var(--calendar-cell-selected-text-line-height); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).selected .cell-content:hover, nb-calendar-picker .month-cell:not(.disabled):not(.empty).selected .cell-content:hover, nb-calendar-picker .year-cell:not(.disabled):not(.empty).selected .cell-content:hover { background-color: var(--calendar-cell-selected-hover-background-color); border-color: var(--calendar-cell-selected-hover-border-color); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).selected .cell-content:active, nb-calendar-picker .month-cell:not(.disabled):not(.empty).selected .cell-content:active, nb-calendar-picker .year-cell:not(.disabled):not(.empty).selected .cell-content:active { background-color: var(--calendar-cell-selected-active-background-color); border-color: var(--calendar-cell-selected-active-border-color); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).today.selected, nb-calendar-picker .month-cell:not(.disabled):not(.empty).today.selected, nb-calendar-picker .year-cell:not(.disabled):not(.empty).today.selected { background-color: var(--calendar-cell-selected-background-color); border-radius: var(--calendar-border-radius); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).today.selected .cell-content, nb-calendar-picker .month-cell:not(.disabled):not(.empty).today.selected .cell-content, nb-calendar-picker .year-cell:not(.disabled):not(.empty).today.selected .cell-content { background-color: var(--calendar-cell-today-selected-background-color); border-color: var(--calendar-cell-today-selected-border-color); color: var(--calendar-cell-today-selected-text-color); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).today.selected .cell-content:hover, nb-calendar-picker .month-cell:not(.disabled):not(.empty).today.selected .cell-content:hover, nb-calendar-picker .year-cell:not(.disabled):not(.empty).today.selected .cell-content:hover { background-color: var(--calendar-cell-today-selected-hover-background-color); border-color: var(--calendar-cell-today-selected-hover-border-color); } nb-calendar-picker .day-cell:not(.disabled):not(.empty).today.selected .cell-content:focus, nb-calendar-picker .month-cell:not(.disabled):not(.empty).today.selected .cell-content:focus, nb-calendar-picker .year-cell:not(.disabled):not(.empty).today.selected .cell-content:focus { background-color: var(--calendar-cell-today-selected-active-background-color); border-color: var(--calendar-cell-today-selected-active-border-color); } nb-calendar-picker .day-cell.disabled, nb-calendar-picker .month-cell.disabled, nb-calendar-picker .year-cell.disabled { color: var(--calendar-cell-disabled-text-color); } nb-calendar-picker .day-cell.disabled.today .cell-content, nb-calendar-picker .month-cell.disabled.today .cell-content, nb-calendar-picker .year-cell.disabled.today .cell-content { border: 1px solid var(--calendar-cell-today-disabled-border-color); } nb-calendar-picker .range-cell.in-range.selected:not(.disabled):not(.empty) { background-color: var(--calendar-cell-selected-background-color); border-radius: 0; } [dir=ltr] nb-calendar-picker .range-cell.in-range.selected:not(.disabled):not(.empty).start { border-top-left-radius: var(--calendar-border-radius); border-bottom-left-radius: var(--calendar-border-radius); } [dir=rtl] nb-calendar-picker .range-cell.in-range.selected:not(.disabled):not(.empty).start { border-top-right-radius: var(--calendar-border-radius); border-bottom-right-radius: var(--calendar-border-radius); } [dir=ltr] nb-calendar-picker .range-cell.in-range.selected:not(.disabled):not(.empty).end { border-top-right-radius: var(--calendar-border-radius); border-bottom-right-radius: var(--calendar-border-radius); } [dir=rtl] nb-calendar-picker .range-cell.in-range.selected:not(.disabled):not(.empty).end { border-top-left-radius: var(--calendar-border-radius); border-bottom-left-radius: var(--calendar-border-radius); } nb-base-calendar nb-card { background-color: var(--calendar-background-color); border: var(--calendar-border-width) var(--calendar-border-style) var(--calendar-border-color); box-shadow: none; margin: 0; width: var(--calendar-width); overflow: hidden; } nb-base-calendar nb-card-body { padding: 0; } nb-base-calendar .calendar-navigation { border: none; display: flex; padding: var(--calendar-navigation-padding); color: var(--calendar-navigation-text-color); font-family: var(--calendar-navigation-text-font-family); font-size: var(--calendar-navigation-title-text-font-size); font-weight: var(--calendar-navigation-title-text-font-weight); line-height: var(--calendar-navigation-title-text-line-height); } nb-base-calendar:not(.has-navigation) nb-calendar-week-numbers .sign-container, nb-base-calendar:not(.has-navigation) nb-calendar-days-names { border-top: 0; } nb-base-calendar.has-week-number nb-card { width: calc(var(--calendar-width) + var(--calendar-weeknumber-width) + var(--calendar-weeknumber-divider-width)); } nb-base-calendar.has-week-number .month-cell, nb-base-calendar.has-week-number .year-cell { flex: 1 0 auto; } nb-base-calendar.size-large nb-card { width: var(--calendar-large-width); } nb-base-calendar.size-large.has-week-number nb-card { width: calc(var(--calendar-large-width) + var(--calendar-weeknumber-large-width) + var(--calendar-weeknumber-divider-width)); } nb-card { background-color: var(--card-background-color); border: var(--card-border-width) var(--card-border-style) var(--card-border-color); border-radius: var(--card-border-radius); box-shadow: var(--card-shadow); color: var(--card-text-color); font-family: var(--card-text-font-family); font-size: var(--card-text-font-size); font-weight: var(--card-text-font-weight); line-height: var(--card-text-line-height); margin-bottom: var(--card-margin-bottom); scrollbar-face-color: var(--card-scrollbar-color); scrollbar-track-color: var(--card-scrollbar-background-color); } nb-card::-webkit-scrollbar { width: var(--card-scrollbar-width); height: var(--card-scrollbar-width); } nb-card::-webkit-scrollbar-thumb { background: var(--card-scrollbar-color); cursor: pointer; border-radius: calc(var(--card-scrollbar-width) * 0.5); } nb-card::-webkit-scrollbar-track { background: var(--card-scrollbar-background-color); } nb-card::-webkit-scrollbar-corner { background: var(--card-scrollbar-background-color); } nb-card.size-tiny { height: var(--card-height-tiny); } nb-card.size-small { height: var(--card-height-small); } nb-card.size-medium { height: var(--card-height-medium); } nb-card.size-large { height: var(--card-height-large); } nb-card.size-giant { height: var(--card-height-giant); } nb-card.status-basic nb-card-header { background-color: var(--card-header-basic-background-color); border-bottom-width: 0; border-bottom-color: var(--card-header-basic-background-color); color: var(--card-header-basic-text-color); } nb-card.status-basic nb-card-header a, nb-card.status-basic nb-card-header a:hover { color: var(--card-header-basic-text-color); } nb-card.status-primary nb-card-header { background-color: var(--card-header-primary-background-color); border-bottom-width: 0; border-bottom-color: var(--card-header-primary-background-color); color: var(--card-header-primary-text-color); } nb-card.status-primary nb-card-header a, nb-card.status-primary nb-card-header a:hover { color: var(--card-header-primary-text-color); } nb-card.status-success nb-card-header { background-color: var(--card-header-success-background-color); border-bottom-width: 0; border-bottom-color: var(--card-header-success-background-color); color: var(--card-header-success-text-color); } nb-card.status-success nb-card-header a, nb-card.status-success nb-card-header a:hover { color: var(--card-header-success-text-color); } nb-card.status-warning nb-card-header { background-color: var(--card-header-warning-background-color); border-bottom-width: 0; border-bottom-color: var(--card-header-warning-background-color); color: var(--card-header-warning-text-color); } nb-card.status-warning nb-card-header a, nb-card.status-warning nb-card-header a:hover { color: var(--card-header-warning-text-color); } nb-card.status-danger nb-card-header { background-color: var(--card-header-danger-background-color); border-bottom-width: 0; border-bottom-color: var(--card-header-danger-background-color); color: var(--card-header-danger-text-color); } nb-card.status-danger nb-card-header a, nb-card.status-danger nb-card-header a:hover { color: var(--card-header-danger-text-color); } nb-card.status-info nb-card-header { background-color: var(--card-header-info-background-color); border-bottom-width: 0; border-bottom-color: var(--card-header-info-background-color); color: var(--card-header-info-text-color); } nb-card.status-info nb-card-header a, nb-card.status-info nb-card-header a:hover { color: var(--card-header-info-text-color); } nb-card.status-control nb-card-header { background-color: var(--card-header-control-background-color); border-bottom-width: 0; border-bottom-color: var(--card-header-control-background-color); color: var(--card-header-control-text-color); } nb-card.status-control nb-card-header a, nb-card.status-control nb-card-header a:hover { color: var(--card-header-control-text-color); } nb-card.accent-basic { border-top-color: var(--card-header-basic-background-color); } nb-card.accent-primary { border-top-color: var(--card-header-primary-background-color); } nb-card.accent-success { border-top-color: var(--card-header-success-background-color); } nb-card.accent-warning { border-top-color: var(--card-header-warning-background-color); } nb-card.accent-danger { border-top-color: var(--card-header-danger-background-color); } nb-card.accent-info { border-top-color: var(--card-header-info-background-color); } nb-card.accent-control { border-top-color: var(--card-header-control-background-color); } nb-card.accent { border-top-style: var(--card-border-style); border-top-width: var(--card-border-radius); } nb-card.accent nb-card-header { border-radius: 0; } nb-card-body { flex: 1; -ms-flex: 1 1 auto; overflow: auto; padding: var(--card-padding); position: relative; scrollbar-face-color: var(--card-scrollbar-color); scrollbar-track-color: var(--card-scrollbar-background-color); } nb-card-body::-webkit-scrollbar { width: var(--card-scrollbar-width); height: var(--card-scrollbar-width); } nb-card-body::-webkit-scrollbar-thumb { background: var(--card-scrollbar-color); cursor: pointer; border-radius: calc(var(--card-scrollbar-width) * 0.5); } nb-card-body::-webkit-scrollbar-track { background: var(--card-scrollbar-background-color); } nb-card-body::-webkit-scrollbar-corner { background: var(--card-scrollbar-background-color); } nb-card-footer { padding: var(--card-padding); border-top: var(--card-divider-width) var(--card-divider-style) var(--card-divider-color); border-bottom-left-radius: var(--card-border-radius); border-bottom-right-radius: var(--card-border-radius); } nb-card-header { padding: var(--card-padding); border-bottom: var(--card-divider-width) var(--card-divider-style) var(--card-divider-color); border-top-left-radius: var(--card-border-radius); border-top-right-radius: var(--card-border-radius); color: var(--card-header-text-color); font-family: var(--card-header-text-font-family); font-size: var(--card-header-text-font-size); font-weight: var(--card-header-text-font-weight); line-height: var(--card-header-text-line-height); } nb-card-header h1 { margin: 0; } nb-card-header h2 { margin: 0; } nb-card-header h3 { margin: 0; } nb-card-header h4 { margin: 0; } nb-card-header h5 { margin: 0; } nb-card-header h6 { margin: 0; } nb-reveal-card { box-shadow: var(--card-shadow); margin-bottom: var(--card-margin-bottom); } .second-card-container { height: 100%; border-radius: var(--card-border-radius); } .reveal-button { line-height: var(--card-text-line-height); padding: var(--card-padding); } .flip-button { line-height: var(--card-text-line-height); margin-bottom: var(--card-margin-bottom); padding: var(--card-padding); } [dir=ltr] .flipcard-body .front-container { margin-right: -100%; } [dir=rtl] .flipcard-body .front-container { margin-left: -100%; } nb-tabset { background-color: var(--tabset-background-color); border-radius: var(--tabset-border-radius); box-shadow: var(--tabset-shadow); } nb-tabset .tabset { border-bottom: var(--tabset-divider-width) var(--tabset-divider-style) var(--tabset-divider-color); } nb-tabset .tab-link { background-color: var(--tabset-tab-background-color); cursor: pointer; padding: var(--tabset-tab-padding); color: var(--tabset-tab-text-color); font-family: var(--tabset-tab-text-font-family); font-size: var(--tabset-tab-text-font-size); font-weight: var(--tabset-tab-text-font-weight); line-height: var(--tabset-tab-text-line-height); text-transform: var(--tabset-tab-text-transform); } nb-tabset .tab-link::before { background-color: var(--tabset-tab-underline-color); height: var(--tabset-tab-underline-width); } nb-tabset nb-badge.dot-mode.position-left { left: var(--tabset-tab–badge-dot-mode-horizontal-offset); } nb-tabset nb-badge.dot-mode.position-right { right: var(--tabset-tab–badge-dot-mode-horizontal-offset); } [dir=ltr] nb-tabset nb-badge.dot-mode.position-start { left: var(--tabset-tab–badge-dot-mode-horizontal-offset); } [dir=rtl] nb-tabset nb-badge.dot-mode.position-start { right: var(--tabset-tab–badge-dot-mode-horizontal-offset); } [dir=ltr] nb-tabset nb-badge.dot-mode.position-end { right: var(--tabset-tab–badge-dot-mode-horizontal-offset); } [dir=rtl] nb-tabset nb-badge.dot-mode.position-end { left: var(--tabset-tab–badge-dot-mode-horizontal-offset); } nb-tabset .tab.active .tab-link { background-color: var(--tabset-tab-active-background-color); color: var(--tabset-tab-active-text-color); } nb-tabset .tab.active .tab-link::before { background-color: var(--tabset-tab-active-underline-color); } nb-tabset .tab:focus .tab-link { background-color: var(--tabset-tab-focus-background-color); color: var(--tabset-tab-focus-text-color); } nb-tabset .tab:focus .tab-link::before { background-color: var(--tabset-tab-focus-underline-color); } nb-tabset .tab:hover .tab-link { color: var(--tabset-tab-hover-text-color); background-color: var(--tabset-tab-hover-background-color); } nb-tabset .tab:hover .tab-link::before { background-color: var(--tabset-tab-hover-underline-color); } nb-tabset .tab.disabled { cursor: default; pointer-events: none; } nb-tabset .tab.disabled .tab-link { background-color: var(--tabset-tab-disabled-background-color); color: var(--tabset-tab-disabled-text-color); cursor: default; pointer-events: none; } nb-tabset .tab.disabled .tab-link::before { background-color: var(--tabset-tab-disabled-underline-color); } @media screen and (max-width: 36rem) { nb-tabset .tab.responsive .tab-text { display: none; } } nb-tabset nb-tab { background-color: var(--tabset-content-background-color); color: var(--tabset-content-text-color); font-family: var(--tabset-content-text-font-family); font-size: var(--tabset-content-text-font-size); font-weight: var(--tabset-content-text-font-weight); line-height: var(--tabset-content-text-line-height); padding: var(--tabset-content-padding); scrollbar-face-color: var(--tabset-scrollbar-color); scrollbar-track-color: var(--tabset-scrollbar-background-color); } nb-tabset nb-tab::-webkit-scrollbar { width: var(--tabset-scrollbar-width); height: var(--tabset-scrollbar-width); } nb-tabset nb-tab::-webkit-scrollbar-thumb { background: var(--tabset-scrollbar-color); cursor: pointer; border-radius: calc(var(--tabset-scrollbar-width) * 0.5); } nb-tabset nb-tab::-webkit-scrollbar-track { background: var(--tabset-scrollbar-background-color); } nb-tabset nb-tab::-webkit-scrollbar-corner { background: var(--tabset-scrollbar-background-color); } nb-route-tabset { scrollbar-face-color: var(--route-tabset-scrollbar-color); scrollbar-track-color: var(--route-tabset-scrollbar-background-color); background-color: var(--route-tabset-background-color); border-radius: var(--route-tabset-border-radius); box-shadow: var(--route-tabset-shadow); } nb-route-tabset::-webkit-scrollbar { width: var(--route-tabset-scrollbar-width); height: var(--route-tabset-scrollbar-width); } nb-route-tabset::-webkit-scrollbar-thumb { background: var(--route-tabset-scrollbar-color); cursor: pointer; border-radius: calc(var(--route-tabset-scrollbar-width) * 0.5); } nb-route-tabset::-webkit-scrollbar-track { background: var(--route-tabset-scrollbar-background-color); } nb-route-tabset::-webkit-scrollbar-corner { background: var(--route-tabset-scrollbar-background-color); } nb-route-tabset .route-tabset { border-bottom: var(--route-tabset-divider-width) var(--route-tabset-divider-style) var(--route-tabset-divider-color); } nb-route-tabset .tab-link { background-color: var(--route-tabset-tab-background-color); cursor: pointer; padding: var(--route-tabset-tab-padding); color: var(--route-tabset-tab-text-color); font-family: var(--route-tabset-tab-text-font-family); font-size: var(--route-tabset-tab-text-font-size); font-weight: var(--route-tabset-tab-text-font-weight); line-height: var(--route-tabset-tab-text-line-height); text-transform: var(--route-tabset-tab-text-transform); } nb-route-tabset .tab-link::before { background-color: var(--route-tabset-tab-underline-color); height: var(--route-tabset-tab-underline-width); } nb-route-tabset .route-tab.active .tab-link { background-color: var(--tabset-tab-active-background-color); color: var(--tabset-tab-active-text-color); } nb-route-tabset .route-tab.active .tab-link::before { background-color: var(--tabset-tab-active-underline-color); } nb-route-tabset .tab-link:focus { background-color: var(--route-tabset-tab-focus-background-color); color: var(--route-tabset-tab-focus-text-color); } nb-route-tabset .tab-link:focus::before { background-color: var(--route-tabset-tab-focus-underline-color); } nb-route-tabset .tab-link:hover { background-color: var(--route-tabset-tab-hover-background-color); color: var(--route-tabset-tab-hover-text-color); } nb-route-tabset .tab-link:hover::before { background-color: var(--route-tabset-tab-hover-underline-color); } nb-route-tabset .route-tab.disabled { cursor: default; pointer-events: none; } nb-route-tabset .route-tab.disabled .tab-link { background-color: var(--route-tabset-tab-disabled-background-color); color: var(--route-tabset-tab-disabled-text-color); cursor: default; pointer-events: none; } nb-route-tabset .route-tab.disabled .tab-link::before { background-color: var(--route-tabset-tab-disabled-underline-color); } @media screen and (max-width: 36rem) { nb-route-tabset .route-tab.responsive .tab-text { display: none; } } nb-menu { background-color: var(--menu-background-color); } nb-menu ul.menu-items { margin: 0; padding: 0; } nb-menu .menu-group, nb-menu .menu-item a { font-family: var(--menu-text-font-family); font-size: var(--menu-text-font-size); font-weight: var(--menu-text-font-weight); line-height: var(--menu-text-line-height); padding: var(--menu-item-padding); } nb-menu .menu-group, nb-menu .menu-group nb-icon.menu-icon { color: var(--menu-group-text-color); } nb-menu .menu-item a { color: var(--menu-text-color); border-radius: var(--menu-item-border-radius); } nb-menu .menu-item a.active { background-color: var(--menu-item-active-background-color); color: var(--menu-item-active-text-color); } nb-menu .menu-item a.active .menu-icon { color: var(--menu-item-icon-active-color); } nb-menu .menu-item a:hover { background-color: var(--menu-item-hover-background-color); color: var(--menu-item-hover-text-color); cursor: var(--menu-item-hover-cursor); } nb-menu .menu-item a:hover .menu-icon { color: var(--menu-item-icon-hover-color); } nb-menu .menu-item .menu-icon { color: var(--menu-item-icon-color); font-size: var(--menu-item-icon-width); margin: var(--menu-item-icon-margin); width: 1em; text-align: center; } nb-menu .menu-item .expand-state { color: var(--menu-item-icon-color); } nb-menu .menu-item { border-bottom: var(--menu-item-divider-width) var(--menu-item-divider-style) var(--menu-item-divider-color); } nb-menu .menu-item:first-child { border-top: none; } nb-menu .menu-item:last-child { border-bottom: none; } nb-menu .menu-item .menu-item:first-child { border-top: var(--menu-item-divider-width) var(--menu-item-divider-style) var(--menu-item-divider-color); } nb-menu .menu-item > .menu-items { background-color: var(--menu-submenu-background-color); margin: var(--menu-submenu-margin); padding: var(--menu-submenu-padding); } nb-menu .menu-item > .menu-items > .menu-item { background: var(--menu-submenu-background-color); color: var(--menu-submenu-text-color); } nb-menu .menu-item > .menu-items > .menu-item a { border-color: var(--menu-submenu-item-border-color); border-style: var(--menu-submenu-item-border-style); border-width: var(--menu-submenu-item-border-width); padding: var(--menu-submenu-item-padding); } nb-menu .menu-item > .menu-items > .menu-item a.active { background-color: var(--menu-submenu-item-active-background-color); border-color: var(--menu-submenu-item-active-border-color); color: var(--menu-submenu-item-active-text-color); } nb-menu .menu-item > .menu-items > .menu-item a.active .menu-icon { color: var(--menu-submenu-item-icon-active-color); } nb-menu .menu-item > .menu-items > .menu-item a:hover { background-color: var(--menu-submenu-item-hover-background-color); border-color: var(--menu-submenu-item-hover-border-color); color: var(--menu-submenu-item-hover-text-color); } nb-menu .menu-item > .menu-items > .menu-item a:hover .menu-icon { color: var(--menu-submenu-item-icon-hover-color); } nb-menu .menu-item > .menu-items > .menu-item a.active:hover { background-color: var(--menu-submenu-item-active-hover-background-color); border-color: var(--menu-submenu-item-active-hover-border-color); color: var(--menu-submenu-item-active-hover-text-color); } nb-menu .menu-item > .menu-items > .menu-item a.active:hover .menu-icon { color: var(--menu-submenu-item-icon-active-hover-color); } nb-menu .menu-item > .menu-items > .menu-group, nb-menu .menu-item > .menu-items > .menu-group nb-icon.menu-icon { color: var(--menu-group-text-color); } nb-user .user-picture { background-color: var(--user-picture-box-background-color); border: var(--user-picture-box-border-width) solid var(--user-picture-box-border-color); } nb-user .initials { color: var(--user-initials-text-color); font-family: var(--user-initials-text-font-family); font-weight: var(--user-initials-text-font-weight); } nb-user .user-name { color: var(--user-name-text-color); font-family: var(--user-name-text-font-family); font-weight: var(--user-name-text-font-weight); } nb-user .user-title { color: var(--user-title-text-color); font-family: var(--user-title-text-font-family); font-weight: var(--user-title-text-font-weight); } nb-user.size-tiny .user-picture { height: var(--user-tiny-height); width: var(--user-tiny-width); } nb-user.size-tiny .initials { font-size: var(--user-tiny-initials-text-font-size); line-height: var(--user-tiny-initials-text-line-height); } nb-user.size-tiny .user-name { font-size: var(--user-tiny-name-text-font-size); line-height: var(--user-tiny-name-text-line-height); } nb-user.size-tiny .user-title { font-size: var(--user-tiny-title-text-font-size); line-height: var(--user-tiny-title-text-line-height); } nb-user.size-small .user-picture { height: var(--user-small-height); width: var(--user-small-width); } nb-user.size-small .initials { font-size: var(--user-small-initials-text-font-size); line-height: var(--user-small-initials-text-line-height); } nb-user.size-small .user-name { font-size: var(--user-small-name-text-font-size); line-height: var(--user-small-name-text-line-height); } nb-user.size-small .user-title { font-size: var(--user-small-title-text-font-size); line-height: var(--user-small-title-text-line-height); } nb-user.size-medium .user-picture { height: var(--user-medium-height); width: var(--user-medium-width); } nb-user.size-medium .initials { font-size: var(--user-medium-initials-text-font-size); line-height: var(--user-medium-initials-text-line-height); } nb-user.size-medium .user-name { font-size: var(--user-medium-name-text-font-size); line-height: var(--user-medium-name-text-line-height); } nb-user.size-medium .user-title { font-size: var(--user-medium-title-text-font-size); line-height: var(--user-medium-title-text-line-height); } nb-user.size-large .user-picture { height: var(--user-large-height); width: var(--user-large-width); } nb-user.size-large .initials { font-size: var(--user-large-initials-text-font-size); line-height: var(--user-large-initials-text-line-height); } nb-user.size-large .user-name { font-size: var(--user-large-name-text-font-size); line-height: var(--user-large-name-text-line-height); } nb-user.size-large .user-title { font-size: var(--user-large-title-text-font-size); line-height: var(--user-large-title-text-line-height); } nb-user.size-giant .user-picture { height: var(--user-giant-height); width: var(--user-giant-width); } nb-user.size-giant .initials { font-size: var(--user-giant-initials-text-font-size); line-height: var(--user-giant-initials-text-line-height); } nb-user.size-giant .user-name { font-size: var(--user-giant-name-text-font-size); line-height: var(--user-giant-name-text-line-height); } nb-user.size-giant .user-title { font-size: var(--user-giant-title-text-font-size); line-height: var(--user-giant-title-text-line-height); } nb-user.shape-rectangle .user-picture { border-radius: var(--user-rectangle-border-radius); } nb-user.shape-semi-round .user-picture { border-radius: var(--user-semi-round-border-radius); } nb-user.shape-round .user-picture { border-radius: var(--user-round-border-radius); } nb-actions { background-color: var(--actions-background-color); color: var(--actions-text-color); font-family: var(--actions-text-font-family); font-weight: var(--actions-text-font-weight); line-height: var(--actions-text-line-height); } nb-actions.size-tiny nb-action { font-size: var(--actions-tiny-text-font-size); height: var(--actions-tiny-height); padding: var(--actions-tiny-padding); } nb-actions.size-tiny nb-action nb-icon { font-size: var(--actions-tiny-icon-height); } nb-actions.size-small nb-action { font-size: var(--actions-small-text-font-size); height: var(--actions-small-height); padding: var(--actions-small-padding); } nb-actions.size-small nb-action nb-icon { font-size: var(--actions-small-icon-height); } nb-actions.size-medium nb-action { font-size: var(--actions-medium-text-font-size); height: var(--actions-medium-height); padding: var(--actions-medium-padding); } nb-actions.size-medium nb-action nb-icon { font-size: var(--actions-medium-icon-height); } nb-actions.size-large nb-action { font-size: var(--actions-large-text-font-size); height: var(--actions-large-height); padding: var(--actions-large-padding); } nb-actions.size-large nb-action nb-icon { font-size: var(--actions-large-icon-height); } nb-actions.size-giant nb-action { font-size: var(--actions-giant-text-font-size); height: var(--actions-giant-height); padding: var(--actions-giant-padding); } nb-actions.size-giant nb-action nb-icon { font-size: var(--actions-giant-icon-height); } [dir=ltr] nb-action { border-left: var(--actions-divider-width) var(--actions-divider-style) var(--actions-divider-color); } [dir=rtl] nb-action { border-right: var(--actions-divider-width) var(--actions-divider-style) var(--actions-divider-color); } [dir=ltr] nb-action:first-child { border-left: none !important; } [dir=rtl] nb-action:first-child { border-right: none !important; } nb-action nb-icon { color: var(--actions-icon-color); } nb-action.disabled { color: var(--actions-disabled-text-color); } nb-action.disabled nb-icon { color: var(--actions-disabled-icon-color); } nb-search-field .close-button { z-index: 1; } nb-search-field .search { background: var(--search-background-color); } nb-search-field .search span.info { color: var(--search-info-text-color); font-family: var(--search-info-text-font-family); font-size: var(--search-info-text-font-size); font-weight: var(--search-info-text-font-weight); line-height: var(--search-info-text-line-height); } nb-search-field .search input { border-bottom: var(--search-divider-width) var(--search-divider-style) var(--search-divider-color); color: var(--search-text-color); font-family: var(--search-text-font-family); font-size: var(--search-text-font-size); font-weight: var(--search-text-font-weight); line-height: var(--search-text-line-height); } nb-search-field .search input::-moz-placeholder { color: var(--search-placeholder-text-color); } nb-search-field .search input::placeholder { color: var(--search-placeholder-text-color); } nb-search-field .search input::-ms-clear { display: none; } nb-search-field.rotate-layout { opacity: 0; background: var(--search-background-color); } nb-search-field.modal-zoomin .search::before, nb-search-field.modal-zoomin .search::after { border: 1.5rem solid var(--search-extra-background-color); } nb-search-field.modal-half .form-wrapper { background: var(--search-background-color); } nb-search-field.modal-half .search::before { background: var(--search-extra-background-color); } nb-search-field.modal-drop .form-content::after { background: var(--search-divider-color); } nb-search-field.modal-drop .search::before { background: var(--search-background-color); } nb-search-field.curtain .search::after { background: var(--search-background-color); } nb-search-field.curtain .search { background: var(--search-background-color); } nb-search-field.column-curtain::before { background: var(--search-background-color); } nb-search-field.column-curtain::after { background: transparent; } nb-search-field.column-curtain.show::after { background: var(--search-extra-background-color); } .nb-spinner-container { position: relative; } nb-spinner .message { color: var(--spinner-text-color); font-family: var(--spinner-text-font-family); font-size: var(--spinner-text-font-size); font-weight: var(--spinner-text-font-weight); line-height: var(--spinner-text-line-height); } nb-spinner.status-basic { background-color: var(--spinner-basic-background-color); } nb-spinner.status-basic .spin-circle { border-top-color: var(--spinner-basic-circle-filled-color); border-right-color: var(--spinner-basic-circle-empty-color); border-bottom-color: var(--spinner-basic-circle-filled-color); border-left-color: var(--spinner-basic-circle-filled-color); } nb-spinner.status-primary { background-color: var(--spinner-primary-background-color); } nb-spinner.status-primary .spin-circle { border-top-color: var(--spinner-primary-circle-filled-color); border-right-color: var(--spinner-primary-circle-empty-color); border-bottom-color: var(--spinner-primary-circle-filled-color); border-left-color: var(--spinner-primary-circle-filled-color); } nb-spinner.status-success { background-color: var(--spinner-success-background-color); } nb-spinner.status-success .spin-circle { border-top-color: var(--spinner-success-circle-filled-color); border-right-color: var(--spinner-success-circle-empty-color); border-bottom-color: var(--spinner-success-circle-filled-color); border-left-color: var(--spinner-success-circle-filled-color); } nb-spinner.status-warning { background-color: var(--spinner-warning-background-color); } nb-spinner.status-warning .spin-circle { border-top-color: var(--spinner-warning-circle-filled-color); border-right-color: var(--spinner-warning-circle-empty-color); border-bottom-color: var(--spinner-warning-circle-filled-color); border-left-color: var(--spinner-warning-circle-filled-color); } nb-spinner.status-danger { background-color: var(--spinner-danger-background-color); } nb-spinner.status-danger .spin-circle { border-top-color: var(--spinner-danger-circle-filled-color); border-right-color: var(--spinner-danger-circle-empty-color); border-bottom-color: var(--spinner-danger-circle-filled-color); border-left-color: var(--spinner-danger-circle-filled-color); } nb-spinner.status-info { background-color: var(--spinner-info-background-color); } nb-spinner.status-info .spin-circle { border-top-color: var(--spinner-info-circle-filled-color); border-right-color: var(--spinner-info-circle-empty-color); border-bottom-color: var(--spinner-info-circle-filled-color); border-left-color: var(--spinner-info-circle-filled-color); } nb-spinner.status-control { background-color: var(--spinner-control-background-color); } nb-spinner.status-control .spin-circle { border-top-color: var(--spinner-control-circle-filled-color); border-right-color: var(--spinner-control-circle-empty-color); border-bottom-color: var(--spinner-control-circle-filled-color); border-left-color: var(--spinner-control-circle-filled-color); } nb-spinner.size-tiny { font-size: var(--spinner-height-tiny); } nb-spinner.size-small { font-size: var(--spinner-height-small); } nb-spinner.size-medium { font-size: var(--spinner-height-medium); } nb-spinner.size-large { font-size: var(--spinner-height-large); } nb-spinner.size-giant { font-size: var(--spinner-height-giant); } @keyframes spin { 0% { transform: rotate(0deg); } 40% { transform: rotate(230deg); } 100% { transform: rotate(360deg); } } .nb-timepicker-container { width: var(--timepicker-container-width); height: var(--timepicker-container-height); } .nb-timepicker-container .list-item { color: var(--timepicker-cell-text-color); font-size: var(--timepicker-cell-text-font-size); font-family: var(--timepicker-cell-text-font-family); height: var(--timepicker-cell-height); line-height: var(--timepicker-cell-text-line-height); font-weight: var(--timepicker-cell-text-font-weight); } .nb-timepicker-container .list-item:first-child { border-top: none; } .nb-timepicker-container .list-item:hover { background-color: var(--timepicker-cell-hover-background-color); color: var(--timepicker-cell-hover-text-color); } .nb-timepicker-container .list-item:focus { background-color: var(--timepicker-cell-focus-background-color); color: var(--timepicker-cell-focus-text-color); } .nb-timepicker-container .list-item.selected { background-color: var(--timepicker-cell-active-background-color); color: var(--timepicker-cell-active-text-color); } .nb-timepicker-container .values-list { scrollbar-face-color: var(--timepicker-scrollbar-color); scrollbar-track-color: var(--timepicker-scrollbar-background-color); } [dir=ltr] .nb-timepicker-container .values-list:not(:last-of-type) { border-right: var(--timepicker-border-width) var(--timepicker-border-style) var(--timepicker-border-color); } [dir=rtl] .nb-timepicker-container .values-list:not(:last-of-type) { border-left: var(--timepicker-border-width) var(--timepicker-border-style) var(--timepicker-border-color); } .nb-timepicker-container .values-list::-webkit-scrollbar { width: var(--timepicker-scrollbar-width); height: var(--timepicker-scrollbar-width); } .nb-timepicker-container .values-list::-webkit-scrollbar-thumb { background: var(--timepicker-scrollbar-color); cursor: pointer; border-radius: calc(var(--timepicker-scrollbar-width) * 0.5); } .nb-timepicker-container .values-list::-webkit-scrollbar-track { background: var(--timepicker-scrollbar-background-color); } .nb-timepicker-container .values-list::-webkit-scrollbar-corner { background: var(--timepicker-scrollbar-background-color); } [dir=ltr] .nb-timepicker-container.supports-scrollbar-theming .values-list:hover .list-item:not(.am-pm-item) { margin-right: calc(var(--timepicker-scrollbar-width) * -1); } [dir=rtl] .nb-timepicker-container.supports-scrollbar-theming .values-list:hover .list-item:not(.am-pm-item) { margin-left: calc(var(--timepicker-scrollbar-width) * -1); } .nb-timepicker-container .header-cell { color: var(--timepicker-header-cell-text-color); font-size: var(--timepicker-header-cell-text-font-size); font-family: var(--timepicker-header-cell-text-font-family); height: var(--timepicker-header-cell-height); line-height: var(--timepicker-header-cell-text-line-height); font-weight: var(--timepicker-header-cell-text-font-weight); } [dir=ltr] .nb-timepicker-container .header-cell:not(:last-child) { border-right: var(--timepicker-border-width) var(--timepicker-border-style) var(--timepicker-border-color); } [dir=rtl] .nb-timepicker-container .header-cell:not(:last-child) { border-left: var(--timepicker-border-width) var(--timepicker-border-style) var(--timepicker-border-color); } .nb-timepicker-container .column-header { border-bottom: var(--timepicker-border-width) var(--timepicker-border-style) var(--timepicker-border-color); } [dir=ltr] .nb-timepicker-container .actions-footer { padding-left: 0.625rem; } [dir=rtl] .nb-timepicker-container .actions-footer { padding-right: 0.625rem; } nb-checkbox .label { padding: var(--checkbox-padding); } nb-checkbox .custom-checkbox { width: var(--checkbox-width); height: var(--checkbox-height); border-style: var(--checkbox-border-style); border-width: var(--checkbox-border-width); border-radius: var(--checkbox-border-radius); position: relative; } nb-checkbox .native-input:focus:not(:checked) + .custom-checkbox { box-shadow: 0 0 0 var(--checkbox-outline-width) var(--checkbox-outline-color); } nb-checkbox .native-input:focus:not(:checked) + .custom-checkbox:not(:hover):not(:active) { box-shadow: 0 0 0 var(--checkbox-outline-width) var(--checkbox-outline-color), inset var(--checkbox-focus-inset-shadow-length) var(--checkbox-outline-color); } nb-checkbox .native-input:focus:checked + .custom-checkbox { box-shadow: 0 0 0 var(--checkbox-outline-width) var(--checkbox-outline-color); } nb-checkbox .custom-checkbox-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; } nb-checkbox .text { font-family: var(--checkbox-text-font-family); font-size: var(--checkbox-text-font-size); font-weight: var(--checkbox-text-font-weight); line-height: var(--checkbox-text-line-height); } [dir=ltr] nb-checkbox .text:not(:empty) { padding-left: var(--checkbox-text-space); } [dir=rtl] nb-checkbox .text:not(:empty) { padding-right: var(--checkbox-text-space); } nb-checkbox.status-basic .custom-checkbox { background-color: var(--checkbox-basic-background-color); border-color: var(--checkbox-basic-border-color); } nb-checkbox.status-basic .text { color: var(--checkbox-basic-text-color); } nb-checkbox.status-basic .custom-checkbox.checked { background-color: var(--checkbox-basic-checked-background-color); border-color: var(--checkbox-basic-checked-border-color); } nb-checkbox.status-basic .custom-checkbox.checked .custom-checkbox-icon { color: var(--checkbox-basic-checked-checkmark-color); } nb-checkbox.status-basic .custom-checkbox.indeterminate { background-color: var(--checkbox-basic-indeterminate-background-color); border-color: var(--checkbox-basic-indeterminate-border-color); } nb-checkbox.status-basic .custom-checkbox.indeterminate .custom-checkbox-icon { color: var(--checkbox-basic-indeterminate-checkmark-color); } nb-checkbox.status-basic .native-input:enabled:focus + .custom-checkbox { background-color: var(--checkbox-basic-focus-background-color); border-color: var(--checkbox-basic-focus-border-color); } nb-checkbox.status-basic .native-input:enabled:focus + .custom-checkbox.indeterminate, nb-checkbox.status-basic .native-input:enabled:focus + .custom-checkbox.checked { background-color: var(--checkbox-basic-focus-checked-background-color); border-color: var(--checkbox-basic-focus-checked-border-color); } nb-checkbox.status-basic .custom-checkbox:hover { background-color: var(--checkbox-basic-hover-background-color); border-color: var(--checkbox-basic-hover-border-color); } nb-checkbox.status-basic .custom-checkbox:hover.indeterminate, nb-checkbox.status-basic .custom-checkbox:hover.checked { background-color: var(--checkbox-basic-hover-checked-background-color); border-color: var(--checkbox-basic-hover-checked-border-color); } nb-checkbox.status-basic .native-input:enabled:active + .custom-checkbox { background-color: var(--checkbox-basic-active-background-color); border-color: var(--checkbox-basic-active-border-color); } nb-checkbox.status-basic .native-input:enabled:active + .custom-checkbox.indeterminate, nb-checkbox.status-basic .native-input:enabled:active + .custom-checkbox.checked { background-color: var(--checkbox-basic-active-checked-background-color); border-color: var(--checkbox-basic-active-checked-border-color); } nb-checkbox.status-basic .native-input:disabled + .custom-checkbox { background-color: var(--checkbox-basic-disabled-background-color); border-color: var(--checkbox-basic-disabled-border-color); } nb-checkbox.status-basic .native-input:disabled + .custom-checkbox .custom-checkbox-icon { color: var(--checkbox-basic-disabled-checkmark-color); } nb-checkbox.status-basic .native-input:disabled ~ .text { color: var(--checkbox-basic-disabled-text-color); } nb-checkbox.status-basic .native-input:disabled:indeterminate + .custom-checkbox, nb-checkbox.status-basic .native-input:disabled:checked + .custom-checkbox { background-color: var(--checkbox-basic-disabled-checked-background-color); border-color: var(--checkbox-basic-disabled-checked-border-color); } nb-checkbox.status-primary .custom-checkbox { background-color: var(--checkbox-primary-background-color); border-color: var(--checkbox-primary-border-color); } nb-checkbox.status-primary .text { color: var(--checkbox-primary-text-color); } nb-checkbox.status-primary .custom-checkbox.checked { background-color: var(--checkbox-primary-checked-background-color); border-color: var(--checkbox-primary-checked-border-color); } nb-checkbox.status-primary .custom-checkbox.checked .custom-checkbox-icon { color: var(--checkbox-primary-checked-checkmark-color); } nb-checkbox.status-primary .custom-checkbox.indeterminate { background-color: var(--checkbox-primary-indeterminate-background-color); border-color: var(--checkbox-primary-indeterminate-border-color); } nb-checkbox.status-primary .custom-checkbox.indeterminate .custom-checkbox-icon { color: var(--checkbox-primary-indeterminate-checkmark-color); } nb-checkbox.status-primary .native-input:enabled:focus + .custom-checkbox { background-color: var(--checkbox-primary-focus-background-color); border-color: var(--checkbox-primary-focus-border-color); } nb-checkbox.status-primary .native-input:enabled:focus + .custom-checkbox.indeterminate, nb-checkbox.status-primary .native-input:enabled:focus + .custom-checkbox.checked { background-color: var(--checkbox-primary-focus-checked-background-color); border-color: var(--checkbox-primary-focus-checked-border-color); } nb-checkbox.status-primary .custom-checkbox:hover { background-color: var(--checkbox-primary-hover-background-color); border-color: var(--checkbox-primary-hover-border-color); } nb-checkbox.status-primary .custom-checkbox:hover.indeterminate, nb-checkbox.status-primary .custom-checkbox:hover.checked { background-color: var(--checkbox-primary-hover-checked-background-color); border-color: var(--checkbox-primary-hover-checked-border-color); } nb-checkbox.status-primary .native-input:enabled:active + .custom-checkbox { background-color: var(--checkbox-primary-active-background-color); border-color: var(--checkbox-primary-active-border-color); } nb-checkbox.status-primary .native-input:enabled:active + .custom-checkbox.indeterminate, nb-checkbox.status-primary .native-input:enabled:active + .custom-checkbox.checked { background-color: var(--checkbox-primary-active-checked-background-color); border-color: var(--checkbox-primary-active-checked-border-color); } nb-checkbox.status-primary .native-input:disabled + .custom-checkbox { background-color: var(--checkbox-primary-disabled-background-color); border-color: var(--checkbox-primary-disabled-border-color); } nb-checkbox.status-primary .native-input:disabled + .custom-checkbox .custom-checkbox-icon { color: var(--checkbox-primary-disabled-checkmark-color); } nb-checkbox.status-primary .native-input:disabled ~ .text { color: var(--checkbox-primary-disabled-text-color); } nb-checkbox.status-primary .native-input:disabled:indeterminate + .custom-checkbox, nb-checkbox.status-primary .native-input:disabled:checked + .custom-checkbox { background-color: var(--checkbox-primary-disabled-checked-background-color); border-color: var(--checkbox-primary-disabled-checked-border-color); } nb-checkbox.status-success .custom-checkbox { background-color: var(--checkbox-success-background-color); border-color: var(--checkbox-success-border-color); } nb-checkbox.status-success .text { color: var(--checkbox-success-text-color); } nb-checkbox.status-success .custom-checkbox.checked { background-color: var(--checkbox-success-checked-background-color); border-color: var(--checkbox-success-checked-border-color); } nb-checkbox.status-success .custom-checkbox.checked .custom-checkbox-icon { color: var(--checkbox-success-checked-checkmark-color); } nb-checkbox.status-success .custom-checkbox.indeterminate { background-color: var(--checkbox-success-indeterminate-background-color); border-color: var(--checkbox-success-indeterminate-border-color); } nb-checkbox.status-success .custom-checkbox.indeterminate .custom-checkbox-icon { color: var(--checkbox-success-indeterminate-checkmark-color); } nb-checkbox.status-success .native-input:enabled:focus + .custom-checkbox { background-color: var(--checkbox-success-focus-background-color); border-color: var(--checkbox-success-focus-border-color); } nb-checkbox.status-success .native-input:enabled:focus + .custom-checkbox.indeterminate, nb-checkbox.status-success .native-input:enabled:focus + .custom-checkbox.checked { background-color: var(--checkbox-success-focus-checked-background-color); border-color: var(--checkbox-success-focus-checked-border-color); } nb-checkbox.status-success .custom-checkbox:hover { background-color: var(--checkbox-success-hover-background-color); border-color: var(--checkbox-success-hover-border-color); } nb-checkbox.status-success .custom-checkbox:hover.indeterminate, nb-checkbox.status-success .custom-checkbox:hover.checked { background-color: var(--checkbox-success-hover-checked-background-color); border-color: var(--checkbox-success-hover-checked-border-color); } nb-checkbox.status-success .native-input:enabled:active + .custom-checkbox { background-color: var(--checkbox-success-active-background-color); border-color: var(--checkbox-success-active-border-color); } nb-checkbox.status-success .native-input:enabled:active + .custom-checkbox.indeterminate, nb-checkbox.status-success .native-input:enabled:active + .custom-checkbox.checked { background-color: var(--checkbox-success-active-checked-background-color); border-color: var(--checkbox-success-active-checked-border-color); } nb-checkbox.status-success .native-input:disabled + .custom-checkbox { background-color: var(--checkbox-success-disabled-background-color); border-color: var(--checkbox-success-disabled-border-color); } nb-checkbox.status-success .native-input:disabled + .custom-checkbox .custom-checkbox-icon { color: var(--checkbox-success-disabled-checkmark-color); } nb-checkbox.status-success .native-input:disabled ~ .text { color: var(--checkbox-success-disabled-text-color); } nb-checkbox.status-success .native-input:disabled:indeterminate + .custom-checkbox, nb-checkbox.status-success .native-input:disabled:checked + .custom-checkbox { background-color: var(--checkbox-success-disabled-checked-background-color); border-color: var(--checkbox-success-disabled-checked-border-color); } nb-checkbox.status-warning .custom-checkbox { background-color: var(--checkbox-warning-background-color); border-color: var(--checkbox-warning-border-color); } nb-checkbox.status-warning .text { color: var(--checkbox-warning-text-color); } nb-checkbox.status-warning .custom-checkbox.checked { background-color: var(--checkbox-warning-checked-background-color); border-color: var(--checkbox-warning-checked-border-color); } nb-checkbox.status-warning .custom-checkbox.checked .custom-checkbox-icon { color: var(--checkbox-warning-checked-checkmark-color); } nb-checkbox.status-warning .custom-checkbox.indeterminate { background-color: var(--checkbox-warning-indeterminate-background-color); border-color: var(--checkbox-warning-indeterminate-border-color); } nb-checkbox.status-warning .custom-checkbox.indeterminate .custom-checkbox-icon { color: var(--checkbox-warning-indeterminate-checkmark-color); } nb-checkbox.status-warning .native-input:enabled:focus + .custom-checkbox { background-color: var(--checkbox-warning-focus-background-color); border-color: var(--checkbox-warning-focus-border-color); } nb-checkbox.status-warning .native-input:enabled:focus + .custom-checkbox.indeterminate, nb-checkbox.status-warning .native-input:enabled:focus + .custom-checkbox.checked { background-color: var(--checkbox-warning-focus-checked-background-color); border-color: var(--checkbox-warning-focus-checked-border-color); } nb-checkbox.status-warning .custom-checkbox:hover { background-color: var(--checkbox-warning-hover-background-color); border-color: var(--checkbox-warning-hover-border-color); } nb-checkbox.status-warning .custom-checkbox:hover.indeterminate, nb-checkbox.status-warning .custom-checkbox:hover.checked { background-color: var(--checkbox-warning-hover-checked-background-color); border-color: var(--checkbox-warning-hover-checked-border-color); } nb-checkbox.status-warning .native-input:enabled:active + .custom-checkbox { background-color: var(--checkbox-warning-active-background-color); border-color: var(--checkbox-warning-active-border-color); } nb-checkbox.status-warning .native-input:enabled:active + .custom-checkbox.indeterminate, nb-checkbox.status-warning .native-input:enabled:active + .custom-checkbox.checked { background-color: var(--checkbox-warning-active-checked-background-color); border-color: var(--checkbox-warning-active-checked-border-color); } nb-checkbox.status-warning .native-input:disabled + .custom-checkbox { background-color: var(--checkbox-warning-disabled-background-color); border-color: var(--checkbox-warning-disabled-border-color); } nb-checkbox.status-warning .native-input:disabled + .custom-checkbox .custom-checkbox-icon { color: var(--checkbox-warning-disabled-checkmark-color); } nb-checkbox.status-warning .native-input:disabled ~ .text { color: var(--checkbox-warning-disabled-text-color); } nb-checkbox.status-warning .native-input:disabled:indeterminate + .custom-checkbox, nb-checkbox.status-warning .native-input:disabled:checked + .custom-checkbox { background-color: var(--checkbox-warning-disabled-checked-background-color); border-color: var(--checkbox-warning-disabled-checked-border-color); } nb-checkbox.status-danger .custom-checkbox { background-color: var(--checkbox-danger-background-color); border-color: var(--checkbox-danger-border-color); } nb-checkbox.status-danger .text { color: var(--checkbox-danger-text-color); } nb-checkbox.status-danger .custom-checkbox.checked { background-color: var(--checkbox-danger-checked-background-color); border-color: var(--checkbox-danger-checked-border-color); } nb-checkbox.status-danger .custom-checkbox.checked .custom-checkbox-icon { color: var(--checkbox-danger-checked-checkmark-color); } nb-checkbox.status-danger .custom-checkbox.indeterminate { background-color: var(--checkbox-danger-indeterminate-background-color); border-color: var(--checkbox-danger-indeterminate-border-color); } nb-checkbox.status-danger .custom-checkbox.indeterminate .custom-checkbox-icon { color: var(--checkbox-danger-indeterminate-checkmark-color); } nb-checkbox.status-danger .native-input:enabled:focus + .custom-checkbox { background-color: var(--checkbox-danger-focus-background-color); border-color: var(--checkbox-danger-focus-border-color); } nb-checkbox.status-danger .native-input:enabled:focus + .custom-checkbox.indeterminate, nb-checkbox.status-danger .native-input:enabled:focus + .custom-checkbox.checked { background-color: var(--checkbox-danger-focus-checked-background-color); border-color: var(--checkbox-danger-focus-checked-border-color); } nb-checkbox.status-danger .custom-checkbox:hover { background-color: var(--checkbox-danger-hover-background-color); border-color: var(--checkbox-danger-hover-border-color); } nb-checkbox.status-danger .custom-checkbox:hover.indeterminate, nb-checkbox.status-danger .custom-checkbox:hover.checked { background-color: var(--checkbox-danger-hover-checked-background-color); border-color: var(--checkbox-danger-hover-checked-border-color); } nb-checkbox.status-danger .native-input:enabled:active + .custom-checkbox { background-color: var(--checkbox-danger-active-background-color); border-color: var(--checkbox-danger-active-border-color); } nb-checkbox.status-danger .native-input:enabled:active + .custom-checkbox.indeterminate, nb-checkbox.status-danger .native-input:enabled:active + .custom-checkbox.checked { background-color: var(--checkbox-danger-active-checked-background-color); border-color: var(--checkbox-danger-active-checked-border-color); } nb-checkbox.status-danger .native-input:disabled + .custom-checkbox { background-color: var(--checkbox-danger-disabled-background-color); border-color: var(--checkbox-danger-disabled-border-color); } nb-checkbox.status-danger .native-input:disabled + .custom-checkbox .custom-checkbox-icon { color: var(--checkbox-danger-disabled-checkmark-color); } nb-checkbox.status-danger .native-input:disabled ~ .text { color: var(--checkbox-danger-disabled-text-color); } nb-checkbox.status-danger .native-input:disabled:indeterminate + .custom-checkbox, nb-checkbox.status-danger .native-input:disabled:checked + .custom-checkbox { background-color: var(--checkbox-danger-disabled-checked-background-color); border-color: var(--checkbox-danger-disabled-checked-border-color); } nb-checkbox.status-info .custom-checkbox { background-color: var(--checkbox-info-background-color); border-color: var(--checkbox-info-border-color); } nb-checkbox.status-info .text { color: var(--checkbox-info-text-color); } nb-checkbox.status-info .custom-checkbox.checked { background-color: var(--checkbox-info-checked-background-color); border-color: var(--checkbox-info-checked-border-color); } nb-checkbox.status-info .custom-checkbox.checked .custom-checkbox-icon { color: var(--checkbox-info-checked-checkmark-color); } nb-checkbox.status-info .custom-checkbox.indeterminate { background-color: var(--checkbox-info-indeterminate-background-color); border-color: var(--checkbox-info-indeterminate-border-color); } nb-checkbox.status-info .custom-checkbox.indeterminate .custom-checkbox-icon { color: var(--checkbox-info-indeterminate-checkmark-color); } nb-checkbox.status-info .native-input:enabled:focus + .custom-checkbox { background-color: var(--checkbox-info-focus-background-color); border-color: var(--checkbox-info-focus-border-color); } nb-checkbox.status-info .native-input:enabled:focus + .custom-checkbox.indeterminate, nb-checkbox.status-info .native-input:enabled:focus + .custom-checkbox.checked { background-color: var(--checkbox-info-focus-checked-background-color); border-color: var(--checkbox-info-focus-checked-border-color); } nb-checkbox.status-info .custom-checkbox:hover { background-color: var(--checkbox-info-hover-background-color); border-color: var(--checkbox-info-hover-border-color); } nb-checkbox.status-info .custom-checkbox:hover.indeterminate, nb-checkbox.status-info .custom-checkbox:hover.checked { background-color: var(--checkbox-info-hover-checked-background-color); border-color: var(--checkbox-info-hover-checked-border-color); } nb-checkbox.status-info .native-input:enabled:active + .custom-checkbox { background-color: var(--checkbox-info-active-background-color); border-color: var(--checkbox-info-active-border-color); } nb-checkbox.status-info .native-input:enabled:active + .custom-checkbox.indeterminate, nb-checkbox.status-info .native-input:enabled:active + .custom-checkbox.checked { background-color: var(--checkbox-info-active-checked-background-color); border-color: var(--checkbox-info-active-checked-border-color); } nb-checkbox.status-info .native-input:disabled + .custom-checkbox { background-color: var(--checkbox-info-disabled-background-color); border-color: var(--checkbox-info-disabled-border-color); } nb-checkbox.status-info .native-input:disabled + .custom-checkbox .custom-checkbox-icon { color: var(--checkbox-info-disabled-checkmark-color); } nb-checkbox.status-info .native-input:disabled ~ .text { color: var(--checkbox-info-disabled-text-color); } nb-checkbox.status-info .native-input:disabled:indeterminate + .custom-checkbox, nb-checkbox.status-info .native-input:disabled:checked + .custom-checkbox { background-color: var(--checkbox-info-disabled-checked-background-color); border-color: var(--checkbox-info-disabled-checked-border-color); } nb-checkbox.status-control .custom-checkbox { background-color: var(--checkbox-control-background-color); border-color: var(--checkbox-control-border-color); } nb-checkbox.status-control .text { color: var(--checkbox-control-text-color); } nb-checkbox.status-control .custom-checkbox.checked { background-color: var(--checkbox-control-checked-background-color); border-color: var(--checkbox-control-checked-border-color); } nb-checkbox.status-control .custom-checkbox.checked .custom-checkbox-icon { color: var(--checkbox-control-checked-checkmark-color); } nb-checkbox.status-control .custom-checkbox.indeterminate { background-color: var(--checkbox-control-indeterminate-background-color); border-color: var(--checkbox-control-indeterminate-border-color); } nb-checkbox.status-control .custom-checkbox.indeterminate .custom-checkbox-icon { color: var(--checkbox-control-indeterminate-checkmark-color); } nb-checkbox.status-control .native-input:enabled:focus + .custom-checkbox { background-color: var(--checkbox-control-focus-background-color); border-color: var(--checkbox-control-focus-border-color); } nb-checkbox.status-control .native-input:enabled:focus + .custom-checkbox.indeterminate, nb-checkbox.status-control .native-input:enabled:focus + .custom-checkbox.checked { background-color: var(--checkbox-control-focus-checked-background-color); border-color: var(--checkbox-control-focus-checked-border-color); } nb-checkbox.status-control .custom-checkbox:hover { background-color: var(--checkbox-control-hover-background-color); border-color: var(--checkbox-control-hover-border-color); } nb-checkbox.status-control .custom-checkbox:hover.indeterminate, nb-checkbox.status-control .custom-checkbox:hover.checked { background-color: var(--checkbox-control-hover-checked-background-color); border-color: var(--checkbox-control-hover-checked-border-color); } nb-checkbox.status-control .native-input:enabled:active + .custom-checkbox { background-color: var(--checkbox-control-active-background-color); border-color: var(--checkbox-control-active-border-color); } nb-checkbox.status-control .native-input:enabled:active + .custom-checkbox.indeterminate, nb-checkbox.status-control .native-input:enabled:active + .custom-checkbox.checked { background-color: var(--checkbox-control-active-checked-background-color); border-color: var(--checkbox-control-active-checked-border-color); } nb-checkbox.status-control .native-input:disabled + .custom-checkbox { background-color: var(--checkbox-control-disabled-background-color); border-color: var(--checkbox-control-disabled-border-color); } nb-checkbox.status-control .native-input:disabled + .custom-checkbox .custom-checkbox-icon { color: var(--checkbox-control-disabled-checkmark-color); } nb-checkbox.status-control .native-input:disabled ~ .text { color: var(--checkbox-control-disabled-text-color); } nb-checkbox.status-control .native-input:disabled:indeterminate + .custom-checkbox, nb-checkbox.status-control .native-input:disabled:checked + .custom-checkbox { background-color: var(--checkbox-control-disabled-checked-background-color); border-color: var(--checkbox-control-disabled-checked-border-color); } nb-toggle .toggle { height: var(--toggle-height); width: var(--toggle-width); border-width: var(--toggle-border-width); border-style: solid; border-radius: var(--toggle-border-radius); cursor: var(--toggle-cursor); /* We need to set initial positions as Angular animations won't work in IE11 if positions have no initial value. Setting it in SCSS as we don't have access to theme variables from TS. */ } [dir=ltr] nb-toggle .toggle.checked .toggle-switcher { left: calc(100% - var(--toggle-switcher-size) - var(--toggle-border-width) - var(--toggle-border-width)); } [dir=ltr] nb-toggle .toggle:not(.checked) .toggle-switcher { right: 0; } [dir=rtl] nb-toggle .toggle.checked .toggle-switcher { right: calc(100% - var(--toggle-switcher-size) - var(--toggle-border-width) - var(--toggle-border-width)); } [dir=rtl] nb-toggle .toggle:not(.checked) .toggle-switcher { left: 0; } nb-toggle .native-input:enabled:focus + .toggle { box-shadow: 0 0 0 var(--toggle-outline-width) var(--toggle-outline-color); } nb-toggle .native-input:disabled + .toggle { cursor: var(--toggle-disabled-cursor); } nb-toggle .toggle-switcher { width: var(--toggle-switcher-size); height: var(--toggle-switcher-size); } nb-toggle .toggle-switcher nb-icon { height: var(--toggle-switcher-icon-size); width: var(--toggle-switcher-icon-size); } nb-toggle .text { font-family: var(--toggle-text-font-family); font-size: var(--toggle-text-font-size); font-weight: var(--toggle-text-font-weight); line-height: var(--toggle-text-line-height); } nb-toggle.status-basic .text { color: var(--toggle-basic-text-color); } nb-toggle.status-basic .toggle { background-color: var(--toggle-basic-background-color); border-color: var(--toggle-basic-border-color); } nb-toggle.status-basic .toggle.checked { background-color: var(--toggle-basic-checked-background-color); border-color: var(--toggle-basic-checked-border-color); } nb-toggle.status-basic .native-input:enabled:focus + .toggle { background-color: var(--toggle-basic-focus-background-color); border-color: var(--toggle-basic-focus-border-color); } nb-toggle.status-basic .native-input:enabled:focus + .toggle.checked { background-color: var(--toggle-basic-focus-checked-background-color); border-color: var(--toggle-basic-focus-checked-border-color); } nb-toggle.status-basic .native-input:enabled:active + .toggle { background-color: var(--toggle-basic-active-background-color); border-color: var(--toggle-basic-active-border-color); } nb-toggle.status-basic .native-input:enabled:active + .toggle.checked { background-color: var(--toggle-basic-active-checked-background-color); border-color: var(--toggle-basic-active-checked-border-color); } nb-toggle.status-basic .native-input:enabled + .toggle:hover { background-color: var(--toggle-basic-hover-background-color); border-color: var(--toggle-basic-hover-border-color); } nb-toggle.status-basic .native-input:enabled + .toggle:hover.checked { background-color: var(--toggle-basic-hover-checked-background-color); border-color: var(--toggle-basic-hover-checked-border-color); } nb-toggle.status-basic .toggle-switcher { background-color: var(--toggle-basic-checked-switcher-background-color); } nb-toggle.status-basic .toggle-switcher nb-icon { color: var(--toggle-basic-checked-switcher-checkmark-color); } nb-toggle.status-basic .native-input:disabled + .toggle { background-color: var(--toggle-basic-disabled-background-color); border-color: var(--toggle-basic-disabled-border-color); } nb-toggle.status-basic .native-input:disabled + .toggle .toggle-switcher { background-color: var(--toggle-basic-disabled-switcher-background-color); } nb-toggle.status-basic .native-input:disabled + .toggle .toggle-switcher nb-icon { color: var(--toggle-basic-disabled-checked-switcher-checkmark-color); } nb-toggle.status-basic .native-input:disabled ~ .text { color: var(--toggle-basic-disabled-text-color); } nb-toggle.status-primary .text { color: var(--toggle-primary-text-color); } nb-toggle.status-primary .toggle { background-color: var(--toggle-primary-background-color); border-color: var(--toggle-primary-border-color); } nb-toggle.status-primary .toggle.checked { background-color: var(--toggle-primary-checked-background-color); border-color: var(--toggle-primary-checked-border-color); } nb-toggle.status-primary .native-input:enabled:focus + .toggle { background-color: var(--toggle-primary-focus-background-color); border-color: var(--toggle-primary-focus-border-color); } nb-toggle.status-primary .native-input:enabled:focus + .toggle.checked { background-color: var(--toggle-primary-focus-checked-background-color); border-color: var(--toggle-primary-focus-checked-border-color); } nb-toggle.status-primary .native-input:enabled:active + .toggle { background-color: var(--toggle-primary-active-background-color); border-color: var(--toggle-primary-active-border-color); } nb-toggle.status-primary .native-input:enabled:active + .toggle.checked { background-color: var(--toggle-primary-active-checked-background-color); border-color: var(--toggle-primary-active-checked-border-color); } nb-toggle.status-primary .native-input:enabled + .toggle:hover { background-color: var(--toggle-primary-hover-background-color); border-color: var(--toggle-primary-hover-border-color); } nb-toggle.status-primary .native-input:enabled + .toggle:hover.checked { background-color: var(--toggle-primary-hover-checked-background-color); border-color: var(--toggle-primary-hover-checked-border-color); } nb-toggle.status-primary .toggle-switcher { background-color: var(--toggle-primary-checked-switcher-background-color); } nb-toggle.status-primary .toggle-switcher nb-icon { color: var(--toggle-primary-checked-switcher-checkmark-color); } nb-toggle.status-primary .native-input:disabled + .toggle { background-color: var(--toggle-primary-disabled-background-color); border-color: var(--toggle-primary-disabled-border-color); } nb-toggle.status-primary .native-input:disabled + .toggle .toggle-switcher { background-color: var(--toggle-primary-disabled-switcher-background-color); } nb-toggle.status-primary .native-input:disabled + .toggle .toggle-switcher nb-icon { color: var(--toggle-primary-disabled-checked-switcher-checkmark-color); } nb-toggle.status-primary .native-input:disabled ~ .text { color: var(--toggle-primary-disabled-text-color); } nb-toggle.status-success .text { color: var(--toggle-success-text-color); } nb-toggle.status-success .toggle { background-color: var(--toggle-success-background-color); border-color: var(--toggle-success-border-color); } nb-toggle.status-success .toggle.checked { background-color: var(--toggle-success-checked-background-color); border-color: var(--toggle-success-checked-border-color); } nb-toggle.status-success .native-input:enabled:focus + .toggle { background-color: var(--toggle-success-focus-background-color); border-color: var(--toggle-success-focus-border-color); } nb-toggle.status-success .native-input:enabled:focus + .toggle.checked { background-color: var(--toggle-success-focus-checked-background-color); border-color: var(--toggle-success-focus-checked-border-color); } nb-toggle.status-success .native-input:enabled:active + .toggle { background-color: var(--toggle-success-active-background-color); border-color: var(--toggle-success-active-border-color); } nb-toggle.status-success .native-input:enabled:active + .toggle.checked { background-color: var(--toggle-success-active-checked-background-color); border-color: var(--toggle-success-active-checked-border-color); } nb-toggle.status-success .native-input:enabled + .toggle:hover { background-color: var(--toggle-success-hover-background-color); border-color: var(--toggle-success-hover-border-color); } nb-toggle.status-success .native-input:enabled + .toggle:hover.checked { background-color: var(--toggle-success-hover-checked-background-color); border-color: var(--toggle-success-hover-checked-border-color); } nb-toggle.status-success .toggle-switcher { background-color: var(--toggle-success-checked-switcher-background-color); } nb-toggle.status-success .toggle-switcher nb-icon { color: var(--toggle-success-checked-switcher-checkmark-color); } nb-toggle.status-success .native-input:disabled + .toggle { background-color: var(--toggle-success-disabled-background-color); border-color: var(--toggle-success-disabled-border-color); } nb-toggle.status-success .native-input:disabled + .toggle .toggle-switcher { background-color: var(--toggle-success-disabled-switcher-background-color); } nb-toggle.status-success .native-input:disabled + .toggle .toggle-switcher nb-icon { color: var(--toggle-success-disabled-checked-switcher-checkmark-color); } nb-toggle.status-success .native-input:disabled ~ .text { color: var(--toggle-success-disabled-text-color); } nb-toggle.status-warning .text { color: var(--toggle-warning-text-color); } nb-toggle.status-warning .toggle { background-color: var(--toggle-warning-background-color); border-color: var(--toggle-warning-border-color); } nb-toggle.status-warning .toggle.checked { background-color: var(--toggle-warning-checked-background-color); border-color: var(--toggle-warning-checked-border-color); } nb-toggle.status-warning .native-input:enabled:focus + .toggle { background-color: var(--toggle-warning-focus-background-color); border-color: var(--toggle-warning-focus-border-color); } nb-toggle.status-warning .native-input:enabled:focus + .toggle.checked { background-color: var(--toggle-warning-focus-checked-background-color); border-color: var(--toggle-warning-focus-checked-border-color); } nb-toggle.status-warning .native-input:enabled:active + .toggle { background-color: var(--toggle-warning-active-background-color); border-color: var(--toggle-warning-active-border-color); } nb-toggle.status-warning .native-input:enabled:active + .toggle.checked { background-color: var(--toggle-warning-active-checked-background-color); border-color: var(--toggle-warning-active-checked-border-color); } nb-toggle.status-warning .native-input:enabled + .toggle:hover { background-color: var(--toggle-warning-hover-background-color); border-color: var(--toggle-warning-hover-border-color); } nb-toggle.status-warning .native-input:enabled + .toggle:hover.checked { background-color: var(--toggle-warning-hover-checked-background-color); border-color: var(--toggle-warning-hover-checked-border-color); } nb-toggle.status-warning .toggle-switcher { background-color: var(--toggle-warning-checked-switcher-background-color); } nb-toggle.status-warning .toggle-switcher nb-icon { color: var(--toggle-warning-checked-switcher-checkmark-color); } nb-toggle.status-warning .native-input:disabled + .toggle { background-color: var(--toggle-warning-disabled-background-color); border-color: var(--toggle-warning-disabled-border-color); } nb-toggle.status-warning .native-input:disabled + .toggle .toggle-switcher { background-color: var(--toggle-warning-disabled-switcher-background-color); } nb-toggle.status-warning .native-input:disabled + .toggle .toggle-switcher nb-icon { color: var(--toggle-warning-disabled-checked-switcher-checkmark-color); } nb-toggle.status-warning .native-input:disabled ~ .text { color: var(--toggle-warning-disabled-text-color); } nb-toggle.status-danger .text { color: var(--toggle-danger-text-color); } nb-toggle.status-danger .toggle { background-color: var(--toggle-danger-background-color); border-color: var(--toggle-danger-border-color); } nb-toggle.status-danger .toggle.checked { background-color: var(--toggle-danger-checked-background-color); border-color: var(--toggle-danger-checked-border-color); } nb-toggle.status-danger .native-input:enabled:focus + .toggle { background-color: var(--toggle-danger-focus-background-color); border-color: var(--toggle-danger-focus-border-color); } nb-toggle.status-danger .native-input:enabled:focus + .toggle.checked { background-color: var(--toggle-danger-focus-checked-background-color); border-color: var(--toggle-danger-focus-checked-border-color); } nb-toggle.status-danger .native-input:enabled:active + .toggle { background-color: var(--toggle-danger-active-background-color); border-color: var(--toggle-danger-active-border-color); } nb-toggle.status-danger .native-input:enabled:active + .toggle.checked { background-color: var(--toggle-danger-active-checked-background-color); border-color: var(--toggle-danger-active-checked-border-color); } nb-toggle.status-danger .native-input:enabled + .toggle:hover { background-color: var(--toggle-danger-hover-background-color); border-color: var(--toggle-danger-hover-border-color); } nb-toggle.status-danger .native-input:enabled + .toggle:hover.checked { background-color: var(--toggle-danger-hover-checked-background-color); border-color: var(--toggle-danger-hover-checked-border-color); } nb-toggle.status-danger .toggle-switcher { background-color: var(--toggle-danger-checked-switcher-background-color); } nb-toggle.status-danger .toggle-switcher nb-icon { color: var(--toggle-danger-checked-switcher-checkmark-color); } nb-toggle.status-danger .native-input:disabled + .toggle { background-color: var(--toggle-danger-disabled-background-color); border-color: var(--toggle-danger-disabled-border-color); } nb-toggle.status-danger .native-input:disabled + .toggle .toggle-switcher { background-color: var(--toggle-danger-disabled-switcher-background-color); } nb-toggle.status-danger .native-input:disabled + .toggle .toggle-switcher nb-icon { color: var(--toggle-danger-disabled-checked-switcher-checkmark-color); } nb-toggle.status-danger .native-input:disabled ~ .text { color: var(--toggle-danger-disabled-text-color); } nb-toggle.status-info .text { color: var(--toggle-info-text-color); } nb-toggle.status-info .toggle { background-color: var(--toggle-info-background-color); border-color: var(--toggle-info-border-color); } nb-toggle.status-info .toggle.checked { background-color: var(--toggle-info-checked-background-color); border-color: var(--toggle-info-checked-border-color); } nb-toggle.status-info .native-input:enabled:focus + .toggle { background-color: var(--toggle-info-focus-background-color); border-color: var(--toggle-info-focus-border-color); } nb-toggle.status-info .native-input:enabled:focus + .toggle.checked { background-color: var(--toggle-info-focus-checked-background-color); border-color: var(--toggle-info-focus-checked-border-color); } nb-toggle.status-info .native-input:enabled:active + .toggle { background-color: var(--toggle-info-active-background-color); border-color: var(--toggle-info-active-border-color); } nb-toggle.status-info .native-input:enabled:active + .toggle.checked { background-color: var(--toggle-info-active-checked-background-color); border-color: var(--toggle-info-active-checked-border-color); } nb-toggle.status-info .native-input:enabled + .toggle:hover { background-color: var(--toggle-info-hover-background-color); border-color: var(--toggle-info-hover-border-color); } nb-toggle.status-info .native-input:enabled + .toggle:hover.checked { background-color: var(--toggle-info-hover-checked-background-color); border-color: var(--toggle-info-hover-checked-border-color); } nb-toggle.status-info .toggle-switcher { background-color: var(--toggle-info-checked-switcher-background-color); } nb-toggle.status-info .toggle-switcher nb-icon { color: var(--toggle-info-checked-switcher-checkmark-color); } nb-toggle.status-info .native-input:disabled + .toggle { background-color: var(--toggle-info-disabled-background-color); border-color: var(--toggle-info-disabled-border-color); } nb-toggle.status-info .native-input:disabled + .toggle .toggle-switcher { background-color: var(--toggle-info-disabled-switcher-background-color); } nb-toggle.status-info .native-input:disabled + .toggle .toggle-switcher nb-icon { color: var(--toggle-info-disabled-checked-switcher-checkmark-color); } nb-toggle.status-info .native-input:disabled ~ .text { color: var(--toggle-info-disabled-text-color); } nb-toggle.status-control .text { color: var(--toggle-control-text-color); } nb-toggle.status-control .toggle { background-color: var(--toggle-control-background-color); border-color: var(--toggle-control-border-color); } nb-toggle.status-control .toggle.checked { background-color: var(--toggle-control-checked-background-color); border-color: var(--toggle-control-checked-border-color); } nb-toggle.status-control .native-input:enabled:focus + .toggle { background-color: var(--toggle-control-focus-background-color); border-color: var(--toggle-control-focus-border-color); } nb-toggle.status-control .native-input:enabled:focus + .toggle.checked { background-color: var(--toggle-control-focus-checked-background-color); border-color: var(--toggle-control-focus-checked-border-color); } nb-toggle.status-control .native-input:enabled:active + .toggle { background-color: var(--toggle-control-active-background-color); border-color: var(--toggle-control-active-border-color); } nb-toggle.status-control .native-input:enabled:active + .toggle.checked { background-color: var(--toggle-control-active-checked-background-color); border-color: var(--toggle-control-active-checked-border-color); } nb-toggle.status-control .native-input:enabled + .toggle:hover { background-color: var(--toggle-control-hover-background-color); border-color: var(--toggle-control-hover-border-color); } nb-toggle.status-control .native-input:enabled + .toggle:hover.checked { background-color: var(--toggle-control-hover-checked-background-color); border-color: var(--toggle-control-hover-checked-border-color); } nb-toggle.status-control .toggle-switcher { background-color: var(--toggle-control-checked-switcher-background-color); } nb-toggle.status-control .toggle-switcher nb-icon { color: var(--toggle-control-checked-switcher-checkmark-color); } nb-toggle.status-control .native-input:disabled + .toggle { background-color: var(--toggle-control-disabled-background-color); border-color: var(--toggle-control-disabled-border-color); } nb-toggle.status-control .native-input:disabled + .toggle .toggle-switcher { background-color: var(--toggle-control-disabled-switcher-background-color); } nb-toggle.status-control .native-input:disabled + .toggle .toggle-switcher nb-icon { color: var(--toggle-control-disabled-checked-switcher-checkmark-color); } nb-toggle.status-control .native-input:disabled ~ .text { color: var(--toggle-control-disabled-text-color); } nb-progress-bar .progress-container { border-radius: var(--progress-bar-border-radius); } nb-progress-bar .progress-value { display: flex; align-items: center; justify-content: center; font-family: var(--progress-bar-text-font-family); transition-duration: var(--progress-bar-animation-duration); transition-property: width, background-color; } nb-progress-bar.size-tiny .progress-container { height: var(--progress-bar-tiny-height); } nb-progress-bar.size-tiny .progress-value { font-size: var(--progress-bar-tiny-text-font-size); font-weight: var(--progress-bar-tiny-text-font-weight); line-height: var(--progress-bar-tiny-text-line-height); } nb-progress-bar.size-small .progress-container { height: var(--progress-bar-small-height); } nb-progress-bar.size-small .progress-value { font-size: var(--progress-bar-small-text-font-size); font-weight: var(--progress-bar-small-text-font-weight); line-height: var(--progress-bar-small-text-line-height); } nb-progress-bar.size-medium .progress-container { height: var(--progress-bar-medium-height); } nb-progress-bar.size-medium .progress-value { font-size: var(--progress-bar-medium-text-font-size); font-weight: var(--progress-bar-medium-text-font-weight); line-height: var(--progress-bar-medium-text-line-height); } nb-progress-bar.size-large .progress-container { height: var(--progress-bar-large-height); } nb-progress-bar.size-large .progress-value { font-size: var(--progress-bar-large-text-font-size); font-weight: var(--progress-bar-large-text-font-weight); line-height: var(--progress-bar-large-text-line-height); } nb-progress-bar.size-giant .progress-container { height: var(--progress-bar-giant-height); } nb-progress-bar.size-giant .progress-value { font-size: var(--progress-bar-giant-text-font-size); font-weight: var(--progress-bar-giant-text-font-weight); line-height: var(--progress-bar-giant-text-line-height); } nb-progress-bar.status-basic .progress-container { background-color: var(--progress-bar-basic-background-color); } nb-progress-bar.status-basic .progress-value { background-color: var(--progress-bar-basic-filled-background-color); color: var(--progress-bar-basic-text-color); } nb-progress-bar.status-primary .progress-container { background-color: var(--progress-bar-primary-background-color); } nb-progress-bar.status-primary .progress-value { background-color: var(--progress-bar-primary-filled-background-color); color: var(--progress-bar-primary-text-color); } nb-progress-bar.status-success .progress-container { background-color: var(--progress-bar-success-background-color); } nb-progress-bar.status-success .progress-value { background-color: var(--progress-bar-success-filled-background-color); color: var(--progress-bar-success-text-color); } nb-progress-bar.status-warning .progress-container { background-color: var(--progress-bar-warning-background-color); } nb-progress-bar.status-warning .progress-value { background-color: var(--progress-bar-warning-filled-background-color); color: var(--progress-bar-warning-text-color); } nb-progress-bar.status-danger .progress-container { background-color: var(--progress-bar-danger-background-color); } nb-progress-bar.status-danger .progress-value { background-color: var(--progress-bar-danger-filled-background-color); color: var(--progress-bar-danger-text-color); } nb-progress-bar.status-info .progress-container { background-color: var(--progress-bar-info-background-color); } nb-progress-bar.status-info .progress-value { background-color: var(--progress-bar-info-filled-background-color); color: var(--progress-bar-info-text-color); } nb-progress-bar.status-control .progress-container { background-color: var(--progress-bar-control-background-color); } nb-progress-bar.status-control .progress-value { background-color: var(--progress-bar-control-filled-background-color); color: var(--progress-bar-control-text-color); } nb-badge { border-radius: var(--badge-border-radius); font-family: var(--badge-text-font-family); font-size: var(--badge-text-font-size); font-weight: var(--badge-text-font-weight); line-height: var(--badge-text-line-height); padding: var(--badge-padding); } nb-badge.dot-mode { padding: var(--badge-dot-mode-padding); border-radius: var(--badge-dot-mode-border-radius); } nb-badge.status-basic { color: var(--badge-basic-text-color); background-color: var(--badge-basic-background-color); } nb-badge.status-primary { color: var(--badge-primary-text-color); background-color: var(--badge-primary-background-color); } nb-badge.status-success { color: var(--badge-success-text-color); background-color: var(--badge-success-background-color); } nb-badge.status-warning { color: var(--badge-warning-text-color); background-color: var(--badge-warning-background-color); } nb-badge.status-danger { color: var(--badge-danger-text-color); background-color: var(--badge-danger-background-color); } nb-badge.status-info { color: var(--badge-info-text-color); background-color: var(--badge-info-background-color); } nb-badge.status-control { color: var(--badge-control-text-color); background-color: var(--badge-control-background-color); } nb-stepper.horizontal .header .step { width: var(--stepper-step-index-width); margin: 0 calc(var(--stepper-step-index-width) * 0.5); } nb-stepper.horizontal .header .connector { margin: var(--stepper-horizontal-connector-margin); } nb-stepper.vertical .header .connector { margin: var(--stepper-vertical-connector-margin); } nb-stepper .header .connector { background-color: var(--stepper-connector-background-color); } nb-stepper .header .connector-past { background-color: var(--stepper-connector-completed-background-color); } nb-stepper .header .label-index { border-radius: var(--stepper-step-index-border-radius); border-color: var(--stepper-step-index-border-color); border-style: var(--stepper-step-index-border-style); border-width: var(--stepper-step-index-border-width); width: var(--stepper-step-index-width); height: var(--stepper-step-index-width); } nb-stepper .header .step { color: var(--stepper-step-text-color); font-family: var(--stepper-step-text-font-family); font-size: var(--stepper-step-text-font-size); font-weight: var(--stepper-step-text-font-weight); line-height: var(--stepper-step-text-line-height); } nb-stepper .header .step.label-index { border-color: var(--stepper-step-index-border-color); } nb-stepper .header .step.selected { color: var(--stepper-step-active-text-color); } nb-stepper .header .step.selected .label-index { border-color: var(--stepper-step-index-active-border-color); } nb-stepper .header .step.completed { color: var(--stepper-step-completed-text-color); } nb-stepper .header .step.completed .label-index { background-color: var(--stepper-step-index-completed-background-color); border-color: var(--stepper-step-index-completed-border-color); color: var(--stepper-step-index-completed-text-color); } nb-stepper .step-content { padding: var(--stepper-step-content-padding); } nb-alert { border-radius: var(--alert-border-radius); box-shadow: var(--alert-shadow); font-family: var(--alert-text-font-family); font-size: var(--alert-text-font-size); font-weight: var(--alert-text-font-weight); line-height: var(--alert-text-line-height); padding: var(--alert-padding); margin-bottom: var(--alert-bottom-margin); scrollbar-face-color: var(--alert-scrollbar-color); scrollbar-track-color: var(--alert-scrollbar-background-color); } nb-alert::-webkit-scrollbar { width: var(--alert-scrollbar-width); height: var(--alert-scrollbar-width); } nb-alert::-webkit-scrollbar-thumb { background: var(--alert-scrollbar-color); cursor: pointer; border-radius: calc(var(--alert-scrollbar-width) * 0.5); } nb-alert::-webkit-scrollbar-track { background: var(--alert-scrollbar-background-color); } nb-alert::-webkit-scrollbar-corner { background: var(--alert-scrollbar-background-color); } [dir=ltr] nb-alert.closable { padding-right: var(--alert-closable-start-padding); } [dir=rtl] nb-alert.closable { padding-left: var(--alert-closable-start-padding); } nb-alert .close { padding: var(--alert-padding); font-size: 1.5rem; line-height: 1; cursor: pointer; font-family: monospace; } nb-alert.size-tiny { height: var(--alert-tiny-height); } nb-alert.size-small { height: var(--alert-small-height); } nb-alert.size-medium { height: var(--alert-medium-height); } nb-alert.size-large { height: var(--alert-large-height); } nb-alert.size-giant { height: var(--alert-giant-height); } nb-alert.status-basic { color: var(--alert-basic-text-color); background-color: var(--alert-basic-background-color); } nb-alert.status-basic a, nb-alert.status-basic a:hover { color: var(--alert-basic-text-color); } nb-alert.accent-basic { border-top: var(--alert-border-radius) solid var(--alert-accent-basic-color); } nb-alert.outline-basic { border: var(--alert-outline-width) solid var(--alert-outline-basic-color); } nb-alert.status-primary { color: var(--alert-primary-text-color); background-color: var(--alert-primary-background-color); } nb-alert.status-primary a, nb-alert.status-primary a:hover { color: var(--alert-primary-text-color); } nb-alert.accent-primary { border-top: var(--alert-border-radius) solid var(--alert-accent-primary-color); } nb-alert.outline-primary { border: var(--alert-outline-width) solid var(--alert-outline-primary-color); } nb-alert.status-success { color: var(--alert-success-text-color); background-color: var(--alert-success-background-color); } nb-alert.status-success a, nb-alert.status-success a:hover { color: var(--alert-success-text-color); } nb-alert.accent-success { border-top: var(--alert-border-radius) solid var(--alert-accent-success-color); } nb-alert.outline-success { border: var(--alert-outline-width) solid var(--alert-outline-success-color); } nb-alert.status-warning { color: var(--alert-warning-text-color); background-color: var(--alert-warning-background-color); } nb-alert.status-warning a, nb-alert.status-warning a:hover { color: var(--alert-warning-text-color); } nb-alert.accent-warning { border-top: var(--alert-border-radius) solid var(--alert-accent-warning-color); } nb-alert.outline-warning { border: var(--alert-outline-width) solid var(--alert-outline-warning-color); } nb-alert.status-danger { color: var(--alert-danger-text-color); background-color: var(--alert-danger-background-color); } nb-alert.status-danger a, nb-alert.status-danger a:hover { color: var(--alert-danger-text-color); } nb-alert.accent-danger { border-top: var(--alert-border-radius) solid var(--alert-accent-danger-color); } nb-alert.outline-danger { border: var(--alert-outline-width) solid var(--alert-outline-danger-color); } nb-alert.status-info { color: var(--alert-info-text-color); background-color: var(--alert-info-background-color); } nb-alert.status-info a, nb-alert.status-info a:hover { color: var(--alert-info-text-color); } nb-alert.accent-info { border-top: var(--alert-border-radius) solid var(--alert-accent-info-color); } nb-alert.outline-info { border: var(--alert-outline-width) solid var(--alert-outline-info-color); } nb-alert.status-control { color: var(--alert-control-text-color); background-color: var(--alert-control-background-color); } nb-alert.status-control a, nb-alert.status-control a:hover { color: var(--alert-control-text-color); } nb-alert.accent-control { border-top: var(--alert-border-radius) solid var(--alert-accent-control-color); } nb-alert.outline-control { border: var(--alert-outline-width) solid var(--alert-outline-control-color); } nb-chat { background-color: var(--chat-background-color); border: var(--chat-border); border-radius: var(--chat-border-radius); box-shadow: var(--chat-shadow); color: var(--chat-text-color); font-family: var(--chat-text-font-family); font-size: var(--chat-text-font-size); font-weight: var(--chat-text-font-weight); line-height: var(--chat-text-line-height); } nb-chat nb-icon { font-size: inherit; } nb-chat .header { border-bottom: var(--chat-divider-width) var(--chat-divider-style) var(--chat-divider-color); border-top-left-radius: var(--chat-border-radius); border-top-right-radius: var(--chat-border-radius); padding: var(--chat-padding); font-family: var(--chat-header-text-font-family); font-size: var(--chat-header-text-font-size); font-weight: var(--chat-header-text-font-weight); line-height: var(--chat-header-text-line-height); } nb-chat .scrollable { overflow: auto; flex: 1; scrollbar-face-color: var(--chat-scrollbar-color); scrollbar-track-color: var(--chat-scrollbar-background-color); } nb-chat .scrollable::-webkit-scrollbar { width: var(--chat-scrollbar-width); height: var(--chat-scrollbar-width); } nb-chat .scrollable::-webkit-scrollbar-thumb { background: var(--chat-scrollbar-color); cursor: pointer; border-radius: calc(var(--chat-scrollbar-width) * 0.5); } nb-chat .scrollable::-webkit-scrollbar-track { background: var(--chat-scrollbar-background-color); } nb-chat .scrollable::-webkit-scrollbar-corner { background: var(--chat-scrollbar-background-color); } nb-chat .messages { padding: var(--chat-padding); overflow-y: auto; overflow-x: hidden; display: flex; flex-shrink: 0; flex-direction: column; } nb-chat .no-messages { text-align: center; } nb-chat.size-tiny { height: var(--chat-tiny-height); } nb-chat.size-small { height: var(--chat-small-height); } nb-chat.size-medium { height: var(--chat-medium-height); } nb-chat.size-large { height: var(--chat-large-height); } nb-chat.size-giant { height: var(--chat-giant-height); } nb-chat.status-basic .header { background-color: var(--chat-basic-background-color); color: var(--chat-basic-text-color); } nb-chat.status-primary .header { background-color: var(--chat-primary-background-color); color: var(--chat-primary-text-color); } nb-chat.status-success .header { background-color: var(--chat-success-background-color); color: var(--chat-success-text-color); } nb-chat.status-warning .header { background-color: var(--chat-warning-background-color); color: var(--chat-warning-text-color); } nb-chat.status-danger .header { background-color: var(--chat-danger-background-color); color: var(--chat-danger-text-color); } nb-chat.status-info .header { background-color: var(--chat-info-background-color); color: var(--chat-info-text-color); } nb-chat.status-control .header { background-color: var(--chat-control-background-color); color: var(--chat-control-text-color); } nb-chat-message { margin-bottom: 1.5rem; display: flex; flex-direction: row; } nb-chat-message .message { flex: 1; } nb-chat-message .avatar { display: block; border-radius: 50%; flex-shrink: 0; background: var(--chat-message-avatar-background-color); background-position: center; background-size: cover; background-repeat: no-repeat; width: 2.5rem; height: 2.5rem; text-align: center; line-height: 2.5rem; font-size: 0.875rem; color: white; } nb-chat-message nb-chat-message-text { display: flex; flex-direction: column; } nb-chat-message nb-chat-message-text .sender { font-size: 0.875rem; color: var(--chat-message-sender-text-color); margin-top: 0; margin-bottom: 0.5rem; } nb-chat-message nb-chat-message-text p { word-break: break-word; white-space: pre-wrap; max-width: 100%; margin-top: 0; margin-bottom: 0; } nb-chat-message nb-chat-message-text .text { padding: 1rem; border-radius: 0.5rem; } nb-chat-message nb-chat-message-file { display: flex; flex-direction: column; } nb-chat-message nb-chat-message-file a { color: var(--chat-message-file-text-color); background: var(--chat-message-file-background-color); font-size: 4rem; text-align: center; border: 1px solid var(--chat-message-file-text-color); width: 10rem; height: 10rem; overflow: hidden; display: flex; justify-content: center; align-items: center; flex-shrink: 0; border-radius: 0.5rem; } nb-chat-message nb-chat-message-file a:hover, nb-chat-message nb-chat-message-file a:focus { text-decoration: none; color: var(--chat-message-file-text-color); } nb-chat-message nb-chat-message-file a div { background-size: cover; width: 100%; height: 100%; } nb-chat-message nb-chat-message-file nb-chat-message-text { display: block; margin-bottom: 0.5rem; } nb-chat-message nb-chat-message-file .message-content-group { display: flex; flex-direction: row; justify-content: flex-end; flex-wrap: wrap; } nb-chat-message nb-chat-message-file .message-content-group a { margin-bottom: 1rem; width: 5rem; height: 5rem; } [dir=ltr] nb-chat-message nb-chat-message-file .message-content-group a { margin-right: 1rem; } [dir=rtl] nb-chat-message nb-chat-message-file .message-content-group a { margin-left: 1rem; } nb-chat-message nb-chat-message-quote p.quote { font-style: italic; font-size: 0.875rem; background: var(--chat-message-quote-background-color); color: var(--chat-message-quote-text-color); padding: 1rem; border-radius: 0.5rem; margin-top: 0; margin-bottom: 0.5rem; } nb-chat-message nb-chat-message-quote .sender { font-size: 0.875rem; color: var(--chat-message-sender-text-color); margin-bottom: 0.5rem; } [dir=ltr] nb-chat-message.not-reply .message { margin-left: 0.5rem; } [dir=rtl] nb-chat-message.not-reply .message { margin-right: 0.5rem; } [dir=ltr] nb-chat-message.not-reply .message { margin-right: 3rem; } [dir=rtl] nb-chat-message.not-reply .message { margin-left: 3rem; } nb-chat-message.not-reply nb-chat-message-text { align-items: flex-start; } nb-chat-message.not-reply nb-chat-message-text .text { background: var(--chat-message-background); color: var(--chat-message-text-color); } [dir=ltr] nb-chat-message.not-reply nb-chat-message-text .text { border-top-left-radius: 0; } [dir=rtl] nb-chat-message.not-reply nb-chat-message-text .text { border-top-right-radius: 0; } nb-chat-message.not-reply nb-chat-message-file { align-items: flex-start; } nb-chat-message.reply { flex-direction: row-reverse; } nb-chat-message.reply .message { display: flex; flex-direction: column; align-items: flex-end; margin-left: 0; } [dir=ltr] nb-chat-message.reply .message { margin-right: 0.5rem; } [dir=rtl] nb-chat-message.reply .message { margin-left: 0.5rem; } [dir=ltr] nb-chat-message.reply .message { margin-left: 3rem; } [dir=rtl] nb-chat-message.reply .message { margin-right: 3rem; } nb-chat-message.reply nb-chat-message-text { align-items: flex-end; } [dir=ltr] nb-chat-message.reply nb-chat-message-text .sender { text-align: right; } [dir=rtl] nb-chat-message.reply nb-chat-message-text .sender { text-align: left; } nb-chat-message.reply nb-chat-message-text .text { background: var(--chat-message-reply-background-color); color: var(--chat-message-reply-text-color); } [dir=ltr] nb-chat-message.reply nb-chat-message-text .text { border-top-right-radius: 0; } [dir=rtl] nb-chat-message.reply nb-chat-message-text .text { border-top-left-radius: 0; } nb-chat-message.reply nb-chat-message-file { align-items: flex-end; } nb-chat-form { display: flex; flex-direction: column; padding: var(--chat-padding); border-top: var(--chat-divider-width) var(--chat-divider-style) var(--chat-divider-color); } nb-chat-form .message-row { flex-direction: row; display: flex; } nb-chat-form input { flex: 1; } nb-chat-form input.with-button { border-bottom-right-radius: 0; border-top-right-radius: 0; } [dir=ltr] nb-chat-form input.with-button { border-bottom-right-radius: 0; border-top-right-radius: 0; } [dir=rtl] nb-chat-form input.with-button { border-bottom-left-radius: 0; border-top-left-radius: 0; } nb-chat-form .send-button nb-icon { font-size: 1.5rem; } [dir=ltr] nb-chat-form .send-button { border-bottom-left-radius: 0; border-top-left-radius: 0; } [dir=rtl] nb-chat-form .send-button { border-bottom-right-radius: 0; border-top-right-radius: 0; } nb-chat-form .dropped-files { display: flex; flex-direction: row; margin-bottom: 0.5rem; flex-wrap: wrap; } nb-chat-form .dropped-files div { background-size: cover; width: 3rem; height: 3rem; border-radius: 0.5rem; margin-bottom: 0.5rem; border: 1px solid currentColor; text-align: center; font-size: 2rem; position: relative; } [dir=ltr] nb-chat-form .dropped-files div { margin-right: 0.5rem; } [dir=rtl] nb-chat-form .dropped-files div { margin-left: 0.5rem; } nb-chat-form .dropped-files div .remove { position: absolute; right: -0.5rem; top: -0.875rem; font-size: 0.875rem; line-height: 1; cursor: pointer; } nb-chat-form .dropped-files div nb-icon { width: 65%; height: 100%; } .nb-custom-message { display: inline-block; padding: var(--chat-padding); margin-top: 0.5rem; border-radius: 0.5rem; } .nb-custom-message-full-width { width: 100%; } .nb-custom-message-no-space { margin-top: 0; } .nb-custom-message-not-reply { background: var(--chat-message-background); color: var(--chat-message-text-color); } [dir=ltr] .nb-custom-message-not-reply { border-top-left-radius: 0; } [dir=rtl] .nb-custom-message-not-reply { border-top-right-radius: 0; } .nb-custom-message-not-reply a, .nb-custom-message-not-reply a:hover, .nb-custom-message-not-reply a:focus { color: var(--chat-message-text-color); } .nb-custom-message-reply { background: var(--chat-message-reply-background-color); color: var(--chat-message-reply-text-color); } [dir=ltr] .nb-custom-message-reply { border-top-right-radius: 0; } [dir=rtl] .nb-custom-message-reply { border-top-left-radius: 0; } nb-accordion { display: block; box-shadow: var(--accordion-shadow); border-radius: var(--accordion-border-radius); } nb-accordion-item-header { position: relative; border-bottom-width: var(--accordion-header-border-width); border-bottom-style: var(--accordion-header-border-style); border-bottom-color: var(--accordion-header-border-color); color: var(--accordion-header-text-color); font-family: var(--accordion-header-text-font-family); font-size: var(--accordion-header-text-font-size); font-weight: var(--accordion-header-text-font-weight); line-height: var(--accordion-header-text-line-height); padding: var(--accordion-padding); } nb-accordion-item-header h1 { margin: 0; } nb-accordion-item-header h2 { margin: 0; } nb-accordion-item-header h3 { margin: 0; } nb-accordion-item-header h4 { margin: 0; } nb-accordion-item-header h5 { margin: 0; } nb-accordion-item-header h6 { margin: 0; } nb-accordion-item-header .expansion-indicator { position: absolute; } [dir=ltr] nb-accordion-item-header .expansion-indicator { right: 1rem; } [dir=rtl] nb-accordion-item-header .expansion-indicator { left: 1rem; } nb-accordion-item { background-color: var(--accordion-item-background-color); color: var(--accordion-item-text-color); font-family: var(--accordion-item-text-font-family); font-size: var(--accordion-item-text-font-size); font-weight: var(--accordion-item-text-font-weight); line-height: var(--accordion-item-text-line-height); } nb-accordion-item.disabled nb-accordion-item-header { color: var(--accordion-header-disabled-text-color); cursor: default; } nb-accordion-item:first-child { border-top-left-radius: var(--accordion-border-radius); border-top-right-radius: var(--accordion-border-radius); } nb-accordion-item:last-child { border-bottom-left-radius: var(--accordion-border-radius); border-bottom-right-radius: var(--accordion-border-radius); } nb-accordion-item:last-child.collapsed nb-accordion-item-header { border-bottom: none; } nb-accordion-item:not(.collapsed) + nb-accordion-item nb-accordion-item-header { border-top-color: var(--accordion-header-border-color); border-top-style: var(--accordion-header-border-style); border-top-width: var(--accordion-header-border-width); } nb-accordion-item-body .item-body { flex: 1; -ms-flex: 1 1 auto; overflow: auto; padding: var(--accordion-padding); position: relative; } [nbButton], [nbButtonToggle] { -webkit-appearance: none; -moz-appearance: none; appearance: none; text-align: center; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: var(--button-cursor); font-family: var(--button-text-font-family); font-weight: var(--button-text-font-weight); } [nbButton]:hover, [nbButtonToggle]:hover, [nbButton]:focus, [nbButtonToggle]:focus { text-decoration: none; } [nbButton].full-width, .full-width[nbButtonToggle] { width: 100%; } [nbButton] nb-icon, [nbButtonToggle] nb-icon { vertical-align: top; } [nbButton].nb-transition, .nb-transition[nbButtonToggle] { transition-duration: 0.15s; transition-property: background-color, border-color, box-shadow, color; transition-timing-function: ease-in; } [nbButton]:focus, [nbButtonToggle]:focus { position: relative; outline: none; box-shadow: 0 0 0 var(--button-outline-width) var(--button-outline-color); } [nbButton][disabled], [disabled][nbButtonToggle], [nbButton].btn-disabled, .btn-disabled[nbButtonToggle] { cursor: var(--button-disabled-cursor); } [nbButton].size-tiny, .size-tiny[nbButtonToggle] { font-size: var(--button-tiny-text-font-size); line-height: var(--button-tiny-text-line-height); } [nbButton].size-tiny nb-icon, .size-tiny[nbButtonToggle] nb-icon { font-size: var(--button-tiny-text-font-size); height: var(--button-tiny-icon-size); width: var(--button-tiny-icon-size); margin-top: var(--button-tiny-icon-vertical-margin); margin-bottom: var(--button-tiny-icon-vertical-margin); } [dir=ltr] [nbButton].size-tiny.icon-start:not(.icon-end) nb-icon, [dir=ltr] .size-tiny.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-right: var(--button-tiny-icon-offset); } [dir=rtl] [nbButton].size-tiny.icon-start:not(.icon-end) nb-icon, [dir=rtl] .size-tiny.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-left: var(--button-tiny-icon-offset); } [dir=ltr] [nbButton].size-tiny.icon-end:not(.icon-start) nb-icon, [dir=ltr] .size-tiny.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-left: var(--button-tiny-icon-offset); } [dir=rtl] [nbButton].size-tiny.icon-end:not(.icon-start) nb-icon, [dir=rtl] .size-tiny.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-right: var(--button-tiny-icon-offset); } [nbButton].size-tiny.icon-start.icon-end.appearance-filled, .size-tiny.icon-start.icon-end.appearance-filled[nbButtonToggle] { padding: var(--icon-button-filled-tiny-padding); } [nbButton].size-tiny.icon-start.icon-end.appearance-outline, .size-tiny.icon-start.icon-end.appearance-outline[nbButtonToggle] { padding: var(--icon-button-outline-tiny-padding); } [nbButton].size-tiny.icon-start.icon-end.appearance-ghost, .size-tiny.icon-start.icon-end.appearance-ghost[nbButtonToggle] { padding: var(--icon-button-ghost-tiny-padding); } [nbButton].size-tiny.icon-start.icon-end.appearance-hero, .size-tiny.icon-start.icon-end.appearance-hero[nbButtonToggle] { padding: var(--icon-button-hero-tiny-padding); } [nbButton].size-small, .size-small[nbButtonToggle] { font-size: var(--button-small-text-font-size); line-height: var(--button-small-text-line-height); } [nbButton].size-small nb-icon, .size-small[nbButtonToggle] nb-icon { font-size: var(--button-small-text-font-size); height: var(--button-small-icon-size); width: var(--button-small-icon-size); margin-top: var(--button-small-icon-vertical-margin); margin-bottom: var(--button-small-icon-vertical-margin); } [dir=ltr] [nbButton].size-small.icon-start:not(.icon-end) nb-icon, [dir=ltr] .size-small.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-right: var(--button-small-icon-offset); } [dir=rtl] [nbButton].size-small.icon-start:not(.icon-end) nb-icon, [dir=rtl] .size-small.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-left: var(--button-small-icon-offset); } [dir=ltr] [nbButton].size-small.icon-end:not(.icon-start) nb-icon, [dir=ltr] .size-small.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-left: var(--button-small-icon-offset); } [dir=rtl] [nbButton].size-small.icon-end:not(.icon-start) nb-icon, [dir=rtl] .size-small.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-right: var(--button-small-icon-offset); } [nbButton].size-small.icon-start.icon-end.appearance-filled, .size-small.icon-start.icon-end.appearance-filled[nbButtonToggle] { padding: var(--icon-button-filled-small-padding); } [nbButton].size-small.icon-start.icon-end.appearance-outline, .size-small.icon-start.icon-end.appearance-outline[nbButtonToggle] { padding: var(--icon-button-outline-small-padding); } [nbButton].size-small.icon-start.icon-end.appearance-ghost, .size-small.icon-start.icon-end.appearance-ghost[nbButtonToggle] { padding: var(--icon-button-ghost-small-padding); } [nbButton].size-small.icon-start.icon-end.appearance-hero, .size-small.icon-start.icon-end.appearance-hero[nbButtonToggle] { padding: var(--icon-button-hero-small-padding); } [nbButton].size-medium, .size-medium[nbButtonToggle] { font-size: var(--button-medium-text-font-size); line-height: var(--button-medium-text-line-height); } [nbButton].size-medium nb-icon, .size-medium[nbButtonToggle] nb-icon { font-size: var(--button-medium-text-font-size); height: var(--button-medium-icon-size); width: var(--button-medium-icon-size); margin-top: var(--button-medium-icon-vertical-margin); margin-bottom: var(--button-medium-icon-vertical-margin); } [dir=ltr] [nbButton].size-medium.icon-start:not(.icon-end) nb-icon, [dir=ltr] .size-medium.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-right: var(--button-medium-icon-offset); } [dir=rtl] [nbButton].size-medium.icon-start:not(.icon-end) nb-icon, [dir=rtl] .size-medium.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-left: var(--button-medium-icon-offset); } [dir=ltr] [nbButton].size-medium.icon-end:not(.icon-start) nb-icon, [dir=ltr] .size-medium.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-left: var(--button-medium-icon-offset); } [dir=rtl] [nbButton].size-medium.icon-end:not(.icon-start) nb-icon, [dir=rtl] .size-medium.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-right: var(--button-medium-icon-offset); } [nbButton].size-medium.icon-start.icon-end.appearance-filled, .size-medium.icon-start.icon-end.appearance-filled[nbButtonToggle] { padding: var(--icon-button-filled-medium-padding); } [nbButton].size-medium.icon-start.icon-end.appearance-outline, .size-medium.icon-start.icon-end.appearance-outline[nbButtonToggle] { padding: var(--icon-button-outline-medium-padding); } [nbButton].size-medium.icon-start.icon-end.appearance-ghost, .size-medium.icon-start.icon-end.appearance-ghost[nbButtonToggle] { padding: var(--icon-button-ghost-medium-padding); } [nbButton].size-medium.icon-start.icon-end.appearance-hero, .size-medium.icon-start.icon-end.appearance-hero[nbButtonToggle] { padding: var(--icon-button-hero-medium-padding); } [nbButton].size-large, .size-large[nbButtonToggle] { font-size: var(--button-large-text-font-size); line-height: var(--button-large-text-line-height); } [nbButton].size-large nb-icon, .size-large[nbButtonToggle] nb-icon { font-size: var(--button-large-text-font-size); height: var(--button-large-icon-size); width: var(--button-large-icon-size); margin-top: var(--button-large-icon-vertical-margin); margin-bottom: var(--button-large-icon-vertical-margin); } [dir=ltr] [nbButton].size-large.icon-start:not(.icon-end) nb-icon, [dir=ltr] .size-large.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-right: var(--button-large-icon-offset); } [dir=rtl] [nbButton].size-large.icon-start:not(.icon-end) nb-icon, [dir=rtl] .size-large.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-left: var(--button-large-icon-offset); } [dir=ltr] [nbButton].size-large.icon-end:not(.icon-start) nb-icon, [dir=ltr] .size-large.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-left: var(--button-large-icon-offset); } [dir=rtl] [nbButton].size-large.icon-end:not(.icon-start) nb-icon, [dir=rtl] .size-large.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-right: var(--button-large-icon-offset); } [nbButton].size-large.icon-start.icon-end.appearance-filled, .size-large.icon-start.icon-end.appearance-filled[nbButtonToggle] { padding: var(--icon-button-filled-large-padding); } [nbButton].size-large.icon-start.icon-end.appearance-outline, .size-large.icon-start.icon-end.appearance-outline[nbButtonToggle] { padding: var(--icon-button-outline-large-padding); } [nbButton].size-large.icon-start.icon-end.appearance-ghost, .size-large.icon-start.icon-end.appearance-ghost[nbButtonToggle] { padding: var(--icon-button-ghost-large-padding); } [nbButton].size-large.icon-start.icon-end.appearance-hero, .size-large.icon-start.icon-end.appearance-hero[nbButtonToggle] { padding: var(--icon-button-hero-large-padding); } [nbButton].size-giant, .size-giant[nbButtonToggle] { font-size: var(--button-giant-text-font-size); line-height: var(--button-giant-text-line-height); } [nbButton].size-giant nb-icon, .size-giant[nbButtonToggle] nb-icon { font-size: var(--button-giant-text-font-size); height: var(--button-giant-icon-size); width: var(--button-giant-icon-size); margin-top: var(--button-giant-icon-vertical-margin); margin-bottom: var(--button-giant-icon-vertical-margin); } [dir=ltr] [nbButton].size-giant.icon-start:not(.icon-end) nb-icon, [dir=ltr] .size-giant.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-right: var(--button-giant-icon-offset); } [dir=rtl] [nbButton].size-giant.icon-start:not(.icon-end) nb-icon, [dir=rtl] .size-giant.icon-start[nbButtonToggle]:not(.icon-end) nb-icon { margin-left: var(--button-giant-icon-offset); } [dir=ltr] [nbButton].size-giant.icon-end:not(.icon-start) nb-icon, [dir=ltr] .size-giant.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-left: var(--button-giant-icon-offset); } [dir=rtl] [nbButton].size-giant.icon-end:not(.icon-start) nb-icon, [dir=rtl] .size-giant.icon-end[nbButtonToggle]:not(.icon-start) nb-icon { margin-right: var(--button-giant-icon-offset); } [nbButton].size-giant.icon-start.icon-end.appearance-filled, .size-giant.icon-start.icon-end.appearance-filled[nbButtonToggle] { padding: var(--icon-button-filled-giant-padding); } [nbButton].size-giant.icon-start.icon-end.appearance-outline, .size-giant.icon-start.icon-end.appearance-outline[nbButtonToggle] { padding: var(--icon-button-outline-giant-padding); } [nbButton].size-giant.icon-start.icon-end.appearance-ghost, .size-giant.icon-start.icon-end.appearance-ghost[nbButtonToggle] { padding: var(--icon-button-ghost-giant-padding); } [nbButton].size-giant.icon-start.icon-end.appearance-hero, .size-giant.icon-start.icon-end.appearance-hero[nbButtonToggle] { padding: var(--icon-button-hero-giant-padding); } [nbButton].shape-rectangle, .shape-rectangle[nbButtonToggle] { border-radius: var(--button-rectangle-border-radius); } [nbButton].shape-semi-round, .shape-semi-round[nbButtonToggle] { border-radius: var(--button-semi-round-border-radius); } [nbButton].shape-round, .shape-round[nbButtonToggle] { border-radius: var(--button-round-border-radius); } a[nbButton], a[nbButtonToggle] { text-decoration: none; } [nbButton].appearance-filled, .appearance-filled[nbButtonToggle] { border-style: var(--button-filled-border-style); border-width: var(--button-filled-border-width); text-transform: var(--button-filled-text-transform); } [nbButton].appearance-filled.size-tiny, .appearance-filled.size-tiny[nbButtonToggle] { padding: var(--button-filled-tiny-padding); } [nbButton].appearance-filled.size-small, .appearance-filled.size-small[nbButtonToggle] { padding: var(--button-filled-small-padding); } [nbButton].appearance-filled.size-medium, .appearance-filled.size-medium[nbButtonToggle] { padding: var(--button-filled-medium-padding); } [nbButton].appearance-filled.size-large, .appearance-filled.size-large[nbButtonToggle] { padding: var(--button-filled-large-padding); } [nbButton].appearance-filled.size-giant, .appearance-filled.size-giant[nbButtonToggle] { padding: var(--button-filled-giant-padding); } [nbButton].appearance-filled.status-basic, .appearance-filled.status-basic[nbButtonToggle] { background-color: var(--button-filled-basic-background-color); border-color: var(--button-filled-basic-border-color); color: var(--button-filled-basic-text-color); } [nbButton].appearance-filled.status-basic:focus, .appearance-filled.status-basic[nbButtonToggle]:focus { background-color: var(--button-filled-basic-focus-background-color); border-color: var(--button-filled-basic-focus-border-color); } [nbButton].appearance-filled.status-basic:hover, .appearance-filled.status-basic[nbButtonToggle]:hover { background-color: var(--button-filled-basic-hover-background-color); border-color: var(--button-filled-basic-hover-border-color); } [nbButton].appearance-filled.status-basic:active, .appearance-filled.status-basic[nbButtonToggle]:active { background-color: var(--button-filled-basic-active-background-color); border-color: var(--button-filled-basic-active-border-color); } [nbButton].appearance-filled.status-basic[disabled], .appearance-filled.status-basic[disabled][nbButtonToggle], [nbButton].appearance-filled.status-basic.btn-disabled, .appearance-filled.status-basic.btn-disabled[nbButtonToggle] { background-color: var(--button-filled-basic-disabled-background-color); border-color: var(--button-filled-basic-disabled-border-color); color: var(--button-filled-basic-disabled-text-color); } [nbButton].appearance-filled.status-primary, .appearance-filled.status-primary[nbButtonToggle] { background-color: var(--button-filled-primary-background-color); border-color: var(--button-filled-primary-border-color); color: var(--button-filled-primary-text-color); } [nbButton].appearance-filled.status-primary:focus, .appearance-filled.status-primary[nbButtonToggle]:focus { background-color: var(--button-filled-primary-focus-background-color); border-color: var(--button-filled-primary-focus-border-color); } [nbButton].appearance-filled.status-primary:hover, .appearance-filled.status-primary[nbButtonToggle]:hover { background-color: var(--button-filled-primary-hover-background-color); border-color: var(--button-filled-primary-hover-border-color); } [nbButton].appearance-filled.status-primary:active, .appearance-filled.status-primary[nbButtonToggle]:active { background-color: var(--button-filled-primary-active-background-color); border-color: var(--button-filled-primary-active-border-color); } [nbButton].appearance-filled.status-primary[disabled], .appearance-filled.status-primary[disabled][nbButtonToggle], [nbButton].appearance-filled.status-primary.btn-disabled, .appearance-filled.status-primary.btn-disabled[nbButtonToggle] { background-color: var(--button-filled-primary-disabled-background-color); border-color: var(--button-filled-primary-disabled-border-color); color: var(--button-filled-primary-disabled-text-color); } [nbButton].appearance-filled.status-success, .appearance-filled.status-success[nbButtonToggle] { background-color: var(--button-filled-success-background-color); border-color: var(--button-filled-success-border-color); color: var(--button-filled-success-text-color); } [nbButton].appearance-filled.status-success:focus, .appearance-filled.status-success[nbButtonToggle]:focus { background-color: var(--button-filled-success-focus-background-color); border-color: var(--button-filled-success-focus-border-color); } [nbButton].appearance-filled.status-success:hover, .appearance-filled.status-success[nbButtonToggle]:hover { background-color: var(--button-filled-success-hover-background-color); border-color: var(--button-filled-success-hover-border-color); } [nbButton].appearance-filled.status-success:active, .appearance-filled.status-success[nbButtonToggle]:active { background-color: var(--button-filled-success-active-background-color); border-color: var(--button-filled-success-active-border-color); } [nbButton].appearance-filled.status-success[disabled], .appearance-filled.status-success[disabled][nbButtonToggle], [nbButton].appearance-filled.status-success.btn-disabled, .appearance-filled.status-success.btn-disabled[nbButtonToggle] { background-color: var(--button-filled-success-disabled-background-color); border-color: var(--button-filled-success-disabled-border-color); color: var(--button-filled-success-disabled-text-color); } [nbButton].appearance-filled.status-warning, .appearance-filled.status-warning[nbButtonToggle] { background-color: var(--button-filled-warning-background-color); border-color: var(--button-filled-warning-border-color); color: var(--button-filled-warning-text-color); } [nbButton].appearance-filled.status-warning:focus, .appearance-filled.status-warning[nbButtonToggle]:focus { background-color: var(--button-filled-warning-focus-background-color); border-color: var(--button-filled-warning-focus-border-color); } [nbButton].appearance-filled.status-warning:hover, .appearance-filled.status-warning[nbButtonToggle]:hover { background-color: var(--button-filled-warning-hover-background-color); border-color: var(--button-filled-warning-hover-border-color); } [nbButton].appearance-filled.status-warning:active, .appearance-filled.status-warning[nbButtonToggle]:active { background-color: var(--button-filled-warning-active-background-color); border-color: var(--button-filled-warning-active-border-color); } [nbButton].appearance-filled.status-warning[disabled], .appearance-filled.status-warning[disabled][nbButtonToggle], [nbButton].appearance-filled.status-warning.btn-disabled, .appearance-filled.status-warning.btn-disabled[nbButtonToggle] { background-color: var(--button-filled-warning-disabled-background-color); border-color: var(--button-filled-warning-disabled-border-color); color: var(--button-filled-warning-disabled-text-color); } [nbButton].appearance-filled.status-danger, .appearance-filled.status-danger[nbButtonToggle] { background-color: var(--button-filled-danger-background-color); border-color: var(--button-filled-danger-border-color); color: var(--button-filled-danger-text-color); } [nbButton].appearance-filled.status-danger:focus, .appearance-filled.status-danger[nbButtonToggle]:focus { background-color: var(--button-filled-danger-focus-background-color); border-color: var(--button-filled-danger-focus-border-color); } [nbButton].appearance-filled.status-danger:hover, .appearance-filled.status-danger[nbButtonToggle]:hover { background-color: var(--button-filled-danger-hover-background-color); border-color: var(--button-filled-danger-hover-border-color); } [nbButton].appearance-filled.status-danger:active, .appearance-filled.status-danger[nbButtonToggle]:active { background-color: var(--button-filled-danger-active-background-color); border-color: var(--button-filled-danger-active-border-color); } [nbButton].appearance-filled.status-danger[disabled], .appearance-filled.status-danger[disabled][nbButtonToggle], [nbButton].appearance-filled.status-danger.btn-disabled, .appearance-filled.status-danger.btn-disabled[nbButtonToggle] { background-color: var(--button-filled-danger-disabled-background-color); border-color: var(--button-filled-danger-disabled-border-color); color: var(--button-filled-danger-disabled-text-color); } [nbButton].appearance-filled.status-info, .appearance-filled.status-info[nbButtonToggle] { background-color: var(--button-filled-info-background-color); border-color: var(--button-filled-info-border-color); color: var(--button-filled-info-text-color); } [nbButton].appearance-filled.status-info:focus, .appearance-filled.status-info[nbButtonToggle]:focus { background-color: var(--button-filled-info-focus-background-color); border-color: var(--button-filled-info-focus-border-color); } [nbButton].appearance-filled.status-info:hover, .appearance-filled.status-info[nbButtonToggle]:hover { background-color: var(--button-filled-info-hover-background-color); border-color: var(--button-filled-info-hover-border-color); } [nbButton].appearance-filled.status-info:active, .appearance-filled.status-info[nbButtonToggle]:active { background-color: var(--button-filled-info-active-background-color); border-color: var(--button-filled-info-active-border-color); } [nbButton].appearance-filled.status-info[disabled], .appearance-filled.status-info[disabled][nbButtonToggle], [nbButton].appearance-filled.status-info.btn-disabled, .appearance-filled.status-info.btn-disabled[nbButtonToggle] { background-color: var(--button-filled-info-disabled-background-color); border-color: var(--button-filled-info-disabled-border-color); color: var(--button-filled-info-disabled-text-color); } [nbButton].appearance-filled.status-control, .appearance-filled.status-control[nbButtonToggle] { background-color: var(--button-filled-control-background-color); border-color: var(--button-filled-control-border-color); color: var(--button-filled-control-text-color); } [nbButton].appearance-filled.status-control:focus, .appearance-filled.status-control[nbButtonToggle]:focus { background-color: var(--button-filled-control-focus-background-color); border-color: var(--button-filled-control-focus-border-color); } [nbButton].appearance-filled.status-control:hover, .appearance-filled.status-control[nbButtonToggle]:hover { background-color: var(--button-filled-control-hover-background-color); border-color: var(--button-filled-control-hover-border-color); } [nbButton].appearance-filled.status-control:active, .appearance-filled.status-control[nbButtonToggle]:active { background-color: var(--button-filled-control-active-background-color); border-color: var(--button-filled-control-active-border-color); } [nbButton].appearance-filled.status-control[disabled], .appearance-filled.status-control[disabled][nbButtonToggle], [nbButton].appearance-filled.status-control.btn-disabled, .appearance-filled.status-control.btn-disabled[nbButtonToggle] { background-color: var(--button-filled-control-disabled-background-color); border-color: var(--button-filled-control-disabled-border-color); color: var(--button-filled-control-disabled-text-color); } [nbButton].appearance-outline, .appearance-outline[nbButtonToggle] { border-style: var(--button-outline-border-style); border-width: var(--button-outline-border-width); text-transform: var(--button-outline-text-transform); } [nbButton].appearance-outline:focus, .appearance-outline[nbButtonToggle]:focus { box-shadow: 0 0 0 var(--button-outline-width) var(--button-outline-color); } [nbButton].appearance-outline:focus:not(:hover):not(:active), .appearance-outline[nbButtonToggle]:focus:not(:hover):not(:active) { box-shadow: 0 0 0 var(--button-outline-width) var(--button-outline-color), inset var(--button-outline-focus-inset-shadow-length) var(--button-outline-color); } [nbButton].appearance-outline.size-tiny, .appearance-outline.size-tiny[nbButtonToggle] { padding: var(--button-outline-tiny-padding); } [nbButton].appearance-outline.size-small, .appearance-outline.size-small[nbButtonToggle] { padding: var(--button-outline-small-padding); } [nbButton].appearance-outline.size-medium, .appearance-outline.size-medium[nbButtonToggle] { padding: var(--button-outline-medium-padding); } [nbButton].appearance-outline.size-large, .appearance-outline.size-large[nbButtonToggle] { padding: var(--button-outline-large-padding); } [nbButton].appearance-outline.size-giant, .appearance-outline.size-giant[nbButtonToggle] { padding: var(--button-outline-giant-padding); } [nbButton].appearance-outline.status-basic, .appearance-outline.status-basic[nbButtonToggle] { background-color: var(--button-outline-basic-background-color); border-color: var(--button-outline-basic-border-color); color: var(--button-outline-basic-text-color); } [nbButton].appearance-outline.status-basic:focus, .appearance-outline.status-basic[nbButtonToggle]:focus { background-color: var(--button-outline-basic-focus-background-color); border-color: var(--button-outline-basic-focus-border-color); color: var(--button-outline-basic-focus-text-color); } [nbButton].appearance-outline.status-basic:hover, .appearance-outline.status-basic[nbButtonToggle]:hover { background-color: var(--button-outline-basic-hover-background-color); border-color: var(--button-outline-basic-hover-border-color); color: var(--button-outline-basic-hover-text-color); } [nbButton].appearance-outline.status-basic:active, .appearance-outline.status-basic[nbButtonToggle]:active { background-color: var(--button-outline-basic-active-background-color); border-color: var(--button-outline-basic-active-border-color); color: var(--button-outline-basic-active-text-color); } [nbButton].appearance-outline.status-basic[disabled], .appearance-outline.status-basic[disabled][nbButtonToggle], [nbButton].appearance-outline.status-basic.btn-disabled, .appearance-outline.status-basic.btn-disabled[nbButtonToggle] { background-color: var(--button-outline-basic-disabled-background-color); border-color: var(--button-outline-basic-disabled-border-color); color: var(--button-outline-basic-disabled-text-color); } [nbButton].appearance-outline.status-primary, .appearance-outline.status-primary[nbButtonToggle] { background-color: var(--button-outline-primary-background-color); border-color: var(--button-outline-primary-border-color); color: var(--button-outline-primary-text-color); } [nbButton].appearance-outline.status-primary:focus, .appearance-outline.status-primary[nbButtonToggle]:focus { background-color: var(--button-outline-primary-focus-background-color); border-color: var(--button-outline-primary-focus-border-color); color: var(--button-outline-primary-focus-text-color); } [nbButton].appearance-outline.status-primary:hover, .appearance-outline.status-primary[nbButtonToggle]:hover { background-color: var(--button-outline-primary-hover-background-color); border-color: var(--button-outline-primary-hover-border-color); color: var(--button-outline-primary-hover-text-color); } [nbButton].appearance-outline.status-primary:active, .appearance-outline.status-primary[nbButtonToggle]:active { background-color: var(--button-outline-primary-active-background-color); border-color: var(--button-outline-primary-active-border-color); color: var(--button-outline-primary-active-text-color); } [nbButton].appearance-outline.status-primary[disabled], .appearance-outline.status-primary[disabled][nbButtonToggle], [nbButton].appearance-outline.status-primary.btn-disabled, .appearance-outline.status-primary.btn-disabled[nbButtonToggle] { background-color: var(--button-outline-primary-disabled-background-color); border-color: var(--button-outline-primary-disabled-border-color); color: var(--button-outline-primary-disabled-text-color); } [nbButton].appearance-outline.status-success, .appearance-outline.status-success[nbButtonToggle] { background-color: var(--button-outline-success-background-color); border-color: var(--button-outline-success-border-color); color: var(--button-outline-success-text-color); } [nbButton].appearance-outline.status-success:focus, .appearance-outline.status-success[nbButtonToggle]:focus { background-color: var(--button-outline-success-focus-background-color); border-color: var(--button-outline-success-focus-border-color); color: var(--button-outline-success-focus-text-color); } [nbButton].appearance-outline.status-success:hover, .appearance-outline.status-success[nbButtonToggle]:hover { background-color: var(--button-outline-success-hover-background-color); border-color: var(--button-outline-success-hover-border-color); color: var(--button-outline-success-hover-text-color); } [nbButton].appearance-outline.status-success:active, .appearance-outline.status-success[nbButtonToggle]:active { background-color: var(--button-outline-success-active-background-color); border-color: var(--button-outline-success-active-border-color); color: var(--button-outline-success-active-text-color); } [nbButton].appearance-outline.status-success[disabled], .appearance-outline.status-success[disabled][nbButtonToggle], [nbButton].appearance-outline.status-success.btn-disabled, .appearance-outline.status-success.btn-disabled[nbButtonToggle] { background-color: var(--button-outline-success-disabled-background-color); border-color: var(--button-outline-success-disabled-border-color); color: var(--button-outline-success-disabled-text-color); } [nbButton].appearance-outline.status-warning, .appearance-outline.status-warning[nbButtonToggle] { background-color: var(--button-outline-warning-background-color); border-color: var(--button-outline-warning-border-color); color: var(--button-outline-warning-text-color); } [nbButton].appearance-outline.status-warning:focus, .appearance-outline.status-warning[nbButtonToggle]:focus { background-color: var(--button-outline-warning-focus-background-color); border-color: var(--button-outline-warning-focus-border-color); color: var(--button-outline-warning-focus-text-color); } [nbButton].appearance-outline.status-warning:hover, .appearance-outline.status-warning[nbButtonToggle]:hover { background-color: var(--button-outline-warning-hover-background-color); border-color: var(--button-outline-warning-hover-border-color); color: var(--button-outline-warning-hover-text-color); } [nbButton].appearance-outline.status-warning:active, .appearance-outline.status-warning[nbButtonToggle]:active { background-color: var(--button-outline-warning-active-background-color); border-color: var(--button-outline-warning-active-border-color); color: var(--button-outline-warning-active-text-color); } [nbButton].appearance-outline.status-warning[disabled], .appearance-outline.status-warning[disabled][nbButtonToggle], [nbButton].appearance-outline.status-warning.btn-disabled, .appearance-outline.status-warning.btn-disabled[nbButtonToggle] { background-color: var(--button-outline-warning-disabled-background-color); border-color: var(--button-outline-warning-disabled-border-color); color: var(--button-outline-warning-disabled-text-color); } [nbButton].appearance-outline.status-danger, .appearance-outline.status-danger[nbButtonToggle] { background-color: var(--button-outline-danger-background-color); border-color: var(--button-outline-danger-border-color); color: var(--button-outline-danger-text-color); } [nbButton].appearance-outline.status-danger:focus, .appearance-outline.status-danger[nbButtonToggle]:focus { background-color: var(--button-outline-danger-focus-background-color); border-color: var(--button-outline-danger-focus-border-color); color: var(--button-outline-danger-focus-text-color); } [nbButton].appearance-outline.status-danger:hover, .appearance-outline.status-danger[nbButtonToggle]:hover { background-color: var(--button-outline-danger-hover-background-color); border-color: var(--button-outline-danger-hover-border-color); color: var(--button-outline-danger-hover-text-color); } [nbButton].appearance-outline.status-danger:active, .appearance-outline.status-danger[nbButtonToggle]:active { background-color: var(--button-outline-danger-active-background-color); border-color: var(--button-outline-danger-active-border-color); color: var(--button-outline-danger-active-text-color); } [nbButton].appearance-outline.status-danger[disabled], .appearance-outline.status-danger[disabled][nbButtonToggle], [nbButton].appearance-outline.status-danger.btn-disabled, .appearance-outline.status-danger.btn-disabled[nbButtonToggle] { background-color: var(--button-outline-danger-disabled-background-color); border-color: var(--button-outline-danger-disabled-border-color); color: var(--button-outline-danger-disabled-text-color); } [nbButton].appearance-outline.status-info, .appearance-outline.status-info[nbButtonToggle] { background-color: var(--button-outline-info-background-color); border-color: var(--button-outline-info-border-color); color: var(--button-outline-info-text-color); } [nbButton].appearance-outline.status-info:focus, .appearance-outline.status-info[nbButtonToggle]:focus { background-color: var(--button-outline-info-focus-background-color); border-color: var(--button-outline-info-focus-border-color); color: var(--button-outline-info-focus-text-color); } [nbButton].appearance-outline.status-info:hover, .appearance-outline.status-info[nbButtonToggle]:hover { background-color: var(--button-outline-info-hover-background-color); border-color: var(--button-outline-info-hover-border-color); color: var(--button-outline-info-hover-text-color); } [nbButton].appearance-outline.status-info:active, .appearance-outline.status-info[nbButtonToggle]:active { background-color: var(--button-outline-info-active-background-color); border-color: var(--button-outline-info-active-border-color); color: var(--button-outline-info-active-text-color); } [nbButton].appearance-outline.status-info[disabled], .appearance-outline.status-info[disabled][nbButtonToggle], [nbButton].appearance-outline.status-info.btn-disabled, .appearance-outline.status-info.btn-disabled[nbButtonToggle] { background-color: var(--button-outline-info-disabled-background-color); border-color: var(--button-outline-info-disabled-border-color); color: var(--button-outline-info-disabled-text-color); } [nbButton].appearance-outline.status-control, .appearance-outline.status-control[nbButtonToggle] { background-color: var(--button-outline-control-background-color); border-color: var(--button-outline-control-border-color); color: var(--button-outline-control-text-color); } [nbButton].appearance-outline.status-control:focus, .appearance-outline.status-control[nbButtonToggle]:focus { background-color: var(--button-outline-control-focus-background-color); border-color: var(--button-outline-control-focus-border-color); color: var(--button-outline-control-focus-text-color); } [nbButton].appearance-outline.status-control:hover, .appearance-outline.status-control[nbButtonToggle]:hover { background-color: var(--button-outline-control-hover-background-color); border-color: var(--button-outline-control-hover-border-color); color: var(--button-outline-control-hover-text-color); } [nbButton].appearance-outline.status-control:active, .appearance-outline.status-control[nbButtonToggle]:active { background-color: var(--button-outline-control-active-background-color); border-color: var(--button-outline-control-active-border-color); color: var(--button-outline-control-active-text-color); } [nbButton].appearance-outline.status-control[disabled], .appearance-outline.status-control[disabled][nbButtonToggle], [nbButton].appearance-outline.status-control.btn-disabled, .appearance-outline.status-control.btn-disabled[nbButtonToggle] { background-color: var(--button-outline-control-disabled-background-color); border-color: var(--button-outline-control-disabled-border-color); color: var(--button-outline-control-disabled-text-color); } [nbButton].appearance-ghost, .appearance-ghost[nbButtonToggle] { background-color: var(--button-ghost-background-color); border-color: var(--button-ghost-border-color); border-style: var(--button-ghost-border-style); border-width: var(--button-ghost-border-width); text-transform: var(--button-ghost-text-transform); } [nbButton].appearance-ghost:focus, .appearance-ghost[nbButtonToggle]:focus { box-shadow: 0 0 0 var(--button-outline-width) var(--button-outline-color); } [nbButton].appearance-ghost:focus:not(:hover):not(:active), .appearance-ghost[nbButtonToggle]:focus:not(:hover):not(:active) { box-shadow: 0 0 0 var(--button-outline-width) var(--button-outline-color), inset var(--button-ghost-focus-inset-shadow-length) var(--button-outline-color); } [nbButton].appearance-ghost.size-tiny, .appearance-ghost.size-tiny[nbButtonToggle] { padding: var(--button-ghost-tiny-padding); } [nbButton].appearance-ghost.size-small, .appearance-ghost.size-small[nbButtonToggle] { padding: var(--button-ghost-small-padding); } [nbButton].appearance-ghost.size-medium, .appearance-ghost.size-medium[nbButtonToggle] { padding: var(--button-ghost-medium-padding); } [nbButton].appearance-ghost.size-large, .appearance-ghost.size-large[nbButtonToggle] { padding: var(--button-ghost-large-padding); } [nbButton].appearance-ghost.size-giant, .appearance-ghost.size-giant[nbButtonToggle] { padding: var(--button-ghost-giant-padding); } [nbButton].appearance-ghost.status-basic, .appearance-ghost.status-basic[nbButtonToggle] { color: var(--button-ghost-basic-text-color); } [nbButton].appearance-ghost.status-basic:focus, .appearance-ghost.status-basic[nbButtonToggle]:focus { background-color: var(--button-ghost-basic-focus-background-color); border-color: var(--button-ghost-basic-focus-border-color); color: var(--button-ghost-basic-focus-text-color); } [nbButton].appearance-ghost.status-basic:hover, .appearance-ghost.status-basic[nbButtonToggle]:hover { background-color: var(--button-ghost-basic-hover-background-color); border-color: var(--button-ghost-basic-hover-border-color); color: var(--button-ghost-basic-hover-text-color); } [nbButton].appearance-ghost.status-basic:active, .appearance-ghost.status-basic[nbButtonToggle]:active { background-color: var(--button-ghost-basic-active-background-color); border-color: var(--button-ghost-basic-active-border-color); color: var(--button-ghost-basic-active-text-color); } [nbButton].appearance-ghost.status-basic[disabled], .appearance-ghost.status-basic[disabled][nbButtonToggle], [nbButton].appearance-ghost.status-basic.btn-disabled, .appearance-ghost.status-basic.btn-disabled[nbButtonToggle] { background-color: var(--button-ghost-basic-disabled-background-color); border-color: var(--button-ghost-basic-disabled-border-color); color: var(--button-ghost-basic-disabled-text-color); } [nbButton].appearance-ghost.status-primary, .appearance-ghost.status-primary[nbButtonToggle] { color: var(--button-ghost-primary-text-color); } [nbButton].appearance-ghost.status-primary:focus, .appearance-ghost.status-primary[nbButtonToggle]:focus { background-color: var(--button-ghost-primary-focus-background-color); border-color: var(--button-ghost-primary-focus-border-color); color: var(--button-ghost-primary-focus-text-color); } [nbButton].appearance-ghost.status-primary:hover, .appearance-ghost.status-primary[nbButtonToggle]:hover { background-color: var(--button-ghost-primary-hover-background-color); border-color: var(--button-ghost-primary-hover-border-color); color: var(--button-ghost-primary-hover-text-color); } [nbButton].appearance-ghost.status-primary:active, .appearance-ghost.status-primary[nbButtonToggle]:active { background-color: var(--button-ghost-primary-active-background-color); border-color: var(--button-ghost-primary-active-border-color); color: var(--button-ghost-primary-active-text-color); } [nbButton].appearance-ghost.status-primary[disabled], .appearance-ghost.status-primary[disabled][nbButtonToggle], [nbButton].appearance-ghost.status-primary.btn-disabled, .appearance-ghost.status-primary.btn-disabled[nbButtonToggle] { background-color: var(--button-ghost-primary-disabled-background-color); border-color: var(--button-ghost-primary-disabled-border-color); color: var(--button-ghost-primary-disabled-text-color); } [nbButton].appearance-ghost.status-success, .appearance-ghost.status-success[nbButtonToggle] { color: var(--button-ghost-success-text-color); } [nbButton].appearance-ghost.status-success:focus, .appearance-ghost.status-success[nbButtonToggle]:focus { background-color: var(--button-ghost-success-focus-background-color); border-color: var(--button-ghost-success-focus-border-color); color: var(--button-ghost-success-focus-text-color); } [nbButton].appearance-ghost.status-success:hover, .appearance-ghost.status-success[nbButtonToggle]:hover { background-color: var(--button-ghost-success-hover-background-color); border-color: var(--button-ghost-success-hover-border-color); color: var(--button-ghost-success-hover-text-color); } [nbButton].appearance-ghost.status-success:active, .appearance-ghost.status-success[nbButtonToggle]:active { background-color: var(--button-ghost-success-active-background-color); border-color: var(--button-ghost-success-active-border-color); color: var(--button-ghost-success-active-text-color); } [nbButton].appearance-ghost.status-success[disabled], .appearance-ghost.status-success[disabled][nbButtonToggle], [nbButton].appearance-ghost.status-success.btn-disabled, .appearance-ghost.status-success.btn-disabled[nbButtonToggle] { background-color: var(--button-ghost-success-disabled-background-color); border-color: var(--button-ghost-success-disabled-border-color); color: var(--button-ghost-success-disabled-text-color); } [nbButton].appearance-ghost.status-warning, .appearance-ghost.status-warning[nbButtonToggle] { color: var(--button-ghost-warning-text-color); } [nbButton].appearance-ghost.status-warning:focus, .appearance-ghost.status-warning[nbButtonToggle]:focus { background-color: var(--button-ghost-warning-focus-background-color); border-color: var(--button-ghost-warning-focus-border-color); color: var(--button-ghost-warning-focus-text-color); } [nbButton].appearance-ghost.status-warning:hover, .appearance-ghost.status-warning[nbButtonToggle]:hover { background-color: var(--button-ghost-warning-hover-background-color); border-color: var(--button-ghost-warning-hover-border-color); color: var(--button-ghost-warning-hover-text-color); } [nbButton].appearance-ghost.status-warning:active, .appearance-ghost.status-warning[nbButtonToggle]:active { background-color: var(--button-ghost-warning-active-background-color); border-color: var(--button-ghost-warning-active-border-color); color: var(--button-ghost-warning-active-text-color); } [nbButton].appearance-ghost.status-warning[disabled], .appearance-ghost.status-warning[disabled][nbButtonToggle], [nbButton].appearance-ghost.status-warning.btn-disabled, .appearance-ghost.status-warning.btn-disabled[nbButtonToggle] { background-color: var(--button-ghost-warning-disabled-background-color); border-color: var(--button-ghost-warning-disabled-border-color); color: var(--button-ghost-warning-disabled-text-color); } [nbButton].appearance-ghost.status-danger, .appearance-ghost.status-danger[nbButtonToggle] { color: var(--button-ghost-danger-text-color); } [nbButton].appearance-ghost.status-danger:focus, .appearance-ghost.status-danger[nbButtonToggle]:focus { background-color: var(--button-ghost-danger-focus-background-color); border-color: var(--button-ghost-danger-focus-border-color); color: var(--button-ghost-danger-focus-text-color); } [nbButton].appearance-ghost.status-danger:hover, .appearance-ghost.status-danger[nbButtonToggle]:hover { background-color: var(--button-ghost-danger-hover-background-color); border-color: var(--button-ghost-danger-hover-border-color); color: var(--button-ghost-danger-hover-text-color); } [nbButton].appearance-ghost.status-danger:active, .appearance-ghost.status-danger[nbButtonToggle]:active { background-color: var(--button-ghost-danger-active-background-color); border-color: var(--button-ghost-danger-active-border-color); color: var(--button-ghost-danger-active-text-color); } [nbButton].appearance-ghost.status-danger[disabled], .appearance-ghost.status-danger[disabled][nbButtonToggle], [nbButton].appearance-ghost.status-danger.btn-disabled, .appearance-ghost.status-danger.btn-disabled[nbButtonToggle] { background-color: var(--button-ghost-danger-disabled-background-color); border-color: var(--button-ghost-danger-disabled-border-color); color: var(--button-ghost-danger-disabled-text-color); } [nbButton].appearance-ghost.status-info, .appearance-ghost.status-info[nbButtonToggle] { color: var(--button-ghost-info-text-color); } [nbButton].appearance-ghost.status-info:focus, .appearance-ghost.status-info[nbButtonToggle]:focus { background-color: var(--button-ghost-info-focus-background-color); border-color: var(--button-ghost-info-focus-border-color); color: var(--button-ghost-info-focus-text-color); } [nbButton].appearance-ghost.status-info:hover, .appearance-ghost.status-info[nbButtonToggle]:hover { background-color: var(--button-ghost-info-hover-background-color); border-color: var(--button-ghost-info-hover-border-color); color: var(--button-ghost-info-hover-text-color); } [nbButton].appearance-ghost.status-info:active, .appearance-ghost.status-info[nbButtonToggle]:active { background-color: var(--button-ghost-info-active-background-color); border-color: var(--button-ghost-info-active-border-color); color: var(--button-ghost-info-active-text-color); } [nbButton].appearance-ghost.status-info[disabled], .appearance-ghost.status-info[disabled][nbButtonToggle], [nbButton].appearance-ghost.status-info.btn-disabled, .appearance-ghost.status-info.btn-disabled[nbButtonToggle] { background-color: var(--button-ghost-info-disabled-background-color); border-color: var(--button-ghost-info-disabled-border-color); color: var(--button-ghost-info-disabled-text-color); } [nbButton].appearance-ghost.status-control, .appearance-ghost.status-control[nbButtonToggle] { color: var(--button-ghost-control-text-color); } [nbButton].appearance-ghost.status-control:focus, .appearance-ghost.status-control[nbButtonToggle]:focus { background-color: var(--button-ghost-control-focus-background-color); border-color: var(--button-ghost-control-focus-border-color); color: var(--button-ghost-control-focus-text-color); } [nbButton].appearance-ghost.status-control:hover, .appearance-ghost.status-control[nbButtonToggle]:hover { background-color: var(--button-ghost-control-hover-background-color); border-color: var(--button-ghost-control-hover-border-color); color: var(--button-ghost-control-hover-text-color); } [nbButton].appearance-ghost.status-control:active, .appearance-ghost.status-control[nbButtonToggle]:active { background-color: var(--button-ghost-control-active-background-color); border-color: var(--button-ghost-control-active-border-color); color: var(--button-ghost-control-active-text-color); } [nbButton].appearance-ghost.status-control[disabled], .appearance-ghost.status-control[disabled][nbButtonToggle], [nbButton].appearance-ghost.status-control.btn-disabled, .appearance-ghost.status-control.btn-disabled[nbButtonToggle] { background-color: var(--button-ghost-control-disabled-background-color); border-color: var(--button-ghost-control-disabled-border-color); color: var(--button-ghost-control-disabled-text-color); } [nbButton].appearance-hero, .appearance-hero[nbButtonToggle] { text-shadow: var(--button-hero-text-shadow); text-transform: var(--button-hero-text-transform); } [nbButton].appearance-hero.size-tiny, .appearance-hero.size-tiny[nbButtonToggle] { padding: var(--button-hero-tiny-padding); } [nbButton].appearance-hero.size-small, .appearance-hero.size-small[nbButtonToggle] { padding: var(--button-hero-small-padding); } [nbButton].appearance-hero.size-medium, .appearance-hero.size-medium[nbButtonToggle] { padding: var(--button-hero-medium-padding); } [nbButton].appearance-hero.size-large, .appearance-hero.size-large[nbButtonToggle] { padding: var(--button-hero-large-padding); } [nbButton].appearance-hero.size-giant, .appearance-hero.size-giant[nbButtonToggle] { padding: var(--button-hero-giant-padding); } [nbButton].appearance-hero.status-basic, .appearance-hero.status-basic[nbButtonToggle] { background-image: linear-gradient(to right, var(--button-hero-basic-left-background-color), var(--button-hero-basic-right-background-color)); border: none; box-shadow: var(--button-hero-bevel-size) var(--button-hero-basic-bevel-color), var(--button-hero-glow-size) var(--button-hero-basic-glow-color), var(--button-hero-shadow); color: var(--button-hero-basic-text-color); } [nbButton].appearance-hero.status-basic:focus, .appearance-hero.status-basic[nbButtonToggle]:focus { background-image: linear-gradient(to right, var(--button-hero-basic-focus-left-background-color), var(--button-hero-basic-focus-right-background-color)); box-shadow: var(--button-hero-bevel-size) var(--button-hero-basic-bevel-color), var(--button-hero-glow-size) var(--button-hero-basic-glow-color), var(--button-hero-shadow), 0 0 0 var(--button-hero-outline-width) var(--button-hero-outline-color); } [nbButton].appearance-hero.status-basic:hover, .appearance-hero.status-basic[nbButtonToggle]:hover { background-image: linear-gradient(to right, var(--button-hero-basic-hover-left-background-color), var(--button-hero-basic-hover-right-background-color)); } [nbButton].appearance-hero.status-basic:active, .appearance-hero.status-basic[nbButtonToggle]:active { background-image: linear-gradient(to right, var(--button-hero-basic-active-left-background-color), var(--button-hero-basic-active-right-background-color)); } [nbButton].appearance-hero.status-basic[disabled], .appearance-hero.status-basic[disabled][nbButtonToggle], [nbButton].appearance-hero.status-basic.btn-disabled, .appearance-hero.status-basic.btn-disabled[nbButtonToggle] { background-color: var(--button-hero-basic-disabled-background-color); background-image: none; color: var(--button-hero-basic-disabled-text-color); } [nbButton].appearance-hero.status-basic.button-pulse, .appearance-hero.status-basic.button-pulse[nbButtonToggle] { animation: button-hero-basic-pulse 0.75s infinite alternate; } @keyframes button-hero-basic-pulse { 0% { box-shadow: none; opacity: 0.3; } 100% { box-shadow: 0 0 1rem 0 var(--button-hero-basic-left-background-color); opacity: 0.8; } } [nbButton].appearance-hero.status-primary, .appearance-hero.status-primary[nbButtonToggle] { background-image: linear-gradient(to right, var(--button-hero-primary-left-background-color), var(--button-hero-primary-right-background-color)); border: none; box-shadow: var(--button-hero-bevel-size) var(--button-hero-primary-bevel-color), var(--button-hero-glow-size) var(--button-hero-primary-glow-color), var(--button-hero-shadow); color: var(--button-hero-primary-text-color); } [nbButton].appearance-hero.status-primary:focus, .appearance-hero.status-primary[nbButtonToggle]:focus { background-image: linear-gradient(to right, var(--button-hero-primary-focus-left-background-color), var(--button-hero-primary-focus-right-background-color)); box-shadow: var(--button-hero-bevel-size) var(--button-hero-primary-bevel-color), var(--button-hero-glow-size) var(--button-hero-primary-glow-color), var(--button-hero-shadow), 0 0 0 var(--button-hero-outline-width) var(--button-hero-outline-color); } [nbButton].appearance-hero.status-primary:hover, .appearance-hero.status-primary[nbButtonToggle]:hover { background-image: linear-gradient(to right, var(--button-hero-primary-hover-left-background-color), var(--button-hero-primary-hover-right-background-color)); } [nbButton].appearance-hero.status-primary:active, .appearance-hero.status-primary[nbButtonToggle]:active { background-image: linear-gradient(to right, var(--button-hero-primary-active-left-background-color), var(--button-hero-primary-active-right-background-color)); } [nbButton].appearance-hero.status-primary[disabled], .appearance-hero.status-primary[disabled][nbButtonToggle], [nbButton].appearance-hero.status-primary.btn-disabled, .appearance-hero.status-primary.btn-disabled[nbButtonToggle] { background-color: var(--button-hero-primary-disabled-background-color); background-image: none; color: var(--button-hero-primary-disabled-text-color); } [nbButton].appearance-hero.status-primary.button-pulse, .appearance-hero.status-primary.button-pulse[nbButtonToggle] { animation: button-hero-primary-pulse 0.75s infinite alternate; } @keyframes button-hero-primary-pulse { 0% { box-shadow: none; opacity: 0.3; } 100% { box-shadow: 0 0 1rem 0 var(--button-hero-primary-left-background-color); opacity: 0.8; } } [nbButton].appearance-hero.status-success, .appearance-hero.status-success[nbButtonToggle] { background-image: linear-gradient(to right, var(--button-hero-success-left-background-color), var(--button-hero-success-right-background-color)); border: none; box-shadow: var(--button-hero-bevel-size) var(--button-hero-success-bevel-color), var(--button-hero-glow-size) var(--button-hero-success-glow-color), var(--button-hero-shadow); color: var(--button-hero-success-text-color); } [nbButton].appearance-hero.status-success:focus, .appearance-hero.status-success[nbButtonToggle]:focus { background-image: linear-gradient(to right, var(--button-hero-success-focus-left-background-color), var(--button-hero-success-focus-right-background-color)); box-shadow: var(--button-hero-bevel-size) var(--button-hero-success-bevel-color), var(--button-hero-glow-size) var(--button-hero-success-glow-color), var(--button-hero-shadow), 0 0 0 var(--button-hero-outline-width) var(--button-hero-outline-color); } [nbButton].appearance-hero.status-success:hover, .appearance-hero.status-success[nbButtonToggle]:hover { background-image: linear-gradient(to right, var(--button-hero-success-hover-left-background-color), var(--button-hero-success-hover-right-background-color)); } [nbButton].appearance-hero.status-success:active, .appearance-hero.status-success[nbButtonToggle]:active { background-image: linear-gradient(to right, var(--button-hero-success-active-left-background-color), var(--button-hero-success-active-right-background-color)); } [nbButton].appearance-hero.status-success[disabled], .appearance-hero.status-success[disabled][nbButtonToggle], [nbButton].appearance-hero.status-success.btn-disabled, .appearance-hero.status-success.btn-disabled[nbButtonToggle] { background-color: var(--button-hero-success-disabled-background-color); background-image: none; color: var(--button-hero-success-disabled-text-color); } [nbButton].appearance-hero.status-success.button-pulse, .appearance-hero.status-success.button-pulse[nbButtonToggle] { animation: button-hero-success-pulse 0.75s infinite alternate; } @keyframes button-hero-success-pulse { 0% { box-shadow: none; opacity: 0.3; } 100% { box-shadow: 0 0 1rem 0 var(--button-hero-success-left-background-color); opacity: 0.8; } } [nbButton].appearance-hero.status-warning, .appearance-hero.status-warning[nbButtonToggle] { background-image: linear-gradient(to right, var(--button-hero-warning-left-background-color), var(--button-hero-warning-right-background-color)); border: none; box-shadow: var(--button-hero-bevel-size) var(--button-hero-warning-bevel-color), var(--button-hero-glow-size) var(--button-hero-warning-glow-color), var(--button-hero-shadow); color: var(--button-hero-warning-text-color); } [nbButton].appearance-hero.status-warning:focus, .appearance-hero.status-warning[nbButtonToggle]:focus { background-image: linear-gradient(to right, var(--button-hero-warning-focus-left-background-color), var(--button-hero-warning-focus-right-background-color)); box-shadow: var(--button-hero-bevel-size) var(--button-hero-warning-bevel-color), var(--button-hero-glow-size) var(--button-hero-warning-glow-color), var(--button-hero-shadow), 0 0 0 var(--button-hero-outline-width) var(--button-hero-outline-color); } [nbButton].appearance-hero.status-warning:hover, .appearance-hero.status-warning[nbButtonToggle]:hover { background-image: linear-gradient(to right, var(--button-hero-warning-hover-left-background-color), var(--button-hero-warning-hover-right-background-color)); } [nbButton].appearance-hero.status-warning:active, .appearance-hero.status-warning[nbButtonToggle]:active { background-image: linear-gradient(to right, var(--button-hero-warning-active-left-background-color), var(--button-hero-warning-active-right-background-color)); } [nbButton].appearance-hero.status-warning[disabled], .appearance-hero.status-warning[disabled][nbButtonToggle], [nbButton].appearance-hero.status-warning.btn-disabled, .appearance-hero.status-warning.btn-disabled[nbButtonToggle] { background-color: var(--button-hero-warning-disabled-background-color); background-image: none; color: var(--button-hero-warning-disabled-text-color); } [nbButton].appearance-hero.status-warning.button-pulse, .appearance-hero.status-warning.button-pulse[nbButtonToggle] { animation: button-hero-warning-pulse 0.75s infinite alternate; } @keyframes button-hero-warning-pulse { 0% { box-shadow: none; opacity: 0.3; } 100% { box-shadow: 0 0 1rem 0 var(--button-hero-warning-left-background-color); opacity: 0.8; } } [nbButton].appearance-hero.status-danger, .appearance-hero.status-danger[nbButtonToggle] { background-image: linear-gradient(to right, var(--button-hero-danger-left-background-color), var(--button-hero-danger-right-background-color)); border: none; box-shadow: var(--button-hero-bevel-size) var(--button-hero-danger-bevel-color), var(--button-hero-glow-size) var(--button-hero-danger-glow-color), var(--button-hero-shadow); color: var(--button-hero-danger-text-color); } [nbButton].appearance-hero.status-danger:focus, .appearance-hero.status-danger[nbButtonToggle]:focus { background-image: linear-gradient(to right, var(--button-hero-danger-focus-left-background-color), var(--button-hero-danger-focus-right-background-color)); box-shadow: var(--button-hero-bevel-size) var(--button-hero-danger-bevel-color), var(--button-hero-glow-size) var(--button-hero-danger-glow-color), var(--button-hero-shadow), 0 0 0 var(--button-hero-outline-width) var(--button-hero-outline-color); } [nbButton].appearance-hero.status-danger:hover, .appearance-hero.status-danger[nbButtonToggle]:hover { background-image: linear-gradient(to right, var(--button-hero-danger-hover-left-background-color), var(--button-hero-danger-hover-right-background-color)); } [nbButton].appearance-hero.status-danger:active, .appearance-hero.status-danger[nbButtonToggle]:active { background-image: linear-gradient(to right, var(--button-hero-danger-active-left-background-color), var(--button-hero-danger-active-right-background-color)); } [nbButton].appearance-hero.status-danger[disabled], .appearance-hero.status-danger[disabled][nbButtonToggle], [nbButton].appearance-hero.status-danger.btn-disabled, .appearance-hero.status-danger.btn-disabled[nbButtonToggle] { background-color: var(--button-hero-danger-disabled-background-color); background-image: none; color: var(--button-hero-danger-disabled-text-color); } [nbButton].appearance-hero.status-danger.button-pulse, .appearance-hero.status-danger.button-pulse[nbButtonToggle] { animation: button-hero-danger-pulse 0.75s infinite alternate; } @keyframes button-hero-danger-pulse { 0% { box-shadow: none; opacity: 0.3; } 100% { box-shadow: 0 0 1rem 0 var(--button-hero-danger-left-background-color); opacity: 0.8; } } [nbButton].appearance-hero.status-info, .appearance-hero.status-info[nbButtonToggle] { background-image: linear-gradient(to right, var(--button-hero-info-left-background-color), var(--button-hero-info-right-background-color)); border: none; box-shadow: var(--button-hero-bevel-size) var(--button-hero-info-bevel-color), var(--button-hero-glow-size) var(--button-hero-info-glow-color), var(--button-hero-shadow); color: var(--button-hero-info-text-color); } [nbButton].appearance-hero.status-info:focus, .appearance-hero.status-info[nbButtonToggle]:focus { background-image: linear-gradient(to right, var(--button-hero-info-focus-left-background-color), var(--button-hero-info-focus-right-background-color)); box-shadow: var(--button-hero-bevel-size) var(--button-hero-info-bevel-color), var(--button-hero-glow-size) var(--button-hero-info-glow-color), var(--button-hero-shadow), 0 0 0 var(--button-hero-outline-width) var(--button-hero-outline-color); } [nbButton].appearance-hero.status-info:hover, .appearance-hero.status-info[nbButtonToggle]:hover { background-image: linear-gradient(to right, var(--button-hero-info-hover-left-background-color), var(--button-hero-info-hover-right-background-color)); } [nbButton].appearance-hero.status-info:active, .appearance-hero.status-info[nbButtonToggle]:active { background-image: linear-gradient(to right, var(--button-hero-info-active-left-background-color), var(--button-hero-info-active-right-background-color)); } [nbButton].appearance-hero.status-info[disabled], .appearance-hero.status-info[disabled][nbButtonToggle], [nbButton].appearance-hero.status-info.btn-disabled, .appearance-hero.status-info.btn-disabled[nbButtonToggle] { background-color: var(--button-hero-info-disabled-background-color); background-image: none; color: var(--button-hero-info-disabled-text-color); } [nbButton].appearance-hero.status-info.button-pulse, .appearance-hero.status-info.button-pulse[nbButtonToggle] { animation: button-hero-info-pulse 0.75s infinite alternate; } @keyframes button-hero-info-pulse { 0% { box-shadow: none; opacity: 0.3; } 100% { box-shadow: 0 0 1rem 0 var(--button-hero-info-left-background-color); opacity: 0.8; } } [nbButton].appearance-hero.status-control, .appearance-hero.status-control[nbButtonToggle] { background-image: linear-gradient(to right, var(--button-hero-control-left-background-color), var(--button-hero-control-right-background-color)); border: none; box-shadow: var(--button-hero-bevel-size) var(--button-hero-control-bevel-color), var(--button-hero-glow-size) var(--button-hero-control-glow-color), var(--button-hero-shadow); color: var(--button-hero-control-text-color); } [nbButton].appearance-hero.status-control:focus, .appearance-hero.status-control[nbButtonToggle]:focus { background-image: linear-gradient(to right, var(--button-hero-control-focus-left-background-color), var(--button-hero-control-focus-right-background-color)); box-shadow: var(--button-hero-bevel-size) var(--button-hero-control-bevel-color), var(--button-hero-glow-size) var(--button-hero-control-glow-color), var(--button-hero-shadow), 0 0 0 var(--button-hero-outline-width) var(--button-hero-outline-color); } [nbButton].appearance-hero.status-control:hover, .appearance-hero.status-control[nbButtonToggle]:hover { background-image: linear-gradient(to right, var(--button-hero-control-hover-left-background-color), var(--button-hero-control-hover-right-background-color)); } [nbButton].appearance-hero.status-control:active, .appearance-hero.status-control[nbButtonToggle]:active { background-image: linear-gradient(to right, var(--button-hero-control-active-left-background-color), var(--button-hero-control-active-right-background-color)); } [nbButton].appearance-hero.status-control[disabled], .appearance-hero.status-control[disabled][nbButtonToggle], [nbButton].appearance-hero.status-control.btn-disabled, .appearance-hero.status-control.btn-disabled[nbButtonToggle] { background-color: var(--button-hero-control-disabled-background-color); background-image: none; color: var(--button-hero-control-disabled-text-color); } [nbButton].appearance-hero.status-control.button-pulse, .appearance-hero.status-control.button-pulse[nbButtonToggle] { animation: button-hero-control-pulse 0.75s infinite alternate; } @keyframes button-hero-control-pulse { 0% { box-shadow: none; opacity: 0.3; } 100% { box-shadow: 0 0 1rem 0 var(--button-hero-control-left-background-color); opacity: 0.8; } } nb-button-group { display: inline-flex; } [dir=ltr] nb-button-group [nbButton]:first-child:not(:last-child), [dir=ltr] nb-button-group [nbButtonToggle]:first-child:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } [dir=ltr] nb-button-group [nbButton]:last-child:not(:first-child), [dir=ltr] nb-button-group [nbButtonToggle]:last-child:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } [dir=rtl] nb-button-group [nbButton]:first-child:not(:last-child), [dir=rtl] nb-button-group [nbButtonToggle]:first-child:not(:last-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } [dir=rtl] nb-button-group [nbButton]:last-child:not(:first-child), [dir=rtl] nb-button-group [nbButtonToggle]:last-child:not(:first-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } nb-button-group [nbButton]:not(:first-child):not(:last-child), nb-button-group [nbButtonToggle]:not(:first-child):not(:last-child) { border-radius: 0; } nb-button-group [nbButton].appearance-filled, nb-button-group [nbButton].appearance-ghost, nb-button-group [nbButtonToggle].appearance-filled, nb-button-group [nbButtonToggle].appearance-ghost { border-color: transparent; } [dir=ltr] nb-button-group [nbButton].appearance-filled.status-basic:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=ltr] nb-button-group [nbButtonToggle].appearance-filled.status-basic:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-left-color: var(--button-group-filled-basic-divider-color); } [dir=rtl] nb-button-group [nbButton].appearance-filled.status-basic:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=rtl] nb-button-group [nbButtonToggle].appearance-filled.status-basic:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-right-color: var(--button-group-filled-basic-divider-color); } nb-button-group [nbButton].appearance-filled.status-basic, nb-button-group [nbButtonToggle].appearance-filled.status-basic { color: var(--button-group-filled-button-basic-text-color); } [dir=ltr] nb-button-group [nbButton].appearance-filled.status-primary:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=ltr] nb-button-group [nbButtonToggle].appearance-filled.status-primary:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-left-color: var(--button-group-filled-primary-divider-color); } [dir=rtl] nb-button-group [nbButton].appearance-filled.status-primary:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=rtl] nb-button-group [nbButtonToggle].appearance-filled.status-primary:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-right-color: var(--button-group-filled-primary-divider-color); } nb-button-group [nbButton].appearance-filled.status-primary, nb-button-group [nbButtonToggle].appearance-filled.status-primary { color: var(--button-group-filled-button-primary-text-color); } [dir=ltr] nb-button-group [nbButton].appearance-filled.status-success:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=ltr] nb-button-group [nbButtonToggle].appearance-filled.status-success:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-left-color: var(--button-group-filled-success-divider-color); } [dir=rtl] nb-button-group [nbButton].appearance-filled.status-success:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=rtl] nb-button-group [nbButtonToggle].appearance-filled.status-success:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-right-color: var(--button-group-filled-success-divider-color); } nb-button-group [nbButton].appearance-filled.status-success, nb-button-group [nbButtonToggle].appearance-filled.status-success { color: var(--button-group-filled-button-success-text-color); } [dir=ltr] nb-button-group [nbButton].appearance-filled.status-warning:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=ltr] nb-button-group [nbButtonToggle].appearance-filled.status-warning:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-left-color: var(--button-group-filled-warning-divider-color); } [dir=rtl] nb-button-group [nbButton].appearance-filled.status-warning:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=rtl] nb-button-group [nbButtonToggle].appearance-filled.status-warning:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-right-color: var(--button-group-filled-warning-divider-color); } nb-button-group [nbButton].appearance-filled.status-warning, nb-button-group [nbButtonToggle].appearance-filled.status-warning { color: var(--button-group-filled-button-warning-text-color); } [dir=ltr] nb-button-group [nbButton].appearance-filled.status-danger:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=ltr] nb-button-group [nbButtonToggle].appearance-filled.status-danger:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-left-color: var(--button-group-filled-danger-divider-color); } [dir=rtl] nb-button-group [nbButton].appearance-filled.status-danger:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=rtl] nb-button-group [nbButtonToggle].appearance-filled.status-danger:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-right-color: var(--button-group-filled-danger-divider-color); } nb-button-group [nbButton].appearance-filled.status-danger, nb-button-group [nbButtonToggle].appearance-filled.status-danger { color: var(--button-group-filled-button-danger-text-color); } [dir=ltr] nb-button-group [nbButton].appearance-filled.status-info:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=ltr] nb-button-group [nbButtonToggle].appearance-filled.status-info:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-left-color: var(--button-group-filled-info-divider-color); } [dir=rtl] nb-button-group [nbButton].appearance-filled.status-info:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=rtl] nb-button-group [nbButtonToggle].appearance-filled.status-info:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-right-color: var(--button-group-filled-info-divider-color); } nb-button-group [nbButton].appearance-filled.status-info, nb-button-group [nbButtonToggle].appearance-filled.status-info { color: var(--button-group-filled-button-info-text-color); } [dir=ltr] nb-button-group [nbButton].appearance-filled.status-control:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=ltr] nb-button-group [nbButtonToggle].appearance-filled.status-control:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-left-color: var(--button-group-filled-control-divider-color); } [dir=rtl] nb-button-group [nbButton].appearance-filled.status-control:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=rtl] nb-button-group [nbButtonToggle].appearance-filled.status-control:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-right-color: var(--button-group-filled-control-divider-color); } nb-button-group [nbButton].appearance-filled.status-control, nb-button-group [nbButtonToggle].appearance-filled.status-control { color: var(--button-group-filled-button-control-text-color); } [dir=ltr] nb-button-group [nbButton].appearance-ghost:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=ltr] nb-button-group [nbButtonToggle].appearance-ghost:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-left-color: var(--button-group-ghost-divider-color); } [dir=rtl] nb-button-group [nbButton].appearance-ghost:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]), [dir=rtl] nb-button-group [nbButtonToggle].appearance-ghost:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]) { border-right-color: var(--button-group-ghost-divider-color); } nb-list-item { border-bottom: var(--list-item-divider-width) var(--list-item-divider-style) var(--list-item-divider-color); color: var(--list-item-text-color); font-family: var(--list-item-font-family); font-size: var(--list-item-font-size); font-weight: var(--list-item-font-weight); line-height: var(--list-item-line-height); padding: var(--list-item-padding); } nb-list-item:first-child { border-top: var(--list-item-divider-width) var(--list-item-divider-style) var(--list-item-divider-color); } [nbInput] { border-style: var(--input-border-style); border-width: var(--input-border-width); font-family: var(--input-text-font-family); -webkit-appearance: none; -moz-appearance: none; appearance: none; } [nbInput].nb-transition { transition-duration: 0.15s; transition-property: border, background-color, color, box-shadow; transition-timing-function: ease-in; } [nbInput]::-moz-placeholder { font-family: var(--input-placeholder-text-font-family); text-overflow: ellipsis; } [nbInput]::placeholder { font-family: var(--input-placeholder-text-font-family); text-overflow: ellipsis; } [nbInput]:focus { outline: none; } [nbInput].input-full-width { width: 100%; } [nbInput].status-basic { background-color: var(--input-basic-background-color); border-color: var(--input-basic-border-color); color: var(--input-basic-text-color); } [nbInput].status-basic::-moz-placeholder { color: var(--input-basic-placeholder-text-color); } [nbInput].status-basic::placeholder { color: var(--input-basic-placeholder-text-color); } [nbInput].status-basic:focus { background-color: var(--input-basic-focus-background-color); border-color: var(--input-basic-focus-border-color); } [nbInput].status-basic:hover { background-color: var(--input-basic-hover-background-color); border-color: var(--input-basic-hover-border-color); } [nbInput].status-basic:focus:hover { background-color: var(--input-basic-focus-and-hover-background-color); border-color: var(--input-basic-focus-and-hover-border-color); } [nbInput].status-basic:disabled { background-color: var(--input-basic-disabled-background-color); border-color: var(--input-basic-disabled-border-color); color: var(--input-basic-disabled-text-color); } [nbInput].status-basic:disabled::-moz-placeholder { color: var(--input-basic-disabled-placeholder-text-color); } [nbInput].status-basic:disabled::placeholder { color: var(--input-basic-disabled-placeholder-text-color); } [nbInput].status-primary { background-color: var(--input-primary-background-color); border-color: var(--input-primary-border-color); color: var(--input-primary-text-color); } [nbInput].status-primary::-moz-placeholder { color: var(--input-primary-placeholder-text-color); } [nbInput].status-primary::placeholder { color: var(--input-primary-placeholder-text-color); } [nbInput].status-primary:focus { background-color: var(--input-primary-focus-background-color); border-color: var(--input-primary-focus-border-color); } [nbInput].status-primary:hover { background-color: var(--input-primary-hover-background-color); border-color: var(--input-primary-hover-border-color); } [nbInput].status-primary:focus:hover { background-color: var(--input-primary-focus-and-hover-background-color); border-color: var(--input-primary-focus-and-hover-border-color); } [nbInput].status-primary:disabled { background-color: var(--input-primary-disabled-background-color); border-color: var(--input-primary-disabled-border-color); color: var(--input-primary-disabled-text-color); } [nbInput].status-primary:disabled::-moz-placeholder { color: var(--input-primary-disabled-placeholder-text-color); } [nbInput].status-primary:disabled::placeholder { color: var(--input-primary-disabled-placeholder-text-color); } [nbInput].status-success { background-color: var(--input-success-background-color); border-color: var(--input-success-border-color); color: var(--input-success-text-color); } [nbInput].status-success::-moz-placeholder { color: var(--input-success-placeholder-text-color); } [nbInput].status-success::placeholder { color: var(--input-success-placeholder-text-color); } [nbInput].status-success:focus { background-color: var(--input-success-focus-background-color); border-color: var(--input-success-focus-border-color); } [nbInput].status-success:hover { background-color: var(--input-success-hover-background-color); border-color: var(--input-success-hover-border-color); } [nbInput].status-success:focus:hover { background-color: var(--input-success-focus-and-hover-background-color); border-color: var(--input-success-focus-and-hover-border-color); } [nbInput].status-success:disabled { background-color: var(--input-success-disabled-background-color); border-color: var(--input-success-disabled-border-color); color: var(--input-success-disabled-text-color); } [nbInput].status-success:disabled::-moz-placeholder { color: var(--input-success-disabled-placeholder-text-color); } [nbInput].status-success:disabled::placeholder { color: var(--input-success-disabled-placeholder-text-color); } [nbInput].status-warning { background-color: var(--input-warning-background-color); border-color: var(--input-warning-border-color); color: var(--input-warning-text-color); } [nbInput].status-warning::-moz-placeholder { color: var(--input-warning-placeholder-text-color); } [nbInput].status-warning::placeholder { color: var(--input-warning-placeholder-text-color); } [nbInput].status-warning:focus { background-color: var(--input-warning-focus-background-color); border-color: var(--input-warning-focus-border-color); } [nbInput].status-warning:hover { background-color: var(--input-warning-hover-background-color); border-color: var(--input-warning-hover-border-color); } [nbInput].status-warning:focus:hover { background-color: var(--input-warning-focus-and-hover-background-color); border-color: var(--input-warning-focus-and-hover-border-color); } [nbInput].status-warning:disabled { background-color: var(--input-warning-disabled-background-color); border-color: var(--input-warning-disabled-border-color); color: var(--input-warning-disabled-text-color); } [nbInput].status-warning:disabled::-moz-placeholder { color: var(--input-warning-disabled-placeholder-text-color); } [nbInput].status-warning:disabled::placeholder { color: var(--input-warning-disabled-placeholder-text-color); } [nbInput].status-danger { background-color: var(--input-danger-background-color); border-color: var(--input-danger-border-color); color: var(--input-danger-text-color); } [nbInput].status-danger::-moz-placeholder { color: var(--input-danger-placeholder-text-color); } [nbInput].status-danger::placeholder { color: var(--input-danger-placeholder-text-color); } [nbInput].status-danger:focus { background-color: var(--input-danger-focus-background-color); border-color: var(--input-danger-focus-border-color); } [nbInput].status-danger:hover { background-color: var(--input-danger-hover-background-color); border-color: var(--input-danger-hover-border-color); } [nbInput].status-danger:focus:hover { background-color: var(--input-danger-focus-and-hover-background-color); border-color: var(--input-danger-focus-and-hover-border-color); } [nbInput].status-danger:disabled { background-color: var(--input-danger-disabled-background-color); border-color: var(--input-danger-disabled-border-color); color: var(--input-danger-disabled-text-color); } [nbInput].status-danger:disabled::-moz-placeholder { color: var(--input-danger-disabled-placeholder-text-color); } [nbInput].status-danger:disabled::placeholder { color: var(--input-danger-disabled-placeholder-text-color); } [nbInput].status-info { background-color: var(--input-info-background-color); border-color: var(--input-info-border-color); color: var(--input-info-text-color); } [nbInput].status-info::-moz-placeholder { color: var(--input-info-placeholder-text-color); } [nbInput].status-info::placeholder { color: var(--input-info-placeholder-text-color); } [nbInput].status-info:focus { background-color: var(--input-info-focus-background-color); border-color: var(--input-info-focus-border-color); } [nbInput].status-info:hover { background-color: var(--input-info-hover-background-color); border-color: var(--input-info-hover-border-color); } [nbInput].status-info:focus:hover { background-color: var(--input-info-focus-and-hover-background-color); border-color: var(--input-info-focus-and-hover-border-color); } [nbInput].status-info:disabled { background-color: var(--input-info-disabled-background-color); border-color: var(--input-info-disabled-border-color); color: var(--input-info-disabled-text-color); } [nbInput].status-info:disabled::-moz-placeholder { color: var(--input-info-disabled-placeholder-text-color); } [nbInput].status-info:disabled::placeholder { color: var(--input-info-disabled-placeholder-text-color); } [nbInput].status-control { background-color: var(--input-control-background-color); border-color: var(--input-control-border-color); color: var(--input-control-text-color); } [nbInput].status-control::-moz-placeholder { color: var(--input-control-placeholder-text-color); } [nbInput].status-control::placeholder { color: var(--input-control-placeholder-text-color); } [nbInput].status-control:focus { background-color: var(--input-control-focus-background-color); border-color: var(--input-control-focus-border-color); } [nbInput].status-control:hover { background-color: var(--input-control-hover-background-color); border-color: var(--input-control-hover-border-color); } [nbInput].status-control:focus:hover { background-color: var(--input-control-focus-and-hover-background-color); border-color: var(--input-control-focus-and-hover-border-color); } [nbInput].status-control:disabled { background-color: var(--input-control-disabled-background-color); border-color: var(--input-control-disabled-border-color); color: var(--input-control-disabled-text-color); } [nbInput].status-control:disabled::-moz-placeholder { color: var(--input-control-disabled-placeholder-text-color); } [nbInput].status-control:disabled::placeholder { color: var(--input-control-disabled-placeholder-text-color); } [nbInput].size-tiny { font-size: var(--input-tiny-text-font-size); font-weight: var(--input-tiny-text-font-weight); line-height: var(--input-tiny-text-line-height); padding: var(--input-tiny-padding); } [nbInput].size-tiny:not(.input-full-width) { max-width: var(--input-tiny-max-width); } [nbInput].size-tiny::-moz-placeholder { font-size: var(--input-tiny-placeholder-text-font-size); font-weight: var(--input-tiny-placeholder-text-font-weight); line-height: var(--input-tiny-placeholder-text-line-height); } [nbInput].size-tiny::placeholder { font-size: var(--input-tiny-placeholder-text-font-size); font-weight: var(--input-tiny-placeholder-text-font-weight); line-height: var(--input-tiny-placeholder-text-line-height); } [nbInput].size-small { font-size: var(--input-small-text-font-size); font-weight: var(--input-small-text-font-weight); line-height: var(--input-small-text-line-height); padding: var(--input-small-padding); } [nbInput].size-small:not(.input-full-width) { max-width: var(--input-small-max-width); } [nbInput].size-small::-moz-placeholder { font-size: var(--input-small-placeholder-text-font-size); font-weight: var(--input-small-placeholder-text-font-weight); line-height: var(--input-small-placeholder-text-line-height); } [nbInput].size-small::placeholder { font-size: var(--input-small-placeholder-text-font-size); font-weight: var(--input-small-placeholder-text-font-weight); line-height: var(--input-small-placeholder-text-line-height); } [nbInput].size-medium { font-size: var(--input-medium-text-font-size); font-weight: var(--input-medium-text-font-weight); line-height: var(--input-medium-text-line-height); padding: var(--input-medium-padding); } [nbInput].size-medium:not(.input-full-width) { max-width: var(--input-medium-max-width); } [nbInput].size-medium::-moz-placeholder { font-size: var(--input-medium-placeholder-text-font-size); font-weight: var(--input-medium-placeholder-text-font-weight); line-height: var(--input-medium-placeholder-text-line-height); } [nbInput].size-medium::placeholder { font-size: var(--input-medium-placeholder-text-font-size); font-weight: var(--input-medium-placeholder-text-font-weight); line-height: var(--input-medium-placeholder-text-line-height); } [nbInput].size-large { font-size: var(--input-large-text-font-size); font-weight: var(--input-large-text-font-weight); line-height: var(--input-large-text-line-height); padding: var(--input-large-padding); } [nbInput].size-large:not(.input-full-width) { max-width: var(--input-large-max-width); } [nbInput].size-large::-moz-placeholder { font-size: var(--input-large-placeholder-text-font-size); font-weight: var(--input-large-placeholder-text-font-weight); line-height: var(--input-large-placeholder-text-line-height); } [nbInput].size-large::placeholder { font-size: var(--input-large-placeholder-text-font-size); font-weight: var(--input-large-placeholder-text-font-weight); line-height: var(--input-large-placeholder-text-line-height); } [nbInput].size-giant { font-size: var(--input-giant-text-font-size); font-weight: var(--input-giant-text-font-weight); line-height: var(--input-giant-text-line-height); padding: var(--input-giant-padding); } [nbInput].size-giant:not(.input-full-width) { max-width: var(--input-giant-max-width); } [nbInput].size-giant::-moz-placeholder { font-size: var(--input-giant-placeholder-text-font-size); font-weight: var(--input-giant-placeholder-text-font-weight); line-height: var(--input-giant-placeholder-text-line-height); } [nbInput].size-giant::placeholder { font-size: var(--input-giant-placeholder-text-font-size); font-weight: var(--input-giant-placeholder-text-font-weight); line-height: var(--input-giant-placeholder-text-line-height); } [nbInput].shape-rectangle { border-radius: var(--input-rectangle-border-radius); } [nbInput].shape-semi-round { border-radius: var(--input-semi-round-border-radius); } [nbInput].shape-round { border-radius: var(--input-round-border-radius); } nb-form-field [nbInput] { width: 100%; } [dir=ltr] .nb-form-field-control-with-prefix [nbInput].size-tiny { padding-left: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-prefix [nbInput].size-tiny { padding-right: var(--form-field-addon-tiny-width); } [dir=ltr] .nb-form-field-control-with-suffix [nbInput].size-tiny { padding-right: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-suffix [nbInput].size-tiny { padding-left: var(--form-field-addon-tiny-width); } [dir=ltr] .nb-form-field-control-with-prefix [nbInput].size-small { padding-left: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-prefix [nbInput].size-small { padding-right: var(--form-field-addon-small-width); } [dir=ltr] .nb-form-field-control-with-suffix [nbInput].size-small { padding-right: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-suffix [nbInput].size-small { padding-left: var(--form-field-addon-small-width); } [dir=ltr] .nb-form-field-control-with-prefix [nbInput].size-medium { padding-left: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-prefix [nbInput].size-medium { padding-right: var(--form-field-addon-medium-width); } [dir=ltr] .nb-form-field-control-with-suffix [nbInput].size-medium { padding-right: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-suffix [nbInput].size-medium { padding-left: var(--form-field-addon-medium-width); } [dir=ltr] .nb-form-field-control-with-prefix [nbInput].size-large { padding-left: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-prefix [nbInput].size-large { padding-right: var(--form-field-addon-large-width); } [dir=ltr] .nb-form-field-control-with-suffix [nbInput].size-large { padding-right: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-suffix [nbInput].size-large { padding-left: var(--form-field-addon-large-width); } [dir=ltr] .nb-form-field-control-with-prefix [nbInput].size-giant { padding-left: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-prefix [nbInput].size-giant { padding-right: var(--form-field-addon-giant-width); } [dir=ltr] .nb-form-field-control-with-suffix [nbInput].size-giant { padding-right: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-suffix [nbInput].size-giant { padding-left: var(--form-field-addon-giant-width); } .overlay-backdrop { background: var(--overlay-backdrop-background-color); } .cdk-overlay-container { z-index: 1040; } nb-popover { border: var(--popover-border-width) solid var(--popover-border-color); border-radius: var(--popover-border-radius); background: var(--popover-background-color); box-shadow: var(--popover-shadow); color: var(--popover-text-color); } nb-popover .primitive-overlay { font-family: var(--popover-text-font-family); font-size: var(--popover-text-font-size); font-weight: var(--popover-text-font-weight); line-height: var(--popover-text-line-height); padding: var(--popover-padding); } nb-popover .arrow { border-left: var(--popover-arrow-size) solid transparent; border-right: var(--popover-arrow-size) solid transparent; border-bottom: var(--popover-arrow-size) solid var(--popover-border-color); } nb-popover .arrow::after { position: absolute; content: " "; width: 0; height: 0; top: 3px; left: calc(50% - var(--popover-arrow-size)); border-left: var(--popover-arrow-size) solid transparent; border-right: var(--popover-arrow-size) solid transparent; border-bottom: var(--popover-arrow-size) solid var(--popover-background-color); -webkit-clip-path: inset(0 0 2px); clip-path: inset(0 0 2px); } nb-popover.nb-overlay-bottom .arrow { top: calc(-1 * var(--popover-arrow-size) + 1px); left: calc(50% - var(--popover-arrow-size)); } nb-popover.nb-overlay-bottom-start .arrow { top: calc(-1 * var(--popover-arrow-size) + 1px); } [dir=ltr] nb-popover.nb-overlay-bottom-start .arrow { right: var(--popover-arrow-size); } [dir=rtl] nb-popover.nb-overlay-bottom-start .arrow { left: var(--popover-arrow-size); } nb-popover.nb-overlay-bottom-end .arrow { top: calc(-1 * var(--popover-arrow-size) + 1px); } [dir=ltr] nb-popover.nb-overlay-bottom-end .arrow { left: var(--popover-arrow-size); } [dir=rtl] nb-popover.nb-overlay-bottom-end .arrow { right: var(--popover-arrow-size); } nb-popover.nb-overlay-left .arrow { right: calc(-1 * var(--popover-arrow-size) - var(--popover-arrow-size) / 2 + 2px); top: calc(50% - var(--popover-arrow-size) * 0.5); transform: rotate(90deg); } nb-popover.nb-overlay-start-top .arrow { right: calc(-1 * var(--popover-arrow-size) - var(--popover-arrow-size) / 2 + 2px); bottom: var(--popover-arrow-size); transform: rotate(90deg); } nb-popover.nb-overlay-start-bottom .arrow { right: calc(-1 * var(--popover-arrow-size) - var(--popover-arrow-size) / 2 + 2px); top: var(--popover-arrow-size); transform: rotate(90deg); } nb-popover.nb-overlay-top .arrow { bottom: calc(-1 * var(--popover-arrow-size) + 1px); left: calc(50% - var(--popover-arrow-size)); transform: rotate(180deg); } nb-popover.nb-overlay-top-start .arrow { bottom: calc(-1 * var(--popover-arrow-size) + 1px); transform: rotate(180deg); } [dir=ltr] nb-popover.nb-overlay-top-start .arrow { right: var(--popover-arrow-size); } [dir=rtl] nb-popover.nb-overlay-top-start .arrow { left: var(--popover-arrow-size); } nb-popover.nb-overlay-top-end .arrow { bottom: calc(-1 * var(--popover-arrow-size) + 1px); transform: rotate(180deg); } [dir=ltr] nb-popover.nb-overlay-top-end .arrow { left: var(--popover-arrow-size); } [dir=rtl] nb-popover.nb-overlay-top-end .arrow { right: var(--popover-arrow-size); } nb-popover.nb-overlay-right .arrow { left: calc(-1 * var(--popover-arrow-size) - var(--popover-arrow-size) / 2 + 2px); top: calc(50% - var(--popover-arrow-size) * 0.5); transform: rotate(270deg); } nb-popover.nb-overlay-end-top .arrow { left: calc(-1 * var(--popover-arrow-size) - var(--popover-arrow-size) / 2 + 2px); bottom: var(--popover-arrow-size); transform: rotate(270deg); } nb-popover.nb-overlay-end-bottom .arrow { left: calc(-1 * var(--popover-arrow-size) - var(--popover-arrow-size) / 2 + 2px); top: var(--popover-arrow-size); transform: rotate(270deg); } .context-menu-host { /* Fixes click not being bubbled to the body in Safari. https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html */ cursor: pointer; } nb-context-menu { background-color: var(--context-menu-background-color); border-color: var(--context-menu-border-color); border-style: var(--context-menu-border-style); border-width: var(--context-menu-border-width); border-radius: var(--context-menu-border-radius); box-shadow: var(--context-menu-shadow); min-width: var(--context-menu-min-width); max-width: var(--context-menu-max-width); } nb-context-menu nb-menu { border-radius: var(--context-menu-border-radius); overflow: hidden; text-align: var(--context-menu-text-align); } nb-context-menu nb-menu nb-icon.expand-state svg { pointer-events: none; } nb-select .select-button { min-width: var(--select-min-width); cursor: var(--select-cursor); font-family: var(--select-text-font-family); } nb-select .select-button.placeholder { font-family: var(--select-placeholder-text-font-family); } nb-select .select-button:focus { outline: none; } nb-select .select-button[disabled] { cursor: var(--select-disabled-cursor); } nb-select.size-tiny .select-button { font-size: var(--select-tiny-text-font-size); font-weight: var(--select-tiny-text-font-weight); line-height: var(--select-tiny-text-line-height); } nb-select.size-tiny .select-button.placeholder { font-size: var(--select-tiny-placeholder-text-font-size); font-weight: var(--select-tiny-placeholder-text-font-weight); } nb-select.size-tiny .select-button.empty::before { content: " "; display: block; height: var(--select-tiny-text-line-height); } nb-select.size-tiny:not(.full-width) { max-width: var(--select-tiny-max-width); } nb-select.size-small .select-button { font-size: var(--select-small-text-font-size); font-weight: var(--select-small-text-font-weight); line-height: var(--select-small-text-line-height); } nb-select.size-small .select-button.placeholder { font-size: var(--select-small-placeholder-text-font-size); font-weight: var(--select-small-placeholder-text-font-weight); } nb-select.size-small .select-button.empty::before { content: " "; display: block; height: var(--select-small-text-line-height); } nb-select.size-small:not(.full-width) { max-width: var(--select-small-max-width); } nb-select.size-medium .select-button { font-size: var(--select-medium-text-font-size); font-weight: var(--select-medium-text-font-weight); line-height: var(--select-medium-text-line-height); } nb-select.size-medium .select-button.placeholder { font-size: var(--select-medium-placeholder-text-font-size); font-weight: var(--select-medium-placeholder-text-font-weight); } nb-select.size-medium .select-button.empty::before { content: " "; display: block; height: var(--select-medium-text-line-height); } nb-select.size-medium:not(.full-width) { max-width: var(--select-medium-max-width); } nb-select.size-large .select-button { font-size: var(--select-large-text-font-size); font-weight: var(--select-large-text-font-weight); line-height: var(--select-large-text-line-height); } nb-select.size-large .select-button.placeholder { font-size: var(--select-large-placeholder-text-font-size); font-weight: var(--select-large-placeholder-text-font-weight); } nb-select.size-large .select-button.empty::before { content: " "; display: block; height: var(--select-large-text-line-height); } nb-select.size-large:not(.full-width) { max-width: var(--select-large-max-width); } nb-select.size-giant .select-button { font-size: var(--select-giant-text-font-size); font-weight: var(--select-giant-text-font-weight); line-height: var(--select-giant-text-line-height); } nb-select.size-giant .select-button.placeholder { font-size: var(--select-giant-placeholder-text-font-size); font-weight: var(--select-giant-placeholder-text-font-weight); } nb-select.size-giant .select-button.empty::before { content: " "; display: block; height: var(--select-giant-text-line-height); } nb-select.size-giant:not(.full-width) { max-width: var(--select-giant-max-width); } nb-select.shape-rectangle .select-button { border-radius: var(--select-rectangle-border-radius); } nb-select.shape-semi-round .select-button { border-radius: var(--select-semi-round-border-radius); } nb-select.shape-round .select-button { border-radius: var(--select-round-border-radius); } nb-select.appearance-outline .select-button { border-style: var(--select-outline-border-style); border-width: var(--select-outline-border-width); } nb-select.appearance-outline .select-button.top { border-top-style: var(--select-outline-adjacent-border-style); border-top-width: var(--select-outline-adjacent-border-width); } nb-select.appearance-outline .select-button.bottom { border-bottom-style: var(--select-outline-adjacent-border-style); border-bottom-width: var(--select-outline-adjacent-border-width); } nb-select.appearance-outline.status-basic .select-button { background-color: var(--select-outline-basic-background-color); border-color: var(--select-outline-basic-border-color); color: var(--select-outline-basic-text-color); } nb-select.appearance-outline.status-basic .select-button.placeholder { color: var(--select-outline-basic-placeholder-text-color); } nb-select.appearance-outline.status-basic .select-button nb-icon { color: var(--select-outline-basic-icon-color); } nb-select.appearance-outline.status-basic .select-button:focus { background-color: var(--select-outline-basic-focus-background-color); border-color: var(--select-outline-basic-focus-border-color); } nb-select.appearance-outline.status-basic .select-button:hover { background-color: var(--select-outline-basic-hover-background-color); border-color: var(--select-outline-basic-hover-border-color); } nb-select.appearance-outline.status-basic .select-button:focus:hover { background-color: var(--select-outline-basic-focus-and-hover-background-color); border-color: var(--select-outline-basic-focus-and-hover-border-color); } nb-select.appearance-outline.status-basic .select-button[disabled] { color: var(--select-outline-basic-disabled-text-color); background-color: var(--select-outline-basic-disabled-background-color); border-color: var(--select-outline-basic-disabled-border-color); } nb-select.appearance-outline.status-basic .select-button[disabled] nb-icon { color: var(--select-outline-basic-disabled-icon-color); } nb-select.appearance-outline.status-basic .select-button.bottom, nb-select.appearance-outline.status-basic .select-button.top { border-color: var(--select-outline-basic-open-border-color); } nb-select.appearance-outline.status-basic .select-button.top { border-top-color: var(--select-outline-basic-adjacent-border-color); } nb-select.appearance-outline.status-basic .select-button.bottom { border-bottom-color: var(--select-outline-basic-adjacent-border-color); } nb-select.appearance-outline.status-primary .select-button { background-color: var(--select-outline-primary-background-color); border-color: var(--select-outline-primary-border-color); color: var(--select-outline-primary-text-color); } nb-select.appearance-outline.status-primary .select-button.placeholder { color: var(--select-outline-primary-placeholder-text-color); } nb-select.appearance-outline.status-primary .select-button nb-icon { color: var(--select-outline-primary-icon-color); } nb-select.appearance-outline.status-primary .select-button:focus { background-color: var(--select-outline-primary-focus-background-color); border-color: var(--select-outline-primary-focus-border-color); } nb-select.appearance-outline.status-primary .select-button:hover { background-color: var(--select-outline-primary-hover-background-color); border-color: var(--select-outline-primary-hover-border-color); } nb-select.appearance-outline.status-primary .select-button:focus:hover { background-color: var(--select-outline-primary-focus-and-hover-background-color); border-color: var(--select-outline-primary-focus-and-hover-border-color); } nb-select.appearance-outline.status-primary .select-button[disabled] { color: var(--select-outline-primary-disabled-text-color); background-color: var(--select-outline-primary-disabled-background-color); border-color: var(--select-outline-primary-disabled-border-color); } nb-select.appearance-outline.status-primary .select-button[disabled] nb-icon { color: var(--select-outline-primary-disabled-icon-color); } nb-select.appearance-outline.status-primary .select-button.bottom, nb-select.appearance-outline.status-primary .select-button.top { border-color: var(--select-outline-primary-open-border-color); } nb-select.appearance-outline.status-primary .select-button.top { border-top-color: var(--select-outline-primary-adjacent-border-color); } nb-select.appearance-outline.status-primary .select-button.bottom { border-bottom-color: var(--select-outline-primary-adjacent-border-color); } nb-select.appearance-outline.status-success .select-button { background-color: var(--select-outline-success-background-color); border-color: var(--select-outline-success-border-color); color: var(--select-outline-success-text-color); } nb-select.appearance-outline.status-success .select-button.placeholder { color: var(--select-outline-success-placeholder-text-color); } nb-select.appearance-outline.status-success .select-button nb-icon { color: var(--select-outline-success-icon-color); } nb-select.appearance-outline.status-success .select-button:focus { background-color: var(--select-outline-success-focus-background-color); border-color: var(--select-outline-success-focus-border-color); } nb-select.appearance-outline.status-success .select-button:hover { background-color: var(--select-outline-success-hover-background-color); border-color: var(--select-outline-success-hover-border-color); } nb-select.appearance-outline.status-success .select-button:focus:hover { background-color: var(--select-outline-success-focus-and-hover-background-color); border-color: var(--select-outline-success-focus-and-hover-border-color); } nb-select.appearance-outline.status-success .select-button[disabled] { color: var(--select-outline-success-disabled-text-color); background-color: var(--select-outline-success-disabled-background-color); border-color: var(--select-outline-success-disabled-border-color); } nb-select.appearance-outline.status-success .select-button[disabled] nb-icon { color: var(--select-outline-success-disabled-icon-color); } nb-select.appearance-outline.status-success .select-button.bottom, nb-select.appearance-outline.status-success .select-button.top { border-color: var(--select-outline-success-open-border-color); } nb-select.appearance-outline.status-success .select-button.top { border-top-color: var(--select-outline-success-adjacent-border-color); } nb-select.appearance-outline.status-success .select-button.bottom { border-bottom-color: var(--select-outline-success-adjacent-border-color); } nb-select.appearance-outline.status-warning .select-button { background-color: var(--select-outline-warning-background-color); border-color: var(--select-outline-warning-border-color); color: var(--select-outline-warning-text-color); } nb-select.appearance-outline.status-warning .select-button.placeholder { color: var(--select-outline-warning-placeholder-text-color); } nb-select.appearance-outline.status-warning .select-button nb-icon { color: var(--select-outline-warning-icon-color); } nb-select.appearance-outline.status-warning .select-button:focus { background-color: var(--select-outline-warning-focus-background-color); border-color: var(--select-outline-warning-focus-border-color); } nb-select.appearance-outline.status-warning .select-button:hover { background-color: var(--select-outline-warning-hover-background-color); border-color: var(--select-outline-warning-hover-border-color); } nb-select.appearance-outline.status-warning .select-button:focus:hover { background-color: var(--select-outline-warning-focus-and-hover-background-color); border-color: var(--select-outline-warning-focus-and-hover-border-color); } nb-select.appearance-outline.status-warning .select-button[disabled] { color: var(--select-outline-warning-disabled-text-color); background-color: var(--select-outline-warning-disabled-background-color); border-color: var(--select-outline-warning-disabled-border-color); } nb-select.appearance-outline.status-warning .select-button[disabled] nb-icon { color: var(--select-outline-warning-disabled-icon-color); } nb-select.appearance-outline.status-warning .select-button.bottom, nb-select.appearance-outline.status-warning .select-button.top { border-color: var(--select-outline-warning-open-border-color); } nb-select.appearance-outline.status-warning .select-button.top { border-top-color: var(--select-outline-warning-adjacent-border-color); } nb-select.appearance-outline.status-warning .select-button.bottom { border-bottom-color: var(--select-outline-warning-adjacent-border-color); } nb-select.appearance-outline.status-danger .select-button { background-color: var(--select-outline-danger-background-color); border-color: var(--select-outline-danger-border-color); color: var(--select-outline-danger-text-color); } nb-select.appearance-outline.status-danger .select-button.placeholder { color: var(--select-outline-danger-placeholder-text-color); } nb-select.appearance-outline.status-danger .select-button nb-icon { color: var(--select-outline-danger-icon-color); } nb-select.appearance-outline.status-danger .select-button:focus { background-color: var(--select-outline-danger-focus-background-color); border-color: var(--select-outline-danger-focus-border-color); } nb-select.appearance-outline.status-danger .select-button:hover { background-color: var(--select-outline-danger-hover-background-color); border-color: var(--select-outline-danger-hover-border-color); } nb-select.appearance-outline.status-danger .select-button:focus:hover { background-color: var(--select-outline-danger-focus-and-hover-background-color); border-color: var(--select-outline-danger-focus-and-hover-border-color); } nb-select.appearance-outline.status-danger .select-button[disabled] { color: var(--select-outline-danger-disabled-text-color); background-color: var(--select-outline-danger-disabled-background-color); border-color: var(--select-outline-danger-disabled-border-color); } nb-select.appearance-outline.status-danger .select-button[disabled] nb-icon { color: var(--select-outline-danger-disabled-icon-color); } nb-select.appearance-outline.status-danger .select-button.bottom, nb-select.appearance-outline.status-danger .select-button.top { border-color: var(--select-outline-danger-open-border-color); } nb-select.appearance-outline.status-danger .select-button.top { border-top-color: var(--select-outline-danger-adjacent-border-color); } nb-select.appearance-outline.status-danger .select-button.bottom { border-bottom-color: var(--select-outline-danger-adjacent-border-color); } nb-select.appearance-outline.status-info .select-button { background-color: var(--select-outline-info-background-color); border-color: var(--select-outline-info-border-color); color: var(--select-outline-info-text-color); } nb-select.appearance-outline.status-info .select-button.placeholder { color: var(--select-outline-info-placeholder-text-color); } nb-select.appearance-outline.status-info .select-button nb-icon { color: var(--select-outline-info-icon-color); } nb-select.appearance-outline.status-info .select-button:focus { background-color: var(--select-outline-info-focus-background-color); border-color: var(--select-outline-info-focus-border-color); } nb-select.appearance-outline.status-info .select-button:hover { background-color: var(--select-outline-info-hover-background-color); border-color: var(--select-outline-info-hover-border-color); } nb-select.appearance-outline.status-info .select-button:focus:hover { background-color: var(--select-outline-info-focus-and-hover-background-color); border-color: var(--select-outline-info-focus-and-hover-border-color); } nb-select.appearance-outline.status-info .select-button[disabled] { color: var(--select-outline-info-disabled-text-color); background-color: var(--select-outline-info-disabled-background-color); border-color: var(--select-outline-info-disabled-border-color); } nb-select.appearance-outline.status-info .select-button[disabled] nb-icon { color: var(--select-outline-info-disabled-icon-color); } nb-select.appearance-outline.status-info .select-button.bottom, nb-select.appearance-outline.status-info .select-button.top { border-color: var(--select-outline-info-open-border-color); } nb-select.appearance-outline.status-info .select-button.top { border-top-color: var(--select-outline-info-adjacent-border-color); } nb-select.appearance-outline.status-info .select-button.bottom { border-bottom-color: var(--select-outline-info-adjacent-border-color); } nb-select.appearance-outline.status-control .select-button { background-color: var(--select-outline-control-background-color); border-color: var(--select-outline-control-border-color); color: var(--select-outline-control-text-color); } nb-select.appearance-outline.status-control .select-button.placeholder { color: var(--select-outline-control-placeholder-text-color); } nb-select.appearance-outline.status-control .select-button nb-icon { color: var(--select-outline-control-icon-color); } nb-select.appearance-outline.status-control .select-button:focus { background-color: var(--select-outline-control-focus-background-color); border-color: var(--select-outline-control-focus-border-color); } nb-select.appearance-outline.status-control .select-button:hover { background-color: var(--select-outline-control-hover-background-color); border-color: var(--select-outline-control-hover-border-color); } nb-select.appearance-outline.status-control .select-button:focus:hover { background-color: var(--select-outline-control-focus-and-hover-background-color); border-color: var(--select-outline-control-focus-and-hover-border-color); } nb-select.appearance-outline.status-control .select-button[disabled] { color: var(--select-outline-control-disabled-text-color); background-color: var(--select-outline-control-disabled-background-color); border-color: var(--select-outline-control-disabled-border-color); } nb-select.appearance-outline.status-control .select-button[disabled] nb-icon { color: var(--select-outline-control-disabled-icon-color); } nb-select.appearance-outline.status-control .select-button.bottom, nb-select.appearance-outline.status-control .select-button.top { border-color: var(--select-outline-control-open-border-color); } nb-select.appearance-outline.status-control .select-button.top { border-top-color: var(--select-outline-control-adjacent-border-color); } nb-select.appearance-outline.status-control .select-button.bottom { border-bottom-color: var(--select-outline-control-adjacent-border-color); } nb-select.appearance-outline.size-tiny .select-button { padding: var(--select-outline-tiny-padding); } [dir=ltr] nb-select.appearance-outline.size-tiny .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-outline.size-tiny .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-tiny .select-button { padding-left: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-tiny .select-button { padding-right: var(--form-field-addon-tiny-width); } nb-select.appearance-outline.size-small .select-button { padding: var(--select-outline-small-padding); } [dir=ltr] nb-select.appearance-outline.size-small .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-outline.size-small .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-small .select-button { padding-left: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-small .select-button { padding-right: var(--form-field-addon-small-width); } nb-select.appearance-outline.size-medium .select-button { padding: var(--select-outline-medium-padding); } [dir=ltr] nb-select.appearance-outline.size-medium .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-outline.size-medium .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-medium .select-button { padding-left: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-medium .select-button { padding-right: var(--form-field-addon-medium-width); } nb-select.appearance-outline.size-large .select-button { padding: var(--select-outline-large-padding); } [dir=ltr] nb-select.appearance-outline.size-large .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-outline.size-large .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-large .select-button { padding-left: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-large .select-button { padding-right: var(--form-field-addon-large-width); } nb-select.appearance-outline.size-giant .select-button { padding: var(--select-outline-giant-padding); } [dir=ltr] nb-select.appearance-outline.size-giant .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-outline.size-giant .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-giant .select-button { padding-left: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-outline.size-giant .select-button { padding-right: var(--form-field-addon-giant-width); } nb-select.appearance-filled .select-button { border-style: var(--select-filled-border-style); border-width: var(--select-filled-border-width); } nb-select.appearance-filled.size-tiny .select-button { padding: var(--select-filled-tiny-padding); } [dir=ltr] nb-select.appearance-filled.size-tiny .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-filled.size-tiny .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-tiny .select-button { padding-left: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-tiny .select-button { padding-right: var(--form-field-addon-tiny-width); } nb-select.appearance-filled.size-small .select-button { padding: var(--select-filled-small-padding); } [dir=ltr] nb-select.appearance-filled.size-small .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-filled.size-small .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-small .select-button { padding-left: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-small .select-button { padding-right: var(--form-field-addon-small-width); } nb-select.appearance-filled.size-medium .select-button { padding: var(--select-filled-medium-padding); } [dir=ltr] nb-select.appearance-filled.size-medium .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-filled.size-medium .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-medium .select-button { padding-left: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-medium .select-button { padding-right: var(--form-field-addon-medium-width); } nb-select.appearance-filled.size-large .select-button { padding: var(--select-filled-large-padding); } [dir=ltr] nb-select.appearance-filled.size-large .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-filled.size-large .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-large .select-button { padding-left: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-large .select-button { padding-right: var(--form-field-addon-large-width); } nb-select.appearance-filled.size-giant .select-button { padding: var(--select-filled-giant-padding); } [dir=ltr] nb-select.appearance-filled.size-giant .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-filled.size-giant .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-giant .select-button { padding-left: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-filled.size-giant .select-button { padding-right: var(--form-field-addon-giant-width); } nb-select.appearance-filled.status-basic .select-button { background-color: var(--select-filled-basic-background-color); border-color: var(--select-filled-basic-border-color); color: var(--select-filled-basic-text-color); } nb-select.appearance-filled.status-basic .select-button.placeholder { color: var(--select-filled-basic-placeholder-text-color); } nb-select.appearance-filled.status-basic .select-button:focus { background-color: var(--select-filled-basic-focus-background-color); border-color: var(--select-filled-basic-focus-border-color); } nb-select.appearance-filled.status-basic .select-button:hover { background-color: var(--select-filled-basic-hover-background-color); border-color: var(--select-filled-basic-hover-border-color); } nb-select.appearance-filled.status-basic .select-button:focus:hover { background-color: var(--select-filled-basic-focus-and-hover-background-color); border-color: var(--select-filled-basic-focus-and-hover-border-color); } nb-select.appearance-filled.status-basic .select-button[disabled] { background-color: var(--select-filled-basic-disabled-background-color); border-color: var(--select-filled-basic-disabled-border-color); color: var(--select-filled-basic-disabled-text-color); } nb-select.appearance-filled.status-basic .select-button[disabled] nb-icon { color: var(--select-filled-basic-disabled-icon-color); } nb-select.appearance-filled.status-basic .select-button nb-icon { color: var(--select-filled-basic-icon-color); } nb-select.appearance-filled.status-primary .select-button { background-color: var(--select-filled-primary-background-color); border-color: var(--select-filled-primary-border-color); color: var(--select-filled-primary-text-color); } nb-select.appearance-filled.status-primary .select-button.placeholder { color: var(--select-filled-primary-placeholder-text-color); } nb-select.appearance-filled.status-primary .select-button:focus { background-color: var(--select-filled-primary-focus-background-color); border-color: var(--select-filled-primary-focus-border-color); } nb-select.appearance-filled.status-primary .select-button:hover { background-color: var(--select-filled-primary-hover-background-color); border-color: var(--select-filled-primary-hover-border-color); } nb-select.appearance-filled.status-primary .select-button:focus:hover { background-color: var(--select-filled-primary-focus-and-hover-background-color); border-color: var(--select-filled-primary-focus-and-hover-border-color); } nb-select.appearance-filled.status-primary .select-button[disabled] { background-color: var(--select-filled-primary-disabled-background-color); border-color: var(--select-filled-primary-disabled-border-color); color: var(--select-filled-primary-disabled-text-color); } nb-select.appearance-filled.status-primary .select-button[disabled] nb-icon { color: var(--select-filled-primary-disabled-icon-color); } nb-select.appearance-filled.status-primary .select-button nb-icon { color: var(--select-filled-primary-icon-color); } nb-select.appearance-filled.status-success .select-button { background-color: var(--select-filled-success-background-color); border-color: var(--select-filled-success-border-color); color: var(--select-filled-success-text-color); } nb-select.appearance-filled.status-success .select-button.placeholder { color: var(--select-filled-success-placeholder-text-color); } nb-select.appearance-filled.status-success .select-button:focus { background-color: var(--select-filled-success-focus-background-color); border-color: var(--select-filled-success-focus-border-color); } nb-select.appearance-filled.status-success .select-button:hover { background-color: var(--select-filled-success-hover-background-color); border-color: var(--select-filled-success-hover-border-color); } nb-select.appearance-filled.status-success .select-button:focus:hover { background-color: var(--select-filled-success-focus-and-hover-background-color); border-color: var(--select-filled-success-focus-and-hover-border-color); } nb-select.appearance-filled.status-success .select-button[disabled] { background-color: var(--select-filled-success-disabled-background-color); border-color: var(--select-filled-success-disabled-border-color); color: var(--select-filled-success-disabled-text-color); } nb-select.appearance-filled.status-success .select-button[disabled] nb-icon { color: var(--select-filled-success-disabled-icon-color); } nb-select.appearance-filled.status-success .select-button nb-icon { color: var(--select-filled-success-icon-color); } nb-select.appearance-filled.status-warning .select-button { background-color: var(--select-filled-warning-background-color); border-color: var(--select-filled-warning-border-color); color: var(--select-filled-warning-text-color); } nb-select.appearance-filled.status-warning .select-button.placeholder { color: var(--select-filled-warning-placeholder-text-color); } nb-select.appearance-filled.status-warning .select-button:focus { background-color: var(--select-filled-warning-focus-background-color); border-color: var(--select-filled-warning-focus-border-color); } nb-select.appearance-filled.status-warning .select-button:hover { background-color: var(--select-filled-warning-hover-background-color); border-color: var(--select-filled-warning-hover-border-color); } nb-select.appearance-filled.status-warning .select-button:focus:hover { background-color: var(--select-filled-warning-focus-and-hover-background-color); border-color: var(--select-filled-warning-focus-and-hover-border-color); } nb-select.appearance-filled.status-warning .select-button[disabled] { background-color: var(--select-filled-warning-disabled-background-color); border-color: var(--select-filled-warning-disabled-border-color); color: var(--select-filled-warning-disabled-text-color); } nb-select.appearance-filled.status-warning .select-button[disabled] nb-icon { color: var(--select-filled-warning-disabled-icon-color); } nb-select.appearance-filled.status-warning .select-button nb-icon { color: var(--select-filled-warning-icon-color); } nb-select.appearance-filled.status-danger .select-button { background-color: var(--select-filled-danger-background-color); border-color: var(--select-filled-danger-border-color); color: var(--select-filled-danger-text-color); } nb-select.appearance-filled.status-danger .select-button.placeholder { color: var(--select-filled-danger-placeholder-text-color); } nb-select.appearance-filled.status-danger .select-button:focus { background-color: var(--select-filled-danger-focus-background-color); border-color: var(--select-filled-danger-focus-border-color); } nb-select.appearance-filled.status-danger .select-button:hover { background-color: var(--select-filled-danger-hover-background-color); border-color: var(--select-filled-danger-hover-border-color); } nb-select.appearance-filled.status-danger .select-button:focus:hover { background-color: var(--select-filled-danger-focus-and-hover-background-color); border-color: var(--select-filled-danger-focus-and-hover-border-color); } nb-select.appearance-filled.status-danger .select-button[disabled] { background-color: var(--select-filled-danger-disabled-background-color); border-color: var(--select-filled-danger-disabled-border-color); color: var(--select-filled-danger-disabled-text-color); } nb-select.appearance-filled.status-danger .select-button[disabled] nb-icon { color: var(--select-filled-danger-disabled-icon-color); } nb-select.appearance-filled.status-danger .select-button nb-icon { color: var(--select-filled-danger-icon-color); } nb-select.appearance-filled.status-info .select-button { background-color: var(--select-filled-info-background-color); border-color: var(--select-filled-info-border-color); color: var(--select-filled-info-text-color); } nb-select.appearance-filled.status-info .select-button.placeholder { color: var(--select-filled-info-placeholder-text-color); } nb-select.appearance-filled.status-info .select-button:focus { background-color: var(--select-filled-info-focus-background-color); border-color: var(--select-filled-info-focus-border-color); } nb-select.appearance-filled.status-info .select-button:hover { background-color: var(--select-filled-info-hover-background-color); border-color: var(--select-filled-info-hover-border-color); } nb-select.appearance-filled.status-info .select-button:focus:hover { background-color: var(--select-filled-info-focus-and-hover-background-color); border-color: var(--select-filled-info-focus-and-hover-border-color); } nb-select.appearance-filled.status-info .select-button[disabled] { background-color: var(--select-filled-info-disabled-background-color); border-color: var(--select-filled-info-disabled-border-color); color: var(--select-filled-info-disabled-text-color); } nb-select.appearance-filled.status-info .select-button[disabled] nb-icon { color: var(--select-filled-info-disabled-icon-color); } nb-select.appearance-filled.status-info .select-button nb-icon { color: var(--select-filled-info-icon-color); } nb-select.appearance-filled.status-control .select-button { background-color: var(--select-filled-control-background-color); border-color: var(--select-filled-control-border-color); color: var(--select-filled-control-text-color); } nb-select.appearance-filled.status-control .select-button.placeholder { color: var(--select-filled-control-placeholder-text-color); } nb-select.appearance-filled.status-control .select-button:focus { background-color: var(--select-filled-control-focus-background-color); border-color: var(--select-filled-control-focus-border-color); } nb-select.appearance-filled.status-control .select-button:hover { background-color: var(--select-filled-control-hover-background-color); border-color: var(--select-filled-control-hover-border-color); } nb-select.appearance-filled.status-control .select-button:focus:hover { background-color: var(--select-filled-control-focus-and-hover-background-color); border-color: var(--select-filled-control-focus-and-hover-border-color); } nb-select.appearance-filled.status-control .select-button[disabled] { background-color: var(--select-filled-control-disabled-background-color); border-color: var(--select-filled-control-disabled-border-color); color: var(--select-filled-control-disabled-text-color); } nb-select.appearance-filled.status-control .select-button[disabled] nb-icon { color: var(--select-filled-control-disabled-icon-color); } nb-select.appearance-filled.status-control .select-button nb-icon { color: var(--select-filled-control-icon-color); } nb-select.appearance-hero .select-button { border: none; } nb-select.appearance-hero.size-tiny .select-button { padding: var(--select-hero-tiny-padding); } [dir=ltr] nb-select.appearance-hero.size-tiny .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-hero.size-tiny .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-tiny .select-button { padding-left: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-tiny .select-button { padding-right: var(--form-field-addon-tiny-width); } nb-select.appearance-hero.size-small .select-button { padding: var(--select-hero-small-padding); } [dir=ltr] nb-select.appearance-hero.size-small .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-hero.size-small .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-small .select-button { padding-left: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-small .select-button { padding-right: var(--form-field-addon-small-width); } nb-select.appearance-hero.size-medium .select-button { padding: var(--select-hero-medium-padding); } [dir=ltr] nb-select.appearance-hero.size-medium .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-hero.size-medium .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-medium .select-button { padding-left: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-medium .select-button { padding-right: var(--form-field-addon-medium-width); } nb-select.appearance-hero.size-large .select-button { padding: var(--select-hero-large-padding); } [dir=ltr] nb-select.appearance-hero.size-large .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-hero.size-large .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-large .select-button { padding-left: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-large .select-button { padding-right: var(--form-field-addon-large-width); } nb-select.appearance-hero.size-giant .select-button { padding: var(--select-hero-giant-padding); } [dir=ltr] nb-select.appearance-hero.size-giant .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select.appearance-hero.size-giant .select-button { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-giant .select-button { padding-left: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select.appearance-hero.size-giant .select-button { padding-right: var(--form-field-addon-giant-width); } nb-select.appearance-hero.status-basic .select-button { background-image: linear-gradient(to right, var(--select-hero-basic-left-background-color), var(--select-hero-basic-right-background-color)); color: var(--select-hero-basic-text-color); } nb-select.appearance-hero.status-basic .select-button.placeholder { color: var(--select-hero-basic-placeholder-text-color); } nb-select.appearance-hero.status-basic .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-basic-focus-left-background-color), var(--select-hero-basic-focus-right-background-color)); } nb-select.appearance-hero.status-basic .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-basic-hover-left-background-color), var(--select-hero-basic-hover-right-background-color)); } nb-select.appearance-hero.status-basic .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-basic-focus-and-hover-left-background-color), var(--select-hero-basic-focus-and-hover-right-background-color)); } nb-select.appearance-hero.status-basic .select-button[disabled] { color: var(--select-hero-basic-disabled-text-color); background-color: var(--select-hero-basic-disabled-background-color); background-image: none; } nb-select.appearance-hero.status-basic .select-button[disabled] nb-icon { color: var(--select-hero-basic-disabled-icon-color); } nb-select.appearance-hero.status-basic .select-button nb-icon { color: var(--select-hero-basic-icon-color); } nb-select.appearance-hero.status-primary .select-button { background-image: linear-gradient(to right, var(--select-hero-primary-left-background-color), var(--select-hero-primary-right-background-color)); color: var(--select-hero-primary-text-color); } nb-select.appearance-hero.status-primary .select-button.placeholder { color: var(--select-hero-primary-placeholder-text-color); } nb-select.appearance-hero.status-primary .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-primary-focus-left-background-color), var(--select-hero-primary-focus-right-background-color)); } nb-select.appearance-hero.status-primary .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-primary-hover-left-background-color), var(--select-hero-primary-hover-right-background-color)); } nb-select.appearance-hero.status-primary .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-primary-focus-and-hover-left-background-color), var(--select-hero-primary-focus-and-hover-right-background-color)); } nb-select.appearance-hero.status-primary .select-button[disabled] { color: var(--select-hero-primary-disabled-text-color); background-color: var(--select-hero-primary-disabled-background-color); background-image: none; } nb-select.appearance-hero.status-primary .select-button[disabled] nb-icon { color: var(--select-hero-primary-disabled-icon-color); } nb-select.appearance-hero.status-primary .select-button nb-icon { color: var(--select-hero-primary-icon-color); } nb-select.appearance-hero.status-success .select-button { background-image: linear-gradient(to right, var(--select-hero-success-left-background-color), var(--select-hero-success-right-background-color)); color: var(--select-hero-success-text-color); } nb-select.appearance-hero.status-success .select-button.placeholder { color: var(--select-hero-success-placeholder-text-color); } nb-select.appearance-hero.status-success .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-success-focus-left-background-color), var(--select-hero-success-focus-right-background-color)); } nb-select.appearance-hero.status-success .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-success-hover-left-background-color), var(--select-hero-success-hover-right-background-color)); } nb-select.appearance-hero.status-success .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-success-focus-and-hover-left-background-color), var(--select-hero-success-focus-and-hover-right-background-color)); } nb-select.appearance-hero.status-success .select-button[disabled] { color: var(--select-hero-success-disabled-text-color); background-color: var(--select-hero-success-disabled-background-color); background-image: none; } nb-select.appearance-hero.status-success .select-button[disabled] nb-icon { color: var(--select-hero-success-disabled-icon-color); } nb-select.appearance-hero.status-success .select-button nb-icon { color: var(--select-hero-success-icon-color); } nb-select.appearance-hero.status-warning .select-button { background-image: linear-gradient(to right, var(--select-hero-warning-left-background-color), var(--select-hero-warning-right-background-color)); color: var(--select-hero-warning-text-color); } nb-select.appearance-hero.status-warning .select-button.placeholder { color: var(--select-hero-warning-placeholder-text-color); } nb-select.appearance-hero.status-warning .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-warning-focus-left-background-color), var(--select-hero-warning-focus-right-background-color)); } nb-select.appearance-hero.status-warning .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-warning-hover-left-background-color), var(--select-hero-warning-hover-right-background-color)); } nb-select.appearance-hero.status-warning .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-warning-focus-and-hover-left-background-color), var(--select-hero-warning-focus-and-hover-right-background-color)); } nb-select.appearance-hero.status-warning .select-button[disabled] { color: var(--select-hero-warning-disabled-text-color); background-color: var(--select-hero-warning-disabled-background-color); background-image: none; } nb-select.appearance-hero.status-warning .select-button[disabled] nb-icon { color: var(--select-hero-warning-disabled-icon-color); } nb-select.appearance-hero.status-warning .select-button nb-icon { color: var(--select-hero-warning-icon-color); } nb-select.appearance-hero.status-danger .select-button { background-image: linear-gradient(to right, var(--select-hero-danger-left-background-color), var(--select-hero-danger-right-background-color)); color: var(--select-hero-danger-text-color); } nb-select.appearance-hero.status-danger .select-button.placeholder { color: var(--select-hero-danger-placeholder-text-color); } nb-select.appearance-hero.status-danger .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-danger-focus-left-background-color), var(--select-hero-danger-focus-right-background-color)); } nb-select.appearance-hero.status-danger .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-danger-hover-left-background-color), var(--select-hero-danger-hover-right-background-color)); } nb-select.appearance-hero.status-danger .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-danger-focus-and-hover-left-background-color), var(--select-hero-danger-focus-and-hover-right-background-color)); } nb-select.appearance-hero.status-danger .select-button[disabled] { color: var(--select-hero-danger-disabled-text-color); background-color: var(--select-hero-danger-disabled-background-color); background-image: none; } nb-select.appearance-hero.status-danger .select-button[disabled] nb-icon { color: var(--select-hero-danger-disabled-icon-color); } nb-select.appearance-hero.status-danger .select-button nb-icon { color: var(--select-hero-danger-icon-color); } nb-select.appearance-hero.status-info .select-button { background-image: linear-gradient(to right, var(--select-hero-info-left-background-color), var(--select-hero-info-right-background-color)); color: var(--select-hero-info-text-color); } nb-select.appearance-hero.status-info .select-button.placeholder { color: var(--select-hero-info-placeholder-text-color); } nb-select.appearance-hero.status-info .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-info-focus-left-background-color), var(--select-hero-info-focus-right-background-color)); } nb-select.appearance-hero.status-info .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-info-hover-left-background-color), var(--select-hero-info-hover-right-background-color)); } nb-select.appearance-hero.status-info .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-info-focus-and-hover-left-background-color), var(--select-hero-info-focus-and-hover-right-background-color)); } nb-select.appearance-hero.status-info .select-button[disabled] { color: var(--select-hero-info-disabled-text-color); background-color: var(--select-hero-info-disabled-background-color); background-image: none; } nb-select.appearance-hero.status-info .select-button[disabled] nb-icon { color: var(--select-hero-info-disabled-icon-color); } nb-select.appearance-hero.status-info .select-button nb-icon { color: var(--select-hero-info-icon-color); } nb-select.appearance-hero.status-control .select-button { background-image: linear-gradient(to right, var(--select-hero-control-left-background-color), var(--select-hero-control-right-background-color)); color: var(--select-hero-control-text-color); } nb-select.appearance-hero.status-control .select-button.placeholder { color: var(--select-hero-control-placeholder-text-color); } nb-select.appearance-hero.status-control .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-control-focus-left-background-color), var(--select-hero-control-focus-right-background-color)); } nb-select.appearance-hero.status-control .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-control-hover-left-background-color), var(--select-hero-control-hover-right-background-color)); } nb-select.appearance-hero.status-control .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-control-focus-and-hover-left-background-color), var(--select-hero-control-focus-and-hover-right-background-color)); } nb-select.appearance-hero.status-control .select-button[disabled] { color: var(--select-hero-control-disabled-text-color); background-color: var(--select-hero-control-disabled-background-color); background-image: none; } nb-select.appearance-hero.status-control .select-button[disabled] nb-icon { color: var(--select-hero-control-disabled-icon-color); } nb-select.appearance-hero.status-control .select-button nb-icon { color: var(--select-hero-control-icon-color); } nb-form-field nb-select { width: 100%; } nb-select-with-autocomplete .select-button { min-width: var(--select-min-width); cursor: var(--select-cursor); font-family: var(--select-text-font-family); } nb-select-with-autocomplete .select-button.placeholder { font-family: var(--select-placeholder-text-font-family); } nb-select-with-autocomplete .select-button:focus { outline: none; } nb-select-with-autocomplete .select-button[disabled] { cursor: var(--select-disabled-cursor); } nb-select-with-autocomplete.size-tiny .select-button { font-size: var(--select-tiny-text-font-size); font-weight: var(--select-tiny-text-font-weight); line-height: var(--select-tiny-text-line-height); } nb-select-with-autocomplete.size-tiny .select-button.placeholder { font-size: var(--select-tiny-placeholder-text-font-size); font-weight: var(--select-tiny-placeholder-text-font-weight); } nb-select-with-autocomplete.size-tiny .select-button.empty::before { content: " "; display: block; height: var(--select-tiny-text-line-height); } nb-select-with-autocomplete.size-tiny:not(.full-width) { max-width: var(--select-tiny-max-width); } nb-select-with-autocomplete.size-small .select-button { font-size: var(--select-small-text-font-size); font-weight: var(--select-small-text-font-weight); line-height: var(--select-small-text-line-height); } nb-select-with-autocomplete.size-small .select-button.placeholder { font-size: var(--select-small-placeholder-text-font-size); font-weight: var(--select-small-placeholder-text-font-weight); } nb-select-with-autocomplete.size-small .select-button.empty::before { content: " "; display: block; height: var(--select-small-text-line-height); } nb-select-with-autocomplete.size-small:not(.full-width) { max-width: var(--select-small-max-width); } nb-select-with-autocomplete.size-medium .select-button { font-size: var(--select-medium-text-font-size); font-weight: var(--select-medium-text-font-weight); line-height: var(--select-medium-text-line-height); } nb-select-with-autocomplete.size-medium .select-button.placeholder { font-size: var(--select-medium-placeholder-text-font-size); font-weight: var(--select-medium-placeholder-text-font-weight); } nb-select-with-autocomplete.size-medium .select-button.empty::before { content: " "; display: block; height: var(--select-medium-text-line-height); } nb-select-with-autocomplete.size-medium:not(.full-width) { max-width: var(--select-medium-max-width); } nb-select-with-autocomplete.size-large .select-button { font-size: var(--select-large-text-font-size); font-weight: var(--select-large-text-font-weight); line-height: var(--select-large-text-line-height); } nb-select-with-autocomplete.size-large .select-button.placeholder { font-size: var(--select-large-placeholder-text-font-size); font-weight: var(--select-large-placeholder-text-font-weight); } nb-select-with-autocomplete.size-large .select-button.empty::before { content: " "; display: block; height: var(--select-large-text-line-height); } nb-select-with-autocomplete.size-large:not(.full-width) { max-width: var(--select-large-max-width); } nb-select-with-autocomplete.size-giant .select-button { font-size: var(--select-giant-text-font-size); font-weight: var(--select-giant-text-font-weight); line-height: var(--select-giant-text-line-height); } nb-select-with-autocomplete.size-giant .select-button.placeholder { font-size: var(--select-giant-placeholder-text-font-size); font-weight: var(--select-giant-placeholder-text-font-weight); } nb-select-with-autocomplete.size-giant .select-button.empty::before { content: " "; display: block; height: var(--select-giant-text-line-height); } nb-select-with-autocomplete.size-giant:not(.full-width) { max-width: var(--select-giant-max-width); } nb-select-with-autocomplete.shape-rectangle .select-button { border-radius: var(--select-rectangle-border-radius); } nb-select-with-autocomplete.shape-semi-round .select-button { border-radius: var(--select-semi-round-border-radius); } nb-select-with-autocomplete.shape-round .select-button { border-radius: var(--select-round-border-radius); } nb-select-with-autocomplete.appearance-outline .select-button { border-style: var(--select-outline-border-style); border-width: var(--select-outline-border-width); } nb-select-with-autocomplete.appearance-outline .select-button.top { border-top-style: var(--select-outline-adjacent-border-style); border-top-width: var(--select-outline-adjacent-border-width); } nb-select-with-autocomplete.appearance-outline .select-button.bottom { border-bottom-style: var(--select-outline-adjacent-border-style); border-bottom-width: var(--select-outline-adjacent-border-width); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button { background-color: var(--select-outline-basic-background-color); border-color: var(--select-outline-basic-border-color); color: var(--select-outline-basic-text-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button.placeholder { color: var(--select-outline-basic-placeholder-text-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button nb-icon { color: var(--select-outline-basic-icon-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button:focus { background-color: var(--select-outline-basic-focus-background-color); border-color: var(--select-outline-basic-focus-border-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button:hover { background-color: var(--select-outline-basic-hover-background-color); border-color: var(--select-outline-basic-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button:focus:hover { background-color: var(--select-outline-basic-focus-and-hover-background-color); border-color: var(--select-outline-basic-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button[disabled] { color: var(--select-outline-basic-disabled-text-color); background-color: var(--select-outline-basic-disabled-background-color); border-color: var(--select-outline-basic-disabled-border-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button[disabled] nb-icon { color: var(--select-outline-basic-disabled-icon-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button.bottom, nb-select-with-autocomplete.appearance-outline.status-basic .select-button.top { border-color: var(--select-outline-basic-open-border-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button.top { border-top-color: var(--select-outline-basic-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-basic .select-button.bottom { border-bottom-color: var(--select-outline-basic-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button { background-color: var(--select-outline-primary-background-color); border-color: var(--select-outline-primary-border-color); color: var(--select-outline-primary-text-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button.placeholder { color: var(--select-outline-primary-placeholder-text-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button nb-icon { color: var(--select-outline-primary-icon-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button:focus { background-color: var(--select-outline-primary-focus-background-color); border-color: var(--select-outline-primary-focus-border-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button:hover { background-color: var(--select-outline-primary-hover-background-color); border-color: var(--select-outline-primary-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button:focus:hover { background-color: var(--select-outline-primary-focus-and-hover-background-color); border-color: var(--select-outline-primary-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button[disabled] { color: var(--select-outline-primary-disabled-text-color); background-color: var(--select-outline-primary-disabled-background-color); border-color: var(--select-outline-primary-disabled-border-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button[disabled] nb-icon { color: var(--select-outline-primary-disabled-icon-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button.bottom, nb-select-with-autocomplete.appearance-outline.status-primary .select-button.top { border-color: var(--select-outline-primary-open-border-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button.top { border-top-color: var(--select-outline-primary-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-primary .select-button.bottom { border-bottom-color: var(--select-outline-primary-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button { background-color: var(--select-outline-success-background-color); border-color: var(--select-outline-success-border-color); color: var(--select-outline-success-text-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button.placeholder { color: var(--select-outline-success-placeholder-text-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button nb-icon { color: var(--select-outline-success-icon-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button:focus { background-color: var(--select-outline-success-focus-background-color); border-color: var(--select-outline-success-focus-border-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button:hover { background-color: var(--select-outline-success-hover-background-color); border-color: var(--select-outline-success-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button:focus:hover { background-color: var(--select-outline-success-focus-and-hover-background-color); border-color: var(--select-outline-success-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button[disabled] { color: var(--select-outline-success-disabled-text-color); background-color: var(--select-outline-success-disabled-background-color); border-color: var(--select-outline-success-disabled-border-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button[disabled] nb-icon { color: var(--select-outline-success-disabled-icon-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button.bottom, nb-select-with-autocomplete.appearance-outline.status-success .select-button.top { border-color: var(--select-outline-success-open-border-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button.top { border-top-color: var(--select-outline-success-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-success .select-button.bottom { border-bottom-color: var(--select-outline-success-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button { background-color: var(--select-outline-warning-background-color); border-color: var(--select-outline-warning-border-color); color: var(--select-outline-warning-text-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button.placeholder { color: var(--select-outline-warning-placeholder-text-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button nb-icon { color: var(--select-outline-warning-icon-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button:focus { background-color: var(--select-outline-warning-focus-background-color); border-color: var(--select-outline-warning-focus-border-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button:hover { background-color: var(--select-outline-warning-hover-background-color); border-color: var(--select-outline-warning-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button:focus:hover { background-color: var(--select-outline-warning-focus-and-hover-background-color); border-color: var(--select-outline-warning-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button[disabled] { color: var(--select-outline-warning-disabled-text-color); background-color: var(--select-outline-warning-disabled-background-color); border-color: var(--select-outline-warning-disabled-border-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button[disabled] nb-icon { color: var(--select-outline-warning-disabled-icon-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button.bottom, nb-select-with-autocomplete.appearance-outline.status-warning .select-button.top { border-color: var(--select-outline-warning-open-border-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button.top { border-top-color: var(--select-outline-warning-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-warning .select-button.bottom { border-bottom-color: var(--select-outline-warning-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button { background-color: var(--select-outline-danger-background-color); border-color: var(--select-outline-danger-border-color); color: var(--select-outline-danger-text-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button.placeholder { color: var(--select-outline-danger-placeholder-text-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button nb-icon { color: var(--select-outline-danger-icon-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button:focus { background-color: var(--select-outline-danger-focus-background-color); border-color: var(--select-outline-danger-focus-border-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button:hover { background-color: var(--select-outline-danger-hover-background-color); border-color: var(--select-outline-danger-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button:focus:hover { background-color: var(--select-outline-danger-focus-and-hover-background-color); border-color: var(--select-outline-danger-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button[disabled] { color: var(--select-outline-danger-disabled-text-color); background-color: var(--select-outline-danger-disabled-background-color); border-color: var(--select-outline-danger-disabled-border-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button[disabled] nb-icon { color: var(--select-outline-danger-disabled-icon-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button.bottom, nb-select-with-autocomplete.appearance-outline.status-danger .select-button.top { border-color: var(--select-outline-danger-open-border-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button.top { border-top-color: var(--select-outline-danger-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-danger .select-button.bottom { border-bottom-color: var(--select-outline-danger-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button { background-color: var(--select-outline-info-background-color); border-color: var(--select-outline-info-border-color); color: var(--select-outline-info-text-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button.placeholder { color: var(--select-outline-info-placeholder-text-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button nb-icon { color: var(--select-outline-info-icon-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button:focus { background-color: var(--select-outline-info-focus-background-color); border-color: var(--select-outline-info-focus-border-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button:hover { background-color: var(--select-outline-info-hover-background-color); border-color: var(--select-outline-info-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button:focus:hover { background-color: var(--select-outline-info-focus-and-hover-background-color); border-color: var(--select-outline-info-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button[disabled] { color: var(--select-outline-info-disabled-text-color); background-color: var(--select-outline-info-disabled-background-color); border-color: var(--select-outline-info-disabled-border-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button[disabled] nb-icon { color: var(--select-outline-info-disabled-icon-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button.bottom, nb-select-with-autocomplete.appearance-outline.status-info .select-button.top { border-color: var(--select-outline-info-open-border-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button.top { border-top-color: var(--select-outline-info-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-info .select-button.bottom { border-bottom-color: var(--select-outline-info-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button { background-color: var(--select-outline-control-background-color); border-color: var(--select-outline-control-border-color); color: var(--select-outline-control-text-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button.placeholder { color: var(--select-outline-control-placeholder-text-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button nb-icon { color: var(--select-outline-control-icon-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button:focus { background-color: var(--select-outline-control-focus-background-color); border-color: var(--select-outline-control-focus-border-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button:hover { background-color: var(--select-outline-control-hover-background-color); border-color: var(--select-outline-control-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button:focus:hover { background-color: var(--select-outline-control-focus-and-hover-background-color); border-color: var(--select-outline-control-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button[disabled] { color: var(--select-outline-control-disabled-text-color); background-color: var(--select-outline-control-disabled-background-color); border-color: var(--select-outline-control-disabled-border-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button[disabled] nb-icon { color: var(--select-outline-control-disabled-icon-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button.bottom, nb-select-with-autocomplete.appearance-outline.status-control .select-button.top { border-color: var(--select-outline-control-open-border-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button.top { border-top-color: var(--select-outline-control-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.status-control .select-button.bottom { border-bottom-color: var(--select-outline-control-adjacent-border-color); } nb-select-with-autocomplete.appearance-outline.size-tiny .select-button { padding: var(--select-outline-tiny-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-tiny .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-tiny .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-outline.size-tiny .nb-form-field-prefix-tiny, nb-select-with-autocomplete.appearance-outline.size-tiny .nb-form-field-suffix-tiny { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-tiny .nb-form-field-prefix-tiny { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-tiny .nb-form-field-prefix-tiny { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-tiny .nb-form-field-suffix-tiny { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-tiny .nb-form-field-suffix-tiny { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-tiny [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-tiny [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-tiny .select-button { padding-left: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-tiny .select-button { padding-right: var(--form-field-addon-tiny-width); } nb-select-with-autocomplete.appearance-outline.size-small .select-button { padding: var(--select-outline-small-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-small .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-small .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-outline.size-small .nb-form-field-prefix-small, nb-select-with-autocomplete.appearance-outline.size-small .nb-form-field-suffix-small { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-small .nb-form-field-prefix-small { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-small .nb-form-field-prefix-small { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-small .nb-form-field-suffix-small { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-small .nb-form-field-suffix-small { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-small [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-small [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-small .select-button { padding-left: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-small .select-button { padding-right: var(--form-field-addon-small-width); } nb-select-with-autocomplete.appearance-outline.size-medium .select-button { padding: var(--select-outline-medium-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-medium .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-medium .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-outline.size-medium .nb-form-field-prefix-medium, nb-select-with-autocomplete.appearance-outline.size-medium .nb-form-field-suffix-medium { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-medium .nb-form-field-prefix-medium { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-medium .nb-form-field-prefix-medium { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-medium .nb-form-field-suffix-medium { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-medium .nb-form-field-suffix-medium { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-medium [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-medium [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-medium .select-button { padding-left: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-medium .select-button { padding-right: var(--form-field-addon-medium-width); } nb-select-with-autocomplete.appearance-outline.size-large .select-button { padding: var(--select-outline-large-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-large .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-large .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-outline.size-large .nb-form-field-prefix-large, nb-select-with-autocomplete.appearance-outline.size-large .nb-form-field-suffix-large { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-large .nb-form-field-prefix-large { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-large .nb-form-field-prefix-large { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-large .nb-form-field-suffix-large { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-large .nb-form-field-suffix-large { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-large [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-large [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-large .select-button { padding-left: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-large .select-button { padding-right: var(--form-field-addon-large-width); } nb-select-with-autocomplete.appearance-outline.size-giant .select-button { padding: var(--select-outline-giant-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-giant .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-giant .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-outline.size-giant .nb-form-field-prefix-giant, nb-select-with-autocomplete.appearance-outline.size-giant .nb-form-field-suffix-giant { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-giant .nb-form-field-prefix-giant { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-giant .nb-form-field-prefix-giant { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-giant .nb-form-field-suffix-giant { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-giant .nb-form-field-suffix-giant { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-outline.size-giant [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-outline.size-giant [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-giant .select-button { padding-left: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-giant .select-button { padding-right: var(--form-field-addon-giant-width); } nb-select-with-autocomplete.appearance-filled .select-button { border-style: var(--select-filled-border-style); border-width: var(--select-filled-border-width); } nb-select-with-autocomplete.appearance-filled.size-tiny .select-button { padding: var(--select-filled-tiny-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-tiny .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-tiny .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-filled.size-tiny .nb-form-field-prefix-tiny, nb-select-with-autocomplete.appearance-filled.size-tiny .nb-form-field-suffix-tiny { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-tiny .nb-form-field-prefix-tiny { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-tiny .nb-form-field-prefix-tiny { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-tiny .nb-form-field-suffix-tiny { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-tiny .nb-form-field-suffix-tiny { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-tiny [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-tiny [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-tiny .select-button { padding-left: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-tiny .select-button { padding-right: var(--form-field-addon-tiny-width); } nb-select-with-autocomplete.appearance-filled.size-small .select-button { padding: var(--select-filled-small-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-small .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-small .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-filled.size-small .nb-form-field-prefix-small, nb-select-with-autocomplete.appearance-filled.size-small .nb-form-field-suffix-small { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-small .nb-form-field-prefix-small { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-small .nb-form-field-prefix-small { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-small .nb-form-field-suffix-small { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-small .nb-form-field-suffix-small { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-small [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-small [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-small .select-button { padding-left: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-small .select-button { padding-right: var(--form-field-addon-small-width); } nb-select-with-autocomplete.appearance-filled.size-medium .select-button { padding: var(--select-filled-medium-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-medium .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-medium .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-filled.size-medium .nb-form-field-prefix-medium, nb-select-with-autocomplete.appearance-filled.size-medium .nb-form-field-suffix-medium { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-medium .nb-form-field-prefix-medium { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-medium .nb-form-field-prefix-medium { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-medium .nb-form-field-suffix-medium { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-medium .nb-form-field-suffix-medium { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-medium [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-medium [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-medium .select-button { padding-left: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-medium .select-button { padding-right: var(--form-field-addon-medium-width); } nb-select-with-autocomplete.appearance-filled.size-large .select-button { padding: var(--select-filled-large-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-large .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-large .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-filled.size-large .nb-form-field-prefix-large, nb-select-with-autocomplete.appearance-filled.size-large .nb-form-field-suffix-large { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-large .nb-form-field-prefix-large { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-large .nb-form-field-prefix-large { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-large .nb-form-field-suffix-large { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-large .nb-form-field-suffix-large { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-large [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-large [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-large .select-button { padding-left: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-large .select-button { padding-right: var(--form-field-addon-large-width); } nb-select-with-autocomplete.appearance-filled.size-giant .select-button { padding: var(--select-filled-giant-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-giant .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-giant .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-filled.size-giant .nb-form-field-prefix-giant, nb-select-with-autocomplete.appearance-filled.size-giant .nb-form-field-suffix-giant { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-giant .nb-form-field-prefix-giant { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-giant .nb-form-field-prefix-giant { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-giant .nb-form-field-suffix-giant { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-giant .nb-form-field-suffix-giant { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-filled.size-giant [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-filled.size-giant [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-giant .select-button { padding-left: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-giant .select-button { padding-right: var(--form-field-addon-giant-width); } nb-select-with-autocomplete.appearance-filled.status-basic .select-button { background-color: var(--select-filled-basic-background-color); border-color: var(--select-filled-basic-border-color); color: var(--select-filled-basic-text-color); } nb-select-with-autocomplete.appearance-filled.status-basic .select-button.placeholder { color: var(--select-filled-basic-placeholder-text-color); } nb-select-with-autocomplete.appearance-filled.status-basic .select-button:focus { background-color: var(--select-filled-basic-focus-background-color); border-color: var(--select-filled-basic-focus-border-color); } nb-select-with-autocomplete.appearance-filled.status-basic .select-button:hover { background-color: var(--select-filled-basic-hover-background-color); border-color: var(--select-filled-basic-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-basic .select-button:focus:hover { background-color: var(--select-filled-basic-focus-and-hover-background-color); border-color: var(--select-filled-basic-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-basic .select-button[disabled] { background-color: var(--select-filled-basic-disabled-background-color); border-color: var(--select-filled-basic-disabled-border-color); color: var(--select-filled-basic-disabled-text-color); } nb-select-with-autocomplete.appearance-filled.status-basic .select-button[disabled] nb-icon { color: var(--select-filled-basic-disabled-icon-color); } nb-select-with-autocomplete.appearance-filled.status-basic .select-button nb-icon { color: var(--select-filled-basic-icon-color); } nb-select-with-autocomplete.appearance-filled.status-primary .select-button { background-color: var(--select-filled-primary-background-color); border-color: var(--select-filled-primary-border-color); color: var(--select-filled-primary-text-color); } nb-select-with-autocomplete.appearance-filled.status-primary .select-button.placeholder { color: var(--select-filled-primary-placeholder-text-color); } nb-select-with-autocomplete.appearance-filled.status-primary .select-button:focus { background-color: var(--select-filled-primary-focus-background-color); border-color: var(--select-filled-primary-focus-border-color); } nb-select-with-autocomplete.appearance-filled.status-primary .select-button:hover { background-color: var(--select-filled-primary-hover-background-color); border-color: var(--select-filled-primary-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-primary .select-button:focus:hover { background-color: var(--select-filled-primary-focus-and-hover-background-color); border-color: var(--select-filled-primary-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-primary .select-button[disabled] { background-color: var(--select-filled-primary-disabled-background-color); border-color: var(--select-filled-primary-disabled-border-color); color: var(--select-filled-primary-disabled-text-color); } nb-select-with-autocomplete.appearance-filled.status-primary .select-button[disabled] nb-icon { color: var(--select-filled-primary-disabled-icon-color); } nb-select-with-autocomplete.appearance-filled.status-primary .select-button nb-icon { color: var(--select-filled-primary-icon-color); } nb-select-with-autocomplete.appearance-filled.status-success .select-button { background-color: var(--select-filled-success-background-color); border-color: var(--select-filled-success-border-color); color: var(--select-filled-success-text-color); } nb-select-with-autocomplete.appearance-filled.status-success .select-button.placeholder { color: var(--select-filled-success-placeholder-text-color); } nb-select-with-autocomplete.appearance-filled.status-success .select-button:focus { background-color: var(--select-filled-success-focus-background-color); border-color: var(--select-filled-success-focus-border-color); } nb-select-with-autocomplete.appearance-filled.status-success .select-button:hover { background-color: var(--select-filled-success-hover-background-color); border-color: var(--select-filled-success-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-success .select-button:focus:hover { background-color: var(--select-filled-success-focus-and-hover-background-color); border-color: var(--select-filled-success-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-success .select-button[disabled] { background-color: var(--select-filled-success-disabled-background-color); border-color: var(--select-filled-success-disabled-border-color); color: var(--select-filled-success-disabled-text-color); } nb-select-with-autocomplete.appearance-filled.status-success .select-button[disabled] nb-icon { color: var(--select-filled-success-disabled-icon-color); } nb-select-with-autocomplete.appearance-filled.status-success .select-button nb-icon { color: var(--select-filled-success-icon-color); } nb-select-with-autocomplete.appearance-filled.status-warning .select-button { background-color: var(--select-filled-warning-background-color); border-color: var(--select-filled-warning-border-color); color: var(--select-filled-warning-text-color); } nb-select-with-autocomplete.appearance-filled.status-warning .select-button.placeholder { color: var(--select-filled-warning-placeholder-text-color); } nb-select-with-autocomplete.appearance-filled.status-warning .select-button:focus { background-color: var(--select-filled-warning-focus-background-color); border-color: var(--select-filled-warning-focus-border-color); } nb-select-with-autocomplete.appearance-filled.status-warning .select-button:hover { background-color: var(--select-filled-warning-hover-background-color); border-color: var(--select-filled-warning-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-warning .select-button:focus:hover { background-color: var(--select-filled-warning-focus-and-hover-background-color); border-color: var(--select-filled-warning-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-warning .select-button[disabled] { background-color: var(--select-filled-warning-disabled-background-color); border-color: var(--select-filled-warning-disabled-border-color); color: var(--select-filled-warning-disabled-text-color); } nb-select-with-autocomplete.appearance-filled.status-warning .select-button[disabled] nb-icon { color: var(--select-filled-warning-disabled-icon-color); } nb-select-with-autocomplete.appearance-filled.status-warning .select-button nb-icon { color: var(--select-filled-warning-icon-color); } nb-select-with-autocomplete.appearance-filled.status-danger .select-button { background-color: var(--select-filled-danger-background-color); border-color: var(--select-filled-danger-border-color); color: var(--select-filled-danger-text-color); } nb-select-with-autocomplete.appearance-filled.status-danger .select-button.placeholder { color: var(--select-filled-danger-placeholder-text-color); } nb-select-with-autocomplete.appearance-filled.status-danger .select-button:focus { background-color: var(--select-filled-danger-focus-background-color); border-color: var(--select-filled-danger-focus-border-color); } nb-select-with-autocomplete.appearance-filled.status-danger .select-button:hover { background-color: var(--select-filled-danger-hover-background-color); border-color: var(--select-filled-danger-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-danger .select-button:focus:hover { background-color: var(--select-filled-danger-focus-and-hover-background-color); border-color: var(--select-filled-danger-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-danger .select-button[disabled] { background-color: var(--select-filled-danger-disabled-background-color); border-color: var(--select-filled-danger-disabled-border-color); color: var(--select-filled-danger-disabled-text-color); } nb-select-with-autocomplete.appearance-filled.status-danger .select-button[disabled] nb-icon { color: var(--select-filled-danger-disabled-icon-color); } nb-select-with-autocomplete.appearance-filled.status-danger .select-button nb-icon { color: var(--select-filled-danger-icon-color); } nb-select-with-autocomplete.appearance-filled.status-info .select-button { background-color: var(--select-filled-info-background-color); border-color: var(--select-filled-info-border-color); color: var(--select-filled-info-text-color); } nb-select-with-autocomplete.appearance-filled.status-info .select-button.placeholder { color: var(--select-filled-info-placeholder-text-color); } nb-select-with-autocomplete.appearance-filled.status-info .select-button:focus { background-color: var(--select-filled-info-focus-background-color); border-color: var(--select-filled-info-focus-border-color); } nb-select-with-autocomplete.appearance-filled.status-info .select-button:hover { background-color: var(--select-filled-info-hover-background-color); border-color: var(--select-filled-info-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-info .select-button:focus:hover { background-color: var(--select-filled-info-focus-and-hover-background-color); border-color: var(--select-filled-info-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-info .select-button[disabled] { background-color: var(--select-filled-info-disabled-background-color); border-color: var(--select-filled-info-disabled-border-color); color: var(--select-filled-info-disabled-text-color); } nb-select-with-autocomplete.appearance-filled.status-info .select-button[disabled] nb-icon { color: var(--select-filled-info-disabled-icon-color); } nb-select-with-autocomplete.appearance-filled.status-info .select-button nb-icon { color: var(--select-filled-info-icon-color); } nb-select-with-autocomplete.appearance-filled.status-control .select-button { background-color: var(--select-filled-control-background-color); border-color: var(--select-filled-control-border-color); color: var(--select-filled-control-text-color); } nb-select-with-autocomplete.appearance-filled.status-control .select-button.placeholder { color: var(--select-filled-control-placeholder-text-color); } nb-select-with-autocomplete.appearance-filled.status-control .select-button:focus { background-color: var(--select-filled-control-focus-background-color); border-color: var(--select-filled-control-focus-border-color); } nb-select-with-autocomplete.appearance-filled.status-control .select-button:hover { background-color: var(--select-filled-control-hover-background-color); border-color: var(--select-filled-control-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-control .select-button:focus:hover { background-color: var(--select-filled-control-focus-and-hover-background-color); border-color: var(--select-filled-control-focus-and-hover-border-color); } nb-select-with-autocomplete.appearance-filled.status-control .select-button[disabled] { background-color: var(--select-filled-control-disabled-background-color); border-color: var(--select-filled-control-disabled-border-color); color: var(--select-filled-control-disabled-text-color); } nb-select-with-autocomplete.appearance-filled.status-control .select-button[disabled] nb-icon { color: var(--select-filled-control-disabled-icon-color); } nb-select-with-autocomplete.appearance-filled.status-control .select-button nb-icon { color: var(--select-filled-control-icon-color); } nb-select-with-autocomplete.appearance-hero .select-button { border: none; } nb-select-with-autocomplete.appearance-hero.size-tiny .select-button { padding: var(--select-hero-tiny-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-tiny .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-tiny .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-hero.size-tiny .nb-form-field-prefix-tiny, nb-select-with-autocomplete.appearance-hero.size-tiny .nb-form-field-suffix-tiny { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-tiny .nb-form-field-prefix-tiny { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-tiny .nb-form-field-prefix-tiny { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-tiny .nb-form-field-suffix-tiny { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-tiny .nb-form-field-suffix-tiny { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-tiny [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-tiny [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-tiny .select-button { padding-left: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-tiny .select-button { padding-right: var(--form-field-addon-tiny-width); } nb-select-with-autocomplete.appearance-hero.size-small .select-button { padding: var(--select-hero-small-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-small .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-small .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-hero.size-small .nb-form-field-prefix-small, nb-select-with-autocomplete.appearance-hero.size-small .nb-form-field-suffix-small { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-small .nb-form-field-prefix-small { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-small .nb-form-field-prefix-small { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-small .nb-form-field-suffix-small { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-small .nb-form-field-suffix-small { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-small [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-small [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-small .select-button { padding-left: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-small .select-button { padding-right: var(--form-field-addon-small-width); } nb-select-with-autocomplete.appearance-hero.size-medium .select-button { padding: var(--select-hero-medium-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-medium .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-medium .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-hero.size-medium .nb-form-field-prefix-medium, nb-select-with-autocomplete.appearance-hero.size-medium .nb-form-field-suffix-medium { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-medium .nb-form-field-prefix-medium { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-medium .nb-form-field-prefix-medium { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-medium .nb-form-field-suffix-medium { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-medium .nb-form-field-suffix-medium { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-medium [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-medium [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-medium .select-button { padding-left: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-medium .select-button { padding-right: var(--form-field-addon-medium-width); } nb-select-with-autocomplete.appearance-hero.size-large .select-button { padding: var(--select-hero-large-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-large .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-large .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-hero.size-large .nb-form-field-prefix-large, nb-select-with-autocomplete.appearance-hero.size-large .nb-form-field-suffix-large { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-large .nb-form-field-prefix-large { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-large .nb-form-field-prefix-large { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-large .nb-form-field-suffix-large { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-large .nb-form-field-suffix-large { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-large [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-large [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-large .select-button { padding-left: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-large .select-button { padding-right: var(--form-field-addon-large-width); } nb-select-with-autocomplete.appearance-hero.size-giant .select-button { padding: var(--select-hero-giant-padding); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-giant .select-button { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-giant .select-button { padding-left: var(--select-icon-offset); } nb-select-with-autocomplete.appearance-hero.size-giant .nb-form-field-prefix-giant, nb-select-with-autocomplete.appearance-hero.size-giant .nb-form-field-suffix-giant { width: var(--select-icon-offset); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-giant .nb-form-field-prefix-giant { margin-right: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-giant .nb-form-field-prefix-giant { margin-left: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-giant .nb-form-field-suffix-giant { margin-left: calc(var(--select-icon-offset) * -1); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-giant .nb-form-field-suffix-giant { margin-right: calc(var(--select-icon-offset) * -1); } [dir=ltr] nb-select-with-autocomplete.appearance-hero.size-giant [nbInput] { padding-right: var(--select-icon-offset); } [dir=rtl] nb-select-with-autocomplete.appearance-hero.size-giant [nbInput] { padding-left: var(--select-icon-offset); } [dir=ltr] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-giant .select-button { padding-left: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-giant .select-button { padding-right: var(--form-field-addon-giant-width); } nb-select-with-autocomplete.appearance-hero.status-basic .select-button { background-image: linear-gradient(to right, var(--select-hero-basic-left-background-color), var(--select-hero-basic-right-background-color)); color: var(--select-hero-basic-text-color); } nb-select-with-autocomplete.appearance-hero.status-basic .select-button.placeholder { color: var(--select-hero-basic-placeholder-text-color); } nb-select-with-autocomplete.appearance-hero.status-basic .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-basic-focus-left-background-color), var(--select-hero-basic-focus-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-basic .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-basic-hover-left-background-color), var(--select-hero-basic-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-basic .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-basic-focus-and-hover-left-background-color), var(--select-hero-basic-focus-and-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-basic .select-button[disabled] { color: var(--select-hero-basic-disabled-text-color); background-color: var(--select-hero-basic-disabled-background-color); background-image: none; } nb-select-with-autocomplete.appearance-hero.status-basic .select-button[disabled] nb-icon { color: var(--select-hero-basic-disabled-icon-color); } nb-select-with-autocomplete.appearance-hero.status-basic .select-button nb-icon { color: var(--select-hero-basic-icon-color); } nb-select-with-autocomplete.appearance-hero.status-primary .select-button { background-image: linear-gradient(to right, var(--select-hero-primary-left-background-color), var(--select-hero-primary-right-background-color)); color: var(--select-hero-primary-text-color); } nb-select-with-autocomplete.appearance-hero.status-primary .select-button.placeholder { color: var(--select-hero-primary-placeholder-text-color); } nb-select-with-autocomplete.appearance-hero.status-primary .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-primary-focus-left-background-color), var(--select-hero-primary-focus-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-primary .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-primary-hover-left-background-color), var(--select-hero-primary-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-primary .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-primary-focus-and-hover-left-background-color), var(--select-hero-primary-focus-and-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-primary .select-button[disabled] { color: var(--select-hero-primary-disabled-text-color); background-color: var(--select-hero-primary-disabled-background-color); background-image: none; } nb-select-with-autocomplete.appearance-hero.status-primary .select-button[disabled] nb-icon { color: var(--select-hero-primary-disabled-icon-color); } nb-select-with-autocomplete.appearance-hero.status-primary .select-button nb-icon { color: var(--select-hero-primary-icon-color); } nb-select-with-autocomplete.appearance-hero.status-success .select-button { background-image: linear-gradient(to right, var(--select-hero-success-left-background-color), var(--select-hero-success-right-background-color)); color: var(--select-hero-success-text-color); } nb-select-with-autocomplete.appearance-hero.status-success .select-button.placeholder { color: var(--select-hero-success-placeholder-text-color); } nb-select-with-autocomplete.appearance-hero.status-success .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-success-focus-left-background-color), var(--select-hero-success-focus-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-success .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-success-hover-left-background-color), var(--select-hero-success-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-success .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-success-focus-and-hover-left-background-color), var(--select-hero-success-focus-and-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-success .select-button[disabled] { color: var(--select-hero-success-disabled-text-color); background-color: var(--select-hero-success-disabled-background-color); background-image: none; } nb-select-with-autocomplete.appearance-hero.status-success .select-button[disabled] nb-icon { color: var(--select-hero-success-disabled-icon-color); } nb-select-with-autocomplete.appearance-hero.status-success .select-button nb-icon { color: var(--select-hero-success-icon-color); } nb-select-with-autocomplete.appearance-hero.status-warning .select-button { background-image: linear-gradient(to right, var(--select-hero-warning-left-background-color), var(--select-hero-warning-right-background-color)); color: var(--select-hero-warning-text-color); } nb-select-with-autocomplete.appearance-hero.status-warning .select-button.placeholder { color: var(--select-hero-warning-placeholder-text-color); } nb-select-with-autocomplete.appearance-hero.status-warning .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-warning-focus-left-background-color), var(--select-hero-warning-focus-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-warning .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-warning-hover-left-background-color), var(--select-hero-warning-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-warning .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-warning-focus-and-hover-left-background-color), var(--select-hero-warning-focus-and-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-warning .select-button[disabled] { color: var(--select-hero-warning-disabled-text-color); background-color: var(--select-hero-warning-disabled-background-color); background-image: none; } nb-select-with-autocomplete.appearance-hero.status-warning .select-button[disabled] nb-icon { color: var(--select-hero-warning-disabled-icon-color); } nb-select-with-autocomplete.appearance-hero.status-warning .select-button nb-icon { color: var(--select-hero-warning-icon-color); } nb-select-with-autocomplete.appearance-hero.status-danger .select-button { background-image: linear-gradient(to right, var(--select-hero-danger-left-background-color), var(--select-hero-danger-right-background-color)); color: var(--select-hero-danger-text-color); } nb-select-with-autocomplete.appearance-hero.status-danger .select-button.placeholder { color: var(--select-hero-danger-placeholder-text-color); } nb-select-with-autocomplete.appearance-hero.status-danger .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-danger-focus-left-background-color), var(--select-hero-danger-focus-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-danger .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-danger-hover-left-background-color), var(--select-hero-danger-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-danger .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-danger-focus-and-hover-left-background-color), var(--select-hero-danger-focus-and-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-danger .select-button[disabled] { color: var(--select-hero-danger-disabled-text-color); background-color: var(--select-hero-danger-disabled-background-color); background-image: none; } nb-select-with-autocomplete.appearance-hero.status-danger .select-button[disabled] nb-icon { color: var(--select-hero-danger-disabled-icon-color); } nb-select-with-autocomplete.appearance-hero.status-danger .select-button nb-icon { color: var(--select-hero-danger-icon-color); } nb-select-with-autocomplete.appearance-hero.status-info .select-button { background-image: linear-gradient(to right, var(--select-hero-info-left-background-color), var(--select-hero-info-right-background-color)); color: var(--select-hero-info-text-color); } nb-select-with-autocomplete.appearance-hero.status-info .select-button.placeholder { color: var(--select-hero-info-placeholder-text-color); } nb-select-with-autocomplete.appearance-hero.status-info .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-info-focus-left-background-color), var(--select-hero-info-focus-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-info .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-info-hover-left-background-color), var(--select-hero-info-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-info .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-info-focus-and-hover-left-background-color), var(--select-hero-info-focus-and-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-info .select-button[disabled] { color: var(--select-hero-info-disabled-text-color); background-color: var(--select-hero-info-disabled-background-color); background-image: none; } nb-select-with-autocomplete.appearance-hero.status-info .select-button[disabled] nb-icon { color: var(--select-hero-info-disabled-icon-color); } nb-select-with-autocomplete.appearance-hero.status-info .select-button nb-icon { color: var(--select-hero-info-icon-color); } nb-select-with-autocomplete.appearance-hero.status-control .select-button { background-image: linear-gradient(to right, var(--select-hero-control-left-background-color), var(--select-hero-control-right-background-color)); color: var(--select-hero-control-text-color); } nb-select-with-autocomplete.appearance-hero.status-control .select-button.placeholder { color: var(--select-hero-control-placeholder-text-color); } nb-select-with-autocomplete.appearance-hero.status-control .select-button:focus { background-image: linear-gradient(to right, var(--select-hero-control-focus-left-background-color), var(--select-hero-control-focus-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-control .select-button:hover { background-image: linear-gradient(to right, var(--select-hero-control-hover-left-background-color), var(--select-hero-control-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-control .select-button:focus:hover { background-image: linear-gradient(to right, var(--select-hero-control-focus-and-hover-left-background-color), var(--select-hero-control-focus-and-hover-right-background-color)); } nb-select-with-autocomplete.appearance-hero.status-control .select-button[disabled] { color: var(--select-hero-control-disabled-text-color); background-color: var(--select-hero-control-disabled-background-color); background-image: none; } nb-select-with-autocomplete.appearance-hero.status-control .select-button[disabled] nb-icon { color: var(--select-hero-control-disabled-icon-color); } nb-select-with-autocomplete.appearance-hero.status-control .select-button nb-icon { color: var(--select-hero-control-icon-color); } nb-form-field nb-select-with-autocomplete { width: 100%; } nb-option-list { background-color: var(--option-list-background-color); border-color: var(--option-list-border-color); border-style: var(--option-list-border-style); border-width: var(--option-list-border-width); border-radius: var(--option-list-border-radius); box-shadow: var(--option-list-shadow); overflow: hidden; } nb-option-list .option-list { height: 100%; max-height: var(--option-list-max-height); margin: 0; padding: 0; overflow: auto; } nb-option-list.position-top { border-bottom: var(--option-list-adjacent-border-width) var(--option-list-adjacent-border-style) var(--option-list-adjacent-border-color); } nb-option-list.position-bottom { border-top: var(--option-list-adjacent-border-width) var(--option-list-adjacent-border-style) var(--option-list-adjacent-border-color); } nb-option-group { color: var(--option-group-text-color); font-family: var(--option-text-font-family); } nb-option-list.size-tiny nb-option-group { font-size: var(--option-tiny-text-font-size); font-weight: var(--option-tiny-text-font-weight); line-height: var(--option-tiny-text-line-height); } nb-option-list.size-tiny nb-option-group .option-group-title { padding: var(--option-tiny-padding); } nb-option-list.size-tiny nb-option-group nb-option { padding-left: var(--option-group-tiny-start-padding); } nb-option-list.size-small nb-option-group { font-size: var(--option-small-text-font-size); font-weight: var(--option-small-text-font-weight); line-height: var(--option-small-text-line-height); } nb-option-list.size-small nb-option-group .option-group-title { padding: var(--option-small-padding); } nb-option-list.size-small nb-option-group nb-option { padding-left: var(--option-group-small-start-padding); } nb-option-list.size-medium nb-option-group { font-size: var(--option-medium-text-font-size); font-weight: var(--option-medium-text-font-weight); line-height: var(--option-medium-text-line-height); } nb-option-list.size-medium nb-option-group .option-group-title { padding: var(--option-medium-padding); } nb-option-list.size-medium nb-option-group nb-option { padding-left: var(--option-group-medium-start-padding); } nb-option-list.size-large nb-option-group { font-size: var(--option-large-text-font-size); font-weight: var(--option-large-text-font-weight); line-height: var(--option-large-text-line-height); } nb-option-list.size-large nb-option-group .option-group-title { padding: var(--option-large-padding); } nb-option-list.size-large nb-option-group nb-option { padding-left: var(--option-group-large-start-padding); } nb-option-list.size-giant nb-option-group { font-size: var(--option-giant-text-font-size); font-weight: var(--option-giant-text-font-weight); line-height: var(--option-giant-text-line-height); } nb-option-list.size-giant nb-option-group .option-group-title { padding: var(--option-giant-padding); } nb-option-list.size-giant nb-option-group nb-option { padding-left: var(--option-group-giant-start-padding); } nb-option { background-color: var(--option-background-color); color: var(--option-text-color); font-family: var(--option-text-font-family); } nb-option.active { background-color: var(--option-active-background-color); color: var(--option-active-text-color); } nb-option.selected { background-color: var(--option-selected-background-color); color: var(--option-selected-text-color); } nb-option:focus { background-color: var(--option-focus-background-color); color: var(--option-focus-text-color); outline: none; } nb-option:focus.selected { background-color: var(--option-selected-focus-background-color); color: var(--option-selected-focus-text-color); } nb-option:hover { background-color: var(--option-hover-background-color); color: var(--option-hover-text-color); } nb-option:hover.selected { background-color: var(--option-selected-hover-background-color); color: var(--option-selected-hover-text-color); } nb-option.multiple.selected { background-color: var(--option-background-color); color: var(--option-text-color); } nb-option.multiple:focus { background-color: var(--option-focus-background-color); color: var(--option-focus-text-color); } nb-option-list.size-tiny nb-option { font-size: var(--option-tiny-text-font-size); font-weight: var(--option-tiny-text-font-weight); line-height: var(--option-tiny-text-line-height); padding: var(--option-tiny-padding); } nb-option-list.size-small nb-option { font-size: var(--option-small-text-font-size); font-weight: var(--option-small-text-font-weight); line-height: var(--option-small-text-line-height); padding: var(--option-small-padding); } nb-option-list.size-medium nb-option { font-size: var(--option-medium-text-font-size); font-weight: var(--option-medium-text-font-weight); line-height: var(--option-medium-text-line-height); padding: var(--option-medium-padding); } nb-option-list.size-large nb-option { font-size: var(--option-large-text-font-size); font-weight: var(--option-large-text-font-weight); line-height: var(--option-large-text-line-height); padding: var(--option-large-padding); } nb-option-list.size-giant nb-option { font-size: var(--option-giant-text-font-size); font-weight: var(--option-giant-text-font-weight); line-height: var(--option-giant-text-line-height); padding: var(--option-giant-padding); } nb-option, nb-option-group { -webkit-user-select: none; -moz-user-select: none; user-select: none; } nb-option[disabled], nb-option-group[disabled] { background-color: var(--option-disabled-background-color); color: var(--option-disabled-text-color); } nb-toast { border-style: var(--toastr-border-style); border-width: var(--toastr-border-width); border-radius: var(--toastr-border-radius); padding: var(--toastr-padding); box-shadow: var(--toastr-shadow); } nb-toast .title { font-family: var(--toastr-title-text-font-family); font-size: var(--toastr-title-text-font-size); font-weight: var(--toastr-title-text-font-weight); line-height: var(--toastr-title-text-line-height); } nb-toast .message { font-family: var(--toastr-text-font-family); font-size: var(--toastr-text-font-size); font-weight: var(--toastr-text-font-weight); line-height: var(--toastr-text-line-height); } nb-toast .icon-container { border-radius: var(--toastr-border-radius); min-width: 2.5rem; min-height: 2.5rem; display: flex; justify-content: center; align-items: center; } [dir=ltr] nb-toast .icon-container { margin-right: 1.25rem; } [dir=rtl] nb-toast .icon-container { margin-left: 1.25rem; } nb-toast .icon-container nb-icon { font-size: 1.5rem; } nb-toast.status-basic { background: var(--toastr-basic-background-color); border-color: var(--toastr-basic-border-color); color: var(--toastr-basic-text-color); } nb-toast.status-basic .title { color: var(--toastr-basic-text-color); } nb-toast.status-basic.destroy-by-click:hover { background: var(--toastr-destroyable-basic-hover-background-color); border-color: var(--toastr-destroyable-basic-hover-border-color); } nb-toast.status-basic .icon-container { background: var(--toastr-icon-basic-background-color); color: var(--toastr-icon-basic-color); } nb-toast.status-primary { background: var(--toastr-primary-background-color); border-color: var(--toastr-primary-border-color); color: var(--toastr-primary-text-color); } nb-toast.status-primary .title { color: var(--toastr-primary-text-color); } nb-toast.status-primary.destroy-by-click:hover { background: var(--toastr-destroyable-primary-hover-background-color); border-color: var(--toastr-destroyable-primary-hover-border-color); } nb-toast.status-primary .icon-container { background: var(--toastr-icon-primary-background-color); color: var(--toastr-icon-primary-color); } nb-toast.status-success { background: var(--toastr-success-background-color); border-color: var(--toastr-success-border-color); color: var(--toastr-success-text-color); } nb-toast.status-success .title { color: var(--toastr-success-text-color); } nb-toast.status-success.destroy-by-click:hover { background: var(--toastr-destroyable-success-hover-background-color); border-color: var(--toastr-destroyable-success-hover-border-color); } nb-toast.status-success .icon-container { background: var(--toastr-icon-success-background-color); color: var(--toastr-icon-success-color); } nb-toast.status-warning { background: var(--toastr-warning-background-color); border-color: var(--toastr-warning-border-color); color: var(--toastr-warning-text-color); } nb-toast.status-warning .title { color: var(--toastr-warning-text-color); } nb-toast.status-warning.destroy-by-click:hover { background: var(--toastr-destroyable-warning-hover-background-color); border-color: var(--toastr-destroyable-warning-hover-border-color); } nb-toast.status-warning .icon-container { background: var(--toastr-icon-warning-background-color); color: var(--toastr-icon-warning-color); } nb-toast.status-danger { background: var(--toastr-danger-background-color); border-color: var(--toastr-danger-border-color); color: var(--toastr-danger-text-color); } nb-toast.status-danger .title { color: var(--toastr-danger-text-color); } nb-toast.status-danger.destroy-by-click:hover { background: var(--toastr-destroyable-danger-hover-background-color); border-color: var(--toastr-destroyable-danger-hover-border-color); } nb-toast.status-danger .icon-container { background: var(--toastr-icon-danger-background-color); color: var(--toastr-icon-danger-color); } nb-toast.status-info { background: var(--toastr-info-background-color); border-color: var(--toastr-info-border-color); color: var(--toastr-info-text-color); } nb-toast.status-info .title { color: var(--toastr-info-text-color); } nb-toast.status-info.destroy-by-click:hover { background: var(--toastr-destroyable-info-hover-background-color); border-color: var(--toastr-destroyable-info-hover-border-color); } nb-toast.status-info .icon-container { background: var(--toastr-icon-info-background-color); color: var(--toastr-icon-info-color); } nb-toast.status-control { background: var(--toastr-control-background-color); border-color: var(--toastr-control-border-color); color: var(--toastr-control-text-color); } nb-toast.status-control .title { color: var(--toastr-control-text-color); } nb-toast.status-control.destroy-by-click:hover { background: var(--toastr-destroyable-control-hover-background-color); border-color: var(--toastr-destroyable-control-hover-border-color); } nb-toast.status-control .icon-container { background: var(--toastr-icon-control-background-color); color: var(--toastr-icon-control-color); } .toastr-overlay-container { z-index: 1041; } nb-tooltip { box-shadow: var(--tooltip-shadow); background: var(--tooltip-background-color); border: var(--tooltip-border-width) var(--tooltip-border-style) var(--tooltip-border-color); border-radius: var(--tooltip-border-radius); padding: var(--tooltip-padding); max-width: var(--tooltip-max-width); } nb-tooltip nb-icon:only-child { height: var(--tooltip-icon-height); width: var(--tooltip-icon-width); } nb-tooltip nb-icon:not(:only-child) { height: var(--tooltip-text-font-size); width: var(--tooltip-text-font-size); } nb-tooltip .content { color: var(--tooltip-text-color); font-family: var(--tooltip-text-font-family); font-size: var(--tooltip-text-font-size); font-weight: var(--tooltip-text-font-weight); line-height: var(--tooltip-text-line-height); } nb-tooltip .arrow { border-bottom: 6px var(--tooltip-border-style) var(--tooltip-background-color); } nb-tooltip.status-basic { background: var(--tooltip-basic-background-color); border-color: var(--tooltip-basic-border-color); } nb-tooltip.status-basic .arrow { border-bottom-color: var(--tooltip-basic-background-color); } nb-tooltip.status-basic .content { color: var(--tooltip-basic-text-color); } nb-tooltip.status-primary { background: var(--tooltip-primary-background-color); border-color: var(--tooltip-primary-border-color); } nb-tooltip.status-primary .arrow { border-bottom-color: var(--tooltip-primary-background-color); } nb-tooltip.status-primary .content { color: var(--tooltip-primary-text-color); } nb-tooltip.status-success { background: var(--tooltip-success-background-color); border-color: var(--tooltip-success-border-color); } nb-tooltip.status-success .arrow { border-bottom-color: var(--tooltip-success-background-color); } nb-tooltip.status-success .content { color: var(--tooltip-success-text-color); } nb-tooltip.status-warning { background: var(--tooltip-warning-background-color); border-color: var(--tooltip-warning-border-color); } nb-tooltip.status-warning .arrow { border-bottom-color: var(--tooltip-warning-background-color); } nb-tooltip.status-warning .content { color: var(--tooltip-warning-text-color); } nb-tooltip.status-danger { background: var(--tooltip-danger-background-color); border-color: var(--tooltip-danger-border-color); } nb-tooltip.status-danger .arrow { border-bottom-color: var(--tooltip-danger-background-color); } nb-tooltip.status-danger .content { color: var(--tooltip-danger-text-color); } nb-tooltip.status-info { background: var(--tooltip-info-background-color); border-color: var(--tooltip-info-border-color); } nb-tooltip.status-info .arrow { border-bottom-color: var(--tooltip-info-background-color); } nb-tooltip.status-info .content { color: var(--tooltip-info-text-color); } nb-tooltip.status-control { background: var(--tooltip-control-background-color); border-color: var(--tooltip-control-border-color); } nb-tooltip.status-control .arrow { border-bottom-color: var(--tooltip-control-background-color); } nb-tooltip.status-control .content { color: var(--tooltip-control-text-color); } nb-datepicker-container nb-card { border-color: var(--datepicker-border-color); border-style: var(--datepicker-border-style); border-width: var(--datepicker-border-width); border-radius: var(--datepicker-border-radius); background: var(--datepicker-background-color); box-shadow: var(--datepicker-shadow); } nb-calendar-with-time .nb-timepicker-container, nb-calendar-with-time nb-base-calendar nb-card { border: none; } nb-calendar-with-time .column-header { border-top: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border-color); border-radius: 0; } nb-calendar-with-time .timepicker-section.size-large nb-list-item { height: var(--calendar-day-cell-large-height); } nb-calendar-with-time .timepicker-section.size-large .header-cell { height: var(--calendar-weekday-large-height); } [dir=ltr] nb-calendar-with-time .timepicker-section { border-left: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border-color); } [dir=rtl] nb-calendar-with-time .timepicker-section { border-right: var(--datepicker-border-width) var(--datepicker-border-style) var(--datepicker-border-color); } nb-calendar-with-time .timepicker-single-column-width { width: var(--timepicker-single-column-width); } nb-calendar-with-time .timepicker-multiple-column-width { width: var(--timepicker-multiple-column-width); } nb-calendar-with-time .picker-title { height: var(--timepicker-title-height); padding: var(--timepicker-title-padding); } nb-radio .outer-circle, nb-radio .inner-circle { height: var(--radio-height); width: var(--radio-width); } nb-radio .outer-circle { border-style: var(--radio-border-style); border-width: var(--radio-border-width); } nb-radio .native-input:enabled:focus + .outer-circle { box-shadow: 0 0 0 var(--radio-outline-width) var(--radio-outline-color); } nb-radio.status-basic .native-input:enabled + .outer-circle { background-color: var(--radio-basic-background-color); border-color: var(--radio-basic-border-color); } nb-radio.status-basic .native-input:enabled:checked + .outer-circle { background-color: var(--radio-basic-checked-background-color); border-color: var(--radio-basic-checked-border-color); } nb-radio.status-basic .native-input:enabled:checked ~ .inner-circle { background-color: var(--radio-basic-inner-circle-color); } nb-radio.status-basic .native-input:enabled:focus + .outer-circle { background-color: var(--radio-basic-focus-background-color); border-color: var(--radio-basic-focus-border-color); } nb-radio.status-basic .native-input:enabled:checked:focus + .outer-circle { background-color: var(--radio-basic-focus-checked-background-color); border-color: var(--radio-basic-focus-checked-border-color); } nb-radio.status-basic .native-input:enabled:checked:focus ~ .inner-circle { background-color: var(--radio-basic-focus-inner-circle-color); } nb-radio.status-basic label:hover .native-input:enabled + .outer-circle { background-color: var(--radio-basic-hover-background-color); border-color: var(--radio-basic-hover-border-color); } nb-radio.status-basic label:hover .native-input:checked:enabled + .outer-circle { background-color: var(--radio-basic-hover-checked-background-color); border-color: var(--radio-basic-hover-checked-border-color); } nb-radio.status-basic label:hover .native-input:checked:enabled ~ .inner-circle { background-color: var(--radio-basic-hover-inner-circle-color); } nb-radio.status-basic label .native-input:enabled:active + .outer-circle { background-color: var(--radio-basic-active-background-color); border-color: var(--radio-basic-active-border-color); } nb-radio.status-basic label .native-input:enabled:checked:active + .outer-circle { background-color: var(--radio-basic-active-checked-background-color); border-color: var(--radio-basic-active-checked-border-color); } nb-radio.status-basic label .native-input:enabled:checked:active ~ .inner-circle { background-color: var(--radio-basic-active-inner-circle-color); } nb-radio.status-basic .text { color: var(--radio-basic-text-color); } nb-radio.status-basic .native-input:disabled + .outer-circle { background-color: var(--radio-basic-disabled-background-color); border-color: var(--radio-basic-disabled-border-color); } nb-radio.status-basic .native-input:disabled ~ .text { color: var(--radio-basic-disabled-text-color); } nb-radio.status-basic .native-input:disabled:checked + .outer-circle { background-color: var(--radio-basic-disabled-checked-background-color); border-color: var(--radio-basic-disabled-checked-border-color); } nb-radio.status-basic .native-input:disabled:checked ~ .inner-circle { background-color: var(--radio-basic-disabled-checked-inner-circle-color); } nb-radio.status-primary .native-input:enabled + .outer-circle { background-color: var(--radio-primary-background-color); border-color: var(--radio-primary-border-color); } nb-radio.status-primary .native-input:enabled:checked + .outer-circle { background-color: var(--radio-primary-checked-background-color); border-color: var(--radio-primary-checked-border-color); } nb-radio.status-primary .native-input:enabled:checked ~ .inner-circle { background-color: var(--radio-primary-inner-circle-color); } nb-radio.status-primary .native-input:enabled:focus + .outer-circle { background-color: var(--radio-primary-focus-background-color); border-color: var(--radio-primary-focus-border-color); } nb-radio.status-primary .native-input:enabled:checked:focus + .outer-circle { background-color: var(--radio-primary-focus-checked-background-color); border-color: var(--radio-primary-focus-checked-border-color); } nb-radio.status-primary .native-input:enabled:checked:focus ~ .inner-circle { background-color: var(--radio-primary-focus-inner-circle-color); } nb-radio.status-primary label:hover .native-input:enabled + .outer-circle { background-color: var(--radio-primary-hover-background-color); border-color: var(--radio-primary-hover-border-color); } nb-radio.status-primary label:hover .native-input:checked:enabled + .outer-circle { background-color: var(--radio-primary-hover-checked-background-color); border-color: var(--radio-primary-hover-checked-border-color); } nb-radio.status-primary label:hover .native-input:checked:enabled ~ .inner-circle { background-color: var(--radio-primary-hover-inner-circle-color); } nb-radio.status-primary label .native-input:enabled:active + .outer-circle { background-color: var(--radio-primary-active-background-color); border-color: var(--radio-primary-active-border-color); } nb-radio.status-primary label .native-input:enabled:checked:active + .outer-circle { background-color: var(--radio-primary-active-checked-background-color); border-color: var(--radio-primary-active-checked-border-color); } nb-radio.status-primary label .native-input:enabled:checked:active ~ .inner-circle { background-color: var(--radio-primary-active-inner-circle-color); } nb-radio.status-primary .text { color: var(--radio-primary-text-color); } nb-radio.status-primary .native-input:disabled + .outer-circle { background-color: var(--radio-primary-disabled-background-color); border-color: var(--radio-primary-disabled-border-color); } nb-radio.status-primary .native-input:disabled ~ .text { color: var(--radio-primary-disabled-text-color); } nb-radio.status-primary .native-input:disabled:checked + .outer-circle { background-color: var(--radio-primary-disabled-checked-background-color); border-color: var(--radio-primary-disabled-checked-border-color); } nb-radio.status-primary .native-input:disabled:checked ~ .inner-circle { background-color: var(--radio-primary-disabled-checked-inner-circle-color); } nb-radio.status-success .native-input:enabled + .outer-circle { background-color: var(--radio-success-background-color); border-color: var(--radio-success-border-color); } nb-radio.status-success .native-input:enabled:checked + .outer-circle { background-color: var(--radio-success-checked-background-color); border-color: var(--radio-success-checked-border-color); } nb-radio.status-success .native-input:enabled:checked ~ .inner-circle { background-color: var(--radio-success-inner-circle-color); } nb-radio.status-success .native-input:enabled:focus + .outer-circle { background-color: var(--radio-success-focus-background-color); border-color: var(--radio-success-focus-border-color); } nb-radio.status-success .native-input:enabled:checked:focus + .outer-circle { background-color: var(--radio-success-focus-checked-background-color); border-color: var(--radio-success-focus-checked-border-color); } nb-radio.status-success .native-input:enabled:checked:focus ~ .inner-circle { background-color: var(--radio-success-focus-inner-circle-color); } nb-radio.status-success label:hover .native-input:enabled + .outer-circle { background-color: var(--radio-success-hover-background-color); border-color: var(--radio-success-hover-border-color); } nb-radio.status-success label:hover .native-input:checked:enabled + .outer-circle { background-color: var(--radio-success-hover-checked-background-color); border-color: var(--radio-success-hover-checked-border-color); } nb-radio.status-success label:hover .native-input:checked:enabled ~ .inner-circle { background-color: var(--radio-success-hover-inner-circle-color); } nb-radio.status-success label .native-input:enabled:active + .outer-circle { background-color: var(--radio-success-active-background-color); border-color: var(--radio-success-active-border-color); } nb-radio.status-success label .native-input:enabled:checked:active + .outer-circle { background-color: var(--radio-success-active-checked-background-color); border-color: var(--radio-success-active-checked-border-color); } nb-radio.status-success label .native-input:enabled:checked:active ~ .inner-circle { background-color: var(--radio-success-active-inner-circle-color); } nb-radio.status-success .text { color: var(--radio-success-text-color); } nb-radio.status-success .native-input:disabled + .outer-circle { background-color: var(--radio-success-disabled-background-color); border-color: var(--radio-success-disabled-border-color); } nb-radio.status-success .native-input:disabled ~ .text { color: var(--radio-success-disabled-text-color); } nb-radio.status-success .native-input:disabled:checked + .outer-circle { background-color: var(--radio-success-disabled-checked-background-color); border-color: var(--radio-success-disabled-checked-border-color); } nb-radio.status-success .native-input:disabled:checked ~ .inner-circle { background-color: var(--radio-success-disabled-checked-inner-circle-color); } nb-radio.status-warning .native-input:enabled + .outer-circle { background-color: var(--radio-warning-background-color); border-color: var(--radio-warning-border-color); } nb-radio.status-warning .native-input:enabled:checked + .outer-circle { background-color: var(--radio-warning-checked-background-color); border-color: var(--radio-warning-checked-border-color); } nb-radio.status-warning .native-input:enabled:checked ~ .inner-circle { background-color: var(--radio-warning-inner-circle-color); } nb-radio.status-warning .native-input:enabled:focus + .outer-circle { background-color: var(--radio-warning-focus-background-color); border-color: var(--radio-warning-focus-border-color); } nb-radio.status-warning .native-input:enabled:checked:focus + .outer-circle { background-color: var(--radio-warning-focus-checked-background-color); border-color: var(--radio-warning-focus-checked-border-color); } nb-radio.status-warning .native-input:enabled:checked:focus ~ .inner-circle { background-color: var(--radio-warning-focus-inner-circle-color); } nb-radio.status-warning label:hover .native-input:enabled + .outer-circle { background-color: var(--radio-warning-hover-background-color); border-color: var(--radio-warning-hover-border-color); } nb-radio.status-warning label:hover .native-input:checked:enabled + .outer-circle { background-color: var(--radio-warning-hover-checked-background-color); border-color: var(--radio-warning-hover-checked-border-color); } nb-radio.status-warning label:hover .native-input:checked:enabled ~ .inner-circle { background-color: var(--radio-warning-hover-inner-circle-color); } nb-radio.status-warning label .native-input:enabled:active + .outer-circle { background-color: var(--radio-warning-active-background-color); border-color: var(--radio-warning-active-border-color); } nb-radio.status-warning label .native-input:enabled:checked:active + .outer-circle { background-color: var(--radio-warning-active-checked-background-color); border-color: var(--radio-warning-active-checked-border-color); } nb-radio.status-warning label .native-input:enabled:checked:active ~ .inner-circle { background-color: var(--radio-warning-active-inner-circle-color); } nb-radio.status-warning .text { color: var(--radio-warning-text-color); } nb-radio.status-warning .native-input:disabled + .outer-circle { background-color: var(--radio-warning-disabled-background-color); border-color: var(--radio-warning-disabled-border-color); } nb-radio.status-warning .native-input:disabled ~ .text { color: var(--radio-warning-disabled-text-color); } nb-radio.status-warning .native-input:disabled:checked + .outer-circle { background-color: var(--radio-warning-disabled-checked-background-color); border-color: var(--radio-warning-disabled-checked-border-color); } nb-radio.status-warning .native-input:disabled:checked ~ .inner-circle { background-color: var(--radio-warning-disabled-checked-inner-circle-color); } nb-radio.status-danger .native-input:enabled + .outer-circle { background-color: var(--radio-danger-background-color); border-color: var(--radio-danger-border-color); } nb-radio.status-danger .native-input:enabled:checked + .outer-circle { background-color: var(--radio-danger-checked-background-color); border-color: var(--radio-danger-checked-border-color); } nb-radio.status-danger .native-input:enabled:checked ~ .inner-circle { background-color: var(--radio-danger-inner-circle-color); } nb-radio.status-danger .native-input:enabled:focus + .outer-circle { background-color: var(--radio-danger-focus-background-color); border-color: var(--radio-danger-focus-border-color); } nb-radio.status-danger .native-input:enabled:checked:focus + .outer-circle { background-color: var(--radio-danger-focus-checked-background-color); border-color: var(--radio-danger-focus-checked-border-color); } nb-radio.status-danger .native-input:enabled:checked:focus ~ .inner-circle { background-color: var(--radio-danger-focus-inner-circle-color); } nb-radio.status-danger label:hover .native-input:enabled + .outer-circle { background-color: var(--radio-danger-hover-background-color); border-color: var(--radio-danger-hover-border-color); } nb-radio.status-danger label:hover .native-input:checked:enabled + .outer-circle { background-color: var(--radio-danger-hover-checked-background-color); border-color: var(--radio-danger-hover-checked-border-color); } nb-radio.status-danger label:hover .native-input:checked:enabled ~ .inner-circle { background-color: var(--radio-danger-hover-inner-circle-color); } nb-radio.status-danger label .native-input:enabled:active + .outer-circle { background-color: var(--radio-danger-active-background-color); border-color: var(--radio-danger-active-border-color); } nb-radio.status-danger label .native-input:enabled:checked:active + .outer-circle { background-color: var(--radio-danger-active-checked-background-color); border-color: var(--radio-danger-active-checked-border-color); } nb-radio.status-danger label .native-input:enabled:checked:active ~ .inner-circle { background-color: var(--radio-danger-active-inner-circle-color); } nb-radio.status-danger .text { color: var(--radio-danger-text-color); } nb-radio.status-danger .native-input:disabled + .outer-circle { background-color: var(--radio-danger-disabled-background-color); border-color: var(--radio-danger-disabled-border-color); } nb-radio.status-danger .native-input:disabled ~ .text { color: var(--radio-danger-disabled-text-color); } nb-radio.status-danger .native-input:disabled:checked + .outer-circle { background-color: var(--radio-danger-disabled-checked-background-color); border-color: var(--radio-danger-disabled-checked-border-color); } nb-radio.status-danger .native-input:disabled:checked ~ .inner-circle { background-color: var(--radio-danger-disabled-checked-inner-circle-color); } nb-radio.status-info .native-input:enabled + .outer-circle { background-color: var(--radio-info-background-color); border-color: var(--radio-info-border-color); } nb-radio.status-info .native-input:enabled:checked + .outer-circle { background-color: var(--radio-info-checked-background-color); border-color: var(--radio-info-checked-border-color); } nb-radio.status-info .native-input:enabled:checked ~ .inner-circle { background-color: var(--radio-info-inner-circle-color); } nb-radio.status-info .native-input:enabled:focus + .outer-circle { background-color: var(--radio-info-focus-background-color); border-color: var(--radio-info-focus-border-color); } nb-radio.status-info .native-input:enabled:checked:focus + .outer-circle { background-color: var(--radio-info-focus-checked-background-color); border-color: var(--radio-info-focus-checked-border-color); } nb-radio.status-info .native-input:enabled:checked:focus ~ .inner-circle { background-color: var(--radio-info-focus-inner-circle-color); } nb-radio.status-info label:hover .native-input:enabled + .outer-circle { background-color: var(--radio-info-hover-background-color); border-color: var(--radio-info-hover-border-color); } nb-radio.status-info label:hover .native-input:checked:enabled + .outer-circle { background-color: var(--radio-info-hover-checked-background-color); border-color: var(--radio-info-hover-checked-border-color); } nb-radio.status-info label:hover .native-input:checked:enabled ~ .inner-circle { background-color: var(--radio-info-hover-inner-circle-color); } nb-radio.status-info label .native-input:enabled:active + .outer-circle { background-color: var(--radio-info-active-background-color); border-color: var(--radio-info-active-border-color); } nb-radio.status-info label .native-input:enabled:checked:active + .outer-circle { background-color: var(--radio-info-active-checked-background-color); border-color: var(--radio-info-active-checked-border-color); } nb-radio.status-info label .native-input:enabled:checked:active ~ .inner-circle { background-color: var(--radio-info-active-inner-circle-color); } nb-radio.status-info .text { color: var(--radio-info-text-color); } nb-radio.status-info .native-input:disabled + .outer-circle { background-color: var(--radio-info-disabled-background-color); border-color: var(--radio-info-disabled-border-color); } nb-radio.status-info .native-input:disabled ~ .text { color: var(--radio-info-disabled-text-color); } nb-radio.status-info .native-input:disabled:checked + .outer-circle { background-color: var(--radio-info-disabled-checked-background-color); border-color: var(--radio-info-disabled-checked-border-color); } nb-radio.status-info .native-input:disabled:checked ~ .inner-circle { background-color: var(--radio-info-disabled-checked-inner-circle-color); } nb-radio.status-control .native-input:enabled + .outer-circle { background-color: var(--radio-control-background-color); border-color: var(--radio-control-border-color); } nb-radio.status-control .native-input:enabled:checked + .outer-circle { background-color: var(--radio-control-checked-background-color); border-color: var(--radio-control-checked-border-color); } nb-radio.status-control .native-input:enabled:checked ~ .inner-circle { background-color: var(--radio-control-inner-circle-color); } nb-radio.status-control .native-input:enabled:focus + .outer-circle { background-color: var(--radio-control-focus-background-color); border-color: var(--radio-control-focus-border-color); } nb-radio.status-control .native-input:enabled:checked:focus + .outer-circle { background-color: var(--radio-control-focus-checked-background-color); border-color: var(--radio-control-focus-checked-border-color); } nb-radio.status-control .native-input:enabled:checked:focus ~ .inner-circle { background-color: var(--radio-control-focus-inner-circle-color); } nb-radio.status-control label:hover .native-input:enabled + .outer-circle { background-color: var(--radio-control-hover-background-color); border-color: var(--radio-control-hover-border-color); } nb-radio.status-control label:hover .native-input:checked:enabled + .outer-circle { background-color: var(--radio-control-hover-checked-background-color); border-color: var(--radio-control-hover-checked-border-color); } nb-radio.status-control label:hover .native-input:checked:enabled ~ .inner-circle { background-color: var(--radio-control-hover-inner-circle-color); } nb-radio.status-control label .native-input:enabled:active + .outer-circle { background-color: var(--radio-control-active-background-color); border-color: var(--radio-control-active-border-color); } nb-radio.status-control label .native-input:enabled:checked:active + .outer-circle { background-color: var(--radio-control-active-checked-background-color); border-color: var(--radio-control-active-checked-border-color); } nb-radio.status-control label .native-input:enabled:checked:active ~ .inner-circle { background-color: var(--radio-control-active-inner-circle-color); } nb-radio.status-control .text { color: var(--radio-control-text-color); } nb-radio.status-control .native-input:disabled + .outer-circle { background-color: var(--radio-control-disabled-background-color); border-color: var(--radio-control-disabled-border-color); } nb-radio.status-control .native-input:disabled ~ .text { color: var(--radio-control-disabled-text-color); } nb-radio.status-control .native-input:disabled:checked + .outer-circle { background-color: var(--radio-control-disabled-checked-background-color); border-color: var(--radio-control-disabled-checked-border-color); } nb-radio.status-control .native-input:disabled:checked ~ .inner-circle { background-color: var(--radio-control-disabled-checked-inner-circle-color); } nb-radio .text { font-family: var(--radio-text-font-family); font-size: var(--radio-text-font-size); font-weight: var(--radio-text-font-weight); line-height: var(--radio-text-line-height); } [dir=ltr] nb-radio .text { margin-left: var(--radio-width); } [dir=rtl] nb-radio .text { margin-right: var(--radio-width); } .nb-tree-grid-header-cell, .nb-tree-grid-cell, .nb-tree-grid-footer-cell { height: var(--tree-grid-row-min-height); padding: var(--tree-grid-cell-padding); border: var(--tree-grid-cell-border-width) var(--tree-grid-cell-border-style) var(--tree-grid-cell-border-color); } .nb-tree-grid-header-row { background: var(--tree-grid-header-background-color); color: var(--tree-grid-header-text-color); font-family: var(--tree-grid-header-text-font-family); font-size: var(--tree-grid-header-text-font-size); font-weight: var(--tree-grid-header-text-font-weight); line-height: var(--tree-grid-header-text-line-height); } .nb-tree-grid-footer-row { background: var(--tree-grid-footer-background-color); color: var(--tree-grid-footer-text-color); font-family: var(--tree-grid-footer-text-font-family); font-size: var(--tree-grid-footer-text-font-size); font-weight: var(--tree-grid-footer-text-font-weight); line-height: var(--tree-grid-footer-text-line-height); } .nb-tree-grid-row { background: var(--tree-grid-row-background-color); color: var(--tree-grid-row-text-color); font-family: var(--tree-grid-row-text-font-family); font-size: var(--tree-grid-row-text-font-size); font-weight: var(--tree-grid-row-text-font-weight); line-height: var(--tree-grid-row-text-line-height); } .nb-tree-grid-row:hover { background: var(--tree-grid-row-hover-background-color); } .nb-tree-grid-row:nth-child(2n):not(:hover) { background-color: var(--tree-grid-row-even-background-color); } .nb-tree-grid-header-cell button { vertical-align: middle; } nb-tree-grid-row-toggle nb-icon, nb-sort-icon nb-icon { font-size: inherit; vertical-align: middle; color: currentColor; } .nb-tree-grid-header-change-sort-button { background: var(--tree-grid-sort-header-button-background-color); border: var(--tree-grid-sort-header-button-border); padding: var(--tree-grid-sort-header-button-padding); color: inherit; font-size: inherit; font-weight: inherit; font-family: inherit; line-height: inherit; } nb-icon { font-size: var(--icon-font-size); line-height: var(--icon-line-height); width: var(--icon-width); height: var(--icon-height); } nb-icon svg { vertical-align: var(--icon-svg-vertical-align); } nb-icon.status-basic { color: var(--icon-basic-color); } nb-icon.status-primary { color: var(--icon-primary-color); } nb-icon.status-success { color: var(--icon-success-color); } nb-icon.status-warning { color: var(--icon-warning-color); } nb-icon.status-danger { color: var(--icon-danger-color); } nb-icon.status-info { color: var(--icon-info-color); } nb-icon.status-control { color: var(--icon-control-color); } .nb-form-control-container { max-width: inherit; } .nb-form-field-addon { display: flex; justify-content: center; align-items: center; z-index: 1; } .nb-form-field-addon-disabled { color: var(--form-field-addon-disabled-text-color); } nb-form-field.nb-transition .nb-form-field-addon { transition-duration: 0.15s; transition-property: color; transition-timing-function: ease-in; } .nb-form-field-addon-basic { color: var(--form-field-addon-basic-text-color); } .nb-form-field-addon-basic-highlight { color: var(--form-field-addon-basic-highlight-text-color); } .nb-form-field-addon-primary { color: var(--form-field-addon-primary-text-color); } .nb-form-field-addon-primary-highlight { color: var(--form-field-addon-primary-highlight-text-color); } .nb-form-field-addon-success { color: var(--form-field-addon-success-text-color); } .nb-form-field-addon-success-highlight { color: var(--form-field-addon-success-highlight-text-color); } .nb-form-field-addon-warning { color: var(--form-field-addon-warning-text-color); } .nb-form-field-addon-warning-highlight { color: var(--form-field-addon-warning-highlight-text-color); } .nb-form-field-addon-danger { color: var(--form-field-addon-danger-text-color); } .nb-form-field-addon-danger-highlight { color: var(--form-field-addon-danger-highlight-text-color); } .nb-form-field-addon-info { color: var(--form-field-addon-info-text-color); } .nb-form-field-addon-info-highlight { color: var(--form-field-addon-info-highlight-text-color); } .nb-form-field-addon-control { color: var(--form-field-addon-control-text-color); } .nb-form-field-addon-control-highlight { color: var(--form-field-addon-control-highlight-text-color); } .nb-form-field-limited-width.nb-form-field-size-tiny { max-width: var(--form-field-tiny-max-width); } .nb-form-field-prefix-tiny, .nb-form-field-suffix-tiny { height: var(--form-field-addon-tiny-height); width: var(--form-field-addon-tiny-width); font-size: var(--form-field-addon-tiny-font-size); line-height: var(--form-field-addon-tiny-line-height); font-weight: var(--form-field-addon-tiny-font-weight); } .nb-form-field-prefix-tiny nb-icon, .nb-form-field-suffix-tiny nb-icon { font-size: var(--form-field-addon-tiny-icon-size); line-height: var(--form-field-addon-tiny-icon-size); } [dir=ltr] .nb-form-field-prefix-tiny { margin-right: calc(var(--form-field-addon-tiny-width) * -1); } [dir=rtl] .nb-form-field-prefix-tiny { margin-left: calc(var(--form-field-addon-tiny-width) * -1); } [dir=ltr] .nb-form-field-suffix-tiny { margin-left: calc(var(--form-field-addon-tiny-width) * -1); } [dir=rtl] .nb-form-field-suffix-tiny { margin-right: calc(var(--form-field-addon-tiny-width) * -1); } .nb-form-field-limited-width.nb-form-field-size-small { max-width: var(--form-field-small-max-width); } .nb-form-field-prefix-small, .nb-form-field-suffix-small { height: var(--form-field-addon-small-height); width: var(--form-field-addon-small-width); font-size: var(--form-field-addon-small-font-size); line-height: var(--form-field-addon-small-line-height); font-weight: var(--form-field-addon-small-font-weight); } .nb-form-field-prefix-small nb-icon, .nb-form-field-suffix-small nb-icon { font-size: var(--form-field-addon-small-icon-size); line-height: var(--form-field-addon-small-icon-size); } [dir=ltr] .nb-form-field-prefix-small { margin-right: calc(var(--form-field-addon-small-width) * -1); } [dir=rtl] .nb-form-field-prefix-small { margin-left: calc(var(--form-field-addon-small-width) * -1); } [dir=ltr] .nb-form-field-suffix-small { margin-left: calc(var(--form-field-addon-small-width) * -1); } [dir=rtl] .nb-form-field-suffix-small { margin-right: calc(var(--form-field-addon-small-width) * -1); } .nb-form-field-limited-width.nb-form-field-size-medium { max-width: var(--form-field-medium-max-width); } .nb-form-field-prefix-medium, .nb-form-field-suffix-medium { height: var(--form-field-addon-medium-height); width: var(--form-field-addon-medium-width); font-size: var(--form-field-addon-medium-font-size); line-height: var(--form-field-addon-medium-line-height); font-weight: var(--form-field-addon-medium-font-weight); } .nb-form-field-prefix-medium nb-icon, .nb-form-field-suffix-medium nb-icon { font-size: var(--form-field-addon-medium-icon-size); line-height: var(--form-field-addon-medium-icon-size); } [dir=ltr] .nb-form-field-prefix-medium { margin-right: calc(var(--form-field-addon-medium-width) * -1); } [dir=rtl] .nb-form-field-prefix-medium { margin-left: calc(var(--form-field-addon-medium-width) * -1); } [dir=ltr] .nb-form-field-suffix-medium { margin-left: calc(var(--form-field-addon-medium-width) * -1); } [dir=rtl] .nb-form-field-suffix-medium { margin-right: calc(var(--form-field-addon-medium-width) * -1); } .nb-form-field-limited-width.nb-form-field-size-large { max-width: var(--form-field-large-max-width); } .nb-form-field-prefix-large, .nb-form-field-suffix-large { height: var(--form-field-addon-large-height); width: var(--form-field-addon-large-width); font-size: var(--form-field-addon-large-font-size); line-height: var(--form-field-addon-large-line-height); font-weight: var(--form-field-addon-large-font-weight); } .nb-form-field-prefix-large nb-icon, .nb-form-field-suffix-large nb-icon { font-size: var(--form-field-addon-large-icon-size); line-height: var(--form-field-addon-large-icon-size); } [dir=ltr] .nb-form-field-prefix-large { margin-right: calc(var(--form-field-addon-large-width) * -1); } [dir=rtl] .nb-form-field-prefix-large { margin-left: calc(var(--form-field-addon-large-width) * -1); } [dir=ltr] .nb-form-field-suffix-large { margin-left: calc(var(--form-field-addon-large-width) * -1); } [dir=rtl] .nb-form-field-suffix-large { margin-right: calc(var(--form-field-addon-large-width) * -1); } .nb-form-field-limited-width.nb-form-field-size-giant { max-width: var(--form-field-giant-max-width); } .nb-form-field-prefix-giant, .nb-form-field-suffix-giant { height: var(--form-field-addon-giant-height); width: var(--form-field-addon-giant-width); font-size: var(--form-field-addon-giant-font-size); line-height: var(--form-field-addon-giant-line-height); font-weight: var(--form-field-addon-giant-font-weight); } .nb-form-field-prefix-giant nb-icon, .nb-form-field-suffix-giant nb-icon { font-size: var(--form-field-addon-giant-icon-size); line-height: var(--form-field-addon-giant-icon-size); } [dir=ltr] .nb-form-field-prefix-giant { margin-right: calc(var(--form-field-addon-giant-width) * -1); } [dir=rtl] .nb-form-field-prefix-giant { margin-left: calc(var(--form-field-addon-giant-width) * -1); } [dir=ltr] .nb-form-field-suffix-giant { margin-left: calc(var(--form-field-addon-giant-width) * -1); } [dir=rtl] .nb-form-field-suffix-giant { margin-right: calc(var(--form-field-addon-giant-width) * -1); } nb-tag { border-style: var(--tag-border-style); border-width: var(--tag-border-width); border-radius: var(--tag-border-radius); display: inline-flex; align-items: center; font-family: var(--tag-text-font-family); text-transform: var(--tag-text-transform); cursor: default; } nb-tag.nb-transition { transition-duration: 0.15s; transition-property: background-color, border-color, color; transition-timing-function: ease-in; } nb-tag.size-tiny { font-size: var(--tag-tiny-text-font-size); font-weight: var(--tag-tiny-text-font-weight); line-height: var(--tag-tiny-text-line-height); padding: var(--tag-tiny-padding); } nb-tag.size-small { font-size: var(--tag-small-text-font-size); font-weight: var(--tag-small-text-font-weight); line-height: var(--tag-small-text-line-height); padding: var(--tag-small-padding); } nb-tag.size-medium { font-size: var(--tag-medium-text-font-size); font-weight: var(--tag-medium-text-font-weight); line-height: var(--tag-medium-text-line-height); padding: var(--tag-medium-padding); } nb-tag.size-large { font-size: var(--tag-large-text-font-size); font-weight: var(--tag-large-text-font-weight); line-height: var(--tag-large-text-line-height); padding: var(--tag-large-padding); } nb-tag.size-giant { font-size: var(--tag-giant-text-font-size); font-weight: var(--tag-giant-text-font-weight); line-height: var(--tag-giant-text-line-height); padding: var(--tag-giant-padding); } nb-tag.appearance-filled.status-basic { background-color: var(--tag-filled-basic-background-color); border-color: var(--tag-filled-basic-border-color); color: var(--tag-filled-basic-text-color); } nb-tag.appearance-filled.status-basic.selected { background-color: var(--tag-filled-basic-selected-background-color); border-color: var(--tag-filled-basic-selected-border-color); } nb-tag.appearance-filled.status-basic.active { background-color: var(--tag-filled-basic-active-background-color); border-color: var(--tag-filled-basic-active-border-color); } nb-tag.appearance-filled.status-basic:hover { background-color: var(--tag-filled-basic-hover-background-color); border-color: var(--tag-filled-basic-hover-border-color); } nb-tag.appearance-filled.status-primary { background-color: var(--tag-filled-primary-background-color); border-color: var(--tag-filled-primary-border-color); color: var(--tag-filled-primary-text-color); } nb-tag.appearance-filled.status-primary.selected { background-color: var(--tag-filled-primary-selected-background-color); border-color: var(--tag-filled-primary-selected-border-color); } nb-tag.appearance-filled.status-primary.active { background-color: var(--tag-filled-primary-active-background-color); border-color: var(--tag-filled-primary-active-border-color); } nb-tag.appearance-filled.status-primary:hover { background-color: var(--tag-filled-primary-hover-background-color); border-color: var(--tag-filled-primary-hover-border-color); } nb-tag.appearance-filled.status-success { background-color: var(--tag-filled-success-background-color); border-color: var(--tag-filled-success-border-color); color: var(--tag-filled-success-text-color); } nb-tag.appearance-filled.status-success.selected { background-color: var(--tag-filled-success-selected-background-color); border-color: var(--tag-filled-success-selected-border-color); } nb-tag.appearance-filled.status-success.active { background-color: var(--tag-filled-success-active-background-color); border-color: var(--tag-filled-success-active-border-color); } nb-tag.appearance-filled.status-success:hover { background-color: var(--tag-filled-success-hover-background-color); border-color: var(--tag-filled-success-hover-border-color); } nb-tag.appearance-filled.status-warning { background-color: var(--tag-filled-warning-background-color); border-color: var(--tag-filled-warning-border-color); color: var(--tag-filled-warning-text-color); } nb-tag.appearance-filled.status-warning.selected { background-color: var(--tag-filled-warning-selected-background-color); border-color: var(--tag-filled-warning-selected-border-color); } nb-tag.appearance-filled.status-warning.active { background-color: var(--tag-filled-warning-active-background-color); border-color: var(--tag-filled-warning-active-border-color); } nb-tag.appearance-filled.status-warning:hover { background-color: var(--tag-filled-warning-hover-background-color); border-color: var(--tag-filled-warning-hover-border-color); } nb-tag.appearance-filled.status-danger { background-color: var(--tag-filled-danger-background-color); border-color: var(--tag-filled-danger-border-color); color: var(--tag-filled-danger-text-color); } nb-tag.appearance-filled.status-danger.selected { background-color: var(--tag-filled-danger-selected-background-color); border-color: var(--tag-filled-danger-selected-border-color); } nb-tag.appearance-filled.status-danger.active { background-color: var(--tag-filled-danger-active-background-color); border-color: var(--tag-filled-danger-active-border-color); } nb-tag.appearance-filled.status-danger:hover { background-color: var(--tag-filled-danger-hover-background-color); border-color: var(--tag-filled-danger-hover-border-color); } nb-tag.appearance-filled.status-info { background-color: var(--tag-filled-info-background-color); border-color: var(--tag-filled-info-border-color); color: var(--tag-filled-info-text-color); } nb-tag.appearance-filled.status-info.selected { background-color: var(--tag-filled-info-selected-background-color); border-color: var(--tag-filled-info-selected-border-color); } nb-tag.appearance-filled.status-info.active { background-color: var(--tag-filled-info-active-background-color); border-color: var(--tag-filled-info-active-border-color); } nb-tag.appearance-filled.status-info:hover { background-color: var(--tag-filled-info-hover-background-color); border-color: var(--tag-filled-info-hover-border-color); } nb-tag.appearance-filled.status-control { background-color: var(--tag-filled-control-background-color); border-color: var(--tag-filled-control-border-color); color: var(--tag-filled-control-text-color); } nb-tag.appearance-filled.status-control.selected { background-color: var(--tag-filled-control-selected-background-color); border-color: var(--tag-filled-control-selected-border-color); } nb-tag.appearance-filled.status-control.active { background-color: var(--tag-filled-control-active-background-color); border-color: var(--tag-filled-control-active-border-color); } nb-tag.appearance-filled.status-control:hover { background-color: var(--tag-filled-control-hover-background-color); border-color: var(--tag-filled-control-hover-border-color); } nb-tag.appearance-outline.status-basic { background-color: var(--tag-outline-basic-background-color); border-color: var(--tag-outline-basic-border-color); color: var(--tag-outline-basic-text-color); } nb-tag.appearance-outline.status-basic.selected { background-color: var(--tag-outline-basic-selected-background-color); border-color: var(--tag-outline-basic-selected-border-color); color: var(--tag-outline-basic-selected-text-color); } nb-tag.appearance-outline.status-basic.active { background-color: var(--tag-outline-basic-active-background-color); border-color: var(--tag-outline-basic-active-border-color); color: var(--tag-outline-basic-active-text-color); } nb-tag.appearance-outline.status-basic:hover { background-color: var(--tag-outline-basic-hover-background-color); border-color: var(--tag-outline-basic-hover-border-color); color: var(--tag-outline-basic-hover-text-color); } nb-tag.appearance-outline.status-primary { background-color: var(--tag-outline-primary-background-color); border-color: var(--tag-outline-primary-border-color); color: var(--tag-outline-primary-text-color); } nb-tag.appearance-outline.status-primary.selected { background-color: var(--tag-outline-primary-selected-background-color); border-color: var(--tag-outline-primary-selected-border-color); color: var(--tag-outline-primary-selected-text-color); } nb-tag.appearance-outline.status-primary.active { background-color: var(--tag-outline-primary-active-background-color); border-color: var(--tag-outline-primary-active-border-color); color: var(--tag-outline-primary-active-text-color); } nb-tag.appearance-outline.status-primary:hover { background-color: var(--tag-outline-primary-hover-background-color); border-color: var(--tag-outline-primary-hover-border-color); color: var(--tag-outline-primary-hover-text-color); } nb-tag.appearance-outline.status-success { background-color: var(--tag-outline-success-background-color); border-color: var(--tag-outline-success-border-color); color: var(--tag-outline-success-text-color); } nb-tag.appearance-outline.status-success.selected { background-color: var(--tag-outline-success-selected-background-color); border-color: var(--tag-outline-success-selected-border-color); color: var(--tag-outline-success-selected-text-color); } nb-tag.appearance-outline.status-success.active { background-color: var(--tag-outline-success-active-background-color); border-color: var(--tag-outline-success-active-border-color); color: var(--tag-outline-success-active-text-color); } nb-tag.appearance-outline.status-success:hover { background-color: var(--tag-outline-success-hover-background-color); border-color: var(--tag-outline-success-hover-border-color); color: var(--tag-outline-success-hover-text-color); } nb-tag.appearance-outline.status-warning { background-color: var(--tag-outline-warning-background-color); border-color: var(--tag-outline-warning-border-color); color: var(--tag-outline-warning-text-color); } nb-tag.appearance-outline.status-warning.selected { background-color: var(--tag-outline-warning-selected-background-color); border-color: var(--tag-outline-warning-selected-border-color); color: var(--tag-outline-warning-selected-text-color); } nb-tag.appearance-outline.status-warning.active { background-color: var(--tag-outline-warning-active-background-color); border-color: var(--tag-outline-warning-active-border-color); color: var(--tag-outline-warning-active-text-color); } nb-tag.appearance-outline.status-warning:hover { background-color: var(--tag-outline-warning-hover-background-color); border-color: var(--tag-outline-warning-hover-border-color); color: var(--tag-outline-warning-hover-text-color); } nb-tag.appearance-outline.status-danger { background-color: var(--tag-outline-danger-background-color); border-color: var(--tag-outline-danger-border-color); color: var(--tag-outline-danger-text-color); } nb-tag.appearance-outline.status-danger.selected { background-color: var(--tag-outline-danger-selected-background-color); border-color: var(--tag-outline-danger-selected-border-color); color: var(--tag-outline-danger-selected-text-color); } nb-tag.appearance-outline.status-danger.active { background-color: var(--tag-outline-danger-active-background-color); border-color: var(--tag-outline-danger-active-border-color); color: var(--tag-outline-danger-active-text-color); } nb-tag.appearance-outline.status-danger:hover { background-color: var(--tag-outline-danger-hover-background-color); border-color: var(--tag-outline-danger-hover-border-color); color: var(--tag-outline-danger-hover-text-color); } nb-tag.appearance-outline.status-info { background-color: var(--tag-outline-info-background-color); border-color: var(--tag-outline-info-border-color); color: var(--tag-outline-info-text-color); } nb-tag.appearance-outline.status-info.selected { background-color: var(--tag-outline-info-selected-background-color); border-color: var(--tag-outline-info-selected-border-color); color: var(--tag-outline-info-selected-text-color); } nb-tag.appearance-outline.status-info.active { background-color: var(--tag-outline-info-active-background-color); border-color: var(--tag-outline-info-active-border-color); color: var(--tag-outline-info-active-text-color); } nb-tag.appearance-outline.status-info:hover { background-color: var(--tag-outline-info-hover-background-color); border-color: var(--tag-outline-info-hover-border-color); color: var(--tag-outline-info-hover-text-color); } nb-tag.appearance-outline.status-control { background-color: var(--tag-outline-control-background-color); border-color: var(--tag-outline-control-border-color); color: var(--tag-outline-control-text-color); } nb-tag.appearance-outline.status-control.selected { background-color: var(--tag-outline-control-selected-background-color); border-color: var(--tag-outline-control-selected-border-color); color: var(--tag-outline-control-selected-text-color); } nb-tag.appearance-outline.status-control.active { background-color: var(--tag-outline-control-active-background-color); border-color: var(--tag-outline-control-active-border-color); color: var(--tag-outline-control-active-text-color); } nb-tag.appearance-outline.status-control:hover { background-color: var(--tag-outline-control-hover-background-color); border-color: var(--tag-outline-control-hover-border-color); color: var(--tag-outline-control-hover-text-color); } .nb-tag-remove { cursor: pointer; } .nb-tag-remove.size-tiny { font-size: var(--tag-tiny-text-line-height); } [dir=ltr] .nb-tag-remove.size-tiny { margin-left: var(--tag-tiny-close-offset); margin-right: calc(var(--tag-tiny-close-offset) * -1); } [dir=rtl] .nb-tag-remove.size-tiny { margin-right: var(--tag-tiny-close-offset); margin-left: calc(var(--tag-tiny-close-offset) * -1); } .nb-tag-remove.size-small { font-size: var(--tag-small-text-line-height); } [dir=ltr] .nb-tag-remove.size-small { margin-left: var(--tag-small-close-offset); margin-right: calc(var(--tag-small-close-offset) * -1); } [dir=rtl] .nb-tag-remove.size-small { margin-right: var(--tag-small-close-offset); margin-left: calc(var(--tag-small-close-offset) * -1); } .nb-tag-remove.size-medium { font-size: var(--tag-medium-text-line-height); } [dir=ltr] .nb-tag-remove.size-medium { margin-left: var(--tag-medium-close-offset); margin-right: calc(var(--tag-medium-close-offset) * -1); } [dir=rtl] .nb-tag-remove.size-medium { margin-right: var(--tag-medium-close-offset); margin-left: calc(var(--tag-medium-close-offset) * -1); } .nb-tag-remove.size-large { font-size: var(--tag-large-text-line-height); } [dir=ltr] .nb-tag-remove.size-large { margin-left: var(--tag-large-close-offset); margin-right: calc(var(--tag-large-close-offset) * -1); } [dir=rtl] .nb-tag-remove.size-large { margin-right: var(--tag-large-close-offset); margin-left: calc(var(--tag-large-close-offset) * -1); } .nb-tag-remove.size-giant { font-size: var(--tag-giant-text-line-height); } [dir=ltr] .nb-tag-remove.size-giant { margin-left: var(--tag-giant-close-offset); margin-right: calc(var(--tag-giant-close-offset) * -1); } [dir=rtl] .nb-tag-remove.size-giant { margin-right: var(--tag-giant-close-offset); margin-left: calc(var(--tag-giant-close-offset) * -1); } nb-tag-list { display: inline-flex; outline: none; } nb-tag-list.size-tiny .nb-tag-list-tags-wrapper { margin: calc(var(--tag-list-tiny-tag-offset) * -1); } nb-tag-list.size-tiny .nb-tag-list-tags-wrapper nb-tag, nb-tag-list.size-tiny .nb-tag-list-tags-wrapper .nb-tag-input { margin: var(--tag-list-tiny-tag-offset); } nb-tag-list.size-small .nb-tag-list-tags-wrapper { margin: calc(var(--tag-list-small-tag-offset) * -1); } nb-tag-list.size-small .nb-tag-list-tags-wrapper nb-tag, nb-tag-list.size-small .nb-tag-list-tags-wrapper .nb-tag-input { margin: var(--tag-list-small-tag-offset); } nb-tag-list.size-medium .nb-tag-list-tags-wrapper { margin: calc(var(--tag-list-medium-tag-offset) * -1); } nb-tag-list.size-medium .nb-tag-list-tags-wrapper nb-tag, nb-tag-list.size-medium .nb-tag-list-tags-wrapper .nb-tag-input { margin: var(--tag-list-medium-tag-offset); } nb-tag-list.size-large .nb-tag-list-tags-wrapper { margin: calc(var(--tag-list-large-tag-offset) * -1); } nb-tag-list.size-large .nb-tag-list-tags-wrapper nb-tag, nb-tag-list.size-large .nb-tag-list-tags-wrapper .nb-tag-input { margin: var(--tag-list-large-tag-offset); } nb-tag-list.size-giant .nb-tag-list-tags-wrapper { margin: calc(var(--tag-list-giant-tag-offset) * -1); } nb-tag-list.size-giant .nb-tag-list-tags-wrapper nb-tag, nb-tag-list.size-giant .nb-tag-list-tags-wrapper .nb-tag-input { margin: var(--tag-list-giant-tag-offset); } .nb-tag-list-tags-wrapper { display: inline-flex; align-items: center; align-content: center; flex-wrap: wrap; flex: 1; } .nb-tag-list-with-input { border-style: var(--input-border-style); border-width: var(--input-border-width); font-family: var(--input-text-font-family); -webkit-appearance: none; -moz-appearance: none; appearance: none; } .nb-tag-list-with-input.nb-transition { transition-duration: 0.15s; transition-property: border, background-color, color, box-shadow; transition-timing-function: ease-in; } .nb-tag-list-with-input::-moz-placeholder { font-family: var(--input-placeholder-text-font-family); text-overflow: ellipsis; } .nb-tag-list-with-input::placeholder { font-family: var(--input-placeholder-text-font-family); text-overflow: ellipsis; } .nb-tag-list-with-input:focus { outline: none; } .nb-tag-list-with-input.input-full-width { width: 100%; } .nb-tag-list-with-input.shape-rectangle { border-radius: var(--tag-list-with-input-rectangle-border-radius); } .nb-tag-list-with-input.shape-semi-round { border-radius: var(--tag-list-with-input-semi-round-border-radius); } .nb-tag-list-with-input.shape-round { border-radius: var(--tag-list-with-input-round-border-radius); } .nb-tag-list-with-input.size-tiny { padding: var(--tag-list-with-input-tiny-padding); } .nb-tag-list-with-input.size-small { padding: var(--tag-list-with-input-small-padding); } .nb-tag-list-with-input.size-medium { padding: var(--tag-list-with-input-medium-padding); } .nb-tag-list-with-input.size-large { padding: var(--tag-list-with-input-large-padding); } .nb-tag-list-with-input.size-giant { padding: var(--tag-list-with-input-giant-padding); } .nb-tag-list-with-input.status-basic { background-color: var(--tag-input-basic-background-color); border-color: var(--tag-input-basic-border-color); } .nb-tag-list-with-input.status-basic.focus { background-color: var(--tag-input-basic-focus-background-color); border-color: var(--tag-input-basic-focus-border-color); } .nb-tag-list-with-input.status-primary { background-color: var(--tag-input-primary-background-color); border-color: var(--tag-input-primary-border-color); } .nb-tag-list-with-input.status-primary.focus { background-color: var(--tag-input-primary-focus-background-color); border-color: var(--tag-input-primary-focus-border-color); } .nb-tag-list-with-input.status-success { background-color: var(--tag-input-success-background-color); border-color: var(--tag-input-success-border-color); } .nb-tag-list-with-input.status-success.focus { background-color: var(--tag-input-success-focus-background-color); border-color: var(--tag-input-success-focus-border-color); } .nb-tag-list-with-input.status-warning { background-color: var(--tag-input-warning-background-color); border-color: var(--tag-input-warning-border-color); } .nb-tag-list-with-input.status-warning.focus { background-color: var(--tag-input-warning-focus-background-color); border-color: var(--tag-input-warning-focus-border-color); } .nb-tag-list-with-input.status-danger { background-color: var(--tag-input-danger-background-color); border-color: var(--tag-input-danger-border-color); } .nb-tag-list-with-input.status-danger.focus { background-color: var(--tag-input-danger-focus-background-color); border-color: var(--tag-input-danger-focus-border-color); } .nb-tag-list-with-input.status-info { background-color: var(--tag-input-info-background-color); border-color: var(--tag-input-info-border-color); } .nb-tag-list-with-input.status-info.focus { background-color: var(--tag-input-info-focus-background-color); border-color: var(--tag-input-info-focus-border-color); } .nb-tag-list-with-input.status-control { background-color: var(--tag-input-control-background-color); border-color: var(--tag-input-control-border-color); } .nb-tag-list-with-input.status-control.focus { background-color: var(--tag-input-control-focus-background-color); border-color: var(--tag-input-control-focus-border-color); } nb-form-field nb-tag-list { width: 100%; } [dir=ltr] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-tiny { padding-left: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-tiny { padding-right: var(--form-field-addon-tiny-width); } [dir=ltr] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-tiny { padding-right: var(--form-field-addon-tiny-width); } [dir=rtl] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-tiny { padding-left: var(--form-field-addon-tiny-width); } [dir=ltr] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-small { padding-left: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-small { padding-right: var(--form-field-addon-small-width); } [dir=ltr] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-small { padding-right: var(--form-field-addon-small-width); } [dir=rtl] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-small { padding-left: var(--form-field-addon-small-width); } [dir=ltr] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-medium { padding-left: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-medium { padding-right: var(--form-field-addon-medium-width); } [dir=ltr] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-medium { padding-right: var(--form-field-addon-medium-width); } [dir=rtl] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-medium { padding-left: var(--form-field-addon-medium-width); } [dir=ltr] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-large { padding-left: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-large { padding-right: var(--form-field-addon-large-width); } [dir=ltr] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-large { padding-right: var(--form-field-addon-large-width); } [dir=rtl] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-large { padding-left: var(--form-field-addon-large-width); } [dir=ltr] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-giant { padding-left: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-giant { padding-right: var(--form-field-addon-giant-width); } [dir=ltr] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-giant { padding-right: var(--form-field-addon-giant-width); } [dir=rtl] .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-giant { padding-left: var(--form-field-addon-giant-width); } .nb-tag-input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: transparent; background: transparent; outline: none; flex: 1; padding: 0; min-width: var(--tag-input-min-width); font-family: var(--tag-input-text-font-family); } .nb-tag-input::-moz-placeholder { font-family: var(--tag-input-placeholder-text-font-family); } .nb-tag-input::placeholder { font-family: var(--tag-input-placeholder-text-font-family); } .nb-tag-input.size-tiny { font-size: var(--tag-input-tiny-text-font-size); font-weight: var(--tag-input-tiny-text-font-weight); line-height: var(--tag-input-tiny-text-line-height); padding: var(--tag-input-tiny-padding); } .nb-tag-input.size-tiny::-moz-placeholder { font-size: var(--tag-input-tiny-placeholder-text-font-size); font-weight: var(--tag-input-tiny-placeholder-text-font-weight); line-height: var(--tag-input-tiny-placeholder-text-line-height); } .nb-tag-input.size-tiny::placeholder { font-size: var(--tag-input-tiny-placeholder-text-font-size); font-weight: var(--tag-input-tiny-placeholder-text-font-weight); line-height: var(--tag-input-tiny-placeholder-text-line-height); } .nb-tag-input.size-small { font-size: var(--tag-input-small-text-font-size); font-weight: var(--tag-input-small-text-font-weight); line-height: var(--tag-input-small-text-line-height); padding: var(--tag-input-small-padding); } .nb-tag-input.size-small::-moz-placeholder { font-size: var(--tag-input-small-placeholder-text-font-size); font-weight: var(--tag-input-small-placeholder-text-font-weight); line-height: var(--tag-input-small-placeholder-text-line-height); } .nb-tag-input.size-small::placeholder { font-size: var(--tag-input-small-placeholder-text-font-size); font-weight: var(--tag-input-small-placeholder-text-font-weight); line-height: var(--tag-input-small-placeholder-text-line-height); } .nb-tag-input.size-medium { font-size: var(--tag-input-medium-text-font-size); font-weight: var(--tag-input-medium-text-font-weight); line-height: var(--tag-input-medium-text-line-height); padding: var(--tag-input-medium-padding); } .nb-tag-input.size-medium::-moz-placeholder { font-size: var(--tag-input-medium-placeholder-text-font-size); font-weight: var(--tag-input-medium-placeholder-text-font-weight); line-height: var(--tag-input-medium-placeholder-text-line-height); } .nb-tag-input.size-medium::placeholder { font-size: var(--tag-input-medium-placeholder-text-font-size); font-weight: var(--tag-input-medium-placeholder-text-font-weight); line-height: var(--tag-input-medium-placeholder-text-line-height); } .nb-tag-input.size-large { font-size: var(--tag-input-large-text-font-size); font-weight: var(--tag-input-large-text-font-weight); line-height: var(--tag-input-large-text-line-height); padding: var(--tag-input-large-padding); } .nb-tag-input.size-large::-moz-placeholder { font-size: var(--tag-input-large-placeholder-text-font-size); font-weight: var(--tag-input-large-placeholder-text-font-weight); line-height: var(--tag-input-large-placeholder-text-line-height); } .nb-tag-input.size-large::placeholder { font-size: var(--tag-input-large-placeholder-text-font-size); font-weight: var(--tag-input-large-placeholder-text-font-weight); line-height: var(--tag-input-large-placeholder-text-line-height); } .nb-tag-input.size-giant { font-size: var(--tag-input-giant-text-font-size); font-weight: var(--tag-input-giant-text-font-weight); line-height: var(--tag-input-giant-text-line-height); padding: var(--tag-input-giant-padding); } .nb-tag-input.size-giant::-moz-placeholder { font-size: var(--tag-input-giant-placeholder-text-font-size); font-weight: var(--tag-input-giant-placeholder-text-font-weight); line-height: var(--tag-input-giant-placeholder-text-line-height); } .nb-tag-input.size-giant::placeholder { font-size: var(--tag-input-giant-placeholder-text-font-size); font-weight: var(--tag-input-giant-placeholder-text-font-weight); line-height: var(--tag-input-giant-placeholder-text-line-height); } .nb-tag-input.status-basic { color: var(--tag-input-basic-text-color); } .nb-tag-input.status-basic::-moz-placeholder { color: var(--tag-input-basic-placeholder-text-color); } .nb-tag-input.status-basic::placeholder { color: var(--tag-input-basic-placeholder-text-color); } .nb-tag-input.status-basic:disabled { color: var(--tag-input-basic-disabled-text-color); } .nb-tag-input.status-basic:disabled::-moz-placeholder { color: var(--tag-input-basic-disabled-placeholder-text-color); } .nb-tag-input.status-basic:disabled::placeholder { color: var(--tag-input-basic-disabled-placeholder-text-color); } .nb-tag-input.status-primary { color: var(--tag-input-primary-text-color); } .nb-tag-input.status-primary::-moz-placeholder { color: var(--tag-input-primary-placeholder-text-color); } .nb-tag-input.status-primary::placeholder { color: var(--tag-input-primary-placeholder-text-color); } .nb-tag-input.status-primary:disabled { color: var(--tag-input-primary-disabled-text-color); } .nb-tag-input.status-primary:disabled::-moz-placeholder { color: var(--tag-input-primary-disabled-placeholder-text-color); } .nb-tag-input.status-primary:disabled::placeholder { color: var(--tag-input-primary-disabled-placeholder-text-color); } .nb-tag-input.status-success { color: var(--tag-input-success-text-color); } .nb-tag-input.status-success::-moz-placeholder { color: var(--tag-input-success-placeholder-text-color); } .nb-tag-input.status-success::placeholder { color: var(--tag-input-success-placeholder-text-color); } .nb-tag-input.status-success:disabled { color: var(--tag-input-success-disabled-text-color); } .nb-tag-input.status-success:disabled::-moz-placeholder { color: var(--tag-input-success-disabled-placeholder-text-color); } .nb-tag-input.status-success:disabled::placeholder { color: var(--tag-input-success-disabled-placeholder-text-color); } .nb-tag-input.status-warning { color: var(--tag-input-warning-text-color); } .nb-tag-input.status-warning::-moz-placeholder { color: var(--tag-input-warning-placeholder-text-color); } .nb-tag-input.status-warning::placeholder { color: var(--tag-input-warning-placeholder-text-color); } .nb-tag-input.status-warning:disabled { color: var(--tag-input-warning-disabled-text-color); } .nb-tag-input.status-warning:disabled::-moz-placeholder { color: var(--tag-input-warning-disabled-placeholder-text-color); } .nb-tag-input.status-warning:disabled::placeholder { color: var(--tag-input-warning-disabled-placeholder-text-color); } .nb-tag-input.status-danger { color: var(--tag-input-danger-text-color); } .nb-tag-input.status-danger::-moz-placeholder { color: var(--tag-input-danger-placeholder-text-color); } .nb-tag-input.status-danger::placeholder { color: var(--tag-input-danger-placeholder-text-color); } .nb-tag-input.status-danger:disabled { color: var(--tag-input-danger-disabled-text-color); } .nb-tag-input.status-danger:disabled::-moz-placeholder { color: var(--tag-input-danger-disabled-placeholder-text-color); } .nb-tag-input.status-danger:disabled::placeholder { color: var(--tag-input-danger-disabled-placeholder-text-color); } .nb-tag-input.status-info { color: var(--tag-input-info-text-color); } .nb-tag-input.status-info::-moz-placeholder { color: var(--tag-input-info-placeholder-text-color); } .nb-tag-input.status-info::placeholder { color: var(--tag-input-info-placeholder-text-color); } .nb-tag-input.status-info:disabled { color: var(--tag-input-info-disabled-text-color); } .nb-tag-input.status-info:disabled::-moz-placeholder { color: var(--tag-input-info-disabled-placeholder-text-color); } .nb-tag-input.status-info:disabled::placeholder { color: var(--tag-input-info-disabled-placeholder-text-color); } .nb-tag-input.status-control { color: var(--tag-input-control-text-color); } .nb-tag-input.status-control::-moz-placeholder { color: var(--tag-input-control-placeholder-text-color); } .nb-tag-input.status-control::placeholder { color: var(--tag-input-control-placeholder-text-color); } .nb-tag-input.status-control:disabled { color: var(--tag-input-control-disabled-text-color); } .nb-tag-input.status-control:disabled::-moz-placeholder { color: var(--tag-input-control-disabled-placeholder-text-color); } .nb-tag-input.status-control:disabled::placeholder { color: var(--tag-input-control-disabled-placeholder-text-color); } body { color: var(--text-basic-color); font-family: var(--text-paragraph-font-family); font-size: var(--text-paragraph-font-size); font-weight: var(--text-paragraph-font-weight); line-height: var(--text-paragraph-line-height); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--text-basic-color); } h1, .h1 { font-size: var(--text-heading-1-font-size); font-family: var(--text-heading-1-font-family); font-weight: var(--text-heading-1-font-weight); line-height: var(--text-heading-1-line-height); } h2, .h2 { font-size: var(--text-heading-2-font-size); font-family: var(--text-heading-2-font-family); font-weight: var(--text-heading-2-font-weight); line-height: var(--text-heading-2-line-height); } h3, .h3 { font-size: var(--text-heading-3-font-size); font-family: var(--text-heading-3-font-family); font-weight: var(--text-heading-3-font-weight); line-height: var(--text-heading-3-line-height); } h4, .h4 { font-size: var(--text-heading-4-font-size); font-family: var(--text-heading-4-font-family); font-weight: var(--text-heading-4-font-weight); line-height: var(--text-heading-4-line-height); } h5, .h5 { font-size: var(--text-heading-5-font-size); font-family: var(--text-heading-5-font-family); font-weight: var(--text-heading-5-font-weight); line-height: var(--text-heading-5-line-height); } h6, .h6 { font-size: var(--text-heading-6-font-size); font-family: var(--text-heading-6-font-family); font-weight: var(--text-heading-6-font-weight); line-height: var(--text-heading-6-line-height); } .subtitle, .subtitle-2 { color: var(--text-basic-color); } .subtitle { font-family: var(--text-subtitle-font-family); font-size: var(--text-subtitle-font-size); font-weight: var(--text-subtitle-font-weight); line-height: var(--text-subtitle-line-height); } .subtitle-2 { font-family: var(--text-subtitle-2-font-family); font-size: var(--text-subtitle-2-font-size); font-weight: var(--text-subtitle-2-font-weight); line-height: var(--text-subtitle-2-line-height); } p, .paragraph { color: var(--text-basic-color); font-family: var(--text-paragraph-font-family); font-size: var(--text-paragraph-font-size); font-weight: var(--text-paragraph-font-weight); line-height: var(--text-paragraph-line-height); } .paragraph-2 { color: var(--text-basic-color); font-family: var(--text-paragraph-2-font-family); font-size: var(--text-paragraph-2-font-size); font-weight: var(--text-paragraph-2-font-weight); line-height: var(--text-paragraph-2-line-height); } a { color: var(--link-text-color); -webkit-text-decoration: var(--link-text-decoration); text-decoration: var(--link-text-decoration); font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; } a:focus { color: var(--link-text-focus-color); } a:hover { color: var(--link-text-hover-color); } a.link-control, a.link-control:hover { color: var(--text-control-color); } a.link-alternate, a.link-alternate:hover { color: var(--text-alternate-color); } .label { color: var(--text-hint-color); font-family: var(--text-label-font-family); font-size: var(--text-label-font-size); font-weight: var(--text-label-font-weight); line-height: var(--text-label-line-height); } .caption { font-family: var(--text-caption-font-family); font-size: var(--text-caption-font-size); font-weight: var(--text-caption-font-weight); line-height: var(--text-caption-line-height); } .caption-2 { font-family: var(--text-caption-2-font-family); font-size: var(--text-caption-2-font-size); font-weight: var(--text-caption-2-font-weight); line-height: var(--text-caption-2-line-height); } .caption, .caption-2 { color: var(--text-hint-color); } .caption.status-basic, .caption-2.status-basic { color: var(--text-basic-color); } .caption.status-primary, .caption-2.status-primary { color: var(--text-primary-color); } .caption.status-success, .caption-2.status-success { color: var(--text-success-color); } .caption.status-warning, .caption-2.status-warning { color: var(--text-warning-color); } .caption.status-danger, .caption-2.status-danger { color: var(--text-danger-color); } .caption.status-info, .caption-2.status-info { color: var(--text-info-color); } .caption.status-control, .caption-2.status-control { color: var(--text-control-color); } li { color: var(--list-item-text-color); font-family: var(--list-item-font-family); font-size: var(--list-item-font-size); font-weight: var(--list-item-font-weight); line-height: var(--list-item-line-height); } .text-alternate { color: var(--text-alternate-color); } .text-disabled { color: var(--text-disabled-color); } .text-hint { color: var(--text-hint-color); } .text-basic { color: var(--text-basic-color); } .text-primary { color: var(--text-primary-color); } .text-success { color: var(--text-success-color); } .text-warning { color: var(--text-warning-color); } .text-danger { color: var(--text-danger-color); } .text-info { color: var(--text-info-color); } .text-control { color: var(--text-control-color); } ng2-smart-table table tr th, ng2-smart-table table tr th a { font-family: var(--smart-table-header-font-family); font-size: var(--smart-table-header-font-size); font-weight: var(--smart-table-header-font-weight); line-height: var(--smart-table-header-line-height); color: var(--smart-table-header-fg); } ng2-smart-table table tr td { font-family: var(--smart-table-font-family); font-size: var(--smart-table-font-size); font-weight: var(--smart-table-font-weight); line-height: var(--smart-table-line-height); color: var(--smart-table-fg); } ng2-smart-table table tr th, ng2-smart-table table tr td { position: relative; padding: var(--smart-table-padding); border: 1px solid var(--smart-table-separator); vertical-align: middle; } ng2-smart-table table tr.ng2-smart-titles th { padding: var(--smart-table-padding); } [dir=ltr] ng2-smart-table table tr.ng2-smart-titles th { padding-right: 1.75rem; } [dir=rtl] ng2-smart-table table tr.ng2-smart-titles th { padding-left: 1.75rem; } ng2-smart-table table tr.ng2-smart-titles th a:hover, ng2-smart-table table tr.ng2-smart-titles th a:active, ng2-smart-table table tr.ng2-smart-titles th a:visited { color: var(--smart-table-header-fg); text-decoration: none; } ng2-smart-table table tr.ng2-smart-titles th a.sort.asc, ng2-smart-table table tr.ng2-smart-titles th a.sort.desc { font-weight: var(--smart-table-header-font-weight); } ng2-smart-table table tr.ng2-smart-titles th a.sort.asc::after, ng2-smart-table table tr.ng2-smart-titles th a.sort.desc::after { border-bottom-color: var(--smart-table-fg-secondary); border-width: 0.375rem; position: absolute; margin: 0; top: 50%; transform: translate(0, -50%); } [dir=ltr] ng2-smart-table table tr.ng2-smart-titles th a.sort.asc::after, [dir=ltr] ng2-smart-table table tr.ng2-smart-titles th a.sort.desc::after { right: 0.75rem; } [dir=rtl] ng2-smart-table table tr.ng2-smart-titles th a.sort.asc::after, [dir=rtl] ng2-smart-table table tr.ng2-smart-titles th a.sort.desc::after { left: 0.75rem; } ng2-smart-table table tr.ng2-smart-titles th a.sort.asc.desc::after, ng2-smart-table table tr.ng2-smart-titles th a.sort.desc.desc::after { transform: translate(0, -50%) rotate(180deg); } ng2-smart-table thead tr { background: var(--smart-table-header-bg); } ng2-smart-table thead tr.ng2-smart-filters th { padding: var(--smart-table-filter-padding); } ng2-smart-table thead tr.ng2-smart-filters th .ng2-smart-filter input { line-height: var(--smart-table-line-height); } ng2-smart-table tbody tr.selected, ng2-smart-table tbody tr:hover { background: var(--smart-table-bg-active) !important; } ng2-smart-table tbody tr:nth-child(2n) { background-color: var(--smart-table-bg-even); } ng2-smart-table th.ng2-smart-actions-title-add a { display: flex; align-items: center; justify-content: center; font-size: 1.75rem !important; padding: var(--smart-table-filter-padding); border-color: var(--smart-table-add-button-border-color); background-color: var(--smart-table-add-button-background-color); color: var(--smart-table-add-button-text-color); border-radius: 0.375rem; } ng2-smart-table th.ng2-smart-actions-title-add a:focus { border-color: var(--smart-table-add-button-focus-border-color); } ng2-smart-table th.ng2-smart-actions-title-add a:hover { text-decoration: none; background-color: var(--smart-table-add-button-hover-background-color); border-color: var(--smart-table-add-button-hover-border-color); } ng2-smart-table th.ng2-smart-actions-title-add a:active { background-color: var(--smart-table-add-button-active-background-color); border-color: var(--smart-table-add-button-active-border-color); } ng2-smart-table .ng2-smart-actions { padding: 0; height: 1px; } ng2-smart-table .ng2-smart-actions ng2-st-tbody-edit-delete, ng2-smart-table .ng2-smart-actions ng2-st-tbody-create-cancel, ng2-smart-table .ng2-smart-actions ng2-st-actions { display: flex; height: 100%; } ng2-smart-table .ng2-smart-actions a.ng2-smart-action { display: flex; align-items: center; justify-content: center; height: 100%; width: 100%; font-size: 2rem !important; color: var(--smart-table-fg-secondary); } ng2-smart-table .ng2-smart-actions a.ng2-smart-action:not(:last-child) { border-right: 1px solid var(--smart-table-separator); } ng2-smart-table .ng2-smart-actions a.ng2-smart-action:hover { text-decoration: none; } ng2-smart-table .ng2-smart-actions .ng2-smart-action-add-create:hover, ng2-smart-table .ng2-smart-actions .ng2-smart-action-edit-edit:hover, ng2-smart-table .ng2-smart-actions .ng2-smart-action-edit-save:hover { color: var(--smart-table-action-add-edit-hover-text-color); } ng2-smart-table .ng2-smart-actions .ng2-smart-action-add-cancel:hover, ng2-smart-table .ng2-smart-actions .ng2-smart-action-delete-delete:hover, ng2-smart-table .ng2-smart-actions .ng2-smart-action-edit-cancel:hover { color: var(--smart-table-action-cancel-delete-hover-text-color); } ng2-smart-table table-cell-edit-mode { display: block; margin: -7.5px -12px; } ng2-smart-table ng2-smart-table-pager { display: block; } ng2-smart-table nav.ng2-smart-pagination-nav { display: flex; justify-content: center; margin-top: 1.25rem; } ng2-smart-table nav.ng2-smart-pagination-nav .ng2-smart-pagination { display: flex; padding: 0; } ng2-smart-table nav.ng2-smart-pagination-nav .ng2-smart-pagination .page-item.disabled .page-link, ng2-smart-table nav.ng2-smart-pagination-nav .ng2-smart-pagination .page-item.disabled .page-link:focus, ng2-smart-table nav.ng2-smart-pagination-nav .ng2-smart-pagination .page-item.disabled .page-link:hover { background-color: var(--smart-table-paging-hover); color: var(--smart-table-paging-disabled-text-color); } ng2-smart-table nav.ng2-smart-pagination-nav .pagination { font-family: var(--smart-table-paging-font-family); font-size: var(--smart-table-paging-font-size); line-height: var(--smart-table-paging-line-height); border: var(--smart-table-paging-border-color) solid var(--smart-table-paging-border-width); border-radius: var(--smart-table-border-radius); } ng2-smart-table nav.ng2-smart-pagination-nav .pagination li { overflow: hidden; } [dir=ltr] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:not(:last-child) { border-right: 1px solid var(--smart-table-separator); } [dir=rtl] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:not(:last-child) { border-left: 1px solid var(--smart-table-separator); } ng2-smart-table nav.ng2-smart-pagination-nav .pagination li a.page-link-prev, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li a.page-link-next { font-size: var(--smart-table-paging-font-size); line-height: var(--smart-table-paging-line-height); } ng2-smart-table nav.ng2-smart-pagination-nav .pagination li a, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li > span { font-size: var(--smart-table-paging-font-size); line-height: var(--smart-table-paging-line-height); background-color: transparent; color: var(--smart-table-paging-page-text-color); padding: 0.75rem 1.25rem; border: none; } ng2-smart-table nav.ng2-smart-pagination-nav .pagination li a:focus, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li > span:focus { border-color: var(--smart-table-paging-page-focus-border-color); color: var(--smart-table-paging-page-focus-text-color); } ng2-smart-table nav.ng2-smart-pagination-nav .pagination li a:hover, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li > span:hover { background-color: var(--smart-table-paging-hover); border-color: var(--smart-table-paging-hover-border-color); color: var(--smart-table-paging-hover-text-color); text-decoration: none; } [dir=ltr] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:first-child a, [dir=ltr] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:first-child > span { border-top-left-radius: var(--smart-table-border-radius); border-bottom-left-radius: var(--smart-table-border-radius); } [dir=rtl] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:first-child a, [dir=rtl] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:first-child > span { border-top-right-radius: var(--smart-table-border-radius); border-bottom-right-radius: var(--smart-table-border-radius); } [dir=ltr] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:last-child a, [dir=ltr] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:last-child > span { border-top-right-radius: var(--smart-table-border-radius); border-bottom-right-radius: var(--smart-table-border-radius); } [dir=rtl] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:last-child a, [dir=rtl] ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:last-child > span { border-top-left-radius: var(--smart-table-border-radius); border-bottom-left-radius: var(--smart-table-border-radius); } ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active a, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active a:hover, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active a:focus, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active > span, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active > span:hover, ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active > span:focus { color: var(--smart-table-paging-fg-active); background-color: var(--smart-table-paging-bg-active); } .nb-theme-default { --link-text-color: var(--text-primary-color); --link-text-decoration: underline; --link-text-focus-color: var(--text-primary-focus-color); --link-text-hover-color: var(--text-primary-hover-color); --card-background-color: var(--background-basic-color-1); --card-text-color: var(--text-basic-color); --card-text-font-family: var(--text-paragraph-font-family); --card-text-font-size: var(--text-paragraph-font-size); --card-text-font-weight: var(--text-paragraph-font-weight); --card-text-line-height: var(--text-paragraph-line-height); --card-border-width: 0.0625rem; --card-border-style: solid; --card-border-color: var(--border-basic-color-4); --card-border-radius: var(--border-radius); --card-padding: 1rem 1.5rem; --card-shadow: none; --card-divider-color: var(--divider-color); --card-divider-style: var(--divider-style); --card-divider-width: var(--divider-width); --card-header-text-color: var(--text-basic-color); --card-header-text-font-family: var(--text-subtitle-font-family); --card-header-text-font-size: var(--text-subtitle-font-size); --card-header-text-font-weight: var(--text-subtitle-font-weight); --card-header-text-line-height: var(--text-subtitle-line-height); --card-header-basic-background-color: var(--background-basic-color-2); --card-header-basic-text-color: var(--text-basic-color); --card-header-primary-background-color: var(--color-primary-default); --card-header-primary-text-color: var(--text-control-color); --card-header-info-background-color: var(--color-info-default); --card-header-info-text-color: var(--text-control-color); --card-header-success-background-color: var(--color-success-default); --card-header-success-text-color: var(--text-control-color); --card-header-warning-background-color: var(--color-warning-default); --card-header-warning-text-color: var(--text-control-color); --card-header-danger-background-color: var(--color-danger-default); --card-header-danger-text-color: var(--text-control-color); --card-header-control-background-color: var(--color-control-default); --card-header-control-text-color: var(--color-basic-800); --card-height-tiny: 13.5rem; --card-height-small: 21.1875rem; --card-height-medium: 28.875rem; --card-height-large: 36.5625rem; --card-height-giant: 44.25rem; --card-margin-bottom: 1.875rem; --card-scrollbar-color: var(--scrollbar-color); --card-scrollbar-background-color: var(--scrollbar-background-color); --card-scrollbar-width: var(--scrollbar-width); --header-background-color: var(--background-basic-color-1); --header-text-color: var(--text-basic-color); --header-text-font-family: var(--text-paragraph-font-family); --header-text-font-size: var(--text-paragraph-font-size); --header-text-font-weight: var(--text-paragraph-font-weight); --header-text-line-height: var(--text-paragraph-line-height); --header-height: 4.75rem; --header-padding: 1.25rem; --header-shadow: var(--shadow); --footer-background-color: var(--background-basic-color-1); --footer-text-color: var(--text-basic-color); --footer-text-font-family: var(--text-paragraph-font-family); --footer-text-font-size: var(--text-paragraph-font-size); --footer-text-font-weight: var(--text-paragraph-font-weight); --footer-text-line-height: var(--text-paragraph-line-height); --footer-text-highlight-color: var(--color-primary-hover); --footer-height: 4.725rem; --footer-padding: 1.25rem; --footer-divider-color: var(--divider-color); --footer-divider-style: var(--divider-style); --footer-divider-width: var(--divider-width); --footer-shadow: var(--shadow); --layout-background-color: var(--background-basic-color-3); --layout-text-color: var(--text-basic-color); --layout-text-font-family: var(--text-paragraph-font-family); --layout-text-font-size: var(--text-paragraph-font-size); --layout-text-font-weight: var(--text-paragraph-font-weight); --layout-text-line-height: var(--text-paragraph-line-height); --layout-min-height: 100vh; --layout-content-width: 900px; --layout-window-mode-min-width: 300px; --layout-window-mode-background-color: var(--background-basic-color-3); --layout-window-mode-padding-top: 4.75rem; --layout-window-shadow: var(--shadow); --layout-padding: 2.25rem 2.25rem 0.75rem; --layout-medium-padding: 1.5rem 1.5rem 0.5rem; --layout-small-padding: 1rem 1rem 0; --layout-scrollbar-background-color: var(--scrollbar-background-color); --layout-scrollbar-color: var(--scrollbar-color); --layout-scrollbar-width: var(--scrollbar-width); --sidebar-background-color: var(--background-basic-color-1); --sidebar-text-color: var(--text-basic-color); --sidebar-text-font-family: var(--text-paragraph-font-family); --sidebar-text-font-size: var(--text-paragraph-font-size); --sidebar-text-font-weight: var(--text-paragraph-font-weight); --sidebar-text-line-height: var(--text-paragraph-line-height); --sidebar-height: 100vh; --sidebar-width: 16rem; --sidebar-width-compact: 3.5rem; --sidebar-padding: 1.25rem; --sidebar-header-height: 3.5rem; --sidebar-footer-height: 3.5rem; --sidebar-shadow: var(--shadow); --sidebar-menu-item-highlight-color: var(--color-primary-default); --sidebar-scrollbar-background-color: var(--scrollbar-background-color); --sidebar-scrollbar-color: var(--scrollbar-color); --sidebar-scrollbar-width: var(--scrollbar-width); --menu-background-color: transparent; --menu-text-color: var(--text-basic-color); --menu-text-font-family: var(--text-subtitle-2-font-family); --menu-text-font-size: var(--text-subtitle-2-font-size); --menu-text-font-weight: var(--text-subtitle-2-font-weight); --menu-text-line-height: var(--text-subtitle-2-line-height); --menu-group-text-color: var(--text-hint-color); --menu-item-border-radius: 0; --menu-item-padding: 0.75rem 1rem; --menu-item-hover-background-color: var(--menu-background-color); --menu-item-hover-cursor: pointer; --menu-item-hover-text-color: var(--text-primary-hover-color); --menu-item-icon-hover-color: var(--menu-item-hover-text-color); --menu-item-active-background-color: var(--menu-background-color); --menu-item-active-text-color: var(--text-primary-color); --menu-item-icon-active-color: var(--menu-item-active-text-color); --menu-item-icon-color: var(--text-hint-color); --menu-item-icon-margin: 0 0.5rem 0 0; --menu-item-icon-width: 1.25rem; --menu-item-divider-color: var(--divider-color); --menu-item-divider-style: var(--divider-style); --menu-item-divider-width: var(--divider-width); --menu-submenu-background-color: var(--menu-background-color); --menu-submenu-text-color: var(--text-basic-color); --menu-submenu-margin: 0; --menu-submenu-padding: 0 1.25rem; --menu-submenu-item-border-color: var(--menu-submenu-background-color); --menu-submenu-item-border-style: solid; --menu-submenu-item-border-width: 0; --menu-submenu-item-border-radius: 0; --menu-submenu-item-padding: var(--menu-item-padding); --menu-submenu-item-hover-background-color: var(--menu-background-color); --menu-submenu-item-hover-border-color: var(--menu-submenu-item-border-color); --menu-submenu-item-hover-text-color: var(--menu-item-hover-text-color); --menu-submenu-item-icon-hover-color: var(--menu-item-icon-hover-color); --menu-submenu-item-active-background-color: var(--menu-background-color); --menu-submenu-item-active-border-color: var(--color-primary-default); --menu-submenu-item-active-text-color: var(--menu-item-active-text-color); --menu-submenu-item-icon-active-color: var(--menu-item-icon-active-color); --menu-submenu-item-active-hover-background-color: var(--menu-submenu-item-hover-background-color); --menu-submenu-item-active-hover-border-color: var(--color-primary-hover); --menu-submenu-item-active-hover-text-color: var(--menu-submenu-item-hover-text-color); --menu-submenu-item-icon-active-hover-color: var(--menu-submenu-item-icon-hover-color); --tabset-background-color: transparent; --tabset-border-radius: 0; --tabset-shadow: none; --tabset-tab-background-color: transparent; --tabset-tab-padding: 1rem 2rem; --tabset-tab-text-color: var(--text-hint-color); --tabset-tab-text-font-family: var(--text-button-font-family); --tabset-tab-text-font-size: var(--text-button-medium-font-size); --tabset-tab-text-font-weight: var(--text-button-font-weight); --tabset-tab-text-line-height: var(--text-button-medium-line-height); --tabset-tab-text-transform: uppercase; --tabset-tab-underline-width: 0.25rem; --tabset-tab-underline-color: transparent; --tabset-tab-active-background-color: transparent; --tabset-tab-active-text-color: var(--text-primary-color); --tabset-tab-active-underline-color: var(--text-primary-color); --tabset-tab-focus-background-color: transparent; --tabset-tab-focus-text-color: var(--text-primary-focus-color); --tabset-tab-focus-underline-color: var(--text-primary-focus-color); --tabset-tab-hover-background-color: transparent; --tabset-tab-hover-text-color: var(--text-primary-hover-color); --tabset-tab-hover-underline-color: var(--text-primary-hover-color); --tabset-tab-disabled-background-color: transparent; --tabset-tab-disabled-text-color: var(--text-disabled-color); --tabset-tab-disabled-underline-color: transparent; --tabset-tab–badge-dot-mode-horizontal-offset: 0.75rem; --tabset-tab-badge-dot-mode-padding: 0.25rem; --tabset-divider-color: var(--divider-color); --tabset-divider-style: var(--divider-style); --tabset-divider-width: var(--divider-width); --tabset-content-background-color: transparent; --tabset-content-padding: 1rem 2rem; --tabset-content-text-color: var(--text-basic-color); --tabset-content-text-font-family: var(--text-paragraph-font-family); --tabset-content-text-font-size: var(--text-paragraph-font-size); --tabset-content-text-font-weight: var(--text-paragraph-font-weight); --tabset-content-text-line-height: var(--text-paragraph-line-height); --tabset-scrollbar-color: var(--scrollbar-color); --tabset-scrollbar-background-color: var(--scrollbar-background-color); --tabset-scrollbar-width: var(--scrollbar-width); --route-tabset-background-color: transparent; --route-tabset-border-radius: 0; --route-tabset-shadow: none; --route-tabset-tab-background-color: transparent; --route-tabset-tab-padding: 1rem 2rem; --route-tabset-tab-text-color: var(--text-hint-color); --route-tabset-tab-text-font-family: var(--text-button-font-family); --route-tabset-tab-text-font-size: var(--text-button-medium-font-size); --route-tabset-tab-text-font-weight: var(--text-button-font-weight); --route-tabset-tab-text-line-height: var(--text-button-medium-line-height); --route-tabset-tab-text-transform: uppercase; --route-tabset-tab-underline-width: 0.25rem; --route-tabset-tab-underline-color: transparent; --route-tabset-tab-active-background-color: transparent; --route-tabset-tab-active-text-color: var(--text-primary-color); --route-tabset-tab-active-underline-color: var(--text-primary-color); --route-tabset-tab-focus-background-color: transparent; --route-tabset-tab-focus-text-color: var(--text-primary-focus-color); --route-tabset-tab-focus-underline-color: var(--text-primary-focus-color); --route-tabset-tab-hover-background-color: transparent; --route-tabset-tab-hover-text-color: var(--text-primary-hover-color); --route-tabset-tab-hover-underline-color: var(--text-primary-hover-color); --route-tabset-tab-disabled-background-color: transparent; --route-tabset-tab-disabled-text-color: var(--text-disabled-color); --route-tabset-tab-disabled-underline-color: transparent; --route-tabset-divider-color: var(--divider-color); --route-tabset-divider-style: var(--divider-style); --route-tabset-divider-width: var(--divider-width); --route-tabset-scrollbar-color: var(--scrollbar-color); --route-tabset-scrollbar-background-color: var(--scrollbar-background-color); --route-tabset-scrollbar-width: var(--scrollbar-width); --user-picture-box-background-color: transparent; --user-picture-box-border-color: var(--border-basic-color-3); --user-picture-box-border-width: 1px; --user-initials-text-color: var(--text-basic-color); --user-initials-text-font-family: var(--text-paragraph-font-family); --user-initials-text-font-weight: var(--text-paragraph-font-weight); --user-name-text-color: var(--text-basic-color); --user-name-text-font-family: var(--text-paragraph-font-family); --user-name-text-font-weight: var(--text-paragraph-font-weight); --user-title-text-color: var(--text-basic-color); --user-title-text-font-family: var(--text-paragraph-2-font-family); --user-title-text-font-weight: var(--text-paragraph-2-font-weight); --user-rectangle-border-radius: 0.5rem; --user-semi-round-border-radius: 0.75rem; --user-round-border-radius: 50%; --user-tiny-height: 1.25rem; --user-tiny-width: 1.25rem; --user-tiny-initials-text-font-size: var(--text-caption-font-size); --user-tiny-initials-text-line-height: var(--text-caption-line-height); --user-tiny-name-text-font-size: var(--text-caption-font-size); --user-tiny-name-text-line-height: var(--text-caption-line-height); --user-tiny-title-text-font-size: var(--text-caption-font-size); --user-tiny-title-text-line-height: var(--text-caption-line-height); --user-small-height: 1.5rem; --user-small-width: 1.5rem; --user-small-initials-text-font-size: var(--text-caption-font-size); --user-small-initials-text-line-height: var(--text-caption-line-height); --user-small-name-text-font-size: var(--text-caption-font-size); --user-small-name-text-line-height: var(--text-caption-line-height); --user-small-title-text-font-size: var(--text-caption-font-size); --user-small-title-text-line-height: var(--text-caption-line-height); --user-medium-height: 2.5rem; --user-medium-width: 2.5rem; --user-medium-initials-text-font-size: var(--text-paragraph-font-size); --user-medium-initials-text-line-height: var(--text-paragraph-line-height); --user-medium-name-text-font-size: var(--text-paragraph-font-size); --user-medium-name-text-line-height: var(--text-paragraph-line-height); --user-medium-title-text-font-size: var(--text-caption-font-size); --user-medium-title-text-line-height: var(--text-caption-line-height); --user-large-height: 3.25rem; --user-large-width: 3.25rem; --user-large-initials-text-font-size: var(--text-paragraph-font-size); --user-large-initials-text-line-height: var(--text-paragraph-line-height); --user-large-name-text-font-size: var(--text-paragraph-font-size); --user-large-name-text-line-height: var(--text-paragraph-line-height); --user-large-title-text-font-size: var(--text-paragraph-2-font-size); --user-large-title-text-line-height: var(--text-paragraph-2-line-height); --user-giant-height: 4rem; --user-giant-width: 4rem; --user-giant-initials-text-font-size: var(--text-paragraph-font-size); --user-giant-initials-text-line-height: var(--text-paragraph-line-height); --user-giant-name-text-font-size: var(--text-paragraph-font-size); --user-giant-name-text-line-height: var(--text-paragraph-line-height); --user-giant-title-text-font-size: var(--text-paragraph-font-size); --user-giant-title-text-line-height: var(--text-paragraph-line-height); --popover-text-color: var(--text-basic-color); --popover-text-font-family: var(--text-paragraph-font-family); --popover-text-font-size: var(--text-paragraph-font-size); --popover-text-font-weight: var(--text-paragraph-font-weight); --popover-text-line-height: var(--text-paragraph-line-height); --popover-background-color: var(--background-basic-color-1); --popover-border-width: 1px; --popover-border-color: transparent; --popover-border-radius: var(--border-radius); --popover-shadow: var(--shadow); --popover-arrow-size: 0.6875rem; --popover-padding: 0.75rem 1rem; --context-menu-background-color: var(--background-basic-color-1); --context-menu-border-color: transparent; --context-menu-border-style: solid; --context-menu-border-width: 0; --context-menu-border-radius: var(--border-radius); --context-menu-text-align: center; --context-menu-min-width: 10rem; --context-menu-max-width: 15rem; --context-menu-shadow: var(--shadow); --actions-background-color: transparent; --actions-divider-color: var(--divider-color); --actions-divider-style: var(--divider-style); --actions-divider-width: var(--divider-width); --actions-icon-color: var(--text-hint-color); --actions-text-color: var(--text-basic-color); --actions-text-font-family: var(--text-button-font-family); --actions-text-font-weight: var(--text-button-font-weight); --actions-text-line-height: var(--text-button-medium-line-height); --actions-disabled-icon-color: var(--text-disabled-color); --actions-disabled-text-color: var(--text-disabled-color); --actions-tiny-height: 1rem; --actions-tiny-icon-height: var(--actions-tiny-height); --actions-tiny-padding: 0 1.25rem; --actions-tiny-text-font-size: var(--text-button-tiny-font-size); --actions-small-height: 1.5rem; --actions-small-icon-height: var(--actions-small-height); --actions-small-padding: 0 1.25rem; --actions-small-text-font-size: var(--text-button-small-font-size); --actions-medium-height: 2.25rem; --actions-medium-icon-height: var(--actions-medium-height); --actions-medium-padding: 0 1.25rem; --actions-medium-text-font-size: var(--text-button-medium-font-size); --actions-large-height: 3.5rem; --actions-large-icon-height: var(--actions-large-height); --actions-large-padding: 0 1.25rem; --actions-large-text-font-size: var(--text-button-large-font-size); --actions-giant-height: 4rem; --actions-giant-icon-height: var(--actions-giant-height); --actions-giant-padding: 0 1.25rem; --actions-giant-text-font-size: var(--text-button-giant-font-size); --search-background-color: var(--background-basic-color-1); --search-divider-color: var(--divider-color); --search-divider-style: var(--divider-style); --search-divider-width: var(--divider-width); --search-extra-background-color: var(--color-primary-default); --search-text-color: var(--text-basic-color); --search-text-font-family: var(--text-heading-1-font-family); --search-text-font-size: var(--text-heading-1-font-size); --search-text-font-weight: var(--text-heading-1-font-weight); --search-text-line-height: var(--text-heading-1-line-height); --search-placeholder-text-color: var(--text-hint-color); --search-info-text-color: var(--text-hint-color); --search-info-text-font-family: var(--text-subtitle-font-family); --search-info-text-font-size: var(--text-subtitle-font-size); --search-info-text-font-weight: var(--text-subtitle-font-weight); --search-info-text-line-height: var(--text-subtitle-line-height); --smart-table-header-font-family: var(--text-paragraph-font-family); --smart-table-header-font-size: var(--text-paragraph-font-size); --smart-table-header-font-weight: var(--text-paragraph-font-weight); --smart-table-header-line-height: var(--text-paragraph-line-height); --smart-table-header-fg: var(--text-basic-color); --smart-table-header-bg: var(--background-basic-color-1); --smart-table-font-family: var(--text-paragraph-font-family); --smart-table-font-size: var(--text-paragraph-font-size); --smart-table-font-weight: var(--text-paragraph-font-weight); --smart-table-line-height: var(--text-paragraph-line-height); --smart-table-fg: var(--text-basic-color); --smart-table-bg: var(--background-basic-color-1); --smart-table-bg-even: var(--background-basic-color-2); --smart-table-fg-secondary: var(--text-basic-color); --smart-table-bg-active: var(--background-basic-color-3); --smart-table-padding: 0.875rem 1.25rem; --smart-table-filter-padding: 0.375rem 0.5rem; --smart-table-separator: var(--divider-color); --smart-table-border-radius: var(--border-radius); --smart-table-action-add-edit-hover-text-color: var(--color-primary-default); --smart-table-action-cancel-delete-hover-text-color: var(--color-danger-default); --smart-table-add-button-border-color: var(--button-filled-primary-border-color); --smart-table-add-button-background-color: var(--button-filled-primary-background-color); --smart-table-add-button-text-color: var(--button-filled-primary-text-color); --smart-table-add-button-focus-border-color: var(--button-filled-primary-focus-border-color); --smart-table-add-button-hover-background-color: var(--button-filled-primary-hover-background-color); --smart-table-add-button-hover-border-color: var(--button-filled-primary-hover-border-color); --smart-table-add-button-active-background-color: var(--button-filled-primary-active-background-color); --smart-table-add-button-active-border-color: var(--button-filled-primary-active-border-color); --smart-table-paging-font-family: var(--button-text-font-family); --smart-table-paging-font-size: var(--button-medium-text-font-size); --smart-table-paging-line-height: var(--button-medium-text-line-height); --smart-table-paging-border-color: var(--divider-color); --smart-table-paging-border-width: var(--divider-width); --smart-table-paging-fg-active: var(--text-control-color); --smart-table-paging-bg-active: var(--color-primary-default); --smart-table-paging-hover: transparent; --smart-table-paging-hover-border-color: var(--button-outline-primary-hover-border-color); --smart-table-paging-hover-text-color: var(--button-outline-primary-hover-text-color); --smart-table-paging-disabled-text-color: var(--button-outline-primary-disabled-text-color); --smart-table-paging-page-text-color: var(--button-outline-primary-text-color); --smart-table-paging-page-focus-border-color: var(--button-outline-primary-focus-border-color); --smart-table-paging-page-focus-text-color: var(--button-outline-primary-focus-text-color); --toastr-border-style: solid; --toastr-border-width: 1px; --toastr-border-radius: var(--border-radius); --toastr-padding: 1rem; --toastr-shadow: var(--shadow); --toastr-text-font-family: var(--text-paragraph-2-font-family); --toastr-text-font-size: var(--text-paragraph-2-font-size); --toastr-text-font-weight: var(--text-paragraph-2-font-weight); --toastr-text-line-height: var(--text-paragraph-2-line-height); --toastr-title-text-font-family: var(--text-subtitle-font-family); --toastr-title-text-font-size: var(--text-subtitle-font-size); --toastr-title-text-font-weight: var(--text-subtitle-font-weight); --toastr-title-text-line-height: var(--text-subtitle-line-height); --toastr-basic-background-color: var(--background-basic-color-1); --toastr-basic-border-color: var(--border-basic-color-3); --toastr-basic-text-color: var(--text-basic-color); --toastr-icon-basic-background-color: var(--background-basic-color-1); --toastr-icon-basic-color: var(--text-basic-color); --toastr-destroyable-basic-hover-background-color: var(--background-basic-color-1); --toastr-destroyable-basic-hover-border-color: var(--border-basic-color-3); --toastr-primary-background-color: var(--color-primary-default); --toastr-primary-border-color: var(--color-primary-default); --toastr-primary-text-color: var(--text-control-color); --toastr-icon-primary-background-color: var(--background-basic-color-1); --toastr-icon-primary-color: var(--color-primary-default); --toastr-destroyable-primary-hover-background-color: var(--color-primary-hover); --toastr-destroyable-primary-hover-border-color: var(--color-primary-hover); --toastr-success-background-color: var(--color-success-default); --toastr-success-border-color: var(--color-success-default); --toastr-success-text-color: var(--text-control-color); --toastr-icon-success-background-color: var(--background-basic-color-1); --toastr-icon-success-color: var(--color-success-default); --toastr-destroyable-success-hover-background-color: var(--color-success-hover); --toastr-destroyable-success-hover-border-color: var(--color-success-hover); --toastr-info-background-color: var(--color-info-default); --toastr-info-border-color: var(--color-info-default); --toastr-info-text-color: var(--text-control-color); --toastr-icon-info-background-color: var(--background-basic-color-1); --toastr-icon-info-color: var(--color-info-default); --toastr-destroyable-info-hover-background-color: var(--color-info-hover); --toastr-destroyable-info-hover-border-color: var(--color-info-hover); --toastr-warning-background-color: var(--color-warning-default); --toastr-warning-border-color: var(--color-warning-default); --toastr-warning-text-color: var(--text-control-color); --toastr-icon-warning-background-color: var(--background-basic-color-1); --toastr-icon-warning-color: var(--color-warning-default); --toastr-destroyable-warning-hover-background-color: var(--color-warning-hover); --toastr-destroyable-warning-hover-border-color: var(--color-warning-hover); --toastr-danger-background-color: var(--color-danger-default); --toastr-danger-border-color: var(--color-danger-default); --toastr-danger-text-color: var(--text-control-color); --toastr-icon-danger-background-color: var(--background-basic-color-1); --toastr-icon-danger-color: var(--color-danger-default); --toastr-destroyable-danger-hover-background-color: var(--color-danger-hover); --toastr-destroyable-danger-hover-border-color: var(--color-danger-hover); --toastr-control-background-color: var(--color-control-default); --toastr-control-border-color: var(--color-control-default); --toastr-control-text-color: var(--color-basic-800); --toastr-icon-control-background-color: var(--color-control-default); --toastr-icon-control-color: var(--color-basic-800); --toastr-destroyable-control-hover-background-color: var(--color-control-hover); --toastr-destroyable-control-hover-border-color: var(--color-control-hover); --button-cursor: pointer; --button-outline-width: var(--outline-width); --button-outline-color: var(--outline-color); --button-text-font-family: var(--text-button-font-family); --button-text-font-weight: var(--text-button-font-weight); --button-disabled-cursor: default; --button-tiny-text-font-size: var(--text-button-tiny-font-size); --button-tiny-text-line-height: var(--text-button-tiny-line-height); --button-tiny-icon-size: 0.75rem; --button-tiny-icon-vertical-margin: -0.125rem; --button-tiny-icon-offset: 0.375rem; --button-small-text-font-size: var(--text-button-small-font-size); --button-small-text-line-height: var(--text-button-small-line-height); --button-small-icon-size: 1rem; --button-small-icon-vertical-margin: -0.125rem; --button-small-icon-offset: 0.375rem; --button-medium-text-font-size: var(--text-button-medium-font-size); --button-medium-text-line-height: var(--text-button-medium-line-height); --button-medium-icon-size: 1.25rem; --button-medium-icon-vertical-margin: -0.125rem; --button-medium-icon-offset: 0.5rem; --button-large-text-font-size: var(--text-button-large-font-size); --button-large-text-line-height: var(--text-button-large-line-height); --button-large-icon-size: 1.5rem; --button-large-icon-vertical-margin: -0.125rem; --button-large-icon-offset: 0.75rem; --button-giant-text-font-size: var(--text-button-giant-font-size); --button-giant-text-line-height: var(--text-button-giant-line-height); --button-giant-icon-size: 1.5rem; --button-giant-icon-vertical-margin: -0.125rem; --button-giant-icon-offset: 0.75rem; --button-rectangle-border-radius: var(--border-radius); --button-semi-round-border-radius: 0.75rem; --button-round-border-radius: 1.5rem; --button-filled-border-style: solid; --button-filled-border-width: 0.0625rem; --button-filled-text-transform: uppercase; --button-filled-tiny-padding: 0.3125rem 0.625rem; --button-filled-small-padding: 0.4375rem 0.875rem; --button-filled-medium-padding: 0.6875rem 1.125rem; --button-filled-large-padding: 0.8125rem 1.125rem; --button-filled-giant-padding: 0.9375rem 1.375rem; --button-filled-basic-background-color: var(--color-basic-default); --button-filled-basic-border-color: var(--color-basic-default-border); --button-filled-basic-text-color: var(--color-basic-800); --button-filled-basic-focus-background-color: var(--color-basic-focus); --button-filled-basic-focus-border-color: var(--color-basic-focus-border); --button-filled-basic-hover-background-color: var(--color-basic-hover); --button-filled-basic-hover-border-color: var(--color-basic-hover-border); --button-filled-basic-active-background-color: var(--color-basic-active); --button-filled-basic-active-border-color: var(--color-basic-active-border); --button-filled-basic-disabled-background-color: var(--color-basic-disabled); --button-filled-basic-disabled-border-color: var(--color-basic-disabled-border); --button-filled-basic-disabled-text-color: var(--text-disabled-color); --button-filled-primary-background-color: var(--color-primary-default); --button-filled-primary-border-color: var(--color-primary-default-border); --button-filled-primary-text-color: var(--text-control-color); --button-filled-primary-focus-background-color: var(--color-primary-focus); --button-filled-primary-focus-border-color: var(--color-primary-focus-border); --button-filled-primary-hover-background-color: var(--color-primary-hover); --button-filled-primary-hover-border-color: var(--color-primary-hover-border); --button-filled-primary-active-background-color: var(--color-primary-active); --button-filled-primary-active-border-color: var(--color-primary-active-border); --button-filled-primary-disabled-background-color: var(--color-primary-disabled); --button-filled-primary-disabled-border-color: var(--color-primary-disabled-border); --button-filled-primary-disabled-text-color: var(--text-disabled-color); --button-filled-success-background-color: var(--color-success-default); --button-filled-success-border-color: var(--color-success-default-border); --button-filled-success-text-color: var(--text-control-color); --button-filled-success-focus-background-color: var(--color-success-focus); --button-filled-success-focus-border-color: var(--color-success-focus-border); --button-filled-success-hover-background-color: var(--color-success-hover); --button-filled-success-hover-border-color: var(--color-success-hover-border); --button-filled-success-active-background-color: var(--color-success-active); --button-filled-success-active-border-color: var(--color-success-active-border); --button-filled-success-disabled-background-color: var(--color-success-disabled); --button-filled-success-disabled-border-color: var(--color-success-disabled-border); --button-filled-success-disabled-text-color: var(--text-disabled-color); --button-filled-info-background-color: var(--color-info-default); --button-filled-info-border-color: var(--color-info-default-border); --button-filled-info-text-color: var(--text-control-color); --button-filled-info-focus-background-color: var(--color-info-focus); --button-filled-info-focus-border-color: var(--color-info-focus-border); --button-filled-info-hover-background-color: var(--color-info-hover); --button-filled-info-hover-border-color: var(--color-info-hover-border); --button-filled-info-active-background-color: var(--color-info-active); --button-filled-info-active-border-color: var(--color-info-active-border); --button-filled-info-disabled-background-color: var(--color-info-disabled); --button-filled-info-disabled-border-color: var(--color-info-disabled-border); --button-filled-info-disabled-text-color: var(--text-disabled-color); --button-filled-warning-background-color: var(--color-warning-default); --button-filled-warning-border-color: var(--color-warning-default-border); --button-filled-warning-text-color: var(--text-control-color); --button-filled-warning-focus-background-color: var(--color-warning-focus); --button-filled-warning-focus-border-color: var(--color-warning-focus-border); --button-filled-warning-hover-background-color: var(--color-warning-hover); --button-filled-warning-hover-border-color: var(--color-warning-hover-border); --button-filled-warning-active-background-color: var(--color-warning-active); --button-filled-warning-active-border-color: var(--color-warning-active-border); --button-filled-warning-disabled-background-color: var(--color-warning-disabled); --button-filled-warning-disabled-border-color: var(--color-warning-disabled-border); --button-filled-warning-disabled-text-color: var(--text-disabled-color); --button-filled-danger-background-color: var(--color-danger-default); --button-filled-danger-border-color: var(--color-danger-default-border); --button-filled-danger-text-color: var(--text-control-color); --button-filled-danger-focus-background-color: var(--color-danger-focus); --button-filled-danger-focus-border-color: var(--color-danger-focus-border); --button-filled-danger-hover-background-color: var(--color-danger-hover); --button-filled-danger-hover-border-color: var(--color-danger-hover-border); --button-filled-danger-active-background-color: var(--color-danger-active); --button-filled-danger-active-border-color: var(--color-danger-active-border); --button-filled-danger-disabled-background-color: var(--color-danger-disabled); --button-filled-danger-disabled-border-color: var(--color-danger-disabled-border); --button-filled-danger-disabled-text-color: var(--text-disabled-color); --button-filled-control-background-color: var(--color-control-default); --button-filled-control-border-color: var(--color-control-default-border); --button-filled-control-text-color: var(--color-basic-800); --button-filled-control-focus-background-color: var(--color-control-focus); --button-filled-control-focus-border-color: var(--color-control-focus-border); --button-filled-control-hover-background-color: var(--color-control-hover); --button-filled-control-hover-border-color: var(--color-control-hover-border); --button-filled-control-active-background-color: var(--color-control-active); --button-filled-control-active-border-color: var(--color-control-active-border); --button-filled-control-disabled-background-color: var(--color-control-disabled); --button-filled-control-disabled-border-color: var(--color-control-disabled-border); --button-filled-control-disabled-text-color: var(--text-disabled-color); --button-outline-border-style: solid; --button-outline-border-width: 0.0625rem; --button-outline-text-transform: uppercase; --button-outline-focus-inset-shadow-length: 0 0 0 100vmax; --button-outline-tiny-padding: 0.3125rem 0.625rem; --button-outline-small-padding: 0.4375rem 0.875rem; --button-outline-medium-padding: 0.6875rem 1.125rem; --button-outline-large-padding: 0.8125rem 1.125rem; --button-outline-giant-padding: 0.9375rem 1.375rem; --button-outline-basic-background-color: var(--color-basic-transparent-default); --button-outline-basic-border-color: var(--color-basic-transparent-default-border); --button-outline-basic-text-color: var(--text-hint-color); --button-outline-basic-focus-background-color: var(--color-basic-transparent-focus); --button-outline-basic-focus-border-color: var(--color-basic-transparent-focus-border); --button-outline-basic-focus-text-color: var(--text-hint-color); --button-outline-basic-hover-background-color: var(--color-basic-transparent-hover); --button-outline-basic-hover-border-color: var(--color-basic-transparent-hover-border); --button-outline-basic-hover-text-color: var(--text-hint-color); --button-outline-basic-active-background-color: var(--color-basic-transparent-active); --button-outline-basic-active-border-color: var(--color-basic-transparent-active-border); --button-outline-basic-active-text-color: var(--text-hint-color); --button-outline-basic-disabled-background-color: var(--color-basic-transparent-disabled); --button-outline-basic-disabled-border-color: var(--color-basic-transparent-disabled-border); --button-outline-basic-disabled-text-color: var(--text-disabled-color); --button-outline-primary-background-color: var(--color-primary-transparent-default); --button-outline-primary-border-color: var(--color-primary-transparent-default-border); --button-outline-primary-text-color: var(--text-primary-color); --button-outline-primary-focus-background-color: var(--color-primary-transparent-focus); --button-outline-primary-focus-border-color: var(--color-primary-transparent-focus-border); --button-outline-primary-focus-text-color: var(--text-primary-color); --button-outline-primary-hover-background-color: var(--color-primary-transparent-hover); --button-outline-primary-hover-border-color: var(--color-primary-transparent-hover-border); --button-outline-primary-hover-text-color: var(--text-primary-color); --button-outline-primary-active-background-color: var(--color-primary-transparent-active); --button-outline-primary-active-border-color: var(--color-primary-transparent-active-border); --button-outline-primary-active-text-color: var(--text-primary-color); --button-outline-primary-disabled-background-color: var(--color-primary-transparent-disabled); --button-outline-primary-disabled-border-color: var(--color-primary-transparent-disabled-border); --button-outline-primary-disabled-text-color: var(--text-disabled-color); --button-outline-success-background-color: var(--color-success-transparent-default); --button-outline-success-border-color: var(--color-success-transparent-default-border); --button-outline-success-text-color: var(--text-success-color); --button-outline-success-focus-background-color: var(--color-success-transparent-focus); --button-outline-success-focus-border-color: var(--color-success-transparent-focus-border); --button-outline-success-focus-text-color: var(--text-success-color); --button-outline-success-hover-background-color: var(--color-success-transparent-hover); --button-outline-success-hover-border-color: var(--color-success-transparent-hover-border); --button-outline-success-hover-text-color: var(--text-success-color); --button-outline-success-active-background-color: var(--color-success-transparent-active); --button-outline-success-active-border-color: var(--color-success-transparent-active-border); --button-outline-success-active-text-color: var(--text-success-color); --button-outline-success-disabled-background-color: var(--color-success-transparent-disabled); --button-outline-success-disabled-border-color: var(--color-success-transparent-disabled-border); --button-outline-success-disabled-text-color: var(--text-disabled-color); --button-outline-info-background-color: var(--color-info-transparent-default); --button-outline-info-border-color: var(--color-info-transparent-default-border); --button-outline-info-text-color: var(--text-info-color); --button-outline-info-focus-background-color: var(--color-info-transparent-focus); --button-outline-info-focus-border-color: var(--color-info-transparent-focus-border); --button-outline-info-focus-text-color: var(--text-info-color); --button-outline-info-hover-background-color: var(--color-info-transparent-hover); --button-outline-info-hover-border-color: var(--color-info-transparent-hover-border); --button-outline-info-hover-text-color: var(--text-info-color); --button-outline-info-active-background-color: var(--color-info-transparent-active); --button-outline-info-active-border-color: var(--color-info-transparent-active-border); --button-outline-info-active-text-color: var(--text-info-color); --button-outline-info-disabled-background-color: var(--color-info-transparent-disabled); --button-outline-info-disabled-border-color: var(--color-info-transparent-disabled-border); --button-outline-info-disabled-text-color: var(--text-disabled-color); --button-outline-warning-background-color: var(--color-warning-transparent-default); --button-outline-warning-border-color: var(--color-warning-transparent-default-border); --button-outline-warning-text-color: var(--text-warning-color); --button-outline-warning-focus-background-color: var(--color-warning-transparent-focus); --button-outline-warning-focus-border-color: var(--color-warning-transparent-focus-border); --button-outline-warning-focus-text-color: var(--text-warning-color); --button-outline-warning-hover-background-color: var(--color-warning-transparent-hover); --button-outline-warning-hover-border-color: var(--color-warning-transparent-hover-border); --button-outline-warning-hover-text-color: var(--text-warning-color); --button-outline-warning-active-background-color: var(--color-warning-transparent-active); --button-outline-warning-active-border-color: var(--color-warning-transparent-active-border); --button-outline-warning-active-text-color: var(--text-warning-color); --button-outline-warning-disabled-background-color: var(--color-warning-transparent-disabled); --button-outline-warning-disabled-border-color: var(--color-warning-transparent-disabled-border); --button-outline-warning-disabled-text-color: var(--text-disabled-color); --button-outline-danger-background-color: var(--color-danger-transparent-default); --button-outline-danger-border-color: var(--color-danger-transparent-default-border); --button-outline-danger-text-color: var(--text-danger-color); --button-outline-danger-focus-background-color: var(--color-danger-transparent-focus); --button-outline-danger-focus-border-color: var(--color-danger-transparent-focus-border); --button-outline-danger-focus-text-color: var(--text-danger-color); --button-outline-danger-hover-background-color: var(--color-danger-transparent-hover); --button-outline-danger-hover-border-color: var(--color-danger-transparent-hover-border); --button-outline-danger-hover-text-color: var(--text-danger-color); --button-outline-danger-active-background-color: var(--color-danger-transparent-active); --button-outline-danger-active-border-color: var(--color-danger-transparent-active-border); --button-outline-danger-active-text-color: var(--text-danger-color); --button-outline-danger-disabled-background-color: var(--color-danger-transparent-disabled); --button-outline-danger-disabled-border-color: var(--color-danger-transparent-disabled-border); --button-outline-danger-disabled-text-color: var(--text-disabled-color); --button-outline-control-background-color: var(--color-control-transparent-default); --button-outline-control-border-color: var(--color-control-transparent-default-border); --button-outline-control-text-color: var(--text-control-color); --button-outline-control-focus-background-color: var(--color-control-transparent-focus); --button-outline-control-focus-border-color: var(--color-control-transparent-focus-border); --button-outline-control-focus-text-color: var(--text-control-color); --button-outline-control-hover-background-color: var(--color-control-transparent-hover); --button-outline-control-hover-border-color: var(--color-control-transparent-hover-border); --button-outline-control-hover-text-color: var(--text-control-color); --button-outline-control-active-background-color: var(--color-control-transparent-active); --button-outline-control-active-border-color: var(--color-control-transparent-active-border); --button-outline-control-active-text-color: var(--text-control-color); --button-outline-control-disabled-background-color: var(--color-control-transparent-disabled); --button-outline-control-disabled-border-color: var(--color-control-transparent-disabled-border); --button-outline-control-disabled-text-color: var(--text-disabled-color); --button-ghost-background-color: transparent; --button-ghost-border-color: transparent; --button-ghost-border-style: solid; --button-ghost-border-width: 0.0625rem; --button-ghost-text-transform: uppercase; --button-ghost-focus-inset-shadow-length: 0 0 0 100vmax; --button-ghost-tiny-padding: 0.3125rem 0.625rem; --button-ghost-small-padding: 0.4375rem 0.875rem; --button-ghost-medium-padding: 0.6875rem 1.125rem; --button-ghost-large-padding: 0.8125rem 1.125rem; --button-ghost-giant-padding: 0.9375rem 1.375rem; --button-ghost-basic-text-color: var(--color-basic-600); --button-ghost-basic-focus-background-color: var(--color-basic-transparent-200); --button-ghost-basic-focus-border-color: var(--color-basic-transparent-500); --button-ghost-basic-focus-text-color: var(--color-basic-600); --button-ghost-basic-hover-background-color: var(--color-basic-transparent-100); --button-ghost-basic-hover-border-color: transparent; --button-ghost-basic-hover-text-color: var(--color-basic-600); --button-ghost-basic-active-background-color: var(--color-basic-transparent-200); --button-ghost-basic-active-border-color: transparent; --button-ghost-basic-active-text-color: var(--color-basic-600); --button-ghost-basic-disabled-background-color: var(--color-basic-transparent-200); --button-ghost-basic-disabled-border-color: transparent; --button-ghost-basic-disabled-text-color: var(--text-disabled-color); --button-ghost-primary-text-color: var(--text-primary-color); --button-ghost-primary-focus-background-color: var(--color-basic-transparent-200); --button-ghost-primary-focus-border-color: var(--color-basic-transparent-500); --button-ghost-primary-focus-text-color: var(--text-primary-color); --button-ghost-primary-hover-background-color: var(--color-basic-transparent-100); --button-ghost-primary-hover-border-color: transparent; --button-ghost-primary-hover-text-color: var(--text-primary-color); --button-ghost-primary-active-background-color: var(--color-basic-transparent-200); --button-ghost-primary-active-border-color: transparent; --button-ghost-primary-active-text-color: var(--text-primary-color); --button-ghost-primary-disabled-background-color: var(--color-basic-transparent-200); --button-ghost-primary-disabled-border-color: transparent; --button-ghost-primary-disabled-text-color: var(--text-disabled-color); --button-ghost-success-text-color: var(--text-success-color); --button-ghost-success-focus-background-color: var(--color-basic-transparent-200); --button-ghost-success-focus-border-color: var(--color-basic-transparent-500); --button-ghost-success-focus-text-color: var(--text-success-color); --button-ghost-success-hover-background-color: var(--color-basic-transparent-100); --button-ghost-success-hover-border-color: transparent; --button-ghost-success-hover-text-color: var(--text-success-color); --button-ghost-success-active-background-color: var(--color-basic-transparent-200); --button-ghost-success-active-border-color: transparent; --button-ghost-success-active-text-color: var(--text-success-color); --button-ghost-success-disabled-background-color: var(--color-basic-transparent-200); --button-ghost-success-disabled-border-color: transparent; --button-ghost-success-disabled-text-color: var(--text-disabled-color); --button-ghost-info-text-color: var(--text-info-color); --button-ghost-info-focus-background-color: var(--color-basic-transparent-200); --button-ghost-info-focus-border-color: var(--color-basic-transparent-500); --button-ghost-info-focus-text-color: var(--text-info-color); --button-ghost-info-hover-background-color: var(--color-basic-transparent-100); --button-ghost-info-hover-border-color: transparent; --button-ghost-info-hover-text-color: var(--text-info-color); --button-ghost-info-active-background-color: var(--color-basic-transparent-200); --button-ghost-info-active-border-color: transparent; --button-ghost-info-active-text-color: var(--text-info-color); --button-ghost-info-disabled-background-color: var(--color-basic-transparent-200); --button-ghost-info-disabled-border-color: transparent; --button-ghost-info-disabled-text-color: var(--text-disabled-color); --button-ghost-warning-text-color: var(--text-warning-color); --button-ghost-warning-focus-background-color: var(--color-basic-transparent-200); --button-ghost-warning-focus-border-color: var(--color-basic-transparent-500); --button-ghost-warning-focus-text-color: var(--text-warning-color); --button-ghost-warning-hover-background-color: var(--color-basic-transparent-100); --button-ghost-warning-hover-border-color: transparent; --button-ghost-warning-hover-text-color: var(--text-warning-color); --button-ghost-warning-active-background-color: var(--color-basic-transparent-200); --button-ghost-warning-active-border-color: transparent; --button-ghost-warning-active-text-color: var(--text-warning-color); --button-ghost-warning-disabled-background-color: var(--color-basic-transparent-200); --button-ghost-warning-disabled-border-color: transparent; --button-ghost-warning-disabled-text-color: var(--text-disabled-color); --button-ghost-danger-text-color: var(--text-danger-color); --button-ghost-danger-focus-background-color: var(--color-basic-transparent-200); --button-ghost-danger-focus-border-color: var(--color-basic-transparent-500); --button-ghost-danger-focus-text-color: var(--text-danger-color); --button-ghost-danger-hover-background-color: var(--color-basic-transparent-100); --button-ghost-danger-hover-border-color: transparent; --button-ghost-danger-hover-text-color: var(--text-danger-color); --button-ghost-danger-active-background-color: var(--color-basic-transparent-200); --button-ghost-danger-active-border-color: transparent; --button-ghost-danger-active-text-color: var(--text-danger-color); --button-ghost-danger-disabled-background-color: var(--color-basic-transparent-200); --button-ghost-danger-disabled-border-color: transparent; --button-ghost-danger-disabled-text-color: var(--text-disabled-color); --button-ghost-control-text-color: var(--color-basic-100); --button-ghost-control-focus-background-color: var(--color-basic-transparent-200); --button-ghost-control-focus-border-color: var(--color-basic-transparent-500); --button-ghost-control-focus-text-color: var(--color-basic-100); --button-ghost-control-hover-background-color: var(--color-basic-transparent-100); --button-ghost-control-hover-border-color: transparent; --button-ghost-control-hover-text-color: var(--color-basic-100); --button-ghost-control-active-background-color: var(--color-basic-transparent-200); --button-ghost-control-active-border-color: transparent; --button-ghost-control-active-text-color: var(--color-basic-100); --button-ghost-control-disabled-background-color: var(--color-basic-transparent-200); --button-ghost-control-disabled-border-color: transparent; --button-ghost-control-disabled-text-color: var(--text-disabled-color); --button-hero-border-color: transparent; --button-hero-border-style: solid; --button-hero-border-width: 0; --button-hero-text-transform: uppercase; --button-hero-tiny-padding: 0.375rem 0.6875rem; --button-hero-small-padding: 0.5rem 0.9375rem; --button-hero-medium-padding: 0.75rem 1.1875rem; --button-hero-large-padding: 0.875rem 1.1875rem; --button-hero-giant-padding: 1rem 1.4375rem; --button-hero-shadow: 0 0 transparent; --button-hero-text-shadow: var(--shadow); --button-hero-bevel-size: 0 0 0 0; --button-hero-glow-size: 0 0 0 0; --button-hero-outline-color: var(--outline-color); --button-hero-outline-width: var(--outline-width); --button-hero-basic-text-color: var(--color-basic-600); --button-hero-basic-bevel-color: var(--color-basic-600); --button-hero-basic-glow-color: var(--color-basic-700); --button-hero-basic-left-background-color: var(--color-basic-200); --button-hero-basic-right-background-color: var(--color-basic-default); --button-hero-basic-focus-left-background-color: var(--color-basic-300); --button-hero-basic-focus-right-background-color: var(--color-basic-focus); --button-hero-basic-hover-left-background-color: var(--color-basic-100); --button-hero-basic-hover-right-background-color: var(--color-basic-hover); --button-hero-basic-active-left-background-color: var(--color-basic-300); --button-hero-basic-active-right-background-color: var(--color-basic-active); --button-hero-basic-disabled-background-color: var(--color-basic-disabled); --button-hero-basic-disabled-text-color: var(--text-disabled-color); --button-hero-primary-text-color: var(--text-control-color); --button-hero-primary-bevel-color: var(--color-primary-600); --button-hero-primary-glow-color: var(--color-primary-700); --button-hero-primary-left-background-color: var(--color-primary-400); --button-hero-primary-right-background-color: var(--color-primary-default); --button-hero-primary-focus-left-background-color: var(--color-primary-500); --button-hero-primary-focus-right-background-color: var(--color-primary-focus); --button-hero-primary-hover-left-background-color: var(--color-primary-300); --button-hero-primary-hover-right-background-color: var(--color-primary-hover); --button-hero-primary-active-left-background-color: var(--color-primary-500); --button-hero-primary-active-right-background-color: var(--color-primary-active); --button-hero-primary-disabled-background-color: var(--color-primary-disabled); --button-hero-primary-disabled-text-color: var(--text-disabled-color); --button-hero-success-text-color: var(--text-control-color); --button-hero-success-bevel-color: var(--color-success-600); --button-hero-success-glow-color: var(--color-success-700); --button-hero-success-left-background-color: var(--color-success-400); --button-hero-success-right-background-color: var(--color-success-default); --button-hero-success-focus-left-background-color: var(--color-success-500); --button-hero-success-focus-right-background-color: var(--color-success-focus); --button-hero-success-hover-left-background-color: var(--color-success-300); --button-hero-success-hover-right-background-color: var(--color-success-hover); --button-hero-success-active-left-background-color: var(--color-success-500); --button-hero-success-active-right-background-color: var(--color-success-active); --button-hero-success-disabled-background-color: var(--color-success-disabled); --button-hero-success-disabled-text-color: var(--text-disabled-color); --button-hero-info-text-color: var(--text-control-color); --button-hero-info-bevel-color: var(--color-info-600); --button-hero-info-glow-color: var(--color-info-700); --button-hero-info-left-background-color: var(--color-info-400); --button-hero-info-right-background-color: var(--color-info-default); --button-hero-info-focus-left-background-color: var(--color-info-500); --button-hero-info-focus-right-background-color: var(--color-info-focus); --button-hero-info-hover-left-background-color: var(--color-info-300); --button-hero-info-hover-right-background-color: var(--color-info-hover); --button-hero-info-active-left-background-color: var(--color-info-500); --button-hero-info-active-right-background-color: var(--color-info-active); --button-hero-info-disabled-background-color: var(--color-info-disabled); --button-hero-info-disabled-text-color: var(--text-disabled-color); --button-hero-warning-text-color: var(--text-control-color); --button-hero-warning-bevel-color: var(--color-warning-600); --button-hero-warning-glow-color: var(--color-warning-700); --button-hero-warning-left-background-color: var(--color-warning-400); --button-hero-warning-right-background-color: var(--color-warning-default); --button-hero-warning-focus-left-background-color: var(--color-warning-500); --button-hero-warning-focus-right-background-color: var(--color-warning-focus); --button-hero-warning-hover-left-background-color: var(--color-warning-300); --button-hero-warning-hover-right-background-color: var(--color-warning-hover); --button-hero-warning-active-left-background-color: var(--color-warning-500); --button-hero-warning-active-right-background-color: var(--color-warning-active); --button-hero-warning-disabled-background-color: var(--color-warning-disabled); --button-hero-warning-disabled-text-color: var(--text-disabled-color); --button-hero-danger-text-color: var(--text-control-color); --button-hero-danger-bevel-color: var(--color-danger-600); --button-hero-danger-glow-color: var(--color-danger-700); --button-hero-danger-left-background-color: var(--color-danger-400); --button-hero-danger-right-background-color: var(--color-danger-default); --button-hero-danger-focus-left-background-color: var(--color-danger-500); --button-hero-danger-focus-right-background-color: var(--color-danger-focus); --button-hero-danger-hover-left-background-color: var(--color-danger-300); --button-hero-danger-hover-right-background-color: var(--color-danger-hover); --button-hero-danger-active-left-background-color: var(--color-danger-500); --button-hero-danger-active-right-background-color: var(--color-danger-active); --button-hero-danger-disabled-background-color: var(--color-danger-disabled); --button-hero-danger-disabled-text-color: var(--text-disabled-color); --button-hero-control-text-color: var(--color-basic-800); --button-hero-control-bevel-color: var(--color-basic-600); --button-hero-control-glow-color: var(--color-basic-700); --button-hero-control-left-background-color: var(--color-control-default); --button-hero-control-right-background-color: var(--color-control-default); --button-hero-control-focus-left-background-color: var(--color-basic-200); --button-hero-control-focus-right-background-color: var(--color-control-focus); --button-hero-control-hover-left-background-color: var(--color-basic-100); --button-hero-control-hover-right-background-color: var(--color-control-hover); --button-hero-control-active-left-background-color: var(--color-basic-200); --button-hero-control-active-right-background-color: var(--color-control-active); --button-hero-control-disabled-background-color: var(--color-basic-transparent-300); --button-hero-control-disabled-text-color: var(--text-disabled-color); --button-group-filled-button-basic-text-color: var(--text-hint-color); --button-group-filled-button-primary-text-color: var(--button-filled-primary-text-color); --button-group-filled-button-success-text-color: var(--button-filled-success-text-color); --button-group-filled-button-info-text-color: var(--button-filled-info-text-color); --button-group-filled-button-warning-text-color: var(--button-filled-warning-text-color); --button-group-filled-button-danger-text-color: var(--button-filled-danger-text-color); --button-group-filled-button-control-text-color: var(--button-filled-control-text-color); --button-group-filled-basic-divider-color: var(--color-basic-focus-border); --button-group-filled-primary-divider-color: var(--color-primary-focus); --button-group-filled-success-divider-color: var(--color-success-focus); --button-group-filled-info-divider-color: var(--color-info-focus); --button-group-filled-warning-divider-color: var(--color-warning-focus); --button-group-filled-danger-divider-color: var(--color-danger-focus); --button-group-filled-control-divider-color: var(--color-control-focus); --button-group-ghost-divider-color: var(--color-basic-focus-border); --icon-button-filled-tiny-padding: 0.4375rem 0.3125rem; --icon-button-filled-small-padding: 0.5625rem 0.4375rem; --icon-button-filled-medium-padding: 0.6875rem 0.5625rem; --icon-button-filled-large-padding: 0.8125rem 0.6875rem; --icon-button-filled-giant-padding: 1.0625rem 0.9375rem; --icon-button-outline-tiny-padding: 0.4375rem 0.3125rem; --icon-button-outline-small-padding: 0.5625rem 0.4375rem; --icon-button-outline-medium-padding: 0.6875rem 0.5625rem; --icon-button-outline-large-padding: 0.8125rem 0.6875rem; --icon-button-outline-giant-padding: 1.0625rem 0.9375rem; --icon-button-ghost-tiny-padding: 0.4375rem 0.3125rem; --icon-button-ghost-small-padding: 0.5625rem 0.4375rem; --icon-button-ghost-medium-padding: 0.6875rem 0.5625rem; --icon-button-ghost-large-padding: 0.8125rem 0.6875rem; --icon-button-ghost-giant-padding: 1.0625rem 0.9375rem; --icon-button-hero-tiny-padding: 0.5rem 0.375rem; --icon-button-hero-small-padding: 0.5625rem 0.5rem; --icon-button-hero-medium-padding: 0.75rem 0.5625rem; --icon-button-hero-large-padding: 0.875rem 0.6875rem; --icon-button-hero-giant-padding: 1.0625rem 1rem; --input-border-style: solid; --input-border-width: 1px; --input-outline-color: var(--outline-color); --input-outline-width: var(--outline-width); --input-placeholder-text-font-family: var(--text-paragraph-font-family); --input-text-font-family: var(--text-subtitle-font-family); --input-basic-text-color: var(--text-basic-color); --input-basic-placeholder-text-color: var(--text-hint-color); --input-basic-background-color: var(--background-basic-color-2); --input-basic-border-color: var(--border-basic-color-4); --input-basic-focus-background-color: var(--background-basic-color-1); --input-basic-focus-border-color: var(--color-primary-default-border); --input-basic-hover-background-color: var(--background-basic-color-3); --input-basic-hover-border-color: var(--border-basic-color-4); --input-basic-focus-and-hover-background-color: var(--input-basic-hover-background-color); --input-basic-focus-and-hover-border-color: var(--input-basic-hover-border-color); --input-basic-disabled-background-color: var(--background-basic-color-2); --input-basic-disabled-border-color: var(--border-basic-color-4); --input-basic-disabled-text-color: var(--text-disabled-color); --input-basic-disabled-placeholder-text-color: var(--text-disabled-color); --input-primary-text-color: var(--text-basic-color); --input-primary-placeholder-text-color: var(--text-hint-color); --input-primary-background-color: var(--background-basic-color-2); --input-primary-border-color: var(--color-primary-default); --input-primary-focus-background-color: var(--background-basic-color-1); --input-primary-focus-border-color: var(--color-primary-focus-border); --input-primary-hover-background-color: var(--background-basic-color-3); --input-primary-hover-border-color: var(--color-primary-hover-border); --input-primary-focus-and-hover-background-color: var(--input-primary-hover-background-color); --input-primary-focus-and-hover-border-color: var(--input-primary-hover-border-color); --input-primary-disabled-background-color: var(--background-basic-color-2); --input-primary-disabled-border-color: var(--border-basic-color-4); --input-primary-disabled-text-color: var(--text-disabled-color); --input-primary-disabled-placeholder-text-color: var(--text-disabled-color); --input-success-text-color: var(--text-basic-color); --input-success-placeholder-text-color: var(--text-hint-color); --input-success-background-color: var(--background-basic-color-2); --input-success-border-color: var(--color-success-default); --input-success-focus-background-color: var(--background-basic-color-1); --input-success-focus-border-color: var(--color-success-focus-border); --input-success-hover-background-color: var(--background-basic-color-3); --input-success-hover-border-color: var(--color-success-hover-border); --input-success-focus-and-hover-background-color: var(--input-success-hover-background-color); --input-success-focus-and-hover-border-color: var(--input-success-hover-border-color); --input-success-disabled-background-color: var(--background-basic-color-2); --input-success-disabled-border-color: var(--border-basic-color-4); --input-success-disabled-text-color: var(--text-disabled-color); --input-success-disabled-placeholder-text-color: var(--text-disabled-color); --input-info-text-color: var(--text-basic-color); --input-info-placeholder-text-color: var(--text-hint-color); --input-info-background-color: var(--background-basic-color-2); --input-info-border-color: var(--color-info-default); --input-info-focus-background-color: var(--background-basic-color-1); --input-info-focus-border-color: var(--color-info-focus-border); --input-info-hover-background-color: var(--background-basic-color-3); --input-info-hover-border-color: var(--color-info-hover-border); --input-info-focus-and-hover-background-color: var(--input-info-hover-background-color); --input-info-focus-and-hover-border-color: var(--input-info-hover-border-color); --input-info-disabled-background-color: var(--background-basic-color-2); --input-info-disabled-border-color: var(--border-basic-color-4); --input-info-disabled-text-color: var(--text-disabled-color); --input-info-disabled-placeholder-text-color: var(--text-disabled-color); --input-warning-text-color: var(--text-basic-color); --input-warning-placeholder-text-color: var(--text-hint-color); --input-warning-background-color: var(--background-basic-color-2); --input-warning-border-color: var(--color-warning-default); --input-warning-focus-background-color: var(--background-basic-color-1); --input-warning-focus-border-color: var(--color-warning-focus-border); --input-warning-hover-background-color: var(--background-basic-color-3); --input-warning-hover-border-color: var(--color-warning-hover-border); --input-warning-focus-and-hover-background-color: var(--input-warning-hover-background-color); --input-warning-focus-and-hover-border-color: var(--input-warning-hover-border-color); --input-warning-disabled-background-color: var(--background-basic-color-2); --input-warning-disabled-border-color: var(--border-basic-color-4); --input-warning-disabled-text-color: var(--text-disabled-color); --input-warning-disabled-placeholder-text-color: var(--text-disabled-color); --input-danger-text-color: var(--text-basic-color); --input-danger-placeholder-text-color: var(--text-hint-color); --input-danger-background-color: var(--background-basic-color-2); --input-danger-border-color: var(--color-danger-default); --input-danger-focus-background-color: var(--background-basic-color-1); --input-danger-focus-border-color: var(--color-danger-focus-border); --input-danger-hover-background-color: var(--background-basic-color-3); --input-danger-hover-border-color: var(--color-danger-hover-border); --input-danger-focus-and-hover-background-color: var(--input-danger-hover-background-color); --input-danger-focus-and-hover-border-color: var(--input-danger-hover-border-color); --input-danger-disabled-background-color: var(--background-basic-color-2); --input-danger-disabled-border-color: var(--border-basic-color-4); --input-danger-disabled-text-color: var(--text-disabled-color); --input-danger-disabled-placeholder-text-color: var(--text-disabled-color); --input-control-text-color: var(--text-control-color); --input-control-placeholder-text-color: var(--text-control-color); --input-control-background-color: var(--color-basic-control-transparent-300); --input-control-border-color: var(--color-basic-control-transparent-500); --input-control-focus-background-color: var(--color-basic-control-transparent-500); --input-control-focus-border-color: var(--color-control-transparent-focus-border); --input-control-hover-background-color: var(--color-basic-control-transparent-400); --input-control-hover-border-color: var(--color-control-transparent-hover-border); --input-control-focus-and-hover-background-color: var(--input-control-hover-background-color); --input-control-focus-and-hover-border-color: var(--input-control-hover-border-color); --input-control-disabled-background-color: var(--color-control-transparent-disabled); --input-control-disabled-border-color: var(--color-control-transparent-disabled-border); --input-control-disabled-text-color: var(--text-control-color); --input-control-disabled-placeholder-text-color: var(--text-control-color); --input-rectangle-border-radius: var(--border-radius); --input-semi-round-border-radius: 0.75rem; --input-round-border-radius: 1.5rem; --input-tiny-text-font-size: var(--text-caption-2-font-size); --input-tiny-text-font-weight: var(--text-caption-2-font-weight); --input-tiny-text-line-height: var(--text-caption-2-line-height); --input-tiny-placeholder-text-font-size: var(--text-paragraph-font-size); --input-tiny-placeholder-text-font-weight: var(--text-paragraph-font-weight); --input-tiny-placeholder-text-line-height: var(--text-paragraph-line-height); --input-tiny-padding: 0.1875rem 1rem; --input-tiny-max-width: 20rem; --input-small-text-font-size: var(--text-subtitle-2-font-size); --input-small-text-font-weight: var(--text-subtitle-2-font-weight); --input-small-text-line-height: var(--text-subtitle-2-line-height); --input-small-placeholder-text-font-size: var(--text-paragraph-font-size); --input-small-placeholder-text-font-weight: var(--text-paragraph-font-weight); --input-small-placeholder-text-line-height: var(--text-paragraph-line-height); --input-small-padding: 0.1875rem 1rem; --input-small-max-width: 20rem; --input-medium-text-font-size: var(--text-subtitle-font-size); --input-medium-text-font-weight: var(--text-subtitle-font-weight); --input-medium-text-line-height: var(--text-subtitle-line-height); --input-medium-placeholder-text-font-size: var(--text-paragraph-font-size); --input-medium-placeholder-text-font-weight: var(--text-paragraph-font-weight); --input-medium-placeholder-text-line-height: var(--text-paragraph-line-height); --input-medium-padding: 0.4375rem 1rem; --input-medium-max-width: 20rem; --input-large-text-font-size: var(--text-subtitle-font-size); --input-large-text-font-weight: var(--text-subtitle-font-weight); --input-large-text-line-height: var(--text-subtitle-line-height); --input-large-placeholder-text-font-size: var(--text-paragraph-font-size); --input-large-placeholder-text-font-weight: var(--text-paragraph-font-weight); --input-large-placeholder-text-line-height: var(--text-paragraph-line-height); --input-large-padding: 0.6875rem 1rem; --input-large-max-width: 30rem; --input-giant-text-font-size: var(--text-heading-6-font-size); --input-giant-text-font-weight: var(--text-heading-6-font-weight); --input-giant-text-line-height: var(--text-heading-6-line-height); --input-giant-placeholder-text-font-size: var(--text-paragraph-font-size); --input-giant-placeholder-text-font-weight: var(--text-paragraph-font-weight); --input-giant-placeholder-text-line-height: var(--text-paragraph-line-height); --input-giant-padding: 0.9375rem 1rem; --input-giant-max-width: 30rem; --checkbox-height: 1.25rem; --checkbox-width: 1.25rem; --checkbox-border-style: solid; --checkbox-border-width: 1px; --checkbox-border-radius: 3px; --checkbox-outline-width: var(--outline-width); --checkbox-outline-color: var(--outline-color); --checkbox-text-font-family: var(--text-subtitle-2-font-family); --checkbox-text-font-size: var(--text-subtitle-2-font-size); --checkbox-text-font-weight: var(--text-subtitle-2-font-weight); --checkbox-text-line-height: var(--text-subtitle-2-line-height); --checkbox-text-space: 0.6875rem; --checkbox-padding: 0; --checkbox-focus-inset-shadow-length: 0 0 0 100vmax; --checkbox-basic-text-color: var(--text-basic-color); --checkbox-basic-background-color: var(--color-basic-transparent-default); --checkbox-basic-border-color: var(--color-basic-transparent-default-border); --checkbox-basic-checked-background-color: var(--color-primary-default); --checkbox-basic-checked-border-color: var(--color-primary-default-border); --checkbox-basic-checked-checkmark-color: var(--text-control-color); --checkbox-basic-indeterminate-background-color: var(--color-primary-default); --checkbox-basic-indeterminate-border-color: var(--color-primary-default-border); --checkbox-basic-indeterminate-checkmark-color: var(--text-control-color); --checkbox-basic-focus-background-color: var(--color-basic-transparent-focus); --checkbox-basic-focus-border-color: var(--color-basic-transparent-focus-border); --checkbox-basic-focus-checked-background-color: var(--color-primary-focus); --checkbox-basic-focus-checked-border-color: var(--color-primary-focus-border); --checkbox-basic-hover-background-color: var(--color-primary-transparent-hover); --checkbox-basic-hover-border-color: var(--color-primary-transparent-hover-border); --checkbox-basic-hover-checked-background-color: var(--color-primary-hover); --checkbox-basic-hover-checked-border-color: var(--color-primary-hover-border); --checkbox-basic-active-background-color: var(--color-basic-transparent-active); --checkbox-basic-active-border-color: var(--color-basic-transparent-active-border); --checkbox-basic-active-checked-background-color: var(--color-primary-active); --checkbox-basic-active-checked-border-color: var(--color-primary-active-border); --checkbox-basic-disabled-background-color: var(--color-basic-transparent-disabled); --checkbox-basic-disabled-border-color: var(--color-basic-transparent-disabled-border); --checkbox-basic-disabled-checkmark-color: var(--text-control-color); --checkbox-basic-disabled-text-color: var(--text-disabled-color); --checkbox-basic-disabled-checked-background-color: var(--color-basic-transparent-600); --checkbox-basic-disabled-checked-border-color: var(--color-basic-transparent-600); --checkbox-primary-text-color: var(--text-basic-color); --checkbox-primary-background-color: var(--color-primary-transparent-default); --checkbox-primary-border-color: var(--color-primary-transparent-default-border); --checkbox-primary-checked-background-color: var(--color-primary-default); --checkbox-primary-checked-border-color: var(--color-primary-default-border); --checkbox-primary-checked-checkmark-color: var(--text-control-color); --checkbox-primary-indeterminate-background-color: var(--color-primary-default); --checkbox-primary-indeterminate-border-color: var(--color-primary-default-border); --checkbox-primary-indeterminate-checkmark-color: var(--text-control-color); --checkbox-primary-focus-background-color: var(--color-primary-transparent-focus); --checkbox-primary-focus-border-color: var(--color-primary-transparent-focus-border); --checkbox-primary-focus-checked-background-color: var(--color-primary-focus); --checkbox-primary-focus-checked-border-color: var(--color-primary-focus-border); --checkbox-primary-hover-background-color: var(--color-primary-transparent-hover); --checkbox-primary-hover-border-color: var(--color-primary-transparent-hover-border); --checkbox-primary-hover-checked-background-color: var(--color-primary-hover); --checkbox-primary-hover-checked-border-color: var(--color-primary-hover-border); --checkbox-primary-active-background-color: var(--color-primary-transparent-active); --checkbox-primary-active-border-color: var(--color-primary-transparent-active-border); --checkbox-primary-active-checked-background-color: var(--color-primary-active); --checkbox-primary-active-checked-border-color: var(--color-primary-active-border); --checkbox-primary-disabled-background-color: var(--color-basic-transparent-disabled); --checkbox-primary-disabled-border-color: var(--color-basic-transparent-disabled-border); --checkbox-primary-disabled-checkmark-color: var(--text-control-color); --checkbox-primary-disabled-text-color: var(--text-disabled-color); --checkbox-primary-disabled-checked-background-color: var(--color-basic-transparent-600); --checkbox-primary-disabled-checked-border-color: var(--color-basic-transparent-600); --checkbox-success-text-color: var(--text-basic-color); --checkbox-success-background-color: var(--color-success-transparent-default); --checkbox-success-border-color: var(--color-success-transparent-default-border); --checkbox-success-checked-background-color: var(--color-success-default); --checkbox-success-checked-border-color: var(--color-success-default-border); --checkbox-success-checked-checkmark-color: var(--text-control-color); --checkbox-success-indeterminate-background-color: var(--color-success-default); --checkbox-success-indeterminate-border-color: var(--color-success-default-border); --checkbox-success-indeterminate-checkmark-color: var(--text-control-color); --checkbox-success-focus-background-color: var(--color-success-transparent-focus); --checkbox-success-focus-border-color: var(--color-success-transparent-focus-border); --checkbox-success-focus-checked-background-color: var(--color-success-focus); --checkbox-success-focus-checked-border-color: var(--color-success-focus-border); --checkbox-success-hover-background-color: var(--color-success-transparent-hover); --checkbox-success-hover-border-color: var(--color-success-transparent-hover-border); --checkbox-success-hover-checked-background-color: var(--color-success-hover); --checkbox-success-hover-checked-border-color: var(--color-success-hover-border); --checkbox-success-active-background-color: var(--color-success-transparent-active); --checkbox-success-active-border-color: var(--color-success-transparent-active-border); --checkbox-success-active-checked-background-color: var(--color-success-active); --checkbox-success-active-checked-border-color: var(--color-success-active-border); --checkbox-success-disabled-background-color: var(--color-basic-transparent-disabled); --checkbox-success-disabled-border-color: var(--color-basic-transparent-disabled-border); --checkbox-success-disabled-checkmark-color: var(--text-control-color); --checkbox-success-disabled-text-color: var(--text-disabled-color); --checkbox-success-disabled-checked-background-color: var(--color-basic-transparent-600); --checkbox-success-disabled-checked-border-color: var(--color-basic-transparent-600); --checkbox-info-text-color: var(--text-basic-color); --checkbox-info-background-color: var(--color-info-transparent-default); --checkbox-info-border-color: var(--color-info-transparent-default-border); --checkbox-info-checked-background-color: var(--color-info-default); --checkbox-info-checked-border-color: var(--color-info-default-border); --checkbox-info-checked-checkmark-color: var(--text-control-color); --checkbox-info-indeterminate-background-color: var(--color-info-default); --checkbox-info-indeterminate-border-color: var(--color-info-default-border); --checkbox-info-indeterminate-checkmark-color: var(--text-control-color); --checkbox-info-focus-background-color: var(--color-info-transparent-focus); --checkbox-info-focus-border-color: var(--color-info-transparent-focus-border); --checkbox-info-focus-checked-background-color: var(--color-info-focus); --checkbox-info-focus-checked-border-color: var(--color-info-focus-border); --checkbox-info-hover-background-color: var(--color-info-transparent-hover); --checkbox-info-hover-border-color: var(--color-info-transparent-hover-border); --checkbox-info-hover-checked-background-color: var(--color-info-hover); --checkbox-info-hover-checked-border-color: var(--color-info-hover-border); --checkbox-info-active-background-color: var(--color-info-transparent-active); --checkbox-info-active-border-color: var(--color-info-transparent-active-border); --checkbox-info-active-checked-background-color: var(--color-info-active); --checkbox-info-active-checked-border-color: var(--color-info-active-border); --checkbox-info-disabled-background-color: var(--color-basic-transparent-disabled); --checkbox-info-disabled-border-color: var(--color-basic-transparent-disabled-border); --checkbox-info-disabled-checkmark-color: var(--text-control-color); --checkbox-info-disabled-text-color: var(--text-disabled-color); --checkbox-info-disabled-checked-background-color: var(--color-basic-transparent-600); --checkbox-info-disabled-checked-border-color: var(--color-basic-transparent-600); --checkbox-warning-text-color: var(--text-basic-color); --checkbox-warning-background-color: var(--color-warning-transparent-default); --checkbox-warning-border-color: var(--color-warning-transparent-default-border); --checkbox-warning-checked-background-color: var(--color-warning-default); --checkbox-warning-checked-border-color: var(--color-warning-default-border); --checkbox-warning-checked-checkmark-color: var(--text-control-color); --checkbox-warning-indeterminate-background-color: var(--color-warning-default); --checkbox-warning-indeterminate-border-color: var(--color-warning-default-border); --checkbox-warning-indeterminate-checkmark-color: var(--text-control-color); --checkbox-warning-focus-background-color: var(--color-warning-transparent-focus); --checkbox-warning-focus-border-color: var(--color-warning-transparent-focus-border); --checkbox-warning-focus-checked-background-color: var(--color-warning-focus); --checkbox-warning-focus-checked-border-color: var(--color-warning-focus-border); --checkbox-warning-hover-background-color: var(--color-warning-transparent-hover); --checkbox-warning-hover-border-color: var(--color-warning-transparent-hover-border); --checkbox-warning-hover-checked-background-color: var(--color-warning-hover); --checkbox-warning-hover-checked-border-color: var(--color-warning-hover-border); --checkbox-warning-active-background-color: var(--color-warning-transparent-active); --checkbox-warning-active-border-color: var(--color-warning-transparent-active-border); --checkbox-warning-active-checked-background-color: var(--color-warning-active); --checkbox-warning-active-checked-border-color: var(--color-warning-active-border); --checkbox-warning-disabled-background-color: var(--color-basic-transparent-disabled); --checkbox-warning-disabled-border-color: var(--color-basic-transparent-disabled-border); --checkbox-warning-disabled-checkmark-color: var(--text-control-color); --checkbox-warning-disabled-text-color: var(--text-disabled-color); --checkbox-warning-disabled-checked-background-color: var(--color-basic-transparent-600); --checkbox-warning-disabled-checked-border-color: var(--color-basic-transparent-600); --checkbox-danger-text-color: var(--text-basic-color); --checkbox-danger-background-color: var(--color-danger-transparent-default); --checkbox-danger-border-color: var(--color-danger-transparent-default-border); --checkbox-danger-checked-background-color: var(--color-danger-default); --checkbox-danger-checked-border-color: var(--color-danger-default-border); --checkbox-danger-checked-checkmark-color: var(--text-control-color); --checkbox-danger-indeterminate-background-color: var(--color-danger-default); --checkbox-danger-indeterminate-border-color: var(--color-danger-default-border); --checkbox-danger-indeterminate-checkmark-color: var(--text-control-color); --checkbox-danger-focus-background-color: var(--color-danger-transparent-focus); --checkbox-danger-focus-border-color: var(--color-danger-transparent-focus-border); --checkbox-danger-focus-checked-background-color: var(--color-danger-focus); --checkbox-danger-focus-checked-border-color: var(--color-danger-focus-border); --checkbox-danger-hover-background-color: var(--color-danger-transparent-hover); --checkbox-danger-hover-border-color: var(--color-danger-transparent-hover-border); --checkbox-danger-hover-checked-background-color: var(--color-danger-hover); --checkbox-danger-hover-checked-border-color: var(--color-danger-hover-border); --checkbox-danger-active-background-color: var(--color-danger-transparent-active); --checkbox-danger-active-border-color: var(--color-danger-transparent-active-border); --checkbox-danger-active-checked-background-color: var(--color-danger-active); --checkbox-danger-active-checked-border-color: var(--color-danger-active-border); --checkbox-danger-disabled-background-color: var(--color-basic-transparent-disabled); --checkbox-danger-disabled-border-color: var(--color-basic-transparent-disabled-border); --checkbox-danger-disabled-checkmark-color: var(--text-control-color); --checkbox-danger-disabled-text-color: var(--text-disabled-color); --checkbox-danger-disabled-checked-background-color: var(--color-basic-transparent-600); --checkbox-danger-disabled-checked-border-color: var(--color-basic-transparent-600); --checkbox-control-text-color: var(--text-control-color); --checkbox-control-background-color: var(--color-control-transparent-default); --checkbox-control-border-color: var(--color-control-transparent-default-border); --checkbox-control-checked-background-color: var(--color-control-default); --checkbox-control-checked-border-color: var(--color-control-default-border); --checkbox-control-checked-checkmark-color: var(--color-basic-800); --checkbox-control-indeterminate-background-color: var(--color-control-default); --checkbox-control-indeterminate-border-color: var(--color-control-default-border); --checkbox-control-indeterminate-checkmark-color: var(--color-basic-800); --checkbox-control-focus-background-color: var(--color-control-transparent-focus); --checkbox-control-focus-border-color: var(--color-control-transparent-focus-border); --checkbox-control-focus-checked-background-color: var(--color-control-focus); --checkbox-control-focus-checked-border-color: var(--color-control-focus-border); --checkbox-control-hover-background-color: var(--color-control-transparent-hover); --checkbox-control-hover-border-color: var(--color-control-transparent-hover-border); --checkbox-control-hover-checked-background-color: var(--color-control-hover); --checkbox-control-hover-checked-border-color: var(--color-control-hover-border); --checkbox-control-active-background-color: var(--color-control-transparent-active); --checkbox-control-active-border-color: var(--color-control-transparent-active-border); --checkbox-control-active-checked-background-color: var(--color-control-active); --checkbox-control-active-checked-border-color: var(--color-control-active-border); --checkbox-control-disabled-background-color: var(--color-control-transparent-disabled); --checkbox-control-disabled-border-color: var(--color-control-transparent-disabled-border); --checkbox-control-disabled-checkmark-color: var(--text-control-color); --checkbox-control-disabled-text-color: var(--text-control-color); --checkbox-control-disabled-checked-background-color: var(--color-basic-transparent-600); --checkbox-control-disabled-checked-border-color: var(--color-basic-transparent-600); --badge-dot-mode-border-radius: 0.5rem; --badge-dot-mode-padding: 0.3rem; --badge-border-radius: var(--border-radius); --badge-text-font-family: var(--text-button-font-family); --badge-text-font-size: var(--text-button-tiny-font-size); --badge-text-font-weight: var(--text-button-font-weight); --badge-text-line-height: var(--text-button-tiny-line-height); --badge-padding: 0.25rem 0.4rem; --badge-basic-background-color: var(--background-basic-color-2); --badge-basic-text-color: var(--text-basic-color); --badge-primary-background-color: var(--color-primary-default); --badge-primary-text-color: var(--text-control-color); --badge-success-background-color: var(--color-success-default); --badge-success-text-color: var(--text-control-color); --badge-info-background-color: var(--color-info-default); --badge-info-text-color: var(--text-control-color); --badge-warning-background-color: var(--color-warning-default); --badge-warning-text-color: var(--text-control-color); --badge-danger-background-color: var(--color-danger-default); --badge-danger-text-color: var(--text-control-color); --badge-control-background-color: var(--color-control-default); --badge-control-text-color: var(--color-basic-800); --progress-bar-animation-duration: 400ms; --progress-bar-border-radius: var(--border-radius); --progress-bar-text-font-family: var(--text-subtitle-font-family); --progress-bar-tiny-height: 1rem; --progress-bar-tiny-text-font-size: var(--text-subtitle-2-font-size); --progress-bar-tiny-text-font-weight: var(--text-subtitle-2-font-weight); --progress-bar-tiny-text-line-height: var(--text-subtitle-2-line-height); --progress-bar-small-height: 1.25rem; --progress-bar-small-text-font-size: var(--text-subtitle-2-font-size); --progress-bar-small-text-font-weight: var(--text-subtitle-2-font-weight); --progress-bar-small-text-line-height: var(--text-subtitle-2-line-height); --progress-bar-medium-height: 1.375rem; --progress-bar-medium-text-font-size: var(--text-subtitle-font-size); --progress-bar-medium-text-font-weight: var(--text-subtitle-font-weight); --progress-bar-medium-text-line-height: var(--text-subtitle-line-height); --progress-bar-large-height: 1.5rem; --progress-bar-large-text-font-size: var(--text-subtitle-font-size); --progress-bar-large-text-font-weight: var(--text-subtitle-font-weight); --progress-bar-large-text-line-height: var(--text-subtitle-line-height); --progress-bar-giant-height: 1.75rem; --progress-bar-giant-text-font-size: var(--text-subtitle-font-size); --progress-bar-giant-text-font-weight: var(--text-subtitle-font-weight); --progress-bar-giant-text-line-height: var(--text-subtitle-line-height); --progress-bar-basic-background-color: var(--background-basic-color-2); --progress-bar-basic-filled-background-color: var(--background-basic-color-4); --progress-bar-basic-text-color: var(--text-basic-color); --progress-bar-primary-background-color: var(--background-basic-color-3); --progress-bar-primary-filled-background-color: var(--color-primary-default); --progress-bar-primary-text-color: var(--text-control-color); --progress-bar-success-background-color: var(--background-basic-color-3); --progress-bar-success-filled-background-color: var(--color-success-default); --progress-bar-success-text-color: var(--text-control-color); --progress-bar-info-background-color: var(--background-basic-color-3); --progress-bar-info-filled-background-color: var(--color-info-default); --progress-bar-info-text-color: var(--text-control-color); --progress-bar-warning-background-color: var(--background-basic-color-3); --progress-bar-warning-filled-background-color: var(--color-warning-default); --progress-bar-warning-text-color: var(--text-control-color); --progress-bar-danger-background-color: var(--background-basic-color-3); --progress-bar-danger-filled-background-color: var(--color-danger-default); --progress-bar-danger-text-color: var(--text-control-color); --progress-bar-control-background-color: var(--background-basic-color-3); --progress-bar-control-filled-background-color: var(--color-control-default); --progress-bar-control-text-color: var(--color-basic-800); --alert-border-radius: var(--border-radius); --alert-bottom-margin: 1.5rem; --alert-padding: 1rem 1.125rem; --alert-scrollbar-color: var(--scrollbar-color); --alert-scrollbar-background-color: var(--scrollbar-background-color); --alert-scrollbar-width: var(--scrollbar-width); --alert-shadow: none; --alert-text-font-family: var(--text-paragraph-font-family); --alert-text-font-size: var(--text-subtitle-font-size); --alert-text-font-weight: var(--text-subtitle-font-weight); --alert-text-line-height: var(--text-subtitle-line-height); --alert-closable-start-padding: 3rem; --alert-tiny-height: 4.5rem; --alert-small-height: 5.75rem; --alert-medium-height: 7rem; --alert-medium-padding: 1rem 1.125rem; --alert-large-height: 8.25rem; --alert-giant-height: 9.5rem; --alert-basic-background-color: var(--background-basic-color-2); --alert-basic-text-color: var(--text-basic-color); --alert-primary-background-color: var(--color-primary-default); --alert-primary-text-color: var(--text-control-color); --alert-success-background-color: var(--color-success-default); --alert-success-text-color: var(--text-control-color); --alert-info-background-color: var(--color-info-default); --alert-info-text-color: var(--text-control-color); --alert-warning-background-color: var(--color-warning-default); --alert-warning-text-color: var(--text-control-color); --alert-danger-background-color: var(--color-danger-default); --alert-danger-text-color: var(--text-control-color); --alert-control-background-color: var(--color-control-default); --alert-control-text-color: var(--color-basic-800); --alert-accent-basic-color: var(--border-basic-color-3); --alert-accent-primary-color: var(--color-primary-default); --alert-accent-info-color: var(--color-info-default); --alert-accent-success-color: var(--color-success-default); --alert-accent-warning-color: var(--color-warning-default); --alert-accent-danger-color: var(--color-danger-default); --alert-accent-control-color: var(--color-control-default); --alert-outline-width: 1px; --alert-outline-basic-color: var(--color-basic-focus-border); --alert-outline-primary-color: var(--color-primary-focus-border); --alert-outline-info-color: var(--color-info-focus-border); --alert-outline-success-color: var(--color-success-focus-border); --alert-outline-warning-color: var(--color-warning-focus-border); --alert-outline-danger-color: var(--color-danger-focus-border); --alert-outline-control-color: var(--color-control-focus-border); --chat-background-color: var(--background-basic-color-1); --chat-border: none; --chat-border-radius: var(--border-radius); --chat-shadow: var(--shadow); --chat-padding: 1rem 1.25rem; --chat-scrollbar-color: var(--scrollbar-color); --chat-scrollbar-background-color: var(--scrollbar-background-color); --chat-scrollbar-width: var(--scrollbar-width); --chat-text-color: var(--text-basic-color); --chat-text-font-family: var(--text-paragraph-font-family); --chat-text-font-size: var(--text-paragraph-font-size); --chat-text-font-weight: var(--text-paragraph-font-weight); --chat-text-line-height: var(--text-paragraph-line-height); --chat-header-text-font-family: var(--text-subtitle-font-family); --chat-header-text-font-size: var(--text-subtitle-font-size); --chat-header-text-font-weight: var(--text-subtitle-font-weight); --chat-header-text-line-height: var(--text-subtitle-line-height); --chat-tiny-height: 13.5rem; --chat-small-height: 21rem; --chat-medium-height: 28.5rem; --chat-large-height: 36rem; --chat-giant-height: 43.5rem; --chat-basic-background-color: var(--background-basic-color-1); --chat-basic-text-color: var(--text-basic-color); --chat-primary-background-color: var(--color-primary-default); --chat-primary-text-color: var(--text-control-color); --chat-success-background-color: var(--color-success-default); --chat-success-text-color: var(--text-control-color); --chat-info-background-color: var(--color-info-default); --chat-info-text-color: var(--text-control-color); --chat-warning-background-color: var(--color-warning-default); --chat-warning-text-color: var(--text-control-color); --chat-danger-background-color: var(--color-danger-default); --chat-danger-text-color: var(--text-control-color); --chat-control-background-color: var(--color-control-default); --chat-control-text-color: var(--color-basic-800); --chat-divider-color: var(--divider-color); --chat-divider-style: var(--divider-style); --chat-divider-width: var(--divider-width); --chat-message-background: var(--color-primary-default); --chat-message-text-color: var(--text-control-color); --chat-message-reply-background-color: var(--background-basic-color-2); --chat-message-reply-text-color: var(--text-basic-color); --chat-message-avatar-background-color: var(--color-basic-500); --chat-message-sender-text-color: var(--text-hint-color); --chat-message-quote-background-color: var(--background-basic-color-2); --chat-message-quote-text-color: var(--text-hint-color); --chat-message-file-text-color: var(--text-hint-color); --chat-message-file-background-color: transparent; --spinner-text-color: var(--text-basic-color); --spinner-text-font-family: var(--text-button-font-family); --spinner-text-font-size: var(--text-button-medium-font-size); --spinner-text-font-weight: var(--text-button-font-weight); --spinner-text-line-height: var(--text-button-medium-line-height); --spinner-basic-background-color: var(--color-basic-transparent-200); --spinner-basic-circle-filled-color: var(--text-hint-color); --spinner-basic-circle-empty-color: transparent; --spinner-primary-background-color: var(--color-basic-transparent-200); --spinner-primary-circle-filled-color: var(--color-primary-default); --spinner-primary-circle-empty-color: transparent; --spinner-info-background-color: var(--color-basic-transparent-200); --spinner-info-circle-filled-color: var(--color-info-default); --spinner-info-circle-empty-color: transparent; --spinner-success-background-color: var(--color-basic-transparent-200); --spinner-success-circle-filled-color: var(--color-success-default); --spinner-success-circle-empty-color: transparent; --spinner-warning-background-color: var(--color-basic-transparent-200); --spinner-warning-circle-filled-color: var(--color-warning-default); --spinner-warning-circle-empty-color: transparent; --spinner-danger-background-color: var(--color-basic-transparent-200); --spinner-danger-circle-filled-color: var(--color-danger-default); --spinner-danger-circle-empty-color: transparent; --spinner-control-background-color: var(--color-basic-control-transparent-200); --spinner-control-circle-filled-color: var(--color-control-default); --spinner-control-circle-empty-color: transparent; --spinner-height-tiny: 1rem; --spinner-height-small: 1.25rem; --spinner-height-medium: 1.5rem; --spinner-height-large: 1.75rem; --spinner-height-giant: 2rem; --stepper-step-text-color: var(--text-hint-color); --stepper-step-text-font-family: var(--text-paragraph-font-family); --stepper-step-text-font-size: var(--text-paragraph-font-size); --stepper-step-text-font-weight: var(--text-paragraph-font-weight); --stepper-step-text-line-height: var(--text-paragraph-line-height); --stepper-step-active-text-color: var(--text-primary-active-color); --stepper-step-completed-text-color: var(--text-primary-color); --stepper-step-index-border-color: var(--border-basic-color-4); --stepper-step-index-border-style: solid; --stepper-step-index-border-width: 1px; --stepper-step-index-border-radius: 50%; --stepper-step-index-width: 2rem; --stepper-step-index-active-border-color: var(--color-primary-active); --stepper-step-index-completed-background-color: var(--color-primary-default); --stepper-step-index-completed-border-color: var(--color-primary-default); --stepper-step-index-completed-text-color: var(--text-control-color); --stepper-connector-background-color: var(--background-basic-color-3); --stepper-connector-completed-background-color: var(--color-primary-default); --stepper-horizontal-connector-margin: 1rem; --stepper-vertical-connector-margin: 1rem; --stepper-step-content-padding: 1.25rem; --accordion-border-radius: var(--border-radius); --accordion-padding: 1.25rem; --accordion-shadow: var(--shadow); --accordion-header-text-color: var(--text-basic-color); --accordion-header-text-font-family: var(--text-subtitle-font-family); --accordion-header-text-font-size: var(--text-subtitle-font-size); --accordion-header-text-font-weight: var(--text-subtitle-font-weight); --accordion-header-text-line-height: var(--text-subtitle-line-height); --accordion-header-disabled-text-color: var(--text-disabled-color); --accordion-header-border-color: var(--border-basic-color-3); --accordion-header-border-style: solid; --accordion-header-border-width: 1px; --accordion-item-background-color: var(--background-basic-color-1); --accordion-item-text-color: var(--text-basic-color); --accordion-item-text-font-family: var(--text-paragraph-font-family); --accordion-item-text-font-size: var(--text-paragraph-font-size); --accordion-item-text-font-weight: var(--text-paragraph-font-weight); --accordion-item-text-line-height: var(--text-paragraph-line-height); --list-item-divider-color: var(--divider-color); --list-item-divider-style: var(--divider-style); --list-item-divider-width: var(--divider-width); --list-item-padding: 1rem; --list-item-text-color: var(--text-basic-color); --list-item-font-family: var(--text-paragraph-font-family); --list-item-font-size: var(--text-paragraph-font-size); --list-item-font-weight: var(--text-paragraph-font-weight); --list-item-line-height: var(--text-paragraph-line-height); --calendar-width: 20.625rem; --calendar-background-color: var(--background-basic-color-1); --calendar-border-color: var(--border-basic-color-4); --calendar-border-style: solid; --calendar-border-width: 0.0625rem; --calendar-border-radius: var(--border-radius); --calendar-text-color: var(--text-basic-color); --calendar-text-font-family: var(--text-subtitle-font-family); --calendar-text-font-size: var(--text-subtitle-font-size); --calendar-text-font-weight: var(--text-subtitle-font-weight); --calendar-text-line-height: var(--text-subtitle-line-height); --calendar-picker-padding-top: 0.25rem; --calendar-picker-padding-bottom: 0.625rem; --calendar-picker-padding-start: 0.625rem; --calendar-picker-padding-end: 0.625rem; --calendar-navigation-text-color: var(--text-basic-color); --calendar-navigation-text-font-family: var(--text-button-font-family); --calendar-navigation-title-text-font-size: var(--text-button-medium-font-size); --calendar-navigation-title-text-font-weight: var(--text-button-font-weight); --calendar-navigation-title-text-line-height: var(--text-button-medium-line-height); --calendar-navigation-padding: 0.625rem 0.25rem; --calendar-cell-inactive-text-color: var(--text-hint-color); --calendar-cell-disabled-text-color: var(--text-disabled-color); --calendar-cell-hover-background-color: var(--background-basic-color-2); --calendar-cell-hover-border-color: var(--background-basic-color-2); --calendar-cell-hover-text-color: var(--text-basic-color); --calendar-cell-hover-text-font-size: var(--calendar-text-font-size); --calendar-cell-hover-text-font-weight: var(--calendar-text-font-weight); --calendar-cell-hover-text-line-height: var(--calendar-text-line-height); --calendar-cell-active-background-color: var(--color-primary-active); --calendar-cell-active-border-color: var(--color-primary-active-border); --calendar-cell-active-text-color: var(--text-control-color); --calendar-cell-active-text-font-size: var(--calendar-text-font-size); --calendar-cell-active-text-font-weight: var(--calendar-text-font-weight); --calendar-cell-active-text-line-height: var(--calendar-text-line-height); --calendar-cell-today-background-color: var(--color-primary-transparent-default); --calendar-cell-today-border-color: var(--color-primary-transparent-default-border); --calendar-cell-today-text-color: var(--text-basic-color); --calendar-cell-today-text-font-size: var(--calendar-text-font-size); --calendar-cell-today-text-font-weight: var(--calendar-text-font-weight); --calendar-cell-today-text-line-height: var(--calendar-text-line-height); --calendar-cell-today-hover-background-color: var(--color-primary-transparent-hover); --calendar-cell-today-hover-border-color: var(--color-primary-transparent-hover-border); --calendar-cell-today-active-background-color: var(--color-primary-transparent-active); --calendar-cell-today-active-border-color: var(--color-primary-transparent-active-border); --calendar-cell-today-disabled-border-color: var(--border-basic-color-4); --calendar-cell-today-selected-background-color: var(--color-control-transparent-default); --calendar-cell-today-selected-border-color: transparent; --calendar-cell-today-selected-text-color: var(--text-control-color); --calendar-cell-today-selected-hover-background-color: var(--color-control-transparent-hover); --calendar-cell-today-selected-hover-border-color: transparent; --calendar-cell-today-selected-active-background-color: var(--color-control-transparent-active); --calendar-cell-today-selected-active-border-color: transparent; --calendar-cell-today-in-range-background-color: var(--color-control-transparent-default); --calendar-cell-today-in-range-border-color: transparent; --calendar-cell-today-in-range-text-color: var(--text-control-color); --calendar-cell-today-in-range-hover-background-color: var(--color-control-transparent-hover); --calendar-cell-today-in-range-hover-border-color: transparent; --calendar-cell-today-in-range-active-background-color: var(--color-control-transparent-active); --calendar-cell-today-in-range-active-border-color: transparent; --calendar-cell-selected-background-color: var(--color-primary-default); --calendar-cell-selected-border-color: var(--color-primary-default-border); --calendar-cell-selected-text-color: var(--text-control-color); --calendar-cell-selected-text-font-size: var(--calendar-text-font-size); --calendar-cell-selected-text-font-weight: var(--calendar-text-font-weight); --calendar-cell-selected-text-line-height: var(--calendar-text-line-height); --calendar-cell-selected-hover-background-color: var(--color-primary-hover); --calendar-cell-selected-hover-border-color: var(--color-primary-hover-border); --calendar-cell-selected-active-background-color: var(--color-primary-active); --calendar-cell-selected-active-border-color: var(--color-primary-active-border); --calendar-day-cell-width: 2.75rem; --calendar-day-cell-height: 2.75rem; --calendar-month-cell-width: 4.8125rem; --calendar-month-cell-height: var(--calendar-day-cell-height); --calendar-year-cell-width: var(--calendar-month-cell-width); --calendar-year-cell-height: var(--calendar-month-cell-height); --calendar-weekday-background: transparent; --calendar-weekday-divider-color: var(--divider-color); --calendar-weekday-divider-width: var(--divider-width); --calendar-weekday-text-color: var(--text-hint-color); --calendar-weekday-text-font-size: var(--text-subtitle-font-size); --calendar-weekday-text-font-weight: var(--text-subtitle-font-weight); --calendar-weekday-text-line-height: var(--text-subtitle-line-height); --calendar-weekday-holiday-text-color: var(--calendar-weekday-text-color); --calendar-weekday-height: var(--calendar-day-cell-height); --calendar-weekday-width: var(--calendar-day-cell-width); --calendar-weeknumber-background: transparent; --calendar-weeknumber-divider-color: var(--divider-color); --calendar-weeknumber-divider-width: var(--divider-width); --calendar-weeknumber-text-color: var(--text-hint-color); --calendar-weeknumber-text-font-size: var(--text-subtitle-font-size); --calendar-weeknumber-text-font-weight: var(--text-subtitle-font-weight); --calendar-weeknumber-text-line-height: var(--text-subtitle-line-height); --calendar-weeknumber-height: var(--calendar-weekday-height); --calendar-weeknumber-width: var(--calendar-weekday-width); --calendar-large-width: 22.375rem; --calendar-day-cell-large-width: 3rem; --calendar-day-cell-large-height: 3rem; --calendar-weekday-large-height: var(--calendar-day-cell-large-width); --calendar-weekday-large-width: var(--calendar-day-cell-large-height); --calendar-weeknumber-large-height: var(--calendar-weekday-large-height); --calendar-weeknumber-large-width: var(--calendar-weekday-large-width); --calendar-month-cell-large-width: 5.25rem; --calendar-month-cell-large-height: var(--calendar-day-cell-large-height); --calendar-year-cell-large-width: var(--calendar-month-cell-large-width); --calendar-year-cell-large-height: var(--calendar-month-cell-large-height); --overlay-backdrop-background-color: rgba(0, 0, 0, 0.35); --tooltip-background-color: var(--background-alternative-color-3); --tooltip-border-color: transparent; --tooltip-border-style: dashed; --tooltip-border-width: 0; --tooltip-border-radius: var(--border-radius); --tooltip-padding: 0.5rem 1rem; --tooltip-text-color: var(--text-alternate-color); --tooltip-text-font-family: var(--text-caption-font-family); --tooltip-text-font-size: var(--text-caption-font-size); --tooltip-text-font-weight: var(--text-caption-font-weight); --tooltip-text-line-height: var(--text-caption-line-height); --tooltip-icon-height: 1rem; --tooltip-icon-width: 1rem; --tooltip-max-width: 16rem; --tooltip-basic-background-color: var(--background-basic-color-3); --tooltip-basic-border-color: transparent; --tooltip-basic-text-color: var(--text-basic-color); --tooltip-primary-background-color: var(--color-primary-default); --tooltip-primary-border-color: transparent; --tooltip-primary-text-color: var(--text-control-color); --tooltip-info-background-color: var(--color-info-default); --tooltip-info-border-color: transparent; --tooltip-info-text-color: var(--text-control-color); --tooltip-success-background-color: var(--color-success-default); --tooltip-success-border-color: transparent; --tooltip-success-text-color: var(--text-control-color); --tooltip-warning-background-color: var(--color-warning-default); --tooltip-warning-border-color: transparent; --tooltip-warning-text-color: var(--text-control-color); --tooltip-danger-background-color: var(--color-danger-default); --tooltip-danger-border-color: transparent; --tooltip-danger-text-color: var(--text-control-color); --tooltip-control-background-color: var(--color-control-default); --tooltip-control-border-color: transparent; --tooltip-control-text-color: var(--color-basic-800); --tooltip-shadow: var(--shadow); --option-list-max-height: 20rem; --option-list-shadow: none; --option-list-background-color: var(--background-basic-color-1); --option-list-border-style: solid; --option-list-border-width: 0.0625rem; --option-list-border-color: var(--border-basic-color-4); --option-list-border-radius: var(--border-radius); --option-list-adjacent-border-color: var(--option-list-border-color); --option-list-adjacent-border-style: var(--option-list-border-style); --option-list-adjacent-border-width: var(--option-list-border-width); --option-group-text-color: var(--text-hint-color); --option-group-tiny-start-padding: 1.25rem; --option-group-small-start-padding: 1.75rem; --option-group-medium-start-padding: 2.25rem; --option-group-large-start-padding: 2.25rem; --option-group-giant-start-padding: 2.75rem; --option-background-color: var(--background-basic-color-1); --option-text-color: var(--text-basic-color); --option-text-font-family: var(--text-subtitle-font-family); --option-hover-background-color: var(--color-basic-transparent-hover); --option-hover-text-color: var(--text-basic-color); --option-active-background-color: var(--color-basic-transparent-active); --option-active-text-color: var(--text-basic-color); --option-focus-background-color: var(--color-basic-transparent-focus); --option-focus-text-color: var(--text-basic-color); --option-selected-background-color: var(--color-primary-default); --option-selected-text-color: var(--text-control-color); --option-selected-hover-background-color: var(--color-primary-hover); --option-selected-hover-text-color: var(--text-control-color); --option-selected-active-background-color: var(--color-primary-active); --option-selected-active-text-color: var(--text-control-color); --option-selected-focus-background-color: var(--color-primary-focus); --option-selected-focus-text-color: var(--text-control-color); --option-disabled-background-color: var(--background-basic-color-1); --option-disabled-text-color: var(--text-disabled-color); --option-tiny-text-font-size: var(--text-caption-2-font-size); --option-tiny-text-font-weight: var(--text-caption-2-font-weight); --option-tiny-text-line-height: var(--text-caption-2-line-height); --option-tiny-padding: var(--select-outline-tiny-padding); --option-small-text-font-size: var(--text-subtitle-2-font-size); --option-small-text-font-weight: var(--text-subtitle-2-font-weight); --option-small-text-line-height: var(--text-subtitle-2-line-height); --option-small-padding: var(--select-outline-small-padding); --option-medium-text-font-size: var(--text-subtitle-font-size); --option-medium-text-font-weight: var(--text-subtitle-font-weight); --option-medium-text-line-height: var(--text-subtitle-line-height); --option-medium-padding: var(--select-outline-medium-padding); --option-large-text-font-size: var(--text-subtitle-font-size); --option-large-text-font-weight: var(--text-subtitle-font-weight); --option-large-text-line-height: var(--text-subtitle-line-height); --option-large-padding: var(--select-outline-large-padding); --option-giant-text-font-size: var(--text-heading-6-font-size); --option-giant-text-font-weight: var(--text-heading-6-font-weight); --option-giant-text-line-height: var(--text-heading-6-line-height); --option-giant-padding: var(--select-outline-giant-padding); --select-cursor: pointer; --select-disabled-cursor: default; --select-min-width: 13rem; --select-outline-width: var(--outline-width); --select-outline-color: var(--outline-color); --select-icon-offset: 2rem; --select-text-font-family: var(--text-subtitle-font-family); --select-placeholder-text-font-family: var(--text-paragraph-font-family); --select-tiny-text-font-size: var(--text-caption-2-font-size); --select-tiny-text-font-weight: var(--text-caption-2-font-weight); --select-tiny-text-line-height: var(--text-caption-2-line-height); --select-tiny-placeholder-text-font-size: var(--text-paragraph-font-size); --select-tiny-placeholder-text-font-weight: var(--text-paragraph-font-weight); --select-tiny-max-width: 20rem; --select-small-text-font-size: var(--text-subtitle-2-font-size); --select-small-text-font-weight: var(--text-subtitle-2-font-weight); --select-small-text-line-height: var(--text-subtitle-2-line-height); --select-small-placeholder-text-font-size: var(--text-paragraph-font-size); --select-small-placeholder-text-font-weight: var(--text-paragraph-font-weight); --select-small-max-width: 20rem; --select-medium-text-font-size: var(--text-subtitle-font-size); --select-medium-text-font-weight: var(--text-subtitle-font-weight); --select-medium-text-line-height: var(--text-subtitle-line-height); --select-medium-placeholder-text-font-size: var(--text-paragraph-font-size); --select-medium-placeholder-text-font-weight: var(--text-paragraph-font-weight); --select-medium-max-width: 20rem; --select-large-text-font-size: var(--text-subtitle-font-size); --select-large-text-font-weight: var(--text-subtitle-font-weight); --select-large-text-line-height: var(--text-subtitle-line-height); --select-large-placeholder-text-font-size: var(--text-paragraph-font-size); --select-large-placeholder-text-font-weight: var(--text-paragraph-font-weight); --select-large-max-width: 30rem; --select-giant-text-font-size: var(--text-heading-6-font-size); --select-giant-text-font-weight: var(--text-heading-6-font-weight); --select-giant-text-line-height: var(--text-heading-6-line-height); --select-giant-placeholder-text-font-size: var(--text-paragraph-font-size); --select-giant-placeholder-text-font-weight: var(--text-paragraph-font-weight); --select-giant-max-width: 30rem; --select-rectangle-border-radius: var(--border-radius); --select-semi-round-border-radius: 0.75rem; --select-round-border-radius: 1.5rem; --select-outline-border-style: solid; --select-outline-border-width: 1px; --select-outline-tiny-padding: 0.1875rem 1rem; --select-outline-small-padding: 0.1875rem 1rem; --select-outline-medium-padding: 0.4375rem 1rem; --select-outline-large-padding: 0.6875rem 1rem; --select-outline-giant-padding: 0.9375rem 1rem; --select-outline-basic-icon-color: var(--text-hint-color); --select-outline-basic-text-color: var(--text-basic-color); --select-outline-basic-placeholder-text-color: var(--text-hint-color); --select-outline-basic-background-color: var(--background-basic-color-2); --select-outline-basic-border-color: var(--border-basic-color-4); --select-outline-basic-focus-background-color: var(--background-basic-color-1); --select-outline-basic-focus-border-color: var(--color-primary-default); --select-outline-basic-hover-background-color: var(--background-basic-color-3); --select-outline-basic-hover-border-color: var(--border-basic-color-4); --select-outline-basic-focus-and-hover-background-color: var(--select-outline-basic-hover-background-color); --select-outline-basic-focus-and-hover-border-color: var(--select-outline-basic-hover-border-color); --select-outline-basic-disabled-background-color: var(--background-basic-color-2); --select-outline-basic-disabled-border-color: var(--border-basic-color-4); --select-outline-basic-disabled-icon-color: var(--text-disabled-color); --select-outline-basic-disabled-text-color: var(--text-disabled-color); --select-outline-primary-icon-color: var(--text-hint-color); --select-outline-primary-text-color: var(--text-basic-color); --select-outline-primary-placeholder-text-color: var(--text-hint-color); --select-outline-primary-background-color: var(--background-basic-color-2); --select-outline-primary-border-color: var(--color-primary-default); --select-outline-primary-focus-background-color: var(--background-basic-color-1); --select-outline-primary-focus-border-color: var(--color-primary-focus); --select-outline-primary-hover-background-color: var(--background-basic-color-3); --select-outline-primary-hover-border-color: var(--color-primary-hover); --select-outline-primary-focus-and-hover-background-color: var(--select-outline-primary-hover-background-color); --select-outline-primary-focus-and-hover-border-color: var(--select-outline-primary-hover-border-color); --select-outline-primary-disabled-background-color: var(--background-basic-color-2); --select-outline-primary-disabled-border-color: var(--border-basic-color-4); --select-outline-primary-disabled-icon-color: var(--text-disabled-color); --select-outline-primary-disabled-text-color: var(--text-disabled-color); --select-outline-success-icon-color: var(--text-hint-color); --select-outline-success-text-color: var(--text-basic-color); --select-outline-success-placeholder-text-color: var(--text-hint-color); --select-outline-success-background-color: var(--background-basic-color-2); --select-outline-success-border-color: var(--color-success-default); --select-outline-success-focus-background-color: var(--background-basic-color-1); --select-outline-success-focus-border-color: var(--color-success-focus); --select-outline-success-focus-and-hover-background-color: var(--select-outline-success-hover-background-color); --select-outline-success-focus-and-hover-border-color: var(--select-outline-success-hover-border-color); --select-outline-success-hover-background-color: var(--background-basic-color-3); --select-outline-success-hover-border-color: var(--color-success-hover); --select-outline-success-disabled-background-color: var(--background-basic-color-2); --select-outline-success-disabled-border-color: var(--border-basic-color-4); --select-outline-success-disabled-icon-color: var(--text-disabled-color); --select-outline-success-disabled-text-color: var(--text-disabled-color); --select-outline-info-icon-color: var(--text-hint-color); --select-outline-info-text-color: var(--text-basic-color); --select-outline-info-placeholder-text-color: var(--text-hint-color); --select-outline-info-background-color: var(--background-basic-color-2); --select-outline-info-border-color: var(--color-info-default); --select-outline-info-focus-background-color: var(--background-basic-color-1); --select-outline-info-focus-border-color: var(--color-info-focus); --select-outline-info-hover-background-color: var(--background-basic-color-3); --select-outline-info-hover-border-color: var(--color-info-hover); --select-outline-info-focus-and-hover-background-color: var(--select-outline-info-hover-background-color); --select-outline-info-focus-and-hover-border-color: var(--select-outline-info-hover-border-color); --select-outline-info-disabled-background-color: var(--background-basic-color-2); --select-outline-info-disabled-border-color: var(--border-basic-color-4); --select-outline-info-disabled-icon-color: var(--text-disabled-color); --select-outline-info-disabled-text-color: var(--text-disabled-color); --select-outline-warning-icon-color: var(--text-hint-color); --select-outline-warning-text-color: var(--text-basic-color); --select-outline-warning-placeholder-text-color: var(--text-hint-color); --select-outline-warning-background-color: var(--background-basic-color-2); --select-outline-warning-border-color: var(--color-warning-default); --select-outline-warning-focus-background-color: var(--background-basic-color-1); --select-outline-warning-focus-border-color: var(--color-warning-focus); --select-outline-warning-hover-background-color: var(--background-basic-color-3); --select-outline-warning-hover-border-color: var(--color-warning-hover); --select-outline-warning-focus-and-hover-background-color: var(--select-outline-warning-hover-background-color); --select-outline-warning-focus-and-hover-border-color: var(--select-outline-warning-hover-border-color); --select-outline-warning-disabled-background-color: var(--background-basic-color-2); --select-outline-warning-disabled-border-color: var(--border-basic-color-4); --select-outline-warning-disabled-icon-color: var(--text-disabled-color); --select-outline-warning-disabled-text-color: var(--text-disabled-color); --select-outline-danger-icon-color: var(--text-hint-color); --select-outline-danger-text-color: var(--text-basic-color); --select-outline-danger-placeholder-text-color: var(--text-hint-color); --select-outline-danger-background-color: var(--background-basic-color-2); --select-outline-danger-border-color: var(--color-danger-default); --select-outline-danger-focus-background-color: var(--background-basic-color-1); --select-outline-danger-focus-border-color: var(--color-danger-focus); --select-outline-danger-hover-background-color: var(--background-basic-color-3); --select-outline-danger-hover-border-color: var(--color-danger-hover); --select-outline-danger-focus-and-hover-background-color: var(--select-outline-danger-hover-background-color); --select-outline-danger-focus-and-hover-border-color: var(--select-outline-danger-hover-border-color); --select-outline-danger-disabled-background-color: var(--background-basic-color-2); --select-outline-danger-disabled-border-color: var(--border-basic-color-4); --select-outline-danger-disabled-icon-color: var(--text-disabled-color); --select-outline-danger-disabled-text-color: var(--text-disabled-color); --select-outline-control-icon-color: var(--color-basic-100); --select-outline-control-text-color: var(--color-basic-100); --select-outline-control-placeholder-text-color: var(--color-basic-100); --select-outline-control-background-color: var(--color-basic-control-transparent-300); --select-outline-control-border-color: var(--color-basic-control-transparent-500); --select-outline-control-focus-background-color: var(--color-basic-control-transparent-500); --select-outline-control-focus-border-color: var(--color-control-transparent-focus-border); --select-outline-control-hover-background-color: var(--color-basic-control-transparent-400); --select-outline-control-hover-border-color: var(--color-control-transparent-hover-border); --select-outline-control-focus-and-hover-background-color: var(--select-outline-control-hover-background-color); --select-outline-control-focus-and-hover-border-color: var(--select-outline-control-hover-border-color); --select-outline-control-disabled-background-color: var(--color-control-transparent-disabled); --select-outline-control-disabled-border-color: var(--color-basic-control-transparent-500); --select-outline-control-disabled-icon-color: var(--color-basic-100); --select-outline-control-disabled-text-color: var(--color-basic-100); --select-outline-adjacent-border-style: var(--select-outline-border-style); --select-outline-adjacent-border-width: var(--select-outline-border-width); --select-outline-basic-open-border-color: var(--select-outline-basic-border-color); --select-outline-basic-adjacent-border-color: var(--select-outline-basic-border-color); --select-outline-primary-open-border-color: var(--select-outline-primary-border-color); --select-outline-primary-adjacent-border-color: var(--select-outline-primary-border-color); --select-outline-success-open-border-color: var(--select-outline-success-border-color); --select-outline-success-adjacent-border-color: var(--select-outline-success-border-color); --select-outline-info-open-border-color: var(--select-outline-info-border-color); --select-outline-info-adjacent-border-color: var(--select-outline-info-border-color); --select-outline-warning-open-border-color: var(--select-outline-warning-border-color); --select-outline-warning-adjacent-border-color: var(--select-outline-warning-border-color); --select-outline-danger-open-border-color: var(--select-outline-danger-border-color); --select-outline-danger-adjacent-border-color: var(--select-outline-danger-border-color); --select-outline-control-open-border-color: var(--select-outline-control-border-color); --select-outline-control-adjacent-border-color: var(--select-outline-control-border-color); --select-filled-border-style: solid; --select-filled-border-width: 1px; --select-filled-tiny-padding: 0.1875rem 1rem; --select-filled-small-padding: 0.1875rem 1rem; --select-filled-medium-padding: 0.4375rem 1rem; --select-filled-large-padding: 0.6875rem 1rem; --select-filled-giant-padding: 0.9375rem 1rem; --select-filled-basic-background-color: var(--color-basic-default); --select-filled-basic-border-color: var(--color-basic-default-border); --select-filled-basic-icon-color: var(--color-basic-800); --select-filled-basic-text-color: var(--color-basic-800); --select-filled-basic-placeholder-text-color: var(--text-hint-color); --select-filled-basic-focus-background-color: var(--color-basic-focus); --select-filled-basic-focus-border-color: var(--color-basic-focus-border); --select-filled-basic-hover-background-color: var(--color-basic-hover); --select-filled-basic-hover-border-color: var(--color-basic-hover-border); --select-filled-basic-focus-and-hover-background-color: var(--select-filled-basic-hover-background-color); --select-filled-basic-focus-and-hover-border-color: var(--select-filled-basic-hover-border-color); --select-filled-basic-disabled-background-color: var(--background-basic-color-2); --select-filled-basic-disabled-border-color: var(--border-basic-color-2); --select-filled-basic-disabled-icon-color: var(--text-disabled-color); --select-filled-basic-disabled-text-color: var(--text-disabled-color); --select-filled-primary-background-color: var(--color-primary-default); --select-filled-primary-border-color: var(--color-primary-default-border); --select-filled-primary-icon-color: var(--text-control-color); --select-filled-primary-text-color: var(--text-control-color); --select-filled-primary-placeholder-text-color: var(--text-control-color); --select-filled-primary-focus-background-color: var(--color-primary-focus); --select-filled-primary-focus-border-color: var(--color-primary-focus-border); --select-filled-primary-hover-background-color: var(--color-primary-hover); --select-filled-primary-hover-border-color: var(--color-primary-hover-border); --select-filled-primary-focus-and-hover-background-color: var(--select-filled-primary-hover-background-color); --select-filled-primary-focus-and-hover-border-color: var(--select-filled-primary-hover-border-color); --select-filled-primary-disabled-background-color: var(--background-basic-color-2); --select-filled-primary-disabled-border-color: var(--border-basic-color-2); --select-filled-primary-disabled-icon-color: var(--text-disabled-color); --select-filled-primary-disabled-text-color: var(--text-disabled-color); --select-filled-success-background-color: var(--color-success-default); --select-filled-success-border-color: var(--color-success-default-border); --select-filled-success-icon-color: var(--text-control-color); --select-filled-success-text-color: var(--text-control-color); --select-filled-success-placeholder-text-color: var(--text-control-color); --select-filled-success-focus-background-color: var(--color-success-focus); --select-filled-success-focus-border-color: var(--color-success-focus-border); --select-filled-success-hover-background-color: var(--color-success-hover); --select-filled-success-hover-border-color: var(--color-success-hover-border); --select-filled-success-focus-and-hover-background-color: var(--select-filled-success-hover-background-color); --select-filled-success-focus-and-hover-border-color: var(--select-filled-success-hover-border-color); --select-filled-success-disabled-background-color: var(--background-basic-color-2); --select-filled-success-disabled-border-color: var(--border-basic-color-2); --select-filled-success-disabled-icon-color: var(--text-disabled-color); --select-filled-success-disabled-text-color: var(--text-disabled-color); --select-filled-info-background-color: var(--color-info-default); --select-filled-info-border-color: var(--color-info-default-border); --select-filled-info-icon-color: var(--text-control-color); --select-filled-info-text-color: var(--text-control-color); --select-filled-info-placeholder-text-color: var(--text-control-color); --select-filled-info-focus-background-color: var(--color-info-focus); --select-filled-info-focus-border-color: var(--color-info-focus-border); --select-filled-info-hover-background-color: var(--color-info-hover); --select-filled-info-hover-border-color: var(--color-info-hover-border); --select-filled-info-focus-and-hover-background-color: var(--select-filled-info-hover-background-color); --select-filled-info-focus-and-hover-border-color: var(--select-filled-info-hover-border-color); --select-filled-info-disabled-background-color: var(--background-basic-color-2); --select-filled-info-disabled-border-color: var(--border-basic-color-2); --select-filled-info-disabled-icon-color: var(--text-disabled-color); --select-filled-info-disabled-text-color: var(--text-disabled-color); --select-filled-warning-background-color: var(--color-warning-default); --select-filled-warning-border-color: var(--color-warning-default-border); --select-filled-warning-icon-color: var(--text-control-color); --select-filled-warning-text-color: var(--text-control-color); --select-filled-warning-placeholder-text-color: var(--text-control-color); --select-filled-warning-focus-background-color: var(--color-warning-focus); --select-filled-warning-focus-border-color: var(--color-warning-focus-border); --select-filled-warning-hover-background-color: var(--color-warning-hover); --select-filled-warning-hover-border-color: var(--color-warning-hover-border); --select-filled-warning-focus-and-hover-background-color: var(--select-filled-warning-hover-background-color); --select-filled-warning-focus-and-hover-border-color: var(--select-filled-warning-hover-border-color); --select-filled-warning-disabled-background-color: var(--background-basic-color-2); --select-filled-warning-disabled-border-color: var(--border-basic-color-2); --select-filled-warning-disabled-icon-color: var(--text-disabled-color); --select-filled-warning-disabled-text-color: var(--text-disabled-color); --select-filled-danger-background-color: var(--color-danger-default); --select-filled-danger-border-color: var(--color-danger-default-border); --select-filled-danger-icon-color: var(--text-control-color); --select-filled-danger-text-color: var(--text-control-color); --select-filled-danger-placeholder-text-color: var(--text-control-color); --select-filled-danger-focus-background-color: var(--color-danger-focus); --select-filled-danger-focus-border-color: var(--color-danger-focus-border); --select-filled-danger-hover-background-color: var(--color-danger-hover); --select-filled-danger-hover-border-color: var(--color-danger-hover-border); --select-filled-danger-focus-and-hover-background-color: var(--select-filled-danger-hover-background-color); --select-filled-danger-focus-and-hover-border-color: var(--select-filled-danger-hover-border-color); --select-filled-danger-disabled-background-color: var(--background-basic-color-2); --select-filled-danger-disabled-border-color: var(--border-basic-color-2); --select-filled-danger-disabled-icon-color: var(--text-disabled-color); --select-filled-danger-disabled-text-color: var(--text-disabled-color); --select-filled-control-background-color: var(--color-control-default); --select-filled-control-border-color: var(--color-control-default-border); --select-filled-control-icon-color: var(--color-basic-800); --select-filled-control-text-color: var(--color-basic-800); --select-filled-control-placeholder-text-color: var(--text-hint-color); --select-filled-control-focus-background-color: var(--color-control-focus); --select-filled-control-focus-border-color: var(--color-control-focus-border); --select-filled-control-hover-background-color: var(--color-control-hover); --select-filled-control-hover-border-color: var(--color-control-hover-border); --select-filled-control-focus-and-hover-background-color: var(--select-filled-control-hover-background-color); --select-filled-control-focus-and-hover-border-color: var(--select-filled-control-hover-border-color); --select-filled-control-disabled-background-color: var(--background-basic-color-2); --select-filled-control-disabled-border-color: var(--border-basic-color-2); --select-filled-control-disabled-icon-color: var(--text-disabled-color); --select-filled-control-disabled-text-color: var(--text-disabled-color); --select-hero-tiny-padding: 0.25rem 1rem; --select-hero-small-padding: 0.25rem 1rem; --select-hero-medium-padding: 0.5rem 1rem; --select-hero-large-padding: 0.75rem 1rem; --select-hero-giant-padding: 1rem 1rem; --select-hero-basic-left-background-color: var(--color-basic-200); --select-hero-basic-right-background-color: var(--color-basic-default); --select-hero-basic-icon-color: var(--color-basic-800); --select-hero-basic-text-color: var(--color-basic-800); --select-hero-basic-placeholder-text-color: var(--text-hint-color); --select-hero-basic-focus-left-background-color: var(--color-basic-300); --select-hero-basic-focus-right-background-color: var(--color-basic-400); --select-hero-basic-hover-left-background-color: var(--color-basic-100); --select-hero-basic-hover-right-background-color: var(--color-basic-hover); --select-hero-basic-focus-and-hover-left-background-color: var(--select-hero-basic-hover-left-background-color); --select-hero-basic-focus-and-hover-right-background-color: var(--select-hero-basic-hover-right-background-color); --select-hero-basic-disabled-background-color: var(--background-basic-color-2); --select-hero-basic-disabled-icon-color: var(--text-disabled-color); --select-hero-basic-disabled-text-color: var(--text-disabled-color); --select-hero-primary-left-background-color: var(--color-primary-400); --select-hero-primary-right-background-color: var(--color-primary-default); --select-hero-primary-icon-color: var(--text-control-color); --select-hero-primary-text-color: var(--text-control-color); --select-hero-primary-placeholder-text-color: var(--text-control-color); --select-hero-primary-focus-left-background-color: var(--color-primary-500); --select-hero-primary-focus-right-background-color: var(--color-primary-focus); --select-hero-primary-hover-left-background-color: var(--color-primary-300); --select-hero-primary-hover-right-background-color: var(--color-primary-hover); --select-hero-primary-focus-and-hover-left-background-color: var(--select-hero-primary-hover-left-background-color); --select-hero-primary-focus-and-hover-right-background-color: var(--select-hero-primary-hover-right-background-color); --select-hero-primary-disabled-background-color: var(--background-basic-color-2); --select-hero-primary-disabled-icon-color: var(--text-disabled-color); --select-hero-primary-disabled-text-color: var(--text-disabled-color); --select-hero-success-left-background-color: var(--color-success-400); --select-hero-success-right-background-color: var(--color-success-default); --select-hero-success-icon-color: var(--text-control-color); --select-hero-success-text-color: var(--text-control-color); --select-hero-success-placeholder-text-color: var(--text-control-color); --select-hero-success-focus-left-background-color: var(--color-success-500); --select-hero-success-focus-right-background-color: var(--color-success-focus); --select-hero-success-hover-left-background-color: var(--color-success-300); --select-hero-success-hover-right-background-color: var(--color-success-hover); --select-hero-success-focus-and-hover-left-background-color: var(--select-hero-success-hover-left-background-color); --select-hero-success-focus-and-hover-right-background-color: var(--select-hero-success-hover-right-background-color); --select-hero-success-disabled-background-color: var(--background-basic-color-2); --select-hero-success-disabled-icon-color: var(--text-disabled-color); --select-hero-success-disabled-text-color: var(--text-disabled-color); --select-hero-info-left-background-color: var(--color-info-400); --select-hero-info-right-background-color: var(--color-info-default); --select-hero-info-icon-color: var(--text-control-color); --select-hero-info-text-color: var(--text-control-color); --select-hero-info-placeholder-text-color: var(--text-control-color); --select-hero-info-focus-left-background-color: var(--color-info-500); --select-hero-info-focus-right-background-color: var(--color-info-focus); --select-hero-info-hover-left-background-color: var(--color-info-300); --select-hero-info-hover-right-background-color: var(--color-info-hover); --select-hero-info-focus-and-hover-left-background-color: var(--select-hero-info-hover-left-background-color); --select-hero-info-focus-and-hover-right-background-color: var(--select-hero-info-hover-right-background-color); --select-hero-info-disabled-background-color: var(--background-basic-color-2); --select-hero-info-disabled-icon-color: var(--text-disabled-color); --select-hero-info-disabled-text-color: var(--text-disabled-color); --select-hero-warning-left-background-color: var(--color-warning-400); --select-hero-warning-right-background-color: var(--color-warning-default); --select-hero-warning-icon-color: var(--text-control-color); --select-hero-warning-text-color: var(--text-control-color); --select-hero-warning-placeholder-text-color: var(--text-control-color); --select-hero-warning-focus-left-background-color: var(--color-warning-500); --select-hero-warning-focus-right-background-color: var(--color-warning-focus); --select-hero-warning-hover-left-background-color: var(--color-warning-300); --select-hero-warning-hover-right-background-color: var(--color-warning-hover); --select-hero-warning-focus-and-hover-left-background-color: var(--select-hero-warning-hover-left-background-color); --select-hero-warning-focus-and-hover-right-background-color: var(--select-hero-warning-hover-right-background-color); --select-hero-warning-disabled-background-color: var(--background-basic-color-2); --select-hero-warning-disabled-icon-color: var(--text-disabled-color); --select-hero-warning-disabled-text-color: var(--text-disabled-color); --select-hero-danger-left-background-color: var(--color-danger-400); --select-hero-danger-right-background-color: var(--color-danger-default); --select-hero-danger-icon-color: var(--text-control-color); --select-hero-danger-text-color: var(--text-control-color); --select-hero-danger-placeholder-text-color: var(--text-control-color); --select-hero-danger-focus-left-background-color: var(--color-danger-500); --select-hero-danger-focus-right-background-color: var(--color-danger-focus); --select-hero-danger-hover-left-background-color: var(--color-danger-300); --select-hero-danger-hover-right-background-color: var(--color-danger-hover); --select-hero-danger-focus-and-hover-left-background-color: var(--select-hero-danger-hover-left-background-color); --select-hero-danger-focus-and-hover-right-background-color: var(--select-hero-danger-hover-right-background-color); --select-hero-danger-disabled-background-color: var(--background-basic-color-2); --select-hero-danger-disabled-icon-color: var(--text-disabled-color); --select-hero-danger-disabled-text-color: var(--text-disabled-color); --select-hero-control-left-background-color: var(--color-control-default); --select-hero-control-right-background-color: var(--color-control-default); --select-hero-control-icon-color: var(--color-basic-800); --select-hero-control-text-color: var(--color-basic-800); --select-hero-control-placeholder-text-color: var(--text-hint-color); --select-hero-control-focus-left-background-color: var(--color-basic-200); --select-hero-control-focus-right-background-color: var(--color-control-focus); --select-hero-control-hover-left-background-color: var(--color-basic-100); --select-hero-control-hover-right-background-color: var(--color-control-hover); --select-hero-control-focus-and-hover-left-background-color: var(--select-hero-control-hover-left-background-color); --select-hero-control-focus-and-hover-right-background-color: var(--select-hero-control-hover-right-background-color); --select-hero-control-disabled-background-color: var(--background-basic-color-2); --select-hero-control-disabled-icon-color: var(--text-disabled-color); --select-hero-control-disabled-text-color: var(--text-disabled-color); --datepicker-background-color: var(--background-basic-color-1); --datepicker-border-color: var(--border-basic-color-4); --datepicker-border-style: solid; --datepicker-border-width: 0.0625rem; --datepicker-border-radius: var(--border-radius); --datepicker-shadow: none; --timepicker-cell-text-color: var(--text-basic-color); --timepicker-cell-hover-background-color: var(--background-basic-color-2); --timepicker-cell-hover-text-color: var(--text-basic-color); --timepicker-cell-focus-background-color: var(--color-basic-focus); --timepicker-cell-focus-text-color: var(--text-basic-color); --timepicker-cell-active-background-color: var(--color-primary-default); --timepicker-cell-active-text-color: var(--text-control-color); --timepicker-cell-text-font-size: var(--text-subtitle-font-size); --timepicker-cell-text-font-family: var(--text-subtitle-font-family); --timepicker-cell-text-line-height: var(--text-subtitle-line-height); --timepicker-cell-text-font-weight: var(--text-subtitle-font-weight); --timepicker-cell-height: 2.75rem; --timepicker-header-cell-text-color: var(--text-hint-color); --timepicker-header-cell-text-font-size: var(--text-subtitle-font-size); --timepicker-header-cell-text-font-family: var(--text-subtitle-font-family); --timepicker-header-cell-height: 2.75rem; --timepicker-header-cell-text-line-height: var(--text-subtitle-line-height); --timepicker-header-cell-text-font-weight: var(--text-subtitle-font-weight); --timepicker-border-color: var(--datepicker-border-color); --timepicker-border-style: var(--datepicker-border-style); --timepicker-border-width: var(--datepicker-border-width); --timepicker-scrollbar-color: var(--scrollbar-color); --timepicker-scrollbar-background-color: var(--scrollbar-background-color); --timepicker-scrollbar-width: var(--scrollbar-width); --timepicker-single-column-width: 5rem; --timepicker-multiple-column-width: 13.875rem; --timepicker-title-height: 3.75rem; --timepicker-title-padding: var(--text-paragraph-line-height); --timepicker-container-width: 20rem; --timepicker-container-height: 26.1875rem; --radio-width: 1.25rem; --radio-height: 1.25rem; --radio-border-style: solid; --radio-border-width: 1px; --radio-text-font-family: var(--text-subtitle-2-font-family); --radio-text-font-size: var(--text-subtitle-2-font-size); --radio-text-font-weight: var(--text-subtitle-2-font-weight); --radio-text-line-height: var(--text-subtitle-2-line-height); --radio-outline-color: var(--outline-color); --radio-outline-width: var(--outline-width); --radio-basic-text-color: var(--text-basic-color); --radio-basic-border-color: var(--color-basic-transparent-default-border); --radio-basic-background-color: var(--color-basic-transparent-default); --radio-basic-checked-background-color: transparent; --radio-basic-checked-border-color: var(--color-primary-default-border); --radio-basic-inner-circle-color: var(--color-primary-default); --radio-basic-focus-border-color: var(--color-primary-transparent-focus-border); --radio-basic-focus-background-color: var(--color-primary-transparent-focus); --radio-basic-focus-checked-background-color: transparent; --radio-basic-focus-checked-border-color: var(--color-primary-focus-border); --radio-basic-focus-inner-circle-color: var(--color-primary-focus); --radio-basic-hover-background-color: var(--color-primary-transparent-hover); --radio-basic-hover-border-color: var(--color-primary-transparent-hover-border); --radio-basic-hover-inner-circle-color: var(--color-primary-hover); --radio-basic-hover-checked-background-color: transparent; --radio-basic-hover-checked-border-color: var(--color-primary-hover-border); --radio-basic-active-background-color: var(--color-primary-transparent-active); --radio-basic-active-border-color: var(--color-primary-transparent-active-border); --radio-basic-active-inner-circle-color: var(--color-primary-active); --radio-basic-active-checked-background-color: transparent; --radio-basic-active-checked-border-color: var(--color-primary-active-border); --radio-basic-disabled-background-color: var(--color-basic-transparent-disabled); --radio-basic-disabled-border-color: var(--color-basic-transparent-disabled-border); --radio-basic-disabled-text-color: var(--text-disabled-color); --radio-basic-disabled-checked-background-color: transparent; --radio-basic-disabled-checked-border-color: var(--color-basic-transparent-600); --radio-basic-disabled-checked-inner-circle-color: var(--color-basic-transparent-600); --radio-primary-text-color: var(--text-basic-color); --radio-primary-border-color: var(--color-primary-transparent-default-border); --radio-primary-background-color: var(--color-primary-transparent-default); --radio-primary-checked-background-color: transparent; --radio-primary-checked-border-color: var(--color-primary-default-border); --radio-primary-inner-circle-color: var(--color-primary-default); --radio-primary-focus-border-color: var(--color-primary-transparent-focus-border); --radio-primary-focus-background-color: var(--color-primary-transparent-focus); --radio-primary-focus-checked-background-color: transparent; --radio-primary-focus-checked-border-color: var(--color-primary-focus-border); --radio-primary-focus-inner-circle-color: var(--color-primary-focus); --radio-primary-hover-background-color: var(--color-primary-transparent-hover); --radio-primary-hover-border-color: var(--color-primary-transparent-hover-border); --radio-primary-hover-inner-circle-color: var(--color-primary-hover); --radio-primary-hover-checked-background-color: transparent; --radio-primary-hover-checked-border-color: var(--color-primary-hover-border); --radio-primary-active-border-color: var(--color-primary-transparent-active-border); --radio-primary-active-background-color: var(--color-primary-transparent-active); --radio-primary-active-checked-background-color: transparent; --radio-primary-active-checked-border-color: var(--color-primary-active-border); --radio-primary-active-inner-circle-color: var(--color-primary-active); --radio-primary-disabled-background-color: var(--color-basic-transparent-disabled); --radio-primary-disabled-border-color: var(--color-basic-transparent-disabled-border); --radio-primary-disabled-text-color: var(--text-disabled-color); --radio-primary-disabled-checked-background-color: transparent; --radio-primary-disabled-checked-border-color: var(--color-basic-transparent-600); --radio-primary-disabled-checked-inner-circle-color: var(--color-basic-transparent-600); --radio-success-text-color: var(--text-basic-color); --radio-success-border-color: var(--color-success-transparent-default-border); --radio-success-background-color: var(--color-success-transparent-default); --radio-success-checked-background-color: transparent; --radio-success-checked-border-color: var(--color-success-default-border); --radio-success-inner-circle-color: var(--color-success-default); --radio-success-focus-border-color: var(--color-success-transparent-focus-border); --radio-success-focus-background-color: var(--color-success-transparent-focus); --radio-success-focus-checked-background-color: transparent; --radio-success-focus-checked-border-color: var(--color-success-focus-border); --radio-success-focus-inner-circle-color: var(--color-success-focus); --radio-success-hover-background-color: var(--color-success-transparent-hover); --radio-success-hover-border-color: var(--color-success-transparent-hover-border); --radio-success-hover-inner-circle-color: var(--color-success-hover); --radio-success-hover-checked-background-color: transparent; --radio-success-hover-checked-border-color: var(--color-success-hover-border); --radio-success-active-background-color: var(--color-success-transparent-active); --radio-success-active-border-color: var(--color-success-transparent-active-border); --radio-success-active-checked-background-color: transparent; --radio-success-active-checked-border-color: var(--color-success-active-border); --radio-success-active-inner-circle-color: var(--color-success-active); --radio-success-disabled-background-color: var(--color-basic-transparent-disabled); --radio-success-disabled-border-color: var(--color-basic-transparent-disabled-border); --radio-success-disabled-text-color: var(--text-disabled-color); --radio-success-disabled-checked-background-color: transparent; --radio-success-disabled-checked-border-color: var(--color-basic-transparent-600); --radio-success-disabled-checked-inner-circle-color: var(--color-basic-transparent-600); --radio-info-text-color: var(--text-basic-color); --radio-info-border-color: var(--color-info-transparent-default-border); --radio-info-background-color: var(--color-info-transparent-default); --radio-info-checked-background-color: transparent; --radio-info-checked-border-color: var(--color-info-default-border); --radio-info-inner-circle-color: var(--color-info-default); --radio-info-focus-background-color: var(--color-info-transparent-focus); --radio-info-focus-border-color: var(--color-info-transparent-focus-border); --radio-info-focus-checked-background-color: transparent; --radio-info-focus-checked-border-color: var(--color-info-focus-border); --radio-info-focus-inner-circle-color: var(--color-info-focus); --radio-info-hover-background-color: var(--color-info-transparent-hover); --radio-info-hover-border-color: var(--color-info-transparent-hover-border); --radio-info-hover-inner-circle-color: var(--color-info-hover); --radio-info-hover-checked-background-color: transparent; --radio-info-hover-checked-border-color: var(--color-info-hover-border); --radio-info-active-background-color: var(--color-info-transparent-active); --radio-info-active-border-color: var(--color-info-transparent-active-border); --radio-info-active-checked-background-color: transparent; --radio-info-active-checked-border-color: var(--color-info-active-border); --radio-info-active-inner-circle-color: var(--color-info-active); --radio-info-disabled-background-color: var(--color-basic-transparent-disabled); --radio-info-disabled-border-color: var(--color-basic-transparent-disabled-border); --radio-info-disabled-text-color: var(--text-disabled-color); --radio-info-disabled-checked-background-color: transparent; --radio-info-disabled-checked-border-color: var(--color-basic-transparent-600); --radio-info-disabled-checked-inner-circle-color: var(--color-basic-transparent-600); --radio-warning-text-color: var(--text-basic-color); --radio-warning-border-color: var(--color-warning-transparent-default-border); --radio-warning-background-color: var(--color-warning-transparent-default); --radio-warning-checked-background-color: transparent; --radio-warning-checked-border-color: var(--color-warning-default-border); --radio-warning-inner-circle-color: var(--color-warning-default); --radio-warning-focus-background-color: var(--color-warning-transparent-focus); --radio-warning-focus-border-color: var(--color-warning-transparent-focus-border); --radio-warning-focus-checked-background-color: transparent; --radio-warning-focus-checked-border-color: var(--color-warning-focus-border); --radio-warning-focus-inner-circle-color: var(--color-warning-focus); --radio-warning-hover-background-color: var(--color-warning-transparent-hover); --radio-warning-hover-border-color: var(--color-warning-transparent-hover-border); --radio-warning-hover-inner-circle-color: var(--color-warning-hover); --radio-warning-hover-checked-background-color: transparent; --radio-warning-hover-checked-border-color: var(--color-warning-hover-border); --radio-warning-active-background-color: var(--color-warning-transparent-active); --radio-warning-active-border-color: var(--color-warning-transparent-active-border); --radio-warning-active-checked-background-color: transparent; --radio-warning-active-checked-border-color: var(--color-warning-active-border); --radio-warning-active-inner-circle-color: var(--color-warning-active); --radio-warning-disabled-background-color: var(--color-basic-transparent-disabled); --radio-warning-disabled-border-color: var(--color-basic-transparent-disabled-border); --radio-warning-disabled-text-color: var(--text-disabled-color); --radio-warning-disabled-checked-background-color: transparent; --radio-warning-disabled-checked-border-color: var(--color-basic-transparent-600); --radio-warning-disabled-checked-inner-circle-color: var(--color-basic-transparent-600); --radio-danger-text-color: var(--text-basic-color); --radio-danger-border-color: var(--color-danger-transparent-default-border); --radio-danger-background-color: var(--color-danger-transparent-default); --radio-danger-checked-background-color: transparent; --radio-danger-checked-border-color: var(--color-danger-default-border); --radio-danger-inner-circle-color: var(--color-danger-default); --radio-danger-focus-background-color: var(--color-danger-transparent-focus); --radio-danger-focus-border-color: var(--color-danger-transparent-focus-border); --radio-danger-focus-checked-background-color: transparent; --radio-danger-focus-checked-border-color: var(--color-danger-focus-border); --radio-danger-focus-inner-circle-color: var(--color-danger-focus); --radio-danger-hover-background-color: var(--color-danger-transparent-hover); --radio-danger-hover-border-color: var(--color-danger-transparent-hover-border); --radio-danger-hover-inner-circle-color: var(--color-danger-hover); --radio-danger-hover-checked-background-color: transparent; --radio-danger-hover-checked-border-color: var(--color-danger-hover-border); --radio-danger-active-background-color: var(--color-danger-transparent-active); --radio-danger-active-border-color: var(--color-danger-transparent-active-border); --radio-danger-active-checked-background-color: transparent; --radio-danger-active-checked-border-color: var(--color-danger-active-border); --radio-danger-active-inner-circle-color: var(--color-danger-active); --radio-danger-disabled-background-color: var(--color-basic-transparent-disabled); --radio-danger-disabled-border-color: var(--color-basic-transparent-disabled-border); --radio-danger-disabled-text-color: var(--text-disabled-color); --radio-danger-disabled-checked-background-color: transparent; --radio-danger-disabled-checked-border-color: var(--color-basic-transparent-600); --radio-danger-disabled-checked-inner-circle-color: var(--color-basic-transparent-600); --radio-control-text-color: var(--text-control-color); --radio-control-background-color: var(--color-control-transparent-default); --radio-control-border-color: var(--color-control-transparent-default-border); --radio-control-checked-background-color: transparent; --radio-control-checked-border-color: var(--color-control-default-border); --radio-control-inner-circle-color: var(--color-control-default); --radio-control-focus-background-color: var(--color-control-transparent-focus); --radio-control-focus-border-color: var(--color-control-transparent-focus-border); --radio-control-focus-checked-background-color: transparent; --radio-control-focus-checked-border-color: var(--color-control-focus-border); --radio-control-focus-inner-circle-color: var(--color-control-focus); --radio-control-hover-background-color: var(--color-control-transparent-hover); --radio-control-hover-border-color: var(--color-control-transparent-hover-border); --radio-control-hover-inner-circle-color: var(--color-control-hover); --radio-control-hover-checked-background-color: transparent; --radio-control-hover-checked-border-color: var(--color-control-hover-border); --radio-control-active-background-color: var(--color-control-transparent-active); --radio-control-active-border-color: var(--color-control-transparent-active-border); --radio-control-active-checked-background-color: transparent; --radio-control-active-checked-border-color: var(--color-control-active-border); --radio-control-active-inner-circle-color: var(--color-control-active); --radio-control-disabled-background-color: var(--color-control-transparent-disabled); --radio-control-disabled-border-color: var(--color-control-transparent-disabled-border); --radio-control-disabled-text-color: var(--color-basic-100); --radio-control-disabled-checked-background-color: transparent; --radio-control-disabled-checked-border-color: var(--color-basic-transparent-600); --radio-control-disabled-checked-inner-circle-color: var(--color-basic-transparent-600); --tree-grid-cell-border-width: 1px; --tree-grid-cell-border-style: solid; --tree-grid-cell-border-color: var(--border-basic-color-2); --tree-grid-row-min-height: 2rem; --tree-grid-cell-padding: 0.875rem 1.25rem; --tree-grid-header-background-color: var(--background-basic-color-1); --tree-grid-header-text-color: var(--text-basic-color); --tree-grid-header-text-font-family: var(--text-subtitle-font-family); --tree-grid-header-text-font-size: var(--text-subtitle-font-size); --tree-grid-header-text-font-weight: var(--text-subtitle-font-weight); --tree-grid-header-text-line-height: var(--text-subtitle-line-height); --tree-grid-footer-background-color: var(--background-basic-color-1); --tree-grid-footer-text-color: var(--text-basic-color); --tree-grid-footer-text-font-family: var(--tree-grid-header-text-font-family); --tree-grid-footer-text-font-size: var(--tree-grid-header-text-font-size); --tree-grid-footer-text-font-weight: var(--tree-grid-header-text-font-weight); --tree-grid-footer-text-line-height: var(--tree-grid-header-text-line-height); --tree-grid-row-background-color: var(--background-basic-color-1); --tree-grid-row-even-background-color: var(--background-basic-color-1); --tree-grid-row-hover-background-color: var(--background-basic-color-1); --tree-grid-row-text-color: var(--text-basic-color); --tree-grid-row-text-font-family: var(--text-paragraph-font-family); --tree-grid-row-text-font-size: var(--text-paragraph-font-size); --tree-grid-row-text-font-weight: var(--text-paragraph-font-weight); --tree-grid-row-text-line-height: var(--text-paragraph-line-height); --tree-grid-sort-header-button-background-color: transparent; --tree-grid-sort-header-button-border: none; --tree-grid-sort-header-button-padding: 0; --icon-font-size: 1.25rem; --icon-line-height: 1; --icon-width: 1em; --icon-height: 1em; --icon-svg-vertical-align: top; --icon-basic-color: var(--text-hint-color); --icon-primary-color: var(--color-primary-default); --icon-info-color: var(--color-info-default); --icon-success-color: var(--color-success-default); --icon-warning-color: var(--color-warning-default); --icon-danger-color: var(--color-danger-default); --icon-control-color: var(--color-basic-100); --tag-text-font-family: var(--text-subtitle-font-family); --tag-text-transform: capitalize; --tag-border-width: 0.0625rem; --tag-border-style: solid; --tag-border-radius: 1.5rem; --tag-tiny-text-font-size: var(--input-tiny-text-font-size); --tag-tiny-text-font-weight: var(--input-tiny-text-font-weight); --tag-tiny-text-line-height: var(--input-tiny-text-line-height); --tag-tiny-padding: 0.0625rem 0.9375rem; --tag-tiny-close-offset: 0.625rem; --tag-small-text-font-size: var(--input-small-text-font-size); --tag-small-text-font-weight: var(--input-small-text-font-weight); --tag-small-text-line-height: var(--input-small-text-line-height); --tag-small-padding: 0.0625rem 0.9375rem; --tag-small-close-offset: 0.625rem; --tag-medium-text-font-size: var(--input-medium-text-font-size); --tag-medium-text-font-weight: var(--input-medium-text-font-weight); --tag-medium-text-line-height: var(--input-medium-text-line-height); --tag-medium-padding: 0.1875rem 0.9375rem; --tag-medium-close-offset: 0.625rem; --tag-large-text-font-size: var(--input-large-text-font-size); --tag-large-text-font-weight: var(--input-large-text-font-weight); --tag-large-text-line-height: var(--input-large-text-line-height); --tag-large-padding: 0.3125rem 0.9375rem; --tag-large-close-offset: 0.625rem; --tag-giant-text-font-size: var(--input-giant-text-font-size); --tag-giant-text-font-weight: var(--input-giant-text-font-weight); --tag-giant-text-line-height: var(--input-giant-text-line-height); --tag-giant-padding: 0.4375rem 0.9375rem; --tag-giant-close-offset: 0.625rem; --tag-filled-basic-background-color: var(--color-basic-default); --tag-filled-basic-border-color: var(--color-basic-default-border); --tag-filled-basic-text-color: var(--color-basic-800); --tag-filled-basic-active-background-color: var(--color-basic-focus); --tag-filled-basic-active-border-color: var(--color-basic-focus-border); --tag-filled-basic-hover-background-color: var(--color-basic-hover); --tag-filled-basic-hover-border-color: var(--color-basic-hover-border); --tag-filled-basic-selected-background-color: color-basic-actove; --tag-filled-basic-selected-border-color: var(--color-basic-active-border); --tag-filled-primary-background-color: var(--color-primary-default); --tag-filled-primary-border-color: var(--color-primary-default-border); --tag-filled-primary-text-color: var(--text-control-color); --tag-filled-primary-active-background-color: var(--color-primary-focus); --tag-filled-primary-active-border-color: var(--color-primary-focus-border); --tag-filled-primary-hover-background-color: var(--color-primary-hover); --tag-filled-primary-hover-border-color: var(--color-primary-hover-border); --tag-filled-primary-selected-background-color: color-primary-actove; --tag-filled-primary-selected-border-color: var(--color-primary-active-border); --tag-filled-success-background-color: var(--color-success-default); --tag-filled-success-border-color: var(--color-success-default-border); --tag-filled-success-text-color: var(--text-control-color); --tag-filled-success-active-background-color: var(--color-success-focus); --tag-filled-success-active-border-color: var(--color-success-focus-border); --tag-filled-success-hover-background-color: var(--color-success-hover); --tag-filled-success-hover-border-color: var(--color-success-hover-border); --tag-filled-success-selected-background-color: color-success-actove; --tag-filled-success-selected-border-color: var(--color-success-active-border); --tag-filled-info-background-color: var(--color-info-default); --tag-filled-info-border-color: var(--color-info-default-border); --tag-filled-info-text-color: var(--text-control-color); --tag-filled-info-active-background-color: var(--color-info-focus); --tag-filled-info-active-border-color: var(--color-info-focus-border); --tag-filled-info-hover-background-color: var(--color-info-hover); --tag-filled-info-hover-border-color: var(--color-info-hover-border); --tag-filled-info-selected-background-color: color-info-actove; --tag-filled-info-selected-border-color: var(--color-info-active-border); --tag-filled-warning-background-color: var(--color-warning-default); --tag-filled-warning-border-color: var(--color-warning-default-border); --tag-filled-warning-text-color: var(--text-control-color); --tag-filled-warning-active-background-color: var(--color-warning-focus); --tag-filled-warning-active-border-color: var(--color-warning-focus-border); --tag-filled-warning-hover-background-color: var(--color-warning-hover); --tag-filled-warning-hover-border-color: var(--color-warning-hover-border); --tag-filled-warning-selected-background-color: color-warning-actove; --tag-filled-warning-selected-border-color: var(--color-warning-active-border); --tag-filled-danger-background-color: var(--color-danger-default); --tag-filled-danger-border-color: var(--color-danger-default-border); --tag-filled-danger-text-color: var(--text-control-color); --tag-filled-danger-active-background-color: var(--color-danger-focus); --tag-filled-danger-active-border-color: var(--color-danger-focus-border); --tag-filled-danger-hover-background-color: var(--color-danger-hover); --tag-filled-danger-hover-border-color: var(--color-danger-hover-border); --tag-filled-danger-selected-background-color: color-danger-actove; --tag-filled-danger-selected-border-color: var(--color-danger-active-border); --tag-filled-control-background-color: var(--color-control-default); --tag-filled-control-border-color: var(--color-control-default-border); --tag-filled-control-text-color: var(--color-basic-800); --tag-filled-control-active-background-color: var(--color-control-hover); --tag-filled-control-active-border-color: var(--color-control-hover-border); --tag-filled-control-hover-background-color: var(--color-control-focus); --tag-filled-control-hover-border-color: var(--color-control-focus-border); --tag-filled-control-selected-background-color: color-control-actove; --tag-filled-control-selected-border-color: var(--color-control-active-border); --tag-outline-basic-background-color: var(--color-basic-transparent-default); --tag-outline-basic-border-color: var(--color-basic-transparent-default-border); --tag-outline-basic-text-color: var(--text-hint-color); --tag-outline-basic-active-background-color: var(--color-basic-transparent-focus); --tag-outline-basic-active-border-color: var(--color-basic-transparent-focus-border); --tag-outline-basic-active-text-color: var(--text-hint-color); --tag-outline-basic-hover-background-color: var(--color-basic-transparent-hover); --tag-outline-basic-hover-border-color: var(--color-basic-transparent-hover-border); --tag-outline-basic-hover-text-color: var(--text-hint-color); --tag-outline-basic-selected-background-color: var(--color-basic-transparent-active); --tag-outline-basic-selected-border-color: var(--color-basic-transparent-active-border); --tag-outline-basic-selected-text-color: var(--text-hint-color); --tag-outline-primary-background-color: var(--color-primary-transparent-default); --tag-outline-primary-border-color: var(--color-primary-transparent-default-border); --tag-outline-primary-text-color: var(--text-primary-color); --tag-outline-primary-active-background-color: var(--color-primary-transparent-focus); --tag-outline-primary-active-border-color: var(--color-primary-transparent-focus-border); --tag-outline-primary-active-text-color: var(--text-primary-color); --tag-outline-primary-hover-background-color: var(--color-primary-transparent-hover); --tag-outline-primary-hover-border-color: var(--color-primary-transparent-hover-border); --tag-outline-primary-hover-text-color: var(--text-primary-color); --tag-outline-primary-selected-background-color: var(--color-primary-transparent-active); --tag-outline-primary-selected-border-color: var(--color-primary-transparent-active-border); --tag-outline-primary-selected-text-color: var(--text-primary-color); --tag-outline-success-background-color: var(--color-success-transparent-default); --tag-outline-success-border-color: var(--color-success-transparent-default-border); --tag-outline-success-text-color: var(--text-success-color); --tag-outline-success-active-background-color: var(--color-success-transparent-focus); --tag-outline-success-active-border-color: var(--color-success-transparent-focus-border); --tag-outline-success-active-text-color: var(--text-success-color); --tag-outline-success-hover-background-color: var(--color-success-transparent-hover); --tag-outline-success-hover-border-color: var(--color-success-transparent-hover-border); --tag-outline-success-hover-text-color: var(--text-success-color); --tag-outline-success-selected-background-color: var(--color-success-transparent-active); --tag-outline-success-selected-border-color: var(--color-success-transparent-active-border); --tag-outline-success-selected-text-color: var(--text-success-color); --tag-outline-info-background-color: var(--color-info-transparent-default); --tag-outline-info-border-color: var(--color-info-transparent-default-border); --tag-outline-info-text-color: var(--text-info-color); --tag-outline-info-active-background-color: var(--color-info-transparent-focus); --tag-outline-info-active-border-color: var(--color-info-transparent-focus-border); --tag-outline-info-active-text-color: var(--text-info-color); --tag-outline-info-hover-background-color: var(--color-info-transparent-hover); --tag-outline-info-hover-border-color: var(--color-info-transparent-hover-border); --tag-outline-info-hover-text-color: var(--text-info-color); --tag-outline-info-selected-background-color: var(--color-info-transparent-active); --tag-outline-info-selected-border-color: var(--color-info-transparent-active-border); --tag-outline-info-selected-text-color: var(--text-info-color); --tag-outline-warning-background-color: var(--color-warning-transparent-default); --tag-outline-warning-border-color: var(--color-warning-transparent-default-border); --tag-outline-warning-text-color: var(--text-warning-color); --tag-outline-warning-active-background-color: var(--color-warning-transparent-focus); --tag-outline-warning-active-border-color: var(--color-warning-transparent-focus-border); --tag-outline-warning-active-text-color: var(--text-warning-color); --tag-outline-warning-hover-background-color: var(--color-warning-transparent-hover); --tag-outline-warning-hover-border-color: var(--color-warning-transparent-hover-border); --tag-outline-warning-hover-text-color: var(--text-warning-color); --tag-outline-warning-selected-background-color: var(--color-warning-transparent-active); --tag-outline-warning-selected-border-color: var(--color-warning-transparent-active-border); --tag-outline-warning-selected-text-color: var(--text-warning-color); --tag-outline-danger-background-color: var(--color-danger-transparent-default); --tag-outline-danger-border-color: var(--color-danger-transparent-default-border); --tag-outline-danger-text-color: var(--text-danger-color); --tag-outline-danger-active-background-color: var(--color-danger-transparent-focus); --tag-outline-danger-active-border-color: var(--color-danger-transparent-focus-border); --tag-outline-danger-active-text-color: var(--text-danger-color); --tag-outline-danger-hover-background-color: var(--color-danger-transparent-hover); --tag-outline-danger-hover-border-color: var(--color-danger-transparent-hover-border); --tag-outline-danger-hover-text-color: var(--text-danger-color); --tag-outline-danger-selected-background-color: var(--color-danger-transparent-active); --tag-outline-danger-selected-border-color: var(--color-danger-transparent-active-border); --tag-outline-danger-selected-text-color: var(--text-danger-color); --tag-outline-control-background-color: var(--color-control-transparent-default); --tag-outline-control-border-color: var(--color-control-transparent-default-border); --tag-outline-control-text-color: var(--text-control-color); --tag-outline-control-active-background-color: var(--color-control-transparent-focus); --tag-outline-control-active-border-color: var(--color-control-transparent-focus-border); --tag-outline-control-active-text-color: var(--text-control-color); --tag-outline-control-hover-background-color: var(--color-control-transparent-hover); --tag-outline-control-hover-border-color: var(--color-control-transparent-hover-border); --tag-outline-control-hover-text-color: var(--text-control-color); --tag-outline-control-selected-background-color: var(--color-control-transparent-active); --tag-outline-control-selected-border-color: var(--color-control-transparent-active-border); --tag-outline-control-selected-text-color: var(--text-control-color); --tag-list-tiny-tag-offset: 0.0625rem; --tag-list-small-tag-offset: 0.125rem; --tag-list-medium-tag-offset: 0.25rem; --tag-list-large-tag-offset: 0.375rem; --tag-list-giant-tag-offset: 0.5rem; --tag-list-with-input-tiny-padding: 0.0625rem 1rem; --tag-list-with-input-small-padding: 0.0625rem 1rem; --tag-list-with-input-medium-padding: 0.1875rem 1rem; --tag-list-with-input-large-padding: 0.3125rem 1rem; --tag-list-with-input-giant-padding: 0.4375rem 1rem; --tag-list-with-input-rectangle-border-radius: var(--input-rectangle-border-radius); --tag-list-with-input-semi-round-border-radius: var(--input-semi-round-border-radius); --tag-list-with-input-round-border-radius: var(--input-round-border-radius); --tag-input-min-width: 6rem; --tag-input-text-font-family: var(--input-text-font-family); --tag-input-placeholder-text-font-family: var(--input-placeholder-text-font-family); --tag-input-basic-background-color: var(--input-basic-background-color); --tag-input-basic-border-color: var(--input-basic-border-color); --tag-input-basic-text-color: var(--input-basic-text-color); --tag-input-basic-placeholder-text-color: var(--input-basic-placeholder-text-color); --tag-input-basic-focus-background-color: var(--input-basic-focus-background-color); --tag-input-basic-focus-border-color: var(--input-basic-focus-border-color); --tag-input-basic-disabled-text-color: var(--input-basic-disabled-text-color); --tag-input-basic-disabled-placeholder-text-color: var(--input-basic-disabled-placeholder-text-color); --tag-input-primary-background-color: var(--input-primary-background-color); --tag-input-primary-border-color: var(--input-primary-border-color); --tag-input-primary-text-color: var(--input-primary-text-color); --tag-input-primary-placeholder-text-color: var(--input-primary-placeholder-text-color); --tag-input-primary-focus-background-color: var(--input-primary-focus-background-color); --tag-input-primary-focus-border-color: var(--input-primary-focus-border-color); --tag-input-primary-disabled-text-color: var(--input-primary-disabled-text-color); --tag-input-primary-disabled-placeholder-text-color: var(--input-primary-disabled-placeholder-text-color); --tag-input-success-background-color: var(--input-success-background-color); --tag-input-success-border-color: var(--input-success-border-color); --tag-input-success-text-color: var(--input-success-text-color); --tag-input-success-placeholder-text-color: var(--input-success-placeholder-text-color); --tag-input-success-focus-background-color: var(--input-success-focus-background-color); --tag-input-success-focus-border-color: var(--input-success-focus-border-color); --tag-input-success-disabled-text-color: var(--input-success-disabled-text-color); --tag-input-success-disabled-placeholder-text-color: var(--input-success-disabled-placeholder-text-color); --tag-input-info-background-color: var(--input-info-background-color); --tag-input-info-border-color: var(--input-info-border-color); --tag-input-info-text-color: var(--input-info-text-color); --tag-input-info-placeholder-text-color: var(--input-info-placeholder-text-color); --tag-input-info-focus-background-color: var(--input-info-focus-background-color); --tag-input-info-focus-border-color: var(--input-info-focus-border-color); --tag-input-info-disabled-text-color: var(--input-info-disabled-text-color); --tag-input-info-disabled-placeholder-text-color: var(--input-info-disabled-placeholder-text-color); --tag-input-warning-background-color: var(--input-warning-background-color); --tag-input-warning-border-color: var(--input-warning-border-color); --tag-input-warning-text-color: var(--input-warning-text-color); --tag-input-warning-placeholder-text-color: var(--input-warning-placeholder-text-color); --tag-input-warning-focus-background-color: var(--input-warning-focus-background-color); --tag-input-warning-focus-border-color: var(--input-warning-focus-border-color); --tag-input-warning-disabled-text-color: var(--input-warning-disabled-text-color); --tag-input-warning-disabled-placeholder-text-color: var(--input-warning-disabled-placeholder-text-color); --tag-input-danger-background-color: var(--input-danger-background-color); --tag-input-danger-border-color: var(--input-danger-border-color); --tag-input-danger-text-color: var(--input-danger-text-color); --tag-input-danger-placeholder-text-color: var(--input-danger-placeholder-text-color); --tag-input-danger-focus-background-color: var(--input-danger-focus-background-color); --tag-input-danger-focus-border-color: var(--input-danger-focus-border-color); --tag-input-danger-disabled-text-color: var(--input-danger-disabled-text-color); --tag-input-danger-disabled-placeholder-text-color: var(--input-danger-disabled-placeholder-text-color); --tag-input-control-background-color: var(--input-control-background-color); --tag-input-control-border-color: var(--input-control-border-color); --tag-input-control-text-color: var(--input-control-text-color); --tag-input-control-placeholder-text-color: var(--input-control-placeholder-text-color); --tag-input-control-focus-background-color: var(--input-control-focus-background-color); --tag-input-control-focus-border-color: var(--input-control-focus-border-color); --tag-input-control-disabled-text-color: var(--input-control-disabled-text-color); --tag-input-control-disabled-placeholder-text-color: var(--input-control-disabled-placeholder-text-color); --tag-input-tiny-text-font-size: var(--input-tiny-text-font-size); --tag-input-tiny-text-font-weight: var(--input-tiny-text-font-weight); --tag-input-tiny-text-line-height: var(--input-tiny-text-line-height); --tag-input-tiny-placeholder-text-font-size: var(--input-tiny-placeholder-text-font-size); --tag-input-tiny-placeholder-text-font-weight: var(--input-tiny-placeholder-text-font-weight); --tag-input-tiny-placeholder-text-line-height: var(--input-tiny-placeholder-text-line-height); --tag-input-tiny-padding: 0.125rem 0; --tag-input-small-text-font-size: var(--input-small-text-font-size); --tag-input-small-text-font-weight: var(--input-small-text-font-weight); --tag-input-small-text-line-height: var(--input-small-text-line-height); --tag-input-small-placeholder-text-font-size: var(--input-small-placeholder-text-font-size); --tag-input-small-placeholder-text-font-weight: var(--input-small-placeholder-text-font-weight); --tag-input-small-placeholder-text-line-height: var(--input-small-placeholder-text-line-height); --tag-input-small-padding: 0.125rem 0; --tag-input-medium-text-font-size: var(--input-medium-text-font-size); --tag-input-medium-text-font-weight: var(--input-medium-text-font-weight); --tag-input-medium-text-line-height: var(--input-medium-text-line-height); --tag-input-medium-placeholder-text-font-size: var(--input-medium-placeholder-text-font-size); --tag-input-medium-placeholder-text-font-weight: var(--input-medium-placeholder-text-font-weight); --tag-input-medium-placeholder-text-line-height: var(--input-medium-placeholder-text-line-height); --tag-input-medium-padding: 0.25rem 0; --tag-input-large-text-font-size: var(--input-large-text-font-size); --tag-input-large-text-font-weight: var(--input-large-text-font-weight); --tag-input-large-text-line-height: var(--input-large-text-line-height); --tag-input-large-placeholder-text-font-size: var(--input-large-placeholder-text-font-size); --tag-input-large-placeholder-text-font-weight: var(--input-large-placeholder-text-font-weight); --tag-input-large-placeholder-text-line-height: var(--input-large-placeholder-text-line-height); --tag-input-large-padding: 0.375rem 0; --tag-input-giant-text-font-size: var(--input-giant-text-font-size); --tag-input-giant-text-font-weight: var(--input-giant-text-font-weight); --tag-input-giant-text-line-height: var(--input-giant-text-line-height); --tag-input-giant-placeholder-text-font-size: var(--input-giant-placeholder-text-font-size); --tag-input-giant-placeholder-text-font-weight: var(--input-giant-placeholder-text-font-weight); --tag-input-giant-placeholder-text-line-height: var(--input-giant-placeholder-text-line-height); --tag-input-giant-padding: 0.5rem 0; --toggle-height: 1.875rem; --toggle-width: 3.125rem; --toggle-border-width: 1px; --toggle-border-radius: 100px; --toggle-outline-width: var(--outline-width); --toggle-outline-color: var(--outline-color); --toggle-switcher-size: 1.75rem; --toggle-switcher-icon-size: 0.75rem; --toggle-text-font-family: var(--text-subtitle-2-font-family); --toggle-text-font-size: var(--text-subtitle-2-font-size); --toggle-text-font-weight: var(--text-subtitle-2-font-weight); --toggle-text-line-height: var(--text-subtitle-2-line-height); --toggle-cursor: pointer; --toggle-disabled-cursor: default; --toggle-basic-text-color: var(--text-basic-color); --toggle-basic-background-color: var(--color-basic-transparent-default); --toggle-basic-border-color: var(--color-basic-transparent-default-border); --toggle-basic-checked-background-color: var(--color-primary-default); --toggle-basic-checked-border-color: var(--color-primary-default-border); --toggle-basic-checked-switcher-background-color: var(--background-basic-color-1); --toggle-basic-checked-switcher-checkmark-color: var(--color-primary-default); --toggle-basic-focus-background-color: var(--color-primary-transparent-focus); --toggle-basic-focus-border-color: var(--color-primary-transparent-focus-border); --toggle-basic-focus-checked-background-color: var(--color-primary-focus); --toggle-basic-focus-checked-border-color: var(--color-primary-focus-border); --toggle-basic-hover-background-color: var(--color-primary-transparent-hover); --toggle-basic-hover-border-color: var(--color-primary-transparent-hover-border); --toggle-basic-hover-checked-background-color: var(--color-primary-hover); --toggle-basic-hover-checked-border-color: var(--color-primary-hover-border); --toggle-basic-active-background-color: var(--color-primary-transparent-active); --toggle-basic-active-border-color: var(--color-primary-transparent-active-border); --toggle-basic-active-checked-background-color: var(--color-primary-active); --toggle-basic-active-checked-border-color: var(--color-primary-active-border); --toggle-basic-disabled-background-color: var(--color-basic-transparent-disabled); --toggle-basic-disabled-border-color: var(--color-basic-transparent-disabled-border); --toggle-basic-disabled-switcher-background-color: var(--color-basic-disabled); --toggle-basic-disabled-checked-switcher-checkmark-color: var(--text-control-color); --toggle-basic-disabled-text-color: var(--text-disabled-color); --toggle-primary-text-color: var(--text-basic-color); --toggle-primary-background-color: var(--color-primary-transparent-default); --toggle-primary-border-color: var(--color-primary-transparent-default-border); --toggle-primary-checked-background-color: var(--color-primary-default); --toggle-primary-checked-border-color: var(--color-primary-default-border); --toggle-primary-checked-switcher-background-color: var(--background-basic-color-1); --toggle-primary-checked-switcher-checkmark-color: var(--color-primary-default); --toggle-primary-focus-background-color: var(--color-primary-transparent-focus); --toggle-primary-focus-border-color: var(--color-primary-transparent-focus-border); --toggle-primary-focus-checked-background-color: var(--color-primary-focus); --toggle-primary-focus-checked-border-color: var(--color-primary-focus-border); --toggle-primary-hover-background-color: var(--color-primary-transparent-hover); --toggle-primary-hover-border-color: var(--color-primary-transparent-hover-border); --toggle-primary-hover-checked-background-color: var(--color-primary-hover); --toggle-primary-hover-checked-border-color: var(--color-primary-hover-border); --toggle-primary-active-background-color: var(--color-primary-transparent-active); --toggle-primary-active-border-color: var(--color-primary-transparent-active-border); --toggle-primary-active-checked-background-color: var(--color-primary-active); --toggle-primary-active-checked-border-color: var(--color-primary-active-border); --toggle-primary-disabled-background-color: var(--color-basic-transparent-disabled); --toggle-primary-disabled-border-color: var(--color-basic-transparent-disabled-border); --toggle-primary-disabled-switcher-background-color: var(--color-basic-disabled); --toggle-primary-disabled-checked-switcher-checkmark-color: var(--text-control-color); --toggle-primary-disabled-text-color: var(--text-disabled-color); --toggle-success-text-color: var(--text-basic-color); --toggle-success-background-color: var(--color-success-transparent-default); --toggle-success-border-color: var(--color-success-transparent-default-border); --toggle-success-checked-background-color: var(--color-success-default); --toggle-success-checked-border-color: var(--color-success-default-border); --toggle-success-checked-switcher-background-color: var(--background-basic-color-1); --toggle-success-checked-switcher-checkmark-color: var(--color-success-default); --toggle-success-focus-background-color: var(--color-success-transparent-focus); --toggle-success-focus-border-color: var(--color-success-transparent-focus-border); --toggle-success-focus-checked-background-color: var(--color-success-focus); --toggle-success-focus-checked-border-color: var(--color-success-focus-border); --toggle-success-hover-background-color: var(--color-success-transparent-hover); --toggle-success-hover-border-color: var(--color-success-transparent-hover-border); --toggle-success-hover-checked-background-color: var(--color-success-hover); --toggle-success-hover-checked-border-color: var(--color-success-hover-border); --toggle-success-active-background-color: var(--color-success-transparent-active); --toggle-success-active-border-color: var(--color-success-transparent-active-border); --toggle-success-active-checked-background-color: var(--color-success-active); --toggle-success-active-checked-border-color: var(--color-success-active-border); --toggle-success-disabled-background-color: var(--color-basic-transparent-disabled); --toggle-success-disabled-border-color: var(--color-basic-transparent-disabled-border); --toggle-success-disabled-switcher-background-color: var(--color-basic-disabled); --toggle-success-disabled-checked-switcher-checkmark-color: var(--text-control-color); --toggle-success-disabled-text-color: var(--text-disabled-color); --toggle-info-text-color: var(--text-basic-color); --toggle-info-background-color: var(--color-info-transparent-default); --toggle-info-border-color: var(--color-info-transparent-default-border); --toggle-info-checked-background-color: var(--color-info-default); --toggle-info-checked-border-color: var(--color-info-default-border); --toggle-info-checked-switcher-background-color: var(--background-basic-color-1); --toggle-info-checked-switcher-checkmark-color: var(--color-info-default); --toggle-info-focus-background-color: var(--color-info-transparent-focus); --toggle-info-focus-border-color: var(--color-info-transparent-focus-border); --toggle-info-focus-checked-background-color: var(--color-info-focus); --toggle-info-focus-checked-border-color: var(--color-info-focus-border); --toggle-info-hover-background-color: var(--color-info-transparent-hover); --toggle-info-hover-border-color: var(--color-info-transparent-hover-border); --toggle-info-hover-checked-background-color: var(--color-info-hover); --toggle-info-hover-checked-border-color: var(--color-info-hover-border); --toggle-info-active-background-color: var(--color-info-transparent-active); --toggle-info-active-border-color: var(--color-info-transparent-active-border); --toggle-info-active-checked-background-color: var(--color-info-active); --toggle-info-active-checked-border-color: var(--color-info-active-border); --toggle-info-disabled-background-color: var(--color-basic-transparent-disabled); --toggle-info-disabled-border-color: var(--color-basic-transparent-disabled-border); --toggle-info-disabled-switcher-background-color: var(--color-basic-disabled); --toggle-info-disabled-checked-switcher-checkmark-color: var(--text-control-color); --toggle-info-disabled-text-color: var(--text-disabled-color); --toggle-warning-text-color: var(--text-basic-color); --toggle-warning-background-color: var(--color-warning-transparent-default); --toggle-warning-border-color: var(--color-warning-transparent-default-border); --toggle-warning-checked-background-color: var(--color-warning-default); --toggle-warning-checked-border-color: var(--color-warning-default-border); --toggle-warning-checked-switcher-background-color: var(--background-basic-color-1); --toggle-warning-checked-switcher-checkmark-color: var(--color-warning-default); --toggle-warning-focus-background-color: var(--color-warning-transparent-focus); --toggle-warning-focus-border-color: var(--color-warning-transparent-focus-border); --toggle-warning-focus-checked-background-color: var(--color-warning-focus); --toggle-warning-focus-checked-border-color: var(--color-warning-focus-border); --toggle-warning-hover-background-color: var(--color-warning-transparent-hover); --toggle-warning-hover-border-color: var(--color-warning-transparent-hover-border); --toggle-warning-hover-checked-background-color: var(--color-warning-hover); --toggle-warning-hover-checked-border-color: var(--color-warning-hover-border); --toggle-warning-active-background-color: var(--color-warning-transparent-active); --toggle-warning-active-border-color: var(--color-warning-transparent-active-border); --toggle-warning-active-checked-background-color: var(--color-warning-active); --toggle-warning-active-checked-border-color: var(--color-warning-active-border); --toggle-warning-disabled-background-color: var(--color-basic-transparent-disabled); --toggle-warning-disabled-border-color: var(--color-basic-transparent-disabled-border); --toggle-warning-disabled-switcher-background-color: var(--color-basic-disabled); --toggle-warning-disabled-checked-switcher-checkmark-color: var(--text-control-color); --toggle-warning-disabled-text-color: var(--text-disabled-color); --toggle-danger-text-color: var(--text-basic-color); --toggle-danger-background-color: var(--color-danger-transparent-default); --toggle-danger-border-color: var(--color-danger-transparent-default-border); --toggle-danger-checked-background-color: var(--color-danger-default); --toggle-danger-checked-border-color: var(--color-danger-default-border); --toggle-danger-checked-switcher-background-color: var(--background-basic-color-1); --toggle-danger-checked-switcher-checkmark-color: var(--color-danger-default); --toggle-danger-focus-background-color: var(--color-danger-transparent-focus); --toggle-danger-focus-border-color: var(--color-danger-transparent-focus-border); --toggle-danger-focus-checked-background-color: var(--color-danger-focus); --toggle-danger-focus-checked-border-color: var(--color-danger-focus-border); --toggle-danger-hover-background-color: var(--color-danger-transparent-hover); --toggle-danger-hover-border-color: var(--color-danger-transparent-hover-border); --toggle-danger-hover-checked-background-color: var(--color-danger-hover); --toggle-danger-hover-checked-border-color: var(--color-danger-hover-border); --toggle-danger-active-background-color: var(--color-danger-transparent-active); --toggle-danger-active-border-color: var(--color-danger-transparent-active-border); --toggle-danger-active-checked-background-color: var(--color-danger-active); --toggle-danger-active-checked-border-color: var(--color-danger-active-border); --toggle-danger-disabled-background-color: var(--color-basic-transparent-disabled); --toggle-danger-disabled-border-color: var(--color-basic-transparent-disabled-border); --toggle-danger-disabled-switcher-background-color: var(--color-basic-disabled); --toggle-danger-disabled-checked-switcher-checkmark-color: var(--text-control-color); --toggle-danger-disabled-text-color: var(--text-disabled-color); --toggle-control-text-color: var(--color-basic-100); --toggle-control-background-color: var(--color-control-transparent-default); --toggle-control-border-color: var(--color-control-transparent-default-border); --toggle-control-checked-background-color: var(--color-control-transparent-default); --toggle-control-checked-border-color: var(--color-control-transparent-default-border); --toggle-control-checked-switcher-background-color: var(--color-control-default); --toggle-control-checked-switcher-checkmark-color: var(--color-basic-800); --toggle-control-focus-background-color: var(--color-control-transparent-focus); --toggle-control-focus-border-color: var(--color-control-transparent-focus-border); --toggle-control-focus-checked-background-color: var(--color-control-transparent-focus); --toggle-control-focus-checked-border-color: var(--color-control-transparent-focus-border); --toggle-control-hover-background-color: var(--color-control-transparent-hover); --toggle-control-hover-border-color: var(--color-control-transparent-hover-border); --toggle-control-hover-checked-background-color: var(--color-control-transparent-hover); --toggle-control-hover-checked-border-color: var(--color-control-transparent-hover-border); --toggle-control-active-background-color: var(--color-control-transparent-active); --toggle-control-active-border-color: var(--color-control-transparent-active-border); --toggle-control-active-checked-background-color: var(--color-control-transparent-active); --toggle-control-active-checked-border-color: var(--color-control-transparent-active-border); --toggle-control-disabled-background-color: var(--color-control-transparent-disabled); --toggle-control-disabled-border-color: var(--color-control-transparent-disabled-border); --toggle-control-disabled-switcher-background-color: var(--color-basic-transparent-600); --toggle-control-disabled-checked-switcher-checkmark-color: var(--color-basic-100); --toggle-control-disabled-text-color: var(--text-control-color); --form-field-tiny-max-width: var(--input-tiny-max-width); --form-field-small-max-width: var(--input-small-max-width); --form-field-medium-max-width: var(--input-medium-max-width); --form-field-large-max-width: var(--input-large-max-width); --form-field-giant-max-width: var(--input-giant-max-width); --form-field-addon-basic-text-color: var(--color-basic-600); --form-field-addon-basic-highlight-text-color: var(--color-primary-500); --form-field-addon-primary-text-color: var(--color-primary-500); --form-field-addon-primary-highlight-text-color: var(--color-primary-600); --form-field-addon-success-text-color: var(--color-success-500); --form-field-addon-success-highlight-text-color: var(--color-success-600); --form-field-addon-info-text-color: var(--color-info-500); --form-field-addon-info-highlight-text-color: var(--color-info-600); --form-field-addon-warning-text-color: var(--color-warning-500); --form-field-addon-warning-highlight-text-color: var(--color-warning-600); --form-field-addon-danger-text-color: var(--color-danger-500); --form-field-addon-danger-highlight-text-color: var(--color-danger-600); --form-field-addon-control-text-color: var(--color-control-default); --form-field-addon-control-highlight-text-color: var(--color-control-default); --form-field-addon-disabled-text-color: var(--text-disabled-color); --form-field-addon-tiny-height: 1.5rem; --form-field-addon-tiny-width: var(--form-field-addon-tiny-height); --form-field-addon-tiny-icon-size: var(--button-tiny-icon-size); --form-field-addon-tiny-font-size: var(--text-button-tiny-font-size); --form-field-addon-tiny-line-height: var(--text-button-tiny-line-height); --form-field-addon-tiny-font-weight: var(--text-button-font-weight); --form-field-addon-small-height: 2rem; --form-field-addon-small-width: var(--form-field-addon-small-height); --form-field-addon-small-icon-size: var(--button-small-icon-size); --form-field-addon-small-font-size: var(--text-button-small-font-size); --form-field-addon-small-line-height: var(--text-button-small-line-height); --form-field-addon-small-font-weight: var(--text-button-font-weight); --form-field-addon-medium-height: 2.5rem; --form-field-addon-medium-width: var(--form-field-addon-medium-height); --form-field-addon-medium-icon-size: var(--button-medium-icon-size); --form-field-addon-medium-font-size: var(--text-button-medium-font-size); --form-field-addon-medium-line-height: var(--text-button-medium-line-height); --form-field-addon-medium-font-weight: var(--text-button-font-weight); --form-field-addon-large-height: 3rem; --form-field-addon-large-width: var(--form-field-addon-large-height); --form-field-addon-large-icon-size: var(--button-large-icon-size); --form-field-addon-large-font-size: var(--text-button-large-font-size); --form-field-addon-large-line-height: var(--text-button-large-line-height); --form-field-addon-large-font-weight: var(--text-button-font-weight); --form-field-addon-giant-height: 3.5rem; --form-field-addon-giant-width: var(--form-field-addon-giant-height); --form-field-addon-giant-icon-size: var(--button-giant-icon-size); --form-field-addon-giant-font-size: var(--text-button-giant-font-size); --form-field-addon-giant-line-height: var(--text-button-giant-line-height); --form-field-addon-giant-font-weight: var(--text-button-font-weight); --color-primary-100: #f2f6ff; --color-primary-200: #d9e4ff; --color-primary-300: #a6c1ff; --color-primary-400: #598bff; --color-primary-500: #3366ff; --color-primary-600: #274bdb; --color-primary-700: #1a34b8; --color-primary-800: #102694; --color-primary-900: #091c7a; --color-primary-transparent-100: rgba(51, 102, 255, 0.08); --color-primary-transparent-200: rgba(51, 102, 255, 0.16); --color-primary-transparent-300: rgba(51, 102, 255, 0.24); --color-primary-transparent-400: rgba(51, 102, 255, 0.32); --color-primary-transparent-500: rgba(51, 102, 255, 0.4); --color-primary-transparent-600: rgba(51, 102, 255, 0.48); --color-success-100: #f0fff5; --color-success-200: #ccfce3; --color-success-300: #8cfac7; --color-success-400: #2ce69b; --color-success-500: #00d68f; --color-success-600: #00b887; --color-success-700: #00997a; --color-success-800: #007d6c; --color-success-900: #004a45; --color-success-transparent-100: rgba(0, 214, 143, 0.08); --color-success-transparent-200: rgba(0, 214, 143, 0.16); --color-success-transparent-300: rgba(0, 214, 143, 0.24); --color-success-transparent-400: rgba(0, 214, 143, 0.32); --color-success-transparent-500: rgba(0, 214, 143, 0.4); --color-success-transparent-600: rgba(0, 214, 143, 0.48); --color-info-100: #f2f8ff; --color-info-200: #c7e2ff; --color-info-300: #94cbff; --color-info-400: #42aaff; --color-info-500: #0095ff; --color-info-600: #006fd6; --color-info-700: #0057c2; --color-info-800: #0041a8; --color-info-900: #002885; --color-info-transparent-100: rgba(0, 149, 255, 0.08); --color-info-transparent-200: rgba(0, 149, 255, 0.16); --color-info-transparent-300: rgba(0, 149, 255, 0.24); --color-info-transparent-400: rgba(0, 149, 255, 0.32); --color-info-transparent-500: rgba(0, 149, 255, 0.4); --color-info-transparent-600: rgba(0, 149, 255, 0.48); --color-warning-100: #fffdf2; --color-warning-200: #fff1c2; --color-warning-300: #ffe59e; --color-warning-400: #ffc94d; --color-warning-500: #ffaa00; --color-warning-600: #db8b00; --color-warning-700: #b86e00; --color-warning-800: #945400; --color-warning-900: #703c00; --color-warning-transparent-100: rgba(255, 170, 0, 0.08); --color-warning-transparent-200: rgba(255, 170, 0, 0.16); --color-warning-transparent-300: rgba(255, 170, 0, 0.24); --color-warning-transparent-400: rgba(255, 170, 0, 0.32); --color-warning-transparent-500: rgba(255, 170, 0, 0.4); --color-warning-transparent-600: rgba(255, 170, 0, 0.48); --color-danger-100: #fff2f2; --color-danger-200: #ffd6d9; --color-danger-300: #ffa8b4; --color-danger-400: #ff708d; --color-danger-500: #ff3d71; --color-danger-600: #db2c66; --color-danger-700: #b81d5b; --color-danger-800: #94124e; --color-danger-900: #700940; --color-danger-transparent-100: rgba(255, 61, 113, 0.08); --color-danger-transparent-200: rgba(255, 61, 113, 0.16); --color-danger-transparent-300: rgba(255, 61, 113, 0.24); --color-danger-transparent-400: rgba(255, 61, 113, 0.32); --color-danger-transparent-500: rgba(255, 61, 113, 0.4); --color-danger-transparent-600: rgba(255, 61, 113, 0.48); --color-basic-100: #ffffff; --color-basic-200: #f7f9fc; --color-basic-300: #edf1f7; --color-basic-400: #e4e9f2; --color-basic-500: #c5cee0; --color-basic-600: #8f9bb3; --color-basic-700: #2e3a59; --color-basic-800: #222b45; --color-basic-900: #192038; --color-basic-1000: #151a30; --color-basic-1100: #101426; --color-basic-transparent-100: rgba(143, 155, 179, 0.08); --color-basic-transparent-200: rgba(143, 155, 179, 0.16); --color-basic-transparent-300: rgba(143, 155, 179, 0.24); --color-basic-transparent-400: rgba(143, 155, 179, 0.32); --color-basic-transparent-500: rgba(143, 155, 179, 0.4); --color-basic-transparent-600: rgba(143, 155, 179, 0.48); --color-basic-control-transparent-100: rgba(255, 255, 255, 0.08); --color-basic-control-transparent-200: rgba(255, 255, 255, 0.16); --color-basic-control-transparent-300: rgba(255, 255, 255, 0.24); --color-basic-control-transparent-400: rgba(255, 255, 255, 0.32); --color-basic-control-transparent-500: rgba(255, 255, 255, 0.4); --color-basic-control-transparent-600: rgba(255, 255, 255, 0.48); --color-basic-focus: var(--color-basic-400); --color-basic-hover: var(--color-basic-200); --color-basic-default: var(--color-basic-300); --color-basic-active: var(--color-basic-400); --color-basic-disabled: var(--color-basic-transparent-300); --color-basic-focus-border: var(--color-basic-500); --color-basic-hover-border: var(--color-basic-hover); --color-basic-default-border: var(--color-basic-default); --color-basic-active-border: var(--color-basic-active); --color-basic-disabled-border: var(--color-basic-disabled); --color-basic-transparent-focus: var(--color-basic-transparent-300); --color-basic-transparent-hover: var(--color-basic-transparent-200); --color-basic-transparent-default: var(--color-basic-transparent-100); --color-basic-transparent-active: var(--color-basic-transparent-300); --color-basic-transparent-disabled: var(--color-basic-transparent-200); --color-basic-transparent-focus-border: var(--color-basic-600); --color-basic-transparent-hover-border: var(--color-basic-600); --color-basic-transparent-default-border: var(--color-basic-600); --color-basic-transparent-active-border: var(--color-basic-600); --color-basic-transparent-disabled-border: var(--color-basic-transparent-300); --color-primary-focus: var(--color-primary-600); --color-primary-hover: var(--color-primary-400); --color-primary-default: var(--color-primary-500); --color-primary-active: var(--color-primary-600); --color-primary-disabled: var(--color-basic-transparent-300); --color-primary-focus-border: var(--color-primary-700); --color-primary-hover-border: var(--color-primary-hover); --color-primary-default-border: var(--color-primary-default); --color-primary-active-border: var(--color-primary-active); --color-primary-disabled-border: var(--color-primary-disabled); --color-primary-transparent-focus: var(--color-primary-transparent-300); --color-primary-transparent-hover: var(--color-primary-transparent-200); --color-primary-transparent-default: var(--color-primary-transparent-100); --color-primary-transparent-active: var(--color-primary-transparent-300); --color-primary-transparent-disabled: var(--color-basic-transparent-200); --color-primary-transparent-focus-border: var(--color-primary-500); --color-primary-transparent-hover-border: var(--color-primary-500); --color-primary-transparent-default-border: var(--color-primary-500); --color-primary-transparent-active-border: var(--color-primary-500); --color-primary-transparent-disabled-border: var(--color-basic-transparent-300); --color-success-focus: var(--color-success-600); --color-success-hover: var(--color-success-400); --color-success-default: var(--color-success-500); --color-success-active: var(--color-success-600); --color-success-disabled: var(--color-basic-transparent-300); --color-success-focus-border: var(--color-success-700); --color-success-hover-border: var(--color-success-hover); --color-success-default-border: var(--color-success-default); --color-success-active-border: var(--color-success-active); --color-success-disabled-border: var(--color-success-disabled); --color-success-transparent-focus: var(--color-success-transparent-300); --color-success-transparent-focus-border: var(--color-success-500); --color-success-transparent-hover: var(--color-success-transparent-200); --color-success-transparent-hover-border: var(--color-success-500); --color-success-transparent-default: var(--color-success-transparent-100); --color-success-transparent-default-border: var(--color-success-500); --color-success-transparent-active: var(--color-success-transparent-300); --color-success-transparent-active-border: var(--color-success-500); --color-success-transparent-disabled: var(--color-basic-transparent-200); --color-success-transparent-disabled-border: var(--color-basic-transparent-300); --color-info-focus: var(--color-info-600); --color-info-hover: var(--color-info-400); --color-info-default: var(--color-info-500); --color-info-active: var(--color-info-600); --color-info-disabled: var(--color-basic-transparent-300); --color-info-focus-border: var(--color-info-700); --color-info-hover-border: var(--color-info-hover); --color-info-default-border: var(--color-info-default); --color-info-active-border: var(--color-info-active); --color-info-disabled-border: var(--color-info-disabled); --color-info-transparent-focus: var(--color-info-transparent-300); --color-info-transparent-hover: var(--color-info-transparent-200); --color-info-transparent-default: var(--color-info-transparent-100); --color-info-transparent-active: var(--color-info-transparent-300); --color-info-transparent-disabled: var(--color-basic-transparent-200); --color-info-transparent-focus-border: var(--color-info-500); --color-info-transparent-hover-border: var(--color-info-500); --color-info-transparent-default-border: var(--color-info-500); --color-info-transparent-active-border: var(--color-info-500); --color-info-transparent-disabled-border: var(--color-basic-transparent-300); --color-warning-focus: var(--color-warning-600); --color-warning-hover: var(--color-warning-400); --color-warning-default: var(--color-warning-500); --color-warning-active: var(--color-warning-600); --color-warning-disabled: var(--color-basic-transparent-300); --color-warning-focus-border: var(--color-warning-700); --color-warning-hover-border: var(--color-warning-hover); --color-warning-default-border: var(--color-warning-default); --color-warning-active-border: var(--color-warning-active); --color-warning-disabled-border: var(--color-warning-disabled); --color-warning-transparent-focus: var(--color-warning-transparent-300); --color-warning-transparent-hover: var(--color-warning-transparent-200); --color-warning-transparent-default: var(--color-warning-transparent-100); --color-warning-transparent-active: var(--color-warning-transparent-300); --color-warning-transparent-disabled: var(--color-basic-transparent-200); --color-warning-transparent-focus-border: var(--color-warning-500); --color-warning-transparent-hover-border: var(--color-warning-500); --color-warning-transparent-default-border: var(--color-warning-500); --color-warning-transparent-active-border: var(--color-warning-500); --color-warning-transparent-disabled-border: var(--color-basic-transparent-300); --color-danger-focus: var(--color-danger-600); --color-danger-hover: var(--color-danger-400); --color-danger-default: var(--color-danger-500); --color-danger-active: var(--color-danger-600); --color-danger-disabled: var(--color-basic-transparent-300); --color-danger-focus-border: var(--color-danger-700); --color-danger-hover-border: var(--color-danger-hover); --color-danger-default-border: var(--color-danger-default); --color-danger-active-border: var(--color-danger-active); --color-danger-disabled-border: var(--color-danger-disabled); --color-danger-transparent-focus: var(--color-danger-transparent-300); --color-danger-transparent-hover: var(--color-danger-transparent-200); --color-danger-transparent-default: var(--color-danger-transparent-100); --color-danger-transparent-active: var(--color-danger-transparent-300); --color-danger-transparent-disabled: var(--color-basic-transparent-200); --color-danger-transparent-focus-border: var(--color-danger-500); --color-danger-transparent-hover-border: var(--color-danger-500); --color-danger-transparent-default-border: var(--color-danger-500); --color-danger-transparent-active-border: var(--color-danger-500); --color-danger-transparent-disabled-border: var(--color-basic-transparent-300); --color-control-focus: var(--color-basic-300); --color-control-hover: var(--color-basic-200); --color-control-default: var(--color-basic-100); --color-control-active: var(--color-basic-300); --color-control-disabled: var(--color-basic-transparent-300); --color-control-focus-border: var(--color-basic-500); --color-control-hover-border: var(--color-control-hover); --color-control-default-border: var(--color-control-default); --color-control-active-border: var(--color-control-active); --color-control-disabled-border: var(--color-control-disabled); --color-control-transparent-focus: var(--color-basic-control-transparent-300); --color-control-transparent-hover: var(--color-basic-control-transparent-200); --color-control-transparent-default: var(--color-basic-control-transparent-100); --color-control-transparent-active: var(--color-basic-control-transparent-300); --color-control-transparent-disabled: var(--color-basic-transparent-200); --color-control-transparent-focus-border: var(--color-basic-100); --color-control-transparent-hover-border: var(--color-basic-100); --color-control-transparent-default-border: var(--color-basic-100); --color-control-transparent-active-border: var(--color-basic-100); --color-control-transparent-disabled-border: var(--color-basic-transparent-300); --background-basic-color-1: var(--color-basic-100); --background-basic-color-2: var(--color-basic-200); --background-basic-color-3: var(--color-basic-300); --background-basic-color-4: var(--color-basic-400); --border-basic-color-1: var(--color-basic-100); --border-basic-color-2: var(--color-basic-200); --border-basic-color-3: var(--color-basic-300); --border-basic-color-4: var(--color-basic-400); --border-basic-color-5: var(--color-basic-500); --background-alternative-color-1: var(--color-basic-800); --background-alternative-color-2: var(--color-basic-900); --background-alternative-color-3: var(--color-basic-1000); --background-alternative-color-4: var(--color-basic-1100); --border-alternative-color-1: var(--color-basic-800); --border-alternative-color-2: var(--color-basic-900); --border-alternative-color-3: var(--color-basic-1000); --border-alternative-color-4: var(--color-basic-1100); --border-alternative-color-5: var(--color-basic-1100); --background-primary-color-1: var(--color-primary-500); --background-primary-color-2: var(--color-primary-600); --background-primary-color-3: var(--color-primary-700); --background-primary-color-4: var(--color-primary-800); --border-primary-color-1: var(--color-basic-500); --border-primary-color-2: var(--color-basic-600); --border-primary-color-3: var(--color-basic-700); --border-primary-color-4: var(--color-basic-800); --border-primary-color-5: var(--color-basic-900); --text-basic-color: var(--color-basic-800); --text-alternate-color: var(--color-basic-100); --text-control-color: var(--color-basic-100); --text-disabled-color: var(--color-basic-transparent-600); --text-hint-color: var(--color-basic-600); --text-primary-color: var(--color-primary-default); --text-primary-focus-color: var(--color-primary-focus); --text-primary-hover-color: var(--color-primary-hover); --text-primary-active-color: var(--color-primary-active); --text-primary-disabled-color: var(--color-primary-400); --text-success-color: var(--color-success-default); --text-success-focus-color: var(--color-success-focus); --text-success-hover-color: var(--color-success-hover); --text-success-active-color: var(--color-success-active); --text-success-disabled-color: var(--color-success-400); --text-info-color: var(--color-info-default); --text-info-focus-color: var(--color-info-focus); --text-info-hover-color: var(--color-info-hover); --text-info-active-color: var(--color-info-active); --text-info-disabled-color: var(--color-info-400); --text-warning-color: var(--color-warning-default); --text-warning-focus-color: var(--color-warning-focus); --text-warning-hover-color: var(--color-warning-hover); --text-warning-active-color: var(--color-warning-active); --text-warning-disabled-color: var(--color-warning-400); --text-danger-color: var(--color-danger-default); --text-danger-focus-color: var(--color-danger-focus); --text-danger-hover-color: var(--color-danger-hover); --text-danger-active-color: var(--color-danger-active); --text-danger-disabled-color: var(--color-danger-400); --font-family-primary: Open Sans, sans-serif; --font-family-secondary: var(--font-family-primary); --text-heading-1-font-family: var(--font-family-secondary); --text-heading-1-font-size: 2.25rem; --text-heading-1-font-weight: 700; --text-heading-1-line-height: 3rem; --text-heading-2-font-family: var(--font-family-secondary); --text-heading-2-font-size: 2rem; --text-heading-2-font-weight: 700; --text-heading-2-line-height: 2.5rem; --text-heading-3-font-family: var(--font-family-secondary); --text-heading-3-font-size: 1.875rem; --text-heading-3-font-weight: 700; --text-heading-3-line-height: 2.5rem; --text-heading-4-font-family: var(--font-family-secondary); --text-heading-4-font-size: 1.625rem; --text-heading-4-font-weight: 700; --text-heading-4-line-height: 2rem; --text-heading-5-font-family: var(--font-family-secondary); --text-heading-5-font-size: 1.375rem; --text-heading-5-font-weight: 700; --text-heading-5-line-height: 2rem; --text-heading-6-font-family: var(--font-family-secondary); --text-heading-6-font-size: 1.125rem; --text-heading-6-font-weight: 700; --text-heading-6-line-height: 1.5rem; --text-subtitle-font-family: var(--font-family-primary); --text-subtitle-font-size: 0.9375rem; --text-subtitle-font-weight: 600; --text-subtitle-line-height: 1.5rem; --text-subtitle-2-font-family: var(--font-family-primary); --text-subtitle-2-font-size: 0.8125rem; --text-subtitle-2-font-weight: 600; --text-subtitle-2-line-height: 1.5rem; --text-paragraph-font-family: var(--font-family-primary); --text-paragraph-font-size: 0.9375rem; --text-paragraph-font-weight: 400; --text-paragraph-line-height: 1.25rem; --text-paragraph-2-font-family: var(--font-family-primary); --text-paragraph-2-font-size: 0.8125rem; --text-paragraph-2-font-weight: 400; --text-paragraph-2-line-height: 1.125rem; --text-label-font-family: var(--font-family-primary); --text-label-font-size: 0.75rem; --text-label-font-weight: 700; --text-label-line-height: 1rem; --text-caption-font-family: var(--font-family-primary); --text-caption-font-size: 0.75rem; --text-caption-font-weight: 400; --text-caption-line-height: 1rem; --text-caption-2-font-family: var(--font-family-primary); --text-caption-2-font-size: 0.75rem; --text-caption-2-font-weight: 600; --text-caption-2-line-height: 1rem; --text-button-font-family: var(--font-family-primary); --text-button-font-weight: 700; --text-button-tiny-font-size: 0.625rem; --text-button-tiny-line-height: 0.75rem; --text-button-small-font-size: 0.75rem; --text-button-small-line-height: 1rem; --text-button-medium-font-size: 0.875rem; --text-button-medium-line-height: 1rem; --text-button-large-font-size: 1rem; --text-button-large-line-height: 1.25rem; --text-button-giant-font-size: 1.125rem; --text-button-giant-line-height: 1.5rem; --border-radius: 0.25rem; --outline-width: 0.375rem; --outline-color: var(--color-basic-transparent-200); --scrollbar-color: var(--background-basic-color-4); --scrollbar-background-color: var(--background-basic-color-2); --scrollbar-width: 0.3125rem; --shadow: 0 0.5rem 1rem 0 rgba(44, 51, 73, 0.1); --divider-color: var(--border-basic-color-3); --divider-style: solid; --divider-width: 1px; } .ng2-pdf-viewer-container { overflow: hidden !important; } .page-title { margin-top: 0; } .error-message { font-size: 10px; padding-left: 20px; color: red; } .label-fixed.sc-ion-label-ios-h { flex: 0 0 150px; width: 150px; min-width: 100px; max-width: 200px; } .raw-data-ocr { display: block; font-size: 0.9em; } .raw-data-ocr code { display: block !important; height: 30vh; } .raw-data-ocr code span { display: inline; } .screen { visibility: hidden; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; } @media only screen and (min-height: 768px) and (min-width: 768px) { .sc-ion-modal-md-h { --width: 1000px; --height: 800px; } } .view-model-class::part(content) { width: 100%; height: 100%; } .notifications-popover { --width: fit-content; } .hover\:border-gray-300:hover{ --tw-border-opacity: 1 !important; border-color: rgb(209 213 219 / var(--tw-border-opacity)) !important; } .hover\:bg-blue-800:hover{ --tw-bg-opacity: 1 !important; background-color: rgb(30 66 159 / var(--tw-bg-opacity)) !important; } .hover\:bg-gray-100:hover{ --tw-bg-opacity: 1 !important; background-color: rgb(243 244 246 / var(--tw-bg-opacity)) !important; } .hover\:bg-gray-900:hover{ --tw-bg-opacity: 1 !important; background-color: rgb(17 24 39 / var(--tw-bg-opacity)) !important; } .hover\:bg-green-600:hover{ --tw-bg-opacity: 1 !important; background-color: rgb(5 122 85 / var(--tw-bg-opacity)) !important; } .hover\:bg-green-700:hover{ --tw-bg-opacity: 1 !important; background-color: rgb(4 108 78 / var(--tw-bg-opacity)) !important; } .hover\:bg-red-500:hover{ --tw-bg-opacity: 1 !important; background-color: rgb(240 82 82 / var(--tw-bg-opacity)) !important; } .hover\:bg-white:hover{ --tw-bg-opacity: 1 !important; background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important; } .hover\:text-black:hover{ --tw-text-opacity: 1 !important; color: rgb(0 0 0 / var(--tw-text-opacity)) !important; } .hover\:text-blue-600:hover{ --tw-text-opacity: 1 !important; color: rgb(28 100 242 / var(--tw-text-opacity)) !important; } .hover\:text-gray-600:hover{ --tw-text-opacity: 1 !important; color: rgb(75 85 99 / var(--tw-text-opacity)) !important; } .hover\:text-gray-900:hover{ --tw-text-opacity: 1 !important; color: rgb(17 24 39 / var(--tw-text-opacity)) !important; } .focus\:outline-none:focus{ outline: 2px solid transparent !important; outline-offset: 2px !important; } .focus\:ring-2:focus{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important; --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important; box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000 !important; box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important; } .focus\:ring-4:focus{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important; --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important; box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000 !important; box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important; } .focus\:ring-blue-300:focus{ --tw-ring-opacity: 1 !important; --tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity)) !important; } .focus\:ring-gray-200:focus{ --tw-ring-opacity: 1 !important; --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity)) !important; } .active\:bg-black:active{ --tw-bg-opacity: 1 !important; background-color: rgb(0 0 0 / var(--tw-bg-opacity)) !important; } .active\:bg-green-700:active{ --tw-bg-opacity: 1 !important; background-color: rgb(4 108 78 / var(--tw-bg-opacity)) !important; } .active\:bg-red-700:active{ --tw-bg-opacity: 1 !important; background-color: rgb(200 30 30 / var(--tw-bg-opacity)) !important; } .disabled\:cursor-not-allowed:disabled{ cursor: not-allowed !important; } .disabled\:bg-gray-700:disabled{ --tw-bg-opacity: 1 !important; background-color: rgb(55 65 81 / var(--tw-bg-opacity)) !important; } .disabled\:bg-green-300:disabled{ --tw-bg-opacity: 1 !important; background-color: rgb(132 225 188 / var(--tw-bg-opacity)) !important; } .disabled\:opacity-50:disabled{ opacity: 0.5 !important; } :is(.dark .dark\:border-blue-500){ --tw-border-opacity: 1 !important; border-color: rgb(63 131 248 / var(--tw-border-opacity)) !important; } :is(.dark .dark\:border-gray-600){ --tw-border-opacity: 1 !important; border-color: rgb(75 85 99 / var(--tw-border-opacity)) !important; } :is(.dark .dark\:border-gray-700){ --tw-border-opacity: 1 !important; border-color: rgb(55 65 81 / var(--tw-border-opacity)) !important; } :is(.dark .dark\:border-transparent){ border-color: transparent !important; } :is(.dark .dark\:bg-blue-600){ --tw-bg-opacity: 1 !important; background-color: rgb(28 100 242 / var(--tw-bg-opacity)) !important; } :is(.dark .dark\:bg-gray-600){ --tw-bg-opacity: 1 !important; background-color: rgb(75 85 99 / var(--tw-bg-opacity)) !important; } :is(.dark .dark\:bg-gray-700){ --tw-bg-opacity: 1 !important; background-color: rgb(55 65 81 / var(--tw-bg-opacity)) !important; } :is(.dark .dark\:bg-gray-800){ --tw-bg-opacity: 1 !important; background-color: rgb(31 41 55 / var(--tw-bg-opacity)) !important; } :is(.dark .dark\:bg-gray-800\/50){ background-color: rgb(31 41 55 / 0.5) !important; } :is(.dark .dark\:bg-opacity-80){ --tw-bg-opacity: 0.8 !important; } :is(.dark .dark\:text-blue-500){ --tw-text-opacity: 1 !important; color: rgb(63 131 248 / var(--tw-text-opacity)) !important; } :is(.dark .dark\:text-gray-400){ --tw-text-opacity: 1 !important; color: rgb(156 163 175 / var(--tw-text-opacity)) !important; } :is(.dark .dark\:text-white){ --tw-text-opacity: 1 !important; color: rgb(255 255 255 / var(--tw-text-opacity)) !important; } :is(.dark .dark\:hover\:bg-blue-700:hover){ --tw-bg-opacity: 1 !important; background-color: rgb(26 86 219 / var(--tw-bg-opacity)) !important; } :is(.dark .dark\:hover\:bg-gray-600:hover){ --tw-bg-opacity: 1 !important; background-color: rgb(75 85 99 / var(--tw-bg-opacity)) !important; } :is(.dark .dark\:hover\:bg-gray-800:hover){ --tw-bg-opacity: 1 !important; background-color: rgb(31 41 55 / var(--tw-bg-opacity)) !important; } :is(.dark .dark\:hover\:text-blue-500:hover){ --tw-text-opacity: 1 !important; color: rgb(63 131 248 / var(--tw-text-opacity)) !important; } :is(.dark .dark\:hover\:text-gray-300:hover){ --tw-text-opacity: 1 !important; color: rgb(209 213 219 / var(--tw-text-opacity)) !important; } :is(.dark .dark\:hover\:text-white:hover){ --tw-text-opacity: 1 !important; color: rgb(255 255 255 / var(--tw-text-opacity)) !important; } /*!*************************************************************************************************************************************************************************************************************************************************!*\ !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./node_modules/@nebular/theme/styles/prebuilt/default.css ***! \*************************************************************************************************************************************************************************************************************************************************/ /*! * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */.visually-hidden{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}.cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);transition:opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0, 0, 0, 0.32)}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.nb-global-scrollblock{position:static;width:auto;overflow:hidden}/*! * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. *//*! * @license * Copyright Akveo. All Rights Reserved. * Licensed under the MIT License. See License.txt in the project root for license information. */html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}html,body{margin:0;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0)}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.nb-theme-default nb-layout .scrollable-container{scrollbar-face-color:#e4e9f2;scrollbar-track-color:#f7f9fc}.nb-theme-default nb-layout .scrollable-container::-webkit-scrollbar{width:.3125rem;height:.3125rem}.nb-theme-default nb-layout .scrollable-container::-webkit-scrollbar-thumb{background:#e4e9f2;cursor:pointer;border-radius:calc(0.3125rem * 0.5)}.nb-theme-default nb-layout .scrollable-container::-webkit-scrollbar-track{background:#f7f9fc}.nb-theme-default nb-layout .scrollable-container::-webkit-scrollbar-corner{background:#f7f9fc}.nb-theme-default nb-layout.with-scroll .scrollable-container{overflow:auto;height:100vh;display:block}@media(max-width: 767.98px){.nb-theme-default nb-layout.with-scroll .scrollable-container{overflow-y:scroll;-webkit-overflow-scrolling:touch}}.nb-theme-default .layout{min-width:300px}.nb-theme-default nb-layout.window-mode{background:#edf1f7;display:block}.nb-theme-default nb-layout.window-mode .scrollable-container{max-width:1920px;margin:0 auto}.nb-theme-default nb-layout.window-mode .layout nb-layout-header{max-width:1920px;margin-left:auto;margin-right:auto;width:100%}.nb-theme-default nb-layout.window-mode .layout nb-layout-header nav{max-width:1920px;margin:0 auto}@media screen and (min-width: 1940px){.nb-theme-default nb-layout.window-mode{padding-top:calc(4.75rem * 0.25)}.nb-theme-default nb-layout.window-mode nb-layout-header.fixed{top:calc(4.75rem * 0.25)}.nb-theme-default nb-layout.window-mode nb-layout-header.fixed~.layout-container nb-sidebar .main-container-fixed{height:calc(100vh - calc(4.75rem * 0.25) - 4.75rem);top:calc(calc(4.75rem * 0.25) + 4.75rem)}.nb-theme-default nb-layout.window-mode nb-sidebar.fixed{left:calc((100vw - 1920px)/2)}.nb-theme-default nb-layout.window-mode .layout .layout-container nb-sidebar.fixed.right{right:calc((100vw - 1920px)/2)}.nb-theme-default nb-layout.window-mode .layout .layout-container nb-sidebar.fixed{top:calc(4.75rem + calc(4.75rem * 0.25))}.nb-theme-default nb-layout.window-mode .scrollable-container{height:calc(100vh - calc(4.75rem * 0.25));box-shadow:0 .5rem 1rem 0 rgba(44,51,73,.1)}.nb-theme-default nb-layout.window-mode nb-layout.with-scroll .scrollable-container{height:calc(100vh - calc(4.75rem * 0.25))}}@media screen and (min-width: 2070px){.nb-theme-default nb-layout.window-mode{padding-top:calc(4.75rem * 0.5)}.nb-theme-default nb-layout.window-mode nb-layout-header.fixed{top:calc(4.75rem * 0.5)}.nb-theme-default nb-layout.window-mode nb-layout-header.fixed~.layout-container nb-sidebar .main-container-fixed{height:calc(100vh - calc(4.75rem * 0.5) - 4.75rem);top:calc(calc(4.75rem * 0.5) + 4.75rem)}.nb-theme-default nb-layout.window-mode nb-sidebar.fixed{left:calc((100vw - 1920px)/2)}.nb-theme-default nb-layout.window-mode .layout .layout-container nb-sidebar.fixed.right{right:calc((100vw - 1920px)/2)}.nb-theme-default nb-layout.window-mode .layout .layout-container nb-sidebar.fixed{top:calc(4.75rem + calc(4.75rem * 0.5))}.nb-theme-default nb-layout.window-mode .scrollable-container{height:calc(100vh - calc(4.75rem * 0.5));box-shadow:0 .5rem 1rem 0 rgba(44,51,73,.1)}.nb-theme-default nb-layout.window-mode nb-layout.with-scroll .scrollable-container{height:calc(100vh - calc(4.75rem * 0.5))}}@media screen and (min-width: 2220px){.nb-theme-default nb-layout.window-mode{padding-top:4.75rem}.nb-theme-default nb-layout.window-mode nb-layout-header.fixed{top:4.75rem}.nb-theme-default nb-layout.window-mode nb-layout-header.fixed~.layout-container nb-sidebar .main-container-fixed{height:calc(100vh - 4.75rem - 4.75rem);top:calc(4.75rem + 4.75rem)}.nb-theme-default nb-layout.window-mode nb-sidebar.fixed{left:calc((100vw - 1920px)/2)}.nb-theme-default nb-layout.window-mode .layout .layout-container nb-sidebar.fixed.right{right:calc((100vw - 1920px)/2)}.nb-theme-default nb-layout.window-mode .layout .layout-container nb-sidebar.fixed{top:calc(4.75rem + 4.75rem)}.nb-theme-default nb-layout.window-mode .scrollable-container{height:calc(100vh - 4.75rem);box-shadow:0 .5rem 1rem 0 rgba(44,51,73,.1)}.nb-theme-default nb-layout.window-mode nb-layout.with-scroll .scrollable-container{height:calc(100vh - 4.75rem)}}.nb-theme-default nb-layout .layout{background-color:#edf1f7;color:#222b45;font-family:Open Sans, sans-serif;font-size:.9375rem;font-weight:400;line-height:1.25rem;min-height:100vh}.nb-theme-default nb-layout .layout .layout-container nb-sidebar.fixed,.nb-theme-default nb-layout .layout .layout-container nb-sidebar .main-container-fixed{top:4.75rem}.nb-theme-default nb-layout .layout .layout-container .content nb-layout-footer{box-shadow:0 .5rem 1rem 0 rgba(44,51,73,.1)}.nb-theme-default nb-layout .layout .layout-container .content nb-layout-footer nav{background-color:#fff;border-top:1px solid #edf1f7;color:#222b45;font-family:Open Sans, sans-serif;font-size:.9375rem;font-weight:400;line-height:1.25rem;padding:1.25rem}.nb-theme-default nb-layout .layout .layout-container .content nb-layout-footer nav a{color:#598bff}.nb-theme-default nb-layout .layout .layout-container .content nb-layout-footer nav a:focus,.nb-theme-default nb-layout .layout .layout-container .content nb-layout-footer nav a:active,.nb-theme-default nb-layout .layout .layout-container .content nb-layout-footer nav a:hover{color:#598bff}.nb-theme-default nb-layout .layout .layout-container .content.center{width:900px;flex:0 100 900px !important}.nb-theme-default nb-layout .layout .layout-container .content .columns nb-layout-column{padding:2.25rem 2.25rem .75rem}@media(max-width: 991.98px){.nb-theme-default nb-layout .layout .layout-container .content .columns nb-layout-column{padding:1.5rem 1.5rem .5rem}}@media(max-width: 767.98px){.nb-theme-default nb-layout .layout .layout-container .content .columns nb-layout-column{padding:1rem 1rem 0}}.nb-theme-default nb-layout-header{background-color:#fff;color:#222b45;font-family:Open Sans, sans-serif;font-size:.9375rem;font-weight:400;line-height:1.25rem}.nb-theme-default nb-layout-header nav{color:#222b45;box-shadow:0 .5rem 1rem 0 rgba(44,51,73,.1);height:4.75rem;padding:1.25rem}.nb-theme-default nb-layout-header nav a{color:#222b45}.nb-theme-default nb-layout-header nav a:focus,.nb-theme-default nb-layout-header nav a:active,.nb-theme-default nb-layout-header nav a:hover{color:#222b45}.nb-theme-default nb-layout-header~.layout-container{min-height:calc(100vh - 4.75rem)}.nb-theme-default nb-layout-header.fixed~.layout-container{padding-top:4.75rem;min-height:100vh}.nb-theme-default nb-layout-header.fixed~.layout-container nb-sidebar .main-container{height:calc(100vh - 4.75rem)}.nb-theme-default nb-layout.with-subheader nb-sidebar .main-container{box-shadow:none}.nb-theme-default nb-sidebar{background-color:#fff;box-shadow:0 .5rem 1rem 0 rgba(44,51,73,.1);color:#222b45;font-family:Open Sans, sans-serif;font-size:.9375rem;font-weight:400;line-height:1.25rem;width:16rem}.nb-theme-default nb-sidebar .main-container{height:100vh;width:16rem}.nb-theme-default nb-sidebar .scrollable{padding:1.25rem;position:relative;-webkit-transform:translate3d(0, 0, 0);scrollbar-face-color:#e4e9f2;scrollbar-track-color:#f7f9fc}@media(max-width: 767.98px){.nb-theme-default nb-sidebar .scrollable{overflow-y:scroll;-webkit-overflow-scrolling:touch}}.nb-theme-default nb-sidebar .scrollable::-webkit-scrollbar{width:.3125rem;height:.3125rem}.nb-theme-default nb-sidebar .scrollable::-webkit-scrollbar-thumb{background:#e4e9f2;cursor:pointer;border-radius:calc(0.3125rem * 0.5)}.nb-theme-default nb-sidebar .scrollable::-webkit-scrollbar-track{background:#f7f9fc}.nb-theme-default nb-sidebar .scrollable::-webkit-scrollbar-corner{background:#f7f9fc}.nb-theme-default nb-sidebar.collapsed{width:0;padding:0}.nb-theme-default nb-sidebar.collapsed .main-container{width:0;padding:0}.nb-theme-default nb-sidebar.collapsed .scrollable{width:0;padding:0;overflow:hidden}.nb-theme-default nb-sidebar.collapsed nb-sidebar-header,.nb-theme-default nb-sidebar.collapsed nb-sidebar-footer{width:0;padding:0;overflow:hidden}.nb-theme-default nb-sidebar.compacted{width:3.5rem}.nb-theme-default nb-sidebar.compacted .main-container{width:3.5rem}.nb-theme-default nb-sidebar.compacted nb-menu{width:3.5rem}.nb-theme-default nb-sidebar.compacted nb-menu .menu-item a.active{position:relative}.nb-theme-default nb-sidebar.compacted nb-menu .menu-item a.active::before{position:absolute;content:"";top:0;height:100%;width:4px;background:#36f}[dir=ltr] .nb-theme-default nb-sidebar.compacted nb-menu .menu-item a.active::before{left:0}[dir=rtl] .nb-theme-default nb-sidebar.compacted nb-menu .menu-item a.active::before{right:0}.nb-theme-default nb-sidebar.compacted nb-menu>.menu-items>.menu-item>a span,.nb-theme-default nb-sidebar.compacted nb-menu>.menu-items>.menu-item>a nb-badge,.nb-theme-default nb-sidebar.compacted nb-menu>.menu-items>.menu-item>a .expand-state{display:none}.nb-theme-default nb-sidebar.compacted nb-menu .menu-items>.menu-item{transition:border-color 1s ease}.nb-theme-default nb-sidebar.compacted nb-menu .menu-items>.menu-item.menu-group{display:block;color:rgba(0,0,0,0);width:0;padding:0;overflow:hidden}.nb-theme-default nb-sidebar.compacted nb-menu .menu-items>.menu-item i{margin-right:0}.nb-theme-default nb-sidebar.compacted nb-menu .menu-items>.menu-item a{justify-content:center}.nb-theme-default nb-sidebar.compacted nb-menu .menu-items>.menu-item>.expanded{display:none}.nb-theme-default nb-sidebar.compacted.left.fixed~.content{margin-left:3.5rem}.nb-theme-default nb-sidebar.compacted.fixed.right~.content{margin-left:0;margin-right:3.5rem}.nb-theme-default nb-sidebar.compacted.left.fixed~.content.center{padding-left:3.5rem}.nb-theme-default nb-sidebar.compacted.fixed.right~.content.center{padding-left:0;padding-right:3.5rem}[dir=ltr] .nb-theme-default nb-sidebar.compacted.start.fixed~.content{margin-left:3.5rem}[dir=rtl] .nb-theme-default nb-sidebar.compacted.start.fixed~.content{margin-right:3.5rem}[dir=ltr] .nb-theme-default nb-sidebar.compacted.fixed.end~.content{margin-right:3.5rem}[dir=rtl] .nb-theme-default nb-sidebar.compacted.fixed.end~.content{margin-left:3.5rem}[dir=ltr] .nb-theme-default nb-sidebar.compacted.start.fixed~.content.center{padding-left:3.5rem}[dir=rtl] .nb-theme-default nb-sidebar.compacted.start.fixed~.content.center{padding-right:3.5rem}[dir=ltr] .nb-theme-default nb-sidebar.compacted.fixed.end~.content.center{padding-right:3.5rem}[dir=rtl] .nb-theme-default nb-sidebar.compacted.fixed.end~.content.center{padding-left:3.5rem}.nb-theme-default nb-sidebar.fixed.left.collapsed+.content,.nb-theme-default nb-sidebar.fixed.start.collapsed+.content{margin-left:0}.nb-theme-default nb-sidebar.fixed.right.collapsed+.content,.nb-theme-default nb-sidebar.fixed.end.collapsed+.content{margin-right:0}.nb-theme-default nb-sidebar.expanded{width:16rem}.nb-theme-default nb-sidebar.expanded>.scrollable{width:16rem}.nb-theme-default nb-sidebar nb-sidebar-header{padding:1.25rem;height:3.5rem}.nb-theme-default nb-sidebar nb-sidebar-footer{padding:1.25rem;height:3.5rem}.nb-theme-default nb-sidebar nb-menu{margin:0 calc(1.25rem * -1) calc(1.25rem * -1)}.nb-theme-default nb-calendar-view-mode [nbButton].appearance-ghost.status-basic,.nb-theme-default nb-calendar-view-mode .appearance-ghost.status-basic[nbButtonToggle],.nb-theme-default nb-calendar-view-mode [nbButton].appearance-ghost.status-basic:hover,.nb-theme-default nb-calendar-view-mode [nbButton].appearance-ghost.status-basic:focus,.nb-theme-default nb-calendar-view-mode [nbButton].appearance-ghost.status-basic:active,.nb-theme-default nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic,.nb-theme-default nb-calendar-pageable-navigation .appearance-ghost.status-basic[nbButtonToggle],.nb-theme-default nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic:hover,.nb-theme-default nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic:focus,.nb-theme-default nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic:active{color:#222b45;font-family:Open Sans, sans-serif;font-size:.875rem;font-weight:700;line-height:1rem}.nb-theme-default nb-calendar-view-mode [nbButton].appearance-ghost.status-basic:focus,.nb-theme-default nb-calendar-view-mode .appearance-ghost.status-basic[nbButtonToggle]:focus,.nb-theme-default nb-calendar-view-mode [nbButton].appearance-ghost.status-basic:focus:not(:hover):not(:active),.nb-theme-default nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic:focus,.nb-theme-default nb-calendar-pageable-navigation .appearance-ghost.status-basic[nbButtonToggle]:focus,.nb-theme-default nb-calendar-pageable-navigation [nbButton].appearance-ghost.status-basic:focus:not(:hover):not(:active){box-shadow:none}[dir=ltr] .nb-theme-default nb-calendar-pageable-navigation{margin-left:auto}[dir=rtl] .nb-theme-default nb-calendar-pageable-navigation{margin-right:auto}.nb-theme-default nb-calendar-picker{display:block;padding-top:.25rem;padding-bottom:.625rem}[dir=ltr] .nb-theme-default nb-calendar-picker{padding-right:.625rem;padding-left:.625rem}[dir=rtl] .nb-theme-default nb-calendar-picker{padding-right:.625rem;padding-left:.625rem}.nb-theme-default nb-calendar-days-names{background:rgba(0,0,0,0);border-top:1px solid #edf1f7;border-bottom:1px solid #edf1f7}[dir=ltr] .nb-theme-default nb-calendar-days-names{padding-left:.625rem;padding-right:.625rem}[dir=rtl] .nb-theme-default nb-calendar-days-names{padding-left:.625rem;padding-right:.625rem}.nb-theme-default nb-calendar-days-names .day{width:2.75rem;height:2.75rem;color:#8f9bb3;font-size:.9375rem;font-weight:600;line-height:1.5rem}.nb-theme-default nb-calendar-days-names .day.holiday{color:#8f9bb3}.nb-theme-default nb-calendar-days-names.size-large .day{width:3rem;height:3rem}.nb-theme-default nb-calendar-week-numbers{background:rgba(0,0,0,0);font-size:.9375rem;font-weight:600;line-height:1.5rem;color:#8f9bb3;padding-bottom:.625rem}.nb-theme-default nb-calendar-week-numbers .sign-container{display:flex;flex-direction:column;border-top:1px solid #edf1f7;border-bottom:1px solid #edf1f7;margin-bottom:.25rem}.nb-theme-default nb-calendar-week-numbers .sign,.nb-theme-default nb-calendar-week-numbers .week-number{display:flex;align-items:center;justify-content:center;height:2.75rem;width:2.75rem}.nb-theme-default nb-calendar-week-numbers.size-large .sign,.nb-theme-default nb-calendar-week-numbers.size-large .week-number{height:3rem;width:3rem}[dir=ltr] .nb-theme-default nb-calendar-day-picker nb-calendar-week-numbers{border-right:1px solid #edf1f7}[dir=rtl] .nb-theme-default nb-calendar-day-picker nb-calendar-week-numbers{border-left:1px solid #edf1f7}.nb-theme-default nb-calendar-picker .day-cell{width:2.75rem;height:2.75rem}.nb-theme-default nb-calendar-picker .day-cell.size-large{width:3rem;height:3rem}.nb-theme-default nb-calendar-picker .month-cell{width:4.8125rem;height:2.75rem}.nb-theme-default nb-calendar-picker .month-cell.size-large{width:5.25rem;height:3rem}.nb-theme-default nb-calendar-picker .year-cell{width:4.8125rem;height:2.75rem}.nb-theme-default nb-calendar-picker .year-cell.size-large{width:5.25rem;height:3rem}.nb-theme-default nb-calendar-picker .cell-content{display:flex;justify-content:center;align-items:center;height:100%;width:100%;border-radius:.25rem}.nb-theme-default nb-calendar-picker .day-cell,.nb-theme-default nb-calendar-picker .month-cell,.nb-theme-default nb-calendar-picker .year-cell{display:flex;align-items:center;justify-content:center;font-family:Open Sans, sans-serif;font-size:.9375rem;font-weight:600;line-height:1.5rem;color:#222b45;text-transform:uppercase;cursor:pointer}.nb-theme-default nb-calendar-picker .day-cell,.nb-theme-default nb-calendar-picker .day-cell .cell-content,.nb-theme-default nb-calendar-picker .month-cell,.nb-theme-default nb-calendar-picker .month-cell .cell-content,.nb-theme-default nb-calendar-picker .year-cell,.nb-theme-default nb-calendar-picker .year-cell .cell-content{transition-duration:.15s;transition-property:background-color,border-color,color;transition-timing-function:ease-in}.nb-theme-default nb-calendar-picker .day-cell.empty,.nb-theme-default nb-calendar-picker .day-cell.disabled,.nb-theme-default nb-calendar-picker .month-cell.empty,.nb-theme-default nb-calendar-picker .month-cell.disabled,.nb-theme-default nb-calendar-picker .year-cell.empty,.nb-theme-default nb-calendar-picker .year-cell.disabled{cursor:default}.nb-theme-default nb-calendar-picker .day-cell.bounding-month,.nb-theme-default nb-calendar-picker .month-cell.bounding-month,.nb-theme-default nb-calendar-picker .year-cell.bounding-month{color:#8f9bb3}.nb-theme-default nb-calendar-picker .day-cell:not(.disabled):not(.empty):hover .cell-content,.nb-theme-default nb-calendar-picker .month-cell:not(.disabled):not(.empty):hover .cell-content,.nb-theme-default nb-calendar-picker .year-cell:not(.disabled):not(.empty):hover .cell-content{background-color:#f7f9fc;border-color:#f7f9fc;color:#222b45;font-size:.9375rem;font-weight:600;line-height:1.5rem}.nb-theme-default nb-calendar-picker .day-cell:not(.disabled):not(.empty):active .cell-content,.nb-theme-default nb-calendar-picker .month-cell:not(.disabled):not(.empty):active .cell-content,.nb-theme-default nb-calendar-picker .year-cell:not(.disabled):not(.empty):active .cell-content{background-color:#274bdb;border-color:#274bdb;color:#fff;font-size:.9375rem;font-weight:600;line-height:1.5rem}.nb-theme-default nb-calendar-picker .day-cell:not(.disabled):not(.empty).today .cell-content,.nb-theme-default nb-calendar-picker .month-cell:not(.disabled):not(.empty).today .cell-content,.nb-theme-default nb-calendar-picker .year-cell:not(.disabled):not(.empty).today .cell-content{background-color:rgba(51,102,255,.08);border:1px solid #36f;color:#222b45;font-size:.9375rem;font-weight:600;line-height:1.5rem}.nb-theme-default nb-calendar-picker .day-cell:not(.disabled):not(.empty).today .cell-content:hover,.nb-theme-default nb-calendar-picker .month-cell:not(.disabled):not(.empty).today .cell-content:hover,.nb-theme-default nb-calendar-picker .year-cell:not(.disabled):not(.empty).today .cell-content:hover{background-color:rgba(51,102,255,.16);border-color:#36f}.nb-theme-default nb-calendar-picker .day-cell:not(.disabled):not(.empty).today .cell-content:active,.nb-theme-default nb-calendar-picker .month-cell:not(.disabled):not(.empty).today .cell-content:active,.nb-theme-default nb-calendar-picker .year-cell:not(.disabled):not(.empty).today .cell-content:active{background-color:rgba(51,102,255,.24);border-color:#36f}.nb-theme-default nb-calendar-picker .day-cell:not(.disabled):not(.empty).selected .cell-content,.nb-theme-default nb-calendar-picker .month-cell:not(.disabled):not(.empty).selected .cell-content,.nb-theme-default nb-calendar-picker .year-cell:not(.disabled):not(.empty).selected .cell-content{background-color:#36f;border-color:#36f;color:#fff;font-size:.9375rem;font-weight:600;line-height:1.5rem}.nb-theme-default nb-calendar-picker .day-cell:not(.disabled):not(.empty).selected .cell-content:hover,.nb-theme-default nb-calendar-picker .month-cell:not(.disabled):not(.empty).selected .cell-content:hover,.nb-theme-default nb-calendar-picker .year-cell:not(.disabled):not(.empty).selected .cell-content:hover{background-color:#598bff;border-color:#598bff}.nb-theme-default nb-calendar-picker .day-cell:not(.disabled):not(.empty).selected .cell-content:active,.nb-theme-default nb-calendar-picker .month-cell:not(.disabled):not(.empty).selected .cell-content:active,.nb-theme-default nb-calendar-picker .year-cell:not(.disabled):not(.empty).selected .cell-content:active{background-color:#274bdb;border-color:#274bdb}.nb-theme-default nb-calendar-picker .day-cell:not(.disabled):not(.empty).today.selected,.nb-theme-default nb-calendar-picker .month-cell:not(.disabled):not(.empty).today.selected,.nb-theme-default nb-calendar-picker .year-cell:not(.disabled):not(.empty).today.selected{background-color:#36f;border-radius:.25rem}.nb-theme-default nb-calendar-picker .day-cell:not(.disabled):not(.empty).today.selected .cell-content,.nb-theme-default nb-calendar-picker .month-cell:not(.disabled):not(.empty).today.selected .cell-content,.nb-theme-default nb-calendar-picker .year-cell:not(.disabled):not(.empty).today.selected .cell-content{background-color:rgba(255,255,255,.08);border-color:rgba(0,0,0,0);color:#fff}.nb-theme-default nb-calendar-picker .day-cell:not(.disabled):not(.empty).today.selected .cell-content:hover,.nb-theme-default nb-calendar-picker .month-cell:not(.disabled):not(.empty).today.selected .cell-content:hover,.nb-theme-default nb-calendar-picker .year-cell:not(.disabled):not(.empty).today.selected .cell-content:hover{background-color:rgba(255,255,255,.16);border-color:rgba(0,0,0,0)}.nb-theme-default nb-calendar-picker .day-cell:not(.disabled):not(.empty).today.selected .cell-content:focus,.nb-theme-default nb-calendar-picker .month-cell:not(.disabled):not(.empty).today.selected .cell-content:focus,.nb-theme-default nb-calendar-picker .year-cell:not(.disabled):not(.empty).today.selected .cell-content:focus{background-color:rgba(255,255,255,.24);border-color:rgba(0,0,0,0)}.nb-theme-default nb-calendar-picker .day-cell.disabled,.nb-theme-default nb-calendar-picker .month-cell.disabled,.nb-theme-default nb-calendar-picker .year-cell.disabled{color:rgba(143,155,179,.48)}.nb-theme-default nb-calendar-picker .day-cell.disabled.today .cell-content,.nb-theme-default nb-calendar-picker .month-cell.disabled.today .cell-content,.nb-theme-default nb-calendar-picker .year-cell.disabled.today .cell-content{border:1px solid #e4e9f2}.nb-theme-default nb-calendar-picker .range-cell.in-range.selected:not(.disabled):not(.empty){background-color:#36f;border-radius:0}[dir=ltr] .nb-theme-default nb-calendar-picker .range-cell.in-range.selected:not(.disabled):not(.empty).start{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}[dir=rtl] .nb-theme-default nb-calendar-picker .range-cell.in-range.selected:not(.disabled):not(.empty).start{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}[dir=ltr] .nb-theme-default nb-calendar-picker .range-cell.in-range.selected:not(.disabled):not(.empty).end{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}[dir=rtl] .nb-theme-default nb-calendar-picker .range-cell.in-range.selected:not(.disabled):not(.empty).end{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.nb-theme-default nb-base-calendar nb-card{background-color:#fff;border:.0625rem solid #e4e9f2;box-shadow:none;margin:0;width:20.625rem;overflow:hidden}.nb-theme-default nb-base-calendar nb-card-body{padding:0}.nb-theme-default nb-base-calendar .calendar-navigation{border:none;display:flex;padding:.625rem .25rem;color:#222b45;font-family:Open Sans, sans-serif;font-size:.875rem;font-weight:700;line-height:1rem}.nb-theme-default nb-base-calendar:not(.has-navigation) nb-calendar-week-numbers .sign-container,.nb-theme-default nb-base-calendar:not(.has-navigation) nb-calendar-days-names{border-top:0}.nb-theme-default nb-base-calendar.has-week-number nb-card{width:calc(20.625rem + 2.75rem + 1px)}.nb-theme-default nb-base-calendar.has-week-number .month-cell,.nb-theme-default nb-base-calendar.has-week-number .year-cell{flex:1 0 auto}.nb-theme-default nb-base-calendar.size-large nb-card{width:22.375rem}.nb-theme-default nb-base-calendar.size-large.has-week-number nb-card{width:calc(22.375rem + 3rem + 1px)}.nb-theme-default nb-card{background-color:#fff;border:.0625rem solid #e4e9f2;border-radius:.25rem;box-shadow:none;color:#222b45;font-family:Open Sans, sans-serif;font-size:.9375rem;font-weight:400;line-height:1.25rem;margin-bottom:1.875rem;scrollbar-face-color:#e4e9f2;scrollbar-track-color:#f7f9fc}.nb-theme-default nb-card::-webkit-scrollbar{width:.3125rem;height:.3125rem}.nb-theme-default nb-card::-webkit-scrollbar-thumb{background:#e4e9f2;cursor:pointer;border-radius:calc(0.3125rem * 0.5)}.nb-theme-default nb-card::-webkit-scrollbar-track{background:#f7f9fc}.nb-theme-default nb-card::-webkit-scrollbar-corner{background:#f7f9fc}.nb-theme-default nb-card.size-tiny{height:13.5rem}.nb-theme-default nb-card.size-small{height:21.1875rem}.nb-theme-default nb-card.size-medium{height:28.875rem}.nb-theme-default nb-card.size-large{height:36.5625rem}.nb-theme-default nb-card.size-giant{height:44.25rem}.nb-theme-default nb-card.status-basic nb-card-header{background-color:#f7f9fc;border-bottom-width:0;border-bottom-color:#f7f9fc;color:#222b45}.nb-theme-default nb-card.status-basic nb-card-header a,.nb-theme-default nb-card.status-basic nb-card-header a:hover{color:#222b45}.nb-theme-default nb-card.status-primary nb-card-header{background-color:#36f;border-bottom-width:0;border-bottom-color:#36f;color:#fff}.nb-theme-default nb-card.status-primary nb-card-header a,.nb-theme-default nb-card.status-primary nb-card-header a:hover{color:#fff}.nb-theme-default nb-card.status-success nb-card-header{background-color:#00d68f;border-bottom-width:0;border-bottom-color:#00d68f;color:#fff}.nb-theme-default nb-card.status-success nb-card-header a,.nb-theme-default nb-card.status-success nb-card-header a:hover{color:#fff}.nb-theme-default nb-card.status-warning nb-card-header{background-color:#fa0;border-bottom-width:0;border-bottom-color:#fa0;color:#fff}.nb-theme-default nb-card.status-warning nb-card-header a,.nb-theme-default nb-card.status-warning nb-card-header a:hover{color:#fff}.nb-theme-default nb-card.status-danger nb-card-header{background-color:#ff3d71;border-bottom-width:0;border-bottom-color:#ff3d71;color:#fff}.nb-theme-default nb-card.status-danger nb-card-header a,.nb-theme-default nb-card.status-danger nb-card-header a:hover{color:#fff}.nb-theme-default nb-card.status-info nb-card-header{background-color:#0095ff;border-bottom-width:0;border-bottom-color:#0095ff;color:#fff}.nb-theme-default nb-card.status-info nb-card-header a,.nb-theme-default nb-card.status-info nb-card-header a:hover{color:#fff}.nb-theme-default nb-card.status-control nb-card-header{background-color:#fff;border-bottom-width:0;border-bottom-color:#fff;color:#222b45}.nb-theme-default nb-card.status-control nb-card-header a,.nb-theme-default nb-card.status-control nb-card-header a:hover{color:#222b45}.nb-theme-default nb-card.accent-basic{border-top-color:#f7f9fc}.nb-theme-default nb-card.accent-primary{border-top-color:#36f}.nb-theme-default nb-card.accent-success{border-top-color:#00d68f}.nb-theme-default nb-card.accent-warning{border-top-color:#fa0}.nb-theme-default nb-card.accent-danger{border-top-color:#ff3d71}.nb-theme-default nb-card.accent-info{border-top-color:#0095ff}.nb-theme-default nb-card.accent-control{border-top-color:#fff}.nb-theme-default nb-card.accent{border-top-style:solid;border-top-width:.25rem}.nb-theme-default nb-card.accent nb-card-header{border-radius:0}.nb-theme-default nb-card-body{flex:1;-ms-flex:1 1 auto;overflow:auto;padding:1rem 1.5rem;position:relative;scrollbar-face-color:#e4e9f2;scrollbar-track-color:#f7f9fc}.nb-theme-default nb-card-body::-webkit-scrollbar{width:.3125rem;height:.3125rem}.nb-theme-default nb-card-body::-webkit-scrollbar-thumb{background:#e4e9f2;cursor:pointer;border-radius:calc(0.3125rem * 0.5)}.nb-theme-default nb-card-body::-webkit-scrollbar-track{background:#f7f9fc}.nb-theme-default nb-card-body::-webkit-scrollbar-corner{background:#f7f9fc}.nb-theme-default nb-card-footer{padding:1rem 1.5rem;border-top:1px solid #edf1f7;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.nb-theme-default nb-card-header{padding:1rem 1.5rem;border-bottom:1px solid #edf1f7;border-top-left-radius:.25rem;border-top-right-radius:.25rem;color:#222b45;font-family:Open Sans, sans-serif;font-size:.9375rem;font-weight:600;line-height:1.5rem}.nb-theme-default nb-card-header h1{margin:0}.nb-theme-default nb-card-header h2{margin:0}.nb-theme-default nb-card-header h3{margin:0}.nb-theme-default nb-card-header h4{margin:0}.nb-theme-default nb-card-header h5{margin:0}.nb-theme-default nb-card-header h6{margin:0}.nb-theme-default nb-reveal-card{box-shadow:none;margin-bottom:1.875rem}.nb-theme-default .second-card-container{height:100%;border-radius:.25rem}.nb-theme-default .reveal-button{line-height:1.25rem;padding:1rem 1.5rem}.nb-theme-default .flip-button{line-height:1.25rem;margin-bottom:1.875rem;padding:1rem 1.5rem}[dir=ltr] .nb-theme-default .flipcard-body .front-container{margin-right:-100%}[dir=rtl] .nb-theme-default .flipcard-body .front-container{margin-left:-100%}.nb-theme-default nb-tabset{background-color:rgba(0,0,0,0);border-radius:0;box-shadow:none}.nb-theme-default nb-tabset .tabset{border-bottom:1px solid #edf1f7}.nb-theme-default nb-tabset .tab-link{background-color:rgba(0,0,0,0);cursor:pointer;padding:1rem 2rem;color:#8f9bb3;font-family:Open Sans, sans-serif;font-size:.875rem;font-weight:700;line-height:1rem;text-transform:uppercase}.nb-theme-default nb-tabset .tab-link::before{background-color:rgba(0,0,0,0);height:.25rem}.nb-theme-default nb-tabset nb-badge.dot-mode.position-left{left:.75rem}.nb-theme-default nb-tabset nb-badge.dot-mode.position-right{right:.75rem}[dir=ltr] .nb-theme-default nb-tabset nb-badge.dot-mode.position-start{left:.75rem}[dir=rtl] .nb-theme-default nb-tabset nb-badge.dot-mode.position-start{right:.75rem}[dir=ltr] .nb-theme-default nb-tabset nb-badge.dot-mode.position-end{right:.75rem}[dir=rtl] .nb-theme-default nb-tabset nb-badge.dot-mode.position-end{left:.75rem}.nb-theme-default nb-tabset .tab.active .tab-link{background-color:rgba(0,0,0,0);color:#36f}.nb-theme-default nb-tabset .tab.active .tab-link::before{background-color:#36f}.nb-theme-default nb-tabset .tab:focus .tab-link{background-color:rgba(0,0,0,0);color:#274bdb}.nb-theme-default nb-tabset .tab:focus .tab-link::before{background-color:#274bdb}.nb-theme-default nb-tabset .tab:hover .tab-link{color:#598bff;background-color:rgba(0,0,0,0)}.nb-theme-default nb-tabset .tab:hover .tab-link::before{background-color:#598bff}.nb-theme-default nb-tabset .tab.disabled{cursor:default;pointer-events:none}.nb-theme-default nb-tabset .tab.disabled .tab-link{background-color:rgba(0,0,0,0);color:rgba(143,155,179,.48);cursor:default;pointer-events:none}.nb-theme-default nb-tabset .tab.disabled .tab-link::before{background-color:rgba(0,0,0,0)}@media screen and (max-width: 36rem){.nb-theme-default nb-tabset .tab.responsive .tab-text{display:none}}.nb-theme-default nb-tabset nb-tab{background-color:rgba(0,0,0,0);color:#222b45;font-family:Open Sans, sans-serif;font-size:.9375rem;font-weight:400;line-height:1.25rem;padding:1rem 2rem;scrollbar-face-color:#e4e9f2;scrollbar-track-color:#f7f9fc}.nb-theme-default nb-tabset nb-tab::-webkit-scrollbar{width:.3125rem;height:.3125rem}.nb-theme-default nb-tabset nb-tab::-webkit-scrollbar-thumb{background:#e4e9f2;cursor:pointer;border-radius:calc(0.3125rem * 0.5)}.nb-theme-default nb-tabset nb-tab::-webkit-scrollbar-track{background:#f7f9fc}.nb-theme-default nb-tabset nb-tab::-webkit-scrollbar-corner{background:#f7f9fc}.nb-theme-default nb-route-tabset{scrollbar-face-color:#e4e9f2;scrollbar-track-color:#f7f9fc;background-color:rgba(0,0,0,0);border-radius:0;box-shadow:none}.nb-theme-default nb-route-tabset::-webkit-scrollbar{width:.3125rem;height:.3125rem}.nb-theme-default nb-route-tabset::-webkit-scrollbar-thumb{background:#e4e9f2;cursor:pointer;border-radius:calc(0.3125rem * 0.5)}.nb-theme-default nb-route-tabset::-webkit-scrollbar-track{background:#f7f9fc}.nb-theme-default nb-route-tabset::-webkit-scrollbar-corner{background:#f7f9fc}.nb-theme-default nb-route-tabset .route-tabset{border-bottom:1px solid #edf1f7}.nb-theme-default nb-route-tabset .tab-link{background-color:rgba(0,0,0,0);cursor:pointer;padding:1rem 2rem;color:#8f9bb3;font-family:Open Sans, sans-serif;font-size:.875rem;font-weight:700;line-height:1rem;text-transform:uppercase}.nb-theme-default nb-route-tabset .tab-link::before{background-color:rgba(0,0,0,0);height:.25rem}.nb-theme-default nb-route-tabset .route-tab.active .tab-link{background-color:rgba(0,0,0,0);color:#36f}.nb-theme-default nb-route-tabset .route-tab.active .tab-link::before{background-color:#36f}.nb-theme-default nb-route-tabset .tab-link:focus{background-color:rgba(0,0,0,0);color:#274bdb}.nb-theme-default nb-route-tabset .tab-link:focus::before{background-color:#274bdb}.nb-theme-default nb-route-tabset .tab-link:hover{background-color:rgba(0,0,0,0);color:#598bff}.nb-theme-default nb-route-tabset .tab-link:hover::before{background-color:#598bff}.nb-theme-default nb-route-tabset .route-tab.disabled{cursor:default;pointer-events:none}.nb-theme-default nb-route-tabset .route-tab.disabled .tab-link{background-color:rgba(0,0,0,0);color:rgba(143,155,179,.48);cursor:default;pointer-events:none}.nb-theme-default nb-route-tabset .route-tab.disabled .tab-link::before{background-color:rgba(0,0,0,0)}@media screen and (max-width: 36rem){.nb-theme-default nb-route-tabset .route-tab.responsive .tab-text{display:none}}.nb-theme-default nb-menu{background-color:rgba(0,0,0,0)}.nb-theme-default nb-menu ul.menu-items{margin:0;padding:0}.nb-theme-default nb-menu .menu-group,.nb-theme-default nb-menu .menu-item a{font-family:Open Sans, sans-serif;font-size:.8125rem;font-weight:600;line-height:1.5rem;padding:.75rem 1rem}.nb-theme-default nb-menu .menu-group,.nb-theme-default nb-menu .menu-group nb-icon.menu-icon{color:#8f9bb3}.nb-theme-default nb-menu .menu-item a{color:#222b45;border-radius:0}.nb-theme-default nb-menu .menu-item a.active{background-color:rgba(0,0,0,0);color:#36f}.nb-theme-default nb-menu .menu-item a.active .menu-icon{color:#36f}.nb-theme-default nb-menu .menu-item a:hover{background-color:rgba(0,0,0,0);color:#598bff;cursor:pointer}.nb-theme-default nb-menu .menu-item a:hover .menu-icon{color:#598bff}.nb-theme-default nb-menu .menu-item .menu-icon{color:#8f9bb3;font-size:1.25rem;margin:0 .5rem 0 0;width:1em;text-align:center}.nb-theme-default nb-menu .menu-item .expand-state{color:#8f9bb3}.nb-theme-default nb-menu .menu-item{border-bottom:1px solid #edf1f7}.nb-theme-default nb-menu .menu-item:first-child{border-top:none}.nb-theme-default nb-menu .menu-item:last-child{border-bottom:none}.nb-theme-default nb-menu .menu-item .menu-item:first-child{border-top:1px solid #edf1f7}.nb-theme-default nb-menu .menu-item>.menu-items{background-color:rgba(0,0,0,0);margin:0;padding:0 1.25rem}.nb-theme-default nb-menu .menu-item>.menu-items>.menu-item{background:rgba(0,0,0,0);color:#222b45}.nb-theme-default nb-menu .menu-item>.menu-items>.menu-item a{border-color:rgba(0,0,0,0);border-style:solid;border-width:0;padding:.75rem 1rem}.nb-theme-default nb-menu .menu-item>.menu-items>.menu-item a.active{background-color:rgba(0,0,0,0);border-color:#36f;color:#36f}.nb-theme-default nb-menu .menu-item>.menu-items>.menu-item a.active .menu-icon{color:#36f}.nb-theme-default nb-menu .menu-item>.menu-items>.menu-item a:hover{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0);color:#598bff}.nb-theme-default nb-menu .menu-item>.menu-items>.menu-item a:hover .menu-icon{color:#598bff}.nb-theme-default nb-menu .menu-item>.menu-items>.menu-item a.active:hover{background-color:rgba(0,0,0,0);border-color:#598bff;color:#598bff}.nb-theme-default nb-menu .menu-item>.menu-items>.menu-item a.active:hover .menu-icon{color:#598bff}.nb-theme-default nb-menu .menu-item>.menu-items>.menu-group,.nb-theme-default nb-menu .menu-item>.menu-items>.menu-group nb-icon.menu-icon{color:#8f9bb3}.nb-theme-default nb-user .user-picture{background-color:rgba(0,0,0,0);border:1px solid #edf1f7}.nb-theme-default nb-user .initials{color:#222b45;font-family:Open Sans, sans-serif;font-weight:400}.nb-theme-default nb-user .user-name{color:#222b45;font-family:Open Sans, sans-serif;font-weight:400}.nb-theme-default nb-user .user-title{color:#222b45;font-family:Open Sans, sans-serif;font-weight:400}.nb-theme-default nb-user.size-tiny .user-picture{height:1.25rem;width:1.25rem}.nb-theme-default nb-user.size-tiny .initials{font-size:.75rem;line-height:1rem}.nb-theme-default nb-user.size-tiny .user-name{font-size:.75rem;line-height:1rem}.nb-theme-default nb-user.size-tiny .user-title{font-size:.75rem;line-height:1rem}.nb-theme-default nb-user.size-small .user-picture{height:1.5rem;width:1.5rem}.nb-theme-default nb-user.size-small .initials{font-size:.75rem;line-height:1rem}.nb-theme-default nb-user.size-small .user-name{font-size:.75rem;line-height:1rem}.nb-theme-default nb-user.size-small .user-title{font-size:.75rem;line-height:1rem}.nb-theme-default nb-user.size-medium .user-picture{height:2.5rem;width:2.5rem}.nb-theme-default nb-user.size-medium .initials{font-size:.9375rem;line-height:1.25rem}.nb-theme-default nb-user.size-medium .user-name{font-size:.9375rem;line-height:1.25rem}.nb-theme-default nb-user.size-medium .user-title{font-size:.75rem;line-height:1rem}.nb-theme-default nb-user.size-large .user-picture{height:3.25rem;width:3.25rem}.nb-theme-default nb-user.size-large .initials{font-size:.9375rem;line-height:1.25rem}.nb-theme-default nb-user.size-large .user-name{font-size:.9375rem;line-height:1.25rem}.nb-theme-default nb-user.size-large .user-title{font-size:.8125rem;line-height:1.125rem}.nb-theme-default nb-user.size-giant .user-picture{height:4rem;width:4rem}.nb-theme-default nb-user.size-giant .initials{font-size:.9375rem;line-height:1.25rem}.nb-theme-default nb-user.size-giant .user-name{font-size:.9375rem;line-height:1.25rem}.nb-theme-default nb-user.size-giant .user-title{font-size:.9375rem;line-height:1.25rem}.nb-theme-default nb-user.shape-rectangle .user-picture{border-radius:.5rem}.nb-theme-default nb-user.shape-semi-round .user-picture{border-radius:.75rem}.nb-theme-default nb-user.shape-round .user-picture{border-radius:50%}.nb-theme-default nb-actions{background-color:rgba(0,0,0,0);color:#222b45;font-family:Open Sans, sans-serif;font-weight:700;line-height:1rem}.nb-theme-default nb-actions.size-tiny nb-action{font-size:.625rem;height:1rem;padding:0 1.25rem}.nb-theme-default nb-actions.size-tiny nb-action nb-icon{font-size:1rem}.nb-theme-default nb-actions.size-small nb-action{font-size:.75rem;height:1.5rem;padding:0 1.25rem}.nb-theme-default nb-actions.size-small nb-action nb-icon{font-size:1.5rem}.nb-theme-default nb-actions.size-medium nb-action{font-size:.875rem;height:2.25rem;padding:0 1.25rem}.nb-theme-default nb-actions.size-medium nb-action nb-icon{font-size:2.25rem}.nb-theme-default nb-actions.size-large nb-action{font-size:1rem;height:3.5rem;padding:0 1.25rem}.nb-theme-default nb-actions.size-large nb-action nb-icon{font-size:3.5rem}.nb-theme-default nb-actions.size-giant nb-action{font-size:1.125rem;height:4rem;padding:0 1.25rem}.nb-theme-default nb-actions.size-giant nb-action nb-icon{font-size:4rem}[dir=ltr] .nb-theme-default nb-action{border-left:1px solid #edf1f7}[dir=rtl] .nb-theme-default nb-action{border-right:1px solid #edf1f7}[dir=ltr] .nb-theme-default nb-action:first-child{border-left:none !important}[dir=rtl] .nb-theme-default nb-action:first-child{border-right:none !important}.nb-theme-default nb-action nb-icon{color:#8f9bb3}.nb-theme-default nb-action.disabled{color:rgba(143,155,179,.48)}.nb-theme-default nb-action.disabled nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-search-field .close-button{z-index:1}.nb-theme-default nb-search-field .search{background:#fff}.nb-theme-default nb-search-field .search span.info{color:#8f9bb3;font-family:Open Sans, sans-serif;font-size:.9375rem;font-weight:600;line-height:1.5rem}.nb-theme-default nb-search-field .search input{border-bottom:1px solid #edf1f7;color:#222b45;font-family:Open Sans, sans-serif;font-size:2.25rem;font-weight:700;line-height:3rem}.nb-theme-default nb-search-field .search input::-moz-placeholder{color:#8f9bb3}.nb-theme-default nb-search-field .search input::placeholder{color:#8f9bb3}.nb-theme-default nb-search-field .search input::-ms-clear{display:none}.nb-theme-default nb-search-field.rotate-layout{opacity:0;background:#fff}.nb-theme-default nb-search-field.modal-zoomin .search::before,.nb-theme-default nb-search-field.modal-zoomin .search::after{border:1.5rem solid #36f}.nb-theme-default nb-search-field.modal-half .form-wrapper{background:#fff}.nb-theme-default nb-search-field.modal-half .search::before{background:#36f}.nb-theme-default nb-search-field.modal-drop .form-content::after{background:#edf1f7}.nb-theme-default nb-search-field.modal-drop .search::before{background:#fff}.nb-theme-default nb-search-field.curtain .search::after{background:#fff}.nb-theme-default nb-search-field.curtain .search{background:#fff}.nb-theme-default nb-search-field.column-curtain::before{background:#fff}.nb-theme-default nb-search-field.column-curtain::after{background:rgba(0,0,0,0)}.nb-theme-default nb-search-field.column-curtain.show::after{background:#36f}.nb-theme-default .nb-spinner-container{position:relative}.nb-theme-default nb-spinner .message{color:#222b45;font-family:Open Sans, sans-serif;font-size:.875rem;font-weight:700;line-height:1rem}.nb-theme-default nb-spinner.status-basic{background-color:rgba(143,155,179,.16)}.nb-theme-default nb-spinner.status-basic .spin-circle{border-top-color:#8f9bb3;border-right-color:rgba(0,0,0,0);border-bottom-color:#8f9bb3;border-left-color:#8f9bb3}.nb-theme-default nb-spinner.status-primary{background-color:rgba(143,155,179,.16)}.nb-theme-default nb-spinner.status-primary .spin-circle{border-top-color:#36f;border-right-color:rgba(0,0,0,0);border-bottom-color:#36f;border-left-color:#36f}.nb-theme-default nb-spinner.status-success{background-color:rgba(143,155,179,.16)}.nb-theme-default nb-spinner.status-success .spin-circle{border-top-color:#00d68f;border-right-color:rgba(0,0,0,0);border-bottom-color:#00d68f;border-left-color:#00d68f}.nb-theme-default nb-spinner.status-warning{background-color:rgba(143,155,179,.16)}.nb-theme-default nb-spinner.status-warning .spin-circle{border-top-color:#fa0;border-right-color:rgba(0,0,0,0);border-bottom-color:#fa0;border-left-color:#fa0}.nb-theme-default nb-spinner.status-danger{background-color:rgba(143,155,179,.16)}.nb-theme-default nb-spinner.status-danger .spin-circle{border-top-color:#ff3d71;border-right-color:rgba(0,0,0,0);border-bottom-color:#ff3d71;border-left-color:#ff3d71}.nb-theme-default nb-spinner.status-info{background-color:rgba(143,155,179,.16)}.nb-theme-default nb-spinner.status-info .spin-circle{border-top-color:#0095ff;border-right-color:rgba(0,0,0,0);border-bottom-color:#0095ff;border-left-color:#0095ff}.nb-theme-default nb-spinner.status-control{background-color:rgba(255,255,255,.16)}.nb-theme-default nb-spinner.status-control .spin-circle{border-top-color:#fff;border-right-color:rgba(0,0,0,0);border-bottom-color:#fff;border-left-color:#fff}.nb-theme-default nb-spinner.size-tiny{font-size:1rem}.nb-theme-default nb-spinner.size-small{font-size:1.25rem}.nb-theme-default nb-spinner.size-medium{font-size:1.5rem}.nb-theme-default nb-spinner.size-large{font-size:1.75rem}.nb-theme-default nb-spinner.size-giant{font-size:2rem}@keyframes spin{0%{transform:rotate(0deg)}40%{transform:rotate(230deg)}100%{transform:rotate(360deg)}}.nb-theme-default .nb-timepicker-container{width:20rem;height:26.1875rem}.nb-theme-default .nb-timepicker-container .list-item{color:#222b45;font-size:.9375rem;font-family:Open Sans, sans-serif;height:2.75rem;line-height:1.5rem;font-weight:600}.nb-theme-default .nb-timepicker-container .list-item:first-child{border-top:none}.nb-theme-default .nb-timepicker-container .list-item:hover{background-color:#f7f9fc;color:#222b45}.nb-theme-default .nb-timepicker-container .list-item:focus{background-color:#e4e9f2;color:#222b45}.nb-theme-default .nb-timepicker-container .list-item.selected{background-color:#36f;color:#fff}.nb-theme-default .nb-timepicker-container .values-list{scrollbar-face-color:#e4e9f2;scrollbar-track-color:#f7f9fc}[dir=ltr] .nb-theme-default .nb-timepicker-container .values-list:not(:last-of-type){border-right:.0625rem solid #e4e9f2}[dir=rtl] .nb-theme-default .nb-timepicker-container .values-list:not(:last-of-type){border-left:.0625rem solid #e4e9f2}.nb-theme-default .nb-timepicker-container .values-list::-webkit-scrollbar{width:.3125rem;height:.3125rem}.nb-theme-default .nb-timepicker-container .values-list::-webkit-scrollbar-thumb{background:#e4e9f2;cursor:pointer;border-radius:calc(0.3125rem * 0.5)}.nb-theme-default .nb-timepicker-container .values-list::-webkit-scrollbar-track{background:#f7f9fc}.nb-theme-default .nb-timepicker-container .values-list::-webkit-scrollbar-corner{background:#f7f9fc}[dir=ltr] .nb-theme-default .nb-timepicker-container.supports-scrollbar-theming .values-list:hover .list-item:not(.am-pm-item){margin-right:calc(0.3125rem * -1)}[dir=rtl] .nb-theme-default .nb-timepicker-container.supports-scrollbar-theming .values-list:hover .list-item:not(.am-pm-item){margin-left:calc(0.3125rem * -1)}.nb-theme-default .nb-timepicker-container .header-cell{color:#8f9bb3;font-size:.9375rem;font-family:Open Sans, sans-serif;height:2.75rem;line-height:1.5rem;font-weight:600}[dir=ltr] .nb-theme-default .nb-timepicker-container .header-cell:not(:last-child){border-right:.0625rem solid #e4e9f2}[dir=rtl] .nb-theme-default .nb-timepicker-container .header-cell:not(:last-child){border-left:.0625rem solid #e4e9f2}.nb-theme-default .nb-timepicker-container .column-header{border-bottom:.0625rem solid #e4e9f2}[dir=ltr] .nb-theme-default .nb-timepicker-container .actions-footer{padding-left:.625rem}[dir=rtl] .nb-theme-default .nb-timepicker-container .actions-footer{padding-right:.625rem}.nb-theme-default nb-checkbox .label{padding:0}.nb-theme-default nb-checkbox .custom-checkbox{width:1.25rem;height:1.25rem;border-style:solid;border-width:1px;border-radius:3px;position:relative}.nb-theme-default nb-checkbox .native-input:focus:not(:checked)+.custom-checkbox{box-shadow:0 0 0 .375rem rgba(143,155,179,.16)}.nb-theme-default nb-checkbox .native-input:focus:not(:checked)+.custom-checkbox:not(:hover):not(:active){box-shadow:0 0 0 .375rem rgba(143,155,179,.16),inset 0 0 0 100vmax rgba(143,155,179,.16)}.nb-theme-default nb-checkbox .native-input:focus:checked+.custom-checkbox{box-shadow:0 0 0 .375rem rgba(143,155,179,.16)}.nb-theme-default nb-checkbox .custom-checkbox-icon{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:50%}.nb-theme-default nb-checkbox .text{font-family:Open Sans, sans-serif;font-size:.8125rem;font-weight:600;line-height:1.5rem}[dir=ltr] .nb-theme-default nb-checkbox .text:not(:empty){padding-left:.6875rem}[dir=rtl] .nb-theme-default nb-checkbox .text:not(:empty){padding-right:.6875rem}.nb-theme-default nb-checkbox.status-basic .custom-checkbox{background-color:rgba(143,155,179,.08);border-color:#8f9bb3}.nb-theme-default nb-checkbox.status-basic .text{color:#222b45}.nb-theme-default nb-checkbox.status-basic .custom-checkbox.checked{background-color:#36f;border-color:#36f}.nb-theme-default nb-checkbox.status-basic .custom-checkbox.checked .custom-checkbox-icon{color:#fff}.nb-theme-default nb-checkbox.status-basic .custom-checkbox.indeterminate{background-color:#36f;border-color:#36f}.nb-theme-default nb-checkbox.status-basic .custom-checkbox.indeterminate .custom-checkbox-icon{color:#fff}.nb-theme-default nb-checkbox.status-basic .native-input:enabled:focus+.custom-checkbox{background-color:rgba(143,155,179,.24);border-color:#8f9bb3}.nb-theme-default nb-checkbox.status-basic .native-input:enabled:focus+.custom-checkbox.indeterminate,.nb-theme-default nb-checkbox.status-basic .native-input:enabled:focus+.custom-checkbox.checked{background-color:#274bdb;border-color:#1a34b8}.nb-theme-default nb-checkbox.status-basic .custom-checkbox:hover{background-color:rgba(51,102,255,.16);border-color:#36f}.nb-theme-default nb-checkbox.status-basic .custom-checkbox:hover.indeterminate,.nb-theme-default nb-checkbox.status-basic .custom-checkbox:hover.checked{background-color:#598bff;border-color:#598bff}.nb-theme-default nb-checkbox.status-basic .native-input:enabled:active+.custom-checkbox{background-color:rgba(143,155,179,.24);border-color:#8f9bb3}.nb-theme-default nb-checkbox.status-basic .native-input:enabled:active+.custom-checkbox.indeterminate,.nb-theme-default nb-checkbox.status-basic .native-input:enabled:active+.custom-checkbox.checked{background-color:#274bdb;border-color:#274bdb}.nb-theme-default nb-checkbox.status-basic .native-input:disabled+.custom-checkbox{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24)}.nb-theme-default nb-checkbox.status-basic .native-input:disabled+.custom-checkbox .custom-checkbox-icon{color:#fff}.nb-theme-default nb-checkbox.status-basic .native-input:disabled~.text{color:rgba(143,155,179,.48)}.nb-theme-default nb-checkbox.status-basic .native-input:disabled:indeterminate+.custom-checkbox,.nb-theme-default nb-checkbox.status-basic .native-input:disabled:checked+.custom-checkbox{background-color:rgba(143,155,179,.48);border-color:rgba(143,155,179,.48)}.nb-theme-default nb-checkbox.status-primary .custom-checkbox{background-color:rgba(51,102,255,.08);border-color:#36f}.nb-theme-default nb-checkbox.status-primary .text{color:#222b45}.nb-theme-default nb-checkbox.status-primary .custom-checkbox.checked{background-color:#36f;border-color:#36f}.nb-theme-default nb-checkbox.status-primary .custom-checkbox.checked .custom-checkbox-icon{color:#fff}.nb-theme-default nb-checkbox.status-primary .custom-checkbox.indeterminate{background-color:#36f;border-color:#36f}.nb-theme-default nb-checkbox.status-primary .custom-checkbox.indeterminate .custom-checkbox-icon{color:#fff}.nb-theme-default nb-checkbox.status-primary .native-input:enabled:focus+.custom-checkbox{background-color:rgba(51,102,255,.24);border-color:#36f}.nb-theme-default nb-checkbox.status-primary .native-input:enabled:focus+.custom-checkbox.indeterminate,.nb-theme-default nb-checkbox.status-primary .native-input:enabled:focus+.custom-checkbox.checked{background-color:#274bdb;border-color:#1a34b8}.nb-theme-default nb-checkbox.status-primary .custom-checkbox:hover{background-color:rgba(51,102,255,.16);border-color:#36f}.nb-theme-default nb-checkbox.status-primary .custom-checkbox:hover.indeterminate,.nb-theme-default nb-checkbox.status-primary .custom-checkbox:hover.checked{background-color:#598bff;border-color:#598bff}.nb-theme-default nb-checkbox.status-primary .native-input:enabled:active+.custom-checkbox{background-color:rgba(51,102,255,.24);border-color:#36f}.nb-theme-default nb-checkbox.status-primary .native-input:enabled:active+.custom-checkbox.indeterminate,.nb-theme-default nb-checkbox.status-primary .native-input:enabled:active+.custom-checkbox.checked{background-color:#274bdb;border-color:#274bdb}.nb-theme-default nb-checkbox.status-primary .native-input:disabled+.custom-checkbox{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24)}.nb-theme-default nb-checkbox.status-primary .native-input:disabled+.custom-checkbox .custom-checkbox-icon{color:#fff}.nb-theme-default nb-checkbox.status-primary .native-input:disabled~.text{color:rgba(143,155,179,.48)}.nb-theme-default nb-checkbox.status-primary .native-input:disabled:indeterminate+.custom-checkbox,.nb-theme-default nb-checkbox.status-primary .native-input:disabled:checked+.custom-checkbox{background-color:rgba(143,155,179,.48);border-color:rgba(143,155,179,.48)}.nb-theme-default nb-checkbox.status-success .custom-checkbox{background-color:rgba(0,214,143,.08);border-color:#00d68f}.nb-theme-default nb-checkbox.status-success .text{color:#222b45}.nb-theme-default nb-checkbox.status-success .custom-checkbox.checked{background-color:#00d68f;border-color:#00d68f}.nb-theme-default nb-checkbox.status-success .custom-checkbox.checked .custom-checkbox-icon{color:#fff}.nb-theme-default nb-checkbox.status-success .custom-checkbox.indeterminate{background-color:#00d68f;border-color:#00d68f}.nb-theme-default nb-checkbox.status-success .custom-checkbox.indeterminate .custom-checkbox-icon{color:#fff}.nb-theme-default nb-checkbox.status-success .native-input:enabled:focus+.custom-checkbox{background-color:rgba(0,214,143,.24);border-color:#00d68f}.nb-theme-default nb-checkbox.status-success .native-input:enabled:focus+.custom-checkbox.indeterminate,.nb-theme-default nb-checkbox.status-success .native-input:enabled:focus+.custom-checkbox.checked{background-color:#00b887;border-color:#00997a}.nb-theme-default nb-checkbox.status-success .custom-checkbox:hover{background-color:rgba(0,214,143,.16);border-color:#00d68f}.nb-theme-default nb-checkbox.status-success .custom-checkbox:hover.indeterminate,.nb-theme-default nb-checkbox.status-success .custom-checkbox:hover.checked{background-color:#2ce69b;border-color:#2ce69b}.nb-theme-default nb-checkbox.status-success .native-input:enabled:active+.custom-checkbox{background-color:rgba(0,214,143,.24);border-color:#00d68f}.nb-theme-default nb-checkbox.status-success .native-input:enabled:active+.custom-checkbox.indeterminate,.nb-theme-default nb-checkbox.status-success .native-input:enabled:active+.custom-checkbox.checked{background-color:#00b887;border-color:#00b887}.nb-theme-default nb-checkbox.status-success .native-input:disabled+.custom-checkbox{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24)}.nb-theme-default nb-checkbox.status-success .native-input:disabled+.custom-checkbox .custom-checkbox-icon{color:#fff}.nb-theme-default nb-checkbox.status-success .native-input:disabled~.text{color:rgba(143,155,179,.48)}.nb-theme-default nb-checkbox.status-success .native-input:disabled:indeterminate+.custom-checkbox,.nb-theme-default nb-checkbox.status-success .native-input:disabled:checked+.custom-checkbox{background-color:rgba(143,155,179,.48);border-color:rgba(143,155,179,.48)}.nb-theme-default nb-checkbox.status-warning .custom-checkbox{background-color:rgba(255,170,0,.08);border-color:#fa0}.nb-theme-default nb-checkbox.status-warning .text{color:#222b45}.nb-theme-default nb-checkbox.status-warning .custom-checkbox.checked{background-color:#fa0;border-color:#fa0}.nb-theme-default nb-checkbox.status-warning .custom-checkbox.checked .custom-checkbox-icon{color:#fff}.nb-theme-default nb-checkbox.status-warning .custom-checkbox.indeterminate{background-color:#fa0;border-color:#fa0}.nb-theme-default nb-checkbox.status-warning .custom-checkbox.indeterminate .custom-checkbox-icon{color:#fff}.nb-theme-default nb-checkbox.status-warning .native-input:enabled:focus+.custom-checkbox{background-color:rgba(255,170,0,.24);border-color:#fa0}.nb-theme-default nb-checkbox.status-warning .native-input:enabled:focus+.custom-checkbox.indeterminate,.nb-theme-default nb-checkbox.status-warning .native-input:enabled:focus+.custom-checkbox.checked{background-color:#db8b00;border-color:#b86e00}.nb-theme-default nb-checkbox.status-warning .custom-checkbox:hover{background-color:rgba(255,170,0,.16);border-color:#fa0}.nb-theme-default nb-checkbox.status-warning .custom-checkbox:hover.indeterminate,.nb-theme-default nb-checkbox.status-warning .custom-checkbox:hover.checked{background-color:#ffc94d;border-color:#ffc94d}.nb-theme-default nb-checkbox.status-warning .native-input:enabled:active+.custom-checkbox{background-color:rgba(255,170,0,.24);border-color:#fa0}.nb-theme-default nb-checkbox.status-warning .native-input:enabled:active+.custom-checkbox.indeterminate,.nb-theme-default nb-checkbox.status-warning .native-input:enabled:active+.custom-checkbox.checked{background-color:#db8b00;border-color:#db8b00}.nb-theme-default nb-checkbox.status-warning .native-input:disabled+.custom-checkbox{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24)}.nb-theme-default nb-checkbox.status-warning .native-input:disabled+.custom-checkbox .custom-checkbox-icon{color:#fff}.nb-theme-default nb-checkbox.status-warning .native-input:disabled~.text{color:rgba(143,155,179,.48)}.nb-theme-default nb-checkbox.status-warning .native-input:disabled:indeterminate+.custom-checkbox,.nb-theme-default nb-checkbox.status-warning .native-input:disabled:checked+.custom-checkbox{background-color:rgba(143,155,179,.48);border-color:rgba(143,155,179,.48)}.nb-theme-default nb-checkbox.status-danger .custom-checkbox{background-color:rgba(255,61,113,.08);border-color:#ff3d71}.nb-theme-default nb-checkbox.status-danger .text{color:#222b45}.nb-theme-default nb-checkbox.status-danger .custom-checkbox.checked{background-color:#ff3d71;border-color:#ff3d71}.nb-theme-default nb-checkbox.status-danger .custom-checkbox.checked .custom-checkbox-icon{color:#fff}.nb-theme-default nb-checkbox.status-danger .custom-checkbox.indeterminate{background-color:#ff3d71;border-color:#ff3d71}.nb-theme-default nb-checkbox.status-danger .custom-checkbox.indeterminate .custom-checkbox-icon{color:#fff}.nb-theme-default nb-checkbox.status-danger .native-input:enabled:focus+.custom-checkbox{background-color:rgba(255,61,113,.24);border-color:#ff3d71}.nb-theme-default nb-checkbox.status-danger .native-input:enabled:focus+.custom-checkbox.indeterminate,.nb-theme-default nb-checkbox.status-danger .native-input:enabled:focus+.custom-checkbox.checked{background-color:#db2c66;border-color:#b81d5b}.nb-theme-default nb-checkbox.status-danger .custom-checkbox:hover{background-color:rgba(255,61,113,.16);border-color:#ff3d71}.nb-theme-default nb-checkbox.status-danger .custom-checkbox:hover.indeterminate,.nb-theme-default nb-checkbox.status-danger .custom-checkbox:hover.checked{background-color:#ff708d;border-color:#ff708d}.nb-theme-default nb-checkbox.status-danger .native-input:enabled:active+.custom-checkbox{background-color:rgba(255,61,113,.24);border-color:#ff3d71}.nb-theme-default nb-checkbox.status-danger .native-input:enabled:active+.custom-checkbox.indeterminate,.nb-theme-default nb-checkbox.status-danger .native-input:enabled:active+.custom-checkbox.checked{background-color:#db2c66;border-color:#db2c66}.nb-theme-default nb-checkbox.status-danger .native-input:disabled+.custom-checkbox{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24)}.nb-theme-default nb-checkbox.status-danger .native-input:disabled+.custom-checkbox .custom-checkbox-icon{color:#fff}.nb-theme-default nb-checkbox.status-danger .native-input:disabled~.text{color:rgba(143,155,179,.48)}.nb-theme-default nb-checkbox.status-danger .native-input:disabled:indeterminate+.custom-checkbox,.nb-theme-default nb-checkbox.status-danger .native-input:disabled:checked+.custom-checkbox{background-color:rgba(143,155,179,.48);border-color:rgba(143,155,179,.48)}.nb-theme-default nb-checkbox.status-info .custom-checkbox{background-color:rgba(0,149,255,.08);border-color:#0095ff}.nb-theme-default nb-checkbox.status-info .text{color:#222b45}.nb-theme-default nb-checkbox.status-info .custom-checkbox.checked{background-color:#0095ff;border-color:#0095ff}.nb-theme-default nb-checkbox.status-info .custom-checkbox.checked .custom-checkbox-icon{color:#fff}.nb-theme-default nb-checkbox.status-info .custom-checkbox.indeterminate{background-color:#0095ff;border-color:#0095ff}.nb-theme-default nb-checkbox.status-info .custom-checkbox.indeterminate .custom-checkbox-icon{color:#fff}.nb-theme-default nb-checkbox.status-info .native-input:enabled:focus+.custom-checkbox{background-color:rgba(0,149,255,.24);border-color:#0095ff}.nb-theme-default nb-checkbox.status-info .native-input:enabled:focus+.custom-checkbox.indeterminate,.nb-theme-default nb-checkbox.status-info .native-input:enabled:focus+.custom-checkbox.checked{background-color:#006fd6;border-color:#0057c2}.nb-theme-default nb-checkbox.status-info .custom-checkbox:hover{background-color:rgba(0,149,255,.16);border-color:#0095ff}.nb-theme-default nb-checkbox.status-info .custom-checkbox:hover.indeterminate,.nb-theme-default nb-checkbox.status-info .custom-checkbox:hover.checked{background-color:#42aaff;border-color:#42aaff}.nb-theme-default nb-checkbox.status-info .native-input:enabled:active+.custom-checkbox{background-color:rgba(0,149,255,.24);border-color:#0095ff}.nb-theme-default nb-checkbox.status-info .native-input:enabled:active+.custom-checkbox.indeterminate,.nb-theme-default nb-checkbox.status-info .native-input:enabled:active+.custom-checkbox.checked{background-color:#006fd6;border-color:#006fd6}.nb-theme-default nb-checkbox.status-info .native-input:disabled+.custom-checkbox{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24)}.nb-theme-default nb-checkbox.status-info .native-input:disabled+.custom-checkbox .custom-checkbox-icon{color:#fff}.nb-theme-default nb-checkbox.status-info .native-input:disabled~.text{color:rgba(143,155,179,.48)}.nb-theme-default nb-checkbox.status-info .native-input:disabled:indeterminate+.custom-checkbox,.nb-theme-default nb-checkbox.status-info .native-input:disabled:checked+.custom-checkbox{background-color:rgba(143,155,179,.48);border-color:rgba(143,155,179,.48)}.nb-theme-default nb-checkbox.status-control .custom-checkbox{background-color:rgba(255,255,255,.08);border-color:#fff}.nb-theme-default nb-checkbox.status-control .text{color:#fff}.nb-theme-default nb-checkbox.status-control .custom-checkbox.checked{background-color:#fff;border-color:#fff}.nb-theme-default nb-checkbox.status-control .custom-checkbox.checked .custom-checkbox-icon{color:#222b45}.nb-theme-default nb-checkbox.status-control .custom-checkbox.indeterminate{background-color:#fff;border-color:#fff}.nb-theme-default nb-checkbox.status-control .custom-checkbox.indeterminate .custom-checkbox-icon{color:#222b45}.nb-theme-default nb-checkbox.status-control .native-input:enabled:focus+.custom-checkbox{background-color:rgba(255,255,255,.24);border-color:#fff}.nb-theme-default nb-checkbox.status-control .native-input:enabled:focus+.custom-checkbox.indeterminate,.nb-theme-default nb-checkbox.status-control .native-input:enabled:focus+.custom-checkbox.checked{background-color:#edf1f7;border-color:#c5cee0}.nb-theme-default nb-checkbox.status-control .custom-checkbox:hover{background-color:rgba(255,255,255,.16);border-color:#fff}.nb-theme-default nb-checkbox.status-control .custom-checkbox:hover.indeterminate,.nb-theme-default nb-checkbox.status-control .custom-checkbox:hover.checked{background-color:#f7f9fc;border-color:#f7f9fc}.nb-theme-default nb-checkbox.status-control .native-input:enabled:active+.custom-checkbox{background-color:rgba(255,255,255,.24);border-color:#fff}.nb-theme-default nb-checkbox.status-control .native-input:enabled:active+.custom-checkbox.indeterminate,.nb-theme-default nb-checkbox.status-control .native-input:enabled:active+.custom-checkbox.checked{background-color:#edf1f7;border-color:#edf1f7}.nb-theme-default nb-checkbox.status-control .native-input:disabled+.custom-checkbox{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24)}.nb-theme-default nb-checkbox.status-control .native-input:disabled+.custom-checkbox .custom-checkbox-icon{color:#fff}.nb-theme-default nb-checkbox.status-control .native-input:disabled~.text{color:#fff}.nb-theme-default nb-checkbox.status-control .native-input:disabled:indeterminate+.custom-checkbox,.nb-theme-default nb-checkbox.status-control .native-input:disabled:checked+.custom-checkbox{background-color:rgba(143,155,179,.48);border-color:rgba(143,155,179,.48)}.nb-theme-default nb-toggle .toggle{height:1.875rem;width:3.125rem;border-width:1px;border-style:solid;border-radius:100px;cursor:pointer}[dir=ltr] .nb-theme-default nb-toggle .toggle.checked .toggle-switcher{left:calc(100% - 1.75rem - 1px - 1px)}[dir=ltr] .nb-theme-default nb-toggle .toggle:not(.checked) .toggle-switcher{right:0}[dir=rtl] .nb-theme-default nb-toggle .toggle.checked .toggle-switcher{right:calc(100% - 1.75rem - 1px - 1px)}[dir=rtl] .nb-theme-default nb-toggle .toggle:not(.checked) .toggle-switcher{left:0}.nb-theme-default nb-toggle .native-input:enabled:focus+.toggle{box-shadow:0 0 0 .375rem rgba(143,155,179,.16)}.nb-theme-default nb-toggle .native-input:disabled+.toggle{cursor:default}.nb-theme-default nb-toggle .toggle-switcher{width:1.75rem;height:1.75rem}.nb-theme-default nb-toggle .toggle-switcher nb-icon{height:.75rem;width:.75rem}.nb-theme-default nb-toggle .text{font-family:Open Sans, sans-serif;font-size:.8125rem;font-weight:600;line-height:1.5rem}.nb-theme-default nb-toggle.status-basic .text{color:#222b45}.nb-theme-default nb-toggle.status-basic .toggle{background-color:rgba(143,155,179,.08);border-color:#8f9bb3}.nb-theme-default nb-toggle.status-basic .toggle.checked{background-color:#36f;border-color:#36f}.nb-theme-default nb-toggle.status-basic .native-input:enabled:focus+.toggle{background-color:rgba(51,102,255,.24);border-color:#36f}.nb-theme-default nb-toggle.status-basic .native-input:enabled:focus+.toggle.checked{background-color:#274bdb;border-color:#1a34b8}.nb-theme-default nb-toggle.status-basic .native-input:enabled:active+.toggle{background-color:rgba(51,102,255,.24);border-color:#36f}.nb-theme-default nb-toggle.status-basic .native-input:enabled:active+.toggle.checked{background-color:#274bdb;border-color:#274bdb}.nb-theme-default nb-toggle.status-basic .native-input:enabled+.toggle:hover{background-color:rgba(51,102,255,.16);border-color:#36f}.nb-theme-default nb-toggle.status-basic .native-input:enabled+.toggle:hover.checked{background-color:#598bff;border-color:#598bff}.nb-theme-default nb-toggle.status-basic .toggle-switcher{background-color:#fff}.nb-theme-default nb-toggle.status-basic .toggle-switcher nb-icon{color:#36f}.nb-theme-default nb-toggle.status-basic .native-input:disabled+.toggle{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24)}.nb-theme-default nb-toggle.status-basic .native-input:disabled+.toggle .toggle-switcher{background-color:rgba(143,155,179,.24)}.nb-theme-default nb-toggle.status-basic .native-input:disabled+.toggle .toggle-switcher nb-icon{color:#fff}.nb-theme-default nb-toggle.status-basic .native-input:disabled~.text{color:rgba(143,155,179,.48)}.nb-theme-default nb-toggle.status-primary .text{color:#222b45}.nb-theme-default nb-toggle.status-primary .toggle{background-color:rgba(51,102,255,.08);border-color:#36f}.nb-theme-default nb-toggle.status-primary .toggle.checked{background-color:#36f;border-color:#36f}.nb-theme-default nb-toggle.status-primary .native-input:enabled:focus+.toggle{background-color:rgba(51,102,255,.24);border-color:#36f}.nb-theme-default nb-toggle.status-primary .native-input:enabled:focus+.toggle.checked{background-color:#274bdb;border-color:#1a34b8}.nb-theme-default nb-toggle.status-primary .native-input:enabled:active+.toggle{background-color:rgba(51,102,255,.24);border-color:#36f}.nb-theme-default nb-toggle.status-primary .native-input:enabled:active+.toggle.checked{background-color:#274bdb;border-color:#274bdb}.nb-theme-default nb-toggle.status-primary .native-input:enabled+.toggle:hover{background-color:rgba(51,102,255,.16);border-color:#36f}.nb-theme-default nb-toggle.status-primary .native-input:enabled+.toggle:hover.checked{background-color:#598bff;border-color:#598bff}.nb-theme-default nb-toggle.status-primary .toggle-switcher{background-color:#fff}.nb-theme-default nb-toggle.status-primary .toggle-switcher nb-icon{color:#36f}.nb-theme-default nb-toggle.status-primary .native-input:disabled+.toggle{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24)}.nb-theme-default nb-toggle.status-primary .native-input:disabled+.toggle .toggle-switcher{background-color:rgba(143,155,179,.24)}.nb-theme-default nb-toggle.status-primary .native-input:disabled+.toggle .toggle-switcher nb-icon{color:#fff}.nb-theme-default nb-toggle.status-primary .native-input:disabled~.text{color:rgba(143,155,179,.48)}.nb-theme-default nb-toggle.status-success .text{color:#222b45}.nb-theme-default nb-toggle.status-success .toggle{background-color:rgba(0,214,143,.08);border-color:#00d68f}.nb-theme-default nb-toggle.status-success .toggle.checked{background-color:#00d68f;border-color:#00d68f}.nb-theme-default nb-toggle.status-success .native-input:enabled:focus+.toggle{background-color:rgba(0,214,143,.24);border-color:#00d68f}.nb-theme-default nb-toggle.status-success .native-input:enabled:focus+.toggle.checked{background-color:#00b887;border-color:#00997a}.nb-theme-default nb-toggle.status-success .native-input:enabled:active+.toggle{background-color:rgba(0,214,143,.24);border-color:#00d68f}.nb-theme-default nb-toggle.status-success .native-input:enabled:active+.toggle.checked{background-color:#00b887;border-color:#00b887}.nb-theme-default nb-toggle.status-success .native-input:enabled+.toggle:hover{background-color:rgba(0,214,143,.16);border-color:#00d68f}.nb-theme-default nb-toggle.status-success .native-input:enabled+.toggle:hover.checked{background-color:#2ce69b;border-color:#2ce69b}.nb-theme-default nb-toggle.status-success .toggle-switcher{background-color:#fff}.nb-theme-default nb-toggle.status-success .toggle-switcher nb-icon{color:#00d68f}.nb-theme-default nb-toggle.status-success .native-input:disabled+.toggle{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24)}.nb-theme-default nb-toggle.status-success .native-input:disabled+.toggle .toggle-switcher{background-color:rgba(143,155,179,.24)}.nb-theme-default nb-toggle.status-success .native-input:disabled+.toggle .toggle-switcher nb-icon{color:#fff}.nb-theme-default nb-toggle.status-success .native-input:disabled~.text{color:rgba(143,155,179,.48)}.nb-theme-default nb-toggle.status-warning .text{color:#222b45}.nb-theme-default nb-toggle.status-warning .toggle{background-color:rgba(255,170,0,.08);border-color:#fa0}.nb-theme-default nb-toggle.status-warning .toggle.checked{background-color:#fa0;border-color:#fa0}.nb-theme-default nb-toggle.status-warning .native-input:enabled:focus+.toggle{background-color:rgba(255,170,0,.24);border-color:#fa0}.nb-theme-default nb-toggle.status-warning .native-input:enabled:focus+.toggle.checked{background-color:#db8b00;border-color:#b86e00}.nb-theme-default nb-toggle.status-warning .native-input:enabled:active+.toggle{background-color:rgba(255,170,0,.24);border-color:#fa0}.nb-theme-default nb-toggle.status-warning .native-input:enabled:active+.toggle.checked{background-color:#db8b00;border-color:#db8b00}.nb-theme-default nb-toggle.status-warning .native-input:enabled+.toggle:hover{background-color:rgba(255,170,0,.16);border-color:#fa0}.nb-theme-default nb-toggle.status-warning .native-input:enabled+.toggle:hover.checked{background-color:#ffc94d;border-color:#ffc94d}.nb-theme-default nb-toggle.status-warning .toggle-switcher{background-color:#fff}.nb-theme-default nb-toggle.status-warning .toggle-switcher nb-icon{color:#fa0}.nb-theme-default nb-toggle.status-warning .native-input:disabled+.toggle{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24)}.nb-theme-default nb-toggle.status-warning .native-input:disabled+.toggle .toggle-switcher{background-color:rgba(143,155,179,.24)}.nb-theme-default nb-toggle.status-warning .native-input:disabled+.toggle .toggle-switcher nb-icon{color:#fff}.nb-theme-default nb-toggle.status-warning .native-input:disabled~.text{color:rgba(143,155,179,.48)}.nb-theme-default nb-toggle.status-danger .text{color:#222b45}.nb-theme-default nb-toggle.status-danger .toggle{background-color:rgba(255,61,113,.08);border-color:#ff3d71}.nb-theme-default nb-toggle.status-danger .toggle.checked{background-color:#ff3d71;border-color:#ff3d71}.nb-theme-default nb-toggle.status-danger .native-input:enabled:focus+.toggle{background-color:rgba(255,61,113,.24);border-color:#ff3d71}.nb-theme-default nb-toggle.status-danger .native-input:enabled:focus+.toggle.checked{background-color:#db2c66;border-color:#b81d5b}.nb-theme-default nb-toggle.status-danger .native-input:enabled:active+.toggle{background-color:rgba(255,61,113,.24);border-color:#ff3d71}.nb-theme-default nb-toggle.status-danger .native-input:enabled:active+.toggle.checked{background-color:#db2c66;border-color:#db2c66}.nb-theme-default nb-toggle.status-danger .native-input:enabled+.toggle:hover{background-color:rgba(255,61,113,.16);border-color:#ff3d71}.nb-theme-default nb-toggle.status-danger .native-input:enabled+.toggle:hover.checked{background-color:#ff708d;border-color:#ff708d}.nb-theme-default nb-toggle.status-danger .toggle-switcher{background-color:#fff}.nb-theme-default nb-toggle.status-danger .toggle-switcher nb-icon{color:#ff3d71}.nb-theme-default nb-toggle.status-danger .native-input:disabled+.toggle{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24)}.nb-theme-default nb-toggle.status-danger .native-input:disabled+.toggle .toggle-switcher{background-color:rgba(143,155,179,.24)}.nb-theme-default nb-toggle.status-danger .native-input:disabled+.toggle .toggle-switcher nb-icon{color:#fff}.nb-theme-default nb-toggle.status-danger .native-input:disabled~.text{color:rgba(143,155,179,.48)}.nb-theme-default nb-toggle.status-info .text{color:#222b45}.nb-theme-default nb-toggle.status-info .toggle{background-color:rgba(0,149,255,.08);border-color:#0095ff}.nb-theme-default nb-toggle.status-info .toggle.checked{background-color:#0095ff;border-color:#0095ff}.nb-theme-default nb-toggle.status-info .native-input:enabled:focus+.toggle{background-color:rgba(0,149,255,.24);border-color:#0095ff}.nb-theme-default nb-toggle.status-info .native-input:enabled:focus+.toggle.checked{background-color:#006fd6;border-color:#0057c2}.nb-theme-default nb-toggle.status-info .native-input:enabled:active+.toggle{background-color:rgba(0,149,255,.24);border-color:#0095ff}.nb-theme-default nb-toggle.status-info .native-input:enabled:active+.toggle.checked{background-color:#006fd6;border-color:#006fd6}.nb-theme-default nb-toggle.status-info .native-input:enabled+.toggle:hover{background-color:rgba(0,149,255,.16);border-color:#0095ff}.nb-theme-default nb-toggle.status-info .native-input:enabled+.toggle:hover.checked{background-color:#42aaff;border-color:#42aaff}.nb-theme-default nb-toggle.status-info .toggle-switcher{background-color:#fff}.nb-theme-default nb-toggle.status-info .toggle-switcher nb-icon{color:#0095ff}.nb-theme-default nb-toggle.status-info .native-input:disabled+.toggle{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24)}.nb-theme-default nb-toggle.status-info .native-input:disabled+.toggle .toggle-switcher{background-color:rgba(143,155,179,.24)}.nb-theme-default nb-toggle.status-info .native-input:disabled+.toggle .toggle-switcher nb-icon{color:#fff}.nb-theme-default nb-toggle.status-info .native-input:disabled~.text{color:rgba(143,155,179,.48)}.nb-theme-default nb-toggle.status-control .text{color:#fff}.nb-theme-default nb-toggle.status-control .toggle{background-color:rgba(255,255,255,.08);border-color:#fff}.nb-theme-default nb-toggle.status-control .toggle.checked{background-color:rgba(255,255,255,.08);border-color:#fff}.nb-theme-default nb-toggle.status-control .native-input:enabled:focus+.toggle{background-color:rgba(255,255,255,.24);border-color:#fff}.nb-theme-default nb-toggle.status-control .native-input:enabled:focus+.toggle.checked{background-color:rgba(255,255,255,.24);border-color:#fff}.nb-theme-default nb-toggle.status-control .native-input:enabled:active+.toggle{background-color:rgba(255,255,255,.24);border-color:#fff}.nb-theme-default nb-toggle.status-control .native-input:enabled:active+.toggle.checked{background-color:rgba(255,255,255,.24);border-color:#fff}.nb-theme-default nb-toggle.status-control .native-input:enabled+.toggle:hover{background-color:rgba(255,255,255,.16);border-color:#fff}.nb-theme-default nb-toggle.status-control .native-input:enabled+.toggle:hover.checked{background-color:rgba(255,255,255,.16);border-color:#fff}.nb-theme-default nb-toggle.status-control .toggle-switcher{background-color:#fff}.nb-theme-default nb-toggle.status-control .toggle-switcher nb-icon{color:#222b45}.nb-theme-default nb-toggle.status-control .native-input:disabled+.toggle{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24)}.nb-theme-default nb-toggle.status-control .native-input:disabled+.toggle .toggle-switcher{background-color:rgba(143,155,179,.48)}.nb-theme-default nb-toggle.status-control .native-input:disabled+.toggle .toggle-switcher nb-icon{color:#fff}.nb-theme-default nb-toggle.status-control .native-input:disabled~.text{color:#fff}.nb-theme-default nb-progress-bar .progress-container{border-radius:.25rem}.nb-theme-default nb-progress-bar .progress-value{display:flex;align-items:center;justify-content:center;font-family:Open Sans, sans-serif;transition-duration:400ms;transition-property:width,background-color}.nb-theme-default nb-progress-bar.size-tiny .progress-container{height:1rem}.nb-theme-default nb-progress-bar.size-tiny .progress-value{font-size:.8125rem;font-weight:600;line-height:1.5rem}.nb-theme-default nb-progress-bar.size-small .progress-container{height:1.25rem}.nb-theme-default nb-progress-bar.size-small .progress-value{font-size:.8125rem;font-weight:600;line-height:1.5rem}.nb-theme-default nb-progress-bar.size-medium .progress-container{height:1.375rem}.nb-theme-default nb-progress-bar.size-medium .progress-value{font-size:.9375rem;font-weight:600;line-height:1.5rem}.nb-theme-default nb-progress-bar.size-large .progress-container{height:1.5rem}.nb-theme-default nb-progress-bar.size-large .progress-value{font-size:.9375rem;font-weight:600;line-height:1.5rem}.nb-theme-default nb-progress-bar.size-giant .progress-container{height:1.75rem}.nb-theme-default nb-progress-bar.size-giant .progress-value{font-size:.9375rem;font-weight:600;line-height:1.5rem}.nb-theme-default nb-progress-bar.status-basic .progress-container{background-color:#f7f9fc}.nb-theme-default nb-progress-bar.status-basic .progress-value{background-color:#e4e9f2;color:#222b45}.nb-theme-default nb-progress-bar.status-primary .progress-container{background-color:#edf1f7}.nb-theme-default nb-progress-bar.status-primary .progress-value{background-color:#36f;color:#fff}.nb-theme-default nb-progress-bar.status-success .progress-container{background-color:#edf1f7}.nb-theme-default nb-progress-bar.status-success .progress-value{background-color:#00d68f;color:#fff}.nb-theme-default nb-progress-bar.status-warning .progress-container{background-color:#edf1f7}.nb-theme-default nb-progress-bar.status-warning .progress-value{background-color:#fa0;color:#fff}.nb-theme-default nb-progress-bar.status-danger .progress-container{background-color:#edf1f7}.nb-theme-default nb-progress-bar.status-danger .progress-value{background-color:#ff3d71;color:#fff}.nb-theme-default nb-progress-bar.status-info .progress-container{background-color:#edf1f7}.nb-theme-default nb-progress-bar.status-info .progress-value{background-color:#0095ff;color:#fff}.nb-theme-default nb-progress-bar.status-control .progress-container{background-color:#edf1f7}.nb-theme-default nb-progress-bar.status-control .progress-value{background-color:#fff;color:#222b45}.nb-theme-default nb-badge{border-radius:.25rem;font-family:Open Sans, sans-serif;font-size:.625rem;font-weight:700;line-height:.75rem;padding:.25rem .4rem}.nb-theme-default nb-badge.dot-mode{padding:.3rem;border-radius:.5rem}.nb-theme-default nb-badge.status-basic{color:#222b45;background-color:#f7f9fc}.nb-theme-default nb-badge.status-primary{color:#fff;background-color:#36f}.nb-theme-default nb-badge.status-success{color:#fff;background-color:#00d68f}.nb-theme-default nb-badge.status-warning{color:#fff;background-color:#fa0}.nb-theme-default nb-badge.status-danger{color:#fff;background-color:#ff3d71}.nb-theme-default nb-badge.status-info{color:#fff;background-color:#0095ff}.nb-theme-default nb-badge.status-control{color:#222b45;background-color:#fff}.nb-theme-default nb-stepper.horizontal .header .step{width:2rem;margin:0 calc(2rem * 0.5)}.nb-theme-default nb-stepper.horizontal .header .connector{margin:1rem}.nb-theme-default nb-stepper.vertical .header .connector{margin:1rem}.nb-theme-default nb-stepper .header .connector{background-color:#edf1f7}.nb-theme-default nb-stepper .header .connector-past{background-color:#36f}.nb-theme-default nb-stepper .header .label-index{border-radius:50%;border-color:#e4e9f2;border-style:solid;border-width:1px;width:2rem;height:2rem}.nb-theme-default nb-stepper .header .step{color:#8f9bb3;font-family:Open Sans, sans-serif;font-size:.9375rem;font-weight:400;line-height:1.25rem}.nb-theme-default nb-stepper .header .step.label-index{border-color:#e4e9f2}.nb-theme-default nb-stepper .header .step.selected{color:#274bdb}.nb-theme-default nb-stepper .header .step.selected .label-index{border-color:#274bdb}.nb-theme-default nb-stepper .header .step.completed{color:#36f}.nb-theme-default nb-stepper .header .step.completed .label-index{background-color:#36f;border-color:#36f;color:#fff}.nb-theme-default nb-stepper .step-content{padding:1.25rem}.nb-theme-default nb-alert{border-radius:.25rem;box-shadow:none;font-family:Open Sans, sans-serif;font-size:.9375rem;font-weight:600;line-height:1.5rem;padding:1rem 1.125rem;margin-bottom:1.5rem;scrollbar-face-color:#e4e9f2;scrollbar-track-color:#f7f9fc}.nb-theme-default nb-alert::-webkit-scrollbar{width:.3125rem;height:.3125rem}.nb-theme-default nb-alert::-webkit-scrollbar-thumb{background:#e4e9f2;cursor:pointer;border-radius:calc(0.3125rem * 0.5)}.nb-theme-default nb-alert::-webkit-scrollbar-track{background:#f7f9fc}.nb-theme-default nb-alert::-webkit-scrollbar-corner{background:#f7f9fc}[dir=ltr] .nb-theme-default nb-alert.closable{padding-right:3rem}[dir=rtl] .nb-theme-default nb-alert.closable{padding-left:3rem}.nb-theme-default nb-alert .close{padding:1rem 1.125rem;font-size:1.5rem;line-height:1;cursor:pointer;font-family:monospace}.nb-theme-default nb-alert.size-tiny{height:4.5rem}.nb-theme-default nb-alert.size-small{height:5.75rem}.nb-theme-default nb-alert.size-medium{height:7rem}.nb-theme-default nb-alert.size-large{height:8.25rem}.nb-theme-default nb-alert.size-giant{height:9.5rem}.nb-theme-default nb-alert.status-basic{color:#222b45;background-color:#f7f9fc}.nb-theme-default nb-alert.status-basic a,.nb-theme-default nb-alert.status-basic a:hover{color:#222b45}.nb-theme-default nb-alert.accent-basic{border-top:.25rem solid #edf1f7}.nb-theme-default nb-alert.outline-basic{border:1px solid #c5cee0}.nb-theme-default nb-alert.status-primary{color:#fff;background-color:#36f}.nb-theme-default nb-alert.status-primary a,.nb-theme-default nb-alert.status-primary a:hover{color:#fff}.nb-theme-default nb-alert.accent-primary{border-top:.25rem solid #36f}.nb-theme-default nb-alert.outline-primary{border:1px solid #1a34b8}.nb-theme-default nb-alert.status-success{color:#fff;background-color:#00d68f}.nb-theme-default nb-alert.status-success a,.nb-theme-default nb-alert.status-success a:hover{color:#fff}.nb-theme-default nb-alert.accent-success{border-top:.25rem solid #00d68f}.nb-theme-default nb-alert.outline-success{border:1px solid #00997a}.nb-theme-default nb-alert.status-warning{color:#fff;background-color:#fa0}.nb-theme-default nb-alert.status-warning a,.nb-theme-default nb-alert.status-warning a:hover{color:#fff}.nb-theme-default nb-alert.accent-warning{border-top:.25rem solid #fa0}.nb-theme-default nb-alert.outline-warning{border:1px solid #b86e00}.nb-theme-default nb-alert.status-danger{color:#fff;background-color:#ff3d71}.nb-theme-default nb-alert.status-danger a,.nb-theme-default nb-alert.status-danger a:hover{color:#fff}.nb-theme-default nb-alert.accent-danger{border-top:.25rem solid #ff3d71}.nb-theme-default nb-alert.outline-danger{border:1px solid #b81d5b}.nb-theme-default nb-alert.status-info{color:#fff;background-color:#0095ff}.nb-theme-default nb-alert.status-info a,.nb-theme-default nb-alert.status-info a:hover{color:#fff}.nb-theme-default nb-alert.accent-info{border-top:.25rem solid #0095ff}.nb-theme-default nb-alert.outline-info{border:1px solid #0057c2}.nb-theme-default nb-alert.status-control{color:#222b45;background-color:#fff}.nb-theme-default nb-alert.status-control a,.nb-theme-default nb-alert.status-control a:hover{color:#222b45}.nb-theme-default nb-alert.accent-control{border-top:.25rem solid #fff}.nb-theme-default nb-alert.outline-control{border:1px solid #c5cee0}.nb-theme-default nb-chat{background-color:#fff;border:none;border-radius:.25rem;box-shadow:0 .5rem 1rem 0 rgba(44,51,73,.1);color:#222b45;font-family:Open Sans, sans-serif;font-size:.9375rem;font-weight:400;line-height:1.25rem}.nb-theme-default nb-chat nb-icon{font-size:inherit}.nb-theme-default nb-chat .header{border-bottom:1px solid #edf1f7;border-top-left-radius:.25rem;border-top-right-radius:.25rem;padding:1rem 1.25rem;font-family:Open Sans, sans-serif;font-size:.9375rem;font-weight:600;line-height:1.5rem}.nb-theme-default nb-chat .scrollable{overflow:auto;flex:1;scrollbar-face-color:#e4e9f2;scrollbar-track-color:#f7f9fc}.nb-theme-default nb-chat .scrollable::-webkit-scrollbar{width:.3125rem;height:.3125rem}.nb-theme-default nb-chat .scrollable::-webkit-scrollbar-thumb{background:#e4e9f2;cursor:pointer;border-radius:calc(0.3125rem * 0.5)}.nb-theme-default nb-chat .scrollable::-webkit-scrollbar-track{background:#f7f9fc}.nb-theme-default nb-chat .scrollable::-webkit-scrollbar-corner{background:#f7f9fc}.nb-theme-default nb-chat .messages{padding:1rem 1.25rem;overflow-y:auto;overflow-x:hidden;display:flex;flex-shrink:0;flex-direction:column}.nb-theme-default nb-chat .no-messages{text-align:center}.nb-theme-default nb-chat.size-tiny{height:13.5rem}.nb-theme-default nb-chat.size-small{height:21rem}.nb-theme-default nb-chat.size-medium{height:28.5rem}.nb-theme-default nb-chat.size-large{height:36rem}.nb-theme-default nb-chat.size-giant{height:43.5rem}.nb-theme-default nb-chat.status-basic .header{background-color:#fff;color:#222b45}.nb-theme-default nb-chat.status-primary .header{background-color:#36f;color:#fff}.nb-theme-default nb-chat.status-success .header{background-color:#00d68f;color:#fff}.nb-theme-default nb-chat.status-warning .header{background-color:#fa0;color:#fff}.nb-theme-default nb-chat.status-danger .header{background-color:#ff3d71;color:#fff}.nb-theme-default nb-chat.status-info .header{background-color:#0095ff;color:#fff}.nb-theme-default nb-chat.status-control .header{background-color:#fff;color:#222b45}.nb-theme-default nb-chat-message{margin-bottom:1.5rem;display:flex;flex-direction:row}.nb-theme-default nb-chat-message .message{flex:1}.nb-theme-default nb-chat-message .avatar{display:block;border-radius:50%;flex-shrink:0;background:#c5cee0;background-position:center;background-size:cover;background-repeat:no-repeat;width:2.5rem;height:2.5rem;text-align:center;line-height:2.5rem;font-size:.875rem;color:#fff}.nb-theme-default nb-chat-message nb-chat-message-text{display:flex;flex-direction:column}.nb-theme-default nb-chat-message nb-chat-message-text .sender{font-size:.875rem;color:#8f9bb3;margin-top:0;margin-bottom:.5rem}.nb-theme-default nb-chat-message nb-chat-message-text p{word-break:break-word;white-space:pre-wrap;max-width:100%;margin-top:0;margin-bottom:0}.nb-theme-default nb-chat-message nb-chat-message-text .text{padding:1rem;border-radius:.5rem}.nb-theme-default nb-chat-message nb-chat-message-file{display:flex;flex-direction:column}.nb-theme-default nb-chat-message nb-chat-message-file a{color:#8f9bb3;background:rgba(0,0,0,0);font-size:4rem;text-align:center;border:1px solid #8f9bb3;width:10rem;height:10rem;overflow:hidden;display:flex;justify-content:center;align-items:center;flex-shrink:0;border-radius:.5rem}.nb-theme-default nb-chat-message nb-chat-message-file a:hover,.nb-theme-default nb-chat-message nb-chat-message-file a:focus{text-decoration:none;color:#8f9bb3}.nb-theme-default nb-chat-message nb-chat-message-file a div{background-size:cover;width:100%;height:100%}.nb-theme-default nb-chat-message nb-chat-message-file nb-chat-message-text{display:block;margin-bottom:.5rem}.nb-theme-default nb-chat-message nb-chat-message-file .message-content-group{display:flex;flex-direction:row;justify-content:flex-end;flex-wrap:wrap}.nb-theme-default nb-chat-message nb-chat-message-file .message-content-group a{margin-bottom:1rem;width:5rem;height:5rem}[dir=ltr] .nb-theme-default nb-chat-message nb-chat-message-file .message-content-group a{margin-right:1rem}[dir=rtl] .nb-theme-default nb-chat-message nb-chat-message-file .message-content-group a{margin-left:1rem}.nb-theme-default nb-chat-message nb-chat-message-quote p.quote{font-style:italic;font-size:.875rem;background:#f7f9fc;color:#8f9bb3;padding:1rem;border-radius:.5rem;margin-top:0;margin-bottom:.5rem}.nb-theme-default nb-chat-message nb-chat-message-quote .sender{font-size:.875rem;color:#8f9bb3;margin-bottom:.5rem}[dir=ltr] .nb-theme-default nb-chat-message.not-reply .message{margin-left:.5rem}[dir=rtl] .nb-theme-default nb-chat-message.not-reply .message{margin-right:.5rem}[dir=ltr] .nb-theme-default nb-chat-message.not-reply .message{margin-right:3rem}[dir=rtl] .nb-theme-default nb-chat-message.not-reply .message{margin-left:3rem}.nb-theme-default nb-chat-message.not-reply nb-chat-message-text{align-items:flex-start}.nb-theme-default nb-chat-message.not-reply nb-chat-message-text .text{background:#36f;color:#fff}[dir=ltr] .nb-theme-default nb-chat-message.not-reply nb-chat-message-text .text{border-top-left-radius:0}[dir=rtl] .nb-theme-default nb-chat-message.not-reply nb-chat-message-text .text{border-top-right-radius:0}.nb-theme-default nb-chat-message.not-reply nb-chat-message-file{align-items:flex-start}.nb-theme-default nb-chat-message.reply{flex-direction:row-reverse}.nb-theme-default nb-chat-message.reply .message{display:flex;flex-direction:column;align-items:flex-end;margin-left:0}[dir=ltr] .nb-theme-default nb-chat-message.reply .message{margin-right:.5rem}[dir=rtl] .nb-theme-default nb-chat-message.reply .message{margin-left:.5rem}[dir=ltr] .nb-theme-default nb-chat-message.reply .message{margin-left:3rem}[dir=rtl] .nb-theme-default nb-chat-message.reply .message{margin-right:3rem}.nb-theme-default nb-chat-message.reply nb-chat-message-text{align-items:flex-end}[dir=ltr] .nb-theme-default nb-chat-message.reply nb-chat-message-text .sender{text-align:right}[dir=rtl] .nb-theme-default nb-chat-message.reply nb-chat-message-text .sender{text-align:left}.nb-theme-default nb-chat-message.reply nb-chat-message-text .text{background:#f7f9fc;color:#222b45}[dir=ltr] .nb-theme-default nb-chat-message.reply nb-chat-message-text .text{border-top-right-radius:0}[dir=rtl] .nb-theme-default nb-chat-message.reply nb-chat-message-text .text{border-top-left-radius:0}.nb-theme-default nb-chat-message.reply nb-chat-message-file{align-items:flex-end}.nb-theme-default nb-chat-form{display:flex;flex-direction:column;padding:1rem 1.25rem;border-top:1px solid #edf1f7}.nb-theme-default nb-chat-form .message-row{flex-direction:row;display:flex}.nb-theme-default nb-chat-form input{flex:1}.nb-theme-default nb-chat-form input.with-button{border-bottom-right-radius:0;border-top-right-radius:0}[dir=ltr] .nb-theme-default nb-chat-form input.with-button{border-bottom-right-radius:0;border-top-right-radius:0}[dir=rtl] .nb-theme-default nb-chat-form input.with-button{border-bottom-left-radius:0;border-top-left-radius:0}.nb-theme-default nb-chat-form .send-button nb-icon{font-size:1.5rem}[dir=ltr] .nb-theme-default nb-chat-form .send-button{border-bottom-left-radius:0;border-top-left-radius:0}[dir=rtl] .nb-theme-default nb-chat-form .send-button{border-bottom-right-radius:0;border-top-right-radius:0}.nb-theme-default nb-chat-form .dropped-files{display:flex;flex-direction:row;margin-bottom:.5rem;flex-wrap:wrap}.nb-theme-default nb-chat-form .dropped-files div{background-size:cover;width:3rem;height:3rem;border-radius:.5rem;margin-bottom:.5rem;border:1px solid currentColor;text-align:center;font-size:2rem;position:relative}[dir=ltr] .nb-theme-default nb-chat-form .dropped-files div{margin-right:.5rem}[dir=rtl] .nb-theme-default nb-chat-form .dropped-files div{margin-left:.5rem}.nb-theme-default nb-chat-form .dropped-files div .remove{position:absolute;right:-0.5rem;top:-0.875rem;font-size:.875rem;line-height:1;cursor:pointer}.nb-theme-default nb-chat-form .dropped-files div nb-icon{width:65%;height:100%}.nb-theme-default .nb-custom-message{display:inline-block;padding:1rem 1.25rem;margin-top:.5rem;border-radius:.5rem}.nb-theme-default .nb-custom-message-full-width{width:100%}.nb-theme-default .nb-custom-message-no-space{margin-top:0}.nb-theme-default .nb-custom-message-not-reply{background:#36f;color:#fff}[dir=ltr] .nb-theme-default .nb-custom-message-not-reply{border-top-left-radius:0}[dir=rtl] .nb-theme-default .nb-custom-message-not-reply{border-top-right-radius:0}.nb-theme-default .nb-custom-message-not-reply a,.nb-theme-default .nb-custom-message-not-reply a:hover,.nb-theme-default .nb-custom-message-not-reply a:focus{color:#fff}.nb-theme-default .nb-custom-message-reply{background:#f7f9fc;color:#222b45}[dir=ltr] .nb-theme-default .nb-custom-message-reply{border-top-right-radius:0}[dir=rtl] .nb-theme-default .nb-custom-message-reply{border-top-left-radius:0}.nb-theme-default nb-accordion{display:block;box-shadow:0 .5rem 1rem 0 rgba(44,51,73,.1);border-radius:.25rem}.nb-theme-default nb-accordion-item-header{position:relative;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#edf1f7;color:#222b45;font-family:Open Sans, sans-serif;font-size:.9375rem;font-weight:600;line-height:1.5rem;padding:1.25rem}.nb-theme-default nb-accordion-item-header h1{margin:0}.nb-theme-default nb-accordion-item-header h2{margin:0}.nb-theme-default nb-accordion-item-header h3{margin:0}.nb-theme-default nb-accordion-item-header h4{margin:0}.nb-theme-default nb-accordion-item-header h5{margin:0}.nb-theme-default nb-accordion-item-header h6{margin:0}.nb-theme-default nb-accordion-item-header .expansion-indicator{position:absolute}[dir=ltr] .nb-theme-default nb-accordion-item-header .expansion-indicator{right:1rem}[dir=rtl] .nb-theme-default nb-accordion-item-header .expansion-indicator{left:1rem}.nb-theme-default nb-accordion-item{background-color:#fff;color:#222b45;font-family:Open Sans, sans-serif;font-size:.9375rem;font-weight:400;line-height:1.25rem}.nb-theme-default nb-accordion-item.disabled nb-accordion-item-header{color:rgba(143,155,179,.48);cursor:default}.nb-theme-default nb-accordion-item:first-child{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.nb-theme-default nb-accordion-item:last-child{border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.nb-theme-default nb-accordion-item:last-child.collapsed nb-accordion-item-header{border-bottom:none}.nb-theme-default nb-accordion-item:not(.collapsed)+nb-accordion-item nb-accordion-item-header{border-top-color:#edf1f7;border-top-style:solid;border-top-width:1px}.nb-theme-default nb-accordion-item-body .item-body{flex:1;-ms-flex:1 1 auto;overflow:auto;padding:1.25rem;position:relative}.nb-theme-default [nbButton],.nb-theme-default [nbButtonToggle]{-webkit-appearance:none;-moz-appearance:none;appearance:none;text-align:center;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;font-family:Open Sans, sans-serif;font-weight:700}.nb-theme-default [nbButton]:hover,.nb-theme-default [nbButtonToggle]:hover,.nb-theme-default [nbButton]:focus,.nb-theme-default [nbButtonToggle]:focus{text-decoration:none}.nb-theme-default [nbButton].full-width,.nb-theme-default .full-width[nbButtonToggle]{width:100%}.nb-theme-default [nbButton] nb-icon,.nb-theme-default [nbButtonToggle] nb-icon{vertical-align:top}.nb-theme-default [nbButton].nb-transition,.nb-theme-default .nb-transition[nbButtonToggle]{transition-duration:.15s;transition-property:background-color,border-color,box-shadow,color;transition-timing-function:ease-in}.nb-theme-default [nbButton]:focus,.nb-theme-default [nbButtonToggle]:focus{position:relative;outline:none;box-shadow:0 0 0 .375rem rgba(143,155,179,.16)}.nb-theme-default [nbButton][disabled],.nb-theme-default [disabled][nbButtonToggle],.nb-theme-default [nbButton].btn-disabled,.nb-theme-default .btn-disabled[nbButtonToggle]{cursor:default}.nb-theme-default [nbButton].size-tiny,.nb-theme-default .size-tiny[nbButtonToggle]{font-size:.625rem;line-height:.75rem}.nb-theme-default [nbButton].size-tiny nb-icon,.nb-theme-default .size-tiny[nbButtonToggle] nb-icon{font-size:.625rem;height:.75rem;width:.75rem;margin-top:-0.125rem;margin-bottom:-0.125rem}[dir=ltr] .nb-theme-default [nbButton].size-tiny.icon-start:not(.icon-end) nb-icon,[dir=ltr] .nb-theme-default .size-tiny.icon-start[nbButtonToggle]:not(.icon-end) nb-icon{margin-right:.375rem}[dir=rtl] .nb-theme-default [nbButton].size-tiny.icon-start:not(.icon-end) nb-icon,[dir=rtl] .nb-theme-default .size-tiny.icon-start[nbButtonToggle]:not(.icon-end) nb-icon{margin-left:.375rem}[dir=ltr] .nb-theme-default [nbButton].size-tiny.icon-end:not(.icon-start) nb-icon,[dir=ltr] .nb-theme-default .size-tiny.icon-end[nbButtonToggle]:not(.icon-start) nb-icon{margin-left:.375rem}[dir=rtl] .nb-theme-default [nbButton].size-tiny.icon-end:not(.icon-start) nb-icon,[dir=rtl] .nb-theme-default .size-tiny.icon-end[nbButtonToggle]:not(.icon-start) nb-icon{margin-right:.375rem}.nb-theme-default [nbButton].size-tiny.icon-start.icon-end.appearance-filled,.nb-theme-default .size-tiny.icon-start.icon-end.appearance-filled[nbButtonToggle]{padding:.4375rem .3125rem}.nb-theme-default [nbButton].size-tiny.icon-start.icon-end.appearance-outline,.nb-theme-default .size-tiny.icon-start.icon-end.appearance-outline[nbButtonToggle]{padding:.4375rem .3125rem}.nb-theme-default [nbButton].size-tiny.icon-start.icon-end.appearance-ghost,.nb-theme-default .size-tiny.icon-start.icon-end.appearance-ghost[nbButtonToggle]{padding:.4375rem .3125rem}.nb-theme-default [nbButton].size-tiny.icon-start.icon-end.appearance-hero,.nb-theme-default .size-tiny.icon-start.icon-end.appearance-hero[nbButtonToggle]{padding:.5rem .375rem}.nb-theme-default [nbButton].size-small,.nb-theme-default .size-small[nbButtonToggle]{font-size:.75rem;line-height:1rem}.nb-theme-default [nbButton].size-small nb-icon,.nb-theme-default .size-small[nbButtonToggle] nb-icon{font-size:.75rem;height:1rem;width:1rem;margin-top:-0.125rem;margin-bottom:-0.125rem}[dir=ltr] .nb-theme-default [nbButton].size-small.icon-start:not(.icon-end) nb-icon,[dir=ltr] .nb-theme-default .size-small.icon-start[nbButtonToggle]:not(.icon-end) nb-icon{margin-right:.375rem}[dir=rtl] .nb-theme-default [nbButton].size-small.icon-start:not(.icon-end) nb-icon,[dir=rtl] .nb-theme-default .size-small.icon-start[nbButtonToggle]:not(.icon-end) nb-icon{margin-left:.375rem}[dir=ltr] .nb-theme-default [nbButton].size-small.icon-end:not(.icon-start) nb-icon,[dir=ltr] .nb-theme-default .size-small.icon-end[nbButtonToggle]:not(.icon-start) nb-icon{margin-left:.375rem}[dir=rtl] .nb-theme-default [nbButton].size-small.icon-end:not(.icon-start) nb-icon,[dir=rtl] .nb-theme-default .size-small.icon-end[nbButtonToggle]:not(.icon-start) nb-icon{margin-right:.375rem}.nb-theme-default [nbButton].size-small.icon-start.icon-end.appearance-filled,.nb-theme-default .size-small.icon-start.icon-end.appearance-filled[nbButtonToggle]{padding:.5625rem .4375rem}.nb-theme-default [nbButton].size-small.icon-start.icon-end.appearance-outline,.nb-theme-default .size-small.icon-start.icon-end.appearance-outline[nbButtonToggle]{padding:.5625rem .4375rem}.nb-theme-default [nbButton].size-small.icon-start.icon-end.appearance-ghost,.nb-theme-default .size-small.icon-start.icon-end.appearance-ghost[nbButtonToggle]{padding:.5625rem .4375rem}.nb-theme-default [nbButton].size-small.icon-start.icon-end.appearance-hero,.nb-theme-default .size-small.icon-start.icon-end.appearance-hero[nbButtonToggle]{padding:.5625rem .5rem}.nb-theme-default [nbButton].size-medium,.nb-theme-default .size-medium[nbButtonToggle]{font-size:.875rem;line-height:1rem}.nb-theme-default [nbButton].size-medium nb-icon,.nb-theme-default .size-medium[nbButtonToggle] nb-icon{font-size:.875rem;height:1.25rem;width:1.25rem;margin-top:-0.125rem;margin-bottom:-0.125rem}[dir=ltr] .nb-theme-default [nbButton].size-medium.icon-start:not(.icon-end) nb-icon,[dir=ltr] .nb-theme-default .size-medium.icon-start[nbButtonToggle]:not(.icon-end) nb-icon{margin-right:.5rem}[dir=rtl] .nb-theme-default [nbButton].size-medium.icon-start:not(.icon-end) nb-icon,[dir=rtl] .nb-theme-default .size-medium.icon-start[nbButtonToggle]:not(.icon-end) nb-icon{margin-left:.5rem}[dir=ltr] .nb-theme-default [nbButton].size-medium.icon-end:not(.icon-start) nb-icon,[dir=ltr] .nb-theme-default .size-medium.icon-end[nbButtonToggle]:not(.icon-start) nb-icon{margin-left:.5rem}[dir=rtl] .nb-theme-default [nbButton].size-medium.icon-end:not(.icon-start) nb-icon,[dir=rtl] .nb-theme-default .size-medium.icon-end[nbButtonToggle]:not(.icon-start) nb-icon{margin-right:.5rem}.nb-theme-default [nbButton].size-medium.icon-start.icon-end.appearance-filled,.nb-theme-default .size-medium.icon-start.icon-end.appearance-filled[nbButtonToggle]{padding:.6875rem .5625rem}.nb-theme-default [nbButton].size-medium.icon-start.icon-end.appearance-outline,.nb-theme-default .size-medium.icon-start.icon-end.appearance-outline[nbButtonToggle]{padding:.6875rem .5625rem}.nb-theme-default [nbButton].size-medium.icon-start.icon-end.appearance-ghost,.nb-theme-default .size-medium.icon-start.icon-end.appearance-ghost[nbButtonToggle]{padding:.6875rem .5625rem}.nb-theme-default [nbButton].size-medium.icon-start.icon-end.appearance-hero,.nb-theme-default .size-medium.icon-start.icon-end.appearance-hero[nbButtonToggle]{padding:.75rem .5625rem}.nb-theme-default [nbButton].size-large,.nb-theme-default .size-large[nbButtonToggle]{font-size:1rem;line-height:1.25rem}.nb-theme-default [nbButton].size-large nb-icon,.nb-theme-default .size-large[nbButtonToggle] nb-icon{font-size:1rem;height:1.5rem;width:1.5rem;margin-top:-0.125rem;margin-bottom:-0.125rem}[dir=ltr] .nb-theme-default [nbButton].size-large.icon-start:not(.icon-end) nb-icon,[dir=ltr] .nb-theme-default .size-large.icon-start[nbButtonToggle]:not(.icon-end) nb-icon{margin-right:.75rem}[dir=rtl] .nb-theme-default [nbButton].size-large.icon-start:not(.icon-end) nb-icon,[dir=rtl] .nb-theme-default .size-large.icon-start[nbButtonToggle]:not(.icon-end) nb-icon{margin-left:.75rem}[dir=ltr] .nb-theme-default [nbButton].size-large.icon-end:not(.icon-start) nb-icon,[dir=ltr] .nb-theme-default .size-large.icon-end[nbButtonToggle]:not(.icon-start) nb-icon{margin-left:.75rem}[dir=rtl] .nb-theme-default [nbButton].size-large.icon-end:not(.icon-start) nb-icon,[dir=rtl] .nb-theme-default .size-large.icon-end[nbButtonToggle]:not(.icon-start) nb-icon{margin-right:.75rem}.nb-theme-default [nbButton].size-large.icon-start.icon-end.appearance-filled,.nb-theme-default .size-large.icon-start.icon-end.appearance-filled[nbButtonToggle]{padding:.8125rem .6875rem}.nb-theme-default [nbButton].size-large.icon-start.icon-end.appearance-outline,.nb-theme-default .size-large.icon-start.icon-end.appearance-outline[nbButtonToggle]{padding:.8125rem .6875rem}.nb-theme-default [nbButton].size-large.icon-start.icon-end.appearance-ghost,.nb-theme-default .size-large.icon-start.icon-end.appearance-ghost[nbButtonToggle]{padding:.8125rem .6875rem}.nb-theme-default [nbButton].size-large.icon-start.icon-end.appearance-hero,.nb-theme-default .size-large.icon-start.icon-end.appearance-hero[nbButtonToggle]{padding:.875rem .6875rem}.nb-theme-default [nbButton].size-giant,.nb-theme-default .size-giant[nbButtonToggle]{font-size:1.125rem;line-height:1.5rem}.nb-theme-default [nbButton].size-giant nb-icon,.nb-theme-default .size-giant[nbButtonToggle] nb-icon{font-size:1.125rem;height:1.5rem;width:1.5rem;margin-top:-0.125rem;margin-bottom:-0.125rem}[dir=ltr] .nb-theme-default [nbButton].size-giant.icon-start:not(.icon-end) nb-icon,[dir=ltr] .nb-theme-default .size-giant.icon-start[nbButtonToggle]:not(.icon-end) nb-icon{margin-right:.75rem}[dir=rtl] .nb-theme-default [nbButton].size-giant.icon-start:not(.icon-end) nb-icon,[dir=rtl] .nb-theme-default .size-giant.icon-start[nbButtonToggle]:not(.icon-end) nb-icon{margin-left:.75rem}[dir=ltr] .nb-theme-default [nbButton].size-giant.icon-end:not(.icon-start) nb-icon,[dir=ltr] .nb-theme-default .size-giant.icon-end[nbButtonToggle]:not(.icon-start) nb-icon{margin-left:.75rem}[dir=rtl] .nb-theme-default [nbButton].size-giant.icon-end:not(.icon-start) nb-icon,[dir=rtl] .nb-theme-default .size-giant.icon-end[nbButtonToggle]:not(.icon-start) nb-icon{margin-right:.75rem}.nb-theme-default [nbButton].size-giant.icon-start.icon-end.appearance-filled,.nb-theme-default .size-giant.icon-start.icon-end.appearance-filled[nbButtonToggle]{padding:1.0625rem .9375rem}.nb-theme-default [nbButton].size-giant.icon-start.icon-end.appearance-outline,.nb-theme-default .size-giant.icon-start.icon-end.appearance-outline[nbButtonToggle]{padding:1.0625rem .9375rem}.nb-theme-default [nbButton].size-giant.icon-start.icon-end.appearance-ghost,.nb-theme-default .size-giant.icon-start.icon-end.appearance-ghost[nbButtonToggle]{padding:1.0625rem .9375rem}.nb-theme-default [nbButton].size-giant.icon-start.icon-end.appearance-hero,.nb-theme-default .size-giant.icon-start.icon-end.appearance-hero[nbButtonToggle]{padding:1.0625rem 1rem}.nb-theme-default [nbButton].shape-rectangle,.nb-theme-default .shape-rectangle[nbButtonToggle]{border-radius:.25rem}.nb-theme-default [nbButton].shape-semi-round,.nb-theme-default .shape-semi-round[nbButtonToggle]{border-radius:.75rem}.nb-theme-default [nbButton].shape-round,.nb-theme-default .shape-round[nbButtonToggle]{border-radius:1.5rem}.nb-theme-default a[nbButton],.nb-theme-default a[nbButtonToggle]{text-decoration:none}.nb-theme-default [nbButton].appearance-filled,.nb-theme-default .appearance-filled[nbButtonToggle]{border-style:solid;border-width:.0625rem;text-transform:uppercase}.nb-theme-default [nbButton].appearance-filled.size-tiny,.nb-theme-default .appearance-filled.size-tiny[nbButtonToggle]{padding:.3125rem .625rem}.nb-theme-default [nbButton].appearance-filled.size-small,.nb-theme-default .appearance-filled.size-small[nbButtonToggle]{padding:.4375rem .875rem}.nb-theme-default [nbButton].appearance-filled.size-medium,.nb-theme-default .appearance-filled.size-medium[nbButtonToggle]{padding:.6875rem 1.125rem}.nb-theme-default [nbButton].appearance-filled.size-large,.nb-theme-default .appearance-filled.size-large[nbButtonToggle]{padding:.8125rem 1.125rem}.nb-theme-default [nbButton].appearance-filled.size-giant,.nb-theme-default .appearance-filled.size-giant[nbButtonToggle]{padding:.9375rem 1.375rem}.nb-theme-default [nbButton].appearance-filled.status-basic,.nb-theme-default .appearance-filled.status-basic[nbButtonToggle]{background-color:#edf1f7;border-color:#edf1f7;color:#222b45}.nb-theme-default [nbButton].appearance-filled.status-basic:focus,.nb-theme-default .appearance-filled.status-basic[nbButtonToggle]:focus{background-color:#e4e9f2;border-color:#c5cee0}.nb-theme-default [nbButton].appearance-filled.status-basic:hover,.nb-theme-default .appearance-filled.status-basic[nbButtonToggle]:hover{background-color:#f7f9fc;border-color:#f7f9fc}.nb-theme-default [nbButton].appearance-filled.status-basic:active,.nb-theme-default .appearance-filled.status-basic[nbButtonToggle]:active{background-color:#e4e9f2;border-color:#e4e9f2}.nb-theme-default [nbButton].appearance-filled.status-basic[disabled],.nb-theme-default .appearance-filled.status-basic[disabled][nbButtonToggle],.nb-theme-default [nbButton].appearance-filled.status-basic.btn-disabled,.nb-theme-default .appearance-filled.status-basic.btn-disabled[nbButtonToggle]{background-color:rgba(143,155,179,.24);border-color:rgba(143,155,179,.24);color:rgba(143,155,179,.48)}.nb-theme-default [nbButton].appearance-filled.status-primary,.nb-theme-default .appearance-filled.status-primary[nbButtonToggle]{background-color:#36f;border-color:#36f;color:#fff}.nb-theme-default [nbButton].appearance-filled.status-primary:focus,.nb-theme-default .appearance-filled.status-primary[nbButtonToggle]:focus{background-color:#274bdb;border-color:#1a34b8}.nb-theme-default [nbButton].appearance-filled.status-primary:hover,.nb-theme-default .appearance-filled.status-primary[nbButtonToggle]:hover{background-color:#598bff;border-color:#598bff}.nb-theme-default [nbButton].appearance-filled.status-primary:active,.nb-theme-default .appearance-filled.status-primary[nbButtonToggle]:active{background-color:#274bdb;border-color:#274bdb}.nb-theme-default [nbButton].appearance-filled.status-primary[disabled],.nb-theme-default .appearance-filled.status-primary[disabled][nbButtonToggle],.nb-theme-default [nbButton].appearance-filled.status-primary.btn-disabled,.nb-theme-default .appearance-filled.status-primary.btn-disabled[nbButtonToggle]{background-color:rgba(143,155,179,.24);border-color:rgba(143,155,179,.24);color:rgba(143,155,179,.48)}.nb-theme-default [nbButton].appearance-filled.status-success,.nb-theme-default .appearance-filled.status-success[nbButtonToggle]{background-color:#00d68f;border-color:#00d68f;color:#fff}.nb-theme-default [nbButton].appearance-filled.status-success:focus,.nb-theme-default .appearance-filled.status-success[nbButtonToggle]:focus{background-color:#00b887;border-color:#00997a}.nb-theme-default [nbButton].appearance-filled.status-success:hover,.nb-theme-default .appearance-filled.status-success[nbButtonToggle]:hover{background-color:#2ce69b;border-color:#2ce69b}.nb-theme-default [nbButton].appearance-filled.status-success:active,.nb-theme-default .appearance-filled.status-success[nbButtonToggle]:active{background-color:#00b887;border-color:#00b887}.nb-theme-default [nbButton].appearance-filled.status-success[disabled],.nb-theme-default .appearance-filled.status-success[disabled][nbButtonToggle],.nb-theme-default [nbButton].appearance-filled.status-success.btn-disabled,.nb-theme-default .appearance-filled.status-success.btn-disabled[nbButtonToggle]{background-color:rgba(143,155,179,.24);border-color:rgba(143,155,179,.24);color:rgba(143,155,179,.48)}.nb-theme-default [nbButton].appearance-filled.status-warning,.nb-theme-default .appearance-filled.status-warning[nbButtonToggle]{background-color:#fa0;border-color:#fa0;color:#fff}.nb-theme-default [nbButton].appearance-filled.status-warning:focus,.nb-theme-default .appearance-filled.status-warning[nbButtonToggle]:focus{background-color:#db8b00;border-color:#b86e00}.nb-theme-default [nbButton].appearance-filled.status-warning:hover,.nb-theme-default .appearance-filled.status-warning[nbButtonToggle]:hover{background-color:#ffc94d;border-color:#ffc94d}.nb-theme-default [nbButton].appearance-filled.status-warning:active,.nb-theme-default .appearance-filled.status-warning[nbButtonToggle]:active{background-color:#db8b00;border-color:#db8b00}.nb-theme-default [nbButton].appearance-filled.status-warning[disabled],.nb-theme-default .appearance-filled.status-warning[disabled][nbButtonToggle],.nb-theme-default [nbButton].appearance-filled.status-warning.btn-disabled,.nb-theme-default .appearance-filled.status-warning.btn-disabled[nbButtonToggle]{background-color:rgba(143,155,179,.24);border-color:rgba(143,155,179,.24);color:rgba(143,155,179,.48)}.nb-theme-default [nbButton].appearance-filled.status-danger,.nb-theme-default .appearance-filled.status-danger[nbButtonToggle]{background-color:#ff3d71;border-color:#ff3d71;color:#fff}.nb-theme-default [nbButton].appearance-filled.status-danger:focus,.nb-theme-default .appearance-filled.status-danger[nbButtonToggle]:focus{background-color:#db2c66;border-color:#b81d5b}.nb-theme-default [nbButton].appearance-filled.status-danger:hover,.nb-theme-default .appearance-filled.status-danger[nbButtonToggle]:hover{background-color:#ff708d;border-color:#ff708d}.nb-theme-default [nbButton].appearance-filled.status-danger:active,.nb-theme-default .appearance-filled.status-danger[nbButtonToggle]:active{background-color:#db2c66;border-color:#db2c66}.nb-theme-default [nbButton].appearance-filled.status-danger[disabled],.nb-theme-default .appearance-filled.status-danger[disabled][nbButtonToggle],.nb-theme-default [nbButton].appearance-filled.status-danger.btn-disabled,.nb-theme-default .appearance-filled.status-danger.btn-disabled[nbButtonToggle]{background-color:rgba(143,155,179,.24);border-color:rgba(143,155,179,.24);color:rgba(143,155,179,.48)}.nb-theme-default [nbButton].appearance-filled.status-info,.nb-theme-default .appearance-filled.status-info[nbButtonToggle]{background-color:#0095ff;border-color:#0095ff;color:#fff}.nb-theme-default [nbButton].appearance-filled.status-info:focus,.nb-theme-default .appearance-filled.status-info[nbButtonToggle]:focus{background-color:#006fd6;border-color:#0057c2}.nb-theme-default [nbButton].appearance-filled.status-info:hover,.nb-theme-default .appearance-filled.status-info[nbButtonToggle]:hover{background-color:#42aaff;border-color:#42aaff}.nb-theme-default [nbButton].appearance-filled.status-info:active,.nb-theme-default .appearance-filled.status-info[nbButtonToggle]:active{background-color:#006fd6;border-color:#006fd6}.nb-theme-default [nbButton].appearance-filled.status-info[disabled],.nb-theme-default .appearance-filled.status-info[disabled][nbButtonToggle],.nb-theme-default [nbButton].appearance-filled.status-info.btn-disabled,.nb-theme-default .appearance-filled.status-info.btn-disabled[nbButtonToggle]{background-color:rgba(143,155,179,.24);border-color:rgba(143,155,179,.24);color:rgba(143,155,179,.48)}.nb-theme-default [nbButton].appearance-filled.status-control,.nb-theme-default .appearance-filled.status-control[nbButtonToggle]{background-color:#fff;border-color:#fff;color:#222b45}.nb-theme-default [nbButton].appearance-filled.status-control:focus,.nb-theme-default .appearance-filled.status-control[nbButtonToggle]:focus{background-color:#edf1f7;border-color:#c5cee0}.nb-theme-default [nbButton].appearance-filled.status-control:hover,.nb-theme-default .appearance-filled.status-control[nbButtonToggle]:hover{background-color:#f7f9fc;border-color:#f7f9fc}.nb-theme-default [nbButton].appearance-filled.status-control:active,.nb-theme-default .appearance-filled.status-control[nbButtonToggle]:active{background-color:#edf1f7;border-color:#edf1f7}.nb-theme-default [nbButton].appearance-filled.status-control[disabled],.nb-theme-default .appearance-filled.status-control[disabled][nbButtonToggle],.nb-theme-default [nbButton].appearance-filled.status-control.btn-disabled,.nb-theme-default .appearance-filled.status-control.btn-disabled[nbButtonToggle]{background-color:rgba(143,155,179,.24);border-color:rgba(143,155,179,.24);color:rgba(143,155,179,.48)}.nb-theme-default [nbButton].appearance-outline,.nb-theme-default .appearance-outline[nbButtonToggle]{border-style:solid;border-width:.0625rem;text-transform:uppercase}.nb-theme-default [nbButton].appearance-outline:focus,.nb-theme-default .appearance-outline[nbButtonToggle]:focus{box-shadow:0 0 0 .375rem rgba(143,155,179,.16)}.nb-theme-default [nbButton].appearance-outline:focus:not(:hover):not(:active),.nb-theme-default .appearance-outline[nbButtonToggle]:focus:not(:hover):not(:active){box-shadow:0 0 0 .375rem rgba(143,155,179,.16),inset 0 0 0 100vmax rgba(143,155,179,.16)}.nb-theme-default [nbButton].appearance-outline.size-tiny,.nb-theme-default .appearance-outline.size-tiny[nbButtonToggle]{padding:.3125rem .625rem}.nb-theme-default [nbButton].appearance-outline.size-small,.nb-theme-default .appearance-outline.size-small[nbButtonToggle]{padding:.4375rem .875rem}.nb-theme-default [nbButton].appearance-outline.size-medium,.nb-theme-default .appearance-outline.size-medium[nbButtonToggle]{padding:.6875rem 1.125rem}.nb-theme-default [nbButton].appearance-outline.size-large,.nb-theme-default .appearance-outline.size-large[nbButtonToggle]{padding:.8125rem 1.125rem}.nb-theme-default [nbButton].appearance-outline.size-giant,.nb-theme-default .appearance-outline.size-giant[nbButtonToggle]{padding:.9375rem 1.375rem}.nb-theme-default [nbButton].appearance-outline.status-basic,.nb-theme-default .appearance-outline.status-basic[nbButtonToggle]{background-color:rgba(143,155,179,.08);border-color:#8f9bb3;color:#8f9bb3}.nb-theme-default [nbButton].appearance-outline.status-basic:focus,.nb-theme-default .appearance-outline.status-basic[nbButtonToggle]:focus{background-color:rgba(143,155,179,.24);border-color:#8f9bb3;color:#8f9bb3}.nb-theme-default [nbButton].appearance-outline.status-basic:hover,.nb-theme-default .appearance-outline.status-basic[nbButtonToggle]:hover{background-color:rgba(143,155,179,.16);border-color:#8f9bb3;color:#8f9bb3}.nb-theme-default [nbButton].appearance-outline.status-basic:active,.nb-theme-default .appearance-outline.status-basic[nbButtonToggle]:active{background-color:rgba(143,155,179,.24);border-color:#8f9bb3;color:#8f9bb3}.nb-theme-default [nbButton].appearance-outline.status-basic[disabled],.nb-theme-default .appearance-outline.status-basic[disabled][nbButtonToggle],.nb-theme-default [nbButton].appearance-outline.status-basic.btn-disabled,.nb-theme-default .appearance-outline.status-basic.btn-disabled[nbButtonToggle]{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24);color:rgba(143,155,179,.48)}.nb-theme-default [nbButton].appearance-outline.status-primary,.nb-theme-default .appearance-outline.status-primary[nbButtonToggle]{background-color:rgba(51,102,255,.08);border-color:#36f;color:#36f}.nb-theme-default [nbButton].appearance-outline.status-primary:focus,.nb-theme-default .appearance-outline.status-primary[nbButtonToggle]:focus{background-color:rgba(51,102,255,.24);border-color:#36f;color:#36f}.nb-theme-default [nbButton].appearance-outline.status-primary:hover,.nb-theme-default .appearance-outline.status-primary[nbButtonToggle]:hover{background-color:rgba(51,102,255,.16);border-color:#36f;color:#36f}.nb-theme-default [nbButton].appearance-outline.status-primary:active,.nb-theme-default .appearance-outline.status-primary[nbButtonToggle]:active{background-color:rgba(51,102,255,.24);border-color:#36f;color:#36f}.nb-theme-default [nbButton].appearance-outline.status-primary[disabled],.nb-theme-default .appearance-outline.status-primary[disabled][nbButtonToggle],.nb-theme-default [nbButton].appearance-outline.status-primary.btn-disabled,.nb-theme-default .appearance-outline.status-primary.btn-disabled[nbButtonToggle]{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24);color:rgba(143,155,179,.48)}.nb-theme-default [nbButton].appearance-outline.status-success,.nb-theme-default .appearance-outline.status-success[nbButtonToggle]{background-color:rgba(0,214,143,.08);border-color:#00d68f;color:#00d68f}.nb-theme-default [nbButton].appearance-outline.status-success:focus,.nb-theme-default .appearance-outline.status-success[nbButtonToggle]:focus{background-color:rgba(0,214,143,.24);border-color:#00d68f;color:#00d68f}.nb-theme-default [nbButton].appearance-outline.status-success:hover,.nb-theme-default .appearance-outline.status-success[nbButtonToggle]:hover{background-color:rgba(0,214,143,.16);border-color:#00d68f;color:#00d68f}.nb-theme-default [nbButton].appearance-outline.status-success:active,.nb-theme-default .appearance-outline.status-success[nbButtonToggle]:active{background-color:rgba(0,214,143,.24);border-color:#00d68f;color:#00d68f}.nb-theme-default [nbButton].appearance-outline.status-success[disabled],.nb-theme-default .appearance-outline.status-success[disabled][nbButtonToggle],.nb-theme-default [nbButton].appearance-outline.status-success.btn-disabled,.nb-theme-default .appearance-outline.status-success.btn-disabled[nbButtonToggle]{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24);color:rgba(143,155,179,.48)}.nb-theme-default [nbButton].appearance-outline.status-warning,.nb-theme-default .appearance-outline.status-warning[nbButtonToggle]{background-color:rgba(255,170,0,.08);border-color:#fa0;color:#fa0}.nb-theme-default [nbButton].appearance-outline.status-warning:focus,.nb-theme-default .appearance-outline.status-warning[nbButtonToggle]:focus{background-color:rgba(255,170,0,.24);border-color:#fa0;color:#fa0}.nb-theme-default [nbButton].appearance-outline.status-warning:hover,.nb-theme-default .appearance-outline.status-warning[nbButtonToggle]:hover{background-color:rgba(255,170,0,.16);border-color:#fa0;color:#fa0}.nb-theme-default [nbButton].appearance-outline.status-warning:active,.nb-theme-default .appearance-outline.status-warning[nbButtonToggle]:active{background-color:rgba(255,170,0,.24);border-color:#fa0;color:#fa0}.nb-theme-default [nbButton].appearance-outline.status-warning[disabled],.nb-theme-default .appearance-outline.status-warning[disabled][nbButtonToggle],.nb-theme-default [nbButton].appearance-outline.status-warning.btn-disabled,.nb-theme-default .appearance-outline.status-warning.btn-disabled[nbButtonToggle]{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24);color:rgba(143,155,179,.48)}.nb-theme-default [nbButton].appearance-outline.status-danger,.nb-theme-default .appearance-outline.status-danger[nbButtonToggle]{background-color:rgba(255,61,113,.08);border-color:#ff3d71;color:#ff3d71}.nb-theme-default [nbButton].appearance-outline.status-danger:focus,.nb-theme-default .appearance-outline.status-danger[nbButtonToggle]:focus{background-color:rgba(255,61,113,.24);border-color:#ff3d71;color:#ff3d71}.nb-theme-default [nbButton].appearance-outline.status-danger:hover,.nb-theme-default .appearance-outline.status-danger[nbButtonToggle]:hover{background-color:rgba(255,61,113,.16);border-color:#ff3d71;color:#ff3d71}.nb-theme-default [nbButton].appearance-outline.status-danger:active,.nb-theme-default .appearance-outline.status-danger[nbButtonToggle]:active{background-color:rgba(255,61,113,.24);border-color:#ff3d71;color:#ff3d71}.nb-theme-default [nbButton].appearance-outline.status-danger[disabled],.nb-theme-default .appearance-outline.status-danger[disabled][nbButtonToggle],.nb-theme-default [nbButton].appearance-outline.status-danger.btn-disabled,.nb-theme-default .appearance-outline.status-danger.btn-disabled[nbButtonToggle]{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24);color:rgba(143,155,179,.48)}.nb-theme-default [nbButton].appearance-outline.status-info,.nb-theme-default .appearance-outline.status-info[nbButtonToggle]{background-color:rgba(0,149,255,.08);border-color:#0095ff;color:#0095ff}.nb-theme-default [nbButton].appearance-outline.status-info:focus,.nb-theme-default .appearance-outline.status-info[nbButtonToggle]:focus{background-color:rgba(0,149,255,.24);border-color:#0095ff;color:#0095ff}.nb-theme-default [nbButton].appearance-outline.status-info:hover,.nb-theme-default .appearance-outline.status-info[nbButtonToggle]:hover{background-color:rgba(0,149,255,.16);border-color:#0095ff;color:#0095ff}.nb-theme-default [nbButton].appearance-outline.status-info:active,.nb-theme-default .appearance-outline.status-info[nbButtonToggle]:active{background-color:rgba(0,149,255,.24);border-color:#0095ff;color:#0095ff}.nb-theme-default [nbButton].appearance-outline.status-info[disabled],.nb-theme-default .appearance-outline.status-info[disabled][nbButtonToggle],.nb-theme-default [nbButton].appearance-outline.status-info.btn-disabled,.nb-theme-default .appearance-outline.status-info.btn-disabled[nbButtonToggle]{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24);color:rgba(143,155,179,.48)}.nb-theme-default [nbButton].appearance-outline.status-control,.nb-theme-default .appearance-outline.status-control[nbButtonToggle]{background-color:rgba(255,255,255,.08);border-color:#fff;color:#fff}.nb-theme-default [nbButton].appearance-outline.status-control:focus,.nb-theme-default .appearance-outline.status-control[nbButtonToggle]:focus{background-color:rgba(255,255,255,.24);border-color:#fff;color:#fff}.nb-theme-default [nbButton].appearance-outline.status-control:hover,.nb-theme-default .appearance-outline.status-control[nbButtonToggle]:hover{background-color:rgba(255,255,255,.16);border-color:#fff;color:#fff}.nb-theme-default [nbButton].appearance-outline.status-control:active,.nb-theme-default .appearance-outline.status-control[nbButtonToggle]:active{background-color:rgba(255,255,255,.24);border-color:#fff;color:#fff}.nb-theme-default [nbButton].appearance-outline.status-control[disabled],.nb-theme-default .appearance-outline.status-control[disabled][nbButtonToggle],.nb-theme-default [nbButton].appearance-outline.status-control.btn-disabled,.nb-theme-default .appearance-outline.status-control.btn-disabled[nbButtonToggle]{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24);color:rgba(143,155,179,.48)}.nb-theme-default [nbButton].appearance-ghost,.nb-theme-default .appearance-ghost[nbButtonToggle]{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0);border-style:solid;border-width:.0625rem;text-transform:uppercase}.nb-theme-default [nbButton].appearance-ghost:focus,.nb-theme-default .appearance-ghost[nbButtonToggle]:focus{box-shadow:0 0 0 .375rem rgba(143,155,179,.16)}.nb-theme-default [nbButton].appearance-ghost:focus:not(:hover):not(:active),.nb-theme-default .appearance-ghost[nbButtonToggle]:focus:not(:hover):not(:active){box-shadow:0 0 0 .375rem rgba(143,155,179,.16),inset 0 0 0 100vmax rgba(143,155,179,.16)}.nb-theme-default [nbButton].appearance-ghost.size-tiny,.nb-theme-default .appearance-ghost.size-tiny[nbButtonToggle]{padding:.3125rem .625rem}.nb-theme-default [nbButton].appearance-ghost.size-small,.nb-theme-default .appearance-ghost.size-small[nbButtonToggle]{padding:.4375rem .875rem}.nb-theme-default [nbButton].appearance-ghost.size-medium,.nb-theme-default .appearance-ghost.size-medium[nbButtonToggle]{padding:.6875rem 1.125rem}.nb-theme-default [nbButton].appearance-ghost.size-large,.nb-theme-default .appearance-ghost.size-large[nbButtonToggle]{padding:.8125rem 1.125rem}.nb-theme-default [nbButton].appearance-ghost.size-giant,.nb-theme-default .appearance-ghost.size-giant[nbButtonToggle]{padding:.9375rem 1.375rem}.nb-theme-default [nbButton].appearance-ghost.status-basic,.nb-theme-default .appearance-ghost.status-basic[nbButtonToggle]{color:#8f9bb3}.nb-theme-default [nbButton].appearance-ghost.status-basic:focus,.nb-theme-default .appearance-ghost.status-basic[nbButtonToggle]:focus{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.4);color:#8f9bb3}.nb-theme-default [nbButton].appearance-ghost.status-basic:hover,.nb-theme-default .appearance-ghost.status-basic[nbButtonToggle]:hover{background-color:rgba(143,155,179,.08);border-color:rgba(0,0,0,0);color:#8f9bb3}.nb-theme-default [nbButton].appearance-ghost.status-basic:active,.nb-theme-default .appearance-ghost.status-basic[nbButtonToggle]:active{background-color:rgba(143,155,179,.16);border-color:rgba(0,0,0,0);color:#8f9bb3}.nb-theme-default [nbButton].appearance-ghost.status-basic[disabled],.nb-theme-default .appearance-ghost.status-basic[disabled][nbButtonToggle],.nb-theme-default [nbButton].appearance-ghost.status-basic.btn-disabled,.nb-theme-default .appearance-ghost.status-basic.btn-disabled[nbButtonToggle]{background-color:rgba(143,155,179,.16);border-color:rgba(0,0,0,0);color:rgba(143,155,179,.48)}.nb-theme-default [nbButton].appearance-ghost.status-primary,.nb-theme-default .appearance-ghost.status-primary[nbButtonToggle]{color:#36f}.nb-theme-default [nbButton].appearance-ghost.status-primary:focus,.nb-theme-default .appearance-ghost.status-primary[nbButtonToggle]:focus{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.4);color:#36f}.nb-theme-default [nbButton].appearance-ghost.status-primary:hover,.nb-theme-default .appearance-ghost.status-primary[nbButtonToggle]:hover{background-color:rgba(143,155,179,.08);border-color:rgba(0,0,0,0);color:#36f}.nb-theme-default [nbButton].appearance-ghost.status-primary:active,.nb-theme-default .appearance-ghost.status-primary[nbButtonToggle]:active{background-color:rgba(143,155,179,.16);border-color:rgba(0,0,0,0);color:#36f}.nb-theme-default [nbButton].appearance-ghost.status-primary[disabled],.nb-theme-default .appearance-ghost.status-primary[disabled][nbButtonToggle],.nb-theme-default [nbButton].appearance-ghost.status-primary.btn-disabled,.nb-theme-default .appearance-ghost.status-primary.btn-disabled[nbButtonToggle]{background-color:rgba(143,155,179,.16);border-color:rgba(0,0,0,0);color:rgba(143,155,179,.48)}.nb-theme-default [nbButton].appearance-ghost.status-success,.nb-theme-default .appearance-ghost.status-success[nbButtonToggle]{color:#00d68f}.nb-theme-default [nbButton].appearance-ghost.status-success:focus,.nb-theme-default .appearance-ghost.status-success[nbButtonToggle]:focus{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.4);color:#00d68f}.nb-theme-default [nbButton].appearance-ghost.status-success:hover,.nb-theme-default .appearance-ghost.status-success[nbButtonToggle]:hover{background-color:rgba(143,155,179,.08);border-color:rgba(0,0,0,0);color:#00d68f}.nb-theme-default [nbButton].appearance-ghost.status-success:active,.nb-theme-default .appearance-ghost.status-success[nbButtonToggle]:active{background-color:rgba(143,155,179,.16);border-color:rgba(0,0,0,0);color:#00d68f}.nb-theme-default [nbButton].appearance-ghost.status-success[disabled],.nb-theme-default .appearance-ghost.status-success[disabled][nbButtonToggle],.nb-theme-default [nbButton].appearance-ghost.status-success.btn-disabled,.nb-theme-default .appearance-ghost.status-success.btn-disabled[nbButtonToggle]{background-color:rgba(143,155,179,.16);border-color:rgba(0,0,0,0);color:rgba(143,155,179,.48)}.nb-theme-default [nbButton].appearance-ghost.status-warning,.nb-theme-default .appearance-ghost.status-warning[nbButtonToggle]{color:#fa0}.nb-theme-default [nbButton].appearance-ghost.status-warning:focus,.nb-theme-default .appearance-ghost.status-warning[nbButtonToggle]:focus{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.4);color:#fa0}.nb-theme-default [nbButton].appearance-ghost.status-warning:hover,.nb-theme-default .appearance-ghost.status-warning[nbButtonToggle]:hover{background-color:rgba(143,155,179,.08);border-color:rgba(0,0,0,0);color:#fa0}.nb-theme-default [nbButton].appearance-ghost.status-warning:active,.nb-theme-default .appearance-ghost.status-warning[nbButtonToggle]:active{background-color:rgba(143,155,179,.16);border-color:rgba(0,0,0,0);color:#fa0}.nb-theme-default [nbButton].appearance-ghost.status-warning[disabled],.nb-theme-default .appearance-ghost.status-warning[disabled][nbButtonToggle],.nb-theme-default [nbButton].appearance-ghost.status-warning.btn-disabled,.nb-theme-default .appearance-ghost.status-warning.btn-disabled[nbButtonToggle]{background-color:rgba(143,155,179,.16);border-color:rgba(0,0,0,0);color:rgba(143,155,179,.48)}.nb-theme-default [nbButton].appearance-ghost.status-danger,.nb-theme-default .appearance-ghost.status-danger[nbButtonToggle]{color:#ff3d71}.nb-theme-default [nbButton].appearance-ghost.status-danger:focus,.nb-theme-default .appearance-ghost.status-danger[nbButtonToggle]:focus{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.4);color:#ff3d71}.nb-theme-default [nbButton].appearance-ghost.status-danger:hover,.nb-theme-default .appearance-ghost.status-danger[nbButtonToggle]:hover{background-color:rgba(143,155,179,.08);border-color:rgba(0,0,0,0);color:#ff3d71}.nb-theme-default [nbButton].appearance-ghost.status-danger:active,.nb-theme-default .appearance-ghost.status-danger[nbButtonToggle]:active{background-color:rgba(143,155,179,.16);border-color:rgba(0,0,0,0);color:#ff3d71}.nb-theme-default [nbButton].appearance-ghost.status-danger[disabled],.nb-theme-default .appearance-ghost.status-danger[disabled][nbButtonToggle],.nb-theme-default [nbButton].appearance-ghost.status-danger.btn-disabled,.nb-theme-default .appearance-ghost.status-danger.btn-disabled[nbButtonToggle]{background-color:rgba(143,155,179,.16);border-color:rgba(0,0,0,0);color:rgba(143,155,179,.48)}.nb-theme-default [nbButton].appearance-ghost.status-info,.nb-theme-default .appearance-ghost.status-info[nbButtonToggle]{color:#0095ff}.nb-theme-default [nbButton].appearance-ghost.status-info:focus,.nb-theme-default .appearance-ghost.status-info[nbButtonToggle]:focus{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.4);color:#0095ff}.nb-theme-default [nbButton].appearance-ghost.status-info:hover,.nb-theme-default .appearance-ghost.status-info[nbButtonToggle]:hover{background-color:rgba(143,155,179,.08);border-color:rgba(0,0,0,0);color:#0095ff}.nb-theme-default [nbButton].appearance-ghost.status-info:active,.nb-theme-default .appearance-ghost.status-info[nbButtonToggle]:active{background-color:rgba(143,155,179,.16);border-color:rgba(0,0,0,0);color:#0095ff}.nb-theme-default [nbButton].appearance-ghost.status-info[disabled],.nb-theme-default .appearance-ghost.status-info[disabled][nbButtonToggle],.nb-theme-default [nbButton].appearance-ghost.status-info.btn-disabled,.nb-theme-default .appearance-ghost.status-info.btn-disabled[nbButtonToggle]{background-color:rgba(143,155,179,.16);border-color:rgba(0,0,0,0);color:rgba(143,155,179,.48)}.nb-theme-default [nbButton].appearance-ghost.status-control,.nb-theme-default .appearance-ghost.status-control[nbButtonToggle]{color:#fff}.nb-theme-default [nbButton].appearance-ghost.status-control:focus,.nb-theme-default .appearance-ghost.status-control[nbButtonToggle]:focus{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.4);color:#fff}.nb-theme-default [nbButton].appearance-ghost.status-control:hover,.nb-theme-default .appearance-ghost.status-control[nbButtonToggle]:hover{background-color:rgba(143,155,179,.08);border-color:rgba(0,0,0,0);color:#fff}.nb-theme-default [nbButton].appearance-ghost.status-control:active,.nb-theme-default .appearance-ghost.status-control[nbButtonToggle]:active{background-color:rgba(143,155,179,.16);border-color:rgba(0,0,0,0);color:#fff}.nb-theme-default [nbButton].appearance-ghost.status-control[disabled],.nb-theme-default .appearance-ghost.status-control[disabled][nbButtonToggle],.nb-theme-default [nbButton].appearance-ghost.status-control.btn-disabled,.nb-theme-default .appearance-ghost.status-control.btn-disabled[nbButtonToggle]{background-color:rgba(143,155,179,.16);border-color:rgba(0,0,0,0);color:rgba(143,155,179,.48)}.nb-theme-default [nbButton].appearance-hero,.nb-theme-default .appearance-hero[nbButtonToggle]{text-shadow:0 .5rem 1rem 0 rgba(44,51,73,.1);text-transform:uppercase}.nb-theme-default [nbButton].appearance-hero.size-tiny,.nb-theme-default .appearance-hero.size-tiny[nbButtonToggle]{padding:.375rem .6875rem}.nb-theme-default [nbButton].appearance-hero.size-small,.nb-theme-default .appearance-hero.size-small[nbButtonToggle]{padding:.5rem .9375rem}.nb-theme-default [nbButton].appearance-hero.size-medium,.nb-theme-default .appearance-hero.size-medium[nbButtonToggle]{padding:.75rem 1.1875rem}.nb-theme-default [nbButton].appearance-hero.size-large,.nb-theme-default .appearance-hero.size-large[nbButtonToggle]{padding:.875rem 1.1875rem}.nb-theme-default [nbButton].appearance-hero.size-giant,.nb-theme-default .appearance-hero.size-giant[nbButtonToggle]{padding:1rem 1.4375rem}.nb-theme-default [nbButton].appearance-hero.status-basic,.nb-theme-default .appearance-hero.status-basic[nbButtonToggle]{background-image:linear-gradient(to right, #f7f9fc, #edf1f7);border:none;box-shadow:0 0 0 0 #8f9bb3,0 0 0 0 #2e3a59,0 0 rgba(0,0,0,0);color:#8f9bb3}.nb-theme-default [nbButton].appearance-hero.status-basic:focus,.nb-theme-default .appearance-hero.status-basic[nbButtonToggle]:focus{background-image:linear-gradient(to right, #edf1f7, #e4e9f2);box-shadow:0 0 0 0 #8f9bb3,0 0 0 0 #2e3a59,0 0 rgba(0,0,0,0),0 0 0 .375rem rgba(143,155,179,.16)}.nb-theme-default [nbButton].appearance-hero.status-basic:hover,.nb-theme-default .appearance-hero.status-basic[nbButtonToggle]:hover{background-image:linear-gradient(to right, #ffffff, #f7f9fc)}.nb-theme-default [nbButton].appearance-hero.status-basic:active,.nb-theme-default .appearance-hero.status-basic[nbButtonToggle]:active{background-image:linear-gradient(to right, #edf1f7, #e4e9f2)}.nb-theme-default [nbButton].appearance-hero.status-basic[disabled],.nb-theme-default .appearance-hero.status-basic[disabled][nbButtonToggle],.nb-theme-default [nbButton].appearance-hero.status-basic.btn-disabled,.nb-theme-default .appearance-hero.status-basic.btn-disabled[nbButtonToggle]{background-color:rgba(143,155,179,.24);background-image:none;color:rgba(143,155,179,.48)}.nb-theme-default [nbButton].appearance-hero.status-basic.button-pulse,.nb-theme-default .appearance-hero.status-basic.button-pulse[nbButtonToggle]{animation:button-hero-basic-pulse .75s infinite alternate}@keyframes button-hero-basic-pulse{0%{box-shadow:none;opacity:.3}100%{box-shadow:0 0 1rem 0 #f7f9fc;opacity:.8}}.nb-theme-default [nbButton].appearance-hero.status-primary,.nb-theme-default .appearance-hero.status-primary[nbButtonToggle]{background-image:linear-gradient(to right, #598bff, #3366ff);border:none;box-shadow:0 0 0 0 #274bdb,0 0 0 0 #1a34b8,0 0 rgba(0,0,0,0);color:#fff}.nb-theme-default [nbButton].appearance-hero.status-primary:focus,.nb-theme-default .appearance-hero.status-primary[nbButtonToggle]:focus{background-image:linear-gradient(to right, #3366ff, #274bdb);box-shadow:0 0 0 0 #274bdb,0 0 0 0 #1a34b8,0 0 rgba(0,0,0,0),0 0 0 .375rem rgba(143,155,179,.16)}.nb-theme-default [nbButton].appearance-hero.status-primary:hover,.nb-theme-default .appearance-hero.status-primary[nbButtonToggle]:hover{background-image:linear-gradient(to right, #a6c1ff, #598bff)}.nb-theme-default [nbButton].appearance-hero.status-primary:active,.nb-theme-default .appearance-hero.status-primary[nbButtonToggle]:active{background-image:linear-gradient(to right, #3366ff, #274bdb)}.nb-theme-default [nbButton].appearance-hero.status-primary[disabled],.nb-theme-default .appearance-hero.status-primary[disabled][nbButtonToggle],.nb-theme-default [nbButton].appearance-hero.status-primary.btn-disabled,.nb-theme-default .appearance-hero.status-primary.btn-disabled[nbButtonToggle]{background-color:rgba(143,155,179,.24);background-image:none;color:rgba(143,155,179,.48)}.nb-theme-default [nbButton].appearance-hero.status-primary.button-pulse,.nb-theme-default .appearance-hero.status-primary.button-pulse[nbButtonToggle]{animation:button-hero-primary-pulse .75s infinite alternate}@keyframes button-hero-primary-pulse{0%{box-shadow:none;opacity:.3}100%{box-shadow:0 0 1rem 0 #598bff;opacity:.8}}.nb-theme-default [nbButton].appearance-hero.status-success,.nb-theme-default .appearance-hero.status-success[nbButtonToggle]{background-image:linear-gradient(to right, #2ce69b, #00d68f);border:none;box-shadow:0 0 0 0 #00b887,0 0 0 0 #00997a,0 0 rgba(0,0,0,0);color:#fff}.nb-theme-default [nbButton].appearance-hero.status-success:focus,.nb-theme-default .appearance-hero.status-success[nbButtonToggle]:focus{background-image:linear-gradient(to right, #00d68f, #00b887);box-shadow:0 0 0 0 #00b887,0 0 0 0 #00997a,0 0 rgba(0,0,0,0),0 0 0 .375rem rgba(143,155,179,.16)}.nb-theme-default [nbButton].appearance-hero.status-success:hover,.nb-theme-default .appearance-hero.status-success[nbButtonToggle]:hover{background-image:linear-gradient(to right, #8cfac7, #2ce69b)}.nb-theme-default [nbButton].appearance-hero.status-success:active,.nb-theme-default .appearance-hero.status-success[nbButtonToggle]:active{background-image:linear-gradient(to right, #00d68f, #00b887)}.nb-theme-default [nbButton].appearance-hero.status-success[disabled],.nb-theme-default .appearance-hero.status-success[disabled][nbButtonToggle],.nb-theme-default [nbButton].appearance-hero.status-success.btn-disabled,.nb-theme-default .appearance-hero.status-success.btn-disabled[nbButtonToggle]{background-color:rgba(143,155,179,.24);background-image:none;color:rgba(143,155,179,.48)}.nb-theme-default [nbButton].appearance-hero.status-success.button-pulse,.nb-theme-default .appearance-hero.status-success.button-pulse[nbButtonToggle]{animation:button-hero-success-pulse .75s infinite alternate}@keyframes button-hero-success-pulse{0%{box-shadow:none;opacity:.3}100%{box-shadow:0 0 1rem 0 #2ce69b;opacity:.8}}.nb-theme-default [nbButton].appearance-hero.status-warning,.nb-theme-default .appearance-hero.status-warning[nbButtonToggle]{background-image:linear-gradient(to right, #ffc94d, #ffaa00);border:none;box-shadow:0 0 0 0 #db8b00,0 0 0 0 #b86e00,0 0 rgba(0,0,0,0);color:#fff}.nb-theme-default [nbButton].appearance-hero.status-warning:focus,.nb-theme-default .appearance-hero.status-warning[nbButtonToggle]:focus{background-image:linear-gradient(to right, #ffaa00, #db8b00);box-shadow:0 0 0 0 #db8b00,0 0 0 0 #b86e00,0 0 rgba(0,0,0,0),0 0 0 .375rem rgba(143,155,179,.16)}.nb-theme-default [nbButton].appearance-hero.status-warning:hover,.nb-theme-default .appearance-hero.status-warning[nbButtonToggle]:hover{background-image:linear-gradient(to right, #ffe59e, #ffc94d)}.nb-theme-default [nbButton].appearance-hero.status-warning:active,.nb-theme-default .appearance-hero.status-warning[nbButtonToggle]:active{background-image:linear-gradient(to right, #ffaa00, #db8b00)}.nb-theme-default [nbButton].appearance-hero.status-warning[disabled],.nb-theme-default .appearance-hero.status-warning[disabled][nbButtonToggle],.nb-theme-default [nbButton].appearance-hero.status-warning.btn-disabled,.nb-theme-default .appearance-hero.status-warning.btn-disabled[nbButtonToggle]{background-color:rgba(143,155,179,.24);background-image:none;color:rgba(143,155,179,.48)}.nb-theme-default [nbButton].appearance-hero.status-warning.button-pulse,.nb-theme-default .appearance-hero.status-warning.button-pulse[nbButtonToggle]{animation:button-hero-warning-pulse .75s infinite alternate}@keyframes button-hero-warning-pulse{0%{box-shadow:none;opacity:.3}100%{box-shadow:0 0 1rem 0 #ffc94d;opacity:.8}}.nb-theme-default [nbButton].appearance-hero.status-danger,.nb-theme-default .appearance-hero.status-danger[nbButtonToggle]{background-image:linear-gradient(to right, #ff708d, #ff3d71);border:none;box-shadow:0 0 0 0 #db2c66,0 0 0 0 #b81d5b,0 0 rgba(0,0,0,0);color:#fff}.nb-theme-default [nbButton].appearance-hero.status-danger:focus,.nb-theme-default .appearance-hero.status-danger[nbButtonToggle]:focus{background-image:linear-gradient(to right, #ff3d71, #db2c66);box-shadow:0 0 0 0 #db2c66,0 0 0 0 #b81d5b,0 0 rgba(0,0,0,0),0 0 0 .375rem rgba(143,155,179,.16)}.nb-theme-default [nbButton].appearance-hero.status-danger:hover,.nb-theme-default .appearance-hero.status-danger[nbButtonToggle]:hover{background-image:linear-gradient(to right, #ffa8b4, #ff708d)}.nb-theme-default [nbButton].appearance-hero.status-danger:active,.nb-theme-default .appearance-hero.status-danger[nbButtonToggle]:active{background-image:linear-gradient(to right, #ff3d71, #db2c66)}.nb-theme-default [nbButton].appearance-hero.status-danger[disabled],.nb-theme-default .appearance-hero.status-danger[disabled][nbButtonToggle],.nb-theme-default [nbButton].appearance-hero.status-danger.btn-disabled,.nb-theme-default .appearance-hero.status-danger.btn-disabled[nbButtonToggle]{background-color:rgba(143,155,179,.24);background-image:none;color:rgba(143,155,179,.48)}.nb-theme-default [nbButton].appearance-hero.status-danger.button-pulse,.nb-theme-default .appearance-hero.status-danger.button-pulse[nbButtonToggle]{animation:button-hero-danger-pulse .75s infinite alternate}@keyframes button-hero-danger-pulse{0%{box-shadow:none;opacity:.3}100%{box-shadow:0 0 1rem 0 #ff708d;opacity:.8}}.nb-theme-default [nbButton].appearance-hero.status-info,.nb-theme-default .appearance-hero.status-info[nbButtonToggle]{background-image:linear-gradient(to right, #42aaff, #0095ff);border:none;box-shadow:0 0 0 0 #006fd6,0 0 0 0 #0057c2,0 0 rgba(0,0,0,0);color:#fff}.nb-theme-default [nbButton].appearance-hero.status-info:focus,.nb-theme-default .appearance-hero.status-info[nbButtonToggle]:focus{background-image:linear-gradient(to right, #0095ff, #006fd6);box-shadow:0 0 0 0 #006fd6,0 0 0 0 #0057c2,0 0 rgba(0,0,0,0),0 0 0 .375rem rgba(143,155,179,.16)}.nb-theme-default [nbButton].appearance-hero.status-info:hover,.nb-theme-default .appearance-hero.status-info[nbButtonToggle]:hover{background-image:linear-gradient(to right, #94cbff, #42aaff)}.nb-theme-default [nbButton].appearance-hero.status-info:active,.nb-theme-default .appearance-hero.status-info[nbButtonToggle]:active{background-image:linear-gradient(to right, #0095ff, #006fd6)}.nb-theme-default [nbButton].appearance-hero.status-info[disabled],.nb-theme-default .appearance-hero.status-info[disabled][nbButtonToggle],.nb-theme-default [nbButton].appearance-hero.status-info.btn-disabled,.nb-theme-default .appearance-hero.status-info.btn-disabled[nbButtonToggle]{background-color:rgba(143,155,179,.24);background-image:none;color:rgba(143,155,179,.48)}.nb-theme-default [nbButton].appearance-hero.status-info.button-pulse,.nb-theme-default .appearance-hero.status-info.button-pulse[nbButtonToggle]{animation:button-hero-info-pulse .75s infinite alternate}@keyframes button-hero-info-pulse{0%{box-shadow:none;opacity:.3}100%{box-shadow:0 0 1rem 0 #42aaff;opacity:.8}}.nb-theme-default [nbButton].appearance-hero.status-control,.nb-theme-default .appearance-hero.status-control[nbButtonToggle]{background-image:linear-gradient(to right, #ffffff, #ffffff);border:none;box-shadow:0 0 0 0 #8f9bb3,0 0 0 0 #2e3a59,0 0 rgba(0,0,0,0);color:#222b45}.nb-theme-default [nbButton].appearance-hero.status-control:focus,.nb-theme-default .appearance-hero.status-control[nbButtonToggle]:focus{background-image:linear-gradient(to right, #f7f9fc, #edf1f7);box-shadow:0 0 0 0 #8f9bb3,0 0 0 0 #2e3a59,0 0 rgba(0,0,0,0),0 0 0 .375rem rgba(143,155,179,.16)}.nb-theme-default [nbButton].appearance-hero.status-control:hover,.nb-theme-default .appearance-hero.status-control[nbButtonToggle]:hover{background-image:linear-gradient(to right, #ffffff, #f7f9fc)}.nb-theme-default [nbButton].appearance-hero.status-control:active,.nb-theme-default .appearance-hero.status-control[nbButtonToggle]:active{background-image:linear-gradient(to right, #f7f9fc, #edf1f7)}.nb-theme-default [nbButton].appearance-hero.status-control[disabled],.nb-theme-default .appearance-hero.status-control[disabled][nbButtonToggle],.nb-theme-default [nbButton].appearance-hero.status-control.btn-disabled,.nb-theme-default .appearance-hero.status-control.btn-disabled[nbButtonToggle]{background-color:rgba(143,155,179,.24);background-image:none;color:rgba(143,155,179,.48)}.nb-theme-default [nbButton].appearance-hero.status-control.button-pulse,.nb-theme-default .appearance-hero.status-control.button-pulse[nbButtonToggle]{animation:button-hero-control-pulse .75s infinite alternate}@keyframes button-hero-control-pulse{0%{box-shadow:none;opacity:.3}100%{box-shadow:0 0 1rem 0 #fff;opacity:.8}}.nb-theme-default nb-button-group{display:inline-flex}[dir=ltr] .nb-theme-default nb-button-group [nbButton]:first-child:not(:last-child),[dir=ltr] .nb-theme-default nb-button-group [nbButtonToggle]:first-child:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}[dir=ltr] .nb-theme-default nb-button-group [nbButton]:last-child:not(:first-child),[dir=ltr] .nb-theme-default nb-button-group [nbButtonToggle]:last-child:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}[dir=rtl] .nb-theme-default nb-button-group [nbButton]:first-child:not(:last-child),[dir=rtl] .nb-theme-default nb-button-group [nbButtonToggle]:first-child:not(:last-child){border-top-left-radius:0;border-bottom-left-radius:0}[dir=rtl] .nb-theme-default nb-button-group [nbButton]:last-child:not(:first-child),[dir=rtl] .nb-theme-default nb-button-group [nbButtonToggle]:last-child:not(:first-child){border-top-right-radius:0;border-bottom-right-radius:0}.nb-theme-default nb-button-group [nbButton]:not(:first-child):not(:last-child),.nb-theme-default nb-button-group [nbButtonToggle]:not(:first-child):not(:last-child){border-radius:0}.nb-theme-default nb-button-group [nbButton].appearance-filled,.nb-theme-default nb-button-group [nbButton].appearance-ghost,.nb-theme-default nb-button-group [nbButtonToggle].appearance-filled,.nb-theme-default nb-button-group [nbButtonToggle].appearance-ghost{border-color:rgba(0,0,0,0)}[dir=ltr] .nb-theme-default nb-button-group [nbButton].appearance-filled.status-basic:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),[dir=ltr] .nb-theme-default nb-button-group [nbButtonToggle].appearance-filled.status-basic:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]){border-left-color:#c5cee0}[dir=rtl] .nb-theme-default nb-button-group [nbButton].appearance-filled.status-basic:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),[dir=rtl] .nb-theme-default nb-button-group [nbButtonToggle].appearance-filled.status-basic:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]){border-right-color:#c5cee0}.nb-theme-default nb-button-group [nbButton].appearance-filled.status-basic,.nb-theme-default nb-button-group [nbButtonToggle].appearance-filled.status-basic{color:#8f9bb3}[dir=ltr] .nb-theme-default nb-button-group [nbButton].appearance-filled.status-primary:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),[dir=ltr] .nb-theme-default nb-button-group [nbButtonToggle].appearance-filled.status-primary:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]){border-left-color:#274bdb}[dir=rtl] .nb-theme-default nb-button-group [nbButton].appearance-filled.status-primary:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),[dir=rtl] .nb-theme-default nb-button-group [nbButtonToggle].appearance-filled.status-primary:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]){border-right-color:#274bdb}.nb-theme-default nb-button-group [nbButton].appearance-filled.status-primary,.nb-theme-default nb-button-group [nbButtonToggle].appearance-filled.status-primary{color:#fff}[dir=ltr] .nb-theme-default nb-button-group [nbButton].appearance-filled.status-success:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),[dir=ltr] .nb-theme-default nb-button-group [nbButtonToggle].appearance-filled.status-success:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]){border-left-color:#00b887}[dir=rtl] .nb-theme-default nb-button-group [nbButton].appearance-filled.status-success:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),[dir=rtl] .nb-theme-default nb-button-group [nbButtonToggle].appearance-filled.status-success:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]){border-right-color:#00b887}.nb-theme-default nb-button-group [nbButton].appearance-filled.status-success,.nb-theme-default nb-button-group [nbButtonToggle].appearance-filled.status-success{color:#fff}[dir=ltr] .nb-theme-default nb-button-group [nbButton].appearance-filled.status-warning:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),[dir=ltr] .nb-theme-default nb-button-group [nbButtonToggle].appearance-filled.status-warning:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]){border-left-color:#db8b00}[dir=rtl] .nb-theme-default nb-button-group [nbButton].appearance-filled.status-warning:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),[dir=rtl] .nb-theme-default nb-button-group [nbButtonToggle].appearance-filled.status-warning:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]){border-right-color:#db8b00}.nb-theme-default nb-button-group [nbButton].appearance-filled.status-warning,.nb-theme-default nb-button-group [nbButtonToggle].appearance-filled.status-warning{color:#fff}[dir=ltr] .nb-theme-default nb-button-group [nbButton].appearance-filled.status-danger:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),[dir=ltr] .nb-theme-default nb-button-group [nbButtonToggle].appearance-filled.status-danger:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]){border-left-color:#db2c66}[dir=rtl] .nb-theme-default nb-button-group [nbButton].appearance-filled.status-danger:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),[dir=rtl] .nb-theme-default nb-button-group [nbButtonToggle].appearance-filled.status-danger:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]){border-right-color:#db2c66}.nb-theme-default nb-button-group [nbButton].appearance-filled.status-danger,.nb-theme-default nb-button-group [nbButtonToggle].appearance-filled.status-danger{color:#fff}[dir=ltr] .nb-theme-default nb-button-group [nbButton].appearance-filled.status-info:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),[dir=ltr] .nb-theme-default nb-button-group [nbButtonToggle].appearance-filled.status-info:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]){border-left-color:#006fd6}[dir=rtl] .nb-theme-default nb-button-group [nbButton].appearance-filled.status-info:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),[dir=rtl] .nb-theme-default nb-button-group [nbButtonToggle].appearance-filled.status-info:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]){border-right-color:#006fd6}.nb-theme-default nb-button-group [nbButton].appearance-filled.status-info,.nb-theme-default nb-button-group [nbButtonToggle].appearance-filled.status-info{color:#fff}[dir=ltr] .nb-theme-default nb-button-group [nbButton].appearance-filled.status-control:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),[dir=ltr] .nb-theme-default nb-button-group [nbButtonToggle].appearance-filled.status-control:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]){border-left-color:#edf1f7}[dir=rtl] .nb-theme-default nb-button-group [nbButton].appearance-filled.status-control:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),[dir=rtl] .nb-theme-default nb-button-group [nbButtonToggle].appearance-filled.status-control:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]){border-right-color:#edf1f7}.nb-theme-default nb-button-group [nbButton].appearance-filled.status-control,.nb-theme-default nb-button-group [nbButtonToggle].appearance-filled.status-control{color:#222b45}[dir=ltr] .nb-theme-default nb-button-group [nbButton].appearance-ghost:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),[dir=ltr] .nb-theme-default nb-button-group [nbButtonToggle].appearance-ghost:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]){border-left-color:#c5cee0}[dir=rtl] .nb-theme-default nb-button-group [nbButton].appearance-ghost:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]),[dir=rtl] .nb-theme-default nb-button-group [nbButtonToggle].appearance-ghost:not(:first-child):not(:hover):not(:focus):not(:active):not([disabled]){border-right-color:#c5cee0}.nb-theme-default nb-list-item{border-bottom:1px solid #edf1f7;color:#222b45;font-family:Open Sans, sans-serif;font-size:.9375rem;font-weight:400;line-height:1.25rem;padding:1rem}.nb-theme-default nb-list-item:first-child{border-top:1px solid #edf1f7}.nb-theme-default [nbInput]{border-style:solid;border-width:1px;font-family:Open Sans, sans-serif;-webkit-appearance:none;-moz-appearance:none;appearance:none}.nb-theme-default [nbInput].nb-transition{transition-duration:.15s;transition-property:border,background-color,color,box-shadow;transition-timing-function:ease-in}.nb-theme-default [nbInput]::-moz-placeholder{font-family:Open Sans, sans-serif;text-overflow:ellipsis}.nb-theme-default [nbInput]::placeholder{font-family:Open Sans, sans-serif;text-overflow:ellipsis}.nb-theme-default [nbInput]:focus{outline:none}.nb-theme-default [nbInput].input-full-width{width:100%}.nb-theme-default [nbInput].status-basic{background-color:#f7f9fc;border-color:#e4e9f2;color:#222b45}.nb-theme-default [nbInput].status-basic::-moz-placeholder{color:#8f9bb3}.nb-theme-default [nbInput].status-basic::placeholder{color:#8f9bb3}.nb-theme-default [nbInput].status-basic:focus{background-color:#fff;border-color:#36f}.nb-theme-default [nbInput].status-basic:hover{background-color:#edf1f7;border-color:#e4e9f2}.nb-theme-default [nbInput].status-basic:focus:hover{background-color:#edf1f7;border-color:#e4e9f2}.nb-theme-default [nbInput].status-basic:disabled{background-color:#f7f9fc;border-color:#e4e9f2;color:rgba(143,155,179,.48)}.nb-theme-default [nbInput].status-basic:disabled::-moz-placeholder{color:rgba(143,155,179,.48)}.nb-theme-default [nbInput].status-basic:disabled::placeholder{color:rgba(143,155,179,.48)}.nb-theme-default [nbInput].status-primary{background-color:#f7f9fc;border-color:#36f;color:#222b45}.nb-theme-default [nbInput].status-primary::-moz-placeholder{color:#8f9bb3}.nb-theme-default [nbInput].status-primary::placeholder{color:#8f9bb3}.nb-theme-default [nbInput].status-primary:focus{background-color:#fff;border-color:#1a34b8}.nb-theme-default [nbInput].status-primary:hover{background-color:#edf1f7;border-color:#598bff}.nb-theme-default [nbInput].status-primary:focus:hover{background-color:#edf1f7;border-color:#598bff}.nb-theme-default [nbInput].status-primary:disabled{background-color:#f7f9fc;border-color:#e4e9f2;color:rgba(143,155,179,.48)}.nb-theme-default [nbInput].status-primary:disabled::-moz-placeholder{color:rgba(143,155,179,.48)}.nb-theme-default [nbInput].status-primary:disabled::placeholder{color:rgba(143,155,179,.48)}.nb-theme-default [nbInput].status-success{background-color:#f7f9fc;border-color:#00d68f;color:#222b45}.nb-theme-default [nbInput].status-success::-moz-placeholder{color:#8f9bb3}.nb-theme-default [nbInput].status-success::placeholder{color:#8f9bb3}.nb-theme-default [nbInput].status-success:focus{background-color:#fff;border-color:#00997a}.nb-theme-default [nbInput].status-success:hover{background-color:#edf1f7;border-color:#2ce69b}.nb-theme-default [nbInput].status-success:focus:hover{background-color:#edf1f7;border-color:#2ce69b}.nb-theme-default [nbInput].status-success:disabled{background-color:#f7f9fc;border-color:#e4e9f2;color:rgba(143,155,179,.48)}.nb-theme-default [nbInput].status-success:disabled::-moz-placeholder{color:rgba(143,155,179,.48)}.nb-theme-default [nbInput].status-success:disabled::placeholder{color:rgba(143,155,179,.48)}.nb-theme-default [nbInput].status-warning{background-color:#f7f9fc;border-color:#fa0;color:#222b45}.nb-theme-default [nbInput].status-warning::-moz-placeholder{color:#8f9bb3}.nb-theme-default [nbInput].status-warning::placeholder{color:#8f9bb3}.nb-theme-default [nbInput].status-warning:focus{background-color:#fff;border-color:#b86e00}.nb-theme-default [nbInput].status-warning:hover{background-color:#edf1f7;border-color:#ffc94d}.nb-theme-default [nbInput].status-warning:focus:hover{background-color:#edf1f7;border-color:#ffc94d}.nb-theme-default [nbInput].status-warning:disabled{background-color:#f7f9fc;border-color:#e4e9f2;color:rgba(143,155,179,.48)}.nb-theme-default [nbInput].status-warning:disabled::-moz-placeholder{color:rgba(143,155,179,.48)}.nb-theme-default [nbInput].status-warning:disabled::placeholder{color:rgba(143,155,179,.48)}.nb-theme-default [nbInput].status-danger{background-color:#f7f9fc;border-color:#ff3d71;color:#222b45}.nb-theme-default [nbInput].status-danger::-moz-placeholder{color:#8f9bb3}.nb-theme-default [nbInput].status-danger::placeholder{color:#8f9bb3}.nb-theme-default [nbInput].status-danger:focus{background-color:#fff;border-color:#b81d5b}.nb-theme-default [nbInput].status-danger:hover{background-color:#edf1f7;border-color:#ff708d}.nb-theme-default [nbInput].status-danger:focus:hover{background-color:#edf1f7;border-color:#ff708d}.nb-theme-default [nbInput].status-danger:disabled{background-color:#f7f9fc;border-color:#e4e9f2;color:rgba(143,155,179,.48)}.nb-theme-default [nbInput].status-danger:disabled::-moz-placeholder{color:rgba(143,155,179,.48)}.nb-theme-default [nbInput].status-danger:disabled::placeholder{color:rgba(143,155,179,.48)}.nb-theme-default [nbInput].status-info{background-color:#f7f9fc;border-color:#0095ff;color:#222b45}.nb-theme-default [nbInput].status-info::-moz-placeholder{color:#8f9bb3}.nb-theme-default [nbInput].status-info::placeholder{color:#8f9bb3}.nb-theme-default [nbInput].status-info:focus{background-color:#fff;border-color:#0057c2}.nb-theme-default [nbInput].status-info:hover{background-color:#edf1f7;border-color:#42aaff}.nb-theme-default [nbInput].status-info:focus:hover{background-color:#edf1f7;border-color:#42aaff}.nb-theme-default [nbInput].status-info:disabled{background-color:#f7f9fc;border-color:#e4e9f2;color:rgba(143,155,179,.48)}.nb-theme-default [nbInput].status-info:disabled::-moz-placeholder{color:rgba(143,155,179,.48)}.nb-theme-default [nbInput].status-info:disabled::placeholder{color:rgba(143,155,179,.48)}.nb-theme-default [nbInput].status-control{background-color:rgba(255,255,255,.24);border-color:rgba(255,255,255,.4);color:#fff}.nb-theme-default [nbInput].status-control::-moz-placeholder{color:#fff}.nb-theme-default [nbInput].status-control::placeholder{color:#fff}.nb-theme-default [nbInput].status-control:focus{background-color:rgba(255,255,255,.4);border-color:#fff}.nb-theme-default [nbInput].status-control:hover{background-color:rgba(255,255,255,.32);border-color:#fff}.nb-theme-default [nbInput].status-control:focus:hover{background-color:rgba(255,255,255,.32);border-color:#fff}.nb-theme-default [nbInput].status-control:disabled{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24);color:#fff}.nb-theme-default [nbInput].status-control:disabled::-moz-placeholder{color:#fff}.nb-theme-default [nbInput].status-control:disabled::placeholder{color:#fff}.nb-theme-default [nbInput].size-tiny{font-size:.75rem;font-weight:600;line-height:1rem;padding:.1875rem 1rem}.nb-theme-default [nbInput].size-tiny:not(.input-full-width){max-width:20rem}.nb-theme-default [nbInput].size-tiny::-moz-placeholder{font-size:.9375rem;font-weight:400;line-height:1.25rem}.nb-theme-default [nbInput].size-tiny::placeholder{font-size:.9375rem;font-weight:400;line-height:1.25rem}.nb-theme-default [nbInput].size-small{font-size:.8125rem;font-weight:600;line-height:1.5rem;padding:.1875rem 1rem}.nb-theme-default [nbInput].size-small:not(.input-full-width){max-width:20rem}.nb-theme-default [nbInput].size-small::-moz-placeholder{font-size:.9375rem;font-weight:400;line-height:1.25rem}.nb-theme-default [nbInput].size-small::placeholder{font-size:.9375rem;font-weight:400;line-height:1.25rem}.nb-theme-default [nbInput].size-medium{font-size:.9375rem;font-weight:600;line-height:1.5rem;padding:.4375rem 1rem}.nb-theme-default [nbInput].size-medium:not(.input-full-width){max-width:20rem}.nb-theme-default [nbInput].size-medium::-moz-placeholder{font-size:.9375rem;font-weight:400;line-height:1.25rem}.nb-theme-default [nbInput].size-medium::placeholder{font-size:.9375rem;font-weight:400;line-height:1.25rem}.nb-theme-default [nbInput].size-large{font-size:.9375rem;font-weight:600;line-height:1.5rem;padding:.6875rem 1rem}.nb-theme-default [nbInput].size-large:not(.input-full-width){max-width:30rem}.nb-theme-default [nbInput].size-large::-moz-placeholder{font-size:.9375rem;font-weight:400;line-height:1.25rem}.nb-theme-default [nbInput].size-large::placeholder{font-size:.9375rem;font-weight:400;line-height:1.25rem}.nb-theme-default [nbInput].size-giant{font-size:1.125rem;font-weight:700;line-height:1.5rem;padding:.9375rem 1rem}.nb-theme-default [nbInput].size-giant:not(.input-full-width){max-width:30rem}.nb-theme-default [nbInput].size-giant::-moz-placeholder{font-size:.9375rem;font-weight:400;line-height:1.25rem}.nb-theme-default [nbInput].size-giant::placeholder{font-size:.9375rem;font-weight:400;line-height:1.25rem}.nb-theme-default [nbInput].shape-rectangle{border-radius:.25rem}.nb-theme-default [nbInput].shape-semi-round{border-radius:.75rem}.nb-theme-default [nbInput].shape-round{border-radius:1.5rem}.nb-theme-default nb-form-field [nbInput]{width:100%}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix [nbInput].size-tiny{padding-left:1.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix [nbInput].size-tiny{padding-right:1.5rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-suffix [nbInput].size-tiny{padding-right:1.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-suffix [nbInput].size-tiny{padding-left:1.5rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix [nbInput].size-small{padding-left:2rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix [nbInput].size-small{padding-right:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-suffix [nbInput].size-small{padding-right:2rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-suffix [nbInput].size-small{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix [nbInput].size-medium{padding-left:2.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix [nbInput].size-medium{padding-right:2.5rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-suffix [nbInput].size-medium{padding-right:2.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-suffix [nbInput].size-medium{padding-left:2.5rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix [nbInput].size-large{padding-left:3rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix [nbInput].size-large{padding-right:3rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-suffix [nbInput].size-large{padding-right:3rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-suffix [nbInput].size-large{padding-left:3rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix [nbInput].size-giant{padding-left:3.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix [nbInput].size-giant{padding-right:3.5rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-suffix [nbInput].size-giant{padding-right:3.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-suffix [nbInput].size-giant{padding-left:3.5rem}.nb-theme-default .overlay-backdrop{background:rgba(0,0,0,.35)}.nb-theme-default .cdk-overlay-container{z-index:1040}.nb-theme-default nb-popover{border:1px solid rgba(0,0,0,0);border-radius:.25rem;background:#fff;box-shadow:0 .5rem 1rem 0 rgba(44,51,73,.1);color:#222b45}.nb-theme-default nb-popover .primitive-overlay{font-family:Open Sans, sans-serif;font-size:.9375rem;font-weight:400;line-height:1.25rem;padding:.75rem 1rem}.nb-theme-default nb-popover .arrow{border-left:.6875rem solid rgba(0,0,0,0);border-right:.6875rem solid rgba(0,0,0,0);border-bottom:.6875rem solid rgba(0,0,0,0)}.nb-theme-default nb-popover .arrow::after{position:absolute;content:" ";width:0;height:0;top:3px;left:calc(50% - 0.6875rem);border-left:.6875rem solid rgba(0,0,0,0);border-right:.6875rem solid rgba(0,0,0,0);border-bottom:.6875rem solid #fff;-webkit-clip-path:inset(0 0 2px);clip-path:inset(0 0 2px)}.nb-theme-default nb-popover.nb-overlay-bottom .arrow{top:calc(-1 * 0.6875rem + 1px);left:calc(50% - 0.6875rem)}.nb-theme-default nb-popover.nb-overlay-bottom-start .arrow{top:calc(-1 * 0.6875rem + 1px)}[dir=ltr] .nb-theme-default nb-popover.nb-overlay-bottom-start .arrow{right:.6875rem}[dir=rtl] .nb-theme-default nb-popover.nb-overlay-bottom-start .arrow{left:.6875rem}.nb-theme-default nb-popover.nb-overlay-bottom-end .arrow{top:calc(-1 * 0.6875rem + 1px)}[dir=ltr] .nb-theme-default nb-popover.nb-overlay-bottom-end .arrow{left:.6875rem}[dir=rtl] .nb-theme-default nb-popover.nb-overlay-bottom-end .arrow{right:.6875rem}.nb-theme-default nb-popover.nb-overlay-left .arrow{right:calc(-1 * 0.6875rem - 0.6875rem / 2 + 2px);top:calc(50% - 0.6875rem * 0.5);transform:rotate(90deg)}.nb-theme-default nb-popover.nb-overlay-start-top .arrow{right:calc(-1 * 0.6875rem - 0.6875rem / 2 + 2px);bottom:.6875rem;transform:rotate(90deg)}.nb-theme-default nb-popover.nb-overlay-start-bottom .arrow{right:calc(-1 * 0.6875rem - 0.6875rem / 2 + 2px);top:.6875rem;transform:rotate(90deg)}.nb-theme-default nb-popover.nb-overlay-top .arrow{bottom:calc(-1 * 0.6875rem + 1px);left:calc(50% - 0.6875rem);transform:rotate(180deg)}.nb-theme-default nb-popover.nb-overlay-top-start .arrow{bottom:calc(-1 * 0.6875rem + 1px);transform:rotate(180deg)}[dir=ltr] .nb-theme-default nb-popover.nb-overlay-top-start .arrow{right:.6875rem}[dir=rtl] .nb-theme-default nb-popover.nb-overlay-top-start .arrow{left:.6875rem}.nb-theme-default nb-popover.nb-overlay-top-end .arrow{bottom:calc(-1 * 0.6875rem + 1px);transform:rotate(180deg)}[dir=ltr] .nb-theme-default nb-popover.nb-overlay-top-end .arrow{left:.6875rem}[dir=rtl] .nb-theme-default nb-popover.nb-overlay-top-end .arrow{right:.6875rem}.nb-theme-default nb-popover.nb-overlay-right .arrow{left:calc(-1 * 0.6875rem - 0.6875rem / 2 + 2px);top:calc(50% - 0.6875rem * 0.5);transform:rotate(270deg)}.nb-theme-default nb-popover.nb-overlay-end-top .arrow{left:calc(-1 * 0.6875rem - 0.6875rem / 2 + 2px);bottom:.6875rem;transform:rotate(270deg)}.nb-theme-default nb-popover.nb-overlay-end-bottom .arrow{left:calc(-1 * 0.6875rem - 0.6875rem / 2 + 2px);top:.6875rem;transform:rotate(270deg)}.nb-theme-default .context-menu-host{cursor:pointer}.nb-theme-default nb-context-menu{background-color:#fff;border-color:rgba(0,0,0,0);border-style:solid;border-width:0;border-radius:.25rem;box-shadow:0 .5rem 1rem 0 rgba(44,51,73,.1);min-width:10rem;max-width:15rem}.nb-theme-default nb-context-menu nb-menu{border-radius:.25rem;overflow:hidden;text-align:center}.nb-theme-default nb-context-menu nb-menu nb-icon.expand-state svg{pointer-events:none}.nb-theme-default nb-select .select-button{min-width:13rem;cursor:pointer;font-family:Open Sans, sans-serif}.nb-theme-default nb-select .select-button.placeholder{font-family:Open Sans, sans-serif}.nb-theme-default nb-select .select-button:focus{outline:none}.nb-theme-default nb-select .select-button[disabled]{cursor:default}.nb-theme-default nb-select.size-tiny .select-button{font-size:.75rem;font-weight:600;line-height:1rem}.nb-theme-default nb-select.size-tiny .select-button.placeholder{font-size:.9375rem;font-weight:400}.nb-theme-default nb-select.size-tiny .select-button.empty::before{content:" ";display:block;height:1rem}.nb-theme-default nb-select.size-tiny:not(.full-width){max-width:20rem}.nb-theme-default nb-select.size-small .select-button{font-size:.8125rem;font-weight:600;line-height:1.5rem}.nb-theme-default nb-select.size-small .select-button.placeholder{font-size:.9375rem;font-weight:400}.nb-theme-default nb-select.size-small .select-button.empty::before{content:" ";display:block;height:1.5rem}.nb-theme-default nb-select.size-small:not(.full-width){max-width:20rem}.nb-theme-default nb-select.size-medium .select-button{font-size:.9375rem;font-weight:600;line-height:1.5rem}.nb-theme-default nb-select.size-medium .select-button.placeholder{font-size:.9375rem;font-weight:400}.nb-theme-default nb-select.size-medium .select-button.empty::before{content:" ";display:block;height:1.5rem}.nb-theme-default nb-select.size-medium:not(.full-width){max-width:20rem}.nb-theme-default nb-select.size-large .select-button{font-size:.9375rem;font-weight:600;line-height:1.5rem}.nb-theme-default nb-select.size-large .select-button.placeholder{font-size:.9375rem;font-weight:400}.nb-theme-default nb-select.size-large .select-button.empty::before{content:" ";display:block;height:1.5rem}.nb-theme-default nb-select.size-large:not(.full-width){max-width:30rem}.nb-theme-default nb-select.size-giant .select-button{font-size:1.125rem;font-weight:700;line-height:1.5rem}.nb-theme-default nb-select.size-giant .select-button.placeholder{font-size:.9375rem;font-weight:400}.nb-theme-default nb-select.size-giant .select-button.empty::before{content:" ";display:block;height:1.5rem}.nb-theme-default nb-select.size-giant:not(.full-width){max-width:30rem}.nb-theme-default nb-select.shape-rectangle .select-button{border-radius:.25rem}.nb-theme-default nb-select.shape-semi-round .select-button{border-radius:.75rem}.nb-theme-default nb-select.shape-round .select-button{border-radius:1.5rem}.nb-theme-default nb-select.appearance-outline .select-button{border-style:solid;border-width:1px}.nb-theme-default nb-select.appearance-outline .select-button.top{border-top-style:solid;border-top-width:1px}.nb-theme-default nb-select.appearance-outline .select-button.bottom{border-bottom-style:solid;border-bottom-width:1px}.nb-theme-default nb-select.appearance-outline.status-basic .select-button{background-color:#f7f9fc;border-color:#e4e9f2;color:#222b45}.nb-theme-default nb-select.appearance-outline.status-basic .select-button.placeholder{color:#8f9bb3}.nb-theme-default nb-select.appearance-outline.status-basic .select-button nb-icon{color:#8f9bb3}.nb-theme-default nb-select.appearance-outline.status-basic .select-button:focus{background-color:#fff;border-color:#36f}.nb-theme-default nb-select.appearance-outline.status-basic .select-button:hover{background-color:#edf1f7;border-color:#e4e9f2}.nb-theme-default nb-select.appearance-outline.status-basic .select-button:focus:hover{background-color:#edf1f7;border-color:#e4e9f2}.nb-theme-default nb-select.appearance-outline.status-basic .select-button[disabled]{color:rgba(143,155,179,.48);background-color:#f7f9fc;border-color:#e4e9f2}.nb-theme-default nb-select.appearance-outline.status-basic .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select.appearance-outline.status-basic .select-button.bottom,.nb-theme-default nb-select.appearance-outline.status-basic .select-button.top{border-color:#e4e9f2}.nb-theme-default nb-select.appearance-outline.status-basic .select-button.top{border-top-color:#e4e9f2}.nb-theme-default nb-select.appearance-outline.status-basic .select-button.bottom{border-bottom-color:#e4e9f2}.nb-theme-default nb-select.appearance-outline.status-primary .select-button{background-color:#f7f9fc;border-color:#36f;color:#222b45}.nb-theme-default nb-select.appearance-outline.status-primary .select-button.placeholder{color:#8f9bb3}.nb-theme-default nb-select.appearance-outline.status-primary .select-button nb-icon{color:#8f9bb3}.nb-theme-default nb-select.appearance-outline.status-primary .select-button:focus{background-color:#fff;border-color:#274bdb}.nb-theme-default nb-select.appearance-outline.status-primary .select-button:hover{background-color:#edf1f7;border-color:#598bff}.nb-theme-default nb-select.appearance-outline.status-primary .select-button:focus:hover{background-color:#edf1f7;border-color:#598bff}.nb-theme-default nb-select.appearance-outline.status-primary .select-button[disabled]{color:rgba(143,155,179,.48);background-color:#f7f9fc;border-color:#e4e9f2}.nb-theme-default nb-select.appearance-outline.status-primary .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select.appearance-outline.status-primary .select-button.bottom,.nb-theme-default nb-select.appearance-outline.status-primary .select-button.top{border-color:#36f}.nb-theme-default nb-select.appearance-outline.status-primary .select-button.top{border-top-color:#36f}.nb-theme-default nb-select.appearance-outline.status-primary .select-button.bottom{border-bottom-color:#36f}.nb-theme-default nb-select.appearance-outline.status-success .select-button{background-color:#f7f9fc;border-color:#00d68f;color:#222b45}.nb-theme-default nb-select.appearance-outline.status-success .select-button.placeholder{color:#8f9bb3}.nb-theme-default nb-select.appearance-outline.status-success .select-button nb-icon{color:#8f9bb3}.nb-theme-default nb-select.appearance-outline.status-success .select-button:focus{background-color:#fff;border-color:#00b887}.nb-theme-default nb-select.appearance-outline.status-success .select-button:hover{background-color:#edf1f7;border-color:#2ce69b}.nb-theme-default nb-select.appearance-outline.status-success .select-button:focus:hover{background-color:#edf1f7;border-color:#2ce69b}.nb-theme-default nb-select.appearance-outline.status-success .select-button[disabled]{color:rgba(143,155,179,.48);background-color:#f7f9fc;border-color:#e4e9f2}.nb-theme-default nb-select.appearance-outline.status-success .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select.appearance-outline.status-success .select-button.bottom,.nb-theme-default nb-select.appearance-outline.status-success .select-button.top{border-color:#00d68f}.nb-theme-default nb-select.appearance-outline.status-success .select-button.top{border-top-color:#00d68f}.nb-theme-default nb-select.appearance-outline.status-success .select-button.bottom{border-bottom-color:#00d68f}.nb-theme-default nb-select.appearance-outline.status-warning .select-button{background-color:#f7f9fc;border-color:#fa0;color:#222b45}.nb-theme-default nb-select.appearance-outline.status-warning .select-button.placeholder{color:#8f9bb3}.nb-theme-default nb-select.appearance-outline.status-warning .select-button nb-icon{color:#8f9bb3}.nb-theme-default nb-select.appearance-outline.status-warning .select-button:focus{background-color:#fff;border-color:#db8b00}.nb-theme-default nb-select.appearance-outline.status-warning .select-button:hover{background-color:#edf1f7;border-color:#ffc94d}.nb-theme-default nb-select.appearance-outline.status-warning .select-button:focus:hover{background-color:#edf1f7;border-color:#ffc94d}.nb-theme-default nb-select.appearance-outline.status-warning .select-button[disabled]{color:rgba(143,155,179,.48);background-color:#f7f9fc;border-color:#e4e9f2}.nb-theme-default nb-select.appearance-outline.status-warning .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select.appearance-outline.status-warning .select-button.bottom,.nb-theme-default nb-select.appearance-outline.status-warning .select-button.top{border-color:#fa0}.nb-theme-default nb-select.appearance-outline.status-warning .select-button.top{border-top-color:#fa0}.nb-theme-default nb-select.appearance-outline.status-warning .select-button.bottom{border-bottom-color:#fa0}.nb-theme-default nb-select.appearance-outline.status-danger .select-button{background-color:#f7f9fc;border-color:#ff3d71;color:#222b45}.nb-theme-default nb-select.appearance-outline.status-danger .select-button.placeholder{color:#8f9bb3}.nb-theme-default nb-select.appearance-outline.status-danger .select-button nb-icon{color:#8f9bb3}.nb-theme-default nb-select.appearance-outline.status-danger .select-button:focus{background-color:#fff;border-color:#db2c66}.nb-theme-default nb-select.appearance-outline.status-danger .select-button:hover{background-color:#edf1f7;border-color:#ff708d}.nb-theme-default nb-select.appearance-outline.status-danger .select-button:focus:hover{background-color:#edf1f7;border-color:#ff708d}.nb-theme-default nb-select.appearance-outline.status-danger .select-button[disabled]{color:rgba(143,155,179,.48);background-color:#f7f9fc;border-color:#e4e9f2}.nb-theme-default nb-select.appearance-outline.status-danger .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select.appearance-outline.status-danger .select-button.bottom,.nb-theme-default nb-select.appearance-outline.status-danger .select-button.top{border-color:#ff3d71}.nb-theme-default nb-select.appearance-outline.status-danger .select-button.top{border-top-color:#ff3d71}.nb-theme-default nb-select.appearance-outline.status-danger .select-button.bottom{border-bottom-color:#ff3d71}.nb-theme-default nb-select.appearance-outline.status-info .select-button{background-color:#f7f9fc;border-color:#0095ff;color:#222b45}.nb-theme-default nb-select.appearance-outline.status-info .select-button.placeholder{color:#8f9bb3}.nb-theme-default nb-select.appearance-outline.status-info .select-button nb-icon{color:#8f9bb3}.nb-theme-default nb-select.appearance-outline.status-info .select-button:focus{background-color:#fff;border-color:#006fd6}.nb-theme-default nb-select.appearance-outline.status-info .select-button:hover{background-color:#edf1f7;border-color:#42aaff}.nb-theme-default nb-select.appearance-outline.status-info .select-button:focus:hover{background-color:#edf1f7;border-color:#42aaff}.nb-theme-default nb-select.appearance-outline.status-info .select-button[disabled]{color:rgba(143,155,179,.48);background-color:#f7f9fc;border-color:#e4e9f2}.nb-theme-default nb-select.appearance-outline.status-info .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select.appearance-outline.status-info .select-button.bottom,.nb-theme-default nb-select.appearance-outline.status-info .select-button.top{border-color:#0095ff}.nb-theme-default nb-select.appearance-outline.status-info .select-button.top{border-top-color:#0095ff}.nb-theme-default nb-select.appearance-outline.status-info .select-button.bottom{border-bottom-color:#0095ff}.nb-theme-default nb-select.appearance-outline.status-control .select-button{background-color:rgba(255,255,255,.24);border-color:rgba(255,255,255,.4);color:#fff}.nb-theme-default nb-select.appearance-outline.status-control .select-button.placeholder{color:#fff}.nb-theme-default nb-select.appearance-outline.status-control .select-button nb-icon{color:#fff}.nb-theme-default nb-select.appearance-outline.status-control .select-button:focus{background-color:rgba(255,255,255,.4);border-color:#fff}.nb-theme-default nb-select.appearance-outline.status-control .select-button:hover{background-color:rgba(255,255,255,.32);border-color:#fff}.nb-theme-default nb-select.appearance-outline.status-control .select-button:focus:hover{background-color:rgba(255,255,255,.32);border-color:#fff}.nb-theme-default nb-select.appearance-outline.status-control .select-button[disabled]{color:#fff;background-color:rgba(143,155,179,.16);border-color:rgba(255,255,255,.4)}.nb-theme-default nb-select.appearance-outline.status-control .select-button[disabled] nb-icon{color:#fff}.nb-theme-default nb-select.appearance-outline.status-control .select-button.bottom,.nb-theme-default nb-select.appearance-outline.status-control .select-button.top{border-color:rgba(255,255,255,.4)}.nb-theme-default nb-select.appearance-outline.status-control .select-button.top{border-top-color:rgba(255,255,255,.4)}.nb-theme-default nb-select.appearance-outline.status-control .select-button.bottom{border-bottom-color:rgba(255,255,255,.4)}.nb-theme-default nb-select.appearance-outline.size-tiny .select-button{padding:.1875rem 1rem}[dir=ltr] .nb-theme-default nb-select.appearance-outline.size-tiny .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select.appearance-outline.size-tiny .select-button{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-outline.size-tiny .select-button{padding-left:1.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-outline.size-tiny .select-button{padding-right:1.5rem}.nb-theme-default nb-select.appearance-outline.size-small .select-button{padding:.1875rem 1rem}[dir=ltr] .nb-theme-default nb-select.appearance-outline.size-small .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select.appearance-outline.size-small .select-button{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-outline.size-small .select-button{padding-left:2rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-outline.size-small .select-button{padding-right:2rem}.nb-theme-default nb-select.appearance-outline.size-medium .select-button{padding:.4375rem 1rem}[dir=ltr] .nb-theme-default nb-select.appearance-outline.size-medium .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select.appearance-outline.size-medium .select-button{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-outline.size-medium .select-button{padding-left:2.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-outline.size-medium .select-button{padding-right:2.5rem}.nb-theme-default nb-select.appearance-outline.size-large .select-button{padding:.6875rem 1rem}[dir=ltr] .nb-theme-default nb-select.appearance-outline.size-large .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select.appearance-outline.size-large .select-button{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-outline.size-large .select-button{padding-left:3rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-outline.size-large .select-button{padding-right:3rem}.nb-theme-default nb-select.appearance-outline.size-giant .select-button{padding:.9375rem 1rem}[dir=ltr] .nb-theme-default nb-select.appearance-outline.size-giant .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select.appearance-outline.size-giant .select-button{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-outline.size-giant .select-button{padding-left:3.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-outline.size-giant .select-button{padding-right:3.5rem}.nb-theme-default nb-select.appearance-filled .select-button{border-style:solid;border-width:1px}.nb-theme-default nb-select.appearance-filled.size-tiny .select-button{padding:.1875rem 1rem}[dir=ltr] .nb-theme-default nb-select.appearance-filled.size-tiny .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select.appearance-filled.size-tiny .select-button{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-filled.size-tiny .select-button{padding-left:1.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-filled.size-tiny .select-button{padding-right:1.5rem}.nb-theme-default nb-select.appearance-filled.size-small .select-button{padding:.1875rem 1rem}[dir=ltr] .nb-theme-default nb-select.appearance-filled.size-small .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select.appearance-filled.size-small .select-button{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-filled.size-small .select-button{padding-left:2rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-filled.size-small .select-button{padding-right:2rem}.nb-theme-default nb-select.appearance-filled.size-medium .select-button{padding:.4375rem 1rem}[dir=ltr] .nb-theme-default nb-select.appearance-filled.size-medium .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select.appearance-filled.size-medium .select-button{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-filled.size-medium .select-button{padding-left:2.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-filled.size-medium .select-button{padding-right:2.5rem}.nb-theme-default nb-select.appearance-filled.size-large .select-button{padding:.6875rem 1rem}[dir=ltr] .nb-theme-default nb-select.appearance-filled.size-large .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select.appearance-filled.size-large .select-button{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-filled.size-large .select-button{padding-left:3rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-filled.size-large .select-button{padding-right:3rem}.nb-theme-default nb-select.appearance-filled.size-giant .select-button{padding:.9375rem 1rem}[dir=ltr] .nb-theme-default nb-select.appearance-filled.size-giant .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select.appearance-filled.size-giant .select-button{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-filled.size-giant .select-button{padding-left:3.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-filled.size-giant .select-button{padding-right:3.5rem}.nb-theme-default nb-select.appearance-filled.status-basic .select-button{background-color:#edf1f7;border-color:#edf1f7;color:#222b45}.nb-theme-default nb-select.appearance-filled.status-basic .select-button.placeholder{color:#8f9bb3}.nb-theme-default nb-select.appearance-filled.status-basic .select-button:focus{background-color:#e4e9f2;border-color:#c5cee0}.nb-theme-default nb-select.appearance-filled.status-basic .select-button:hover{background-color:#f7f9fc;border-color:#f7f9fc}.nb-theme-default nb-select.appearance-filled.status-basic .select-button:focus:hover{background-color:#f7f9fc;border-color:#f7f9fc}.nb-theme-default nb-select.appearance-filled.status-basic .select-button[disabled]{background-color:#f7f9fc;border-color:#f7f9fc;color:rgba(143,155,179,.48)}.nb-theme-default nb-select.appearance-filled.status-basic .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select.appearance-filled.status-basic .select-button nb-icon{color:#222b45}.nb-theme-default nb-select.appearance-filled.status-primary .select-button{background-color:#36f;border-color:#36f;color:#fff}.nb-theme-default nb-select.appearance-filled.status-primary .select-button.placeholder{color:#fff}.nb-theme-default nb-select.appearance-filled.status-primary .select-button:focus{background-color:#274bdb;border-color:#1a34b8}.nb-theme-default nb-select.appearance-filled.status-primary .select-button:hover{background-color:#598bff;border-color:#598bff}.nb-theme-default nb-select.appearance-filled.status-primary .select-button:focus:hover{background-color:#598bff;border-color:#598bff}.nb-theme-default nb-select.appearance-filled.status-primary .select-button[disabled]{background-color:#f7f9fc;border-color:#f7f9fc;color:rgba(143,155,179,.48)}.nb-theme-default nb-select.appearance-filled.status-primary .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select.appearance-filled.status-primary .select-button nb-icon{color:#fff}.nb-theme-default nb-select.appearance-filled.status-success .select-button{background-color:#00d68f;border-color:#00d68f;color:#fff}.nb-theme-default nb-select.appearance-filled.status-success .select-button.placeholder{color:#fff}.nb-theme-default nb-select.appearance-filled.status-success .select-button:focus{background-color:#00b887;border-color:#00997a}.nb-theme-default nb-select.appearance-filled.status-success .select-button:hover{background-color:#2ce69b;border-color:#2ce69b}.nb-theme-default nb-select.appearance-filled.status-success .select-button:focus:hover{background-color:#2ce69b;border-color:#2ce69b}.nb-theme-default nb-select.appearance-filled.status-success .select-button[disabled]{background-color:#f7f9fc;border-color:#f7f9fc;color:rgba(143,155,179,.48)}.nb-theme-default nb-select.appearance-filled.status-success .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select.appearance-filled.status-success .select-button nb-icon{color:#fff}.nb-theme-default nb-select.appearance-filled.status-warning .select-button{background-color:#fa0;border-color:#fa0;color:#fff}.nb-theme-default nb-select.appearance-filled.status-warning .select-button.placeholder{color:#fff}.nb-theme-default nb-select.appearance-filled.status-warning .select-button:focus{background-color:#db8b00;border-color:#b86e00}.nb-theme-default nb-select.appearance-filled.status-warning .select-button:hover{background-color:#ffc94d;border-color:#ffc94d}.nb-theme-default nb-select.appearance-filled.status-warning .select-button:focus:hover{background-color:#ffc94d;border-color:#ffc94d}.nb-theme-default nb-select.appearance-filled.status-warning .select-button[disabled]{background-color:#f7f9fc;border-color:#f7f9fc;color:rgba(143,155,179,.48)}.nb-theme-default nb-select.appearance-filled.status-warning .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select.appearance-filled.status-warning .select-button nb-icon{color:#fff}.nb-theme-default nb-select.appearance-filled.status-danger .select-button{background-color:#ff3d71;border-color:#ff3d71;color:#fff}.nb-theme-default nb-select.appearance-filled.status-danger .select-button.placeholder{color:#fff}.nb-theme-default nb-select.appearance-filled.status-danger .select-button:focus{background-color:#db2c66;border-color:#b81d5b}.nb-theme-default nb-select.appearance-filled.status-danger .select-button:hover{background-color:#ff708d;border-color:#ff708d}.nb-theme-default nb-select.appearance-filled.status-danger .select-button:focus:hover{background-color:#ff708d;border-color:#ff708d}.nb-theme-default nb-select.appearance-filled.status-danger .select-button[disabled]{background-color:#f7f9fc;border-color:#f7f9fc;color:rgba(143,155,179,.48)}.nb-theme-default nb-select.appearance-filled.status-danger .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select.appearance-filled.status-danger .select-button nb-icon{color:#fff}.nb-theme-default nb-select.appearance-filled.status-info .select-button{background-color:#0095ff;border-color:#0095ff;color:#fff}.nb-theme-default nb-select.appearance-filled.status-info .select-button.placeholder{color:#fff}.nb-theme-default nb-select.appearance-filled.status-info .select-button:focus{background-color:#006fd6;border-color:#0057c2}.nb-theme-default nb-select.appearance-filled.status-info .select-button:hover{background-color:#42aaff;border-color:#42aaff}.nb-theme-default nb-select.appearance-filled.status-info .select-button:focus:hover{background-color:#42aaff;border-color:#42aaff}.nb-theme-default nb-select.appearance-filled.status-info .select-button[disabled]{background-color:#f7f9fc;border-color:#f7f9fc;color:rgba(143,155,179,.48)}.nb-theme-default nb-select.appearance-filled.status-info .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select.appearance-filled.status-info .select-button nb-icon{color:#fff}.nb-theme-default nb-select.appearance-filled.status-control .select-button{background-color:#fff;border-color:#fff;color:#222b45}.nb-theme-default nb-select.appearance-filled.status-control .select-button.placeholder{color:#8f9bb3}.nb-theme-default nb-select.appearance-filled.status-control .select-button:focus{background-color:#edf1f7;border-color:#c5cee0}.nb-theme-default nb-select.appearance-filled.status-control .select-button:hover{background-color:#f7f9fc;border-color:#f7f9fc}.nb-theme-default nb-select.appearance-filled.status-control .select-button:focus:hover{background-color:#f7f9fc;border-color:#f7f9fc}.nb-theme-default nb-select.appearance-filled.status-control .select-button[disabled]{background-color:#f7f9fc;border-color:#f7f9fc;color:rgba(143,155,179,.48)}.nb-theme-default nb-select.appearance-filled.status-control .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select.appearance-filled.status-control .select-button nb-icon{color:#222b45}.nb-theme-default nb-select.appearance-hero .select-button{border:none}.nb-theme-default nb-select.appearance-hero.size-tiny .select-button{padding:.25rem 1rem}[dir=ltr] .nb-theme-default nb-select.appearance-hero.size-tiny .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select.appearance-hero.size-tiny .select-button{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-hero.size-tiny .select-button{padding-left:1.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-hero.size-tiny .select-button{padding-right:1.5rem}.nb-theme-default nb-select.appearance-hero.size-small .select-button{padding:.25rem 1rem}[dir=ltr] .nb-theme-default nb-select.appearance-hero.size-small .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select.appearance-hero.size-small .select-button{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-hero.size-small .select-button{padding-left:2rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-hero.size-small .select-button{padding-right:2rem}.nb-theme-default nb-select.appearance-hero.size-medium .select-button{padding:.5rem 1rem}[dir=ltr] .nb-theme-default nb-select.appearance-hero.size-medium .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select.appearance-hero.size-medium .select-button{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-hero.size-medium .select-button{padding-left:2.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-hero.size-medium .select-button{padding-right:2.5rem}.nb-theme-default nb-select.appearance-hero.size-large .select-button{padding:.75rem 1rem}[dir=ltr] .nb-theme-default nb-select.appearance-hero.size-large .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select.appearance-hero.size-large .select-button{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-hero.size-large .select-button{padding-left:3rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-hero.size-large .select-button{padding-right:3rem}.nb-theme-default nb-select.appearance-hero.size-giant .select-button{padding:1rem 1rem}[dir=ltr] .nb-theme-default nb-select.appearance-hero.size-giant .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select.appearance-hero.size-giant .select-button{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-hero.size-giant .select-button{padding-left:3.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select.appearance-hero.size-giant .select-button{padding-right:3.5rem}.nb-theme-default nb-select.appearance-hero.status-basic .select-button{background-image:linear-gradient(to right, #f7f9fc, #edf1f7);color:#222b45}.nb-theme-default nb-select.appearance-hero.status-basic .select-button.placeholder{color:#8f9bb3}.nb-theme-default nb-select.appearance-hero.status-basic .select-button:focus{background-image:linear-gradient(to right, #edf1f7, #e4e9f2)}.nb-theme-default nb-select.appearance-hero.status-basic .select-button:hover{background-image:linear-gradient(to right, #ffffff, #f7f9fc)}.nb-theme-default nb-select.appearance-hero.status-basic .select-button:focus:hover{background-image:linear-gradient(to right, #ffffff, #f7f9fc)}.nb-theme-default nb-select.appearance-hero.status-basic .select-button[disabled]{color:rgba(143,155,179,.48);background-color:#f7f9fc;background-image:none}.nb-theme-default nb-select.appearance-hero.status-basic .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select.appearance-hero.status-basic .select-button nb-icon{color:#222b45}.nb-theme-default nb-select.appearance-hero.status-primary .select-button{background-image:linear-gradient(to right, #598bff, #3366ff);color:#fff}.nb-theme-default nb-select.appearance-hero.status-primary .select-button.placeholder{color:#fff}.nb-theme-default nb-select.appearance-hero.status-primary .select-button:focus{background-image:linear-gradient(to right, #3366ff, #274bdb)}.nb-theme-default nb-select.appearance-hero.status-primary .select-button:hover{background-image:linear-gradient(to right, #a6c1ff, #598bff)}.nb-theme-default nb-select.appearance-hero.status-primary .select-button:focus:hover{background-image:linear-gradient(to right, #a6c1ff, #598bff)}.nb-theme-default nb-select.appearance-hero.status-primary .select-button[disabled]{color:rgba(143,155,179,.48);background-color:#f7f9fc;background-image:none}.nb-theme-default nb-select.appearance-hero.status-primary .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select.appearance-hero.status-primary .select-button nb-icon{color:#fff}.nb-theme-default nb-select.appearance-hero.status-success .select-button{background-image:linear-gradient(to right, #2ce69b, #00d68f);color:#fff}.nb-theme-default nb-select.appearance-hero.status-success .select-button.placeholder{color:#fff}.nb-theme-default nb-select.appearance-hero.status-success .select-button:focus{background-image:linear-gradient(to right, #00d68f, #00b887)}.nb-theme-default nb-select.appearance-hero.status-success .select-button:hover{background-image:linear-gradient(to right, #8cfac7, #2ce69b)}.nb-theme-default nb-select.appearance-hero.status-success .select-button:focus:hover{background-image:linear-gradient(to right, #8cfac7, #2ce69b)}.nb-theme-default nb-select.appearance-hero.status-success .select-button[disabled]{color:rgba(143,155,179,.48);background-color:#f7f9fc;background-image:none}.nb-theme-default nb-select.appearance-hero.status-success .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select.appearance-hero.status-success .select-button nb-icon{color:#fff}.nb-theme-default nb-select.appearance-hero.status-warning .select-button{background-image:linear-gradient(to right, #ffc94d, #ffaa00);color:#fff}.nb-theme-default nb-select.appearance-hero.status-warning .select-button.placeholder{color:#fff}.nb-theme-default nb-select.appearance-hero.status-warning .select-button:focus{background-image:linear-gradient(to right, #ffaa00, #db8b00)}.nb-theme-default nb-select.appearance-hero.status-warning .select-button:hover{background-image:linear-gradient(to right, #ffe59e, #ffc94d)}.nb-theme-default nb-select.appearance-hero.status-warning .select-button:focus:hover{background-image:linear-gradient(to right, #ffe59e, #ffc94d)}.nb-theme-default nb-select.appearance-hero.status-warning .select-button[disabled]{color:rgba(143,155,179,.48);background-color:#f7f9fc;background-image:none}.nb-theme-default nb-select.appearance-hero.status-warning .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select.appearance-hero.status-warning .select-button nb-icon{color:#fff}.nb-theme-default nb-select.appearance-hero.status-danger .select-button{background-image:linear-gradient(to right, #ff708d, #ff3d71);color:#fff}.nb-theme-default nb-select.appearance-hero.status-danger .select-button.placeholder{color:#fff}.nb-theme-default nb-select.appearance-hero.status-danger .select-button:focus{background-image:linear-gradient(to right, #ff3d71, #db2c66)}.nb-theme-default nb-select.appearance-hero.status-danger .select-button:hover{background-image:linear-gradient(to right, #ffa8b4, #ff708d)}.nb-theme-default nb-select.appearance-hero.status-danger .select-button:focus:hover{background-image:linear-gradient(to right, #ffa8b4, #ff708d)}.nb-theme-default nb-select.appearance-hero.status-danger .select-button[disabled]{color:rgba(143,155,179,.48);background-color:#f7f9fc;background-image:none}.nb-theme-default nb-select.appearance-hero.status-danger .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select.appearance-hero.status-danger .select-button nb-icon{color:#fff}.nb-theme-default nb-select.appearance-hero.status-info .select-button{background-image:linear-gradient(to right, #42aaff, #0095ff);color:#fff}.nb-theme-default nb-select.appearance-hero.status-info .select-button.placeholder{color:#fff}.nb-theme-default nb-select.appearance-hero.status-info .select-button:focus{background-image:linear-gradient(to right, #0095ff, #006fd6)}.nb-theme-default nb-select.appearance-hero.status-info .select-button:hover{background-image:linear-gradient(to right, #94cbff, #42aaff)}.nb-theme-default nb-select.appearance-hero.status-info .select-button:focus:hover{background-image:linear-gradient(to right, #94cbff, #42aaff)}.nb-theme-default nb-select.appearance-hero.status-info .select-button[disabled]{color:rgba(143,155,179,.48);background-color:#f7f9fc;background-image:none}.nb-theme-default nb-select.appearance-hero.status-info .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select.appearance-hero.status-info .select-button nb-icon{color:#fff}.nb-theme-default nb-select.appearance-hero.status-control .select-button{background-image:linear-gradient(to right, #ffffff, #ffffff);color:#222b45}.nb-theme-default nb-select.appearance-hero.status-control .select-button.placeholder{color:#8f9bb3}.nb-theme-default nb-select.appearance-hero.status-control .select-button:focus{background-image:linear-gradient(to right, #f7f9fc, #edf1f7)}.nb-theme-default nb-select.appearance-hero.status-control .select-button:hover{background-image:linear-gradient(to right, #ffffff, #f7f9fc)}.nb-theme-default nb-select.appearance-hero.status-control .select-button:focus:hover{background-image:linear-gradient(to right, #ffffff, #f7f9fc)}.nb-theme-default nb-select.appearance-hero.status-control .select-button[disabled]{color:rgba(143,155,179,.48);background-color:#f7f9fc;background-image:none}.nb-theme-default nb-select.appearance-hero.status-control .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select.appearance-hero.status-control .select-button nb-icon{color:#222b45}.nb-theme-default nb-form-field nb-select{width:100%}.nb-theme-default nb-select-with-autocomplete .select-button{min-width:13rem;cursor:pointer;font-family:Open Sans, sans-serif}.nb-theme-default nb-select-with-autocomplete .select-button.placeholder{font-family:Open Sans, sans-serif}.nb-theme-default nb-select-with-autocomplete .select-button:focus{outline:none}.nb-theme-default nb-select-with-autocomplete .select-button[disabled]{cursor:default}.nb-theme-default nb-select-with-autocomplete.size-tiny .select-button{font-size:.75rem;font-weight:600;line-height:1rem}.nb-theme-default nb-select-with-autocomplete.size-tiny .select-button.placeholder{font-size:.9375rem;font-weight:400}.nb-theme-default nb-select-with-autocomplete.size-tiny .select-button.empty::before{content:" ";display:block;height:1rem}.nb-theme-default nb-select-with-autocomplete.size-tiny:not(.full-width){max-width:20rem}.nb-theme-default nb-select-with-autocomplete.size-small .select-button{font-size:.8125rem;font-weight:600;line-height:1.5rem}.nb-theme-default nb-select-with-autocomplete.size-small .select-button.placeholder{font-size:.9375rem;font-weight:400}.nb-theme-default nb-select-with-autocomplete.size-small .select-button.empty::before{content:" ";display:block;height:1.5rem}.nb-theme-default nb-select-with-autocomplete.size-small:not(.full-width){max-width:20rem}.nb-theme-default nb-select-with-autocomplete.size-medium .select-button{font-size:.9375rem;font-weight:600;line-height:1.5rem}.nb-theme-default nb-select-with-autocomplete.size-medium .select-button.placeholder{font-size:.9375rem;font-weight:400}.nb-theme-default nb-select-with-autocomplete.size-medium .select-button.empty::before{content:" ";display:block;height:1.5rem}.nb-theme-default nb-select-with-autocomplete.size-medium:not(.full-width){max-width:20rem}.nb-theme-default nb-select-with-autocomplete.size-large .select-button{font-size:.9375rem;font-weight:600;line-height:1.5rem}.nb-theme-default nb-select-with-autocomplete.size-large .select-button.placeholder{font-size:.9375rem;font-weight:400}.nb-theme-default nb-select-with-autocomplete.size-large .select-button.empty::before{content:" ";display:block;height:1.5rem}.nb-theme-default nb-select-with-autocomplete.size-large:not(.full-width){max-width:30rem}.nb-theme-default nb-select-with-autocomplete.size-giant .select-button{font-size:1.125rem;font-weight:700;line-height:1.5rem}.nb-theme-default nb-select-with-autocomplete.size-giant .select-button.placeholder{font-size:.9375rem;font-weight:400}.nb-theme-default nb-select-with-autocomplete.size-giant .select-button.empty::before{content:" ";display:block;height:1.5rem}.nb-theme-default nb-select-with-autocomplete.size-giant:not(.full-width){max-width:30rem}.nb-theme-default nb-select-with-autocomplete.shape-rectangle .select-button{border-radius:.25rem}.nb-theme-default nb-select-with-autocomplete.shape-semi-round .select-button{border-radius:.75rem}.nb-theme-default nb-select-with-autocomplete.shape-round .select-button{border-radius:1.5rem}.nb-theme-default nb-select-with-autocomplete.appearance-outline .select-button{border-style:solid;border-width:1px}.nb-theme-default nb-select-with-autocomplete.appearance-outline .select-button.top{border-top-style:solid;border-top-width:1px}.nb-theme-default nb-select-with-autocomplete.appearance-outline .select-button.bottom{border-bottom-style:solid;border-bottom-width:1px}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-basic .select-button{background-color:#f7f9fc;border-color:#e4e9f2;color:#222b45}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-basic .select-button.placeholder{color:#8f9bb3}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-basic .select-button nb-icon{color:#8f9bb3}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-basic .select-button:focus{background-color:#fff;border-color:#36f}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-basic .select-button:hover{background-color:#edf1f7;border-color:#e4e9f2}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-basic .select-button:focus:hover{background-color:#edf1f7;border-color:#e4e9f2}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-basic .select-button[disabled]{color:rgba(143,155,179,.48);background-color:#f7f9fc;border-color:#e4e9f2}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-basic .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-basic .select-button.bottom,.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-basic .select-button.top{border-color:#e4e9f2}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-basic .select-button.top{border-top-color:#e4e9f2}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-basic .select-button.bottom{border-bottom-color:#e4e9f2}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-primary .select-button{background-color:#f7f9fc;border-color:#36f;color:#222b45}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-primary .select-button.placeholder{color:#8f9bb3}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-primary .select-button nb-icon{color:#8f9bb3}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-primary .select-button:focus{background-color:#fff;border-color:#274bdb}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-primary .select-button:hover{background-color:#edf1f7;border-color:#598bff}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-primary .select-button:focus:hover{background-color:#edf1f7;border-color:#598bff}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-primary .select-button[disabled]{color:rgba(143,155,179,.48);background-color:#f7f9fc;border-color:#e4e9f2}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-primary .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-primary .select-button.bottom,.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-primary .select-button.top{border-color:#36f}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-primary .select-button.top{border-top-color:#36f}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-primary .select-button.bottom{border-bottom-color:#36f}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-success .select-button{background-color:#f7f9fc;border-color:#00d68f;color:#222b45}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-success .select-button.placeholder{color:#8f9bb3}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-success .select-button nb-icon{color:#8f9bb3}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-success .select-button:focus{background-color:#fff;border-color:#00b887}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-success .select-button:hover{background-color:#edf1f7;border-color:#2ce69b}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-success .select-button:focus:hover{background-color:#edf1f7;border-color:#2ce69b}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-success .select-button[disabled]{color:rgba(143,155,179,.48);background-color:#f7f9fc;border-color:#e4e9f2}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-success .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-success .select-button.bottom,.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-success .select-button.top{border-color:#00d68f}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-success .select-button.top{border-top-color:#00d68f}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-success .select-button.bottom{border-bottom-color:#00d68f}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-warning .select-button{background-color:#f7f9fc;border-color:#fa0;color:#222b45}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-warning .select-button.placeholder{color:#8f9bb3}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-warning .select-button nb-icon{color:#8f9bb3}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-warning .select-button:focus{background-color:#fff;border-color:#db8b00}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-warning .select-button:hover{background-color:#edf1f7;border-color:#ffc94d}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-warning .select-button:focus:hover{background-color:#edf1f7;border-color:#ffc94d}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-warning .select-button[disabled]{color:rgba(143,155,179,.48);background-color:#f7f9fc;border-color:#e4e9f2}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-warning .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-warning .select-button.bottom,.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-warning .select-button.top{border-color:#fa0}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-warning .select-button.top{border-top-color:#fa0}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-warning .select-button.bottom{border-bottom-color:#fa0}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-danger .select-button{background-color:#f7f9fc;border-color:#ff3d71;color:#222b45}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-danger .select-button.placeholder{color:#8f9bb3}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-danger .select-button nb-icon{color:#8f9bb3}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-danger .select-button:focus{background-color:#fff;border-color:#db2c66}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-danger .select-button:hover{background-color:#edf1f7;border-color:#ff708d}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-danger .select-button:focus:hover{background-color:#edf1f7;border-color:#ff708d}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-danger .select-button[disabled]{color:rgba(143,155,179,.48);background-color:#f7f9fc;border-color:#e4e9f2}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-danger .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-danger .select-button.bottom,.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-danger .select-button.top{border-color:#ff3d71}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-danger .select-button.top{border-top-color:#ff3d71}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-danger .select-button.bottom{border-bottom-color:#ff3d71}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-info .select-button{background-color:#f7f9fc;border-color:#0095ff;color:#222b45}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-info .select-button.placeholder{color:#8f9bb3}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-info .select-button nb-icon{color:#8f9bb3}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-info .select-button:focus{background-color:#fff;border-color:#006fd6}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-info .select-button:hover{background-color:#edf1f7;border-color:#42aaff}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-info .select-button:focus:hover{background-color:#edf1f7;border-color:#42aaff}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-info .select-button[disabled]{color:rgba(143,155,179,.48);background-color:#f7f9fc;border-color:#e4e9f2}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-info .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-info .select-button.bottom,.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-info .select-button.top{border-color:#0095ff}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-info .select-button.top{border-top-color:#0095ff}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-info .select-button.bottom{border-bottom-color:#0095ff}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-control .select-button{background-color:rgba(255,255,255,.24);border-color:rgba(255,255,255,.4);color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-control .select-button.placeholder{color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-control .select-button nb-icon{color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-control .select-button:focus{background-color:rgba(255,255,255,.4);border-color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-control .select-button:hover{background-color:rgba(255,255,255,.32);border-color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-control .select-button:focus:hover{background-color:rgba(255,255,255,.32);border-color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-control .select-button[disabled]{color:#fff;background-color:rgba(143,155,179,.16);border-color:rgba(255,255,255,.4)}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-control .select-button[disabled] nb-icon{color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-control .select-button.bottom,.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-control .select-button.top{border-color:rgba(255,255,255,.4)}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-control .select-button.top{border-top-color:rgba(255,255,255,.4)}.nb-theme-default nb-select-with-autocomplete.appearance-outline.status-control .select-button.bottom{border-bottom-color:rgba(255,255,255,.4)}.nb-theme-default nb-select-with-autocomplete.appearance-outline.size-tiny .select-button{padding:.1875rem 1rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-tiny .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-tiny .select-button{padding-left:2rem}.nb-theme-default nb-select-with-autocomplete.appearance-outline.size-tiny .nb-form-field-prefix-tiny,.nb-theme-default nb-select-with-autocomplete.appearance-outline.size-tiny .nb-form-field-suffix-tiny{width:2rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-tiny .nb-form-field-prefix-tiny{margin-right:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-tiny .nb-form-field-prefix-tiny{margin-left:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-tiny .nb-form-field-suffix-tiny{margin-left:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-tiny .nb-form-field-suffix-tiny{margin-right:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-tiny [nbInput]{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-tiny [nbInput]{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-tiny .select-button{padding-left:1.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-tiny .select-button{padding-right:1.5rem}.nb-theme-default nb-select-with-autocomplete.appearance-outline.size-small .select-button{padding:.1875rem 1rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-small .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-small .select-button{padding-left:2rem}.nb-theme-default nb-select-with-autocomplete.appearance-outline.size-small .nb-form-field-prefix-small,.nb-theme-default nb-select-with-autocomplete.appearance-outline.size-small .nb-form-field-suffix-small{width:2rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-small .nb-form-field-prefix-small{margin-right:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-small .nb-form-field-prefix-small{margin-left:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-small .nb-form-field-suffix-small{margin-left:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-small .nb-form-field-suffix-small{margin-right:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-small [nbInput]{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-small [nbInput]{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-small .select-button{padding-left:2rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-small .select-button{padding-right:2rem}.nb-theme-default nb-select-with-autocomplete.appearance-outline.size-medium .select-button{padding:.4375rem 1rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-medium .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-medium .select-button{padding-left:2rem}.nb-theme-default nb-select-with-autocomplete.appearance-outline.size-medium .nb-form-field-prefix-medium,.nb-theme-default nb-select-with-autocomplete.appearance-outline.size-medium .nb-form-field-suffix-medium{width:2rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-medium .nb-form-field-prefix-medium{margin-right:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-medium .nb-form-field-prefix-medium{margin-left:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-medium .nb-form-field-suffix-medium{margin-left:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-medium .nb-form-field-suffix-medium{margin-right:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-medium [nbInput]{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-medium [nbInput]{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-medium .select-button{padding-left:2.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-medium .select-button{padding-right:2.5rem}.nb-theme-default nb-select-with-autocomplete.appearance-outline.size-large .select-button{padding:.6875rem 1rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-large .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-large .select-button{padding-left:2rem}.nb-theme-default nb-select-with-autocomplete.appearance-outline.size-large .nb-form-field-prefix-large,.nb-theme-default nb-select-with-autocomplete.appearance-outline.size-large .nb-form-field-suffix-large{width:2rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-large .nb-form-field-prefix-large{margin-right:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-large .nb-form-field-prefix-large{margin-left:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-large .nb-form-field-suffix-large{margin-left:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-large .nb-form-field-suffix-large{margin-right:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-large [nbInput]{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-large [nbInput]{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-large .select-button{padding-left:3rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-large .select-button{padding-right:3rem}.nb-theme-default nb-select-with-autocomplete.appearance-outline.size-giant .select-button{padding:.9375rem 1rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-giant .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-giant .select-button{padding-left:2rem}.nb-theme-default nb-select-with-autocomplete.appearance-outline.size-giant .nb-form-field-prefix-giant,.nb-theme-default nb-select-with-autocomplete.appearance-outline.size-giant .nb-form-field-suffix-giant{width:2rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-giant .nb-form-field-prefix-giant{margin-right:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-giant .nb-form-field-prefix-giant{margin-left:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-giant .nb-form-field-suffix-giant{margin-left:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-giant .nb-form-field-suffix-giant{margin-right:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-giant [nbInput]{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-outline.size-giant [nbInput]{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-giant .select-button{padding-left:3.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-outline.size-giant .select-button{padding-right:3.5rem}.nb-theme-default nb-select-with-autocomplete.appearance-filled .select-button{border-style:solid;border-width:1px}.nb-theme-default nb-select-with-autocomplete.appearance-filled.size-tiny .select-button{padding:.1875rem 1rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-tiny .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-tiny .select-button{padding-left:2rem}.nb-theme-default nb-select-with-autocomplete.appearance-filled.size-tiny .nb-form-field-prefix-tiny,.nb-theme-default nb-select-with-autocomplete.appearance-filled.size-tiny .nb-form-field-suffix-tiny{width:2rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-tiny .nb-form-field-prefix-tiny{margin-right:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-tiny .nb-form-field-prefix-tiny{margin-left:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-tiny .nb-form-field-suffix-tiny{margin-left:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-tiny .nb-form-field-suffix-tiny{margin-right:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-tiny [nbInput]{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-tiny [nbInput]{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-tiny .select-button{padding-left:1.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-tiny .select-button{padding-right:1.5rem}.nb-theme-default nb-select-with-autocomplete.appearance-filled.size-small .select-button{padding:.1875rem 1rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-small .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-small .select-button{padding-left:2rem}.nb-theme-default nb-select-with-autocomplete.appearance-filled.size-small .nb-form-field-prefix-small,.nb-theme-default nb-select-with-autocomplete.appearance-filled.size-small .nb-form-field-suffix-small{width:2rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-small .nb-form-field-prefix-small{margin-right:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-small .nb-form-field-prefix-small{margin-left:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-small .nb-form-field-suffix-small{margin-left:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-small .nb-form-field-suffix-small{margin-right:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-small [nbInput]{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-small [nbInput]{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-small .select-button{padding-left:2rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-small .select-button{padding-right:2rem}.nb-theme-default nb-select-with-autocomplete.appearance-filled.size-medium .select-button{padding:.4375rem 1rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-medium .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-medium .select-button{padding-left:2rem}.nb-theme-default nb-select-with-autocomplete.appearance-filled.size-medium .nb-form-field-prefix-medium,.nb-theme-default nb-select-with-autocomplete.appearance-filled.size-medium .nb-form-field-suffix-medium{width:2rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-medium .nb-form-field-prefix-medium{margin-right:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-medium .nb-form-field-prefix-medium{margin-left:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-medium .nb-form-field-suffix-medium{margin-left:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-medium .nb-form-field-suffix-medium{margin-right:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-medium [nbInput]{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-medium [nbInput]{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-medium .select-button{padding-left:2.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-medium .select-button{padding-right:2.5rem}.nb-theme-default nb-select-with-autocomplete.appearance-filled.size-large .select-button{padding:.6875rem 1rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-large .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-large .select-button{padding-left:2rem}.nb-theme-default nb-select-with-autocomplete.appearance-filled.size-large .nb-form-field-prefix-large,.nb-theme-default nb-select-with-autocomplete.appearance-filled.size-large .nb-form-field-suffix-large{width:2rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-large .nb-form-field-prefix-large{margin-right:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-large .nb-form-field-prefix-large{margin-left:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-large .nb-form-field-suffix-large{margin-left:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-large .nb-form-field-suffix-large{margin-right:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-large [nbInput]{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-large [nbInput]{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-large .select-button{padding-left:3rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-large .select-button{padding-right:3rem}.nb-theme-default nb-select-with-autocomplete.appearance-filled.size-giant .select-button{padding:.9375rem 1rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-giant .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-giant .select-button{padding-left:2rem}.nb-theme-default nb-select-with-autocomplete.appearance-filled.size-giant .nb-form-field-prefix-giant,.nb-theme-default nb-select-with-autocomplete.appearance-filled.size-giant .nb-form-field-suffix-giant{width:2rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-giant .nb-form-field-prefix-giant{margin-right:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-giant .nb-form-field-prefix-giant{margin-left:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-giant .nb-form-field-suffix-giant{margin-left:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-giant .nb-form-field-suffix-giant{margin-right:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-giant [nbInput]{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-filled.size-giant [nbInput]{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-giant .select-button{padding-left:3.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-filled.size-giant .select-button{padding-right:3.5rem}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-basic .select-button{background-color:#edf1f7;border-color:#edf1f7;color:#222b45}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-basic .select-button.placeholder{color:#8f9bb3}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-basic .select-button:focus{background-color:#e4e9f2;border-color:#c5cee0}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-basic .select-button:hover{background-color:#f7f9fc;border-color:#f7f9fc}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-basic .select-button:focus:hover{background-color:#f7f9fc;border-color:#f7f9fc}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-basic .select-button[disabled]{background-color:#f7f9fc;border-color:#f7f9fc;color:rgba(143,155,179,.48)}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-basic .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-basic .select-button nb-icon{color:#222b45}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-primary .select-button{background-color:#36f;border-color:#36f;color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-primary .select-button.placeholder{color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-primary .select-button:focus{background-color:#274bdb;border-color:#1a34b8}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-primary .select-button:hover{background-color:#598bff;border-color:#598bff}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-primary .select-button:focus:hover{background-color:#598bff;border-color:#598bff}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-primary .select-button[disabled]{background-color:#f7f9fc;border-color:#f7f9fc;color:rgba(143,155,179,.48)}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-primary .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-primary .select-button nb-icon{color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-success .select-button{background-color:#00d68f;border-color:#00d68f;color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-success .select-button.placeholder{color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-success .select-button:focus{background-color:#00b887;border-color:#00997a}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-success .select-button:hover{background-color:#2ce69b;border-color:#2ce69b}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-success .select-button:focus:hover{background-color:#2ce69b;border-color:#2ce69b}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-success .select-button[disabled]{background-color:#f7f9fc;border-color:#f7f9fc;color:rgba(143,155,179,.48)}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-success .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-success .select-button nb-icon{color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-warning .select-button{background-color:#fa0;border-color:#fa0;color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-warning .select-button.placeholder{color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-warning .select-button:focus{background-color:#db8b00;border-color:#b86e00}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-warning .select-button:hover{background-color:#ffc94d;border-color:#ffc94d}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-warning .select-button:focus:hover{background-color:#ffc94d;border-color:#ffc94d}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-warning .select-button[disabled]{background-color:#f7f9fc;border-color:#f7f9fc;color:rgba(143,155,179,.48)}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-warning .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-warning .select-button nb-icon{color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-danger .select-button{background-color:#ff3d71;border-color:#ff3d71;color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-danger .select-button.placeholder{color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-danger .select-button:focus{background-color:#db2c66;border-color:#b81d5b}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-danger .select-button:hover{background-color:#ff708d;border-color:#ff708d}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-danger .select-button:focus:hover{background-color:#ff708d;border-color:#ff708d}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-danger .select-button[disabled]{background-color:#f7f9fc;border-color:#f7f9fc;color:rgba(143,155,179,.48)}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-danger .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-danger .select-button nb-icon{color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-info .select-button{background-color:#0095ff;border-color:#0095ff;color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-info .select-button.placeholder{color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-info .select-button:focus{background-color:#006fd6;border-color:#0057c2}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-info .select-button:hover{background-color:#42aaff;border-color:#42aaff}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-info .select-button:focus:hover{background-color:#42aaff;border-color:#42aaff}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-info .select-button[disabled]{background-color:#f7f9fc;border-color:#f7f9fc;color:rgba(143,155,179,.48)}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-info .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-info .select-button nb-icon{color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-control .select-button{background-color:#fff;border-color:#fff;color:#222b45}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-control .select-button.placeholder{color:#8f9bb3}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-control .select-button:focus{background-color:#edf1f7;border-color:#c5cee0}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-control .select-button:hover{background-color:#f7f9fc;border-color:#f7f9fc}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-control .select-button:focus:hover{background-color:#f7f9fc;border-color:#f7f9fc}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-control .select-button[disabled]{background-color:#f7f9fc;border-color:#f7f9fc;color:rgba(143,155,179,.48)}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-control .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select-with-autocomplete.appearance-filled.status-control .select-button nb-icon{color:#222b45}.nb-theme-default nb-select-with-autocomplete.appearance-hero .select-button{border:none}.nb-theme-default nb-select-with-autocomplete.appearance-hero.size-tiny .select-button{padding:.25rem 1rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-tiny .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-tiny .select-button{padding-left:2rem}.nb-theme-default nb-select-with-autocomplete.appearance-hero.size-tiny .nb-form-field-prefix-tiny,.nb-theme-default nb-select-with-autocomplete.appearance-hero.size-tiny .nb-form-field-suffix-tiny{width:2rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-tiny .nb-form-field-prefix-tiny{margin-right:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-tiny .nb-form-field-prefix-tiny{margin-left:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-tiny .nb-form-field-suffix-tiny{margin-left:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-tiny .nb-form-field-suffix-tiny{margin-right:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-tiny [nbInput]{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-tiny [nbInput]{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-tiny .select-button{padding-left:1.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-tiny .select-button{padding-right:1.5rem}.nb-theme-default nb-select-with-autocomplete.appearance-hero.size-small .select-button{padding:.25rem 1rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-small .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-small .select-button{padding-left:2rem}.nb-theme-default nb-select-with-autocomplete.appearance-hero.size-small .nb-form-field-prefix-small,.nb-theme-default nb-select-with-autocomplete.appearance-hero.size-small .nb-form-field-suffix-small{width:2rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-small .nb-form-field-prefix-small{margin-right:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-small .nb-form-field-prefix-small{margin-left:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-small .nb-form-field-suffix-small{margin-left:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-small .nb-form-field-suffix-small{margin-right:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-small [nbInput]{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-small [nbInput]{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-small .select-button{padding-left:2rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-small .select-button{padding-right:2rem}.nb-theme-default nb-select-with-autocomplete.appearance-hero.size-medium .select-button{padding:.5rem 1rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-medium .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-medium .select-button{padding-left:2rem}.nb-theme-default nb-select-with-autocomplete.appearance-hero.size-medium .nb-form-field-prefix-medium,.nb-theme-default nb-select-with-autocomplete.appearance-hero.size-medium .nb-form-field-suffix-medium{width:2rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-medium .nb-form-field-prefix-medium{margin-right:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-medium .nb-form-field-prefix-medium{margin-left:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-medium .nb-form-field-suffix-medium{margin-left:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-medium .nb-form-field-suffix-medium{margin-right:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-medium [nbInput]{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-medium [nbInput]{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-medium .select-button{padding-left:2.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-medium .select-button{padding-right:2.5rem}.nb-theme-default nb-select-with-autocomplete.appearance-hero.size-large .select-button{padding:.75rem 1rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-large .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-large .select-button{padding-left:2rem}.nb-theme-default nb-select-with-autocomplete.appearance-hero.size-large .nb-form-field-prefix-large,.nb-theme-default nb-select-with-autocomplete.appearance-hero.size-large .nb-form-field-suffix-large{width:2rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-large .nb-form-field-prefix-large{margin-right:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-large .nb-form-field-prefix-large{margin-left:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-large .nb-form-field-suffix-large{margin-left:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-large .nb-form-field-suffix-large{margin-right:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-large [nbInput]{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-large [nbInput]{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-large .select-button{padding-left:3rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-large .select-button{padding-right:3rem}.nb-theme-default nb-select-with-autocomplete.appearance-hero.size-giant .select-button{padding:1rem 1rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-giant .select-button{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-giant .select-button{padding-left:2rem}.nb-theme-default nb-select-with-autocomplete.appearance-hero.size-giant .nb-form-field-prefix-giant,.nb-theme-default nb-select-with-autocomplete.appearance-hero.size-giant .nb-form-field-suffix-giant{width:2rem}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-giant .nb-form-field-prefix-giant{margin-right:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-giant .nb-form-field-prefix-giant{margin-left:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-giant .nb-form-field-suffix-giant{margin-left:calc(2rem * -1)}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-giant .nb-form-field-suffix-giant{margin-right:calc(2rem * -1)}[dir=ltr] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-giant [nbInput]{padding-right:2rem}[dir=rtl] .nb-theme-default nb-select-with-autocomplete.appearance-hero.size-giant [nbInput]{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-giant .select-button{padding-left:3.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix nb-select-with-autocomplete.appearance-hero.size-giant .select-button{padding-right:3.5rem}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-basic .select-button{background-image:linear-gradient(to right, #f7f9fc, #edf1f7);color:#222b45}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-basic .select-button.placeholder{color:#8f9bb3}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-basic .select-button:focus{background-image:linear-gradient(to right, #edf1f7, #e4e9f2)}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-basic .select-button:hover{background-image:linear-gradient(to right, #ffffff, #f7f9fc)}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-basic .select-button:focus:hover{background-image:linear-gradient(to right, #ffffff, #f7f9fc)}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-basic .select-button[disabled]{color:rgba(143,155,179,.48);background-color:#f7f9fc;background-image:none}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-basic .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-basic .select-button nb-icon{color:#222b45}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-primary .select-button{background-image:linear-gradient(to right, #598bff, #3366ff);color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-primary .select-button.placeholder{color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-primary .select-button:focus{background-image:linear-gradient(to right, #3366ff, #274bdb)}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-primary .select-button:hover{background-image:linear-gradient(to right, #a6c1ff, #598bff)}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-primary .select-button:focus:hover{background-image:linear-gradient(to right, #a6c1ff, #598bff)}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-primary .select-button[disabled]{color:rgba(143,155,179,.48);background-color:#f7f9fc;background-image:none}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-primary .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-primary .select-button nb-icon{color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-success .select-button{background-image:linear-gradient(to right, #2ce69b, #00d68f);color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-success .select-button.placeholder{color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-success .select-button:focus{background-image:linear-gradient(to right, #00d68f, #00b887)}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-success .select-button:hover{background-image:linear-gradient(to right, #8cfac7, #2ce69b)}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-success .select-button:focus:hover{background-image:linear-gradient(to right, #8cfac7, #2ce69b)}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-success .select-button[disabled]{color:rgba(143,155,179,.48);background-color:#f7f9fc;background-image:none}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-success .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-success .select-button nb-icon{color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-warning .select-button{background-image:linear-gradient(to right, #ffc94d, #ffaa00);color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-warning .select-button.placeholder{color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-warning .select-button:focus{background-image:linear-gradient(to right, #ffaa00, #db8b00)}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-warning .select-button:hover{background-image:linear-gradient(to right, #ffe59e, #ffc94d)}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-warning .select-button:focus:hover{background-image:linear-gradient(to right, #ffe59e, #ffc94d)}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-warning .select-button[disabled]{color:rgba(143,155,179,.48);background-color:#f7f9fc;background-image:none}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-warning .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-warning .select-button nb-icon{color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-danger .select-button{background-image:linear-gradient(to right, #ff708d, #ff3d71);color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-danger .select-button.placeholder{color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-danger .select-button:focus{background-image:linear-gradient(to right, #ff3d71, #db2c66)}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-danger .select-button:hover{background-image:linear-gradient(to right, #ffa8b4, #ff708d)}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-danger .select-button:focus:hover{background-image:linear-gradient(to right, #ffa8b4, #ff708d)}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-danger .select-button[disabled]{color:rgba(143,155,179,.48);background-color:#f7f9fc;background-image:none}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-danger .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-danger .select-button nb-icon{color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-info .select-button{background-image:linear-gradient(to right, #42aaff, #0095ff);color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-info .select-button.placeholder{color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-info .select-button:focus{background-image:linear-gradient(to right, #0095ff, #006fd6)}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-info .select-button:hover{background-image:linear-gradient(to right, #94cbff, #42aaff)}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-info .select-button:focus:hover{background-image:linear-gradient(to right, #94cbff, #42aaff)}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-info .select-button[disabled]{color:rgba(143,155,179,.48);background-color:#f7f9fc;background-image:none}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-info .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-info .select-button nb-icon{color:#fff}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-control .select-button{background-image:linear-gradient(to right, #ffffff, #ffffff);color:#222b45}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-control .select-button.placeholder{color:#8f9bb3}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-control .select-button:focus{background-image:linear-gradient(to right, #f7f9fc, #edf1f7)}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-control .select-button:hover{background-image:linear-gradient(to right, #ffffff, #f7f9fc)}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-control .select-button:focus:hover{background-image:linear-gradient(to right, #ffffff, #f7f9fc)}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-control .select-button[disabled]{color:rgba(143,155,179,.48);background-color:#f7f9fc;background-image:none}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-control .select-button[disabled] nb-icon{color:rgba(143,155,179,.48)}.nb-theme-default nb-select-with-autocomplete.appearance-hero.status-control .select-button nb-icon{color:#222b45}.nb-theme-default nb-form-field nb-select-with-autocomplete{width:100%}.nb-theme-default nb-option-list{background-color:#fff;border-color:#e4e9f2;border-style:solid;border-width:.0625rem;border-radius:.25rem;box-shadow:none;overflow:hidden}.nb-theme-default nb-option-list .option-list{height:100%;max-height:20rem;margin:0;padding:0;overflow:auto}.nb-theme-default nb-option-list.position-top{border-bottom:.0625rem solid #e4e9f2}.nb-theme-default nb-option-list.position-bottom{border-top:.0625rem solid #e4e9f2}.nb-theme-default nb-option-group{color:#8f9bb3;font-family:Open Sans, sans-serif}.nb-theme-default nb-option-list.size-tiny nb-option-group{font-size:.75rem;font-weight:600;line-height:1rem}.nb-theme-default nb-option-list.size-tiny nb-option-group .option-group-title{padding:.1875rem 1rem}.nb-theme-default nb-option-list.size-tiny nb-option-group nb-option{padding-left:1.25rem}.nb-theme-default nb-option-list.size-small nb-option-group{font-size:.8125rem;font-weight:600;line-height:1.5rem}.nb-theme-default nb-option-list.size-small nb-option-group .option-group-title{padding:.1875rem 1rem}.nb-theme-default nb-option-list.size-small nb-option-group nb-option{padding-left:1.75rem}.nb-theme-default nb-option-list.size-medium nb-option-group{font-size:.9375rem;font-weight:600;line-height:1.5rem}.nb-theme-default nb-option-list.size-medium nb-option-group .option-group-title{padding:.4375rem 1rem}.nb-theme-default nb-option-list.size-medium nb-option-group nb-option{padding-left:2.25rem}.nb-theme-default nb-option-list.size-large nb-option-group{font-size:.9375rem;font-weight:600;line-height:1.5rem}.nb-theme-default nb-option-list.size-large nb-option-group .option-group-title{padding:.6875rem 1rem}.nb-theme-default nb-option-list.size-large nb-option-group nb-option{padding-left:2.25rem}.nb-theme-default nb-option-list.size-giant nb-option-group{font-size:1.125rem;font-weight:700;line-height:1.5rem}.nb-theme-default nb-option-list.size-giant nb-option-group .option-group-title{padding:.9375rem 1rem}.nb-theme-default nb-option-list.size-giant nb-option-group nb-option{padding-left:2.75rem}.nb-theme-default nb-option{background-color:#fff;color:#222b45;font-family:Open Sans, sans-serif}.nb-theme-default nb-option.active{background-color:rgba(143,155,179,.24);color:#222b45}.nb-theme-default nb-option.selected{background-color:#36f;color:#fff}.nb-theme-default nb-option:focus{background-color:rgba(143,155,179,.24);color:#222b45;outline:none}.nb-theme-default nb-option:focus.selected{background-color:#274bdb;color:#fff}.nb-theme-default nb-option:hover{background-color:rgba(143,155,179,.16);color:#222b45}.nb-theme-default nb-option:hover.selected{background-color:#598bff;color:#fff}.nb-theme-default nb-option.multiple.selected{background-color:#fff;color:#222b45}.nb-theme-default nb-option.multiple:focus{background-color:rgba(143,155,179,.24);color:#222b45}.nb-theme-default nb-option-list.size-tiny nb-option{font-size:.75rem;font-weight:600;line-height:1rem;padding:.1875rem 1rem}.nb-theme-default nb-option-list.size-small nb-option{font-size:.8125rem;font-weight:600;line-height:1.5rem;padding:.1875rem 1rem}.nb-theme-default nb-option-list.size-medium nb-option{font-size:.9375rem;font-weight:600;line-height:1.5rem;padding:.4375rem 1rem}.nb-theme-default nb-option-list.size-large nb-option{font-size:.9375rem;font-weight:600;line-height:1.5rem;padding:.6875rem 1rem}.nb-theme-default nb-option-list.size-giant nb-option{font-size:1.125rem;font-weight:700;line-height:1.5rem;padding:.9375rem 1rem}.nb-theme-default nb-option,.nb-theme-default nb-option-group{-webkit-user-select:none;-moz-user-select:none;user-select:none}.nb-theme-default nb-option[disabled],.nb-theme-default nb-option-group[disabled]{background-color:#fff;color:rgba(143,155,179,.48)}.nb-theme-default nb-toast{border-style:solid;border-width:1px;border-radius:.25rem;padding:1rem;box-shadow:0 .5rem 1rem 0 rgba(44,51,73,.1)}.nb-theme-default nb-toast .title{font-family:Open Sans, sans-serif;font-size:.9375rem;font-weight:600;line-height:1.5rem}.nb-theme-default nb-toast .message{font-family:Open Sans, sans-serif;font-size:.8125rem;font-weight:400;line-height:1.125rem}.nb-theme-default nb-toast .icon-container{border-radius:.25rem;min-width:2.5rem;min-height:2.5rem;display:flex;justify-content:center;align-items:center}[dir=ltr] .nb-theme-default nb-toast .icon-container{margin-right:1.25rem}[dir=rtl] .nb-theme-default nb-toast .icon-container{margin-left:1.25rem}.nb-theme-default nb-toast .icon-container nb-icon{font-size:1.5rem}.nb-theme-default nb-toast.status-basic{background:#fff;border-color:#edf1f7;color:#222b45}.nb-theme-default nb-toast.status-basic .title{color:#222b45}.nb-theme-default nb-toast.status-basic.destroy-by-click:hover{background:#fff;border-color:#edf1f7}.nb-theme-default nb-toast.status-basic .icon-container{background:#fff;color:#222b45}.nb-theme-default nb-toast.status-primary{background:#36f;border-color:#36f;color:#fff}.nb-theme-default nb-toast.status-primary .title{color:#fff}.nb-theme-default nb-toast.status-primary.destroy-by-click:hover{background:#598bff;border-color:#598bff}.nb-theme-default nb-toast.status-primary .icon-container{background:#fff;color:#36f}.nb-theme-default nb-toast.status-success{background:#00d68f;border-color:#00d68f;color:#fff}.nb-theme-default nb-toast.status-success .title{color:#fff}.nb-theme-default nb-toast.status-success.destroy-by-click:hover{background:#2ce69b;border-color:#2ce69b}.nb-theme-default nb-toast.status-success .icon-container{background:#fff;color:#00d68f}.nb-theme-default nb-toast.status-warning{background:#fa0;border-color:#fa0;color:#fff}.nb-theme-default nb-toast.status-warning .title{color:#fff}.nb-theme-default nb-toast.status-warning.destroy-by-click:hover{background:#ffc94d;border-color:#ffc94d}.nb-theme-default nb-toast.status-warning .icon-container{background:#fff;color:#fa0}.nb-theme-default nb-toast.status-danger{background:#ff3d71;border-color:#ff3d71;color:#fff}.nb-theme-default nb-toast.status-danger .title{color:#fff}.nb-theme-default nb-toast.status-danger.destroy-by-click:hover{background:#ff708d;border-color:#ff708d}.nb-theme-default nb-toast.status-danger .icon-container{background:#fff;color:#ff3d71}.nb-theme-default nb-toast.status-info{background:#0095ff;border-color:#0095ff;color:#fff}.nb-theme-default nb-toast.status-info .title{color:#fff}.nb-theme-default nb-toast.status-info.destroy-by-click:hover{background:#42aaff;border-color:#42aaff}.nb-theme-default nb-toast.status-info .icon-container{background:#fff;color:#0095ff}.nb-theme-default nb-toast.status-control{background:#fff;border-color:#fff;color:#222b45}.nb-theme-default nb-toast.status-control .title{color:#222b45}.nb-theme-default nb-toast.status-control.destroy-by-click:hover{background:#f7f9fc;border-color:#f7f9fc}.nb-theme-default nb-toast.status-control .icon-container{background:#fff;color:#222b45}.nb-theme-default .toastr-overlay-container{z-index:1041}.nb-theme-default nb-tooltip{box-shadow:0 .5rem 1rem 0 rgba(44,51,73,.1);background:#151a30;border:0 dashed rgba(0,0,0,0);border-radius:.25rem;padding:.5rem 1rem;max-width:16rem}.nb-theme-default nb-tooltip nb-icon:only-child{height:1rem;width:1rem}.nb-theme-default nb-tooltip nb-icon:not(:only-child){height:.75rem;width:.75rem}.nb-theme-default nb-tooltip .content{color:#fff;font-family:Open Sans, sans-serif;font-size:.75rem;font-weight:400;line-height:1rem}.nb-theme-default nb-tooltip .arrow{border-bottom:6px dashed #151a30}.nb-theme-default nb-tooltip.status-basic{background:#edf1f7;border-color:rgba(0,0,0,0)}.nb-theme-default nb-tooltip.status-basic .arrow{border-bottom-color:#edf1f7}.nb-theme-default nb-tooltip.status-basic .content{color:#222b45}.nb-theme-default nb-tooltip.status-primary{background:#36f;border-color:rgba(0,0,0,0)}.nb-theme-default nb-tooltip.status-primary .arrow{border-bottom-color:#36f}.nb-theme-default nb-tooltip.status-primary .content{color:#fff}.nb-theme-default nb-tooltip.status-success{background:#00d68f;border-color:rgba(0,0,0,0)}.nb-theme-default nb-tooltip.status-success .arrow{border-bottom-color:#00d68f}.nb-theme-default nb-tooltip.status-success .content{color:#fff}.nb-theme-default nb-tooltip.status-warning{background:#fa0;border-color:rgba(0,0,0,0)}.nb-theme-default nb-tooltip.status-warning .arrow{border-bottom-color:#fa0}.nb-theme-default nb-tooltip.status-warning .content{color:#fff}.nb-theme-default nb-tooltip.status-danger{background:#ff3d71;border-color:rgba(0,0,0,0)}.nb-theme-default nb-tooltip.status-danger .arrow{border-bottom-color:#ff3d71}.nb-theme-default nb-tooltip.status-danger .content{color:#fff}.nb-theme-default nb-tooltip.status-info{background:#0095ff;border-color:rgba(0,0,0,0)}.nb-theme-default nb-tooltip.status-info .arrow{border-bottom-color:#0095ff}.nb-theme-default nb-tooltip.status-info .content{color:#fff}.nb-theme-default nb-tooltip.status-control{background:#fff;border-color:rgba(0,0,0,0)}.nb-theme-default nb-tooltip.status-control .arrow{border-bottom-color:#fff}.nb-theme-default nb-tooltip.status-control .content{color:#222b45}.nb-theme-default nb-datepicker-container nb-card{border-color:#e4e9f2;border-style:solid;border-width:.0625rem;border-radius:.25rem;background:#fff;box-shadow:none}.nb-theme-default nb-calendar-with-time .nb-timepicker-container,.nb-theme-default nb-calendar-with-time nb-base-calendar nb-card{border:none}.nb-theme-default nb-calendar-with-time .column-header{border-top:.0625rem solid #e4e9f2;border-radius:0}.nb-theme-default nb-calendar-with-time .timepicker-section.size-large nb-list-item{height:3rem}.nb-theme-default nb-calendar-with-time .timepicker-section.size-large .header-cell{height:3rem}[dir=ltr] .nb-theme-default nb-calendar-with-time .timepicker-section{border-left:.0625rem solid #e4e9f2}[dir=rtl] .nb-theme-default nb-calendar-with-time .timepicker-section{border-right:.0625rem solid #e4e9f2}.nb-theme-default nb-calendar-with-time .timepicker-single-column-width{width:5rem}.nb-theme-default nb-calendar-with-time .timepicker-multiple-column-width{width:13.875rem}.nb-theme-default nb-calendar-with-time .picker-title{height:3.75rem;padding:1.25rem}.nb-theme-default nb-radio .outer-circle,.nb-theme-default nb-radio .inner-circle{height:1.25rem;width:1.25rem}.nb-theme-default nb-radio .outer-circle{border-style:solid;border-width:1px}.nb-theme-default nb-radio .native-input:enabled:focus+.outer-circle{box-shadow:0 0 0 .375rem rgba(143,155,179,.16)}.nb-theme-default nb-radio.status-basic .native-input:enabled+.outer-circle{background-color:rgba(143,155,179,.08);border-color:#8f9bb3}.nb-theme-default nb-radio.status-basic .native-input:enabled:checked+.outer-circle{background-color:rgba(0,0,0,0);border-color:#36f}.nb-theme-default nb-radio.status-basic .native-input:enabled:checked~.inner-circle{background-color:#36f}.nb-theme-default nb-radio.status-basic .native-input:enabled:focus+.outer-circle{background-color:rgba(51,102,255,.24);border-color:#36f}.nb-theme-default nb-radio.status-basic .native-input:enabled:checked:focus+.outer-circle{background-color:rgba(0,0,0,0);border-color:#1a34b8}.nb-theme-default nb-radio.status-basic .native-input:enabled:checked:focus~.inner-circle{background-color:#274bdb}.nb-theme-default nb-radio.status-basic label:hover .native-input:enabled+.outer-circle{background-color:rgba(51,102,255,.16);border-color:#36f}.nb-theme-default nb-radio.status-basic label:hover .native-input:checked:enabled+.outer-circle{background-color:rgba(0,0,0,0);border-color:#598bff}.nb-theme-default nb-radio.status-basic label:hover .native-input:checked:enabled~.inner-circle{background-color:#598bff}.nb-theme-default nb-radio.status-basic label .native-input:enabled:active+.outer-circle{background-color:rgba(51,102,255,.24);border-color:#36f}.nb-theme-default nb-radio.status-basic label .native-input:enabled:checked:active+.outer-circle{background-color:rgba(0,0,0,0);border-color:#274bdb}.nb-theme-default nb-radio.status-basic label .native-input:enabled:checked:active~.inner-circle{background-color:#274bdb}.nb-theme-default nb-radio.status-basic .text{color:#222b45}.nb-theme-default nb-radio.status-basic .native-input:disabled+.outer-circle{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24)}.nb-theme-default nb-radio.status-basic .native-input:disabled~.text{color:rgba(143,155,179,.48)}.nb-theme-default nb-radio.status-basic .native-input:disabled:checked+.outer-circle{background-color:rgba(0,0,0,0);border-color:rgba(143,155,179,.48)}.nb-theme-default nb-radio.status-basic .native-input:disabled:checked~.inner-circle{background-color:rgba(143,155,179,.48)}.nb-theme-default nb-radio.status-primary .native-input:enabled+.outer-circle{background-color:rgba(51,102,255,.08);border-color:#36f}.nb-theme-default nb-radio.status-primary .native-input:enabled:checked+.outer-circle{background-color:rgba(0,0,0,0);border-color:#36f}.nb-theme-default nb-radio.status-primary .native-input:enabled:checked~.inner-circle{background-color:#36f}.nb-theme-default nb-radio.status-primary .native-input:enabled:focus+.outer-circle{background-color:rgba(51,102,255,.24);border-color:#36f}.nb-theme-default nb-radio.status-primary .native-input:enabled:checked:focus+.outer-circle{background-color:rgba(0,0,0,0);border-color:#1a34b8}.nb-theme-default nb-radio.status-primary .native-input:enabled:checked:focus~.inner-circle{background-color:#274bdb}.nb-theme-default nb-radio.status-primary label:hover .native-input:enabled+.outer-circle{background-color:rgba(51,102,255,.16);border-color:#36f}.nb-theme-default nb-radio.status-primary label:hover .native-input:checked:enabled+.outer-circle{background-color:rgba(0,0,0,0);border-color:#598bff}.nb-theme-default nb-radio.status-primary label:hover .native-input:checked:enabled~.inner-circle{background-color:#598bff}.nb-theme-default nb-radio.status-primary label .native-input:enabled:active+.outer-circle{background-color:rgba(51,102,255,.24);border-color:#36f}.nb-theme-default nb-radio.status-primary label .native-input:enabled:checked:active+.outer-circle{background-color:rgba(0,0,0,0);border-color:#274bdb}.nb-theme-default nb-radio.status-primary label .native-input:enabled:checked:active~.inner-circle{background-color:#274bdb}.nb-theme-default nb-radio.status-primary .text{color:#222b45}.nb-theme-default nb-radio.status-primary .native-input:disabled+.outer-circle{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24)}.nb-theme-default nb-radio.status-primary .native-input:disabled~.text{color:rgba(143,155,179,.48)}.nb-theme-default nb-radio.status-primary .native-input:disabled:checked+.outer-circle{background-color:rgba(0,0,0,0);border-color:rgba(143,155,179,.48)}.nb-theme-default nb-radio.status-primary .native-input:disabled:checked~.inner-circle{background-color:rgba(143,155,179,.48)}.nb-theme-default nb-radio.status-success .native-input:enabled+.outer-circle{background-color:rgba(0,214,143,.08);border-color:#00d68f}.nb-theme-default nb-radio.status-success .native-input:enabled:checked+.outer-circle{background-color:rgba(0,0,0,0);border-color:#00d68f}.nb-theme-default nb-radio.status-success .native-input:enabled:checked~.inner-circle{background-color:#00d68f}.nb-theme-default nb-radio.status-success .native-input:enabled:focus+.outer-circle{background-color:rgba(0,214,143,.24);border-color:#00d68f}.nb-theme-default nb-radio.status-success .native-input:enabled:checked:focus+.outer-circle{background-color:rgba(0,0,0,0);border-color:#00997a}.nb-theme-default nb-radio.status-success .native-input:enabled:checked:focus~.inner-circle{background-color:#00b887}.nb-theme-default nb-radio.status-success label:hover .native-input:enabled+.outer-circle{background-color:rgba(0,214,143,.16);border-color:#00d68f}.nb-theme-default nb-radio.status-success label:hover .native-input:checked:enabled+.outer-circle{background-color:rgba(0,0,0,0);border-color:#2ce69b}.nb-theme-default nb-radio.status-success label:hover .native-input:checked:enabled~.inner-circle{background-color:#2ce69b}.nb-theme-default nb-radio.status-success label .native-input:enabled:active+.outer-circle{background-color:rgba(0,214,143,.24);border-color:#00d68f}.nb-theme-default nb-radio.status-success label .native-input:enabled:checked:active+.outer-circle{background-color:rgba(0,0,0,0);border-color:#00b887}.nb-theme-default nb-radio.status-success label .native-input:enabled:checked:active~.inner-circle{background-color:#00b887}.nb-theme-default nb-radio.status-success .text{color:#222b45}.nb-theme-default nb-radio.status-success .native-input:disabled+.outer-circle{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24)}.nb-theme-default nb-radio.status-success .native-input:disabled~.text{color:rgba(143,155,179,.48)}.nb-theme-default nb-radio.status-success .native-input:disabled:checked+.outer-circle{background-color:rgba(0,0,0,0);border-color:rgba(143,155,179,.48)}.nb-theme-default nb-radio.status-success .native-input:disabled:checked~.inner-circle{background-color:rgba(143,155,179,.48)}.nb-theme-default nb-radio.status-warning .native-input:enabled+.outer-circle{background-color:rgba(255,170,0,.08);border-color:#fa0}.nb-theme-default nb-radio.status-warning .native-input:enabled:checked+.outer-circle{background-color:rgba(0,0,0,0);border-color:#fa0}.nb-theme-default nb-radio.status-warning .native-input:enabled:checked~.inner-circle{background-color:#fa0}.nb-theme-default nb-radio.status-warning .native-input:enabled:focus+.outer-circle{background-color:rgba(255,170,0,.24);border-color:#fa0}.nb-theme-default nb-radio.status-warning .native-input:enabled:checked:focus+.outer-circle{background-color:rgba(0,0,0,0);border-color:#b86e00}.nb-theme-default nb-radio.status-warning .native-input:enabled:checked:focus~.inner-circle{background-color:#db8b00}.nb-theme-default nb-radio.status-warning label:hover .native-input:enabled+.outer-circle{background-color:rgba(255,170,0,.16);border-color:#fa0}.nb-theme-default nb-radio.status-warning label:hover .native-input:checked:enabled+.outer-circle{background-color:rgba(0,0,0,0);border-color:#ffc94d}.nb-theme-default nb-radio.status-warning label:hover .native-input:checked:enabled~.inner-circle{background-color:#ffc94d}.nb-theme-default nb-radio.status-warning label .native-input:enabled:active+.outer-circle{background-color:rgba(255,170,0,.24);border-color:#fa0}.nb-theme-default nb-radio.status-warning label .native-input:enabled:checked:active+.outer-circle{background-color:rgba(0,0,0,0);border-color:#db8b00}.nb-theme-default nb-radio.status-warning label .native-input:enabled:checked:active~.inner-circle{background-color:#db8b00}.nb-theme-default nb-radio.status-warning .text{color:#222b45}.nb-theme-default nb-radio.status-warning .native-input:disabled+.outer-circle{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24)}.nb-theme-default nb-radio.status-warning .native-input:disabled~.text{color:rgba(143,155,179,.48)}.nb-theme-default nb-radio.status-warning .native-input:disabled:checked+.outer-circle{background-color:rgba(0,0,0,0);border-color:rgba(143,155,179,.48)}.nb-theme-default nb-radio.status-warning .native-input:disabled:checked~.inner-circle{background-color:rgba(143,155,179,.48)}.nb-theme-default nb-radio.status-danger .native-input:enabled+.outer-circle{background-color:rgba(255,61,113,.08);border-color:#ff3d71}.nb-theme-default nb-radio.status-danger .native-input:enabled:checked+.outer-circle{background-color:rgba(0,0,0,0);border-color:#ff3d71}.nb-theme-default nb-radio.status-danger .native-input:enabled:checked~.inner-circle{background-color:#ff3d71}.nb-theme-default nb-radio.status-danger .native-input:enabled:focus+.outer-circle{background-color:rgba(255,61,113,.24);border-color:#ff3d71}.nb-theme-default nb-radio.status-danger .native-input:enabled:checked:focus+.outer-circle{background-color:rgba(0,0,0,0);border-color:#b81d5b}.nb-theme-default nb-radio.status-danger .native-input:enabled:checked:focus~.inner-circle{background-color:#db2c66}.nb-theme-default nb-radio.status-danger label:hover .native-input:enabled+.outer-circle{background-color:rgba(255,61,113,.16);border-color:#ff3d71}.nb-theme-default nb-radio.status-danger label:hover .native-input:checked:enabled+.outer-circle{background-color:rgba(0,0,0,0);border-color:#ff708d}.nb-theme-default nb-radio.status-danger label:hover .native-input:checked:enabled~.inner-circle{background-color:#ff708d}.nb-theme-default nb-radio.status-danger label .native-input:enabled:active+.outer-circle{background-color:rgba(255,61,113,.24);border-color:#ff3d71}.nb-theme-default nb-radio.status-danger label .native-input:enabled:checked:active+.outer-circle{background-color:rgba(0,0,0,0);border-color:#db2c66}.nb-theme-default nb-radio.status-danger label .native-input:enabled:checked:active~.inner-circle{background-color:#db2c66}.nb-theme-default nb-radio.status-danger .text{color:#222b45}.nb-theme-default nb-radio.status-danger .native-input:disabled+.outer-circle{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24)}.nb-theme-default nb-radio.status-danger .native-input:disabled~.text{color:rgba(143,155,179,.48)}.nb-theme-default nb-radio.status-danger .native-input:disabled:checked+.outer-circle{background-color:rgba(0,0,0,0);border-color:rgba(143,155,179,.48)}.nb-theme-default nb-radio.status-danger .native-input:disabled:checked~.inner-circle{background-color:rgba(143,155,179,.48)}.nb-theme-default nb-radio.status-info .native-input:enabled+.outer-circle{background-color:rgba(0,149,255,.08);border-color:#0095ff}.nb-theme-default nb-radio.status-info .native-input:enabled:checked+.outer-circle{background-color:rgba(0,0,0,0);border-color:#0095ff}.nb-theme-default nb-radio.status-info .native-input:enabled:checked~.inner-circle{background-color:#0095ff}.nb-theme-default nb-radio.status-info .native-input:enabled:focus+.outer-circle{background-color:rgba(0,149,255,.24);border-color:#0095ff}.nb-theme-default nb-radio.status-info .native-input:enabled:checked:focus+.outer-circle{background-color:rgba(0,0,0,0);border-color:#0057c2}.nb-theme-default nb-radio.status-info .native-input:enabled:checked:focus~.inner-circle{background-color:#006fd6}.nb-theme-default nb-radio.status-info label:hover .native-input:enabled+.outer-circle{background-color:rgba(0,149,255,.16);border-color:#0095ff}.nb-theme-default nb-radio.status-info label:hover .native-input:checked:enabled+.outer-circle{background-color:rgba(0,0,0,0);border-color:#42aaff}.nb-theme-default nb-radio.status-info label:hover .native-input:checked:enabled~.inner-circle{background-color:#42aaff}.nb-theme-default nb-radio.status-info label .native-input:enabled:active+.outer-circle{background-color:rgba(0,149,255,.24);border-color:#0095ff}.nb-theme-default nb-radio.status-info label .native-input:enabled:checked:active+.outer-circle{background-color:rgba(0,0,0,0);border-color:#006fd6}.nb-theme-default nb-radio.status-info label .native-input:enabled:checked:active~.inner-circle{background-color:#006fd6}.nb-theme-default nb-radio.status-info .text{color:#222b45}.nb-theme-default nb-radio.status-info .native-input:disabled+.outer-circle{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24)}.nb-theme-default nb-radio.status-info .native-input:disabled~.text{color:rgba(143,155,179,.48)}.nb-theme-default nb-radio.status-info .native-input:disabled:checked+.outer-circle{background-color:rgba(0,0,0,0);border-color:rgba(143,155,179,.48)}.nb-theme-default nb-radio.status-info .native-input:disabled:checked~.inner-circle{background-color:rgba(143,155,179,.48)}.nb-theme-default nb-radio.status-control .native-input:enabled+.outer-circle{background-color:rgba(255,255,255,.08);border-color:#fff}.nb-theme-default nb-radio.status-control .native-input:enabled:checked+.outer-circle{background-color:rgba(0,0,0,0);border-color:#fff}.nb-theme-default nb-radio.status-control .native-input:enabled:checked~.inner-circle{background-color:#fff}.nb-theme-default nb-radio.status-control .native-input:enabled:focus+.outer-circle{background-color:rgba(255,255,255,.24);border-color:#fff}.nb-theme-default nb-radio.status-control .native-input:enabled:checked:focus+.outer-circle{background-color:rgba(0,0,0,0);border-color:#c5cee0}.nb-theme-default nb-radio.status-control .native-input:enabled:checked:focus~.inner-circle{background-color:#edf1f7}.nb-theme-default nb-radio.status-control label:hover .native-input:enabled+.outer-circle{background-color:rgba(255,255,255,.16);border-color:#fff}.nb-theme-default nb-radio.status-control label:hover .native-input:checked:enabled+.outer-circle{background-color:rgba(0,0,0,0);border-color:#f7f9fc}.nb-theme-default nb-radio.status-control label:hover .native-input:checked:enabled~.inner-circle{background-color:#f7f9fc}.nb-theme-default nb-radio.status-control label .native-input:enabled:active+.outer-circle{background-color:rgba(255,255,255,.24);border-color:#fff}.nb-theme-default nb-radio.status-control label .native-input:enabled:checked:active+.outer-circle{background-color:rgba(0,0,0,0);border-color:#edf1f7}.nb-theme-default nb-radio.status-control label .native-input:enabled:checked:active~.inner-circle{background-color:#edf1f7}.nb-theme-default nb-radio.status-control .text{color:#fff}.nb-theme-default nb-radio.status-control .native-input:disabled+.outer-circle{background-color:rgba(143,155,179,.16);border-color:rgba(143,155,179,.24)}.nb-theme-default nb-radio.status-control .native-input:disabled~.text{color:#fff}.nb-theme-default nb-radio.status-control .native-input:disabled:checked+.outer-circle{background-color:rgba(0,0,0,0);border-color:rgba(143,155,179,.48)}.nb-theme-default nb-radio.status-control .native-input:disabled:checked~.inner-circle{background-color:rgba(143,155,179,.48)}.nb-theme-default nb-radio .text{font-family:Open Sans, sans-serif;font-size:.8125rem;font-weight:600;line-height:1.5rem}[dir=ltr] .nb-theme-default nb-radio .text{margin-left:1.25rem}[dir=rtl] .nb-theme-default nb-radio .text{margin-right:1.25rem}.nb-theme-default .nb-tree-grid-header-cell,.nb-theme-default .nb-tree-grid-cell,.nb-theme-default .nb-tree-grid-footer-cell{height:2rem;padding:.875rem 1.25rem;border:1px solid #f7f9fc}.nb-theme-default .nb-tree-grid-header-row{background:#fff;color:#222b45;font-family:Open Sans, sans-serif;font-size:.9375rem;font-weight:600;line-height:1.5rem}.nb-theme-default .nb-tree-grid-footer-row{background:#fff;color:#222b45;font-family:Open Sans, sans-serif;font-size:.9375rem;font-weight:600;line-height:1.5rem}.nb-theme-default .nb-tree-grid-row{background:#fff;color:#222b45;font-family:Open Sans, sans-serif;font-size:.9375rem;font-weight:400;line-height:1.25rem}.nb-theme-default .nb-tree-grid-row:hover{background:#fff}.nb-theme-default .nb-tree-grid-row:nth-child(2n):not(:hover){background-color:#fff}.nb-theme-default .nb-tree-grid-header-cell button{vertical-align:middle}.nb-theme-default nb-tree-grid-row-toggle nb-icon,.nb-theme-default nb-sort-icon nb-icon{font-size:inherit;vertical-align:middle;color:currentColor}.nb-theme-default .nb-tree-grid-header-change-sort-button{background:rgba(0,0,0,0);border:none;padding:0;color:inherit;font-size:inherit;font-weight:inherit;font-family:inherit;line-height:inherit}.nb-theme-default nb-icon{font-size:1.25rem;line-height:1;width:1em;height:1em}.nb-theme-default nb-icon svg{vertical-align:top}.nb-theme-default nb-icon.status-basic{color:#8f9bb3}.nb-theme-default nb-icon.status-primary{color:#36f}.nb-theme-default nb-icon.status-success{color:#00d68f}.nb-theme-default nb-icon.status-warning{color:#fa0}.nb-theme-default nb-icon.status-danger{color:#ff3d71}.nb-theme-default nb-icon.status-info{color:#0095ff}.nb-theme-default nb-icon.status-control{color:#fff}.nb-theme-default .nb-form-control-container{max-width:inherit}.nb-theme-default .nb-form-field-addon{display:flex;justify-content:center;align-items:center;z-index:1}.nb-theme-default .nb-form-field-addon-disabled{color:rgba(143,155,179,.48)}.nb-theme-default nb-form-field.nb-transition .nb-form-field-addon{transition-duration:.15s;transition-property:color;transition-timing-function:ease-in}.nb-theme-default .nb-form-field-addon-basic{color:#8f9bb3}.nb-theme-default .nb-form-field-addon-basic-highlight{color:#36f}.nb-theme-default .nb-form-field-addon-primary{color:#36f}.nb-theme-default .nb-form-field-addon-primary-highlight{color:#274bdb}.nb-theme-default .nb-form-field-addon-success{color:#00d68f}.nb-theme-default .nb-form-field-addon-success-highlight{color:#00b887}.nb-theme-default .nb-form-field-addon-warning{color:#fa0}.nb-theme-default .nb-form-field-addon-warning-highlight{color:#db8b00}.nb-theme-default .nb-form-field-addon-danger{color:#ff3d71}.nb-theme-default .nb-form-field-addon-danger-highlight{color:#db2c66}.nb-theme-default .nb-form-field-addon-info{color:#0095ff}.nb-theme-default .nb-form-field-addon-info-highlight{color:#006fd6}.nb-theme-default .nb-form-field-addon-control{color:#fff}.nb-theme-default .nb-form-field-addon-control-highlight{color:#fff}.nb-theme-default .nb-form-field-limited-width.nb-form-field-size-tiny{max-width:20rem}.nb-theme-default .nb-form-field-prefix-tiny,.nb-theme-default .nb-form-field-suffix-tiny{height:1.5rem;width:1.5rem;font-size:.625rem;line-height:.75rem;font-weight:700}.nb-theme-default .nb-form-field-prefix-tiny nb-icon,.nb-theme-default .nb-form-field-suffix-tiny nb-icon{font-size:.75rem;line-height:.75rem}[dir=ltr] .nb-theme-default .nb-form-field-prefix-tiny{margin-right:calc(1.5rem * -1)}[dir=rtl] .nb-theme-default .nb-form-field-prefix-tiny{margin-left:calc(1.5rem * -1)}[dir=ltr] .nb-theme-default .nb-form-field-suffix-tiny{margin-left:calc(1.5rem * -1)}[dir=rtl] .nb-theme-default .nb-form-field-suffix-tiny{margin-right:calc(1.5rem * -1)}.nb-theme-default .nb-form-field-limited-width.nb-form-field-size-small{max-width:20rem}.nb-theme-default .nb-form-field-prefix-small,.nb-theme-default .nb-form-field-suffix-small{height:2rem;width:2rem;font-size:.75rem;line-height:1rem;font-weight:700}.nb-theme-default .nb-form-field-prefix-small nb-icon,.nb-theme-default .nb-form-field-suffix-small nb-icon{font-size:1rem;line-height:1rem}[dir=ltr] .nb-theme-default .nb-form-field-prefix-small{margin-right:calc(2rem * -1)}[dir=rtl] .nb-theme-default .nb-form-field-prefix-small{margin-left:calc(2rem * -1)}[dir=ltr] .nb-theme-default .nb-form-field-suffix-small{margin-left:calc(2rem * -1)}[dir=rtl] .nb-theme-default .nb-form-field-suffix-small{margin-right:calc(2rem * -1)}.nb-theme-default .nb-form-field-limited-width.nb-form-field-size-medium{max-width:20rem}.nb-theme-default .nb-form-field-prefix-medium,.nb-theme-default .nb-form-field-suffix-medium{height:2.5rem;width:2.5rem;font-size:.875rem;line-height:1rem;font-weight:700}.nb-theme-default .nb-form-field-prefix-medium nb-icon,.nb-theme-default .nb-form-field-suffix-medium nb-icon{font-size:1.25rem;line-height:1.25rem}[dir=ltr] .nb-theme-default .nb-form-field-prefix-medium{margin-right:calc(2.5rem * -1)}[dir=rtl] .nb-theme-default .nb-form-field-prefix-medium{margin-left:calc(2.5rem * -1)}[dir=ltr] .nb-theme-default .nb-form-field-suffix-medium{margin-left:calc(2.5rem * -1)}[dir=rtl] .nb-theme-default .nb-form-field-suffix-medium{margin-right:calc(2.5rem * -1)}.nb-theme-default .nb-form-field-limited-width.nb-form-field-size-large{max-width:30rem}.nb-theme-default .nb-form-field-prefix-large,.nb-theme-default .nb-form-field-suffix-large{height:3rem;width:3rem;font-size:1rem;line-height:1.25rem;font-weight:700}.nb-theme-default .nb-form-field-prefix-large nb-icon,.nb-theme-default .nb-form-field-suffix-large nb-icon{font-size:1.5rem;line-height:1.5rem}[dir=ltr] .nb-theme-default .nb-form-field-prefix-large{margin-right:calc(3rem * -1)}[dir=rtl] .nb-theme-default .nb-form-field-prefix-large{margin-left:calc(3rem * -1)}[dir=ltr] .nb-theme-default .nb-form-field-suffix-large{margin-left:calc(3rem * -1)}[dir=rtl] .nb-theme-default .nb-form-field-suffix-large{margin-right:calc(3rem * -1)}.nb-theme-default .nb-form-field-limited-width.nb-form-field-size-giant{max-width:30rem}.nb-theme-default .nb-form-field-prefix-giant,.nb-theme-default .nb-form-field-suffix-giant{height:3.5rem;width:3.5rem;font-size:1.125rem;line-height:1.5rem;font-weight:700}.nb-theme-default .nb-form-field-prefix-giant nb-icon,.nb-theme-default .nb-form-field-suffix-giant nb-icon{font-size:1.5rem;line-height:1.5rem}[dir=ltr] .nb-theme-default .nb-form-field-prefix-giant{margin-right:calc(3.5rem * -1)}[dir=rtl] .nb-theme-default .nb-form-field-prefix-giant{margin-left:calc(3.5rem * -1)}[dir=ltr] .nb-theme-default .nb-form-field-suffix-giant{margin-left:calc(3.5rem * -1)}[dir=rtl] .nb-theme-default .nb-form-field-suffix-giant{margin-right:calc(3.5rem * -1)}.nb-theme-default nb-tag{border-style:solid;border-width:.0625rem;border-radius:1.5rem;display:inline-flex;align-items:center;font-family:Open Sans, sans-serif;text-transform:capitalize;cursor:default}.nb-theme-default nb-tag.nb-transition{transition-duration:.15s;transition-property:background-color,border-color,color;transition-timing-function:ease-in}.nb-theme-default nb-tag.size-tiny{font-size:.75rem;font-weight:600;line-height:1rem;padding:.0625rem .9375rem}.nb-theme-default nb-tag.size-small{font-size:.8125rem;font-weight:600;line-height:1.5rem;padding:.0625rem .9375rem}.nb-theme-default nb-tag.size-medium{font-size:.9375rem;font-weight:600;line-height:1.5rem;padding:.1875rem .9375rem}.nb-theme-default nb-tag.size-large{font-size:.9375rem;font-weight:600;line-height:1.5rem;padding:.3125rem .9375rem}.nb-theme-default nb-tag.size-giant{font-size:1.125rem;font-weight:700;line-height:1.5rem;padding:.4375rem .9375rem}.nb-theme-default nb-tag.appearance-filled.status-basic{background-color:#edf1f7;border-color:#edf1f7;color:#222b45}.nb-theme-default nb-tag.appearance-filled.status-basic.selected{background-color:color-basic-actove;border-color:#e4e9f2}.nb-theme-default nb-tag.appearance-filled.status-basic.active{background-color:#e4e9f2;border-color:#c5cee0}.nb-theme-default nb-tag.appearance-filled.status-basic:hover{background-color:#f7f9fc;border-color:#f7f9fc}.nb-theme-default nb-tag.appearance-filled.status-primary{background-color:#36f;border-color:#36f;color:#fff}.nb-theme-default nb-tag.appearance-filled.status-primary.selected{background-color:color-primary-actove;border-color:#274bdb}.nb-theme-default nb-tag.appearance-filled.status-primary.active{background-color:#274bdb;border-color:#1a34b8}.nb-theme-default nb-tag.appearance-filled.status-primary:hover{background-color:#598bff;border-color:#598bff}.nb-theme-default nb-tag.appearance-filled.status-success{background-color:#00d68f;border-color:#00d68f;color:#fff}.nb-theme-default nb-tag.appearance-filled.status-success.selected{background-color:color-success-actove;border-color:#00b887}.nb-theme-default nb-tag.appearance-filled.status-success.active{background-color:#00b887;border-color:#00997a}.nb-theme-default nb-tag.appearance-filled.status-success:hover{background-color:#2ce69b;border-color:#2ce69b}.nb-theme-default nb-tag.appearance-filled.status-warning{background-color:#fa0;border-color:#fa0;color:#fff}.nb-theme-default nb-tag.appearance-filled.status-warning.selected{background-color:color-warning-actove;border-color:#db8b00}.nb-theme-default nb-tag.appearance-filled.status-warning.active{background-color:#db8b00;border-color:#b86e00}.nb-theme-default nb-tag.appearance-filled.status-warning:hover{background-color:#ffc94d;border-color:#ffc94d}.nb-theme-default nb-tag.appearance-filled.status-danger{background-color:#ff3d71;border-color:#ff3d71;color:#fff}.nb-theme-default nb-tag.appearance-filled.status-danger.selected{background-color:color-danger-actove;border-color:#db2c66}.nb-theme-default nb-tag.appearance-filled.status-danger.active{background-color:#db2c66;border-color:#b81d5b}.nb-theme-default nb-tag.appearance-filled.status-danger:hover{background-color:#ff708d;border-color:#ff708d}.nb-theme-default nb-tag.appearance-filled.status-info{background-color:#0095ff;border-color:#0095ff;color:#fff}.nb-theme-default nb-tag.appearance-filled.status-info.selected{background-color:color-info-actove;border-color:#006fd6}.nb-theme-default nb-tag.appearance-filled.status-info.active{background-color:#006fd6;border-color:#0057c2}.nb-theme-default nb-tag.appearance-filled.status-info:hover{background-color:#42aaff;border-color:#42aaff}.nb-theme-default nb-tag.appearance-filled.status-control{background-color:#fff;border-color:#fff;color:#222b45}.nb-theme-default nb-tag.appearance-filled.status-control.selected{background-color:color-control-actove;border-color:#edf1f7}.nb-theme-default nb-tag.appearance-filled.status-control.active{background-color:#f7f9fc;border-color:#f7f9fc}.nb-theme-default nb-tag.appearance-filled.status-control:hover{background-color:#edf1f7;border-color:#c5cee0}.nb-theme-default nb-tag.appearance-outline.status-basic{background-color:rgba(143,155,179,.08);border-color:#8f9bb3;color:#8f9bb3}.nb-theme-default nb-tag.appearance-outline.status-basic.selected{background-color:rgba(143,155,179,.24);border-color:#8f9bb3;color:#8f9bb3}.nb-theme-default nb-tag.appearance-outline.status-basic.active{background-color:rgba(143,155,179,.24);border-color:#8f9bb3;color:#8f9bb3}.nb-theme-default nb-tag.appearance-outline.status-basic:hover{background-color:rgba(143,155,179,.16);border-color:#8f9bb3;color:#8f9bb3}.nb-theme-default nb-tag.appearance-outline.status-primary{background-color:rgba(51,102,255,.08);border-color:#36f;color:#36f}.nb-theme-default nb-tag.appearance-outline.status-primary.selected{background-color:rgba(51,102,255,.24);border-color:#36f;color:#36f}.nb-theme-default nb-tag.appearance-outline.status-primary.active{background-color:rgba(51,102,255,.24);border-color:#36f;color:#36f}.nb-theme-default nb-tag.appearance-outline.status-primary:hover{background-color:rgba(51,102,255,.16);border-color:#36f;color:#36f}.nb-theme-default nb-tag.appearance-outline.status-success{background-color:rgba(0,214,143,.08);border-color:#00d68f;color:#00d68f}.nb-theme-default nb-tag.appearance-outline.status-success.selected{background-color:rgba(0,214,143,.24);border-color:#00d68f;color:#00d68f}.nb-theme-default nb-tag.appearance-outline.status-success.active{background-color:rgba(0,214,143,.24);border-color:#00d68f;color:#00d68f}.nb-theme-default nb-tag.appearance-outline.status-success:hover{background-color:rgba(0,214,143,.16);border-color:#00d68f;color:#00d68f}.nb-theme-default nb-tag.appearance-outline.status-warning{background-color:rgba(255,170,0,.08);border-color:#fa0;color:#fa0}.nb-theme-default nb-tag.appearance-outline.status-warning.selected{background-color:rgba(255,170,0,.24);border-color:#fa0;color:#fa0}.nb-theme-default nb-tag.appearance-outline.status-warning.active{background-color:rgba(255,170,0,.24);border-color:#fa0;color:#fa0}.nb-theme-default nb-tag.appearance-outline.status-warning:hover{background-color:rgba(255,170,0,.16);border-color:#fa0;color:#fa0}.nb-theme-default nb-tag.appearance-outline.status-danger{background-color:rgba(255,61,113,.08);border-color:#ff3d71;color:#ff3d71}.nb-theme-default nb-tag.appearance-outline.status-danger.selected{background-color:rgba(255,61,113,.24);border-color:#ff3d71;color:#ff3d71}.nb-theme-default nb-tag.appearance-outline.status-danger.active{background-color:rgba(255,61,113,.24);border-color:#ff3d71;color:#ff3d71}.nb-theme-default nb-tag.appearance-outline.status-danger:hover{background-color:rgba(255,61,113,.16);border-color:#ff3d71;color:#ff3d71}.nb-theme-default nb-tag.appearance-outline.status-info{background-color:rgba(0,149,255,.08);border-color:#0095ff;color:#0095ff}.nb-theme-default nb-tag.appearance-outline.status-info.selected{background-color:rgba(0,149,255,.24);border-color:#0095ff;color:#0095ff}.nb-theme-default nb-tag.appearance-outline.status-info.active{background-color:rgba(0,149,255,.24);border-color:#0095ff;color:#0095ff}.nb-theme-default nb-tag.appearance-outline.status-info:hover{background-color:rgba(0,149,255,.16);border-color:#0095ff;color:#0095ff}.nb-theme-default nb-tag.appearance-outline.status-control{background-color:rgba(255,255,255,.08);border-color:#fff;color:#fff}.nb-theme-default nb-tag.appearance-outline.status-control.selected{background-color:rgba(255,255,255,.24);border-color:#fff;color:#fff}.nb-theme-default nb-tag.appearance-outline.status-control.active{background-color:rgba(255,255,255,.24);border-color:#fff;color:#fff}.nb-theme-default nb-tag.appearance-outline.status-control:hover{background-color:rgba(255,255,255,.16);border-color:#fff;color:#fff}.nb-theme-default .nb-tag-remove{cursor:pointer}.nb-theme-default .nb-tag-remove.size-tiny{font-size:1rem}[dir=ltr] .nb-theme-default .nb-tag-remove.size-tiny{margin-left:.625rem;margin-right:-0.625rem}[dir=rtl] .nb-theme-default .nb-tag-remove.size-tiny{margin-right:.625rem;margin-left:-0.625rem}.nb-theme-default .nb-tag-remove.size-small{font-size:1.5rem}[dir=ltr] .nb-theme-default .nb-tag-remove.size-small{margin-left:.625rem;margin-right:-0.625rem}[dir=rtl] .nb-theme-default .nb-tag-remove.size-small{margin-right:.625rem;margin-left:-0.625rem}.nb-theme-default .nb-tag-remove.size-medium{font-size:1.5rem}[dir=ltr] .nb-theme-default .nb-tag-remove.size-medium{margin-left:.625rem;margin-right:-0.625rem}[dir=rtl] .nb-theme-default .nb-tag-remove.size-medium{margin-right:.625rem;margin-left:-0.625rem}.nb-theme-default .nb-tag-remove.size-large{font-size:1.5rem}[dir=ltr] .nb-theme-default .nb-tag-remove.size-large{margin-left:.625rem;margin-right:-0.625rem}[dir=rtl] .nb-theme-default .nb-tag-remove.size-large{margin-right:.625rem;margin-left:-0.625rem}.nb-theme-default .nb-tag-remove.size-giant{font-size:1.5rem}[dir=ltr] .nb-theme-default .nb-tag-remove.size-giant{margin-left:.625rem;margin-right:-0.625rem}[dir=rtl] .nb-theme-default .nb-tag-remove.size-giant{margin-right:.625rem;margin-left:-0.625rem}.nb-theme-default nb-tag-list{display:inline-flex;outline:none}.nb-theme-default nb-tag-list.size-tiny .nb-tag-list-tags-wrapper{margin:-0.0625rem}.nb-theme-default nb-tag-list.size-tiny .nb-tag-list-tags-wrapper nb-tag,.nb-theme-default nb-tag-list.size-tiny .nb-tag-list-tags-wrapper .nb-tag-input{margin:.0625rem}.nb-theme-default nb-tag-list.size-small .nb-tag-list-tags-wrapper{margin:-0.125rem}.nb-theme-default nb-tag-list.size-small .nb-tag-list-tags-wrapper nb-tag,.nb-theme-default nb-tag-list.size-small .nb-tag-list-tags-wrapper .nb-tag-input{margin:.125rem}.nb-theme-default nb-tag-list.size-medium .nb-tag-list-tags-wrapper{margin:-0.25rem}.nb-theme-default nb-tag-list.size-medium .nb-tag-list-tags-wrapper nb-tag,.nb-theme-default nb-tag-list.size-medium .nb-tag-list-tags-wrapper .nb-tag-input{margin:.25rem}.nb-theme-default nb-tag-list.size-large .nb-tag-list-tags-wrapper{margin:-0.375rem}.nb-theme-default nb-tag-list.size-large .nb-tag-list-tags-wrapper nb-tag,.nb-theme-default nb-tag-list.size-large .nb-tag-list-tags-wrapper .nb-tag-input{margin:.375rem}.nb-theme-default nb-tag-list.size-giant .nb-tag-list-tags-wrapper{margin:-0.5rem}.nb-theme-default nb-tag-list.size-giant .nb-tag-list-tags-wrapper nb-tag,.nb-theme-default nb-tag-list.size-giant .nb-tag-list-tags-wrapper .nb-tag-input{margin:.5rem}.nb-theme-default .nb-tag-list-tags-wrapper{display:inline-flex;align-items:center;align-content:center;flex-wrap:wrap;flex:1}.nb-theme-default .nb-tag-list-with-input{border-style:solid;border-width:1px;font-family:Open Sans, sans-serif;-webkit-appearance:none;-moz-appearance:none;appearance:none}.nb-theme-default .nb-tag-list-with-input.nb-transition{transition-duration:.15s;transition-property:border,background-color,color,box-shadow;transition-timing-function:ease-in}.nb-theme-default .nb-tag-list-with-input::-moz-placeholder{font-family:Open Sans, sans-serif;text-overflow:ellipsis}.nb-theme-default .nb-tag-list-with-input::placeholder{font-family:Open Sans, sans-serif;text-overflow:ellipsis}.nb-theme-default .nb-tag-list-with-input:focus{outline:none}.nb-theme-default .nb-tag-list-with-input.input-full-width{width:100%}.nb-theme-default .nb-tag-list-with-input.shape-rectangle{border-radius:.25rem}.nb-theme-default .nb-tag-list-with-input.shape-semi-round{border-radius:.75rem}.nb-theme-default .nb-tag-list-with-input.shape-round{border-radius:1.5rem}.nb-theme-default .nb-tag-list-with-input.size-tiny{padding:.0625rem 1rem}.nb-theme-default .nb-tag-list-with-input.size-small{padding:.0625rem 1rem}.nb-theme-default .nb-tag-list-with-input.size-medium{padding:.1875rem 1rem}.nb-theme-default .nb-tag-list-with-input.size-large{padding:.3125rem 1rem}.nb-theme-default .nb-tag-list-with-input.size-giant{padding:.4375rem 1rem}.nb-theme-default .nb-tag-list-with-input.status-basic{background-color:#f7f9fc;border-color:#e4e9f2}.nb-theme-default .nb-tag-list-with-input.status-basic.focus{background-color:#fff;border-color:#36f}.nb-theme-default .nb-tag-list-with-input.status-primary{background-color:#f7f9fc;border-color:#36f}.nb-theme-default .nb-tag-list-with-input.status-primary.focus{background-color:#fff;border-color:#1a34b8}.nb-theme-default .nb-tag-list-with-input.status-success{background-color:#f7f9fc;border-color:#00d68f}.nb-theme-default .nb-tag-list-with-input.status-success.focus{background-color:#fff;border-color:#00997a}.nb-theme-default .nb-tag-list-with-input.status-warning{background-color:#f7f9fc;border-color:#fa0}.nb-theme-default .nb-tag-list-with-input.status-warning.focus{background-color:#fff;border-color:#b86e00}.nb-theme-default .nb-tag-list-with-input.status-danger{background-color:#f7f9fc;border-color:#ff3d71}.nb-theme-default .nb-tag-list-with-input.status-danger.focus{background-color:#fff;border-color:#b81d5b}.nb-theme-default .nb-tag-list-with-input.status-info{background-color:#f7f9fc;border-color:#0095ff}.nb-theme-default .nb-tag-list-with-input.status-info.focus{background-color:#fff;border-color:#0057c2}.nb-theme-default .nb-tag-list-with-input.status-control{background-color:rgba(255,255,255,.24);border-color:rgba(255,255,255,.4)}.nb-theme-default .nb-tag-list-with-input.status-control.focus{background-color:rgba(255,255,255,.4);border-color:#fff}.nb-theme-default nb-form-field nb-tag-list{width:100%}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-tiny{padding-left:1.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-tiny{padding-right:1.5rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-tiny{padding-right:1.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-tiny{padding-left:1.5rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-small{padding-left:2rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-small{padding-right:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-small{padding-right:2rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-small{padding-left:2rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-medium{padding-left:2.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-medium{padding-right:2.5rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-medium{padding-right:2.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-medium{padding-left:2.5rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-large{padding-left:3rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-large{padding-right:3rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-large{padding-right:3rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-large{padding-left:3rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-giant{padding-left:3.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-prefix .nb-tag-list-with-input.size-giant{padding-right:3.5rem}[dir=ltr] .nb-theme-default .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-giant{padding-right:3.5rem}[dir=rtl] .nb-theme-default .nb-form-field-control-with-suffix .nb-tag-list-with-input.size-giant{padding-left:3.5rem}.nb-theme-default .nb-tag-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:rgba(0,0,0,0);background:rgba(0,0,0,0);outline:none;flex:1;padding:0;min-width:6rem;font-family:Open Sans, sans-serif}.nb-theme-default .nb-tag-input::-moz-placeholder{font-family:Open Sans, sans-serif}.nb-theme-default .nb-tag-input::placeholder{font-family:Open Sans, sans-serif}.nb-theme-default .nb-tag-input.size-tiny{font-size:.75rem;font-weight:600;line-height:1rem;padding:.125rem 0}.nb-theme-default .nb-tag-input.size-tiny::-moz-placeholder{font-size:.9375rem;font-weight:400;line-height:1.25rem}.nb-theme-default .nb-tag-input.size-tiny::placeholder{font-size:.9375rem;font-weight:400;line-height:1.25rem}.nb-theme-default .nb-tag-input.size-small{font-size:.8125rem;font-weight:600;line-height:1.5rem;padding:.125rem 0}.nb-theme-default .nb-tag-input.size-small::-moz-placeholder{font-size:.9375rem;font-weight:400;line-height:1.25rem}.nb-theme-default .nb-tag-input.size-small::placeholder{font-size:.9375rem;font-weight:400;line-height:1.25rem}.nb-theme-default .nb-tag-input.size-medium{font-size:.9375rem;font-weight:600;line-height:1.5rem;padding:.25rem 0}.nb-theme-default .nb-tag-input.size-medium::-moz-placeholder{font-size:.9375rem;font-weight:400;line-height:1.25rem}.nb-theme-default .nb-tag-input.size-medium::placeholder{font-size:.9375rem;font-weight:400;line-height:1.25rem}.nb-theme-default .nb-tag-input.size-large{font-size:.9375rem;font-weight:600;line-height:1.5rem;padding:.375rem 0}.nb-theme-default .nb-tag-input.size-large::-moz-placeholder{font-size:.9375rem;font-weight:400;line-height:1.25rem}.nb-theme-default .nb-tag-input.size-large::placeholder{font-size:.9375rem;font-weight:400;line-height:1.25rem}.nb-theme-default .nb-tag-input.size-giant{font-size:1.125rem;font-weight:700;line-height:1.5rem;padding:.5rem 0}.nb-theme-default .nb-tag-input.size-giant::-moz-placeholder{font-size:.9375rem;font-weight:400;line-height:1.25rem}.nb-theme-default .nb-tag-input.size-giant::placeholder{font-size:.9375rem;font-weight:400;line-height:1.25rem}.nb-theme-default .nb-tag-input.status-basic{color:#222b45}.nb-theme-default .nb-tag-input.status-basic::-moz-placeholder{color:#8f9bb3}.nb-theme-default .nb-tag-input.status-basic::placeholder{color:#8f9bb3}.nb-theme-default .nb-tag-input.status-basic:disabled{color:rgba(143,155,179,.48)}.nb-theme-default .nb-tag-input.status-basic:disabled::-moz-placeholder{color:rgba(143,155,179,.48)}.nb-theme-default .nb-tag-input.status-basic:disabled::placeholder{color:rgba(143,155,179,.48)}.nb-theme-default .nb-tag-input.status-primary{color:#222b45}.nb-theme-default .nb-tag-input.status-primary::-moz-placeholder{color:#8f9bb3}.nb-theme-default .nb-tag-input.status-primary::placeholder{color:#8f9bb3}.nb-theme-default .nb-tag-input.status-primary:disabled{color:rgba(143,155,179,.48)}.nb-theme-default .nb-tag-input.status-primary:disabled::-moz-placeholder{color:rgba(143,155,179,.48)}.nb-theme-default .nb-tag-input.status-primary:disabled::placeholder{color:rgba(143,155,179,.48)}.nb-theme-default .nb-tag-input.status-success{color:#222b45}.nb-theme-default .nb-tag-input.status-success::-moz-placeholder{color:#8f9bb3}.nb-theme-default .nb-tag-input.status-success::placeholder{color:#8f9bb3}.nb-theme-default .nb-tag-input.status-success:disabled{color:rgba(143,155,179,.48)}.nb-theme-default .nb-tag-input.status-success:disabled::-moz-placeholder{color:rgba(143,155,179,.48)}.nb-theme-default .nb-tag-input.status-success:disabled::placeholder{color:rgba(143,155,179,.48)}.nb-theme-default .nb-tag-input.status-warning{color:#222b45}.nb-theme-default .nb-tag-input.status-warning::-moz-placeholder{color:#8f9bb3}.nb-theme-default .nb-tag-input.status-warning::placeholder{color:#8f9bb3}.nb-theme-default .nb-tag-input.status-warning:disabled{color:rgba(143,155,179,.48)}.nb-theme-default .nb-tag-input.status-warning:disabled::-moz-placeholder{color:rgba(143,155,179,.48)}.nb-theme-default .nb-tag-input.status-warning:disabled::placeholder{color:rgba(143,155,179,.48)}.nb-theme-default .nb-tag-input.status-danger{color:#222b45}.nb-theme-default .nb-tag-input.status-danger::-moz-placeholder{color:#8f9bb3}.nb-theme-default .nb-tag-input.status-danger::placeholder{color:#8f9bb3}.nb-theme-default .nb-tag-input.status-danger:disabled{color:rgba(143,155,179,.48)}.nb-theme-default .nb-tag-input.status-danger:disabled::-moz-placeholder{color:rgba(143,155,179,.48)}.nb-theme-default .nb-tag-input.status-danger:disabled::placeholder{color:rgba(143,155,179,.48)}.nb-theme-default .nb-tag-input.status-info{color:#222b45}.nb-theme-default .nb-tag-input.status-info::-moz-placeholder{color:#8f9bb3}.nb-theme-default .nb-tag-input.status-info::placeholder{color:#8f9bb3}.nb-theme-default .nb-tag-input.status-info:disabled{color:rgba(143,155,179,.48)}.nb-theme-default .nb-tag-input.status-info:disabled::-moz-placeholder{color:rgba(143,155,179,.48)}.nb-theme-default .nb-tag-input.status-info:disabled::placeholder{color:rgba(143,155,179,.48)}.nb-theme-default .nb-tag-input.status-control{color:#fff}.nb-theme-default .nb-tag-input.status-control::-moz-placeholder{color:#fff}.nb-theme-default .nb-tag-input.status-control::placeholder{color:#fff}.nb-theme-default .nb-tag-input.status-control:disabled{color:#fff}.nb-theme-default .nb-tag-input.status-control:disabled::-moz-placeholder{color:#fff}.nb-theme-default .nb-tag-input.status-control:disabled::placeholder{color:#fff}.nb-theme-default{color:#222b45;font-family:Open Sans, sans-serif;font-size:.9375rem;font-weight:400;line-height:1.25rem}.nb-theme-default h1,.nb-theme-default h2,.nb-theme-default h3,.nb-theme-default h4,.nb-theme-default h5,.nb-theme-default h6,.nb-theme-default .h1,.nb-theme-default .h2,.nb-theme-default .h3,.nb-theme-default .h4,.nb-theme-default .h5,.nb-theme-default .h6{color:#222b45}.nb-theme-default h1,.nb-theme-default .h1{font-size:2.25rem;font-family:Open Sans, sans-serif;font-weight:700;line-height:3rem}.nb-theme-default h2,.nb-theme-default .h2{font-size:2rem;font-family:Open Sans, sans-serif;font-weight:700;line-height:2.5rem}.nb-theme-default h3,.nb-theme-default .h3{font-size:1.875rem;font-family:Open Sans, sans-serif;font-weight:700;line-height:2.5rem}.nb-theme-default h4,.nb-theme-default .h4{font-size:1.625rem;font-family:Open Sans, sans-serif;font-weight:700;line-height:2rem}.nb-theme-default h5,.nb-theme-default .h5{font-size:1.375rem;font-family:Open Sans, sans-serif;font-weight:700;line-height:2rem}.nb-theme-default h6,.nb-theme-default .h6{font-size:1.125rem;font-family:Open Sans, sans-serif;font-weight:700;line-height:1.5rem}.nb-theme-default .subtitle,.nb-theme-default .subtitle-2{color:#222b45}.nb-theme-default .subtitle{font-family:Open Sans, sans-serif;font-size:.9375rem;font-weight:600;line-height:1.5rem}.nb-theme-default .subtitle-2{font-family:Open Sans, sans-serif;font-size:.8125rem;font-weight:600;line-height:1.5rem}.nb-theme-default p,.nb-theme-default .paragraph{color:#222b45;font-family:Open Sans, sans-serif;font-size:.9375rem;font-weight:400;line-height:1.25rem}.nb-theme-default .paragraph-2{color:#222b45;font-family:Open Sans, sans-serif;font-size:.8125rem;font-weight:400;line-height:1.125rem}.nb-theme-default a{color:#36f;text-decoration:underline;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit}.nb-theme-default a:focus{color:#274bdb}.nb-theme-default a:hover{color:#598bff}.nb-theme-default a.link-control,.nb-theme-default a.link-control:hover{color:#fff}.nb-theme-default a.link-alternate,.nb-theme-default a.link-alternate:hover{color:#fff}.nb-theme-default .label{color:#8f9bb3;font-family:Open Sans, sans-serif;font-size:.75rem;font-weight:700;line-height:1rem}.nb-theme-default .caption{font-family:Open Sans, sans-serif;font-size:.75rem;font-weight:400;line-height:1rem}.nb-theme-default .caption-2{font-family:Open Sans, sans-serif;font-size:.75rem;font-weight:600;line-height:1rem}.nb-theme-default .caption,.nb-theme-default .caption-2{color:#8f9bb3}.nb-theme-default .caption.status-basic,.nb-theme-default .caption-2.status-basic{color:#222b45}.nb-theme-default .caption.status-primary,.nb-theme-default .caption-2.status-primary{color:#36f}.nb-theme-default .caption.status-success,.nb-theme-default .caption-2.status-success{color:#00d68f}.nb-theme-default .caption.status-warning,.nb-theme-default .caption-2.status-warning{color:#fa0}.nb-theme-default .caption.status-danger,.nb-theme-default .caption-2.status-danger{color:#ff3d71}.nb-theme-default .caption.status-info,.nb-theme-default .caption-2.status-info{color:#0095ff}.nb-theme-default .caption.status-control,.nb-theme-default .caption-2.status-control{color:#fff}.nb-theme-default li{color:#222b45;font-family:Open Sans, sans-serif;font-size:.9375rem;font-weight:400;line-height:1.25rem}.nb-theme-default .text-alternate{color:#fff}.nb-theme-default .text-disabled{color:rgba(143,155,179,.48)}.nb-theme-default .text-hint{color:#8f9bb3}.nb-theme-default .text-basic{color:#222b45}.nb-theme-default .text-primary{color:#36f}.nb-theme-default .text-success{color:#00d68f}.nb-theme-default .text-warning{color:#fa0}.nb-theme-default .text-danger{color:#ff3d71}.nb-theme-default .text-info{color:#0095ff}.nb-theme-default .text-control{color:#fff}.nb-theme-default ng2-smart-table table tr th,.nb-theme-default ng2-smart-table table tr th a{font-family:Open Sans, sans-serif;font-size:.9375rem;font-weight:400;line-height:1.25rem;color:#222b45}.nb-theme-default ng2-smart-table table tr td{font-family:Open Sans, sans-serif;font-size:.9375rem;font-weight:400;line-height:1.25rem;color:#222b45}.nb-theme-default ng2-smart-table table tr th,.nb-theme-default ng2-smart-table table tr td{position:relative;padding:.875rem 1.25rem;border:1px solid #edf1f7;vertical-align:middle}.nb-theme-default ng2-smart-table table tr.ng2-smart-titles th{padding:.875rem 1.25rem}[dir=ltr] .nb-theme-default ng2-smart-table table tr.ng2-smart-titles th{padding-right:1.75rem}[dir=rtl] .nb-theme-default ng2-smart-table table tr.ng2-smart-titles th{padding-left:1.75rem}.nb-theme-default ng2-smart-table table tr.ng2-smart-titles th a:hover,.nb-theme-default ng2-smart-table table tr.ng2-smart-titles th a:active,.nb-theme-default ng2-smart-table table tr.ng2-smart-titles th a:visited{color:#222b45;text-decoration:none}.nb-theme-default ng2-smart-table table tr.ng2-smart-titles th a.sort.asc,.nb-theme-default ng2-smart-table table tr.ng2-smart-titles th a.sort.desc{font-weight:400}.nb-theme-default ng2-smart-table table tr.ng2-smart-titles th a.sort.asc::after,.nb-theme-default ng2-smart-table table tr.ng2-smart-titles th a.sort.desc::after{border-bottom-color:#222b45;border-width:.375rem;position:absolute;margin:0;top:50%;transform:translate(0, -50%)}[dir=ltr] .nb-theme-default ng2-smart-table table tr.ng2-smart-titles th a.sort.asc::after,[dir=ltr] .nb-theme-default ng2-smart-table table tr.ng2-smart-titles th a.sort.desc::after{right:.75rem}[dir=rtl] .nb-theme-default ng2-smart-table table tr.ng2-smart-titles th a.sort.asc::after,[dir=rtl] .nb-theme-default ng2-smart-table table tr.ng2-smart-titles th a.sort.desc::after{left:.75rem}.nb-theme-default ng2-smart-table table tr.ng2-smart-titles th a.sort.asc.desc::after,.nb-theme-default ng2-smart-table table tr.ng2-smart-titles th a.sort.desc.desc::after{transform:translate(0, -50%) rotate(180deg)}.nb-theme-default ng2-smart-table thead tr{background:#fff}.nb-theme-default ng2-smart-table thead tr.ng2-smart-filters th{padding:.375rem .5rem}.nb-theme-default ng2-smart-table thead tr.ng2-smart-filters th .ng2-smart-filter input{line-height:1.25rem}.nb-theme-default ng2-smart-table tbody tr.selected,.nb-theme-default ng2-smart-table tbody tr:hover{background:#edf1f7 !important}.nb-theme-default ng2-smart-table tbody tr:nth-child(2n){background-color:#f7f9fc}.nb-theme-default ng2-smart-table th.ng2-smart-actions-title-add a{display:flex;align-items:center;justify-content:center;font-size:1.75rem !important;padding:.375rem .5rem;border-color:#36f;background-color:#36f;color:#fff;border-radius:.375rem}.nb-theme-default ng2-smart-table th.ng2-smart-actions-title-add a:focus{border-color:#1a34b8}.nb-theme-default ng2-smart-table th.ng2-smart-actions-title-add a:hover{text-decoration:none;background-color:#598bff;border-color:#598bff}.nb-theme-default ng2-smart-table th.ng2-smart-actions-title-add a:active{background-color:#274bdb;border-color:#274bdb}.nb-theme-default ng2-smart-table .ng2-smart-actions{padding:0;height:1px}.nb-theme-default ng2-smart-table .ng2-smart-actions ng2-st-tbody-edit-delete,.nb-theme-default ng2-smart-table .ng2-smart-actions ng2-st-tbody-create-cancel,.nb-theme-default ng2-smart-table .ng2-smart-actions ng2-st-actions{display:flex;height:100%}.nb-theme-default ng2-smart-table .ng2-smart-actions a.ng2-smart-action{display:flex;align-items:center;justify-content:center;height:100%;width:100%;font-size:2rem !important;color:#222b45}.nb-theme-default ng2-smart-table .ng2-smart-actions a.ng2-smart-action:not(:last-child){border-right:1px solid #edf1f7}.nb-theme-default ng2-smart-table .ng2-smart-actions a.ng2-smart-action:hover{text-decoration:none}.nb-theme-default ng2-smart-table .ng2-smart-actions .ng2-smart-action-add-create:hover,.nb-theme-default ng2-smart-table .ng2-smart-actions .ng2-smart-action-edit-edit:hover,.nb-theme-default ng2-smart-table .ng2-smart-actions .ng2-smart-action-edit-save:hover{color:#36f}.nb-theme-default ng2-smart-table .ng2-smart-actions .ng2-smart-action-add-cancel:hover,.nb-theme-default ng2-smart-table .ng2-smart-actions .ng2-smart-action-delete-delete:hover,.nb-theme-default ng2-smart-table .ng2-smart-actions .ng2-smart-action-edit-cancel:hover{color:#ff3d71}.nb-theme-default ng2-smart-table table-cell-edit-mode{display:block;margin:-7.5px -12px}.nb-theme-default ng2-smart-table ng2-smart-table-pager{display:block}.nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav{display:flex;justify-content:center;margin-top:1.25rem}.nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .ng2-smart-pagination{display:flex;padding:0}.nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .ng2-smart-pagination .page-item.disabled .page-link,.nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .ng2-smart-pagination .page-item.disabled .page-link:focus,.nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .ng2-smart-pagination .page-item.disabled .page-link:hover{background-color:rgba(0,0,0,0);color:rgba(143,155,179,.48)}.nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .pagination{font-family:Open Sans, sans-serif;font-size:.875rem;line-height:1rem;border:#edf1f7 solid 1px;border-radius:.25rem}.nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .pagination li{overflow:hidden}[dir=ltr] .nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:not(:last-child){border-right:1px solid #edf1f7}[dir=rtl] .nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:not(:last-child){border-left:1px solid #edf1f7}.nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .pagination li a.page-link-prev,.nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .pagination li a.page-link-next{font-size:.875rem;line-height:1rem}.nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .pagination li a,.nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .pagination li>span{font-size:.875rem;line-height:1rem;background-color:rgba(0,0,0,0);color:#36f;padding:.75rem 1.25rem;border:none}.nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .pagination li a:focus,.nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .pagination li>span:focus{border-color:#36f;color:#36f}.nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .pagination li a:hover,.nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .pagination li>span:hover{background-color:rgba(0,0,0,0);border-color:#36f;color:#36f;text-decoration:none}[dir=ltr] .nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:first-child a,[dir=ltr] .nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:first-child>span{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}[dir=rtl] .nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:first-child a,[dir=rtl] .nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:first-child>span{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}[dir=ltr] .nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:last-child a,[dir=ltr] .nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:last-child>span{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}[dir=rtl] .nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:last-child a,[dir=rtl] .nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .pagination li:last-child>span{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active a,.nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active a:hover,.nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active a:focus,.nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active>span,.nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active>span:hover,.nb-theme-default ng2-smart-table nav.ng2-smart-pagination-nav .pagination li.active>span:focus{color:#fff;background-color:#36f} /*# sourceMappingURL=styles.css.map*/