/* Config */
:root {
--sk-size: 24px;
--sk-color: var(--blue-500-color, #1890ff);
}
/* Utility class for centering */
.sk-center {
margin: auto;
}
/* Plane
*/
.sk-plane {
width: var(--sk-size);
height: var(--sk-size);
background-color: var(--sk-color);
animation: sk-plane 1.2s infinite ease-in-out;
}
@keyframes sk-plane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
}
100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
/* Chase
*/
.sk-chase {
width: var(--sk-size);
height: var(--sk-size);
position: relative;
animation: sk-chase 2.5s infinite linear both;
}
.sk-chase-dot {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
animation: sk-chase-dot 2s infinite ease-in-out both;
}
.sk-chase-dot:before {
content: '';
display: block;
width: 25%;
height: 25%;
background-color: var(--sk-color);
border-radius: 100%;
animation: sk-chase-dot-before 2s infinite ease-in-out both;
}
.sk-chase-dot:nth-child(1) {
animation-delay: -1.1s;
}
.sk-chase-dot:nth-child(2) {
animation-delay: -1s;
}
.sk-chase-dot:nth-child(3) {
animation-delay: -0.9s;
}
.sk-chase-dot:nth-child(4) {
animation-delay: -0.8s;
}
.sk-chase-dot:nth-child(5) {
animation-delay: -0.7s;
}
.sk-chase-dot:nth-child(6) {
animation-delay: -0.6s;
}
.sk-chase-dot:nth-child(1):before {
animation-delay: -1.1s;
}
.sk-chase-dot:nth-child(2):before {
animation-delay: -1s;
}
.sk-chase-dot:nth-child(3):before {
animation-delay: -0.9s;
}
.sk-chase-dot:nth-child(4):before {
animation-delay: -0.8s;
}
.sk-chase-dot:nth-child(5):before {
animation-delay: -0.7s;
}
.sk-chase-dot:nth-child(6):before {
animation-delay: -0.6s;
}
@keyframes sk-chase {
100% {
transform: rotate(360deg);
}
}
@keyframes sk-chase-dot {
80%,
100% {
transform: rotate(360deg);
}
}
@keyframes sk-chase-dot-before {
50% {
transform: scale(0.4);
}
100%,
0% {
transform: scale(1);
}
}
/* Bounce
*/
.sk-bounce {
width: var(--sk-size);
height: var(--sk-size);
position: relative;
}
.sk-bounce-dot {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: var(--sk-color);
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
animation: sk-bounce 2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.sk-bounce-dot:nth-child(2) {
animation-delay: -1s;
}
@keyframes sk-bounce {
0%,
100% {
transform: scale(0);
}
45%,
55% {
transform: scale(1);
}
}
/* Wave
*/
.sk-wave {
width: var(--sk-size);
height: var(--sk-size);
display: flex;
justify-content: space-between;
}
.sk-wave-rect {
background-color: var(--sk-color);
height: 100%;
width: 15%;
animation: sk-wave 1.2s infinite ease-in-out;
}
.sk-wave-rect:nth-child(1) {
animation-delay: -1.2s;
}
.sk-wave-rect:nth-child(2) {
animation-delay: -1.1s;
}
.sk-wave-rect:nth-child(3) {
animation-delay: -1s;
}
.sk-wave-rect:nth-child(4) {
animation-delay: -0.9s;
}
.sk-wave-rect:nth-child(5) {
animation-delay: -0.8s;
}
@keyframes sk-wave {
0%,
40%,
100% {
transform: scaleY(0.4);
}
20% {
transform: scaleY(1);
}
}
/* Pulse
*/
.sk-pulse {
width: var(--sk-size);
height: var(--sk-size);
background-color: var(--sk-color);
border-radius: 100%;
animation: sk-pulse 1.2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
@keyframes sk-pulse {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
opacity: 0;
}
}
/* Flow
*/
.sk-flow {
width: calc(var(--sk-size) * 1.3);
height: calc(var(--sk-size) * 1.3);
display: flex;
justify-content: space-between;
align-items: center;
}
.sk-flow-dot {
width: 25%;
height: 25%;
background-color: var(--sk-color);
border-radius: 50%;
animation: sk-flow 1.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s infinite both;
}
.sk-flow-dot:nth-child(1) {
animation-delay: -0.3s;
}
.sk-flow-dot:nth-child(2) {
animation-delay: -0.15s;
}
@keyframes sk-flow {
0%,
80%,
100% {
transform: scale(0.3);
}
40% {
transform: scale(1);
}
}
/* Swing
*/
.sk-swing {
width: var(--sk-size);
height: var(--sk-size);
position: relative;
animation: sk-swing 1.8s infinite linear;
}
.sk-swing-dot {
width: 45%;
height: 45%;
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
background-color: var(--sk-color);
border-radius: 100%;
animation: sk-swing-dot 2s infinite ease-in-out;
}
.sk-swing-dot:nth-child(2) {
top: auto;
bottom: 0;
animation-delay: -1s;
}
@keyframes sk-swing {
100% {
transform: rotate(360deg);
}
}
@keyframes sk-swing-dot {
0%,
100% {
transform: scale(0.2);
}
50% {
transform: scale(1);
}
}
/* Circle
*/
.sk-circle {
width: var(--sk-size);
height: var(--sk-size);
position: relative;
}
.sk-circle-dot {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.sk-circle-dot:before {
content: '';
display: block;
width: 15%;
height: 15%;
background-color: var(--sk-color);
border-radius: 100%;
animation: sk-circle 1.2s infinite ease-in-out both;
}
.sk-circle-dot:nth-child(1) {
transform: rotate(30deg);
}
.sk-circle-dot:nth-child(2) {
transform: rotate(60deg);
}
.sk-circle-dot:nth-child(3) {
transform: rotate(90deg);
}
.sk-circle-dot:nth-child(4) {
transform: rotate(120deg);
}
.sk-circle-dot:nth-child(5) {
transform: rotate(150deg);
}
.sk-circle-dot:nth-child(6) {
transform: rotate(180deg);
}
.sk-circle-dot:nth-child(7) {
transform: rotate(210deg);
}
.sk-circle-dot:nth-child(8) {
transform: rotate(240deg);
}
.sk-circle-dot:nth-child(9) {
transform: rotate(270deg);
}
.sk-circle-dot:nth-child(10) {
transform: rotate(300deg);
}
.sk-circle-dot:nth-child(11) {
transform: rotate(330deg);
}
.sk-circle-dot:nth-child(1):before {
animation-delay: -1.1s;
}
.sk-circle-dot:nth-child(2):before {
animation-delay: -1s;
}
.sk-circle-dot:nth-child(3):before {
animation-delay: -0.9s;
}
.sk-circle-dot:nth-child(4):before {
animation-delay: -0.8s;
}
.sk-circle-dot:nth-child(5):before {
animation-delay: -0.7s;
}
.sk-circle-dot:nth-child(6):before {
animation-delay: -0.6s;
}
.sk-circle-dot:nth-child(7):before {
animation-delay: -0.5s;
}
.sk-circle-dot:nth-child(8):before {
animation-delay: -0.4s;
}
.sk-circle-dot:nth-child(9):before {
animation-delay: -0.3s;
}
.sk-circle-dot:nth-child(10):before {
animation-delay: -0.2s;
}
.sk-circle-dot:nth-child(11):before {
animation-delay: -0.1s;
}
@keyframes sk-circle {
0%,
80%,
100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}
/* Circle Fade
*/
.sk-circle-fade {
width: var(--sk-size);
height: var(--sk-size);
position: relative;
}
.sk-circle-fade-dot {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.sk-circle-fade-dot:before {
content: '';
display: block;
width: 15%;
height: 15%;
background-color: var(--sk-color);
border-radius: 100%;
animation: sk-circle-fade 1.2s infinite ease-in-out both;
}
.sk-circle-fade-dot:nth-child(1) {
transform: rotate(30deg);
}
.sk-circle-fade-dot:nth-child(2) {
transform: rotate(60deg);
}
.sk-circle-fade-dot:nth-child(3) {
transform: rotate(90deg);
}
.sk-circle-fade-dot:nth-child(4) {
transform: rotate(120deg);
}
.sk-circle-fade-dot:nth-child(5) {
transform: rotate(150deg);
}
.sk-circle-fade-dot:nth-child(6) {
transform: rotate(180deg);
}
.sk-circle-fade-dot:nth-child(7) {
transform: rotate(210deg);
}
.sk-circle-fade-dot:nth-child(8) {
transform: rotate(240deg);
}
.sk-circle-fade-dot:nth-child(9) {
transform: rotate(270deg);
}
.sk-circle-fade-dot:nth-child(10) {
transform: rotate(300deg);
}
.sk-circle-fade-dot:nth-child(11) {
transform: rotate(330deg);
}
.sk-circle-fade-dot:nth-child(1):before {
animation-delay: -1.1s;
}
.sk-circle-fade-dot:nth-child(2):before {
animation-delay: -1s;
}
.sk-circle-fade-dot:nth-child(3):before {
animation-delay: -0.9s;
}
.sk-circle-fade-dot:nth-child(4):before {
animation-delay: -0.8s;
}
.sk-circle-fade-dot:nth-child(5):before {
animation-delay: -0.7s;
}
.sk-circle-fade-dot:nth-child(6):before {
animation-delay: -0.6s;
}
.sk-circle-fade-dot:nth-child(7):before {
animation-delay: -0.5s;
}
.sk-circle-fade-dot:nth-child(8):before {
animation-delay: -0.4s;
}
.sk-circle-fade-dot:nth-child(9):before {
animation-delay: -0.3s;
}
.sk-circle-fade-dot:nth-child(10):before {
animation-delay: -0.2s;
}
.sk-circle-fade-dot:nth-child(11):before {
animation-delay: -0.1s;
}
@keyframes sk-circle-fade {
0%,
39%,
100% {
opacity: 0;
transform: scale(0.6);
}
40% {
opacity: 1;
transform: scale(1);
}
}
/* Grid
*/
.sk-grid {
width: var(--sk-size);
height: var(--sk-size);
/* Cube positions
* 1 2 3
* 4 5 6
* 7 8 9
*/
}
.sk-grid-cube {
width: 33.33%;
height: 33.33%;
background-color: var(--sk-color);
float: left;
animation: sk-grid 1.3s infinite ease-in-out;
}
.sk-grid-cube:nth-child(1) {
animation-delay: 0.2s;
}
.sk-grid-cube:nth-child(2) {
animation-delay: 0.3s;
}
.sk-grid-cube:nth-child(3) {
animation-delay: 0.4s;
}
.sk-grid-cube:nth-child(4) {
animation-delay: 0.1s;
}
.sk-grid-cube:nth-child(5) {
animation-delay: 0.2s;
}
.sk-grid-cube:nth-child(6) {
animation-delay: 0.3s;
}
.sk-grid-cube:nth-child(7) {
animation-delay: 0s;
}
.sk-grid-cube:nth-child(8) {
animation-delay: 0.1s;
}
.sk-grid-cube:nth-child(9) {
animation-delay: 0.2s;
}
@keyframes sk-grid {
0%,
70%,
100% {
transform: scale3D(1, 1, 1);
}
35% {
transform: scale3D(0, 0, 1);
}
}
/* Fold
*/
.sk-fold {
width: var(--sk-size);
height: var(--sk-size);
position: relative;
transform: rotateZ(45deg);
}
.sk-fold-cube {
float: left;
width: 50%;
height: 50%;
position: relative;
transform: scale(1.1);
}
.sk-fold-cube:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--sk-color);
animation: sk-fold 2.4s infinite linear both;
transform-origin: 100% 100%;
}
.sk-fold-cube:nth-child(2) {
transform: scale(1.1) rotateZ(90deg);
}
.sk-fold-cube:nth-child(4) {
transform: scale(1.1) rotateZ(180deg);
}
.sk-fold-cube:nth-child(3) {
transform: scale(1.1) rotateZ(270deg);
}
.sk-fold-cube:nth-child(2):before {
animation-delay: 0.3s;
}
.sk-fold-cube:nth-child(4):before {
animation-delay: 0.6s;
}
.sk-fold-cube:nth-child(3):before {
animation-delay: 0.9s;
}
@keyframes sk-fold {
0%,
10% {
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
/* Wander
*/
.sk-wander {
width: var(--sk-size);
height: var(--sk-size);
position: relative;
}
.sk-wander-cube {
background-color: var(--sk-color);
width: 20%;
height: 20%;
position: absolute;
top: 0;
left: 0;
--sk-wander-distance: calc(var(--sk-size) * 0.75);
animation: sk-wander 2s ease-in-out -2s infinite both;
}
.sk-wander-cube:nth-child(2) {
animation-delay: -0.5s;
}
.sk-wander-cube:nth-child(3) {
animation-delay: -1s;
}
@keyframes sk-wander {
0% {
transform: rotate(0deg);
}
25% {
transform: translateX(var(--sk-wander-distance)) rotate(-90deg) scale(0.6);
}
50% {
/* Make FF rotate in the right direction */
transform: translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-179deg);
}
50.1% {
transform: translateX(var(--sk-wander-distance)) translateY(var(--sk-wander-distance)) rotate(-180deg);
}
75% {
transform: translateX(0) translateY(var(--sk-wander-distance)) rotate(-270deg) scale(0.6);
}
100% {
transform: rotate(-360deg);
}
}
.apm-empty-element {
width: 100%;
height: 100% !important;
min-height: 48px;
}
.apm-empty-element .apm-empty-element__inner {
position: absolute;
top: 0;
left: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 16px;
color: var(--blue-500-color);
font-size: 11px;
line-height: 16px;
text-align: center;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box !important;
}
.apm-empty-element:before {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background: var(--blue-500-color);
opacity: 0.1;
}
.n-drawer-mask,
body.is-modal-open .n-modal-mask {
background-color: rgba(0, 0, 0, 0.4) !important;
}
.apm-text-block:focus-visible {
outline: none;
}
.apm-text-model {
position: relative;
color: rgb(108, 105, 240);
background-color: #f5f5f5;
padding: 0px 4px;
border-radius: 3px;
transition: background-color 0.2s ease-in-out;
white-space: nowrap;
}
.apm-text-model:hover {
background-color: #e5e5e5;
}
.apm-text-model::after {
content: attr(data-tooltip);
position: absolute;
display: none;
top: 20px;
left: 0;
z-index: 100;
background: #333;
color: #fff;
padding: 5px 10px;
border-radius: 3px;
white-space: nowrap;
}
.apm-link {
text-decoration: none;
text-overflow: ellipsis;
}
.apm-element-chip[data-v-536fcc58] .n-tag__content {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
flex: var(--apm-content-flex);
}
.apm-element-chip[data-v-536fcc58] .n-tag__content div {
text-overflow: ellipsis;
}.apm-element-divider[data-v-3dc2158a] .n-divider__line {
height: var(--apm-divider-height, 1px);
}
.apm-element-divider.n-divider--dashed[data-v-3dc2158a] .n-divider__line {
border-width: var(--apm-border-width, 1px) !important;
}.embed-html-wrapper::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
z-index: 999;
top: 0;
left: 0;
}.apm-element-carousel .apm-carousel-custom-arrows[data-v-b7327e8c] {
display: flex;
position: absolute;
bottom: 18px;
right: 18px;
}
.apm-element-carousel .apm-carousel-custom-arrows.left[data-v-b7327e8c], .apm-element-carousel .apm-carousel-custom-arrows.right[data-v-b7327e8c] {
flex-direction: column;
}
.apm-element-carousel .apm-carousel-custom-arrows.left button[data-v-b7327e8c]:first-child, .apm-element-carousel .apm-carousel-custom-arrows.right button[data-v-b7327e8c]:first-child {
margin-bottom: 12px;
margin-right: 0px;
}
.apm-element-carousel .apm-carousel-custom-arrows.left[data-v-b7327e8c] {
right: 0px;
left: 18px;
bottom: 18px;
}
.apm-element-carousel .apm-carousel-custom-arrows.top[data-v-b7327e8c] {
top: 15px;
bottom: 0px;
}
.apm-element-carousel .apm-carousel-custom-arrows button[data-v-b7327e8c] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
color: #ffffff;
background-color: var(--n-dot-color);
border-width: 0;
border-radius: 8px;
transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.apm-element-carousel .apm-carousel-custom-arrows button[data-v-b7327e8c]:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.apm-element-carousel .apm-carousel-custom-arrows button[data-v-b7327e8c]:active {
transform: scale(0.95);
transform-origin: center;
}
.apm-element-carousel .apm-carousel-custom-arrows button[data-v-b7327e8c]:first-child {
margin-right: 12px;
margin-bottom: 0px;
}
.apm-element-carousel .apm-carousel-custom-arrows button.disabled[data-v-b7327e8c] {
pointer-events: none;
opacity: 0.4;
cursor: disabled;
}
.apm-element-carousel .apm-carousel-custom-arrows.vertical button[data-v-b7327e8c] {
transform: rotateZ(90deg);
}
.n-upload-trigger,
.n-upload-trigger > .n-button {
width: 100%;
}
/* .player {
--brand-color: #f5f5f5;
--focus-color: #4e9cf6;
--audio-brand: var(--brand-color);
--audio-focus-ring-color: var(--focus-color);
--audio-border-radius: 2px;
--video-brand: var(--brand-color);
--video-focus-ring-color: var(--focus-color);
--video-border-radius: 2px;
} */
.video-player--no-controls .vds-controls {
display: none;
}
.video-player--no-fullscreen .vds-fullscreen-tooltip {
display: none !important;
}
.video-player {
--media-brand: #f5f5f5;
--media-focus-ring-color: #4e9cf6;
--media-focus-ring: 0 0 0 3px var(--media-focus-ring-color);
}
/* .video-player[data-view-type='audio'] {
--media-tooltip-y-offset: 44px;
--media-menu-y-offset: 40px;
--media-slider-chapter-title-color: black;
--media-border-radius: 4px;
background-color: #212121;
border-radius: var(--media-border-radius);
contain: layout;
} */
.video-player[data-view-type='video'] {
--media-tooltip-y-offset: 30px;
--media-menu-y-offset: 30px;
aspect-ratio: var(--media-aspect-ratio, 16 / 9);
border-radius: var(--media-border-radius, 0);
contain: layout;
}
.video-player :deep(video),
media-poster {
border-radius: var(--media-border-radius);
}
.apm-menu-item-label {
display: flex;
height: 100%;
align-items: center;
}
.apm-menu-item-label > span,
.apm-menu-item-label > a {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}.apm-nav-menu .n-menu .n-menu-item {
height: var(--apm-option-height, auto);
}
.apm-nav-menu .n-menu .n-menu-item .n-menu-item-content-header {
height: var(--apm-option-height, 100%);
}
.apm-nav-menu .n-menu .n-menu-item,
.apm-nav-menu .n-submenu {
margin-top: var(--submenu-margin-top, 0);
}
.apm-nav-menu .n-menu .n-submenu > .n-menu-item .n-menu-item-content-header {
line-height: var(--apm-font-line-height, 32px);
}
.apm-nav-menu .n-menu .n-menu-item-content:not(.n-menu-item-content--disabled):hover .n-menu-item-content-header,
.apm-nav-menu .n-menu .n-menu-item-content:not(.n-menu-item-content--disabled):hover .n-menu-item-content-header a,
.apm-nav-menu .n-menu .n-menu-item-content:hover .n-menu-item-content-header a,
.apm-nav-menu .n-menu .n-menu-item-content:not(.n-menu-item-content--disabled):hover .n-menu-item-content__icon {
color: var(--apm-item-text-color-hover);
}
.apm-nav-menu .n-menu .n-menu-item-content:not(.n-menu-item-content--disabled) .n-menu-item-content-header,
.apm-nav-menu .n-menu .n-menu-item-content:not(.n-menu-item-content--disabled) .n-menu-item-content-header a,
.apm-nav-menu .n-menu .n-menu-item-content:not(.n-menu-item-content--disabled) .n-menu-item-content__icon {
color: var(--apm-item-text-color, var(--n-item-text-color));
}
.apm-nav-menu .n-menu .n-menu-item-content.n-menu-item-content--selected .n-menu-item-content-header,
.apm-nav-menu .n-menu .n-menu-item-content.n-menu-item-content--selected .n-menu-item-content-header a,
.apm-nav-menu .n-menu .n-menu-item-content.n-menu-item-content--selected .n-menu-item-content__icon {
color: var(--apm-item-text-color-active);
}
.apm-nav-menu .n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--selected:hover .n-menu-item-content__icon,
.apm-nav-menu .n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--selected:hover .n-menu-item-content-header,
.apm-nav-menu .n-menu .n-menu-item-content:not(.n-menu-item-content--disabled).n-menu-item-content--selected:hover .n-menu-item-content-header a {
color: var(--apm-item-text-color-active-hover);
}
.apm-nav-menu .n-menu .n-menu-item-content:not(.n-menu-item-content--disabled):hover::before {
background-color: var(--apm-item-color-bg-hover);
}
.apm-nav-menu .n-menu .n-submenu .n-menu-item-content {
height: var(--apm-option-height, 100%);
}
.apm-nav-menu .n-menu .n-menu-item-content {
line-height: var(--apm-font-line-height, 32px);
}
.apm-nav-menu .n-menu .n-menu-item-content.n-menu-item-content--child-active::before {
background: var(--n-item-color-active);
}
.apm-nav-menu .n-menu .n-menu-item-content::before {
background: var(--n-item-color);
border-radius: var(--apm-border-radius);
}
.apm-nav-menu .n-menu .n-menu-item-content.n-menu-item-content--selected::before {
background: var(--apm-item-color-bg-active, var(--n-item-color-active, inherit)) !important;
}
.apm-nav-menu .n-menu.n-menu--collapsed .n-menu-item-content.n-menu-item-content--selected::before {
background-color: var(--apm-item-color-bg-active, var(--n-item-color-active-collapsed)) !important;
}
.apm-nav-menu .n-menu .n-menu-item-content.n-menu-item-content--selected:hover::before {
background: var(--apm-item-color-bg-active-hover, var(--n-item-color-active-hover, inherit)) !important;
}
.apm-nav-menu .n-menu.n-menu--collapsed .n-menu-item-content.n-menu-item-content--selected:hover::before {
background: var(--apm-item-color-bg-active-hover, var(--n-item-color-active-hover, inherit)) !important;
}
.apm-nav-menu .n-layout-sider {
min-width: auto;
max-width: none;
}
.apm-nav-menu__header {
height: 100%;
}
.apm-nav-menu__logo {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
min-height: 60px;
max-width: 100%;
padding: 12px;
text-align: center;
flex-wrap: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.apm-nav-menu__logo-img {
overflow: hidden;
flex: 0 0 auto;
}
.apm-nav-menu__logo-img img {
max-width: 100%;
max-height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.apm-nav-menu__trigger {
position: absolute;
top: var(--apm-trigger-top, 50%);
right: -12px;
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
padding: 1.5px 0 0;
z-index: 20;
border-radius: 50%;
transform: translateY(-12px);
cursor: pointer;
font-size: 1.25em;
}
.apm-nav-menu__trigger:hover, .apm-nav-menu__trigger:active {
color: var(--blue-500-color);
}
.n-dropdown-menu.apm-menu-sidebar-popover {
background: var(--apm-background);
}
.n-dropdown-menu.apm-menu-sidebar-popover .n-dropdown-option .n-dropdown-option-body {
height: var(--apm-option-height, auto);
font-family: var(--apm-font-family);
font-size: var(--apm-font-size, 20px);
font-weight: var(--apm-font-weight, 500);
font-style: var(--apm-font-style, normal);
letter-spacing: var(--apm-font-letter-spacing, 0px);
line-height: var(--apm-font-line-height, 32px);
-webkit-text-decoration: var(--apm-font-text-decoration, none);
text-decoration: var(--apm-font-text-decoration, none);
text-transform: var(--apm-text-transform, none);
color: var(--apm-item-text-color, inherit);
}
.n-dropdown-menu.apm-menu-sidebar-popover .n-dropdown-option:not(:first-child) {
margin-top: var(--submenu-margin-top, 6px);
}
.n-dropdown-menu.apm-menu-sidebar-popover .n-dropdown-option .n-dropdown-option-body:not(.n-dropdown-option-body--disabled):before {
background: var(--apm-item-color-bg, inherit);
border-radius: var(--apm-border-radius, 4px);
}
.n-dropdown-menu.apm-menu-sidebar-popover .n-dropdown-option .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--active {
color: var(--apm-item-text-color-active, inherit);
}
.n-dropdown-menu.apm-menu-sidebar-popover .n-dropdown-option .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--active::before {
background: var(--apm-item-color-bg-active, inherit);
border-radius: var(--apm-border-radius, 4px);
}
.n-dropdown-menu.apm-menu-sidebar-popover .n-dropdown-option:hover .n-dropdown-option-body:not(.n-dropdown-option-body--disabled) {
color: var(--apm-item-text-color-hover, inherit);
}
.n-dropdown-menu.apm-menu-sidebar-popover .n-dropdown-option:hover .n-dropdown-option-body:not(.n-dropdown-option-body--disabled):before {
background: var(--apm-item-color-bg-hover, inherit);
}
.n-dropdown-menu.apm-menu-sidebar-popover .n-dropdown-option:hover .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--active {
color: var(--apm-item-text-color-active-hover, inherit);
}
.n-dropdown-menu.apm-menu-sidebar-popover .n-dropdown-option:hover .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--active::before {
background: var(--apm-item-color-bg-active-hover, inherit);
}.apm-menu-item-icon {
display: flex;
padding-left: 8px;
}.n-menu .n-menu-item-content {
transition: color var(--apm-transition-fn, 0.3s) var(--apm-transition-duration, var(--n-bezier)), background-color var(--apm-transition-fn, 0.3s) var(--apm-transition-duration, var(--n-bezier)), border-color var(--apm-transition-fn, 0.3s) var(--apm-transition-duration, var(--n-bezier)) !important;
}
.apm-nav-menu-horizontal .n-menu .n-submenu,
.apm-nav-menu-horizontal .n-menu .n-menu-item {
height: var(--apm-option-height, 100%);
}
.apm-nav-menu-horizontal .n-menu .n-submenu:not(:first-child) .n-menu-item-content,
.apm-nav-menu-horizontal .n-menu .n-menu-item:not(:first-child) .n-menu-item-content {
margin-left: var(--submenu-margin-top, 0);
}
.apm-nav-menu-horizontal .n-menu .n-submenu .n-menu-item-content,
.apm-nav-menu-horizontal .n-menu .n-menu-item .n-menu-item-content {
height: 100%;
padding: 0 var(--apm-item-padding, 0) !important;
background: var(--apm-item-color-bg, inherit);
border-radius: var(--apm-border-radius, 4px);
}
.apm-nav-menu-horizontal .n-menu .n-submenu .n-menu-item-content.n-menu-item-content--disabled,
.apm-nav-menu-horizontal .n-menu .n-menu-item .n-menu-item-content.n-menu-item-content--disabled {
opacity: 1;
pointer-events: none;
}
.apm-nav-menu-horizontal .n-menu .n-submenu .n-menu-item-content.n-menu-item-content--disabled .n-menu-item-content__icon,
.apm-nav-menu-horizontal .n-menu .n-submenu .n-menu-item-content.n-menu-item-content--disabled .apm-menu-item-label,
.apm-nav-menu-horizontal .n-menu .n-menu-item .n-menu-item-content.n-menu-item-content--disabled .n-menu-item-content__icon,
.apm-nav-menu-horizontal .n-menu .n-menu-item .n-menu-item-content.n-menu-item-content--disabled .apm-menu-item-label {
opacity: 0.45;
}
.apm-nav-menu-horizontal .n-menu .n-submenu .n-menu-item-content-header,
.apm-nav-menu-horizontal .n-menu .n-menu-item .n-menu-item-content-header {
min-width: 20px;
}
.apm-nav-menu-horizontal .n-menu .n-submenu .n-menu-item-content__icon,
.apm-nav-menu-horizontal .n-menu .n-menu-item .n-menu-item-content__icon {
margin-right: var(--apm-item-icon-margin, 0) !important;
}
.apm-nav-menu-horizontal .n-menu .n-submenu .n-menu-item-content.n-menu-item-content--selected,
.apm-nav-menu-horizontal .n-menu .n-menu-item .n-menu-item-content.n-menu-item-content--selected {
background: var(--apm-item-color-bg-active, inherit);
}
.apm-nav-menu-horizontal .n-menu .n-submenu:hover .n-menu-item-content:not(.n-menu-item-content--disabled),
.apm-nav-menu-horizontal .n-menu .n-menu-item:hover .n-menu-item-content:not(.n-menu-item-content--disabled) {
background: var(--apm-item-color-bg-hover, inherit);
}
.apm-nav-menu-horizontal .n-menu .n-submenu:hover .n-menu-item-content.n-menu-item-content--selected,
.apm-nav-menu-horizontal .n-menu .n-submenu:hover .n-menu-item-content.n-menu-item-content--child-active,
.apm-nav-menu-horizontal .n-menu .n-menu-item:hover .n-menu-item-content.n-menu-item-content--selected,
.apm-nav-menu-horizontal .n-menu .n-menu-item:hover .n-menu-item-content.n-menu-item-content--child-active {
background: var(--apm-item-color-bg-active-hover, inherit);
}
.apm-nav-menu-horizontal .n-menu.n-menu--horizontal .n-menu-item-content.n-menu-item-content--selected .n-menu-item-content__icon,
.apm-nav-menu-horizontal .n-menu.n-menu--horizontal .n-menu-item-content.n-menu-item-content--selected .n-menu-item-content__icon a {
color: var(--apm-item-text-color-active) !important;
}
.apm-nav-menu-horizontal .n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled):hover .n-menu-item-content__icon,
.apm-nav-menu-horizontal .n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled):hover .n-menu-item-content__icon a {
color: var(--apm-item-text-color-hover) !important;
}
.apm-nav-menu-horizontal .n-menu.n-menu--horizontal .n-menu-item-content.n-menu-item-content--selected:hover .n-menu-item-content__icon,
.apm-nav-menu-horizontal .n-menu.n-menu--horizontal .n-menu-item-content.n-menu-item-content--selected:hover .n-menu-item-content__icon a {
color: var(--apm-item-text-color-active-hover) !important;
}
.apm-nav-menu-horizontal.apm-nav-menu-horizontal--only-icons .n-menu-item-content-header {
display: none;
}
.n-menu.n-menu--horizontal .n-menu-item-content,
.n-menu.n-menu--horizontal .n-menu-item-content:not(.n-menu-item-content--disabled):hover {
border-bottom: none !important;
}
.n-dropdown-menu.apm-menu-horizontal-popover {
background: var(--apm-background);
}
.n-dropdown-menu.apm-menu-horizontal-popover .n-dropdown-option .n-dropdown-option-body {
height: var(--apm-option-height, auto);
font-family: var(--apm-font-family);
font-size: var(--apm-font-size, 20px);
font-weight: var(--apm-font-weight, 500);
font-style: var(--apm-font-style, normal);
letter-spacing: var(--apm-font-letter-spacing, 0px);
line-height: var(--apm-font-line-height, 32px);
-webkit-text-decoration: var(--apm-font-text-decoration, none);
text-decoration: var(--apm-font-text-decoration, none);
text-transform: var(--apm-text-transform, none);
color: var(--apm-item-text-color, inherit);
}
.n-dropdown-menu.apm-menu-horizontal-popover .n-dropdown-option:not(:first-child) {
margin-top: var(--submenu-margin-top, 6px);
}
.n-dropdown-menu.apm-menu-horizontal-popover .n-dropdown-option .n-dropdown-option-body:not(.n-dropdown-option-body--disabled):before {
background: var(--apm-item-color-bg, inherit);
border-radius: var(--apm-border-radius, 4px);
}
.n-dropdown-menu.apm-menu-horizontal-popover .n-dropdown-option .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--active {
color: var(--apm-item-text-color-active, inherit);
}
.n-dropdown-menu.apm-menu-horizontal-popover .n-dropdown-option .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--active::before {
background: var(--apm-item-color-bg-active, inherit);
border-radius: var(--apm-border-radius, 4px);
}
.n-dropdown-menu.apm-menu-horizontal-popover .n-dropdown-option:hover .n-dropdown-option-body:not(.n-dropdown-option-body--disabled) {
color: var(--apm-item-text-color-hover, inherit);
}
.n-dropdown-menu.apm-menu-horizontal-popover .n-dropdown-option:hover .n-dropdown-option-body:not(.n-dropdown-option-body--disabled):before {
background: var(--apm-item-color-bg-hover, inherit);
}
.n-dropdown-menu.apm-menu-horizontal-popover .n-dropdown-option:hover .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--active {
color: var(--apm-item-text-color-active-hover, inherit);
}
.n-dropdown-menu.apm-menu-horizontal-popover .n-dropdown-option:hover .n-dropdown-option-body:not(.n-dropdown-option-body--disabled).n-dropdown-option-body--active::before {
background: var(--apm-item-color-bg-active-hover, inherit);
}.apm-element-tabs[data-v-a0785ca3] .n-tabs-pane-wrapper {
height: 100%;
}
.apm-element-tabs[data-v-a0785ca3] .n-tabs-nav--left {
width: auto !important;
}
.apm-element-tabs[data-v-a0785ca3] .n-tabs-nav--right {
width: auto !important;
}
.apm-element-tabs[data-v-a0785ca3] .n-tabs-pad {
max-width: none !important;
}
.apm-element-tabs[data-v-a0785ca3] .n-tabs-tab-wrapper .n-tabs-tab__label > div {
width: var(--apm-tabs-bar-width, auto);
}
.apm-element-tabs[data-v-a0785ca3] .n-tabs-tab--active {
background-color: var(--apm-active-card-color) !important;
}
.apm-element-tab[data-v-a0785ca3] .n-tabs-tab--active {
background-color: var(--apm-active-card-color) !important;
}.apm-data-table {
position: relative;
}
.apm-data-table .n-data-table-loading-wrapper {
width: 100%;
height: 100%;
}
.apm-data-table .n-data-table-base-table-body {
height: auto;
max-height: 100%;
}
.apm-data-table .n-data-table-td__ellipsis,
.apm-data-table .n-ellipsis,
.apm-data-table .n-ellipsis > span {
width: 100%;
height: 100%;
}
.apm-data-table .n-data-table-empty {
border: 1px dotted #ccc;
}
.td-cell--nowrap {
white-space: nowrap;
}
.td-cell--nowrap div {
flex-wrap: nowrap !important;
}
.n-data-table .n-data-table-th:hover {
background-color: var(--n-th-color-hover);
}.apm-form-item[data-v-012ffa50] .n-form-item-label__text {
flex-basis: 100%;
max-width: 100%;
overflow: hidden;
}
.apm-form-item[data-v-012ffa50] .n-form-item-label {
display: flex;
line-height: var(--apm-line-height, normal);
}
.apm-form-item[data-v-012ffa50] .n-input__suffix {
-moz-column-gap: 8px;
column-gap: 8px;
line-height: 100%;
}
.apm-form-item[data-v-012ffa50] .n-input__suffix .n-base-clear__clear {
line-height: 100%;
}
[data-v-012ffa50] .n-form-item-blank {
min-height: auto !important;
}.apm-form-item-label.is-required:after {
content: "*";
color: var(--apm-color-error, #ff4d4f);
margin-left: 4px;
line-height: 1;
font-size: inherit;
text-decoration: none !important;
text-decoration-color: rgba(255, 255, 255, 0) !important;
}
.apm-form-tooltip-icon {
color: var(--apm-text3-color);
margin-left: 4px;
transition: color 0.3s ease-in-out;
}
.apm-form-tooltip-icon:hover {
color: var(--apm-primary-color);
}
.apm-input.n-input .n-input__input-el,
.apm-input.n-input .n-input__textarea-el,
.apm-input.n-input .n-input__placeholder,
.apm-input.n-input .n-input__eye,
.apm-input.n-input .n-input-word-count {
font-family: var(--apm-font-family, inherit);
font-weight: var(--apm-font-weight, 400);
font-style: var(--apm-font-style, normal);
font-size: var(--apm-font-size, inherit) !important;
text-shadow: var(--apm-font-text-shadow, none);
}
.apm-input.n-input:not(.n-input--disabled) .n-input__input-el,
.apm-input.n-input:not(.n-input--disabled) .n-input__textarea-el,
.apm-input.n-input:not(.n-input--disabled) .n-input__eye,
.apm-input.n-input:not(.n-input--disabled) .n-input-word-count {
color: var(--apm-text-color, inherit) !important;
}
.apm-input.n-input.n-input--disabled .n-input__input-el,
.apm-input.n-input.n-input--disabled .n-input__textarea-el,
.apm-input.n-input.n-input--disabled .n-input__eye,
.apm-input.n-input.n-input--disabled .n-input-word-count {
color: var(--apm-text-color-disabled, inherit) !important;
}
.apm-input.n-input:not(.n-input--disabled) .n-input__placeholder {
color: var(--apm-placeholder-color, #767c82) !important;
}
.apm-input.n-input.n-input--disabled .n-input__placeholder {
color: var(--apm-placeholder-disabled-color, #767c82) !important;
}
.apm-input.n-input .n-input__input-el,
.apm-input.n-input .n-input__textarea-el,
.apm-input.n-input .n-input__placeholder {
-webkit-text-decoration: var(--apm-font-text-decoration, none);
text-decoration: var(--apm-font-text-decoration, none);
text-transform: var(--apm-text-transform, none);
text-align: var(--apm-text-align, left);
line-height: var(--n-height);
}
.apm-input.n-input .n-input__input-el {
height: auto;
}
.apm-input.n-input.n-input--textarea {
min-height: var(--n-height);
}
.apm-input.n-input.n-input--error-status:not(.n-input--disabled).n-input--focus,
.apm-input.n-input.n-input--error-status:not(.n-input--disabled):focus,
.apm-input.n-input.n-input--warning-status:not(.n-input--disabled).n-input--focus,
.apm-input.n-input.n-input--warning-status:not(.n-input--disabled):focus {
background-color: var(--apm-input-bg-color, transparent);
}
.apm-input.n-input.n-input--error-status.n-input--disabled.n-input--focus,
.apm-input.n-input.n-input--error-status.n-input--disabled:focus,
.apm-input.n-input.n-input--warning-status.n-input--disabled.n-input--focus,
.apm-input.n-input.n-input--warning-status.n-input--disabled:focus {
background-color: var(--apm-input-bg-color-disabled, transparent);
}
.apm-input.n-input.n-input--disabled {
background-color: var(--apm-input-bg-color-disabled, transparent);
}.input-password-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}.n-input-number.apm-input .n-input .n-input__placeholder {
font-family: var(--apm-font-family);
font-weight: var(--apm-font-weight, 400);
font-style: var(--apm-font-style, normal);
font-size: var(--apm-font-size, 14);
-webkit-text-decoration: var(--apm-font-text-decoration, none);
text-decoration: var(--apm-font-text-decoration, none);
text-transform: var(--apm-text-transform, none);
text-align: var(--apm-text-align, left);
}
.n-input-number.apm-input .n-input .n-input__input-el,
.n-input-number.apm-input .n-input .n-input-word-count {
font-family: var(--apm-font-family);
font-weight: var(--apm-font-weight, 400);
font-style: var(--apm-font-style, normal);
font-size: var(--apm-font-size, 14);
-webkit-text-decoration: var(--apm-font-text-decoration, none);
text-decoration: var(--apm-font-text-decoration, none);
text-transform: var(--apm-text-transform, none);
text-align: var(--apm-text-align, left);
color: var(--apm-text-color);
}
.n-input-number.apm-input .n-input,
.n-input-number.apm-input .n-input .n-input__input-el,
.n-input-number.apm-input .n-input .n-input-wrapper {
height: var(--apm-input-height);
}
.n-input-number.apm-input .n-input {
border-radius: var(--apm-input-border-radius, 6px);
background-color: var(--apm-input-bg-color, #ffffff);
}
.n-input-number.apm-input .n-input:not(.n-input--disabled).n-input--focus {
background-color: var(--apm-input-bg-color);
}
.n-input-number.apm-input .n-input:not(.n-input--disabled).n-input--none-status .n-input__state-border, .n-input-number.apm-input .n-input:not(.n-input--disabled).n-input--success-status .n-input__state-border {
border: var(--apm-input-border);
}
.n-input-number.apm-input .n-input:hover:not(.n-input--disabled):not(.n-input--focus).n-input--none-status .n-input__state-border, .n-input-number.apm-input .n-input:hover:not(.n-input--disabled):not(.n-input--focus).n-input--success-status .n-input__state-border {
border: var(--apm-input-border-hover);
}
.n-input-number.apm-input .n-input:not(.n-input--disabled).n-input--focus .n-input__state-border {
border: var(--apm-input-border-focus);
}
.n-input-number.apm-input .n-input.n-input--disabled .n-input__state-border {
border: var(--apm-input-border-disabled);
}
.n-input-number.apm-input .n-input:not(.n-input--disabled).n-input--warning-status .n-input__state-border {
border: var(--apm-input-border-warning);
}
.n-input-number.apm-input .n-input:not(.n-input--disabled).n-input--warning-status.n-input--focus .n-input__state-border {
border: var(--apm-input-border-focus-warning);
}
.n-input-number.apm-input .n-input:hover:not(.n-input--disabled).n-input--warning-status .n-input__state-border {
border: var(--apm-input-border-hover-warning);
}
.n-input-number.apm-input .n-input:not(.n-input--disabled).n-input--error-status .n-input__state-border {
border: var(--apm-input-border-error);
}
.n-input-number.apm-input .n-input:not(.n-input--disabled).n-input--error-status.n-input--focus .n-input__state-border {
border: var(--apm-input-border-focus-error);
}
.n-input-number.apm-input .n-input:hover:not(.n-input--disabled).n-input--error-status .n-input__state-border {
border: var(--apm-input-border-hover-error);
}
.n-input-number.apm-input .n-input:not(.n-input--disabled).n-input--active-status .n-input__state-border {
border: var(--apm-input-border-active);
}.n-input-number.apm-input .n-input .n-input__input-el,
.n-input-number.apm-input .n-input .n-input__placeholder,
.n-input-number.apm-input .n-input .n-input-word-count {
font-family: var(--apm-font-family);
font-weight: var(--apm-font-weight, 400);
font-style: var(--apm-font-style, normal);
-webkit-text-decoration: var(--apm-font-text-decoration, none);
text-decoration: var(--apm-font-text-decoration, none);
text-transform: var(--apm-text-transform, none);
text-align: var(--apm-text-align, left);
}
.n-input-number.apm-input .n-input.n-input--disabled .n-input__input-el,
.n-input-number.apm-input .n-input.n-input--disabled .n-input__placeholder,
.n-input-number.apm-input .n-input.n-input--disabled .n-input__suffix,
.n-input-number.apm-input .n-input.n-input--disabled .n-input-word-count {
color: var(--apm-text-color-disabled, inherit) !important;
}
.apm-input.n-input-number .n-input:not(.n-input--disabled) .n-input__placeholder {
color: var(--apm-placeholder-color, #767c82) !important;
}
.apm-input.n-input-number .n-input.n-input--disabled .n-input__placeholder {
color: var(--apm-placeholder-disabled-color, #767c82) !important;
}
.n-input-number.apm-input .n-input.n-input--disabled {
background-color: var(--apm-input-bg-color-disabled, transparent);
}
.n-input-number.apm-input .n-input.n-input--error-status.n-input--disabled.n-input--focus,
.n-input-number.apm-input .n-input.n-input--error-status.n-input--disabled:focus,
.n-input-number.apm-input .n-input.n-input--warning-status.n-input--disabled.n-input--focus,
.n-input-number.apm-input .n-input.n-input--warning-status.n-input--disabled:focus {
background-color: var(--apm-input-bg-color-disabled, transparent);
}.apm-select > .n-base-selection {
background-color: var(--apm-input-bg-color, white) !important;
border-radius: var(--apm-input-border-radius, var(--n-border-radius, 6px));
overflow: hidden;
font-size: var(--apm-font-size, 14px) !important;
line-height: 1 !important;
}
.apm-select > .n-base-selection .n-base-selection-label {
height: var(--apm-input-height, 34px);
vertical-align: middle;
}
.apm-select > .n-base-selection .n-base-selection-label,
.apm-select > .n-base-selection .n-base-selection-tags {
background-color: rgba(255, 255, 255, 0);
flex-wrap: nowrap;
}
.apm-select > .n-base-selection .n-base-selection-label .n-base-selection-input,
.apm-select > .n-base-selection .n-base-selection-tags .n-base-selection-input {
color: var(--n-option-text-color);
}
.apm-select > .n-base-selection .n-base-selection__border {
border: var(--apm-input-border, none);
}
.apm-select > .n-base-selection:not(.n-base-selection--disabled).n-base-selection__state-border {
border: none;
}
.apm-select > .n-base-selection:not(.n-base-selection--disabled).n-base-selection--focus .n-base-selection__state-border, .apm-select > .n-base-selection:not(.n-base-selection--disabled).n-base-selection--active .n-base-selection__state-border, .apm-select > .n-base-selection:not(.n-base-selection--disabled):hover .n-base-selection__state-border {
border: none;
}
.apm-select > .n-base-selection:not(.n-base-selection--disabled):hover .n-base-selection__border {
border: var(--apm-input-border-active, none);
}
.apm-select > .n-base-selection:not(.n-base-selection--disabled).n-base-selection--active .n-base-selection-label {
background-color: rgba(255, 255, 255, 0);
}
.apm-select > .n-base-selection:not(.n-base-selection--disabled).n-base-selection--none-status.n-base-selection--active .n-base-selection__border, .apm-select > .n-base-selection:not(.n-base-selection--disabled).n-base-selection--none-status.n-base-selection--focus .n-base-selection__border {
border: var(--apm-input-border-active, none);
}
.apm-select > .n-base-selection:not(.n-base-selection--disabled).n-base-selection--warning-status .n-base-selection__border {
border: var(--apm-input-border-warning);
}
.apm-select > .n-base-selection:not(.n-base-selection--disabled).n-base-selection--error-status .n-base-selection__border {
border: var(--apm-input-border-error);
}
.apm-select > .n-base-selection .n-base-select-option__content {
flex: 1;
}
.apm-select .n-base-selection .n-base-close {
color: var(--apm-close-icon-color, var(--n-close-icon-color));
font-size: var(--apm-font-size, 14px);
}
.apm-select .n-base-selection .n-base-suffix .n-base-suffix__arrow {
color: var(--apm-close-icon-color, var(--n-close-icon-color));
}
.apm-select .n-base-selection .n-base-selection-placeholder {
justify-content: var(--apm-text-align, flex-start) !important;
margin-right: var(--apm-placeholder-margin-right, 0) !important;
}
.apm-select .n-base-selection-tag-wrapper {
max-width: calc(100% - 25px);
}
.apm-select .n-base-selection-tag-wrapper .n-tag {
font-size: var(--apm-font-size, 14px);
}
.apm-select .n-tag,
.apm-select .n-base-selection .n-base-selection-label {
font-family: var(--apm-font-family);
font-weight: var(--apm-font-weight, 400);
font-style: var(--apm-font-style, normal);
letter-spacing: 0;
line-height: inherit;
-webkit-text-decoration: var(--apm-font-text-decoration, none);
text-decoration: var(--apm-font-text-decoration, none);
text-transform: var(--apm-text-transform, none);
}
.n-base-select-option .n-base-select-option__content {
flex: 1;
}
.n-base-selection-label,
.n-base-select-option:not(.n-base-select-option--selected) .apm-select-option-label {
color: var(--apm-text-color);
}
.apm-select-option-label {
width: 100%;
display: flex;
align-items: center;
gap: 4px;
padding-right: var(--apm-padding-right, 0);
font-family: var(--apm-font-family);
font-size: var(--apm-font-size, 14px);
font-weight: var(--apm-font-weight, 400);
font-style: var(--apm-font-style, normal);
text-align: var(--apm-text-align, left);
text-transform: var(--apm-text-transform, none);
-webkit-text-decoration: var(--apm-font-text-decoration, none);
text-decoration: var(--apm-font-text-decoration, none);
}
.apm-select-option-label > p {
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.apm-select-option-label ~ .n-base-icon.n-base-select-option__check {
font-size: var(--apm-font-size, 14px);
font-weight: var(--apm-font-weight, 400);
}
.apm-custom-menu {
border-radius: 6px;
}
.apm-select .n-base-selection.n-base-selection--active .n-base-selection-tags,
.apm-select .n-base-selection.n-base-selection--focus .n-base-selection-tags {
flex-wrap: wrap;
}
.apm-select .n-base-selection-input {
flex: 1 1 60px;
min-width: 60px;
}.apm-datepicker.n-date-picker {
width: 100%;
}
.apm-datepicker.n-date-picker > .n-input .n-input__placeholder,
.apm-timepicker.n-time-picker > .n-input .n-input__placeholder {
font-family: var(--apm-font-family);
font-weight: var(--apm-font-weight, 400);
font-size: var(--apm-font-size, 14px);
font-style: var(--apm-font-style, normal);
-webkit-text-decoration: var(--apm-font-text-decoration, none);
text-decoration: var(--apm-font-text-decoration, none);
text-decoration-color: var(--apm-font-text-decoration-color);
text-transform: var(--apm-text-transform, none);
text-shadow: var(--apm-font-text-shadow, none);
text-align: var(--apm-text-align, left);
}
.apm-datepicker.n-date-picker > .n-input .n-input__input-el,
.apm-datepicker.n-time-picker > .n-input .n-input__input-el,
.apm-datepicker.n-date-picker > .n-input .n-date-picker-icon {
font-family: var(--apm-font-family);
font-weight: var(--apm-font-weight, 400);
font-size: var(--apm-font-size, 14px);
font-style: var(--apm-font-style, normal);
-webkit-text-decoration: var(--apm-font-text-decoration, none);
text-decoration: var(--apm-font-text-decoration, none);
text-decoration-color: var(--apm-font-text-decoration-color);
text-transform: var(--apm-text-transform, none);
text-shadow: var(--apm-font-text-shadow, none);
text-align: var(--apm-text-align, left);
}
.apm-datepicker.n-date-picker > .n-input:not(.n-input--disabled) .n-input__input-el,
.apm-datepicker.n-date-picker > .n-input:not(.n-input--disabled) .n-date-picker-icon,
.apm-timepicker.n-time-picker > .n-input:not(.n-input--disabled) .n-input__suffix,
.apm-datepicker.n-date-picker > .n-input:not(.n-input--disabled) .n-date-picker-icon {
color: var(--apm-text-color);
}
.apm-datepicker.n-date-picker > .n-input.n-input--disabled .n-input__input-el,
.apm-datepicker.n-date-picker > .n-input.n-input--disabled .n-date-picker-icon,
.apm-timepicker.n-time-picker > .n-input.n-input--disabled .n-input__suffix,
.apm-datepicker.n-time-picker > .n-input.n-input--disabled .n-time-picker-icon,
.apm-datepicker.n-date-picker > .n-input.n-input--disabled .n-date-picker-icon {
color: var(--apm-text-color-disabled) !important;
}
.apm-datepicker.n-date-picker > .n-input {
border-radius: var(--apm-input-border-radius, 6px);
}
.apm-timepicker.n-time-picker {
width: 100%;
}
.apm-timepicker.n-time-picker > .n-input .n-input__input-el,
.apm-datepicker.n-date-picker > .n-input .n-input__input-el {
height: 100%;
min-height: var(--n-height);
}
.apm-timepicker.n-time-picker > .n-input,
.apm-datepicker.n-date-picker > .n-input {
border-radius: var(--apm-input-border-radius, 6px);
background-color: var(--apm-input-bg-color);
}
.apm-timepicker.n-time-picker > .n-input.n-input--disabled,
.apm-datepicker.n-date-picker > .n-input.n-input--disabled {
background-color: var(--apm-input-bg-color-disabled);
}
.apm-timepicker.n-time-picker > .n-input:not(.n-input--disabled).n-input--focus,
.apm-datepicker.n-date-picker > .n-input:not(.n-input--disabled).n-input--focus {
background-color: var(--apm-input-bg-color);
}
.apm-timepicker.n-time-picker > .n-input:not(.n-input--disabled).n-input--none-status .n-input__state-border, .apm-timepicker.n-time-picker > .n-input:not(.n-input--disabled).n-input--success-status .n-input__state-border,
.apm-datepicker.n-date-picker > .n-input:not(.n-input--disabled).n-input--none-status .n-input__state-border,
.apm-datepicker.n-date-picker > .n-input:not(.n-input--disabled).n-input--success-status .n-input__state-border {
border: var(--apm-input-border);
}
.apm-timepicker.n-time-picker > .n-input:hover:not(.n-input--disabled):not(.n-input--focus).n-input--none-status .n-input__state-border, .apm-timepicker.n-time-picker > .n-input:hover:not(.n-input--disabled):not(.n-input--focus).n-input--success-status .n-input__state-border,
.apm-datepicker.n-date-picker > .n-input:hover:not(.n-input--disabled):not(.n-input--focus).n-input--none-status .n-input__state-border,
.apm-datepicker.n-date-picker > .n-input:hover:not(.n-input--disabled):not(.n-input--focus).n-input--success-status .n-input__state-border {
border: var(--apm-input-border-hover);
}
.apm-timepicker.n-time-picker > .n-input:not(.n-input--disabled).n-input--focus .n-input__state-border,
.apm-datepicker.n-date-picker > .n-input:not(.n-input--disabled).n-input--focus .n-input__state-border {
border: var(--apm-input-border-focus);
}
.apm-timepicker.n-time-picker > .n-input.n-input--disabled .n-input__state-border,
.apm-datepicker.n-date-picker > .n-input.n-input--disabled .n-input__state-border {
border: var(--apm-input-border-disabled);
}
.apm-timepicker.n-time-picker > .n-input:not(.n-input--disabled).n-input--warning-status .n-input__state-border,
.apm-datepicker.n-date-picker > .n-input:not(.n-input--disabled).n-input--warning-status .n-input__state-border {
border: var(--apm-input-border-warning);
}
.apm-timepicker.n-time-picker > .n-input:not(.n-input--disabled).n-input--warning-status.n-input--focus .n-input__state-border,
.apm-datepicker.n-date-picker > .n-input:not(.n-input--disabled).n-input--warning-status.n-input--focus .n-input__state-border {
border: var(--apm-input-border-focus-warning);
}
.apm-timepicker.n-time-picker > .n-input:hover:not(.n-input--disabled).n-input--warning-status .n-input__state-border,
.apm-datepicker.n-date-picker > .n-input:hover:not(.n-input--disabled).n-input--warning-status .n-input__state-border {
border: var(--apm-input-border-hover-warning);
}
.apm-timepicker.n-time-picker > .n-input:not(.n-input--disabled).n-input--error-status .n-input__state-border,
.apm-datepicker.n-date-picker > .n-input:not(.n-input--disabled).n-input--error-status .n-input__state-border {
border: var(--apm-input-border-error);
}
.apm-timepicker.n-time-picker > .n-input:not(.n-input--disabled).n-input--error-status.n-input--focus .n-input__state-border,
.apm-datepicker.n-date-picker > .n-input:not(.n-input--disabled).n-input--error-status.n-input--focus .n-input__state-border {
border: var(--apm-input-border-focus-error);
}
.apm-timepicker.n-time-picker > .n-input:hover:not(.n-input--disabled).n-input--error-status .n-input__state-border,
.apm-datepicker.n-date-picker > .n-input:hover:not(.n-input--disabled).n-input--error-status .n-input__state-border {
border: var(--apm-input-border-hover-error);
}
.apm-timepicker.n-time-picker > .n-input:not(.n-input--disabled).n-input--active-status .n-input__state-border,
.apm-datepicker.n-date-picker > .n-input:not(.n-input--disabled).n-input--active-status .n-input__state-border {
border: var(--apm-input-border-active);
}.apm-collapse.n-collapse .n-collapse-item .n-collapse-item__header .n-collapse-item-arrow {
display: none !important;
width: 0;
height: 0;
overflow: hidden;
}
.apm-collapse.n-collapse .n-collapse-item.n-collapse-item--left-arrow-placement .n-collapse-item__header .n-collapse-item-arrow {
margin-right: 0;
}
.apm-collapse.n-collapse .n-collapse-item {
width: 100%;
}
.apm-collapse.n-collapse .n-collapse-item .n-collapse-item__content-wrapper .n-collapse-item__content-inner {
padding-top: 0;
}
.apm-collapse.n-collapse .n-collapse-item .n-collapse-item {
margin-left: 0;
}.sx__calendar-wrapper ul,
.sx__date-picker-wrapper ul,
.sx__date-picker-popup ul {
list-style: none;
padding: 0;
}
.sx__calendar-wrapper input,
.sx__calendar-wrapper button,
.sx__date-picker-wrapper input,
.sx__date-picker-wrapper button,
.sx__date-picker-popup input,
.sx__date-picker-popup button {
font-family: inherit;
outline: none;
}
.sx__calendar-wrapper button,
.sx__date-picker-wrapper button,
.sx__date-picker-popup button {
background-color: inherit;
outline: 0;
border: none;
cursor: pointer;
}
:root {
--sx-color-primary: #6750a4;
--sx-color-on-primary: #fff;
--sx-color-primary-container: #eaddff;
--sx-color-on-primary-container: #21005e;
--sx-color-secondary: #625b71;
--sx-color-on-secondary: #fff;
--sx-color-secondary-container: #e8def8;
--sx-color-on-secondary-container: #1e192b;
--sx-color-tertiary: #7d5260;
--sx-color-on-tertiary: #fff;
--sx-color-tertiary-container: #ffd8e4;
--sx-color-on-tertiary-container: #370b1e;
--sx-color-surface: #fef7ff;
--sx-color-surface-dim: #ded8e1;
--sx-color-surface-bright: #fef7ff;
--sx-color-on-surface: #1c1b1f;
--sx-color-surface-container: #f3edf7;
--sx-color-surface-container-low: #f7f2fa;
--sx-color-surface-container-high: #ece6f0;
--sx-color-background: #fff;
--sx-color-on-background: #1c1b1f;
--sx-color-outline: #79747e;
--sx-color-outline-variant: #c4c7c5;
--sx-color-shadow: #000;
--sx-color-surface-tint: #6750a4;
--sx-color-neutral: var(--sx-color-outline);
--sx-color-neutral-variant: var(--sx-color-outline-variant);
--sx-internal-color-gray-ripple-background: #e0e0e0;
--sx-internal-color-light-gray: #fafafa;
--sx-internal-color-text: #000;
}
.is-dark {
--sx-color-primary: #d0bcff;
--sx-color-on-primary: #371e73;
--sx-color-primary-container: #4f378b;
--sx-color-on-primary-container: #eaddff;
--sx-color-secondary: #ccc2dc;
--sx-color-on-secondary: #332d41;
--sx-color-secondary-container: #4a4458;
--sx-color-on-secondary-container: #e8def8;
--sx-color-tertiary: #efb8c8;
--sx-color-on-tertiary: #492532;
--sx-color-tertiary-container: #633b48;
--sx-color-on-tertiary-container: #ffd8e4;
--sx-color-surface: #141218;
--sx-color-surface-dim: #141218;
--sx-color-surface-bright: #3b383e;
--sx-color-on-surface: #e6e1e5;
--sx-color-surface-container: #211f26;
--sx-color-surface-container-low: #1d1b20;
--sx-color-surface-container-high: #2b2930;
--sx-color-background: #141218;
--sx-color-on-background: #e6e1e5;
--sx-color-outline: #938f99;
--sx-color-outline-variant: #444746;
--sx-color-shadow: #000;
--sx-color-surface-tint: #d0bcff;
--sx-internal-color-text: #fff;
}
:root {
--sx-spacing-padding1: 4px;
--sx-spacing-padding2: 8px;
--sx-spacing-padding3: 12px;
--sx-spacing-padding4: 16px;
--sx-spacing-padding6: 24px;
--sx-spacing-modal-padding: 16px;
--sx-box-shadow-level3: 0 3px 6px 0 rgb(0 0 0 / 16%),
0 3px 6px 0 rgb(0 0 0 / 23%);
--sx-rounding-extra-small: 4px;
--sx-rounding-small: 8px;
--sx-rounding-extra-large: 28px;
--sx-border: 1px solid var(--sx-color-outline-variant);
}
.is-dark {
--sx-border: 1px solid var(--sx-color-outline-variant);
}
:root {
--sx-font-small: 0.875rem;
--sx-font-extra-small: 0.75rem;
--sx-font-large: 1.125rem;
--sx-font-extra-large: 1.25rem;
}
@keyframes sx-ripple {
0% {
width: 0;
height: 0;
opacity: 0.16;
}
40% {
width: 100px;
height: 100px;
opacity: 0.08;
}
100% {
width: 150px;
height: 150px;
opacity: 0;
}
}
.sx__ripple {
position: relative;
overflow: hidden;
}
.sx__ripple::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color: currentcolor;
opacity: 0.1;
visibility: hidden;
z-index: 2;
}
.sx__ripple:active::before {
visibility: visible;
}
.sx__ripple:not(:active)::before {
animation: sx-ripple 0.75s cubic-bezier(0, 0.1, 0.8, 1);
transition: visibility 0.75s step-end;
}
@keyframes sx-ripple-wide {
0% {
width: 0;
height: 0;
opacity: 0.16;
}
40% {
width: 300px;
height: 100px;
opacity: 0.08;
}
100% {
width: 450px;
height: 150px;
opacity: 0;
}
}
.sx__ripple--wide {
position: relative;
overflow: hidden;
}
.sx__ripple--wide::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color: currentcolor;
opacity: 0.1;
visibility: hidden;
z-index: 2;
}
.sx__ripple--wide:active::before {
visibility: visible;
}
.sx__ripple--wide::before {
border-radius: var(--sx-rounding-small);
}
.sx__ripple--wide:not(:active)::before {
animation: sx-ripple-wide 0.75s cubic-bezier(0, 0.1, 0.8, 1);
transition: visibility 0.75s step-end;
}
.sx__chevron-wrapper {
position: relative;
border-radius: 50%;
min-height: 48px;
min-width: 48px;
cursor: pointer;
transition: background-color 0.2s ease-in-out;
font-size: 0;
}
.sx__chevron-wrapper:active {
background-color: var(--sx-internal-color-gray-ripple-background);
}
.sx__chevron-wrapper:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.sx__chevron-wrapper:hover, .sx__chevron-wrapper:focus {
background-color: var(--sx-color-surface-dim);
}
.is-dark .sx__chevron-wrapper:hover, .is-dark .sx__chevron-wrapper:focus {
background-color: var(--sx-color-surface-container-high);
}
.sx__chevron-wrapper .sx__chevron {
position: absolute;
top: 50%;
width: 0.6rem;
height: 0.6rem;
border-width: 0.2rem 0.2rem 0 0;
border-style: solid;
border-color: var(--sx-internal-color-text);
}
.sx__chevron--previous {
left: calc(50% + 0.125rem);
transform: translate(-50%, -50%) rotate(225deg);
}
[dir=rtl] .sx__chevron--previous {
left: calc(50% - 0.125rem);
transform: translate(-50%, -50%) rotate(45deg);
}
.sx__chevron--next {
left: calc(50% - 0.125rem);
transform: translate(-50%, -50%) rotate(45deg);
}
[dir=rtl] .sx__chevron--next {
left: calc(50% + 0.125rem);
transform: translate(-50%, -50%) rotate(225deg);
}
.sx__date-picker-wrapper {
position: relative;
color: var(--sx-color-on-background);
width: -moz-fit-content;
width: fit-content;
}
.sx__date-picker-wrapper.has-full-width {
width: 100%;
}
.sx__date-picker-wrapper.is-disabled {
opacity: 0.5;
cursor: not-allowed;
}
.sx__date-picker-wrapper * {
color: var(--sx-color-on-background);
box-sizing: border-box;
}
.sx__date-input-wrapper {
position: relative;
}
.sx__date-input-chevron-wrapper {
position: absolute;
top: 50%;
right: 1rem;
transform: translateY(-50%);
display: flex;
align-items: center;
padding: 0;
transition: transform 0.2s ease-in-out;
}
.sx__date-input-chevron-wrapper:focus {
border: 2px solid var(--sx-color-primary);
}
.is-disabled .sx__date-input-chevron-wrapper {
pointer-events: none;
cursor: not-allowed;
}
.sx__date-input--active .sx__date-input-chevron-wrapper {
transform: translateY(-50%) rotate(180deg);
}
[dir=rtl] .sx__date-input-chevron-wrapper {
left: 1rem;
right: auto;
}
.sx__date-input-chevron {
width: 1rem;
height: 1rem;
pointer-events: none;
}
.sx__date-input {
font-size: 1rem;
padding: var(--sx-spacing-padding4);
border: var(--sx-border);
border-radius: var(--sx-rounding-extra-small);
cursor: pointer;
background-color: var(--sx-color-background);
width: 100%;
}
.is-disabled .sx__date-input {
pointer-events: none;
}
.sx__date-input--active .sx__date-input {
border-color: var(--sx-color-primary);
outline: 1px solid var(--sx-color-primary);
}
.sx__date-input-label {
position: absolute;
top: 0;
inset-inline-start: 12px;
padding: 0 var(--sx-spacing-padding1);
background-color: var(--sx-color-background);
font-size: 0.75rem;
color: var(--sx-color-neutral);
line-height: 1rem;
transform: translateY(-50%);
transition: transform 0.2s ease-in-out;
pointer-events: none;
}
.sx__date-input--active .sx__date-input-label {
color: var(--sx-color-primary);
}
.is-dark .sx__date-input-label {
display: none;
}
.sx__date-picker-popup {
position: absolute;
height: -moz-fit-content;
height: fit-content;
z-index: 1;
top: calc(100% + 1px);
width: 20.75rem;
max-width: 500px;
max-height: 400px;
overflow: scroll;
box-shadow: var(--sx-box-shadow-level3);
padding: var(--sx-spacing-modal-padding);
background-color: var(--sx-color-background);
color: var(--sx-internal-color-text);
}
.sx__date-picker-popup.is-dark {
background-color: var(--sx-color-surface-container-high);
}
.sx__date-picker-popup.bottom-end {
left: auto;
right: 0;
transform: translateX(0);
}
.sx__date-picker-popup.top-start {
inset: auto auto calc(100% + 1rem) 0;
transform: translateX(0);
}
.sx__date-picker-popup.top-end {
inset: auto 0 calc(100% + 1rem) auto;
transform: translateX(0);
}
.sx__date-picker__years-view {
margin: 0;
}
.sx__date-picker__years-accordion__expand-button {
width: 100%;
border-radius: 0;
background-color: transparent;
font-size: 1rem;
padding: 1em;
transition: background-color 0.2s ease-in-out;
color: var(--sx-internal-color-text);
}
.sx__is-expanded .sx__date-picker__years-accordion__expand-button {
background-color: var(--sx-color-surface-container);
}
.sx__date-picker__years-accordion__expand-button:hover {
background-color: var(--sx-color-surface-dim);
}
.sx__date-picker__years-accordion__expand-button:active {
background-color: var(--sx-internal-color-gray-ripple-background);
}
.sx__date-picker__years-view-accordion__panel {
display: flex;
flex-wrap: wrap;
}
.sx__date-picker__years-view-accordion__month {
flex: 1 0 33.3333%;
background-color: transparent;
border: 0;
font-size: 0.9rem;
padding: 0.5em 0;
border-radius: 25px;
color: var(--sx-internal-color-text);
}
.sx__date-picker__years-view-accordion__month:hover {
background-color: var(--sx-color-primary);
color: var(--sx-color-on-primary);
}
.sx__date-picker__day-names {
display: flex;
width: 100%;
justify-content: space-evenly;
margin-bottom: 0.5em;
}
.sx__date-picker__day-names .sx__date-picker__day,
.sx__date-picker__day-names .sx__date-picker__day-name {
flex: 1;
text-align: center;
}
.sx__date-picker__day-name {
font-weight: 700;
color: var(--sx-color-neutral-variant);
}
.sx__date-picker__month-view-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1em;
}
.sx__date-picker__month-view-header .sx__chevron-wrapper:hover {
background-color: var(--sx-color-surface-dim);
}
.sx__date-picker__month-view-header__month-year {
font-size: 1.5rem;
font-weight: 300;
color: var(--sx-internal-color-text);
}
.sx__date-picker__month-view-header__month-year:hover {
color: var(--sx-color-primary);
text-decoration: underline;
}
.sx__date-picker__week {
display: flex;
width: 100%;
justify-content: space-evenly;
margin-bottom: 0.5em;
}
.sx__date-picker__week .sx__date-picker__day,
.sx__date-picker__week .sx__date-picker__day-name {
flex: 1;
text-align: center;
}
.sx__date-picker__day {
background-color: transparent;
border-radius: 50%;
width: 2.5rem;
height: 2.5rem;
color: var(--sx-internal-color-text);
}
.sx__date-picker__day:hover {
background-color: var(--sx-color-surface-dim);
}
.sx__date-picker__day:focus {
outline-offset: -2px;
outline: 2px solid var(--sx-color-primary);
}
.sx__date-picker__day:disabled {
color: var(--sx-color-neutral-variant);
cursor: not-allowed;
}
.sx__date-picker__day.is-leading-or-trailing {
color: var(--sx-color-neutral-variant);
}
.sx__date-picker__day.sx__date-picker__day--selected {
background-color: var(--sx-color-primary-container);
color: var(--sx-color-on-primary-container);
}
.sx__date-picker__day.sx__date-picker__day--today {
background-color: var(--sx-color-primary);
color: var(--sx-color-on-primary);
}
:root {
--sx-calendar-header-input-font-size: clamp(12px, 0.875rem, 28px);
--sx-calendar-header-popup-z-index: 3;
--sx-calendar-week-grid-padding-left: 75px;
}
:root .sx__date-picker-popup.is-teleported {
z-index: 3;
}
.sx__calendar-wrapper {
height: 100%;
display: flex;
color: var(--sx-internal-color-text);
}
.sx__calendar-wrapper * {
box-sizing: border-box;
}
.sx__calendar {
position: relative;
flex: 1;
height: 100%;
border: var(--sx-border);
border-radius: var(--sx-rounding-small);
display: flex;
flex-flow: column;
background-color: var(--sx-color-background);
overflow: hidden;
}
.sx__view-container {
position: relative;
flex: 1;
overflow-y: auto;
scroll-behavior: smooth;
}
.sx__slide-left {
animation: sx-slide-left 0.3s ease-out;
}
@keyframes sx-slide-left {
0% {
transform: translateX(8%);
filter: blur(0.25rem);
opacity: 0.1;
}
100% {
transform: translateX(0);
filter: blur(0);
opacity: 1;
}
}
.sx__slide-right {
animation: sx-slide-right 0.3s ease-out;
}
@keyframes sx-slide-right {
0% {
transform: translateX(-8%);
filter: blur(0.25rem);
opacity: 0.1;
}
100% {
transform: translateX(0);
filter: blur(0);
opacity: 1;
}
}
.sx__calendar-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: var(--sx-spacing-padding4);
gap: var(--sx-spacing-padding4);
}
.sx__calendar-header .sx__date-input {
padding: var(--sx-spacing-padding3) var(--sx-spacing-padding4);
font-size: var(--sx-calendar-header-input-font-size);
}
.sx__calendar-header .sx__date-picker-popup {
z-index: var(--sx-calendar-header-popup-z-index);
}
.sx__calendar-header-content {
display: flex;
align-items: center;
gap: var(--sx-spacing-padding4);
}
.sx__forward-backward-navigation {
height: 45px;
}
.sx__is-calendar-small .sx__forward-backward-navigation, .is-list-view .sx__forward-backward-navigation {
display: none;
}
.sx__calendar-header__week-number {
border-radius: 4px;
background-color: #eceef1;
color: var(--sx-color-on-surface);
padding: var(--sx-spacing-padding1) var(--sx-spacing-padding2);
font-size: 0.75rem;
font-weight: 500;
}
.is-dark .sx__calendar-header__week-number {
background-color: #4a4458;
}
.sx__range-heading {
font-size: clamp(16px, 1.25rem, 24px);
}
.sx__is-calendar-small .sx__range-heading {
font-size: 16px;
}
.is-list-view .sx__range-heading {
display: none;
}
.sx__today-button {
padding: var(--sx-spacing-padding3) var(--sx-spacing-padding4);
border-radius: var(--sx-rounding-extra-small);
font-size: var(--sx-calendar-header-input-font-size);
color: var(--sx-internal-color-text);
}
.sx__today-button:active {
background-color: var(--sx-internal-color-gray-ripple-background);
}
.sx__is-calendar-small .sx__today-button {
display: none;
}
.sx__calendar-header .sx__today-button {
border: var(--sx-border);
}
.sx__today-button:hover, .sx__today-button:focus {
background-color: var(--sx-internal-color-light-gray);
}
.is-dark .sx__today-button:hover, .is-dark .sx__today-button:focus {
background-color: var(--sx-color-surface-container-low);
}
.sx__view-selection {
position: relative;
font-size: var(--sx-calendar-header-input-font-size);
}
.sx__view-selection-selected-item {
height: 100%;
width: -moz-fit-content;
width: fit-content;
padding: var(--sx-spacing-padding3) var(--sx-spacing-padding4);
cursor: pointer;
border-radius: var(--sx-rounding-extra-small);
border: var(--sx-border);
}
.sx__view-selection-selected-item:hover {
background-color: var(--sx-internal-color-light-gray);
}
.is-dark .sx__view-selection-selected-item:hover {
background-color: var(--sx-color-surface-container-low);
}
.sx__view-selection-items {
position: absolute;
top: 100%;
box-shadow: var(--sx-box-shadow-level3);
margin: 0;
background-color: var(--sx-color-background);
z-index: var(--sx-calendar-header-popup-z-index);
}
.is-dark .sx__view-selection-items {
background-color: var(--sx-color-surface-container-high);
}
.sx__view-selection-item {
padding: var(--sx-spacing-padding4) var(--sx-spacing-padding6);
cursor: pointer;
}
.sx__view-selection-item:hover, .sx__view-selection-item:focus {
background-color: var(--sx-color-primary);
color: var(--sx-color-on-primary);
}
.sx__view-selection-item.is-selected {
background-color: var(--sx-color-surface-dim);
}
.sx__view-selection-item.is-selected:hover, .sx__view-selection-item.is-selected:focus {
background-color: var(--sx-color-primary);
color: var(--sx-color-on-primary);
}
.sx__month-grid-wrapper {
display: flex;
flex-flow: column;
height: 100%;
}
.sx__month-grid-week__week-number {
display: flex;
justify-content: center;
padding-top: 12px;
background-color: #eceef1;
color: var(--sx-color-on-surface);
width: 1.5rem;
font-size: 0.75rem;
}
.is-dark .sx__month-grid-week__week-number {
background-color: #4a4458;
}
.sx__month-grid-week {
border-top: var(--sx-border);
flex: 1;
display: flex;
}
.sx__month-grid-week:first-child .sx__month-grid-week__week-number {
padding-top: 26px;
}
.sx__month-grid-day {
position: relative;
padding: var(--sx-spacing-padding2) 0;
flex: 1;
}
.sx__month-grid-day:not(:last-child) {
border-inline-end: var(--sx-border);
}
.sx__month-grid-day--dragover {
background-color: var(--sx-color-surface-container);
}
.sx__month-grid-day__header {
display: flex;
flex-flow: column;
align-items: center;
}
.sx__month-grid-day__header-day-name {
font-size: 11px;
text-transform: uppercase;
color: var(--sx-color-neutral);
}
.sx__month-grid-day__header-date {
font-size: var(--sx-font-extra-small);
margin-bottom: var(--sx-spacing-padding1);
border-radius: 50%;
height: 24px;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.sx__month-grid-day__header-date.sx__is-today {
background-color: var(--sx-color-primary);
color: var(--sx-color-on-primary);
}
.sx__month-grid-day__events-more {
width: calc(100% - 10px);
font-size: var(--sx-font-extra-small);
color: var(--sx-color-neutral);
margin: var(--sx-spacing-padding1) 0;
padding: var(--sx-spacing-padding1);
border-radius: var(--sx-rounding-extra-small);
cursor: pointer;
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.sx__month-grid-day__events-more:hover {
background-color: var(--sx-color-surface-container);
color: var(--sx-color-on-surface);
}
.sx__month-grid-background-event {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.sx__month-grid-day__events {
display: grid;
grid-gap: 4px;
}
.sx__month-grid-cell {
height: clamp(20px, 1.25rem, 24px);
}
.sx__month-grid-event {
position: relative;
display: flex;
align-items: center;
padding: var(--sx-spacing-padding1);
border-radius: var(--sx-rounding-extra-small);
font-size: clamp(12px, var(--sx-font-extra-small), 14px);
overflow: hidden;
white-space: nowrap;
z-index: 1;
}
.sx__month-grid-event.is-event-new {
animation: sx-grow-event 0.3s ease-in-out forwards;
}
@keyframes sx-grow-event {
0% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.sx__month-grid-event-time {
margin-right: 4px;
}
.sx__month-grid-blocker {
pointer-events: none;
}
.sx__month-agenda-week {
display: flex;
}
.sx__month-agenda-week:not(:first-child) {
border-top: var(--sx-border);
}
.sx__month-agenda-week__week-number {
text-align: center;
background-color: #eceef1;
color: var(--sx-color-on-surface);
width: 1.5rem;
font-size: 0.75rem;
padding-top: 9px;
}
.is-dark .sx__month-agenda-week__week-number {
background-color: #4a4458;
}
.sx__month-agenda-day {
padding: var(--sx-spacing-padding2);
flex: 1;
display: flex;
flex-flow: column;
align-items: center;
height: 3rem;
border-radius: var(--sx-rounding-extra-small);
color: var(--sx-internal-color-text);
}
.sx__month-agenda-day--active {
box-shadow: inset 0 0 0 3px var(--sx-color-primary);
}
.sx__month-agenda-day__event-icons {
margin-top: 4px;
display: flex;
grid-gap: 3px;
}
.sx__month-agenda-day__event-icon {
height: 6px;
width: 6px;
border-radius: 50%;
filter: brightness(1.6);
}
.is-dark .sx__month-agenda-day__event-icon {
filter: initial;
}
.sx__month-agenda-day-names {
display: flex;
padding: var(--sx-spacing-padding2) 0;
font-size: var(--sx-font-extra-small);
color: var(--sx-color-neutral);
}
.sx__month-agenda-day-names.sx__has-week-numbers {
padding-inline-start: 1.5rem;
}
.sx__month-agenda-day-name {
flex: 1;
display: flex;
justify-content: center;
}
.sx__month-agenda-events {
padding: 0 var(--sx-spacing-padding2);
}
.sx__month-agenda-event {
padding: var(--sx-spacing-padding2);
margin-bottom: var(--sx-spacing-padding2);
border-radius: var(--sx-rounding-extra-small);
font-size: var(--sx-font-small);
}
.sx__month-agenda-event.is-event-new {
animation: sx-grow-event 0.3s ease-in-out forwards;
}
@keyframes sx-grow-event {
0% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.sx__month-agenda-event:first-child {
margin-top: var(--sx-spacing-padding2);
}
.sx__month-agenda-event__title {
font-weight: 600;
}
.sx__month-agenda-event__has-icon {
display: flex;
align-items: center;
}
.sx__month-agenda-events__empty {
margin-top: var(--sx-spacing-padding4);
display: flex;
justify-content: center;
}
.sx__week-wrapper {
position: relative;
}
.sx__week-grid {
position: relative;
padding-left: var(--sx-calendar-week-grid-padding-left);
display: flex;
height: var(--sx-week-grid-height);
overflow: hidden;
}
.sx__week-header {
position: sticky;
top: 0;
z-index: 2;
background-color: var(--sx-color-background);
}
.sx__week-header-content {
position: relative;
}
.sx__week-header-border {
position: absolute;
width: 100%;
bottom: 0;
border-bottom: var(--sx-border);
border-left: 250px solid transparent;
}
.sx__list-wrapper {
padding: 0;
background-color: var(--sx-color-background);
height: 100%;
overflow-y: auto;
position: relative;
scroll-behavior: smooth;
}
.sx__list-day {
padding: 0;
background-color: var(--sx-color-background);
will-change: opacity;
transform: translateZ(0);
}
.sx__list-day-header {
padding: var(--sx-spacing-padding2) var(--sx-spacing-padding4);
background-color: var(--sx-color-surface-container-low);
position: sticky;
top: 0;
z-index: 1;
}
.sx__list-day-date {
font-size: var(--sx-font-extra-small);
font-weight: 600;
color: var(--sx-color-neutral);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sx__list-day-events {
padding: 0 16px;
background: var(--sx-color-background);
}
.sx__list-event {
padding: 0.75rem 0;
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.sx__list-event:not(:first-child) {
border-top: var(--sx-border);
}
.sx__list-event-color-line {
width: 3px;
height: 24px;
border-radius: 2px;
flex-shrink: 0;
}
.sx__list-event-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 100%;
}
.sx__list-event-title {
font-size: 1em;
color: var(--sx-color-on-background);
flex: 1;
}
.sx__list-event-times {
display: flex;
flex-direction: column;
align-items: flex-end;
min-width: 80px;
gap: 2px;
}
.sx__list-event-start-time {
font-size: 0.85em;
color: var(--sx-color-on-background);
}
.sx__list-event-end-time {
font-size: 0.85em;
color: var(--sx-color-neutral);
}
.sx__list-event-arrow {
font-size: 0.85em;
color: var(--sx-color-neutral);
line-height: 1;
}
.sx__list-event-all-day {
font-size: 0.85em;
color: var(--sx-color-neutral);
}
.sx__list-day-margin {
height: 16px;
}
.sx__list-no-events {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--sx-color-neutral);
font-size: var(--sx-font-extra-small);
text-align: center;
}
.sx__week-grid__time-axis {
display: flex;
flex-flow: column;
position: absolute;
right: 0;
top: var(--sx-week-grid-offset-top);
width: calc(100% - 60px);
}
.sx__week-grid__hour {
position: relative;
height: var(--sx-week-grid-hour-height);
border-top: var(--sx-border);
font-size: var(--sx-font-extra-small);
}
.sx__week-grid__hour:first-child {
visibility: hidden;
}
.sx__week-grid__hour-text {
position: absolute;
left: -43px;
top: -0.75em;
color: var(--sx-color-neutral);
}
.sx__time-grid-day {
position: relative;
width: 100%;
height: 100%;
border-left: var(--sx-border);
}
.sx__week-grid__date-axis {
padding-left: var(--sx-calendar-week-grid-padding-left);
display: flex;
}
.sx__week-grid__date {
flex: 1;
display: flex;
flex-flow: column;
align-items: center;
padding: var(--sx-spacing-padding3) 0;
gap: var(--sx-spacing-padding1);
}
.sx__week-grid__day-name {
text-transform: uppercase;
font-size: var(--sx-font-extra-small);
color: var(--sx-color-neutral);
font-weight: 500;
}
.sx__week-grid__date--is-today .sx__week-grid__day-name {
color: var(--sx-color-primary);
font-weight: 700;
}
.sx__week-grid__date-number {
display: flex;
align-items: center;
justify-content: center;
font-size: var(--sx-font-extra-large);
font-weight: 500;
color: var(--sx-color-neutral);
height: 2em;
width: 2em;
}
.sx__week-grid__date--is-today .sx__week-grid__date-number {
background-color: var(--sx-color-primary);
color: var(--sx-color-on-primary);
border-radius: 50%;
}
.sx__time-grid-event {
width: calc(100% - 10px);
padding: var(--sx-spacing-padding1);
position: absolute;
border-radius: var(--sx-rounding-extra-small);
font-size: var(--sx-font-extra-small);
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.sx__time-grid-event.is-event-copy {
opacity: 0.5;
box-shadow: var(--sx-box-shadow-level3);
z-index: 1;
transition: transform 0.15s ease-in-out;
}
.sx__time-grid-event.is-event-new {
animation: sx-grow-event 0.3s ease-in-out forwards;
}
@keyframes sx-grow-event {
0% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
[data-has-dnd=true] .sx__time-grid-event {
touch-action: none;
}
.sx__is-resizing .sx__time-grid-event:has(+ .is-event-copy) {
opacity: 0;
}
.sx__is-resizing .is-event-copy {
opacity: 1;
}
.sx__time-grid-event-inner {
position: relative;
height: 100%;
}
.sx__time-grid-event-resize-handle {
display: block;
position: absolute;
width: 100%;
bottom: 0;
cursor: ns-resize;
height: clamp(10px, 20px, 50%);
touch-action: none;
}
.sx__time-grid-event-title {
font-weight: 600;
}
.sx__time-grid-event-time,
.sx__time-grid-event-people,
.sx__time-grid-event-location {
display: flex;
align-items: center;
white-space: nowrap;
}
.sx__event-icon {
min-width: 15px;
min-height: 15px;
max-width: 15px;
max-height: 15px;
margin-inline-end: var(--sx-spacing-padding2);
}
.sx__date-grid {
display: flex;
padding-left: var(--sx-calendar-week-grid-padding-left);
}
.sx__date-grid-day {
position: relative;
width: 100%;
display: grid;
grid-gap: 2px;
/* needed for the draw plugin */
}
.sx__date-grid-day .sx__spacer {
display: var(--sx-draw-plugin-spacer-display, none);
height: var(--sx-draw-plugin-spacer);
}
.sx__date-grid-event {
z-index: 1;
position: relative;
display: flex;
align-items: center;
padding: var(--sx-spacing-padding1);
border-radius: var(--sx-rounding-extra-small);
font-size: clamp(12px, var(--sx-font-extra-small), 14px);
font-weight: 600;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.sx__date-grid-event:has(.sx__date-grid-event--left-overflow) {
margin-left: 10px;
}
.sx__date-grid-event:has(.sx__date-grid-event--right-overflow) {
margin-right: 10px;
}
.sx__date-grid-event.is-event-new {
animation: sx-grow-event 0.3s ease-in-out forwards;
}
@keyframes sx-grow-event {
0% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.sx__date-grid-event .sx__date-grid-event--left-overflow {
position: absolute;
z-index: 1;
width: 10px;
height: 100%;
left: -10px;
clip-path: polygon(100% 0, 0 50%, 100% 100%, 100% 0);
}
.sx__date-grid-event .sx__date-grid-event--right-overflow {
position: absolute;
z-index: 1;
width: 10px;
height: 100%;
right: -10px;
clip-path: polygon(0 0, 100% 50%, 0 100%, 0 0);
}
.sx__date-grid-event.sx__date-grid-event--copy {
z-index: 2;
box-shadow: var(--sx-box-shadow-level3);
transition-property: transform, width;
transition-duration: 0.15s;
transition-timing-function: ease-in-out;
}
.sx__date-grid-event-text {
width: calc(100% - var(--sx-spacing-padding1) * 2);
left: var(--sx-spacing-padding1);
position: absolute;
text-overflow: ellipsis;
overflow-x: hidden;
white-space: nowrap;
}
.sx__date-grid-event-text .sx__date-grid-event-time {
font-weight: initial;
}
.sx__date-grid-cell {
height: clamp(20px, 1.25rem, 24px);
}
.sx__date-grid-event-resize-handle {
position: absolute;
right: 0;
height: 100%;
width: clamp(10px, 15px, 50%);
cursor: ew-resize;
z-index: 1;
touch-action: none;
}
[dir=rtl] .sx__date-grid-event-resize-handle {
left: 0;
right: auto;
}
.sx__date-grid-background-event {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: -1;
}
:root {
--sx-week-grid-height: 0;
--sx-time-axis-height: 0;
--sx-week-grid-hour-height: 0;
--sx-week-grid-offset-top: 0;
}
.sx__event-modal {
visibility: hidden;
position: fixed;
top: var(--sx-event-modal-top);
left: var(--sx-event-modal-left);
width: 400px;
max-width: 100%;
height: -moz-fit-content;
height: fit-content;
background-color: var(--sx-color-background);
z-index: 2;
}
.sx__event-modal.is-open {
animation: slide-sideways;
animation-duration: 0.3s;
visibility: initial;
}
.is-dark .sx__event-modal {
background-color: var(--sx-color-surface-container-high);
}
.sx__event-modal-default {
padding: var(--sx-spacing-padding6);
background-color: var(--sx-color-background);
box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
border-radius: var(--sx-rounding-small);
max-height: 250px;
overflow-y: scroll;
}
@keyframes slide-sideways {
from {
opacity: 0;
transform: translateX(var(--sx-event-modal-animation-start));
}
to {
transform: translateX(0);
opacity: 1;
}
}
.sx__event-modal .sx__event-icon {
min-width: 16px;
min-height: 16px;
max-width: 16px;
max-height: 16px;
margin-inline-end: var(--sx-spacing-padding2);
}
.sx__event-modal__color-icon {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 25%;
margin-inline-end: var(--sx-spacing-padding3);
}
.sx__has-icon {
display: grid;
align-items: flex-start;
grid-template-columns: 30px 1fr;
margin-bottom: var(--sx-spacing-padding2);
}
.sx__has-icon .sx__event-icon {
margin-top: 2px;
}
.sx__has-icon .sx__event-modal__color-icon {
margin-top: 4px;
}
.sx__event-modal__title {
font-size: var(--sx-font-large);
}
.sx__event-modal__time {
font-size: var(--sx-font-small);
}
.sx__current-time-indicator {
position: absolute;
left: 0;
right: 0;
height: 2px;
background-color: #f00;
z-index: 0;
}
.sx__current-time-indicator::before {
content: "";
position: absolute;
left: -5px;
top: -4px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #f00;
}
.sx__current-time-indicator-full-week {
width: calc(100% - var(--sx-calendar-week-grid-padding-left));
position: absolute;
inset: 0 0 0 var(--sx-calendar-week-grid-padding-left);
height: 2px;
background-color: rgba(255, 0, 0, 0.38);
}
.apm-calendar {
width: 100%;
}
.sx__event {
border-top: 1px solid #000 !important;
border-inline-end: 1px solid #000 !important;
border-bottom: 1px solid #000 !important;
}
.gm-style-iw.gm-style-iw-c,
.gm-style .gm-style-iw-tc::after,
.gm-style .gm-style-iw-d {
background-color: var(--apm-bg-color);
color: var(--apm-color);
}
.gm-style .gm-style-iw-d {
overflow: auto !important;
padding-bottom: 16px;
/* scrollbar-color: var(--apm-bg-color) var(--apm-bg-color); */
}
.gm-style-iw-ch span {
font-size: 16px;
font-weight: 500;
}