.n-base-wave {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: inherit;
}
.n-button {
margin: 0;
font-weight: var(--n-font-weight);
line-height: 1;
font-family: inherit;
padding: var(--n-padding);
height: var(--n-height);
font-size: var(--n-font-size);
border-radius: var(--n-border-radius);
color: var(--n-text-color);
background-color: var(--n-color);
width: var(--n-width);
white-space: nowrap;
outline: none;
position: relative;
z-index: auto;
border: none;
display: inline-flex;
flex-wrap: nowrap;
flex-shrink: 0;
align-items: center;
justify-content: center;
user-select: none;
-webkit-user-select: none;
text-align: center;
cursor: pointer;
text-decoration: none;
transition: color .3s var(--n-bezier),
background-color .3s var(--n-bezier),
opacity .3s var(--n-bezier),
border-color .3s var(--n-bezier);
}
.n-button.n-button--color .n-button__border {
border-color: var(--n-border-color);
}
.n-button.n-button--color.n-button--disabled .n-button__border {
border-color: var(--n-border-color-disabled);
}
.n-button.n-button--color:not(.n-button--disabled):focus .n-button__state-border {
border-color: var(--n-border-color-focus);
}
.n-button.n-button--color:not(.n-button--disabled):hover .n-button__state-border {
border-color: var(--n-border-color-hover);
}
.n-button.n-button--color:not(.n-button--disabled):active .n-button__state-border {
border-color: var(--n-border-color-pressed);
}
.n-button.n-button--color:not(.n-button--disabled).n-button--pressed .n-button__state-border {
border-color: var(--n-border-color-pressed);
}
.n-button.n-button--disabled {
background-color: var(--n-color-disabled);
color: var(--n-text-color-disabled);
}
.n-button.n-button--disabled .n-button__border {
border: var(--n-border-disabled);
}
.n-button:not(.n-button--disabled):focus {
background-color: var(--n-color-focus);
color: var(--n-text-color-focus);
}
.n-button:not(.n-button--disabled):focus .n-button__state-border {
border: var(--n-border-focus);
}
.n-button:not(.n-button--disabled):hover {
background-color: var(--n-color-hover);
color: var(--n-text-color-hover);
}
.n-button:not(.n-button--disabled):hover .n-button__state-border {
border: var(--n-border-hover);
}
.n-button:not(.n-button--disabled):active {
background-color: var(--n-color-pressed);
color: var(--n-text-color-pressed);
}
.n-button:not(.n-button--disabled):active .n-button__state-border {
border: var(--n-border-pressed);
}
.n-button:not(.n-button--disabled).n-button--pressed {
background-color: var(--n-color-pressed);
color: var(--n-text-color-pressed);
}
.n-button:not(.n-button--disabled).n-button--pressed .n-button__state-border {
border: var(--n-border-pressed);
}
.n-button.n-button--loading {
cursor: wait;
}
.n-button .n-base-wave {
pointer-events: none;
top: 0;
right: 0;
bottom: 0;
left: 0;
animation-iteration-count: 1;
animation-duration: var(--n-ripple-duration);
animation-timing-function: var(--n-bezier-ease-out), var(--n-bezier-ease-out);
}
.n-button .n-base-wave.n-base-wave--active {
z-index: 1;
animation-name: button-wave-spread, button-wave-opacity;
}
.n-button .n-button__border, .n-button .n-button__state-border {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: inherit;
transition: border-color .3s var(--n-bezier);
pointer-events: none;
}
.n-button .n-button__border {
border: var(--n-border);
}
.n-button .n-button__state-border {
border: var(--n-border);
border-color: #0000;
z-index: 1;
}
.n-button .n-button__icon {
margin: var(--n-icon-margin);
margin-left: 0;
height: var(--n-icon-size);
width: var(--n-icon-size);
max-width: var(--n-icon-size);
font-size: var(--n-icon-size);
position: relative;
flex-shrink: 0;
}
.n-button .n-button__icon .n-icon-slot {
height: var(--n-icon-size);
width: var(--n-icon-size);
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
}
.n-button .n-button__icon .n-icon-slot.icon-switch-transition-enter-from, .n-button .n-button__icon .n-icon-slot.icon-switch-transition-leave-to {
transform: translateY(-50%) scale(0.75);
left: 0;
top: 50%;
opacity: 0;
}
.n-button .n-button__icon .n-icon-slot.icon-switch-transition-enter-to, .n-button .n-button__icon .n-icon-slot.icon-switch-transition-leave-from {
transform: scale(1) translateY(-50%);
left: 0;
top: 50%;
opacity: 1;
}
.n-button .n-button__icon .n-icon-slot.icon-switch-transition-enter-active, .n-button .n-button__icon .n-icon-slot.icon-switch-transition-leave-active {
transform-origin: center;
position: absolute;
left: 0;
top: 50%;
transition: all .3s cubic-bezier(.4, 0, .2, 1) !important;
}
.n-button .n-button__icon.fade-in-width-expand-transition-leave-from, .n-button .n-button__icon.fade-in-width-expand-transition-enter-to {
opacity: 1;
}
.n-button .n-button__icon.fade-in-width-expand-transition-leave-to, .n-button .n-button__icon.fade-in-width-expand-transition-enter-from {
opacity: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.n-button .n-button__icon.fade-in-width-expand-transition-leave-active {
overflow: hidden;
transition: opacity .2s cubic-bezier(.4, 0, .2, 1),
max-width .2s cubic-bezier(.4, 0, .2, 1) .1s,
margin-left .2s cubic-bezier(.4, 0, .2, 1) .1s,
margin-right .2s cubic-bezier(.4, 0, .2, 1) .1s;
}
.n-button .n-button__icon.fade-in-width-expand-transition-enter-active {
overflow: hidden;
transition: opacity .2s cubic-bezier(.4, 0, .2, 1) .1s,
max-width .2s cubic-bezier(.4, 0, .2, 1),
margin-left .2s cubic-bezier(.4, 0, .2, 1),
margin-right .2s cubic-bezier(.4, 0, .2, 1);
}
.n-button .n-button__content {
display: flex;
align-items: center;
flex-wrap: nowrap;
min-width: 0;
}
.n-button .n-button__content ~ .n-button__icon {
margin: var(--n-icon-margin);
margin-right: 0;
}
.n-button.n-button--block {
display: flex;
width: 100%;
}
.n-button.n-button--dashed .n-button__border, .n-button.n-button--dashed .n-button__state-border {
border-style: dashed !important;
}
.n-button.n-button--disabled {
cursor: not-allowed;
opacity: var(--n-opacity-disabled);
}
@keyframes button-wave-spread {
from {
box-shadow: 0 0 0.5px 0 var(--n-ripple-color);
}
to {
box-shadow: 0 0 0.5px 4.5px var(--n-ripple-color);
}
}
@keyframes button-wave-opacity {
from {
opacity: var(--n-wave-opacity);
}
to {
opacity: 0;
}
}
.n-table {
font-size: var(--n-font-size);
font-variant-numeric: tabular-nums;
line-height: var(--n-line-height);
width: 100%;
border-radius: var(--n-border-radius) var(--n-border-radius) 0 0;
text-align: left;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
background-color: var(--n-td-color);
border-color: var(--n-merged-border-color);
transition: background-color .3s var(--n-bezier),
border-color .3s var(--n-bezier),
color .3s var(--n-bezier);
--n-merged-border-color: var(--n-border-color);
}
.n-table th {
white-space: nowrap;
transition: background-color .3s var(--n-bezier),
border-color .3s var(--n-bezier),
color .3s var(--n-bezier);
text-align: inherit;
padding: var(--n-th-padding);
vertical-align: inherit;
text-transform: none;
border: 0px solid var(--n-merged-border-color);
font-weight: var(--n-th-font-weight);
color: var(--n-th-text-color);
background-color: var(--n-th-color);
border-bottom: 1px solid var(--n-merged-border-color);
border-right: 1px solid var(--n-merged-border-color);
}
.n-table th:last-child {
border-right: 0px solid var(--n-merged-border-color);
}
.n-table td {
transition: background-color .3s var(--n-bezier),
border-color .3s var(--n-bezier),
color .3s var(--n-bezier);
padding: var(--n-td-padding);
color: var(--n-td-text-color);
background-color: var(--n-td-color);
border: 0px solid var(--n-merged-border-color);
border-right: 1px solid var(--n-merged-border-color);
border-bottom: 1px solid var(--n-merged-border-color);
}
.n-table td:last-child {
border-right: 0px solid var(--n-merged-border-color);
}
.n-table.n-table--bordered {
border: 1px solid var(--n-merged-border-color);
border-radius: var(--n-border-radius);
}
.n-table.n-table--bordered tr:last-child td {
border-bottom: 0 solid var(--n-merged-border-color);
}
.n-table.n-table--single-line th {
border-right: 0px solid var(--n-merged-border-color);
}
.n-table.n-table--single-line td {
border-right: 0px solid var(--n-merged-border-color);
}
.n-table.n-table--single-column tr:not(:last-child) td {
border-bottom: 0px solid var(--n-merged-border-color);
}
.n-table.n-table--striped tr:nth-of-type(even) td {
background-color: var(--n-td-color-striped)
}
.n-table:not(.n-table--bottom-bordered) tr:last-child td {
border-bottom: 0px solid var(--n-merged-border-color);
}
.n-modal .n-table, .n-drawer .n-table {
background-color: var(--n-td-color-modal);
--n-merged-border-color: var(--n-border-color-modal);
}
.n-modal .n-table th, .n-drawer .n-table th {
background-color: var(--n-th-color-modal);
}
.n-modal .n-table td, .n-drawer .n-table td {
background-color: var(--n-td-color-modal);
}
.n-popover .n-table {
background-color: var(--n-td-color-popover);
--n-merged-border-color: var(--n-border-color-popover);
}
.n-popover .n-table th {
background-color: var(--n-th-color-popover);
}
.n-popover .n-table td {
background-color: var(--n-td-color-popover);
}
.n-input {
max-width: 100%;
cursor: text;
line-height: 1.5;
z-index: auto;
outline: none;
box-sizing: border-box;
position: relative;
display: inline-flex;
border-radius: var(--n-border-radius);
background-color: var(--n-color);
transition: background-color .3s var(--n-bezier);
font-size: var(--n-font-size);
--n-padding-vertical: calc((var(--n-height) - 1.5 * var(--n-font-size)) / 2);
}
.n-input .n-input__input, .n-input .n-input__textarea {
overflow: hidden;
flex-grow: 1;
position: relative;
}
.n-input .n-input__input-el, .n-input .n-input__textarea-el, .n-input .n-input__input-mirror, .n-input .n-input__textarea-mirror, .n-input .n-input__separator, .n-input .n-input__placeholder {
box-sizing: border-box;
font-size: inherit;
line-height: 1.5;
font-family: inherit;
border: none;
outline: none;
background-color: #0000;
text-align: inherit;
transition: -webkit-text-fill-color .3s var(--n-bezier),
caret-color .3s var(--n-bezier),
color .3s var(--n-bezier),
text-decoration-color .3s var(--n-bezier);
}
.n-input .n-input__input-el, .n-input .n-input__textarea-el {
-webkit-appearance: none;
scrollbar-width: none;
width: 100%;
min-width: 0;
text-decoration-color: var(--n-text-decoration-color);
color: var(--n-text-color);
caret-color: var(--n-caret-color);
background-color: transparent;
}
.n-input .n-input__input-el::-webkit-scrollbar, .n-input .n-input__textarea-el::-webkit-scrollbar, .n-input .n-input__input-el::-webkit-scrollbar-track-piece, .n-input .n-input__textarea-el::-webkit-scrollbar-track-piece, .n-input .n-input__input-el::-webkit-scrollbar-thumb, .n-input .n-input__textarea-el::-webkit-scrollbar-thumb {
width: 0;
height: 0;
display: none;
}
.n-input .n-input__input-el::placeholder, .n-input .n-input__textarea-el::placeholder {
color: #0000;
-webkit-text-fill-color: transparent !important;
}
.n-input .n-input__input-el:-webkit-autofill ~ .n-input__placeholder, .n-input .n-input__textarea-el:-webkit-autofill ~ .n-input__placeholder {
display: none;
}
.n-input.n-input--round:not(.n-input--textarea) {
border-radius: calc(var(--n-height) / 2);
}
.n-input .n-input__placeholder {
pointer-events: none;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
color: var(--n-placeholder-color);
}
.n-input .n-input__placeholder span {
width: 100%;
display: inline-block;
}
.n-input.n-input--textarea .n-input__placeholder {
overflow: visible;
}
.n-input:not(.n-input--autosize) {
width: 100%;
}
.n-input.n-input--autosize .n-input__textarea-el, .n-input.n-input--autosize .n-input__input-el {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
.n-input .n-input-wrapper {
overflow: hidden;
display: inline-flex;
flex-grow: 1;
position: relative;
padding-left: var(--n-padding-left);
padding-right: var(--n-padding-right);
}
.n-input .n-input__input-mirror {
padding: 0;
height: var(--n-height);
line-height: var(--n-height);
overflow: hidden;
visibility: hidden;
position: static;
white-space: pre;
pointer-events: none;
}
.n-input .n-input__input-el {
padding: 0;
height: var(--n-height);
line-height: var(--n-height);
}
.n-input .n-input__input-el[type=password]::-ms-reveal {
display: none;
}
.n-input .n-input__input-el + .n-input__placeholder {
display: flex;
align-items: center;
}
.n-input:not(.n-input--textarea) .n-input__placeholder {
white-space: nowrap;
}
.n-input .n-input__eye {
display: flex;
align-items: center;
justify-content: center;
transition: color .3s var(--n-bezier);
}
.n-input.n-input--textarea {
width: 100%;
}
.n-input.n-input--textarea .n-input-word-count {
position: absolute;
right: var(--n-padding-right);
bottom: var(--n-padding-vertical);
}
.n-input.n-input--textarea.n-input--resizable .n-input-wrapper {
resize: vertical;
min-height: var(--n-height);
}
.n-input.n-input--textarea .n-input__textarea-el, .n-input.n-input--textarea .n-input__textarea-mirror, .n-input.n-input--textarea .n-input__placeholder {
height: 100%;
padding-left: 0;
padding-right: 0;
padding-top: var(--n-padding-vertical);
padding-bottom: var(--n-padding-vertical);
word-break: break-word;
display: inline-block;
vertical-align: bottom;
box-sizing: border-box;
line-height: var(--n-line-height-textarea);
margin: 0;
resize: none;
white-space: pre-wrap;
scroll-padding-block-end: var(--n-padding-vertical);
}
.n-input.n-input--textarea .n-input__textarea-mirror {
width: 100%;
pointer-events: none;
overflow: hidden;
visibility: hidden;
position: static;
white-space: pre-wrap;
overflow-wrap: break-word;
}
.n-input.n-input--pair .n-input__input-el, .n-input.n-input--pair .n-input__placeholder {
text-align: center;
}
.n-input.n-input--pair .n-input__separator {
display: flex;
align-items: center;
transition: color .3s var(--n-bezier);
color: var(--n-text-color);
white-space: nowrap;
}
.n-input.n-input--pair .n-input__separator .n-icon {
color: var(--n-icon-color);
}
.n-input.n-input--pair .n-input__separator .n-base-icon {
color: var(--n-icon-color);
}
.n-input.n-input--disabled {
cursor: not-allowed;
background-color: var(--n-color-disabled);
}
.n-input.n-input--disabled .n-input__border {
border: var(--n-border-disabled);
}
.n-input.n-input--disabled .n-input__input-el, .n-input.n-input--disabled .n-input__textarea-el {
cursor: not-allowed;
color: var(--n-text-color-disabled);
text-decoration-color: var(--n-text-color-disabled);
}
.n-input.n-input--disabled .n-input__placeholder {
color: var(--n-placeholder-color-disabled);
}
.n-input.n-input--disabled .n-input__separator {
color: var(--n-text-color-disabled);
}
.n-input.n-input--disabled .n-input__separator .n-icon {
color: var(--n-icon-color-disabled);
}
.n-input.n-input--disabled .n-input__separator .n-base-icon {
color: var(--n-icon-color-disabled);
}
.n-input.n-input--disabled .n-input-word-count {
color: var(--n-count-text-color-disabled);
}
.n-input.n-input--disabled .n-input__suffix, .n-input.n-input--disabled .n-input__prefix {
color: var(--n-text-color-disabled);
}
.n-input.n-input--disabled .n-input__suffix .n-icon, .n-input.n-input--disabled .n-input__prefix .n-icon {
color: var(--n-icon-color-disabled);
}
.n-input.n-input--disabled .n-input__suffix .n-internal-icon, .n-input.n-input--disabled .n-input__prefix .n-internal-icon {
color: var(--n-icon-color-disabled);
}
.n-input:not(.n-input--disabled) .n-input__eye {
color: var(--n-icon-color);
cursor: pointer;
}
.n-input:not(.n-input--disabled) .n-input__eye:hover {
color: var(--n-icon-color-hover);
}
.n-input:not(.n-input--disabled) .n-input__eye:active {
color: var(--n-icon-color-pressed);
}
.n-input:not(.n-input--disabled):hover .n-input__state-border {
border: var(--n-border-hover);
}
.n-input:not(.n-input--disabled).n-input--focus {
background-color: var(--n-color-focus);
}
.n-input:not(.n-input--disabled).n-input--focus .n-input__state-border {
border: var(--n-border-focus);
box-shadow: var(--n-box-shadow-focus);
}
.n-input .n-input__border, .n-input .n-input__state-border {
box-sizing: border-box;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
pointer-events: none;
border-radius: inherit;
border: var(--n-border);
transition: box-shadow .3s var(--n-bezier),
border-color .3s var(--n-bezier);
}
.n-input .n-input__state-border {
border-color: #0000;
z-index: 1;
}
.n-input .n-input__prefix {
margin-right: 4px;
}
.n-input .n-input__suffix {
margin-left: 4px;
}
.n-input .n-input__suffix, .n-input .n-input__prefix {
transition: color .3s var(--n-bezier);
flex-wrap: nowrap;
flex-shrink: 0;
line-height: var(--n-height);
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--n-suffix-text-color);
}
.n-input .n-input__suffix .n-base-loading, .n-input .n-input__prefix .n-base-loading {
font-size: var(--n-icon-size);
margin: 0 2px;
color: var(--n-loading-color);
}
.n-input .n-input__suffix .n-base-clear, .n-input .n-input__prefix .n-base-clear {
font-size: var(--n-icon-size);
}
.n-input .n-input__suffix .n-base-clear .n-base-clear__placeholder .n-base-icon, .n-input .n-input__prefix .n-base-clear .n-base-clear__placeholder .n-base-icon {
transition: color .3s var(--n-bezier);
color: var(--n-icon-color);
font-size: var(--n-icon-size);
}
.n-input .n-input__suffix > .n-icon, .n-input .n-input__prefix > .n-icon {
transition: color .3s var(--n-bezier);
color: var(--n-icon-color);
font-size: var(--n-icon-size);
}
.n-input .n-input__suffix .n-base-icon, .n-input .n-input__prefix .n-base-icon {
font-size: var(--n-icon-size);
}
.n-input .n-input-word-count {
pointer-events: none;
line-height: 1.5;
font-size: .85em;
color: var(--n-count-text-color);
transition: color .3s var(--n-bezier);
margin-left: 4px;
font-variant: tabular-nums;
}
.n-input.n-input--warning-status:not(.n-input--disabled) .n-base-loading {
color: var(--n-loading-color-warning)
}
.n-input.n-input--warning-status:not(.n-input--disabled) .n-input__input-el, .n-input.n-input--warning-status:not(.n-input--disabled) .n-input__textarea-el {
caret-color: var(--n-caret-color-warning);
}
.n-input.n-input--warning-status:not(.n-input--disabled) .n-input__state-border {
border: var(--n-border-warning);
}
.n-input.n-input--warning-status:not(.n-input--disabled):hover .n-input__state-border {
border: var(--n-border-hover-warning);
}
.n-input.n-input--warning-status:not(.n-input--disabled):focus {
background-color: var(--n-color-focus-warning);
}
.n-input.n-input--warning-status:not(.n-input--disabled):focus .n-input__state-border {
box-shadow: var(--n-box-shadow-focus-warning);
border: var(--n-border-focus-warning);
}
.n-input.n-input--warning-status:not(.n-input--disabled).n-input--focus {
background-color: var(--n-color-focus-warning);
}
.n-input.n-input--warning-status:not(.n-input--disabled).n-input--focus .n-input__state-border {
box-shadow: var(--n-box-shadow-focus-warning);
border: var(--n-border-focus-warning);
}
.n-input.n-input--error-status:not(.n-input--disabled) .n-base-loading {
color: var(--n-loading-color-error)
}
.n-input.n-input--error-status:not(.n-input--disabled) .n-input__input-el, .n-input.n-input--error-status:not(.n-input--disabled) .n-input__textarea-el {
caret-color: var(--n-caret-color-error);
}
.n-input.n-input--error-status:not(.n-input--disabled) .n-input__state-border {
border: var(--n-border-error);
}
.n-input.n-input--error-status:not(.n-input--disabled):hover .n-input__state-border {
border: var(--n-border-hover-error);
}
.n-input.n-input--error-status:not(.n-input--disabled):focus {
background-color: var(--n-color-focus-error);
}
.n-input.n-input--error-status:not(.n-input--disabled):focus .n-input__state-border {
box-shadow: var(--n-box-shadow-focus-error);
border: var(--n-border-focus-error);
}
.n-input.n-input--error-status:not(.n-input--disabled).n-input--focus {
background-color: var(--n-color-focus-error);
}
.n-input.n-input--error-status:not(.n-input--disabled).n-input--focus .n-input__state-border {
box-shadow: var(--n-box-shadow-focus-error);
border: var(--n-border-focus-error);
}
.n-form-item {
display: grid;
line-height: var(--n-line-height);
}
.n-form-item .n-form-item-label {
grid-area: label;
align-items: center;
line-height: 1.25;
text-align: var(--n-label-text-align);
font-size: var(--n-label-font-size);
min-height: var(--n-label-height);
padding: var(--n-label-padding);
color: var(--n-label-text-color);
transition: color .3s var(--n-bezier);
box-sizing: border-box;
font-weight: var(--n-label-font-weight);
}
.n-form-item .n-form-item-label .n-form-item-label__asterisk {
white-space: nowrap;
user-select: none;
-webkit-user-select: none;
color: var(--n-asterisk-color);
transition: color .3s var(--n-bezier);
}
.n-form-item .n-form-item-label .n-form-item-label__asterisk-placeholder {
grid-area: mark;
user-select: none;
-webkit-user-select: none;
visibility: hidden;
}
.n-form-item .n-form-item-blank {
grid-area: blank;
min-height: var(--n-blank-height);
}
.n-form-item.n-form-item--auto-label-width .n-form-item-label {
white-space: nowrap;
}
.n-form-item.n-form-item--left-labelled {
grid-template-areas:
"label blank"
"label feedback";
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto 1fr;
align-items: flex-start;
}
.n-form-item.n-form-item--left-labelled .n-form-item-label {
display: grid;
grid-template-columns: 1fr auto;
min-height: var(--n-blank-height);
height: auto;
box-sizing: border-box;
flex-shrink: 0;
flex-grow: 0;
}
.n-form-item.n-form-item--left-labelled .n-form-item-label.n-form-item-label--reverse-columns-space {
grid-template-columns: auto 1fr;
}
.n-form-item.n-form-item--left-labelled .n-form-item-label.n-form-item-label--left-mark {
grid-template-areas:
"mark text"
". text";
}
.n-form-item.n-form-item--left-labelled .n-form-item-label.n-form-item-label--right-mark {
grid-template-areas:
"text mark"
"text .";
}
.n-form-item.n-form-item--left-labelled .n-form-item-label.n-form-item-label--right-hanging-mark {
grid-template-areas:
"text mark"
"text .";
}
.n-form-item.n-form-item--left-labelled .n-form-item-label .n-form-item-label__text {
grid-area: text;
}
.n-form-item.n-form-item--left-labelled .n-form-item-label .n-form-item-label__asterisk {
grid-area: mark;
align-self: end;
}
.n-form-item.n-form-item--top-labelled {
grid-template-areas:
"label"
"blank"
"feedback";
grid-template-rows: minmax(var(--n-label-height), auto) 1fr;
grid-template-columns: minmax(0, 100%);
}
.n-form-item.n-form-item--top-labelled.n-form-item--no-label {
grid-template-areas:
"blank"
"feedback";
grid-template-rows: 1fr;
}
.n-form-item.n-form-item--top-labelled .n-form-item-label {
display: flex;
align-items: flex-start;
justify-content: var(--n-label-text-align);
}
.n-form-item .n-form-item-blank {
box-sizing: border-box;
display: flex;
align-items: center;
position: relative;
}
.n-form-item .n-form-item-feedback-wrapper {
grid-area: feedback;
box-sizing: border-box;
min-height: var(--n-feedback-height);
font-size: var(--n-feedback-font-size);
line-height: 1.25;
transform-origin: top left;
}
.n-form-item .n-form-item-feedback-wrapper:not(:empty) {
padding: var(--n-feedback-padding);
}
.n-form-item .n-form-item-feedback-wrapper .n-form-item-feedback {
transition: color .3s var(--n-bezier);
color: var(--n-feedback-text-color);
}
.n-form-item .n-form-item-feedback-wrapper .n-form-item-feedback.n-form-item-feedback--warning {
color: var(--n-feedback-text-color-warning);
}
.n-form-item .n-form-item-feedback-wrapper .n-form-item-feedback.n-form-item-feedback--error {
color: var(--n-feedback-text-color-error);
}
.n-form-item .n-form-item-feedback-wrapper .n-form-item-feedback.fade-down-transition-enter-from, .n-form-item .n-form-item-feedback-wrapper .n-form-item-feedback.fade-down-transition-leave-to {
opacity: 0;
transform: translateY(-3px);
}
.n-form-item .n-form-item-feedback-wrapper .n-form-item-feedback.fade-down-transition-enter-to, .n-form-item .n-form-item-feedback-wrapper .n-form-item-feedback.fade-down-transition-leave-from {
opacity: 1;
transform: translateY(0);
}
.n-form-item .n-form-item-feedback-wrapper .n-form-item-feedback.fade-down-transition-leave-active {
transition: opacity .2s cubic-bezier(.4, 0, .2, 1), transform .2s cubic-bezier(.4, 0, .2, 1);
}
.n-form-item .n-form-item-feedback-wrapper .n-form-item-feedback.fade-down-transition-enter-active {
transition: opacity .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1);
}
.n-form.n-form--inline {
width: 100%;
display: inline-flex;
align-items: flex-start;
align-content: space-around;
}
.n-form.n-form--inline .n-form-item {
width: auto;
margin-right: 18px;
}
.n-form.n-form--inline .n-form-item:last-child {
margin-right: 0;
}
.n-base-clear {
flex-shrink: 0;
height: 1em;
width: 1em;
position: relative;
}
.n-base-clear > .n-base-clear__clear {
font-size: var(--n-clear-size);
height: 1em;
width: 1em;
cursor: pointer;
color: var(--n-clear-color);
transition: color .3s var(--n-bezier);
display: flex;
}
.n-base-clear > .n-base-clear__clear:hover {
color: var(--n-clear-color-hover) !important;
}
.n-base-clear > .n-base-clear__clear:active {
color: var(--n-clear-color-pressed) !important;
}
.n-base-clear > .n-base-clear__placeholder {
display: flex;
}
.n-base-clear > .n-base-clear__clear, .n-base-clear > .n-base-clear__placeholder {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.n-base-clear > .n-base-clear__clear.icon-switch-transition-enter-from, .n-base-clear > .n-base-clear__placeholder.icon-switch-transition-enter-from, .n-base-clear > .n-base-clear__clear.icon-switch-transition-leave-to, .n-base-clear > .n-base-clear__placeholder.icon-switch-transition-leave-to {
transform: translateX(-50%) translateY(-50%) scale(0.75);
left: 50%;
top: 50%;
opacity: 0;
}
.n-base-clear > .n-base-clear__clear.icon-switch-transition-enter-to, .n-base-clear > .n-base-clear__placeholder.icon-switch-transition-enter-to, .n-base-clear > .n-base-clear__clear.icon-switch-transition-leave-from, .n-base-clear > .n-base-clear__placeholder.icon-switch-transition-leave-from {
transform: scale(1) translateX(-50%) translateY(-50%);
left: 50%;
top: 50%;
opacity: 1;
}
.n-base-clear > .n-base-clear__clear.icon-switch-transition-enter-active, .n-base-clear > .n-base-clear__placeholder.icon-switch-transition-enter-active, .n-base-clear > .n-base-clear__clear.icon-switch-transition-leave-active, .n-base-clear > .n-base-clear__placeholder.icon-switch-transition-leave-active {
transform-origin: center;
position: absolute;
left: 50%;
top: 50%;
transition: all .3s cubic-bezier(.4, 0, .2, 1) !important;
}
.n-base-selection {
--n-padding-single: var(--n-padding-single-top) var(--n-padding-single-right) var(--n-padding-single-bottom) var(--n-padding-single-left);
--n-padding-multiple: var(--n-padding-multiple-top) var(--n-padding-multiple-right) var(--n-padding-multiple-bottom) var(--n-padding-multiple-left);
position: relative;
z-index: auto;
box-shadow: none;
width: 100%;
max-width: 100%;
display: inline-block;
vertical-align: bottom;
border-radius: var(--n-border-radius);
min-height: var(--n-height);
line-height: 1.5;
font-size: var(--n-font-size);
}
.n-base-selection .n-base-loading {
color: var(--n-loading-color);
}
.n-base-selection .n-base-selection-tags {
min-height: var(--n-height);
}
.n-base-selection .n-base-selection__border, .n-base-selection .n-base-selection__state-border {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
pointer-events: none;
border: var(--n-border);
border-radius: inherit;
transition: box-shadow .3s var(--n-bezier),
border-color .3s var(--n-bezier);
}
.n-base-selection .n-base-selection__state-border {
z-index: 1;
border-color: #0000;
}
.n-base-selection .n-base-suffix {
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 10px;
}
.n-base-selection .n-base-suffix .n-base-suffix__arrow {
font-size: var(--n-arrow-size);
color: var(--n-arrow-color);
transition: color .3s var(--n-bezier);
}
.n-base-selection .n-base-selection-overlay {
display: flex;
align-items: center;
white-space: nowrap;
pointer-events: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: var(--n-padding-single);
transition: color .3s var(--n-bezier);
}
.n-base-selection .n-base-selection-overlay .n-base-selection-overlay__wrapper {
flex-basis: 0;
flex-grow: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.n-base-selection .n-base-selection-placeholder {
color: var(--n-placeholder-color);
}
.n-base-selection .n-base-selection-placeholder .n-base-selection-placeholder__inner {
max-width: 100%;
overflow: hidden;
}
.n-base-selection .n-base-selection-tags {
cursor: pointer;
outline: none;
box-sizing: border-box;
position: relative;
z-index: auto;
display: flex;
padding: var(--n-padding-multiple);
flex-wrap: wrap;
align-items: center;
width: 100%;
vertical-align: bottom;
background-color: var(--n-color);
border-radius: inherit;
transition: color .3s var(--n-bezier),
box-shadow .3s var(--n-bezier),
background-color .3s var(--n-bezier);
}
.n-base-selection .n-base-selection-label {
height: var(--n-height);
display: inline-flex;
width: 100%;
vertical-align: bottom;
cursor: pointer;
outline: none;
z-index: auto;
box-sizing: border-box;
position: relative;
transition: color .3s var(--n-bezier),
box-shadow .3s var(--n-bezier),
background-color .3s var(--n-bezier);
border-radius: inherit;
background-color: var(--n-color);
align-items: center;
}
.n-base-selection .n-base-selection-label .n-base-selection-input {
font-size: inherit;
line-height: inherit;
outline: none;
cursor: pointer;
box-sizing: border-box;
border: none;
width: 100%;
padding: var(--n-padding-single);
background-color: #0000;
color: var(--n-text-color);
transition: color .3s var(--n-bezier);
caret-color: var(--n-caret-color);
}
.n-base-selection .n-base-selection-label .n-base-selection-input .n-base-selection-input__content {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.n-base-selection .n-base-selection-label .n-base-selection-label__render-label {
color: var(--n-text-color);
}
.n-base-selection:not(.n-base-selection--disabled):hover .n-base-selection__state-border {
box-shadow: var(--n-box-shadow-hover);
border: var(--n-border-hover);
}
.n-base-selection:not(.n-base-selection--disabled).n-base-selection--focus .n-base-selection__state-border {
box-shadow: var(--n-box-shadow-focus);
border: var(--n-border-focus);
}
.n-base-selection:not(.n-base-selection--disabled).n-base-selection--active .n-base-selection__state-border {
box-shadow: var(--n-box-shadow-active);
border: var(--n-border-active);
}
.n-base-selection:not(.n-base-selection--disabled).n-base-selection--active .n-base-selection-label {
background-color: var(--n-color-active);
}
.n-base-selection:not(.n-base-selection--disabled).n-base-selection--active .n-base-selection-tags {
background-color: var(--n-color-active);
}
.n-base-selection.n-base-selection--disabled {
cursor: not-allowed;
}
.n-base-selection.n-base-selection--disabled .n-base-selection__arrow {
color: var(--n-arrow-color-disabled);
}
.n-base-selection.n-base-selection--disabled .n-base-selection-label {
cursor: not-allowed;
background-color: var(--n-color-disabled);
}
.n-base-selection.n-base-selection--disabled .n-base-selection-label .n-base-selection-input {
cursor: not-allowed;
color: var(--n-text-color-disabled);
}
.n-base-selection.n-base-selection--disabled .n-base-selection-label .n-base-selection-label__render-label {
color: var(--n-text-color-disabled);
}
.n-base-selection.n-base-selection--disabled .n-base-selection-tags {
cursor: not-allowed;
background-color: var(--n-color-disabled);
}
.n-base-selection.n-base-selection--disabled .n-base-selection-placeholder {
cursor: not-allowed;
color: var(--n-placeholder-color-disabled);
}
.n-base-selection .n-base-selection-input-tag {
height: calc(var(--n-height) - 6px);
line-height: calc(var(--n-height) - 6px);
outline: none;
display: none;
position: relative;
margin-bottom: 3px;
max-width: 100%;
vertical-align: bottom;
}
.n-base-selection .n-base-selection-input-tag .n-base-selection-input-tag__input {
font-size: inherit;
font-family: inherit;
min-width: 1px;
padding: 0;
background-color: #0000;
outline: none;
border: none;
max-width: 100%;
overflow: hidden;
width: 1em;
line-height: inherit;
cursor: pointer;
color: var(--n-text-color);
caret-color: var(--n-caret-color);
}
.n-base-selection .n-base-selection-input-tag .n-base-selection-input-tag__mirror {
position: absolute;
left: 0;
top: 0;
white-space: pre;
visibility: hidden;
user-select: none;
-webkit-user-select: none;
opacity: 0;
}
.n-base-selection.n-base-selection--warning-status .n-base-selection__state-border {
border: var(--n-border-warning);
}
.n-base-selection.n-base-selection--warning-status:not(.n-base-selection--disabled):hover .n-base-selection__state-border {
box-shadow: var(--n-box-shadow-hover-warning);
border: var(--n-border-hover-warning);
}
.n-base-selection.n-base-selection--warning-status:not(.n-base-selection--disabled).n-base-selection--active .n-base-selection__state-border {
box-shadow: var(--n-box-shadow-active-warning);
border: var(--n-border-active-warning);
}
.n-base-selection.n-base-selection--warning-status:not(.n-base-selection--disabled).n-base-selection--active .n-base-selection-label {
background-color: var(--n-color-active-warning);
}
.n-base-selection.n-base-selection--warning-status:not(.n-base-selection--disabled).n-base-selection--active .n-base-selection-tags {
background-color: var(--n-color-active-warning);
}
.n-base-selection.n-base-selection--warning-status:not(.n-base-selection--disabled).n-base-selection--focus .n-base-selection__state-border {
box-shadow: var(--n-box-shadow-focus-warning);
border: var(--n-border-focus-warning);
}
.n-base-selection.n-base-selection--error-status .n-base-selection__state-border {
border: var(--n-border-error);
}
.n-base-selection.n-base-selection--error-status:not(.n-base-selection--disabled):hover .n-base-selection__state-border {
box-shadow: var(--n-box-shadow-hover-error);
border: var(--n-border-hover-error);
}
.n-base-selection.n-base-selection--error-status:not(.n-base-selection--disabled).n-base-selection--active .n-base-selection__state-border {
box-shadow: var(--n-box-shadow-active-error);
border: var(--n-border-active-error);
}
.n-base-selection.n-base-selection--error-status:not(.n-base-selection--disabled).n-base-selection--active .n-base-selection-label {
background-color: var(--n-color-active-error);
}
.n-base-selection.n-base-selection--error-status:not(.n-base-selection--disabled).n-base-selection--active .n-base-selection-tags {
background-color: var(--n-color-active-error);
}
.n-base-selection.n-base-selection--error-status:not(.n-base-selection--disabled).n-base-selection--focus .n-base-selection__state-border {
box-shadow: var(--n-box-shadow-focus-error);
border: var(--n-border-focus-error);
}
.n-base-selection-popover {
margin-bottom: -3px;
display: flex;
flex-wrap: wrap;
margin-right: -8px;
}
.n-base-selection-tag-wrapper {
max-width: 100%;
display: inline-flex;
padding: 0 7px 3px 0;
}
.n-base-selection-tag-wrapper:last-child {
padding-right: 0;
}
.n-base-selection-tag-wrapper .n-tag {
font-size: 14px;
max-width: 100%;
}
.n-base-selection-tag-wrapper .n-tag .n-tag__content {
line-height: 1.25;
text-overflow: ellipsis;
overflow: hidden;
}
.n-select {
z-index: auto;
outline: none;
width: 100%;
position: relative;
}
.n-select-menu {
margin: 4px 0;
box-shadow: var(--n-menu-box-shadow);
}
.n-select-menu.fade-in-scale-up-transition-leave-active {
transform-origin: inherit;
transition: opacity .2s cubic-bezier(.4, 0, 1, 1), transform .2s cubic-bezier(.4, 0, 1, 1), background-color .3s var(--n-bezier), box-shadow .3s var(--n-bezier);
}
.n-select-menu.fade-in-scale-up-transition-enter-active {
transform-origin: inherit;
transition: opacity .2s cubic-bezier(0, 0, .2, 1), transform .2s cubic-bezier(0, 0, .2, 1), background-color .3s var(--n-bezier), box-shadow .3s var(--n-bezier);
}
.n-select-menu.fade-in-scale-up-transition-enter-from, .n-select-menu.fade-in-scale-up-transition-leave-to {
opacity: 0;
transform: scale(.9);
}
.n-select-menu.fade-in-scale-up-transition-leave-from, .n-select-menu.fade-in-scale-up-transition-enter-to {
opacity: 1;
transform: scale(1);
}
.n-base-icon {
height: 1em;
width: 1em;
line-height: 1em;
text-align: center;
display: inline-block;
position: relative;
fill: currentColor;
transform: translateZ(0);
}
.n-base-icon svg {
height: 1em;
width: 1em;
}
.n-pagination {
display: flex;
vertical-align: middle;
font-size: var(--n-item-font-size);
flex-wrap: nowrap;
}
.n-pagination .n-pagination-prefix {
display: flex;
align-items: center;
margin: var(--n-prefix-margin);
}
.n-pagination .n-pagination-suffix {
display: flex;
align-items: center;
margin: var(--n-suffix-margin);
}
.n-pagination > *:not(:first-child) {
margin: var(--n-item-margin);
}
.n-pagination .n-select {
width: var(--n-select-width);
}
.n-pagination.transition-disabled .n-pagination-item {
transition: none !important;
}
.n-pagination .n-pagination-quick-jumper {
white-space: nowrap;
display: flex;
color: var(--n-jumper-text-color);
transition: color .3s var(--n-bezier);
align-items: center;
font-size: var(--n-jumper-font-size);
}
.n-pagination .n-pagination-quick-jumper .n-input {
margin: var(--n-input-margin);
width: var(--n-input-width);
}
.n-pagination .n-pagination-item {
position: relative;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: var(--n-item-size);
height: var(--n-item-size);
padding: var(--n-item-padding);
background-color: var(--n-item-color);
color: var(--n-item-text-color);
border-radius: var(--n-item-border-radius);
border: var(--n-item-border);
fill: var(--n-button-icon-color);
transition: color .3s var(--n-bezier),
border-color .3s var(--n-bezier),
background-color .3s var(--n-bezier),
fill .3s var(--n-bezier);
}
.n-pagination .n-pagination-item.n-pagination-item--button {
background: var(--n-button-color);
color: var(--n-button-icon-color);
border: var(--n-button-border);
padding: 0;
}
.n-pagination .n-pagination-item.n-pagination-item--button .n-base-icon {
font-size: var(--n-button-icon-size);
}
.n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--hover {
background: var(--n-item-color-hover);
color: var(--n-item-text-color-hover);
border: var(--n-item-border-hover);
}
.n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--hover.n-pagination-item--button {
background: var(--n-button-color-hover);
border: var(--n-button-border-hover);
color: var(--n-button-icon-color-hover);
}
.n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover {
background: var(--n-item-color-hover);
color: var(--n-item-text-color-hover);
border: var(--n-item-border-hover);
}
.n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover.n-pagination-item--button {
background: var(--n-button-color-hover);
border: var(--n-button-border-hover);
color: var(--n-button-icon-color-hover);
}
.n-pagination .n-pagination-item:not(.n-pagination-item--disabled):active {
background: var(--n-item-color-pressed);
color: var(--n-item-text-color-pressed);
border: var(--n-item-border-pressed);
}
.n-pagination .n-pagination-item:not(.n-pagination-item--disabled):active.n-pagination-item--button {
background: var(--n-button-color-pressed);
border: var(--n-button-border-pressed);
color: var(--n-button-icon-color-pressed);
}
.n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active {
background: var(--n-item-color-active);
color: var(--n-item-text-color-active);
border: var(--n-item-border-active);
}
.n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active:hover {
background: var(--n-item-color-active-hover);
}
.n-pagination .n-pagination-item.n-pagination-item--disabled {
cursor: not-allowed;
color: var(--n-item-text-color-disabled);
}
.n-pagination .n-pagination-item.n-pagination-item--disabled.n-pagination-item--active, .n-pagination .n-pagination-item.n-pagination-item--disabled.n-pagination-item--button {
background-color: var(--n-item-color-disabled);
border: var(--n-item-border-disabled);
}
.n-pagination.n-pagination--disabled {
cursor: not-allowed;
}
.n-pagination.n-pagination--disabled .n-pagination-quick-jumper {
color: var(--n-jumper-text-color-disabled);
}
.n-pagination.n-pagination--simple {
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.n-pagination.n-pagination--simple .n-pagination-quick-jumper .n-input {
margin: 0;
}
.v-x-scroll {
overflow: auto;
scrollbar-width: none;
}
.v-x-scroll::-webkit-scrollbar {
width: 0;
height: 0;
}
.n-tabs {
box-sizing: border-box;
width: 100%;
display: flex;
flex-direction: column;
transition: background-color .3s var(--n-bezier),
border-color .3s var(--n-bezier);
}
.n-tabs.n-tabs--segment-type .n-tabs-rail.transition-disabled .n-tabs-capsule {
transition: none;
}
.n-tabs.n-tabs--top .n-tab-pane {
padding: var(--n-pane-padding-top) var(--n-pane-padding-right) var(--n-pane-padding-bottom) var(--n-pane-padding-left);
}
.n-tabs.n-tabs--left .n-tab-pane {
padding: var(--n-pane-padding-right) var(--n-pane-padding-bottom) var(--n-pane-padding-left) var(--n-pane-padding-top);
}
.n-tabs.n-tabs--left, .n-tabs.n-tabs--right {
flex-direction: row;
}
.n-tabs.n-tabs--left .n-tabs-bar, .n-tabs.n-tabs--right .n-tabs-bar {
width: 2px;
right: 0;
transition: top .2s var(--n-bezier),
max-height .2s var(--n-bezier),
background-color .3s var(--n-bezier);
}
.n-tabs.n-tabs--left .n-tabs-tab, .n-tabs.n-tabs--right .n-tabs-tab {
padding: var(--n-tab-padding-vertical);
}
.n-tabs.n-tabs--right {
flex-direction: row-reverse;
}
.n-tabs.n-tabs--right .n-tab-pane {
padding: var(--n-pane-padding-left) var(--n-pane-padding-top) var(--n-pane-padding-right) var(--n-pane-padding-bottom);
}
.n-tabs.n-tabs--right .n-tabs-bar {
left: 0;
}
.n-tabs.n-tabs--bottom {
flex-direction: column-reverse;
justify-content: flex-end;
}
.n-tabs.n-tabs--bottom .n-tab-pane {
padding: var(--n-pane-padding-bottom) var(--n-pane-padding-right) var(--n-pane-padding-top) var(--n-pane-padding-left);
}
.n-tabs.n-tabs--bottom .n-tabs-bar {
top: 0;
}
.n-tabs .n-tabs-rail {
padding: 3px;
border-radius: var(--n-tab-border-radius);
width: 100%;
background-color: var(--n-color-segment);
transition: background-color .3s var(--n-bezier);
display: flex;
align-items: center;
}
.n-tabs .n-tabs-rail .n-tabs-capsule {
border-radius: var(--n-tab-border-radius);
position: absolute;
pointer-events: none;
background-color: var(--n-tab-color-segment);
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .08);
transition: transform 0.3s var(--n-bezier);
}
.n-tabs .n-tabs-rail .n-tabs-tab-wrapper {
flex-basis: 0;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
.n-tabs .n-tabs-rail .n-tabs-tab-wrapper .n-tabs-tab {
overflow: hidden;
border-radius: var(--n-tab-border-radius);
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.n-tabs .n-tabs-rail .n-tabs-tab-wrapper .n-tabs-tab.n-tabs-tab--active {
font-weight: var(--n-font-weight-strong);
color: var(--n-tab-text-color-active);
}
.n-tabs .n-tabs-rail .n-tabs-tab-wrapper .n-tabs-tab:hover {
color: var(--n-tab-text-color-hover);
}
.n-tabs.n-tabs--flex .n-tabs-nav {
width: 100%;
position: relative;
}
.n-tabs.n-tabs--flex .n-tabs-nav .n-tabs-wrapper {
width: 100%;
}
.n-tabs.n-tabs--flex .n-tabs-nav .n-tabs-wrapper .n-tabs-tab {
margin-right: 0;
}
.n-tabs .n-tabs-nav {
box-sizing: border-box;
line-height: 1.5;
display: flex;
transition: border-color .3s var(--n-bezier);
}
.n-tabs .n-tabs-nav .n-tabs-nav__prefix, .n-tabs .n-tabs-nav .n-tabs-nav__suffix {
display: flex;
align-items: center;
}
.n-tabs .n-tabs-nav .n-tabs-nav__prefix {
padding-right: 16px;
}
.n-tabs .n-tabs-nav .n-tabs-nav__suffix {
padding-left: 16px;
}
.n-tabs.n-tabs--top .n-tabs-nav-scroll-wrapper::before, .n-tabs.n-tabs--bottom .n-tabs-nav-scroll-wrapper::before {
top: 0;
bottom: 0;
left: 0;
width: 20px;
}
.n-tabs.n-tabs--top .n-tabs-nav-scroll-wrapper::after, .n-tabs.n-tabs--bottom .n-tabs-nav-scroll-wrapper::after {
top: 0;
bottom: 0;
right: 0;
width: 20px;
}
.n-tabs.n-tabs--top .n-tabs-nav-scroll-wrapper.n-tabs-nav-scroll-wrapper--shadow-start::before, .n-tabs.n-tabs--bottom .n-tabs-nav-scroll-wrapper.n-tabs-nav-scroll-wrapper--shadow-start::before {
box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, .12);
}
.n-tabs.n-tabs--top .n-tabs-nav-scroll-wrapper.n-tabs-nav-scroll-wrapper--shadow-end::after, .n-tabs.n-tabs--bottom .n-tabs-nav-scroll-wrapper.n-tabs-nav-scroll-wrapper--shadow-end::after {
box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, .12);
}
.n-tabs.n-tabs--left .n-tabs-nav-scroll-content, .n-tabs.n-tabs--right .n-tabs-nav-scroll-content {
flex-direction: column;
}
.n-tabs.n-tabs--left .n-tabs-nav-scroll-wrapper::before, .n-tabs.n-tabs--right .n-tabs-nav-scroll-wrapper::before {
top: 0;
left: 0;
right: 0;
height: 20px;
}
.n-tabs.n-tabs--left .n-tabs-nav-scroll-wrapper::after, .n-tabs.n-tabs--right .n-tabs-nav-scroll-wrapper::after {
bottom: 0;
left: 0;
right: 0;
height: 20px;
}
.n-tabs.n-tabs--left .n-tabs-nav-scroll-wrapper.n-tabs-nav-scroll-wrapper--shadow-start::before, .n-tabs.n-tabs--right .n-tabs-nav-scroll-wrapper.n-tabs-nav-scroll-wrapper--shadow-start::before {
box-shadow: inset 0 10px 8px -8px rgba(0, 0, 0, .12);
}
.n-tabs.n-tabs--left .n-tabs-nav-scroll-wrapper.n-tabs-nav-scroll-wrapper--shadow-end::after, .n-tabs.n-tabs--right .n-tabs-nav-scroll-wrapper.n-tabs-nav-scroll-wrapper--shadow-end::after {
box-shadow: inset 0 -10px 8px -8px rgba(0, 0, 0, .12);
}
.n-tabs .n-tabs-nav-scroll-wrapper {
flex: 1;
position: relative;
overflow: hidden;
}
.n-tabs .n-tabs-nav-scroll-wrapper .n-tabs-nav-y-scroll {
height: 100%;
width: 100%;
overflow-y: auto;
scrollbar-width: none;
}
.n-tabs .n-tabs-nav-scroll-wrapper .n-tabs-nav-y-scroll::-webkit-scrollbar {
width: 0;
height: 0;
}
.n-tabs .n-tabs-nav-scroll-wrapper::before, .n-tabs .n-tabs-nav-scroll-wrapper::after {
transition: box-shadow .3s var(--n-bezier);
pointer-events: none;
content: "";
position: absolute;
z-index: 1;
}
.n-tabs .n-tabs-nav-scroll-content {
display: flex;
position: relative;
min-width: 100%;
min-height: 100%;
width: fit-content;
box-sizing: border-box;
}
.n-tabs .n-tabs-wrapper {
display: inline-flex;
flex-wrap: nowrap;
position: relative;
}
.n-tabs .n-tabs-tab-wrapper {
display: flex;
flex-wrap: nowrap;
flex-shrink: 0;
flex-grow: 0;
}
.n-tabs .n-tabs-tab {
cursor: pointer;
white-space: nowrap;
flex-wrap: nowrap;
display: inline-flex;
align-items: center;
color: var(--n-tab-text-color);
font-size: var(--n-tab-font-size);
background-clip: padding-box;
padding: var(--n-tab-padding);
transition: box-shadow .3s var(--n-bezier),
color .3s var(--n-bezier),
background-color .3s var(--n-bezier),
border-color .3s var(--n-bezier);
}
.n-tabs .n-tabs-tab.n-tabs-tab--disabled {
cursor: not-allowed;
}
.n-tabs .n-tabs-tab .n-tabs-tab__close {
margin-left: 6px;
transition: background-color .3s var(--n-bezier),
color .3s var(--n-bezier);
}
.n-tabs .n-tabs-tab .n-tabs-tab__label {
display: flex;
align-items: center;
z-index: 1;
}
.n-tabs .n-tabs-bar {
position: absolute;
bottom: 0;
height: 2px;
border-radius: 1px;
background-color: var(--n-bar-color);
transition: left .2s var(--n-bezier),
max-width .2s var(--n-bezier),
opacity .3s var(--n-bezier),
background-color .3s var(--n-bezier);
}
.n-tabs .n-tabs-bar.transition-disabled {
transition: none;
}
.n-tabs .n-tabs-bar.n-tabs-bar--disabled {
background-color: var(--n-tab-text-color-disabled)
}
.n-tabs .n-tabs-pane-wrapper {
position: relative;
overflow: hidden;
transition: max-height .2s var(--n-bezier);
}
.n-tabs .n-tab-pane {
color: var(--n-pane-text-color);
width: 100%;
transition: color .3s var(--n-bezier),
background-color .3s var(--n-bezier),
opacity .2s var(--n-bezier);
left: 0;
right: 0;
top: 0;
}
.n-tabs .n-tab-pane.next-transition-leave-active, .n-tabs .n-tab-pane.prev-transition-leave-active, .n-tabs .n-tab-pane.next-transition-enter-active, .n-tabs .n-tab-pane.prev-transition-enter-active {
transition: color .3s var(--n-bezier),
background-color .3s var(--n-bezier),
transform .2s var(--n-bezier),
opacity .2s var(--n-bezier);
}
.n-tabs .n-tab-pane.next-transition-leave-active, .n-tabs .n-tab-pane.prev-transition-leave-active {
position: absolute;
}
.n-tabs .n-tab-pane.next-transition-enter-from, .n-tabs .n-tab-pane.prev-transition-leave-to {
transform: translateX(32px);
opacity: 0;
}
.n-tabs .n-tab-pane.next-transition-leave-to, .n-tabs .n-tab-pane.prev-transition-enter-from {
transform: translateX(-32px);
opacity: 0;
}
.n-tabs .n-tab-pane.next-transition-leave-from, .n-tabs .n-tab-pane.next-transition-enter-to, .n-tabs .n-tab-pane.prev-transition-leave-from, .n-tabs .n-tab-pane.prev-transition-enter-to {
transform: translateX(0);
opacity: 1;
}
.n-tabs .n-tabs-tab-pad {
box-sizing: border-box;
width: var(--n-tab-gap);
flex-grow: 0;
flex-shrink: 0;
}
.n-tabs.n-tabs--line-type .n-tabs-tab, .n-tabs.n-tabs--bar-type .n-tabs-tab {
font-weight: var(--n-tab-font-weight);
box-sizing: border-box;
vertical-align: bottom;
}
.n-tabs.n-tabs--line-type .n-tabs-tab:hover, .n-tabs.n-tabs--bar-type .n-tabs-tab:hover {
color: var(--n-tab-text-color-hover);
}
.n-tabs.n-tabs--line-type .n-tabs-tab.n-tabs-tab--active, .n-tabs.n-tabs--bar-type .n-tabs-tab.n-tabs-tab--active {
color: var(--n-tab-text-color-active);
font-weight: var(--n-tab-font-weight-active);
}
.n-tabs.n-tabs--line-type .n-tabs-tab.n-tabs-tab--disabled, .n-tabs.n-tabs--bar-type .n-tabs-tab.n-tabs-tab--disabled {
color: var(--n-tab-text-color-disabled);
}
.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--top .n-tabs-nav__prefix, .n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--top .n-tabs-nav__suffix {
border-bottom: 1px solid var(--n-tab-border-color);
}
.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--top .n-tabs-nav-scroll-content {
border-bottom: 1px solid var(--n-tab-border-color);
}
.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--top .n-tabs-bar {
bottom: -1px;
}
.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--left .n-tabs-nav__prefix, .n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--left .n-tabs-nav__suffix {
border-right: 1px solid var(--n-tab-border-color);
}
.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--left .n-tabs-nav-scroll-content {
border-right: 1px solid var(--n-tab-border-color);
}
.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--left .n-tabs-bar {
right: -1px;
}
.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--right .n-tabs-nav__prefix, .n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--right .n-tabs-nav__suffix {
border-left: 1px solid var(--n-tab-border-color);
}
.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--right .n-tabs-nav-scroll-content {
border-left: 1px solid var(--n-tab-border-color);
}
.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--right .n-tabs-bar {
left: -1px;
}
.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--bottom .n-tabs-nav__prefix, .n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--bottom .n-tabs-nav__suffix {
border-top: 1px solid var(--n-tab-border-color);
}
.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--bottom .n-tabs-nav-scroll-content {
border-top: 1px solid var(--n-tab-border-color);
}
.n-tabs .n-tabs-nav.n-tabs-nav--line-type.n-tabs-nav--bottom .n-tabs-bar {
top: -1px;
}
.n-tabs .n-tabs-nav.n-tabs-nav--line-type .n-tabs-nav__prefix, .n-tabs .n-tabs-nav.n-tabs-nav--line-type .n-tabs-nav__suffix {
transition: border-color .3s var(--n-bezier);
}
.n-tabs .n-tabs-nav.n-tabs-nav--line-type .n-tabs-nav-scroll-content {
transition: border-color .3s var(--n-bezier);
}
.n-tabs .n-tabs-nav.n-tabs-nav--line-type .n-tabs-bar {
border-radius: 0;
}
.n-tabs .n-tabs-nav.n-tabs-nav--card-type .n-tabs-nav__prefix, .n-tabs .n-tabs-nav.n-tabs-nav--card-type .n-tabs-nav__suffix {
transition: border-color .3s var(--n-bezier);
border-bottom: 1px solid var(--n-tab-border-color);
}
.n-tabs .n-tabs-nav.n-tabs-nav--card-type .n-tabs-pad {
flex-grow: 1;
transition: border-color .3s var(--n-bezier);
}
.n-tabs .n-tabs-nav.n-tabs-nav--card-type .n-tabs-tab-pad {
transition: border-color .3s var(--n-bezier);
}
.n-tabs .n-tabs-nav.n-tabs-nav--card-type .n-tabs-tab {
font-weight: var(--n-tab-font-weight);
border: 1px solid var(--n-tab-border-color);
background-color: var(--n-tab-color);
box-sizing: border-box;
position: relative;
vertical-align: bottom;
display: flex;
justify-content: space-between;
font-size: var(--n-tab-font-size);
color: var(--n-tab-text-color);
}
.n-tabs .n-tabs-nav.n-tabs-nav--card-type .n-tabs-tab.n-tabs-tab--addable {
padding-left: 8px;
padding-right: 8px;
font-size: 16px;
}
.n-tabs .n-tabs-nav.n-tabs-nav--card-type .n-tabs-tab.n-tabs-tab--addable .n-tabs-tab__height-placeholder {
width: 0;
font-size: var(--n-tab-font-size);
}
.n-tabs .n-tabs-nav.n-tabs-nav--card-type .n-tabs-tab.n-tabs-tab--addable:not(.n-tabs-tab--disabled):hover {
color: var(--n-tab-text-color-hover);
}
.n-tabs .n-tabs-nav.n-tabs-nav--card-type .n-tabs-tab.n-tabs-tab--closable {
padding-right: 8px;
}
.n-tabs .n-tabs-nav.n-tabs-nav--card-type .n-tabs-tab.n-tabs-tab--active {
background-color: #0000;
font-weight: var(--n-tab-font-weight-active);
color: var(--n-tab-text-color-active);
}
.n-tabs .n-tabs-nav.n-tabs-nav--card-type .n-tabs-tab.n-tabs-tab--disabled {
color: var(--n-tab-text-color-disabled);
}
.n-tabs .n-tabs-nav.n-tabs-nav--card-type .n-tabs-scroll-padding {
border-bottom: 1px solid var(--n-tab-border-color);
}
.n-tabs .n-tabs-nav.n-tabs-nav--left .n-tabs-wrapper, .n-tabs .n-tabs-nav.n-tabs-nav--right .n-tabs-wrapper {
flex-direction: column;
}
.n-tabs .n-tabs-nav.n-tabs-nav--left .n-tabs-wrapper .n-tabs-tab-wrapper, .n-tabs .n-tabs-nav.n-tabs-nav--right .n-tabs-wrapper .n-tabs-tab-wrapper {
flex-direction: column;
}
.n-tabs .n-tabs-nav.n-tabs-nav--left .n-tabs-wrapper .n-tabs-tab-wrapper .n-tabs-tab-pad, .n-tabs .n-tabs-nav.n-tabs-nav--right .n-tabs-wrapper .n-tabs-tab-wrapper .n-tabs-tab-pad {
height: var(--n-tab-gap-vertical);
width: 100%;
}
.n-tabs .n-tabs-nav.n-tabs-nav--top.n-tabs-nav--card-type .n-tabs-tab {
border-top-left-radius: var(--n-tab-border-radius);
border-top-right-radius: var(--n-tab-border-radius);
}
.n-tabs .n-tabs-nav.n-tabs-nav--top.n-tabs-nav--card-type .n-tabs-tab.n-tabs-tab--active {
border-bottom: 1px solid #0000;
}
.n-tabs .n-tabs-nav.n-tabs-nav--top.n-tabs-nav--card-type .n-tabs-tab-pad {
border-bottom: 1px solid var(--n-tab-border-color);
}
.n-tabs .n-tabs-nav.n-tabs-nav--top.n-tabs-nav--card-type .n-tabs-pad {
border-bottom: 1px solid var(--n-tab-border-color);
}
.n-tabs .n-tabs-nav.n-tabs-nav--left.n-tabs-nav--card-type .n-tabs-tab {
border-top-left-radius: var(--n-tab-border-radius);
border-bottom-left-radius: var(--n-tab-border-radius);
}
.n-tabs .n-tabs-nav.n-tabs-nav--left.n-tabs-nav--card-type .n-tabs-tab.n-tabs-tab--active {
border-right: 1px solid #0000;
}
.n-tabs .n-tabs-nav.n-tabs-nav--left.n-tabs-nav--card-type .n-tabs-tab-pad {
border-right: 1px solid var(--n-tab-border-color);
}
.n-tabs .n-tabs-nav.n-tabs-nav--left.n-tabs-nav--card-type .n-tabs-pad {
border-right: 1px solid var(--n-tab-border-color);
}
.n-tabs .n-tabs-nav.n-tabs-nav--right.n-tabs-nav--card-type .n-tabs-tab {
border-top-right-radius: var(--n-tab-border-radius);
border-bottom-right-radius: var(--n-tab-border-radius);
}
.n-tabs .n-tabs-nav.n-tabs-nav--right.n-tabs-nav--card-type .n-tabs-tab.n-tabs-tab--active {
border-left: 1px solid #0000;
}
.n-tabs .n-tabs-nav.n-tabs-nav--right.n-tabs-nav--card-type .n-tabs-tab-pad {
border-left: 1px solid var(--n-tab-border-color);
}
.n-tabs .n-tabs-nav.n-tabs-nav--right.n-tabs-nav--card-type .n-tabs-pad {
border-left: 1px solid var(--n-tab-border-color);
}
.n-tabs .n-tabs-nav.n-tabs-nav--bottom.n-tabs-nav--card-type .n-tabs-tab {
border-bottom-left-radius: var(--n-tab-border-radius);
border-bottom-right-radius: var(--n-tab-border-radius);
}
.n-tabs .n-tabs-nav.n-tabs-nav--bottom.n-tabs-nav--card-type .n-tabs-tab.n-tabs-tab--active {
border-top: 1px solid #0000;
}
.n-tabs .n-tabs-nav.n-tabs-nav--bottom.n-tabs-nav--card-type .n-tabs-tab-pad {
border-top: 1px solid var(--n-tab-border-color);
}
.n-tabs .n-tabs-nav.n-tabs-nav--bottom.n-tabs-nav--card-type .n-tabs-pad {
border-top: 1px solid var(--n-tab-border-color);
}
.n-icon {
height: 1em;
width: 1em;
line-height: 1em;
text-align: center;
display: inline-block;
position: relative;
fill: currentColor;
transform: translateZ(0);
}
.n-icon.n-icon--color-transition {
transition: color .3s var(--n-bezier);
}
.n-icon.n-icon--depth {
color: var(--n-color);
}
.n-icon.n-icon--depth svg {
opacity: var(--n-opacity);
transition: opacity .3s var(--n-bezier);
}
.n-icon svg {
height: 1em;
width: 1em;
}
@keyframes n-base-slot-machine-fade-up-in {
from {
transform: translateY(60%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes n-base-slot-machine-fade-down-in {
from {
transform: translateY(-60%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes n-base-slot-machine-fade-up-out {
from {
transform: translateY(0%);
opacity: 1;
}
to {
transform: translateY(-60%);
opacity: 0;
}
}
@keyframes n-base-slot-machine-fade-down-out {
from {
transform: translateY(0%);
opacity: 1;
}
to {
transform: translateY(60%);
opacity: 0;
}
}
.n-base-slot-machine {
overflow: hidden;
white-space: nowrap;
display: inline-block;
height: 18px;
line-height: 18px;
}
.n-base-slot-machine .n-base-slot-machine-number {
display: inline-block;
position: relative;
height: 18px;
width: .6em;
max-width: .6em;
}
.n-base-slot-machine .n-base-slot-machine-number.fade-up-width-expand-transition-leave-active {
transition: opacity .2s cubic-bezier(0, 0, .2, 1),
max-width .2s cubic-bezier(0, 0, .2, 1),
transform .2s cubic-bezier(0, 0, .2, 1);
}
.n-base-slot-machine .n-base-slot-machine-number.fade-up-width-expand-transition-enter-active {
transition: opacity .2s cubic-bezier(0, 0, .2, 1),
max-width .2s cubic-bezier(0, 0, .2, 1),
transform .2s cubic-bezier(0, 0, .2, 1);
}
.n-base-slot-machine .n-base-slot-machine-number.fade-up-width-expand-transition-enter-to {
opacity: 1;
transform: translateX(0) translateY(0);
}
.n-base-slot-machine .n-base-slot-machine-number.fade-up-width-expand-transition-enter-from {
max-width: 0 !important;
opacity: 0;
transform: translateY(60%);
}
.n-base-slot-machine .n-base-slot-machine-number.fade-up-width-expand-transition-leave-from {
opacity: 1;
transform: translateY(0);
}
.n-base-slot-machine .n-base-slot-machine-number.fade-up-width-expand-transition-leave-to {
max-width: 0 !important;
opacity: 0;
transform: translateY(60%);
}
.n-base-slot-machine .n-base-slot-machine-number.fade-in-width-expand-transition-leave-from, .n-base-slot-machine .n-base-slot-machine-number.fade-in-width-expand-transition-enter-to {
opacity: 1;
}
.n-base-slot-machine .n-base-slot-machine-number.fade-in-width-expand-transition-leave-to, .n-base-slot-machine .n-base-slot-machine-number.fade-in-width-expand-transition-enter-from {
opacity: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.n-base-slot-machine .n-base-slot-machine-number.fade-in-width-expand-transition-leave-active {
overflow: hidden;
transition: opacity .2s cubic-bezier(.4, 0, .2, 1),
max-width .2s cubic-bezier(.4, 0, .2, 1) 0s,
margin-left .2s cubic-bezier(.4, 0, .2, 1) 0s,
margin-right .2s cubic-bezier(.4, 0, .2, 1) 0s;
}
.n-base-slot-machine .n-base-slot-machine-number.fade-in-width-expand-transition-enter-active {
overflow: hidden;
transition: opacity .2s cubic-bezier(.4, 0, .2, 1) 0s,
max-width .2s cubic-bezier(.4, 0, .2, 1),
margin-left .2s cubic-bezier(.4, 0, .2, 1),
margin-right .2s cubic-bezier(.4, 0, .2, 1);
}
.n-base-slot-machine .n-base-slot-machine-number .n-base-slot-machine-old-number {
display: inline-block;
opacity: 0;
position: absolute;
left: 0;
right: 0;
}
.n-base-slot-machine .n-base-slot-machine-number .n-base-slot-machine-old-number.n-base-slot-machine-old-number--top {
transform: translateY(-100%);
}
.n-base-slot-machine .n-base-slot-machine-number .n-base-slot-machine-old-number.n-base-slot-machine-old-number--bottom {
transform: translateY(100%);
}
.n-base-slot-machine .n-base-slot-machine-number .n-base-slot-machine-old-number.n-base-slot-machine-old-number--down-scroll {
animation: n-base-slot-machine-fade-down-out .2s cubic-bezier(0, 0, .2, 1);
animation-iteration-count: 1;
}
.n-base-slot-machine .n-base-slot-machine-number .n-base-slot-machine-old-number.n-base-slot-machine-old-number--up-scroll {
animation: n-base-slot-machine-fade-up-out .2s cubic-bezier(0, 0, .2, 1);
animation-iteration-count: 1;
}
.n-base-slot-machine .n-base-slot-machine-number .n-base-slot-machine-current-number {
display: inline-block;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 1;
transform: translateY(0);
width: .6em;
}
.n-base-slot-machine .n-base-slot-machine-number .n-base-slot-machine-current-number.n-base-slot-machine-current-number--down-scroll {
animation: n-base-slot-machine-fade-down-in .2s cubic-bezier(0, 0, .2, 1);
animation-iteration-count: 1;
}
.n-base-slot-machine .n-base-slot-machine-number .n-base-slot-machine-current-number.n-base-slot-machine-current-number--up-scroll {
animation: n-base-slot-machine-fade-up-in .2s cubic-bezier(0, 0, .2, 1);
animation-iteration-count: 1;
}
.n-base-slot-machine .n-base-slot-machine-number .n-base-slot-machine-current-number .n-base-slot-machine-current-number__inner {
display: inline-block;
position: absolute;
right: 0;
top: 0;
width: .6em;
}
.n-base-slot-machine .n-base-slot-machine-number .n-base-slot-machine-current-number .n-base-slot-machine-current-number__inner.n-base-slot-machine-current-number__inner--not-number {
right: unset;
left: 0;
}
@keyframes rotator {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.n-base-loading {
position: relative;
line-height: 0;
width: 1em;
height: 1em;
}
.n-base-loading .n-base-loading__transition-wrapper {
position: absolute;
width: 100%;
height: 100%;
}
.n-base-loading .n-base-loading__transition-wrapper.icon-switch-transition-enter-from, .n-base-loading .n-base-loading__transition-wrapper.icon-switch-transition-leave-to {
transform: scale(0.75);
left: 0;
top: 0;
opacity: 0;
}
.n-base-loading .n-base-loading__transition-wrapper.icon-switch-transition-enter-to, .n-base-loading .n-base-loading__transition-wrapper.icon-switch-transition-leave-from {
transform: scale(1);
left: 0;
top: 0;
opacity: 1;
}
.n-base-loading .n-base-loading__transition-wrapper.icon-switch-transition-enter-active, .n-base-loading .n-base-loading__transition-wrapper.icon-switch-transition-leave-active {
transform-origin: center;
position: absolute;
left: 0;
top: 0;
transition: all .3s cubic-bezier(.4, 0, .2, 1) !important;
}
.n-base-loading .n-base-loading__placeholder {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.n-base-loading .n-base-loading__placeholder.icon-switch-transition-enter-from, .n-base-loading .n-base-loading__placeholder.icon-switch-transition-leave-to {
transform: translateX(-50%) translateY(-50%) scale(0.75);
left: 50%;
top: 50%;
opacity: 0;
}
.n-base-loading .n-base-loading__placeholder.icon-switch-transition-enter-to, .n-base-loading .n-base-loading__placeholder.icon-switch-transition-leave-from {
transform: scale(1) translateX(-50%) translateY(-50%);
left: 50%;
top: 50%;
opacity: 1;
}
.n-base-loading .n-base-loading__placeholder.icon-switch-transition-enter-active, .n-base-loading .n-base-loading__placeholder.icon-switch-transition-leave-active {
transform-origin: center;
position: absolute;
left: 50%;
top: 50%;
transition: all .3s cubic-bezier(.4, 0, .2, 1) !important;
}
.n-base-loading .n-base-loading__container {
animation: rotator 3s linear infinite both;
}
.n-base-loading .n-base-loading__container .n-base-loading__icon {
height: 1em;
width: 1em;
}
@keyframes spin-rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
.n-spin-container {
position: relative;
}
.n-spin-container .n-spin-body {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.n-spin-container .n-spin-body.fade-in-transition-enter-active {
transition: all 0.2s cubic-bezier(.4, 0, .2, 1) !important;
}
.n-spin-container .n-spin-body.fade-in-transition-leave-active {
transition: all 0.2s cubic-bezier(.4, 0, .2, 1) !important;
}
.n-spin-container .n-spin-body.fade-in-transition-enter-from, .n-spin-container .n-spin-body.fade-in-transition-leave-to {
opacity: 0;
}
.n-spin-container .n-spin-body.fade-in-transition-leave-from, .n-spin-container .n-spin-body.fade-in-transition-enter-to {
opacity: 1;
}
.n-spin-body {
display: inline-flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.n-spin {
display: inline-flex;
height: var(--n-size);
width: var(--n-size);
font-size: var(--n-size);
color: var(--n-color);
}
.n-spin.n-spin--rotate {
animation: spin-rotate 2s linear infinite;
}
.n-spin-description {
display: inline-block;
font-size: var(--n-font-size);
color: var(--n-text-color);
transition: color .3s var(--n-bezier);
margin-top: 8px;
}
.n-spin-content {
opacity: 1;
transition: opacity .3s var(--n-bezier);
pointer-events: all;
}
.n-spin-content.n-spin-content--spinning {
user-select: none;
-webkit-user-select: none;
pointer-events: none;
opacity: var(--n-opacity-spinning);
}
.n-dropdown-menu {
transform-origin: var(--v-transform-origin);
background-color: var(--n-color);
border-radius: var(--n-border-radius);
box-shadow: var(--n-box-shadow);
position: relative;
transition: background-color .3s var(--n-bezier),
box-shadow .3s var(--n-bezier);
}
.n-dropdown-menu.fade-in-scale-up-transition-leave-active {
transform-origin: inherit;
transition: opacity .2s cubic-bezier(.4, 0, 1, 1), transform .2s cubic-bezier(.4, 0, 1, 1);
}
.n-dropdown-menu.fade-in-scale-up-transition-enter-active {
transform-origin: inherit;
transition: opacity .2s cubic-bezier(0, 0, .2, 1), transform .2s cubic-bezier(0, 0, .2, 1);
}
.n-dropdown-menu.fade-in-scale-up-transition-enter-from, .n-dropdown-menu.fade-in-scale-up-transition-leave-to {
opacity: 0;
transform: scale(.9);
}
.n-dropdown-menu.fade-in-scale-up-transition-leave-from, .n-dropdown-menu.fade-in-scale-up-transition-enter-to {
opacity: 1;
transform: scale(1);
}
.n-dropdown-menu .n-dropdown-option {
position: relative;
}
.n-dropdown-menu .n-dropdown-option a {
text-decoration: none;
color: inherit;
outline: none;
}
.n-dropdown-menu .n-dropdown-option a::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body {
display: flex;
cursor: pointer;
position: relative;
height: var(--n-option-height);
line-height: var(--n-option-height);
font-size: var(--n-font-size);
color: var(--n-option-text-color);
transition: color .3s var(--n-bezier);
}
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 4px;
right: 4px;
transition: background-color .3s var(--n-bezier);
border-radius: var(--n-border-radius);
}
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--pending {
color: var(--n-option-text-color-hover);
}
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--pending .n-dropdown-option-body__prefix, .n-dropdown-menu .n-dropdown-option .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--pending .n-dropdown-option-body__suffix {
color: var(--n-option-text-color-hover);
}
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--pending::before {
background-color: var(--n-option-color-hover);
}
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--active {
color: var(--n-option-text-color-active);
}
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--active .n-dropdown-option-body__prefix, .n-dropdown-menu .n-dropdown-option .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--active .n-dropdown-option-body__suffix {
color: var(--n-option-text-color-active);
}
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--active::before {
background-color: var(--n-option-color-active);
}
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--child-active {
color: var(--n-option-text-color-child-active);
}
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--child-active .n-dropdown-option-body__prefix, .n-dropdown-menu .n-dropdown-option .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--child-active .n-dropdown-option-body__suffix {
color: var(--n-option-text-color-child-active);
}
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body.n-dropdown-option-body--disabled {
cursor: not-allowed;
opacity: var(--n-option-opacity-disabled);
}
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body.n-dropdown-option-body--group {
font-size: calc(var(--n-font-size) - 1px);
color: var(--n-group-header-text-color);
}
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body.n-dropdown-option-body--group .n-dropdown-option-body__prefix {
width: calc(var(--n-option-prefix-width) / 2);
}
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body.n-dropdown-option-body--group .n-dropdown-option-body__prefix.n-dropdown-option-body__prefix--show-icon {
width: calc(var(--n-option-icon-prefix-width) / 2);
}
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__prefix {
width: var(--n-option-prefix-width);
display: flex;
justify-content: center;
align-items: center;
color: var(--n-prefix-color);
transition: color .3s var(--n-bezier);
z-index: 1;
}
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__prefix.n-dropdown-option-body__prefix--show-icon {
width: var(--n-option-icon-prefix-width);
}
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__prefix .n-icon {
font-size: var(--n-option-icon-size);
}
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__label {
white-space: nowrap;
flex: 1;
z-index: 1;
}
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__suffix {
box-sizing: border-box;
flex-grow: 0;
flex-shrink: 0;
display: flex;
justify-content: flex-end;
align-items: center;
min-width: var(--n-option-suffix-width);
padding: 0 8px;
transition: color .3s var(--n-bezier);
color: var(--n-suffix-color);
z-index: 1;
}
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__suffix.n-dropdown-option-body__suffix--has-submenu {
width: var(--n-option-icon-suffix-width);
}
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__suffix .n-icon {
font-size: var(--n-option-icon-size);
}
.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-menu {
pointer-events: all;
}
.n-dropdown-menu .n-dropdown-option .n-dropdown-offset-container {
pointer-events: none;
position: absolute;
left: 0;
right: 0;
top: -4px;
bottom: -4px;
}
.n-dropdown-menu .n-dropdown-divider {
transition: background-color .3s var(--n-bezier);
background-color: var(--n-divider-color);
height: 1px;
margin: 4px 0;
}
.n-dropdown-menu .n-dropdown-menu-wrapper {
transform-origin: var(--v-transform-origin);
width: fit-content;
}
.n-dropdown-menu > .n-scrollbar {
height: inherit;
max-height: inherit;
}
.n-dropdown-menu:not(.n-dropdown-menu--scrollable) {
padding: var(--n-padding);
}
.n-dropdown-menu.n-dropdown-menu--scrollable .n-dropdown-menu__content {
padding: var(--n-padding);
}
.n-carousel {
position: relative;
width: 100%;
height: 100%;
touch-action: pan-y;
overflow: hidden;
}
.n-carousel .n-carousel__slides {
display: flex;
width: 100%;
height: 100%;
transition-timing-function: var(--n-bezier);
transition-property: transform;
}
.n-carousel .n-carousel__slides .n-carousel__slide {
flex-shrink: 0;
position: relative;
width: 100%;
height: 100%;
outline: none;
overflow: hidden;
}
.n-carousel .n-carousel__slides .n-carousel__slide > img {
display: block;
}
.n-carousel .n-carousel__dots {
position: absolute;
display: flex;
flex-wrap: nowrap;
}
.n-carousel .n-carousel__dots.n-carousel__dots--dot .n-carousel__dot {
height: var(--n-dot-size);
width: var(--n-dot-size);
background-color: var(--n-dot-color);
border-radius: 50%;
cursor: pointer;
transition: box-shadow .3s var(--n-bezier),
background-color .3s var(--n-bezier);
outline: none;
}
.n-carousel .n-carousel__dots.n-carousel__dots--dot .n-carousel__dot:focus {
background-color: var(--n-dot-color-focus);
}
.n-carousel .n-carousel__dots.n-carousel__dots--dot .n-carousel__dot.n-carousel__dot--active {
background-color: var(--n-dot-color-active);
}
.n-carousel .n-carousel__dots.n-carousel__dots--line .n-carousel__dot {
border-radius: 9999px;
width: var(--n-dot-line-width);
height: 4px;
background-color: var(--n-dot-color);
cursor: pointer;
transition: width .3s var(--n-bezier),
box-shadow .3s var(--n-bezier),
background-color .3s var(--n-bezier);
outline: none;
}
.n-carousel .n-carousel__dots.n-carousel__dots--line .n-carousel__dot:focus {
background-color: var(--n-dot-color-focus);
}
.n-carousel .n-carousel__dots.n-carousel__dots--line .n-carousel__dot.n-carousel__dot--active {
width: var(--n-dot-line-width-active);
background-color: var(--n-dot-color-active);
}
.n-carousel .n-carousel__arrow {
transition: background-color .3s var(--n-bezier);
cursor: pointer;
height: 28px;
width: 28px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(255, 255, 255, .2);
color: var(--n-arrow-color);
border-radius: 8px;
user-select: none;
-webkit-user-select: none;
font-size: 18px;
}
.n-carousel .n-carousel__arrow svg {
height: 1em;
width: 1em;
}
.n-carousel .n-carousel__arrow:hover {
background-color: rgba(255, 255, 255, .3);
}
.n-carousel.n-carousel--vertical {
touch-action: pan-x;
}
.n-carousel.n-carousel--vertical .n-carousel__slides {
flex-direction: column;
}
.n-carousel.n-carousel--vertical.n-carousel--fade .n-carousel__slide {
top: 50%;
left: unset;
transform: translateY(-50%);
}
.n-carousel.n-carousel--vertical.n-carousel--card .n-carousel__slide {
top: 50%;
left: unset;
transform: translateY(-50%) translateZ(-400px);
}
.n-carousel.n-carousel--vertical.n-carousel--card .n-carousel__slide.n-carousel__slide--current {
transform: translateY(-50%) translateZ(0);
}
.n-carousel.n-carousel--vertical.n-carousel--card .n-carousel__slide.n-carousel__slide--prev {
transform: translateY(-100%) translateZ(-200px);
}
.n-carousel.n-carousel--vertical.n-carousel--card .n-carousel__slide.n-carousel__slide--next {
transform: translateY(0%) translateZ(-200px);
}
.n-carousel.n-carousel--usercontrol .n-carousel__slides > div {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
}
.n-carousel.n-carousel--left .n-carousel__dots {
transform: translateY(-50%);
top: 50%;
left: 12px;
flex-direction: column;
}
.n-carousel.n-carousel--left .n-carousel__dots.n-carousel__dots--line .n-carousel__dot {
width: 4px;
height: var(--n-dot-line-width);
margin: 4px 0;
transition: height .3s var(--n-bezier),
box-shadow .3s var(--n-bezier),
background-color .3s var(--n-bezier);
outline: none;
}
.n-carousel.n-carousel--left .n-carousel__dots.n-carousel__dots--line .n-carousel__dot.n-carousel__dot--active {
height: var(--n-dot-line-width-active);
}
.n-carousel.n-carousel--left .n-carousel__dot {
margin: 4px 0;
}
.n-carousel .n-carousel__arrow-group {
position: absolute;
display: flex;
flex-wrap: nowrap;
}
.n-carousel.n-carousel--vertical .n-carousel__arrow {
transform: rotate(90deg);
}
.n-carousel.n-carousel--show-arrow.n-carousel--bottom .n-carousel__dots {
transform: translateX(0);
bottom: 18px;
left: 18px;
}
.n-carousel.n-carousel--show-arrow.n-carousel--top .n-carousel__dots {
transform: translateX(0);
top: 18px;
left: 18px;
}
.n-carousel.n-carousel--show-arrow.n-carousel--left .n-carousel__dots {
transform: translateX(0);
top: 18px;
left: 18px;
}
.n-carousel.n-carousel--show-arrow.n-carousel--right .n-carousel__dots {
transform: translateX(0);
top: 18px;
right: 18px;
}
.n-carousel.n-carousel--left .n-carousel__arrow-group {
bottom: 12px;
left: 12px;
flex-direction: column;
}
.n-carousel.n-carousel--left .n-carousel__arrow-group > *:first-child {
margin-bottom: 12px;
}
.n-carousel.n-carousel--right .n-carousel__dots {
transform: translateY(-50%);
top: 50%;
right: 12px;
flex-direction: column;
}
.n-carousel.n-carousel--right .n-carousel__dots.n-carousel__dots--line .n-carousel__dot {
width: 4px;
height: var(--n-dot-line-width);
margin: 4px 0;
transition: height .3s var(--n-bezier),
box-shadow .3s var(--n-bezier),
background-color .3s var(--n-bezier);
outline: none;
}
.n-carousel.n-carousel--right .n-carousel__dots.n-carousel__dots--line .n-carousel__dot.n-carousel__dot--active {
height: var(--n-dot-line-width-active);
}
.n-carousel.n-carousel--right .n-carousel__dot {
margin: 4px 0;
}
.n-carousel.n-carousel--right .n-carousel__arrow-group {
bottom: 12px;
right: 12px;
flex-direction: column;
}
.n-carousel.n-carousel--right .n-carousel__arrow-group > *:first-child {
margin-bottom: 12px;
}
.n-carousel.n-carousel--top .n-carousel__dots {
transform: translateX(-50%);
top: 12px;
left: 50%;
}
.n-carousel.n-carousel--top .n-carousel__dots.n-carousel__dots--line .n-carousel__dot {
margin: 0 4px;
}
.n-carousel.n-carousel--top .n-carousel__dot {
margin: 0 4px;
}
.n-carousel.n-carousel--top .n-carousel__arrow-group {
top: 12px;
right: 12px;
}
.n-carousel.n-carousel--top .n-carousel__arrow-group > *:first-child {
margin-right: 12px;
}
.n-carousel.n-carousel--bottom .n-carousel__dots {
transform: translateX(-50%);
bottom: 12px;
left: 50%;
}
.n-carousel.n-carousel--bottom .n-carousel__dots.n-carousel__dots--line .n-carousel__dot {
margin: 0 4px;
}
.n-carousel.n-carousel--bottom .n-carousel__dot {
margin: 0 4px;
}
.n-carousel.n-carousel--bottom .n-carousel__arrow-group {
bottom: 12px;
right: 12px;
}
.n-carousel.n-carousel--bottom .n-carousel__arrow-group > *:first-child {
margin-right: 12px;
}
.n-carousel.n-carousel--fade .n-carousel__slide {
position: absolute;
opacity: 0;
transition-property: opacity;
pointer-events: none;
}
.n-carousel.n-carousel--fade .n-carousel__slide.n-carousel__slide--current {
opacity: 1;
pointer-events: auto;
}
.n-carousel.n-carousel--card .n-carousel__slides {
perspective: 1000px;
}
.n-carousel.n-carousel--card .n-carousel__slide {
position: absolute;
left: 50%;
opacity: 0;
transform: translateX(-50%) translateZ(-400px);
transition-property: opacity, transform;
}
.n-carousel.n-carousel--card .n-carousel__slide.n-carousel__slide--current {
opacity: 1;
transform: translateX(-50%) translateZ(0);
z-index: 1;
}
.n-carousel.n-carousel--card .n-carousel__slide.n-carousel__slide--prev {
opacity: 0.4;
transform: translateX(-100%) translateZ(-200px);
}
.n-carousel.n-carousel--card .n-carousel__slide.n-carousel__slide--next {
opacity: 0.4;
transform: translateX(0%) translateZ(-200px);
}
@keyframes badge-wave-spread {
from {
box-shadow: 0 0 0.5px 0px var(--n-ripple-color);
opacity: 0.6;
}
to {
box-shadow: 0 0 0.5px 4.5px var(--n-ripple-color);
opacity: 0;
}
}
.n-badge {
display: inline-flex;
position: relative;
vertical-align: middle;
font-family: var(--n-font-family);
}
.n-badge.n-badge--as-is .n-badge-sup {
position: static;
transform: translateX(0);
}
.n-badge.n-badge--as-is .n-badge-sup.fade-in-scale-up-transition-leave-active {
transform-origin: left bottom;
transition: opacity .2s cubic-bezier(.4, 0, 1, 1), transform .2s cubic-bezier(.4, 0, 1, 1);
}
.n-badge.n-badge--as-is .n-badge-sup.fade-in-scale-up-transition-enter-active {
transform-origin: left bottom;
transition: opacity .2s cubic-bezier(0, 0, .2, 1), transform .2s cubic-bezier(0, 0, .2, 1);
}
.n-badge.n-badge--as-is .n-badge-sup.fade-in-scale-up-transition-enter-from, .n-badge.n-badge--as-is .n-badge-sup.fade-in-scale-up-transition-leave-to {
opacity: 0;
transform: translateX(0) scale(.9);
}
.n-badge.n-badge--as-is .n-badge-sup.fade-in-scale-up-transition-leave-from, .n-badge.n-badge--as-is .n-badge-sup.fade-in-scale-up-transition-enter-to {
opacity: 1;
transform: translateX(0) scale(1);
}
.n-badge.n-badge--dot .n-badge-sup {
height: 8px;
width: 8px;
padding: 0;
min-width: 8px;
left: 100%;
bottom: calc(100% - 4px);
}
.n-badge.n-badge--dot .n-badge-sup ::before {
border-radius: 4px;
}
.n-badge .n-badge-sup {
background: var(--n-color);
transition: background-color .3s var(--n-bezier),
color .3s var(--n-bezier);
color: #FFF;
position: absolute;
height: 18px;
line-height: 18px;
border-radius: 9px;
padding: 0 6px;
text-align: center;
font-size: var(--n-font-size);
transform: translateX(-50%);
left: 100%;
bottom: calc(100% - 9px);
font-variant-numeric: tabular-nums;
z-index: 1;
display: flex;
align-items: center;
}
.n-badge .n-badge-sup.fade-in-scale-up-transition-leave-active {
transform-origin: left bottom;
transition: opacity .2s cubic-bezier(.4, 0, 1, 1), transform .2s cubic-bezier(.4, 0, 1, 1);
}
.n-badge .n-badge-sup.fade-in-scale-up-transition-enter-active {
transform-origin: left bottom;
transition: opacity .2s cubic-bezier(0, 0, .2, 1), transform .2s cubic-bezier(0, 0, .2, 1);
}
.n-badge .n-badge-sup.fade-in-scale-up-transition-enter-from, .n-badge .n-badge-sup.fade-in-scale-up-transition-leave-to {
opacity: 0;
transform: translateX(-50%) scale(.9);
}
.n-badge .n-badge-sup.fade-in-scale-up-transition-leave-from, .n-badge .n-badge-sup.fade-in-scale-up-transition-enter-to {
opacity: 1;
transform: translateX(-50%) scale(1);
}
.n-badge .n-badge-sup .n-base-wave {
z-index: 1;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-delay: 1s;
animation-timing-function: var(--n-ripple-bezier);
animation-name: badge-wave-spread;
}
.n-badge .n-badge-sup::before {
opacity: 0;
transform: scale(1);
border-radius: 9px;
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.n-modal-container {
position: fixed;
left: 0;
top: 0;
height: 0;
width: 0;
display: flex;
}
.n-modal-mask {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .4);
}
.n-modal-mask.fade-in-transition-enter-active {
transition: all .25s var(--n-bezier-ease-out) !important;
}
.n-modal-mask.fade-in-transition-leave-active {
transition: all .25s var(--n-bezier-ease-out) !important;
}
.n-modal-mask.fade-in-transition-enter-from, .n-modal-mask.fade-in-transition-leave-to {
opacity: 0;
}
.n-modal-mask.fade-in-transition-leave-from, .n-modal-mask.fade-in-transition-enter-to {
opacity: 1;
}
.n-modal-body-wrapper {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: visible;
}
.n-modal-body-wrapper .n-modal-scroll-content {
min-height: 100%;
display: flex;
position: relative;
}
.n-modal {
position: relative;
align-self: center;
color: var(--n-text-color);
margin: auto;
box-shadow: var(--n-box-shadow);
}
.n-modal.fade-in-scale-up-transition-leave-active {
transform-origin: inherit;
transition: opacity .25s cubic-bezier(.4, 0, 1, 1), transform .25s cubic-bezier(.4, 0, 1, 1);
}
.n-modal.fade-in-scale-up-transition-enter-active {
transform-origin: inherit;
transition: opacity .25s cubic-bezier(0, 0, .2, 1), transform .25s cubic-bezier(0, 0, .2, 1);
}
.n-modal.fade-in-scale-up-transition-enter-from, .n-modal.fade-in-scale-up-transition-leave-to {
opacity: 0;
transform: scale(.5);
}
.n-modal.fade-in-scale-up-transition-leave-from, .n-modal.fade-in-scale-up-transition-enter-to {
opacity: 1;
transform: scale(1);
}
.v-binder-follower-container {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 0;
pointer-events: none;
z-index: auto;
}
.v-binder-follower-content {
position: absolute;
z-index: auto;
}
.v-binder-follower-content > * {
pointer-events: all;
}
.n-checkbox {
font-size: var(--n-font-size);
outline: none;
cursor: pointer;
display: inline-flex;
flex-wrap: nowrap;
align-items: flex-start;
word-break: break-word;
line-height: var(--n-size);
--n-merged-color-table: var(--n-color-table);
}
.n-checkbox.n-checkbox--show-label {
line-height: var(--n-label-line-height);
}
.n-checkbox:hover .n-checkbox-box .n-checkbox-box__border {
border: var(--n-border-checked);
}
.n-checkbox:focus:not(:active) .n-checkbox-box .n-checkbox-box__border {
border: var(--n-border-focus);
box-shadow: var(--n-box-shadow-focus);
}
.n-checkbox.n-checkbox--inside-table .n-checkbox-box {
background-color: var(--n-merged-color-table);
}
.n-checkbox.n-checkbox--checked .n-checkbox-box {
background-color: var(--n-color-checked);
}
.n-checkbox.n-checkbox--checked .n-checkbox-box .n-checkbox-icon .check-icon {
opacity: 1;
transform: scale(1);
}
.n-checkbox.n-checkbox--indeterminate .n-checkbox-box .n-checkbox-icon .check-icon {
opacity: 0;
transform: scale(.5);
}
.n-checkbox.n-checkbox--indeterminate .n-checkbox-box .n-checkbox-icon .line-icon {
opacity: 1;
transform: scale(1);
}
.n-checkbox.n-checkbox--checked:focus:not(:active) .n-checkbox-box .n-checkbox-box__border, .n-checkbox.n-checkbox--indeterminate:focus:not(:active) .n-checkbox-box .n-checkbox-box__border {
border: var(--n-border-checked);
box-shadow: var(--n-box-shadow-focus);
}
.n-checkbox.n-checkbox--checked .n-checkbox-box, .n-checkbox.n-checkbox--indeterminate .n-checkbox-box {
background-color: var(--n-color-checked);
border-left: 0;
border-top: 0;
}
.n-checkbox.n-checkbox--checked .n-checkbox-box .n-checkbox-box__border, .n-checkbox.n-checkbox--indeterminate .n-checkbox-box .n-checkbox-box__border {
border: var(--n-border-checked);
}
.n-checkbox.n-checkbox--disabled {
cursor: not-allowed;
}
.n-checkbox.n-checkbox--disabled.n-checkbox--checked .n-checkbox-box {
background-color: var(--n-color-disabled-checked);
}
.n-checkbox.n-checkbox--disabled.n-checkbox--checked .n-checkbox-box .n-checkbox-box__border {
border: var(--n-border-disabled-checked);
}
.n-checkbox.n-checkbox--disabled.n-checkbox--checked .n-checkbox-box .n-checkbox-icon .check-icon, .n-checkbox.n-checkbox--disabled.n-checkbox--checked .n-checkbox-box .n-checkbox-icon .line-icon {
fill: var(--n-check-mark-color-disabled-checked);
}
.n-checkbox.n-checkbox--disabled .n-checkbox-box {
background-color: var(--n-color-disabled);
}
.n-checkbox.n-checkbox--disabled .n-checkbox-box .n-checkbox-box__border {
border: var(--n-border-disabled);
}
.n-checkbox.n-checkbox--disabled .n-checkbox-box .n-checkbox-icon .check-icon, .n-checkbox.n-checkbox--disabled .n-checkbox-box .n-checkbox-icon .line-icon {
fill: var(--n-check-mark-color-disabled);
}
.n-checkbox.n-checkbox--disabled .n-checkbox__label {
color: var(--n-text-color-disabled);
}
.n-checkbox .n-checkbox-box-wrapper {
position: relative;
width: var(--n-size);
flex-shrink: 0;
flex-grow: 0;
user-select: none;
-webkit-user-select: none;
}
.n-checkbox .n-checkbox-box {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: var(--n-size);
width: var(--n-size);
display: inline-block;
box-sizing: border-box;
border-radius: var(--n-border-radius);
background-color: var(--n-color);
transition: background-color 0.3s var(--n-bezier);
}
.n-checkbox .n-checkbox-box .n-checkbox-box__border {
transition: border-color .3s var(--n-bezier),
box-shadow .3s var(--n-bezier);
border-radius: inherit;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: var(--n-border);
}
.n-checkbox .n-checkbox-box .n-checkbox-icon {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 1px;
right: 1px;
top: 1px;
bottom: 1px;
}
.n-checkbox .n-checkbox-box .n-checkbox-icon .check-icon, .n-checkbox .n-checkbox-box .n-checkbox-icon .line-icon {
width: 100%;
fill: var(--n-check-mark-color);
opacity: 0;
transform: scale(0.5);
transform-origin: center;
transition: fill 0.3s var(--n-bezier),
transform 0.3s var(--n-bezier),
opacity 0.3s var(--n-bezier),
border-color 0.3s var(--n-bezier);
}
.n-checkbox .n-checkbox-box .n-checkbox-icon.icon-switch-transition-enter-from, .n-checkbox .n-checkbox-box .n-checkbox-icon.icon-switch-transition-leave-to {
transform: scale(0.75);
left: 1px;
top: 1px;
opacity: 0;
}
.n-checkbox .n-checkbox-box .n-checkbox-icon.icon-switch-transition-enter-to, .n-checkbox .n-checkbox-box .n-checkbox-icon.icon-switch-transition-leave-from {
transform: scale(1);
left: 1px;
top: 1px;
opacity: 1;
}
.n-checkbox .n-checkbox-box .n-checkbox-icon.icon-switch-transition-enter-active, .n-checkbox .n-checkbox-box .n-checkbox-icon.icon-switch-transition-leave-active {
transform-origin: center;
position: absolute;
left: 1px;
top: 1px;
transition: all .3s cubic-bezier(.4, 0, .2, 1) !important;
}
.n-checkbox .n-checkbox__label {
color: var(--n-text-color);
transition: color .3s var(--n-bezier);
user-select: none;
-webkit-user-select: none;
padding: var(--n-label-padding);
font-weight: var(--n-label-font-weight);
}
.n-checkbox .n-checkbox__label:empty {
display: none;
}
.n-modal .n-checkbox, .n-drawer .n-checkbox {
--n-merged-color-table: var(--n-color-table-modal);
}
.n-popover .n-checkbox {
--n-merged-color-table: var(--n-color-table-popover);
}
body {
margin: 0;
font-size: 14px;
font-family: v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
line-height: 1.6;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
body input {
font-family: inherit;
font-size: inherit;
}
.n-popover {
transition: box-shadow .3s var(--n-bezier),
background-color .3s var(--n-bezier),
color .3s var(--n-bezier);
position: relative;
font-size: var(--n-font-size);
color: var(--n-text-color);
box-shadow: var(--n-box-shadow);
word-break: break-word;
}
.n-popover > .n-scrollbar {
height: inherit;
max-height: inherit;
}
.n-popover:not(.n-popover--raw) {
background-color: var(--n-color);
border-radius: var(--n-border-radius);
}
.n-popover:not(.n-popover--raw):not(.n-popover--scrollable):not(.n-popover--show-header-or-footer) {
padding: var(--n-padding);
}
.n-popover .n-popover__header {
padding: var(--n-padding);
border-bottom: 1px solid var(--n-divider-color);
transition: border-color .3s var(--n-bezier);
}
.n-popover .n-popover__footer {
padding: var(--n-padding);
border-top: 1px solid var(--n-divider-color);
transition: border-color .3s var(--n-bezier);
}
.n-popover.n-popover--scrollable .n-popover__content, .n-popover.n-popover--show-header-or-footer .n-popover__content {
padding: var(--n-padding);
}
.n-popover-shared {
transform-origin: inherit;
}
.n-popover-shared .n-popover-arrow-wrapper {
position: absolute;
overflow: hidden;
pointer-events: none;
}
.n-popover-shared .n-popover-arrow-wrapper .n-popover-arrow {
transition: background-color .3s var(--n-bezier);
position: absolute;
display: block;
width: calc(var(--n-arrow-height) * 1.414);
height: calc(var(--n-arrow-height) * 1.414);
box-shadow: 0 0 8px 0 rgba(0, 0, 0, .12);
transform: rotate(45deg);
background-color: var(--n-color);
pointer-events: all;
}
.n-popover-shared.popover-transition-enter-from, .n-popover-shared.popover-transition-leave-to {
opacity: 0;
transform: scale(.85);
}
.n-popover-shared.popover-transition-enter-to, .n-popover-shared.popover-transition-leave-from {
transform: scale(1);
opacity: 1;
}
.n-popover-shared.popover-transition-enter-active {
transition: box-shadow .3s var(--n-bezier),
background-color .3s var(--n-bezier),
color .3s var(--n-bezier),
opacity .15s var(--n-bezier-ease-out),
transform .15s var(--n-bezier-ease-out);
}
.n-popover-shared.popover-transition-leave-active {
transition: box-shadow .3s var(--n-bezier),
background-color .3s var(--n-bezier),
color .3s var(--n-bezier),
opacity .15s var(--n-bezier-ease-in),
transform .15s var(--n-bezier-ease-in);
}
[v-placement="top-start"] > .n-popover-shared {
margin-bottom: var(--n-space);
}
[v-placement="top-start"] > .n-popover-shared.n-popover-shared--show-arrow {
margin-bottom: var(--n-space-arrow);
}
[v-placement="top-start"] > .n-popover-shared.n-popover-shared--overlap {
margin: 0;
}
[v-placement="top-start"] > .n-popover-shared > .n-popover-arrow-wrapper {
right: 0;
left: 0;
top: 0;
bottom: 0;
top: 100%;
bottom: auto;
height: var(--n-space-arrow);
}
[v-placement="top-start"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow {
top: calc(var(--n-arrow-height) * 1.414 / -2);
left: calc(var(--n-arrow-offset) - var(--v-offset-left));
}
[v-placement="top"] > .n-popover-shared {
margin-bottom: var(--n-space);
}
[v-placement="top"] > .n-popover-shared.n-popover-shared--show-arrow {
margin-bottom: var(--n-space-arrow);
}
[v-placement="top"] > .n-popover-shared.n-popover-shared--overlap {
margin: 0;
}
[v-placement="top"] > .n-popover-shared > .n-popover-arrow-wrapper {
right: 0;
left: 0;
top: 0;
bottom: 0;
top: 100%;
bottom: auto;
height: var(--n-space-arrow);
}
[v-placement="top"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow {
top: calc(var(--n-arrow-height) * 1.414 / -2);
transform: translateX(calc(var(--n-arrow-height) * 1.414 / -2)) rotate(45deg);
left: 50%;
}
[v-placement="top-end"] > .n-popover-shared {
margin-bottom: var(--n-space);
}
[v-placement="top-end"] > .n-popover-shared.n-popover-shared--show-arrow {
margin-bottom: var(--n-space-arrow);
}
[v-placement="top-end"] > .n-popover-shared.n-popover-shared--overlap {
margin: 0;
}
[v-placement="top-end"] > .n-popover-shared > .n-popover-arrow-wrapper {
right: 0;
left: 0;
top: 0;
bottom: 0;
top: 100%;
bottom: auto;
height: var(--n-space-arrow);
}
[v-placement="top-end"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow {
top: calc(var(--n-arrow-height) * 1.414 / -2);
right: calc(var(--n-arrow-offset) + var(--v-offset-left));
}
[v-placement="bottom-start"] > .n-popover-shared {
margin-top: var(--n-space);
}
[v-placement="bottom-start"] > .n-popover-shared.n-popover-shared--show-arrow {
margin-top: var(--n-space-arrow);
}
[v-placement="bottom-start"] > .n-popover-shared.n-popover-shared--overlap {
margin: 0;
}
[v-placement="bottom-start"] > .n-popover-shared > .n-popover-arrow-wrapper {
right: 0;
left: 0;
top: 0;
bottom: 0;
bottom: 100%;
top: auto;
height: var(--n-space-arrow);
}
[v-placement="bottom-start"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow {
bottom: calc(var(--n-arrow-height) * 1.414 / -2);
left: calc(var(--n-arrow-offset) - var(--v-offset-left));
}
[v-placement="bottom"] > .n-popover-shared {
margin-top: var(--n-space);
}
[v-placement="bottom"] > .n-popover-shared.n-popover-shared--show-arrow {
margin-top: var(--n-space-arrow);
}
[v-placement="bottom"] > .n-popover-shared.n-popover-shared--overlap {
margin: 0;
}
[v-placement="bottom"] > .n-popover-shared > .n-popover-arrow-wrapper {
right: 0;
left: 0;
top: 0;
bottom: 0;
bottom: 100%;
top: auto;
height: var(--n-space-arrow);
}
[v-placement="bottom"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow {
bottom: calc(var(--n-arrow-height) * 1.414 / -2);
transform: translateX(calc(var(--n-arrow-height) * 1.414 / -2)) rotate(45deg);
left: 50%;
}
[v-placement="bottom-end"] > .n-popover-shared {
margin-top: var(--n-space);
}
[v-placement="bottom-end"] > .n-popover-shared.n-popover-shared--show-arrow {
margin-top: var(--n-space-arrow);
}
[v-placement="bottom-end"] > .n-popover-shared.n-popover-shared--overlap {
margin: 0;
}
[v-placement="bottom-end"] > .n-popover-shared > .n-popover-arrow-wrapper {
right: 0;
left: 0;
top: 0;
bottom: 0;
bottom: 100%;
top: auto;
height: var(--n-space-arrow);
}
[v-placement="bottom-end"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow {
bottom: calc(var(--n-arrow-height) * 1.414 / -2);
right: calc(var(--n-arrow-offset) + var(--v-offset-left));
}
[v-placement="left-start"] > .n-popover-shared {
margin-right: var(--n-space);
}
[v-placement="left-start"] > .n-popover-shared.n-popover-shared--show-arrow {
margin-right: var(--n-space-arrow);
}
[v-placement="left-start"] > .n-popover-shared.n-popover-shared--overlap {
margin: 0;
}
[v-placement="left-start"] > .n-popover-shared > .n-popover-arrow-wrapper {
right: 0;
left: 0;
top: 0;
bottom: 0;
left: 100%;
right: auto;
width: var(--n-space-arrow);
}
[v-placement="left-start"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow {
left: calc(var(--n-arrow-height) * 1.414 / -2);
top: calc(var(--n-arrow-offset-vertical) - var(--v-offset-top));
}
[v-placement="left"] > .n-popover-shared {
margin-right: var(--n-space);
}
[v-placement="left"] > .n-popover-shared.n-popover-shared--show-arrow {
margin-right: var(--n-space-arrow);
}
[v-placement="left"] > .n-popover-shared.n-popover-shared--overlap {
margin: 0;
}
[v-placement="left"] > .n-popover-shared > .n-popover-arrow-wrapper {
right: 0;
left: 0;
top: 0;
bottom: 0;
left: 100%;
right: auto;
width: var(--n-space-arrow);
}
[v-placement="left"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow {
left: calc(var(--n-arrow-height) * 1.414 / -2);
transform: translateY(calc(var(--n-arrow-height) * 1.414 / -2)) rotate(45deg);
top: 50%;
}
[v-placement="left-end"] > .n-popover-shared {
margin-right: var(--n-space);
}
[v-placement="left-end"] > .n-popover-shared.n-popover-shared--show-arrow {
margin-right: var(--n-space-arrow);
}
[v-placement="left-end"] > .n-popover-shared.n-popover-shared--overlap {
margin: 0;
}
[v-placement="left-end"] > .n-popover-shared > .n-popover-arrow-wrapper {
right: 0;
left: 0;
top: 0;
bottom: 0;
left: 100%;
right: auto;
width: var(--n-space-arrow);
}
[v-placement="left-end"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow {
left: calc(var(--n-arrow-height) * 1.414 / -2);
bottom: calc(var(--n-arrow-offset-vertical) + var(--v-offset-top));
}
[v-placement="right-start"] > .n-popover-shared {
margin-left: var(--n-space);
}
[v-placement="right-start"] > .n-popover-shared.n-popover-shared--show-arrow {
margin-left: var(--n-space-arrow);
}
[v-placement="right-start"] > .n-popover-shared.n-popover-shared--overlap {
margin: 0;
}
[v-placement="right-start"] > .n-popover-shared > .n-popover-arrow-wrapper {
right: 0;
left: 0;
top: 0;
bottom: 0;
right: 100%;
left: auto;
width: var(--n-space-arrow);
}
[v-placement="right-start"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow {
right: calc(var(--n-arrow-height) * 1.414 / -2);
top: calc(var(--n-arrow-offset-vertical) - var(--v-offset-top));
}
[v-placement="right"] > .n-popover-shared {
margin-left: var(--n-space);
}
[v-placement="right"] > .n-popover-shared.n-popover-shared--show-arrow {
margin-left: var(--n-space-arrow);
}
[v-placement="right"] > .n-popover-shared.n-popover-shared--overlap {
margin: 0;
}
[v-placement="right"] > .n-popover-shared > .n-popover-arrow-wrapper {
right: 0;
left: 0;
top: 0;
bottom: 0;
right: 100%;
left: auto;
width: var(--n-space-arrow);
}
[v-placement="right"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow {
right: calc(var(--n-arrow-height) * 1.414 / -2);
transform: translateY(calc(var(--n-arrow-height) * 1.414 / -2)) rotate(45deg);
top: 50%;
}
[v-placement="right-end"] > .n-popover-shared {
margin-left: var(--n-space);
}
[v-placement="right-end"] > .n-popover-shared.n-popover-shared--show-arrow {
margin-left: var(--n-space-arrow);
}
[v-placement="right-end"] > .n-popover-shared.n-popover-shared--overlap {
margin: 0;
}
[v-placement="right-end"] > .n-popover-shared > .n-popover-arrow-wrapper {
right: 0;
left: 0;
top: 0;
bottom: 0;
right: 100%;
left: auto;
width: var(--n-space-arrow);
}
[v-placement="right-end"] > .n-popover-shared > .n-popover-arrow-wrapper .n-popover-arrow {
right: calc(var(--n-arrow-height) * 1.414 / -2);
bottom: calc(var(--n-arrow-offset-vertical) + var(--v-offset-top));
}
[v-placement="right-start"] > .n-popover-shared.n-popover-shared--center-arrow .n-popover-arrow {
top: calc(max(calc((var(--v-target-height, 0px) - var(--n-arrow-height) * 1.414) / 2), var(--n-arrow-offset-vertical)) - var(--v-offset-top));
}
[v-placement="left-start"] > .n-popover-shared.n-popover-shared--center-arrow .n-popover-arrow {
top: calc(max(calc((var(--v-target-height, 0px) - var(--n-arrow-height) * 1.414) / 2), var(--n-arrow-offset-vertical)) - var(--v-offset-top));
}
[v-placement="top-end"] > .n-popover-shared.n-popover-shared--center-arrow .n-popover-arrow {
right: calc(max(calc((var(--v-target-width, 0px) - var(--n-arrow-height) * 1.414) / 2), var(--n-arrow-offset)) + var(--v-offset-left));
}
[v-placement="bottom-end"] > .n-popover-shared.n-popover-shared--center-arrow .n-popover-arrow {
right: calc(max(calc((var(--v-target-width, 0px) - var(--n-arrow-height) * 1.414) / 2), var(--n-arrow-offset)) + var(--v-offset-left));
}
[v-placement="right-end"] > .n-popover-shared.n-popover-shared--center-arrow .n-popover-arrow {
bottom: calc(max(calc((var(--v-target-height, 0px) - var(--n-arrow-height) * 1.414) / 2), var(--n-arrow-offset-vertical)) + var(--v-offset-top));
}
[v-placement="left-end"] > .n-popover-shared.n-popover-shared--center-arrow .n-popover-arrow {
bottom: calc(max(calc((var(--v-target-height, 0px) - var(--n-arrow-height) * 1.414) / 2), var(--n-arrow-offset-vertical)) + var(--v-offset-top));
}
[v-placement="top-start"] > .n-popover-shared.n-popover-shared--center-arrow .n-popover-arrow {
left: calc(max(calc((var(--v-target-width, 0px) - var(--n-arrow-height) * 1.414) / 2), var(--n-arrow-offset)) - var(--v-offset-left));
}
[v-placement="bottom-start"] > .n-popover-shared.n-popover-shared--center-arrow .n-popover-arrow {
left: calc(max(calc((var(--v-target-width, 0px) - var(--n-arrow-height) * 1.414) / 2), var(--n-arrow-offset)) - var(--v-offset-left));
}