.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-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-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-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-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; }