@charset "UTF-8"; /* 此处放置需要override的变量，因为部分变量已经在variables.scss中定义 */ :root { --affix-offset-top: 0px; --affix-offset-bottom: 0px; } :root, .AMISCSSWrapper { --white: var(--colors-neutral-text-11); --primary: var(--colors-brand-5); --primary-onHover: var(--colors-brand-6); --primary-onActive: var(--colors-brand-4); --secondary: var(--colors-neutral-text-4); /* secondary 颜色需进一步确认 */ --secondary-onHover: var(--colors-neutral-text-6); --secondary-onActive: var(--colors-neutral-text-4); --success: var(--colors-success-5); --success-onHover: var(--colors-success-6); --success-onActive: var(--colors-success-4); --info: var(--colors-info-5); --info-onHover: var(--colors-info-6); --info-onActive: var(--colors-info-4); --warning: var(--colors-warning-5); --warning-onHover: var(--colors-warning-6); --warning-onActive: var(--colors-warning-4); --danger: var(--colors-error-5); --danger-onHover: var(--colors-error-6); --danger-onActive: var(--colors-error-4); --light: var(--colors-neutral-fill-11); --dark: var(--colors-neutral-fill-3); --fontFamilyMonospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --fontFamilyBase: var(--fonts-base-family); --fontSizeBase: var(--fonts-size-7); --fontSizeMd: var(--fonts-size-7); --fontSizeLg: var(--fonts-size-6); --fontSizeXl: var(--fonts-size-5); --fontSizeSm: var(--fonts-size-8); --fontSizeXs: var(--fonts-size-8); --text-color: var(--colors-neutral-text-2); --button-color: var(--colors-neutral-text-11); --animation-duration: 0.2s; --text--muted-color: var(--colors-neutral-text-6); --text--loud-color: var(--colors-neutral-text-2); --pre-color: var(--text-color); --borderColor: var(--colors-neutral-line-8); --borderColorLight: var(--colors-neutral-line-10); --borderColorDarken: var(--colors-neutral-line-8); --borderRadius: var(--borders-radius-3); --borderRadiusMd: var(--borders-radius-4); --borderRadiusLg: var(--borders-radius-5); --boxShadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --boxShadowSm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); --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%); --lineHeightBase: var(--fonts-lineHeight-2); --body-lineHeight: var(--lineHeightBase); --borderWidth: 0.0625rem; --fontWeightNormal: 400; --fontWeightBase: var(--fontWeightNormal); --fontWeightMd: 500; --fontWeightBold: 700; --background: var(--colors-neutral-fill-11); --code-color: var(--danger); --code-background: var(--background); --pre-background: var(--background); --body-bg: var(--light); --body-size: var(--fontSizeBase); --body-color: var(--text-color); --body-weight: var(--fontWeightBase); --gap-xs: var(--sizes-size-3); --gap-sm: var(--sizes-size-5); --gap-base: var(--sizes-size-7); --gap-md: var(--sizes-size-9); --gap-lg: var(--sizes-base-10); --gap-xl: var(--sizes-base-12); --icon-color: var(--colors-neutral-text-5); --icon-onHover-color: var(--colors-brand-5); --icon-onDisabled-color: var(--colors-neutral-text-10); --label--default-bg: var(--colors-neutral-fill-3); --label--primary-bg: var(--colors-brand-5); --label--success-bg: var(--success); --label--info-bg: var(--info); --label--warning-bg: var(--warning); --label--danger-bg: var(--danger); --label-color: #fff; --label-link--hover-color: #fff; --scrollbar-width: 1.0625rem; --Audio-border: 0.0625rem solid #dee2e6; --Audio-height: 3.125rem; --Audio-input-width: 5rem; --Audio-item-margin: 0.625rem; --Audio-lineHeight: 3.125rem; --Audio-play-top: var(--gap-xs); --Audio-play-width: var(--gap-md); --Audio-process-minWidth: 5rem; --Audio-rate-bg: #dee2e6; --Audio-rate-height: 3.125rem; --Audio-rate-lineHeight: 3.125rem; --Audio-rate-width: 2.5rem; --Audio-rateControlItem-bg: #dee2e6; --Audio-rateControlItem-borderRight: 0.0625rem solid #d3dae0; --Audio-svg-height: var(--gap-md); --Audio-svg-top: 0.375rem; --Audio-svg-width: var(--gap-md); --Audio-thumb-bg: #606670; --Audio-thumb-height: 0.875rem; --Audio-thumb-marginTop: -0.3125rem; --Audio-thumb-width: 0.875rem; --Audio-times-margin: 0 var(--gap-xs); --Audio-times-width: 4.6875rem; --Audio-track-bg: #d7dbdd; --Audio-track-border: 0.0625rem solid transparent; --Audio-track-borderRadius: 0.1875rem; --Audio-track-height: 0.375rem; --Audio-volume-height: 3.125rem; --Audio-volume-lineHeight: 3.125rem; --Audio-volume-width: var(--gap-md); --Audio-volumeControl-width: 6.875rem; --Avatar-bg: #d1d5db; --Avatar-width: 2.5rem; --Avatar-size-large: 3rem; --Avatar-size-default: var(--Avatar-width); --Avatar-size-small: 2rem; --Avatar-icon-size-large: 1.25rem; --Avatar-icon-size-default: var(--fontSizeLg); --Avatar-icon-size-small: 0.75rem; --Badge-size: var(--gap-md); --Badge-color: #fff; --Badge--success-bg: var(--success); --Badge--info-bg: var(--info); --Badge--warning-bg: var(--warning); --Badge--danger-bg: var(--danger); --Button--sm-fontSize: var(--fontSizeSm); --Button-transition: color var(--animation-duration) ease-in-out, background-color var(--animation-duration) ease-in-out, border-color var(--animation-duration) ease-in-out, box-shadow var(--animation-duration) ease-in-out; --ButtonGroup--primary-isActive-color: var(--colors-neutral-fill-11); --ButtonGroup--primary-isActive-bg: var(--colors-brand-5); --ButtonGroup-divider-width: 0.0625rem; --ButtonGroup-divider-color: #fff; --ButtonGroup-borderWidth: var(--borders-width-2); --Breadcrumb-item-fontSize: var(--fontSizeMd); --Breadcrumb-item-default-color: var(--colors-neutral-text-5); --Breadcrumb-item-hover-color: var(--colors-brand-5); --Breadcrumb-item-active-color: var(--colors-brand-4); --Breadcrumb-item-last-color: var(--colors-neutral-text-2); --BreadcrumbDropdown-item-default-color: var(--colors-neutral-text-2); --BreadcrumbDropdown-item-default-bg: var(--colors-neutral-text-11); --BreadcrumbDropdown-item-hover-bg: var(--colors-brand-10); --BreadcrumbDropdown-item-fontSize: var(--fontSizeSm); --BreadcrumbDropdown-item-height: 2rem; --BreadcrumbDropdown-item-paddingX: var(--gap-sm); --BreadcrumbDropdown-item-paddingY: calc( (var(--BreadcrumbDropdown-item-height) - var(--fontSizeSm)) / 2 ); --Breadcrumb-item-disabled-color: var(--colors-neutral-text-6); --Card-actions-borderColor: var(--colors-neutral-line-10); --Card-actions-fontSize: var(--fonts-size-8); --Card-actions-onChecked-onHover-bg: var(--colors-neutral-fill-11); --Card-actions-onChecked-onHover-color: var(--colors-neutral-fill-11); --Card-actions-onHover-bg: var(--colors-neutral-fill-11); --Card-actions-onHover-color: var(--colors-brand-5); --Card-bg: var(--colors-neutral-fill-11); --Card-borderColor: var(--borderColor); --Card-borderRadius: var(--borderRadius); --Card-borderWidth: var(--borderWidth); --Card-secondary-color: var(--colors-neutral-fill-5); --Card-onChecked-bg: var(--colors-neutral-fill-11); --Card-onChecked-borderColor: var(--colors-brand-5); --Card-onChecked-color: var(--colors-brand-5); --Card-onChecked-fieldLabel-color: rgb(124.7142857143, 213.8571428571, 241.2857142857); --Card-onDragging-opacity: 0.1; --Card-onModified-bg: var(--colors-neutral-fill-8); --Card-onModified-borderColor: var(--colors-brand-5); --Card-onModified-color: var(--colors-brand-6); --Card-onModified-fieldLabel-color: var(--colors-brand-8); --Card-onModified-onHover-bg: rgb(207.5625, 224.0625, 252.9375); --Card-onModified-onHover-color: rgb(17.805, 101.89, 241.195); --Cards--unsaved-heading-bg: #e8f0fe; --Cards--unsaved-heading-color: #4285f4; --Cards-fixedTop-boxShadow: var(--shadows-shadow-normal); --Cards-placeholder-height: 6.25rem; --Cards-toolbar-marginX: 0; --Cards-toolbar-marginY: var(--gap-base); --Carousel--dark-control: black; --Carousel--light-control: white; --Carousel-arrowControl-height: var(--gap-lg); --Carousel-arrowControl-width: var(--gap-lg); --Carousel-bg: var(--colors-neutral-fill-10); --Carousel-dot-borderRadius: 0.25rem; --Carousel-dot-height: 0.5rem; --Carousel-dot-margin: 0.4375rem var(--gap-xs); --Carousel-dot-width: 0.5rem; --Carousel-height: 12.5rem; --Carousel-imageDescription-bottom: 1.5625rem; --Carousel-imageTitle-bottom: 2.8125rem; --Carousel-minWidth: 6.25rem; --Carousel-svg-height: var(--gap-lg); --Carousel-svg-width: var(--gap-lg); --Carousel-transitionDuration: var(--animation-duration); --ColorPicker-bg: var(--colors-neutral-fill-11); --ColorPicker-borderColor: var(--Form-input-borderColor); --ColorPicker-borderRadius: var(--borders-radius-3); --ColorPicker-borderWidth: var(--borders-width-2); --ColorPicker-color: var(--colors-neutral-text-2); --ColorPicker-fontSize: var(--Form-input-fontSize); --ColorPicker-height: var(--Form-input-height); --ColorPicker-lineHeight: var(--Form-input-lineHeight); --ColorPicker-height: var(--sizes-base-16); --ColorPicker-onDisabled-bg: var(--colors-neutral-fill-8); --ColorPicker-onDisabled-color: var(--text--muted-color); --ColorPicker-onFocused-borderColor: var(--Form-input-onFocused-borderColor); --ColorPicker-onHover-bg: var(--colors-neutral-fill-11); --ColorPicker-onHover-borderColor: var(--colors-brand-5); --ColorPicker-paddingX: var(--sizes-size-6); --ColorPicker-paddingY: var(--sizes-size-3); --ColorPicker-placeholderColor: var(--colors-neutral-text-6); --ColorPicker-boxShadow: var(--shadows-shadow-normal); --Copyable-iconColor: var(--icon-color); --Copyable-onHover-iconColor: var(--icon-onHover-color); --Crud-toolbar-gap: var(--sizes-size-6); --Crud-toolbar-height: 1.875rem; --Crud-toolbar-lineHeight: var(--lineHeightBase); --LocationPicker-borderRadius: var(--borders-radius-3); --DropDown-caret-marginLeft: var(--gap-sm); --DropDown-menu-bg: var(--colors-neutral-fill-11); --DropDown-menu-borderColor: var(--borderColor); --DropDown-menu-borderRadius: var(--borderRadius); --DropDown-menu-borderWidth: var(--borderWidth); --DropDown-menu-boxShadow: var(--Form-select-outer-boxShadow); --DropDown-menu-height: 2rem; --DropDown-menu-minWidth: 10rem; --DropDown-menu-paddingX: 0; --DropDown-menu-paddingY: var(--gap-xs); --DropDown-menuItem-onHover-bg: var(--Form-select-menu-onHover-bg); --DropDown-group-color: #848b99; --DropDown-menuItem-color: var(--colors-neutral-text-2); --DropDown-menuItem-onHover-color: var(--Form-select-menu-onHover-color); --DropDown-menuItem-onActive-color: var(--colors-brand-5); --DropDown-menuItem-onDisabled-color: #b4b6ba; --DropDown-menuItem-paddingX: var(--select-base-default-option-paddingRight); --Fieldset-legend-bgColor: var(--colors-neutral-fill-11); --Form--horizontal-gutterWidth: var(--gap-md); --Form--horizontal-label-align: right; --Form--horizontal-label-whiteSpace: normal; --Form--horizontal-justify-label-align: left; --Form--horizontal-justify-value-align: right; --Form-control-widthBase: 12.5rem; --Form-control-widthLg: 20rem; --Form-control-widthMd: 15rem; --Form-control-widthSm: 10rem; --Form-control-widthXs: 5rem; --Form-fontSize: var(--fontSizeBase); --Form-group--lg-gutterWidth: 2.5rem; --Form-group--md-gutterWidth: 1.875rem; --Form-group--sm-gutterWidth: var(--gap-md); --Form-group--xs-gutterWidth: 0.625rem; --Form-group-gutterWidth: var(--Form--horizontal-gutterWidth); --Form-input-addOnBg: var(--colors-neutral-fill-11); --Form-input-addOnColor: var(--text-color); --Form-input-addOnDividerBorderWidth: var(--borders-width-2); --Form-input-bg: var(--colors-neutral-fill-11); --Form-input-borderColor: var(--borderColor); --Form-input-borderRadius: var(--borders-radius-3); --Form-input-borderWidth: 0.0625rem; --Form-input-boxShadow: none; --Form-input-color: var(--colors-neutral-text-2); --Form-input-fontSize: var(--Form-fontSize); --Form-input-height: var(--sizes-base-16); --Form-input-iconColor: var(--colors-neutral-text-5); --Form-input-lineHeight: var(--fonts-lineHeight-2); --Form-input-marginBottom: var(--sizes-size-3); --Form-input-onActive-color: var(--info); --Form-input-onDisabled-bg: var(--colors-neutral-fill-10); --Form-input-onDisabled-borderColor: var(--colors-neutral-line-8); --Form-input-onError-bg: var(--colors-neutral-fill-11); --Form-input-onError-borderColor: var(--colors-error-5); --Form-input-onFocus-addOnColor: var(--colors-brand-5); --Form-input-onFocused-bg: var(--colors-neutral-fill-11); --Form-input-onFocused-borderColor: var(--colors-brand-4); --Form-input-onHover-iconColor: var(--colors-neutral-text-4); --Form-input-onHover-bg: rgba(255, 255, 255, 0.6); --Form-input-onHover-borderColor: var(--colors-brand-5); --Form-input-paddingX: var(--sizes-size-6); --Form-input-password-icon-size: var(--sizes-size-9); --Form-input-password-icon-color: var(--colors-neutral-text-5); --Form-input-paddingY: var(--sizes-size-3); --Form-input-placeholderColor: var(--text--muted-color); --Form-input-onDisabled-color: var(--colors-neutral-text-5); --Form-input-clearBtn-size: var(--fontSizeMd); --Form-input-clearBtn-padding: 0.1875rem; --Form-input-clearBtn-color: var(--colors-neutral-text-7); --Form-input-clearBtn-color-onHover: var(--colors-neutral-text-4); --Form-input-clearBtn-color-onActive: var(--colors-neutral-text-3); --Form-label-paddingTop: calc( ( var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) ) / 2 ); --Form-row-gutterWidth: 0.625rem; --IconPicker-content-maxHeight: 21.875rem; --IconPicker-padding: var(--gap-xs); --IconPicker-selectedIcon-marginRight: var(--gap-xs); --IconPicker-sugItem-height: 1.75rem; --IconPicker-sugItem-lineHeight: 1.75rem; --IconPicker-sugItem-width: 1.75rem; --IconPicker-tab-height: 1.875rem; --IconPicker-tab-lineHeight: 1.875rem; --IconPicker-tab-onActive-bg: var(--colors-neutral-fill-11); --IconPicker-tab-padding: 0 0.625rem; --IconPicker-tabs-bg: #f0f3f4; --InputGroup-addOn-bg: var(--Form-input-addOnBg); --InputGroup-addOn-borderColor: var(--Form-input-borderColor); --InputGroup-addOn-borderRadius: var(--Form-input-borderRadius); --InputGroup-addOn-borderWidth: var(--Form-input-borderWidth); --InputGroup-addOn-onFocused-borderColor: var( --Form-input-onFocused-borderColor ); --InputGroup-button-borderColor: var(--Form-input-borderColor); --InputGroup-button-borderRadius: var(--borders-radius-3); --InputGroup-button-borderWidth: var(--borders-width-2); --InputGroup-height: var(--Form-input-height); --InputGroup-paddingX: 0.625rem; --InputGroup-paddingY: calc( ( var(--InputGroup-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem ) / 2 ); --InputGroup-select-arrowColor: var(--colors-neutral-text-5); --InputGroup-select-bg: var(--colors-neutral-fill-11); --InputGroup-select-borderColor: var(--borderColor); --InputGroup-select-borderRadius: var(--borders-radius-3); --InputGroup-select-borderWidth: var(--borders-width-2); --InputGroup-select-color: var(--colors-neutral-text-2); --InputGroup-select-onFocused-arrowColor: var(--colors-brand-5); --InputGroup-select-onFocused-bg: var(--colors-brand-10); --InputGroup-select-onFocused-color: var(--colors-brand-5); --Layout--offscreen-width: 75%; --Layout-aside--folded-width: var(--sizes-base-30); --Layout-aside--lg-width: 18.75rem; --Layout-aside--md-width: 15.625rem; --Layout-aside--sm-width: 9.375rem; --Layout-aside-bg: var(--colors-neutral-fill-2); --Layout-aside-color: rgb(159.6724137931, 160, 160.3275862069); --Layout-aside-onAcitve-bg: rgb(39.4377155172, 45.25, 51.0622844828); --Layout-aside-onHover-bg: rgb(43.8826293103, 50.35, 56.8173706897); --Layout-aside-subList-bg: var(--colors-neutral-fill-2); --Layout-aside-onAcitve-onHover-bg: var(--Layout-aside-onAcitve-bg); --Layout-aside-width: 11.25rem; --Layout-aside-width-collapsed: 3.75rem; --Layout-asideDivider-bg: var(--colors-neutral-line-3); --Layout-asideDivider-margin: 0 var(--sizes-size-6); --Layout-asideLabel-color: rgb(134.0844827586, 134.5, 134.9155172414); --Layout-asideLink-color: var(--colors-neutral-text-11); --Layout-asideLink-fontSize: var(--fonts-size-8); --Layout-asideLink-arrowFontSize: var(--fonts-size-8); --Layout-asideLink-arrowColor: var(--colors-neutral-text-5); --Layout-asideLink-iconColor: inherit; --Layout-asideLink-onActive-arrowColor: var( --Layout-asideLink-onActive-color ); --Layout-asideLink-onActive-color: var(--colors-brand-6); --Layout-asideLink-onHover-color: var(--colors-brand-6); --Layout-asideLink-onHover-iconColor: var(--colors-brand-6); --Layout-asideLink-onHover-iconSize: var(--sizes-size-9); --Layout-asideLink-onHover-arrowColor: var(--colors-neutral-text-11); --Layout-brand-bg: var(--colors-neutral-fill-2); --Layout-brand-color: var(--colors-neutral-text-11); --Layout-brandBar-color: rgb(159.6724137931, 160, 160.3275862069); --Layout-header-bg: var(--colors-neutral-fill-10); --Layout-header-boxShadow: none; --Layout-header-height: 3.125rem; --Layout-headerBar-borderBottom: none; --Layout-footer-height: 3.125rem; --Layout-nav--folded-height: var(--sizes-base-20); --Layout-nav-height: 2.5rem; --Layout-nav-lgHeight: 3.125rem; --Layout-body-bg: var(--body-bg); --Layout-paddingX: 1.5625rem; --Layout-icon-size: 0.875rem; --Layout-light-backgroundColor: var(--colors-neutral-fill-11); --Layout-light-bgColor-onHover: var(--colors-brand-10); --Layout-light-fontColor: var(--colors-neutral-text-1); --Layout-fontColor--onHover: var(--colors-brand-5); --Layout-dark-fontColor: var(--colors-neutral-text-11); --Layout-fontColor--onActive: var(--colors-brand-4); --Layout-fontColor--info: var(--colors-brand-5); --Layout-dark-backgroundColor: var(--colors-neutral-fill-2); --Layout-dark-selected-color: var(--colors-brand-6); --Layout-tooltip-fontSize: var(--fonts-size-8); --Layout-dark-tooltip-backgroundColor: var(--colors-brand-1); --List--unsaved-heading-bg: #e8f0fe; --List--unsaved-heading-color: #4285f4; --List-bg: var(--colors-neutral-fill-11); --List-borderColor: var(--borderColor); --List-borderRadius: var(--borderRadius); --List-borderWidth: var(--borderWidth); --List-fixedTop-boxShadow: var(--shadows-shadow-normal); --List-placeholder-height: 1.875rem; --List-toolbar-marginX: 0; --List-toolbar-marginY: var(--gap-base); --ListControl-fontSize: var(--Form-fontSize); --ListControl-gutterWidth: 0.625rem; --ListControl-item-bg: var(--colors-neutral-fill-11); --ListControl-item-borderColor: var(--borderColor); --ListControl-item-borderWidth: var(--borders-width-2); --ListControl-item-borderRadius: var(--borders-radius-3); --ListControl-item-color: var(--colors-neutral-text-2); --ListControl-item-onActive-after-borderColor: #fff; --ListControl-item-onActive-before-bg: var(--colors-brand-5); --ListControl-item-onActive-bg: var(--colors-neutral-fill-11); --ListControl-item-onActive-borderColor: var(--colors-brand-4); --ListControl-item-onActive-color: var(--colors-brand-4); --ListControl-item-onActive-onHover-bg: var(--colors-neutral-fill-11); --ListControl-item-onDisabled-bg: var(--colors-neutral-fill-9); --ListControl-item-onDisabled-borderColor: var(--colors-neutral-line-9); --ListControl-item-onDisabled-color: var(--colors-neutral-text-6); --ListControl-item-onDisabled-opacity: 1; --ListControl-item-onHover-bg: var(--colors-neutral-fill-11); --ListControl-item-onHover-borderColor: var(--colors-brand-5); --ListControl-item-onHover-color: var(--colors-brand-5); --ListControl-item-paddingX: var(--sizes-size-6); --ListControl-item-paddingY: 0.375rem; --ListControl-item-transition: none; --ListItem--strip-bg: var(--colors-neutral-fill-10); --ListItem-borderColor: var(--colors-neutral-line-10); --ListItem-borderWidth: var(--List-borderWidth); --ListItem-onChecked-bg: var(--colors-brand-10); --ListItem-onChecked-borderColor: var(--colors-brand-4); --ListItem-onChecked-color: var(--colors-brand-4); --ListItem-onChecked-fieldLabel-color: var(--colors-brand-4); --ListItem-onDragging-opacity: 0.1; --ListItem-onModified-bg: #e8f0fe; --ListItem-onModified-borderColor: rgb(183.125, 208.125, 251.875); --ListItem-onModified-color: #4285f4; --ListItem-onModified-fieldLabel-color: rgb(162.39, 195.22, 249.61); --ListItem-paddingX: var(--gap-base); --ListItem-paddingY: var(--gap-sm); --ListItem--onHover-bg: rgba(0, 126, 255, 0.08); --ListItem--onHover-color: var(--info); --listMenu--onActive-borderColor: var(--info); --ListMenu-borderRadius: var(--borders-radius-1); --ListMenu-borderWidth: var(--borders-width-1); --ListMenu-bordrColor: var(--borderColor); --ListMenu-divider-color: var(--borderColorLight); --ListMenu-item--onActive-bg: transparent; --ListMenu-item--onActive-color: var(--info); --ListMenu-item--onDisabled-bg: transparent; --ListMenu-item--onDisabled-color: var(--text--muted-color); --ListMenu-item--onHover-bg: var(--colors-neutral-fill-8); --ListMenu-item--onHover-color: var(--colors-neutral-text-2); --ListMenu-item-bg: var(--colors-neutral-fill-11); --ListMenu-item-color: var(--colors-neutral-text-2); --ListMenu-item-height: var(--sizes-base-15); --ListMenu-item-mobile-margin: 0.3125rem; --ListMenu-item-mobile-width: 5.625rem; --ListMenu-item-mobile-bg: #f5f5f5; --ListMenu-item-mobile-active-bg: #e7f1ff; --Log-bg: #222; --Log-padding: var(--gap-sm) 0; --Log-line-padding: 0 var(--gap-sm); --Log-color: #f1f1f1; --Log-line--onHover-bg: #444; --Nav-item-bg: transparent; --Nav-item-borderRadius: var(--borders-radius-1); --Nav-item-color: var(--text-color); --Nav-item-fontSize: var(--fonts-size-7); --Nav-item-collapsed-fontSize: var(--fonts-size-6); --Nav-item-fontWeight: var(--fonts-weight-6); --Nav-item-fontColor-onDisabled: var(--colors-neutral-fill-6); --Nav-item-onActive-bg: var(--colors-neutral-fill-10); --Nav-item-onActive-backgroundColor: var(--colors-neutral-fill-12); --Nav-item-onActive-borderLeft: var(--borders-width-4) var(--borders-style-2) var(--colors-brand-5); --Nav-item-onActive-borderColor: var(--colors-link-5); --Nav-item-onActive-color: var(--colors-brand-5); --Nav-item-onDisabled-color: var(--text--muted-color); --Nav-item-onHover-bg: rgba(0, 0, 0, 0.05); --Nav-item-onHover-color: var(--text--loud-color); --Nav-subItem-fontSize: var(--fonts-size-8); --Nav-subItem-onActiveBeforeBg: var(--colors-brand-5); --Nav-Item-maxWidth--tabs: 10rem; --Nav-Item-height: 2.5rem; --Nav-Item-height--horizontal: 3.125rem; --Nav-Item-Badge-paddingRight: 0.625rem; --Nav-Item-paddingX: 1.25rem; --Nav-Item-Drag-color: var(--colors-neutral-text-5); --Number-bg: var(--Form-input-bg); --Number-borderColor: var(--colors-neutral-line-7); --Number-borderRadius: var(--Form-input-borderRadius); --Number-borderWidth: var(--borders-width-2); --Number-handler--down-content: ""; --Number-handler--up-content: ""; --Number-handler--up-transform: rotate(180deg); --Number-handler-bg: var(--colors-neutral-fill-11); --Number-handler-borderBottom: var(--borders-width-1) solid var(--Form-input-borderColor); --Number-handler-color: var(--Form-input-color); --Number-handler-fontFamily: "iconfont"; --Number-handler-fontSize: var(--fonts-size-8); --Number-handler-onActive-bg: var(--Number-handler-onHover-bg); --Number-handler-onDisabled-bg: var(--Form-input-onDisabled-bg); --Number-handler-onDisabled-color: var(--text--muted-color); --Number-handler-onHover-bg: var(--colors-neutral-fill-11); --Number-handler-onHover-color: var(--colors-brand-5); --Number-handler-width: var(--sizes-base-12); --Number-onDisabled-bg: var(--Form-input-bg); --Page-aside-bg: var(--colors-neutral-fill-11); --Page-aside-maxWidth: 18.75rem; --Page-aside-width: 10rem; --Page-body-padding: var(--gap-base); --Page-content-paddingX: var(--sizes-size-0); --Page-content-paddingY: var(--sizes-size-0); --Page-header-paddingX: var(--sizes-size-9); --Page-header-paddingY: var(--sizes-size-6); --Page-header-bg: transparent; --Page-main-bg: var(--colors-neutral-fill-11); --Page-title-color: var(--colors-neutral-text-2); --Page-title-fontSize: var(--fontSizeLg); --Page-title-fontWeight: var(--fontWeightNormal); --Page-title-lineHeight: 1.5; --Pagination-fontSize: var(--fonts-size-8); --Pagination-height: 2rem; --Pagination-height-sm: 1.5rem; --Pagination-minWidth: 2rem; --Pagination-minWidth-sm: 1.5rem; --Pagination-onActive-backgroundColor: var(--colors-neutral-fill-11); --Pagination-onActive-border: var(--borders-width-2) var(--borders-style-2) var(--colors-brand-5); --Pagination-onActive-color: var(--colors-brand-5); --Pagination-onDisabled-color: var(--colors-neutral-text-6); --Pagination-onDisabled-backgroundColor: var(--colors-neutral-fill-10); --Pagination-padding: 0 0.5rem; --Pagination-padding-sm: 0 0.25rem; --Pagination-light-color: var(--colors-neutral-text-4); --Panel--default-badgeBg: var(--colors-neutral-fill-3); --Panel--default-badgeColor: var(--colors-neutral-fill-10); --Picker-onHover-iconColor: var(--icon-onHover-color); --PickerColumns-bg: white; --PickerColumns-toolbar-height: 3.125rem; --PickerColumns-title-fontSize: var(--fontSizeLg); --PickerColumns-title-color: #222; --PickerColumns-title-lineHeight: 1.5; --PickerColumns-action-padding: 0 var(--gap-md); --PickerColumns-action-fontSize: var(--fontSizeLg); --PickerColumns-confirmAction-color: var(--colors-brand-5); --PickerColumns-cancelAction-color: #666; --PickerColumns-option-fontSize: var(--fontSizeLg); --PickerColumns-optionText-color: var(--text-color); --PickerColumns-optionDisabled-opacity: 0.3; --PickerColumns-loadingIcon-color: var(--icon-color); --PickerColumns-loadingMask-Color: rgba(255, 255, 255, 0.9); --PopOver-bg: var(--colors-neutral-fill-11); --PopOverAble-iconColor: inherit; --PopOverAble-onHover-iconColor: inherit; --PopUp-cancelAction-color: #666; --PopUp-confirmAction-color: var(--primary); --Property-title-bg: var(--colors-neutral-fill-10); --Property-label-bg: var(--colors-neutral-fill-10); --Portlet-borderColor: var(--borderColor); --Portlet-borderStyle: solid; --Portlet-borderWidth: var(--borderWidth); --Portlet-borderRadius: var(--borderRadius); --QuickEdit-iconSize: 0.875rem; --QuickEdit-onFocus-borderColor: var(--info); --QuickEdit-onFocus-borderWidth: var(--borderWidth); --Remark-bg: var(--colors-neutral-text-11); --Remark-borderColor: var(--colors-neutral-line-8); --Remark-borderWidth: var(--borders-width-2); --Remark-icon-fontSize: var(--fonts-size-8); --Remark-iconColor: var(--colors-neutral-text-5); --Remark-marginLeft: var(--gap-sm); --Remark-onHover-bg: var(--colors-warning-5); --Remark-onHover-borderColor: var(--colors-warning-5); --Remark-onHover-iconColor: var(--colors-neutral-text-11); --Remark-width: var(--sizes-size-9); --Sparkline-line-color: var(--info); --Sparkline-area-color: rgba(0, 123, 255, 0.1); --Table-fixedLeftLast-boxShadow: inset 10px 0 8px -8px #00000026; --Table-fixedRightFirst-boxShadow: inset -10px 0 8px -8px #00000026; --Table-loading-padding: 30px 0px; --TagControl-sugBtn-bg: transparent; --TagControl-sugBtn-border: var(--colors-neutral-line-7); --TagControl-sugBtn-borderRadius: var(--borders-radius-2); --TagControl-sugBtn-borderWidth: var(--borders-width-2); --TagControl-sugBtn-color: var(--colors-neutral-text-2); --TagControl-sugBtn-fontSize: var(--fonts-size-8); --TagControl-sugBtn-fontWeight: var(--fonts-weight-6); --TagControl-sugBtn-height: var(--sizes-base-15); --TagControl-sugBtn-lineHeight: var(--fonts-lineHeight-2); --TagControl-sugBtn-onActive-bg: var(--colors-neutral-fill-8); --TagControl-sugBtn-onActive-border: var(--colors-neutral-line-5); --TagControl-sugBtn-onActive-color: var(--TagControl-sugBtn-color); --TagControl-sugBtn-onHover-bg: var(--colors-neutral-fill-8); --TagControl-sugBtn-onHover-border: var(--colors-neutral-line-6); --TagControl-sugBtn-onHover-color: var(--colors-neutral-text-2); --TagControl-sugBtn-paddingX: var(--sizes-size-6); --TagControl-sugBtn-paddingY: calc( ( var(--TagControl-sugBtn-height) - var(--borders-width-2) * 2 - var(--TagControl-sugBtn-lineHeight) * var(--TagControl-sugBtn-fontSize) ) / 2 ); --TagControl-sugTip-color: var(--colors-brand-5); --Tooltip--attr-bg: rgba(0, 0, 0, 0.7); --Tooltip--attr-borderColor: var(--borderColor); --Tooltip--attr-borderRadius: var(--borderRadius); --Tooltip--attr-borderWidth: 0; --Tooltip--attr-boxShadow: var(--shadows-shadow-normal); --Tooltip--attr-color: #fff; --Tooltip--attr-fontSize: var(--fontSizeSm); --Tooltip--attr-gap: var(--gap-sm); --Tooltip--attr-lineHeigt: var(--lineHeightBase); --Tooltip--attr-paddingX: 0.625rem; --Tooltip--attr-paddingY: 0.125rem; --Tooltip--attr-transition: all var(--animation-duration) ease-in-out; --Tooltip-arrow-color: var(--Tooltip-bg); --Tooltip-arrow-color--dark: rgba(7, 12, 20, 0.85); --Tooltip-arrow-height: 0.25rem; --Tooltip-arrow-outerColor: #d1d5db; --Tooltip-arrow-width: 0.5rem; --Tooltip-bg: var(--background); --Tooltip-bg--dark: rgba(7, 12, 20, 0.85); --Tooltip-body-color: var(--text-color); --Tooltip-body-color--dark: #fff; --Tooltip-body-paddingX: var(--gap-base); --Tooltip-body-paddingY: var(--gap-sm); --Tooltip-borderColor: var(--borderColor); --Tooltip-borderRadius: var(--borderRadiusLg); --Tooltip-borderWidth: var(--borderWidth); --Tooltip-boxShadow: var(--boxTooltipShadow); --Tooltip-boxShadow--dark: 0 2px 8px 0 rgba(7, 12, 20, 0.12); --Tooltip-fontSize: var(--fontSizeSm); --Tooltip-fontWeight: var(--fonts-weight-5); --Tooltip-maxWidth: 15rem; --Tooltip-minWidth: auto; --Tooltip-title-fontWeight: bold; --Tooltip-title-bg: rgb(247.35, 247.35, 247.35); --Tooltip-title-borderBottom-color: rgb(234.6, 234.6, 234.6); --Tooltip-title-color: var(--text--loud-color); --Tooltip-title-color--dark: #fff; --Tooltip-title-paddingX: var(--gap-base); --Tooltip-title-paddingY: var(--gap-sm); --Transfer-title-bg: var(--colors-neutral-fill-10); --Transfer-selection-maxHeight: 21.875rem; --TransferSelect--table-heading-bg: var(--colors-neutral-fill-11); --TransferSelect--normal-heading-bg: var(--colors-neutral-fill-10); --TransferSelect-heading-borderBottom: var(--borders-width-1); --TabsTransfer-title-bg: var(--colors-neutral-fill-10); --TabsTransfer-border-color: var(--colors-neutral-fill-8); --AnchorNav-links-container-borderRight: 0.125rem solid #d3dae0; --AnchorNav-onActive-borderWidth: 0 0 0 0.125rem; --ColumnToggler-backgroundColor: var(--colors-neutral-fill-11); --ColumnToggler-borderRadius: 0.25rem; --ColumnToggler-lineHeight: 1.5rem; --ColumnToggler-title-fontColor: #080e1a; --ColumnToggler-fontColor: #151a26; --ColumnToggler-item-backgroundColor: #f6f7f8; --ColumnToggler-item-backgroundColor-onHover: rgba(36, 104, 242, 0.1); --ColumnToggler-item-paddingX: 0.5rem; --ColumnToggler-item-paddingY: 0.25rem; --ColumnToggler-item-margin: 0.25rem; --ColumnToggler-item-dragBar-color: #d8d8d8; --InputFormula-header-bgColor: var(--colors-neutral-fill-10); --InputFormula-icon-size: 1.125rem; --InputFormula-icon-color-onActive: var(--colors-brand-5); --InputFormula-code-bgColor: var(--colors-neutral-fill-10); --InputFormula-input-schema-height: var(--sizes-base-12); --UserSelect--post-bg: var(--colors-brand-6); --UserSelect--department-bg: #ffab52; --UserSelect--role-bg: #0bc286; --UserSelect--border-color: #f7f7f9; --UserSelect--content-bg: #f5f7f8; --UserSelect--bread-color: #5e626a; --Cascader-border-color: #f7f7f9; --Cascader-border-active-bg-color: #f7f7f9; --Cascader-option-disable-color: #b8babf; --Tag-content-fontSize: var(--fontSizeSm); --Tag-height: 1.5rem; --Tag-borderRadius: 0.125rem; --Tag-fontColor: #151a26; --Tag-default-color: #f2f2f4; --Tag-inactive-color: #b8babf; --Tag-active-color: var(--colors-brand-5); --Tag-processing-color: var(--colors-brand-6); --Tag-success-color: var(--colors-success-5); --Tag-error-color: var(--colors-error-5); --Tag-warning-color: var(--colors-warning-5); --Tag-checkable-bgColor: #f2f2f4; --Tag-checkable-bgColor-onDisable: #e6e6e8; --Tag-checkable-bgColor-onHover: #e6e6e8; --Tag-checkable-bgColor-onActive: #e6e6e8; --Tag-checkable-bgColor-onHover-onChecked: var(--colors-link-6); --Tag-checkable-bgColor-onActive-onChecked: var(--colors-link-4); --Tag-checkable-bgColor-onChecked: var(--colors-brand-5); --Tag-checkable-fontColor-onDisable: #b4b6ba; --menu-background: #fff; --menu-box-shadow: 0 2px 8px 0 rgba(7, 12, 20, 0.12); --menu-border-radius: 4px; --menu-font-color: #151b26; --menu-font-family: PingFangSC-Regular; --menu-border-color: #e8e9eb; --menu-active-color: var(--colors-brand-5); --menu-hover-bg-color: #e6f0ff; --menu-disabled-color: #b8babf; --default-icon-color: #84868c; --default-padding: 4px 12px; --menu-min-width: 150px; --menu-sub-min-width: 100px; --SearchBox-width: 9.375rem; --SearchBox-history-dropdown-maxWidth: calc(var(--SearchBox-width) * 2); --SearchBox-history-dropdown-maxHeight: 12.5rem; --SearchBox-hover-color: var(--colors-brand-5); --SearchBox-focus-color: var(--colors-brand-4); --SearchBox-search-icon-color: var(--colors-neutral-text-5); --SearchBox-enhonce-icon-color: var(--button-primary-default-font-color); --SearchBox-clearable-icon-color: var(--colors-neutral-text-7); --SearchBox-clearable-icon-size: var(--sizes-size-9); --SearchBox-height: var(--sizes-base-15); --SearchBox-disabled-color: var(--colors-neutral-text-10); --SearchBox-enhonce-disabled-color: var(--colors-neutral-text-9); --SearchBox-enhonce-disabled-search-color: var(--colors-neutral-text-6); --SearchBox-enhonce-clearable-gap: var(--borders-radius-4); --SearchBox-search-btn-color--disabled: var(--colors-neutral-fill-6); --IconSelect-searchBox-width: 15.375rem; --IconSelect-type-item-height: 3rem; --IconSelect-dialog-height: 50vh; --IconSelect-base-margin: var(--gap-base); --IconSelect-xs-margin: var(--gap-xs); --IconSelect-sm-padding: 0.375rem; --IconSelect-base-border-radius: var(--borderRadiusMd); --IconSelect-border-color: var(--menu-border-color); --IconSelect-preview-icon-size: 1rem; --IconSelect-list-icon-size: 1.5rem; --IconSelect-type-font-size: var(--fontSizeSm); --IconSelect-active-badge-color: var(--colors-neutral-fill-11); --IconSelect-active-bg-color: var(--colors-brand-5); --IconSelect-icon-name-color: var(--colors-neutral-text-2); --IconSelect-icon-id-color: var(--colors-neutral-text-5); --IconSelect-icon-placeholder-color: var(--colors-neutral-text-6); --IconSelect-type-width: 5.5rem; --IconSelect-type-li-height: 2rem; --IconSelect-type-li-padding: var(--gap-md); } @media (max-width: 767px) { :root { --fontSizeBase: var(--fontSizeLg); } } :root, .AMISCSSWrapper { --button-default-default-top-border-color: var(--colors-neutral-line-8); --button-default-default-top-border-style: var(--borders-style-2); --button-default-default-top-border-width: var(--borders-width-2); --button-default-default-left-border-color: var(--colors-neutral-line-8); --button-default-default-left-border-style: var(--borders-style-2); --button-default-default-left-border-width: var(--borders-width-2); --button-default-default-right-border-color: var(--colors-neutral-line-8); --button-default-default-right-border-style: var(--borders-style-2); --button-default-default-right-border-width: var(--borders-width-2); --button-default-default-bottom-border-color: var(--colors-neutral-line-8); --button-default-default-bottom-border-style: var(--borders-style-2); --button-default-default-bottom-border-width: var(--borders-width-2); --button-default-default-shadow: var(--shadows-shadow-none); --button-default-default-bg-color: var(--colors-neutral-fill-11); --button-default-default-font-color: var(--colors-neutral-text-2); --button-default-hover-top-border-color: var(--colors-brand-5); --button-default-hover-top-border-style: var(--borders-style-2); --button-default-hover-top-border-width: var(--borders-width-2); --button-default-hover-left-border-color: var(--colors-brand-5); --button-default-hover-left-border-style: var(--borders-style-2); --button-default-hover-left-border-width: var(--borders-width-2); --button-default-hover-right-border-color: var(--colors-brand-5); --button-default-hover-right-border-style: var(--borders-style-2); --button-default-hover-right-border-width: var(--borders-width-2); --button-default-hover-bottom-border-color: var(--colors-brand-5); --button-default-hover-bottom-border-style: var(--borders-style-2); --button-default-hover-bottom-border-width: var(--borders-width-2); --button-default-hover-shadow: var(--shadows-shadow-none); --button-default-hover-bg-color: var(--colors-neutral-fill-11); --button-default-hover-font-color: var(--colors-brand-5); --button-default-active-top-border-color: var(--colors-brand-4); --button-default-active-top-border-style: var(--borders-style-2); --button-default-active-top-border-width: var(--borders-width-2); --button-default-active-left-border-color: var(--colors-brand-4); --button-default-active-left-border-style: var(--borders-style-2); --button-default-active-left-border-width: var(--borders-width-2); --button-default-active-right-border-color: var(--colors-brand-4); --button-default-active-right-border-style: var(--borders-style-2); --button-default-active-right-border-width: var(--borders-width-2); --button-default-active-bottom-border-color: var(--colors-brand-4); --button-default-active-bottom-border-style: var(--borders-style-2); --button-default-active-bottom-border-width: var(--borders-width-2); --button-default-active-shadow: var(--shadows-shadow-none); --button-default-active-bg-color: var(--colors-neutral-fill-11); --button-default-active-font-color: var(--colors-brand-4); --button-default-disabled-top-border-color: var(--colors-neutral-line-10); --button-default-disabled-top-border-style: var(--borders-style-2); --button-default-disabled-top-border-width: var(--borders-width-2); --button-default-disabled-left-border-color: var(--colors-neutral-line-10); --button-default-disabled-left-border-style: var(--borders-style-2); --button-default-disabled-left-border-width: var(--borders-width-2); --button-default-disabled-right-border-color: var(--colors-neutral-line-10); --button-default-disabled-right-border-style: var(--borders-style-2); --button-default-disabled-right-border-width: var(--borders-width-2); --button-default-disabled-bottom-border-color: var(--colors-neutral-line-10); --button-default-disabled-bottom-border-style: var(--borders-style-2); --button-default-disabled-bottom-border-width: var(--borders-width-2); --button-default-disabled-shadow: var(--shadows-shadow-none); --button-default-disabled-bg-color: var(--colors-neutral-fill-10); --button-default-disabled-font-color: var(--colors-neutral-text-6); --button-primary-default-top-border-color: var(--colors-brand-5); --button-primary-default-top-border-style: var(--borders-style-2); --button-primary-default-top-border-width: var(--borders-width-2); --button-primary-default-left-border-color: var(--colors-brand-5); --button-primary-default-left-border-style: var(--borders-style-2); --button-primary-default-left-border-width: var(--borders-width-2); --button-primary-default-right-border-color: var(--colors-brand-5); --button-primary-default-right-border-style: var(--borders-style-2); --button-primary-default-right-border-width: var(--borders-width-2); --button-primary-default-bottom-border-color: var(--colors-brand-5); --button-primary-default-bottom-border-style: var(--borders-style-2); --button-primary-default-bottom-border-width: var(--borders-width-2); --button-primary-default-shadow: var(--shadows-shadow-none); --button-primary-default-bg-color: var(--colors-brand-5); --button-primary-default-font-color: var(--colors-neutral-text-11); --button-primary-hover-top-border-color: var(--colors-brand-6); --button-primary-hover-top-border-style: var(--borders-style-2); --button-primary-hover-top-border-width: var(--borders-width-2); --button-primary-hover-left-border-color: var(--colors-brand-6); --button-primary-hover-left-border-style: var(--borders-style-2); --button-primary-hover-left-border-width: var(--borders-width-2); --button-primary-hover-right-border-color: var(--colors-brand-6); --button-primary-hover-right-border-style: var(--borders-style-2); --button-primary-hover-right-border-width: var(--borders-width-2); --button-primary-hover-bottom-border-color: var(--colors-brand-6); --button-primary-hover-bottom-border-style: var(--borders-style-2); --button-primary-hover-bottom-border-width: var(--borders-width-2); --button-primary-hover-shadow: var(--shadows-shadow-none); --button-primary-hover-bg-color: var(--colors-brand-6); --button-primary-hover-font-color: var(--colors-neutral-text-11); --button-primary-active-top-border-color: var(--colors-brand-4); --button-primary-active-top-border-style: var(--borders-style-2); --button-primary-active-top-border-width: var(--borders-width-2); --button-primary-active-left-border-color: var(--colors-brand-4); --button-primary-active-left-border-style: var(--borders-style-2); --button-primary-active-left-border-width: var(--borders-width-2); --button-primary-active-right-border-color: var(--colors-brand-4); --button-primary-active-right-border-style: var(--borders-style-2); --button-primary-active-right-border-width: var(--borders-width-2); --button-primary-active-bottom-border-color: var(--colors-brand-4); --button-primary-active-bottom-border-style: var(--borders-style-2); --button-primary-active-bottom-border-width: var(--borders-width-2); --button-primary-active-shadow: var(--shadows-shadow-none); --button-primary-active-bg-color: var(--colors-brand-4); --button-primary-active-font-color: var(--colors-neutral-text-11); --button-primary-disabled-top-border-color: var(--colors-neutral-line-10); --button-primary-disabled-top-border-style: var(--borders-style-2); --button-primary-disabled-top-border-width: var(--borders-width-2); --button-primary-disabled-left-border-color: var(--colors-neutral-line-10); --button-primary-disabled-left-border-style: var(--borders-style-2); --button-primary-disabled-left-border-width: var(--borders-width-2); --button-primary-disabled-right-border-color: var(--colors-neutral-line-10); --button-primary-disabled-right-border-style: var(--borders-style-2); --button-primary-disabled-right-border-width: var(--borders-width-2); --button-primary-disabled-bottom-border-color: var(--colors-neutral-line-10); --button-primary-disabled-bottom-border-style: var(--borders-style-2); --button-primary-disabled-bottom-border-width: var(--borders-width-2); --button-primary-disabled-shadow: var(--shadows-shadow-none); --button-primary-disabled-bg-color: var(--colors-neutral-fill-10); --button-primary-disabled-font-color: var(--colors-neutral-text-6); --button-secondary-default-top-border-color: var(--colors-neutral-line-6); --button-secondary-default-top-border-style: var(--borders-style-2); --button-secondary-default-top-border-width: var(--borders-width-2); --button-secondary-default-left-border-color: var(--colors-neutral-line-6); --button-secondary-default-left-border-style: var(--borders-style-2); --button-secondary-default-left-border-width: var(--borders-width-2); --button-secondary-default-right-border-color: var(--colors-neutral-line-6); --button-secondary-default-right-border-style: var(--borders-style-2); --button-secondary-default-right-border-width: var(--borders-width-2); --button-secondary-default-bottom-border-color: var(--colors-neutral-line-6); --button-secondary-default-bottom-border-style: var(--borders-style-2); --button-secondary-default-bottom-border-width: var(--borders-width-2); --button-secondary-default-shadow: var(--shadows-shadow-none); --button-secondary-default-bg-color: var(--colors-neutral-fill-6); --button-secondary-default-font-color: var(--colors-neutral-text-11); --button-secondary-hover-top-border-color: var(--colors-neutral-line-5); --button-secondary-hover-top-border-style: var(--borders-style-2); --button-secondary-hover-top-border-width: var(--borders-width-2); --button-secondary-hover-left-border-color: var(--colors-neutral-line-5); --button-secondary-hover-left-border-style: var(--borders-style-2); --button-secondary-hover-left-border-width: var(--borders-width-2); --button-secondary-hover-right-border-color: var(--colors-neutral-line-5); --button-secondary-hover-right-border-style: var(--borders-style-2); --button-secondary-hover-right-border-width: var(--borders-width-2); --button-secondary-hover-bottom-border-color: var(--colors-neutral-line-5); --button-secondary-hover-bottom-border-style: var(--borders-style-2); --button-secondary-hover-bottom-border-width: var(--borders-width-2); --button-secondary-hover-shadow: var(--shadows-shadow-none); --button-secondary-hover-bg-color: var(--colors-neutral-fill-5); --button-secondary-hover-font-color: var(--colors-neutral-text-11); --button-secondary-active-top-border-color: var(--colors-neutral-line-4); --button-secondary-active-top-border-style: var(--borders-style-2); --button-secondary-active-top-border-width: var(--borders-width-2); --button-secondary-active-left-border-color: var(--colors-neutral-line-4); --button-secondary-active-left-border-style: var(--borders-style-2); --button-secondary-active-left-border-width: var(--borders-width-2); --button-secondary-active-right-border-color: var(--colors-neutral-line-4); --button-secondary-active-right-border-style: var(--borders-style-2); --button-secondary-active-right-border-width: var(--borders-width-2); --button-secondary-active-bottom-border-color: var(--colors-neutral-line-4); --button-secondary-active-bottom-border-style: var(--borders-style-2); --button-secondary-active-bottom-border-width: var(--borders-width-2); --button-secondary-active-shadow: var(--shadows-shadow-none); --button-secondary-active-bg-color: var(--colors-neutral-fill-4); --button-secondary-active-font-color: var(--colors-neutral-text-11); --button-secondary-disabled-top-border-color: var(--colors-neutral-line-10); --button-secondary-disabled-top-border-style: var(--borders-style-2); --button-secondary-disabled-top-border-width: var(--borders-width-2); --button-secondary-disabled-left-border-color: var(--colors-neutral-line-10); --button-secondary-disabled-left-border-style: var(--borders-style-2); --button-secondary-disabled-left-border-width: var(--borders-width-2); --button-secondary-disabled-right-border-color: var(--colors-neutral-line-10); --button-secondary-disabled-right-border-style: var(--borders-style-2); --button-secondary-disabled-right-border-width: var(--borders-width-2); --button-secondary-disabled-bottom-border-color: var( --colors-neutral-line-10 ); --button-secondary-disabled-bottom-border-style: var(--borders-style-2); --button-secondary-disabled-bottom-border-width: var(--borders-width-2); --button-secondary-disabled-shadow: var(--shadows-shadow-none); --button-secondary-disabled-bg-color: var(--colors-neutral-fill-10); --button-secondary-disabled-font-color: var(--colors-neutral-text-6); --button-enhance-default-top-border-color: var(--colors-brand-5); --button-enhance-default-top-border-style: var(--borders-style-2); --button-enhance-default-top-border-width: var(--borders-width-2); --button-enhance-default-left-border-color: var(--colors-brand-5); --button-enhance-default-left-border-style: var(--borders-style-2); --button-enhance-default-left-border-width: var(--borders-width-2); --button-enhance-default-right-border-color: var(--colors-brand-5); --button-enhance-default-right-border-style: var(--borders-style-2); --button-enhance-default-right-border-width: var(--borders-width-2); --button-enhance-default-bottom-border-color: var(--colors-brand-5); --button-enhance-default-bottom-border-style: var(--borders-style-2); --button-enhance-default-bottom-border-width: var(--borders-width-2); --button-enhance-default-shadow: var(--shadows-shadow-none); --button-enhance-default-bg-color: var(--colors-neutral-fill-11); --button-enhance-default-font-color: var(--colors-brand-5); --button-enhance-hover-top-border-color: var(--colors-brand-6); --button-enhance-hover-top-border-style: var(--borders-style-2); --button-enhance-hover-top-border-width: var(--borders-width-2); --button-enhance-hover-left-border-color: var(--colors-brand-6); --button-enhance-hover-left-border-style: var(--borders-style-2); --button-enhance-hover-left-border-width: var(--borders-width-2); --button-enhance-hover-right-border-color: var(--colors-brand-6); --button-enhance-hover-right-border-style: var(--borders-style-2); --button-enhance-hover-right-border-width: var(--borders-width-2); --button-enhance-hover-bottom-border-color: var(--colors-brand-6); --button-enhance-hover-bottom-border-style: var(--borders-style-2); --button-enhance-hover-bottom-border-width: var(--borders-width-2); --button-enhance-hover-shadow: var(--shadows-shadow-none); --button-enhance-hover-bg-color: var(--colors-neutral-fill-11); --button-enhance-hover-font-color: var(--colors-brand-6); --button-enhance-active-top-border-color: var(--colors-brand-4); --button-enhance-active-top-border-style: var(--borders-style-2); --button-enhance-active-top-border-width: var(--borders-width-2); --button-enhance-active-left-border-color: var(--colors-brand-4); --button-enhance-active-left-border-style: var(--borders-style-2); --button-enhance-active-left-border-width: var(--borders-width-2); --button-enhance-active-right-border-color: var(--colors-brand-4); --button-enhance-active-right-border-style: var(--borders-style-2); --button-enhance-active-right-border-width: var(--borders-width-2); --button-enhance-active-bottom-border-color: var(--colors-brand-4); --button-enhance-active-bottom-border-style: var(--borders-style-2); --button-enhance-active-bottom-border-width: var(--borders-width-2); --button-enhance-active-shadow: var(--shadows-shadow-none); --button-enhance-active-bg-color: var(--colors-neutral-fill-11); --button-enhance-active-font-color: var(--colors-brand-4); --button-enhance-disabled-top-border-color: var(--colors-neutral-line-10); --button-enhance-disabled-top-border-style: var(--borders-style-2); --button-enhance-disabled-top-border-width: var(--borders-width-2); --button-enhance-disabled-left-border-color: var(--colors-neutral-line-10); --button-enhance-disabled-left-border-style: var(--borders-style-2); --button-enhance-disabled-left-border-width: var(--borders-width-2); --button-enhance-disabled-right-border-color: var(--colors-neutral-line-10); --button-enhance-disabled-right-border-style: var(--borders-style-2); --button-enhance-disabled-right-border-width: var(--borders-width-2); --button-enhance-disabled-bottom-border-color: var(--colors-neutral-line-10); --button-enhance-disabled-bottom-border-style: var(--borders-style-2); --button-enhance-disabled-bottom-border-width: var(--borders-width-2); --button-enhance-disabled-shadow: var(--shadows-shadow-none); --button-enhance-disabled-bg-color: var(--colors-neutral-fill-10); --button-enhance-disabled-font-color: var(--colors-neutral-text-6); --button-info-default-top-border-color: var(--colors-info-5); --button-info-default-top-border-style: var(--borders-style-2); --button-info-default-top-border-width: var(--borders-width-2); --button-info-default-left-border-color: var(--colors-info-5); --button-info-default-left-border-style: var(--borders-style-2); --button-info-default-left-border-width: var(--borders-width-2); --button-info-default-right-border-color: var(--colors-info-5); --button-info-default-right-border-style: var(--borders-style-2); --button-info-default-right-border-width: var(--borders-width-2); --button-info-default-bottom-border-color: var(--colors-info-5); --button-info-default-bottom-border-style: var(--borders-style-2); --button-info-default-bottom-border-width: var(--borders-width-2); --button-info-default-shadow: var(--shadows-shadow-none); --button-info-default-bg-color: var(--colors-info-5); --button-info-default-font-color: var(--colors-neutral-text-11); --button-info-hover-top-border-color: var(--colors-info-6); --button-info-hover-top-border-style: var(--borders-style-2); --button-info-hover-top-border-width: var(--borders-width-2); --button-info-hover-left-border-color: var(--colors-info-6); --button-info-hover-left-border-style: var(--borders-style-2); --button-info-hover-left-border-width: var(--borders-width-2); --button-info-hover-right-border-color: var(--colors-info-6); --button-info-hover-right-border-style: var(--borders-style-2); --button-info-hover-right-border-width: var(--borders-width-2); --button-info-hover-bottom-border-color: var(--colors-info-6); --button-info-hover-bottom-border-style: var(--borders-style-2); --button-info-hover-bottom-border-width: var(--borders-width-2); --button-info-hover-shadow: var(--shadows-shadow-none); --button-info-hover-bg-color: var(--colors-info-6); --button-info-hover-font-color: var(--colors-neutral-text-11); --button-info-active-top-border-color: var(--colors-info-4); --button-info-active-top-border-style: var(--borders-style-2); --button-info-active-top-border-width: var(--borders-width-2); --button-info-active-left-border-color: var(--colors-info-4); --button-info-active-left-border-style: var(--borders-style-2); --button-info-active-left-border-width: var(--borders-width-2); --button-info-active-right-border-color: var(--colors-info-4); --button-info-active-right-border-style: var(--borders-style-2); --button-info-active-right-border-width: var(--borders-width-2); --button-info-active-bottom-border-color: var(--colors-info-4); --button-info-active-bottom-border-style: var(--borders-style-2); --button-info-active-bottom-border-width: var(--borders-width-2); --button-info-active-shadow: var(--shadows-shadow-none); --button-info-active-bg-color: var(--colors-info-4); --button-info-active-font-color: var(--colors-neutral-text-11); --button-info-disabled-top-border-color: var(--colors-neutral-line-10); --button-info-disabled-top-border-style: var(--borders-style-2); --button-info-disabled-top-border-width: var(--borders-width-2); --button-info-disabled-left-border-color: var(--colors-neutral-line-10); --button-info-disabled-left-border-style: var(--borders-style-2); --button-info-disabled-left-border-width: var(--borders-width-2); --button-info-disabled-right-border-color: var(--colors-neutral-line-10); --button-info-disabled-right-border-style: var(--borders-style-2); --button-info-disabled-right-border-width: var(--borders-width-2); --button-info-disabled-bottom-border-color: var(--colors-neutral-line-10); --button-info-disabled-bottom-border-style: var(--borders-style-2); --button-info-disabled-bottom-border-width: var(--borders-width-2); --button-info-disabled-shadow: var(--shadows-shadow-none); --button-info-disabled-bg-color: var(--colors-neutral-fill-10); --button-info-disabled-font-color: var(--colors-neutral-text-6); --button-success-default-top-border-color: var(--colors-success-5); --button-success-default-top-border-style: var(--borders-style-2); --button-success-default-top-border-width: var(--borders-width-2); --button-success-default-left-border-color: var(--colors-success-5); --button-success-default-left-border-style: var(--borders-style-2); --button-success-default-left-border-width: var(--borders-width-2); --button-success-default-right-border-color: var(--colors-success-5); --button-success-default-right-border-style: var(--borders-style-2); --button-success-default-right-border-width: var(--borders-width-2); --button-success-default-bottom-border-color: var(--colors-success-5); --button-success-default-bottom-border-style: var(--borders-style-2); --button-success-default-bottom-border-width: var(--borders-width-2); --button-success-default-shadow: var(--shadows-shadow-none); --button-success-default-bg-color: var(--colors-success-5); --button-success-default-font-color: var(--colors-neutral-text-11); --button-success-hover-top-border-color: var(--colors-success-6); --button-success-hover-top-border-style: var(--borders-style-2); --button-success-hover-top-border-width: var(--borders-width-2); --button-success-hover-left-border-color: var(--colors-success-6); --button-success-hover-left-border-style: var(--borders-style-2); --button-success-hover-left-border-width: var(--borders-width-2); --button-success-hover-right-border-color: var(--colors-success-6); --button-success-hover-right-border-style: var(--borders-style-2); --button-success-hover-right-border-width: var(--borders-width-2); --button-success-hover-bottom-border-color: var(--colors-success-6); --button-success-hover-bottom-border-style: var(--borders-style-2); --button-success-hover-bottom-border-width: var(--borders-width-2); --button-success-hover-shadow: var(--shadows-shadow-none); --button-success-hover-bg-color: var(--colors-success-6); --button-success-hover-font-color: var(--colors-neutral-text-11); --button-success-active-top-border-color: var(--colors-success-4); --button-success-active-top-border-style: var(--borders-style-2); --button-success-active-top-border-width: var(--borders-width-2); --button-success-active-left-border-color: var(--colors-success-4); --button-success-active-left-border-style: var(--borders-style-2); --button-success-active-left-border-width: var(--borders-width-2); --button-success-active-right-border-color: var(--colors-success-4); --button-success-active-right-border-style: var(--borders-style-2); --button-success-active-right-border-width: var(--borders-width-2); --button-success-active-bottom-border-color: var(--colors-success-4); --button-success-active-bottom-border-style: var(--borders-style-2); --button-success-active-bottom-border-width: var(--borders-width-2); --button-success-active-shadow: var(--shadows-shadow-none); --button-success-active-bg-color: var(--colors-success-4); --button-success-active-font-color: var(--colors-neutral-text-11); --button-success-disabled-top-border-color: var(--colors-neutral-line-10); --button-success-disabled-top-border-style: var(--borders-style-2); --button-success-disabled-top-border-width: var(--borders-width-2); --button-success-disabled-left-border-color: var(--colors-neutral-line-10); --button-success-disabled-left-border-style: var(--borders-style-2); --button-success-disabled-left-border-width: var(--borders-width-2); --button-success-disabled-right-border-color: var(--colors-neutral-line-10); --button-success-disabled-right-border-style: var(--borders-style-2); --button-success-disabled-right-border-width: var(--borders-width-2); --button-success-disabled-bottom-border-color: var(--colors-neutral-line-10); --button-success-disabled-bottom-border-style: var(--borders-style-2); --button-success-disabled-bottom-border-width: var(--borders-width-2); --button-success-disabled-shadow: var(--shadows-shadow-none); --button-success-disabled-bg-color: var(--colors-neutral-fill-10); --button-success-disabled-font-color: var(--colors-neutral-text-6); --button-warning-default-top-border-color: var(--colors-warning-5); --button-warning-default-top-border-style: var(--borders-style-2); --button-warning-default-top-border-width: var(--borders-width-2); --button-warning-default-left-border-color: var(--colors-warning-5); --button-warning-default-left-border-style: var(--borders-style-2); --button-warning-default-left-border-width: var(--borders-width-2); --button-warning-default-right-border-color: var(--colors-warning-5); --button-warning-default-right-border-style: var(--borders-style-2); --button-warning-default-right-border-width: var(--borders-width-2); --button-warning-default-bottom-border-color: var(--colors-warning-5); --button-warning-default-bottom-border-style: var(--borders-style-2); --button-warning-default-bottom-border-width: var(--borders-width-2); --button-warning-default-shadow: var(--shadows-shadow-none); --button-warning-default-bg-color: var(--colors-warning-5); --button-warning-default-font-color: var(--colors-neutral-text-11); --button-warning-hover-top-border-color: var(--colors-warning-6); --button-warning-hover-top-border-style: var(--borders-style-2); --button-warning-hover-top-border-width: var(--borders-width-2); --button-warning-hover-left-border-color: var(--colors-warning-6); --button-warning-hover-left-border-style: var(--borders-style-2); --button-warning-hover-left-border-width: var(--borders-width-2); --button-warning-hover-right-border-color: var(--colors-warning-6); --button-warning-hover-right-border-style: var(--borders-style-2); --button-warning-hover-right-border-width: var(--borders-width-2); --button-warning-hover-bottom-border-color: var(--colors-warning-6); --button-warning-hover-bottom-border-style: var(--borders-style-2); --button-warning-hover-bottom-border-width: var(--borders-width-2); --button-warning-hover-shadow: var(--shadows-shadow-none); --button-warning-hover-bg-color: var(--colors-warning-6); --button-warning-hover-font-color: var(--colors-neutral-text-11); --button-warning-active-top-border-color: var(--colors-warning-4); --button-warning-active-top-border-style: var(--borders-style-2); --button-warning-active-top-border-width: var(--borders-width-2); --button-warning-active-left-border-color: var(--colors-warning-4); --button-warning-active-left-border-style: var(--borders-style-2); --button-warning-active-left-border-width: var(--borders-width-2); --button-warning-active-right-border-color: var(--colors-warning-4); --button-warning-active-right-border-style: var(--borders-style-2); --button-warning-active-right-border-width: var(--borders-width-2); --button-warning-active-bottom-border-color: var(--colors-warning-4); --button-warning-active-bottom-border-style: var(--borders-style-2); --button-warning-active-bottom-border-width: var(--borders-width-2); --button-warning-active-shadow: var(--shadows-shadow-none); --button-warning-active-bg-color: var(--colors-warning-4); --button-warning-active-font-color: var(--colors-neutral-text-11); --button-warning-disabled-top-border-color: var(--colors-neutral-line-10); --button-warning-disabled-top-border-style: var(--borders-style-2); --button-warning-disabled-top-border-width: var(--borders-width-2); --button-warning-disabled-left-border-color: var(--colors-neutral-line-10); --button-warning-disabled-left-border-style: var(--borders-style-2); --button-warning-disabled-left-border-width: var(--borders-width-2); --button-warning-disabled-right-border-color: var(--colors-neutral-line-10); --button-warning-disabled-right-border-style: var(--borders-style-2); --button-warning-disabled-right-border-width: var(--borders-width-2); --button-warning-disabled-bottom-border-color: var(--colors-neutral-line-10); --button-warning-disabled-bottom-border-style: var(--borders-style-2); --button-warning-disabled-bottom-border-width: var(--borders-width-2); --button-warning-disabled-shadow: var(--shadows-shadow-none); --button-warning-disabled-bg-color: var(--colors-neutral-fill-10); --button-warning-disabled-font-color: var(--colors-neutral-text-6); --button-danger-default-top-border-color: var(--colors-error-5); --button-danger-default-top-border-style: var(--borders-style-1); --button-danger-default-top-border-width: var(--borders-width-1); --button-danger-default-left-border-color: var(--colors-error-5); --button-danger-default-left-border-style: var(--borders-style-1); --button-danger-default-left-border-width: var(--borders-width-1); --button-danger-default-right-border-color: var(--colors-error-5); --button-danger-default-right-border-style: var(--borders-style-1); --button-danger-default-right-border-width: var(--borders-width-1); --button-danger-default-bottom-border-color: var(--colors-error-5); --button-danger-default-bottom-border-style: var(--borders-style-1); --button-danger-default-bottom-border-width: var(--borders-width-1); --button-danger-default-shadow: var(--shadows-shadow-none); --button-danger-default-bg-color: var(--colors-error-5); --button-danger-default-font-color: var(--colors-neutral-text-11); --button-danger-hover-top-border-color: var(--colors-error-6); --button-danger-hover-top-border-style: var(--borders-style-1); --button-danger-hover-top-border-width: var(--borders-width-1); --button-danger-hover-left-border-color: var(--colors-error-6); --button-danger-hover-left-border-style: var(--borders-style-1); --button-danger-hover-left-border-width: var(--borders-width-1); --button-danger-hover-right-border-color: var(--colors-error-6); --button-danger-hover-right-border-style: var(--borders-style-1); --button-danger-hover-right-border-width: var(--borders-width-1); --button-danger-hover-bottom-border-color: var(--colors-error-6); --button-danger-hover-bottom-border-style: var(--borders-style-1); --button-danger-hover-bottom-border-width: var(--borders-width-1); --button-danger-hover-shadow: var(--shadows-shadow-none); --button-danger-hover-bg-color: var(--colors-error-6); --button-danger-hover-font-color: var(--colors-neutral-text-11); --button-danger-active-top-border-color: var(--colors-error-4); --button-danger-active-top-border-style: var(--borders-style-1); --button-danger-active-top-border-width: var(--borders-width-1); --button-danger-active-left-border-color: var(--colors-error-4); --button-danger-active-left-border-style: var(--borders-style-1); --button-danger-active-left-border-width: var(--borders-width-1); --button-danger-active-right-border-color: var(--colors-error-4); --button-danger-active-right-border-style: var(--borders-style-1); --button-danger-active-right-border-width: var(--borders-width-1); --button-danger-active-bottom-border-color: var(--colors-error-4); --button-danger-active-bottom-border-style: var(--borders-style-1); --button-danger-active-bottom-border-width: var(--borders-width-1); --button-danger-active-shadow: var(--shadows-shadow-none); --button-danger-active-bg-color: var(--colors-error-4); --button-danger-active-font-color: var(--colors-neutral-text-11); --button-danger-disabled-top-border-color: var(--colors-neutral-line-10); --button-danger-disabled-top-border-style: var(--borders-style-2); --button-danger-disabled-top-border-width: var(--borders-width-2); --button-danger-disabled-left-border-color: var(--colors-neutral-line-10); --button-danger-disabled-left-border-style: var(--borders-style-2); --button-danger-disabled-left-border-width: var(--borders-width-2); --button-danger-disabled-right-border-color: var(--colors-neutral-line-10); --button-danger-disabled-right-border-style: var(--borders-style-2); --button-danger-disabled-right-border-width: var(--borders-width-2); --button-danger-disabled-bottom-border-color: var(--colors-neutral-line-10); --button-danger-disabled-bottom-border-style: var(--borders-style-2); --button-danger-disabled-bottom-border-width: var(--borders-width-2); --button-danger-disabled-shadow: var(--shadows-shadow-none); --button-danger-disabled-bg-color: var(--colors-neutral-fill-10); --button-danger-disabled-font-color: var(--colors-neutral-text-6); --button-light-default-top-border-color: var(--colors-brand-10); --button-light-default-top-border-style: var(--borders-style-2); --button-light-default-top-border-width: var(--borders-width-2); --button-light-default-left-border-color: var(--colors-brand-10); --button-light-default-left-border-style: var(--borders-style-2); --button-light-default-left-border-width: var(--borders-width-2); --button-light-default-right-border-color: var(--colors-brand-10); --button-light-default-right-border-style: var(--borders-style-2); --button-light-default-right-border-width: var(--borders-width-2); --button-light-default-bottom-border-color: var(--colors-brand-10); --button-light-default-bottom-border-style: var(--borders-style-2); --button-light-default-bottom-border-width: var(--borders-width-2); --button-light-default-shadow: var(--shadows-shadow-none); --button-light-default-bg-color: var(--colors-brand-10); --button-light-default-font-color: var(--colors-neutral-text-2); --button-light-hover-top-border-color: var(--colors-brand-9); --button-light-hover-top-border-style: var(--borders-style-2); --button-light-hover-top-border-width: var(--borders-width-2); --button-light-hover-left-border-color: var(--colors-brand-9); --button-light-hover-left-border-style: var(--borders-style-2); --button-light-hover-left-border-width: var(--borders-width-2); --button-light-hover-right-border-color: var(--colors-brand-9); --button-light-hover-right-border-style: var(--borders-style-2); --button-light-hover-right-border-width: var(--borders-width-2); --button-light-hover-bottom-border-color: var(--colors-brand-9); --button-light-hover-bottom-border-style: var(--borders-style-2); --button-light-hover-bottom-border-width: var(--borders-width-2); --button-light-hover-shadow: var(--shadows-shadow-none); --button-light-hover-bg-color: var(--colors-brand-9); --button-light-hover-font-color: var(--colors-neutral-text-2); --button-light-active-top-border-color: var(--colors-brand-7); --button-light-active-top-border-style: var(--borders-style-2); --button-light-active-top-border-width: var(--borders-width-2); --button-light-active-left-border-color: var(--colors-brand-7); --button-light-active-left-border-style: var(--borders-style-2); --button-light-active-left-border-width: var(--borders-width-2); --button-light-active-right-border-color: var(--colors-brand-7); --button-light-active-right-border-style: var(--borders-style-2); --button-light-active-right-border-width: var(--borders-width-2); --button-light-active-bottom-border-color: var(--colors-brand-7); --button-light-active-bottom-border-style: var(--borders-style-2); --button-light-active-bottom-border-width: var(--borders-width-2); --button-light-active-shadow: var(--shadows-shadow-none); --button-light-active-bg-color: var(--colors-brand-7); --button-light-active-font-color: var(--colors-neutral-text-2); --button-light-disabled-top-border-color: var(--colors-neutral-line-10); --button-light-disabled-top-border-style: var(--borders-style-2); --button-light-disabled-top-border-width: var(--borders-width-2); --button-light-disabled-left-border-color: var(--colors-neutral-line-10); --button-light-disabled-left-border-style: var(--borders-style-2); --button-light-disabled-left-border-width: var(--borders-width-2); --button-light-disabled-right-border-color: var(--colors-neutral-line-10); --button-light-disabled-right-border-style: var(--borders-style-2); --button-light-disabled-right-border-width: var(--borders-width-2); --button-light-disabled-bottom-border-color: var(--colors-neutral-line-10); --button-light-disabled-bottom-border-style: var(--borders-style-2); --button-light-disabled-bottom-border-width: var(--borders-width-2); --button-light-disabled-shadow: var(--shadows-shadow-none); --button-light-disabled-bg-color: var(--colors-neutral-fill-10); --button-light-disabled-font-color: var(--colors-neutral-text-6); --button-dark-default-top-border-color: var(--colors-neutral-line-3); --button-dark-default-top-border-style: var(--borders-style-2); --button-dark-default-top-border-width: var(--borders-width-2); --button-dark-default-left-border-color: var(--colors-neutral-line-3); --button-dark-default-left-border-style: var(--borders-style-2); --button-dark-default-left-border-width: var(--borders-width-2); --button-dark-default-right-border-color: var(--colors-neutral-line-3); --button-dark-default-right-border-style: var(--borders-style-2); --button-dark-default-right-border-width: var(--borders-width-2); --button-dark-default-bottom-border-color: var(--colors-neutral-line-3); --button-dark-default-bottom-border-style: var(--borders-style-2); --button-dark-default-bottom-border-width: var(--borders-width-2); --button-dark-default-shadow: var(--shadows-shadow-none); --button-dark-default-bg-color: var(--colors-neutral-fill-3); --button-dark-default-font-color: var(--colors-neutral-text-11); --button-dark-hover-top-border-color: var(--colors-neutral-line-4); --button-dark-hover-top-border-style: var(--borders-style-2); --button-dark-hover-top-border-width: var(--borders-width-2); --button-dark-hover-left-border-color: var(--colors-neutral-line-4); --button-dark-hover-left-border-style: var(--borders-style-2); --button-dark-hover-left-border-width: var(--borders-width-2); --button-dark-hover-right-border-color: var(--colors-neutral-line-4); --button-dark-hover-right-border-style: var(--borders-style-2); --button-dark-hover-right-border-width: var(--borders-width-2); --button-dark-hover-bottom-border-color: var(--colors-neutral-line-4); --button-dark-hover-bottom-border-style: var(--borders-style-2); --button-dark-hover-bottom-border-width: var(--borders-width-2); --button-dark-hover-shadow: var(--shadows-shadow-none); --button-dark-hover-bg-color: var(--colors-neutral-fill-4); --button-dark-hover-font-color: var(--colors-neutral-text-11); --button-dark-active-top-border-color: var(--colors-neutral-line-5); --button-dark-active-top-border-style: var(--borders-style-2); --button-dark-active-top-border-width: var(--borders-width-2); --button-dark-active-left-border-color: var(--colors-neutral-line-5); --button-dark-active-left-border-style: var(--borders-style-2); --button-dark-active-left-border-width: var(--borders-width-2); --button-dark-active-right-border-color: var(--colors-neutral-line-5); --button-dark-active-right-border-style: var(--borders-style-2); --button-dark-active-right-border-width: var(--borders-width-2); --button-dark-active-bottom-border-color: var(--colors-neutral-line-5); --button-dark-active-bottom-border-style: var(--borders-style-2); --button-dark-active-bottom-border-width: var(--borders-width-2); --button-dark-active-shadow: var(--shadows-shadow-none); --button-dark-active-bg-color: var(--colors-neutral-fill-5); --button-dark-active-font-color: var(--colors-neutral-text-11); --button-dark-disabled-top-border-color: var(--colors-neutral-line-10); --button-dark-disabled-top-border-style: var(--borders-style-2); --button-dark-disabled-top-border-width: var(--borders-width-2); --button-dark-disabled-left-border-color: var(--colors-neutral-line-10); --button-dark-disabled-left-border-style: var(--borders-style-2); --button-dark-disabled-left-border-width: var(--borders-width-2); --button-dark-disabled-right-border-color: var(--colors-neutral-line-10); --button-dark-disabled-right-border-style: var(--borders-style-2); --button-dark-disabled-right-border-width: var(--borders-width-2); --button-dark-disabled-bottom-border-color: var(--colors-neutral-line-10); --button-dark-disabled-bottom-border-style: var(--borders-style-2); --button-dark-disabled-bottom-border-width: var(--borders-width-2); --button-dark-disabled-shadow: var(--shadows-shadow-none); --button-dark-disabled-bg-color: var(--colors-neutral-fill-10); --button-dark-disabled-font-color: var(--colors-neutral-text-6); --button-link-default-top-border-color: transparent; --button-link-default-top-border-style: var(--borders-style-1); --button-link-default-top-border-width: var(--borders-width-1); --button-link-default-left-border-color: transparent; --button-link-default-left-border-style: var(--borders-style-1); --button-link-default-left-border-width: var(--borders-width-1); --button-link-default-right-border-color: transparent; --button-link-default-right-border-style: var(--borders-style-1); --button-link-default-right-border-width: var(--borders-width-1); --button-link-default-bottom-border-color: transparent; --button-link-default-bottom-border-style: var(--borders-style-1); --button-link-default-bottom-border-width: var(--borders-width-1); --button-link-default-shadow: var(--shadows-shadow-none); --button-link-default-bg-color: transparent; --button-link-default-font-color: var(--colors-link-5); --button-link-hover-top-border-color: transparent; --button-link-hover-top-border-style: var(--borders-style-1); --button-link-hover-top-border-width: var(--borders-width-1); --button-link-hover-left-border-color: transparent; --button-link-hover-left-border-style: var(--borders-style-1); --button-link-hover-left-border-width: var(--borders-width-1); --button-link-hover-right-border-color: transparent; --button-link-hover-right-border-style: var(--borders-style-1); --button-link-hover-right-border-width: var(--borders-width-1); --button-link-hover-bottom-border-color: transparent; --button-link-hover-bottom-border-style: var(--borders-style-1); --button-link-hover-bottom-border-width: var(--borders-width-1); --button-link-hover-shadow: var(--shadows-shadow-none); --button-link-hover-bg-color: transparent; --button-link-hover-font-color: var(--colors-link-6); --button-link-active-top-border-color: transparent; --button-link-active-top-border-style: var(--borders-style-1); --button-link-active-top-border-width: var(--borders-width-1); --button-link-active-left-border-color: transparent; --button-link-active-left-border-style: var(--borders-style-1); --button-link-active-left-border-width: var(--borders-width-1); --button-link-active-right-border-color: transparent; --button-link-active-right-border-style: var(--borders-style-1); --button-link-active-right-border-width: var(--borders-width-1); --button-link-active-bottom-border-color: transparent; --button-link-active-bottom-border-style: var(--borders-style-1); --button-link-active-bottom-border-width: var(--borders-width-1); --button-link-active-shadow: var(--shadows-shadow-none); --button-link-active-bg-color: transparent; --button-link-active-font-color: var(--colors-link-4); --button-link-disabled-top-border-color: transparent; --button-link-disabled-top-border-style: var(--borders-style-1); --button-link-disabled-top-border-width: var(--borders-width-1); --button-link-disabled-left-border-color: transparent; --button-link-disabled-left-border-style: var(--borders-style-1); --button-link-disabled-left-border-width: var(--borders-width-1); --button-link-disabled-right-border-color: transparent; --button-link-disabled-right-border-style: var(--borders-style-1); --button-link-disabled-right-border-width: var(--borders-width-1); --button-link-disabled-bottom-border-color: transparent; --button-link-disabled-bottom-border-style: var(--borders-style-1); --button-link-disabled-bottom-border-width: var(--borders-width-1); --button-link-disabled-shadow: var(--shadows-shadow-none); --button-link-disabled-bg-color: transparent; --button-link-disabled-font-color: var(--colors-neutral-text-6); --button-size-default-top-left-border-radius: var(--borders-radius-3); --button-size-default-top-right-border-radius: var(--borders-radius-3); --button-size-default-bottom-left-border-radius: var(--borders-radius-3); --button-size-default-bottom-right-border-radius: var(--borders-radius-3); --button-size-default-height: var(--sizes-base-16); --button-size-default-fontSize: var(--fonts-size-7); --button-size-default-minWidth: var(--sizes-size-1); --button-size-default-icon-size: var(--sizes-size-8); --button-size-default-fontWeight: var(--fonts-weight-6); --button-size-default-lineHeight: var(--fonts-lineHeight-2); --button-size-default-icon-margin: var(--sizes-size-3); --button-size-default-marginTop: var(--sizes-size-0); --button-size-default-marginLeft: var(--sizes-size-0); --button-size-default-paddingTop: var(--sizes-size-3); --button-size-default-marginRight: var(--sizes-size-0); --button-size-default-paddingLeft: var(--sizes-size-7); --button-size-default-marginBottom: var(--sizes-size-0); --button-size-default-paddingRight: var(--sizes-size-7); --button-size-default-paddingBottom: var(--sizes-size-3); --button-size-xs-top-left-border-radius: var(--borders-radius-3); --button-size-xs-top-right-border-radius: var(--borders-radius-3); --button-size-xs-bottom-left-border-radius: var(--borders-radius-3); --button-size-xs-bottom-right-border-radius: var(--borders-radius-3); --button-size-xs-height: var(--sizes-base-11); --button-size-xs-fontSize: var(--fonts-size-8); --button-size-xs-minWidth: var(--sizes-size-1); --button-size-xs-icon-size: var(--sizes-size-8); --button-size-xs-fontWeight: var(--fonts-weight-6); --button-size-xs-lineHeight: var(--fonts-lineHeight-2); --button-size-xs-icon-margin: var(--sizes-size-3); --button-size-xs-marginTop: var(--sizes-size-0); --button-size-xs-marginLeft: var(--sizes-size-0); --button-size-xs-paddingTop: var(--sizes-size-2); --button-size-xs-marginRight: var(--sizes-size-0); --button-size-xs-paddingLeft: var(--sizes-size-3); --button-size-xs-marginBottom: var(--sizes-size-0); --button-size-xs-paddingRight: var(--sizes-size-3); --button-size-xs-paddingBottom: var(--sizes-size-2); --button-size-sm-top-left-border-radius: var(--borders-radius-3); --button-size-sm-top-right-border-radius: var(--borders-radius-3); --button-size-sm-bottom-left-border-radius: var(--borders-radius-3); --button-size-sm-bottom-right-border-radius: var(--borders-radius-3); --button-size-sm-height: var(--sizes-base-15); --button-size-sm-fontSize: var(--fonts-size-8); --button-size-sm-minWidth: var(--sizes-size-1); --button-size-sm-icon-size: var(--sizes-size-8); --button-size-sm-fontWeight: var(--fonts-weight-6); --button-size-sm-lineHeight: var(--fonts-lineHeight-2); --button-size-sm-icon-margin: var(--sizes-size-3); --button-size-sm-marginTop: var(--sizes-size-0); --button-size-sm-marginLeft: var(--sizes-size-0); --button-size-sm-paddingTop: var(--sizes-size-3); --button-size-sm-marginRight: var(--sizes-size-0); --button-size-sm-paddingLeft: var(--sizes-size-6); --button-size-sm-marginBottom: var(--sizes-size-0); --button-size-sm-paddingRight: var(--sizes-size-6); --button-size-sm-paddingBottom: var(--sizes-size-3); --button-size-md-top-left-border-radius: var(--borders-radius-3); --button-size-md-top-right-border-radius: var(--borders-radius-3); --button-size-md-bottom-left-border-radius: var(--borders-radius-3); --button-size-md-bottom-right-border-radius: var(--borders-radius-3); --button-size-md-height: var(--sizes-base-16); --button-size-md-fontSize: var(--fonts-size-7); --button-size-md-minWidth: var(--sizes-size-1); --button-size-md-icon-size: var(--sizes-size-8); --button-size-md-fontWeight: var(--fonts-weight-6); --button-size-md-lineHeight: var(--fonts-lineHeight-2); --button-size-md-icon-margin: var(--sizes-size-3); --button-size-md-marginTop: var(--sizes-size-0); --button-size-md-marginLeft: var(--sizes-size-0); --button-size-md-paddingTop: var(--sizes-size-3); --button-size-md-marginRight: var(--sizes-size-0); --button-size-md-paddingLeft: var(--sizes-size-7); --button-size-md-marginBottom: var(--sizes-size-0); --button-size-md-paddingRight: var(--sizes-size-7); --button-size-md-paddingBottom: var(--sizes-size-3); --button-size-lg-top-left-border-radius: var(--borders-radius-3); --button-size-lg-top-right-border-radius: var(--borders-radius-3); --button-size-lg-bottom-left-border-radius: var(--borders-radius-3); --button-size-lg-bottom-right-border-radius: var(--borders-radius-3); --button-size-lg-height: var(--sizes-base-19); --button-size-lg-fontSize: var(--fonts-size-7); --button-size-lg-minWidth: var(--sizes-size-1); --button-size-lg-icon-size: var(--sizes-size-8); --button-size-lg-fontWeight: var(--fonts-weight-6); --button-size-lg-lineHeight: var(--fonts-lineHeight-2); --button-size-lg-icon-margin: var(--sizes-size-3); --button-size-lg-marginTop: var(--sizes-size-0); --button-size-lg-marginLeft: var(--sizes-size-0); --button-size-lg-paddingTop: var(--sizes-size-6); --button-size-lg-marginRight: var(--sizes-size-0); --button-size-lg-paddingLeft: var(--sizes-size-9); --button-size-lg-marginBottom: var(--sizes-size-0); --button-size-lg-paddingRight: var(--sizes-size-9); --button-size-lg-paddingBottom: var(--sizes-size-6); --transfer-base-title-bg: var(--colors-neutral-fill-10); --transfer-base-title-color: var(--colors-neutral-text-2); --transfer-base-title-fontSize: var(--fonts-size-7); --transfer-base-title-fontWeight: var(--fonts-weight-6); --transfer-base-title-lineHeight: var(--fonts-lineHeight-2); --transfer-base-content-color: var(--colors-neutral-text-2); --transfer-base-content-fontSize: var(--fonts-size-7); --transfer-base-content-fontWeight: var(--fonts-weight-6); --transfer-base-content-lineHeight: var(--fonts-lineHeight-2); --transfer-base-top-border-color: var(--colors-neutral-line-8); --transfer-base-top-border-width: var(--borders-width-2); --transfer-base-top-border-style: var(--borders-style-2); --transfer-base-right-border-color: var(--colors-neutral-line-8); --transfer-base-right-border-width: var(--borders-width-2); --transfer-base-right-border-style: var(--borders-style-2); --transfer-base-bottom-border-color: var(--colors-neutral-line-8); --transfer-base-bottom-border-width: var(--borders-width-2); --transfer-base-bottom-border-style: var(--borders-style-2); --transfer-base-left-border-color: var(--colors-neutral-line-8); --transfer-base-left-border-width: var(--borders-width-2); --transfer-base-left-border-style: var(--borders-style-2); --transfer-base-top-right-border-radius: var(--borders-radius-3); --transfer-base-top-left-border-radius: var(--borders-radius-3); --transfer-base-bottom-right-border-radius: var(--borders-radius-2); --transfer-base-bottom-left-border-radius: var(--borders-radius-2); --transfer-base-header-paddingTop: var(--sizes-size-5); --transfer-base-header-paddingBottom: var(--sizes-size-5); --transfer-base-header-paddingLeft: var(--sizes-size-8); --transfer-base-header-paddingRight: var(--sizes-size-8); --transfer-base-footer-border-color: var(--colors-neutral-line-8); --transfer-base-body-paddingTop: var(--sizes-size-0); --transfer-base-body-paddingBottom: var(--sizes-size-0); --transfer-base-body-paddingLeft: var(--sizes-size-0); --transfer-base-body-paddingRight: var(--sizes-size-0); --transfer-base-option-paddingTop: var(--sizes-size-5); --transfer-base-option-paddingBottom: var(--sizes-size-5); --transfer-base-option-paddingLeft: var(--sizes-size-8); --transfer-base-option-paddingRight: var(--sizes-size-8); --transfer-base-option-marginTop: var(--sizes-size-0); --transfer-base-option-marginBottom: var(--sizes-size-0); --transfer-base-option-marginLeft: var(--sizes-size-0); --transfer-base-option-marginRight: var(--sizes-size-0); --transfer-base-shadow: var(--shadows-shadow-none); --transfer-search-color: var(--colors-neutral-text-2); --transfer-search-fontSize: var(--fonts-size-7); --transfer-search-fontWeight: var(--fonts-weight-6); --transfer-search-lineHeight: var(--fonts-lineHeight-2); --transfer-search-placeholder-font-color: var(--colors-neutral-text-6); --transfer-search-top-border-color: var(--colors-neutral-line-8); --transfer-search-top-border-width: var(--borders-width-2); --transfer-search-top-border-style: var(--borders-style-2); --transfer-search-right-border-color: var(--colors-neutral-line-8); --transfer-search-right-border-width: var(--borders-width-2); --transfer-search-right-border-style: var(--borders-style-2); --transfer-search-bottom-border-color: var(--colors-neutral-line-8); --transfer-search-bottom-border-width: var(--borders-width-2); --transfer-search-bottom-border-style: var(--borders-style-2); --transfer-search-left-border-color: var(--colors-neutral-line-8); --transfer-search-left-border-width: var(--borders-width-2); --transfer-search-left-border-style: var(--borders-style-2); --transfer-search-top-right-border-radius: var(--borders-radius-3); --transfer-search-top-left-border-radius: var(--borders-radius-3); --transfer-search-bottom-right-border-radius: var(--borders-radius-3); --transfer-search-bottom-left-border-radius: var(--borders-radius-3); --transfer-search-border-hover-color: var(--colors-brand-4); --transfer-search-border-active-color: var(--colors-brand-4); --transfer-search-paddingTop: var(--sizes-size-6); --transfer-search-paddingBottom: var(--sizes-size-6); --transfer-search-paddingLeft: var(--sizes-size-6); --transfer-search-paddingRight: var(--sizes-size-6); --transfer-search-input-paddingTop: var(--sizes-size-4); --transfer-search-input-paddingBottom: var(--sizes-size-4); --transfer-search-input-paddingLeft: var(--sizes-size-7); --transfer-search-input-paddingRight: var(--sizes-size-7); --transfer-search-shadow: var(--shadows-shadow-none); --transfer-group-color: var(--colors-neutral-text-5); --transfer-group-fontSize: var(--fonts-size-7); --transfer-group-fontWeight: var(--fonts-weight-6); --transfer-group-lineHeight: var(--fonts-lineHeight-2); --transfer-table-header-paddingTop: var(--sizes-size-5); --transfer-table-header-paddingBottom: var(--sizes-size-5); --transfer-table-header-paddingLeft: var(--sizes-size-7); --transfer-table-header-paddingRight: var(--sizes-size-7); --transfer-table-option-paddingTop: var(--sizes-size-4); --transfer-table-option-paddingBottom: var(--sizes-size-5); --transfer-table-option-paddingLeft: var(--sizes-size-7); --transfer-table-option-paddingRight: var(--sizes-size-7); --transfer-table-last-paddingRight: var(--sizes-base-9); --transfer-tree-bg-hover-color: var(--colors-neutral-fill-10); --transfer-tree-bg-active-color: var(--colors-brand-10); --transfer-tree-top-right-border-radius: var(--borders-radius-2); --transfer-tree-top-left-border-radius: var(--borders-radius-2); --transfer-tree-bottom-right-border-radius: var(--borders-radius-2); --transfer-tree-bottom-left-border-radius: var(--borders-radius-2); --transfer-tree-paddingTop: var(--sizes-size-3); --transfer-tree-paddingBottom: var(--sizes-size-3); --transfer-tree-paddingLeft: var(--sizes-size-7); --transfer-tree-paddingRight: var(--sizes-size-7); --transfer-tree-marginTop: var(--sizes-size-0); --transfer-tree-marginBottom: var(--sizes-size-2); --transfer-tree-marginLeft: var(--sizes-size-0); --transfer-tree-marginRight: var(--sizes-size-0); --transfer-tree-option-paddingTop: var(--sizes-size-0); --transfer-tree-option-paddingBottom: var(--sizes-size-0); --transfer-tree-option-paddingLeft: var(--sizes-size-6); --transfer-tree-option-paddingRight: var(--sizes-size-0); --transfer-tree-option-marginTop: var(--sizes-size-0); --transfer-tree-option-marginBottom: var(--sizes-size-4); --transfer-tree-option-marginLeft: var(--sizes-size-0); --transfer-tree-option-marginRight: var(--sizes-size-0); --transfer-chained-paddingTop: var(--sizes-size-5); --transfer-chained-paddingBottom: var(--sizes-size-5); --transfer-chained-paddingLeft: var(--sizes-size-6); --transfer-chained-paddingRight: var(--sizes-size-6); --transfer-chained-marginTop: var(--sizes-size-0); --transfer-chained-marginBottom: var(--sizes-size-0); --transfer-chained-marginLeft: var(--sizes-size-0); --transfer-chained-marginRight: var(--sizes-size-0); --input-default-default-top-border-color: var(--colors-neutral-line-8); --input-default-default-top-border-width: var(--borders-width-2); --input-default-default-top-border-style: var(--borders-style-2); --input-default-default-right-border-color: var(--colors-neutral-line-8); --input-default-default-right-border-width: var(--borders-width-2); --input-default-default-right-border-style: var(--borders-style-2); --input-default-default-bottom-border-color: var(--colors-neutral-line-8); --input-default-default-bottom-border-width: var(--borders-width-2); --input-default-default-bottom-border-style: var(--borders-style-2); --input-default-default-left-border-color: var(--colors-neutral-line-8); --input-default-default-left-border-width: var(--borders-width-2); --input-default-default-left-border-style: var(--borders-style-2); --input-default-default-top-right-border-radius: var(--borders-radius-3); --input-default-default-top-left-border-radius: var(--borders-radius-3); --input-default-default-bottom-right-border-radius: var(--borders-radius-3); --input-default-default-bottom-left-border-radius: var(--borders-radius-3); --input-default-default-color: var(--colors-neutral-fill-2); --input-default-default-fontSize: var(--fonts-size-7); --input-default-default-fontWeight: var(--fonts-weight-6); --input-default-default-lineHeight: var(--fonts-lineHeight-2); --input-default-default-paddingTop: var(--sizes-size-3); --input-default-default-paddingBottom: var(--sizes-size-3); --input-default-default-paddingLeft: var(--sizes-size-6); --input-default-default-paddingRight: var(--sizes-size-6); --input-default-default-bg-color: var(--colors-neutral-fill-11); --input-default-hover-top-border-color: var(--colors-brand-5); --input-default-hover-top-border-width: var(--borders-width-2); --input-default-hover-top-border-style: var(--borders-style-2); --input-default-hover-right-border-color: var(--colors-brand-5); --input-default-hover-right-border-width: var(--borders-width-2); --input-default-hover-right-border-style: var(--borders-style-2); --input-default-hover-bottom-border-color: var(--colors-brand-5); --input-default-hover-bottom-border-width: var(--borders-width-2); --input-default-hover-bottom-border-style: var(--borders-style-2); --input-default-hover-left-border-color: var(--colors-brand-5); --input-default-hover-left-border-width: var(--borders-width-2); --input-default-hover-left-border-style: var(--borders-style-2); --input-default-hover-top-right-border-radius: var(--borders-radius-3); --input-default-hover-top-left-border-radius: var(--borders-radius-3); --input-default-hover-bottom-right-border-radius: var(--borders-radius-3); --input-default-hover-bottom-left-border-radius: var(--borders-radius-3); --input-default-hover-paddingTop: var(--sizes-size-3); --input-default-hover-paddingBottom: var(--sizes-size-3); --input-default-hover-paddingLeft: var(--sizes-size-6); --input-default-hover-paddingRight: var(--sizes-size-6); --input-default-hover-bg-color: var(--colors-neutral-fill-11); --input-default-active-top-border-color: var(--colors-brand-5); --input-default-active-top-border-width: var(--borders-width-2); --input-default-active-top-border-style: var(--borders-style-2); --input-default-active-right-border-color: var(--colors-brand-5); --input-default-active-right-border-width: var(--borders-width-2); --input-default-active-right-border-style: var(--borders-style-2); --input-default-active-bottom-border-color: var(--colors-brand-5); --input-default-active-bottom-border-width: var(--borders-width-2); --input-default-active-bottom-border-style: var(--borders-style-2); --input-default-active-left-border-color: var(--colors-brand-5); --input-default-active-left-border-width: var(--borders-width-2); --input-default-active-left-border-style: var(--borders-style-2); --input-default-active-top-right-border-radius: var(--borders-radius-3); --input-default-active-top-left-border-radius: var(--borders-radius-3); --input-default-active-bottom-right-border-radius: var(--borders-radius-3); --input-default-active-bottom-left-border-radius: var(--borders-radius-3); --input-default-active-paddingTop: var(--sizes-size-3); --input-default-active-paddingBottom: var(--sizes-size-3); --input-default-active-paddingLeft: var(--sizes-size-6); --input-default-active-paddingRight: var(--sizes-size-6); --input-default-active-shadow: var(--shadows-shadow-none); --input-default-active-bg-color: var(--colors-neutral-fill-11); --input-default-disabled-top-border-color: var(--colors-neutral-line-8); --input-default-disabled-top-border-width: var(--borders-width-2); --input-default-disabled-top-border-style: var(--borders-style-2); --input-default-disabled-right-border-color: var(--colors-neutral-line-8); --input-default-disabled-right-border-width: var(--borders-width-2); --input-default-disabled-right-border-style: var(--borders-style-2); --input-default-disabled-bottom-border-color: var(--colors-neutral-line-8); --input-default-disabled-bottom-border-width: var(--borders-width-2); --input-default-disabled-bottom-border-style: var(--borders-style-2); --input-default-disabled-left-border-color: var(--colors-neutral-line-8); --input-default-disabled-left-border-width: var(--borders-width-2); --input-default-disabled-left-border-style: var(--borders-style-2); --input-default-disabled-top-right-border-radius: var(--borders-radius-3); --input-default-disabled-top-left-border-radius: var(--borders-radius-3); --input-default-disabled-bottom-right-border-radius: var(--borders-radius-3); --input-default-disabled-bottom-left-border-radius: var(--borders-radius-3); --input-default-disabled-paddingTop: var(--sizes-size-3); --input-default-disabled-paddingBottom: var(--sizes-size-3); --input-default-disabled-paddingLeft: var(--sizes-size-6); --input-default-disabled-paddingRight: var(--sizes-size-6); --input-default-disabled-bg-color: var(--colors-neutral-fill-10); --input-clearable-icon: ''; --input-clearable-icon-size: var(--sizes-size-8); --input-clearable-default-color: var(--colors-neutral-text-7); --input-clearable-hover-color: var(--colors-neutral-text-4); --input-clearable-active-color: var(--colors-neutral-text-4); --input-count-single-fontSize: var(--fonts-size-7); --input-count-single-color: var(--colors-neutral-text-6); --input-count-multi-fontSize: var(--fonts-size-7); --input-count-multi-color: var(--colors-neutral-text-5); --input-prefix-fontSize: var(--fonts-size-7); --input-prefix-color: var(--colors-neutral-text-1); --input-password-invisible-icon: '不可见'; --input-password-invisible-icon-size: var(--sizes-size-8); --input-password-invisible-icon-color: var(--colors-neutral-text-5); --input-password-view-icon: '可见'; --input-password-view-icon-size: var(--sizes-size-8); --input-password-view-icon-color: var(--colors-neutral-text-5); --input-textarea-paddingTop: var(--sizes-size-3); --input-textarea-paddingBottom: var(--sizes-size-3); --input-textarea-paddingLeft: var(--sizes-size-6); --input-textarea-paddingRight: var(--sizes-base-11); --input-addon-text-bg-color-default: var(--colors-neutral-text-11); --input-addon-text-bg-color-hover: var(--colors-neutral-text-11); --input-addon-text-top-border-color: var(--colors-neutral-line-8); --input-addon-text-top-border-width: var(--borders-width-2); --input-addon-text-top-border-style: var(--borders-style-2); --input-addon-text-right-border-color: var(--colors-neutral-line-8); --input-addon-text-right-border-width: var(--borders-width-2); --input-addon-text-right-border-style: var(--borders-style-2); --input-addon-text-bottom-border-color: var(--colors-neutral-line-8); --input-addon-text-bottom-border-width: var(--borders-width-2); --input-addon-text-bottom-border-style: var(--borders-style-2); --input-addon-text-left-border-color: var(--colors-neutral-line-8); --input-addon-text-left-border-width: var(--borders-width-2); --input-addon-text-left-border-style: var(--borders-style-2); --input-size-sm-height: var(--sizes-base-15); --input-size-default-height: var(--sizes-base-16); --input-size-md-height: var(--sizes-base-16); --input-size-lg-height: var(--sizes-base-19); --Form-inputNumber-base-width: var(--sizes-base-12); --Form-inputNumber-base-height: var(--sizes-base-16); --inputNumber-base-default-top-border-color: var(--colors-neutral-line-8); --inputNumber-base-default-top-border-width: var(--borders-width-2); --inputNumber-base-default-top-border-style: var(--borders-style-2); --inputNumber-base-default-right-border-color: var(--colors-neutral-line-8); --inputNumber-base-default-right-border-width: var(--borders-width-2); --inputNumber-base-default-right-border-style: var(--borders-style-2); --inputNumber-base-default-bottom-border-color: var(--colors-neutral-line-8); --inputNumber-base-default-bottom-border-width: var(--borders-width-2); --inputNumber-base-default-bottom-border-style: var(--borders-style-2); --inputNumber-base-default-left-border-color: var(--colors-neutral-line-8); --inputNumber-base-default-left-border-width: var(--borders-width-2); --inputNumber-base-default-left-border-style: var(--borders-style-2); --inputNumber-base-default-top-right-border-radius: var(--borders-radius-3); --inputNumber-base-default-top-left-border-radius: var(--borders-radius-3); --inputNumber-base-default-bottom-right-border-radius: var( --borders-radius-3 ); --inputNumber-base-default-bottom-left-border-radius: var(--borders-radius-3); --inputNumber-base-default-paddingTop: var(--sizes-size-3); --inputNumber-base-default-paddingBottom: var(--sizes-size-3); --inputNumber-base-default-paddingLeft: var(--sizes-size-6); --inputNumber-base-default-paddingRight: var(--sizes-size-6); --inputNumber-base-default-bg-color: var(--colors-neutral-fill-11); --inputNumber-base-hover-top-border-color: var(--colors-brand-5); --inputNumber-base-hover-top-border-width: var(--borders-width-2); --inputNumber-base-hover-top-border-style: var(--borders-style-2); --inputNumber-base-hover-right-border-color: var(--colors-brand-5); --inputNumber-base-hover-right-border-width: var(--borders-width-2); --inputNumber-base-hover-right-border-style: var(--borders-style-2); --inputNumber-base-hover-bottom-border-color: var(--colors-brand-5); --inputNumber-base-hover-bottom-border-width: var(--borders-width-2); --inputNumber-base-hover-bottom-border-style: var(--borders-style-2); --inputNumber-base-hover-left-border-color: var(--colors-brand-5); --inputNumber-base-hover-left-border-width: var(--borders-width-2); --inputNumber-base-hover-left-border-style: var(--borders-style-2); --inputNumber-base-hover-top-right-border-radius: var(--borders-radius-3); --inputNumber-base-hover-top-left-border-radius: var(--borders-radius-3); --inputNumber-base-hover-bottom-right-border-radius: var(--borders-radius-3); --inputNumber-base-hover-bottom-left-border-radius: var(--borders-radius-3); --inputNumber-base-hover-paddingTop: var(--sizes-size-3); --inputNumber-base-hover-paddingBottom: var(--sizes-size-3); --inputNumber-base-hover-paddingLeft: var(--sizes-size-7); --inputNumber-base-hover-paddingRight: var(--sizes-size-7); --inputNumber-base-hover-bg-color: var(--colors-neutral-fill-11); --inputNumber-base-active-top-border-color: var(--colors-brand-5); --inputNumber-base-active-top-border-width: var(--borders-width-2); --inputNumber-base-active-top-border-style: var(--borders-style-2); --inputNumber-base-active-right-border-color: var(--colors-brand-5); --inputNumber-base-active-right-border-width: var(--borders-width-2); --inputNumber-base-active-right-border-style: var(--borders-style-2); --inputNumber-base-active-bottom-border-color: var(--colors-brand-5); --inputNumber-base-active-bottom-border-width: var(--borders-width-2); --inputNumber-base-active-bottom-border-style: var(--borders-style-2); --inputNumber-base-active-left-border-color: var(--colors-brand-5); --inputNumber-base-active-left-border-width: var(--borders-width-2); --inputNumber-base-active-left-border-style: var(--borders-style-2); --inputNumber-base-active-top-right-border-radius: var(--borders-radius-3); --inputNumber-base-active-top-left-border-radius: var(--borders-radius-3); --inputNumber-base-active-bottom-right-border-radius: var(--borders-radius-3); --inputNumber-base-active-bottom-left-border-radius: var(--borders-radius-3); --inputNumber-base-active-paddingTop: var(--sizes-size-3); --inputNumber-base-active-paddingBottom: var(--sizes-size-3); --inputNumber-base-active-paddingLeft: var(--sizes-size-7); --inputNumber-base-active-paddingRight: var(--sizes-size-7); --inputNumber-base-active-shadow: var(--Form-input-boxShadow); --inputNumber-base-active-bg-color: var(--colors-neutral-fill-11); --inputNumber-base-disabled-top-border-color: var(--colors-neutral-line-8); --inputNumber-base-disabled-top-border-width: var(--borders-width-2); --inputNumber-base-disabled-top-border-style: var(--borders-style-2); --inputNumber-base-disabled-right-border-color: var(--colors-neutral-line-8); --inputNumber-base-disabled-right-border-width: var(--borders-width-2); --inputNumber-base-disabled-right-border-style: var(--borders-style-2); --inputNumber-base-disabled-bottom-border-color: var(--colors-neutral-line-8); --inputNumber-base-disabled-bottom-border-width: var(--borders-width-2); --inputNumber-base-disabled-bottom-border-style: var(--borders-style-2); --inputNumber-base-disabled-left-border-color: var(--colors-neutral-line-8); --inputNumber-base-disabled-left-border-width: var(--borders-width-2); --inputNumber-base-disabled-left-border-style: var(--borders-style-2); --inputNumber-base-disabled-top-right-border-radius: var(--borders-radius-3); --inputNumber-base-disabled-top-left-border-radius: var(--borders-radius-3); --inputNumber-base-disabled-bottom-right-border-radius: var( --borders-radius-3 ); --inputNumber-base-disabled-bottom-left-border-radius: var( --borders-radius-3 ); --inputNumber-base-disabled-paddingTop: var(--sizes-size-3); --inputNumber-base-disabled-paddingBottom: var(--sizes-size-3); --inputNumber-base-disabled-paddingLeft: var(--sizes-size-7); --inputNumber-base-disabled-paddingRight: var(--sizes-size-7); --inputNumber-base-disabled-bg-color: var(--colors-neutral-fill-10); --inputNumber-base-default-icon-fontSize: var(--fonts-size-8); --inputNumber-base-default-icon-color: var(--colors-neutral-text-2); --inputNumber-base-hover-icon-color: var(--colors-brand-5); --inputNumber-base-active-icon-color: var(--colors-brand-5); --inputNumber-base-default-step-bg: var(--colors-neutral-fill-11); --inputNumber-base-hover-step-bg: var(--colors-neutral-fill-11); --inputNumber-base-active-step-bg: var(--colors-neutral-fill-11); --inputNumber-base-unit-bg-color: var(--colors-neutral-fill-10); --inputNumber-base-default-unit-width: var(--sizes-base-28); --inputNumber-base-default-unit-paddingTop: calc( ( var(--Form-selectOption-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) - var(--Form-input-borderWidth) * 2 ) / 2 ); --inputNumber-base-default-unit-paddingBottom: calc( ( var(--Form-selectOption-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) - var(--Form-input-borderWidth) * 2 ) / 2 ); --inputNumber-base-default-unit-paddingLeft: var(--sizes-size-6); --inputNumber-base-default-unit-paddingRight: var(--sizes-size-6); --inputNumber-size-sm-height: var(--sizes-base-16); --inputNumber-size-default-height: var(--sizes-base-16); --inputNumber-size-md-height: var(--sizes-base-16); --inputNumber-size-lg-height: var(--sizes-base-16); --Number-handler-bg: var(--inputNumber-base-default-step-bg); --Number-handler-fontSize: var(--inputNumber-base-default-icon-fontSize); --Number-handler-color: var(--inputNumber-base-default-icon-color); --Number-handler-onHover-bg: var(--inputNumber-base-hover-step-bg); --Number-handler-onHover-color: var(--inputNumber-base-hover-icon-color); --Number-handler-onActive-bg: var(--inputNumber-base-active-step-bg); --inputNumber-enhance-default-top-border-color: var(--colors-neutral-line-7); --inputNumber-enhance-default-top-border-width: var(--borders-width-2); --inputNumber-enhance-default-top-border-style: var(--borders-style-2); --inputNumber-enhance-default-right-border-color: var( --colors-neutral-line-7 ); --inputNumber-enhance-default-right-border-width: var(--borders-width-2); --inputNumber-enhance-default-right-border-style: var(--borders-style-2); --inputNumber-enhance-default-bottom-border-color: var( --colors-neutral-line-7 ); --inputNumber-enhance-default-bottom-border-width: var(--borders-width-2); --inputNumber-enhance-default-bottom-border-style: var(--borders-style-2); --inputNumber-enhance-default-left-border-color: var(--colors-neutral-line-7); --inputNumber-enhance-default-left-border-width: var(--borders-width-2); --inputNumber-enhance-default-left-border-style: var(--borders-style-2); --inputNumber-enhance-default-top-right-border-radius: var( --borders-radius-3 ); --inputNumber-enhance-default-top-left-border-radius: var(--borders-radius-3); --inputNumber-enhance-default-bottom-right-border-radius: var( --borders-radius-3 ); --inputNumber-enhance-default-bottom-left-border-radius: var( --borders-radius-3 ); --inputNumber-enhance-default-paddingTop: var(--sizes-size-3); --inputNumber-enhance-default-paddingBottom: var(--sizes-size-3); --inputNumber-enhance-default-paddingLeft: var(--sizes-size-5); --inputNumber-enhance-default-paddingRight: var(--sizes-size-5); --inputNumber-enhance-default-bg-color: var(--colors-neutral-fill-11); --inputNumber-enhance-hover-top-border-color: var(--colors-brand-5); --inputNumber-enhance-hover-top-border-width: var(--borders-width-2); --inputNumber-enhance-hover-top-border-style: var(--borders-style-2); --inputNumber-enhance-hover-right-border-color: var(--colors-brand-5); --inputNumber-enhance-hover-right-border-width: var(--borders-width-2); --inputNumber-enhance-hover-right-border-style: var(--borders-style-2); --inputNumber-enhance-hover-bottom-border-color: var(--colors-brand-5); --inputNumber-enhance-hover-bottom-border-width: var(--borders-width-2); --inputNumber-enhance-hover-bottom-border-style: var(--borders-style-2); --inputNumber-enhance-hover-left-border-color: var(--colors-brand-5); --inputNumber-enhance-hover-left-border-width: var(--borders-width-2); --inputNumber-enhance-hover-left-border-style: var(--borders-style-2); --inputNumber-enhance-hover-top-right-border-radius: var(--borders-radius-3); --inputNumber-enhance-hover-top-left-border-radius: var(--borders-radius-3); --inputNumber-enhance-hover-bottom-right-border-radius: var( --borders-radius-3 ); --inputNumber-enhance-hover-bottom-left-border-radius: var( --borders-radius-3 ); --inputNumber-enhance-hover-paddingTop: var(--sizes-size-3); --inputNumber-enhance-hover-paddingBottom: var(--sizes-size-3); --inputNumber-enhance-hover-paddingLeft: var(--sizes-size-7); --inputNumber-enhance-hover-paddingRight: var(--sizes-size-7); --inputNumber-enhance-hover-bg-color: var(--colors-neutral-fill-11); --inputNumber-enhance-active-top-border-color: var(--colors-brand-5); --inputNumber-enhance-active-top-border-width: var(--borders-width-2); --inputNumber-enhance-active-top-border-style: var(--borders-style-2); --inputNumber-enhance-active-right-border-color: var(--colors-brand-5); --inputNumber-enhance-active-right-border-width: var(--borders-width-2); --inputNumber-enhance-active-right-border-style: var(--borders-style-2); --inputNumber-enhance-active-bottom-border-color: var(--colors-brand-5); --inputNumber-enhance-active-bottom-border-width: var(--borders-width-2); --inputNumber-enhance-active-bottom-border-style: var(--borders-style-2); --inputNumber-enhance-active-left-border-color: var(--colors-brand-5); --inputNumber-enhance-active-left-border-width: var(--borders-width-2); --inputNumber-enhance-active-left-border-style: var(--borders-style-2); --inputNumber-enhance-active-top-right-border-radius: var(--borders-radius-3); --inputNumber-enhance-active-top-left-border-radius: var(--borders-radius-3); --inputNumber-enhance-active-bottom-right-border-radius: var( --borders-radius-3 ); --inputNumber-enhance-active-bottom-left-border-radius: var( --borders-radius-3 ); --inputNumber-enhance-active-paddingTop: var(--sizes-size-3); --inputNumber-enhance-active-paddingBottom: var(--sizes-size-3); --inputNumber-enhance-active-paddingLeft: var(--sizes-size-7); --inputNumber-enhance-active-paddingRight: var(--sizes-size-7); --inputNumber-enhance-active-shadow: var(--shadows-shadow-none); --inputNumber-enhance-active-bg-color: var(--colors-neutral-fill-11); --inputNumber-enhance-disabled-top-border-color: var(--colors-neutral-line-8); --inputNumber-enhance-disabled-top-border-width: var(--borders-width-2); --inputNumber-enhance-disabled-top-border-style: var(--borders-style-2); --inputNumber-enhance-disabled-right-border-color: var( --colors-neutral-line-8 ); --inputNumber-enhance-disabled-right-border-width: var(--borders-width-2); --inputNumber-enhance-disabled-right-border-style: var(--borders-style-2); --inputNumber-enhance-disabled-bottom-border-color: var( --colors-neutral-line-8 ); --inputNumber-enhance-disabled-bottom-border-width: var(--borders-width-2); --inputNumber-enhance-disabled-bottom-border-style: var(--borders-style-2); --inputNumber-enhance-disabled-left-border-color: var( --colors-neutral-line-8 ); --inputNumber-enhance-disabled-left-border-width: var(--borders-width-2); --inputNumber-enhance-disabled-left-border-style: var(--borders-style-2); --inputNumber-enhance-disabled-top-right-border-radius: var( --borders-radius-3 ); --inputNumber-enhance-disabled-top-left-border-radius: var( --borders-radius-3 ); --inputNumber-enhance-disabled-bottom-right-border-radius: var( --borders-radius-3 ); --inputNumber-enhance-disabled-bottom-left-border-radius: var( --borders-radius-3 ); --inputNumber-enhance-disabled-paddingTop: var(--sizes-size-3); --inputNumber-enhance-disabled-paddingBottom: var(--sizes-size-3); --inputNumber-enhance-disabled-paddingLeft: var(--sizes-size-7); --inputNumber-enhance-disabled-paddingRight: var(--sizes-size-7); --inputNumber-enhance-disabled-bg-color: var(--colors-neutral-fill-10); --inputNumber-enhance-default-icon-fontSize: var(--fonts-size-8); --inputNumber-enhance-leftIcon-default-height: var(--sizes-size-7); --inputNumber-enhance-leftIcon-default-width: var(--sizes-size-7); --inputNumber-enhance-leftIcon-default-color: var(--colors-neutral-text-2); --inputNumber-enhance-leftIcon-hover-color: var(--colors-brand-5); --inputNumber-enhance-leftIcon-active-color: var(--colors-brand-5); --inputNumber-enhance-leftIcon-default-bg-color: var( --colors-neutral-fill-11 ); --inputNumber-enhance-leftIcon-hover-bg-color: var(--colors-neutral-fill-11); --inputNumber-enhance-leftIcon-active-bg-color: var(--colors-neutral-fill-11); --inputNumber-enhance-rightIcon-default-height: var(--sizes-size-7); --inputNumber-enhance-rightIcon-default-width: var(--sizes-size-7); --inputNumber-enhance-rightIcon-default-color: var(--colors-neutral-text-2); --inputNumber-enhance-rightIcon-hover-color: var(--colors-brand-5); --inputNumber-enhance-rightIcon-active-color: var(--colors-brand-5); --inputNumber-enhance-rightIcon-default-bg-color: var( --colors-neutral-fill-11 ); --inputNumber-enhance-rightIcon-hover-bg-color: var(--colors-neutral-fill-11); --inputNumber-enhance-rightIcon-active-bg-color: var( --colors-neutral-fill-11 ); --inputNumber-enhance-leftIcon-default-icon: ''; --inputNumber-enhance-rightIcon-default-icon: ''; --inputNumber-enhance-mobile-input-width: 3.5rem; --inputNumber-enhance-mobile-icon-width: 1.75rem; --inputNumber-enhance-mobile-icon-height: 1.75rem; --inputNumber-enhance-mobile-icon-inner-width: 1.6875rem; --inputNumber-enhance-mobile-icon-inner-height: 1.6875rem; --Form-input-onHover-borderColor: var(--colors-brand-5); --Form-input-onFocused-borderColor: var(--colors-brand-5); --checkbox-checkbox-default-height: var(--sizes-size-9); --checkbox-checkbox-default-bg-color: var(--colors-neutral-fill-11); --checkbox-checkbox-default-text-color: var(--colors-neutral-text-2); --checkbox-checkbox-default-fontWeight: var(--fonts-weight-6); --checkbox-checkbox-default-fontSize: var(--fonts-size-7); --checkbox-checkbox-default-top-border-color: var(--colors-neutral-line-8); --checkbox-checkbox-default-top-border-width: var(--borders-width-2); --checkbox-checkbox-default-top-border-style: var(--borders-style-2); --checkbox-checkbox-default-right-border-color: var(--colors-neutral-line-8); --checkbox-checkbox-default-right-border-width: var(--borders-width-2); --checkbox-checkbox-default-right-border-style: var(--borders-style-2); --checkbox-checkbox-default-bottom-border-color: var(--colors-neutral-line-8); --checkbox-checkbox-default-bottom-border-width: var(--borders-width-2); --checkbox-checkbox-default-bottom-border-style: var(--borders-style-2); --checkbox-checkbox-default-left-border-color: var(--colors-neutral-line-8); --checkbox-checkbox-default-left-border-width: var(--borders-width-2); --checkbox-checkbox-default-left-border-style: var(--borders-style-2); --checkbox-checkbox-default-top-right-border-radius: var(--sizes-size-2); --checkbox-checkbox-default-top-left-border-radius: var(--sizes-size-2); --checkbox-checkbox-default-bottom-right-border-radius: var(--sizes-size-2); --checkbox-checkbox-default-bottom-left-border-radius: var(--sizes-size-2); --checkbox-checkbox-hover-height: var(--sizes-size-9); --checkbox-checkbox-hover-bg-color: var(--colors-neutral-fill-11); --checkbox-checkbox-hover-text-color: var(--colors-neutral-text-2); --checkbox-checkbox-hover-fontSize: var(--fonts-size-7); --checkbox-checkbox-hover-top-border-color: var(--colors-brand-5); --checkbox-checkbox-hover-top-border-width: var(--borders-width-2); --checkbox-checkbox-hover-top-border-style: var(--borders-style-2); --checkbox-checkbox-hover-right-border-color: var(--colors-brand-5); --checkbox-checkbox-hover-right-border-width: var(--borders-width-2); --checkbox-checkbox-hover-right-border-style: var(--borders-style-2); --checkbox-checkbox-hover-bottom-border-color: var(--colors-brand-5); --checkbox-checkbox-hover-bottom-border-width: var(--borders-width-2); --checkbox-checkbox-hover-bottom-border-style: var(--borders-style-2); --checkbox-checkbox-hover-left-border-color: var(--colors-brand-5); --checkbox-checkbox-hover-left-border-width: var(--borders-width-2); --checkbox-checkbox-hover-left-border-style: var(--borders-style-2); --checkbox-checkbox-hover-top-right-border-radius: var(--sizes-size-2); --checkbox-checkbox-hover-top-left-border-radius: var(--sizes-size-2); --checkbox-checkbox-hover-bottom-right-border-radius: var(--sizes-size-2); --checkbox-checkbox-hover-bottom-left-border-radius: var(--sizes-size-2); --checkbox-checkbox-active-height: var(--sizes-size-9); --checkbox-checkbox-active-bg-color: var(--colors-neutral-fill-11); --checkbox-checkbox-active-text-color: var(--colors-neutral-text-2); --checkbox-checkbox-active-fontSize: var(--fonts-size-7); --checkbox-checkbox-active-top-border-color: var(--colors-brand-5); --checkbox-checkbox-active-top-border-width: var(--borders-width-2); --checkbox-checkbox-active-top-border-style: var(--borders-style-2); --checkbox-checkbox-active-right-border-color: var(--colors-brand-5); --checkbox-checkbox-active-right-border-width: var(--borders-width-2); --checkbox-checkbox-active-right-border-style: var(--borders-style-2); --checkbox-checkbox-active-bottom-border-color: var(--colors-brand-5); --checkbox-checkbox-active-bottom-border-width: var(--borders-width-2); --checkbox-checkbox-active-bottom-border-style: var(--borders-style-2); --checkbox-checkbox-active-left-border-color: var(--colors-brand-5); --checkbox-checkbox-active-left-border-width: var(--borders-width-2); --checkbox-checkbox-active-left-border-style: var(--borders-style-2); --checkbox-checkbox-active-top-right-border-radius: var(--sizes-size-2); --checkbox-checkbox-active-top-left-border-radius: var(--sizes-size-2); --checkbox-checkbox-active-bottom-right-border-radius: var(--sizes-size-2); --checkbox-checkbox-active-bottom-left-border-radius: var(--sizes-size-2); --checkbox-checkbox-disabled-height: var(--sizes-size-9); --checkbox-checkbox-disabled-bg-color: var(--colors-neutral-fill-10); --checkbox-checkbox-disabled-text-color: var(--colors-neutral-text-6); --checkbox-checkbox-disabled-fontSize: var(--fonts-size-7); --checkbox-checkbox-disabled-top-border-color: var(--colors-neutral-line-8); --checkbox-checkbox-disabled-top-border-width: var(--borders-width-2); --checkbox-checkbox-disabled-top-border-style: var(--borders-style-2); --checkbox-checkbox-disabled-right-border-color: var(--colors-neutral-line-8); --checkbox-checkbox-disabled-right-border-width: var(--borders-width-2); --checkbox-checkbox-disabled-right-border-style: var(--borders-style-2); --checkbox-checkbox-disabled-bottom-border-color: var( --colors-neutral-line-8 ); --checkbox-checkbox-disabled-bottom-border-width: var(--borders-width-2); --checkbox-checkbox-disabled-bottom-border-style: var(--borders-style-2); --checkbox-checkbox-disabled-left-border-color: var(--colors-neutral-line-8); --checkbox-checkbox-disabled-left-border-width: var(--borders-width-2); --checkbox-checkbox-disabled-left-border-style: var(--borders-style-2); --checkbox-checkbox-disabled-top-right-border-radius: var(--sizes-size-2); --checkbox-checkbox-disabled-top-left-border-radius: var(--sizes-size-2); --checkbox-checkbox-disabled-bottom-right-border-radius: var(--sizes-size-2); --checkbox-checkbox-disabled-bottom-left-border-radius: var(--sizes-size-2); --checkbox-checked-default-height: var(--sizes-size-9); --checkbox-checked-default-bg-color: var(--colors-brand-5); --checkbox-checked-default-color: var(--colors-neutral-text-2); --checkbox-checked-default-fontSize: var(--fonts-size-7); --checkbox-checked-default-top-border-color: var(--colors-neutral-line-8); --checkbox-checked-default-top-border-width: var(--borders-width-2); --checkbox-checked-default-top-border-style: var(--borders-style-2); --checkbox-checked-default-right-border-color: var(--colors-neutral-line-8); --checkbox-checked-default-right-border-width: var(--borders-width-2); --checkbox-checked-default-right-border-style: var(--borders-style-2); --checkbox-checked-default-bottom-border-color: var(--colors-neutral-line-8); --checkbox-checked-default-bottom-border-width: var(--borders-width-2); --checkbox-checked-default-bottom-border-style: var(--borders-style-2); --checkbox-checked-default-left-border-color: var(--colors-neutral-line-8); --checkbox-checked-default-left-border-width: var(--borders-width-2); --checkbox-checked-default-left-border-style: var(--borders-style-2); --checkbox-checked-default-top-right-border-radius: var(--sizes-size-2); --checkbox-checked-default-top-left-border-radius: var(--sizes-size-2); --checkbox-checked-default-bottom-right-border-radius: var(--sizes-size-2); --checkbox-checked-default-bottom-left-border-radius: var(--sizes-size-2); --checkbox-checked-hover-height: var(--sizes-size-9); --checkbox-checked-hover-bg-color: var(--colors-brand-6); --checkbox-checked-hover-color: var(--colors-neutral-text-2); --checkbox-checked-hover-fontSize: var(--fonts-size-7); --checkbox-checked-hover-top-border-color: var(--colors-brand-5); --checkbox-checked-hover-top-border-width: var(--borders-width-2); --checkbox-checked-hover-top-border-style: var(--borders-style-2); --checkbox-checked-hover-right-border-color: var(--colors-brand-5); --checkbox-checked-hover-right-border-width: var(--borders-width-2); --checkbox-checked-hover-right-border-style: var(--borders-style-2); --checkbox-checked-hover-bottom-border-color: var(--colors-brand-5); --checkbox-checked-hover-bottom-border-width: var(--borders-width-2); --checkbox-checked-hover-bottom-border-style: var(--borders-style-2); --checkbox-checked-hover-left-border-color: var(--colors-brand-5); --checkbox-checked-hover-left-border-width: var(--borders-width-2); --checkbox-checked-hover-left-border-style: var(--borders-style-2); --checkbox-checked-hover-top-right-border-radius: var(--sizes-size-2); --checkbox-checked-hover-top-left-border-radius: var(--sizes-size-2); --checkbox-checked-hover-bottom-right-border-radius: var(--sizes-size-2); --checkbox-checked-hover-bottom-left-border-radius: var(--sizes-size-2); --checkbox-checked-active-height: var(--sizes-size-9); --checkbox-checked-active-bg-color: var(--colors-brand-4); --checkbox-checked-active-color: var(--colors-neutral-text-2); --checkbox-checked-active-fontSize: var(--fonts-size-7); --checkbox-checked-active-top-border-color: var(--colors-brand-5); --checkbox-checked-active-top-border-width: var(--borders-width-2); --checkbox-checked-active-top-border-style: var(--borders-style-2); --checkbox-checked-active-right-border-color: var(--colors-brand-5); --checkbox-checked-active-right-border-width: var(--borders-width-2); --checkbox-checked-active-right-border-style: var(--borders-style-2); --checkbox-checked-active-bottom-border-color: var(--colors-brand-5); --checkbox-checked-active-bottom-border-width: var(--borders-width-2); --checkbox-checked-active-bottom-border-style: var(--borders-style-2); --checkbox-checked-active-left-border-color: var(--colors-brand-5); --checkbox-checked-active-left-border-width: var(--borders-width-2); --checkbox-checked-active-left-border-style: var(--borders-style-2); --checkbox-checked-active-top-right-border-radius: var(--sizes-size-2); --checkbox-checked-active-top-left-border-radius: var(--sizes-size-2); --checkbox-checked-active-bottom-right-border-radius: var(--sizes-size-2); --checkbox-checked-active-bottom-left-border-radius: var(--sizes-size-2); --checkbox-checked-disabled-height: var(--sizes-size-9); --checkbox-checked-disabled-bg-color: var(--colors-neutral-fill-11); --checkbox-checked-disabled-color: var(--colors-neutral-text-2); --checkbox-checked-disabled-fontSize: var(--fonts-size-7); --checkbox-checked-disabled-top-border-color: var(--colors-neutral-line-8); --checkbox-checked-disabled-top-border-width: var(--borders-width-2); --checkbox-checked-disabled-top-border-style: var(--borders-style-2); --checkbox-checked-disabled-right-border-color: var(--colors-neutral-line-8); --checkbox-checked-disabled-right-border-width: var(--borders-width-2); --checkbox-checked-disabled-right-border-style: var(--borders-style-2); --checkbox-checked-disabled-bottom-border-color: var(--colors-neutral-line-8); --checkbox-checked-disabled-bottom-border-width: var(--borders-width-2); --checkbox-checked-disabled-bottom-border-style: var(--borders-style-2); --checkbox-checked-disabled-left-border-color: var(--colors-neutral-line-8); --checkbox-checked-disabled-left-border-width: var(--borders-width-2); --checkbox-checked-disabled-left-border-style: var(--borders-style-2); --checkbox-checked-disabled-top-right-border-radius: var(--sizes-size-2); --checkbox-checked-disabled-top-left-border-radius: var(--sizes-size-2); --checkbox-checked-disabled-bottom-right-border-radius: var(--sizes-size-2); --checkbox-checked-disabled-bottom-left-border-radius: var(--sizes-size-2); --Checkbox-onHover-color: var(--checkbox-checked-default-bg-color); --button-primary-hover-bg-color: var(--checkbox-checked-hover-bg-color); --Checkbox-checked-onHover-bgColor: var(--checkbox-checked-active-bg-color); --Checkbox-onDisabled-bg: var(--colors-neutral-fill-10); --Checkbox-size: var(--checkbox-checkbox-default-height); --Checkbox--full-inner-size: var(--sizes-size-5); --Checkbox--sm--full-inner-size: var(--sizes-size-5); --Checkbox--sm-inner-size: var(--sizes-size-5); --Checkbox--sm-size: var(--sizes-size-8); --Checkbox-borderRadius: 0.125rem; --Checkbox-color: var(--borderColor); --Checkbox-gap: var(--gap-xs); --Checkbox-gb: var(--colors-neutral-fill-11); --Checkbox-inner-size: var(--sizes-size-5); --Checkbox-onDisabled-color: var(--colors-neutral-text-6); --Checkbox-inner-onDisabled-bg: #d4d6d9; --Checkbox-inner-onDisabled-color: #ffffff; --Checkbox-disabled-unchecked-bg: #f7f7f9; --Checkbox-inner-disabled-checked-bg: #e8e9eb; --Checkbox-border-width: var(--Form-input-borderWidth); --Checkbox-paddingX: 0.75rem; --Checkbox-button-height: 2rem; --Checkbox-button-line-height: 1.75rem; --Checkbox-button-min-width: 5rem; --inputTree-base-default-color: var(--colors-neutral-text-2); --inputTree-base-default-expandColor: var(--default-icon-color); --inputTree-base-hover-color: var(--colors-neutral-text-2); --inputTree-base-hover-expandColor: var(--default-icon-color); --inputTree-base-active-color: var(--colors-neutral-text-2); --inputTree-base-active-expandColor: var(--default-icon-color); --inputTree-base-disabled-color: var(--colors-neutral-text-6); --inputTree-base-disabled-expandColor: var(--default-icon-color); --inputTree-base-size-expandMarginRight: var(--sizes-size-5); --inputTree-base-size-nodeMarginRight: var(--sizes-size-5); --inputTree-checkboxes-size-marginRight: var(--sizes-size-5); --inputTree-border-color: var(--colors-neutral-line-8); --inputTree-border-radius: var(--borders-radius-3); --inputTree-input-lineHeight: var(--fonts-lineHeight-2); --inputTree-item-disabled-color: var(--colors-neutral-text-6); --inputTree-fontSize: var(--fontSizeBase); --inputTree-placeholder-color: var(--colors-neutral-text-6); --listSelect-base-default-top-border-color: var(--colors-neutral-line-8); --listSelect-base-default-top-border-width: var(--borders-width-2); --listSelect-base-default-top-border-style: var(--borders-style-2); --listSelect-base-default-right-border-color: var(--colors-neutral-line-8); --listSelect-base-default-right-border-width: var(--borders-width-2); --listSelect-base-default-right-border-style: var(--borders-style-2); --listSelect-base-default-bottom-border-color: var(--colors-neutral-line-8); --listSelect-base-default-bottom-border-width: var(--borders-width-2); --listSelect-base-default-bottom-border-style: var(--borders-style-2); --listSelect-base-default-left-border-color: var(--colors-neutral-line-8); --listSelect-base-default-left-border-width: var(--borders-width-2); --listSelect-base-default-left-border-style: var(--borders-style-2); --listSelect-base-default-top-right-border-radius: var(--borders-radius-3); --listSelect-base-default-top-left-border-radius: var(--borders-radius-3); --listSelect-base-default-bottom-right-border-radius: var(--borders-radius-3); --listSelect-base-default-bottom-left-border-radius: var(--borders-radius-3); --listSelect-base-default-paddingTop: var(--sizes-size-4); --listSelect-base-default-paddingBottom: var(--sizes-size-4); --listSelect-base-default-paddingLeft: var(--sizes-size-6); --listSelect-base-default-paddingRight: var(--sizes-size-6); --listSelect-base-default-color: var(--colors-neutral-text-2); --listSelect-base-default-bg-color: var(--colors-neutral-fill-11); --listSelect-base-hover-top-border-color: var(--colors-brand-5); --listSelect-base-hover-top-border-width: var(--borders-width-2); --listSelect-base-hover-top-border-style: var(--borders-style-2); --listSelect-base-hover-right-border-color: var(--colors-brand-5); --listSelect-base-hover-right-border-width: var(--borders-width-2); --listSelect-base-hover-right-border-style: var(--borders-style-2); --listSelect-base-hover-bottom-border-color: var(--colors-brand-5); --listSelect-base-hover-bottom-border-width: var(--borders-width-2); --listSelect-base-hover-bottom-border-style: var(--borders-style-2); --listSelect-base-hover-left-border-color: var(--colors-brand-5); --listSelect-base-hover-left-border-width: var(--borders-width-2); --listSelect-base-hover-left-border-style: var(--borders-style-2); --listSelect-base-hover-top-right-border-radius: var(--borders-radius-3); --listSelect-base-hover-top-left-border-radius: var(--borders-radius-3); --listSelect-base-hover-bottom-right-border-radius: var(--borders-radius-3); --listSelect-base-hover-bottom-left-border-radius: var(--borders-radius-3); --listSelect-base-hover-paddingTop: var(--sizes-size-3); --listSelect-base-hover-paddingBottom: var(--sizes-size-3); --listSelect-base-hover-paddingLeft: var(--sizes-size-7); --listSelect-base-hover-paddingRight: var(--sizes-size-7); --listSelect-base-hover-color: var(--colors-brand-5); --listSelect-base-hover-bg-color: var(--colors-neutral-fill-11); --listSelect-base-active-top-border-color: var(--colors-brand-5); --listSelect-base-active-top-border-width: var(--borders-width-2); --listSelect-base-active-top-border-style: var(--borders-style-2); --listSelect-base-active-right-border-color: var(--colors-brand-5); --listSelect-base-active-right-border-width: var(--borders-width-2); --listSelect-base-active-right-border-style: var(--borders-style-2); --listSelect-base-active-bottom-border-color: var(--colors-brand-5); --listSelect-base-active-bottom-border-width: var(--borders-width-2); --listSelect-base-active-bottom-border-style: var(--borders-style-2); --listSelect-base-active-left-border-color: var(--colors-brand-5); --listSelect-base-active-left-border-width: var(--borders-width-2); --listSelect-base-active-left-border-style: var(--borders-style-2); --listSelect-base-active-top-right-border-radius: var(--borders-radius-3); --listSelect-base-active-top-left-border-radius: var(--borders-radius-3); --listSelect-base-active-bottom-right-border-radius: var(--borders-radius-3); --listSelect-base-active-bottom-left-border-radius: var(--borders-radius-3); --listSelect-base-active-paddingTop: var(--sizes-size-3); --listSelect-base-active-paddingBottom: var(--sizes-size-3); --listSelect-base-active-paddingLeft: var(--sizes-size-7); --listSelect-base-active-paddingRight: var(--sizes-size-7); --listSelect-base-active-shadow: var(--Form-input-boxShadow); --listSelect-base-active-color: var(--colors-brand-5); --listSelect-base-active-bg-color: var(--colors-neutral-fill-11); --listSelect-base-disabled-top-border-color: var(--colors-neutral-line-8); --listSelect-base-disabled-top-border-width: var(--borders-width-2); --listSelect-base-disabled-top-border-style: var(--borders-style-2); --listSelect-base-disabled-right-border-color: var(--colors-neutral-line-8); --listSelect-base-disabled-right-border-width: var(--borders-width-2); --listSelect-base-disabled-right-border-style: var(--borders-style-2); --listSelect-base-disabled-bottom-border-color: var(--colors-neutral-line-8); --listSelect-base-disabled-bottom-border-width: var(--borders-width-2); --listSelect-base-disabled-bottom-border-style: var(--borders-style-2); --listSelect-base-disabled-left-border-color: var(--colors-neutral-line-8); --listSelect-base-disabled-left-border-width: var(--borders-width-2); --listSelect-base-disabled-left-border-style: var(--borders-style-2); --listSelect-base-disabled-top-right-border-radius: var(--borders-radius-3); --listSelect-base-disabled-top-left-border-radius: var(--borders-radius-3); --listSelect-base-disabled-bottom-right-border-radius: var( --borders-radius-3 ); --listSelect-base-disabled-bottom-left-border-radius: var(--borders-radius-3); --listSelect-base-disabled-paddingTop: var(--sizes-size-3); --listSelect-base-disabled-paddingBottom: var(--sizes-size-3); --listSelect-base-disabled-paddingLeft: var(--sizes-size-7); --listSelect-base-disabled-paddingRight: var(--sizes-size-7); --listSelect-base-disabled-color: var(--colors-neutral-text-6); --listSelect-base-disabled-bg-color: var(--colors-neutral-fill-10); --listSelect-base-image-width: var(--sizes-size-1); --ListControl-item-onHover-color: var(--listSelect-base-hover-color); --ListControl-item-onHover-borderColor: var( --listSelect-base-hover-top-border-color ); --ListControl-item-onActive-color: var(--listSelect-base-active-color); --ListControl-item-onActive-onHover-bg: var(--colors-neutral-fill-11); --ListControl-item-onActive-color: var( --listSelect-base-active-top-border-color ); --ListControl-item-onActive-before-bg: var(--colors-brand-5); --ListControl-item-color: var(--listSelect-base-default-color); --ListControl-item-onDisabled-color: var(--listSelect-base-disabled-color); --ListControl-item-paddingX: var(--listSelect-base-default-paddingLeft); --ListControl-item-paddingY: var(--listSelect-base-default-paddingTop); --link-onClick-color: var(--colors-link-4); --link-onClick-fontSize: var(--fonts-size-7); --link-onClick-font-style: none; --link-onClick-fontWeight: var(--fonts-weight-6); --link-onClick-text-decoration: none; --link-onClick-bg-color: transparent; --link-onHover-color: var(--colors-link-6); --link-onHover-fontSize: var(--fonts-size-7); --link-onHover-font-style: none; --link-onHover-fontWeight: var(--fonts-weight-6); --link-onHover-text-decoration: none; --link-onHover-bg-color: transparent; --link-color: var(--colors-link-5); --link-fontSize: var(--fonts-size-7); --link-font-style: none; --link-fontWeight: var(--fonts-weight-6); --link-text-decoration: none; --link-bg-color: transparent; --link-disabled-color: var(--colors-neutral-text-6); --link-disabled-fontSize: var(--fonts-size-7); --link-disabled-font-style: none; --link-disabled-fontWeight: var(--fonts-weight-6); --link-disabled-text-decoration: none; --link-disabled-bg-color: transparent; --link-icon-size: var(--sizes-size-8); --link-icon-margin: var(--sizes-size-3); --link-decoration: var(--link-text-decoration); --link-onHover-decoration: var(--link-onClick-text-decoration); --Form-item-gap: var(--sizes-base-12); --Form-item-mobile-gap: var(--sizes-base-4); --Form-item-color: var(--colors-neutral-text-4); --Form-item-fontSize: var(--fonts-size-7); --Form-item-fontWeight: var(--fonts-weight-6); --Form-item-lineHeight: var(--fonts-lineHeight-1); --Form-item-star-color: var(--colors-error-5); --Form-item-star-size: var(--sizes-size-7); --Form-description-color: var(--colors-neutral-text-5); --Form-description-fontSize: var(--fonts-size-8); --Form-description-fontWeight: var(--fonts-weight-6); --Form-description-lineHeight: var(--fonts-lineHeight-2); --Form-description-gap: var(--sizes-size-3); --Form-item-onError-color: var(--colors-neutral-text-4); --Form-item-onError-borderColor: var(--colors-error-5); --Form-item-onError-bg: var(--colors-neutral-fill-11); --Form-feedBack-color: var(--colors-error-5); --Form-feedBack-fontSize: var(--fonts-size-8); --Form-feedBack-fontWeight: var(--fonts-weight-6); --Form-feedBack-lineHeight: var(--fonts-lineHeight-2); --Form-feedBack-gap: var(--sizes-size-3); --Form-mode-default-labelGap: var(--sizes-size-5); --Form-mode-default-width: 100%; --Form--horizontal-label-gap: var(--sizes-base-8); --Form--horizontal-label-widthBase: var(--sizes-base-49); --Form--horizontal-label-widthXs: var(--sizes-base-25); --Form--horizontal-label-widthSm: var(--sizes-base-35); --Form--horizontal-label-widthMd: 8.5rem; --Form--horizontal-label-widthLg: 12.5rem; --Form--horizontal-value-marginTop: var(--sizes-size-0); --Form--horizontal-value-marginBottom: var(--sizes-size-0); --Form--horizontal-value-marginLeft: var(--sizes-size-5); --Form--horizontal-value-marginRight: var(--sizes-size-0); --Form--horizontal-value-maxWidth: 100%; --Form--horizontal-value-minWidth: var(--sizes-size-0); --Form--horizontal-value-minWidth: var(--sizes-size-0); --Form-mode-inline-item-gap: var(--sizes-base-8); --Form-mode-inline-label-gap: var(--sizes-base-8); --InputRange-track-bg: var(--colors-neutral-fill-8); --InputRange-track-height: var(--sizes-size-4); --InputRange-track-border-radius: var(--sizes-size-3); --InputRange-track-onActive-bg: var(--colors-brand-5); --InputRange-handle-height: var(--sizes-size-9); --InputRange-handle-width: var(--sizes-size-9); --InputRange-handle-mobile-height: var(--sizes-base-10); --InputRange-handle-mobile-width: var(--sizes-base-10); --InputRange-handle-bg: var(--colors-neutral-fill-11); --InputRange-handle-top-border-color: var(--colors-brand-5); --InputRange-handle-top-border-width: 0.0625rem; --InputRange-handle-top-border-style: var(--borders-style-2); --InputRange-handle-top-right-border-radius: var(--borders-radius-7); --InputRange-handle-border: var(--InputRange-handle-top-border-width) var(--InputRange-handle-top-border-style) var(--InputRange-handle-top-border-color); --InputRange-handle-border-radius: var( --InputRange-handle-top-right-border-radius ); --InputRange-handle-onActive-transform: scale(1.3); --InputRange-handle-onDrage-border-width: 0.125rem; --InputRange-handle-onFocus-borderRadius: var( --InputRange-handle-border-radius ); --InputRange-padding: 1rem; --InputRange-handle-icon-width: var(--sizes-size-5); --InputRange-handle-icon-height: var(--sizes-size-5); --InputRange-handle-icon-color: var(--colors-brand-9); --InputRange-track-onActive-onDisabled-bg: var(--colors-neutral-fill-6); --InputRange-handle-onDisabled-border-color: var(--colors-neutral-fill-7); --InputRange-handle-onDisabled-bg: var(--colors-neutral-fill-11); --InputRange-handle-icon-onDisabled-color: var(--colors-neutral-fill-7); --InputRange-track-transition: left var(--animation-duration) ease-out, width var(--animation-duration) ease-out; --InputRange-handle-transition: transform var(--animation-duration) ease-out; --InputRange-track-dot-height: var(--sizes-size-4); --InputRange-track-dot-width: var(--sizes-size-4); --InputRange-track-dot-bg: var(--colors-neutral-fill-11); --InputRange-marks-color: var(--colors-neutral-text-2); --InputRange-marks-fontSize: var(--fonts-size-7); --InputRange-marks-fontWeight: var(--fonts-weight-6); --InputRange-marks-lineHeight: var(--fonts-lineHeight-2); --InputRange-marks-marginTop: var(--sizes-size-0); --InputRange-label-color: var(--colors-neutral-fill-11); --InputRange-label-fontSize: var(--fonts-size-7); --InputRange-label-font-size: var(--InputRange-label-fontSize); --InputRange-label-fontWeight: var(--fonts-weight-6); --InputRange-label-lineHeight: var(--fonts-lineHeight-2); --InputRange-label-paddingTop: var(--sizes-size-5); --InputRange-label-paddingBottom: var(--sizes-size-5); --InputRange-label-paddingLeft: var(--sizes-size-5); --InputRange-label-paddingRight: var(--sizes-size-5); --InputRange-label-bg: var(--colors-neutral-fill-1); --InputRange-label-top-right-border-radius: var(--borders-radius-3); --InputRange-label-padding: var(--InputRange-label-paddingTop) var(--InputRange-label-paddingRight) var(--InputRange-label-paddingBottom) var(--InputRange-label-paddingLeft); --InputRange-label-border-radius: var( --InputRange-label-top-right-border-radius ); --InputRange-label-position-bottom: calc(100% + 8px); --InputRange-input-width: var(--sizes-base-40); --InputRange-input-mobile-width: var(--sizes-base-20); --InputRange-input-marginTop: var(--sizes-size-0); --InputRange-input-marginBottom: var(--sizes-size-0); --InputRange-input-marginLeft: var(--sizes-size-5); --InputRange-input-marginRight: var(--sizes-size-5); --InputRange-clearIcon-height: var(--sizes-size-7); --InputRange-clearIcon-width: var(--sizes-size-7); --InputRange-clearIcon-color: var(--colors-neutral-text-4); --InputRange-clearIcon-hoverColor: var(--colors-brand-5); --Progress-line-bg: var(--colors-neutral-fill-8); --Progress-line-theme-color: var(--colors-brand-5); --Progress-line-color: var(--colors-neutral-text-2); --Progress-line-fontSize: var(--fonts-size-8); --Progress-circle-bg: var(--colors-neutral-fill-8); --Progress-circle-theme-color: red; --Progress-circle-color: var(--colors-neutral-text-2); --Progress-circle-fontSize: var(--fonts-size-8); --Progress-borderRadius: var(--borderRadius); --Progress-animate-backgroundColor: #fff; --Progress-bar-backgroundColor: var(--colors-neutral-fill-8); --dialog-default-border-width: var(--sizes-size-0); --dialog-default-border-radius: var(--sizes-size-4); --dialog-default-padding-y: var(--sizes-base-12); --dialog-header-height: var(--sizes-size-1); --dialog-icon-icon: ''; --dialog-icon-size: var(--sizes-size-9); --dialog-icon-color: var(--colors-neutral-text-6); --dialog-header-color: var(--colors-neutral-text-2); --dialog-header-fontSize: var(--fonts-size-7); --dialog-header-fontWeight: var(--fonts-weight-5); --dialog-content-fontSize: var(--sizes-size-8); --dialog-content-color: var(--colors-neutral-text-2); --dialog-footer-height: var(--sizes-size-1); --dialog-footer-margin-left: var(--sizes-size-5); --dialog-size-sm-width: 21.875rem; --dialog-size-normal-width: 31.25rem; --dialog-size-lg-width: 68.75rem; --dialog-size-xl-width: 90%; --Modal-bg: var(--background); --Modal-body--noHeader-paddingTop: var(--gap-base); --Modal-body-borderBottom: var(--borders-style-1) solid var(--colors-neutral-line-10); --Modal-body-borderTop: var(--borders-style-1) solid var(--colors-neutral-line-10); --Modal-body-paddingX: var(--sizes-size-0); --Modal-body-paddingY: var(--sizes-base-12); --Modal-close-color: var(--text--muted-color); --Modal-close-width: 1rem; --Modal-content-borderColor: var(--colors-neutral-fill-9); --Modal-content-borderRadius: var(--borders-radius-4); --Modal-content-borderWidth: var(--borders-width-2); --Modal-content-minHeight: 12.0625rem; --Modal-content-startMarginTop: 3.75rem; --Modal-content-stepMarginTop: 1.875rem; --Modal-footer-button-width: 4.5rem; --Modal-footer-marginX: var(--sizes-size-0); --Modal-footer-marginY: var(--sizes-size-0); --Modal-footer-padding: var(--sizes-size-0); --Modal-header-bg: var(--colors-neutral-fill-11); --Modal-header-height: 2.5rem; --Modal-header-paddingX: var(--sizes-size-0); --Modal-header-paddingY: var(--sizes-size-0); --Modal-overlay-bg: rgba(0, 0, 0, 0.7); --Modal-title-color: var(--colors-neutral-text-2); --Modal-title-fontSize: var(--fonts-size-7); --Modal-title-fontWeight: var(--fonts-weight-5); --Modal-title-lineHeight: var(--lineHeightBase); --Modal-widthBase: 31.25rem; --Modal-widthLg: 68.75rem; --Modal-widthMd: 50rem; --Modal-widthSm: 21.875rem; --Modal-widthXl: 90%; --Model-close-onHover-color: var(--text-color); --drawer-header-height: var(--sizes-size-1); --drawer-header-color: var(--colors-neutral-text-2); --drawer-header-fontSize: var(--fonts-size-7); --drawer-header-fontWeight: var(--fonts-weight-5); --drawer-header-icon-icon: ''; --drawer-header-icon-size: var(--sizes-size-7); --drawer-header-icon-color: var(--colors-neutral-text-2); --drawer-content-paddingTop: var(--sizes-base-12); --drawer-content-paddingBottom: var(--sizes-base-12); --drawer-content-paddingLeft: var(--sizes-base-12); --drawer-content-paddingRight: var(--sizes-base-12); --drawer-footer-height: var(--sizes-size-1); --drawer-footer-margin-left: var(--sizes-size-9); --drawer-size-xs-width: 12.5rem; --drawer-size-sm-width: 18.75rem; --drawer-size-md-width: 31.25rem; --drawer-size-lg-width: 50rem; --drawer-size-xl-width: 90%; --Drawer-bg: var(--background); --Drawer-body-padding: var(--sizes-base-12); --Drawer-footer-margin: var(--sizes-size-9); --Drawer-close-color: var(--colors-neutral-text-2); --Drawer-close-onHover-color: var(--text-color); --Drawer-close-size: 0.75rem; --Drawer-content-borderColor: var(--borderColor); --Drawer-content-borderRadius: 0; --Drawer-content-borderWidth: var(--borderWidth); --Drawer-footer-borderColor: var(--colors-neutral-line-10); --Drawer-footer-padding: var(--gap-base); --Drawer-header-bg: var(--colors-neutral-fill-11); --Drawer-header-borderColor: var(--colors-neutral-line-10); --Drawer-header-padding: var(--sizes-size-9) var(--sizes-base-12); --Drawer-overlay-bg: rgba(0, 0, 0, 0.6); --Drawer-title-fontColor: var(--colors-neutral-text-2); --Drawer-title-fontSize: var(--fontSizeMd); --Drawer-widthBase: 25rem; --Drawer-widthLg: 50rem; --Drawer-widthMd: 31.25rem; --Drawer-widthSm: 18.75rem; --Drawer-widthXl: 90%; --Drawer-widthXs: 12.5rem; --Rating-star-margin: var(--sizes-size-5); --Rating-star-size: var(--sizes-base-12); --Rating-star-icon-size: var(--sizes-base-9); --Rating-star-icon: ''; --Rating-colors: '[{"value":"#abadb1","id":2},{"value":"#787b81","id":3},{"value":"#ffa900","id":5}]'; --Rating-text-color: var(--colors-neutral-text-2); --Rating-text-fontSize: var(--fonts-size-7); --Rating-text-fontWeight: var(--fonts-weight-6); --Rating-text-lineHeight: var(--fonts-lineHeight-2); --Rating-inactive-color: var(--colors-neutral-text-9); --radio-default-default-color: var(--colors-neutral-text-8); --radio-default-default-text-color: var(--colors-neutral-text-1); --radio-default-default-bg-color: var(--colors-neutral-fill-11); --radio-default-default-fontSize: var(--fonts-size-7); --radio-default-default-fontWeight: var(--fonts-weight-6); --radio-default-default-lineHeight: var(--fonts-lineHeight-2); --radio-default-default-point-size: var(--sizes-size-9); --radio-default-default-point-inner-size: var(--sizes-size-5); --radio-default-default-marginTop: var(--sizes-size-0); --radio-default-default-marginBottom: var(--sizes-size-4); --radio-default-default-marginLeft: var(--sizes-size-0); --radio-default-default-marginRight: var(--sizes-size-9); --radio-default-default-distance: var(--sizes-size-5); --radio-default-hover-color: var(--colors-brand-5); --radio-default-hover-text-color: var(--colors-neutral-text-1); --radio-default-hover-bg-color: var(--colors-neutral-fill-11); --radio-default-active-color: var(--colors-brand-5); --radio-default-active-text-color: var(--colors-neutral-text-1); --radio-default-active-bg-color: var(--colors-neutral-fill-11); --radio-default-disabled-color: var(--colors-neutral-text-6); --radio-default-disabled-text-color: var(--colors-neutral-text-6); --radio-default-disabled-bg-color: var(--colors-neutral-fill-8); --radio-default-vertical-marginTop: var(--sizes-size-0); --radio-default-vertical-marginBottom: var(--sizes-size-4); --radio-default-vertical-marginLeft: var(--sizes-size-0); --radio-default-vertical-marginRight: var(--sizes-size-5); --Radio--sm-size: var(--Checkbox--sm-size); --Radio-color: var(--radio-default-default-color); --Radio-inner-size: var(--radio-default-default-point-inner-size); --Radio-onHover-color: var(--radio-default-active-color); --Radio-size: var(--radio-default-default-point-size); --Radio-onDisabled-bg: var(--radio-default-disabled-bg-color); --Radio-onDisabled-color: var(--radio-default-disabled-color); --Radio-onFocus-boxShadow: none; --switch-default-off-bg-color: var(--colors-neutral-fill-7); --switch-default-off-hover-bg-color: var(--colors-neutral-fill-6); --switch-default-off-slider-color: var(--colors-neutral-fill-11); --switch-default-on-bg-color: var(--colors-brand-5); --switch-default-on-hover-bg-color: var(--colors-brand-4); --switch-default-on-slider-color: var(--colors-neutral-fill-11); --switch-option-fontSize: var(--fonts-size-7); --switch-option-fontWeight: var(--fonts-weight-6); --switch-option-lineHeight: var(--fonts-lineHeight-2); --switch-option-color: var(--colors-neutral-text-1); --switch-option-marginTop: var(--sizes-size-0); --switch-option-marginBottom: var(--sizes-size-0); --switch-option-marginLeft: var(--sizes-size-5); --switch-option-marginRight: var(--sizes-size-0); --switch-text-off-fontSize: var(--fonts-size-8); --switch-text-off-fontWeight: var(--fonts-weight-3); --switch-text-off-color: var(--colors-neutral-text-11); --switch-text-off-marginTop: var(--sizes-size-0); --switch-text-off-marginBottom: var(--sizes-size-0); --switch-text-off-marginLeft: var(--sizes-base-12); --switch-text-off-marginRight: var(--sizes-size-5); --switch-text-on-fontSize: var(--fonts-size-8); --switch-text-on-fontWeight: var(--fonts-weight-3); --switch-text-on-color: var(--colors-neutral-text-11); --switch-text-on-marginTop: var(--sizes-size-0); --switch-text-on-marginBottom: var(--sizes-size-0); --switch-text-on-marginLeft: var(--sizes-base-4); --switch-text-on-marginRight: var(--sizes-base-12); --switch-size-default-height: var(--sizes-base-10); --switch-size-default-minWidth: var(--sizes-base-22); --switch-size-default-slider-width: var(--sizes-size-9); --switch-size-default-slider-margin: var(--sizes-size-2); --switch-size-default-top-right-border-radius: var(--sizes-base-15); --switch-size-default-top-left-border-radius: var(--sizes-base-15); --switch-size-default-bottom-right-border-radius: var(--sizes-base-15); --switch-size-default-bottom-left-border-radius: var(--sizes-base-15); --switch-size-sm-height: var(--sizes-size-9); --switch-size-sm-minWidth: var(--sizes-base-14); --switch-size-sm-slider-width: var(--sizes-size-7); --switch-size-sm-slider-margin: var(--sizes-size-2); --switch-size-sm-top-right-border-radius: var(--sizes-base-15); --switch-size-sm-top-left-border-radius: var(--sizes-base-15); --switch-size-sm-bottom-right-border-radius: var(--sizes-base-15); --switch-size-sm-bottom-left-border-radius: var(--sizes-base-15); --Switch-bgColor: var(--switch-default-off-bg-color); --Switch-borderColor: var(--colors-neutral-line-6); --Switch-gap: var(--switch-option-marginLeft); --Switch-height: var(--switch-size-default-height); --Switch-onActive-bgColor: var(--switch-default-on-bg-color); --Switch-onDisabled-bgColor: var(--colors-brand-9); --Switch-onDisabled-circle-BackgroundColor: var(--colors-neutral-fill-11); --Switch-onDisabled-color: var(--colors-neutral-text-11); --Switch-onHover-bgColor: var(--switch-default-off-hover-bg-color); --Switch-valueColor: var(--switch-text-off-color); --Switch-width: var(--switch-size-default-minWidth); --Switch-slider-margin: var(--switch-size-default-slider-margin); --Switch-slider-width: var(--switch-size-default-slider-width); --Switch-slider-transition: all 0.5s ease; --Switch-text-marginRight: var(--switch-text-off-marginRight); --Switch-text-marginLeft: var(--switch-text-off-marginLeft); --Switch-width--sm: var(--switch-size-sm-minWidth); --Switch-height--sm: var(--switch-size-sm-height); --Switch-slider-width--sm: var(--switch-size-sm-slider-width); --Switch-text-marginRight--sm: var(--switch-text-off-marginRight); --Switch-text-marginLeft--sm: var(--switch-text-off-marginLeft); --Switch-checked-bgColor: var(--switch-default-on-bg-color); --Switch-checked-onHover-bgColor: var(--switch-default-on-hover-bg-color); --Switch-checked-onActive-bgColor: var(--colors-brand-4); --Switch-spinner-icon-width: var(--sizes-base-7); --Switch-spinner-icon-width--sm: var(--sizes-base-5); --switch-spinner-left--sm: var(--sizes-size-0); --collapse-default-top-border-color: var(--colors-neutral-line-8); --collapse-default-top-border-width: var(--borders-width-2); --collapse-default-top-border-style: var(--borders-style-2); --collapse-default-right-border-color: var(--colors-neutral-line-8); --collapse-default-right-border-width: var(--borders-width-2); --collapse-default-right-border-style: var(--borders-style-2); --collapse-default-bottom-border-color: var(--colors-neutral-line-8); --collapse-default-bottom-border-width: var(--borders-width-2); --collapse-default-bottom-border-style: var(--borders-style-2); --collapse-default-left-border-color: var(--colors-neutral-line-8); --collapse-default-left-border-width: var(--borders-width-2); --collapse-default-left-border-style: var(--borders-style-2); --collapse-default-top-right-border-radius: var(--borders-radius-3); --collapse-default-top-left-border-radius: var(--borders-radius-3); --collapse-default-bottom-right-border-radius: var(--borders-radius-3); --collapse-default-bottom-left-border-radius: var(--borders-radius-3); --collapse-default-header-paddingTop: var(--sizes-size-9); --collapse-default-header-paddingBottom: var(--sizes-size-9); --collapse-default-header-paddingLeft: var(--sizes-size-9); --collapse-default-header-paddingRight: var(--sizes-size-9); --collapse-default-header-color: var(--colors-neutral-text-2); --collapse-default-header-fontSize: var(--fonts-size-7); --collapse-default-header-fontWeight: var(--fonts-weight-6); --collapse-default-header-lineHeight: var(--fonts-lineHeight-2); --collapse-default-header-bg-color: var(--colors-neutral-fill-10); --collapse-default-header-hover-bg-color: var(--colors-neutral-fill-9); --collapse-default-header-hover-color: var(--colors-neutral-text-2); --collapse-default-disabled-header-bg-color: var(--colors-neutral-fill-10); --collapse-default-disabled-color: var(--colors-neutral-text-6); --collapse-default-content-paddingTop: var(--sizes-size-9); --collapse-default-content-paddingBottom: var(--sizes-size-9); --collapse-default-content-paddingLeft: var(--sizes-size-9); --collapse-default-content-paddingRight: var(--sizes-size-9); --collapse-default-content-color: var(--colors-neutral-text-2); --collapse-default-content-fontSize: var(--fonts-size-8); --collapse-default-content-fontWeight: var(--fonts-weight-6); --collapse-default-content-lineHeight: var(--fonts-lineHeight-2); --collapse-default-bg-color: var(--colors-neutral-fill-11); --collapse-icon-icon: ''; --collapse-icon-size: var(--sizes-size-6); --collapse-icon-color: var(--colors-neutral-text-5); --collapse-icon-margin: var(--sizes-size-5); --collapse-icon-rotate: 90deg; --Collapse-header-fontSize: var(--collapse-default-header-fontSize); --Collapse-header-fontWeight: var(--collapse-default-header-fontWeight); --Collapse-header-padding: var(--collapse-default-header-paddingTop) var(--collapse-default-header-paddingRight) var(--collapse-default-header-paddingBottom) var(--collapse-default-header-paddingLeft); --Collapse-header-bg: var(--collapse-default-header-bg-color); --Collapse-header-onHover-bg: var(--collapse-default-header-hover-bg-color); --Collapse-header-collapsed-borderTop: none; --Collapse-header-collapsed-borderBottom: none; --Collapse-header-wrapper-direction: row-reverse; --Collapse-header-bg-disabled-color: var( --collapse-disabled-header-hover-bg-color ); --Collapse-content-padding: var(--collapse-default-content-paddingTop) var(--collapse-default-content-paddingRight) var(--collapse-default-content-paddingBottom) var(--collapse-default-content-paddingLeft); --Collapse-content-color: var(--collapse-default-content-color); --Collapse-content-fontSize: var(--collapse-default-content-fontSize); --Collapse-content-fontWeight: var(--collapse-default-content-fontWeight); --Collapse-mobile-marginBottom: var(--sizes-size-9); --Tabs-borderColor: var(--colors-neutral-line-8); --Tabs-link-disabled-color: var(--colors-neutral-text-6); --Tabs--sidebar-iconColor: var(--colors-brand-5); --Tabs-borderRadius: var(--borderRadius); --Tabs-borderWidth: var(--borderWidth); --Tabs-borderColor: var(--colors-neutral-line-8); --Tabs-color: var(--text-color); --Tabs-content-bg: var(--colors-neutral-fill-11); --Tabs-linkFontSize: var(--fonts-size-7); --Tabs-linkMargin: 0 0.1875rem 0 0; --Tabs-linkPadding: var(--gap-sm) var(--gap-base); --Tabs-onActive-bg: var(--background); --Tabs-onActive-borderColor: var(--borderColor); --Tabs-onActive-color: var(--colors-neutral-text-2); --Tabs-onError-color: var(--colors-error-5); --Tabs-onDisabled-color: var(--colors-neutral-text-7); --Tabs-onHover-borderColor: var(--colors-neutral-line-8); --Tabs-add-icon-size: 0.9375rem; --Tabs-add-icon-padding: 0.0625rem; --Tabs-add-icon-margin: var(--gap-xs); --Tabs-add-margin: var(--gap-lg); --Tabs-gray-color: #83868c; --Tabs-close-margin: var(--gap-xs); --Tabs-close-marginTop: 0.0625rem; --Tabs-close-size: 0.75rem; --Tabs-link-maxWidth: 10rem; --Tabs-icon-gap: var(--gap-sm); --Tabs-animation-duration: var(--animation-duration); --Tabs--simple-paddingTop: var(--sizes-size-3); --Tabs--simple-paddingBottom: var(--sizes-size-3); --Tabs--simple-paddingLeft: var(--sizes-size-9); --Tabs--simple-paddingRight: var(--sizes-size-9); --Tabs--simple-split-size: var(--Tabs--simple-paddingTop) var(--Tabs--simple-paddingRight) var(--Tabs--simple-paddingBottom) var(--Tabs--simple-paddingLeft); --Tabs--simple-split-width: var(--borders-width-2); --Tabs--simple-split-style: var(--borders-style-2); --Tabs--simple-split-color: var(--colors-neutral-line-8); --Tabs--simple-color: var(--colors-neutral-text-2); --Tabs--simple-fontSize: var(--fonts-size-7); --Tabs--simple-fontWeight: var(--fonts-weight-6); --Tabs--simple-lineHeight: var(--fonts-lineHeight-2); --Tabs--simple-active-color: var(--colors-brand-5); --Tabs--simple-active-fontSize: var(--fonts-size-7); --Tabs--simple-active-fontWeight: var(--fonts-weight-6); --Tabs--simple-active-lineHeight: var(--fonts-lineHeight-2); --Tabs--simple-hover-color: var(--colors-brand-5); --Tabs--simple-hover-fontSize: var(--fonts-size-7); --Tabs--simple-hover-fontWeight: var(--fonts-weight-6); --Tabs--simple-hover-lineHeight: var(--fonts-lineHeight-2); --Tabs--simple-disabled-color: var(--colors-neutral-text-6); --Tabs--simple-disabled-fontSize: var(--fonts-size-7); --Tabs--simple-disabled-fontWeight: var(--fonts-weight-6); --Tabs--simple-disabled-lineHeight: var(--fonts-lineHeight-2); --Tabs--strong-paddingTop: var(--sizes-size-5); --Tabs--strong-paddingBottom: var(--sizes-size-5); --Tabs--strong-paddingLeft: var(--sizes-size-9); --Tabs--strong-paddingRight: var(--sizes-size-9); --Tabs--strong-marginTop: var(--sizes-size-0); --Tabs--strong-marginBottom: var(--sizes-size-0); --Tabs--strong-marginLeft: var(--sizes-size-0); --Tabs--strong-marginRight: var(--sizes-size-5); --Tabs--strong-bg: var(--colors-neutral-fill-11); --Tabs--strong-top-border-color: var(--colors-neutral-text-8); --Tabs--strong-top-border-width: var(--borders-width-2); --Tabs--strong-top-border-style: var(--borders-style-2); --Tabs--strong-right-border-color: var(--colors-neutral-text-8); --Tabs--strong-right-border-width: var(--borders-width-2); --Tabs--strong-right-border-style: var(--borders-style-2); --Tabs--strong-bottom-border-color: var(--colors-neutral-text-8); --Tabs--strong-bottom-border-width: var(--borders-width-2); --Tabs--strong-bottom-border-style: var(--borders-style-2); --Tabs--strong-left-border-color: var(--colors-neutral-text-8); --Tabs--strong-left-border-width: var(--borders-width-2); --Tabs--strong-left-border-style: var(--borders-style-2); --Tabs--strong-top-right-border-radius: var(--borders-radius-3); --Tabs--strong-top-left-border-radius: var(--borders-radius-3); --Tabs--strong-bottom-right-border-radius: var(--borders-radius-1); --Tabs--strong-bottom-left-border-radius: var(--borders-radius-1); --Tabs--strong-color: var(--colors-neutral-text-2); --Tabs--strong-fontSize: var(--fonts-size-7); --Tabs--strong-fontWeight: var(--fonts-weight-6); --Tabs--strong-lineHeight: var(--fonts-lineHeight-2); --Tabs--strong-active-bg: var(--colors-neutral-fill-11); --Tabs--strong-active-top-border-color: var(--colors-neutral-text-8); --Tabs--strong-active-top-border-width: var(--borders-width-2); --Tabs--strong-active-top-border-style: var(--borders-style-2); --Tabs--strong-active-right-border-color: var(--colors-neutral-text-8); --Tabs--strong-active-right-border-width: var(--borders-width-2); --Tabs--strong-active-right-border-style: var(--borders-style-2); --Tabs--strong-active-bottom-border-color: transparent; --Tabs--strong-active-bottom-border-width: var(--borders-width-2); --Tabs--strong-active-bottom-border-style: var(--borders-style-2); --Tabs--strong-active-left-border-color: var(--colors-neutral-text-8); --Tabs--strong-active-left-border-width: var(--borders-width-2); --Tabs--strong-active-left-border-style: var(--borders-style-2); --Tabs--strong-active-color: var(--colors-brand-5); --Tabs--strong-active-fontSize: var(--fonts-size-7); --Tabs--strong-active-fontWeight: var(--fonts-weight-6); --Tabs--strong-active-lineHeight: var(--fonts-lineHeight-2); --Tabs--strong-hover-bg: var(--colors-neutral-fill-11); --Tabs--strong-hover-top-border-color: var(--colors-neutral-text-8); --Tabs--strong-hover-top-border-width: var(--borders-width-2); --Tabs--strong-hover-top-border-style: var(--borders-style-2); --Tabs--strong-hover-right-border-color: var(--colors-neutral-text-8); --Tabs--strong-hover-right-border-width: var(--borders-width-2); --Tabs--strong-hover-right-border-style: var(--borders-style-2); --Tabs--strong-hover-bottom-border-color: var(--colors-neutral-text-8); --Tabs--strong-hover-bottom-border-width: var(--borders-width-2); --Tabs--strong-hover-bottom-border-style: var(--borders-style-2); --Tabs--strong-hover-left-border-color: var(--colors-neutral-text-8); --Tabs--strong-hover-left-border-width: var(--borders-width-2); --Tabs--strong-hover-left-border-style: var(--borders-style-2); --Tabs--strong-hover-color: var(--colors-brand-5); --Tabs--strong-hover-fontSize: var(--fonts-size-7); --Tabs--strong-hover-fontWeight: var(--fonts-weight-6); --Tabs--strong-hover-lineHeight: var(--fonts-lineHeight-2); --Tabs--strong-disabled-bg: var(--colors-neutral-fill-11); --Tabs--strong-disabled-top-border-color: var(--colors-neutral-text-8); --Tabs--strong-disabled-top-border-width: var(--borders-width-2); --Tabs--strong-disabled-top-border-style: var(--borders-style-2); --Tabs--strong-disabled-right-border-color: var(--colors-neutral-text-8); --Tabs--strong-disabled-right-border-width: var(--borders-width-2); --Tabs--strong-disabled-right-border-style: var(--borders-style-2); --Tabs--strong-disabled-bottom-border-color: var(--colors-neutral-text-8); --Tabs--strong-disabled-bottom-border-width: var(--borders-width-2); --Tabs--strong-disabled-bottom-border-style: var(--borders-style-2); --Tabs--strong-disabled-left-border-color: var(--colors-neutral-text-8); --Tabs--strong-disabled-left-border-width: var(--borders-width-2); --Tabs--strong-disabled-left-border-style: var(--borders-style-2); --Tabs--strong-disabled-color: var(--colors-neutral-text-6); --Tabs--strong-disabled-fontSize: var(--fonts-size-7); --Tabs--strong-disabled-fontWeight: var(--fonts-weight-6); --Tabs--strong-disabled-lineHeight: var(--fonts-lineHeight-2); --Tabs--strong-add-size: 2rem; --Tabs--strong-arrow-size: 1.5rem; --Tabs--line-padding: var(--sizes-base-16); --Tabs--line-border-color: var(--colors-neutral-text-8); --Tabs--line-border-width: var(--borders-width-2); --Tabs--line-border-style: var(--borders-style-2); --Tabs--line-color: var(--colors-neutral-text-2); --Tabs--line-fontSize: var(--fonts-size-7); --Tabs--line-fontWeight: var(--fonts-weight-6); --Tabs--line-lineHeight: var(--fonts-lineHeight-2); --Tabs--line-active-color: var(--colors-brand-5); --Tabs--line-active-fontSize: var(--fonts-size-7); --Tabs--line-active-fontWeight: var(--fonts-weight-6); --Tabs--line-active-lineHeight: var(--fonts-lineHeight-2); --Tabs--line-active-border-color: var(--colors-brand-5); --Tabs--line-active-border-width: var(--borders-width-3); --Tabs--line-active-border-style: var(--borders-style-2); --Tabs--line-onHover-borderColor: var(--Tabs--line-active-border-color); --Tabs--line-hover-color: var(--colors-brand-5); --Tabs--line-hover-fontSize: var(--fonts-size-7); --Tabs--line-hover-fontWeight: var(--fonts-weight-6); --Tabs--line-hover-lineHeight: var(--fonts-lineHeight-2); --Tabs--line-disabled-color: var(--colors-neutral-text-6); --Tabs--line-disabled-fontSize: var(--fonts-size-7); --Tabs--line-disabled-fontWeight: var(--fonts-weight-6); --Tabs--line-disabled-lineHeight: var(--fonts-lineHeight-2); --Tabs--card-paddingTop: var(--sizes-size-4); --Tabs--card-paddingBottom: var(--sizes-size-0); --Tabs--card-paddingLeft: var(--sizes-size-6); --Tabs--card-paddingRight: var(--sizes-size-6); --Tabs--card-padding: var(--Tabs--card-paddingTop) var(--Tabs--card-paddingRight) var(--Tabs--card-paddingBottom) var(--Tabs--card-paddingLeft); --Tabs--card-border-color: var(--colors-neutral-line-8); --Tabs--card-border-width: var(--borders-width-2); --Tabs--card-border-style: var(--borders-style-2); --Tabs--card-borderTopColor: var(--Tabs--card-border-color); --Tabs--card-bg: var(--colors-neutral-fill-10); --Tabs--card-linkBg: transparent; --Tabs--card-color: var(--colors-neutral-text-2); --Tabs--card-fontSize: var(--fonts-size-7); --Tabs--card-fontWeight: var(--fonts-weight-6); --Tabs--card-lineHeight: var(--fonts-lineHeight-2); --Tabs--card-linkMargin: var(--sizes-size-6); --Tabs--card-linkPadding: var(--sizes-size-6); --Tabs--card-borderRadius: var(--borders-radius-3); --Tabs--card-active-color: var(--colors-neutral-text-2); --Tabs--card-active-fontSize: var(--fonts-size-7); --Tabs--card-active-fontWeight: var(--fonts-weight-6); --Tabs--card-active-lineHeight: var(--fonts-lineHeight-2); --Tabs--card-active-linkBg: var(--colors-neutral-fill-11); --Tabs--card-onActive-bg: var(--Tabs--card-active-linkBg); --Tabs--card-hover-color: var(--colors-neutral-text-2); --Tabs--card-hover-fontSize: var(--fonts-size-7); --Tabs--card-hover-fontWeight: var(--fonts-weight-6); --Tabs--card-hover-lineHeight: var(--fonts-lineHeight-2); --Tabs--card-hover-linkBg: var(--colors-neutral-fill-11); --Tabs--card-disabled-color: var(--colors-neutral-text-6); --Tabs--card-disabled-fontSize: var(--fonts-size-7); --Tabs--card-disabled-fontWeight: var(--fonts-weight-6); --Tabs--card-disabled-lineHeight: var(--fonts-lineHeight-2); --Tabs--card-disabled-linkBg: transparent; --Tabs--card-add-gap: var(--gap-md); --Tabs--card-add-gap-top: 0.4375rem; --Tabs--card-arrow-gap: var(--gap-sm); --Tabs--tiled-top-border-color: var(--colors-neutral-line-8); --Tabs--tiled-top-border-width: var(--borders-width-2); --Tabs--tiled-top-border-style: var(--borders-style-2); --Tabs--tiled-right-border-color: var(--colors-neutral-line-8); --Tabs--tiled-right-border-width: var(--borders-width-2); --Tabs--tiled-right-border-style: var(--borders-style-2); --Tabs--tiled-bottom-border-color: var(--colors-neutral-line-8); --Tabs--tiled-bottom-border-width: var(--borders-width-2); --Tabs--tiled-bottom-border-style: var(--borders-style-2); --Tabs--tiled-left-border-color: var(--colors-neutral-line-8); --Tabs--tiled-left-border-width: var(--borders-width-2); --Tabs--tiled-left-border-style: var(--borders-style-2); --Tabs--tiled-color: var(--colors-neutral-text-2); --Tabs--tiled-fontSize: var(--fonts-size-7); --Tabs--tiled-fontWeight: var(--fonts-weight-6); --Tabs--tiled-lineHeight: var(--fonts-lineHeight-2); --Tabs--tiled-paddingTop: var(--sizes-size-5); --Tabs--tiled-paddingBottom: var(--sizes-size-5); --Tabs--tiled-paddingLeft: var(--sizes-size-7); --Tabs--tiled-paddingRight: var(--sizes-size-7); --Tabs--tiled-active-top-border-color: var(--colors-brand-5); --Tabs--tiled-active-top-border-width: var(--borders-width-2); --Tabs--tiled-active-top-border-style: var(--borders-style-2); --Tabs--tiled-active-right-border-color: var(--colors-neutral-line-8); --Tabs--tiled-active-right-border-width: var(--borders-width-2); --Tabs--tiled-active-right-border-style: var(--borders-style-2); --Tabs--tiled-active-bottom-border-color: transparent; --Tabs--tiled-active-bottom-border-width: var(--borders-width-2); --Tabs--tiled-active-bottom-border-style: var(--borders-style-2); --Tabs--tiled-active-left-border-color: var(--colors-neutral-line-8); --Tabs--tiled-active-left-border-width: var(--borders-width-2); --Tabs--tiled-active-left-border-style: var(--borders-style-2); --Tabs--tiled-active-color: var(--colors-neutral-text-2); --Tabs--tiled-active-fontSize: var(--fonts-size-7); --Tabs--tiled-active-fontWeight: var(--fonts-weight-6); --Tabs--tiled-active-lineHeight: var(--fonts-lineHeight-2); --Tabs--tiled-hover-top-border-color: var(--colors-neutral-line-8); --Tabs--tiled-hover-top-border-width: var(--borders-width-2); --Tabs--tiled-hover-top-border-style: var(--borders-style-2); --Tabs--tiled-hover-right-border-color: var(--colors-neutral-line-8); --Tabs--tiled-hover-right-border-width: var(--borders-width-2); --Tabs--tiled-hover-right-border-style: var(--borders-style-2); --Tabs--tiled-hover-bottom-border-color: var(--colors-neutral-line-8); --Tabs--tiled-hover-bottom-border-width: var(--borders-width-2); --Tabs--tiled-hover-bottom-border-style: var(--borders-style-2); --Tabs--tiled-hover-left-border-color: var(--colors-neutral-line-8); --Tabs--tiled-hover-left-border-width: var(--borders-width-2); --Tabs--tiled-hover-left-border-style: var(--borders-style-2); --Tabs--tiled-hover-color: var(--colors-neutral-text-2); --Tabs--tiled-hover-fontSize: var(--fonts-size-7); --Tabs--tiled-hover-fontWeight: var(--fonts-weight-6); --Tabs--tiled-hover-lineHeight: var(--fonts-lineHeight-2); --Tabs--tiled-disabled-top-border-color: var(--colors-neutral-line-8); --Tabs--tiled-disabled-top-border-width: var(--borders-width-2); --Tabs--tiled-disabled-top-border-style: var(--borders-style-2); --Tabs--tiled-disabled-right-border-color: var(--colors-neutral-line-8); --Tabs--tiled-disabled-right-border-width: var(--borders-width-2); --Tabs--tiled-disabled-right-border-style: var(--borders-style-2); --Tabs--tiled-disabled-bottom-border-color: var(--colors-neutral-line-8); --Tabs--tiled-disabled-bottom-border-width: var(--borders-width-2); --Tabs--tiled-disabled-bottom-border-style: var(--borders-style-2); --Tabs--tiled-disabled-left-border-color: var(--colors-neutral-line-8); --Tabs--tiled-disabled-left-border-width: var(--borders-width-2); --Tabs--tiled-disabled-left-border-style: var(--borders-style-2); --Tabs--tiled-disabled-color: var(--colors-neutral-text-6); --Tabs--tiled-disabled-fontSize: var(--fonts-size-7); --Tabs--tiled-disabled-fontWeight: var(--fonts-weight-6); --Tabs--tiled-disabled-lineHeight: var(--fonts-lineHeight-2); --Tabs--tiled-add-gap: var(--gap-base); --Tabs--radio-top-border-color: var(--colors-neutral-line-8); --Tabs--radio-top-border-width: var(--borders-width-2); --Tabs--radio-top-border-style: var(--borders-style-2); --Tabs--radio-right-border-color: var(--colors-neutral-line-8); --Tabs--radio-right-border-width: var(--borders-width-2); --Tabs--radio-right-border-style: var(--borders-style-2); --Tabs--radio-bottom-border-color: var(--colors-neutral-line-8); --Tabs--radio-bottom-border-width: var(--borders-width-2); --Tabs--radio-bottom-border-style: var(--borders-style-2); --Tabs--radio-left-border-color: var(--colors-neutral-line-8); --Tabs--radio-left-border-width: var(--borders-width-2); --Tabs--radio-left-border-style: var(--borders-style-2); --Tabs--radio-color: var(--colors-neutral-text-2); --Tabs--radio-fontSize: var(--fonts-size-7); --Tabs--radio-fontWeight: var(--fonts-weight-6); --Tabs--radio-lineHeight: var(--fonts-lineHeight-2); --Tabs--radio-paddingTop: var(--sizes-size-5); --Tabs--radio-paddingBottom: var(--sizes-size-5); --Tabs--radio-paddingLeft: var(--sizes-size-7); --Tabs--radio-paddingRight: var(--sizes-size-7); --Tabs--radio-bg: var(--colors-neutral-fill-11); --Tabs--radio-height: var(--sizes-base-15); --Tabs--radio-active-top-border-color: var(--colors-brand-5); --Tabs--radio-active-top-border-width: var(--borders-width-2); --Tabs--radio-active-top-border-style: var(--borders-style-2); --Tabs--radio-active-right-border-color: var(--colors-brand-5); --Tabs--radio-active-right-border-width: var(--borders-width-2); --Tabs--radio-active-right-border-style: var(--borders-style-2); --Tabs--radio-active-bottom-border-color: var(--colors-brand-5); --Tabs--radio-active-bottom-border-width: var(--borders-width-2); --Tabs--radio-active-bottom-border-style: var(--borders-style-2); --Tabs--radio-active-left-border-color: var(--colors-brand-5); --Tabs--radio-active-left-border-width: var(--borders-width-2); --Tabs--radio-active-left-border-style: var(--borders-style-2); --Tabs--radio-active-color: var(--colors-neutral-text-11); --Tabs--radio-active-fontSize: var(--fonts-size-7); --Tabs--radio-active-fontWeight: var(--fonts-weight-6); --Tabs--radio-active-lineHeight: var(--fonts-lineHeight-2); --Tabs--radio-active-bg: var(--colors-brand-5); --Tabs--radio-hover-top-border-color: var(--colors-neutral-line-8); --Tabs--radio-hover-top-border-width: var(--borders-width-2); --Tabs--radio-hover-top-border-style: var(--borders-style-2); --Tabs--radio-hover-right-border-color: var(--colors-neutral-line-8); --Tabs--radio-hover-right-border-width: var(--borders-width-2); --Tabs--radio-hover-right-border-style: var(--borders-style-2); --Tabs--radio-hover-bottom-border-color: var(--colors-neutral-line-8); --Tabs--radio-hover-bottom-border-width: var(--borders-width-2); --Tabs--radio-hover-bottom-border-style: var(--borders-style-2); --Tabs--radio-hover-left-border-color: var(--colors-neutral-line-8); --Tabs--radio-hover-left-border-width: var(--borders-width-2); --Tabs--radio-hover-left-border-style: var(--borders-style-2); --Tabs--radio-hover-color: var(--colors-neutral-text-2); --Tabs--radio-hover-fontSize: var(--fonts-size-7); --Tabs--radio-hover-fontWeight: var(--fonts-weight-6); --Tabs--radio-hover-lineHeight: var(--fonts-lineHeight-2); --Tabs--radio-hover-bg: var(--colors-neutral-fill-11); --Tabs--radio-disabled-top-border-color: var(--colors-neutral-line-8); --Tabs--radio-disabled-top-border-width: var(--borders-width-2); --Tabs--radio-disabled-top-border-style: var(--borders-style-2); --Tabs--radio-disabled-right-border-color: var(--colors-neutral-line-8); --Tabs--radio-disabled-right-border-width: var(--borders-width-2); --Tabs--radio-disabled-right-border-style: var(--borders-style-2); --Tabs--radio-disabled-bottom-border-color: var(--colors-neutral-line-8); --Tabs--radio-disabled-bottom-border-width: var(--borders-width-2); --Tabs--radio-disabled-bottom-border-style: var(--borders-style-2); --Tabs--radio-disabled-left-border-color: var(--colors-neutral-line-8); --Tabs--radio-disabled-left-border-width: var(--borders-width-2); --Tabs--radio-disabled-left-border-style: var(--borders-style-2); --Tabs--radio-disabled-color: var(--colors-neutral-text-6); --Tabs--radio-disabled-fontSize: var(--fonts-size-7); --Tabs--radio-disabled-fontWeight: var(--fonts-weight-6); --Tabs--radio-disabled-lineHeight: var(--fonts-lineHeight-2); --Tabs--radio-disabled-bg: var(--colors-neutral-fill-11); --Tabs--vertical-color: var(--colors-neutral-text-2); --Tabs--vertical-fontSize: var(--fonts-size-7); --Tabs--vertical-fontWeight: var(--fonts-weight-6); --Tabs--vertical-lineHeight: var(--fonts-lineHeight-2); --Tabs--vertical-paddingTop: var(--sizes-size-5); --Tabs--vertical-paddingBottom: var(--sizes-size-5); --Tabs--vertical-paddingLeft: var(--sizes-size-7); --Tabs--vertical-paddingRight: var(--sizes-size-7); --Tabs--vertical-bg: var(--colors-neutral-fill-10); --Tabs--vertical-width: 8.75rem; --Tabs--vertical-active-color: var(--colors-brand-5); --Tabs--vertical-active-fontSize: var(--fonts-size-7); --Tabs--vertical-active-fontWeight: var(--fonts-weight-6); --Tabs--vertical-active-lineHeight: var(--fonts-lineHeight-2); --Tabs--vertical-active-border-color: var(--colors-brand-5); --Tabs--vertical-active-border-width: var(--borders-width-4); --Tabs--vertical-active-border-style: var(--borders-style-2); --Tabs--vertical-onActive-borderWidth: var( --Tabs--vertical-active-border-width ); --Tabs--vertical-onActive-border: var(--Tabs--vertical-active-border-color); --Tabs--vertical-onActive-color: var(--Tabs--vertical-active-color); --Tabs--vertical-hover-color: var(--colors-brand-6); --Tabs--vertical-hover-fontSize: var(--fonts-size-7); --Tabs--vertical-hover-fontWeight: var(--fonts-weight-6); --Tabs--vertical-hover-lineHeight: var(--fonts-lineHeight-2); --Tabs--vertical-disabled-color: var(--colors-neutral-text-6); --Tabs--vertical-disabled-fontSize: var(--fonts-size-7); --Tabs--vertical-disabled-fontWeight: var(--fonts-weight-6); --Tabs--vertical-disabled-lineHeight: var(--fonts-lineHeight-2); --Tabs--sidebar-color: var(--colors-neutral-text-5); --Tabs--sidebar-fontSize: var(--fonts-size-7); --Tabs--sidebar-fontWeight: var(--fonts-weight-6); --Tabs--sidebar-lineHeight: var(--fonts-lineHeight-2); --Tabs--sidebar-sideWidth: var(--sizes-base-31); --Tabs--sidebar-sideMargin: var(--sizes-base-11); --Tabs--sidebar-iconSize: 1.5rem; --Tabs--sidebar-iconMargin: 0.3125rem; --Tabs--sidebar-active-color: var(--colors-brand-5); --Tabs--sidebar-active-fontSize: var(--fonts-size-7); --Tabs--sidebar-active-fontWeight: var(--fonts-weight-6); --Tabs--sidebar-active-lineHeight: var(--fonts-lineHeight-2); --Tabs--sidebar-hover-color: var(--colors-brand-6); --Tabs--sidebar-hover-fontSize: var(--fonts-size-7); --Tabs--sidebar-hover-fontWeight: var(--fonts-weight-6); --Tabs--sidebar-hover-lineHeight: var(--fonts-lineHeight-2); --Tabs--sidebar-disabled-color: var(--colors-neutral-text-6); --Tabs--sidebar-disabled-fontSize: var(--fonts-size-7); --Tabs--sidebar-disabled-fontWeight: var(--fonts-weight-6); --Tabs--sidebar-disabled-lineHeight: var(--fonts-lineHeight-2); --Tabs--chrome-onHover-bg: var(--colors-neutral-fill-10); --Tabs--chrome-bg: var(--colors-neutral-fill-10); --Tabs--chrome-radius-size: 0.5rem; --Tabs--chrome-right-border-color: var(--colors-neutral-line-5); --Panel-bg-color: var(--colors-neutral-fill-11); --Panel-marginTop: var(--sizes-size-0); --Panel-marginBottom: var(--sizes-base-10); --Panel-marginLeft: var(--sizes-size-0); --Panel-marginRight: var(--sizes-size-0); --Panel-top-border-color: var(--colors-neutral-line-8); --Panel-top-border-width: var(--borders-width-2); --Panel-top-border-style: var(--borders-style-2); --Panel-right-border-color: var(--colors-neutral-line-8); --Panel-right-border-width: var(--borders-width-2); --Panel-right-border-style: var(--borders-style-2); --Panel-bottom-border-color: var(--colors-neutral-line-8); --Panel-bottom-border-width: var(--borders-width-2); --Panel-bottom-border-style: var(--borders-style-2); --Panel-left-border-color: var(--colors-neutral-line-8); --Panel-left-border-width: var(--borders-width-2); --Panel-left-border-style: var(--borders-style-2); --Panel-top-right-border-radius: var(--borders-radius-3); --Panel-top-left-border-radius: var(--borders-radius-3); --Panel-bottom-right-border-radius: var(--borders-radius-3); --Panel-bottom-left-border-radius: var(--borders-radius-3); --Panel-borderRadius: var(--Panel-top-left-border-radius) var(--Panel-top-right-border-radius) var(--Panel-bottom-right-border-radius) var(--Panel-bottom-left-border-radius); --Panel-borderWidth: var(--Panel-top-border-width) var(--Panel-right-border-width) var(--Panel-bottom-border-width) var(--Panel-left-border-width); --Panel-shadow: var(--shadows-shadow-sm); --Panel-heading-paddingTop: var(--sizes-size-5); --Panel-heading-paddingBottom: var(--sizes-size-5); --Panel-heading-paddingLeft: var(--sizes-size-7); --Panel-heading-paddingRight: var(--sizes-size-7); --Panel-heading-bg-color: var(--colors-neutral-fill-10); --Panel-heading-color: var(--colors-neutral-text-3); --Panel-heading-fontSize: var(--fonts-size-8); --Panel-heading-fontWeight: var(--fonts-weight-6); --Panel-heading-lineHeight: var(--fonts-lineHeight-2); --Panel-heading-top-border-color: transparent; --Panel-heading-top-border-width: var(--borders-width-1); --Panel-heading-top-border-style: var(--borders-style-2); --Panel-heading-right-border-color: transparent; --Panel-heading-right-border-width: var(--borders-width-1); --Panel-heading-right-border-style: var(--borders-style-2); --Panel-heading-bottom-border-color: var(--colors-neutral-line-8); --Panel-heading-bottom-border-width: var(--borders-width-2); --Panel-heading-bottom-border-style: var(--borders-style-2); --Panel-heading-left-border-color: transparent; --Panel-heading-left-border-width: var(--borders-width-1); --Panel-heading-left-border-style: var(--borders-style-2); --Panel-headingPadding: var(--Panel-heading-paddingTop) var(--Panel-heading-paddingRight) var(--Panel-heading-paddingBottom) var(--Panel-heading-paddingLeft); --Panel-headingBorderRadius: var(--Panel-top-left-border-radius) var(--Panel-top-right-border-radius) 0 0; --Panel-body-paddingTop: var(--sizes-size-7); --Panel-body-paddingBottom: var(--sizes-size-7); --Panel-body-paddingLeft: var(--sizes-size-7); --Panel-body-paddingRight: var(--sizes-size-7); --Panel-bodyPadding: var(--Panel-body-paddingTop) var(--Panel-body-paddingRight) var(--Panel-body-paddingBottom) var(--Panel-body-paddingLeft); --Panel-footer-paddingTop: var(--sizes-size-5); --Panel-footer-paddingBottom: var(--sizes-size-5); --Panel-footer-paddingLeft: var(--sizes-size-7); --Panel-footer-paddingRight: var(--sizes-size-7); --Panel-footer-bg-color: var(--colors-neutral-fill-none); --Panel-footer-top-border-color: var(--colors-neutral-line-8); --Panel-footer-top-border-width: var(--borders-width-2); --Panel-footer-top-border-style: var(--borders-style-2); --Panel-footer-right-border-color: transparent; --Panel-footer-right-border-width: var(--borders-width-1); --Panel-footer-right-border-style: var(--borders-style-2); --Panel-footer-bottom-border-color: transparent; --Panel-footer-bottom-border-width: var(--borders-width-1); --Panel-footer-bottom-border-style: var(--borders-style-2); --Panel-footer-left-border-color: transparent; --Panel-footer-left-border-width: var(--borders-width-1); --Panel-footer-left-border-style: var(--borders-style-2); --Panel-footerBorderRadius: 0 0 var(--Panel-bottom-right-border-radius) var(--Panel-bottom-left-border-radius); --Panel-footerBg: var(--Panel-footer-bg-color); --Panel-footerPadding: var(--Panel-footer-paddingTop) var(--Panel-footer-paddingRight) var(--Panel-footer-paddingBottom) var(--Panel-footer-paddingLeft); --Panel-footerBorderColor: var(--Panel-footer-top-border-color) var(--Panel-footer-right-border-color) var(--Panel-footer-bottom-border-color) var(--Panel-footer-left-border-color); --Panel-footer-buttonSpace: var(--sizes-size-5); --Panel-footerButtonMarginLeft: var(--Panel-footer-buttonSpace); --Panel-fixedBottom-borderTop: none; --Panel-fixedBottom-boxShadow: var(--shadows-shadow-normal); --Panel-btnToolbarTextAlign: right; --Divider-style: var(--borders-style-2); --Divider-color: var(--colors-neutral-line-8); --Divider-width: var(--borders-width-2); --Divider-marginTop: var(--sizes-size-7); --Divider-marginLeft: var(--sizes-size-0); --Divider-marginRight: var(--sizes-size-0); --Divider-marginBottom: var(--sizes-size-7); --Divider-text-width: 5%; --Divider-text-fontSize: var(--fonts-size-7); --Divider-text-fontWeight: var(--fonts-weight-6); --Divider-text-color: var(--colors-neutral-text-2); --Divider-text-marginTop: var(--sizes-size-0); --Divider-text-marginLeft: var(--sizes-size-9); --Divider-text-marginRight: var(--sizes-size-9); --Divider-text-marginBottom: var(--sizes-size-0); --inputFile-base-des-color: var(--Form-description-color); --inputFile-base-des-fontSize: var(--fonts-size-7); --inputFile-base-des-fontWeight: var(--fonts-weight-6); --inputFile-base-des-margin: var(--sizes-base-5); --inputFile-list-marginTop: var(--sizes-base-4); --inputFile-list-marginBottom: var(--sizes-base-4); --inputFile-list-marginLeft: var(--sizes-size-0); --inputFile-list-marginRight: var(--sizes-size-0); --inputFile-list-paddingTop: var(--sizes-size-2); --inputFile-list-paddingBottom: var(--sizes-size-2); --inputFile-list-paddingLeft: var(--sizes-size-3); --inputFile-list-paddingRight: var(--sizes-size-3); --inputFile-list-color: var(--colors-brand-5); --inputFile-list-fontSize: var(--fonts-size-8); --inputFile-list-fontWeight: var(--fonts-weight-6); --inputFile-list-bg-color: transparent; --inputFile-list-bg-color-hover: var(--colors-neutral-fill-9); --inputFile-list-icon-size: var(--sizes-base-6); --inputFile-list-icon-color: var(--colors-neutral-text-2); --inputFile-list-icon-margin: var(--sizes-size-3); --inputFile-list-delete-icon-size: var(--sizes-base-6); --inputFile-list-delete-icon-color: var(--colors-neutral-text-5); --inputFile-list-delete-icon-color-hover: var(--colors-neutral-text-4); --inputFile-drag-top-border-color: var(--colors-neutral-line-8); --inputFile-drag-top-border-width: var(--borders-width-2); --inputFile-drag-top-border-style: var(--borders-style-3); --inputFile-drag-right-border-color: var(--colors-neutral-line-8); --inputFile-drag-right-border-width: var(--borders-width-2); --inputFile-drag-right-border-style: var(--borders-style-3); --inputFile-drag-bottom-border-color: var(--colors-neutral-line-8); --inputFile-drag-bottom-border-width: var(--borders-width-2); --inputFile-drag-bottom-border-style: var(--borders-style-3); --inputFile-drag-left-border-color: var(--colors-neutral-line-8); --inputFile-drag-left-border-width: var(--borders-width-2); --inputFile-drag-left-border-style: var(--borders-style-3); --inputFile-drag-top-right-border-radius: var(--borders-radius-3); --inputFile-drag-top-left-border-radius: var(--borders-radius-3); --inputFile-drag-bottom-right-border-radius: var(--borders-radius-3); --inputFile-drag-bottom-left-border-radius: var(--borders-radius-3); --inputFile-drag-hover-top-border-color: var(--colors-neutral-line-8); --inputFile-drag-hover-top-border-width: var(--borders-width-2); --inputFile-drag-hover-top-border-style: var(--borders-style-3); --inputFile-drag-hover-right-border-color: var(--colors-neutral-line-8); --inputFile-drag-hover-right-border-width: var(--borders-width-2); --inputFile-drag-hover-right-border-style: var(--borders-style-3); --inputFile-drag-hover-bottom-border-color: var(--colors-neutral-line-8); --inputFile-drag-hover-bottom-border-width: var(--borders-width-2); --inputFile-drag-hover-bottom-border-style: var(--borders-style-3); --inputFile-drag-hover-left-border-color: var(--colors-neutral-line-8); --inputFile-drag-hover-left-border-width: var(--borders-width-2); --inputFile-drag-hover-left-border-style: var(--borders-style-3); --inputFile-drag-color: var(--colors-neutral-text-3); --inputFile-drag-fontSize: var(--fonts-size-8); --inputFile-drag-fontWeight: var(--fonts-weight-6); --inputFile-drag-icon-size: var(--sizes-base-24); --inputFile-drag-icon-color: var(--colors-neutral-fill-8); --inputFile-drag-icon-margin: var(--sizes-size-5); --inputFile-drag-bg-color: var(--colors-neutral-fill-11); --inputFile-drag-bg-color-hover: var(--colors-neutral-text-11); --FileControl-danger-color: var(--colors-error-5); --FileControl-drag-color: var(--inputFile-drag-color); --FileControl-border-color: var(--inputFile-drag-top-border-color) var(--inputFile-drag-right-border-color) var(--inputFile-drag-bottom-border-color) var(--inputFile-drag-left-border-color); --FileControl-onDisabled-color: var(--colors-neutral-text-6); --FileControl-onDisabled-bg: var(--colors-neutral-fill-10); --FileControl-onHover-bg: var(--inputFile-list-bg-color-hover); --FileControl-icon-color: var(--inputFile-list-delete-icon-color); --FileControl-icon-onHover-color: var( --inputFile-list-delete-icon-color-hover ); --FileControl-progress-borderRadius: var(--borders-radius-2); --inputImage-base-default-top-border-color: var(--colors-neutral-line-8); --inputImage-base-default-top-border-width: var(--borders-width-2); --inputImage-base-default-top-border-style: var(--borders-style-2); --inputImage-base-default-right-border-color: var(--colors-neutral-line-8); --inputImage-base-default-right-border-width: var(--borders-width-2); --inputImage-base-default-right-border-style: var(--borders-style-2); --inputImage-base-default-bottom-border-color: var(--colors-neutral-line-8); --inputImage-base-default-bottom-border-width: var(--borders-width-2); --inputImage-base-default-bottom-border-style: var(--borders-style-2); --inputImage-base-default-left-border-color: var(--colors-neutral-line-8); --inputImage-base-default-left-border-width: var(--borders-width-2); --inputImage-base-default-left-border-style: var(--borders-style-2); --inputImage-base-default-top-right-border-radius: var(--borders-radius-3); --inputImage-base-default-top-left-border-radius: var(--borders-radius-3); --inputImage-base-default-bottom-right-border-radius: var(--borders-radius-3); --inputImage-base-default-bottom-left-border-radius: var(--borders-radius-3); --inputImage-base-default-fontSize: var(--fonts-size-7); --inputImage-base-default-fontWeight: var(--fonts-weight-6); --inputImage-base-default-color: var(--colors-neutral-text-5); --inputImage-base-default-icon: ''; --inputImage-base-default-icon-size: var(--sizes-base-12); --inputImage-base-default-icon-color: var(--colors-neutral-text-5); --inputImage-base-default-icon-margin: var(--sizes-size-5); --inputImage-base-default-bg-color: var(--colors-neutral-fill-11); --inputImage-base-hover-top-border-color: var(--colors-brand-5); --inputImage-base-hover-top-border-width: var(--borders-width-2); --inputImage-base-hover-top-border-style: var(--borders-style-2); --inputImage-base-hover-right-border-color: var(--colors-brand-5); --inputImage-base-hover-right-border-width: var(--borders-width-2); --inputImage-base-hover-right-border-style: var(--borders-style-2); --inputImage-base-hover-bottom-border-color: var(--colors-brand-5); --inputImage-base-hover-bottom-border-width: var(--borders-width-2); --inputImage-base-hover-bottom-border-style: var(--borders-style-2); --inputImage-base-hover-left-border-color: var(--colors-brand-5); --inputImage-base-hover-left-border-width: var(--borders-width-2); --inputImage-base-hover-left-border-style: var(--borders-style-2); --inputImage-base-hover-color: var(--colors-neutral-text-5); --inputImage-base-hover-icon-color: var(--colors-neutral-text-5); --inputImage-base-hover-bg-color: var(--colors-neutral-fill-11); --inputImage-base-active-top-border-color: var(--colors-brand-5); --inputImage-base-active-top-border-width: var(--borders-width-2); --inputImage-base-active-top-border-style: var(--borders-style-2); --inputImage-base-active-right-border-color: var(--colors-brand-5); --inputImage-base-active-right-border-width: var(--borders-width-2); --inputImage-base-active-right-border-style: var(--borders-style-2); --inputImage-base-active-bottom-border-color: var(--colors-brand-5); --inputImage-base-active-bottom-border-width: var(--borders-width-2); --inputImage-base-active-bottom-border-style: var(--borders-style-2); --inputImage-base-active-left-border-color: var(--colors-brand-5); --inputImage-base-active-left-border-width: var(--borders-width-2); --inputImage-base-active-left-border-style: var(--borders-style-2); --inputImage-base-active-color: var(--colors-neutral-text-5); --inputImage-base-active-icon-color: var(--colors-neutral-text-5); --inputImage-base-active-bg-color: var(--colors-neutral-fill-11); --inputImage-base-disabled-top-border-color: var(--colors-neutral-line-8); --inputImage-base-disabled-top-border-width: var(--borders-width-2); --inputImage-base-disabled-top-border-style: var(--borders-style-2); --inputImage-base-disabled-right-border-color: var(--colors-neutral-line-8); --inputImage-base-disabled-right-border-width: var(--borders-width-2); --inputImage-base-disabled-right-border-style: var(--borders-style-2); --inputImage-base-disabled-bottom-border-color: var(--colors-neutral-line-8); --inputImage-base-disabled-bottom-border-width: var(--borders-width-2); --inputImage-base-disabled-bottom-border-style: var(--borders-style-2); --inputImage-base-disabled-left-border-color: var(--colors-neutral-line-8); --inputImage-base-disabled-left-border-width: var(--borders-width-2); --inputImage-base-disabled-left-border-style: var(--borders-style-2); --inputImage-base-disabled-color: var(--colors-neutral-text-6); --inputImage-base-disabled-icon-color: var(--colors-neutral-text-6); --inputImage-base-disabled-bg-color: var(--colors-neutral-fill-10); --ImageControl-addBtn-bg: var(--inputImage-base-default-bg-color); --ImageControl-addBtn-border: var(--colors-neutral-line-7); --ImageControl-addBtn-borderRadius: var(--borders-radius-3); --ImageControl-addBtn-color: var(--inputImage-base-default-color); --ImageControl-addBtn-onActive-bg: var(--inputImage-base-active-bg-color); --ImageControl-addBtn-onActive-border: var(--colors-brand-5); --ImageControl-addBtn-onActive-color: var(--inputImage-base-active-color); --ImageControl-addBtn-onDisabled-bg: var(--inputImage-base-disabled-bg-color); --ImageControl-addBtn-onDisabled-border: var(--colors-neutral-line-8); --ImageControl-addBtn-onDisabled-color: var(--inputImage-base-disabled-color); --ImageControl-addBtn-onHover-bg: var(--inputImage-base-hover-bg-color); --ImageControl-addBtn-onHover-border: var(--colors-brand-5); --ImageControl-addBtn-onHover-color: var(--inputImage-base-hover-color); --ImageControl-addBtn-upload-color: var(--inputImage-base-default-color); --ImageControl-progress-borderRadius: var(--borders-radius-2); --select-base-default-top-border-color: var(--colors-neutral-line-8); --select-base-default-top-border-width: var(--borders-width-2); --select-base-default-top-border-style: var(--borders-style-2); --select-base-default-right-border-color: var(--colors-neutral-line-8); --select-base-default-right-border-width: var(--borders-width-2); --select-base-default-right-border-style: var(--borders-style-2); --select-base-default-bottom-border-color: var(--colors-neutral-line-8); --select-base-default-bottom-border-width: var(--borders-width-2); --select-base-default-bottom-border-style: var(--borders-style-2); --select-base-default-left-border-color: var(--colors-neutral-line-8); --select-base-default-left-border-width: var(--borders-width-2); --select-base-default-left-border-style: var(--borders-style-2); --select-base-default-top-right-border-radius: var(--borders-radius-3); --select-base-default-top-left-border-radius: var(--borders-radius-3); --select-base-default-bottom-right-border-radius: var(--borders-radius-3); --select-base-default-bottom-left-border-radius: var(--borders-radius-3); --select-base-default-paddingTop: var(--sizes-size-3); --select-base-default-paddingBottom: var(--sizes-size-3); --select-base-default-paddingLeft: var(--sizes-size-6); --select-base-default-paddingRight: var(--sizes-size-6); --select-base-default-color: var(--colors-neutral-text-2); --select-base-default-fontSize: var(--fonts-size-7); --select-base-default-fontWeight: var(--fonts-weight-6); --select-base-default-bg-color: var(--colors-neutral-fill-11); --select-base-default-option-paddingTop: var(--sizes-size-0); --select-base-default-option-paddingBottom: var(--sizes-size-0); --select-base-default-option-paddingLeft: var(--sizes-size-6); --select-base-default-option-paddingRight: var(--sizes-size-6); --select-base-default-option-color: var(--colors-neutral-text-2); --select-base-default-option-fontSize: var(--fonts-size-7); --select-base-default-option-fontWeight: var(--fonts-weight-6); --select-base-default-option-bg-color: transparent; --select-base-default-option-line-height: var(--sizes-base-16); --select-base-hover-top-border-color: var(--colors-brand-5); --select-base-hover-top-border-width: var(--borders-width-2); --select-base-hover-top-border-style: var(--borders-style-2); --select-base-hover-right-border-color: var(--colors-brand-5); --select-base-hover-right-border-width: var(--borders-width-2); --select-base-hover-right-border-style: var(--borders-style-2); --select-base-hover-bottom-border-color: var(--colors-brand-5); --select-base-hover-bottom-border-width: var(--borders-width-2); --select-base-hover-bottom-border-style: var(--borders-style-2); --select-base-hover-left-border-color: var(--colors-brand-5); --select-base-hover-left-border-width: var(--borders-width-2); --select-base-hover-left-border-style: var(--borders-style-2); --select-base-hover-bg-color: var(--colors-neutral-fill-11); --select-base-hover-option-color: var(--colors-neutral-text-2); --select-base-hover-option-bg-color: var(--colors-brand-10); --select-base-active-top-border-color: var(--colors-brand-5); --select-base-active-top-border-width: var(--borders-width-2); --select-base-active-top-border-style: var(--borders-style-2); --select-base-active-right-border-color: var(--colors-brand-5); --select-base-active-right-border-width: var(--borders-width-2); --select-base-active-right-border-style: var(--borders-style-2); --select-base-active-bottom-border-color: var(--colors-brand-5); --select-base-active-bottom-border-width: var(--borders-width-2); --select-base-active-bottom-border-style: var(--borders-style-2); --select-base-active-left-border-color: var(--colors-brand-5); --select-base-active-left-border-width: var(--borders-width-2); --select-base-active-left-border-style: var(--borders-style-2); --select-base-active-shadow: var(--shadows-shadow-none); --select-base-active-bg-color: var(--colors-neutral-fill-11); --select-base-active-option-color: var(--colors-brand-5); --select-base-active-option-bg-color: var(--colors-neutral-fill-11); --select-base-disabled-top-border-color: var(--colors-neutral-line-8); --select-base-disabled-top-border-width: var(--borders-width-2); --select-base-disabled-top-border-style: var(--borders-style-2); --select-base-disabled-right-border-color: var(--colors-neutral-line-8); --select-base-disabled-right-border-width: var(--borders-width-2); --select-base-disabled-right-border-style: var(--borders-style-2); --select-base-disabled-bottom-border-color: var(--colors-neutral-line-8); --select-base-disabled-bottom-border-width: var(--borders-width-2); --select-base-disabled-bottom-border-style: var(--borders-style-2); --select-base-disabled-left-border-color: var(--colors-neutral-line-8); --select-base-disabled-left-border-width: var(--borders-width-2); --select-base-disabled-left-border-style: var(--borders-style-2); --select-base-disabled-bg-color: var(--colors-neutral-fill-10); --select-base-disabled-option-color: var(--colors-neutral-text-6); --select-base-disabled-option-bg-color: var(--colors-neutral-fill-11); --select-multiple-top-right-border-radius: var(--borders-radius-2); --select-multiple-top-left-border-radius: var(--borders-radius-2); --select-multiple-bottom-right-border-radius: var(--borders-radius-2); --select-multiple-bottom-left-border-radius: var(--borders-radius-2); --select-multiple-paddingTop: var(--sizes-size-0); --select-multiple-paddingBottom: var(--sizes-size-0); --select-multiple-paddingLeft: var(--sizes-size-3); --select-multiple-paddingRight: var(--sizes-size-3); --select-multiple-marginTop: var(--sizes-size-0); --select-multiple-marginBottom: var(--sizes-size-0); --select-multiple-marginLeft: var(--sizes-size-0); --select-multiple-marginRight: var(--sizes-size-3); --select-multiple-color: var(--colors-neutral-text-2); --select-multiple-fontSize: var(--fonts-size-8); --select-multiple-fontWeight: var(--fonts-weight-6); --select-multiple-bg-color: var(--colors-neutral-fill-10); --select-multiple-hover-bg-color: var(--colors-brand-10); --select-multiple-icon-color: var(--colors-neutral-text-6); --select-multiple-icon-hover-color: var(--colors-neutral-text-2); --select-group-color: var(--colors-neutral-text-5); --select-group-fontSize: var(--fonts-size-7); --select-group-fontWeight: var(--fonts-weight-6); --select-group-lineHeight: var(--fonts-lineHeight-2); --select-group-paddingTop: var(--sizes-size-3); --select-group-paddingBottom: var(--sizes-size-3); --select-group-paddingLeft: var(--sizes-size-7); --select-group-paddingRight: var(--sizes-size-7); --select-table-header-paddingTop: var(--sizes-size-5); --select-table-header-paddingBottom: var(--sizes-size-5); --select-table-header-paddingLeft: var(--sizes-size-7); --select-table-header-paddingRight: var(--sizes-base-9); --select-table-option-paddingTop: var(--sizes-size-4); --select-table-option-paddingBottom: var(--sizes-size-5); --select-table-option-paddingLeft: var(--sizes-size-7); --select-table-option-paddingRight: var(--sizes-base-9); --select-table-color: var(--colors-neutral-text-2); --select-table-fontSize: var(--fonts-size-8); --select-tree-color: var(--colors-neutral-text-2); --select-tree-fontSize: var(--fonts-size-7); --select-tree-hover-bg-color: var(--colors-neutral-fill-10); --select-tree-active-bg-color: var(--colors-brand-10); --Form-select-bg: var(--select-base-default-bg-color); --Form-select-mobile-icon-check-color: var(--colors-brand-5); --Form-select-height: var(--Form-select-outer-top); --Form-select-borderColor: var(--select-base-default-top-border-color) var(--select-base-default-right-border-color) var(--select-base-default-bottom-border-color) var(--select-base-default-left-border-color); --Form-select-borderRadius: var(--select-base-default-top-left-border-radius) var(--select-base-default-top-right-border-radius) var(--select-base-default-bottom-right-border-radius) var(--select-base-default-bottom-left-border-radius); --Form-select-borderWidth: var(--select-base-default-top-border-width) var(--select-base-default-right-border-width) var(--select-base-default-bottom-border-width) var(--select-base-default-left-border-width); --Form-select-caret-iconColor: var(--colors-neutral-text-5); --Form-select-caret-onHover-iconColor: var(--colors-neutral-text-5); --Form-select-caret-fontSize: var(--fonts-size-8); --Form-select-checkall-bottomBorder: #eceff8; --Form-select-color: var(--select-base-default-color); --Form-select-input-fontSize: var(--fontSizeSm); --Form-select-menu-bg: var(--colors-neutral-fill-11); --Form-select-menu-color: var(--colors-neutral-text-2); --Form-select-menu-height: var(--sizes-base-12); --Form-select-menu-onActive-bg: var(--select-base-active-option-bg-color); --Form-select-menu-onActive-color: var(--select-base-active-option-color); --Form-select-menu-onDisabled-bg: var(--select-base-disabled-option-bg-color); --Form-select-menu-onDisabled-color: var(--select-base-disabled-option-color); --Form-select-menu-onHover-bg: var(--select-base-hover-option-bg-color); --Form-select-menu-onHover-color: var(--select-base-hover-option-color); --Form-select-group-color: var(--Form-select-caret-iconColor); --Form-select-onError-borderColor: var(--Form-input-onError-borderColor); --Form-select-onFocused-borderColor: var(--Form-input-onFocused-borderColor); --Form-select-onFocused-color: var(--Form-select-color); --Form-select-onHover-bg: var(--select-base-hover-bg-color); --Form-select-onHover-borderColor: var(--colors-brand-5); --Form-select-outer-borderWidth: var(--borders-width-2); --Form-select-outer-borderColor: var(--colors-neutral-fill-9); --Form-select-outer-top: var(--sizes-base-16); --Form-select-outer-boxShadow: var(--shadows-shadow-normal); --Form-select-paddingX: var(--Form-input-paddingX); --Form-select-placeholderColor: var(--Form-input-placeholderColor); --Form-select-popoverGap: var(--borders-radius-3); --Form-select-icon-rigin: var(--sizes-size-9); --Form-select-search-height: var(--sizes-base-15); --Form-select-value-bgColor: var(--select-multiple-bg-color); --Form-select-value-bgColor--dark: var(--colors-neutral-fill-4); --Form-select-value-borderColor: var(--colors-neutral-line-9); --Form-select-valueIcon-color: var(--select-multiple-icon-color); --Form-select-valueIcon-color--dark: var(--colors-neutral-text-8); --Form-select-valueIcon-onHover-color: var( --select-multiple-icon-hover-color ); --Form-select-multiple-bgColor: var(--colors-neutral-fill-10); --Form-selectOption-height: var(--Form-select-height); --Form-selectValue-bg: rgb(204, 228.6, 255); --Form-selectValue-onHover-bgColor: var(--select-multiple-hover-bg-color); --Form-selectValue-borderColor: var(--colors-brand-7); --Form-selectValue-color: var(--colors-brand-5); --Form-selectValue-fontSize: var(--select-multiple-fontSize); --Form-selectValue-onDisable-bg: rgb(229.5, 241.8, 255); --Form-selectValue-onHover-bg: rgb(178.5, 215.4, 255); --Form-selectValue-onDisabled-color: var(--Form-select-caret-iconColor); --Form-selectValue-onInvalid-color: var(--danger); --Form-valueLabel-maxWidth: 7.5rem; --Form-select-onFocus-boxShadow: none; --ResultBox-tag-height: 1.375rem; --ResultBox-tag-marginBottom: var(--select-multiple-marginBottom); --ResultBox-icon--onDisabled-color: #ebebeb; --ResultBox-icon--onHover-color: var(--select-multiple-icon-hover-color); --ResultBox-icon-color: var(--select-multiple-icon-color); --ResultBox-value--onDisabled-color: #cccccc; --ResultBox-value--onHover-bg: var(--select-multiple-hover-bg-color); --ResultBox-value--onHover-bg--dark: #b8babf; --ResultBox-value-bg: var(--select-multiple-bg-color); --ResultBox-value-color: var(--select-multiple-color); --ResultBox-value-clear-bg: var(--colors-neutral-fill-8); --ResultBox-value-clear-hover-bg: var(--colors-neutral-fill-9); --Tree-max-height: 300px; --Tree-indent: var(--gap-md); --Tree-icon-gap: var(--sizes-size-5); --Tree-icon-margin-right: 0.5rem; --Tree-inputHeight: calc(var(--Form-input-height) * 0.85); --Tree-item-onHover-bg: var(--colors-neutral-fill-10); --Tree-item-onHover-bg-pure: var(--select-tree-hover-bg-color); --Tree-itemArrowWidth: 1rem; --Tree-itemHeight: var(--sizes-base-12); --Tree-itemLabel--onChecked-color: var(--Form-selectValue-color); --TreeSelect-popover-bg: var(--colors-neutral-fill-11); --Tree-item-text-max-height: 15.625rem; --Tree-item-text-top: 0.25rem; --Tree-item-arrow-padding-left: 0.25rem; --Tree-item-arrow-color: #84868c; --Tree-item-onChekced-bg: var(--select-tree-active-bg-color); --Tree-item-onChekced-bg-borderRadius: var(--borders-radius-2); --inputDate-default-top-border-color: var(--colors-neutral-line-8); --inputDate-default-top-border-width: var(--borders-width-2); --inputDate-default-top-border-style: var(--borders-style-2); --inputDate-default-right-border-color: var(--colors-neutral-line-8); --inputDate-default-right-border-width: var(--borders-width-2); --inputDate-default-right-border-style: var(--borders-style-2); --inputDate-default-bottom-border-color: var(--colors-neutral-line-8); --inputDate-default-bottom-border-width: var(--borders-width-2); --inputDate-default-bottom-border-style: var(--borders-style-2); --inputDate-default-left-border-color: var(--colors-neutral-line-8); --inputDate-default-left-border-width: var(--borders-width-2); --inputDate-default-left-border-style: var(--borders-style-2); --inputDate-default-top-right-border-radius: var(--borders-radius-3); --inputDate-default-top-left-border-radius: var(--borders-radius-3); --inputDate-default-bottom-right-border-radius: var(--borders-radius-3); --inputDate-default-bottom-left-border-radius: var(--borders-radius-3); --inputDate-default-paddingTop: var(--sizes-size-3); --inputDate-default-paddingBottom: var(--sizes-size-3); --inputDate-default-paddingLeft: var(--sizes-size-6); --inputDate-default-paddingRight: var(--sizes-size-6); --inputDate-default-fontSize: var(--fonts-size-7); --inputDate-default-fontWeight: var(--fonts-weight-6); --inputDate-default-height: var(--sizes-base-16); --inputDate-default-color: var(--colors-neutral-text-2); --inputDate-default-bg-color: var(--colors-neutral-fill-11); --inputDate-default-icon: ''; --inputDate-default-icon-color: var(--colors-neutral-text-5); --inputDate-default-icon-size: var(--sizes-base-7); --inputDate-default-title-color: var(--colors-neutral-text-2); --inputDate-default-title-arrow-color: var(--colors-neutral-text-5); --inputDate-default-option-color: var(--colors-neutral-text-2); --inputDate-default-option-bg-color: var(--colors-neutral-fill-11); --inputDate-default-option-today-border-color: var(--colors-brand-5); --inputDate-default-option-top-right-border-radius: var(--borders-radius-2); --inputDate-default-option-top-left-border-radius: var(--borders-radius-2); --inputDate-default-option-bottom-right-border-radius: var( --borders-radius-2 ); --inputDate-default-option-bottom-left-border-radius: var(--borders-radius-2); --inputDate-hover-top-border-color: var(--colors-brand-5); --inputDate-hover-top-border-width: var(--borders-width-2); --inputDate-hover-top-border-style: var(--borders-style-2); --inputDate-hover-right-border-color: var(--colors-brand-5); --inputDate-hover-right-border-width: var(--borders-width-2); --inputDate-hover-right-border-style: var(--borders-style-2); --inputDate-hover-bottom-border-color: var(--colors-brand-5); --inputDate-hover-bottom-border-width: var(--borders-width-2); --inputDate-hover-bottom-border-style: var(--borders-style-2); --inputDate-hover-left-border-color: var(--colors-brand-5); --inputDate-hover-left-border-width: var(--borders-width-2); --inputDate-hover-left-border-style: var(--borders-style-2); --inputDate-hover-color: var(--colors-neutral-text-2); --inputDate-hover-bg-color: var(--colors-neutral-fill-11); --inputDate-hover-title-color: var(--colors-brand-6); --inputDate-hover-title-arrow-color: var(--colors-neutral-text-2); --inputDate-hover-option-color: var(--colors-neutral-text-2); --inputDate-hover-option-bg-color: var(--colors-neutral-fill-10); --inputDate-active-top-border-color: var(--colors-brand-5); --inputDate-active-top-border-width: var(--borders-width-2); --inputDate-active-top-border-style: var(--borders-style-2); --inputDate-active-right-border-color: var(--colors-brand-5); --inputDate-active-right-border-width: var(--borders-width-2); --inputDate-active-right-border-style: var(--borders-style-2); --inputDate-active-bottom-border-color: var(--colors-brand-5); --inputDate-active-bottom-border-width: var(--borders-width-2); --inputDate-active-bottom-border-style: var(--borders-style-2); --inputDate-active-left-border-color: var(--colors-brand-5); --inputDate-active-left-border-width: var(--borders-width-2); --inputDate-active-left-border-style: var(--borders-style-2); --inputDate-active-shadow: var(--shadows-shadow-none); --inputDate-active-color: var(--colors-neutral-text-2); --inputDate-active-bg-color: var(--colors-neutral-fill-11); --inputDate-active-option-color: var(--colors-neutral-text-11); --inputDate-active-option-bg-color: var(--colors-brand-5); --inputDate-disabled-top-border-color: var(--colors-neutral-line-8); --inputDate-disabled-top-border-width: var(--borders-width-2); --inputDate-disabled-top-border-style: var(--borders-style-2); --inputDate-disabled-right-border-color: var(--colors-neutral-line-8); --inputDate-disabled-right-border-width: var(--borders-width-2); --inputDate-disabled-right-border-style: var(--borders-style-2); --inputDate-disabled-bottom-border-color: var(--colors-neutral-line-8); --inputDate-disabled-bottom-border-width: var(--borders-width-2); --inputDate-disabled-bottom-border-style: var(--borders-style-2); --inputDate-disabled-left-border-color: var(--colors-neutral-line-8); --inputDate-disabled-left-border-width: var(--borders-width-2); --inputDate-disabled-left-border-style: var(--borders-style-2); --inputDate-disabled-color: var(--colors-neutral-text-2); --inputDate-disabled-bg-color: var(--colors-neutral-fill-10); --inputDate-disabled-option-color: var(--colors-neutral-text-6); --inputDate-disabled-option-bg-color: var(--colors-neutral-fill-11); --inputDate-other-color: var(--colors-neutral-text-2); --inputDate-other-bg-color: var(--colors-neutral-fill-11); --inputDate-other-top-right-border-radius: var(--borders-radius-2); --inputDate-other-top-left-border-radius: var(--borders-radius-2); --inputDate-other-bottom-right-border-radius: var(--borders-radius-2); --inputDate-other-bottom-left-border-radius: var(--borders-radius-2); --inputDate-other-hover-color: var(--colors-neutral-text-2); --inputDate-other-hover-bg-color: var(--colors-neutral-fill-10); --inputDate-other-active-color: var(--colors-neutral-text-11); --inputDate-other-active-bg-color: var(--colors-brand-5); --inputDate-other-disabled-color: var(--colors-neutral-text-6); --inputDate-other-disabled-bg-color: var(--colors-neutral-fill-10); --inputDate-range-line-height: var(--borders-width-3); --inputDate-range-line-color: var(--colors-brand-4); --inputDate-range-separator-width: var(--sizes-size-5); --inputDate-range-separator-margin: var(--sizes-size-5); --inputDate-range-separator-color: var(--colors-neutral-fill-6); --inputDate-range-between-color: var(--colors-brand-10); --DatePicker-bg: var(--inputDate-default-bg-color); --DatePicker-borderColor: var(--inputDate-default-top-border-color) var(--inputDate-default-right-border-color) var(--inputDate-default-bottom-border-color) var(--inputDate-default-left-border-color); --DatePicker-borderStyle: var(--inputDate-default-top-border-style) var(--inputDate-default-right-border-style) var(--inputDate-default-bottom-border-style) var(--inputDate-default-left-border-style); --DatePicker-borderWidth: var(--inputDate-default-top-border-width) var(--inputDate-default-right-border-width) var(--inputDate-default-bottom-border-width) var(--inputDate-default-left-border-width); --DatePicker-borderRadius: var(--inputDate-default-top-left-border-radius) var(--inputDate-default-top-right-border-radius) var(--inputDate-default-bottom-right-border-radius) var(--inputDate-default-bottom-left-border-radius); --DatePicker-color: var(--inputDate-default-color); --DatePicker-header-onHover-color: var(--inputDate-hover-title-color); --DatePicker-arrow-color: var(--inputDate-default-title-arrow-color); --DatePicker-fontSize: var(--inputDate-default-fontSize); --DatePicker-header-select-borderColor: #fff; --DatePicker-height: var(--inputDate-default-height); --DatePicker-iconColor: var(--icon-color); --DatePicker-lineHeight: var(--Form-input-lineHeight); --DatePicker-onFocused-borderColor: var(--inputDate-active-top-border-color) var(--inputDate-active-right-border-color) var(--inputDate-active-bottom-border-color) var(--inputDate-active-left-border-color); --DatePicker-onHover-bg: var(--inputDate-hover-bg-color); --DatePicker-onHover-borderColor: var(--inputDate-hover-top-border-color) var(--inputDate-hover-right-border-color) var(--inputDate-hover-bottom-border-color) var(--inputDate-hover-left-border-color); --DatePicker-onDisabled-bg: var(--colors-neutral-text-9); --DatePicker-onDisabled-color: var(--colors-neutral-text-6); --DatePicker-onHover-iconColor: var(--colors-brand-5); --DatePicker-paddingX: 0.75rem; --DatePicker-paddingY: var(--sizes-size-3); --DatePicker-placeholderColor: var(--colors-neutral-text-6); --DatePicker-minWidth: calc( var(--fontSizeLg) * 5 + var(--DatePicker-paddingX) * 2 + var(--Form-input-clearBtn-size) * 2 ); --DateRangePicker-minWidth: calc( var(--fontSizeLg) * 8 + var(--DatePicker-paddingX) * 2 + var(--Form-input-clearBtn-size) * 2 ); --DateRangePicker-activeCursor-color: var(--inputDate-range-line-color); --DateRangePicker-activeCursor-height: var(--inputDate-range-line-height); --Calendar-btn-bg: var(--info); --Calendar-btn-border: var(--Calendar-btn-bg); --Calendar-btn-borderRadius: var(--Button-borderRadius); --Calendar-btn-color: var(--colors-neutral-fill-11); --Calendar-btn-fontSize: var(--fontSizeSm); --Calendar-btn-height: 1.875rem; --Calendar-btn-lineHeight: var(--lineHeightBase); --Calendar-btn-onActive-bg: var(--colors-brand-4); --Calendar-btn-onActive-border: var(--colors-brand-3); --Calendar-btn-onActive-color: var(--Calendar-btn-color); --Calendar-btn-onHover-bg: var(--colors-brand-4); --Calendar-btn-onHover-border: var(--colors-brand-3); --Calendar-btn-onHover-color: var(--Calendar-btn-color); --Calendar-btn-paddingX: 0.625rem; --Calendar-btn-paddingY: calc( ( var(--Calendar-btn-height) - var(--Calendar-btn-lineHeight) * var(--Calendar-btn-fontSize) ) / 2 ); --Calendar-btnCancel-bg: var(--light); --Calendar-btnCancel-border: var(--colors-neutral-line-7); --Calendar-btnCancel-borderRadius: var(--borders-radius-3); --Calendar-btnCancel-color: var(--text-color); --Calendar-btnCancel-onActive-bg: var(--colors-neutral-fill-11); --Calendar-btnCancel-onActive-border: var(--colors-brand-4); --Calendar-btnCancel-onActive-color: var(--colors-brand-4); --Calendar-btnCancel-onHover-bg: var(--colors-neutral-fill-11); --Calendar-btnCancel-onHover-border: var(--colors-brand-6); --Calendar-btnCancel-onHover-color: var(--colors-brand-6); --Calendar-cell-bg: var(--inputDate-default-option-bg-color); --Calendar-cell-onActive-bg: var(--inputDate-active-option-bg-color); --Calendar-cell-onBetween-bg: var(--inputDate-range-between-color); --Calendar-cell-onDisabled-bg: var(--inputDate-other-disabled-bg-color); --Calendar-cell-onHover-bg: var(--inputDate-hover-option-bg-color); --Calendar-color: var(--inputDate-default-option-color); --Calendar-fontSize: var(--fontSizeSm); --Calendar-input-borderColor: var(--borderColor); --Calendar-input-borderRadius: var(--borders-radius-3); --Calendar-input-color: var(--info); --Calendar-input-fontSize: var(--fontSizeBase); --Calendar-input-height: 2.5rem; --Calendar-input-lineHeight: var(--lineHeightBase); --Calendar-input-onFocused-borderColor: var(--info); --Calendar-input-paddingX: 0.625rem; --Calendar-input-paddingY: calc( ( var(--Calendar-input-height) - var(--Calendar-input-lineHeight) * var(--Calendar-input-fontSize) ) / 2 ); --Calendar-shortcut-color: #151b26; --Calendar-shortcut-decoration: none; --Calendar-shortcut-onHover-color: var(--colors-brand-6); --Calendar-shortcut-onHover-decoration: none; --Calendar-shortcuts-bg: var(--colors-neutral-text-9); --Calendar-shortcuts-height: var(--sizes-size-9); --Calendar-wLabel-color: var(--colors-neutral-text-6); --Calendar-icon-bottom: -0.25rem; --Calendar-icon-width: var(--sizes-size-6); --Calendar-icon-height: var(--sizes-size-6); --Calendar-borderWidth: var(--borders-width-2); --Calendar-borderColor: var(--inputDate-default-option-today-border-color); --Calendar-rdt-day: 6.875rem; --Calendar-schedule-content-padding: 0 var(--sizes-size-3); --Calendar-schedule-content-height: var(--sizes-base-10); --Calendar-schedule-content-color: var(--colors-neutral-text-11); --inputTime-default-icon: 'ic_时间'; --inputTime-default-fontSize: var(--fonts-size-8); --inputTime-default-fontWeight: var(--fonts-weight-6); --inputTime-default-color: var(--colors-neutral-text-2); --inputTime-default-bg-color: var(--colors-neutral-fill-11); --inputTime-hover-color: var(--colors-neutral-text-2); --inputTime-hover-bg-color: var(--colors-neutral-fill-10); --inputTime-active-color: var(--colors-neutral-text-2); --inputTime-active-bg-color: var(--colors-brand-10); --signature-tool-height: 2.5rem; --signature-tool-margin-top: 0.5rem; --signature-placeholder-gap: 0.625rem; --signature-placeholder-color: var(--colors-neutral-line-6); --steps-base-color: var(--colors-neutral-text-2); --steps-base-fontSize: var(--fonts-size-7); --steps-base-fontWeight: var(--fonts-weight-6); --steps-base-subTitle-color: var(--colors-neutral-text-2); --steps-base-subTitle-fontSize: var(--fonts-size-7); --steps-base-subTitle-fontWeight: var(--fonts-weight-6); --steps-base-des-color: var(--colors-neutral-text-5); --steps-base-des-fontSize: var(--fonts-size-8); --steps-base-des-fontWeight: var(--fonts-weight-6); --steps-base-title-paddingRight: var(--sizes-size-5); --steps-base-subTitle-paddingLeft: var(--sizes-size-6); --steps-base-icon-size: var(--sizes-base-12); --steps-base-icon-paddingRight: var(--sizes-size-5); --steps-base-icon-fontSize: var(--fonts-size-8); --steps-base-line-color: var(--colors-neutral-line-8); --steps-base-line-active-color: var(--colors-brand-5); --steps-status-wait-bg-color: var(--colors-neutral-fill-11); --steps-status-wait-color: var(--colors-neutral-text-8); --steps-status-process-bg-color: var(--colors-brand-5); --steps-status-process-color: var(--colors-neutral-text-11); --steps-status-finish-bg-color: var(--colors-brand-5); --steps-status-finish-color: var(--colors-neutral-text-11); --steps-status-error-bg-color: var(--colors-error-5); --steps-status-error-color: var(--colors-neutral-text-11); --steps-dot-icon-size: var(--sizes-size-5); --steps-dot-wait-bg-color: var(--colors-neutral-fill-8); --steps-dot-process-bg-color: var(--colors-brand-5); --steps-dot-finish-bg-color: var(--colors-neutral-fill-11); --steps-dot-error-bg-color: var(--colors-error-5); --steps-simple-icon: ''; --steps-simple-icon-size: var(--sizes-size-8); --Steps-bg: var(--steps-status-wait-color); --Steps-status-success: var(--steps-status-finish-bg-color); --Steps-status-error: var(--steps-status-error-bg-color); --Steps-status-wait: var(--colors-neutral-text-5); --Steps-icon-fontsize: var(--steps-base-icon-fontSize); --Steps-title-fontsize: var(--steps-base-fontSize); --Steps-title-color: var(--steps-base-color); --Steps-sub-title-fontsize: var(--steps-base-subTitle-fontSize); --Steps-sub-title-color: var(--steps-base-subTitle-color); --Steps-description-title-fontsize: var(--steps-base-des-fontSize); --Steps-description-title-color: var(--steps-base-des-color); --Steps-line-bg: var(--steps-base-line-color); --Steps-line-success-bg: var(--steps-base-line-active-color); --alert-base-marginTop: var(--sizes-size-0); --alert-base-marginBottom: var(--sizes-size-9); --alert-base-marginLeft: var(--sizes-size-0); --alert-base-marginRight: var(--sizes-size-0); --alert-base-paddingTop: var(--sizes-size-3); --alert-base-paddingBottom: var(--sizes-size-3); --alert-base-paddingLeft: var(--sizes-size-9); --alert-base-paddingRight: var(--sizes-size-9); --alert-base-top-right-border-radius: var(--borders-radius-3); --alert-base-top-left-border-radius: var(--borders-radius-3); --alert-base-bottom-right-border-radius: var(--borders-radius-3); --alert-base-bottom-left-border-radius: var(--borders-radius-3); --alert-base-fontSize: var(--fonts-size-8); --alert-base-fontWeight: var(--fonts-weight-6); --alert-base-shadow: var(--shadows-shadow-none); --alert-base-title-paddingTop: var(--sizes-size-9); --alert-base-title-paddingBottom: var(--sizes-size-9); --alert-base-title-paddingLeft: var(--sizes-size-9); --alert-base-title-paddingRight: var(--sizes-size-9); --alert-base-title-color: var(--colors-neutral-text-2); --alert-base-title-fontSize: var(--fonts-size-7); --alert-base-title-fontWeight: var(--fonts-weight-5); --alert-base-title-margin-bottom: var(--sizes-size-3); --alert-icon-size: var(--sizes-base-8); --alert-icon-margin-right: var(--sizes-size-5); --alert-level-info-color: var(--colors-neutral-text-2); --alert-level-info-bg-color: var(--colors-brand-10); --alert-level-info-icon-color: var(--colors-brand-5); --alert-level-success-color: var(--colors-neutral-text-2); --alert-level-success-bg-color: var(--colors-success-10); --alert-level-success-icon-color: var(--colors-success-5); --alert-level-warning-color: var(--colors-neutral-text-2); --alert-level-warning-bg-color: var(--colors-warning-10); --alert-level-warning-icon-color: var(--colors-warning-5); --alert-level-danger-color: var(--colors-neutral-text-2); --alert-level-danger-bg-color: var(--colors-error-10); --alert-level-danger-icon-color: var(--colors-error-5); --Alert--danger-bg: var(--alert-level-danger-bg-color); --Alert--danger-borderColor: transparent; --Alert--danger-color: var(--alert-level-danger-color); --Alert--info-bg: var(--alert-level-info-bg-color); --Alert--info-borderColor: transparent; --Alert--info-color: var(--alert-level-info-color); --Alert--success-bg: var(--alert-level-success-bg-color); --Alert--success-borderColor: transparent; --Alert--success-color: var(--alert-level-success-color); --Alert--warning-bg: var(--alert-level-warning-bg-color); --Alert--warning-borderColor: transparent; --Alert--warning-color: var(--alert-level-warning-color); --Alert-borderColor: transparent; --Alert-borderRadius: var(--alert-base-top-left-border-radius) var(--alert-base-top-right-border-radius) var(--alert-base-bottom-right-border-radius) var(--alert-base-bottom-left-border-radius); --Alert-borderWidth: var(--borderWidth); --Alert-boxShadow: var(--alert-base-shadow); --Alert-fontSize: var(--alert-base-fontSize); --Alert-marginBottom: var(--alert-base-marginBottom); --Alert-paddingX: var(--sizes-size-9); --Alert-paddingY: var(--gap-xs); --Alert-fontColor: var(--colors-neutral-text-4); --Alert-title-fontColor: var(--colors-neutral-text-2); --Alert-height: var(--sizes-base-20); --Alert-actions-marginRight: var(--sizes-base-4); --spinner-base-color: var(--colors-link-5); --spinner-base-fontSize: var(--fonts-size-8); --spinner-base-fontWeight: var(--fonts-weight-6); --spinner-base-tip-size: var(--sizes-base-6); --spinner-sm-size: var(--sizes-base-8); --spinner-size-size: var(--sizes-base-16); --spinner-lg-size: var(--sizes-base-24); --spinner-overlay-bg: var(--colors-neutral-fill-11); --Spinner--lg-height: var(--spinner-lg-size); --Spinner--lg-width: var(--spinner-lg-size); --Spinner--sm-height: var(--spinner-sm-size); --Spinner--sm-width: var(--spinner-sm-size); --Spinner-bg: url("data:image/svg+xml;base64,Cjxzdmcgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDY0IDY0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPGcgaWQ9Iumhtemdoi0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0ibG9hZGluZyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC41MDAwMDAsIDAuNTAwMDAwKSI+CiAgICAgICAgICAgIDxyZWN0IGlkPSLnn6nlvaIiIHN0cm9rZT0iIzk3OTc5NyIgZmlsbD0iI0Q4RDhEOCIgZmlsbC1ydWxlPSJub256ZXJvIiBvcGFjaXR5PSIwIiB4PSIwIiB5PSIwIiB3aWR0aD0iNjMiIGhlaWdodD0iNjMiPjwvcmVjdD4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hOWkh+S7vS02IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjk4MDAwMCwgMC43ODAwMDApIj4KICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJmcmFtZSIgc3Ryb2tlPSIjMjQ2OEYyIiBzdHJva2Utd2lkdGg9IjMuMiIgcG9pbnRzPSIyNy41MiA1LjEyIDQ5LjY5MDI1MDMgMTcuOTIgNDkuNjkwMjUwMyA0My41MiAyNy41MiA1Ni4zMiA1LjM0OTc0OTY2IDQzLjUyIDUuMzQ5NzQ5NjYgMTcuOTIiIHN0cm9rZS1kYXNoYXJyYXk9IjE2MCAxNjAiIHN0cm9rZS1kYXNob2Zmc2V0PSIxNjAiPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlIGlkPSJmcmFtZTEiIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1kYXNob2Zmc2V0IiBiZWdpbj0iLjQ1cztmcmFtZTIuZW5kIiBkdXI9Ii45cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIxNjAiIHRvPSItMTYwIiBmaWxsPSJmcmVlemUiICBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlIGlkPSJmcmFtZTIiIGF0dHJpYnV0ZU5hbWU9InN0cm9rZS1kYXNob2Zmc2V0IiBiZWdpbj0iZnJhbWUxLmVuZCIgZHVyPSIuOXMiIHR5cGU9InRyYW5zbGF0ZSIgZnJvbT0iMTYwIiB0bz0iMTYwIiBmaWxsPSJmcmVlemUiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOyAxIiAga2V5U3BsaW5lcz0iLjUgMCAuNSAxIi8+CiAgICAgICAgICAgICAgICA8L3BvbHlnb24+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJjaXJjbGUxIiBmaWxsPSIjMjQ2OEYyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGN4PSIyNy41MiIgY3k9IjQuOCIgcj0iNC44Ij4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlMW9uZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iMHM7Y2lyY2xlMXR3by5lbmQiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDI2IiB0bz0iMCAwIiBmaWxsPSJmcmVlemUiIGNhbGNNb2RlPSJzcGxpbmUiIGtleVRpbWVzPSIwOyAxIiAga2V5U3BsaW5lcz0iLjUgMCAuNSAxIi8+CiAgICAgICAgICAgICAgICAgICAgPGFuaW1hdGVUcmFuc2Zvcm0gaWQ9ImNpcmNsZTF0d28iIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgYmVnaW49ImNpcmNsZTFvbmUuZW5kICsgLjcycyIgZHVyPSIuNTRzIiB0eXBlPSJ0cmFuc2xhdGUiIGZyb209IjAgMCIgdG89IjAgMjYiIGZpbGw9ImZyZWV6ZSIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7IDEiICBrZXlTcGxpbmVzPSIuNSAwIC41IDEiLz4KICAgICAgICAgICAgICAgIDwvY2lyY2xlPgogICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iY2lyY2xlMiIgZmlsbD0iIzI0NjhGMiIgZmlsbC1ydWxlPSJub256ZXJvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MC4yNDAwMDAsIDE3LjI4MDAwMCkgcm90YXRlKC0xODAuMDAwMDAwKSB0cmFuc2xhdGUoLTUwLjI0MDAwMCwgLTE3LjI4MDAwMCkgIiBjeD0iNTAuMjQiIGN5PSIxNy4yOCIgcj0iNC44Ij4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlMm9uZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iMHM7Y2lyY2xlMnR3by5lbmQiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSItMjIuNSAxMyIgdG89IjAgMCIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGUydHdvIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSJjaXJjbGUyb25lLmVuZCArIC43MnMiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDAiIHRvPSItMjIuNSAxMyIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJjaXJjbGUzIiBmaWxsPSIjMjQ2OEYyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUwLjI0MDAwMCwgNDMuMjAwMDAwKSByb3RhdGUoOTAuMDAwMDAwKSB0cmFuc2xhdGUoLTUwLjI0MDAwMCwgLTQzLjIwMDAwMCkgIiBjeD0iNTAuMjQiIGN5PSI0My4yIiByPSI0LjgiPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGUzb25lIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSIwcztjaXJjbGUzdHdvLmVuZCIgZHVyPSIuNTRzIiB0eXBlPSJ0cmFuc2xhdGUiIGZyb209Ii0yMi41IC0xMyIgdG89IjAgMCIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGUzdHdvIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSJjaXJjbGUzb25lLmVuZCArIC43MnMiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDAiIHRvPSItMjIuNSAtMTMiIGZpbGw9ImZyZWV6ZSIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7IDEiICBrZXlTcGxpbmVzPSIuNSAwIC41IDEiLz4KICAgICAgICAgICAgICAgIDwvY2lyY2xlPgogICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iY2lyY2xlNCIgZmlsbD0iIzI0NjhGMiIgZmlsbC1ydWxlPSJub256ZXJvIiBjeD0iMjcuNTIiIGN5PSI1Ni42NCIgcj0iNC44Ij4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlMW9uZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iMHM7Y2lyY2xlMXR3by5lbmQiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIC0yNiIgdG89IjAgMCIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGUxdHdvIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSJjaXJjbGUxb25lLmVuZCArIC43MnMiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDAiIHRvPSIwIC0yNiIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJjaXJjbGU1IiBmaWxsPSIjMjQ2OEYyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuODAwMDAwLCA0My4yMDAwMDApIHJvdGF0ZSgtMTgwLjAwMDAwMCkgdHJhbnNsYXRlKC00LjgwMDAwMCwgLTQzLjIwMDAwMCkgIiBjeD0iNC44IiBjeT0iNDMuMiIgcj0iNC44Ij4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlNW9uZSIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iMHM7Y2lyY2xlNXR3by5lbmQiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIyMi41IC0xMyIgdG89IjAgMCIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGU1dHdvIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSJjaXJjbGU1b25lLmVuZCArIC43MnMiIGR1cj0iLjU0cyIgdHlwZT0idHJhbnNsYXRlIiBmcm9tPSIwIDAiIHRvPSIyMi41IC0xMyIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJjaXJjbGU2IiBmaWxsPSIjMjQ2OEYyIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQuODAwMDAwLCAxNy4yODAwMDApIHJvdGF0ZSg5MC4wMDAwMDApIHRyYW5zbGF0ZSgtNC44MDAwMDAsIC0xNy4yODAwMDApICIgY3g9IjQuOCIgY3k9IjE3LjI4IiByPSI0LjgiPgogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGlkPSJjaXJjbGU2b25lIiBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIGJlZ2luPSIwcztjaXJjbGU2dHdvLmVuZCIgZHVyPSIuNTRzIiB0eXBlPSJ0cmFuc2xhdGUiIGZyb209IjIyLjUgMTMiIHRvPSIwIDAiIGZpbGw9ImZyZWV6ZSIgY2FsY01vZGU9InNwbGluZSIga2V5VGltZXM9IjA7IDEiICBrZXlTcGxpbmVzPSIuNSAwIC41IDEiLz4KICAgICAgICAgICAgICAgICAgICA8YW5pbWF0ZVRyYW5zZm9ybSBpZD0iY2lyY2xlNnR3byIgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiBiZWdpbj0iY2lyY2xlNm9uZS5lbmQgKyAuNzJzIiBkdXI9Ii41NHMiIHR5cGU9InRyYW5zbGF0ZSIgZnJvbT0iMCAwIiB0bz0iMjIuNSAxMyIgZmlsbD0iZnJlZXplIiBjYWxjTW9kZT0ic3BsaW5lIiBrZXlUaW1lcz0iMDsgMSIgIGtleVNwbGluZXM9Ii41IDAgLjUgMSIvPgogICAgICAgICAgICAgICAgPC9jaXJjbGU+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=="); --Spinner-height: var(--spinner-size-size); --Spinner-overlay-bg: rgba(255, 255, 255, 0.1); --Spinner-width: var(--spinner-size-size); --Spinner-color: var(--spinner-base-color); --Spinner-color--disabled: rgba(0, 0, 0, 0.65); --loading-dark-bg-color: var(--colors-neutral-text-11); --image-image-normal-paddingTop: var(--sizes-size-3); --image-image-normal-paddingBottom: var(--sizes-size-3); --image-image-normal-paddingLeft: var(--sizes-size-3); --image-image-normal-paddingRight: var(--sizes-size-3); --image-image-normal-color: var(--colors-neutral-text-2); --image-image-normal-fontSize: var(--fonts-size-7); --image-image-normal-title-marginTop: var(--sizes-size-0); --image-image-description-color: var(--colors-neutral-text-2); --image-image-description-fontSize: var(--fonts-size-8); --image-image-description-marginTop: var(--sizes-size-0); --image-image-normal-icon: ''; --image-images-item-marginTop: var(--sizes-size-3); --image-images-item-marginBottom: var(--sizes-size-3); --image-images-item-marginLeft: var(--sizes-size-3); --image-images-item-marginRight: var(--sizes-size-3); --image-images-item-size: 3rem; --image-images-item-color: var(--colors-neutral-text-5); --image-images-preview-radius: var(--sizes-size-3); --image-images-preview-bgColor: var(--colors-neutral-text-11); --image-images-preview-paddingTop: var(--sizes-size-3); --image-images-preview-paddingBottom: var(--sizes-size-3); --image-images-preview-paddingLeft: var(--sizes-size-9); --image-images-preview-paddingRight: var(--sizes-size-9); --image-images-prev-icon: ''; --image-images-next-icon: ''; --Tag-base-fontSize: var(--fonts-size-8); --Tag-base-fontWeight: var(--fonts-weight-6); --Tag-base-height: var(--sizes-base-12); --Tag-base-paddingTop: var(--sizes-size-0); --Tag-base-paddingBottom: var(--sizes-size-0); --Tag-base-paddingLeft: var(--sizes-size-5); --Tag-base-paddingRight: var(--sizes-size-5); --Tag-base-padding: var(--Tag-base-paddingTop) var(--Tag-base-paddingRight) var(--Tag-base-paddingBottom) var(--Tag-base-paddingLeft); --Tag-model-normal-top-border-color: var(--colors-neutral-line-6); --Tag-model-normal-top-border-width: var(--borders-width-2); --Tag-model-normal-top-border-style: var(--borders-style-1); --Tag-model-normal-right-border-color: var(--colors-neutral-line-6); --Tag-model-normal-right-border-width: var(--borders-width-2); --Tag-model-normal-right-border-style: var(--borders-style-1); --Tag-model-normal-bottom-border-color: var(--colors-neutral-line-6); --Tag-model-normal-bottom-border-width: var(--borders-width-2); --Tag-model-normal-bottom-border-style: var(--borders-style-1); --Tag-model-normal-left-border-color: var(--colors-neutral-line-6); --Tag-model-normal-left-border-width: var(--borders-width-2); --Tag-model-normal-left-border-style: var(--borders-style-1); --Tag-model-normal-top-right-border-radius: var(--borders-radius-1); --Tag-model-normal-top-left-border-radius: var(--borders-radius-1); --Tag-model-normal-bottom-right-border-radius: var(--borders-radius-1); --Tag-model-normal-bottom-left-border-radius: var(--borders-radius-1); --Tag-model-normal-status-size: var(--sizes-size-0); --Tag-model-normal-status-margin: var(--sizes-size-0); --Tag-model-normal-close-size: var(--sizes-size-0); --Tag-model-normal-close-margin: var(--sizes-size-0); --Tag-model-rounded-top-border-color: var(--colors-neutral-line-6); --Tag-model-rounded-top-border-width: var(--borders-width-2); --Tag-model-rounded-top-border-style: var(--borders-style-2); --Tag-model-rounded-right-border-color: var(--colors-neutral-line-6); --Tag-model-rounded-right-border-width: var(--borders-width-2); --Tag-model-rounded-right-border-style: var(--borders-style-2); --Tag-model-rounded-bottom-border-color: var(--colors-neutral-line-6); --Tag-model-rounded-bottom-border-width: var(--borders-width-2); --Tag-model-rounded-bottom-border-style: var(--borders-style-2); --Tag-model-rounded-left-border-color: var(--colors-neutral-line-6); --Tag-model-rounded-left-border-width: var(--borders-width-2); --Tag-model-rounded-left-border-style: var(--borders-style-2); --Tag-model-rounded-top-right-border-radius: 12px; --Tag-model-rounded-top-left-border-radius: 12px; --Tag-model-rounded-bottom-right-border-radius: 12px; --Tag-model-rounded-bottom-left-border-radius: 12px; --Tag-model-rounded-status-size: var(--sizes-size-0); --Tag-model-rounded-status-margin: var(--sizes-size-0); --Tag-model-rounded-close-size: var(--sizes-size-0); --Tag-model-rounded-close-margin: var(--sizes-size-0); --Tag-model-status-top-border-color: var(--colors-neutral-line-6); --Tag-model-status-top-border-width: var(--borders-width-2); --Tag-model-status-top-border-style: var(--borders-style-1); --Tag-model-status-right-border-color: var(--colors-neutral-line-6); --Tag-model-status-right-border-width: var(--borders-width-2); --Tag-model-status-right-border-style: var(--borders-style-1); --Tag-model-status-bottom-border-color: var(--colors-neutral-line-6); --Tag-model-status-bottom-border-width: var(--borders-width-2); --Tag-model-status-bottom-border-style: var(--borders-style-1); --Tag-model-status-left-border-color: var(--colors-neutral-line-6); --Tag-model-status-left-border-width: var(--borders-width-2); --Tag-model-status-left-border-style: var(--borders-style-1); --Tag-model-status-top-right-border-radius: var(--borders-radius-1); --Tag-model-status-top-left-border-radius: var(--borders-radius-1); --Tag-model-status-bottom-right-border-radius: var(--borders-radius-1); --Tag-model-status-bottom-left-border-radius: var(--borders-radius-1); --Tag-model-status-status-size: var(--sizes-size-5); --Tag-model-status-status-margin: var(--sizes-size-5); --Tag-model-status-close-size: var(--sizes-size-5); --Tag-model-status-close-margin: var(--sizes-size-5); --Tag-color-active-color: var(--colors-neutral-fill-11); --Tag-color-active-bg-color: var(--colors-brand-5); --Tag-color-inactive-color: var(--colors-neutral-fill-11); --Tag-color-inactive-bg-color: var(--colors-neutral-fill-6); --Tag-color-error-color: var(--colors-neutral-fill-11); --Tag-color-error-bg-color: var(--colors-error-5); --Tag-color-success-color: var(--colors-neutral-fill-11); --Tag-color-success-bg-color: var(--colors-success-5); --Tag-color-processing-color: var(--colors-neutral-fill-11); --Tag-color-processing-bg-color: var(--colors-brand-6); --Tag-color-warning-color: var(--colors-neutral-fill-11); --Tag-color-warning-bg-color: var(--colors-warning-5); --Tag-content-fontSize: var(--Tag-base-fontSize); --Tag-height: var(--Tag-base-height); --Tag-borderRadius: var(--Tag-model-normal-top-left-border-radius) var(--Tag-model-normal-top-right-border-radius) var(--Tag-model-normal-bottom-right-border-radius) var(--Tag-model-normal-bottom-left-border-radius); --Tag-fontColor: var(--colors-neutral-text-2); --Tag-rounded-borderRadius: var(--Tag-model-rounded-top-left-border-radius) var(--Tag-model-rounded-top-right-border-radius) var(--Tag-model-rounded-bottom-right-border-radius) var(--Tag-model-rounded-bottom-left-border-radius); --Tag-status-margin: var(--Tag-model-status-status-margin); --Tag-status-size: var(--Tag-model-status-status-size); --Tag-close-margin: var(--Tag-model-status-close-margin); --Tag-close-size: var(--Tag-model-status-close-size); --Tag-default-color: var(--colors-neutral-fill-9); --Tag-inactive-color: var(--Tag-color-inactive-color); --Tag-active-color: var(--Tag-color-active-color); --Tag-processing-color: var(--Tag-color-processing-color); --Tag-success-color: var(--Tag-color-success-color); --Tag-error-color: var(--Tag-color-error-color); --Tag-warning-color: var(--Tag-color-warning-color); --Tag-inactive-bg-color: var(--Tag-color-inactive-bg-color); --Tag-active-bg-color: var(--Tag-color-active-bg-color); --Tag-processing-bg-color: var(--Tag-color-processing-bg-color); --Tag-success-bg-color: var(--Tag-color-success-bg-color); --Tag-error-bg-color: var(--Tag-color-error-bg-color); --Tag-warning-bg-color: var(--Tag-color-warning-bg-color); --Tag-normal-borderWidth: var(--Tag-model-normal-top-border-width) var(--Tag-model-normal-right-border-width) var(--Tag-model-normal-bottom-border-width) var(--Tag-model-normal-left-border-width); --Tag-normal-borderRadius: var(--Tag-model-normal-top-left-border-radius) var(--Tag-model-normal-top-right-border-radius) var(--Tag-model-normal-bottom-right-border-radius) var(--Tag-model-normal-bottom-left-border-radius); --Tag-normal-borderColor: var(--Tag-model-normal-top-border-color) var(--Tag-model-normal-right-border-color) var(--Tag-model-normal-bottom-border-color) var(--Tag-model-normal-left-border-color); --Tag-normal-status-size: var(--Tag-model-normal-status-size); --Tag-normal-status-margin: var(--Tag-model-normal-status-margin); --Tag-rounded-borderWidth: var(--Tag-model-rounded-top-border-width) var(--Tag-model-rounded-right-border-width) var(--Tag-model-rounded-bottom-border-width) var(--Tag-model-rounded-left-border-width); --Tag-rounded-borderRadius: var(--Tag-model-rounded-top-left-border-radius) var(--Tag-model-rounded-top-right-border-radius) var(--Tag-model-rounded-bottom-right-border-radius) var(--Tag-model-rounded-bottom-left-border-radius); --Tag-rounded-borderColor: var(--Tag-model-rounded-top-border-color) var(--Tag-model-rounded-right-border-color) var(--Tag-model-rounded-bottom-border-color) var(--Tag-model-rounded-left-border-color); --Tag-rounded-borderStyle: var(--Tag-model-rounded-top-border-style) var(--Tag-model-rounded-right-border-style) var(--Tag-model-rounded-bottom-border-style) var(--Tag-model-rounded-left-border-style); --Toast-color: var(--colors-neutral-text-11); --Toast-paddingTop: var(--sizes-size-3); --Toast-paddingBottom: var(--sizes-size-3); --Toast-paddingLeft: var(--sizes-size-9); --Toast-paddingRight: var(--sizes-size-9); --Toast-top-right-border-radius: var(--borders-radius-3); --Toast-top-left-border-radius: var(--borders-radius-3); --Toast-bottom-right-border-radius: var(--borders-radius-3); --Toast-bottom-left-border-radius: var(--borders-radius-3); --Toast-icon-size: var(--sizes-size-9); --Toast--danger-color: var(--colors-neutral-text-2); --Toast--danger-fontSize: var(--fonts-size-8); --Toast--danger-fontWeight: var(--fonts-weight-6); --Toast--danger-top-border-color: var(--colors-neutral-line-11); --Toast--danger-top-border-width: var(--borders-width-2); --Toast--danger-top-border-style: var(--borders-style-2); --Toast--danger-right-border-color: var(--colors-neutral-line-11); --Toast--danger-right-border-width: var(--borders-width-2); --Toast--danger-right-border-style: var(--borders-style-2); --Toast--danger-bottom-border-color: var(--colors-neutral-line-11); --Toast--danger-bottom-border-width: var(--borders-width-2); --Toast--danger-bottom-border-style: var(--borders-style-2); --Toast--danger-left-border-color: var(--colors-neutral-line-11); --Toast--danger-left-border-width: var(--borders-width-2); --Toast--danger-left-border-style: var(--borders-style-2); --Toast--danger-top-right-border-radius: var(--borders-radius-3); --Toast--danger-top-left-border-radius: var(--borders-radius-3); --Toast--danger-bottom-right-border-radius: var(--borders-radius-3); --Toast--danger-bottom-left-border-radius: var(--borders-radius-3); --Toast--danger-bgColor: var(--colors-neutral-fill-11); --Toast--info-color: var(--colors-neutral-text-2); --Toast--info-fontSize: var(--fonts-size-8); --Toast--info-fontWeight: var(--fonts-weight-6); --Toast--info-top-border-color: var(--colors-neutral-line-11); --Toast--info-top-border-width: var(--borders-width-2); --Toast--info-top-border-style: var(--borders-style-2); --Toast--info-right-border-color: var(--colors-neutral-line-11); --Toast--info-right-border-width: var(--borders-width-2); --Toast--info-right-border-style: var(--borders-style-2); --Toast--info-bottom-border-color: var(--colors-neutral-line-11); --Toast--info-bottom-border-width: var(--borders-width-2); --Toast--info-bottom-border-style: var(--borders-style-2); --Toast--info-left-border-color: var(--colors-neutral-line-11); --Toast--info-left-border-width: var(--borders-width-2); --Toast--info-left-border-style: var(--borders-style-2); --Toast--info-bgColor: var(--colors-neutral-fill-11); --Toast--success-color: var(--colors-neutral-text-2); --Toast--success-fontWeight: var(--fonts-weight-6); --Toast--success-fontSize: var(--fonts-size-8); --Toast--success-fontWeight: var(--fonts-weight-6); --Toast--success-top-border-color: var(--colors-neutral-line-11); --Toast--success-top-border-width: var(--borders-width-2); --Toast--success-top-border-style: var(--borders-style-2); --Toast--success-right-border-color: var(--colors-neutral-line-11); --Toast--success-right-border-width: var(--borders-width-2); --Toast--success-right-border-style: var(--borders-style-2); --Toast--success-bottom-border-color: var(--colors-neutral-line-11); --Toast--success-bottom-border-width: var(--borders-width-2); --Toast--success-bottom-border-style: var(--borders-style-2); --Toast--success-left-border-color: var(--colors-neutral-line-11); --Toast--success-left-border-width: var(--borders-width-2); --Toast--success-left-border-style: var(--borders-style-2); --Toast--success-top-right-border-radius: var(--borders-radius-3); --Toast--success-top-left-border-radius: var(--borders-radius-3); --Toast--success-bottom-right-border-radius: var(--borders-radius-3); --Toast--success-bottom-left-border-radius: var(--borders-radius-3); --Toast--success-bgColor: var(--colors-neutral-fill-11); --Toast--warning-color: var(--colors-neutral-text-2); --Toast--warning-fontSize: var(--fonts-size-8); --Toast--warning-fontWeight: var(--fonts-weight-6); --Toast--warning-top-border-color: var(--colors-neutral-line-11); --Toast--warning-top-border-width: var(--borders-width-2); --Toast--warning-top-border-style: var(--borders-style-2); --Toast--warning-right-border-color: var(--colors-neutral-line-11); --Toast--warning-right-border-width: var(--borders-width-2); --Toast--warning-right-border-style: var(--borders-style-2); --Toast--warning-bottom-border-color: var(--colors-neutral-line-11); --Toast--warning-bottom-border-width: var(--borders-width-2); --Toast--warning-bottom-border-style: var(--borders-style-2); --Toast--warning-left-border-color: var(--colors-neutral-line-11); --Toast--warning-left-border-width: var(--borders-width-2); --Toast--warning-left-border-style: var(--borders-style-2); --Toast--warning-top-right-border-radius: var(--borders-radius-3); --Toast--warning-top-left-border-radius: var(--borders-radius-3); --Toast--warning-bottom-right-border-radius: var(--borders-radius-3); --Toast--warning-bottom-left-border-radius: var(--borders-radius-3); --Toast--warning-bgColor: var(--colors-neutral-fill-11); --Toast-border-width: var(--borders-width-2); --Toast-borderRadius: var(--borders-radius-3); --Toast-box-shadow: 0px 4px 6px 0px rgba(8, 14, 26, 0.06), 0px 1px 10px 0px rgba(8, 14, 26, 0.05), 0px 2px 4px -1px rgba(8, 14, 26, 0.04); --Toast-close-color: var(--colors-neutral-text-5); --Toast-close--onHover-color: var(--colors-brand-5); --Toast-icon-width: var(--Toast-icon-size); --Toast-icon-height: var(--Toast-icon-size); --Toast-opacity: 1; --Toast-title-display: inline; --Toast-width: 25rem; --Pick-base-top-border-color: var(--colors-neutral-line-8); --Pick-base-top-border-width: var(--borders-width-2); --Pick-base-top-border-style: var(--borders-style-2); --Pick-base-right-border-color: var(--colors-neutral-line-8); --Pick-base-right-border-width: var(--borders-width-2); --Pick-base-right-border-style: var(--borders-style-2); --Pick-base-bottom-border-color: var(--colors-neutral-line-8); --Pick-base-bottom-border-width: var(--borders-width-2); --Pick-base-bottom-border-style: var(--borders-style-2); --Pick-base-left-border-color: var(--colors-neutral-line-8); --Pick-base-left-border-width: var(--borders-width-2); --Pick-base-left-border-style: var(--borders-style-2); --Pick-base-top-right-border-radius: var(--borders-radius-3); --Pick-base-top-left-border-radius: var(--borders-radius-3); --Pick-base-bottom-right-border-radius: var(--borders-radius-3); --Pick-base-bottom-left-border-radius: var(--borders-radius-3); --Pick-base-placeholder-color: var(--colors-neutral-line-6); --Pick-base-placeholder-fontSize: var(--fonts-size-7); --Pick-base-placeholder-fontWeight: var(--fonts-weight-6); --Pick-base-paddingTop: var(--sizes-size-3); --Pick-base-paddingBottom: var(--sizes-size-3); --Pick-base-paddingLeft: var(--sizes-size-6); --Pick-base-paddingRight: var(--sizes-size-6); --Pick-base-bgColor: var(--colors-neutral-fill-11); --Pick-base-value-color: var(--colors-other-5); --Pick-base-value-fontSize: var(--fonts-size-8); --Pick-base-value-fontWeight: var(--fonts-weight-6); --Pick-base-value-top-border-color: var(--colors-other-7); --Pick-base-value-top-border-width: var(--borders-width-2); --Pick-base-value-top-border-style: var(--borders-style-2); --Pick-base-value-right-border-color: var(--colors-other-7); --Pick-base-value-right-border-width: var(--borders-width-2); --Pick-base-value-right-border-style: var(--borders-style-2); --Pick-base-value-bottom-border-color: var(--colors-other-7); --Pick-base-value-bottom-border-width: var(--borders-width-2); --Pick-base-value-bottom-border-style: var(--borders-style-2); --Pick-base-value-left-border-color: var(--colors-other-7); --Pick-base-value-left-border-width: var(--borders-width-2); --Pick-base-value-left-border-style: var(--borders-style-2); --Pick-base-value-bgColor: #cce5ff; --Pick-base-top-right-border-radius: var(--borders-radius-3); --Pick-base-top-left-border-radius: var(--borders-radius-3); --Pick-base-bottom-right-border-radius: var(--borders-radius-3); --Pick-base-bottom-left-border-radius: var(--borders-radius-3); --Pick-base-icon: ''; --Pick-base-icon-size: var(--sizes-size-9); --Pick-base-icon-color: #84878c; --Pick-base-value-hover-icon-color: #b3d7ff; --Pick-base-value-icon-color: var(--colors-other-5); --Picker-onHover-iconColor: var(--icon-onHover-color); --Picker-tag-height: 1.5rem; --Picker-tag-marginBottom: var(--select-multiple-marginBottom); --Pick-status-hover-top-border-color: var(--colors-other-5); --Pick-status-hover-top-border-width: var(--borders-width-2); --Pick-status-hover-top-border-style: var(--borders-style-2); --Pick-status-hover-right-border-color: var(--colors-other-5); --Pick-status-hover-right-border-width: var(--borders-width-2); --Pick-status-hover-right-border-style: var(--borders-style-2); --Pick-status-hover-bottom-border-color: var(--colors-other-5); --Pick-status-hover-bottom-border-width: var(--borders-width-2); --Pick-status-hover-bottom-border-style: var(--borders-style-2); --Pick-status-hover-left-border-color: var(--colors-other-5); --Pick-status-hover-left-border-width: var(--borders-width-2); --Pick-status-hover-left-border-style: var(--borders-style-2); --Pick-status-hover-bgColor: var(--colors-neutral-fill-11); --Pick-status-focus-top-border-color: var(--colors-other-7); --Pick-status-focus-top-border-width: var(--borders-width-2); --Pick-status-focus-top-border-style: var(--borders-style-2); --Pick-status-focus-right-border-color: var(--colors-other-7); --Pick-status-focus-right-border-width: var(--borders-width-2); --Pick-status-focus-right-border-style: var(--borders-style-2); --Pick-status-focus-bottom-border-color: var(--colors-other-7); --Pick-status-focus-bottom-border-width: var(--borders-width-2); --Pick-status-focus-bottom-border-style: var(--borders-style-2); --Pick-status-focus-left-border-color: var(--colors-other-7); --Pick-status-focus-left-border-width: var(--borders-width-2); --Pick-status-focus-left-border-style: var(--borders-style-2); --Pick-status-focus-shadow: var(--shadows-shadow-none); --Pick-status-focus-bgColor: var(--colors-neutral-fill-11); --Pick-status-disabled-color: var(--colors-neutral-text-2); --Pick-status-disabled-fontSize: var(--fonts-size-7); --Pick-status-disabled-fontWeight: var(--fonts-weight-6); --Pick-status-disabled-top-border-color: var(--colors-neutral-line-8); --Pick-status-disabled-top-border-width: var(--borders-width-2); --Pick-status-disabled-top-border-style: var(--borders-style-2); --Pick-status-disabled-right-border-color: var(--colors-neutral-line-8); --Pick-status-disabled-right-border-width: var(--borders-width-2); --Pick-status-disabled-right-border-style: var(--borders-style-2); --Pick-status-disabled-bottom-border-color: var(--colors-neutral-line-8); --Pick-status-disabled-bottom-border-width: var(--borders-width-2); --Pick-status-disabled-bottom-border-style: var(--borders-style-2); --Pick-status-disabled-left-border-color: var(--colors-neutral-line-8); --Pick-status-disabled-left-border-width: var(--borders-width-2); --Pick-status-disabled-left-border-style: var(--borders-style-2); --Pick-status-disabled-bgColor: var(--colors-neutral-fill-10); --Pick-status-disabled-color: var(--colors-neutral-line-6); --Pick-status-disabled-fontSize: var(--fonts-size-7); --Pick-status-disabled-fontWeight: var(--fonts-weight-6); --Status-base-fontSize: var(--fonts-size-9); --Status-base-icon-size: var(--sizes-size-8); --Status-base-text-margin: var(--sizes-size-3); --Status-fail-color: var(--colors-error-5); --Status-success-color: var(--colors-success-5); --Status-warning-color: var(--colors-warning-5); --Status-schedule-color: var(--colors-neutral-fill-2); --Status-pending-before-color: var(--colors-error-5); --Status-pending-after-color: var(--colors-brand-5); --Status-font-size: var(--Status-base-fontSize); --Status-font-margin: var(--Status-base-text-margin); --Status-icon-width: var(--Status-base-icon-size); --Status-icon-height: var(--Status-base-icon-size); --Status-pending-beforeColor: var(--Status-pending-before-color); --Status-pending-afterColor: var(--Status-pending-after-color); --Timeline-time-color: var(--colors-neutral-text-5); --Timeline-time-fontSize: var(--fonts-size-7); --Timeline-time-fontWeight: var(--fonts-weight-6); --Timeline-title-color: var(--colors-neutral-text-2); --Timeline-title-fontSize: var(--fonts-size-7); --Timeline-title-fontWeight: var(--fonts-weight-6); --Timeline-type-info-color: var(--colors-info-5); --Timeline-type-success-color: var(--colors-success-5); --Timeline-type-warning-color: var(--colors-warning-5); --Timeline-type-danger-color: var(--colors-error-5); --Timeline-detail-label-color: var(--colors-brand-5); --Timeline-detail-label-fontSize: var(--fonts-size-7); --Timeline-detail-label-fontWeight: var(--fonts-weight-6); --Timeline-detail-content-color: var(--colors-neutral-text-2); --Timeline-detail-content-fontSize: var(--fonts-size-7); --Timeline-detail-content-fontWeight: var(--fonts-weight-6); --Timeline-shadow: var(--shadows-shadow-normal); --Timeline-detail-icon-size: var(--sizes-base-8); --Timeline-detail-icon-color: var(--colors-brand-5); --Timeline-visible-paddingTop: var(--sizes-size-6); --Timeline-visible-paddingBottom: var(--sizes-size-6); --Timeline-visible-paddingLeft: var(--sizes-size-6); --Timeline-visible-paddingRight: var(--sizes-size-6); --Timeline-visible-top-right-border-radius: var(--borders-radius-3); --Timeline-visible-top-left-border-radius: var(--borders-radius-3); --Timeline-visible-bottom-right-border-radius: var(--borders-radius-3); --Timeline-visible-bottom-left-border-radius: var(--borders-radius-3); --Timeline-left-size: var(--sizes-size-2); --Timeline-horizontal-top-size: var(--sizes-size-0); --Timeline-line-bg: #e6e6e8; --Timeline-round-bg: #dadbdd; --TimelineItem--axle-flex: 0 0 1.5rem; --TimelineItem--left-line-width: 0.125rem; --TimelineItem--left-line-left: 0.8125rem; --TimelineItem--left-line-top: 1.25rem; --TimelineItem--horizontal-left-line-top: 1.125rem; --TimelineItem--icon-left-line-left: 0.75rem; --TimelineItem--round-width: 0.5rem; --TimelineItem--round-height: 0.5rem; --TimelineItem--round-left: 0.625rem; --TimelineItem--round-top: 0.5rem; --TimelineItem--icon-width: 1rem; --TimelineItem--icon-height: 1rem; --TimelineItem--icon-left: 0.375rem; --TimelineItem--content-padding-bottom: var(--gap-md); --TimelineItem--content-margin-left: var(--Timeline-left-size); --TimelineItem--content-time-margin-bottom: var(--gap-xs); --TimelineItem--content-title-margin-bottom: var(--gap-xs); --TimelineItem--detail-button-margin-bottom: var(--gap-base); --TimelineItem-detail-arrow-width: var(--Timeline-detail-icon-size); --TimelineItem-detail-visible-padding: var(--Timeline-visible-paddingTop) var(--Timeline-visible-paddingRight) var(--Timeline-visible-paddingBottom) var(--Timeline-visible-paddingLeft); --TimelineItem-detail-visible-max-width: 18.75rem; --Timeline-alternate-margin-left: var(--gap-xl); --Timeline-visible-border-radius: var( --Timeline-visible-top-left-border-radius ) var(--Timeline-visible-top-right-border-radius) var(--Timeline-visible-bottom-right-border-radius) var(--Timeline-visible-bottom-left-border-radius); --Timeline-horizontal-content-margin-top: var(--Timeline-horizontal-top-size); --TimelineItem--icon-radius: 50%; --TimelineItem--round-radius: 50%; --TimelineItem--content-radius: px2rem(2px); --TimelineItem-detail-visible-shadow: var(--Timeline-shadow); --TimelineItem--font-size: var(--fontSizeSm); --TimelineItem--text-primary-color: var(--Timeline-title-color); --TimelineItem--text-secondary-color: var(--Timeline-time-color); --TimelineItem--detail-button-color: var(--Timeline-detail-label-color); --TimelineItem--line-bg: var(--Timeline-line-bg); --TimelineItem--content-bg: #f2f2f4; --TimelineItem-custem-button-margin-left: var(--fontSizeSm); --TimelineItem-custem-time-padding-right: var(--fontSizeSm); --TimelineItem-round-bg: var(--Timeline-round-bg); --Timeline--success-bg: var(--Timeline-type-success-color); --Timeline--info-bg: var(--Timeline-type-info-color); --Timeline--warning-bg: var(--Timeline-type-warning-color); --Timeline--danger-bg: var(--Timeline-type-danger-color); --inputTag-option-height: var(--sizes-base-16); --inputTag-option-color: var(--colors-neutral-text-2); --inputTag-option-fontSize: var(--fonts-size-7); --inputTag-option-fontWeight: var(--fonts-weight-6); --inputTag-option-lineHeight: var(--fonts-lineHeight-2); --inputTag-option-paddingTop: var(--sizes-size-3); --inputTag-option-paddingBottom: var(--sizes-size-3); --inputTag-option-paddingLeft: var(--sizes-size-6); --inputTag-option-paddingRight: var(--sizes-size-6); --inputTag-option-bg-color: var(--colors-neutral-fill-11); --inputTag-option-hover-color: var(--colors-neutral-text-2); --inputTag-option-hover-bg-color: var(--colors-brand-10); --inputTag-popover-maxHeight: 300px; --fieldSet-legend-height: var(--sizes-size-9); --fieldSet-legend-color: var(--colors-neutral-text-2); --fieldSet-legend-fontSize: var(--fonts-size-7); --fieldSet-legend-fontWeight: var(--fonts-weight-6); --fieldSet-legend-paddingTop: var(--sizes-size-0); --fieldSet-legend-paddingBottom: var(--sizes-size-0); --fieldSet-legend-paddingLeft: var(--sizes-size-8); --fieldSet-legend-paddingRight: var(--sizes-size-0); --fieldSet-legend-marginTop: var(--sizes-size-7); --fieldSet-legend-marginBottom: var(--sizes-size-7); --fieldSet-legend-marginLeft: var(--sizes-size-0); --fieldSet-legend-marginRight: var(--sizes-size-0); --fieldSet-legend-border-color: var(--colors-brand-5); --fieldSet-legend-border-width: var(--sizes-size-3); --fieldSet-size-xs-paddingTop: var(--sizes-base-10); --fieldSet-size-xs-paddingRight: var(--sizes-size-3); --fieldSet-size-xs-paddingBottom: var(--sizes-size-3); --fieldSet-size-xs-paddingLeft: var(--sizes-size-3); --fieldSet-size-xs-fontSize: var(--fonts-size-8); --fieldSet-size-sm-paddingTop: var(--sizes-base-12); --fieldSet-size-sm-paddingRight: var(--sizes-size-6); --fieldSet-size-sm-paddingBottom: var(--sizes-size-6); --fieldSet-size-sm-paddingLeft: var(--sizes-size-6); --fieldSet-size-sm-fontSize: var(--fonts-size-8); --fieldSet-size-base-paddingTop: var(--sizes-base-15); --fieldSet-size-base-paddingRight: var(--sizes-size-9); --fieldSet-size-base-paddingBottom: var(--sizes-size-9); --fieldSet-size-base-paddingLeft: var(--sizes-size-9); --fieldSet-size-base-fontSize: var(--fonts-size-7); --fieldSet-size-md-paddingTop: var(--sizes-base-15); --fieldSet-size-md-paddingRight: var(--sizes-base-10); --fieldSet-size-md-paddingBottom: var(--sizes-base-10); --fieldSet-size-md-paddingLeft: var(--sizes-base-10); --fieldSet-size-md-fontSize: var(--fonts-size-7); --fieldSet-size-lg-paddingTop: var(--sizes-base-20); --fieldSet-size-lg-paddingRight: var(--sizes-base-15); --fieldSet-size-lg-paddingBottom: var(--sizes-base-15); --fieldSet-size-lg-paddingLeft: var(--sizes-base-15); --fieldSet-size-lg-fontSize: var(--fonts-size-6); --inputRichText-default-top-border-color: var(--colors-neutral-line-8); --inputRichText-default-top-border-width: var(--borders-width-2); --inputRichText-default-top-border-style: var(--borders-style-2); --inputRichText-default-right-border-color: var(--colors-neutral-line-8); --inputRichText-default-right-border-width: var(--borders-width-2); --inputRichText-default-right-border-style: var(--borders-style-2); --inputRichText-default-bottom-border-color: var(--colors-neutral-line-8); --inputRichText-default-bottom-border-width: var(--borders-width-2); --inputRichText-default-bottom-border-style: var(--borders-style-2); --inputRichText-default-left-border-color: var(--colors-neutral-line-8); --inputRichText-default-left-border-width: var(--borders-width-2); --inputRichText-default-left-border-style: var(--borders-style-2); --inputRichText-default-top-left-border-radius: var(--borders-radius-1); --inputRichText-default-top-right-border-radius: var(--borders-radius-1); --inputRichText-default-bottom-right-border-radius: var(--borders-radius-1); --inputRichText-default-bottom-left-border-radius: var(--borders-radius-1); --inputRichText-hover-top-border-color: var(--colors-neutral-line-8); --inputRichText-hover-top-border-width: var(--borders-width-2); --inputRichText-hover-top-border-style: var(--borders-style-2); --inputRichText-hover-right-border-color: var(--colors-neutral-line-8); --inputRichText-hover-right-border-width: var(--borders-width-2); --inputRichText-hover-right-border-style: var(--borders-style-2); --inputRichText-hover-bottom-border-color: var(--colors-neutral-line-8); --inputRichText-hover-bottom-border-width: var(--borders-width-2); --inputRichText-hover-bottom-border-style: var(--borders-style-2); --inputRichText-hover-left-border-color: var(--colors-neutral-line-8); --inputRichText-hover-left-border-width: var(--borders-width-2); --inputRichText-hover-left-border-style: var(--borders-style-2); --inputRichText-hover-top-left-border-radius: var(--borders-radius-1); --inputRichText-hover-top-right-border-radius: var(--borders-radius-1); --inputRichText-hover-bottom-right-border-radius: var(--borders-radius-1); --inputRichText-hover-bottom-left-border-radius: var(--borders-radius-1); --inputRichText-active-top-border-color: var(--colors-brand-5); --inputRichText-active-top-border-width: var(--borders-width-2); --inputRichText-active-top-border-style: var(--borders-style-2); --inputRichText-active-right-border-color: var(--colors-brand-5); --inputRichText-active-right-border-width: var(--borders-width-2); --inputRichText-active-right-border-style: var(--borders-style-2); --inputRichText-active-bottom-border-color: var(--colors-brand-5); --inputRichText-active-bottom-border-width: var(--borders-width-2); --inputRichText-active-bottom-border-style: var(--borders-style-2); --inputRichText-active-left-border-color: var(--colors-brand-5); --inputRichText-active-left-border-width: var(--borders-width-2); --inputRichText-active-left-border-style: var(--borders-style-2); --inputRichText-active-top-left-border-radius: var(--borders-radius-1); --inputRichText-active-top-right-border-radius: var(--borders-radius-1); --inputRichText-active-bottom-right-border-radius: var(--borders-radius-1); --inputRichText-active-bottom-left-border-radius: var(--borders-radius-1); --inputRichText-disabled-top-border-color: var(--colors-neutral-line-8); --inputRichText-disabled-top-border-width: var(--borders-width-2); --inputRichText-disabled-top-border-style: var(--borders-style-2); --inputRichText-disabled-right-border-color: var(--colors-neutral-line-8); --inputRichText-disabled-right-border-width: var(--borders-width-2); --inputRichText-disabled-right-border-style: var(--borders-style-2); --inputRichText-disabled-bottom-border-color: var(--colors-neutral-line-8); --inputRichText-disabled-bottom-border-width: var(--borders-width-2); --inputRichText-disabled-bottom-border-style: var(--borders-style-2); --inputRichText-disabled-left-border-color: var(--colors-neutral-line-8); --inputRichText-disabled-left-border-width: var(--borders-width-2); --inputRichText-disabled-left-border-style: var(--borders-style-2); --inputRichText-disabled-top-left-border-radius: var(--borders-radius-1); --inputRichText-disabled-top-right-border-radius: var(--borders-radius-1); --inputRichText-disabled-bottom-right-border-radius: var(--borders-radius-1); --inputRichText-disabled-bottom-left-border-radius: var(--borders-radius-1); --conditionBuilder-toolbar-width: var(--sizes-base-14); --conditionBuilder-toolbar-height: var(--sizes-base-14); --conditionBuilder-toolbar-color: var(--colors-brand-3); --conditionBuilder-toolbar-fontSize: var(--fonts-size-8); --conditionBuilder-toolbar-fontWeight: var(--fonts-weight-5); --conditionBuilder-toolbar-bg-color: var(--colors-brand-9); --conditionBuilder-toolbar-hover-color: var(--colors-neutral-text-11); --conditionBuilder-toolbar-hover-fontSize: var(--fonts-size-8); --conditionBuilder-toolbar-hover-fontWeight: var(--fonts-weight-5); --conditionBuilder-toolbar-hover-bg-color: var(--colors-brand-5); --conditionBuilder-line-width: var(--sizes-size-2); --conditionBuilder-line-bg-color: var(--colors-brand-9); --conditionBuilder-body-bg-color: var(--colors-neutral-line-10); --conditionBuilder-body-paddingTop: var(--sizes-size-3); --conditionBuilder-body-paddingRight: var(--sizes-size-7); --conditionBuilder-body-paddingBottom: var(--sizes-size-3); --conditionBuilder-body-paddingLeft: var(--sizes-base-14); --table-border-width: var(--borders-width-2); --table-border-color: var(--colors-neutral-line-8); --table-paddingTop: var(--sizes-size-3); --table-paddingRight: var(--sizes-size-6); --table-paddingBottom: var(--sizes-size-3); --table-paddingLeft: var(--sizes-size-6); --table-paddingX: var(--sizes-size-7); --table-header-color: var(--colors-neutral-text-2); --table-header-fontSize: var(--fonts-size-7); --table-header-fontWeight: var(--fonts-weight-6); --table-header-lineHeight: var(--fonts-lineHeight-2); --table-header-bg-color: var(--colors-neutral-fill-10); --table-header-separate-line-color: var(--colors-neutral-fill-11); --table-header-separate-line-width: var(--borders-width-2); --table-body-color: var(--colors-neutral-text-2); --table-body-fontSize: var(--fonts-size-8); --table-body-fontWeight: var(--fonts-weight-6); --table-body-line-height: var(--sizes-base-20); --table-body-lineHeight: var(--fonts-lineHeight-2); --table-body-bg-color: var(--colors-neutral-fill-11); --table-body-default-bg-color: var(--table-body-bg-color); --table-body-hover-color: var(--colors-neutral-text-2); --table-body-hover-bg-color: var(--colors-brand-10); --table-body-hover-border-color: var(--colors-neutral-line-8); --table-body-disabled-color: var(--colors-neutral-text-6); --table-body-disabled-bg-color: var(--colors-neutral-fill-10); --table-title-color: var(--colors-neutral-text-2); --table-title-fontSize: var(--fonts-size-7); --table-title-fontWeight: var(--fonts-weight-6); --table-title-lineHeight: var(--fonts-lineHeight-2); --table-title-bg-color: var(--colors-neutral-fill-11); --table-title-paddingTop: var(--sizes-size-6); --table-title-paddingRight: var(--sizes-size-5); --table-title-paddingBottom: var(--sizes-size-6); --table-title-paddingLeft: var(--sizes-size-5); --table-icon-color: var(--colors-neutral-text-6); --table-icon-hover-color: var(--colors-neutral-text-2); --table-icon-active-color: var(--colors-brand-5); --table-icon-marginLeft: var(--sizes-size-5); --table-sort-icon: ''; --table-sort-up-icon: ''; --table-sort-down-icon: ''; --table-filter-icon: ''; --table-search-icon: ''; --table-togglable-paddingTop: var(--sizes-size-4); --table-togglable-paddingRight: var(--sizes-size-5); --table-togglable-paddingBottom: var(--sizes-size-4); --table-togglable-paddingLeft: var(--sizes-size-5); --table-togglable-bg-color: var(--colors-neutral-fill-11); --table-togglable-hover-bg-color: var(--colors-neutral-fill-8); --table-size-large-paddingTop: var(--sizes-base-10); --table-size-large-paddingRight: var(--sizes-size-7); --table-size-large-paddingBottom: var(--sizes-base-10); --table-size-large-paddingLeft: var(--sizes-size-7); --table-size-small-paddingTop: var(--sizes-size-4); --table-size-small-paddingRight: var(--sizes-size-3); --table-size-small-paddingBottom: var(--sizes-size-4); --table-size-small-paddingLeft: var(--sizes-size-3); --Table--unsaved-heading-bg: var(--colors-neutral-fill-9); --Table--unsaved-heading-color: var(--colors-brand-5); --Table-bg: var(--colors-neutral-fill-11); --Table-borderColor: var(--table-border-color); --Table-borderRadius: var(--borderRadius); --Table-borderWidth: var(--table-border-width); --Table-color: var(--table-body-color); --Table-expandBtn-color: var(--colors-neutral-text-5); --Table-fixed-zIndex: 5; --Table-fixedLeft-boxShadow: inset 10px 0 8px -8px rgba(5, 5, 5, 0.06); --Table-fixedRight-boxShadow: inset -10px 0 8px -8px rgba(5, 5, 5, 0.06); --Table-fixedTop-boxShadow: inset 0 10px 8px -8px rgba(5, 5, 5, 0.06); --Table-fontSize: var(--table-body-fontSize); --Table-heading-bg: var(--table-title-bg-color); --Table-heading-height: 2.5rem; --Table-lineHeight: var(--fonts-lineHeight-2); --Table-onChecked-bg: var(--colors-neutral-fill-11); --Table-onChecked-borderColor: var(--colors-neutral-line-8); --Table-onChecked-color: var(--colors-neutral-text-2); --Table-onChecked-onHover-bg: var(--colors-neutral-fill-10); --Table-onChecked-onHover-borderColor: var(--colors-neutral-line-8); --Table-onChecked-onHover-color: var(--colors-neutral-line-4); --Table-onDragging-opacity: 1; --Table-onDragging-bg: var(--table-body-hover-bg-color); --Table-onHover-bg-rgb: 245, 251, 255; --Table-onHover-bg: var(--table-body-hover-bg-color); --Table-onHover-borderColor: var(--table-border-color); --Table-onHover-boxShadow: var(--shadows-shadow-normal); --Table-onHover-color: var(--table-body-hover-color); --Table-onModified-bg: #e8f0fe; --Table-onModified-borderColor: rgb(207.5625, 224.0625, 252.9375); --Table-onModified-color: #4285f4; --Table-placeholder-height: 12.5rem; --Table-strip-bg: transparent; --Table-tbody-borderTopColor: var(--colors-neutral-line-9); --Table-thead-bg: var(--table-header-bg-color); --Table-thead-borderColor: var(--table-header-separate-line-color); --Table-thead-borderWidth: var(--table-header-separate-line-width); --Table-thead-color: var(--table-header-color); --Table-thead-fontSize: var(--table-header-fontSize); --Table-thead-iconColor: var(--colors-neutral-text-5); --Table-toolbar-marginX: 0.25rem; --Table-toolbar-marginY: var(--gap-base); --Table-tree-borderColor: var(--colors-neutral-line-8); --Table-tree-indent: var(--gap-lg); --Table-searchableForm-backgroundColor: var(--colors-neutral-fill-10); --Table-searchableForm-borderRadius: 0.25rem; --Table-empty-icon-size: 4.625rem; --TableRow-onDisabled-bg: var(--table-body-disabled-bg-color); --TableRow-onDisabled-color: var(--table-body-disabled-color); --TableCell--edge-paddingX: var(--gap-md); --TableCell--edge-paddingX-default: var(--table-paddingX); --TableCell-filterBtn--onActive-color: var(--colors-brand-5); --TableCell-filterBtn-width: 1rem; --TableCell-filterPopOver-dropDownItem-height: var(--sizes-base-15); --TableCell-filterPopOver-dropDownItem-padding: var(--sizes-size-0) var(--sizes-size-6); --TableCell-line-height-large: 2.5rem; --TableCell-line-height-middle: 1.875rem; --TableCell-height: 2.5rem; --TableCell-height-default: 2.5625rem; --TableCell-height-large: 3.8125rem; --TableCell-height-small: 2.0625rem; --TableCell-paddingX: var(--sizes-size-6); --TableCell-paddingX-large: var(--gap-base); --TableCell-paddingX-small: var(--gap-xs); --TableCell-paddingY: calc( (var(--TableCell-height) - var(--Table-fontSize) * var(--Table-lineHeight)) / 2 ); --TableCell-paddingY-default: calc( ( var(--TableCell-height-default) - var(--Table-fontSize) * var(--Table-lineHeight) ) / 2 ); --TableCell-paddingY-large: calc( ( var(--TableCell-height-large) - var(--Table-fontSize) * var(--Table-lineHeight) ) / 2 ); --TableCell-paddingY-small: calc( ( var(--TableCell-height-small) - var(--Table-fontSize) * var(--Table-lineHeight) ) / 2 ); --TableCell-searchBtn--onActive-color: var(--table-icon-active-color); --TableCell-searchBtn-width: 1rem; --TableCell-sortBtn--default-onActive-opacity: 1; --TableCell-sortBtn--default-opacity: 0; --TableCell-sortBtn--onActive-color: var(--table-icon-active-color); --TableCell-sortBtn-width: var(--sizes-size-8); --TableCell-icon-gap: var(--table-icon-marginLeft); --combo-bg-color: var(--colors-neutral-fill-11); --combo-vertical-top-border-color: var(--colors-neutral-line-8); --combo-vertical-top-border-width: var(--borders-width-2); --combo-vertical-top-border-style: var(--borders-style-3); --combo-vertical-right-border-color: var(--colors-neutral-line-8); --combo-vertical-right-border-width: var(--borders-width-2); --combo-vertical-right-border-style: var(--borders-style-3); --combo-vertical-bottom-border-color: var(--colors-neutral-line-8); --combo-vertical-bottom-border-width: var(--borders-width-2); --combo-vertical-bottom-border-style: var(--borders-style-3); --combo-vertical-left-border-color: var(--colors-neutral-line-8); --combo-vertical-left-border-width: var(--borders-width-2); --combo-vertical-left-border-style: var(--borders-style-3); --combo-vertical-top-left-border-radius: var(--borders-radius-1); --combo-vertical-top-right-border-radius: var(--borders-radius-1); --combo-vertical-bottom-right-border-radius: var(--borders-radius-1); --combo-vertical-bottom-left-border-radius: var(--borders-radius-1); --combo-vertical-hover-top-border-color: var(--colors-brand-5); --combo-vertical-hover-top-border-width: var(--borders-width-2); --combo-vertical-hover-top-border-style: var(--borders-style-3); --combo-vertical-hover-right-border-color: var(--colors-brand-5); --combo-vertical-hover-right-border-width: var(--borders-width-2); --combo-vertical-hover-right-border-style: var(--borders-style-3); --combo-vertical-hover-bottom-border-color: var(--colors-brand-5); --combo-vertical-hover-bottom-border-width: var(--borders-width-2); --combo-vertical-hover-bottom-border-style: var(--borders-style-3); --combo-vertical-hover-left-border-color: var(--colors-brand-5); --combo-vertical-hover-left-border-width: var(--borders-width-2); --combo-vertical-hover-left-border-style: var(--borders-style-3); --combo-vertical-paddingTop: var(--sizes-size-6); --combo-vertical-paddingRight: var(--sizes-size-6); --combo-vertical-paddingBottom: var(--sizes-size-6); --combo-vertical-paddingLeft: var(--sizes-size-6); --combo-multi-addBtn-color: var(--button-primary-default-font-color); --combo-multi-addBtn-fontSize: var(--fonts-size-8); --combo-multi-addBtn-fontWeight: var(--fonts-weight-6); --combo-multi-addBtn-lineHeight: var(--fonts-lineHeight-2); --combo-multi-addBtn-top-left-border-radius: var(--borders-radius-3); --combo-multi-addBtn-top-right-border-radius: var(--borders-radius-3); --combo-multi-addBtn-bottom-right-border-radius: var(--borders-radius-3); --combo-multi-addBtn-bottom-left-border-radius: var(--borders-radius-3); --combo-multi-addBtn-bg-color: var(--colors-brand-5); --combo-multi-addBtn-height: var(--sizes-base-13); --combo-multi-addBtn-paddingTop: var(--sizes-size-3); --combo-multi-addBtn-paddingRight: var(--sizes-size-5); --combo-multi-addBtn-paddingBottom: var(--sizes-size-3); --combo-multi-addBtn-paddingLeft: var(--sizes-size-5); --combo-multi-addBtn-hover-color: var(--button-primary-hover-font-color); --combo-multi-addBtn-hover-bg-color: var(--colors-brand-6); --combo-multi-addBtn-active-color: var(--button-primary-active-font-color); --combo-multi-addBtn-active-bg-color: var(--colors-brand-4); --combo-multi-delBtn-color: var(--colors-neutral-text-5); --combo-multi-delBtn-hover-color: var(--colors-neutral-text-2); --Combo--horizontal-dragger-top: var(--sizes-size-3); --Combo--horizontal-item-gap: var(--gap-xs); --Combo--vertical-item-borderColor: var(--combo-vertical-top-border-color) var(--combo-vertical-right-border-color) var(--combo-vertical-bottom-border-color) var(--combo-vertical-left-border-color); --Combo--vertical-item--onError-borderColor: var(--colors-error-5); --Combo--vertical-item-borderRadius: var( --combo-vertical-top-left-border-radius ) var(--combo-vertical-top-right-border-radius) var(--combo-vertical-bottom-right-border-radius) var(--combo-vertical-bottom-left-border-radius); --Combo--vertical-item-borderStyle: var(--combo-vertical-top-border-style) var(--combo-vertical-right-border-style) var(--combo-vertical-bottom-border-style) var(--combo-vertical-left-border-style); --Combo--vertical-item-borderWidth: var(--combo-vertical-top-border-width) var(--combo-vertical-right-border-width) var(--combo-vertical-bottom-border-width) var(--combo-vertical-left-border-width); --Combo--vertical-item-gap: var(--gap-xs); --Combo--vertical-item-onHover-borderColor: var( --combo-vertical-hover-top-border-color ) var(--combo-vertical-hover-right-border-color) var(--combo-vertical-hover-bottom-border-color) var(--combo-vertical-hover-left-border-color); --Combo--vertical-item-paddingX: 0.625rem; --Combo--vertical-item-paddingY: 0.625rem; --Combo-addBtn-bg: var(--combo-multi-addBtn-bg-color); --Combo-addBtn-border: var(--combo-multi-addBtn-bg-color); --Combo-addBtn-borderRadius: var(--borders-radius-3); --Combo-addBtn-color: var(--combo-multi-addBtn-color); --Combo-addBtn-fontSize: var(--combo-multi-addBtn-fontSize); --Combo-addBtn-fontWeight: var(--combo-multi-addBtn-fontWeight); --Combo-addBtn-height: var(--combo-multi-addBtn-height); --Combo-addBtn-lineHeight: var(--combo-multi-addBtn-lineHeight); --Combo-addBtn-onActive-bg: var(--combo-multi-addBtn-active-bg-color); --Combo-addBtn-onActive-border: var(--combo-multi-addBtn-active-bg-color); --Combo-addBtn-onActive-color: var(--combo-multi-addBtn-active-color); --Combo-addBtn-onHover-bg: var(--combo-multi-addBtn-hover-bg-color); --Combo-addBtn-onHover-border: var(--combo-multi-addBtn-hover-bg-color); --Combo-addBtn-onHover-color: var(--combo-multi-addBtn-hover-color); --Combo-addBtn-paddingX: var(--sizes-size-5); --Combo-addBtn-paddingY: calc( ( var(--Combo-addBtn-height) - var(--borders-width-2) * 2 - var(--Combo-addBtn-lineHeight) * var(--Combo-addBtn-fontSize) ) / 2 ); --Combo-items-marginBottom: var(--gap-sm); --Combo-toolbarBtn-color: var(--icon-color); --Combo-toolbarBtn-height: var(--gap-md); --Combo-toolbarBtn-lineHeight: 1; --Combo-toolbarBtn-onHover-color: var(--colors-neutral-text-4); --Combo-toolbarBtn-paddingX: var(--gap-xs); --Combo-toolbarBtn-paddingY: 0.125rem; --Wizard-badge-size: var(--sizes-base-13); --Wizard-badge-fontSize: var(--fonts-size-7); --Wizard-badge-color: var(--colors-neutral-text-6); --Wizard-badge-border-width: var(--borders-width-2); --Wizard-badge-border-color: var(--colors-neutral-line-6); --Wizard-badge-bg-color: var(--colors-neutral-fill-11); --Wizard-badge-onActive-color: var(--colors-neutral-text-11); --Wizard-badge-onActive-bg-color: var(--colors-neutral-fill-3); --Wizard-badge-text-margin: var(--sizes-size-4); --Wizard-step-fontSize: var(--fonts-size-7); --Wizard-step-color: var(--colors-neutral-text-6); --Wizard-step-paddingTop: var(--sizes-size-6); --Wizard-step-paddingRight: var(--sizes-size-0); --Wizard-step-paddingBottom: var(--sizes-size-6); --Wizard-step-paddingLeft: var(--sizes-size-0); --Wizard-step-bg-color: var(--colors-neutral-fill-11); --Wizard-step-li-onActive-color: var(--colors-neutral-text-3); --Wizard-step-li-onActive-bg-color: var(--colors-neutral-fill-11); --Wizard-after-color: var(--colors-neutral-text-11); --Wizard-after-onActive-color: var(--colors-neutral-fill-11); --Wizard-stepContent-paddingTop: var(--sizes-size-7); --Wizard-stepContent-paddingRight: var(--sizes-size-7); --Wizard-stepContent-paddingBottom: var(--sizes-size-7); --Wizard-stepContent-paddingLeft: var(--sizes-size-7); --Wizard-badge-bg: var(--Wizard-badge-bg-color); --Wizard-badge-border: var(--Wizard-badge-border-width) var(--borders-style-2) var(--Wizard-badge-border-color); --Wizard-badge-borderRadius: var(--borders-radius-7); --Wizard-badge-marginRight: var(--Wizard-badge-text-margin); --Wizard-badge-onActive-backgroundColor: var( --Wizard-badge-onActive-bg-color ); --Wizard-badge-onComplete-backgroundColor: var( --Wizard-badge-onActive-bg-color ); --Wizard-badge-onComplete-color: var(--Wizard-badge-onActive-color); --Wizard-steps-bg--isComplete: var(--colors-neutral-fill-11); --Wizard-steps-bg: var(--Wizard-step-bg-color); --Wizard-steps-borderWidth: var(--borders-width-1); --Wizard-steps-height: var(--sizes-base-30); --Wizard-steps-li-onActive-arrow-bg: var(--Wizard-after-onActive-color); --Wizard-steps-li-onActive-bg: var(--Wizard-step-li-onActive-bg-color); --Wizard-steps-li-onActive-color: var(--Wizard-step-li-onActive-color); --Wizard-steps-liAfterContent: ""; --Wizard-steps-liVender: "iconfont"; --Wizard-steps-padding: var(--Wizard-step-paddingTop) var(--Wizard-step-paddingRight) var(--Wizard-step-paddingBottom) var(--Wizard-step-paddingLeft); --Wizard-steps-textAlign: center; --Wizard-steps-ulDisplay: inline-block; --Wizard-stepsContent-padding: var(--Wizard-stepContent-paddingTop) var(--Wizard-stepContent-paddingRight) var(--Wizard-stepContent-paddingBottom) var(--Wizard-stepContent-paddingLeft); --common-popover-border: var(--borders-width-2) solid var(--colors-neutral-fill-9); --Form-static-fontSize: var(--fonts-size-7); --Form-static-color: var(--colors-neutral-text-2); --Form-static-lineHeight: var(--fonts-lineHeight-2); --Form-static-fontWeight: var(--fonts-weight-6); } :root { --colors-neutral-fill-none: translate; --colors-error-1: #590410; --colors-error-2: #800d18; --colors-error-3: #a61922; --colors-error-4: #cc292e; --colors-error-5: #f23d3d; --colors-error-6: #ff6966; --colors-error-7: #ff908c; --colors-error-8: #ffb6b3; --colors-error-9: #ffdbd9; --colors-error-10: #ffe8e6; --colors-warning-1: #662500; --colors-warning-2: #8c3800; --colors-warning-3: #b35209; --colors-warning-4: #d97116; --colors-warning-5: #ff9326; --colors-warning-6: #ffab52; --colors-warning-7: #ffc27d; --colors-warning-8: #ffd8a8; --colors-warning-9: #ffecd4; --colors-warning-10: #fff4e6; --colors-success-1: #012600; --colors-success-2: #054d00; --colors-success-3: #0b7300; --colors-success-4: #1b9908; --colors-success-5: #30bf13; --colors-success-6: #54cc39; --colors-success-7: #7bd964; --colors-success-8: #a5e693; --colors-success-9: #d1f2c7; --colors-success-10: #ecffe6; --colors-link-1: #001259; --colors-link-2: #001e80; --colors-link-3: #0832a6; --colors-link-4: #144bcc; --colors-link-5: #2468f2; --colors-link-6: #528eff; --colors-link-7: #7dadff; --colors-link-8: #a8caff; --colors-link-9: #d4e5ff; --colors-link-10: #e6f0ff; --colors-info-1: #001259; --colors-info-2: #001e80; --colors-info-3: #0832a6; --colors-info-4: #144bcc; --colors-info-5: #2468f2; --colors-info-6: #528eff; --colors-info-7: #7dadff; --colors-info-8: #a8caff; --colors-info-9: #d4e5ff; --colors-info-10: #e6f0ff; --colors-other-1: #001259; --colors-other-2: #001e80; --colors-other-3: #0832a6; --colors-other-4: #144bcc; --colors-other-5: #2468f2; --colors-other-6: #528eff; --colors-other-7: #7dadff; --colors-other-8: #a8caff; --colors-other-9: #d4e5ff; --colors-other-10: #e6f0ff; --colors-brand-1: #001259; --colors-brand-2: #001e80; --colors-brand-3: #0832a6; --colors-brand-4: #144bcc; --colors-brand-5: #2468f2; --colors-brand-6: #528eff; --colors-brand-7: #7dadff; --colors-brand-8: #a8caff; --colors-brand-9: #d4e5ff; --colors-brand-10: #e6f0ff; --colors-neutral-text-1: #070c14; --colors-neutral-text-2: #151b26; --colors-neutral-text-3: #303540; --colors-neutral-text-4: #5c5f66; --colors-neutral-text-5: #84878c; --colors-neutral-text-6: #b8babf; --colors-neutral-text-7: #d4d6d9; --colors-neutral-text-8: #e8e9eb; --colors-neutral-text-9: #f2f3f5; --colors-neutral-text-10: #f7f8fa; --colors-neutral-text-11: #ffffff; --colors-neutral-fill-none: transparent; --colors-neutral-fill-1: #070c14; --colors-neutral-fill-2: #151b26; --colors-neutral-fill-3: #303540; --colors-neutral-fill-4: #5c5f66; --colors-neutral-fill-5: #84878c; --colors-neutral-fill-6: #b8babf; --colors-neutral-fill-7: #d4d6d9; --colors-neutral-fill-8: #e8e9eb; --colors-neutral-fill-9: #f2f3f5; --colors-neutral-fill-10: #f7f8fa; --colors-neutral-fill-11: #ffffff; --colors-neutral-fill-12: #eef3fe; --colors-neutral-line-1: #070c14; --colors-neutral-line-2: #151b26; --colors-neutral-line-3: #303540; --colors-neutral-line-4: #5c5f66; --colors-neutral-line-5: #84878c; --colors-neutral-line-6: #b8babf; --colors-neutral-line-7: #d4d6d9; --colors-neutral-line-8: #e8e9eb; --colors-neutral-line-9: #f2f3f5; --colors-neutral-line-10: #f7f8fa; --colors-neutral-line-11: #ffffff; --fonts-base-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; --fonts-size-1: 48px; --fonts-size-2: 40px; --fonts-size-3: 32px; --fonts-size-4: 24px; --fonts-size-5: 18px; --fonts-size-6: 16px; --fonts-size-7: 14px; --fonts-size-8: 12px; --fonts-size-9: 12px; --fonts-weight-1: 900; --fonts-weight-2: 800; --fonts-weight-3: 700; --fonts-weight-4: 600; --fonts-weight-5: 500; --fonts-weight-6: 400; --fonts-weight-7: 300; --fonts-weight-8: 200; --fonts-weight-9: 100; --fonts-lineHeight-1: 1.3; --fonts-lineHeight-2: 1.5; --fonts-lineHeight-3: 1.7; --borders-style-1: none; --borders-style-2: solid; --borders-style-3: dashed; --borders-style-4: dotted; --borders-width-1: 0px; --borders-width-2: 1px; --borders-width-3: 2px; --borders-width-4: 4px; --borders-radius-1: 0px; --borders-radius-2: 2px; --borders-radius-3: 4px; --borders-radius-4: 6px; --borders-radius-5: 8px; --borders-radius-6: 10px; --borders-radius-7: 50%; --sizes-size-0: 0rem; --sizes-size-1: auto; --sizes-size-2: 0.125rem; --sizes-size-3: 0.25rem; --sizes-size-4: 0.375rem; --sizes-size-5: 0.5rem; --sizes-size-6: 0.625rem; --sizes-size-7: 0.75rem; --sizes-size-8: 0.875rem; --sizes-size-9: 1rem; --sizes-base-1: 0.125rem; --sizes-base-2: 0.25rem; --sizes-base-3: 0.375rem; --sizes-base-4: 0.5rem; --sizes-base-5: 0.625rem; --sizes-base-6: 0.75rem; --sizes-base-7: 0.875rem; --sizes-base-8: 1rem; --sizes-base-9: 1.125rem; --sizes-base-10: 1.25rem; --sizes-base-11: 1.375rem; --sizes-base-12: 1.5rem; --sizes-base-13: 1.625rem; --sizes-base-14: 1.75rem; --sizes-base-15: 1.875rem; --sizes-base-16: 2rem; --sizes-base-17: 2.125rem; --sizes-base-18: 2.25rem; --sizes-base-19: 2.375rem; --sizes-base-20: 2.5rem; --sizes-base-21: 2.625rem; --sizes-base-22: 2.75rem; --sizes-base-23: 2.875rem; --sizes-base-24: 3rem; --sizes-base-25: 3.125rem; --sizes-base-26: 3.25rem; --sizes-base-27: 3.375rem; --sizes-base-28: 3.5rem; --sizes-base-29: 3.625rem; --sizes-base-30: 3.75rem; --sizes-base-31: 3.875rem; --sizes-base-32: 4rem; --sizes-base-33: 4.125rem; --sizes-base-34: 4.25rem; --sizes-base-35: 4.375rem; --sizes-base-36: 4.5rem; --sizes-base-37: 4.625rem; --sizes-base-38: 4.75rem; --sizes-base-39: 4.875rem; --sizes-base-40: 5rem; --sizes-base-41: 5.125rem; --sizes-base-42: 5.25rem; --sizes-base-43: 5.375rem; --sizes-base-44: 5.5rem; --sizes-base-45: 5.625rem; --sizes-base-46: 5.75rem; --sizes-base-47: 5.875rem; --sizes-base-48: 6rem; --sizes-base-49: 6.125rem; --sizes-base-50: 6.25rem; --shadows-shadow-none: 0px 0px 0px 0px transparent; --shadows-shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05); --shadows-shadow-normal: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06); --shadows-shadow-md: 0px 4px -1px 0px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06); --shadows-shadow-lg: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05); --shadows-shadow-xl: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 10px 10px -5px rgba(0, 0, 0, 0.04); --shadows-shadow-2xl: 0px 25px 50px -12px rgba(0, 0, 0, 0.25); } /* BASICS */ .CodeMirror { /* Set height, width, borders, and global font properties here */ font-family: monospace; height: 300px; color: black; direction: ltr; } /* PADDING */ .CodeMirror-lines { padding: 4px 0; /* Vertical padding around content */ } .CodeMirror pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like { padding: 0 4px; /* Horizontal padding of content */ } .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { background-color: white; /* The little square between H and V scrollbars */ } /* GUTTER */ .CodeMirror-gutters { border-right: 1px solid #ddd; background-color: #f7f7f7; white-space: nowrap; } .CodeMirror-linenumber { padding: 0 3px 0 5px; min-width: 20px; text-align: right; color: #999; white-space: nowrap; } .CodeMirror-guttermarker { color: black; } .CodeMirror-guttermarker-subtle { color: #999; } /* CURSOR */ .CodeMirror-cursor { border-left: 1px solid black; border-right: none; width: 0; } /* Shown when moving in bi-directional text */ .CodeMirror div.CodeMirror-secondarycursor { border-left: 1px solid silver; } .cm-fat-cursor .CodeMirror-cursor { width: auto; border: 0 !important; background: #7e7; } .cm-fat-cursor div.CodeMirror-cursors { z-index: 1; } .cm-fat-cursor .CodeMirror-line::-moz-selection, .cm-fat-cursor .CodeMirror-line > span::-moz-selection, .cm-fat-cursor .CodeMirror-line > span > span::-moz-selection { background: transparent; } .cm-fat-cursor .CodeMirror-line::selection, .cm-fat-cursor .CodeMirror-line > span::selection, .cm-fat-cursor .CodeMirror-line > span > span::selection { background: transparent; } .cm-fat-cursor .CodeMirror-line::-moz-selection, .cm-fat-cursor .CodeMirror-line > span::-moz-selection, .cm-fat-cursor .CodeMirror-line > span > span::-moz-selection { background: transparent; } .cm-fat-cursor { caret-color: transparent; } @keyframes blink { 50% { background-color: transparent; } } /* Can style cursor different in overwrite (non-insert) mode */ .cm-tab { display: inline-block; text-decoration: inherit; } .CodeMirror-rulers { position: absolute; left: 0; right: 0; top: -50px; bottom: 0; overflow: hidden; } .CodeMirror-ruler { border-left: 1px solid #ccc; top: 0; bottom: 0; position: absolute; } /* DEFAULT THEME */ .cm-s-default .cm-header { color: blue; } .cm-s-default .cm-quote { color: #090; } .cm-negative { color: #d44; } .cm-positive { color: #292; } .cm-header, .cm-strong { font-weight: bold; } .cm-em { font-style: italic; } .cm-link { text-decoration: underline; } .cm-strikethrough { text-decoration: line-through; } .cm-s-default .cm-keyword { color: #708; } .cm-s-default .cm-atom { color: #219; } .cm-s-default .cm-number { color: #164; } .cm-s-default .cm-def { color: #00f; } .cm-s-default .cm-variable-2 { color: #05a; } .cm-s-default .cm-variable-3, .cm-s-default .cm-type { color: #085; } .cm-s-default .cm-comment { color: #a50; } .cm-s-default .cm-string { color: #a11; } .cm-s-default .cm-string-2 { color: #f50; } .cm-s-default .cm-meta { color: #555; } .cm-s-default .cm-qualifier { color: #555; } .cm-s-default .cm-builtin { color: #30a; } .cm-s-default .cm-bracket { color: #997; } .cm-s-default .cm-tag { color: #170; } .cm-s-default .cm-attribute { color: #00c; } .cm-s-default .cm-hr { color: #999; } .cm-s-default .cm-link { color: #00c; } .cm-s-default .cm-error { color: #f00; } .cm-invalidchar { color: #f00; } .CodeMirror-composing { border-bottom: 2px solid; } /* Default styles for common addons */ div.CodeMirror span.CodeMirror-matchingbracket { color: #0b0; } div.CodeMirror span.CodeMirror-nonmatchingbracket { color: #a22; } .CodeMirror-matchingtag { background: rgba(255, 150, 0, 0.3); } .CodeMirror-activeline-background { background: #e8f2ff; } /* STOP */ /* The rest of this file contains styles related to the mechanics of the editor. You probably shouldn't touch them. */ .CodeMirror { position: relative; overflow: hidden; background: white; } .CodeMirror-scroll { overflow: scroll !important; /* Things will break if this is overridden */ /* 50px is the magic margin used to hide the element's real scrollbars */ /* See overflow: hidden in .CodeMirror */ margin-bottom: -50px; margin-right: -50px; padding-bottom: 50px; height: 100%; outline: none; /* Prevent dragging from highlighting the element */ position: relative; z-index: 0; } .CodeMirror-sizer { position: relative; border-right: 50px solid transparent; } /* The fake, visible scrollbars. Used to force redraw during scrolling before actual scrolling happens, thus preventing shaking and flickering artifacts. */ .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { position: absolute; z-index: 6; display: none; outline: none; } .CodeMirror-vscrollbar { right: 0; top: 0; overflow-x: hidden; overflow-y: scroll; } .CodeMirror-hscrollbar { bottom: 0; left: 0; overflow-y: hidden; overflow-x: scroll; } .CodeMirror-scrollbar-filler { right: 0; bottom: 0; } .CodeMirror-gutter-filler { left: 0; bottom: 0; } .CodeMirror-gutters { position: absolute; left: 0; top: 0; min-height: 100%; z-index: 3; } .CodeMirror-gutter { white-space: normal; height: 100%; display: inline-block; vertical-align: top; margin-bottom: -50px; } .CodeMirror-gutter-wrapper { position: absolute; z-index: 4; background: none !important; border: none !important; } .CodeMirror-gutter-background { position: absolute; top: 0; bottom: 0; z-index: 4; } .CodeMirror-gutter-elt { position: absolute; cursor: default; z-index: 4; } .CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent; } .CodeMirror-gutter-wrapper ::selection { background-color: transparent; } .CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent; } .CodeMirror-lines { cursor: text; min-height: 1px; /* prevents collapsing before first draw */ } .CodeMirror pre.CodeMirror-line, .CodeMirror pre.CodeMirror-line-like { /* Reset some styles that the rest of the page might have set */ border-radius: 0; border-width: 0; background: transparent; font-family: inherit; font-size: inherit; margin: 0; white-space: pre; word-wrap: normal; line-height: inherit; color: inherit; z-index: 2; position: relative; overflow: visible; -webkit-tap-highlight-color: transparent; font-variant-ligatures: contextual; } .CodeMirror-wrap pre.CodeMirror-line, .CodeMirror-wrap pre.CodeMirror-line-like { word-wrap: break-word; white-space: pre-wrap; word-break: normal; } .CodeMirror-linebackground { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; } .CodeMirror-linewidget { position: relative; z-index: 2; padding: 0.1px; /* Force widget margins to stay inside of the container */ } .CodeMirror-rtl pre { direction: rtl; } .CodeMirror-code { outline: none; } /* Force content-box sizing for the elements where we expect it */ .CodeMirror-scroll, .CodeMirror-sizer, .CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber { box-sizing: content-box; } .CodeMirror-measure { position: absolute; width: 100%; height: 0; overflow: hidden; visibility: hidden; } .CodeMirror-cursor { position: absolute; pointer-events: none; } .CodeMirror-measure pre { position: static; } div.CodeMirror-cursors { visibility: hidden; position: relative; z-index: 3; } div.CodeMirror-dragcursors { visibility: visible; } .CodeMirror-focused div.CodeMirror-cursors { visibility: visible; } .CodeMirror-selected { background: #d9d9d9; } .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; } .CodeMirror-crosshair { cursor: crosshair; } .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; } .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; } .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; } .cm-searching { background-color: #ffa; background-color: rgba(255, 255, 0, 0.4); } /* Used to force a border model for a node */ .cm-force-border { padding-right: 0.1px; } @media print { /* Hide the cursor when printing */ .CodeMirror div.CodeMirror-cursors { visibility: hidden; } } /* See issue #2901 */ .cm-tab-wrap-hack:after { content: ""; } /* Help users use markselection to safely style text background */ span.CodeMirror-selectedtext { background: none; } /* Name: Base16 Default Dark Author: Chris Kempson (http://chriskempson.com) CodeMirror template by Jan T. Sott (https://github.com/idleberg/base16-codemirror) Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */ .cm-s-base16-dark.CodeMirror { background: #151515; color: #e0e0e0; } .cm-s-base16-dark div.CodeMirror-selected { background: #303030; } .cm-s-base16-dark .CodeMirror-line::-moz-selection, .cm-s-base16-dark .CodeMirror-line > span::-moz-selection, .cm-s-base16-dark .CodeMirror-line > span > span::-moz-selection { background: rgba(48, 48, 48, 0.99); } .cm-s-base16-dark .CodeMirror-line::selection, .cm-s-base16-dark .CodeMirror-line > span::selection, .cm-s-base16-dark .CodeMirror-line > span > span::selection { background: rgba(48, 48, 48, 0.99); } .cm-s-base16-dark .CodeMirror-line::-moz-selection, .cm-s-base16-dark .CodeMirror-line > span::-moz-selection, .cm-s-base16-dark .CodeMirror-line > span > span::-moz-selection { background: rgba(48, 48, 48, 0.99); } .cm-s-base16-dark .CodeMirror-gutters { background: #151515; border-right: 0px; } .cm-s-base16-dark .CodeMirror-guttermarker { color: #ac4142; } .cm-s-base16-dark .CodeMirror-guttermarker-subtle { color: #505050; } .cm-s-base16-dark .CodeMirror-linenumber { color: #505050; } .cm-s-base16-dark .CodeMirror-cursor { border-left: 1px solid #b0b0b0; } .cm-s-base16-dark.cm-fat-cursor .CodeMirror-cursor { background-color: rgba(142, 141, 136, 0.4588235294) !important; } .cm-s-base16-dark .cm-animate-fat-cursor { background-color: rgba(142, 141, 136, 0.4588235294) !important; } .cm-s-base16-dark span.cm-comment { color: #8f5536; } .cm-s-base16-dark span.cm-atom { color: #aa759f; } .cm-s-base16-dark span.cm-number { color: #aa759f; } .cm-s-base16-dark span.cm-property, .cm-s-base16-dark span.cm-attribute { color: #90a959; } .cm-s-base16-dark span.cm-keyword { color: #ac4142; } .cm-s-base16-dark span.cm-string { color: #f4bf75; } .cm-s-base16-dark span.cm-variable { color: #90a959; } .cm-s-base16-dark span.cm-variable-2 { color: #6a9fb5; } .cm-s-base16-dark span.cm-def { color: #d28445; } .cm-s-base16-dark span.cm-bracket { color: #e0e0e0; } .cm-s-base16-dark span.cm-tag { color: #ac4142; } .cm-s-base16-dark span.cm-link { color: #aa759f; } .cm-s-base16-dark span.cm-error { background: #ac4142; color: #b0b0b0; } .cm-s-base16-dark .CodeMirror-activeline-background { background: #202020; } .cm-s-base16-dark .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; } /** Name: IDEA default theme From IntelliJ IDEA by JetBrains */ .cm-s-idea span.cm-meta { color: #808000; } .cm-s-idea span.cm-number { color: #0000FF; } .cm-s-idea span.cm-keyword { line-height: 1em; font-weight: bold; color: #000080; } .cm-s-idea span.cm-atom { font-weight: bold; color: #000080; } .cm-s-idea span.cm-def { color: #000000; } .cm-s-idea span.cm-variable { color: black; } .cm-s-idea span.cm-variable-2 { color: black; } .cm-s-idea span.cm-variable-3, .cm-s-idea span.cm-type { color: black; } .cm-s-idea span.cm-property { color: black; } .cm-s-idea span.cm-operator { color: black; } .cm-s-idea span.cm-comment { color: #808080; } .cm-s-idea span.cm-string { color: #008000; } .cm-s-idea span.cm-string-2 { color: #008000; } .cm-s-idea span.cm-qualifier { color: #555; } .cm-s-idea span.cm-error { color: #FF0000; } .cm-s-idea span.cm-attribute { color: #0000FF; } .cm-s-idea span.cm-tag { color: #000080; } .cm-s-idea span.cm-link { color: #0000FF; } .cm-s-idea .CodeMirror-activeline-background { background: #FFFAE3; } .cm-s-idea span.cm-builtin { color: #30a; } .cm-s-idea span.cm-bracket { color: #cc7; } .cm-s-idea { font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif; } .cm-s-idea .CodeMirror-matchingbracket { outline: 1px solid grey; color: black !important; } .CodeMirror-hints.idea { font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: #616569; background-color: #ebf3fd !important; } .CodeMirror-hints.idea .CodeMirror-hint-active { background-color: #a2b8c9 !important; color: #5c6065 !important; } /*! * froala_editor v3.1.0 (https://www.froala.com/wysiwyg-editor) * License https://froala.com/wysiwyg-editor/terms/ * Copyright 2014-2020 Froala Labs */ .clearfix::after { clear: both; display: block; content: ""; height: 0; } .hide-by-clipping { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } img.fr-rounded, .fr-img-caption.fr-rounded img { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } img.fr-bordered, .fr-img-caption.fr-bordered img { border: solid 5px #CCC; } img.fr-bordered { box-sizing: content-box; } .fr-img-caption.fr-bordered img { box-sizing: border-box; } .fr-view { word-wrap: break-word; } .fr-view span[style~="color:"] a { color: inherit; } .fr-view strong { font-weight: 700; } .fr-view table { border: none; border-collapse: collapse; empty-cells: show; max-width: 100%; } .fr-view table td { min-width: 5px; } .fr-view table.fr-dashed-borders td, .fr-view table.fr-dashed-borders th { border-style: dashed; } .fr-view table.fr-alternate-rows tbody tr:nth-child(2n) { background: whitesmoke; } .fr-view table td, .fr-view table th { border: 1px solid #DDD; } .fr-view table td:empty, .fr-view table th:empty { height: 20px; } .fr-view table td.fr-highlighted, .fr-view table th.fr-highlighted { border: 1px double red; } .fr-view table td.fr-thick, .fr-view table th.fr-thick { border-width: 2px; } .fr-view table th { background: #ececec; } .fr-view hr { clear: both; user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-column-break-after: always; break-after: always; page-break-after: always; } .fr-view .fr-file { position: relative; } .fr-view .fr-file::after { position: relative; content: "📎"; font-weight: normal; } .fr-view pre { white-space: pre-wrap; word-wrap: break-word; overflow: visible; } .fr-view[dir=rtl] blockquote { border-left: none; border-right: solid 2px #5E35B1; margin-right: 0; padding-right: 5px; padding-left: 0; } .fr-view[dir=rtl] blockquote blockquote { border-color: #00BCD4; } .fr-view[dir=rtl] blockquote blockquote blockquote { border-color: #43A047; } .fr-view blockquote { border-left: solid 2px #5E35B1; margin-left: 0; padding-left: 5px; color: #5E35B1; } .fr-view blockquote blockquote { border-color: #00BCD4; color: #00BCD4; } .fr-view blockquote blockquote blockquote { border-color: #43A047; color: #43A047; } .fr-view span.fr-emoticon { font-weight: normal; font-family: "Apple Color Emoji", "Segoe UI Emoji", "NotoColorEmoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; display: inline; line-height: 0; } .fr-view span.fr-emoticon.fr-emoticon-img { background-repeat: no-repeat !important; font-size: inherit; height: 1em; width: 1em; min-height: 20px; min-width: 20px; display: inline-block; margin: -0.1em 0.1em 0.1em; line-height: 1; vertical-align: middle; } .fr-view .fr-text-gray { color: #AAA !important; } .fr-view .fr-text-bordered { border-top: solid 1px #222; border-bottom: solid 1px #222; padding: 10px 0; } .fr-view .fr-text-spaced { letter-spacing: 1px; } .fr-view .fr-text-uppercase { text-transform: uppercase; } .fr-view .fr-class-highlighted { background-color: #ffff00; } .fr-view .fr-class-code { border-color: #cccccc; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; background: #f5f5f5; padding: 10px; font-family: "Courier New", Courier, monospace; } .fr-view .fr-class-transparency { opacity: 0.5; } .fr-view img { position: relative; max-width: 100%; } .fr-view img.fr-dib { margin: 5px auto; display: block; float: none; vertical-align: top; } .fr-view img.fr-dib.fr-fil { margin-left: 0; text-align: left; } .fr-view img.fr-dib.fr-fir { margin-right: 0; text-align: right; } .fr-view img.fr-dii { display: inline-block; float: none; vertical-align: bottom; margin-left: 5px; margin-right: 5px; max-width: calc(100% - 10px); } .fr-view img.fr-dii.fr-fil { float: left; margin: 5px 5px 5px 0; max-width: calc(100% - 5px); } .fr-view img.fr-dii.fr-fir { float: right; margin: 5px 0 5px 5px; max-width: calc(100% - 5px); } .fr-view span.fr-img-caption { position: relative; max-width: 100%; } .fr-view span.fr-img-caption.fr-dib { margin: 5px auto; display: block; float: none; vertical-align: top; } .fr-view span.fr-img-caption.fr-dib.fr-fil { margin-left: 0; text-align: left; } .fr-view span.fr-img-caption.fr-dib.fr-fir { margin-right: 0; text-align: right; } .fr-view span.fr-img-caption.fr-dii { display: inline-block; float: none; vertical-align: bottom; margin-left: 5px; margin-right: 5px; max-width: calc(100% - 10px); } .fr-view span.fr-img-caption.fr-dii.fr-fil { float: left; margin: 5px 5px 5px 0; max-width: calc(100% - 5px); } .fr-view span.fr-img-caption.fr-dii.fr-fir { float: right; margin: 5px 0 5px 5px; max-width: calc(100% - 5px); } .fr-view .fr-video { text-align: center; position: relative; } .fr-view .fr-video.fr-rv { padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .fr-view .fr-video.fr-rv > iframe, .fr-view .fr-video.fr-rv object, .fr-view .fr-video.fr-rv embed { position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; } .fr-view .fr-video > * { box-sizing: content-box; max-width: 100%; border: none; } .fr-view .fr-video.fr-dvb { display: block; clear: both; } .fr-view .fr-video.fr-dvb.fr-fvl { text-align: left; } .fr-view .fr-video.fr-dvb.fr-fvr { text-align: right; } .fr-view .fr-video.fr-dvi { display: inline-block; } .fr-view .fr-video.fr-dvi.fr-fvl { float: left; } .fr-view .fr-video.fr-dvi.fr-fvr { float: right; } .fr-view a.fr-strong { font-weight: 700; } .fr-view a.fr-green { color: green; } .fr-view .fr-img-caption { text-align: center; } .fr-view .fr-img-caption .fr-img-wrap { padding: 0; margin: auto; text-align: center; width: 100%; } .fr-view .fr-img-caption .fr-img-wrap img { display: block; margin: auto; width: 100%; } .fr-view .fr-img-caption .fr-img-wrap > span { margin: auto; display: block; padding: 5px 5px 10px; font-size: 14px; font-weight: initial; box-sizing: border-box; -webkit-opacity: 0.9; -moz-opacity: 0.9; opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; width: 100%; text-align: center; } .fr-view button.fr-rounded, .fr-view input.fr-rounded, .fr-view textarea.fr-rounded { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .fr-view button.fr-large, .fr-view input.fr-large, .fr-view textarea.fr-large { font-size: 24px; } a.fr-view.fr-strong { font-weight: 700; } a.fr-view.fr-green { color: green; } img.fr-view { position: relative; max-width: 100%; } img.fr-view.fr-dib { margin: 5px auto; display: block; float: none; vertical-align: top; } img.fr-view.fr-dib.fr-fil { margin-left: 0; text-align: left; } img.fr-view.fr-dib.fr-fir { margin-right: 0; text-align: right; } img.fr-view.fr-dii { display: inline-block; float: none; vertical-align: bottom; margin-left: 5px; margin-right: 5px; max-width: calc(100% - 10px); } img.fr-view.fr-dii.fr-fil { float: left; margin: 5px 5px 5px 0; max-width: calc(100% - 5px); } img.fr-view.fr-dii.fr-fir { float: right; margin: 5px 0 5px 5px; max-width: calc(100% - 5px); } span.fr-img-caption.fr-view { position: relative; max-width: 100%; } span.fr-img-caption.fr-view.fr-dib { margin: 5px auto; display: block; float: none; vertical-align: top; } span.fr-img-caption.fr-view.fr-dib.fr-fil { margin-left: 0; text-align: left; } span.fr-img-caption.fr-view.fr-dib.fr-fir { margin-right: 0; text-align: right; } span.fr-img-caption.fr-view.fr-dii { display: inline-block; float: none; vertical-align: bottom; margin-left: 5px; margin-right: 5px; max-width: calc(100% - 10px); } span.fr-img-caption.fr-view.fr-dii.fr-fil { float: left; margin: 5px 5px 5px 0; max-width: calc(100% - 5px); } span.fr-img-caption.fr-view.fr-dii.fr-fir { float: right; margin: 5px 0 5px 5px; max-width: calc(100% - 5px); } /*! * froala_editor v3.1.0 (https://www.froala.com/wysiwyg-editor) * License https://froala.com/wysiwyg-editor/terms/ * Copyright 2014-2020 Froala Labs */ .clearfix::after { clear: both; display: block; content: ""; height: 0; } .hide-by-clipping { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .fr-element, .fr-element:focus { outline: 0 solid transparent; } .fr-box.fr-basic { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .fr-box.fr-basic .fr-element { font-family: sans-serif; color: #414141; font-size: 14px; line-height: 1.6; padding: 20px; box-sizing: border-box; overflow-x: auto; min-height: 60px; text-align: left; } .fr-box.fr-basic.fr-rtl .fr-element { text-align: right; } .fr-element { background: transparent; position: relative; z-index: 2; -webkit-user-select: auto; } .fr-element a { user-select: auto; -o-user-select: auto; -moz-user-select: auto; -khtml-user-select: auto; -webkit-user-select: auto; -ms-user-select: auto; } .fr-element.fr-disabled { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .fr-element [contenteditable=true] { outline: 0 solid transparent; } .fr-box a.fr-floating-btn { box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; height: 40px; width: 40px; text-align: center; background: #FFF; color: #333333; -webkit-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s; -moz-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s; -ms-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s; -o-transition: background 0.2s ease 0s, color 0.2s ease 0s, transform 0.2s ease 0s; outline: none; left: 0; top: 0; line-height: 40px; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); text-align: center; display: block; box-sizing: border-box; border: none; } .fr-box a.fr-floating-btn svg { -webkit-transition: transform 0.2s ease 0s; -moz-transition: transform 0.2s ease 0s; -ms-transition: transform 0.2s ease 0s; -o-transition: transform 0.2s ease 0s; fill: #333333; } .fr-box a.fr-floating-btn i, .fr-box a.fr-floating-btn svg { font-size: 14px; line-height: 40px; } .fr-box a.fr-floating-btn.fr-btn + .fr-btn { margin-left: 10px; } .fr-box a.fr-floating-btn:hover { background: #ebebeb; cursor: pointer; } .fr-box a.fr-floating-btn:hover svg { fill: #333333; } .fr-box .fr-visible a.fr-floating-btn { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } iframe.fr-iframe { width: 100%; border: none; position: relative; display: block; z-index: 2; box-sizing: border-box; } .fr-wrapper { position: relative; z-index: 1; } .fr-wrapper::after { clear: both; display: block; content: ""; height: 0; } .fr-wrapper .fr-placeholder { position: absolute; font-size: 14px; color: #AAA; font-family: sans-serif; z-index: 1; display: none; top: 0; left: 0; right: 0; overflow: hidden; } .fr-wrapper.show-placeholder .fr-placeholder { display: block; white-space: nowrap; text-overflow: ellipsis; } .fr-wrapper ::-moz-selection { background: #b5d6fd; color: #000; } .fr-wrapper ::selection { background: #b5d6fd; color: #000; } .fr-box.fr-basic .fr-wrapper { background: #FFF; border: 1px solid #CCCCCC; border-bottom-color: #efefef; top: 0; left: 0; } .fr-box.fr-basic.fr-top .fr-wrapper { border-top: 0; } .fr-box.fr-basic.fr-bottom .fr-wrapper { border-bottom: 0; border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } @media (min-width: 992px) { .fr-box.fr-document { min-width: 21cm; } .fr-box.fr-document .fr-wrapper { text-align: left; padding: 30px; min-width: 21cm; background: #efefef; } .fr-box.fr-document .fr-wrapper .fr-element { text-align: left; background: #FFF; width: 21cm; margin: auto; min-height: 26cm !important; padding: 1cm 2cm; overflow: visible; z-index: auto; } .fr-box.fr-document .fr-wrapper .fr-element hr { margin-left: -2cm; margin-right: -2cm; background: #efefef; height: 1cm; outline: none; border: none; } .fr-box.fr-document .fr-wrapper .fr-element img { z-index: 1; } } .fr-tooltip { position: absolute; top: 0; left: 0; padding: 0 8px; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; background: #222222; color: #FFF; font-size: 11px; line-height: 22px; font-family: Arial, Helvetica, sans-serif; -webkit-transition: opacity 0.2s ease 0s; -moz-transition: opacity 0.2s ease 0s; -ms-transition: opacity 0.2s ease 0s; -o-transition: opacity 0.2s ease 0s; -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; left: -3000px; user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; z-index: 2147483647; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .fr-tooltip.fr-visible { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .fr-toolbar .fr-btn-wrap, .fr-popup .fr-btn-wrap, .fr-modal .fr-btn-wrap { float: left; white-space: nowrap; position: relative; } .fr-toolbar .fr-btn-wrap.fr-hidden, .fr-popup .fr-btn-wrap.fr-hidden, .fr-modal .fr-btn-wrap.fr-hidden { display: none; } .fr-toolbar .fr-command.fr-btn, .fr-popup .fr-command.fr-btn, .fr-modal .fr-command.fr-btn { background: transparent; color: #333333; -moz-outline: 0; outline: none; border: 0; line-height: 1; cursor: pointer; text-align: left; margin: 4px 2px; padding: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; z-index: 2; position: relative; box-sizing: border-box; text-decoration: none; user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; float: left; height: 40px; } .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-options, .fr-popup .fr-command.fr-btn.fr-dropdown.fr-options, .fr-modal .fr-command.fr-btn.fr-dropdown.fr-options { border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; -webkit-border-radius: 0 4px 4px 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .fr-toolbar .fr-command.fr-btn.fr-btn-hover, .fr-popup .fr-command.fr-btn.fr-btn-hover, .fr-modal .fr-command.fr-btn.fr-btn-hover { border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; -webkit-border-radius: 4px 0 0 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .fr-toolbar .fr-command.fr-btn::-moz-focus-inner, .fr-popup .fr-command.fr-btn::-moz-focus-inner, .fr-modal .fr-command.fr-btn::-moz-focus-inner { border: 0; padding: 0; } .fr-toolbar .fr-command.fr-btn.fr-btn-text, .fr-popup .fr-command.fr-btn.fr-btn-text, .fr-modal .fr-command.fr-btn.fr-btn-text { width: auto; } .fr-toolbar .fr-command.fr-btn i, .fr-toolbar .fr-command.fr-btn svg, .fr-popup .fr-command.fr-btn i, .fr-popup .fr-command.fr-btn svg, .fr-modal .fr-command.fr-btn i, .fr-modal .fr-command.fr-btn svg { display: block; text-align: center; float: none; margin: 8px 7px; width: 24px; } .fr-toolbar .fr-command.fr-btn svg.fr-svg, .fr-popup .fr-command.fr-btn svg.fr-svg, .fr-modal .fr-command.fr-btn svg.fr-svg { height: 24px; } .fr-toolbar .fr-command.fr-btn svg path, .fr-popup .fr-command.fr-btn svg path, .fr-modal .fr-command.fr-btn svg path { -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; fill: #333333; } .fr-toolbar .fr-command.fr-btn span.fr-sr-only, .fr-popup .fr-command.fr-btn span.fr-sr-only, .fr-modal .fr-command.fr-btn span.fr-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .fr-toolbar .fr-command.fr-btn span, .fr-popup .fr-command.fr-btn span, .fr-modal .fr-command.fr-btn span { font-size: 14px; display: block; line-height: 17px; min-width: 30px; float: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; height: 17px; font-weight: bold; padding: 0 4px; } .fr-toolbar .fr-command.fr-btn img, .fr-popup .fr-command.fr-btn img, .fr-modal .fr-command.fr-btn img { margin: 8px 7px; width: 24px; } .fr-toolbar .fr-command.fr-btn.fr-btn-active-popup, .fr-popup .fr-command.fr-btn.fr-btn-active-popup, .fr-modal .fr-command.fr-btn.fr-btn-active-popup { background: #d6d6d6; } .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-selection span, .fr-popup .fr-command.fr-btn.fr-dropdown.fr-selection span, .fr-modal .fr-command.fr-btn.fr-dropdown.fr-selection span { font-weight: normal; } .fr-toolbar .fr-command.fr-btn.fr-dropdown i, .fr-toolbar .fr-command.fr-btn.fr-dropdown span, .fr-toolbar .fr-command.fr-btn.fr-dropdown img, .fr-toolbar .fr-command.fr-btn.fr-dropdown svg, .fr-popup .fr-command.fr-btn.fr-dropdown i, .fr-popup .fr-command.fr-btn.fr-dropdown span, .fr-popup .fr-command.fr-btn.fr-dropdown img, .fr-popup .fr-command.fr-btn.fr-dropdown svg, .fr-modal .fr-command.fr-btn.fr-dropdown i, .fr-modal .fr-command.fr-btn.fr-dropdown span, .fr-modal .fr-command.fr-btn.fr-dropdown img, .fr-modal .fr-command.fr-btn.fr-dropdown svg { margin-left: 3px; margin-right: 11px; } .fr-toolbar .fr-command.fr-btn.fr-dropdown:after, .fr-popup .fr-command.fr-btn.fr-dropdown:after, .fr-modal .fr-command.fr-btn.fr-dropdown:after { position: absolute; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #333333; right: 2px; top: 18px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; content: ""; } .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active, .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active, .fr-modal .fr-command.fr-btn.fr-dropdown.fr-active { fill: #333333; background: #d6d6d6; -webkit-transition: 0.5s ease; -moz-transition: 0.5s ease; -ms-transition: 0.5s ease; -o-transition: 0.5s ease; } .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover, .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover, .fr-modal .fr-command.fr-btn.fr-dropdown.fr-active:hover { background: #ebebeb; fill: #333333; } .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:hover::after, .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:hover::after, .fr-modal .fr-command.fr-btn.fr-dropdown.fr-active:hover::after { border-top-color: #333333; } .fr-toolbar .fr-command.fr-btn.fr-dropdown.fr-active:after, .fr-popup .fr-command.fr-btn.fr-dropdown.fr-active:after, .fr-modal .fr-command.fr-btn.fr-dropdown.fr-active:after { border-top: 0; border-bottom: 4px solid #222222; } .fr-toolbar .fr-command.fr-btn.fr-disabled, .fr-popup .fr-command.fr-btn.fr-disabled, .fr-modal .fr-command.fr-btn.fr-disabled { color: #bdbdbd; cursor: default; -webkit-opacity: 0.3; -moz-opacity: 0.3; opacity: 0.3; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .fr-toolbar .fr-command.fr-btn.fr-disabled::after, .fr-popup .fr-command.fr-btn.fr-disabled::after, .fr-modal .fr-command.fr-btn.fr-disabled::after { border-top-color: #bdbdbd; } .fr-toolbar .fr-command.fr-btn.fr-hidden, .fr-popup .fr-command.fr-btn.fr-hidden, .fr-modal .fr-command.fr-btn.fr-hidden { display: none; } .fr-toolbar .fr-tabs .fr-command.fr-btn, .fr-popup .fr-tabs .fr-command.fr-btn, .fr-modal .fr-tabs .fr-command.fr-btn { margin: 0; width: 46px; height: 40px; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .fr-toolbar .fr-tabs .fr-command.fr-btn:not(:hover):not(:focus).fr-active, .fr-toolbar .fr-tabs .fr-command.fr-btn:not(:hover):not(:focus).fr-active-tab, .fr-popup .fr-tabs .fr-command.fr-btn:not(:hover):not(:focus).fr-active, .fr-popup .fr-tabs .fr-command.fr-btn:not(:hover):not(:focus).fr-active-tab, .fr-modal .fr-tabs .fr-command.fr-btn:not(:hover):not(:focus).fr-active, .fr-modal .fr-tabs .fr-command.fr-btn:not(:hover):not(:focus).fr-active-tab { background: #FFF; } .fr-toolbar .fr-tabs .fr-command.fr-btn span, .fr-popup .fr-tabs .fr-command.fr-btn span, .fr-modal .fr-tabs .fr-command.fr-btn span { height: 27px; } .fr-toolbar .fr-tabs .fr-command.fr-btn img, .fr-toolbar .fr-tabs .fr-command.fr-btn svg, .fr-popup .fr-tabs .fr-command.fr-btn img, .fr-popup .fr-tabs .fr-command.fr-btn svg, .fr-modal .fr-tabs .fr-command.fr-btn img, .fr-modal .fr-tabs .fr-command.fr-btn svg { margin: 8px 11px; width: 24px; height: 24px; } .fr-toolbar .fr-btn-grp .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path, .fr-toolbar .fr-more-toolbar .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path, .fr-toolbar .fr-buttons:not(.fr-tabs) .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path, .fr-popup .fr-btn-grp .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path, .fr-popup .fr-more-toolbar .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path, .fr-popup .fr-buttons:not(.fr-tabs) .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path, .fr-modal .fr-btn-grp .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path, .fr-modal .fr-more-toolbar .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path, .fr-modal .fr-buttons:not(.fr-tabs) .fr-command.fr-btn.fr-active:not(.fr-dropdown) svg path { fill: #0098f7; } .fr-toolbar.fr-disabled .fr-btn, .fr-toolbar.fr-disabled .fr-btn.fr-active, .fr-popup.fr-disabled .fr-btn, .fr-popup.fr-disabled .fr-btn.fr-active, .fr-modal.fr-disabled .fr-btn, .fr-modal.fr-disabled .fr-btn.fr-active { color: #bdbdbd; -webkit-opacity: 0.3; -moz-opacity: 0.3; opacity: 0.3; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .fr-toolbar.fr-disabled .fr-btn.fr-dropdown::after, .fr-toolbar.fr-disabled .fr-btn.fr-active.fr-dropdown::after, .fr-popup.fr-disabled .fr-btn.fr-dropdown::after, .fr-popup.fr-disabled .fr-btn.fr-active.fr-dropdown::after, .fr-modal.fr-disabled .fr-btn.fr-dropdown::after, .fr-modal.fr-disabled .fr-btn.fr-active.fr-dropdown::after { border-top-color: #bdbdbd; } .fr-toolbar.fr-rtl .fr-btn-grp.fr-float-left, .fr-popup.fr-rtl .fr-btn-grp.fr-float-left, .fr-modal.fr-rtl .fr-btn-grp.fr-float-left { float: right; } .fr-toolbar.fr-rtl .fr-btn-grp.fr-float-right, .fr-popup.fr-rtl .fr-btn-grp.fr-float-right, .fr-modal.fr-rtl .fr-btn-grp.fr-float-right { float: left; } .fr-toolbar.fr-rtl .fr-command.fr-btn, .fr-toolbar.fr-rtl .fr-btn-wrap, .fr-popup.fr-rtl .fr-command.fr-btn, .fr-popup.fr-rtl .fr-btn-wrap, .fr-modal.fr-rtl .fr-command.fr-btn, .fr-modal.fr-rtl .fr-btn-wrap { float: right; } .fr-toolbar.fr-rtl .fr-command.fr-btn.fr-dropdown.fr-options, .fr-toolbar.fr-rtl .fr-btn-wrap.fr-dropdown.fr-options, .fr-popup.fr-rtl .fr-command.fr-btn.fr-dropdown.fr-options, .fr-popup.fr-rtl .fr-btn-wrap.fr-dropdown.fr-options, .fr-modal.fr-rtl .fr-command.fr-btn.fr-dropdown.fr-options, .fr-modal.fr-rtl .fr-btn-wrap.fr-dropdown.fr-options { border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; -webkit-border-radius: 4px 0 0 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .fr-toolbar.fr-rtl .fr-command.fr-btn.fr-btn-hover, .fr-toolbar.fr-rtl .fr-btn-wrap.fr-btn-hover, .fr-popup.fr-rtl .fr-command.fr-btn.fr-btn-hover, .fr-popup.fr-rtl .fr-btn-wrap.fr-btn-hover, .fr-modal.fr-rtl .fr-command.fr-btn.fr-btn-hover, .fr-modal.fr-rtl .fr-btn-wrap.fr-btn-hover { border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; -webkit-border-radius: 0 4px 4px 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .fr-toolbar.fr-inline > .fr-command.fr-btn:not(.fr-hidden), .fr-toolbar.fr-inline > .fr-btn-wrap:not(.fr-hidden) { display: inline-flex; float: none; } .fr-desktop .fr-command:hover, .fr-desktop .fr-command:focus, .fr-desktop .fr-command.fr-btn-hover, .fr-desktop .fr-command.fr-expanded { outline: 0; color: #333333; } .fr-desktop .fr-command:hover:not(.fr-table-cell), .fr-desktop .fr-command:focus:not(.fr-table-cell), .fr-desktop .fr-command.fr-btn-hover:not(.fr-table-cell), .fr-desktop .fr-command.fr-expanded:not(.fr-table-cell) { background: #ebebeb; } .fr-desktop .fr-command:hover::after, .fr-desktop .fr-command:focus::after, .fr-desktop .fr-command.fr-btn-hover::after, .fr-desktop .fr-command.fr-expanded::after { border-top-color: #333333; } .fr-desktop .fr-command.fr-selected:not(.fr-table-cell), .fr-desktop .fr-command:active { color: #333333; background: #d6d6d6; } .fr-desktop .fr-command.fr-active:hover, .fr-desktop .fr-command.fr-active:focus, .fr-desktop .fr-command.fr-active.fr-btn-hover, .fr-desktop .fr-command.fr-active.fr-expanded { background: #ebebeb; } .fr-desktop .fr-command.fr-active:active { background: #d6d6d6; } .fr-desktop .fr-command.fr-disabled:hover, .fr-desktop .fr-command.fr-disabled:focus, .fr-desktop .fr-command.fr-disabled.fr-selected { background: transparent; } .fr-desktop.fr-disabled .fr-command:hover, .fr-desktop.fr-disabled .fr-command:focus, .fr-desktop.fr-disabled .fr-command.fr-selected { background: transparent; } .fr-toolbar.fr-mobile .fr-command.fr-blink, .fr-popup.fr-mobile .fr-command.fr-blink { background: #d6d6d6; } .fr-command.fr-btn.fr-options { width: 16px; margin-left: -5px; } .fr-command.fr-btn.fr-options.fr-btn-hover, .fr-command.fr-btn.fr-options:hover, .fr-command.fr-btn.fr-options:focus { border-left: solid 1px #FAFAFA; -webkit-transition: border-left 0s, background-color 0.5s; -moz-transition: border-left 0s, background-color 0.5s; -ms-transition: border-left 0s, background-color 0.5s; -o-transition: border-left 0s, background-color 0.5s; } .fr-command.fr-btn + .fr-dropdown-menu { background: #FFF; display: inline-block; position: absolute; right: auto; bottom: auto; height: auto; z-index: 4; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-overflow-scrolling: touch; overflow: hidden; zoom: 1; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .fr-command.fr-btn + .fr-dropdown-menu.test-height .fr-dropdown-wrapper { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; height: auto; max-height: 275px; } .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper { padding: 0; margin: auto; display: inline-block; text-align: left; position: relative; box-sizing: border-box; -webkit-transition: height 0.3s; -moz-transition: height 0.3s; -ms-transition: height 0.3s; -o-transition: height 0.3s; margin-top: 0; float: left; height: 0; margin-top: 0 !important; } .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content { position: relative; } .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list { list-style-type: none; margin: 0; padding: 8px 0; min-width: 72px; } .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li { padding: 0; margin: 0; font-size: 15px; } .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a { padding: 0 20px; line-height: 200%; display: flex; cursor: pointer; white-space: nowrap; color: inherit; text-decoration: none; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a svg { width: 24px; height: 24px; margin: 3px 4px; } .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a svg path { fill: #333333; } .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active { background: #d6d6d6; } .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-disabled { color: #bdbdbd; cursor: default; } .fr-command.fr-btn + .fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a .fr-shortcut { margin-left: 20px; font-weight: bold; -webkit-opacity: 0.75; -moz-opacity: 0.75; opacity: 0.75; } .fr-command.fr-btn.fr-active + .fr-dropdown-menu { display: inline-block; box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .fr-bottom > .fr-command.fr-btn + .fr-dropdown-menu { border-radius: 2px 2px 0 0; -moz-border-radius: 2px 2px 0 0; -webkit-border-radius: 2px 2px 0 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .fr-toolbar.fr-rtl .fr-dropdown-wrapper, .fr-popup.fr-rtl .fr-dropdown-wrapper { text-align: right !important; } body.prevent-scroll { overflow: hidden; } body.prevent-scroll.fr-mobile { position: fixed; -webkit-overflow-scrolling: touch; } .fr-modal { color: #222222; font-family: Arial, Helvetica, sans-serif; position: fixed; overflow-x: auto; overflow-y: scroll; top: 0; left: 0; bottom: 0; right: 0; width: 100%; z-index: 2147483640; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; line-height: 1.2; } .fr-modal.fr-middle .fr-modal-wrapper { margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); position: absolute; } .fr-modal .fr-modal-wrapper { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; background-clip: padding-box; margin: 20px auto; display: inline-block; background: #FFF; min-width: 300px; box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12); border: 0; overflow: hidden; width: 90%; position: relative; } @media (min-width: 768px) and (max-width: 991px) { .fr-modal .fr-modal-wrapper { margin: 30px auto; width: 70%; } } @media (min-width: 992px) { .fr-modal .fr-modal-wrapper { margin: 50px auto; width: 960px; } } .fr-modal .fr-modal-wrapper .fr-modal-head { background: #FFF; overflow: hidden; position: absolute; width: 100%; min-height: 42px; z-index: 3; border-bottom: solid #efefef 1px; -webkit-transition: all 0.2s ease 0s; -moz-transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; } .fr-modal .fr-modal-wrapper .fr-modal-head .fr-modal-head-line { height: 56px; padding: 0 10px; } .fr-modal .fr-modal-wrapper .fr-modal-head .fr-modal-close { margin: 10px; position: absolute; top: 0; right: 0; } .fr-modal .fr-modal-wrapper .fr-modal-head h4 { font-size: 20px; padding: 19px 10px; margin: 0; font-weight: 400; line-height: 18px; display: inline-block; float: left; } .fr-modal .fr-modal-wrapper div.fr-modal-body { height: 100%; min-height: 150px; overflow-y: auto; padding-bottom: 20px; } .fr-modal .fr-modal-wrapper div.fr-modal-body:focus { outline: 0; } .fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command { height: 36px; line-height: 1; color: #0098f7; padding: 10px; cursor: pointer; text-decoration: none; border: none; background: none; font-size: 16px; outline: none; -webkit-transition: background 0.2s ease 0s; -moz-transition: background 0.2s ease 0s; -ms-transition: background 0.2s ease 0s; -o-transition: background 0.2s ease 0s; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command + button { margin-left: 24px; } .fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:hover, .fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:focus { background: #ebebeb; color: #0098f7; } .fr-modal .fr-modal-wrapper div.fr-modal-body button.fr-command:active { background: #d6d6d6; color: #0098f7; } .fr-modal .fr-modal-wrapper div.fr-modal-body button::-moz-focus-inner { border: 0; } .fr-desktop .fr-modal-wrapper .fr-modal-head i:hover { background: #ebebeb; } .fr-overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: #000; -webkit-opacity: 0.5; -moz-opacity: 0.5; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; z-index: 2147483639; } ol.decimal_type { counter-reset: item; } ol.decimal_type > li { display: block; } ol.decimal_type > li:before { content: counters(item, ".") ". "; counter-increment: item; } .fr-popup { position: absolute; display: none; color: #222222; background: #FFF; box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12); font-family: Arial, Helvetica, sans-serif; box-sizing: border-box; user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; margin-top: 10px; z-index: 2147483635; text-align: left; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.2; } .fr-popup .fr-icon { text-align: center; vertical-align: middle; font-size: 20px; line-height: 1; cursor: pointer; font-weight: 400; box-sizing: content-box; padding: 6px; } .fr-popup .fr-icon-container { padding: 20px; max-height: 200px; overflow: auto; box-sizing: border-box; } @supports not (-ms-high-contrast: none) { .fr-popup .fr-icon-container { grid-template-columns: repeat(auto-fill, minmax(36px, 36px)); display: grid; } } @media (min-width: 768px) { .fr-popup .fr-icon-container { min-width: 276px; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .fr-popup .fr-icon-container { display: inline-flex; } } @media screen and (-ms-high-contrast: active) and (max-width: 768px), (-ms-high-contrast: none) and (max-width: 768px) { .fr-popup .fr-icon-container { width: 236px; } } .fr-popup .fr-input-focus { background: whitesmoke; } .fr-popup.fr-above { margin-top: -10px; border-top: 0; } .fr-popup.fr-active { display: block; } .fr-popup.fr-hidden { -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .fr-popup.fr-empty { display: none !important; } .fr-popup .fr-hs { display: block !important; } .fr-popup .fr-hs.fr-hidden { display: none !important; } .fr-popup .fr-input-line { position: relative; padding: 15px 0; } .fr-popup .fr-input-line input[type=text], .fr-popup .fr-input-line textarea { width: 100%; margin-bottom: 1px; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; border: solid 1px #999999; color: #222222; font-size: 14px; background: #FFF; position: relative; z-index: 2; padding: 4px 12px; box-sizing: border-box; -webkit-transition: border 0.5s, padding 0.5s; -moz-transition: border 0.5s, padding 0.5s; -ms-transition: border 0.5s, padding 0.5s; -o-transition: border 0.5s, padding 0.5s; } .fr-popup .fr-input-line input[type=text]:hover, .fr-popup .fr-input-line textarea:hover { border: solid 1px #515151; } .fr-popup .fr-input-line input[type=text]:focus, .fr-popup .fr-input-line textarea:focus { border: solid 2px #0098f7; padding: 3px 11px; } .fr-popup .fr-input-line input[type=text] { height: 46px; } .fr-popup .fr-input-line input + label, .fr-popup .fr-input-line textarea + label { position: absolute; top: 29px; left: 12px; font-size: 14px; color: grey; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; z-index: 3; display: block; background: #FFF; padding: 0; cursor: text; } .fr-popup .fr-input-line input.fr-not-empty + label, .fr-popup .fr-input-line textarea.fr-not-empty + label { color: gray; width: auto; left: 4px; padding: 0 4px; font-size: 11px; top: 9px; } .fr-popup input, .fr-popup textarea { user-select: text; -o-user-select: text; -moz-user-select: text; -khtml-user-select: text; -webkit-user-select: text; -ms-user-select: text; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; outline: none; } .fr-popup textarea { resize: none; } .fr-popup .fr-buttons { white-space: nowrap; line-height: 0; } .fr-popup .fr-buttons .fr-btn { margin-left: 4px; margin-right: 4px; display: inline-block; float: none; } .fr-popup .fr-buttons .fr-btn i { float: left; } .fr-popup .fr-buttons .fr-separator { display: inline-block; float: none; } .fr-popup .fr-buttons.fr-tabs { border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; background-color: #f5f5f5; overflow: hidden; } @media (max-width: 768px) { .fr-popup .fr-buttons.fr-tabs.fr-tabs-scroll { overflow: scroll; overflow-y: hidden; width: 276px; } } .fr-popup .fr-buttons:not(.fr-tabs) { padding: 5px; } .fr-popup .fr-layer { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; width: 195px; box-sizing: border-box; margin: 20px; display: none; } @media (min-width: 768px) { .fr-popup .fr-layer { width: 260px; } } .fr-popup .fr-layer.fr-active { display: inline-block; } .fr-popup .fr-action-buttons { z-index: 7; height: 36px; text-align: right; } .fr-popup .fr-action-buttons button.fr-command { height: 36px; line-height: 1; color: #0098f7; padding: 10px; cursor: pointer; text-decoration: none; border: none; background: none; font-size: 16px; outline: none; -webkit-transition: background 0.2s ease 0s; -moz-transition: background 0.2s ease 0s; -ms-transition: background 0.2s ease 0s; -o-transition: background 0.2s ease 0s; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .fr-popup .fr-action-buttons button.fr-command + button { margin-left: 24px; } .fr-popup .fr-action-buttons button.fr-command:hover, .fr-popup .fr-action-buttons button.fr-command:focus { background: #ebebeb; color: #0098f7; } .fr-popup .fr-action-buttons button.fr-command:active { background: #d6d6d6; color: #0098f7; } .fr-popup .fr-action-buttons button::-moz-focus-inner { border: 0; } .fr-popup .fr-checkbox { position: relative; display: inline-block; width: 18px; height: 18px; padding: 10px; border-radius: 100%; line-height: 1; box-sizing: content-box; vertical-align: middle; } .fr-popup .fr-checkbox svg { margin-left: 2px; margin-top: 2px; display: none; width: 10px; height: 10px; } .fr-popup .fr-checkbox span { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; width: 18px; height: 18px; display: inline-block; position: relative; z-index: 1; box-sizing: border-box; -webkit-transition: background 0.2s ease 0s, border-color 0.2s ease 0s; -moz-transition: background 0.2s ease 0s, border-color 0.2s ease 0s; -ms-transition: background 0.2s ease 0s, border-color 0.2s ease 0s; -o-transition: background 0.2s ease 0s, border-color 0.2s ease 0s; } .fr-popup .fr-checkbox input { position: absolute; z-index: 2; -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; border: 0 none; cursor: pointer; height: 18px; margin: 0; padding: 0; width: 18px; top: 7px; left: 7px; } .fr-popup .fr-checkbox input:not(:checked) + span { border: solid 2px #999999; } .fr-popup .fr-checkbox input:not(:checked):active + span { background-color: #f5f5f5; } .fr-popup .fr-checkbox input:not(:checked):focus + span, .fr-popup .fr-checkbox input:not(:checked):hover + span { border-color: #515151; } .fr-popup .fr-checkbox input:checked + span { background: #0098f7; border: solid 2px #0098f7; } .fr-popup .fr-checkbox input:checked + span svg { display: block; } .fr-popup .fr-checkbox input:checked:active + span { background-color: #EcF5Ff; } .fr-popup .fr-checkbox input:checked:focus + span, .fr-popup .fr-checkbox input:checked:hover + span { -webkit-opacity: 0.8; -moz-opacity: 0.8; opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .fr-popup .fr-checkbox-line { font-size: 14px; line-height: 1.4px; margin-top: 10px; } .fr-popup .fr-checkbox-line label { cursor: pointer; margin: 0 5px; vertical-align: middle; } .fr-popup.fr-rtl { direction: rtl; text-align: right; } .fr-popup.fr-rtl .fr-action-buttons { text-align: left; } .fr-popup.fr-rtl .fr-input-line input + label, .fr-popup.fr-rtl .fr-input-line textarea + label { left: auto; right: 0; } .fr-popup.fr-rtl .fr-buttons .fr-separator.fr-vs { float: right; } .fr-text-edit-layer { width: 250px; box-sizing: border-box; display: block !important; } .fr-toolbar { color: #222222; background: #FFF; position: relative; font-family: Arial, Helvetica, sans-serif; box-sizing: border-box; user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; text-align: left; border: 1px solid #CCCCCC; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.2; padding-bottom: 0; -webkit-transition: padding-bottom 0.5s; -moz-transition: padding-bottom 0.5s; -ms-transition: padding-bottom 0.5s; -o-transition: padding-bottom 0.5s; } .fr-toolbar::after { clear: both; display: block; content: ""; height: 0; } .fr-toolbar::after { height: 0; } .fr-toolbar .fr-newline { clear: both; display: block; content: ""; margin-left: 9px; margin-right: 9px; background: #efefef; height: 1px; -webkit-transition: height 0.5s; -moz-transition: height 0.5s; -ms-transition: height 0.5s; -o-transition: height 0.5s; } .fr-toolbar.fr-toolbar-open { padding-bottom: 48px; } .fr-toolbar.fr-toolbar-open .fr-newline { height: 0; } .fr-toolbar .fr-float-right { float: right; } .fr-toolbar .fr-float-left { float: left; } .fr-toolbar .fr-more-toolbar { float: left; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; background-color: #f5f5f5; -webkit-transition: height 0.5s; -moz-transition: height 0.5s; -ms-transition: height 0.5s; -o-transition: height 0.5s; height: 0; z-index: 2; overflow: hidden; position: absolute; box-sizing: border-box; width: 100%; } .fr-toolbar .fr-more-toolbar.fr-expanded { height: 48px; } .fr-toolbar .fr-more-toolbar.fr-overflow-visible { overflow: visible; } .fr-toolbar .fr-more-toolbar > .fr-command.fr-btn { margin-left: 4px; margin-right: 4px; } .fr-toolbar .fr-btn-grp { display: inline-block; margin: 0 17px 0 12px; } @media (max-width: 768px) { .fr-toolbar .fr-btn-grp { margin: 0 7px 0 6px; } } .fr-toolbar .fr-command.fr-btn.fr-open { margin-top: 10px; margin-bottom: -1px; border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .fr-toolbar .fr-command.fr-btn.fr-open:not(:hover):not(:focus):not(:active) { background: #f5f5f5; } .fr-toolbar.fr-rtl { text-align: right; } .fr-toolbar.fr-inline { display: none; box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12); border: 0; white-space: nowrap; position: absolute; margin-top: 5px; z-index: 2147483630; } .fr-toolbar.fr-inline.fr-above { margin-top: -10px; border-top: 0; } .fr-toolbar.fr-inline .fr-newline { height: 0; } .fr-toolbar.fr-top { top: 0; border-bottom: 0; border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .fr-toolbar.fr-bottom { bottom: 0; border-top: 0; padding-bottom: 0; border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .fr-toolbar.fr-bottom .fr-newline { padding-top: 0; -webkit-transition: padding-top 0.5s; -moz-transition: padding-top 0.5s; -ms-transition: padding-top 0.5s; -o-transition: padding-top 0.5s; } .fr-toolbar.fr-bottom.fr-toolbar-open .fr-newline { padding-top: 48px; background: #FFF; } .fr-toolbar.fr-bottom .fr-command.fr-btn.fr-open { margin-top: -1px; margin-bottom: 10px; border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .fr-toolbar.fr-sticky-on { border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .fr-separator { background: #ebebeb; display: block; vertical-align: top; float: left; } .fr-separator + .fr-separator { display: none; } .fr-separator.fr-vs { height: 32px; width: 1px; margin: 8px 4px; } .fr-separator.fr-hs { clear: both; width: calc(100% - 8px); margin: 0 4px; height: 1px; } .fr-separator.fr-hidden { display: none !important; } .fr-rtl .fr-separator { float: right; } .fr-toolbar.fr-inline .fr-separator.fr-hs { float: none; } .fr-toolbar.fr-inline .fr-separator.fr-vs { float: none; display: inline-block; } .second-toolbar { border: 1px solid #CCCCCC; border-top: 0; background: #FFF; line-height: 1.4; border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .second-toolbar::after { clear: both; display: block; content: ""; height: 0; } #logo { float: left; outline: none; } #logo > span { display: inline-block; float: left; font-family: sans-serif; padding: 11px 5px 10px 15px; font-size: 12px; font-weight: 500; color: #b1b2b7; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; -ms-transition: color 0.3s; -o-transition: color 0.3s; } #logo > svg { height: 20px; width: 47px; margin: 7px 0; cursor: pointer; } #logo > svg * { -webkit-transition: fill 0.3s; -moz-transition: fill 0.3s; -ms-transition: fill 0.3s; -o-transition: fill 0.3s; } #logo:hover > span, #logo:focus > span { color: #0098f7; } #logo:hover > svg .fr-logo, #logo:focus > svg .fr-logo { fill: #0098f7; } .fr-visibility-helper { display: none; margin-left: 0 !important; } @media (min-width: 768px) { .fr-visibility-helper { margin-left: 1px !important; } } @media (min-width: 992px) { .fr-visibility-helper { margin-left: 2px !important; } } @media (min-width: 1200px) { .fr-visibility-helper { margin-left: 3px !important; } } .fr-opacity-0 { -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .fr-box { position: relative; } .fr-sticky { position: -moz-sticky; position: -ms-sticky; position: -o-sticky; position: sticky; } .fr-sticky-off { position: relative; } .fr-sticky-on { position: fixed; z-index: 10; } .fr-sticky-on.fr-sticky-ios { position: absolute; left: 0; right: 0; width: auto !important; } .fr-sticky-dummy { display: none; } .fr-sticky-on + .fr-sticky-dummy, .fr-sticky-box > .fr-sticky-dummy { display: block; } span.fr-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .clearfix::after { clear: both; display: block; content: ""; height: 0; } .hide-by-clipping { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .fr-box .fr-counter { padding: 10px; float: right; color: #999999; content: attr(data-chars); font-size: 14px; font-family: sans-serif; z-index: 1; border-radius: 2px 0 0 0; -moz-border-radius: 2px 0 0 0; -webkit-border-radius: 2px 0 0 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .fr-box.fr-rtl .fr-counter { left: 0; right: auto; border-left: none; border-radius: 0 2px 0 0; -moz-border-radius: 0 2px 0 0; -webkit-border-radius: 0 2px 0 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .fr-box.fr-code-view .fr-counter { display: none; } .clearfix::after { clear: both; display: block; content: ""; height: 0; } .hide-by-clipping { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } textarea.fr-code { display: none; width: 100%; resize: none; -moz-resize: none; -webkit-resize: none; box-sizing: border-box; border: none; padding: 10px; margin: 0; font-family: "Courier New", monospace; font-size: 14px; background: #FFF; color: #000; outline: none; } .fr-box.fr-rtl textarea.fr-code { direction: rtl; } .fr-box .CodeMirror { display: none; } .fr-box.fr-code-view textarea.fr-code { display: block; } .fr-box.fr-code-view .fr-element, .fr-box.fr-code-view .fr-placeholder, .fr-box.fr-code-view .fr-iframe { display: none; } .fr-box.fr-code-view .CodeMirror { display: block; } .fr-box.fr-inline.fr-code-view .fr-command.fr-btn.html-switch { display: block; } .fr-box.fr-inline .fr-command.fr-btn.html-switch { display: none; position: absolute; top: 0; right: 0; display: none; background: #FFF; color: #333333; -moz-outline: 0; outline: 0; border: 0; line-height: 1; cursor: pointer; text-align: left; padding: 8px 7px; -webkit-transition: background 0.2s ease 0s; -moz-transition: background 0.2s ease 0s; -ms-transition: background 0.2s ease 0s; -o-transition: background 0.2s ease 0s; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; z-index: 2; box-sizing: border-box; text-decoration: none; user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .fr-box.fr-inline .fr-command.fr-btn.html-switch i { font-size: 24px; width: 24px; text-align: center; } .fr-box.fr-inline .fr-command.fr-btn.html-switch.fr-desktop:hover { background: #ebebeb; } .clearfix::after { clear: both; display: block; content: ""; height: 0; } .hide-by-clipping { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .fr-popup .fr-layer.fr-color-hex-layer { margin: 0; padding: 20px; padding-top: 0; float: left; } .fr-popup .fr-layer.fr-color-hex-layer .fr-input-line { float: left; width: calc(100% - 50px); padding: 15px 0 0; } .fr-popup .fr-layer.fr-color-hex-layer .fr-action-buttons { float: right; width: 38px; height: 40px; padding: 17px 0 0; margin: 0; } .fr-popup .fr-layer.fr-color-hex-layer .fr-action-buttons button.fr-command { border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; font-size: 13px; height: 40px; width: 38px; } .fr-popup .fr-separator + .fr-colors-tabs { margin-left: 2px; margin-right: 2px; } .fr-popup .fr-color-set { line-height: 0; display: none; } .fr-popup .fr-color-set.fr-selected-set { display: block; padding: 20px; padding-bottom: 0; } .fr-popup .fr-color-set > span { display: inline-block; width: 32px; height: 32px; position: relative; z-index: 1; } .fr-popup .fr-color-set > span > i, .fr-popup .fr-color-set > span > svg { text-align: center; line-height: 32px; height: 24px; width: 24px; margin: 4px; font-size: 13px; position: absolute; bottom: 0; cursor: default; left: 0; } .fr-popup .fr-color-set > span > i path, .fr-popup .fr-color-set > span > svg path { fill: #222222; } .fr-popup .fr-color-set > span .fr-selected-color { color: #FFF; font-family: FontAwesome; font-size: 13px; font-weight: 400; line-height: 32px; position: absolute; top: 0; bottom: 0; right: 0; left: 0; text-align: center; cursor: default; } .fr-popup .fr-color-set > span:hover, .fr-popup .fr-color-set > span:focus { outline: 1px solid #222222; z-index: 2; } .fr-rtl .fr-popup .fr-colors-tabs .fr-colors-tab.fr-selected-tab[data-param1=text] ~ [data-param1=background]::after { -webkit-transform: translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); -o-transform: translate3d(100%, 0, 0); } .clearfix::after { clear: both; display: block; content: ""; height: 0; } .hide-by-clipping { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .fr-drag-helper { background: #0098f7; height: 2px; margin-top: -1px; -webkit-opacity: 0.2; -moz-opacity: 0.2; opacity: 0.2; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; position: absolute; z-index: 2147483640; display: none; } .fr-drag-helper.fr-visible { display: block; } .fr-dragging { -webkit-opacity: 0.4; -moz-opacity: 0.4; opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .clearfix::after { clear: both; display: block; content: ""; height: 0; } .hide-by-clipping { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .fr-popup .fr-emoticon { width: 24px; height: 24px; font-family: "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Segoe UI Symbol", "Android Emoji", EmojiSymbols; } .fr-popup .fr-emoticon img { height: 24px; width: 24px; } .fr-popup .fr-command.fr-btn.fr-tabs-unicode { padding: 0 0 0 14px; } @media screen and (-ms-high-contrast: active) and (min-width: 768px), (-ms-high-contrast: none) and (min-width: 768px) { .fr-popup .fr-icon-container.fr-emoticon-container { width: 368px; } } .clearfix::after { clear: both; display: block; content: ""; height: 0; } .hide-by-clipping { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .fr-popup .fr-file-upload-layer { border: dashed 2px #bdbdbd; padding: 25px 0; margin: 20px; position: relative; font-size: 14px; letter-spacing: 1px; line-height: 140%; box-sizing: border-box; text-align: center; } .fr-popup .fr-file-upload-layer:hover { background: #ebebeb; } .fr-popup .fr-file-upload-layer.fr-drop { background: #ebebeb; border-color: #0098f7; } .fr-popup .fr-file-upload-layer .fr-form { -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 2147483640; overflow: hidden; margin: 0 !important; padding: 0 !important; width: 100% !important; } .fr-popup .fr-file-upload-layer .fr-form input { cursor: pointer; position: absolute; right: 0; top: 0; bottom: 0; width: 500%; height: 100%; margin: 0; font-size: 400px; } .fr-popup .fr-file-progress-bar-layer { box-sizing: border-box; } .fr-popup .fr-file-progress-bar-layer > h3 { font-size: 16px; margin: 10px 0; font-weight: normal; } .fr-popup .fr-file-progress-bar-layer > div.fr-action-buttons { display: none; } .fr-popup .fr-file-progress-bar-layer > div.fr-loader { background: #b3e0fd; height: 10px; width: 100%; margin-top: 20px; overflow: hidden; position: relative; } .fr-popup .fr-file-progress-bar-layer > div.fr-loader span { display: block; height: 100%; width: 0%; background: #0098f7; -webkit-transition: width 0.2s ease 0s; -moz-transition: width 0.2s ease 0s; -ms-transition: width 0.2s ease 0s; -o-transition: width 0.2s ease 0s; } .fr-popup .fr-file-progress-bar-layer > div.fr-loader.fr-indeterminate span { width: 30% !important; position: absolute; top: 0; animation: loading 2s linear infinite; } .fr-popup .fr-file-progress-bar-layer.fr-error > div.fr-loader { display: none; } .fr-popup .fr-file-progress-bar-layer.fr-error > div.fr-action-buttons { display: block; } @keyframes loading { from { left: -25%; } to { left: 100%; } } @keyframes loading { from { left: -25%; } to { left: 100%; } } .clearfix::after { clear: both; display: block; content: ""; height: 0; } .hide-by-clipping { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } body.fr-fullscreen { overflow: hidden; height: 100%; width: 100%; position: fixed; } .fr-box.fr-fullscreen { margin: 0 !important; position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 2147483630 !important; width: auto !important; } .fr-box.fr-fullscreen.fr-basic.fr-top .fr-wrapper { border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .fr-box.fr-fullscreen.fr-basic.fr-bottom .fr-wrapper { border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .fr-box.fr-fullscreen .fr-toolbar { border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .fr-box.fr-fullscreen .fr-toolbar.fr-top { top: 0 !important; } .fr-box.fr-fullscreen .fr-toolbar.fr-bottom { bottom: 0 !important; } .fr-box.fr-fullscreen .second-toolbar { margin-top: 0; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .fr-fullscreen-wrapper { z-index: 2147483640 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .clearfix::after { clear: both; display: block; content: ""; height: 0; } .hide-by-clipping { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal { text-align: left; padding: 20px 20px 10px; } .fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table { border-collapse: collapse; font-size: 14px; line-height: 1.5; width: 100%; } .fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table + table { margin-top: 20px; } .fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tr { border: 0; } .fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table th { text-align: left; } .fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table th, .fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table td { padding: 6px 0 4px; } .fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody tr { border-bottom: solid 1px #ebebeb; } .fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody td:first-child { width: 60%; color: #646464; } .fr-modal .fr-modal-wrapper .fr-modal-body .fr-help-modal table tbody td:nth-child(n+2) { letter-spacing: 0.5px; } .clearfix::after { clear: both; display: block; content: ""; height: 0; } .hide-by-clipping { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .fr-element img { cursor: pointer; padding: 0 1px; } .fr-image-resizer { position: absolute; border: solid 1px #0098f7; display: none; user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; box-sizing: content-box; } .fr-image-resizer.fr-active { display: block; } .fr-image-resizer .fr-handler { display: block; position: absolute; background: #0098f7; border: solid 1px #FFF; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; z-index: 4; box-sizing: border-box; } .fr-image-resizer .fr-handler.fr-hnw { cursor: nw-resize; } .fr-image-resizer .fr-handler.fr-hne { cursor: ne-resize; } .fr-image-resizer .fr-handler.fr-hsw { cursor: sw-resize; } .fr-image-resizer .fr-handler.fr-hse { cursor: se-resize; } .fr-image-resizer .fr-handler { width: 12px; height: 12px; } .fr-image-resizer .fr-handler.fr-hnw { left: -6px; top: -6px; } .fr-image-resizer .fr-handler.fr-hne { right: -6px; top: -6px; } .fr-image-resizer .fr-handler.fr-hsw { left: -6px; bottom: -6px; } .fr-image-resizer .fr-handler.fr-hse { right: -6px; bottom: -6px; } @media (min-width: 1200px) { .fr-image-resizer .fr-handler { width: 10px; height: 10px; } .fr-image-resizer .fr-handler.fr-hnw { left: -5px; top: -5px; } .fr-image-resizer .fr-handler.fr-hne { right: -5px; top: -5px; } .fr-image-resizer .fr-handler.fr-hsw { left: -5px; bottom: -5px; } .fr-image-resizer .fr-handler.fr-hse { right: -5px; bottom: -5px; } } .fr-image-overlay { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 2147483640; display: none; } .fr-popup .fr-image-upload-layer { border: dashed 2px #bdbdbd; padding: 25px 0; margin: 20px; position: relative; font-size: 14px; letter-spacing: 1px; line-height: 140%; text-align: center; } .fr-popup .fr-image-upload-layer:hover { background: #ebebeb; } .fr-popup .fr-image-upload-layer.fr-drop { background: #ebebeb; border-color: #0098f7; } .fr-popup .fr-image-upload-layer .fr-form { -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 2147483640; overflow: hidden; margin: 0 !important; padding: 0 !important; width: 100% !important; } .fr-popup .fr-image-upload-layer .fr-form input { cursor: pointer; position: absolute; right: 0; top: 0; bottom: 0; width: 500%; height: 100%; margin: 0; font-size: 400px; } .fr-popup .fr-image-progress-bar-layer > h3 { font-size: 16px; margin: 10px 0; font-weight: normal; } .fr-popup .fr-image-progress-bar-layer > div.fr-action-buttons { display: none; } .fr-popup .fr-image-progress-bar-layer > div.fr-loader { background: #b3e0fd; height: 10px; width: 100%; margin-top: 20px; overflow: hidden; position: relative; } .fr-popup .fr-image-progress-bar-layer > div.fr-loader span { display: block; height: 100%; width: 0%; background: #0098f7; -webkit-transition: width 0.2s ease 0s; -moz-transition: width 0.2s ease 0s; -ms-transition: width 0.2s ease 0s; -o-transition: width 0.2s ease 0s; } .fr-popup .fr-image-progress-bar-layer > div.fr-loader.fr-indeterminate span { width: 30% !important; position: absolute; top: 0; animation: loading 2s linear infinite; } .fr-popup .fr-image-progress-bar-layer.fr-error > div.fr-loader { display: none; } .fr-popup .fr-image-progress-bar-layer.fr-error > div.fr-action-buttons { display: block; } .fr-image-size-layer .fr-image-group .fr-input-line { width: calc(50% - 5px); display: inline-block; } .fr-image-size-layer .fr-image-group .fr-input-line + .fr-input-line { margin-left: 10px; } .fr-uploading { -webkit-opacity: 0.4; -moz-opacity: 0.4; opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } @keyframes loading { from { left: -25%; } to { left: 100%; } } .clearfix::after { clear: both; display: block; content: ""; height: 0; } .hide-by-clipping { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .fr-modal .fr-modal-head .fr-modal-head-line::after { clear: both; display: block; content: ""; height: 0; } .fr-modal .fr-modal-head .fr-modal-head-line .fr-modal-more { margin-top: 10px; } .fr-modal .fr-modal-head .fr-modal-head-line .fr-modal-more.fr-not-available { opacity: 0; width: 0; padding: 12px 0; } .fr-modal .fr-modal-head .fr-modal-tags { padding: 0 20px; display: none; text-align: left; } .fr-modal .fr-modal-head .fr-modal-tags a { display: inline-block; opacity: 0; padding: 6px 12px; margin: 8px 0 8px 8px; text-decoration: none; border-radius: 32px; -moz-border-radius: 32px; -webkit-border-radius: 32px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-transition: opacity 0.2s ease 0s, background 0.2s ease 0s; -moz-transition: opacity 0.2s ease 0s, background 0.2s ease 0s; -ms-transition: opacity 0.2s ease 0s, background 0.2s ease 0s; -o-transition: opacity 0.2s ease 0s, background 0.2s ease 0s; cursor: pointer; background-color: #f5f5f5; } .fr-modal .fr-modal-head .fr-modal-tags a:focus { outline: none; background-color: #ebebeb; } .fr-modal .fr-modal-head .fr-modal-tags a:hover { background-color: #ebebeb; } .fr-modal .fr-modal-head .fr-modal-tags a:active { background-color: #d6d6d6; } .fr-modal .fr-modal-head .fr-modal-tags a.fr-selected-tag { background-color: #EcF5Ff; color: #0098f7; } .fr-modal .fr-modal-head .fr-modal-tags a.fr-selected-tag:focus { outline: none; background-color: #ebebeb; } .fr-modal .fr-modal-head .fr-modal-tags a.fr-selected-tag:hover { background-color: #ebebeb; } .fr-modal .fr-modal-head .fr-modal-tags a.fr-selected-tag:active { background-color: #d6d6d6; } .fr-show-tags .fr-modal-more svg path { fill: #0098f7; } div.fr-modal-body { -webkit-transition: background 0.2s ease 0s; -moz-transition: background 0.2s ease 0s; -ms-transition: background 0.2s ease 0s; -o-transition: background 0.2s ease 0s; } div.fr-modal-body .fr-preloader { display: block; margin: 50px auto; } div.fr-modal-body div.fr-image-list { text-align: center; margin: 0 20px; padding: 0; } div.fr-modal-body div.fr-image-list .fr-list-column { float: left; width: calc((100% - 20px) / 2); } @media (min-width: 768px) and (max-width: 1199px) { div.fr-modal-body div.fr-image-list .fr-list-column { width: calc((100% - 40px) / 3); } } @media (min-width: 1200px) { div.fr-modal-body div.fr-image-list .fr-list-column { width: calc((100% - 60px) / 4); } } div.fr-modal-body div.fr-image-list .fr-list-column + .fr-list-column { margin-left: 20px; } div.fr-modal-body div.fr-image-list div.fr-image-container { position: relative; width: 100%; display: block; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; overflow: hidden; } div.fr-modal-body div.fr-image-list div.fr-image-container:first-child { margin-top: 20px; } div.fr-modal-body div.fr-image-list div.fr-image-container + div { margin-top: 20px; } div.fr-modal-body div.fr-image-list div.fr-image-container.fr-image-deleting::after { position: absolute; -webkit-opacity: 0.5; -moz-opacity: 0.5; opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition: opacity 0.2s ease 0s; -moz-transition: opacity 0.2s ease 0s; -ms-transition: opacity 0.2s ease 0s; -o-transition: opacity 0.2s ease 0s; background: #000; content: ""; top: 0; left: 0; bottom: 0; right: 0; z-index: 2; } div.fr-modal-body div.fr-image-list div.fr-image-container.fr-image-deleting::before { content: attr(data-deleting); color: #FFF; top: 0; left: 0; bottom: 0; right: 0; margin: auto; position: absolute; z-index: 3; font-size: 15px; height: 20px; } div.fr-modal-body div.fr-image-list div.fr-image-container.fr-empty { height: 95px; background: #CCCCCC; z-index: 1; } div.fr-modal-body div.fr-image-list div.fr-image-container.fr-empty::after { position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; content: attr(data-loading); display: inline-block; height: 20px; } div.fr-modal-body div.fr-image-list div.fr-image-container img { width: 100%; vertical-align: middle; position: relative; z-index: 2; -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s; -moz-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s; -ms-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s; -o-transition: opacity 0.2s ease 0s, filter 0.2s ease 0s; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); } div.fr-modal-body div.fr-image-list div.fr-image-container.fr-mobile-selected img { -webkit-opacity: 0.75; -moz-opacity: 0.75; opacity: 0.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } div.fr-modal-body div.fr-image-list div.fr-image-container.fr-mobile-selected .fr-delete-img, div.fr-modal-body div.fr-image-list div.fr-image-container.fr-mobile-selected .fr-insert-img { display: inline-block; } div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img, div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img { display: none; top: 50%; border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; -webkit-transition: background 0.2s ease 0s, color 0.2s ease 0s; -moz-transition: background 0.2s ease 0s, color 0.2s ease 0s; -ms-transition: background 0.2s ease 0s, color 0.2s ease 0s; -o-transition: background 0.2s ease 0s, color 0.2s ease 0s; box-sizing: border-box; position: absolute; cursor: pointer; margin: 0; line-height: 40px; text-decoration: none; z-index: 3; } div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img { background: #B8312F; fill: #FFF; padding: 8px; left: 50%; -webkit-transform: translateY(-50%) translateX(25%); -moz-transform: translateY(-50%) translateX(25%); -ms-transform: translateY(-50%) translateX(25%); -o-transform: translateY(-50%) translateX(25%); } div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img { background: #FFF; fill: #0098f7; padding: 8px; left: 50%; -webkit-transform: translateY(-50%) translateX(-125%); -moz-transform: translateY(-50%) translateX(-125%); -ms-transform: translateY(-50%) translateX(-125%); -o-transform: translateY(-50%) translateX(-125%); } .fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container:hover img { -webkit-opacity: 0.75; -moz-opacity: 0.75; opacity: 0.75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container:hover .fr-delete-img, .fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container:hover .fr-insert-img { display: inline-block; width: 40px; height: 40px; } .fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container .fr-delete-img:hover { background: #bf4644; color: #FFF; } .fr-desktop .fr-modal-wrapper div.fr-modal-body div.fr-image-list div.fr-image-container .fr-insert-img:hover { background: #ebebeb; } .clearfix::after { clear: both; display: block; content: ""; height: 0; } .hide-by-clipping { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .fr-line-breaker { cursor: text; border-top: 1px solid #0098f7; position: fixed; z-index: 2; display: none; } .fr-line-breaker.fr-visible { display: block; } .fr-line-breaker a.fr-floating-btn { position: absolute; left: calc(50% - 20px); top: -20px; } .fr-line-breaker a.fr-floating-btn svg { margin: 8px; height: 24px; width: 24px; } .clearfix::after { clear: both; display: block; content: ""; height: 0; } .hide-by-clipping { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .fr-quick-insert { position: absolute; z-index: 2147483639; white-space: nowrap; padding-right: 10px; box-sizing: content-box; } .fr-quick-insert a.fr-floating-btn svg { margin: 8px; width: 24px; height: 24px; } .fr-quick-insert.fr-on a.fr-floating-btn svg { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); } .fr-quick-insert.fr-hidden { display: none; } .fr-qi-helper { position: absolute; z-index: 3; padding-left: 20px; white-space: nowrap; } .fr-qi-helper a.fr-btn.fr-floating-btn { text-align: center; padding: 6px 10px 10px 10px; display: inline-block; color: #222222; background: #FFF; -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); } .fr-qi-helper a.fr-btn.fr-floating-btn svg { fill: #222222; } .fr-qi-helper a.fr-btn.fr-floating-btn.fr-size-1 { -webkit-opacity: 1; -moz-opacity: 1; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); } .clearfix::after { clear: both; display: block; content: ""; height: 0; } .hide-by-clipping { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .fr-popup .fr-buttons.fr-tabs .fr-special-character-category { padding: 10px 15px; } .fr-popup .fr-buttons.fr-tabs .fr-special-character-category span { font-weight: normal; font-size: 16px; } .fr-popup .fr-special-character { width: 24px; height: 24px; } @media screen and (-ms-high-contrast: active) and (min-width: 768px), (-ms-high-contrast: none) and (min-width: 768px) { .fr-popup .fr-icon-container.fr-sc-container { width: 368px; } } .clearfix::after { clear: both; display: block; content: ""; height: 0; } .hide-by-clipping { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .fr-element table td.fr-selected-cell, .fr-element table th.fr-selected-cell { border: 1px double #0098f7; } .fr-element table tr { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .fr-element table td, .fr-element table th { user-select: text; -o-user-select: text; -moz-user-select: text; -khtml-user-select: text; -webkit-user-select: text; -ms-user-select: text; } .fr-element .fr-no-selection table td, .fr-element .fr-no-selection table th { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .fr-table-resizer { cursor: col-resize; position: absolute; z-index: 3; display: none; } .fr-table-resizer.fr-moving { z-index: 2; } .fr-table-resizer div { -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; border-right: 1px solid #0098f7; } .fr-no-selection { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .fr-popup .fr-table-size { margin: 20px; } .fr-popup .fr-table-size .fr-table-size-info { text-align: center; font-size: 14px; } .fr-popup .fr-table-size .fr-select-table-size { line-height: 0; padding: 5px; white-space: nowrap; } .fr-popup .fr-table-size .fr-select-table-size > span { display: inline-block; padding: 0 4px 4px 0; background: transparent; } .fr-popup .fr-table-size .fr-select-table-size > span > span { display: inline-block; width: 18px; height: 18px; border: 1px solid #DDD; } .fr-popup .fr-table-size .fr-select-table-size > span.hover { background: transparent; } .fr-popup .fr-table-size .fr-select-table-size > span.hover > span { background: rgba(0, 152, 247, 0.3); border: solid 1px #0098f7; } .fr-popup .fr-table-size .fr-select-table-size .new-line::after { clear: both; display: block; content: ""; height: 0; } .fr-popup.fr-above .fr-table-size .fr-select-table-size > span { display: inline-block !important; } .fr-popup .fr-table-colors { display: block; padding: 20px; padding-bottom: 0; } .fr-popup.fr-desktop .fr-table-size .fr-select-table-size > span > span { width: 12px; height: 12px; } .fr-insert-helper { position: absolute; z-index: 9999; white-space: nowrap; } .clearfix::after { clear: both; display: block; content: ""; height: 0; } .hide-by-clipping { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .fr-element .fr-video { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .fr-element .fr-video::after { position: absolute; content: ""; z-index: 1; top: 0; left: 0; right: 0; bottom: 0; cursor: pointer; display: block; background: transparent; } .fr-element .fr-video.fr-active > * { z-index: 2; position: relative; } .fr-element .fr-video > * { box-sizing: content-box; max-width: 100%; border: none; } .fr-box .fr-video-resizer { position: absolute; border: solid 1px #0098f7; display: none; user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .fr-box .fr-video-resizer.fr-active { display: block; } .fr-box .fr-video-resizer .fr-handler { display: block; position: absolute; background: #0098f7; border: solid 1px #FFF; z-index: 4; box-sizing: border-box; } .fr-box .fr-video-resizer .fr-handler.fr-hnw { cursor: nw-resize; } .fr-box .fr-video-resizer .fr-handler.fr-hne { cursor: ne-resize; } .fr-box .fr-video-resizer .fr-handler.fr-hsw { cursor: sw-resize; } .fr-box .fr-video-resizer .fr-handler.fr-hse { cursor: se-resize; } .fr-box .fr-video-resizer .fr-handler { width: 12px; height: 12px; } .fr-box .fr-video-resizer .fr-handler.fr-hnw { left: -6px; top: -6px; } .fr-box .fr-video-resizer .fr-handler.fr-hne { right: -6px; top: -6px; } .fr-box .fr-video-resizer .fr-handler.fr-hsw { left: -6px; bottom: -6px; } .fr-box .fr-video-resizer .fr-handler.fr-hse { right: -6px; bottom: -6px; } @media (min-width: 1200px) { .fr-box .fr-video-resizer .fr-handler { width: 10px; height: 10px; } .fr-box .fr-video-resizer .fr-handler.fr-hnw { left: -5px; top: -5px; } .fr-box .fr-video-resizer .fr-handler.fr-hne { right: -5px; top: -5px; } .fr-box .fr-video-resizer .fr-handler.fr-hsw { left: -5px; bottom: -5px; } .fr-box .fr-video-resizer .fr-handler.fr-hse { right: -5px; bottom: -5px; } } .fr-popup .fr-video-size-layer .fr-video-group .fr-input-line { width: calc(50% - 5px); display: inline-block; } .fr-popup .fr-video-size-layer .fr-video-group .fr-input-line + .fr-input-line { margin-left: 10px; } .fr-popup .fr-video-upload-layer { border: dashed 2px #bdbdbd; padding: 25px 0; margin: 20px; position: relative; font-size: 14px; letter-spacing: 1px; line-height: 140%; text-align: center; } .fr-popup .fr-video-upload-layer:hover { background: #ebebeb; } .fr-popup .fr-video-upload-layer.fr-drop { background: #ebebeb; border-color: #0098f7; } .fr-popup .fr-video-upload-layer .fr-form { -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 2147483640; overflow: hidden; margin: 0 !important; padding: 0 !important; width: 100% !important; } .fr-popup .fr-video-upload-layer .fr-form input { cursor: pointer; position: absolute; right: 0; top: 0; bottom: 0; width: 500%; height: 100%; margin: 0; font-size: 400px; } .fr-popup .fr-video-progress-bar-layer > h3 { font-size: 16px; margin: 10px 0; font-weight: normal; } .fr-popup .fr-video-progress-bar-layer > div.fr-action-buttons { display: none; } .fr-popup .fr-video-progress-bar-layer > div.fr-loader { background: #b3e0fd; height: 10px; width: 100%; margin-top: 20px; overflow: hidden; position: relative; } .fr-popup .fr-video-progress-bar-layer > div.fr-loader span { display: block; height: 100%; width: 0%; background: #0098f7; -webkit-transition: width 0.2s ease 0s; -moz-transition: width 0.2s ease 0s; -ms-transition: width 0.2s ease 0s; -o-transition: width 0.2s ease 0s; } .fr-popup .fr-video-progress-bar-layer > div.fr-loader.fr-indeterminate span { width: 30% !important; position: absolute; top: 0; animation: loading 2s linear infinite; } .fr-popup .fr-video-progress-bar-layer.fr-error > div.fr-loader { display: none; } .fr-popup .fr-video-progress-bar-layer.fr-error > div.fr-action-buttons { display: block; } .fr-video-overlay { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 2147483640; display: none; } .clearfix::after { clear: both; display: block; content: ""; height: 0; } .hide-by-clipping { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } img.fr-rounded, .fr-img-caption.fr-rounded img { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } img.fr-bordered, .fr-img-caption.fr-bordered img { border: solid 5px #CCC; } img.fr-bordered { box-sizing: content-box; } .fr-img-caption.fr-bordered img { box-sizing: border-box; } .fr-view { word-wrap: break-word; } .fr-view span[style~="color:"] a { color: inherit; } .fr-view strong { font-weight: 700; } .fr-view table { border: none; border-collapse: collapse; empty-cells: show; max-width: 100%; } .fr-view table td { min-width: 5px; } .fr-view table.fr-dashed-borders td, .fr-view table.fr-dashed-borders th { border-style: dashed; } .fr-view table.fr-alternate-rows tbody tr:nth-child(2n) { background: whitesmoke; } .fr-view table td, .fr-view table th { border: 1px solid #DDD; } .fr-view table td:empty, .fr-view table th:empty { height: 20px; } .fr-view table td.fr-highlighted, .fr-view table th.fr-highlighted { border: 1px double red; } .fr-view table td.fr-thick, .fr-view table th.fr-thick { border-width: 2px; } .fr-view table th { background: #ececec; } .fr-view hr { clear: both; user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; -moz-column-break-after: always; break-after: always; page-break-after: always; } .fr-view .fr-file { position: relative; } .fr-view .fr-file::after { position: relative; content: "📎"; font-weight: normal; } .fr-view pre { white-space: pre-wrap; word-wrap: break-word; overflow: visible; } .fr-view[dir=rtl] blockquote { border-left: none; border-right: solid 2px #5E35B1; margin-right: 0; padding-right: 5px; padding-left: 0; } .fr-view[dir=rtl] blockquote blockquote { border-color: #00BCD4; } .fr-view[dir=rtl] blockquote blockquote blockquote { border-color: #43A047; } .fr-view blockquote { border-left: solid 2px #5E35B1; margin-left: 0; padding-left: 5px; color: #5E35B1; } .fr-view blockquote blockquote { border-color: #00BCD4; color: #00BCD4; } .fr-view blockquote blockquote blockquote { border-color: #43A047; color: #43A047; } .fr-view span.fr-emoticon { font-weight: normal; font-family: "Apple Color Emoji", "Segoe UI Emoji", "NotoColorEmoji", "Segoe UI Symbol", "Android Emoji", "EmojiSymbols"; display: inline; line-height: 0; } .fr-view span.fr-emoticon.fr-emoticon-img { background-repeat: no-repeat !important; font-size: inherit; height: 1em; width: 1em; min-height: 20px; min-width: 20px; display: inline-block; margin: -0.1em 0.1em 0.1em; line-height: 1; vertical-align: middle; } .fr-view .fr-text-gray { color: #AAA !important; } .fr-view .fr-text-bordered { border-top: solid 1px #222; border-bottom: solid 1px #222; padding: 10px 0; } .fr-view .fr-text-spaced { letter-spacing: 1px; } .fr-view .fr-text-uppercase { text-transform: uppercase; } .fr-view .fr-class-highlighted { background-color: #ffff00; } .fr-view .fr-class-code { border-color: #cccccc; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; background: #f5f5f5; padding: 10px; font-family: "Courier New", Courier, monospace; } .fr-view .fr-class-transparency { opacity: 0.5; } .fr-view img { position: relative; max-width: 100%; } .fr-view img.fr-dib { margin: 5px auto; display: block; float: none; vertical-align: top; } .fr-view img.fr-dib.fr-fil { margin-left: 0; text-align: left; } .fr-view img.fr-dib.fr-fir { margin-right: 0; text-align: right; } .fr-view img.fr-dii { display: inline-block; float: none; vertical-align: bottom; margin-left: 5px; margin-right: 5px; max-width: calc(100% - 10px); } .fr-view img.fr-dii.fr-fil { float: left; margin: 5px 5px 5px 0; max-width: calc(100% - 5px); } .fr-view img.fr-dii.fr-fir { float: right; margin: 5px 0 5px 5px; max-width: calc(100% - 5px); } .fr-view span.fr-img-caption { position: relative; max-width: 100%; } .fr-view span.fr-img-caption.fr-dib { margin: 5px auto; display: block; float: none; vertical-align: top; } .fr-view span.fr-img-caption.fr-dib.fr-fil { margin-left: 0; text-align: left; } .fr-view span.fr-img-caption.fr-dib.fr-fir { margin-right: 0; text-align: right; } .fr-view span.fr-img-caption.fr-dii { display: inline-block; float: none; vertical-align: bottom; margin-left: 5px; margin-right: 5px; max-width: calc(100% - 10px); } .fr-view span.fr-img-caption.fr-dii.fr-fil { float: left; margin: 5px 5px 5px 0; max-width: calc(100% - 5px); } .fr-view span.fr-img-caption.fr-dii.fr-fir { float: right; margin: 5px 0 5px 5px; max-width: calc(100% - 5px); } .fr-view .fr-video { text-align: center; position: relative; } .fr-view .fr-video.fr-rv { padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .fr-view .fr-video.fr-rv > iframe, .fr-view .fr-video.fr-rv object, .fr-view .fr-video.fr-rv embed { position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; } .fr-view .fr-video > * { box-sizing: content-box; max-width: 100%; border: none; } .fr-view .fr-video.fr-dvb { display: block; clear: both; } .fr-view .fr-video.fr-dvb.fr-fvl { text-align: left; } .fr-view .fr-video.fr-dvb.fr-fvr { text-align: right; } .fr-view .fr-video.fr-dvi { display: inline-block; } .fr-view .fr-video.fr-dvi.fr-fvl { float: left; } .fr-view .fr-video.fr-dvi.fr-fvr { float: right; } .fr-view a.fr-strong { font-weight: 700; } .fr-view a.fr-green { color: green; } .fr-view .fr-img-caption { text-align: center; } .fr-view .fr-img-caption .fr-img-wrap { padding: 0; margin: auto; text-align: center; width: 100%; } .fr-view .fr-img-caption .fr-img-wrap img { display: block; margin: auto; width: 100%; } .fr-view .fr-img-caption .fr-img-wrap > span { margin: auto; display: block; padding: 5px 5px 10px; font-size: 14px; font-weight: initial; box-sizing: border-box; -webkit-opacity: 0.9; -moz-opacity: 0.9; opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; width: 100%; text-align: center; } .fr-view button.fr-rounded, .fr-view input.fr-rounded, .fr-view textarea.fr-rounded { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .fr-view button.fr-large, .fr-view input.fr-large, .fr-view textarea.fr-large { font-size: 24px; } a.fr-view.fr-strong { font-weight: 700; } a.fr-view.fr-green { color: green; } img.fr-view { position: relative; max-width: 100%; } img.fr-view.fr-dib { margin: 5px auto; display: block; float: none; vertical-align: top; } img.fr-view.fr-dib.fr-fil { margin-left: 0; text-align: left; } img.fr-view.fr-dib.fr-fir { margin-right: 0; text-align: right; } img.fr-view.fr-dii { display: inline-block; float: none; vertical-align: bottom; margin-left: 5px; margin-right: 5px; max-width: calc(100% - 10px); } img.fr-view.fr-dii.fr-fil { float: left; margin: 5px 5px 5px 0; max-width: calc(100% - 5px); } img.fr-view.fr-dii.fr-fir { float: right; margin: 5px 0 5px 5px; max-width: calc(100% - 5px); } span.fr-img-caption.fr-view { position: relative; max-width: 100%; } span.fr-img-caption.fr-view.fr-dib { margin: 5px auto; display: block; float: none; vertical-align: top; } span.fr-img-caption.fr-view.fr-dib.fr-fil { margin-left: 0; text-align: left; } span.fr-img-caption.fr-view.fr-dib.fr-fir { margin-right: 0; text-align: right; } span.fr-img-caption.fr-view.fr-dii { display: inline-block; float: none; vertical-align: bottom; margin-left: 5px; margin-right: 5px; max-width: calc(100% - 10px); } span.fr-img-caption.fr-view.fr-dii.fr-fil { float: left; margin: 5px 5px 5px 0; max-width: calc(100% - 5px); } span.fr-img-caption.fr-view.fr-dii.fr-fir { float: right; margin: 5px 0 5px 5px; max-width: calc(100% - 5px); } .tox { box-shadow: none; box-sizing: content-box; color: #222f3e; cursor: auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 16px; font-style: normal; font-weight: normal; line-height: normal; -webkit-tap-highlight-color: transparent; text-decoration: none; text-shadow: none; text-transform: none; vertical-align: initial; white-space: normal; } .tox *:not(svg):not(rect) { box-sizing: inherit; color: inherit; cursor: inherit; direction: inherit; font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; -webkit-tap-highlight-color: inherit; text-align: inherit; text-decoration: inherit; text-shadow: inherit; text-transform: inherit; vertical-align: inherit; white-space: inherit; } .tox *:not(svg):not(rect) { /* stylelint-disable-line no-duplicate-selectors */ background: transparent; border: 0; box-shadow: none; float: none; height: auto; margin: 0; max-width: none; outline: 0; padding: 0; position: static; width: auto; } .tox:not([dir=rtl]) { direction: ltr; text-align: left; } .tox[dir=rtl] { direction: rtl; text-align: right; } .tox-tinymce { border: 2px solid #eeeeee; border-radius: 10px; box-shadow: none; box-sizing: border-box; display: flex; flex-direction: column; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; overflow: hidden; position: relative; visibility: inherit !important; } .tox.tox-tinymce-inline { border: none; box-shadow: none; overflow: initial; } .tox.tox-tinymce-inline .tox-editor-container { overflow: initial; } .tox.tox-tinymce-inline .tox-editor-header { background-color: #fff; border: 2px solid #eeeeee; border-radius: 10px; box-shadow: none; overflow: hidden; } .tox-tinymce-aux { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; z-index: 1300; } .tox-tinymce *:focus, .tox-tinymce-aux *:focus { outline: none; } button::-moz-focus-inner { border: 0; } .tox[dir=rtl] .tox-icon--flip svg { transform: rotateY(180deg); } .tox .accessibility-issue__header { align-items: center; display: flex; margin-bottom: 4px; } .tox .accessibility-issue__description { align-items: stretch; border-radius: 6px; display: flex; justify-content: space-between; } .tox .accessibility-issue__description > div { padding-bottom: 4px; } .tox .accessibility-issue__description > div > div { align-items: center; display: flex; margin-bottom: 4px; } .tox .accessibility-issue__description > div > div .tox-icon svg { display: block; } .tox .accessibility-issue__repair { margin-top: 16px; } .tox .tox-dialog__body-content .accessibility-issue--info .accessibility-issue__description { background-color: rgba(0, 101, 216, 0.1); color: #222f3e; } .tox .tox-dialog__body-content .accessibility-issue--info .tox-form__group h2 { color: #006ce7; } .tox .tox-dialog__body-content .accessibility-issue--info .tox-icon svg { fill: #006ce7; } .tox .tox-dialog__body-content .accessibility-issue--info a.tox-button--naked.tox-button--icon { background-color: #006ce7; color: #fff; } .tox .tox-dialog__body-content .accessibility-issue--info a.tox-button--naked.tox-button--icon:hover, .tox .tox-dialog__body-content .accessibility-issue--info a.tox-button--naked.tox-button--icon:focus { background-color: #0060ce; } .tox .tox-dialog__body-content .accessibility-issue--info a.tox-button--naked.tox-button--icon:active { background-color: #0054b4; } .tox .tox-dialog__body-content .accessibility-issue--warn { /* stylelint-disable-next-line no-descending-specificity */ } .tox .tox-dialog__body-content .accessibility-issue--warn .accessibility-issue__description { background-color: rgba(255, 165, 0, 0.08); color: #222f3e; } .tox .tox-dialog__body-content .accessibility-issue--warn .tox-form__group h2 { color: #8f5d00; } .tox .tox-dialog__body-content .accessibility-issue--warn .tox-icon svg { fill: #8f5d00; } .tox .tox-dialog__body-content .accessibility-issue--warn a.tox-button--naked.tox-button--icon { background-color: #FFE89D; color: #222f3e; } .tox .tox-dialog__body-content .accessibility-issue--warn a.tox-button--naked.tox-button--icon:hover, .tox .tox-dialog__body-content .accessibility-issue--warn a.tox-button--naked.tox-button--icon:focus { background-color: #F2D574; color: #222f3e; } .tox .tox-dialog__body-content .accessibility-issue--warn a.tox-button--naked.tox-button--icon:active { background-color: #E8C657; color: #222f3e; } .tox .tox-dialog__body-content .accessibility-issue--error { /* stylelint-disable-next-line no-descending-specificity */ } .tox .tox-dialog__body-content .accessibility-issue--error .accessibility-issue__description { background-color: rgba(204, 0, 0, 0.1); color: #222f3e; } .tox .tox-dialog__body-content .accessibility-issue--error .tox-form__group h2 { color: #c00; } .tox .tox-dialog__body-content .accessibility-issue--error .tox-icon svg { fill: #c00; } .tox .tox-dialog__body-content .accessibility-issue--error a.tox-button--naked.tox-button--icon { background-color: #F2BFBF; color: #222f3e; } .tox .tox-dialog__body-content .accessibility-issue--error a.tox-button--naked.tox-button--icon:hover, .tox .tox-dialog__body-content .accessibility-issue--error a.tox-button--naked.tox-button--icon:focus { background-color: #E9A4A4; color: #222f3e; } .tox .tox-dialog__body-content .accessibility-issue--error a.tox-button--naked.tox-button--icon:active { background-color: #EE9494; color: #222f3e; } .tox .tox-dialog__body-content .accessibility-issue--success .accessibility-issue__description { background-color: rgba(120, 171, 70, 0.1); color: #222f3e; } .tox .tox-dialog__body-content .accessibility-issue--success .accessibility-issue__description > *:last-child { display: none; } .tox .tox-dialog__body-content .accessibility-issue--success .tox-form__group h2 { color: #527530; } .tox .tox-dialog__body-content .accessibility-issue--success .tox-icon svg { fill: #527530; } .tox .tox-dialog__body-content .accessibility-issue__header .tox-form__group h1, .tox .tox-dialog__body-content .tox-form__group .accessibility-issue__description h2 { font-size: 14px; margin-top: 0; } .tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__header .tox-button { margin-left: 4px; } .tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__header > *:nth-last-child(2) { margin-left: auto; } .tox:not([dir=rtl]) .tox-dialog__body-content .accessibility-issue__description { padding: 4px 4px 4px 8px; } .tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__header .tox-button { margin-right: 4px; } .tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__header > *:nth-last-child(2) { margin-right: auto; } .tox[dir=rtl] .tox-dialog__body-content .accessibility-issue__description { padding: 4px 8px 4px 4px; } .tox .tox-advtemplate .tox-form__grid { flex: 1; } .tox .tox-advtemplate .tox-form__grid > div:first-child { display: flex; flex-direction: column; width: 30%; } .tox .tox-advtemplate .tox-form__grid > div:first-child > div:nth-child(2) { flex-basis: 0; flex-grow: 1; overflow: auto; } @media only screen and (max-width: 767px) { body:not(.tox-force-desktop) .tox .tox-advtemplate .tox-form__grid > div:first-child { width: 100%; } } .tox .tox-advtemplate iframe { border-color: #eeeeee; border-radius: 10px; border-style: solid; border-width: 1px; margin: 0 10px; } .tox .tox-anchorbar { display: flex; flex: 0 0 auto; } .tox .tox-bottom-anchorbar { display: flex; flex: 0 0 auto; } .tox .tox-bar { display: flex; flex: 0 0 auto; } .tox .tox-button { background-color: #006ce7; background-image: none; background-position: 0 0; background-repeat: repeat; border-color: #006ce7; border-radius: 6px; border-style: solid; border-width: 1px; box-shadow: none; box-sizing: border-box; color: #fff; cursor: pointer; display: inline-block; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 14px; font-style: normal; font-weight: bold; letter-spacing: normal; line-height: 24px; margin: 0; outline: none; padding: 4px 16px; position: relative; text-align: center; text-decoration: none; text-transform: none; white-space: nowrap; } .tox .tox-button::before { border-radius: 6px; bottom: -1px; box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px #006ce7, 0 0 0 3px rgba(0, 108, 231, 0.25); content: ""; left: -1px; opacity: 0; pointer-events: none; position: absolute; right: -1px; top: -1px; } .tox .tox-button[disabled] { background-color: #006ce7; background-image: none; border-color: #006ce7; box-shadow: none; color: rgba(255, 255, 255, 0.5); cursor: not-allowed; } .tox .tox-button:focus:not(:disabled) { background-color: #0060ce; background-image: none; border-color: #0060ce; box-shadow: none; color: #fff; } .tox .tox-button:focus-visible:not(:disabled)::before { opacity: 1; } .tox .tox-button:hover:not(:disabled) { background-color: #0060ce; background-image: none; border-color: #0060ce; box-shadow: none; color: #fff; } .tox .tox-button:active:not(:disabled) { background-color: #0054b4; background-image: none; border-color: #0054b4; box-shadow: none; color: #fff; } .tox .tox-button.tox-button--enabled { background-color: #0054b4; background-image: none; border-color: #0054b4; box-shadow: none; color: #fff; } .tox .tox-button.tox-button--enabled[disabled] { background-color: #0054b4; background-image: none; border-color: #0054b4; box-shadow: none; color: rgba(255, 255, 255, 0.5); cursor: not-allowed; } .tox .tox-button.tox-button--enabled:focus:not(:disabled) { background-color: #00489b; background-image: none; border-color: #00489b; box-shadow: none; color: #fff; } .tox .tox-button.tox-button--enabled:hover:not(:disabled) { background-color: #00489b; background-image: none; border-color: #00489b; box-shadow: none; color: #fff; } .tox .tox-button.tox-button--enabled:active:not(:disabled) { background-color: #003c81; background-image: none; border-color: #003c81; box-shadow: none; color: #fff; } .tox .tox-button--icon-and-text, .tox .tox-button.tox-button--icon-and-text, .tox .tox-button.tox-button--secondary.tox-button--icon-and-text { display: flex; padding: 5px 4px; } .tox .tox-button--icon-and-text .tox-icon svg, .tox .tox-button.tox-button--icon-and-text .tox-icon svg, .tox .tox-button.tox-button--secondary.tox-button--icon-and-text .tox-icon svg { display: block; fill: currentColor; } .tox .tox-button--secondary { background-color: #f0f0f0; background-image: none; background-position: 0 0; background-repeat: repeat; border-color: #f0f0f0; border-radius: 6px; border-style: solid; border-width: 1px; box-shadow: none; color: #222f3e; font-size: 14px; font-style: normal; font-weight: bold; letter-spacing: normal; outline: none; padding: 4px 16px; text-decoration: none; text-transform: none; } .tox .tox-button--secondary[disabled] { background-color: #f0f0f0; background-image: none; border-color: #f0f0f0; box-shadow: none; color: rgba(34, 47, 62, 0.5); } .tox .tox-button--secondary:focus:not(:disabled) { background-color: #e3e3e3; background-image: none; border-color: #e3e3e3; box-shadow: none; color: #222f3e; } .tox .tox-button--secondary:hover:not(:disabled) { background-color: #e3e3e3; background-image: none; border-color: #e3e3e3; box-shadow: none; color: #222f3e; } .tox .tox-button--secondary:active:not(:disabled) { background-color: #d6d6d6; background-image: none; border-color: #d6d6d6; box-shadow: none; color: #222f3e; } .tox .tox-button--secondary.tox-button--enabled { background-color: #a8c8ed; background-image: none; border-color: #a8c8ed; box-shadow: none; color: #222f3e; } .tox .tox-button--secondary.tox-button--enabled[disabled] { background-color: #a8c8ed; background-image: none; border-color: #a8c8ed; box-shadow: none; color: rgba(34, 47, 62, 0.5); } .tox .tox-button--secondary.tox-button--enabled:focus:not(:disabled) { background-color: #93bbe9; background-image: none; border-color: #93bbe9; box-shadow: none; color: #222f3e; } .tox .tox-button--secondary.tox-button--enabled:hover:not(:disabled) { background-color: #93bbe9; background-image: none; border-color: #93bbe9; box-shadow: none; color: #222f3e; } .tox .tox-button--secondary.tox-button--enabled:active:not(:disabled) { background-color: #7daee4; background-image: none; border-color: #7daee4; box-shadow: none; color: #222f3e; } .tox .tox-button--icon, .tox .tox-button.tox-button--icon, .tox .tox-button.tox-button--secondary.tox-button--icon { padding: 4px; } .tox .tox-button--icon .tox-icon svg, .tox .tox-button.tox-button--icon .tox-icon svg, .tox .tox-button.tox-button--secondary.tox-button--icon .tox-icon svg { display: block; fill: currentColor; } .tox .tox-button-link { background: 0; border: none; box-sizing: border-box; cursor: pointer; display: inline-block; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 16px; font-weight: normal; line-height: 1.3; margin: 0; padding: 0; white-space: nowrap; } .tox .tox-button-link--sm { font-size: 14px; } .tox .tox-button--naked { background-color: transparent; border-color: transparent; box-shadow: unset; color: #222f3e; } .tox .tox-button--naked[disabled] { background-color: rgba(34, 47, 62, 0.12); border-color: transparent; box-shadow: unset; color: rgba(34, 47, 62, 0.5); } .tox .tox-button--naked:hover:not(:disabled) { background-color: rgba(34, 47, 62, 0.12); border-color: transparent; box-shadow: unset; color: #222f3e; } .tox .tox-button--naked:focus:not(:disabled) { background-color: rgba(34, 47, 62, 0.12); border-color: transparent; box-shadow: unset; color: #222f3e; } .tox .tox-button--naked:active:not(:disabled) { background-color: rgba(34, 47, 62, 0.18); border-color: transparent; box-shadow: unset; color: #222f3e; } .tox .tox-button--naked .tox-icon svg { fill: currentColor; } .tox .tox-button--naked.tox-button--icon:hover:not(:disabled) { color: #222f3e; } .tox .tox-checkbox { align-items: center; border-radius: 6px; cursor: pointer; display: flex; height: 36px; min-width: 36px; } .tox .tox-checkbox__input { /* Hide from view but visible to screen readers */ height: 1px; overflow: hidden; position: absolute; top: auto; width: 1px; } .tox .tox-checkbox__icons { align-items: center; border-radius: 6px; box-shadow: 0 0 0 2px transparent; box-sizing: content-box; display: flex; height: 24px; justify-content: center; padding: 3px; width: 24px; } .tox .tox-checkbox__icons .tox-checkbox-icon__unchecked svg { display: block; fill: rgba(34, 47, 62, 0.3); } .tox .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg { display: none; fill: #006ce7; } .tox .tox-checkbox__icons .tox-checkbox-icon__checked svg { display: none; fill: #006ce7; } .tox .tox-checkbox--disabled { color: rgba(34, 47, 62, 0.5); cursor: not-allowed; } .tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__checked svg { fill: rgba(34, 47, 62, 0.5); } .tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__unchecked svg { fill: rgba(34, 47, 62, 0.5); } .tox .tox-checkbox--disabled .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg { fill: rgba(34, 47, 62, 0.5); } .tox input.tox-checkbox__input:checked + .tox-checkbox__icons .tox-checkbox-icon__unchecked svg { display: none; } .tox input.tox-checkbox__input:checked + .tox-checkbox__icons .tox-checkbox-icon__checked svg { display: block; } .tox input.tox-checkbox__input:indeterminate + .tox-checkbox__icons .tox-checkbox-icon__unchecked svg { display: none; } .tox input.tox-checkbox__input:indeterminate + .tox-checkbox__icons .tox-checkbox-icon__indeterminate svg { display: block; } .tox input.tox-checkbox__input:focus + .tox-checkbox__icons { border-radius: 6px; box-shadow: inset 0 0 0 1px #006ce7; padding: 3px; } .tox:not([dir=rtl]) .tox-checkbox__label { margin-left: 4px; } .tox:not([dir=rtl]) .tox-checkbox__input { left: -10000px; } .tox:not([dir=rtl]) .tox-bar .tox-checkbox { margin-left: 4px; } .tox[dir=rtl] .tox-checkbox__label { margin-right: 4px; } .tox[dir=rtl] .tox-checkbox__input { right: -10000px; } .tox[dir=rtl] .tox-bar .tox-checkbox { margin-right: 4px; } .tox { /* stylelint-disable-next-line no-descending-specificity */ } .tox .tox-collection--toolbar .tox-collection__group { display: flex; padding: 0; } .tox .tox-collection--grid .tox-collection__group { display: flex; flex-wrap: wrap; max-height: 208px; overflow-x: hidden; overflow-y: auto; padding: 0; } .tox .tox-collection--list .tox-collection__group { border-bottom-width: 0; border-color: #e3e3e3; border-left-width: 0; border-right-width: 0; border-style: solid; border-top-width: 1px; padding: 4px 0; } .tox .tox-collection--list .tox-collection__group:first-child { border-top-width: 0; } .tox .tox-collection__group-heading { background-color: #fcfcfc; color: rgba(34, 47, 62, 0.7); cursor: default; font-size: 12px; font-style: normal; font-weight: normal; margin-bottom: 4px; margin-top: -4px; padding: 4px 8px; text-transform: none; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .tox .tox-collection__item { align-items: center; border-radius: 3px; color: #222f3e; display: flex; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .tox .tox-collection--list .tox-collection__item { padding: 4px 8px; } .tox .tox-collection--toolbar .tox-collection__item { border-radius: 3px; padding: 4px; } .tox .tox-collection--grid .tox-collection__item { border-radius: 3px; padding: 4px; } .tox .tox-collection--list .tox-collection__item--enabled { background-color: #fff; color: #222f3e; } .tox .tox-collection--list .tox-collection__item--active { background-color: #cce2fa; } .tox .tox-collection--toolbar .tox-collection__item--enabled { background-color: #a6ccf7; color: #222f3e; } .tox .tox-collection--toolbar .tox-collection__item--active { background-color: #cce2fa; } .tox .tox-collection--grid .tox-collection__item--enabled { background-color: #a6ccf7; color: #222f3e; } .tox .tox-collection--grid .tox-collection__item--active:not(.tox-collection__item--state-disabled) { background-color: #cce2fa; color: #222f3e; } .tox .tox-collection--list .tox-collection__item--active:not(.tox-collection__item--state-disabled) { color: #222f3e; } .tox .tox-collection--toolbar .tox-collection__item--active:not(.tox-collection__item--state-disabled) { color: #222f3e; } .tox .tox-collection__item-icon, .tox .tox-collection__item-checkmark { align-items: center; display: flex; height: 24px; justify-content: center; width: 24px; } .tox .tox-collection__item-icon svg, .tox .tox-collection__item-checkmark svg { fill: currentColor; } .tox .tox-collection--toolbar-lg .tox-collection__item-icon { height: 48px; width: 48px; } .tox .tox-collection__item-label { color: currentColor; display: inline-block; flex: 1; font-size: 14px; font-style: normal; font-weight: normal; line-height: 24px; max-width: 100%; text-transform: none; word-break: break-all; } .tox .tox-collection__item-accessory { color: rgba(34, 47, 62, 0.7); display: inline-block; font-size: 14px; height: 24px; line-height: 24px; text-transform: none; } .tox .tox-collection__item-caret { align-items: center; display: flex; min-height: 24px; } .tox .tox-collection__item-caret::after { content: ""; font-size: 0; min-height: inherit; } .tox .tox-collection__item-caret svg { fill: #222f3e; } .tox .tox-collection__item--state-disabled { background-color: transparent; color: rgba(34, 47, 62, 0.5); cursor: not-allowed; } .tox .tox-collection__item--state-disabled .tox-collection__item-caret svg { fill: rgba(34, 47, 62, 0.5); } .tox .tox-collection--list .tox-collection__item:not(.tox-collection__item--enabled) .tox-collection__item-checkmark svg { display: none; } .tox .tox-collection--list .tox-collection__item:not(.tox-collection__item--enabled) .tox-collection__item-accessory + .tox-collection__item-checkmark { display: none; } .tox .tox-collection--horizontal { background-color: #fff; border: 1px solid #e3e3e3; border-radius: 6px; box-shadow: 0 0 2px 0 rgba(34, 47, 62, 0.2), 0 4px 8px 0 rgba(34, 47, 62, 0.15); display: flex; flex: 0 0 auto; flex-shrink: 0; flex-wrap: nowrap; margin-bottom: 0; overflow-x: auto; padding: 0; } .tox .tox-collection--horizontal .tox-collection__group { align-items: center; display: flex; flex-wrap: nowrap; margin: 0; padding: 0 4px; } .tox .tox-collection--horizontal .tox-collection__item { height: 28px; margin: 6px 1px 5px 0; padding: 0 4px; } .tox .tox-collection--horizontal .tox-collection__item-label { white-space: nowrap; } .tox .tox-collection--horizontal .tox-collection__item-caret { margin-left: 4px; } .tox .tox-collection__item-container { display: flex; } .tox .tox-collection__item-container--row { align-items: center; flex: 1 1 auto; flex-direction: row; } .tox .tox-collection__item-container--row.tox-collection__item-container--align-left { margin-right: auto; } .tox .tox-collection__item-container--row.tox-collection__item-container--align-right { justify-content: flex-end; margin-left: auto; } .tox .tox-collection__item-container--row.tox-collection__item-container--valign-top { align-items: flex-start; margin-bottom: auto; } .tox .tox-collection__item-container--row.tox-collection__item-container--valign-middle { align-items: center; } .tox .tox-collection__item-container--row.tox-collection__item-container--valign-bottom { align-items: flex-end; margin-top: auto; } .tox .tox-collection__item-container--column { align-self: center; flex: 1 1 auto; flex-direction: column; } .tox .tox-collection__item-container--column.tox-collection__item-container--align-left { align-items: flex-start; } .tox .tox-collection__item-container--column.tox-collection__item-container--align-right { align-items: flex-end; } .tox .tox-collection__item-container--column.tox-collection__item-container--valign-top { align-self: flex-start; } .tox .tox-collection__item-container--column.tox-collection__item-container--valign-middle { align-self: center; } .tox .tox-collection__item-container--column.tox-collection__item-container--valign-bottom { align-self: flex-end; } .tox:not([dir=rtl]) .tox-collection--horizontal .tox-collection__group:not(:last-of-type) { border-right: 1px solid transparent; } .tox:not([dir=rtl]) .tox-collection--list .tox-collection__item > *:not(:first-child) { margin-left: 8px; } .tox:not([dir=rtl]) .tox-collection--list .tox-collection__item > .tox-collection__item-label:first-child { margin-left: 4px; } .tox:not([dir=rtl]) .tox-collection__item-accessory { margin-left: 16px; text-align: right; } .tox:not([dir=rtl]) .tox-collection .tox-collection__item-caret { margin-left: 16px; } .tox[dir=rtl] .tox-collection--horizontal .tox-collection__group:not(:last-of-type) { border-left: 1px solid transparent; } .tox[dir=rtl] .tox-collection--list .tox-collection__item > *:not(:first-child) { margin-right: 8px; } .tox[dir=rtl] .tox-collection--list .tox-collection__item > .tox-collection__item-label:first-child { margin-right: 4px; } .tox[dir=rtl] .tox-collection__item-accessory { margin-right: 16px; text-align: left; } .tox[dir=rtl] .tox-collection .tox-collection__item-caret { margin-right: 16px; transform: rotateY(180deg); } .tox[dir=rtl] .tox-collection--horizontal .tox-collection__item-caret { margin-right: 4px; } .tox .tox-color-picker-container { display: flex; flex-direction: row; height: 225px; margin: 0; } .tox .tox-sv-palette { box-sizing: border-box; display: flex; height: 100%; } .tox .tox-sv-palette-spectrum { height: 100%; } .tox .tox-sv-palette, .tox .tox-sv-palette-spectrum { width: 225px; } .tox .tox-sv-palette-thumb { background: none; border: 1px solid black; border-radius: 50%; box-sizing: content-box; height: 12px; position: absolute; width: 12px; } .tox .tox-sv-palette-inner-thumb { border: 1px solid white; border-radius: 50%; height: 10px; position: absolute; width: 10px; } .tox .tox-hue-slider { box-sizing: border-box; height: 100%; width: 25px; } .tox .tox-hue-slider-spectrum { background: linear-gradient(to bottom, #f00, #ff0080, #f0f, #8000ff, #00f, #0080ff, #0ff, #00ff80, #0f0, #80ff00, #ff0, #ff8000, #f00); height: 100%; width: 100%; } .tox .tox-hue-slider, .tox .tox-hue-slider-spectrum { width: 20px; } .tox .tox-hue-slider-spectrum:focus, .tox .tox-sv-palette-spectrum:focus { outline: #08f solid; } .tox .tox-hue-slider-thumb { background: white; border: 1px solid black; box-sizing: content-box; height: 4px; width: 100%; } .tox .tox-rgb-form { display: flex; flex-direction: column; justify-content: space-between; } .tox .tox-rgb-form div { align-items: center; display: flex; justify-content: space-between; margin-bottom: 5px; width: inherit; } .tox .tox-rgb-form input { width: 6em; } .tox .tox-rgb-form input.tox-invalid { /* Need !important to override Chrome's focus styling unfortunately */ border: 1px solid red !important; } .tox .tox-rgb-form .tox-rgba-preview { border: 1px solid black; flex-grow: 2; margin-bottom: 0; } .tox:not([dir=rtl]) .tox-sv-palette { margin-right: 15px; } .tox:not([dir=rtl]) .tox-hue-slider { margin-right: 15px; } .tox:not([dir=rtl]) .tox-hue-slider-thumb { margin-left: -1px; } .tox:not([dir=rtl]) .tox-rgb-form label { margin-right: 0.5em; } .tox[dir=rtl] .tox-sv-palette { margin-left: 15px; } .tox[dir=rtl] .tox-hue-slider { margin-left: 15px; } .tox[dir=rtl] .tox-hue-slider-thumb { margin-right: -1px; } .tox[dir=rtl] .tox-rgb-form label { margin-left: 0.5em; } .tox .tox-toolbar .tox-swatches, .tox .tox-toolbar__primary .tox-swatches, .tox .tox-toolbar__overflow .tox-swatches { margin: 5px 0 6px 11px; } .tox .tox-collection--list .tox-collection__group .tox-swatches-menu { border: 0; margin: -4px -4px; } .tox .tox-swatches__row { display: flex; } .tox .tox-swatch { height: 30px; transition: transform 0.15s, box-shadow 0.15s; width: 30px; } .tox .tox-swatch:hover, .tox .tox-swatch:focus { box-shadow: 0 0 0 1px rgba(127, 127, 127, 0.3) inset; transform: scale(0.8); } .tox .tox-swatch--remove { align-items: center; display: flex; justify-content: center; } .tox .tox-swatch--remove svg path { stroke: #e74c3c; } .tox .tox-swatches__picker-btn { align-items: center; background-color: transparent; border: 0; cursor: pointer; display: flex; height: 30px; justify-content: center; outline: none; padding: 0; width: 30px; } .tox .tox-swatches__picker-btn svg { fill: #222f3e; height: 24px; width: 24px; } .tox .tox-swatches__picker-btn:hover { background: #cce2fa; } .tox div.tox-swatch:not(.tox-swatch--remove) svg { display: none; fill: #222f3e; height: 24px; margin: 3px 3px; width: 24px; } .tox div.tox-swatch:not(.tox-swatch--remove) svg path { fill: #fff; paint-order: stroke; stroke: #222f3e; stroke-width: 2px; } .tox div.tox-swatch:not(.tox-swatch--remove).tox-collection__item--enabled svg { display: block; } .tox:not([dir=rtl]) .tox-swatches__picker-btn { margin-left: auto; } .tox[dir=rtl] .tox-swatches__picker-btn { margin-right: auto; } .tox .tox-comment-thread { background: #fff; position: relative; } .tox .tox-comment-thread > *:not(:first-child) { margin-top: 8px; } .tox .tox-comment { background: #fff; border: 1px solid #eeeeee; border-radius: 6px; box-shadow: 0 4px 8px 0 rgba(34, 47, 62, 0.1); padding: 8px 8px 16px 8px; position: relative; } .tox .tox-comment__header { align-items: center; color: #222f3e; display: flex; justify-content: space-between; } .tox .tox-comment__date { color: #222f3e; font-size: 12px; line-height: 18px; } .tox .tox-comment__body { color: #222f3e; font-size: 14px; font-style: normal; font-weight: normal; line-height: 1.3; margin-top: 8px; position: relative; text-transform: initial; } .tox .tox-comment__body textarea { resize: none; white-space: normal; width: 100%; } .tox .tox-comment__expander { padding-top: 8px; } .tox .tox-comment__expander p { color: rgba(34, 47, 62, 0.7); font-size: 14px; font-style: normal; } .tox .tox-comment__body p { margin: 0; } .tox .tox-comment__buttonspacing { padding-top: 16px; text-align: center; } .tox .tox-comment-thread__overlay::after { background: #fff; bottom: 0; content: ""; display: flex; left: 0; opacity: 0.9; position: absolute; right: 0; top: 0; z-index: 5; } .tox .tox-comment__reply { display: flex; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; margin-top: 8px; } .tox .tox-comment__reply > *:first-child { margin-bottom: 8px; width: 100%; } .tox .tox-comment__edit { display: flex; flex-wrap: wrap; justify-content: flex-end; margin-top: 16px; } .tox .tox-comment__gradient::after { background: linear-gradient(rgba(255, 255, 255, 0), #fff); bottom: 0; content: ""; display: block; height: 5em; margin-top: -40px; position: absolute; width: 100%; } .tox .tox-comment__overlay { background: #fff; bottom: 0; display: flex; flex-direction: column; flex-grow: 1; left: 0; opacity: 0.9; position: absolute; right: 0; text-align: center; top: 0; z-index: 5; } .tox .tox-comment__loading-text { align-items: center; color: #222f3e; display: flex; flex-direction: column; position: relative; } .tox .tox-comment__loading-text > div { padding-bottom: 16px; } .tox .tox-comment__overlaytext { bottom: 0; flex-direction: column; font-size: 14px; left: 0; padding: 1em; position: absolute; right: 0; top: 0; z-index: 10; } .tox .tox-comment__overlaytext p { background-color: #fff; box-shadow: 0 0 8px 8px #fff; color: #222f3e; text-align: center; } .tox .tox-comment__overlaytext div:nth-of-type(2) { font-size: 0.8em; } .tox .tox-comment__busy-spinner { align-items: center; background-color: #fff; bottom: 0; display: flex; justify-content: center; left: 0; position: absolute; right: 0; top: 0; z-index: 20; } .tox .tox-comment__scroll { display: flex; flex-direction: column; flex-shrink: 1; overflow: auto; } .tox .tox-conversations { margin: 8px; } .tox:not([dir=rtl]) .tox-comment__edit { margin-left: 8px; } .tox:not([dir=rtl]) .tox-comment__buttonspacing > *:last-child, .tox:not([dir=rtl]) .tox-comment__edit > *:last-child, .tox:not([dir=rtl]) .tox-comment__reply > *:last-child { margin-left: 8px; } .tox[dir=rtl] .tox-comment__edit { margin-right: 8px; } .tox[dir=rtl] .tox-comment__buttonspacing > *:last-child, .tox[dir=rtl] .tox-comment__edit > *:last-child, .tox[dir=rtl] .tox-comment__reply > *:last-child { margin-right: 8px; } .tox .tox-user { align-items: center; display: flex; } .tox .tox-user__avatar svg { fill: rgba(34, 47, 62, 0.7); } .tox .tox-user__avatar img { border-radius: 50%; height: 36px; -o-object-fit: cover; object-fit: cover; vertical-align: middle; width: 36px; } .tox .tox-user__name { color: #222f3e; font-size: 14px; font-style: normal; font-weight: bold; line-height: 18px; text-transform: none; } .tox:not([dir=rtl]) .tox-user__avatar svg, .tox:not([dir=rtl]) .tox-user__avatar img { margin-right: 8px; } .tox:not([dir=rtl]) .tox-user__avatar + .tox-user__name { margin-left: 8px; } .tox[dir=rtl] .tox-user__avatar svg, .tox[dir=rtl] .tox-user__avatar img { margin-left: 8px; } .tox[dir=rtl] .tox-user__avatar + .tox-user__name { margin-right: 8px; } .tox .tox-dialog-wrap { align-items: center; bottom: 0; display: flex; justify-content: center; left: 0; position: fixed; right: 0; top: 0; z-index: 1100; } .tox .tox-dialog-wrap__backdrop { background-color: rgba(255, 255, 255, 0.75); bottom: 0; left: 0; position: absolute; right: 0; top: 0; z-index: 1; } .tox .tox-dialog-wrap__backdrop--opaque { background-color: #fff; } .tox .tox-dialog { background-color: #fff; border-color: #eeeeee; border-radius: 10px; border-style: solid; border-width: 0px; box-shadow: 0 16px 16px -10px rgba(34, 47, 62, 0.15), 0 0 40px 1px rgba(34, 47, 62, 0.15); display: flex; flex-direction: column; max-height: 100%; max-width: 480px; overflow: hidden; position: relative; width: 95vw; z-index: 2; } @media only screen and (max-width: 767px) { body:not(.tox-force-desktop) .tox .tox-dialog { align-self: flex-start; margin: 8px auto; max-height: calc(100vh - 16px); width: calc(100vw - 16px); } } .tox .tox-dialog-inline { z-index: 1100; } .tox .tox-dialog__header { align-items: center; background-color: #fff; border-bottom: none; color: #222f3e; display: flex; font-size: 16px; justify-content: space-between; padding: 8px 16px 0 16px; position: relative; } .tox .tox-dialog__header .tox-button { z-index: 1; } .tox .tox-dialog__draghandle { cursor: grab; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .tox .tox-dialog__draghandle:active { cursor: grabbing; } .tox .tox-dialog__dismiss { margin-left: auto; } .tox .tox-dialog__title { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 20px; font-style: normal; font-weight: normal; line-height: 1.3; margin: 0; text-transform: none; } .tox .tox-dialog__body { color: #222f3e; display: flex; flex: 1; font-size: 16px; font-style: normal; font-weight: normal; line-height: 1.3; min-width: 0; text-align: left; text-transform: none; } @media only screen and (max-width: 767px) { body:not(.tox-force-desktop) .tox .tox-dialog__body { flex-direction: column; } } .tox .tox-dialog__body-nav { align-items: flex-start; display: flex; flex-direction: column; flex-shrink: 0; padding: 16px 16px; } @media only screen and (min-width: 768px) { .tox .tox-dialog__body-nav { max-width: 11em; } } @media only screen and (max-width: 767px) { body:not(.tox-force-desktop) .tox .tox-dialog__body-nav { flex-direction: row; -webkit-overflow-scrolling: touch; overflow-x: auto; padding-bottom: 0; } } .tox .tox-dialog__body-nav-item { border-bottom: 2px solid transparent; color: rgba(34, 47, 62, 0.7); display: inline-block; flex-shrink: 0; font-size: 14px; line-height: 1.3; margin-bottom: 8px; max-width: 13em; text-decoration: none; } .tox .tox-dialog__body-nav-item:focus { background-color: rgba(0, 108, 231, 0.1); } .tox .tox-dialog__body-nav-item--active { border-bottom: 2px solid #006ce7; color: #006ce7; } .tox .tox-dialog__body-content { box-sizing: border-box; display: flex; flex: 1; flex-direction: column; max-height: min(650px, 100vh - 110px); overflow: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px; } .tox .tox-dialog__body-content > * { margin-bottom: 0; margin-top: 16px; } .tox .tox-dialog__body-content > *:first-child { margin-top: 0; } .tox .tox-dialog__body-content > *:last-child { margin-bottom: 0; } .tox .tox-dialog__body-content > *:only-child { margin-bottom: 0; margin-top: 0; } .tox .tox-dialog__body-content a { color: #006ce7; cursor: pointer; text-decoration: underline; } .tox .tox-dialog__body-content a:hover, .tox .tox-dialog__body-content a:focus { color: #003c81; text-decoration: underline; } .tox .tox-dialog__body-content a:focus-visible { border-radius: 1px; outline: 2px solid #006ce7; outline-offset: 2px; } .tox .tox-dialog__body-content a:active { color: #00244e; text-decoration: underline; } .tox .tox-dialog__body-content svg { fill: #222f3e; } .tox .tox-dialog__body-content strong { font-weight: bold; } .tox .tox-dialog__body-content ul { list-style-type: disc; } .tox .tox-dialog__body-content ul, .tox .tox-dialog__body-content ol, .tox .tox-dialog__body-content dd { padding-inline-start: 2.5rem; } .tox .tox-dialog__body-content ul, .tox .tox-dialog__body-content ol, .tox .tox-dialog__body-content dl { margin-bottom: 16px; } .tox .tox-dialog__body-content ul, .tox .tox-dialog__body-content ol, .tox .tox-dialog__body-content dl, .tox .tox-dialog__body-content dd, .tox .tox-dialog__body-content dt { display: block; margin-inline-end: 0; margin-inline-start: 0; } .tox .tox-dialog__body-content .tox-form__group h1 { color: #222f3e; font-size: 20px; font-style: normal; font-weight: bold; letter-spacing: normal; margin-bottom: 16px; margin-top: 2rem; text-transform: none; } .tox .tox-dialog__body-content .tox-form__group h2 { color: #222f3e; font-size: 16px; font-style: normal; font-weight: bold; letter-spacing: normal; margin-bottom: 16px; margin-top: 2rem; text-transform: none; } .tox .tox-dialog__body-content .tox-form__group p { margin-bottom: 16px; } .tox .tox-dialog__body-content .tox-form__group h1:first-child, .tox .tox-dialog__body-content .tox-form__group h2:first-child, .tox .tox-dialog__body-content .tox-form__group p:first-child { margin-top: 0; } .tox .tox-dialog__body-content .tox-form__group h1:last-child, .tox .tox-dialog__body-content .tox-form__group h2:last-child, .tox .tox-dialog__body-content .tox-form__group p:last-child { margin-bottom: 0; } .tox .tox-dialog__body-content .tox-form__group h1:only-child, .tox .tox-dialog__body-content .tox-form__group h2:only-child, .tox .tox-dialog__body-content .tox-form__group p:only-child { margin-bottom: 0; margin-top: 0; } .tox .tox-dialog__body-content .tox-form__group .tox-label.tox-label--center { text-align: center; } .tox .tox-dialog__body-content .tox-form__group .tox-label.tox-label--end { text-align: end; } .tox .tox-dialog--width-lg { height: 650px; max-width: 1200px; } .tox .tox-dialog--fullscreen { height: 100%; max-width: 100%; } .tox .tox-dialog--fullscreen .tox-dialog__body-content { max-height: 100%; } .tox .tox-dialog--width-md { max-width: 800px; } .tox .tox-dialog--width-md .tox-dialog__body-content { overflow: auto; } .tox .tox-dialog__body-content--centered { text-align: center; } .tox .tox-dialog__footer { align-items: center; background-color: #fff; border-top: none; display: flex; justify-content: space-between; padding: 8px 16px; } .tox .tox-dialog__footer-start, .tox .tox-dialog__footer-end { display: flex; } .tox .tox-dialog__busy-spinner { align-items: center; background-color: rgba(255, 255, 255, 0.75); bottom: 0; display: flex; justify-content: center; left: 0; position: absolute; right: 0; top: 0; z-index: 3; } .tox .tox-dialog__table { border-collapse: collapse; width: 100%; } .tox .tox-dialog__table thead th { font-weight: bold; padding-bottom: 8px; } .tox .tox-dialog__table thead th:first-child { padding-right: 8px; } .tox .tox-dialog__table tbody tr { border-bottom: 1px solid #626262; } .tox .tox-dialog__table tbody tr:last-child { border-bottom: none; } .tox .tox-dialog__table td { padding-bottom: 8px; padding-top: 8px; } .tox .tox-dialog__table td:first-child { padding-right: 8px; } .tox .tox-dialog__iframe { min-height: 200px; } .tox .tox-dialog__iframe.tox-dialog__iframe--opaque { background: #fff; } .tox .tox-navobj-bordered { position: relative; } .tox .tox-navobj-bordered::before { border: 1px solid #eeeeee; border-radius: 6px; content: ""; inset: 0; opacity: 1; pointer-events: none; position: absolute; z-index: 1; } .tox .tox-navobj-bordered-focus.tox-navobj-bordered::before { border-color: #006ce7; box-shadow: 0 0 0 2px rgba(0, 108, 231, 0.25); outline: none; } .tox .tox-dialog__popups { position: absolute; width: 100%; z-index: 1100; } .tox .tox-dialog__body-iframe { display: flex; flex: 1; flex-direction: column; } .tox .tox-dialog__body-iframe .tox-navobj { display: flex; flex: 1; } .tox .tox-dialog__body-iframe .tox-navobj :nth-child(2) { flex: 1; height: 100%; } .tox .tox-dialog-dock-fadeout { opacity: 0; visibility: hidden; } .tox .tox-dialog-dock-fadein { opacity: 1; visibility: visible; } .tox .tox-dialog-dock-transition { transition: visibility 0s linear 0.3s, opacity 0.3s ease; } .tox .tox-dialog-dock-transition.tox-dialog-dock-fadein { transition-delay: 0s; } @media only screen and (max-width: 767px) { body:not(.tox-force-desktop) .tox:not([dir=rtl]) .tox-dialog__body-nav { margin-right: 0; } } @media only screen and (max-width: 767px) { body:not(.tox-force-desktop) .tox:not([dir=rtl]) .tox-dialog__body-nav-item:not(:first-child) { margin-left: 8px; } } .tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-start > *, .tox:not([dir=rtl]) .tox-dialog__footer .tox-dialog__footer-end > * { margin-left: 8px; } .tox[dir=rtl] .tox-dialog__body { text-align: right; } @media only screen and (max-width: 767px) { body:not(.tox-force-desktop) .tox[dir=rtl] .tox-dialog__body-nav { margin-left: 0; } } @media only screen and (max-width: 767px) { body:not(.tox-force-desktop) .tox[dir=rtl] .tox-dialog__body-nav-item:not(:first-child) { margin-right: 8px; } } .tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-start > *, .tox[dir=rtl] .tox-dialog__footer .tox-dialog__footer-end > * { margin-right: 8px; } body.tox-dialog__disable-scroll { overflow: hidden; } .tox .tox-dropzone-container { display: flex; flex: 1; } .tox .tox-dropzone { align-items: center; background: #fff; border: 2px dashed #eeeeee; box-sizing: border-box; display: flex; flex-direction: column; flex-grow: 1; justify-content: center; min-height: 100px; padding: 10px; } .tox .tox-dropzone p { color: rgba(34, 47, 62, 0.7); margin: 0 0 16px 0; } .tox .tox-edit-area { display: flex; flex: 1; overflow: hidden; position: relative; } .tox .tox-edit-area::before { border: 2px solid #2D6ADF; border-radius: 4px; content: ""; inset: 0; opacity: 0; pointer-events: none; position: absolute; transition: opacity 0.15s; z-index: 1; } .tox .tox-edit-area__iframe { background-color: #fff; border: 0; box-sizing: border-box; flex: 1; height: 100%; position: absolute; width: 100%; } .tox.tox-edit-focus .tox-edit-area::before { opacity: 1; } .tox.tox-inline-edit-area { border: 1px dotted #eeeeee; } .tox .tox-editor-container { display: flex; flex: 1 1 auto; flex-direction: column; overflow: hidden; } .tox .tox-editor-header { display: grid; grid-template-columns: 1fr min-content; z-index: 2; } .tox:not(.tox-tinymce-inline) .tox-editor-header { background-color: #fff; border-bottom: none; box-shadow: 0 2px 2px -2px rgba(34, 47, 62, 0.1), 0 8px 8px -4px rgba(34, 47, 62, 0.07); padding: 4px 0; } .tox:not(.tox-tinymce-inline) .tox-editor-header:not(.tox-editor-dock-transition) { transition: box-shadow 0.5s; } .tox:not(.tox-tinymce-inline).tox-tinymce--toolbar-bottom .tox-editor-header { border-top: 1px solid #e3e3e3; box-shadow: none; } .tox:not(.tox-tinymce-inline).tox-tinymce--toolbar-sticky-on .tox-editor-header { background-color: #fff; box-shadow: 0 2px 2px -2px rgba(34, 47, 62, 0.2), 0 8px 8px -4px rgba(34, 47, 62, 0.15); padding: 4px 0; } .tox:not(.tox-tinymce-inline).tox-tinymce--toolbar-sticky-on.tox-tinymce--toolbar-bottom .tox-editor-header { box-shadow: 0 2px 2px -2px rgba(34, 47, 62, 0.2), 0 8px 8px -4px rgba(34, 47, 62, 0.15); } .tox.tox:not(.tox-tinymce-inline) .tox-editor-header.tox-editor-header--empty { background: none; border: none; box-shadow: none; padding: 0; } .tox-editor-dock-fadeout { opacity: 0; visibility: hidden; } .tox-editor-dock-fadein { opacity: 1; visibility: visible; } .tox-editor-dock-transition { transition: visibility 0s linear 0.25s, opacity 0.25s ease; } .tox-editor-dock-transition.tox-editor-dock-fadein { transition-delay: 0s; } .tox .tox-control-wrap { flex: 1; position: relative; } .tox .tox-control-wrap:not(.tox-control-wrap--status-invalid) .tox-control-wrap__status-icon-invalid, .tox .tox-control-wrap:not(.tox-control-wrap--status-unknown) .tox-control-wrap__status-icon-unknown, .tox .tox-control-wrap:not(.tox-control-wrap--status-valid) .tox-control-wrap__status-icon-valid { display: none; } .tox .tox-control-wrap svg { display: block; } .tox .tox-control-wrap__status-icon-wrap { position: absolute; top: 50%; transform: translateY(-50%); } .tox .tox-control-wrap__status-icon-invalid svg { fill: #c00; } .tox .tox-control-wrap__status-icon-unknown svg { fill: orange; } .tox .tox-control-wrap__status-icon-valid svg { fill: green; } .tox:not([dir=rtl]) .tox-control-wrap--status-invalid .tox-textfield, .tox:not([dir=rtl]) .tox-control-wrap--status-unknown .tox-textfield, .tox:not([dir=rtl]) .tox-control-wrap--status-valid .tox-textfield { padding-right: 32px; } .tox:not([dir=rtl]) .tox-control-wrap__status-icon-wrap { right: 4px; } .tox[dir=rtl] .tox-control-wrap--status-invalid .tox-textfield, .tox[dir=rtl] .tox-control-wrap--status-unknown .tox-textfield, .tox[dir=rtl] .tox-control-wrap--status-valid .tox-textfield { padding-left: 32px; } .tox[dir=rtl] .tox-control-wrap__status-icon-wrap { left: 4px; } .tox .tox-autocompleter { max-width: 25em; } .tox .tox-autocompleter .tox-menu { box-sizing: border-box; max-width: 25em; } .tox .tox-autocompleter .tox-autocompleter-highlight { font-weight: bold; } .tox .tox-color-input { display: flex; position: relative; z-index: 1; } .tox .tox-color-input .tox-textfield { z-index: -1; } .tox .tox-color-input span { border-color: rgba(34, 47, 62, 0.2); border-radius: 6px; border-style: solid; border-width: 1px; box-shadow: none; box-sizing: border-box; height: 24px; position: absolute; top: 6px; width: 24px; } .tox .tox-color-input span:hover:not([aria-disabled=true]), .tox .tox-color-input span:focus:not([aria-disabled=true]) { border-color: #006ce7; cursor: pointer; } .tox .tox-color-input span::before { background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%), linear-gradient(-45deg, rgba(0, 0, 0, 0.25) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.25) 75%), linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.25) 75%); background-position: 0 0, 0 6px, 6px -6px, -6px 0; background-size: 12px 12px; border: 1px solid #fff; border-radius: 6px; box-sizing: border-box; content: ""; height: 24px; left: -1px; position: absolute; top: -1px; width: 24px; z-index: -1; } .tox .tox-color-input span[aria-disabled=true] { cursor: not-allowed; } .tox:not([dir=rtl]) .tox-color-input { /* stylelint-disable-next-line no-descending-specificity */ } .tox:not([dir=rtl]) .tox-color-input .tox-textfield { padding-left: 36px; } .tox:not([dir=rtl]) .tox-color-input span { left: 6px; } .tox[dir=rtl] .tox-color-input { /* stylelint-disable-next-line no-descending-specificity */ } .tox[dir=rtl] .tox-color-input .tox-textfield { padding-right: 36px; } .tox[dir=rtl] .tox-color-input span { right: 6px; } .tox .tox-label, .tox .tox-toolbar-label { color: rgba(34, 47, 62, 0.7); display: block; font-size: 14px; font-style: normal; font-weight: normal; line-height: 1.3; padding: 0 8px 0 0; text-transform: none; white-space: nowrap; } .tox .tox-toolbar-label { padding: 0 8px; } .tox[dir=rtl] .tox-label { padding: 0 0 0 8px; } .tox .tox-form { display: flex; flex: 1; flex-direction: column; } .tox .tox-form__group { box-sizing: border-box; margin-bottom: 4px; } .tox .tox-form-group--maximize { flex: 1; } .tox .tox-form__group--error { color: #c00; } .tox .tox-form__group--collection { display: flex; } .tox .tox-form__grid { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .tox .tox-form__grid--2col > .tox-form__group { width: calc(50% - 4px); } .tox .tox-form__grid--3col > .tox-form__group { width: calc(33.3333333333% - 4px); } .tox .tox-form__grid--4col > .tox-form__group { width: calc(25% - 4px); } .tox .tox-form__controls-h-stack { align-items: center; display: flex; } .tox .tox-form__group--inline { align-items: center; display: flex; } .tox .tox-form__group--stretched { display: flex; flex: 1; flex-direction: column; } .tox .tox-form__group--stretched .tox-textarea { flex: 1; } .tox .tox-form__group--stretched .tox-navobj { display: flex; flex: 1; } .tox .tox-form__group--stretched .tox-navobj :nth-child(2) { flex: 1; height: 100%; } .tox:not([dir=rtl]) .tox-form__controls-h-stack > *:not(:first-child) { margin-left: 4px; } .tox[dir=rtl] .tox-form__controls-h-stack > *:not(:first-child) { margin-right: 4px; } .tox .tox-lock.tox-locked .tox-lock-icon__unlock, .tox .tox-lock:not(.tox-locked) .tox-lock-icon__lock { display: none; } .tox .tox-textfield, .tox .tox-toolbar-textfield, .tox .tox-listboxfield .tox-listbox--select, .tox .tox-textarea, .tox .tox-textarea-wrap .tox-textarea:focus { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fff; border-color: #eeeeee; border-radius: 6px; border-style: solid; border-width: 1px; box-shadow: none; box-sizing: border-box; color: #222f3e; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 16px; line-height: 24px; margin: 0; min-height: 34px; outline: none; padding: 5px 5.5px; resize: none; width: 100%; } .tox .tox-textfield[disabled], .tox .tox-textarea[disabled] { background-color: #f2f2f2; color: rgba(34, 47, 62, 0.85); cursor: not-allowed; } .tox .tox-textfield:focus, .tox .tox-listboxfield .tox-listbox--select:focus, .tox .tox-textarea-wrap:focus-within, .tox .tox-textarea:focus, .tox .tox-custom-editor:focus-within { background-color: #fff; border-color: #006ce7; box-shadow: 0 0 0 2px rgba(0, 108, 231, 0.25); outline: none; } .tox .tox-toolbar-textfield { border-width: 0; margin-bottom: 3px; margin-top: 2px; max-width: 250px; } .tox .tox-naked-btn { background-color: transparent; border: 0; border-color: transparent; box-shadow: unset; color: #006ce7; cursor: pointer; display: block; margin: 0; padding: 0; } .tox .tox-naked-btn svg { display: block; fill: #222f3e; } .tox:not([dir=rtl]) .tox-toolbar-textfield + * { margin-left: 4px; } .tox[dir=rtl] .tox-toolbar-textfield + * { margin-right: 4px; } .tox .tox-listboxfield { cursor: pointer; position: relative; } .tox .tox-listboxfield .tox-listbox--select[disabled] { background-color: #f2f2f2; color: rgba(34, 47, 62, 0.85); cursor: not-allowed; } .tox .tox-listbox__select-label { cursor: default; flex: 1; margin: 0 4px; } .tox .tox-listbox__select-chevron { align-items: center; display: flex; justify-content: center; width: 16px; } .tox .tox-listbox__select-chevron svg { fill: #222f3e; } .tox .tox-listboxfield .tox-listbox--select { align-items: center; display: flex; } .tox:not([dir=rtl]) .tox-listboxfield svg { right: 8px; } .tox[dir=rtl] .tox-listboxfield svg { left: 8px; } .tox .tox-selectfield { cursor: pointer; position: relative; } .tox .tox-selectfield select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fff; border-color: #eeeeee; border-radius: 6px; border-style: solid; border-width: 1px; box-shadow: none; box-sizing: border-box; color: #222f3e; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 16px; line-height: 24px; margin: 0; min-height: 34px; outline: none; padding: 5px 5.5px; resize: none; width: 100%; } .tox .tox-selectfield select[disabled] { background-color: #f2f2f2; color: rgba(34, 47, 62, 0.85); cursor: not-allowed; } .tox .tox-selectfield select::-ms-expand { display: none; } .tox .tox-selectfield select:focus { background-color: #fff; border-color: #006ce7; box-shadow: 0 0 0 2px rgba(0, 108, 231, 0.25); outline: none; } .tox .tox-selectfield svg { pointer-events: none; position: absolute; top: 50%; transform: translateY(-50%); } .tox:not([dir=rtl]) .tox-selectfield select[size="0"], .tox:not([dir=rtl]) .tox-selectfield select[size="1"] { padding-right: 24px; } .tox:not([dir=rtl]) .tox-selectfield svg { right: 8px; } .tox[dir=rtl] .tox-selectfield select[size="0"], .tox[dir=rtl] .tox-selectfield select[size="1"] { padding-left: 24px; } .tox[dir=rtl] .tox-selectfield svg { left: 8px; } .tox .tox-textarea-wrap { border-color: #eeeeee; border-radius: 6px; border-style: solid; border-width: 1px; display: flex; flex: 1; overflow: hidden; } .tox .tox-textarea { -webkit-appearance: textarea; -moz-appearance: textarea; appearance: textarea; white-space: pre-wrap; } .tox .tox-textarea-wrap .tox-textarea { border: none; } .tox .tox-textarea-wrap .tox-textarea:focus { border: none; } .tox-fullscreen { border: 0; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; padding: 0; touch-action: pinch-zoom; width: 100%; } .tox.tox-tinymce.tox-fullscreen .tox-statusbar__resize-handle { display: none; } .tox.tox-tinymce.tox-fullscreen, .tox-shadowhost.tox-fullscreen { left: 0; position: fixed; top: 0; z-index: 1200; } .tox.tox-tinymce.tox-fullscreen { background-color: transparent; } .tox-fullscreen .tox.tox-tinymce-aux, .tox-fullscreen ~ .tox.tox-tinymce-aux { z-index: 1201; } .tox .tox-help__more-link { list-style: none; margin-top: 1em; } .tox .tox-imagepreview { background-color: #666; height: 380px; overflow: hidden; position: relative; width: 100%; } .tox .tox-imagepreview.tox-imagepreview__loaded { overflow: auto; } .tox .tox-imagepreview__container { display: flex; left: 100vw; position: absolute; top: 100vw; } .tox .tox-imagepreview__image { background: url(data:image/gif;base64,R0lGODdhDAAMAIABAMzMzP///ywAAAAADAAMAAACFoQfqYeabNyDMkBQb81Uat85nxguUAEAOw==); } .tox .tox-image-tools .tox-spacer { flex: 1; } .tox .tox-image-tools .tox-bar { align-items: center; display: flex; height: 60px; justify-content: center; } .tox .tox-image-tools .tox-imagepreview, .tox .tox-image-tools .tox-imagepreview + .tox-bar { margin-top: 8px; } .tox .tox-image-tools .tox-croprect-block { background: black; filter: alpha(opacity=50); opacity: 0.5; position: absolute; zoom: 1; } .tox .tox-image-tools .tox-croprect-handle { border: 2px solid white; height: 20px; left: 0; position: absolute; top: 0; width: 20px; } .tox .tox-image-tools .tox-croprect-handle-move { border: 0; cursor: move; position: absolute; } .tox .tox-image-tools .tox-croprect-handle-nw { border-width: 2px 0 0 2px; cursor: nw-resize; left: 100px; margin: -2px 0 0 -2px; top: 100px; } .tox .tox-image-tools .tox-croprect-handle-ne { border-width: 2px 2px 0 0; cursor: ne-resize; left: 200px; margin: -2px 0 0 -20px; top: 100px; } .tox .tox-image-tools .tox-croprect-handle-sw { border-width: 0 0 2px 2px; cursor: sw-resize; left: 100px; margin: -20px 2px 0 -2px; top: 200px; } .tox .tox-image-tools .tox-croprect-handle-se { border-width: 0 2px 2px 0; cursor: se-resize; left: 200px; margin: -20px 0 0 -20px; top: 200px; } .tox .tox-insert-table-picker { display: flex; flex-wrap: wrap; width: 170px; } .tox .tox-insert-table-picker > div { border-color: #eeeeee; border-style: solid; border-width: 0 1px 1px 0; box-sizing: border-box; height: 17px; width: 17px; } .tox .tox-collection--list .tox-collection__group .tox-insert-table-picker { margin: -4px -4px; } .tox .tox-insert-table-picker .tox-insert-table-picker__selected { background-color: rgba(0, 108, 231, 0.5); border-color: rgba(0, 108, 231, 0.5); } .tox .tox-insert-table-picker__label { color: rgba(34, 47, 62, 0.7); display: block; font-size: 14px; padding: 4px; text-align: center; width: 100%; } .tox:not([dir=rtl]) { /* stylelint-disable-next-line no-descending-specificity */ } .tox:not([dir=rtl]) .tox-insert-table-picker > div:nth-child(10n) { border-right: 0; } .tox[dir=rtl] { /* stylelint-disable-next-line no-descending-specificity */ } .tox[dir=rtl] .tox-insert-table-picker > div:nth-child(10n+1) { border-right: 0; } .tox { /* stylelint-disable */ /* stylelint-enable */ } .tox .tox-menu { background-color: #fff; border: 1px solid transparent; border-radius: 6px; box-shadow: 0 0 2px 0 rgba(34, 47, 62, 0.2), 0 4px 8px 0 rgba(34, 47, 62, 0.15); display: inline-block; overflow: hidden; vertical-align: top; z-index: 1150; } .tox .tox-menu.tox-collection.tox-collection--list { padding: 0 4px; } .tox .tox-menu.tox-collection.tox-collection--toolbar { padding: 8px; } .tox .tox-menu.tox-collection.tox-collection--grid { padding: 8px; } @media only screen and (min-width: 768px) { .tox .tox-menu .tox-collection__item-label { overflow-wrap: break-word; word-break: normal; } .tox .tox-dialog__popups .tox-menu .tox-collection__item-label { word-break: break-all; } } .tox .tox-menu__label h1, .tox .tox-menu__label h2, .tox .tox-menu__label h3, .tox .tox-menu__label h4, .tox .tox-menu__label h5, .tox .tox-menu__label h6, .tox .tox-menu__label p, .tox .tox-menu__label blockquote, .tox .tox-menu__label code { margin: 0; } .tox .tox-menubar { background: repeating-linear-gradient(transparent 0px 1px, transparent 1px 39px) center top 39px/100% calc(100% - 39px) no-repeat; background-color: #fff; display: flex; flex: 0 0 auto; flex-shrink: 0; flex-wrap: wrap; grid-column: 1/-1; grid-row: 1; padding: 0 11px 0 12px; } .tox .tox-promotion + .tox-menubar { grid-column: 1; } .tox .tox-promotion { background: repeating-linear-gradient(transparent 0px 1px, transparent 1px 39px) center top 39px/100% calc(100% - 39px) no-repeat; background-color: #fff; grid-column: 2; grid-row: 1; padding-inline-end: 8px; padding-inline-start: 4px; padding-top: 5px; } .tox .tox-promotion-link { align-items: unsafe center; background-color: #E8F1F8; border-radius: 5px; color: #086BE6; cursor: pointer; display: flex; font-size: 14px; height: 26.6px; padding: 4px 8px; white-space: nowrap; } .tox .tox-promotion-link:hover { background-color: #B4D7FF; } .tox .tox-promotion-link:focus { background-color: #D9EDF7; } /* Deprecated. Remove in next major release */ .tox .tox-mbtn { align-items: center; background: transparent; border: 0; border-radius: 3px; box-shadow: none; color: #222f3e; display: flex; flex: 0 0 auto; font-size: 14px; font-style: normal; font-weight: normal; height: 28px; justify-content: center; margin: 5px 1px 6px 0; outline: none; overflow: hidden; padding: 0 4px; text-transform: none; width: auto; } .tox .tox-mbtn[disabled] { background-color: transparent; border: 0; box-shadow: none; color: rgba(34, 47, 62, 0.5); cursor: not-allowed; } .tox .tox-mbtn:focus:not(:disabled) { background: #cce2fa; border: 0; box-shadow: none; color: #222f3e; } .tox .tox-mbtn--active { background: #a6ccf7; border: 0; box-shadow: none; color: #222f3e; } .tox .tox-mbtn:hover:not(:disabled):not(.tox-mbtn--active) { background: #cce2fa; border: 0; box-shadow: none; color: #222f3e; } .tox .tox-mbtn__select-label { cursor: default; font-weight: normal; margin: 0 4px; } .tox .tox-mbtn[disabled] .tox-mbtn__select-label { cursor: not-allowed; } .tox .tox-mbtn__select-chevron { align-items: center; display: flex; justify-content: center; width: 16px; display: none; } .tox .tox-notification { border-radius: 6px; border-style: solid; border-width: 1px; box-shadow: none; box-sizing: border-box; display: grid; font-size: 14px; font-weight: normal; grid-template-columns: minmax(40px, 1fr) auto minmax(40px, 1fr); margin-top: 4px; opacity: 0; padding: 4px; transition: transform 100ms ease-in, opacity 150ms ease-in; } .tox .tox-notification p { font-size: 14px; font-weight: normal; } .tox .tox-notification a { cursor: pointer; text-decoration: underline; } .tox .tox-notification--in { opacity: 1; } .tox .tox-notification--success { background-color: #e4eeda; border-color: #d7e6c8; color: #222f3e; } .tox .tox-notification--success p { color: #222f3e; } .tox .tox-notification--success a { color: #517342; } .tox .tox-notification--success svg { fill: #222f3e; } .tox .tox-notification--error { background-color: #f5cccc; border-color: #f0b3b3; color: #222f3e; } .tox .tox-notification--error p { color: #222f3e; } .tox .tox-notification--error a { color: #77181f; } .tox .tox-notification--error svg { fill: #222f3e; } .tox .tox-notification--warn, .tox .tox-notification--warning { background-color: #fff5cc; border-color: #fff0b3; color: #222f3e; } .tox .tox-notification--warn p, .tox .tox-notification--warning p { color: #222f3e; } .tox .tox-notification--warn a, .tox .tox-notification--warning a { color: #7a6e25; } .tox .tox-notification--warn svg, .tox .tox-notification--warning svg { fill: #222f3e; } .tox .tox-notification--info { background-color: #d6e7fb; border-color: #c1dbf9; color: #222f3e; } .tox .tox-notification--info p { color: #222f3e; } .tox .tox-notification--info a { color: #2a64a6; } .tox .tox-notification--info svg { fill: #222f3e; } .tox .tox-notification__body { align-self: center; color: #222f3e; font-size: 14px; grid-column-end: 3; grid-column-start: 2; grid-row-end: 2; grid-row-start: 1; text-align: center; white-space: normal; word-break: break-all; word-break: break-word; } .tox .tox-notification__body > * { margin: 0; } .tox .tox-notification__body > * + * { margin-top: 1rem; } .tox .tox-notification__icon { align-self: center; grid-column-end: 2; grid-column-start: 1; grid-row-end: 2; grid-row-start: 1; justify-self: end; } .tox .tox-notification__icon svg { display: block; } .tox .tox-notification__dismiss { align-self: start; grid-column-end: 4; grid-column-start: 3; grid-row-end: 2; grid-row-start: 1; justify-self: end; } .tox .tox-notification .tox-progress-bar { grid-column-end: 4; grid-column-start: 1; grid-row-end: 3; grid-row-start: 2; justify-self: center; } .tox .tox-pop { display: inline-block; position: relative; } .tox .tox-pop--resizing { transition: width 0.1s ease; } .tox .tox-pop--resizing .tox-toolbar, .tox .tox-pop--resizing .tox-toolbar__group { flex-wrap: nowrap; } .tox .tox-pop--transition { transition: 0.15s ease; transition-property: left, right, top, bottom; } .tox .tox-pop--transition::before, .tox .tox-pop--transition::after { transition: all 0.15s, visibility 0s, opacity 0.075s ease 0.075s; } .tox .tox-pop__dialog { background-color: #fff; border: 1px solid #eeeeee; border-radius: 6px; box-shadow: 0 0 2px 0 rgba(34, 47, 62, 0.2), 0 4px 8px 0 rgba(34, 47, 62, 0.15); min-width: 0; overflow: hidden; } .tox .tox-pop__dialog > *:not(.tox-toolbar) { margin: 4px 4px 4px 8px; } .tox .tox-pop__dialog .tox-toolbar { background-color: transparent; margin-bottom: -1px; } .tox .tox-pop::before, .tox .tox-pop::after { border-style: solid; content: ""; display: block; height: 0; opacity: 1; position: absolute; width: 0; } .tox .tox-pop.tox-pop--inset::before, .tox .tox-pop.tox-pop--inset::after { opacity: 0; transition: all 0s 0.15s, visibility 0s, opacity 0.075s ease; } .tox .tox-pop.tox-pop--bottom::before, .tox .tox-pop.tox-pop--bottom::after { left: 50%; top: 100%; } .tox .tox-pop.tox-pop--bottom::after { border-color: #fff transparent transparent transparent; border-width: 8px; margin-left: -8px; margin-top: -1px; } .tox .tox-pop.tox-pop--bottom::before { border-color: #eeeeee transparent transparent transparent; border-width: 9px; margin-left: -9px; } .tox .tox-pop.tox-pop--top::before, .tox .tox-pop.tox-pop--top::after { left: 50%; top: 0; transform: translateY(-100%); } .tox .tox-pop.tox-pop--top::after { border-color: transparent transparent #fff transparent; border-width: 8px; margin-left: -8px; margin-top: 1px; } .tox .tox-pop.tox-pop--top::before { border-color: transparent transparent #eeeeee transparent; border-width: 9px; margin-left: -9px; } .tox .tox-pop.tox-pop--left::before, .tox .tox-pop.tox-pop--left::after { left: 0; top: calc(50% - 1px); transform: translateY(-50%); } .tox .tox-pop.tox-pop--left::after { border-color: transparent #fff transparent transparent; border-width: 8px; margin-left: -15px; } .tox .tox-pop.tox-pop--left::before { border-color: transparent #eeeeee transparent transparent; border-width: 10px; margin-left: -19px; } .tox .tox-pop.tox-pop--right::before, .tox .tox-pop.tox-pop--right::after { left: 100%; top: calc(50% + 1px); transform: translateY(-50%); } .tox .tox-pop.tox-pop--right::after { border-color: transparent transparent transparent #fff; border-width: 8px; margin-left: -1px; } .tox .tox-pop.tox-pop--right::before { border-color: transparent transparent transparent #eeeeee; border-width: 10px; margin-left: -1px; } .tox .tox-pop.tox-pop--align-left::before, .tox .tox-pop.tox-pop--align-left::after { left: 20px; } .tox .tox-pop.tox-pop--align-right::before, .tox .tox-pop.tox-pop--align-right::after { left: calc(100% - 20px); } .tox .tox-sidebar-wrap { display: flex; flex-direction: row; flex-grow: 1; min-height: 0; } .tox .tox-sidebar { background-color: #fff; display: flex; flex-direction: row; justify-content: flex-end; } .tox .tox-sidebar__slider { display: flex; overflow: hidden; } .tox .tox-sidebar__pane-container { display: flex; } .tox .tox-sidebar__pane { display: flex; } .tox .tox-sidebar--sliding-closed { opacity: 0; } .tox .tox-sidebar--sliding-open { opacity: 1; } .tox .tox-sidebar--sliding-growing, .tox .tox-sidebar--sliding-shrinking { transition: width 0.5s ease, opacity 0.5s ease; } .tox .tox-selector { background-color: #4099ff; border-color: #4099ff; border-style: solid; border-width: 1px; box-sizing: border-box; display: inline-block; height: 10px; position: absolute; width: 10px; } .tox.tox-platform-touch .tox-selector { height: 12px; width: 12px; } .tox .tox-slider { align-items: center; display: flex; flex: 1; height: 24px; justify-content: center; position: relative; } .tox .tox-slider__rail { background-color: transparent; border: 1px solid #eeeeee; border-radius: 6px; height: 10px; min-width: 120px; width: 100%; } .tox .tox-slider__handle { background-color: #006ce7; border: 2px solid #0054b4; border-radius: 6px; box-shadow: none; height: 24px; left: 50%; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); width: 14px; } .tox .tox-form__controls-h-stack > .tox-slider:not(:first-of-type) { margin-inline-start: 8px; } .tox .tox-form__controls-h-stack > .tox-form__group + .tox-slider { margin-inline-start: 32px; } .tox .tox-form__controls-h-stack > .tox-slider + .tox-form__group { margin-inline-start: 32px; } .tox .tox-source-code { overflow: auto; } .tox .tox-spinner { display: flex; } .tox .tox-spinner > div { animation: tam-bouncing-dots 1.5s ease-in-out 0s infinite both; background-color: rgba(34, 47, 62, 0.7); border-radius: 100%; height: 8px; width: 8px; } .tox .tox-spinner > div:nth-child(1) { animation-delay: -0.32s; } .tox .tox-spinner > div:nth-child(2) { animation-delay: -0.16s; } @keyframes tam-bouncing-dots { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } .tox:not([dir=rtl]) .tox-spinner > div:not(:first-child) { margin-left: 4px; } .tox[dir=rtl] .tox-spinner > div:not(:first-child) { margin-right: 4px; } .tox .tox-statusbar { align-items: center; background-color: #fff; border-top: 1px solid #e3e3e3; color: rgba(34, 47, 62, 0.7); display: flex; flex: 0 0 auto; font-size: 14px; font-weight: normal; height: 25px; overflow: hidden; padding: 0 8px; position: relative; text-transform: none; } .tox .tox-statusbar__path { display: flex; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tox .tox-statusbar__right-container { display: flex; justify-content: flex-end; white-space: nowrap; } .tox .tox-statusbar__help-text { text-align: center; } .tox .tox-statusbar__text-container { display: flex; flex: 1 1 auto; justify-content: space-between; overflow: hidden; } @media only screen and (min-width: 768px) { .tox .tox-statusbar__text-container.tox-statusbar__text-container-3-cols > .tox-statusbar__help-text, .tox .tox-statusbar__text-container.tox-statusbar__text-container-3-cols > .tox-statusbar__right-container, .tox .tox-statusbar__text-container.tox-statusbar__text-container-3-cols > .tox-statusbar__path { flex: 0 0 33.3333333333%; } } .tox .tox-statusbar__text-container.tox-statusbar__text-container--flex-end { justify-content: flex-end; } .tox .tox-statusbar__text-container.tox-statusbar__text-container--flex-start { justify-content: flex-start; } .tox .tox-statusbar__text-container.tox-statusbar__text-container--space-around { justify-content: space-around; } .tox .tox-statusbar__path > * { display: inline; white-space: nowrap; } .tox .tox-statusbar__wordcount { flex: 0 0 auto; margin-left: 1ch; } @media only screen and (max-width: 767px) { .tox .tox-statusbar__text-container .tox-statusbar__help-text { display: none; } .tox .tox-statusbar__text-container .tox-statusbar__help-text:only-child { display: block; } } .tox .tox-statusbar a, .tox .tox-statusbar__path-item, .tox .tox-statusbar__wordcount { color: rgba(34, 47, 62, 0.7); text-decoration: none; } .tox .tox-statusbar a:hover:not(:disabled):not([aria-disabled=true]), .tox .tox-statusbar__path-item:hover:not(:disabled):not([aria-disabled=true]), .tox .tox-statusbar__wordcount:hover:not(:disabled):not([aria-disabled=true]), .tox .tox-statusbar a:focus:not(:disabled):not([aria-disabled=true]), .tox .tox-statusbar__path-item:focus:not(:disabled):not([aria-disabled=true]), .tox .tox-statusbar__wordcount:focus:not(:disabled):not([aria-disabled=true]) { color: #222f3e; cursor: pointer; } .tox .tox-statusbar__branding svg { fill: rgba(34, 47, 62, 0.8); height: 1.14em; vertical-align: -0.28em; width: 3.6em; } .tox .tox-statusbar__branding a:hover:not(:disabled):not([aria-disabled=true]) svg, .tox .tox-statusbar__branding a:focus:not(:disabled):not([aria-disabled=true]) svg { fill: #222f3e; } .tox .tox-statusbar__resize-handle { align-items: flex-end; align-self: stretch; cursor: nwse-resize; display: flex; flex: 0 0 auto; justify-content: flex-end; margin-left: auto; margin-right: -8px; padding-bottom: 3px; padding-left: 1ch; padding-right: 3px; } .tox .tox-statusbar__resize-handle svg { display: block; fill: rgba(34, 47, 62, 0.5); } .tox .tox-statusbar__resize-handle:focus svg { background-color: #dee0e2; border-radius: 1px 1px 5px 1px; box-shadow: 0 0 0 2px #dee0e2; } .tox:not([dir=rtl]) .tox-statusbar__path > * { margin-right: 4px; } .tox:not([dir=rtl]) .tox-statusbar__branding { margin-left: 2ch; } .tox[dir=rtl] .tox-statusbar { flex-direction: row-reverse; } .tox[dir=rtl] .tox-statusbar__path > * { margin-left: 4px; } .tox .tox-throbber { z-index: 1299; } .tox .tox-throbber__busy-spinner { align-items: center; background-color: rgba(255, 255, 255, 0.6); bottom: 0; display: flex; justify-content: center; left: 0; position: absolute; right: 0; top: 0; } .tox .tox-tbtn { align-items: center; background: transparent; border: 0; border-radius: 3px; box-shadow: none; color: #222f3e; display: flex; flex: 0 0 auto; font-size: 14px; font-style: normal; font-weight: normal; height: 28px; justify-content: center; margin: 6px 1px 5px 0; outline: none; overflow: hidden; padding: 0; text-transform: none; width: 34px; } .tox .tox-tbtn svg { display: block; fill: #222f3e; } .tox .tox-tbtn.tox-tbtn-more { padding-left: 5px; padding-right: 5px; width: inherit; } .tox .tox-tbtn:focus { background: #cce2fa; border: 0; box-shadow: none; } .tox .tox-tbtn:hover { background: #cce2fa; border: 0; box-shadow: none; color: #222f3e; } .tox .tox-tbtn:hover svg { fill: #222f3e; } .tox .tox-tbtn:active { background: #a6ccf7; border: 0; box-shadow: none; color: #222f3e; } .tox .tox-tbtn:active svg { fill: #222f3e; } .tox .tox-tbtn--disabled .tox-tbtn--enabled svg { fill: rgba(34, 47, 62, 0.5); } .tox .tox-tbtn--disabled, .tox .tox-tbtn--disabled:hover, .tox .tox-tbtn:disabled, .tox .tox-tbtn:disabled:hover { background: transparent; border: 0; box-shadow: none; color: rgba(34, 47, 62, 0.5); cursor: not-allowed; } .tox .tox-tbtn--disabled svg, .tox .tox-tbtn--disabled:hover svg, .tox .tox-tbtn:disabled svg, .tox .tox-tbtn:disabled:hover svg { /* stylelint-disable-line no-descending-specificity */ fill: rgba(34, 47, 62, 0.5); } .tox .tox-tbtn--enabled, .tox .tox-tbtn--enabled:hover { background: #a6ccf7; border: 0; box-shadow: none; color: #222f3e; } .tox .tox-tbtn--enabled > *, .tox .tox-tbtn--enabled:hover > * { transform: none; } .tox .tox-tbtn--enabled svg, .tox .tox-tbtn--enabled:hover svg { /* stylelint-disable-line no-descending-specificity */ fill: #222f3e; } .tox .tox-tbtn--enabled.tox-tbtn--disabled svg, .tox .tox-tbtn--enabled:hover.tox-tbtn--disabled svg { fill: rgba(34, 47, 62, 0.5); } .tox .tox-tbtn:focus:not(.tox-tbtn--disabled) { color: #222f3e; } .tox .tox-tbtn:focus:not(.tox-tbtn--disabled) svg { fill: #222f3e; } .tox .tox-tbtn:active > * { transform: none; } .tox .tox-tbtn--md { height: 42px; width: 51px; } .tox .tox-tbtn--lg { flex-direction: column; height: 56px; width: 68px; } .tox .tox-tbtn--return { align-self: stretch; height: unset; width: 16px; } .tox .tox-tbtn--labeled { padding: 0 4px; width: unset; } .tox .tox-tbtn__vlabel { display: block; font-size: 10px; font-weight: normal; letter-spacing: -0.025em; margin-bottom: 4px; white-space: nowrap; } .tox .tox-number-input { border-radius: 3px; display: flex; margin: 6px 1px 5px 0; padding: 0 4px; width: auto; } .tox .tox-number-input .tox-input-wrapper { background: #f7f7f7; display: flex; pointer-events: none; text-align: center; } .tox .tox-number-input .tox-input-wrapper:focus { background: #cce2fa; } .tox .tox-number-input input { border-radius: 3px; color: #222f3e; font-size: 14px; margin: 2px 0; pointer-events: all; width: 60px; } .tox .tox-number-input input:hover { background: #cce2fa; color: #222f3e; } .tox .tox-number-input input:focus { background: #fff; color: #222f3e; } .tox .tox-number-input input:disabled { background: transparent; border: 0; box-shadow: none; color: rgba(34, 47, 62, 0.5); cursor: not-allowed; } .tox .tox-number-input button { background: #f7f7f7; color: #222f3e; height: 28px; text-align: center; width: 24px; } .tox .tox-number-input button svg { display: block; fill: #222f3e; margin: 0 auto; transform: scale(0.67); } .tox .tox-number-input button:focus { background: #cce2fa; } .tox .tox-number-input button:hover { background: #cce2fa; border: 0; box-shadow: none; color: #222f3e; } .tox .tox-number-input button:hover svg { fill: #222f3e; } .tox .tox-number-input button:active { background: #a6ccf7; border: 0; box-shadow: none; color: #222f3e; } .tox .tox-number-input button:active svg { fill: #222f3e; } .tox .tox-number-input button:disabled { background: transparent; border: 0; box-shadow: none; color: rgba(34, 47, 62, 0.5); cursor: not-allowed; } .tox .tox-number-input button:disabled svg { fill: rgba(34, 47, 62, 0.5); } .tox .tox-number-input button.minus { border-radius: 3px 0 0 3px; } .tox .tox-number-input button.plus { border-radius: 0 3px 3px 0; } .tox .tox-number-input:focus:not(:active) > button, .tox .tox-number-input:focus:not(:active) > .tox-input-wrapper { background: #cce2fa; } .tox .tox-tbtn--select { margin: 6px 1px 5px 0; padding: 0 4px; width: auto; } .tox .tox-tbtn__select-label { cursor: default; font-weight: normal; height: initial; margin: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tox .tox-tbtn__select-chevron { align-items: center; display: flex; justify-content: center; width: 16px; } .tox .tox-tbtn__select-chevron svg { fill: rgba(34, 47, 62, 0.5); } .tox .tox-tbtn--bespoke { background: #f7f7f7; } .tox .tox-tbtn--bespoke + .tox-tbtn--bespoke { margin-inline-start: 4px; } .tox .tox-tbtn--bespoke .tox-tbtn__select-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 7em; } .tox .tox-tbtn--disabled .tox-tbtn__select-label, .tox .tox-tbtn--select:disabled .tox-tbtn__select-label { cursor: not-allowed; } .tox .tox-split-button { border: 0; border-radius: 3px; box-sizing: border-box; display: flex; margin: 6px 1px 5px 0; overflow: hidden; } .tox .tox-split-button:hover { box-shadow: 0 0 0 1px #cce2fa inset; } .tox .tox-split-button:focus { background: #cce2fa; box-shadow: none; color: #222f3e; } .tox .tox-split-button > * { border-radius: 0; } .tox .tox-split-button__chevron { width: 16px; } .tox .tox-split-button__chevron svg { fill: rgba(34, 47, 62, 0.5); } .tox .tox-split-button .tox-tbtn { margin: 0; } .tox .tox-split-button.tox-tbtn--disabled:hover, .tox .tox-split-button.tox-tbtn--disabled:focus, .tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:hover, .tox .tox-split-button.tox-tbtn--disabled .tox-tbtn:focus { background: transparent; box-shadow: none; color: rgba(34, 47, 62, 0.5); } .tox.tox-platform-touch .tox-split-button .tox-tbtn--select { padding: 0 0px; } .tox.tox-platform-touch .tox-split-button .tox-tbtn:not(.tox-tbtn--select):first-child { width: 30px; } .tox.tox-platform-touch .tox-split-button__chevron { width: 20px; } .tox .tox-split-button.tox-tbtn--disabled svg #tox-icon-text-color__color, .tox .tox-split-button.tox-tbtn--disabled svg #tox-icon-highlight-bg-color__color { opacity: 0.6; } .tox .tox-toolbar-overlord { background-color: #fff; } .tox .tox-toolbar, .tox .tox-toolbar__primary, .tox .tox-toolbar__overflow { background-attachment: local; background-color: #fff; background-image: repeating-linear-gradient(#e3e3e3 0px 1px, transparent 1px 39px); background-position: center top 40px; background-repeat: no-repeat; background-size: calc(100% - 22px) calc(100% - 41px); display: flex; flex: 0 0 auto; flex-shrink: 0; flex-wrap: wrap; padding: 0 0px; transform: perspective(1px); } .tox .tox-toolbar-overlord > .tox-toolbar, .tox .tox-toolbar-overlord > .tox-toolbar__primary, .tox .tox-toolbar-overlord > .tox-toolbar__overflow { background-position: center top 0px; background-size: calc(100% - 22px) calc(100% - 0px); } .tox .tox-toolbar__overflow.tox-toolbar__overflow--closed { height: 0; opacity: 0; padding-bottom: 0; padding-top: 0; visibility: hidden; } .tox .tox-toolbar__overflow--growing { transition: height 0.3s ease, opacity 0.2s linear 0.1s; } .tox .tox-toolbar__overflow--shrinking { transition: opacity 0.3s ease, height 0.2s linear 0.1s, visibility 0s linear 0.3s; } .tox .tox-toolbar-overlord, .tox .tox-anchorbar { grid-column: 1/-1; } .tox .tox-menubar + .tox-toolbar, .tox .tox-menubar + .tox-toolbar-overlord { border-top: 1px solid transparent; margin-top: -1px; padding-bottom: 1px; padding-top: 1px; } .tox .tox-toolbar--scrolling { flex-wrap: nowrap; overflow-x: auto; } .tox .tox-pop .tox-toolbar { border-width: 0; } .tox .tox-toolbar--no-divider { background-image: none; } .tox .tox-toolbar-overlord .tox-toolbar:not(.tox-toolbar--scrolling):first-child, .tox .tox-toolbar-overlord .tox-toolbar__primary { background-position: center top 39px; } .tox .tox-editor-header > .tox-toolbar--scrolling, .tox .tox-toolbar-overlord .tox-toolbar--scrolling:first-child { background-image: none; } .tox.tox-tinymce-aux .tox-toolbar__overflow { background-color: #fff; background-position: center top 43px; background-size: calc(100% - 16px) calc(100% - 51px); border: none; border-radius: 6px; box-shadow: 0 0 2px 0 rgba(34, 47, 62, 0.2), 0 4px 8px 0 rgba(34, 47, 62, 0.15); overscroll-behavior: none; padding: 4px 0; } .tox-pop .tox-pop__dialog { /* stylelint-disable-next-line no-descending-specificity */ } .tox-pop .tox-pop__dialog .tox-toolbar { background-position: center top 43px; background-size: calc(100% - 22px) calc(100% - 51px); padding: 4px 0; } .tox .tox-toolbar__group { align-items: center; display: flex; flex-wrap: wrap; margin: 0 0; padding: 0 11px 0 12px; } .tox .tox-toolbar__group--pull-right { margin-left: auto; } .tox .tox-toolbar--scrolling .tox-toolbar__group { flex-shrink: 0; flex-wrap: nowrap; } .tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type) { border-right: 1px solid transparent; } .tox[dir=rtl] .tox-toolbar__group:not(:last-of-type) { border-left: 1px solid transparent; } .tox .tox-tooltip { display: inline-block; padding: 8px; position: relative; } .tox .tox-tooltip__body { background-color: #222f3e; border-radius: 6px; box-shadow: 0 2px 4px rgba(34, 47, 62, 0.3); color: rgba(255, 255, 255, 0.75); font-size: 14px; font-style: normal; font-weight: normal; padding: 4px 8px; text-transform: none; } .tox .tox-tooltip__arrow { position: absolute; } .tox .tox-tooltip--down .tox-tooltip__arrow { border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #222f3e; bottom: 0; left: 50%; position: absolute; transform: translateX(-50%); } .tox .tox-tooltip--up .tox-tooltip__arrow { border-bottom: 8px solid #222f3e; border-left: 8px solid transparent; border-right: 8px solid transparent; left: 50%; position: absolute; top: 0; transform: translateX(-50%); } .tox .tox-tooltip--right .tox-tooltip__arrow { border-bottom: 8px solid transparent; border-left: 8px solid #222f3e; border-top: 8px solid transparent; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .tox .tox-tooltip--left .tox-tooltip__arrow { border-bottom: 8px solid transparent; border-right: 8px solid #222f3e; border-top: 8px solid transparent; left: 0; position: absolute; top: 50%; transform: translateY(-50%); } .tox .tox-tree { display: flex; flex-direction: column; } .tox .tox-tree .tox-trbtn { align-items: center; background: transparent; border: 0; border-radius: 4px; box-shadow: none; color: #222f3e; display: flex; flex: 0 0 auto; font-size: 14px; font-style: normal; font-weight: normal; height: 28px; margin-bottom: 4px; margin-top: 4px; outline: none; overflow: hidden; padding: 0; padding-left: 8px; text-transform: none; } .tox .tox-tree .tox-trbtn .tox-tree__label { cursor: default; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tox .tox-tree .tox-trbtn svg { display: block; fill: #222f3e; } .tox .tox-tree .tox-trbtn:focus { background: #cce2fa; border: 0; box-shadow: none; } .tox .tox-tree .tox-trbtn:hover { background: #cce2fa; border: 0; box-shadow: none; color: #222f3e; } .tox .tox-tree .tox-trbtn:hover svg { fill: #222f3e; } .tox .tox-tree .tox-trbtn:active { background: #a6ccf7; border: 0; box-shadow: none; color: #222f3e; } .tox .tox-tree .tox-trbtn:active svg { fill: #222f3e; } .tox .tox-tree .tox-trbtn--disabled, .tox .tox-tree .tox-trbtn--disabled:hover, .tox .tox-tree .tox-trbtn:disabled, .tox .tox-tree .tox-trbtn:disabled:hover { background: transparent; border: 0; box-shadow: none; color: rgba(34, 47, 62, 0.5); cursor: not-allowed; } .tox .tox-tree .tox-trbtn--disabled svg, .tox .tox-tree .tox-trbtn--disabled:hover svg, .tox .tox-tree .tox-trbtn:disabled svg, .tox .tox-tree .tox-trbtn:disabled:hover svg { /* stylelint-disable-line no-descending-specificity */ fill: rgba(34, 47, 62, 0.5); } .tox .tox-tree .tox-trbtn--enabled, .tox .tox-tree .tox-trbtn--enabled:hover { background: #a6ccf7; border: 0; box-shadow: none; color: #222f3e; } .tox .tox-tree .tox-trbtn--enabled > *, .tox .tox-tree .tox-trbtn--enabled:hover > * { transform: none; } .tox .tox-tree .tox-trbtn--enabled svg, .tox .tox-tree .tox-trbtn--enabled:hover svg { /* stylelint-disable-line no-descending-specificity */ fill: #222f3e; } .tox .tox-tree .tox-trbtn:focus:not(.tox-trbtn--disabled) { color: #222f3e; } .tox .tox-tree .tox-trbtn:focus:not(.tox-trbtn--disabled) svg { fill: #222f3e; } .tox .tox-tree .tox-trbtn:active > * { transform: none; } .tox .tox-tree .tox-trbtn--return { align-self: stretch; height: unset; width: 16px; } .tox .tox-tree .tox-trbtn--labeled { padding: 0 4px; width: unset; } .tox .tox-tree .tox-trbtn__vlabel { display: block; font-size: 10px; font-weight: normal; letter-spacing: -0.025em; margin-bottom: 4px; white-space: nowrap; } .tox .tox-tree .tox-tree--directory { display: flex; flex-direction: column; /* stylelint-disable no-descending-specificity */ } .tox .tox-tree .tox-tree--directory .tox-tree--directory__label { font-weight: bold; } .tox .tox-tree .tox-tree--directory .tox-tree--directory__label .tox-mbtn { margin-left: auto; } .tox .tox-tree .tox-tree--directory .tox-tree--directory__label .tox-mbtn svg { fill: transparent; } .tox .tox-tree .tox-tree--directory .tox-tree--directory__label .tox-mbtn.tox-mbtn--active svg, .tox .tox-tree .tox-tree--directory .tox-tree--directory__label .tox-mbtn:focus svg { fill: #222f3e; } .tox .tox-tree .tox-tree--directory .tox-tree--directory__label:hover .tox-mbtn svg, .tox .tox-tree .tox-tree--directory .tox-tree--directory__label:focus .tox-mbtn svg { fill: #222f3e; } .tox .tox-tree .tox-tree--directory .tox-tree--directory__label:hover:has(.tox-mbtn:hover) { background-color: transparent; color: #222f3e; } .tox .tox-tree .tox-tree--directory .tox-tree--directory__label:hover:has(.tox-mbtn:hover) .tox-chevron svg { fill: #222f3e; } .tox .tox-tree .tox-tree--directory .tox-tree--directory__label .tox-chevron { margin-right: 6px; } .tox .tox-tree .tox-tree--directory .tox-tree--directory__label:has(+ .tox-tree--directory__children--growing) .tox-chevron, .tox .tox-tree .tox-tree--directory .tox-tree--directory__label:has(+ .tox-tree--directory__children--shrinking) .tox-chevron { transition: transform 0.5s ease-in-out; } .tox .tox-tree .tox-tree--directory .tox-tree--directory__label:has(+ .tox-tree--directory__children--growing) .tox-chevron, .tox .tox-tree .tox-tree--directory .tox-tree--directory__label:has(+ .tox-tree--directory__children--open) .tox-chevron { transform: rotate(90deg); } .tox .tox-tree .tox-tree--leaf__label { font-weight: normal; } .tox .tox-tree .tox-tree--leaf__label .tox-mbtn { margin-left: auto; } .tox .tox-tree .tox-tree--leaf__label .tox-mbtn svg { fill: transparent; } .tox .tox-tree .tox-tree--leaf__label .tox-mbtn.tox-mbtn--active svg, .tox .tox-tree .tox-tree--leaf__label .tox-mbtn:focus svg { fill: #222f3e; } .tox .tox-tree .tox-tree--leaf__label:hover .tox-mbtn svg { fill: #222f3e; } .tox .tox-tree .tox-tree--leaf__label:hover:has(.tox-mbtn:hover) { background-color: transparent; color: #222f3e; } .tox .tox-tree .tox-tree--leaf__label:hover:has(.tox-mbtn:hover) .tox-chevron svg { fill: #222f3e; } .tox .tox-tree .tox-tree--directory__children { overflow: hidden; padding-left: 16px; } .tox .tox-tree .tox-tree--directory__children.tox-tree--directory__children--growing, .tox .tox-tree .tox-tree--directory__children.tox-tree--directory__children--shrinking { transition: height 0.5s ease-in-out; } .tox .tox-tree .tox-trbtn.tox-tree--leaf__label { display: flex; justify-content: space-between; } .tox .tox-view-wrap, .tox .tox-view-wrap__slot-container { background-color: #fff; display: flex; flex: 1; flex-direction: column; } .tox .tox-view { display: flex; flex: 1 1 auto; flex-direction: column; overflow: hidden; } .tox .tox-view__header { align-items: center; display: flex; font-size: 16px; justify-content: space-between; padding: 8px 8px 0 8px; position: relative; } .tox .tox-view--mobile.tox-view__header, .tox .tox-view--mobile.tox-view__toolbar { padding: 8px; } .tox .tox-view--scrolling { flex-wrap: nowrap; overflow-x: auto; } .tox .tox-view__toolbar { display: flex; flex-direction: row; gap: 8px; justify-content: space-between; padding: 8px 8px 0 8px; } .tox .tox-view__toolbar__group { display: flex; flex-direction: row; gap: 12px; } .tox .tox-view__header-start, .tox .tox-view__header-end { display: flex; } .tox .tox-view__pane { height: 100%; padding: 8px; width: 100%; } .tox .tox-view__pane_panel { border: 1px solid #eeeeee; border-radius: 6px; } .tox:not([dir=rtl]) .tox-view__header .tox-view__header-start > *, .tox:not([dir=rtl]) .tox-view__header .tox-view__header-end > * { margin-left: 8px; } .tox[dir=rtl] .tox-view__header .tox-view__header-start > *, .tox[dir=rtl] .tox-view__header .tox-view__header-end > * { margin-right: 8px; } .tox .tox-well { border: 1px solid #eeeeee; border-radius: 6px; padding: 8px; width: 100%; } .tox .tox-well > *:first-child { margin-top: 0; } .tox .tox-well > *:last-child { margin-bottom: 0; } .tox .tox-well > *:only-child { margin: 0; } .tox .tox-custom-editor { border: 1px solid #eeeeee; border-radius: 6px; display: flex; flex: 1; overflow: hidden; position: relative; } /* stylelint-disable */ .tox { /* stylelint-enable */ } .tox .tox-dialog-loading::before { background-color: rgba(0, 0, 0, 0.5); content: ""; height: 100%; position: absolute; width: 100%; z-index: 1000; } .tox .tox-tab { cursor: pointer; } .tox .tox-dialog__content-js { display: flex; flex: 1; } .tox .tox-dialog__body-content .tox-collection { display: flex; flex: 1; } .video-react .video-react-control:before, .video-react .video-react-big-play-button:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-react .video-react-control:before, .video-react .video-react-big-play-button:before { text-align: center; } @font-face { font-family: "video-react"; src: url(data:application/vnd.ms-fontobject;base64,MBgAAHwXAAABAAIAAAAAAAAAAAAAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAic4U8QAAAAAAAAAAAAAAAAAAAAAAABYAdgBpAGQAZQBvAC0AcgBlAGEAYwB0AAAADgBSAGUAZwB1AGwAYQByAAAAFgBWAGUAcgBzAGkAbwBuACAAMQAuADAAAAAWAHYAaQBkAGUAbwAtAHIAZQBhAGMAdAAAAAAAAAEAAAALAIAAAwAwT1MvMg7RD8oAAAC8AAAAYGNtYXAOVuSnAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zsdb3FIAAAF4AAAS0GhlYWQLMledAAAUSAAAADZoaGVhB6wEJgAAFIAAAAAkaG10eIgAFM8AABSkAAAAlGxvY2FLllAoAAAVOAAAAExtYXhwACoAyQAAFYQAAAAgbmFtZVtqyukAABWkAAABtnBvc3QAAwAAAAAXXAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADyIAQAAAAAAAQAAAAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg8iD//f//AAAAAAAg8gD//f//AAH/4w4EAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAVYA1gMqAyoAAgAACQIBVgHU/iwDKv7W/tYAAgBWAFYDqgOqAAIAFgAAAS0BNzIeAhUUDgIjIi4CNTQ+AgGqAQD/AFZYnHNDQ3ObWVicc0NDc5sBQMDA6kNzm1lYnHNDQ3ObWVicc0MAAAADAFYAVgOqA6oAEwAnACoAACUyPgI1NC4CIyIOAhUUHgITMh4CFRQOAiMiLgI1ND4CExEFAgBGfV02Nl18R0Z9XTY2XXxHWJxzQ0Nzm1lYnHNDQ3ObAwEAqjZdfEdGfV02Nl18R0Z9XTYDAENzm1lYnHNDQ3ObWVicc0P9lgGAwAAAAAACAQAA1gMAAyoAAwAHAAABMxEjIREzEQJWqqr+qqoDKv2sAlT9rAAAAwBWAFYDqgOqAAMABwAbAAABESMRIxEjERMyHgIVFA4CIyIuAjU0PgICgFZUVoBYnHNDQ3ObWVicc0NDc5sBVgFU/qwBVP6sAlRDc5tZWJxzQ0Nzm1lYnHNDAAAEAFYAVgOqA6oAAwAXACsALwAAAREzEQcyPgI1NC4CIyIOAhUUHgITMh4CFRQOAiMiLgI1ND4CAxEzEQIqVoBGfV02Nl18R0Z9XTY2XXxHWJxzQ0Nzm1lYnHNDQ3ObJ1YBVgFU/qysNl18R0Z9XTY2XXxHRn1dNgMAQ3ObWVicc0NDc5tZWJxzQ/2sAVT+rAABAQABAAMAAwAAAwAAASERIQEAAgD+AAMA/gAAAgBqAQADVgMAAAIABQAACQERIQkBAeoBbP6A/pQBbAIAAQD+AAEAAQAAAAACAKoBAAOWAwAAAgAFAAAJAiERAQIqAWz+lP6AAWwDAP8A/wACAP8AAAAAAAIBAAEAAwADAAACAAYAAAkBEQEzESMBlgFq/gBWVgIAAQD+AAIA/gAAAAAAAgEAAQADAAMAAAMABgAAATMRIyERAQKqVlb+VgFqAwD+AAIA/wAAAAIAqgCAA1YD1gBFAGgAAAEOARUUBjEjNzMVIwcwNjU0MjU0FjsBMhYXHgEXHgEVFAYHDgEHDgEHDgEjIiYnLgEnLgE1MxQWMzI2PwEwNj0BLwEwJiMRMh4CFRQOAiMiLgI1MxQeAjMyPgI1NC4CIxUnNwH4AwsEHgpmSgQEBgUDCAYNAwMKAwcLAQMDBQYGBwMDEQYGDQMDCwYICiIODAMGAwoEBAoJA0Z9XTY2XXxHRn1dNlYpRV01NF5FKSlFXTXW1gG8AQUCAwNeHiYBAwMDAwMDAwMGAwcZDgYNAwMNBgYDAwMBAQMDAgMEFgwLCQEDCAkDGggKBAFuNV17R0Z9XTY2XXxHNF5FKSlFXTU0XkUprNbWAAAEAKoAgANWA9YAGwBGAE0AcAAAARQWMzI2PwEwNj0BMCY1NCYjIgYPATAGHQEwFjcUBg8BMAYjIgYjIiYnLgEnLgE9ATQ2PwEwNjMyNjMyFhceARceARceARUHIzUHNTczEzIeAhUUDgIjIi4CNTMUHgIzMj4CNTQuAiMVJzcCNA4GAwgDCAQEEgQDBgMIBgZUAQMMEAYGDgYGDgYGCAYKCAEDDg4GBg4GBg4GBgoGBgMDAwG2KCpMBi5GfV02Nl18R0Z9XTZWKUVdNTReRSkpRV011tYBeAUJAQMKCQNWCQMECgMDCAkDVgknCRMGGgwEAQMDBgMFKA8eCRMGGgwEAQMDBgMDDgkJEAlqjAweGAEeNV17R0Z9XTY2XXxHNF5FKSlFXTU0XkUprNbWAAAABACqAIADVgPWABsARgCjAMYAAAEUFjMyNj8BMDY9ATQmNTQmIyIGDwEwBh0BMBY3FAYPATAGIyIGIyImJy4BJy4BPQE0Nj8BMDYzMjYzMhYXHgEXHgEXHgEVIzI2PQEwJjU0JisBMAYjIgYdASM0NjMyNjMyFhceAR0BMAYVFAYjIgYHHgEXHgEVFAYHDgEHDgEjIgYjIiYnLgEnLgE1MxUwFhUUFjsBMDYzMjY9ATAmNTQmKwE1EzIeAhUUDgIjIi4CNTMUHgIzMj4CNTQuAiMVJzcCPBAGAwYDCAQEEAQDCAMIBARQAQMMEAYGDgYPFQoGAwMDAwMDDBAGBgwGBg4GBgoGBgMDAwHiDBIEBQMWBQMDASwWDgMOAw0ZCggIBAUDAwgDBg0DAwUBAwMGAwMNBgYOBgYLAwMNBggKJAQFAxYFAwMBBAUDGmZGfV02Nl18R0Z9XTZWKUVdNTReRSkpRV011tYBeAYIAQMKCQNWAwYDBAoDAwgJA1YJJwkTBhoMBAsFAw4JCRAJHgkTBhoMBAEDAwYDAw4JCRAJDgwIBQMDAQQFAwgPHwQHBQQYCg4JAwMFBwMDBwYGDgYGDQMDCgMDBQQBAwMCAwQbCwgFAwMBBAUDFgUDAwEeAWo1XXtHRn1dNjZdfEc0XkUpKUVdNTReRSms1tYAAAIAqgCAA1YD1gBCAGUAAAEOARUUBjEjNzMVIwcwNjU0MjU0FjsBMhYXHgEXHgEVFAYHDgEHDgEjIiYnLgEnLgE1MxQWMzI2PwEwNj0BLwEwJiMlND4CMzUXBzUiDgIVFB4CMzI+AjUzFA4CIyIuAgH0AwsEGgpmSgQEBgUDCAYNAwMKAwcLAQMDBQYIFw8GDQMDCwYICiIODAMGAwoEBAoJA/6uNl18R9bWNF5FKSlFXTU0XkUpVjZdfEdGfV02AbwBBQIDA14eJgEDAwMDAwMDAwYDBxkOBg0DAw0GCAgBAwMCAwQWDAsJAQMICQMaCAoEGkZ8XTWs1tasKUVdNTReRSkpRV01Rn1dNjZdfAAABACqAIADVgPWABsARgBNAHAAAAEUFjMyNj8BMDY9ATAmNTQmIyIGDwEwBh0BMBY3FAYPATAGIyIGIyImJy4BJy4BPQE0Nj8BMDYzMjYzMhYXHgEXHgEXHgEVByM1BzU3MwU0PgIzNRcHNSIOAhUUHgIzMj4CNTMUDgIjIi4CAjQOBgMIAwgEBBIEAwYDCAYGUAEDDBAGBg4GBg4GBggGCggBAw4OBgYOBgYOBgYKBgYDAwMBsigqTAb+2DZdfEfW1jReRSkpRV01NF5FKVY2XXxHRn1dNgF4BQkBAwoJA1YJAwQKAwMICQNWCScJEwYaDAQBAwMGAwUoDx4JEwYaDAQBAwMGAwMOCQkQCWqMDB4YNkZ8XTWs1tasKUVdNTReRSkpRV01Rn1dNjZdfAAAAAQAqgCAA1YD1gAiAD4AaQDGAAATND4CMzUXBzUiDgIVFB4CMzI+AjUzFA4CIyIuAgUUFjMyNj8BMDY9ATAmNTQmIyIGDwEwBh0BMBY3FAYPATAGIyIGIyImJy4BJy4BPQE0Nj8BMDYzMjYzMhYXHgEXHgEXHgEVIzI2PQEwJjU0JisBMAYjIgYdASM0NjMyNjMyFhceAR0BMAYVFAYjIgYHHgEXHgEVFAYHDgEHDgEjIgYjIiYnLgEnLgE1MxUwFhUUFjsBMDYzMjY9ATAmNTQmKwE1qjZdfEfW1jReRSkpRV01NF5FKVY2XXxHRn1dNgGODgYDCAMIBAQSBAMGAwgEBFQBAwwQBgYOBg8VCgYDAwMDAwMMEAYGDAYGDgYGCgYGAwMDAeIMEgQFAxYFAwMBLBYOAw4DDRkKCAgEBQMDCAMGDQMDBQEDAwYDAw0GBg4GBgsDAw0GCAokBAUDFgUDAwEEBQMaAdZGfF01rNbWrClFXTU0XkUpKUVdNUZ9XTY2XXwXBQkBAwoJA1YJAwQKAwMICQNWCScJEwYaDAQLBQMOCQkQCR4JEwYaDAQBAwMGAwMOCQkQCQ4MCAUDAwEEBQMIDx8EBwUEGAoOCQMDBQcDAwcGBg4GBg0DAwoDAwUEAQMDAgMEGwsIBQMDAQQFAxYFAwMBHgAAAAAEAIAAgAOAA4AAAgAUACYALgAAARUnJwEHJw4BBzU+ATcnEScjETMnATQuAic1HgMVFAYHJz4BJxwBByc1HgECAFrwAso2WCJOLBswFbbWqsrKAqofOU0vQG5PLRcVQAoMagJoMDoDVrRahP02NlgbKAtYBxoRtv7g1gEAyv62M1xLNg5YDkVjfEQwWydCGTkeBw0GaF4YWwAAAAABASoAqgKqA1YABQAAATM3EScjASqs1NSsAoDW/VTWAAIA1gCqAxYDVgAFAAwAABMzNxEnIyUUBgcRHgHWqtbWqgJAPDAwPAKA1v1U1oA5WxgBWBhbAAAAAwCAAIoDgAN2ABUAHAAiAAABHgMVFA4CBzU+AzU0LgInExQGBxEeASUzNxEnIwJWQG5PLS1PbUEuTjkfHzlNL2o6MDA6/cCq1taqA3YORWN8RER7Y0YOWA03S1wzM1xLNg7+4jlbGAFYGFtH1v1U1gAAAAAEANYA1gMqAyoABQALABEAFwAAATMVIzUjEzUzFSM1ATUzFSMVHQEzFSM1AlbUVICAVNT+gNSAgNQDKtSA/lSA1FQBLNRUgKyAVNQABADWANYDKgMqAAUACwARABcAAAEzFSM1MwM1MxUjFQE1MxUjNRE1MxUjNQKqgNRUVNSA/qxU1NRUAqpU1P2s1FSAAdSA1FT+rFTUgAAAAAADAIAAqgOAA1YAFwAvAD8AAAE1NCYrASIGHQEUFjsBMjY9ASMVIzUzFSM1NCYrASIGHQEUFjsBMjY9ASMVIzUzFQEyFhURFAYjISImNRE0NjMDABgSgBIaGhKAEhhAVlbqGhKAEhgYEoASGkBWVgGUIjQzI/2sJDIyJAIqLBIYGBKsEhgYEiwWgBYsEhgYEqwSGBgSLBaAFgEsMyP+ACI0MyMCACI0AAAEAIAAgAOAA4AAAwANABkAKQAAATUzFScRMzI2PQE0JiMBESMVIzUjETM1MxUBMhYVERQGIyEiJjURNDYzAmpWlqwSGBgS/wBAVkBAVgGUIjQzI/2sJDIyJAHAgIDA/wAYEqwSGP8AAQBqav8AVlYCADMj/awiNDMjAlQiNAAAAAIAZABWA5wDqgALAFkAAAEyNjU0JiMiBhUUFiUXHgEPAQ4BLwEOAQ8BDgErASImLwEuAScHBiYvASY2PwEuATU8ATcnLgE/AT4BHwE+AT8BPgE7ATIWHwEeARc3NhYfARYGDwEeARUcAQIAPVlYPj1ZWAF8WgYCBFYEDghqECQUEAELCKwHCwIQEyQRagcOBVYEAgZaAQECWgYCBFYEDghqECQUEAELCKwHCwIQEyQRagcOBVYEAgZaAQEBalg+PVlYPj1ZbEYEEAiUBwQDKgwWCHAHCwoIcAcVDioDAwiUBxAFRgoVCwoVC0YEEAiUBwQDKgwWCHAHCwoIcAcVDioDAwiUBxAFRgoVCwoVAAAAAQCAAFgDgAOqADMAAAEyFhUUBiMiJjU8ATclDgEjIiY1NDYzMhYXJS4BNTQ2MzIWFRQGIyImJwUeARUUBgcFPgEDADNJSTMzSQL+0hIsGjRMSzUZLRIBLAEDSzU0TEs1GS0S/tQBAwICATAQLAFSSTMzS0szBw8GsBASSzU0TBERrgcPCDRMSzU0TBMRsAcPCAcPCLAPEQADAFYAVgOqA6oAAwAHABsAAAE1IxUTESMREzIeAhUUDgIjIi4CNTQ+AgIqVFRUKlicc0NDc5tZWJxzQ0NzmwKAVlb+qgEA/wACgENzm1lYnHNDQ3ObWVicc0MAAAQAVgBWA6oDqgADABcAKwAvAAABNTMVAzI+AjU0LgIjIg4CFRQeAhMyHgIVFA4CIyIuAjU0PgITETMRAdZUKkZ9XTY2XXxHRn1dNjZdfEdYnHNDQ3ObWVicc0NDc5svVAKAVlb+KjZdfEdGfV02Nl18R0Z9XTYDAENzm1lYnHNDQ3ObWVicc0P9gAEA/wAAAAEA1gDWAyoDKgALAAABBxcHJwcnNyc3FzcDKu7uPO7uPO7uPO7uAu7u7jzu7jzu7jzu7gABAFUAVQOrA6sAFAAAExQeAjMyPgI1NC4CIyIOAhVVQ3ScWFicdENDdJxYWJx0QwIAWJx0Q0N0nFhYnHRDQ3ScWAAAAAIAVQBVA6sDqwAUACgAAAEiDgIVFB4CMzI+AjU0LgIjESIuAjU0PgIzMh4CFRQOAgIAWJx0Q0N0nFhYnHRDQ3ScWEd8XTU1XXxHR3xdNTVdfAOrQ3ScWFicdENDdJxYWJx0Q/0ANV18R0d8XTU1XXxHR3xdNQAAAAMAVQBVA6sDqwAUACgANAAAASIOAhUUHgIzMj4CNTQuAiMRIi4CNTQ+AjMyHgIVFA4CExQGIyImNTQ2MzIWAgBYnHRDQ3ScWFicdENDdJxYR3xdNTVdfEdHfF01NV18OUs1NUtLNTVLA6tDdJxYWJx0Q0N0nFhYnHRD/QA1XXxHR3xdNTVdfEdHfF01AVU1S0s1NUtLAAAAAQAAAAEAAPEUzolfDzz1AAsEAAAAAADUNIllAAAAANQ0iWUAAAAAA6sD1gAAAAgAAgAAAAAAAAABAAAEAAAAAAAEAAAAAAADqwABAAAAAAAAAAAAAAAAAAAAJQQAAAAAAAAAAAAAAAAAAAAEAAFWBAAAVgQAAFYEAAEABAAAVgQAAFYEAAEABAAAagQAAKoEAAEABAABAAQAAKoEAACqBAAAqgQAAKoEAACqBAAAqgQAAIAEAAEqBAAA1gQAAIAEAADWBAAA1gQAAIAEAACABAAAZAQAAIAEAABWBAAAVgQAANYEAABVBAAAVQQAAFUAAAAAAAoAFAAeACwAVACWAKoA2AEgAS4BRAFaAXABhAIQAqgDpgQuBMYFxAYSBiIGPgZ4Bp4GxgcaB1oH4gguCFwIpAi+COAJHAloAAEAAAAlAMcABAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQALAAAAAQAAAAAAAgAHAIQAAQAAAAAAAwALAEIAAQAAAAAABAALAJkAAQAAAAAABQALACEAAQAAAAAABgALAGMAAQAAAAAACgAaALoAAwABBAkAAQAWAAsAAwABBAkAAgAOAIsAAwABBAkAAwAWAE0AAwABBAkABAAWAKQAAwABBAkABQAWACwAAwABBAkABgAWAG4AAwABBAkACgA0ANR2aWRlby1yZWFjdAB2AGkAZABlAG8ALQByAGUAYQBjAHRWZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADB2aWRlby1yZWFjdAB2AGkAZABlAG8ALQByAGUAYQBjAHR2aWRlby1yZWFjdAB2AGkAZABlAG8ALQByAGUAYQBjAHRSZWd1bGFyAFIAZQBnAHUAbABhAHJ2aWRlby1yZWFjdAB2AGkAZABlAG8ALQByAGUAYQBjAHRGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA?#iefix) format("eot"); } @font-face { font-family: "video-react"; src: url(data:application/font-woff;base64,d09GRgABAAAAABfIAAsAAAAAF3wAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDtEPymNtYXAAAAFoAAAAVAAAAFQOVuSnZ2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAAEtAAABLQx1vcUmhlYWQAABSUAAAANgAAADYLMledaGhlYQAAFMwAAAAkAAAAJAesBCZobXR4AAAU8AAAAJQAAACUiAAUz2xvY2EAABWEAAAATAAAAExLllAobWF4cAAAFdAAAAAgAAAAIAAqAMluYW1lAAAV8AAAAbYAAAG2W2rK6XBvc3QAABeoAAAAIAAAACAAAwAAAAMEAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8iAEAAAAAAAEAAAAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIPIg//3//wAAAAAAIPIA//3//wAB/+MOBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQFWANYDKgMqAAIAAAkCAVYB1P4sAyr+1v7WAAIAVgBWA6oDqgACABYAAAEtATcyHgIVFA4CIyIuAjU0PgIBqgEA/wBWWJxzQ0Nzm1lYnHNDQ3ObAUDAwOpDc5tZWJxzQ0Nzm1lYnHNDAAAAAwBWAFYDqgOqABMAJwAqAAAlMj4CNTQuAiMiDgIVFB4CEzIeAhUUDgIjIi4CNTQ+AhMRBQIARn1dNjZdfEdGfV02Nl18R1icc0NDc5tZWJxzQ0NzmwMBAKo2XXxHRn1dNjZdfEdGfV02AwBDc5tZWJxzQ0Nzm1lYnHND/ZYBgMAAAAAAAgEAANYDAAMqAAMABwAAATMRIyERMxECVqqq/qqqAyr9rAJU/awAAAMAVgBWA6oDqgADAAcAGwAAAREjESMRIxETMh4CFRQOAiMiLgI1ND4CAoBWVFaAWJxzQ0Nzm1lYnHNDQ3ObAVYBVP6sAVT+rAJUQ3ObWVicc0NDc5tZWJxzQwAABABWAFYDqgOqAAMAFwArAC8AAAERMxEHMj4CNTQuAiMiDgIVFB4CEzIeAhUUDgIjIi4CNTQ+AgMRMxECKlaARn1dNjZdfEdGfV02Nl18R1icc0NDc5tZWJxzQ0NzmydWAVYBVP6srDZdfEdGfV02Nl18R0Z9XTYDAENzm1lYnHNDQ3ObWVicc0P9rAFU/qwAAQEAAQADAAMAAAMAAAEhESEBAAIA/gADAP4AAAIAagEAA1YDAAACAAUAAAkBESEJAQHqAWz+gP6UAWwCAAEA/gABAAEAAAAAAgCqAQADlgMAAAIABQAACQIhEQECKgFs/pT+gAFsAwD/AP8AAgD/AAAAAAACAQABAAMAAwAAAgAGAAAJAREBMxEjAZYBav4AVlYCAAEA/gACAP4AAAAAAAIBAAEAAwADAAADAAYAAAEzESMhEQECqlZW/lYBagMA/gACAP8AAAACAKoAgANWA9YARQBoAAABDgEVFAYxIzczFSMHMDY1NDI1NBY7ATIWFx4BFx4BFRQGBw4BBw4BBw4BIyImJy4BJy4BNTMUFjMyNj8BMDY9AS8BMCYjETIeAhUUDgIjIi4CNTMUHgIzMj4CNTQuAiMVJzcB+AMLBB4KZkoEBAYFAwgGDQMDCgMHCwEDAwUGBgcDAxEGBg0DAwsGCAoiDgwDBgMKBAQKCQNGfV02Nl18R0Z9XTZWKUVdNTReRSkpRV011tYBvAEFAgMDXh4mAQMDAwMDAwMDBgMHGQ4GDQMDDQYGAwMDAQEDAwIDBBYMCwkBAwgJAxoICgQBbjVde0dGfV02Nl18RzReRSkpRV01NF5FKazW1gAABACqAIADVgPWABsARgBNAHAAAAEUFjMyNj8BMDY9ATAmNTQmIyIGDwEwBh0BMBY3FAYPATAGIyIGIyImJy4BJy4BPQE0Nj8BMDYzMjYzMhYXHgEXHgEXHgEVByM1BzU3MxMyHgIVFA4CIyIuAjUzFB4CMzI+AjU0LgIjFSc3AjQOBgMIAwgEBBIEAwYDCAYGVAEDDBAGBg4GBg4GBggGCggBAw4OBgYOBgYOBgYKBgYDAwMBtigqTAYuRn1dNjZdfEdGfV02VilFXTU0XkUpKUVdNdbWAXgFCQEDCgkDVgkDBAoDAwgJA1YJJwkTBhoMBAEDAwYDBSgPHgkTBhoMBAEDAwYDAw4JCRAJaowMHhgBHjVde0dGfV02Nl18RzReRSkpRV01NF5FKazW1gAAAAQAqgCAA1YD1gAbAEYAowDGAAABFBYzMjY/ATA2PQE0JjU0JiMiBg8BMAYdATAWNxQGDwEwBiMiBiMiJicuAScuAT0BNDY/ATA2MzI2MzIWFx4BFx4BFx4BFSMyNj0BMCY1NCYrATAGIyIGHQEjNDYzMjYzMhYXHgEdATAGFRQGIyIGBx4BFx4BFRQGBw4BBw4BIyIGIyImJy4BJy4BNTMVMBYVFBY7ATA2MzI2PQEwJjU0JisBNRMyHgIVFA4CIyIuAjUzFB4CMzI+AjU0LgIjFSc3AjwQBgMGAwgEBBAEAwgDCAQEUAEDDBAGBg4GDxUKBgMDAwMDAwwQBgYMBgYOBgYKBgYDAwMB4gwSBAUDFgUDAwEsFg4DDgMNGQoICAQFAwMIAwYNAwMFAQMDBgMDDQYGDgYGCwMDDQYICiQEBQMWBQMDAQQFAxpmRn1dNjZdfEdGfV02VilFXTU0XkUpKUVdNdbWAXgGCAEDCgkDVgMGAwQKAwMICQNWCScJEwYaDAQLBQMOCQkQCR4JEwYaDAQBAwMGAwMOCQkQCQ4MCAUDAwEEBQMIDx8EBwUEGAoOCQMDBQcDAwcGBg4GBg0DAwoDAwUEAQMDAgMEGwsIBQMDAQQFAxYFAwMBHgFqNV17R0Z9XTY2XXxHNF5FKSlFXTU0XkUprNbWAAACAKoAgANWA9YAQgBlAAABDgEVFAYxIzczFSMHMDY1NDI1NBY7ATIWFx4BFx4BFRQGBw4BBw4BIyImJy4BJy4BNTMUFjMyNj8BMDY9AS8BMCYjJTQ+AjM1Fwc1Ig4CFRQeAjMyPgI1MxQOAiMiLgIB9AMLBBoKZkoEBAYFAwgGDQMDCgMHCwEDAwUGCBcPBg0DAwsGCAoiDgwDBgMKBAQKCQP+rjZdfEfW1jReRSkpRV01NF5FKVY2XXxHRn1dNgG8AQUCAwNeHiYBAwMDAwMDAwMGAwcZDgYNAwMNBggIAQMDAgMEFgwLCQEDCAkDGggKBBpGfF01rNbWrClFXTU0XkUpKUVdNUZ9XTY2XXwAAAQAqgCAA1YD1gAbAEYATQBwAAABFBYzMjY/ATA2PQEwJjU0JiMiBg8BMAYdATAWNxQGDwEwBiMiBiMiJicuAScuAT0BNDY/ATA2MzI2MzIWFx4BFx4BFx4BFQcjNQc1NzMFND4CMzUXBzUiDgIVFB4CMzI+AjUzFA4CIyIuAgI0DgYDCAMIBAQSBAMGAwgGBlABAwwQBgYOBgYOBgYIBgoIAQMODgYGDgYGDgYGCgYGAwMDAbIoKkwG/tg2XXxH1tY0XkUpKUVdNTReRSlWNl18R0Z9XTYBeAUJAQMKCQNWCQMECgMDCAkDVgknCRMGGgwEAQMDBgMFKA8eCRMGGgwEAQMDBgMDDgkJEAlqjAweGDZGfF01rNbWrClFXTU0XkUpKUVdNUZ9XTY2XXwAAAAEAKoAgANWA9YAIgA+AGkAxgAAEzQ+AjM1Fwc1Ig4CFRQeAjMyPgI1MxQOAiMiLgIFFBYzMjY/ATA2PQEwJjU0JiMiBg8BMAYdATAWNxQGDwEwBiMiBiMiJicuAScuAT0BNDY/ATA2MzI2MzIWFx4BFx4BFx4BFSMyNj0BMCY1NCYrATAGIyIGHQEjNDYzMjYzMhYXHgEdATAGFRQGIyIGBx4BFx4BFRQGBw4BBw4BIyIGIyImJy4BJy4BNTMVMBYVFBY7ATA2MzI2PQEwJjU0JisBNao2XXxH1tY0XkUpKUVdNTReRSlWNl18R0Z9XTYBjg4GAwgDCAQEEgQDBgMIBARUAQMMEAYGDgYPFQoGAwMDAwMDDBAGBgwGBg4GBgoGBgMDAwHiDBIEBQMWBQMDASwWDgMOAw0ZCggIBAUDAwgDBg0DAwUBAwMGAwMNBgYOBgYLAwMNBggKJAQFAxYFAwMBBAUDGgHWRnxdNazW1qwpRV01NF5FKSlFXTVGfV02Nl18FwUJAQMKCQNWCQMECgMDCAkDVgknCRMGGgwECwUDDgkJEAkeCRMGGgwEAQMDBgMDDgkJEAkODAgFAwMBBAUDCA8fBAcFBBgKDgkDAwUHAwMHBgYOBgYNAwMKAwMFBAEDAwIDBBsLCAUDAwEEBQMWBQMDAR4AAAAABACAAIADgAOAAAIAFAAmAC4AAAEVJycBBycOAQc1PgE3JxEnIxEzJwE0LgInNR4DFRQGByc+ASccAQcnNR4BAgBa8ALKNlgiTiwbMBW21qrKygKqHzlNL0BuTy0XFUAKDGoCaDA6A1a0WoT9NjZYGygLWAcaEbb+4NYBAMr+tjNcSzYOWA5FY3xEMFsnQhk5HgcNBmheGFsAAAAAAQEqAKoCqgNWAAUAAAEzNxEnIwEqrNTUrAKA1v1U1gACANYAqgMWA1YABQAMAAATMzcRJyMlFAYHER4B1qrW1qoCQDwwMDwCgNb9VNaAOVsYAVgYWwAAAAMAgACKA4ADdgAVABwAIgAAAR4DFRQOAgc1PgM1NC4CJxMUBgcRHgElMzcRJyMCVkBuTy0tT21BLk45Hx85TS9qOjAwOv3AqtbWqgN2DkVjfEREe2NGDlgNN0tcMzNcSzYO/uI5WxgBWBhbR9b9VNYAAAAABADWANYDKgMqAAUACwARABcAAAEzFSM1IxM1MxUjNQE1MxUjFR0BMxUjNQJW1FSAgFTU/oDUgIDUAyrUgP5UgNRUASzUVICsgFTUAAQA1gDWAyoDKgAFAAsAEQAXAAABMxUjNTMDNTMVIxUBNTMVIzURNTMVIzUCqoDUVFTUgP6sVNTUVAKqVNT9rNRUgAHUgNRU/qxU1IAAAAAAAwCAAKoDgANWABcALwA/AAABNTQmKwEiBh0BFBY7ATI2PQEjFSM1MxUjNTQmKwEiBh0BFBY7ATI2PQEjFSM1MxUBMhYVERQGIyEiJjURNDYzAwAYEoASGhoSgBIYQFZW6hoSgBIYGBKAEhpAVlYBlCI0MyP9rCQyMiQCKiwSGBgSrBIYGBIsFoAWLBIYGBKsEhgYEiwWgBYBLDMj/gAiNDMjAgAiNAAABACAAIADgAOAAAMADQAZACkAAAE1MxUnETMyNj0BNCYjAREjFSM1IxEzNTMVATIWFREUBiMhIiY1ETQ2MwJqVpasEhgYEv8AQFZAQFYBlCI0MyP9rCQyMiQBwICAwP8AGBKsEhj/AAEAamr/AFZWAgAzI/2sIjQzIwJUIjQAAAACAGQAVgOcA6oACwBZAAABMjY1NCYjIgYVFBYlFx4BDwEOAS8BDgEPAQ4BKwEiJi8BLgEnBwYmLwEmNj8BLgE1PAE3Jy4BPwE+AR8BPgE/AT4BOwEyFh8BHgEXNzYWHwEWBg8BHgEVHAECAD1ZWD49WVgBfFoGAgRWBA4IahAkFBABCwisBwsCEBMkEWoHDgVWBAIGWgEBAloGAgRWBA4IahAkFBABCwisBwsCEBMkEWoHDgVWBAIGWgEBAWpYPj1ZWD49WWxGBBAIlAcEAyoMFghwBwsKCHAHFQ4qAwMIlAcQBUYKFQsKFQtGBBAIlAcEAyoMFghwBwsKCHAHFQ4qAwMIlAcQBUYKFQsKFQAAAAEAgABYA4ADqgAzAAABMhYVFAYjIiY1PAE3JQ4BIyImNTQ2MzIWFyUuATU0NjMyFhUUBiMiJicFHgEVFAYHBT4BAwAzSUkzM0kC/tISLBo0TEs1GS0SASwBA0s1NExLNRktEv7UAQMCAgEwECwBUkkzM0tLMwcPBrAQEks1NEwREa4HDwg0TEs1NEwTEbAHDwgHDwiwDxEAAwBWAFYDqgOqAAMABwAbAAABNSMVExEjERMyHgIVFA4CIyIuAjU0PgICKlRUVCpYnHNDQ3ObWVicc0NDc5sCgFZW/qoBAP8AAoBDc5tZWJxzQ0Nzm1lYnHNDAAAEAFYAVgOqA6oAAwAXACsALwAAATUzFQMyPgI1NC4CIyIOAhUUHgITMh4CFRQOAiMiLgI1ND4CExEzEQHWVCpGfV02Nl18R0Z9XTY2XXxHWJxzQ0Nzm1lYnHNDQ3ObL1QCgFZW/io2XXxHRn1dNjZdfEdGfV02AwBDc5tZWJxzQ0Nzm1lYnHND/YABAP8AAAABANYA1gMqAyoACwAAAQcXBycHJzcnNxc3Ayru7jzu7jzu7jzu7gLu7u487u487u487u4AAQBVAFUDqwOrABQAABMUHgIzMj4CNTQuAiMiDgIVVUN0nFhYnHRDQ3ScWFicdEMCAFicdENDdJxYWJx0Q0N0nFgAAAACAFUAVQOrA6sAFAAoAAABIg4CFRQeAjMyPgI1NC4CIxEiLgI1ND4CMzIeAhUUDgICAFicdENDdJxYWJx0Q0N0nFhHfF01NV18R0d8XTU1XXwDq0N0nFhYnHRDQ3ScWFicdEP9ADVdfEdHfF01NV18R0d8XTUAAAADAFUAVQOrA6sAFAAoADQAAAEiDgIVFB4CMzI+AjU0LgIjESIuAjU0PgIzMh4CFRQOAhMUBiMiJjU0NjMyFgIAWJx0Q0N0nFhYnHRDQ3ScWEd8XTU1XXxHR3xdNTVdfDlLNTVLSzU1SwOrQ3ScWFicdENDdJxYWJx0Q/0ANV18R0d8XTU1XXxHR3xdNQFVNUtLNTVLSwAAAAEAAAABAADxFM6JXw889QALBAAAAAAA1DSJZQAAAADUNIllAAAAAAOrA9YAAAAIAAIAAAAAAAAAAQAABAAAAAAABAAAAAAAA6sAAQAAAAAAAAAAAAAAAAAAACUEAAAAAAAAAAAAAAAAAAAABAABVgQAAFYEAABWBAABAAQAAFYEAABWBAABAAQAAGoEAACqBAABAAQAAQAEAACqBAAAqgQAAKoEAACqBAAAqgQAAKoEAACABAABKgQAANYEAACABAAA1gQAANYEAACABAAAgAQAAGQEAACABAAAVgQAAFYEAADWBAAAVQQAAFUEAABVAAAAAAAKABQAHgAsAFQAlgCqANgBIAEuAUQBWgFwAYQCEAKoA6YELgTGBcQGEgYiBj4GeAaeBsYHGgdaB+IILghcCKQIvgjgCRwJaAABAAAAJQDHAAQAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEACwAAAAEAAAAAAAIABwCEAAEAAAAAAAMACwBCAAEAAAAAAAQACwCZAAEAAAAAAAUACwAhAAEAAAAAAAYACwBjAAEAAAAAAAoAGgC6AAMAAQQJAAEAFgALAAMAAQQJAAIADgCLAAMAAQQJAAMAFgBNAAMAAQQJAAQAFgCkAAMAAQQJAAUAFgAsAAMAAQQJAAYAFgBuAAMAAQQJAAoANADUdmlkZW8tcmVhY3QAdgBpAGQAZQBvAC0AcgBlAGEAYwB0VmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwdmlkZW8tcmVhY3QAdgBpAGQAZQBvAC0AcgBlAGEAYwB0dmlkZW8tcmVhY3QAdgBpAGQAZQBvAC0AcgBlAGEAYwB0UmVndWxhcgBSAGUAZwB1AGwAYQBydmlkZW8tcmVhY3QAdgBpAGQAZQBvAC0AcgBlAGEAYwB0Rm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format("woff"), url(data:application/x-font-ttf;base64,AAEAAAALAIAAAwAwT1MvMg7RD8oAAAC8AAAAYGNtYXAOVuSnAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5Zsdb3FIAAAF4AAAS0GhlYWQLMledAAAUSAAAADZoaGVhB6wEJgAAFIAAAAAkaG10eIgAFM8AABSkAAAAlGxvY2FLllAoAAAVOAAAAExtYXhwACoAyQAAFYQAAAAgbmFtZVtqyukAABWkAAABtnBvc3QAAwAAAAAXXAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADyIAQAAAAAAAQAAAAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg8iD//f//AAAAAAAg8gD//f//AAH/4w4EAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAVYA1gMqAyoAAgAACQIBVgHU/iwDKv7W/tYAAgBWAFYDqgOqAAIAFgAAAS0BNzIeAhUUDgIjIi4CNTQ+AgGqAQD/AFZYnHNDQ3ObWVicc0NDc5sBQMDA6kNzm1lYnHNDQ3ObWVicc0MAAAADAFYAVgOqA6oAEwAnACoAACUyPgI1NC4CIyIOAhUUHgITMh4CFRQOAiMiLgI1ND4CExEFAgBGfV02Nl18R0Z9XTY2XXxHWJxzQ0Nzm1lYnHNDQ3ObAwEAqjZdfEdGfV02Nl18R0Z9XTYDAENzm1lYnHNDQ3ObWVicc0P9lgGAwAAAAAACAQAA1gMAAyoAAwAHAAABMxEjIREzEQJWqqr+qqoDKv2sAlT9rAAAAwBWAFYDqgOqAAMABwAbAAABESMRIxEjERMyHgIVFA4CIyIuAjU0PgICgFZUVoBYnHNDQ3ObWVicc0NDc5sBVgFU/qwBVP6sAlRDc5tZWJxzQ0Nzm1lYnHNDAAAEAFYAVgOqA6oAAwAXACsALwAAAREzEQcyPgI1NC4CIyIOAhUUHgITMh4CFRQOAiMiLgI1ND4CAxEzEQIqVoBGfV02Nl18R0Z9XTY2XXxHWJxzQ0Nzm1lYnHNDQ3ObJ1YBVgFU/qysNl18R0Z9XTY2XXxHRn1dNgMAQ3ObWVicc0NDc5tZWJxzQ/2sAVT+rAABAQABAAMAAwAAAwAAASERIQEAAgD+AAMA/gAAAgBqAQADVgMAAAIABQAACQERIQkBAeoBbP6A/pQBbAIAAQD+AAEAAQAAAAACAKoBAAOWAwAAAgAFAAAJAiERAQIqAWz+lP6AAWwDAP8A/wACAP8AAAAAAAIBAAEAAwADAAACAAYAAAkBEQEzESMBlgFq/gBWVgIAAQD+AAIA/gAAAAAAAgEAAQADAAMAAAMABgAAATMRIyERAQKqVlb+VgFqAwD+AAIA/wAAAAIAqgCAA1YD1gBFAGgAAAEOARUUBjEjNzMVIwcwNjU0MjU0FjsBMhYXHgEXHgEVFAYHDgEHDgEHDgEjIiYnLgEnLgE1MxQWMzI2PwEwNj0BLwEwJiMRMh4CFRQOAiMiLgI1MxQeAjMyPgI1NC4CIxUnNwH4AwsEHgpmSgQEBgUDCAYNAwMKAwcLAQMDBQYGBwMDEQYGDQMDCwYICiIODAMGAwoEBAoJA0Z9XTY2XXxHRn1dNlYpRV01NF5FKSlFXTXW1gG8AQUCAwNeHiYBAwMDAwMDAwMGAwcZDgYNAwMNBgYDAwMBAQMDAgMEFgwLCQEDCAkDGggKBAFuNV17R0Z9XTY2XXxHNF5FKSlFXTU0XkUprNbWAAAEAKoAgANWA9YAGwBGAE0AcAAAARQWMzI2PwEwNj0BMCY1NCYjIgYPATAGHQEwFjcUBg8BMAYjIgYjIiYnLgEnLgE9ATQ2PwEwNjMyNjMyFhceARceARceARUHIzUHNTczEzIeAhUUDgIjIi4CNTMUHgIzMj4CNTQuAiMVJzcCNA4GAwgDCAQEEgQDBgMIBgZUAQMMEAYGDgYGDgYGCAYKCAEDDg4GBg4GBg4GBgoGBgMDAwG2KCpMBi5GfV02Nl18R0Z9XTZWKUVdNTReRSkpRV011tYBeAUJAQMKCQNWCQMECgMDCAkDVgknCRMGGgwEAQMDBgMFKA8eCRMGGgwEAQMDBgMDDgkJEAlqjAweGAEeNV17R0Z9XTY2XXxHNF5FKSlFXTU0XkUprNbWAAAABACqAIADVgPWABsARgCjAMYAAAEUFjMyNj8BMDY9ATQmNTQmIyIGDwEwBh0BMBY3FAYPATAGIyIGIyImJy4BJy4BPQE0Nj8BMDYzMjYzMhYXHgEXHgEXHgEVIzI2PQEwJjU0JisBMAYjIgYdASM0NjMyNjMyFhceAR0BMAYVFAYjIgYHHgEXHgEVFAYHDgEHDgEjIgYjIiYnLgEnLgE1MxUwFhUUFjsBMDYzMjY9ATAmNTQmKwE1EzIeAhUUDgIjIi4CNTMUHgIzMj4CNTQuAiMVJzcCPBAGAwYDCAQEEAQDCAMIBARQAQMMEAYGDgYPFQoGAwMDAwMDDBAGBgwGBg4GBgoGBgMDAwHiDBIEBQMWBQMDASwWDgMOAw0ZCggIBAUDAwgDBg0DAwUBAwMGAwMNBgYOBgYLAwMNBggKJAQFAxYFAwMBBAUDGmZGfV02Nl18R0Z9XTZWKUVdNTReRSkpRV011tYBeAYIAQMKCQNWAwYDBAoDAwgJA1YJJwkTBhoMBAsFAw4JCRAJHgkTBhoMBAEDAwYDAw4JCRAJDgwIBQMDAQQFAwgPHwQHBQQYCg4JAwMFBwMDBwYGDgYGDQMDCgMDBQQBAwMCAwQbCwgFAwMBBAUDFgUDAwEeAWo1XXtHRn1dNjZdfEc0XkUpKUVdNTReRSms1tYAAAIAqgCAA1YD1gBCAGUAAAEOARUUBjEjNzMVIwcwNjU0MjU0FjsBMhYXHgEXHgEVFAYHDgEHDgEjIiYnLgEnLgE1MxQWMzI2PwEwNj0BLwEwJiMlND4CMzUXBzUiDgIVFB4CMzI+AjUzFA4CIyIuAgH0AwsEGgpmSgQEBgUDCAYNAwMKAwcLAQMDBQYIFw8GDQMDCwYICiIODAMGAwoEBAoJA/6uNl18R9bWNF5FKSlFXTU0XkUpVjZdfEdGfV02AbwBBQIDA14eJgEDAwMDAwMDAwYDBxkOBg0DAw0GCAgBAwMCAwQWDAsJAQMICQMaCAoEGkZ8XTWs1tasKUVdNTReRSkpRV01Rn1dNjZdfAAABACqAIADVgPWABsARgBNAHAAAAEUFjMyNj8BMDY9ATAmNTQmIyIGDwEwBh0BMBY3FAYPATAGIyIGIyImJy4BJy4BPQE0Nj8BMDYzMjYzMhYXHgEXHgEXHgEVByM1BzU3MwU0PgIzNRcHNSIOAhUUHgIzMj4CNTMUDgIjIi4CAjQOBgMIAwgEBBIEAwYDCAYGUAEDDBAGBg4GBg4GBggGCggBAw4OBgYOBgYOBgYKBgYDAwMBsigqTAb+2DZdfEfW1jReRSkpRV01NF5FKVY2XXxHRn1dNgF4BQkBAwoJA1YJAwQKAwMICQNWCScJEwYaDAQBAwMGAwUoDx4JEwYaDAQBAwMGAwMOCQkQCWqMDB4YNkZ8XTWs1tasKUVdNTReRSkpRV01Rn1dNjZdfAAAAAQAqgCAA1YD1gAiAD4AaQDGAAATND4CMzUXBzUiDgIVFB4CMzI+AjUzFA4CIyIuAgUUFjMyNj8BMDY9ATAmNTQmIyIGDwEwBh0BMBY3FAYPATAGIyIGIyImJy4BJy4BPQE0Nj8BMDYzMjYzMhYXHgEXHgEXHgEVIzI2PQEwJjU0JisBMAYjIgYdASM0NjMyNjMyFhceAR0BMAYVFAYjIgYHHgEXHgEVFAYHDgEHDgEjIgYjIiYnLgEnLgE1MxUwFhUUFjsBMDYzMjY9ATAmNTQmKwE1qjZdfEfW1jReRSkpRV01NF5FKVY2XXxHRn1dNgGODgYDCAMIBAQSBAMGAwgEBFQBAwwQBgYOBg8VCgYDAwMDAwMMEAYGDAYGDgYGCgYGAwMDAeIMEgQFAxYFAwMBLBYOAw4DDRkKCAgEBQMDCAMGDQMDBQEDAwYDAw0GBg4GBgsDAw0GCAokBAUDFgUDAwEEBQMaAdZGfF01rNbWrClFXTU0XkUpKUVdNUZ9XTY2XXwXBQkBAwoJA1YJAwQKAwMICQNWCScJEwYaDAQLBQMOCQkQCR4JEwYaDAQBAwMGAwMOCQkQCQ4MCAUDAwEEBQMIDx8EBwUEGAoOCQMDBQcDAwcGBg4GBg0DAwoDAwUEAQMDAgMEGwsIBQMDAQQFAxYFAwMBHgAAAAAEAIAAgAOAA4AAAgAUACYALgAAARUnJwEHJw4BBzU+ATcnEScjETMnATQuAic1HgMVFAYHJz4BJxwBByc1HgECAFrwAso2WCJOLBswFbbWqsrKAqofOU0vQG5PLRcVQAoMagJoMDoDVrRahP02NlgbKAtYBxoRtv7g1gEAyv62M1xLNg5YDkVjfEQwWydCGTkeBw0GaF4YWwAAAAABASoAqgKqA1YABQAAATM3EScjASqs1NSsAoDW/VTWAAIA1gCqAxYDVgAFAAwAABMzNxEnIyUUBgcRHgHWqtbWqgJAPDAwPAKA1v1U1oA5WxgBWBhbAAAAAwCAAIoDgAN2ABUAHAAiAAABHgMVFA4CBzU+AzU0LgInExQGBxEeASUzNxEnIwJWQG5PLS1PbUEuTjkfHzlNL2o6MDA6/cCq1taqA3YORWN8RER7Y0YOWA03S1wzM1xLNg7+4jlbGAFYGFtH1v1U1gAAAAAEANYA1gMqAyoABQALABEAFwAAATMVIzUjEzUzFSM1ATUzFSMVHQEzFSM1AlbUVICAVNT+gNSAgNQDKtSA/lSA1FQBLNRUgKyAVNQABADWANYDKgMqAAUACwARABcAAAEzFSM1MwM1MxUjFQE1MxUjNRE1MxUjNQKqgNRUVNSA/qxU1NRUAqpU1P2s1FSAAdSA1FT+rFTUgAAAAAADAIAAqgOAA1YAFwAvAD8AAAE1NCYrASIGHQEUFjsBMjY9ASMVIzUzFSM1NCYrASIGHQEUFjsBMjY9ASMVIzUzFQEyFhURFAYjISImNRE0NjMDABgSgBIaGhKAEhhAVlbqGhKAEhgYEoASGkBWVgGUIjQzI/2sJDIyJAIqLBIYGBKsEhgYEiwWgBYsEhgYEqwSGBgSLBaAFgEsMyP+ACI0MyMCACI0AAAEAIAAgAOAA4AAAwANABkAKQAAATUzFScRMzI2PQE0JiMBESMVIzUjETM1MxUBMhYVERQGIyEiJjURNDYzAmpWlqwSGBgS/wBAVkBAVgGUIjQzI/2sJDIyJAHAgIDA/wAYEqwSGP8AAQBqav8AVlYCADMj/awiNDMjAlQiNAAAAAIAZABWA5wDqgALAFkAAAEyNjU0JiMiBhUUFiUXHgEPAQ4BLwEOAQ8BDgErASImLwEuAScHBiYvASY2PwEuATU8ATcnLgE/AT4BHwE+AT8BPgE7ATIWHwEeARc3NhYfARYGDwEeARUcAQIAPVlYPj1ZWAF8WgYCBFYEDghqECQUEAELCKwHCwIQEyQRagcOBVYEAgZaAQECWgYCBFYEDghqECQUEAELCKwHCwIQEyQRagcOBVYEAgZaAQEBalg+PVlYPj1ZbEYEEAiUBwQDKgwWCHAHCwoIcAcVDioDAwiUBxAFRgoVCwoVC0YEEAiUBwQDKgwWCHAHCwoIcAcVDioDAwiUBxAFRgoVCwoVAAAAAQCAAFgDgAOqADMAAAEyFhUUBiMiJjU8ATclDgEjIiY1NDYzMhYXJS4BNTQ2MzIWFRQGIyImJwUeARUUBgcFPgEDADNJSTMzSQL+0hIsGjRMSzUZLRIBLAEDSzU0TEs1GS0S/tQBAwICATAQLAFSSTMzS0szBw8GsBASSzU0TBERrgcPCDRMSzU0TBMRsAcPCAcPCLAPEQADAFYAVgOqA6oAAwAHABsAAAE1IxUTESMREzIeAhUUDgIjIi4CNTQ+AgIqVFRUKlicc0NDc5tZWJxzQ0NzmwKAVlb+qgEA/wACgENzm1lYnHNDQ3ObWVicc0MAAAQAVgBWA6oDqgADABcAKwAvAAABNTMVAzI+AjU0LgIjIg4CFRQeAhMyHgIVFA4CIyIuAjU0PgITETMRAdZUKkZ9XTY2XXxHRn1dNjZdfEdYnHNDQ3ObWVicc0NDc5svVAKAVlb+KjZdfEdGfV02Nl18R0Z9XTYDAENzm1lYnHNDQ3ObWVicc0P9gAEA/wAAAAEA1gDWAyoDKgALAAABBxcHJwcnNyc3FzcDKu7uPO7uPO7uPO7uAu7u7jzu7jzu7jzu7gABAFUAVQOrA6sAFAAAExQeAjMyPgI1NC4CIyIOAhVVQ3ScWFicdENDdJxYWJx0QwIAWJx0Q0N0nFhYnHRDQ3ScWAAAAAIAVQBVA6sDqwAUACgAAAEiDgIVFB4CMzI+AjU0LgIjESIuAjU0PgIzMh4CFRQOAgIAWJx0Q0N0nFhYnHRDQ3ScWEd8XTU1XXxHR3xdNTVdfAOrQ3ScWFicdENDdJxYWJx0Q/0ANV18R0d8XTU1XXxHR3xdNQAAAAMAVQBVA6sDqwAUACgANAAAASIOAhUUHgIzMj4CNTQuAiMRIi4CNTQ+AjMyHgIVFA4CExQGIyImNTQ2MzIWAgBYnHRDQ3ScWFicdENDdJxYR3xdNTVdfEdHfF01NV18OUs1NUtLNTVLA6tDdJxYWJx0Q0N0nFhYnHRD/QA1XXxHR3xdNTVdfEdHfF01AVU1S0s1NUtLAAAAAQAAAAEAAPEUzolfDzz1AAsEAAAAAADUNIllAAAAANQ0iWUAAAAAA6sD1gAAAAgAAgAAAAAAAAABAAAEAAAAAAAEAAAAAAADqwABAAAAAAAAAAAAAAAAAAAAJQQAAAAAAAAAAAAAAAAAAAAEAAFWBAAAVgQAAFYEAAEABAAAVgQAAFYEAAEABAAAagQAAKoEAAEABAABAAQAAKoEAACqBAAAqgQAAKoEAACqBAAAqgQAAIAEAAEqBAAA1gQAAIAEAADWBAAA1gQAAIAEAACABAAAZAQAAIAEAABWBAAAVgQAANYEAABVBAAAVQQAAFUAAAAAAAoAFAAeACwAVACWAKoA2AEgAS4BRAFaAXABhAIQAqgDpgQuBMYFxAYSBiIGPgZ4Bp4GxgcaB1oH4gguCFwIpAi+COAJHAloAAEAAAAlAMcABAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQALAAAAAQAAAAAAAgAHAIQAAQAAAAAAAwALAEIAAQAAAAAABAALAJkAAQAAAAAABQALACEAAQAAAAAABgALAGMAAQAAAAAACgAaALoAAwABBAkAAQAWAAsAAwABBAkAAgAOAIsAAwABBAkAAwAWAE0AAwABBAkABAAWAKQAAwABBAkABQAWACwAAwABBAkABgAWAG4AAwABBAkACgA0ANR2aWRlby1yZWFjdAB2AGkAZABlAG8ALQByAGUAYQBjAHRWZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADB2aWRlby1yZWFjdAB2AGkAZABlAG8ALQByAGUAYQBjAHR2aWRlby1yZWFjdAB2AGkAZABlAG8ALQByAGUAYQBjAHRSZWd1bGFyAFIAZQBnAHUAbABhAHJ2aWRlby1yZWFjdAB2AGkAZABlAG8ALQByAGUAYQBjAHRGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format("truetype"); font-weight: normal; font-style: normal; } .video-react-icon, .video-react .video-react-closed-caption, .video-react .video-react-bezel .video-react-bezel-icon, .video-react .video-react-volume-level, .video-react .video-react-mute-control, .video-react .video-react-volume-menu-button, .video-react .video-react-play-control, .video-react .video-react-play-progress, .video-react .video-react-big-play-button { /* use !important to prevent issues with browser extensions that change fonts */ font-family: "video-react" !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .video-react-icon-play-arrow:before, .video-react .video-react-bezel .video-react-bezel-icon-play:before, .video-react .video-react-play-control:before, .video-react .video-react-big-play-button:before { content: "\f200"; } .video-react-icon-play-circle-filled:before { content: "\f201"; } .video-react-icon-play-circle-outline:before { content: "\f202"; } .video-react-icon-pause:before, .video-react .video-react-bezel .video-react-bezel-icon-pause:before, .video-react .video-react-play-control.video-react-playing:before { content: "\f203"; } .video-react-icon-pause-circle-filled:before { content: "\f204"; } .video-react-icon-pause-circle-outline:before { content: "\f205"; } .video-react-icon-stop:before { content: "\f206"; } .video-react-icon-fast-rewind:before, .video-react .video-react-bezel .video-react-bezel-icon-fast-rewind:before { content: "\f207"; } .video-react-icon-fast-forward:before, .video-react .video-react-bezel .video-react-bezel-icon-fast-forward:before { content: "\f208"; } .video-react-icon-skip-previous:before { content: "\f209"; } .video-react-icon-skip-next:before { content: "\f20a"; } .video-react-icon-replay-5:before, .video-react .video-react-bezel .video-react-bezel-icon-replay-5:before { content: "\f20b"; } .video-react-icon-replay-10:before, .video-react .video-react-bezel .video-react-bezel-icon-replay-10:before { content: "\f20c"; } .video-react-icon-replay-30:before, .video-react .video-react-bezel .video-react-bezel-icon-replay-30:before { content: "\f20d"; } .video-react-icon-forward-5:before, .video-react .video-react-bezel .video-react-bezel-icon-forward-5:before { content: "\f20e"; } .video-react-icon-forward-10:before, .video-react .video-react-bezel .video-react-bezel-icon-forward-10:before { content: "\f20f"; } .video-react-icon-forward-30:before, .video-react .video-react-bezel .video-react-bezel-icon-forward-30:before { content: "\f210"; } .video-react-icon-volume-off:before, .video-react .video-react-bezel .video-react-bezel-icon-volume-off:before, .video-react .video-react-mute-control.video-react-vol-muted:before, .video-react .video-react-volume-menu-button.video-react-vol-muted:before { content: "\f211"; } .video-react-icon-volume-mute:before, .video-react .video-react-mute-control.video-react-vol-0:before, .video-react .video-react-volume-menu-button.video-react-vol-0:before { content: "\f212"; } .video-react-icon-volume-down:before, .video-react .video-react-bezel .video-react-bezel-icon-volume-down:before, .video-react .video-react-mute-control.video-react-vol-2:before, .video-react .video-react-volume-menu-button.video-react-vol-2:before, .video-react .video-react-mute-control.video-react-vol-1:before, .video-react .video-react-volume-menu-button.video-react-vol-1:before { content: "\f213"; } .video-react-icon-volume-up:before, .video-react .video-react-bezel .video-react-bezel-icon-volume-up:before, .video-react .video-react-mute-control:before, .video-react .video-react-volume-menu-button:before { content: "\f214"; } .video-react-icon-fullscreen:before { content: "\f215"; } .video-react-icon-fullscreen-exit:before { content: "\f216"; } .video-react-icon-closed-caption:before, .video-react .video-react-closed-caption:before { content: "\f217"; } .video-react-icon-hd:before { content: "\f218"; } .video-react-icon-settings:before { content: "\f219"; } .video-react-icon-share:before { content: "\f21a"; } .video-react-icon-info:before { content: "\f21b"; } .video-react-icon-info-outline:before { content: "\f21c"; } .video-react-icon-close:before { content: "\f21d"; } .video-react-icon-circle:before, .video-react .video-react-volume-level:before, .video-react .video-react-play-progress:before { content: "\f21e"; } .video-react-icon-circle-outline:before { content: "\f21f"; } .video-react-icon-circle-inner-circle:before { content: "\f220"; } .video-react { display: block; vertical-align: top; box-sizing: border-box; color: #fff; background-color: #000; position: relative; font-size: 10px; line-height: 1; font-family: serif, Times, "Times New Roman"; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .video-react:-moz-full-screen { position: absolute; } .video-react:-webkit-full-screen { width: 100% !important; height: 100% !important; } .video-react *, .video-react *:before, .video-react *:after { box-sizing: inherit; } .video-react ul { font-family: inherit; font-size: inherit; line-height: inherit; list-style-position: outside; margin-left: 0; margin-right: 0; margin-top: 0; margin-bottom: 0; } .video-react.video-react-fluid, .video-react.video-react-16-9, .video-react.video-react-4-3 { width: 100%; max-width: 100%; height: 0; } .video-react.video-react-16-9 { padding-top: 56.25%; } .video-react.video-react-4-3 { padding-top: 75%; } .video-react.video-react-fill { width: 100%; height: 100%; } .video-react .video-react-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-react.video-react-fullscreen { width: 100% !important; height: 100% !important; padding-top: 0 !important; } .video-react.video-react-fullscreen.video-react-user-inactive { cursor: none; } body.video-react-full-window { padding: 0; margin: 0; height: 100%; overflow-y: auto; } body.video-react-full-window .video-react-fullscreen { position: fixed; overflow: hidden; z-index: 1000; left: 0; top: 0; bottom: 0; right: 0; } .video-react .video-react-button { background: none; border: none; color: inherit; display: inline-block; cursor: pointer; overflow: visible; font-size: inherit; line-height: inherit; text-transform: none; text-decoration: none; transition: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .video-react .video-react-loading-spinner { display: none; position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -25px; opacity: 0.85; text-align: left; border: 6px solid rgba(43, 51, 63, 0.7); box-sizing: border-box; background-clip: padding-box; width: 50px; height: 50px; border-radius: 25px; } .video-react .video-react-loading-spinner:before, .video-react .video-react-loading-spinner:after { content: ""; position: absolute; margin: -6px; box-sizing: inherit; width: inherit; height: inherit; border-radius: inherit; opacity: 1; border: inherit; border-color: transparent; border-top-color: white; animation: video-react-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, video-react-spinner-fade 1.1s linear infinite; } .video-react-seeking .video-react-loading-spinner, .video-react-waiting .video-react-loading-spinner { display: block; } .video-react-seeking .video-react-loading-spinner:before, .video-react-waiting .video-react-loading-spinner:before { border-top-color: white; } .video-react-seeking .video-react-loading-spinner:after, .video-react-waiting .video-react-loading-spinner:after { border-top-color: white; animation-delay: 0.44s; } @keyframes video-react-spinner-spin { 100% { transform: rotate(360deg); } } @keyframes video-react-spinner-fade { 0% { border-top-color: #73859f; } 20% { border-top-color: #73859f; } 35% { border-top-color: white; } 60% { border-top-color: #73859f; } 100% { border-top-color: #73859f; } } .video-react .video-react-big-play-button { font-size: 3em; line-height: 1.5em; height: 1.5em; width: 3em; display: block; position: absolute; top: 10px; left: 10px; padding: 0; cursor: pointer; opacity: 1; border: 0.06666em solid #fff; background-color: #2B333F; background-color: rgba(43, 51, 63, 0.7); border-radius: 0.3em; transition: all 0.4s; } .video-react .video-react-big-play-button.video-react-big-play-button-center { top: 50%; left: 50%; margin-top: -0.75em; margin-left: -1.5em; } .video-react .video-react-big-play-button.big-play-button-hide { display: none; } .video-react:hover .video-react-big-play-button, .video-react .video-react-big-play-button:focus { outline: 0; border-color: #fff; background-color: #73859f; background-color: rgba(115, 133, 159, 0.5); transition: all 0s; } .video-react-menu-button { cursor: pointer; } .video-react-menu-button.video-react-disabled { cursor: default; } .video-react-menu .video-react-menu-content { display: block; padding: 0; margin: 0; overflow: auto; font-family: serif, Times, "Times New Roman"; } .video-react-menu li { list-style: none; margin: 0; padding: 0.2em 0; line-height: 1.4em; font-size: 1.2em; text-align: center; } .video-react-menu li:focus, .video-react-menu li:hover { outline: 0; background-color: #73859f; background-color: rgba(115, 133, 159, 0.5); } .video-react-menu li.video-react-selected, .video-react-menu li.video-react-selected:focus, .video-react-menu li.video-react-selected:hover { background-color: #fff; color: #2B333F; } .video-react-menu li.vjs-menu-title { text-align: center; text-transform: uppercase; font-size: 1em; line-height: 2em; padding: 0; margin: 0 0 0.3em 0; font-weight: bold; cursor: default; } .video-react-scrubbing .vjs-menu-button:hover .video-react-menu { display: none; } .video-react .video-react-menu-button-popup .video-react-menu { display: none; position: absolute; bottom: 0; width: 10em; left: -3em; height: 0em; margin-bottom: 1.5em; border-top-color: rgba(43, 51, 63, 0.7); } .video-react .video-react-menu-button-popup .video-react-menu .video-react-menu-content { background-color: #2B333F; background-color: rgba(43, 51, 63, 0.7); position: absolute; width: 100%; bottom: 1.5em; max-height: 15em; } .video-react-menu-button-popup .video-react-menu.video-react-lock-showing { display: block; } .video-react .video-react-menu-button-inline { transition: all 0.4s; overflow: hidden; } .video-react .video-react-menu-button-inline:before { width: 2.222222222em; } .video-react .video-react-menu-button-inline:hover, .video-react .video-react-menu-button-inline:focus, .video-react .video-react-menu-button-inline.video-react-slider-active { width: 12em; } .video-react .video-react-menu-button-inline:hover .video-react-menu, .video-react .video-react-menu-button-inline:focus .video-react-menu, .video-react .video-react-menu-button-inline.video-react-slider-active .video-react-menu { display: block; opacity: 1; } .video-react .video-react-menu-button-inline.video-react-slider-active { transition: none; } .video-react .video-react-menu-button-inline .video-react-menu { opacity: 0; height: 100%; width: auto; position: absolute; left: 4em; top: 0; padding: 0; margin: 0; transition: all 0.4s; } .video-react .video-react-menu-button-inline .video-react-menu-content { width: auto; height: 100%; margin: 0; overflow: hidden; } .video-react-no-flex .video-react-menu-button-inline .video-react-menu { display: block; opacity: 1; position: relative; width: auto; } .video-react-no-flex .video-react-menu-button-inline:hover, .video-react-no-flex .video-react-menu-button-inline:focus, .video-react-no-flex .video-react-menu-button-inline.video-react-slider-active { width: auto; } .video-react .video-react-poster { display: inline-block; vertical-align: middle; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; background-color: #000000; cursor: pointer; margin: 0; padding: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; } .video-react .video-react-poster img { display: block; vertical-align: middle; margin: 0 auto; max-height: 100%; padding: 0; width: 100%; } .video-react .video-react-slider { outline: 0; position: relative; cursor: pointer; padding: 0; margin: 0 0.45em 0 0.45em; background-color: #73859f; background-color: rgba(115, 133, 159, 0.5); } .video-react .video-react-slider:focus { box-shadow: 0 0 1em #fff; } .video-react .video-react-control { outline: none; position: relative; text-align: center; margin: 0; padding: 0; height: 100%; width: 4em; flex: none; } .video-react .video-react-control:before { font-size: 1.8em; line-height: 1.67; } .video-react .video-react-control:focus:before, .video-react .video-react-control:hover:before, .video-react .video-react-control:focus { text-shadow: 0em 0em 1em #fff, 0em 0em 0.5em #fff; } .video-react .video-react-control-text { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .video-react-no-flex .video-react-control { display: table-cell; vertical-align: middle; } .video-react .video-react-control-bar { display: none; width: 100%; position: absolute; bottom: 0; left: 0; right: 0; height: 3em; background-color: #2B333F; background-color: rgba(43, 51, 63, 0.7); } .video-react-has-started .video-react-control-bar { display: flex; visibility: visible; opacity: 1; transition: visibility 0.1s, opacity 0.1s; } .video-react-has-started.video-react-user-inactive.video-react-playing .video-react-control-bar.video-react-control-bar-auto-hide { visibility: visible; opacity: 0; transition: visibility 1s, opacity 1s; } .video-react-controls-disabled .video-react-control-bar, .video-react-using-native-controls .video-react-control-bar, .video-react-error .video-react-control-bar { display: none !important; } .video-react-audio.video-react-has-started.video-react-user-inactive.video-react-playing .video-react-control-bar { opacity: 1; visibility: visible; } .video-react-has-started.video-react-no-flex .video-react-control-bar { display: table; } .video-react .video-react-progress-control { flex: auto; display: flex; align-items: center; min-width: 4em; } .video-react-live .video-react-progress-control { display: none; } .video-react .video-react-progress-holder { flex: auto; transition: all 0.2s; height: 0.3em; } .video-react .video-react-progress-control:hover .video-react-progress-holder { font-size: 1.6666666667em; } /* If we let the font size grow as much as everything else, the current time tooltip ends up ginormous. If you'd like to enable the current time tooltip all the time, this should be disabled to avoid a weird hitch when you roll off the hover. */ .video-react .video-react-progress-control:hover .video-react-time-tooltip, .video-react .video-react-progress-control:hover .video-react-mouse-display:after, .video-react .video-react-progress-control:hover .video-react-play-progress:after { visibility: visible; font-size: 0.6em; } .video-react .video-react-progress-holder .video-react-play-progress, .video-react .video-react-progress-holder .video-react-load-progress, .video-react .video-react-progress-holder .video-react-tooltip-progress-bar, .video-react .video-react-progress-holder .video-react-load-progress div { position: absolute; display: block; height: 0.3em; margin: 0; padding: 0; width: 0; left: 0; top: 0; } .video-react .video-react-play-progress { background-color: #fff; } .video-react .video-react-play-progress:before { position: absolute; top: -0.3333333333em; right: -0.5em; font-size: 0.9em; } .video-react .video-react-time-tooltip, .video-react .video-react-mouse-display:after, .video-react .video-react-play-progress:after { visibility: hidden; pointer-events: none; position: absolute; top: -3.4em; right: -1.9em; font-size: 0.9em; color: #000; content: attr(data-current-time); padding: 6px 8px 8px 8px; background-color: #fff; background-color: rgba(255, 255, 255, 0.8); border-radius: 0.3em; } .video-react .video-react-time-tooltip, .video-react .video-react-play-progress:before, .video-react .video-react-play-progress:after { z-index: 1; } .video-react .video-react-progress-control .video-react-keep-tooltips-inside:after { display: none; } .video-react .video-react-load-progress { background: #bfc7d3; background: rgba(115, 133, 159, 0.5); } .video-react .video-react-load-progress div { background: white; background: rgba(115, 133, 159, 0.75); } .video-react.video-react-no-flex .video-react-progress-control { width: auto; } .video-react .video-react-time-tooltip { display: inline-block; height: 2.4em; position: relative; float: right; right: -1.9em; } .video-react .video-react-tooltip-progress-bar { visibility: hidden; } .video-react .video-react-progress-control .video-react-mouse-display { display: none; position: absolute; width: 1px; height: 100%; background-color: #000; z-index: 1; } .video-react-no-flex .video-react-progress-control .video-react-mouse-display { z-index: 0; } .video-react .video-react-progress-control:hover .video-react-mouse-display { display: block; } .video-react.video-react-user-inactive .video-react-progress-control .video-react-mouse-display, .video-react.video-react-user-inactive .video-react-progress-control .video-react-mouse-display:after { visibility: hidden; opacity: 0; transition: visibility 1s, opacity 1s; } .video-react.video-react-user-inactive.video-react-no-flex .video-react-progress-control .video-react-mouse-display, .video-react.video-react-user-inactive.video-react-no-flex .video-react-progress-control .video-react-mouse-display:after { display: none; } .video-react .video-react-mouse-display .video-react-time-tooltip, .video-react .video-react-progress-control .video-react-mouse-display:after { color: #fff; background-color: #000; background-color: rgba(0, 0, 0, 0.8); } .video-react .video-react-play-control { cursor: pointer; flex: none; } .video-react .video-react-fullscreen-control { cursor: pointer; flex: none; } .video-react.video-react-fullscreen { position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 9999; } .video-react .video-react-time-control { flex: none; font-size: 1em; line-height: 3em; min-width: 2em; width: auto; padding-left: 1em; padding-right: 1em; } .video-react .video-react-time-divider { line-height: 3em; min-width: initial; padding: 0; } .video-react .video-react-mute-control, .video-react .video-react-volume-menu-button { cursor: pointer; flex: none; } .video-react .video-react-volume-control { width: 5em; flex: none; display: flex; align-items: center; } .video-react .video-react-volume-bar { margin: 1.35em 0.45em; } .video-react .video-react-volume-bar.video-react-slider-horizontal { width: 5em; height: 0.3em; } .video-react .video-react-volume-bar.video-react-slider-horizontal .video-react-volume-level { width: 100%; } .video-react .video-react-volume-bar.video-react-slider-vertical { width: 0.3em; height: 5em; margin: 1.35em auto; } .video-react .video-react-volume-bar.video-react-slider-vertical .video-react-volume-level { height: 100%; } .video-react .video-react-volume-level { position: absolute; bottom: 0; left: 0; background-color: #fff; } .video-react .video-react-volume-level:before { position: absolute; font-size: 0.9em; } .video-react .video-react-slider-vertical .video-react-volume-level { width: 0.3em; } .video-react .video-react-slider-vertical .video-react-volume-level:before { top: -0.5em; left: -0.3em; } .video-react .video-react-slider-horizontal .video-react-volume-level { height: 0.3em; } .video-react .video-react-slider-horizontal .video-react-volume-level:before { top: -0.3em; right: -0.5em; } .video-react .video-react-menu-button-popup.video-react-volume-menu-button .video-react-menu { display: block; width: 0; height: 0; border-top-color: transparent; } .video-react .video-react-menu-button-popup.video-react-volume-menu-button-vertical .video-react-menu { left: 0.5em; height: 8em; } .video-react .video-react-menu-button-popup.video-react-volume-menu-button-horizontal .video-react-menu { left: -2em; } .video-react .video-react-menu-button-popup.video-react-volume-menu-button .video-react-menu-content { height: 0; width: 0; overflow-x: hidden; overflow-y: hidden; } .video-react .video-react-volume-menu-button-vertical:hover .video-react-menu-content, .video-react .video-react-volume-menu-button-vertical:focus .video-react-menu-content, .video-react .video-react-volume-menu-button-vertical.video-react-slider-active .video-react-menu-content, .video-react .video-react-volume-menu-button-vertical .video-react-lock-showing .video-react-menu-content { height: 8em; width: 2.9em; } .video-react .video-react-volume-menu-button-horizontal:hover .video-react-menu-content, .video-react .video-react-volume-menu-button-horizontal:focus .video-react-menu-content, .video-react .video-react-volume-menu-button-horizontal .video-react-slider-active .video-react-menu-content, .video-react .video-react-volume-menu-button-horizontal .video-react-lock-showing .video-react-menu-content { height: 2.9em; width: 8em; } .video-react .video-react-volume-menu-button.video-react-menu-button-inline .video-react-menu-content { background-color: transparent !important; } .video-react .video-react-playback-rate .video-react-playback-rate-value { line-height: 3em; text-align: center; } .video-react .video-react-playback-rate .video-react-menu { width: 4em; left: 0em; } .video-react .video-react-bezel { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; z-index: 17; margin-left: -26px; margin-top: -26px; background: rgba(0, 0, 0, 0.5); border-radius: 26px; } .video-react .video-react-bezel.video-react-bezel-animation { animation: video-react-bezel-fadeout 0.5s linear 1 normal forwards; pointer-events: none; } .video-react .video-react-bezel.video-react-bezel-animation-alt { animation: video-react-bezel-fadeout-alt 0.5s linear 1 normal forwards; pointer-events: none; } .video-react .video-react-bezel .video-react-bezel-icon { width: 36px; height: 36px; margin: 8px; font-size: 26px; line-height: 36px; text-align: center; } @keyframes video-react-bezel-fadeout { 0% { opacity: 1; } to { opacity: 0; transform: scale(2); } } @keyframes video-react-bezel-fadeout-alt { 0% { opacity: 1; } to { opacity: 0; transform: scale(2); } } .video-react .video-react-closed-caption { cursor: pointer; flex: none; } .video-react video::-webkit-media-text-track-container { transform: translateY(-30px); } /*! * Cropper.js v1.6.2 * https://fengyuanchen.github.io/cropperjs * * Copyright 2015-present Chen Fengyuan * Released under the MIT license * * Date: 2024-04-21T07:43:02.731Z */ .cropper-container { direction: ltr; font-size: 0; line-height: 0; position: relative; touch-action: none; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cropper-container img { backface-visibility: hidden; display: block; height: 100%; image-orientation: 0deg; max-height: none !important; max-width: none !important; min-height: 0 !important; min-width: 0 !important; width: 100%; } .cropper-wrap-box, .cropper-canvas, .cropper-drag-box, .cropper-crop-box, .cropper-modal { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .cropper-wrap-box, .cropper-canvas { overflow: hidden; } .cropper-drag-box { background-color: #fff; opacity: 0; } .cropper-modal { background-color: #000; opacity: 0.5; } .cropper-view-box { display: block; height: 100%; outline: 1px solid #39f; outline-color: rgba(51, 153, 255, 0.75); overflow: hidden; width: 100%; } .cropper-dashed { border: 0 dashed #eee; display: block; opacity: 0.5; position: absolute; } .cropper-dashed.dashed-h { border-bottom-width: 1px; border-top-width: 1px; height: 33.3333333333%; left: 0; top: 33.3333333333%; width: 100%; } .cropper-dashed.dashed-v { border-left-width: 1px; border-right-width: 1px; height: 100%; left: 33.3333333333%; top: 0; width: 33.3333333333%; } .cropper-center { display: block; height: 0; left: 50%; opacity: 0.75; position: absolute; top: 50%; width: 0; } .cropper-center::before, .cropper-center::after { background-color: #eee; content: " "; display: block; position: absolute; } .cropper-center::before { height: 1px; left: -3px; top: 0; width: 7px; } .cropper-center::after { height: 7px; left: 0; top: -3px; width: 1px; } .cropper-face, .cropper-line, .cropper-point { display: block; height: 100%; opacity: 0.1; position: absolute; width: 100%; } .cropper-face { background-color: #fff; left: 0; top: 0; } .cropper-line { background-color: #39f; } .cropper-line.line-e { cursor: ew-resize; right: -3px; top: 0; width: 5px; } .cropper-line.line-n { cursor: ns-resize; height: 5px; left: 0; top: -3px; } .cropper-line.line-w { cursor: ew-resize; left: -3px; top: 0; width: 5px; } .cropper-line.line-s { bottom: -3px; cursor: ns-resize; height: 5px; left: 0; } .cropper-point { background-color: #39f; height: 5px; opacity: 0.75; width: 5px; } .cropper-point.point-e { cursor: ew-resize; margin-top: -3px; right: -3px; top: 50%; } .cropper-point.point-n { cursor: ns-resize; left: 50%; margin-left: -3px; top: -3px; } .cropper-point.point-w { cursor: ew-resize; left: -3px; margin-top: -3px; top: 50%; } .cropper-point.point-s { bottom: -3px; cursor: s-resize; left: 50%; margin-left: -3px; } .cropper-point.point-ne { cursor: nesw-resize; right: -3px; top: -3px; } .cropper-point.point-nw { cursor: nwse-resize; left: -3px; top: -3px; } .cropper-point.point-sw { bottom: -3px; cursor: nesw-resize; left: -3px; } .cropper-point.point-se { bottom: -3px; cursor: nwse-resize; height: 20px; opacity: 1; right: -3px; width: 20px; } @media (min-width: 768px) { .cropper-point.point-se { height: 15px; width: 15px; } } @media (min-width: 992px) { .cropper-point.point-se { height: 10px; width: 10px; } } @media (min-width: 1200px) { .cropper-point.point-se { height: 5px; opacity: 0.75; width: 5px; } } .cropper-point.point-se::before { background-color: #39f; bottom: -50%; content: " "; display: block; height: 200%; opacity: 0; position: absolute; right: -50%; width: 200%; } .cropper-invisible { opacity: 0; } .cropper-bg { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC"); } .cropper-hide { display: block; height: 0; position: absolute; width: 0; } .cropper-hidden { display: none !important; } .cropper-move { cursor: move; } .cropper-crop { cursor: crosshair; } .cropper-disabled .cropper-drag-box, .cropper-disabled .cropper-face, .cropper-disabled .cropper-line, .cropper-disabled .cropper-point { cursor: not-allowed; } /* 默认 CSS 样式，目前主要是 Excel 使用 */ .ov-excel { /* 从 office 365 中复制的默认字体 */ font-family: "Aptos Narrow", "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; display: flex; flex-direction: column; --bar-bg-color: #f5f5f5; --bar-input-bg-color: #ffffff; --active-sheet-color: #217346; } .excel-button { height: 32px; color: rgb(255, 255, 255); padding: 0px 11px; box-sizing: border-box; border: 1px solid transparent; display: inline-block; text-decoration: none; text-align: center; cursor: pointer; vertical-align: top; border-radius: 2px; font-size: 14px; font-weight: 600; position: relative; margin-right: 4px; width: 64px; } .excel-button-primary { background-color: rgb(0, 120, 212); } /* Excel 工具栏，目前没编辑功能所以还没实现 */ .ov-excel-toolbar { height: 30px; line-height: 30px; } .excel-checkbox-list-wrapper .excel-checkbox-list { margin-top: 4px; } .excel-checkbox-container label { cursor: pointer; padding: 4px 0; display: block; } .excel-checkbox-container label:hover { background-color: #f6f6f6; } .excel-checkbox-container input { vertical-align: middle; } .excel-checkbox-container span { vertical-align: middle; } .excel-divider { display: block; height: 1px; background-color: rgb(225, 223, 221); margin: 2px 12px 2px; color: rgb(200, 198, 196); border-radius: 0.5px; } .excel-input { display: inline-block; box-sizing: border-box; width: 100%; border-radius: 4px; padding: 4px 12px; border: 1px solid rgb(209, 209, 209); } .excel-input-border-less { display: block; border: none; width: 100%; height: 100%; padding: 0 2px; } .excel-input-border-less:focus { outline: none; } .excel-select { border-color: rgb(209, 209, 209); border-radius: 4px; } /* Excel 公式栏 */ .ov-excel-formula-bar { height: 34px; display: flex; flex-direction: row; background-color: var(--bar-bg-color); } .ov-excel-formula-bar__name-box { text-align: center; width: 64px; margin: 4px 0 4px 4px; padding: 0 4px; line-height: 26px; border: 1px solid #e1dfdd; background-color: var(--bar-input-bg-color); } /* fx 按钮 */ .ov-excel-formula-bar__function-button { width: 30px; } /* fx 按钮右边的输入框 */ .ov-excel-formula-bar__text-box { margin: 4px; line-height: 26px; border: 1px solid #e1dfdd; flex: 1; padding: 0 4px; background-color: var(--bar-input-bg-color); } /* Excel sheet 标签页 */ .ov-excel-sheet-tab-bar { height: 32px; line-height: 32px; display: flex; flex-direction: row; background-color: var(--bar-bg-color); } .ov-excel-sheet-tab-bar__nav { display: flex; } .ov-excel-sheet-tab-bar__nav-icon { height: 16px; padding: 4px 4px; } .ov-excel-sheet-tab-bar__nav-icon svg { height: 16px; width: 16px; } .ov-excel-sheet-tab-bar__nav-icon svg path { fill: #b1b1b1; } .ov-excel-sheet-tab-bar__nav-icon--enabled { cursor: pointer; } .ov-excel-sheet-tab-bar__nav-icon--enabled svg path { fill: #000000; } .ov-excel-sheet-tab-bar__menu { position: relative; } .ov-excel-sheet-tab-bar__menu-icon { cursor: pointer; height: 16px; padding: 4px 8px; } .ov-excel-sheet-tab-bar__menu-icon svg { height: 16px; width: 16px; } .ov-excel-sheet-tab-bar__menu-list { background-color: #fff; border-radius: 4px; border: 1px solid rgb(199, 199, 199); box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px; display: none; position: absolute; bottom: 32px; left: 0; max-height: 400px; overflow-x: hidden; overflow-y: auto; z-index: 15; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .ov-excel-sheet-tab-bar__menu-list-item { padding: 4px 8px; cursor: pointer; white-space: nowrap; } .ov-excel-sheet-tab-bar__menu-list-item:hover { background-color: #e1dfdd; } .ov-excel-sheet-tab-bar__menu-list-item--active { background-color: #e1dfdd; } .ov-excel-sheet-tab-bar__list-container { position: relative; overflow: hidden; flex: 1 1 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .ov-excel-sheet-tab-bar__list-container--enable-left-nav::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30px; background-image: linear-gradient(to right, #dcdcdc, rgba(220, 220, 220, 0.1)); } .ov-excel-sheet-tab-bar__list-container--enable-right-nav::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 30px; background-image: linear-gradient(to left, #dcdcdc, rgba(220, 220, 220, 0.1)); } .ov-excel-sheet-tab-bar__list { width: 0; display: flex; flex-direction: row; } .ov-excel-sheet-tab-bar__list-tab { display: inline-block; position: relative; padding: 0 8px; font-size: 14px; margin: 4px 4px; border-radius: 4px; line-height: 24px; white-space: nowrap; } .ov-excel-sheet-tab-bar__list-tab:hover { cursor: pointer; background-color: #e1dfdd; } .ov-excel-sheet-tab-bar__list-tab--active { cursor: default; } .ov-excel-sheet-tab-bar__list-tab--active::before { content: ""; position: absolute; display: inline-block; top: 0; bottom: -4px; left: 0; right: 0; color: transparent; border-bottom: 3px solid var(--active-sheet-color); padding-bottom: 5px; width: calc(100% - 18px); margin: auto; transition: width 0.4s cubic-bezier(0.17, 0.17, 0, 1) 0s; } .ov-excel-sheet-tab-bar__status { margin-left: 12px; margin-right: 12px; } .ov-excel-sheet-tab-bar__status-text { margin-right: 16px; } .ov-excel-sheet-tab-bar__zoom-level { display: flex; flex-direction: row; padding: 0 8px; } .ov-excel-sheet-tab-bar__zoom-value { margin: 0 8px; } .ov-excel-sheet-tab-bar__zoom-in, .ov-excel-sheet-tab-bar__zoom-out { cursor: pointer; } /* Excel 内容区域，这个包含表头 */ .ov-excel-content { flex: 1; position: relative; overflow: hidden; z-index: 1; } /** Excel 数据区域，不包含表头，目前这个区域主要是给 drawing 用 */ .ov-excel-data { position: absolute; right: 0; bottom: 0; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; user-select: none; z-index: 2; } .ov-excel-canvas { position: absolute; left: 0; top: 0; } .ov-excel-scrollbar-y { position: absolute; top: 0; right: 0; bottom: 0; z-index: 3; } .ov-excel-scrollbar-x { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; } .ov-excel-scrollbar-content-x { overflow-x: auto; overflow-y: hidden; } .ov-excel-scrollbar-content-y { overflow-x: hidden; } /** 缩放的控制界面 */ .ov-excel-resize-box { position: absolute; border: 1px solid #4af; z-index: 3; } .ov-excel-resize-box-control { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-sizing: border-box; background: #4af; border: 2px solid #fff; z-index: 5; } .ov-excel-auto-filter-icon-container { position: absolute; } .ov-excel-auto-filter-icon { cursor: pointer; position: absolute; right: 2px; top: 2px; bottom: 2px; z-index: 3; } .ov-excel-auto-filter-icon svg { width: 100%; height: 100%; } .ov-excel-auto-filter-menu { position: absolute; display: none; flex-direction: column; right: -240px; width: 240px; height: 440px; border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.133) 0px 3.2px 7.2px 0px, rgba(0, 0, 0, 0.11) 0px 0.6px 1.8px 0px; z-index: 4; background-color: white; } .excel-auto-filter__menu-sort { display: flex; flex-direction: row; -moz-column-gap: 4px; column-gap: 4px; padding: 8px; } .ov-excel-auto-filter__sort-button { cursor: pointer; flex: 1; display: flex; flex-direction: row; line-height: 24px; height: 24px; padding: 2px; } .ov-excel-auto-filter__sort-button-text { flex: 1; } .ov-excel-auto-filter__sort-button-icon { height: 24px; width: 24px; } .ov-excel-auto-filter__sort-button-icon svg { height: 100%; width: 100%; } .ov-excel-auto-filter__sort-button:hover { background-color: #f5f5f5; } .ov-excel-auto-filter__sort-button-active { background-color: #f5f5f5; } .ov-excel-auto-filter__menu-filter-filters { flex-grow: 1; display: flex; flex-direction: column; min-height: 0; } .ov-excel-auto-filter__menu-filter-filters .excel-checkbox-list-wrapper { display: flex; flex-grow: 1; flex-direction: column; padding: 8px; min-height: 0; } .ov-excel-auto-filter__menu-filter-filters .excel-checkbox-list { flex-grow: 1; overflow-y: auto; overflow-x: hidden; } .ov-excel-auto-filter-menu__custom-filters { display: flex; flex-direction: column; padding: 8px; } /** 单个规则 */ .ov-excel-auto-filter-menu__custom-filters-item-input { display: flex; flex-direction: row; margin-bottom: 4px; } .ov-excel-auto-filter-menu__custom-filters-item-input > select { margin-right: 4px; } .ov-excel-auto-filter-menu__custom-filters .excel-radio-wrapper { margin: 4px 0; text-align: center; } .excel-cell-editor { position: absolute; } .excel-chart { position: absolute; z-index: 10; } .excel-pic { position: absolute; z-index: 10; overflow: hidden; } /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in * IE on Windows Phone and in iOS. */ html { line-height: 1.15; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers (opinionated). */ body { margin: 0; } /** * Add the correct display in IE 9-. */ article, aside, footer, header, nav, section { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct display in IE 9-. * 1. Add the correct display in IE. */ figcaption, figure, main { /* 1 */ display: block; } /** * Add the correct margin in IE 8. */ figure { margin: 1em 40px; } /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the gray background on active links in IE 10. * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ } /** * 1. Remove the bottom border in Chrome 57- and Firefox 39-. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { font-weight: inherit; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font style in Android 4.3-. */ dfn { font-style: italic; } /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; color: #000; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Remove the border on images inside links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers (opinionated). * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type=button], [type=reset], [type=submit] { -webkit-appearance: button; /* 2 */ } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in IE 9-. * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the default vertical scrollbar in IE. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type=checkbox], [type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type=search] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */ [type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in IE 9-. * 1. Add the correct display in Edge, IE, and Firefox. */ details, menu { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting ========================================================================== */ /** * Add the correct display in IE 9-. */ canvas { display: inline-block; } /** * Add the correct display in IE. */ template { display: none; } /* Hidden ========================================================================== */ /** * Add the correct display in IE 10-. */ [hidden] { display: none; } /*do not import this file except components/style/index.less*/ .am-fade-enter, .am-fade-appear { opacity: 0; animation-duration: 0.2s; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2); animation-play-state: paused; } .am-fade-leave { animation-duration: 0.2s; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2); animation-play-state: paused; } .am-fade-enter.am-fade-enter-active, .am-fade-appear.am-fade-appear-active { animation-name: amFadeIn; animation-play-state: running; } .am-fade-leave.am-fade-leave-active { animation-name: amFadeOut; animation-play-state: running; } @keyframes amFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes amFadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .am-slide-up-enter, .am-slide-up-appear { transform: translate(0, 100%); } .am-slide-up-enter, .am-slide-up-appear, .am-slide-up-leave { animation-duration: 0.2s; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2); animation-play-state: paused; } .am-slide-up-enter.am-slide-up-enter-active, .am-slide-up-appear.am-slide-up-appear-active { animation-name: amSlideUpIn; animation-play-state: running; } .am-slide-up-leave.am-slide-up-leave-active { animation-name: amSlideUpOut; animation-play-state: running; } @keyframes amSlideUpIn { 0% { transform: translate(0, 100%); } 100% { transform: translate(0, 0); } } @keyframes amSlideUpOut { 0% { transform: translate(0, 0); } 100% { transform: translate(0, 100%); } } .am.am-zoom-enter, .am.am-zoom-leave { display: block; } .am-zoom-enter, .am-zoom-appear { opacity: 0; animation-duration: 0.2s; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2); animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28); animation-play-state: paused; } .am-zoom-leave { animation-duration: 0.2s; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2); animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05); animation-play-state: paused; } .am-zoom-enter.am-zoom-enter-active, .am-zoom-appear.am-zoom-appear-active { animation-name: amZoomIn; animation-play-state: running; } .am-zoom-leave.am-zoom-leave-active { animation-name: amZoomOut; animation-play-state: running; } @keyframes amZoomIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); } } @keyframes amZoomOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0); } } .am-slide-down-enter, .am-slide-down-appear { transform: translate(0, -100%); } .am-slide-down-enter, .am-slide-down-appear, .am-slide-down-leave { animation-duration: 0.2s; animation-fill-mode: both; animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2); animation-play-state: paused; } .am-slide-down-enter.am-slide-down-enter-active, .am-slide-down-appear.am-slide-down-appear-active { animation-name: amSlideDownIn; animation-play-state: running; } .am-slide-down-leave.am-slide-down-leave-active { animation-name: amSlideDownOut; animation-play-state: running; } @keyframes amSlideDownIn { 0% { transform: translate(0, -100%); } 100% { transform: translate(0, 0); } } @keyframes amSlideDownOut { 0% { transform: translate(0, 0); } 100% { transform: translate(0, -100%); } } *, *:before, *:after { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } body { background-color: #f5f5f9; font-size: 14px; } *[contenteditable] { -webkit-user-select: auto !important; } *:focus { outline: none; } a { background: transparent; text-decoration: none; outline: none; } .am-drawer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; } .am-drawer-sidebar { z-index: 4; position: absolute; transition: transform 0.3s ease-out; will-change: transform; overflow-y: auto; } .am-drawer-draghandle { z-index: 1; position: absolute; background-color: rgba(50, 50, 50, 0.1); } .am-drawer-overlay { z-index: 3; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; visibility: hidden; transition: opacity 0.5s ease-out; background-color: rgba(0, 0, 0, 0.4); } .am-drawer-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: auto; transition: left 0.3s ease-out, right 0.3s ease-out; } .am-drawer.am-drawer-left .am-drawer-sidebar, .am-drawer.am-drawer-right .am-drawer-sidebar, .am-drawer.am-drawer-left .am-drawer-draghandle, .am-drawer.am-drawer-right .am-drawer-draghandle { top: 0; bottom: 0; } .am-drawer.am-drawer-left .am-drawer-draghandle, .am-drawer.am-drawer-right .am-drawer-draghandle { width: 10px; height: 100%; } .am-drawer.am-drawer-top .am-drawer-sidebar, .am-drawer.am-drawer-bottom .am-drawer-sidebar, .am-drawer.am-drawer-top .am-drawer-draghandle, .am-drawer.am-drawer-bottom .am-drawer-draghandle { left: 0; right: 0; } .am-drawer.am-drawer-top .am-drawer-draghandle, .am-drawer.am-drawer-bottom .am-drawer-draghandle { width: 100%; height: 10px; } .am-drawer.am-drawer-left .am-drawer-sidebar { left: 0; transform: translateX(-100%); } .am-drawer-open.am-drawer.am-drawer-left .am-drawer-sidebar { box-shadow: 1PX 1PX 2px rgba(0, 0, 0, 0.15); } .am-drawer.am-drawer-left .am-drawer-draghandle { left: 0; } .am-drawer.am-drawer-right .am-drawer-sidebar { right: 0; transform: translateX(100%); } .am-drawer-open.am-drawer.am-drawer-right .am-drawer-sidebar { box-shadow: -1PX 1PX 2px rgba(0, 0, 0, 0.15); } .am-drawer.am-drawer-right .am-drawer-draghandle { right: 0; } .am-drawer.am-drawer-top .am-drawer-sidebar { top: 0; transform: translateY(-100%); } .am-drawer-open.am-drawer.am-drawer-top .am-drawer-sidebar { box-shadow: 1PX 1PX 2px rgba(0, 0, 0, 0.15); } .am-drawer.am-drawer-top .am-drawer-draghandle { top: 0; } .am-drawer.am-drawer-bottom .am-drawer-sidebar { bottom: 0; transform: translateY(100%); } .am-drawer-open.am-drawer.am-drawer-bottom .am-drawer-sidebar { box-shadow: 1PX -1PX 2px rgba(0, 0, 0, 0.15); } .am-drawer.am-drawer-bottom .am-drawer-draghandle { bottom: 0; } .am-list-header { padding: 15px 15px 9px 15px; font-size: 14px; color: #888; width: 100%; box-sizing: border-box; } .am-list-footer { padding: 9px 15px 15px 15px; font-size: 14px; color: #888; } .am-list-body { position: relative; background-color: #fff; border-top: 1PX solid #ddd; border-bottom: 1PX solid #ddd; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-list-body { border-top: none; } html:not([data-scale]) .am-list-body::before { content: ""; position: absolute; background-color: #ddd; display: block; z-index: 1; top: 0; right: auto; bottom: auto; left: 0; width: 100%; height: 1PX; transform-origin: 50% 50%; transform: scaleY(0.5); } } @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 2dppx) and (min-resolution: 3dppx) { html:not([data-scale]) .am-list-body::before { transform: scaleY(0.33); } } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-list-body { border-bottom: none; } html:not([data-scale]) .am-list-body::after { content: ""; position: absolute; background-color: #ddd; display: block; z-index: 1; top: auto; right: auto; bottom: 0; left: 0; width: 100%; height: 1PX; transform-origin: 50% 100%; transform: scaleY(0.5); } } @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 2dppx) and (min-resolution: 3dppx) { html:not([data-scale]) .am-list-body::after { transform: scaleY(0.33); } } .am-list-body div:not(:last-child) .am-list-line { border-bottom: 1PX solid #ddd; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-list-body div:not(:last-child) .am-list-line { border-bottom: none; } html:not([data-scale]) .am-list-body div:not(:last-child) .am-list-line::after { content: ""; position: absolute; background-color: #ddd; display: block; z-index: 1; top: auto; right: auto; bottom: 0; left: 0; width: 100%; height: 1PX; transform-origin: 50% 100%; transform: scaleY(0.5); } } @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 2dppx) and (min-resolution: 3dppx) { html:not([data-scale]) .am-list-body div:not(:last-child) .am-list-line::after { transform: scaleY(0.33); } } .am-list-item { position: relative; display: flex; padding-left: 15px; min-height: 44px; background-color: #fff; vertical-align: middle; overflow: hidden; transition: background-color 200ms; align-items: center; /* list左图片显示*/ } .am-list-item .am-list-ripple { position: absolute; background: transparent; display: inline-block; overflow: hidden; will-change: box-shadow, transform; transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s cubic-bezier(0.4, 0, 0.2, 1); outline: none; cursor: pointer; border-radius: 100%; transform: scale(0); } .am-list-item .am-list-ripple.am-list-ripple-animate { background-color: hsla(0, 0%, 62%, 0.2); animation: ripple 1s linear; } .am-list-item.am-list-item-top .am-list-line { align-items: flex-start; } .am-list-item.am-list-item-top .am-list-line .am-list-arrow { margin-top: 2px; } .am-list-item.am-list-item-middle .am-list-line { align-items: center; } .am-list-item.am-list-item-bottom .am-list-line { align-items: flex-end; } .am-list-item.am-list-item-error .am-list-line .am-list-extra { color: #f50; } .am-list-item.am-list-item-error .am-list-line .am-list-extra .am-list-brief { color: #f50; } .am-list-item.am-list-item-active { background-color: #ddd; } .am-list-item.am-list-item-disabled .am-list-line .am-list-content, .am-list-item.am-list-item-disabled .am-list-line .am-list-extra { color: #bbb; } .am-list-item img { width: 22px; height: 22px; vertical-align: middle; } .am-list-item .am-list-thumb:first-child { margin-right: 15px; } .am-list-item .am-list-thumb:last-child { margin-left: 8px; } .am-list-item .am-list-line { position: relative; display: flex; flex: 1; align-self: stretch; padding-right: 15px; overflow: hidden; /* list左侧主内容*/ /* list右补充内容*/ /* 辅助性文字*/ /* list右侧箭头*/ } .am-list-item .am-list-line .am-list-content { flex: 1; color: #000; font-size: 17px; line-height: 1.5; text-align: left; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 7px; padding-bottom: 7px; } .am-list-item .am-list-line .am-list-extra { flex-basis: 36%; color: #888; font-size: 16px; line-height: 1.5; text-align: right; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 7px; padding-bottom: 7px; } .am-list-item .am-list-line .am-list-title { width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .am-list-item .am-list-line .am-list-brief { color: #888; font-size: 15px; line-height: 1.5; margin-top: 6px; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .am-list-item .am-list-line .am-list-arrow { display: block; width: 15px; height: 15px; margin-left: 8px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2216%22%20height%3D%2226%22%20viewBox%3D%220%200%2016%2026%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%3Cg%20id%3D%22UI-KIT_%E5%9F%BA%E7%A1%80%E5%85%83%E4%BB%B6%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20id%3D%229.9%E5%9F%BA%E7%A1%80%E5%85%83%E4%BB%B6%22%20transform%3D%22translate(-5809.000000%2C%20-8482.000000)%22%20fill%3D%22%23C7C7CC%22%3E%3Cpolygon%20id%3D%22Disclosure-Indicator%22%20points%3D%225811%208482%205809%208484%205820.5%208495%205809%208506%205811%208508%205825%208495%22%3E%3C%2Fpolygon%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; visibility: hidden; } .am-list-item .am-list-line .am-list-arrow-horizontal { visibility: visible; } .am-list-item .am-list-line .am-list-arrow-vertical { visibility: visible; transform: rotate(90deg); } .am-list-item .am-list-line .am-list-arrow-vertical-up { visibility: visible; transform: rotate(270deg); } .am-list-item .am-list-line-multiple { padding: 12.5px 15px 12.5px 0; } .am-list-item .am-list-line-multiple .am-list-content { padding-top: 0; padding-bottom: 0; } .am-list-item .am-list-line-multiple .am-list-extra { padding-top: 0; padding-bottom: 0; } .am-list-item .am-list-line-wrap .am-list-content { white-space: normal; } .am-list-item .am-list-line-wrap .am-list-extra { white-space: normal; } .am-list-item select { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; font-size: 17px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; } @keyframes ripple { 100% { opacity: 0; transform: scale(2.5); } } .am-list .am-list-item.am-textarea-item { display: flex; align-items: flex-start; box-sizing: border-box; min-height: 44px; padding-left: 15px; padding-right: 15px; border-bottom: 1PX solid #ddd; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-list .am-list-item.am-textarea-item { border-bottom: none; } html:not([data-scale]) .am-list .am-list-item.am-textarea-item::after { content: ""; position: absolute; background-color: #ddd; display: block; z-index: 1; top: auto; right: auto; bottom: 0; left: 0; width: 100%; height: 1PX; transform-origin: 50% 100%; transform: scaleY(0.5); } } @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 2dppx) and (min-resolution: 3dppx) { html:not([data-scale]) .am-list .am-list-item.am-textarea-item::after { transform: scaleY(0.33); } } .am-list .am-list-item.am-textarea-item.am-textarea-item-single-line { align-items: center; } .am-list .am-list-item.am-textarea-item.am-textarea-item-single-line .am-textarea-label { align-self: center; } .am-list .am-list-item.am-textarea-item.am-textarea-item-single-line .am-textarea-control { padding-top: 0; padding-bottom: 0; } .am-list .am-list-item.am-textarea-item.am-textarea-item-single-line .am-textarea-control textarea { line-height: 25.5px; } .am-list .am-list-item.am-textarea-item.am-textarea-item-single-line .am-textarea-clear { margin-top: 0; } .am-list .am-list-item.am-textarea-item.am-textarea-item-single-line.am-textarea-error .am-textarea-error-extra { margin-top: 0; } .am-textarea-label { align-self: flex-start; color: #000; text-align: left; min-height: 44px; font-size: 17px; line-height: 44px; margin-left: 0; margin-right: 5px; white-space: nowrap; overflow: hidden; } .am-textarea-label.am-textarea-label-2 { width: 34px; } .am-textarea-label.am-textarea-label-3 { width: 51px; } .am-textarea-label.am-textarea-label-4 { width: 68px; } .am-textarea-label.am-textarea-label-5 { width: 85px; } .am-textarea-label.am-textarea-label-6 { width: 102px; } .am-textarea-label.am-textarea-label-7 { width: 119px; } .am-textarea-control { flex: 1; padding-top: 10px; padding-bottom: 9px; } .am-textarea-control textarea { color: #000; font-size: 17px; line-height: 25.5px; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; padding: 0; border: 0; background-color: transparent; overflow: visible; display: block; resize: none; word-break: break-word; word-wrap: break-word; } .am-textarea-control textarea::-moz-placeholder { color: #bbb; } .am-textarea-control textarea::placeholder { color: #bbb; } .am-textarea-control textarea:disabled { color: #bbb; background-color: #fff; } .am-textarea-clear { display: none; width: 21px; height: 21px; margin-top: 12px; border-radius: 50%; overflow: hidden; font-style: normal; color: #fff; background-color: #ccc; background-repeat: no-repeat; background-size: 21px auto; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D'%23fff'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z'%2F%3E%3Cpath%20d%3D'M0%200h24v24H0z'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E"); } .am-textarea-clear-active { background-color: #108ee9; } .am-textarea-focus .am-textarea-clear { display: block; } .am-textarea-has-count { padding-bottom: 14px; } .am-textarea-count { position: absolute; bottom: 6px; right: 5px; color: #bbb; font-size: 14px; } .am-textarea-count span { color: #000; } .am-textarea-error .am-textarea-control textarea { color: #f50; } .am-textarea-error .am-textarea-error-extra { margin-top: 12px; width: 21px; height: 21px; margin-left: 8px; background-size: 21px 21px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D'18'%20height%3D'18'%20viewBox%3D'0%200%2018%2018'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cg%20stroke%3D'none'%20stroke-width%3D'1'%20fill%3D'none'%20fill-rule%3D'evenodd'%3E%3Cg%20transform%3D'translate(-300.000000%2C%20-1207.000000)'%20fill%3D'%23FF5500'%3E%3Cg%20id%3D'exclamation-circle-o'%20transform%3D'translate(300.000000%2C%201207.000000)'%3E%3Cpath%20d%3D'M9%2C16.734375%20C10.0441406%2C16.734375%2011.0566406%2C16.5304688%2012.009375%2C16.1279297%20C12.9304688%2C15.7376953%2013.7566406%2C15.1804687%2014.4685547%2C14.4703125%20C15.1787109%2C13.7601563%2015.7376953%2C12.9322266%2016.1261719%2C12.0111328%20C16.5304688%2C11.0566406%2016.734375%2C10.0441406%2016.734375%2C9%20C16.734375%2C7.95585938%2016.5304688%2C6.94335938%2016.1279297%2C5.990625%20C15.7376953%2C5.06953125%2015.1804687%2C4.24335938%2014.4703125%2C3.53144531%20C13.7601563%2C2.82128906%2012.9322266%2C2.26230469%2012.0111328%2C1.87382813%20C11.0566406%2C1.46953125%2010.0441406%2C1.265625%209%2C1.265625%20C7.95585938%2C1.265625%206.94335938%2C1.46953125%205.990625%2C1.87207031%20C5.06953125%2C2.26230469%204.24335938%2C2.81953125%203.53144531%2C3.5296875%20C2.82128906%2C4.23984375%202.26230469%2C5.06777344%201.87382813%2C5.98886719%20C1.46953125%2C6.94335938%201.265625%2C7.95585938%201.265625%2C9%20C1.265625%2C10.0441406%201.46953125%2C11.0566406%201.87207031%2C12.009375%20C2.26230469%2C12.9304688%202.81953125%2C13.7566406%203.5296875%2C14.4685547%20C4.23984375%2C15.1787109%205.06777344%2C15.7376953%205.98886719%2C16.1261719%20C6.94335938%2C16.5304688%207.95585938%2C16.734375%209%2C16.734375%20L9%2C16.734375%20Z%20M9%2C18%20C4.02890625%2C18%200%2C13.9710937%200%2C9%20C0%2C4.02890625%204.02890625%2C0%209%2C0%20C13.9710937%2C0%2018%2C4.02890625%2018%2C9%20C18%2C13.9710937%2013.9710937%2C18%209%2C18%20L9%2C18%20L9%2C18%20Z%20M9%2C6.75%20C8.61152344%2C6.75%208.296875%2C7.06464844%208.296875%2C7.453125%20L8.296875%2C13.9394531%20C8.296875%2C14.3279297%208.61152344%2C14.6425781%209%2C14.6425781%20C9.38847656%2C14.6425781%209.703125%2C14.3279297%209.703125%2C13.9394531%20L9.703125%2C7.453125%20C9.703125%2C7.06464844%209.38847656%2C6.75%209%2C6.75%20L9%2C6.75%20Z%20M8.20898438%2C4.83398438%20C8.20898438%2C5.27085024%208.56313413%2C5.625%209%2C5.625%20C9.43686587%2C5.625%209.79101562%2C5.27085024%209.79101562%2C4.83398438%20C9.79101562%2C4.39711851%209.43686587%2C4.04296875%209%2C4.04296875%20C8.56313413%2C4.04296875%208.20898438%2C4.39711851%208.20898438%2C4.83398438%20L8.20898438%2C4.83398438%20Z'%20id%3D'Shape'%20transform%3D'translate(9.000000%2C%209.000000)%20scale(1%2C%20-1)%20translate(-9.000000%2C%20-9.000000)%20'%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } .am-textarea-disabled .am-textarea-label { color: #bbb; } .am-list-body .am-list-item:last-child { border-bottom: 0; } .am-list-body .am-list-item:last-child:after { display: none !important; } .am-icon { fill: currentColor; background-size: cover; width: 22px; height: 22px; } .am-icon-xxs { width: 15px; height: 15px; } .am-icon-xs { width: 18px; height: 18px; } .am-icon-sm { width: 21px; height: 21px; } .am-icon-md { width: 22px; height: 22px; } .am-icon-lg { width: 36px; height: 36px; } .am-icon-loading { animation: cirle-anim 1s linear infinite; } @keyframes cirle-anim { 100% { transform: rotate(360deg); } } .am-toast { position: fixed; width: 100%; z-index: 1999; font-size: 14px; text-align: center; } .am-toast > span { max-width: 50%; } .am-toast.am-toast-mask { height: 100%; display: flex; justify-content: center; align-items: center; left: 0; top: 0; transform: translateZ(1px); } .am-toast.am-toast-nomask { position: fixed; max-width: 50%; width: auto; left: 50%; top: 50%; transform: translateZ(1px); } .am-toast.am-toast-nomask .am-toast-notice { transform: translateX(-50%) translateY(-50%); } .am-toast-notice-content .am-toast-text { min-width: 60px; border-radius: 3px; color: #fff; background-color: rgba(58, 58, 58, 0.9); line-height: 1.5; padding: 9px 15px; } .am-toast-notice-content .am-toast-text.am-toast-text-icon { border-radius: 5px; padding: 15px 15px; } .am-toast-notice-content .am-toast-text.am-toast-text-icon .am-toast-text-info { margin-top: 6px; } .am-pull-to-refresh-content { transform-origin: left top 0; } .am-pull-to-refresh-content-wrapper { overflow: hidden; } .am-pull-to-refresh-transition { transition: transform 0.3s; } .am-pull-to-refresh-indicator { color: grey; text-align: center; height: 25px; } .am-pull-to-refresh-down .am-pull-to-refresh-indicator { margin-top: -25px; } .am-pull-to-refresh-up .am-pull-to-refresh-indicator { margin-bottom: -25px; } .am-modal { position: relative; } .am-modal:not(.am-modal-transparent):not(.am-modal-popup) { width: 100%; height: 100%; } .am-modal-mask { position: fixed; top: 0; right: 0; left: 0; bottom: 0; height: 100%; z-index: 999; background-color: rgba(0, 0, 0, 0.4); } .am-modal-mask-hidden { display: none; } .am-modal-wrap { position: fixed; overflow: auto; top: 0; right: 0; bottom: 0; left: 0; height: 100%; z-index: 999; -webkit-overflow-scrolling: touch; outline: 0; display: flex; align-items: center; justify-content: center; transform: translateZ(1px); } .am-modal-wrap-popup { display: block; } .am-modal-transparent { width: 270px; } .am-modal-transparent .am-modal-content { border-radius: 7px; padding-top: 15px; } .am-modal-transparent .am-modal-content .am-modal-body { padding: 0 15px 15px; } .am-modal-popup { position: fixed; left: 0; width: 100%; } .am-modal-popup-slide-down { top: 0; } .am-modal-popup-slide-up { bottom: 0; } .am-modal-popup .am-modal-content { padding-bottom: env(safe-area-inset-bottom); } .am-modal-title { margin: 0; font-size: 18px; line-height: 1; color: #000; text-align: center; } .am-modal-header { padding: 6px 15px 15px; } .am-modal-content { position: relative; background-color: #fff; border: 0; background-clip: padding-box; text-align: center; height: 100%; overflow: hidden; } .am-modal-close { border: 0; padding: 0; background-color: transparent; outline: none; position: absolute; right: 15px; z-index: 999; height: 21px; width: 21px; } .am-modal-close-x { display: inline-block; width: 15px; height: 15px; background-repeat: no-repeat; background-size: cover; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D'30'%20height%3D'30'%20viewBox%3D'0%200%2030%2030'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cdefs%3E%3C%2Fdefs%3E%20%3Cg%20id%3D'ALL-ICON'%20stroke%3D'none'%20stroke-width%3D'1'%20fill%3D'none'%20fill-rule%3D'evenodd'%3E%20%3Cg%20id%3D'Rectangle-283-%2B-Rectangle-283'%20fill%3D'%23888888'%3E%20%3Crect%20id%3D'Rectangle-283'%20transform%3D'translate(14.849242%2C%2014.849242)%20rotate(-315.000000)%20translate(-14.849242%2C%20-14.849242)%20'%20x%3D'-5.1507576'%20y%3D'13.8492424'%20width%3D'40'%20height%3D'2'%3E%3C%2Frect%3E%20%3Crect%20id%3D'Rectangle-283'%20transform%3D'translate(14.849242%2C%2014.849242)%20scale(-1%2C%201)%20rotate(-315.000000)%20translate(-14.849242%2C%20-14.849242)%20'%20x%3D'-5.1507576'%20y%3D'13.8492424'%20width%3D'40'%20height%3D'2'%3E%3C%2Frect%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"); } .am-modal-body { font-size: 15px; color: #888; height: 100%; line-height: 1.5; overflow: auto; } .am-modal-button-group-h { position: relative; border-top: 1PX solid #ddd; display: flex; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-modal-button-group-h { border-top: none; } html:not([data-scale]) .am-modal-button-group-h::before { content: ""; position: absolute; background-color: #ddd; display: block; z-index: 1; top: 0; right: auto; bottom: auto; left: 0; width: 100%; height: 1PX; transform-origin: 50% 50%; transform: scaleY(0.5); } } @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 2dppx) and (min-resolution: 3dppx) { html:not([data-scale]) .am-modal-button-group-h::before { transform: scaleY(0.33); } } .am-modal-button-group-h .am-modal-button { -webkit-touch-callout: none; flex: 1; box-sizing: border-box; text-align: center; text-decoration: none; outline: none; color: #108ee9; font-size: 18px; height: 50px; line-height: 50px; display: block; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .am-modal-button-group-h .am-modal-button:first-child { color: #000; } .am-modal-button-group-h .am-modal-button:last-child { position: relative; border-left: 1PX solid #ddd; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-modal-button-group-h .am-modal-button:last-child { border-left: none; } html:not([data-scale]) .am-modal-button-group-h .am-modal-button:last-child::before { content: ""; position: absolute; background-color: #ddd; display: block; z-index: 1; top: 0; right: auto; bottom: auto; left: 0; width: 1PX; height: 100%; transform-origin: 100% 50%; transform: scaleX(0.5); } } @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 2dppx) and (min-resolution: 3dppx) { html:not([data-scale]) .am-modal-button-group-h .am-modal-button:last-child::before { transform: scaleX(0.33); } } .am-modal-button-group-v .am-modal-button { -webkit-touch-callout: none; position: relative; border-top: 1PX solid #ddd; box-sizing: border-box; text-align: center; text-decoration: none; outline: none; color: #108ee9; font-size: 18px; height: 50px; line-height: 50px; display: block; width: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-modal-button-group-v .am-modal-button { border-top: none; } html:not([data-scale]) .am-modal-button-group-v .am-modal-button::before { content: ""; position: absolute; background-color: #ddd; display: block; z-index: 1; top: 0; right: auto; bottom: auto; left: 0; width: 100%; height: 1PX; transform-origin: 50% 50%; transform: scaleY(0.5); } } @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 2dppx) and (min-resolution: 3dppx) { html:not([data-scale]) .am-modal-button-group-v .am-modal-button::before { transform: scaleY(0.33); } } .am-modal-button-active { background-color: #ddd; } .am-modal-input-container { margin-top: 9px; border: 1PX solid #ddd; border-radius: 3px; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-modal-input-container { position: relative; border: none; } html:not([data-scale]) .am-modal-input-container::before { content: ""; position: absolute; left: 0; top: 0; width: 200%; height: 200%; border: 1PX solid #ddd; border-radius: 6px; transform-origin: 0 0; transform: scale(0.5); box-sizing: border-box; pointer-events: none; } } .am-modal-input { height: 36px; line-height: 1; } .am-modal-input:nth-child(2) { position: relative; border-top: 1PX solid #ddd; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-modal-input:nth-child(2) { border-top: none; } html:not([data-scale]) .am-modal-input:nth-child(2)::before { content: ""; position: absolute; background-color: #ddd; display: block; z-index: 1; top: 0; right: auto; bottom: auto; left: 0; width: 100%; height: 1PX; transform-origin: 50% 50%; transform: scaleY(0.5); } } @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 2dppx) and (min-resolution: 3dppx) { html:not([data-scale]) .am-modal-input:nth-child(2)::before { transform: scaleY(0.33); } } .am-modal-input input { position: relative; border: 0; width: 98%; height: 34px; top: 1PX; box-sizing: border-box; margin: 0; } .am-modal-input input::-moz-placeholder { font-size: 14px; color: #ccc; padding-left: 8px; } .am-modal-input input::placeholder { font-size: 14px; color: #ccc; padding-left: 8px; } .am-modal.am-modal-transparent.am-modal-android .am-modal-content { border-radius: 0; } .am-modal.am-modal-transparent.am-modal-android .am-modal-content .am-modal-header { padding: 9px 24px 12px; } .am-modal.am-modal-transparent.am-modal-android .am-modal-content .am-modal-header .am-modal-title { text-align: left; font-size: 21px; color: #000; } .am-modal.am-modal-transparent.am-modal-android .am-modal-content .am-modal-body { color: #000; text-align: left; padding: 0 24px 15px; } .am-modal.am-modal-transparent.am-modal-android .am-modal-content .am-modal-body .am-modal-input-container { border: 0; border-bottom: 1PX solid #ddd; } .am-modal.am-modal-transparent.am-modal-android .am-modal-content .am-modal-body .am-modal-input-container:before { display: none !important; } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { html:not([data-scale]) .am-modal.am-modal-transparent.am-modal-android .am-modal-content .am-modal-body .am-modal-input-container { border-bottom: none; } html:not([data-scale]) .am-modal.am-modal-transparent.am-modal-android .am-modal-content .am-modal-body .am-modal-input-container::after { content: ""; position: absolute; background-color: #ddd; display: block; z-index: 1; top: auto; right: auto; bottom: 0; left: 0; width: 100%; height: 1PX; transform-origin: 50% 100%; transform: scaleY(0.5); } } @media (-webkit-min-device-pixel-ratio: 2) and (-webkit-min-device-pixel-ratio: 3), (min-resolution: 2dppx) and (min-resolution: 3dppx) { html:not([data-scale]) .am-modal.am-modal-transparent.am-modal-android .am-modal-content .am-modal-body .am-modal-input-container::after { transform: scaleY(0.33); } } .am-modal.am-modal-transparent.am-modal-android .am-modal-content .am-modal-body .am-modal-input-container .am-modal-input:first-child { border-top: 0; } .am-modal.am-modal-transparent.am-modal-android .am-modal-content .am-modal-body .am-modal-input-container .am-modal-input:first-child:before { display: none !important; } .am-modal.am-modal-transparent.am-modal-android .am-modal-content .am-modal-footer { padding-bottom: 12px; } .am-modal.am-modal-transparent.am-modal-android .am-modal-content .am-modal-footer .am-modal-button-group-h { overflow: hidden; border-top: 0; justify-content: flex-end; padding: 0 12px; } .am-modal.am-modal-transparent.am-modal-android .am-modal-content .am-modal-footer .am-modal-button-group-h:before { display: none !important; } .am-modal.am-modal-transparent.am-modal-android .am-modal-content .am-modal-footer .am-modal-button-group-h .am-modal-button { flex: initial; margin-left: 3px; padding: 0 15px; height: 48px; box-sizing: border-box; } .am-modal.am-modal-transparent.am-modal-android .am-modal-content .am-modal-footer .am-modal-button-group-h .am-modal-button:first-child { color: #777; } .am-modal.am-modal-transparent.am-modal-android .am-modal-content .am-modal-footer .am-modal-button-group-h .am-modal-button:last-child { border-left: 0; } .am-modal.am-modal-transparent.am-modal-android .am-modal-content .am-modal-footer .am-modal-button-group-h .am-modal-button:last-child:before { display: none !important; } .am-modal.am-modal-transparent.am-modal-android .am-modal-content .am-modal-footer .am-modal-button-group-v.am-modal-button-group-normal { display: flex; justify-content: flex-end; overflow: hidden; padding: 0 12px; } .am-modal.am-modal-transparent.am-modal-android .am-modal-content .am-modal-footer .am-modal-button-group-v.am-modal-button-group-normal .am-modal-button { border-top: 0; padding: 0 15px; margin-left: 3px; height: 48px; box-sizing: border-box; } .am-modal.am-modal-transparent.am-modal-android .am-modal-content .am-modal-footer .am-modal-button-group-v.am-modal-button-group-normal .am-modal-button:before { display: none !important; } .am-modal.am-modal-transparent.am-modal-android .am-modal-content .am-modal-footer .am-modal-button-group-operation .am-modal-button { text-align: start; padding-left: 15px; } .am-modal.am-modal-operation .am-modal-content { border-radius: 7px; height: auto; padding-top: 0; } .am-modal.am-modal-operation .am-modal-content .am-modal-body { padding: 0 !important; } .am-modal.am-modal-operation .am-modal-content .am-modal-button { color: #000; text-align: left; padding-left: 15px; } .am-modal-alert-content, .am-modal-propmt-content { zoom: 1; overflow: hidden; } .am-carousel { position: relative; } .am-carousel-wrap { font-size: 18px; color: #000; background: none; text-align: center; zoom: 1; width: 100%; } .am-carousel-wrap-dot { display: inline-block; zoom: 1; } .am-carousel-wrap-dot > span { display: block; width: 8px; height: 8px; margin: 0 3px; border-radius: 50%; background: #ccc; } .am-carousel-wrap-dot-active > span { background: #888; } :root { /**小字文案：协议文案、提示文案、动作按钮等 */ --ai-font-size-small: 12px; /**正常文字大小 消息内容、描述文案等 */ --ai-font-size-normal: 14px; /**标题文案：机器人介绍、突出显示字体等 */ --ai-font-size-big: 22px; } .index_message_item_container-2I0yF { width: 100%; display: flex; align-items: flex-start; margin-bottom: 16px; } .index_message_item_container-2I0yF .index_head-UnOiN { width: 36px; height: 36px; border-radius: 50%; } .index_message_item_container-2I0yF .index_wrap-fgcL7 { flex: 1; } .index_message_item_container-2I0yF .index_time-1bZb4 { margin: 0 20px; font-size: 12px; margin-bottom: 10px; color: #666; } .index_message_item_container-2I0yF .index_audio-2no2r { cursor: pointer; width: -moz-fit-content; width: fit-content; padding: 5px 8px 5px 5px; margin-top: 10px; display: flex; align-items: center; border: 1px solid #efefef; border-radius: 15px; } .index_message_item_container-2I0yF .index_audio-2no2r .index_audio_icon-3EY57 { width: 14px; height: 14px; margin-right: 3px; } .index_message_item_container-2I0yF .index_message_item_text_container-1T2VP { max-width: 100%; background-color: #fff; padding: 12px 16px 12px 12px; border-radius: 8px; position: relative; width: -moz-fit-content; width: fit-content; } .index_message_item_container-2I0yF .index_message_item_text_container-1T2VP .index_text_rich-3YLa7 { /* 这里是针对移动设备的css样式设置 */ } .index_message_item_container-2I0yF .index_message_item_text_container-1T2VP .index_text_rich-3YLa7 p { margin: 0; display: inline-block; } .index_message_item_container-2I0yF .index_message_item_text_container-1T2VP .index_text_rich-3YLa7 img { width: 100%; height: auto; } .index_message_item_container-2I0yF .index_message_item_text_container-1T2VP .index_text_rich-3YLa7 video { width: 100%; } .index_message_item_container-2I0yF .index_message_item_text_container-1T2VP .index_text-1FDc1 { font-size: var(--ai-font-size-normal); font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #050505; line-height: 20px; word-wrap: break-word; white-space: pre-wrap; } .index_message_item_container-2I0yF .index_message_item_text_container-1T2VP .index_self_point-12Dkm { position: absolute; right: 0; top: 12px; width: 0; height: 0; border: 4px solid transparent; transform: translate3d(100%, 0, 0); border-left-color: #FFF8F8; } .index_message_item_container-2I0yF .index_message_item_text_container-1T2VP .index_not_self_point-3JRPB { position: absolute; left: 0; top: 12px; width: 0; height: 0; border: 4px solid transparent; transform: translate3d(-100%, 0, 0); border-right-color: #fff; } .index_self-BGN4w { justify-content: flex-end; } .index_self-BGN4w .index_wrap-fgcL7 { display: flex; justify-content: center; align-items: flex-end; flex-direction: column; } .index_self-BGN4w .index_message_item_text_container-1T2VP { margin-right: 10px; background: #FFF8F8; } .index_not_self-I8lMc .index_wrap-fgcL7 { display: flex; justify-content: center; flex-direction: column; } .index_not_self-I8lMc .index_message_item_text_container-1T2VP { margin-left: 10px; } .index_question_list_wrap-2iGJM { margin-top: 16px; } .index_question_list_wrap-2iGJM .ai_chat_question_list_wrap { padding: 0; } .index_question_list_wrap-2iGJM .ai_chat_question_list_container { width: auto; margin-bottom: 0; padding: 0; } .index_question_list_wrap-2iGJM .ai_chat_question_list_container .ai_chat_question_list_list { margin-bottom: 0; padding: 0; } .index_question_list_wrap-2iGJM .ai_chat_question_list_container .ai_chat_question_list_list .ai_chat_question_list_item { margin-bottom: 0; padding-left: 0; padding: 0; min-width: 200px; } .index_question_list_wrap-2iGJM .index_title-MTPXI { font-size: var(--ai-font-size-small); font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #050505; margin-bottom: 5px; } .index_question_list_wrap-2iGJM .index_question_item-13lQE { display: flex; align-items: center; height: 34px; border-bottom: 1px solid #E5E5E5; font-size: var(--ai-font-size-small); font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #050505; } .index_question_list_wrap-2iGJM .index_question_item-13lQE .index_question_img-1VDjo { margin-right: 4px; width: 14px; height: 14px; } .index_question_list_wrap-2iGJM .index_question_item-13lQE:last-child { border: 0; } .index_actions-2M4rh { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; max-width: calc(100% + 24px); } .index_actions-2M4rh .index_message_item_action_wrap-3e9vs { display: flex; } .index_actions-2M4rh .index_message_item_action_item-1VIbf { margin-top: 12px; height: 24px; padding: 0; display: flex; align-items: center; cursor: pointer; color: #666; background-color: #fff; border-radius: 13px; margin-right: 2px; font-size: var(--ai-font-size-small); } .index_actions-2M4rh .index_message_item_action_item-1VIbf .index_action_img-2bcLM { width: 22px; height: 22px; } .index_actions-2M4rh .index_message_item_action_item-1VIbf:last-child { margin-right: 0; } .index_message_item_container_system-oaLwY { width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .index_message_item_container_system-oaLwY .index_message_item_item_system-2wvf1 { font-size: var(--ai-font-size-small); height: 28px; display: flex; align-items: center; padding: 0 16px; background: #f9f9f9; border-radius: 16px; color: #666; } .index_message_item_tip-3JMpX { margin-top: 10px; font-size: var(--ai-font-size-small); margin-left: 10px; background-color: #e5e5e5; width: -moz-fit-content; width: fit-content; padding: 5px 10px; border-radius: 10px; } .index_guidance_container-BfKaq { position: relative; } .index_guidance_container-BfKaq .index_guidance_img-3_eST { position: absolute; width: 133px; height: 109px; top: -60px; left: -35px; z-index: 101; } .index_guidance_container-BfKaq .index_guidance_text-3yDZ8 { position: absolute; top: -100px; left: -65px; width: 260px; z-index: 101; transform: translateY(-50%); font-size: 21px; font-family: PingFangSC, PingFang SC; font-weight: 400; color: #FFFFFF; } .index_guidance_container-BfKaq .index_guidance_btn-kBUxA { width: 72px; z-index: 101; height: 26px; display: flex; align-items: center; justify-content: center; position: absolute; left: 50px; top: -78px; border-radius: 13px; border: 1px solid rgba(255, 255, 255, 0.5); color: #FFFFFF; font-size: 14px; font-family: OPPOSans, OPPOSans; font-weight: normal; } .index_guidance_mask-1MSS5 { position: fixed; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.65); left: 0; top: 0; z-index: 99; transform: translate3d(0, 0, 0); } .index_guidance_mask-1MSS5 .index_guidance_mask_btn-1420o { height: 35px; display: flex; align-items: center; position: absolute; padding: 0 30px; left: 50%; top: 200px; transform: translateX(-50%); border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.5); font-size: 16px; font-family: OPPOSans, OPPOSans; font-weight: normal; color: #FFFFFF; } .index_new-session-kzxzX { cursor: pointer; -moz-column-gap: 5px; column-gap: 5px; border-radius: 16.5px !important; padding: 8px 11px !important; } .index_new-session-kzxzX img { width: 14px; height: 14px; } .index_new-session-kzxzX:active { color: #333; } .index_new-session-pc-1N-HH:hover { color: #333; } .index_bg-3n0o1 { display: flex; align-items: center; background: #ffffff; padding: 8px; } .index_bg-3n0o1:active { box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16); } .index_bg-pc-J3TrZ:hover { box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16); } .index_copy-1Os6N img { width: 16px; height: 16px; } .index_copy-1Os6N:active img { content: url(https://gj-prod-1256038144.cos.ap-beijing.myqcloud.com/app-system/copy-hover.png); } .index_copy-pc-3hck0 { position: relative; } .index_copy-pc-3hck0:hover img { content: url(https://gj-prod-1256038144.cos.ap-beijing.myqcloud.com/app-system/copy-hover.png); } .index_copy-pc-3hck0:hover::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 30px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid rgba(0, 0, 0, 0.75); } .index_copy-pc-3hck0:hover::after { content: attr(data-tip); position: absolute; left: 50%; bottom: 35px; width: 38px; font-size: 12px; line-height: 18px; text-align: center; transform: translateX(-50%); background: rgba(0, 0, 0, 0.75); color: #fff; padding: 4px; border-radius: 8px; transition: opacity 0.3s ease-in-out; } .index_re-ask-CpcqA img { width: 16px; height: 16px; } .index_re-ask-CpcqA:active { color: #333; } .index_re-ask-pc-1lcNH { position: relative; } .index_re-ask-pc-1lcNH:hover img { content: url(https://gjscrm-1256038144.cos.ap-beijing.myqcloud.com/common/1711683131524/2ac46fb601df4272b7530790ae7f8a99.png); } .index_re-ask-pc-1lcNH:hover::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 30px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid rgba(0, 0, 0, 0.75); } .index_re-ask-pc-1lcNH:hover::after { content: attr(data-tip); position: absolute; left: 50%; bottom: 35px; width: 38px; font-size: 12px; line-height: 18px; text-align: center; transform: translateX(-50%); background: rgba(0, 0, 0, 0.75); color: #fff; padding: 4px; border-radius: 8px; transition: opacity 0.3s ease-in-out; } .index_helpful-3jaw1 img { width: 16px; height: 16px; } .index_helpful-3jaw1:active img { content: url(https://gj-prod-1256038144.cos.ap-beijing.myqcloud.com/app-system/helpful-hover.png); } .index_helpful-pc-2hnHb { position: relative; } .index_helpful-pc-2hnHb:hover img { content: url(https://gj-prod-1256038144.cos.ap-beijing.myqcloud.com/app-system/helpful-hover.png); } .index_helpful-pc-2hnHb:hover::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 30px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid rgba(0, 0, 0, 0.75); } .index_helpful-pc-2hnHb:hover::after { content: attr(data-tip); position: absolute; left: 50%; bottom: 35px; width: 38px; font-size: 12px; line-height: 18px; text-align: center; transform: translateX(-50%); background: rgba(0, 0, 0, 0.75); color: #fff; padding: 4px; border-radius: 8px; transition: opacity 0.3s ease-in-out; } .index_helpless-3LbG5 img { width: 16px; height: 16px; } .index_helpless-3LbG5:active img { content: url(https://gjscrm-1256038144.cos.ap-beijing.myqcloud.com/common/1706601652282/3e5894f6e9b04ec2809fee36d8ac6391.png); } .index_helpless-pc-wSPYt { position: relative; } .index_helpless-pc-wSPYt:hover img { content: url(https://gjscrm-1256038144.cos.ap-beijing.myqcloud.com/common/1706601652282/3e5894f6e9b04ec2809fee36d8ac6391.png); } .index_helpless-pc-wSPYt:hover::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 30px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid rgba(0, 0, 0, 0.75); } .index_helpless-pc-wSPYt:hover::after { content: attr(data-tip); position: absolute; left: 50%; bottom: 35px; width: 38px; font-size: 12px; line-height: 18px; text-align: center; transform: translateX(-50%); background: rgba(0, 0, 0, 0.75); color: #fff; padding: 4px; border-radius: 8px; transition: opacity 0.3s ease-in-out; } .index_audio-play-20B0J img { width: 16px; height: 16px; } .index_audio-play-20B0J:active img { content: url(https://gj-prod-1256038144.cos.ap-beijing.myqcloud.com/app-system/audio-hover.png); } .index_audio-play-pc-19GYP { position: relative; } .index_audio-play-pc-19GYP:hover::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 30px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid rgba(0, 0, 0, 0.75); } .index_audio-play-pc-19GYP:hover::after { content: attr(data-tip); position: absolute; left: 50%; bottom: 35px; width: 38px; font-size: 12px; line-height: 18px; text-align: center; transform: translateX(-50%); background: rgba(0, 0, 0, 0.75); color: #fff; padding: 4px; border-radius: 8px; transition: opacity 0.3s ease-in-out; } .index_audio-play-normal-1mwpi:hover img { content: url(https://gj-prod-1256038144.cos.ap-beijing.myqcloud.com/app-system/audio-hover.png); } .index_audio-play-normal-1mwpi:hover:hover img { content: url(https://gj-prod-1256038144.cos.ap-beijing.myqcloud.com/app-system/audio-hover.png); } .index_answer-status-hfPm- { margin: 5px 0 0 10px; height: 18px; font-size: 12px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; text-align: left; color: #666666; line-height: 18px; } .index_answer-status__img-T-7_R { width: 13px; } .index_question_list_wrap-3chkY { width: 100%; padding: 0 16px; box-sizing: border-box; } .index_question_list_container-2nfhp { width: 100%; padding: 8px 16px 0; box-sizing: border-box; background-color: #fff; border-radius: 16px; margin: 0 auto; margin-bottom: 16px; } .index_question_list_container_top-1FrpG { display: flex; } .index_question_list_container_bottom-1EoOA { font-size: 12px; font-family: PingFangSC, PingFang SC; font-weight: 400; color: #999999; padding: 12px 0; border-top: 1px solid #e5e5e5; text-align: center; } .index_question_list_container-2nfhp .index_question_list_label-2CmzM { margin-right: 20px; text-align: center; display: flex; flex-direction: column; justify-content: center; } .index_question_list_container-2nfhp .index_question_list_label_text-2qiaL { padding-top: 27px; text-align: center; width: 3em; font-size: 20px; font-family: PingFangSC, PingFang SC; font-weight: 500; color: #FE6058; letter-spacing: 2px; background: linear-gradient(100deg, #FF555E 0%, #FE6A53 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 16px; } .index_question_list_container-2nfhp .index_question_list_label_img-2Pyif { width: 50px; height: 51px; padding-bottom: 20px; } .index_question_list_container-2nfhp .index_question_list_list-3HWn4 { flex: 1; display: flex; flex-direction: column; justify-content: center; } .index_question_list_container-2nfhp .index_question_list_item-1r_J8 { display: flex; min-height: 40px; justify-content: space-between; background-color: #fff; border-bottom: 1px solid #e5e5e5; } .index_question_list_container-2nfhp .index_question_list_item_icon-2aO2h { width: 16px; height: 16px; margin-right: 8px; padding-top: 14px; } .index_question_list_container-2nfhp .index_question_list_item_middle-lw9sB { flex: 1; width: 100%; } .index_question_list_container-2nfhp .index_question_list_item_title-1muqT { width: 100%; line-height: 19px; padding: 12px 0; font-size: 13px; font-family: PingFangSC, PingFang SC; font-weight: 400; color: #050505; } .index_question_list_container-2nfhp .index_question_list_item_desc-z_Dwa { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-family: PingFangSC, PingFang SC; font-weight: 400; color: #666666; } .index_question_list_container-2nfhp .index_question_list_item_arrows-dXfK4 { width: 15px; height: 15px; padding-top: 14px; } .index_question_list_container-2nfhp .index_question_list_item-1r_J8:last-child { border: 0; margin-bottom: 8px; } .am-activity-indicator { display: flex; align-items: center; z-index: 99; } .am-activity-indicator-spinner { display: inline-block; width: 20px; height: 20px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-2.125%20-1.875%2064%2064%22%3E%3Cpath%20fill%3D%22%23CCC%22%20d%3D%22M29.875-1.875c-17.673%200-32%2014.327-32%2032s14.327%2032%2032%2032%2032-14.327%2032-32-14.327-32-32-32zm0%2060.7c-15.85%200-28.7-12.85-28.7-28.7s12.85-28.7%2028.7-28.7%2028.7%2012.85%2028.7%2028.7-12.85%2028.7-28.7%2028.7z%22%2F%3E%3Cpath%20fill%3D%22%23108ee9%22%20d%3D%22M61.858%2030.34c.003-.102.008-.203.008-.305%200-11.43-5.996-21.452-15.01-27.113l-.013.026c-.24-.137-.515-.22-.81-.22-.912%200-1.65.738-1.65%201.65%200%20.654.384%201.215.937%201.482%207.963%205.1%2013.247%2014.017%2013.247%2024.176%200%20.147-.01.293-.01.44h.022c0%20.01-.004.02-.004.03%200%20.91.74%201.65%201.65%201.65s1.65-.74%201.65-1.65c0-.06-.012-.112-.018-.167z%22%2F%3E%3C%2Fsvg%3E"); background-position: 50%; background-size: 100%; background-repeat: no-repeat; animation: spinner-anime 1s linear infinite; } .am-activity-indicator-tip { font-size: 14px; margin-left: 8px; color: #000; opacity: 0.4; } .am-activity-indicator.am-activity-indicator-toast { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; z-index: 1999; } .am-activity-indicator.am-activity-indicator-toast .am-activity-indicator-spinner { margin: 0; } .am-activity-indicator.am-activity-indicator-toast .am-activity-indicator-toast { display: inline-block; position: relative; top: 4px; } .am-activity-indicator-content { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 15px 15px; border-radius: 7px; background-clip: padding-box; color: #fff; background-color: rgba(58, 58, 58, 0.9); font-size: 15px; line-height: 20px; } .am-activity-indicator-spinner-lg { width: 32px; height: 32px; } @keyframes spinner-anime { 100% { transform: rotate(360deg); } } .index_recommend-item-BA_kH { width: -moz-fit-content; width: fit-content; background: #fff; margin-bottom: 9px; padding: 12px 16px 12px 12px; border-radius: 8px; } .index_recommend-list-3rkom { margin-top: 12px; margin-left: 10px; } .index_recommed-loading-3hXvI { width: 16px; height: 16px; } html, body { margin: 0; } .ai_chat_page_wrapper { max-width: 720px !important; min-width: 100% !important; } .ai_chat_page_wrapper_pc .ai_chat_dragable_container { left: 20vw !important; } .ai_chat_page_wrapper_pc .ai_chat_message_item_text_container { max-width: 500px !important; } .ai_chat_send_btn { width: 68px !important; height: 32px !important; background: linear-gradient(135deg, #ff555e, #fe6a53); border-radius: 4px; margin-bottom: 7.5px; position: relative; } .ai_chat_send_btn img { display: none; } .ai_chat_send_btn::before { position: absolute; content: "发送"; color: #ffffff; top: 8px; left: 20px; } .ai_chat_greeting_head { top: 2px; left: 2px; } .ai_chat_message_item { padding: 0 12px; box-sizing: border-box; } .ai_chat_message_item_text_robot, .ai_chat_message_item_text_user { color: #333333 !important; } .ai_chat_message_container { padding: 0 !important; -ms-overflow-style: none; /* Internet Explorer和Edge */ scrollbar-width: none; /* Firefox 64+ */ } .ai_chat_message_container::-webkit-scrollbar { display: none; } .ai_chat_agreement { height: 55px; left: -12px; z-index: 3; } .ai_chat_agreement, .ai_chat_conversation_btn, .ai_chat_sendmessage_bar { background-color: #fff !important; } .ai_chat_greeting_container { padding: 0 12px 16px; } .ai_chat_guidance_card_container { padding: 0 12px; position: relative; z-index: 1; } .ai_chat_agreement { box-shadow: 0 -4px 5px 0 #f1f1f1 inset; } .ai_chat_sendmessage_bar { padding-left: 12px !important; padding-right: 12px !important; } .ai_chat_greeting_description { font-size: 12px !important; line-height: 18px !important; } .ai_chat_input { border: none !important; background: #fbfbfb !important; border-radius: 12px !important; box-shadow: 0px 0px 4px 0px rgba(69, 106, 190, 0.28) inset; font-size: 14px; height: 40px; padding: 0 14px !important; caret-color: #FE6057; } .ai_chat_input textarea { font-size: 14px !important; color: #333333 !important; } .ai_chat_input textarea::-webkit-input-placeholder { font-size: 14px !important; } .ai_chat_newsession_btn_container { background: none !important; border: none !important; border-radius: 16.5px !important; box-shadow: none; z-index: 4; } .ai_chat_feed_back_modal_header { font-size: 18px; font-weight: 500; text-align: center; color: #333333; padding: 0 27px 16px !important; } .ai_chat_feed_back_modal_subtitle { font-size: 14px !important; text-align: left !important; color: #666666 !important; } .ai_chat_feed_back_modal_body .ai_chat_feed_back_modal_textarea { margin: 8px 0 0 0 !important; height: 100px; background: #f9f9f9; border: 0.5px solid #cccccc; border-radius: 4px; } .ai_chat_feed_back_modal_body .ai_chat_feed_back_modal_textarea textarea::-webkit-input-placeholder { font-size: 14px !important; } .ai_chat_feed_back_modal_button_cancel, .ai_chat_feed_back_modal_button_submit { font-size: 16px !important; cursor: pointer; } .ai_chat_message_item_action_item { padding: 0 !important; margin-right: 2px !important; } .ai_chat_feed_back_modal_footer { margin-top: 20px; } .ai_chat_feed_back_modal_footer .ai_chat_feed_back_modal_button_submit { color: #FE6057 !important; } :root { /**小字文案：协议文案、提示文案、动作按钮等 */ --ai-font-size-small: 12px; /**正常文字大小 消息内容、描述文案等 */ --ai-font-size-normal: 14px; /**标题文案：机器人介绍、突出显示字体等 */ --ai-font-size-big: 22px; } .index_aichat_container-2Jt-Z { width: 100vw; height: 100vh; display: flex; flex-direction: column; background: #F5F5F5; font-size: var(--ai-font-size-normal); } .index_aichat_container-2Jt-Z .index_title_container-3sNI2 { width: 100%; height: 43px; display: flex; align-items: center; background: linear-gradient(142deg, #FF555E 0%, #FE6A53 100%); } .index_aichat_container-2Jt-Z .index_title_container-3sNI2 .index_title_bg-3iNrH { height: 43px; width: 71px; padding: 0 6px 0 16px; } .index_aichat_container-2Jt-Z .index_title_container-3sNI2 .index_title_text-1Zw3Z { font-size: var(--ai-font-size-normal); font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #FFFFFF; width: 48%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .index_aichat_container-2Jt-Z .index_conversation_btn-3_VHr { text-align: center; padding: 10px; } .index_aichat_container-2Jt-Z .index_show_more_btn_border-SuJOK { position: absolute; right: 20px; height: 21px; opacity: 0.7; padding: 0 10px; color: #fff; width: -moz-fit-content; width: fit-content; border: 1px solid #fff; border-radius: 14px; display: flex; align-items: center; justify-content: center; } .index_aichat_container-2Jt-Z .index_message_container-3U8LB { flex: 1; padding: 10px 10px 0; overflow: auto; } .index_aichat_container-2Jt-Z .index_message_container-3U8LB .am-pull-to-refresh::-webkit-scrollbar { display: none; } .index_aichat_container-2Jt-Z .index_message_container-3U8LB .am-pull-to-refresh-content-wrapper { min-height: 100%; } .index_aichat_container-2Jt-Z .index_message_container-3U8LB .am-pull-to-refresh-indicator { position: relative; z-index: 10; } .index_aichat_container-2Jt-Z .index_container-2oV5I { padding: 0 16px; box-sizing: border-box; background: #F8F8F8; box-shadow: 0 0 5px 0 #ccc; position: relative; } @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) { .index_aichat_container-2Jt-Z .index_safe_bottom-YNDwI { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } } @supports not ((bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom))) { .index_aichat_container-2Jt-Z .index_safe_bottom-YNDwI { padding-bottom: 24px; } } .index_aichat_container-2Jt-Z .index_agreement_container-MxHWN { padding-top: 40px; box-shadow: none; } .index_aichat_container-2Jt-Z .index_send_message_container-3pAHo { width: 100%; display: flex; align-items: flex-end; position: relative; padding: 10px 0; } .index_aichat_container-2Jt-Z .index_send_message_container-3pAHo .index_search_list-2poLD { width: 100vw; position: absolute; left: -16px; top: 0; transform: translateY(-100%); background-color: #fff; padding: 12px; box-sizing: border-box; z-index: 99; } .index_aichat_container-2Jt-Z .index_send_message_container-3pAHo .index_search_list-2poLD .index_template_item-3uXh9 { display: flex; align-items: center; cursor: pointer; height: 48px; padding: 0 16px; background: #f9f9f9; border-radius: 9.5px; margin-bottom: 7px; font-size: var(--ai-font-size-small); } .index_aichat_container-2Jt-Z .index_send_message_container-3pAHo .index_search_list-2poLD .index_template_item_name-2A6W_ { font-family: PingFang SC, PingFang SC-Medium; font-weight: 500; color: #333333; margin-right: 20px; } .index_aichat_container-2Jt-Z .index_send_message_container-3pAHo .index_search_list-2poLD .index_template_item_description-F7lwV { font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; color: #999999; } .index_aichat_container-2Jt-Z .index_send_message_container-3pAHo .index_search_list-2poLD .index_search_item-1TNFz { padding: 10px 0; line-height: 20px; } .index_aichat_container-2Jt-Z .index_send_message_container-3pAHo .am-search-cancel { display: none; } .index_aichat_container-2Jt-Z .index_send_message_container-3pAHo .index_reload-1m0hg { border: 1px solid #ececec; border-radius: 20px; background: #fff; } .index_aichat_container-2Jt-Z .index_send_message_container-3pAHo .index_input-W7-YU { flex: 1; margin-right: 10px; max-height: 120px; padding: 0 8px; border: 1px solid #efefef; outline: 0; border-radius: 8px; background-color: #fff; line-height: 40px; } .index_aichat_container-2Jt-Z .index_send_message_container-3pAHo .index_btn-970rV { width: -moz-fit-content; width: fit-content; height: -moz-fit-content; height: fit-content; } .index_aichat_container-2Jt-Z .index_send_message_container-3pAHo .index_btn-970rV .index_btn_img-3mK5Y { height: 40px; } .index_aichat_container-2Jt-Z .index_start_show-3YCOQ { width: 65px !important; height: 100px !important; border-radius: 10px; } .index_aichat_container-2Jt-Z .index_modal_content-Rgcnt { position: relative; overflow: hidden; } .index_aichat_container-2Jt-Z .index_modal_content-Rgcnt .index_close-2hB4h { position: absolute; right: -20px; top: -20px; color: #fff; z-index: 1000; width: 20px; height: 20px; } .index_aichat_container-2Jt-Z .index_play_btn-28v47 { height: 40px; width: 100%; background-color: #fff; border-radius: 5px; cursor: pointer; display: flex; align-items: center; justify-content: center; } @keyframes index_out-1MkNR { 0% { position: fixed; left: 50%; top: 50%; transform: scale(1) translate3d(-50%, -50%, 0); } 50% { position: fixed; left: 130px; top: 70px; transform: scale(0.5); } 100% { transform: scale(0); position: fixed; left: 20px; top: -20px; } } .index_ani_out-3DLJL { animation: index_out-1MkNR 0.55s linear; } .index_agreement-2tfHn { width: 100vw; padding: 0 16px; box-sizing: border-box; background: #F5F5F5; font-size: var(--ai-font-size-small); position: absolute; left: -16px; top: 0; transform: translateY(-100%); height: 40px; display: flex; align-items: center; box-shadow: 0 -4px 5px 0 #e0e0e0 inset; } .index_agreement_label-3nrxE { color: #999; } .index_agreement_name-1vS5F { color: #1a90ff; } .index_feed_back_modal_textarea-gyvQw { background: #f9f9f9; border: 0.59px solid #cccccc; border-radius: 4.75px; margin-top: 10px; } .index_carousel_container_pc-1ghfH, .index_carousel_container-ph1oe { width: 100%; height: 100%; box-sizing: border-box; position: relative; } .index_carousel_container_pc-1ghfH .slider-list, .index_carousel_container-ph1oe .slider-list { height: 70vh !important; } .index_carousel_container_pc-1ghfH .index_close_container-2LTzK, .index_carousel_container-ph1oe .index_close_container-2LTzK { display: flex; align-items: center; justify-content: space-between; padding: 16px; } .index_carousel_container_pc-1ghfH .index_close_container-2LTzK .index_modal_title-1PABe, .index_carousel_container-ph1oe .index_close_container-2LTzK .index_modal_title-1PABe { font-size: 16px; font-weight: 500; } .index_carousel_container_pc-1ghfH .index_close_btn-28khv, .index_carousel_container-ph1oe .index_close_btn-28khv { cursor: pointer; width: 32px; height: 32px; } .index_carousel_container_pc-1ghfH .slider-list { height: 86vh !important; } .index_carousel_container_pc-1ghfH .index_carousel_iframe-7GKxr { border: 0; width: 100%; max-width: 343px; height: 100%; } .index_drawer_wrap-Bx3C7 .am-drawer-sidebar { border-radius: 16px 16px 0 0; background-color: #fff; overflow: auto; -webkit-overflow-scrolling: touch; padding-bottom: 16px; } .index_drawer_wrap_pc-k10nd .am-drawer-sidebar { box-sizing: border-box; width: 400px; border-radius: 0 0; background-color: #fff; overflow: auto; -webkit-overflow-scrolling: touch; padding-bottom: 16px; } .index_progress-1aVfn { display: flex; align-items: center; justify-content: center; border-radius: 18px; border: 1px solid #F0F0F0; width: -moz-fit-content; width: fit-content; margin: 0 auto; margin-top: 5px; } .index_progress_img-2arbm { width: 28px; height: 28px; padding: 5px; } .index_progress-1aVfn .index_left-1hXv3 { cursor: pointer; } .index_progress-1aVfn .index_right-Y7MEH { cursor: pointer; } .index_carousel_card_container-2GMZY { width: 100%; display: flex; flex-direction: column; align-items: center; max-height: 70vh; overflow-y: auto; overflow-x: hidden; } .index_carousel_card_container-2GMZY .index_carousel_card-1_iNm { width: 100%; padding: 16px 32px 0; box-sizing: border-box; background: #fff; } .index_carousel_card_container-2GMZY .index_carousel_card-1_iNm .index_source_link-12LXY { white-space: nowrap; } .index_carousel_card_container-2GMZY .index_carousel_card_subtitle-2YYQI { font-size: 16px; text-align: left; font-weight: 500; margin-bottom: 16px; } .index_carousel_card_container-2GMZY .index_carousel_card_title-223hw { font-size: 16px; margin-bottom: 16px; font-weight: 500; } .index_carousel_card_container-2GMZY .index_carousel_card_text-112Bk { width: 100%; } .index_carousel_card_container-2GMZY .index_carousel_card_text_insert-3b11J { display: flex; margin-bottom: 8px; } .index_carousel_card_container-2GMZY .index_carousel_card_text_insert_label-OcSNG { width: 4em; font-weight: 500; margin-right: 16px; } .index_carousel_card_container-2GMZY .index_carousel_card_text_insert_value-5qJAW { flex: 1; } .index_carousel_card_container-2GMZY .index_carousel_card_text-112Bk p { margin: 0; } .index_carousel_card_container-2GMZY .index_carousel_card_text-112Bk p img { width: 100%; } .index_carousel_card_container-2GMZY .index_iframe_container-1uvwN { position: relative; } .index_carousel_card_container-2GMZY .index_iframe_container-1uvwN::after { content: ""; display: block; position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: 343px; height: 100%; } .index_carousel_card_container-2GMZY .index_carousel_iframe-7GKxr { border: 0; width: 100%; height: 505px; max-width: 343px; } .index_feed_back_modal-QfZVF { width: 321px !important; position: relative !important; } .index_feed_back_modal-QfZVF .index_feed_back_modal_title-3Z7HM { font-size: 18px; font-family: PingFangSC, PingFang SC; font-weight: 600; color: #333333; line-height: 23px; } .index_feed_back_modal-QfZVF .index_feed_back_modal_close-2Gtqk { width: 27px; height: 27px; position: absolute; right: 0; top: -41px; } .index_feed_back_modal_body-1M5JF { padding: 0 16px; } .index_feed_back_modal_content-2ql6q { border-radius: 16px !important; position: relative; } .index_feed_back_modal_content-2ql6q .index_negative_list-pqz5z { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; } .index_feed_back_modal_content-2ql6q .index_negative_list-pqz5z .index_negative_item-2eIpZ { width: 140px; height: 33px; border-radius: 4px; border: 1px solid #E5E5E5; display: flex; justify-content: center; align-items: center; margin-bottom: 9px; } .index_feed_back_modal_content-2ql6q .index_negative_list-pqz5z .index_negative_item_active-1CdMk { background: #FFF4F4; color: #FE6058; border: 1px solid #FECBC8; } .index_feed_back_modal_actions-11OAt { padding: 0 16px 20px; box-sizing: border-box; display: flex; justify-content: center; width: 100%; } .index_feed_back_modal_actions-11OAt .index_feed_back_modal_button-3_qM6 { flex: 1; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-family: PingFangSC, PingFang SC; font-weight: 500; border-radius: 22px; } .index_feed_back_modal_actions-11OAt .index_feed_back_modal_button_default-lgiLr { border: 1px solid #FE6058; color: #FE6058; } .index_feed_back_modal_actions-11OAt .index_feed_back_modal_button_primary-1CiV1 { background: linear-gradient(100deg, #FF555E 0%, #FE6A53 100%); color: #fff; margin-left: 9px; } .index_guidance_mask-3Z4YR { position: fixed; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.65); left: 0; bottom: 0; z-index: 99; } .index_guidance_mask-3Z4YR .index_guidance_mask_btn-12FxC { height: 35px; display: flex; align-items: center; position: absolute; padding: 0 30px; left: 50%; bottom: 10%; transform: translateX(-50%); border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.5); font-size: 16px; font-family: OPPOSans, OPPOSans; font-weight: normal; color: #FFFFFF; } .index_float_img-15TV9 { width: 60px; height: 60px; } .index_search_record_mask-3bNI- { position: absolute; width: 100vw; right: -16px; top: 0; height: 60px; background: #f5f5f5; transform: translate3d(0, -100%, 0); display: flex; justify-content: flex-end; align-items: center; } .index_search_record-2d-rS { height: 28px; background: #FFFFFF; box-shadow: 0px 1 4px 0px rgba(153, 153, 153, 0.5); border-radius: 50px 0px 0px 50px; display: flex; justify-content: center; align-items: center; padding: 0 10px 0 9px; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 12px; color: #333333; } .index_search_record-2d-rS .index_search_record_icon-2lGWb { width: 16px; height: 16px; margin-right: 4px; } .index_new_session-1MtVu { display: flex; flex-direction: column; align-items: center; font-size: 10px; height: 100%; margin-bottom: 5.5px; padding-right: 15px; } .index_new_session-1MtVu .index_new_session_img-wPzjW { margin-bottom: 3px; width: 21px; height: 21px; } :root { /**小字文案：协议文案、提示文案、动作按钮等 */ --ai-font-size-small: 12px; /**正常文字大小 消息内容、描述文案等 */ --ai-font-size-normal: 14px; /**标题文案：机器人介绍、突出显示字体等 */ --ai-font-size-big: 22px; } .index_greeting_container-1aNUO { display: flex; flex-direction: column; align-items: center; padding: 0 16px 16px; } .index_greeting_container-1aNUO .index_head_container-9_bDv { position: relative; } .index_greeting_container-1aNUO .index_head_container-9_bDv .index_ring_bg-3xkA5 { position: absolute; z-index: 0; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); width: 200px; } .index_greeting_container-1aNUO .index_head-3-TBW { height: 104px; position: relative; z-index: 10; } .index_greeting_container-1aNUO .index_message_container-RG4D1 { box-shadow: 0px 7.13px 19px 0px rgba(221, 0, 0, 0.25); margin-top: 16px; background: linear-gradient(135deg, #ff555e, #fe6a53); padding: 16px 16px; border-radius: 16px; color: #fff; position: relative; } .index_greeting_container-1aNUO .index_message_container-RG4D1 .index_message_name-35Jwy { width: 100%; text-align: center; font-weight: 700; font-size: var(--ai-font-size-big); line-height: 40px; } .index_greeting_container-1aNUO .index_message_container-RG4D1 .index_message_description-JSW9p { margin-top: 8px; font-size: var(--ai-font-size-normal); line-height: 20px; } .index_greeting_container-1aNUO .index_message_container-RG4D1 .index_point-3JHS9 { position: absolute; left: 50%; top: 0; transform: translate3d(-50%, -99%, 0); width: 0; height: 0; border: 10px solid transparent; border-bottom: 10px solid #FF5F5A; } :root { /**小字文案：协议文案、提示文案、动作按钮等 */ --ai-font-size-small: 12px; /**正常文字大小 消息内容、描述文案等 */ --ai-font-size-normal: 14px; /**标题文案：机器人介绍、突出显示字体等 */ --ai-font-size-big: 22px; } .index_guidance_card_container-14Qg9 { padding: 0 16px; margin-bottom: 16px; } .index_guidance_card_container-14Qg9 .index_guidance_card-1GtdU { background: #fff; padding: 16px 12px 12px; font-size: var(--ai-font-size-normal); border-radius: 12px; box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.08); } .index_guidance_card_container-14Qg9 .index_guidance_card-1GtdU .index_guidance_card_title-2zXxF { font-size: 14px; color: #999999; margin-bottom: 12px; line-height: 22px; } .index_guidance_card_container-14Qg9 .index_guidance_card-1GtdU .index_guidance_card_item-2OYK6 { cursor: pointer; padding: 12px; margin-bottom: 8px; line-height: 24px; background: #f5f7fc; border-radius: 8px; } .index_guidance_card_container-14Qg9 .index_guidance_card-1GtdU .index_guidance_card_item_name-jhLjk { font-weight: bold; color: #333; } .index_guidance_card_container-14Qg9 .index_guidance_card-1GtdU .index_guidance_card_item_split-2cO9G { display: inline-block; height: 12px; width: 1px; margin: 0 6px; background-color: #979797; } .index_guidance_card_container-14Qg9 .index_guidance_card-1GtdU .index_guidance_card_item_description-2_SlB { color: #666; } .index_classify_guidance_container-2XQNd { width: 100%; padding: 20px 16px 0; box-sizing: border-box; background-color: #f5f5f5; border-radius: 16px 16px 0px 0px; position: relative; top: -16px; } .index_classify_guidance_container-2XQNd .index_classify_guidance_tip-2NFEf { font-size: 12px; font-family: PingFangSC, PingFang SC; font-weight: 400; color: #999999; text-align: center; padding-top: 7px; } .index_classify_guidance_container-2XQNd .index_classify_guidance_title-Gnzda { text-align: center; font-size: 18px; font-family: PingFangSC, PingFang SC; font-weight: 500; color: #000000; margin-bottom: 18px; } .index_classify_guidance_container-2XQNd .index_classify_guidance_item-3euZj { display: flex; height: 70px; border-radius: 16px; border: 1px solid #FFFFFF; align-items: center; justify-content: space-between; padding: 0 16px 0 10px; background-color: #fff; margin-bottom: 9px; } .index_classify_guidance_container-2XQNd .index_classify_guidance_item_icon-1dxVv { width: 29px; height: 29px; margin-right: 8px; } .index_classify_guidance_container-2XQNd .index_classify_guidance_item_middle-1p_R1 { flex: 1; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .index_classify_guidance_container-2XQNd .index_classify_guidance_item_right-2qdYL { display: flex; align-items: center; } .index_classify_guidance_container-2XQNd .index_classify_guidance_item_title-1wqzs { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-family: PingFangSC, PingFang SC; font-weight: 500; color: #333333; margin-bottom: 7px; } .index_classify_guidance_container-2XQNd .index_classify_guidance_item_desc-E_bOQ { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-family: PingFangSC, PingFang SC; font-weight: 400; color: #666666; } .index_classify_guidance_container-2XQNd .index_classify_guidance_item_arrows-3_7xl { width: 15px; height: 15px; } .index_classify_guidance_card_container-23HnD { min-height: 115px; box-sizing: border-box; position: relative; background: linear-gradient(100deg, #FF555E 0%, #FE6A53 100%); padding: 20px 16px 0; } .index_classify_guidance_card_container-23HnD .index_classify_guidance_card-2ZXoP { position: absolute; max-width: 68%; min-height: 48px; right: 101px; bottom: 32px; box-sizing: border-box; line-height: 16px; padding: 8px 16px 8px 16px; border-radius: 16px; font-size: 12px; font-family: PingFangSC, PingFang SC; font-weight: 400; color: #333333; background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.9) 100%); } .index_classify_guidance_card_container-23HnD .index_classify_guidance_card-2ZXoP::after { width: 15px; height: 15px; content: ""; display: block; background: url(https://gjscrm-1256038144.cos.ap-beijing.myqcloud.com/common/1705916223951/角@2x.png) no-repeat; background-size: 15px; position: absolute; right: -15px; bottom: 16px; } .index_classify_guidance_card_container-23HnD .index_classify_guidance_card_robot-3r9yH { position: absolute; width: 101px; height: 101px; right: 7px; bottom: 0; } /*! * https://github.com/arqex/react-datetime */ .rdt { position: relative; } .rdtPicker { display: none; position: absolute; width: 240px; padding: 4px; margin-top: 1px; z-index: 99999 !important; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); border: 1px solid #f9f9f9; } .rdtPicker.is-mobile-year { width: 11.5rem; } .rdtPicker.is-mobile-embed { width: 15rem; } .rdtPickerNotDays { width: 192px; } .rdtOpen .rdtPicker { display: block; } .rdtStatic .rdtPicker { box-shadow: none; position: static; } .rdtPicker .rdtTimeToggle { text-align: center; } .rdtPicker table { width: 100%; margin: 0; padding: 0 12px; border-spacing: 0 8px; border-collapse: inherit; } .rdtMonths table, .rdtYears table { border-spacing: 0 12px; } .rdtMonths .headerTable, .rdtYears .headerTable { border-spacing: 0; border-bottom: 1px solid var(--colors-neutral-line-8); } .rdtPicker td, .rdtPicker th { text-align: center; height: 24px; line-height: 24px; width: 24px; } .rdtPicker td { cursor: pointer; } .rdtPicker td > span { display: inline-block; border-radius: var(--inputDate-default-option-top-left-border-radius) var(--inputDate-default-option-top-right-border-radius) var(--inputDate-default-option-bottom-right-border-radius) var(--inputDate-default-option-bottom-left-border-radius); height: 24px; width: 24px; } .rdtPicker td.rdtDay:hover, .rdtPicker td.rdtHour:hover, .rdtPicker td.rdtMinute:hover, .rdtPicker td.rdtSecond:hover, .rdtPicker .rdtTimeToggle:hover { background: #eeeeee; cursor: pointer; } .rdtPicker td.rdtOld, .rdtPicker td.rdtNew { color: var(--inputDate-disabled-option-color); } .rdtPicker td.rdtOld span, .rdtPicker td.rdtNew span { background: var(--inputDate-disabled-option-bg-color); } .rdtPicker td.rdtToday { position: relative; } .rdtPicker td.rdtToday > span { border: 1px solid #2468f2; } .rdtPicker td.rdtActive, .rdtPicker td.rdtActive:hover { background-color: #428bca; color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .rdtPicker td.rdtActive.rdtToday:before { border-bottom-color: #fff; } .rdtPicker td.rdtDisabled, .rdtPicker td.rdtDisabled:hover { background: none; color: #b8babf; cursor: not-allowed; } .rdtPicker td span.rdtOld { color: #b8babf; } .rdtPicker td span.rdtDisabled, .rdtPicker td span.rdtDisabled:hover { background: none; color: #b8babf; cursor: not-allowed; } .rdtPicker td span.rdtDisabled > span, .rdtPicker td span.rdtDisabled:hover > span { border-color: #e8e9eb; } .rdtPicker th { border-bottom: 1px solid #f9f9f9; } .rdtPicker .dow { width: 14.2857%; border-bottom: none; cursor: default; } .rdtPicker th.rdtSwitch { width: 100px; height: 40px; line-height: 40px; } .rdtPicker th.rdtNext, .rdtPicker th.rdtPrev { font-size: 21px; vertical-align: top; height: 40px; line-height: 40px; } .rdtPrev span, .rdtNext span { display: block; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ /* Konqueror */ -moz-user-select: none; /* Firefox */ /* Internet Explorer/Edge */ user-select: none; } .rdtPicker th.rdtDisabled, .rdtPicker th.rdtDisabled:hover { background: none; color: #b8babf; cursor: not-allowed; } .rdtPicker thead tr:first-of-type th { cursor: pointer; } .rdtPicker thead tr:first-of-type th:hover { background: #eeeeee; } .rdtPicker tfoot { border-top: 1px solid #f9f9f9; } .rdtPicker button { border: none; background: none; cursor: pointer; } .rdtPicker button:hover { background-color: #eee; } .rdtPicker thead button { width: 100%; height: 100%; } td.rdtMonth, td.rdtYear, td.rdtQuarter { height: 24px; width: 48px; line-height: 24px; text-align: center; cursor: pointer; } td.rdtMonth > span, td.rdtYear > span, td.rdtQuarter > span { width: 48px; } td.rdtMonth:hover, td.rdtYear:hover, td.rdtQuarter:hover { background: #eee; } .rdtCounters { display: inline-block; } .rdtCounters > div { float: left; } .rdtCounter { height: 100px; } .rdtCounter { width: 40px; } .rdtCounterSeparator { line-height: 100px; } .rdtCounter .rdtBtn { height: 40%; line-height: 40px; cursor: pointer; display: block; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ /* Konqueror */ -moz-user-select: none; /* Firefox */ /* Internet Explorer/Edge */ user-select: none; } .rdtCounter .rdtBtn:hover { background: #eee; } .rdtCounter .rdtCount { height: 20%; font-size: 1.2em; } .rdtMilli { vertical-align: middle; padding-left: 8px; width: 48px; } .rdtMilli input { width: 100%; font-size: 1.2em; margin-top: 37px; } .rdtTime td { cursor: default; } /* Reset =============== */ html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } figure { margin: 0; } /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; -webkit-text-size-adjust: 100%; } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; height: 0; overflow: visible; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; font-size: 1em; } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type=checkbox], [type=radio] { box-sizing: border-box; padding: 0; } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type=search] { -webkit-appearance: textfield; outline-offset: -2px; } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } /** Browser Compatibility ========================================================================== */ /* 兼容Safari浏览器input disbaled状态下文字颜色不显示 */ input[disabled], input:disabled, input.disabled, input.is-disabled { -webkit-text-fill-color: var(--text--muted-color); } svg.icon { width: 1em; height: 1em; fill: currentColor; position: relative; top: 0.125em; } svg.icon-object { top: 0; } svg.r90 { transform: rotate(90deg); } svg.icon-success { color: #28a745; } svg.icon-fail { color: #dc3545; } /** * Basic typography style for copy text */ html { font-size: 16px; } body { color: var(--body-color); background: var(--body-bg); font-size: var(--body-size); font-weight: var(--body-weight); font-family: var(--fontFamilyBase); line-height: var(--body-lineHeight); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--link-color); font-size: var(--link-fontSize); font-weight: var(--link-fontWeight); -webkit-text-decoration: var(--link-decoration); text-decoration: var(--link-decoration); font-style: var(--link-font-style); background-color: var(--link-bg-color); } a:hover { color: var(--link-onHover-color); font-size: var(--link-onHover-fontSize); font-weight: var(--link-onHover-fontWeight); -webkit-text-decoration: var(--link-onHover-decoration); text-decoration: var(--link-onHover-decoration); font-style: var(--link-onHover-font-style); background-color: var(--link-onHover-bg-color); } a:active { color: var(--link-onClick-color); font-size: var(--link-onClick-fontSize); font-weight: var(--link-onClick-fontWeight); -webkit-text-decoration: var(--link-onClick-text-decoration); text-decoration: var(--link-onClick-text-decoration); font-style: var(--link-onClick-font-style); background-color: var(--link-onClick-bg-color); } label { font-weight: var(--fontWeightNormal); } h1, h2, h3, h4, h5, h6 { font-weight: var(--fontWeightNormal); color: var(--text--loud-color); line-height: 1.1; } .is-matched { color: var(--danger); } pre, code, kbd, samp { font-family: var(--fontFamilyMonospace); } .amis-routes-wrapper { width: 100%; height: 100%; } .has-popover { position: relative; } .is-keyword { color: var(--primary-onActive); } .visibility-sensor { min-height: 5px; } .renderer-error-boundary { padding: 5px; font-family: PingFangSC-Medium; font-size: 14px; color: #cf1322; border: 1px dashed #cf1322; } html, body { width: 100%; height: 100%; } body { overflow-x: hidden; } .cxd-Layout { min-height: 100%; width: 100%; position: relative; } .cxd-Layout:before { content: ""; position: absolute; width: inherit; top: 0; bottom: 0; z-index: -1; background: var(--body-bg); border: inherit; display: block; } .cxd-Layout--boxed { margin-right: auto; margin-left: auto; } .cxd-Layout .cxd-Layout-header { background: var(--Layout-header-bg); box-shadow: var(--Layout-header-boxShadow); height: var(--Layout-header-height); } .cxd-Layout--headerFixed { padding-top: var(--Layout-header-height); --affix-offset-top: var(--Layout-header-height); } .cxd-Layout--headerFixed .cxd-Layout-header { position: fixed; top: 0; width: 100%; z-index: 1200; } .cxd-Layout-brandBar { background: var(--Layout-brand-bg); color: var(--Layout-brandBar-color); } .cxd-Layout-brandBar > button { padding: 0.625rem 1.0625rem; font-size: 1rem; line-height: calc(var(--Layout-header-height) - var(--gap-md)); text-decoration: none; background: transparent; border: none; } .cxd-Layout-brand { color: var(--Layout-brand-color); text-align: left; font-size: var(--fontSizeMd); font-weight: var(--fontWeightNormal); max-width: 100%; height: auto; line-height: var(--Layout-header-height); display: inline-block; vertical-align: middle; padding: 0 var(--gap-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cxd-Layout-brand:hover { text-decoration: none; } .cxd-Layout-brand img { max-height: calc(var(--Layout-header-height) / 2); vertical-align: middle; display: inline; } .cxd-Layout-headerBar { border-bottom: var(--Layout-headerBar-borderBottom); min-height: var(--Layout-header-height); padding: 0 var(--gap-sm); display: flex; flex-direction: row; align-items: center; } .cxd-Layout-offScreenBtn { display: none; float: right; padding: 13px var(--gap-md); } .cxd-Layout-aside { position: relative; background: var(--Layout-aside-bg); color: var(--Layout-aside-color); } .cxd-Layout-aside:before { content: ""; position: absolute; width: inherit; top: 0; bottom: 0; z-index: -1; background: inherit; border: inherit; } .cxd-Layout-asideFooter { position: absolute; bottom: 0; width: 100%; z-index: 1200; max-width: var(--Layout-aside-width); } .cxd-Layout-asideFooter ~ div { padding-bottom: 3.125rem; } .cxd-Layout-main { padding-bottom: var(--Layout-footer-height); width: 100%; height: 100%; } .cxd-Layout--noFooter .cxd-Layout-main { padding-bottom: 0; } .cxd-Layout-footer { position: absolute; bottom: 0; left: 0; right: 0; z-index: 0; } .cxd-Layout--sm .cxd-Layout-asideFooter { max-width: var(--Layout-aside--sm-width); } .cxd-Layout--sm .cxd-AsideNav-item a { font-size: var(--fontSizeSm); } .cxd-Layout--md .cxd-Layout-asideFooter { max-width: var(--Layout-aside--md-width); } .cxd-Layout--lg .cxd-Layout-asideFooter { max-width: var(--Layout-aside--lg-width); } @media (max-width: 767px) { .cxd-Layout-content { transition: transform var(--animation-duration) ease; } .cxd-Layout-aside { display: none; } .cxd-Layout--offScreen .cxd-Layout-aside { position: fixed; top: 3.125rem; bottom: 0; width: var(--Layout--offscreen-width); display: block !important; visibility: visible; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 1010; } .cxd-Layout-headerBar { display: none; } .cxd-Layout--offScreen .cxd-Layout-body, .cxd-Layout--offScreen .cxd-Layout-footer { background: var(--body-bg); transition: transform var(--animation-duration) ease; backface-visibility: hidden; transform: translate3d(var(--Layout--offscreen-width), 0px, 0px); overflow: hidden; position: fixed; width: 100%; top: 0; bottom: 0; left: 0; right: 0; z-index: 1015; padding-top: 3.125rem; } .cxd-Layout-offScreenBtn { display: block; } } @media (min-width: 768px) { .cxd-Layout { display: flex; flex-direction: column; } .cxd-Layout-header { width: 100%; } .cxd-Layout-main { flex-grow: 1; display: flex; min-width: 0; flex-direction: row; justify-content: stretch; align-items: stretch; } .cxd-Layout-body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; justify-content: stretch; align-items: stretch; } .cxd-Layout-content { display: flex; flex-grow: 1; min-width: 0; position: relative; min-height: 0; } .cxd-Layout > .cxd-Layout-body { flex-grow: 1; position: relative; } .cxd-Layout--boxed { width: 47.5rem; } .cxd-Layout--boxed.cxd-Layout--headerFixed .cxd-Layout-header { width: 47.5rem; } .cxd-Layout-brand, .cxd-Layout-brandBar, .cxd-Layout-aside { width: var(--Layout-aside-width); flex-shrink: 0; transition: width var(--animation-duration) ease; } .cxd-Layout-brandBar { float: left; } .cxd-Layout--withAside .cxd-Layout-headerBar, .cxd-Layout--withAside .cxd-Layout-footer { margin-left: var(--Layout-aside-width); transition: margin var(--animation-duration) ease; } .cxd-Layout .visible-folded { display: none; } .cxd-Layout--folded .visible-folded { display: inherit; } .cxd-Layout--folded .hidden-folded { display: none !important; } .cxd-Layout--folded .text-center-folded { text-align: center; } .cxd-Layout--folded .pull-none-folded { float: none !important; } .cxd-Layout--folded .w-auto-folded { width: auto; } .cxd-Layout--folded .cxd-Layout-aside, .cxd-Layout--folded .cxd-Layout-brandBar { width: var(--Layout-aside--folded-width); } .cxd-Layout--folded.cxd-Layout--withAside .cxd-Layout-headerBar, .cxd-Layout--folded.cxd-Layout--withAside .cxd-Layout-footer { margin-left: var(--Layout-aside--folded-width); } .cxd-Layout--folded .cxd-Layout-brand { display: block; padding: 0; font-size: var(--fontSizeLg); text-align: center; } .cxd-Layout--asideFixed .cxd-Layout-aside { height: 100%; } .cxd-Layout--asideFixed .cxd-Layout-aside:before { position: fixed; z-index: 15; } .cxd-Layout--asideFixed .cxd-Layout-brandBar { position: fixed; } .cxd-Layout--asideFixed .cxd-Layout-asideWrap { position: fixed; overflow: hidden; top: var(--Layout-header-height); bottom: 0; left: 0; width: inherit; z-index: 1200; } .cxd-Layout--asideFixed .cxd-Layout-asideInner { position: relative; width: 100%; height: 100%; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firfox */ } .cxd-Layout--asideFixed .cxd-Layout-asideInner::-webkit-scrollbar { -webkit-appearance: none; } .cxd-Layout--asideFixed .cxd-Layout-asideInner::-webkit-scrollbar:vertical { width: 0; /* chrome */ } .cxd-Layout--noHeader .cxd-Layout-asideWrap { top: 0; } .cxd-Layout--asideFixed.cxd-Layout--folded .cxd-Layout-aside { position: static; } .cxd-Layout--asideFixed.cxd-Layout--folded .cxd-Layout-brandBar { position: static; } .cxd-Layout--asideFixed.cxd-Layout--folded .cxd-Layout-asideWrap { overflow: visible; } .cxd-Layout--asideFixed.cxd-Layout--folded .cxd-Layout-asideInner { overflow: visible; padding-right: 17px; } .cxd-Layout--sm:not(.cxd-Layout--folded) .cxd-Layout-brand, .cxd-Layout--sm:not(.cxd-Layout--folded) .cxd-Layout-brandBar, .cxd-Layout--sm:not(.cxd-Layout--folded) .cxd-Layout-aside { width: var(--Layout-aside--sm-width); } .cxd-Layout--md:not(.cxd-Layout--folded) .cxd-Layout-brand, .cxd-Layout--md:not(.cxd-Layout--folded) .cxd-Layout-brandBar, .cxd-Layout--md:not(.cxd-Layout--folded) .cxd-Layout-aside { width: var(--Layout-aside--md-width); } .cxd-Layout--lg:not(.cxd-Layout--folded) .cxd-Layout-brand, .cxd-Layout--lg:not(.cxd-Layout--folded) .cxd-Layout-brandBar, .cxd-Layout--lg:not(.cxd-Layout--folded) .cxd-Layout-aside { width: var(--Layout-aside--lg-width); } } @media (min-width: 992px) { .cxd-Layout--boxed { width: 61.25rem; } .cxd-Layout--boxed.cxd-Layout--headerFixed .cxd-Layout-header { width: 61.25rem; } } @media (min-width: 1200px) { .cxd-Layout--boxed { width: 73.75rem; } .cxd-Layout--boxed.cxd-Layout--headerFixed .cxd-Layout-header { width: 73.75rem; } } .cxd-Grid-col--xs1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--xs2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--xs3 { flex: 0 0 25%; max-width: 25%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--xs4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--xs5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--xs6 { flex: 0 0 50%; max-width: 50%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--xs7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--xs8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--xs9 { flex: 0 0 75%; max-width: 75%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--xs10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--xs11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--xs12 { flex: 0 0 100%; max-width: 100%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--xs { flex-basis: 0; flex-grow: 1; min-height: 1px; max-width: 100%; width: 100%; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--xsAuto { flex: 0 0 auto; width: auto; max-width: 100%; padding-left: 0.5rem; padding-right: 0.5rem; } @media (min-width: 576px) { .cxd-Grid { min-width: 0; min-height: 0; margin-left: -0.5rem; margin-right: -0.5rem; display: flex; flex-wrap: wrap; flex: 1; } .cxd-Grid--hRight { justify-content: flex-end; } .cxd-Grid--hCenter { justify-content: center; } .cxd-Grid--hBetween { justify-content: space-between; } .cxd-Grid--vMiddle > div { display: flex; flex-direction: column; justify-content: center; } .cxd-Grid--vBottom > div { display: flex; flex-direction: column; justify-content: flex-end; } .cxd-Grid--vBetween > div { display: flex; flex-direction: column; justify-content: space-between; } .cxd-Grid > .cxd-Grid-col--vTop { display: flex; flex-direction: column; justify-content: flex-start; } .cxd-Grid > .cxd-Grid-col--vMiddle { display: flex; flex-direction: column; justify-content: center; } .cxd-Grid > .cxd-Grid-col--vBottom { display: flex; flex-direction: column; justify-content: flex-end; } .cxd-Grid > .cxd-Grid-col--vBetween { display: flex; flex-direction: column; justify-content: space-between; } .cxd-Grid-col--sm1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--sm2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--sm3 { flex: 0 0 25%; max-width: 25%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--sm4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--sm5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--sm6 { flex: 0 0 50%; max-width: 50%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--sm7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--sm8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--sm9 { flex: 0 0 75%; max-width: 75%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--sm10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--sm11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--sm12 { flex: 0 0 100%; max-width: 100%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--sm { flex-basis: 0; flex-grow: 1; min-height: 1px; max-width: 100%; width: 100%; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--smAuto { flex: 0 0 auto; width: auto; max-width: 100%; padding-left: 0.5rem; padding-right: 0.5rem; } } @media (min-width: 768px) { .cxd-Grid-col--md1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--md2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--md3 { flex: 0 0 25%; max-width: 25%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--md4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--md5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--md6 { flex: 0 0 50%; max-width: 50%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--md7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--md8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--md9 { flex: 0 0 75%; max-width: 75%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--md10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--md11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--md12 { flex: 0 0 100%; max-width: 100%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--md { flex-basis: 0; flex-grow: 1; min-height: 1px; max-width: 100%; width: 100%; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--mdAuto { flex: 0 0 auto; width: auto; max-width: 100%; padding-left: 0.5rem; padding-right: 0.5rem; } } @media (min-width: 992px) { .cxd-Grid-col--lg1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--lg2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--lg3 { flex: 0 0 25%; max-width: 25%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--lg4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--lg5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--lg6 { flex: 0 0 50%; max-width: 50%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--lg7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--lg8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--lg9 { flex: 0 0 75%; max-width: 75%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--lg10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--lg11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--lg12 { flex: 0 0 100%; max-width: 100%; min-height: 1px; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--lg { flex-basis: 0; flex-grow: 1; min-height: 1px; max-width: 100%; width: 100%; padding-left: 0.5rem; padding-right: 0.5rem; } .cxd-Grid-col--lgAuto { flex: 0 0 auto; width: auto; max-width: 100%; padding-left: 0.5rem; padding-right: 0.5rem; } } .cxd-Grid--none { margin-left: 0; margin-right: 0; } .cxd-Grid--none > div { padding-left: 0; padding-right: 0; } .cxd-Grid--xs { margin-left: calc(var(--gap-xs) * -0.5); margin-right: calc(var(--gap-xs) * -0.5); } .cxd-Grid--xs > div { padding-left: calc(var(--gap-xs) * 0.5); padding-right: calc(var(--gap-xs) * 0.5); } .cxd-Grid--sm { margin-left: calc(var(--gap-sm) * -0.5); margin-right: calc(var(--gap-sm) * -0.5); } .cxd-Grid--sm > div { padding-left: calc(var(--gap-sm) * 0.5); padding-right: calc(var(--gap-sm) * 0.5); } .cxd-Grid--base { margin-left: calc(var(--gap-base) * -0.5); margin-right: calc(var(--gap-base) * -0.5); } .cxd-Grid--base > div { padding-left: calc(var(--gap-base) * 0.5); padding-right: calc(var(--gap-base) * 0.5); } .cxd-Grid--md { margin-left: calc(var(--gap-md) * -0.5); margin-right: calc(var(--gap-md) * -0.5); } .cxd-Grid--md > div { padding-left: calc(var(--gap-md) * 0.5); padding-right: calc(var(--gap-md) * 0.5); } .cxd-Grid--lg { margin-left: calc(var(--gap-lg) * -0.5); margin-right: calc(var(--gap-lg) * -0.5); } .cxd-Grid--lg > div { padding-left: calc(var(--gap-lg) * 0.5); padding-right: calc(var(--gap-lg) * 0.5); } .cxd-AsideNav::before, .cxd-AsideNav::after { display: table; content: ""; } .cxd-AsideNav::after { clear: both; } .cxd-AsideNav-label { color: var(--Layout-asideLabel-color); margin-top: var(--gap-base); margin-bottom: var(--gap-sm); font-size: var(--fontSizeXs); padding-left: var(--gap-base); padding-right: var(--gap-base); } .cxd-AsideNav-list { list-style: none; padding: 0; margin: 0; } .cxd-AsideNav-itemArrow { float: right; display: block; width: var(--gap-md); text-align: center; line-height: 1.0625rem; margin-top: 0.125rem; } .cxd-AsideNav-itemArrow:empty:before { content: ""; display: inline-block; transform-origin: center; transition: transform var(--animation-duration) ease; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgNTEzIDEwMjEiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+Cgk8ZyBpZD0icmlnaHQtYXJyb3ciIGZpbGw9IiNmZmZmZmYiIGZpbGwtcnVsZT0ibm9uemVybyI+CgkJPHBhdGggZD0iTTU2LjU1OTA1NCwxMDEzLjc3MzY5IEw1MTIuOTA4MTE2LDUxMi42ODQ1MjQgTDU2LjU1OTA1NCwxMi4yMzQ1MDEgQzQ5LjQxMTQ2NzgsMi45MzQ1NTkxMiAzNy42NjY0MjM4LC0xLjU5MTg4MTc2IDI2LjEyNjIzMjQsMC41MDU5NDgyNDYgQzE0LjU4NjA0MSwyLjYwMzc3ODI1IDUuMTg1NDQ0MDksMTAuOTc0MTcyNyAxLjc2ODE1NTE2LDIyLjE5NDY0NzEgQy0xLjY0OTEzMzc3LDMzLjQxNTEyMTQgMS40ODk4MDIyOCw0NS42MDQ1MzUxIDkuOTAxNTE2LDUzLjc3ODg4NCBMNDI0LjcwNjE5Nyw1MTIuNjg0NTI0IEwxMi40NTgwOTQsOTY5LjY3MjczMSBDMi40NTgyMDU5Niw5ODIuNTUxNDk4IDQuMDEyOTc3MzcsMTAwMC45NDgzIDE2LjAzMjQ0MjIsMTAxMS45NjYxNSBDMjguMDUxOTA3MSwxMDIyLjk4Mzk5IDQ2LjUxNDIzNDYsMTAyMi45MzYxOSA1OC40NzY0ODcsMTAxMS44NTYyNiBMNTYuNTU5MDU0LDEwMTMuNzczNjkgWiIgaWQ9Iui3r+W+hCI+CgkJPC9wYXRoPgoJPC9nPgo8L3N2Zz4K); width: 0.625rem; height: 0.625rem; background-position: center center; background-repeat: no-repeat; } .cxd-AsideNav-item.is-open > a > .cxd-AsideNav-itemArrow:empty:before { transform: rotate(90deg); color: var(--Layout-asideLink-onActive-arrowColor); } .cxd-AsideNav-itemArrow > svg { color: var(--Layout-asideLink-color); width: 0.625rem; height: 0.625rem; transform-origin: center; transition: transform var(--animation-duration) ease; } .cxd-AsideNav-item.is-open > a > .cxd-AsideNav-itemArrow > svg { transform: rotate(90deg); } .cxd-AsideNav-itemBadge { padding: 0.125rem var(--gap-xs); margin-top: 0.125rem; font-size: var(--fontSizeXs); text-shadow: 0 0.0625rem 0 rgba(0, 0, 0, 0.2); float: right; min-width: 0.0625rem; line-height: 1; font-weight: var(--fontWeightBold); text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.625rem; } .cxd-AsideNav-itemIcon { margin: calc((var(--Layout-nav-height) - var(--lineHeightBase) * var(--Layout-asideLink-fontSize)) / -2) -0.625rem; line-height: var(--Layout-nav-height); width: var(--Layout-nav-height); vertical-align: middle; float: left; margin-right: 0; text-align: center; position: relative; overflow: hidden; color: var(--Layout-asideLink-iconColor); font-size: var(--Layout-asideLink-onHover-iconSize); } .cxd-AsideNav-itemIcon:before { position: relative; z-index: 2; } .cxd-AsideNav-subList { margin: 0; padding: 0; opacity: 0; height: 0; overflow: hidden; margin-left: calc(var(--gap-md) * -1); transition: all var(--animation-duration) ease-in-out 0s; background: var(--Layout-aside-subList-bg); } .cxd-Layout--folded .cxd-AsideNav-item > .cxd-AsideNav-subList { display: block; overflow: hidden; } .is-open > .cxd-AsideNav-subList, .cxd-Layout--folded .cxd-AsideNav-item .cxd-AsideNav-item.is-open > .cxd-AsideNav-subList, .cxd-Layout--folded .cxd-AsideNav-item:hover > .cxd-AsideNav-subList, .cxd-Layout--folded .cxd-AsideNav-item:focus > .cxd-AsideNav-subList, .cxd-Layout--folded .cxd-AsideNav-item:active > .cxd-AsideNav-subList { opacity: 1; margin-left: 0; height: auto !important; overflow: visible; } .cxd-AsideNav-item { position: relative; display: block; } .cxd-AsideNav-item a { font-weight: normal; cursor: pointer; text-transform: none; display: block; font-size: var(--Layout-asideLink-fontSize); padding: calc((var(--Layout-nav-height) - var(--lineHeightBase) * var(--Layout-asideLink-fontSize)) / 2) var(--gap-base); position: relative; transition: background-color var(--animation-duration) ease-in-out 0s; color: var(--Layout-asideLink-color); text-decoration: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-AsideNav-item a:hover { color: var(--Layout-asideLink-onHover-color); text-decoration: none; background: var(--Layout-aside-onHover-bg); } .cxd-AsideNav-item a:hover .cxd-AsideNav-itemIcon { color: var(--Layout-asideLink-onHover-iconColor); } .cxd-AsideNav-item.is-active > a { background: var(--Layout-aside-onAcitve-bg); color: var(--Layout-asideLink-onActive-color); } .cxd-AsideNav-item.is-active > a:hover { background: var(--Layout-aside-onAcitve-onHover-bg); } .cxd-AsideNav-item.is-lg > a { padding: calc((var(--Layout-nav-lgHeight) - var(--lineHeightBase) * var(--Layout-asideLink-fontSize)) / 2) var(--gap-md); } .cxd-AsideNav-item .cxd-AsideNav-item a { padding-left: calc(var(--Layout-nav-height) + 0.3125rem); } .cxd-AsideNav-item .cxd-AsideNav-item .cxd-AsideNav-item a { padding-left: calc(var(--Layout-nav-height) + 0.9375rem); } .cxd-AsideNav-item .cxd-AsideNav-item .cxd-AsideNav-item .cxd-AsideNav-item a { padding-left: calc(var(--Layout-nav-height) + 1.875rem); } .cxd-AsideNav-item .cxd-AsideNav-item .cxd-AsideNav-item .cxd-AsideNav-item .cxd-AsideNav-item a { padding-left: calc(var(--Layout-nav-height) + 2.8125rem); } .cxd-AsideNav-item .cxd-AsideNav-item .cxd-AsideNav-subList { display: none; } .cxd-AsideNav-item .cxd-AsideNav-item.is-open .cxd-AsideNav-subList { display: block; } .cxd-AsideNav-subHeader { display: none; } .cxd-AsideNav-subHeader a { cursor: default; background: transparent; color: var(--Layout-asideLink-color); padding: calc((var(--Layout-nav--folded-height) - var(--lineHeightBase) * var(--Layout-asideLink-fontSize)) / 2) var(--gap-md); } .cxd-AsideNav-subHeader a:hover { color: var(--Layout-asideLink-onHover-color); background: transparent; } .cxd-AsideNav-tooltip { pointer-events: none; left: 0; top: 50%; transform: translateY(-50%); position: absolute; font-size: var(--Tooltip--attr-fontSize); line-height: var(--Tooltip--attr-lineHeigt); text-align: left; white-space: nowrap; background: var(--Tooltip--attr-bg); border: var(--Tooltip--attr-borderWidth) solid var(--Tooltip--attr-borderColor); border-radius: var(--Tooltip--attr-borderRadius); box-shadow: var(--Tooltip--attr-boxShadow); left: 100%; color: var(--Tooltip--attr-color); padding: var(--Tooltip--attr-paddingY) var(--Tooltip--attr-paddingX); opacity: 0; transition: var(--Tooltip--attr-transition); } .cxd-AsideNav-divider { width: auto; height: 0.0625rem; margin: var(--Layout-asideDivider-margin); overflow: hidden; font-size: 0; background: var(--Layout-asideDivider-bg); } img.cxd-AsideNav-itemIcon { float: none; height: var(--Layout-asideLink-fontSize); width: auto; margin-right: var(--gap-xs); vertical-align: middle; } @media (min-width: 768px) { .cxd-Layout--folded .cxd-AsideNav-label { display: none; } .cxd-Layout--folded .cxd-AsideNav-subHeader { display: block; } .cxd-Layout--folded .cxd-AsideNav-item:hover > .cxd-AsideNav-tooltip { opacity: 1; z-index: 1600; margin: 0 0 0 var(--Tooltip--attr-gap); opacity: 1; } .cxd-Layout--folded .cxd-AsideNav-list > .cxd-AsideNav-item > a { text-align: center; position: relative; padding: 0; text-align: center; height: var(--Layout-nav--folded-height); border: none; } .cxd-Layout--folded .cxd-AsideNav-list > .cxd-AsideNav-item > a .cxd-AsideNav-itemArrow, .cxd-Layout--folded .cxd-AsideNav-list > .cxd-AsideNav-item > a .cxd-AsideNav-itemLabel { display: none; } .cxd-Layout--folded .cxd-AsideNav-list > .cxd-AsideNav-item > a .cxd-AsideNav-itemIcon { width: auto; float: none !important; display: block; font-size: 1rem; margin: 0; line-height: var(--Layout-nav--folded-height); border: none !important; } .cxd-Layout--folded .cxd-AsideNav-list > .cxd-AsideNav-item > a .cxd-AsideNav-itemBadge { position: absolute; right: 0.75rem; top: 0.5rem; z-index: 3; } .cxd-Layout--folded .cxd-AsideNav-list > .cxd-AsideNav-item.is-lg > a { height: var(--Layout-nav-lgHeight); } .cxd-Layout--folded .cxd-AsideNav-list > .cxd-AsideNav-item.is-lg > a .cxd-AsideNav-itemIcon { line-height: var(--Layout-nav-lgHeight); } .cxd-Layout--folded .cxd-AsideNav-item .cxd-AsideNav-item a { padding-left: var(--gap-md) !important; } .cxd-Layout--folded .cxd-AsideNav-subList { height: 0 !important; position: absolute; left: 100%; top: 0 !important; z-index: 1050; width: var(--Layout-aside-width); box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.1); } .cxd-Layout--folded.cxd-Layout--sm .cxd-AsideNav-subList { width: var(--Layout-aside--sm-width); } .cxd-Layout--folded.cxd-Layout--md .cxd-AsideNav-subList { width: var(--Layout-aside--md-width); } .cxd-Layout--folded.cxd-Layout--lg .cxd-AsideNav-subList { width: var(--Layout-aside--lg-width); } } .cxd-Hbox { display: flex; flex-direction: row; flex-wrap: nowrap; } .cxd-Hbox-col { flex-basis: 0; flex-grow: 1; min-height: 1px; max-width: 100%; width: 100%; } .cxd-Hbox-col--customWidth { flex-grow: unset; flex-basis: unset; } .cxd-Hbox-col--auto { flex: 0 0 auto; width: auto; max-width: 100%; } .cxd-Hbox--hRight { justify-content: flex-end; } .cxd-Hbox--hCenter { justify-content: center; } .cxd-Hbox--hBetween { justify-content: space-between; } .cxd-Hbox--vMiddle > .cxd-Hbox-col { display: flex; flex-direction: column; justify-content: center; } .cxd-Hbox--vBottom > .cxd-Hbox-col { display: flex; flex-direction: column; justify-content: flex-end; } .cxd-Hbox--vBetween > .cxd-Hbox-col { display: flex; flex-direction: column; justify-content: space-between; } .cxd-Hbox > .cxd-Hbox-col--vTop { display: flex; flex-direction: column; justify-content: flex-start; } .cxd-Hbox > .cxd-Hbox-col--vMiddle { display: flex; flex-direction: column; justify-content: center; } .cxd-Hbox > .cxd-Hbox-col--vBottom { display: flex; flex-direction: column; justify-content: flex-end; } .cxd-Hbox > .cxd-Hbox-col--vBetween { display: flex; flex-direction: column; justify-content: space-between; } .cxd-Hbox--xs { margin-left: calc(var(--gap-xs) * -0.5); margin-right: calc(var(--gap-xs) * -0.5); } .cxd-Hbox--xs > .cxd-Hbox-col { padding-left: calc(var(--gap-xs) * 0.5); padding-right: calc(var(--gap-xs) * 0.5); } .cxd-Hbox--sm { margin-left: calc(var(--gap-sm) * -0.5); margin-right: calc(var(--gap-sm) * -0.5); } .cxd-Hbox--sm > .cxd-Hbox-col { padding-left: calc(var(--gap-sm) * 0.5); padding-right: calc(var(--gap-sm) * 0.5); } .cxd-Hbox--base { margin-left: calc(var(--gap-base) * -0.5); margin-right: calc(var(--gap-base) * -0.5); } .cxd-Hbox--base > .cxd-Hbox-col { padding-left: calc(var(--gap-base) * 0.5); padding-right: calc(var(--gap-base) * 0.5); } .cxd-Hbox--md { margin-left: calc(var(--gap-md) * -0.5); margin-right: calc(var(--gap-md) * -0.5); } .cxd-Hbox--md > .cxd-Hbox-col { padding-left: calc(var(--gap-md) * 0.5); padding-right: calc(var(--gap-md) * 0.5); } .cxd-Hbox--lg { margin-left: calc(var(--gap-lg) * -0.5); margin-right: calc(var(--gap-lg) * -0.5); } .cxd-Hbox--lg > .cxd-Hbox-col { padding-left: calc(var(--gap-lg) * 0.5); padding-right: calc(var(--gap-lg) * 0.5); } .cxd-Vbox { display: table; border-spacing: 0; position: relative; width: 100%; height: 100%; min-height: 240px; } .cxd-Vbox .row-row { display: table-row; height: 100%; } .cxd-Vbox .row-row .cxd-Vbox-cell { position: relative; height: 100%; width: 100%; } .ie .cxd-Vbox .row-row .cxd-Vbox-cell { display: table-cell; overflow: auto; } .ie .cxd-Vbox .row-row .cxd-Vbox-cell .cell-inner { overflow: visible !important; } .cxd-Vbox .row-row .cxd-Vbox-cell .cell-inner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; -webkit-overflow-scrolling: touch; overflow: auto; } .cxd-Button { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; user-select: none; background: transparent; transition: var(--Button-transition); white-space: nowrap; min-width: auto; } .cxd-Button > svg.icon { top: 0; } .cxd-Button--primary { color: var(--button-primary-default-font-color); background: var(--button-primary-default-bg-color); border-color: var(--button-primary-default-top-border-color) var(--button-primary-default-right-border-color) var(--button-primary-default-bottom-border-color) var(--button-primary-default-left-border-color); border-width: var(--button-primary-default-top-border-width) var(--button-primary-default-right-border-width) var(--button-primary-default-bottom-border-width) var(--button-primary-default-left-border-width); border-style: var(--button-primary-default-top-border-style) var(--button-primary-default-right-border-style) var(--button-primary-default-bottom-border-style) var(--button-primary-default-left-border-style); box-shadow: var(--button-primary-default-shadow); } .cxd-Button--primary:not(:disabled):not(.is-disabled):hover { color: var(--button-primary-hover-font-color); background: var(--button-primary-hover-bg-color); border-color: var(--button-primary-hover-top-border-color) var(--button-primary-hover-right-border-color) var(--button-primary-hover-bottom-border-color) var(--button-primary-hover-left-border-color); border-width: var(--button-primary-hover-top-border-width) var(--button-primary-hover-right-border-width) var(--button-primary-hover-bottom-border-width) var(--button-primary-hover-left-border-width); border-style: var(--button-primary-hover-top-border-style) var(--button-primary-hover-right-border-style) var(--button-primary-hover-bottom-border-style) var(--button-primary-hover-left-border-style); box-shadow: var(--button-primary-hover-shadow); } .cxd-Button--primary:not(:disabled):not(.is-disabled).hover { color: var(--button-primary-hover-font-color); background: var(--button-primary-hover-bg-color); border-color: var(--button-primary-hover-top-border-color) var(--button-primary-hover-right-border-color) var(--button-primary-hover-bottom-border-color) var(--button-primary-hover-left-border-color); border-width: var(--button-primary-hover-top-border-width) var(--button-primary-hover-right-border-width) var(--button-primary-hover-bottom-border-width) var(--button-primary-hover-left-border-width); border-style: var(--button-primary-hover-top-border-style) var(--button-primary-hover-right-border-style) var(--button-primary-hover-bottom-border-style) var(--button-primary-hover-left-border-style); box-shadow: var(--button-primary-hover-shadow); } .cxd-Button--primary:not(:disabled):not(.is-disabled):hover:active { color: var(--button-primary-active-font-color); background: var(--button-primary-active-bg-color); border-color: var(--button-primary-active-top-border-color) var(--button-primary-active-right-border-color) var(--button-primary-active-bottom-border-color) var(--button-primary-active-left-border-color); border-width: var(--button-primary-active-top-border-width) var(--button-primary-active-right-border-width) var(--button-primary-active-bottom-border-width) var(--button-primary-active-left-border-width); border-style: var(--button-primary-active-top-border-style) var(--button-primary-active-right-border-style) var(--button-primary-active-bottom-border-style) var(--button-primary-active-left-border-style); box-shadow: var(--button-primary-active-shadow); } .cxd-Button--primary:not(:disabled):not(.is-disabled).active, .cxd-Button--primary:not(:disabled):not(.is-disabled).is-active { color: var(--button-primary-active-font-color); background: var(--button-primary-active-bg-color); border-color: var(--button-primary-active-top-border-color) var(--button-primary-active-right-border-color) var(--button-primary-active-bottom-border-color) var(--button-primary-active-left-border-color); border-width: var(--button-primary-active-top-border-width) var(--button-primary-active-right-border-width) var(--button-primary-active-bottom-border-width) var(--button-primary-active-left-border-width); border-style: var(--button-primary-active-top-border-style) var(--button-primary-active-right-border-style) var(--button-primary-active-bottom-border-style) var(--button-primary-active-left-border-style); box-shadow: var(--button-primary-active-shadow); } .cxd-Button--primary:disabled, .cxd-Button--primary.is-disabled { color: var(--button-primary-disabled-font-color); background: var(--button-primary-disabled-bg-color); border-color: var(--button-primary-disabled-top-border-color) var(--button-primary-disabled-right-border-color) var(--button-primary-disabled-bottom-border-color) var(--button-primary-disabled-left-border-color); border-width: var(--button-primary-disabled-top-border-width) var(--button-primary-disabled-right-border-width) var(--button-primary-disabled-bottom-border-width) var(--button-primary-disabled-left-border-width); border-style: var(--button-primary-disabled-top-border-style) var(--button-primary-disabled-right-border-style) var(--button-primary-disabled-bottom-border-style) var(--button-primary-disabled-left-border-style); box-shadow: var(--button-primary-disabled-shadow); } .cxd-Button--secondary { color: var(--button-secondary-default-font-color); background: var(--button-secondary-default-bg-color); border-color: var(--button-secondary-default-top-border-color) var(--button-secondary-default-right-border-color) var(--button-secondary-default-bottom-border-color) var(--button-secondary-default-left-border-color); border-width: var(--button-secondary-default-top-border-width) var(--button-secondary-default-right-border-width) var(--button-secondary-default-bottom-border-width) var(--button-secondary-default-left-border-width); border-style: var(--button-secondary-default-top-border-style) var(--button-secondary-default-right-border-style) var(--button-secondary-default-bottom-border-style) var(--button-secondary-default-left-border-style); box-shadow: var(--button-secondary-default-shadow); } .cxd-Button--secondary:not(:disabled):not(.is-disabled):hover { color: var(--button-secondary-hover-font-color); background: var(--button-secondary-hover-bg-color); border-color: var(--button-secondary-hover-top-border-color) var(--button-secondary-hover-right-border-color) var(--button-secondary-hover-bottom-border-color) var(--button-secondary-hover-left-border-color); border-width: var(--button-secondary-hover-top-border-width) var(--button-secondary-hover-right-border-width) var(--button-secondary-hover-bottom-border-width) var(--button-secondary-hover-left-border-width); border-style: var(--button-secondary-hover-top-border-style) var(--button-secondary-hover-right-border-style) var(--button-secondary-hover-bottom-border-style) var(--button-secondary-hover-left-border-style); box-shadow: var(--button-secondary-hover-shadow); } .cxd-Button--secondary:not(:disabled):not(.is-disabled).hover { color: var(--button-secondary-hover-font-color); background: var(--button-secondary-hover-bg-color); border-color: var(--button-secondary-hover-top-border-color) var(--button-secondary-hover-right-border-color) var(--button-secondary-hover-bottom-border-color) var(--button-secondary-hover-left-border-color); border-width: var(--button-secondary-hover-top-border-width) var(--button-secondary-hover-right-border-width) var(--button-secondary-hover-bottom-border-width) var(--button-secondary-hover-left-border-width); border-style: var(--button-secondary-hover-top-border-style) var(--button-secondary-hover-right-border-style) var(--button-secondary-hover-bottom-border-style) var(--button-secondary-hover-left-border-style); box-shadow: var(--button-secondary-hover-shadow); } .cxd-Button--secondary:not(:disabled):not(.is-disabled):hover:active { color: var(--button-secondary-active-font-color); background: var(--button-secondary-active-bg-color); border-color: var(--button-secondary-active-top-border-color) var(--button-secondary-active-right-border-color) var(--button-secondary-active-bottom-border-color) var(--button-secondary-active-left-border-color); border-width: var(--button-secondary-active-top-border-width) var(--button-secondary-active-right-border-width) var(--button-secondary-active-bottom-border-width) var(--button-secondary-active-left-border-width); border-style: var(--button-secondary-active-top-border-style) var(--button-secondary-active-right-border-style) var(--button-secondary-active-bottom-border-style) var(--button-secondary-active-left-border-style); box-shadow: var(--button-secondary-active-shadow); } .cxd-Button--secondary:not(:disabled):not(.is-disabled).active, .cxd-Button--secondary:not(:disabled):not(.is-disabled).is-active { color: var(--button-secondary-active-font-color); background: var(--button-secondary-active-bg-color); border-color: var(--button-secondary-active-top-border-color) var(--button-secondary-active-right-border-color) var(--button-secondary-active-bottom-border-color) var(--button-secondary-active-left-border-color); border-width: var(--button-secondary-active-top-border-width) var(--button-secondary-active-right-border-width) var(--button-secondary-active-bottom-border-width) var(--button-secondary-active-left-border-width); border-style: var(--button-secondary-active-top-border-style) var(--button-secondary-active-right-border-style) var(--button-secondary-active-bottom-border-style) var(--button-secondary-active-left-border-style); box-shadow: var(--button-secondary-active-shadow); } .cxd-Button--secondary:disabled, .cxd-Button--secondary.is-disabled { color: var(--button-secondary-disabled-font-color); background: var(--button-secondary-disabled-bg-color); border-color: var(--button-secondary-disabled-top-border-color) var(--button-secondary-disabled-right-border-color) var(--button-secondary-disabled-bottom-border-color) var(--button-secondary-disabled-left-border-color); border-width: var(--button-secondary-disabled-top-border-width) var(--button-secondary-disabled-right-border-width) var(--button-secondary-disabled-bottom-border-width) var(--button-secondary-disabled-left-border-width); border-style: var(--button-secondary-disabled-top-border-style) var(--button-secondary-disabled-right-border-style) var(--button-secondary-disabled-bottom-border-style) var(--button-secondary-disabled-left-border-style); box-shadow: var(--button-secondary-disabled-shadow); } .cxd-Button--success { color: var(--button-success-default-font-color); background: var(--button-success-default-bg-color); border-color: var(--button-success-default-top-border-color) var(--button-success-default-right-border-color) var(--button-success-default-bottom-border-color) var(--button-success-default-left-border-color); border-width: var(--button-success-default-top-border-width) var(--button-success-default-right-border-width) var(--button-success-default-bottom-border-width) var(--button-success-default-left-border-width); border-style: var(--button-success-default-top-border-style) var(--button-success-default-right-border-style) var(--button-success-default-bottom-border-style) var(--button-success-default-left-border-style); box-shadow: var(--button-success-default-shadow); } .cxd-Button--success:not(:disabled):not(.is-disabled):hover { color: var(--button-success-hover-font-color); background: var(--button-success-hover-bg-color); border-color: var(--button-success-hover-top-border-color) var(--button-success-hover-right-border-color) var(--button-success-hover-bottom-border-color) var(--button-success-hover-left-border-color); border-width: var(--button-success-hover-top-border-width) var(--button-success-hover-right-border-width) var(--button-success-hover-bottom-border-width) var(--button-success-hover-left-border-width); border-style: var(--button-success-hover-top-border-style) var(--button-success-hover-right-border-style) var(--button-success-hover-bottom-border-style) var(--button-success-hover-left-border-style); box-shadow: var(--button-success-hover-shadow); } .cxd-Button--success:not(:disabled):not(.is-disabled).hover { color: var(--button-success-hover-font-color); background: var(--button-success-hover-bg-color); border-color: var(--button-success-hover-top-border-color) var(--button-success-hover-right-border-color) var(--button-success-hover-bottom-border-color) var(--button-success-hover-left-border-color); border-width: var(--button-success-hover-top-border-width) var(--button-success-hover-right-border-width) var(--button-success-hover-bottom-border-width) var(--button-success-hover-left-border-width); border-style: var(--button-success-hover-top-border-style) var(--button-success-hover-right-border-style) var(--button-success-hover-bottom-border-style) var(--button-success-hover-left-border-style); box-shadow: var(--button-success-hover-shadow); } .cxd-Button--success:not(:disabled):not(.is-disabled):hover:active { color: var(--button-success-active-font-color); background: var(--button-success-active-bg-color); border-color: var(--button-success-active-top-border-color) var(--button-success-active-right-border-color) var(--button-success-active-bottom-border-color) var(--button-success-active-left-border-color); border-width: var(--button-success-active-top-border-width) var(--button-success-active-right-border-width) var(--button-success-active-bottom-border-width) var(--button-success-active-left-border-width); border-style: var(--button-success-active-top-border-style) var(--button-success-active-right-border-style) var(--button-success-active-bottom-border-style) var(--button-success-active-left-border-style); box-shadow: var(--button-success-active-shadow); } .cxd-Button--success:not(:disabled):not(.is-disabled).active, .cxd-Button--success:not(:disabled):not(.is-disabled).is-active { color: var(--button-success-active-font-color); background: var(--button-success-active-bg-color); border-color: var(--button-success-active-top-border-color) var(--button-success-active-right-border-color) var(--button-success-active-bottom-border-color) var(--button-success-active-left-border-color); border-width: var(--button-success-active-top-border-width) var(--button-success-active-right-border-width) var(--button-success-active-bottom-border-width) var(--button-success-active-left-border-width); border-style: var(--button-success-active-top-border-style) var(--button-success-active-right-border-style) var(--button-success-active-bottom-border-style) var(--button-success-active-left-border-style); box-shadow: var(--button-success-active-shadow); } .cxd-Button--success:disabled, .cxd-Button--success.is-disabled { color: var(--button-success-disabled-font-color); background: var(--button-success-disabled-bg-color); border-color: var(--button-success-disabled-top-border-color) var(--button-success-disabled-right-border-color) var(--button-success-disabled-bottom-border-color) var(--button-success-disabled-left-border-color); border-width: var(--button-success-disabled-top-border-width) var(--button-success-disabled-right-border-width) var(--button-success-disabled-bottom-border-width) var(--button-success-disabled-left-border-width); border-style: var(--button-success-disabled-top-border-style) var(--button-success-disabled-right-border-style) var(--button-success-disabled-bottom-border-style) var(--button-success-disabled-left-border-style); box-shadow: var(--button-success-disabled-shadow); } .cxd-Button--enhance { color: var(--button-enhance-default-font-color); background: var(--button-enhance-default-bg-color); border-color: var(--button-enhance-default-top-border-color) var(--button-enhance-default-right-border-color) var(--button-enhance-default-bottom-border-color) var(--button-enhance-default-left-border-color); border-width: var(--button-enhance-default-top-border-width) var(--button-enhance-default-right-border-width) var(--button-enhance-default-bottom-border-width) var(--button-enhance-default-left-border-width); border-style: var(--button-enhance-default-top-border-style) var(--button-enhance-default-right-border-style) var(--button-enhance-default-bottom-border-style) var(--button-enhance-default-left-border-style); box-shadow: var(--button-enhance-default-shadow); } .cxd-Button--enhance:not(:disabled):not(.is-disabled):hover { color: var(--button-enhance-hover-font-color); background: var(--button-enhance-hover-bg-color); border-color: var(--button-enhance-hover-top-border-color) var(--button-enhance-hover-right-border-color) var(--button-enhance-hover-bottom-border-color) var(--button-enhance-hover-left-border-color); border-width: var(--button-enhance-hover-top-border-width) var(--button-enhance-hover-right-border-width) var(--button-enhance-hover-bottom-border-width) var(--button-enhance-hover-left-border-width); border-style: var(--button-enhance-hover-top-border-style) var(--button-enhance-hover-right-border-style) var(--button-enhance-hover-bottom-border-style) var(--button-enhance-hover-left-border-style); box-shadow: var(--button-enhance-hover-shadow); } .cxd-Button--enhance:not(:disabled):not(.is-disabled).hover { color: var(--button-enhance-hover-font-color); background: var(--button-enhance-hover-bg-color); border-color: var(--button-enhance-hover-top-border-color) var(--button-enhance-hover-right-border-color) var(--button-enhance-hover-bottom-border-color) var(--button-enhance-hover-left-border-color); border-width: var(--button-enhance-hover-top-border-width) var(--button-enhance-hover-right-border-width) var(--button-enhance-hover-bottom-border-width) var(--button-enhance-hover-left-border-width); border-style: var(--button-enhance-hover-top-border-style) var(--button-enhance-hover-right-border-style) var(--button-enhance-hover-bottom-border-style) var(--button-enhance-hover-left-border-style); box-shadow: var(--button-enhance-hover-shadow); } .cxd-Button--enhance:not(:disabled):not(.is-disabled):hover:active { color: var(--button-enhance-active-font-color); background: var(--button-enhance-active-bg-color); border-color: var(--button-enhance-active-top-border-color) var(--button-enhance-active-right-border-color) var(--button-enhance-active-bottom-border-color) var(--button-enhance-active-left-border-color); border-width: var(--button-enhance-active-top-border-width) var(--button-enhance-active-right-border-width) var(--button-enhance-active-bottom-border-width) var(--button-enhance-active-left-border-width); border-style: var(--button-enhance-active-top-border-style) var(--button-enhance-active-right-border-style) var(--button-enhance-active-bottom-border-style) var(--button-enhance-active-left-border-style); box-shadow: var(--button-enhance-active-shadow); } .cxd-Button--enhance:not(:disabled):not(.is-disabled).active, .cxd-Button--enhance:not(:disabled):not(.is-disabled).is-active { color: var(--button-enhance-active-font-color); background: var(--button-enhance-active-bg-color); border-color: var(--button-enhance-active-top-border-color) var(--button-enhance-active-right-border-color) var(--button-enhance-active-bottom-border-color) var(--button-enhance-active-left-border-color); border-width: var(--button-enhance-active-top-border-width) var(--button-enhance-active-right-border-width) var(--button-enhance-active-bottom-border-width) var(--button-enhance-active-left-border-width); border-style: var(--button-enhance-active-top-border-style) var(--button-enhance-active-right-border-style) var(--button-enhance-active-bottom-border-style) var(--button-enhance-active-left-border-style); box-shadow: var(--button-enhance-active-shadow); } .cxd-Button--enhance:disabled, .cxd-Button--enhance.is-disabled { color: var(--button-enhance-disabled-font-color); background: var(--button-enhance-disabled-bg-color); border-color: var(--button-enhance-disabled-top-border-color) var(--button-enhance-disabled-right-border-color) var(--button-enhance-disabled-bottom-border-color) var(--button-enhance-disabled-left-border-color); border-width: var(--button-enhance-disabled-top-border-width) var(--button-enhance-disabled-right-border-width) var(--button-enhance-disabled-bottom-border-width) var(--button-enhance-disabled-left-border-width); border-style: var(--button-enhance-disabled-top-border-style) var(--button-enhance-disabled-right-border-style) var(--button-enhance-disabled-bottom-border-style) var(--button-enhance-disabled-left-border-style); box-shadow: var(--button-enhance-disabled-shadow); } .cxd-Button--info { color: var(--button-info-default-font-color); background: var(--button-info-default-bg-color); border-color: var(--button-info-default-top-border-color) var(--button-info-default-right-border-color) var(--button-info-default-bottom-border-color) var(--button-info-default-left-border-color); border-width: var(--button-info-default-top-border-width) var(--button-info-default-right-border-width) var(--button-info-default-bottom-border-width) var(--button-info-default-left-border-width); border-style: var(--button-info-default-top-border-style) var(--button-info-default-right-border-style) var(--button-info-default-bottom-border-style) var(--button-info-default-left-border-style); box-shadow: var(--button-info-default-shadow); } .cxd-Button--info:not(:disabled):not(.is-disabled):hover { color: var(--button-info-hover-font-color); background: var(--button-info-hover-bg-color); border-color: var(--button-info-hover-top-border-color) var(--button-info-hover-right-border-color) var(--button-info-hover-bottom-border-color) var(--button-info-hover-left-border-color); border-width: var(--button-info-hover-top-border-width) var(--button-info-hover-right-border-width) var(--button-info-hover-bottom-border-width) var(--button-info-hover-left-border-width); border-style: var(--button-info-hover-top-border-style) var(--button-info-hover-right-border-style) var(--button-info-hover-bottom-border-style) var(--button-info-hover-left-border-style); box-shadow: var(--button-info-hover-shadow); } .cxd-Button--info:not(:disabled):not(.is-disabled).hover { color: var(--button-info-hover-font-color); background: var(--button-info-hover-bg-color); border-color: var(--button-info-hover-top-border-color) var(--button-info-hover-right-border-color) var(--button-info-hover-bottom-border-color) var(--button-info-hover-left-border-color); border-width: var(--button-info-hover-top-border-width) var(--button-info-hover-right-border-width) var(--button-info-hover-bottom-border-width) var(--button-info-hover-left-border-width); border-style: var(--button-info-hover-top-border-style) var(--button-info-hover-right-border-style) var(--button-info-hover-bottom-border-style) var(--button-info-hover-left-border-style); box-shadow: var(--button-info-hover-shadow); } .cxd-Button--info:not(:disabled):not(.is-disabled):hover:active { color: var(--button-info-active-font-color); background: var(--button-info-active-bg-color); border-color: var(--button-info-active-top-border-color) var(--button-info-active-right-border-color) var(--button-info-active-bottom-border-color) var(--button-info-active-left-border-color); border-width: var(--button-info-active-top-border-width) var(--button-info-active-right-border-width) var(--button-info-active-bottom-border-width) var(--button-info-active-left-border-width); border-style: var(--button-info-active-top-border-style) var(--button-info-active-right-border-style) var(--button-info-active-bottom-border-style) var(--button-info-active-left-border-style); box-shadow: var(--button-info-active-shadow); } .cxd-Button--info:not(:disabled):not(.is-disabled).active, .cxd-Button--info:not(:disabled):not(.is-disabled).is-active { color: var(--button-info-active-font-color); background: var(--button-info-active-bg-color); border-color: var(--button-info-active-top-border-color) var(--button-info-active-right-border-color) var(--button-info-active-bottom-border-color) var(--button-info-active-left-border-color); border-width: var(--button-info-active-top-border-width) var(--button-info-active-right-border-width) var(--button-info-active-bottom-border-width) var(--button-info-active-left-border-width); border-style: var(--button-info-active-top-border-style) var(--button-info-active-right-border-style) var(--button-info-active-bottom-border-style) var(--button-info-active-left-border-style); box-shadow: var(--button-info-active-shadow); } .cxd-Button--info:disabled, .cxd-Button--info.is-disabled { color: var(--button-info-disabled-font-color); background: var(--button-info-disabled-bg-color); border-color: var(--button-info-disabled-top-border-color) var(--button-info-disabled-right-border-color) var(--button-info-disabled-bottom-border-color) var(--button-info-disabled-left-border-color); border-width: var(--button-info-disabled-top-border-width) var(--button-info-disabled-right-border-width) var(--button-info-disabled-bottom-border-width) var(--button-info-disabled-left-border-width); border-style: var(--button-info-disabled-top-border-style) var(--button-info-disabled-right-border-style) var(--button-info-disabled-bottom-border-style) var(--button-info-disabled-left-border-style); box-shadow: var(--button-info-disabled-shadow); } .cxd-Button--warning { color: var(--button-warning-default-font-color); background: var(--button-warning-default-bg-color); border-color: var(--button-warning-default-top-border-color) var(--button-warning-default-right-border-color) var(--button-warning-default-bottom-border-color) var(--button-warning-default-left-border-color); border-width: var(--button-warning-default-top-border-width) var(--button-warning-default-right-border-width) var(--button-warning-default-bottom-border-width) var(--button-warning-default-left-border-width); border-style: var(--button-warning-default-top-border-style) var(--button-warning-default-right-border-style) var(--button-warning-default-bottom-border-style) var(--button-warning-default-left-border-style); box-shadow: var(--button-warning-default-shadow); } .cxd-Button--warning:not(:disabled):not(.is-disabled):hover { color: var(--button-warning-hover-font-color); background: var(--button-warning-hover-bg-color); border-color: var(--button-warning-hover-top-border-color) var(--button-warning-hover-right-border-color) var(--button-warning-hover-bottom-border-color) var(--button-warning-hover-left-border-color); border-width: var(--button-warning-hover-top-border-width) var(--button-warning-hover-right-border-width) var(--button-warning-hover-bottom-border-width) var(--button-warning-hover-left-border-width); border-style: var(--button-warning-hover-top-border-style) var(--button-warning-hover-right-border-style) var(--button-warning-hover-bottom-border-style) var(--button-warning-hover-left-border-style); box-shadow: var(--button-warning-hover-shadow); } .cxd-Button--warning:not(:disabled):not(.is-disabled).hover { color: var(--button-warning-hover-font-color); background: var(--button-warning-hover-bg-color); border-color: var(--button-warning-hover-top-border-color) var(--button-warning-hover-right-border-color) var(--button-warning-hover-bottom-border-color) var(--button-warning-hover-left-border-color); border-width: var(--button-warning-hover-top-border-width) var(--button-warning-hover-right-border-width) var(--button-warning-hover-bottom-border-width) var(--button-warning-hover-left-border-width); border-style: var(--button-warning-hover-top-border-style) var(--button-warning-hover-right-border-style) var(--button-warning-hover-bottom-border-style) var(--button-warning-hover-left-border-style); box-shadow: var(--button-warning-hover-shadow); } .cxd-Button--warning:not(:disabled):not(.is-disabled):hover:active { color: var(--button-warning-active-font-color); background: var(--button-warning-active-bg-color); border-color: var(--button-warning-active-top-border-color) var(--button-warning-active-right-border-color) var(--button-warning-active-bottom-border-color) var(--button-warning-active-left-border-color); border-width: var(--button-warning-active-top-border-width) var(--button-warning-active-right-border-width) var(--button-warning-active-bottom-border-width) var(--button-warning-active-left-border-width); border-style: var(--button-warning-active-top-border-style) var(--button-warning-active-right-border-style) var(--button-warning-active-bottom-border-style) var(--button-warning-active-left-border-style); box-shadow: var(--button-warning-active-shadow); } .cxd-Button--warning:not(:disabled):not(.is-disabled).active, .cxd-Button--warning:not(:disabled):not(.is-disabled).is-active { color: var(--button-warning-active-font-color); background: var(--button-warning-active-bg-color); border-color: var(--button-warning-active-top-border-color) var(--button-warning-active-right-border-color) var(--button-warning-active-bottom-border-color) var(--button-warning-active-left-border-color); border-width: var(--button-warning-active-top-border-width) var(--button-warning-active-right-border-width) var(--button-warning-active-bottom-border-width) var(--button-warning-active-left-border-width); border-style: var(--button-warning-active-top-border-style) var(--button-warning-active-right-border-style) var(--button-warning-active-bottom-border-style) var(--button-warning-active-left-border-style); box-shadow: var(--button-warning-active-shadow); } .cxd-Button--warning:disabled, .cxd-Button--warning.is-disabled { color: var(--button-warning-disabled-font-color); background: var(--button-warning-disabled-bg-color); border-color: var(--button-warning-disabled-top-border-color) var(--button-warning-disabled-right-border-color) var(--button-warning-disabled-bottom-border-color) var(--button-warning-disabled-left-border-color); border-width: var(--button-warning-disabled-top-border-width) var(--button-warning-disabled-right-border-width) var(--button-warning-disabled-bottom-border-width) var(--button-warning-disabled-left-border-width); border-style: var(--button-warning-disabled-top-border-style) var(--button-warning-disabled-right-border-style) var(--button-warning-disabled-bottom-border-style) var(--button-warning-disabled-left-border-style); box-shadow: var(--button-warning-disabled-shadow); } .cxd-Button--danger { color: var(--button-danger-default-font-color); background: var(--button-danger-default-bg-color); border-color: var(--button-danger-default-top-border-color) var(--button-danger-default-right-border-color) var(--button-danger-default-bottom-border-color) var(--button-danger-default-left-border-color); border-width: var(--button-danger-default-top-border-width) var(--button-danger-default-right-border-width) var(--button-danger-default-bottom-border-width) var(--button-danger-default-left-border-width); border-style: var(--button-danger-default-top-border-style) var(--button-danger-default-right-border-style) var(--button-danger-default-bottom-border-style) var(--button-danger-default-left-border-style); box-shadow: var(--button-danger-default-shadow); } .cxd-Button--danger:not(:disabled):not(.is-disabled):hover { color: var(--button-danger-hover-font-color); background: var(--button-danger-hover-bg-color); border-color: var(--button-danger-hover-top-border-color) var(--button-danger-hover-right-border-color) var(--button-danger-hover-bottom-border-color) var(--button-danger-hover-left-border-color); border-width: var(--button-danger-hover-top-border-width) var(--button-danger-hover-right-border-width) var(--button-danger-hover-bottom-border-width) var(--button-danger-hover-left-border-width); border-style: var(--button-danger-hover-top-border-style) var(--button-danger-hover-right-border-style) var(--button-danger-hover-bottom-border-style) var(--button-danger-hover-left-border-style); box-shadow: var(--button-danger-hover-shadow); } .cxd-Button--danger:not(:disabled):not(.is-disabled).hover { color: var(--button-danger-hover-font-color); background: var(--button-danger-hover-bg-color); border-color: var(--button-danger-hover-top-border-color) var(--button-danger-hover-right-border-color) var(--button-danger-hover-bottom-border-color) var(--button-danger-hover-left-border-color); border-width: var(--button-danger-hover-top-border-width) var(--button-danger-hover-right-border-width) var(--button-danger-hover-bottom-border-width) var(--button-danger-hover-left-border-width); border-style: var(--button-danger-hover-top-border-style) var(--button-danger-hover-right-border-style) var(--button-danger-hover-bottom-border-style) var(--button-danger-hover-left-border-style); box-shadow: var(--button-danger-hover-shadow); } .cxd-Button--danger:not(:disabled):not(.is-disabled):hover:active { color: var(--button-danger-active-font-color); background: var(--button-danger-active-bg-color); border-color: var(--button-danger-active-top-border-color) var(--button-danger-active-right-border-color) var(--button-danger-active-bottom-border-color) var(--button-danger-active-left-border-color); border-width: var(--button-danger-active-top-border-width) var(--button-danger-active-right-border-width) var(--button-danger-active-bottom-border-width) var(--button-danger-active-left-border-width); border-style: var(--button-danger-active-top-border-style) var(--button-danger-active-right-border-style) var(--button-danger-active-bottom-border-style) var(--button-danger-active-left-border-style); box-shadow: var(--button-danger-active-shadow); } .cxd-Button--danger:not(:disabled):not(.is-disabled).active, .cxd-Button--danger:not(:disabled):not(.is-disabled).is-active { color: var(--button-danger-active-font-color); background: var(--button-danger-active-bg-color); border-color: var(--button-danger-active-top-border-color) var(--button-danger-active-right-border-color) var(--button-danger-active-bottom-border-color) var(--button-danger-active-left-border-color); border-width: var(--button-danger-active-top-border-width) var(--button-danger-active-right-border-width) var(--button-danger-active-bottom-border-width) var(--button-danger-active-left-border-width); border-style: var(--button-danger-active-top-border-style) var(--button-danger-active-right-border-style) var(--button-danger-active-bottom-border-style) var(--button-danger-active-left-border-style); box-shadow: var(--button-danger-active-shadow); } .cxd-Button--danger:disabled, .cxd-Button--danger.is-disabled { color: var(--button-danger-disabled-font-color); background: var(--button-danger-disabled-bg-color); border-color: var(--button-danger-disabled-top-border-color) var(--button-danger-disabled-right-border-color) var(--button-danger-disabled-bottom-border-color) var(--button-danger-disabled-left-border-color); border-width: var(--button-danger-disabled-top-border-width) var(--button-danger-disabled-right-border-width) var(--button-danger-disabled-bottom-border-width) var(--button-danger-disabled-left-border-width); border-style: var(--button-danger-disabled-top-border-style) var(--button-danger-disabled-right-border-style) var(--button-danger-disabled-bottom-border-style) var(--button-danger-disabled-left-border-style); box-shadow: var(--button-danger-disabled-shadow); } .cxd-Button--light { color: var(--button-light-default-font-color); background: var(--button-light-default-bg-color); border-color: var(--button-light-default-top-border-color) var(--button-light-default-right-border-color) var(--button-light-default-bottom-border-color) var(--button-light-default-left-border-color); border-width: var(--button-light-default-top-border-width) var(--button-light-default-right-border-width) var(--button-light-default-bottom-border-width) var(--button-light-default-left-border-width); border-style: var(--button-light-default-top-border-style) var(--button-light-default-right-border-style) var(--button-light-default-bottom-border-style) var(--button-light-default-left-border-style); box-shadow: var(--button-light-default-shadow); } .cxd-Button--light:not(:disabled):not(.is-disabled):hover { color: var(--button-light-hover-font-color); background: var(--button-light-hover-bg-color); border-color: var(--button-light-hover-top-border-color) var(--button-light-hover-right-border-color) var(--button-light-hover-bottom-border-color) var(--button-light-hover-left-border-color); border-width: var(--button-light-hover-top-border-width) var(--button-light-hover-right-border-width) var(--button-light-hover-bottom-border-width) var(--button-light-hover-left-border-width); border-style: var(--button-light-hover-top-border-style) var(--button-light-hover-right-border-style) var(--button-light-hover-bottom-border-style) var(--button-light-hover-left-border-style); box-shadow: var(--button-light-hover-shadow); } .cxd-Button--light:not(:disabled):not(.is-disabled).hover { color: var(--button-light-hover-font-color); background: var(--button-light-hover-bg-color); border-color: var(--button-light-hover-top-border-color) var(--button-light-hover-right-border-color) var(--button-light-hover-bottom-border-color) var(--button-light-hover-left-border-color); border-width: var(--button-light-hover-top-border-width) var(--button-light-hover-right-border-width) var(--button-light-hover-bottom-border-width) var(--button-light-hover-left-border-width); border-style: var(--button-light-hover-top-border-style) var(--button-light-hover-right-border-style) var(--button-light-hover-bottom-border-style) var(--button-light-hover-left-border-style); box-shadow: var(--button-light-hover-shadow); } .cxd-Button--light:not(:disabled):not(.is-disabled):hover:active { color: var(--button-light-active-font-color); background: var(--button-light-active-bg-color); border-color: var(--button-light-active-top-border-color) var(--button-light-active-right-border-color) var(--button-light-active-bottom-border-color) var(--button-light-active-left-border-color); border-width: var(--button-light-active-top-border-width) var(--button-light-active-right-border-width) var(--button-light-active-bottom-border-width) var(--button-light-active-left-border-width); border-style: var(--button-light-active-top-border-style) var(--button-light-active-right-border-style) var(--button-light-active-bottom-border-style) var(--button-light-active-left-border-style); box-shadow: var(--button-light-active-shadow); } .cxd-Button--light:not(:disabled):not(.is-disabled).active, .cxd-Button--light:not(:disabled):not(.is-disabled).is-active { color: var(--button-light-active-font-color); background: var(--button-light-active-bg-color); border-color: var(--button-light-active-top-border-color) var(--button-light-active-right-border-color) var(--button-light-active-bottom-border-color) var(--button-light-active-left-border-color); border-width: var(--button-light-active-top-border-width) var(--button-light-active-right-border-width) var(--button-light-active-bottom-border-width) var(--button-light-active-left-border-width); border-style: var(--button-light-active-top-border-style) var(--button-light-active-right-border-style) var(--button-light-active-bottom-border-style) var(--button-light-active-left-border-style); box-shadow: var(--button-light-active-shadow); } .cxd-Button--light:disabled, .cxd-Button--light.is-disabled { color: var(--button-light-disabled-font-color); background: var(--button-light-disabled-bg-color); border-color: var(--button-light-disabled-top-border-color) var(--button-light-disabled-right-border-color) var(--button-light-disabled-bottom-border-color) var(--button-light-disabled-left-border-color); border-width: var(--button-light-disabled-top-border-width) var(--button-light-disabled-right-border-width) var(--button-light-disabled-bottom-border-width) var(--button-light-disabled-left-border-width); border-style: var(--button-light-disabled-top-border-style) var(--button-light-disabled-right-border-style) var(--button-light-disabled-bottom-border-style) var(--button-light-disabled-left-border-style); box-shadow: var(--button-light-disabled-shadow); } .cxd-Button--dark { color: var(--button-dark-default-font-color); background: var(--button-dark-default-bg-color); border-color: var(--button-dark-default-top-border-color) var(--button-dark-default-right-border-color) var(--button-dark-default-bottom-border-color) var(--button-dark-default-left-border-color); border-width: var(--button-dark-default-top-border-width) var(--button-dark-default-right-border-width) var(--button-dark-default-bottom-border-width) var(--button-dark-default-left-border-width); border-style: var(--button-dark-default-top-border-style) var(--button-dark-default-right-border-style) var(--button-dark-default-bottom-border-style) var(--button-dark-default-left-border-style); box-shadow: var(--button-dark-default-shadow); } .cxd-Button--dark:not(:disabled):not(.is-disabled):hover { color: var(--button-dark-hover-font-color); background: var(--button-dark-hover-bg-color); border-color: var(--button-dark-hover-top-border-color) var(--button-dark-hover-right-border-color) var(--button-dark-hover-bottom-border-color) var(--button-dark-hover-left-border-color); border-width: var(--button-dark-hover-top-border-width) var(--button-dark-hover-right-border-width) var(--button-dark-hover-bottom-border-width) var(--button-dark-hover-left-border-width); border-style: var(--button-dark-hover-top-border-style) var(--button-dark-hover-right-border-style) var(--button-dark-hover-bottom-border-style) var(--button-dark-hover-left-border-style); box-shadow: var(--button-dark-hover-shadow); } .cxd-Button--dark:not(:disabled):not(.is-disabled).hover { color: var(--button-dark-hover-font-color); background: var(--button-dark-hover-bg-color); border-color: var(--button-dark-hover-top-border-color) var(--button-dark-hover-right-border-color) var(--button-dark-hover-bottom-border-color) var(--button-dark-hover-left-border-color); border-width: var(--button-dark-hover-top-border-width) var(--button-dark-hover-right-border-width) var(--button-dark-hover-bottom-border-width) var(--button-dark-hover-left-border-width); border-style: var(--button-dark-hover-top-border-style) var(--button-dark-hover-right-border-style) var(--button-dark-hover-bottom-border-style) var(--button-dark-hover-left-border-style); box-shadow: var(--button-dark-hover-shadow); } .cxd-Button--dark:not(:disabled):not(.is-disabled):hover:active { color: var(--button-dark-active-font-color); background: var(--button-dark-active-bg-color); border-color: var(--button-dark-active-top-border-color) var(--button-dark-active-right-border-color) var(--button-dark-active-bottom-border-color) var(--button-dark-active-left-border-color); border-width: var(--button-dark-active-top-border-width) var(--button-dark-active-right-border-width) var(--button-dark-active-bottom-border-width) var(--button-dark-active-left-border-width); border-style: var(--button-dark-active-top-border-style) var(--button-dark-active-right-border-style) var(--button-dark-active-bottom-border-style) var(--button-dark-active-left-border-style); box-shadow: var(--button-dark-active-shadow); } .cxd-Button--dark:not(:disabled):not(.is-disabled).active, .cxd-Button--dark:not(:disabled):not(.is-disabled).is-active { color: var(--button-dark-active-font-color); background: var(--button-dark-active-bg-color); border-color: var(--button-dark-active-top-border-color) var(--button-dark-active-right-border-color) var(--button-dark-active-bottom-border-color) var(--button-dark-active-left-border-color); border-width: var(--button-dark-active-top-border-width) var(--button-dark-active-right-border-width) var(--button-dark-active-bottom-border-width) var(--button-dark-active-left-border-width); border-style: var(--button-dark-active-top-border-style) var(--button-dark-active-right-border-style) var(--button-dark-active-bottom-border-style) var(--button-dark-active-left-border-style); box-shadow: var(--button-dark-active-shadow); } .cxd-Button--dark:disabled, .cxd-Button--dark.is-disabled { color: var(--button-dark-disabled-font-color); background: var(--button-dark-disabled-bg-color); border-color: var(--button-dark-disabled-top-border-color) var(--button-dark-disabled-right-border-color) var(--button-dark-disabled-bottom-border-color) var(--button-dark-disabled-left-border-color); border-width: var(--button-dark-disabled-top-border-width) var(--button-dark-disabled-right-border-width) var(--button-dark-disabled-bottom-border-width) var(--button-dark-disabled-left-border-width); border-style: var(--button-dark-disabled-top-border-style) var(--button-dark-disabled-right-border-style) var(--button-dark-disabled-bottom-border-style) var(--button-dark-disabled-left-border-style); box-shadow: var(--button-dark-disabled-shadow); } .cxd-Button--default { color: var(--button-default-default-font-color); background: var(--button-default-default-bg-color); border-color: var(--button-default-default-top-border-color) var(--button-default-default-right-border-color) var(--button-default-default-bottom-border-color) var(--button-default-default-left-border-color); border-width: var(--button-default-default-top-border-width) var(--button-default-default-right-border-width) var(--button-default-default-bottom-border-width) var(--button-default-default-left-border-width); border-style: var(--button-default-default-top-border-style) var(--button-default-default-right-border-style) var(--button-default-default-bottom-border-style) var(--button-default-default-left-border-style); box-shadow: var(--button-default-default-shadow); } .cxd-Button--default:not(:disabled):not(.is-disabled):hover { color: var(--button-default-hover-font-color); background: var(--button-default-hover-bg-color); border-color: var(--button-default-hover-top-border-color) var(--button-default-hover-right-border-color) var(--button-default-hover-bottom-border-color) var(--button-default-hover-left-border-color); border-width: var(--button-default-hover-top-border-width) var(--button-default-hover-right-border-width) var(--button-default-hover-bottom-border-width) var(--button-default-hover-left-border-width); border-style: var(--button-default-hover-top-border-style) var(--button-default-hover-right-border-style) var(--button-default-hover-bottom-border-style) var(--button-default-hover-left-border-style); box-shadow: var(--button-default-hover-shadow); } .cxd-Button--default:not(:disabled):not(.is-disabled).hover { color: var(--button-default-hover-font-color); background: var(--button-default-hover-bg-color); border-color: var(--button-default-hover-top-border-color) var(--button-default-hover-right-border-color) var(--button-default-hover-bottom-border-color) var(--button-default-hover-left-border-color); border-width: var(--button-default-hover-top-border-width) var(--button-default-hover-right-border-width) var(--button-default-hover-bottom-border-width) var(--button-default-hover-left-border-width); border-style: var(--button-default-hover-top-border-style) var(--button-default-hover-right-border-style) var(--button-default-hover-bottom-border-style) var(--button-default-hover-left-border-style); box-shadow: var(--button-default-hover-shadow); } .cxd-Button--default:not(:disabled):not(.is-disabled):hover:active { color: var(--button-default-active-font-color); background: var(--button-default-active-bg-color); border-color: var(--button-default-active-top-border-color) var(--button-default-active-right-border-color) var(--button-default-active-bottom-border-color) var(--button-default-active-left-border-color); border-width: var(--button-default-active-top-border-width) var(--button-default-active-right-border-width) var(--button-default-active-bottom-border-width) var(--button-default-active-left-border-width); border-style: var(--button-default-active-top-border-style) var(--button-default-active-right-border-style) var(--button-default-active-bottom-border-style) var(--button-default-active-left-border-style); box-shadow: var(--button-default-active-shadow); } .cxd-Button--default:not(:disabled):not(.is-disabled).active, .cxd-Button--default:not(:disabled):not(.is-disabled).is-active { color: var(--button-default-active-font-color); background: var(--button-default-active-bg-color); border-color: var(--button-default-active-top-border-color) var(--button-default-active-right-border-color) var(--button-default-active-bottom-border-color) var(--button-default-active-left-border-color); border-width: var(--button-default-active-top-border-width) var(--button-default-active-right-border-width) var(--button-default-active-bottom-border-width) var(--button-default-active-left-border-width); border-style: var(--button-default-active-top-border-style) var(--button-default-active-right-border-style) var(--button-default-active-bottom-border-style) var(--button-default-active-left-border-style); box-shadow: var(--button-default-active-shadow); } .cxd-Button--default:disabled, .cxd-Button--default.is-disabled { color: var(--button-default-disabled-font-color); background: var(--button-default-disabled-bg-color); border-color: var(--button-default-disabled-top-border-color) var(--button-default-disabled-right-border-color) var(--button-default-disabled-bottom-border-color) var(--button-default-disabled-left-border-color); border-width: var(--button-default-disabled-top-border-width) var(--button-default-disabled-right-border-width) var(--button-default-disabled-bottom-border-width) var(--button-default-disabled-left-border-width); border-style: var(--button-default-disabled-top-border-style) var(--button-default-disabled-right-border-style) var(--button-default-disabled-bottom-border-style) var(--button-default-disabled-left-border-style); box-shadow: var(--button-default-disabled-shadow); } .cxd-Button--size-default { font-size: var(--button-size-default-fontSize); font-weight: var(--button-size-default-fontWeight); line-height: var(--button-size-default-lineHeight); border-radius: var(--button-size-default-top-left-border-radius) var(--button-size-default-top-right-border-radius) var(--button-size-default-bottom-right-border-radius) var(--button-size-default-bottom-left-border-radius); height: var(--button-size-default-height); padding: var(--button-size-default-paddingTop) var(--button-size-default-paddingRight) var(--button-size-default-paddingBottom) var(--button-size-default-paddingLeft); margin: var(--button-size-default-marginTop) var(--button-size-default-marginRight) var(--button-size-default-marginBottom) var(--button-size-default-marginLeft); } .cxd-Button--size-default .cxd-Button-icon:first-child:not(:last-child):not(.pull-right), .cxd-Button--size-default > svg.icon:not(:last-child):not(.pull-right), .cxd-Button--size-default > .pull-left { margin-right: var(--button-size-default-icon-margin); font-size: var(--button-size-default-icon-size); width: var(--button-size-default-icon-size); height: var(--button-size-default-icon-size); line-height: var(--button-size-default-icon-size); } .cxd-Button--size-default .cxd-Button-icon:last-child:not(:first-child):not(.pull-left), .cxd-Button--size-default > .pull-right { font-size: var(--button-size-default-icon-size); margin-left: var(--button-size-default-icon-margin); width: var(--button-size-default-icon-size); height: var(--button-size-default-icon-size); line-height: var(--button-size-default-icon-size); } .cxd-Button--size-default .cxd-Button--loading:first-child:not(:last-child):not(.pull-right), .cxd-Button--size-default > svg.icon:not(:last-child):not(.pull-right), .cxd-Button--size-default > .pull-left { font-size: var(--button-size-default-icon-size); margin-right: var(--button-size-default-icon-margin); width: var(--button-size-default-icon-size); height: var(--button-size-default-icon-size); line-height: var(--button-size-default-icon-size); } .cxd-Button--size-default .cxd-Button--loading:last-child:not(:first-child):not(.pull-left), .cxd-Button--size-default > .pull-right { font-size: var(--button-size-default-icon-size); margin-left: var(--button-size-default-icon-margin); width: var(--button-size-default-icon-size); height: var(--button-size-default-icon-size); line-height: var(--button-size-default-icon-size); } .cxd-Button--size-default.cxd-Button--iconOnly { min-width: var(--button-size-default-height); padding: 0; } .cxd-Button--size-default.cxd-Button--iconOnly:not(.cxd-Button--link) > svg.icon { width: var(--button-size-default-icon-size); height: var(--button-size-default-icon-size); } .cxd-Button--size-default.cxd-Button--iconOnly:not(.cxd-Button--link) > .fa, .cxd-Button--size-default.cxd-Button--iconOnly:not(.cxd-Button--link) > .iconfont { font-size: var(--button-size-default-icon-size); } .cxd-Button--size-default.cxd-Button--iconOnly:not(.cxd-Button--link) > .iconfont { line-height: 1; } .cxd-Button--size-default img.cxd-Button-icon { height: var(--button-size-default-icon-size); vertical-align: middle; } .cxd-Button--size-xs { font-size: var(--button-size-xs-fontSize); font-weight: var(--button-size-xs-fontWeight); line-height: var(--button-size-xs-lineHeight); border-radius: var(--button-size-xs-top-left-border-radius) var(--button-size-xs-top-right-border-radius) var(--button-size-xs-bottom-right-border-radius) var(--button-size-xs-bottom-left-border-radius); height: var(--button-size-xs-height); padding: var(--button-size-xs-paddingTop) var(--button-size-xs-paddingRight) var(--button-size-xs-paddingBottom) var(--button-size-xs-paddingLeft); margin: var(--button-size-xs-marginTop) var(--button-size-xs-marginRight) var(--button-size-xs-marginBottom) var(--button-size-xs-marginLeft); } .cxd-Button--size-xs .cxd-Button-icon:first-child:not(:last-child):not(.pull-right), .cxd-Button--size-xs > svg.icon:not(:last-child):not(.pull-right), .cxd-Button--size-xs > .pull-left { margin-right: var(--button-size-xs-icon-margin); font-size: var(--button-size-xs-icon-size); width: var(--button-size-xs-icon-size); height: var(--button-size-xs-icon-size); line-height: var(--button-size-xs-icon-size); } .cxd-Button--size-xs .cxd-Button-icon:last-child:not(:first-child):not(.pull-left), .cxd-Button--size-xs > .pull-right { font-size: var(--button-size-xs-icon-size); margin-left: var(--button-size-xs-icon-margin); width: var(--button-size-xs-icon-size); height: var(--button-size-xs-icon-size); line-height: var(--button-size-xs-icon-size); } .cxd-Button--size-xs .cxd-Button--loading:first-child:not(:last-child):not(.pull-right), .cxd-Button--size-xs > svg.icon:not(:last-child):not(.pull-right), .cxd-Button--size-xs > .pull-left { font-size: var(--button-size-xs-icon-size); margin-right: var(--button-size-xs-icon-margin); width: var(--button-size-xs-icon-size); height: var(--button-size-xs-icon-size); line-height: var(--button-size-xs-icon-size); } .cxd-Button--size-xs .cxd-Button--loading:last-child:not(:first-child):not(.pull-left), .cxd-Button--size-xs > .pull-right { font-size: var(--button-size-xs-icon-size); margin-left: var(--button-size-xs-icon-margin); width: var(--button-size-xs-icon-size); height: var(--button-size-xs-icon-size); line-height: var(--button-size-xs-icon-size); } .cxd-Button--size-xs.cxd-Button--iconOnly { min-width: var(--button-size-xs-height); padding: 0; } .cxd-Button--size-xs.cxd-Button--iconOnly:not(.cxd-Button--link) > svg.icon { width: var(--button-size-xs-icon-size); height: var(--button-size-xs-icon-size); } .cxd-Button--size-xs.cxd-Button--iconOnly:not(.cxd-Button--link) > .fa, .cxd-Button--size-xs.cxd-Button--iconOnly:not(.cxd-Button--link) > .iconfont { font-size: var(--button-size-xs-icon-size); } .cxd-Button--size-xs.cxd-Button--iconOnly:not(.cxd-Button--link) > .iconfont { line-height: 1; } .cxd-Button--size-xs img.cxd-Button-icon { height: var(--button-size-xs-icon-size); vertical-align: middle; } .cxd-Button--size-sm { font-size: var(--button-size-sm-fontSize); font-weight: var(--button-size-sm-fontWeight); line-height: var(--button-size-sm-lineHeight); border-radius: var(--button-size-sm-top-left-border-radius) var(--button-size-sm-top-right-border-radius) var(--button-size-sm-bottom-right-border-radius) var(--button-size-sm-bottom-left-border-radius); height: var(--button-size-sm-height); padding: var(--button-size-sm-paddingTop) var(--button-size-sm-paddingRight) var(--button-size-sm-paddingBottom) var(--button-size-sm-paddingLeft); margin: var(--button-size-sm-marginTop) var(--button-size-sm-marginRight) var(--button-size-sm-marginBottom) var(--button-size-sm-marginLeft); } .cxd-Button--size-sm .cxd-Button-icon:first-child:not(:last-child):not(.pull-right), .cxd-Button--size-sm > svg.icon:not(:last-child):not(.pull-right), .cxd-Button--size-sm > .pull-left { margin-right: var(--button-size-sm-icon-margin); font-size: var(--button-size-sm-icon-size); width: var(--button-size-sm-icon-size); height: var(--button-size-sm-icon-size); line-height: var(--button-size-sm-icon-size); } .cxd-Button--size-sm .cxd-Button-icon:last-child:not(:first-child):not(.pull-left), .cxd-Button--size-sm > .pull-right { font-size: var(--button-size-sm-icon-size); margin-left: var(--button-size-sm-icon-margin); width: var(--button-size-sm-icon-size); height: var(--button-size-sm-icon-size); line-height: var(--button-size-sm-icon-size); } .cxd-Button--size-sm .cxd-Button--loading:first-child:not(:last-child):not(.pull-right), .cxd-Button--size-sm > svg.icon:not(:last-child):not(.pull-right), .cxd-Button--size-sm > .pull-left { font-size: var(--button-size-sm-icon-size); margin-right: var(--button-size-sm-icon-margin); width: var(--button-size-sm-icon-size); height: var(--button-size-sm-icon-size); line-height: var(--button-size-sm-icon-size); } .cxd-Button--size-sm .cxd-Button--loading:last-child:not(:first-child):not(.pull-left), .cxd-Button--size-sm > .pull-right { font-size: var(--button-size-sm-icon-size); margin-left: var(--button-size-sm-icon-margin); width: var(--button-size-sm-icon-size); height: var(--button-size-sm-icon-size); line-height: var(--button-size-sm-icon-size); } .cxd-Button--size-sm.cxd-Button--iconOnly { min-width: var(--button-size-sm-height); padding: 0; } .cxd-Button--size-sm.cxd-Button--iconOnly:not(.cxd-Button--link) > svg.icon { width: var(--button-size-sm-icon-size); height: var(--button-size-sm-icon-size); } .cxd-Button--size-sm.cxd-Button--iconOnly:not(.cxd-Button--link) > .fa, .cxd-Button--size-sm.cxd-Button--iconOnly:not(.cxd-Button--link) > .iconfont { font-size: var(--button-size-sm-icon-size); } .cxd-Button--size-sm.cxd-Button--iconOnly:not(.cxd-Button--link) > .iconfont { line-height: 1; } .cxd-Button--size-sm img.cxd-Button-icon { height: var(--button-size-sm-icon-size); vertical-align: middle; } .cxd-Button--size-md { font-size: var(--button-size-md-fontSize); font-weight: var(--button-size-md-fontWeight); line-height: var(--button-size-md-lineHeight); border-radius: var(--button-size-md-top-left-border-radius) var(--button-size-md-top-right-border-radius) var(--button-size-md-bottom-right-border-radius) var(--button-size-md-bottom-left-border-radius); height: var(--button-size-md-height); padding: var(--button-size-md-paddingTop) var(--button-size-md-paddingRight) var(--button-size-md-paddingBottom) var(--button-size-md-paddingLeft); margin: var(--button-size-md-marginTop) var(--button-size-md-marginRight) var(--button-size-md-marginBottom) var(--button-size-md-marginLeft); } .cxd-Button--size-md .cxd-Button-icon:first-child:not(:last-child):not(.pull-right), .cxd-Button--size-md > svg.icon:not(:last-child):not(.pull-right), .cxd-Button--size-md > .pull-left { margin-right: var(--button-size-md-icon-margin); font-size: var(--button-size-md-icon-size); width: var(--button-size-md-icon-size); height: var(--button-size-md-icon-size); line-height: var(--button-size-md-icon-size); } .cxd-Button--size-md .cxd-Button-icon:last-child:not(:first-child):not(.pull-left), .cxd-Button--size-md > .pull-right { font-size: var(--button-size-md-icon-size); margin-left: var(--button-size-md-icon-margin); width: var(--button-size-md-icon-size); height: var(--button-size-md-icon-size); line-height: var(--button-size-md-icon-size); } .cxd-Button--size-md .cxd-Button--loading:first-child:not(:last-child):not(.pull-right), .cxd-Button--size-md > svg.icon:not(:last-child):not(.pull-right), .cxd-Button--size-md > .pull-left { font-size: var(--button-size-md-icon-size); margin-right: var(--button-size-md-icon-margin); width: var(--button-size-md-icon-size); height: var(--button-size-md-icon-size); line-height: var(--button-size-md-icon-size); } .cxd-Button--size-md .cxd-Button--loading:last-child:not(:first-child):not(.pull-left), .cxd-Button--size-md > .pull-right { font-size: var(--button-size-md-icon-size); margin-left: var(--button-size-md-icon-margin); width: var(--button-size-md-icon-size); height: var(--button-size-md-icon-size); line-height: var(--button-size-md-icon-size); } .cxd-Button--size-md.cxd-Button--iconOnly { min-width: var(--button-size-md-height); padding: 0; } .cxd-Button--size-md.cxd-Button--iconOnly:not(.cxd-Button--link) > svg.icon { width: var(--button-size-md-icon-size); height: var(--button-size-md-icon-size); } .cxd-Button--size-md.cxd-Button--iconOnly:not(.cxd-Button--link) > .fa, .cxd-Button--size-md.cxd-Button--iconOnly:not(.cxd-Button--link) > .iconfont { font-size: var(--button-size-md-icon-size); } .cxd-Button--size-md.cxd-Button--iconOnly:not(.cxd-Button--link) > .iconfont { line-height: 1; } .cxd-Button--size-md img.cxd-Button-icon { height: var(--button-size-md-icon-size); vertical-align: middle; } .cxd-Button--size-lg { font-size: var(--button-size-lg-fontSize); font-weight: var(--button-size-lg-fontWeight); line-height: var(--button-size-lg-lineHeight); border-radius: var(--button-size-lg-top-left-border-radius) var(--button-size-lg-top-right-border-radius) var(--button-size-lg-bottom-right-border-radius) var(--button-size-lg-bottom-left-border-radius); height: var(--button-size-lg-height); padding: var(--button-size-lg-paddingTop) var(--button-size-lg-paddingRight) var(--button-size-lg-paddingBottom) var(--button-size-lg-paddingLeft); margin: var(--button-size-lg-marginTop) var(--button-size-lg-marginRight) var(--button-size-lg-marginBottom) var(--button-size-lg-marginLeft); } .cxd-Button--size-lg .cxd-Button-icon:first-child:not(:last-child):not(.pull-right), .cxd-Button--size-lg > svg.icon:not(:last-child):not(.pull-right), .cxd-Button--size-lg > .pull-left { margin-right: var(--button-size-lg-icon-margin); font-size: var(--button-size-lg-icon-size); width: var(--button-size-lg-icon-size); height: var(--button-size-lg-icon-size); line-height: var(--button-size-lg-icon-size); } .cxd-Button--size-lg .cxd-Button-icon:last-child:not(:first-child):not(.pull-left), .cxd-Button--size-lg > .pull-right { font-size: var(--button-size-lg-icon-size); margin-left: var(--button-size-lg-icon-margin); width: var(--button-size-lg-icon-size); height: var(--button-size-lg-icon-size); line-height: var(--button-size-lg-icon-size); } .cxd-Button--size-lg .cxd-Button--loading:first-child:not(:last-child):not(.pull-right), .cxd-Button--size-lg > svg.icon:not(:last-child):not(.pull-right), .cxd-Button--size-lg > .pull-left { font-size: var(--button-size-lg-icon-size); margin-right: var(--button-size-lg-icon-margin); width: var(--button-size-lg-icon-size); height: var(--button-size-lg-icon-size); line-height: var(--button-size-lg-icon-size); } .cxd-Button--size-lg .cxd-Button--loading:last-child:not(:first-child):not(.pull-left), .cxd-Button--size-lg > .pull-right { font-size: var(--button-size-lg-icon-size); margin-left: var(--button-size-lg-icon-margin); width: var(--button-size-lg-icon-size); height: var(--button-size-lg-icon-size); line-height: var(--button-size-lg-icon-size); } .cxd-Button--size-lg.cxd-Button--iconOnly { min-width: var(--button-size-lg-height); padding: 0; } .cxd-Button--size-lg.cxd-Button--iconOnly:not(.cxd-Button--link) > svg.icon { width: var(--button-size-lg-icon-size); height: var(--button-size-lg-icon-size); } .cxd-Button--size-lg.cxd-Button--iconOnly:not(.cxd-Button--link) > .fa, .cxd-Button--size-lg.cxd-Button--iconOnly:not(.cxd-Button--link) > .iconfont { font-size: var(--button-size-lg-icon-size); } .cxd-Button--size-lg.cxd-Button--iconOnly:not(.cxd-Button--link) > .iconfont { line-height: 1; } .cxd-Button--size-lg img.cxd-Button-icon { height: var(--button-size-lg-icon-size); vertical-align: middle; } .cxd-Button:hover:focus { text-decoration: none; } .cxd-Button:focus, .cxd-Button.focus { outline: 0; box-shadow: var(--Button-onFocus-boxShadow); } .cxd-Button.is-disabled, .cxd-Button:disabled { box-shadow: none; cursor: not-allowed; } .cxd-Button.is-disabled > svg, .cxd-Button.is-disabled > svg path, .cxd-Button:disabled > svg, .cxd-Button:disabled > svg path { fill: currentColor; } .cxd-Button:not(:disabled):not(.is-disabled) { cursor: pointer; } .cxd-Button--link { color: var(--button-link-default-font-color); background: var(--button-link-default-bg-color); border-color: var(--button-link-default-top-border-color) var(--button-link-default-right-border-color) var(--button-link-default-bottom-border-color) var(--button-link-default-left-border-color); border-width: var(--button-link-default-top-border-width) var(--button-link-default-right-border-width) var(--button-link-default-bottom-border-width) var(--button-link-default-left-border-width); border-style: var(--button-link-default-top-border-style) var(--button-link-default-right-border-style) var(--button-link-default-bottom-border-style) var(--button-link-default-left-border-style); box-shadow: var(--button-link-default-shadow); } .cxd-Button--link:not(:disabled):not(.is-disabled):hover { color: var(--button-link-hover-font-color); background: var(--button-link-hover-bg-color); border-color: var(--button-link-hover-top-border-color) var(--button-link-hover-right-border-color) var(--button-link-hover-bottom-border-color) var(--button-link-hover-left-border-color); border-width: var(--button-link-hover-top-border-width) var(--button-link-hover-right-border-width) var(--button-link-hover-bottom-border-width) var(--button-link-hover-left-border-width); border-style: var(--button-link-hover-top-border-style) var(--button-link-hover-right-border-style) var(--button-link-hover-bottom-border-style) var(--button-link-hover-left-border-style); box-shadow: var(--button-link-hover-shadow); } .cxd-Button--link:not(:disabled):not(.is-disabled).hover { color: var(--button-link-hover-font-color); background: var(--button-link-hover-bg-color); border-color: var(--button-link-hover-top-border-color) var(--button-link-hover-right-border-color) var(--button-link-hover-bottom-border-color) var(--button-link-hover-left-border-color); border-width: var(--button-link-hover-top-border-width) var(--button-link-hover-right-border-width) var(--button-link-hover-bottom-border-width) var(--button-link-hover-left-border-width); border-style: var(--button-link-hover-top-border-style) var(--button-link-hover-right-border-style) var(--button-link-hover-bottom-border-style) var(--button-link-hover-left-border-style); box-shadow: var(--button-link-hover-shadow); } .cxd-Button--link:not(:disabled):not(.is-disabled):hover:active { color: var(--button-link-active-font-color); background: var(--button-link-active-bg-color); border-color: var(--button-link-active-top-border-color) var(--button-link-active-right-border-color) var(--button-link-active-bottom-border-color) var(--button-link-active-left-border-color); border-width: var(--button-link-active-top-border-width) var(--button-link-active-right-border-width) var(--button-link-active-bottom-border-width) var(--button-link-active-left-border-width); border-style: var(--button-link-active-top-border-style) var(--button-link-active-right-border-style) var(--button-link-active-bottom-border-style) var(--button-link-active-left-border-style); box-shadow: var(--button-link-active-shadow); } .cxd-Button--link:not(:disabled):not(.is-disabled).active, .cxd-Button--link:not(:disabled):not(.is-disabled).is-active { color: var(--button-link-active-font-color); background: var(--button-link-active-bg-color); border-color: var(--button-link-active-top-border-color) var(--button-link-active-right-border-color) var(--button-link-active-bottom-border-color) var(--button-link-active-left-border-color); border-width: var(--button-link-active-top-border-width) var(--button-link-active-right-border-width) var(--button-link-active-bottom-border-width) var(--button-link-active-left-border-width); border-style: var(--button-link-active-top-border-style) var(--button-link-active-right-border-style) var(--button-link-active-bottom-border-style) var(--button-link-active-left-border-style); box-shadow: var(--button-link-active-shadow); } .cxd-Button--link:disabled, .cxd-Button--link.is-disabled { color: var(--button-link-disabled-font-color); background: var(--button-link-disabled-bg-color); border-color: var(--button-link-disabled-top-border-color) var(--button-link-disabled-right-border-color) var(--button-link-disabled-bottom-border-color) var(--button-link-disabled-left-border-color); border-width: var(--button-link-disabled-top-border-width) var(--button-link-disabled-right-border-width) var(--button-link-disabled-bottom-border-width) var(--button-link-disabled-left-border-width); border-style: var(--button-link-disabled-top-border-style) var(--button-link-disabled-right-border-style) var(--button-link-disabled-bottom-border-style) var(--button-link-disabled-left-border-style); box-shadow: var(--button-link-disabled-shadow); } .cxd-Button--block { display: block; width: 100%; } .cxd-Button--block + .cxd-Button--block { margin-top: var(--gap-base); } .cxd-Button > .pull-left, .cxd-Button > .pull-right { line-height: inherit; } .cxd-Button > .fa, .cxd-Button > .iconfont, .cxd-Button > .glyphicon { font-size: inherit; } a.cxd-Button.is-disabled, fieldset:disabled a.cxd-Button { pointer-events: none; } .cxd-Button--loading { transition: --Button-transition; } .cxd-Button--loading svg { animation: var(--Button-animation-spin); } input[type=submit].cxd-Button--block, input[type=reset].cxd-Button--block, input[type=button].cxd-Button--block { width: 100%; } .cxd-ButtonToolbar { margin-left: calc(var(--gap-xs) * -1); margin-top: calc(var(--gap-xs) * -1); } .cxd-ButtonToolbar > .cxd-Button { margin-left: var(--gap-xs); margin-top: var(--gap-xs); } .cxd-Action { display: inline-block; } .cxd-Action:hover { cursor: pointer; } .cxd-Avatar { background: var(--Avatar-bg); width: var(--Avatar-size-default); height: var(--Avatar-size-default); line-height: var(--Avatar-size-default); position: relative; display: inline-block; overflow: hidden; flex-shrink: 0; border-radius: 50%; text-align: center; } .cxd-Avatar i { font-size: var(--Avatar-icon-size-default); } .cxd-Avatar--lg { width: var(--Avatar-size-large); height: var(--Avatar-size-large); line-height: var(--Avatar-size-large); } .cxd-Avatar--lg i { font-size: var(--Avatar-icon-size-large); } .cxd-Avatar--sm { width: var(--Avatar-size-small); height: var(--Avatar-size-small); line-height: var(--Avatar-size-small); } .cxd-Avatar--sm i { font-size: var(--Avatar-icon-size-small); } .cxd-Avatar--text { position: absolute; left: 50%; transform-origin: 0 center; } .cxd-Avatar--square { border-radius: 0%; } .cxd-Avatar--rounded { border-radius: 10%; } .cxd-Avatar img { width: 100%; height: 100%; } .cxd-Avatar:hover img, .cxd-Avatar:hover i { transform: scale(1.1); } .cxd-Breadcrumb { font-size: var(--Breadcrumb-item-fontSize); font-weight: var(--fontWeightBase); color: var(--Breadcrumb-item-default-color); } .cxd-Breadcrumb-icon { margin-right: 0.125rem; min-width: var(--gap-xs); } .cxd-Breadcrumb-item { position: relative; display: inline-flex; align-items: center; } .cxd-Breadcrumb-item-default { cursor: pointer; color: var(--Breadcrumb-item-default-color); } .cxd-Breadcrumb-item-default:hover { color: var(--Breadcrumb-item-hover-color); } .cxd-Breadcrumb-item-default:active { color: var(--Breadcrumb-item-active-color); } .cxd-Breadcrumb-item-dropdown { cursor: pointer; color: var(--BreadcrumbDropdown-item-default-color); } .cxd-Breadcrumb-item a:hover { color: var(--Breadcrumb-item-hover-color); } .cxd-Breadcrumb-item a:active { color: var(--Breadcrumb-item-active-color); } .cxd-Breadcrumb-item-last .cxd-Breadcrumb-item-default { font-weight: var(--fontWeightMd); color: var(--Breadcrumb-item-last-color); } .cxd-Breadcrumb-item-caret { height: 16px; margin: 0 2px; cursor: pointer; display: inline-block; transition: transform var(--animation-duration) ease; } .cxd-Breadcrumb-item-caret > svg { width: 0.625rem; height: 0.625rem; top: -0.125rem; } .cxd-Breadcrumb-item.is-opened .cxd-Breadcrumb-item-caret { transform: translateY(0.125rem) rotate(180deg); color: var(--Breadcrumb-item-hover-color); } .cxd-Breadcrumb-item.is-opened .cxd-Breadcrumb-item-default { color: var(--Breadcrumb-item-hover-color); } .cxd-Breadcrumb-separator { -webkit-user-select: none; -moz-user-select: none; user-select: none; margin: 0 var(--gap-sm); text-align: center; min-width: var(--gap-xs); } .cxd-Breadcrumb-dropdown { position: absolute; z-index: 1000; top: 100%; left: 0; margin: 0.0625rem 0; background: var(--DropDown-menu-bg); list-style: none; padding: var(--DropDown-menu-paddingY) var(--DropDown-menu-paddingX); border: var(--DropDown-menu-borderWidth) solid var(--DropDown-menu-borderColor); border-radius: var(--DropDown-menu-borderRadius); box-shadow: var(--DropDown-menu-boxShadow); min-width: 100%; text-align: left; font-size: var(--BreadcrumbDropdown-item-fontSize); } .cxd-Breadcrumb-dropdown > li { padding: var(--BreadcrumbDropdown-item-paddingX) var(--BreadcrumbDropdown-item-paddingY); white-space: nowrap; box-sizing: border-box; padding-left: 0.75rem; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; user-select: none; color: var(--BreadcrumbDropdown-item-default-color); background-color: var(--BreadcrumbDropdown-item-default-bg); } .cxd-Breadcrumb-dropdown > li:hover { background: var(--BreadcrumbDropdown-item-hover-bg); } .cxd-Breadcrumb-dropdown > li:hover a { color: var(--Breadcrumb-item-hover-color); } .cxd-Badge { display: inline-block; position: relative; } .cxd-Badge-text, .cxd-Badge-dot, .cxd-Badge-ribbon { background: var(--danger); position: absolute; top: 0; right: 0; transform: translate(50%, -50%); transform-origin: 100% 0; z-index: auto; border-radius: calc(var(--Badge-size) / 2); } .cxd-Badge--top-left { top: 0; left: 0; right: auto; transform: translate(-50%, -50%); } .cxd-Badge--bottom-left { top: auto; bottom: 0; left: 0; right: auto; transform: translate(-50%, 50%); } .cxd-Badge--bottom-right { top: auto; bottom: 0; left: auto; right: 0; transform: translate(50%, 50%); } .cxd-Badge--danger { background: var(--Badge--danger-bg); } .cxd-Badge--info { background: var(--Badge--info-bg); } .cxd-Badge--success { background: var(--Badge--success-bg); } .cxd-Badge--warning { background: var(--Badge--warning-bg); } .cxd-Badge-text { color: var(--Badge-color); height: var(--Badge-size); line-height: var(--Badge-size); white-space: nowrap; text-align: center; padding: 0 6px; border: 1px solid #ffffff; } .cxd-Badge-dot { z-index: auto; width: var(--Badge-size); height: var(--Badge-size); border-radius: 50%; } .cxd-Badge-ribbon-out { overflow: hidden; position: absolute; bottom: 0; right: 0; } .cxd-Badge-ribbon { color: var(--Badge-color); height: var(--Badge-size); line-height: var(--Badge-size); transform: translateX(calc(50% - 5px)) rotate(45deg) scale(0.7); transform-origin: 50% 0; border-radius: 0; text-align: center; width: 62.5rem; top: 5px; } .cxd-Badge-ribbon-out--top-left, .cxd-Badge-ribbon-out--top-right { top: 0; } .cxd-Badge-ribbon-out--top-left, .cxd-Badge-ribbon-out--bottom-left { left: 0; right: auto; } .cxd-Badge-ribbon--top-left { transform: translateX(calc(-50% + 5px)) rotate(-45deg) scale(0.7); left: 0; right: auto; } .cxd-Badge-ribbon--bottom-left, .cxd-Badge-ribbon-out--bottom--left { transform: translateX(calc(-50% + 5px)) rotate(45deg) scale(0.7); transform-origin: 50% 100%; left: 0; right: auto; bottom: 5px; top: auto; } .cxd-Badge-ribbon--bottom-right, .cxd-Badge-ribbon-out--bottom--right { transform: translateX(calc(50% - 5px)) rotate(-45deg) scale(0.7); transform-origin: 50% 100%; left: auto; right: 0; bottom: 5px; top: auto; } @keyframes badgeDotAnimation { 0% { transform: scale(0.8); opacity: 0.4; } to { transform: scale(3.2); opacity: 0; } } .is-modalOpened { overflow: hidden; } .is-modalOpened .cxd-Modal { overflow-x: hidden; overflow-y: auto; } @keyframes modalIn { from { opacity: 0; transform: translate3d(0, -300px, 0) scale(0.2); } } @keyframes modalOut { to { opacity: 0; transform: translate3d(0, -300px, 0) scale(0.2); } } .cxd-Modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1400; overflow: hidden; outline: 0; } .cxd-Modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background: var(--Modal-bg); background-clip: padding-box; outline: 0; z-index: 2; margin-left: auto; margin-right: auto; margin-top: var(--Modal-content-startMarginTop); margin-bottom: var(--gap-md); padding: var(--dialog-default-padding-y) var(--Modal-body-paddingX); border: var(--Modal-content-borderWidth) solid var(--Modal-content-borderColor); border-radius: var(--dialog-default-border-radius); } .cxd-Modal-content.in, .cxd-Modal-content.out { animation-duration: var(--animation-duration); animation-fill-mode: both; } .cxd-Modal-content.in { animation-name: modalIn; } .cxd-Modal-content.out { animation-name: modalOut; } .cxd-Modal-draggable > .cxd-Modal-header { cursor: move; } .cxd-Modal-overlay { transition: ease-in-out opacity var(--animation-duration); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: var(--Modal-overlay-bg); pointer-events: none; opacity: 0; } .cxd-Modal-overlay.in { opacity: 1; } .cxd-Modal-overlay.out { opacity: 0; } .cxd-Modal-header { padding: var(--Modal-header-paddingY) 1.5rem; background: var(--Modal-header-bg); border-bottom: var(--Modal-body-borderTop); border-top-left-radius: var(--Modal-content-borderRadius); border-top-right-radius: var(--Modal-content-borderRadius); } .cxd-Modal-header::before, .cxd-Modal-header::after { display: table; content: ""; } .cxd-Modal-header::after { clear: both; } .cxd-Modal-title { font-size: var(--dialog-header-fontSize); color: var(--dialog-header-color); font-weight: var(--dialog-header-fontWeight); height: var(--dialog-header-height); } .cxd-Modal-close { float: right; color: var(--Modal-close-color); line-height: inherit; text-decoration: none; vertical-align: middle; z-index: calc(11 + 1); } .cxd-Modal-close .Dialog-close { content: var(--dialog-icon-icon); } .cxd-Modal-close svg { width: var(--dialog-icon-size); height: var(--dialog-icon-size); fill: var(--Modal-close-color); color: var(--dialog-icon-color); } .cxd-Modal-close:not(.is-disabled) { cursor: pointer; } .cxd-Modal-close:not(.is-disabled):hover { text-decoration: none; color: var(--Model-close-onHover-color); } .cxd-Modal-close:not(.is-disabled):hover svg { fill: var(--Model-close-onHover-color); } .cxd-Modal-content > .cxd-Modal-close { position: absolute; right: var(--gap-md); top: var(--gap-sm); z-index: 10; } .cxd-Modal-body { margin: 1rem 0 1.5rem 0; flex-grow: 1; height: auto; padding: 0 1.5rem; font-size: var(--dialog-content-fontSize); color: var(--dialog-content-color); } .cxd-Modal-footer { height: var(--dialog-footer-height); display: flex; align-items: center; justify-content: flex-end; padding: var(--Modal-footer-padding) 1.5rem; border-top: var(--Modal-body-borderBottom); margin: var(--Modal-footer-marginY) var(--Modal-footer-marginX); border-bottom-left-radius: var(--Modal-content-borderRadius); border-bottom-right-radius: var(--Modal-content-borderRadius); } .cxd-Modal-footer .cxd-Button { min-width: var(--Modal-footer-button-width); margin-left: var(--dialog-footer-margin-left); } .cxd-Modal--2th .cxd-Modal-content { margin-top: calc(var(--Modal-content-startMarginTop) + 1 * var(--Modal-content-stepMarginTop)); } .cxd-Modal--3th .cxd-Modal-content { margin-top: calc(var(--Modal-content-startMarginTop) + 2 * var(--Modal-content-stepMarginTop)); } .cxd-Modal--4th .cxd-Modal-content { margin-top: calc(var(--Modal-content-startMarginTop) + 3 * var(--Modal-content-stepMarginTop)); } .cxd-Modal--5th .cxd-Modal-content { margin-top: calc(var(--Modal-content-startMarginTop) + 4 * var(--Modal-content-stepMarginTop)); } .cxd-Modal--6th .cxd-Modal-content { margin-top: calc(var(--Modal-content-startMarginTop) + 5 * var(--Modal-content-stepMarginTop)); } .cxd-Modal--7th .cxd-Modal-content { margin-top: calc(var(--Modal-content-startMarginTop) + 6 * var(--Modal-content-stepMarginTop)); } .cxd-Modal--8th .cxd-Modal-content { margin-top: calc(var(--Modal-content-startMarginTop) + 7 * var(--Modal-content-stepMarginTop)); } .cxd-Modal--9th .cxd-Modal-content { margin-top: calc(var(--Modal-content-startMarginTop) + 8 * var(--Modal-content-stepMarginTop)); } .cxd-Modal--10th .cxd-Modal-content { margin-top: calc(var(--Modal-content-startMarginTop) + 9 * var(--Modal-content-stepMarginTop)); } @media (min-width: 576px) { .cxd-Modal-content:not(.cxd-Modal-content-custom) { max-width: var(--dialog-size-normal-width); } .cxd-Modal--sm .cxd-Modal-content { max-width: var(--dialog-size-sm-width); } .cxd-Modal--base .cxd-Modal-content { max-width: var(--Modal-widthBase); } .cxd-Modal--md .cxd-Modal-content { max-width: var(--Modal-widthMd); } .cxd-Modal--lg .cxd-Modal-content { max-width: var(--dialog-size-lg-width); } .cxd-Modal--xl .cxd-Modal-content { max-width: var(--dialog-size-xl-width); } } .cxd-Dialog-info { flex-basis: 0; flex-grow: 1; text-align: left; } .cxd-Dialog-error { color: var(--danger); white-space: pre-wrap; } .cxd-Modal--full { display: flex; flex-direction: column; justify-content: center; align-items: center; } .cxd-Modal--full > .cxd-Modal-content { flex-basis: 0; flex-grow: 1; margin: 30px; width: calc(100% - 60px); max-width: unset; } .cxd-Modal--full > .cxd-Modal-content > .cxd-Modal-body { height: 0; overflow: auto; } /* 移动端样式调整 */ @media (max-width: 767px) { .cxd-Modal .cxd-Modal-footer { display: flex; } .cxd-Modal .cxd-Modal-footer > .cxd-Button { min-width: 0; min-height: 0; flex: 1; height: 2.75rem; } .cxd-Modal .cxd-Modal-footer > .cxd-Button:first-child { margin-left: 0; } } .cxd-Drawer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1400; overflow: hidden; outline: 0; } .cxd-Drawer-content { position: absolute; display: flex; flex-direction: column; width: 100%; height: 100%; pointer-events: auto; background: var(--Drawer-bg); background-clip: padding-box; outline: 0; z-index: 2; border-radius: var(--Drawer-content-borderRadius); transition: transform ease-in-out var(--animation-duration); } .cxd-Drawer-overlay { transition: ease-out opacity var(--animation-duration); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: var(--Drawer-overlay-bg); opacity: 0; } .cxd-Drawer-overlay.in { opacity: 1; } .cxd-Drawer-header { padding: var(--Drawer-header-padding); background: var(--Drawer-header-bg); border-bottom: var(--Drawer-content-borderWidth) solid var(--Drawer-header-borderColor); border-top-left-radius: var(--Drawer-content-borderRadius); border-top-right-radius: var(--Drawer-content-borderRadius); } .cxd-Drawer-header::before, .cxd-Drawer-header::after { display: table; content: ""; } .cxd-Drawer-header::after { clear: both; } .cxd-Drawer-title { font-size: var(--drawer-header-fontSize); font-weight: var(--drawer-header-fontWeight); color: var(--drawer-header-color); height: var(--drawer-header-height); } .cxd-Drawer-close { position: absolute; color: var(--Drawer-close-color); line-height: 1; text-decoration: none; } .cxd-Drawer-close svg { margin-top: 0.125rem; width: var(--drawer-header-icon-size); height: var(--drawer-header-icon-size); fill: var(--Drawer-close-color); color: var(--drawer-header-icon-color); } .cxd-Drawer-close .Drawer-close { content: var(--drawer-header-icon-icon); } .cxd-Drawer-close:not(.is-disabled) { cursor: pointer; } .cxd-Drawer-close:not(.is-disabled):hover { text-decoration: none; color: var(--Drawer-close-onHover-color); } .cxd-Drawer-close:not(.is-disabled):hover svg { fill: var(--Drawer-close-onHover-color); } .cxd-Drawer-body { padding: 0 var(--drawer-content-paddingRight) var(--drawer-content-paddingBottom) var(--drawer-content-paddingLeft); flex-basis: 0; flex-grow: 1; overflow: auto; } .cxd-Drawer-body:before { content: ""; display: block; height: var(--drawer-content-paddingTop); } .cxd-Drawer-footer { display: flex; align-items: flex-end; height: var(--drawer-footer-height); justify-content: flex-end; padding: var(--Drawer-footer-padding); border-top: var(--Drawer-content-borderWidth) solid var(--Drawer-footer-borderColor); border-bottom-left-radius: var(--Drawer-content-borderRadius); border-bottom-right-radius: var(--Drawer-content-borderRadius); } .cxd-Drawer-footer .cxd-Button { margin-left: var(--gap-xs); } .cxd-Drawer-footer .cxd-Drawer-info { flex-basis: 0; flex-grow: 1; text-align: left; align-self: center; } .cxd-Drawer-footer .cxd-Drawer-error { color: var(--danger); white-space: pre-wrap; } .cxd-Drawer.cxd-Drawer--noOverlay { pointer-events: none; } .cxd-Drawer .cxd-Drawer-resizeCtrl { position: absolute; border: var(--borderWidth) solid var(--borderColor); background: var(--white); border-radius: var(--borderRadius); font-size: var(--fontSizeSm); line-height: 0.625rem; text-align: center; -webkit-user-select: none; -moz-user-select: none; user-select: none; } @media (min-width: 576px) { .cxd-Drawer .cxd-Drawer-content { width: var(--Drawer-widthBase); height: var(--Drawer-widthBase); } .cxd-Drawer--xs .cxd-Drawer-content { width: var(--drawer-size-xs-width); height: var(--Drawer-widthXs); } .cxd-Drawer--sm .cxd-Drawer-content { width: var(--drawer-size-sm-width); height: var(--Drawer-widthSm); } .cxd-Drawer--md .cxd-Drawer-content { width: var(--drawer-size-md-width); height: var(--Drawer-widthMd); } .cxd-Drawer--lg .cxd-Drawer-content { width: var(--drawer-size-lg-width); height: var(--Drawer-widthLg); } .cxd-Drawer--xl .cxd-Drawer-content { width: var(--drawer-size-xl-width); height: var(--Drawer-widthXl); } .cxd-Drawer--right.cxd-Modal--2th.cxd-Drawer .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--2th.cxd-Drawer .cxd-Drawer-content { width: calc(var(--Drawer-widthBase) - 20px); } .cxd-Drawer--right.cxd-Modal--2th.cxd-Drawer--xs .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--2th.cxd-Drawer--xs .cxd-Drawer-content { width: calc(var(--Drawer-widthXs) - 20px); } .cxd-Drawer--right.cxd-Modal--2th.cxd-Drawer--sm .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--2th.cxd-Drawer--sm .cxd-Drawer-content { width: calc(var(--Drawer-widthSm) - 20px); } .cxd-Drawer--right.cxd-Modal--2th.cxd-Drawer--md .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--2th.cxd-Drawer--md .cxd-Drawer-content { width: calc(var(--Drawer-widthMd) - 20px); } .cxd-Drawer--right.cxd-Modal--2th.cxd-Drawer--lg .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--2th.cxd-Drawer--lg .cxd-Drawer-content { width: calc(var(--Drawer-widthLg) - 20px); } .cxd-Drawer--right.cxd-Modal--2th.cxd-Drawer--xl .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--2th.cxd-Drawer--xl .cxd-Drawer-content { width: calc(var(--Drawer-widthXl) - 20px); } .cxd-Drawer--top.cxd-Modal--2th.cxd-Drawer .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--2th.cxd-Drawer .cxd-Drawer-content { height: calc(var(--Drawer-widthBase) - 20px); } .cxd-Drawer--top.cxd-Modal--2th.cxd-Drawer--xs .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--2th.cxd-Drawer--xs .cxd-Drawer-content { height: calc(var(--Drawer-widthXs) - 20px); } .cxd-Drawer--top.cxd-Modal--2th.cxd-Drawer--sm .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--2th.cxd-Drawer--sm .cxd-Drawer-content { height: calc(var(--Drawer-widthSm) - 20px); } .cxd-Drawer--top.cxd-Modal--2th.cxd-Drawer--md .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--2th.cxd-Drawer--md .cxd-Drawer-content { height: calc(var(--Drawer-widthMd) - 20px); } .cxd-Drawer--top.cxd-Modal--2th.cxd-Drawer--lg .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--2th.cxd-Drawer--lg .cxd-Drawer-content { height: calc(var(--Drawer-widthLg) - 20px); } .cxd-Drawer--top.cxd-Modal--2th.cxd-Drawer--xl .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--2th.cxd-Drawer--xl .cxd-Drawer-content { height: calc(var(--Drawer-widthXl) - 20px); } .cxd-Drawer--right.cxd-Modal--3th.cxd-Drawer .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--3th.cxd-Drawer .cxd-Drawer-content { width: calc(var(--Drawer-widthBase) - 40px); } .cxd-Drawer--right.cxd-Modal--3th.cxd-Drawer--xs .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--3th.cxd-Drawer--xs .cxd-Drawer-content { width: calc(var(--Drawer-widthXs) - 40px); } .cxd-Drawer--right.cxd-Modal--3th.cxd-Drawer--sm .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--3th.cxd-Drawer--sm .cxd-Drawer-content { width: calc(var(--Drawer-widthSm) - 40px); } .cxd-Drawer--right.cxd-Modal--3th.cxd-Drawer--md .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--3th.cxd-Drawer--md .cxd-Drawer-content { width: calc(var(--Drawer-widthMd) - 40px); } .cxd-Drawer--right.cxd-Modal--3th.cxd-Drawer--lg .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--3th.cxd-Drawer--lg .cxd-Drawer-content { width: calc(var(--Drawer-widthLg) - 40px); } .cxd-Drawer--right.cxd-Modal--3th.cxd-Drawer--xl .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--3th.cxd-Drawer--xl .cxd-Drawer-content { width: calc(var(--Drawer-widthXl) - 40px); } .cxd-Drawer--top.cxd-Modal--3th.cxd-Drawer .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--3th.cxd-Drawer .cxd-Drawer-content { height: calc(var(--Drawer-widthBase) - 40px); } .cxd-Drawer--top.cxd-Modal--3th.cxd-Drawer--xs .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--3th.cxd-Drawer--xs .cxd-Drawer-content { height: calc(var(--Drawer-widthXs) - 40px); } .cxd-Drawer--top.cxd-Modal--3th.cxd-Drawer--sm .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--3th.cxd-Drawer--sm .cxd-Drawer-content { height: calc(var(--Drawer-widthSm) - 40px); } .cxd-Drawer--top.cxd-Modal--3th.cxd-Drawer--md .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--3th.cxd-Drawer--md .cxd-Drawer-content { height: calc(var(--Drawer-widthMd) - 40px); } .cxd-Drawer--top.cxd-Modal--3th.cxd-Drawer--lg .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--3th.cxd-Drawer--lg .cxd-Drawer-content { height: calc(var(--Drawer-widthLg) - 40px); } .cxd-Drawer--top.cxd-Modal--3th.cxd-Drawer--xl .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--3th.cxd-Drawer--xl .cxd-Drawer-content { height: calc(var(--Drawer-widthXl) - 40px); } .cxd-Drawer--right.cxd-Modal--4th.cxd-Drawer .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--4th.cxd-Drawer .cxd-Drawer-content { width: calc(var(--Drawer-widthBase) - 60px); } .cxd-Drawer--right.cxd-Modal--4th.cxd-Drawer--xs .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--4th.cxd-Drawer--xs .cxd-Drawer-content { width: calc(var(--Drawer-widthXs) - 60px); } .cxd-Drawer--right.cxd-Modal--4th.cxd-Drawer--sm .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--4th.cxd-Drawer--sm .cxd-Drawer-content { width: calc(var(--Drawer-widthSm) - 60px); } .cxd-Drawer--right.cxd-Modal--4th.cxd-Drawer--md .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--4th.cxd-Drawer--md .cxd-Drawer-content { width: calc(var(--Drawer-widthMd) - 60px); } .cxd-Drawer--right.cxd-Modal--4th.cxd-Drawer--lg .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--4th.cxd-Drawer--lg .cxd-Drawer-content { width: calc(var(--Drawer-widthLg) - 60px); } .cxd-Drawer--right.cxd-Modal--4th.cxd-Drawer--xl .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--4th.cxd-Drawer--xl .cxd-Drawer-content { width: calc(var(--Drawer-widthXl) - 60px); } .cxd-Drawer--top.cxd-Modal--4th.cxd-Drawer .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--4th.cxd-Drawer .cxd-Drawer-content { height: calc(var(--Drawer-widthBase) - 60px); } .cxd-Drawer--top.cxd-Modal--4th.cxd-Drawer--xs .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--4th.cxd-Drawer--xs .cxd-Drawer-content { height: calc(var(--Drawer-widthXs) - 60px); } .cxd-Drawer--top.cxd-Modal--4th.cxd-Drawer--sm .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--4th.cxd-Drawer--sm .cxd-Drawer-content { height: calc(var(--Drawer-widthSm) - 60px); } .cxd-Drawer--top.cxd-Modal--4th.cxd-Drawer--md .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--4th.cxd-Drawer--md .cxd-Drawer-content { height: calc(var(--Drawer-widthMd) - 60px); } .cxd-Drawer--top.cxd-Modal--4th.cxd-Drawer--lg .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--4th.cxd-Drawer--lg .cxd-Drawer-content { height: calc(var(--Drawer-widthLg) - 60px); } .cxd-Drawer--top.cxd-Modal--4th.cxd-Drawer--xl .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--4th.cxd-Drawer--xl .cxd-Drawer-content { height: calc(var(--Drawer-widthXl) - 60px); } .cxd-Drawer--right.cxd-Modal--5th.cxd-Drawer .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--5th.cxd-Drawer .cxd-Drawer-content { width: calc(var(--Drawer-widthBase) - 80px); } .cxd-Drawer--right.cxd-Modal--5th.cxd-Drawer--xs .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--5th.cxd-Drawer--xs .cxd-Drawer-content { width: calc(var(--Drawer-widthXs) - 80px); } .cxd-Drawer--right.cxd-Modal--5th.cxd-Drawer--sm .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--5th.cxd-Drawer--sm .cxd-Drawer-content { width: calc(var(--Drawer-widthSm) - 80px); } .cxd-Drawer--right.cxd-Modal--5th.cxd-Drawer--md .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--5th.cxd-Drawer--md .cxd-Drawer-content { width: calc(var(--Drawer-widthMd) - 80px); } .cxd-Drawer--right.cxd-Modal--5th.cxd-Drawer--lg .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--5th.cxd-Drawer--lg .cxd-Drawer-content { width: calc(var(--Drawer-widthLg) - 80px); } .cxd-Drawer--right.cxd-Modal--5th.cxd-Drawer--xl .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--5th.cxd-Drawer--xl .cxd-Drawer-content { width: calc(var(--Drawer-widthXl) - 80px); } .cxd-Drawer--top.cxd-Modal--5th.cxd-Drawer .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--5th.cxd-Drawer .cxd-Drawer-content { height: calc(var(--Drawer-widthBase) - 80px); } .cxd-Drawer--top.cxd-Modal--5th.cxd-Drawer--xs .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--5th.cxd-Drawer--xs .cxd-Drawer-content { height: calc(var(--Drawer-widthXs) - 80px); } .cxd-Drawer--top.cxd-Modal--5th.cxd-Drawer--sm .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--5th.cxd-Drawer--sm .cxd-Drawer-content { height: calc(var(--Drawer-widthSm) - 80px); } .cxd-Drawer--top.cxd-Modal--5th.cxd-Drawer--md .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--5th.cxd-Drawer--md .cxd-Drawer-content { height: calc(var(--Drawer-widthMd) - 80px); } .cxd-Drawer--top.cxd-Modal--5th.cxd-Drawer--lg .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--5th.cxd-Drawer--lg .cxd-Drawer-content { height: calc(var(--Drawer-widthLg) - 80px); } .cxd-Drawer--top.cxd-Modal--5th.cxd-Drawer--xl .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--5th.cxd-Drawer--xl .cxd-Drawer-content { height: calc(var(--Drawer-widthXl) - 80px); } .cxd-Drawer--right.cxd-Modal--6th.cxd-Drawer .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--6th.cxd-Drawer .cxd-Drawer-content { width: calc(var(--Drawer-widthBase) - 100px); } .cxd-Drawer--right.cxd-Modal--6th.cxd-Drawer--xs .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--6th.cxd-Drawer--xs .cxd-Drawer-content { width: calc(var(--Drawer-widthXs) - 100px); } .cxd-Drawer--right.cxd-Modal--6th.cxd-Drawer--sm .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--6th.cxd-Drawer--sm .cxd-Drawer-content { width: calc(var(--Drawer-widthSm) - 100px); } .cxd-Drawer--right.cxd-Modal--6th.cxd-Drawer--md .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--6th.cxd-Drawer--md .cxd-Drawer-content { width: calc(var(--Drawer-widthMd) - 100px); } .cxd-Drawer--right.cxd-Modal--6th.cxd-Drawer--lg .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--6th.cxd-Drawer--lg .cxd-Drawer-content { width: calc(var(--Drawer-widthLg) - 100px); } .cxd-Drawer--right.cxd-Modal--6th.cxd-Drawer--xl .cxd-Drawer-content, .cxd-Drawer--left.cxd-Modal--6th.cxd-Drawer--xl .cxd-Drawer-content { width: calc(var(--Drawer-widthXl) - 100px); } .cxd-Drawer--top.cxd-Modal--6th.cxd-Drawer .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--6th.cxd-Drawer .cxd-Drawer-content { height: calc(var(--Drawer-widthBase) - 100px); } .cxd-Drawer--top.cxd-Modal--6th.cxd-Drawer--xs .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--6th.cxd-Drawer--xs .cxd-Drawer-content { height: calc(var(--Drawer-widthXs) - 100px); } .cxd-Drawer--top.cxd-Modal--6th.cxd-Drawer--sm .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--6th.cxd-Drawer--sm .cxd-Drawer-content { height: calc(var(--Drawer-widthSm) - 100px); } .cxd-Drawer--top.cxd-Modal--6th.cxd-Drawer--md .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--6th.cxd-Drawer--md .cxd-Drawer-content { height: calc(var(--Drawer-widthMd) - 100px); } .cxd-Drawer--top.cxd-Modal--6th.cxd-Drawer--lg .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--6th.cxd-Drawer--lg .cxd-Drawer-content { height: calc(var(--Drawer-widthLg) - 100px); } .cxd-Drawer--top.cxd-Modal--6th.cxd-Drawer--xl .cxd-Drawer-content, .cxd-Drawer--bottom.cxd-Modal--6th.cxd-Drawer--xl .cxd-Drawer-content { height: calc(var(--Drawer-widthXl) - 100px); } } .cxd-Drawer--top .cxd-Drawer-content.in, .cxd-Drawer--right .cxd-Drawer-content.in, .cxd-Drawer--bottom .cxd-Drawer-content.in, .cxd-Drawer--left .cxd-Drawer-content.in { transform: translate3d(0, 0, 0); } .cxd-Drawer--top .cxd-Drawer-close { top: var(--gap-base); right: var(--gap-base); left: auto; margin-top: 0; z-index: 10; } .cxd-Drawer--top .cxd-Drawer-content { top: 0; bottom: auto; left: 0; right: 0; width: 100%; transform: translate3d(0, -100%, 0); box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.2); min-height: 120px; border-bottom: var(--common-popover-border); } .cxd-Drawer--top .cxd-Drawer-resizeCtrl { bottom: -0.375rem; left: 50%; cursor: ns-resize; width: 1.5rem; height: 0.75rem; } .cxd-Drawer--right .cxd-Drawer-close { top: var(--gap-md); right: var(--gap-md); margin-right: 0; z-index: 10; } .cxd-Drawer--right .cxd-Drawer-content { top: 0; bottom: 0; left: auto; right: 0; height: 100%; transform: translate3d(100%, 0, 0); box-shadow: -10px 0 10px -10px rgba(0, 0, 0, 0.2); min-width: 120px; border-left: var(--common-popover-border); } .cxd-Drawer--right .cxd-Drawer-footer { justify-content: flex-end; } .cxd-Drawer--right .cxd-Drawer-footer .cxd-Button { margin-left: var(--drawer-footer-margin-left); margin-right: var(--gap-xs); } .cxd-Drawer--right .cxd-Drawer-footer .cxd-Drawer-info { flex-basis: 0; flex-grow: 1; align-self: center; } .cxd-Drawer--right .cxd-Drawer-footer .cxd-Drawer-error { color: var(--danger); } .cxd-Drawer--right .cxd-Drawer-resizeCtrl { left: -0.375rem; top: 50%; cursor: ew-resize; writing-mode: vertical-lr; width: 0.75rem; height: 1.5rem; } .cxd-Drawer--bottom .cxd-Drawer-close { top: var(--gap-base); right: var(--gap-base); left: auto; margin-bottom: 0; z-index: 10; } .cxd-Drawer--bottom .cxd-Drawer-content { top: auto; bottom: 0; left: 0; right: 0; width: 100%; transform: translate3d(0, 100%, 0); box-shadow: 0 -10px 10px -10px rgba(0, 0, 0, 0.2); min-height: 120px; border-top: var(--common-popover-border); } .cxd-Drawer--bottom .cxd-Drawer-resizeCtrl { top: -0.375rem; left: 50%; cursor: ns-resize; width: 1.5rem; height: 0.75rem; } .cxd-Drawer--left .cxd-Drawer-close { left: auto; right: var(--gap-base); top: var(--gap-base); z-index: 10; } .cxd-Drawer--left .cxd-Drawer-content { top: 0; bottom: 0; right: auto; left: 0; height: 100%; transform: translate3d(-100%, 0, 0); box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.2); border-width: 0 var(--Drawer-content-borderWidth) 0 0; min-width: 120px; border-right: var(--common-popover-border); } .cxd-Drawer--left .cxd-Drawer-resizeCtrl { right: -0.375rem; top: 50%; cursor: ew-resize; writing-mode: vertical-lr; width: 0.75rem; height: 1.5rem; } .cxd-Drawer--left .cxd-Button { margin-left: var(--Drawer-footer-margin); } .cxd-Tooltip { position: absolute; top: 0; left: 0; font-family: inherit; border-radius: var(--borderRadius); min-width: var(--Tooltip-minWidth); max-width: var(--Tooltip-maxWidth); text-align: left; white-space: normal; z-index: 1600; word-wrap: break-word; background: var(--Tooltip-bg); box-shadow: var(--Tooltip-boxShadow); border: var(--common-popover-border); } .cxd-Tooltip-arrow { position: absolute; display: block; width: var(--Tooltip-arrow-width); height: var(--Tooltip-arrow-height); margin-left: calc(var(--Tooltip-arrow-width) * -1 / 2); left: 50%; } .cxd-Tooltip-arrow::before, .cxd-Tooltip-arrow::after { position: absolute; display: block; content: ""; border-color: transparent; border-style: solid; } .cxd-Tooltip--top { margin-top: calc(var(--Tooltip-arrow-height) * -1 - 0.125rem); } .cxd-Tooltip--top .cxd-Tooltip-arrow { bottom: calc((var(--Tooltip-arrow-height) + var(--Tooltip-borderWidth)) * -1); } .cxd-Tooltip--top .cxd-Tooltip-arrow::before, .cxd-Tooltip--top .cxd-Tooltip-arrow::after { border-width: var(--Tooltip-arrow-height) calc(var(--Tooltip-arrow-width) / 2) 0; } .cxd-Tooltip--top .cxd-Tooltip-arrow::before { bottom: 0; } .cxd-Tooltip--top .cxd-Tooltip-arrow::after { bottom: var(--Tooltip-borderWidth); border-top-color: var(--Tooltip-arrow-color); } .cxd-Tooltip--right { margin-left: calc(var(--Tooltip-arrow-height) + 0.125rem); } .cxd-Tooltip--right .cxd-Tooltip-arrow { left: calc(var(--Tooltip-borderWidth) * -1); width: var(--Tooltip-arrow-height); height: var(--Tooltip-arrow-width); margin-top: calc(var(--Tooltip-arrow-width) / -2); top: 50%; } .cxd-Tooltip--right .cxd-Tooltip-arrow::before, .cxd-Tooltip--right .cxd-Tooltip-arrow::after { border-width: calc(var(--Tooltip-arrow-width) / 2) var(--Tooltip-arrow-height) calc(var(--Tooltip-arrow-width) / 2) 0; } .cxd-Tooltip--right .cxd-Tooltip-arrow::before { left: 0; } .cxd-Tooltip--right .cxd-Tooltip-arrow::after { left: var(--Tooltip-borderWidth); border-right-color: var(--Tooltip-arrow-color); } .cxd-Tooltip--bottom { margin-top: calc(var(--Tooltip-arrow-height) + 0.125rem); } .cxd-Tooltip--bottom .cxd-Tooltip-arrow { top: calc((var(--Tooltip-arrow-height) + var(--Tooltip-borderWidth)) * -1); } .cxd-Tooltip--bottom .cxd-Tooltip-arrow::before, .cxd-Tooltip--bottom .cxd-Tooltip-arrow::after { border-width: 0 calc(var(--Tooltip-arrow-width) / 2) var(--Tooltip-arrow-height) calc(var(--Tooltip-arrow-width) / 2); } .cxd-Tooltip--bottom .cxd-Tooltip-arrow::before { top: 0; } .cxd-Tooltip--bottom .cxd-Tooltip-arrow::after { top: var(--Tooltip-borderWidth); border-bottom-color: var(--Tooltip-arrow-color); } .cxd-Tooltip--bottom .cxd-Tooltip-title::before { position: absolute; top: 0; left: 50%; display: block; width: var(--Tooltip-arrow-width); margin-left: calc(var(--Tooltip-arrow-width) / -2); content: ""; border-bottom: var(--Tooltip-borderWidth) solid var(--Tooltip-title-bg); } .cxd-Tooltip--left { margin-left: calc(var(--Tooltip-arrow-height) * -1 - 0.125rem); } .cxd-Tooltip--left .cxd-Tooltip-arrow { left: auto; right: calc((var(--Tooltip-arrow-height) + var(--Tooltip-borderWidth)) * -1); width: var(--Tooltip-arrow-height); height: var(--Tooltip-arrow-width); margin-top: calc(var(--Tooltip-arrow-width) * -1 / 2); top: 50%; } .cxd-Tooltip--left .cxd-Tooltip-arrow::before, .cxd-Tooltip--left .cxd-Tooltip-arrow::after { border-width: calc(var(--Tooltip-arrow-width) / 2) 0 calc(var(--Tooltip-arrow-width) / 2) var(--Tooltip-arrow-height); } .cxd-Tooltip--left .cxd-Tooltip-arrow::before { right: 0; } .cxd-Tooltip--left .cxd-Tooltip-arrow::after { right: var(--Tooltip-borderWidth); border-left-color: var(--Tooltip-arrow-color); } .cxd-Tooltip-title { padding: var(--Tooltip-title-paddingY) var(--Tooltip-title-paddingX) 0; margin-bottom: 0; font-size: var(--fontSizeBase); color: var(--Tooltip-title-color); font-weight: var(--Tooltip-fontWeight); border-top-left-radius: calc(var(--Tooltip-borderRadius) - var(--Tooltip-borderWidth)); border-top-right-radius: calc(var(--Tooltip-borderRadius) - var(--Tooltip-borderWidth)); font-weight: var(--Tooltip-title-fontWeight); } .cxd-Tooltip-title:empty { display: none; } .cxd-Tooltip-body { color: var(--Tooltip-body-color); padding: var(--Tooltip-body-paddingY) var(--Tooltip-body-paddingX); word-break: break-all; text-align: left; } .cxd-Tooltip--dark { background: var(--Tooltip-bg--dark); border: var(--common-popover-border); box-shadow: var(--Tooltip-boxShadow--dark); } .cxd-Tooltip--dark .cxd-Tooltip-title { color: var(--Tooltip-title-color--dark); background: transparent; border-bottom: none; } .cxd-Tooltip--dark .cxd-Tooltip-title::before { border-bottom-color: transparent; } .cxd-Tooltip--dark .cxd-Tooltip-body { color: var(--Tooltip-body-color--dark); } .cxd-Tooltip--dark.cxd-Tooltip--top .cxd-Tooltip-arrow::before { border-width: 0; } .cxd-Tooltip--dark.cxd-Tooltip--top .cxd-Tooltip-arrow::after { border-top-color: var(--Tooltip-arrow-color--dark); } .cxd-Tooltip--dark.cxd-Tooltip--bottom .cxd-Tooltip-arrow::before { border-width: 0; } .cxd-Tooltip--dark.cxd-Tooltip--bottom .cxd-Tooltip-arrow::after { border-bottom-color: var(--Tooltip-arrow-color--dark); } .cxd-Tooltip--dark.cxd-Tooltip--left .cxd-Tooltip-arrow::before { border-width: 0; } .cxd-Tooltip--dark.cxd-Tooltip--left .cxd-Tooltip-arrow::after { border-left-color: var(--Tooltip-arrow-color--dark); } .cxd-Tooltip--dark.cxd-Tooltip--right .cxd-Tooltip-arrow::before { border-width: 0; } .cxd-Tooltip--dark.cxd-Tooltip--right .cxd-Tooltip-arrow::after { border-right-color: var(--Tooltip-arrow-color--dark); } .cxd-TooltipWrapper--inline { display: inline-block; } @keyframes tooltipIn { from { opacity: 0; margin: 0; } } [data-tooltip] { position: relative; } [data-tooltip]:after { pointer-events: none; left: 0; top: 50%; transform: translateY(-50%); position: absolute; content: attr(data-tooltip); font-size: var(--Tooltip--attr-fontSize); line-height: var(--Tooltip--attr-lineHeigt); text-align: left; white-space: normal; width: -moz-max-content; width: max-content; box-sizing: content-box; max-width: 300px; background: var(--Tooltip--attr-bg); border: var(--Tooltip--attr-borderWidth) solid var(--Tooltip--attr-borderColor); border-radius: var(--Tooltip--attr-borderRadius); box-shadow: var(--Tooltip--attr-boxShadow); left: 100%; color: var(--Tooltip--attr-color); padding: var(--Tooltip--attr-paddingY) var(--Tooltip--attr-paddingX); display: none; animation-duration: var(--animation-duration); animation-fill-mode: both; } @media screen and (min-width: 0\0 ) { [data-tooltip]:after { white-space: nowrap; max-width: unset; } } [data-tooltip]:not(.is-disabled):hover:after { display: inline-block; animation-name: tooltipIn; opacity: 1; z-index: 1600; margin: 0 0 0 var(--Tooltip--attr-gap); opacity: 1; } [data-tooltip][data-position=bottom]:after { left: 50%; top: 100%; transform: translateX(-50%); } [data-tooltip][data-position=bottom]:hover:after { margin: var(--Tooltip--attr-gap) 0 0 0; } [data-tooltip][data-position=left]:after { top: 50%; right: 100%; left: auto; transform: translateY(-50%); } [data-tooltip][data-position=left]:hover:after { margin: 0 var(--Tooltip--attr-gap) 0 0; } [data-tooltip][data-position=top]:after { left: 50%; top: auto; bottom: 100%; transform: translateX(-50%); } [data-tooltip][data-position=top]:hover:after { margin: calc(var(--Tooltip--attr-gap) * -1) 0 0 0; } [data-tooltip]:hover:active:after { content: ""; display: none !important; } .cxd-TplField.is-inline { display: inline; } .max-line { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; word-break: break-word; } .cxd-PopOver { position: absolute; background: var(--PopOver-bg); top: 0; left: 0; z-index: 1400; display: none; padding: 0; margin: 0; font-weight: var(--fontWeightNormal); letter-spacing: normal; line-height: var(--lineHeightBase); text-align: left; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; white-space: normal; word-break: normal; word-spacing: normal; word-wrap: normal; font-size: var(--fontSizeBase); box-shadow: var(--boxShadow); border: var(--common-popover-border); border-radius: var(--borderRadius); } .cxd-PopOver > * { position: relative; z-index: 2; } .cxd-PopOver-overlay { position: fixed !important; top: 0; left: 0; right: 0; z-index: 1; bottom: 0; background: transparent; } .cxd-PopOver-isMobile .cxd-PopOver-overlay { background: rgba(0, 0, 0, 0.3); } .cxd-PopOver--leftBottomLeftTop { margin-top: 0.25rem; } .cxd-PopOver--leftTopLeftBottom { margin-top: -0.25rem; } @keyframes PopUpIn { from { height: 0; } } @keyframes PopUpOut { to { height: 0; } } @keyframes PopUpOpacityIn { from { opacity: 0; } } @keyframes PopUpOpacityOut { to { opacity: 0; } } .cxd-PopUp { width: 100%; height: 25rem; position: fixed; background: var(--PopOver-bg); left: 0; bottom: 0; z-index: 3000; padding: 0; margin: 0; font-weight: var(--fontWeightNormal); letter-spacing: normal; line-height: var(--lineHeightBase); text-align: left; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; white-space: normal; word-break: normal; word-spacing: normal; word-wrap: normal; font-size: var(--fontSizeBase); box-shadow: var(--boxShadow); border: var(--borderWidth) solid var(--borderColor); border-radius: var(--borderRadius); overflow: hidden; } .cxd-PopUp.in, .cxd-PopUp.out { animation-duration: var(--animation-duration); animation-fill-mode: both; } .cxd-PopUp.in { animation-name: PopUpIn; } .cxd-PopUp.in .cxd-PopUp-overlay { animation-name: PopUpOpacityIn; } .cxd-PopUp.out { animation-name: PopUpOut; } .cxd-PopUp.out .cxd-PopUp-overlay { animation-name: PopUpOpacityOut; } .cxd-PopUp-inner { position: relative; overflow: hidden; height: 100%; box-sizing: border-box; background: #fff; display: flex; flex-direction: column; } .cxd-PopUp-closeBox { width: 3rem; height: 3rem; position: absolute; z-index: 1; cursor: pointer; right: 0; top: 0; display: flex; justify-content: center; align-items: center; } .cxd-PopUp-closeWrap { position: relative; text-align: center; height: 3rem; line-height: 3rem; } .cxd-PopUp-closeWrap .cxd-PopUp-close { z-index: 1; color: var(--icon-color); cursor: pointer; } .cxd-PopUp-toolbar { display: flex; align-items: center; justify-content: space-between; height: 3.75rem; } .cxd-PopUp-title { font-size: var(--fontSizeMd); } .cxd-PopUp-cancel { color: var(--PopUp-cancelAction-color); margin-left: var(--gap-sm); } .cxd-PopUp-confirm { color: var(--PopUp-confirmAction-color); margin-right: var(--gap-sm); border: none; } .cxd-PopUp-content { overflow-y: auto; height: 100%; display: flex; min-width: 0; min-height: 0; flex: 1; } .cxd-PopUp-content > div { min-width: 0; min-height: 0; flex: 1; } .cxd-PopUp > * { position: relative; z-index: 2; } .cxd-PopUp-overlay { position: fixed !important; top: 0; left: 0; right: 0; z-index: 1; bottom: 0; background: rgba(0, 0, 0, 0.3); opacity: 1; animation-duration: var(--animation-duration); animation-fill-mode: both; } .cxd-PopUp--leftBottomLeftTop { margin-top: 0.25rem; } .cxd-PopUp--leftTopLeftBottom { margin-top: -0.25rem; } .cxd-PopUp-safearea { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } .cxd-PickerColumns { position: relative; background-color: var(--PickerColumns-bg); -webkit-user-select: none; -moz-user-select: none; user-select: none; min-width: 0; min-height: 0; flex: 1; overflow: hidden; font-size: var(--PickerColumns-option-fontSize); } .cxd-PickerColumns li:focus { outline: none; } .cxd-PickerColumns-header { display: flex; align-items: center; justify-content: space-between; height: var(--PickerColumns-toolbar-height); } .cxd-PickerColumns-cancel, .cxd-PickerColumns-confirm { height: 100%; padding: var(--PickerColumns-action-padding); font-size: var(--PickerColumns-action-fontSize); background-color: transparent !important; border: none; cursor: pointer; } .cxd-PickerColumns-cancel:active, .cxd-PickerColumns-confirm:active { background-color: none !important; } .cxd-PickerColumns-cancel:hover, .cxd-PickerColumns-confirm:hover { background-color: none !important; } .cxd-PickerColumns-confirm { color: var(--PickerColumns-confirmAction-color); } .cxd-PickerColumns-cancel { color: var(--PickerColumns-cancelAction-color); } .cxd-PickerColumns-title { max-width: 50%; font-weight: 500; font-size: var(--PickerColumns-title-fontSize); line-height: var(--PickerColumns-title-lineHeight); text-align: center; color: var(--PickerColumns-title-color); } .cxd-PickerColumns-columns { touch-action: none; position: relative; display: flex; cursor: grab; } .cxd-PickerColumns-loading { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; display: flex; align-items: center; justify-content: center; color: var(--PickerColumns-loadingIcon-color); background-color: var(--PickerColumns-loadingMask-color); } .cxd-PickerColumns-frame { position: absolute; top: 50%; right: var(--gap-md); left: var(--gap-md); z-index: 2; transform: translateY(-50%); pointer-events: none; } .cxd-PickerColumns-frame::after { position: absolute; content: ""; border-bottom: 1px solid var(--borderColor); border-top: 1px solid var(--borderColor); top: -50%; right: -50%; left: -50%; bottom: -50%; transform: scale(0.5); } .cxd-PickerColumns-mask { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background-image: linear-gradient(180deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4)), linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.4)); background-repeat: no-repeat; background-position: top, bottom; transform: translateZ(0); pointer-events: none; } .cxd-PickerColumns-columnWrapper { margin: 0; padding: 0; list-style: none; transition-timing-function: cubic-bezier(0.23, 1, 0.68, 1); } .cxd-PickerColumns-columnItem { display: flex; align-items: center; justify-content: center; color: var(--PickerColumns-optionText-color); } .cxd-PickerColumns-columnItem.is-disabled { cursor: not-allowed; opacity: var(--PickerColumns-optionDisabled-opacity); } .cxd-PickerColumns-columnItemis-selected { font-size: 18px; color: --PickerColumns-title-color; } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 80% { transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; transform: scale3d(1, 1, 1); } } @keyframes bounceOut { 20% { transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } } .cxd-Toast { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start; max-width: var(--Toast-width); pointer-events: auto; margin-bottom: var(--gap-xs); padding: var(--Toast-paddingTop) var(--Toast-paddingRight) var(--Toast-paddingBottom) var(--Toast-paddingLeft); box-shadow: var(--Toast-box-shadow); border-radius: var(--Toast-top-left-border-radius) var(--Toast-top-right-border-radius) var(--Toast-bottom-right-border-radius) var(--Toast-bottom-left-border-radius); border: var(--Toast-border-width) solid; color: var(--Toast-color); position: relative; opacity: var(--Toast-opacity); opacity: 0; transform: translateZ(0); width: 25rem; } .cxd-Toast-wrap { pointer-events: none; position: fixed; z-index: 2000; } .cxd-Toast.in, .cxd-Toast.out { animation-fill-mode: both; animation-duration: var(--animation-duration); opacity: 1; } .cxd-Toast.in { animation-name: bounceIn; } .cxd-Toast.out { animation-name: bounceOut; } .cxd-Toast-close { display: inline-flex; font-size: var(--fontSizeLg); line-height: var(--gap-xl); height: var(--gap-xl); color: var(--Toast-close-color); margin-left: var(--gap-sm); align-items: center; cursor: pointer; } .cxd-Toast-close:hover { font-size: var(--fontSizeLg); color: var(--Toast-close--onHover-color); } .cxd-Toast-close > svg { top: 0; } .cxd-Toast-content { min-width: 0; min-height: 0; flex: 1; display: flex; flex-flow: column nowrap; justify-content: space-between; align-items: flex-start; } .cxd-Toast-content .cxd-Toast-title { color: var(--text-color); font-size: var(--fontSizeBase); font-weight: 500; line-height: var(--gap-xl); margin-bottom: var(--gap-xs); } .cxd-Toast-content .cxd-Toast-body { display: inline-block; vertical-align: middle; white-space: pre-wrap; flex-grow: 1; line-height: var(--gap-xl); } .cxd-Toast-content .cxd-Toast-body .cxd-Html { word-break: break-word; } .cxd-Toast-icon { display: inline-flex; text-rendering: auto; -webkit-font-smoothing: antialiased; vertical-align: middle; margin-right: var(--gap-sm); height: var(--gap-xl); line-height: var(--gap-xl); align-items: center; } .cxd-Toast-icon > svg { top: 0; width: var(--Toast-icon-width); height: var(--Toast-icon-height); color: inherit; } .cxd-Toast--error { color: var(--Toast--danger-color); background: var(--Toast--danger-bgColor); font-size: var(--Toast--danger-fontSize); font-weight: var(--Toast--danger-fontWeight); background: var(--Toast--danger-bgColor); border-width: var(--Toast--danger-top-border-width) var(--Toast--danger-right-border-width) var(--Toast--danger-bottom-border-width) var(--Toast--danger-left-border-width); border-style: var(--Toast--danger-top-border-style) var(--Toast--danger-right-border-style) var(--Toast--danger-bottom-border-style) var(--Toast--danger-left-border-style); border-color: var(--Toast--danger-top-border-color) var(--Toast--danger-right-border-color) var(--Toast--danger-bottom-border-color) var(--Toast--danger-left-border-color); } .cxd-Toast--warning { color: var(--Toast--warning-color); background: var(--Toast--warning-bgColor); font-size: var(--Toast--warning-fontSize); font-weight: var(--Toast--warning-fontWeight); background: var(--Toast--warning-bgColor); border-width: var(--Toast--warning-top-border-width) var(--Toast--warning-right-border-width) var(--Toast--warning-bottom-border-width) var(--Toast--warning-left-border-width); border-style: var(--Toast--warning-top-border-style) var(--Toast--warning-right-border-style) var(--Toast--warning-bottom-border-style) var(--Toast--warning-left-border-style); border-color: var(--Toast--warning-top-border-color) var(--Toast--warning-right-border-color) var(--Toast--warning-bottom-border-color) var(--Toast--warning-left-border-color); } .cxd-Toast--info { color: var(--Toast--info-color); font-size: var(--Toast--info-fontSize); font-weight: var(--Toast--info-fontWeight); background: var(--Toast--info-bgColor); border-width: var(--Toast--info-top-border-width) var(--Toast--info-right-border-width) var(--Toast--info-bottom-border-width) var(--Toast--info-left-border-width); border-style: var(--Toast--info-top-border-style) var(--Toast--info-right-border-style) var(--Toast--info-bottom-border-style) var(--Toast--info-left-border-style); border-color: var(--Toast--info-top-border-color) var(--Toast--info-right-border-color) var(--Toast--info-bottom-border-color) var(--Toast--info-left-border-color); } .cxd-Toast--success { color: var(--Toast--success-color); font-size: var(--Toast--success-fontSize); font-weight: var(--Toast--success-fontWeight); background: var(--Toast--success-bgColor); border-width: var(--Toast--success-top-border-width) var(--Toast--success-right-border-width) var(--Toast--success-bottom-border-width) var(--Toast--success-left-border-width); border-style: var(--Toast--success-top-border-style) var(--Toast--success-right-border-style) var(--Toast--success-bottom-border-style) var(--Toast--success-left-border-style); border-color: var(--Toast--success-top-border-color) var(--Toast--success-right-border-color) var(--Toast--success-bottom-border-color) var(--Toast--success-left-border-color); } .cxd-Toast-wrap--topRight { top: var(--gap-base); right: var(--gap-base); } .cxd-Toast-wrap--topCenter { top: var(--gap-base); left: 50%; transform: translateX(-50%); } .cxd-Toast-wrap--topLeft { top: var(--gap-base); left: var(--gap-base); } .cxd-Toast-wrap--bottomLeft { left: var(--gap-base); bottom: var(--gap-base); } .cxd-Toast-wrap--bottomCenter { left: 50%; transform: translateX(-50%); bottom: var(--gap-base); } .cxd-Toast-wrap--bottomRight { bottom: var(--gap-base); right: var(--gap-base); } .cxd-Toast-wrap--center { top: 50%; left: 50%; transform: translate(-50%, -50%); } .cxd-Toast-mobile .cxd-Toast { background-color: rgba(0, 0, 0, 0.9); border-radius: 0.25rem; color: #fff; flex-direction: column; align-items: center; justify-content: center; padding: var(--gap-base) var(--gap-md); text-align: center; width: auto; } .cxd-Toast-mobile .cxd-Toast-title { color: #fff; width: 100%; } .cxd-Toast-mobile .cxd-Toast-body { line-height: 1.125rem; font-size: var(--fontSizeMd); } .cxd-Toast-mobile .cxd-Toast-icon { margin-right: 0 !important; margin: var(--gap-base) 0; width: 2.5rem; height: 2.5rem; } .cxd-Toast-mobile .cxd-Toast-icon > svg { width: 2.5rem; height: 2.5rem; } .cxd-Toast-mobile .cxd-Toast-mobile--has-icon { min-width: 7.5rem; padding-bottom: var(--gap-lg); } .cxd-Alert { font-size: var(--Alert-fontSize); font-weight: var(--alert-base-fontWeight); box-shadow: var(--Alert-boxShadow); padding: var(--alert-base-paddingTop) var(--alert-base-paddingRight) var(--alert-base-paddingBottom) var(--alert-base-paddingLeft); border: var(--Alert-borderWidth) solid var(--Alert-borderColor); border-radius: var(--Alert-borderRadius); margin: var(--alert-base-marginTop) var(--alert-base-marginRight) var(--Alert-marginBottom) var(--alert-base-marginLeft); position: relative; color: var(--Alert-fontColor); display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start; } .cxd-Alert-has-title { padding: var(--alert-base-title-paddingTop) var(--alert-base-title-paddingRight) var(--alert-base-title-paddingBottom) var(--alert-base-title-paddingLeft); } .cxd-Alert-has-title .cxd-Alert-content .cxd-Alert-title { line-height: 1.375rem; } .cxd-Alert-has-title .cxd-Alert-content .cxd-Alert-desc { line-height: 1.25rem; } .cxd-Alert-icon { margin-right: var(--alert-icon-margin-right); font-size: var(--alert-icon-size); } .cxd-Alert-content { flex: 1; min-width: 0; } .cxd-Alert-content .cxd-Alert-title { color: var(--alert-base-title-color); font-size: var(--alert-base-title-fontSize); font-weight: var(--alert-base-title-fontWeight); line-height: 1.5rem; margin-bottom: var(--alert-base-title-margin-bottom); } .cxd-Alert-content .cxd-Alert-desc { min-height: 1.5rem; line-height: 1.5rem; } .cxd-Alert-actions { margin-right: var(--Alert-actions-marginRight); } .cxd-Alert-close { outline: none; padding: 0; cursor: pointer; background: transparent; border: 0; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; filter: alpha(opacity=20); opacity: 0.2; margin-left: 0.5rem; line-height: 1.5rem; } .cxd-Alert-close:hover { color: #000; text-decoration: none; cursor: pointer; filter: alpha(opacity=50); opacity: 0.5; } .cxd-Alert--danger { color: var(--Alert--danger-color); background: var(--Alert--danger-bg); border-color: var(--Alert--danger-borderColor); } .cxd-Alert--danger .cxd-Alert-icon .icon-alert-danger path { fill: var(--alert-level-danger-icon-color); } .cxd-Alert--info { color: var(--Alert--info-color); background: var(--Alert--info-bg); border-color: var(--Alert--info-borderColor); } .cxd-Alert--info .cxd-Alert-icon .icon-alert-info path { fill: var(--alert-level-info-icon-color); } .cxd-Alert--success { color: var(--Alert--success-color); background: var(--Alert--success-bg); border-color: var(--Alert--success-borderColor); } .cxd-Alert--success .cxd-Alert-icon .icon-alert-success path { fill: var(--alert-level-success-icon-color); } .cxd-Alert--warning { color: var(--Alert--warning-color); background: var(--Alert--warning-bg); border-color: var(--Alert--warning-borderColor); } .cxd-Alert--warning .cxd-Alert-icon .icon-alert-warning path { fill: var(--alert-level-warning-icon-color); } .cxd-AppBcn { height: 1.875rem; line-height: 1.875rem; font-size: 0.75rem; list-style: none; margin: 0; padding: 0 0 0 var(--gap-md); border-bottom: var(--borderWidth) solid var(--borderColor); } .cxd-AppBcn a { font-size: inherit; } .cxd-AppBcn-item { display: inline-block; } .cxd-AppBcn-item + .cxd-AppBcn-item:before { padding: 0 5px; color: #ccc; content: "/ "; } .cxd-AppFoldBtn { color: var(--icon-color); padding: 0.625rem; margin-left: -0.625rem; cursor: pointer; } .cxd-AppFoldBtn:hover { color: var(--icon-onHover-color); } .cxd-AppLogo-html { display: inline-flex; vertical-align: middle; } .cxd-AppContent { display: flex; flex-direction: column; } .cxd-AppBody { flex: 1; min-height: 0; } .cxd-ArrayInput-placeholder { color: var(--text--muted-color); padding-top: var(--Form-label-paddingTop); } .cxd-ArrayInput-addBtn { font-size: var(--Combo-addBtn-fontSize); font-size: var(--Combo-addBtn-fontSize); font-weight: var(--Combo-addBtn-fontWeight); line-height: var(--Combo-addBtn-lineHeight); border-radius: var(--Combo-addBtn-borderRadius) var(--Combo-addBtn-borderRadius) var(--Combo-addBtn-borderRadius) var(--Combo-addBtn-borderRadius); height: var(--Combo-addBtn-height); padding: var(--Combo-addBtn-paddingY) var(--Combo-addBtn-paddingX) var(--Combo-addBtn-paddingY) var(--Combo-addBtn-paddingX); margin: var(--button-size-default-marginTop) var(--button-size-default-marginRight) var(--button-size-default-marginBottom) var(--button-size-default-marginLeft); color: var(--Combo-addBtn-border); background: var(--Combo-addBtn-bg); border-color: var(--Combo-addBtn-color) var(--combo-multi-addBtn-hover-bg-color) var(--Combo-addBtn-onHover-border) var(--Combo-addBtn-onHover-color); border-width: var(--Combo-addBtn-onActive-bg) var(--Combo-addBtn-onActive-border) var(--Combo-addBtn-onActive-color) var(--button-default-default-left-border-width); border-style: var(--button-default-default-top-border-style) var(--button-default-default-right-border-style) var(--button-default-default-bottom-border-style) var(--button-default-default-left-border-style); box-shadow: var(--button-default-default-shadow); } .cxd-ArrayInput-addBtn > svg { width: var(--Combo-addBtn-fontSize); height: var(--Combo-addBtn-fontSize); } .cxd-ArrayInput-addBtn .cxd-Button-icon:first-child:not(:last-child):not(.pull-right), .cxd-ArrayInput-addBtn > svg.icon:not(:last-child):not(.pull-right), .cxd-ArrayInput-addBtn > .pull-left { margin-right: var(--button-size-default-icon-margin); font-size: var(--button-size-default-icon-size); width: var(--button-size-default-icon-size); height: var(--button-size-default-icon-size); line-height: var(--button-size-default-icon-size); } .cxd-ArrayInput-addBtn .cxd-Button-icon:last-child:not(:first-child):not(.pull-left), .cxd-ArrayInput-addBtn > .pull-right { font-size: var(--button-size-default-icon-size); margin-left: var(--button-size-default-icon-margin); width: var(--button-size-default-icon-size); height: var(--button-size-default-icon-size); line-height: var(--button-size-default-icon-size); } .cxd-ArrayInput-addBtn .cxd-Button--loading:first-child:not(:last-child):not(.pull-right), .cxd-ArrayInput-addBtn > svg.icon:not(:last-child):not(.pull-right), .cxd-ArrayInput-addBtn > .pull-left { font-size: var(--button-size-default-icon-size); margin-right: var(--button-size-default-icon-margin); width: var(--button-size-default-icon-size); height: var(--button-size-default-icon-size); line-height: var(--button-size-default-icon-size); } .cxd-ArrayInput-addBtn .cxd-Button--loading:last-child:not(:first-child):not(.pull-left), .cxd-ArrayInput-addBtn > .pull-right { font-size: var(--button-size-default-icon-size); margin-left: var(--button-size-default-icon-margin); width: var(--button-size-default-icon-size); height: var(--button-size-default-icon-size); line-height: var(--button-size-default-icon-size); } .cxd-ArrayInput-addBtn.cxd-Button--iconOnly { min-width: var(--Combo-addBtn-height); padding: 0; } .cxd-ArrayInput-addBtn.cxd-Button--iconOnly:not(.cxd-Button--link) > svg.icon { width: var(--button-size-default-icon-size); height: var(--button-size-default-icon-size); } .cxd-ArrayInput-addBtn.cxd-Button--iconOnly:not(.cxd-Button--link) > .fa, .cxd-ArrayInput-addBtn.cxd-Button--iconOnly:not(.cxd-Button--link) > .iconfont { font-size: var(--button-size-default-icon-size); } .cxd-ArrayInput-addBtn.cxd-Button--iconOnly:not(.cxd-Button--link) > .iconfont { line-height: 1; } .cxd-ArrayInput-addBtn img.cxd-Button-icon { height: var(--button-size-default-icon-size); vertical-align: middle; } .cxd-ArrayInput-addBtn:not(:disabled):not(.is-disabled):hover { color: var(--button-default-hover-font-color); background: var(--button-default-hover-bg-color); border-color: var(--button-default-hover-top-border-color) var(--button-default-hover-right-border-color) var(--button-default-hover-bottom-border-color) var(--button-default-hover-left-border-color); border-width: var(--button-default-hover-top-border-width) var(--button-default-hover-right-border-width) var(--button-default-hover-bottom-border-width) var(--button-default-hover-left-border-width); border-style: var(--button-default-hover-top-border-style) var(--button-default-hover-right-border-style) var(--button-default-hover-bottom-border-style) var(--button-default-hover-left-border-style); box-shadow: var(--button-default-hover-shadow); } .cxd-ArrayInput-addBtn:not(:disabled):not(.is-disabled).hover { color: var(--button-default-hover-font-color); background: var(--button-default-hover-bg-color); border-color: var(--button-default-hover-top-border-color) var(--button-default-hover-right-border-color) var(--button-default-hover-bottom-border-color) var(--button-default-hover-left-border-color); border-width: var(--button-default-hover-top-border-width) var(--button-default-hover-right-border-width) var(--button-default-hover-bottom-border-width) var(--button-default-hover-left-border-width); border-style: var(--button-default-hover-top-border-style) var(--button-default-hover-right-border-style) var(--button-default-hover-bottom-border-style) var(--button-default-hover-left-border-style); box-shadow: var(--button-default-hover-shadow); } .cxd-ArrayInput-addBtn:not(:disabled):not(.is-disabled):hover:active { color: var(--button-default-active-font-color); background: var(--button-default-active-bg-color); border-color: var(--button-default-active-top-border-color) var(--button-default-active-right-border-color) var(--button-default-active-bottom-border-color) var(--button-default-active-left-border-color); border-width: var(--button-default-active-top-border-width) var(--button-default-active-right-border-width) var(--button-default-active-bottom-border-width) var(--button-default-active-left-border-width); border-style: var(--button-default-active-top-border-style) var(--button-default-active-right-border-style) var(--button-default-active-bottom-border-style) var(--button-default-active-left-border-style); box-shadow: var(--button-default-active-shadow); } .cxd-ArrayInput-addBtn:not(:disabled):not(.is-disabled).active, .cxd-ArrayInput-addBtn:not(:disabled):not(.is-disabled).is-active { color: var(--button-default-active-font-color); background: var(--button-default-active-bg-color); border-color: var(--button-default-active-top-border-color) var(--button-default-active-right-border-color) var(--button-default-active-bottom-border-color) var(--button-default-active-left-border-color); border-width: var(--button-default-active-top-border-width) var(--button-default-active-right-border-width) var(--button-default-active-bottom-border-width) var(--button-default-active-left-border-width); border-style: var(--button-default-active-top-border-style) var(--button-default-active-right-border-style) var(--button-default-active-bottom-border-style) var(--button-default-active-left-border-style); box-shadow: var(--button-default-active-shadow); } .cxd-ArrayInput-addBtn:disabled, .cxd-ArrayInput-addBtn.is-disabled { color: var(--button-default-disabled-font-color); background: var(--button-default-disabled-bg-color); border-color: var(--button-default-disabled-top-border-color) var(--button-default-disabled-right-border-color) var(--button-default-disabled-bottom-border-color) var(--button-default-disabled-left-border-color); border-width: var(--button-default-disabled-top-border-width) var(--button-default-disabled-right-border-width) var(--button-default-disabled-bottom-border-width) var(--button-default-disabled-left-border-width); border-style: var(--button-default-disabled-top-border-style) var(--button-default-disabled-right-border-style) var(--button-default-disabled-bottom-border-style) var(--button-default-disabled-left-border-style); box-shadow: var(--button-default-disabled-shadow); } .cxd-ArrayInput-addBtn.is-disabled { pointer-events: none; opacity: var(--Button-onDisabled-opacity); } .cxd-ArrayInput-toolbar { margin-top: var(--gap-sm); display: flex; flex-direction: row; justify-content: space-between; } .cxd-ArrayInput-toolbar--dnd { padding-left: 29px; } .cxd-ArrayInput-sortTip { color: var(--text--muted-color); } .cxd-ArrayInput-item { display: flex; flex-direction: row; align-items: flex-start; margin-bottom: var(--gap-xs); } .cxd-ArrayInput-item > div { flex-grow: 1; width: 0; min-width: 120px; margin-right: var(--gap-xs); } .cxd-ArrayInput-item > div:not(:first-child) { margin-left: var(--gap-xs); } .cxd-ArrayInput-item--dragging { position: relative; opacity: 0.4; } .cxd-ArrayInput-itemRemove, .cxd-ArrayInput-itemDrager { margin: 0; flex-grow: unset; display: inline-block; padding: var(--Form-label-paddingTop) var(--gap-xs); cursor: pointer; } .cxd-ArrayInput-itemRemove > svg, .cxd-ArrayInput-itemDrager > svg { color: var(--icon-color); } .cxd-ArrayInput-itemRemove:hover > svg, .cxd-ArrayInput-itemDrager:hover > svg { color: var(--icon-onHover-color); } .cxd-ArrayInput-itemDrager { cursor: move; } .cxd-Tabs-drag-tip { display: none; } .cxd-Tabs-linksWrapper { display: flex; align-items: center; justify-content: flex-start; border-bottom: var(--Tabs-borderWidth) solid var(--Tabs-borderColor); } .cxd-Tabs-linksContainer-wrapper { position: relative; display: flex; align-items: center; justify-content: flex-start; } .cxd-Tabs-linksContainer-wrapper .cxd-Tabs-addable { display: flex; align-items: center; margin-left: var(--Tabs-add-margin); margin-bottom: 0.1875rem; padding-bottom: 0.5rem; white-space: nowrap; cursor: pointer; } .cxd-Tabs-linksContainer-wrapper .cxd-Tabs-addable-icon { width: var(--Tabs-add-icon-size); height: var(--Tabs-add-icon-size); padding: var(--Tabs-add-icon-padding); margin-right: var(--Tabs-add-icon-margin); } .cxd-Tabs-linksContainer-wrapper .cxd-Tabs-addable span { margin-left: 4px; line-height: 1; } .cxd-Tabs-linksContainer-wrapper .cxd-Tabs-addable:hover { color: var(--primary); fill: var(--primary); } .cxd-Tabs-linksContainer-wrapper .cxd-Tabs-linksContainer { flex-grow: 1; position: relative; display: flex; align-items: center; overflow: hidden; } .cxd-Tabs-linksContainer-wrapper .cxd-Tabs-linksContainer-arrow { width: 16px; height: 100%; display: flex; align-items: center; cursor: pointer; box-sizing: content-box; margin-bottom: 0.1875rem; padding-bottom: 0.5rem; } .cxd-Tabs-linksContainer-wrapper .cxd-Tabs-linksContainer-arrow .icon { top: 0; width: var(--Remark-icon-fontSize); height: var(--Remark-icon-fontSize); } .cxd-Tabs-linksContainer-wrapper .cxd-Tabs-linksContainer-arrow:hover { color: var(--icon-onHover-color); } .cxd-Tabs-linksContainer-wrapper .cxd-Tabs-linksContainer-arrow--left { padding-right: 16px; } .cxd-Tabs-linksContainer-wrapper .cxd-Tabs-linksContainer-arrow--left svg { transform: rotate(180deg); } .cxd-Tabs-linksContainer-wrapper .cxd-Tabs-linksContainer-arrow--right { padding-left: 16px; } .cxd-Tabs-linksContainer-wrapper .cxd-Tabs-linksContainer-arrow--disabled .iconfont { cursor: not-allowed; color: var(--Number-handler-onDisabled-color); } .cxd-Tabs-linksContainer-wrapper .cxd-Tabs-linksContainer-arrow--disabled:hover { color: var(--Number-handler-onDisabled-color); } .cxd-Tabs-linksContainer-wrapper .cxd-Tabs-linksContainer-main { position: relative; overflow-y: auto; scrollbar-width: none; width: 100%; } .cxd-Tabs-linksContainer-wrapper .cxd-Tabs-linksContainer-main::-webkit-scrollbar { display: none; } .cxd-Tabs-linksContainer-wrapper .cxd-Tabs-linksContainer-main .cxd-Tabs-links { min-width: 100%; max-width: 0; height: 100%; overflow-x: hidden; } .cxd-Tabs-linksContainer-wrapper .cxd-Tabs-linksContainer-main .cxd-Tabs-links.is-mobile { overflow-x: auto; -ms-overflow-style: none; overflow: -moz-scrollbars-none; } .cxd-Tabs-linksContainer-wrapper .cxd-Tabs-linksContainer-main .cxd-Tabs-links.is-mobile::-webkit-scrollbar { display: none; width: 0 !important; height: 0 !important; } .cxd-Tabs-linksContainer-wrapper .cxd-Tabs-linksContainer-main .cxd-Tabs-links .cxd-Tabs-links-drag { position: absolute; height: 100%; top: 0; box-shadow: 0 0 0 1px red; } .cxd-Tabs-links { display: flex; margin: 0; padding: 0; list-style: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-Tabs-links::before, .cxd-Tabs-links::after { display: table; content: ""; } .cxd-Tabs-links::after { clear: both; } .cxd-Tabs-links > .cxd-Tabs-link { position: relative; flex: none; display: flex; max-width: var(--Tabs-link-maxWidth); overflow: hidden; } .cxd-Tabs-links > .cxd-Tabs-link .cxd-Tabs-link-edit { max-width: var(--Tabs-link-maxWidth); border: none; outline: none; } .cxd-Tabs-links > .cxd-Tabs-link:hover .cxd-Tabs-link-close { width: var(--Tabs-close-size); margin-left: var(--Tabs-close-margin); } .cxd-Tabs-links > .cxd-Tabs-link .cxd-Tabs-link-close { width: 0; margin: var(--Tabs-close-marginTop) 0 0; fill: var(--Tabs-gray-color); transition: all var(--Tabs-animation-duration) linear; overflow: hidden; cursor: pointer; } .cxd-Tabs-links > .cxd-Tabs-link .cxd-Tabs-link-close .cxd-Tabs-link-close-icon { width: var(--Tabs-close-size); } .cxd-Tabs-links > .cxd-Tabs-link > a:first-child { font-size: var(--Tabs-linkFontSize); outline: none; border: var(--Tabs-borderWidth) solid transparent; border-top-left-radius: var(--Tabs-borderRadius); border-top-right-radius: var(--Tabs-borderRadius); color: var(--Tabs-color); margin: var(--Tabs-linkMargin); padding: var(--Tabs-linkPadding); text-decoration: none; cursor: pointer; display: flex; align-items: center; max-width: 100%; overflow: hidden; } .cxd-Tabs-links > .cxd-Tabs-link > a:first-child .cxd-Tabs-link-text { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 100%; } .cxd-Tabs-links > .cxd-Tabs-link > a:first-child > .cxd-Icon { margin-right: var(--Tabs-icon-gap); vertical-align: unset; } .cxd-Tabs-links > .cxd-Tabs-link > a:first-child > img.cxd-Icon { position: relative; top: 0.125em; } .cxd-Tabs-links > .cxd-Tabs-link > a.cxd-Tabs-togglor { display: flex; } .cxd-Tabs-links > .cxd-Tabs-link > .cxd-Combo-toolbarBtn { position: absolute; right: -10px; top: -10px; z-index: 10; display: none; } .cxd-Tabs-links > .cxd-Tabs-link:hover > .cxd-Combo-toolbarBtn { display: block; } .cxd-Tabs-links > .cxd-Tabs-link:hover > a:first-child, .cxd-Tabs-links > .cxd-Tabs-link > a:first-child:focus { text-decoration: none; } .cxd-Tabs-links > .cxd-Tabs-link.disabled, .cxd-Tabs-links > .cxd-Tabs-link.is-disabled { cursor: not-allowed; } .cxd-Tabs-links > .cxd-Tabs-link.disabled > a:first-child, .cxd-Tabs-links > .cxd-Tabs-link.is-disabled > a:first-child { color: var(--Tabs-link-disabled-color); background: transparent; border-color: transparent; pointer-events: none; } .cxd-Tabs-links > .cxd-Tabs-link.active > a:first-child, .cxd-Tabs-links > .cxd-Tabs-link.is-active > a:first-child { color: var(--Tabs-onActive-color); border-color: var(--Tabs-onActive-borderColor); border-bottom-color: transparent; } .cxd-Tabs-links > .cxd-Tabs-link.has-error > a:first-child { color: var(--Tabs-onError-color) !important; } .cxd-Tabs .cxd-Tabs-togglor { display: flex; justify-content: center; margin: auto; cursor: pointer; } .cxd-Tabs .cxd-Tabs-togglor-arrow { width: var(--gap-md); text-align: center; display: flex; align-items: center; justify-content: center; line-height: 1; transform: rotate(90deg); } .cxd-Tabs .cxd-Tabs-togglor-arrow > svg { transition: transform var(--animation-duration); display: inline-block; color: var(--Form-select-caret-iconColor); width: 10px; height: 10px; top: 0; } .cxd-Tabs .cxd-Tabs-togglor.is-opened { color: var(--Tabs-onActive-color); } .cxd-Tabs .cxd-Tabs-togglor.is-opened .cxd-Tabs-togglor-arrow > svg { transform: rotate(180deg); } .cxd-Tabs-PopOver.cxd-PopOver { border: 0; border-radius: 0; } .cxd-Tabs-content { background: var(--Tabs-content-bg); border-style: solid; border-width: 0 var(--Tabs-borderWidth) var(--Tabs-borderWidth); border-color: var(--Tabs-borderColor); } .cxd-Tabs-pane { display: none; padding: var(--gap-base); opacity: 0; transition: opacity var(--animation-duration) linear; } .cxd-Tabs-pane.is-active { display: block; } .cxd-Tabs-pane.in { opacity: 1; } .cxd-Tabs--line > .cxd-Tabs-linksContainer-wrapper { position: relative; } .cxd-Tabs--line > .cxd-Tabs-linksContainer-wrapper::before { content: ""; position: absolute; width: 100%; left: 0; bottom: 0; border-bottom: var(--Tabs--line-border-width) var(--Tabs--line-border-style) var(--Tabs--line-border-color); } .cxd-Tabs--line > .cxd-Tabs-linksContainer-wrapper--toolbar .cxd-Tabs-link { padding-top: 10px; } .cxd-Tabs--line > .cxd-Tabs-linksContainer-wrapper--toolbar .cxd-Tabs-addable { padding: 0; } .cxd-Tabs--line > .cxd-Tabs-linksContainer-wrapper--toolbar .cxd-Tabs-linksContainer-arrow { margin: 0; } .cxd-Tabs--line > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-arrow { top: -4px; } .cxd-Tabs--line > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li, .cxd-Tabs--line > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li { padding: 0 calc(var(--Tabs--line-padding) / 2); } .cxd-Tabs--line > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li:first-of-type, .cxd-Tabs--line > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li:first-of-type { padding-left: 0; } .cxd-Tabs--line > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li:last-of-type, .cxd-Tabs--line > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li:last-of-type { padding-right: 0; } .cxd-Tabs--line > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li > a:first-child, .cxd-Tabs--line > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li > a:first-child { border-width: 0; padding: 0 0 0.5rem; color: var(--Tabs--line-color); font-size: var(--Tabs--line-fontSize); font-weight: var(--Tabs--line-fontWeight); line-height: var(--Tabs--line-lineHeight); } .cxd-Tabs--line > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li:not(.is-disabled):hover a:first-child, .cxd-Tabs--line > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li:not(.is-disabled):hover a:first-child { color: var(--Tabs--line-hover-color); font-size: var(--Tabs--line-hover-fontSize); font-weight: var(--Tabs--line-hover-fontWeight); line-height: var(--Tabs--line-hover-lineHeight); background: transparent; } .cxd-Tabs--line > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li:not(.is-disabled):hover .cxd-Tabs-link-close, .cxd-Tabs--line > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li:not(.is-disabled):hover .cxd-Tabs-link-close { fill: var(--Tabs--line-hover-color); } .cxd-Tabs--line > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li.is-disabled a:first-child, .cxd-Tabs--line > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li.is-disabled a:first-child { color: var(--Tabs--line-disabled-color); font-size: var(--Tabs--line-disabled-fontSize); font-weight: var(--Tabs--line-disabled-fontWeight); line-height: var(--Tabs--line-disabled-lineHeight); } .cxd-Tabs--line > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li.is-active > a:first-child, .cxd-Tabs--line > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li.is-active > a:first-child:hover, .cxd-Tabs--line > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li.is-active > a:first-child:focus, .cxd-Tabs--line > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li.is-active > a:first-child, .cxd-Tabs--line > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li.is-active > a:first-child:hover, .cxd-Tabs--line > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li.is-active > a:first-child:focus { border-bottom: var(--Tabs--line-active-border-width) var(--Tabs--line-active-border-style) var(--Tabs--line-onHover-borderColor); color: var(--Tabs--line-active-color); font-size: var(--Tabs--line-active-fontSize); font-weight: var(--Tabs--line-active-fontWeight); line-height: var(--Tabs--line-active-lineHeight); background: transparent; } .cxd-Tabs--line > .cxd-Tabs-content { border-width: 0; } .cxd-Tabs--card > .cxd-Tabs-linksContainer-wrapper { background: var(--Tabs--card-bg); } .cxd-Tabs--card > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-addable { margin-left: 0; padding: 0; padding-top: var(--Tabs--card-add-gap-top); margin-right: var(--Tabs--card-add-gap); } .cxd-Tabs--card > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer .cxd-Tabs-addable { padding: 0; } .cxd-Tabs--card > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-arrow { padding: var(--Tabs--card-arrow-gap) var(--Tabs--card-add-gap) 0; margin-bottom: 0; } .cxd-Tabs--card > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links { padding: var(--Tabs--card-padding); border-top: var(--Tabs--card-border-width) var(--Tabs--card-border-style) var(--Tabs--card-borderTopColor); } .cxd-Tabs--card > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li { padding: var(--Tabs--card-linkPadding); margin-right: var(--Tabs--card-linkMargin); border-top-left-radius: var(--Tabs--card-borderRadius); border-top-right-radius: var(--Tabs--card-borderRadius); background: var(--Tabs--card-linkBg); cursor: pointer; } .cxd-Tabs--card > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li > a:first-child { padding: 0; border: none; color: var(--Tabs--card-color); font-size: var(--Tabs--card-fontSize); font-weight: var(--Tabs--card-fontWeight); line-height: var(--Tabs--card-lineHeight); } .cxd-Tabs--card > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li.is-active { color: var(--Tabs--card-active-color); background: var(--Tabs--card-onActive-bg); } .cxd-Tabs--card > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li.is-active > a:first-child { color: var(--Tabs--card-active-color); font-size: var(--Tabs--card-active-fontSize); font-weight: var(--Tabs--card-active-fontWeight); line-height: var(--Tabs--card-active-lineHeight); } .cxd-Tabs--card > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li.is-disabled { cursor: not-allowed; background: var(--Tabs--card-disabled-linkBg); } .cxd-Tabs--card > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li.is-disabled > a:first-child { color: var(--Tabs--card-disabled-color); font-size: var(--Tabs--card-disabled-fontSize); font-weight: var(--Tabs--card-disabled-fontWeight); line-height: var(--Tabs--card-disabled-lineHeight); } .cxd-Tabs--card > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li:not(.is-disabled):hover, .cxd-Tabs--card > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li:not(.is-disabled):focus { background: var(--Tabs--card-hover-linkBg); } .cxd-Tabs--card > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li:not(.is-disabled):hover > a:first-child, .cxd-Tabs--card > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li:not(.is-disabled):focus > a:first-child { color: var(--Tabs--card-hover-color); font-size: var(--Tabs--card-hover-fontSize); font-weight: var(--Tabs--card-hover-fontWeight); line-height: var(--Tabs--card-hover-lineHeight); } .cxd-Tabs--card > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-toolbar { padding: var(--Tabs--card-padding); margin: 0; } .cxd-Tabs--card > .cxd-Tabs-content { border-width: 0; } .cxd-Tabs--radio > .cxd-Tabs-linksContainer-wrapper { margin-bottom: 0.625rem; } .cxd-Tabs--radio > .cxd-Tabs-linksContainer-wrapper .cxd-Tabs-addable { padding: 0; } .cxd-Tabs--radio > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-arrow { margin-bottom: 0; } .cxd-Tabs--radio > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links { border: 0; } .cxd-Tabs--radio > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li { margin: 0; align-items: center; justify-content: center; text-align: center; margin: 0; min-width: 68px; height: var(--Tabs--radio-height); background: var(--Tabs--radio-bg); border-style: var(--Tabs--radio-top-border-style) var(--Tabs--radio-right-border-style) var(--Tabs--radio-bottom-border-style) var(--Tabs--radio-left-border-style); border-color: var(--Tabs--radio-top-border-color) var(--Tabs--radio-right-border-color) var(--Tabs--radio-bottom-border-color) var(--Tabs--radio-left-border-color); border-width: var(--Tabs--radio-top-border-width) var(--Tabs--radio-right-border-width) var(--Tabs--radio-bottom-border-width) var(--Tabs--radio-left-border-width); } .cxd-Tabs--radio > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li:hover, .cxd-Tabs--radio > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li:focus { background: var(--Tabs--radio-hover-bg); border-style: var(--Tabs--radio-hover-top-border-style) var(--Tabs--radio-hover-right-border-style) var(--Tabs--radio-hover-bottom-border-style) var(--Tabs--radio-hover-left-border-style); border-color: var(--Tabs--radio-hover-top-border-color) var(--Tabs--radio-hover-right-border-color) var(--Tabs--radio-hover-bottom-border-color) var(--Tabs--radio-hover-left-border-color); border-width: var(--Tabs--radio-hover-top-border-width) var(--Tabs--radio-hover-right-border-width) var(--Tabs--radio-hover-bottom-border-width) var(--Tabs--radio-hover-left-border-width); } .cxd-Tabs--radio > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li:hover > a:first-child, .cxd-Tabs--radio > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li:focus > a:first-child { font-size: var(--Tabs--radio-hover-fontSize); color: var(--Tabs--radio-hover-color); font-weight: var(--Tabs--radio-hover-fontWeight); line-height: var(--Tabs--radio-hover-lineHeight); } .cxd-Tabs--radio > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li > a:first-child { padding: 0; border-radius: 0; font-size: var(--Tabs--radio-fontSize); color: var(--Tabs--radio-color); font-weight: var(--Tabs--radio-fontWeight); line-height: var(--Tabs--radio-lineHeight); border: none; } .cxd-Tabs--radio > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li.is-active { position: relative; z-index: 1; background: var(--Tabs--radio-active-bg); border-style: var(--Tabs--radio-active-top-border-style) var(--Tabs--radio-active-right-border-style) var(--Tabs--radio-active-bottom-border-style) var(--Tabs--radio-active-left-border-style); border-color: var(--Tabs--radio-active-top-border-color) var(--Tabs--radio-active-right-border-color) var(--Tabs--radio-active-bottom-border-color) var(--Tabs--radio-active-left-border-color); border-width: var(--Tabs--radio-active-top-border-width) var(--Tabs--radio-active-right-border-width) var(--Tabs--radio-active-bottom-border-width) var(--Tabs--radio-active-left-border-width); } .cxd-Tabs--radio > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li.is-active > a:first-child { font-size: var(--Tabs--radio-active-fontSize); color: var(--Tabs--radio-active-color); font-weight: var(--Tabs--radio-active-fontWeight); line-height: var(--Tabs--radio-active-lineHeight); } .cxd-Tabs--radio > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li.is-active > .cxd-Tabs-link-close { fill: var(--Tabs--radio-active-color); } .cxd-Tabs--radio > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li.is-disabled { background: var(--Tabs--radio-disabled-bg); border-style: var(--Tabs--radio-disabled-top-border-style) var(--Tabs--radio-disabled-right-border-style) var(--Tabs--radio-disabled-bottom-border-style) var(--Tabs--radio-disabled-left-border-style); border-color: var(--Tabs--radio-disabled-top-border-color) var(--Tabs--radio-disabled-right-border-color) var(--Tabs--radio-disabled-bottom-border-color) var(--Tabs--radio-disabled-left-border-color); border-width: var(--Tabs--radio-disabled-top-border-width) var(--Tabs--radio-disabled-right-border-width) var(--Tabs--radio-disabled-bottom-border-width) var(--Tabs--radio-disabled-left-border-width); } .cxd-Tabs--radio > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li.is-disabled > a:first-child { font-size: var(--Tabs--radio-disabled-fontSize); color: var(--Tabs--radio-disabled-color); font-weight: var(--Tabs--radio-disabled-fontWeight); line-height: var(--Tabs--radio-disabled-lineHeight); } .cxd-Tabs--radio > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li + li { margin-left: calc(var(--Tabs--radio-left-border-width) * -1); } .cxd-Tabs--radio > .cxd-Tabs-content { border-top: var(--Tabs-borderWidth) solid var(--Tabs-borderColor); } .cxd-Tabs--tiled > .cxd-Tabs-linksContainer-wrapper { align-items: stretch; border-bottom: none; } .cxd-Tabs--tiled > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer { min-width: 0; min-height: 0; flex: 1; align-items: stretch; } .cxd-Tabs--tiled > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-arrow { margin-bottom: 0; padding: 0 10px; height: auto; align-items: center; justify-content: center; border-width: var(--Tabs-borderWidth); border-style: solid; border-color: var(--Tabs-borderColor); } .cxd-Tabs--tiled > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer.cxd-Tabs-linksContainer--overflow > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > .cxd-Tabs-link:first-of-type { border-left-width: 0; } .cxd-Tabs--tiled > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer.cxd-Tabs-linksContainer--overflow > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > .cxd-Tabs-link:last-of-type { border-right-width: 0; } .cxd-Tabs--tiled > .cxd-Tabs-linksContainer-wrapper .cxd-Tabs-addable { padding: 0 var(--Tabs--tiled-add-gap); margin-left: 0; margin-bottom: 0; white-space: nowrap; border-style: solid; border-color: var(--Tabs-borderColor); border-width: var(--Tabs-borderWidth); border-left-width: 0; } .cxd-Tabs--tiled > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links { width: 100%; display: flex; flex-direction: row; padding-left: var(--Tabs--tiled-left-border-width); border-bottom: 0; } .cxd-Tabs--tiled > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li { max-width: unset; flex-grow: 1; text-align: center; margin-left: calc(var(--Tabs--tiled-left-border-width) * -1); border-style: var(--Tabs--tiled-top-border-style) var(--Tabs--tiled-right-border-style) var(--Tabs--tiled-bottom-border-style) var(--Tabs--tiled-left-border-style); border-color: var(--Tabs--tiled-top-border-color) var(--Tabs--tiled-right-border-color) var(--Tabs--tiled-bottom-border-color) var(--Tabs--tiled-left-border-color); border-width: var(--Tabs--tiled-top-border-width) var(--Tabs--tiled-right-border-width) var(--Tabs--tiled-bottom-border-width) var(--Tabs--tiled-left-border-width); padding: var(--Tabs--tiled-paddingTop) var(--Tabs--tiled-paddingRight) var(--Tabs--tiled-paddingBottom) var(--Tabs--tiled-paddingLeft); cursor: pointer; } .cxd-Tabs--tiled > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li:hover, .cxd-Tabs--tiled > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li:focus { position: relative; z-index: 1; border-style: var(--Tabs--tiled-hover-top-border-style) var(--Tabs--tiled-hover-right-border-style) var(--Tabs--tiled-hover-bottom-border-style) var(--Tabs--tiled-hover-left-border-style); border-color: var(--Tabs--tiled-hover-top-border-color) var(--Tabs--tiled-hover-right-border-color) var(--Tabs--tiled-hover-bottom-border-color) var(--Tabs--tiled-hover-left-border-color); border-width: var(--Tabs--tiled-hover-top-border-width) var(--Tabs--tiled-hover-right-border-width) var(--Tabs--tiled-hover-bottom-border-width) var(--Tabs--tiled-hover-left-border-width); } .cxd-Tabs--tiled > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li:hover > a:first-child, .cxd-Tabs--tiled > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li:focus > a:first-child { color: var(--Tabs--tiled-hover-color); font-size: var(--Tabs--tiled-hover-fontSize); font-weight: var(--Tabs--tiled-hover-fontWeight); line-height: var(--Tabs--tiled-hover-lineHeight); } .cxd-Tabs--tiled > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li > a:first-child { color: var(--Tabs--tiled-color); font-size: var(--Tabs--tiled-fontSize); font-weight: var(--Tabs--tiled-fontWeight); line-height: var(--Tabs--tiled-lineHeight); margin: 0; border-radius: 0; padding: 0; min-width: 0; min-height: 0; flex: 1; border: none; } .cxd-Tabs--tiled > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li.is-active { cursor: default; border-style: var(--Tabs--tiled-active-top-border-style) var(--Tabs--tiled-active-right-border-style) var(--Tabs--tiled-active-bottom-border-style) var(--Tabs--tiled-active-left-border-style); border-color: var(--Tabs--tiled-active-top-border-color) var(--Tabs--tiled-active-right-border-color) var(--Tabs--tiled-active-bottom-border-color) var(--Tabs--tiled-active-left-border-color); border-width: var(--Tabs--tiled-active-top-border-width) var(--Tabs--tiled-active-right-border-width) var(--Tabs--tiled-active-bottom-border-width) var(--Tabs--tiled-active-left-border-width); } .cxd-Tabs--tiled > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li.is-active > a:first-child { color: var(--Tabs--tiled-active-color); font-size: var(--Tabs--tiled-active-fontSize); font-weight: var(--Tabs--tiled-active-fontWeight); line-height: var(--Tabs--tiled-active-lineHeight); } .cxd-Tabs--tiled > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li.is-disabled { cursor: not-allowed; color: var(--Tabs--tiled-disabled-color); font-size: var(--Tabs--tiled-disabled-fontSize); font-weight: var(--Tabs--tiled-disabled-fontWeight); line-height: var(--Tabs--tiled-disabled-lineHeight); border-style: var(--Tabs--tiled-disabled-top-border-style) var(--Tabs--tiled-disabled-right-border-style) var(--Tabs--tiled-disabled-bottom-border-style) var(--Tabs--tiled-disabled-left-border-style); border-color: var(--Tabs--tiled-disabled-top-border-color) var(--Tabs--tiled-disabled-right-border-color) var(--Tabs--tiled-disabled-bottom-border-color) var(--Tabs--tiled-disabled-left-border-color); border-width: var(--Tabs--tiled-disabled-top-border-width) var(--Tabs--tiled-disabled-right-border-width) var(--Tabs--tiled-disabled-bottom-border-width) var(--Tabs--tiled-disabled-left-border-width); } .cxd-Tabs--tiled > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li.is-disabled > a:first-child { color: var(--Tabs--tiled-disabled-color); font-size: var(--Tabs--tiled-disabled-fontSize); font-weight: var(--Tabs--tiled-disabled-fontWeight); line-height: var(--Tabs--tiled-disabled-lineHeight); } .cxd-Tabs--vertical { display: flex; min-height: 12.5rem; border: 1px solid var(--colors-neutral-text-8); border-radius: 0; } .cxd-Tabs--vertical > .cxd-Tabs-linksWrapper { flex-direction: column; background: var(--Tabs--vertical-bg); border-bottom: 0; } .cxd-Tabs--vertical > .cxd-Tabs-linksWrapper > .cxd-Tabs-links { width: var(--Tabs--vertical-width); border: none; flex-direction: column; } .cxd-Tabs--vertical > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li { margin: 0 0 0 -1px; display: block; } .cxd-Tabs--vertical > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li > a:first-child { border-radius: 0; border: 0; border-left-style: var(--Tabs--vertical-active-border-style); border-left-width: var(--Tabs--vertical-onActive-borderWidth); border-left-color: transparent; margin: 0; color: var(--Tabs--vertical-color); font-size: var(--Tabs--vertical-fontSize); font-weight: var(--Tabs--vertical-fontWeight); line-height: var(--Tabs--vertical-lineHeight); padding: var(--Tabs--vertical-paddingTop) var(--Tabs--vertical-paddingRight) var(--Tabs--vertical-paddingBottom) var(--Tabs--vertical-paddingLeft); } .cxd-Tabs--vertical > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li > a:first-child:hover, .cxd-Tabs--vertical > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li > a:first-child:focus { color: var(--Tabs--vertical-hover-color); font-size: var(--Tabs--vertical-hover-fontSize); font-weight: var(--Tabs--vertical-hover-fontWeight); line-height: var(--Tabs--vertical-hover-lineHeight); } .cxd-Tabs--vertical > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li.is-disabled > a:first-child { color: var(--Tabs--vertical-disabled-color); font-size: var(--Tabs--vertical-disabled-fontSize); font-weight: var(--Tabs--vertical-disabled-fontWeight); line-height: var(--Tabs--vertical-disabled-lineHeight); } .cxd-Tabs--vertical > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li.is-active > a:first-child { color: var(--Tabs--vertical-onActive-color); font-size: var(--Tabs--vertical-active-fontSize); font-weight: var(--Tabs--vertical-active-fontWeight); line-height: var(--Tabs--vertical-active-lineHeight); border-left-style: var(--Tabs--vertical-active-border-style); border-left-color: var(--Tabs--vertical-onActive-border); border-left-width: var(--Tabs--vertical-onActive-borderWidth); } .cxd-Tabs--vertical > .cxd-Tabs-linksWrapper + .cxd-Tabs-content { width: calc(100% - var(--Tabs--vertical-width)); } .cxd-Tabs--vertical > .cxd-Tabs-content { border: none; flex-grow: 1; } .cxd-Tabs--vertical > .cxd-Tabs-content > .cxd-Tabs-pane { height: 100%; } .cxd-Tabs--sidebar { display: flex; height: 100%; } .cxd-Tabs--sidebar.sidebar--left { flex-direction: row; } .cxd-Tabs--sidebar.sidebar--left > .cxd-Tabs-content { border-right: none; } .cxd-Tabs--sidebar.sidebar--right { flex-direction: row-reverse; } .cxd-Tabs--sidebar.sidebar--right > .cxd-Tabs-content { border-left: none; } .cxd-Tabs--sidebar > .cxd-Tabs-linksWrapper { flex: 0 0 var(--Tabs--sidebar-sideWidth); align-items: flex-start; border: none; } .cxd-Tabs--sidebar > .cxd-Tabs-linksWrapper > .cxd-Tabs-links { position: relative; margin: 0; padding-top: var(--Tabs--sidebar-sideMargin); flex-grow: 1; border: none; flex-direction: column; border: 0; } .cxd-Tabs--sidebar > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li { display: flex; margin-bottom: var(--Tabs--sidebar-sideMargin); padding: 0; flex-direction: column; justify-content: flex-start; align-items: center; border: 0; } .cxd-Tabs--sidebar > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li.is-disabled > a:first-child { color: var(--Tabs--sidebar-disabled-color); font-size: var(--Tabs--sidebar-disabled-fontSize); font-weight: var(--Tabs--sidebar-disabled-fontWeight); line-height: var(--Tabs--sidebar-disabled-lineHeight); } .cxd-Tabs--sidebar > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li > a:first-child { padding: 0; border: 0; margin: 0; display: flex; flex-direction: column; align-items: center; color: var(--Tabs--sidebar-color); font-size: var(--Tabs--sidebar-fontSize); font-weight: var(--Tabs--sidebar-fontWeight); line-height: var(--Tabs--sidebar-lineHeight); } .cxd-Tabs--sidebar > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li > a:first-child .cxd-Icon { font-size: var(--Tabs--sidebar-iconSize); height: var(--Tabs--sidebar-iconSize); margin-bottom: var(--Tabs--sidebar-iconMargin); margin-right: 0; top: 0; } .cxd-Tabs--sidebar > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li > a:first-child:hover, .cxd-Tabs--sidebar > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li > a:first-child:focus { color: var(--Tabs--sidebar-hover-color); font-size: var(--Tabs--sidebar-hover-fontSize); font-weight: var(--Tabs--sidebar-hover-fontWeight); line-height: var(--Tabs--sidebar-hover-lineHeight); } .cxd-Tabs--sidebar > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li.is-active > a:first-child { color: var(--Tabs--sidebar-active-color); font-size: var(--Tabs--sidebar-active-fontSize); font-weight: var(--Tabs--sidebar-active-fontWeight); line-height: var(--Tabs--sidebar-active-lineHeight); } .cxd-Tabs--sidebar > .cxd-Tabs-content { flex-grow: 1; border-bottom: none; } .cxd-Tabs--sidebar > .cxd-Tabs-content > .cxd-Tabs-pane { height: 100%; } .cxd-Tabs--chrome > .cxd-Tabs-linksWrapper { background: var(--Tabs--chrome-bg); border-bottom: none; overflow-x: hidden; } .cxd-Tabs--chrome > .cxd-Tabs-linksWrapper > .cxd-Tabs-addable { margin-left: 0; padding: 0; padding-top: 10px; } .cxd-Tabs--chrome > .cxd-Tabs-linksWrapper > .cxd-Tabs-links { border-bottom: 0; padding: 0 0.625rem; padding-top: 0.5rem; display: flex; width: 100%; } .cxd-Tabs--chrome > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li { position: relative; margin-bottom: 0; white-space: nowrap; min-width: 0; max-width: 15.625rem; padding: 0.4375rem 1.25rem 0.375rem; cursor: pointer; flex: 1; overflow: inherit; } .cxd-Tabs--chrome > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li > a { /* 最少展示一个字 */ min-width: var(--fontSizeBase); } .cxd-Tabs--chrome > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li > a:first-child { background: none; border: none; position: relative; z-index: 5; overflow: hidden; padding: 0; text-overflow: ellipsis; } .cxd-Tabs--chrome > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li.is-active > a:first-child, .cxd-Tabs--chrome > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li.is-active > a:first-child:hover, .cxd-Tabs--chrome > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li.is-active > a:first-child:focus { background: none; border: none; } .cxd-Tabs--chrome > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li.is-active:after { display: none; } .cxd-Tabs--chrome > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li:not(:last-child):after { content: ""; width: 1px; height: calc(100% - var(--Tabs--chrome-radius-size) * 2); position: absolute; right: -2px; background: var(--Tabs--chrome-right-border-color); top: var(--Tabs--chrome-radius-size); } .cxd-Tabs--chrome > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li:hover .chrome-tab-background { z-index: 3; display: block; background-color: var(--Tabs--chrome-onHover-bg); } .cxd-Tabs--chrome > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li:hover .chrome-tab-background > svg { fill: var(--Tabs--chrome-onHover-bg); } .cxd-Tabs--chrome > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li:hover:after { display: none; } .cxd-Tabs--chrome > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li.is-active .chrome-tab-background { display: block; background-color: var(--Tabs-onActive-bg); } .cxd-Tabs--chrome > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li.is-active .chrome-tab-background > svg { fill: var(--Tabs-onActive-bg); } .cxd-Tabs--chrome > .cxd-Tabs-linksWrapper > .cxd-Tabs-links > li.is-disabled { cursor: not-allowed; } .cxd-Tabs--chrome .chrome-tab-background { display: none; position: absolute; z-index: 4; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; border-radius: var(--Tabs--chrome-radius-size) var(--Tabs--chrome-radius-size) 0 0; } .cxd-Tabs--chrome .chrome-tab-background > svg { width: var(--Tabs--chrome-radius-size); height: var(--Tabs--chrome-radius-size); bottom: 0; position: absolute; } .cxd-Tabs--chrome .chrome-tab-background > .chrome-tab-background--right { right: calc(var(--Tabs--chrome-radius-size) * -1); } .cxd-Tabs--chrome .chrome-tab-background > .chrome-tab-background--left { left: calc(var(--Tabs--chrome-radius-size) * -1); } .cxd-Tabs--simple > .cxd-Tabs-linksContainer-wrapper { border-bottom: none; } .cxd-Tabs--simple > .cxd-Tabs-linksContainer-wrapper .cxd-Tabs-addable { padding: 0; } .cxd-Tabs--simple > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-arrow { margin-bottom: 0; padding: 0; } .cxd-Tabs--simple > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links { border: none; } .cxd-Tabs--simple > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li { position: relative; border: none; padding: var(--Tabs--simple-split-size); } .cxd-Tabs--simple > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li:not(.is-disabled) > a { font-size: var(--Tabs--simple-fontSize); color: var(--Tabs--simple-color); font-weight: var(--Tabs--simple-fontWeight); line-height: var(--Tabs--simple-lineHeight); } .cxd-Tabs--simple > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li:not(.is-disabled):hover > a { font-size: var(--Tabs--simple-hover-fontSize); color: var(--Tabs--simple-hover-color) !important; font-weight: var(--Tabs--simple-hover-fontWeight); line-height: var(--Tabs--simple-hover-lineHeight); } .cxd-Tabs--simple > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li.is-disabled > a { font-size: var(--Tabs--simple-disabled-fontSize); color: var(--Tabs--simple-disabled-color) !important; font-weight: var(--Tabs--simple-disabled-fontWeight); line-height: var(--Tabs--simple-disabled-lineHeight); } .cxd-Tabs--simple > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li.is-active > a { font-size: var(--Tabs--simple-active-fontSize); color: var(--Tabs--simple-active-color) !important; font-weight: var(--Tabs--simple-active-fontWeight); line-height: var(--Tabs--simple-active-lineHeight); } .cxd-Tabs--simple > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li::after { content: ""; position: absolute; top: 50%; right: 0; height: var(--Tabs--simple-fontSize); transform: translateY(-50%); border: var(--Tabs--simple-split-width) var(--Tabs--simple-split-style) var(--Tabs--simple-split-color); } .cxd-Tabs--simple > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li > .cxd-Tabs-link-close { cursor: pointer; } .cxd-Tabs--simple > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li:last-of-type::after { content: none; } .cxd-Tabs--simple > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li:not(.is-disabled):hover .cxd-Tabs-link-close { fill: var(--primary); } .cxd-Tabs--simple > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li > a:first-child { padding: 0; } .cxd-Tabs--simple > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li > a:first-child, .cxd-Tabs--simple > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li > a:first-child:hover, .cxd-Tabs--simple > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > li > a:first-child:focus { border: none; } .cxd-Tabs--simple > .cxd-Tabs-content { border: none; } .cxd-Tabs--strong > .cxd-Tabs-linksContainer-wrapper { align-items: stretch; border-bottom: var(--Tabs-borderWidth) solid var(--Tabs-borderColor); } .cxd-Tabs--strong > .cxd-Tabs-linksContainer-wrapper .cxd-Tabs-addable { width: var(--Tabs--strong-add-size); margin-left: var(--Tabs--card-arrow-gap); padding: 0; margin-bottom: calc(var(--Tabs-borderWidth) * -1); align-items: center; justify-content: center; font-size: 0; border: var(--Tabs-borderWidth) solid var(--Tabs-borderColor); border-top-left-radius: var(--Tabs-borderRadius); border-top-right-radius: var(--Tabs-borderRadius); flex: none; } .cxd-Tabs--strong > .cxd-Tabs-linksContainer-wrapper .cxd-Tabs-addable > .cxd-Tabs-addable-icon { margin-right: 0; } .cxd-Tabs--strong > .cxd-Tabs-linksContainer-wrapper .cxd-Tabs-addable:hover { color: var(--Tabs--line-onHover-color); } .cxd-Tabs--strong > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer { margin-bottom: calc(var(--Tabs-borderWidth) * -1); } .cxd-Tabs--strong > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer .cxd-Tabs-linksContainer-arrow { width: var(--Tabs--strong-arrow-size); margin-bottom: 0; padding: 0; justify-content: center; border: var(--Tabs-borderWidth) solid var(--Tabs-borderColor); border-top-right-radius: var(--Tabs-borderRadius); box-sizing: border-box; } .cxd-Tabs--strong > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer .cxd-Tabs-linksContainer-arrow--left { padding-right: 0; border-top-left-radius: var(--Tabs-borderRadius); margin-right: 0.5rem; } .cxd-Tabs--strong > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer .cxd-Tabs-linksContainer-arrow--right { padding-left: 0; border-top-left-radius: var(--Tabs-borderRadius); margin-left: 0.5rem; } .cxd-Tabs--strong > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > .cxd-Tabs-link { margin: var(--Tabs--strong-marginTop) var(--Tabs--strong-marginRight) var(--Tabs--strong-marginBottom) var(--Tabs--strong-marginLeft); padding: var(--Tabs--strong-paddingTop) var(--Tabs--strong-paddingRight) var(--Tabs--strong-paddingBottom) var(--Tabs--strong-paddingLeft); background: var(--Tabs--strong-bg); border-radius: var(--Tabs--strong-top-left-border-radius) var(--Tabs--strong-top-right-border-radius) var(--Tabs--strong-bottom-right-border-radius) var(--Tabs--strong-bottom-left-border-radius); border-color: var(--Tabs--strong-top-border-color) var(--Tabs--strong-right-border-color) var(--Tabs--strong-bottom-border-color) var(--Tabs--strong-left-border-color); border-style: var(--Tabs--strong-top-border-style) var(--Tabs--strong-right-border-style) var(--Tabs--strong-bottom-border-style) var(--Tabs--strong-left-border-style); border-width: var(--Tabs--strong-top-border-width) var(--Tabs--strong-right-border-width) var(--Tabs--strong-bottom-border-width) var(--Tabs--strong-left-border-width); cursor: pointer; } .cxd-Tabs--strong > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > .cxd-Tabs-link:not(.is-disabled) > a { font-size: var(--Tabs--strong-fontSize); color: var(--Tabs--strong-color); font-weight: var(--Tabs--strong-fontWeight); line-height: var(--Tabs--strong-lineHeight); } .cxd-Tabs--strong > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > .cxd-Tabs-link:not(.is-disabled):hover { background: var(--Tabs--strong-hover-bg); border-color: var(--Tabs--strong-hover-top-border-color) var(--Tabs--strong-hover-right-border-color) var(--Tabs--strong-hover-bottom-border-color) var(--Tabs--strong-hover-left-border-color); border-style: var(--Tabs--strong-hover-top-border-style) var(--Tabs--strong-hover-right-border-style) var(--Tabs--strong-hover-bottom-border-style) var(--Tabs--strong-hover-left-border-style); border-width: var(--Tabs--strong-hover-top-border-width) var(--Tabs--strong-hover-right-border-width) var(--Tabs--strong-hover-bottom-border-width) var(--Tabs--strong-hover-left-border-width); } .cxd-Tabs--strong > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > .cxd-Tabs-link:not(.is-disabled):hover > a { font-size: var(--Tabs--strong-hover-fontSize); color: var(--Tabs--strong-hover-color) !important; font-weight: var(--Tabs--strong-hover-fontWeight); line-height: var(--Tabs--strong-hover-lineHeight); } .cxd-Tabs--strong > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > .cxd-Tabs-link.is-disabled { cursor: not-allowed; background: var(--Tabs--strong-disabled-bg); border-color: var(--Tabs--strong-disabled-top-border-color) var(--Tabs--strong-disabled-right-border-color) var(--Tabs--strong-disabled-bottom-border-color) var(--Tabs--strong-disabled-left-border-color); border-style: var(--Tabs--strong-disabled-top-border-style) var(--Tabs--strong-disabled-right-border-style) var(--Tabs--strong-disabled-bottom-border-style) var(--Tabs--strong-disabled-left-border-style); border-width: var(--Tabs--strong-disabled-top-border-width) var(--Tabs--strong-disabled-right-border-width) var(--Tabs--strong-disabled-bottom-border-width) var(--Tabs--strong-disabled-left-border-width); } .cxd-Tabs--strong > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > .cxd-Tabs-link.is-disabled > a { font-size: var(--Tabs--strong-disabled-fontSize); color: var(--Tabs--strong-disabled-color) !important; font-weight: var(--Tabs--strong-disabled-fontWeight); line-height: var(--Tabs--strong-disabled-lineHeight); } .cxd-Tabs--strong > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > .cxd-Tabs-link.is-active { background: var(--Tabs--strong-active-bg); border-color: var(--Tabs--strong-active-top-border-color) var(--Tabs--strong-active-right-border-color) var(--Tabs--strong-active-bottom-border-color) var(--Tabs--strong-active-left-border-color); border-style: var(--Tabs--strong-active-top-border-style) var(--Tabs--strong-active-right-border-style) var(--Tabs--strong-active-bottom-border-style) var(--Tabs--strong-active-left-border-style); border-width: var(--Tabs--strong-active-top-border-width) var(--Tabs--strong-active-right-border-width) var(--Tabs--strong-active-bottom-border-width) var(--Tabs--strong-active-left-border-width); } .cxd-Tabs--strong > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > .cxd-Tabs-link.is-active > a { font-size: var(--Tabs--strong-active-fontSize); color: var(--Tabs--strong-active-color) !important; font-weight: var(--Tabs--strong-active-fontWeight); line-height: var(--Tabs--strong-active-lineHeight); } .cxd-Tabs--strong > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > .cxd-Tabs-link:not(.is-disabled):hover .cxd-Tabs-link-close { fill: var(--primary); } .cxd-Tabs--strong > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > .cxd-Tabs-link:last-of-type { margin-right: 0; } .cxd-Tabs--strong > .cxd-Tabs-linksContainer-wrapper > .cxd-Tabs-linksContainer > .cxd-Tabs-linksContainer-main > .cxd-Tabs-links > .cxd-Tabs-link > a:first-child { padding: 0; margin: 0; border: none; } .cxd-Tabs-toolbar { flex: 1 1 auto; margin-left: var(--gap-base); display: flex; flex-direction: row; align-items: center; justify-content: flex-end; } /* 移动端样式调整 */ @media (max-width: 767px) { .cxd-Tabs--line .cxd-Tabs-linksContainer-wrapper::before { border-bottom-width: 1px; transform: scaleY(0.5); } } .cxd-Nav { position: relative; cursor: pointer; background-color: var(--Layout-light-backgroundColor); font-size: var(--Nav-item-fontSize); line-height: var(--Nav-Item-height); min-height: 0.625rem; color: var(--colors-neutral-text-2); } .cxd-Nav-horizontal { line-height: var(--Nav-Item-height--horizontal); } .cxd-Nav .cxd-Nav-dropIndicator { position: absolute; background: var(--Nav-item-onActive-color); height: 0.125rem; } .cxd-Nav--searchable { display: flex; } .cxd-Nav--searchable:not(.cxd-Nav-horizontal) { flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; } .cxd-Nav--searchable:not(.cxd-Nav-horizontal) .cxd-Nav-SearchBox.is-active { width: 100%; } .cxd-Nav--searchable.cxd-Nav-horizontal { flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; } .cxd-Nav--searchable.cxd-Nav-horizontal .cxd-Nav-SearchBox { margin-left: 1rem; } .cxd-Page { width: 100%; height: 100%; background: var(--Page-main-bg); } .cxd-Page-header { padding: var(--Page-header-paddingY) var(--Page-header-paddingX); } .cxd-Page-main { height: 100%; display: flex; flex-direction: column; } .cxd-Page-content { padding: var(--Page-content-paddingY) var(--Page-content-paddingX); position: relative; height: 100%; width: 100%; } .cxd-Page-main > .cxd-Page-header { border-bottom: var(--borderWidth) solid var(--borderColor); } .cxd-Page-headerRow { border-bottom: var(--borderWidth) solid var(--borderColor); display: flex; flex-direction: row; align-items: center; } .cxd-Page-headerRow .cxd-Page-header, .cxd-Page-headerRow .cxd-Page-toolbar { flex-grow: 1; min-height: 100%; } .cxd-Page-headerRow .cxd-Page-toolbar { text-align: right; padding-right: var(--gap-base); display: flex; flex-direction: row; justify-content: flex-end; align-items: center; flex-wrap: wrap; } .cxd-Page-title { margin: 0; padding: 0; color: var(--Page-title-color); line-height: var(--Page-title-lineHeight); font-size: var(--Page-title-fontSize); font-weight: var(--Page-title-fontWeight); } .cxd-Page-body { padding: var(--Page-body-padding); flex: 1 auto; } .cxd-Page-asideTplWrapper { padding: var(--gap-xs); } .cxd-Page-asideResizor { position: absolute; right: -0.375rem; top: 50%; cursor: ew-resize; writing-mode: vertical-lr; width: 0.75rem; height: 1.5rem; margin-top: -0.75rem; border: 0.0625rem solid #dee2e6; background-color: #fff; border-radius: 0.125rem; font-size: 12px; line-height: 0.625rem; text-align: center; -webkit-user-select: none; -moz-user-select: none; user-select: none; color: #666; } .cxd-Page-asideResizor:hover { color: #000; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08); } .cxd-Page-asideResizor:after { content: "···"; } .cxd-Page-toolbar > * + * { margin-left: var(--gap-xs); } @media (min-width: 768px) { .cxd-Page-aside { flex-shrink: 0; width: var(--Page-aside-width); border-right: var(--borderWidth) solid var(--borderColor); } .cxd-Page-aside::before { content: ""; position: absolute; width: inherit; top: 0; bottom: 0; z-index: -1; background: inherit; border: inherit; } .cxd-Page-aside--withWidth { min-width: var(--Page-aside-width); max-width: var(--Page-aside-maxWidth); } .cxd-Page--withSidebar { display: flex; flex-direction: row; align-items: stretch; } .cxd-Page--withSidebar > .cxd-Page-content, .cxd-Page--withSidebar > .cxd-PullRefresh { width: 0; flex-grow: 1; } .cxd-Page--asideSticky > .cxd-Page-aside { position: sticky; top: var(--affix-offset-top); max-height: calc(100vh - var(--affix-offset-top) - var(--affix-offset-bottom)); overflow-x: hidden; overflow-y: auto; } } .cxd-Remark { display: inline-block; vertical-align: middle; margin-left: var(--Remark-marginLeft); cursor: pointer; text-align: center; } .cxd-Remark > span { color: var(--Remark-iconColor); font-size: var(--fontSizeSm); } .cxd-Remark-icon { color: var(--Remark-iconColor); font-size: var(--Remark-icon-fontSize); background: var(--Remark-bg); border: var(--Remark-borderWidth) solid var(--Remark-borderColor); width: var(--Remark-width); height: var(--Remark-width); line-height: 1; display: inline-flex; vertical-align: baseline; align-self: center; align-items: center; justify-content: center; font-size: var(--fontSizeSm); -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-Remark-icon > svg { width: 100%; height: 100%; display: block; } .cxd-Remark-icon--circle { border-radius: 50%; } .cxd-Remark > span + .cxd-Remark-icon { margin-left: var(--gap-xs); } .cxd-Remark:hover > .cxd-Remark-icon { color: var(--Remark-onHover-iconColor); background: var(--Remark-onHover-bg); border-color: var(--Remark-onHover-borderColor); } .cxd-Remark > svg { width: calc(var(--Remark-width) - 0.125rem); height: calc(var(--Remark-width) - 0.125rem); color: var(--Remark-iconColor); } .cxd-Remark:hover > svg { color: var(--Remark-onHover-iconColor); } .cxd-Chart { position: relative; } .cxd-Chart-placeholder { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .cxd-Chart-content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .cxd-Chart > .visibility-sensor { height: 100%; } .cxd-Video { min-width: 200px; } .cxd-Video-cursor { position: absolute; border: 2px solid var(--info); transition: all var(--animation-duration) ease-out; } .cxd-Video-frameList .cxd-Video-frameItem { cursor: pointer; } .cxd-Video-frameLabel { text-align: center; } .cxd-Video .video-react-paused .video-react-big-play-button.big-play-button-hide { display: block; } .cxd-Video-player { position: relative; } .cxd-Video-error { position: absolute; display: block; width: 100%; padding: 5px 10px; color: var(--danger); background: rgba(255, 255, 255, 0.4); text-align: center; top: 0; } .cxd-Audio-original { display: none; } .cxd-Audio--inline { display: inline-block; } .cxd-Audio { box-sizing: border-box; height: var(--Audio-height); line-height: var(--Audio-lineHeight); border: var(--Audio-border); padding-left: var(--Audio-item-margin); overflow: hidden; } .cxd-Audio-controls { display: flex; flex-direction: row; align-items: center; } .cxd-Audio-rates { width: var(--Audio-rate-width); height: var(--Audio-rate-height); text-align: center; background: var(--Audio-rate-bg); cursor: pointer; margin-right: var(--Audio-item-margin); } .cxd-Audio-rateControl { margin-right: var(--Audio-item-margin); } .cxd-Audio-rateControl::after { clear: both; content: ""; } .cxd-Audio-rateControl .cxd-Audio-rateControlItem { width: var(--Audio-rate-width); height: var(--Audio-rate-height); background: var(--Audio-rate-bg); cursor: pointer; text-align: center; float: left; box-sizing: border-box; border-right: var(--Audio-rateControlItem-borderRight); } .cxd-Audio-play { width: var(--Audio-play-width); cursor: pointer; margin-right: var(--Audio-item-margin); } .cxd-Audio-play svg { width: var(--Audio-svg-width); height: var(--Audio-svg-height); position: relative; top: var(--Audio-svg-top); } .cxd-Audio-times { min-width: var(--Audio-times-width); margin-right: var(--Audio-item-margin); cursor: default; flex-shrink: 0; } .cxd-Audio-process { flex: auto; cursor: pointer; min-width: var(--Audio-process-minWidth); margin-right: var(--Audio-item-margin); } .cxd-Audio-process input[type=range] { -webkit-appearance: none; outline: none; border: none; padding: 0; background: none; } .cxd-Audio-process input[type=range]::-webkit-slider-runnable-track { background: var(--Audio-track-bg); height: var(--Audio-track-height); border-radius: var(--Audio-track-borderRadius); border: var(--Audio-track-border); } .cxd-Audio-process input[type=range]::-webkit-slider-thumb { -webkit-appearance: none !important; border-radius: 100%; cursor: pointer; background: var(--Audio-thumb-bg); width: var(--Audio-thumb-width); height: var(--Audio-thumb-height); margin-top: var(--Audio-thumb-marginTop); } .cxd-Audio-volume { width: var(--Audio-volume-width); height: var(--Audio-volume-height); line-height: var(--Audio-volume-lineHeight); cursor: pointer; margin-right: var(--Audio-item-margin); } .cxd-Audio-volume svg { width: var(--Audio-svg-width); height: var(--Audio-svg-height); position: relative; top: var(--Audio-svg-top); } .cxd-Audio-volumeControl { display: flex; flex-direction: row; align-items: center; min-width: var(--Audio-volumeControl-width); height: var(--Audio-volume-height); line-height: var(--Audio-volume-lineHeight); margin-right: var(--Audio-item-margin); } .cxd-Audio-volumeControl input[type=range] { -webkit-appearance: none; outline: none; border: none; padding: 0; background: none; } .cxd-Audio-volumeControl input[type=range]::-webkit-slider-runnable-track { background: var(--Audio-track-bg); height: var(--Audio-track-height); border-radius: var(--Audio-track-borderRadius); border: var(--Audio-track-border); } .cxd-Audio-volumeControl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none !important; border-radius: 100%; cursor: pointer; background: var(--Audio-thumb-bg); width: var(--Audio-thumb-width); height: var(--Audio-thumb-height); margin-top: var(--Audio-thumb-marginTop); } .cxd-Audio-volumeControl .cxd-Audio-volumeControlIcon { margin-right: var(--Audio-item-margin); cursor: pointer; } .cxd-Audio-volumeControl svg { width: var(--Audio-svg-width); height: var(--Audio-svg-height); position: relative; top: var(--Audio-svg-top); } .cxd-Panel { margin: var(--Panel-marginTop) var(--Panel-marginRight) var(--Panel-marginBottom) var(--Panel-marginLeft); background: var(--Panel-bg-color); border-color: var(--Panel-top-border-color) var(--Panel-right-border-color) var(--Panel-bottom-border-color) var(--Panel-left-border-color); border-style: var(--Panel-top-border-style) var(--Panel-right-border-style) var(--Panel-bottom-border-style) var(--Panel-left-border-style); border-width: var(--Panel-borderWidth); border-radius: var(--Panel-borderRadius); box-shadow: var(--Panel-shadow); /* 主题 */ /* 子组件 */ } .cxd-Panel-fixedBottom { position: sticky; background: var(--white); bottom: var(--affix-offset-bottom); z-index: 900; } .cxd-Panel--default { border-color: var(--Panel-top-border-color) var(--Panel-right-border-color) var(--Panel-bottom-border-color) var(--Panel-left-border-color); } .cxd-Panel--default > .cxd-Panel-heading { background: var(--Panel-heading-bg-color); color: var(--Panel-heading-color); } .cxd-Panel--default > .cxd-Panel-heading .badge { color: var(--Panel--default-badgeColor); background: var(--Panel--default-badgeBg); } .cxd-Panel--default > .cxd-Panel-heading { border-color: var(--Panel-heading-top-border-color) var(--Panel-heading-right-border-color) var(--Panel-heading-bottom-border-color) var(--Panel-heading-left-border-color); } .cxd-Panel--primary { border-color: var(--primary); } .cxd-Panel--primary > .cxd-Panel-heading { background: var(--primary); color: var(--white); } .cxd-Panel--primary > .cxd-Panel-heading .badge { color: var(--primary); background: var(--white); } .cxd-Panel--primary > .cxd-Panel-heading, .cxd-Panel--primary > .cxd-Panel-footer { border-color: var(--primary); } .cxd-Panel--success { border-color: var(--success); } .cxd-Panel--success > .cxd-Panel-heading { background: var(--success); color: var(--white); } .cxd-Panel--success > .cxd-Panel-heading .badge { color: var(--success); background: var(--white); } .cxd-Panel--success > .cxd-Panel-heading, .cxd-Panel--success > .cxd-Panel-footer { border-color: var(--success); } .cxd-Panel--info { border-color: var(--info); } .cxd-Panel--info > .cxd-Panel-heading { background: var(--info); color: var(--white); } .cxd-Panel--info > .cxd-Panel-heading .badge { color: var(--info); background: var(--white); } .cxd-Panel--info > .cxd-Panel-heading, .cxd-Panel--info > .cxd-Panel-footer { border-color: var(--info); } .cxd-Panel--warning { border-color: var(--warning); } .cxd-Panel--warning > .cxd-Panel-heading { background: var(--warning); color: var(--white); } .cxd-Panel--warning > .cxd-Panel-heading .badge { color: var(--warning); background: var(--white); } .cxd-Panel--warning > .cxd-Panel-heading, .cxd-Panel--warning > .cxd-Panel-footer { border-color: var(--warning); } .cxd-Panel--danger { border-color: var(--danger); } .cxd-Panel--danger > .cxd-Panel-heading { background: var(--danger); color: var(--white); } .cxd-Panel--danger > .cxd-Panel-heading .badge { color: var(--danger); background: var(--white); } .cxd-Panel--danger > .cxd-Panel-heading, .cxd-Panel--danger > .cxd-Panel-footer { border-color: var(--danger); } .cxd-Panel-heading { padding: var(--Panel-headingPadding); border-color: var(--Panel-heading-top-border-color) var(--Panel-heading-right-border-color) var(--Panel-heading-bottom-border-color) var(--Panel-heading-left-border-color); border-style: var(--Panel-heading-top-border-style) var(--Panel-heading-right-border-style) var(--Panel-heading-bottom-border-style) var(--Panel-heading-left-border-style); border-width: var(--Panel-heading-top-border-width) var(--Panel-heading-right-border-width) var(--Panel-heading-bottom-border-width) var(--Panel-heading-left-border-width); border-radius: var(--Panel-headingBorderRadius); } .cxd-Panel-title { margin: 0; font-size: var(--Panel-heading-fontSize); color: var(--Panel-heading-color); font-weight: var(--Panel-heading-fontWeight); line-height: var(--Panel-heading-lineHeight); } .cxd-Panel-body { padding: var(--Panel-bodyPadding); } .cxd-Panel-footer { border-color: var(--Panel-footerBorderColor); border-radius: var(--Panel-footerBorderRadius); background: var(--Panel-footerBg); padding: var(--Panel-footerPadding); border-style: var(--Panel-footer-top-border-style) var(--Panel-footer-right-border-style) var(--Panel-footer-bottom-border-style) var(--Panel-footer-left-border-style); border-width: var(--Panel-footer-top-border-width) var(--Panel-footer-right-border-width) var(--Panel-footer-bottom-border-width) var(--Panel-footer-left-border-width); clear: both; } .cxd-Panel-footer .cxd-Button + .cxd-Button { margin-left: var(--Panel-footerButtonMarginLeft); } .cxd-Panel-btnToolbar { text-align: var(--Panel-btnToolbarTextAlign); } .cxd-Panel-btnToolbar::before, .cxd-Panel-btnToolbar::after { display: table; content: ""; } .cxd-Panel-btnToolbar::after { clear: both; } .cxd-Panel-btnToolbar .cxd-Button { margin-left: var(--Panel-footerButtonMarginLeft); } .cxd-Panel-btnToolbar:empty { display: none; } /* 移动端样式调整 */ @media (max-width: 767px) { .cxd-Panel--form { border: none; box-shadow: none; margin: 0 calc(var(--Panel-body-paddingTop) * -1) calc(var(--Panel-marginBottom) / 2); } .cxd-Panel--form > .cxd-Panel-heading { background: none; border: none; border-radius: 0; } .cxd-Panel--form > .cxd-Panel-heading .cxd-Panel-title { padding-left: var(--Panel-body-paddingLeft); border-left: 0.1875rem solid var(--primary); font-size: var(--fontSizeLg); } .cxd-Panel--form .cxd-Panel-footerWrap { padding-bottom: var(--Panel-body-paddingBottom); } .cxd-Panel--form .cxd-Panel-footer { border-top: none; display: flex; padding: 0 var(--Panel-body-paddingLeft); } .cxd-Panel--form .cxd-Panel-footer > .cxd-Button { min-width: 0; min-height: 0; flex: 1; } .cxd-Panel--form .cxd-Panel-footer > .cxd-Button:first-child { margin-left: 0; } } .cxd-Service { position: relative; } .cxd-Sparkline { display: inline-block; line-height: 1; vertical-align: middle; } .cxd-Sparkline-line { stroke: var(--Sparkline-line-color); stroke-width: 1px; } .cxd-Sparkline-area { fill: var(--Sparkline-area-color); } .cxd-Sparkline--clickable { cursor: pointer; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } @keyframes spin { 0% { transform: rotate(0deg); } to { transform: rotate(1turn); } } .cxd-Spinner { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: ease-out opacity var(--animation-duration); } .cxd-Spinner.in { opacity: 1; } .cxd-Spinner .cxd-Spinner-icon { width: var(--Spinner-width); height: var(--Spinner-height); position: relative; transform: translateZ(0); animation: spin 2s linear infinite; transition: ease-out all var(--animation-duration); } .cxd-Spinner .cxd-Spinner-icon--default { background: var(--Spinner-bg); background-size: 100%; animation: none; } .cxd-Spinner .cxd-Spinner-icon--simple { background: transparent; display: flex; align-items: center; justify-content: center; } .cxd-Spinner .cxd-Spinner-icon--simple .icon { width: 100%; height: 100%; color: var(--Spinner-color); } .cxd-Spinner .cxd-Spinner-icon--simple svg.icon { top: 0; } .cxd-Spinner .cxd-Spinner-icon--simple svg.icon path { fill: var(--Spinner-color); } .cxd-Spinner .cxd-Spinner-icon--simple i.icon { display: flex; align-items: center; justify-content: center; font-size: var(--Spinner-width); } .cxd-Spinner .cxd-Spinner-icon--custom { width: auto; height: auto; } .cxd-Spinner .cxd-Spinner-icon.cxd-Spinner-icon--disabled > svg.icon { color: var(--Spinner-color--disabled); fill: var(--Spinner-color--disabled); } .cxd-Spinner .cxd-Spinner-icon.cxd-Spinner-icon--disabled > svg.icon path { fill: var(--Spinner-color--disabled); } .cxd-Spinner .cxd-Spinner-icon--lg { width: var(--Spinner--lg-width); height: var(--Spinner--lg-height); } .cxd-Spinner .cxd-Spinner-icon--lg i.icon { font-size: var(--Spinner--lg-height); } .cxd-Spinner .cxd-Spinner-icon--sm { width: var(--Spinner--sm-width); height: var(--Spinner--sm-height); } .cxd-Spinner .cxd-Spinner-icon--sm i.icon { font-size: var(--Spinner--sm-height); } .cxd-Spinner .cxd-Spinner-icon--darkBg svg.icon path { fill: var(--loading-dark-bg-color); } .cxd-Spinner .cxd-Spinner-tip { margin: 0.75rem 0 0 0; word-break: keep-all; white-space: nowrap; font-size: var(--spinner-base-fontSize); color: var(--Spinner-color); font-weight: var(--spinner-base-fontWeight); } .cxd-Spinner.cxd-Spinner-tip--top { flex-direction: column-reverse; } .cxd-Spinner.cxd-Spinner-tip--top .cxd-Spinner-tip { margin: 0 0 var(--spinner-base-tip-size) 0; } .cxd-Spinner.cxd-Spinner-tip--right { flex-direction: row; } .cxd-Spinner.cxd-Spinner-tip--right .cxd-Spinner-tip { margin: 0 0 0 var(--spinner-base-tip-size); } .cxd-Spinner.cxd-Spinner-tip--bottom { flex-direction: column; } .cxd-Spinner.cxd-Spinner-tip--bottom .cxd-Spinner-tip { margin: var(--spinner-base-tip-size) 0 0 0; } .cxd-Spinner.cxd-Spinner-tip--left { flex-direction: row-reverse; } .cxd-Spinner.cxd-Spinner-tip--left .cxd-Spinner-tip { margin: 0 var(--spinner-base-tip-size) 0 0; } .cxd-Spinner--overlay { position: absolute; z-index: 11; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); } .cxd-Spinner-overlay { position: absolute; z-index: calc(11 - 1); top: 0; left: 0; right: 0; bottom: 0; background: var(--Spinner-overlay-bg); transition: ease-out opacity var(--animation-duration); opacity: 0; -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); filter: blur(1px); } .cxd-Spinner-overlay.in { opacity: 1; } .cxd-Spinner-wrap { position: relative; width: 100%; height: 100%; } .cxd-Spinner-wrap .cxd-Spinner { position: absolute; z-index: 11; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); } .cxd-Spinner-mark { position: absolute; z-index: -999; opacity: 0; } .cxd-ButtonGroup { position: relative; display: inline-flex; vertical-align: middle; flex-wrap: wrap; } .cxd-ButtonGroup > .cxd-Button { position: relative; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cxd-ButtonGroup > .cxd-Button:hover, .cxd-ButtonGroup .cxd-Badge:hover { z-index: 1; } .cxd-ButtonGroup > .cxd-Button.hover, .cxd-ButtonGroup .cxd-Badge.hover { z-index: 1; } .cxd-ButtonGroup > .cxd-Button:focus, .cxd-ButtonGroup > .cxd-Button:active, .cxd-ButtonGroup > .cxd-Button.active, .cxd-ButtonGroup > .cxd-Button.is-active, .cxd-ButtonGroup .cxd-Badge:focus, .cxd-ButtonGroup .cxd-Badge:active, .cxd-ButtonGroup .cxd-Badge.active, .cxd-ButtonGroup .cxd-Badge.is-active { z-index: 1; } .cxd-ButtonGroup .cxd-Badge .cxd-Badge-text, .cxd-ButtonGroup .cxd-Badge .cxd-Badge-dot, .cxd-ButtonGroup .cxd-Badge .cxd-Badge-ribbon, .cxd-ButtonGroup .cxd-Badge .cxd-Badge-dot { z-index: 2; } .cxd-ButtonGroup .cxd-Button + .cxd-Button, .cxd-ButtonGroup .cxd-Button + .cxd-ButtonGroup, .cxd-ButtonGroup .cxd-Button + .cxd-Badge, .cxd-ButtonGroup .cxd-ButtonGroup + .cxd-Button, .cxd-ButtonGroup .cxd-ButtonGroup + .cxd-ButtonGroup, .cxd-ButtonGroup .cxd-Badge + .cxd-Badge, .cxd-ButtonGroup .cxd-Badge + .cxd-Button { margin-left: calc(var(--ButtonGroup-borderWidth) * -1); } .cxd-ButtonGroup--block { display: block; } .cxd-ButtonGroup-button--active { z-index: 1; } .cxd-ButtonGroup-button--active.is-disabled { color: var(--text-color); border: var(--borderWidth) solid var(--borderColor); } .cxd-ButtonToolbar { display: inline-flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; } .cxd-ButtonToolbar .cxd-ButtonGroup { margin-left: var(--gap-xs); margin-top: var(--gap-xs); width: auto; } .cxd-ButtonGroup > .cxd-Button:first-child, .cxd-ButtonGroup > .cxd-Badge .cxd-Button { margin-left: 0; } .cxd-ButtonGroup .cxd-Button--primary.is-active { color: var(--ButtonGroup--primary-isActive-color); background: var(--ButtonGroup--primary-isActive-bg); } .cxd-ButtonGroup > .cxd-Button:not(:last-child), .cxd-ButtonGroup > .cxd-ButtonGroup:not(:last-child) > .cxd-Button, .cxd-ButtonGroup > .cxd-Badge:not(:last-child) > .cxd-Button { border-top-right-radius: 0; border-bottom-right-radius: 0; } .cxd-ButtonGroup > .cxd-Button:not(:first-child), .cxd-ButtonGroup > .cxd-ButtonGroup:not(:first-child) > .cxd-Button, .cxd-ButtonGroup > .cxd-Badge:not(:first-child) > .cxd-Button { border-top-left-radius: 0; border-bottom-left-radius: 0; } .cxd-ButtonGroup > .cxd-ButtonGroup:last-child > .cxd-Button:not(:last-child) { border-top-right-radius: 0; } .cxd-ButtonGroup--vertical { flex-direction: column; align-items: flex-start; justify-content: center; /* 修正头尾的圆角 */ } .cxd-ButtonGroup--vertical .cxd-Button, .cxd-ButtonGroup--vertical .cxd-ButtonGroup { width: 100%; } .cxd-ButtonGroup--vertical > .cxd-Button + .cxd-Button, .cxd-ButtonGroup--vertical > .cxd-Button + .cxd-ButtonGroup, .cxd-ButtonGroup--vertical > .cxd-Button + .cxd-Badge, .cxd-ButtonGroup--vertical > .cxd-ButtonGroup + .cxd-Button, .cxd-ButtonGroup--vertical > .cxd-ButtonGroup + .cxd-ButtonGroup, .cxd-ButtonGroup--vertical > .cxd-Badge + .cxd-Badge, .cxd-ButtonGroup--vertical > .cxd-Badge + .cxd-Button { margin-top: calc(var(--ButtonGroup-borderWidth) * -1); margin-left: 0; } .cxd-ButtonGroup--vertical > .cxd-Button:not(:last-child), .cxd-ButtonGroup--vertical > .cxd-ButtonGroup:not(:last-child) > .cxd-Button, .cxd-ButtonGroup--vertical > .cxd-Badge:not(:last-child) > .cxd-Button { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .cxd-ButtonGroup--vertical > .cxd-Button:not(:first-child), .cxd-ButtonGroup--vertical > .cxd-ButtonGroup:not(:first-child) > .btn, .cxd-ButtonGroup--vertical > .cxd-Badge:not(:first-child) > .btn { border-top-left-radius: 0; border-top-right-radius: 0; } .cxd-ButtonGroup--vertical > .cxd-Button:first-child, .cxd-ButtonGroup--vertical > .cxd-ButtonGroup:first-child > .cxd-Button:first-child, .cxd-ButtonGroup--vertical > .cxd-Badge:first-child > .cxd-Button:first-child { border-top-right-radius: var(--borders-radius-3); } .cxd-ButtonGroup--vertical > .cxd-Button:last-child, .cxd-ButtonGroup--vertical > .cxd-ButtonGroup:last-child > .cxd-Button:last-child, .cxd-ButtonGroup--vertical > .cxd-Badge:last-child > .cxd-Button:last-child { border-bottom-left-radius: var(--borders-radius-3); } .cxd-ButtonGroup--tiled { display: flex; } .cxd-ButtonGroup--tiled .cxd-Button, .cxd-ButtonGroup--tiled .cxd-ButtonGroup, .cxd-ButtonGroup--tiled .cxd-Badge { flex-grow: 1; text-align: center; } .cxd-ButtonGroup--tiled .cxd-Button .cxd-Button, .cxd-ButtonGroup--tiled .cxd-ButtonGroup .cxd-Button, .cxd-ButtonGroup--tiled .cxd-Badge .cxd-Button { width: 100%; } .cxd-DropDown { position: relative; display: inline-block; } .cxd-DropDown-caret { margin-left: var(--DropDown-caret-marginLeft); display: inline-block; vertical-align: top; } .cxd-DropDown-caret > svg { width: 0.625rem; height: 0.625rem; top: 0; transform: rotate(90deg); transition: transform var(--animation-duration) ease; } .cxd-DropDown.is-opened .cxd-DropDown-caret svg { transform: rotate(270deg); } .cxd-DropDown.is-actived .cxd-Button { color: var(--link-color); } .cxd-DropDown--block { display: block; } .cxd-DropDown--block .cxd-Button { display: block; } .cxd-DropDown-menu { background: var(--DropDown-menu-bg); list-style: none; padding: var(--DropDown-menu-paddingY) var(--DropDown-menu-paddingX); margin: 0; min-width: var(--DropDown-menu-minWidth); text-align: left; border: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-DropDown-menu-root { position: absolute; z-index: 1000; top: 100%; left: 0; margin: 0.0625rem 0 0; border: var(--Form-select-outer-borderWidth) solid var(--Form-select-outer-borderColor); border-radius: var(--DropDown-menu-borderRadius); box-shadow: var(--DropDown-menu-boxShadow); min-width: var(--DropDown-menu-minWidth); overflow-y: auto; overflow-x: hidden; max-height: 18.75rem; margin-top: 0.25rem; } .cxd-DropDown--alignRight .cxd-DropDown-menu { left: auto; right: 0; } .cxd-DropDown-menuItem, .cxd-DropDown-menu > li { padding: 0 var(--DropDown-menuItem-paddingX); white-space: nowrap; box-sizing: border-box; height: var(--DropDown-menu-height); line-height: var(--DropDown-menu-height); vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; user-select: none; color: var(--DropDown-menuItem-color); -webkit-text-decoration: var(--link-decoration); text-decoration: var(--link-decoration); } .cxd-DropDown-menuItem.is-active, .cxd-DropDown-menu > li.is-active { background: var(--DropDown-menuItem-onHover-bg); color: var(--DropDown-menuItem-onActive-color); } .cxd-DropDown-menuItem:not(.is-disabled), .cxd-DropDown-menuItem:not(.disabled), .cxd-DropDown-menu > li:not(.is-disabled), .cxd-DropDown-menu > li:not(.disabled) { cursor: pointer; } .cxd-DropDown-menuItem.is-disabled, .cxd-DropDown-menu > li.is-disabled { cursor: not-allowed; color: var(--DropDown-menuItem-onDisabled-color); filter: grayscale(80%); } .cxd-DropDown-menuItem.cxd-DropDown-divider, .cxd-DropDown-menu > li.cxd-DropDown-divider { height: 0.0625rem; margin: 0.25rem 0; overflow: hidden; background: var(--DropDown-menu-borderColor); padding: 0; } .cxd-DropDown-menuItem.cxd-DropDown-groupTitle, .cxd-DropDown-menu > li.cxd-DropDown-groupTitle { height: inherit; font-size: var(--fontSizeSm); padding: var(--gap-xs) var(--gap-xs); padding-left: var(--gap-sm); color: var(--DropDown-group-color); flex-grow: 1; cursor: default; } .cxd-DropDown-menuItem.cxd-DropDown-groupTitle:hover, .cxd-DropDown-menu > li.cxd-DropDown-groupTitle:hover { background: none; } .cxd-DropDown-menuItem.cxd-DropDown-groupTitle span, .cxd-DropDown-menu > li.cxd-DropDown-groupTitle span { white-space: nowrap; } .cxd-DropDown-menuItem.cxd-DropDown-groupTitle ~ .cxd-DropDown-button, .cxd-DropDown-menu > li.cxd-DropDown-groupTitle ~ .cxd-DropDown-button { padding-left: var(--gap-lg); } .cxd-DropDown-menuItem:hover, .cxd-DropDown-menu:not(.is-mobile) > li:not(.is-disabled):hover { background: var(--DropDown-menuItem-onHover-bg); color: var(--DropDown-menuItem-onHover-color); } .cxd-DropDown-menu > li a { color: inherit; display: block; text-decoration: none; } .cxd-DropDown-popover { border: none; box-shadow: none; } .cxd-DropDown-popover > .cxd-DropDown-menu-root { position: relative; } .cxd-DropDown > .cxd-Button { min-width: unset; } .cxd-Each-placeholder { color: var(--text--muted-color); text-align: left; padding: var(--gap-sm); } .cxd-ScheduleCalendar-icon { position: absolute; bottom: var(--Calendar-icon-bottom); left: 50%; transform: translateX(-50%); display: block; width: var(--Calendar-icon-width); height: var(--Calendar-icon-height); border-radius: 50%; z-index: 10; } .cxd-ScheduleCalendar-action { display: block; padding: 0; width: 100%; height: 100%; border: none; background: transparent; color: inherit; } .cxd-ScheduleCalendar-action:not(:disabled):not(.is-disabled):hover { color: inherit; background: transparent; border-color: transparent; } .cxd-ScheduleCalendar .rdtDay { position: relative; } .cxd-ScheduleCalendar-text-overflow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: absolute; width: 100%; } .cxd-ScheduleCalendar .rdt .rdtPicker td.rdtActive { background: transparent; color: var(--Calendar-color); } .cxd-ScheduleCalendar .rdt .rdtPicker td.rdtActive > span { color: var(--Calendar-color) !important; background: transparent !important; } .cxd-ScheduleCalendar .rdt .rdtPicker td.rdtActive:hover { background: var(--Calendar-cell-onHover-bg); } .cxd-ScheduleCalendar-large { width: 100%; } .cxd-ScheduleCalendar-large .rdtPicker { width: 100%; } .cxd-ScheduleCalendar-large .rdtPicker table { border-collapse: collapse; border-spacing: 0; } .cxd-ScheduleCalendar-large .rdtPicker table td { border: var(--Calendar-borderWidth) solid var(--borderColor); } .cxd-ScheduleCalendar-large .rdtHeader { margin-top: 0; } .cxd-ScheduleCalendar-large .rdtPicker .dow { height: 2.5rem; } .cxd-ScheduleCalendar-large .rdtDay { height: var(--Calendar-rdt-day); vertical-align: top; } .cxd-ScheduleCalendar-large .cxd-ScheduleCalendar-large-day-wrap { position: absolute; top: 0; left: 0; min-width: 100%; height: 100%; } .cxd-ScheduleCalendar-large .cxd-ScheduleCalendar-large-day-wrap .cxd-ScheduleCalendar-large-schedule-content { position: relative; z-index: 10; border-radius: var(--borderRadius); text-align: left; padding: var(--Calendar-schedule-content-padding); height: var(--Calendar-schedule-content-height); color: var(--Calendar-schedule-content-color); text-shadow: none; } .cxd-ScheduleCalendar-large .cxd-ScheduleCalendar-large-day-wrap .cxd-ScheduleCalendar-large-schedule-header, .cxd-ScheduleCalendar-large .cxd-ScheduleCalendar-large-day-wrap .cxd-ScheduleCalendar-large-schedule-footer { text-shadow: none; } .cxd-ScheduleCalendar-large .cxd-ScheduleCalendar-action { z-index: 20; position: relative; } .cxd-CalendarMobile { height: 100%; width: 100%; overflow-y: scroll; overflow-x: hidden; } .cxd-CalendarMobile-pop { position: fixed; bottom: 0; left: 0; width: 100vw; height: 90vh; background: #fff; border-radius: 1rem 1rem 0 0; overflow: hidden; border-width: 0; } .cxd-CalendarMobile-pop--quarters, .cxd-CalendarMobile-pop--months { height: 25rem; } .cxd-CalendarMobile-pop--time { height: 22.5rem; max-height: 90vh; } .cxd-CalendarMobile-pop--time .cxd-PopUp-content { overflow: hidden; } .cxd-CalendarMobile-pop--years { height: 22.5rem; } .cxd-CalendarMobile-wrap { display: flex; flex-direction: column; height: 100%; } .cxd-CalendarMobile-header { flex-shrink: 0; box-shadow: 0 2px 10px rgba(125, 126, 128, 0.16); position: relative; } .cxd-CalendarMobile-header .subtitle-text { display: inline-block; width: 6.875rem; position: relative; } .cxd-CalendarMobile-header .rdtPrev { width: 1.25rem; height: 2.75rem; display: block; position: absolute; top: 0; left: -1.25rem; } .cxd-CalendarMobile-header .rdtNext { width: 1.25rem; height: 2.75rem; display: block; position: absolute; top: 0; right: -1.25rem; } .cxd-CalendarMobile-title, .cxd-CalendarMobile-subtitle { height: 2.75rem; font-weight: 500; line-height: 2.75rem; text-align: center; } .cxd-CalendarMobile-title { font-size: var(--fontSizeLg); } .cxd-CalendarMobile-weekdays { display: flex; } .cxd-CalendarMobile-weekdays .weekday { flex: 1; min-width: 0; line-height: 1.875rem; text-align: center; } .cxd-CalendarMobile-close { position: absolute; z-index: 1; color: #c8c9cc; font-size: 1rem; cursor: pointer; top: 0.6875rem; right: 1rem; } .cxd-CalendarMobile-body::-webkit-scrollbar { width: 0; } .cxd-CalendarMobile-body { flex: 1; min-width: 0; min-height: 0; overflow-y: scroll; } .cxd-CalendarMobile-body table { padding: 0; border-spacing: 0 0.25rem; } .cxd-CalendarMobile-body .rdt .rdtPicker td.rdtActive, .cxd-CalendarMobile-body .rdt .rdtPicker td.rdtActive:hover { background: transparent; color: var(--Calendar-color); text-shadow: none; } .cxd-CalendarMobile-body .rdt .rdtPicker tr td.rdtDisabled, .cxd-CalendarMobile-body .rdt .rdtPicker tr td.rdtDisabled:hover { color: #999; } .cxd-CalendarMobile-body .rdtOldNone td.rdtOld { display: none; } .cxd-CalendarMobile-body .rdtPicker td { height: 3.5rem; position: relative; } .cxd-CalendarMobile-body .rdt .rdtPicker td.rdtDay, .cxd-CalendarMobile-body .rdt .rdtPicker td.rdtDay:hover, .cxd-CalendarMobile-body .rdt .rdtPicker td.rdtDisabled, .cxd-CalendarMobile-body .rdt .rdtPicker td.rdtDisabled:hover { background: transparent; } .cxd-CalendarMobile-body .calendar-wrap { width: 3.125rem; position: relative; height: 100%; text-align: center; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.25rem; padding: 0 0.625rem; } .cxd-CalendarMobile-embed .cxd-CalendarMobile-body .calendar-wrap { width: auto; max-width: 3.125rem; } .cxd-CalendarMobile-footer { flex-shrink: 0; } .cxd-CalendarMobile-footer .date-range-confirm { width: 100%; height: 2.25rem; margin: 0.4375rem 0; border-radius: var(--borderRadiusMd); display: flex; justify-content: center; align-items: center; } .cxd-CalendarMobile-footer-toolbar { padding: 0 1rem; } .cxd-CalendarMobile-footer-ranges { background: #fff; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.02); border-radius: 24px; overflow-x: auto; position: relative; height: 3rem; line-height: 3rem; } .cxd-CalendarMobile-footer .cxd-DateRangePicker-rangers { padding-left: revert; white-space: nowrap; line-height: inherit; display: flex; justify-content: space-between; } .cxd-CalendarMobile-footer .cxd-DatePicker-shortcuts { width: auto; } .cxd-CalendarMobile-calendar-wrap { padding: var(--gap-sm) 0; } .cxd-CalendarMobile .cxd-CalendarMobile-calendar-wrap .cxd-CalendarMobile-calendar .rdtPicker { width: 100%; padding: 0; } .cxd-CalendarMobile .cxd-CalendarMobile-calendar-wrap .cxd-CalendarMobile-calendar .rdtPicker .rdtOld { visibility: hidden; } .cxd-CalendarMobile .cxd-CalendarMobile-calendar-wrap .cxd-CalendarMobile-calendar .rdtPicker .rdtNew { display: none; } .cxd-CalendarMobile .cxd-CalendarMobile-calendar-wrap .cxd-CalendarMobile-calendar .rdtPicker .rdtBetween { background: var(--Calendar-cell-onBetween-bg) !important; color: var(--Button--primary-bg); } .cxd-CalendarMobile .cxd-CalendarMobile-calendar-wrap .cxd-CalendarMobile-calendar .rdtPicker .rdtBetween::after { width: 0; } .cxd-CalendarMobile .cxd-CalendarMobile-calendar-wrap .cxd-CalendarMobile-calendar .rdtPicker .rdtRangeStart .calendar-wrap, .cxd-CalendarMobile .cxd-CalendarMobile-calendar-wrap .cxd-CalendarMobile-calendar .rdtPicker .rdtRangeStart:hover .calendar-wrap, .cxd-CalendarMobile .cxd-CalendarMobile-calendar-wrap .cxd-CalendarMobile-calendar .rdtPicker .rdtRangeEnd .calendar-wrap, .cxd-CalendarMobile .cxd-CalendarMobile-calendar-wrap .cxd-CalendarMobile-calendar .rdtPicker .rdtRangeEnd:hover .calendar-wrap { background: var(--Calendar-cell-onActive-bg) !important; color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } .cxd-CalendarMobile .cxd-CalendarMobile-calendar-wrap .cxd-CalendarMobile-calendar .rdtPicker .rdtRangeHasEnd, .cxd-CalendarMobile .cxd-CalendarMobile-calendar-wrap .cxd-CalendarMobile-calendar .rdtPicker .rdtRangeHasEnd:hover { background: linear-gradient(to right, transparent 0%, transparent 50%, var(--Calendar-cell-onBetween-bg) 51%, var(--Calendar-cell-onBetween-bg) 100%) !important; } .cxd-CalendarMobile .cxd-CalendarMobile-calendar-wrap .cxd-CalendarMobile-calendar .rdtPicker .rdtRangeEnd, .cxd-CalendarMobile .cxd-CalendarMobile-calendar-wrap .cxd-CalendarMobile-calendar .rdtPicker .rdtRangeEnd:hover { background: linear-gradient(to right, var(--Calendar-cell-onBetween-bg) 0%, var(--Calendar-cell-onBetween-bg) 50%, transparent 51%, transparent 100%) !important; } .cxd-CalendarMobile .cxd-CalendarMobile-calendar-wrap .cxd-CalendarMobile-calendar .rdtPicker .rdtToday { border: none; } .cxd-CalendarMobile .cxd-CalendarMobile-calendar-wrap .cxd-CalendarMobile-calendar .rdtPicker .rdtToday .calendar-wrap { border: 1px solid #2468f2; } .cxd-CalendarMobile-calendar-header { height: 1.875rem; line-height: 1.875rem; text-align: center; } .cxd-CalendarMobile-range-text { position: absolute; right: 0; left: 0; bottom: 0; color: #fff; font-size: var(--fontSizeSm); white-space: nowrap; } .cxd-CalendarMobile-calendar-wrap { position: relative; } .cxd-CalendarMobile-calendar-mark { position: absolute; top: 50%; left: 50%; z-index: 0; color: rgba(242, 243, 245, 0.8); font-size: 10rem; transform: translate(-50%, -50%); pointer-events: none; } .cxd-CalendarMobile-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8.5rem; height: 2.25rem; background: rgba(0, 0, 0, 0.9); border-radius: 4px; color: #fff; display: flex; justify-content: center; align-items: center; } .cxd-CalendarMobile-time { height: 11.25rem; } .cxd-CalendarMobile-time-title { border: var(--Calendar-borderWidth) solid var(--borderColorDarken); border-left: none; border-right: none; text-align: center; height: 1.875rem; line-height: 1.875rem; } .cxd-CalendarMobile-time .rdtPicker { margin: 0 auto; } .cxd-CalendarMobile .cxd-CalendarTime { height: 8.125rem; overflow: hidden; } .cxd-CalendarMobile .cxd-PickerColumns-header { display: none; } .cxd-Collapse { border-width: var(--collapse-default-top-border-width) var(--collapse-default-right-border-width) var(--collapse-default-bottom-border-width) var(--collapse-default-left-border-width); border-style: var(--collapse-default-top-border-style) var(--collapse-default-right-border-style) var(--collapse-default-bottom-border-style) var(--collapse-default-left-border-style); border-color: var(--collapse-default-top-border-color) var(--collapse-default-right-border-color) var(--collapse-default-bottom-border-color) var(--collapse-default-left-border-color); border-radius: var(--collapse-default-top-left-border-radius) var(--collapse-default-top-right-border-radius) var(--collapse-default-bottom-right-border-radius) var(--collapse-default-bottom-left-border-radius); padding: 0; line-height: 1.25rem; min-width: 0; } .cxd-Collapse-header { font-size: var(--Collapse-header-fontSize); font-weight: var(--Collapse-header-fontWeight); color: var(--collapse-default-header-color); line-height: var(--collapse-default-header-lineHeight); padding: var(--Collapse-header-padding); margin: 0; cursor: pointer; background: var(--Collapse-header-bg); } .cxd-Collapse-header-wrapper { display: inline-flex; flex-direction: var(--Collapse-header-wrapper-direction); } .cxd-Collapse-header-tpl { margin-right: 0.5rem; } .cxd-Collapse-header:hover { background: var(--Collapse-header-onHover-bg); color: var(--collapse-default-header-hover-color); } .cxd-Collapse-header.is-mobile { background: none; border-radius: 0 !important; position: relative; padding-left: 0; } .cxd-Collapse-header.is-mobile:hover { background: none; } .cxd-Collapse .Collapse-arrow { content: var(--collapse-icon-icon); } .cxd-Collapse-arrow-wrap { width: 1rem; height: 1rem; display: inline-flex; justify-content: center; align-items: center; margin-right: var(--collapse-icon-margin); } .cxd-Collapse-arrow-wrap svg { width: var(--collapse-icon-size); height: var(--collapse-icon-size); color: var(--collapse-icon-color); top: 0; } .cxd-Collapse-icon-tranform { display: inline-block; width: 1rem; text-align: center; margin-right: var(--gap-xs); } .cxd-Collapse.is-active > .cxd-Collapse-header > .cxd-Collapse-arrow-wrap > .cxd-Collapse-arrow { transform: rotate(var(--collapse-icon-rotate)); transform-origin: 50% 50%; } .cxd-Collapse.is-active > * > .cxd-Collapse-icon-tranform { transform: rotate(var(--collapse-icon-rotate)); } .cxd-Collapse--disabled > .cxd-Collapse-header { cursor: not-allowed; -webkit-user-select: none; -moz-user-select: none; user-select: none; color: var(--collapse-default-disabled-color); background: var(--collapse-default-disabled-header-bg-color); } .cxd-Collapse--disabled .cxd-Collapse-arrow-wrap svg { color: var(--collapse-default-disabled-color); } .cxd-Collapse--title-bottom .cxd-Collapse-header { text-align: center; font-size: var(--fontSizeBase); border-top: var(--Collapse-header-collapsed-borderTop); border-bottom: var(--Collapse-header-collapsed-borderBottom); } .cxd-Collapse--title-bottom.is-collapsed .cxd-Collapse-header { border-top: none; } .cxd-Collapse--title-bottom .cxd-Collapse-arrow { top: -0.25rem; transform: rotate(var(--collapse-icon-rotate)); } .cxd-Collapse--title-bottom.is-active > .cxd-Collapse-header > .cxd-Collapse-arrow-wrap > .cxd-Collapse-arrow { top: 0; transform: rotate(calc(-1 * var(--collapse-icon-rotate))); } .cxd-Collapse-contentWrapper { transition: height var(--animation-duration) ease; } .cxd-Collapse-contentWrapper.in, .cxd-Collapse-contentWrapper.out { height: 0; overflow: hidden; } .cxd-Collapse-content { padding: var(--Collapse-content-padding); color: var(--Collapse-content-color); font-size: var(--Collapse-content-fontSize); font-weight: var(--Collapse-content-fontWeight); line-height: var(--collapse-default-content-lineHeight); background: var(--collapse-default-bg-color); } .cxd-Collapse.is-mobile { border-top: none; border-left: none; border-right: none; } .cxd-Collapse.is-mobile:last-child { border-bottom: none; } .cxd-Collapse.is-mobile .cxd-Collapse-icon-tranform, .cxd-Collapse.is-mobile .cxd-Collapse-arrow-wrap { margin-right: -1.125rem; float: right; margin-top: 0.125rem; } .cxd-Collapse.is-mobile .cxd-Collapse-content { padding-left: 0; padding-right: 0; } .cxd-Form { /* 恢复 Form 嵌套场景下的样式 */ } .cxd-Form .cxd-Collapse { border: none; } .cxd-Form .cxd-Collapse .cxd-Collapse-header { background-color: var(--white); display: inline-flex; justify-content: flex-end; align-items: center; flex-direction: row-reverse; border-radius: 0; } .cxd-Form .cxd-Collapse .cxd-Collapse-content { padding: 0; } .cxd-Form .cxd-Collapse-fieldset--disabled { border-width: var(--collapse-default-top-border-width) var(--collapse-default-right-border-width) var(--collapse-default-bottom-border-width) var(--collapse-default-left-border-width); border-style: var(--collapse-default-top-border-style) var(--collapse-default-right-border-style) var(--collapse-default-bottom-border-style) var(--collapse-default-left-border-style); border-color: var(--collapse-default-top-border-color) var(--collapse-default-right-border-color) var(--collapse-default-bottom-border-color) var(--collapse-default-left-border-color); border-radius: var(--collapse-default-top-left-border-radius) var(--collapse-default-top-right-border-radius) var(--collapse-default-bottom-right-border-radius) var(--collapse-default-bottom-left-border-radius); } .cxd-Form .cxd-Collapse-fieldset--disabled .cxd-Collapse-header { background: var(--Collapse-header-bg); display: block; border-radius: unset; } .cxd-Form .cxd-Collapse-fieldset--disabled .cxd-Collapse-content { padding: var(--Collapse-content-padding); } /* 移动端样式调整 */ @media (max-width: 767px) { .cxd-Collapse { border: none; position: relative; margin-bottom: var(--Collapse-mobile-marginBottom); } .cxd-Collapse::before { position: absolute; box-sizing: border-box; content: " "; pointer-events: none; right: 0; bottom: 0; left: 0; border-bottom: 1px solid var(--collapse-default-bottom-border-color); transform: scaleY(0.5); } } .cxd-CollapseGroup .cxd-Collapse { border-radius: 0; } .cxd-CollapseGroup .cxd-Collapse:first-child { border-radius: 4px 4px 0 0; } .cxd-CollapseGroup .cxd-Collapse:first-child > .cxd-Collapse-header { border-radius: 4px 4px 0 0; } .cxd-CollapseGroup .cxd-Collapse:last-child { border-radius: 0 0 4px 4px; } .cxd-CollapseGroup .cxd-Collapse:last-child > .cxd-Collapse-header { border-radius: 0 0 4px 4px; } .cxd-CollapseGroup .cxd-Collapse:first-child:nth-last-child(1) { border-radius: 4px; } .cxd-CollapseGroup .cxd-Collapse:first-child:nth-last-child(1) > .cxd-Collapse-header { border-radius: 4px; } .cxd-CollapseGroup .cxd-Collapse:not(:last-child):not(.is-mobile) { border-bottom: none; } .cxd-CollapseGroup.icon-position-right .cxd-Collapse-header .cxd-Collapse-arrow-wrap { float: right; margin-right: 0; } .cxd-CollapseGroup.icon-position-right .cxd-Collapse-header .cxd-Collapse-icon-tranform { float: right; } .cxd-CollapseGroup.is-mobile.icon-position-right .cxd-Collapse-header .cxd-Collapse-arrow-wrap { margin-right: -1.125rem; } .cxd-ColorField { display: inline-block; } .cxd-ColorField-previewIcon { display: inline-block; vertical-align: middle; width: 1rem; height: 1rem; box-shadow: var(--boxShadowSm); } .cxd-ColorField-value { display: inline-block; margin-left: 10px; vertical-align: middle; } .cxd-ConditionBuilderControl.is-mobile { overflow-x: auto; } .cxd-CBGroup { font-size: var(--fontSizeSm); position: relative; display: flex; } .cxd-CBGroup-toolbarCondition { display: flex; align-items: center; justify-content: center; padding: 0 0.625rem 0 0; flex-direction: column; } .cxd-CBGroup-toolbarCondition[draggable=true] { cursor: grab; } .cxd-CBGroup-toolbarCondition-arrow { position: absolute; top: 0; font-size: 14px; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--conditionBuilder-toolbar-bg-color); text-align: center; color: var(--conditionBuilder-toolbar-color); cursor: pointer; transition: transform 0.3s ease; } .cxd-CBGroup-toolbarCondition-arrow.is-collapse { transform: rotate(180deg); } .cxd-CBGroup-toolbarCondition-arrow:hover { background: var(--conditionBuilder-toolbar-hover-bg-color); color: var(--conditionBuilder-toolbar-hover-color); } .cxd-CBGroup-toolbarCondition .cxd-Select { font-size: var(--conditionBuilder-toolbar-fontSize); height: var(--conditionBuilder-toolbar-height); width: var(--conditionBuilder-toolbar-width); background: var(--conditionBuilder-toolbar-bg-color); border: none; color: var(--conditionBuilder-toolbar-color); font-weight: var(--conditionBuilder-toolbar-fontWeight); padding: 0; text-align: center; min-height: var(--conditionBuilder-toolbar-height); } .cxd-CBGroup-toolbarCondition .cxd-Select.is-focused { color: var(--conditionBuilder-toolbar-color) !important; font-size: var(--conditionBuilder-toolbar-fontSize); font-weight: var(--conditionBuilder-toolbar-fontWeight); background: var(--conditionBuilder-toolbar-bg-color) !important; border: none !important; box-shadow: none !important; } .cxd-CBGroup-toolbarCondition .cxd-Select:hover { color: var(--conditionBuilder-toolbar-hover-color) !important; font-size: var(--conditionBuilder-toolbar-hover-fontSize); font-weight: var(--conditionBuilder-toolbar-hover-fontWeight); background: var(--conditionBuilder-toolbar-hover-bg-color) !important; border: none !important; box-shadow: none !important; } .cxd-CBGroup-toolbarCondition .cxd-Select-valueWrap { padding-right: 0; } .cxd-CBGroup-toolbarCondition .cxd-Select-arrow { display: none; } .cxd-CBGroup-toolbarCondition .cxd-Select-menu { padding: 0; } .cxd-CBGroup-toolbarCondition .cxd-Select-menu > .cxd-Select-option { font-size: 0.75rem; font-weight: 500; line-height: 2rem !important; text-align: center; padding: 0 !important; } .cxd-CBGroup-toolbarCondition::before { content: " "; position: absolute; top: 0.3125rem; bottom: 0.3125rem; width: var(--conditionBuilder-line-width); background-color: var(--conditionBuilder-line-bg-color); } .cxd-CBGroup-body { position: relative; } .cxd-CBGroup-body-wrapper { flex: 1; min-width: 0; } .cxd-CBGroup-body-collapse { text-align: center; color: #84868c; display: flex; justify-content: center; align-items: center; } .cxd-CBGroup-body-collapse > span { padding: 0 10px; cursor: pointer; } .cxd-CBGroup-body-collapse::before, .cxd-CBGroup-body-collapse::after { content: " "; height: 1px; background: #e8e9eb; display: block; flex: 1; min-width: 0; min-height: 0; } .cxd-CBGroup-body-wrapper { flex: 1; min-width: 0; } .cxd-CBGroup-toolbar { display: flex; flex-direction: row; padding-top: 0.5rem; } .cxd-CBGroup-toolbar[draggable=true] { cursor: grab; } .cxd-CBGroup-toolbar .cxd-Button { transition: padding var(--animation-duration); min-width: unset; } .cxd-CBGroup-toolbar .cxd-Button svg { width: 10px; height: 10px; top: 0; margin-right: 5px; } .cxd-CBGroup-toolbar .cxd-CBGroup-toolbarConditionAdd { display: flex; align-items: center; } .cxd-CBGroup-toolbar .cxd-CBGroup-toolbarConditionAdd .cxd-ButtonGroup > .cxd-Button:not(:last-child) { margin-right: 1.5rem; } .cxd-CBGroup .cxd-ResultBox { padding-right: 0.1875rem; } .cxd-CBGroup-field, .cxd-CBGroup-operator { position: relative; display: inline-block; margin: 0.1875rem; vertical-align: middle; } .cxd-CBGroup-fieldCaret, .cxd-CBGroup-operatorCaret { transition: transform var(--animation-duration) ease-out; margin: 5px; display: flex; color: var(--Form-select-caret-iconColor); } .cxd-CBGroup-fieldCaret:hover, .cxd-CBGroup-operatorCaret:hover { color: var(--Form-select-caret-onHover-iconColor); } .cxd-CBGroup-fieldCaret > svg, .cxd-CBGroup-operatorCaret > svg { width: 0.625rem; height: 0.625rem; top: 0; transform: rotate(90deg); } .cxd-CBGroup-fieldInput.is-active .cxd-CBGroup-fieldCaret, .cxd-CBGroup-operatorInput.is-active .cxd-CBGroup-operatorCaret { transform: rotate(180deg); } .cxd-CBGroup-placeholder { color: var(--text--muted-color); position: relative; padding: var(--conditionBuilder-body-paddingTop) var(--conditionBuilder-body-paddingRight) var(--conditionBuilder-body-paddingBottom) 0.625rem; background: var(--conditionBuilder-body-bg-color); } .cxd-CBGroup-placeholder.simple { margin-left: 0; } .cxd-CBDelete { margin-left: 5px; font-size: 16px; color: #84868c; } .cxd-CBIf { margin-left: 10px; font-size: 16px; color: #84868c; cursor: pointer; } .cxd-CBIf:hover { font-size: 16px; } .cxd-CBIf.is-active { color: #2468f1; } .cxd-CBGroupOrItem { position: relative; transition: box-shadow 0.3s ease; } .cxd-CBGroupOrItem.is-hover { box-shadow: #e8ebee 0 2px 10px 0; } .cxd-CBGroupOrItem + .cxd-CBGroupOrItem { margin-top: 0.625rem; } .cxd-CBGroupOrItem-dragbar { cursor: move; width: 20px; margin-left: -5px; opacity: 0.6; text-align: center; transition: opacity var(--animation-duration) ease-out; color: var(--icon-color); } .cxd-CBGroupOrItem-dragbar:hover { color: var(--icon-onHover-color); } .cxd-CBGroupOrItem-body { display: flex; flex-direction: row; align-items: center; position: relative; transition: all var(--animation-duration) ease-out; } .cxd-CBGroupOrItem-body-group { width: 100%; flex-direction: row; display: flex; align-items: center; transition: all 0.2s ease; padding-left: 10px; } .cxd-CBGroupOrItem-body-group.is-hover { cursor: grab; box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.16); border-radius: 8px; padding: 10px; margin: -10px 0px; background: #fff; z-index: 1000; } .cxd-CBGroupOrItem-body-group > .cxd-CBGroupOrItem-dragbar { left: -0.3125rem; position: absolute; } .cxd-CBGroupOrItem-body-group > .cxd-CBGroup { margin: 0px; } .cxd-CBGroupOrItem-body-item { background-color: var(--conditionBuilder-body-bg-color); width: 100%; padding: var(--conditionBuilder-body-paddingTop) var(--conditionBuilder-body-paddingRight) var(--conditionBuilder-body-paddingBottom) var(--conditionBuilder-body-paddingLeft); display: flex; flex-direction: row; align-items: center; flex: 1; min-width: 0; } .cxd-CBGroupOrItem-body-item > .cxd-CBGroupOrItem-dragbar { left: 0.625rem; position: absolute; } .cxd-CBGroupOrItem.is-dragging { display: none; } .cxd-CBGroupOrItem.is-ghost > .cxd-CBGroupOrItem-body:before { position: absolute; z-index: 2; content: ""; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 123, 255, 0.2); } .cxd-CBGroupOrItem .cxd-CBGroup { flex-grow: 1; } .cxd-CBGroupOrItem > .cxd-CBGroupOrItem-body > .cxd-CBGroupOrItem-body-group > .cxd-CBGroupOrItem-dragbar, .cxd-CBGroupOrItem > .cxd-CBGroupOrItem-body > .cxd-CBGroupOrItem-body-item > .cxd-CBGroupOrItem-dragbar, .cxd-CBGroupOrItem > .cxd-CBGroupOrItem-body > .cxd-CBGroupOrItem-body-item > .cxd-CBDelete { opacity: 0; } .cxd-CBGroupOrItem:is(.is-mobile) > .cxd-CBGroupOrItem-body > .cxd-CBGroupOrItem-body-group > .cxd-CBGroupOrItem-dragbar, .cxd-CBGroupOrItem:is(.is-mobile) > .cxd-CBGroupOrItem-body > .cxd-CBGroupOrItem-body-item > .cxd-CBGroupOrItem-dragbar, .cxd-CBGroupOrItem:is(.is-mobile) > .cxd-CBGroupOrItem-body > .cxd-CBGroupOrItem-body-item > .cxd-CBDelete { opacity: 1; } .cxd-CBGroupOrItem:not(.is-mobile):hover > .cxd-CBGroupOrItem-body > .cxd-CBGroupOrItem-body-item > .cxd-CBGroupOrItem-dragbar, .cxd-CBGroupOrItem:not(.is-mobile):hover > .cxd-CBGroupOrItem-body > .cxd-CBGroupOrItem-body-item > .cxd-CBDelete { opacity: 1; } .cxd-CBGroupOrItem-simple { margin-bottom: var(--gap-sm); } .cxd-CBInputSwitch { position: relative; display: inline-block; vertical-align: middle; cursor: pointer; } .cxd-CBInputSwitch > a { color: var(--icon-color); } .cxd-CBInputSwitch > a:hover { color: var(--icon-onHover-color); } .cxd-CBInputSwitch svg { width: 0.625rem; height: 0.625rem; } .cxd-CBFunc { display: inline-block; vertical-align: middle; margin: 0.1875rem; } .cxd-CBFunc-select { display: inline-block; position: relative; } .cxd-CBFunc-error { color: var(--danger); } .cxd-CBFunc-args { display: inline-block; } .cxd-CBFunc-args > span { display: inline-block; padding: 0 5px; color: var(--info); } .cxd-CBFunc-args > div { display: inline-block; } .cxd-CBItem { display: flex; flex: 1; min-width: 0; flex-wrap: wrap; } .cxd-CBItem > * { flex-shrink: 0; } .cxd-CBValue { position: relative; display: inline-block; vertical-align: middle; margin: 0.1875rem; flex: 1; min-width: 6.25rem; } .cxd-CBValue > * { width: 100%; } .cxd-CBFormula { position: relative; display: inline-block; vertical-align: middle; margin: 0.1875rem; } .cxd-CBFormula-label { background: var(--ResultBox-value-bg); color: var(--text--muted-color); display: block; font-size: var(--fontSizeSm); align-self: center; margin: -5px 5px -5px -8px; padding: 5px; border-radius: 5px; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-CBSeprator { width: 20px; text-align: center; display: inline-block; align-self: center; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-CBPicker-trigger { cursor: pointer; transition: transform var(--animation-duration) ease-out; display: flex; color: var(--Form-select-caret-iconColor); } .cxd-CBPicker-trigger:hover { color: var(--primary); } @keyframes contextMenuInSpecial { from { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.05, 1.05, 1.05); } to { transform: scale3d(1, 1, 1); } } @keyframes contextMenuIn { from { opacity: 0; } } @keyframes contextMenuOut { to { opacity: 0; } } .cxd-ContextMenu { z-index: 1500; position: fixed; left: 0; top: 0; } .cxd-ContextMenu-menu { position: absolute; z-index: 1500; display: block; position: absolute; margin: 0; padding: 4px 0; background: var(--menu-background); box-shadow: var(--menu-box-shadow); color: var(--menu-font-color); font-family: var(--menu-font-family); font-size: 12px; line-height: 20px; } .cxd-ContextMenu-menu.in, .cxd-ContextMenu-menu.out { animation-duration: var(--animation-duration); animation-fill-mode: both; } .cxd-ContextMenu-menu.in { animation-name: contextMenuInSpecial; animation-duration: var(--animation-duration); } .cxd-ContextMenu-menu.out { animation-name: contextMenuOut; } .cxd-ContextMenu-divider { border: none; height: 1px; background: var(--menu-border-color); margin: 4px 1px; padding: 0; } .cxd-ContextMenu-list { list-style: none; margin: 0; padding: 0; min-width: var(--menu-min-width); } .cxd-ContextMenu-item { position: relative; } .cxd-ContextMenu-item > a { white-space: nowrap; display: block; padding: var(--default-padding); color: inherit; border-top: none; border-bottom: none; } .cxd-ContextMenu-item:not(.is-disabled):hover > a { text-decoration: none; color: var(--menu-active-color); background: var(--menu-hover-bg-color); cursor: pointer; border-top: none; border-bottom: none; } .cxd-ContextMenu-item.is-disabled > a { color: var(--menu-disabled-color); pointer-events: none; } .cxd-ContextMenu-item.has-child > a::after { content: ""; width: 0; height: 0; border-width: 4px 7px; border-style: solid; border-color: transparent transparent transparent var(--default-icon-color); text-shadow: var(--menu-box-shadow); position: absolute; top: 50%; right: 0; transform: translateY(-50%); } .cxd-ContextMenu-item.has-child:hover > a::after { border-color: transparent transparent transparent var(--menu-active-color); } .cxd-ContextMenu-itemIcon { margin-right: 5px; } .cxd-ContextMenu-subList { display: none; list-style: none; transition: display ease-out 0.25s; } .cxd-ContextMenu-item:hover > .cxd-ContextMenu-subList { display: block; animation-duration: var(--animation-duration); animation-fill-mode: both; animation-name: contextMenuIn; position: absolute; left: 100%; top: -3px; min-width: var(--menu-sub-min-width); margin: 0; padding: 0; background: var(--menu-background); box-shadow: var(--menu-box-shadow); border-radius: var(--menu-border-radius); color: var(--menu-font-color); font-family: var(--menu-font-family); font-size: 12px; line-height: 20px; } .cxd-ContextMenu-item:hover > .cxd-ContextMenu-subList:hover { display: block; } .cxd-ContextMenu-item:hover > .cxd-ContextMenu-subList::before { display: block; position: absolute; content: ""; top: -1px; left: -1px; bottom: -1px; right: -1px; border-radius: var(--menu-border-radius); border: 1px solid var(--menu-border-color); z-index: -1; } .cxd-ContextMenu--left .cxd-ContextMenu-item:hover > .cxd-ContextMenu-subList { left: auto; right: 100%; } .cxd-ContextMenu-cursor { position: absolute; width: 1px; height: 1px; z-index: -1; } .cxd-ContextMenu-overlay { position: fixed !important; z-index: 1499; top: 0; left: 0; right: 0; bottom: 0; background: transparent; pointer-events: none; } .cxd-Code--dark { background-color: #1e1e1e; border-radius: var(--borderRadius); } .cxd-Code-pre-wrap { padding: var(--sizes-size-5); } .cxd-Wizard { position: relative; } .cxd-Wizard::before, .cxd-Wizard::after { display: table; content: ""; } .cxd-Wizard::after { clear: both; } .cxd-Wizard, .cxd-Wizard-tabs { padding: 0; } .cxd-Wizard .cxd-Badge, .cxd-Wizard-tabs .cxd-Badge { display: inline-block; width: var(--Wizard-badge-size); height: var(--Wizard-badge-size); font-size: var(--Wizard-badge-fontSize); line-height: var(--Wizard-badge-size); color: var(--Wizard-badge-color); text-align: center; white-space: nowrap; vertical-align: middle; background: var(--Wizard-badge-bg); border-radius: var(--Wizard-badge-borderRadius); text-shadow: 0 0.0625rem 0 rgba(0, 0, 0, 0.2); margin-right: var(--Wizard-badge-marginRight); border: var(--Wizard-badge-border); box-sizing: content-box; } .cxd-Wizard .cxd-Badge.is-active, .cxd-Wizard-tabs .cxd-Badge.is-active { color: var(--Wizard-badge-onActive-color); background: var(--Wizard-badge-onActive-backgroundColor); } .cxd-Wizard .cxd-Badge.is-complete, .cxd-Wizard-tabs .cxd-Badge.is-complete { color: var(--Wizard-badge-onComplete-color); background: var(--Wizard-badge-onComplete-backgroundColor); } .cxd-Wizard ul li.active, .cxd-Wizard-tabs ul li.active { color: var(--info); } .cxd-Wizard .cxd-Panel-footer > .cxd-Form-group, .cxd-Wizard .cxd-Panel-footer > .btn, .cxd-Wizard-tabs .cxd-Panel-footer > .cxd-Form-group, .cxd-Wizard-tabs .cxd-Panel-footer > .btn { margin-left: var(--gap-xs); } .cxd-Wizard > ul.nav, .cxd-Wizard-tabs > ul.nav { padding: 0; margin: 0; border: var(--borderWidth) solid var(--borderColor); } .cxd-Wizard > ul.nav li, .cxd-Wizard-tabs > ul.nav li { position: relative; float: left; padding: 0 var(--gap-md) 0 1.5625rem; margin: 0; color: var(--Wizard-step-color); cursor: pointer; height: var(--Wizard-steps-height); line-height: var(--Wizard-steps-height); } .cxd-Wizard > ul.nav li a, .cxd-Wizard-tabs > ul.nav li a { border: 0 none !important; background: transparent !important; color: inherit; display: inline; padding: 0; } .cxd-Wizard > ul.nav li a div, .cxd-Wizard-tabs > ul.nav li a div { display: inline; } .cxd-Wizard > ul.nav li:first-child, .cxd-Wizard-tabs > ul.nav li:first-child { padding-left: var(--gap-md); border-radius: 0.25rem 0 0 0; } .cxd-Wizard > ul.nav li:before, .cxd-Wizard > ul.nav li:after, .cxd-Wizard-tabs > ul.nav li:before, .cxd-Wizard-tabs > ul.nav li:after { content: ""; position: absolute; right: -0.625rem; border: var(--gap-md) solid transparent; border-right: 0; border-left: 0.625rem solid var(--borderColor); border-left-color: rgba(0, 0, 0, 0.05); z-index: 1; bottom: 0; } .cxd-Wizard > ul.nav li:after, .cxd-Wizard-tabs > ul.nav li:after { right: -0.5625rem; border-left-color: var(--Wizard-steps-bg); z-index: 2; } .cxd-Wizard > ul.nav li.is-active, .cxd-Wizard-tabs > ul.nav li.is-active { color: var(--Wizard-steps-li-onActive-color); background: var(--Wizard-steps-li-onActive-bg); } .cxd-Wizard > ul.nav li.is-active:after, .cxd-Wizard-tabs > ul.nav li.is-active:after { border-left-color: #fff; } .cxd-Wizard-steps { font-size: var(--fontSizeBase); padding: var(--Wizard-steps-padding); background: var(--Wizard-steps-bg); border-bottom: var(--Wizard-steps-borderWidth) solid var(--borderColor); text-align: var(--Wizard-steps-textAlign); } .cxd-Wizard-steps::before, .cxd-Wizard-steps::after { display: table; content: ""; } .cxd-Wizard-steps::after { clear: both; } .cxd-Wizard-steps ul { display: var(--Wizard-steps-ulDisplay); padding: 0; margin: 0; list-style: none outside none; } .cxd-Wizard-steps ul li { position: relative; float: left; padding: 0 var(--gap-md) 0 1.5625rem; margin: 0; font-size: var(--Wizard-step-fontSize); color: var(--Wizard-step-color); cursor: default; height: var(--Wizard-steps-height); line-height: var(--Wizard-steps-height); } .cxd-Wizard-steps ul li:first-child { padding-left: var(--gap-md); border-radius: 0.25rem 0 0 0; } .cxd-Wizard-steps ul li:before, .cxd-Wizard-steps ul li:after { font-family: var(--Wizard-steps-liVender); content: var(--Wizard-steps-liAfterContent); position: absolute; bottom: 0; right: -0.625rem; z-index: 2; color: var(--Wizard-after-color); } .cxd-Wizard-steps ul li:after { right: -0.5625rem; border-left-color: var(--Wizard-steps-bg); z-index: 2; } .cxd-Wizard-steps ul li.is-active { color: var(--Wizard-steps-li-onActive-color); background: var(--Wizard-steps-li-onActive-bg); } .cxd-Wizard-steps ul li.is-active:after, .cxd-Wizard-steps ul li.is-complete:after, .cxd-Wizard-steps ul li.is-active:before, .cxd-Wizard-steps ul li.is-complete:before { color: var(--Wizard-after-onActive-color); border-left-color: var(--Wizard-steps-li-onActive-arrow-bg); } .cxd-Wizard-steps ul li.is-complete, .cxd-Wizard-steps ul li.is-complete:hover { color: var(--Wizard-steps-li-onActive-color); cursor: pointer; } .cxd-Wizard-stepContent { padding: var(--Wizard-stepsContent-padding); } .cxd-Wizard-stepContent .Step-pane { display: none; } .cxd-Wizard-stepContent .Step-pane.is-active { display: inherit; } .cxd-Wizard-footer { padding: var(--sizes-size-5) var(--sizes-size-7); } .cxd-Wizard-footer .cxd-Button + .cxd-Button { margin-left: var(--Panel-footerButtonMarginLeft); } .cxd-Wizard-fixedButtom { position: absolute; bottom: 0; width: 100%; } .cxd-Wizard--vertical > .cxd-Wizard-step { display: flex; flex-direction: row; flex-wrap: wrap; border-bottom: none; } .cxd-Wizard--vertical > .cxd-Wizard-step > .cxd-Wizard-steps { height: auto; min-width: 40px; margin-right: 30px; margin-bottom: 1.875rem; background: none; border-bottom: none; } .cxd-Wizard--vertical > .cxd-Wizard-step > .cxd-Wizard-steps li { background: var(--Wizard-steps-bg); } .cxd-Wizard--vertical > .cxd-Wizard-step > .cxd-Wizard-steps ul li { height: 2.5rem; line-height: 2.5rem; position: relative; float: none; border-bottom: var(--borderWidth) solid var(--borderColor); padding-left: var(--gap-md); } .cxd-Wizard--vertical > .cxd-Wizard-step > .cxd-Wizard-steps ul li.is-active { background: var(--Wizard-steps-li-onActive-bg); } .cxd-Wizard--vertical > .cxd-Wizard-step > .cxd-Wizard-stepContent { flex-grow: 1; width: 0; } .cxd-Wizard--vertical > .cxd-Wizard-step > .cxd-Wizard-footer { width: 100%; } .cxd-Crud { position: relative; /* tag 样式 */ } .cxd-Crud-selection { margin-bottom: var(--gap-base); } .cxd-Crud-selection-overflow-wrapper { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; overflow-x: hidden; overflow-y: auto; height: calc((var(--Picker-tag-height) + var(--Picker-tag-marginBottom) * 4) * 3); max-height: calc((var(--Picker-tag-height) + var(--Picker-tag-marginBottom)) * 5); } .cxd-Crud-selection-overflow-wrapper .cxd-Crud-value { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; white-space: nowrap; vertical-align: middle; line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem); display: inline-block; font-size: var(--Pick-base-value-fontSize); color: var(--Pick-base-value-color); font-weight: var(--Pick-base-value-fontWeight); background: var(--Pick-base-value-bgColor); border-width: var(--Pick-base-value-top-border-width) var(--Pick-base-value-right-border-width) var(--Pick-base-value-bottom-border-width) var(--Pick-base-value-left-border-width); border-style: var(--Pick-base-value-top-border-style) var(--Pick-base-value-right-border-style) var(--Pick-base-value-bottom-border-style) var(--Pick-base-value-left-border-style); border-color: var(--Pick-base-value-top-border-color) var(--Pick-base-value-right-border-color) var(--Pick-base-value-bottom-border-color) var(--Pick-base-value-left-border-color); border-radius: var(--Pick-base-top-left-border-radius) var(--Pick-base-top-right-border-radius) var(--Pick-base-bottom-right-border-radius) var(--Pick-base-bottom-left-border-radius); margin-right: var(--gap-xs); margin-bottom: var(--gap-xs); margin-top: var(--gap-xs); max-width: 9.375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cxd-Crud-selection-overflow-wrapper .cxd-Crud-value:hover { background: var(--Form-selectValue-onHover-bg); } .cxd-Crud-selection-overflow-wrapper .cxd-Crud-value.is-disabled { pointer-events: none; opacity: var(--Button-onDisabled-opacity); } .cxd-Crud-selection-overflow-wrapper .cxd-Crud-valueIcon { color: var(--Pick-base-value-icon-color); cursor: pointer; border-right: 0.0625rem solid var(--Form-selectValue-borderColor); padding: 1px 5px; } .cxd-Crud-selection-overflow-wrapper .cxd-Crud-valueIcon:hover { background: var(--Pick-base-value-hover-icon-color); } .cxd-Crud-selection-overflow-wrapper .cxd-Crud-valueLabel { padding: 0 var(--gap-xs); } .cxd-Crud-selectionLabel { display: inline-block; vertical-align: top; margin-top: var(--gap-xs); } .cxd-Crud .cxd-Crud-value { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; white-space: nowrap; vertical-align: middle; line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem); display: inline-block; font-size: var(--Pick-base-value-fontSize); color: var(--Pick-base-value-color); font-weight: var(--Pick-base-value-fontWeight); background: var(--Pick-base-value-bgColor); border-width: var(--Pick-base-value-top-border-width) var(--Pick-base-value-right-border-width) var(--Pick-base-value-bottom-border-width) var(--Pick-base-value-left-border-width); border-style: var(--Pick-base-value-top-border-style) var(--Pick-base-value-right-border-style) var(--Pick-base-value-bottom-border-style) var(--Pick-base-value-left-border-style); border-color: var(--Pick-base-value-top-border-color) var(--Pick-base-value-right-border-color) var(--Pick-base-value-bottom-border-color) var(--Pick-base-value-left-border-color); border-radius: var(--Pick-base-top-left-border-radius) var(--Pick-base-top-right-border-radius) var(--Pick-base-bottom-right-border-radius) var(--Pick-base-bottom-left-border-radius); margin-right: var(--gap-xs); margin-bottom: var(--gap-xs); margin-top: var(--gap-xs); max-width: 9.375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cxd-Crud .cxd-Crud-value:hover { background: var(--Form-selectValue-onHover-bg); } .cxd-Crud .cxd-Crud-value.is-disabled { pointer-events: none; opacity: var(--Button-onDisabled-opacity); } .cxd-Crud .cxd-Crud-valueIcon { color: var(--Pick-base-value-icon-color); cursor: pointer; border-right: 0.0625rem solid var(--Form-selectValue-borderColor); padding: 1px 5px; } .cxd-Crud .cxd-Crud-valueIcon:hover { background: var(--Pick-base-value-hover-icon-color); } .cxd-Crud .cxd-Crud-valueLabel { padding: 0 var(--gap-xs); } .cxd-Crud-selectionClear { display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; margin-left: var(--gap-xs); margin-top: var(--gap-xs); vertical-align: middle; } .cxd-Crud-toolbar-item { margin-top: var(--Crud-toolbar-gap); line-height: var(--Crud-toolbar-lineHeight); height: var(--Crud-toolbar-height); vertical-align: middle; display: inline-flex; align-items: center; } .cxd-Crud-toolbar-item.is-mobile { margin-top: 0; } .cxd-Crud-toolbar-item--left:not(:first-child) { margin-left: var(--Crud-toolbar-gap); } .cxd-Crud-toolbar-item--right:not(:last-child) { margin-left: var(--Crud-toolbar-gap); } .cxd-Crud-toolbar-item--left { float: left; } .cxd-Crud-toolbar-item--right { float: right; } .cxd-Crud-actions > * + .cxd-Button, .cxd-Crud-actions > * + .cxd-ButtonGroup, .cxd-Crud-actions > * + .cxd-ButtonToolbar { margin-left: var(--Crud-toolbar-gap); } .cxd-Crud-statistics { line-height: var(--Crud-toolbar-height); vertical-align: middle; } .cxd-Crud-pageSwitch { display: flex; flex-flow: row wrap; align-items: center; } .cxd-Crud-pageSwitch .cxd-Select { margin-left: var(--Crud-toolbar-gap); } .cxd-Crud-pager { align-self: flex-start; } .cxd-Crud-filter { margin-bottom: var(--gap-base); } .cxd-Crud.is-mobile .cxd-Crud-toolbar { flex: 1; min-width: 0; min-height: 0; } @media (min-width: 576px) { .cxd-Crud-toolbar { margin-top: calc(var(--Crud-toolbar-gap) * -1); flex-basis: 0; flex-grow: 1; } .cxd-Crud-toolbar::before, .cxd-Crud-toolbar::after { display: table; content: ""; } .cxd-Crud-toolbar::after { clear: both; } .cxd-Crud-toolbar-item { line-height: var(--Crud-toolbar-lineHeight); height: var(--Crud-toolbar-height); vertical-align: middle; } .cxd-Crud-toolbar-item--left:not(:first-child) { margin-left: var(--Crud-toolbar-gap); } .cxd-Crud-toolbar-item--right:not(:last-child) { margin-left: var(--Crud-toolbar-gap); } .cxd-Crud-toolbar-item--left { float: left; } .cxd-Crud-toolbar-item--right { float: right; } .cxd-Crud-actions > * + .cxd-Button, .cxd-Crud-actions > * + .cxd-Button--disabled-wrap { margin-left: var(--Crud-toolbar-gap); } } .cxd-Crud2 { position: relative; } .cxd-Crud2-selection, .cxd-Crud2-toolbar, .cxd-Crud2-body { margin-bottom: var(--gap-base); } .cxd-Crud2 .cxd-Table-render-wrapper { position: relative; } .cxd-Crud2-selectionLabel { display: inline-block; vertical-align: top; margin-top: var(--gap-xs); } .cxd-Crud2-value { cursor: pointer; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; user-select: none; line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem); display: inline-block; font-size: var(--Pick-base-value-fontSize); color: var(--Pick-base-value-color); font-weight: var(--Pick-base-value-fontWeight); background: var(--Pick-base-value-bgColor); border-width: var(--Pick-base-value-top-border-width) var(--Pick-base-value-right-border-width) var(--Pick-base-value-bottom-border-width) var(--Pick-base-value-left-border-width); border-style: var(--Pick-base-value-top-border-style) var(--Pick-base-value-right-border-style) var(--Pick-base-value-bottom-border-style) var(--Pick-base-value-left-border-style); border-color: var(--Pick-base-value-top-border-color) var(--Pick-base-value-right-border-color) var(--Pick-base-value-bottom-border-color) var(--Pick-base-value-left-border-color); border-radius: var(--Pick-base-top-left-border-radius) var(--Pick-base-top-right-border-radius) var(--Pick-base-bottom-right-border-radius) var(--Pick-base-bottom-left-border-radius); margin-right: var(--gap-xs); margin-top: var(--gap-xs); } .cxd-Crud2-value:hover { background: var(--Form-selectValue-onHover-bg); } .cxd-Crud2-value.is-disabled { pointer-events: none; opacity: var(--Button-onDisabled-opacity); } .cxd-Crud2-valueIcon { color: var(--Pick-base-value-icon-color); cursor: pointer; border-right: 0.0625rem solid var(--Form-selectValue-borderColor); padding: 1px 5px; } .cxd-Crud2-valueIcon:hover { background: var(--Form-selectValue-onHover-bg); } .cxd-Crud2-valueLabel { padding: 0 var(--gap-xs); } .cxd-Crud2-selectionClear { display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; margin-left: var(--gap-xs); margin-top: var(--gap-xs); vertical-align: middle; } .cxd-Crud2-toolbar-item { margin-top: var(--Crud-toolbar-gap); line-height: var(--Crud-toolbar-lineHeight); height: var(--Crud-toolbar-height); vertical-align: middle; display: inline-flex; align-items: center; } .cxd-Crud2-toolbar-item--left:not(:first-child) { margin-left: var(--Crud-toolbar-gap); } .cxd-Crud2-toolbar-item--right:not(:last-child) { margin-left: var(--Crud-toolbar-gap); } .cxd-Crud2-toolbar-item--left { float: left; } .cxd-Crud2-toolbar-item--right { float: right; } .cxd-Crud2-actions > * + .cxd-Button, .cxd-Crud2-actions > * + .cxd-ButtonGroup, .cxd-Crud2-actions > * + .cxd-ButtonToolbar { margin-left: var(--Crud-toolbar-gap); } .cxd-Crud2-statistics { line-height: var(--Crud-toolbar-height); vertical-align: middle; } .cxd-Crud2-pageSwitch .cxd-Select { margin-left: var(--Crud-toolbar-gap); } .cxd-Crud2-pager { align-self: flex-start; } .cxd-Crud2-filter { margin-bottom: var(--gap-base); } @media (min-width: 576px) { .cxd-Crud-toolbar { margin-top: calc(var(--Crud-toolbar-gap) * -1); flex-basis: 0; flex-grow: 1; } .cxd-Crud-toolbar::before, .cxd-Crud-toolbar::after { display: table; content: ""; } .cxd-Crud-toolbar::after { clear: both; } .cxd-Crud-toolbar-item { line-height: var(--Crud-toolbar-lineHeight); height: var(--Crud-toolbar-height); vertical-align: middle; } .cxd-Crud-toolbar-item--left:not(:first-child) { margin-left: var(--Crud-toolbar-gap); } .cxd-Crud-toolbar-item--right:not(:last-child) { margin-left: var(--Crud-toolbar-gap); } .cxd-Crud-toolbar-item--left { float: left; } .cxd-Crud-toolbar-item--right { float: right; } .cxd-Crud-actions > * + .cxd-Button, .cxd-Crud-actions > * + .cxd-Button--disabled-wrap { margin-left: var(--Crud-toolbar-gap); } } .cxd-Table { position: relative; scroll-margin-top: var(--affix-offset-top); border-radius: var(--Table-borderRadius); margin-bottom: var(--gap-md); } .cxd-Form-control > .cxd-Table { margin-bottom: var(--gap-sm); } .cxd-Table-fixedTop { position: sticky; top: var(--affix-offset-top); background: var(--Table-bg); display: block; opacity: 1; z-index: 900; } .cxd-Table-fixedTop:after { content: ""; position: absolute; width: 100%; box-shadow: var(--Table-fixedTop-boxShadow); z-index: 30; height: 30px; top: 100%; pointer-events: none; background-color: transparent; margin-top: -2px; } .cxd-Table-fixedTop.is-fakeHide > .cxd-Table-wrapper { visibility: hidden; position: absolute; } .cxd-Table-fixedTop .cxd-Table-table { table-layout: fixed; } .cxd-Table-heading { background: var(--Table-heading-bg); padding: calc((var(--Table-heading-height) - var(--Table-fontSize) * var(--lineHeightBase)) / 2) var(--gap-sm); } .cxd-Table--unsaved .cxd-Table-heading { background: var(--Table--unsaved-heading-bg); color: var(--Table--unsaved-heading-color); } .cxd-Table-wrapper { overflow: hidden; } .cxd-Table-placeholder { color: var(--text--muted-color); text-align: center; height: var(--Table-placeholder-height); background: transparent !important; } .cxd-Table-placeholder:hover { color: var(--text--muted-color); background: transparent !important; } .cxd-Table-placeholder > td { vertical-align: middle !important; text-align: center; } .cxd-Table-placeholder-empty-icon.icon { display: block; margin: 0 auto; width: var(--Table-empty-icon-size); height: var(--Table-empty-icon-size); } .cxd-Table-searchableForm { background: var(--Table-searchableForm-backgroundColor); border-radius: var(--Table-searchableForm-borderRadius); margin-bottom: 0; } .cxd-Table-searchableForm-footer { padding: var(--Panel-footerPadding); clear: both; } .cxd-Table-searchableForm-checkbox-inner { /* 消除checkbox自身的padding top */ padding-top: 0 !important; } .cxd-Table-header { padding: var(--Table-toolbar-marginY) var(--Table-toolbar-marginX); } .cxd-Table-header > * + .cxd-Button, .cxd-Table-header > * + .cxd-ButtonGroup, .cxd-Table-header > * + .cxd-ButtonToolbar { margin-left: var(--Crud-toolbar-gap); } .cxd-Table-toolbar { display: flex; padding: var(--Table-toolbar-marginY) var(--Table-toolbar-marginX); flex-wrap: wrap; } .cxd-Table-toolbar::before, .cxd-Table-toolbar::after { display: table; content: ""; } .cxd-Table-toolbar::after { clear: both; } .cxd-Table-toolbar .cxd-DropDown-menuItem { height: auto; } .cxd-Table-toolbar .cxd-DropDown-menuItem .cxd-Checkbox { display: flex; align-items: center; } .cxd-Table-footerToolbar--affix, .cxd-Table-footer--affix { position: sticky; bottom: var(--affix-offset-bottom); background: var(--Table-bg); z-index: 900; } .cxd-Table.is-mobile .cxd-Table-toolbar .cxd-Form-item { padding: 0; } .cxd-Table-header + .cxd-Table-toolbar { padding-top: 0; } .cxd-Table-contentWrap { position: relative; } .cxd-Table-actions { display: inline-block; } .cxd-Table-actions > * { margin-right: var(--Crud-toolbar-gap); } .cxd-Table-content { min-height: 0.01%; overflow-x: auto; transform: translateZ(0); } .cxd-Table-content-colDragLine { position: absolute; width: 7px; top: 0; bottom: 0; right: -4px; cursor: col-resize; -webkit-user-select: none; -moz-user-select: none; user-select: none; opacity: 0.5; z-index: 15; } .cxd-Table-content-colDragLine--disabled { cursor: not-allowed; } .cxd-Table-content-colDragLine:hover, .cxd-Table-content-colDragLine.is-resizing { background: var(--primary); } .cxd-Table-table { width: 100%; min-width: 100%; margin-bottom: 0; font-size: var(--Table-fontSize); color: var(--Table-color); background: var(--Table-bg); border-spacing: 0; border-collapse: separate; } .cxd-Table-table.is-layout-fixed { table-layout: fixed !important; } .cxd-Table-table th, .cxd-Table-table td { text-align: left; border-color: transparent; border-bottom: var(--Table-borderWidth) solid var(--Table-borderColor); } .cxd-Table-table th.is-sticky, .cxd-Table-table td.is-sticky { position: sticky !important; z-index: 20; background: inherit; } .cxd-Table-table th.is-sticky-last-left:after, .cxd-Table-table td.is-sticky-last-left:after { position: absolute; top: 0; right: 0; bottom: -1px; width: 30px; transform: translateX(100%); transition: box-shadow 0.3s; content: ""; pointer-events: none; } .cxd-Table-table th.is-sticky-first-right:after, .cxd-Table-table td.is-sticky-first-right:after { position: absolute; top: 0; bottom: -1px; left: 0; width: 30px; transform: translateX(-100%); transition: box-shadow 0.3s; content: ""; pointer-events: none; } .cxd-Table-table th .label, .cxd-Table-table td .label { font-size: 90%; } .cxd-Table-table th > .cxd-Form, .cxd-Table-table th > .cxd-Form-item > .cxd-Form-control:not(.is-thin), .cxd-Table-table td > .cxd-Form, .cxd-Table-table td > .cxd-Form-item > .cxd-Form-control:not(.is-thin) { min-width: var(--Form-control-widthBase); } .cxd-Table-table th .cxd-Form-static, .cxd-Table-table td .cxd-Form-static { min-height: auto; } .cxd-Table-table.is-layout-fixed td { white-space: normal; word-break: break-all; } .cxd-Table-table.table-fixed-left .is-sticky-last-left:after { box-shadow: var(--Table-fixedLeft-boxShadow); } .cxd-Table-table.table-fixed-right .is-sticky-first-right:after { box-shadow: var(--Table-fixedRight-boxShadow); } .cxd-Table-table th { position: relative; } .cxd-Table-table th.text-center, .cxd-Table-table td.text-center, .cxd-Table-table th[colspan], .cxd-Table-table td[colspan] { text-align: center; } .cxd-Table-table th.text-right, .cxd-Table-table td.text-right { text-align: right; } .cxd-Table-table td .cxd-SwitchControl { padding-top: 0; } .cxd-Table-table--affixHeader { margin-top: calc(var(--Table-thead-height) * -1); } .cxd-Table-table--affixHeader > thead { visibility: hidden; } .cxd-Table-table--withCombine > thead > tr > th:first-child, .cxd-Table-table--withCombine > tbody > tr > td:first-child { padding-left: var(--TableCell-paddingX) !important; } .cxd-Table-table--withCombine > thead > tr > th:last-child, .cxd-Table-table--withCombine > tbody > tr > td:last-child { padding-right: var(--TableCell-paddingX) !important; } .cxd-Table-table--withCombine > tbody > tr:hover { background: transparent; } .cxd-Table-table--withCombine > tbody > tr > td { vertical-align: middle; } .cxd-Table-table--withCombine > tbody > tr > td:not(:last-child) { border-right: var(--Table-borderWidth) solid var(--Table-borderColor); } .cxd-Table-table--checkOnItemClick > tbody > tr { cursor: pointer; } .cxd-Table-table > thead > tr { background: var(--Table-thead-bg); } .cxd-Table-table > thead > tr > th { background: inherit; padding: var(--TableCell-paddingY) var(--TableCell-paddingX); text-align: left; border-bottom: var(--Table-thead-borderWidth) solid var(--Table-thead-borderColor); font-size: var(--Table-thead-fontSize); color: var(--Table-thead-color); font-weight: var(--fontWeightNormal); white-space: nowrap; } .cxd-Table-table > thead > tr > th:first-child { padding-left: 0.75rem; } .cxd-Table-table > thead > tr > th:first-child.cxd-Table-checkCell { padding-left: var(--TableCell--edge-paddingX); } .cxd-Table-table > thead > tr > th:last-child { padding-right: 0.75rem; } .cxd-Table-table > thead > tr > th:last-child .cxd-Table-content-colDragLine { width: 4px; right: 0; } .cxd-Table-table > thead > tr > th:not(:last-child) { border-right: var(--Table-thead-borderWidth) solid var(--Table-thead-borderColor); } .cxd-Table-table > thead > tr > th .cxd-Remark { margin-left: var(--gap-xs); } .cxd-Table-table > thead > tr > th .cxd-TableCell--title { min-width: -moz-fit-content; min-width: fit-content; display: inline-block; } .cxd-Table-table > thead > tr > th:first-child { border-top-left-radius: 4px; } .cxd-Table-table > thead > tr > th:last-child { border-top-right-radius: 4px; } .cxd-Table-table > thead > tr + tr { border-top: var(--Table-borderWidth) solid var(--Table-borderColor); } .cxd-Table-table > thead > tr { border-bottom: var(--Table-borderWidth) solid var(--Table-borderColor); } .cxd-Table-table-tr { background: var(--Table-bg); } .cxd-Table-table > tbody > tr { position: relative; } .cxd-Table-table > tbody > tr + tr { border-top: var(--Table-borderWidth) solid var(--Table-borderColor); } .cxd-Table-table > tbody > tr + tr > th { border-top: var(--Table-thead-borderWidth) solid var(--Table-thead-borderColor); } .cxd-Table-table > tbody > tr > th { background: var(--Table-thead-bg); color: var(--Table-thead-color); font-weight: var(--fontWeightNormal); white-space: nowrap; border-right: var(--Table-thead-borderWidth) solid var(--Table-thead-borderColor); } .cxd-Table-table > tbody > tr > td, .cxd-Table-table > tbody > tr > th { padding: var(--TableCell-paddingY) var(--TableCell-paddingX); position: relative; } .cxd-Table-table > tbody > tr > td:first-child, .cxd-Table-table > tbody > tr > th:first-child { padding-left: var(--TableCell--edge-paddingX); } .cxd-Table-table > tbody > tr > td:last-child, .cxd-Table-table > tbody > tr > th:last-child { padding-right: var(--TableCell--edge-paddingX); } .cxd-Table-table > tbody > tr.cxd-Table-tr--hasItemAction:hover { cursor: pointer; } .cxd-Table-table > tbody > tr:hover, .cxd-Table-table > tbody > tr.is-hovered { background: var(--Table-onHover-bg); border-color: var(--Table-onHover-borderColor); color: var(--Table-onHover-color); } .cxd-Table-table > tbody > tr:hover + tr, .cxd-Table-table > tbody > tr.is-hovered + tr { border-color: var(--Table-onHover-borderColor); } .cxd-Table-table > tbody > tr:active { background: var(--Table-onHover-bg); } .cxd-Table-table > tbody > tr:hover.cxd-Table-placeholder { color: var(--text--muted-color); } .cxd-Table-table > tbody > tr.is-checked { background: var(--Table-onChecked-bg); border-color: var(--Table-onChecked-borderColor); color: var(--Table-onChecked-color); } .cxd-Table-table > tbody > tr.is-checked + tr { border-color: var(--Table-onChecked-borderColor); } .cxd-Table-table > tbody > tr.is-moved, .cxd-Table-table > tbody > tr.is-modified { background: var(--Table-onModified-bg); border-color: var(--Table-onModified-borderColor); color: var(--Table-onModified-color); } .cxd-Table-table > tbody > tr.is-moved + tr, .cxd-Table-table > tbody > tr.is-modified + tr { border-color: var(--Table-onModified-borderColor); } .cxd-Table-table > tbody > tr.bg-light { background-color: #f8f9fa; color: #58666e; } .cxd-Table-table > tbody > tr.bg-light.lt, .cxd-Table-table > tbody > tr.bg-light .lt { background: rgb(253.9725, 254.1, 254.2275); } .cxd-Table-table > tbody > tr.bg-light.lter, .cxd-Table-table > tbody > tr.bg-light .lter { background: white; } .cxd-Table-table > tbody > tr.bg-light.dk, .cxd-Table-table > tbody > tr.bg-light .dk { background: rgb(238.73375, 241.35, 243.96625); } .cxd-Table-table > tbody > tr.bg-light.dker, .cxd-Table-table > tbody > tr.bg-light .dker { background: rgb(232.1875, 236.25, 240.3125); } .cxd-Table-table > tbody > tr.bg-light.bg, .cxd-Table-table > tbody > tr.bg-light .bg { background-color: #f8f9fa; } .cxd-Table-table > tbody > tr.bg-dark { background-color: #343a40; color: rgb(159.6724137931, 160, 160.3275862069); } .cxd-Table-table > tbody > tr.bg-dark.lt, .cxd-Table-table > tbody > tr.bg-dark .lt { background: rgb(65.1997844828, 70.75, 76.3002155172); } .cxd-Table-table > tbody > tr.bg-dark.lter, .cxd-Table-table > tbody > tr.bg-dark .lter { background: rgb(79.0370689655, 83.5, 87.9629310345); } .cxd-Table-table > tbody > tr.bg-dark.dk, .cxd-Table-table > tbody > tr.bg-dark .dk { background: rgb(39.4377155172, 45.25, 51.0622844828); } .cxd-Table-table > tbody > tr.bg-dark.dker, .cxd-Table-table > tbody > tr.bg-dark .dker { background: rgb(27.5129310345, 32.5, 37.4870689655); } .cxd-Table-table > tbody > tr.bg-dark.bg, .cxd-Table-table > tbody > tr.bg-dark .bg { background-color: #343a40; } .cxd-Table-table > tbody > tr.bg-dark a, .cxd-Table-table > tbody > tr.bg-dark .cxd-Button--link { color: rgb(185.2603448276, 185.5, 185.7396551724); } .cxd-Table-table > tbody > tr.bg-dark a:hover, .cxd-Table-table > tbody > tr.bg-dark .cxd-Button--link:hover { color: #fff; } .cxd-Table-table > tbody > tr.bg-dark .open > a, .cxd-Table-table > tbody > tr.bg-dark .open > a:hover, .cxd-Table-table > tbody > tr.bg-dark .open > a:focus { color: #fff; } .cxd-Table-table > tbody > tr.bg-dark .text-muted { color: rgb(65.3333333333, 75.7272727273, 81.6666666667) !important; } .cxd-Table-table > tbody > tr.bg-dark .text-lt { color: rgb(152.5, 165.5454545455, 173) !important; } .cxd-Table-table > tbody > tr.bg-black { background-color: #000; color: #666666; } .cxd-Table-table > tbody > tr.bg-black.lt, .cxd-Table-table > tbody > tr.bg-black .lt { background: rgb(12.75, 12.75, 12.75); } .cxd-Table-table > tbody > tr.bg-black.lter, .cxd-Table-table > tbody > tr.bg-black .lter { background: rgb(25.5, 25.5, 25.5); } .cxd-Table-table > tbody > tr.bg-black.dk, .cxd-Table-table > tbody > tr.bg-black .dk { background: black; } .cxd-Table-table > tbody > tr.bg-black.dker, .cxd-Table-table > tbody > tr.bg-black .dker { background: black; } .cxd-Table-table > tbody > tr.bg-black.bg, .cxd-Table-table > tbody > tr.bg-black .bg { background-color: #000; } .cxd-Table-table > tbody > tr.bg-black a, .cxd-Table-table > tbody > tr.bg-black .cxd-Button--link { color: rgb(127.5, 127.5, 127.5); } .cxd-Table-table > tbody > tr.bg-black a:hover, .cxd-Table-table > tbody > tr.bg-black .cxd-Button--link:hover { color: #fff; } .cxd-Table-table > tbody > tr.bg-black .open > a, .cxd-Table-table > tbody > tr.bg-black .open > a:hover, .cxd-Table-table > tbody > tr.bg-black .open > a:focus { color: #fff; } .cxd-Table-table > tbody > tr.bg-black .text-muted { color: rgb(65.3333333333, 75.7272727273, 81.6666666667) !important; } .cxd-Table-table > tbody > tr.bg-black .text-lt { color: rgb(152.5, 165.5454545455, 173) !important; } .cxd-Table-table > tbody > tr.bg-primary { background-color: #007bff; color: rgb(206.55, 228.69, 252.45); } .cxd-Table-table > tbody > tr.bg-primary.lt, .cxd-Table-table > tbody > tr.bg-primary .lt { background: rgb(28.36875, 136.30125, 252.13125); } .cxd-Table-table > tbody > tr.bg-primary.lter, .cxd-Table-table > tbody > tr.bg-primary .lter { background: rgb(56.1, 149.58, 249.9); } .cxd-Table-table > tbody > tr.bg-primary.dk, .cxd-Table-table > tbody > tr.bg-primary .dk { background: rgb(0, 110.7, 229.5); } .cxd-Table-table > tbody > tr.bg-primary.dker, .cxd-Table-table > tbody > tr.bg-primary .dker { background: rgb(0, 98.4, 204); } .cxd-Table-table > tbody > tr.bg-primary.bg, .cxd-Table-table > tbody > tr.bg-primary .bg { background-color: #007bff; } .cxd-Table-table > tbody > tr.bg-primary a, .cxd-Table-table > tbody > tr.bg-primary .cxd-Button--link { color: white; } .cxd-Table-table > tbody > tr.bg-primary a:hover, .cxd-Table-table > tbody > tr.bg-primary .cxd-Button--link:hover { color: #fff; } .cxd-Table-table > tbody > tr.bg-primary .open > a, .cxd-Table-table > tbody > tr.bg-primary .open > a:hover, .cxd-Table-table > tbody > tr.bg-primary .open > a:focus { color: #fff; } .cxd-Table-table > tbody > tr.bg-primary .text-muted { color: rgb(65.3333333333, 75.7272727273, 81.6666666667) !important; } .cxd-Table-table > tbody > tr.bg-primary .text-lt { color: rgb(152.5, 165.5454545455, 173) !important; } .cxd-Table-table > tbody > tr.bg-success { background-color: #28a745; color: rgb(180.0804347826, 230.9195652174, 191.6893700787); } .cxd-Table-table > tbody > tr.bg-success.lt, .cxd-Table-table > tbody > tr.bg-success .lt { background: rgb(47.8337862319, 184.6662137681, 79.0789862205); } .cxd-Table-table > tbody > tr.bg-success.lter, .cxd-Table-table > tbody > tr.bg-success .lter { background: rgb(57.9956521739, 200.0043478261, 90.4228346457); } .cxd-Table-table > tbody > tr.bg-success.dk, .cxd-Table-table > tbody > tr.bg-success .dk { background: rgb(32.8037137681, 148.6962862319, 59.2673720472); } .cxd-Table-table > tbody > tr.bg-success.dker, .cxd-Table-table > tbody > tr.bg-success .dker { background: rgb(26.2449275362, 129.7550724638, 49.8811023622); } .cxd-Table-table > tbody > tr.bg-success.bg, .cxd-Table-table > tbody > tr.bg-success .bg { background-color: #28a745; } .cxd-Table-table > tbody > tr.bg-success a, .cxd-Table-table > tbody > tr.bg-success .cxd-Button--link { color: rgb(218.6753623188, 243.3246376812, 224.3039370079); } .cxd-Table-table > tbody > tr.bg-success a:hover, .cxd-Table-table > tbody > tr.bg-success .cxd-Button--link:hover { color: #fff; } .cxd-Table-table > tbody > tr.bg-success .open > a, .cxd-Table-table > tbody > tr.bg-success .open > a:hover, .cxd-Table-table > tbody > tr.bg-success .open > a:focus { color: #fff; } .cxd-Table-table > tbody > tr.bg-success .text-muted { color: rgb(65.3333333333, 75.7272727273, 81.6666666667) !important; } .cxd-Table-table > tbody > tr.bg-success .text-lt { color: rgb(152.5, 165.5454545455, 173) !important; } .cxd-Table-table > tbody > tr.bg-info { background-color: #007bff; color: rgb(206.55, 228.69, 252.45); } .cxd-Table-table > tbody > tr.bg-info.lt, .cxd-Table-table > tbody > tr.bg-info .lt { background: rgb(28.36875, 136.30125, 252.13125); } .cxd-Table-table > tbody > tr.bg-info.lter, .cxd-Table-table > tbody > tr.bg-info .lter { background: rgb(56.1, 149.58, 249.9); } .cxd-Table-table > tbody > tr.bg-info.dk, .cxd-Table-table > tbody > tr.bg-info .dk { background: rgb(0, 110.7, 229.5); } .cxd-Table-table > tbody > tr.bg-info.dker, .cxd-Table-table > tbody > tr.bg-info .dker { background: rgb(0, 98.4, 204); } .cxd-Table-table > tbody > tr.bg-info.bg, .cxd-Table-table > tbody > tr.bg-info .bg { background-color: #007bff; } .cxd-Table-table > tbody > tr.bg-info a, .cxd-Table-table > tbody > tr.bg-info .cxd-Button--link { color: white; } .cxd-Table-table > tbody > tr.bg-info a:hover, .cxd-Table-table > tbody > tr.bg-info .cxd-Button--link:hover { color: #fff; } .cxd-Table-table > tbody > tr.bg-info .open > a, .cxd-Table-table > tbody > tr.bg-info .open > a:hover, .cxd-Table-table > tbody > tr.bg-info .open > a:focus { color: #fff; } .cxd-Table-table > tbody > tr.bg-info .text-muted { color: rgb(65.3333333333, 75.7272727273, 81.6666666667) !important; } .cxd-Table-table > tbody > tr.bg-info .text-lt { color: rgb(152.5, 165.5454545455, 173) !important; } .cxd-Table-table > tbody > tr.bg-warning { background-color: #fad733; color: rgb(254.6303827751, 253.8810018994, 250.3696172249); } .cxd-Table-table > tbody > tr.bg-warning.lt, .cxd-Table-table > tbody > tr.bg-warning .lt { background: rgb(248.3162978469, 218.3934795088, 78.1837021531); } .cxd-Table-table > tbody > tr.bg-warning.lter, .cxd-Table-table > tbody > tr.bg-warning .lter { background: rgb(247.2700956938, 222.2002127864, 104.7299043062); } .cxd-Table-table > tbody > tr.bg-warning.dk, .cxd-Table-table > tbody > tr.bg-warning .dk { background: rgb(252.3212021531, 212.0197742601, 23.1787978469); } .cxd-Table-table > tbody > tr.bg-warning.dker, .cxd-Table-table > tbody > tr.bg-warning .dker { background: rgb(250, 206.0301507538, 0); } .cxd-Table-table > tbody > tr.bg-warning.bg, .cxd-Table-table > tbody > tr.bg-warning .bg { background-color: #fad733; } .cxd-Table-table > tbody > tr.bg-warning a, .cxd-Table-table > tbody > tr.bg-warning .cxd-Button--link { color: white; } .cxd-Table-table > tbody > tr.bg-warning a:hover, .cxd-Table-table > tbody > tr.bg-warning .cxd-Button--link:hover { color: #fff; } .cxd-Table-table > tbody > tr.bg-warning .open > a, .cxd-Table-table > tbody > tr.bg-warning .open > a:hover, .cxd-Table-table > tbody > tr.bg-warning .open > a:focus { color: #fff; } .cxd-Table-table > tbody > tr.bg-warning .text-muted { color: rgb(65.3333333333, 75.7272727273, 81.6666666667) !important; } .cxd-Table-table > tbody > tr.bg-warning .text-lt { color: rgb(152.5, 165.5454545455, 173) !important; } .cxd-Table-table > tbody > tr.bg-danger { background-color: #dc3545; color: rgb(248.4765822785, 228.5234177215, 230.4350981581); } .cxd-Table-table > tbody > tr.bg-danger.lt, .cxd-Table-table > tbody > tr.bg-danger .lt { background: rgb(221.1220727848, 77.3779272152, 91.1498214015); } .cxd-Table-table > tbody > tr.bg-danger.lter, .cxd-Table-table > tbody > tr.bg-danger .lter { background: rgb(222.8816455696, 101.1183544304, 112.7842984916); } .cxd-Table-table > tbody > tr.bg-danger.dk, .cxd-Table-table > tbody > tr.bg-danger .dk { background: rgb(214.0431170886, 33.4568829114, 50.7585580421); } .cxd-Table-table > tbody > tr.bg-danger.dker, .cxd-Table-table > tbody > tr.bg-danger .dker { background: rgb(194.7651898734, 27.2348101266, 43.2856249526); } .cxd-Table-table > tbody > tr.bg-danger.bg, .cxd-Table-table > tbody > tr.bg-danger .bg { background-color: #dc3545; } .cxd-Table-table > tbody > tr.bg-danger a, .cxd-Table-table > tbody > tr.bg-danger .cxd-Button--link { color: white; } .cxd-Table-table > tbody > tr.bg-danger a:hover, .cxd-Table-table > tbody > tr.bg-danger .cxd-Button--link:hover { color: #fff; } .cxd-Table-table > tbody > tr.bg-danger .open > a, .cxd-Table-table > tbody > tr.bg-danger .open > a:hover, .cxd-Table-table > tbody > tr.bg-danger .open > a:focus { color: #fff; } .cxd-Table-table > tbody > tr.bg-danger .text-muted { color: rgb(65.3333333333, 75.7272727273, 81.6666666667) !important; } .cxd-Table-table > tbody > tr.bg-danger .text-lt { color: rgb(152.5, 165.5454545455, 173) !important; } .cxd-Table-table > tbody > tr.is-dragging { opacity: var(--Table-onDragging-opacity); background-color: var(--Table-onDragging-bg); } .cxd-Table-table > tbody.is-dragging > tr:not(.is-dragging) { background: var(--Table-bg); color: var(--Table-color); } .cxd-Table-table > tbody.is-dragging > tr:not(.is-drop-allowed):not(.is-dragging) { color: var(--table-body-disabled-color); background-color: var(--table-body-disabled-bg-color); } .cxd-Table-table .cxd-Table-divider2 { content: ""; position: absolute; height: 0.0625rem; top: 50%; width: 0.625rem; background: var(--Table-tree-borderColor); } .cxd-Table-table .cxd-Table-divider3 { position: absolute; width: 0.0625rem; top: 0; bottom: 0; height: 100%; background: var(--Table-tree-borderColor); } .cxd-Table-table > thead > tr > th.cxd-Table-checkCell, .cxd-Table-table > tbody > tr > td.cxd-Table-checkCell { width: 0.0625rem; padding-right: var(--TableCell-paddingX); white-space: nowrap; } .cxd-Table-table > thead > tr > th.cxd-Table-checkCell .cxd-Checkbox, .cxd-Table-table > tbody > tr > td.cxd-Table-checkCell .cxd-Checkbox { margin: 0; } .cxd-Table-table > tbody > tr > td.cxd-Table-checkCell { border-right: 0; } .cxd-Table-table > thead > tr > th.cxd-Table-expandCell, .cxd-Table-table > tbody > tr > td.cxd-Table-expandCell { border-right: 0; width: 0.0625rem; padding-right: 0; } .cxd-Table-table > thead > tr > th.cxd-Table-dragCell, .cxd-Table-table > tbody > tr > td.cxd-Table-dragCell { border-right: 0; width: 0.0625rem; padding-right: 0; cursor: move; } .cxd-Table-table > thead > tr > th.cxd-Table-dragCell > svg, .cxd-Table-table > tbody > tr > td.cxd-Table-dragCell > svg { vertical-align: middle; top: 0; } .cxd-Table-table > tbody > tr > td.cxd-Table-expandCell { position: relative; } .cxd-Table-table > tbody > tr.is-expanded > td.cxd-Table-expandCell::before { content: ""; position: absolute; width: 0.0625rem; top: 50%; bottom: 0; left: 1.4375rem; height: auto; background: var(--Table-tree-borderColor); } .cxd-Table-table > thead > tr > th.cxd-TableCell--sortable > .cxd-TableCell--title, .cxd-Table-table > thead > tr > th.cxd-TableCell--searchable > .cxd-TableCell--title, .cxd-Table-table > thead > tr > th.cxd-TableCell--filterable > .cxd-TableCell--title { display: inline-block; } .cxd-Table-table > thead > tr > th.cxd-Table-primayCell, .cxd-Table-table > tbody > tr > td.cxd-Table-primayCell { white-space: nowrap; } .cxd-Table-table > thead > tr > th.cxd-Table-primayCell > .cxd-Spinner, .cxd-Table-table > tbody > tr > td.cxd-Table-primayCell > .cxd-Spinner { vertical-align: middle; } .cxd-Table-table > thead > tr > th.cxd-Table-primayCell > [data-role=form-item], .cxd-Table-table > tbody > tr > td.cxd-Table-primayCell > [data-role=form-item] { display: inline-block; min-width: 10rem; } .cxd-Table.is-mobile .cxd-Table-table > tbody > tr:hover, .cxd-Table.is-mobile .cxd-Table-table > tbody > tr.is-hovered { background: var(--Table-bg); border-color: var(--Table-borderColor); color: var(--Table-color); } .cxd-Table.is-mobile .cxd-Table-table > tbody > tr:hover + tr, .cxd-Table.is-mobile .cxd-Table-table > tbody > tr.is-hovered + tr { border-color: var(--Table-borderColor); } .cxd-TableCell-sortBtn, .cxd-TableCell-searchBtn, .cxd-TableCell-filterBtn { display: inline-block; vertical-align: top; padding-left: var(--gap-sm); } .cxd-TableCell-sortBtn:hover, .cxd-TableCell-searchBtn:hover, .cxd-TableCell-filterBtn:hover { color: var(--TableCell-searchBtn--onActive-color); } .cxd-TableCell-sortBtn { cursor: pointer; width: var(--TableCell-sortBtn-width); height: var(--gap-md); flex-direction: column; justify-content: center; align-items: center; color: var(--icon-color); } .cxd-TableCell-sortBtn--up > svg, .cxd-TableCell-sortBtn--down > svg, .cxd-TableCell-sortBtn--default > svg { color: inherit; width: 12px; height: 12px; } .cxd-TableCell-sortBtn--up, .cxd-TableCell-sortBtn--down, .cxd-TableCell-sortBtn--default { display: none; position: absolute; z-index: 2; font-style: normal; } .cxd-TableCell-sortBtn--up.is-active, .cxd-TableCell-sortBtn--down.is-active, .cxd-TableCell-sortBtn--default.is-active { display: inline-block; } .cxd-TableCell-sortBtn--default.is-active { color: var(--text--muted-color); } .cxd-TableCell-sortBtn--default.is-active:hover { color: var(--TableCell-searchBtn--onActive-color); } .cxd-TableCell-sortBtn--up.is-active, .cxd-TableCell-sortBtn--down.is-active { color: var(--TableCell-sortBtn--onActive-color); } .cxd-TableCell-searchBtn { cursor: pointer; color: var(--text--muted-color); } .cxd-TableCell-searchBtn svg.icon { width: 12px; height: 12px; } .cxd-TableCell-searchBtn.is-active { color: var(--TableCell-searchBtn--onActive-color); } .cxd-TableCell-searchBtn.is-opened { color: var(--Button--default-onActive-border); } .cxd-TableCell-searchPopOver { border: none; min-width: 20rem; max-width: 40rem; } .cxd-TableCell-searchPopOver > .cxd-Panel { margin: 0; } .cxd-TableCell-filterBtn { cursor: pointer; width: var(--TableCell-filterBtn-width); color: var(--text--muted-color); } .cxd-TableCell-filterBtn svg.icon { width: 12px; height: 12px; } .cxd-TableCell-filterBtn.is-active { color: var(--TableCell-filterBtn--onActive-color); } .cxd-TableCell-filterBtn .cxd-Remark { display: inline; } .cxd-TableCell-filterPopOver { border: none; width: 10rem; } .cxd-TableCell-filterPopOver .cxd-DropDown-menu { margin: 0; padding: 0; border-radius: 0; } .cxd-TableCell-filterPopOver .cxd-DropDown-menu .cxd-DropDown-divider { height: var(--TableCell-filterPopOver-dropDownItem-height); line-height: var(--TableCell-filterPopOver-dropDownItem-height); padding: var(--TableCell-filterPopOver-dropDownItem-padding); background: var(--white); margin: 0; } .cxd-TableCell-filterPopOver .cxd-DropDown-menu .cxd-DropDown-divider:hover { background: var(--light); color: var(--primary); } .cxd-TableCell-filterPopOver .cxd-DropDown-menu .cxd-DropDown-divider.is-selected { background: var(--light); color: var(--primary); } .cxd-TableCell-filterPopOver .cxd-DropDown-menu .cxd-DropDown-divider .cxd-Checkbox { width: 100%; margin: 0; } .cxd-TableCell-filterPopOver .cxd-SearchBox { margin-left: var(--gap-xs); margin-top: var(--gap-xs); } .cxd-Table-itemActions-wrap { position: absolute; width: 100%; z-index: calc(var(--Table-fixed-zIndex) + 1); left: 0; top: 0; min-height: 30px; pointer-events: none; box-shadow: var(--Table-onHover-boxShadow); } .cxd-Table-itemActions { pointer-events: all; position: absolute; background: linear-gradient(90deg, rgba(var(--Table-onHover-bg-rgb), 0) 0%, rgba(var(--Table-onHover-bg-rgb), 1) 20%, rgba(var(--Table-onHover-bg-rgb), 1) 100%); top: var(--Table-borderWidth); bottom: 0; right: 0; padding-left: 5rem; padding-right: var(--TableCell-paddingX); display: flex; align-items: center; } .cxd-Table-itemActions a { cursor: pointer; padding: var(--gap-xs) var(--gap-sm); color: var(--link-color); -webkit-text-decoration: var(--link-decoration); text-decoration: var(--link-decoration); } .cxd-Table-itemActions a:hover { color: var(--link-onHover-color); -webkit-text-decoration: var(--link-onHover-decoration); text-decoration: var(--link-onHover-decoration); } .cxd-Table-itemActions a.is-disabled { pointer-events: none; opacity: var(--Button-onDisabled-opacity); color: var(--text--muted-color); } .cxd-Table-dragTip { color: var(--text--loud-color); clear: both; margin-top: var(--gap-xs); width: 100%; color: var(--info); } .cxd-Table-foot { background: var(--Table-thead-bg); } .cxd-Table-footTable { position: relative; width: 100%; border-spacing: 0; border-collapse: collapse; margin-bottom: 0; background: transparent; } .cxd-Table-footTable > tbody > tr > th { width: 7.5rem; text-align: right; padding: var(--TableCell-paddingY) var(--TableCell-paddingX); } .cxd-Table-footTable > tbody > tr > td { word-break: break-all; padding: var(--TableCell-paddingY) var(--TableCell-paddingX); } .cxd-Table-footTable > tbody > tr:not(:first-child) { border-top: var(--Table-borderWidth) solid var(--Table-tbody-borderTopColor); } .cxd-Table-retryBtn { color: var(--Form-feedBack-color); cursor: pointer; } .cxd-Table-retryBtn:hover { color: var(--Form-feedBack-color); } .cxd-Table-expandBtn, .cxd-Table-expandBtn2 { position: relative; z-index: 1; color: var(--Table-expandBtn-color); display: inline-flex; justify-content: center; align-items: center; width: 0.875rem; line-height: 1; height: 16px; } .cxd-Table-expandBtn > svg, .cxd-Table-expandBtn2 > svg { display: inline-block; text-align: center; cursor: pointer; transition: transform ease-in-out var(--animation-duration), top ease-in-out var(--animation-duration); position: relative; transform-origin: 50% 50%; width: 0.625rem; height: 0.625rem; top: 0; transform: rotate(90deg); } .cxd-Table-expandBtn.is-active > svg, .cxd-Table-expandBtn2.is-active > svg { transform: rotate(-90deg); } .cxd-Table-expandBtn:hover, .cxd-Table-expandBtn2:hover { text-decoration: none; } .cxd-Table-expandBtn2 { margin-right: var(--gap-sm); } .cxd-Table-expandBtn2 + * { display: inline-block; } .cxd-Table-indent { display: inline-block; } .cxd-Table-expandSpace { display: inline-block; width: 1.375rem; } .cxd-Table-dragBtn { margin-right: var(--gap-xs); display: inline-block; visibility: hidden; cursor: move; color: var(--icon-color); } .cxd-Table-dragBtn:hover { text-decoration: none; color: var(--icon-onHover-color); } .cxd-Table-dragBtn > svg { vertical-align: -2px; } .cxd-Table-table > tbody > tr:hover .cxd-Table-dragBtn, .cxd-Table-table > tbody > tr.is-dragging .cxd-Table-dragBtn, .cxd-Table-table > tbody > tr.is-drop-allowed .cxd-Table-dragBtn { visibility: visible; } .cxd-Table .fake-hide { visibility: hidden; position: absolute; } .cxd-Table-badge { position: absolute; top: 0; left: 0; z-index: 25; } .cxd-Table--autoFillHeight { margin-bottom: 0; } .cxd-Table--autoFillHeight > .cxd-Table-contentWrap > .cxd-Table-content table { border-top: none; } .cxd-Table--autoFillHeight > .cxd-Table-contentWrap > .cxd-Table-content table thead { position: sticky; top: 0; z-index: 21; } .cxd-Table--autoFillHeight > .cxd-Table-footToolbar { margin-bottom: 0; } .cxd-Table-SFToggler { color: var(--text-color); font-size: var(--Button--sm-fontSize); margin-left: var(--gap-sm); display: inline-flex; cursor: pointer; } .cxd-Table-SFToggler:hover { color: var(--link-color); font-size: var(--Button--sm-fontSize); } .cxd-Table-SFToggler-arrow { width: var(--gap-md); text-align: center; display: flex; align-items: center; justify-content: center; line-height: 1; transform: rotate(90deg); } .cxd-Table-SFToggler-arrow > svg { transition: transform var(--animation-duration); display: inline-block; color: var(--Form-select-caret-iconColor); width: 10px; height: 10px; top: 0; } .cxd-Table-SFToggler.is-expanded { color: var(--Tabs-onActive-color); } .cxd-Table-SFToggler.is-expanded .cxd-Table-SFToggler-arrow > svg { transform: rotate(180deg); } .cxd-Table-emptyBlock { background-color: #eaebed; border-radius: 5px; line-height: 15px; } .cxd-InputTable .cxd-Field--quickEditable svg { color: var(--primary); } .cxd-InputTable .cxd-Field--quickEditable svg:hover { color: var(--primary-onHover); } .cxd-InputTable .cxd-Field--quickEditable svg:active { color: var(--primary-onActive); } .cxd-InputTable .cxd-Field--quickEditable svg { color: var(--primary); } .cxd-InputTable .cxd-Field--quickEditable svg:hover { color: var(--primary-onHover); } .cxd-InputTable .cxd-Field--quickEditable svg:active { color: var(--primary-onActive); } .cxd-InputTable-toolbar { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .cxd-InputTable-pager { margin-left: auto; } .cxd-OperationField { margin: -0.1875rem; } .cxd-OperationField > .cxd-Button, .cxd-OperationField > .cxd-Button--disabled-wrap > .cxd-Button { margin: 0.1875rem; height: auto; } .cxd-OperationField > .cxd-Button--disabled-wrap > .cxd-Button--link { padding: 0; } .cxd-OperationField > .cxd-Button--link { padding: 0; margin-right: 0.625rem; } /* 移动端样式调整 */ @media (max-width: 767px) { .cxd-Table-table > thead > tr > th { border-bottom: none; } .cxd-Table-table > thead > tr > th::before { position: absolute; box-sizing: border-box; content: " "; pointer-events: none; right: 0; bottom: 0; left: 0; border-bottom: 1px solid var(--Table-thead-borderColor); transform: scaleY(0.5); } .cxd-Table-table th, .cxd-Table-table td { position: relative; border-bottom: none; } .cxd-Table-table th::before, .cxd-Table-table td::before { position: absolute; box-sizing: border-box; content: " "; pointer-events: none; right: 0; bottom: 0; left: 0; border-bottom: 1px solid var(--Table-borderColor); transform: scaleY(0.5); } } .cxd-AutoFilterToolbar { display: block; text-align: right; white-space: nowrap; } .cxd-AutoFilterToolbar > .cxd-Button { margin-top: 0; } .cxd-Table2 { position: relative; border-radius: var(--Table-borderRadius); } .cxd-Table2 .cxd-Table-cell-wrapper .cxd-Table-badge { width: 100%; height: 100%; } .cxd-Table2.cxd-Table-bordered { border-width: var(--Table-borderWidth) var(--Table-borderWidth) 0 var(--Table-borderWidth); border-style: solid; border-color: var(--Table-borderColor); border-collapse: inherit; } .cxd-Table2.cxd-Table-bordered .cxd-Table-table > thead > tr > th, .cxd-Table2.cxd-Table-bordered .cxd-Table-table > tbody > tr > td, .cxd-Table2.cxd-Table-bordered .cxd-Table-table > tfoot > tr > td { border-right: var(--Table-borderWidth) solid var(--Table-borderColor); } .cxd-Table2.cxd-Table-bordered .cxd-Table-table > thead > tr > th:last-child, .cxd-Table2.cxd-Table-bordered .cxd-Table-table > tbody > tr > td:last-child, .cxd-Table2.cxd-Table-bordered .cxd-Table-table > tfoot > tr > td:last-child { border-right: none; } .cxd-Table2.cxd-Table-bordered .cxd-Table-footer { border-bottom: var(--Table-borderWidth) solid var(--Table-borderColor); } .cxd-Table2.cxd-Table-bordered .cxd-Table-title { border-bottom: var(--Table-borderWidth) solid var(--Table-borderColor); } .cxd-Table2.cxd-Table-large .cxd-Table-table > thead > tr > th { padding: var(--table-size-large-paddingTop) var(--table-size-large-paddingRight) var(--table-size-large-paddingBottom) var(--table-size-large-paddingLeft); } .cxd-Table2.cxd-Table-large .cxd-Table-table > tbody > tr > td, .cxd-Table2.cxd-Table-large .cxd-Table-table > tbody > tr > th { padding: var(--table-size-large-paddingTop) var(--table-size-large-paddingRight) var(--table-size-large-paddingBottom) var(--table-size-large-paddingLeft); } .cxd-Table2.cxd-Table-large .cxd-Table-table > tfoot > tr > td { padding: var(--table-size-large-paddingTop) var(--table-size-large-paddingRight) var(--table-size-large-paddingBottom) var(--table-size-large-paddingLeft); } .cxd-Table2.cxd-Table-large .cxd-TableCell-filterBtn { right: calc(var(--table-size-large-paddingRight) - var(--TableCell-filterBtn-width) / 2); } .cxd-Table2.cxd-Table-small .cxd-Table-table > thead > tr > th { padding: var(--table-size-small-paddingTop) var(--table-size-small-paddingRight) var(--table-size-small-paddingBottom) var(--table-size-small-paddingLeft); } .cxd-Table2.cxd-Table-small .cxd-Table-table > tbody > tr > td, .cxd-Table2.cxd-Table-small .cxd-Table-table > tbody > tr > th { padding: var(--table-size-small-paddingTop) var(--table-size-small-paddingRight) var(--table-size-small-paddingBottom) var(--table-size-small-paddingLeft); } .cxd-Table2.cxd-Table-small .cxd-Table-table > tfoot > tr > td { padding: var(--table-size-small-paddingTop) var(--table-size-small-paddingRight) var(--table-size-small-paddingBottom) var(--table-size-small-paddingLeft); } .cxd-Table2.cxd-Table-small .cxd-TableCell-filterBtn { right: calc(var(--table-size-small-paddingRight) - var(--TableCell-filterBtn-width) / 2); } .cxd-Table2 .cxd-Table-title, .cxd-Table2 .cxd-Table-footer { color: var(--table-title-color); font-size: var(--table-title-fontSize); font-weight: var(--table-title-fontWeight); line-height: var(--table-title-lineHeight); background: var(--Table-heading-bg); padding: var(--table-title-paddingTop) var(--table-title-paddingRight) var(--table-title-paddingBottom) var(--table-title-paddingLeft); } .cxd-Table2 .cxd-Table-header { padding: var(--Table-toolbar-marginY) var(--Table-toolbar-marginX); } .cxd-Table2 .cxd-Table-header.cxd-Table-sticky-holder { position: sticky; z-index: 3; background: var(--Table-bg); } .cxd-Table2 .cxd-Table-toolbar { display: flex; margin: 0 var(--Table-toolbar-marginX) var(--Table-toolbar-marginY); flex-wrap: wrap; } .cxd-Table2 .cxd-Table-toolbar::before, .cxd-Table2 .cxd-Table-toolbar::after { display: table; content: ""; } .cxd-Table2 .cxd-Table-toolbar::after { clear: both; } .cxd-Table2 .cxd-Table-toolbar .cxd-DropDown-menuItem { height: auto; } .cxd-Table2 .cxd-Table-toolbar .cxd-DropDown-menuItem .cxd-Checkbox { display: flex; align-items: center; } .cxd-Table2 .cxd-Table-header + .cxd-Table-toolbar { padding-top: 0; } .cxd-Table2 .cxd-Table-content { min-height: 0.01%; overflow-x: auto; transform: translateZ(0); } .cxd-Table2 .cxd-Table-content th { position: relative; } .cxd-Table2 .cxd-Table-table { width: 100%; min-width: 100%; margin-bottom: 0; font-size: var(--Table-fontSize); color: var(--Table-color); font-weight: var(--table-body-fontWeight); line-height: var(--table-body-lineHeight); background: var(--Table-bg); border-spacing: 0; border-collapse: collapse; border: none; } .cxd-Table2 .cxd-Table-table th, .cxd-Table2 .cxd-Table-table td { text-align: left; } .cxd-Table2 .cxd-Table-table th.text-center, .cxd-Table2 .cxd-Table-table td.text-center, .cxd-Table2 .cxd-Table-table th[colspan], .cxd-Table2 .cxd-Table-table td[colspan] { text-align: center; } .cxd-Table2 .cxd-Table-table th.text-right, .cxd-Table2 .cxd-Table-table td.text-right { text-align: right; } .cxd-Table2 .cxd-Table-table > thead > tr > th { height: var(--table-body-line-height); vertical-align: middle; background: var(--Table-thead-bg); padding: var(--table-paddingTop) var(--table-paddingRight) var(--table-paddingBottom) var(--table-paddingLeft); font-size: var(--Table-thead-fontSize); color: var(--Table-thead-color); font-weight: var(--table-header-fontWeight); line-height: var(--table-header-lineHeight); white-space: nowrap; } .cxd-Table2 .cxd-Table-table > thead > tr > th:first-child { padding-left: var(--TableCell--edge-paddingX-default); } .cxd-Table2 .cxd-Table-table > thead > tr > th.cxd-Table-cell-last { padding-right: var(--TableCell--edge-paddingX-default); } .cxd-Table2 .cxd-Table-table > thead > tr > th:not(.cxd-Table-cell-last) { border-right: var(--Table-thead-borderWidth) solid var(--Table-thead-borderColor); } .cxd-Table2 .cxd-Table-table > thead > tr > th.cxd-Table-row-expand-icon-cell { border-right: 0; } .cxd-Table2 .cxd-Table-table > thead > tr > th .cxd-Remark { margin-left: var(--gap-xs); position: relative; top: 2px; } .cxd-Table2 .cxd-Table-table > thead > tr > th .cxd-Table-head-cell-wrapper { display: flex; align-items: center; } .cxd-Table2 .cxd-Table-table > thead > tr:not(:last-child) { border-bottom: var(--Table-borderWidth) solid var(--Table-borderColor); } .cxd-Table2 .cxd-Table-table > tbody > tr { position: relative; border-bottom: var(--Table-borderWidth) solid var(--Table-borderColor); background: var(--table-body-bg-color); } .cxd-Table2 .cxd-Table-table > tbody > tr.cxd-Table-summary-row > td { background: var(--Table-thead-bg); } .cxd-Table2 .cxd-Table-table > tbody > tr > th { background: var(--Table-thead-bg); color: var(--Table-thead-color); font-weight: var(--table-header-fontWeight); line-height: var(--table-header-lineHeight); white-space: nowrap; border-right: var(--Table-thead-borderWidth) solid var(--Table-thead-borderColor); } .cxd-Table2 .cxd-Table-table > tbody > tr > td, .cxd-Table2 .cxd-Table-table > tbody > tr > th { height: 2.5rem; vertical-align: middle; padding: var(--table-paddingTop) var(--table-paddingRight) var(--table-paddingBottom) var(--table-paddingLeft); } .cxd-Table2 .cxd-Table-table > tbody > tr > td:first-child, .cxd-Table2 .cxd-Table-table > tbody > tr > th:first-child { padding-left: var(--TableCell--edge-paddingX-default); } .cxd-Table2 .cxd-Table-table > tbody > tr > td:last-child, .cxd-Table2 .cxd-Table-table > tbody > tr > th:last-child { padding-right: var(--TableCell--edge-paddingX-default); } .cxd-Table2 .cxd-Table-table > tbody > tr > td .cxd-Form-static, .cxd-Table2 .cxd-Table-table > tbody > tr > th .cxd-Form-static { min-height: auto; } .cxd-Table2 .cxd-Table-table > tbody > tr .cxd-Table-cell-wrapper-prefix { display: flex; } .cxd-Table2 .cxd-Table-table > tbody > tr .cxd-Table-cell-wrapper-prefix .cxd-Table-expandBtn { margin-right: 5px; } .cxd-Table2 .cxd-Table-table > tbody > tr .cxd-Form-static { padding: 0; margin: 0; min-height: inherit; line-height: inherit; font-size: inherit; color: inherit; font-weight: inherit; } .cxd-Table2 .cxd-Table-table > tbody > tr .cxd-Table-cell-height-large { height: var(--TableCell-line-height-large); line-height: var(--TableCell-line-height-large); overflow: hidden; } .cxd-Table2 .cxd-Table-table > tbody > tr .cxd-Table-cell-height-middle { height: var(--TableCell-line-height-middle); line-height: var(--TableCell-line-height-middle); overflow: hidden; } .cxd-Table2 .cxd-Table-table > tbody > tr.cxd-Table-tr--odd { background: var(--Table-strip-bg); } .cxd-Table2 .cxd-Table-table > tbody > tr.cxd-Table-tr--hasItemAction:hover { cursor: pointer; } .cxd-Table2 .cxd-Table-table > tbody > tr:hover, .cxd-Table2 .cxd-Table-table > tbody > tr.is-hovered { background: var(--Table-onHover-bg); border-color: var(--Table-onHover-borderColor); color: var(--Table-onHover-color); } .cxd-Table2 .cxd-Table-table > tbody > tr:hover + tr, .cxd-Table2 .cxd-Table-table > tbody > tr.is-hovered + tr { border-color: var(--Table-onHover-borderColor); } .cxd-Table2 .cxd-Table-table > tbody > tr.is-checked { background: var(--Table-onChecked-bg); border-color: var(--Table-onChecked-borderColor); color: var(--Table-onChecked-color); } .cxd-Table2 .cxd-Table-table > tbody > tr.is-checked + tr { border-color: var(--Table-onChecked-borderColor); } .cxd-Table2 .cxd-Table-table > tbody > tr.is-moved, .cxd-Table2 .cxd-Table-table > tbody > tr.is-modified { background: var(--Table-onModified-bg); border-color: var(--Table-onModified-borderColor); color: var(--Table-onModified-color); } .cxd-Table2 .cxd-Table-table > tbody > tr.is-moved + tr, .cxd-Table2 .cxd-Table-table > tbody > tr.is-modified + tr { border-color: var(--Table-onModified-borderColor); } .cxd-Table2 .cxd-Table-table > tbody > tr.is-summary { background: var(--Table-thead-bg); color: var(--Table-thead-color); font-weight: var(--table-header-fontWeight); line-height: var(--table-header-lineHeight); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-light { background-color: #f8f9fa; color: #58666e; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-light.lt, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-light .lt { background: rgb(253.9725, 254.1, 254.2275); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-light.lter, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-light .lter { background: white; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-light.dk, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-light .dk { background: rgb(238.73375, 241.35, 243.96625); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-light.dker, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-light .dker { background: rgb(232.1875, 236.25, 240.3125); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-light.bg, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-light .bg { background-color: #f8f9fa; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-dark { background-color: #343a40; color: rgb(159.6724137931, 160, 160.3275862069); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-dark.lt, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-dark .lt { background: rgb(65.1997844828, 70.75, 76.3002155172); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-dark.lter, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-dark .lter { background: rgb(79.0370689655, 83.5, 87.9629310345); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-dark.dk, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-dark .dk { background: rgb(39.4377155172, 45.25, 51.0622844828); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-dark.dker, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-dark .dker { background: rgb(27.5129310345, 32.5, 37.4870689655); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-dark.bg, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-dark .bg { background-color: #343a40; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-dark a, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-dark .cxd-Button--link { color: rgb(185.2603448276, 185.5, 185.7396551724); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-dark a:hover, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-dark .cxd-Button--link:hover { color: #fff; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-dark .open > a, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-dark .open > a:hover, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-dark .open > a:focus { color: #fff; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-dark .text-muted { color: rgb(65.3333333333, 75.7272727273, 81.6666666667) !important; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-dark .text-lt { color: rgb(152.5, 165.5454545455, 173) !important; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-black { background-color: #000; color: #666666; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-black.lt, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-black .lt { background: rgb(12.75, 12.75, 12.75); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-black.lter, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-black .lter { background: rgb(25.5, 25.5, 25.5); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-black.dk, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-black .dk { background: black; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-black.dker, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-black .dker { background: black; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-black.bg, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-black .bg { background-color: #000; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-black a, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-black .cxd-Button--link { color: rgb(127.5, 127.5, 127.5); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-black a:hover, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-black .cxd-Button--link:hover { color: #fff; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-black .open > a, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-black .open > a:hover, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-black .open > a:focus { color: #fff; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-black .text-muted { color: rgb(65.3333333333, 75.7272727273, 81.6666666667) !important; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-black .text-lt { color: rgb(152.5, 165.5454545455, 173) !important; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-primary { background-color: #007bff; color: rgb(206.55, 228.69, 252.45); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-primary.lt, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-primary .lt { background: rgb(28.36875, 136.30125, 252.13125); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-primary.lter, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-primary .lter { background: rgb(56.1, 149.58, 249.9); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-primary.dk, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-primary .dk { background: rgb(0, 110.7, 229.5); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-primary.dker, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-primary .dker { background: rgb(0, 98.4, 204); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-primary.bg, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-primary .bg { background-color: #007bff; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-primary a, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-primary .cxd-Button--link { color: white; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-primary a:hover, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-primary .cxd-Button--link:hover { color: #fff; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-primary .open > a, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-primary .open > a:hover, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-primary .open > a:focus { color: #fff; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-primary .text-muted { color: rgb(65.3333333333, 75.7272727273, 81.6666666667) !important; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-primary .text-lt { color: rgb(152.5, 165.5454545455, 173) !important; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-success { background-color: #28a745; color: rgb(180.0804347826, 230.9195652174, 191.6893700787); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-success.lt, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-success .lt { background: rgb(47.8337862319, 184.6662137681, 79.0789862205); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-success.lter, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-success .lter { background: rgb(57.9956521739, 200.0043478261, 90.4228346457); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-success.dk, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-success .dk { background: rgb(32.8037137681, 148.6962862319, 59.2673720472); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-success.dker, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-success .dker { background: rgb(26.2449275362, 129.7550724638, 49.8811023622); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-success.bg, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-success .bg { background-color: #28a745; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-success a, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-success .cxd-Button--link { color: rgb(218.6753623188, 243.3246376812, 224.3039370079); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-success a:hover, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-success .cxd-Button--link:hover { color: #fff; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-success .open > a, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-success .open > a:hover, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-success .open > a:focus { color: #fff; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-success .text-muted { color: rgb(65.3333333333, 75.7272727273, 81.6666666667) !important; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-success .text-lt { color: rgb(152.5, 165.5454545455, 173) !important; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-info { background-color: #007bff; color: rgb(206.55, 228.69, 252.45); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-info.lt, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-info .lt { background: rgb(28.36875, 136.30125, 252.13125); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-info.lter, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-info .lter { background: rgb(56.1, 149.58, 249.9); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-info.dk, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-info .dk { background: rgb(0, 110.7, 229.5); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-info.dker, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-info .dker { background: rgb(0, 98.4, 204); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-info.bg, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-info .bg { background-color: #007bff; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-info a, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-info .cxd-Button--link { color: white; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-info a:hover, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-info .cxd-Button--link:hover { color: #fff; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-info .open > a, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-info .open > a:hover, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-info .open > a:focus { color: #fff; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-info .text-muted { color: rgb(65.3333333333, 75.7272727273, 81.6666666667) !important; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-info .text-lt { color: rgb(152.5, 165.5454545455, 173) !important; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-warning { background-color: #fad733; color: rgb(254.6303827751, 253.8810018994, 250.3696172249); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-warning.lt, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-warning .lt { background: rgb(248.3162978469, 218.3934795088, 78.1837021531); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-warning.lter, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-warning .lter { background: rgb(247.2700956938, 222.2002127864, 104.7299043062); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-warning.dk, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-warning .dk { background: rgb(252.3212021531, 212.0197742601, 23.1787978469); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-warning.dker, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-warning .dker { background: rgb(250, 206.0301507538, 0); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-warning.bg, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-warning .bg { background-color: #fad733; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-warning a, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-warning .cxd-Button--link { color: white; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-warning a:hover, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-warning .cxd-Button--link:hover { color: #fff; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-warning .open > a, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-warning .open > a:hover, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-warning .open > a:focus { color: #fff; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-warning .text-muted { color: rgb(65.3333333333, 75.7272727273, 81.6666666667) !important; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-warning .text-lt { color: rgb(152.5, 165.5454545455, 173) !important; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-danger { background-color: #dc3545; color: rgb(248.4765822785, 228.5234177215, 230.4350981581); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-danger.lt, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-danger .lt { background: rgb(221.1220727848, 77.3779272152, 91.1498214015); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-danger.lter, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-danger .lter { background: rgb(222.8816455696, 101.1183544304, 112.7842984916); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-danger.dk, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-danger .dk { background: rgb(214.0431170886, 33.4568829114, 50.7585580421); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-danger.dker, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-danger .dker { background: rgb(194.7651898734, 27.2348101266, 43.2856249526); } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-danger.bg, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-danger .bg { background-color: #dc3545; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-danger a, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-danger .cxd-Button--link { color: white; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-danger a:hover, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-danger .cxd-Button--link:hover { color: #fff; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-danger .open > a, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-danger .open > a:hover, .cxd-Table2 .cxd-Table-table > tbody > tr.bg-danger .open > a:focus { color: #fff; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-danger .text-muted { color: rgb(65.3333333333, 75.7272727273, 81.6666666667) !important; } .cxd-Table2 .cxd-Table-table > tbody > tr.bg-danger .text-lt { color: rgb(152.5, 165.5454545455, 173) !important; } .cxd-Table2 .cxd-Table-table > tbody > tr.is-dragging { opacity: var(--Table-onDragging-opacity); background-color: var(--Table-onDragging-bg); } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--2th.is-expanded .cxd-Table-expandCell:before { right: -0.6875rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--2th .cxd-Table-expandBtn { position: relative; right: -1.125rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--2th .cxd-Table-expandCell + td { position: relative; padding-left: 1.125rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--2th .cxd-Table-expandCell + td::before { content: ""; position: absolute; width: 0.0625rem; top: 0; bottom: 0; left: -0.5rem; height: auto; background: var(--Table-tree-borderColor); } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--2th .cxd-Table-expandCell + td::after { content: ""; position: absolute; height: 0.0625rem; top: 50%; left: -0.5rem; width: 0.625rem; background: var(--Table-tree-borderColor); } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--2th.is-expandable .cxd-Table-expandCell + td { padding-left: 1.125rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--2th.is-last:not(.is-expanded) .cxd-Table-expandCell + td::before { height: 50%; bottom: auto; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--3th.is-expanded .cxd-Table-expandCell:before { right: -1.8125rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--3th .cxd-Table-expandBtn { position: relative; right: -2.25rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--3th .cxd-Table-expandCell + td { position: relative; padding-left: 2.25rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--3th .cxd-Table-expandCell + td::before { content: ""; position: absolute; width: 0.0625rem; top: 0; bottom: 0; left: 0.625rem; height: auto; background: var(--Table-tree-borderColor); } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--3th .cxd-Table-expandCell + td::after { content: ""; position: absolute; height: 0.0625rem; top: 50%; left: 0.625rem; width: 0.625rem; background: var(--Table-tree-borderColor); } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--3th.is-expandable .cxd-Table-expandCell + td { padding-left: 2.25rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--3th.is-last:not(.is-expanded) .cxd-Table-expandCell + td::before { height: 50%; bottom: auto; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--4th.is-expanded .cxd-Table-expandCell:before { right: -2.9375rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--4th .cxd-Table-expandBtn { position: relative; right: -3.375rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--4th .cxd-Table-expandCell + td { position: relative; padding-left: 3.375rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--4th .cxd-Table-expandCell + td::before { content: ""; position: absolute; width: 0.0625rem; top: 0; bottom: 0; left: 1.75rem; height: auto; background: var(--Table-tree-borderColor); } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--4th .cxd-Table-expandCell + td::after { content: ""; position: absolute; height: 0.0625rem; top: 50%; left: 1.75rem; width: 0.625rem; background: var(--Table-tree-borderColor); } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--4th.is-expandable .cxd-Table-expandCell + td { padding-left: 3.375rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--4th.is-last:not(.is-expanded) .cxd-Table-expandCell + td::before { height: 50%; bottom: auto; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--5th.is-expanded .cxd-Table-expandCell:before { right: -4.0625rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--5th .cxd-Table-expandBtn { position: relative; right: -4.5rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--5th .cxd-Table-expandCell + td { position: relative; padding-left: 4.5rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--5th .cxd-Table-expandCell + td::before { content: ""; position: absolute; width: 0.0625rem; top: 0; bottom: 0; left: 2.875rem; height: auto; background: var(--Table-tree-borderColor); } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--5th .cxd-Table-expandCell + td::after { content: ""; position: absolute; height: 0.0625rem; top: 50%; left: 2.875rem; width: 0.625rem; background: var(--Table-tree-borderColor); } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--5th.is-expandable .cxd-Table-expandCell + td { padding-left: 4.5rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--5th.is-last:not(.is-expanded) .cxd-Table-expandCell + td::before { height: 50%; bottom: auto; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--6th.is-expanded .cxd-Table-expandCell:before { right: -5.1875rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--6th .cxd-Table-expandBtn { position: relative; right: -5.625rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--6th .cxd-Table-expandCell + td { position: relative; padding-left: 5.625rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--6th .cxd-Table-expandCell + td::before { content: ""; position: absolute; width: 0.0625rem; top: 0; bottom: 0; left: 4rem; height: auto; background: var(--Table-tree-borderColor); } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--6th .cxd-Table-expandCell + td::after { content: ""; position: absolute; height: 0.0625rem; top: 50%; left: 4rem; width: 0.625rem; background: var(--Table-tree-borderColor); } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--6th.is-expandable .cxd-Table-expandCell + td { padding-left: 5.625rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--6th.is-last:not(.is-expanded) .cxd-Table-expandCell + td::before { height: 50%; bottom: auto; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--7th.is-expanded .cxd-Table-expandCell:before { right: -6.3125rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--7th .cxd-Table-expandBtn { position: relative; right: -6.75rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--7th .cxd-Table-expandCell + td { position: relative; padding-left: 6.75rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--7th .cxd-Table-expandCell + td::before { content: ""; position: absolute; width: 0.0625rem; top: 0; bottom: 0; left: 5.125rem; height: auto; background: var(--Table-tree-borderColor); } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--7th .cxd-Table-expandCell + td::after { content: ""; position: absolute; height: 0.0625rem; top: 50%; left: 5.125rem; width: 0.625rem; background: var(--Table-tree-borderColor); } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--7th.is-expandable .cxd-Table-expandCell + td { padding-left: 6.75rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--7th.is-last:not(.is-expanded) .cxd-Table-expandCell + td::before { height: 50%; bottom: auto; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--8th.is-expanded .cxd-Table-expandCell:before { right: -7.4375rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--8th .cxd-Table-expandBtn { position: relative; right: -7.875rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--8th .cxd-Table-expandCell + td { position: relative; padding-left: 7.875rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--8th .cxd-Table-expandCell + td::before { content: ""; position: absolute; width: 0.0625rem; top: 0; bottom: 0; left: 6.25rem; height: auto; background: var(--Table-tree-borderColor); } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--8th .cxd-Table-expandCell + td::after { content: ""; position: absolute; height: 0.0625rem; top: 50%; left: 6.25rem; width: 0.625rem; background: var(--Table-tree-borderColor); } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--8th.is-expandable .cxd-Table-expandCell + td { padding-left: 7.875rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--8th.is-last:not(.is-expanded) .cxd-Table-expandCell + td::before { height: 50%; bottom: auto; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--9th.is-expanded .cxd-Table-expandCell:before { right: -8.5625rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--9th .cxd-Table-expandBtn { position: relative; right: -9rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--9th .cxd-Table-expandCell + td { position: relative; padding-left: 9rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--9th .cxd-Table-expandCell + td::before { content: ""; position: absolute; width: 0.0625rem; top: 0; bottom: 0; left: 7.375rem; height: auto; background: var(--Table-tree-borderColor); } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--9th .cxd-Table-expandCell + td::after { content: ""; position: absolute; height: 0.0625rem; top: 50%; left: 7.375rem; width: 0.625rem; background: var(--Table-tree-borderColor); } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--9th.is-expandable .cxd-Table-expandCell + td { padding-left: 9rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--9th.is-last:not(.is-expanded) .cxd-Table-expandCell + td::before { height: 50%; bottom: auto; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--10th.is-expanded .cxd-Table-expandCell:before { right: -9.6875rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--10th .cxd-Table-expandBtn { position: relative; right: -10.125rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--10th .cxd-Table-expandCell + td { position: relative; padding-left: 10.125rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--10th .cxd-Table-expandCell + td::before { content: ""; position: absolute; width: 0.0625rem; top: 0; bottom: 0; left: 8.5rem; height: auto; background: var(--Table-tree-borderColor); } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--10th .cxd-Table-expandCell + td::after { content: ""; position: absolute; height: 0.0625rem; top: 50%; left: 8.5rem; width: 0.625rem; background: var(--Table-tree-borderColor); } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--10th.is-expandable .cxd-Table-expandCell + td { padding-left: 10.125rem; } .cxd-Table2 .cxd-Table-table tr.cxd-Table-tr--10th.is-last:not(.is-expanded) .cxd-Table-expandCell + td::before { height: 50%; bottom: auto; } .cxd-Table2 .cxd-Table-table > thead > tr > th.cxd-Table-checkCell, .cxd-Table2 .cxd-Table-table > tbody > tr > td.cxd-Table-checkCell { border-right: 0; white-space: nowrap; } .cxd-Table2 .cxd-Table-table > thead > tr > th.cxd-Table-checkCell .cxd-Checkbox, .cxd-Table2 .cxd-Table-table > tbody > tr > td.cxd-Table-checkCell .cxd-Checkbox { margin: 0; } .cxd-Table2 .cxd-Table-table > thead > tr > th.cxd-Table-expandCell, .cxd-Table2 .cxd-Table-table > tbody > tr > td.cxd-Table-expandCell { border-right: 0; width: 0.0625rem; padding-right: 0; } .cxd-Table2 .cxd-Table-table > thead > tr > th.cxd-Table-dragCell, .cxd-Table2 .cxd-Table-table > tbody > tr > td.cxd-Table-dragCell { border-right: 0; width: 0.0625rem; padding-right: 0; cursor: move; } .cxd-Table2 .cxd-Table-table > thead > tr > th.cxd-Table-dragCell > svg, .cxd-Table2 .cxd-Table-table > tbody > tr > td.cxd-Table-dragCell > svg { vertical-align: middle; } .cxd-Table2 .cxd-Table-table > tbody > tr > td.cxd-Table-expandCell { position: relative; } .cxd-Table2 .cxd-Table-table > tbody > tr > td.cxd-Table-expandCell .cxd-Table-divider-1 { position: absolute; width: 0.0625rem; top: 0; bottom: 0; height: 100%; background: var(--Table-tree-borderColor); right: 0.4375rem; } .cxd-Table2 .cxd-Table-table > tbody > tr > td.cxd-Table-expandCell .cxd-Table-divider-2 { position: absolute; width: 0.0625rem; top: 0; bottom: 0; height: 100%; background: var(--Table-tree-borderColor); right: -0.6875rem; } .cxd-Table2 .cxd-Table-table > tbody > tr > td.cxd-Table-expandCell .cxd-Table-divider-3 { position: absolute; width: 0.0625rem; top: 0; bottom: 0; height: 100%; background: var(--Table-tree-borderColor); right: -1.8125rem; } .cxd-Table2 .cxd-Table-table > tbody > tr > td.cxd-Table-expandCell .cxd-Table-divider-4 { position: absolute; width: 0.0625rem; top: 0; bottom: 0; height: 100%; background: var(--Table-tree-borderColor); right: -2.9375rem; } .cxd-Table2 .cxd-Table-table > tbody > tr > td.cxd-Table-expandCell .cxd-Table-divider-5 { position: absolute; width: 0.0625rem; top: 0; bottom: 0; height: 100%; background: var(--Table-tree-borderColor); right: -4.0625rem; } .cxd-Table2 .cxd-Table-table > tbody > tr > td.cxd-Table-expandCell .cxd-Table-divider-6 { position: absolute; width: 0.0625rem; top: 0; bottom: 0; height: 100%; background: var(--Table-tree-borderColor); right: -5.1875rem; } .cxd-Table2 .cxd-Table-table > tbody > tr > td.cxd-Table-expandCell .cxd-Table-divider-7 { position: absolute; width: 0.0625rem; top: 0; bottom: 0; height: 100%; background: var(--Table-tree-borderColor); right: -6.3125rem; } .cxd-Table2 .cxd-Table-table > tbody > tr.is-expanded > td.cxd-Table-expandCell::before { content: ""; position: absolute; width: 0.0625rem; top: 50%; bottom: 0; right: 0.4375rem; height: auto; background: var(--Table-tree-borderColor); } .cxd-Table2 .cxd-Table-table > thead > tr > th.cxd-TableCell--sortable { padding-right: calc(var(--TableCell-paddingX) + var(--TableCell-sortBtn-width)); position: relative; } .cxd-Table2 .cxd-Table-table > thead > tr > th.cxd-TableCell--searchable { padding-right: calc(var(--TableCell-paddingX) + var(--TableCell-searchBtn-width)); position: relative; } .cxd-Table2 .cxd-Table-table > thead > tr > th.cxd-TableCell--filterable { padding-right: calc(var(--TableCell-paddingX) + var(--TableCell-filterBtn-width)); position: relative; } .cxd-Table2 .cxd-Table-table > tbody > tr.cxd-Table-row-disabled { background: var(--TableRow-onDisabled-bg); color: var(--TableRow-onDisabled-color); } .cxd-Table2 .cxd-Table-table > tbody > tr > td.cxd-Table-cell-fix-left, .cxd-Table2 .cxd-Table-table > tbody > tr > td.cxd-Table-cell-fix-right { background: inherit; } .cxd-Table2 .cxd-Table-table > thead > tr > th.cxd-Table-cell-fix-left-last:after, .cxd-Table2 .cxd-Table-table > tbody > tr > td.cxd-Table-cell-fix-left-last:after, .cxd-Table2 .cxd-Table-table > tfoot > tr > td.cxd-Table-cell-fix-left-last:after { position: absolute; top: 0; right: 0; bottom: -1px; width: 30px; transform: translate(100%); transition: box-shadow 0.3s; content: ""; pointer-events: none; } .cxd-Table2 .cxd-Table-table > thead > tr > th.cxd-Table-cell-fix-right-first:after, .cxd-Table2 .cxd-Table-table > tbody > tr > td.cxd-Table-cell-fix-right-first:after, .cxd-Table2 .cxd-Table-table > tfoot > tr > td.cxd-Table-cell-fix-right-first:after { position: absolute; top: 0; bottom: -1px; left: 0; width: 30px; transform: translate(-100%); transition: box-shadow 0.3s; content: ""; pointer-events: none; } .cxd-Table2 .cxd-Table-table > tbody > tr > td.cxd-Table-cell-expand-icon-cell { text-align: center; } .cxd-Table2 .cxd-Table-table > tbody > tr > td.cxd-Table-cell-expand-icon-cell .cxd-Table-row-indent { height: 1px; } .cxd-Table2 .cxd-Table-table > tbody > tr.cxd-Table-expanded-row > td { background: var(--Table-onHover-bg); } .cxd-Table2 .cxd-Table-table > tfoot > tr { border-bottom: var(--Table-borderWidth) solid var(--Table-borderColor); } .cxd-Table2 .cxd-Table-table > tfoot > tr > td { padding: var(--table-paddingTop) var(--table-paddingRight) var(--table-paddingBottom) var(--table-paddingLeft); background: var(--Table-thead-bg); } .cxd-Table2 .cxd-Table-container .cxd-Table-header { padding: 0; } .cxd-Table2.cxd-Table-ping-left .cxd-Table-table > thead > tr > th.cxd-Table-cell-fix-left-last:after, .cxd-Table2.cxd-Table-ping-left .cxd-Table-table > tbody > tr > td.cxd-Table-cell-fix-left-last:after, .cxd-Table2.cxd-Table-ping-left .cxd-Table-table > tfoot > tr > td.cxd-Table-cell-fix-left-last:after { box-shadow: var(--Table-fixedLeftLast-boxShadow); } .cxd-Table2.cxd-Table-ping-left .cxd-Table-table > tbody > tr:not(.cxd-Table-row-disabled) > td.cxd-Table-cell-fix-left { border-right: none; } .cxd-Table2.cxd-Table-ping-left .cxd-Table-table > tfoot > tr > td:not(:last-child).cxd-Table-cell-fix-left-last { border-right: none; } .cxd-Table2.cxd-Table-ping-left .cxd-Table-table > thead > tr > th:not(:last-child).cxd-Table-cell-fix-left-last { border-right: none; } .cxd-Table2.cxd-Table-ping-right .cxd-Table-table > thead > tr > th.cxd-Table-cell-fix-right-first:after, .cxd-Table2.cxd-Table-ping-right .cxd-Table-table > tbody > tr > td.cxd-Table-cell-fix-right-first:after, .cxd-Table2.cxd-Table-ping-right .cxd-Table-table > tfoot > tr > td.cxd-Table-cell-fix-right-first:after { box-shadow: var(--Table-fixedRightFirst-boxShadow); } .cxd-Table2.cxd-Table-ping-right .cxd-Table-table > tbody > tr:not(.cxd-Table-row-disabled) > td.cxd-Table-cell-fix-right { border-right: none; } .cxd-Table2.cxd-Table-ping-right:not(.cxd-Table-bordered) .cxd-Table-table > thead > tr > th.cxd-Table-cell-fix-right-first-prev { border-right: none; } .cxd-Table2.cxd-Table-ping-right:not(.cxd-Table-bordered) .cxd-Table-table > thead > tr > th:not(:last-child).cxd-Table-cell-fix-right-first { border-right: none; } .cxd-Table2.cxd-Table-resizable .cxd-Table-table > thead > tr > th { position: relative; } .cxd-Table2.cxd-Table-resizable .cxd-Table-table > thead > tr > th .cxd-Table-thead-resizable { position: absolute; width: 7px; right: -4px; top: 0; bottom: 0; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: col-resize; z-index: 15; opacity: 0.5; } .cxd-Table2.cxd-Table-resizable .cxd-Table-table > thead > tr > th .cxd-Table-thead-resizable--disabled { cursor: not-allowed; } .cxd-Table2.cxd-Table-resizable .cxd-Table-table > thead > tr > th .cxd-Table-thead-resizable:hover, .cxd-Table2.cxd-Table-resizable .cxd-Table-table > thead > tr > th .cxd-Table-thead-resizable.is-resizing { background: var(--primary); } .cxd-Table2.cxd-Table-resizable .cxd-Table-table > thead > tr > th:last-child .cxd-Table-thead-resizable { width: 4px; right: 0; } .cxd-Table2 .cxd-Table-loading { padding: var(--Table-loading-padding); } .cxd-Table2 .cxd-TableCell-sortBtn { cursor: pointer; width: var(--TableCell-sortBtn-width); height: 14px; vertical-align: middle; position: static; display: inline-block; transform: none; color: var(--icon-color); margin-left: var(--TableCell-icon-gap); } .cxd-Table2 .cxd-TableCell-sortBtn:hover { color: var(--icon-onHover-color); } .cxd-Table2 .cxd-TableCell-sortBtn--up svg, .cxd-Table2 .cxd-TableCell-sortBtn--down svg, .cxd-Table2 .cxd-TableCell-sortBtn--default svg { color: inherit; width: 13px; height: 13px; } .cxd-Table2 .cxd-TableCell-sortBtn--up, .cxd-Table2 .cxd-TableCell-sortBtn--down, .cxd-Table2 .cxd-TableCell-sortBtn--default { display: none; z-index: 2; font-style: normal; } .cxd-Table2 .cxd-TableCell-sortBtn--up.is-active, .cxd-Table2 .cxd-TableCell-sortBtn--down.is-active, .cxd-Table2 .cxd-TableCell-sortBtn--default.is-active { display: inline-block; } .cxd-Table2 .cxd-TableCell-sortBtn--default.is-active { color: var(--table-icon-color); } .cxd-Table2 .cxd-TableCell-sortBtn--default.is-active:hover { color: var(--table-icon-hover-color); } .cxd-Table2 .cxd-TableCell-sortBtn--up.is-active, .cxd-Table2 .cxd-TableCell-sortBtn--down.is-active { color: var(--TableCell-sortBtn--onActive-color); } .cxd-Table2 .cxd-TableCell-searchBtn { cursor: pointer; color: var(--table-icon-color); margin-left: var(--TableCell-icon-gap); height: 18px; } .cxd-Table2 .cxd-TableCell-searchBtn svg { width: 12px; height: 12px; } .cxd-Table2 .cxd-TableCell-searchBtn:hover { color: var(--table-icon-hover-color); } .cxd-Table2 .cxd-TableCell-searchBtn.is-active { color: var(--TableCell-searchBtn--onActive-color); } .cxd-Table2 .cxd-TableCell-searchPopOver { border: none; min-width: 20rem; max-width: 40rem; } .cxd-Table2 .cxd-TableCell-searchPopOver .cxd-Panel { margin: 0; } .cxd-Table2 .cxd-TableCell-filterBtn { cursor: pointer; width: var(--TableCell-filterBtn-width); height: 14px; vertical-align: middle; position: static; display: inline-block; transform: none; color: var(--table-icon-color); margin-left: var(--TableCell-icon-gap); } .cxd-Table2 .cxd-TableCell-filterBtn svg { width: 13px; height: 13px; } .cxd-Table2 .cxd-TableCell-filterBtn:hover { color: var(--table-icon-hover-color); } .cxd-Table2 .cxd-TableCell-filterBtn.is-active { color: var(--TableCell-filterBtn--onActive-color); } .cxd-Table2 .cxd-TableCell-filterBtn .cxd-Remark { display: inline; } .cxd-Table2 .cxd-TableCell-filterPopOver { border: none; width: 10rem; } .cxd-Table2 .cxd-TableCell-filterPopOver .cxd-DropDown-menu { margin: 0; padding: 0; } .cxd-Table2 .cxd-TableCell-filterPopOver .cxd-DropDown-menu .cxd-DropDown-divider { height: var(--TableCell-filterPopOver-dropDownItem-height); line-height: var(--TableCell-filterPopOver-dropDownItem-height); padding: var(--TableCell-filterPopOver-dropDownItem-padding); background: var(--white); margin: 0; } .cxd-Table2 .cxd-TableCell-filterPopOver .cxd-DropDown-menu .cxd-DropDown-divider:hover { background: var(--light); color: var(--primary); } .cxd-Table2 .cxd-TableCell-filterPopOver .cxd-DropDown-menu .cxd-DropDown-divider.is-selected { background: var(--light); color: var(--primary); } .cxd-Table2 .cxd-TableCell-filterPopOver .cxd-DropDown-menu .cxd-DropDown-divider .cxd-Checkbox { width: 100%; margin: 0; } .cxd-Table2 .cxd-TableCell-filterPopOver .cxd-DropDown-multiple-menu { text-align: center; border-top: 1px solid var(--Table-borderColor); } .cxd-Table2 .cxd-TableCell-filterPopOver .cxd-DropDown-multiple-menu .cxd-Button { margin: 0 5px; padding: 0 10px; } .cxd-Table2 .cxd-TableCell-filterPopOver .cxd-DropDown-multiple-menu:hover { background: none; } .cxd-Table2 .cxd-TableCell-selectionBtn { cursor: pointer; margin-left: 4px; } .cxd-Table2 .cxd-TableCell-selectionBtn svg.icon { transform: rotate(270deg); font-size: 12px; } .cxd-Table2 .cxd-TableCell-selectionPopOver .cxd-DropDown-menu { margin: 0; padding: 0; } .cxd-Table2.cxd-Table-expandBtn { position: relative; z-index: 1; color: var(--Table-expandBtn-color); display: inline-flex; justify-content: center; align-items: center; width: 0.875rem; line-height: 1; height: 16px; } .cxd-Table2.cxd-Table-expandBtn > svg { display: inline-block; text-align: center; cursor: pointer; transition: transform ease-in-out var(--animation-duration), top ease-in-out var(--animation-duration); position: relative; transform-origin: 50% 50%; width: 0.625rem; height: 0.625rem; top: 0; } .cxd-Table2.cxd-Table-expandBtn.is-active > svg { transform: rotate(90deg); } .cxd-Table2.cxd-Table-expandBtn:hover { text-decoration: none; } .cxd-Table2 .cxd-Table-table > tbody > tr:hover .cxd-Table-dragBtn, .cxd-Table2 .cxd-Table-table > tbody > tr.is-dragging .cxd-Table-dragBtn, .cxd-Table2 .cxd-Table-table > tbody > tr.is-drop-allowed .cxd-Table-dragBtn { visibility: visible; } .cxd-Table2 .fake-hide { visibility: hidden; position: absolute; } .cxd-Table2 .cxd-Table-badge { position: absolute; top: 0; left: 0; } .cxd-Table2 .table-sort-default { content: var(--table-sort-icon); } .cxd-Table2 .table-sort-up { content: var(--table-sort-up-icon); } .cxd-Table2 .table-sort-down { content: var(--table-sort-down-icon); } .cxd-Table2 .table-filter-icon { content: var(--table-filter-icon); } .cxd-Table2 .table-search-icon { content: var(--table-search-icon); } .cxd-InputTable-toolbar { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .cxd-InputTable-pager { margin-left: auto; } .cxd-OperationField { margin: -0.1875rem; } .cxd-OperationField > .cxd-Button, .cxd-OperationField > .cxd-Button--disabled-wrap > .cxd-Button { margin: 0.1875rem; } .cxd-OperationField > .cxd-Button--disabled-wrap > .cxd-Button--link { padding: 0; } .cxd-OperationField > .cxd-Button--link { padding: 0; margin-right: 0.625rem; } .cxd-ColumnToggler { position: relative; display: inline-block; } .cxd-ColumnToggler-caret { margin-left: var(--DropDown-caret-marginLeft); display: inline-block; vertical-align: top; } .cxd-ColumnToggler-caret > svg { width: 0.625rem; height: 0.625rem; transition: transform var(--animation-duration) ease; transform: rotate(90deg); } .cxd-ColumnToggler.is-opened .cxd-ColumnToggler-caret svg { transform: rotate(270deg); } .cxd-ColumnToggler.is-actived > .cxd-Button { color: var(--link-color); } .cxd-ColumnToggler--block { display: block; } .cxd-ColumnToggler--block .cxd-Button { display: block; } .cxd-ColumnToggler-menu { position: absolute; z-index: 1000; top: 100%; left: 0; margin: 0.0625rem 0 0; background: var(--DropDown-menu-bg); list-style: none; padding: var(--DropDown-menu-paddingY) var(--DropDown-menu-paddingX); border: var(--DropDown-menu-borderWidth) solid var(--DropDown-menu-borderColor); border-radius: var(--DropDown-menu-borderRadius); box-shadow: var(--DropDown-menu-boxShadow); min-width: var(--DropDown-menu-minWidth); text-align: left; } .cxd-ColumnToggler--alignRight .cxd-ColumnToggler-menu { left: auto; right: 0; } .cxd-ColumnToggler-menuItem, .cxd-ColumnToggler-menu > li { padding: var(--table-togglable-paddingTop) var(--table-togglable-paddingRight) var(--table-togglable-paddingBottom) var(--table-togglable-paddingLeft); white-space: nowrap; box-sizing: border-box; height: var(--DropDown-menu-height); vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; user-select: none; color: var(--link-color); -webkit-text-decoration: var(--link-decoration); text-decoration: var(--link-decoration); background: var(--table-togglable-bg-color); } .cxd-ColumnToggler-menuItem.is-active, .cxd-ColumnToggler-menu > li.is-active { color: var(--DropDown-menuItem-onActive-color); } .cxd-ColumnToggler-menuItem:not(.is-disabled), .cxd-ColumnToggler-menuItem:not(.disabled), .cxd-ColumnToggler-menu > li:not(.is-disabled), .cxd-ColumnToggler-menu > li:not(.disabled) { cursor: pointer; } .cxd-ColumnToggler-menuItem.is-disabled, .cxd-ColumnToggler-menu > li.is-disabled { cursor: not-allowed; color: var(--DropDown-menuItem-onDisabled-color); filter: grayscale(80%); } .cxd-ColumnToggler-menuItem.cxd-DropDown-divider, .cxd-ColumnToggler-menu > li.cxd-DropDown-divider { height: 0.0625rem; margin: 0.5625rem 0; overflow: hidden; background: var(--DropDown-menu-borderColor); padding: 0; } .cxd-ColumnToggler-menu:not(.is-mobile) > li:hover { background: var(--table-togglable-hover-bg-color); color: var(--DropDown-menuItem-onHover-color); } .cxd-ColumnToggler-menu > li a { color: inherit; display: block; text-decoration: none; } .cxd-ColumnToggler-popover { border: none; box-shadow: none; } .cxd-ColumnToggler > .cxd-Button { min-width: unset; } .cxd-ColumnToggler-modal { display: flex; flex-flow: column nowrap; justify-content: space-between; align-items: center; width: 25rem; padding: var(--ColumnToggler-lineHeight); margin-top: calc(50vh - 100px); border-radius: var(--ColumnToggler-borderRadius); background: var(--ColumnToggler-backgroundColor); box-shadow: 0 4px 5px 0 rgba(21, 26, 38, 0.06), 0 1px 10px 0 rgba(21, 26, 38, 0.05), 0 2px 4px -1px rgba(21, 26, 38, 0.04); } .cxd-ColumnToggler-modal-header { width: 100%; padding: 0 1.5rem; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; } .cxd-ColumnToggler-modal-header a, .cxd-ColumnToggler-modal-header span { display: inline-block; } .cxd-ColumnToggler-modal-header .cxd-ColumnToggler-modal-title { opacity: 0.95; font-size: var(--fontSizeMd); color: var(--ColumnToggler-title-fontColor); line-height: var(--ColumnToggler-lineHeight); font-weight: bold; } .cxd-ColumnToggler-modal-content { padding: 0 1.5rem; width: 100%; list-style: none; margin: 0.5rem 0; } .cxd-ColumnToggler-modal-content .cxd-ColumnToggler-menuItem { color: var(--ColumnToggler-title-fontColor); background: var(--ColumnToggler-item-backgroundColor); border-radius: 0.125rem; font-size: var(--fontSizeSm); padding: var(--ColumnToggler-item-paddingY) var(--ColumnToggler-item-paddingX); height: var(--ColumnToggler-lineHeight); width: calc((100% - var(--ColumnToggler-item-margin) * 6) / 3); margin: var(--ColumnToggler-item-margin); float: left; } .cxd-ColumnToggler-modal-content .cxd-ColumnToggler-menuItem:hover { background: var(--ColumnToggler-item-backgroundColor-onHover); } .cxd-ColumnToggler-modal-content .cxd-ColumnToggler-menuItem--dragging { border: 1px solid var(--link-color); } .cxd-ColumnToggler-modal-content .cxd-ColumnToggler-menuItem-label { display: inline-block; width: calc(100% - var(--Checkbox--sm-size)); } .cxd-ColumnToggler-modal-content .cxd-ColumnToggler-menuItem-label > span { display: inline-block; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-ColumnToggler-modal-content .cxd-ColumnToggler-menuItem label > i { height: var(--fontSizeLg); width: var(--fontSizeLg); vertical-align: top; } .cxd-ColumnToggler-modal-content .cxd-ColumnToggler-menuItem-dragBar { display: inline-block; margin-left: 0; margin-right: var(--gap-xs); vertical-align: super; color: var(--ColumnToggler-item-dragBar-color); cursor: move; } .cxd-ColumnToggler-modal-footer { width: 100%; padding: 0 1.5rem; display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; } .cxd-ColumnToggler-modal-footer .cxd-ColumnToggler-modeSelect { color: var(--ColumnToggler-fontColor); font-size: var(--fontSizeSm); } .cxd-ColumnToggler-modal-footer .cxd-ColumnToggler-modeSelect.is-actived { color: var(--link-color); } .cxd-ColumnToggler-modal-footer > div { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; } .cxd-ColumnToggler-modal-footer > div:first-child { justify-content: flex-start; } .cxd-ColumnToggler-modal-footer > div:first-child a { display: inline-block; } .cxd-ColumnToggler-modal-footer > div:first-child button:not(:last-child) { margin-right: var(--gap-sm); } .cxd-ColumnToggler-modal-footer > div:last-child { justify-content: flex-end; } .cxd-ColumnToggler-tooltip { border: none; } .cxd-ColumnToggler-tooltip .cxd-Tooltip-arrow::before { border-top-color: transparent; } .cxd-List { position: relative; scroll-margin-top: var(--affix-offset-top); } .cxd-List-items { border-radius: var(--List-borderRadius); border: var(--List-borderWidth) solid var(--List-borderColor); background: var(--List-bg); margin-bottom: var(--gap-sm); } .cxd-List-toolbar { display: flex; flex-wrap: wrap; padding: var(--List-toolbar-marginY) var(--List-toolbar-marginX) var(--List-toolbar-marginY); } .cxd-List-toolbar::before, .cxd-List-toolbar::after { display: table; content: ""; } .cxd-List-toolbar::after { clear: both; } .cxd-List-actions { display: inline-block; } .cxd-List-actions > * { margin-right: var(--Crud-toolbar-gap); } .cxd-List-header { padding: var(--List-toolbar-marginY) var(--List-toolbar-marginX); } .cxd-List-header > * + .cxd-Button, .cxd-List-header > * + .cxd-ButtonGroup, .cxd-List-header > * + .cxd-ButtonToolbar { margin-left: var(--Crud-toolbar-gap); } .cxd-List-header + .cxd-List-toolbar { padding-top: 0; } .cxd-List-heading { padding: var(--gap-xs) 0; } .cxd-List-fixedTop { position: sticky; background: var(--white); z-index: 900; top: var(--affix-offset-top); } .cxd-List-fixedTop .cxd-Cards-toolbar { margin-bottom: 0; } .cxd-List-fixedTop:empty { display: none; } .cxd-List--unsaved .cxd-List-heading { background: var(--List--unsaved-heading-bg); color: var(--List--unsaved-heading-color); padding: var(--gap-xs) var(--gap-sm); margin-bottom: var(--gap-sm); } .cxd-List-dragTip { width: 100%; color: var(--info); clear: both; margin-top: var(--gap-xs); } .cxd-List-placeholder { color: var(--text--muted-color); text-align: center; min-height: var(--List-placeholder-height); line-height: var(--List-placeholder-height); } .cxd-List-footToolbar--affix, .cxd-List-footer--affix { position: sticky; bottom: var(--affix-offset-bottom); background: var(--Table-bg); z-index: 900; } .cxd-ListGroup { max-width: 25rem; display: flex; flex-direction: column; } .cxd-ListGroup-item { position: relative; display: block; padding: var(--ListItem-paddingY) var(--ListItem-paddingX); margin-bottom: -0.0625rem; background: var(--white); border: var(--ListItem-borderWidth) solid var(--List-borderColor); } .cxd-ListGroup-item:first-child { border-top-left-radius: var(--borderRadius); border-top-right-radius: var(--borderRadius); } .cxd-ListGroup-item:last-child { border-bottom-left-radius: var(--borderRadius); border-bottom-right-radius: var(--borderRadius); margin-bottom: 0; } .cxd-ListGroup-item:hover { z-index: 1; } .cxd-ListGroup-item.is-active { z-index: 2; } .cxd-ListGroup-item.is-disabled { color: var(--text--muted-color); } .cxd-ListGroup--expanded .cxd-ListGroup-item { border-radius: var(--borderRadius); margin-bottom: var(--gap-sm); } .cxd-ListGroup--expanded .cxd-ListGroup-item:last-child { margin-bottom: 0; } .cxd-ListItem { position: relative; display: block; padding: var(--ListItem-paddingY) var(--ListItem-paddingX); } .cxd-ListItem::before, .cxd-ListItem::after { display: table; content: ""; } .cxd-ListItem::after { clear: both; } .cxd-ListItem + .cxd-ListItem { border-top: var(--ListItem-borderWidth) solid var(--List-borderColor); } .cxd-ListItem:nth-child(even) { background: var(--ListItem--strip-bg); } .cxd-ListItem-checkBtn { float: left; margin-right: var(--gap-sm); } .cxd-ListItem-dragBtn { cursor: move; float: left; margin-right: var(--gap-sm); } .cxd-ListItem-actions { float: right; } .cxd-ListItem--actions-at-left .cxd-ListItem-actions { float: left; margin-right: var(--gap-base); } .cxd-ListItem-title { margin: 0; padding: 0; font-size: var(--fontSizeBase); color: var(--text--loud-color); font-weight: var(--fontWeightNormal); } .cxd-ListItem-content { overflow: hidden; } .cxd-ListItem-field { position: relative; display: flex; flex-wrap: nowrap; } .cxd-ListItem-fieldValue { position: relative; flex-basis: 0; flex-grow: 1; max-width: 100%; width: 0; overflow: hidden; text-overflow: ellipsis; } .cxd-ListItem-fieldLabel { width: 9.375rem; color: var(--text--muted-color); } .cxd-ListItem.is-checked { background: var(--ListItem-onChecked-bg); border-color: var(--ListItem-onChecked-borderColor); color: var(--ListItem-onChecked-color); } .cxd-ListItem.is-checked + .cxd-ListItem { border-color: var(--ListItem-onChecked-borderColor); } .cxd-ListItem.is-checked .cxd-ListItem-fieldLabel { color: var(--ListItem-onChecked-fieldLabel-color); } .cxd-ListItem.is-modified, .cxd-ListItem.is-moved { background: var(--ListItem-onModified-bg); border-color: var(--ListItem-onModified-borderColor); color: var(--ListItem-onModified-color); } .cxd-ListItem.is-modified + .cxd-ListItem, .cxd-ListItem.is-moved + .cxd-ListItem { border-color: var(--ListItem-onModified-borderColor); } .cxd-ListItem.is-modified .cxd-ListItem-fieldLabel, .cxd-ListItem.is-moved .cxd-ListItem-fieldLabel { color: var(--ListItem-onModified-fieldLabel-color); } .cxd-ListItem.is-dragging { opacity: var(--ListItem-onDragging-opacity); } .cxd-ListItem--hasItemAction { cursor: pointer; } .cxd-ListItem--hasItemAction:hover { color: var(--ListMenu-item--onHover-color); background: var(--ListMenu-item--onHover-bg); } .cxd-Cards { scroll-margin-top: var(--affix-offset-top); } .cxd-Cards-toolbar { padding: var(--Cards-toolbar-marginY) var(--Cards-toolbar-marginX) var(--Cards-toolbar-marginY); } .cxd-Cards-toolbar::before, .cxd-Cards-toolbar::after { display: table; content: ""; } .cxd-Cards-toolbar::after { clear: both; } .cxd-Cards-actions { display: inline-block; } .cxd-Cards-actions > * { margin-right: var(--Crud-toolbar-gap); } .cxd-Cards-heading { padding: var(--gap-xs) 0; } .cxd-Cards-header { padding: var(--Cards-toolbar-marginY) var(--Cards-toolbar-marginX); } .cxd-Cards-header > * + .cxd-Button, .cxd-Cards-header > * + .cxd-ButtonGroup, .cxd-Cards-header > * + .cxd-ButtonToolbar { margin-left: var(--Crud-toolbar-gap); } .cxd-Cards-header + .cxd-Cards-toolbar { padding-top: 0; } .cxd-Cards-fixedTop { position: sticky; background: var(--white); top: var(--affix-offset-top); padding: var(--gap-sm); z-index: 900; } .cxd-Cards-fixedTop .cxd-Cards-toolbar { margin-bottom: 0; } .cxd-Cards-fixedTop:empty { display: none; } .cxd-Cards--unsaved .cxd-Cards-heading { background: var(--Cards--unsaved-heading-bg); color: var(--Cards--unsaved-heading-color); padding: var(--gap-xs) var(--gap-sm); margin-bottom: var(--gap-sm); } .cxd-Cards-dragTip { width: 100%; color: var(--info); clear: both; margin-top: var(--gap-xs); } .cxd-Cards-placeholder { background: var(--white); color: var(--text--muted-color); text-align: center; height: var(--Cards-placeholder-height); line-height: var(--Cards-placeholder-height); border: var(--Card-borderWidth) solid var(--Card-borderColor); border-radius: var(--Card-borderRadius); } .cxd-Cards-body > div { display: flex; } .cxd-Cards--masonry { display: block; -moz-column-gap: 0; column-gap: 0; -moz-column-fill: initial; column-fill: initial; } .cxd-Cards--masonry:after { content: none; } .cxd-Cards--masonry > div { width: 100%; float: none; -moz-column-break-inside: avoid; break-inside: avoid; max-width: unset; display: inline-block; flex: unset; } .cxd-Cards-footToolbar--affix, .cxd-Cards-footer--affix { position: sticky; bottom: var(--affix-offset-bottom); background: var(--Table-bg); z-index: 900; } @media (min-width: 576px) { .cxd-Cards--masonrySm1 { -moz-column-count: 12; column-count: 12; } .cxd-Cards--masonrySm2 { -moz-column-count: 6; column-count: 6; } .cxd-Cards--masonrySm3 { -moz-column-count: 4; column-count: 4; } .cxd-Cards--masonrySm4 { -moz-column-count: 3; column-count: 3; } .cxd-Cards--masonrySm6 { -moz-column-count: 2; column-count: 2; } .cxd-Cards--masonrySm12 { -moz-column-count: 1; column-count: 1; } .cxd-Cards-toolbar { display: flex; flex-wrap: wrap; } } @media (min-width: 768px) { .cxd-Cards--masonryMd1 { -moz-column-count: 12; column-count: 12; } .cxd-Cards--masonryMd2 { -moz-column-count: 6; column-count: 6; } .cxd-Cards--masonryMd3 { -moz-column-count: 4; column-count: 4; } .cxd-Cards--masonryMd4 { -moz-column-count: 3; column-count: 3; } .cxd-Cards--masonryMd6 { -moz-column-count: 2; column-count: 2; } .cxd-Cards--masonryMd12 { -moz-column-count: 1; column-count: 1; } } @media (min-width: 992px) { .cxd-Cards--masonryLg1 { -moz-column-count: 12; column-count: 12; } .cxd-Cards--masonryLg2 { -moz-column-count: 6; column-count: 6; } .cxd-Cards--masonryLg3 { -moz-column-count: 4; column-count: 4; } .cxd-Cards--masonryLg4 { -moz-column-count: 3; column-count: 3; } .cxd-Cards--masonryLg6 { -moz-column-count: 2; column-count: 2; } .cxd-Cards--masonryLg12 { -moz-column-count: 1; column-count: 1; } } .cxd-Card { background: var(--Card-bg); border: var(--Card-borderWidth) solid var(--Card-borderColor); border-radius: var(--Card-borderRadius); margin-bottom: var(--gap-base); position: relative; display: flex; flex-direction: column; width: 100%; } .cxd-Card--link { cursor: pointer; } .cxd-Card-title { color: var(--text-color); font-size: var(--fontSizeMd); font-weight: var(--fontWeightMd); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cxd-Card-subTitle { max-height: calc(var(--fontSizeBase) * var(--lineHeightBase) * 2); overflow: hidden; text-overflow: ellipsis; color: var(--text--muted-color); -webkit-line-clamp: 2; -webkit-box-orient: vertical; display: -webkit-box; } .cxd-Card-title + .cxd-Card-subTitle { margin-top: var(--gap-xs); } .cxd-Card-dragBtn { display: inline-block; cursor: pointer; padding: 0 var(--gap-sm); } .cxd-Card-heading { display: flex; padding: var(--gap-md); } .cxd-Card-avtar { float: left; margin-right: var(--gap-base); max-width: 12.5rem; } .cxd-Card-avtar img { max-width: 100%; } .cxd-Card-avtarText { flex-shrink: 0; background: var(--primary); color: var(--white); width: 50px; height: 50px; line-height: 50px; text-align: center; vertical-align: middle; border-radius: 500px; float: left; margin-right: var(--gap-base); font-size: var(--fontSizeXl); text-transform: uppercase(); } .cxd-Card-meta { display: block; flex-grow: 1; height: 100%; position: relative; } .cxd-Card-meta + .cxd-Card-toolbar { margin-left: var(--gap-md); } .cxd-Card-toolbar { line-height: normal; text-align: right; } .cxd-Card-highlight { background: var(--success); width: 0.5rem; height: 0.5rem; border-radius: 100%; display: inline-block; margin: 0 var(--gap-sm); } .cxd-Card-body { padding: var(--gap-md); flex: 1 0 auto; } .cxd-Card-heading + .cxd-Card-body { padding-top: 0; } .cxd-Card-field { position: relative; display: flex; flex-wrap: nowrap; } .cxd-Card-fieldValue { position: relative; flex-basis: 0; flex-grow: 2; min-width: 0; text-overflow: ellipsis; overflow: hidden; } .cxd-Card-fieldLabel { flex-grow: 0; flex-shrink: 0; flex-basis: 40%; color: var(--text--muted-color); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-wrap: break-word; } .cxd-Card-actions { border-top: var(--Card-borderWidth) solid var(--Card-actions-borderColor); display: flex; flex-direction: row; width: 100%; table-layout: fixed; white-space: nowrap; align-items: center; } .cxd-Card-actions > a { background: transparent; flex-grow: 1; border-color: var(--Card-actions-borderColor); border-style: solid; border-width: 0 var(--Card-borderWidth) 0 0; color: var(--text-color); text-align: center; line-height: 2.5rem; font-size: var(--Card-actions-fontSize); } .cxd-Card-actions > a:not(.is-disabled) { cursor: pointer; } .cxd-Card-actions > a:not(.is-disabled):hover { background: var(--Card-actions-onHover-bg); color: var(--Card-actions-onHover-color); text-decoration: none; } .cxd-Card-actions > a:last-child { border: none; } .cxd-Card-actions > a.is-disabled { color: var(--text--muted-color); cursor: not-allowed; } .cxd-Card-actions > a.is-disabled:hover { text-decoration: none; } .cxd-Card-actions > a > .cxd-Button-icon:first-child:not(:last-child) { margin-right: var(--button-size-sm-icon-margin); } .cxd-Card.is-checked { background: var(--Card-onChecked-bg); border-color: var(--Card-onChecked-borderColor); color: var(--Card-onChecked-color); } .cxd-Card.is-checked .cxd-Card-actions, .cxd-Card.is-checked .cxd-Card-actions > a { border-color: var(--Card-onChecked-borderColor); color: var(--Card-onChecked-color); } .cxd-Card.is-checked .cxd-Card-fieldLabel { color: var(--Card-onChecked-fieldLabel-color); } .cxd-Card.is-checked .cxd-Card-actions > a:hover { background: var(--Card-actions-onChecked-onHover-bg); color: var(--Card-actions-onChecked-onHover-color); } .cxd-Card.is-modified, .cxd-Card.is-moved { background: var(--Card-onModified-bg); border-color: var(--Card-onModified-borderColor); color: var(--Card-onModified-color); } .cxd-Card.is-modified .cxd-Card-actions, .cxd-Card.is-modified .cxd-Card-actions > a, .cxd-Card.is-moved .cxd-Card-actions, .cxd-Card.is-moved .cxd-Card-actions > a { border-color: var(--Card-onModified-borderColor); color: var(--Card-onModified-color); } .cxd-Card.is-modified .cxd-Card-fieldLabel, .cxd-Card.is-moved .cxd-Card-fieldLabel { color: var(--Card-onModified-fieldLabel-color); } .cxd-Card.is-modified .cxd-Card-actions > a:hover, .cxd-Card.is-moved .cxd-Card-actions > a:hover { background: var(--Card-onModified-onHover-bg); color: var(--Card-onModified-onHover-color); } .is-dragging > .cxd-Card { opacity: var(--Card-onDragging-opacity); } .cxd-Card-footer-wrapper { display: flex; align-items: center; justify-content: space-between; } .cxd-Card-actions-wrapper { flex: 1; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; } .cxd-Card-checkbox { margin: 0 var(--gap-sm) !important; } .cxd-Card-secondary { max-width: 12.5rem; color: var(--Card-secondary-color); padding: 0 var(--gap-md); font-size: var(--fontSizeMd); font-weight: var(--fontWeightBase); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cxd-Card-secondary + .cxd-Card-actions-wrapper .cxd-Card-actions { margin-left: unset; border: none; width: unset; } .cxd-Card-secondary + .cxd-Card-actions-wrapper .cxd-Card-actions > a { border: none; } .cxd-Card-multiMedia--top .cxd-Card-actions-wrapper .cxd-Card-actions, .cxd-Card-multiMedia--bottom .cxd-Card-actions-wrapper .cxd-Card-actions, .cxd-Card-multiMedia--left .cxd-Card-actions-wrapper .cxd-Card-actions, .cxd-Card-multiMedia--right .cxd-Card-actions-wrapper .cxd-Card-actions { margin-left: unset; border: none; width: unset; } .cxd-Card-multiMedia--top .cxd-Card-actions-wrapper .cxd-Card-actions > a, .cxd-Card-multiMedia--bottom .cxd-Card-actions-wrapper .cxd-Card-actions > a, .cxd-Card-multiMedia--left .cxd-Card-actions-wrapper .cxd-Card-actions > a, .cxd-Card-multiMedia--right .cxd-Card-actions-wrapper .cxd-Card-actions > a { border: none; } .cxd-Card-multiMedia--top { display: block; } .cxd-Card-multiMedia--top .cxd-Card-multiMedia-img { border-bottom-left-radius: unset; border-bottom-right-radius: unset; } .cxd-Card-multiMedia--bottom { display: flex; flex-direction: column-reverse; } .cxd-Card-multiMedia--bottom .cxd-Card-actions { border-bottom: var(--Card-borderWidth) solid var(--Card-actions-borderColor); } .cxd-Card-multiMedia--bottom .cxd-Card-multiMedia-img { border-top-left-radius: unset; border-top-right-radius: unset; } .cxd-Card-multiMedia--top .cxd-Card-body, .cxd-Card-multiMedia--bottom .cxd-Card-body { padding-bottom: var(--gap-md); } .cxd-Card-multiMedia--left { display: flex; align-items: center; } .cxd-Card-multiMedia--left .cxd-Card-actions { margin-left: var(--gap-md); border-left: var(--Card-borderWidth) solid var(--Card-actions-borderColor); } .cxd-Card-multiMedia--left .cxd-Card-multiMedia-img, .cxd-Card-multiMedia--left .cxd-Card-multiMedia-video { margin: var(--gap-md) 0 var(--gap-md) var(--gap-md); } .cxd-Card-multiMedia--right { display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; } .cxd-Card-multiMedia--right .cxd-Card-actions { margin-right: var(--gap-md); border-right: var(--Card-borderWidth) solid var(--Card-actions-borderColor); } .cxd-Card-multiMedia--right .cxd-Card-multiMedia-img, .cxd-Card-multiMedia--right .cxd-Card-multiMedia-video { margin: var(--gap-md) var(--gap-md) var(--gap-md) 0; } .cxd-Card-multiMedia-flex { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; } .cxd-Card-multiMedia-img { display: block; width: auto; height: auto; -o-object-fit: cover; object-fit: cover; border-radius: var(--Card-borderRadius); } .cxd-Card-multiMedia-video { width: 11.25rem; height: 7.5rem; } .cxd-Card-multiMedia-video .cxd-Video { width: 100%; height: 100%; min-width: unset; border-radius: var(--Card-borderRadius); overflow: hidden; } .cxd-Card-multiMedia-video .cxd-Video .cxd-Video-player { width: 100%; height: 100%; } .cxd-Card-multiMedia-video .cxd-Video .cxd-Video-player .video-react { width: 100%; height: 100%; padding-top: unset !important; } .cxd-Card2 { width: 100%; background: var(--Card-bg); border: var(--Card-borderWidth) solid var(--Card-borderColor); border-radius: var(--Card-borderRadius); position: relative; } .cxd-Card2.checkOnItem { cursor: pointer !important; } .cxd-Card2-checkbox { margin: 0; position: absolute; right: var(--gap-md); top: var(--gap-md); } .cxd-Card2-body { padding: var(--gap-md); } .cxd-Card2.is-checked { background: var(--Card-onChecked-bg); border-color: var(--Card-onChecked-borderColor); color: var(--Card-onChecked-color); } .cxd-Field-quickEditBtn { margin-left: var(--gap-xs); height: auto; padding: 0; vertical-align: text-bottom; } .cxd-Field-quickEditBtn .fa { font-size: var(--QuickEdit-iconSize); } .cxd-Field-quickEditBtn > svg { width: var(--QuickEdit-iconSize); height: var(--QuickEdit-iconSize); color: currentColor; fill: currentColor; } .cxd-Field--quickEditable { outline: none; position: relative; } .cxd-Field--quickEditable:focus { position: relative; } .cxd-Field--quickEditable:focus:after { content: ""; left: 0; top: 0; right: 0; bottom: 0; position: absolute; pointer-events: none; z-index: 1; border: var(--QuickEdit-onFocus-borderWidth) dashed var(--QuickEdit-onFocus-borderColor); } .cxd-Field--quickEditable:hover .cxd-Field-quickEditBtn { visibility: visible; } .cxd-QuickEdit-popover { min-width: 20rem; max-width: 40rem; } .cxd-QuickEdit-popover .cxd-Panel { margin-bottom: 0; border: none; } .cxd-Field-popOverBtn { color: var(--PopOverAble-iconColor); margin-left: var(--gap-xs); display: inline-block; cursor: pointer; opacity: 0.6; vertical-align: middle; } .cxd-Field-popOverBtn:hover { color: var(--PopOverAble-onHover-iconColor); opacity: 1; } .cxd-Field--popOverAble { outline: none; position: relative; } .cxd-PopOverAble-popover { min-width: 20rem; max-width: 40rem; } .cxd-PopOverAble-popover .cxd-Panel { margin-bottom: 0; border: none; } .cxd-PopOverAble--fixed { position: fixed; } .cxd-PopOverAble--fixed > * { margin-bottom: 0; } .cxd-PopOverAble--fixed-center { top: 50%; left: 50%; transform: translate(-50%, -50%); } .cxd-PopOverAble--fixed-left-top { top: 0; left: 0; } .cxd-PopOverAble--fixed-right-top { top: 0; right: 0; } .cxd-PopOverAble--fixed-left-bottom { bottom: 0; left: 0; } .cxd-PopOverAble--fixed-right-bottom { bottom: 0; right: 0; } .cxd-Progress { display: flex; align-items: center; color: var(--text-color); font-size: var(--fontSizeXs); min-width: 50px; } .cxd-Progress-line { display: inline-block; width: 100%; position: relative; } .cxd-Progress-line-threshold { position: absolute; height: 100%; border-left: 1px solid #007bff; } .cxd-Progress-line-threshold-text { position: absolute; font-size: 12px; bottom: -20px; left: 50%; transform: translateX(-50%); } .cxd-Progress-line-inter { height: 100%; background-color: var(--Progress-line-bg); overflow: hidden; border-radius: var(--Progress-borderRadius); } .cxd-Progress-line-text { display: inline-block; flex-grow: 1; margin-left: 8px; white-space: nowrap; text-align: left; word-break: normal; color: var(--Progress-line-color); font-size: var(--Progress-line-fontSize); } .cxd-Progress-line-text .icon { font-size: 15px; } .cxd-Progress-line-bar { float: left; width: 0; height: 8px; background: var(--Progress-line-theme-color); transition: width var(--animation-duration) ease; border-radius: var(--Progress-borderRadius); } .cxd-Progress-line-bar.bg-info { background: var(--Progress-line-theme-color); } .cxd-Progress-line-bar--stripe { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 2rem 2rem; } .cxd-Progress-line-bar--animate { position: relative; transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s; } .cxd-Progress-line-bar--animate::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--Progress-animate-backgroundColor); border-radius: 10px; opacity: 0; animation: progress-bar-active 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite; content: ""; } .cxd-Progress-line-bar--stripe-animate { animation: progress-bar-stripes 1s linear infinite; } .cxd-Progress-circle { width: 100%; position: relative; } .cxd-Progress-circle-text { position: absolute; top: 50%; left: 50%; width: 100%; margin: 0; padding: 0; white-space: normal; text-align: center; transform: translate(-50%, -50%); color: var(--Progress-circle-color); font-size: var(--Progress-circle-fontSize); } .cxd-Progress-circle-text .icon { font-size: 1.2em; } .cxd-Progress-circle .bg-warning-circle-path { stroke: var(--warning); } .cxd-Progress-circle .bg-danger-circle-path { stroke: var(--danger); } .cxd-Progress-circle .bg-info-circle-path { stroke: var(--info); } .cxd-Progress-circle .bg-success-circle-path { stroke: var(--success); } .cxd-Progress-circle .bg-primary-circle-path { stroke: var(--primary); } @keyframes progress-bar-active { 0% { transform: translateX(-100%) scaleX(0); opacity: 0.1; } 20% { transform: translateX(-100%) scaleX(0); opacity: 0.5; } 100% { transform: translateX(0) scaleX(1); opacity: 0; } } @keyframes progress-bar-stripes { from { background-position: 2rem 0; } to { background-position: 0 0; } } .cxd-Property > table { width: 100%; border-collapse: collapse; } .cxd-Property > table > thead > tr > th { padding: var(--gap-sm); background: var(--Property-title-bg); border: 1px solid var(--borderColor); } .cxd-Property > table > tbody > tr { background: var(--background); } .cxd-Property > table > tbody > tr > td, .cxd-Property > table > tbody > tr > th { border: 1px solid var(--borderColor); padding: var(--gap-sm); } .cxd-Property > table > tbody > tr > td .cxd-Form-item:last-child, .cxd-Property > table > tbody > tr > th .cxd-Form-item:last-child { margin-bottom: 0; } .cxd-Property > table > tbody > tr > th { background: var(--Property-label-bg); } .cxd-Property--simple > table > thead > tr > th { background: transparent; border: none; } .cxd-Property--simple > table > tbody > tr { background: transparent; } .cxd-Property--simple > table > tbody > tr > td, .cxd-Property--simple > table > tbody > tr > th { border: none; } .cxd-Field-copyBtn { color: var(--Copyable-iconColor); margin-left: var(--gap-xs); display: inline-block; cursor: pointer; } .cxd-Field-copyBtn:hover { color: var(--Copyable-onHover-iconColor); } .cxd-Divider { margin: var(--Divider-marginTop) var(--Divider-marginRight) var(--Divider-marginBottom) var(--Divider-marginLeft); font-size: 0; } .cxd-Divider--dashed { border-bottom-style: dashed; } .cxd-Divider--horizontal.cxd-Divider--solid { border-bottom-style: solid; } .cxd-Divider--horizontal.cxd-Divider--dashed { border-bottom-style: dashed; } .cxd-Divider--vertical.cxd-Divider--solid { border-left-style: solid; } .cxd-Divider--vertical.cxd-Divider--dashed { border-left-style: dashed; } .cxd-Divider--horizontal { position: relative; height: 0.125rem; border-bottom: var(--Divider-width) var(--Divider-style) var(--Divider-color); transform-origin: 0 center; clear: both; } .cxd-Divider--vertical { border-left: var(--Divider-width) var(--Divider-style) var(--Divider-color); height: var(--sizes-base-15); transform-origin: center bottom; display: inline-block; } .cxd-Divider--with-text { display: flex; align-items: center; height: unset; border-bottom-width: 0 !important; } .cxd-Divider--with-text::before, .cxd-Divider--with-text::after { content: ""; height: 0; flex: 1; min-width: 0; min-height: 0; border-bottom: inherit; border-bottom-width: var(--Divider-width); } .cxd-Divider--with-text.cxd-Divider--with-text-left:before, .cxd-Divider--with-text.cxd-Divider--with-text-right:after { flex-basis: var(--Divider-text-width); flex-grow: 0; } .cxd-Divider-text { margin: var(--Divider-text-marginTop) var(--Divider-text-marginRight) var(--Divider-text-marginBottom) var(--Divider-text-marginLeft); font-size: var(--Divider-text-fontSize); font-weight: var(--Divider-text-fontWeight); line-height: 1; color: var(--Divider-text-color); box-sizing: border-box; } /* 移动端样式调整 */ @media (max-width: 767px) { .cxd-Divider { transform: scaleY(0.5); } } .cxd-Pagination { display: inline-block; padding: 0; margin: 0 0 -0.5rem; border-radius: 0.25rem; } .cxd-Pagination > li { display: inline-flex; cursor: pointer; } .cxd-Pagination > li > a, .cxd-Pagination > li > span { -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: pointer; position: relative; float: left; text-decoration: none; min-width: var(--Pagination-minWidth); height: var(--Pagination-height); border: 0; line-height: var(--Pagination-height); padding: var(--Pagination-padding); text-align: center; color: var(--Pagination-light-color); border-radius: 0; margin-left: 0; font-size: var(--Pagination-fontSize); } .cxd-Pagination > li > a:hover, .cxd-Pagination > li > span:hover, .cxd-Pagination > li > a:focus, .cxd-Pagination > li > span:focus { background: transparent; color: var(--primary); } .cxd-Pagination > li.is-disabled > span, .cxd-Pagination > li.is-disabled > a { cursor: not-allowed; } .cxd-Pagination > li.is-disabled > a, .cxd-Pagination > li.is-disabled > span, .cxd-Pagination > li.is-disabled > a:hover, .cxd-Pagination > li.is-disabled > span:hover, .cxd-Pagination > li.is-disabled > a:focus, .cxd-Pagination > li.is-disabled > span:focus { color: #cccccc; } .cxd-Pagination > li.is-active > a, .cxd-Pagination > li.is-active > span, .cxd-Pagination > li.is-active > a:hover, .cxd-Pagination > li.is-active > span:hover, .cxd-Pagination > li.is-active > a:focus, .cxd-Pagination > li.is-active > span:focus { background: var(--Pagination-onActive-backgroundColor); color: var(--Pagination-onActive-color); border: var(--Pagination-onActive-border); border-radius: var(--borderRadius); } .cxd-Pagination-simple > ul > li:hover, .cxd-Pagination-simple > ul > li:focus { outline: none; } .cxd-Pagination-simple > ul > li.is-active > a { border: none; } .cxd-Pagination-simple > ul > li.is-active > a:hover, .cxd-Pagination-simple > ul > li.is-active > a:focus { border: none; } .cxd-Pagination-prev > span { cursor: pointer; } .cxd-Pagination-next > span { cursor: pointer; } .cxd-Pagination-total { display: inline-block; color: var(--Pagination-light-color); } .cxd-Pagination-inputGroup { display: inline-flex; flex-wrap: nowrap; align-items: center; height: var(--Pagination-height); } .cxd-Pagination-inputGroup-left { color: var(--Pagination-light-color); } .cxd-Pagination-inputGroup input { min-width: 3.125rem; width: 3.125rem; height: var(--Pagination-height); line-height: var(--Pagination-height); border: none; border: var(--borderWidth) solid var(--borderColor); border-radius: var(--borderRadius) 0 0 var(--borderRadius); padding: var(--Pagination-padding); background-color: var(--colors-neutral-fill-11); color: var(--Pagination-light-color); margin-left: 0.5rem; text-align: center; } .cxd-Pagination-inputGroup input:focus, .cxd-Pagination-inputGroup input:hover { outline: none; border-color: var(--primary); } .cxd-Pagination-inputGroup-right { display: inline-block; width: 2rem; cursor: pointer; text-align: center; height: var(--Pagination-height); line-height: var(--Pagination-height); border: var(--borderWidth) solid var(--borderColor); border-left: none; border-radius: 0 var(--borderRadius) var(--borderRadius) 0; font-size: var(--fontSizeSm); margin-left: -1px; } .cxd-Pagination-inputGroup-right:hover { color: var(--primary); border-color: var(--primary); border-left: var(--borderWidth) solid var(--primary); } .cxd-Pagination-simplego { display: inline-flex; flex-wrap: nowrap; align-items: center; height: var(--Pagination-height); } .cxd-Pagination-simplego input { min-width: 2.5rem; width: 2.5rem; height: var(--Pagination-height); line-height: var(--Pagination-height); border: none; border: var(--borderWidth) solid var(--borderColor); border-radius: var(--borderRadius); padding: var(--Pagination-padding); background-color: var(--colors-neutral-fill-11); color: var(--Pagination-light-color); margin-right: 0.5rem; text-align: center; } .cxd-Pagination-simplego input:focus, .cxd-Pagination-simplego input:hover { outline: none; border-color: var(--primary); } .cxd-Pagination-simplego-right { display: inline-block; width: 2rem; height: var(--Pagination-height); line-height: var(--Pagination-height); border: var(--borderWidth) solid var(--borderColor); font-size: var(--fontSizeSm); } .cxd-Pagination-simplego-right:hover { color: #666666 !important; cursor: default; } .cxd-Pagination-ellipsis { cursor: unset; position: relative; } .cxd-Pagination-ellipsis:hover { cursor: pointer; } .cxd-Pagination-ellipsis:hover > a { opacity: 0; transition: all 0.2s; } .cxd-Pagination-ellipsis:hover > span { opacity: 1; transition: all 0.2s; } .cxd-Pagination-ellipsis > a { cursor: unset; position: absolute !important; top: -0.25rem; opacity: 1; transition: all 0.2s; } .cxd-Pagination-ellipsis > span { opacity: 0; transition: all 0.2s; } .cxd-Pagination-wrap .cxd-Pagination-item.cxd-Pagination-perpage { margin-left: 0.5rem; vertical-align: baseline; } .cxd-Pagination-wrap .cxd-Pagination-item:nth-child(1) { margin-left: 0; } .cxd-Pagination-wrap.disabled { background-color: #fff; } .cxd-Pagination-wrap.disabled .cxd-Pagination > li > a, .cxd-Pagination-wrap.disabled .cxd-Pagination > li > span { color: var(--Pagination-onDisabled-color); cursor: not-allowed; } .cxd-Pagination-wrap.disabled .cxd-Pagination > li.is-active > a, .cxd-Pagination-wrap.disabled .cxd-Pagination > li.is-active > span, .cxd-Pagination-wrap.disabled .cxd-Pagination > li.is-active > a:hover, .cxd-Pagination-wrap.disabled .cxd-Pagination > li.is-active > span:hover, .cxd-Pagination-wrap.disabled .cxd-Pagination > li.is-active > a:focus, .cxd-Pagination-wrap.disabled .cxd-Pagination > li.is-active > span:focus { background-color: var(--Pagination-onDisabled-backgroundColor); border-color: var(--Pagination-onDisabled-color); } .cxd-PaginationWrapper-pager { text-align: right; } .cxd-PaginationWrapper-pager:first-child { margin-bottom: var(--gap-sm); } .cxd-Pagination-wrap-size--sm { line-height: 1.5rem; } .cxd-Pagination-wrap-size--sm .cxd-Pagination-item { margin-left: 0.25rem; } .cxd-Pagination-wrap-size--sm .cxd-Pagination-item > li > a, .cxd-Pagination-wrap-size--sm .cxd-Pagination-item > li > span { min-width: var(--Pagination-minWidth-sm); height: var(--Pagination-height-sm); line-height: var(--Pagination-height-sm); padding: var(--Pagination-padding-sm); } .cxd-Pagination-wrap-size--sm .cxd-Pagination-item .cxd-Pagination-inputGroup, .cxd-Pagination-wrap-size--sm .cxd-Pagination-item .cxd-Pagination-simplego { height: var(--Pagination-height-sm); } .cxd-Pagination-wrap-size--sm .cxd-Pagination-item .cxd-Pagination-inputGroup-input, .cxd-Pagination-wrap-size--sm .cxd-Pagination-item .cxd-Pagination-simplego-input { min-width: 2.5rem; width: 2.5rem; height: var(--Pagination-height-sm); line-height: var(--Pagination-height-sm); padding: var(--Pagination-padding-sm); margin-left: 0.25rem; } .cxd-Pagination-wrap-size--sm .cxd-Pagination-item .cxd-Pagination-inputGroup-right, .cxd-Pagination-wrap-size--sm .cxd-Pagination-item .cxd-Pagination-simplego-right { height: var(--Pagination-height-sm); line-height: var(--Pagination-height-sm); } .cxd-Pagination-wrap-size--sm .cxd-Pagination-item .cxd-Pagination-simplego-input { min-width: 2rem; width: 2rem; } .cxd-Pagination-wrap-size--sm .cxd-Pagination-perpage { margin-left: 0.25rem; padding: 0 0.375rem; min-height: 1.5rem; vertical-align: baseline; } .cxd-Wrapper, .cxd-Container { /* 添加默认的min-width和min-height可避免容器子元素异常溢出 */ min-width: 0; min-height: 0; } .cxd-Wrapper--xs, .cxd-Container--xs { padding: var(--gap-xs); } .cxd-Wrapper--sm, .cxd-Container--sm { padding: var(--gap-sm); } .cxd-Wrapper--md, .cxd-Container--md { padding: var(--gap-md); } .cxd-Wrapper--lg, .cxd-Container--lg { padding: var(--gap-lg); } .cxd-Wrapper--xl, .cxd-Container--xl { padding: var(--gap-xl); } .cxd-StatusField { vertical-align: middle; white-space: nowrap; display: inline-flex; flex-wrap: nowrap; flex-direction: row; align-items: center; } .cxd-StatusField-label { font-size: var(--Status-font-size); margin-left: var(--Status-font-margin); } @keyframes animation-rolling_red { 0% { transform: translateX(0); } 50% { transform: translateX(20px); } 100% { transform: translateX(0); } } @keyframes animation-rolling_blue { 0% { transform: translateX(0); } 50% { transform: translateX(-20px); } 100% { transform: translateX(0); } } .cxd-StatusField svg.cxd-Status-icon { width: var(--Status-icon-width); height: var(--Status-icon-height); top: 0; } .cxd-StatusField .cxd-Status-icon.rolling { width: 30px; height: 10px; display: inline-block; vertical-align: middle; position: relative; } .cxd-StatusField .cxd-Status-icon.rolling::before { content: ""; display: inline-block; border: 5px solid var(--Status-pending-beforeColor); border-radius: 500px; position: absolute; top: 0; left: 0; animation: animation-rolling_red 2s; animation-iteration-count: infinite; } .cxd-StatusField .cxd-Status-icon.rolling::after { content: ""; display: inline-block; border: 5px solid var(--Status-pending-afterColor); border-radius: 500px; position: absolute; top: 0; left: 20px; animation: animation-rolling_blue 2s; animation-iteration-count: infinite; } .cxd-StatusField .cxd-Status-icon.icon-warning { color: var(--Status-warning-color); } .cxd-StatusField .cxd-Status-icon.icon-fail { color: var(--Status-fail-color); } .cxd-StatusField .cxd-Status-icon.icon-success { color: var(--Status-success-color); } .cxd-StatusField .cxd-Status-icon.icon-schedule { color: var(--Status-schedule-color); } .cxd-Status-icon.rolling + .cxd-StatusField-label { color: var(--Status-warning-color); } .cxd-Status-icon.icon-success + .cxd-StatusField-label { color: var(--Status-success-color); } .cxd-Status-icon.icon-fail + .cxd-StatusField-label { color: var(--Status-fail-color); } .cxd-Status-icon.icon-warning + .cxd-StatusField-label { color: var(--Status-warning-color); } .cxd-Status-icon.icon-schedule + .cxd-StatusField-label { color: var(--Status-schedule-color); } .cxd-Carousel { min-width: var(--Carousel-minWidth); height: var(--Carousel-height); position: relative; display: block; background: var(--Carousel-bg); } .cxd-Carousel.cxd-Carousel--light .cxd-Carousel-dot { background: var(--Carousel--light-control); } .cxd-Carousel.cxd-Carousel--light svg { fill: var(--Carousel--light-control); } .cxd-Carousel.cxd-Carousel--light .cxd-Carousel-item .title, .cxd-Carousel.cxd-Carousel--light .cxd-Carousel-item .description { color: var(--Carousel--light-control); } .cxd-Carousel.cxd-Carousel--dark .cxd-Carousel-dot { background: var(--Carousel--dark-control); } .cxd-Carousel.cxd-Carousel--dark svg { fill: var(--Carousel--dark-control); } .cxd-Carousel.cxd-Carousel--dark .cxd-Carousel-item .title, .cxd-Carousel.cxd-Carousel--dark .cxd-Carousel-item .description { color: var(--Carousel--dark-control); } .cxd-Carousel-container { position: relative; width: 100%; height: 100%; overflow: hidden; } .cxd-Carousel-container .cxd-Carousel-item { width: 100%; height: 100%; position: absolute; left: 0; top: 0; transition-duration: var(--Carousel-transitionDuration); transition-timing-function: ease-out; transition-property: transform, opacity; } .cxd-Carousel-container .cxd-Carousel-item.fade { opacity: 0; } .cxd-Carousel-container .cxd-Carousel-item.fade.in { opacity: 1; } .cxd-Carousel-container .cxd-Carousel-item.slide { transform: translateX(100%); } .cxd-Carousel-container .cxd-Carousel-item.slide.in { transform: translateX(0); } .cxd-Carousel-container .cxd-Carousel-item.slide.out { transform: translateX(-100%); } .cxd-Carousel-container .cxd-Carousel-item.slideRight { transform: translateX(-100%); } .cxd-Carousel-container .cxd-Carousel-item.slideRight.in { transform: translateX(0); } .cxd-Carousel-container .cxd-Carousel-item.slideRight.out { transform: translateX(100%); } .cxd-Carousel-container .cxd-Carousel-item .title { position: absolute; bottom: var(--Carousel-imageTitle-bottom); text-align: center; width: 100%; opacity: 0.8; } .cxd-Carousel-container .cxd-Carousel-item .description { position: absolute; bottom: var(--Carousel-imageDescription-bottom); text-align: center; width: 100%; opacity: 0.8; } .cxd-Carousel-container .cxd-Carousel-item .image { width: 100%; height: 100%; background-size: cover; } .cxd-Carousel-image { width: 100%; height: 100%; } .cxd-Carousel-image .cxd-Image-origin { height: 100%; width: 100%; } .cxd-Carousel-dotsControl { position: absolute; bottom: 0px; width: 100%; z-index: 100; text-align: center; } .cxd-Carousel-dotsControl .cxd-Carousel-dot { cursor: pointer; display: inline-block; height: var(--Carousel-dot-width); width: var(--Carousel-dot-height); border-radius: var(--Carousel-dot-borderRadius); margin: var(--Carousel-dot-margin); transition-duration: var(--Carousel-transitionDuration); opacity: 0.3; } .cxd-Carousel-dotsControl .cxd-Carousel-dot.is-active { opacity: 1; } .cxd-Carousel .cxd-Carousel-leftArrow { width: 10%; min-width: var(--Carousel-arrowControl-width); height: 100%; cursor: pointer; top: 0; bottom: 0; position: absolute; transition-duration: var(--Carousel-transitionDuration); display: none; left: 0; } .cxd-Carousel .cxd-Carousel-leftArrow svg { position: absolute; top: 50%; left: 50%; right: 50%; transform: translate(-50%, -50%); width: var(--Carousel-svg-width); } .cxd-Carousel .cxd-Carousel-rightArrow { width: 10%; min-width: var(--Carousel-arrowControl-width); height: 100%; cursor: pointer; top: 0; bottom: 0; position: absolute; transition-duration: var(--Carousel-transitionDuration); display: none; right: 0; } .cxd-Carousel .cxd-Carousel-rightArrow svg { position: absolute; top: 50%; left: 50%; right: 50%; transform: translate(-50%, -50%); width: var(--Carousel-svg-width); } .cxd-Carousel.cxd-Carousel-arrow--always .cxd-Carousel-leftArrow { display: block; } .cxd-Carousel.cxd-Carousel-arrow--always .cxd-Carousel-rightArrow { display: block; } .cxd-Carousel:hover .cxd-Carousel-leftArrow { display: block; } .cxd-Carousel:hover .cxd-Carousel-rightArrow { display: block; } .cxd-Carousel-arrowsControl { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 100; text-align: center; } @keyframes disappear { to { opacity: 0; } } @keyframes appear { from { opacity: 0; } } .cxd-ImageGallery { display: flex; flex-direction: column; background: transparent; border: none; border-radius: 0; max-width: 1010px !important; padding-top: 0; } .cxd-ImageGallery-close { position: absolute; right: 0; top: 0; color: rgba(255, 255, 255, 0.8); cursor: pointer; } .cxd-ImageGallery-close:hover { color: #fff; } .cxd-ImageGallery-close svg { width: 1rem; height: 1rem; } .cxd-ImageGallery-title, .cxd-ImageGallery-caption { height: 1.125rem; vertical-align: top; line-height: 1.125rem; font-size: 0.75rem; color: var(--white); text-align: center; margin-bottom: 18px; } .cxd-ImageGallery-caption { text-align: left; margin-bottom: 4px; } .cxd-ImageGallery-main { background: #000; flex-basis: 0; flex-grow: 1; height: 0; position: relative; display: flex; justify-content: center; align-items: center; -webkit-user-select: none; -moz-user-select: none; user-select: none; overflow: hidden; } .cxd-ImageGallery-main > img { cursor: move; cursor: -webkit-grab; display: block; max-width: 100%; max-height: 100%; transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; } .cxd-ImageGallery-main.is-dragging > img { transition: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: -webkit-grabbing; } .cxd-ImageGallery-prevBtn, .cxd-ImageGallery-nextBtn { position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--image-images-item-color); text-shadow: rgba(0, 0, 0, 0.3) 0px 0px 4px; animation-name: disappear; animation-delay: var(--animation-duration); animation-duration: var(--animation-duration); animation-fill-mode: both; } .cxd-ImageGallery-prevBtn svg, .cxd-ImageGallery-nextBtn svg { width: var(--image-images-item-size); height: var(--image-images-item-size); } .cxd-ImageGallery-prevBtn:hover, .cxd-ImageGallery-nextBtn:hover { color: #fff; text-shadow: rgba(0, 0, 0, 0.5) 0px 0px 4px; } .cxd-ImageGallery-prevBtn.is-disabled, .cxd-ImageGallery-nextBtn.is-disabled { pointer-events: none; } .cxd-ImageGallery-main:hover .cxd-ImageGallery-prevBtn, .cxd-ImageGallery-main:hover .cxd-ImageGallery-nextBtn { animation-name: appear; animation-delay: 0s; animation-duration: var(--animation-duration); } .cxd-ImageGallery-prevBtn { left: var(--gap-md); } .cxd-ImageGallery-nextBtn { right: var(--gap-md); } .cxd-ImageGallery-footer { min-height: 4.625rem; background: #222; display: flex; flex-direction: row; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-ImageGallery-prevList, .cxd-ImageGallery-nextList { width: var(--gap-md); display: flex; align-items: center; justify-content: center; cursor: pointer; background: rgba(0, 0, 0, 0.3); color: #fff; } .cxd-ImageGallery-prevList.is-disabled, .cxd-ImageGallery-nextList.is-disabled { background: rgba(0, 0, 0, 0.3); color: rgba(255, 255, 255, 0.1); pointer-events: none; } .cxd-ImageGallery-prevList:hover, .cxd-ImageGallery-nextList:hover { background: rgb(0, 0, 0); color: #fff; } .cxd-ImageGallery-itemsWrap { flex-grow: 1; flex-basis: 0; width: 0; overflow-x: auto; overflow-y: hidden; align-items: flex-start; justify-content: flex-start; display: flex; scrollbar-width: thin; scrollbar-color: #111 transparent; } .cxd-ImageGallery-itemsWrap::-webkit-scrollbar { background-color: transparent; width: 6px; height: 6px; overflow: visible; height: 10px !important; } .cxd-ImageGallery-itemsWrap ::-webkit-scrollbar-track { background-color: transparent; } .cxd-ImageGallery-itemsWrap::-webkit-scrollbar-thumb { width: 6px; height: 6px; background-color: #111; border-radius: 6px; border: 4px solid transparent; } .cxd-ImageGallery-itemsWrap::-webkit-scrollbar-thumb:hover { background-color: #000; } .cxd-ImageGallery-itemsWrap::-webkit-scrollbar-button { display: none; } .cxd-ImageGallery-items { display: inline-block; white-space: nowrap; margin: 0 auto; } .cxd-ImageGallery-item { margin: 10px 5px 0; width: 54px; height: 54px; display: inline-flex; position: relative; border: 1px solid #666; justify-content: center; align-items: center; cursor: pointer; } .cxd-ImageGallery-item > img { display: block; max-width: 100%; max-height: 100%; } @supports ((-o-object-fit: cover) or (object-fit: cover)) { .cxd-ImageGallery-item > img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } } .cxd-ImageGallery-item:after { position: absolute; content: ""; display: block; background: rgba(0, 0, 0, 0.5); z-index: 1; left: 0; top: 0; width: 100%; height: 100%; } .cxd-ImageGallery-item:hover { border: 1px solid #e5e5e5; } .cxd-ImageGallery-item:hover:after { display: none; } .cxd-ImageGallery-item.is-active { border: 1px solid var(--primary); } .cxd-ImageGallery-item.is-active:after { display: none; } .ImageGallery-prevBtn { content: var(--image-images-prev-icon); } .ImageGallery-nextBtn { content: var(--image-images-next-icon); } .cxd-ImageGallery-toolbar { background-color: var(--image-images-preview-bgColor); border-radius: var(--image-images-preview-radius); box-shadow: 0 2px 6px 0 rgba(211, 211, 211, 0.5); display: flex; align-items: flex-start; padding: var(--image-images-preview-paddingTop) var(--image-images-preview-paddingRight) var(--image-images-preview-paddingBottom) var(--image-images-preview-paddingLeft); position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; } .cxd-ImageGallery-toolbar-action { padding: 0.8125rem; border-radius: 0.25rem; width: 2.5rem; height: 2.5rem; cursor: pointer; display: flex; justify-content: center; align-items: center; } .cxd-ImageGallery-toolbar-action-icon { display: block; color: var(--black); } .cxd-ImageGallery-toolbar-action-icon svg { fill: var(--black); } .cxd-ImageGallery-toolbar-action.is-disabled { cursor: not-allowed; color: var(--icon-onDisabled-color); } .cxd-ImageGallery-toolbar-action.is-disabled .cxd-ImageGallery-toolbar-action-icon { color: var(--icon-onDisabled-color); } .cxd-ImageGallery-toolbar-action.is-disabled .cxd-ImageGallery-toolbar-action-icon svg { color: var(--icon-onDisabled-color); } .cxd-ImageGallery-toolbar-action:hover { background-color: #f2f3f5; } .cxd-ImageGallery-toolbar-action:hover .cxd-ImageGallery-toolbar-action-icon { color: var(--primary); } .cxd-ImageGallery-toolbar-action:hover .cxd-ImageGallery-toolbar-action-icon svg { fill: var(--primary); } .cxd-Images { display: flex; flex-wrap: wrap; margin: calc(var(--gap-xs) * -1); } .cxd-Images-item { display: flex; margin: var(--image-images-item-marginTop) var(--image-images-item-marginRight) var(--image-images-item-marginBottom) var(--image-images-item-marginLeft); } .cxd-Image { border: var(--borderWidth) solid var(--borderColor); } .cxd-Image--thumb { display: inline-block; padding: var(--image-image-normal-paddingTop) var(--image-image-normal-paddingRight) var(--image-image-normal-paddingBottom) var(--image-image-normal-paddingLeft); } .cxd-Image-thumbWrap { position: relative; } .cxd-Image-image { display: block; } .cxd-Image-image--loading { visibility: hidden; } .cxd-Image--original .cxd-Image-image { max-width: 100%; max-height: 100%; width: auto; margin: auto; } .cxd-Image-thumb { width: 6.875rem; height: 6.875rem; position: relative; overflow: hidden; } .cxd-Image-thumb > img { position: absolute; left: 50%; top: 50%; max-height: 100%; width: auto; transform: translate(-50%, -50%); } .cxd-Image-info { padding: 5px 10px; } .cxd-Image--thumb .cxd-Image-info { width: 6.875rem; padding: 0; } .cxd-Image-thumb--4-3 { height: 5.15625rem; } .cxd-Image-thumb--16-9 { height: 3.8671875rem; } .cxd-Image-thumb--fixed-size { min-width: 6.875rem; min-height: 6.875rem; width: 100%; padding: 0; height: 100%; } .cxd-Image-thumb--fixed-size .cxd-Image-thumb { width: 100%; } .cxd-Image-thumb--fixed-size .cxd-Image-thumb > img { width: auto; height: 100%; } .cxd-Image-thumb--w-full > img { width: 100%; height: auto; } @supports ((-o-object-fit: contain) or (object-fit: contain)) { .cxd-Image-thumb--contain > img { position: static; width: 100% !important; height: 100% !important; transform: translate(0, 0); top: 0; left: 0; -o-object-fit: contain; object-fit: contain; } .cxd-Image-origin--contain > img { width: 100% !important; height: 100% !important; -o-object-fit: contain; object-fit: contain; } } @supports ((-o-object-fit: cover) or (object-fit: cover)) { .cxd-Image-thumb--cover > img { position: static; width: 100% !important; height: 100% !important; transform: translate(0, 0); top: 0; left: 0; -o-object-fit: cover; object-fit: cover; } .cxd-Image-origin--cover > img { width: 100% !important; height: 100% !important; -o-object-fit: cover; object-fit: cover; } } .cxd-Image-caption { font-size: var(--image-image-description-fontSize); color: var(--image-image-description-color); margin-top: var(--image-image-description-marginTop); } .cxd-Image-title { font-size: var(--image-image-normal-fontSize); color: var(--image-image-normal-color); margin-top: var(--image-image-normal-title-marginTop); } .cxd-Image-overlay { background: rgba(8, 14, 26, 0.5); position: absolute; width: 100%; height: 100%; display: none; top: 0; left: 0; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; color: #fff; } .cxd-Image-overlay > div { width: 100%; text-align: center; margin-bottom: 5px; } .cxd-Image-overlay > a { cursor: pointer; color: #fff; display: inline-block; padding: 0 5px; line-height: 1; font-size: 1rem; } .cxd-Image-overlay > a svg { width: 1rem; height: 1rem; } .cxd-Image-origin:hover .cxd-Image-overlay, .cxd-Image-thumbWrap:hover .cxd-Image-overlay { display: flex; } .cxd-ImageField--thumb { display: inline-block; position: relative; } .cxd-ImageField--thumb::before, .cxd-ImageField--thumb::after { display: table; content: ""; } .cxd-ImageField--thumb::after { clear: both; } .cxd-ImagesField { position: relative; } .cxd-ImagesField::before, .cxd-ImagesField::after { display: table; content: ""; } .cxd-ImagesField::after { clear: both; } .Image-view-icon { content: var(--image-image-normal-icon); } .cxd-InputBox { display: flex; background: var(--Form-input-bg); border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor); border-radius: var(--Form-input-borderRadius); line-height: var(--Form-input-lineHeight); padding: var(--Form-input-paddingY) var(--Form-input-paddingX); font-size: var(--Form-input-fontSize); flex-wrap: wrap; justify-content: flex-start; height: var(--input-size-default-height); } .cxd-InputBox input { flex-basis: 1.875rem; flex-grow: 1; outline: none; background: transparent; border: none; color: var(--Form-input-color); width: 100%; } .cxd-InputBox input::-moz-placeholder { color: var(--Form-input-placeholderColor); -moz-user-select: none; user-select: none; } .cxd-InputBox input::placeholder { color: var(--Form-input-placeholderColor); -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-InputBox:hover { border-color: var(--Form-input-onFocused-borderColor); } .cxd-InputBox--borderHalf { border-left-color: transparent !important; border-right-color: transparent !important; border-top-color: transparent !important; } .cxd-InputBox--borderNone { border-color: transparent !important; } .cxd-InputBox--inline { display: inline-flex; } .cxd-InputBox > input[readonly] { cursor: inherit; } .cxd-InputBox.is-error, .is-error > .cxd-InputBox { border-color: var(--Form-input-onError-borderColor); background: var(--Form-input-onError-bg); } .cxd-InputBox.is-focused { border-color: var(--Form-input-onFocused-borderColor); box-shadow: var(--Form-input-boxShadow); background: var(--Form-input-onFocused-bg); } .cxd-InputBox.is-clickable:hover { border-color: var(--Form-input-onFocused-borderColor); box-shadow: var(--Form-input-boxShadow); cursor: pointer; } .cxd-InputBox.is-error.is-focused { border-color: var(--Form-input-onError-borderColor); } .cxd-InputBox.is-disabled { color: var(--text--muted-color); background: var(--Form-input-onDisabled-bg); border-color: var(--Form-input-onDisabled-borderColor); } .cxd-InputBox-clear { visibility: hidden; padding: var(--Form-input-clearBtn-padding); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: auto; text-decoration: none; } .cxd-InputBox-clear svg { fill: var(--Form-input-clearBtn-color); width: var(--Form-input-clearBtn-size); height: var(--Form-input-clearBtn-size); top: 0; } .cxd-InputBox-clear:hover svg { fill: var(--Form-input-clearBtn-color-onHover); } .cxd-InputBox-clear:active svg { fill: var(--Form-input-clearBtn-color-onActive); } .cxd-InputBox.is-focused .cxd-InputBox-clear, .cxd-InputBox:hover .cxd-InputBox-clear { visibility: visible; } .cxd-InputBox > svg { display: inline-block; width: 14px; color: var(--icon-color); margin-top: 0.125rem; } .cxd-InputBox > a { cursor: pointer; } .cxd-InputBox-caret { transition: transform var(--animation-duration) ease-out; margin: 5px; display: flex; color: var(--Form-select-caret-iconColor); transform: rotate(90deg); } .cxd-InputBox-caret:hover { color: var(--Form-select-caret-onHover-iconColor); } .cxd-InputBox-caret > svg { width: 0.625rem; height: 0.625rem; top: 0; } .cxd-InputBox.is-active .cxd-InputBox-caret { transform: rotate(270deg); } .cxd-InputBox.is-mobile { border: none; border-radius: 0; position: relative; } .cxd-InputBox.is-mobile::before { position: absolute; box-sizing: border-box; content: " "; pointer-events: none; right: 0; bottom: 0; left: 0; border-bottom: 1px solid var(--Form-input-borderColor); transform: scaleY(0.5); } .cxd-InputBox.is-mobile.is-error, .is-error > .cxd-InputBox.is-mobile { border-bottom-color: var(--Form-input-onError-borderColor); } .cxd-InputBox.is-mobile.is-focused { border-bottom-color: var(--Form-input-onFocused-borderColor); } .cxd-InputBox.is-mobile.is-error.is-focused { border-bottom-color: var(--Form-input-onError-borderColor); } .cxd-InputBox.is-mobile.is-disabled { border-bottom-color: var(--Form-input-onDisabled-borderColor); } .cxd-JSONSchemaMember { display: flex; flex-direction: row; flex-wrap: nowrap; gap: var(--gap-sm); } .cxd-JSONSchemaMember-key { min-width: 80px; max-width: 150px; flex: 1; display: flex; } .cxd-JSONSchemaMember-key > span { display: flex; background: var(--Form-input-bg); border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor); border-radius: var(--Form-input-borderRadius); line-height: var(--Form-input-lineHeight); padding: var(--Form-input-paddingY) var(--Form-input-paddingX); font-size: var(--Form-input-fontSize); flex-wrap: wrap; justify-content: flex-start; align-items: center; color: var(--Form-input-color); } .cxd-JSONSchemaMember-key > * { min-width: 0; min-height: 0; flex: 1; } .cxd-JSONSchemaMember-key.is-mobile > span { border-radius: 0; border: none; border-bottom: var(--Form-input-borderWidth) solid var(--Form-input-borderColor); } .cxd-JSONSchemaMember-key.is-mobile .cxd-InputBox { height: 100%; line-height: 1; } .cxd-JSONSchemaMember-key.is-mobile .cxd-InputBox > .cxd-InputBox-caret svg { top: 0.125em; } .cxd-JSONSchemaMember-value { min-width: 0; min-height: 0; flex: 1; margin-left: auto; display: flex; gap: var(--gap-sm); } .cxd-JSONSchemaMember-value > a { display: inline-block; } .cxd-JSONSchemaMember-value > div { min-width: 0; min-height: 0; flex: 1; flex-wrap: nowrap; } .cxd-JSONSchemaMember + .cxd-JSONSchemaMember { margin-top: var(--gap-sm); } .cxd-JSONSchemaObject-caret { display: inline-block; height: 1.5rem; text-align: center; line-height: 1.5rem; vertical-align: middle; cursor: pointer; transform: rotate(0deg); transition: transform var(--animation-duration); color: var(--icon-color); margin-top: calc((var(--Form-input-height) - var(--Switch-height)) / 2); transform: rotate(90deg); } .cxd-JSONSchemaObject-caret > svg { width: 10px; height: 10px; top: 0; } .cxd-JSONSchemaObject-caret.is-collapsed { transform: rotate(0deg); } .cxd-JSONSchemaObject.is-expanded { position: relative; margin-left: 1.25rem; } .cxd-JSONSchemaObject.is-expanded:before { width: 1px; content: ""; display: block; position: absolute; top: 30px; bottom: 10px; left: -33px; border-left: dashed 1px var(--icon-color); } .cxd-JSONSchemaObject.is-expanded .cxd-JSONSchemaMember { position: relative; } .cxd-JSONSchemaObject.is-expanded .cxd-JSONSchemaMember:before { height: 1px; content: ""; display: block; position: absolute; top: 17px; width: 25px; left: -33px; border-top: dashed 1px var(--icon-color); } .cxd-JSONSchemaObject.is-expanded .cxd-JSONSchemaMember:first-child:before { left: -20px; width: 12px; } .cxd-JSONSchemaObject.is-expanded > button { position: relative; } .cxd-JSONSchemaObject.is-expanded > button:before { height: 1px; content: ""; display: block; position: absolute; top: 10px; width: 25px; left: -33px; border-top: dashed 1px var(--icon-color); } .cxd-JSONSchemaObject.is-mobile .cxd-Number { border-radius: 0; position: relative; } .cxd-JSONSchemaObject.is-mobile .cxd-Number::before { position: absolute; box-sizing: border-box; content: " "; pointer-events: none; right: 0; bottom: 0; left: 0; border-bottom: 1px solid var(--Form-input-borderColor); transform: scaleY(0.5); } .cxd-SchemaEditorProps { width: 100%; } .cxd-SchemaEditorProps > button { margin-top: 7px; } .cxd-SchemaEditorProps-placeholder { color: var(--text--muted-color); } .cxd-SchemaEditorProps--depth { position: relative; margin-left: 2.5rem; } .cxd-SchemaEditorProps--depth:before { width: 1px; content: ""; display: block; position: absolute; top: -10px; bottom: 10px; left: -35px; border-left: dashed 1px var(--icon-color); } .cxd-SchemaEditorProps--depth .cxd-SchemaEditorItem:before { height: 1px; content: ""; display: block; position: absolute; top: 17px; width: 25px; left: -35px; border-top: dashed 1px var(--icon-color); } .cxd-SchemaEditorProps--depth > button { position: relative; } .cxd-SchemaEditorProps--depth > button:before { height: 1px; content: ""; display: block; position: absolute; top: 10px; width: 25px; left: -35px; border-top: dashed 1px var(--icon-color); } .cxd-SchemaEditorArrayProps:before { bottom: 15px; } .cxd-SchemaEditorItem { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap-xs); font-size: var(--fonts-size-8); align-items: stretch; position: relative; } .cxd-SchemaEditorItem--mini > button { padding: 0 4px; } .cxd-SchemaEditorItem + .cxd-SchemaEditorItem { margin-top: var(--gap-sm); } .cxd-SchemaEditorObject, .cxd-SchemaEditorArray { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap-xs); align-items: flex-start; width: 100%; } .cxd-SchemaEditor-itemsLabel { line-height: 2rem; } .cxd-SchemaEditor-caret { display: inline-block; height: 1.5rem; text-align: center; line-height: 1.5rem; vertical-align: middle; cursor: pointer; transform: rotate(0deg); transition: transform var(--animation-duration); color: var(--icon-color); margin-top: calc((var(--Form-input-height) - var(--Switch-height)) / 2); transform: rotate(90deg); } .cxd-SchemaEditor-caret > svg { width: 10px; height: 10px; top: 0; } .cxd-SchemaEditor-caret.is-collapsed { transform: rotate(0deg); } .cxd-SchemaEditor-required { padding-top: 4px; } .cxd-SchemaEditor-key, .cxd-SchemaEditor-title, .cxd-SchemaEditor-description { flex: 1; max-width: 200px; min-width: 80px; } .cxd-SchemaEditor-key > input, .cxd-SchemaEditor-title > input, .cxd-SchemaEditor-description > input { flex-basis: 0; } .cxd-SchemaEditor-info { min-width: 0; min-height: 0; display: flex; background: var(--Form-input-bg); border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor); border-radius: var(--Form-input-borderRadius); line-height: var(--Form-input-lineHeight); padding: var(--Form-input-paddingY) var(--Form-input-paddingX); font-size: var(--Form-input-fontSize); flex-wrap: wrap; justify-content: flex-start; flex: 1; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .cxd-SchemaEditor-info input { flex-basis: 1.875rem; flex-grow: 1; outline: none; background: transparent; border: none; color: var(--Form-input-color); width: 100%; } .cxd-SchemaEditor-info input::-moz-placeholder { color: var(--Form-input-placeholderColor); -moz-user-select: none; user-select: none; } .cxd-SchemaEditor-info input::placeholder { color: var(--Form-input-placeholderColor); -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-SchemaEditor-info:hover { border-color: var(--Form-input-onFocused-borderColor); } .cxd-SchemaEditor-info--borderHalf { border-left-color: transparent !important; border-right-color: transparent !important; border-top-color: transparent !important; } .cxd-SchemaEditor-info--borderNone { border-color: transparent !important; } .cxd-SchemaEditor-typeLabel { color: var(--Form-input-placeholderColor); } .cxd-ResultBox { display: flex; background: var(--Form-input-bg); border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor); border-radius: var(--Form-input-borderRadius); line-height: var(--Form-input-lineHeight); padding: var(--Form-input-paddingY) var(--Form-input-paddingX); font-size: var(--Form-input-fontSize); flex-wrap: wrap; justify-content: flex-start; flex-wrap: nowrap; padding: 0 0.75rem; min-height: var(--Form-input-height); align-items: center; border-radius: 3px; position: relative; color: var(--Form-select-color); font-size: var(--select-base-default-fontSize); font-weight: var(--select-base-default-fontWeight); border-width: var(--Form-select-borderWidth); border-style: var(--select-base-default-top-border-style) var(--select-base-default-right-border-style) var(--select-base-default-bottom-border-style) var(--select-base-default-left-border-style); border-color: var(--Form-select-borderColor); background: var(--Form-select-bg); border-radius: var(--Form-select-borderRadius); min-height: var(--Form-selectOption-height); padding: var(--select-base-default-paddingTop) var(--select-base-default-paddingRight) var(--select-base-default-paddingBottom) var(--select-base-default-paddingLeft); } .cxd-ResultBox input { flex-basis: 1.875rem; flex-grow: 1; outline: none; background: transparent; border: none; color: var(--Form-input-color); width: 100%; } .cxd-ResultBox input::-moz-placeholder { color: var(--Form-input-placeholderColor); -moz-user-select: none; user-select: none; } .cxd-ResultBox input::placeholder { color: var(--Form-input-placeholderColor); -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-ResultBox:hover { border-color: var(--Form-input-onFocused-borderColor); } .cxd-ResultBox--borderHalf { border-left-color: transparent !important; border-right-color: transparent !important; border-top-color: transparent !important; } .cxd-ResultBox--borderNone { border-color: transparent !important; } .cxd-ResultBox.is-error { border-color: var(--Form-input-onError-borderColor); background: var(--Form-input-onError-bg); } .cxd-ResultBox.is-focused, .cxd-ResultBox:focus { outline: none; background: var(--Form-select-onHover-bg); border-width: var(--select-base-hover-top-border-width) var(--select-base-hover-right-border-width) var(--select-base-hover-bottom-border-width) var(--select-base-hover-left-border-width); border-style: var(--select-base-hover-top-border-style) var(--select-base-hover-right-border-style) var(--select-base-hover-bottom-border-style) var(--select-base-hover-left-border-style); border-color: var(--select-base-hover-top-border-color) var(--select-base-hover-right-border-color) var(--select-base-hover-bottom-border-color) var(--select-base-hover-left-border-color); } .cxd-ResultBox.is-active, .cxd-ResultBox.is-opened { border-width: var(--select-base-active-top-border-width) var(--select-base-active-right-border-width) var(--select-base-active-bottom-border-width) var(--select-base-active-left-border-width); border-style: var(--select-base-active-top-border-style) var(--select-base-active-right-border-style) var(--select-base-active-bottom-border-style) var(--select-base-active-left-border-style); border-color: var(--select-base-active-top-border-color) var(--select-base-active-right-border-color) var(--select-base-active-bottom-border-color) var(--select-base-active-left-border-color); box-shadow: var(--select-base-active-shadow); background: var(--select-base-active-bg-color); } .cxd-ResultBox.is-clickable:not(.is-disabled) { cursor: pointer; } .cxd-ResultBox.is-clickable:not(.is-disabled):hover { background: var(--Form-select-onHover-bg); border-width: var(--select-base-hover-top-border-width) var(--select-base-hover-right-border-width) var(--select-base-hover-bottom-border-width) var(--select-base-hover-left-border-width); border-style: var(--select-base-hover-top-border-style) var(--select-base-hover-right-border-style) var(--select-base-hover-bottom-border-style) var(--select-base-hover-left-border-style); border-color: var(--select-base-hover-top-border-color) var(--select-base-hover-right-border-color) var(--select-base-hover-bottom-border-color) var(--select-base-hover-left-border-color); } .cxd-ResultBox.is-error.is-focused { border-color: var(--Form-input-onError-borderColor); } .cxd-ResultBox.is-disabled { color: var(--text--muted-color); pointer-events: none; border-width: var(--select-base-disabled-top-border-width) var(--select-base-disabled-right-border-width) var(--select-base-disabled-bottom-border-width) var(--select-base-disabled-left-border-width); border-style: var(--select-base-disabled-top-border-style) var(--select-base-disabled-right-border-style) var(--select-base-disabled-bottom-border-style) var(--select-base-disabled-left-border-style); border-color: var(--select-base-disabled-top-border-color) var(--select-base-disabled-right-border-color) var(--select-base-disabled-bottom-border-color) var(--select-base-disabled-left-border-color); background: var(--select-base-disabled-bg-color); } .cxd-ResultBox.is-disabled div.cxd-ResultBox-value { background: var(--TabsTransfer-border-color); } .cxd-ResultBox.is-disabled div.cxd-ResultBox-value .cxd-ResultBox-valueLabel { color: var(--Pagination-light-color); } .cxd-ResultBox-value-wrap { flex-grow: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; } .cxd-ResultBox-actions { margin-left: 0.25rem; display: flex; justify-content: center; align-items: center; } .cxd-ResultBox-singleValue { flex-grow: 1; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; word-break: break-all; } .cxd-ResultBox-pc-arrow { width: var(--gap-md); height: 100%; margin: auto 0; display: flex; align-items: center; justify-content: center; transition: transform var(--animation-duration) ease; transform: rotate(90deg); } .cxd-ResultBox-pc-arrow > svg { width: 0.625rem; height: 0.625rem; top: 0; color: var(--default-icon-color); } .cxd-ResultBox.is-opened .cxd-ResultBox-pc-arrow { transform: rotate(270deg); } .cxd-ResultBox-clear { padding: var(--Form-input-clearBtn-padding); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: auto; text-decoration: none; height: 100%; margin: auto 0; background-color: unset; } .cxd-ResultBox-clear svg { fill: var(--Form-input-clearBtn-color); width: var(--Form-input-clearBtn-size); height: var(--Form-input-clearBtn-size); top: 0; } .cxd-ResultBox-clear:hover svg { fill: var(--Form-input-clearBtn-color-onHover); } .cxd-ResultBox-clear:active svg { fill: var(--Form-input-clearBtn-color-onActive); } .cxd-ResultBox-clear-with-arrow { right: 33px; } .cxd-ResultBox-clear-wrap { line-height: 1; } .cxd-ResultBox > svg { display: inline-block; width: 0.875rem; color: var(--icon-color); } .cxd-ResultBox > a { cursor: pointer; } .cxd-ResultBox-value { background: var(--ResultBox-value-bg); color: var(--ResultBox-value-color); font-size: var(--select-multiple-fontSize); min-height: var(--ResultBox-tag-height); flex-wrap: nowrap; display: inline-flex; align-items: center; padding: var(--select-multiple-paddingTop) var(--select-multiple-paddingRight) var(--select-multiple-paddingBottom) var(--select-multiple-paddingLeft); margin: var(--select-multiple-marginTop) var(--select-multiple-marginRight) var(--ResultBox-tag-marginBottom) var(--select-multiple-marginLeft); -webkit-user-select: none; -moz-user-select: none; user-select: none; border-radius: var(--select-multiple-top-left-border-radius) var(--select-multiple-top-right-border-radius) var(--select-multiple-bottom-right-border-radius) var(--select-multiple-bottom-left-border-radius); } .cxd-ResultBox-value > a { cursor: pointer; margin-left: 0.625rem; color: var(--ResultBox-icon-color); } .cxd-ResultBox-value > a:hover { color: var(--ResultBox-icon--onHover-color); } .cxd-ResultBox-value > a > svg { width: 0.625rem; height: 0.625rem; } .cxd-ResultBox-value > a > svg.icon { top: 0; } .cxd-ResultBox-value:hover { background: var(--ResultBox-value--onHover-bg); } .cxd-ResultBox-value.is-disabled { pointer-events: none; color: var(--ResultBox-value--onDisabled-color); } .cxd-ResultBox-value.is-disabled > a { color: var(--ResultBox-icon--onDisabled-color); } .cxd-ResultBox-value.is-invalid { color: var(--Form-selectValue-onInvalid-color); } .cxd-ResultBox-valueLabel { max-width: var(--Form-valueLabel-maxWidth); overflow: hidden; vertical-align: top; text-overflow: ellipsis; white-space: nowrap; } .cxd-ResultBox-placeholder { color: var(--Form-input-placeholderColor); flex-grow: 1; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-ResultBox > input { padding-left: 8px; min-height: 24px; } .cxd-ResultBox.cxd-TransferDropDown.is-group > .cxd-TransferDropDown-icon { margin-right: var(--gap-sm); } .cxd-ResultBox.cxd-TransferDropDown.is-group > .cxd-ResultBox-placeholder { padding-left: var(--gap-sm); } .cxd-ResultBox.cxd-TransferDropDown > .cxd-ResultBox-value { background: var(--Form-select-value-bgColor); } .cxd-ResultBox.cxd-TransferDropDown > .cxd-ResultBox-value:hover { background: var(--Form-selectValue-onHover-bgColor); } .cxd-ResultBox-overflow-wrapper { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; overflow-x: hidden; overflow-y: auto; max-height: calc((var(--ResultBox-tag-height) + var(--ResultBox-tag-marginBottom)) * 5); } .cxd-ResultBox-overflow.cxd-Tooltip--dark .cxd-ResultBox-overflow-wrapper .cxd-ResultBox-value { color: var(--white); background-color: var(--Form-select-value-bgColor--dark); } .cxd-ResultBox-overflow.cxd-Tooltip--dark .cxd-ResultBox-overflow-wrapper .cxd-ResultBox-value:hover { background-color: var(--ResultBox-value--onHover-bg--dark); } .cxd-ResultBox-overflow.cxd-Tooltip--dark .cxd-ResultBox-overflow-wrapper .cxd-ResultBox-value > a { color: var(--Form-select-valueIcon-color--dark); } .cxd-ResultBox.is-mobile { min-height: calc(var(--Form-input-lineHeight) * var(--fontSizeLg)); border: none; padding: 0; font-size: var(--fontSizeLg); border: none; justify-content: flex-end; width: 100%; } .cxd-ResultBox.is-mobile.is-focused, .cxd-ResultBox.is-mobile:hover { border: none !important; } .cxd-ResultBox.is-mobile .cxd-ResultBox-value-wrap { text-align: left; } .cxd-ResultBox.is-mobile .cxd-ResultBox-clear { padding: var(--Form-input-clearBtn-padding); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: auto; text-decoration: none; width: 1.625rem; height: 1.625rem; margin: 0 -0.125rem; margin-left: auto; padding: 0.25rem; position: unset; right: 0; display: flex; align-items: center; background-color: unset; } .cxd-ResultBox.is-mobile .cxd-ResultBox-clear svg { fill: var(--Form-input-clearBtn-color); width: var(--Form-input-clearBtn-size); height: var(--Form-input-clearBtn-size); top: 0; } .cxd-ResultBox.is-mobile .cxd-ResultBox-clear:hover svg { fill: var(--Form-input-clearBtn-color-onHover); } .cxd-ResultBox.is-mobile .cxd-ResultBox-clear:active svg { fill: var(--Form-input-clearBtn-color-onActive); } .cxd-ResultBox.is-mobile .cxd-ResultBox-arrow { margin-right: var(--gap-xs); width: var(--gap-md); text-align: center; display: flex; align-items: center; justify-content: center; line-height: 1; margin-left: 4px; } .cxd-ResultBox.is-mobile .cxd-ResultBox-arrow > svg { transition: transform var(--animation-duration); display: inline-block; color: var(--Form-select-caret-iconColor); width: 10px; height: 10px; top: 0; } .cxd-SearchBox { display: inline-flex; flex-direction: row; line-height: var(--Form-input-lineHeight); font-size: var(--Form-input-fontSize); flex-wrap: nowrap; align-items: center; justify-content: flex-end; height: var(--input-size-default-height); width: 30px; padding-left: 8px; transition: all var(--animation-duration) ease-in-out; border: var(--Form-input-borderWidth) solid transparent; border-radius: var(--Form-input-borderRadius); } .cxd-SearchBox:hover { background: var(--Form-input-onHover-bg); } .cxd-SearchBox.is-active { background: var(--Form-input-bg); border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor); width: var(--SearchBox-width); position: relative; } .cxd-SearchBox.is-active > input { flex-grow: 1; } .cxd-SearchBox.is-active:hover { border-color: var(--SearchBox-hover-color); } .cxd-SearchBox.is-active.is-focused { border-color: var(--SearchBox-focus-color); } .cxd-SearchBox-searchBtn { display: inline-block; padding: 0.3125rem 0.625rem; } .cxd-SearchBox-searchBtn--loading { display: inline-flex; align-items: center; } .cxd-SearchBox-activeBtn, .cxd-SearchBox-cancelBtn { margin-right: 8px; } .cxd-SearchBox-activeBtn, .cxd-SearchBox-searchBtn, .cxd-SearchBox-cancelBtn { cursor: pointer; color: var(--SearchBox-search-icon-color); } .cxd-SearchBox-activeBtn svg, .cxd-SearchBox-searchBtn svg, .cxd-SearchBox-cancelBtn svg { top: 0.125rem; } .cxd-SearchBox-activeBtn:hover, .cxd-SearchBox-searchBtn:hover, .cxd-SearchBox-cancelBtn:hover { color: var(--icon-onHover-color); } .cxd-SearchBox.is-disabled .cxd-SearchBox-activeBtn, .cxd-SearchBox.is-disabled .cxd-SearchBox-searchBtn, .cxd-SearchBox.is-disabled .cxd-SearchBox-cancelBtn { color: var(--SearchBox-search-btn-color--disabled); pointer-events: none; } .cxd-SearchBox.is-disabled { background-color: var(--SearchBox-disabled-color); cursor: not-allowed; } .cxd-SearchBox.is-disabled:hover { border-color: var(--Form-input-borderColor); } .cxd-SearchBox.is-disabled > input { cursor: not-allowed; } .cxd-SearchBox > input { outline: none; border: none; background: transparent; color: var(--Form-input-color); width: 0; height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize)); } .cxd-SearchBox > input::-moz-placeholder { color: var(--Form-input-placeholderColor); -moz-user-select: none; user-select: none; } .cxd-SearchBox > input::placeholder { color: var(--Form-input-placeholderColor); -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-SearchBox-clearable { display: flex; width: var(--SearchBox-clearable-icon-size); height: var(--SearchBox-clearable-icon-size); color: var(--SearchBox-clearable-icon-color); align-items: center; justify-content: center; cursor: pointer; } .cxd-SearchBox-clearable .icon { top: 0; } .cxd-SearchBox-clearable:hover { color: var(--Form-input-clearBtn-color-onHover); } .cxd-SearchBox--enhance.is-active .cxd-SearchBox-searchBtn { color: var(--SearchBox-enhonce-icon-color); background: var(--SearchBox-hover-color); position: absolute; top: -0.0625rem; bottom: -0.0625rem; right: -0.0625rem; border-radius: 0 var(--borderRadius) var(--borderRadius) 0; } .cxd-SearchBox--enhance.is-active .cxd-SearchBox-searchBtn svg { top: 0.125rem; } .cxd-SearchBox--enhance.is-active .cxd-SearchBox-searchBtn:hover { background: var(--button-primary-hover-bg-color); } .cxd-SearchBox--enhance .cxd-SearchBox-clearable { margin-right: var(--SearchBox-enhonce-clearable-gap); } .cxd-SearchBox--enhance.is-active.is-disabled .cxd-SearchBox-searchBtn { background: var(--SearchBox-enhonce-disabled-color); color: var(--SearchBox-enhonce-disabled-search-color); } .cxd-SearchBox.is-mobile { border-radius: 0; border: none; border-bottom: var(--borderWidth) solid var(--borderColor); } .cxd-SearchBox-history > .is-history { width: 100%; } .cxd-SearchBox-history .cxd-SearchBox-history-dropdown { position: absolute; left: 0; z-index: 998; padding: var(--gap-sm) 0; width: 100%; max-width: var(--SearchBox-history-dropdown-maxWidth); min-height: 4.5rem; max-height: var(--SearchBox-history-dropdown-maxHeight); background: var(--white); border: var(--borderWidth) solid var(--borderColor); border-top: none; border-radius: var(--borderRadius); box-shadow: var(--boxShadow); display: none; } .cxd-SearchBox-history .cxd-SearchBox-history-dropdown.is-active { display: block; } .cxd-SearchBox-history .cxd-SearchBox-history-dropdown header { display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; padding: 0 var(--gap-md); margin-bottom: 0.625rem; } .cxd-SearchBox-history .cxd-SearchBox-history-dropdown header h4 { font-size: var(--fontSizeBase); height: 1.5rem; line-height: 1.5rem; font-weight: bold; margin: 0; } .cxd-SearchBox-history .cxd-SearchBox-history-dropdown header a { display: inline-block; font-size: var(--fontSizeSm); cursor: pointer; padding: 0; } .cxd-SearchBox-history .cxd-SearchBox-history-content { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; padding: 0 var(--gap-md); overflow-x: hidden; overflow-y: auto; max-height: calc(var(--SearchBox-history-dropdown-maxHeight) - 38px - var(--gap-sm) * 2); } .cxd-SearchBox-history .cxd-SearchBox-history-tag { display: inlin-flex; height: var(--Tag-height); padding: 0 var(--gap-sm); flex-flow: row nowrap; justify-content: center; align-items: center; font-size: var(--Tag-content-fontSize); max-width: 160px; border-radius: var(--Tag-borderRadius); background-color: var(--Tag-default-color); color: var(--Tag-fontColor); margin-bottom: var(--gap-sm); margin-right: var(--gap-sm); max-width: 96px; cursor: pointer; } .cxd-SearchBox-history .cxd-SearchBox-history-tag-text { display: inline-block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; line-height: 24px; } .cxd-SearchBox-history .cxd-SearchBox-history-tag-close { margin-left: var(--gap-sm); margin-right: var(--gap-xs); cursor: pointer; } .cxd-SearchBox-history .cxd-SearchBox-history-tag-close i { font-size: 0.5rem; } .cxd-SearchBox-history .cxd-SearchBox-history-tag-close .icon { width: 0.5rem; height: 0.5rem; position: inherit; } .cxd-SearchBox-history .cxd-SearchBox-history-tag-close:hover { opacity: 0.7; } .cxd-SearchBox-history .cxd-SearchBox-history-tag-close:active { opacity: 0.3; } .cxd-ListMenu { background: var(--ListMenu-item-bg); min-width: 12.5rem; border: var(--ListMenu-borderWidth) solid var(--ListMenu-bordrColor); border-radius: var(--ListMenu-borderRadius); } .cxd-ListMenu-groupLabel { font-size: var(--fontSizeXs); color: var(--text--muted-color); padding: calc((var(--ListMenu-item-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) - var(--gap-sm)) / 2) 0 0 calc(var(--Form-select-paddingX) - var(--gap-xs)); } .cxd-ListMenu-group:not(:first-child) > .cxd-ListMenu-groupLabel { border-top: 0.0625rem solid var(--ListMenu-divider-color); } .cxd-ListMenu-item { display: flex; min-height: var(--ListMenu-item-height); color: var(--ListMenu-item-color); line-height: var(--Form-input-lineHeight); font-size: var(--Form-input-fontSize); cursor: pointer; padding: calc((var(--ListMenu-item-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize)) / 2) var(--Form-select-paddingX); } .cxd-ListMenu-item.is-active { color: var(--ListMenu-item--onActive-color); background: var(--ListMenu-item--onActive-bg); } .cxd-ListMenu-item.is-highlight { color: var(--ListMenu-item--onHover-color); background: var(--ListMenu-item--onHover-bg); } .cxd-ListMenu-item.is-disabled { color: var(--ListMenu-item--onDisabled-color); background: var(--ListMenu-item--onDisabled-bg); } .cxd-ListMenu-placeholder { display: block; min-height: var(--ListMenu-item-height); color: var(--text--muted-color); line-height: var(--Form-input-lineHeight); font-size: var(--Form-input-fontSize); cursor: pointer; padding: calc((var(--ListMenu-item-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize)) / 2) var(--Form-select-paddingX); } .cxd-ListMenu.is-mobile { display: flex; flex-wrap: wrap; } .cxd-ListMenu.is-mobile .cxd-ListMenu-item { width: calc((100vw - var(--ListMenu-item-mobile-margin) * 7) / 3); display: inline-flex; background: var(--ListMenu-item-mobile-bg); margin: var(--ListMenu-item-mobile-margin); } .cxd-ListMenu.is-mobile .cxd-ListMenu-item.is-active { background: var(--ListMenu-item-mobile-active-bg); } .cxd-ListMenu.is-mobile .cxd-ListMenu-item .cxd-ListMenu-itemLabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cxd-ListMenu-add-wrap { display: flex; align-items: center; margin: var(--ListMenu-item-mobile-margin); text-align: left; } .cxd-ListMenu-add-wrap .cxd-ResultBox { width: 100%; } .cxd-ListMenu-add-wrap input { width: 100%; padding: var(--Form-item-mobile-gap) 0; border-bottom: 1px solid var(--borderColor); border-radius: 0; } .cxd-PopOver > .cxd-ListMenu { border-color: var(--listMenu--onActive-borderColor); } .cxd-Log { position: relative; } .cxd-Log-body { background: var(--Log-bg); color: var(--Log-color); padding: var(--Log-padding); overflow-y: auto; font-family: var(--fontFamilyMonospace); } .cxd-Log-line { padding: var(--Log-line-padding); white-space: pre-wrap; word-wrap: break-word; } .cxd-Log-line code { color: inherit; background: inherit; } .cxd-Log-line:hover { background: var(--Log-line--onHover-bg); } .cxd-Log-line-number { color: #999; font-style: italic; margin-right: 5px; } .cxd-Log-line-highlight { background: #ffffb6; display: inline-block; color: #000; } .cxd-Log-operation { position: relative; background: rgba(28, 28, 28, 0.5); } .cxd-Log-operation > a { display: inline-flex; flex-direction: row; line-height: var(--Form-input-lineHeight); font-size: var(--Form-input-fontSize); flex-wrap: nowrap; align-items: center; justify-content: flex-end; height: 30px; width: 30px; padding-left: 8px; transition: all var(--animation-duration) ease-in-out; border: var(--Form-input-borderWidth) solid transparent; border-radius: var(--Form-input-borderRadius); overflow: hidden; height: 30px; width: 30px; } .cxd-Log-operation a { color: #000; } .cxd-Log-operation > a:hover { background: var(--Form-input-onHover-bg); color: var(--link-color); } .cxd-Log-operation > a > svg { margin-right: 8px; } .cxd-Log-operation > a.is-disabled { cursor: not-allowed; color: #6b7280; } .cxd-Log-operation > a.is-disabled:hover { cursor: not-allowed; background: transparent; color: #6b7280; } .cxd-Log .ansi-bold { font-weight: 700; } .cxd-Log .ansi-italic { font-style: italic; } .cxd-Log .ansi-underline { text-decoration: underline; } .cxd-Log .ansi-black-fg, .cxd-Log .ansi-bright-black-fg { color: #4e4e4e; } .cxd-Log .ansi-red-fg, .cxd-Log .ansi-bright-red-fg { color: #ff6c60; } .cxd-Log .ansi-green-fg, .cxd-Log .ansi-bright-green-fg { color: #0a0; } .cxd-Log .ansi-yellow-fg, .cxd-Log .ansi-bright-yellow-fg { color: #ffffb6; } .cxd-Log .ansi-blue-fg, .cxd-Log .ansi-bright-blue-fg { color: #96cbfe; } .cxd-Log .ansi-magenta-fg, .cxd-Log .ansi-bright-magenta-fg { color: #ff73fd; } .cxd-Log .ansi-cyan-fg, .cxd-Log .ansi-bright-cyan-fg { color: #5ff; } .cxd-Log .ansi-white-fg, .cxd-Log .ansi-bright-white-fg { color: #eee; } .cxd-Log .ansi-grey-fg, .cxd-Log .ansi-bright-grey-fg { color: #969696; } .cxd-Log .ansi-black-bg { background-color: #4e4e4e; } .cxd-Log .ansi-red-bg { background-color: #ff6c60; } .cxd-Log .ansi-green-bg { background-color: #0a0; } .cxd-Log .ansi-yellow-bg { background-color: #ffffb6; } .cxd-Log .ansi-blue-bg { background-color: #96cbfe; } .cxd-Log .ansi-magenta-bg { background-color: #ff73fd; } .cxd-Log .ansi-cyan-bg { background-color: #0aa; } .cxd-Log .ansi-white-bg { background-color: #eee; } .cxd-JsonField-nodeValue { white-space: normal; word-break: break-all; overflow-wrap: break-word; } .cxd-Icon { height: var(--fontSizeBase); vertical-align: middle; } .cxd-Steps { display: flex; list-style: none; padding: 0; } .cxd-Steps .cxd-StepsItem { min-width: 0; min-height: 0; flex: 1; overflow: hidden; padding: 0 0.5rem; height: auto; line-height: 1.375rem; } .cxd-Steps .cxd-StepsItem-container { position: relative; } .cxd-Steps .cxd-StepsItem-containerIcon { vertical-align: top; display: inline-flex; align-items: center; padding-right: var(--steps-base-icon-paddingRight); height: 1.5rem; } .cxd-Steps .cxd-StepsItem-containerIcon .cxd-StepsItem-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--steps-base-icon-size); height: var(--steps-base-icon-size); border-radius: 50%; font-size: var(--Steps-icon-fontsize); } .cxd-Steps .cxd-StepsItem-containerIcon .cxd-StepsItem-icon .icon { width: 0.75rem; height: 0.75rem; position: relative; top: 0; } .cxd-Steps .cxd-StepsItem-containerWrapper { display: inline-block; position: relative; } .cxd-Steps .cxd-StepsItem-containerWrapper .cxd-StepsItem-body .cxd-StepsItem-title { font-size: var(--Steps-title-fontsize); color: var(--Steps-title-color); font-weight: var(--steps-base-fontWeight); padding-right: var(--steps-base-title-paddingRight); position: relative; display: inline-flex; } .cxd-Steps .cxd-StepsItem-containerWrapper .cxd-StepsItem-body .cxd-StepsItem-title > span { display: inline-block; } .cxd-Steps .cxd-StepsItem-containerWrapper .cxd-StepsItem-body .cxd-StepsItem-title:after { content: ""; position: absolute; right: 0; top: 0.6875rem; height: 1px; left: 100%; width: 9999px; padding-right: var(--steps-base-title-paddingRight); background-color: var(--Steps-line-bg); } .cxd-Steps .cxd-StepsItem-containerWrapper .cxd-StepsItem-body .cxd-StepsItem-title.is-success:after { background-color: var(--Steps-line-success-bg); } .cxd-Steps .cxd-StepsItem-containerWrapper .cxd-StepsItem-body .cxd-StepsItem-ellText { max-width: 9.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cxd-Steps .cxd-StepsItem-containerWrapper .cxd-StepsItem-body .cxd-StepsItem-subTitle { padding-left: var(--steps-base-subTitle-paddingLeft); font-size: var(--Steps-sub-title-fontsize); color: var(--Steps-sub-title-color); font-weight: var(--steps-base-subTitle-fontWeight); } .cxd-Steps .cxd-StepsItem-containerWrapper .cxd-StepsItem-body .cxd-StepsItem-description { max-width: 8.75rem; white-space: nowrap; position: relative; line-height: 1.25rem; } .cxd-Steps .cxd-StepsItem-containerWrapper .cxd-StepsItem-body .cxd-StepsItem-description > span { color: var(--Steps-description-title-color); font-size: var(--Steps-description-title-fontsize); font-weight: var(--steps-base-des-fontWeight); } .cxd-Steps .cxd-StepsItem:last-child { flex: none; } .cxd-Steps .cxd-StepsItem:last-child .cxd-StepsItem-title:after { display: none; } .cxd-Steps--vertical { flex-direction: column; } .cxd-Steps--vertical .cxd-StepsItem { padding: 0.3125rem 0; min-height: 75px; overflow: hidden !important; } .cxd-Steps--vertical .cxd-StepsItem-containerIcon { position: relative; } .cxd-Steps--vertical .cxd-StepsItem-containerIcon:after { content: ""; position: absolute; left: 36%; transform: translateX(-50%); right: 0; top: 1.75rem; height: 9999px; width: 1px; background-color: var(--Steps-line-bg); } .cxd-Steps--vertical .cxd-StepsItem-containerWrapper > .cxd-StepsItem-body > .cxd-StepsItem-title:after { display: none; } .cxd-Steps--vertical .cxd-StepsItem-containerTail:after { display: none !important; } .cxd-Steps--vertical .cxd-StepsItem:last-child { flex: none; } .cxd-Steps--vertical .cxd-StepsItem:last-child .cxd-StepsItem-containerIcon:after { display: none; } .cxd-Steps--vertical .cxd-StepsItem-ProgressDot { margin-left: 10px; } .cxd-Steps--vertical .cxd-StepsItem-ProgressDot .cxd-StepsItem-container { flex-direction: row; } .cxd-Steps--vertical .cxd-StepsItem-ProgressDot .cxd-StepsItem-containerTail { display: none; } .cxd-Steps--vertical .cxd-StepsItem-ProgressDot .cxd-StepsItem-containerWrapper { width: 25rem; } .cxd-Steps--vertical .cxd-StepsItem-ProgressDot .cxd-StepsItem-containerProgressDot { margin-left: 0px; margin-top: 0.625rem; } .cxd-Steps--vertical .cxd-StepsItem-ProgressDot .cxd-StepsItem-containerProgressDot:after { content: ""; position: absolute; display: inline-block; top: 1.75rem; width: 1px; left: 3px; height: 9999px; background-color: var(--Steps-line-bg); } .cxd-Steps--vertical .cxd-StepsItem-ProgressDot .cxd-StepsItem-title > span { display: inline-block !important; } .cxd-Steps--vertical .cxd-StepsItem-ProgressDot .cxd-StepsItem-vertical-ProgressDot { right: 0.625rem; } .cxd-Steps--vertical .cxd-StepsItem-ProgressDot .cxd-StepsItem-body { text-align: left !important; } .cxd-Steps--vertical .cxd-StepsItem-ProgressDot:last-child .cxd-StepsItem-containerProgressDot:after { display: none; } .cxd-Steps--vertical .is-finish .cxd-StepsItem-containerProgressDot:after { background: var(--Steps-status-success); } .cxd-Steps--Placement-vertical { display: flex; list-style: none; padding: 0; } .cxd-Steps--Placement-vertical .cxd-StepsItem { min-width: 0; min-height: 0; flex: 1; padding: 0; overflow: visible; } .cxd-Steps--Placement-vertical .cxd-StepsItem-container { display: flex; flex-direction: column; justify-content: flex-start; } .cxd-Steps--Placement-vertical .cxd-StepsItem-containerTail:after { content: ""; position: absolute; display: inline-block; top: 0.75rem; height: 1px; left: 8.125rem; width: calc(100% - 55px); background-color: var(--Steps-line-bg); } .cxd-Steps--Placement-vertical .cxd-StepsItem-containerIcon { margin-left: 5.625rem; left: 0.75rem; } .cxd-Steps--Placement-vertical .cxd-StepsItem-containerWrapper { width: 12.5rem; } .cxd-Steps--Placement-vertical .cxd-StepsItem-containerWrapper .cxd-StepsItem-body { text-align: center; } .cxd-Steps--Placement-vertical .cxd-StepsItem-containerWrapper .cxd-StepsItem-body .cxd-StepsItem-title { padding: 0 0.625rem; flex-direction: column; width: 100%; } .cxd-Steps--Placement-vertical .cxd-StepsItem-containerWrapper .cxd-StepsItem-body .cxd-StepsItem-title > span { display: block; position: relative; left: 0.75rem; } .cxd-Steps--Placement-vertical .cxd-StepsItem-containerWrapper .cxd-StepsItem-body .cxd-StepsItem-title .cxd-StepsItem-subTitle { word-break: break-all; padding: 0 0.625rem; position: relative; left: 0.625rem; } .cxd-Steps--Placement-vertical .cxd-StepsItem-containerWrapper .cxd-StepsItem-body .cxd-StepsItem-title:after { display: none; } .cxd-Steps--Placement-vertical .cxd-StepsItem-containerWrapper .cxd-StepsItem-body .cxd-StepsItem-description { min-width: 12.5rem; word-break: break-all; padding: 0 1.25rem; } .cxd-Steps--Placement-vertical .cxd-StepsItem-containerWrapper .cxd-StepsItem-body .cxd-StepsItem-title.is-success:after { background-color: var(--Steps-line-success-bg); } .cxd-Steps--Placement-vertical .cxd-StepsItem:last-child .cxd-StepsItem-containerTail:after { display: none; } .cxd-Steps--Placement-vertical .is-finish .cxd-StepsItem-containerTail:after { background: var(--Steps-status-success); } .cxd-Steps--ProgressDot .cxd-StepsItem-containerTail:after { left: 6.875rem; width: calc(100% - 20px); } .cxd-Steps--ProgressDot .cxd-StepsItem-containerProgressDot { margin-top: 0.5625rem; margin-bottom: 0.3125rem; width: var(--steps-dot-icon-size); height: var(--steps-dot-icon-size); margin-left: 6rem; border: 1px solid var(--steps-dot-process-bg-color); border-radius: 100%; background: var(--steps-dot-finish-bg-color); } .cxd-Steps--ProgressDot .is-finish .cxd-StepsItem-containerTail:after { background: var(--Steps-line-success-bg); } .cxd-Steps--ProgressDot .is-wait .cxd-StepsItem-containerProgressDot { background: var(--steps-dot-wait-bg-color); border: 1px solid var(--steps-dot-wait-bg-color); } .cxd-Steps--ProgressDot .is-error .cxd-StepsItem-containerProgressDot { background: var(--steps-dot-error-bg-color); border: 1px solid var(--steps-dot-error-bg-color); } .cxd-Steps--ProgressDot .is-process .cxd-StepsItem-containerProgressDot { border: 1px solid var(--steps-dot-process-bg-color); background: var(--steps-dot-process-bg-color); } .cxd-Steps .cxd-StepsItem.is-wait .cxd-StepsItem-icon { background-color: var(--steps-status-wait-bg-color); color: var(--Steps-bg); border: 1px solid var(--Steps-bg); } .cxd-Steps .cxd-StepsItem.is-wait .cxd-StepsItem-title, .cxd-Steps .cxd-StepsItem.is-wait .cxd-StepsItem-subTitle, .cxd-Steps .cxd-StepsItem.is-wait .cxd-StepsItem-description { color: var(--Steps-status-wait); } .cxd-Steps .cxd-StepsItem.is-error .cxd-StepsItem-icon { background-color: var(--Steps-status-error); color: var(--steps-status-error-color); } .cxd-Steps .cxd-StepsItem.is-finish .cxd-StepsItem-icon { background-color: var(--Steps-status-success); color: var(--steps-status-finish-color); } .cxd-Steps .cxd-StepsItem.is-process .cxd-StepsItem-icon { background-color: var(--steps-status-process-bg-color); color: var(--steps-status-process-color); } .cxd-Steps--simple { justify-content: center; } .cxd-Steps--simple .cxd-StepsItem { flex: none; } .cxd-Steps--simple .cxd-StepsItem-containerWrapper .cxd-StepsItem-body .cxd-StepsItem-title:after { display: none; } .cxd-Steps--simple .cxd-StepsItem-icon-line { display: inline-block; vertical-align: top; margin-left: 0.5rem; } .cxd-Steps--simple .cxd-StepsItem-icon-line svg { width: var(--steps-simple-icon-size); height: var(--steps-simple-icon-size); font-size: var(--steps-simple-icon-size); } .cxd-Steps--simple .StepsItem-icon-line { content: var(--steps-simple-icon); } .cxd-Steps .cxd-StepsItem.is-clickable .cxd-StepsItem-containerProgressDot, .cxd-Steps .cxd-StepsItem.is-clickable .cxd-StepsItem-containerIcon, .cxd-Steps .cxd-StepsItem.is-clickable .cxd-StepsItem-containerWrapper { cursor: pointer; } .cxd-Steps-mobile.cxd-Steps--horizontal .cxd-StepsItem-containerWrapper .cxd-StepsItem-body .cxd-StepsItem-title::after { display: none !important; } .cxd-Steps-mobile.cxd-Steps--horizontal .cxd-StepsItem-containerWrapper .cxd-StepsItem-body .cxd-StepsItem-title .cxd-StepsItem-subTitle { padding-left: 0.3125rem; } .cxd-Steps-mobile.cxd-Steps--horizontal .cxd-StepsItem-containerIcon { position: relative; display: block; } .cxd-Steps-mobile.cxd-Steps--horizontal .cxd-StepsItem-containerIcon:after { content: ""; position: absolute; right: 0; top: 0.9375rem; height: 1px; left: 2.5rem; width: 99999px; background-color: var(--Steps-line-bg); } .cxd-Steps-mobile.cxd-Steps--horizontal .cxd-StepsItem-containerIcon.is-success:after { background-color: var(--Steps-line-success-bg); } .cxd-Steps-mobile.cxd-Steps--horizontal .cxd-StepsItem:last-child { min-width: 0; min-height: 0; flex: 1; } .cxd-Steps-mobile.cxd-Steps--horizontal .cxd-StepsItem:last-child .cxd-StepsItem-containerIcon:after { display: none !important; } .cxd-Portlet { border: var(--Portlet-borderWidth) var(--Portlet-borderStyle) var(--Portlet-borderColor); border-radius: var(--Portlet-borderRadius); padding: var(--gap-base); } .cxd-Portlet-tab.unactive-select .is-active a:first-child, .cxd-Portlet-tab.unactive-select .is-active:hover > a:first-child, .cxd-Portlet-tab.unactive-select .is-active > a:first-child:focus { border: none !important; color: inherit !important; cursor: auto !important; } .cxd-Portlet-tab.no-divider .cxd-Tabs-links { border-bottom: none; } .cxd-Portlet .cxd-Tabs-pane { padding: unset; } .cxd-Portlet-toolbar { display: inline-flex; float: right; justify-content: flex-end; } .cxd-Portlet-toolbar .cxd-Button { margin-left: calc(var(--gap-xs)); } .cxd-Portlet-header-desc { height: 100%; overflow: hidden; position: relative; margin-left: var(--gap-base); } .cxd-Portlet.no-header .cxd-Portlet-tab .cxd-Tabs-links { display: none; } .u-hairline::after { position: absolute; box-sizing: border-box; content: " "; pointer-events: none; top: -50%; right: -50%; bottom: -50%; left: -50%; border: 0 solid var(--borderColorLight); z-index: 1; transform: scale(0.5); } .cxd-GridNav { display: flex; flex-wrap: wrap; } .cxd-GridNav-top { position: relative; } .cxd-GridNav-top::after { border-top-width: 0.0625rem; } .cxd-GridNavItem { position: relative; box-sizing: border-box; } .cxd-GridNavItem--square { height: 0; position: relative; } .cxd-GridNavItem-icon { width: var(--rv-grid-item-icon-size); } .cxd-GridNavItem-text { color: var(--text-color); font-size: var(--fontSizeSm); line-height: 1.5; word-break: break-all; flex-shrink: 0; } .cxd-GridNavItem-icon + .cxd-GridNavItem-text { margin-top: 0.5rem; } .cxd-GridNavItem-image { display: inline-block; } .cxd-GridNavItem-image svg, .cxd-GridNavItem-image img { max-width: 100%; display: block; width: 60%; margin: 0 auto; } .cxd-GridNavItem-content { display: flex; flex-direction: column; box-sizing: border-box; height: 100%; padding: var(--gap-md) var(--gap-sm); background-color: var(--white); position: relative; } .cxd-GridNavItem-content .cxd-Badge-text { z-index: 10; } .cxd-GridNavItem-content--border::after { border-width: 0 var(--borderWidth) var(--borderWidth) 0; } .cxd-GridNavItem-content--square { position: absolute; top: 0; right: 0; left: 0; } .cxd-GridNavItem-content--center { align-items: center; justify-content: center; } .cxd-GridNavItem-content--horizontal { flex-direction: row; } .cxd-GridNavItem-content--horizontal .cxd-GridNavItem-text { margin: 0 0 0 var(--gap-sm); } .cxd-GridNavItem-content--reverse { flex-direction: column-reverse; } .cxd-GridNavItem-content--reverse .cxd-GridNavItem-text { margin: 0 0 var(--gap-sm); } .cxd-GridNavItem-content--horizontal .cxd-GridNavItem-content--reverse { flex-direction: row-reverse; } .cxd-GridNavItem-content--horizontal .cxd-GridNavItem-content--reverse .cxd-GridNavItem-text { margin: 0 var(--gap-sm) 0 0; } .cxd-GridNavItem-content--surround::after { border-width: var(--borderWidth); } .cxd-GridNavItem-content--clickable { cursor: pointer; } fieldset.cxd-Collapse--lg, fieldset.cxd-Collapse--md, fieldset.cxd-Collapse--base, fieldset.cxd-Collapse--sm, fieldset.cxd-Collapse--xs { position: relative; } fieldset.cxd-Collapse--lg:after, fieldset.cxd-Collapse--md:after, fieldset.cxd-Collapse--base:after, fieldset.cxd-Collapse--sm:after, fieldset.cxd-Collapse--xs:after { content: ""; pointer-events: none; border: 1px solid var(--borderColor); position: absolute; z-index: 0; top: 11px; left: 0; bottom: 0; right: 0; } fieldset.cxd-Collapse--lg > legend, fieldset.cxd-Collapse--md > legend, fieldset.cxd-Collapse--base > legend, fieldset.cxd-Collapse--sm > legend, fieldset.cxd-Collapse--xs > legend { position: absolute; top: 0; left: 0; display: inline-block; width: auto; z-index: 1; background: var(--Fieldset-legend-bgColor); } fieldset.cxd-Collapse--lg > legend.cxd-Collapse-header.is-mobile, fieldset.cxd-Collapse--md > legend.cxd-Collapse-header.is-mobile, fieldset.cxd-Collapse--base > legend.cxd-Collapse-header.is-mobile, fieldset.cxd-Collapse--sm > legend.cxd-Collapse-header.is-mobile, fieldset.cxd-Collapse--xs > legend.cxd-Collapse-header.is-mobile { position: absolute; } fieldset.cxd-Collapse--lg .collapse, fieldset.cxd-Collapse--md .collapse, fieldset.cxd-Collapse--base .collapse, fieldset.cxd-Collapse--sm .collapse, fieldset.cxd-Collapse--xs .collapse { position: relative; } fieldset.cxd-Collapse { border: none; } fieldset.cxd-Collapse > legend { border-left: var(--fieldSet-legend-border-color) var(--fieldSet-legend-border-width) solid; height: var(--fieldSet-legend-height); line-height: var(--fieldSet-legend-height); margin: var(--fieldSet-legend-marginTop) var(--fieldSet-legend-marginRight) var(--fieldSet-legend-marginBottom) var(--fieldSet-legend-marginLeft); padding: var(--fieldSet-legend-paddingTop) var(--fieldSet-legend-paddingRight) var(--fieldSet-legend-paddingBottom) var(--fieldSet-legend-paddingLeft); cursor: pointer; background: transparent; display: inline-flex !important; flex-direction: row-reverse; justify-content: flex-end; box-sizing: content-box; } fieldset.cxd-Collapse > legend .cxd-TplField { font-weight: var(--fieldSet-legend-fontWeight); font-size: var(--fieldSet-legend-fontSize); color: var(--fieldSet-legend-color); } fieldset.cxd-Collapse > legend:hover { background: transparent; } fieldset.cxd-Collapse--xs { padding: var(--fieldSet-size-xs-paddingTop) var(--fieldSet-size-xs-paddingRight) var(--fieldSet-size-xs-paddingBottom) var(--fieldSet-size-xs-paddingLeft); } fieldset.cxd-Collapse--xs > legend { left: var(--fieldSet-size-xs-paddingLeft); padding: 0 3px; margin: 0 0 0 -3px; } fieldset.cxd-Collapse--xs > legend .cxd-TplField { font-size: var(--fieldSet-size-xs-fontSize); } fieldset.cxd-Collapse--xs > legend:hover { background-color: var(--white); } fieldset.cxd-Collapse--xs:after { top: calc(var(--fieldSet-size-xs-fontSize) / 2); } fieldset.cxd-Collapse--sm { padding: var(--fieldSet-size-sm-paddingTop) var(--fieldSet-size-sm-paddingRight) var(--fieldSet-size-sm-paddingBottom) var(--fieldSet-size-sm-paddingLeft); } fieldset.cxd-Collapse--sm > legend { left: var(--fieldSet-size-sm-paddingLeft); padding: 0 5px; margin: 0 0 0 -5px; } fieldset.cxd-Collapse--sm > legend .cxd-TplField { font-size: var(--fieldSet-size-sm-fontSize); } fieldset.cxd-Collapse--sm > legend:hover { background-color: var(--white); } fieldset.cxd-Collapse--sm:after { top: calc(var(--fieldSet-size-sm-fontSize) / 2); } fieldset.cxd-Collapse--base { padding: var(--fieldSet-size-base-paddingTop) var(--fieldSet-size-base-paddingRight) var(--fieldSet-size-base-paddingBottom) var(--fieldSet-size-base-paddingLeft); } fieldset.cxd-Collapse--base > legend { left: var(--fieldSet-size-base-paddingLeft); padding: 0 8px; margin: 0 0 0 -8px; } fieldset.cxd-Collapse--base > legend .cxd-TplField { font-size: var(--fieldSet-size-base-fontSize); } fieldset.cxd-Collapse--base > legend:hover { background-color: var(--white); } fieldset.cxd-Collapse--base:after { top: calc(var(--fieldSet-size-base-fontSize) / 2); } fieldset.cxd-Collapse--md { padding: var(--fieldSet-size-md-paddingTop) var(--fieldSet-size-md-paddingRight) var(--fieldSet-size-md-paddingBottom) var(--fieldSet-size-md-paddingLeft); } fieldset.cxd-Collapse--md > legend { left: var(--fieldSet-size-md-paddingLeft); padding: 0 10px; margin: 0 0 0 -10px; } fieldset.cxd-Collapse--md > legend .cxd-TplField { font-size: var(--fieldSet-size-md-fontSize); } fieldset.cxd-Collapse--md > legend:hover { background-color: var(--white); } fieldset.cxd-Collapse--md:after { top: calc(var(--fieldSet-size-md-fontSize) / 2); } fieldset.cxd-Collapse--lg { padding: var(--fieldSet-size-lg-paddingTop) var(--fieldSet-size-lg-paddingRight) var(--fieldSet-size-lg-paddingBottom) var(--fieldSet-size-lg-paddingLeft); } fieldset.cxd-Collapse--lg > legend { left: var(--fieldSet-size-lg-paddingLeft); padding: 0 var(--gap-md); margin: 0 0 0 calc(var(--gap-md) * -1); } fieldset.cxd-Collapse--lg > legend .cxd-TplField { font-size: var(--fieldSet-size-lg-fontSize); } fieldset.cxd-Collapse--lg > legend:hover { background-color: var(--white); } fieldset.cxd-Collapse--lg:after { top: calc(var(--fieldSet-size-lg-fontSize) / 2); } fieldset.cxd-Collapse .cxd-Collapse-header.is-mobile { padding-left: var(--gap-xs) !important; padding-right: 1.125rem; } fieldset.cxd-Collapse .cxd-Collapse-header.is-mobile:hover { background: var(--white); } .cxd-Form-groupColumn { margin-bottom: var(--gap-sm); } @media (min-width: 768px) { .cxd-Form-group { margin-bottom: var(--Form-item-gap); } .cxd-Form-group:last-child { margin-bottom: 0; } .cxd-Form-value > .cxd-Form-group { margin-bottom: var(--Form-input-marginBottom); } .cxd-Form-group--hor { display: flex; flex-wrap: wrap; margin-left: calc(var(--Form-group-gutterWidth) / -2); margin-right: calc(var(--Form-group-gutterWidth) / -2); align-items: flex-start; } .cxd-Form-group--hor.v-middle { align-items: center; } .cxd-Form-group--hor.v-bottom { align-items: flex-end; } .cxd-Form-group--hor > * { padding-left: calc(var(--Form-group-gutterWidth) / 2); padding-right: calc(var(--Form-group-gutterWidth) / 2); } .cxd-Form-group--hor > .cxd-Form-item--inline { margin-right: 0; } .cxd-Form-group--hor > .cxd-Form-item, .cxd-Form-group--hor > div > .cxd-Form-item { margin-bottom: 0; } .cxd-Form-group--hor .cxd-Form-input > .cxd-Form-group { margin-bottom: 0; } .cxd-Form-group--lg { margin-left: calc(var(--Form-group--lg-gutterWidth) / -2); margin-right: calc(var(--Form-group--lg-gutterWidth) / -2); } .cxd-Form-group--lg > * { padding-left: calc(var(--Form-group--lg-gutterWidth) / 2); padding-left: calc(var(--Form-group--lg-gutterWidth) / 2); } .cxd-Form-group--md { margin-left: calc(var(--Form-group--md-gutterWidth) / -2); margin-right: calc(var(--Form-group--md-gutterWidth) / -2); } .cxd-Form-group--md > * { padding-left: calc(var(--Form-group--md-gutterWidth) / 2); padding-right: calc(var(--Form-group--md-gutterWidth) / 2); } .cxd-Form-group--sm { margin-left: calc(var(--Form-group--sm-gutterWidth) / -2); margin-right: calc(var(--Form-group--sm-gutterWidth) / -2); } .cxd-Form-group--sm > * { padding-left: calc(var(--Form-group--sm-gutterWidth) / 2); padding-right: calc(var(--Form-group--sm-gutterWidth) / 2); } .cxd-Form-group--xs { margin-left: calc(var(--Form-group--xs-gutterWidth) / -2); margin-right: calc(var(--Form-group--xs-gutterWidth) / -2); } .cxd-Form-group--xs > * { padding-left: calc(var(--Form-group--xs-gutterWidth) / 2); padding-right: calc(var(--Form-group--xs-gutterWidth) / 2); } .cxd-Form-groupColumn { flex-basis: 0; flex-grow: 1; width: 100%; max-width: 100%; margin-bottom: 0; } .cxd-Form-groupColumn--1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; min-height: 1px; } .cxd-Form-groupColumn--2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; min-height: 1px; } .cxd-Form-groupColumn--3 { flex: 0 0 25%; max-width: 25%; min-height: 1px; } .cxd-Form-groupColumn--4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; min-height: 1px; } .cxd-Form-groupColumn--5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; min-height: 1px; } .cxd-Form-groupColumn--6 { flex: 0 0 50%; max-width: 50%; min-height: 1px; } .cxd-Form-groupColumn--7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; min-height: 1px; } .cxd-Form-groupColumn--8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; min-height: 1px; } .cxd-Form-groupColumn--9 { flex: 0 0 75%; max-width: 75%; min-height: 1px; } .cxd-Form-groupColumn--10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; min-height: 1px; } .cxd-Form-groupColumn--11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; min-height: 1px; } .cxd-Form-groupColumn--12 { flex: 0 0 100%; max-width: 100%; min-height: 1px; } .cxd-Form-groupColumn--auto { flex: 0 0 auto; width: auto; max-width: 100%; min-height: 1px; } } .cxd-InputGroup { display: inline-flex; flex-wrap: nowrap; } .cxd-InputGroup:hover div, .cxd-InputGroup:hover button { border-color: var(--colors-brand-5) !important; } .cxd-InputGroup.cxd-Form-control--sizeXs, .cxd-InputGroup.cxd-Form-control--sizeSm, .cxd-InputGroup.cxd-Form-control--sizeMd, .cxd-InputGroup.cxd-Form-control--sizeLg { display: inline-flex; } .cxd-InputGroup-addOn, .cxd-InputGroup .cxd-Form-control { display: inline-block; white-space: nowrap; } .cxd-InputGroup-addOn { background: var(--InputGroup-addOn-bg); border: var(--InputGroup-addOn-borderWidth) solid var(--InputGroup-addOn-borderColor); line-height: calc(var(--InputGroup-height) - var(--InputGroup-paddingY) * 2 - var(--InputGroup-addOn-borderWidth) * 2); height: var(--InputGroup-height); box-sizing: border-box; padding: var(--InputGroup-paddingY) var(--InputGroup-paddingX); } .cxd-InputGroup-addOn svg { width: 0.75rem; height: 0.75rem; } .cxd-InputGroup-addOn:not(:last-child) { border-right: 0; } .cxd-InputGroup-addOn:first-child { border-top-left-radius: var(--InputGroup-addOn-borderRadius); border-bottom-left-radius: var(--InputGroup-addOn-borderRadius); } .cxd-InputGroup-addOn:last-child { border-top-right-radius: var(--InputGroup-addOn-borderRadius); border-bottom-right-radius: var(--InputGroup-addOn-borderRadius); } .cxd-InputGroup-btn .cxd-Button { border-radius: 0; border: var(--InputGroup-button-borderWidth) solid var(--InputGroup-button-borderColor); } .cxd-InputGroup-btn:not(:last-child) .cxd-Button { border-right: 0; } .cxd-InputGroup-btn:first-child .cxd-Button { border-top-left-radius: var(--InputGroup-button-borderRadius); border-bottom-left-radius: var(--InputGroup-button-borderRadius); } .cxd-InputGroup-btn:last-child .cxd-Button { border-top-right-radius: var(--InputGroup-button-borderRadius); border-bottom-right-radius: var(--InputGroup-button-borderRadius); } .cxd-InputGroup .cxd-TextControl-input, .cxd-InputGroup .cxd-SearchBox { flex-basis: 0; flex-grow: 1; min-width: 0; display: inline-flex; } .cxd-InputGroup .cxd-TextControl-input:not(:first-child), .cxd-InputGroup .cxd-SearchBox:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; } .cxd-InputGroup .cxd-TextControl-input:not(:last-child), .cxd-InputGroup .cxd-SearchBox:not(:last-child) { border-right-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .cxd-InputGroup .cxd-SelectControl .cxd-Select { background: var(--InputGroup-select-bg); border: var(--InputGroup-select-borderWidth) solid var(--InputGroup-select-borderColor); color: var(--InputGroup-select-color); } .cxd-InputGroup .cxd-SelectControl:not(:last-child) .cxd-Select { border-right: 0; } .cxd-InputGroup .cxd-SelectControl:first-child .cxd-Select { border-top-left-radius: var(--InputGroup-select-borderRadius); border-bottom-left-radius: var(--InputGroup-select-borderRadius); background-color: var(--colors-neutral-fill-10); } .cxd-InputGroup .cxd-SelectControl:last-child .cxd-Select { border-top-right-radius: var(--InputGroup-select-borderRadius); border-bottom-right-radius: var(--InputGroup-select-borderRadius); } .cxd-InputGroup .cxd-SelectControl:not(:first-child) .cxd-Select { border-top-left-radius: 0; border-bottom-left-radius: 0; } .cxd-InputGroup .cxd-SelectControl:not(:last-child) .cxd-Select { border-right-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } .cxd-InputGroup .cxd-Select-arrow { color: var(--InputGroup-select-arrowColor); } .cxd-InputGroup.is-focused .cxd-InputGroup-addOn, .cxd-InputGroup.is-focused .cxd-TextControl-input, .cxd-InputGroup.is-focused .cxd-Select, .cxd-InputGroup.is-focused .cxd-SearchBox, .cxd-InputGroup.is-focused .cxd-InputGroup-btn .cxd-Button { border-color: var(--InputGroup-addOn-onFocused-borderColor); } .cxd-InputGroup.is-focused .cxd-InputGroup-addOn { color: var(--primary); } .cxd-InputGroup .cxd-Form-static { margin-right: var(--gap-xs); } .cxd-InputGroup.is-mobile .cxd-Form-control { display: inline-flex; } .cxd-InputGroup:not(.is-inline) { display: flex; } .cxd-InputGroup-validation--full.is-error > .cxd-Form-control { border-color: var(--Form-input-onError-borderColor); transition: all var(--animation-duration); } .cxd-InputGroup-validation--partial.is-error > .cxd-Form-control.is-error { border-color: var(--Form-input-onError-borderColor); background: var(--Form-input-onError-bg); transition: all var(--animation-duration); } .cxd-TextControl { position: relative; max-width: 100%; } .cxd-TextControl.is-inline { display: inline-block; width: var(--Form-control-widthBase); } .cxd-TextControl-input { display: flex; background: var(--Form-input-bg); border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor); border-radius: var(--Form-input-borderRadius); line-height: var(--Form-input-lineHeight); padding: var(--Form-input-paddingY) var(--Form-input-paddingX); font-size: var(--Form-input-fontSize); flex-wrap: wrap; justify-content: flex-start; } .cxd-TextControl-input input { flex-basis: 1.875rem; flex-grow: 1; outline: none; background: transparent; border: none; color: var(--Form-input-color); width: 100%; } .cxd-TextControl-input input::-moz-placeholder { color: var(--Form-input-placeholderColor); -moz-user-select: none; user-select: none; } .cxd-TextControl-input input::placeholder { color: var(--Form-input-placeholderColor); -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-TextControl-input:hover { border-color: var(--Form-input-onFocused-borderColor); } .cxd-TextControl-input--borderHalf { border-left-color: transparent !important; border-right-color: transparent !important; border-top-color: transparent !important; } .cxd-TextControl-input--borderNone { border-color: transparent !important; } .cxd-TextControl.is-error > .cxd-TextControl-input { border-color: var(--Form-item-onError-borderColor); background: var(--Form-item-onError-bg); transition: all var(--animation-duration); } .cxd-TextControl.is-focused > .cxd-TextControl-input { border-color: var(--Form-input-onFocused-borderColor); box-shadow: var(--Form-input-boxShadow); background: var(--Form-input-onFocused-bg); transition: all var(--animation-duration); } .cxd-TextControl.is-error.is-focused > .cxd-TextControl-input { border-color: var(--Form-item-onError-borderColor); background: var(--Form-item-onError-bg); } .cxd-TextControl.is-disabled > .cxd-TextControl-input { color: var(--text--muted-color); background: var(--Form-input-onDisabled-bg); border-color: var(--Form-input-onDisabled-borderColor); transition: all var(--animation-duration); } .cxd-TextControl.is-disabled > .cxd-TextControl-input > input { color: var(--text--muted-color); } .cxd-TextControl-spinner { line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize)); } .cxd-TextControl-clear { padding: var(--Form-input-clearBtn-padding); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: auto; text-decoration: none; } .cxd-TextControl-clear svg { fill: var(--Form-input-clearBtn-color); width: var(--Form-input-clearBtn-size); height: var(--Form-input-clearBtn-size); top: 0; } .cxd-TextControl-clear:hover svg { fill: var(--Form-input-clearBtn-color-onHover); } .cxd-TextControl-clear:active svg { fill: var(--Form-input-clearBtn-color-onActive); } .cxd-TextControl-revealPassword { cursor: pointer; color: var(--text--muted-color); } @media (min-width: 576px) { .cxd-TextControl.cxd-Form-control--sizeXs > .cxd-TextControl-input, .cxd-TextControl.cxd-Form-control--sizeSm > .cxd-TextControl-input, .cxd-TextControl.cxd-Form-control--sizeMd > .cxd-TextControl-input, .cxd-TextControl.cxd-Form-control--sizeLg > .cxd-TextControl-input { min-width: 100%; display: inline-flex; } } .cxd-TextControl-clear { padding: 0 var(--Form-input-clearBtn-padding); } .cxd-TextControl .cxd-TextControl-clear svg { font-size: var(--input-clearable-icon-size); fill: var(--input-clearable-default-color); width: var(--input-clearable-icon-size); height: var(--input-clearable-icon-size); } .cxd-TextControl .cxd-TextControl-clear svg:hover { fill: var(--input-clearable-hover-color); } .cxd-TextControl .cxd-TextControl-clear svg:active { fill: var(--input-clearable-active-color); } .cxd-TextControl-input { border-width: var(--input-default-default-top-border-width) var(--input-default-default-right-border-width) var(--input-default-default-bottom-border-width) var(--input-default-default-left-border-width); border-style: var(--input-default-default-top-border-style) var(--input-default-default-right-border-style) var(--input-default-default-bottom-border-style) var(--input-default-default-left-border-style); border-color: var(--input-default-default-top-border-color) var(--input-default-default-right-border-color) var(--input-default-default-bottom-border-color) var(--input-default-default-left-border-color); border-radius: var(--input-default-default-top-left-border-radius) var(--input-default-default-top-right-border-radius) var(--input-default-default-bottom-right-border-radius) var(--input-default-default-bottom-left-border-radius); padding: var(--input-default-default-paddingTop) var(--input-default-default-paddingRight) var(--input-default-default-paddingBottom) var(--input-default-default-paddingLeft); background: var(--input-default-default-bg-color); height: var(--input-size-default-height); align-items: center; transition: all var(--animation-duration) ease-in-out; } .cxd-TextControl-input input { color: var(--input-default-default-color); font-size: var(--input-default-default-fontSize); font-weight: var(--input-default-default-fontWeight); line-height: var(--input-default-default-lineHeight); } .cxd-TextControl-input:hover, .cxd-TextControl-input.hover { border-width: var(--input-default-hover-top-border-width) var(--input-default-hover-right-border-width) var(--input-default-hover-bottom-border-width) var(--input-default-hover-left-border-width); border-style: var(--input-default-hover-top-border-style) var(--input-default-hover-right-border-style) var(--input-default-hover-bottom-border-style) var(--input-default-hover-left-border-style); border-color: var(--input-default-hover-top-border-color) var(--input-default-hover-right-border-color) var(--input-default-hover-bottom-border-color) var(--input-default-hover-left-border-color); border-radius: var(--input-default-hover-top-left-border-radius) var(--input-default-hover-top-right-border-radius) var(--input-default-hover-bottom-right-border-radius) var(--input-default-hover-bottom-left-border-radius); padding: var(--input-default-hover-paddingTop) var(--input-default-hover-paddingRight) var(--input-default-hover-paddingBottom) var(--input-default-hover-paddingLeft); background: var(--input-default-hover-bg-color); } .cxd-TextControl.is-focused > .cxd-TextControl-input, .cxd-TextControl-input.active { border-width: var(--input-default-active-top-border-width) var(--input-default-active-right-border-width) var(--input-default-active-bottom-border-width) var(--input-default-active-left-border-width); border-style: var(--input-default-active-top-border-style) var(--input-default-active-right-border-style) var(--input-default-active-bottom-border-style) var(--input-default-active-left-border-style); border-color: var(--input-default-active-top-border-color) var(--input-default-active-right-border-color) var(--input-default-active-bottom-border-color) var(--input-default-active-left-border-color); border-radius: var(--input-default-active-top-left-border-radius) var(--input-default-active-top-right-border-radius) var(--input-default-active-bottom-right-border-radius) var(--input-default-active-bottom-left-border-radius); padding: var(--input-default-active-paddingTop) var(--input-default-active-paddingRight) var(--input-default-active-paddingBottom) var(--input-default-active-paddingLeft); background: var(--input-default-active-bg-color); box-shadow: var(--input-default-active-shadow); } .cxd-TextControl.is-disabled > .cxd-TextControl-input { border-width: var(--input-default-disabled-top-border-width) var(--input-default-disabled-right-border-width) var(--input-default-disabled-bottom-border-width) var(--input-default-disabled-left-border-width); border-style: var(--input-default-disabled-top-border-style) var(--input-default-disabled-right-border-style) var(--input-default-disabled-bottom-border-style) var(--input-default-disabled-left-border-style); border-color: var(--input-default-disabled-top-border-color) var(--input-default-disabled-right-border-color) var(--input-default-disabled-bottom-border-color) var(--input-default-disabled-left-border-color); border-radius: var(--input-default-disabled-top-left-border-radius) var(--input-default-disabled-top-right-border-radius) var(--input-default-disabled-bottom-right-border-radius) var(--input-default-disabled-bottom-left-border-radius); padding: var(--input-default-disabled-paddingTop) var(--input-default-disabled-paddingRight) var(--input-default-disabled-paddingBottom) var(--input-default-disabled-paddingLeft); background: var(--input-default-disabled-bg-color); } .cxd-TextControl-input input { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .cxd-TextControl-placeholder { color: var(--Form-input-placeholderColor); -webkit-user-select: none; -moz-user-select: none; user-select: none; position: absolute; left: var(--Form-input-paddingX); top: var(--Form-input-paddingY); margin-top: calc(2 * var(--Form-input-borderWidth)); line-height: var(--Form-input-lineHeight); } .cxd-TextControl--withAddOn { display: flex; flex-wrap: nowrap; } .cxd-TextControl--withAddOn:hover .cxd-TextControl-input, .cxd-TextControl--withAddOn:hover .cxd-Button, .cxd-TextControl--withAddOn:hover .cxd-TextControl-addOn { border-color: var(--Form-input-onHover-borderColor); } @media (min-width: 576px) { .cxd-TextControl--withAddOn.cxd-Form-control--sizeXs, .cxd-TextControl--withAddOn.cxd-Form-control--sizeSm, .cxd-TextControl--withAddOn.cxd-Form-control--sizeMd, .cxd-TextControl--withAddOn.cxd-Form-control--sizeLg { display: inline-flex; } .cxd-TextControl--withAddOn.cxd-Form-control--sizeXs > .cxd-TextControl-input, .cxd-TextControl--withAddOn.cxd-Form-control--sizeSm > .cxd-TextControl-input, .cxd-TextControl--withAddOn.cxd-Form-control--sizeMd > .cxd-TextControl-input, .cxd-TextControl--withAddOn.cxd-Form-control--sizeLg > .cxd-TextControl-input { min-width: unset; } } .cxd-TextControl--withAddOn > .cxd-TextControl-input, .cxd-TextControl--withAddOn.is-focused > .cxd-TextControl-input { flex-basis: 1; flex-grow: 1; min-width: 0; border-radius: 0; } .cxd-TextControl--withAddOn > .cxd-TextControl-input:first-child, .cxd-TextControl--withAddOn.is-focused > .cxd-TextControl-input:first-child { border-top-left-radius: var(--Form-input-borderRadius); border-bottom-left-radius: var(--Form-input-borderRadius); } .cxd-TextControl--withAddOn > .cxd-TextControl-input:last-child, .cxd-TextControl--withAddOn.is-focused > .cxd-TextControl-input:last-child { border-top-right-radius: var(--Form-input-borderRadius); border-bottom-right-radius: var(--Form-input-borderRadius); } .cxd-TextControl-addOn { display: flex; align-items: center; justify-content: center; padding-left: 0.625rem; padding-right: 0.625rem; background: var(--input-addon-text-bg-color-default); color: var(--Form-input-addOnColor); border-width: var(--input-addon-text-top-border-width) 0 var(--input-addon-text-bottom-border-width) 0; border-style: var(--input-addon-text-top-border-style) var(--input-addon-text-right-border-style) var(--input-addon-text-bottom-border-style) var(--input-addon-text-left-border-style); border-color: var(--input-addon-text-top-border-color) var(--input-addon-text-right-border-color) var(--input-addon-text-bottom-border-color) var(--input-addon-text-left-border-color); } .cxd-TextControl-addOn:hover { background: var(--input-addon-text-bg-color-hover); } .cxd-TextControl-addOn:first-child { border-left-width: var(--input-addon-text-left-border-width); border-top-left-radius: var(--Form-input-borderRadius); border-bottom-left-radius: var(--Form-input-borderRadius); } .cxd-TextControl-addOn:last-child { border-right-width: var(--input-addon-text-right-border-width); border-top-right-radius: var(--Form-input-borderRadius); border-bottom-right-radius: var(--Form-input-borderRadius); } .cxd-TextControl--withAddOn > .cxd-TextControl-button > .cxd-Button { position: relative; border-radius: 0; margin-left: -0.0625rem; transition: none; } .cxd-TextControl--withAddOn > .cxd-TextControl-button:not(:last-child) .cxd-Button { border-right: 0; } .cxd-TextControl--withAddOn > .cxd-TextControl-button:first-child .cxd-Button { border-top-left-radius: var(--InputGroup-addOn-borderRadius); border-bottom-left-radius: var(--InputGroup-addOn-borderRadius); } .cxd-TextControl--withAddOn > .cxd-TextControl-button:last-child .cxd-Button { border-top-right-radius: var(--InputGroup-addOn-borderRadius); border-bottom-right-radius: var(--InputGroup-addOn-borderRadius); } .cxd-TextControl--withAddOn.is-focused > .cxd-TextControl-button .cxd-Button { border-color: var(--Form-input-onFocused-borderColor); } .cxd-TextControl--withAddOn.is-error > .cxd-TextControl-addOn { border-color: var(--Form-input-onError-borderColor); } .cxd-TextControl--withAddOn.is-focused > .cxd-TextControl-addOn { border-color: var(--Form-input-onFocused-borderColor); color: var(--Form-input-onFocus-addOnColor); box-shadow: var(--Form-input-boxShadow); } .cxd-TextControl--withAddOn.is-disabled > .cxd-TextControl-addOn { color: var(--text--muted-color); } .cxd-TextControl--withAddOn.is-inline { display: inline-block; } @media (min-width: 576px) { .cxd-TextControl--withAddOn.is-inline.cxd-Form-control--sizeXs > .cxd-TextControl-input, .cxd-TextControl--withAddOn.is-inline.cxd-Form-control--sizeSm > .cxd-TextControl-input, .cxd-TextControl--withAddOn.is-inline.cxd-Form-control--sizeMd > .cxd-TextControl-input, .cxd-TextControl--withAddOn.is-inline.cxd-Form-control--sizeLg > .cxd-TextControl-input { min-width: 100%; } } .cxd-TextControl-input--withAC { position: relative; flex-wrap: wrap; } .cxd-TextControl-input--withAC input { width: auto; } .cxd-TextControl-popover { margin-top: 0.25rem; background: var(--Form-select-menu-bg); color: var(--Form-select-menu-color); border-radius: 0.125rem; box-shadow: var(--Form-select-outer-boxShadow); border: var(--Form-select-outer-borderWidth) solid var(--Form-select-outer-borderColor); padding: 0.25rem 0; } .cxd-TextControl-sugs { max-height: 18.75rem; overflow: auto; } .cxd-TextControl-sugItem { padding: var(--select-base-default-option-paddingTop) var(--select-base-default-option-paddingRight) var(--select-base-default-option-paddingBottom) var(--select-base-default-option-paddingLeft); line-height: var(--select-base-default-option-line-height); } .cxd-TextControl-sugItem svg { width: 1rem; margin-top: 0.25rem; float: right; fill: var(--Form-input-onHover-iconColor); } .cxd-TextControl-sugItem:not(.is-disabled) { cursor: pointer; } .cxd-TextControl-sugItem.is-highlight { color: var(--Form-select-menu-onHover-color); background: var(--Form-select-menu-onHover-bg); } .cxd-TextControl-sugItem .is-matched { color: var(--Form-select-menu-onActive-color); } .cxd-TextControl-value { -webkit-user-select: none; -moz-user-select: none; user-select: none; line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize)); vertical-align: middle; display: inline-block; } .cxd-TextControl-input--multiple { height: auto; min-height: var(--Form-input-height); padding: var(--Form-input-paddingY) var(--Form-input-paddingX); } .cxd-TextControl-input--multiple .cxd-TextControl-placeholder { margin-top: 0; } .cxd-TextControl-input--multiple > input { margin-top: 2px; } .cxd-TextControl-input--multiple .cxd-TextControl-valueWrap { white-space: normal; margin-bottom: calc(var(--gap-xs) * -1); } .cxd-TextControl-input--multiple .cxd-TextControl-valueWrap > input { margin-bottom: var(--gap-xs); } .cxd-TextControl-input--multiple .cxd-TextControl-value { white-space: nowrap; line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem); font-size: var(--Form-selectValue-fontSize); background: var(--Form-select-multiple-bgColor); border-radius: 0.125rem; margin: 2px 3px; display: flex; align-items: center; padding: 0 var(--gap-sm); } .cxd-TextControl-valueIcon.icon-close { top: 0; cursor: pointer; margin-left: var(--gap-sm); width: 0.625rem; color: var(--default-icon-color); } .cxd-TextControl-input--multiple .cxd-TextControl-valueLabel { line-height: var(--gap-xl); max-width: 3.75rem; display: block; overflow: hidden; text-overflow: ellipsis; } .cxd-TextControl-counter { color: var(--input-count-single-color); font-size: var(--input-count-single-fontSize); } .cxd-TextControl-inputPrefix, .cxd-TextControl-inputSuffix { color: var(--input-prefix-color); font-size: var(--input-prefix-fontSize); } .has-error--maxLength .cxd-TextControl-counter { color: var(--danger); } .cxd-TextControl-input:hover { border-color: var(--Form-input-onHover-borderColor); } .cxd-TextControl-revealPassword { padding: 0 var(--Form-input-clearBtn-padding); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: auto; text-decoration: none; } .cxd-TextControl-revealPassword svg { cursor: pointer; } .cxd-TextControl .InputText-invisible { content: var(--input-password-invisible-icon); } .cxd-TextControl .InputText-view { content: var(--input-password-view-icon); } .cxd-TextControl-icon-view { font-size: var(--input-password-view-icon-size); fill: var(--input-password-view-icon-color); color: var(--input-password-view-icon-color); width: var(--input-password-view-icon-size); height: var(--input-password-view-icon-size); display: flex; align-items: center; } .cxd-TextControl-icon-view svg { width: var(--input-password-view-icon-size); height: var(--input-password-view-icon-size); } .cxd-TextControl-icon-invisible { font-size: var(--input-password-invisible-icon-size); fill: var(--input-password-invisible-icon-color); color: var(--input-password-invisible-icon-color); width: var(--input-password-invisible-icon-size); height: var(--input-password-invisible-icon-size); display: flex; align-items: center; } .cxd-TextControl-icon-invisible svg { width: var(--input-password-invisible-icon-size); height: var(--input-password-invisible-icon-size); } .InputText-clear.icon { content: var(--input-clearable-icon); } input.cxd-TextControl-input-password { flex-basis: 0; } .cxd-TextControl.is-disabled-input input { color: var(--Form-input-onDisabled-color); } .cxd-TextareaControl { position: relative; max-width: 100%; --Form-input-clearBtn-padding: 0.125rem; position: relative; } .cxd-TextareaControl.is-inline { display: inline-block; width: var(--Form-control-widthBase); } .cxd-TextareaControl-input { display: flex; background: var(--Form-input-bg); border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor); border-radius: var(--Form-input-borderRadius); line-height: var(--Form-input-lineHeight); padding: var(--Form-input-paddingY) var(--Form-input-paddingX); font-size: var(--Form-input-fontSize); flex-wrap: wrap; justify-content: flex-start; } .cxd-TextareaControl-input input { flex-basis: 1.875rem; flex-grow: 1; outline: none; background: transparent; border: none; color: var(--Form-input-color); width: 100%; } .cxd-TextareaControl-input input::-moz-placeholder { color: var(--Form-input-placeholderColor); -moz-user-select: none; user-select: none; } .cxd-TextareaControl-input input::placeholder { color: var(--Form-input-placeholderColor); -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-TextareaControl-input:hover { border-color: var(--Form-input-onFocused-borderColor); } .cxd-TextareaControl-input--borderHalf { border-left-color: transparent !important; border-right-color: transparent !important; border-top-color: transparent !important; } .cxd-TextareaControl-input--borderNone { border-color: transparent !important; } .cxd-TextareaControl.is-error > .cxd-TextareaControl-input { border-color: var(--Form-item-onError-borderColor); background: var(--Form-item-onError-bg); transition: all var(--animation-duration); } .cxd-TextareaControl.is-focused > .cxd-TextareaControl-input { border-color: var(--Form-input-onFocused-borderColor); box-shadow: var(--Form-input-boxShadow); background: var(--Form-input-onFocused-bg); transition: all var(--animation-duration); } .cxd-TextareaControl.is-error.is-focused > .cxd-TextareaControl-input { border-color: var(--Form-item-onError-borderColor); background: var(--Form-item-onError-bg); } .cxd-TextareaControl.is-disabled > .cxd-TextareaControl-input { color: var(--text--muted-color); background: var(--Form-input-onDisabled-bg); border-color: var(--Form-input-onDisabled-borderColor); transition: all var(--animation-duration); } .cxd-TextareaControl.is-disabled > .cxd-TextareaControl-input > input { color: var(--text--muted-color); } .cxd-TextareaControl-spinner { line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize)); } .cxd-TextareaControl-clear { padding: var(--Form-input-clearBtn-padding); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: auto; text-decoration: none; } .cxd-TextareaControl-clear svg { fill: var(--Form-input-clearBtn-color); width: var(--Form-input-clearBtn-size); height: var(--Form-input-clearBtn-size); top: 0; } .cxd-TextareaControl-clear:hover svg { fill: var(--Form-input-clearBtn-color-onHover); } .cxd-TextareaControl-clear:active svg { fill: var(--Form-input-clearBtn-color-onActive); } .cxd-TextareaControl-revealPassword { cursor: pointer; color: var(--text--muted-color); } @media (min-width: 576px) { .cxd-TextareaControl.cxd-Form-control--sizeXs > .cxd-TextareaControl-input, .cxd-TextareaControl.cxd-Form-control--sizeSm > .cxd-TextareaControl-input, .cxd-TextareaControl.cxd-Form-control--sizeMd > .cxd-TextareaControl-input, .cxd-TextareaControl.cxd-Form-control--sizeLg > .cxd-TextareaControl-input { min-width: 100%; display: inline-flex; } } .cxd-TextareaControl > textarea.cxd-TextareaControl-input--counter { padding-bottom: 1.4375rem; display: block !important; } .cxd-TextareaControl > textarea { border: 1px solid var(--Form-input-borderColor); border-radius: var(--Form-input-borderRadius); color: var(--colors-neutral-text-2); background: var(--Form-input-bg); padding: var(--input-textarea-paddingTop) var(--input-textarea-paddingRight) var(--input-textarea-paddingBottom) var(--input-textarea-paddingLeft); font-size: var(--Form-input-fontSize); display: block; width: 100%; line-height: var(--Form-input-lineHeight); outline: none; resize: vertical; } .cxd-TextareaControl > textarea--borderHalf { border-left-color: transparent !important; border-right-color: transparent !important; border-top-color: transparent !important; } .cxd-TextareaControl > textarea--borderNone { border-color: transparent !important; } .cxd-TextareaControl > textarea::-moz-placeholder { color: var(--Form-input-placeholderColor); } .cxd-TextareaControl > textarea::placeholder { color: var(--Form-input-placeholderColor); } .cxd-TextareaControl > textarea:hover { border-color: var(--Form-input-onHover-borderColor); } .cxd-TextareaControl-counter { position: absolute; left: 1px; bottom: 1px; right: var(--scrollbar-width); padding-bottom: var(--Form-input-paddingY); text-align: right; border-radius: 3px; color: var(--input-count-multi-color); font-size: var(--input-count-multi-fontSize); } .cxd-TextareaControl-counter > i { font-style: normal; } .cxd-TextareaControl-counter.is-empty { color: var(--input-count-multi-color); } .has-error--maxLength .cxd-TextareaControl-counter { color: var(--danger); } .cxd-TextareaControl-clear { padding: var(--Form-input-clearBtn-padding); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: auto; text-decoration: none; position: absolute; right: var(--Form-input-paddingY); top: var(--Form-input-paddingY); } .cxd-TextareaControl-clear svg { fill: var(--Form-input-clearBtn-color); width: var(--Form-input-clearBtn-size); height: var(--Form-input-clearBtn-size); top: 0; } .cxd-TextareaControl-clear:hover svg { fill: var(--Form-input-clearBtn-color-onHover); } .cxd-TextareaControl-clear:active svg { fill: var(--Form-input-clearBtn-color-onActive); } .cxd-Form-static .cxd-TextareaControl > textarea { border: 0; padding: 0; resize: none; } .cxd-Checkbox { margin: 0 var(--gap-sm) 0 0; font-weight: var(--fontWeightNormal); -webkit-user-select: none; -moz-user-select: none; user-select: none; pointer-events: none; } .cxd-Checkbox input { position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); pointer-events: none; } .cxd-Checkbox:hover input:not(:disabled) + i { border-color: var(--Checkbox-onHover-color); } .cxd-Checkbox.cxd-Checkbox--checkbox.cxd-Checkbox--button > i + span { margin-left: 0; } .cxd-Checkbox > i { cursor: pointer; line-height: 1; background: var(--Checkbox-gb); display: inline-block; vertical-align: text-bottom; position: relative; pointer-events: all; } .cxd-Checkbox > i + span { pointer-events: all; margin-left: var(--gap-sm); cursor: pointer; display: inline-block; vertical-align: top; } .cxd-Checkbox > i + span > a { margin-left: var(--gap-xs); display: none; } .cxd-Checkbox > i + span:empty { display: none; } .cxd-Checkbox > i:before { content: ""; position: absolute; left: 50%; top: 50%; width: 0px; height: 0px; background: transparent; transition: all var(--animation-duration); transform-origin: 50% 50%; transform: translate(-50%, -50%); } .cxd-Checkbox.is-mobile > i + span { vertical-align: middle; } .cxd-Checkbox:hover > i + span > a { display: inline-block; } .cxd-Checkbox--checkbox { padding-left: var(--Checkbox-size); font-weight: var(--checkbox-checkbox-default-fontWeight); font-size: var(--checkbox-checkbox-default-fontSize); color: var(--checkbox-checkbox-default-text-color); } .cxd-Checkbox--checkbox:hover { color: var(--checkbox-checkbox-hover-text-color); } .cxd-Checkbox--checkbox:active { color: var(--checkbox-checkbox-active-text-color); } .cxd-Checkbox--checkbox input { margin-left: calc(var(--Checkbox-size) * -1); } .cxd-Checkbox--checkbox input:checked + i { border-width: var(--checkbox-checked-default-top-border-width) var(--checkbox-checked-default-right-border-width) var(--checkbox-checked-default-bottom-border-width) var(--checkbox-checked-default-left-border-width); border-style: var(--checkbox-checked-default-top-border-style) var(--checkbox-checked-default-right-border-style) var(--checkbox-checked-default-bottom-border-style) var(--checkbox-checked-default-left-border-style); border-color: var(--checkbox-checked-default-top-border-color) var(--checkbox-checked-default-right-border-color) var(--checkbox-checked-default-bottom-border-color) var(--checkbox-checked-default-left-border-color); border-radius: var(--checkbox-checked-default-top-left-border-radius) var(--checkbox-checked-default-top-right-border-radius) var(--checkbox-checked-default-bottom-right-border-radius) var(--checkbox-checked-default-bottom-left-border-radius); } .cxd-Checkbox--checkbox input:checked + i:hover { border-width: var(--checkbox-checkbox-hover-top-border-width) var(--checkbox-checkbox-hover-right-border-width) var(--checkbox-checkbox-hover-bottom-border-width) var(--checkbox-checkbox-hover-left-border-width); border-style: var(--checkbox-checkbox-hover-top-border-style) var(--checkbox-checkbox-hover-right-border-style) var(--checkbox-checkbox-hover-bottom-border-style) var(--checkbox-checkbox-hover-left-border-style); border-color: var(--checkbox-checkbox-hover-top-border-color) var(--checkbox-checkbox-hover-right-border-color) var(--checkbox-checkbox-hover-bottom-border-color) var(--checkbox-checkbox-hover-left-border-color); border-radius: var(--checkbox-checkbox-hover-top-left-border-radius) var(--checkbox-checkbox-hover-top-right-border-radius) var(--checkbox-checkbox-hover-bottom-right-border-radius) var(--checkbox-checkbox-hover-bottom-left-border-radius); } .cxd-Checkbox--checkbox input:checked + i:before { width: var(--Checkbox-inner-size); height: var(--Checkbox-inner-size); background: var(--Checkbox-onHover-color); } .cxd-Checkbox--checkbox input[disabled] + i { border-color: var(--Checkbox-color) !important; cursor: not-allowed; background-color: var(--checkbox-checkbox-disabled-bg-color); } .cxd-Checkbox--checkbox input[disabled] + i:before { background-color: var(--Checkbox-onDisabled-color); border-width: 0; } .cxd-Checkbox--checkbox input[disabled] + i + span { cursor: not-allowed; color: var(--checkbox-checkbox-disabled-text-color); } .cxd-Checkbox--checkbox > i { width: var(--Checkbox-size); height: var(--Checkbox-size); border: 0.0625rem solid var(--Checkbox-color); border-radius: var(--Checkbox-borderRadius); margin-left: calc(var(--Checkbox-size) * -1); border-width: var(--checkbox-checkbox-default-top-border-width) var(--checkbox-checkbox-default-right-border-width) var(--checkbox-checkbox-default-bottom-border-width) var(--checkbox-checkbox-default-left-border-width); border-style: var(--checkbox-checkbox-default-top-border-style) var(--checkbox-checkbox-default-right-border-style) var(--checkbox-checkbox-default-bottom-border-style) var(--checkbox-checkbox-default-left-border-style); border-color: var(--checkbox-checkbox-default-top-border-color) var(--checkbox-checkbox-default-right-border-color) var(--checkbox-checkbox-default-bottom-border-color) var(--checkbox-checkbox-default-left-border-color); border-radius: var(--checkbox-checkbox-default-top-left-border-radius) var(--checkbox-checkbox-default-top-right-border-radius) var(--checkbox-checkbox-default-bottom-right-border-radius) var(--checkbox-checkbox-default-bottom-left-border-radius); background: var(--checkbox-checkbox-default-bg-color); } .cxd-Checkbox--checkbox > i:hover { border-width: var(--checkbox-checkbox-hover-top-border-width) var(--checkbox-checkbox-hover-right-border-width) var(--checkbox-checkbox-hover-bottom-border-width) var(--checkbox-checkbox-hover-left-border-width); border-style: var(--checkbox-checkbox-hover-top-border-style) var(--checkbox-checkbox-hover-right-border-style) var(--checkbox-checkbox-hover-bottom-border-style) var(--checkbox-checkbox-hover-left-border-style); border-color: var(--checkbox-checkbox-hover-top-border-color) var(--checkbox-checkbox-hover-right-border-color) var(--checkbox-checkbox-hover-bottom-border-color) var(--checkbox-checkbox-hover-left-border-color); border-radius: var(--checkbox-checkbox-hover-top-left-border-radius) var(--checkbox-checkbox-hover-top-right-border-radius) var(--checkbox-checkbox-hover-bottom-right-border-radius) var(--checkbox-checkbox-hover-bottom-left-border-radius); background: var(--checkbox-checkbox-hover-bg-color); } .cxd-Checkbox--checkbox > i:active { border-width: var(--checkbox-checkbox-active-top-border-width) var(--checkbox-checkbox-active-right-border-width) var(--checkbox-checkbox-active-bottom-border-width) var(--checkbox-checkbox-active-left-border-width); border-style: var(--checkbox-checkbox-active-top-border-style) var(--checkbox-checkbox-active-right-border-style) var(--checkbox-checkbox-active-bottom-border-style) var(--checkbox-checkbox-active-left-border-style); border-color: var(--checkbox-checkbox-active-top-border-color) var(--checkbox-checkbox-active-right-border-color) var(--checkbox-checkbox-active-bottom-border-color) var(--checkbox-checkbox-active-left-border-color); border-radius: var(--checkbox-checkbox-active-top-left-border-radius) var(--checkbox-checkbox-active-top-right-border-radius) var(--checkbox-checkbox-active-bottom-right-border-radius) var(--checkbox-checkbox-active-bottom-left-border-radius); background: var(--checkbox-checkbox-active-bg-color); } .cxd-Checkbox--checkbox.cxd-Checkbox:hover > input + i { border-color: var(--button-primary-hover-top-border-color) var(--button-primary-hover-right-border-color) var(--button-primary-hover-bottom-border-color) var(--button-primary-hover-left-border-color); } .cxd-Checkbox--checkbox.cxd-Checkbox:active > i:before { background: var(--Checkbox-checked-onHover-bgColor); } .cxd-Checkbox--full.cxd-Checkbox--checkbox:not(:disabled) + i:hover { border-color: var(--Checkbox-color); } .cxd-Checkbox--full.cxd-Checkbox--checkbox:hover input:checked + i { background: var(--button-primary-hover-bg-color); border-color: transparent; } .cxd-Checkbox--full.cxd-Checkbox--checkbox:hover input:checked + i:before { background: var(--checkbox-checked-hover-bg-color); } .cxd-Checkbox--full.cxd-Checkbox--checkbox:hover > i:before { background: transparent; } .cxd-Checkbox--full.cxd-Checkbox--checkbox:active input:checked + i { background: var(--Checkbox-checked-onHover-bgColor); } .cxd-Checkbox--full.cxd-Checkbox--checkbox input:checked + i { border-color: var(--Checkbox-onHover-color); background: var(--Checkbox-onHover-color); } .cxd-Checkbox--full.cxd-Checkbox--checkbox input:checked + i:hover { background: var(--checkbox-checked-hover-bg-color); } .cxd-Checkbox--full.cxd-Checkbox--checkbox input:checked + i:before { width: var(--Checkbox--full-inner-size); height: calc(var(--Checkbox--full-inner-size) / 2); border-color: #fff; } .cxd-Checkbox--full.cxd-Checkbox--checkbox input[disabled] + i { border-color: var(--Checkbox-color); background: var(--checkbox-checkbox-disabled-bg-color); } .cxd-Checkbox--full.cxd-Checkbox--checkbox input[disabled]:checked + i:before { border-color: var(--Checkbox-onDisabled-color); background: var(--Checkbox-onDisabled-bg); border-width: 0 0 0.0625rem 0.0625rem; } .cxd-Checkbox--full.cxd-Checkbox--checkbox input:checked[disabled] + i { border-color: var(--Checkbox-color); background: var(--Checkbox-onDisabled-bg); } .cxd-Checkbox--full.cxd-Checkbox--checkbox > i { position: relative; cursor: pointer; } .cxd-Checkbox--full.cxd-Checkbox--checkbox > i:before { content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-color: transparent; transition: width var(--animation-duration), height var(--animation-duration), transform var(--animation-duration); border-width: 0 0 0.0625rem 0.0625rem; transform: translate(-50%, -90%) rotate(-40deg); border-style: solid; } .cxd-Checkbox--partial.cxd-Checkbox--checkbox input { margin-left: calc(var(--Checkbox-size) * -1); } .cxd-Checkbox--partial.cxd-Checkbox--checkbox input + i { border-color: var(--Checkbox-onHover-color); } .cxd-Checkbox--partial.cxd-Checkbox--checkbox input + i:before { width: var(--Checkbox-inner-size); height: var(--Checkbox-inner-size); background: var(--Checkbox-onHover-color); } .cxd-Checkbox--partial.cxd-Checkbox--checkbox input[disabled] + i { border-color: var(--Checkbox-onDisabled-color); } .cxd-Checkbox--partial.cxd-Checkbox--checkbox input[disabled] + i:before { width: var(--Checkbox-inner-size); height: var(--Checkbox-inner-size); background: var(--Checkbox-inner-onDisabled-bg); } .cxd-Checkbox--partial.cxd-Checkbox--checkbox input:checked[disabled] + i { width: var(--Checkbox-inner-size); height: var(--Checkbox-inner-size); background: var(--Checkbox-onDisabled-bg); } .cxd-Checkbox--button.cxd-Checkbox--checkbox { text-align: center; height: var(--Checkbox-button-height); line-height: var(--Checkbox-button-line-height); padding-left: var(--Checkbox-paddingX); padding-right: var(--Checkbox-paddingX); font-size: var(--fontSizeSm); border: var(--Checkbox-border-width) solid; cursor: pointer; position: relative; display: inline-block; background-color: var(--Checkbox-gb); border-color: var(--Checkbox-color); margin-right: 0; border-radius: calc(var(--Checkbox-borderRadius) * 2); min-width: var(--Checkbox-button-min-width); } .cxd-Checkbox--button.cxd-Checkbox--checkbox > span { line-height: var(--Checkbox-button-line-height); } .cxd-Checkbox--button.cxd-Checkbox--checkbox:hover:not(:disabled) { color: var(--Checkbox-onHover-color); border-color: var(--Checkbox-onHover-color); box-shadow: -1px 0 0 0 var(--Checkbox-onHover-color); } .cxd-Checkbox--button.cxd-Checkbox--checkbox:hover:not(:disabled):first-child { box-shadow: none; } .cxd-Checkbox--button.cxd-Checkbox--checkbox:hover input:checked + i { background: transparent; border-color: var(--button-primary-hover-top-border-color) transparent transparent var(--button-primary-hover-left-border-color); } .cxd-Checkbox--button.cxd-Checkbox--checkbox:active input:checked + i { background: transparent; border-color: var(--Checkbox-checked-onHover-bgColor) transparent transparent var(--Checkbox-checked-onHover-bgColor); } .cxd-Checkbox--button.cxd-Checkbox--checkbox input:checked + i { background: transparent; top: 0; left: 0; width: 0; height: 0; border-width: 0.5rem; border-color: var(--Checkbox-onHover-color) transparent transparent var(--Checkbox-onHover-color); border-radius: 0; } .cxd-Checkbox--button.cxd-Checkbox--checkbox input:checked + i:before { position: absolute; top: 0; left: 0; width: var(--Checkbox--full-inner-size); height: calc(var(--Checkbox--full-inner-size) / 2); transform: translate(-80%, -160%) rotate(-50deg) scale(0.8); background: transparent; } .cxd-Checkbox--button.cxd-Checkbox--checkbox input[disabled] + i { border-color: var(--Checkbox-onDisabled-color); background: transparent; } .cxd-Checkbox--button.cxd-Checkbox--checkbox input[disabled] + i:before { background: transparent; } .cxd-Checkbox--button.cxd-Checkbox--checkbox input:checked[disabled] + i { background: transparent; border-width: 0.4375rem; border-color: var(--Checkbox-inner-disabled-checked-bg) transparent transparent var(--Checkbox-inner-disabled-checked-bg); } .cxd-Checkbox--button.cxd-Checkbox--checkbox input:checked[disabled] + i:before { background: transparent; border-color: var(--Checkbox-inner-onDisabled-color) !important; } .cxd-Checkbox--button.cxd-Checkbox--checkbox > i { position: absolute; top: 0; left: 0; margin-left: 0; border: 0; border-style: solid; background: transparent; } .cxd-Checkbox--button.cxd-Checkbox--checkbox > i + span { max-width: 6.25rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .cxd-Checkbox--button--checked.cxd-Checkbox--checkbox.cxd-Checkbox--button { border-color: var(--Checkbox-onHover-color); color: var(--Checkbox-onHover-color); box-shadow: -1px 0 0 0 var(--Checkbox-onHover-color); } .cxd-Checkbox--button--checked.cxd-Checkbox--checkbox.cxd-Checkbox--button:first-child { box-shadow: none; } .cxd-Checkbox--button--checked.cxd-Checkbox--checkbox.cxd-Checkbox--button:hover { border-color: var(--menu-active-color); color: var(--menu-active-color); box-shadow: -1px 0 0 0 var(--menu-active-color); } .cxd-Checkbox--button--checked.cxd-Checkbox--checkbox.cxd-Checkbox--button:active { border-color: var(--Checkbox-checked-onHover-bgColor); color: var(--Checkbox-checked-onHover-bgColor); box-shadow: -1px 0 0 0 var(--Checkbox-checked-onHover-bgColor); } .cxd-Checkbox--button--disabled--unchecked.cxd-Checkbox--checkbox { background: var(--Checkbox-disabled-unchecked-bg); border-color: var(--Checkbox-color); } .cxd-Checkbox--button--disabled--unchecked.cxd-Checkbox--checkbox:hover { border-color: var(--Checkbox-color) !important; box-shadow: -1px 0 0 0 var(--Checkbox-color) !important; } .cxd-Checkbox--button--disabled--unchecked.cxd-Checkbox--checkbox:hover:first-child { box-shadow: none !important; } .cxd-Checkbox--button--disabled--checked.cxd-Checkbox--checkbox { background: var(--Checkbox-onDisabled-bg); border-color: var(--Checkbox-color) !important; box-shadow: none !important; } .cxd-Checkbox--button--disabled--checked.cxd-Checkbox--checkbox:hover { border-color: var(--Checkbox-color) !important; } .cxd-Checkbox--radio { padding-left: var(--Radio-size); } .cxd-Checkbox--radio input { margin-left: calc(var(--Radio-size) * -1); } .cxd-Checkbox--radio input:checked + i { border-color: var(--Radio-onHover-color); background-color: var(--radio-default-active-bg-color); } .cxd-Checkbox--radio input:checked + i + span { color: var(--radio-default-active-text-color); } .cxd-Checkbox--radio input:checked + i:before { width: var(--Radio-inner-size); height: var(--Radio-inner-size); background: var(--Radio-onHover-color); border-radius: 50%; } .cxd-Checkbox--radio input[disabled] + i { border-color: var(--Radio-onDisabled-color); background: var(--Radio-onDisabled-bg); cursor: not-allowed; } .cxd-Checkbox--radio input[disabled] + i:before { background: var(--Radio-onDisabled-color); } .cxd-Checkbox--radio input[disabled] + i + span { cursor: not-allowed; color: var(--radio-default-disabled-text-color); } .cxd-Checkbox--radio input:focus + i { box-shadow: var(--Radio-onFocus-boxShadow); } .cxd-Checkbox--radio > i { cursor: pointer; width: var(--Radio-size); height: var(--Radio-size); border: 0.0625rem solid var(--Radio-color); margin-left: calc(var(--Radio-size) * -1); margin-top: -0.125rem; border-radius: 50%; background: var(--radio-default-default-bg-color); } .cxd-Checkbox--radio > i + span { color: var(--radio-default-default-text-color); font-size: var(--radio-default-default-fontSize); font-weight: var(--radio-default-default-fontWeight); line-height: var(--radio-default-default-lineHeight); margin-left: var(--radio-default-default-distance); } .cxd-Checkbox--radio:hover input:not(:disabled) + i { border-color: var(--radio-default-hover-color); background-color: var(--radio-default-hover-bg-color); } .cxd-Checkbox--radio:hover input:not(:disabled) + i:before { background: var(--radio-default-hover-color); } .cxd-Checkbox--radio:hover input:not(:disabled) + i + span { color: var(--radio-default-hover-text-color); } .cxd-Checkbox--radio.cxd-Checkbox--button--disabled--unchecked.cxd-Checkbox--full { background: none; } .cxd-Checkbox--radio.cxd-Checkbox--button--disabled--unchecked.cxd-Checkbox--full i { background: var(--FileControl-onDisabled-bg); border: 1px solid var(--menu-border-color); } .cxd-Checkbox--radio.cxd-Checkbox--button--disabled--unchecked.cxd-Checkbox--full i:before { background: var(--Checkbox-inner-onDisabled-bg); } .cxd-Checkbox--sm { padding-left: var(--Checkbox--sm-size); } .cxd-Checkbox--sm input { margin-left: calc(var(--Checkbox--sm-size) * -1); } .cxd-Checkbox--sm input:checked + i:before { width: var(--Checkbox--sm-inner-size); height: var(--Checkbox--sm-inner-size); } .cxd-Checkbox--sm > i { width: var(--Checkbox--sm-size); height: var(--Checkbox--sm-size); margin-left: calc(var(--Checkbox--sm-size) * -1); margin-top: 0; } .cxd-Checkbox--sm > i + span { margin-left: var(--gap-xs); } .cxd-Checkbox--sm.cxd-Checkbox--full input[type=checkbox]:checked + i:before { width: var(--Checkbox--sm--full-inner-size); height: calc(var(--Checkbox--sm--full-inner-size) / 2); } .cxd-Checkbox-desc { color: var(--text--muted-color); margin-left: var(--Checkbox-gap); margin-top: var(--gap-xs); pointer-events: all; } .cxd-Form-static .cxd-Checkbox input[disabled]:checked + i { background: var(--Checkbox-onHover-bg); } .cxd-Form-static .cxd-Checkbox input[disabled]:checked + i:before { background: var(--Checkbox-onHover-bg); border-color: var(--Checkbox-onHover-bg); } .cxd-CheckboxControl, .cxd-RadiosControl, .cxd-CheckboxesControl { padding-top: calc((var(--Form-input-height) - var(--Checkbox-size)) / 2 - 3px); } .cxd-RadiosControl .cxd-Checkbox { display: block; margin: var(--radio-default-vertical-marginTop) var(--radio-default-vertical-marginRight) var(--radio-default-vertical-marginBottom) var(--radio-default-vertical-marginLeft); } .cxd-RadiosControl .cxd-Checkbox--button { margin-bottom: 0; } .cxd-RadiosControl .cxd-Checkbox--button--disabled--unchecked { background: var(--FileControl-onDisabled-bg); } .cxd-RadiosControl .cxd-Checkbox--button-checked:active { border-color: var(--Checkbox-checked-onHover-bgColor); } .cxd-RadiosControl.is-inline .cxd-Checkbox { display: inline-block; margin: var(--radio-default-default-marginTop) var(--radio-default-default-marginRight) var(--radio-default-default-marginBottom) var(--radio-default-default-marginLeft); } .cxd-RadiosControl.is-inline .cxd-Checkbox--button { display: inline-block; margin-right: 0; margin-bottom: 0; } .cxd-CheckboxesControl .cxd-Checkbox { display: block; margin-bottom: var(--Form-label-paddingTop); } .cxd-CheckboxesControl .cxd-Checkbox--button { margin-bottom: 0; } .cxd-CheckboxesControl .cxd-Checkbox--button--disabled--unchecked { background: var(--FileControl-onDisabled-bg); } .cxd-CheckboxesControl .cxd-Checkbox--button-checked:active { border-color: var(--Checkbox-checked-onHover-bgColor); } .cxd-CheckboxesControl.is-inline .cxd-Checkbox { display: inline-block; margin-right: var(--gap-md); } .cxd-CheckboxesControl.is-inline .cxd-Checkbox--button { display: inline-block; margin-right: 0; margin-bottom: 0; } .cxd-CheckboxesControl .cxd-Checkboxes-addBtn > svg { width: 0.875rem; height: 0.875rem; margin-right: var(--Checkbox-gap); } .cxd-RadiosControl-group:not(:first-child), .cxd-CheckboxesControl-group:not(:first-child) { margin-top: 0.625rem; } .cxd-RadiosControl-group .cxd-RadiosControl-groupLabel, .cxd-RadiosControl-group .cxd-CheckboxesControl-groupLabel, .cxd-CheckboxesControl-group .cxd-RadiosControl-groupLabel, .cxd-CheckboxesControl-group .cxd-CheckboxesControl-groupLabel { display: block; font-size: var(--fontSizeSm); color: #999; } .cxd-RadiosControl .cxd-Button:active, .cxd-RadiosControl .cxd-Button.is-active { background: var(--ButtonGroup--primary-isActive-bg); } .cxd-Selection > .cxd-Checkbox { display: block; line-height: var(--Form-input-lineHeight); font-size: var(--Form-input-fontSize); padding: calc((var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize)) / 2) var(--gap-sm) calc((var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize)) / 2) calc(var(--gap-sm) + var(--Checkbox-size)); } .cxd-Selection--inline > .cxd-Checkbox { display: inline-block; } .cxd-Selection-addBtn { display: block; cursor: pointer; } .cxd-Selection-addBtn:hover { text-decoration: none; } .cxd-Selection-addBtn > svg { width: 0.875rem; height: 0.875rem; margin-right: var(--Checkbox-gap); } .cxd-Selection-ellipsis-line { display: inline-block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cxd-GroupedSelection { max-height: 18.75rem; height: 100%; overflow: auto; -webkit-user-select: none; -moz-user-select: none; user-select: none; padding: var(--gap-xs) 0; } .cxd-GroupedSelection-group > .cxd-GroupedSelection-itemLabel { padding: var(--select-group-paddingTop) var(--select-group-paddingRight) var(--select-group-paddingBottom) var(--select-group-paddingLeft); color: var(--select-group-color); font-size: var(--select-group-fontSize); font-weight: var(--select-group-fontWeight); line-height: var(--select-group-lineHeight); } .cxd-GroupedSelection-item { display: flex; color: var(--select-base-default-option-color); background: var(--select-base-default-option-bg-color); line-height: var(--select-base-default-option-line-height); font-size: var(--select-base-default-option-fontSize); font-weight: var(--select-base-default-option-fontWeight); padding: var(--select-base-default-option-paddingTop) var(--select-base-default-option-paddingRight) var(--select-base-default-option-paddingBottom) var(--select-base-default-option-paddingLeft); flex-direction: row; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-GroupedSelection-item > .cxd-Checkbox { margin-right: 0.625rem; } .cxd-GroupedSelection-item:hover { color: var(--Form-select-menu-onHover-color); background: var(--Form-select-menu-onHover-bg); } .cxd-GroupedSelection-item:hover i { border: 1px solid var(--menu-active-color); } .cxd-GroupedSelection-item.is-active, .cxd-GroupedSelection-item.is-focused, .cxd-GroupedSelection-item.is-opened { color: var(--Form-select-menu-onActive-color); background: var(--Form-select-menu-onActive-bg); } .cxd-GroupedSelection-item.is-active:hover, .cxd-GroupedSelection-item.is-focused:hover, .cxd-GroupedSelection-item.is-opened:hover { background: var(--Form-select-menu-onHover-bg); } .cxd-GroupedSelection-item.is-disabled { pointer-events: none; color: var(--Form-select-menu-onDisabled-color); background: var(--Form-select-menu-onDisabled-bg); } .cxd-GroupedSelection-group > .cxd-GroupedSelection-items > .cxd-GroupedSelection-item { padding-left: calc(var(--gap-base) * 2); } .cxd-GroupedSelection-itemLabel { flex-grow: 1; overflow: hidden; } .cxd-GroupedSelection-itemLabel span { vertical-align: middle; white-space: nowrap; } .cxd-GroupedSelection-itemLabel span.is-invalid { color: var(--Form-selectValue-onInvalid-color); } .cxd-GroupedSelection-placeholder { height: var(--Form-input-height); line-height: var(--Form-input-lineHeight); font-size: var(--Form-input-fontSize); padding: calc((var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize)) / 2) var(--gap-sm); color: var(--text--muted-color); height: 100%; display: flex; align-items: center; justify-content: center; } .cxd-TableSelection { position: relative; height: 100%; } .cxd-TableSelection .cxd-Table-content { border-top: var(--Table-borderWidth) solid var(--Table-borderColor); } .cxd-TableSelection .cxd-Table-content.is-virtual { height: 100%; display: flex; flex-direction: column; } .cxd-TableSelection .cxd-Table-content.is-virtual .cxd-Table-content-virtual { min-width: 0; min-height: 0; flex: 1; position: relative; } .cxd-TableSelection .cxd-Table-table > tbody > tr { cursor: pointer; } .cxd-TableSelection .cxd-Table-table > thead > tr > th, .cxd-TableSelection .cxd-Table-table > tbody > tr > td { color: var(--select-table-color); font-size: var(--select-table-fontSize); vertical-align: middle; } .cxd-TableSelection .cxd-Table-table > thead > tr > th { padding: var(--select-table-header-paddingTop) var(--select-table-header-paddingLeft) var(--select-table-header-paddingBottom) var(--select-table-header-paddingLeft); } .cxd-TableSelection .cxd-Table-table > tbody > tr > td { padding: var(--select-table-option-paddingTop) var(--select-table-option-paddingLeft) var(--select-table-option-paddingBottom) var(--select-table-option-paddingLeft); } .cxd-TableSelection .cxd-Table-table > thead > tr > th:last-child { padding-right: var(--select-table-header-paddingRight); } .cxd-TableSelection .cxd-Table-table > tbody > tr > td:last-child { padding-right: var(--select-table-option-paddingRight); } .cxd-TableSelection .cxd-Table-table > tbody > tr.is-active > td { color: var(--Form-select-menu-onActive-color); background: var(--Form-select-menu-onActive-bg); } .cxd-TableSelection .cxd-Table-table > tbody > tr:hover > td, .cxd-TableSelection .cxd-Table-table > tbody > tr.is-hovered > td { color: var(--Form-select-menu-onHover-color); background: var(--Form-select-menu-onHover-bg); } .cxd-TreeSelection.is-scrollable { max-height: 18.75rem; height: 100%; overflow: auto; -webkit-user-select: none; -moz-user-select: none; user-select: none; padding: var(--gap-xs) 0; } .cxd-TreeSelection .cxd-Table-expandBtn { color: var(--icon-color); margin-right: var(--gap-xs); } .cxd-TreeSelection-sublist { position: relative; margin: 0 0 0 1.875rem; display: none; } .cxd-TreeSelection-item { position: relative; margin-bottom: 2px; } .cxd-TreeSelection-item.is-expanded > .cxd-TreeSelection-sublist { display: block; } .cxd-TreeSelection-item:not(:last-child) > .cxd-TreeSelection-sublist:before { bottom: 0; } .cxd-TreeSelection-item.is-disabled > .cxd-TreeSelection-itemInner { cursor: not-allowed; color: var(--text--muted-color); } .cxd-TreeSelection-item .cxd-TreeSelection-itemLabel { white-space: nowrap; } .cxd-TreeSelection-itemInner { display: flex; align-items: center; line-height: var(--Tree-itemHeight); position: relative; font-size: var(--Form-input-fontSize); padding: 0 var(--gap-sm); flex-direction: row; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-TreeSelection-itemInner > .cxd-Checkbox { margin-right: var(--gap-sm); } .cxd-TreeSelection-itemInner:hover { background: var(--Tree-item-onHover-bg); } .cxd-TreeSelection-itemInner.is-active { color: var(--Form-select-menu-onActive-color); } .cxd-TreeSelection-itemInner.is-disabled { pointer-events: none; color: var(--text--muted-color); } .cxd-TreeSelection-itemLabel { flex-grow: 1; } .cxd-TreeSelection-itemLabel span { vertical-align: middle; } .cxd-TreeSelection-placeholder { height: var(--Form-input-height); line-height: var(--Form-input-lineHeight); font-size: var(--Form-input-fontSize); padding: calc((var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize)) / 2) var(--gap-sm); color: var(--text--muted-color); } .cxd-ChainedSelection { display: flex; flex-direction: row; min-height: 100%; flex-wrap: wrap; } .cxd-ChainedSelection-col { position: relative; flex-grow: 1; min-width: 150px; width: 0; } .cxd-ChainedSelection-col:not(:last-child) { border-right: 1px solid var(--borderColor); } .cxd-ChainedSelection-subTitle { font-size: var(--fontSizeSm); padding: var(--gap-xs) var(--gap-xs); color: var(--text--muted-color); } .cxd-ChainedSelection-checkAll { width: 100%; } .cxd-ChainedSelection-item { display: flex; font-size: var(--select-base-default-option-fontSize); font-weight: var(--select-base-default-option-fontWeight); color: var(--select-base-default-option-color); background: var(--select-base-default-option-bg-color); line-height: var(--select-base-default-option-line-height); padding: var(--select-base-default-option-paddingTop) var(--select-base-default-option-paddingRight) var(--select-base-default-option-paddingBottom) var(--select-base-default-option-paddingLeft); flex-direction: row; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-ChainedSelection-item > .cxd-Checkbox { margin-right: 0; } .cxd-ChainedSelection-item.is-active { color: var(--Form-select-menu-onActive-color); background: var(--Form-select-menu-onActive-bg); } .cxd-ChainedSelection-item:hover { color: var(--Form-select-menu-onHover-color); background: var(--Form-select-menu-onHover-bg); } .cxd-ChainedSelection-item.is-disabled { pointer-events: none; color: var(--Form-select-menu-onDisabled-color); background: var(--Form-select-menu-onDisabled-bg); } .cxd-ChainedSelection-itemLabel { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cxd-ChainedSelection-itemLabel span { margin-left: 0.625rem; vertical-align: middle; } .cxd-ChainedSelection-itemLabel span.is-invalid { color: var(--Form-selectValue-onInvalid-color); } .cxd-ChainedSelection-placeholder { height: var(--Form-input-height); line-height: var(--Form-input-lineHeight); font-size: var(--Form-input-fontSize); padding: calc((var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize)) / 2) var(--gap-sm); color: var(--text--muted-color); } .cxd-AssociatedSelection { display: flex; flex-direction: row; } .cxd-AssociatedSelection-left, .cxd-AssociatedSelection-right { position: relative; flex-grow: 1; width: 0; min-height: 12.5rem; max-height: 25rem; overflow: auto; } .cxd-AssociatedSelection-left > .cxd-GroupedSelection, .cxd-AssociatedSelection-right > .cxd-GroupedSelection { padding: 0; max-height: 100%; overflow: unset; } .cxd-AssociatedSelection-left { border-right: 1px solid var(--borderColor); } .cxd-AssociatedSelection-reload { text-align: center; color: var(--info); margin: 20px 0 0; } .cxd-AssociatedSelection-reload.is-clickable { cursor: pointer; } .cxd-AssociatedSelection-box { line-height: var(--Form-input-lineHeight); font-size: var(--fontSizeSm); color: var(--text--muted-color); flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } .cxd-AssociatedSelection-box > p { text-align: center; margin: 10px 0 20px; color: var(--text--muted-color); } .cxd-ResultTreeList { height: 100%; width: 100%; } .cxd-ResultTableList { height: 100%; width: 100%; } .cxd-ResultTableList-close-btn { float: right; cursor: pointer; } .cxd-ChainedDropdownSelection { display: inline-block; } .cxd-ChainedDropdownSelection-item { display: inline-block; } .cxd-DropDownSelection { position: relative; display: inline-block; margin: 0.1875rem; vertical-align: middle; max-width: 100%; } .cxd-DropDownSelection-caret { transition: transform var(--animation-duration) ease-out; margin: 5px; display: flex; color: var(--Form-select-caret-iconColor); } .cxd-DropDownSelection-caret:hover { color: var(--Form-select-caret-onHover-iconColor); } .cxd-DropDownSelection-caret > svg { width: 0.625rem; height: 0.625rem; top: 0; transform: rotate(90deg); } .cxd-DropDownSelection-input.is-active .cxd-DropDownSelection-caret { transform: rotate(180deg); } .cxd-CityPicker .cxd-Select { margin-right: var(--gap-xs); margin-bottom: var(--gap-xs); } .cxd-CityPicker-input { outline: none; vertical-align: top; border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor); border-radius: var(--Form-input-borderRadius); line-height: var(--Form-input-lineHeight); padding: var(--Form-input-paddingY) var(--Form-input-paddingX); font-size: var(--Form-input-fontSize); } .cxd-CityPicker-input::-moz-placeholder { color: var(--Form-input-placeholderColor); -moz-user-select: none; user-select: none; } .cxd-CityPicker-input::placeholder { color: var(--Form-input-placeholderColor); -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-CityPicker-input:focus { border-color: var(--Form-input-onFocused-borderColor); box-shadow: var(--Form-input-boxShadow); background: var(--Form-input-onFocused-bg); } .cxd-Form-item--inline > .cxd-Form-value > .cxd-CityPicker { display: inline-block; } .cxd-CityArea { flex: 1; min-width: 0; min-height: 0; text-align: right; } .cxd-CityArea-popup { height: 17.5rem; } .cxd-CityArea-Input { margin-top: var(--gap-xs); outline: none; vertical-align: top; border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor); border-radius: var(--Form-input-borderRadius); line-height: var(--Form-input-lineHeight); padding: var(--Form-input-paddingY) var(--Form-input-paddingX); font-size: var(--Form-input-fontSize); display: inline-flex !important; } .cxd-CityArea-Input.is-focused, .cxd-CityArea-Input:hover { border: none !important; } .cxd-CityArea-Input::-moz-placeholder { color: var(--Form-input-placeholderColor); -moz-user-select: none; user-select: none; } .cxd-CityArea-Input::placeholder { color: var(--Form-input-placeholderColor); -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-CityArea-Input:focus { border-color: var(--Form-input-onFocused-borderColor); box-shadow: var(--Form-input-boxShadow); background: var(--Form-input-onFocused-bg); } .cxd-Switch { cursor: pointer; position: relative; display: inline-block; height: var(--Switch-height); min-width: var(--Switch-width); overflow: hidden; border-radius: var(--switch-size-default-top-left-border-radius) var(--switch-size-default-top-right-border-radius) var(--switch-size-default-bottom-right-border-radius) var(--switch-size-default-bottom-left-border-radius); background: var(--Switch-bgColor); margin: 0; vertical-align: middle; text-align: left; transition: all 0.5s ease; } .cxd-Switch.is-disabled { cursor: not-allowed; opacity: 0.4; } .cxd-Switch .text { margin: var(--switch-text-off-marginTop) var(--Switch-text-marginRight) var(--switch-text-off-marginBottom) var(--Switch-text-marginLeft); color: var(--Switch-valueColor); text-indent: var(--gap-xs); text-transform: uppercase; font-size: var(--switch-text-off-fontSize); font-weight: var(--switch-text-off-fontWeight); line-height: var(--Switch-height); vertical-align: super; font-style: normal; transition: all var(--animation-duration); } .cxd-Switch .text > svg { width: var(--switch-text-off-fontSize); height: var(--switch-text-off-fontSize); margin-top: calc((var(--Switch-height) - var(--switch-text-off-fontSize)) / 2); } .cxd-Switch .slider:before { content: ""; position: absolute; background: var(--switch-default-off-slider-color); width: var(--Switch-slider-width); top: var(--Switch-slider-margin); bottom: var(--Switch-slider-margin); left: var(--Switch-slider-margin); border-radius: 50%; transition: var(--Switch-slider-transition); } .cxd-Switch:hover { background: var(--Switch-onHover-bgColor); } .cxd-Switch.is-checked { background: var(--Switch-checked-bgColor); } .cxd-Switch.is-checked .slider::before { left: calc(100% - var(--Switch-slider-width) - var(--Switch-slider-margin)); right: var(--Switch-slider-margin); border-width: 0; background: var(--switch-default-on-slider-color); } .cxd-Switch.is-checked .text { margin: var(--switch-text-on-marginTop) var(--switch-text-on-marginRight) var(--switch-text-on-marginBottom) var(--switch-text-on-marginLeft); color: var(--switch-text-on-color); font-size: var(--switch-text-on-fontSize); font-weight: var(--switch-text-on-fontWeight); } .cxd-Switch.is-checked:hover { background: var(--Switch-checked-onHover-bgColor); } .cxd-Switch.is-checked:active { background: var(--Switch-checked-onActive-bgColor); } .cxd-Switch.is-checked:active .slider::before { left: calc(100% - (var(--Switch-height) + 0.125rem) - 0.125rem); } .cxd-Switch.is-checked.is-disabled .slider:before { color: var(--Switch-onDisabled-color); } .cxd-Switch.is-checked.is-disabled .text { color: var(--Switch-onDisabled-color); } .cxd-Switch input { position: absolute; opacity: 0; } .cxd-Switch--sm { height: var(--Switch-height--sm); min-width: var(--Switch-width--sm); border-radius: var(--switch-size-sm-top-left-border-radius) var(--switch-size-sm-top-right-border-radius) var(--switch-size-sm-bottom-right-border-radius) var(--switch-size-sm-bottom-left-border-radius); } .cxd-Switch--sm .text { line-height: var(--Switch-height--sm); margin: var(--switch-text-off-marginTop) var(--Switch-text-marginRight--sm) var(--switch-text-off-marginBottom) var(--Switch-text-marginLeft--sm); } .cxd-Switch--sm .text > svg { margin-top: calc((var(--Switch-height--sm) - var(--fontSizeSm)) / 2); } .cxd-Switch--sm .slider::before { width: var(--Switch-slider-width--sm); top: var(--switch-size-sm-slider-margin); bottom: var(--switch-size-sm-slider-margin); left: var(--switch-size-sm-slider-margin); right: auto; } .cxd-Switch--sm.is-checked .slider::before { left: calc(100% - var(--Switch-slider-width--sm) - var(--switch-size-sm-slider-margin)); right: var(--switch-size-sm-slider-margin); } .cxd-Switch:active .slider::before { width: calc(var(--Switch-height) + 0.125rem); border-radius: 10px; } .cxd-Switch-spinner { position: absolute; top: var(--Switch-slider-margin); bottom: var(--Switch-slider-margin); left: var(--Switch-slider-margin); } .cxd-Switch-spinner > .cxd-Switch-spinner-icon > svg.icon { width: var(--Switch-spinner-icon-width); height: var(--Switch-spinner-icon-width); } .cxd-Switch-spinner--sm { position: absolute; top: var(--switch-size-sm-slider-margin); bottom: var(--switch-size-sm-slider-margin); left: var(--switch-spinner-left--sm); } .cxd-Switch-spinner--sm > .cxd-Switch-spinner-icon > svg.icon { width: var(--Switch-spinner-icon-width--sm); height: var(--Switch-spinner-icon-width--sm); } .cxd-Switch-spinner.cxd-Switch-spinner--checked { left: calc(100% - var(--Switch-slider-width) - var(--Switch-slider-margin)); right: var(--Switch-slider-margin); } .cxd-Switch-spinner.cxd-Switch-spinner--checked.cxd-Switch-spinner--sm { left: calc(100% - var(--Switch-slider-width--sm) - var(--Switch-slider-margin)); right: var(--Switch-slider-margin); } .cxd-Switch-option { vertical-align: middle; font-size: var(--switch-option-fontSize); font-weight: var(--switch-option-fontWeight); line-height: var(--switch-option-lineHeight); color: var(--switch-option-color); margin: var(--switch-option-marginTop) var(--switch-option-marginRight) var(--switch-option-marginBottom) var(--Switch-gap); } .cxd-Switch-option:first-child { margin-left: 0; margin-right: var(--Switch-gap); } .cxd-Switch-option:empty { display: none; } .cxd-Form-static .cxd-Switch-option { vertical-align: initial; color: var(--text--muted-color); } .cxd-SwitchControl { padding-top: calc((var(--Form-input-height) - var(--Switch-height)) / 2); } .cxd-SwitchControl.is-inline { display: inline-block; } .cxd-Number { margin: 0; padding: 0; line-height: var(--Form-input-height); font-size: var(--Form-input-fontSize); height: var(--Form-input-height); display: inline-block; vertical-align: middle; background: var(--Number-bg); border: var(--Number-borderWidth) solid var(--Form-input-borderColor); border-radius: var(--Number-borderRadius); overflow: hidden; position: relative; border-width: var(--inputNumber-base-default-top-border-width) var(--inputNumber-base-default-right-border-width) var(--inputNumber-base-default-bottom-border-width) var(--inputNumber-base-default-left-border-width); border-style: var(--inputNumber-base-default-top-border-style) var(--inputNumber-base-default-right-border-style) var(--inputNumber-base-default-bottom-border-style) var(--inputNumber-base-default-left-border-style); border-color: var(--inputNumber-base-default-top-border-color) var(--inputNumber-base-default-right-border-color) var(--inputNumber-base-default-bottom-border-color) var(--inputNumber-base-default-left-border-color); border-radius: var(--inputNumber-base-default-top-left-border-radius) var(--inputNumber-base-default-top-right-border-radius) var(--inputNumber-base-default-bottom-right-border-radius) var(--inputNumber-base-default-bottom-left-border-radius); background: var(--inputNumber-base-default-bg-color); } .cxd-Number:hover { border-width: var(--inputNumber-base-hover-top-border-width) var(--inputNumber-base-hover-right-border-width) var(--inputNumber-base-hover-bottom-border-width) var(--inputNumber-base-hover-left-border-width); border-style: var(--inputNumber-base-hover-top-border-style) var(--inputNumber-base-hover-right-border-style) var(--inputNumber-base-hover-bottom-border-style) var(--inputNumber-base-hover-left-border-style); border-color: var(--inputNumber-base-hover-top-border-color) var(--inputNumber-base-hover-right-border-color) var(--inputNumber-base-hover-bottom-border-color) var(--inputNumber-base-hover-left-border-color); border-radius: var(--inputNumber-base-hover-top-left-border-radius) var(--inputNumber-base-hover-top-right-border-radius) var(--inputNumber-base-hover-bottom-right-border-radius) var(--inputNumber-base-hover-bottom-left-border-radius); background: var(--inputNumber-base-hover-bg-color); } .cxd-Number-focused { border-width: var(--inputNumber-base-active-top-border-width) var(--inputNumber-base-active-right-border-width) var(--inputNumber-base-active-bottom-border-width) var(--inputNumber-base-active-left-border-width); border-style: var(--inputNumber-base-active-top-border-style) var(--inputNumber-base-active-right-border-style) var(--inputNumber-base-active-bottom-border-style) var(--inputNumber-base-active-left-border-style); border-color: var(--inputNumber-base-active-top-border-color) var(--inputNumber-base-active-right-border-color) var(--inputNumber-base-active-bottom-border-color) var(--inputNumber-base-active-left-border-color); border-radius: var(--inputNumber-base-active-top-left-border-radius) var(--inputNumber-base-active-top-right-border-radius) var(--inputNumber-base-active-bottom-right-border-radius) var(--inputNumber-base-active-bottom-left-border-radius); background: var(--inputNumber-base-active-bg-color); box-shadow: var(--inputNumber-base-active-shadow); } .cxd-Number.is-mobile { border: none; } .cxd-Number.is-mobile-focused { border: none; } .cxd-Number-disabled { border-width: var(--inputNumber-base-disabled-top-border-width) var(--inputNumber-base-disabled-right-border-width) var(--inputNumber-base-disabled-bottom-border-width) var(--inputNumber-base-disabled-left-border-width); border-style: var(--inputNumber-base-disabled-top-border-style) var(--inputNumber-base-disabled-right-border-style) var(--inputNumber-base-disabled-bottom-border-style) var(--inputNumber-base-disabled-left-border-style); border-color: var(--inputNumber-base-disabled-top-border-color) var(--inputNumber-base-disabled-right-border-color) var(--inputNumber-base-disabled-bottom-border-color) var(--inputNumber-base-disabled-left-border-color); border-radius: var(--inputNumber-base-disabled-top-left-border-radius) var(--inputNumber-base-disabled-top-right-border-radius) var(--inputNumber-base-disabled-bottom-right-border-radius) var(--inputNumber-base-disabled-bottom-left-border-radius); background: var(--inputNumber-base-disabled-bg-color); } .cxd-Number-readonly { border-color: var(--inputNumber-base-default-top-border-color) var(--inputNumber-base-default-right-border-color) var(--inputNumber-base-default-bottom-border-color) var(--inputNumber-base-default-left-border-color); } .cxd-Number--borderHalf { border-left-color: transparent !important; border-right-color: transparent !important; border-top-color: transparent !important; } .cxd-Number--borderNone { border-color: transparent !important; } .cxd-Number-handler { text-align: center; overflow: hidden; display: block; touch-action: none; } .cxd-Number-handler-active { background: #ddd; } .cxd-Number-handler-up-inner, .cxd-Number-handler-down-inner { -moz-user-select: none; user-select: none; -webkit-user-select: none; display: inline-block; } .cxd-Number:hover .cxd-Number-handler-wrap { display: block; } .cxd-Number.no-steps > .cxd-Number-handler-wrap { display: none; } .cxd-Number-readonly:hover, .cxd-Number-disabled:hover { border-color: var(--Form-input-onDisabled-borderColor); } .cxd-Number-input-wrap { overflow: hidden; height: 100%; } .cxd-Number-input { width: 100%; background: transparent; text-align: left; vertical-align: top; outline: 0; -moz-appearance: textfield; line-height: calc(var(--Form-input-height) - var(--Number-borderWidth) * 2); height: 100%; transition: all var(--animation-duration) ease; border: 0; border-radius: var(--Form-input-borderRadius); color: var(--Form-input-color); padding: 0 var(--inputNumber-base-default-paddingRight) 0 var(--inputNumber-base-default-paddingLeft); } .cxd-Number-input::-moz-placeholder { color: var(--Form-input-placeholderColor); -moz-user-select: none; user-select: none; } .cxd-Number-input::placeholder { color: var(--Form-input-placeholderColor); -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-Number-handler { background: var(--Number-handler-bg); color: var(--Number-handler-color); font-family: var(--Number-handler-fontFamily); font-size: var(--Number-handler-fontSize); } .cxd-Number-handler:hover { background: var(--Number-handler-onHover-bg); color: var(--Number-handler-onHover-color); cursor: pointer; } .cxd-Number-handler:hover:active { background: var(--Number-handler-onActive-bg); color: var(--inputNumber-base-active-icon-color); } .cxd-Number-handler-up-inner { transform: var(--Number-handler--up-transform); } .cxd-Number-handler-up-inner:after { content: var(--Number-handler--up-content); } .cxd-Number-handler-down-inner:after { content: var(--Number-handler--down-content); } .cxd-Number-handler-wrap { display: none; position: absolute; right: 0; border-left: 0.0625rem solid var(--Form-input-borderColor); width: var(--Number-handler-width); height: 100%; outline: var(--inputNumber-base-default-paddingRight) var(--inputNumber-base-default-bg-color) solid; } .cxd-Number-handler { line-height: calc((var(--Form-input-height) - 0.375rem) / 2); height: calc((var(--Form-input-height) - var(--Number-borderWidth) * 2) / 2); } .cxd-Number-handler-up { border-bottom: var(--Number-handler-borderBottom); padding-top: 0.0625rem; } .cxd-Number-handler-down-disabled, .cxd-Number-handler-up-disabled { background: var(--Number-handler-onDisabled-bg); pointer-events: none; color: var(--Number-handler-onDisabled-color); } .is-error > .cxd-Number { border-color: var(--Form-input-onError-borderColor); background: var(--Form-input-onError-bg); } .cxd-Number-disabled { border-color: var(--Form-input-onDisabled-borderColor); } .cxd-Number-disabled .cxd-Number-input { opacity: 0.72; cursor: not-allowed; color: var(--text--muted-color); background: var(--Form-input-onDisabled-bg); border-color: var(--Form-input-onDisabled-borderColor); } .cxd-Number-disabled .cxd-Number-handler-wrap { border-color: var(--Form-input-onDisabled-borderColor); } .cxd-Number-disabled .cxd-Number-handler { cursor: not-allowed; color: var(--text--muted-color); background: var(--Form-input-onDisabled-bg); border-color: var(--Form-input-onDisabled-borderColor); opacity: 0.72; } .cxd-Number-disabled .cxd-Number-handler:hover { color: var(--text--muted-color); border-color: var(--Form-input-borderColor); } .cxd-Number-disabled .cxd-Number-handler:hover:active { background: var(--Form-input-onDisabled-bg); } .cxd-Form-control--sizeSm > .cxd-Number { height: var(--inputNumber-size-sm-height); } .cxd-Form-control--sizeMd > .cxd-Number { height: var(--inputNumber-size-md-height); } .cxd-Form-control--sizeLg > .cxd-Number { height: var(--inputNumber-size-lg-height); } .cxd-NumberControl:not(.is-inline) > .cxd-Number { display: block; } .cxd-Number--borderHalf .cxd-Number-handler-wrap, .cxd-Number--borderNone .cxd-Number-handler-wrap { border-left: none; } .cxd-NumberControl--withUnit { display: flex !important; } .cxd-NumberControl--withUnit:hover .cxd-Number, .cxd-NumberControl--withUnit:hover .cxd-NumberControl-unit { border-width: var(--inputNumber-base-hover-top-border-width) var(--inputNumber-base-hover-right-border-width) var(--inputNumber-base-hover-bottom-border-width) var(--inputNumber-base-hover-left-border-width); border-style: var(--inputNumber-base-hover-top-border-style) var(--inputNumber-base-hover-right-border-style) var(--inputNumber-base-hover-bottom-border-style) var(--inputNumber-base-hover-left-border-style); border-color: var(--inputNumber-base-hover-top-border-color) var(--inputNumber-base-hover-right-border-color) var(--inputNumber-base-hover-bottom-border-color) var(--inputNumber-base-hover-left-border-color); border-radius: var(--inputNumber-base-hover-top-left-border-radius) var(--inputNumber-base-hover-top-right-border-radius) var(--inputNumber-base-hover-bottom-right-border-radius) var(--inputNumber-base-hover-bottom-left-border-radius); } .cxd-NumberControl--withUnit:hover .cxd-Number-readonly, .cxd-NumberControl--withUnit:hover .cxd-NumberControl-unit-readonly { border-color: var(--Form-input-onDisabled-borderColor); } .cxd-NumberControl--withUnit:hover .cxd-NumberControl-readonly { border-color: var(--Form-input-onDisabled-borderColor); } .cxd-NumberControl--withUnit .cxd-Number { flex-grow: 1; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-right: none !important; } .cxd-NumberControl--withUnit .cxd-Number-focused + .cxd-NumberControl-unit { border-width: var(--inputNumber-base-active-top-border-width) var(--inputNumber-base-active-right-border-width) var(--inputNumber-base-active-bottom-border-width) var(--inputNumber-base-active-left-border-width); border-style: var(--inputNumber-base-active-top-border-style) var(--inputNumber-base-active-right-border-style) var(--inputNumber-base-active-bottom-border-style) var(--inputNumber-base-active-left-border-style); border-color: var(--inputNumber-base-active-top-border-color) var(--inputNumber-base-active-right-border-color) var(--inputNumber-base-active-bottom-border-color) var(--inputNumber-base-active-left-border-color); border-radius: var(--inputNumber-base-active-top-left-border-radius) var(--inputNumber-base-active-top-right-border-radius) var(--inputNumber-base-active-bottom-right-border-radius) var(--inputNumber-base-active-bottom-left-border-radius); } .cxd-NumberControl--withUnit .cxd-Number-focused + .cxd-NumberControl-readonly { border-color: var(--Form-input-onDisabled-borderColor); } .cxd-NumberControl--withUnit .cxd-NumberControl-unit { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; background-color: var(--inputNumber-base-unit-bg-color); min-width: var(--inputNumber-base-default-unit-width); padding: var(--inputNumber-base-default-unit-paddingTop) var(--inputNumber-base-default-unit-paddingRight) var(--inputNumber-base-default-unit-paddingBottom) var(--inputNumber-base-default-unit-paddingLeft); } .cxd-NumberControl--withUnit .cxd-NumberControl-unit .cxd-Select-valueWrap { width: auto !important; } .cxd-NumberControl--withUnit .cxd-NumberControl-single-unit { cursor: default; text-align: center; min-width: unset; padding: 0 var(--inputNumber-base-default-unit-paddingLeft); } .cxd-Number--enhance { display: inline-flex; align-items: center; border: var(--Number-borderWidth) solid var(--Number-borderColor); border-radius: var(--Number-borderRadius); overflow: hidden; border-width: var(--inputNumber-enhance-default-top-border-width) var(--inputNumber-enhance-default-right-border-width) var(--inputNumber-enhance-default-bottom-border-width) var(--inputNumber-enhance-default-left-border-width); border-style: var(--inputNumber-enhance-default-top-border-style) var(--inputNumber-enhance-default-right-border-style) var(--inputNumber-enhance-default-bottom-border-style) var(--inputNumber-enhance-default-left-border-style); border-color: var(--inputNumber-enhance-default-top-border-color) var(--inputNumber-enhance-default-right-border-color) var(--inputNumber-enhance-default-bottom-border-color) var(--inputNumber-enhance-default-left-border-color); border-radius: var(--inputNumber-enhance-default-top-left-border-radius) var(--inputNumber-enhance-default-top-right-border-radius) var(--inputNumber-enhance-default-bottom-right-border-radius) var(--inputNumber-enhance-default-bottom-left-border-radius); } .cxd-Number--enhance .cxd-Number--enhance-input { background: var(--inputNumber-enhance-default-bg-color); } .cxd-Number--enhance:hover { border-width: var(--inputNumber-enhance-hover-top-border-width) var(--inputNumber-enhance-hover-right-border-width) var(--inputNumber-enhance-hover-bottom-border-width) var(--inputNumber-enhance-hover-left-border-width); border-style: var(--inputNumber-enhance-hover-top-border-style) var(--inputNumber-enhance-hover-right-border-style) var(--inputNumber-enhance-hover-bottom-border-style) var(--inputNumber-enhance-hover-left-border-style); border-color: var(--inputNumber-enhance-hover-top-border-color) var(--inputNumber-enhance-hover-right-border-color) var(--inputNumber-enhance-hover-bottom-border-color) var(--inputNumber-enhance-hover-left-border-color); border-radius: var(--inputNumber-enhance-hover-top-left-border-radius) var(--inputNumber-enhance-hover-top-right-border-radius) var(--inputNumber-enhance-hover-bottom-right-border-radius) var(--inputNumber-enhance-hover-bottom-left-border-radius); } .cxd-Number--enhance:hover .cxd-Number--enhance-input { background: var(--inputNumber-enhance-hover-bg-color); } .cxd-Number--enhance:focus-within { border-width: var(--inputNumber-enhance-active-top-border-width) var(--inputNumber-enhance-active-right-border-width) var(--inputNumber-enhance-active-bottom-border-width) var(--inputNumber-enhance-active-left-border-width); border-style: var(--inputNumber-enhance-active-top-border-style) var(--inputNumber-enhance-active-right-border-style) var(--inputNumber-enhance-active-bottom-border-style) var(--inputNumber-enhance-active-left-border-style); border-color: var(--inputNumber-enhance-active-top-border-color) var(--inputNumber-enhance-active-right-border-color) var(--inputNumber-enhance-active-bottom-border-color) var(--inputNumber-enhance-active-left-border-color); border-radius: var(--inputNumber-enhance-active-top-left-border-radius) var(--inputNumber-enhance-active-top-right-border-radius) var(--inputNumber-enhance-active-bottom-right-border-radius) var(--inputNumber-enhance-active-bottom-left-border-radius); } .cxd-Number--enhance:focus-within .cxd-Number--enhance-input { background: var(--inputNumber-enhance-active-bg-color); } .cxd-Number--enhance-disabled { border-width: var(--inputNumber-enhance-disabled-top-border-width) var(--inputNumber-enhance-disabled-right-border-width) var(--inputNumber-enhance-disabled-bottom-border-width) var(--inputNumber-enhance-disabled-left-border-width); border-style: var(--inputNumber-enhance-disabled-top-border-style) var(--inputNumber-enhance-disabled-right-border-style) var(--inputNumber-enhance-disabled-bottom-border-style) var(--inputNumber-enhance-disabled-left-border-style); border-color: var(--inputNumber-enhance-disabled-top-border-color) var(--inputNumber-enhance-disabled-right-border-color) var(--inputNumber-enhance-disabled-bottom-border-color) var(--inputNumber-enhance-disabled-left-border-color); border-radius: var(--inputNumber-enhance-disabled-top-left-border-radius) var(--inputNumber-enhance-disabled-top-right-border-radius) var(--inputNumber-enhance-disabled-bottom-right-border-radius) var(--inputNumber-enhance-disabled-bottom-left-border-radius); } .cxd-Number--enhance-disabled .cxd-Number--enhance-input { background: var(--inputNumber-enhance-disabled-bg-color); } .cxd-Number--enhance .cxd-Number-input { padding: var(--inputNumber-enhance-default-paddingTop) var(--inputNumber-enhance-default-paddingRight) var(--inputNumber-enhance-default-paddingBottom) var(--inputNumber-enhance-default-paddingLeft); } .cxd-Number--enhance .cxd-Number--enhance-left-icon, .cxd-Number--enhance .cxd-Number--enhance-right-icon { display: inline-block; width: var(--Form-inputNumber-base-width); height: var(--Form-inputNumber-base-height); line-height: var(--Form-inputNumber-base-height); text-align: center; color: var(--inputNumber-enhance-leftIcon-default-color); } .cxd-Number--enhance .cxd-Number--enhance-left-icon > svg, .cxd-Number--enhance .cxd-Number--enhance-right-icon > svg { width: var(--fontSizeSm); height: var(--fontSizeSm); } .cxd-Number--enhance .cxd-Number--enhance-left-icon { background: var(--inputNumber-enhance-leftIcon-default-bg-color); } .cxd-Number--enhance .cxd-Number--enhance-left-icon:hover { cursor: pointer; background: var(--inputNumber-enhance-leftIcon-hover-bg-color); } .cxd-Number--enhance .cxd-Number--enhance-left-icon-focused { background: var(--inputNumber-enhance-leftIcon-active-bg-color); } .cxd-Number--enhance .cxd-Number--enhance-left-icon .InputNumber-enhance-minus { content: var(--inputNumber-enhance-leftIcon-default-icon); } .cxd-Number--enhance .cxd-Number--enhance-left-icon svg { width: var(--inputNumber-enhance-leftIcon-default-width); height: var(--inputNumber-enhance-leftIcon-default-height); color: var(--inputNumber-enhance-leftIcon-default-color); } .cxd-Number--enhance .cxd-Number--enhance-left-icon svg:hover { color: var(--inputNumber-enhance-leftIcon-hover-color); } .cxd-Number--enhance .cxd-Number--enhance-left-icon svg:active { color: var(--inputNumber-enhance-leftIcon-active-color); } .cxd-Number--enhance .cxd-Number--enhance-right-icon { cursor: pointer; background: var(--inputNumber-enhance-rightIcon-default-bg-color); } .cxd-Number--enhance .cxd-Number--enhance-right-icon:hover { background: var(--inputNumber-enhance-rightIcon-hover-bg-color); } .cxd-Number--enhance .cxd-Number--enhance-right-icon:active { background: var(--inputNumber-enhance-rightIcon-active-bg-color); } .cxd-Number--enhance .cxd-Number--enhance-right-icon .InputNumber-enhance-plus { content: var(--inputNumber-enhance-rightIcon-default-icon); } .cxd-Number--enhance .cxd-Number--enhance-right-icon svg { width: var(--inputNumber-enhance-rightIcon-default-height); height: var(--inputNumber-enhance-rightIcon-default-width); color: var(--inputNumber-enhance-rightIcon-default-color); } .cxd-Number--enhance .cxd-Number--enhance-right-icon svg:hover { color: var(--inputNumber-enhance-rightIcon-hover-color); } .cxd-Number--enhance .cxd-Number--enhance-right-icon svg:active { color: var(--inputNumber-enhance-rightIcon-active-color); } .cxd-Number--enhance .cxd-Number--enhance-left-icon { border-top-left-radius: var(--Number-borderRadius); border-bottom-left-radius: var(--Number-borderRadius); } .cxd-Number--enhance .cxd-Number--enhance-right-icon { border-top-right-radius: var(--Number-borderRadius); border-bottom-right-radius: var(--Number-borderRadius); } .cxd-Number--enhance .cxd-Number--enhance-input { min-width: 0; min-height: 0; flex: 1; border: 0; border-left: var(--Number-borderWidth) solid var(--Number-borderColor); border-right: var(--Number-borderWidth) solid var(--Number-borderColor); border-radius: 0; } .cxd-Number--enhance .cxd-Number--enhance-input .cxd-Number-handler-wrap { display: none; } .cxd-Number--enhance:hover { border-color: var(--Form-input-onFocused-borderColor); } .cxd-Number--enhance .cxd-Number--enhance-border-min, .cxd-Number--enhance .cxd-Number--enhance-border-max { background: var(--Number-handler-onDisabled-bg); pointer-events: none; color: var(--Number-handler-onDisabled-color); } .cxd-Number--enhance .cxd-Number--enhance-border-min:hover, .cxd-Number--enhance .cxd-Number--enhance-border-max:hover { background: var(--Number-handler-onDisabled-bg); color: var(--Number-handler-onDisabled-color); } .cxd-Number--enhance .cxd-Number--enhance-border-disabled { background: var(--inputNumber-enhance-disabled-bg-color); cursor: not-allowed; } .cxd-Number--enhance .cxd-Number--enhance-border-disabled:hover { cursor: not-allowed; background: var(--inputNumber-enhance-disabled-bg-color); } .cxd-Number--enhance .cxd-Number--enhance-border-readOnly:hover, .cxd-Number--enhance .cxd-Number--enhance-border-readOnly:hover { color: var(--Number-handler-onHover-color); } .cxd-Number--enhance-no-steps .cxd-Number--enhance-left-icon, .cxd-Number--enhance-no-steps .cxd-Number--enhance-right-icon { display: none; } .cxd-Number--enhance-no-steps .cxd-Number--enhance-input { border: none; border-radius: var(--Number-borderRadius); } .cxd-Number--enhance-disabled .cxd-Number--enhance-input { border-color: var(--Form-input-onDisabled-borderColor); } .cxd-Number--enhance-disabled:hover { border-color: var(--Number-borderColor); } .cxd-Number--enhance-borderNone, .cxd-Number--enhance-borderHalf { border: none; } .cxd-Select { display: inline-flex; /* select 标签样式 */ vertical-align: middle; text-align: left; align-items: center; outline: none; position: relative; font-size: var(--select-base-default-fontSize); font-weight: var(--select-base-default-fontWeight); border-width: var(--Form-select-borderWidth); border-style: var(--select-base-default-top-border-style) var(--select-base-default-right-border-style) var(--select-base-default-bottom-border-style) var(--select-base-default-left-border-style); border-color: var(--Form-select-borderColor); background: var(--Form-select-bg); border-radius: var(--Form-select-borderRadius); min-height: var(--Form-selectOption-height); padding: var(--select-base-default-paddingTop) var(--select-base-default-paddingRight) var(--select-base-default-paddingBottom) var(--select-base-default-paddingLeft); cursor: pointer; color: var(--Form-select-color); transition: all var(--animation-duration) ease-in-out; } .cxd-Select--block { display: flex; } .cxd-Select:hover { background: var(--Form-select-onHover-bg); border-width: var(--select-base-hover-top-border-width) var(--select-base-hover-right-border-width) var(--select-base-hover-bottom-border-width) var(--select-base-hover-left-border-width); border-style: var(--select-base-hover-top-border-style) var(--select-base-hover-right-border-style) var(--select-base-hover-bottom-border-style) var(--select-base-hover-left-border-style); border-color: var(--select-base-hover-top-border-color) var(--select-base-hover-right-border-color) var(--select-base-hover-bottom-border-color) var(--select-base-hover-left-border-color); } .cxd-Select:hover .cxd-Select-arrow:before { color: var(--Form-select-caret-onHover-iconColor); } .cxd-Select:active { border-width: var(--select-base-active-top-border-width) var(--select-base-active-right-border-width) var(--select-base-active-bottom-border-width) var(--select-base-active-left-border-width); border-style: var(--select-base-active-top-border-style) var(--select-base-active-right-border-style) var(--select-base-active-bottom-border-style) var(--select-base-active-left-border-style); border-color: var(--select-base-active-top-border-color) var(--select-base-active-right-border-color) var(--select-base-active-bottom-border-color) var(--select-base-active-left-border-color); box-shadow: var(--select-base-active-shadow); background: var(--select-base-active-bg-color); } .cxd-Select.is-focused:not(.is-mobile), .cxd-Select.is-opened:not(.is-mobile) { border-width: var(--select-base-active-top-border-width) var(--select-base-active-right-border-width) var(--select-base-active-bottom-border-width) var(--select-base-active-left-border-width); border-style: var(--select-base-active-top-border-style) var(--select-base-active-right-border-style) var(--select-base-active-bottom-border-style) var(--select-base-active-left-border-style); border-color: var(--select-base-active-top-border-color) var(--select-base-active-right-border-color) var(--select-base-active-bottom-border-color) var(--select-base-active-left-border-color); box-shadow: var(--select-base-active-shadow); background: var(--select-base-active-bg-color); color: var(--Form-select-onFocused-color); } .cxd-Select.is-disabled { border-width: var(--select-base-disabled-top-border-width) var(--select-base-disabled-right-border-width) var(--select-base-disabled-bottom-border-width) var(--select-base-disabled-left-border-width); border-style: var(--select-base-disabled-top-border-style) var(--select-base-disabled-right-border-style) var(--select-base-disabled-bottom-border-style) var(--select-base-disabled-left-border-style); border-color: var(--select-base-disabled-top-border-color) var(--select-base-disabled-right-border-color) var(--select-base-disabled-bottom-border-color) var(--select-base-disabled-left-border-color); background: var(--select-base-disabled-bg-color); } .cxd-Select:focus { box-shadow: var(--Form-select-onFocus-boxShadow); } .cxd-Select .cxd-PopOver.cxd-Select-popover.cxd-PopOver--v-top { margin-top: 0.25rem; } .cxd-Select .cxd-PopOver.cxd-Select-popover.cxd-PopOver--v-bottom { margin-bottom: 0.25rem; } .cxd-Select .cxd-PopOver.cxd-Select-popover .cxd-Select-menu .cxd-Checkbox span { line-height: var(--select-base-default-option-line-height); height: var(--select-base-default-option-line-height); } .cxd-Select .cxd-PopOver.cxd-Select-popover .cxd-Select-menu .cxd-Select-option { line-height: var(--select-base-default-option-line-height); height: var(--select-base-default-option-line-height); } .cxd-Select .cxd-PopOver.cxd-Select-popover .cxd-Select-menu .cxd-Select-addBtn { line-height: var(--select-base-default-option-line-height); height: var(--select-base-default-option-line-height); } .cxd-Select--borderHalf { border-left-color: transparent !important; border-right-color: transparent !important; border-top-color: transparent !important; } .cxd-Select--borderNone { border-color: transparent !important; } .cxd-Select-valueWrap { -webkit-user-select: none; -moz-user-select: none; user-select: none; position: relative; flex-grow: 1; width: auto; max-width: 100%; overflow: hidden; padding-right: 0.25rem; } .cxd-Select-valuesNoWrap { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; line-height: 1.25rem; } .cxd-Select-placeholder { color: var(--Form-select-placeholderColor); line-height: var(--Form-input-lineHeight); -webkit-user-select: none; -moz-user-select: none; user-select: none; white-space: nowrap; color: var(--Form-select-placeholderColor); } .cxd-Select-value { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .cxd-Select-value.is-invalid { color: var(--Form-selectValue-onInvalid-color); } .cxd-Select-value.is-disabled { color: var(--Form-selectValue-onDisabled-color); } .cxd-Select--multi { height: auto; min-height: var(--Form-selectOption-height); padding: var(--select-base-default-paddingTop) var(--select-base-default-paddingRight) var(--select-base-default-paddingBottom) var(--select-base-default-paddingLeft); } .cxd-Select--multi .cxd-Select-valueWrap > input { display: inline-block; width: 6.25rem; margin-bottom: var(--gap-xs); } .cxd-Select--multi .cxd-Select-values + .cxd-Select-input { transform: translateY(0); } .cxd-Select--multi .cxd-Select-value { position: static; white-space: normal; -webkit-user-select: none; -moz-user-select: none; user-select: none; line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem); display: inline-block; vertical-align: middle; font-size: var(--Form-selectValue-fontSize); font-weight: var(--select-multiple-fontWeight); color: var(--select-multiple-color); background: var(--Form-select-value-bgColor); border: 0.0625rem solid var(--Form-select-value-borderColor); border-radius: var(--select-multiple-top-left-border-radius) var(--select-multiple-top-right-border-radius) var(--select-multiple-bottom-right-border-radius) var(--select-multiple-bottom-left-border-radius); padding: var(--select-multiple-paddingTop) var(--select-multiple-paddingRight) var(--select-multiple-paddingBottom) var(--select-multiple-paddingLeft); margin: var(--select-multiple-marginTop) var(--select-multiple-marginRight) var(--ResultBox-tag-marginBottom) var(--select-multiple-marginLeft); } .cxd-Select--multi .cxd-Select-value:hover { background-color: var(--Form-selectValue-onHover-bgColor); } .cxd-Select--multi .cxd-Select-valueLabel { display: inline-block; max-width: var(--Form-valueLabel-maxWidth); overflow: hidden; vertical-align: top; text-overflow: ellipsis; white-space: nowrap; } .cxd-Select-valueIcon { cursor: pointer; margin-left: 0.625rem; color: var(--Form-select-valueIcon-color); } .cxd-Select-valueIcon:hover { color: var(--Form-select-valueIcon-onHover-color); } .cxd-Select-valueIcon.is-disabled { pointer-events: none; display: none; cursor: not-allowed; background: var(--Form-selectValue-onDisable-bg); } .cxd-Select-valueIcon svg { width: 0.625rem; height: 0.625rem; } .cxd-Select-arrow { width: var(--gap-md); text-align: center; display: flex; align-items: center; justify-content: center; line-height: 1; transform: rotate(90deg); } .cxd-Select-arrow > svg { transition: transform var(--animation-duration); display: inline-block; color: var(--Form-select-caret-iconColor); width: 10px; height: 10px; top: 0; } .cxd-Select.is-opened:not(.is-mobile) .cxd-Select-arrow > svg { transform: rotate(180deg); } .cxd-Select.is-mobile { min-height: var(--Form-select-height); border: none; padding: 0; font-size: var(--select-base-default-fontSize); } .cxd-Select.is-mobile .cxd-Select-valueWrap { text-align: left; padding-right: 4px; } .cxd-Select.is-mobile .cxd-Select-arrow > svg { transform: rotate(-90deg); } .cxd-Select-menu { max-height: 18.75rem; padding-top: 0.25rem; padding-bottom: 0.25rem; overflow: auto; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-Select-menu .cxd-Checkbox--sm > i { margin-right: 0.25rem; } .cxd-Select-menu.is-mobile { width: 100%; text-align: center; } .cxd-Select-menu.is-mobile .cxd-Select-option { line-height: 2.25rem; } .cxd-Select--longlist { overflow: hidden; max-height: -moz-max-content; max-height: max-content; } .cxd-Select-input { cursor: pointer; outline: none; border: none; margin: 0 var(--Form-select-paddingX); height: var(--Form-select-search-height); font-size: var(--Form-select-input-fontSize); border-bottom: 1px solid var(--borderColor); display: flex; align-items: center; } .cxd-Select-input > svg { fill: #999; width: 0.875rem; min-width: 0.875rem; height: 0.875rem; margin-right: var(--gap-xs); } .cxd-Select-input > input { width: 100%; outline: none; border: none; flex-grow: 1; background: transparent; position: relative; top: 0.125em; } .cxd-Select-option { cursor: pointer; padding: var(--select-base-default-option-paddingTop) var(--select-base-default-option-paddingRight) var(--select-base-default-option-paddingBottom) var(--select-base-default-option-paddingLeft); display: flex; color: var(--select-base-default-option-color); font-size: var(--select-base-default-option-fontSize); font-weight: var(--select-base-default-option-fontWeight); background: var(--select-base-default-option-bg-color); line-height: var(--select-base-default-option-line-height); } .cxd-Select-option-checkbox { width: 100%; display: flex; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; align-items: center; } .cxd-Select-option-checkbox > label { width: 100%; display: flex; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; align-items: center; } .cxd-Select-option-checkbox > label > i { flex-shrink: 0; } .cxd-Select-option-checkbox > label > span { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 100%; font-size: var(--select-base-default-option-fontSize); font-weight: var(--select-base-default-option-fontWeight); color: var(--select-base-default-option-color); } .cxd-Select-option.is-active { color: var(--Form-select-menu-onActive-color); background: var(--Form-select-menu-onActive-bg); } .cxd-Select-option.is-active .cxd-Select-option-checkbox > label > span { color: var(--Form-select-menu-onActive-color); } .cxd-Select-option.is-highlight { color: var(--Form-select-menu-onHover-color); background: var(--Form-select-menu-onHover-bg); } .cxd-Select-option.is-highlight .cxd-Select-option-checkbox > label > span { color: var(--Form-select-menu-onHover-color); } .cxd-Select-option.is-disabled { color: var(--Form-select-menu-onDisabled-color); background: var(--Form-select-menu-onDisabled-bg); } .cxd-Select-option.is-disabled .cxd-Select-option-checkbox > label > span { color: var(--Form-select-menu-onDisabled-color); } .cxd-Select-option > label { display: block; } .cxd-Select-option > a { float: right; margin-left: var(--gap-xs); display: none; } .cxd-Select-option.is-highlight > a { display: block; } .cxd-Select-option .cxd-Select-option-content, .cxd-Select-option .cxd-Select-option-content > span > div { flex: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; } .cxd-Select-option.is-mobile { position: relative; } .cxd-Select-option.is-mobile > a { margin-right: calc(20px + var(--select-base-default-option-paddingRight)); } .cxd-Select-option.is-mobile .cxd-Select-option-item-check { min-width: 0; min-height: 0; flex: 1; text-align: left; border-bottom: 0.0625rem solid var(--borderColor); } .cxd-Select-option.is-mobile .cxd-Select-option-mcheck { position: absolute; top: 50%; transform: translateY(-50%); right: var(--select-base-default-option-paddingRight); flex: none; width: 1rem; color: var(--Form-select-mobile-icon-check-color); } .cxd-Select-option.is-mobile:last-child .cxd-Select-option-item-check { border-bottom: none; } .cxd-Select-noResult { color: var(--Form-select-placeholderColor); line-height: var(--Form-input-lineHeight); font-size: var(--Form-select-input-fontSize); -webkit-user-select: none; -moz-user-select: none; user-select: none; padding: calc((var(--Form-select-menu-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize)) / 2) var(--Form-select-paddingX); } .cxd-Select-option-hl { color: var(--info); } .cxd-Select-addBtn { display: block; cursor: pointer; padding: var(--select-base-default-option-paddingTop) var(--select-base-default-option-paddingRight) var(--select-base-default-option-paddingBottom) var(--select-base-default-option-paddingLeft); } .cxd-Select-addBtn:hover { text-decoration: none; } .cxd-Select-addBtn > svg { width: 0.875rem; height: 0.875rem; margin-right: var(--Checkbox-gap); } .cxd-Select-spinner { line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize)); } .cxd-Select-clear { padding: 0.1875rem; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; } .cxd-Select-clear svg { fill: var(--Form-input-clearBtn-color); color: var(--Form-input-clearBtn-color); width: var(--Form-input-clearBtn-size); height: var(--Form-input-clearBtn-size); top: 0; } .cxd-Select-clear svg:hover { fill: var(--Form-input-clearBtn-color-onHover); } .cxd-Select-popup { height: 20rem; } .cxd-Select-overflow-wrapper { display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: center; overflow-x: hidden; overflow-y: auto; max-height: calc((var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem + var(--gap-xs)) * 5); } .cxd-Select-overflow-wrapper .cxd-Select-value { position: static; white-space: normal; -webkit-user-select: none; -moz-user-select: none; user-select: none; line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem); display: inline-block; vertical-align: middle; font-size: var(--Form-selectValue-fontSize); font-weight: var(--select-multiple-fontWeight); color: var(--select-multiple-color); background: var(--Form-select-value-bgColor); border: 0.0625rem solid var(--Form-select-value-borderColor); border-radius: var(--select-multiple-top-left-border-radius) var(--select-multiple-top-right-border-radius) var(--select-multiple-bottom-right-border-radius) var(--select-multiple-bottom-left-border-radius); padding: var(--select-multiple-paddingTop) var(--select-multiple-paddingRight) var(--select-multiple-paddingBottom) var(--select-multiple-paddingLeft); margin: var(--select-multiple-marginTop) var(--select-multiple-marginRight) var(--ResultBox-tag-marginBottom) var(--select-multiple-marginLeft); } .cxd-Select-overflow-wrapper .cxd-Select-value:hover { background-color: var(--Form-selectValue-onHover-bgColor); } .cxd-Select-overflow-wrapper .cxd-Select-valueLabel { display: inline-block; max-width: var(--Form-valueLabel-maxWidth); overflow: hidden; vertical-align: top; text-overflow: ellipsis; white-space: nowrap; } .cxd-Select-overflow.cxd-Tooltip--dark .cxd-Select-overflow-wrapper .cxd-Select-value { background-color: var(--Form-select-value-bgColor--dark); border: none; } .cxd-Select-overflow.cxd-Tooltip--dark .cxd-Select-overflow-wrapper .cxd-Select-value:hover { background-color: var(--ResultBox-value--onHover-bg--dark); } .cxd-Select-overflow.cxd-Tooltip--dark .cxd-Select-overflow-wrapper .cxd-Select-value .cxd-Select-valueIcon { color: var(--Form-select-valueIcon-color--dark); } .cxd-Select-popover { background: var(--Form-select-menu-bg); color: var(--Form-select-menu-color); border: var(--Form-select-outer-borderWidth) solid var(--Form-select-outer-borderColor); box-shadow: var(--Form-select-outer-boxShadow); min-width: 7.5rem; } .cxd-InputGroup:hover .cxd-Select-popover { border-color: var(--Form-select-outer-borderColor) !important; } .cxd-SelectControl:not(.is-inline) > .cxd-Select { display: flex; } .cxd-SelectControl.is-error > .cxd-Select { border-color: var(--Form-input-onError-borderColor); background: var(--Form-input-onError-bg); } .cxd-SelectControl .cxd-TransferDropDown-popover .cxd-Tree-list .cxd-Tree-item .cxd-Tree-itemLabel:hover, .cxd-SelectControl .cxd-TransferDropDown-popover .cxd-Tree-list .cxd-Tree-item .cxd-Tree-item--isLeaf:hover { background-color: transparent; } .cxd-SelectControl .cxd-TransferDropDown-popover .cxd-Tree-list .cxd-Tree-item .cxd-Tree-itemLabel:hover .cxd-Tree-itemText, .cxd-SelectControl .cxd-TransferDropDown-popover .cxd-Tree-list .cxd-Tree-item .cxd-Tree-item--isLeaf:hover .cxd-Tree-itemText { background: var(--select-tree-hover-bg-color); } .cxd-SelectControl .cxd-TransferDropDown-popover .cxd-Tree-list .cxd-Tree-item .cxd-Tree-itemLabel:active, .cxd-SelectControl .cxd-TransferDropDown-popover .cxd-Tree-list .cxd-Tree-item .cxd-Tree-item--isLeaf:active { background-color: transparent; } .cxd-SelectControl .cxd-TransferDropDown-popover .cxd-Tree-list .cxd-Tree-item .cxd-Tree-itemLabel:active .cxd-Tree-itemText, .cxd-SelectControl .cxd-TransferDropDown-popover .cxd-Tree-list .cxd-Tree-item .cxd-Tree-item--isLeaf:active .cxd-Tree-itemText { background: var(--select-tree-active-bg-color); } .cxd-SelectControl .cxd-TransferDropDown-popover .cxd-Tree-list .cxd-Tree-item .cxd-Tree-itemLabel.is-checked, .cxd-SelectControl .cxd-TransferDropDown-popover .cxd-Tree-list .cxd-Tree-item .cxd-Tree-item--isLeaf.is-checked { background-color: transparent; } .cxd-Select.is-error { border-color: var(--Form-input-onError-borderColor); background: var(--Form-input-onError-bg); } @media (min-width: 576px) { .cxd-Form-control--sizeXs > .cxd-Select, .cxd-Form-control--sizeSm > .cxd-Select, .cxd-Form-control--sizeMd > .cxd-Select, .cxd-Form-control--sizeLg > .cxd-Select { min-width: 100%; max-width: 100%; display: inline-flex !important; } .cxd-Form-control--sizeXs > .cxd-Select .cxd-Select-valueWrap, .cxd-Form-control--sizeSm > .cxd-Select .cxd-Select-valueWrap, .cxd-Form-control--sizeMd > .cxd-Select .cxd-Select-valueWrap, .cxd-Form-control--sizeLg > .cxd-Select .cxd-Select-valueWrap { width: 0; } } .cxd-PopOver.cxd-Select-popover.cxd-PopOver--v-top { margin-top: 0.25rem; } .cxd-PopOver.cxd-Select-popover.cxd-PopOver--v-bottom { margin-bottom: 0.25rem; } .cxd-PopOver.cxd-Select-popover .cxd-Select-menu .cxd-Checkbox span { line-height: var(--select-base-default-option-line-height); height: var(--select-base-default-option-line-height); } .cxd-PopOver.cxd-Select-popover .cxd-Select-menu .cxd-Select-option { line-height: var(--select-base-default-option-line-height); height: var(--select-base-default-option-line-height); } .cxd-PopOver.cxd-Select-popover .cxd-Select-menu .cxd-Select-addBtn { line-height: var(--select-base-default-option-line-height); height: var(--select-base-default-option-line-height); } .cxd-Selections { height: 100%; min-width: 12.5rem; position: relative; display: flex; flex-direction: column; } .cxd-Selections-title { height: var(--Form-input-height); background: var(--Table-thead-bg); font-size: var(--Form-input-fontSize); padding: calc((var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize)) / 2) var(--gap-sm); } .cxd-Selections-placeholder { color: var(--Form-input-placeholderColor); text-align: center; width: 100%; height: 100%; flex-basis: var(--Form-input-height); flex-grow: 1; display: flex; flex-direction: column; justify-content: center; font-size: var(--Form-input-fontSize); } .cxd-Selections-items { flex-grow: 1; } .cxd-Selections-item { display: flex; flex-direction: row; height: var(--Form-input-height); line-height: var(--Form-input-lineHeight); font-size: var(--Form-input-fontSize); align-items: center; padding: calc((var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize)) / 2) var(--gap-sm); } .cxd-Selections-item > label { flex-basis: 3.125rem; flex-grow: 1; width: 3.125rem; display: flex; align-items: center; } .cxd-Selections-item > label.is-invalid { color: var(--Form-selectValue-onInvalid-color); } .cxd-Selections-item > .cxd-Selections-dragbar { top: 0; width: var(--gap-lg); position: relative; left: calc(var(--gap-xs) * -1); color: var(--icon-color); cursor: move; } .cxd-Selections-item--dragging > * { opacity: 0.2; } .cxd-Selections-item:hover { background: var(--Form-select-menu-onHover-bg); } .cxd-Selections-delBtn { color: var(--icon-color); cursor: pointer; } .cxd-Selections-delBtn:hover { color: var(--icon-onHover-color); } .cxd-Selections-delBtn > svg { width: 12px; height: 12px; } .cxd-ListControl-items, .cxd-ListControl-static-items { display: block; margin: calc(var(--ListControl-gutterWidth) / -2); } .cxd-ListControl-items:empty, .cxd-ListControl-static-items:empty { display: none; } .cxd-ListControl-item, .cxd-ListControl-static-item { width: var(--listSelect-base-image-width); position: relative; -webkit-user-select: none; -moz-user-select: none; user-select: none; font-size: var(--ListControl-fontSize); display: inline-block; vertical-align: middle; margin: calc(var(--ListControl-gutterWidth) / 2); border: var(--ListControl-item-borderWidth) solid var(--ListControl-item-borderColor); background: var(--ListControl-item-bg); padding: var(--ListControl-item-paddingY) var(--ListControl-item-paddingX); color: var(--ListControl-item-color); transition: var(--ListControl-item-transition); max-width: calc(12.5rem + 2 * var(--ListControl-item-paddingX)); border-radius: var(--ListControl-item-borderRadius); padding: var(--listSelect-base-default-paddingTop) var(--listSelect-base-default-paddingRight) var(--listSelect-base-default-paddingBottom) var(--listSelect-base-default-paddingLeft); } .cxd-ListControl-item .b-inherit, .cxd-ListControl-static-item .b-inherit { border-color: var(--ListControl-item-color); } .cxd-ListControl-item:hover, .cxd-ListControl-static-item:hover { color: var(--listSelect-base-hover-color); } .cxd-ListControl-itemImage, .cxd-ListControl-static-itemImage { margin: calc(var(--ListControl-item-paddingY) * -1) calc(var(--ListControl-item-paddingX) * -1); } .cxd-ListControl-itemImage img, .cxd-ListControl-static-itemImage img { display: block; max-width: 100%; } .cxd-ListControl-itemLabel, .cxd-ListControl-static-itemLabel { text-align: center; } .cxd-ListControl-itemImage + .cxd-ListControl-itemLabel, .cxd-ListControl-itemImage + .cxd-ListControl-static-itemLabel, .cxd-ListControl-static-itemImage + .cxd-ListControl-itemLabel, .cxd-ListControl-static-itemImage + .cxd-ListControl-static-itemLabel { margin-top: var(--ListControl-item-paddingY); } .cxd-ListControl-placeholder, .cxd-ListControl-static-placeholder { color: var(--Form-input-placeholderColor); } .cxd-ListControl-item { border-width: var(--listSelect-base-default-top-border-width) var(--listSelect-base-default-right-border-width) var(--listSelect-base-default-bottom-border-width) var(--listSelect-base-default-left-border-width); border-style: var(--listSelect-base-default-top-border-style) var(--listSelect-base-default-right-border-style) var(--listSelect-base-default-bottom-border-style) var(--listSelect-base-default-left-border-style); border-color: var(--listSelect-base-default-top-border-color) var(--listSelect-base-default-right-border-color) var(--listSelect-base-default-bottom-border-color) var(--listSelect-base-default-left-border-color); border-radius: var(--listSelect-base-default-top-left-border-radius) var(--listSelect-base-default-top-right-border-radius) var(--listSelect-base-default-bottom-right-border-radius) var(--listSelect-base-default-bottom-left-border-radius); background: var(--listSelect-base-default-bg-color); } .cxd-ListControl-item:not(.is-disabled) { cursor: pointer; } .cxd-ListControl-item:hover { background: var(--ListControl-item-onHover-bg); border-color: var(--ListControl-item-onHover-borderColor); color: var(--ListControl-item-onHover-color); } .cxd-ListControl-item:hover .b-inherit { border-color: var(--ListControl-item-onHover-borderColor); } .cxd-ListControl-item.hover { background: var(--ListControl-item-onHover-bg); border-color: var(--ListControl-item-onHover-borderColor); color: var(--ListControl-item-onHover-color); } .cxd-ListControl-item.hover .b-inherit { border-color: var(--ListControl-item-onHover-borderColor); } .cxd-ListControl-item:hover { border-width: var(--listSelect-base-hover-top-border-width) var(--listSelect-base-hover-right-border-width) var(--listSelect-base-hover-bottom-border-width) var(--listSelect-base-hover-left-border-width); border-style: var(--listSelect-base-hover-top-border-style) var(--listSelect-base-hover-right-border-style) var(--listSelect-base-hover-bottom-border-style) var(--listSelect-base-hover-left-border-style); border-color: var(--listSelect-base-hover-top-border-color) var(--listSelect-base-hover-right-border-color) var(--listSelect-base-hover-bottom-border-color) var(--listSelect-base-hover-left-border-color); border-radius: var(--listSelect-base-hover-top-left-border-radius) var(--listSelect-base-hover-top-right-border-radius) var(--listSelect-base-hover-bottom-right-border-radius) var(--listSelect-base-hover-bottom-left-border-radius); background: var(--listSelect-base-hover-bg-color); } .cxd-ListControl-item:hover:active, .cxd-ListControl-item.is-active { background: var(--ListControl-item-onActive-bg); border-color: var(--ListControl-item-onActive-borderColor); color: var(--ListControl-item-onActive-color); border-width: var(--listSelect-base-active-top-border-width) var(--listSelect-base-active-right-border-width) var(--listSelect-base-active-bottom-border-width) var(--listSelect-base-active-left-border-width); border-style: var(--listSelect-base-active-top-border-style) var(--listSelect-base-active-right-border-style) var(--listSelect-base-active-bottom-border-style) var(--listSelect-base-active-left-border-style); border-color: var(--listSelect-base-active-top-border-color) var(--listSelect-base-active-right-border-color) var(--listSelect-base-active-bottom-border-color) var(--listSelect-base-active-left-border-color); border-radius: var(--listSelect-base-active-top-left-border-radius) var(--listSelect-base-active-top-right-border-radius) var(--listSelect-base-active-bottom-right-border-radius) var(--listSelect-base-active-bottom-left-border-radius); background: var(--listSelect-base-active-bg-color); } .cxd-ListControl-item:hover:active:hover, .cxd-ListControl-item.is-active:hover { background: var(--ListControl-item-onActive-onHover-bg); } .cxd-ListControl-item:hover:active .b-inherit, .cxd-ListControl-item.is-active .b-inherit { border-color: var(--ListControl-item-onActive-color); } .cxd-ListControl-item:hover:active:before, .cxd-ListControl-item.is-active:before { content: ""; position: absolute; width: 0.875rem; height: 0.875rem; background: var(--ListControl-item-onActive-before-bg); right: 0; bottom: 0; } .cxd-ListControl-item:hover:active:after, .cxd-ListControl-item.is-active:after { content: ""; position: absolute; border-style: solid; border-width: 0 0 0.0625rem 0.0625rem; right: 0.125rem; bottom: 0.375rem; transform: rotate(-40deg); width: var(--Checkbox--full-inner-size); height: calc(var(--Checkbox--full-inner-size) / 2); border-color: #fff; } .cxd-ListControl-item.is-disabled { pointer-events: none; opacity: var(--ListControl-item-onDisabled-opacity); border-color: var(--ListControl-item-onDisabled-borderColor); background: var(--ListControl-item-onDisabled-bg); color: var(--ListControl-item-onDisabled-color); border-width: var(--listSelect-base-disabled-top-border-width) var(--listSelect-base-disabled-right-border-width) var(--listSelect-base-disabled-bottom-border-width) var(--listSelect-base-disabled-left-border-width); border-style: var(--listSelect-base-disabled-top-border-style) var(--listSelect-base-disabled-right-border-style) var(--listSelect-base-disabled-bottom-border-style) var(--listSelect-base-disabled-left-border-style); border-color: var(--listSelect-base-disabled-top-border-color) var(--listSelect-base-disabled-right-border-color) var(--listSelect-base-disabled-bottom-border-color) var(--listSelect-base-disabled-left-border-color); border-radius: var(--listSelect-base-disabled-top-left-border-radius) var(--listSelect-base-disabled-top-right-border-radius) var(--listSelect-base-disabled-bottom-right-border-radius) var(--listSelect-base-disabled-bottom-left-border-radius); background: var(--listSelect-base-disabled-bg-color); } .cxd-ListControl-item.is-disabled:before { background: var(--ListControl-item-onDisabled-color); } .cxd-ListControl-item.is-disabled .b-inherit { border-color: var(--ListControl-item-onDisabled-borderColor); } .cxd-ListControl-item.is-custom { border: none; padding: 0; } .cxd-ListControl-item.is-custom:hover, .cxd-ListControl-item.is-custom.is-active { border: none; } .cxd-ListControl-item.is-custom::before, .cxd-ListControl-item.is-custom::after { display: none; } .cxd-LocationPicker { position: relative; display: inline-flex; flex-wrap: nowrap; border: var(--borders-width-2) solid var(--colors-neutral-line-8); font-size: var(--fonts-size-7); padding: var(--sizes-size-3) var(--sizes-size-6); height: var(--sizes-base-16); outline: none; white-space: nowrap; color: var(--colors-neutral-text-2); background: var(--colors-neutral-fill-11); border-radius: var(--LocationPicker-borderRadius); } .cxd-LocationPicker:not(.is-disabled) { cursor: pointer; } .cxd-LocationPicker:not(.is-disabled):hover { background: var(--colors-neutral-fill-11); border-color: var(--colors-brand-5); } .cxd-LocationPicker:not(.is-disabled):hover .cxd-DatePicker-toggler:before { color: var(--colors-brand-5); } .cxd-LocationPicker.is-focused, .cxd-LocationPicker.is-active { border-color: var(--colors-brand-5); box-shadow: var(--Form-input-boxShadow); } .cxd-LocationPicker.is-disabled { background: #e5e7eb; } .cxd-LocationPicker.is-disabled > cxd-LocationPicker-input { color: var(--text--muted-color); } .cxd-LocationPicker.is-mobile { border: none; } .cxd-LocationPicker.is-mobile .cxd-LocationPicker-toggler svg { top: 0.125rem; } .cxd-LocationPicker-placeholder { color: var(--colors-neutral-text-6); -webkit-user-select: none; -moz-user-select: none; user-select: none; margin-right: var(--gap-base); flex-basis: 0; flex-grow: 1; } .cxd-LocationPicker-value { margin-right: var(--gap-base); flex-basis: 0; flex-grow: 1; overflow-x: auto; max-width: calc(100% - 1.25rem); } .cxd-LocationPicker-toggler { cursor: pointer; color: var(--colors-neutral-text-5); } .cxd-LocationPicker-toggler svg { top: 0; } .cxd-LocationPicker-toggler:hover { color: var(--colors-brand-5); } .cxd-LocationPicker-clear { padding: var(--Form-input-clearBtn-padding); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: auto; text-decoration: none; line-height: 1; margin-right: var(--gap-xs); } .cxd-LocationPicker-clear svg { fill: var(--Form-input-clearBtn-color); width: var(--Form-input-clearBtn-size); height: var(--Form-input-clearBtn-size); top: 0; } .cxd-LocationPicker-clear:hover svg { fill: var(--Form-input-clearBtn-color-onHover); } .cxd-LocationPicker-clear:active svg { fill: var(--Form-input-clearBtn-color-onActive); } .cxd-LocationPicker-clear svg { top: 0; } .cxd-LocationPicker-popup { height: 28.75rem; } .cxd-LocationPicker-popup-inner { min-width: 0; min-height: 0; flex: 1; padding: 0 1rem; } .cxd-LocationPicker-popup-inner .cxd-MapPicker-search { padding-top: 0; margin-bottom: 1rem; } .cxd-LocationPicker-popup-inner .cxd-MapPicker-search .cxd-TextControl-input { border-radius: 0; border-top: none; border-right: none; border-left: none; } .cxd-LocationControl { position: relative; width: 100%; } .cxd-LocationControl .cxd-PopOver { border: none; box-shadow: var(--boxShadow); } .cxd-LocationControl.is-mobile { min-width: 0; min-height: 0; flex: 1; text-align: right; overflow: hidden; } .cxd-LocationControl:not(.is-inline) > .cxd-LocationPicker { display: flex; } .cxd-LocationPicker-popover { min-width: 320px; width: 100%; max-width: 100%; margin-top: -1px; border-color: var(--Form-input-onFocused-borderColor); } .cxd-LocationPicker-popover.cxd-PopOver--v-top { margin-top: 0.25rem; } .cxd-LocationPicker-popover.cxd-PopOver--v-bottom { margin-bottom: 0.25rem; } .cxd-MapPicker-search { padding: 5px 10px; } .cxd-MapPicker-map { display: block; width: 100%; height: 200px; } .cxd-MapPicker-item { padding: 10px 10px; position: relative; border-top: 1px solid var(--borderColor); } .cxd-MapPicker-item > svg { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); } .cxd-MapPicker-itemTitle { font-size: var(--fontSizeBase); } .cxd-MapPicker-itemDesc { font-size: var(--fontSizeSm); } .cxd-MapPicker-sugItem { cursor: pointer; padding: calc((var(--Form-select-menu-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize)) / 2) var(--Form-select-paddingX); } .cxd-MapPicker-sugItem:hover { color: var(--Form-select-menu-onActive-color); background: var(--Form-select-menu-onActive-bg); } .tangram-suggestion-main { display: none !important; } @media screen and (min-width: 768px) { .cxd-LocationPicker-value { margin-right: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } .cxd-MatrixControl { max-width: 100%; } .cxd-MatrixControl-error { margin-bottom: 0; } .cxd-ColorPicker { position: relative; display: inline-flex; flex-wrap: nowrap; white-space: nowrap; border: var(--ColorPicker-borderWidth) solid var(--ColorPicker-borderColor); font-size: var(--ColorPicker-fontSize); padding: var(--ColorPicker-paddingY) var(--ColorPicker-paddingX); background: var(--ColorPicker-bg); color: var(--ColorPicker-color); border-radius: var(--borderRadius); height: var(--ColorPicker-height); } .cxd-ColorPicker:not(.is-disabled) { cursor: pointer; } .cxd-ColorPicker:not(.is-disabled):hover { background: var(--ColorPicker-onHover-bg); border-color: var(--ColorPicker-onHover-borderColor); } .cxd-ColorPicker-input { border: 0; background: transparent; outline: none; width: 100%; flex-basis: 0; flex-grow: 1; padding: 0; margin: 0; height: calc(var(--ColorPicker-fontSize) * var(--ColorPicker-lineHeight)); } .cxd-ColorPicker-input::-moz-placeholder { color: var(--ColorPicker-placeholderColor); } .cxd-ColorPicker-input::placeholder { color: var(--ColorPicker-placeholderColor); } .cxd-ColorPicker.is-focused { border-color: var(--ColorPicker-onFocused-borderColor); box-shadow: var(--Form-input-boxShadow); } .is-error > .cxd-ColorPicker { border-color: var(--Form-input-onError-borderColor); background: var(--Form-input-onError-bg); } .cxd-ColorPicker.is-disabled { background: var(--ColorPicker-onDisabled-bg); color: var(--ColorPicker-onDisabled-color); pointer-events: none; } .cxd-ColorPicker.is-disabled > .cxd-ColorPicker-input { color: var(--ColorPicker-onDisabled-color); } .cxd-ColorPicker.is-disabled > .cxd-ColorPicker-input::-moz-placeholder { color: var(--ColorPicker-onDisabled-color); } .cxd-ColorPicker.is-disabled > .cxd-ColorPicker-input::placeholder { color: var(--ColorPicker-onDisabled-color); } .cxd-ColorPicker-preview { display: flex; align-items: center; margin-right: var(--gap-sm); cursor: pointer; } .cxd-ColorPicker-previewIcon { display: block; width: 1rem; height: 1rem; box-shadow: var(--boxShadowSm); } .cxd-ColorPicker-clear { padding: var(--Form-input-clearBtn-padding); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: auto; text-decoration: none; } .cxd-ColorPicker-clear svg { fill: var(--Form-input-clearBtn-color); width: var(--Form-input-clearBtn-size); height: var(--Form-input-clearBtn-size); top: 0; } .cxd-ColorPicker-clear:hover svg { fill: var(--Form-input-clearBtn-color-onHover); } .cxd-ColorPicker-clear:active svg { fill: var(--Form-input-clearBtn-color-onActive); } .cxd-ColorPicker-clear svg { top: 0; } .cxd-ColorPicker-arrow { width: var(--gap-md); text-align: center; display: flex; align-items: center; justify-content: center; line-height: 1; } .cxd-ColorPicker-arrow > svg { transition: transform var(--animation-duration); display: inline-block; color: var(--Form-select-caret-iconColor); width: 10px; height: 10px; top: 0; transform: rotate(90deg); } .cxd-ColorPicker.is-opened .cxd-ColorPicker-arrow > svg { transform: rotate(270deg); } .cxd-ColorPicker-popover { border: none; box-shadow: none; } .cxd-ColorControl:not(.is-inline) > .cxd-ColorPicker { display: flex; } .sketch-picker { border: none !important; border-radius: var(--borderRadius) !important; box-shadow: var(--ColorPicker-boxShadow) !important; } .cxd-ColorPicker-popup { height: 31.25rem; } .cxd-ColorPicker-popup .sketch-picker { width: 80% !important; box-shadow: none !important; } .cxd-ColorPicker-popup .sketch-picker input:focus { outline: none; } .cxd-ColorPicker-popup .sketch-picker .flexbox-fix:last-child > div { width: 18px !important; height: 18px !important; margin: 0px 16px 10px 0px !important; } .cxd-DatePicker { position: relative; display: inline-flex; flex-wrap: nowrap; border-width: var(--DatePicker-borderWidth); border-style: var(--DatePicker-borderStyle); border-color: var(--DatePicker-borderColor); font-size: var(--DatePicker-fontSize); padding: var(--inputDate-default-paddingTop) var(--inputDate-default-paddingRight) var(--inputDate-default-paddingBottom) var(--inputDate-default-paddingLeft); height: var(--DatePicker-height); outline: none; white-space: nowrap; color: var(--DatePicker-color); background: var(--DatePicker-bg); border-radius: var(--DatePicker-borderRadius); } .cxd-DatePicker-input { display: inline-block; width: 100%; background: none; padding: 0; border: 0; font-size: var(--DatePicker-fontSize); font-weight: var(--inputDate-default-fontWeight); color: var(--inputDate-default-color); } .cxd-DatePicker-input:focus { border: none; outline: none; box-sizing: none; } .cxd-DatePicker-input::-moz-placeholder { color: var(--colors-neutral-text-6); } .cxd-DatePicker-input::placeholder { color: var(--colors-neutral-text-6); } .cxd-DatePicker .cxd-DatePicker-clear { display: none; } .cxd-DatePicker--borderHalf { border-left-color: transparent !important; border-right-color: transparent !important; border-top-color: transparent !important; } .cxd-DatePicker--borderNone { border-color: transparent !important; } .cxd-DatePicker:not(.is-disabled):not(.is-mobile) { cursor: pointer; } .cxd-DatePicker:not(.is-disabled):not(.is-mobile):hover { background: var(--DatePicker-onHover-bg); border-color: var(--DatePicker-onHover-borderColor); border-style: var(--inputDate-hover-top-border-style) var(--inputDate-hover-right-border-style) var(--inputDate-hover-bottom-border-style) var(--inputDate-hover-left-border-style); border-width: var(--inputDate-hover-top-border-width) var(--inputDate-hover-right-border-width) var(--inputDate-hover-bottom-border-width) var(--inputDate-hover-left-border-width); } .cxd-DatePicker:not(.is-disabled):not(.is-mobile):hover .cxd-DatePicker-input { color: var(--inputDate-hover-color); } .cxd-DatePicker:not(.is-disabled):not(.is-mobile):hover .cxd-DatePicker-clear { display: flex; } .cxd-DatePicker:not(.is-disabled):not(.is-mobile):hover .cxd-DatePicker-clear + .cxd-DatePicker-toggler { display: none; } .cxd-DatePicker:not(.is-disabled):not(.is-mobile).is-focused { background: var(--inputDate-active-bg-color); border-color: var(--DatePicker-onFocused-borderColor); box-shadow: var(--inputDate-active-shadow); border-style: var(--inputDate-active-top-border-style) var(--inputDate-active-right-border-style) var(--inputDate-active-bottom-border-style) var(--inputDate-active-left-border-style); border-width: var(--inputDate-active-top-border-width) var(--inputDate-active-right-border-width) var(--inputDate-active-bottom-border-width) var(--inputDate-active-left-border-width); } .cxd-DatePicker:not(.is-disabled):not(.is-mobile).is-focused .cxd-DatePicker-input { color: var(--inputDate-active-color); } .is-error > .cxd-DatePicker { border-color: var(--Form-input-onError-borderColor); background: var(--Form-input-onError-bg); } .cxd-DatePicker.is-disabled { background: var(--inputDate-disabled-bg-color); border-width: var(--inputDate-disabled-top-border-width) var(--inputDate-disabled-right-border-width) var(--inputDate-disabled-bottom-border-width) var(--inputDate-disabled-left-border-width); border-style: var(--inputDate-disabled-top-border-style) var(--inputDate-disabled-right-border-style) var(--inputDate-disabled-bottom-border-style) var(--inputDate-disabled-left-border-style); border-color: var(--inputDate-disabled-top-border-color) var(--inputDate-disabled-right-border-color) var(--inputDate-disabled-bottom-border-color) var(--inputDate-disabled-left-border-color); } .cxd-DatePicker.is-disabled > .cxd-DatePicker-input { color: var(--inputDate-disabled-color); } .cxd-DatePicker-placeholder { color: var(--DatePicker-placeholderColor); -webkit-user-select: none; -moz-user-select: none; user-select: none; margin-right: var(--gap-base); min-width: 3.125rem; flex-basis: 0; flex-grow: 1; } .cxd-DatePicker-value { margin-right: var(--gap-base); flex-basis: 0; flex-grow: 1; } .cxd-DatePicker-toggler { padding: var(--Form-input-clearBtn-padding); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: auto; text-decoration: none; line-height: 1; } .cxd-DatePicker-toggler svg { fill: var(--Form-input-clearBtn-color); width: var(--Form-input-clearBtn-size); height: var(--Form-input-clearBtn-size); top: 0; } .cxd-DatePicker-toggler:hover svg { fill: var(--Form-input-clearBtn-color-onHover); } .cxd-DatePicker-toggler:active svg { fill: var(--Form-input-clearBtn-color-onActive); } .cxd-DatePicker-toggler svg { color: var(--inputDate-default-icon-color); width: var(--inputDate-default-icon-size); height: var(--inputDate-default-icon-size); } .cxd-DatePicker .DatePicker-toggler-clock { content: var(--inputTime-default-icon); } .cxd-DatePicker .DatePicker-toggler-date { content: var(--inputDate-default-icon); } .cxd-DatePicker-clear { padding: var(--Form-input-clearBtn-padding); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: auto; text-decoration: none; line-height: 1; } .cxd-DatePicker-clear svg { fill: var(--Form-input-clearBtn-color); width: var(--Form-input-clearBtn-size); height: var(--Form-input-clearBtn-size); top: 0; } .cxd-DatePicker-clear:hover svg { fill: var(--Form-input-clearBtn-color-onHover); } .cxd-DatePicker-clear:active svg { fill: var(--Form-input-clearBtn-color-onActive); } .cxd-DatePicker-clear svg { top: 0; width: var(--inputDate-default-icon-size); height: var(--inputDate-default-icon-size); } .cxd-DateControl:not(.is-inline) > .cxd-DatePicker { display: flex; } .cxd-DatePicker-shortcuts { margin: 0; padding-left: 0.625rem; list-style: none; background: #f7f7f9; line-height: 2rem; } .cxd-DatePicker-shortcut { display: inline-block; margin-right: 2rem; font-size: var(--fontSizeSm); } .cxd-DatePicker-shortcut a { font-size: var(--Calendar-fontSize); cursor: pointer; color: var(--Calendar-shortcut-color); -webkit-text-decoration: var(--Calendar-shortcut-decoration); text-decoration: var(--Calendar-shortcut-decoration); } .cxd-DatePicker-shortcut a:hover { color: var(--Calendar-shortcut-onHover-color); -webkit-text-decoration: var(--Calendar-shortcut-onHover-decoration); text-decoration: var(--Calendar-shortcut-onHover-decoration); } .cxd-DatePicker-popover { margin: 0.125rem 0 0; border: var(--Form-select-outer-borderWidth) solid var(--Form-select-outer-borderColor); box-shadow: var(--Form-select-outer-boxShadow); } .cxd-DatePicker.is-mobile { border: 0; justify-content: flex-end; } .cxd-DatePicker.is-mobile.is-focused, .cxd-DatePicker.is-mobile:hover { border: none; } .cxd-DatePicker.is-mobile span:focus, .cxd-DatePicker.is-mobile a:focus { outline: unset; } .cxd-DatePicker.is-mobile .cxd-DatePicker-value, .cxd-DatePicker.is-mobile .cxd-DatePicker-clear { display: inline-flex; justify-content: flex-end; padding: 0 0; } .cxd-DatePicker.is-mobile .cxd-DatePicker-value { margin-right: var(--gap-xs); } .cxd-DatePicker.is-mobile .cxd-DatePicker-placeholder { flex-grow: unset; flex-basis: unset; } .cxd-DatePicker-popup.cxd-DatePicker-mobile { height: 20rem; color: red; } .cxd-DatePicker-popup.cxd-DatePicker-mobile .rdt { width: 100%; } .cxd-DatePicker-popup.cxd-DatePicker-mobile .rdt .rdtPicker { width: 100%; padding: unset; } .rdt { -webkit-user-select: none; -moz-user-select: none; user-select: none; font-size: var(--Calendar-fontSize); color: var(--Calendar-color); } .rdt .rdtDays { display: flex; } .rdt .rdtDays .rdtDaysPart { width: 16.5rem; border-right: 1px solid var(--Calendar-input-borderColor); } .rdt .rdtDays .rdtTimePart { text-align: center; flex: 1; } .rdt .rdtDays .rdtTimePartWithS { text-align: center; flex: 1; } .rdt .rdtDays .rdtShowTime { height: 2.6875rem; padding-top: 0.6875rem; margin-left: 0.125rem; } .rdt .rdtPickerTime { width: 100%; height: 100%; } .rdt .rdtPickerDate { height: 100%; } .rdt .rdtPickerTimeWithoutD { width: 100%; } .rdt .rdtPickerTimeWithoutD .TimeContentWrapper { display: flex; } .rdt .rdtPicker { margin-top: 0; padding: 0; background: transparent; border: none; } .rdt .rdtPicker .dow { font-weight: normal; } .rdt .rdtPicker td.rdtDay, .rdt .rdtPicker td.rdtHour, .rdt .rdtPicker td.rdtMinute, .rdt .rdtPicker td.rdtSecond, .rdt .rdtPicker .rdtTimeToggle { background: var(--Calendar-cell-bg); } .rdt .rdtPicker td.rdtDay:hover span, .rdt .rdtPicker td.rdtHour:hover span, .rdt .rdtPicker td.rdtMinute:hover span, .rdt .rdtPicker td.rdtSecond:hover span, .rdt .rdtPicker .rdtTimeToggle:hover span { color: var(--inputDate-hover-option-color); background: var(--Calendar-cell-onHover-bg); } .rdt .rdtPicker td.rdtToday > span { border: 1px solid var(--Calendar-borderColor); } .rdt .rdtPicker td.rdtToday:hover span { background: transparent; } .rdt .rdtPicker td.rdtBetween { background: var(--Calendar-cell-onBetween-bg); } .rdt .rdtPicker td.rdtToday:before { border-bottom-color: var(--Calendar-cell-onActive-bg); } .rdt .rdtPicker td.rdtActive.rdtToday:before { border-bottom-color: var(--Calendar-cell-bg); } .rdt .rdtPicker .rdtDisabled.rdtToday > span, .rdt .rdtPicker .rdtOld.rdtToday > span, .rdt .rdtPicker .rdtNew.rdtToday > span { border-color: #e8e9eb; } .rdt .rdtPicker td.rdtActive > span, .rdt .rdtPicker td.rdtActive:hover > span { color: var(--inputDate-active-option-color); background: var(--Calendar-cell-onActive-bg); } .rdt .rdtPicker .rdtActive.rdtToday { color: #151b26; } .rdt .rdtPicker .rdtActive.rdtToday > span { border-color: #144bcc; } .rdt .rdtPicker td.rdtDisabled:hover > span { background: var(--Calendar-cell-onDisabled-bg); } .rdt thead tr:first-child th { cursor: default; font-weight: normal; border-bottom: none; } .rdt thead tr:first-child th:hover { background: transparent; } .rdt tfoot { border-top: 0; } .rdt tfoot td { padding-top: var(--gap-xs); text-align: left; } .rdt tfoot td span { width: 10px; display: inline-block; text-align: center; } .rdt tfoot td .rdtActions { text-align: right; padding: var(--gap-sm); border-top: 1px solid var(--Calendar-input-borderColor); } .cxd-CalendarTimesWrapper { display: flex; flex-direction: column; height: 100%; } .cxd-CalendarTimesWrapper .cxd-CalendarInputsWrapper { height: 15.5rem; display: flex; } .cxd-CalendarInputWrapper { display: inline-block; position: relative; width: 4rem; height: 15.5rem; overflow: auto; flex: 1; } .cxd-CalendarInputWrapper .cxd-CalendarInput-sugs { list-style: none; background: var(--inputTime-default-bg-color); color: var(--inputTime-default-color); left: -0.0625rem; right: -0.0625rem; top: 100%; z-index: 10; } .cxd-CalendarInputWrapper .cxd-CalendarInput-sugsHours { height: 55.75rem; } .cxd-CalendarInputWrapper .cxd-CalendarInput-sugsTimes { height: 118.75rem; border-left: 1px solid var(--Calendar-input-borderColor); } .cxd-CalendarInputWrapper .cxd-CalendarInput-sugsItem { text-align: center; height: 28px; line-height: 28px; font-size: var(--inputTime-default-fontSize); font-weight: var(--inputTime-default-fontWeight); cursor: pointer; } .cxd-CalendarInputWrapper .cxd-CalendarInput-sugsItem.is-highlight { color: var(--inputTime-active-color); background: var(--inputTime-active-bg-color); } .cxd-CalendarInputWrapper .cxd-CalendarInput-sugsItem:not(.is-mobile):hover { color: var(--inputTime-hover-color); background: var(--inputTime-hover-bg-color); } .cxd-TimeContentWrapper { display: flex; justify-content: center; } .cxd-TimeRangeHeaderWrapper { height: 40px; padding-top: 10px; text-align: center; border-bottom: 1px solid var(--Calendar-input-borderColor); margin: 0 0.25rem; } .cxd-TimeFooterWrapper { height: 40px; display: flex; justify-content: space-between; align-items: center; padding: 0 12px; border-top: 1px solid var(--Calendar-input-borderColor); } .cxd-TimeFooterWrapper .cxd-Button { height: 24px; line-height: 24px; padding: 0 8px; border-radius: 2px; } .cxd-TimeFooterWrapper .cxd-QuickWrapper a { font-size: var(--button-size-sm-fontSize); } .cxd-CalendarInput { outline: none; width: 3.5rem; font-size: var(--Calendar-input-fontSize); color: var(--Calendar-input-color); border: 1px solid var(--Calendar-input-borderColor); border-radius: var(--Calendar-input-borderRadius); height: var(--Calendar-input-height); line-height: var(--Calendar-input-lineHeight); padding: var(--Calendar-input-paddingY) var(--Calendar-input-paddingX); box-shadow: none; } .cxd-CalendarInput:focus { border-color: var(--Calendar-input-onFocused-borderColor); box-shadow: none; } .cxd-CalendarTime { display: flex; flex-direction: row; justify-content: center; align-items: center; } .cxd-CalendarCounter-btn { display: flex; justify-content: center; align-items: center; height: 25px; text-align: center; color: var(--Button--primary-bg); } .cxd-CalendarCounter-btn:hover { color: var(--Button--primary-onActive-bg); } .cxd-CalendarCounter-btn > svg { width: 16px; height: 16px; } .cxd-CalendarCounter-btn--up > svg { transform: rotate(-90deg); } .cxd-CalendarCounter-btn--down > svg { transform: rotate(90deg); } .cxd-CalendarCounter-sep { width: var(--gap-md); text-align: center; } .cxd-CalendarCounter--daypart { margin-left: 10px; } .cxd-CalendarCounter--daypart .cxd-CalendarCounter-value { height: 30px; display: flex; align-items: center; padding: 0 5px; } .rdtBtn { line-height: var(--Calendar-btn-lineHeight); padding: var(--Calendar-btn-paddingY) var(--Calendar-btn-paddingX); display: inline-block; vertical-align: middle; text-align: center; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: pointer; text-decoration: none; font-size: var(--Calendar-btn-fontSize); border: 1px solid var(--Calendar-btn-border); color: var(--Calendar-btn-border); background: var(--Calendar-btn-bg); border-color: var(--Calendar-btn-color) var(--Calendar-btn-onHover-bg) var(--Calendar-btn-onHover-border) var(--Calendar-btn-onHover-color); border-width: var(--Calendar-btn-onActive-bg) var(--Calendar-btn-onActive-border) var(--Calendar-btn-onActive-color) var(--button-default-default-left-border-width); border-style: var(--button-default-default-top-border-style) var(--button-default-default-right-border-style) var(--button-default-default-bottom-border-style) var(--button-default-default-left-border-style); box-shadow: var(--button-default-default-shadow); border-radius: var(--Calendar-btn-borderRadius); } .rdtBtn:hover { text-decoration: none; } .rdtBtn.is-disabled { border-color: var(--Button-onDisabled-borderColor); opacity: 0.6; pointer-events: none; } .rdtBtn .fa, .rdtBtn .iconfont { font-size: var(--fontSizeSm); } .rdtBtn:not(:disabled):not(.is-disabled):hover { color: var(--button-default-hover-font-color); background: var(--button-default-hover-bg-color); border-color: var(--button-default-hover-top-border-color) var(--button-default-hover-right-border-color) var(--button-default-hover-bottom-border-color) var(--button-default-hover-left-border-color); border-width: var(--button-default-hover-top-border-width) var(--button-default-hover-right-border-width) var(--button-default-hover-bottom-border-width) var(--button-default-hover-left-border-width); border-style: var(--button-default-hover-top-border-style) var(--button-default-hover-right-border-style) var(--button-default-hover-bottom-border-style) var(--button-default-hover-left-border-style); box-shadow: var(--button-default-hover-shadow); } .rdtBtn:not(:disabled):not(.is-disabled).hover { color: var(--button-default-hover-font-color); background: var(--button-default-hover-bg-color); border-color: var(--button-default-hover-top-border-color) var(--button-default-hover-right-border-color) var(--button-default-hover-bottom-border-color) var(--button-default-hover-left-border-color); border-width: var(--button-default-hover-top-border-width) var(--button-default-hover-right-border-width) var(--button-default-hover-bottom-border-width) var(--button-default-hover-left-border-width); border-style: var(--button-default-hover-top-border-style) var(--button-default-hover-right-border-style) var(--button-default-hover-bottom-border-style) var(--button-default-hover-left-border-style); box-shadow: var(--button-default-hover-shadow); } .rdtBtn:not(:disabled):not(.is-disabled):hover:active { color: var(--button-default-active-font-color); background: var(--button-default-active-bg-color); border-color: var(--button-default-active-top-border-color) var(--button-default-active-right-border-color) var(--button-default-active-bottom-border-color) var(--button-default-active-left-border-color); border-width: var(--button-default-active-top-border-width) var(--button-default-active-right-border-width) var(--button-default-active-bottom-border-width) var(--button-default-active-left-border-width); border-style: var(--button-default-active-top-border-style) var(--button-default-active-right-border-style) var(--button-default-active-bottom-border-style) var(--button-default-active-left-border-style); box-shadow: var(--button-default-active-shadow); } .rdtBtn:not(:disabled):not(.is-disabled).active, .rdtBtn:not(:disabled):not(.is-disabled).is-active { color: var(--button-default-active-font-color); background: var(--button-default-active-bg-color); border-color: var(--button-default-active-top-border-color) var(--button-default-active-right-border-color) var(--button-default-active-bottom-border-color) var(--button-default-active-left-border-color); border-width: var(--button-default-active-top-border-width) var(--button-default-active-right-border-width) var(--button-default-active-bottom-border-width) var(--button-default-active-left-border-width); border-style: var(--button-default-active-top-border-style) var(--button-default-active-right-border-style) var(--button-default-active-bottom-border-style) var(--button-default-active-left-border-style); box-shadow: var(--button-default-active-shadow); } .rdtBtn:disabled, .rdtBtn.is-disabled { color: var(--button-default-disabled-font-color); background: var(--button-default-disabled-bg-color); border-color: var(--button-default-disabled-top-border-color) var(--button-default-disabled-right-border-color) var(--button-default-disabled-bottom-border-color) var(--button-default-disabled-left-border-color); border-width: var(--button-default-disabled-top-border-width) var(--button-default-disabled-right-border-width) var(--button-default-disabled-bottom-border-width) var(--button-default-disabled-left-border-width); border-style: var(--button-default-disabled-top-border-style) var(--button-default-disabled-right-border-style) var(--button-default-disabled-bottom-border-style) var(--button-default-disabled-left-border-style); box-shadow: var(--button-default-disabled-shadow); } .rdtBtn + .rdtBtn { margin-left: var(--gap-xs); } .rdtBtnCancel { color: var(--Calendar-btnCancel-border); background: var(--Calendar-btnCancel-bg); border-color: var(--Calendar-btnCancel-color) var(--Calendar-btnCancel-onHover-bg) var(--Calendar-btnCancel-onHover-border) var(--Calendar-btnCancel-onHover-color); border-width: var(--Calendar-btnCancel-onActive-bg) var(--Calendar-btnCancel-onActive-border) var(--Calendar-btnCancel-onActive-color) var(--button-default-default-left-border-width); border-style: var(--button-default-default-top-border-style) var(--button-default-default-right-border-style) var(--button-default-default-bottom-border-style) var(--button-default-default-left-border-style); box-shadow: var(--button-default-default-shadow); } .rdtBtnCancel:not(:disabled):not(.is-disabled):hover { color: var(--button-default-hover-font-color); background: var(--button-default-hover-bg-color); border-color: var(--button-default-hover-top-border-color) var(--button-default-hover-right-border-color) var(--button-default-hover-bottom-border-color) var(--button-default-hover-left-border-color); border-width: var(--button-default-hover-top-border-width) var(--button-default-hover-right-border-width) var(--button-default-hover-bottom-border-width) var(--button-default-hover-left-border-width); border-style: var(--button-default-hover-top-border-style) var(--button-default-hover-right-border-style) var(--button-default-hover-bottom-border-style) var(--button-default-hover-left-border-style); box-shadow: var(--button-default-hover-shadow); } .rdtBtnCancel:not(:disabled):not(.is-disabled).hover { color: var(--button-default-hover-font-color); background: var(--button-default-hover-bg-color); border-color: var(--button-default-hover-top-border-color) var(--button-default-hover-right-border-color) var(--button-default-hover-bottom-border-color) var(--button-default-hover-left-border-color); border-width: var(--button-default-hover-top-border-width) var(--button-default-hover-right-border-width) var(--button-default-hover-bottom-border-width) var(--button-default-hover-left-border-width); border-style: var(--button-default-hover-top-border-style) var(--button-default-hover-right-border-style) var(--button-default-hover-bottom-border-style) var(--button-default-hover-left-border-style); box-shadow: var(--button-default-hover-shadow); } .rdtBtnCancel:not(:disabled):not(.is-disabled):hover:active { color: var(--button-default-active-font-color); background: var(--button-default-active-bg-color); border-color: var(--button-default-active-top-border-color) var(--button-default-active-right-border-color) var(--button-default-active-bottom-border-color) var(--button-default-active-left-border-color); border-width: var(--button-default-active-top-border-width) var(--button-default-active-right-border-width) var(--button-default-active-bottom-border-width) var(--button-default-active-left-border-width); border-style: var(--button-default-active-top-border-style) var(--button-default-active-right-border-style) var(--button-default-active-bottom-border-style) var(--button-default-active-left-border-style); box-shadow: var(--button-default-active-shadow); } .rdtBtnCancel:not(:disabled):not(.is-disabled).active, .rdtBtnCancel:not(:disabled):not(.is-disabled).is-active { color: var(--button-default-active-font-color); background: var(--button-default-active-bg-color); border-color: var(--button-default-active-top-border-color) var(--button-default-active-right-border-color) var(--button-default-active-bottom-border-color) var(--button-default-active-left-border-color); border-width: var(--button-default-active-top-border-width) var(--button-default-active-right-border-width) var(--button-default-active-bottom-border-width) var(--button-default-active-left-border-width); border-style: var(--button-default-active-top-border-style) var(--button-default-active-right-border-style) var(--button-default-active-bottom-border-style) var(--button-default-active-left-border-style); box-shadow: var(--button-default-active-shadow); } .rdtBtnCancel:disabled, .rdtBtnCancel.is-disabled { color: var(--button-default-disabled-font-color); background: var(--button-default-disabled-bg-color); border-color: var(--button-default-disabled-top-border-color) var(--button-default-disabled-right-border-color) var(--button-default-disabled-bottom-border-color) var(--button-default-disabled-left-border-color); border-width: var(--button-default-disabled-top-border-width) var(--button-default-disabled-right-border-width) var(--button-default-disabled-bottom-border-width) var(--button-default-disabled-left-border-width); border-style: var(--button-default-disabled-top-border-style) var(--button-default-disabled-right-border-style) var(--button-default-disabled-bottom-border-style) var(--button-default-disabled-left-border-style); box-shadow: var(--button-default-disabled-shadow); } .rdtBtnPrev:before, .rdtBtnNext:before { display: inline-block; color: inherit; font-style: normal; line-height: 1; } .rdtPrev, .rdtNext { cursor: pointer !important; width: var(--gap-md); padding: 0; color: var(--DatePicker-arrow-color); font-size: var(--fontSizeXl) !important; text-decoration: none; font-family: auto; font-weight: normal; } .rdtPrev .icon-right-arrow, .rdtNext .icon-right-arrow { width: 0.75rem; height: 0.75rem; top: 0; } .rdtPrev:hover, .rdtNext:hover { text-decoration: none; color: var(--inputDate-hover-title-arrow-color); } .rdtCenter { color: var(--DatePicker-color); } .rdtSwitch { text-align: center; cursor: pointer; font-weight: normal; color: var(--inputDate-default-title-color); } .rdtSwitch:hover { color: var(--DatePicker-header-onHover-color); text-decoration: none; } .rdtHeader { display: table; table-layout: fixed; border-collapse: separate; height: 40px; width: 100%; margin-top: -8px; } .rdtHeader > * { display: table-cell; vertical-align: middle; text-align: center; } .rdtHeader .rdtSwitch + .rdtSwitch { margin-left: var(--gap-xs); } .rdtHeader .date-icon-arrow-left, .rdtHeader .date-icon-arrow { width: 0.625rem; height: 0.625rem; top: 0; } .rdtHeader .date-icon-arrow-left { transform: rotate(180deg); transform-origin: 50% 50%; } .rdtHeader .icon-right-double-arrow { top: -1px; } .rdtHeader .icon-right-arrow { width: 0.75rem; height: 0.75rem; } .header-line { display: block; position: absolute; right: 0; left: 0; top: 40px; height: 1px; background: var(--Calendar-input-borderColor); } td.rdtMonth > span, td.rdtYear > span, td.rdtQuarter > span { display: inline-block; color: var(--inputDate-other-color); border-radius: var(--inputDate-other-top-left-border-radius) var(--inputDate-other-top-right-border-radius) var(--inputDate-other-bottom-right-border-radius) var(--inputDate-other-bottom-left-border-radius); } td.rdtMonth.rdtBetween, td.rdtYear.rdtBetween, td.rdtQuarter.rdtBetween { background: var(--Calendar-cell-onBetween-bg); } td.rdtMonth:hover, td.rdtYear:hover, td.rdtQuarter:hover { background: transparent; } td.rdtMonth:hover > span, td.rdtYear:hover > span, td.rdtQuarter:hover > span { color: var(--inputDate-other-hover-color); background: var(--inputDate-other-hover-bg-color); } td.rdtMonth.rdtActive, td.rdtMonth.rdtActive:hover, td.rdtYear.rdtActive, td.rdtYear.rdtActive:hover, td.rdtQuarter.rdtActive, td.rdtQuarter.rdtActive:hover { background: transparent; } td.rdtMonth.rdtActive > span, td.rdtMonth.rdtActive:hover > span, td.rdtYear.rdtActive > span, td.rdtYear.rdtActive:hover > span, td.rdtQuarter.rdtActive > span, td.rdtQuarter.rdtActive:hover > span { background: var(--inputDate-other-active-bg-color) !important; color: var(--inputDate-other-active-color) !important; } td.rdtMonth.rdtDisabled, td.rdtMonth.rdtDisabled:hover, td.rdtYear.rdtDisabled, td.rdtYear.rdtDisabled:hover, td.rdtQuarter.rdtDisabled, td.rdtQuarter.rdtDisabled:hover { background: var(--inputDate-other-disabled-bg-color); } td.rdtMonth.rdtDisabled > span, td.rdtMonth.rdtDisabled:hover > span, td.rdtYear.rdtDisabled > span, td.rdtYear.rdtDisabled:hover > span, td.rdtQuarter.rdtDisabled > span, td.rdtQuarter.rdtDisabled:hover > span { background: var(--inputDate-other-disabled-bg-color); color: var(--inputDate-other-disabled-color); } .rdtPicker .rdtActive.rdtBetween.rdtStart { background: linear-gradient(to right, transparent 0%, transparent 50%, var(--Calendar-cell-onBetween-bg) 51%, var(--Calendar-cell-onBetween-bg) 100%); } .rdtPicker .rdtActive.rdtBetween.rdtEnd { background: linear-gradient(to right, var(--Calendar-cell-onBetween-bg) 0%, var(--Calendar-cell-onBetween-bg) 50%, transparent 51%, transparent 100%); } .rdt .rdtPicker td.is-disabled { cursor: not-allowed !important; background: var(--Calendar-cell-onDisabled-bg); color: var(--text--muted-color); } .rdt .rdtPicker td.is-disabled:hover { background: var(--Calendar-cell-onDisabled-bg); color: var(--text--muted-color); } .rdt .rdtPicker td.is-disabled:hover > span { background: inherit !important; color: inherit !important; } .cxd-DateCalendar { display: inline-block; border-width: var(--DatePicker-borderWidth); border-style: var(--DatePicker-borderStyle); border-color: var(--DatePicker-borderColor); background: var(--DatePicker-bg); border-radius: var(--DatePicker-borderRadius); } .cxd-DateRangePicker { position: relative; display: inline-flex; flex-wrap: nowrap; border-width: var(--DatePicker-borderWidth); border-style: var(--DatePicker-borderStyle); border-color: var(--DatePicker-borderColor); font-size: var(--DatePicker-fontSize); padding: 0 var(--inputDate-default-paddingRight) 0 var(--inputDate-default-paddingLeft); height: var(--DatePicker-height); outline: none; border-radius: var(--DatePicker-borderRadius); color: var(--DatePicker-color); background: var(--DatePicker-bg); } .cxd-DateRangePicker--borderHalf { border-left-color: transparent !important; border-right-color: transparent !important; border-top-color: transparent !important; } .cxd-DateRangePicker--borderNone { border-color: transparent !important; } .cxd-DateRangePicker .cxd-DateRangePicker-clear { display: none; } .cxd-DateRangePicker:not(.is-disabled):not(.is-mobile):hover { background: var(--DatePicker-onHover-bg); border-color: var(--DatePicker-onHover-borderColor); border-style: var(--inputDate-hover-top-border-style) var(--inputDate-hover-right-border-style) var(--inputDate-hover-bottom-border-style) var(--inputDate-hover-left-border-style); border-width: var(--inputDate-hover-top-border-width) var(--inputDate-hover-right-border-width) var(--inputDate-hover-bottom-border-width) var(--inputDate-hover-left-border-width); } .cxd-DateRangePicker:not(.is-disabled):not(.is-mobile):hover .cxd-DateRangePicker-input { color: var(--inputDate-hover-color); } .cxd-DateRangePicker:not(.is-disabled):not(.is-mobile):hover .cxd-DateRangePicker-clear { display: flex; } .cxd-DateRangePicker:not(.is-disabled):not(.is-mobile):hover .cxd-DateRangePicker-clear + .cxd-DateRangePicker-toggler { display: none; } .cxd-DateRangePicker:not(.is-disabled):not(.is-mobile).is-focused { background: var(--inputDate-active-bg-color); border-color: var(--DatePicker-onFocused-borderColor); box-shadow: var(--inputDate-active-shadow); border-style: var(--inputDate-active-top-border-style) var(--inputDate-active-right-border-style) var(--inputDate-active-bottom-border-style) var(--inputDate-active-left-border-style); border-width: var(--inputDate-active-top-border-width) var(--inputDate-active-right-border-width) var(--inputDate-active-bottom-border-width) var(--inputDate-active-left-border-width); } .cxd-DateRangePicker:not(.is-disabled):not(.is-mobile).is-focused .cxd-DateRangePicker-input { color: var(--inputDate-active-color); } .is-error > .cxd-DateRangePicker { border-color: var(--Form-input-onError-borderColor); background: var(--Form-input-onError-bg); } .cxd-DateRangePicker .cxd-DateRangePicker-input { border: none; border-bottom: var(--DateRangePicker-activeCursor-height) solid transparent; outline: none; padding: 0; background: 0; min-width: 0; min-height: 0; flex: 1; width: 50%; line-height: 1.875rem; font-size: var(--DatePicker-fontSize); font-weight: var(--inputDate-default-fontWeight); color: var(--inputDate-default-color); text-align: center; } .cxd-DateRangePicker .cxd-DateRangePicker-input::-moz-placeholder { color: var(--colors-neutral-text-6); } .cxd-DateRangePicker .cxd-DateRangePicker-input::placeholder { color: var(--colors-neutral-text-6); } .cxd-DateRangePicker .cxd-DateRangePicker-input.isActive { border-bottom: var(--DateRangePicker-activeCursor-height) solid var(--DateRangePicker-activeCursor-color); } .cxd-DateRangePicker .cxd-DateRangePicker-input-separator { margin: 0 var(--inputDate-range-separator-margin); display: flex; align-items: center; } .cxd-DateRangePicker .cxd-DateRangePicker-input-separator-line { width: var(--inputDate-range-separator-width); height: 1px; background: var(--inputDate-range-separator-color); } .cxd-DateRangePicker.is-disabled { background: var(--inputDate-disabled-bg-color); border-width: var(--inputDate-disabled-top-border-width) var(--inputDate-disabled-right-border-width) var(--inputDate-disabled-bottom-border-width) var(--inputDate-disabled-left-border-width); border-style: var(--inputDate-disabled-top-border-style) var(--inputDate-disabled-right-border-style) var(--inputDate-disabled-bottom-border-style) var(--inputDate-disabled-left-border-style); border-color: var(--inputDate-disabled-top-border-color) var(--inputDate-disabled-right-border-color) var(--inputDate-disabled-bottom-border-color) var(--inputDate-disabled-left-border-color); } .cxd-DateRangePicker.is-disabled > .cxd-DateRangePicker-input { color: var(--inputDate-disabled-color); } .cxd-DateRangePicker-placeholder { color: var(--DatePicker-placeholderColor); -webkit-user-select: none; -moz-user-select: none; user-select: none; margin-right: var(--gap-base); flex-basis: 0; flex-grow: 1; } .cxd-DateRangePicker-value { margin-right: var(--gap-base); flex-basis: 0; flex-grow: 1; } .cxd-DateRangePicker-toggler { padding: var(--Form-input-clearBtn-padding); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: auto; text-decoration: none; line-height: 1; } .cxd-DateRangePicker-toggler svg { fill: var(--Form-input-clearBtn-color); width: var(--Form-input-clearBtn-size); height: var(--Form-input-clearBtn-size); top: 0; } .cxd-DateRangePicker-toggler:hover svg { fill: var(--Form-input-clearBtn-color-onHover); } .cxd-DateRangePicker-toggler:active svg { fill: var(--Form-input-clearBtn-color-onActive); } .cxd-DateRangePicker-toggler svg { color: var(--inputDate-default-icon-color); width: var(--inputDate-default-icon-size); height: var(--inputDate-default-icon-size); } .cxd-DateRangePicker .DatePicker-toggler-clock { content: var(--inputTime-default-icon); } .cxd-DateRangePicker .DatePicker-toggler-date { content: var(--inputDate-default-icon); } .cxd-DateRangePicker-clear { padding: var(--Form-input-clearBtn-padding); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: auto; text-decoration: none; line-height: 1; } .cxd-DateRangePicker-clear svg { fill: var(--Form-input-clearBtn-color); width: var(--Form-input-clearBtn-size); height: var(--Form-input-clearBtn-size); top: 0; } .cxd-DateRangePicker-clear:hover svg { fill: var(--Form-input-clearBtn-color-onHover); } .cxd-DateRangePicker-clear:active svg { fill: var(--Form-input-clearBtn-color-onActive); } .cxd-DateRangePicker-clear svg { top: 0; width: var(--inputDate-default-icon-size); height: var(--inputDate-default-icon-size); } .cxd-DateRangePicker-activeCursor { bottom: 0; height: var(--DateRangePicker-activeCursor-height); background: var(--DateRangePicker-activeCursor-color); opacity: 0; transition: all var(--animation-duration) ease-in-out; pointer-events: none; } .cxd-DateRangePicker-activeCursor.isFocused { opacity: 1; } .cxd-DateRangePicker-wrap { width: auto; padding: 0; } .cxd-DateRangePicker-wrap.is-mobile { min-width: 0; min-height: 0; flex: 1; } .cxd-DateRangePicker-wrap.is-mobile .cxd-DateRangePicker-end { margin-top: 0; } .cxd-DateRangePicker-picker-wrap { display: flex; } .cxd-DateRangePicker-picker-wrap.is-vertical { flex-direction: column; } .cxd-DateRangePicker-start, .cxd-DateRangePicker-end { display: flex; min-width: 0; min-height: 0; flex: 1; } .cxd-DateRangePicker-start .rdtPicker, .cxd-DateRangePicker-end .rdtPicker { padding: 0; box-shadow: none; border: none; } .cxd-DateRangePicker-end { margin-top: 20px; } .cxd-DateRangePicker-rangers { margin: 0; padding-left: 0.625rem; list-style: none; background: var(--colors-neutral-fill-10); line-height: 2rem; overflow-x: auto; } .cxd-DateRangePicker-ranger { display: inline-block; margin-right: 2rem; font-size: var(--fontSizeSm); } .cxd-DateRangePicker-ranger a { cursor: pointer; color: var(--DatePicker-color); } .cxd-DateRangePicker-ranger a:hover { color: var(--DatePicker-header-onHover-color); } .cxd-DateRangePicker-actions { text-align: right; padding: var(--gap-sm); border-top: 1px solid var(--Calendar-input-borderColor); } .cxd-DateRangeControl:not(.is-inline) > .cxd-DateRangePicker { display: flex; } .cxd-DateRangePicker-popover { border: var(--Form-select-outer-borderWidth) solid var(--Form-select-outer-borderColor); box-shadow: var(--Form-select-outer-boxShadow); } .cxd-DateRangePicker-popup { height: 25rem; } @media (min-width: 576px) { .cxd-DateRangePicker-wrap { white-space: nowrap; } .cxd-DateRangePicker-end { margin-top: 0; border-left: 1px solid var(--Calendar-input-borderColor); } } .cxd-DateRangeCalendar { display: inline-block; border-width: var(--DatePicker-borderWidth); border-style: var(--DatePicker-borderStyle); border-color: var(--DatePicker-borderColor); background: var(--DatePicker-bg); border-radius: var(--DatePicker-borderRadius); } .cxd-DateRangeCalendar.is-mobile { display: block; } .cxd-DateRangePicker.is-mobile { border: 0; justify-content: flex-end; } .cxd-DateRangePicker.is-mobile.is-focused, .cxd-DateRangePicker.is-mobile:hover { border: none; } .cxd-DateRangePicker.is-mobile span:focus, .cxd-DateRangePicker.is-mobile a:focus { outline: unset; } .cxd-DateRangePicker.is-mobile .cxd-DateRangePicker-value, .cxd-DateRangePicker.is-mobile .cxd-DateRangePicker-clear { display: inline-flex; justify-content: flex-end; padding: 0 0; } .cxd-DateRangePicker.is-mobile .cxd-DateRangePicker-value { margin-right: var(--gap-xs); } .cxd-DateRangePicker.is-mobile .cxd-DateRangePicker-placeholder { flex-grow: unset; flex-basis: unset; } .cxd-ImageControl { position: relative; } .cxd-ImageControl-dropzone { outline: none; } .cxd-ImageControl .ImageControl-addBtn-icon { z-index: 1; content: var(--inputImage-base-default-icon); } .cxd-ImageControl-addBtn { position: relative; margin: 0; width: 7.5rem; height: 7.5rem; display: inline-flex; flex-direction: column; justify-content: center; align-items: center; border-radius: var(--inputImage-base-default-top-left-border-radius) var(--inputImage-base-default-top-right-border-radius) var(--inputImage-base-default-bottom-right-border-radius) var(--inputImage-base-default-bottom-left-border-radius); cursor: pointer; margin-right: var(--gap-base); color: var(--ImageControl-addBtn-color); background: var(--ImageControl-addBtn-bg); border-color: var(--inputImage-base-default-top-border-color) var(--inputImage-base-default-right-border-color) var(--inputImage-base-default-bottom-border-color) var(--inputImage-base-default-left-border-color); border-width: var(--inputImage-base-default-top-border-width) var(--inputImage-base-default-right-border-width) var(--inputImage-base-default-bottom-border-width) var(--inputImage-base-default-left-border-width); border-style: var(--inputImage-base-default-top-border-style) var(--inputImage-base-default-right-border-style) var(--inputImage-base-default-bottom-border-style) var(--inputImage-base-default-left-border-style); box-shadow: var(--shadows-shadow-none); } .cxd-ImageControl-addBtn-bg { position: absolute; z-index: 0; overflow: hidden; left: 0; right: 0; top: 0; bottom: 0; } .cxd-ImageControl-addBtn-bg .cxd-Image { border: 0; } .cxd-ImageControl-addBtn:not(:disabled):not(.is-disabled):hover { color: var(--ImageControl-addBtn-onHover-color); background: var(--ImageControl-addBtn-onHover-bg); border-color: var(--inputImage-base-hover-top-border-color) var(--inputImage-base-hover-right-border-color) var(--inputImage-base-hover-bottom-border-color) var(--inputImage-base-hover-left-border-color); border-width: var(--inputImage-base-hover-top-border-width) var(--inputImage-base-hover-right-border-width) var(--inputImage-base-hover-bottom-border-width) var(--inputImage-base-hover-left-border-width); border-style: var(--inputImage-base-hover-top-border-style) var(--inputImage-base-hover-right-border-style) var(--inputImage-base-hover-bottom-border-style) var(--inputImage-base-hover-left-border-style); box-shadow: var(--shadows-shadow-none); } .cxd-ImageControl-addBtn:not(:disabled):not(.is-disabled).hover { color: var(--ImageControl-addBtn-onHover-color); background: var(--ImageControl-addBtn-onHover-bg); border-color: var(--inputImage-base-hover-top-border-color) var(--inputImage-base-hover-right-border-color) var(--inputImage-base-hover-bottom-border-color) var(--inputImage-base-hover-left-border-color); border-width: var(--inputImage-base-hover-top-border-width) var(--inputImage-base-hover-right-border-width) var(--inputImage-base-hover-bottom-border-width) var(--inputImage-base-hover-left-border-width); border-style: var(--inputImage-base-hover-top-border-style) var(--inputImage-base-hover-right-border-style) var(--inputImage-base-hover-bottom-border-style) var(--inputImage-base-hover-left-border-style); box-shadow: var(--shadows-shadow-none); } .cxd-ImageControl-addBtn:not(:disabled):not(.is-disabled):hover:active { color: var(--ImageControl-addBtn-onActive-color); background: var(--ImageControl-addBtn-onActive-bg); border-color: var(--inputImage-base-active-top-border-color) var(--inputImage-base-active-right-border-color) var(--inputImage-base-active-bottom-border-color) var(--inputImage-base-active-left-border-color); border-width: var(--inputImage-base-active-top-border-width) var(--inputImage-base-active-right-border-width) var(--inputImage-base-active-bottom-border-width) var(--inputImage-base-active-left-border-width); border-style: var(--inputImage-base-active-top-border-style) var(--inputImage-base-active-right-border-style) var(--inputImage-base-active-bottom-border-style) var(--inputImage-base-active-left-border-style); box-shadow: var(--shadows-shadow-none); } .cxd-ImageControl-addBtn:not(:disabled):not(.is-disabled).active, .cxd-ImageControl-addBtn:not(:disabled):not(.is-disabled).is-active { color: var(--ImageControl-addBtn-onActive-color); background: var(--ImageControl-addBtn-onActive-bg); border-color: var(--inputImage-base-active-top-border-color) var(--inputImage-base-active-right-border-color) var(--inputImage-base-active-bottom-border-color) var(--inputImage-base-active-left-border-color); border-width: var(--inputImage-base-active-top-border-width) var(--inputImage-base-active-right-border-width) var(--inputImage-base-active-bottom-border-width) var(--inputImage-base-active-left-border-width); border-style: var(--inputImage-base-active-top-border-style) var(--inputImage-base-active-right-border-style) var(--inputImage-base-active-bottom-border-style) var(--inputImage-base-active-left-border-style); box-shadow: var(--shadows-shadow-none); } .cxd-ImageControl-addBtn:disabled, .cxd-ImageControl-addBtn.is-disabled { color: var(--ImageControl-addBtn-onDisabled-color); background: var(--ImageControl-addBtn-onDisabled-bg); border-color: var(--inputImage-base-disabled-top-border-color) var(--inputImage-base-disabled-right-border-color) var(--inputImage-base-disabled-bottom-border-color) var(--inputImage-base-disabled-left-border-color); border-width: var(--inputImage-base-disabled-top-border-width) var(--inputImage-base-disabled-right-border-width) var(--inputImage-base-disabled-bottom-border-width) var(--inputImage-base-disabled-left-border-width); border-style: var(--inputImage-base-disabled-top-border-style) var(--inputImage-base-disabled-right-border-style) var(--inputImage-base-disabled-bottom-border-style) var(--inputImage-base-disabled-left-border-style); box-shadow: var(--shadows-shadow-none); } .cxd-ImageControl-addBtn svg { top: 0; margin-bottom: var(--inputImage-base-default-icon-margin); font-size: var(--inputImage-base-default-icon-size); color: var(--inputImage-base-default-icon-color); width: var(--inputImage-base-default-icon-size); height: var(--inputImage-base-default-icon-size); } .cxd-ImageControl-addBtn-text { z-index: 1; font-size: var(--inputImage-base-default-fontSize); font-weight: var(--inputImage-base-default-fontWeight); } .cxd-ImageControl-addBtn:not(:disabled):not(.is-disabled).is-invalid:hover { border-color: var(--FileControl-danger-color); } .cxd-ImageControl-addBtn:not(:disabled):not(.is-disabled):hover svg { color: var(--inputImage-base-hover-icon-color); } .cxd-ImageControl-addBtn:not(:disabled):not(.is-disabled):hover:active svg { color: var(--inputImage-base-active-icon-color); } .cxd-ImageControl-addBtn.is-invalid { border-color: var(--FileControl-danger-color); } .cxd-ImageControl-addBtn.is-disabled { pointer-events: none; } .cxd-ImageControl-addBtn.is-disabled svg { color: var(--inputImage-base-disabled-icon-color); } .cxd-ImageControl-pasteTip { pointer-events: none; left: 0; top: 50%; transform: translateY(-50%); position: absolute; font-size: var(--Tooltip--attr-fontSize); line-height: var(--Tooltip--attr-lineHeigt); text-align: left; white-space: nowrap; background: var(--Tooltip--attr-bg); border: var(--Tooltip--attr-borderWidth) solid var(--Tooltip--attr-borderColor); border-radius: var(--Tooltip--attr-borderRadius); box-shadow: var(--Tooltip--attr-boxShadow); left: 100%; color: var(--Tooltip--attr-color); padding: var(--Tooltip--attr-paddingY) var(--Tooltip--attr-paddingX); margin: 30px 0 0 var(--Tooltip--attr-gap); } .cxd-ImageControl-itemList { display: inline; } .cxd-ImageControl-item { border: var(--borderWidth) solid var(--borderColor); border-radius: var(--ImageControl-addBtn-borderRadius); vertical-align: top; padding: var(--gap-xs); display: inline-block; margin-right: var(--gap-base); margin-bottom: var(--gap-base); position: relative; width: 7.5rem; } .cxd-ImageControl-item.is-invalid { padding: 0; border-color: var(--FileControl-danger-color); } .cxd-ImageControl-item-errorTip { color: var(--FileControl-danger-color); } .cxd-ImageControl-item svg.icon-refresh { transform: rotate(180deg); } .cxd-ImageControl-item--dragging { border: var(--borderWidth) solid var(--colors-brand-5); } .cxd-ImageControl-filename { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; color: var(--FileControl-danger-color); } .cxd-ImageControl-filename > svg.icon-image { margin-bottom: 8px; width: 24px; height: 24px; } .cxd-ImageControl-filename > span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .cxd-ImageControl-image { width: 100%; height: 100%; padding: 0; border: none; display: block; } .cxd-ImageControl-itemClear { position: absolute; cursor: pointer; color: #999; top: 5px; right: 5px; line-height: 1; } .cxd-ImageControl-itemClear > svg { top: 0; width: 10px; height: 10px; } .cxd-ImageControl-itemInfo { display: inline-flex; width: 110px; height: 110px; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; } .cxd-ImageControl-itemInfo > p { width: 100%; text-align: center; font-size: 12px; margin-bottom: 5px; } .cxd-ImageControl-progress { width: 70px; height: 5px; background: #ebebeb; } .cxd-ImageControl-progressValue { height: 5px; border-radius: var(--ImageControl-progress-borderRadius); display: block; background: var(--info); min-width: 10%; transition: ease-out width var(--animation-duration); } .cxd-ImageControl-item.is-invalid .cxd-ImageControl-itemClear { display: none; } .cxd-ImageControl-item.is-invalid:hover .cxd-ImageControl-itemClear { display: block; } .cxd-ImageControl-errorMsg { color: var(--danger); margin: 5px 0 0; } .cxd-ImageControl-uploadBtn { margin-top: 5px; } .cxd-ImageControl-cropperWrapper { position: relative; } .cxd-ImageControl-cropperWrapper img { max-width: 100%; max-height: 400px; } .cxd-ImageControl-croperToolbar { display: inline-flex; position: absolute; right: 0; bottom: 0; flex-direction: column; align-items: flex-end; background: #fff; border-radius: 4px; margin: 0.5rem; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1); } .cxd-ImageControl-croperToolbar > a { color: var(--Form-item-color); padding: 2px 5px; cursor: pointer; font-size: 18px; } .cxd-ImageControl-croperToolbar > a:hover { color: var(--link-color); } .cxd-ImageControl-acceptTip { height: 120px; color: #999; border: 2px dashed var(--borderColor); border-color: var(--info); background: #f3f9fe; border-radius: var(--borderRadius); line-height: 120px; text-align: center; } .cxd-ImageControl-fixed-size { width: 100%; height: 100%; padding: 0; } .cxd-ImageControl-fixed-size .cxd-ImageControl-itemOverlay { width: 100%; height: 100%; } .cxd-FileControl-templateInfo { display: block; margin-bottom: var(--gap-base); padding: var(--Button-paddingY) var(--Button-paddingX); cursor: pointer; } .cxd-FileControl-templateInfo > svg { margin-right: var(--gap-xs); } .cxd-FileControl-dropzone { outline: none; } .cxd-FileControl-selectBtn { display: inline-flex; margin-right: var(--inputFile-base-des-margin); } .cxd-FileControl-selectBtn > svg { margin-right: 4px !important; width: 1rem; height: 1rem; top: 0; } .cxd-FileControl-selectBtn > span { font-size: var(--fontSizeSm); line-height: 20px; } .cxd-FileControl-description { margin-top: var(--inputFile-base-des-margin); line-height: 20px; color: var(--inputFile-base-des-color); font-size: var(--inputFile-base-des-fontSize); font-weight: var(--inputFile-base-des-fontWeight); } .cxd-FileControl-sizeTip { margin-top: 4px; line-height: 20px; font-size: var(--fontSizeSm); color: var(--FileControl-icon-color); } .cxd-FileControl-list { list-style: none; margin: var(--inputFile-list-marginTop) var(--inputFile-list-marginRight) var(--inputFile-list-marginBottom) var(--inputFile-list-marginLeft); padding: 0; max-height: 144px; overflow-x: hidden; overflow-y: auto; } .cxd-FileControl-list > li { margin-bottom: 4px; font-size: 12px; background: var(--inputFile-list-bg-color); } .cxd-FileControl-list > li:hover { border-radius: 2px; background: var(--FileControl-onHover-bg); } .cxd-FileControl-list-tooltip span { font-size: var(--fontSizeSm); } .cxd-FileControl-list-tooltip.is-invalid span { color: var(--FileControl-danger-color); } .cxd-FileControl-itemInfo { padding: var(--inputFile-list-paddingTop) var(--inputFile-list-paddingRight) var(--inputFile-list-paddingBottom) var(--inputFile-list-paddingLeft); display: flex; line-height: 24px; height: auto; } .cxd-FileControl-itemInfo span { word-break: break-all; } .cxd-FileControl-itemInfo.is-invalid { color: var(--FileControl-danger-color); } .cxd-FileControl-itemInfo.is-invalid .cxd-FileControl-itemInfoIcon, .cxd-FileControl-itemInfo.is-invalid .cxd-FileControl-itemInfoText { color: var(--FileControl-danger-color); } .cxd-FileControl-itemInfo > svg:not(:first-child) { margin-left: 10px; width: 1rem; height: 1rem; top: var(--gap-xs); } .cxd-FileControl-itemInfoIcon { margin-right: var(--inputFile-list-icon-margin); font-size: var(--inputFile-list-icon-size); color: var(--inputFile-list-icon-color); } .cxd-FileControl-itemInfoText { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; color: var(--inputFile-list-color); font-size: var(--inputFile-list-fontSize); font-weight: var(--inputFile-list-fontWeight); line-height: 1.5rem; } .cxd-FileControl-itemInfoText:hover { color: var(--inputFile-list-color); font-size: var(--inputFile-list-fontSize); font-weight: var(--inputFile-list-fontWeight); line-height: 1.5rem; } .cxd-FileControl-clear { color: var(--FileControl-icon-color); display: none; cursor: pointer; margin-left: auto; margin-right: var(--gap-xs); font-size: var(--inputFile-list-delete-icon-size); line-height: 1.5rem; } .cxd-FileControl-clear:hover { font-size: var(--inputFile-list-delete-icon-size); line-height: 1.5rem; color: var(--FileControl-icon-onHover-color); } .cxd-FileControl-list:empty { display: none; } .cxd-FileControl-list > li:hover .cxd-FileControl-clear { display: block; } .cxd-FileControl-progressInfo { display: inline-flex; height: 20px; padding: 0 6px; transform: translateY(-3px); width: 100%; align-items: center; white-space: nowrap; text-overflow: ellipsis; } .cxd-FileControl-progressInfo > span { display: inline-block; padding: 0 4px 0 10px; font-size: 12px; } .cxd-FileControl-progressInfo > svg { display: inline-block; margin: 0 4px 0 10px; width: 14px; height: 14px; top: 0; } .cxd-FileControl-progress { height: 5px; min-width: 0; min-height: 0; flex: 1; background: #ebebeb; } .cxd-FileControl-progress > span { display: block; background: var(--info); border-radius: var(--FileControl-progress-borderRadius); height: 100%; transition: ease-out width var(--animation-duration); } .cxd-FileControl-dropzone.disabled > .cxd-FileControl-acceptTip { filter: grayscale(100%); box-shadow: none; cursor: not-allowed; color: var(--FileControl-onDisabled-color); pointer-events: auto; background: var(--FileControl-onDisabled-bg); } .cxd-FileControl-dropzone.disabled > .cxd-FileControl-acceptTip:hover { border-color: var(--FileControl-border-color); } .cxd-FileControl-dropzone.disabled > .cxd-FileControl-acceptTip > div, .cxd-FileControl-dropzone.disabled > .cxd-FileControl-acceptTip > span { color: var(--FileControl-onDisabled-color); } .cxd-FileControl-acceptTip { display: flex; align-items: center; justify-content: center; flex-flow: column; height: 180px; text-align: center; border-style: var(--inputFile-drag-top-border-style) var(--inputFile-drag-right-border-style) var(--inputFile-drag-bottom-border-style) var(--inputFile-drag-left-border-style); border-color: var(--FileControl-border-color); border-width: var(--inputFile-drag-top-border-width) var(--inputFile-drag-right-border-width) var(--inputFile-drag-bottom-border-width) var(--inputFile-drag-left-border-width); border-radius: var(--inputFile-drag-top-left-border-radius) var(--inputFile-drag-top-right-border-radius) var(--inputFile-drag-bottom-right-border-radius) var(--inputFile-drag-bottom-left-border-radius); background: var(--inputFile-drag-bg-color); cursor: pointer; } .cxd-FileControl-acceptTip-click { color: var(--Spinner-color); } .cxd-FileControl-acceptTip-help a { color: var(--FileControl-icon-color); font-size: var(--fontSizeSm); } .cxd-FileControl-acceptTip:hover { border-style: var(--inputFile-drag-hover-top-border-style) var(--inputFile-drag-hover-right-border-style) var(--inputFile-drag-hover-bottom-border-style) var(--inputFile-drag-hover-left-border-style); border-color: var(--inputFile-drag-hover-top-border-color) var(--inputFile-drag-hover-right-border-color) var(--inputFile-drag-hover-bottom-border-color) var(--inputFile-drag-hover-left-border-color); border-width: var(--inputFile-drag-hover-top-border-width) var(--inputFile-drag-hover-right-border-width) var(--inputFile-drag-hover-bottom-border-width) var(--inputFile-drag-hover-left-border-width); background: var(--inputFile-drag-bg-color-hover); } .cxd-FileControl-acceptTip > span { margin-top: var(--inputFile-drag-icon-margin); line-height: 20px; font-size: var(--inputFile-drag-fontSize); font-weight: var(--inputFile-drag-fontWeight); color: var(--FileControl-drag-color); } .cxd-FileControl-acceptTip > svg { top: 0; font-size: var(--inputFile-drag-icon-size); color: var(--inputFile-drag-icon-color); } .cxd-FileControl-dropzone.is-active .cxd-FileControl-acceptTip { border-color: var(--info); } .cxd-FileControl-sum { font-size: var(--fontSizeSm); } .cxd-FileControl-sum > a { cursor: pointer; font-size: var(--fontSizeSm); } .cxd-ExcelControl-container { display: flex; flex-direction: column; font-family: sans-serif; cursor: pointer; } .cxd-ExcelControl-container > p { font-size: 1rem; } .cxd-ExcelControl-container > em { font-size: 0.75rem; } .cxd-ExcelControl-dropzone { min-width: 0; min-height: 0; flex: 1; display: flex; flex-direction: column; align-items: center; padding: var(--gap-md); border-width: 2px; border-radius: 2px; border-color: var(--colors-neutral-line-8); border-style: dashed; background-color: var(--colors-neutral-fill-10); color: var(--colors-neutral-text-6); outline: none; transition: border 0.24s ease-in-out; } .cxd-ExcelControl-dropzone:focus { border-color: var(--primary); } .cxd-ExcelControl-dropzone.disabled { opacity: 0.6; } .cxd-EditorControl { min-height: 12.5rem; max-height: 25rem; overflow: visible; height: auto; border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor); max-width: 100%; box-sizing: content-box; } .cxd-EditorControl > .cxd-MonacoEditor, .cxd-EditorControl > .cxd-MonacoEditor > .monaco-diff-editor { min-height: inherit; } .cxd-EditorControl.is-error { border-color: var(--Form-input-onError-borderColor); } .cxd-EditorControl.is-focused { border-color: var(--Form-input-onFocused-borderColor); } .cxd-EditorControl--sm { min-height: 100px; } .cxd-EditorControl--sm > .cxd-MonacoEditor { min-height: 100px; } .cxd-EditorControl--md { min-height: 250px; } .cxd-EditorControl--md > .cxd-MonacoEditor { min-height: 250px; } .cxd-EditorControl--lg { min-height: 300px; } .cxd-EditorControl--lg > .cxd-MonacoEditor { min-height: 300px; } .cxd-EditorControl--xl { min-height: 400px; } .cxd-EditorControl--xl > .cxd-MonacoEditor { min-height: 400px; } .cxd-EditorControl--xxl { min-height: 500px; } .cxd-EditorControl--xxl > .cxd-MonacoEditor { min-height: 500px; } .cxd-EditorControl .monaco-editor .iPadShowKeyboard { display: none; } .cxd-MonacoEditor { position: relative; } .cxd-MonacoEditor-header { position: absolute; right: 0.875rem; top: 0; padding: 0; width: 1.125rem; height: 1.125rem; z-index: 5; display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; box-sizing: border-box; } .cxd-MonacoEditor-fullscreen { cursor: pointer; color: var(--Modal-close-color); line-height: inherit; text-decoration: none; text-align: center; vertical-align: middle; } .cxd-MonacoEditor-fullscreen:hover { color: var(--Model-close-onHover-color); } .cxd-MonacoEditor-fullscreen:hover svg { fill: var(--Model-close-onHover-color); } .cxd-MonacoEditor-placeholder { pointer-events: none; top: 0; position: absolute; left: 4.0625rem; right: 1rem; white-space: break-spaces; line-break: anywhere; color: var(--Form-input-placeholderColor); } .monaco-inputbox > .wrapper { padding: 0; } .is-fullscreen { margin: 0 !important; position: fixed !important; top: 0; left: 0; bottom: 0; right: 0; z-index: 2147483630 !important; width: auto !important; } .fr-popup { z-index: 3000 !important; } .cxd-RichTextControl { position: relative; min-height: 12.5rem; height: auto; border-width: var(--inputRichText-default-top-border-width) var(--inputRichText-default-right-border-width) var(--inputRichText-default-bottom-border-width) var(--inputRichText-default-left-border-width); border-style: var(--inputRichText-default-top-border-style) var(--inputRichText-default-right-border-style) var(--inputRichText-default-bottom-border-style) var(--inputRichText-default-left-border-style); border-color: var(--inputRichText-default-top-border-color) var(--inputRichText-default-right-border-color) var(--inputRichText-default-bottom-border-color) var(--inputRichText-default-left-border-color); border-radius: var(--inputRichText-default-top-left-border-radius) var(--inputRichText-default-top-right-border-radius) var(--inputRichText-default-bottom-right-border-radius) var(--inputRichText-default-bottom-left-border-radius); width: 100%; } .cxd-RichTextControl > .tox-tinymce { border: 0; } .cxd-RichTextControl > textarea { width: 100%; } .cxd-RichTextControl--borderHalf { border-left-color: transparent !important; border-right-color: transparent !important; border-top-color: transparent !important; } .cxd-RichTextControl--borderNone { border-color: transparent !important; } .cxd-RichTextControl .fr-toolbar.fr-top { box-shadow: none; border: 0; position: relative; } .cxd-RichTextControl .fr-box.fr-basic.fr-top:not(.fr-fullscreen) .fr-wrapper { min-height: 150px; max-height: 400px; box-shadow: none; overflow: auto; border: none; } .cxd-RichTextControl .second-toolbar { border: none; } .cxd-RichTextControl:hover { border-width: var(--inputRichText-hover-top-border-width) var(--inputRichText-hover-right-border-width) var(--inputRichText-hover-bottom-border-width) var(--inputRichText-hover-left-border-width); border-style: var(--inputRichText-hover-top-border-style) var(--inputRichText-hover-right-border-style) var(--inputRichText-hover-bottom-border-style) var(--inputRichText-hover-left-border-style); border-color: var(--inputRichText-hover-top-border-color) var(--inputRichText-hover-right-border-color) var(--inputRichText-hover-bottom-border-color) var(--inputRichText-hover-left-border-color); border-radius: var(--inputRichText-hover-top-left-border-radius) var(--inputRichText-hover-top-right-border-radius) var(--inputRichText-hover-bottom-right-border-radius) var(--inputRichText-hover-bottom-left-border-radius); } .cxd-RichTextControl.is-focused { border-width: var(--inputRichText-active-top-border-width) var(--inputRichText-active-right-border-width) var(--inputRichText-active-bottom-border-width) var(--inputRichText-active-left-border-width); border-style: var(--inputRichText-active-top-border-style) var(--inputRichText-active-right-border-style) var(--inputRichText-active-bottom-border-style) var(--inputRichText-active-left-border-style); border-color: var(--inputRichText-active-top-border-color) var(--inputRichText-active-right-border-color) var(--inputRichText-active-bottom-border-color) var(--inputRichText-active-left-border-color); border-radius: var(--inputRichText-active-top-left-border-radius) var(--inputRichText-active-top-right-border-radius) var(--inputRichText-active-bottom-right-border-radius) var(--inputRichText-active-bottom-left-border-radius); } .cxd-RichTextControl .fr-box.fr-basic .fr-element { min-height: 150px; } .cxd-RichTextControl .fr-sticky-dummy { position: absolute; } .cxd-RichTextControl.is-disabled { border-width: var(--inputRichText-disabled-top-border-width) var(--inputRichText-disabled-right-border-width) var(--inputRichText-disabled-bottom-border-width) var(--inputRichText-disabled-left-border-width); border-style: var(--inputRichText-disabled-top-border-style) var(--inputRichText-disabled-right-border-style) var(--inputRichText-disabled-bottom-border-style) var(--inputRichText-disabled-left-border-style); border-color: var(--inputRichText-disabled-top-border-color) var(--inputRichText-disabled-right-border-color) var(--inputRichText-disabled-bottom-border-color) var(--inputRichText-disabled-left-border-color); border-radius: var(--inputRichText-disabled-top-left-border-radius) var(--inputRichText-disabled-top-right-border-radius) var(--inputRichText-disabled-bottom-right-border-radius) var(--inputRichText-disabled-bottom-left-border-radius); pointer-events: none; opacity: 0.6; } .cxd-RichTextControl.is-disabled .fr-box.fr-basic.fr-top .fr-wrapper { border-width: var(--inputRichText-disabled-top-border-width) var(--inputRichText-disabled-right-border-width) var(--inputRichText-disabled-bottom-border-width) var(--inputRichText-disabled-left-border-width); border-style: var(--inputRichText-disabled-top-border-style) var(--inputRichText-disabled-right-border-style) var(--inputRichText-disabled-bottom-border-style) var(--inputRichText-disabled-left-border-style); border-color: var(--inputRichText-disabled-top-border-color) var(--inputRichText-disabled-right-border-color) var(--inputRichText-disabled-bottom-border-color) var(--inputRichText-disabled-left-border-color); border-radius: var(--inputRichText-disabled-top-left-border-radius) var(--inputRichText-disabled-top-right-border-radius) var(--inputRichText-disabled-bottom-right-border-radius) var(--inputRichText-disabled-bottom-left-border-radius); } .tox-tinymce-aux { z-index: 3000; } .tox-fullscreen .tox.tox-tinymce-aux { z-index: 3000; } .cxd-InputRange { display: flex; justify-content: space-between; width: 100%; } .cxd-InputRange.cxd-Form-control--sizeXs, .cxd-InputRange.cxd-Form-control--sizeSm, .cxd-InputRange.cxd-Form-control--sizeMd, .cxd-InputRange.cxd-Form-control--sizeLg { display: flex; } .cxd-InputRange-wrap { position: relative; flex: auto; padding: var(--InputRange-padding) 0; } .cxd-InputRange-input { width: var(--InputRange-input-width); margin: var(--InputRange-input-marginTop) var(--InputRange-input-marginRight) var(--InputRange-input-marginBottom) var(--InputRange-input-marginLeft); } .cxd-InputRange-input .cxd-Number { overflow: hidden; } .cxd-InputRange-input .cxd-Number-handler { transition: 0.3s opacity; color: var(--Number-handler-color); } .cxd-InputRange-input .cxd-Number-handler-up-inner, .cxd-InputRange-input .cxd-Number-handler-down-inner { cursor: pointer; } .cxd-InputRange-input .cxd-Number-handler-up-inner:hover, .cxd-InputRange-input .cxd-Number-handler-down-inner:hover { color: var(--Number-handler-onHover-color); } .cxd-InputRange-input-with-unit { display: flex; width: auto; } .cxd-InputRange-input-with-unit:hover .cxd-Number, .cxd-InputRange-input-with-unit:hover .cxd-InputRange-unit { border-width: var(--inputNumber-base-hover-top-border-width) var(--inputNumber-base-hover-right-border-width) var(--inputNumber-base-hover-bottom-border-width) var(--inputNumber-base-hover-left-border-width); border-style: var(--inputNumber-base-hover-top-border-style) var(--inputNumber-base-hover-right-border-style) var(--inputNumber-base-hover-bottom-border-style) var(--inputNumber-base-hover-left-border-style); border-color: var(--inputNumber-base-hover-top-border-color) var(--inputNumber-base-hover-right-border-color) var(--inputNumber-base-hover-bottom-border-color) var(--inputNumber-base-hover-left-border-color); border-radius: var(--inputNumber-base-hover-top-left-border-radius) var(--inputNumber-base-hover-top-right-border-radius) var(--inputNumber-base-hover-bottom-right-border-radius) var(--inputNumber-base-hover-bottom-left-border-radius); } .cxd-InputRange-input-with-unit .cxd-Number-focused + .cxd-InputRange-unit { border-width: var(--inputNumber-base-active-top-border-width) var(--inputNumber-base-active-right-border-width) var(--inputNumber-base-active-bottom-border-width) var(--inputNumber-base-active-left-border-width); border-style: var(--inputNumber-base-active-top-border-style) var(--inputNumber-base-active-right-border-style) var(--inputNumber-base-active-bottom-border-style) var(--inputNumber-base-active-left-border-style); border-color: var(--inputNumber-base-active-top-border-color) var(--inputNumber-base-active-right-border-color) var(--inputNumber-base-active-bottom-border-color) var(--inputNumber-base-active-left-border-color); border-radius: var(--inputNumber-base-active-top-left-border-radius) var(--inputNumber-base-active-top-right-border-radius) var(--inputNumber-base-active-bottom-right-border-radius) var(--inputNumber-base-active-bottom-left-border-radius); } .cxd-InputRange-input-with-unit .cxd-Number { width: 5rem; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; border-right: none !important; } .cxd-InputRange-input-with-unit .cxd-InputRange-unit { cursor: default; text-align: center; min-width: unset; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; background-color: var(--inputNumber-base-unit-bg-color); } .cxd-InputRange.is-mobile .cxd-InputRange-input { width: var(--InputRange-input-mobile-width); } .cxd-InputRange.is-mobile .cxd-InputRange-input .cxd-Number-handler-wrap { display: none !important; } .cxd-InputRange.is-mobile .cxd-InputRange-input input { padding: 0 !important; text-align: center; } .cxd-InputRange-clear { display: flex; align-items: center; cursor: pointer; } .cxd-InputRange-clear svg { height: var(--InputRange-clearIcon-height); width: var(--InputRange-clearIcon-width); fill: var(--InputRange-clearIcon-color); } .cxd-InputRange-clear:hover svg { fill: var(--InputRange-clearIcon-hoverColor); } .cxd-InputRange.is-disabled .cxd-InputRange-track { cursor: not-allowed; } .cxd-InputRange.is-disabled .cxd-InputRange-track-active { background-color: var(--InputRange-track-onActive-onDisabled-bg); cursor: not-allowed; } .cxd-InputRange.is-disabled .cxd-InputRange-handle-icon { border-color: var(--InputRange-handle-onDisabled-border-color); background-color: var(--InputRange-handle-onDisabled-bg); cursor: not-allowed; } .cxd-InputRange.is-disabled .cxd-InputRange-handle-icon:hover { transform: none; } .cxd-InputRange.is-disabled .cxd-InputRange-handle-icon .icon-slider-handle g path { fill: var(--InputRange-handle-icon-onDisabled-color); } .cxd-InputRange.is-disabled .cxd-Number-handler { cursor: not-allowed; } .cxd-InputRange.is-disabled .cxd-Number-handler-up-inner, .cxd-InputRange.is-disabled .cxd-Number-handler-down-inner { cursor: not-allowed; } .cxd-InputRange.is-disabled .cxd-Number-handler-up-inner:hover, .cxd-InputRange.is-disabled .cxd-Number-handler-down-inner:hover { color: var(--text--muted-color); } .cxd-InputRange-handle { position: absolute; top: 0; bottom: 0; margin: auto 0 auto calc(var(--InputRange-handle-width) / -2); width: var(--InputRange-handle-width); height: var(--InputRange-handle-height); } .cxd-InputRange-handle.is-mobile { width: var(--InputRange-handle-mobile-width); height: var(--InputRange-handle-mobile-height); } .cxd-InputRange-handle-icon, .cxd-InputRange-handle-drage { width: 100%; height: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: var(--InputRange-handle-bg); border: var(--InputRange-handle-border); cursor: pointer; display: flex; justify-content: center; align-items: center; outline: none; border-radius: var(--InputRange-handle-border-radius); transition: var(--InputRange-handle-transition); } .cxd-InputRange-handle-icon:hover, .cxd-InputRange-handle-drage:hover { transform: var(--InputRange-handle-onActive-transform); box-shadow: var(--InputRange-handle-onFocus-boxShadow); } .cxd-InputRange-handle-icon:active, .cxd-InputRange-handle-drage:active { transform: var(--InputRange-handle-onActive-transform); } .cxd-InputRange-handle-icon:focus, .cxd-InputRange-handle-drage:focus { box-shadow: var(--InputRange-handle-onFocus-boxShadow); } .cxd-InputRange-handle:not(.is-mobile) .cxd-InputRange-handle-drage { transform: var(--InputRange-handle-onActive-transform); box-shadow: var(--InputRange-handle-onFocus-boxShadow); border-width: var(--InputRange-handle-onDrage-border-width); } .input-range--disabled .cxd-InputRange-handle { background: var(--InputRange-slider-onDisabled-bg); border: var(--InputRange-slider-onDisabled-border); box-shadow: none; transform: none; } .cxd-InputRange-handle .icon-slider-handle { width: var(--InputRange-handle-icon-width); height: var(--InputRange-handle-icon-height); top: 0; } .cxd-InputRange-handle .icon-slider-handle g path { fill: var(--InputRange-handle-icon-color); } .cxd-InputRange-track { background: var(--InputRange-track-bg); border-radius: var(--InputRange-track-border-radius); cursor: pointer; display: block; height: var(--InputRange-track-height); position: relative; transition: var(--InputRange-track-transition); } .cxd-InputRange-track.is-active { background: var(--InputRange-track-onActive-bg); transition: 0.3s all; } .cxd-InputRange-track-dot { width: var(--InputRange-track-dot-width); height: var(--InputRange-track-dot-height); border-radius: 50%; background-color: var(--InputRange-track-dot-bg); position: absolute; transform: translateX(-50%); } .cxd-InputRange-track--background { left: 0.5rem; margin-top: calc(-0.5 * var(--InputRange-track-height)); position: absolute; right: 0.5rem; top: 50%; } .cxd-InputRange-track-active { background: var(--InputRange-track-onActive-bg); border-radius: var(--InputRange-track-border-radius); position: absolute; height: 100%; left: 0; top: 0; } .cxd-InputRange-label { position: absolute; padding: var(--InputRange-label-padding); background-color: var(--InputRange-label-bg); color: var(--InputRange-label-color); font-size: var(--InputRange-label-font-size); font-weight: var(--InputRange-label-fontWeight); line-height: var(--InputRange-label-lineHeight); border-radius: var(--InputRange-label-border-radius); visibility: hidden; } .cxd-InputRange-label span { word-break: keep-all; } .cxd-InputRange-label-visible { visibility: visible; } .cxd-InputRange-label.pos-top { left: 50%; bottom: var(--InputRange-label-position-bottom); transform: translateX(-50%); } .cxd-InputRange-label.pos-top::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -4px; border-width: 4px 4px 0 4px; border-style: solid; border-color: var(--InputRange-label-bg) transparent transparent transparent; } .cxd-InputRange-label.pos-bottom { top: var(--InputRange-label-position-bottom); left: 50%; transform: translateX(-50%); } .cxd-InputRange-label.pos-bottom::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: -4px; border-width: 0 4px 4px 4px; border-style: solid; border-color: transparent transparent var(--InputRange-label-bg) transparent; } .cxd-InputRange-label.pos-left { top: 50%; transform: translateY(-50%) translateX(-100%) translateX(-12px); } .cxd-InputRange-label.pos-left::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); right: -4px; border-width: 4px 0 4px 4px; border-style: solid; border-color: transparent transparent transparent var(--InputRange-label-bg); } .cxd-InputRange-label.pos-right { top: 50%; transform: translateY(-50%) translateX(26px); } .cxd-InputRange-label.pos-right::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: -4px; border-width: 4px 4px 4px 0; border-style: solid; border-color: transparent var(--InputRange-label-bg) transparent transparent; } .cxd-InputRange.is-mobile .cxd-InputRange-label { display: block; white-space: nowrap; } .cxd-InputRange-marks { position: relative; top: 8px; color: var(--InputRange-marks-color); font-size: var(--InputRange-marks-fontSize); font-weight: var(--InputRange-marks-fontWeight); line-height: var(--InputRange-marks-lineHeight); margin-top: var(--InputRange-marks-marginTop); } .cxd-InputRange-marks div { position: absolute; top: 0; transform: translateX(-50%); } .cxd-InputRange-marks div:first-child { transform: translateX(-10%); } .cxd-InputRange-marks div:first-child span { left: 0; transform: translateX(0%); } .cxd-InputRange-marks div:last-child { transform: translateX(-90%); } .cxd-InputRange-marks div:last-child span { left: 100%; transform: translateX(-100%); } .cxd-InputRange-marks div span { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .cxd-InputRange.is-mobile .cxd-InputRange-marks div { top: 0; } .cxd-InputRange.is-mobile .cxd-InputRange-marks div:nth-child(2n) { top: -1.875rem; } .cxd-RepeatControl .repeat-btn { width: 5rem; } .cxd-RepeatControl .Select { display: inline-block; min-width: 100px; } .cxd-RepeatControl .input-range { margin-top: 0; } @media (min-width: 768px) { .repeat-control.form-contorl-inline, .form-group-inline .repeat-control { display: inline-block; min-width: 280px; width: auto; } } .cxd-TreeControl { border: 1px solid var(--inputTree-border-color); padding: 6px 12px; border-radius: 2px; } .cxd-TreeControl.no-border { border: 0; } .cxd-TreeControl.is-sticky { max-height: unset; overflow: unset; } .cxd-TreeControl-searchbox { margin-top: var(--gap-sm); margin-bottom: var(--gap-md); } .cxd-TreeControl-searchbox.is-active { width: 100%; } .cxd-TreeControl > .cxd-Tree { max-height: var(--Tree-max-height); overflow: auto; } .cxd-TreeControl.h-auto > .cxd-Tree { max-height: none; overflow: visible; } .cxd-Tree-list, .cxd-Tree-sublist { list-style: none; padding: 0; margin: 0; } .cxd-Tree-sublist { margin-left: var(--Tree-indent); } .cxd-Tree-sublist.is-folded { display: none; } .cxd-Tree-item { line-height: var(--Tree-itemHeight); position: relative; } .cxd-Tree-item > div { color: var(--inputTree-base-default-color); } .cxd-Tree-item > div:hover { color: var(--inputTree-base-hover-color); } .cxd-Tree-item > div:active { color: var(--inputTree-base-active-color); } .cxd-Tree-item > div:hover { text-decoration: none; } .cxd-Tree-item > div:hover > .cxd-Tree-item-icons { visibility: visible; } .cxd-Tree-item > div > span > svg { display: inline-block; cursor: pointer; position: relative; top: 2px; width: 1rem; height: 1rem; margin-left: var(--Tree-icon-gap); } .cxd-Tree.is-disabled { pointer-events: none; } .cxd-Tree.is-disabled .cxd-Tree-itemLabel.is-disabled { color: var(--inputTree-base-disabled-color); } .cxd-Tree.is-disabled .cxd-Tree-itemLabel.is-disabled .cxd-Tree-itemArrow > svg { color: var(--inputTree-base-disabled-expandColor); } .cxd-Tree.is-draggable { position: relative; } .cxd-Tree--outline .cxd-Tree-item--isLeaf.is-child:before { position: absolute; top: -8px; left: calc((var(--Tree-icon-gap) + var(--Tree-itemArrowWidth) + var(--Tree-icon-margin-right)) / 2 - var(--Tree-indent)); bottom: 0px; border-left: 1px solid var(--borderColor); content: ""; } .cxd-Tree-rootItem { line-height: var(--Tree-itemHeight); } .cxd-Tree-item > div:hover > .cxd-Tree-item-icons, .cxd-Tree-rootItem > div:hover > .cxd-Tree-item-icons { visibility: visible; } .cxd-Tree-itemLabel { display: flex; flex-direction: row; align-items: center; position: relative; -webkit-user-select: none; -moz-user-select: none; user-select: none; margin-bottom: 0.25rem; padding-left: var(--Tree-icon-gap); } .cxd-Tree-itemLabel > * { position: relative; z-index: 2; } .cxd-Tree-itemLabel > .cxd-Checkbox { display: inline-flex; align-self: center; } .cxd-Tree-itemLabel-item { padding-left: var(--Tree-item-arrow-padding-left); display: inline-flex; width: 100%; align-items: center; overflow: hidden; height: 2rem; } .cxd-Tree-itemLabel:hover .cxd-Tree-item-icons { visibility: visible; } .cxd-Tree-itemLabel .cxd-Checkbox { margin-right: var(--inputTree-checkboxes-size-marginRight); } .cxd-Tree-item:hover { background-color: var(--Tree-item-onHover-bg-pure); } .cxd-Tree-item .is-checked { border-radius: var(--Tree-item-onChekced-bg-borderRadius); } .cxd-Tree-item .is-checked .cxd-Tree-itemLabel-item { background-color: var(--Tree-item-onChekced-bg); } .cxd-Tree-item .is-checked .cxd-Tree-item-icons { visibility: visible; } .cxd-Tree-item .is-disabled { color: var(--inputTree-item-disabled-color); background: none; } .cxd-Tree-item .is-disabled:hover { background: none; } .cxd-Tree.is-draggable .cxd-Tree-itemLabel:hover::after { display: none; } .cxd-Tree-item-icons { visibility: hidden; transition: visibility var(--animation-duration) ease; display: inline-block; vertical-align: top; height: var(--Tree-itemHeight); line-height: var(--Tree-itemHeight); padding-right: var(--Tree-icon-gap); flex-shrink: 0; } .cxd-Tree-item-icons > a { display: inline-block; vertical-align: middle; margin-left: var(--Tree-icon-gap); cursor: pointer; } .cxd-Tree-item-icons > a > svg { width: 0.75rem; height: 0.75rem; top: 0; } .cxd-Tree-itemInput { display: flex; flex-direction: row; flex-wrap: nowrap; } .cxd-Tree-itemInput > a { display: inline-block; cursor: pointer; margin-left: var(--Tree-icon-gap); color: var(--icon-color); } .cxd-Tree-itemInput > a:hover { color: var(--icon-onHover-color); text-decoration: none; } .cxd-Tree-itemInput > input { flex-grow: 1; width: 100%; outline: none; background: var(--Form-input-bg); border: var(--Form-input-borderWidth) solid var(--inputTree-border-color); border-radius: var(--inputTree-border-radius); line-height: var(--inputTree-input-lineHeight); padding: calc((var(--Tree-inputHeight) - var(--inputTree-input-lineHeight) * var(--inputTree-fontSize) - 0.125rem) / 2) var(--Form-input-paddingX); font-size: var(--inputTree-fontSize); } .cxd-Tree-itemInput > input::-moz-placeholder { color: var(--inputTree-placeholder-color); -moz-user-select: none; user-select: none; } .cxd-Tree-itemInput > input::placeholder { color: var(--inputTree-placeholder-color); -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-Tree-itemInput > input:focus { border-color: var(--Form-input-onFocused-borderColor); box-shadow: var(--Form-input-boxShadow); background: var(--Form-input-onFocused-bg); } .cxd-Tree-itemInput.is-mobile > input { border-radius: 0; border: none; border-bottom: var(--Form-input-borderWidth) solid var(--Form-input-borderColor); } .cxd-Tree-addTopBtn { cursor: pointer; height: var(--Tree-itemHeight); line-height: var(--Tree-itemHeight); display: block; } .cxd-Tree-addTopBtn:hover { text-decoration: none; } .cxd-Tree-addTopBtn.is-disabled { pointer-events: none; color: var(--inputTree-item-disabled-color); } .cxd-Tree-addTopBtn > svg { width: 0.875rem; height: 0.875rem; top: 0.109375rem; margin-right: var(--Tree-icon-gap); } .cxd-Tree-itemArrow { cursor: pointer; width: var(--Tree-itemArrowWidth); display: inline-flex; margin-right: var(--inputTree-base-size-expandMarginRight); } .cxd-Tree-itemArrow > svg { width: var(--Tree-itemArrowWidth); height: var(--Tree-itemArrowWidth); display: block; transition: transform var(--animation-duration); top: 0; color: var(--inputTree-base-default-expandColor); } .cxd-Tree-itemArrow > svg:hover { color: var(--inputTree-base-hover-expandColor); } .cxd-Tree-itemArrow > svg:active { color: var(--inputTree-base-active-expandColor); } .cxd-Tree-itemArrow.is-folded > svg { transform: rotate(-90deg); } .cxd-Tree-itemArrowPlaceholder { display: inline-block; width: calc(var(--Tree-itemArrowWidth) + var(--Tree-icon-gap)); } .cxd-Tree-itemDrager { cursor: move; color: var(--icon-color); } .cxd-Tree-spinner { margin-right: var(--Tree-icon-gap); } .cxd-Tree-itemIcon { display: inline-flex; margin-right: var(--inputTree-base-size-nodeMarginRight); } .cxd-Tree-rootIcon > svg, .cxd-Tree-rootIcon .icon, .cxd-Tree-folderIcon > svg, .cxd-Tree-folderIcon .icon, .cxd-Tree-leafIcon > svg, .cxd-Tree-leafIcon .icon { top: 0; width: 0.875rem; height: 0.875rem; } .cxd-Tree-itemText { cursor: pointer; display: inline-flex; color: var(--inputTree-base-default-color); font-size: var(--select-tree-fontSize); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cxd-Tree-itemText:hover { color: var(--inputTree-base-hover-color); } .cxd-Tree-itemText:active { color: var(--inputTree-base-active-color); } .is-disabled .cxd-Tree-itemText { color: var(--inputTree-base-disabled-color); } .cxd-Tree-placeholder { color: var(--inputTree-placeholder-color); } .cxd-Tree-dropIndicator { position: absolute; height: 0.125rem; background-color: var(--Tree-itemLabel--onChecked-color); border-radius: 0.0625rem; z-index: 1; } .cxd-Tree-dropIndicator::after { position: absolute; top: -0.1875rem; left: -0.375rem; width: 0.5rem; height: 0.5rem; background-color: transparent; border: 0.125rem solid var(--Tree-itemLabel--onChecked-color); border-radius: 50%; content: ""; } .cxd-Tree-dropIndicator--hover { border-radius: 0; background-color: var(--Tree-item-onHover-bg-pure); } .cxd-Tree-dropIndicator--hover::after { display: none; } .cxd-PopUp .cxd-Tree { min-width: 0; min-height: 0; flex: 1; } .cxd-PopUp .cxd-Tree .cxd-Tree-itemLabel:hover .cxd-Tree-itemLabel-item { background-color: none !important; } .cxd-TreeSelectControl { position: relative; } .cxd-TreeSelectControl > .cxd-TreeSelect-popover { width: 100%; } .cxd-TreeSelectControl .cxd-PopOver { box-shadow: var(--boxShadow); } .cxd-TreeSelectControl .cxd-PopOver .cxd-Tree { border-radius: var(--borders-radius-3); border: var(--Form-select-outer-borderWidth) solid var(--Form-select-outer-borderColor); } .cxd-TreeSelect { position: relative; max-width: 100%; outline: none; } .cxd-TreeSelect.is-inline { display: inline-block; width: var(--Form-control-widthBase); } .cxd-TreeSelect-input { display: flex; background: var(--Form-input-bg); border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor); border-radius: var(--Form-input-borderRadius); line-height: var(--Form-input-lineHeight); padding: var(--Form-input-paddingY) var(--Form-input-paddingX); font-size: var(--Form-input-fontSize); flex-wrap: wrap; justify-content: flex-start; } .cxd-TreeSelect-input input { flex-basis: 1.875rem; flex-grow: 1; outline: none; background: transparent; border: none; color: var(--Form-input-color); width: 100%; } .cxd-TreeSelect-input input::-moz-placeholder { color: var(--Form-input-placeholderColor); -moz-user-select: none; user-select: none; } .cxd-TreeSelect-input input::placeholder { color: var(--Form-input-placeholderColor); -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-TreeSelect-input:hover { border-color: var(--Form-input-onFocused-borderColor); } .cxd-TreeSelect-input--borderHalf { border-left-color: transparent !important; border-right-color: transparent !important; border-top-color: transparent !important; } .cxd-TreeSelect-input--borderNone { border-color: transparent !important; } .cxd-TreeSelect.is-error > .cxd-TreeSelect-input { border-color: var(--Form-item-onError-borderColor); background: var(--Form-item-onError-bg); transition: all var(--animation-duration); } .cxd-TreeSelect.is-focused > .cxd-TreeSelect-input { border-color: var(--Form-input-onFocused-borderColor); box-shadow: var(--Form-input-boxShadow); background: var(--Form-input-onFocused-bg); transition: all var(--animation-duration); } .cxd-TreeSelect.is-error.is-focused > .cxd-TreeSelect-input { border-color: var(--Form-item-onError-borderColor); background: var(--Form-item-onError-bg); } .cxd-TreeSelect.is-disabled > .cxd-TreeSelect-input { color: var(--text--muted-color); background: var(--Form-input-onDisabled-bg); border-color: var(--Form-input-onDisabled-borderColor); transition: all var(--animation-duration); } .cxd-TreeSelect.is-disabled > .cxd-TreeSelect-input > input { color: var(--text--muted-color); } .cxd-TreeSelect-spinner { line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize)); } .cxd-TreeSelect-clear { padding: var(--Form-input-clearBtn-padding); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: auto; text-decoration: none; } .cxd-TreeSelect-clear svg { fill: var(--Form-input-clearBtn-color); width: var(--Form-input-clearBtn-size); height: var(--Form-input-clearBtn-size); top: 0; } .cxd-TreeSelect-clear:hover svg { fill: var(--Form-input-clearBtn-color-onHover); } .cxd-TreeSelect-clear:active svg { fill: var(--Form-input-clearBtn-color-onActive); } .cxd-TreeSelect-revealPassword { cursor: pointer; color: var(--text--muted-color); } @media (min-width: 576px) { .cxd-TreeSelect.cxd-Form-control--sizeXs > .cxd-TreeSelect-input, .cxd-TreeSelect.cxd-Form-control--sizeSm > .cxd-TreeSelect-input, .cxd-TreeSelect.cxd-Form-control--sizeMd > .cxd-TreeSelect-input, .cxd-TreeSelect.cxd-Form-control--sizeLg > .cxd-TreeSelect-input { min-width: 100%; display: inline-flex; } } .cxd-TreeSelect.is-opened { border-color: var(--Form-input-onFocused-borderColor); box-shadow: var(--Form-input-boxShadow); background: var(--Form-input-onFocused-bg); } .cxd-TreeSelect-popup { height: 25rem; } .cxd-TreeSelect-popover { background: transparent; border: none; box-shadow: none; } .cxd-TreeSelect-popover > .cxd-Tree { background: var(--TreeSelect-popover-bg); border: var(--Form-input-borderWidth) solid var(--Form-input-onFocused-borderColor); padding: var(--gap-xs) var(--Form-input-paddingX); border-radius: 0; margin-top: -1px; max-height: 400px; overflow: auto; } .cxd-Combo-placeholder { color: var(--text--muted-color); padding-top: var(--Form-label-paddingTop); } .cxd-Combo-toolbarBtn { line-height: var(--Combo-toolbarBtn-lineHeight); height: var(--Combo-toolbarBtn-height); color: var(--Combo-toolbarBtn-color); padding: var(--Combo-toolbarBtn-paddingY) var(--Combo-toolbarBtn-paddingX); cursor: pointer; } .cxd-Combo-toolbarBtn:hover { color: var(--Combo-toolbarBtn-onHover-color); } .cxd-Combo-setNullBtn { margin-top: var(--gap-xs); display: inline-block; } .cxd-Combo-itemInner { margin-right: 0.75rem; } .cxd-Combo-delBtn { color: var(--combo-multi-delBtn-color); cursor: pointer; } .cxd-Combo-delBtn:hover { color: var(--combo-multi-delBtn-hover-color); } .cxd-Tabs--radio .is-active .cxd-Combo-tab-delBtn { color: var(--Tabs--radio-active-color); } .cxd-Tabs--radio .is-active .cxd-Combo-tab-delBtn:hover { color: var(--Tabs--radio-active-color); } .cxd-Combo-tab-delBtn { color: var(--combo-multi-delBtn-color); cursor: pointer; margin-left: var(--gap-sm); display: inline-block; } .cxd-Combo-tab-delBtn > svg { width: 0.875rem; height: 0.875rem; } .cxd-Combo-tab-delBtn:hover { color: var(--combo-multi-delBtn-hover-color); } .cxd-Combo-items { margin-bottom: var(--Combo-items-marginBottom); } .cxd-Combo-items:empty { display: none; } .cxd-Combo-items:empty + .cxd-Combo-toolbar { padding-top: calc((var(--Form-input-height) - var(--Combo-addBtn-height)) / 2); } .cxd-Combo-item { background: var(--combo-bg-color); } .cxd-Combo-itemDrager { cursor: move; } .cxd-Combo-itemDrager > a { color: var(--icon-color); } .cxd-Combo-itemDrager > a:hover { color: var(--icon-onHover-color); } .cxd-Combo-itemDrager svg { width: 1rem; height: 1rem; } .cxd-Combo--hor .cxd-Combo-item { display: flex; flex-wrap: nowrap; } .cxd-Combo--hor .cxd-Combo-item + .cxd-Combo-item { margin-top: var(--Combo--horizontal-item-gap); } .cxd-Combo--hor .cxd-Combo-itemInner { flex-basis: 0; flex-grow: 1; } .cxd-Combo--hor .cxd-Combo-itemTag { margin-right: var(--gap-sm); } .cxd-Combo--hor .cxd-Combo-itemTag label { color: var(--info); margin-right: var(--gap-sm); } .cxd-Combo--hor .cxd-Combo-delBtn { margin-left: var(--gap-xs); display: flex; white-space: nowrap; align-items: flex-start; padding-top: var(--Form-label-paddingTop); height: 1.875rem; } .cxd-Combo--hor .cxd-Combo-delBtn.is-disabled { pointer-events: none; opacity: var(--Button-onDisabled-opacity); } .cxd-Combo--hor .cxd-Combo-delController { margin-left: var(--gap-xs); } .cxd-Combo--hor.is-draggable .cxd-Combo-toolbar { padding-left: 1.5rem; } .cxd-Combo--hor .cxd-Combo-itemDrager { padding: var(--Combo--horizontal-dragger-top) 0.375rem 0 0; display: flex; align-items: center; } .cxd-Combo--ver:not(.cxd-Combo--noBorder)::before, .cxd-Combo--ver:not(.cxd-Combo--noBorder)::after { display: table; content: ""; } .cxd-Combo--ver:not(.cxd-Combo--noBorder)::after { clear: both; } .cxd-Combo--ver:not(.cxd-Combo--noBorder) > .cxd-Combo-items { margin: calc(var(--Combo--vertical-item-gap) * -2) calc(var(--Combo--vertical-item-gap) * -2) 0 calc(var(--Combo--vertical-item-gap) * -2); } .cxd-Combo--ver:not(.cxd-Combo--noBorder) > .cxd-Combo-items > .cxd-Combo-placeholder { margin: calc(var(--Combo--vertical-item-gap) * 2); } .cxd-Combo--ver:not(.cxd-Combo--noBorder) .cxd-Combo-itemTag { text-align: right; } .cxd-Combo--ver:not(.cxd-Combo--noBorder) .cxd-Combo-itemTag label { color: var(--info); margin-right: var(--gap-sm); } .cxd-Combo--ver:not(.cxd-Combo--noBorder) > .cxd-Combo-item, .cxd-Combo--ver:not(.cxd-Combo--noBorder) > .cxd-Combo-items > .cxd-Combo-item { border-color: var(--Combo--vertical-item-borderColor); border-width: var(--Combo--vertical-item-borderWidth); border-style: var(--Combo--vertical-item-borderStyle); border-radius: var(--Combo--vertical-item-borderRadius); padding: var(--combo-vertical-paddingTop) var(--combo-vertical-paddingRight) var(--combo-vertical-paddingBottom) var(--combo-vertical-paddingLeft); position: relative; } .cxd-Combo--ver:not(.cxd-Combo--noBorder) > .cxd-Combo-item.has-error, .cxd-Combo--ver:not(.cxd-Combo--noBorder) > .cxd-Combo-items > .cxd-Combo-item.has-error { border-color: var(--Combo--vertical-item--onError-borderColor) !important; } .cxd-Combo--ver:not(.cxd-Combo--noBorder) > .cxd-Combo-items > .cxd-Combo-item { margin: calc(var(--Combo--vertical-item-gap) * 2); } .cxd-Combo--ver:not(.cxd-Combo--noBorder) > .cxd-Combo-items > .cxd-Combo-item > .cxd-Combo-delBtn { position: absolute; opacity: 0; top: var(--gap-xs); right: var(--gap-xs); } .cxd-Combo--ver:not(.cxd-Combo--noBorder):not(.is-disabled) > .cxd-Combo-item:hover, .cxd-Combo--ver:not(.cxd-Combo--noBorder):not(.is-disabled) > .cxd-Combo-items > .cxd-Combo-item:hover { border-color: var(--Combo--vertical-item-onHover-borderColor); border-width: var(--combo-vertical-hover-top-border-width) var(--combo-vertical-hover-right-border-width) var(--combo-vertical-hover-bottom-border-width) var(--combo-vertical-hover-left-border-width); border-style: var(--combo-vertical-hover-top-border-style) var(--combo-vertical-hover-right-border-style) var(--combo-vertical-hover-bottom-border-style) var(--combo-vertical-hover-left-border-style); } .cxd-Combo--ver:not(.cxd-Combo--noBorder):not(.is-disabled) > .cxd-Combo-item:hover > .cxd-Combo-delBtn, .cxd-Combo--ver:not(.cxd-Combo--noBorder):not(.is-disabled) > .cxd-Combo-item:hover > .cxd-Combo-delController, .cxd-Combo--ver:not(.cxd-Combo--noBorder):not(.is-disabled) > .cxd-Combo-items > .cxd-Combo-item:hover > .cxd-Combo-delBtn, .cxd-Combo--ver:not(.cxd-Combo--noBorder):not(.is-disabled) > .cxd-Combo-items > .cxd-Combo-item:hover > .cxd-Combo-delController { opacity: 1; } .cxd-Combo--ver:not(.cxd-Combo--noBorder) .cxd-Combo-delController { position: absolute; top: var(--gap-xs); right: var(--gap-xs); opacity: 0; } .cxd-Combo--ver:not(.cxd-Combo--noBorder) > .cxd-Combo-items > .cxd-Combo-item > .cxd-Combo-itemDrager { position: absolute; top: var(--Combo--horizontal-dragger-top); left: -1.875rem; display: flex; align-items: center; } .cxd-Combo--ver:not(.cxd-Combo--noBorder).is-draggable > .cxd-Combo-items > .cxd-Combo-item { margin-left: 2.1875rem; } .cxd-Combo--ver:not(.cxd-Combo--noBorder).is-draggable > .cxd-Combo-toolbar { padding-left: 1.5625rem; } .cxd-Combo-item--dragging { position: relative; } .cxd-Combo-item--dragging:after { content: ""; display: block; position: absolute; z-index: 5; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1); } .cxd-Combo.is-mobile .cxd-Form-item .cxd-Form-rowInner { min-width: 0; min-height: 0; flex: 1; } .cxd-Combo.is-mobile .cxd-Combo-delBtn { height: 1.25rem; padding-top: 0; } .cxd-Combo.is-mobile .cxd-Combo-item { align-items: center; position: relative; } .cxd-Combo.is-mobile .cxd-Combo-item::before { position: absolute; box-sizing: border-box; content: " "; pointer-events: none; right: 0; bottom: 0; left: 0; border-bottom: 1px solid var(--borderColor); transform: scaleY(0.5); } .cxd-Combo.is-mobile:not(.cxd-Combo--ver) .cxd-TextareaControl > textarea, .cxd-Combo.is-mobile:not(.cxd-Combo--ver) .cxd-Form-control > .cxd-TextControl-input, .cxd-Combo.is-mobile:not(.cxd-Combo--ver) .cxd-TextControl.is-focused > .cxd-TextControl-input { border-bottom: var(--Form-input-borderWidth) solid var(--borderColor); } .cxd-ComboTabs { border-left: var(--Form-input-borderWidth) solid var(--borderColor); border-right: var(--Form-input-borderWidth) solid var(--borderColor); border-bottom: var(--Form-input-borderWidth) solid var(--borderColor); } .cxd-ComboTabs > .cxd-Tabs-links::before, .cxd-ComboTabs > .cxd-Tabs-links::after { display: table; content: ""; } .cxd-ComboTabs > .cxd-Tabs-links::after { clear: both; } .cxd-ComboTabs > .cxd-Tabs-links .cxd-Tabs-link > a { word-break: break-all; } .cxd-ComboTabs-addLink { float: right; } .cxd-ComboTabs-addLink > a svg { margin-right: var(--gap-xs); top: 0; } .cxd-Combo-dragableTip { color: var(--text--muted-color); font-size: var(--fontSizeSm); margin-left: var(--gap-xs); } .cxd-Combo-dragableTip:empty { display: none; } .cxd-ComboControl.is-inline .cxd-Combo--hor .cxd-Combo-itemInner { flex-grow: unset; flex-basis: unset; } .cxd-ComboControl.is-inline .cxd-Combo--ver .cxd-Combo-item { display: inline-block; min-width: var(--Form-control-widthBase); } @media (min-width: 576px) { .cxd-Combo-form .cxd-Form-item:last-child { margin-bottom: 0; } } .cxd-SubForm-values { margin: 2px -3px; } .cxd-SubForm-values:empty { display: none; } .cxd-SubForm-value { background: var(--ResultBox-value-bg); color: var(--ResultBox-value-color); font-size: var(--Form-input-fontSize); padding: 0 var(--gap-xs); min-height: 1.5rem; flex-wrap: nowrap; display: inline-flex; align-items: center; margin: 2px 3px; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-SubForm-valueLabel { color: inherit; } .cxd-SubForm-valueDel, .cxd-SubForm-valueEdit, .cxd-SubForm-valueDragBar { cursor: pointer; margin-left: var(--gap-xs); color: var(--ResultBox-icon-color); } .cxd-SubForm-valueDel:hover, .cxd-SubForm-valueEdit:hover, .cxd-SubForm-valueDragBar:hover { color: var(--ResultBox-icon--onHover-color); } .cxd-SubForm-valueDel > svg, .cxd-SubForm-valueEdit > svg, .cxd-SubForm-valueDragBar > svg { width: 0.75rem; height: 0.75rem; } .cxd-SubForm-valueDragBar { margin-left: 0; margin-right: var(--gap-xs); cursor: move; } .cxd-SubForm-value:hover { background: var(--ResultBox-value--onHover-bg); } .cxd-SubForm-value.is-disabled { pointer-events: none; color: var(--ResultBox-value--onDisabled-color); } .cxd-SubForm-value.is-disabled > a { color: var(--ResultBox-icon--onDisabled-color); } .cxd-SubForm-value--dragging { position: relative; } .cxd-SubForm-value--dragging:after { content: ""; display: block; position: absolute; z-index: 5; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1); } .cxd-SubForm-addBtn { width: auto; min-width: auto; font-weight: var(--fontWeightNormal); color: var(--button-link-default-font-color); -webkit-text-decoration: var(--link-decoration); text-decoration: var(--link-decoration); border: none; height: auto; padding: 0 4px; display: inline-flex; align-items: center; } .cxd-SubForm-addBtn:hover:focus { color: var(--Button--link-onHover-color); -webkit-text-decoration: var(--link-onHover-decoration); text-decoration: var(--link-onHover-decoration); box-shadow: none; } .cxd-SubForm-addBtn > svg { width: 12px; height: 12px; margin-right: 4px !important; top: 0; } .cxd-SubForm-addBtn:disabled, .cxd-SubForm-addBtn.is-disabled { color: var(--text--muted-color); pointer-events: none; background: transparent; } .cxd-SubForm-placeholder { color: var(--Form-input-placeholderColor); -webkit-user-select: none; -moz-user-select: none; user-select: none; padding: 4px; } .cxd-ChainedSelectControl .cxd-Select { margin-right: var(--gap-xs); } .cxd-ChainedSelectControl-spinner { display: inline-block; vertical-align: middle; } .cxd-Picker { position: relative; max-width: 100%; outline: none; /* tag 样式 */ } .cxd-Picker.is-inline { display: inline-block; width: var(--Form-control-widthBase); } .cxd-Picker-input { display: flex; background: var(--Form-input-bg); border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor); border-radius: var(--Form-input-borderRadius); line-height: var(--Form-input-lineHeight); padding: var(--Form-input-paddingY) var(--Form-input-paddingX); font-size: var(--Form-input-fontSize); flex-wrap: wrap; justify-content: flex-start; } .cxd-Picker-input input { flex-basis: 1.875rem; flex-grow: 1; outline: none; background: transparent; border: none; color: var(--Form-input-color); width: 100%; } .cxd-Picker-input input::-moz-placeholder { color: var(--Form-input-placeholderColor); -moz-user-select: none; user-select: none; } .cxd-Picker-input input::placeholder { color: var(--Form-input-placeholderColor); -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-Picker-input:hover { border-color: var(--Form-input-onFocused-borderColor); } .cxd-Picker-input--borderHalf { border-left-color: transparent !important; border-right-color: transparent !important; border-top-color: transparent !important; } .cxd-Picker-input--borderNone { border-color: transparent !important; } .cxd-Picker.is-error > .cxd-Picker-input { border-color: var(--Form-item-onError-borderColor); background: var(--Form-item-onError-bg); transition: all var(--animation-duration); } .cxd-Picker.is-focused > .cxd-Picker-input { border-color: var(--Form-input-onFocused-borderColor); box-shadow: var(--Form-input-boxShadow); background: var(--Form-input-onFocused-bg); transition: all var(--animation-duration); } .cxd-Picker.is-error.is-focused > .cxd-Picker-input { border-color: var(--Form-item-onError-borderColor); background: var(--Form-item-onError-bg); } .cxd-Picker.is-disabled > .cxd-Picker-input { color: var(--text--muted-color); background: var(--Form-input-onDisabled-bg); border-color: var(--Form-input-onDisabled-borderColor); transition: all var(--animation-duration); } .cxd-Picker.is-disabled > .cxd-Picker-input > input { color: var(--text--muted-color); } .cxd-Picker-spinner { line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize)); } .cxd-Picker-clear { padding: var(--Form-input-clearBtn-padding); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: auto; text-decoration: none; } .cxd-Picker-clear svg { fill: var(--Form-input-clearBtn-color); width: var(--Form-input-clearBtn-size); height: var(--Form-input-clearBtn-size); top: 0; } .cxd-Picker-clear:hover svg { fill: var(--Form-input-clearBtn-color-onHover); } .cxd-Picker-clear:active svg { fill: var(--Form-input-clearBtn-color-onActive); } .cxd-Picker-revealPassword { cursor: pointer; color: var(--text--muted-color); } @media (min-width: 576px) { .cxd-Picker.cxd-Form-control--sizeXs > .cxd-Picker-input, .cxd-Picker.cxd-Form-control--sizeSm > .cxd-Picker-input, .cxd-Picker.cxd-Form-control--sizeMd > .cxd-Picker-input, .cxd-Picker.cxd-Form-control--sizeLg > .cxd-Picker-input { min-width: 100%; display: inline-flex; } } .cxd-Picker-input:hover { background: var(--Pick-status-hover-bgColor); border-width: var(--Pick-status-hover-top-border-width) var(--Pick-status-hover-right-border-width) var(--Pick-status-hover-bottom-border-width) var(--Pick-status-hover-left-border-width); border-style: var(--Pick-status-hover-top-border-style) var(--Pick-status-hover-right-border-style) var(--Pick-status-hover-bottom-border-style) var(--Pick-status-hover-left-border-style); border-color: var(--Pick-status-hover-top-border-color) var(--Pick-status-hover-right-border-color) var(--Pick-status-hover-bottom-border-color) var(--Pick-status-hover-left-border-color); } .cxd-Picker.is-focused > .cxd-Picker-input { box-shadow: var(--Form-input-boxShadow); background-color: var(--Pick-status-focus-bgColor); border-width: var(--Pick-status-focus-top-border-width) var(--Pick-status-focus-right-border-width) var(--Pick-status-focus-bottom-border-width) var(--Pick-status-focus-left-border-width); border-style: var(--Pick-status-focus-top-border-style) var(--Pick-status-focus-right-border-style) var(--Pick-status-focus-bottom-border-style) var(--Pick-status-focus-left-border-style); border-color: var(--Pick-status-focus-top-border-color) var(--Pick-status-focus-right-border-color) var(--Pick-status-focus-bottom-border-color) var(--Pick-status-focus-left-border-color); } .cxd-Picker.is-disabled { pointer-events: none; opacity: var(--Button-onDisabled-opacity); } .cxd-Picker.is-disabled .cxd-Picker-placeholder { color: var(--Pick-status-disabled-color); font-size: var(--Pick-status-disabled-fontSize); font-weight: var(--Pick-status-disabled-fontWeight); } .cxd-Picker.is-disabled > .cxd-Picker-input { color: var(--Pick-status-disabled-color); font-size: var(--Pick-status-disabled-fontSize); font-weight: var(--Pick-status-disabled-fontWeight); background-color: var(--Pick-status-disabled-bgColor); border-width: var(--Pick-status-disabled-top-border-width) var(--Pick-status-disabled-right-border-width) var(--Pick-status-disabled-bottom-border-width) var(--Pick-status-disabled-left-border-width); border-style: var(--Pick-status-disabled-top-border-style) var(--Pick-status-disabled-right-border-style) var(--Pick-status-disabled-bottom-border-style) var(--Pick-status-disabled-left-border-style); border-color: var(--Pick-status-disabled-top-border-color) var(--Pick-status-disabled-right-border-color) var(--Pick-status-disabled-bottom-border-color) var(--Pick-status-disabled-left-border-color); } .cxd-Picker-placeholder { color: var(--Pick-base-placeholder-color); font-size: var(--Pick-base-placeholder-fontSize); font-weight: var(--Pick-base-placeholder-fontWeight); -webkit-user-select: none; -moz-user-select: none; user-select: none; position: absolute; line-height: var(--Form-input-lineHeight); padding: var(--Pick-base-paddingTop) var(--Pick-base-paddingRight) var(--Pick-base-paddingBottom) var(--Pick-base-paddingLeft); } .cxd-Picker-input { min-height: var(--Form-input-height); height: auto; padding: 0; flex-wrap: nowrap; background-color: var(--Pick-base-bgColor); border-width: var(--Pick-base-top-border-width) var(--Pick-base-right-border-width) var(--Pick-base-bottom-border-width) var(--Pick-base-left-border-width); border-style: var(--Pick-base-top-border-style) var(--Pick-base-right-border-style) var(--Pick-base-bottom-border-style) var(--Pick-base-left-border-style); border-color: var(--Pick-base-top-border-color) var(--Pick-base-right-border-color) var(--Pick-base-bottom-border-color) var(--Pick-base-left-border-color); } .cxd-Picker .cxd-Picker-values { display: inline; } .cxd-Picker-valueWrap { flex-grow: 1; position: relative; padding: var(--Form-input-paddingY) var(--Form-input-paddingX); } .cxd-Picker-valueWrap > input { width: 1rem; display: inline-block; } .cxd-Picker .cxd-Picker-valueWrap { margin-bottom: calc(var(--gap-xs) * -1); line-height: 1; } .cxd-Picker .cxd-Picker-value { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; white-space: nowrap; vertical-align: middle; line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem); display: inline-block; font-size: var(--Pick-base-value-fontSize); color: var(--Pick-base-value-color); font-weight: var(--Pick-base-value-fontWeight); background: var(--Pick-base-value-bgColor); border-width: var(--Pick-base-value-top-border-width) var(--Pick-base-value-right-border-width) var(--Pick-base-value-bottom-border-width) var(--Pick-base-value-left-border-width); border-style: var(--Pick-base-value-top-border-style) var(--Pick-base-value-right-border-style) var(--Pick-base-value-bottom-border-style) var(--Pick-base-value-left-border-style); border-color: var(--Pick-base-value-top-border-color) var(--Pick-base-value-right-border-color) var(--Pick-base-value-bottom-border-color) var(--Pick-base-value-left-border-color); border-radius: var(--Pick-base-top-left-border-radius) var(--Pick-base-top-right-border-radius) var(--Pick-base-bottom-right-border-radius) var(--Pick-base-bottom-left-border-radius); margin-right: var(--gap-xs); margin-bottom: var(--gap-xs); margin-top: var(--gap-xs); max-width: 9.375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cxd-Picker .cxd-Picker-value:hover { background: var(--Form-selectValue-onHover-bg); } .cxd-Picker .cxd-Picker-value.is-disabled { pointer-events: none; opacity: var(--Button-onDisabled-opacity); } .cxd-Picker .cxd-Picker-valueIcon { color: var(--Pick-base-value-icon-color); cursor: pointer; border-right: 0.0625rem solid var(--Form-selectValue-borderColor); padding: 1px 5px; } .cxd-Picker .cxd-Picker-valueIcon:hover { background: var(--Pick-base-value-hover-icon-color); } .cxd-Picker .cxd-Picker-valueLabel { padding: 0 var(--gap-xs); } .cxd-Picker-btn { cursor: pointer; color: var(--Pick-base-icon-color); flex: 30px 0 0; display: flex; align-items: center; justify-content: center; } .cxd-Picker-btn svg { top: 0; } .cxd-Picker-btn svg { width: var(--Pick-base-icon-size); height: var(--Pick-base-icon-size); } .cxd-Picker-btn:hover { color: var(--Picker-onHover-iconColor); } .cxd-Picker .Picker-icon { width: var(--Pick-base-icon-size); height: var(--Pick-base-icon-size); content: var(--Pick-base-icon); display: flex; } .cxd-Picker-clear { padding: var(--Form-input-clearBtn-padding); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: auto; text-decoration: none; line-height: 1; margin-right: var(--gap-xs); } .cxd-Picker-clear svg { fill: var(--Form-input-clearBtn-color); width: var(--Form-input-clearBtn-size); height: var(--Form-input-clearBtn-size); top: 0; } .cxd-Picker-clear:hover svg { fill: var(--Form-input-clearBtn-color-onHover); } .cxd-Picker-clear:active svg { fill: var(--Form-input-clearBtn-color-onActive); } .cxd-Picker-clear svg { top: 0; } .cxd-Picker-overflow-wrapper { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: flex-start; overflow-x: hidden; overflow-y: auto; height: calc((var(--Picker-tag-height) + var(--Picker-tag-marginBottom) * 4) * 3); max-height: calc((var(--Picker-tag-height) + var(--Picker-tag-marginBottom)) * 5); } .cxd-Picker-overflow-wrapper .cxd-Picker-value { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; white-space: nowrap; vertical-align: middle; line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize) - 0.125rem); display: inline-block; font-size: var(--Pick-base-value-fontSize); color: var(--Pick-base-value-color); font-weight: var(--Pick-base-value-fontWeight); background: var(--Pick-base-value-bgColor); border-width: var(--Pick-base-value-top-border-width) var(--Pick-base-value-right-border-width) var(--Pick-base-value-bottom-border-width) var(--Pick-base-value-left-border-width); border-style: var(--Pick-base-value-top-border-style) var(--Pick-base-value-right-border-style) var(--Pick-base-value-bottom-border-style) var(--Pick-base-value-left-border-style); border-color: var(--Pick-base-value-top-border-color) var(--Pick-base-value-right-border-color) var(--Pick-base-value-bottom-border-color) var(--Pick-base-value-left-border-color); border-radius: var(--Pick-base-top-left-border-radius) var(--Pick-base-top-right-border-radius) var(--Pick-base-bottom-right-border-radius) var(--Pick-base-bottom-left-border-radius); margin-right: var(--gap-xs); margin-bottom: var(--gap-xs); margin-top: var(--gap-xs); max-width: 9.375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cxd-Picker-overflow-wrapper .cxd-Picker-value:hover { background: var(--Form-selectValue-onHover-bg); } .cxd-Picker-overflow-wrapper .cxd-Picker-value.is-disabled { pointer-events: none; opacity: var(--Button-onDisabled-opacity); } .cxd-Picker-overflow-wrapper .cxd-Picker-valueIcon { color: var(--Pick-base-value-icon-color); cursor: pointer; border-right: 0.0625rem solid var(--Form-selectValue-borderColor); padding: 1px 5px; } .cxd-Picker-overflow-wrapper .cxd-Picker-valueIcon:hover { background: var(--Pick-base-value-hover-icon-color); } .cxd-Picker-overflow-wrapper .cxd-Picker-valueLabel { padding: 0 var(--gap-xs); } .cxd-PickerControl.is-inline .cxd-Picker, .cxd-Form-item--inline .cxd-Picker { display: inline-block; min-width: 9.375rem; } .cxd-PickerControl.is-mobile { width: 100%; } .cxd-PickerControl.is-mobile .cxd-Form-item { padding: 0; } .cxd-PickerControl.is-mobile .cxd-Picker-input { border: none; } .cxd-QrCode { min-height: var(--Form-input-height); padding: 0.4375rem 0; } .cxd-TagControl { position: relative; } .cxd-TagControl-input.is-disabled { border-style: dashed; background: transparent; } .cxd-TagControl.is-inline { display: inline-block; } .cxd-TagControl > .cxd-TagControl-popover { padding: 0; width: 100%; margin-top: 0.25rem; } .cxd-TagControl > .cxd-TagControl-popover.cxd-PopOver--leftBottomLeftTop { top: 100% !important; } .cxd-TagControl > .cxd-TagControl-popover.cxd-PopOver--leftTopLeftBottom { top: auto !important; bottom: 100% !important; } .cxd-TagControl-sug { margin-top: var(--Form-input-marginBottom); } .cxd-TagControl-sugTip { color: var(--TagControl-sugTip-color); margin-bottom: var(--Form-input-marginBottom); } .cxd-TagControl-sugItem { margin-right: var(--gap-sm); margin-bottom: var(--gap-sm); display: inline-block; font-size: var(--TagControl-sugBtn-fontSize); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; border: var(--TagControl-sugBtn-borderWidth) solid transparent; font-size: var(--TagControl-sugBtn-fontSize); font-weight: var(--TagControl-sugBtn-fontWeight); line-height: var(--TagControl-sugBtn-lineHeight); border-radius: var(--TagControl-sugBtn-borderRadius) var(--TagControl-sugBtn-borderRadius) var(--TagControl-sugBtn-borderRadius) var(--TagControl-sugBtn-borderRadius); height: var(--TagControl-sugBtn-height); padding: var(--TagControl-sugBtn-paddingY) var(--TagControl-sugBtn-paddingX) var(--TagControl-sugBtn-paddingY) var(--TagControl-sugBtn-paddingX); margin: var(--button-size-default-marginTop) var(--button-size-default-marginRight) var(--button-size-default-marginBottom) var(--button-size-default-marginLeft); color: var(--TagControl-sugBtn-color); background: var(--TagControl-sugBtn-bg); border-color: var(--TagControl-sugBtn-border) var(--TagControl-sugBtn-border) var(--TagControl-sugBtn-border) var(--TagControl-sugBtn-border); border-width: var(--TagControl-sugBtn-borderWidth) var(--TagControl-sugBtn-borderWidth) var(--TagControl-sugBtn-borderWidth) var(--TagControl-sugBtn-borderWidth); border-style: solid solid solid solid; box-shadow: none; } .cxd-TagControl-sugItem .cxd-Button-icon:first-child:not(:last-child):not(.pull-right), .cxd-TagControl-sugItem > svg.icon:not(:last-child):not(.pull-right), .cxd-TagControl-sugItem > .pull-left { margin-right: var(--button-size-default-icon-margin); font-size: var(--button-size-default-icon-size); width: var(--button-size-default-icon-size); height: var(--button-size-default-icon-size); line-height: var(--button-size-default-icon-size); } .cxd-TagControl-sugItem .cxd-Button-icon:last-child:not(:first-child):not(.pull-left), .cxd-TagControl-sugItem > .pull-right { font-size: var(--button-size-default-icon-size); margin-left: var(--button-size-default-icon-margin); width: var(--button-size-default-icon-size); height: var(--button-size-default-icon-size); line-height: var(--button-size-default-icon-size); } .cxd-TagControl-sugItem .cxd-Button--loading:first-child:not(:last-child):not(.pull-right), .cxd-TagControl-sugItem > svg.icon:not(:last-child):not(.pull-right), .cxd-TagControl-sugItem > .pull-left { font-size: var(--button-size-default-icon-size); margin-right: var(--button-size-default-icon-margin); width: var(--button-size-default-icon-size); height: var(--button-size-default-icon-size); line-height: var(--button-size-default-icon-size); } .cxd-TagControl-sugItem .cxd-Button--loading:last-child:not(:first-child):not(.pull-left), .cxd-TagControl-sugItem > .pull-right { font-size: var(--button-size-default-icon-size); margin-left: var(--button-size-default-icon-margin); width: var(--button-size-default-icon-size); height: var(--button-size-default-icon-size); line-height: var(--button-size-default-icon-size); } .cxd-TagControl-sugItem.cxd-Button--iconOnly { min-width: var(--TagControl-sugBtn-height); padding: 0; } .cxd-TagControl-sugItem.cxd-Button--iconOnly:not(.cxd-Button--link) > svg.icon { width: var(--button-size-default-icon-size); height: var(--button-size-default-icon-size); } .cxd-TagControl-sugItem.cxd-Button--iconOnly:not(.cxd-Button--link) > .fa, .cxd-TagControl-sugItem.cxd-Button--iconOnly:not(.cxd-Button--link) > .iconfont { font-size: var(--button-size-default-icon-size); } .cxd-TagControl-sugItem.cxd-Button--iconOnly:not(.cxd-Button--link) > .iconfont { line-height: 1; } .cxd-TagControl-sugItem img.cxd-Button-icon { height: var(--button-size-default-icon-size); vertical-align: middle; } .cxd-TagControl-sugItem:not(:disabled):not(.is-disabled):hover { color: var(--TagControl-sugBtn-onHover-color); background: var(--TagControl-sugBtn-onHover-bg); border-color: var(--TagControl-sugBtn-onHover-border) var(--TagControl-sugBtn-onHover-border) var(--TagControl-sugBtn-onHover-border) var(--TagControl-sugBtn-onHover-border); border-width: var(--TagControl-sugBtn-borderWidth) var(--TagControl-sugBtn-borderWidth) var(--TagControl-sugBtn-borderWidth) var(--TagControl-sugBtn-borderWidth); border-style: solid solid solid solid; box-shadow: none; } .cxd-TagControl-sugItem:not(:disabled):not(.is-disabled).hover { color: var(--TagControl-sugBtn-onHover-color); background: var(--TagControl-sugBtn-onHover-bg); border-color: var(--TagControl-sugBtn-onHover-border) var(--TagControl-sugBtn-onHover-border) var(--TagControl-sugBtn-onHover-border) var(--TagControl-sugBtn-onHover-border); border-width: var(--TagControl-sugBtn-borderWidth) var(--TagControl-sugBtn-borderWidth) var(--TagControl-sugBtn-borderWidth) var(--TagControl-sugBtn-borderWidth); border-style: solid solid solid solid; box-shadow: none; } .cxd-TagControl-sugItem:not(:disabled):not(.is-disabled):hover:active { color: var(--TagControl-sugBtn-onActive-color); background: var(--TagControl-sugBtn-onActive-bg); border-color: var(--TagControl-sugBtn-onActive-border) var(--TagControl-sugBtn-onActive-border) var(--TagControl-sugBtn-onActive-border) var(--TagControl-sugBtn-onActive-border); border-width: var(--button-default-active-top-border-width) var(--button-default-active-right-border-width) var(--button-default-active-bottom-border-width) var(--button-default-active-left-border-width); border-style: var(--button-default-active-top-border-style) var(--button-default-active-right-border-style) var(--button-default-active-bottom-border-style) var(--button-default-active-left-border-style); box-shadow: var(--button-default-active-shadow); } .cxd-TagControl-sugItem:not(:disabled):not(.is-disabled).active, .cxd-TagControl-sugItem:not(:disabled):not(.is-disabled).is-active { color: var(--TagControl-sugBtn-onActive-color); background: var(--TagControl-sugBtn-onActive-bg); border-color: var(--TagControl-sugBtn-onActive-border) var(--TagControl-sugBtn-onActive-border) var(--TagControl-sugBtn-onActive-border) var(--TagControl-sugBtn-onActive-border); border-width: var(--button-default-active-top-border-width) var(--button-default-active-right-border-width) var(--button-default-active-bottom-border-width) var(--button-default-active-left-border-width); border-style: var(--button-default-active-top-border-style) var(--button-default-active-right-border-style) var(--button-default-active-bottom-border-style) var(--button-default-active-left-border-style); box-shadow: var(--button-default-active-shadow); } .cxd-TagControl-sugItem:disabled, .cxd-TagControl-sugItem.is-disabled { color: var(--button-default-disabled-font-color); background: var(--button-default-disabled-bg-color); border-color: var(--button-default-disabled-top-border-color) var(--button-default-disabled-right-border-color) var(--button-default-disabled-bottom-border-color) var(--button-default-disabled-left-border-color); border-width: var(--button-default-disabled-top-border-width) var(--button-default-disabled-right-border-width) var(--button-default-disabled-bottom-border-width) var(--button-default-disabled-left-border-width); border-style: var(--button-default-disabled-top-border-style) var(--button-default-disabled-right-border-style) var(--button-default-disabled-bottom-border-style) var(--button-default-disabled-left-border-style); box-shadow: var(--button-default-disabled-shadow); } .cxd-TagControl-sugItem.is-disabled { pointer-events: none; opacity: var(--Button-onDisabled-opacity); } .cxd-TagControl.is-error > .cxd-ResultBox { border-color: var(--Form-input-onError-borderColor); background: var(--Form-input-onError-bg); } .cxd-TagControl-popover.cxd-PopOver--leftBottomLeftTop > .cxd-ListMenu, .cxd-ListMenu-popover.cxd-PopOver--leftBottomLeftTop > .cxd-ListMenu { border-top-left-radius: 0; border-top-right-radius: 0; } .cxd-TagControl-popover.cxd-PopOver--leftTopLeftBottom > .cxd-ListMenu, .cxd-ListMenu-popover.cxd-PopOver--leftTopLeftBottom > .cxd-ListMenu { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .cxd-TagControl-popover .cxd-ListMenu, .cxd-ListMenu-popover .cxd-ListMenu { padding: 0.25rem 0; max-height: var(--inputTag-popover-maxHeight); overflow: auto; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-TagControl-popover .cxd-ListMenu-item, .cxd-ListMenu-popover .cxd-ListMenu-item { height: var(--inputTag-option-height); color: var(--inputTag-option-color); font-size: var(--inputTag-option-fontSize); line-height: var(--inputTag-option-lineHeight); font-weight: var(--inputTag-option-fontWeight); padding: var(--inputTag-option-paddingTop) var(--inputTag-option-paddingRight) var(--inputTag-option-paddingBottom) var(--inputTag-option-paddingLeft); background: var(--inputTag-option-bg-color); } .cxd-TagControl-popover .cxd-ListMenu-item:hover, .cxd-ListMenu-popover .cxd-ListMenu-item:hover { color: var(--inputTag-option-hover-color); background: var(--inputTag-option-hover-bg-color); } .cxd-Rating { display: flex; position: relative; align-items: center; justify-content: flex-start; flex-flow: row wrap; content: var(--Rating-colors); } .cxd-Rating > ul { display: flex; padding: unset; margin: unset; align-items: center; justify-content: flex-start; flex-flow: row wrap; } .cxd-Rating-star { display: flex; align-items: center; justify-content: center; width: var(--Rating-star-size); height: var(--Rating-star-size); position: relative; overflow: hidden; font-size: var(--Rating-star-icon-size); line-height: 1; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; color: var(--Rating-inactive-color); } .cxd-Rating-star-half > svg.icon, .cxd-Rating-star > svg.icon { display: block; width: 1.5rem; height: 1.5rem; top: 0; } .cxd-Rating-star:last-of-type { margin-right: 0; } .cxd-Rating-star.is-disabled { cursor: not-allowed; pointer-events: none; } .cxd-Rating-star-half { position: absolute; overflow: hidden; display: block; z-index: 1; top: 0; left: 0; width: 50%; } .cxd-Rating-text { font-size: var(--Rating-text-fontSize); color: var(--Rating-text-color); font-weight: var(--Rating-text-fontWeight); line-height: var(--Rating-text-lineHeight); } .cxd-Rating-text--left { margin-right: var(--Rating-star-margin); } .cxd-Rating-text--right { margin-left: var(--Rating-star-margin); } .Rating-star-icon { display: flex; align-items: center; justify-content: center; width: var(--Rating-star-size); height: var(--Rating-star-size); content: var(--Rating-star-icon); } .Rating-star-icon > svg.icon { width: var(--Rating-star-icon-size); height: var(--Rating-star-icon-size); top: 0; } .cxd-RatingControl { position: relative; overflow: hidden; } .cxd-Transfer { display: flex; flex-direction: row; flex-wrap: wrap; min-height: 18.75rem; position: relative; } .cxd-Transfer-searchbox { width: 100%; } .cxd-Transfer--inline { display: inline-flex; flex-wrap: nowrap; } .cxd-Transfer-title { display: flex; align-items: center; background: var(--transfer-base-title-bg); color: var(--transfer-base-title-color); line-height: var(--transfer-base-title-lineHeight); font-size: var(--transfer-base-title-fontSize); font-weight: var(--transfer-base-title-fontWeight); font-family: var(--transfer-base-title-font-family); padding: var(--transfer-base-header-paddingTop) var(--transfer-base-header-paddingRight) var(--transfer-base-header-paddingBottom) var(--transfer-base-header-paddingLeft); flex-direction: row; width: 100%; } .cxd-Transfer-title--light { background: transparent; } .cxd-Transfer-title > span { flex-grow: 1; } .cxd-Transfer-footer { border-top: 1px solid var(--transfer-base-footer-border-color); display: flex; flex-flow: row nowrap; justify-content: flex-end; padding: var(--gap-sm); /* 底部空间较小，让Pagination紧凑一些 */ } .cxd-Transfer-footer-pagination > ul.cxd-Pagination-item { margin-left: 0; } .cxd-Transfer-footer-pagination > ul > li { --Pagination-minWidth: 1.375rem; --Pagination-height: 1.375rem; --Pagination-padding: 0 0.375rem; } .cxd-Transfer-footer-pagination .cxd-Pagination-perpage { --select-base-default-paddingTop: 0; --select-base-default-paddingBottom: 0; --select-base-default-paddingLeft: 0.375rem; --select-base-default-paddingRight: 0.375rem; margin-left: 0; } .cxd-Transfer-footer-pagination .cxd-Pagination-perpage .cxd-Select-valueWrap { line-height: 1.375rem; } .cxd-Transfer-select, .cxd-Transfer-result { overflow: hidden; width: 0; min-width: 12.5rem; max-height: 25rem; flex-grow: 1; display: flex; flex-direction: column; border-width: var(--transfer-base-top-border-width) var(--transfer-base-right-border-width) var(--transfer-base-bottom-border-width) var(--transfer-base-left-border-width); border-style: var(--transfer-base-top-border-style) var(--transfer-base-right-border-style) var(--transfer-base-bottom-border-style) var(--transfer-base-left-border-style); border-color: var(--transfer-base-top-border-color) var(--transfer-base-right-border-color) var(--transfer-base-bottom-border-color) var(--transfer-base-left-border-color); border-radius: var(--transfer-base-top-left-border-radius) var(--transfer-base-top-right-border-radius) var(--transfer-base-bottom-right-border-radius) var(--transfer-base-bottom-left-border-radius); } .cxd-Transfer-select--pagination, .cxd-Transfer-result--pagination { max-height: 29.6875rem; } .cxd-Transfer-select > .cxd-Transfer-selection, .cxd-Transfer-result > .cxd-Transfer-value { flex-grow: 1; max-height: 100%; overflow: auto; position: relative; padding: var(--transfer-base-body-paddingTop) var(--transfer-base-body-paddingRight) var(--transfer-base-body-paddingBottom) var(--transfer-base-body-paddingLeft); width: 100%; } .cxd-Transfer .cxd-GroupedSelection-item, .cxd-Transfer .cxd-Selections-item { padding: var(--transfer-base-option-paddingTop) var(--transfer-base-option-paddingRight) var(--transfer-base-option-paddingBottom) var(--transfer-base-option-paddingLeft); margin: var(--transfer-base-option-marginTop) var(--transfer-base-option-marginRight) var(--transfer-base-option-marginBottom) var(--transfer-base-option-marginLeft); line-height: var(--transfer-base-content-lineHeight); font-size: var(--transfer-base-content-fontSize); font-weight: var(--transfer-base-content-fontWeight); color: var(--transfer-base-content-color); } .cxd-Transfer .cxd-ChainedSelection-item { padding: var(--transfer-chained-paddingTop) var(--transfer-chained-paddingRight) var(--transfer-chained-paddingBottom) var(--transfer-chained-paddingLeft); margin: var(--transfer-chained-marginTop) var(--transfer-chained-marginRight) var(--transfer-chained-marginBottom) var(--transfer-chained-marginLeft); line-height: var(--transfer-base-content-lineHeight); font-size: var(--transfer-base-content-fontSize); font-weight: var(--transfer-base-content-fontWeight); color: var(--transfer-base-content-color); } .cxd-Transfer .cxd-GroupedSelection-group > .cxd-GroupedSelection-itemLabel { font-size: var(--transfer-group-fontSize); font-weight: var(--transfer-group-fontWeight); line-height: var(--transfer-group-lineHeight); color: var(--transfer-group-color); } .cxd-Transfer-select > .cxd-ChainedSelection { min-height: unset; overflow: hidden; } .cxd-Transfer-select > .cxd-ChainedSelection .cxd-ChainedSelection-col { height: 100%; overflow: auto; min-width: unset; flex: 1 1 0; } .cxd-Transfer .cxd--ResultTreeList { border-top: 1px solid var(--borderColor); } .cxd-Transfer .cxd-AssociatedSelection { overflow: hidden; } .cxd-Transfer .cxd-AssociatedSelection-left, .cxd-Transfer .cxd-AssociatedSelection-right { min-height: unset; } .cxd-Transfer-select { overflow: hidden; } .cxd-Transfer-selection .cxd-ListSelection-placeholder { height: 100%; display: flex; align-items: center; text-align: center; justify-content: center; } .cxd-Transfer-selection.cxd-Tree .cxd-Tree-itemLabel.is-checked:hover .cxd-Tree-itemLabel-item > .cxd-Tree-itemText, .cxd-Transfer-selection.cxd-Tree .cxd-Tree-itemLabel:hover .cxd-Tree-itemLabel-item > .cxd-Tree-itemText, .cxd-Transfer-selection.cxd-AssociatedSelection .cxd-Tree-itemLabel.is-checked:hover .cxd-Tree-itemLabel-item > .cxd-Tree-itemText, .cxd-Transfer-selection.cxd-AssociatedSelection .cxd-Tree-itemLabel:hover .cxd-Tree-itemLabel-item > .cxd-Tree-itemText { background-color: unset; } .cxd-Transfer-selection.cxd-Tree .cxd-Tree-itemLabel.is-checked:hover .cxd-Tree-itemLabel-item > .cxd-Tree-itemText:active, .cxd-Transfer-selection.cxd-Tree .cxd-Tree-itemLabel:hover .cxd-Tree-itemLabel-item > .cxd-Tree-itemText:active, .cxd-Transfer-selection.cxd-AssociatedSelection .cxd-Tree-itemLabel.is-checked:hover .cxd-Tree-itemLabel-item > .cxd-Tree-itemText:active, .cxd-Transfer-selection.cxd-AssociatedSelection .cxd-Tree-itemLabel:hover .cxd-Tree-itemLabel-item > .cxd-Tree-itemText:active { background-color: unset; } .cxd-Transfer-selection.cxd-Tree .cxd-Tree-itemLabel-item, .cxd-Transfer-selection.cxd-AssociatedSelection .cxd-Tree-itemLabel-item { display: flex; align-items: center; } .cxd-Transfer-selection.cxd-Tree .cxd-Tree-itemLabel-item > .cxd-Tree-itemText, .cxd-Transfer-selection.cxd-AssociatedSelection .cxd-Tree-itemLabel-item > .cxd-Tree-itemText { max-width: unset; line-height: unset; top: unset; } .cxd-Transfer-selection.cxd-Tree .cxd-Tree-itemLabel-item > .cxd-Tree-itemText > span.is-invalid, .cxd-Transfer-selection.cxd-AssociatedSelection .cxd-Tree-itemLabel-item > .cxd-Tree-itemText > span.is-invalid { color: var(--Form-selectValue-onInvalid-color); } .cxd-Transfer-search { padding: var(--transfer-search-paddingTop) var(--transfer-search-paddingRight) var(--transfer-search-paddingBottom) var(--transfer-search-paddingLeft); width: 100%; } .cxd-Transfer-search .cxd-InputBox:not(.is-mobile) { font-size: var(--transfer-search-fontSize); font-weight: var(--transfer-search-fontWeight); line-height: var(--transfer-search-lineHeight); color: var(--transfer-search-color); border-width: var(--transfer-search-top-border-width) var(--transfer-search-right-border-width) var(--transfer-search-bottom-border-width) var(--transfer-search-left-border-width); border-style: var(--transfer-search-top-border-style) var(--transfer-search-right-border-style) var(--transfer-search-bottom-border-style) var(--transfer-search-left-border-style); border-color: var(--transfer-search-top-border-color) var(--transfer-search-right-border-color) var(--transfer-search-bottom-border-color) var(--transfer-search-left-border-color); border-radius: var(--transfer-search-top-left-border-radius) var(--transfer-search-top-right-border-radius) var(--transfer-search-bottom-right-border-radius) var(--transfer-search-bottom-left-border-radius); box-shadow: var(--transfer-search-shadow); } .cxd-Transfer-search .cxd-InputBox:not(.is-mobile):hover { border-color: var(--transfer-search-border-hover-color); } .cxd-Transfer-search .cxd-InputBox:not(.is-mobile).is-focused { border-color: var(--transfer-search-border-active-color); } .cxd-Transfer-search .cxd-InputBox:not(.is-mobile) input { color: var(--transfer-search-color); font-size: var(--transfer-search-fontSize); font-weight: var(--transfer-search-fontWeight); line-height: var(--transfer-search-lineHeight); height: var(--transfer-search-lineHeight); } .cxd-Transfer-search .cxd-InputBox:not(.is-mobile) input::-moz-placeholder { color: var(--transfer-search-placeholder-font-color); } .cxd-Transfer-search .cxd-InputBox:not(.is-mobile) input::placeholder { color: var(--transfer-search-placeholder-font-color); } .cxd-Transfer-search.is-mobile .cxd-InputBox { border: none; border-bottom: var(--transfer-search-bottom-border-width) var(--transfer-search-bottom-border-style) var(--transfer-search-bottom-border-color); border-radius: 0; } .cxd-Transfer-mid { min-width: 0.625rem; display: flex; flex-direction: column; justify-content: center; } .cxd-Transfer-mid.is-mobile { display: none; } .cxd-Transfer-arrow { width: 40px; height: 30px; display: flex; justify-content: center; align-items: center; border: 1px solid var(--borderColor); margin: 0 10px; color: var(--icon-color); } .cxd-Transfer-arrow > svg { top: 0; width: 14px; height: 14px; } .cxd-Transfer-checkAll, .cxd-Transfer-clearAll { -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: pointer; } .cxd-Transfer-checkAll.is-disabled, .cxd-Transfer-clearAll.is-disabled { pointer-events: none; color: var(--text--muted-color); } .cxd-Transfer .cxd-Tree { padding: var(--transfer-tree-paddingTop) var(--transfer-tree-paddingRight) var(--transfer-tree-paddingBottom) var(--transfer-tree-paddingLeft); margin: var(--transfer-tree-marginTop) var(--transfer-tree-marginLeft) var(--transfer-tree-marginBottom) var(--transfer-tree-marginRight); } .cxd-Transfer .cxd-Tree-itemLabel:hover::after { left: 0; } .cxd-Transfer .cxd-Tree-itemLabel { padding: var(--transfer-tree-option-paddingTop) var(--transfer-tree-option-paddingRight) var(--transfer-tree-option-paddingBottom) var(--transfer-tree-option-paddingLeft); margin: var(--transfer-tree-option-marginTop) var(--transfer-tree-option-marginLeft) var(--transfer-tree-option-marginBottom) var(--transfer-tree-option-marginRight); border-radius: var(--transfer-tree-top-left-border-radius) var(--transfer-tree-top-right-border-radius) var(--transfer-tree-bottom-right-border-radius) var(--transfer-tree-bottom-left-border-radius); overflow: hidden; } .cxd-Transfer .cxd-Tree-itemLabel:hover { background: var(--transfer-tree-bg-hover-color); } .cxd-Transfer .cxd-Tree-itemLabel:hover .cxd-Tree-itemLabel-item { background: var(--transfer-tree-bg-hover-color); } .cxd-Transfer .cxd-Tree-itemLabel.is-checked { background: var(--transfer-tree-bg-active-color); } .cxd-Transfer .cxd-Tree-itemLabel.is-checked .cxd-Tree-itemLabel-item { background: var(--transfer-tree-bg-active-color); } .cxd-Transfer .cxd-Tree-itemText { line-height: var(--transfer-base-content-lineHeight); font-size: var(--transfer-base-content-fontSize); font-weight: var(--transfer-base-content-fontWeight); color: var(--transfer-base-content-color); } .cxd-Transfer .cxd-Table-content .cxd-Table-table > thead > tr > th { padding: var(--transfer-table-header-paddingTop) var(--transfer-table-header-paddingRight) var(--transfer-table-header-paddingBottom) var(--transfer-table-header-paddingLeft); background: var(--transfer-base-title-bg); color: var(--transfer-base-title-color); line-height: var(--transfer-base-title-lineHeight); font-size: var(--transfer-base-content-fontSize); } .cxd-Transfer .cxd-Table-content .cxd-Table-table > thead > tr > th:last-child { padding-right: var(--transfer-table-last-paddingRight); } .cxd-Transfer .cxd-Table-content .cxd-Table-table > tbody > tr > td { padding: var(--transfer-table-option-paddingTop) var(--transfer-table-option-paddingRight) var(--transfer-table-option-paddingBottom) var(--transfer-table-option-paddingLeft); line-height: var(--transfer-base-content-lineHeight); font-size: var(--transfer-base-content-fontSize); font-weight: var(--transfer-base-content-fontWeight); } .cxd-Transfer .cxd-Table-content .cxd-Table-table > tbody > tr > td > span.is-invalid { color: var(--Form-selectValue-onInvalid-color); } .cxd-Transfer .cxd-Table-content .cxd-Table-table > tbody > tr > td:last-child { padding-right: var(--transfer-table-last-paddingRight); } .cxd-Transfer .cxd-Selections .cxd-TableSelection .cxd-Table-table > thead > tr, .cxd-Transfer .cxd-Selections .cxd-TableSelection .cxd-Table-table > tbody > tr { height: auto; } .cxd-Transfer .cxd-Transfer-result .cxd-Transfer-title { height: 2.5rem; line-height: 2.5rem; } .cxd-Transfer .cxd-Transfer-result .cxd-Selections { overflow: auto; } .cxd-Transfer .cxd-Transfer-result.is-mobile .cxd-Transfer-search .cxd-InputBox { border: none; border-bottom: var(--transfer-search-bottom-border-width) var(--transfer-search-bottom-border-style) var(--transfer-search-bottom-border-color); border-radius: 0; } .cxd-TabsTransfer .cxd-Transfer-title { height: 40px; } .cxd-TabsTransfer-tabs .cxd-Tabs-linksContainer { padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 0.5rem; background-color: var(--TabsTransfer-title-bg); } .cxd-TabsTransfer .cxd-Tree.cxd-Transfer-checkboxes { width: 100%; } .cxd-TabsTransfer-search { margin: var(--gap-sm) var(--gap-sm); } .cxd-TabsTransfer-search .cxd-InputBox { border: 1px solid var(--TabsTransfer-border-color); } .cxd-TabsTransfer .cxd-Transfer-result .cxd-Transfer-title { height: 2.5rem; line-height: 2.5rem; } .cxd-TabsTransfer-placeholder { height: var(--Form-input-height); line-height: var(--Form-input-lineHeight); font-size: var(--Form-input-fontSize); padding: calc((var(--Form-input-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize)) / 2) var(--gap-sm); color: var(--text--muted-color); } .cxd-TabsTransfer-tab { padding: 0; overflow: auto; } .cxd-TabsTransfer-tabs { display: flex; flex-direction: column; height: 100%; } .cxd-TabsTransfer-tabs > .cxd-Tabs-links { border-top: 0 none; padding: 5px 0 0 5px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; } .cxd-TabsTransfer-tabs > .cxd-Tabs-links > .cxd-Tabs-link > a:first-child { font-size: 12px; padding: 7px 8px; } .cxd-TabsTransfer-tabs > .cxd-Tabs-links .cxd-TabsTransfer-tabsMid { flex-grow: 1; } .cxd-TabsTransfer-tabs > .cxd-Tabs-links > .cxd-SearchBox { margin: -5px 5px 0 10px; } .cxd-TabsTransfer-tabs > .cxd-Tabs-links > .cxd-SearchBox.is-active { width: 150px; margin-right: 10px; padding-left: 10px; } .cxd-TabsTransfer-tabs > .cxd-Tabs-content { flex-grow: 1; min-height: 0; position: relative; padding: 5px 0 0; } .cxd-TabsTransfer-tabs > .cxd-Tabs-content > .cxd-Tabs-pane { position: relative; height: 100%; } .cxd-TabsTransfer-tabs > .cxd-Tabs-content > .cxd-Tabs-pane.is-active { display: flex; flex-direction: column; } .cxd-TabsTransfer-tabs > .cxd-Tabs-content > .cxd-Tabs-pane.is-active > .cxd-Transfer-selection { flex-grow: 1; max-height: 100%; overflow: auto; } .cxd-TabsTransfer-tabs > .cxd-Tabs-content .cxd-TabsTransfer-search.is-mobile .cxd-InputBox { border: none; border-bottom: 1px solid var(--TabsTransfer-border-color); border-radius: 0; } .cxd-TransferControl { position: relative; overflow: hidden; box-shadow: var(--transfer-base-shadow); } .cxd-TransferControl.is-inline { display: inline-block; } .cxd-TransferPicker-icon { transition: transform var(--animation-duration) ease-out; margin: 5px 5px 5px auto; display: flex; color: var(--Form-select-caret-iconColor); } .cxd-TransferPicker-icon:hover { color: var(--Form-select-caret-onHover-iconColor); } .cxd-TransferPicker-icon > svg { width: 0.75rem; height: 0.75rem; top: 0; } .cxd-TransferDropDown:hover { border: 0.0625rem solid ver(--menu-active-color); } .cxd-TransferDropDown-icon { transform: rotate(90deg); transition: transform var(--animation-duration) ease-out; margin: 0.3125rem 0 0.3125rem auto; display: flex; color: var(--Form-select-caret-iconColor); } .cxd-TransferDropDown-icon:hover { color: var(--Form-select-caret-onHover-iconColor); } .cxd-TransferDropDown-icon > svg { width: 0.625rem; height: 0.625rem; top: 0; } .cxd-TransferDropDown.is-active .cxd-TransferDropDown-icon { transform: rotate(-90deg); } .cxd-TransferDropDown-content { min-width: 2.5rem; display: flex; flex-direction: column; padding: var(--gap-xs) 0; } .cxd-TransferDropDown-content.is-mobile { width: 100%; min-width: auto; } .cxd-TransferDropDown-content.is-mobile .cxd-Table-table > thead > tr > th:first-child.cxd-Table-checkCell { padding-left: var(--select-table-option-paddingLeft); } .cxd-TransferDropDown-content > .cxd-Transfer-selection { flex-grow: 1; max-height: var(--Transfer-selection-maxHeight); overflow-x: hidden; overflow-y: auto; position: relative; } .cxd-NestedSelectControl { position: relative; } .cxd-NestedSelectControl .cxd-NestedSelect-menu { padding-top: 0.25rem; padding-bottom: 0.25rem; box-shadow: var(--Form-select-outer-boxShadow); } .cxd-NestedSelect { position: relative; } .cxd-NestedSelect--borderHalf { border-left-color: transparent !important; border-right-color: transparent !important; border-top-color: transparent !important; } .cxd-NestedSelect--borderNone { border-color: transparent !important; } .cxd-NestedSelect.is-mobile { text-align: right; } .cxd-NestedSelect-optionArrowRight { display: inline-block; } .cxd-NestedSelect-optionArrowRight svg { width: 0.625rem; height: 0.625rem; fill: var(--Form-input-iconColor); color: var(--default-icon-color); top: 0; } .cxd-NestedSelect-optionArrowRight.is-disabled svg { color: var(--text--muted-color); } .cxd-NestedSelect-menuOuter { display: flex; } .cxd-NestedSelect-noResult { width: 10rem; padding: 0 var(--gap-xs); color: var(--Form-select-placeholderColor); line-height: var(--Form-input-lineHeight); font-size: var(--Form-select-input-fontSize); -webkit-user-select: none; -moz-user-select: none; user-select: none; padding: calc((var(--Form-select-menu-height) - var(--Form-input-lineHeight) * var(--Form-input-fontSize)) / 2) var(--Form-select-paddingX); } .cxd-NestedSelect-menu { width: 10rem; min-width: 6.25rem; min-height: 2rem; max-height: 10.9375rem; background: var(--Form-select-menu-bg); color: var(--Form-select-menu-color); border-radius: var(--borderRadius); box-shadow: var(--Form-select-outer-boxShadow); overflow-y: auto; overflow-x: hidden; border: var(--Form-select-outer-borderWidth) solid var(--Form-select-outer-borderColor); } .cxd-NestedSelect-menu:not(:first-child) { border-left: 0; margin-left: 0.25rem; } .cxd-NestedSelect-menu .cxd-NestedSelect-option { position: relative; padding: var(--select-base-default-option-paddingTop) var(--select-base-default-option-paddingRight) var(--select-base-default-option-paddingBottom) var(--select-base-default-option-paddingLeft); min-height: var(--select-base-default-option-line-height); line-height: var(--select-base-default-option-line-height); cursor: pointer; display: flex; font-size: var(--select-base-default-option-fontSize); font-weight: var(--select-base-default-option-fontWeight); color: var(--select-base-default-option-color); background: var(--select-base-default-option-bg-color); } .cxd-NestedSelect-menu .cxd-NestedSelect-option > .cxd-NestedSelect-optionLabel { min-width: 0; min-height: 0; flex: 1; height: 2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cxd-NestedSelect-menu .cxd-NestedSelect-option > .cxd-NestedSelect-optionLabel.is-disabled { cursor: not-allowed; color: var(--text--muted-color); } .cxd-NestedSelect-menu .cxd-NestedSelect-option .cxd-NestedSelect-optionLabel-highlight { color: var(--Form-select-menu-onActive-color); } .cxd-NestedSelect-menu .cxd-NestedSelect-option.is-active { color: var(--Form-select-menu-onActive-color); background: var(--Form-select-menu-onActive-bg); } .cxd-NestedSelect-menu .cxd-NestedSelect-option:hover { color: var(--Form-select-menu-onHover-color); background: var(--Form-select-menu-onHover-bg); } .cxd-NestedSelect-menu .cxd-NestedSelect-option:hover > .cxd-NestedSelect-childrenOuter { display: block; } .cxd-NestedSelect-menu .cxd-NestedSelect-option.no-result { justify-content: center; cursor: default; color: var(--Form-select-placeholderColor); } .cxd-NestedSelect-menu .cxd-NestedSelect-option.no-result:hover { color: unset; background: unset; } .cxd-NestedSelect-popup { height: 21.25rem; } .cxd-NestedSelect-popover { border: none; box-shadow: none; } .cxd-Cascader-tabs { display: flex; } .cxd-Cascader-tabs.scrollable { display: block; overflow-x: auto; white-space: nowrap; } .cxd-Cascader-tabs.scrollable::-webkit-scrollbar { display: none; } .cxd-Cascader-tab { flex: 1; min-width: 0; min-height: 0; width: calc((100vw - 20px) / 3); height: 16.25rem; overflow-y: auto; display: inline-block; padding-left: 0.625rem; border: 1px solid var(--Cascader-border-color); } .cxd-Cascader-tab::-webkit-scrollbar { display: none; } .cxd-Cascader { width: 100%; padding: 0 10px; } .cxd-Cascader-Nav { overflow-x: auto; } .cxd-Cascader-NavItem { display: inline-block; margin-right: 0.625rem; list-style: none; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; padding: 0 0.375rem; } .cxd-Cascader-btnGroup { display: flex; justify-content: space-between; align-items: center; height: 3.75rem; } .cxd-Cascader-options { box-sizing: border-box; height: var(--Cascader-option-height); padding-top: 0.375rem; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0; padding: 0; } .cxd-Cascader-option { display: flex; align-items: center; justify-content: space-between; padding: 0.375rem 0 0.375rem 0.625rem; font-size: var(--fontSizeMd); line-height: var(--Cascader-option-lineHeight); cursor: pointer; position: relative; } .cxd-Cascader-option.is-active { background-color: var(--Cascader-border-active-bg-color); } .cxd-Cascader-option.selected .cxd-Cascader-option--text { color: var(--primary); } .cxd-Cascader-option.disabled span { color: gray; } .cxd-Cascader-option--text { flex: 1; min-width: 0; min-height: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-Cascader-option--text.disabled { color: var(--Cascader-option-disable-color); } .cxd-Cascader-option-arrow { flex: 1; min-width: 0; min-height: 0; text-align: right; padding-right: 0.375rem; } .cxd-Cascader-option-arrow > svg { transform: scale(0.8); transition: transform var(--animation-duration); display: inline-block; color: var(--Form-select-caret-iconColor); width: 10px; height: 10px; top: 0; } .cxd-Cascader-option-selectedNum { min-width: 1rem; height: 1rem; line-height: 1rem; border-radius: 100%; text-align: center; background: var(--Form-select-menu-onActive-color); color: var(--white) !important; font-size: var(--fontSizeSm); display: inline-block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .cxd-Cascader-icon { color: var(--primary); } .cxd-Cascader-tab { padding: 0; } .cxd-Cascader-btnCancel { color: var(--PopUp-cancelAction-color); } .cxd-IconPickerControl { position: relative; max-width: 100%; } .cxd-IconPickerControl.is-inline { display: inline-block; width: var(--Form-control-widthBase); } .cxd-IconPickerControl-input { display: flex; background: var(--Form-input-bg); border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor); border-radius: var(--Form-input-borderRadius); line-height: var(--Form-input-lineHeight); padding: var(--Form-input-paddingY) var(--Form-input-paddingX); font-size: var(--Form-input-fontSize); flex-wrap: wrap; justify-content: flex-start; } .cxd-IconPickerControl-input input { flex-basis: 1.875rem; flex-grow: 1; outline: none; background: transparent; border: none; color: var(--Form-input-color); width: 100%; } .cxd-IconPickerControl-input input::-moz-placeholder { color: var(--Form-input-placeholderColor); -moz-user-select: none; user-select: none; } .cxd-IconPickerControl-input input::placeholder { color: var(--Form-input-placeholderColor); -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-IconPickerControl-input:hover { border-color: var(--Form-input-onFocused-borderColor); } .cxd-IconPickerControl-input--borderHalf { border-left-color: transparent !important; border-right-color: transparent !important; border-top-color: transparent !important; } .cxd-IconPickerControl-input--borderNone { border-color: transparent !important; } .cxd-IconPickerControl.is-error > .cxd-IconPickerControl-input { border-color: var(--Form-item-onError-borderColor); background: var(--Form-item-onError-bg); transition: all var(--animation-duration); } .cxd-IconPickerControl.is-focused > .cxd-IconPickerControl-input { border-color: var(--Form-input-onFocused-borderColor); box-shadow: var(--Form-input-boxShadow); background: var(--Form-input-onFocused-bg); transition: all var(--animation-duration); } .cxd-IconPickerControl.is-error.is-focused > .cxd-IconPickerControl-input { border-color: var(--Form-item-onError-borderColor); background: var(--Form-item-onError-bg); } .cxd-IconPickerControl.is-disabled > .cxd-IconPickerControl-input { color: var(--text--muted-color); background: var(--Form-input-onDisabled-bg); border-color: var(--Form-input-onDisabled-borderColor); transition: all var(--animation-duration); } .cxd-IconPickerControl.is-disabled > .cxd-IconPickerControl-input > input { color: var(--text--muted-color); } .cxd-IconPickerControl-spinner { line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize)); } .cxd-IconPickerControl-clear { padding: var(--Form-input-clearBtn-padding); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: auto; text-decoration: none; } .cxd-IconPickerControl-clear svg { fill: var(--Form-input-clearBtn-color); width: var(--Form-input-clearBtn-size); height: var(--Form-input-clearBtn-size); top: 0; } .cxd-IconPickerControl-clear:hover svg { fill: var(--Form-input-clearBtn-color-onHover); } .cxd-IconPickerControl-clear:active svg { fill: var(--Form-input-clearBtn-color-onActive); } .cxd-IconPickerControl-revealPassword { cursor: pointer; color: var(--text--muted-color); } @media (min-width: 576px) { .cxd-IconPickerControl.cxd-Form-control--sizeXs > .cxd-IconPickerControl-input, .cxd-IconPickerControl.cxd-Form-control--sizeSm > .cxd-IconPickerControl-input, .cxd-IconPickerControl.cxd-Form-control--sizeMd > .cxd-IconPickerControl-input, .cxd-IconPickerControl.cxd-Form-control--sizeLg > .cxd-IconPickerControl-input { min-width: 100%; display: inline-flex; } } .cxd-IconPickerControl-placeholder { color: var(--Form-input-placeholderColor); -webkit-user-select: none; -moz-user-select: none; user-select: none; line-height: var(--Form-input-lineHeight); position: absolute; left: 2px; overflow: hidden; width: 100%; } .cxd-IconPickerControl-valueWrap { justify-content: space-between; flex-grow: 1; line-height: 1; white-space: nowrap; width: 100%; position: relative; } .cxd-IconPickerControl-valueWrap > input { display: inline-block; width: 100% !important; vertical-align: middle; } .cxd-IconPickerControl-input--withAC { position: relative; flex-wrap: wrap; width: 100%; } .cxd-IconPickerControl-input--withAC > input { width: auto; } .cxd-IconPickerControl-sugsPanel { position: absolute; background: var(--Form-select-menu-bg); color: var(--Form-select-menu-color); border: var(--Form-input-borderWidth) solid var(--Form-input-onFocused-borderColor); left: -0.0625rem; right: -0.0625rem; top: 100%; z-index: 10; height: auto; } .cxd-IconPickerControl-tabs { background: var(--IconPicker-tabs-bg); } .cxd-IconPickerControl-tab { display: inline-block; padding: var(--IconPicker-tab-padding); height: var(--IconPicker-tab-height); line-height: var(--IconPicker-tab-lineHeight); cursor: pointer; text-align: center; font-size: var(--fontSizeSm); -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-IconPickerControl-tab.active { background: var(--IconPicker-tab-onActive-bg); } .cxd-IconPickerControl-sugs { position: relative; padding: var(--IconPicker-padding); max-height: var(--IconPicker-content-maxHeight); overflow-y: auto; } .cxd-IconPickerControl-sugItem { display: inline-block; width: var(--IconPicker-sugItem-width); height: var(--IconPicker-sugItem-height); text-align: center; line-height: var(--IconPicker-sugItem-lineHeight); cursor: pointer; } .cxd-IconPickerControl-sugItem:hover { background: var(--Form-select-menu-onHover-bg); } .cxd-IconPickerControl-sugItem.is-active { color: var(--white); background: var(--Form-select-menu-onActive-color); } .cxd-IconPickerControl-value { position: absolute; -webkit-user-select: none; -moz-user-select: none; user-select: none; line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize)); vertical-align: middle; display: inline-block; overflow: hidden; width: 100%; text-overflow: ellipsis; } .cxd-IconPickerControl-value > i { display: inline-block; margin-right: var(--IconPicker-selectedIcon-marginRight); } .cxd-IconSelectControl { position: relative; max-width: 100%; } .cxd-IconSelectControl.is-inline { display: inline-block; width: var(--Form-control-widthBase); } .cxd-IconSelectControl-input { display: flex; background: var(--Form-input-bg); border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor); border-radius: var(--Form-input-borderRadius); line-height: var(--Form-input-lineHeight); padding: var(--Form-input-paddingY) var(--Form-input-paddingX); font-size: var(--Form-input-fontSize); flex-wrap: wrap; justify-content: flex-start; } .cxd-IconSelectControl-input input { flex-basis: 1.875rem; flex-grow: 1; outline: none; background: transparent; border: none; color: var(--Form-input-color); width: 100%; } .cxd-IconSelectControl-input input::-moz-placeholder { color: var(--Form-input-placeholderColor); -moz-user-select: none; user-select: none; } .cxd-IconSelectControl-input input::placeholder { color: var(--Form-input-placeholderColor); -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-IconSelectControl-input:hover { border-color: var(--Form-input-onFocused-borderColor); } .cxd-IconSelectControl-input--borderHalf { border-left-color: transparent !important; border-right-color: transparent !important; border-top-color: transparent !important; } .cxd-IconSelectControl-input--borderNone { border-color: transparent !important; } .cxd-IconSelectControl.is-error > .cxd-IconSelectControl-input { border-color: var(--Form-item-onError-borderColor); background: var(--Form-item-onError-bg); transition: all var(--animation-duration); } .cxd-IconSelectControl.is-focused > .cxd-IconSelectControl-input { border-color: var(--Form-input-onFocused-borderColor); box-shadow: var(--Form-input-boxShadow); background: var(--Form-input-onFocused-bg); transition: all var(--animation-duration); } .cxd-IconSelectControl.is-error.is-focused > .cxd-IconSelectControl-input { border-color: var(--Form-item-onError-borderColor); background: var(--Form-item-onError-bg); } .cxd-IconSelectControl.is-disabled > .cxd-IconSelectControl-input { color: var(--text--muted-color); background: var(--Form-input-onDisabled-bg); border-color: var(--Form-input-onDisabled-borderColor); transition: all var(--animation-duration); } .cxd-IconSelectControl.is-disabled > .cxd-IconSelectControl-input > input { color: var(--text--muted-color); } .cxd-IconSelectControl-spinner { line-height: calc(var(--Form-input-lineHeight) * var(--Form-input-fontSize)); } .cxd-IconSelectControl-clear { padding: var(--Form-input-clearBtn-padding); cursor: pointer; display: flex; align-items: center; justify-content: center; margin-left: auto; text-decoration: none; } .cxd-IconSelectControl-clear svg { fill: var(--Form-input-clearBtn-color); width: var(--Form-input-clearBtn-size); height: var(--Form-input-clearBtn-size); top: 0; } .cxd-IconSelectControl-clear:hover svg { fill: var(--Form-input-clearBtn-color-onHover); } .cxd-IconSelectControl-clear:active svg { fill: var(--Form-input-clearBtn-color-onActive); } .cxd-IconSelectControl-revealPassword { cursor: pointer; color: var(--text--muted-color); } @media (min-width: 576px) { .cxd-IconSelectControl.cxd-Form-control--sizeXs > .cxd-IconSelectControl-input, .cxd-IconSelectControl.cxd-Form-control--sizeSm > .cxd-IconSelectControl-input, .cxd-IconSelectControl.cxd-Form-control--sizeMd > .cxd-IconSelectControl-input, .cxd-IconSelectControl.cxd-Form-control--sizeLg > .cxd-IconSelectControl-input { min-width: 100%; display: inline-flex; } } .cxd-IconSelectControl-clear { position: absolute; right: var(--Form-input-paddingX); } .cxd-IconSelectControl-clear svg { top: 0; } .cxd-IconSelectControl-Modal-search.cxd-SearchBox { width: var(--IconSelect-searchBox-width); } .cxd-IconSelectControl-Modal-refresh { display: inline-block; vertical-align: baseline; margin-left: var(--IconSelect-base-margin); } .cxd-IconSelectControl-Modal-func { display: inline-block; margin-left: 12px; } .cxd-IconSelectControl-Modal-content { display: flex; position: relative; margin-top: var(--IconSelect-base-margin); height: var(--IconSelect-dialog-height); align-items: stretch; border: 1px solid var(--IconSelect-border-color); border-radius: var(--IconSelect-base-border-radius); } .cxd-IconSelectControl-Modal-content-aside { border-right: 1px solid var(--IconSelect-border-color); overflow-x: hidden; overflow-y: auto; } .cxd-IconSelectControl-Modal-content-main { min-width: 0; min-height: 0; flex: 1; overflow: auto; } .cxd-IconSelectControl-input { overflow: hidden; height: 2rem; } .cxd-IconSelectControl-input-area { min-height: var(--IconSelect-preview-icon-size); display: flex; align-items: center; justify-content: flex-start; overflow: hidden; } .cxd-IconSelectControl-input-area img.icon { height: var(--sizes-size-7); margin-right: var(--sizes-size-4); } .cxd-IconSelectControl-input-area-str-svg { height: var(--fontSizeBase); } .cxd-IconSelectControl-input-area-str-svg svg { width: 100%; height: 100%; } .cxd-IconSelectControl-input-area-iconfont { margin-right: var(--sizes-size-4); } .cxd-IconSelectControl-input-wrapper { width: 100%; } .cxd-IconSelectControl-input-icon-show > svg { width: var(--IconSelect-preview-icon-size); height: var(--IconSelect-preview-icon-size); margin-right: var(--IconSelect-xs-margin); top: 0.1875rem; } .cxd-IconSelectControl-input-icon-id { min-width: 0; min-height: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; } .cxd-IconSelectControl-input-icon-placeholder { color: var(--IconSelect-icon-placeholder-color); -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-IconSelectControl-type-list { display: flex; padding: 0; margin: 0; width: var(--IconSelect-type-width); flex-direction: column; list-style: none; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; overflow: auto; font-size: var(--IconSelect-type-font-size); } .cxd-IconSelectControl-type-list li { line-height: var(--IconSelect-type-li-height); padding: 0; padding-left: var(--IconSelect-type-li-padding); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .cxd-IconSelectControl-type-list li:hover, .cxd-IconSelectControl-type-list li.active { color: var(--IconSelect-active-bg-color); } .cxd-IconSelectControl-type-list li.active { background-color: #e6f0ff; } .cxd-IconSelectControl-icon-list { position: relative; list-style: none; padding: 0; margin: 0; display: flex; overflow: hidden; flex-wrap: wrap; align-items: center; justify-content: flex-start; padding: var(--IconSelect-sm-padding); } .cxd-IconSelectControl-icon-list-empty { text-align: center; } .cxd-IconSelectControl-icon-list > li { padding: var(--IconSelect-sm-padding); width: 20%; } .cxd-IconSelectControl-icon-list-item { position: relative; padding-left: var(--IconSelect-base-margin); height: var(--IconSelect-type-item-height); display: flex; flex-direction: row; align-items: center; border: 1px solid #e8e9eb; border-radius: var(--IconSelect-base-border-radius); cursor: pointer; } .cxd-IconSelectControl-icon-list-item:hover, .cxd-IconSelectControl-icon-list-item.active { border-color: var(--IconSelect-active-bg-color); } .cxd-IconSelectControl-icon-list-item.active::before { content: ""; display: block; position: absolute; right: 0; top: 0; width: var(--IconSelect-type-font-size); height: var(--IconSelect-type-font-size); border-bottom-left-radius: var(--IconSelect-base-border-radius); background-color: var(--IconSelect-active-bg-color); } .cxd-IconSelectControl-icon-list-item.active::after { content: ""; display: block; position: absolute; right: 2px; top: 3px; width: 7px; height: 4px; border-style: solid; border-color: var(--IconSelect-active-badge-color); border-width: 0 0 1px 1px; transform: rotate(-45deg); } .cxd-IconSelectControl-icon-list-item > svg { width: var(--IconSelect-list-icon-size); height: var(--IconSelect-list-icon-size); } .cxd-IconSelectControl-icon-list-item-info { margin-left: var(--IconSelect-base-margin); overflow: hidden; min-width: 0; min-height: 0; flex: 1; } .cxd-IconSelectControl-icon-list-item-info > p { line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cxd-IconSelectControl-icon-list-item-info-name { margin: 0; font-size: var(--IconSelect-type-font-size); color: var(--IconSelect-icon-name-color); } .cxd-IconSelectControl-icon-list-item-info-id { margin: 0; font-size: var(--IconSelect-type-font-size); color: var(--IconSelect-icon-id-color); } .cxd-Form { font-size: var(--Form-fontSize); position: relative; } .cxd-Form--quickEdit > div:last-of-type { margin-bottom: 0; } .cxd-Form--inline > .cxd-Button { margin-bottom: calc(var(--Form-item-gap) / 2); margin-right: calc(var(--Form-item-gap) / 2); } .cxd-Form--inline > .cxd-PlainField { display: inline-block; padding-top: var(--Form-input-paddingY); } .cxd-Form-static { min-height: var(--Form-input-height); font-size: var(--Form-static-fontSize); color: var(--Form-static-color); line-height: var(--Form-static-lineHeight); font-weight: var(--Form-static-fontWeight); margin-bottom: 0; word-break: break-word; } .cxd-Form-static:not(.is-noPaddingY-static) { padding-top: var(--Form-label-paddingTop); padding-bottom: var(--Form-label-paddingTop); } .cxd-Form-item--inline > .cxd-Form-value > .cxd-Form-static { display: inline-block; vertical-align: top; } .cxd-Form-static--borderFull { border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor); border-radius: var(--Form-input-borderRadius); padding: var(--Form-input-paddingY) var(--Form-input-paddingX); } .cxd-Form-static--borderHalf { border-bottom: var(--Form-input-borderWidth) solid var(--Form-input-borderColor); border-radius: var(--Form-input-borderRadius); padding: var(--Form-input-paddingY) var(--Form-input-paddingX); } .cxd-Form-label { font-weight: var(--Form-item-fontWeight); line-height: var(--Form-item-lineHeight); margin-bottom: var(--Form-mode-default-labelGap); position: relative; font-size: var(--Form-item-fontSize); color: var(--Form-item-color); } .cxd-Form-label > span { position: relative; display: inline-block; } .cxd-Form-star { color: var(--Form-item-star-color); font-size: var(--Form-item-star-size); line-height: 1; } .cxd-Form-feedback { color: var(--Form-feedBack-color); list-style-type: none; margin: 0; margin-top: var(--Form-feedBack-gap); padding: 0; font-size: var(--Form-feedBack-fontSize); } .cxd-Form-description { display: block; word-break: break-word; color: var(--Form-description-color); font-weight: var(--Form-description-fontWeight); line-height: var(--Form-description-lineHeight); margin-top: var(--Form-description-gap); font-size: var(--Form-description-fontSize); } .cxd-Form-hint { display: inline-block; margin-left: var(--gap-sm); padding-top: var(--Form-input-paddingY); vertical-align: top; } .cxd-Form-item { margin-bottom: var(--Form-item-gap); } .cxd-Form-item:last-child { margin-bottom: 0; } .cxd-Form-item:last-child .cxd-Form-feedback { position: relative; } .cxd-Grid-form > .cxd-Form-item:last-child { margin-bottom: 0; } .cxd-Form--inline > .cxd-Form-item--inline:last-child { margin-right: 0; margin-bottom: 0; } .cxd-Form-item .cxd-Form-remark { padding-top: var(--Form-label-paddingTop); vertical-align: top; } .cxd-Form-item--inline { margin-right: var(--Form-mode-inline-item-gap); } .cxd-Form-item--horizontal > .cxd-Form-label { text-align: var(--Form--horizontal-label-align); white-space: var(--Form--horizontal-label-whiteSpace); } .cxd-Form-item--horizontal > .cxd-Form-label--left { text-align: left; } .cxd-Form-item--horizontal-justify { justify-content: space-between; } .cxd-Form-item--horizontal-justify > .cxd-Form-label { text-align: var(--Form--horizontal-justify-label-align); white-space: var(--Form--horizontal-justify-label-whiteSpace); } .cxd-Form-item--horizontal-justify > .cxd-Form-value { text-align: var(--Form--horizontal-justify-value-align); } .cxd-Form-item--horizontal-justify > .cxd-Form-value > * { text-align: initial; } .cxd-Form-item--normal > .cxd-Form-label { display: block; width: var(--Form-mode-default-width); } .cxd-Form-item--normal > .cxd-Form-label .cxd-Form-star { position: absolute; left: -0.375rem; top: 0.1875rem; } .cxd-Form-item.is-error > .cxd-Form-label { color: var(--Form-item-onError-color); } .cxd-Form-item .cxd-Form-control--withSize > .cxd-ResultBox { display: flex; } .cxd-Form-placeholder { color: var(--Form-input-placeholderColor); } .cxd-Form-caption { display: inline-block; line-height: var(--Form-input-height); height: var(--Form-input-height); margin-left: 0.625rem; } @media (min-width: 576px) { .cxd-Form-label { display: inline-block; max-width: 100%; } .cxd-Form-control--sizeXs { width: var(--Form-control-widthXs); max-width: 100%; display: inline-block; vertical-align: top; } .cxd-Form-control--sizeXs.cxd-NumberControl { width: var(--Form-control-widthXs); } .cxd-Form-control--sizeSm { width: var(--Form-control-widthSm); max-width: 100%; display: inline-block; vertical-align: top; } .cxd-Form-control--sizeSm.cxd-NumberControl { width: var(--Form-control-widthSm); } .cxd-Form-control--sizeMd { width: var(--Form-control-widthMd); max-width: 100%; display: inline-block; vertical-align: top; } .cxd-Form-control--sizeLg { width: var(--Form-control-widthLg); max-width: 100%; display: inline-block; vertical-align: top; } .cxd-Form-control--sizeLg.cxd-NumberControl { width: var(--Form-control-widthLg); } .cxd-Form-item--horizontal { display: flex; flex-wrap: nowrap; } .cxd-Form-item--horizontal > .cxd-Form-value { flex-basis: 0; flex-grow: 1; max-width: var(--Form--horizontal-value-maxWidth); min-width: var(--Form--horizontal-value-minWidth); } .cxd-Form-item--horizontal .cxd-Form-itemColumn--xs, .cxd-Form-item--horizontal .cxd-Form-itemColumn--sm, .cxd-Form-item--horizontal .cxd-Form-itemColumn--normal, .cxd-Form-item--horizontal .cxd-Form-itemColumn--auto, .cxd-Form-item--horizontal .cxd-Form-itemColumn--md, .cxd-Form-item--horizontal .cxd-Form-itemColumn--lg { flex-grow: unset; flex-basis: unset; } .cxd-Form-item--horizontal > .cxd-Form-label { padding-top: calc((var(--Form-input-height) - var(--Form-item-lineHeight) * var(--Form-item-fontSize)) / 2); word-break: break-word; line-height: var(--Form-item-lineHeight); margin: 0; margin-right: var(--Form--horizontal-label-gap); flex-shrink: 0; } .cxd-Form-item--horizontal > .cxd-Form-label .cxd-Form-star { position: absolute; left: -0.375rem; top: 0.1875rem; } .cxd-Form-item--horizontal .cxd-Form-itemColumn--xs { width: var(--Form--horizontal-label-widthXs); } .cxd-Form-item--horizontal .cxd-Form-itemColumn--sm { width: var(--Form--horizontal-label-widthSm); } .cxd-Form-item--horizontal .cxd-Form-itemColumn--normal { width: var(--Form--horizontal-label-widthBase); } .cxd-Form-item--horizontal .cxd-Form-itemColumn--md { width: var(--Form--horizontal-label-widthMd); } .cxd-Form-item--horizontal .cxd-Form-itemColumn--lg { width: var(--Form--horizontal-label-widthLg); } .cxd-Form-item--horizontal .cxd-Form-itemColumn--auto { width: auto; } .cxd-Form-item--horizontal .cxd-Form-itemColumn--1 { flex: 0 0 8.3333333333%; max-width: 8.3333333333%; min-height: 1px; } .cxd-Form-item--horizontal .cxd-Form-itemColumn--2 { flex: 0 0 16.6666666667%; max-width: 16.6666666667%; min-height: 1px; } .cxd-Form-item--horizontal .cxd-Form-itemColumn--3 { flex: 0 0 25%; max-width: 25%; min-height: 1px; } .cxd-Form-item--horizontal .cxd-Form-itemColumn--4 { flex: 0 0 33.3333333333%; max-width: 33.3333333333%; min-height: 1px; } .cxd-Form-item--horizontal .cxd-Form-itemColumn--5 { flex: 0 0 41.6666666667%; max-width: 41.6666666667%; min-height: 1px; } .cxd-Form-item--horizontal .cxd-Form-itemColumn--6 { flex: 0 0 50%; max-width: 50%; min-height: 1px; } .cxd-Form-item--horizontal .cxd-Form-itemColumn--7 { flex: 0 0 58.3333333333%; max-width: 58.3333333333%; min-height: 1px; } .cxd-Form-item--horizontal .cxd-Form-itemColumn--8 { flex: 0 0 66.6666666667%; max-width: 66.6666666667%; min-height: 1px; } .cxd-Form-item--horizontal .cxd-Form-itemColumn--9 { flex: 0 0 75%; max-width: 75%; min-height: 1px; } .cxd-Form-item--horizontal .cxd-Form-itemColumn--10 { flex: 0 0 83.3333333333%; max-width: 83.3333333333%; min-height: 1px; } .cxd-Form-item--horizontal .cxd-Form-itemColumn--11 { flex: 0 0 91.6666666667%; max-width: 91.6666666667%; min-height: 1px; } .cxd-Form-item--horizontal .cxd-Form-itemColumn--12 { flex: 0 0 100%; max-width: 100%; min-height: 1px; } .cxd-Form-item--horizontal .cxd-Form-itemColumn--align-left { text-align: left; } .cxd-Form-item--horizontal .cxd-Form-itemColumn--align-right { text-align: right; } .cxd-Form-item--inline { display: inline-block; vertical-align: top; } .cxd-Form-item--inline > .cxd-Form-label { padding-top: calc((var(--Form-input-height) - var(--Form-item-lineHeight) * var(--Form-item-fontSize)) / 2); word-break: break-word; line-height: var(--Form-item-lineHeight); margin: 0; margin-right: var(--Form-mode-inline-label-gap); } .cxd-Form-item--inline > .cxd-Form-label .cxd-Form-star { position: absolute; left: -0.375rem; top: 0.1875rem; } .cxd-Form-item--inline > .cxd-Form-value { display: inline-block; vertical-align: top; } .cxd-Form-item--inline > .cxd-Form-value > .cxd-Button--link { padding-top: var(--Form-label-paddingTop); } .cxd-Form-item--inline > .cxd-Form-value > .cxd-Form-control { vertical-align: top; display: inline-block; } .cxd-Form-item--inline > .cxd-Form-value > .cxd-Form-control.cxd-InputGroup { display: inline-flex; } .cxd-Form-item--inline > .cxd-Form-value > .cxd-TextControl--withAddOn { display: inline-flex; } .cxd-Form-row { display: flex; flex-wrap: wrap; margin-left: calc(var(--Form-row-gutterWidth) / -2); margin-right: calc(var(--Form-row-gutterWidth) / -2); align-items: flex-start; } .cxd-Form-row > * { padding-left: calc(var(--Form-row-gutterWidth) / 2); padding-right: calc(var(--Form-row-gutterWidth) / 2); } .cxd-Form-col { flex-basis: 0; flex-grow: 1; flex-shrink: 1; min-width: 0; min-height: 0; } .cxd-Form-rowInner { display: flex; flex-wrap: nowrap; } .cxd-Form-rowInner > .cxd-Form-label { display: inline-block; vertical-align: top; padding-top: var(--Form-label-paddingTop); padding-right: var(--Form-row-gutterWidth); } .cxd-Form-rowInner > .cxd-Form-control { flex-basis: 0; flex-grow: 1; min-width: 0; min-height: 0; } .cxd-Form-flex { display: flex; align-items: flex-start; width: 100%; } .cxd-Form-flex-col { flex-basis: 0; flex-grow: 1; flex-shrink: 1; padding: calc(var(--Form-item-gap) / 2); min-width: 0; min-height: 0; } .cxd-Form-flexInner { display: flex; flex-wrap: nowrap; } .cxd-Form-flexInner > .cxd-Form-label { display: inline-block; vertical-align: top; padding-top: var(--Form-label-paddingTop); margin-right: var(--Form-row-gutterWidth); } .cxd-Form-flexInner > .cxd-Form-label .cxd-Remark { vertical-align: initial; } .cxd-Form-flexInner > .cxd-Form-value { flex-basis: 0; flex-grow: 1; min-width: 0; } .cxd-Form-flexInner > .cxd-Form-value .cxd-Remark { vertical-align: initial; margin-left: 0; } .cxd-Form-flexInner--label-top { flex-direction: column; } .cxd-Form-flexInner--label-top > .cxd-Form-value { flex-basis: auto; } .cxd-Form-flexInner--label-left > .cxd-Form-label { text-align: left; width: 4.75rem; } .cxd-Form-flexInner--label-right > .cxd-Form-label { text-align: right; width: 4.75rem; } } .cxd-Form--debug { padding: var(--gap-sm); margin-bottom: var(--gap-sm); background-color: var(--colors-neutral-fill-11); border-radius: var(--borderRadius); position: relative; word-wrap: break-word; word-break: break-all; } .cxd-Form--column { display: flex; flex-wrap: wrap; margin-left: calc(var(--Form-group-gutterWidth) / -2); margin-right: calc(var(--Form-group-gutterWidth) / -2); } .cxd-Form--column > .cxd-Form-item { flex-shrink: 0; flex-grow: 1; padding-left: calc(var(--Form-group-gutterWidth) / 2); padding-right: calc(var(--Form-group-gutterWidth) / 2); } .cxd-Form--column > .cxd-Form-item.cxd-Form-item--inline { /* 设置columnCount之后，margin-right自动计算，如果设置了会导致flex自动wrap */ margin-right: unset; display: inline-flex; } .cxd-Form--column > .cxd-Form-item.cxd-Form-item--inline > .cxd-Form-value { min-width: 0; min-height: 0; flex: 1; /* 如果size设置了full就占满剩余空间 */ } .cxd-Form--column > .cxd-Form-item.cxd-Form-item--inline > .cxd-Form-value .cxd-Form-control:first-child.is-full { width: -webkit-fill-available; } .cxd-Form--column-1 > .cxd-Form-item { width: 100%; } .cxd-Form--column-2 > .cxd-Form-item { width: 50%; } .cxd-Form--column-2 > .cxd-Form-item:nth-last-child(2) { margin-bottom: 0; } .cxd-Form--column-3 > .cxd-Form-item { width: 33%; } .cxd-Form--column-3 > .cxd-Form-item:nth-last-child(-n+3) { margin-bottom: 0; } .cxd-Form--column-4 > .cxd-Form-item { width: 25%; } .cxd-Form--column-4 > .cxd-Form-item:nth-last-child(-n+4) { margin-bottom: 0; } .cxd-Form--column-5 > .cxd-Form-item { width: 20%; } .cxd-Form--column-5 > .cxd-Form-item:nth-last-child(-n+5) { margin-bottom: 0; } .cxd-Form--column-6 > .cxd-Form-item { width: 16.6%; } .cxd-Form--column-6 > .cxd-Form-item:nth-last-child(-n+6) { margin-bottom: 0; } .cxd-Form--column-7 > .cxd-Form-item { width: 14.2%; } .cxd-Form--column-7 > .cxd-Form-item:nth-last-child(-n+7) { margin-bottom: 0; } .cxd-Form--column-8 > .cxd-Form-item { width: 12.5%; } .cxd-Form--column-8 > .cxd-Form-item:nth-last-child(-n+8) { margin-bottom: 0; } .cxd-Form-column-9 > .cxd-Form-item { width: 11.1%; } .cxd-Form--column-9 > .cxd-Form-item:nth-last-child(-n+9) { margin-bottom: 0; } .cxd-Form-column-10 > .cxd-Form-item { width: 10%; } .cxd-Form--column-10 > .cxd-Form-item:nth-last-child(-n+10) { margin-bottom: 0; } /* 移动端样式调整 */ @media (max-width: 767px) { .cxd-Combo-form::before { border-bottom: none; } .cxd-Form-item { display: flex; margin-bottom: 0; padding: var(--Form-item-mobile-gap) 0; position: relative; } .cxd-Form-item::after { position: absolute; box-sizing: border-box; content: " "; pointer-events: none; right: 0; bottom: 0; left: 0; border-bottom: 1px solid var(--borderColor); transform: scaleY(0.5); } .cxd-Form-item .cxd-InputGroup-addOn, .cxd-Form-item .cxd-TextControl-addOn { border: none; } .cxd-Form-item .cxd-Form-label { flex: 0 0 28%; max-width: 28%; min-height: 1px; text-align: left; padding-right: calc(var(--Form--horizontal-gutterWidth) / 2); overflow-wrap: break-word; margin-right: 0; margin-bottom: 0; font-size: var(--fontSizeLg); } .cxd-Form-item .cxd-Form-label + .cxd-Form-item-controlBox { max-width: 72%; } .cxd-Form-item .cxd-Form-label > span { line-height: 2rem; display: inline-block; } .cxd-Form-item .cxd-Form-description { font-size: var(--fontSizeBase); } .cxd-Form-item .cxd-TextControl-input { font-size: var(--fontSizeLg); } .cxd-Form-item .cxd-TextControl-input input { height: calc(var(--Form-input-lineHeight) * var(--fontSizeLg)); } .cxd-Form-item .cxd-NumberControl .cxd-Number { min-width: 0; min-height: 0; flex: 1; border: none; } .cxd-Form-item .cxd-NumberControl .cxd-Number .cxd-Number-handler-wrap { display: none; } .cxd-Form-item .cxd-NumberControl .cxd-Select { flex: none; border: none; } .cxd-Form-item .cxd-Number--enhance { float: right; border: none; } .cxd-Form-item .cxd-Number--enhance-left-icon, .cxd-Form-item .cxd-Number--enhance-right-icon { width: var(--inputNumber-enhance-mobile-icon-width); height: var(--inputNumber-enhance-mobile-icon-height); border: var(--Form-input-borderWidth) solid var(--borderColor); border-radius: var(--Form-input-borderRadius); -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-Form-item .cxd-Number--enhance-left-icon svg.icon, .cxd-Form-item .cxd-Number--enhance-right-icon svg.icon { top: 0; } .cxd-Form-item .cxd-Number--enhance .cxd-Number-input { text-align: center; } .cxd-Form-item .cxd-Number--enhance .cxd-Number--enhance-input { width: var(--inputNumber-enhance-mobile-input-width); text-align: center; } .cxd-Form-item .cxd-Number--enhance .cxd-InputNumber-enhance-minus, .cxd-Form-item .cxd-Number--enhance .cxd-InputNumber-enhance-plus { width: var(--inputNumber-enhance-mobile-icon-inner-width); height: var(--inputNumber-enhance-mobile-icon-inner-height); display: flex; justify-content: center; align-items: center; } .cxd-Form-item .cxd-Number--enhance:hover .cxd-Number-input { padding-left: var(--inputNumber-enhance-default-paddingLeft); padding-right: var(--inputNumber-enhance-default-paddingRight); } .cxd-Form-item .cxd-Form-value, .cxd-Form-item .cxd-Form-control { flex: 1; flex-wrap: wrap; font-size: var(--fontSizeLg); min-width: 0; } .cxd-Form-item .cxd-Form-value .cxd-ColorPicker > input, .cxd-Form-item .cxd-Form-control .cxd-ColorPicker > input { height: 100%; } .cxd-Form-item .cxd-Form-value .cxd-ResultBox, .cxd-Form-item .cxd-Form-control .cxd-ResultBox { height: 100%; } .cxd-Form-item .cxd-Form-value .cxd-ResultBox .cxd-ResultBox-value-wrap, .cxd-Form-item .cxd-Form-control .cxd-ResultBox .cxd-ResultBox-value-wrap { justify-content: flex-start; text-align: left; flex-wrap: nowrap; } .cxd-Form-item .cxd-Form-value.is-disabled > .cxd-TextControl-input, .cxd-Form-item .cxd-Form-control.is-disabled > .cxd-TextControl-input { background: transparent; } .cxd-Form-item .cxd-SelectControl.cxd-Form-control { overflow: hidden; } .cxd-Form-item .cxd-Form-hint, .cxd-Form-item .cxd-Form-remark, .cxd-Form-item .cxd-Form-group--hor .cxd-Form-item, .cxd-Form-item .cxd-SwitchControl, .cxd-Form-item .cxd-CheckboxControl, .cxd-Form-item .cxd-RadiosControl, .cxd-Form-item .cxd-CheckboxesControl { padding-top: 0; padding-bottom: 0; } .cxd-Form-item .cxd-SwitchControl, .cxd-Form-item .cxd-TransferControl, .cxd-Form-item .cxd-TagControl, .cxd-Form-item .cxd-CheckboxControl, .cxd-Form-item .cxd-TreeSelectControl, .cxd-Form-item .cxd-NestedSelectControl, .cxd-Form-item .cxd-TabsTransferControl { padding-top: 0.1875rem; } .cxd-Form-item--inline { margin-right: 0; } .cxd-Form-item .cxd-Form-item-controlBox { min-width: 0; min-height: 0; flex: 1; max-width: -moz-available; max-width: -webkit-fill-available; max-width: fill-available; } .cxd-Form-item .cxd-Form-static .cxd-Progress { margin-top: 0.1875rem; } .cxd-Form-item .cxd-Form-static .cxd-Field-quickEditBtn { vertical-align: baseline; } .cxd-Form-item .cxd-Form-group--horizontal .cxd-TextControl-input input { height: var(--Form-input-height); } .cxd-Form-item .cxd-Form-hint { font-size: var(--fontSizeBase); margin-left: 0; color: var(--text--muted-color); } .cxd-Form-item .cxd-TextControl-placeholder { top: 0; } .cxd-Form-item .cxd-Form-static { min-height: 0; } .cxd-Form-item .cxd-Form-description, .cxd-Form-item .cxd-Form-feedback { font-size: var(--fontSizeBase); } .cxd-Form-item .cxd-InputGroup .cxd-Select, .cxd-Form-item .cxd-InputGroup .cxd-InputGroup-btn .cxd-Button { border: none; } .cxd-Form-item .cxd-InputGroup > .cxd-TextControl-input input { height: var(--Form-input-height); } .cxd-Form-item .cxd-ColorPicker { padding: 0; border: none; } .cxd-Form-item .cxd-ColorPicker .cxd-ColorPicker-arrow { display: none; } .cxd-Form-item .cxd-Form-group--hor .cxd-Form-item .cxd-Button { margin-bottom: var(--gap-xs); } .cxd-Form-item .cxd-TextareaControl > textarea, .cxd-Form-item .cxd-Form-control > .cxd-TextControl-input, .cxd-Form-item .cxd-TextControl.is-focused > .cxd-TextControl-input { border: none; padding: 0 var(--Form-input-paddingX) 0 0; box-shadow: none; border-radius: 0; } .cxd-Form-item .cxd-TextareaControl > textarea:hover, .cxd-Form-item .cxd-TextareaControl > textarea:focus, .cxd-Form-item .cxd-TextareaControl > textarea.active, .cxd-Form-item .cxd-Form-control > .cxd-TextControl-input:hover, .cxd-Form-item .cxd-Form-control > .cxd-TextControl-input:focus, .cxd-Form-item .cxd-Form-control > .cxd-TextControl-input.active, .cxd-Form-item .cxd-TextControl.is-focused > .cxd-TextControl-input:hover, .cxd-Form-item .cxd-TextControl.is-focused > .cxd-TextControl-input:focus, .cxd-Form-item .cxd-TextControl.is-focused > .cxd-TextControl-input.active { border: none; outline: none; outline-style: none; } .cxd-Form-item .cxd-Form-control > .cxd-TextControl-input--multiple { padding: 0; min-height: 0; } .cxd-Form-groupColumn { margin-bottom: 0; } .cxd-Form-item.is-placeholder::after { display: none; } .cxd-Tabs-pane { padding: 0; } .cxd-Form-item .cxd-Form-groupColumn > .cxd-Form-item { padding-bottom: var(--Form-input-paddingX); } .cxd-Form-groupColumn { position: relative; } .cxd-Form-groupColumn::after { position: absolute; box-sizing: border-box; content: " "; pointer-events: none; right: 0; bottom: 0; left: 0; border-bottom: var(--Form-input-borderWidth) solid var(--borderColor); } .cxd-Form-groupColumn:nth-last-of-type(1)::after { display: none; } .cxd-Form-flexInner { display: flex; flex-wrap: nowrap; width: 100%; } .cxd-Form-flexInner > .cxd-Form-label { display: inline-block; vertical-align: top; padding-top: var(--Form-label-paddingTop); padding-right: var(--Form-row-gutterWidth); flex: 1; min-width: 0; padding-top: 0; } .cxd-Form-flexInner > .cxd-Form-control { flex: 1; } .cxd-Form-flexInner--label-top { flex-direction: column; } .cxd-Form-flexInner--label-top > .cxd-Form-label { margin-bottom: 0.625rem; } .cxd-Form-flexInner--label-left > .cxd-Form-label { text-align: left; } .cxd-Form-flexInner--label-right > .cxd-Form-label { text-align: right; } } .cxd-Autofill-popOver { border: none; min-width: 20rem; max-width: 40rem; } .cxd-Autofill-popOver > .cxd-Panel { margin: 0; } .cxd-UserSelect { position: relative; } .cxd-UserSelect-popup { height: 100vh; } .cxd-UserSelect-popup .cxd-PopUp-content { overflow-x: hidden; } .cxd-UserSelect-selectPopup { width: 100vw; height: 100vh; z-index: var(3000)1; } .cxd-UserSelect-searchBox { height: 3.25rem; padding: 0 1rem; flex: none; display: flex; align-items: center; background: var(--white); } .cxd-UserSelect-search { background: var(--UserSelect--content-bg); min-width: 0; min-height: 0; flex: 1; } .cxd-UserSelect-searchResult { width: 100vw; min-width: 0; min-height: 0; flex: 1; overflow-x: hidden; overflow-y: auto; background: var(--UserSelect--content-bg); margin-bottom: 1rem; } .cxd-UserSelect-wrap { width: 100%; height: 100%; display: flex; flex-direction: column; text-align: left; margin-bottom: 1rem; background: var(--UserSelect--content-bg); } .cxd-UserSelect-footer { background: var(--white); padding: 0.625rem 1rem 0; } .cxd-UserSelect-footer .cxd-Button { width: 100%; border-radius: 0.25rem; line-height: 2.75rem; font-size: 1rem; font-weight: 400; } .cxd-UserSelect-navbar { position: relative; height: 44px; display: flex; align-items: center; justify-content: space-between; background: var(--white); padding-left: 0.75rem; padding-right: 1rem; flex: none; } .cxd-UserSelect-navbar-title { position: absolute; left: 50%; top: 0; transform: translateX(-50%); line-height: 44px; text-align: center; font-size: 1.125rem; font-weight: 500; } .cxd-UserSelect-navbar-btnEdit { color: var(--primary); font-size: 1rem; } .cxd-UserSelect-breadcrumb { width: 100%; line-height: 2.75rem; padding-left: 1rem; flex: none; white-space: nowrap; overflow-x: auto; background: var(--white); } .cxd-UserSelect-breadcrumb-item { cursor: pointer; color: var(--primary); font-size: 0.875rem; } .cxd-UserSelect-breadcrumb-item:last-child { color: #5e626a; } .cxd-UserSelect-breadcrumb-separator { margin: 0 0.5rem; transform: rotate(-90deg) scale(0.5); } .cxd-UserSelect-contentBox { width: 100vw; overflow: hidden; position: relative; min-width: 0; min-height: 0; flex: 1; background: var(--UserSelect--content-bg); margin-top: 1rem; margin-bottom: 1rem; } .cxd-UserSelect-scroll { height: 100%; display: flex; position: absolute; left: 0; top: 0; transition: left var(--animation-duration) ease-in-out; } .cxd-UserSelect-memberList-box { width: 100vw; } .cxd-UserSelect-memberList, .cxd-UserSelect-selection { height: 100%; list-style: none; margin: 0 1rem; padding: 0.5rem 1rem; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; background: var(--white); border-radius: 0.25rem; } .cxd-UserSelect-memberList li, .cxd-UserSelect-selection li { display: flex; justify-content: space-between; align-items: center; height: 3rem; line-height: 3rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; border-bottom: 0.0625rem solid var(--UserSelect--border-color); } .cxd-UserSelect-memberList li > span, .cxd-UserSelect-selection li > span { min-width: 0; min-height: 0; flex: 1; } .cxd-UserSelect-selection { margin: 0; padding: 0; } .cxd-UserSelect-selection li { padding: 0; } .cxd-UserSelect-memberName { font-size: 14px; min-width: 0; min-height: 0; flex: 2 !important; text-align: left; -webkit-user-select: none; -moz-user-select: none; user-select: none; display: flex; align-items: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .cxd-UserSelect-memberName .option-avatar-txt { width: 1.75rem; height: 1.75rem; display: flex; justify-content: center; align-items: center; border-radius: 100%; margin-right: 0.75rem; background-color: #528eff; color: #fff !important; border: 1px solid #eee; } .cxd-UserSelect-memberName .option-avatar-txt.avatar-2 { width: 2rem; height: 2rem; } .cxd-UserSelect-memberName .option-avatar-img { width: 1.75rem; height: 1.75rem; margin-right: 0.75rem; border-radius: 100%; } .cxd-UserSelect-memberName .option-avatar-img.avatar-2 { width: 2rem; height: 2rem; } .cxd-UserSelect-memberName .option-fields { min-width: 0; min-height: 0; flex: 1; line-height: 1.125rem; } .cxd-UserSelect-memberName .option-fields .option-item { margin-right: 0.625rem; } .cxd-UserSelect-memberName .option-fields .option-item:first-child { color: var(--body-color); font-size: var(--Form-fontSize); } .cxd-UserSelect-memberName .option-fields .option-item:nth-child(2n) { margin-top: 0.25rem; } .cxd-UserSelect-memberName .option-fields .option-item:last-child { display: block; font-size: 12px; color: #84868c; } .cxd-UserSelect-icon-box { width: 1.75rem; height: 1.75rem; border-radius: 100%; overflow: hidden; color: #fff; display: flex; align-items: center; justify-content: center; } .cxd-UserSelect-icon-box > svg { position: static; } .cxd-UserSelect-icon-box.role { background-color: var(--UserSelect--role-bg); } .cxd-UserSelect-icon-box.department { background-color: var(--UserSelect--department-bg); } .cxd-UserSelect-icon-box.post { background-color: var(--UserSelect--post-bg); } .cxd-UserSelect-userPic { width: 1.75rem; height: 1.75rem; border-radius: 100%; overflow: hidden; } .cxd-UserSelect-userPic-box { width: 1.75rem; margin-right: 0.625rem; flex: none !important; display: flex; align-items: center; } .cxd-UserSelect-text-userPic { display: flex; justify-content: center; align-items: center; background-color: var(--UserSelect--post-bg); text-align: center; line-height: 1.75rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; overflow: hidden; color: var(--white); margin: 0; } .cxd-UserSelect-more { text-align: right; } .cxd-UserSelect-more svg { width: 10px; height: 10px; transform: rotateZ(-90deg); } .cxd-UserSelect-resultBox { width: 100vw; height: 3rem; display: flex; align-items: center; padding: 0 1rem; flex: none; overflow: hidden; box-sizing: border-box; background: var(--white); position: relative; } .cxd-UserSelect-resultBox-shadow { position: absolute; right: 3.125rem; top: 0.625rem; width: 0.625rem; height: 1.625rem; background: rgba(255, 255, 255, 0.5); } .cxd-UserSelect-selectNum { flex: none; } .cxd-UserSelect-selectList { width: 100%; min-width: 0; min-height: 0; flex: 1; padding: 0; overflow-x: scroll; white-space: nowrap; cursor: pointer; display: flex; align-items: center; } .cxd-UserSelect-selectList-item { list-style: none; margin-right: 0.5rem; display: flex; align-items: center; background: var(--UserSelect--border-color); border-radius: 4px; padding: 0 0.5rem; padding-right: 0; } .cxd-UserSelect-selectList-item-closeBox { height: 100%; margin-left: 0.25rem; padding: 0 0.375rem; display: flex; align-items: center; } .cxd-UserSelect-selectList-item-closeBox .icon { font-size: 8px; } .cxd-UserSelect-selectSort-box { padding: 0.25rem 0.625rem; position: relative; } .cxd-UserSelect-selectSort-box::after { content: ""; display: block; position: absolute; left: 0; top: 0; filter: blur(5px); } .cxd-UserSelect-noRecord { width: 100vw; height: 100%; margin: 0 1rem; display: flex; align-items: center; justify-content: center; background: var(--white); padding: 6.25rem 0; box-sizing: border-box; border-radius: 0.25rem; } .cxd-UserSelect-selectList-pop { margin: 0; padding: 0 10px; } .cxd-UserSelect-selectList-pop li { height: 40px; display: flex; align-items: center; } .cxd-UserSelect-btnSure { flex: none; } .cxd-UserSelect-del { text-align: right; flex: none !important; padding: 0 10px 0 0; } .cxd-UserSelect-dragBar { flex: none; margin-right: 10px; } .cxd-UserSelect-checkContent li > label { flex: 1 !important; } .cxd-UserSelect-selectBody { width: 100%; background: var(--UserSelect--content-bg); display: flex; flex-direction: column; } .cxd-UserSelect-searchLoadingBox { min-width: 0; min-height: 0; flex: 1; width: 100vw; height: 100%; display: flex; align-items: center; justify-content: center; } .cxd-UserSelect-spinnerBox { width: 100vw; height: 100%; display: flex; align-items: center; justify-content: center; } .cxd-UserSelect-selectList-box { margin-top: 1rem; background: var(--white); border-radius: 4px; padding: 0 1rem; margin: 1rem; min-width: 0; min-height: 0; flex: 1; overflow-y: auto; } .cxd-UserSelect-selectList-box .cxd-UserSelect-noRecord { width: auto; } .cxd-UserSelect-select-head { height: 3rem; display: flex; align-items: center; justify-content: space-between; } .cxd-UserSelect-select-head-text { font-size: 1rem; color: #151b26; font-weight: 500; } .cxd-UserSelect-select-head-btnClear { color: var(--primary); font-size: 1rem; font-weight: 400; cursor: pointer; } .cxd-UserSelect .cxd-ResultBox-valueLabel { display: flex; align-items: center; } .cxd-UserSelect .cxd-ResultBox-placeholder { text-align: right; } .cxd-UserSelect-avatar-img { width: 1.375rem; height: 1.375rem; border-radius: 50%; margin-right: 0.625rem; } .cxd-UserSelect-h2 { height: 4.125rem !important; line-height: 4.125rem !important; } .cxd-UserSelect-avatar-text { display: flex; font-size: 0.75rem; justify-content: center; align-items: center; width: 1.375rem; height: 1.375rem; border-radius: 50%; background-color: #528eff; color: #fff !important; margin-right: 0.625rem; border: 1px solid #eee; } .cxd-UserTabSelect-popup { width: 100vw; height: 100vh; border: none; } .cxd-UserTabSelect-popup .cxd-PopUp-content { overflow-x: hidden; } .cxd-UserTabSelect-wrap { display: flex; flex-direction: column; } .cxd-UserTabSelect .cxd-UserSelect-wrap { height: calc(100% - 16px); } .cxd-UserTabSelect-footer { padding: 1rem 1rem 0; background: var(--white); } .cxd-UserTabSelect-footer .cxd-Button { width: 100%; border-radius: 0.25rem; line-height: 2.75rem; font-size: 1rem; font-weight: 400; } .cxd-UserTabSelect-tabs { min-width: 0; min-height: 0; flex: 1; display: flex; flex-direction: column; } .cxd-UserTabSelect-tabs .cxd-Tabs-links > li { border-style: none !important; } .cxd-UserTabSelect-tabs .cxd-Tabs-links > li a { font-weight: 400 !important; color: #303540 !important; font-size: 1rem !important; } .cxd-UserTabSelect-tabs .cxd-Tabs-links > li.is-active { position: relative; } .cxd-UserTabSelect-tabs .cxd-Tabs-links > li.is-active a { font-weight: 500 !important; color: var(--primary) !important; } .cxd-UserTabSelect-tabs .cxd-Tabs-links > li.is-active::after { content: ""; display: block; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 2rem; height: 0.125rem; background: var(--primary); } .cxd-UserTabSelect-tabs .cxd-Tabs-content { border: none; background-color: var(--UserSelect--content-bg); } .cxd-UserTabSelect-tabs > div:first-child { flex: none; } .cxd-UserTabSelect-tabs > div:last-child { min-width: 0; min-height: 0; flex: 1; } .cxd-UserTabSelect-tabs > div:last-child > div { height: 100%; } .cxd-UserTabSelect-tabs > div:last-child > div > div { height: 100%; } @media (max-width: 767px) { .cxd-UserSelect { overflow: hidden; } } .cxd-InputTable-UI .cxd-Table-contentWrap.is-fixed { overflow: auto; } .cxd-InputTable-UI table { text-align: left; position: relative; border-collapse: collapse; } .cxd-InputTable-UI table thead > tr > th { position: sticky; top: 0; z-index: 900; /* 遮挡一下 tbody */ } .cxd-AnchorNav { display: flex; height: 25rem; } .cxd-AnchorNav--vertical .cxd-AnchorNav-link-wrap { margin: 0; padding: 0; width: var(--Tabs--vertical-width); border-left: var(--AnchorNav-links-container-borderRight); padding-bottom: 3.75rem; } .cxd-AnchorNav--vertical .cxd-AnchorNav-link-wrap > .cxd-AnchorNav-link { position: relative; display: block; } .cxd-AnchorNav--vertical .cxd-AnchorNav-link-wrap > .cxd-AnchorNav-link.cxd-AnchorNav-link-child { margin-left: 1rem; } .cxd-AnchorNav--vertical .cxd-AnchorNav-link-wrap > .cxd-AnchorNav-link > a { display: block; border: var(--Tabs-borderWidth) solid transparent; border-width: var(--AnchorNav-onActive-borderWidth); color: var(--Tabs-color); padding: 0 var(--gap-sm); padding-left: 0.625rem; font-size: var(--fontSizeSm); outline: none; text-align: left; text-decoration: none; cursor: pointer; margin: 0; margin-left: -0.125rem; height: 2rem; line-height: 2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: var(--Tabs--vertical-width); } .cxd-AnchorNav--vertical .cxd-AnchorNav-link-wrap > .cxd-AnchorNav-link > a:hover { color: var(--primary); } .cxd-AnchorNav--vertical .cxd-AnchorNav-link-wrap > .cxd-AnchorNav-link > a:active { color: #144bcc; } .cxd-AnchorNav--vertical .cxd-AnchorNav-link-wrap > .cxd-AnchorNav-link.is-active > a { color: var(--primary); border-color: var(--primary); } .cxd-AnchorNav--vertical .cxd-AnchorNav-link-wrap > .cxd-AnchorNav-link.is-active > a:hover { color: #528eff; border-color: #528eff; } .cxd-AnchorNav--vertical .cxd-AnchorNav-link-wrap > .cxd-AnchorNav-link.is-active > a:active { color: #144bcc; border-color: #144bcc; } .cxd-AnchorNav--horizontal { flex-direction: column; } .cxd-AnchorNav--horizontal .cxd-AnchorNav-link-wrap { -webkit-user-select: none; -moz-user-select: none; user-select: none; margin: 0px; padding: 0px; border-bottom: var(--Tabs-borderWidth) solid var(--Tabs-borderColor); list-style: none; } .cxd-AnchorNav--horizontal .cxd-AnchorNav-link-wrap > .cxd-AnchorNav-link { margin-bottom: calc(var(--Tabs-borderWidth) * -1); display: inline-block; position: relative; } .cxd-AnchorNav--horizontal .cxd-AnchorNav-link-wrap > .cxd-AnchorNav-link > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: var(--Tabs--vertical-width); } .cxd-AnchorNav--horizontal .cxd-AnchorNav-link-wrap > .cxd-AnchorNav-link > a:first-child { font-size: var(--Tabs-linkFontSize); outline: 0; border: var(--Tabs-borderWidth) solid transparent; border-width: 0 0 2px 0; border-top-left-radius: var(--Tabs-borderRadius); border-top-right-radius: var(--Tabs-borderRadius); color: var(--Tabs-color); margin: var(--Tabs-linkMargin); padding: var(--Tabs-linkPadding); text-decoration: none; cursor: pointer; display: block; } .cxd-AnchorNav--horizontal .cxd-AnchorNav-link-wrap > .cxd-AnchorNav-link > a:first-child:hover, .cxd-AnchorNav--horizontal .cxd-AnchorNav-link-wrap > .cxd-AnchorNav-link > a:first-child:focus { color: var(--primary); background: transparent; border-color: transparent; } .cxd-AnchorNav--horizontal .cxd-AnchorNav-link-wrap > .cxd-AnchorNav-link:last-child > a { margin: 0; } .cxd-AnchorNav--horizontal .cxd-AnchorNav-link-wrap > .cxd-AnchorNav-link.is-active > a:first-child, .cxd-AnchorNav--horizontal .cxd-AnchorNav-link-wrap > .cxd-AnchorNav-link.is-active > a:first-child:hover, .cxd-AnchorNav--horizontal .cxd-AnchorNav-link-wrap > .cxd-AnchorNav-link.is-active > a:first-child:focus { font-size: var(--Tabs-linkFontSize); border-width: 0 0 2px 0; border-color: var(--Tabs--line-onHover-borderColor); color: var(--primary); background: transparent; } .cxd-AnchorNav-section-wrap { border: none; flex-grow: 1; overflow: auto; scroll-behavior: smooth; background: var(--Tabs-content-bg); position: relative; } .cxd-AnchorNav-section-wrap > .cxd-AnchorNav-section { display: block; padding: var(--gap-base); } .cxd-Markdown strong { font-weight: bolder; } .cxd-Markdown img { border-style: none; } .cxd-Markdown svg:not(:root) { overflow: hidden; } .cxd-Markdown button:-moz-focusring, .cxd-Markdown [type=button]:-moz-focusring, .cxd-Markdown [type=reset]:-moz-focusring, .cxd-Markdown [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } .cxd-Markdown [type=checkbox] { box-sizing: border-box; padding: 0; } .cxd-Markdown table { border-spacing: 0; border-collapse: collapse; } .cxd-Markdown table td, .cxd-Markdown table th { padding: 0; } .cxd-Markdown hr { height: 0; margin: 15px 0; overflow: hidden; background: transparent; border: 0; border-bottom: 1px solid #ddd; } .cxd-Markdown hr::before { display: table; content: ""; } .cxd-Markdown hr::after { display: table; clear: both; content: ""; } .cxd-Markdown p { margin-top: 0; margin-bottom: 10px; } .cxd-Markdown blockquote { margin: 0; } .cxd-Markdown ul, .cxd-Markdown ol { padding-left: 0; margin-top: 0; margin-bottom: 0; } .cxd-Markdown ol ol, .cxd-Markdown ul ol { list-style-type: lower-roman; } .cxd-Markdown ul ul ol, .cxd-Markdown ul ol ol, .cxd-Markdown ol ul ol, .cxd-Markdown ol ol ol { list-style-type: lower-alpha; } .cxd-Markdown dd { margin-left: 0; } .cxd-Markdown p, .cxd-Markdown blockquote, .cxd-Markdown ul, .cxd-Markdown ol, .cxd-Markdown dl, .cxd-Markdown table, .cxd-Markdown pre { margin-top: 0; margin-bottom: 16px; } .cxd-Markdown hr { height: 4px; padding: 0; margin: 16px 0; background-color: #e7e7e7; border: 0 none; } .cxd-Markdown ul:not(.dropdown-menu):not(.nav), .cxd-Markdown ol { padding-left: 2em; } .cxd-Markdown ul ul, .cxd-Markdown ul ol, .cxd-Markdown ol ol, .cxd-Markdown ol ul { margin-top: 0; margin-bottom: 0; } .cxd-Markdown li > p { margin-top: 16px; } .cxd-Markdown dl { padding: 0; } .cxd-Markdown dl dt { padding: 0; margin-top: 16px; font-size: 1em; font-style: italic; font-weight: bold; } .cxd-Markdown dl dd { padding: 0 16px; margin-bottom: 16px; } .cxd-Markdown blockquote { padding: 0 15px; color: #777; border-left: 4px solid #ddd; } .cxd-Markdown blockquote > :first-child { margin-top: 0; } .cxd-Markdown blockquote > :last-child { margin-bottom: 0; } .cxd-Markdown table { display: block; width: 100%; overflow: auto; word-break: normal; } .cxd-Markdown table th { font-weight: bold; } .cxd-Markdown table th, .cxd-Markdown table td { padding: 6px 13px; border: 1px solid #ddd; } .cxd-Markdown table tr { background-color: #fff; border-top: 1px solid #ccc; } .cxd-Markdown table tr:nth-child(2n) { background-color: #f8f8f8; } @media (min-width: 1200px) { .cxd-Markdown img { max-width: 800px; } } .cxd-Markdown code { padding: 0; padding-top: 0.2em; padding-bottom: 0.2em; margin: 0; background-color: rgba(0, 0, 0, 0.04); border-radius: 3px; } .cxd-Markdown code:before, .cxd-Markdown code:after { letter-spacing: -0.2em; content: " "; } .cxd-Markdown pre > code { padding: 0; margin: 0; word-break: normal; white-space: pre; background: transparent; border: 0; } .cxd-Markdown .highlight { margin-bottom: 16px; } .cxd-Markdown .highlight pre, .cxd-Markdown pre { padding: 16px; overflow: auto; line-height: 1.45; background-color: #f7f7f7; border-radius: 3px; } .cxd-Markdown .highlight pre { margin-bottom: 0; word-break: normal; } .cxd-Markdown pre { word-wrap: normal; } .cxd-Markdown pre code { display: inline; max-width: initial; padding: 0; margin: 0; overflow: initial; line-height: inherit; word-wrap: normal; background-color: transparent; border: 0; } .cxd-Markdown pre code:before, .cxd-Markdown pre code:after { content: normal; } .cxd-Markdown kbd { display: inline-block; padding: 3px 5px; line-height: 10px; color: #555; vertical-align: middle; background-color: #fcfcfc; border: solid 1px #ccc; border-bottom-color: #bbb; border-radius: 3px; box-shadow: inset 0 -1px 0 #bbb; } .cxd-Markdown hr { border-bottom-color: #eee; } .cxd-Link.is-disabled { cursor: not-allowed; color: var(--link-disabled-color); font-size: var(--link-disabled-fontSize); font-weight: var(--link-disabled-fontWeight); -webkit-text-decoration: var(--link-disabled-text-decoration); text-decoration: var(--link-disabled-text-decoration); font-style: var(--link-disabled-font-style); background-color: var(--link-disabled-bg-color); } .cxd-Link i { font-size: var(--link-icon-size); margin: 0 var(--link-icon-margin); } .cxd-Link svg { height: var(--link-icon-size); width: var(--link-icon-size); margin: 0 var(--link-icon-margin); display: inline-block; vertical-align: text-top; } .cxd-MappingField { margin-right: var(--gap-xs); } .cxd-MappingField:last-child { margin-right: 0; } .cxd-FormulaEditor { overflow: visible; max-width: 100%; box-sizing: content-box; min-height: 28.125rem; /* 变量列表 */ /* 函数列表 */ } .cxd-FormulaEditor-content { flex: 1; height: 100%; max-width: 33.125rem; min-width: 0; border-top: var(--Form-input-borderWidth) solid var(--Form-input-borderColor); border-bottom: var(--Form-input-borderWidth) solid var(--Form-input-borderColor); display: flex; flex-direction: column; } .cxd-FormulaEditor-runPanel { height: 12.5rem; transition: height 0.1s ease-out; border-top: 1px solid var(--Form-input-borderColor); display: flex; flex-wrap: nowrap; flex-direction: row; } .cxd-FormulaEditor-runPanel.in { height: 0; overflow: hidden; } .cxd-FormulaEditor-runPanel-context, .cxd-FormulaEditor-runPanel-result { flex: 1; min-width: 0; display: flex; flex-direction: column; } .cxd-FormulaEditor-runPanel-context > header, .cxd-FormulaEditor-runPanel-result > header { width: 100%; height: 1.875rem; line-height: 1.875rem; padding: 0 0.625rem; box-sizing: border-box; background: var(--InputFormula-header-bgColor); border-radius: var(--borderRadius) var(--borderRadius) 0 0; border-bottom: none; font-weight: 500; margin: 0; } .cxd-FormulaEditor-runPanel-context > div, .cxd-FormulaEditor-runPanel-result > div { flex: 1; min-height: 0; font-size: 12px; } .cxd-FormulaEditor-runPanel-context { border-right: 1px solid var(--Form-input-borderColor); } .cxd-FormulaEditor-runPanel-result > div { padding: 0 0.625rem; } .cxd-FormulaEditor-runPanel-result.is-error { color: var(--Form-input-onError-borderColor); } .cxd-FormulaEditor-header { width: 100%; height: 1.875rem; line-height: 1.875rem; padding: 0 0.625rem; box-sizing: border-box; background: var(--InputFormula-header-bgColor); border-radius: var(--borderRadius) var(--borderRadius) 0 0; border-bottom: none; font-weight: 500; } .cxd-FormulaEditor-header-toolbar { font-size: 12px; float: right; } .cxd-FormulaEditor-header-toolbar > span { margin-right: 5px; } .cxd-FormulaEditor-editor { flex: 1; min-height: 0; padding: 0.3125rem; padding-right: 0; } .cxd-FormulaEditor-editor::-webkit-scrollbar { width: 6px; height: 6px; } .cxd-FormulaEditor-editor::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(0, 0, 0, 0.3); } .cxd-FormulaEditor-editor .CodeMirror { width: 100%; height: 100%; } .cxd-FormulaEditor.is-error .cxd-FormulaEditor-editor { border-color: var(--Form-input-onError-borderColor); } .cxd-FormulaEditor.is-focused .cxd-FormulaEditor-editor { border-color: var(--Form-input-onFocused-borderColor); } .cxd-FormulaEditor-settings { display: flex; flex-flow: row nowrap; align-items: stretch; justify-content: space-between; height: 28.125rem; margin-top: 0.625rem; } .cxd-FormulaEditor-settings.is-mobile { width: 100%; overflow-x: scroll; overflow-y: hidden; } .cxd-FormulaEditor-settings.only-variable { height: 21.875rem; } .cxd-FormulaEditor-panel { display: flex; flex-flow: column nowrap; justify-content: space-between; align-items: stretch; height: 100%; width: 11.75rem; border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor); } .cxd-FormulaEditor-panel-header { width: 100%; height: 1.875rem; line-height: 1.875rem; padding: 0 0.625rem; box-sizing: border-box; background: var(--InputFormula-header-bgColor); border-radius: var(--borderRadius) var(--borderRadius) 0 0; border-bottom: none; font-weight: 500; } .cxd-FormulaEditor-panel-body { flex: 1; min-width: 0; min-height: 0; display: flex; flex-flow: column nowrap; max-height: calc(100% - 30px); overflow: hidden; } .cxd-FormulaEditor-panel-body--tabs { max-height: 100%; } .cxd-FormulaEditor-panel.left { justify-content: normal !important; border-radius: var(--borderRadius) 0 0 var(--borderRadius); } .cxd-FormulaEditor-panel.right { width: 20.625rem; border-radius: 0 var(--borderRadius) var(--borderRadius) 0; } .cxd-FormulaEditor-VariableList { height: 100%; } .cxd-FormulaEditor-VariableList-root { max-height: 100%; } .cxd-FormulaEditor-VariableList-body { display: flex; flex-flow: column nowrap; max-height: 100%; } .cxd-FormulaEditor-VariableList-base { --Form-input-fontSize: var(--fontSizeSm); --gap-sm: 0.625rem; flex: 1; min-width: 0; min-height: 0; max-height: 100%; } .cxd-FormulaEditor-VariableList-base.is-scrollable { overflow-x: auto; overflow-y: auto; max-height: 100% !important; } .cxd-FormulaEditor-VariableList-base.is-scrollable::-webkit-scrollbar { width: 6px; height: 6px; } .cxd-FormulaEditor-VariableList-base.is-scrollable::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(0, 0, 0, 0.3); } .cxd-FormulaEditor-VariableList-searchBox { display: flex; width: auto; flex-shrink: 0; padding: 0.5rem; } .cxd-FormulaEditor-VariableList-searchBox > div { flex: 1; min-width: 0; min-height: 0; font-size: var(--fontSizeSm); height: var(--gap-xl); } .cxd-FormulaEditor-VariableList-tabs { --Tabs--line-fontSize: var(--fontSizeSm); --Tabs--line-active-fontSize: var(--fontSizeSm); --Tabs--line-hover-fontSize: var(--fontSizeSm); --Tabs--line-lineHeight: 30px; --Tabs--line-active-lineHeight: 30px; --Tabs--line-hover-lineHeight: 30px; --Tabs--line-fontWeight: 500; --Tabs--line-active-fontWeight: 500; --Tabs--line-hover-fontWeight: 500; --Tabs--card-linkPadding: 0.3125rem; max-height: 100%; display: flex; flex-flow: column nowrap; justify-content: space-between; } .cxd-FormulaEditor-VariableList-tabs .cxd-Tabs-content { padding: 0; } .cxd-FormulaEditor-VariableList-tabs .cxd-Tabs-content .cxd-FormulaEditor-VariableList-sub .cxd-FormulaEditor-VariableList-body { overflow-y: hidden; } .cxd-FormulaEditor-VariableList-tabs .cxd-Tabs-content .cxd-FormulaEditor-VariableList-sub-FormulaEditor-VariableList-base { overflow-x: hidden; overflow-y: auto; } .cxd-FormulaEditor-VariableList-tabs .cxd-Tabs-content .cxd-FormulaEditor-VariableList-sub-FormulaEditor-VariableList-base::-webkit-scrollbar { width: 6px; height: 6px; } .cxd-FormulaEditor-VariableList-tabs .cxd-Tabs-content .cxd-FormulaEditor-VariableList-sub-FormulaEditor-VariableList-base::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(0, 0, 0, 0.3); } .cxd-FormulaEditor-VariableList-tabs .cxd-Tabs-linksContainer-wrapper { width: 100%; height: 1.875rem; line-height: 1.875rem; padding: 0 0.625rem; box-sizing: border-box; background: var(--InputFormula-header-bgColor); border-radius: var(--borderRadius) var(--borderRadius) 0 0; border-bottom: none; font-weight: 500; max-height: 1.875rem; min-height: 1.875rem; } .cxd-FormulaEditor-VariableList-tabs .cxd-Tabs-linksContainer-wrapper ul.cxd-Tabs-links > li { height: 30px; line-height: 30px; } .cxd-FormulaEditor-VariableList-tabs .cxd-Tabs-linksContainer-wrapper ul.cxd-Tabs-links > li > a { margin: 0; padding: 0; } .cxd-FormulaEditor-VariableList-tabs .cxd-Tabs-linksContainer--overflow > div { margin: 0; } .cxd-FormulaEditor-VariableList-tabs > div { overflow-x: hidden; overflow-y: auto; flex: 1; min-width: 0; min-height: 0; border-radius: var(--borderRadius); } .cxd-FormulaEditor-VariableList-tabs > div::-webkit-scrollbar { width: 6px; height: 6px; } .cxd-FormulaEditor-VariableList-tabs > div::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(0, 0, 0, 0.3); } .cxd-FormulaEditor-VariableList-tab { padding: 0; } .cxd-FormulaEditor-VariableList-item { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; white-space: nowrap; } .cxd-FormulaEditor-VariableList-item > label { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; width: 0; display: inline-block; min-width: 3.125rem; } .cxd-FormulaEditor-VariableList-item > .icon { cursor: pointer; top: 0; margin-right: 4px; } .cxd-FormulaEditor-VariableList-item .fa-ellipsis-h { margin-right: 0.3125rem; } .cxd-FormulaEditor-VariableList-item .fa-ellipsis-h:hover { color: var(--primary); } .cxd-FormulaEditor-VariableList-item-tag { cursor: auto; vertical-align: middle; text-align: center; padding: 0 0.5rem; border-radius: var(--borderRadius); background: var(--colors-neutral-fill-10); color: var(--colors-neutral-text-2); font-size: var(--fontSizeSm); line-height: 1.5rem; height: 1.5rem; } .cxd-FormulaEditor-VariableList-item-oper { list-style: none; max-width: 14.6875rem; font-size: var(--fontSizeSm); min-width: 100px; padding: 0 5px; margin: 5px; text-align: left; } .cxd-FormulaEditor-VariableList-item-oper li { line-height: 24px; } .cxd-FormulaEditor-VariableList-item-oper li:hover { cursor: pointer; background: var(--Form-select-menu-onHover-bg); } .cxd-FormulaEditor-VariableList .cxd-GroupedSelection { max-height: 100%; } .cxd-FormulaEditor-VariableList .cxd-GroupedSelection-item-tag { line-height: 17px; } .cxd-FormulaEditor-VariableList .cxd-GroupedSelection-itemLabel { font-size: var(--fontSizeSm); } .cxd-FormulaEditor-FuncList { display: flex; flex-flow: column nowrap; height: 100%; } .cxd-FormulaEditor-FuncList-searchBox { display: flex; width: auto; flex-shrink: 0; padding: 0.5rem; } .cxd-FormulaEditor-FuncList-searchBox > div { flex: 1; min-width: 0; min-height: 0; font-size: var(--fontSizeSm); height: var(--gap-xl); } .cxd-FormulaEditor-FuncList-body { flex: 1; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; } .cxd-FormulaEditor-FuncList-body::-webkit-scrollbar { width: 6px; height: 6px; } .cxd-FormulaEditor-FuncList-body::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(0, 0, 0, 0.3); } .cxd-FormulaEditor-FuncList-collapseGroup .cxd-FormulaEditor-FuncList-collapse { border: none; } .cxd-FormulaEditor-FuncList-collapseGroup .cxd-FormulaEditor-FuncList-collapse .cxd-FormulaEditor-FuncList-expandIcon { font-size: var(--fontSizeSm); line-height: var(--fontSizeXl); transform-origin: 0.4375rem 0.5625rem; transition: transform 0.2s; } .cxd-FormulaEditor-FuncList-groupTitle { display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: unset; padding: 0.3125rem 0.625rem; background: transparent; font-size: var(--fontSizeSm); font-weight: bold; } .cxd-FormulaEditor-FuncList-groupBody > div { padding: 5px 0; } .cxd-FormulaEditor-FuncList-item { cursor: pointer; padding: 0 1.875rem; height: var(--gap-xl); line-height: var(--gap-xl); } .cxd-FormulaEditor-FuncList-item.is-active { background: var(--Tree-item-onHover-bg); } .cxd-FormulaEditor-FuncList-doc { display: flex; flex-flow: column nowrap; padding: 0 0.625rem; font-size: 12px; height: 100%; overflow: hidden; } .cxd-FormulaEditor-FuncList-doc pre { white-space: pre-wrap; word-wrap: break-word; border-radius: var(--borderRadius); margin-top: 0; } .cxd-FormulaEditor-FuncList-doc pre code { color: #2468f2; } .cxd-FormulaEditor-FuncList-doc-example { font-size: var(--fontSizeSm) !important; } .cxd-FormulaEditor-FuncList-doc-example th { padding: 0.3125rem !important; font-size: var(--fontSizeSm) !important; } .cxd-FormulaEditor-FuncList-doc-example td { padding: 0.3125rem !important; } .cxd-FormulaEditor-FuncList-doc-desc { color: var(--text--loud-color); overflow-x: hidden; overflow-y: auto; flex: 1; min-width: 0; min-height: 0; } .cxd-FormulaEditor-FuncList-doc-desc::-webkit-scrollbar { width: 6px; height: 6px; } .cxd-FormulaEditor-FuncList-doc-desc::-webkit-scrollbar-thumb { border-radius: 3px; background: rgba(0, 0, 0, 0.3); } .cxd-FormulaEditor-FuncList.withDoc { max-height: 50% !important; } .cxd-FormulaEditor-FuncDoc { height: 300px; overflow: hidden; background: var(--InputFormula-code-bgColor); } .cxd-FormulaPicker { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; } .cxd-FormulaPicker-popup { height: 36.25rem; } .cxd-FormulaPicker-popup-inner { width: 100%; box-sizing: border-box; padding: 0 1rem; } .cxd-FormulaPicker-input { flex: 1; min-width: 0; margin-right: 0.625rem; padding-right: 0.25rem; max-width: calc(100% - 2.625rem); } .cxd-FormulaPicker-action { display: flex; justify-content: center; align-items: center; } .cxd-FormulaPicker-icon { top: 0 !important; font-size: var(--InputFormula-icon-size); } .cxd-FormulaPicker-icon:not(:last-child) { margin-right: var(--fontSizeSm); } .cxd-FormulaPicker-icon.is-filled.icon-function.icon { font-size: var(--InputFormula-icon-size) !important; } .cxd-FormulaPicker-ResultBox { padding-right: 10px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .cxd-FormulaPicker-ResultBox span.c-field { background: #007bff; padding: 3px 5px; margin: 0 1px; color: #fff; font-size: 12px; border-radius: 4px; } .cxd-FormulaPicker-ResultBox span.c-func { color: #ae4597; font-weight: bold; line-height: 14px; padding: 0 2px; } .cxd-FormulaPicker.is-input-group { border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor); padding: 0 var(--Form-input-paddingX) 0 0; border-radius: var(--borderRadius); background-color: var(--colors-neutral-fill-11); height: var(--Form-input-height); } .cxd-FormulaPicker.is-input-group.cxd-FormulaPicker--text { padding: var(--Form-input-paddingY) var(--Form-input-paddingX) var(--Form-input-paddingY) 0.3125rem; } .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input { display: flex; align-items: center; background: none; padding: 0; border: 0; margin: 0; margin-right: 0.625rem; max-width: unset; } .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input:focus { border: none; outline: none; box-sizing: none; } .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input-select, .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input-number, .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input-boolean, .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input-date, .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input-time, .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input-datetime { height: var(--InputFormula-input-schema-height); padding-left: var(--Form-input-paddingX); } .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input-number { padding-left: 0; } .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input-number .cxd-Number-handler-wrap { height: unset; /* 避免调节器超出Input框 */ } .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input-custom { border: 0; flex: 1; min-width: 0; } .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input-custom > div { border: 0; padding: 0 0 0 var(--Form-input-paddingX); align-items: center; height: var(--InputFormula-input-schema-height); } .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-input-variable { border: none; min-height: unset; line-height: 1.125rem; padding-top: 0; padding-bottom: 0; } .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-toggler { color: var(--colors-neutral-text-2); } .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-toggler .icon-function { transform: scale(1.3); } .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-toggler .icon-ellipsis-v { transform: rotate(90deg); } .cxd-FormulaPicker.is-input-group .cxd-FormulaPicker-toggler:hover { cursor: pointer; color: var(--colors-brand-5); } .cxd-FormulaCodeEditor .cm-field, .cxd-FormulaCodeEditor .cm-func { border-radius: 3px; color: #fff; } .cxd-FormulaCodeEditor .cm-field { padding: 2px 5px; } .cxd-FormulaCodeEditor .cm-field { background: #28a745; } .cxd-FormulaCodeEditor .cm-func { color: #ae4597; font-weight: bold; line-height: 14px; } .cxd-FormulaCodeEditor .cm-expression { background-color: #007bff; border-radius: 4px; color: #fff; } .cxd-FormulaCodeEditor .cm-error-token { background-position: left bottom; background-repeat: repeat-x; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==); } .cxd-FormulaCodeEditor .CodeMirror-placeholder { color: var(--Form-input-placeholderColor) !important; } .cxd-FormulaCodeEditor .lint-error { color: var(--Form-input-onError-borderColor); } .cxd-FormulaCodeEditor--singleLine { max-width: 100%; line-height: 20px; } .cxd-FormulaCodeEditor--singleLine > .CodeMirror { height: 20px; } .cxd-FormulaCodeEditor--singleLine > .CodeMirror .CodeMirror-hscrollbar, .cxd-FormulaCodeEditor--singleLine > .CodeMirror .CodeMirror-vscrollbar { display: none !important; } .cxd-FormulaCodeEditor--singleLine > .CodeMirror .CodeMirror-sizer { min-height: 20px !important; min-width: auto !important; border-right-width: 0 !important; } .cxd-FormulaCodeEditor--singleLine > .CodeMirror .CodeMirror-scroll { height: 20px; margin: 0; padding: 0; overflow: hidden !important; } .cxd-FormulaCodeEditor--singleLine > .CodeMirror .CodeMirror-sizer + div { height: 0 !important; } .cxd-FormulaCodeEditor--singleLine > .CodeMirror .CodeMirror-lines { padding: 0; } .cxd-InputBox > .cxd-FormulaCodeEditor { flex: 1; min-width: 0; } .cxd-Timeline-vertical { display: flex; flex-flow: column; } .cxd-Timeline-vertical .cxd-TimelineItem { display: flex; min-width: 0; min-height: 0; flex: 1; flex-direction: row; } .cxd-Timeline-vertical .cxd-TimelineItem:last-of-type .cxd-TimelineItem-axle .cxd-TimelineItem-line { display: none; } .cxd-Timeline-vertical .cxd-TimelineItem-axle { position: relative; flex: var(--TimelineItem--axle-flex); } .cxd-Timeline-vertical .cxd-TimelineItem-axle .cxd-TimelineItem-line { position: absolute; height: calc(100% - var(--TimelineItem--left-line-top)); width: var(--TimelineItem--left-line-width); left: var(--TimelineItem--left-line-left); top: var(--TimelineItem--left-line-top); background-color: var(--TimelineItem--line-bg); } .cxd-Timeline-vertical .cxd-TimelineItem-axle .cxd-TimelineItem-line-icon { left: var(--TimelineItem--icon-left-line-left); } .cxd-Timeline-vertical .cxd-TimelineItem-axle .cxd-TimelineItem-round { position: absolute; width: var(--TimelineItem--round-width); height: var(--TimelineItem--round-height); left: var(--TimelineItem--round-left); top: var(--TimelineItem--round-top); background: var(--TimelineItem-round-bg); border-radius: var(--TimelineItem--round-radius); } .cxd-Timeline-vertical .cxd-TimelineItem-axle .cxd-TimelineItem-round--danger { background: var(--Timeline--danger-bg); } .cxd-Timeline-vertical .cxd-TimelineItem-axle .cxd-TimelineItem-round--info { background: var(--Timeline--info-bg); } .cxd-Timeline-vertical .cxd-TimelineItem-axle .cxd-TimelineItem-round--success { background: var(--Timeline--success-bg); } .cxd-Timeline-vertical .cxd-TimelineItem-axle .cxd-TimelineItem-round--warning { background: var(--Timeline--warning-bg); } .cxd-Timeline-vertical .cxd-TimelineItem-axle .cxd-TimelineItem-icon { position: absolute; width: var(--TimelineItem--icon-width); height: var(--TimelineItem--icon-height); left: var(--TimelineItem--icon-left); border-radius: var(--TimelineItem--icon-radius); } .cxd-Timeline-vertical .cxd-TimelineItem-content { padding-bottom: var(--TimelineItem--content-padding-bottom); margin-left: var(--TimelineItem--content-margin-left); } .cxd-Timeline-vertical .cxd-TimelineItem-content .cxd-TimelineItem-time { color: var(--TimelineItem--text-secondary-color); font-size: var(--Timeline-time-fontSize); font-weight: var(--Timeline-time-fontWeight); margin-bottom: var(--TimelineItem--content-time-margin-bottom); } .cxd-Timeline-vertical .cxd-TimelineItem-content .cxd-TimelineItem-title { display: flex; word-break: break-word; color: var(--TimelineItem--text-primary-color); font-size: var(--Timeline-title-fontSize); font-weight: var(--Timeline-title-fontWeight); margin-bottom: var(--TimelineItem--content-title-margin-bottom); } .cxd-Timeline-vertical .cxd-TimelineItem-content .cxd-TimelineItem-title .cxd-PlainField { padding-right: var(--TimelineItem-custem-time-padding-right); } .cxd-Timeline-vertical .cxd-TimelineItem-content .cxd-TimelineItem-title .cxd-Button { margin-left: var(--TimelineItem-custem-button-margin-left); } .cxd-Timeline-vertical .cxd-TimelineItem-content .cxd-TimelineItem-detail .cxd-TimelineItem-detail-button { display: flex; cursor: pointer; align-items: center; font-size: var(--Timeline-detail-label-fontSize); color: var(--TimelineItem--detail-button-color); font-weight: var(--Timeline-detail-label-fontWeight); margin-bottom: var(--TimelineItem--detail-button-margin-bottom); } .cxd-Timeline-vertical .cxd-TimelineItem-content .cxd-TimelineItem-detail .cxd-TimelineItem-detail-arrow { color: var(--Timeline-detail-icon-color); width: var(--TimelineItem-detail-arrow-width); height: var(--TimelineItem-detail-arrow-width); transition: transform var(--animation-duration); } .cxd-Timeline-vertical .cxd-TimelineItem-content .cxd-TimelineItem-detail .cxd-TimelineItem-detail-arrow-top { transform: rotate(180deg); } .cxd-Timeline-vertical .cxd-TimelineItem-content .cxd-TimelineItem-detail .cxd-TimelineItem-detail-visible { display: block; word-break: break-word; border-radius: var(--Timeline-visible-border-radius); font-size: var(--Timeline-detail-content-fontSize); font-weight: var(--Timeline-detail-content-fontWeight); color: var(--Timeline-detail-content-color); padding: var(--TimelineItem-detail-visible-padding); box-shadow: var(--TimelineItem-detail-visible-shadow); } .cxd-Timeline-vertical .cxd-TimelineItem-content .cxd-TimelineItem-detail .cxd-TimelineItem-detail-invisible { display: none; } .cxd-Timeline-vertical.cxd-Timeline-left .cxd-TimelineItem { flex-direction: row-reverse; } .cxd-Timeline-vertical.cxd-Timeline-left .cxd-TimelineItem .cxd-TimelineItem-title { text-align: right; } .cxd-Timeline-vertical.cxd-Timeline-left .cxd-TimelineItem .cxd-TimelineItem-content, .cxd-Timeline-vertical.cxd-Timeline-left .cxd-TimelineItem .cxd-TimelineItem-detail { display: flex; flex-direction: column; align-items: flex-end; } .cxd-Timeline-vertical.cxd-Timeline-alternate .cxd-TimelineItem:nth-child(odd) { flex-direction: row-reverse; max-width: 50%; } .cxd-Timeline-vertical.cxd-Timeline-alternate .cxd-TimelineItem:nth-child(odd) .cxd-TimelineItem-title { text-align: right; } .cxd-Timeline-vertical.cxd-Timeline-alternate .cxd-TimelineItem:nth-child(odd) .cxd-TimelineItem-content, .cxd-Timeline-vertical.cxd-Timeline-alternate .cxd-TimelineItem:nth-child(odd) .cxd-TimelineItem-detail { display: flex; flex-direction: column; align-items: flex-end; } .cxd-Timeline-vertical.cxd-Timeline-alternate .cxd-TimelineItem:nth-child(even) { margin-left: calc(50% - var(--Timeline-alternate-margin-left)); max-width: calc(50% + var(--Timeline-alternate-margin-left)); } .cxd-Timeline-horizontal { display: flex; flex-flow: row; margin-left: 50%; transform: translateX(-50%); } .cxd-Timeline-horizontal .cxd-TimelineItem { display: flex; width: -webkit-fill-available; flex-flow: column; } .cxd-Timeline-horizontal .cxd-TimelineItem:last-of-type .cxd-TimelineItem-axle .cxd-TimelineItem-line { display: none; } .cxd-Timeline-horizontal .cxd-TimelineItem-axle { position: relative; flex: var(--TimelineItem--axle-flex); } .cxd-Timeline-horizontal .cxd-TimelineItem-axle .cxd-TimelineItem-line { position: absolute; height: var(--TimelineItem--left-line-width); width: calc(100% - var(--TimelineItem--left-line-left)); left: var(--TimelineItem--horizontal-left-line-top); top: var(--TimelineItem--left-line-left); background-color: var(--TimelineItem--line-bg); } .cxd-Timeline-horizontal .cxd-TimelineItem-axle .cxd-TimelineItem-round { position: absolute; width: var(--TimelineItem--round-width); height: var(--TimelineItem--round-height); left: var(--TimelineItem--round-top); top: var(--TimelineItem--round-left); background: var(--TimelineItem-round-bg); border-radius: var(--TimelineItem--round-radius); } .cxd-Timeline-horizontal .cxd-TimelineItem-axle .cxd-TimelineItem-round--danger { background: var(--Timeline--danger-bg); } .cxd-Timeline-horizontal .cxd-TimelineItem-axle .cxd-TimelineItem-round--info { background: var(--Timeline--info-bg); } .cxd-Timeline-horizontal .cxd-TimelineItem-axle .cxd-TimelineItem-round--success { background: var(--Timeline--success-bg); } .cxd-Timeline-horizontal .cxd-TimelineItem-axle .cxd-TimelineItem-round--warning { background: var(--Timeline--warning-bg); } .cxd-Timeline-horizontal .cxd-TimelineItem-axle .cxd-TimelineItem-icon { position: absolute; width: var(--TimelineItem--icon-width); height: var(--TimelineItem--icon-height); left: var(--TimelineItem--icon-left); border-radius: var(--TimelineItem--icon-radius); } .cxd-Timeline-horizontal .cxd-TimelineItem-content { margin-top: var(--Timeline-horizontal-content-margin-top); padding-bottom: var(--TimelineItem--content-padding-bottom); margin-left: var(--TimelineItem--content-margin-left); } .cxd-Timeline-horizontal .cxd-TimelineItem-content .cxd-TimelineItem-time { color: var(--TimelineItem--text-secondary-color); font-size: var(--Timeline-time-fontSize); font-weight: var(--Timeline-time-fontWeight); margin-bottom: var(--TimelineItem--content-time-margin-bottom); } .cxd-Timeline-horizontal .cxd-TimelineItem-content .cxd-TimelineItem-title { color: var(--TimelineItem--text-primary-color); font-size: var(--Timeline-title-fontSize); font-weight: var(--Timeline-title-fontWeight); margin-bottom: var(--TimelineItem--content-title-margin-bottom); } .cxd-Timeline-horizontal .cxd-TimelineItem-content .cxd-TimelineItem-detail .cxd-TimelineItem-detail-button { display: flex; cursor: pointer; align-items: center; font-size: var(--Timeline-detail-label-fontSize); color: var(--TimelineItem--detail-button-color); font-weight: var(--Timeline-detail-label-fontWeight); margin-bottom: var(--TimelineItem--detail-button-margin-bottom); } .cxd-Timeline-horizontal .cxd-TimelineItem-content .cxd-TimelineItem-detail .cxd-TimelineItem-detail-arrow { color: var(--Timeline-detail-icon-color); width: var(--TimelineItem-detail-arrow-width); height: var(--TimelineItem-detail-arrow-width); } .cxd-Timeline-horizontal .cxd-TimelineItem-content .cxd-TimelineItem-detail .cxd-TimelineItem-detail-arrow-top { transform: rotateX(180deg); } .cxd-Timeline-horizontal .cxd-TimelineItem-content .cxd-TimelineItem-detail .cxd-TimelineItem-detail-visible { display: block; word-break: break-word; border-radius: var(--Timeline-visible-border-radius); font-size: var(--Timeline-detail-content-fontSize); font-weight: var(--Timeline-detail-content-fontWeight); color: var(--Timeline-detail-content-color); padding: var(--TimelineItem-detail-visible-padding); box-shadow: var(--TimelineItem-detail-visible-shadow); } .cxd-Timeline-horizontal .cxd-TimelineItem-content .cxd-TimelineItem-detail .cxd-TimelineItem-detail-invisible { display: none; } .cxd-BarCode > img { display: block; margin: 0 auto; } .cxd-Tag { display: inline-flex; height: var(--Tag-height); padding: var(--Tag-base-padding); flex-flow: row nowrap; justify-content: center; align-items: center; font-size: var(--Tag-content-fontSize); font-weight: var(--Tag-base-fontWeight); max-width: 160px; transition: all 0.3; border-radius: var(--Tag-borderRadius); background-color: var(--Tag-default-color); color: var(--Tag-fontColor); } .cxd-Tag-text { display: inline-block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; line-height: var(--Tag-height); } .cxd-Tag:not(:last-child) { margin-right: var(--gap-sm); } .cxd-Tag--normal { border-width: var(--Tag-normal-borderWidth); border-radius: var(--Tag-normal-borderRadius); border-color: var(--Tag-normal-borderColor); } .cxd-Tag--normal--hasColor { color: var(--white); } .cxd-Tag--normal--inactive { color: var(--Tag-inactive-color); background: var(--Tag-inactive-bg-color); } .cxd-Tag--normal--active { color: var(--Tag-active-color); background: var(--Tag-active-bg-color); } .cxd-Tag--normal--processing { color: var(--Tag-processing-color); background: var(--Tag-processing-bg-color); } .cxd-Tag--normal--success { color: var(--Tag-success-color); background: var(--Tag-success-bg-color); } .cxd-Tag--normal--error { color: var(--Tag-error-color); background: var(--Tag-error-bg-color); } .cxd-Tag--normal--warning { color: var(--Tag-warning-color); background: var(--Tag-warning-bg-color); } .cxd-Tag--rounded { background-color: var(--white); border-style: var(--Tag-rounded-borderStyle); border-width: var(--Tag-rounded-borderWidth); border-radius: var(--Tag-rounded-borderRadius); border-color: var(--Tag-rounded-borderColor); color: var(--Tag-default-color); line-height: 22px; } .cxd-Tag--rounded--inactive { color: var(--Tag-inactive-bg-color); } .cxd-Tag--rounded--active { color: var(--Tag-active-bg-color); } .cxd-Tag--rounded--processing { color: var(--Tag-processing-bg-color); } .cxd-Tag--rounded--success { color: var(--Tag-success-bg-color); } .cxd-Tag--rounded--error { color: var(--Tag-error-bg-color); } .cxd-Tag--rounded--warning { color: var(--Tag-warning-bg-color); } .cxd-Tag--status { background-color: var(--white); } .cxd-Tag--status--inactive .cxd-Tag--prev { color: var(--Tag-inactive-bg-color); } .cxd-Tag--status--active .cxd-Tag--prev { color: var(--Tag-active-bg-color); } .cxd-Tag--status--processing .cxd-Tag--prev { color: var(--Tag-processing-bg-color); } .cxd-Tag--status--success .cxd-Tag--prev { color: var(--Tag-success-bg-color); } .cxd-Tag--status--error .cxd-Tag--prev { color: var(--Tag-error-bg-color); } .cxd-Tag--status--warning .cxd-Tag--prev { color: var(--Tag-warning-bg-color); } .cxd-Tag--status:not(.cxd-Tag--status--processing):not(.cxd-Tag--status--active) .icon-dot #dotWave { display: none; } .cxd-Tag--prev { color: var(--Tag-default-color); margin-right: var(--Tag-status-margin); } .cxd-Tag--prev i { font-size: 0.5rem; } .cxd-Tag--prev .cxd-Tag-default-icon { width: var(--Tag-status-size); height: var(--Tag-status-size); top: 0; } .cxd-Tag--close { margin-left: var(--Tag-close-margin); cursor: pointer; } .cxd-Tag--close i { font-size: 0.5rem; } .cxd-Tag--close .icon { width: var(--Tag-close-size); height: var(--Tag-close-size); position: inherit; } .cxd-Tag--close:hover { opacity: 0.7; } .cxd-Tag--close:active { opacity: 0.3; } .cxd-Tag--disabled { opacity: 0.3; cursor: not-allowed; } .cxd-Tag--disabled .cxd-Tag--close { cursor: not-allowed; opacity: 0.7; } .cxd-Tag--checkable { background-color: var(--Tag-checkable-bgColor); cursor: pointer; } .cxd-Tag--checkable:hover { background-color: var(--Tag-checkable-bgColor-onHover); } .cxd-Tag--checkable:active { background-color: var(--Tag-checkable-bgColor-onActive); } .cxd-Tag--checkable--disabled { cursor: not-allowed; background-color: var(--Tag-checkable-bgColor-onDisable); color: var(--Tag-checkable-fontColor-onDisable); } .cxd-Tag--checkable--checked:not(.cxd-Tag--checkable--disabled) { color: var(--white); background-color: var(--Tag-checkable-bgColor-onChecked); } .cxd-Tag--checkable--checked:not(.cxd-Tag--checkable--disabled):hover { background-color: var(--Tag-checkable-bgColor-onHover-onChecked); } .cxd-Tag--checkable--checked:not(.cxd-Tag--checkable--disabled):active { background-color: var(--Tag-checkable-bgColor-onActive-onChecked); } .cxd-PullRefresh-wrap { position: relative; height: 100%; } .cxd-PullRefresh-header { position: absolute; left: 0px; width: 100%; text-align: center; transform: translateY(-100%); overflow: hidden; padding: var(--gap-xs) 0; min-height: var(--gap-lg); line-height: var(--gap-lg); color: #999; } .cxd-PullRefresh .loading-icon { animation: var(--Button-animation-spin); margin-right: var(--gap-xs); } .cxd-MultilineText { position: relative; } .cxd-MultilineText-counter, .cxd-MultilineText-display { white-space: pre-line; overflow: hidden; } .cxd-MultilineText-counter { visibility: hidden; position: absolute; width: 100%; z-index: -99; } .cxd-MultilineText-button-wrapper { margin-top: --(gap-xs); text-align: right; } /** * Debug 模块的 UI，由于没法使用任何主题，所以这里使用独立配色风格 */ .AMISDebug { position: fixed; z-index: 4000; top: 0; right: 0; height: 100vh; width: 24px; pointer-events: none; } .AMISDebug h3 { color: inherit; } .AMISDebug .primary { color: #009fff; } .AMISDebug-header { padding: var(--Drawer-header-padding); background: var(--Drawer-header-bg); border-bottom: var(--Drawer-content-borderWidth) solid var(--Drawer-header-borderColor); } .AMISDebug-hoverBox { pointer-events: none; position: absolute; outline: 1px dashed #1c76c4; } .AMISDebug-activeBox { pointer-events: none; position: absolute; outline: 1px #1c76c4; } .AMISDebug-tab { overflow: hidden; border-bottom: 1px solid #3d3d3d; } .AMISDebug-tab > button { color: inherit; background: inherit; float: left; border: none; outline: none; cursor: pointer; padding: var(--gap-sm) var(--gap-md); transition: 0.3s; border-bottom: 1px solid transparent; } .AMISDebug-tab > button:hover { color: #e7e7e7; } .AMISDebug-tab > button.active { color: #e7e7e7; border-bottom-color: #e7e7e7; } .AMISDebug-toggle { pointer-events: all; background: var(--body-bg); position: fixed; top: 50%; right: 0; width: 24px; height: 48px; box-shadow: 0 4px 6px 0 rgba(8, 14, 26, 0.04), 0 1px 10px 0 rgba(8, 14, 26, 0.05), 0 2px 4px -1px rgba(8, 14, 26, 0.06); border-radius: var(--borderRadius) 0 0 var(--borderRadius); padding-top: 14px; padding-left: 6px; cursor: pointer; } .AMISDebug-toggle i { color: var(--text-color); } .AMISDebug-toggle:hover i { color: var(--primary); } .AMISDebug-content { pointer-events: all; display: none; height: 100%; } .AMISDebug-resize { position: absolute; width: 4px; top: 0; left: 0; bottom: 0; cursor: col-resize; } .AMISDebug-resize:hover { background: #75715e; } .AMISDebug-changePosition { position: absolute; font-size: 18px; right: 40px; top: var(--gap-sm); cursor: pointer; } .AMISDebug-close { position: absolute; font-size: 18px; right: var(--gap-sm); top: var(--gap-sm); cursor: pointer; } .AMISDebug.is-expanded { width: 420px; background: #272821; color: #cccccc; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; } .AMISDebug.is-expanded .AMISDebug-toggle { display: none; } .AMISDebug.is-expanded .AMISDebug-content { display: block; } .AMISDebug.is-left { left: 0; } .AMISDebug.is-left .AMISDebug-resize { left: unset; right: 0; } .AMISDebug-log { padding: var(--gap-sm); } .AMISDebug-log button { cursor: pointer; background: #0e639c; flex-grow: 1; box-sizing: border-box; display: inline-flex; justify-content: center; align-items: center; padding: 6px 11px; outline: none; text-decoration: none; color: inherit; max-width: 300px; border: none; } .AMISDebug-log button:hover { background: #1177bb; } .AMISDebug-inspect { padding: var(--gap-sm); } .AMISDebug-log, .AMISDebug-inspect { height: 100%; overflow: auto; scrollbar-width: thin; scrollbar-color: #6b6b6b #2b2b2b; } .AMISDebug-log::-webkit-scrollbar, .AMISDebug-inspect::-webkit-scrollbar { position: relative; z-index: 10; background-color: #2c2c2c; width: 16px; height: 16px; border-left: 1px solid #3d3d3d; } .AMISDebug-log::-webkit-scrollbar-thumb, .AMISDebug-inspect::-webkit-scrollbar-thumb { background: #6b6b6b; background-clip: content-box; border: 4px solid transparent; border-radius: 500px; } .AMISDebug-log::-webkit-scrollbar-thumb:hover, .AMISDebug-inspect::-webkit-scrollbar-thumb:hover { background: #939393; background-clip: content-box; } .AMISDebug-logLine { overflow-x: hidden; } .cxd-Nav-Menu { --Menu-width: var(--Layout-aside-width); --Menu-width--collapsed: var(--Layout-aside-width-collapsed); --Menu-fontSize--collapsed: var(--Nav-item-collapsed-fontSize); --Menu-fontColor-onDisabled: var(--Nav-item-fontColor-onDisabled); --Menu-Submenu-item-paddingX: var(--Nav-Item-Badge-paddingRight); --Menu-light-backgroundColor: var(--Layout-light-backgroundColor); --Menu-light-active-backgroundColor: var(--colors-neutral-fill-8); --Menu-light-backgroundColor-onHover: var(--Layout-light-bgColor-onHover); --Menu-light-fontColor: var(--Layout-light-fontColor); --Menu-light-fontColor-onHover: var(--Layout-fontColor--onHover); --Menu-light-ancestor-fontColor-onActive: var(--Layout-light-fontColor); --Menu-light-fontColor-onActive: var(--Layout-fontColor--onActive); --Menu-light-groupTitle-fontColor: #84868c; --Menu-light-selectedIndicator-color: var(--Layout-fontColor--info); --Menu-dark-backgroundColor: var(--Layout-dark-backgroundColor); --Menu-dark-backgroundColor-onHover: var(--Layout-fontColor--info); --Menu-dark-fontColor: var(--Layout-dark-fontColor); --Menu-dark-fontColor-onHover: var(--Layout-fontColor--onHover); --Menu-dark-fontColor-onActive: var(--Layout-dark-fontColor); --Menu-dark-groupTitle-fontColor: #84868c; --Menu-dark-selectedIndicator-color: var(--Layout-dark-selected-color); outline: none; margin: 0; padding: 0; list-style: none; transition: all 0.3s; width: 100%; } .cxd-Nav-Menu-dark { background-color: var(--Menu-dark-backgroundColor); } .cxd-Nav-Menu-horizontal { display: flex; flex-wrap: nowrap; } .cxd-Nav-Menu-submenu-hidden { display: none; } .cxd-Nav-Menu-overflow-item { flex: none; } .cxd-Nav-Menu-hidden { display: none; } .cxd-Nav-Menu-collapse { overflow: hidden; transition: height 0.3s ease-out; } .cxd-Nav-Menu-collapsed { width: var(--Menu-width--collapsed); } .cxd-Nav-Menu-root.cxd-Nav-Menu-collapsed .cxd-Nav-Menu-item, .cxd-Nav-Menu-root.cxd-Nav-Menu-collapsed .cxd-Nav-Menu-submenu-title { padding: 0; text-align: center; } .cxd-Nav-Menu-item-link { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; font-size: inherit; min-width: 0; min-height: 0; flex: 1; cursor: inherit; font-weight: inherit; } .cxd-Nav-Menu-item-link:hover, .cxd-Nav-Menu-item-link:active { font-size: inherit; } .cxd-Nav-Menu-item-divider { border-bottom: 0.0625rem solid #e6e6e8; } .cxd-Nav-Menu-item-divider-dark { border-bottom: 0.0625rem solid #3a3e47; } .cxd-Nav-Menu-item-icon, .cxd-Nav-Menu-item-icon-after { display: inline-block; zoom: 1; vertical-align: middle; } .cxd-Nav-Menu-item-icon img, .cxd-Nav-Menu-item-icon svg, .cxd-Nav-Menu-item-icon-after img, .cxd-Nav-Menu-item-icon-after svg { width: var(--Tabs-linkFontSize); height: var(--Tabs-linkFontSize); fill: currentColor; } .cxd-Nav-Menu-item-icon i, .cxd-Nav-Menu-item-icon img, .cxd-Nav-Menu-item-icon svg, .cxd-Nav-Menu-item-icon-after i, .cxd-Nav-Menu-item-icon-after img, .cxd-Nav-Menu-item-icon-after svg { float: left; } .cxd-Nav-Menu-item-icon svg, .cxd-Nav-Menu-item-icon-after svg { top: 0; } .cxd-Nav-Menu-item-icon-collapsed { font-size: var(--Menu-fontSize--collapsed); margin: 0 auto; } .cxd-Nav-Menu-item-icon-svg-collapsed { font-size: var(--Menu-fontSize--collapsed); margin: 0 auto; } .cxd-Nav-Menu-item-label { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-Nav-Menu-item-label-collapsed { font-size: var(--Menu-fontSize--collapsed); margin: 0 auto; font-weight: 600; } .cxd-Nav-Menu-item-dragBar { color: var(--Nav-Item-Drag-color); position: absolute; left: 0; visibility: hidden; } .cxd-Nav-Menu-item-group-list { margin: 0; padding: 0; list-style: none; } .cxd-Nav-Menu-item-group-title { color: var(--Menu-light-groupTitle-fontColor); line-height: 1.25rem; padding: 0 var(--Menu-Submenu-item-paddingX) 0 1rem; font-size: 0.75rem; margin: 0.75rem 0 0.25rem 0; } .cxd-Nav-Menu-item-group-title.cxd-Nav-Menu-dark { color: var(--Menu-dark-groupTitle-fontColor); } .cxd-Nav-Menu-item .cxd-Badge, .cxd-Nav-Menu-submenu .cxd-Badge { position: static; overflow: hidden; display: flex; min-width: 0; min-height: 0; flex: 1; } .cxd-Nav-Menu-item .cxd-Nav-Menu-item-wrap, .cxd-Nav-Menu-submenu .cxd-Nav-Menu-item-wrap { display: flex; justify-content: space-between; } .cxd-Nav-Menu-item-extra { position: relative; } .cxd-Nav-Menu-item-extra .cxd-DropDown > .cxd-Button { padding: 0; color: inherit; } .cxd-Nav-Menu-item-extra .cxd-DropDown > .cxd-Button > i { margin: 0; } .cxd-Nav-Menu-inline .cxd-Nav-Menu-item-selected { background-color: var(--Menu-light-active-backgroundColor); color: var(--Menu-light-fontColor-onHover); } .cxd-Nav-Menu-inline .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-label, .cxd-Nav-Menu-inline .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-icon, .cxd-Nav-Menu-inline .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-icon-after, .cxd-Nav-Menu-inline .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-submenu-arrow { color: var(--Menu-light-fontColor-onHover); } .cxd-Nav-Menu-inline .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-label svg, .cxd-Nav-Menu-inline .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-icon svg, .cxd-Nav-Menu-inline .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-icon-after svg, .cxd-Nav-Menu-inline .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-submenu-arrow svg { fill: currentColor; } .cxd-Nav-Menu-inline .cxd-Nav-Menu-item-selected::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; border-right: 0.1875rem solid var(--Menu-light-selectedIndicator-color); transform: scaleY(1); opacity: 1; transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } .cxd-Nav-Menu-inline.cxd-Nav-Menu-dark .cxd-Nav-Menu-item-selected { background-color: var(--Menu-dark-backgroundColor-onHover); color: var(--Menu-dark-fontColor-onActive); } .cxd-Nav-Menu-inline.cxd-Nav-Menu-dark .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-icon, .cxd-Nav-Menu-inline.cxd-Nav-Menu-dark .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-icon-after, .cxd-Nav-Menu-inline.cxd-Nav-Menu-dark .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-label, .cxd-Nav-Menu-inline.cxd-Nav-Menu-dark .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-submenu-arrow { color: var(--Menu-dark-fontColor-onActive); } .cxd-Nav-Menu-inline.cxd-Nav-Menu-dark .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-icon svg, .cxd-Nav-Menu-inline.cxd-Nav-Menu-dark .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-icon-after svg, .cxd-Nav-Menu-inline.cxd-Nav-Menu-dark .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-label svg, .cxd-Nav-Menu-inline.cxd-Nav-Menu-dark .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-submenu-arrow svg { fill: var(--Menu-dark-fontColor-onActive); } .cxd-Nav-Menu-inline.cxd-Nav-Menu-dark .cxd-Nav-Menu-item-selected::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; border-right: 0.1875rem solid var(--Menu-dark-selectedIndicator-color); transform: scaleY(1); opacity: 1; transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); } .cxd-Nav-Menu-vertical.cxd-Nav-Menu-sub { min-width: 10rem; } .cxd-Nav-Menu-item, .cxd-Nav-Menu-submenu-title { margin: 0; position: relative; padding: 0 1rem; display: block; } .cxd-Nav-Menu-item:active, .cxd-Nav-Menu-submenu-title:active { color: var(--Menu-light-fontColor-onActive); } .cxd-Nav-Menu-item:active .cxd-Nav-Menu-item-label, .cxd-Nav-Menu-item:active .cxd-Nav-Menu-item-icon, .cxd-Nav-Menu-item:active .cxd-Nav-Menu-item-icon-after, .cxd-Nav-Menu-item:active .cxd-Nav-Menu-submenu-arrow, .cxd-Nav-Menu-submenu-title:active .cxd-Nav-Menu-item-label, .cxd-Nav-Menu-submenu-title:active .cxd-Nav-Menu-item-icon, .cxd-Nav-Menu-submenu-title:active .cxd-Nav-Menu-item-icon-after, .cxd-Nav-Menu-submenu-title:active .cxd-Nav-Menu-submenu-arrow { color: var(--Menu-light-fontColor-onActive); } .cxd-Nav-Menu-item:active .cxd-Nav-Menu-item-label svg, .cxd-Nav-Menu-item:active .cxd-Nav-Menu-item-icon svg, .cxd-Nav-Menu-item:active .cxd-Nav-Menu-item-icon-after svg, .cxd-Nav-Menu-item:active .cxd-Nav-Menu-submenu-arrow svg, .cxd-Nav-Menu-submenu-title:active .cxd-Nav-Menu-item-label svg, .cxd-Nav-Menu-submenu-title:active .cxd-Nav-Menu-item-icon svg, .cxd-Nav-Menu-submenu-title:active .cxd-Nav-Menu-item-icon-after svg, .cxd-Nav-Menu-submenu-title:active .cxd-Nav-Menu-submenu-arrow svg { fill: currentColor; } .cxd-Nav-Menu-submenu-title { display: flex; align-items: center; justify-content: space-between; } .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-wrap { min-width: 0; min-height: 0; flex: 1; overflow: hidden; } .cxd-Nav-Menu-item-active { color: var(--Menu-light-fontColor-onHover); } .cxd-Nav-Menu-item-active .cxd-Nav-Menu-item-label, .cxd-Nav-Menu-item-active .cxd-Nav-Menu-item-icon, .cxd-Nav-Menu-item-active .cxd-Nav-Menu-item-icon-after, .cxd-Nav-Menu-item-active .cxd-Nav-Menu-submenu-arrow { color: var(--Menu-light-fontColor-onHover); } .cxd-Nav-Menu-item-active .cxd-Nav-Menu-item-label svg, .cxd-Nav-Menu-item-active .cxd-Nav-Menu-item-icon svg, .cxd-Nav-Menu-item-active .cxd-Nav-Menu-item-icon-after svg, .cxd-Nav-Menu-item-active .cxd-Nav-Menu-submenu-arrow svg { fill: currentColor; } .cxd-Nav-Menu-item-active .cxd-Nav-Menu-item-dragBar { visibility: visible; } .cxd-Nav-Menu-item-selected { color: var(--Menu-light-fontColor-onHover); } .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-label, .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-icon, .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-icon-after, .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-submenu-arrow { color: var(--Menu-light-fontColor-onHover); } .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-label svg, .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-icon svg, .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-icon-after svg, .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-submenu-arrow svg { fill: currentColor; } .cxd-Nav-Menu .cxd-Nav-Menu-submenu-active > .cxd-Nav-Menu-submenu-title { color: var(--Menu-light-fontColor-onHover); } .cxd-Nav-Menu .cxd-Nav-Menu-submenu-active > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-label, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-active > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-active > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon-after, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-active > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-submenu-arrow { color: var(--Menu-light-fontColor-onHover); } .cxd-Nav-Menu .cxd-Nav-Menu-submenu-active > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-label svg, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-active > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon svg, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-active > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon-after svg, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-active > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-submenu-arrow svg { fill: currentColor; } .cxd-Nav-Menu .cxd-Nav-Menu-submenu-active > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-dragBar { visibility: visible; } .cxd-Nav-Menu .cxd-Nav-Menu-submenu-selected > .cxd-Nav-Menu-submenu-title { color: var(--Menu-light-fontColor-onHover); } .cxd-Nav-Menu .cxd-Nav-Menu-submenu-selected > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-label, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-selected > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-selected > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon-after, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-selected > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-submenu-arrow { color: var(--Menu-light-fontColor-onHover); } .cxd-Nav-Menu .cxd-Nav-Menu-submenu-selected > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-label svg, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-selected > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon svg, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-selected > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon-after svg, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-selected > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-submenu-arrow svg { fill: currentColor; } .cxd-Nav-Menu-dark .cxd-Nav-Menu-item, .cxd-Nav-Menu-dark .cxd-Nav-Menu-submenu-title { color: var(--Menu-dark-fontColor); } .cxd-Nav-Menu-dark .cxd-Nav-Menu-item .cxd-Nav-Menu-item-icon, .cxd-Nav-Menu-dark .cxd-Nav-Menu-item .cxd-Nav-Menu-item-icon-after, .cxd-Nav-Menu-dark .cxd-Nav-Menu-item .cxd-Nav-Menu-item-label, .cxd-Nav-Menu-dark .cxd-Nav-Menu-item .cxd-Nav-Menu-submenu-arrow, .cxd-Nav-Menu-dark .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon, .cxd-Nav-Menu-dark .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon-after, .cxd-Nav-Menu-dark .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-label, .cxd-Nav-Menu-dark .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-submenu-arrow { color: var(--Menu-dark-fontColor); } .cxd-Nav-Menu-dark .cxd-Nav-Menu-item .cxd-Nav-Menu-item-icon svg, .cxd-Nav-Menu-dark .cxd-Nav-Menu-item .cxd-Nav-Menu-item-icon-after svg, .cxd-Nav-Menu-dark .cxd-Nav-Menu-item .cxd-Nav-Menu-item-label svg, .cxd-Nav-Menu-dark .cxd-Nav-Menu-item .cxd-Nav-Menu-submenu-arrow svg, .cxd-Nav-Menu-dark .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon svg, .cxd-Nav-Menu-dark .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon-after svg, .cxd-Nav-Menu-dark .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-label svg, .cxd-Nav-Menu-dark .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-submenu-arrow svg { fill: var(--Menu-dark-fontColor); } .cxd-Nav-Menu-dark .cxd-Nav-Menu-item-active { background-color: var(--Menu-dark-backgroundColor); color: var(--Menu-dark-fontColor-onHover); } .cxd-Nav-Menu-dark .cxd-Nav-Menu-item-active .cxd-Nav-Menu-item-icon, .cxd-Nav-Menu-dark .cxd-Nav-Menu-item-active .cxd-Nav-Menu-item-icon-after, .cxd-Nav-Menu-dark .cxd-Nav-Menu-item-active .cxd-Nav-Menu-item-label, .cxd-Nav-Menu-dark .cxd-Nav-Menu-item-active .cxd-Nav-Menu-submenu-arrow { color: var(--Menu-dark-fontColor-onHover); } .cxd-Nav-Menu-dark .cxd-Nav-Menu-item-active .cxd-Nav-Menu-item-icon svg, .cxd-Nav-Menu-dark .cxd-Nav-Menu-item-active .cxd-Nav-Menu-item-icon-after svg, .cxd-Nav-Menu-dark .cxd-Nav-Menu-item-active .cxd-Nav-Menu-item-label svg, .cxd-Nav-Menu-dark .cxd-Nav-Menu-item-active .cxd-Nav-Menu-submenu-arrow svg { fill: currentColor; } .cxd-Nav-Menu-dark .cxd-Nav-Menu-item-selected { background-color: var(--Menu-dark-backgroundColor); color: var(--Menu-dark-fontColor-onHover); } .cxd-Nav-Menu-dark .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-icon, .cxd-Nav-Menu-dark .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-icon-after, .cxd-Nav-Menu-dark .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-label, .cxd-Nav-Menu-dark .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-submenu-arrow { color: var(--Menu-dark-fontColor-onHover); } .cxd-Nav-Menu-dark .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-icon svg, .cxd-Nav-Menu-dark .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-icon-after svg, .cxd-Nav-Menu-dark .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-label svg, .cxd-Nav-Menu-dark .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-submenu-arrow svg { fill: currentColor; } .cxd-Nav-Menu-dark .cxd-Nav-Menu-submenu-active > .cxd-Nav-Menu-submenu-title { background-color: var(--Menu-dark-backgroundColor); color: var(--Menu-dark-fontColor-onHover); } .cxd-Nav-Menu-dark .cxd-Nav-Menu-submenu-active > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon, .cxd-Nav-Menu-dark .cxd-Nav-Menu-submenu-active > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon-after, .cxd-Nav-Menu-dark .cxd-Nav-Menu-submenu-active > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-label, .cxd-Nav-Menu-dark .cxd-Nav-Menu-submenu-active > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-submenu-arrow { color: var(--Menu-dark-fontColor-onHover); } .cxd-Nav-Menu-dark .cxd-Nav-Menu-submenu-active > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon svg, .cxd-Nav-Menu-dark .cxd-Nav-Menu-submenu-active > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon-after svg, .cxd-Nav-Menu-dark .cxd-Nav-Menu-submenu-active > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-label svg, .cxd-Nav-Menu-dark .cxd-Nav-Menu-submenu-active > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-submenu-arrow svg { fill: currentColor; } .cxd-Nav-Menu-dark .cxd-Nav-Menu-submenu-selected > .cxd-Nav-Menu-submenu-title { background-color: var(--Menu-dark-backgroundColor); color: var(--Menu-dark-fontColor-onHover); } .cxd-Nav-Menu-dark .cxd-Nav-Menu-submenu-selected > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon, .cxd-Nav-Menu-dark .cxd-Nav-Menu-submenu-selected > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon-after, .cxd-Nav-Menu-dark .cxd-Nav-Menu-submenu-selected > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-label, .cxd-Nav-Menu-dark .cxd-Nav-Menu-submenu-selected > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-submenu-arrow { color: var(--Menu-dark-fontColor-onHover); } .cxd-Nav-Menu-dark .cxd-Nav-Menu-submenu-selected > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon svg, .cxd-Nav-Menu-dark .cxd-Nav-Menu-submenu-selected > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon-after svg, .cxd-Nav-Menu-dark .cxd-Nav-Menu-submenu-selected > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-label svg, .cxd-Nav-Menu-dark .cxd-Nav-Menu-submenu-selected > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-submenu-arrow svg { fill: currentColor; } .cxd-Nav-Menu-item-tooltip-wrap { padding: 0; } .cxd-Nav-Menu-collapsed > .cxd-Nav-Menu-item, .cxd-Nav-Menu-collapsed > .cxd-Nav-Menu-submenu-title, .cxd-Nav-Menu-collapsed > .cxd-Nav-Menu-submenu > .cxd-Nav-Menu-submenu-title { text-overflow: initial; } .cxd-Nav-Menu > .cxd-Nav-Menu-item-divider { height: 0.0625rem; margin: 0 1rem 0.25rem 1rem; overflow: hidden; padding: 0; background-color: #ebebeb; } .cxd-Nav-Menu-submenu-popup { position: absolute !important; z-index: 1500; background-color: var(--Layout-light-backgroundColor); line-height: var(--Nav-Item-height); cursor: pointer; border: var(--Form-select-outer-borderWidth) solid var(--Form-select-outer-borderColor); border-radius: 0.125rem; max-height: 25rem; overflow-y: auto; box-shadow: 0 0.25rem 0.3125rem 0 rgba(21, 26, 38, 0.06), 0 0.0625rem 0.625rem 0 rgba(21, 26, 38, 0.05), 0 0.125rem 0.25rem -0.0625rem rgba(21, 26, 38, 0.04); } .cxd-Nav-Menu-submenu-popup .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-link .cxd-Nav-Menu-submenu-arrow { display: none; } .cxd-Nav-Menu-submenu-popup .cxd-Nav-Menu-item-link { max-width: var(--Menu-width); } .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu { background-color: var(--Menu-dark-backgroundColor); } .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-item { color: var(--Menu-dark-fontColor); } .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-item .cxd-Nav-Menu-item-icon, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-item .cxd-Nav-Menu-item-icon-after, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-item .cxd-Nav-Menu-item-label, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-item .cxd-Nav-Menu-submenu-arrow { color: var(--Menu-dark-fontColor); } .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-item .cxd-Nav-Menu-item-icon svg, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-item .cxd-Nav-Menu-item-icon-after svg, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-item .cxd-Nav-Menu-item-label svg, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-item .cxd-Nav-Menu-submenu-arrow svg { fill: var(--Menu-dark-fontColor); } .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-item-active, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-item-selected { background-color: var(--Menu-dark-backgroundColor); color: var(--Menu-dark-fontColor-onHover); } .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-item-active .cxd-Nav-Menu-item-icon, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-item-active .cxd-Nav-Menu-item-icon-after, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-item-active .cxd-Nav-Menu-item-label, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-item-active .cxd-Nav-Menu-submenu-arrow, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-icon, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-icon-after, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-label, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-submenu-arrow { color: var(--Menu-dark-fontColor-onHover); } .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-item-active .cxd-Nav-Menu-item-icon svg, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-item-active .cxd-Nav-Menu-item-icon-after svg, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-item-active .cxd-Nav-Menu-item-label svg, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-item-active .cxd-Nav-Menu-submenu-arrow svg, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-icon svg, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-icon-after svg, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-item-label svg, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-item-selected .cxd-Nav-Menu-submenu-arrow svg { fill: currentColor; } .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-submenu-title { color: var(--Menu-dark-fontColor); } .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon-after, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-label, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-submenu-arrow { color: var(--Menu-dark-fontColor); } .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon svg, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon-after svg, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-label svg, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-submenu-arrow svg { fill: var(--Menu-dark-fontColor); } .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-submenu-active > .cxd-Nav-Menu-submenu-title, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-submenu-selected > .cxd-Nav-Menu-submenu-title { background-color: var(--Menu-dark-backgroundColor); color: var(--Menu-dark-fontColor-onHover); } .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-submenu-active > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-submenu-active > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon-after, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-submenu-active > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-label, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-submenu-active > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-submenu-arrow, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-submenu-selected > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-submenu-selected > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon-after, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-submenu-selected > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-label, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-submenu-selected > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-submenu-arrow { color: var(--Menu-dark-fontColor-onHover); } .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-submenu-active > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon svg, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-submenu-active > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon-after svg, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-submenu-active > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-label svg, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-submenu-active > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-submenu-arrow svg, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-submenu-selected > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon svg, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-submenu-selected > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-icon-after svg, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-submenu-selected > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-label svg, .cxd-Nav-Menu-submenu-popup-dark > .cxd-Nav-Menu .cxd-Nav-Menu-submenu-selected > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-submenu-arrow svg { fill: currentColor; } .cxd-Nav-Menu-overflow-item-rest .cxd-Nav-Menu-submenu-title { margin: 0; } .cxd-Nav-Menu-horizontal { border: none; white-space: nowrap; overflow: hidden; width: auto; } .cxd-Nav-Menu-horizontal .cxd-Nav-Menu-item-tooltip-wrap { display: inline-block; zoom: 1; vertical-align: middle; } .cxd-Nav-Menu-horizontal .cxd-Nav-Menu-overflow-item.cxd-Nav-Menu-overflow-item-rest > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-overflowedIcon { margin-right: 0; line-height: inherit; } .cxd-Nav-Menu-horizontal .cxd-Nav-Menu-overflow-item.cxd-Nav-Menu-overflow-item-rest > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-overflowedIcon i, .cxd-Nav-Menu-horizontal .cxd-Nav-Menu-overflow-item.cxd-Nav-Menu-overflow-item-rest > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-overflowedIcon svg, .cxd-Nav-Menu-horizontal .cxd-Nav-Menu-overflow-item.cxd-Nav-Menu-overflow-item-rest > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-overflowedIcon img { float: none; } .cxd-Nav-Menu-horizontal .cxd-Nav-Menu-item.cxd-Nav-Menu-item-selected { background: none; } .cxd-Nav-Menu-horizontal .cxd-Nav-Menu-item.cxd-Nav-Menu-item-selected:after { content: " "; width: 100%; height: 0.125rem; background: var(--Menu-light-fontColor-onHover); position: absolute; left: 0; bottom: 0; } .cxd-Nav-Menu-horizontal .cxd-Nav-Menu-item.cxd-Nav-Menu-item-selected:before { display: none; } .cxd-Nav-Menu-horizontal .cxd-Nav-Menu-item.cxd-Nav-Menu-item-selected:active:after { background: var(--Menu-light-fontColor-onActive); } .cxd-Nav-Menu-horizontal > .cxd-Nav-Menu-submenu, .cxd-Nav-Menu-horizontal > .cxd-Nav-Menu-item { margin: 0; display: inline-block; vertical-align: bottom; } .cxd-Nav-Menu-horizontal .cxd-Nav-Menu-submenu-arrow { display: inline-block; font-size: 0.5625rem; text-transform: none; text-rendering: auto; line-height: 1.25rem; margin-left: 0.3125rem; } .cxd-Nav-Menu-horizontal .cxd-Nav-Menu-submenu-arrow > svg { top: 0; } .cxd-Nav-Menu-horizontal.cxd-Nav-Menu-rtl .cxd-Nav-Menu-submenu-arrow { margin-left: 0; margin-right: 0.3125rem; } .cxd-Nav-Menu-horizontal .cxd-Nav-Menu-item-label { vertical-align: middle; } .cxd-Nav-Menu-vertical .cxd-Nav-Menu-submenu-arrow, .cxd-Nav-Menu-vertical-left .cxd-Nav-Menu-submenu-arrow, .cxd-Nav-Menu-vertical-right .cxd-Nav-Menu-submenu-arrow, .cxd-Nav-Menu-inline .cxd-Nav-Menu-submenu-arrow { font-size: 0.625rem; margin: 0 0 0 0.625rem; } .cxd-Nav-Menu-vertical.cxd-Nav-Menu-expand-before .cxd-Nav-Menu-submenu-title, .cxd-Nav-Menu-vertical-left.cxd-Nav-Menu-expand-before .cxd-Nav-Menu-submenu-title, .cxd-Nav-Menu-vertical-right.cxd-Nav-Menu-expand-before .cxd-Nav-Menu-submenu-title, .cxd-Nav-Menu-inline.cxd-Nav-Menu-expand-before .cxd-Nav-Menu-submenu-title { flex-direction: row-reverse; } .cxd-Nav-Menu-vertical.cxd-Nav-Menu-expand-before .cxd-Nav-Menu-submenu-title > .cxd-Nav-Menu-submenu-arrow, .cxd-Nav-Menu-vertical-left.cxd-Nav-Menu-expand-before .cxd-Nav-Menu-submenu-title > .cxd-Nav-Menu-submenu-arrow, .cxd-Nav-Menu-vertical-right.cxd-Nav-Menu-expand-before .cxd-Nav-Menu-submenu-title > .cxd-Nav-Menu-submenu-arrow, .cxd-Nav-Menu-inline.cxd-Nav-Menu-expand-before .cxd-Nav-Menu-submenu-title > .cxd-Nav-Menu-submenu-arrow { margin: 0 0.625rem 0 0; } .cxd-Nav-Menu-vertical.cxd-Nav-Menu-rtl.cxd-Nav-Menu-expand-before .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-wrap, .cxd-Nav-Menu-vertical-left.cxd-Nav-Menu-rtl.cxd-Nav-Menu-expand-before .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-wrap, .cxd-Nav-Menu-vertical-right.cxd-Nav-Menu-rtl.cxd-Nav-Menu-expand-before .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-wrap, .cxd-Nav-Menu-inline.cxd-Nav-Menu-rtl.cxd-Nav-Menu-expand-before .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-item-wrap { padding-right: 1rem; padding-left: 0; } .cxd-Nav-Menu-inline.cxd-Nav-Menu-rtl .cxd-Nav-Menu-submenu-arrow { margin: 0 0.625rem 0 0; } .cxd-Nav-Menu-inline.cxd-Nav-Menu-rtl.cxd-Nav-Menu-expand-before .cxd-Nav-Menu-submenu-arrow { margin: 0 0 0 0.625rem; } .cxd-Nav-Menu-vertical.cxd-Nav-Menu-rtl .cxd-Nav-Menu-submenu-arrow { margin: 0 0 0 0.625rem; } .cxd-Nav-Menu-vertical-right.cxd-Nav-Menu-rtl .cxd-Nav-Menu-submenu-arrow { margin: 0 0.625rem 0 0; } .cxd-Nav-Menu-inline .cxd-Nav-Menu-submenu-arrow svg, .cxd-Nav-Menu-horizontal .cxd-Nav-Menu-submenu-arrow svg { transition: transform 0.3s; transform: rotate(90deg); color: var(--colors-neutral-text-2); } .cxd-Nav-Menu-inline .cxd-Nav-Menu-submenu-open > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-submenu-arrow svg, .cxd-Nav-Menu-horizontal .cxd-Nav-Menu-submenu-open > .cxd-Nav-Menu-submenu-title .cxd-Nav-Menu-submenu-arrow svg { transform: rotate(270deg); } .cxd-Nav-Menu-collapsed .cxd-Nav-Menu-item-wrap { justify-content: center; } .cxd-Nav-Menu-collapsed .cxd-Nav-Menu-submenu-arrow { display: none !important; } .cxd-Nav-Menu-collapsed .cxd-Nav-Menu-item-group-title { display: none; } .cxd-Nav-Menu-collapsed .cxd-Nav-Menu-item-group-list .cxd-Nav-Menu-item-divider { height: 0.0625rem; width: 60%; margin: 0 auto; } .cxd-Nav-Menu .cxd-Nav-Menu-item-disabled, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-disabled { cursor: not-allowed; color: var(--Menu-fontColor-onDisabled) !important; } .cxd-Nav-Menu .cxd-Nav-Menu-item-disabled svg, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-disabled svg { fill: currentColor !important; } .cxd-Nav-Menu .cxd-Nav-Menu-item-disabled.cxd-Nav-Menu-item, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-disabled.cxd-Nav-Menu-item { cursor: not-allowed; color: var(--Menu-fontColor-onDisabled) !important; } .cxd-Nav-Menu .cxd-Nav-Menu-item-disabled.cxd-Nav-Menu-item svg, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-disabled.cxd-Nav-Menu-item svg { fill: currentColor !important; } .cxd-Nav-Menu .cxd-Nav-Menu-item-disabled.cxd-Nav-Menu-item .cxd-Nav-Menu-item-link, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-disabled.cxd-Nav-Menu-item .cxd-Nav-Menu-item-link { cursor: not-allowed; color: var(--Menu-fontColor-onDisabled) !important; } .cxd-Nav-Menu .cxd-Nav-Menu-item-disabled.cxd-Nav-Menu-item .cxd-Nav-Menu-item-link svg, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-disabled.cxd-Nav-Menu-item .cxd-Nav-Menu-item-link svg { fill: currentColor !important; } .cxd-Nav-Menu .cxd-Nav-Menu-item-disabled .cxd-Nav-Menu-submenu-title, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-disabled .cxd-Nav-Menu-submenu-title { cursor: not-allowed; color: var(--Menu-fontColor-onDisabled) !important; } .cxd-Nav-Menu .cxd-Nav-Menu-item-disabled .cxd-Nav-Menu-submenu-title svg, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-disabled .cxd-Nav-Menu-submenu-title svg { fill: currentColor !important; } .cxd-Nav-Menu .cxd-Nav-Menu-item-disabled .cxd-Nav-Menu-submenu-title > .cxd-Nav-Menu-item-icon, .cxd-Nav-Menu .cxd-Nav-Menu-item-disabled .cxd-Nav-Menu-submenu-title > .cxd-Nav-Menu-item-icon-after, .cxd-Nav-Menu .cxd-Nav-Menu-item-disabled .cxd-Nav-Menu-submenu-title > .cxd-Nav-Menu-item-label, .cxd-Nav-Menu .cxd-Nav-Menu-item-disabled .cxd-Nav-Menu-submenu-title > .cxd-Nav-Menu-submenu-arrow, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-disabled .cxd-Nav-Menu-submenu-title > .cxd-Nav-Menu-item-icon, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-disabled .cxd-Nav-Menu-submenu-title > .cxd-Nav-Menu-item-icon-after, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-disabled .cxd-Nav-Menu-submenu-title > .cxd-Nav-Menu-item-label, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-disabled .cxd-Nav-Menu-submenu-title > .cxd-Nav-Menu-submenu-arrow { cursor: not-allowed; color: var(--Menu-fontColor-onDisabled) !important; } .cxd-Nav-Menu .cxd-Nav-Menu-item-disabled .cxd-Nav-Menu-submenu-title > .cxd-Nav-Menu-item-icon svg, .cxd-Nav-Menu .cxd-Nav-Menu-item-disabled .cxd-Nav-Menu-submenu-title > .cxd-Nav-Menu-item-icon-after svg, .cxd-Nav-Menu .cxd-Nav-Menu-item-disabled .cxd-Nav-Menu-submenu-title > .cxd-Nav-Menu-item-label svg, .cxd-Nav-Menu .cxd-Nav-Menu-item-disabled .cxd-Nav-Menu-submenu-title > .cxd-Nav-Menu-submenu-arrow svg, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-disabled .cxd-Nav-Menu-submenu-title > .cxd-Nav-Menu-item-icon svg, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-disabled .cxd-Nav-Menu-submenu-title > .cxd-Nav-Menu-item-icon-after svg, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-disabled .cxd-Nav-Menu-submenu-title > .cxd-Nav-Menu-item-label svg, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-disabled .cxd-Nav-Menu-submenu-title > .cxd-Nav-Menu-submenu-arrow svg { fill: currentColor !important; } .cxd-Nav-Menu .cxd-Nav-Menu-item-disabled .cxd-Nav-Menu-item-icon, .cxd-Nav-Menu .cxd-Nav-Menu-item-disabled .cxd-Nav-Menu-item-icon-after, .cxd-Nav-Menu .cxd-Nav-Menu-item-disabled .cxd-Nav-Menu-item-label, .cxd-Nav-Menu .cxd-Nav-Menu-item-disabled .cxd-Nav-Menu-submenu-arrow, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-disabled .cxd-Nav-Menu-item-icon, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-disabled .cxd-Nav-Menu-item-icon-after, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-disabled .cxd-Nav-Menu-item-label, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-disabled .cxd-Nav-Menu-submenu-arrow { cursor: not-allowed; color: var(--Menu-fontColor-onDisabled) !important; } .cxd-Nav-Menu .cxd-Nav-Menu-item-disabled .cxd-Nav-Menu-item-icon svg, .cxd-Nav-Menu .cxd-Nav-Menu-item-disabled .cxd-Nav-Menu-item-icon-after svg, .cxd-Nav-Menu .cxd-Nav-Menu-item-disabled .cxd-Nav-Menu-item-label svg, .cxd-Nav-Menu .cxd-Nav-Menu-item-disabled .cxd-Nav-Menu-submenu-arrow svg, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-disabled .cxd-Nav-Menu-item-icon svg, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-disabled .cxd-Nav-Menu-item-icon-after svg, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-disabled .cxd-Nav-Menu-item-label svg, .cxd-Nav-Menu .cxd-Nav-Menu-submenu-disabled .cxd-Nav-Menu-submenu-arrow svg { fill: currentColor !important; } .cxd-Nav-Menu-item-tooltip { font-size: var(--Layout-tooltip-fontSize); color: var(--Layout-light-fontColor); background: var(--Layout-light-backgroundColor); border: var(--common-popover-border); border-radius: var(--Tooltip--attr-borderRadius); box-shadow: 0 0.25rem 0.375rem 0 rgba(8, 14, 26, 0.06), 0 0.0625rem 0.625rem 0 rgba(8, 14, 26, 0.05), 0 0.125rem 0.25rem -0.0625rem rgba(8, 14, 26, 0.04); } .cxd-Nav-Menu-item-tooltip .cxd-Tooltip-arrow:before { display: none; } .cxd-Nav-Menu-item-tooltip.cxd-Nav-Menu-item-tooltip-dark { background: var(--Layout-dark-tooltip-backgroundColor); } .cxd-Nav-Menu-item-tooltip.cxd-Nav-Menu-item-tooltip-dark .cxd-Tooltip-arrow:after { border-right-color: var(--Layout-dark-tooltip-backgroundColor); } .cxd-Nav-Menu-item-tooltip.cxd-Nav-Menu-item-tooltip-dark .cxd-Tooltip-body, .cxd-Nav-Menu-item-tooltip.cxd-Nav-Menu-item-tooltip-dark .cxd-Tooltip-body span { color: var(--Layout-dark-fontColor); } .cxd-OverflowTpl { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .cxd-PdfViewer { position: relative; width: 100%; min-width: 300px; height: 100%; display: flex; justify-content: center; padding: 50px 0; } .cxd-PdfViewer-Content { width: -moz-max-content; width: max-content; max-width: 100%; } .cxd-PdfViewer-Content.is-loaded { box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px 0px; } .cxd-PdfViewer-Loading { width: 100%; text-align: center; } .cxd-PdfViewer-Tool { position: absolute; z-index: 10; padding: 5px 15px; bottom: 60px; background-color: #444444; border-radius: 10px; color: #fff; text-align: center; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cxd-PdfViewer-Tool .gap { margin: 0 4px; } .cxd-PdfViewer-Tool .icon { cursor: pointer; width: 20px; margin: 0 10px; } .cxd-PdfViewer-Tool .icon:hover { color: var(--colors-brand-5); } .cxd-PdfViewer-Tool .page-input { width: 40px; } .cxd-Signature { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .cxd-Signature-canvas { border: 1px dashed #aaa; } .cxd-Signature-Tool { height: var(--signature-tool-height); margin-top: var(--signature-tool-margin-top); } .cxd-Signature-Tool .actions { display: flex; justify-content: space-between; } .cxd-Signature-Tool .actions .left-actions button { margin-right: 5px; } .cxd-Signature-Tool .actions .right-actions button { margin-left: 5px; } .cxd-Signature-placeholder { position: absolute; top: 0; left: 0; right: 0; bottom: var(--signature-tool-height); text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--signature-placeholder-gap); color: var(--signature-placeholder-color); } .cxd-Signature-Embed { display: flex; gap: 10px; } .cxd-Signature-Embed-Preview { display: flex; align-items: center; gap: 4px; margin-left: 10px; height: 30px; margin: 1px; padding: 2px; border: 1px dashed #aaa; } .cxd-Signature-Embed-Preview .preview-close { cursor: pointer; font-size: 14px; color: #aaa; } .cxd-Signature-Embed-Preview .preview-close:hover { color: #000; } .cxd-Signature-Embed-Preview img { height: 24px; } .cxd-Signature-Embed-Body { height: 100%; display: flex; flex-direction: column; } .cxd-Signature.is-fullScreen, .cxd-Signature-Embed-Body.is-fullScreen { flex-direction: row-reverse; justify-content: space-between; align-items: stretch; } .cxd-Signature.is-fullScreen .cxd-Signature-Tool, .cxd-Signature-Embed-Body.is-fullScreen .cxd-Signature-Tool { width: calc(var(--signature-tool-height) - var(--signature-tool-margin-top)); height: auto; margin-top: 0; display: flex; justify-content: center; align-items: center; } .cxd-Signature.is-fullScreen .cxd-Signature-Tool .actions, .cxd-Signature-Embed-Body.is-fullScreen .cxd-Signature-Tool .actions { white-space: nowrap; transform: rotate(90deg); } @media print { .pe-no-print { display: none !important; } .pe-preserve-ancestor { display: block !important; margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; } } .ai_chat_container .ai_chat_page_wrapper { width: 100%; height: 100%; } .cxd-Report-base { display: flex; flex-direction: column; height: 100%; } .cxd-Report-base-header { padding: 12px; display: flex; justify-content: space-between; } .cxd-Report-base-header--left { flex: 1; display: flex; flex-wrap: wrap; } .cxd-Report-base-header--title { font-size: 16px; font-weight: 700; color: #333; margin-right: 12px; } .cxd-Report-base-header--subtitle { font-size: 12px; color: #999; line-height: 24px; } .cxd-Report-base-content { flex: 1; } .cxd-Report-base-Table2 { flex: 1; height: 100%; } .cxd-Report-base-Table2 .cxd-Table-content { height: 100% !important; } .cxd-Target-card { display: flex; align-items: stretch; position: relative; flex-wrap: wrap; gap: 12px; } .cxd-Target-card--item { padding: 10px 15px; border-radius: 4px; min-width: 150px; flex: 1; background-color: #fff; transition: all ease-in-out 0.3s; } .cxd-Target-card--item.is_action_card { cursor: pointer; } .cxd-Target-card--item.is_action_card:hover { background-color: var(--colors-neutral-line-10); } .cxd-Target-card--item--value { font-size: 28px; color: var(--colors-neutral-fill-2); } .cxd-Target-card--item--value small { font-size: 50%; } .cxd-Target-card--item--name { font-size: 14px; white-space: nowrap; } .cxd-Verification-code { display: flex; align-items: center; justify-content: flex-start; width: 100%; -moz-column-gap: 4px; column-gap: 4px; overflow: hidden; } .cxd-Verification-code input { width: 2.1875rem; border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor); border-radius: var(--Form-input-borderRadius); line-height: var(--Form-input-lineHeight); padding: var(--Form-input-paddingY) var(--Form-input-paddingX); font-size: var(--Form-input-fontSize); text-align: center; } .cxd-Verification-code input:focus { border-color: var(--Form-input-onFocused-borderColor); box-shadow: var(--Form-input-boxShadow); background: var(--Form-input-onFocused-bg); } .cxd-Verification-code input:hover { border-color: var(--Form-input-onFocused-borderColor); } .cxd-Verification-code input.is-disabled { cursor: not-allowed; background: var(--Form-input-onDisabled-bg); border-color: var(--Form-input-onDisabled-borderColor); }