.n-gradient-text { display: inline-block; font-weight: var(--n-font-weight); -webkit-background-clip: text; background-clip: text; color: #0000; white-space: nowrap; background-image: linear-gradient(var(--n-rotate), var(--n-color-start) 0%, var(--n-color-end) 100%); transition: --n-color-start .3s var(--n-bezier), --n-color-end .3s var(--n-bezier); } .n-collapse-transition { width: 100%; } .n-collapse-transition.fade-in-height-expand-transition-leave-from, .n-collapse-transition.fade-in-height-expand-transition-enter-to { opacity: 1; } .n-collapse-transition.fade-in-height-expand-transition-leave-to, .n-collapse-transition.fade-in-height-expand-transition-enter-from { opacity: 0; margin-top: 0 !important; margin-bottom: 0 !important; } .n-collapse-transition.fade-in-height-expand-transition-leave-active { overflow: hidden; transition: max-height .3s cubic-bezier(.4, 0, .2, 1) 0s, opacity .3s cubic-bezier(0, 0, .2, 1) 0s, margin-top .3s cubic-bezier(.4, 0, .2, 1) 0s, margin-bottom .3s cubic-bezier(.4, 0, .2, 1) 0s, padding-top .3s cubic-bezier(.4, 0, .2, 1) 0s, padding-bottom .3s cubic-bezier(.4, 0, .2, 1) 0s } .n-collapse-transition.fade-in-height-expand-transition-enter-active { overflow: hidden; transition: max-height .3s cubic-bezier(.4, 0, .2, 1), opacity .3s cubic-bezier(.4, 0, 1, 1), margin-top .3s cubic-bezier(.4, 0, .2, 1), margin-bottom .3s cubic-bezier(.4, 0, .2, 1), padding-top .3s cubic-bezier(.4, 0, .2, 1), padding-bottom .3s cubic-bezier(.4, 0, .2, 1) } .n-switch { height: var(--n-height); min-width: var(--n-width); vertical-align: middle; user-select: none; -webkit-user-select: none; display: inline-flex; outline: none; justify-content: center; align-items: center; } .n-switch .n-switch__children-placeholder { height: var(--n-rail-height); display: flex; flex-direction: column; overflow: hidden; pointer-events: none; visibility: hidden; } .n-switch .n-switch__rail-placeholder { display: flex; flex-wrap: none; } .n-switch .n-switch__button-placeholder { width: calc(1.75 * var(--n-rail-height)); height: var(--n-rail-height); } .n-switch .n-base-loading { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-size: calc(var(--n-button-width) - 4px); color: var(--n-loading-color); transition: color .3s var(--n-bezier); } .n-switch .n-base-loading.icon-switch-transition-enter-from, .n-switch .n-base-loading.icon-switch-transition-leave-to { transform: translateX(-50%) translateY(-50%) scale(0.75); left: 50%; top: 50%; opacity: 0; } .n-switch .n-base-loading.icon-switch-transition-enter-to, .n-switch .n-base-loading.icon-switch-transition-leave-from { transform: scale(1) translateX(-50%) translateY(-50%); left: 50%; top: 50%; opacity: 1; } .n-switch .n-base-loading.icon-switch-transition-enter-active, .n-switch .n-base-loading.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-switch .n-switch__checked, .n-switch .n-switch__unchecked { transition: color .3s var(--n-bezier); color: var(--n-text-color); box-sizing: border-box; position: absolute; white-space: nowrap; top: 0; bottom: 0; display: flex; align-items: center; line-height: 1; } .n-switch .n-switch__checked { right: 0; padding-right: calc(1.25 * var(--n-rail-height) - var(--n-offset)); } .n-switch .n-switch__unchecked { left: 0; justify-content: flex-end; padding-left: calc(1.25 * var(--n-rail-height) - var(--n-offset)); } .n-switch:focus .n-switch__rail { box-shadow: var(--n-box-shadow-focus); } .n-switch.n-switch--round .n-switch__rail { border-radius: calc(var(--n-rail-height) / 2); } .n-switch.n-switch--round .n-switch__rail .n-switch__button { border-radius: calc(var(--n-button-height) / 2); } .n-switch:not(.n-switch--disabled):not(.n-switch--icon).n-switch--rubber-band.n-switch--pressed .n-switch__rail .n-switch__button { max-width: var(--n-button-width-pressed); } .n-switch:not(.n-switch--disabled):not(.n-switch--icon).n-switch--rubber-band .n-switch__rail:active .n-switch__button { max-width: var(--n-button-width-pressed); } .n-switch:not(.n-switch--disabled):not(.n-switch--icon).n-switch--rubber-band.n-switch--active.n-switch--pressed .n-switch__rail .n-switch__button { left: calc(100% - var(--n-offset) - var(--n-button-width-pressed)); } .n-switch:not(.n-switch--disabled):not(.n-switch--icon).n-switch--rubber-band.n-switch--active .n-switch__rail:active .n-switch__button { left: calc(100% - var(--n-offset) - var(--n-button-width-pressed)); } .n-switch.n-switch--active .n-switch__rail .n-switch__button { left: calc(100% - var(--n-button-width) - var(--n-offset)) } .n-switch .n-switch__rail { overflow: hidden; height: var(--n-rail-height); min-width: var(--n-rail-width); border-radius: var(--n-rail-border-radius); cursor: pointer; position: relative; transition: opacity .3s var(--n-bezier), background .3s var(--n-bezier), box-shadow .3s var(--n-bezier); background-color: var(--n-rail-color); } .n-switch .n-switch__rail .n-switch__button-icon { color: var(--n-icon-color); transition: color .3s var(--n-bezier); font-size: calc(var(--n-button-height) - 4px); position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; justify-content: center; align-items: center; line-height: 1; } .n-switch .n-switch__rail .n-switch__button-icon.icon-switch-transition-enter-from, .n-switch .n-switch__rail .n-switch__button-icon.icon-switch-transition-leave-to { transform: scale(0.75); left: 0; top: 0; opacity: 0; } .n-switch .n-switch__rail .n-switch__button-icon.icon-switch-transition-enter-to, .n-switch .n-switch__rail .n-switch__button-icon.icon-switch-transition-leave-from { transform: scale(1) ; left: 0; top: 0; opacity: 1; } .n-switch .n-switch__rail .n-switch__button-icon.icon-switch-transition-enter-active, .n-switch .n-switch__rail .n-switch__button-icon.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-switch .n-switch__rail .n-switch__button { align-items: center; top: var(--n-offset); left: var(--n-offset); height: var(--n-button-height); width: var(--n-button-width-pressed); max-width: var(--n-button-width); border-radius: var(--n-button-border-radius); background-color: var(--n-button-color); box-shadow: var(--n-button-box-shadow); box-sizing: border-box; cursor: inherit; content: ""; position: absolute; transition: background-color .3s var(--n-bezier), left .3s var(--n-bezier), opacity .3s var(--n-bezier), max-width .3s var(--n-bezier), box-shadow .3s var(--n-bezier); } .n-switch.n-switch--active .n-switch__rail { background-color: var(--n-rail-color-active); } .n-switch.n-switch--loading .n-switch__rail { cursor: wait; } .n-switch.n-switch--disabled .n-switch__rail { cursor: not-allowed; opacity: .5; } .n-drawer { word-break: break-word; line-height: var(--n-line-height); position: absolute; pointer-events: all; box-shadow: var(--n-box-shadow); transition: background-color .3s var(--n-bezier), color .3s var(--n-bezier); background-color: var(--n-color); color: var(--n-text-color); box-sizing: border-box; } .n-drawer.slide-in-from-right-transition-leave-active { transition: transform 0.2s cubic-bezier(.4, 0, 1, 1); } .n-drawer.slide-in-from-right-transition-enter-active { transition: transform 0.3s cubic-bezier(0, 0, .2, 1); } .n-drawer.slide-in-from-right-transition-enter-to { transform: translateX(0); } .n-drawer.slide-in-from-right-transition-enter-from { transform: translateX(100%); } .n-drawer.slide-in-from-right-transition-leave-from { transform: translateX(0); } .n-drawer.slide-in-from-right-transition-leave-to { transform: translateX(100%); } .n-drawer.slide-in-from-left-transition-leave-active { transition: transform 0.2s cubic-bezier(.4, 0, 1, 1); } .n-drawer.slide-in-from-left-transition-enter-active { transition: transform 0.3s cubic-bezier(0, 0, .2, 1); } .n-drawer.slide-in-from-left-transition-enter-to { transform: translateX(0); } .n-drawer.slide-in-from-left-transition-enter-from { transform: translateX(-100%); } .n-drawer.slide-in-from-left-transition-leave-from { transform: translateX(0); } .n-drawer.slide-in-from-left-transition-leave-to { transform: translateX(-100%); } .n-drawer.slide-in-from-top-transition-leave-active { transition: transform 0.2s cubic-bezier(.4, 0, 1, 1); } .n-drawer.slide-in-from-top-transition-enter-active { transition: transform 0.3s cubic-bezier(0, 0, .2, 1); } .n-drawer.slide-in-from-top-transition-enter-to { transform: translateY(0); } .n-drawer.slide-in-from-top-transition-enter-from { transform: translateY(-100%); } .n-drawer.slide-in-from-top-transition-leave-from { transform: translateY(0); } .n-drawer.slide-in-from-top-transition-leave-to { transform: translateY(-100%); } .n-drawer.slide-in-from-bottom-transition-leave-active { transition: transform 0.2s cubic-bezier(.4, 0, 1, 1); } .n-drawer.slide-in-from-bottom-transition-enter-active { transition: transform 0.3s cubic-bezier(0, 0, .2, 1); } .n-drawer.slide-in-from-bottom-transition-enter-to { transform: translateY(0); } .n-drawer.slide-in-from-bottom-transition-enter-from { transform: translateY(100%); } .n-drawer.slide-in-from-bottom-transition-leave-from { transform: translateY(0); } .n-drawer.slide-in-from-bottom-transition-leave-to { transform: translateY(100%); } .n-drawer.n-drawer--unselectable { user-select: none; -webkit-user-select: none; } .n-drawer.n-drawer--native-scrollbar .n-drawer-content-wrapper { overflow: auto; height: 100%; } .n-drawer .n-drawer__resize-trigger { position: absolute; background-color: #0000; transition: background-color .3s var(--n-bezier); } .n-drawer .n-drawer__resize-trigger.n-drawer__resize-trigger--hover { background-color: var(--n-resize-trigger-color-hover); } .n-drawer .n-drawer-content-wrapper { box-sizing: border-box; } .n-drawer .n-drawer-content { height: 100%; display: flex; flex-direction: column; } .n-drawer .n-drawer-content.n-drawer-content--native-scrollbar .n-drawer-body-content-wrapper { height: 100%; overflow: auto; } .n-drawer .n-drawer-content .n-drawer-body { flex: 1 0 0; overflow: hidden; } .n-drawer .n-drawer-content .n-drawer-body-content-wrapper { box-sizing: border-box; padding: var(--n-body-padding); } .n-drawer .n-drawer-content .n-drawer-header { font-weight: var(--n-title-font-weight); line-height: 1; font-size: var(--n-title-font-size); color: var(--n-title-text-color); padding: var(--n-header-padding); transition: border .3s var(--n-bezier); border-bottom: 1px solid var(--n-divider-color); border-bottom: var(--n-header-border-bottom); display: flex; justify-content: space-between; align-items: center; } .n-drawer .n-drawer-content .n-drawer-header .n-drawer-header__main { flex: 1; } .n-drawer .n-drawer-content .n-drawer-header .n-drawer-header__close { margin-left: 6px; transition: background-color .3s var(--n-bezier), color .3s var(--n-bezier); } .n-drawer .n-drawer-content .n-drawer-footer { display: flex; justify-content: flex-end; border-top: var(--n-footer-border-top); transition: border .3s var(--n-bezier); padding: var(--n-footer-padding); } .n-drawer.n-drawer--right-placement { top: 0; bottom: 0; right: 0; border-top-left-radius: var(--n-border-radius); border-bottom-left-radius: var(--n-border-radius); } .n-drawer.n-drawer--right-placement .n-drawer__resize-trigger { width: 3px; height: 100%; top: 0; left: 0; transform: translateX(-1.5px); cursor: ew-resize; } .n-drawer.n-drawer--left-placement { top: 0; bottom: 0; left: 0; border-top-right-radius: var(--n-border-radius); border-bottom-right-radius: var(--n-border-radius); } .n-drawer.n-drawer--left-placement .n-drawer__resize-trigger { width: 3px; height: 100%; top: 0; right: 0; transform: translateX(1.5px); cursor: ew-resize; } .n-drawer.n-drawer--top-placement { top: 0; left: 0; right: 0; border-bottom-left-radius: var(--n-border-radius); border-bottom-right-radius: var(--n-border-radius); } .n-drawer.n-drawer--top-placement .n-drawer__resize-trigger { width: 100%; height: 3px; bottom: 0; left: 0; transform: translateY(1.5px); cursor: ns-resize; } .n-drawer.n-drawer--bottom-placement { left: 0; bottom: 0; right: 0; border-top-left-radius: var(--n-border-radius); border-top-right-radius: var(--n-border-radius); } .n-drawer.n-drawer--bottom-placement .n-drawer__resize-trigger { width: 100%; height: 3px; top: 0; left: 0; transform: translateY(-1.5px); cursor: ns-resize; } body > .n-drawer-container { position: fixed; } .n-drawer-container { position: relative; position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; } .n-drawer-container > * { pointer-events: all; } .n-drawer-mask { background-color: rgba(0, 0, 0, .3); position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .n-drawer-mask.n-drawer-mask--invisible { background-color: rgba(0, 0, 0, 0) } .n-drawer-mask.fade-in-transition-enter-active { transition: all 0.2s var(--n-bezier-in)!important; } .n-drawer-mask.fade-in-transition-leave-active { transition: all 0.2s var(--n-bezier-out)!important; } .n-drawer-mask.fade-in-transition-enter-from, .n-drawer-mask.fade-in-transition-leave-to { opacity: 0; } .n-drawer-mask.fade-in-transition-leave-from, .n-drawer-mask.fade-in-transition-enter-to { opacity: 1; } .n-date-picker { position: relative; z-index: auto; } .n-date-picker .n-date-picker-icon { color: var(--n-icon-color-override); transition: color .3s var(--n-bezier); } .n-date-picker .n-icon { color: var(--n-icon-color-override); transition: color .3s var(--n-bezier); } .n-date-picker.n-date-picker--disabled .n-date-picker-icon { color: var(--n-icon-color-disabled-override); } .n-date-picker.n-date-picker--disabled .n-icon { color: var(--n-icon-color-disabled-override); } .n-date-panel { width: fit-content; outline: none; margin: 4px 0; display: grid; grid-template-columns: 0fr; border-radius: var(--n-panel-border-radius); background-color: var(--n-panel-color); color: var(--n-panel-text-color); user-select: none; } .n-date-panel.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-date-panel.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-date-panel.fade-in-scale-up-transition-enter-from, .n-date-panel.fade-in-scale-up-transition-leave-to { opacity: 0; transform: scale(.9); } .n-date-panel.fade-in-scale-up-transition-leave-from, .n-date-panel.fade-in-scale-up-transition-enter-to { opacity: 1; transform: scale(1); } .n-date-panel.n-date-panel--shadow { box-shadow: var(--n-panel-box-shadow); } .n-date-panel .n-date-panel-calendar { padding: var(--n-calendar-left-padding); display: grid; grid-template-columns: 1fr; grid-area: left-calendar; } .n-date-panel .n-date-panel-calendar.n-date-panel-calendar--end { padding: var(--n-calendar-right-padding); grid-area: right-calendar; } .n-date-panel .n-date-panel-month-calendar { display: flex; grid-area: left-calendar; } .n-date-panel .n-date-panel-month-calendar .n-date-panel-month-calendar__picker-col { min-width: var(--n-scroll-item-width); height: calc(var(--n-scroll-item-height) * 6); user-select: none; -webkit-user-select: none; } .n-date-panel .n-date-panel-month-calendar .n-date-panel-month-calendar__picker-col:first-child { min-width: calc(var(--n-scroll-item-width) + 4px); } .n-date-panel .n-date-panel-month-calendar .n-date-panel-month-calendar__picker-col:first-child .n-date-panel-month-calendar__picker-col-item::before { left: 4px; } .n-date-panel .n-date-panel-month-calendar .n-date-panel-month-calendar__picker-col .n-date-panel-month-calendar__padding { height: calc(var(--n-scroll-item-height) * 5) } .n-date-panel .n-date-panel-month-calendar .n-date-panel-month-calendar__picker-col-item { z-index: 0; cursor: pointer; height: var(--n-scroll-item-height); box-sizing: border-box; padding-top: 4px; display: flex; align-items: center; justify-content: center; position: relative; transition: color .3s var(--n-bezier), background-color .3s var(--n-bezier); background: #0000; color: var(--n-item-text-color); } .n-date-panel .n-date-panel-month-calendar .n-date-panel-month-calendar__picker-col-item::before { z-index: -1; content: ""; position: absolute; left: 0; right: 4px; top: 4px; bottom: 0; border-radius: var(--n-scroll-item-border-radius); transition: background-color .3s var(--n-bezier); } .n-date-panel .n-date-panel-month-calendar .n-date-panel-month-calendar__picker-col-item:not(.n-date-panel-month-calendar__picker-col-item--disabled):hover::before { background-color: var(--n-item-color-hover); } .n-date-panel .n-date-panel-month-calendar .n-date-panel-month-calendar__picker-col-item:not(.n-date-panel-month-calendar__picker-col-item--disabled).n-date-panel-month-calendar__picker-col-item--selected { color: var(--n-item-color-active); } .n-date-panel .n-date-panel-month-calendar .n-date-panel-month-calendar__picker-col-item:not(.n-date-panel-month-calendar__picker-col-item--disabled).n-date-panel-month-calendar__picker-col-item--selected::before { background-color: var(--n-item-color-hover); } .n-date-panel .n-date-panel-month-calendar .n-date-panel-month-calendar__picker-col-item.n-date-panel-month-calendar__picker-col-item--disabled { color: var(--n-item-text-color-disabled); cursor: not-allowed; } .n-date-panel .n-date-panel-month-calendar .n-date-panel-month-calendar__picker-col-item.n-date-panel-month-calendar__picker-col-item--disabled.n-date-panel-month-calendar__picker-col-item--selected::before { background-color: var(--n-item-color-disabled); } .n-date-panel.n-date-panel--date { grid-template-areas: "left-calendar" "footer" "action" ; } .n-date-panel.n-date-panel--week { grid-template-areas: "left-calendar" "footer" "action" ; } .n-date-panel.n-date-panel--daterange { grid-template-areas: "left-calendar divider right-calendar" "footer footer footer" "action action action" ; } .n-date-panel.n-date-panel--datetime { grid-template-areas: "header" "left-calendar" "footer" "action" ; } .n-date-panel.n-date-panel--datetimerange { grid-template-areas: "header header header" "left-calendar divider right-calendar" "footer footer footer" "action action action" ; } .n-date-panel.n-date-panel--month { grid-template-areas: "left-calendar" "footer" "action" ; } .n-date-panel .n-date-panel-footer { grid-area: footer; } .n-date-panel .n-date-panel-actions { grid-area: action; } .n-date-panel .n-date-panel-header { grid-area: header; } .n-date-panel .n-date-panel-header { box-sizing: border-box; width: 100%; align-items: center; padding: var(--n-panel-header-padding); display: flex; justify-content: space-between; border-bottom: 1px solid var(--n-panel-header-divider-color); } .n-date-panel .n-date-panel-header > *:not(:last-child) { margin-right: 10px; } .n-date-panel .n-date-panel-header > * { flex: 1; width: 0; } .n-date-panel .n-date-panel-header > .n-time-picker { z-index: 1; } .n-date-panel .n-date-panel-month { box-sizing: border-box; display: grid; grid-template-columns: var(--n-calendar-title-grid-template-columns); align-items: center; justify-items: center; padding: var(--n-calendar-title-padding); height: var(--n-calendar-title-height); } .n-date-panel .n-date-panel-month .n-date-panel-month__prev, .n-date-panel .n-date-panel-month .n-date-panel-month__next, .n-date-panel .n-date-panel-month .n-date-panel-month__fast-prev, .n-date-panel .n-date-panel-month .n-date-panel-month__fast-next { line-height: 0; cursor: pointer; width: var(--n-arrow-size); height: var(--n-arrow-size); color: var(--n-arrow-color); } .n-date-panel .n-date-panel-month .n-date-panel-month__month-year { user-select: none; -webkit-user-select: none; flex-grow: 1; position: relative; } .n-date-panel .n-date-panel-month .n-date-panel-month__month-year .n-date-panel-month__text { font-size: var(--n-calendar-title-font-size); line-height: var(--n-calendar-title-font-size); font-weight: var(--n-calendar-title-font-weight); padding: 6px 8px; text-align: center; color: var(--n-calendar-title-text-color); cursor: pointer; transition: background-color .3s var(--n-bezier); border-radius: var(--n-panel-border-radius); } .n-date-panel .n-date-panel-month .n-date-panel-month__month-year .n-date-panel-month__text.n-date-panel-month__text--active { background-color: var(--n-calendar-title-color-hover); } .n-date-panel .n-date-panel-month .n-date-panel-month__month-year .n-date-panel-month__text:hover { background-color: var(--n-calendar-title-color-hover); } .n-date-panel .n-date-panel-weekdays { display: grid; margin: auto; grid-template-columns: repeat(7, var(--n-item-cell-width)); grid-template-rows: repeat(1, var(--n-item-cell-height)); align-items: center; justify-items: center; margin-bottom: 4px; border-bottom: 1px solid var(--n-calendar-days-divider-color); } .n-date-panel .n-date-panel-weekdays .n-date-panel-weekdays__day { white-space: nowrap; user-select: none; -webkit-user-select: none; line-height: 15px; width: var(--n-item-size); text-align: center; font-size: var(--n-calendar-days-font-size); color: var(--n-item-text-color); display: flex; align-items: center; justify-content: center; } .n-date-panel .n-date-panel-dates { margin: auto; display: grid; grid-template-columns: repeat(7, var(--n-item-cell-width)); grid-template-rows: repeat(6, var(--n-item-cell-height)); align-items: center; justify-items: center; flex-wrap: wrap; } .n-date-panel .n-date-panel-dates .n-date-panel-date { user-select: none; -webkit-user-select: none; position: relative; width: var(--n-item-size); height: var(--n-item-size); line-height: var(--n-item-size); text-align: center; font-size: var(--n-item-font-size); border-radius: var(--n-item-border-radius); z-index: 0; cursor: pointer; transition: background-color .2s var(--n-bezier), color .2s var(--n-bezier); } .n-date-panel .n-date-panel-dates .n-date-panel-date .n-date-panel-date__trigger { position: absolute; left: calc(var(--n-item-size) / 2 - var(--n-item-cell-width) / 2); top: calc(var(--n-item-size) / 2 - var(--n-item-cell-height) / 2); width: var(--n-item-cell-width); height: var(--n-item-cell-height); } .n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--current .n-date-panel-date__sup { position: absolute; top: 2px; right: 2px; content: ""; height: 4px; width: 4px; border-radius: 2px; background-color: var(--n-item-color-active); transition: background-color .2s var(--n-bezier); } .n-date-panel .n-date-panel-dates .n-date-panel-date::after { content: ""; z-index: -1; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: inherit; transition: background-color .3s var(--n-bezier); } .n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--covered:not(.n-date-panel-date--excluded)::before, .n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--start:not(.n-date-panel-date--excluded)::before, .n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--end:not(.n-date-panel-date--excluded)::before { content: ""; z-index: -2; position: absolute; left: calc((var(--n-item-size) - var(--n-item-cell-width)) / 2); right: calc((var(--n-item-size) - var(--n-item-cell-width)) / 2); top: 0; bottom: 0; background-color: var(--n-item-color-included); } .n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--covered:not(.n-date-panel-date--excluded):nth-child(7n + 1)::before, .n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--start:not(.n-date-panel-date--excluded):nth-child(7n + 1)::before, .n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--end:not(.n-date-panel-date--excluded):nth-child(7n + 1)::before { border-top-left-radius: var(--n-item-border-radius); border-bottom-left-radius: var(--n-item-border-radius); } .n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--covered:not(.n-date-panel-date--excluded):nth-child(7n + 7)::before, .n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--start:not(.n-date-panel-date--excluded):nth-child(7n + 7)::before, .n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--end:not(.n-date-panel-date--excluded):nth-child(7n + 7)::before { border-top-right-radius: var(--n-item-border-radius); border-bottom-right-radius: var(--n-item-border-radius); } .n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--selected { color: var(--n-item-text-color-active); } .n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--selected::after { background-color: var(--n-item-color-active); } .n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--selected.n-date-panel-date--start::before { left: 50%; } .n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--selected.n-date-panel-date--end::before { right: 50%; } .n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--selected .n-date-panel-date__sup { background-color: var(--n-panel-color); } .n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--excluded { color: var(--n-item-text-color-disabled); } .n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--excluded.n-date-panel-date--selected::after { background-color: var(--n-item-color-disabled); } .n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--disabled { cursor: not-allowed; color: var(--n-item-text-color-disabled); } .n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--disabled.n-date-panel-date--covered::before { background-color: var(--n-item-color-disabled); } .n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--disabled.n-date-panel-date--selected::before { background-color: var(--n-item-color-disabled); } .n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--disabled.n-date-panel-date--selected::after { background-color: var(--n-item-color-disabled); } .n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--week-hovered::before { background-color: var(--n-item-color-included); } .n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--week-hovered:nth-child(7n + 1)::before { border-top-left-radius: var(--n-item-border-radius); border-bottom-left-radius: var(--n-item-border-radius); } .n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--week-hovered:nth-child(7n + 7)::before { border-top-right-radius: var(--n-item-border-radius); border-bottom-right-radius: var(--n-item-border-radius); } .n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--week-selected { color: var(--n-item-text-color-active) } .n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--week-selected::before { background-color: var(--n-item-color-active); } .n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--week-selected:nth-child(7n + 1)::before { border-top-left-radius: var(--n-item-border-radius); border-bottom-left-radius: var(--n-item-border-radius); } .n-date-panel .n-date-panel-dates .n-date-panel-date.n-date-panel-date--week-selected:nth-child(7n + 7)::before { border-top-right-radius: var(--n-item-border-radius); border-bottom-right-radius: var(--n-item-border-radius); } .n-date-panel:not(.n-date-panel--week) .n-date-panel-dates .n-date-panel-date:not(.n-date-panel-date--disabled):not(.n-date-panel-date--selected):hover { background-color: var(--n-item-color-hover); } .n-date-panel.n-date-panel--week .n-date-panel-dates .n-date-panel-date::before { content: ""; z-index: -2; position: absolute; left: calc((var(--n-item-size) - var(--n-item-cell-width)) / 2); right: calc((var(--n-item-size) - var(--n-item-cell-width)) / 2); top: 0; bottom: 0; transition: background-color .3s var(--n-bezier); } .n-date-panel .n-date-panel__vertical-divider { grid-area: divider; height: 100%; width: 1px; background-color: var(--n-calendar-divider-color); } .n-date-panel .n-date-panel-footer { border-top: 1px solid var(--n-panel-action-divider-color); padding: var(--n-panel-extra-footer-padding); } .n-date-panel .n-date-panel-actions { flex: 1; padding: var(--n-panel-action-padding); display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--n-panel-action-divider-color); } .n-date-panel .n-date-panel-actions .n-date-panel-actions__prefix, .n-date-panel .n-date-panel-actions .n-date-panel-actions__suffix { display: flex; margin-bottom: -8px; } .n-date-panel .n-date-panel-actions .n-date-panel-actions__suffix { align-self: flex-end; } .n-date-panel .n-date-panel-actions .n-date-panel-actions__prefix { flex-wrap: wrap; } .n-date-panel .n-date-panel-actions .n-button { margin-bottom: 8px; } .n-date-panel .n-date-panel-actions .n-button:not(:last-child) { margin-right: 8px; } [data-n-date].transition-disabled { transition: none !important; } [data-n-date].transition-disabled::before, [data-n-date].transition-disabled::after { transition: none !important; } .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); font-weight: var(--n-font-weight); --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-base-icon { height: 1em; width: 1em; line-height: 1em; text-align: center; display: inline-block; position: relative; fill: currentColor; } .n-base-icon svg { height: 1em; width: 1em; } .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; } @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; } .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; font-weight: var(--n-font-weight); } .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-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-body-wrapper.n-modal-body-wrapper--mask-hidden { pointer-events: none; } .n-modal-body-wrapper.n-modal-body-wrapper--mask-hidden > * { pointer-events: all; } .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); } .n-modal .n-draggable { cursor: move; user-select: none; } .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-card { font-size: var(--n-font-size); line-height: var(--n-line-height); display: flex; flex-direction: column; width: 100%; box-sizing: border-box; position: relative; border-radius: var(--n-border-radius); background-color: var(--n-color); color: var(--n-text-color); word-break: break-word; transition: color .3s var(--n-bezier), background-color .3s var(--n-bezier), box-shadow .3s var(--n-bezier), border-color .3s var(--n-bezier); } .n-card.n-modal { background: var(--n-color-modal); } .n-card.n-card--hoverable:hover { box-shadow: var(--n-box-shadow); } .n-card.n-card--content-segmented > .n-card__content { padding-top: var(--n-padding-bottom); } .n-card.n-card--content-soft-segmented > .n-card__content { margin: 0 var(--n-padding-left); padding: var(--n-padding-bottom) 0; } .n-card.n-card--footer-segmented > .n-card__footer { padding-top: var(--n-padding-bottom); } .n-card.n-card--footer-soft-segmented > .n-card__footer { padding: var(--n-padding-bottom) 0; margin: 0 var(--n-padding-left); } .n-card > .n-card-header { box-sizing: border-box; display: flex; align-items: center; font-size: var(--n-title-font-size); padding: var(--n-padding-top) var(--n-padding-left) var(--n-padding-bottom) var(--n-padding-left); } .n-card > .n-card-header .n-card-header__main { font-weight: var(--n-title-font-weight); transition: color .3s var(--n-bezier); flex: 1; min-width: 0; color: var(--n-title-text-color); } .n-card > .n-card-header .n-card-header__extra { display: flex; align-items: center; font-size: var(--n-font-size); font-weight: 400; transition: color .3s var(--n-bezier); color: var(--n-text-color); } .n-card > .n-card-header .n-card-header__close { margin: 0 0 0 8px; transition: background-color .3s var(--n-bezier), color .3s var(--n-bezier); } .n-card > .n-card__action { box-sizing: border-box; transition: background-color .3s var(--n-bezier), border-color .3s var(--n-bezier); background-clip: padding-box; background-color: var(--n-action-color); } .n-card > .n-card__content { flex: 1; min-width: 0; } .n-card > .n-card__content, .n-card > .n-card__footer { box-sizing: border-box; padding: 0 var(--n-padding-left) var(--n-padding-bottom) var(--n-padding-left); font-size: var(--n-font-size); } .n-card > .n-card__content:first-child, .n-card > .n-card__footer:first-child { padding-top: var(--n-padding-bottom); } .n-card > .n-card__action { background-color: var(--n-action-color); padding: var(--n-padding-bottom) var(--n-padding-left); border-bottom-left-radius: var(--n-border-radius); border-bottom-right-radius: var(--n-border-radius); } .n-card .n-card-cover { overflow: hidden; width: 100%; border-radius: var(--n-border-radius) var(--n-border-radius) 0 0; } .n-card .n-card-cover img { display: block; width: 100%; } .n-card.n-card--bordered { border: 1px solid var(--n-border-color); } .n-card.n-card--bordered:target { border-color: var(--n-color-target); } .n-card.n-card--action-segmented > .n-card__action:not(:first-child) { border-top: 1px solid var(--n-border-color); } .n-card.n-card--content-segmented > .n-card__content, .n-card.n-card--content-soft-segmented > .n-card__content { transition: border-color 0.3s var(--n-bezier); } .n-card.n-card--content-segmented > .n-card__content:not(:first-child), .n-card.n-card--content-soft-segmented > .n-card__content:not(:first-child) { border-top: 1px solid var(--n-border-color); } .n-card.n-card--footer-segmented > .n-card__footer, .n-card.n-card--footer-soft-segmented > .n-card__footer { transition: border-color 0.3s var(--n-bezier); } .n-card.n-card--footer-segmented > .n-card__footer:not(:first-child), .n-card.n-card--footer-soft-segmented > .n-card__footer:not(:first-child) { border-top: 1px solid var(--n-border-color); } .n-card.n-card--embedded { background-color: var(--n-color-embedded); } .n-modal .n-card, .n-drawer .n-card { background: var(--n-color-modal); } .n-modal .n-card.n-card--embedded, .n-drawer .n-card.n-card--embedded { background-color: var(--n-color-embedded-modal); } .n-popover .n-card { background: var(--n-color-popover); } .n-popover .n-card.n-card--embedded { background-color: var(--n-color-embedded-popover); } .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-ellipsis { overflow: hidden; } .n-ellipsis:not(.n-ellipsis--line-clamp) { white-space: nowrap; display: inline-block; vertical-align: bottom; max-width: 100%; } .n-ellipsis.n-ellipsis--line-clamp { display: -webkit-inline-box; -webkit-box-orient: vertical; } .n-ellipsis.n-ellipsis--cursor-pointer { cursor: pointer; } .n-breadcrumb { white-space: nowrap; cursor: default; line-height: var(--n-item-line-height); } .n-breadcrumb ul { list-style: none; padding: 0; margin: 0; } .n-breadcrumb a { color: inherit; text-decoration: inherit; } .n-breadcrumb .n-breadcrumb-item { font-size: var(--n-font-size); transition: color .3s var(--n-bezier); display: inline-flex; align-items: center; } .n-breadcrumb .n-breadcrumb-item .n-icon { font-size: 18px; vertical-align: -.2em; transition: color .3s var(--n-bezier); color: var(--n-item-text-color); } .n-breadcrumb .n-breadcrumb-item:not(:last-child).n-breadcrumb-item--clickable .n-breadcrumb-item__link { cursor: pointer; } .n-breadcrumb .n-breadcrumb-item:not(:last-child).n-breadcrumb-item--clickable .n-breadcrumb-item__link:hover { background-color: var(--n-item-color-hover); } .n-breadcrumb .n-breadcrumb-item:not(:last-child).n-breadcrumb-item--clickable .n-breadcrumb-item__link:active { background-color: var(--n-item-color-pressed); } .n-breadcrumb .n-breadcrumb-item .n-breadcrumb-item__link { padding: 4px; border-radius: var(--n-item-border-radius); transition: background-color .3s var(--n-bezier), color .3s var(--n-bezier); color: var(--n-item-text-color); position: relative; } .n-breadcrumb .n-breadcrumb-item .n-breadcrumb-item__link:hover { color: var(--n-item-text-color-hover); } .n-breadcrumb .n-breadcrumb-item .n-breadcrumb-item__link:hover .n-icon { color: var(--n-item-text-color-hover); } .n-breadcrumb .n-breadcrumb-item .n-breadcrumb-item__link:active { color: var(--n-item-text-color-pressed); } .n-breadcrumb .n-breadcrumb-item .n-breadcrumb-item__link:active .n-icon { color: var(--n-item-text-color-pressed); } .n-breadcrumb .n-breadcrumb-item .n-breadcrumb-item__separator { margin: 0 8px; color: var(--n-separator-color); transition: color .3s var(--n-bezier); user-select: none; -webkit-user-select: none; } .n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link { font-weight: var(--n-font-weight-active); cursor: unset; color: var(--n-item-text-color-active); } .n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link .n-icon { color: var(--n-item-text-color-active); } .n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__separator { display: none; } .n-scrollbar { overflow: hidden; position: relative; z-index: auto; height: 100%; width: 100%; } .n-scrollbar > .n-scrollbar-container { width: 100%; overflow: scroll; height: 100%; min-height: inherit; max-height: inherit; scrollbar-width: none; } .n-scrollbar > .n-scrollbar-container::-webkit-scrollbar, .n-scrollbar > .n-scrollbar-container::-webkit-scrollbar-track-piece, .n-scrollbar > .n-scrollbar-container::-webkit-scrollbar-thumb { width: 0; height: 0; display: none; } .n-scrollbar > .n-scrollbar-container > .n-scrollbar-content { box-sizing: border-box; min-width: 100%; } .n-scrollbar > .n-scrollbar-rail, .n-scrollbar + .n-scrollbar-rail { position: absolute; pointer-events: none; user-select: none; background: var(--n-scrollbar-rail-color); -webkit-user-select: none; } .n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--horizontal, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--horizontal { height: var(--n-scrollbar-height); } .n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--horizontal > .n-scrollbar-rail__scrollbar, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--horizontal > .n-scrollbar-rail__scrollbar { height: var(--n-scrollbar-height); border-radius: var(--n-scrollbar-border-radius); right: 0; } .n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--horizontal--top, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--horizontal--top { top: var(--n-scrollbar-rail-top-horizontal-top); right: var(--n-scrollbar-rail-right-horizontal-top); bottom: var(--n-scrollbar-rail-bottom-horizontal-top); left: var(--n-scrollbar-rail-left-horizontal-top); } .n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--horizontal--bottom, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--horizontal--bottom { top: var(--n-scrollbar-rail-top-horizontal-bottom); right: var(--n-scrollbar-rail-right-horizontal-bottom); bottom: var(--n-scrollbar-rail-bottom-horizontal-bottom); left: var(--n-scrollbar-rail-left-horizontal-bottom); } .n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--vertical, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--vertical { width: var(--n-scrollbar-width); } .n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--vertical > .n-scrollbar-rail__scrollbar, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--vertical > .n-scrollbar-rail__scrollbar { width: var(--n-scrollbar-width); border-radius: var(--n-scrollbar-border-radius); bottom: 0; } .n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--vertical--left, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--vertical--left { top: var(--n-scrollbar-rail-top-vertical-left); right: var(--n-scrollbar-rail-right-vertical-left); bottom: var(--n-scrollbar-rail-bottom-vertical-left); left: var(--n-scrollbar-rail-left-vertical-left); } .n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--vertical--right, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--vertical--right { top: var(--n-scrollbar-rail-top-vertical-right); right: var(--n-scrollbar-rail-right-vertical-right); bottom: var(--n-scrollbar-rail-bottom-vertical-right); left: var(--n-scrollbar-rail-left-vertical-right); } .n-scrollbar > .n-scrollbar-rail.n-scrollbar-rail--disabled > .n-scrollbar-rail__scrollbar, .n-scrollbar + .n-scrollbar-rail.n-scrollbar-rail--disabled > .n-scrollbar-rail__scrollbar { pointer-events: none; } .n-scrollbar > .n-scrollbar-rail > .n-scrollbar-rail__scrollbar, .n-scrollbar + .n-scrollbar-rail > .n-scrollbar-rail__scrollbar { z-index: 1; position: absolute; cursor: pointer; pointer-events: all; background-color: var(--n-scrollbar-color); transition: background-color .2s var(--n-scrollbar-bezier); } .n-scrollbar > .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-enter-active, .n-scrollbar + .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-enter-active { transition: all 0.2s cubic-bezier(.4, 0, .2, 1)!important; } .n-scrollbar > .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-leave-active, .n-scrollbar + .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-leave-active { transition: all 0.2s cubic-bezier(.4, 0, .2, 1)!important; } .n-scrollbar > .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-enter-from, .n-scrollbar + .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-enter-from, .n-scrollbar > .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-leave-to, .n-scrollbar + .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-leave-to { opacity: 0; } .n-scrollbar > .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-leave-from, .n-scrollbar + .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-leave-from, .n-scrollbar > .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-enter-to, .n-scrollbar + .n-scrollbar-rail > .n-scrollbar-rail__scrollbar.fade-in-transition-enter-to { opacity: 1; } .n-scrollbar > .n-scrollbar-rail > .n-scrollbar-rail__scrollbar:hover, .n-scrollbar + .n-scrollbar-rail > .n-scrollbar-rail__scrollbar:hover { background-color: var(--n-scrollbar-color-hover); } .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; } } .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-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)); } .n-loading-bar-container { z-index: 5999; position: fixed; top: 0; left: 0; right: 0; height: 2px; } .n-loading-bar-container.fade-in-transition-enter-active { transition: all 0.3s cubic-bezier(.4, 0, .2, 1)!important; } .n-loading-bar-container.fade-in-transition-leave-active { transition: all 0.8s cubic-bezier(.4, 0, .2, 1)!important; } .n-loading-bar-container.fade-in-transition-enter-from, .n-loading-bar-container.fade-in-transition-leave-to { opacity: 0; } .n-loading-bar-container.fade-in-transition-leave-from, .n-loading-bar-container.fade-in-transition-enter-to { opacity: 1; } .n-loading-bar-container .n-loading-bar { width: 100%; transition: max-width 4s linear, background .2s linear; height: var(--n-height); } .n-loading-bar-container .n-loading-bar.n-loading-bar--starting { background: var(--n-color-loading); } .n-loading-bar-container .n-loading-bar.n-loading-bar--finishing { background: var(--n-color-loading); transition: max-width .2s linear, background .2s linear; } .n-loading-bar-container .n-loading-bar.n-loading-bar--error { background: var(--n-color-error); transition: max-width .2s linear, background .2s linear; } 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-notification-container { z-index: 4000; position: fixed; overflow: visible; display: flex; flex-direction: column; align-items: flex-end; } .n-notification-container > .n-scrollbar { width: initial; overflow: visible; height: -moz-fit-content !important; height: fit-content !important; max-height: 100vh !important; } .n-notification-container > .n-scrollbar > .n-scrollbar-container { height: -moz-fit-content !important; height: fit-content !important; max-height: 100vh !important; } .n-notification-container > .n-scrollbar > .n-scrollbar-container .n-scrollbar-content { padding-top: 12px; padding-bottom: 33px; } .n-notification-container.n-notification-container--top, .n-notification-container.n-notification-container--top-right, .n-notification-container.n-notification-container--top-left { top: 12px; } .n-notification-container.n-notification-container--top.transitioning > .n-scrollbar > .n-scrollbar-container, .n-notification-container.n-notification-container--top-right.transitioning > .n-scrollbar > .n-scrollbar-container, .n-notification-container.n-notification-container--top-left.transitioning > .n-scrollbar > .n-scrollbar-container { min-height: 100vh !important; } .n-notification-container.n-notification-container--bottom, .n-notification-container.n-notification-container--bottom-right, .n-notification-container.n-notification-container--bottom-left { bottom: 12px; } .n-notification-container.n-notification-container--bottom > .n-scrollbar > .n-scrollbar-container .n-scrollbar-content, .n-notification-container.n-notification-container--bottom-right > .n-scrollbar > .n-scrollbar-container .n-scrollbar-content, .n-notification-container.n-notification-container--bottom-left > .n-scrollbar > .n-scrollbar-container .n-scrollbar-content { padding-bottom: 12px; } .n-notification-container.n-notification-container--bottom .n-notification-wrapper, .n-notification-container.n-notification-container--bottom-right .n-notification-wrapper, .n-notification-container.n-notification-container--bottom-left .n-notification-wrapper { display: flex; align-items: flex-end; margin-bottom: 0; margin-top: 12px; } .n-notification-container.n-notification-container--top, .n-notification-container.n-notification-container--bottom { left: 50%; transform: translateX(-50%); } .n-notification-container.n-notification-container--top .n-notification-wrapper.notification-transition-enter-from, .n-notification-container.n-notification-container--bottom .n-notification-wrapper.notification-transition-enter-from, .n-notification-container.n-notification-container--top .n-notification-wrapper.notification-transition-leave-to, .n-notification-container.n-notification-container--bottom .n-notification-wrapper.notification-transition-leave-to { transform: scale(0.85); } .n-notification-container.n-notification-container--top .n-notification-wrapper.notification-transition-leave-from, .n-notification-container.n-notification-container--bottom .n-notification-wrapper.notification-transition-leave-from, .n-notification-container.n-notification-container--top .n-notification-wrapper.notification-transition-enter-to, .n-notification-container.n-notification-container--bottom .n-notification-wrapper.notification-transition-enter-to { transform: scale(1); } .n-notification-container.n-notification-container--top .n-notification-wrapper { transform-origin: top center; } .n-notification-container.n-notification-container--bottom .n-notification-wrapper { transform-origin: bottom center; } .n-notification-container.n-notification-container--top-right .n-notification, .n-notification-container.n-notification-container--bottom-right .n-notification { margin-left: 28px; margin-right: 16px; } .n-notification-container.n-notification-container--top-left .n-notification, .n-notification-container.n-notification-container--bottom-left .n-notification { margin-left: 16px; margin-right: 28px; } .n-notification-container.n-notification-container--top-right { right: 0; } .n-notification-container.n-notification-container--top-right .n-notification-wrapper.notification-transition-enter-from, .n-notification-container.n-notification-container--top-right .n-notification-wrapper.notification-transition-leave-to { transform: translate(calc(100%), 0); } .n-notification-container.n-notification-container--top-right .n-notification-wrapper.notification-transition-leave-from, .n-notification-container.n-notification-container--top-right .n-notification-wrapper.notification-transition-enter-to { transform: translate(0, 0); } .n-notification-container.n-notification-container--top-left { left: 0; } .n-notification-container.n-notification-container--top-left .n-notification-wrapper.notification-transition-enter-from, .n-notification-container.n-notification-container--top-left .n-notification-wrapper.notification-transition-leave-to { transform: translate(calc(-100%), 0); } .n-notification-container.n-notification-container--top-left .n-notification-wrapper.notification-transition-leave-from, .n-notification-container.n-notification-container--top-left .n-notification-wrapper.notification-transition-enter-to { transform: translate(0, 0); } .n-notification-container.n-notification-container--bottom-right { right: 0; } .n-notification-container.n-notification-container--bottom-right .n-notification-wrapper.notification-transition-enter-from, .n-notification-container.n-notification-container--bottom-right .n-notification-wrapper.notification-transition-leave-to { transform: translate(calc(100%), 0); } .n-notification-container.n-notification-container--bottom-right .n-notification-wrapper.notification-transition-leave-from, .n-notification-container.n-notification-container--bottom-right .n-notification-wrapper.notification-transition-enter-to { transform: translate(0, 0); } .n-notification-container.n-notification-container--bottom-left { left: 0; } .n-notification-container.n-notification-container--bottom-left .n-notification-wrapper.notification-transition-enter-from, .n-notification-container.n-notification-container--bottom-left .n-notification-wrapper.notification-transition-leave-to { transform: translate(calc(-100%), 0); } .n-notification-container.n-notification-container--bottom-left .n-notification-wrapper.notification-transition-leave-from, .n-notification-container.n-notification-container--bottom-left .n-notification-wrapper.notification-transition-enter-to { transform: translate(0, 0); } .n-notification-container.n-notification-container--scrollable.n-notification-container--top-right { top: 0; } .n-notification-container.n-notification-container--scrollable.n-notification-container--top-left { top: 0; } .n-notification-container.n-notification-container--scrollable.n-notification-container--bottom-right { bottom: 0; } .n-notification-container.n-notification-container--scrollable.n-notification-container--bottom-left { bottom: 0; } .n-notification-container .n-notification-wrapper { margin-bottom: 12px; } .n-notification-container .n-notification-wrapper.notification-transition-enter-from, .n-notification-container .n-notification-wrapper.notification-transition-leave-to { opacity: 0; margin-top: 0 !important; margin-bottom: 0 !important; } .n-notification-container .n-notification-wrapper.notification-transition-leave-from, .n-notification-container .n-notification-wrapper.notification-transition-enter-to { opacity: 1; } .n-notification-container .n-notification-wrapper.notification-transition-leave-active { transition: background-color .3s var(--n-bezier), color .3s var(--n-bezier), opacity .3s var(--n-bezier), transform .3s var(--n-bezier-ease-in), max-height .3s var(--n-bezier), margin-top .3s linear, margin-bottom .3s linear, box-shadow .3s var(--n-bezier); } .n-notification-container .n-notification-wrapper.notification-transition-enter-active { transition: background-color .3s var(--n-bezier), color .3s var(--n-bezier), opacity .3s var(--n-bezier), transform .3s var(--n-bezier-ease-out), max-height .3s var(--n-bezier), margin-top .3s linear, margin-bottom .3s linear, box-shadow .3s var(--n-bezier); } .n-notification-container .n-notification { background-color: var(--n-color); color: var(--n-text-color); transition: background-color .3s var(--n-bezier), color .3s var(--n-bezier), opacity .3s var(--n-bezier), box-shadow .3s var(--n-bezier); font-family: inherit; font-size: var(--n-font-size); font-weight: 400; position: relative; display: flex; overflow: hidden; flex-shrink: 0; padding-left: var(--n-padding-left); padding-right: var(--n-padding-right); width: var(--n-width); max-width: calc(100vw - 16px - 16px); border-radius: var(--n-border-radius); box-shadow: var(--n-box-shadow); box-sizing: border-box; opacity: 1; } .n-notification-container .n-notification .n-notification__avatar .n-icon { color: var(--n-icon-color); } .n-notification-container .n-notification .n-notification__avatar .n-base-icon { color: var(--n-icon-color); } .n-notification-container .n-notification.n-notification--show-avatar .n-notification-main { margin-left: 40px; width: calc(100% - 40px); } .n-notification-container .n-notification.n-notification--closable .n-notification-main > *:first-child { padding-right: 20px; } .n-notification-container .n-notification.n-notification--closable .n-notification__close { position: absolute; top: 0; right: 0; margin: var(--n-close-margin); transition: background-color .3s var(--n-bezier), color .3s var(--n-bezier); } .n-notification-container .n-notification .n-notification__avatar { position: absolute; top: var(--n-padding-top); left: var(--n-padding-left); width: 28px; height: 28px; font-size: 28px; display: flex; align-items: center; justify-content: center; } .n-notification-container .n-notification .n-notification__avatar .n-icon { transition: color .3s var(--n-bezier); } .n-notification-container .n-notification .n-notification-main { padding-top: var(--n-padding-top); padding-bottom: var(--n-padding-bottom); box-sizing: border-box; display: flex; flex-direction: column; margin-left: 8px; width: calc(100% - 8px); } .n-notification-container .n-notification .n-notification-main .n-notification-main-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; } .n-notification-container .n-notification .n-notification-main .n-notification-main-footer .n-notification-main-footer__meta { font-size: var(--n-meta-font-size); transition: color .3s var(--n-bezier-ease-out); color: var(--n-description-text-color); } .n-notification-container .n-notification .n-notification-main .n-notification-main-footer .n-notification-main-footer__action { cursor: pointer; transition: color .3s var(--n-bezier-ease-out); color: var(--n-action-text-color); } .n-notification-container .n-notification .n-notification-main .n-notification-main__header { font-weight: var(--n-title-font-weight); font-size: var(--n-title-font-size); transition: color .3s var(--n-bezier-ease-out); color: var(--n-title-text-color); } .n-notification-container .n-notification .n-notification-main .n-notification-main__description { margin-top: 8px; font-size: var(--n-description-font-size); white-space: pre-wrap; word-wrap: break-word; transition: color .3s var(--n-bezier-ease-out); color: var(--n-description-text-color); } .n-notification-container .n-notification .n-notification-main .n-notification-main__content { line-height: var(--n-line-height); margin: 12px 0 0 0; font-family: inherit; white-space: pre-wrap; word-wrap: break-word; transition: color .3s var(--n-bezier-ease-out); color: var(--n-text-color); } .n-notification-container .n-notification .n-notification-main .n-notification-main__content:first-child { margin: 0; }