.pandora-scope {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.pandora-root-wrapper {
  width: 100%;
  height: 100%;
}

.invisible {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
}

.invisible2 {
  visibility: hidden;
}

// Layout
@Layout-header-height: 50px;
@layout-nav-height: 40px;
@layout-asideLink-fontSize: @font-size-base;
@layout-asideLink-iconColor: inherit;
@Layout-asideDivider-margin: @gap-sm 0;
@layout-nav-lgHeight: 50px;
@layout-nav--folded-height: 50px;
@layout-headerbar-borderbottom: none;
@Layout-aside-width: 200px;
@Layout-footer-height: 50px;
@Layout-aside--sm-width: 150px;
@Layout-aside--md-width: 250px;
@Layout-aside--lg-width: 300px;
@Layout--offscreen-width: 75%;
@Layout-aside--folded-width: 60px;

// Tooltip
@Tooltip--attr-borderRadius: @border-radius;
@Tooltip--attr-paddingY: 2px;
@Tooltip--attr-paddingX: 10px;
@Tooltip--attr-transition: all animation-duration ease-in-out;

// Form

@Form--horizontal-gutterWidth: @gap-md;
@Form--horizontal-label-align: right;
@Form--horizontal-label-whiteSpace: 'normal';
@Form--horizontal-label-widthBase: 120px;
@Form--horizontal-label-widthLg: 200px;
@Form--horizontal-label-widthMd: 160px;
@Form--horizontal-label-widthSm: 90px;
@Form--horizontal-label-widthXs: 60px;

@Form--horizontal-justify-label-align: left;
@Form--horizontal-justify-value-align: right;

@Form-control-widthBase: 200px;
@Form-control-widthLg: 320px;
@Form-control-widthMd: 240px;
@Form-control-widthSm: 160px;
@Form-control-widthXs: 80px;
@Form-description-fontSize: @font-size-sm;

@Form-fontSize: @font-size-ssm;
@Form-item-fontSize: @Form-fontSize;

@Form-group--lg-gutterWidth: 40px;
@Form-group--md-gutterWidth: 30px;
@Form-group--sm-gutterWidth: @gap-md;
@Form-group--xs-gutterWidth: 10px;
@Form-group-gutterWidth: @Form--horizontal-gutterWidth;

@Form-input-addOnDividerBorderWidth: @border-width;
@Form-input-fontSize: @Form-fontSize;
@Form-input-borderRadius: @border-radius;
@Form-input-borderWidth: 1px;
@Form-input-height: 28px;
@Form-input-lineHeight: 1.4285714286;
@Form-input-marginBottom: 6px;
@Form-input-paddingX: 8px;

@Form-input-paddingY: calc(
  (@Form-input-height - @Form-input-lineHeight * @Form-input-fontSize - 2px) / 2
);
@Form-input-clearBtn-size: @font-size-md;
@Form-input-clearBtn-padding: 3px;

@Form-item-gap: @gap-lg;

@Form-label-paddingTop: calc(
  (@Form-input-height - @Form-input-lineHeight * @Form-input-fontSize) / 2
);
@Form-row-gutterWidth: 10px;

@Form-select-outer-borderWidth: 0px;
@Form-select-popoverGap: 0;
@Form-selectOption-height: @Form-input-height;
@Form-selectValue-fontSize: @font-size-sm;
@Form-valueLabel-maxWidth: 120px;

// Modal

@Modal-body--noHeader-paddingTop: @gap-base;

@borders-radius-4: 6px;
@Modal-bg: @white;
@Modal-body--noHeader-paddingTop: @gap-base;
@Modal-body-borderBottom: 0 solid #f8f7fa;
@Modal-body-borderTop: 0 solid #f8f7fa;
@Modal-body-paddingX: 0;
@Modal-body-paddingY: 24px;
@Modal-close-color: @text--muted-color;
@Modal-close-width: 16px;
@Modal-content-borderColor: var(--color-border);
@Modal-content-borderRadius: 6px;
@Modal-content-borderWidth: 0;
@Modal-content-minHeight: 193px;
@Modal-content-startMarginTop: 60px;
@Modal-content-stepMarginTop: 30px;
@Modal-footer-button-width: 72px;
@Modal-footer-marginX: 0;
@Modal-footer-marginY: 0;
@Modal-footer-padding: 0;
@Modal-header-bg: @white;
@Modal-header-height: 40px;
@Modal-header-paddingX: 0;
@Modal-header-paddingY: 0;
@Modal-overlay-bg: rgba(0, 0, 0, 0.7);
@Modal-title-color: #181526;
@Modal-title-fontSize: 14px;
@Modal-title-fontWeight: 500;
@Modal-title-lineHeight: 1.5;

@Modal-widthBase: 500px;
@Modal-widthLg: 1100px;
@Modal-widthMd: 800px;
@Modal-widthSm: 500px;
@Modal-widthXs: 350px;
@Modal-widthXl: 90%;
@Model-close-onHover-color: var(--color-text-1);
//Button

@Button-borderRadius: @border-radius;
@Button-borderWidth: @Form-input-borderWidth;

@Button-fontSize: @Form-input-fontSize;
@Button-fontWeight: @font-weight-normal;
@Button-height: @Form-input-height;
@Button-lineHeight: @Form-input-lineHeight;
@Button-mimWidth: auto;

@Button-paddingX: @gap-base;
@Button-icon-rightMargin: @gap-xs;
@Button-paddingX-right: @gap-base;
@Button-paddingY: calc(
  (@Button-height - @Button-borderWidth * 2 - @Button-lineHeight * @Button-fontSize) / 2
);

@Button--xs-fontSize: @font-size-xs;
@Button--xs-height: 22px;
@Button--xs-lineHeight: 1.6363636364;
@Button--xs-paddingX: @gap-xs;
@Button--xs-paddingY: calc(@Button-paddingY * 0.25);
// @Button--xs-paddingY: calc(
//   (@Button--xs-height - @Button-borderWidth * 2 - @Button--xs-lineHeight * @Button--xs-fontSize) / 2
// );

@Button--sm-borderRadius: @border-radius;
@Button--sm-fontSize: @font-size-sm;
@Button--sm-height: 26px;
@Button--sm-lineHeight: 1.5;
@Button--sm-paddingX: @gap-sm;
@Button--sm-paddingY: calc(@Button-paddingY * 0.5);
// @Button--sm-paddingY: calc(
//   (@Button--sm-height - @Button-borderWidth * 2 - @Button--sm-lineHeight * @Button--sm-fontSize) / 2
// );

@Button--md-fontSize: @Button-fontSize;
@Button--md-height: @Button-height;
@Button--md-lineHeight: @Button-lineHeight;
@Button--md-paddingX: @gap-base;
@Button--md-paddingY: @Button-paddingY;
// @Button--md-paddingY: calc(
//   (@Button--md-height - @Button-borderWidth * 2 - @Button--md-lineHeight * @Button--md-fontSize) / 2
// );

@Button--lg-borderRadius: @border-radius;
@Button--lg-fontSize: @font-size-lg;
@Button--lg-height: 46px;
@Button--lg-lineHeight: 1.2;
@Button--lg-paddingX: @gap-lg;
@Button--lg-paddingY: calc(@Button-paddingY * 1.25);
// @Button--lg-paddingY: calc(
//   (@Button--lg-height - @Button-borderWidth * 2 - @Button--lg-lineHeight * @Button--lg-fontSize) / 2
// );

@Button--xl-borderRadius: @border-radius;
@Button--xl-fontSize: @font-size-xl;
@Button--xl-height: 56px;
@Button--xl-lineHeight: 1.2;
@Button--xl-paddingX: @gap-xl;
@Button--xl-paddingY: calc(@Button-paddingY * 1.5);
// @Button--lg-paddingY: calc(
//   (@Button--lg-height - @Button-borderWidth * 2 - @Button--lg-lineHeight * @Button--lg-fontSize) / 2
// );

//Tooltip

@boxTooltipShadow: 0 4px 6px 1px rgb(8 14 26 / 6%), 0 1px 10px 0 rgb(8 14 26 / 5%),
  0 2px 4px -1px rgb(8 14 26 / 4%);
@Tooltip--attr-borderRadius: @border-radius;
@Tooltip--attr-borderWidth: 0;
@Tooltip--attr-fontSize: @font-size-sm;
@Tooltip--attr-gap: @gap-sm;
@Tooltip--attr-lineHeigt: @line-height-base;
@Tooltip--attr-paddingX: 10px;
@Tooltip--attr-paddingY: 2px;
@Tooltip-arrow-height: 6px;
// @Tooltip-arrow-height: 0.3rem;
@Tooltip-arrow-width: 8px;
// @Tooltip-arrow-width: 0.5rem;
@Tooltip-body-paddingX: @gap-sm;
@Tooltip-body-paddingY: @gap-xs;
@Tooltip-borderRadius: @border-radius-lg;
@Tooltip-borderWidth: @border-width;
@Tooltip-fontSize: @font-size-sm;
@Tooltip-maxWidth: 240px;
@Tooltip-minWidth: auto;
@Tooltip-title-paddingX: @gap-base;
@Tooltip-title-paddingY: @gap-sm;
@Tooltip-boxShadow: @boxTooltipShadow;

//Toast

@Toast-border-width: 0;
@Toast-borderRadius: 2px;
@Toast-box-shadow: @box-shadow;

@Toast-icon-width: 16px;
@Toast-icon-height: @Toast-icon-width;

@Toast-opacity: 0.8;
@Toast-paddingL: 40px;
@Toast-paddingX: @gap-md;
@Toast-paddingY: @gap-xs;
@Toast-title-display: block;
@Toast-width: 300px;

// Divider
@Divider-borderStyle: solid;

// Drawer
@Drawer-content-borderRadius: 0;
@Drawer-footer-padding: @gap-base;
@Drawer-title-fontSize: @font-size-md;
@Drawer-widthBase: 80%;
@Drawer-widthLg: 800px;
@Drawer-widthMd: 500px;
@Drawer-widthSm: 300px;
@Drawer-widthXl: 90%;
@Drawer-widthXs: 200px;

// Checkbox
@Checkbox--full-inner-size: 12px;
@Checkbox--sm--full-inner-size: 10px;
@Checkbox--sm-inner-size: calc(@Checkbox--sm-size / 2);
@Checkbox--sm-size: 14px;
@Checkbox-borderRadius: @border-radius;
@Checkbox-gap: @gap-xs;
@Checkbox-size: 16px;
@Checkbox-inner-size: calc(@Checkbox--full-inner-size / 2);
@Checkbox-border-width: @Form-input-borderWidth;
@Checkbox-paddingX: 12px;
@Checkbox-button-height: 32px;
@Checkbox-button-line-height: 30px;

// Radio
@Radio--sm-size: @Checkbox--sm-size;
@Radio-inner-size: calc(@Radio-size / 2);
@Radio-size: @Checkbox-size;
@Radio-onFocus-boxShadow: none;

// page
@Page-content-padding: @gap-sm;
@Page-main-bg: desaturate(darken(@light, 3%), 2.5%);

// Switch
@Switch-gap: @gap-sm;
@Switch-height: 22px;
@Switch-width: 50px;

// skeleton
@Skeleton-width: 96px;
@Skeleton-height: 96px;
@Skeleton-svg-width: 48px;
@Skeleton-svg-height: 48px;
@Skeleton-avatar-width: 32px;
@Skeleton-avatar-height: 32px;
// @Skeleton-bgcolor: rgba(0, 0, 0, 0.06);
@Skeleton-bgcolor: var(--color-fill-2);
@skeleton-bgcolor-lighten: fade(@black, 15);
@Skeleton-borderRadios: @border-radius*2;
@Skeleton-content-heigth: 16px;

// popconfirm
@Popconfirm-box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),
  0 9px 28px 8px rgba(0, 0, 0, 0.05);
@Popconfirm-box-arrow-show: 2px 2px 5px rgba(0, 0, 0, 0.05);
@Popconfirm-arrow-width: 8px;
@Popconfirm-arrow-height: 8px;
@Popconfirm-arrow-margin: 8px;
@Popconfirm-arrow-color: fade(@black, 88);
@Popconfirm-arrow-padding: 12px;