/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
  font-display: swap;
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
  font-display: swap;
}
@font-face {
  font-family: "OC-Number-Regular";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
  font-display: swap;
}
@font-face {
  font-family: "OC-Number-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
  font-display: swap;
}
@font-face {
  font-family: "MF YuanHei";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/MFYuanHei-Regular.otf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.ovui-message__content {
  align-items: flex-start;
  line-height: 18px;
  max-width: 640px;
}
.ovui-message__content .ovui-message__text {
  text-align: left;
  margin-left: 4px;
}
.ovui-message__content .ovui-message__icon {
  font-size: 14px;
}
.oc-modal-confirm-title {
  display: flex;
  align-items: flex-start;
  font-size: 16px;
  line-height: 24px;
  margin-top: -3px;
}
.oc-modal-confirm-title .oc-modal-confirm-icon {
  font-size: 18px;
  margin-right: 8px;
  margin-top: 3px;
}
.oc-modal-confirm-title .oc-modal-confirm-icon[name="oc-icon-info"] {
  color: #651dff;
}
.oc-modal-confirm-title .oc-modal-confirm-icon[name="oc-icon-success"] {
  color: #00d5a4;
}
.oc-modal-confirm-title .oc-modal-confirm-icon[name="oc-icon-warning"] {
  color: #ff7c00;
}
.oc-modal-confirm-title .oc-modal-confirm-icon[name="oc-icon-close-one"] {
  color: #ff0060;
}
.oc-modal-confirm-body-with-icon {
  padding-left: 27px;
}
.ocean-bg {
  background: linear-gradient(84deg, #F0F8FF -73.41%, #E8F4FF 91.31%);
}
.ocean-bg-img {
  z-index: 0;
  position: relative;
  background: linear-gradient(84deg, #F0F8FF -73.41%, #E8F4FF 91.31%);
}
.ocean-bg-img:after {
  z-index: -1;
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/ocean_bg_ripple.png') no-repeat;
  mix-blend-mode: color-burn;
  background-size: 840px 320px;
  background-position: top right;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* popup */
.ovui-popup-fade-enter-active,
.ovui-popup-fade-leave-active {
  transition: opacity 0.24s linear;
}
.ovui-popup-fade-enter-from,
.ovui-popup-fade-leave-to {
  opacity: 0;
}
.ovui-popup-fade-enter-to,
.ovui-popup-fade-leave-from {
  opacity: 1;
}
.ovui-popup__lock {
  overflow: hidden;
}
.ovui-popup__mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(26, 26, 27, 0.5);
  height: 100%;
  z-index: 1050;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* Alert */
.ovui-alert {
  position: relative;
  font-size: 12px;
  padding: 6px 16px;
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
}
.ovui-alert__icon {
  display: flex;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  margin-top: 2px;
}
.ovui-alert__main-wrapper {
  flex: 1;
}
.ovui-alert__close {
  cursor: pointer;
  display: flex;
  margin-top: 2px;
  margin-left: 8px;
}
.ovui-alert__close .ovui-alert__close-icon {
  width: 16px;
  height: 16px;
  color: #ffffff;
}
.ovui-alert__title {
  font-size: 12px;
  line-height: 20px;
  color: #ffffff;
  font-weight: 600;
}
.ovui-alert__description {
  font-size: 12px;
  line-height: 20px;
  color: #ffffff;
}
.ovui-alert--info {
  background-color: rgba(101, 45, 255, 0.08);
}
.ovui-alert--info .ovui-alert__icon {
  color: #651dff;
}
.ovui-alert--info.ovui-alert--border {
  border: 1px solid rgba(101, 45, 255, 0.08);
}
.ovui-alert--info .ovui-alert__banner-icon {
  background-color: #651dff;
  color: rgba(0, 0, 0, 0);
}
.ovui-alert--success {
  background-color: rgba(0, 213, 164, 0.08);
}
.ovui-alert--success .ovui-alert__icon {
  color: #00d5a4;
}
.ovui-alert--success.ovui-alert--border {
  border: 1px solid rgba(0, 213, 164, 0.08);
}
.ovui-alert--success .ovui-alert__banner-icon {
  background-color: #00d5a4;
  color: rgba(0, 0, 0, 0);
}
.ovui-alert--danger {
  background-color: rgba(255, 0, 96, 0.06);
}
.ovui-alert--danger .ovui-alert__icon {
  color: #ff0060;
}
.ovui-alert--danger.ovui-alert--border {
  border: 1px solid rgba(255, 0, 96, 0.06);
}
.ovui-alert--danger .ovui-alert__banner-icon {
  background-color: #ff0060;
  color: rgba(0, 0, 0, 0);
}
.ovui-alert--warning {
  background-color: rgba(255, 124, 0, 0.08);
}
.ovui-alert--warning .ovui-alert__icon {
  color: #ff7c00;
}
.ovui-alert--warning.ovui-alert--border {
  border: 1px solid rgba(255, 124, 0, 0.08);
}
.ovui-alert--warning .ovui-alert__banner-icon {
  background-color: #ff7c00;
  color: rgba(0, 0, 0, 0);
}
.ovui-alert--text {
  display: inline-flex;
  padding: initial;
  border: initial;
  background-color: initial;
}
.ovui-alert--banner {
  background-color: #302842;
  border: 1px solid #ebebed;
}
.ovui-alert--banner .ovui-alert__banner-icon {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: -7px;
  margin-right: 12px;
  margin-bottom: -7px;
  margin-left: -17px;
  align-self: stretch;
}
.ovui-alert--rtl {
  direction: rtl;
}
.ovui-alert--rtl .ovui-alert__icon {
  margin-left: 8px;
  margin-right: 0;
}
.ovui-alert--rtl .ovui-alert__close {
  margin-right: 8px;
  margin-left: 0;
}
.ovui-alert--rtl .ovui-alert__banner-icon {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  margin-top: -7px;
  margin-right: -17px;
  margin-bottom: -7px;
  margin-left: 12px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
@keyframes v-okee-loading-opacity {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes v-okee-spin-loading-rotate {
  to {
    transform: rotate(360deg);
  }
}
.ovui-icon__loading .ovui-icon__loading-path-item:nth-child(9) {
  animation: v-okee-loading-opacity 0.8s linear 0s infinite;
}
.ovui-icon__loading .ovui-icon__loading-path-item:nth-child(8) {
  animation: v-okee-loading-opacity 0.8s linear -0.1s infinite;
}
.ovui-icon__loading .ovui-icon__loading-path-item:nth-child(7) {
  animation: v-okee-loading-opacity 0.8s linear -0.2s infinite;
}
.ovui-icon__loading .ovui-icon__loading-path-item:nth-child(6) {
  animation: v-okee-loading-opacity 0.8s linear -0.3s infinite;
}
.ovui-icon__loading .ovui-icon__loading-path-item:nth-child(5) {
  animation: v-okee-loading-opacity 0.8s linear -0.4s infinite;
}
.ovui-icon__loading .ovui-icon__loading-path-item:nth-child(4) {
  animation: v-okee-loading-opacity 0.8s linear -0.5s infinite;
}
.ovui-icon__loading .ovui-icon__loading-path-item:nth-child(3) {
  animation: v-okee-loading-opacity 0.8s linear -0.6s infinite;
}
.ovui-icon__loading .ovui-icon__loading-path-item:nth-child(2) {
  animation: v-okee-loading-opacity 0.8s linear -0.7s infinite;
}
.ovui-icon__loading .ovui-icon__loading-path-item:nth-child(1) {
  animation: v-okee-loading-opacity 0.8s linear -0.8s infinite;
}
.ovui-icon__loading .ovui-icon__loading-path-item:nth-child(0) {
  animation: v-okee-loading-opacity 0.8s linear -0.9s infinite;
}
.ovui-icon__spin-loading {
  transform: rotate(0);
  animation: v-okee-spin-loading-rotate 0.8s infinite linear;
}
.ovui-icon {
  display: inline-block;
}
.ovui-icon svg {
  display: block;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.ovui-anchor {
  position: relative;
  padding-left: 2px;
}
.ovui-anchor__track {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  background: #ebebed;
  width: 2px;
}
.ovui-anchor__track .ovui-anchor__ink {
  display: none;
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid #651dff;
  background-color: #ffffff;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.15s ease-in-out;
}
.ovui-anchor__track .ovui-anchor__ink--active {
  display: block;
}
.ovui-anchor-link {
  padding: 6px 0 6px 12px;
}
.ovui-anchor-link__title {
  text-decoration: none;
  text-overflow: ellipsis;
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
}
.ovui-anchor-link--active .ovui-anchor-link__title,
.ovui-anchor-link:hover .ovui-anchor-link__title {
  color: #651dff;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.ovui-auto-complete-option {
  display: flex;
  align-self: stretch;
  color: #ffffff;
  cursor: pointer;
}
.ovui-auto-complete-option__action {
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
}
.ovui-auto-complete-option__content {
  flex: 1;
  align-items: center;
}
.ovui-auto-complete-option__content--ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ovui-auto-complete-option__expand {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
}
.ovui-auto-complete-option__expand--icon {
  color: #ffffff;
}
.ovui-auto-complete-option.ovui-auto-complete-option--grouped {
  padding-left: 24px;
  padding-right: 24px;
}
.ovui-auto-complete-option--single.ovui-auto-complete-option--selected {
  color: rgba(255, 255, 255, 0.75);
}
.ovui-auto-complete-option.ovui-auto-complete-option--disabled {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.25);
}
.ovui-auto-complete-option.ovui-auto-complete-option--disabled .ovui-auto-complete-option__expand--icon {
  color: rgba(255, 255, 255, 0.25);
}
.ovui-auto-complete-option.ovui-auto-complete-option--disabled.ovui-auto-complete-option--single.ovui-auto-complete-option--selected {
  color: rgba(255, 255, 255, 0.25);
}
.ovui-auto-complete-option:hover:not(.ovui-auto-complete-option--disabled) {
  background-color: #3c344d;
}
.ovui-auto-complete-option--xs {
  line-height: 20px;
  font-size: 12px;
  padding: 3px 12px;
}
.ovui-auto-complete-option--sm {
  line-height: 20px;
  font-size: 12px;
  padding: 5px 12px;
}
.ovui-auto-complete-option--md {
  line-height: 22px;
  font-size: 14px;
  padding: 6px 12px;
}
.ovui-auto-complete-option--lg {
  line-height: 24px;
  font-size: 16px;
  padding: 7px 12px;
}
.ovui-auto-complete-option--xl {
  line-height: 26px;
  font-size: 18px;
  padding: 8px 12px;
}
.ovui-auto-complete-option--rtl {
  direction: rtl;
}
.ovui-auto-complete-option--rtl .ovui-auto-complete-option__action {
  margin-right: 0;
  margin-left: 8px;
}
.ovui-auto-complete-option--rtl .ovui-auto-complete-option__expand {
  margin-left: 0;
  margin-right: 8px;
}
.ovui-auto-complete {
  display: inline-flex;
  width: 100%;
}
.ovui-auto-complete__options {
  max-height: 192px;
  overflow-y: auto;
  padding: 6px 0;
  display: none;
}
.ovui-auto-complete__options--show {
  display: block;
}
.ovui-auto-complete__options::-webkit-scrollbar-track-piece {
  background-color: transparent;
}
.ovui-auto-complete__options::-webkit-scrollbar {
  width: 6px;
  height: 9px;
}
.ovui-auto-complete__options::-webkit-scrollbar-thumb {
  background-color: #ebebed;
  border-radius: 3px;
  background-clip: padding-box;
  min-height: 28px;
}
.ovui-auto-complete__options::-webkit-scrollbar-thumb:hover {
  background-color: #dfe0e2;
}
.ovui-auto-complete__empty {
  height: 192px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ovui-auto-complete__loading {
  height: 192px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ovui-auto-complete__popper {
  box-shadow: 0px 3px 9px 0 rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  display: none;
  background-color: #302842;
}
.ovui-auto-complete__popper--show {
  display: block;
}
.ovui-auto-complete__popper-header {
  border-bottom: 1px solid #ebebed;
  padding: 6px 12px;
  color: #ffffff;
  font-size: 14px;
  line-height: 22px;
}
.ovui-auto-complete__popper-footer {
  border-top: 1px solid #ebebed;
  padding: 6px 12px;
  color: #ffffff;
  font-size: 14px;
  line-height: 22px;
}
.ovui-auto-complete__popper--rtl {
  direction: rtl;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.ovui-input-group {
  position: relative;
  width: 100%;
  display: flex;
  align-self: stretch;
  border-radius: 24px;
}
.ovui-input-group > :not(:last-child):not(:first-child)[data-okee-fill="false"] {
  margin-right: -1px;
}
.ovui-input-group > :not(:last-child):not(:first-child),
.ovui-input-group > :not(:last-child):not(:first-child) .ovui-input__wrapper,
.ovui-input-group > :not(:last-child):not(:first-child) .ovui-custom-input {
  border-radius: 0;
}
.ovui-input-group > :first-child:not(:last-child)[data-okee-fill="false"] {
  margin-right: -1px;
}
.ovui-input-group > :first-child:not(:last-child),
.ovui-input-group > :first-child:not(:last-child) .ovui-input__wrapper,
.ovui-input-group > :first-child:not(:last-child) .ovui-custom-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.ovui-input-group > :last-child:not(:first-child),
.ovui-input-group > :last-child:not(:first-child) .ovui-input__wrapper,
.ovui-input-group > :last-child:not(:first-child) .ovui-custom-input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.ovui-input-group > .ovui-button:not(.ovui-button--disabled):hover,
.ovui-input-group > .ovui-button:not(.ovui-button--disabled):focus,
.ovui-input-group > .ovui-button:not(.ovui-button--disabled):active {
  z-index: 3;
}
.ovui-input-group .ovui-custom-input:not(.ovui-custom-input--disabled).ovui-custom-input--error {
  z-index: 1;
}
.ovui-input-group .ovui-custom-input:not(.ovui-custom-input--disabled).ovui-custom-input--focused {
  z-index: 4;
}
.ovui-input-group .ovui-custom-input:not(.ovui-custom-input--disabled):hover {
  z-index: 3;
}
.ovui-input-group .ovui-input__wrapper:not(.ovui-input__wrapper--disabled).ovui-input__wrapper--error {
  z-index: 1;
}
.ovui-input-group .ovui-input__wrapper:not(.ovui-input__wrapper--disabled).ovui-input__wrapper--focused {
  z-index: 4;
}
.ovui-input-group .ovui-input__wrapper:not(.ovui-input__wrapper--disabled):hover {
  z-index: 3;
}
.ovui-input-group .ovui-textarea__wrapper:not(.ovui-textarea__wrapper--disabled).ovui-textarea__wrapper--error {
  z-index: 1;
}
.ovui-input-group .ovui-textarea__wrapper:not(.ovui-textarea__wrapper--disabled).ovui-textarea__wrapper--focused {
  z-index: 4;
}
.ovui-input-group .ovui-textarea__wrapper:not(.ovui-textarea__wrapper--disabled):hover {
  z-index: 3;
}
.ovui-input-group--xs {
  font-size: 12px;
  line-height: 20px;
}
.ovui-input-group--sm {
  font-size: 12px;
  line-height: 20px;
}
.ovui-input-group--md {
  font-size: 14px;
  line-height: 22px;
}
.ovui-input-group--lg {
  font-size: 14px;
  line-height: 22px;
}
.ovui-input-group--xl {
  font-size: 16px;
  line-height: 24px;
}
.ovui-input-group__addon {
  padding: 0 5px;
  border: 1px solid;
  white-space: nowrap;
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
}
.ovui-input-group__addon:first-child {
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
  border-right: none;
  margin-right: -1px;
}
.ovui-input-group__addon:last-child {
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
  border-left: none;
}
.ovui-input-group__addon--stroke {
  background-color: #3c344d;
  border-color: #dfe0e2;
  color: #ffffff;
}
.ovui-input-group__addon--stroke.ovui-input-group__addon--disabled {
  cursor: not-allowed;
  background-color: #3c344d;
  border-color: #dfe0e2;
  color: #ffffff;
}
.ovui-input-group__addon--fill {
  background-color: #261d38;
  color: #ffffff;
  border-color: #261d38;
}
.ovui-input-group__addon--fill.ovui-input-group__addon--disabled {
  cursor: not-allowed;
  background-color: #302842;
  color: rgba(255, 255, 255, 0.25);
  border-color: #302842;
}
.ovui-input-group--rtl {
  direction: rtl;
}
.ovui-input-group--rtl > :first-child:not(:last-child)[data-okee-fill="false"] {
  margin-left: -1px;
  margin-right: 0;
}
.ovui-input-group--rtl > :first-child:not(:last-child),
.ovui-input-group--rtl > :first-child:not(:last-child) .ovui-input__wrapper,
.ovui-input-group--rtl > :first-child:not(:last-child) .ovui-custom-input {
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.ovui-input-group--rtl > :last-child:not(:first-child),
.ovui-input-group--rtl > :last-child:not(:first-child) .ovui-input__wrapper,
.ovui-input-group--rtl > :last-child:not(:first-child) .ovui-custom-input {
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.ovui-input-group--rtl .ovui-input-group__addon {
  border-radius: 24px;
}
.ovui-input-group--rtl .ovui-input-group__addon:first-child {
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
  border-left: none;
  border-right: 1px solid #dfe0e2;
  margin-left: -1px;
  margin-right: 0;
}
.ovui-input-group--rtl .ovui-input-group__addon:last-child {
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
  border-right: none;
  border-left: 1px solid #dfe0e2;
}
/* Input */
.ovui-input__wrapper {
  display: inline-flex;
  position: relative;
  border-radius: 24px;
  width: 100%;
}
.ovui-input__wrapper .ovui-input {
  width: 100%;
  flex: 1;
  outline: none;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0);
  color: inherit;
  cursor: inherit;
}
.ovui-input__wrapper .ovui-input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}
.ovui-input__wrapper .ovui-input:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.ovui-input__wrapper .ovui-input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.ovui-input__wrapper .ovui-input[type="text"],
.ovui-input__wrapper .ovui-input[type="number"],
.ovui-input__wrapper .ovui-input[type="password"] {
  -moz-appearance: none;
       appearance: none;
}
.ovui-input__wrapper .ovui-input[type="number"]::-webkit-inner-spin-button {
  appearance: none;
}
.ovui-input__wrapper--fill {
  border: 1px solid #3c344d;
  background-color: #3c344d;
  color: #ffffff;
}
.ovui-input__wrapper--fill .ovui-input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}
.ovui-input__wrapper--fill .ovui-input:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.ovui-input__wrapper--fill .ovui-input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.ovui-input__wrapper--fill:hover {
  color: #ffffff;
  background-color: #3c344d;
  border-color: #d220ff;
  transition: all 0.1s ease-in-out;
}
.ovui-input__wrapper--fill.ovui-input__wrapper--focused {
  color: #ffffff;
  background-color: #1a112e;
  border-color: #651dff;
  box-shadow: 0 0 0 2px rgba(101, 29, 255, 0.2);
  animation: bui-input-focus-effect_primary 0.1s ease-in-out;
}
@keyframes bui-input-focus-effect_primary {
  from {
    box-shadow: 0 0 0 0 #651dff;
  }
  to {
    box-shadow: 0 0 0 2px rgba(101, 29, 255, 0.2);
  }
}
.ovui-input__wrapper--fill.ovui-input__wrapper--error {
  border: 1px solid transparent;
  background-color: rgba(255, 0, 96, 0.06);
  color: #ffffff;
}
.ovui-input__wrapper--fill.ovui-input__wrapper--error:hover {
  color: #ffffff;
  background-color: rgba(255, 0, 96, 0.06);
  border-color: transparent;
  transition: all 0.1s ease-in-out;
}
.ovui-input__wrapper--fill.ovui-input__wrapper--error.ovui-input__wrapper--focused {
  color: #ffffff;
  background-color: rgba(255, 0, 96, 0.06);
  border-color: #ff0060;
  box-shadow: 0 0 0 2px rgba(255, 0, 96, 0.2);
  animation: bui-input-focus-effect_error 0.1s ease-in-out;
}
@keyframes bui-input-focus-effect_error {
  from {
    box-shadow: 0 0 0 0 #ff0060;
  }
  to {
    box-shadow: 0 0 0 2px rgba(255, 0, 96, 0.2);
  }
}
.ovui-input__wrapper--fill.ovui-input__wrapper--disabled,
.ovui-input__wrapper--fill.ovui-input__wrapper--disabled:hover,
.ovui-input__wrapper--fill.ovui-input__wrapper--disabled.ovui-input__wrapper--focused {
  background-color: #302842;
  border-color: #3c344d;
  color: rgba(255, 255, 255, 0.25);
  box-shadow: none;
  animation: none;
}
.ovui-input__wrapper--fill.ovui-input__wrapper--disabled .ovui-input::-moz-placeholder,
.ovui-input__wrapper--fill.ovui-input__wrapper--disabled:hover .ovui-input::-moz-placeholder,
.ovui-input__wrapper--fill.ovui-input__wrapper--disabled.ovui-input__wrapper--focused .ovui-input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.25);
  opacity: 1;
}
.ovui-input__wrapper--fill.ovui-input__wrapper--disabled .ovui-input:-ms-input-placeholder,
.ovui-input__wrapper--fill.ovui-input__wrapper--disabled:hover .ovui-input:-ms-input-placeholder,
.ovui-input__wrapper--fill.ovui-input__wrapper--disabled.ovui-input__wrapper--focused .ovui-input:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.25);
}
.ovui-input__wrapper--fill.ovui-input__wrapper--disabled .ovui-input::-webkit-input-placeholder,
.ovui-input__wrapper--fill.ovui-input__wrapper--disabled:hover .ovui-input::-webkit-input-placeholder,
.ovui-input__wrapper--fill.ovui-input__wrapper--disabled.ovui-input__wrapper--focused .ovui-input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.25);
}
.ovui-input__wrapper--stroke {
  background-color: #3c344d;
  color: #ffffff;
  border: 1px solid #d220ff;
}
.ovui-input__wrapper--stroke:hover {
  background-color: #261d38;
  color: #ffffff;
  border-color: #d220ff;
  transition: all 0.1s ease-in-out;
}
.ovui-input__wrapper--stroke.ovui-input__wrapper--focused {
  background-color: #302842;
  color: #ffffff;
  border-color: #651dff;
  box-shadow: 0 0 0 2px rgba(101, 29, 255, 0.2);
  animation: bui-input-focus-effect_primary 0.1s ease-in-out;
}
@keyframes bui-input-focus-effect_primary {
  from {
    box-shadow: 0 0 0 0 #651dff;
  }
  to {
    box-shadow: 0 0 0 2px rgba(101, 29, 255, 0.2);
  }
}
.ovui-input__wrapper--stroke.ovui-input__wrapper--error {
  background-color: #3c344d;
  color: #ffffff;
  border: 1px solid #ff0060;
}
.ovui-input__wrapper--stroke.ovui-input__wrapper--error:hover {
  background-color: #1a112e;
  color: #ffffff;
  border-color: #ff2f7f;
  transition: border-color 0.1s ease-in-out;
}
.ovui-input__wrapper--stroke.ovui-input__wrapper--error.ovui-input__wrapper--focused {
  background-color: #302842;
  color: #ffffff;
  border-color: #ff0060;
  box-shadow: 0 0 0 2px rgba(255, 0, 96, 0.2);
  animation: bui-input-focus-effect_error 0.1s ease-in-out;
}
@keyframes bui-input-focus-effect_error {
  from {
    box-shadow: 0 0 0 0 #ff0060;
  }
  to {
    box-shadow: 0 0 0 2px rgba(255, 0, 96, 0.2);
  }
}
.ovui-input__wrapper--stroke.ovui-input__wrapper--disabled,
.ovui-input__wrapper--stroke.ovui-input__wrapper--disabled:hover,
.ovui-input__wrapper--stroke.ovui-input__wrapper--disabled.ovui-input__wrapper--focused {
  color: rgba(255, 255, 255, 0.25);
  background-color: #3c344d;
  border: 1px solid rgba(210, 32, 255, 0.34117647);
  box-shadow: none;
  animation: none;
}
.ovui-input__wrapper--stroke.ovui-input__wrapper--disabled .ovui-input::-moz-placeholder,
.ovui-input__wrapper--stroke.ovui-input__wrapper--disabled:hover .ovui-input::-moz-placeholder,
.ovui-input__wrapper--stroke.ovui-input__wrapper--disabled.ovui-input__wrapper--focused .ovui-input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.25);
  opacity: 1;
}
.ovui-input__wrapper--stroke.ovui-input__wrapper--disabled .ovui-input:-ms-input-placeholder,
.ovui-input__wrapper--stroke.ovui-input__wrapper--disabled:hover .ovui-input:-ms-input-placeholder,
.ovui-input__wrapper--stroke.ovui-input__wrapper--disabled.ovui-input__wrapper--focused .ovui-input:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.25);
}
.ovui-input__wrapper--stroke.ovui-input__wrapper--disabled .ovui-input::-webkit-input-placeholder,
.ovui-input__wrapper--stroke.ovui-input__wrapper--disabled:hover .ovui-input::-webkit-input-placeholder,
.ovui-input__wrapper--stroke.ovui-input__wrapper--disabled.ovui-input__wrapper--focused .ovui-input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.25);
}
.ovui-input__wrapper--xs {
  padding: 1px 8px;
}
.ovui-input__wrapper--xs,
.ovui-input__wrapper--xs .ovui-input {
  font-size: 12px;
  line-height: 20px;
}
.ovui-input__wrapper--sm {
  padding: 3px 8px;
}
.ovui-input__wrapper--sm,
.ovui-input__wrapper--sm .ovui-input {
  font-size: 12px;
  line-height: 20px;
}
.ovui-input__wrapper--md {
  padding: 4px 8px;
}
.ovui-input__wrapper--md,
.ovui-input__wrapper--md .ovui-input {
  font-size: 14px;
  line-height: 22px;
}
.ovui-input__wrapper--lg {
  padding: 8px 8px;
}
.ovui-input__wrapper--lg,
.ovui-input__wrapper--lg .ovui-input {
  font-size: 14px;
  line-height: 22px;
}
.ovui-input__wrapper--xl {
  padding: 14px 8px;
}
.ovui-input__wrapper--xl,
.ovui-input__wrapper--xl .ovui-input {
  font-size: 16px;
  line-height: 24px;
}
.ovui-input__wrapper--unstyle {
  padding: 0;
  border: none;
  background-color: transparent;
  color: #ffffff;
}
.ovui-input__wrapper--noborder {
  background-color: #302842;
  color: #ffffff;
  border: 1px solid #302842;
}
.ovui-input__wrapper .ovui-input__clear {
  color: rgba(255, 255, 255, 0.5);
  z-index: 3;
  cursor: pointer;
  transition: opacity 0.1s ease-in;
}
.ovui-input__wrapper .ovui-input__clear--absolute {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}
.ovui-input__wrapper .ovui-input__clear--margin-right {
  margin-right: 4px;
}
.ovui-input__wrapper .ovui-input__clear:hover {
  color: rgba(255, 255, 255, 0.75);
}
.ovui-input__wrapper .ovui-input__clear:active {
  color: #ffffff;
}
.ovui-input__wrapper .ovui-input__count {
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  position: absolute;
  font-size: 12px;
  line-height: 14px;
  bottom: 4px;
}
.ovui-input__wrapper .ovui-input__prefix {
  z-index: 1;
  display: flex;
  align-self: stretch;
  align-items: center;
  padding-right: 4px;
  color: #ffffff;
}
.ovui-input__wrapper .ovui-input__suffix {
  z-index: 1;
  align-self: stretch;
  align-items: center;
  color: #ffffff;
  display: flex;
  padding-left: 4px;
}
.ovui-input__wrapper .ovui-input__suffix .ovui-input__clear {
  opacity: 0;
  pointer-events: none;
}
.ovui-input__wrapper .ovui-input__suffix .ovui-input__clear--show {
  opacity: 1;
  pointer-events: auto;
}
.ovui-input__wrapper .ovui-input__after {
  z-index: 1;
  align-self: stretch;
  align-items: center;
  color: #ffffff;
  display: flex;
  padding-left: 4px;
}
.ovui-input__wrapper .ovui-input__after--has-clear .ovui-icon {
  opacity: 0;
}
.ovui-input__wrapper .ovui-input__after .ovui-input__clear {
  display: none;
}
.ovui-input__wrapper .ovui-input__after .ovui-input__clear--show {
  display: block;
  opacity: 1;
}
.ovui-input__wrapper--disabled,
.ovui-input__wrapper--disabled .ovui-input {
  cursor: not-allowed;
}
.ovui-input__wrapper--disabled .ovui-input__prefix,
.ovui-input__wrapper--disabled .ovui-input__suffix {
  color: #d5d6d9;
}
.ovui-input__wrapper:hover:not(.ovui-input__wrapper--disabled):not(.ovui-input__wrapper--error) .ovui-input--stroke {
  border-color: #651dff;
}
.ovui-input__wrapper--rtl {
  direction: rtl;
}
.ovui-input__wrapper--rtl .ovui-input {
  direction: rtl;
}
.ovui-input__wrapper--rtl .ovui-input__clear--absolute {
  right: auto;
  left: 12px;
}
.ovui-input__wrapper--rtl .ovui-input__clear--margin-right {
  margin-right: 0;
  margin-left: 4px;
}
.ovui-input__wrapper--rtl .ovui-input__prefix {
  padding-right: 0;
  padding-left: 4px;
}
.ovui-input__wrapper--rtl .ovui-input__suffix,
.ovui-input__wrapper--rtl .ovui-input__after {
  padding-left: 0;
  padding-right: 4px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* popover */
/**
 * Ocean Design Tokens 2.0
 */
.ovui-popover {
  padding: 16px;
  box-shadow: 0px 3px 9px 0 rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background: #4c4066;
  font-size: 12px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.75);
}
.ovui-popover[data-popper-placement^="top"] > [data-popper-arrow] {
  bottom: -5px;
}
.ovui-popover[data-popper-placement^="top"] > [data-popper-arrow]::before {
  background: linear-gradient(135deg, transparent 50%, #4c4066 50%);
  box-shadow: 3px 3px 6px -3px rgba(0, 0, 0, 0.2);
}
.ovui-popover[data-popper-placement^="right"] > [data-popper-arrow] {
  left: -5px;
}
.ovui-popover[data-popper-placement^="right"] > [data-popper-arrow]::before {
  background: linear-gradient(225deg, transparent 50%, #4c4066 50%);
  box-shadow: -3px 3px 6px -3px rgba(0, 0, 0, 0.2);
}
.ovui-popover[data-popper-placement^="bottom"] > [data-popper-arrow] {
  top: -5px;
}
.ovui-popover[data-popper-placement^="bottom"] > [data-popper-arrow]::before {
  background: linear-gradient(135deg, #4c4066 50%, transparent 50%);
  box-shadow: -3px -3px 6px -3px rgba(0, 0, 0, 0.2);
}
.ovui-popover[data-popper-placement^="left"] > [data-popper-arrow] {
  right: -5px;
}
.ovui-popover[data-popper-placement^="left"] > [data-popper-arrow]::before {
  background: linear-gradient(45deg, transparent 50%, #4c4066 50%);
  box-shadow: 3px -3px 6px -3px rgba(0, 0, 0, 0.2);
}
.ovui-popover.ovui-popover--hide {
  display: none;
}
.ovui-popover--tooltip {
  padding: 8px 16px 8px 16px;
}
.ovui-popover[data-popper-reference-hidden="true"] {
  visibility: hidden;
  pointer-events: none;
}
.ovui-popover .ovui-popover__arrow,
.ovui-popover .ovui-popover__arrow::before {
  width: 10px;
  height: 10px;
  position: absolute;
  z-index: -2;
}
.ovui-popover .ovui-popover__arrow::before {
  content: "";
  transform: rotate(45deg);
  top: 0;
  left: 0;
}
.ovui-popover .ovui-popover__arrow--hide {
  visibility: hidden;
}
.ovui-popover__header {
  padding-bottom: 8px;
}
.ovui-popover__title {
  font-size: 14px;
  line-height: 22px;
  color: #ffffff;
}
.ovui-popover--dark {
  background: #4c4066;
  color: #302842;
}
.ovui-popover--dark[data-popper-placement^="top"] > [data-popper-arrow] {
  bottom: -5px;
}
.ovui-popover--dark[data-popper-placement^="top"] > [data-popper-arrow]::before {
  background: linear-gradient(135deg, transparent 50%, #4c4066 50%);
  box-shadow: 3px 3px 6px -3px rgba(0, 0, 0, 0.2);
}
.ovui-popover--dark[data-popper-placement^="right"] > [data-popper-arrow] {
  left: -5px;
}
.ovui-popover--dark[data-popper-placement^="right"] > [data-popper-arrow]::before {
  background: linear-gradient(225deg, transparent 50%, #4c4066 50%);
  box-shadow: -3px 3px 6px -3px rgba(0, 0, 0, 0.2);
}
.ovui-popover--dark[data-popper-placement^="bottom"] > [data-popper-arrow] {
  top: -5px;
}
.ovui-popover--dark[data-popper-placement^="bottom"] > [data-popper-arrow]::before {
  background: linear-gradient(135deg, #4c4066 50%, transparent 50%);
  box-shadow: -3px -3px 6px -3px rgba(0, 0, 0, 0.2);
}
.ovui-popover--dark[data-popper-placement^="left"] > [data-popper-arrow] {
  right: -5px;
}
.ovui-popover--dark[data-popper-placement^="left"] > [data-popper-arrow]::before {
  background: linear-gradient(45deg, transparent 50%, #4c4066 50%);
  box-shadow: 3px -3px 6px -3px rgba(0, 0, 0, 0.2);
}
.ovui-popover--dark .ovui-popover__title {
  color: #302842;
}
.ovui-popover-fade-enter-active,
.ovui-popover-fade-leave-active {
  transition: opacity 0.2s ease-in-out;
}
.ovui-popover-fade-enter-from,
.ovui-popover-fade-leave-to {
  opacity: 0;
}
.ovui-popover-fade-enter-to,
.ovui-popover-fade-leave-from {
  opacity: 1;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* Empty */
.ovui-empty {
  color: rgba(255, 255, 255, 0.25);
  line-height: 22px;
  font-size: 14px;
}
.ovui-empty__image {
  text-align: center;
  margin: auto;
  width: 38px;
  height: 38px;
}
.ovui-empty__image .ovui-empty__image-icon {
  width: 100%;
  height: 100%;
}
.ovui-empty__description {
  margin-top: 8px;
  text-align: center;
  line-height: 22px;
  font-size: 14px;
}
.ovui-empty__content {
  margin-top: 8px;
  text-align: center;
  line-height: 22px;
  font-size: 14px;
  padding: 0 12px 12px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.ovui-avatar {
  position: relative;
  background-color: #ebebed;
  color: #302842;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ovui-avatar--circle {
  border-radius: 50%;
}
.ovui-avatar--square {
  border-radius: 24px;
}
.ovui-avatar--img {
  background: transparent;
}
.ovui-avatar__img {
  width: 100%;
  height: 100%;
  display: block;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* badge */
.ovui-badge {
  display: inline-flex;
  position: relative;
  font-size: 14px;
}
.ovui-badge__count {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  z-index: 3;
  font-size: 12px;
  line-height: 20px;
  border-radius: 10px;
  color: rgba(0, 0, 0, 0);
  background: #ff0060;
  padding: 0 6px;
  min-width: 20px;
  text-align: center;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
.ovui-badge.ovui-badge--standalone .ovui-badge__count,
.ovui-badge.ovui-badge--standalone .ovui-badge__dot {
  position: relative;
  transform: none;
  top: auto;
}
.ovui-badge.ovui-badge--standalone .ovui-badge__count:not(:last-of-type) {
  min-width: 0;
  padding: 0;
}
.ovui-badge__dot {
  top: 0;
  right: 0;
  position: absolute;
  transform: translate(50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff0060;
}
.ovui-badge__status--info {
  background: #651dff;
}
.ovui-badge__status--success {
  background: #00d5a4;
}
.ovui-badge__status--warning {
  background: #ff7c00;
}
.ovui-badge__status--danger {
  background: #ff0060;
}
.ovui-badge__status--default {
  background: #534c61;
}
.ovui-badge.ovui-badge--rtl:not(.ovui-badge--standalone) {
  direction: rtl;
}
.ovui-badge.ovui-badge--rtl:not(.ovui-badge--standalone) .ovui-badge__count,
.ovui-badge.ovui-badge--rtl:not(.ovui-badge--standalone) .ovui-badge__dot {
  direction: ltr;
  left: 0;
  right: auto;
  transform: translate(-50%, -50%);
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* new breadcrumb token */
.ovui-breadcrumb {
  display: flex;
}
.ovui-breadcrumb-item {
  display: flex;
  text-decoration: none;
}
.ovui-breadcrumb-item__content {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  cursor: pointer;
}
.ovui-breadcrumb-item__content:hover {
  color: #651dff;
}
.ovui-breadcrumb-item__content:focus,
.ovui-breadcrumb-item__content:active {
  color: rgba(101, 29, 255, 0.75);
}
.ovui-breadcrumb-item__separator {
  margin: 0 4px;
  font-size: 16px;
  line-height: 22px;
  vertical-align: middle;
  color: rgba(255, 255, 255, 0.5);
}
.ovui-breadcrumb-item:last-child .ovui-breadcrumb-item__content {
  color: #ffffff;
  font-weight: 400;
  cursor: unset;
}
.ovui-breadcrumb-item:last-child .ovui-breadcrumb-item__content:hover {
  color: #ffffff;
}
.ovui-breadcrumb-item:last-child .ovui-breadcrumb-item__content:focus,
.ovui-breadcrumb-item:last-child .ovui-breadcrumb-item__content:active {
  color: #ffffff;
}
.ovui-breadcrumb-item:last-child .ovui-breadcrumb-item__separator {
  display: none;
}
.ovui-breadcrumb-item__size--xs .ovui-breadcrumb-item__content {
  font-size: 12px;
  line-height: 20px;
}
.ovui-breadcrumb-item__size--xs .ovui-breadcrumb-item__separator {
  font-size: 14px;
  line-height: 20px;
}
.ovui-breadcrumb-item__size--sm .ovui-breadcrumb-item__content {
  font-size: 14px;
  line-height: 22px;
}
.ovui-breadcrumb-item__size--sm .ovui-breadcrumb-item__separator {
  font-size: 16px;
  line-height: 22px;
}
.ovui-breadcrumb-item__size--md .ovui-breadcrumb-item__content {
  font-size: 16px;
  line-height: 24px;
}
.ovui-breadcrumb-item__size--md .ovui-breadcrumb-item__separator {
  font-size: 18px;
  line-height: 24px;
}
.ovui-breadcrumb-item__size--lg .ovui-breadcrumb-item__content {
  font-size: 18px;
  line-height: 26px;
}
.ovui-breadcrumb-item__size--lg .ovui-breadcrumb-item__separator {
  font-size: 20px;
  line-height: 26px;
}
.ovui-breadcrumb-item__size--xl .ovui-breadcrumb-item__content {
  font-size: 20px;
  line-height: 28px;
}
.ovui-breadcrumb-item__size--xl .ovui-breadcrumb-item__separator {
  font-size: 22px;
  line-height: 28px;
}
.ovui-breadcrumb--rtl {
  direction: rtl;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* Button */
/* button  z-index */
/* Button padding */
@keyframes bui-button-primary-fill-focus-wave {
  from {
    box-shadow: 0 0 0 0 rgba(101, 29, 255, 0.2);
  }
  to {
    box-shadow: 0 0 0 6px rgba(101, 29, 255, 0);
  }
}
@keyframes bui-button-info-fill-focus-wave {
  from {
    box-shadow: 0 0 0 0 rgba(101, 29, 255, 0.2);
  }
  to {
    box-shadow: 0 0 0 6px rgba(101, 29, 255, 0);
  }
}
@keyframes bui-button-success-fill-focus-wave {
  from {
    box-shadow: 0 0 0 0 rgba(0, 213, 164, 0.2);
  }
  to {
    box-shadow: 0 0 0 6px rgba(0, 213, 164, 0);
  }
}
@keyframes bui-button-warning-fill-focus-wave {
  from {
    box-shadow: 0 0 0 0 rgba(255, 124, 0, 0.2);
  }
  to {
    box-shadow: 0 0 0 6px rgba(255, 124, 0, 0);
  }
}
@keyframes bui-button-danger-fill-focus-wave {
  from {
    box-shadow: 0 0 0 0 rgba(255, 0, 96, 0.2);
  }
  to {
    box-shadow: 0 0 0 6px rgba(255, 0, 96, 0);
  }
}
.ovui-button {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  outline: none;
  border-radius: 24px;
  border: 1px solid transparent;
  -moz-user-select: none;
       user-select: none;
  -moz-appearance: none;
       appearance: none;
  white-space: nowrap;
  cursor: pointer;
  vertical-align: text-bottom;
}
.ovui-button--default-fill {
  color: #ffffff;
  background-color: #3c344d;
  border-color: #3c344d;
}
.ovui-button--default-fill[data-motion-wave="after"]::after,
.ovui-button--default-fill[data-motion-wave="before"]::before {
  color: #3c344d;
}
.ovui-button--default-fill:hover {
  color: #ffffff;
  background-color: #3c344d;
  border-color: #3c344d;
  transition: all 0.1s ease-in-out;
}
.ovui-button--default-fill:hover[data-motion-wave="after"]::after,
.ovui-button--default-fill:hover[data-motion-wave="before"]::before {
  color: #3c344d;
}
.ovui-button--default-fill:focus {
  color: #ffffff;
  background-color: #302842;
  border-color: #302842;
  transition: background-color 0.1s cubic-bezier(0.08, 0.82, 0.17, 1);
}
.ovui-button--default-fill:focus[data-motion-wave="after"]::after,
.ovui-button--default-fill:focus[data-motion-wave="before"]::before {
  color: #302842;
}
.ovui-button--default-fill:active {
  color: #ffffff;
  background-color: #302842;
  border-color: #302842;
  transition: all 0.1s ease-in-out;
}
.ovui-button--default-fill:active[data-motion-wave="after"]::after,
.ovui-button--default-fill:active[data-motion-wave="before"]::before {
  color: #302842;
}
.ovui-button--default-fill.ovui-button--checked,
.ovui-button--default-fill.ovui-button--checked:hover,
.ovui-button--default-fill.ovui-button--checked:focus,
.ovui-button--default-fill.ovui-button--checked:active {
  color: #ffffff;
  background-color: #302842;
  border-color: #302842;
}
.ovui-button--default-fill.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--default-fill.ovui-button--checked:hover[data-motion-wave="after"]::after,
.ovui-button--default-fill.ovui-button--checked:focus[data-motion-wave="after"]::after,
.ovui-button--default-fill.ovui-button--checked:active[data-motion-wave="after"]::after,
.ovui-button--default-fill.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--default-fill.ovui-button--checked:hover[data-motion-wave="before"]::before,
.ovui-button--default-fill.ovui-button--checked:focus[data-motion-wave="before"]::before,
.ovui-button--default-fill.ovui-button--checked:active[data-motion-wave="before"]::before {
  color: #302842;
}
.ovui-button--default-fill.ovui-button--loading,
.ovui-button--default-fill.ovui-button--disabled,
.ovui-button--default-fill.ovui-button--loading:hover,
.ovui-button--default-fill.ovui-button--disabled:hover,
.ovui-button--default-fill.ovui-button--loading:active,
.ovui-button--default-fill.ovui-button--disabled:active,
.ovui-button--default-fill.ovui-button--loading:focus,
.ovui-button--default-fill.ovui-button--disabled:focus {
  color: rgba(255, 255, 255, 0.5);
  background-color: #302842;
  border-color: #302842;
}
.ovui-button--default-fill.ovui-button--loading[data-motion-wave="after"]::after,
.ovui-button--default-fill.ovui-button--disabled[data-motion-wave="after"]::after,
.ovui-button--default-fill.ovui-button--loading:hover[data-motion-wave="after"]::after,
.ovui-button--default-fill.ovui-button--disabled:hover[data-motion-wave="after"]::after,
.ovui-button--default-fill.ovui-button--loading:active[data-motion-wave="after"]::after,
.ovui-button--default-fill.ovui-button--disabled:active[data-motion-wave="after"]::after,
.ovui-button--default-fill.ovui-button--loading:focus[data-motion-wave="after"]::after,
.ovui-button--default-fill.ovui-button--disabled:focus[data-motion-wave="after"]::after,
.ovui-button--default-fill.ovui-button--loading[data-motion-wave="before"]::before,
.ovui-button--default-fill.ovui-button--disabled[data-motion-wave="before"]::before,
.ovui-button--default-fill.ovui-button--loading:hover[data-motion-wave="before"]::before,
.ovui-button--default-fill.ovui-button--disabled:hover[data-motion-wave="before"]::before,
.ovui-button--default-fill.ovui-button--loading:active[data-motion-wave="before"]::before,
.ovui-button--default-fill.ovui-button--disabled:active[data-motion-wave="before"]::before,
.ovui-button--default-fill.ovui-button--loading:focus[data-motion-wave="before"]::before,
.ovui-button--default-fill.ovui-button--disabled:focus[data-motion-wave="before"]::before {
  color: #302842;
}
.ovui-button--default-fill.ovui-button--loading.ovui-button--checked,
.ovui-button--default-fill.ovui-button--disabled.ovui-button--checked {
  color: rgba(101, 29, 255, 0.34);
  background-color: #381088;
  border-color: rgba(101, 29, 255, 0.34);
}
.ovui-button--default-fill.ovui-button--loading.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--default-fill.ovui-button--disabled.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--default-fill.ovui-button--loading.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--default-fill.ovui-button--disabled.ovui-button--checked[data-motion-wave="before"]::before {
  color: rgba(101, 29, 255, 0.34);
}
.ovui-button--primary-fill {
  color: #ffffff;
  background-color: #651dff;
  border-color: #651dff;
}
.ovui-button--primary-fill[data-motion-wave="after"]::after,
.ovui-button--primary-fill[data-motion-wave="before"]::before {
  color: #651dff;
}
.ovui-button--primary-fill:hover {
  color: #ffffff;
  background-color: #7433ff;
  border-color: #7433ff;
  transition: all 0.1s ease-in-out;
}
.ovui-button--primary-fill:hover[data-motion-wave="after"]::after,
.ovui-button--primary-fill:hover[data-motion-wave="before"]::before {
  color: #7433ff;
}
.ovui-button--primary-fill:active {
  color: #ffffff;
  background-color: rgba(101, 29, 255, 0.75);
  border-color: rgba(101, 29, 255, 0.75);
  transition: all 0.1s ease-in-out;
}
.ovui-button--primary-fill:active[data-motion-wave="after"]::after,
.ovui-button--primary-fill:active[data-motion-wave="before"]::before {
  color: rgba(101, 29, 255, 0.75);
}
.ovui-button--primary-fill:focus {
  color: #ffffff;
  background-color: #7433ff;
  border-color: #7433ff;
  animation: bui-button-focus-wave-effect-primary 2s cubic-bezier(0.08, 0.82, 0.17, 1);
  transition: all 0.1s cubic-bezier(0.08, 0.82, 0.17, 1);
  animation: bui-button-primary-fill-focus-wave 2s cubic-bezier(0.08, 0.82, 0.17, 1);
}
.ovui-button--primary-fill:focus[data-motion-wave="after"]::after,
.ovui-button--primary-fill:focus[data-motion-wave="before"]::before {
  color: #7433ff;
}
@keyframes bui-button-focus-wave-effect-primary {
  from {
    box-shadow: 0 0 0 0 rgba(116, 51, 255, 0.2);
  }
  to {
    box-shadow: 0 0 0 6px rgba(116, 51, 255, 0);
  }
}
.ovui-button--primary-fill.ovui-button--checked,
.ovui-button--primary-fill.ovui-button--checked:hover,
.ovui-button--primary-fill.ovui-button--checked:focus,
.ovui-button--primary-fill.ovui-button--checked:active {
  color: #ffffff;
  background-color: #7433ff;
  border-color: #7433ff;
}
.ovui-button--primary-fill.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--primary-fill.ovui-button--checked:hover[data-motion-wave="after"]::after,
.ovui-button--primary-fill.ovui-button--checked:focus[data-motion-wave="after"]::after,
.ovui-button--primary-fill.ovui-button--checked:active[data-motion-wave="after"]::after,
.ovui-button--primary-fill.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--primary-fill.ovui-button--checked:hover[data-motion-wave="before"]::before,
.ovui-button--primary-fill.ovui-button--checked:focus[data-motion-wave="before"]::before,
.ovui-button--primary-fill.ovui-button--checked:active[data-motion-wave="before"]::before {
  color: #7433ff;
}
.ovui-button--primary-fill.ovui-button--loading,
.ovui-button--primary-fill.ovui-button--disabled,
.ovui-button--primary-fill.ovui-button--loading:hover,
.ovui-button--primary-fill.ovui-button--disabled:hover,
.ovui-button--primary-fill.ovui-button--loading:focus,
.ovui-button--primary-fill.ovui-button--disabled:focus,
.ovui-button--primary-fill.ovui-button--loading:active,
.ovui-button--primary-fill.ovui-button--disabled:active {
  color: rgba(255, 255, 255, 0.5);
  background-color: rgba(101, 29, 255, 0.34);
  border-color: rgba(101, 29, 255, 0.34);
}
.ovui-button--primary-fill.ovui-button--loading[data-motion-wave="after"]::after,
.ovui-button--primary-fill.ovui-button--disabled[data-motion-wave="after"]::after,
.ovui-button--primary-fill.ovui-button--loading:hover[data-motion-wave="after"]::after,
.ovui-button--primary-fill.ovui-button--disabled:hover[data-motion-wave="after"]::after,
.ovui-button--primary-fill.ovui-button--loading:focus[data-motion-wave="after"]::after,
.ovui-button--primary-fill.ovui-button--disabled:focus[data-motion-wave="after"]::after,
.ovui-button--primary-fill.ovui-button--loading:active[data-motion-wave="after"]::after,
.ovui-button--primary-fill.ovui-button--disabled:active[data-motion-wave="after"]::after,
.ovui-button--primary-fill.ovui-button--loading[data-motion-wave="before"]::before,
.ovui-button--primary-fill.ovui-button--disabled[data-motion-wave="before"]::before,
.ovui-button--primary-fill.ovui-button--loading:hover[data-motion-wave="before"]::before,
.ovui-button--primary-fill.ovui-button--disabled:hover[data-motion-wave="before"]::before,
.ovui-button--primary-fill.ovui-button--loading:focus[data-motion-wave="before"]::before,
.ovui-button--primary-fill.ovui-button--disabled:focus[data-motion-wave="before"]::before,
.ovui-button--primary-fill.ovui-button--loading:active[data-motion-wave="before"]::before,
.ovui-button--primary-fill.ovui-button--disabled:active[data-motion-wave="before"]::before {
  color: rgba(101, 29, 255, 0.34);
}
.ovui-button--info-fill {
  color: #ffffff;
  background-color: #651dff;
  border-color: #651dff;
}
.ovui-button--info-fill[data-motion-wave="after"]::after,
.ovui-button--info-fill[data-motion-wave="before"]::before {
  color: #651dff;
}
.ovui-button--info-fill:hover {
  color: #ffffff;
  background-color: #7433ff;
  border-color: #7433ff;
  transition: all 0.1s ease-in-out;
}
.ovui-button--info-fill:hover[data-motion-wave="after"]::after,
.ovui-button--info-fill:hover[data-motion-wave="before"]::before {
  color: #7433ff;
}
.ovui-button--info-fill:focus {
  color: #ffffff;
  background-color: rgba(101, 29, 255, 0.75);
  border-color: rgba(101, 29, 255, 0.75);
  animation: bui-button-focus-wave-effect-info 2s cubic-bezier(0.08, 0.82, 0.17, 1);
  transition: all 0.1s cubic-bezier(0.08, 0.82, 0.17, 1);
  animation: bui-button-info-fill-focus-wave 2s cubic-bezier(0.08, 0.82, 0.17, 1);
}
.ovui-button--info-fill:focus[data-motion-wave="after"]::after,
.ovui-button--info-fill:focus[data-motion-wave="before"]::before {
  color: rgba(101, 29, 255, 0.75);
}
@keyframes bui-button-focus-wave-effect-info {
  from {
    box-shadow: 0 0 0 0 rgba(101, 29, 255, 0.2);
  }
  to {
    box-shadow: 0 0 0 6px rgba(101, 29, 255, 0);
  }
}
.ovui-button--info-fill:active {
  color: #ffffff;
  background-color: rgba(101, 29, 255, 0.75);
  border-color: rgba(101, 29, 255, 0.75);
  transition: all 0.1s ease-in-out;
}
.ovui-button--info-fill:active[data-motion-wave="after"]::after,
.ovui-button--info-fill:active[data-motion-wave="before"]::before {
  color: rgba(101, 29, 255, 0.75);
}
.ovui-button--info-fill.ovui-button--checked,
.ovui-button--info-fill.ovui-button--checked:hover,
.ovui-button--info-fill.ovui-button--checked:focus,
.ovui-button--info-fill.ovui-button--checked:active {
  color: #ffffff;
  background-color: rgba(101, 29, 255, 0.75);
  border-color: rgba(101, 29, 255, 0.75);
}
.ovui-button--info-fill.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--info-fill.ovui-button--checked:hover[data-motion-wave="after"]::after,
.ovui-button--info-fill.ovui-button--checked:focus[data-motion-wave="after"]::after,
.ovui-button--info-fill.ovui-button--checked:active[data-motion-wave="after"]::after,
.ovui-button--info-fill.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--info-fill.ovui-button--checked:hover[data-motion-wave="before"]::before,
.ovui-button--info-fill.ovui-button--checked:focus[data-motion-wave="before"]::before,
.ovui-button--info-fill.ovui-button--checked:active[data-motion-wave="before"]::before {
  color: rgba(101, 29, 255, 0.75);
}
.ovui-button--info-fill.ovui-button--loading,
.ovui-button--info-fill.ovui-button--disabled,
.ovui-button--info-fill.ovui-button--loading:hover,
.ovui-button--info-fill.ovui-button--disabled:hover,
.ovui-button--info-fill.ovui-button--loading:focus,
.ovui-button--info-fill.ovui-button--disabled:focus,
.ovui-button--info-fill.ovui-button--loading:active,
.ovui-button--info-fill.ovui-button--disabled:active {
  color: rgba(255, 255, 255, 0.5);
  background-color: rgba(101, 29, 255, 0.34);
  border-color: rgba(101, 29, 255, 0.34);
}
.ovui-button--info-fill.ovui-button--loading[data-motion-wave="after"]::after,
.ovui-button--info-fill.ovui-button--disabled[data-motion-wave="after"]::after,
.ovui-button--info-fill.ovui-button--loading:hover[data-motion-wave="after"]::after,
.ovui-button--info-fill.ovui-button--disabled:hover[data-motion-wave="after"]::after,
.ovui-button--info-fill.ovui-button--loading:focus[data-motion-wave="after"]::after,
.ovui-button--info-fill.ovui-button--disabled:focus[data-motion-wave="after"]::after,
.ovui-button--info-fill.ovui-button--loading:active[data-motion-wave="after"]::after,
.ovui-button--info-fill.ovui-button--disabled:active[data-motion-wave="after"]::after,
.ovui-button--info-fill.ovui-button--loading[data-motion-wave="before"]::before,
.ovui-button--info-fill.ovui-button--disabled[data-motion-wave="before"]::before,
.ovui-button--info-fill.ovui-button--loading:hover[data-motion-wave="before"]::before,
.ovui-button--info-fill.ovui-button--disabled:hover[data-motion-wave="before"]::before,
.ovui-button--info-fill.ovui-button--loading:focus[data-motion-wave="before"]::before,
.ovui-button--info-fill.ovui-button--disabled:focus[data-motion-wave="before"]::before,
.ovui-button--info-fill.ovui-button--loading:active[data-motion-wave="before"]::before,
.ovui-button--info-fill.ovui-button--disabled:active[data-motion-wave="before"]::before {
  color: rgba(101, 29, 255, 0.34);
}
.ovui-button--warning-fill {
  color: #ffffff;
  background-color: #ff7c00;
  border-color: #ff7c00;
}
.ovui-button--warning-fill[data-motion-wave="after"]::after,
.ovui-button--warning-fill[data-motion-wave="before"]::before {
  color: #ff7c00;
}
.ovui-button--warning-fill:hover {
  color: #ffffff;
  background-color: #ff932f;
  border-color: #ff932f;
  transition: all 0.1s ease-in-out;
}
.ovui-button--warning-fill:hover[data-motion-wave="after"]::after,
.ovui-button--warning-fill:hover[data-motion-wave="before"]::before {
  color: #ff932f;
}
.ovui-button--warning-fill:focus {
  color: #ffffff;
  background-color: #ff932f;
  border-color: #ff932f;
  animation: bui-button-focus-wave-effect-warning 2s cubic-bezier(0.08, 0.82, 0.17, 1);
  transition: all 0.1s cubic-bezier(0.08, 0.82, 0.17, 1);
  animation: bui-button-warning-fill-focus-wave 2s cubic-bezier(0.08, 0.82, 0.17, 1);
}
.ovui-button--warning-fill:focus[data-motion-wave="after"]::after,
.ovui-button--warning-fill:focus[data-motion-wave="before"]::before {
  color: #ff932f;
}
@keyframes bui-button-focus-wave-effect-warning {
  from {
    box-shadow: 0 0 0 0 rgba(255, 147, 47, 0.2);
  }
  to {
    box-shadow: 0 0 0 6px rgba(255, 147, 47, 0);
  }
}
.ovui-button--warning-fill:active {
  color: #ffffff;
  background-color: #dc6a00;
  border-color: #dc6a00;
  transition: all 0.1s ease-in-out;
}
.ovui-button--warning-fill:active[data-motion-wave="after"]::after,
.ovui-button--warning-fill:active[data-motion-wave="before"]::before {
  color: #dc6a00;
}
.ovui-button--warning-fill.ovui-button--checked,
.ovui-button--warning-fill.ovui-button--checked:hover,
.ovui-button--warning-fill.ovui-button--checked:focus,
.ovui-button--warning-fill.ovui-button--checked:active {
  color: #ffffff;
  background-color: #ff932f;
  border-color: #ff932f;
}
.ovui-button--warning-fill.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--warning-fill.ovui-button--checked:hover[data-motion-wave="after"]::after,
.ovui-button--warning-fill.ovui-button--checked:focus[data-motion-wave="after"]::after,
.ovui-button--warning-fill.ovui-button--checked:active[data-motion-wave="after"]::after,
.ovui-button--warning-fill.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--warning-fill.ovui-button--checked:hover[data-motion-wave="before"]::before,
.ovui-button--warning-fill.ovui-button--checked:focus[data-motion-wave="before"]::before,
.ovui-button--warning-fill.ovui-button--checked:active[data-motion-wave="before"]::before {
  color: #ff932f;
}
.ovui-button--warning-fill.ovui-button--loading,
.ovui-button--warning-fill.ovui-button--disabled,
.ovui-button--warning-fill.ovui-button--loading:hover,
.ovui-button--warning-fill.ovui-button--disabled:hover,
.ovui-button--warning-fill.ovui-button--loading:focus,
.ovui-button--warning-fill.ovui-button--disabled:focus,
.ovui-button--warning-fill.ovui-button--loading:active,
.ovui-button--warning-fill.ovui-button--disabled:active {
  color: rgba(255, 255, 255, 0.5);
  background-color: #ffc48d;
  border-color: #ffc48d;
}
.ovui-button--warning-fill.ovui-button--loading[data-motion-wave="after"]::after,
.ovui-button--warning-fill.ovui-button--disabled[data-motion-wave="after"]::after,
.ovui-button--warning-fill.ovui-button--loading:hover[data-motion-wave="after"]::after,
.ovui-button--warning-fill.ovui-button--disabled:hover[data-motion-wave="after"]::after,
.ovui-button--warning-fill.ovui-button--loading:focus[data-motion-wave="after"]::after,
.ovui-button--warning-fill.ovui-button--disabled:focus[data-motion-wave="after"]::after,
.ovui-button--warning-fill.ovui-button--loading:active[data-motion-wave="after"]::after,
.ovui-button--warning-fill.ovui-button--disabled:active[data-motion-wave="after"]::after,
.ovui-button--warning-fill.ovui-button--loading[data-motion-wave="before"]::before,
.ovui-button--warning-fill.ovui-button--disabled[data-motion-wave="before"]::before,
.ovui-button--warning-fill.ovui-button--loading:hover[data-motion-wave="before"]::before,
.ovui-button--warning-fill.ovui-button--disabled:hover[data-motion-wave="before"]::before,
.ovui-button--warning-fill.ovui-button--loading:focus[data-motion-wave="before"]::before,
.ovui-button--warning-fill.ovui-button--disabled:focus[data-motion-wave="before"]::before,
.ovui-button--warning-fill.ovui-button--loading:active[data-motion-wave="before"]::before,
.ovui-button--warning-fill.ovui-button--disabled:active[data-motion-wave="before"]::before {
  color: #ffc48d;
}
.ovui-button--danger-fill {
  color: #ffffff;
  background-color: #ff0060;
  border-color: #ff0060;
}
.ovui-button--danger-fill[data-motion-wave="after"]::after,
.ovui-button--danger-fill[data-motion-wave="before"]::before {
  color: #ff0060;
}
.ovui-button--danger-fill:hover {
  color: #ffffff;
  background-color: #ff2f7f;
  border-color: #ff2f7f;
  transition: all 0.1s ease-in-out;
}
.ovui-button--danger-fill:hover[data-motion-wave="after"]::after,
.ovui-button--danger-fill:hover[data-motion-wave="before"]::before {
  color: #ff2f7f;
}
.ovui-button--danger-fill:focus {
  color: #ffffff;
  background-color: #ff2f7f;
  border-color: #ff2f7f;
  animation: bui-button-focus-wave-effect-danger 2s cubic-bezier(0.08, 0.82, 0.17, 1);
  transition: all 0.1s cubic-bezier(0.08, 0.82, 0.17, 1);
  animation: bui-button-danger-fill-focus-wave 2s cubic-bezier(0.08, 0.82, 0.17, 1);
}
.ovui-button--danger-fill:focus[data-motion-wave="after"]::after,
.ovui-button--danger-fill:focus[data-motion-wave="before"]::before {
  color: #ff2f7f;
}
@keyframes bui-button-focus-wave-effect-danger {
  from {
    box-shadow: 0 0 0 0 rgba(255, 47, 127, 0.2);
  }
  to {
    box-shadow: 0 0 0 6px rgba(255, 47, 127, 0);
  }
}
.ovui-button--danger-fill:active {
  color: #ffffff;
  background-color: #dc0054;
  border-color: #dc0054;
  transition: all 0.1s ease-in-out;
}
.ovui-button--danger-fill:active[data-motion-wave="after"]::after,
.ovui-button--danger-fill:active[data-motion-wave="before"]::before {
  color: #dc0054;
}
.ovui-button--danger-fill.ovui-button--checked,
.ovui-button--danger-fill.ovui-button--checked:hover,
.ovui-button--danger-fill.ovui-button--checked:focus,
.ovui-button--danger-fill.ovui-button--checked:active {
  color: #ffffff;
  background-color: #ff2f7f;
  border-color: #ff2f7f;
}
.ovui-button--danger-fill.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--danger-fill.ovui-button--checked:hover[data-motion-wave="after"]::after,
.ovui-button--danger-fill.ovui-button--checked:focus[data-motion-wave="after"]::after,
.ovui-button--danger-fill.ovui-button--checked:active[data-motion-wave="after"]::after,
.ovui-button--danger-fill.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--danger-fill.ovui-button--checked:hover[data-motion-wave="before"]::before,
.ovui-button--danger-fill.ovui-button--checked:focus[data-motion-wave="before"]::before,
.ovui-button--danger-fill.ovui-button--checked:active[data-motion-wave="before"]::before {
  color: #ff2f7f;
}
.ovui-button--danger-fill.ovui-button--loading,
.ovui-button--danger-fill.ovui-button--disabled,
.ovui-button--danger-fill.ovui-button--loading:hover,
.ovui-button--danger-fill.ovui-button--disabled:hover,
.ovui-button--danger-fill.ovui-button--loading:focus,
.ovui-button--danger-fill.ovui-button--disabled:focus,
.ovui-button--danger-fill.ovui-button--loading:active,
.ovui-button--danger-fill.ovui-button--disabled:active {
  color: rgba(255, 255, 255, 0.5);
  background-color: #ff8db9;
  border-color: #ff8db9;
}
.ovui-button--danger-fill.ovui-button--loading[data-motion-wave="after"]::after,
.ovui-button--danger-fill.ovui-button--disabled[data-motion-wave="after"]::after,
.ovui-button--danger-fill.ovui-button--loading:hover[data-motion-wave="after"]::after,
.ovui-button--danger-fill.ovui-button--disabled:hover[data-motion-wave="after"]::after,
.ovui-button--danger-fill.ovui-button--loading:focus[data-motion-wave="after"]::after,
.ovui-button--danger-fill.ovui-button--disabled:focus[data-motion-wave="after"]::after,
.ovui-button--danger-fill.ovui-button--loading:active[data-motion-wave="after"]::after,
.ovui-button--danger-fill.ovui-button--disabled:active[data-motion-wave="after"]::after,
.ovui-button--danger-fill.ovui-button--loading[data-motion-wave="before"]::before,
.ovui-button--danger-fill.ovui-button--disabled[data-motion-wave="before"]::before,
.ovui-button--danger-fill.ovui-button--loading:hover[data-motion-wave="before"]::before,
.ovui-button--danger-fill.ovui-button--disabled:hover[data-motion-wave="before"]::before,
.ovui-button--danger-fill.ovui-button--loading:focus[data-motion-wave="before"]::before,
.ovui-button--danger-fill.ovui-button--disabled:focus[data-motion-wave="before"]::before,
.ovui-button--danger-fill.ovui-button--loading:active[data-motion-wave="before"]::before,
.ovui-button--danger-fill.ovui-button--disabled:active[data-motion-wave="before"]::before {
  color: #ff8db9;
}
.ovui-button--success-fill {
  color: #ffffff;
  background-color: #00d5a4;
  border-color: #00d5a4;
}
.ovui-button--success-fill[data-motion-wave="after"]::after,
.ovui-button--success-fill[data-motion-wave="before"]::before {
  color: #00d5a4;
}
.ovui-button--success-fill:hover {
  color: #ffffff;
  background-color: #0dffc7;
  border-color: #0dffc7;
  transition: all 0.1s ease-in-out;
}
.ovui-button--success-fill:hover[data-motion-wave="after"]::after,
.ovui-button--success-fill:hover[data-motion-wave="before"]::before {
  color: #0dffc7;
}
.ovui-button--success-fill:focus {
  color: #ffffff;
  background-color: #0dffc7;
  border-color: #0dffc7;
  animation: bui-button-focus-wave-effect-success 2s cubic-bezier(0.08, 0.82, 0.17, 1);
  transition: all 0.1s cubic-bezier(0.08, 0.82, 0.17, 1);
  animation: bui-button-success-fill-focus-wave 2s cubic-bezier(0.08, 0.82, 0.17, 1);
}
.ovui-button--success-fill:focus[data-motion-wave="after"]::after,
.ovui-button--success-fill:focus[data-motion-wave="before"]::before {
  color: #0dffc7;
}
@keyframes bui-button-focus-wave-effect-success {
  from {
    box-shadow: 0 0 0 0 rgba(13, 255, 199, 0.2);
  }
  to {
    box-shadow: 0 0 0 6px rgba(13, 255, 199, 0);
  }
}
.ovui-button--success-fill:active {
  color: #ffffff;
  background-color: #00bb8f;
  border-color: #00bb8f;
  transition: all 0.1s ease-in-out;
}
.ovui-button--success-fill:active[data-motion-wave="after"]::after,
.ovui-button--success-fill:active[data-motion-wave="before"]::before {
  color: #00bb8f;
}
.ovui-button--success-fill.ovui-button--checked,
.ovui-button--success-fill.ovui-button--checked:hover,
.ovui-button--success-fill.ovui-button--checked:focus,
.ovui-button--success-fill.ovui-button--checked:active {
  color: #ffffff;
  background-color: #0dffc7;
  border-color: #0dffc7;
}
.ovui-button--success-fill.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--success-fill.ovui-button--checked:hover[data-motion-wave="after"]::after,
.ovui-button--success-fill.ovui-button--checked:focus[data-motion-wave="after"]::after,
.ovui-button--success-fill.ovui-button--checked:active[data-motion-wave="after"]::after,
.ovui-button--success-fill.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--success-fill.ovui-button--checked:hover[data-motion-wave="before"]::before,
.ovui-button--success-fill.ovui-button--checked:focus[data-motion-wave="before"]::before,
.ovui-button--success-fill.ovui-button--checked:active[data-motion-wave="before"]::before {
  color: #0dffc7;
}
.ovui-button--success-fill.ovui-button--loading,
.ovui-button--success-fill.ovui-button--disabled,
.ovui-button--success-fill.ovui-button--loading:hover,
.ovui-button--success-fill.ovui-button--disabled:hover,
.ovui-button--success-fill.ovui-button--loading:focus,
.ovui-button--success-fill.ovui-button--disabled:focus,
.ovui-button--success-fill.ovui-button--loading:active,
.ovui-button--success-fill.ovui-button--disabled:active {
  color: rgba(255, 255, 255, 0.5);
  background-color: #7cffe0;
  border-color: #7cffe0;
}
.ovui-button--success-fill.ovui-button--loading[data-motion-wave="after"]::after,
.ovui-button--success-fill.ovui-button--disabled[data-motion-wave="after"]::after,
.ovui-button--success-fill.ovui-button--loading:hover[data-motion-wave="after"]::after,
.ovui-button--success-fill.ovui-button--disabled:hover[data-motion-wave="after"]::after,
.ovui-button--success-fill.ovui-button--loading:focus[data-motion-wave="after"]::after,
.ovui-button--success-fill.ovui-button--disabled:focus[data-motion-wave="after"]::after,
.ovui-button--success-fill.ovui-button--loading:active[data-motion-wave="after"]::after,
.ovui-button--success-fill.ovui-button--disabled:active[data-motion-wave="after"]::after,
.ovui-button--success-fill.ovui-button--loading[data-motion-wave="before"]::before,
.ovui-button--success-fill.ovui-button--disabled[data-motion-wave="before"]::before,
.ovui-button--success-fill.ovui-button--loading:hover[data-motion-wave="before"]::before,
.ovui-button--success-fill.ovui-button--disabled:hover[data-motion-wave="before"]::before,
.ovui-button--success-fill.ovui-button--loading:focus[data-motion-wave="before"]::before,
.ovui-button--success-fill.ovui-button--disabled:focus[data-motion-wave="before"]::before,
.ovui-button--success-fill.ovui-button--loading:active[data-motion-wave="before"]::before,
.ovui-button--success-fill.ovui-button--disabled:active[data-motion-wave="before"]::before {
  color: #7cffe0;
}
.ovui-button--default-stroke {
  color: #ffffff;
  background-color: #3c344d;
  border-color: #3c344d;
}
.ovui-button--default-stroke[data-motion-wave="after"]::after,
.ovui-button--default-stroke[data-motion-wave="before"]::before {
  color: #3c344d;
}
.ovui-button--default-stroke:hover {
  color: #ffffff;
  background-color: #3c344d;
  border-color: #3c344d;
  transition: all 0.1s ease-in-out;
}
.ovui-button--default-stroke:hover[data-motion-wave="after"]::after,
.ovui-button--default-stroke:hover[data-motion-wave="before"]::before {
  color: #3c344d;
}
.ovui-button--default-stroke:focus {
  color: #ffffff;
  background-color: #3c344d;
  border-color: #3c344d;
  transition: all 0.1s cubic-bezier(0.08, 0.82, 0.17, 1);
  animation: bui-button-primary-fill-focus-wave 2s cubic-bezier(0.08, 0.82, 0.17, 1);
}
.ovui-button--default-stroke:focus[data-motion-wave="after"]::after,
.ovui-button--default-stroke:focus[data-motion-wave="before"]::before {
  color: #3c344d;
}
.ovui-button--default-stroke:active {
  color: #ffffff;
  background-color: #3c344d;
  border-color: #3c344d;
  transition: all 0.1s ease-in-out;
}
.ovui-button--default-stroke:active[data-motion-wave="after"]::after,
.ovui-button--default-stroke:active[data-motion-wave="before"]::before {
  color: #3c344d;
}
.ovui-button--default-stroke.ovui-button--checked,
.ovui-button--default-stroke.ovui-button--checked:hover,
.ovui-button--default-stroke.ovui-button--checked:focus,
.ovui-button--default-stroke.ovui-button--checked:active {
  color: #ffffff;
  background-color: #3c344d;
  border-color: #3c344d;
}
.ovui-button--default-stroke.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--default-stroke.ovui-button--checked:hover[data-motion-wave="after"]::after,
.ovui-button--default-stroke.ovui-button--checked:focus[data-motion-wave="after"]::after,
.ovui-button--default-stroke.ovui-button--checked:active[data-motion-wave="after"]::after,
.ovui-button--default-stroke.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--default-stroke.ovui-button--checked:hover[data-motion-wave="before"]::before,
.ovui-button--default-stroke.ovui-button--checked:focus[data-motion-wave="before"]::before,
.ovui-button--default-stroke.ovui-button--checked:active[data-motion-wave="before"]::before {
  color: #3c344d;
}
.ovui-button--default-stroke.ovui-button--loading,
.ovui-button--default-stroke.ovui-button--disabled,
.ovui-button--default-stroke.ovui-button--loading:hover,
.ovui-button--default-stroke.ovui-button--disabled:hover,
.ovui-button--default-stroke.ovui-button--loading:active,
.ovui-button--default-stroke.ovui-button--disabled:active,
.ovui-button--default-stroke.ovui-button--loading:focus,
.ovui-button--default-stroke.ovui-button--disabled:focus {
  color: rgba(255, 255, 255, 0.5);
  background-color: #302842;
  border-color: #302842;
}
.ovui-button--default-stroke.ovui-button--loading[data-motion-wave="after"]::after,
.ovui-button--default-stroke.ovui-button--disabled[data-motion-wave="after"]::after,
.ovui-button--default-stroke.ovui-button--loading:hover[data-motion-wave="after"]::after,
.ovui-button--default-stroke.ovui-button--disabled:hover[data-motion-wave="after"]::after,
.ovui-button--default-stroke.ovui-button--loading:active[data-motion-wave="after"]::after,
.ovui-button--default-stroke.ovui-button--disabled:active[data-motion-wave="after"]::after,
.ovui-button--default-stroke.ovui-button--loading:focus[data-motion-wave="after"]::after,
.ovui-button--default-stroke.ovui-button--disabled:focus[data-motion-wave="after"]::after,
.ovui-button--default-stroke.ovui-button--loading[data-motion-wave="before"]::before,
.ovui-button--default-stroke.ovui-button--disabled[data-motion-wave="before"]::before,
.ovui-button--default-stroke.ovui-button--loading:hover[data-motion-wave="before"]::before,
.ovui-button--default-stroke.ovui-button--disabled:hover[data-motion-wave="before"]::before,
.ovui-button--default-stroke.ovui-button--loading:active[data-motion-wave="before"]::before,
.ovui-button--default-stroke.ovui-button--disabled:active[data-motion-wave="before"]::before,
.ovui-button--default-stroke.ovui-button--loading:focus[data-motion-wave="before"]::before,
.ovui-button--default-stroke.ovui-button--disabled:focus[data-motion-wave="before"]::before {
  color: #302842;
}
.ovui-button--default-stroke.ovui-button--loading.ovui-button--checked,
.ovui-button--default-stroke.ovui-button--disabled.ovui-button--checked {
  color: rgba(101, 29, 255, 0.34);
  background-color: #381088;
  border-color: rgba(101, 29, 255, 0.34);
}
.ovui-button--default-stroke.ovui-button--loading.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--default-stroke.ovui-button--disabled.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--default-stroke.ovui-button--loading.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--default-stroke.ovui-button--disabled.ovui-button--checked[data-motion-wave="before"]::before {
  color: rgba(101, 29, 255, 0.34);
}
.ovui-button--primary-stroke {
  color: #651dff;
  background-color: rgba(0, 0, 0, 0);
  border-color: #651dff;
}
.ovui-button--primary-stroke[data-motion-wave="after"]::after,
.ovui-button--primary-stroke[data-motion-wave="before"]::before {
  color: #651dff;
}
.ovui-button--primary-stroke:not(.ovui-button--disabled):hover {
  color: #7433ff;
  background-color: rgba(0, 0, 0, 0);
  border-color: #7433ff;
}
.ovui-button--primary-stroke:not(.ovui-button--disabled):hover[data-motion-wave="after"]::after,
.ovui-button--primary-stroke:not(.ovui-button--disabled):hover[data-motion-wave="before"]::before {
  color: #7433ff;
}
.ovui-button--primary-stroke:not(.ovui-button--disabled):focus {
  color: rgba(101, 29, 255, 0.75);
  background-color: rgba(0, 0, 0, 0);
  border-color: rgba(101, 29, 255, 0.75);
  animation: bui-button-focus-wave-effect-primary 2s cubic-bezier(0.08, 0.82, 0.17, 1);
  transition: all 0.1s cubic-bezier(0.08, 0.82, 0.17, 1);
  animation: bui-button-primary-fill-focus-wave 2s cubic-bezier(0.08, 0.82, 0.17, 1);
}
.ovui-button--primary-stroke:not(.ovui-button--disabled):focus[data-motion-wave="after"]::after,
.ovui-button--primary-stroke:not(.ovui-button--disabled):focus[data-motion-wave="before"]::before {
  color: rgba(101, 29, 255, 0.75);
}
@keyframes bui-button-focus-wave-effect-primary {
  from {
    box-shadow: 0 0 0 0 rgba(116, 51, 255, 0.2);
  }
  to {
    box-shadow: 0 0 0 6px rgba(116, 51, 255, 0);
  }
}
.ovui-button--primary-stroke:not(.ovui-button--disabled):active {
  color: rgba(101, 29, 255, 0.75);
  background-color: rgba(0, 0, 0, 0);
  border-color: rgba(101, 29, 255, 0.75);
}
.ovui-button--primary-stroke:not(.ovui-button--disabled):active[data-motion-wave="after"]::after,
.ovui-button--primary-stroke:not(.ovui-button--disabled):active[data-motion-wave="before"]::before {
  color: rgba(101, 29, 255, 0.75);
}
.ovui-button--primary-stroke:not(.ovui-button--disabled).ovui-button--checked,
.ovui-button--primary-stroke:not(.ovui-button--disabled).ovui-button--checked:focus,
.ovui-button--primary-stroke:not(.ovui-button--disabled).ovui-button--checked:hover,
.ovui-button--primary-stroke:not(.ovui-button--disabled).ovui-button--checked:active {
  color: rgba(101, 29, 255, 0.75);
  background-color: rgba(0, 0, 0, 0);
  border-color: rgba(101, 29, 255, 0.75);
}
.ovui-button--primary-stroke:not(.ovui-button--disabled).ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--primary-stroke:not(.ovui-button--disabled).ovui-button--checked:focus[data-motion-wave="after"]::after,
.ovui-button--primary-stroke:not(.ovui-button--disabled).ovui-button--checked:hover[data-motion-wave="after"]::after,
.ovui-button--primary-stroke:not(.ovui-button--disabled).ovui-button--checked:active[data-motion-wave="after"]::after,
.ovui-button--primary-stroke:not(.ovui-button--disabled).ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--primary-stroke:not(.ovui-button--disabled).ovui-button--checked:focus[data-motion-wave="before"]::before,
.ovui-button--primary-stroke:not(.ovui-button--disabled).ovui-button--checked:hover[data-motion-wave="before"]::before,
.ovui-button--primary-stroke:not(.ovui-button--disabled).ovui-button--checked:active[data-motion-wave="before"]::before {
  color: rgba(101, 29, 255, 0.75);
}
.ovui-button--primary-stroke.ovui-button--loading,
.ovui-button--primary-stroke.ovui-button--disabled,
.ovui-button--primary-stroke.ovui-button--loading:hover,
.ovui-button--primary-stroke.ovui-button--disabled:hover,
.ovui-button--primary-stroke.ovui-button--loading:focus,
.ovui-button--primary-stroke.ovui-button--disabled:focus,
.ovui-button--primary-stroke.ovui-button--loading:active,
.ovui-button--primary-stroke.ovui-button--disabled:active {
  color: rgba(101, 29, 255, 0.34);
  background-color: rgba(0, 0, 0, 0);
  border-color: rgba(101, 29, 255, 0.34);
}
.ovui-button--primary-stroke.ovui-button--loading[data-motion-wave="after"]::after,
.ovui-button--primary-stroke.ovui-button--disabled[data-motion-wave="after"]::after,
.ovui-button--primary-stroke.ovui-button--loading:hover[data-motion-wave="after"]::after,
.ovui-button--primary-stroke.ovui-button--disabled:hover[data-motion-wave="after"]::after,
.ovui-button--primary-stroke.ovui-button--loading:focus[data-motion-wave="after"]::after,
.ovui-button--primary-stroke.ovui-button--disabled:focus[data-motion-wave="after"]::after,
.ovui-button--primary-stroke.ovui-button--loading:active[data-motion-wave="after"]::after,
.ovui-button--primary-stroke.ovui-button--disabled:active[data-motion-wave="after"]::after,
.ovui-button--primary-stroke.ovui-button--loading[data-motion-wave="before"]::before,
.ovui-button--primary-stroke.ovui-button--disabled[data-motion-wave="before"]::before,
.ovui-button--primary-stroke.ovui-button--loading:hover[data-motion-wave="before"]::before,
.ovui-button--primary-stroke.ovui-button--disabled:hover[data-motion-wave="before"]::before,
.ovui-button--primary-stroke.ovui-button--loading:focus[data-motion-wave="before"]::before,
.ovui-button--primary-stroke.ovui-button--disabled:focus[data-motion-wave="before"]::before,
.ovui-button--primary-stroke.ovui-button--loading:active[data-motion-wave="before"]::before,
.ovui-button--primary-stroke.ovui-button--disabled:active[data-motion-wave="before"]::before {
  color: rgba(101, 29, 255, 0.34);
}
.ovui-button--primary-stroke.ovui-button--loading.ovui-button--checked,
.ovui-button--primary-stroke.ovui-button--disabled.ovui-button--checked,
.ovui-button--primary-stroke.ovui-button--loading:hover.ovui-button--checked,
.ovui-button--primary-stroke.ovui-button--disabled:hover.ovui-button--checked,
.ovui-button--primary-stroke.ovui-button--loading:focus.ovui-button--checked,
.ovui-button--primary-stroke.ovui-button--disabled:focus.ovui-button--checked,
.ovui-button--primary-stroke.ovui-button--loading:active.ovui-button--checked,
.ovui-button--primary-stroke.ovui-button--disabled:active.ovui-button--checked {
  color: rgba(101, 29, 255, 0.34);
  background-color: #381088;
  border-color: rgba(101, 29, 255, 0.34);
}
.ovui-button--primary-stroke.ovui-button--loading.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--primary-stroke.ovui-button--disabled.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--primary-stroke.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--primary-stroke.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--primary-stroke.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--primary-stroke.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--primary-stroke.ovui-button--loading:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--primary-stroke.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--primary-stroke.ovui-button--loading.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--primary-stroke.ovui-button--disabled.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--primary-stroke.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--primary-stroke.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--primary-stroke.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--primary-stroke.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--primary-stroke.ovui-button--loading:active.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--primary-stroke.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="before"]::before {
  color: rgba(101, 29, 255, 0.34);
}
.ovui-button--success-stroke {
  color: #00d5a4;
  background-color: rgba(0, 0, 0, 0);
  border-color: #00d5a4;
}
.ovui-button--success-stroke[data-motion-wave="after"]::after,
.ovui-button--success-stroke[data-motion-wave="before"]::before {
  color: #00d5a4;
}
.ovui-button--success-stroke:hover {
  color: #0dffc7;
  background-color: rgba(0, 0, 0, 0);
  border-color: #0dffc7;
}
.ovui-button--success-stroke:hover[data-motion-wave="after"]::after,
.ovui-button--success-stroke:hover[data-motion-wave="before"]::before {
  color: #0dffc7;
}
.ovui-button--success-stroke:focus {
  color: #00bb8f;
  background-color: rgba(0, 0, 0, 0);
  border-color: #00bb8f;
  animation: bui-button-focus-wave-effect-success 2s cubic-bezier(0.08, 0.82, 0.17, 1);
  transition: all 0.1s cubic-bezier(0.08, 0.82, 0.17, 1);
  animation: bui-button-success-fill-focus-wave 2s cubic-bezier(0.08, 0.82, 0.17, 1);
}
.ovui-button--success-stroke:focus[data-motion-wave="after"]::after,
.ovui-button--success-stroke:focus[data-motion-wave="before"]::before {
  color: #00bb8f;
}
@keyframes bui-button-focus-wave-effect-success {
  from {
    box-shadow: 0 0 0 0 rgba(13, 255, 199, 0.2);
  }
  to {
    box-shadow: 0 0 0 6px rgba(13, 255, 199, 0);
  }
}
.ovui-button--success-stroke:active {
  color: #00bb8f;
  background-color: rgba(0, 0, 0, 0);
  border-color: #00bb8f;
}
.ovui-button--success-stroke:active[data-motion-wave="after"]::after,
.ovui-button--success-stroke:active[data-motion-wave="before"]::before {
  color: #00bb8f;
}
.ovui-button--success-stroke.ovui-button--checked,
.ovui-button--success-stroke.ovui-button--checked:hover,
.ovui-button--success-stroke.ovui-button--checked:focus,
.ovui-button--success-stroke.ovui-button--checked:active {
  color: #00bb8f;
  background-color: rgba(0, 0, 0, 0);
  border-color: #00bb8f;
}
.ovui-button--success-stroke.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--success-stroke.ovui-button--checked:hover[data-motion-wave="after"]::after,
.ovui-button--success-stroke.ovui-button--checked:focus[data-motion-wave="after"]::after,
.ovui-button--success-stroke.ovui-button--checked:active[data-motion-wave="after"]::after,
.ovui-button--success-stroke.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--success-stroke.ovui-button--checked:hover[data-motion-wave="before"]::before,
.ovui-button--success-stroke.ovui-button--checked:focus[data-motion-wave="before"]::before,
.ovui-button--success-stroke.ovui-button--checked:active[data-motion-wave="before"]::before {
  color: #00bb8f;
}
.ovui-button--success-stroke.ovui-button--loading,
.ovui-button--success-stroke.ovui-button--disabled,
.ovui-button--success-stroke.ovui-button--loading:hover,
.ovui-button--success-stroke.ovui-button--disabled:hover,
.ovui-button--success-stroke.ovui-button--loading:focus,
.ovui-button--success-stroke.ovui-button--disabled:focus,
.ovui-button--success-stroke.ovui-button--loading:active,
.ovui-button--success-stroke.ovui-button--disabled:active {
  color: #7cffe0;
  background-color: rgba(0, 213, 164, 0.08);
  border-color: #7cffe0;
}
.ovui-button--success-stroke.ovui-button--loading[data-motion-wave="after"]::after,
.ovui-button--success-stroke.ovui-button--disabled[data-motion-wave="after"]::after,
.ovui-button--success-stroke.ovui-button--loading:hover[data-motion-wave="after"]::after,
.ovui-button--success-stroke.ovui-button--disabled:hover[data-motion-wave="after"]::after,
.ovui-button--success-stroke.ovui-button--loading:focus[data-motion-wave="after"]::after,
.ovui-button--success-stroke.ovui-button--disabled:focus[data-motion-wave="after"]::after,
.ovui-button--success-stroke.ovui-button--loading:active[data-motion-wave="after"]::after,
.ovui-button--success-stroke.ovui-button--disabled:active[data-motion-wave="after"]::after,
.ovui-button--success-stroke.ovui-button--loading[data-motion-wave="before"]::before,
.ovui-button--success-stroke.ovui-button--disabled[data-motion-wave="before"]::before,
.ovui-button--success-stroke.ovui-button--loading:hover[data-motion-wave="before"]::before,
.ovui-button--success-stroke.ovui-button--disabled:hover[data-motion-wave="before"]::before,
.ovui-button--success-stroke.ovui-button--loading:focus[data-motion-wave="before"]::before,
.ovui-button--success-stroke.ovui-button--disabled:focus[data-motion-wave="before"]::before,
.ovui-button--success-stroke.ovui-button--loading:active[data-motion-wave="before"]::before,
.ovui-button--success-stroke.ovui-button--disabled:active[data-motion-wave="before"]::before {
  color: #7cffe0;
}
.ovui-button--success-stroke.ovui-button--loading.ovui-button--checked,
.ovui-button--success-stroke.ovui-button--disabled.ovui-button--checked,
.ovui-button--success-stroke.ovui-button--loading:hover.ovui-button--checked,
.ovui-button--success-stroke.ovui-button--disabled:hover.ovui-button--checked,
.ovui-button--success-stroke.ovui-button--loading:focus.ovui-button--checked,
.ovui-button--success-stroke.ovui-button--disabled:focus.ovui-button--checked,
.ovui-button--success-stroke.ovui-button--loading:active.ovui-button--checked,
.ovui-button--success-stroke.ovui-button--disabled:active.ovui-button--checked {
  color: #7cffe0;
  background-color: rgba(0, 213, 164, 0.08);
  border-color: #7cffe0;
}
.ovui-button--success-stroke.ovui-button--loading.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--success-stroke.ovui-button--disabled.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--success-stroke.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--success-stroke.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--success-stroke.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--success-stroke.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--success-stroke.ovui-button--loading:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--success-stroke.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--success-stroke.ovui-button--loading.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--success-stroke.ovui-button--disabled.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--success-stroke.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--success-stroke.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--success-stroke.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--success-stroke.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--success-stroke.ovui-button--loading:active.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--success-stroke.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="before"]::before {
  color: #7cffe0;
}
.ovui-button--warning-stroke {
  color: #ff7c00;
  background-color: rgba(0, 0, 0, 0);
  border-color: #ff7c00;
}
.ovui-button--warning-stroke[data-motion-wave="after"]::after,
.ovui-button--warning-stroke[data-motion-wave="before"]::before {
  color: #ff7c00;
}
.ovui-button--warning-stroke:not(.ovui-button--disabled):hover {
  color: #ff932f;
  background-color: rgba(0, 0, 0, 0);
  border-color: #ff932f;
}
.ovui-button--warning-stroke:not(.ovui-button--disabled):hover[data-motion-wave="after"]::after,
.ovui-button--warning-stroke:not(.ovui-button--disabled):hover[data-motion-wave="before"]::before {
  color: #ff932f;
}
.ovui-button--warning-stroke:not(.ovui-button--disabled):focus {
  color: #dc6a00;
  background-color: rgba(0, 0, 0, 0);
  border-color: #dc6a00;
  animation: bui-button-focus-wave-effect-warning 2s cubic-bezier(0.08, 0.82, 0.17, 1);
  transition: all 0.1s cubic-bezier(0.08, 0.82, 0.17, 1);
  animation: bui-button-warning-fill-focus-wave 2s cubic-bezier(0.08, 0.82, 0.17, 1);
}
.ovui-button--warning-stroke:not(.ovui-button--disabled):focus[data-motion-wave="after"]::after,
.ovui-button--warning-stroke:not(.ovui-button--disabled):focus[data-motion-wave="before"]::before {
  color: #dc6a00;
}
@keyframes bui-button-focus-wave-effect-warning {
  from {
    box-shadow: 0 0 0 0 rgba(255, 147, 47, 0.2);
  }
  to {
    box-shadow: 0 0 0 6px rgba(255, 147, 47, 0);
  }
}
.ovui-button--warning-stroke:not(.ovui-button--disabled):active {
  color: #dc6a00;
  background-color: rgba(0, 0, 0, 0);
  border-color: #dc6a00;
}
.ovui-button--warning-stroke:not(.ovui-button--disabled):active[data-motion-wave="after"]::after,
.ovui-button--warning-stroke:not(.ovui-button--disabled):active[data-motion-wave="before"]::before {
  color: #dc6a00;
}
.ovui-button--warning-stroke:not(.ovui-button--disabled).ovui-button--checked,
.ovui-button--warning-stroke:not(.ovui-button--disabled).ovui-button--checked:hover,
.ovui-button--warning-stroke:not(.ovui-button--disabled).ovui-button--checked:focus,
.ovui-button--warning-stroke:not(.ovui-button--disabled).ovui-button--checked:active {
  color: #dc6a00;
  background-color: rgba(0, 0, 0, 0);
  border-color: #dc6a00;
}
.ovui-button--warning-stroke:not(.ovui-button--disabled).ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--warning-stroke:not(.ovui-button--disabled).ovui-button--checked:hover[data-motion-wave="after"]::after,
.ovui-button--warning-stroke:not(.ovui-button--disabled).ovui-button--checked:focus[data-motion-wave="after"]::after,
.ovui-button--warning-stroke:not(.ovui-button--disabled).ovui-button--checked:active[data-motion-wave="after"]::after,
.ovui-button--warning-stroke:not(.ovui-button--disabled).ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--warning-stroke:not(.ovui-button--disabled).ovui-button--checked:hover[data-motion-wave="before"]::before,
.ovui-button--warning-stroke:not(.ovui-button--disabled).ovui-button--checked:focus[data-motion-wave="before"]::before,
.ovui-button--warning-stroke:not(.ovui-button--disabled).ovui-button--checked:active[data-motion-wave="before"]::before {
  color: #dc6a00;
}
.ovui-button--warning-stroke.ovui-button--loading,
.ovui-button--warning-stroke.ovui-button--disabled,
.ovui-button--warning-stroke.ovui-button--loading:hover,
.ovui-button--warning-stroke.ovui-button--disabled:hover,
.ovui-button--warning-stroke.ovui-button--loading:focus,
.ovui-button--warning-stroke.ovui-button--disabled:focus,
.ovui-button--warning-stroke.ovui-button--loading:active,
.ovui-button--warning-stroke.ovui-button--disabled:active {
  color: #ffc48d;
  background-color: rgba(255, 124, 0, 0.08);
  border-color: #ffc48d;
}
.ovui-button--warning-stroke.ovui-button--loading[data-motion-wave="after"]::after,
.ovui-button--warning-stroke.ovui-button--disabled[data-motion-wave="after"]::after,
.ovui-button--warning-stroke.ovui-button--loading:hover[data-motion-wave="after"]::after,
.ovui-button--warning-stroke.ovui-button--disabled:hover[data-motion-wave="after"]::after,
.ovui-button--warning-stroke.ovui-button--loading:focus[data-motion-wave="after"]::after,
.ovui-button--warning-stroke.ovui-button--disabled:focus[data-motion-wave="after"]::after,
.ovui-button--warning-stroke.ovui-button--loading:active[data-motion-wave="after"]::after,
.ovui-button--warning-stroke.ovui-button--disabled:active[data-motion-wave="after"]::after,
.ovui-button--warning-stroke.ovui-button--loading[data-motion-wave="before"]::before,
.ovui-button--warning-stroke.ovui-button--disabled[data-motion-wave="before"]::before,
.ovui-button--warning-stroke.ovui-button--loading:hover[data-motion-wave="before"]::before,
.ovui-button--warning-stroke.ovui-button--disabled:hover[data-motion-wave="before"]::before,
.ovui-button--warning-stroke.ovui-button--loading:focus[data-motion-wave="before"]::before,
.ovui-button--warning-stroke.ovui-button--disabled:focus[data-motion-wave="before"]::before,
.ovui-button--warning-stroke.ovui-button--loading:active[data-motion-wave="before"]::before,
.ovui-button--warning-stroke.ovui-button--disabled:active[data-motion-wave="before"]::before {
  color: #ffc48d;
}
.ovui-button--warning-stroke.ovui-button--loading.ovui-button--checked,
.ovui-button--warning-stroke.ovui-button--disabled.ovui-button--checked,
.ovui-button--warning-stroke.ovui-button--loading:hover.ovui-button--checked,
.ovui-button--warning-stroke.ovui-button--disabled:hover.ovui-button--checked,
.ovui-button--warning-stroke.ovui-button--loading:focus.ovui-button--checked,
.ovui-button--warning-stroke.ovui-button--disabled:focus.ovui-button--checked,
.ovui-button--warning-stroke.ovui-button--loading:active.ovui-button--checked,
.ovui-button--warning-stroke.ovui-button--disabled:active.ovui-button--checked {
  color: #ffc48d;
  background-color: rgba(255, 124, 0, 0.08);
  border-color: #ffc48d;
}
.ovui-button--warning-stroke.ovui-button--loading.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--warning-stroke.ovui-button--disabled.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--warning-stroke.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--warning-stroke.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--warning-stroke.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--warning-stroke.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--warning-stroke.ovui-button--loading:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--warning-stroke.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--warning-stroke.ovui-button--loading.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--warning-stroke.ovui-button--disabled.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--warning-stroke.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--warning-stroke.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--warning-stroke.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--warning-stroke.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--warning-stroke.ovui-button--loading:active.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--warning-stroke.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="before"]::before {
  color: #ffc48d;
}
.ovui-button--danger-stroke {
  color: #ff0060;
  background-color: rgba(0, 0, 0, 0);
  border-color: #ff0060;
}
.ovui-button--danger-stroke[data-motion-wave="after"]::after,
.ovui-button--danger-stroke[data-motion-wave="before"]::before {
  color: #ff0060;
}
.ovui-button--danger-stroke:hover {
  color: #ff2f7f;
  background-color: rgba(0, 0, 0, 0);
  border-color: #ff2f7f;
}
.ovui-button--danger-stroke:hover[data-motion-wave="after"]::after,
.ovui-button--danger-stroke:hover[data-motion-wave="before"]::before {
  color: #ff2f7f;
}
.ovui-button--danger-stroke:focus {
  color: #dc0054;
  background-color: rgba(0, 0, 0, 0);
  border-color: #dc0054;
  animation: bui-button-focus-wave-effect-danger 2s cubic-bezier(0.08, 0.82, 0.17, 1);
  transition: all 0.1s cubic-bezier(0.08, 0.82, 0.17, 1);
  animation: bui-button-danger-fill-focus-wave 2s cubic-bezier(0.08, 0.82, 0.17, 1);
}
.ovui-button--danger-stroke:focus[data-motion-wave="after"]::after,
.ovui-button--danger-stroke:focus[data-motion-wave="before"]::before {
  color: #dc0054;
}
@keyframes bui-button-focus-wave-effect-danger {
  from {
    box-shadow: 0 0 0 0 rgba(255, 47, 127, 0.2);
  }
  to {
    box-shadow: 0 0 0 6px rgba(255, 47, 127, 0);
  }
}
.ovui-button--danger-stroke:active {
  color: #dc0054;
  background-color: rgba(0, 0, 0, 0);
  border-color: #dc0054;
}
.ovui-button--danger-stroke:active[data-motion-wave="after"]::after,
.ovui-button--danger-stroke:active[data-motion-wave="before"]::before {
  color: #dc0054;
}
.ovui-button--danger-stroke.ovui-button--checked,
.ovui-button--danger-stroke.ovui-button--checked:hover,
.ovui-button--danger-stroke.ovui-button--checked:focus,
.ovui-button--danger-stroke.ovui-button--checked:active {
  color: #dc0054;
  background-color: rgba(0, 0, 0, 0);
  border-color: #dc0054;
}
.ovui-button--danger-stroke.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--danger-stroke.ovui-button--checked:hover[data-motion-wave="after"]::after,
.ovui-button--danger-stroke.ovui-button--checked:focus[data-motion-wave="after"]::after,
.ovui-button--danger-stroke.ovui-button--checked:active[data-motion-wave="after"]::after,
.ovui-button--danger-stroke.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--danger-stroke.ovui-button--checked:hover[data-motion-wave="before"]::before,
.ovui-button--danger-stroke.ovui-button--checked:focus[data-motion-wave="before"]::before,
.ovui-button--danger-stroke.ovui-button--checked:active[data-motion-wave="before"]::before {
  color: #dc0054;
}
.ovui-button--danger-stroke.ovui-button--loading,
.ovui-button--danger-stroke.ovui-button--disabled,
.ovui-button--danger-stroke.ovui-button--loading:hover,
.ovui-button--danger-stroke.ovui-button--disabled:hover,
.ovui-button--danger-stroke.ovui-button--loading:focus,
.ovui-button--danger-stroke.ovui-button--disabled:focus,
.ovui-button--danger-stroke.ovui-button--loading:active,
.ovui-button--danger-stroke.ovui-button--disabled:active {
  color: #ff8db9;
  background-color: rgba(255, 0, 96, 0.06);
  border-color: #ff8db9;
}
.ovui-button--danger-stroke.ovui-button--loading[data-motion-wave="after"]::after,
.ovui-button--danger-stroke.ovui-button--disabled[data-motion-wave="after"]::after,
.ovui-button--danger-stroke.ovui-button--loading:hover[data-motion-wave="after"]::after,
.ovui-button--danger-stroke.ovui-button--disabled:hover[data-motion-wave="after"]::after,
.ovui-button--danger-stroke.ovui-button--loading:focus[data-motion-wave="after"]::after,
.ovui-button--danger-stroke.ovui-button--disabled:focus[data-motion-wave="after"]::after,
.ovui-button--danger-stroke.ovui-button--loading:active[data-motion-wave="after"]::after,
.ovui-button--danger-stroke.ovui-button--disabled:active[data-motion-wave="after"]::after,
.ovui-button--danger-stroke.ovui-button--loading[data-motion-wave="before"]::before,
.ovui-button--danger-stroke.ovui-button--disabled[data-motion-wave="before"]::before,
.ovui-button--danger-stroke.ovui-button--loading:hover[data-motion-wave="before"]::before,
.ovui-button--danger-stroke.ovui-button--disabled:hover[data-motion-wave="before"]::before,
.ovui-button--danger-stroke.ovui-button--loading:focus[data-motion-wave="before"]::before,
.ovui-button--danger-stroke.ovui-button--disabled:focus[data-motion-wave="before"]::before,
.ovui-button--danger-stroke.ovui-button--loading:active[data-motion-wave="before"]::before,
.ovui-button--danger-stroke.ovui-button--disabled:active[data-motion-wave="before"]::before {
  color: #ff8db9;
}
.ovui-button--danger-stroke.ovui-button--loading.ovui-button--checked,
.ovui-button--danger-stroke.ovui-button--disabled.ovui-button--checked,
.ovui-button--danger-stroke.ovui-button--loading:hover.ovui-button--checked,
.ovui-button--danger-stroke.ovui-button--disabled:hover.ovui-button--checked,
.ovui-button--danger-stroke.ovui-button--loading:focus.ovui-button--checked,
.ovui-button--danger-stroke.ovui-button--disabled:focus.ovui-button--checked,
.ovui-button--danger-stroke.ovui-button--loading:active.ovui-button--checked,
.ovui-button--danger-stroke.ovui-button--disabled:active.ovui-button--checked {
  color: #ff8db9;
  background-color: rgba(255, 0, 96, 0.06);
  border-color: #ff8db9;
}
.ovui-button--danger-stroke.ovui-button--loading.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--danger-stroke.ovui-button--disabled.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--danger-stroke.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--danger-stroke.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--danger-stroke.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--danger-stroke.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--danger-stroke.ovui-button--loading:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--danger-stroke.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--danger-stroke.ovui-button--loading.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--danger-stroke.ovui-button--disabled.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--danger-stroke.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--danger-stroke.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--danger-stroke.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--danger-stroke.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--danger-stroke.ovui-button--loading:active.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--danger-stroke.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="before"]::before {
  color: #ff8db9;
}
.ovui-button--info-stroke {
  color: #651dff;
  background-color: rgba(0, 0, 0, 0);
  border-color: #651dff;
}
.ovui-button--info-stroke[data-motion-wave="after"]::after,
.ovui-button--info-stroke[data-motion-wave="before"]::before {
  color: #651dff;
}
.ovui-button--info-stroke:hover {
  color: #7433ff;
  background-color: rgba(0, 0, 0, 0);
  border-color: #7433ff;
}
.ovui-button--info-stroke:hover[data-motion-wave="after"]::after,
.ovui-button--info-stroke:hover[data-motion-wave="before"]::before {
  color: #7433ff;
}
.ovui-button--info-stroke:focus {
  color: rgba(101, 29, 255, 0.75);
  background-color: rgba(0, 0, 0, 0);
  border-color: rgba(101, 29, 255, 0.75);
  animation: bui-button-focus-wave-effect-info 2s cubic-bezier(0.08, 0.82, 0.17, 1);
  transition: all 0.1s cubic-bezier(0.08, 0.82, 0.17, 1);
  animation: bui-button-info-fill-focus-wave 2s cubic-bezier(0.08, 0.82, 0.17, 1);
}
.ovui-button--info-stroke:focus[data-motion-wave="after"]::after,
.ovui-button--info-stroke:focus[data-motion-wave="before"]::before {
  color: rgba(101, 29, 255, 0.75);
}
@keyframes bui-button-focus-wave-effect-info {
  from {
    box-shadow: 0 0 0 0 rgba(101, 29, 255, 0.2);
  }
  to {
    box-shadow: 0 0 0 6px rgba(101, 29, 255, 0);
  }
}
.ovui-button--info-stroke:active {
  color: rgba(101, 29, 255, 0.75);
  background-color: rgba(0, 0, 0, 0);
  border-color: rgba(101, 29, 255, 0.75);
}
.ovui-button--info-stroke:active[data-motion-wave="after"]::after,
.ovui-button--info-stroke:active[data-motion-wave="before"]::before {
  color: rgba(101, 29, 255, 0.75);
}
.ovui-button--info-stroke.ovui-button--checked,
.ovui-button--info-stroke.ovui-button--checked:focus,
.ovui-button--info-stroke.ovui-button--checked:hover,
.ovui-button--info-stroke.ovui-button--checked:active {
  color: rgba(101, 29, 255, 0.75);
  background-color: rgba(0, 0, 0, 0);
  border-color: rgba(101, 29, 255, 0.75);
}
.ovui-button--info-stroke.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--info-stroke.ovui-button--checked:focus[data-motion-wave="after"]::after,
.ovui-button--info-stroke.ovui-button--checked:hover[data-motion-wave="after"]::after,
.ovui-button--info-stroke.ovui-button--checked:active[data-motion-wave="after"]::after,
.ovui-button--info-stroke.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--info-stroke.ovui-button--checked:focus[data-motion-wave="before"]::before,
.ovui-button--info-stroke.ovui-button--checked:hover[data-motion-wave="before"]::before,
.ovui-button--info-stroke.ovui-button--checked:active[data-motion-wave="before"]::before {
  color: rgba(101, 29, 255, 0.75);
}
.ovui-button--info-stroke.ovui-button--loading,
.ovui-button--info-stroke.ovui-button--disabled,
.ovui-button--info-stroke.ovui-button--loading:hover,
.ovui-button--info-stroke.ovui-button--disabled:hover,
.ovui-button--info-stroke.ovui-button--loading:focus,
.ovui-button--info-stroke.ovui-button--disabled:focus,
.ovui-button--info-stroke.ovui-button--loading:active,
.ovui-button--info-stroke.ovui-button--disabled:active {
  color: rgba(101, 29, 255, 0.34);
  background-color: #381088;
  border-color: rgba(101, 29, 255, 0.34);
}
.ovui-button--info-stroke.ovui-button--loading[data-motion-wave="after"]::after,
.ovui-button--info-stroke.ovui-button--disabled[data-motion-wave="after"]::after,
.ovui-button--info-stroke.ovui-button--loading:hover[data-motion-wave="after"]::after,
.ovui-button--info-stroke.ovui-button--disabled:hover[data-motion-wave="after"]::after,
.ovui-button--info-stroke.ovui-button--loading:focus[data-motion-wave="after"]::after,
.ovui-button--info-stroke.ovui-button--disabled:focus[data-motion-wave="after"]::after,
.ovui-button--info-stroke.ovui-button--loading:active[data-motion-wave="after"]::after,
.ovui-button--info-stroke.ovui-button--disabled:active[data-motion-wave="after"]::after,
.ovui-button--info-stroke.ovui-button--loading[data-motion-wave="before"]::before,
.ovui-button--info-stroke.ovui-button--disabled[data-motion-wave="before"]::before,
.ovui-button--info-stroke.ovui-button--loading:hover[data-motion-wave="before"]::before,
.ovui-button--info-stroke.ovui-button--disabled:hover[data-motion-wave="before"]::before,
.ovui-button--info-stroke.ovui-button--loading:focus[data-motion-wave="before"]::before,
.ovui-button--info-stroke.ovui-button--disabled:focus[data-motion-wave="before"]::before,
.ovui-button--info-stroke.ovui-button--loading:active[data-motion-wave="before"]::before,
.ovui-button--info-stroke.ovui-button--disabled:active[data-motion-wave="before"]::before {
  color: rgba(101, 29, 255, 0.34);
}
.ovui-button--info-stroke.ovui-button--loading.ovui-button--checked,
.ovui-button--info-stroke.ovui-button--disabled.ovui-button--checked,
.ovui-button--info-stroke.ovui-button--loading:hover.ovui-button--checked,
.ovui-button--info-stroke.ovui-button--disabled:hover.ovui-button--checked,
.ovui-button--info-stroke.ovui-button--loading:focus.ovui-button--checked,
.ovui-button--info-stroke.ovui-button--disabled:focus.ovui-button--checked,
.ovui-button--info-stroke.ovui-button--loading:active.ovui-button--checked,
.ovui-button--info-stroke.ovui-button--disabled:active.ovui-button--checked {
  color: #b998ff;
  background-color: rgba(101, 45, 255, 0.08);
  border-color: #b998ff;
}
.ovui-button--info-stroke.ovui-button--loading.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--info-stroke.ovui-button--disabled.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--info-stroke.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--info-stroke.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--info-stroke.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--info-stroke.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--info-stroke.ovui-button--loading:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--info-stroke.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--info-stroke.ovui-button--loading.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--info-stroke.ovui-button--disabled.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--info-stroke.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--info-stroke.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--info-stroke.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--info-stroke.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--info-stroke.ovui-button--loading:active.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--info-stroke.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="before"]::before {
  color: #b998ff;
}
.ovui-button--default-light-fill {
  color: #ffffff;
  background-color: #3c344d;
  border-color: #3c344d;
}
.ovui-button--default-light-fill[data-motion-wave="after"]::after,
.ovui-button--default-light-fill[data-motion-wave="before"]::before {
  color: #3c344d;
}
.ovui-button--default-light-fill:not(.ovui-button--disabled):hover {
  color: #ffffff;
  background-color: #3c344d;
  border-color: #3c344d;
}
.ovui-button--default-light-fill:not(.ovui-button--disabled):hover[data-motion-wave="after"]::after,
.ovui-button--default-light-fill:not(.ovui-button--disabled):hover[data-motion-wave="before"]::before {
  color: #3c344d;
}
.ovui-button--default-light-fill:not(.ovui-button--disabled):focus {
  color: #ffffff;
  background-color: #3c344d;
  border-color: #3c344d;
}
.ovui-button--default-light-fill:not(.ovui-button--disabled):focus[data-motion-wave="after"]::after,
.ovui-button--default-light-fill:not(.ovui-button--disabled):focus[data-motion-wave="before"]::before {
  color: #3c344d;
}
.ovui-button--default-light-fill:not(.ovui-button--disabled):active {
  color: #ffffff;
  background-color: #3c344d;
  border-color: #3c344d;
}
.ovui-button--default-light-fill:not(.ovui-button--disabled):active[data-motion-wave="after"]::after,
.ovui-button--default-light-fill:not(.ovui-button--disabled):active[data-motion-wave="before"]::before {
  color: #3c344d;
}
.ovui-button--default-light-fill:not(.ovui-button--disabled).ovui-button--checked,
.ovui-button--default-light-fill:not(.ovui-button--disabled).ovui-button--checked:hover,
.ovui-button--default-light-fill:not(.ovui-button--disabled).ovui-button--checked:focus,
.ovui-button--default-light-fill:not(.ovui-button--disabled).ovui-button--checked:active {
  color: #ffffff;
  background-color: #3c344d;
  border-color: #3c344d;
}
.ovui-button--default-light-fill:not(.ovui-button--disabled).ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--default-light-fill:not(.ovui-button--disabled).ovui-button--checked:hover[data-motion-wave="after"]::after,
.ovui-button--default-light-fill:not(.ovui-button--disabled).ovui-button--checked:focus[data-motion-wave="after"]::after,
.ovui-button--default-light-fill:not(.ovui-button--disabled).ovui-button--checked:active[data-motion-wave="after"]::after,
.ovui-button--default-light-fill:not(.ovui-button--disabled).ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--default-light-fill:not(.ovui-button--disabled).ovui-button--checked:hover[data-motion-wave="before"]::before,
.ovui-button--default-light-fill:not(.ovui-button--disabled).ovui-button--checked:focus[data-motion-wave="before"]::before,
.ovui-button--default-light-fill:not(.ovui-button--disabled).ovui-button--checked:active[data-motion-wave="before"]::before {
  color: #3c344d;
}
.ovui-button--default-light-fill.ovui-button--loading,
.ovui-button--default-light-fill.ovui-button--disabled,
.ovui-button--default-light-fill.ovui-button--loading:hover,
.ovui-button--default-light-fill.ovui-button--disabled:hover,
.ovui-button--default-light-fill.ovui-button--loading:focus,
.ovui-button--default-light-fill.ovui-button--disabled:focus,
.ovui-button--default-light-fill.ovui-button--loading:active,
.ovui-button--default-light-fill.ovui-button--disabled:active {
  color: rgba(255, 255, 255, 0.25);
  background-color: #302842;
  border-color: #302842;
}
.ovui-button--default-light-fill.ovui-button--loading[data-motion-wave="after"]::after,
.ovui-button--default-light-fill.ovui-button--disabled[data-motion-wave="after"]::after,
.ovui-button--default-light-fill.ovui-button--loading:hover[data-motion-wave="after"]::after,
.ovui-button--default-light-fill.ovui-button--disabled:hover[data-motion-wave="after"]::after,
.ovui-button--default-light-fill.ovui-button--loading:focus[data-motion-wave="after"]::after,
.ovui-button--default-light-fill.ovui-button--disabled:focus[data-motion-wave="after"]::after,
.ovui-button--default-light-fill.ovui-button--loading:active[data-motion-wave="after"]::after,
.ovui-button--default-light-fill.ovui-button--disabled:active[data-motion-wave="after"]::after,
.ovui-button--default-light-fill.ovui-button--loading[data-motion-wave="before"]::before,
.ovui-button--default-light-fill.ovui-button--disabled[data-motion-wave="before"]::before,
.ovui-button--default-light-fill.ovui-button--loading:hover[data-motion-wave="before"]::before,
.ovui-button--default-light-fill.ovui-button--disabled:hover[data-motion-wave="before"]::before,
.ovui-button--default-light-fill.ovui-button--loading:focus[data-motion-wave="before"]::before,
.ovui-button--default-light-fill.ovui-button--disabled:focus[data-motion-wave="before"]::before,
.ovui-button--default-light-fill.ovui-button--loading:active[data-motion-wave="before"]::before,
.ovui-button--default-light-fill.ovui-button--disabled:active[data-motion-wave="before"]::before {
  color: #302842;
}
.ovui-button--default-light-fill.ovui-button--loading.ovui-button--checked,
.ovui-button--default-light-fill.ovui-button--disabled.ovui-button--checked,
.ovui-button--default-light-fill.ovui-button--loading:hover.ovui-button--checked,
.ovui-button--default-light-fill.ovui-button--disabled:hover.ovui-button--checked,
.ovui-button--default-light-fill.ovui-button--loading:focus.ovui-button--checked,
.ovui-button--default-light-fill.ovui-button--disabled:focus.ovui-button--checked,
.ovui-button--default-light-fill.ovui-button--loading:active.ovui-button--checked,
.ovui-button--default-light-fill.ovui-button--disabled:active.ovui-button--checked {
  color: rgba(255, 255, 255, 0.25);
  background-color: #302842;
  border-color: #302842;
}
.ovui-button--default-light-fill.ovui-button--loading.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--default-light-fill.ovui-button--disabled.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--default-light-fill.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--default-light-fill.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--default-light-fill.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--default-light-fill.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--default-light-fill.ovui-button--loading:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--default-light-fill.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--default-light-fill.ovui-button--loading.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--default-light-fill.ovui-button--disabled.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--default-light-fill.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--default-light-fill.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--default-light-fill.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--default-light-fill.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--default-light-fill.ovui-button--loading:active.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--default-light-fill.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="before"]::before {
  color: #302842;
}
.ovui-button--default-light-stroke {
  color: #ffffff;
  background-color: #261d38;
  border-color: #dfe0e2;
}
.ovui-button--default-light-stroke[data-motion-wave="after"]::after,
.ovui-button--default-light-stroke[data-motion-wave="before"]::before {
  color: #dfe0e2;
}
.ovui-button--default-light-stroke:not(.ovui-button--disabled):hover {
  color: #651dff;
  background-color: rgba(255, 255, 255, 0.08);
  border-color: #651dff;
}
.ovui-button--default-light-stroke:not(.ovui-button--disabled):hover[data-motion-wave="after"]::after,
.ovui-button--default-light-stroke:not(.ovui-button--disabled):hover[data-motion-wave="before"]::before {
  color: #651dff;
}
.ovui-button--default-light-stroke:not(.ovui-button--disabled):focus {
  color: #651dff;
  background-color: rgba(255, 255, 255, 0.08);
  border-color: #651dff;
}
.ovui-button--default-light-stroke:not(.ovui-button--disabled):focus[data-motion-wave="after"]::after,
.ovui-button--default-light-stroke:not(.ovui-button--disabled):focus[data-motion-wave="before"]::before {
  color: #651dff;
}
.ovui-button--default-light-stroke:not(.ovui-button--disabled):active {
  color: rgba(101, 29, 255, 0.75);
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(101, 29, 255, 0.75);
}
.ovui-button--default-light-stroke:not(.ovui-button--disabled):active[data-motion-wave="after"]::after,
.ovui-button--default-light-stroke:not(.ovui-button--disabled):active[data-motion-wave="before"]::before {
  color: rgba(101, 29, 255, 0.75);
}
.ovui-button--default-light-stroke:not(.ovui-button--disabled).ovui-button--checked,
.ovui-button--default-light-stroke:not(.ovui-button--disabled).ovui-button--checked:hover,
.ovui-button--default-light-stroke:not(.ovui-button--disabled).ovui-button--checked:focus,
.ovui-button--default-light-stroke:not(.ovui-button--disabled).ovui-button--checked:active {
  color: #651dff;
  background-color: rgba(255, 255, 255, 0.08);
  border-color: #651dff;
}
.ovui-button--default-light-stroke:not(.ovui-button--disabled).ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--default-light-stroke:not(.ovui-button--disabled).ovui-button--checked:hover[data-motion-wave="after"]::after,
.ovui-button--default-light-stroke:not(.ovui-button--disabled).ovui-button--checked:focus[data-motion-wave="after"]::after,
.ovui-button--default-light-stroke:not(.ovui-button--disabled).ovui-button--checked:active[data-motion-wave="after"]::after,
.ovui-button--default-light-stroke:not(.ovui-button--disabled).ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--default-light-stroke:not(.ovui-button--disabled).ovui-button--checked:hover[data-motion-wave="before"]::before,
.ovui-button--default-light-stroke:not(.ovui-button--disabled).ovui-button--checked:focus[data-motion-wave="before"]::before,
.ovui-button--default-light-stroke:not(.ovui-button--disabled).ovui-button--checked:active[data-motion-wave="before"]::before {
  color: #651dff;
}
.ovui-button--default-light-stroke.ovui-button--loading,
.ovui-button--default-light-stroke.ovui-button--disabled,
.ovui-button--default-light-stroke.ovui-button--loading:hover,
.ovui-button--default-light-stroke.ovui-button--disabled:hover,
.ovui-button--default-light-stroke.ovui-button--loading:focus,
.ovui-button--default-light-stroke.ovui-button--disabled:focus,
.ovui-button--default-light-stroke.ovui-button--loading:active,
.ovui-button--default-light-stroke.ovui-button--disabled:active {
  color: rgba(255, 255, 255, 0.25);
  background-color: #302842;
  border-color: #dfe0e2;
}
.ovui-button--default-light-stroke.ovui-button--loading[data-motion-wave="after"]::after,
.ovui-button--default-light-stroke.ovui-button--disabled[data-motion-wave="after"]::after,
.ovui-button--default-light-stroke.ovui-button--loading:hover[data-motion-wave="after"]::after,
.ovui-button--default-light-stroke.ovui-button--disabled:hover[data-motion-wave="after"]::after,
.ovui-button--default-light-stroke.ovui-button--loading:focus[data-motion-wave="after"]::after,
.ovui-button--default-light-stroke.ovui-button--disabled:focus[data-motion-wave="after"]::after,
.ovui-button--default-light-stroke.ovui-button--loading:active[data-motion-wave="after"]::after,
.ovui-button--default-light-stroke.ovui-button--disabled:active[data-motion-wave="after"]::after,
.ovui-button--default-light-stroke.ovui-button--loading[data-motion-wave="before"]::before,
.ovui-button--default-light-stroke.ovui-button--disabled[data-motion-wave="before"]::before,
.ovui-button--default-light-stroke.ovui-button--loading:hover[data-motion-wave="before"]::before,
.ovui-button--default-light-stroke.ovui-button--disabled:hover[data-motion-wave="before"]::before,
.ovui-button--default-light-stroke.ovui-button--loading:focus[data-motion-wave="before"]::before,
.ovui-button--default-light-stroke.ovui-button--disabled:focus[data-motion-wave="before"]::before,
.ovui-button--default-light-stroke.ovui-button--loading:active[data-motion-wave="before"]::before,
.ovui-button--default-light-stroke.ovui-button--disabled:active[data-motion-wave="before"]::before {
  color: #dfe0e2;
}
.ovui-button--default-light-stroke.ovui-button--loading.ovui-button--checked,
.ovui-button--default-light-stroke.ovui-button--disabled.ovui-button--checked,
.ovui-button--default-light-stroke.ovui-button--loading:hover.ovui-button--checked,
.ovui-button--default-light-stroke.ovui-button--disabled:hover.ovui-button--checked,
.ovui-button--default-light-stroke.ovui-button--loading:focus.ovui-button--checked,
.ovui-button--default-light-stroke.ovui-button--disabled:focus.ovui-button--checked,
.ovui-button--default-light-stroke.ovui-button--loading:active.ovui-button--checked,
.ovui-button--default-light-stroke.ovui-button--disabled:active.ovui-button--checked {
  color: rgba(255, 255, 255, 0.25);
  background-color: #302842;
  border-color: #dfe0e2;
}
.ovui-button--default-light-stroke.ovui-button--loading.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--default-light-stroke.ovui-button--disabled.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--default-light-stroke.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--default-light-stroke.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--default-light-stroke.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--default-light-stroke.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--default-light-stroke.ovui-button--loading:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--default-light-stroke.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--default-light-stroke.ovui-button--loading.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--default-light-stroke.ovui-button--disabled.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--default-light-stroke.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--default-light-stroke.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--default-light-stroke.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--default-light-stroke.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--default-light-stroke.ovui-button--loading:active.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--default-light-stroke.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="before"]::before {
  color: #dfe0e2;
}
.ovui-button--primary-light-fill {
  color: #651dff;
  background-color: #381088;
  border-color: #381088;
}
.ovui-button--primary-light-fill[data-motion-wave="after"]::after,
.ovui-button--primary-light-fill[data-motion-wave="before"]::before {
  color: #381088;
}
.ovui-button--primary-light-fill:not(.ovui-button--disabled):hover {
  color: #7433ff;
  background-color: #381088;
  border-color: #381088;
}
.ovui-button--primary-light-fill:not(.ovui-button--disabled):hover[data-motion-wave="after"]::after,
.ovui-button--primary-light-fill:not(.ovui-button--disabled):hover[data-motion-wave="before"]::before {
  color: #381088;
}
.ovui-button--primary-light-fill:not(.ovui-button--disabled):focus {
  color: rgba(101, 29, 255, 0.75);
  background-color: #d5c1ff;
  border-color: #d5c1ff;
}
.ovui-button--primary-light-fill:not(.ovui-button--disabled):focus[data-motion-wave="after"]::after,
.ovui-button--primary-light-fill:not(.ovui-button--disabled):focus[data-motion-wave="before"]::before {
  color: #d5c1ff;
}
.ovui-button--primary-light-fill:not(.ovui-button--disabled):active {
  color: rgba(101, 29, 255, 0.75);
  background-color: #d5c1ff;
  border-color: #d5c1ff;
}
.ovui-button--primary-light-fill:not(.ovui-button--disabled):active[data-motion-wave="after"]::after,
.ovui-button--primary-light-fill:not(.ovui-button--disabled):active[data-motion-wave="before"]::before {
  color: #d5c1ff;
}
.ovui-button--primary-light-fill:not(.ovui-button--disabled).ovui-button--checked,
.ovui-button--primary-light-fill:not(.ovui-button--disabled).ovui-button--checked:hover,
.ovui-button--primary-light-fill:not(.ovui-button--disabled).ovui-button--checked:focus,
.ovui-button--primary-light-fill:not(.ovui-button--disabled).ovui-button--checked:active {
  color: rgba(101, 29, 255, 0.75);
  background-color: #d5c1ff;
  border-color: #d5c1ff;
}
.ovui-button--primary-light-fill:not(.ovui-button--disabled).ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--primary-light-fill:not(.ovui-button--disabled).ovui-button--checked:hover[data-motion-wave="after"]::after,
.ovui-button--primary-light-fill:not(.ovui-button--disabled).ovui-button--checked:focus[data-motion-wave="after"]::after,
.ovui-button--primary-light-fill:not(.ovui-button--disabled).ovui-button--checked:active[data-motion-wave="after"]::after,
.ovui-button--primary-light-fill:not(.ovui-button--disabled).ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--primary-light-fill:not(.ovui-button--disabled).ovui-button--checked:hover[data-motion-wave="before"]::before,
.ovui-button--primary-light-fill:not(.ovui-button--disabled).ovui-button--checked:focus[data-motion-wave="before"]::before,
.ovui-button--primary-light-fill:not(.ovui-button--disabled).ovui-button--checked:active[data-motion-wave="before"]::before {
  color: #d5c1ff;
}
.ovui-button--primary-light-fill.ovui-button--loading,
.ovui-button--primary-light-fill.ovui-button--disabled,
.ovui-button--primary-light-fill.ovui-button--loading:hover,
.ovui-button--primary-light-fill.ovui-button--disabled:hover,
.ovui-button--primary-light-fill.ovui-button--loading:focus,
.ovui-button--primary-light-fill.ovui-button--disabled:focus,
.ovui-button--primary-light-fill.ovui-button--loading:active,
.ovui-button--primary-light-fill.ovui-button--disabled:active {
  color: rgba(101, 29, 255, 0.34);
  background-color: #381088;
  border-color: #381088;
}
.ovui-button--primary-light-fill.ovui-button--loading[data-motion-wave="after"]::after,
.ovui-button--primary-light-fill.ovui-button--disabled[data-motion-wave="after"]::after,
.ovui-button--primary-light-fill.ovui-button--loading:hover[data-motion-wave="after"]::after,
.ovui-button--primary-light-fill.ovui-button--disabled:hover[data-motion-wave="after"]::after,
.ovui-button--primary-light-fill.ovui-button--loading:focus[data-motion-wave="after"]::after,
.ovui-button--primary-light-fill.ovui-button--disabled:focus[data-motion-wave="after"]::after,
.ovui-button--primary-light-fill.ovui-button--loading:active[data-motion-wave="after"]::after,
.ovui-button--primary-light-fill.ovui-button--disabled:active[data-motion-wave="after"]::after,
.ovui-button--primary-light-fill.ovui-button--loading[data-motion-wave="before"]::before,
.ovui-button--primary-light-fill.ovui-button--disabled[data-motion-wave="before"]::before,
.ovui-button--primary-light-fill.ovui-button--loading:hover[data-motion-wave="before"]::before,
.ovui-button--primary-light-fill.ovui-button--disabled:hover[data-motion-wave="before"]::before,
.ovui-button--primary-light-fill.ovui-button--loading:focus[data-motion-wave="before"]::before,
.ovui-button--primary-light-fill.ovui-button--disabled:focus[data-motion-wave="before"]::before,
.ovui-button--primary-light-fill.ovui-button--loading:active[data-motion-wave="before"]::before,
.ovui-button--primary-light-fill.ovui-button--disabled:active[data-motion-wave="before"]::before {
  color: #381088;
}
.ovui-button--primary-light-fill.ovui-button--loading.ovui-button--checked,
.ovui-button--primary-light-fill.ovui-button--disabled.ovui-button--checked,
.ovui-button--primary-light-fill.ovui-button--loading:hover.ovui-button--checked,
.ovui-button--primary-light-fill.ovui-button--disabled:hover.ovui-button--checked,
.ovui-button--primary-light-fill.ovui-button--loading:focus.ovui-button--checked,
.ovui-button--primary-light-fill.ovui-button--disabled:focus.ovui-button--checked,
.ovui-button--primary-light-fill.ovui-button--loading:active.ovui-button--checked,
.ovui-button--primary-light-fill.ovui-button--disabled:active.ovui-button--checked {
  color: rgba(101, 29, 255, 0.34);
  background-color: #381088;
  border-color: #381088;
}
.ovui-button--primary-light-fill.ovui-button--loading.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--primary-light-fill.ovui-button--disabled.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--primary-light-fill.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--primary-light-fill.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--primary-light-fill.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--primary-light-fill.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--primary-light-fill.ovui-button--loading:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--primary-light-fill.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--primary-light-fill.ovui-button--loading.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--primary-light-fill.ovui-button--disabled.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--primary-light-fill.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--primary-light-fill.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--primary-light-fill.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--primary-light-fill.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--primary-light-fill.ovui-button--loading:active.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--primary-light-fill.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="before"]::before {
  color: #381088;
}
.ovui-button--primary-light-stroke {
  color: #651dff;
  background-color: #381088;
  border-color: #651dff;
}
.ovui-button--primary-light-stroke[data-motion-wave="after"]::after,
.ovui-button--primary-light-stroke[data-motion-wave="before"]::before {
  color: #651dff;
}
.ovui-button--primary-light-stroke:not(.ovui-button--disabled):hover {
  color: #7433ff;
  background-color: #381088;
  border-color: #7433ff;
}
.ovui-button--primary-light-stroke:not(.ovui-button--disabled):hover[data-motion-wave="after"]::after,
.ovui-button--primary-light-stroke:not(.ovui-button--disabled):hover[data-motion-wave="before"]::before {
  color: #7433ff;
}
.ovui-button--primary-light-stroke:not(.ovui-button--disabled):focus {
  color: rgba(101, 29, 255, 0.75);
  background-color: #381088;
  border-color: rgba(101, 29, 255, 0.75);
}
.ovui-button--primary-light-stroke:not(.ovui-button--disabled):focus[data-motion-wave="after"]::after,
.ovui-button--primary-light-stroke:not(.ovui-button--disabled):focus[data-motion-wave="before"]::before {
  color: rgba(101, 29, 255, 0.75);
}
.ovui-button--primary-light-stroke:not(.ovui-button--disabled):active {
  color: rgba(101, 29, 255, 0.75);
  background-color: #381088;
  border-color: rgba(101, 29, 255, 0.75);
}
.ovui-button--primary-light-stroke:not(.ovui-button--disabled):active[data-motion-wave="after"]::after,
.ovui-button--primary-light-stroke:not(.ovui-button--disabled):active[data-motion-wave="before"]::before {
  color: rgba(101, 29, 255, 0.75);
}
.ovui-button--primary-light-stroke:not(.ovui-button--disabled).ovui-button--checked,
.ovui-button--primary-light-stroke:not(.ovui-button--disabled).ovui-button--checked:hover,
.ovui-button--primary-light-stroke:not(.ovui-button--disabled).ovui-button--checked:focus,
.ovui-button--primary-light-stroke:not(.ovui-button--disabled).ovui-button--checked:active {
  color: rgba(101, 29, 255, 0.75);
  background-color: #381088;
  border-color: rgba(101, 29, 255, 0.75);
}
.ovui-button--primary-light-stroke:not(.ovui-button--disabled).ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--primary-light-stroke:not(.ovui-button--disabled).ovui-button--checked:hover[data-motion-wave="after"]::after,
.ovui-button--primary-light-stroke:not(.ovui-button--disabled).ovui-button--checked:focus[data-motion-wave="after"]::after,
.ovui-button--primary-light-stroke:not(.ovui-button--disabled).ovui-button--checked:active[data-motion-wave="after"]::after,
.ovui-button--primary-light-stroke:not(.ovui-button--disabled).ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--primary-light-stroke:not(.ovui-button--disabled).ovui-button--checked:hover[data-motion-wave="before"]::before,
.ovui-button--primary-light-stroke:not(.ovui-button--disabled).ovui-button--checked:focus[data-motion-wave="before"]::before,
.ovui-button--primary-light-stroke:not(.ovui-button--disabled).ovui-button--checked:active[data-motion-wave="before"]::before {
  color: rgba(101, 29, 255, 0.75);
}
.ovui-button--primary-light-stroke.ovui-button--loading,
.ovui-button--primary-light-stroke.ovui-button--disabled,
.ovui-button--primary-light-stroke.ovui-button--loading:hover,
.ovui-button--primary-light-stroke.ovui-button--disabled:hover,
.ovui-button--primary-light-stroke.ovui-button--loading:focus,
.ovui-button--primary-light-stroke.ovui-button--disabled:focus,
.ovui-button--primary-light-stroke.ovui-button--loading:active,
.ovui-button--primary-light-stroke.ovui-button--disabled:active {
  color: rgba(101, 29, 255, 0.34);
  background-color: #381088;
  border-color: rgba(101, 29, 255, 0.34);
}
.ovui-button--primary-light-stroke.ovui-button--loading[data-motion-wave="after"]::after,
.ovui-button--primary-light-stroke.ovui-button--disabled[data-motion-wave="after"]::after,
.ovui-button--primary-light-stroke.ovui-button--loading:hover[data-motion-wave="after"]::after,
.ovui-button--primary-light-stroke.ovui-button--disabled:hover[data-motion-wave="after"]::after,
.ovui-button--primary-light-stroke.ovui-button--loading:focus[data-motion-wave="after"]::after,
.ovui-button--primary-light-stroke.ovui-button--disabled:focus[data-motion-wave="after"]::after,
.ovui-button--primary-light-stroke.ovui-button--loading:active[data-motion-wave="after"]::after,
.ovui-button--primary-light-stroke.ovui-button--disabled:active[data-motion-wave="after"]::after,
.ovui-button--primary-light-stroke.ovui-button--loading[data-motion-wave="before"]::before,
.ovui-button--primary-light-stroke.ovui-button--disabled[data-motion-wave="before"]::before,
.ovui-button--primary-light-stroke.ovui-button--loading:hover[data-motion-wave="before"]::before,
.ovui-button--primary-light-stroke.ovui-button--disabled:hover[data-motion-wave="before"]::before,
.ovui-button--primary-light-stroke.ovui-button--loading:focus[data-motion-wave="before"]::before,
.ovui-button--primary-light-stroke.ovui-button--disabled:focus[data-motion-wave="before"]::before,
.ovui-button--primary-light-stroke.ovui-button--loading:active[data-motion-wave="before"]::before,
.ovui-button--primary-light-stroke.ovui-button--disabled:active[data-motion-wave="before"]::before {
  color: rgba(101, 29, 255, 0.34);
}
.ovui-button--primary-light-stroke.ovui-button--loading.ovui-button--checked,
.ovui-button--primary-light-stroke.ovui-button--disabled.ovui-button--checked,
.ovui-button--primary-light-stroke.ovui-button--loading:hover.ovui-button--checked,
.ovui-button--primary-light-stroke.ovui-button--disabled:hover.ovui-button--checked,
.ovui-button--primary-light-stroke.ovui-button--loading:focus.ovui-button--checked,
.ovui-button--primary-light-stroke.ovui-button--disabled:focus.ovui-button--checked,
.ovui-button--primary-light-stroke.ovui-button--loading:active.ovui-button--checked,
.ovui-button--primary-light-stroke.ovui-button--disabled:active.ovui-button--checked {
  color: rgba(101, 29, 255, 0.34);
  background-color: #381088;
  border-color: rgba(101, 29, 255, 0.34);
}
.ovui-button--primary-light-stroke.ovui-button--loading.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--primary-light-stroke.ovui-button--disabled.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--primary-light-stroke.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--primary-light-stroke.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--primary-light-stroke.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--primary-light-stroke.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--primary-light-stroke.ovui-button--loading:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--primary-light-stroke.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--primary-light-stroke.ovui-button--loading.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--primary-light-stroke.ovui-button--disabled.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--primary-light-stroke.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--primary-light-stroke.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--primary-light-stroke.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--primary-light-stroke.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--primary-light-stroke.ovui-button--loading:active.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--primary-light-stroke.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="before"]::before {
  color: rgba(101, 29, 255, 0.34);
}
.ovui-button--success-light-fill {
  color: #00d5a4;
  background-color: rgba(0, 213, 164, 0.08);
  border-color: rgba(0, 213, 164, 0.08);
}
.ovui-button--success-light-fill[data-motion-wave="after"]::after,
.ovui-button--success-light-fill[data-motion-wave="before"]::before {
  color: rgba(0, 213, 164, 0.08);
}
.ovui-button--success-light-fill:not(.ovui-button--disabled):hover {
  color: #0dffc7;
  background-color: rgba(0, 213, 164, 0.08);
  border-color: rgba(0, 213, 164, 0.08);
}
.ovui-button--success-light-fill:not(.ovui-button--disabled):hover[data-motion-wave="after"]::after,
.ovui-button--success-light-fill:not(.ovui-button--disabled):hover[data-motion-wave="before"]::before {
  color: rgba(0, 213, 164, 0.08);
}
.ovui-button--success-light-fill:not(.ovui-button--disabled):focus {
  color: #00bb8f;
  background-color: #b3ffed;
  border-color: #b3ffed;
}
.ovui-button--success-light-fill:not(.ovui-button--disabled):focus[data-motion-wave="after"]::after,
.ovui-button--success-light-fill:not(.ovui-button--disabled):focus[data-motion-wave="before"]::before {
  color: #b3ffed;
}
.ovui-button--success-light-fill:not(.ovui-button--disabled):active {
  color: #00bb8f;
  background-color: #b3ffed;
  border-color: #b3ffed;
}
.ovui-button--success-light-fill:not(.ovui-button--disabled):active[data-motion-wave="after"]::after,
.ovui-button--success-light-fill:not(.ovui-button--disabled):active[data-motion-wave="before"]::before {
  color: #b3ffed;
}
.ovui-button--success-light-fill:not(.ovui-button--disabled).ovui-button--checked,
.ovui-button--success-light-fill:not(.ovui-button--disabled).ovui-button--checked:hover,
.ovui-button--success-light-fill:not(.ovui-button--disabled).ovui-button--checked:focus,
.ovui-button--success-light-fill:not(.ovui-button--disabled).ovui-button--checked:active {
  color: #00bb8f;
  background-color: #b3ffed;
  border-color: #b3ffed;
}
.ovui-button--success-light-fill:not(.ovui-button--disabled).ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--success-light-fill:not(.ovui-button--disabled).ovui-button--checked:hover[data-motion-wave="after"]::after,
.ovui-button--success-light-fill:not(.ovui-button--disabled).ovui-button--checked:focus[data-motion-wave="after"]::after,
.ovui-button--success-light-fill:not(.ovui-button--disabled).ovui-button--checked:active[data-motion-wave="after"]::after,
.ovui-button--success-light-fill:not(.ovui-button--disabled).ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--success-light-fill:not(.ovui-button--disabled).ovui-button--checked:hover[data-motion-wave="before"]::before,
.ovui-button--success-light-fill:not(.ovui-button--disabled).ovui-button--checked:focus[data-motion-wave="before"]::before,
.ovui-button--success-light-fill:not(.ovui-button--disabled).ovui-button--checked:active[data-motion-wave="before"]::before {
  color: #b3ffed;
}
.ovui-button--success-light-fill.ovui-button--loading,
.ovui-button--success-light-fill.ovui-button--disabled,
.ovui-button--success-light-fill.ovui-button--loading:hover,
.ovui-button--success-light-fill.ovui-button--disabled:hover,
.ovui-button--success-light-fill.ovui-button--loading:focus,
.ovui-button--success-light-fill.ovui-button--disabled:focus,
.ovui-button--success-light-fill.ovui-button--loading:active,
.ovui-button--success-light-fill.ovui-button--disabled:active {
  color: #7cffe0;
  background-color: rgba(0, 213, 164, 0.08);
  border-color: rgba(0, 213, 164, 0.08);
}
.ovui-button--success-light-fill.ovui-button--loading[data-motion-wave="after"]::after,
.ovui-button--success-light-fill.ovui-button--disabled[data-motion-wave="after"]::after,
.ovui-button--success-light-fill.ovui-button--loading:hover[data-motion-wave="after"]::after,
.ovui-button--success-light-fill.ovui-button--disabled:hover[data-motion-wave="after"]::after,
.ovui-button--success-light-fill.ovui-button--loading:focus[data-motion-wave="after"]::after,
.ovui-button--success-light-fill.ovui-button--disabled:focus[data-motion-wave="after"]::after,
.ovui-button--success-light-fill.ovui-button--loading:active[data-motion-wave="after"]::after,
.ovui-button--success-light-fill.ovui-button--disabled:active[data-motion-wave="after"]::after,
.ovui-button--success-light-fill.ovui-button--loading[data-motion-wave="before"]::before,
.ovui-button--success-light-fill.ovui-button--disabled[data-motion-wave="before"]::before,
.ovui-button--success-light-fill.ovui-button--loading:hover[data-motion-wave="before"]::before,
.ovui-button--success-light-fill.ovui-button--disabled:hover[data-motion-wave="before"]::before,
.ovui-button--success-light-fill.ovui-button--loading:focus[data-motion-wave="before"]::before,
.ovui-button--success-light-fill.ovui-button--disabled:focus[data-motion-wave="before"]::before,
.ovui-button--success-light-fill.ovui-button--loading:active[data-motion-wave="before"]::before,
.ovui-button--success-light-fill.ovui-button--disabled:active[data-motion-wave="before"]::before {
  color: rgba(0, 213, 164, 0.08);
}
.ovui-button--success-light-fill.ovui-button--loading.ovui-button--checked,
.ovui-button--success-light-fill.ovui-button--disabled.ovui-button--checked,
.ovui-button--success-light-fill.ovui-button--loading:hover.ovui-button--checked,
.ovui-button--success-light-fill.ovui-button--disabled:hover.ovui-button--checked,
.ovui-button--success-light-fill.ovui-button--loading:focus.ovui-button--checked,
.ovui-button--success-light-fill.ovui-button--disabled:focus.ovui-button--checked,
.ovui-button--success-light-fill.ovui-button--loading:active.ovui-button--checked,
.ovui-button--success-light-fill.ovui-button--disabled:active.ovui-button--checked {
  color: #7cffe0;
  background-color: rgba(0, 213, 164, 0.08);
  border-color: rgba(0, 213, 164, 0.08);
}
.ovui-button--success-light-fill.ovui-button--loading.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--success-light-fill.ovui-button--disabled.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--success-light-fill.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--success-light-fill.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--success-light-fill.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--success-light-fill.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--success-light-fill.ovui-button--loading:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--success-light-fill.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--success-light-fill.ovui-button--loading.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--success-light-fill.ovui-button--disabled.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--success-light-fill.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--success-light-fill.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--success-light-fill.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--success-light-fill.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--success-light-fill.ovui-button--loading:active.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--success-light-fill.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="before"]::before {
  color: rgba(0, 213, 164, 0.08);
}
.ovui-button--success-light-stroke {
  color: #00d5a4;
  background-color: rgba(0, 213, 164, 0.08);
  border-color: #00d5a4;
}
.ovui-button--success-light-stroke[data-motion-wave="after"]::after,
.ovui-button--success-light-stroke[data-motion-wave="before"]::before {
  color: #00d5a4;
}
.ovui-button--success-light-stroke:not(.ovui-button--disabled):hover {
  color: #0dffc7;
  background-color: rgba(0, 213, 164, 0.08);
  border-color: #0dffc7;
}
.ovui-button--success-light-stroke:not(.ovui-button--disabled):hover[data-motion-wave="after"]::after,
.ovui-button--success-light-stroke:not(.ovui-button--disabled):hover[data-motion-wave="before"]::before {
  color: #0dffc7;
}
.ovui-button--success-light-stroke:not(.ovui-button--disabled):focus {
  color: #00bb8f;
  background-color: rgba(0, 213, 164, 0.08);
  border-color: #00bb8f;
}
.ovui-button--success-light-stroke:not(.ovui-button--disabled):focus[data-motion-wave="after"]::after,
.ovui-button--success-light-stroke:not(.ovui-button--disabled):focus[data-motion-wave="before"]::before {
  color: #00bb8f;
}
.ovui-button--success-light-stroke:not(.ovui-button--disabled):active {
  color: #00bb8f;
  background-color: rgba(0, 213, 164, 0.08);
  border-color: #00bb8f;
}
.ovui-button--success-light-stroke:not(.ovui-button--disabled):active[data-motion-wave="after"]::after,
.ovui-button--success-light-stroke:not(.ovui-button--disabled):active[data-motion-wave="before"]::before {
  color: #00bb8f;
}
.ovui-button--success-light-stroke:not(.ovui-button--disabled).ovui-button--checked,
.ovui-button--success-light-stroke:not(.ovui-button--disabled).ovui-button--checked:hover,
.ovui-button--success-light-stroke:not(.ovui-button--disabled).ovui-button--checked:focus,
.ovui-button--success-light-stroke:not(.ovui-button--disabled).ovui-button--checked:active {
  color: #00bb8f;
  background-color: rgba(0, 213, 164, 0.08);
  border-color: #00bb8f;
}
.ovui-button--success-light-stroke:not(.ovui-button--disabled).ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--success-light-stroke:not(.ovui-button--disabled).ovui-button--checked:hover[data-motion-wave="after"]::after,
.ovui-button--success-light-stroke:not(.ovui-button--disabled).ovui-button--checked:focus[data-motion-wave="after"]::after,
.ovui-button--success-light-stroke:not(.ovui-button--disabled).ovui-button--checked:active[data-motion-wave="after"]::after,
.ovui-button--success-light-stroke:not(.ovui-button--disabled).ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--success-light-stroke:not(.ovui-button--disabled).ovui-button--checked:hover[data-motion-wave="before"]::before,
.ovui-button--success-light-stroke:not(.ovui-button--disabled).ovui-button--checked:focus[data-motion-wave="before"]::before,
.ovui-button--success-light-stroke:not(.ovui-button--disabled).ovui-button--checked:active[data-motion-wave="before"]::before {
  color: #00bb8f;
}
.ovui-button--success-light-stroke.ovui-button--loading,
.ovui-button--success-light-stroke.ovui-button--disabled,
.ovui-button--success-light-stroke.ovui-button--loading:hover,
.ovui-button--success-light-stroke.ovui-button--disabled:hover,
.ovui-button--success-light-stroke.ovui-button--loading:focus,
.ovui-button--success-light-stroke.ovui-button--disabled:focus,
.ovui-button--success-light-stroke.ovui-button--loading:active,
.ovui-button--success-light-stroke.ovui-button--disabled:active {
  color: #7cffe0;
  background-color: rgba(0, 213, 164, 0.08);
  border-color: #7cffe0;
}
.ovui-button--success-light-stroke.ovui-button--loading[data-motion-wave="after"]::after,
.ovui-button--success-light-stroke.ovui-button--disabled[data-motion-wave="after"]::after,
.ovui-button--success-light-stroke.ovui-button--loading:hover[data-motion-wave="after"]::after,
.ovui-button--success-light-stroke.ovui-button--disabled:hover[data-motion-wave="after"]::after,
.ovui-button--success-light-stroke.ovui-button--loading:focus[data-motion-wave="after"]::after,
.ovui-button--success-light-stroke.ovui-button--disabled:focus[data-motion-wave="after"]::after,
.ovui-button--success-light-stroke.ovui-button--loading:active[data-motion-wave="after"]::after,
.ovui-button--success-light-stroke.ovui-button--disabled:active[data-motion-wave="after"]::after,
.ovui-button--success-light-stroke.ovui-button--loading[data-motion-wave="before"]::before,
.ovui-button--success-light-stroke.ovui-button--disabled[data-motion-wave="before"]::before,
.ovui-button--success-light-stroke.ovui-button--loading:hover[data-motion-wave="before"]::before,
.ovui-button--success-light-stroke.ovui-button--disabled:hover[data-motion-wave="before"]::before,
.ovui-button--success-light-stroke.ovui-button--loading:focus[data-motion-wave="before"]::before,
.ovui-button--success-light-stroke.ovui-button--disabled:focus[data-motion-wave="before"]::before,
.ovui-button--success-light-stroke.ovui-button--loading:active[data-motion-wave="before"]::before,
.ovui-button--success-light-stroke.ovui-button--disabled:active[data-motion-wave="before"]::before {
  color: #7cffe0;
}
.ovui-button--success-light-stroke.ovui-button--loading.ovui-button--checked,
.ovui-button--success-light-stroke.ovui-button--disabled.ovui-button--checked,
.ovui-button--success-light-stroke.ovui-button--loading:hover.ovui-button--checked,
.ovui-button--success-light-stroke.ovui-button--disabled:hover.ovui-button--checked,
.ovui-button--success-light-stroke.ovui-button--loading:focus.ovui-button--checked,
.ovui-button--success-light-stroke.ovui-button--disabled:focus.ovui-button--checked,
.ovui-button--success-light-stroke.ovui-button--loading:active.ovui-button--checked,
.ovui-button--success-light-stroke.ovui-button--disabled:active.ovui-button--checked {
  color: #7cffe0;
  background-color: rgba(0, 213, 164, 0.08);
  border-color: #7cffe0;
}
.ovui-button--success-light-stroke.ovui-button--loading.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--success-light-stroke.ovui-button--disabled.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--success-light-stroke.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--success-light-stroke.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--success-light-stroke.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--success-light-stroke.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--success-light-stroke.ovui-button--loading:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--success-light-stroke.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--success-light-stroke.ovui-button--loading.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--success-light-stroke.ovui-button--disabled.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--success-light-stroke.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--success-light-stroke.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--success-light-stroke.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--success-light-stroke.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--success-light-stroke.ovui-button--loading:active.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--success-light-stroke.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="before"]::before {
  color: #7cffe0;
}
.ovui-button--warning-light-fill {
  color: #ff7c00;
  background-color: rgba(255, 124, 0, 0.08);
  border-color: rgba(255, 124, 0, 0.08);
}
.ovui-button--warning-light-fill[data-motion-wave="after"]::after,
.ovui-button--warning-light-fill[data-motion-wave="before"]::before {
  color: rgba(255, 124, 0, 0.08);
}
.ovui-button--warning-light-fill:not(.ovui-button--disabled):hover {
  color: #ff932f;
  background-color: rgba(255, 124, 0, 0.08);
  border-color: rgba(255, 124, 0, 0.08);
}
.ovui-button--warning-light-fill:not(.ovui-button--disabled):hover[data-motion-wave="after"]::after,
.ovui-button--warning-light-fill:not(.ovui-button--disabled):hover[data-motion-wave="before"]::before {
  color: rgba(255, 124, 0, 0.08);
}
.ovui-button--warning-light-fill:not(.ovui-button--disabled):focus {
  color: #dc6a00;
  background-color: #ffdcbc;
  border-color: #ffdcbc;
}
.ovui-button--warning-light-fill:not(.ovui-button--disabled):focus[data-motion-wave="after"]::after,
.ovui-button--warning-light-fill:not(.ovui-button--disabled):focus[data-motion-wave="before"]::before {
  color: #ffdcbc;
}
.ovui-button--warning-light-fill:not(.ovui-button--disabled):active {
  color: #dc6a00;
  background-color: #ffdcbc;
  border-color: #ffdcbc;
}
.ovui-button--warning-light-fill:not(.ovui-button--disabled):active[data-motion-wave="after"]::after,
.ovui-button--warning-light-fill:not(.ovui-button--disabled):active[data-motion-wave="before"]::before {
  color: #ffdcbc;
}
.ovui-button--warning-light-fill:not(.ovui-button--disabled).ovui-button--checked,
.ovui-button--warning-light-fill:not(.ovui-button--disabled).ovui-button--checked:hover,
.ovui-button--warning-light-fill:not(.ovui-button--disabled).ovui-button--checked:focus,
.ovui-button--warning-light-fill:not(.ovui-button--disabled).ovui-button--checked:active {
  color: #dc6a00;
  background-color: #ffdcbc;
  border-color: #ffdcbc;
}
.ovui-button--warning-light-fill:not(.ovui-button--disabled).ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--warning-light-fill:not(.ovui-button--disabled).ovui-button--checked:hover[data-motion-wave="after"]::after,
.ovui-button--warning-light-fill:not(.ovui-button--disabled).ovui-button--checked:focus[data-motion-wave="after"]::after,
.ovui-button--warning-light-fill:not(.ovui-button--disabled).ovui-button--checked:active[data-motion-wave="after"]::after,
.ovui-button--warning-light-fill:not(.ovui-button--disabled).ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--warning-light-fill:not(.ovui-button--disabled).ovui-button--checked:hover[data-motion-wave="before"]::before,
.ovui-button--warning-light-fill:not(.ovui-button--disabled).ovui-button--checked:focus[data-motion-wave="before"]::before,
.ovui-button--warning-light-fill:not(.ovui-button--disabled).ovui-button--checked:active[data-motion-wave="before"]::before {
  color: #ffdcbc;
}
.ovui-button--warning-light-fill.ovui-button--loading,
.ovui-button--warning-light-fill.ovui-button--disabled,
.ovui-button--warning-light-fill.ovui-button--loading:hover,
.ovui-button--warning-light-fill.ovui-button--disabled:hover,
.ovui-button--warning-light-fill.ovui-button--loading:focus,
.ovui-button--warning-light-fill.ovui-button--disabled:focus,
.ovui-button--warning-light-fill.ovui-button--loading:active,
.ovui-button--warning-light-fill.ovui-button--disabled:active {
  color: #ffc48d;
  background-color: rgba(255, 124, 0, 0.08);
  border-color: rgba(255, 124, 0, 0.08);
}
.ovui-button--warning-light-fill.ovui-button--loading[data-motion-wave="after"]::after,
.ovui-button--warning-light-fill.ovui-button--disabled[data-motion-wave="after"]::after,
.ovui-button--warning-light-fill.ovui-button--loading:hover[data-motion-wave="after"]::after,
.ovui-button--warning-light-fill.ovui-button--disabled:hover[data-motion-wave="after"]::after,
.ovui-button--warning-light-fill.ovui-button--loading:focus[data-motion-wave="after"]::after,
.ovui-button--warning-light-fill.ovui-button--disabled:focus[data-motion-wave="after"]::after,
.ovui-button--warning-light-fill.ovui-button--loading:active[data-motion-wave="after"]::after,
.ovui-button--warning-light-fill.ovui-button--disabled:active[data-motion-wave="after"]::after,
.ovui-button--warning-light-fill.ovui-button--loading[data-motion-wave="before"]::before,
.ovui-button--warning-light-fill.ovui-button--disabled[data-motion-wave="before"]::before,
.ovui-button--warning-light-fill.ovui-button--loading:hover[data-motion-wave="before"]::before,
.ovui-button--warning-light-fill.ovui-button--disabled:hover[data-motion-wave="before"]::before,
.ovui-button--warning-light-fill.ovui-button--loading:focus[data-motion-wave="before"]::before,
.ovui-button--warning-light-fill.ovui-button--disabled:focus[data-motion-wave="before"]::before,
.ovui-button--warning-light-fill.ovui-button--loading:active[data-motion-wave="before"]::before,
.ovui-button--warning-light-fill.ovui-button--disabled:active[data-motion-wave="before"]::before {
  color: rgba(255, 124, 0, 0.08);
}
.ovui-button--warning-light-fill.ovui-button--loading.ovui-button--checked,
.ovui-button--warning-light-fill.ovui-button--disabled.ovui-button--checked,
.ovui-button--warning-light-fill.ovui-button--loading:hover.ovui-button--checked,
.ovui-button--warning-light-fill.ovui-button--disabled:hover.ovui-button--checked,
.ovui-button--warning-light-fill.ovui-button--loading:focus.ovui-button--checked,
.ovui-button--warning-light-fill.ovui-button--disabled:focus.ovui-button--checked,
.ovui-button--warning-light-fill.ovui-button--loading:active.ovui-button--checked,
.ovui-button--warning-light-fill.ovui-button--disabled:active.ovui-button--checked {
  color: #ffc48d;
  background-color: rgba(255, 124, 0, 0.08);
  border-color: rgba(255, 124, 0, 0.08);
}
.ovui-button--warning-light-fill.ovui-button--loading.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--warning-light-fill.ovui-button--disabled.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--warning-light-fill.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--warning-light-fill.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--warning-light-fill.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--warning-light-fill.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--warning-light-fill.ovui-button--loading:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--warning-light-fill.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--warning-light-fill.ovui-button--loading.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--warning-light-fill.ovui-button--disabled.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--warning-light-fill.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--warning-light-fill.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--warning-light-fill.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--warning-light-fill.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--warning-light-fill.ovui-button--loading:active.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--warning-light-fill.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="before"]::before {
  color: rgba(255, 124, 0, 0.08);
}
.ovui-button--warning-light-stroke {
  color: #ff7c00;
  background-color: rgba(255, 124, 0, 0.08);
  border-color: #ff7c00;
}
.ovui-button--warning-light-stroke[data-motion-wave="after"]::after,
.ovui-button--warning-light-stroke[data-motion-wave="before"]::before {
  color: #ff7c00;
}
.ovui-button--warning-light-stroke:not(.ovui-button--disabled):hover {
  color: #ff932f;
  background-color: rgba(255, 124, 0, 0.08);
  border-color: #ff932f;
}
.ovui-button--warning-light-stroke:not(.ovui-button--disabled):hover[data-motion-wave="after"]::after,
.ovui-button--warning-light-stroke:not(.ovui-button--disabled):hover[data-motion-wave="before"]::before {
  color: #ff932f;
}
.ovui-button--warning-light-stroke:not(.ovui-button--disabled):focus {
  color: #dc6a00;
  background-color: rgba(255, 124, 0, 0.08);
  border-color: #dc6a00;
}
.ovui-button--warning-light-stroke:not(.ovui-button--disabled):focus[data-motion-wave="after"]::after,
.ovui-button--warning-light-stroke:not(.ovui-button--disabled):focus[data-motion-wave="before"]::before {
  color: #dc6a00;
}
.ovui-button--warning-light-stroke:not(.ovui-button--disabled):active {
  color: #dc6a00;
  background-color: rgba(255, 124, 0, 0.08);
  border-color: #dc6a00;
}
.ovui-button--warning-light-stroke:not(.ovui-button--disabled):active[data-motion-wave="after"]::after,
.ovui-button--warning-light-stroke:not(.ovui-button--disabled):active[data-motion-wave="before"]::before {
  color: #dc6a00;
}
.ovui-button--warning-light-stroke:not(.ovui-button--disabled).ovui-button--checked,
.ovui-button--warning-light-stroke:not(.ovui-button--disabled).ovui-button--checked:hover,
.ovui-button--warning-light-stroke:not(.ovui-button--disabled).ovui-button--checked:focus,
.ovui-button--warning-light-stroke:not(.ovui-button--disabled).ovui-button--checked:active {
  color: #dc6a00;
  background-color: rgba(255, 124, 0, 0.08);
  border-color: #dc6a00;
}
.ovui-button--warning-light-stroke:not(.ovui-button--disabled).ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--warning-light-stroke:not(.ovui-button--disabled).ovui-button--checked:hover[data-motion-wave="after"]::after,
.ovui-button--warning-light-stroke:not(.ovui-button--disabled).ovui-button--checked:focus[data-motion-wave="after"]::after,
.ovui-button--warning-light-stroke:not(.ovui-button--disabled).ovui-button--checked:active[data-motion-wave="after"]::after,
.ovui-button--warning-light-stroke:not(.ovui-button--disabled).ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--warning-light-stroke:not(.ovui-button--disabled).ovui-button--checked:hover[data-motion-wave="before"]::before,
.ovui-button--warning-light-stroke:not(.ovui-button--disabled).ovui-button--checked:focus[data-motion-wave="before"]::before,
.ovui-button--warning-light-stroke:not(.ovui-button--disabled).ovui-button--checked:active[data-motion-wave="before"]::before {
  color: #dc6a00;
}
.ovui-button--warning-light-stroke.ovui-button--loading,
.ovui-button--warning-light-stroke.ovui-button--disabled,
.ovui-button--warning-light-stroke.ovui-button--loading:hover,
.ovui-button--warning-light-stroke.ovui-button--disabled:hover,
.ovui-button--warning-light-stroke.ovui-button--loading:focus,
.ovui-button--warning-light-stroke.ovui-button--disabled:focus,
.ovui-button--warning-light-stroke.ovui-button--loading:active,
.ovui-button--warning-light-stroke.ovui-button--disabled:active {
  color: #ffc48d;
  background-color: rgba(255, 124, 0, 0.08);
  border-color: #ffc48d;
}
.ovui-button--warning-light-stroke.ovui-button--loading[data-motion-wave="after"]::after,
.ovui-button--warning-light-stroke.ovui-button--disabled[data-motion-wave="after"]::after,
.ovui-button--warning-light-stroke.ovui-button--loading:hover[data-motion-wave="after"]::after,
.ovui-button--warning-light-stroke.ovui-button--disabled:hover[data-motion-wave="after"]::after,
.ovui-button--warning-light-stroke.ovui-button--loading:focus[data-motion-wave="after"]::after,
.ovui-button--warning-light-stroke.ovui-button--disabled:focus[data-motion-wave="after"]::after,
.ovui-button--warning-light-stroke.ovui-button--loading:active[data-motion-wave="after"]::after,
.ovui-button--warning-light-stroke.ovui-button--disabled:active[data-motion-wave="after"]::after,
.ovui-button--warning-light-stroke.ovui-button--loading[data-motion-wave="before"]::before,
.ovui-button--warning-light-stroke.ovui-button--disabled[data-motion-wave="before"]::before,
.ovui-button--warning-light-stroke.ovui-button--loading:hover[data-motion-wave="before"]::before,
.ovui-button--warning-light-stroke.ovui-button--disabled:hover[data-motion-wave="before"]::before,
.ovui-button--warning-light-stroke.ovui-button--loading:focus[data-motion-wave="before"]::before,
.ovui-button--warning-light-stroke.ovui-button--disabled:focus[data-motion-wave="before"]::before,
.ovui-button--warning-light-stroke.ovui-button--loading:active[data-motion-wave="before"]::before,
.ovui-button--warning-light-stroke.ovui-button--disabled:active[data-motion-wave="before"]::before {
  color: #ffc48d;
}
.ovui-button--warning-light-stroke.ovui-button--loading.ovui-button--checked,
.ovui-button--warning-light-stroke.ovui-button--disabled.ovui-button--checked,
.ovui-button--warning-light-stroke.ovui-button--loading:hover.ovui-button--checked,
.ovui-button--warning-light-stroke.ovui-button--disabled:hover.ovui-button--checked,
.ovui-button--warning-light-stroke.ovui-button--loading:focus.ovui-button--checked,
.ovui-button--warning-light-stroke.ovui-button--disabled:focus.ovui-button--checked,
.ovui-button--warning-light-stroke.ovui-button--loading:active.ovui-button--checked,
.ovui-button--warning-light-stroke.ovui-button--disabled:active.ovui-button--checked {
  color: #ffc48d;
  background-color: rgba(255, 124, 0, 0.08);
  border-color: #ffc48d;
}
.ovui-button--warning-light-stroke.ovui-button--loading.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--warning-light-stroke.ovui-button--disabled.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--warning-light-stroke.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--warning-light-stroke.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--warning-light-stroke.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--warning-light-stroke.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--warning-light-stroke.ovui-button--loading:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--warning-light-stroke.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--warning-light-stroke.ovui-button--loading.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--warning-light-stroke.ovui-button--disabled.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--warning-light-stroke.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--warning-light-stroke.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--warning-light-stroke.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--warning-light-stroke.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--warning-light-stroke.ovui-button--loading:active.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--warning-light-stroke.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="before"]::before {
  color: #ffc48d;
}
.ovui-button--danger-light-fill {
  color: #ff0060;
  background-color: rgba(255, 0, 96, 0.06);
  border-color: rgba(255, 0, 96, 0.06);
}
.ovui-button--danger-light-fill[data-motion-wave="after"]::after,
.ovui-button--danger-light-fill[data-motion-wave="before"]::before {
  color: rgba(255, 0, 96, 0.06);
}
.ovui-button--danger-light-fill:not(.ovui-button--disabled):hover {
  color: #ff2f7f;
  background-color: rgba(255, 0, 96, 0.06);
  border-color: rgba(255, 0, 96, 0.06);
}
.ovui-button--danger-light-fill:not(.ovui-button--disabled):hover[data-motion-wave="after"]::after,
.ovui-button--danger-light-fill:not(.ovui-button--disabled):hover[data-motion-wave="before"]::before {
  color: rgba(255, 0, 96, 0.06);
}
.ovui-button--danger-light-fill:not(.ovui-button--disabled):focus {
  color: #dc0054;
  background-color: #ffbcd5;
  border-color: #ffbcd5;
}
.ovui-button--danger-light-fill:not(.ovui-button--disabled):focus[data-motion-wave="after"]::after,
.ovui-button--danger-light-fill:not(.ovui-button--disabled):focus[data-motion-wave="before"]::before {
  color: #ffbcd5;
}
.ovui-button--danger-light-fill:not(.ovui-button--disabled):active {
  color: #dc0054;
  background-color: #ffbcd5;
  border-color: #ffbcd5;
}
.ovui-button--danger-light-fill:not(.ovui-button--disabled):active[data-motion-wave="after"]::after,
.ovui-button--danger-light-fill:not(.ovui-button--disabled):active[data-motion-wave="before"]::before {
  color: #ffbcd5;
}
.ovui-button--danger-light-fill:not(.ovui-button--disabled).ovui-button--checked,
.ovui-button--danger-light-fill:not(.ovui-button--disabled).ovui-button--checked:hover,
.ovui-button--danger-light-fill:not(.ovui-button--disabled).ovui-button--checked:focus,
.ovui-button--danger-light-fill:not(.ovui-button--disabled).ovui-button--checked:active {
  color: #dc0054;
  background-color: #ffbcd5;
  border-color: #ffbcd5;
}
.ovui-button--danger-light-fill:not(.ovui-button--disabled).ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--danger-light-fill:not(.ovui-button--disabled).ovui-button--checked:hover[data-motion-wave="after"]::after,
.ovui-button--danger-light-fill:not(.ovui-button--disabled).ovui-button--checked:focus[data-motion-wave="after"]::after,
.ovui-button--danger-light-fill:not(.ovui-button--disabled).ovui-button--checked:active[data-motion-wave="after"]::after,
.ovui-button--danger-light-fill:not(.ovui-button--disabled).ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--danger-light-fill:not(.ovui-button--disabled).ovui-button--checked:hover[data-motion-wave="before"]::before,
.ovui-button--danger-light-fill:not(.ovui-button--disabled).ovui-button--checked:focus[data-motion-wave="before"]::before,
.ovui-button--danger-light-fill:not(.ovui-button--disabled).ovui-button--checked:active[data-motion-wave="before"]::before {
  color: #ffbcd5;
}
.ovui-button--danger-light-fill.ovui-button--loading,
.ovui-button--danger-light-fill.ovui-button--disabled,
.ovui-button--danger-light-fill.ovui-button--loading:hover,
.ovui-button--danger-light-fill.ovui-button--disabled:hover,
.ovui-button--danger-light-fill.ovui-button--loading:focus,
.ovui-button--danger-light-fill.ovui-button--disabled:focus,
.ovui-button--danger-light-fill.ovui-button--loading:active,
.ovui-button--danger-light-fill.ovui-button--disabled:active {
  color: #ff8db9;
  background-color: rgba(255, 0, 96, 0.06);
  border-color: rgba(255, 0, 96, 0.06);
}
.ovui-button--danger-light-fill.ovui-button--loading[data-motion-wave="after"]::after,
.ovui-button--danger-light-fill.ovui-button--disabled[data-motion-wave="after"]::after,
.ovui-button--danger-light-fill.ovui-button--loading:hover[data-motion-wave="after"]::after,
.ovui-button--danger-light-fill.ovui-button--disabled:hover[data-motion-wave="after"]::after,
.ovui-button--danger-light-fill.ovui-button--loading:focus[data-motion-wave="after"]::after,
.ovui-button--danger-light-fill.ovui-button--disabled:focus[data-motion-wave="after"]::after,
.ovui-button--danger-light-fill.ovui-button--loading:active[data-motion-wave="after"]::after,
.ovui-button--danger-light-fill.ovui-button--disabled:active[data-motion-wave="after"]::after,
.ovui-button--danger-light-fill.ovui-button--loading[data-motion-wave="before"]::before,
.ovui-button--danger-light-fill.ovui-button--disabled[data-motion-wave="before"]::before,
.ovui-button--danger-light-fill.ovui-button--loading:hover[data-motion-wave="before"]::before,
.ovui-button--danger-light-fill.ovui-button--disabled:hover[data-motion-wave="before"]::before,
.ovui-button--danger-light-fill.ovui-button--loading:focus[data-motion-wave="before"]::before,
.ovui-button--danger-light-fill.ovui-button--disabled:focus[data-motion-wave="before"]::before,
.ovui-button--danger-light-fill.ovui-button--loading:active[data-motion-wave="before"]::before,
.ovui-button--danger-light-fill.ovui-button--disabled:active[data-motion-wave="before"]::before {
  color: rgba(255, 0, 96, 0.06);
}
.ovui-button--danger-light-fill.ovui-button--loading.ovui-button--checked,
.ovui-button--danger-light-fill.ovui-button--disabled.ovui-button--checked,
.ovui-button--danger-light-fill.ovui-button--loading:hover.ovui-button--checked,
.ovui-button--danger-light-fill.ovui-button--disabled:hover.ovui-button--checked,
.ovui-button--danger-light-fill.ovui-button--loading:focus.ovui-button--checked,
.ovui-button--danger-light-fill.ovui-button--disabled:focus.ovui-button--checked,
.ovui-button--danger-light-fill.ovui-button--loading:active.ovui-button--checked,
.ovui-button--danger-light-fill.ovui-button--disabled:active.ovui-button--checked {
  color: #ff8db9;
  background-color: rgba(255, 0, 96, 0.06);
  border-color: rgba(255, 0, 96, 0.06);
}
.ovui-button--danger-light-fill.ovui-button--loading.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--danger-light-fill.ovui-button--disabled.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--danger-light-fill.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--danger-light-fill.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--danger-light-fill.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--danger-light-fill.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--danger-light-fill.ovui-button--loading:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--danger-light-fill.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--danger-light-fill.ovui-button--loading.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--danger-light-fill.ovui-button--disabled.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--danger-light-fill.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--danger-light-fill.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--danger-light-fill.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--danger-light-fill.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--danger-light-fill.ovui-button--loading:active.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--danger-light-fill.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="before"]::before {
  color: rgba(255, 0, 96, 0.06);
}
.ovui-button--danger-light-stroke {
  color: #ff0060;
  background-color: rgba(255, 0, 96, 0.06);
  border-color: #ff0060;
}
.ovui-button--danger-light-stroke[data-motion-wave="after"]::after,
.ovui-button--danger-light-stroke[data-motion-wave="before"]::before {
  color: #ff0060;
}
.ovui-button--danger-light-stroke:not(.ovui-button--disabled):hover {
  color: #ff2f7f;
  background-color: rgba(255, 0, 96, 0.06);
  border-color: #ff2f7f;
}
.ovui-button--danger-light-stroke:not(.ovui-button--disabled):hover[data-motion-wave="after"]::after,
.ovui-button--danger-light-stroke:not(.ovui-button--disabled):hover[data-motion-wave="before"]::before {
  color: #ff2f7f;
}
.ovui-button--danger-light-stroke:not(.ovui-button--disabled):focus {
  color: #dc0054;
  background-color: rgba(255, 0, 96, 0.06);
  border-color: #dc0054;
}
.ovui-button--danger-light-stroke:not(.ovui-button--disabled):focus[data-motion-wave="after"]::after,
.ovui-button--danger-light-stroke:not(.ovui-button--disabled):focus[data-motion-wave="before"]::before {
  color: #dc0054;
}
.ovui-button--danger-light-stroke:not(.ovui-button--disabled):active {
  color: #dc0054;
  background-color: rgba(255, 0, 96, 0.06);
  border-color: #dc0054;
}
.ovui-button--danger-light-stroke:not(.ovui-button--disabled):active[data-motion-wave="after"]::after,
.ovui-button--danger-light-stroke:not(.ovui-button--disabled):active[data-motion-wave="before"]::before {
  color: #dc0054;
}
.ovui-button--danger-light-stroke:not(.ovui-button--disabled).ovui-button--checked,
.ovui-button--danger-light-stroke:not(.ovui-button--disabled).ovui-button--checked:hover,
.ovui-button--danger-light-stroke:not(.ovui-button--disabled).ovui-button--checked:focus,
.ovui-button--danger-light-stroke:not(.ovui-button--disabled).ovui-button--checked:active {
  color: #dc0054;
  background-color: rgba(255, 0, 96, 0.06);
  border-color: #dc0054;
}
.ovui-button--danger-light-stroke:not(.ovui-button--disabled).ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--danger-light-stroke:not(.ovui-button--disabled).ovui-button--checked:hover[data-motion-wave="after"]::after,
.ovui-button--danger-light-stroke:not(.ovui-button--disabled).ovui-button--checked:focus[data-motion-wave="after"]::after,
.ovui-button--danger-light-stroke:not(.ovui-button--disabled).ovui-button--checked:active[data-motion-wave="after"]::after,
.ovui-button--danger-light-stroke:not(.ovui-button--disabled).ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--danger-light-stroke:not(.ovui-button--disabled).ovui-button--checked:hover[data-motion-wave="before"]::before,
.ovui-button--danger-light-stroke:not(.ovui-button--disabled).ovui-button--checked:focus[data-motion-wave="before"]::before,
.ovui-button--danger-light-stroke:not(.ovui-button--disabled).ovui-button--checked:active[data-motion-wave="before"]::before {
  color: #dc0054;
}
.ovui-button--danger-light-stroke.ovui-button--loading,
.ovui-button--danger-light-stroke.ovui-button--disabled,
.ovui-button--danger-light-stroke.ovui-button--loading:hover,
.ovui-button--danger-light-stroke.ovui-button--disabled:hover,
.ovui-button--danger-light-stroke.ovui-button--loading:focus,
.ovui-button--danger-light-stroke.ovui-button--disabled:focus,
.ovui-button--danger-light-stroke.ovui-button--loading:active,
.ovui-button--danger-light-stroke.ovui-button--disabled:active {
  color: #ff8db9;
  background-color: rgba(255, 0, 96, 0.06);
  border-color: #ff8db9;
}
.ovui-button--danger-light-stroke.ovui-button--loading[data-motion-wave="after"]::after,
.ovui-button--danger-light-stroke.ovui-button--disabled[data-motion-wave="after"]::after,
.ovui-button--danger-light-stroke.ovui-button--loading:hover[data-motion-wave="after"]::after,
.ovui-button--danger-light-stroke.ovui-button--disabled:hover[data-motion-wave="after"]::after,
.ovui-button--danger-light-stroke.ovui-button--loading:focus[data-motion-wave="after"]::after,
.ovui-button--danger-light-stroke.ovui-button--disabled:focus[data-motion-wave="after"]::after,
.ovui-button--danger-light-stroke.ovui-button--loading:active[data-motion-wave="after"]::after,
.ovui-button--danger-light-stroke.ovui-button--disabled:active[data-motion-wave="after"]::after,
.ovui-button--danger-light-stroke.ovui-button--loading[data-motion-wave="before"]::before,
.ovui-button--danger-light-stroke.ovui-button--disabled[data-motion-wave="before"]::before,
.ovui-button--danger-light-stroke.ovui-button--loading:hover[data-motion-wave="before"]::before,
.ovui-button--danger-light-stroke.ovui-button--disabled:hover[data-motion-wave="before"]::before,
.ovui-button--danger-light-stroke.ovui-button--loading:focus[data-motion-wave="before"]::before,
.ovui-button--danger-light-stroke.ovui-button--disabled:focus[data-motion-wave="before"]::before,
.ovui-button--danger-light-stroke.ovui-button--loading:active[data-motion-wave="before"]::before,
.ovui-button--danger-light-stroke.ovui-button--disabled:active[data-motion-wave="before"]::before {
  color: #ff8db9;
}
.ovui-button--danger-light-stroke.ovui-button--loading.ovui-button--checked,
.ovui-button--danger-light-stroke.ovui-button--disabled.ovui-button--checked,
.ovui-button--danger-light-stroke.ovui-button--loading:hover.ovui-button--checked,
.ovui-button--danger-light-stroke.ovui-button--disabled:hover.ovui-button--checked,
.ovui-button--danger-light-stroke.ovui-button--loading:focus.ovui-button--checked,
.ovui-button--danger-light-stroke.ovui-button--disabled:focus.ovui-button--checked,
.ovui-button--danger-light-stroke.ovui-button--loading:active.ovui-button--checked,
.ovui-button--danger-light-stroke.ovui-button--disabled:active.ovui-button--checked {
  color: #ff8db9;
  background-color: rgba(255, 0, 96, 0.06);
  border-color: #ff8db9;
}
.ovui-button--danger-light-stroke.ovui-button--loading.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--danger-light-stroke.ovui-button--disabled.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--danger-light-stroke.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--danger-light-stroke.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--danger-light-stroke.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--danger-light-stroke.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--danger-light-stroke.ovui-button--loading:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--danger-light-stroke.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--danger-light-stroke.ovui-button--loading.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--danger-light-stroke.ovui-button--disabled.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--danger-light-stroke.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--danger-light-stroke.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--danger-light-stroke.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--danger-light-stroke.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--danger-light-stroke.ovui-button--loading:active.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--danger-light-stroke.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="before"]::before {
  color: #ff8db9;
}
.ovui-button--info-light-fill {
  color: #651dff;
  background-color: #381088;
  border-color: #381088;
}
.ovui-button--info-light-fill[data-motion-wave="after"]::after,
.ovui-button--info-light-fill[data-motion-wave="before"]::before {
  color: #381088;
}
.ovui-button--info-light-fill:not(.ovui-button--disabled):hover {
  color: #7433ff;
  background-color: #381088;
  border-color: #381088;
}
.ovui-button--info-light-fill:not(.ovui-button--disabled):hover[data-motion-wave="after"]::after,
.ovui-button--info-light-fill:not(.ovui-button--disabled):hover[data-motion-wave="before"]::before {
  color: #381088;
}
.ovui-button--info-light-fill:not(.ovui-button--disabled):focus {
  color: rgba(101, 29, 255, 0.75);
  background-color: #d5c1ff;
  border-color: #d5c1ff;
}
.ovui-button--info-light-fill:not(.ovui-button--disabled):focus[data-motion-wave="after"]::after,
.ovui-button--info-light-fill:not(.ovui-button--disabled):focus[data-motion-wave="before"]::before {
  color: #d5c1ff;
}
.ovui-button--info-light-fill:not(.ovui-button--disabled):active {
  color: rgba(101, 29, 255, 0.75);
  background-color: #d5c1ff;
  border-color: #d5c1ff;
}
.ovui-button--info-light-fill:not(.ovui-button--disabled):active[data-motion-wave="after"]::after,
.ovui-button--info-light-fill:not(.ovui-button--disabled):active[data-motion-wave="before"]::before {
  color: #d5c1ff;
}
.ovui-button--info-light-fill:not(.ovui-button--disabled).ovui-button--checked,
.ovui-button--info-light-fill:not(.ovui-button--disabled).ovui-button--checked:hover,
.ovui-button--info-light-fill:not(.ovui-button--disabled).ovui-button--checked:focus,
.ovui-button--info-light-fill:not(.ovui-button--disabled).ovui-button--checked:active {
  color: rgba(101, 29, 255, 0.75);
  background-color: #d5c1ff;
  border-color: #d5c1ff;
}
.ovui-button--info-light-fill:not(.ovui-button--disabled).ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--info-light-fill:not(.ovui-button--disabled).ovui-button--checked:hover[data-motion-wave="after"]::after,
.ovui-button--info-light-fill:not(.ovui-button--disabled).ovui-button--checked:focus[data-motion-wave="after"]::after,
.ovui-button--info-light-fill:not(.ovui-button--disabled).ovui-button--checked:active[data-motion-wave="after"]::after,
.ovui-button--info-light-fill:not(.ovui-button--disabled).ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--info-light-fill:not(.ovui-button--disabled).ovui-button--checked:hover[data-motion-wave="before"]::before,
.ovui-button--info-light-fill:not(.ovui-button--disabled).ovui-button--checked:focus[data-motion-wave="before"]::before,
.ovui-button--info-light-fill:not(.ovui-button--disabled).ovui-button--checked:active[data-motion-wave="before"]::before {
  color: #d5c1ff;
}
.ovui-button--info-light-fill.ovui-button--loading,
.ovui-button--info-light-fill.ovui-button--disabled,
.ovui-button--info-light-fill.ovui-button--loading:hover,
.ovui-button--info-light-fill.ovui-button--disabled:hover,
.ovui-button--info-light-fill.ovui-button--loading:focus,
.ovui-button--info-light-fill.ovui-button--disabled:focus,
.ovui-button--info-light-fill.ovui-button--loading:active,
.ovui-button--info-light-fill.ovui-button--disabled:active {
  color: rgba(101, 29, 255, 0.34);
  background-color: #381088;
  border-color: #381088;
}
.ovui-button--info-light-fill.ovui-button--loading[data-motion-wave="after"]::after,
.ovui-button--info-light-fill.ovui-button--disabled[data-motion-wave="after"]::after,
.ovui-button--info-light-fill.ovui-button--loading:hover[data-motion-wave="after"]::after,
.ovui-button--info-light-fill.ovui-button--disabled:hover[data-motion-wave="after"]::after,
.ovui-button--info-light-fill.ovui-button--loading:focus[data-motion-wave="after"]::after,
.ovui-button--info-light-fill.ovui-button--disabled:focus[data-motion-wave="after"]::after,
.ovui-button--info-light-fill.ovui-button--loading:active[data-motion-wave="after"]::after,
.ovui-button--info-light-fill.ovui-button--disabled:active[data-motion-wave="after"]::after,
.ovui-button--info-light-fill.ovui-button--loading[data-motion-wave="before"]::before,
.ovui-button--info-light-fill.ovui-button--disabled[data-motion-wave="before"]::before,
.ovui-button--info-light-fill.ovui-button--loading:hover[data-motion-wave="before"]::before,
.ovui-button--info-light-fill.ovui-button--disabled:hover[data-motion-wave="before"]::before,
.ovui-button--info-light-fill.ovui-button--loading:focus[data-motion-wave="before"]::before,
.ovui-button--info-light-fill.ovui-button--disabled:focus[data-motion-wave="before"]::before,
.ovui-button--info-light-fill.ovui-button--loading:active[data-motion-wave="before"]::before,
.ovui-button--info-light-fill.ovui-button--disabled:active[data-motion-wave="before"]::before {
  color: #381088;
}
.ovui-button--info-light-fill.ovui-button--loading.ovui-button--checked,
.ovui-button--info-light-fill.ovui-button--disabled.ovui-button--checked,
.ovui-button--info-light-fill.ovui-button--loading:hover.ovui-button--checked,
.ovui-button--info-light-fill.ovui-button--disabled:hover.ovui-button--checked,
.ovui-button--info-light-fill.ovui-button--loading:focus.ovui-button--checked,
.ovui-button--info-light-fill.ovui-button--disabled:focus.ovui-button--checked,
.ovui-button--info-light-fill.ovui-button--loading:active.ovui-button--checked,
.ovui-button--info-light-fill.ovui-button--disabled:active.ovui-button--checked {
  color: rgba(101, 29, 255, 0.34);
  background-color: #381088;
  border-color: #381088;
}
.ovui-button--info-light-fill.ovui-button--loading.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--info-light-fill.ovui-button--disabled.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--info-light-fill.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--info-light-fill.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--info-light-fill.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--info-light-fill.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--info-light-fill.ovui-button--loading:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--info-light-fill.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--info-light-fill.ovui-button--loading.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--info-light-fill.ovui-button--disabled.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--info-light-fill.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--info-light-fill.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--info-light-fill.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--info-light-fill.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--info-light-fill.ovui-button--loading:active.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--info-light-fill.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="before"]::before {
  color: #381088;
}
.ovui-button--info-light-stroke {
  color: #651dff;
  background-color: #381088;
  border-color: #651dff;
}
.ovui-button--info-light-stroke[data-motion-wave="after"]::after,
.ovui-button--info-light-stroke[data-motion-wave="before"]::before {
  color: #651dff;
}
.ovui-button--info-light-stroke:not(.ovui-button--disabled):hover {
  color: #7433ff;
  background-color: #381088;
  border-color: #7433ff;
}
.ovui-button--info-light-stroke:not(.ovui-button--disabled):hover[data-motion-wave="after"]::after,
.ovui-button--info-light-stroke:not(.ovui-button--disabled):hover[data-motion-wave="before"]::before {
  color: #7433ff;
}
.ovui-button--info-light-stroke:not(.ovui-button--disabled):focus {
  color: rgba(101, 29, 255, 0.75);
  background-color: #381088;
  border-color: rgba(101, 29, 255, 0.75);
}
.ovui-button--info-light-stroke:not(.ovui-button--disabled):focus[data-motion-wave="after"]::after,
.ovui-button--info-light-stroke:not(.ovui-button--disabled):focus[data-motion-wave="before"]::before {
  color: rgba(101, 29, 255, 0.75);
}
.ovui-button--info-light-stroke:not(.ovui-button--disabled):active {
  color: rgba(101, 29, 255, 0.75);
  background-color: #381088;
  border-color: rgba(101, 29, 255, 0.75);
}
.ovui-button--info-light-stroke:not(.ovui-button--disabled):active[data-motion-wave="after"]::after,
.ovui-button--info-light-stroke:not(.ovui-button--disabled):active[data-motion-wave="before"]::before {
  color: rgba(101, 29, 255, 0.75);
}
.ovui-button--info-light-stroke:not(.ovui-button--disabled).ovui-button--checked,
.ovui-button--info-light-stroke:not(.ovui-button--disabled).ovui-button--checked:hover,
.ovui-button--info-light-stroke:not(.ovui-button--disabled).ovui-button--checked:focus,
.ovui-button--info-light-stroke:not(.ovui-button--disabled).ovui-button--checked:active {
  color: rgba(101, 29, 255, 0.75);
  background-color: #381088;
  border-color: rgba(101, 29, 255, 0.75);
}
.ovui-button--info-light-stroke:not(.ovui-button--disabled).ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--info-light-stroke:not(.ovui-button--disabled).ovui-button--checked:hover[data-motion-wave="after"]::after,
.ovui-button--info-light-stroke:not(.ovui-button--disabled).ovui-button--checked:focus[data-motion-wave="after"]::after,
.ovui-button--info-light-stroke:not(.ovui-button--disabled).ovui-button--checked:active[data-motion-wave="after"]::after,
.ovui-button--info-light-stroke:not(.ovui-button--disabled).ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--info-light-stroke:not(.ovui-button--disabled).ovui-button--checked:hover[data-motion-wave="before"]::before,
.ovui-button--info-light-stroke:not(.ovui-button--disabled).ovui-button--checked:focus[data-motion-wave="before"]::before,
.ovui-button--info-light-stroke:not(.ovui-button--disabled).ovui-button--checked:active[data-motion-wave="before"]::before {
  color: rgba(101, 29, 255, 0.75);
}
.ovui-button--info-light-stroke.ovui-button--loading,
.ovui-button--info-light-stroke.ovui-button--disabled,
.ovui-button--info-light-stroke.ovui-button--loading:hover,
.ovui-button--info-light-stroke.ovui-button--disabled:hover,
.ovui-button--info-light-stroke.ovui-button--loading:focus,
.ovui-button--info-light-stroke.ovui-button--disabled:focus,
.ovui-button--info-light-stroke.ovui-button--loading:active,
.ovui-button--info-light-stroke.ovui-button--disabled:active {
  color: rgba(101, 29, 255, 0.34);
  background-color: #381088;
  border-color: rgba(101, 29, 255, 0.34);
}
.ovui-button--info-light-stroke.ovui-button--loading[data-motion-wave="after"]::after,
.ovui-button--info-light-stroke.ovui-button--disabled[data-motion-wave="after"]::after,
.ovui-button--info-light-stroke.ovui-button--loading:hover[data-motion-wave="after"]::after,
.ovui-button--info-light-stroke.ovui-button--disabled:hover[data-motion-wave="after"]::after,
.ovui-button--info-light-stroke.ovui-button--loading:focus[data-motion-wave="after"]::after,
.ovui-button--info-light-stroke.ovui-button--disabled:focus[data-motion-wave="after"]::after,
.ovui-button--info-light-stroke.ovui-button--loading:active[data-motion-wave="after"]::after,
.ovui-button--info-light-stroke.ovui-button--disabled:active[data-motion-wave="after"]::after,
.ovui-button--info-light-stroke.ovui-button--loading[data-motion-wave="before"]::before,
.ovui-button--info-light-stroke.ovui-button--disabled[data-motion-wave="before"]::before,
.ovui-button--info-light-stroke.ovui-button--loading:hover[data-motion-wave="before"]::before,
.ovui-button--info-light-stroke.ovui-button--disabled:hover[data-motion-wave="before"]::before,
.ovui-button--info-light-stroke.ovui-button--loading:focus[data-motion-wave="before"]::before,
.ovui-button--info-light-stroke.ovui-button--disabled:focus[data-motion-wave="before"]::before,
.ovui-button--info-light-stroke.ovui-button--loading:active[data-motion-wave="before"]::before,
.ovui-button--info-light-stroke.ovui-button--disabled:active[data-motion-wave="before"]::before {
  color: rgba(101, 29, 255, 0.34);
}
.ovui-button--info-light-stroke.ovui-button--loading.ovui-button--checked,
.ovui-button--info-light-stroke.ovui-button--disabled.ovui-button--checked,
.ovui-button--info-light-stroke.ovui-button--loading:hover.ovui-button--checked,
.ovui-button--info-light-stroke.ovui-button--disabled:hover.ovui-button--checked,
.ovui-button--info-light-stroke.ovui-button--loading:focus.ovui-button--checked,
.ovui-button--info-light-stroke.ovui-button--disabled:focus.ovui-button--checked,
.ovui-button--info-light-stroke.ovui-button--loading:active.ovui-button--checked,
.ovui-button--info-light-stroke.ovui-button--disabled:active.ovui-button--checked {
  color: rgba(101, 29, 255, 0.34);
  background-color: #381088;
  border-color: rgba(101, 29, 255, 0.34);
}
.ovui-button--info-light-stroke.ovui-button--loading.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--info-light-stroke.ovui-button--disabled.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--info-light-stroke.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--info-light-stroke.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--info-light-stroke.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--info-light-stroke.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--info-light-stroke.ovui-button--loading:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--info-light-stroke.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--info-light-stroke.ovui-button--loading.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--info-light-stroke.ovui-button--disabled.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--info-light-stroke.ovui-button--loading:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--info-light-stroke.ovui-button--disabled:hover.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--info-light-stroke.ovui-button--loading:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--info-light-stroke.ovui-button--disabled:focus.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--info-light-stroke.ovui-button--loading:active.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--info-light-stroke.ovui-button--disabled:active.ovui-button--checked[data-motion-wave="before"]::before {
  color: rgba(101, 29, 255, 0.34);
}
.ovui-button--dashed {
  border-style: dashed;
}
.ovui-button--text {
  color: #651dff;
  background-color: transparent;
  border-color: transparent;
}
.ovui-button--text[data-motion-wave="after"]::after,
.ovui-button--text[data-motion-wave="before"]::before {
  color: transparent;
}
.ovui-button--text:hover {
  color: #7433ff;
  background-color: transparent;
  border-color: transparent;
}
.ovui-button--text:hover[data-motion-wave="after"]::after,
.ovui-button--text:hover[data-motion-wave="before"]::before {
  color: transparent;
}
.ovui-button--text.ovui-button--checked,
.ovui-button--text:focus {
  color: #7433ff;
  background-color: transparent;
  border-color: transparent;
  animation: none;
}
.ovui-button--text.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--text:focus[data-motion-wave="after"]::after,
.ovui-button--text.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--text:focus[data-motion-wave="before"]::before {
  color: transparent;
}
.ovui-button--text:active,
.ovui-button--text:active:focus,
.ovui-button--text:active:hover {
  color: rgba(101, 29, 255, 0.75);
  background-color: transparent;
  border-color: transparent;
}
.ovui-button--text:active[data-motion-wave="after"]::after,
.ovui-button--text:active:focus[data-motion-wave="after"]::after,
.ovui-button--text:active:hover[data-motion-wave="after"]::after,
.ovui-button--text:active[data-motion-wave="before"]::before,
.ovui-button--text:active:focus[data-motion-wave="before"]::before,
.ovui-button--text:active:hover[data-motion-wave="before"]::before {
  color: transparent;
}
.ovui-button--text.ovui-button--loading,
.ovui-button--text.ovui-button--disabled,
.ovui-button--text.ovui-button--loading:hover,
.ovui-button--text.ovui-button--disabled:hover,
.ovui-button--text.ovui-button--loading:focus,
.ovui-button--text.ovui-button--disabled:focus {
  color: rgba(101, 29, 255, 0.34);
  background-color: transparent;
  border-color: transparent;
}
.ovui-button--text.ovui-button--loading[data-motion-wave="after"]::after,
.ovui-button--text.ovui-button--disabled[data-motion-wave="after"]::after,
.ovui-button--text.ovui-button--loading:hover[data-motion-wave="after"]::after,
.ovui-button--text.ovui-button--disabled:hover[data-motion-wave="after"]::after,
.ovui-button--text.ovui-button--loading:focus[data-motion-wave="after"]::after,
.ovui-button--text.ovui-button--disabled:focus[data-motion-wave="after"]::after,
.ovui-button--text.ovui-button--loading[data-motion-wave="before"]::before,
.ovui-button--text.ovui-button--disabled[data-motion-wave="before"]::before,
.ovui-button--text.ovui-button--loading:hover[data-motion-wave="before"]::before,
.ovui-button--text.ovui-button--disabled:hover[data-motion-wave="before"]::before,
.ovui-button--text.ovui-button--loading:focus[data-motion-wave="before"]::before,
.ovui-button--text.ovui-button--disabled:focus[data-motion-wave="before"]::before {
  color: transparent;
}
.ovui-button--text.ovui-button--xs,
.ovui-button--text.ovui-button--sm,
.ovui-button--text.ovui-button--md,
.ovui-button--text.ovui-button--lg,
.ovui-button--text.ovui-button--xl {
  padding: 0;
  min-width: auto;
}
.ovui-button--link {
  color: #ffffff;
  background-color: transparent;
  border-color: transparent;
  border: none;
}
.ovui-button--link[data-motion-wave="after"]::after,
.ovui-button--link[data-motion-wave="before"]::before {
  color: transparent;
}
.ovui-button--link:hover {
  color: #d220ff;
  background-color: transparent;
  border-color: transparent;
  text-decoration: underline;
}
.ovui-button--link:hover[data-motion-wave="after"]::after,
.ovui-button--link:hover[data-motion-wave="before"]::before {
  color: transparent;
}
.ovui-button--link.ovui-button--checked,
.ovui-button--link:focus {
  color: #d220ff;
  background-color: transparent;
  border-color: transparent;
  animation: none;
  text-decoration: underline;
}
.ovui-button--link.ovui-button--checked[data-motion-wave="after"]::after,
.ovui-button--link:focus[data-motion-wave="after"]::after,
.ovui-button--link.ovui-button--checked[data-motion-wave="before"]::before,
.ovui-button--link:focus[data-motion-wave="before"]::before {
  color: transparent;
}
.ovui-button--link:active,
.ovui-button--link:active:focus,
.ovui-button--link:active:hover {
  color: #d220ff;
  background-color: transparent;
  border-color: transparent;
  text-decoration: underline;
}
.ovui-button--link:active[data-motion-wave="after"]::after,
.ovui-button--link:active:focus[data-motion-wave="after"]::after,
.ovui-button--link:active:hover[data-motion-wave="after"]::after,
.ovui-button--link:active[data-motion-wave="before"]::before,
.ovui-button--link:active:focus[data-motion-wave="before"]::before,
.ovui-button--link:active:hover[data-motion-wave="before"]::before {
  color: transparent;
}
.ovui-button--link.ovui-button--loading,
.ovui-button--link.ovui-button--disabled,
.ovui-button--link.ovui-button--loading:hover,
.ovui-button--link.ovui-button--disabled:hover,
.ovui-button--link.ovui-button--loading:active,
.ovui-button--link.ovui-button--disabled:active,
.ovui-button--link.ovui-button--loading:focus,
.ovui-button--link.ovui-button--disabled:focus {
  color: rgba(255, 255, 255, 0.2);
  background-color: transparent;
  border-color: transparent;
}
.ovui-button--link.ovui-button--loading[data-motion-wave="after"]::after,
.ovui-button--link.ovui-button--disabled[data-motion-wave="after"]::after,
.ovui-button--link.ovui-button--loading:hover[data-motion-wave="after"]::after,
.ovui-button--link.ovui-button--disabled:hover[data-motion-wave="after"]::after,
.ovui-button--link.ovui-button--loading:active[data-motion-wave="after"]::after,
.ovui-button--link.ovui-button--disabled:active[data-motion-wave="after"]::after,
.ovui-button--link.ovui-button--loading:focus[data-motion-wave="after"]::after,
.ovui-button--link.ovui-button--disabled:focus[data-motion-wave="after"]::after,
.ovui-button--link.ovui-button--loading[data-motion-wave="before"]::before,
.ovui-button--link.ovui-button--disabled[data-motion-wave="before"]::before,
.ovui-button--link.ovui-button--loading:hover[data-motion-wave="before"]::before,
.ovui-button--link.ovui-button--disabled:hover[data-motion-wave="before"]::before,
.ovui-button--link.ovui-button--loading:active[data-motion-wave="before"]::before,
.ovui-button--link.ovui-button--disabled:active[data-motion-wave="before"]::before,
.ovui-button--link.ovui-button--loading:focus[data-motion-wave="before"]::before,
.ovui-button--link.ovui-button--disabled:focus[data-motion-wave="before"]::before {
  color: transparent;
}
.ovui-button--link.ovui-button--xs,
.ovui-button--link.ovui-button--sm,
.ovui-button--link.ovui-button--md,
.ovui-button--link.ovui-button--lg,
.ovui-button--link.ovui-button--xl {
  padding: 0;
  min-width: auto;
}
.ovui-button--xs {
  min-width: 60px;
  padding: 1px 8px;
  font-size: 12px;
  line-height: 20px;
}
.ovui-button--sm {
  min-width: 80px;
  padding: 2px 12px;
  font-size: 12px;
  line-height: 22px;
}
.ovui-button--md {
  min-width: 100px;
  padding: 4px 12px;
  font-size: 14px;
  line-height: 22px;
}
.ovui-button--lg {
  min-width: 120px;
  padding: 7px 16px;
  font-size: 16px;
  line-height: 24px;
}
.ovui-button--xl {
  min-width: 140px;
  padding: 14px 12px;
  font-size: 18px;
  line-height: 24px;
}
.ovui-button--circle.ovui-button--xs,
.ovui-button--square.ovui-button--xs {
  min-width: 24px;
  width: 24px;
  height: 24px;
  padding-left: 0;
  padding-right: 0;
}
.ovui-button--circle.ovui-button--sm,
.ovui-button--square.ovui-button--sm {
  min-width: 28px;
  width: 28px;
  height: 28px;
  padding-left: 0;
  padding-right: 0;
}
.ovui-button--circle.ovui-button--md,
.ovui-button--square.ovui-button--md {
  min-width: 32px;
  width: 32px;
  height: 32px;
  padding-left: 0;
  padding-right: 0;
}
.ovui-button--circle.ovui-button--lg,
.ovui-button--square.ovui-button--lg {
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding-left: 0;
  padding-right: 0;
}
.ovui-button--circle.ovui-button--xl,
.ovui-button--square.ovui-button--xl {
  min-width: 54px;
  width: 54px;
  height: 54px;
  padding-left: 0;
  padding-right: 0;
}
.ovui-button--circle {
  border-radius: 50%;
}
.ovui-button--round.ovui-button--xs {
  border-radius: 24px;
  min-width: 24px;
}
.ovui-button--round.ovui-button--sm {
  border-radius: 28px;
  min-width: 28px;
}
.ovui-button--round.ovui-button--md {
  border-radius: 32px;
  min-width: 32px;
}
.ovui-button--round.ovui-button--lg {
  border-radius: 40px;
  min-width: 40px;
}
.ovui-button--round.ovui-button--xl {
  min-width: 54px;
  border-radius: 54px;
}
.ovui-button--block {
  display: block;
  width: 100%;
}
.ovui-button.ovui-button--disabled,
.ovui-button.ovui-button--disabled:hover,
.ovui-button.ovui-button--disabled:focus {
  animation: none;
  cursor: not-allowed;
}
.ovui-button--loading,
.ovui-button--loading:hover,
.ovui-button--loading:focus {
  animation: none;
}
.ovui-button--loading .ovui-button__loading-icon {
  margin-right: 4px;
}
.ovui-button--active {
  z-index: 3;
}
.ovui-button--rtl {
  direction: rtl;
}
.ovui-button--rtl .ovui-button__loading-icon {
  margin-right: 0;
  margin-left: 4px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* card */
.ovui-card {
  background: #302842;
  border-radius: 8px;
}
.ovui-card__header {
  font-size: 16px;
  padding: 16px 24px;
  color: #ffffff;
  border-radius: 8px 8px 0 0;
  line-height: 24px;
}
.ovui-card__body {
  padding: 16px 24px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 22px;
}
.ovui-card--shadowed {
  box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.08);
}
.ovui-card--bordered {
  border-width: 1px;
  border-style: solid;
  border-color: #dfe0e2;
}
.ovui-card--hover {
  transition: box-shadow 0.3s;
}
.ovui-card--hover:hover {
  box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.08);
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* Input */
/* Tag */
/* tips */
/* Select */
/* CustomInput */
.ovui-cascader-panel {
  display: flex;
  align-self: stretch;
}
.ovui-cascader-panel__main {
  display: flex;
  flex: 1;
  align-self: stretch;
  border-radius: 24px;
  overflow-x: auto;
}
.ovui-cascader-panel__main::-webkit-scrollbar-track-piece {
  background-color: transparent;
}
.ovui-cascader-panel__main::-webkit-scrollbar {
  width: 6px;
  height: 9px;
}
.ovui-cascader-panel__main::-webkit-scrollbar-thumb {
  background-color: #ebebed;
  border-radius: 3px;
  background-clip: padding-box;
  min-height: 28px;
}
.ovui-cascader-panel__main::-webkit-scrollbar-thumb:hover {
  background-color: #dfe0e2;
}
.ovui-cascader-panel__main--border {
  border: 1px solid #dfe0e2;
}
.ovui-cascader-panel__selection-block {
  flex: 1;
  height: 230px;
  display: flex;
  flex-direction: column;
}
.ovui-cascader-panel__selection-block--has-cascader {
  min-width: 200px;
  height: 192px;
}
.ovui-cascader-panel__selection-block:not(:last-of-type) {
  border-right: 1px solid #dfe0e2;
}
.ovui-cascader-panel__selection-header {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 12px;
  border-bottom: 1px solid #dfe0e2;
  background-color: #3c344d;
  font-size: 14px;
  line-height: 22px;
  color: #ffffff;
  font-weight: 600;
}
.ovui-cascader-panel__list-wrapper {
  flex: 1;
  overflow-y: auto;
}
.ovui-cascader-panel__list-wrapper::-webkit-scrollbar-track-piece {
  background-color: transparent;
}
.ovui-cascader-panel__list-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 9px;
}
.ovui-cascader-panel__list-wrapper::-webkit-scrollbar-thumb {
  background-color: #ebebed;
  border-radius: 3px;
  background-clip: padding-box;
  min-height: 28px;
}
.ovui-cascader-panel__list-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: #dfe0e2;
}
.ovui-cascader-panel__placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ovui-cascader-panel__loading {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #651dff;
}
.ovui-cascader-panel__selection-list {
  margin: 0;
  list-style: none;
  padding: 6px 0;
}
.ovui-cascader-panel__selection-list:not(:last-child) {
  padding-bottom: 0;
}
.ovui-cascader-panel__selection-item {
  display: flex;
  align-items: center;
  padding: 0 12px;
}
.ovui-cascader-panel__selection-item:hover {
  background-color: #3c344d;
  cursor: pointer;
}
.ovui-cascader-panel__selection-item .ovui-cascader-panel__item-label {
  flex: 1;
  font-size: 14px;
  line-height: 22px;
  padding: 6px 0;
  color: #ffffff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ovui-cascader-panel__selection-item .ovui-cascader-panel__item-label:not(:first-child) {
  margin-left: 8px;
}
.ovui-cascader-panel__selection-item--active,
.ovui-cascader-panel__selection-item--active .ovui-cascader-panel__item-label,
.ovui-cascader-panel__selection-item--active .ovui-cascader-panel__angle {
  font-weight: bold;
}
.ovui-cascader-panel__selection-item--selected,
.ovui-cascader-panel__selection-item--selected .ovui-cascader-panel__item-label,
.ovui-cascader-panel__selection-item--selected .ovui-cascader-panel__angle {
  color: #651dff;
}
.ovui-cascader-panel__selection-item--disabled,
.ovui-cascader-panel__selection-item--disabled .ovui-cascader-panel__item-label,
.ovui-cascader-panel__selection-item--disabled .ovui-cascader-panel__angle {
  color: #d5d6d9;
  cursor: not-allowed;
}
.ovui-cascader-panel__selection-item--disabled:hover,
.ovui-cascader-panel__selection-item--disabled .ovui-cascader-panel__item-label:hover,
.ovui-cascader-panel__selection-item--disabled .ovui-cascader-panel__angle:hover {
  background-color: none;
}
.ovui-cascader-panel__selection-item--disabled.ovui-cascader-panel__selection-item--selected,
.ovui-cascader-panel__selection-item--disabled.ovui-cascader-panel__selection-item--selected .ovui-cascader-panel__item-label {
  color: rgba(101, 29, 255, 0.34);
}
.ovui-cascader-panel__angle {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.5);
}
.ovui-cascader-panel .ovui-cascader-panel__angle-un-expand {
  color: #d5d6d9;
  cursor: not-allowed;
}
.ovui-cascader-panel__infinite-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  font-size: 12px;
  color: #651dff;
}
.ovui-cascader-panel__infinite-loading-label {
  margin-left: 4px;
}
.ovui-cascader-panel__panel-title {
  position: relative;
}
.ovui-cascader-panel__panel-title-content {
  height: 38px;
  background: #3c344d;
  width: 100%;
  position: absolute;
  margin-bottom: -38px;
  border-radius: 24px 24px 0 0;
  border: 1px solid #dfe0e2;
  border-bottom: none;
}
.ovui-cascader-panel--rtl {
  direction: rtl;
}
.ovui-cascader-panel--rtl .ovui-cascader-panel__selection-block:not(:last-of-type) {
  border-right: none;
  border-left: 1px solid #dfe0e2;
}
.ovui-cascader-panel--rtl .ovui-cascader-panel__item-label:not(:first-child) {
  margin-left: none;
  margin-right: 8px;
}
.ovui-cascader-panel--rtl .ovui-cascader-panel__infinite-loading-label {
  margin-left: none;
  margin-right: 4px;
}
.ovui-cascader-exb {
  display: flex;
  flex-direction: column;
  width: 200px;
  border: 1px solid #dfe0e2;
  border-radius: 24px;
  margin-left: 16px;
  height: 230px;
}
.ovui-cascader-exb__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  padding: 0 12px;
  border-bottom: 1px solid #dfe0e2;
  background-color: #3c344d;
  font-size: 14px;
  color: #ffffff;
  font-weight: 600;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}
.ovui-cascader-exb__list-wrap {
  flex: 1 0;
  overflow: auto;
}
.ovui-cascader-exb__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.ovui-cascader-exb__list {
  list-style: none;
  padding: 8px 12px;
  margin: 0;
}
.ovui-cascader-exb__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 26px;
  background-color: #3c344d;
  border-radius: 8px;
  color: #ffffff;
  font-size: 14px;
  padding: 0 8px;
  overflow: hidden;
}
.ovui-cascader-exb__item-fade-enter-active,
.ovui-cascader-exb__item-fade-leave-active {
  transition: all 0.1s ease-in-out;
}
.ovui-cascader-exb__item-fade-enter-from,
.ovui-cascader-exb__item-fade-leave-to {
  opacity: 0;
  max-height: 0;
}
.ovui-cascader-exb__item-fade-enter-to,
.ovui-cascader-exb__item-fade-leave-from {
  max-height: 26px;
  opacity: 1;
}
.ovui-cascader-exb__item-label {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.ovui-cascader-exb__item .ovui-cascader-exb__close {
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  flex-shrink: 0;
}
.ovui-cascader-exb__item:not(:first-of-type) {
  margin-top: 8px;
}
.ovui-cascader-exb--rtl {
  direction: rtl;
  margin-left: 16px;
  margin-right: 16px;
}
.ovui-cascader-panel-search__filter {
  margin-bottom: 8px;
}
.ovui-cascader-panel-search__filter-icon {
  color: rgba(255, 255, 255, 0.5);
}
.ovui-cascader-panel-search__results {
  max-height: 192px;
  overflow-y: auto;
  padding: 6px 0;
}
.ovui-cascader-panel-search__results::-webkit-scrollbar-track-piece {
  background-color: transparent;
}
.ovui-cascader-panel-search__results::-webkit-scrollbar {
  width: 6px;
  height: 9px;
}
.ovui-cascader-panel-search__results::-webkit-scrollbar-thumb {
  background-color: #ebebed;
  border-radius: 3px;
  background-clip: padding-box;
  min-height: 28px;
}
.ovui-cascader-panel-search__results::-webkit-scrollbar-thumb:hover {
  background-color: #dfe0e2;
}
.ovui-cascader-panel-search__em {
  color: #651dff;
  font-style: normal;
}
.ovui-cascader-panel-search__text {
  overflow: hidden;
  text-overflow: ellipsis;
}
.ovui-cascader-panel-search__loading {
  color: #651dff;
  height: 192px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ovui-cascader-panel-search-option {
  padding: 6px 12px;
  font-size: 14px;
  line-height: 22px;
  color: #ffffff;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  align-items: center;
  cursor: default;
}
.ovui-cascader-panel-search-option .ovui-cascader-panel-search-option__action {
  margin-right: 8px;
}
.ovui-cascader-panel-search-option:hover {
  background-color: #3c344d;
}
.ovui-cascader-panel-search-option--rtl {
  direction: rtl;
}
.ovui-cascader-panel-search-option--rtl .ovui-cascader-search-option__action {
  margin-left: 8px;
  margin-right: 0;
}
.ovui-cascader-search__filter {
  border-bottom: 1px solid #ebebed;
}
.ovui-cascader-search__filter-icon {
  color: rgba(255, 255, 255, 0.5);
}
.ovui-cascader-search__results {
  max-height: 192px;
  overflow-y: auto;
  padding: 6px 0;
}
.ovui-cascader-search__results::-webkit-scrollbar-track-piece {
  background-color: transparent;
}
.ovui-cascader-search__results::-webkit-scrollbar {
  width: 6px;
  height: 9px;
}
.ovui-cascader-search__results::-webkit-scrollbar-thumb {
  background-color: #ebebed;
  border-radius: 3px;
  background-clip: padding-box;
  min-height: 28px;
}
.ovui-cascader-search__results::-webkit-scrollbar-thumb:hover {
  background-color: #dfe0e2;
}
.ovui-cascader-search__em {
  color: #651dff;
  font-style: normal;
}
.ovui-cascader-search__text {
  overflow: hidden;
  text-overflow: ellipsis;
}
.ovui-cascader-search__loading {
  color: #651dff;
  height: 192px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ovui-cascader-search-option {
  padding: 6px 12px;
  font-size: 14px;
  line-height: 22px;
  color: #ffffff;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  align-items: center;
  cursor: default;
}
.ovui-cascader-search-option .ovui-cascader-search-option__action {
  margin-right: 8px;
}
.ovui-cascader-search-option:hover {
  background-color: #3c344d;
}
.ovui-cascader-search-option--rtl {
  direction: rtl;
}
.ovui-cascader-search-option--rtl .ovui-cascader-search-option__action {
  margin-left: 8px;
  margin-right: 0;
}
.ovui-cascader {
  display: inline-flex;
  width: 100%;
  position: relative;
  vertical-align: bottom;
}
.ovui-cascader__tips {
  text-align: center;
  -moz-user-select: none;
       user-select: none;
  border: 1px solid transparent;
  font-size: 14px;
  line-height: 22px;
  min-width: 26px;
  border-radius: 13px;
  padding: 1px 8px;
  margin-right: 4px;
}
.ovui-cascader__arrow {
  color: rgba(255, 255, 255, 0.5);
}
.ovui-cascader__arrow--open {
  transform: rotate(180deg);
}
.ovui-cascader__input:not(.ovui-input__wrapper--disabled) {
  cursor: pointer;
}
.ovui-cascader__tag-content {
  max-width: calc(100% - 14px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ovui-cascader__empty {
  height: 192px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ovui-cascader--stroke .ovui-cascader__tips {
  background-color: #f4f4f5;
  color: #ffffff;
}
.ovui-cascader--stroke.ovui-cascader--disabled .ovui-cascader__tips {
  background-color: rgba(255, 255, 255, 0.50196078);
  color: #d5d6d9;
  border-color: #f4f4f5;
}
.ovui-cascader--fill .ovui-cascader__tips {
  background-color: #302842;
  color: #ffffff;
  border-color: #302842;
}
.ovui-cascader--fill.ovui-cascader--disabled .ovui-cascader__tips {
  background-color: #534c61;
  color: #bfc1c5;
  border-color: #534c61;
}
.ovui-cascader--text {
  color: #ffffff;
  width: auto;
  cursor: pointer;
}
.ovui-cascader--text:hover,
.ovui-cascader--text .ovui-cascader__text-wrapper--active {
  color: #651dff;
}
.ovui-cascader--text:hover:active,
.ovui-cascader--text .ovui-cascader__text-wrapper--active:active {
  color: rgba(101, 29, 255, 0.75);
}
.ovui-cascader--text .ovui-cascader__text-wrapper {
  display: inline-flex;
  align-self: stretch;
  align-items: center;
}
.ovui-cascader--text .ovui-cascader__arrow {
  margin-right: 0;
}
.ovui-cascader--text.ovui-cascader--disabled,
.ovui-cascader--text.ovui-cascader--disabled:hover {
  color: #d5d6d9;
  cursor: not-allowed;
}
.ovui-cascader--xs {
  font-size: 12px;
  line-height: 20px;
}
.ovui-cascader--xs .ovui-cascader__tips {
  font-size: 12px;
  line-height: 20px;
  min-width: 22px;
  border-radius: 11px;
  padding: 0px 8px;
}
.ovui-cascader--sm {
  font-size: 12px;
  line-height: 20px;
}
.ovui-cascader--sm .ovui-cascader__tips {
  font-size: 12px;
  line-height: 20px;
  min-width: 22px;
  border-radius: 11px;
  padding: 0px 8px;
}
.ovui-cascader--md {
  font-size: 14px;
  line-height: 22px;
}
.ovui-cascader--lg {
  font-size: 14px;
  line-height: 22px;
}
.ovui-cascader--xl {
  font-size: 16px;
  line-height: 24px;
}
.ovui-cascader--disabled .ovui-cascader__tips {
  background-color: rgba(255, 255, 255, 0.50196078);
  color: #d5d6d9;
  border-color: #f4f4f5;
}
.ovui-cascader--disabled .ovui-cascader__arrow {
  color: #d5d6d9;
}
.ovui-cascader__multiple .ovui-custom-input {
  padding: 3px 8px;
  color: #323335;
}
.ovui-cascader__multiple .ovui-custom-input__content {
  padding-right: 24px;
  overflow-y: auto;
}
.ovui-cascader__multiple .ovui-custom-input__after {
  position: absolute;
  right: 8px;
}
.ovui-cascader__popper {
  box-shadow: 0px 3px 9px 0 rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  display: none;
  background-color: #302842;
}
.ovui-cascader__popper--show {
  display: block;
}
.ovui-cascader__popper-header {
  border-bottom: 1px solid #ebebed;
  padding: 6px 12px;
  color: #ffffff;
  font-size: 14px;
  line-height: 22px;
}
.ovui-cascader__popper-footer {
  border-top: 1px solid #ebebed;
  padding: 6px 12px;
  color: #ffffff;
  font-size: 14px;
  line-height: 22px;
}
.ovui-cascader--rtl {
  direction: rtl;
}
.ovui-cascader--rtl .ovui-cascader__tips {
  margin-right: 0;
  margin-left: 4px;
}
.ovui-cascader__popper--rtl {
  direction: rtl;
}
.ovui-cascader-fade-enter-active,
.ovui-cascader-fade-leave-active {
  transition: opacity 0.1s ease-in-out;
}
.ovui-cascader-fade-enter-from,
.ovui-cascader-fade-leave-to {
  opacity: 0;
}
.ovui-cascader-fade-enter-to,
.ovui-cascader-fade-leave-from {
  opacity: 1;
}
.ovui-cascader-panel-search {
  display: inline-flex;
  width: 100%;
  position: relative;
  vertical-align: bottom;
}
.ovui-cascader-panel-search__tips {
  text-align: center;
  -moz-user-select: none;
       user-select: none;
  border: 1px solid transparent;
  font-size: 14px;
  line-height: 22px;
  min-width: 26px;
  border-radius: 13px;
  padding: 1px 8px;
  margin-right: 4px;
}
.ovui-cascader-panel-search__arrow {
  color: rgba(255, 255, 255, 0.5);
}
.ovui-cascader-panel-search__arrow--open {
  transform: rotate(180deg);
}
.ovui-cascader-panel-search__input:not(.ovui-input__wrapper--disabled) {
  cursor: pointer;
}
.ovui-cascader-panel-search__tag-content {
  max-width: calc(100% - 14px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ovui-cascader-panel-search__empty {
  height: 192px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ovui-cascader-panel-search--stroke .ovui-cascader-panel-search__tips {
  background-color: #f4f4f5;
  color: #ffffff;
}
.ovui-cascader-panel-search--stroke.ovui-cascader-panel-search--disabled .ovui-cascader-panel-search__tips {
  background-color: rgba(255, 255, 255, 0.50196078);
  color: #d5d6d9;
  border-color: #f4f4f5;
}
.ovui-cascader-panel-search--fill .ovui-cascader-panel-search__tips {
  background-color: #302842;
  color: #ffffff;
  border-color: #302842;
}
.ovui-cascader-panel-search--fill.ovui-cascader-panel-search--disabled .ovui-cascader-panel-search__tips {
  background-color: #534c61;
  color: #bfc1c5;
  border-color: #534c61;
}
.ovui-cascader-panel-search--text {
  color: #ffffff;
  width: auto;
  cursor: pointer;
}
.ovui-cascader-panel-search--text:hover,
.ovui-cascader-panel-search--text .ovui-cascader-panel-search__text-wrapper--active {
  color: #651dff;
}
.ovui-cascader-panel-search--text:hover:active,
.ovui-cascader-panel-search--text .ovui-cascader-panel-search__text-wrapper--active:active {
  color: rgba(101, 29, 255, 0.75);
}
.ovui-cascader-panel-search--text .ovui-cascader-panel-search__text-wrapper {
  display: inline-flex;
  align-self: stretch;
  align-items: center;
}
.ovui-cascader-panel-search--text .ovui-cascader-panel-search__arrow {
  margin-right: 0;
}
.ovui-cascader-panel-search--text.ovui-cascader-panel-search--disabled,
.ovui-cascader-panel-search--text.ovui-cascader-panel-search--disabled:hover {
  color: #d5d6d9;
  cursor: not-allowed;
}
.ovui-cascader-panel-search--xs {
  font-size: 12px;
  line-height: 20px;
}
.ovui-cascader-panel-search--xs .ovui-cascader-panel-search__tips {
  font-size: 12px;
  line-height: 20px;
  min-width: 22px;
  border-radius: 11px;
  padding: 0px 8px;
}
.ovui-cascader-panel-search--sm {
  font-size: 12px;
  line-height: 20px;
}
.ovui-cascader-panel-search--sm .ovui-cascader-panel-search__tips {
  font-size: 12px;
  line-height: 20px;
  min-width: 22px;
  border-radius: 11px;
  padding: 0px 8px;
}
.ovui-cascader-panel-search--md {
  font-size: 14px;
  line-height: 22px;
}
.ovui-cascader-panel-search--lg {
  font-size: 14px;
  line-height: 22px;
}
.ovui-cascader-panel-search--xl {
  font-size: 16px;
  line-height: 24px;
}
.ovui-cascader-panel-search--disabled .ovui-cascader-panel-search__tips {
  background-color: rgba(255, 255, 255, 0.50196078);
  color: #d5d6d9;
  border-color: #f4f4f5;
}
.ovui-cascader-panel-search--disabled .ovui-cascader-panel-search__arrow {
  color: #d5d6d9;
}
.ovui-cascader-panel-search__multiple .ovui-custom-input {
  padding: 3px 8px;
  color: #323335;
}
.ovui-cascader-panel-search__multiple .ovui-custom-input__content {
  padding-right: 24px;
  overflow-y: auto;
}
.ovui-cascader-panel-search__multiple .ovui-custom-input__after {
  position: absolute;
  right: 8px;
}
.ovui-cascader-panel-search__popper {
  box-shadow: 0px 3px 9px 0 rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  display: none;
  background-color: #302842;
}
.ovui-cascader-panel-search__popper--show {
  display: block;
}
.ovui-cascader-panel-search__popper-header {
  border-bottom: 1px solid #ebebed;
  padding: 6px 12px;
  color: #ffffff;
  font-size: 14px;
  line-height: 22px;
}
.ovui-cascader-panel-search__popper-footer {
  border-top: 1px solid #ebebed;
  padding: 6px 12px;
  color: #ffffff;
  font-size: 14px;
  line-height: 22px;
}
.ovui-cascader-panel-search--rtl {
  direction: rtl;
}
.ovui-cascader-panel-search--rtl .ovui-cascader-panel-search__tips {
  margin-right: 0;
  margin-left: 4px;
}
.ovui-cascader-panel-search__popper--rtl {
  direction: rtl;
}
.ovui-cascader-panel-search-fade-enter-active,
.ovui-cascader-panel-search-fade-leave-active {
  transition: opacity 0.1s ease-in-out;
}
.ovui-cascader-panel-search-fade-enter-from,
.ovui-cascader-panel-search-fade-leave-to {
  opacity: 0;
}
.ovui-cascader-panel-search-fade-enter-to,
.ovui-cascader-panel-search-fade-leave-from {
  opacity: 1;
}
.ovui-cascader__popper-wrapper {
  display: none;
}
.ovui-cascader__popper-wrapper--show {
  display: block;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* Input */
.ovui-option {
  display: flex;
  align-self: stretch;
  color: #ffffff;
  cursor: pointer;
}
.ovui-option__action {
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
}
.ovui-option__content {
  flex: 1;
  align-items: center;
}
.ovui-option__content--ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ovui-option__expand {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
}
.ovui-option__expand--icon {
  color: #ffffff;
}
.ovui-option.ovui-option--grouped {
  padding-left: 24px;
  padding-right: 24px;
}
.ovui-option--single.ovui-option--selected {
  color: rgba(255, 255, 255, 0.75);
}
.ovui-option.ovui-option--disabled {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.25);
}
.ovui-option.ovui-option--disabled .ovui-option__expand--icon {
  color: rgba(255, 255, 255, 0.25);
}
.ovui-option.ovui-option--disabled.ovui-option--single.ovui-option--selected {
  color: rgba(255, 255, 255, 0.25);
}
.ovui-option:hover:not(.ovui-option--disabled) {
  background-color: #3c344d;
}
.ovui-option--xs {
  line-height: 20px;
  font-size: 12px;
  padding: 3px 12px;
}
.ovui-option--sm {
  line-height: 20px;
  font-size: 12px;
  padding: 5px 12px;
}
.ovui-option--md {
  line-height: 22px;
  font-size: 14px;
  padding: 6px 12px;
}
.ovui-option--lg {
  line-height: 24px;
  font-size: 16px;
  padding: 7px 12px;
}
.ovui-option--xl {
  line-height: 26px;
  font-size: 18px;
  padding: 8px 12px;
}
.ovui-option--rtl {
  direction: rtl;
}
.ovui-option--rtl .ovui-option__action {
  margin-right: 0;
  margin-left: 8px;
}
.ovui-option--rtl .ovui-option__expand {
  margin-left: 0;
  margin-right: 8px;
}
.ovui-optgroup {
  display: none;
}
.ovui-optgroup__label {
  color: rgba(255, 255, 255, 0.5);
  cursor: default;
}
.ovui-optgroup__label--disabled {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.25);
}
.ovui-optgroup--visible {
  display: block;
}
.ovui-optgroup--xs {
  font-size: 12px;
  line-height: 20px;
}
.ovui-optgroup--xs .ovui-optgroup__label {
  padding: 3px 12px;
}
.ovui-optgroup--sm {
  font-size: 12px;
  line-height: 20px;
}
.ovui-optgroup--sm .ovui-optgroup__label {
  padding: 5px 12px;
}
.ovui-optgroup--md {
  font-size: 14px;
  line-height: 22px;
}
.ovui-optgroup--md .ovui-optgroup__label {
  padding: 6px 12px;
}
.ovui-optgroup--lg {
  font-size: 14px;
  line-height: 22px;
}
.ovui-optgroup--lg .ovui-optgroup__label {
  padding: 7px 12px;
}
.ovui-optgroup--xl {
  font-size: 16px;
  line-height: 24px;
}
.ovui-optgroup--xl .ovui-optgroup__label {
  padding: 8px 12px;
}
.ovui-custom-input {
  position: relative;
  width: 100%;
  outline: none;
  padding: 0 8px;
  border-radius: 24px;
  display: inline-flex;
  cursor: pointer;
}
.ovui-custom-input::-webkit-scrollbar-track-piece {
  background-color: transparent;
}
.ovui-custom-input::-webkit-scrollbar {
  width: 6px;
  height: 9px;
}
.ovui-custom-input::-webkit-scrollbar-thumb {
  background-color: #ebebed;
  border-radius: 3px;
  background-clip: padding-box;
  min-height: 28px;
}
.ovui-custom-input::-webkit-scrollbar-thumb:hover {
  background-color: #dfe0e2;
}
.ovui-custom-input__content {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  word-break: break-all;
  align-items: center;
  gap: 4px;
}
.ovui-custom-input__prefix {
  display: flex;
  align-items: center;
  margin-right: 4px;
}
.ovui-custom-input__suffix,
.ovui-custom-input__after {
  position: sticky;
  top: 0;
  display: inline-flex;
  color: #ffffff;
  padding-left: 4px;
  align-items: center;
}
.ovui-custom-input__search {
  max-width: 100%;
  width: 100%;
  min-width: 4px;
  flex: 1;
}
.ovui-custom-input__after--has-clear .ovui-icon {
  opacity: 0;
}
.ovui-custom-input__after--has-clear .ovui-custom-input__clear {
  opacity: 1;
}
.ovui-custom-input__clear {
  visibility: hidden;
  color: rgba(255, 255, 255, 0.5);
  z-index: 3;
  cursor: pointer;
  transition: opacity 0.1s ease-in;
}
.ovui-custom-input__clear--absolute {
  position: absolute;
  display: none;
  right: 0;
}
.ovui-custom-input__clear--margin-right {
  margin-right: 12px;
}
.ovui-custom-input__clear--show {
  visibility: visible;
  display: block;
}
.ovui-custom-input__clear:hover {
  color: rgba(255, 255, 255, 0.75);
}
.ovui-custom-input__clear:active {
  color: #ffffff;
}
.ovui-custom-input--collapsible {
  overflow-y: hidden;
}
.ovui-custom-input--open {
  z-index: 3;
  border-radius: 24px;
  background-color: #3c344d;
  position: absolute;
  overflow-y: auto;
}
.ovui-custom-input--expand {
  position: relative;
}
.ovui-custom-input--stroke {
  border: 1px solid #dfe0e2;
  background-color: #3c344d;
}
.ovui-custom-input--stroke:hover {
  border-color: #d220ff;
}
.ovui-custom-input--stroke.ovui-custom-input--focused,
.ovui-custom-input--stroke.ovui-custom-input--focused:hover {
  border-color: #651dff;
  box-shadow: 0 0 0 2px rgba(101, 29, 255, 0.2);
}
.ovui-custom-input--stroke.ovui-custom-input--focused.ovui-custom-input--error,
.ovui-custom-input--stroke.ovui-custom-input--focused.ovui-custom-input--error:hover {
  border-color: #ff0060;
  box-shadow: 0 0 0 2px rgba(255, 0, 96, 0.2);
}
.ovui-custom-input--stroke.ovui-custom-input--error,
.ovui-custom-input--stroke.ovui-custom-input--error:hover {
  border-color: #ff0060;
}
.ovui-custom-input--stroke.ovui-custom-input--disabled,
.ovui-custom-input--stroke.ovui-custom-input--disabled.ovui-custom-input--error,
.ovui-custom-input--stroke.ovui-custom-input--disabled.ovui-custom-input--focused,
.ovui-custom-input--stroke.ovui-custom-input--disabled:hover,
.ovui-custom-input--stroke.ovui-custom-input--disabled.ovui-custom-input--error:hover,
.ovui-custom-input--stroke.ovui-custom-input--disabled.ovui-custom-input--focused:hover {
  background-color: #3c344d;
  border-color: rgba(210, 32, 255, 0.34117647);
  color: rgba(255, 255, 255, 0.25);
}
.ovui-custom-input--fill {
  border: 1px solid #3c344d;
  background-color: #3c344d;
}
.ovui-custom-input--fill:hover {
  border-color: #d220ff;
  background-color: #3c344d;
}
.ovui-custom-input--fill.ovui-custom-input--error {
  border-color: transparent;
  background-color: rgba(255, 0, 96, 0.06);
}
.ovui-custom-input--fill.ovui-custom-input--error:hover {
  border-color: transparent;
  background-color: rgba(255, 0, 96, 0.06);
}
.ovui-custom-input--fill.ovui-custom-input--focused,
.ovui-custom-input--fill.ovui-custom-input--focused:hover {
  border-color: #651dff;
  background-color: #1a112e;
  box-shadow: 0 0 0 2px rgba(101, 29, 255, 0.2);
}
.ovui-custom-input--fill.ovui-custom-input--focused.ovui-custom-input--error,
.ovui-custom-input--fill.ovui-custom-input--focused.ovui-custom-input--error:hover {
  border-color: #ff0060;
  background-color: rgba(255, 0, 96, 0.06);
  box-shadow: 0 0 0 2px rgba(255, 0, 96, 0.2);
}
.ovui-custom-input--fill.ovui-custom-input--disabled,
.ovui-custom-input--fill.ovui-custom-input--disabled.ovui-custom-input--error,
.ovui-custom-input--fill.ovui-custom-input--disabled.ovui-custom-input--focused,
.ovui-custom-input--fill.ovui-custom-input--disabled:hover,
.ovui-custom-input--fill.ovui-custom-input--disabled.ovui-custom-input--error:hover,
.ovui-custom-input--fill.ovui-custom-input--disabled.ovui-custom-input--focused:hover {
  background-color: #302842;
  border-color: #3c344d;
  color: rgba(255, 255, 255, 0.25);
}
.ovui-custom-input--unstyle {
  padding: 0;
  border: none;
  background-color: transparent;
  color: #ffffff;
}
.ovui-custom-input--noborder {
  background-color: #302842;
  color: #ffffff;
  border: 1px solid #302842;
}
.ovui-custom-input--disabled,
.ovui-custom-input--disabled:hover {
  box-shadow: none;
  cursor: not-allowed;
  animation: none;
}
.ovui-custom-input--disabled .ovui-custom-input__suffix,
.ovui-custom-input--disabled .ovui-custom-input__after {
  color: #d5d6d9;
}
.ovui-custom-input--xs {
  font-size: 12px;
  line-height: 20px;
  min-height: 24px;
}
.ovui-custom-input--xs .ovui-custom-input__content {
  gap: 3px 4px;
}
.ovui-custom-input--xs .ovui-custom-input__search {
  margin: 2px 4px 2px 0;
}
.ovui-custom-input--xs .ovui-custom-input__suffix {
  height: 22px;
}
.ovui-custom-input--xs .ovui-custom-input__suffix--center {
  top: calc(50% - (24px - 2px) / 2);
}
.ovui-custom-input--xs.ovui-custom-input--collapsible {
  max-height: 24px;
}
.ovui-custom-input--xs.ovui-custom-input--open {
  max-height: 86px;
}
.ovui-custom-input--sm {
  font-size: 12px;
  line-height: 20px;
  min-height: 28px;
}
.ovui-custom-input--sm .ovui-custom-input__search {
  margin: 4px 4px 4px 0;
}
.ovui-custom-input--sm .ovui-custom-input__suffix .ovui-custom-input__after {
  height: 26px;
}
.ovui-custom-input--sm .ovui-custom-input__suffix .ovui-custom-input__after--center {
  top: calc(50% - (28px - 2px) / 2);
}
.ovui-custom-input--sm.ovui-custom-input--collapsible {
  max-height: 28px;
}
.ovui-custom-input--sm.ovui-custom-input--open {
  max-height: 93px;
}
.ovui-custom-input--md {
  font-size: 14px;
  line-height: 22px;
  min-height: 32px;
}
.ovui-custom-input--md .ovui-custom-input__search {
  margin: 5px 4px 5px 0;
}
.ovui-custom-input--md .ovui-custom-input__suffix,
.ovui-custom-input--md .ovui-custom-input__after {
  height: 30px;
}
.ovui-custom-input--md .ovui-custom-input__suffix--center,
.ovui-custom-input--md .ovui-custom-input__after--center {
  top: calc(50% - (32px - 2px) / 2);
}
.ovui-custom-input--md.ovui-custom-input--collapsible {
  max-height: 32px;
}
.ovui-custom-input--md.ovui-custom-input--open {
  max-height: 107px;
}
.ovui-custom-input--lg {
  font-size: 14px;
  line-height: 22px;
  min-height: 40px;
}
.ovui-custom-input--lg .ovui-custom-input__search {
  margin: 6px 4px 6px 0;
}
.ovui-custom-input--lg .ovui-custom-input,
.ovui-custom-input--lg .ovui-custom-input__after {
  height: 38px;
}
.ovui-custom-input--lg .ovui-custom-input--center,
.ovui-custom-input--lg .ovui-custom-input__after--center {
  top: calc(50% - (40px - 2px) / 2);
}
.ovui-custom-input--lg.ovui-custom-input--collapsible {
  max-height: 40px;
}
.ovui-custom-input--lg.ovui-custom-input--open {
  max-height: 121px;
}
.ovui-custom-input--xl {
  font-size: 16px;
  line-height: 24px;
  min-height: 54px;
}
.ovui-custom-input--xl .ovui-custom-input__search {
  margin: 8px 4px 8px 0;
}
.ovui-custom-input--xl .ovui-custom-input__suffix,
.ovui-custom-input--xl .ovui-custom-input__after {
  height: 52px;
}
.ovui-custom-input--xl .ovui-custom-input__suffix--center,
.ovui-custom-input--xl .ovui-custom-input__after--center {
  top: calc(50% - (54px - 2px) / 2);
}
.ovui-custom-input--xl.ovui-custom-input--collapsible {
  max-height: 54px;
}
.ovui-custom-input--xl.ovui-custom-input--open {
  max-height: 135px;
}
.ovui-custom-input__wrapper {
  width: 100%;
  position: relative;
}
.ovui-custom-input__wrapper--xs {
  height: 24px;
}
.ovui-custom-input__wrapper--sm {
  height: 28px;
}
.ovui-custom-input__wrapper--md {
  height: 32px;
}
.ovui-custom-input__wrapper--lg {
  height: 40px;
}
.ovui-custom-input__wrapper--xl {
  height: 54px;
}
.ovui-custom-input__wrapper--expand {
  height: unset;
}
.ovui-custom-input--rtl {
  direction: rtl;
}
.ovui-custom-input--rtl .ovui-custom-input__clear--absolute {
  right: auto;
  left: 0;
}
.ovui-custom-input--rtl .ovui-custom-input__clear--margin-right {
  margin-right: 0;
  margin-left: 12px;
}
.ovui-custom-input--rtl .ovui-custom-input__prefix {
  margin-left: 4px;
  margin-right: 0;
}
.ovui-custom-input--rtl .ovui-custom-input__suffix,
.ovui-custom-input--rtl .ovui-custom-input__after {
  padding-right: 4px;
  padding-left: 0;
}
.ovui-custom-input--rtl.ovui-custom-input--xs .ovui-custom-input__search {
  margin-left: 4px;
  margin-right: 0;
}
.ovui-custom-input--rtl.ovui-custom-input--sm .ovui-custom-input__search {
  margin-left: 4px;
  margin-right: 0;
}
.ovui-custom-input--rtl.ovui-custom-input--md .ovui-custom-input__search {
  margin-left: 4px;
  margin-right: 0;
}
.ovui-custom-input--rtl.ovui-custom-input--lg .ovui-custom-input__search {
  margin-left: 4px;
  margin-right: 0;
}
.ovui-custom-input--rtl.ovui-custom-input--xl .ovui-custom-input__search {
  margin-left: 4px;
  margin-right: 0;
}
/* 滚动条样式 */
/* Tag */
/* tips */
/* Select */
/* CustomInput */
.ovui-select {
  display: inline-flex;
  width: 100%;
  position: relative;
  vertical-align: bottom;
}
.ovui-select__tips {
  text-align: center;
  -moz-user-select: none;
       user-select: none;
  border: 1px solid transparent;
  font-size: 14px;
  line-height: 22px;
  min-width: 26px;
  border-radius: 13px;
  padding: 1px 8px;
  margin-right: 4px;
}
.ovui-select__arrow {
  color: rgba(255, 255, 255, 0.5);
}
.ovui-select__arrow--open {
  transform: rotate(180deg);
}
.ovui-select__input:not(.ovui-input__wrapper--disabled) {
  cursor: pointer;
}
.ovui-select__tag-content {
  max-width: calc(100% - 14px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ovui-select__empty {
  height: 192px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ovui-select--stroke .ovui-select__tips {
  background-color: #f4f4f5;
  color: #ffffff;
}
.ovui-select--stroke.ovui-select--disabled .ovui-select__tips {
  background-color: rgba(255, 255, 255, 0.50196078);
  color: #d5d6d9;
  border-color: #f4f4f5;
}
.ovui-select--fill .ovui-select__tips {
  background-color: #302842;
  color: #ffffff;
  border-color: #302842;
}
.ovui-select--fill.ovui-select--disabled .ovui-select__tips {
  background-color: #534c61;
  color: #bfc1c5;
  border-color: #534c61;
}
.ovui-select--text {
  color: #ffffff;
  width: auto;
  cursor: pointer;
}
.ovui-select--text:hover,
.ovui-select--text .ovui-select__text-wrapper--active {
  color: #651dff;
}
.ovui-select--text:hover:active,
.ovui-select--text .ovui-select__text-wrapper--active:active {
  color: rgba(101, 29, 255, 0.75);
}
.ovui-select--text .ovui-select__text-wrapper {
  display: inline-flex;
  align-self: stretch;
  align-items: center;
}
.ovui-select--text .ovui-select__arrow {
  margin-right: 0;
}
.ovui-select--text.ovui-select--disabled,
.ovui-select--text.ovui-select--disabled:hover {
  color: #d5d6d9;
  cursor: not-allowed;
}
.ovui-select--xs {
  font-size: 12px;
  line-height: 20px;
}
.ovui-select--xs .ovui-select__tips {
  font-size: 12px;
  line-height: 20px;
  min-width: 22px;
  border-radius: 11px;
  padding: 0px 8px;
}
.ovui-select--sm {
  font-size: 12px;
  line-height: 20px;
}
.ovui-select--sm .ovui-select__tips {
  font-size: 12px;
  line-height: 20px;
  min-width: 22px;
  border-radius: 11px;
  padding: 0px 8px;
}
.ovui-select--md {
  font-size: 14px;
  line-height: 22px;
}
.ovui-select--lg {
  font-size: 14px;
  line-height: 22px;
}
.ovui-select--xl {
  font-size: 16px;
  line-height: 24px;
}
.ovui-select--disabled .ovui-select__tips {
  background-color: rgba(255, 255, 255, 0.50196078);
  color: #d5d6d9;
  border-color: #f4f4f5;
}
.ovui-select--disabled .ovui-select__arrow {
  color: #d5d6d9;
}
.ovui-select__multiple .ovui-custom-input {
  padding: 3px 8px;
  color: #323335;
}
.ovui-select__multiple .ovui-custom-input__content {
  padding-right: 24px;
  overflow-y: auto;
}
.ovui-select__multiple .ovui-custom-input__after {
  position: absolute;
  right: 8px;
}
.ovui-select__popper {
  box-shadow: 0px 3px 9px 0 rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  display: none;
  background-color: #302842;
}
.ovui-select__popper--show {
  display: block;
}
.ovui-select__popper-header {
  border-bottom: 1px solid #ebebed;
  padding: 6px 12px;
  color: #ffffff;
  font-size: 14px;
  line-height: 22px;
}
.ovui-select__popper-footer {
  border-top: 1px solid #ebebed;
  padding: 6px 12px;
  color: #ffffff;
  font-size: 14px;
  line-height: 22px;
}
.ovui-select--rtl {
  direction: rtl;
}
.ovui-select--rtl .ovui-select__tips {
  margin-right: 0;
  margin-left: 4px;
}
.ovui-select__popper--rtl {
  direction: rtl;
}
.ovui-select-fade-enter-active,
.ovui-select-fade-leave-active {
  transition: opacity 0.1s ease-in-out;
}
.ovui-select-fade-enter-from,
.ovui-select-fade-leave-to {
  opacity: 0;
}
.ovui-select-fade-enter-to,
.ovui-select-fade-leave-from {
  opacity: 1;
}
.ovui-select__filter {
  border-bottom: 1px solid #ebebed;
}
.ovui-select__filter-icon {
  color: rgba(255, 255, 255, 0.25);
}
.ovui-select__options {
  max-height: 192px;
  overflow-y: auto;
  padding: 6px 0;
}
.ovui-select__options::-webkit-scrollbar-track-piece {
  background-color: transparent;
}
.ovui-select__options::-webkit-scrollbar {
  width: 6px;
  height: 9px;
}
.ovui-select__options::-webkit-scrollbar-thumb {
  background-color: #ebebed;
  border-radius: 3px;
  background-clip: padding-box;
  min-height: 28px;
}
.ovui-select__options::-webkit-scrollbar-thumb:hover {
  background-color: #dfe0e2;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* Tag */
.ovui-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  position: relative;
  background-clip: padding-box;
  white-space: nowrap;
  cursor: pointer;
}
.ovui-tag__close {
  display: inline-flex;
  margin-left: 4px;
}
.ovui-tag--default-stroke {
  background-color: transparent;
  color: #ffffff;
  border-color: #dfe0e2;
}
.ovui-tag--default-stroke:hover {
  background-color: transparent;
  color: #ffffff;
  border-color: #dfe0e2;
}
.ovui-tag--default-stroke.ovui-tag--disabled,
.ovui-tag--default-stroke.ovui-tag--disabled:hover {
  background-color: #302842;
  color: rgba(255, 255, 255, 0.25);
  border-color: #f4f4f5;
}
.ovui-tag--default-fill {
  background-color: #261d38;
  color: #ffffff;
  border-color: transparent;
}
.ovui-tag--default-fill:hover {
  background-color: #302842;
  color: #ffffff;
  border-color: transparent;
}
.ovui-tag--default-fill.ovui-tag--disabled,
.ovui-tag--default-fill.ovui-tag--disabled:hover {
  background-color: #302842;
  color: rgba(255, 255, 255, 0.5);
  border-color: #f4f4f5;
}
.ovui-tag--default-light-fill {
  background-color: #261d38;
  color: rgba(255, 255, 255, 0.75);
  border-color: transparent;
}
.ovui-tag--default-light-fill:hover {
  background-color: #261d38;
  color: rgba(255, 255, 255, 0.75);
  border-color: transparent;
}
.ovui-tag--default-light-fill.ovui-tag--disabled,
.ovui-tag--default-light-fill.ovui-tag--disabled:hover {
  background-color: #302842;
  color: rgba(255, 255, 255, 0.25);
  border-color: #f4f4f5;
}
.ovui-tag--default-light-stroke {
  background-color: #261d38;
  color: #ffffff;
  border-color: #dfe0e2;
}
.ovui-tag--default-light-stroke:hover {
  background-color: #261d38;
  color: #ffffff;
  border-color: #dfe0e2;
}
.ovui-tag--default-light-stroke.ovui-tag--disabled,
.ovui-tag--default-light-stroke.ovui-tag--disabled:hover {
  background-color: #302842;
  color: rgba(255, 255, 255, 0.25);
  border-color: #dfe0e2;
}
.ovui-tag--info-fill {
  background-color: #651dff;
  color: #ffffff;
  border-color: transparent;
}
.ovui-tag--info-fill:hover {
  background-color: #651dff;
  color: #ffffff;
  border-color: transparent;
}
.ovui-tag--info-fill.ovui-tag--disabled,
.ovui-tag--info-fill.ovui-tag--disabled:hover {
  background-color: rgba(101, 29, 255, 0.34);
  color: rgba(255, 255, 255, 0.5);
  border-color: transparent;
}
.ovui-tag--info-stroke {
  background-color: rgba(0, 0, 0, 0);
  color: #651dff;
  border-color: #651dff;
}
.ovui-tag--info-stroke:hover {
  background-color: rgba(0, 0, 0, 0);
  color: #651dff;
  border-color: #651dff;
}
.ovui-tag--info-stroke.ovui-tag--disabled,
.ovui-tag--info-stroke.ovui-tag--disabled:hover {
  background-color: #381088;
  color: rgba(101, 29, 255, 0.34);
  border-color: rgba(101, 29, 255, 0.34);
}
.ovui-tag--info-light-fill {
  background-color: #381088;
  color: #651dff;
  border-color: transparent;
}
.ovui-tag--info-light-fill:hover {
  background-color: #381088;
  color: #651dff;
  border-color: transparent;
}
.ovui-tag--info-light-fill.ovui-tag--disabled,
.ovui-tag--info-light-fill.ovui-tag--disabled:hover {
  background-color: #381088;
  color: rgba(101, 29, 255, 0.34);
  border-color: transparent;
}
.ovui-tag--info-light-stroke {
  background-color: #381088;
  color: #651dff;
  border-color: #651dff;
}
.ovui-tag--info-light-stroke:hover {
  background-color: #381088;
  color: #651dff;
  border-color: #651dff;
}
.ovui-tag--info-light-stroke.ovui-tag--disabled,
.ovui-tag--info-light-stroke.ovui-tag--disabled:hover {
  background-color: #381088;
  color: rgba(101, 29, 255, 0.34);
  border-color: rgba(101, 29, 255, 0.34);
}
.ovui-tag--success-fill {
  background-color: #00d5a4;
  color: #ffffff;
  border-color: transparent;
}
.ovui-tag--success-fill:hover {
  background-color: #00d5a4;
  color: #ffffff;
  border-color: transparent;
}
.ovui-tag--success-fill.ovui-tag--disabled,
.ovui-tag--success-fill.ovui-tag--disabled:hover {
  background-color: #7cffe0;
  color: rgba(255, 255, 255, 0.5);
  border-color: transparent;
}
.ovui-tag--success-stroke {
  background-color: rgba(0, 0, 0, 0);
  color: #00d5a4;
  border-color: #00d5a4;
}
.ovui-tag--success-stroke:hover {
  background-color: rgba(0, 0, 0, 0);
  color: #00d5a4;
  border-color: #00d5a4;
}
.ovui-tag--success-stroke.ovui-tag--disabled,
.ovui-tag--success-stroke.ovui-tag--disabled:hover {
  background-color: rgba(0, 213, 164, 0.08);
  color: #7cffe0;
  border-color: #7cffe0;
}
.ovui-tag--success-light-fill {
  background-color: rgba(0, 213, 164, 0.08);
  color: #00d5a4;
  border-color: transparent;
}
.ovui-tag--success-light-fill:hover {
  background-color: rgba(0, 213, 164, 0.08);
  color: #00d5a4;
  border-color: transparent;
}
.ovui-tag--success-light-fill.ovui-tag--disabled,
.ovui-tag--success-light-fill.ovui-tag--disabled:hover {
  background-color: rgba(0, 213, 164, 0.08);
  color: #7cffe0;
  border-color: transparent;
}
.ovui-tag--success-light-stroke {
  background-color: rgba(0, 213, 164, 0.08);
  color: #00d5a4;
  border-color: #00d5a4;
}
.ovui-tag--success-light-stroke:hover {
  background-color: rgba(0, 213, 164, 0.08);
  color: #00d5a4;
  border-color: #00d5a4;
}
.ovui-tag--success-light-stroke.ovui-tag--disabled,
.ovui-tag--success-light-stroke.ovui-tag--disabled:hover {
  background-color: rgba(0, 213, 164, 0.08);
  color: #7cffe0;
  border-color: #7cffe0;
}
.ovui-tag--warning-fill {
  background-color: #ff7c00;
  color: #ffffff;
  border-color: transparent;
}
.ovui-tag--warning-fill:hover {
  background-color: #ff7c00;
  color: #ffffff;
  border-color: transparent;
}
.ovui-tag--warning-fill.ovui-tag--disabled,
.ovui-tag--warning-fill.ovui-tag--disabled:hover {
  background-color: rgba(255, 124, 0, 0.08);
  color: #ffc48d;
  border-color: transparent;
}
.ovui-tag--warning-stroke {
  background-color: rgba(0, 0, 0, 0);
  color: #ff7c00;
  border-color: #ff7c00;
}
.ovui-tag--warning-stroke:hover {
  background-color: rgba(0, 0, 0, 0);
  color: #ff7c00;
  border-color: #ff7c00;
}
.ovui-tag--warning-stroke.ovui-tag--disabled,
.ovui-tag--warning-stroke.ovui-tag--disabled:hover {
  background-color: rgba(255, 124, 0, 0.08);
  color: #ffc48d;
  border-color: #ffc48d;
}
.ovui-tag--warning-light-fill {
  background-color: rgba(255, 124, 0, 0.08);
  color: #ff7c00;
  border-color: transparent;
}
.ovui-tag--warning-light-fill:hover {
  background-color: rgba(255, 124, 0, 0.08);
  color: #ff7c00;
  border-color: transparent;
}
.ovui-tag--warning-light-fill.ovui-tag--disabled,
.ovui-tag--warning-light-fill.ovui-tag--disabled:hover {
  background-color: rgba(255, 124, 0, 0.08);
  color: #ffc48d;
  border-color: transparent;
}
.ovui-tag--warning-light-stroke {
  background-color: rgba(255, 124, 0, 0.08);
  color: #ff7c00;
  border-color: #ff7c00;
}
.ovui-tag--warning-light-stroke:hover {
  background-color: rgba(255, 124, 0, 0.08);
  color: #ff7c00;
  border-color: #ff7c00;
}
.ovui-tag--warning-light-stroke.ovui-tag--disabled,
.ovui-tag--warning-light-stroke.ovui-tag--disabled:hover {
  background-color: rgba(255, 124, 0, 0.08);
  color: #ffc48d;
  border-color: #ffc48d;
}
.ovui-tag--danger-fill {
  background-color: #ff0060;
  color: #ffffff;
  border-color: transparent;
}
.ovui-tag--danger-fill:hover {
  background-color: #ff0060;
  color: #ffffff;
  border-color: transparent;
}
.ovui-tag--danger-fill.ovui-tag--disabled,
.ovui-tag--danger-fill.ovui-tag--disabled:hover {
  background-color: #ff8db9;
  color: rgba(255, 255, 255, 0.5);
  border-color: transparent;
}
.ovui-tag--danger-stroke {
  background-color: rgba(0, 0, 0, 0);
  color: #ff0060;
  border-color: #ff0060;
}
.ovui-tag--danger-stroke:hover {
  background-color: rgba(0, 0, 0, 0);
  color: #ff0060;
  border-color: #ff0060;
}
.ovui-tag--danger-stroke.ovui-tag--disabled,
.ovui-tag--danger-stroke.ovui-tag--disabled:hover {
  background-color: rgba(255, 0, 96, 0.06);
  color: #ff8db9;
  border-color: #ff8db9;
}
.ovui-tag--danger-light-fill {
  background-color: rgba(255, 0, 96, 0.06);
  color: #ff0060;
  border-color: transparent;
}
.ovui-tag--danger-light-fill:hover {
  background-color: rgba(255, 0, 96, 0.06);
  color: #ff0060;
  border-color: transparent;
}
.ovui-tag--danger-light-fill.ovui-tag--disabled,
.ovui-tag--danger-light-fill.ovui-tag--disabled:hover {
  background-color: rgba(255, 0, 96, 0.06);
  color: #ff8db9;
  border-color: transparent;
}
.ovui-tag--danger-light-stroke {
  background-color: rgba(255, 0, 96, 0.06);
  color: #ff0060;
  border-color: #ff0060;
}
.ovui-tag--danger-light-stroke:hover {
  background-color: rgba(255, 0, 96, 0.06);
  color: #ff0060;
  border-color: #ff0060;
}
.ovui-tag--danger-light-stroke.ovui-tag--disabled,
.ovui-tag--danger-light-stroke.ovui-tag--disabled:hover {
  background-color: rgba(255, 0, 96, 0.06);
  color: #ff8db9;
  border-color: #ff8db9;
}
.ovui-tag--primary-fill {
  background-color: #651dff;
  color: #ffffff;
  border-color: transparent;
}
.ovui-tag--primary-fill:hover {
  background-color: #651dff;
  color: #ffffff;
  border-color: transparent;
}
.ovui-tag--primary-fill.ovui-tag--disabled,
.ovui-tag--primary-fill.ovui-tag--disabled:hover {
  background-color: #381088;
  color: rgba(255, 255, 255, 0.5);
  border-color: transparent;
}
.ovui-tag--primary-stroke {
  background-color: rgba(0, 0, 0, 0);
  color: #651dff;
  border-color: #651dff;
}
.ovui-tag--primary-stroke:hover {
  background-color: rgba(0, 0, 0, 0);
  color: #651dff;
  border-color: #651dff;
}
.ovui-tag--primary-stroke.ovui-tag--disabled,
.ovui-tag--primary-stroke.ovui-tag--disabled:hover {
  background-color: #381088;
  color: rgba(101, 29, 255, 0.34);
  border-color: rgba(101, 29, 255, 0.34);
}
.ovui-tag--primary-light-fill {
  background-color: #381088;
  color: #651dff;
  border-color: transparent;
}
.ovui-tag--primary-light-fill:hover {
  background-color: #381088;
  color: #651dff;
  border-color: transparent;
}
.ovui-tag--primary-light-fill.ovui-tag--disabled,
.ovui-tag--primary-light-fill.ovui-tag--disabled:hover {
  background-color: #381088;
  color: rgba(101, 29, 255, 0.34);
  border-color: transparent;
}
.ovui-tag--primary-light-stroke {
  background-color: #381088;
  color: #651dff;
  border-color: #651dff;
}
.ovui-tag--primary-light-stroke:hover {
  background-color: #381088;
  color: #651dff;
  border-color: #651dff;
}
.ovui-tag--primary-light-stroke.ovui-tag--disabled,
.ovui-tag--primary-light-stroke.ovui-tag--disabled:hover {
  background-color: #381088;
  color: rgba(101, 29, 255, 0.34);
  border-color: rgba(101, 29, 255, 0.34);
}
.ovui-tag--text.ovui-tag--primary,
.ovui-tag--text.ovui-tag--primary-light {
  background-color: transparent;
  color: #651dff;
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--primary:hover,
.ovui-tag--text.ovui-tag--primary-light:hover {
  background-color: #381088;
  color: #7433ff;
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--primary.ovui-tag--checked,
.ovui-tag--text.ovui-tag--primary-light.ovui-tag--checked,
.ovui-tag--text.ovui-tag--primary.ovui-tag--checked:hover,
.ovui-tag--text.ovui-tag--primary-light.ovui-tag--checked:hover {
  background-color: #381088;
  color: #651dff;
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--primary.ovui-tag--disabled,
.ovui-tag--text.ovui-tag--primary-light.ovui-tag--disabled,
.ovui-tag--text.ovui-tag--primary.ovui-tag--disabled:hover,
.ovui-tag--text.ovui-tag--primary-light.ovui-tag--disabled:hover {
  background-color: transparent;
  color: rgba(101, 29, 255, 0.34);
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--primary.ovui-tag--disabled.ovui-tag--checked,
.ovui-tag--text.ovui-tag--primary-light.ovui-tag--disabled.ovui-tag--checked {
  background-color: #381088;
  color: rgba(101, 29, 255, 0.34);
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--default,
.ovui-tag--text.ovui-tag--default-light {
  background-color: transparent;
  color: #ffffff;
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--default:hover,
.ovui-tag--text.ovui-tag--default-light:hover {
  background-color: #261d38;
  color: rgba(255, 255, 255, 0.75);
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--default.ovui-tag--checked,
.ovui-tag--text.ovui-tag--default-light.ovui-tag--checked,
.ovui-tag--text.ovui-tag--default.ovui-tag--checked:hover,
.ovui-tag--text.ovui-tag--default-light.ovui-tag--checked:hover {
  background-color: #381088;
  color: #651dff;
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--default.ovui-tag--disabled,
.ovui-tag--text.ovui-tag--default-light.ovui-tag--disabled,
.ovui-tag--text.ovui-tag--default.ovui-tag--disabled:hover,
.ovui-tag--text.ovui-tag--default-light.ovui-tag--disabled:hover {
  background-color: transparent;
  color: #d5d6d9;
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--default.ovui-tag--disabled.ovui-tag--checked,
.ovui-tag--text.ovui-tag--default-light.ovui-tag--disabled.ovui-tag--checked {
  background-color: #381088;
  color: rgba(101, 29, 255, 0.34);
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--info,
.ovui-tag--text.ovui-tag--info-light {
  background-color: transparent;
  color: #651dff;
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--info:hover,
.ovui-tag--text.ovui-tag--info-light:hover {
  background-color: rgba(101, 45, 255, 0.08);
  color: #8146ff;
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--info.ovui-tag--checked,
.ovui-tag--text.ovui-tag--info-light.ovui-tag--checked,
.ovui-tag--text.ovui-tag--info.ovui-tag--checked:hover,
.ovui-tag--text.ovui-tag--info-light.ovui-tag--checked:hover {
  background-color: rgba(101, 45, 255, 0.08);
  color: #651dff;
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--info.ovui-tag--disabled,
.ovui-tag--text.ovui-tag--info-light.ovui-tag--disabled,
.ovui-tag--text.ovui-tag--info.ovui-tag--disabled:hover,
.ovui-tag--text.ovui-tag--info-light.ovui-tag--disabled:hover {
  background-color: transparent;
  color: #b998ff;
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--info.ovui-tag--disabled.ovui-tag--checked,
.ovui-tag--text.ovui-tag--info-light.ovui-tag--disabled.ovui-tag--checked {
  background-color: rgba(101, 45, 255, 0.08);
  color: #b998ff;
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--warning,
.ovui-tag--text.ovui-tag--warning-light {
  background-color: transparent;
  color: #ff7c00;
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--warning:hover,
.ovui-tag--text.ovui-tag--warning-light:hover {
  background-color: rgba(255, 124, 0, 0.08);
  color: #ff932f;
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--warning.ovui-tag--checked,
.ovui-tag--text.ovui-tag--warning-light.ovui-tag--checked,
.ovui-tag--text.ovui-tag--warning.ovui-tag--checked:hover,
.ovui-tag--text.ovui-tag--warning-light.ovui-tag--checked:hover {
  background-color: rgba(255, 124, 0, 0.08);
  color: #ff7c00;
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--warning.ovui-tag--disabled,
.ovui-tag--text.ovui-tag--warning-light.ovui-tag--disabled,
.ovui-tag--text.ovui-tag--warning.ovui-tag--disabled:hover,
.ovui-tag--text.ovui-tag--warning-light.ovui-tag--disabled:hover {
  background-color: transparent;
  color: #ffc48d;
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--warning.ovui-tag--disabled.ovui-tag--checked,
.ovui-tag--text.ovui-tag--warning-light.ovui-tag--disabled.ovui-tag--checked {
  background-color: rgba(255, 124, 0, 0.08);
  color: #ffc48d;
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--success,
.ovui-tag--text.ovui-tag--success-light {
  background-color: transparent;
  color: #00d5a4;
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--success:hover,
.ovui-tag--text.ovui-tag--success-light:hover {
  background-color: rgba(0, 213, 164, 0.08);
  color: #0dffc7;
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--success.ovui-tag--checked,
.ovui-tag--text.ovui-tag--success-light.ovui-tag--checked,
.ovui-tag--text.ovui-tag--success.ovui-tag--checked:hover,
.ovui-tag--text.ovui-tag--success-light.ovui-tag--checked:hover {
  background-color: rgba(0, 213, 164, 0.08);
  color: #00d5a4;
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--success.ovui-tag--disabled,
.ovui-tag--text.ovui-tag--success-light.ovui-tag--disabled,
.ovui-tag--text.ovui-tag--success.ovui-tag--disabled:hover,
.ovui-tag--text.ovui-tag--success-light.ovui-tag--disabled:hover {
  background-color: transparent;
  color: #7cffe0;
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--success.ovui-tag--disabled.ovui-tag--checked,
.ovui-tag--text.ovui-tag--success-light.ovui-tag--disabled.ovui-tag--checked {
  background-color: rgba(0, 213, 164, 0.08);
  color: rgba(101, 29, 255, 0.34);
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--danger,
.ovui-tag--text.ovui-tag--danger-light {
  background-color: transparent;
  color: #ff0060;
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--danger:hover,
.ovui-tag--text.ovui-tag--danger-light:hover {
  background-color: rgba(255, 0, 96, 0.06);
  color: #ff2f7f;
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--danger.ovui-tag--checked,
.ovui-tag--text.ovui-tag--danger-light.ovui-tag--checked,
.ovui-tag--text.ovui-tag--danger.ovui-tag--checked:hover,
.ovui-tag--text.ovui-tag--danger-light.ovui-tag--checked:hover {
  background-color: rgba(255, 0, 96, 0.06);
  color: #ff0060;
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--danger.ovui-tag--disabled,
.ovui-tag--text.ovui-tag--danger-light.ovui-tag--disabled,
.ovui-tag--text.ovui-tag--danger.ovui-tag--disabled:hover,
.ovui-tag--text.ovui-tag--danger-light.ovui-tag--disabled:hover {
  background-color: transparent;
  color: #ff8db9;
  border-color: transparent;
}
.ovui-tag--text.ovui-tag--danger.ovui-tag--disabled.ovui-tag--checked,
.ovui-tag--text.ovui-tag--danger-light.ovui-tag--disabled.ovui-tag--checked {
  background-color: rgba(255, 0, 96, 0.06);
  color: #ff8db9;
  border-color: transparent;
}
.ovui-tag--xs {
  padding: 0 8px;
  font-size: 12px;
  height: 16px;
}
.ovui-tag--sm {
  padding: 0 8px;
  font-size: 12px;
  height: 20px;
}
.ovui-tag--md {
  padding: 0 8px;
  font-size: 12px;
  height: 24px;
}
.ovui-tag--lg {
  padding: 0 8px;
  font-size: 14px;
  height: 28px;
}
.ovui-tag--xl {
  padding: 0 8px;
  font-size: 14px;
  height: 32px;
}
.ovui-tag--disabled {
  cursor: not-allowed;
}
.ovui-tag--disabled.ovui-tag--closable .ovui-tag__close {
  cursor: not-allowed;
}
.ovui-tag--dashed.ovui-tag--border {
  border-style: dashed;
}
.ovui-tag--hidden {
  display: none;
}
.ovui-tag--rtl {
  direction: rtl;
}
.ovui-tag--rtl .ovui-tag__close {
  margin-right: 4px;
  margin-left: 0;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* Button */
/* button  z-index */
/* Button padding */
/* Checkbox */
.ovui-checkbox-option {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  cursor: default;
  border-radius: 6px;
}
.ovui-checkbox-option--stroke {
  color: rgba(255, 255, 255, 0.75);
}
.ovui-checkbox-option--stroke:hover {
  background-color: #3c344d;
}
.ovui-checkbox-option--stroke:active {
  background-color: #1a112e;
}
.ovui-checkbox-option--stroke.ovui-checkbox-option--checked,
.ovui-checkbox-option--stroke.ovui-checkbox-option--checked:hover,
.ovui-checkbox-option--stroke.ovui-checkbox-option--checked:active {
  background-color: #381088;
  color: #651dff;
}
.ovui-checkbox-option--stroke.ovui-checkbox-option--disabled,
.ovui-checkbox-option--stroke.ovui-checkbox-option--disabled:hover,
.ovui-checkbox-option--stroke.ovui-checkbox-option--disabled:active {
  cursor: not-allowed;
  background-color: transparent;
  color: #bfc1c5;
}
.ovui-checkbox-option--stroke.ovui-checkbox-option--checked.ovui-checkbox-option--disabled,
.ovui-checkbox-option--stroke.ovui-checkbox-option--checked.ovui-checkbox-option--disabled:hover,
.ovui-checkbox-option--stroke.ovui-checkbox-option--checked.ovui-checkbox-option--disabled:active {
  background-color: #381088;
  color: rgba(101, 29, 255, 0.34);
}
.ovui-checkbox-option--fill {
  color: rgba(255, 255, 255, 0.75);
}
.ovui-checkbox-option--fill:hover {
  background-color: #dfe0e2;
}
.ovui-checkbox-option--fill:active {
  background-color: #d5d6d9;
}
.ovui-checkbox-option--fill.ovui-checkbox-option--checked,
.ovui-checkbox-option--fill.ovui-checkbox-option--checked:hover,
.ovui-checkbox-option--fill.ovui-checkbox-option--checked:active {
  background-color: #302842;
  color: #651dff;
}
.ovui-checkbox-option--fill.ovui-checkbox-option--disabled,
.ovui-checkbox-option--fill.ovui-checkbox-option--disabled:hover,
.ovui-checkbox-option--fill.ovui-checkbox-option--disabled:active {
  cursor: not-allowed;
  background-color: transparent;
  color: #bfc1c5;
}
.ovui-checkbox-option--fill.ovui-checkbox-option--checked.ovui-checkbox-option--disabled,
.ovui-checkbox-option--fill.ovui-checkbox-option--checked.ovui-checkbox-option--disabled:hover,
.ovui-checkbox-option--fill.ovui-checkbox-option--checked.ovui-checkbox-option--disabled:active {
  background-color: #302842;
  color: rgba(101, 29, 255, 0.34);
}
.ovui-checkbox-option--checked::after {
  content: "";
  position: absolute;
  right: 1px;
  top: -2px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #651dff;
  transform: rotate(-45deg);
  border-radius: 2px;
}
.ovui-checkbox-option--checked.ovui-checkbox-option--disabled::after {
  border-left-color: rgba(101, 29, 255, 0.34);
}
.ovui-checkbox-option--single::after {
  display: none;
}
.ovui-checkbox-option--xs {
  font-size: 12px;
  line-height: 20px;
  padding: 0 12px;
}
.ovui-checkbox-option--sm {
  font-size: 12px;
  line-height: 20px;
  padding: 1px 12px;
}
.ovui-checkbox-option--md {
  font-size: 14px;
  line-height: 22px;
  padding: 2px 12px;
}
.ovui-checkbox-option--lg {
  font-size: 14px;
  line-height: 22px;
  padding: 4px 12px;
}
.ovui-checkbox-option--xl {
  font-size: 16px;
  line-height: 24px;
  padding: 5px 12px;
}
.ovui-checkbox-group {
  display: inline-flex;
  position: relative;
}
.ovui-checkbox-group .ovui-checkbox-button:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.ovui-checkbox-group .ovui-checkbox-button:not(:last-child) {
  margin-right: -1px;
}
.ovui-checkbox-group .ovui-checkbox-button:first-child:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.ovui-checkbox-group .ovui-checkbox-button:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.ovui-checkbox-group .ovui-checkbox-button::after {
  content: "";
  position: absolute;
  right: 1px;
  top: -2px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #dfe0e2;
  transform: rotate(-45deg);
  border-radius: 2px;
}
.ovui-checkbox-group .ovui-checkbox-button--single::after {
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
}
.ovui-checkbox-group .ovui-checkbox-button:hover,
.ovui-checkbox-group .ovui-checkbox-button:focus,
.ovui-checkbox-group .ovui-checkbox-button:active {
  z-index: 1;
}
.ovui-checkbox-group .ovui-checkbox-button:hover::after,
.ovui-checkbox-group .ovui-checkbox-button:focus::after,
.ovui-checkbox-group .ovui-checkbox-button:active::after {
  border-left-color: #651dff;
}
.ovui-checkbox-group .ovui-checkbox-button--checked,
.ovui-checkbox-group .ovui-checkbox-button--checked:hover,
.ovui-checkbox-group .ovui-checkbox-button--checked:focus,
.ovui-checkbox-group .ovui-checkbox-button--checked:active {
  z-index: 3;
}
.ovui-checkbox-group .ovui-checkbox-button--checked::after,
.ovui-checkbox-group .ovui-checkbox-button--checked:hover::after,
.ovui-checkbox-group .ovui-checkbox-button--checked:focus::after,
.ovui-checkbox-group .ovui-checkbox-button--checked:active::after {
  border-left-color: #651dff;
}
.ovui-checkbox-group .ovui-checkbox-button[disabled]:hover::after,
.ovui-checkbox-group .ovui-checkbox-button[disabled]:focus::after,
.ovui-checkbox-group .ovui-checkbox-button[disabled]:active::after {
  border-left-color: #dfe0e2;
}
.ovui-checkbox-group .ovui-checkbox-button[disabled].ovui-checkbox-button--checked::after,
.ovui-checkbox-group .ovui-checkbox-button[disabled].ovui-checkbox-button--checked:hover::after,
.ovui-checkbox-group .ovui-checkbox-button[disabled].ovui-checkbox-button--checked:focus::after,
.ovui-checkbox-group .ovui-checkbox-button[disabled].ovui-checkbox-button--checked:active::after {
  border-left-color: rgba(101, 29, 255, 0.34);
}
.ovui-checkbox-group .ovui-checkbox:not(:first-child) {
  margin-left: 16px;
}
.ovui-checkbox-option-group {
  display: inline-flex;
  border-radius: 8px;
  padding: 0 2px;
}
.ovui-checkbox-option-group.ovui-checkbox-group--stroke {
  border: 1px solid #dfe0e2;
  background-color: #302842;
}
.ovui-checkbox-option-group.ovui-checkbox-group--fill {
  border: 1px solid #f4f4f5;
  background-color: #f4f4f5;
}
.ovui-checkbox-option-group .ovui-checkbox-option--xs {
  margin: 2px 2px;
}
.ovui-checkbox-option-group .ovui-checkbox-option--sm {
  margin: 3px 2px;
}
.ovui-checkbox-option-group .ovui-checkbox-option--md {
  margin: 3px 2px;
}
.ovui-checkbox-option-group .ovui-checkbox-option--lg {
  margin: 3px 2px;
}
.ovui-checkbox-option-group .ovui-checkbox-option--xl {
  margin: 3px 2px;
}
.ovui-checkbox-item-group {
  display: inline-flex;
  border-radius: 8px;
}
.ovui-checkbox-item-group.ovui-checkbox-group--stroke::before {
  z-index: 1;
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin-top: 8px;
  border-radius: 8px;
  border: 1px solid #dfe0e2;
}
.ovui-checkbox-item-group.ovui-checkbox-group--stroke.ovui-checkbox-group--disabled::before {
  border: 1px solid #f4f4f5;
}
.ovui-checkbox-item-group .ovui-checkbox-item:not(:first-child):not(:last-child),
.ovui-checkbox-item-group .ovui-checkbox-item:not(:first-child):not(:last-child)::after {
  border-radius: 0;
}
.ovui-checkbox-item-group .ovui-checkbox-item:not(:last-child) {
  margin-right: -1px;
}
.ovui-checkbox-item-group .ovui-checkbox-item:first-child:not(:last-child),
.ovui-checkbox-item-group .ovui-checkbox-item:first-child:not(:last-child)::after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.ovui-checkbox-item-group .ovui-checkbox-item:last-child:not(:first-child),
.ovui-checkbox-item-group .ovui-checkbox-item:last-child:not(:first-child)::after {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.ovui-checkbox-item-group .ovui-checkbox-item--initial + .ovui-checkbox-item-group .ovui-checkbox-item--initial::before {
  content: " ";
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 16px;
  margin-top: -8px;
  background-color: #dfe0e2;
}
.ovui-checkbox-group--rtl {
  direction: rtl;
}
.ovui-checkbox-group--rtl .ovui-checkbox-button {
  margin-right: 0;
}
.ovui-checkbox-group--rtl .ovui-checkbox-button:not(:first-child) {
  margin-right: -1px;
}
.ovui-checkbox-group--rtl .ovui-checkbox-button:first-child:not(:last-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-checkbox-group--rtl .ovui-checkbox-button:last-child:not(:first-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-checkbox-group--rtl .ovui-checkbox:first-child {
  margin-left: 0;
}
.ovui-checkbox-group--rtl .ovui-checkbox:not(:last-child) {
  margin-left: 16px;
}
.ovui-checkbox-group--rtl .ovui-checkbox-item {
  margin-right: 0;
}
.ovui-checkbox-group--rtl .ovui-checkbox-item:not(:first-child) {
  margin-right: -1px;
}
.ovui-checkbox-group--rtl .ovui-checkbox-item:first-child:not(:last-child),
.ovui-checkbox-group--rtl .ovui-checkbox-item:first-child:not(:last-child)::after {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-checkbox-group--rtl .ovui-checkbox-item:last-child:not(:first-child),
.ovui-checkbox-group--rtl .ovui-checkbox-item:last-child:not(:first-child)::after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-checkbox-group--rtl .ovui-checkbox-item .ovui-checkbox-item__checkbox {
  margin-right: 0;
  margin-left: 4px;
}
.ovui-checkbox-group--rtl .ovui-checkbox-item .ovui-checkbox-item--empty .ovui-checkbox-item__checkbox {
  margin-left: 0;
}
.ovui-checkbox-item {
  display: inline-flex;
  position: relative;
  cursor: pointer;
  border-radius: 8px;
}
.ovui-checkbox-item--stroke {
  background-color: rgba(0, 0, 0, 0);
  color: #ffffff;
}
.ovui-checkbox-item--stroke.ovui-checkbox-item--border-initial::after {
  z-index: inherit;
  border-radius: 8px;
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border: 1px solid #dfe0e2;
}
.ovui-checkbox-item--stroke:hover {
  color: #651dff;
  background-color: rgba(0, 0, 0, 0);
}
.ovui-checkbox-item--stroke:hover::after {
  z-index: 1;
  border-radius: 8px;
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border: 1px solid #651dff;
}
.ovui-checkbox-item--stroke:focus,
.ovui-checkbox-item--stroke.ovui-checkbox-item--checked {
  color: #651dff;
  background-color: rgba(0, 0, 0, 0);
}
.ovui-checkbox-item--stroke:focus::after,
.ovui-checkbox-item--stroke.ovui-checkbox-item--checked::after {
  z-index: 3;
  border-radius: 8px;
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border: 1px solid #651dff;
}
.ovui-checkbox-item--stroke:active {
  color: rgba(101, 29, 255, 0.75);
  background-color: rgba(0, 0, 0, 0);
}
.ovui-checkbox-item--stroke:active::after {
  z-index: 1;
  border-radius: 8px;
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border: 1px solid rgba(101, 29, 255, 0.75);
}
.ovui-checkbox-item--stroke.ovui-checkbox-item--disabled,
.ovui-checkbox-item--stroke.ovui-checkbox-item--disabled:hover,
.ovui-checkbox-item--stroke.ovui-checkbox-item--disabled:focus,
.ovui-checkbox-item--stroke.ovui-checkbox-item--disabled:active {
  color: rgba(255, 255, 255, 0.5);
  background-color: #302842;
  cursor: not-allowed;
}
.ovui-checkbox-item--stroke.ovui-checkbox-item--disabled::after,
.ovui-checkbox-item--stroke.ovui-checkbox-item--disabled:hover::after,
.ovui-checkbox-item--stroke.ovui-checkbox-item--disabled:focus::after,
.ovui-checkbox-item--stroke.ovui-checkbox-item--disabled:active::after {
  z-index: inherit;
  border-radius: 8px;
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border: 1px solid #dfe0e2;
}
.ovui-checkbox-item--stroke.ovui-checkbox-item--disabled.ovui-checkbox-item--checked {
  color: rgba(101, 29, 255, 0.34);
  background-color: rgba(0, 0, 0, 0);
}
.ovui-checkbox-item--stroke.ovui-checkbox-item--disabled.ovui-checkbox-item--checked::after {
  z-index: 3;
  border-radius: 8px;
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border: 1px solid rgba(101, 29, 255, 0.34);
}
.ovui-checkbox-item--fill {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.5);
}
.ovui-checkbox-item--fill:hover {
  background-color: transparent;
  color: #ffffff;
}
.ovui-checkbox-item--fill:active {
  background-color: transparent;
  color: #ffffff;
}
.ovui-checkbox-item--fill:focus,
.ovui-checkbox-item--fill.ovui-checkbox-item--checked {
  background-color: #4b445b;
  color: #ffffff;
}
.ovui-checkbox-item--fill:focus::after,
.ovui-checkbox-item--fill.ovui-checkbox-item--checked::after {
  z-index: 3;
  border-radius: 8px;
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border: 1px solid transparent;
}
.ovui-checkbox-item--fill.ovui-checkbox-item--disabled {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.5);
  cursor: not-allowed;
}
.ovui-checkbox-item--fill.ovui-checkbox-item--disabled.ovui-checkbox-item--checked {
  color: rgba(255, 255, 255, 0.25);
  background-color: #4b445b;
}
.ovui-checkbox-item--fill.ovui-checkbox-item--disabled.ovui-checkbox-item--checked::after {
  z-index: 3;
  border-radius: 8px;
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border: 1px solid transparent;
}
.ovui-checkbox-item--divider-initial + .ovui-checkbox-item--divider-initial::before {
  content: " ";
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 16px;
  margin-top: -8px;
  background-color: #dfe0e2;
}
.ovui-checkbox-item--xs {
  font-size: 12px;
  line-height: 20px;
  padding: 2px 16px;
}
.ovui-checkbox-item--sm {
  font-size: 12px;
  line-height: 20px;
  padding: 4px 16px;
}
.ovui-checkbox-item--md {
  font-size: 14px;
  line-height: 22px;
  padding: 5px 16px;
}
.ovui-checkbox-item--lg {
  font-size: 14px;
  line-height: 22px;
  padding: 9px 16px;
}
.ovui-checkbox-item--xl {
  font-size: 16px;
  line-height: 24px;
  padding: 15px 16px;
}
.ovui-checkbox-item .ovui-checkbox-item__checkbox {
  margin-right: 4px;
}
.ovui-checkbox-item--empty .ovui-checkbox-item__checkbox {
  margin-right: 0;
}
.ovui-checkbox {
  display: inline-flex;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  cursor: pointer;
}
.ovui-checkbox__wrapper {
  position: relative;
  display: inline-block;
}
.ovui-checkbox__input {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
}
.ovui-checkbox .ovui-checkbox__checked-icon {
  display: none;
}
.ovui-checkbox .ovui-checkbox__indeterminate-icon {
  display: none;
}
.ovui-checkbox .ovui-checkbox__inner {
  display: block;
  position: relative;
  background-color: transparent;
  border: 1px solid #ffffff;
  border-radius: 4px;
  transition: all ease-in-out 0.1s;
}
.ovui-checkbox .ovui-checkbox__inner:hover {
  border-color: #ffffff;
  background-color: transparent;
}
.ovui-checkbox .ovui-checkbox__inner:active {
  background-color: rgba(56, 55, 79, 0.1);
}
.ovui-checkbox .ovui-checkbox__label {
  color: #ffffff;
  word-break: break-all;
}
.ovui-checkbox .ovui-checkbox__label:hover {
  color: #ffffff;
}
.ovui-checkbox .ovui-checkbox__label:active {
  color: #ffffff;
}
.ovui-checkbox.ovui-checkbox--checked .ovui-checkbox__inner {
  color: rgba(0, 0, 0, 0);
}
.ovui-checkbox.ovui-checkbox--checked .ovui-checkbox__inner,
.ovui-checkbox.ovui-checkbox--checked .ovui-checkbox__inner:hover {
  border-color: rgba(0, 0, 0, 0);
  background-color: #ffffff;
}
.ovui-checkbox.ovui-checkbox--checked .ovui-checkbox__checked-icon {
  display: block;
}
.ovui-checkbox.ovui-checkbox--indeterminate .ovui-checkbox__inner {
  color: rgba(0, 0, 0, 0);
}
.ovui-checkbox.ovui-checkbox--indeterminate .ovui-checkbox__inner,
.ovui-checkbox.ovui-checkbox--indeterminate .ovui-checkbox__inner:hover {
  border-color: rgba(0, 0, 0, 0);
  background-color: #ffffff;
}
.ovui-checkbox.ovui-checkbox--indeterminate .ovui-checkbox__indeterminate-icon {
  display: block;
}
.ovui-checkbox.ovui-checkbox--checked .ovui-checkbox__label,
.ovui-checkbox.ovui-checkbox--indeterminate .ovui-checkbox__label {
  color: #ffffff;
}
.ovui-checkbox.ovui-checkbox--checked .ovui-checkbox__label:hover,
.ovui-checkbox.ovui-checkbox--indeterminate .ovui-checkbox__label:hover {
  color: #ffffff;
}
.ovui-checkbox.ovui-checkbox--checked .ovui-checkbox__label:active,
.ovui-checkbox.ovui-checkbox--indeterminate .ovui-checkbox__label:active {
  color: #ffffff;
}
.ovui-checkbox.ovui-checkbox--disabled,
.ovui-checkbox.ovui-checkbox--disabled:hover {
  cursor: not-allowed;
  color: #d5d6d9;
}
.ovui-checkbox.ovui-checkbox--disabled .ovui-checkbox__inner,
.ovui-checkbox.ovui-checkbox--disabled:hover .ovui-checkbox__inner {
  border-color: rgba(255, 255, 255, 0.25);
  background-color: transparent;
}
.ovui-checkbox.ovui-checkbox--disabled .ovui-checkbox__label,
.ovui-checkbox.ovui-checkbox--disabled .ovui-checkbox__label:hover,
.ovui-checkbox.ovui-checkbox--disabled .ovui-checkbox__label:active {
  color: rgba(255, 255, 255, 0.25);
}
.ovui-checkbox.ovui-checkbox--disabled.ovui-checkbox--checked .ovui-checkbox__inner,
.ovui-checkbox.ovui-checkbox--disabled.ovui-checkbox--indeterminate .ovui-checkbox__inner {
  border-color: rgba(0, 0, 0, 0);
  background-color: rgba(255, 255, 255, 0.5);
}
.ovui-checkbox.ovui-checkbox--disabled.ovui-checkbox--checked .ovui-checkbox__label,
.ovui-checkbox.ovui-checkbox--disabled.ovui-checkbox--indeterminate .ovui-checkbox__label,
.ovui-checkbox.ovui-checkbox--disabled.ovui-checkbox--checked .ovui-checkbox__label:hover,
.ovui-checkbox.ovui-checkbox--disabled.ovui-checkbox--indeterminate .ovui-checkbox__label:hover,
.ovui-checkbox.ovui-checkbox--disabled.ovui-checkbox--checked .ovui-checkbox__label:active,
.ovui-checkbox.ovui-checkbox--disabled.ovui-checkbox--indeterminate .ovui-checkbox__label:active {
  color: rgba(255, 255, 255, 0.25);
}
.ovui-checkbox--light.ovui-checkbox--checked .ovui-checkbox__inner,
.ovui-checkbox--light.ovui-checkbox--indeterminate .ovui-checkbox__inner {
  border-color: #381088;
  background-color: #381088;
  color: #651dff;
}
.ovui-checkbox--light.ovui-checkbox--checked .ovui-checkbox__inner:hover,
.ovui-checkbox--light.ovui-checkbox--indeterminate .ovui-checkbox__inner:hover {
  border-color: #381088;
  background-color: #381088;
  color: #7433ff;
}
.ovui-checkbox--light.ovui-checkbox--disabled.ovui-checkbox--checked .ovui-checkbox__inner,
.ovui-checkbox--light.ovui-checkbox--disabled.ovui-checkbox--indeterminate .ovui-checkbox__inner,
.ovui-checkbox--light.ovui-checkbox--disabled.ovui-checkbox--checked .ovui-checkbox__inner:hover,
.ovui-checkbox--light.ovui-checkbox--disabled.ovui-checkbox--indeterminate .ovui-checkbox__inner:hover {
  border-color: #381088;
  background-color: #381088;
  color: rgba(101, 29, 255, 0.34);
}
.ovui-checkbox--xl {
  font-size: 14px;
  line-height: 22px;
}
.ovui-checkbox--xl .ovui-checkbox__wrapper {
  margin: 1px 0;
}
.ovui-checkbox--xl .ovui-checkbox__inner {
  width: 20px;
  height: 20px;
}
.ovui-checkbox--xl .ovui-checkbox__inner .ovui-checkbox__checked-icon,
.ovui-checkbox--xl .ovui-checkbox__inner .ovui-checkbox__indeterminate-icon {
  font-size: 18px;
}
.ovui-checkbox--xl .ovui-checkbox__label {
  margin: 0 8px;
}
.ovui-checkbox--lg {
  font-size: 14px;
  line-height: 22px;
}
.ovui-checkbox--lg .ovui-checkbox__wrapper {
  margin: 1px 0;
}
.ovui-checkbox--lg .ovui-checkbox__inner {
  width: 20px;
  height: 20px;
}
.ovui-checkbox--lg .ovui-checkbox__inner .ovui-checkbox__checked-icon,
.ovui-checkbox--lg .ovui-checkbox__inner .ovui-checkbox__indeterminate-icon {
  font-size: 18px;
}
.ovui-checkbox--lg .ovui-checkbox__label {
  margin: 0 8px;
}
.ovui-checkbox--md {
  font-size: 14px;
  line-height: 22px;
}
.ovui-checkbox--md .ovui-checkbox__wrapper {
  margin: 3px 0;
}
.ovui-checkbox--md .ovui-checkbox__inner {
  width: 16px;
  height: 16px;
}
.ovui-checkbox--md .ovui-checkbox__inner .ovui-checkbox__checked-icon,
.ovui-checkbox--md .ovui-checkbox__inner .ovui-checkbox__indeterminate-icon {
  font-size: 14px;
}
.ovui-checkbox--md .ovui-checkbox__label {
  margin: 0 8px;
}
.ovui-checkbox--sm {
  font-size: 12px;
  line-height: 20px;
}
.ovui-checkbox--sm .ovui-checkbox__wrapper {
  margin: 3px 0;
}
.ovui-checkbox--sm .ovui-checkbox__inner {
  width: 14px;
  height: 14px;
}
.ovui-checkbox--sm .ovui-checkbox__inner .ovui-checkbox__checked-icon,
.ovui-checkbox--sm .ovui-checkbox__inner .ovui-checkbox__indeterminate-icon {
  font-size: 12px;
}
.ovui-checkbox--sm .ovui-checkbox__label {
  margin: 0 8px;
}
.ovui-checkbox--xs {
  font-size: 12px;
  line-height: 20px;
}
.ovui-checkbox--xs .ovui-checkbox__wrapper {
  margin: 4px 0;
}
.ovui-checkbox--xs .ovui-checkbox__inner {
  width: 12px;
  height: 12px;
}
.ovui-checkbox--xs .ovui-checkbox__inner .ovui-checkbox__checked-icon,
.ovui-checkbox--xs .ovui-checkbox__inner .ovui-checkbox__indeterminate-icon {
  font-size: 10px;
}
.ovui-checkbox--xs .ovui-checkbox__label {
  margin: 0 8px;
}
.ovui-checkbox--rtl {
  direction: rtl;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* Checkbox */
/* Radio */
/* Button */
/* button  z-index */
/* Button padding */
/* radio */
.ovui-radio-group {
  position: relative;
  display: inline-flex;
}
.ovui-radio-button-group .ovui-radio-button:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.ovui-radio-button-group .ovui-radio-button:not(:first-child) {
  margin-right: -1px;
}
.ovui-radio-button-group .ovui-radio-button:first-child:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.ovui-radio-button-group .ovui-radio-button:last-child:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.ovui-radio-button-group .ovui-radio-button:hover,
.ovui-radio-button-group .ovui-radio-button:focus,
.ovui-radio-button-group .ovui-radio-button:active {
  z-index: 1;
}
.ovui-radio-button-group .ovui-radio-button--checked,
.ovui-radio-button-group .ovui-radio-button--checked:hover,
.ovui-radio-button-group .ovui-radio-button--checked:focus,
.ovui-radio-button-group .ovui-radio-button--checked:active {
  z-index: 3;
}
.ovui-radio-option-group {
  display: inline-flex;
  border-radius: 8px;
  padding: 0 2px;
}
.ovui-radio-option-group.ovui-radio-group--stroke {
  border: 1px solid #dfe0e2;
  background-color: #302842;
}
.ovui-radio-option-group.ovui-radio-group--fill {
  border: 1px solid #f4f4f5;
  background-color: #f4f4f5;
}
.ovui-radio-option-group .ovui-radio-option--xs {
  margin: 2px 2px;
}
.ovui-radio-option-group .ovui-radio-option--sm {
  margin: 3px 2px;
}
.ovui-radio-option-group .ovui-radio-option--md {
  margin: 3px 2px;
}
.ovui-radio-option-group .ovui-radio-option--lg {
  margin: 3px 2px;
}
.ovui-radio-option-group .ovui-radio-option--xl {
  margin: 3px 2px;
}
.ovui-radio-item-group {
  display: inline-flex;
  border-radius: 8px;
}
.ovui-radio-item-group.ovui-radio-group--stroke::before {
  z-index: 1;
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin-top: 8px;
  border-radius: 8px;
  border: 1px solid #dfe0e2;
}
.ovui-radio-item-group.ovui-radio-group--stroke.ovui-radio-group--disabled::before {
  border: 1px solid #f4f4f5;
}
.ovui-radio-item-group .ovui-radio-item:not(:first-child):not(:last-child),
.ovui-radio-item-group .ovui-radio-item:not(:first-child):not(:last-child)::after {
  border-radius: 0;
}
.ovui-radio-item-group .ovui-radio-item:not(:last-child) {
  margin-right: -1px;
}
.ovui-radio-item-group .ovui-radio-item:first-child:not(:last-child),
.ovui-radio-item-group .ovui-radio-item:first-child:not(:last-child)::after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.ovui-radio-item-group .ovui-radio-item:last-child:not(:first-child),
.ovui-radio-item-group .ovui-radio-item:last-child:not(:first-child)::after {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.ovui-radio-item-group .ovui-radio-item--initial + .ovui-radio-item-group .ovui-radio-item--initial::before {
  content: " ";
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 16px;
  margin-top: -8px;
  background-color: #dfe0e2;
}
.ovui-radio-group--rtl {
  direction: rtl;
}
.ovui-radio-group--rtl .ovui-radio-button:first-child:not(:last-child) {
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.ovui-radio-group--rtl .ovui-radio-button:last-child:not(:first-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-radio-group--rtl .ovui-radio-item {
  margin-right: 0;
}
.ovui-radio-group--rtl .ovui-radio-item:not(:first-child) {
  margin-right: -1px;
}
.ovui-radio-group--rtl .ovui-radio-item:first-child:not(:last-child),
.ovui-radio-group--rtl .ovui-radio-item:first-child:not(:last-child)::after {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-radio-group--rtl .ovui-radio-item:last-child:not(:first-child),
.ovui-radio-group--rtl .ovui-radio-item:last-child:not(:first-child)::after {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-radio-option {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  cursor: default;
  border-radius: 6px;
}
.ovui-radio-option--stroke {
  color: rgba(255, 255, 255, 0.75);
}
.ovui-radio-option--stroke:hover {
  background-color: #3c344d;
}
.ovui-radio-option--stroke:active {
  background-color: #1a112e;
}
.ovui-radio-option--stroke.ovui-radio-option--checked,
.ovui-radio-option--stroke.ovui-radio-option--checked:hover,
.ovui-radio-option--stroke.ovui-radio-option--checked:active {
  background-color: #381088;
  color: #651dff;
}
.ovui-radio-option--stroke.ovui-radio-option--disabled,
.ovui-radio-option--stroke.ovui-radio-option--disabled:hover,
.ovui-radio-option--stroke.ovui-radio-option--disabled:active {
  cursor: not-allowed;
  background-color: transparent;
  color: #bfc1c5;
}
.ovui-radio-option--stroke.ovui-radio-option--checked.ovui-radio-option--disabled,
.ovui-radio-option--stroke.ovui-radio-option--checked.ovui-radio-option--disabled:hover,
.ovui-radio-option--stroke.ovui-radio-option--checked.ovui-radio-option--disabled:active {
  background-color: #381088;
  color: rgba(101, 29, 255, 0.34);
}
.ovui-radio-option--fill {
  color: rgba(255, 255, 255, 0.75);
}
.ovui-radio-option--fill:hover {
  background-color: #dfe0e2;
}
.ovui-radio-option--fill:active {
  background-color: #d5d6d9;
}
.ovui-radio-option--fill.ovui-radio-option--checked,
.ovui-radio-option--fill.ovui-radio-option--checked:hover,
.ovui-radio-option--fill.ovui-radio-option--checked:active {
  background-color: #302842;
  color: #651dff;
}
.ovui-radio-option--fill.ovui-radio-option--disabled,
.ovui-radio-option--fill.ovui-radio-option--disabled:hover,
.ovui-radio-option--fill.ovui-radio-option--disabled:active {
  cursor: not-allowed;
  background-color: transparent;
  color: #bfc1c5;
}
.ovui-radio-option--fill.ovui-radio-option--checked.ovui-radio-option--disabled,
.ovui-radio-option--fill.ovui-radio-option--checked.ovui-radio-option--disabled:hover,
.ovui-radio-option--fill.ovui-radio-option--checked.ovui-radio-option--disabled:active {
  background-color: #302842;
  color: rgba(101, 29, 255, 0.34);
}
.ovui-radio-option--single::after {
  display: none;
}
.ovui-radio-option--xs {
  font-size: 12px;
  line-height: 20px;
  padding: 0 12px;
}
.ovui-radio-option--sm {
  font-size: 12px;
  line-height: 20px;
  padding: 1px 12px;
}
.ovui-radio-option--md {
  font-size: 14px;
  line-height: 22px;
  padding: 2px 12px;
}
.ovui-radio-option--lg {
  font-size: 14px;
  line-height: 22px;
  padding: 4px 12px;
}
.ovui-radio-option--xl {
  font-size: 16px;
  line-height: 24px;
  padding: 5px 12px;
}
.ovui-radio-item {
  display: inline-flex;
  position: relative;
  cursor: pointer;
  border-radius: 8px;
}
.ovui-radio-item--stroke {
  background-color: rgba(0, 0, 0, 0);
  color: #ffffff;
}
.ovui-radio-item--stroke.ovui-radio-item--border-initial::after {
  z-index: inherit;
  border-radius: 8px;
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border: 1px solid #dfe0e2;
}
.ovui-radio-item--stroke:hover {
  color: #651dff;
  background-color: rgba(0, 0, 0, 0);
}
.ovui-radio-item--stroke:hover::after {
  z-index: 1;
  border-radius: 8px;
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border: 1px solid #651dff;
}
.ovui-radio-item--stroke:focus,
.ovui-radio-item--stroke.ovui-radio-item--checked {
  color: #651dff;
  background-color: rgba(0, 0, 0, 0);
}
.ovui-radio-item--stroke:focus::after,
.ovui-radio-item--stroke.ovui-radio-item--checked::after {
  z-index: 3;
  border-radius: 8px;
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border: 1px solid #651dff;
}
.ovui-radio-item--stroke:active {
  color: rgba(101, 29, 255, 0.75);
  background-color: rgba(0, 0, 0, 0);
}
.ovui-radio-item--stroke:active::after {
  z-index: 1;
  border-radius: 8px;
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border: 1px solid rgba(101, 29, 255, 0.75);
}
.ovui-radio-item--stroke.ovui-radio-item--disabled,
.ovui-radio-item--stroke.ovui-radio-item--disabled:hover,
.ovui-radio-item--stroke.ovui-radio-item--disabled:focus,
.ovui-radio-item--stroke.ovui-radio-item--disabled:active {
  color: rgba(255, 255, 255, 0.5);
  background-color: #302842;
  cursor: not-allowed;
}
.ovui-radio-item--stroke.ovui-radio-item--disabled::after,
.ovui-radio-item--stroke.ovui-radio-item--disabled:hover::after,
.ovui-radio-item--stroke.ovui-radio-item--disabled:focus::after,
.ovui-radio-item--stroke.ovui-radio-item--disabled:active::after {
  z-index: inherit;
  border-radius: 8px;
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border: 1px solid #dfe0e2;
}
.ovui-radio-item--stroke.ovui-radio-item--disabled.ovui-radio-item--checked {
  color: rgba(101, 29, 255, 0.34);
  background-color: rgba(0, 0, 0, 0);
}
.ovui-radio-item--stroke.ovui-radio-item--disabled.ovui-radio-item--checked::after {
  z-index: 3;
  border-radius: 8px;
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border: 1px solid rgba(101, 29, 255, 0.34);
}
.ovui-radio-item--fill {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.5);
}
.ovui-radio-item--fill:hover {
  background-color: transparent;
  color: #ffffff;
}
.ovui-radio-item--fill:active {
  background-color: transparent;
  color: #ffffff;
}
.ovui-radio-item--fill:focus,
.ovui-radio-item--fill.ovui-radio-item--checked {
  background-color: #4b445b;
  color: #ffffff;
}
.ovui-radio-item--fill:focus::after,
.ovui-radio-item--fill.ovui-radio-item--checked::after {
  z-index: 3;
  border-radius: 8px;
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border: 1px solid transparent;
}
.ovui-radio-item--fill.ovui-radio-item--disabled {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.5);
  cursor: not-allowed;
}
.ovui-radio-item--fill.ovui-radio-item--disabled.ovui-radio-item--checked {
  color: rgba(255, 255, 255, 0.25);
  background-color: #4b445b;
}
.ovui-radio-item--fill.ovui-radio-item--disabled.ovui-radio-item--checked::after {
  z-index: 3;
  border-radius: 8px;
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border: 1px solid transparent;
}
.ovui-radio-item--divider-initial + .ovui-radio-item--divider-initial::before {
  content: " ";
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 16px;
  margin-top: -8px;
  background-color: #dfe0e2;
}
.ovui-radio-item--xs {
  font-size: 12px;
  line-height: 20px;
  padding: 2px 16px;
}
.ovui-radio-item--sm {
  font-size: 12px;
  line-height: 20px;
  padding: 4px 16px;
}
.ovui-radio-item--md {
  font-size: 14px;
  line-height: 22px;
  padding: 5px 16px;
}
.ovui-radio-item--lg {
  font-size: 14px;
  line-height: 22px;
  padding: 9px 16px;
}
.ovui-radio-item--xl {
  font-size: 16px;
  line-height: 24px;
  padding: 15px 16px;
}
.ovui-radio {
  display: inline-flex;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  cursor: pointer;
}
.ovui-radio__wrapper {
  position: relative;
  display: inline-block;
}
.ovui-radio__input {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
}
.ovui-radio .ovui-radio__inner {
  display: block;
  position: relative;
  background-color: transparent;
  border: 1px solid #ffffff;
  border-radius: 50%;
  transition: all 0.1s ease-in-out;
}
.ovui-radio .ovui-radio__inner:hover {
  background-color: transparent;
  border-color: #ffffff;
}
.ovui-radio .ovui-radio__label {
  word-break: break-all;
  color: #ffffff;
}
.ovui-radio .ovui-radio__label:hover {
  color: #ffffff;
}
.ovui-radio .ovui-radio__label:active {
  color: #ffffff;
}
.ovui-radio.ovui-radio--checked .ovui-radio__inner,
.ovui-radio.ovui-radio--checked .ovui-radio__inner:hover {
  background-color: #ffffff;
  border-color: #ffffff;
}
.ovui-radio.ovui-radio--checked .ovui-radio__inner::after {
  content: "";
  position: absolute;
  background-color: #302842;
  border-radius: 100%;
  width: 6px;
  height: 6px;
  top: 50%;
  left: 50%;
  margin-top: -3px;
  margin-left: -3px;
}
.ovui-radio.ovui-radio--checked .ovui-radio__label {
  color: #ffffff;
}
.ovui-radio.ovui-radio--checked .ovui-radio__label:hover {
  color: #ffffff;
}
.ovui-radio.ovui-radio--checked .ovui-radio__label:active {
  color: #ffffff;
}
.ovui-radio.ovui-radio--disabled,
.ovui-radio.ovui-radio--disabled:hover {
  cursor: not-allowed;
  color: #d5d6d9;
}
.ovui-radio.ovui-radio--disabled .ovui-radio__inner,
.ovui-radio.ovui-radio--disabled:hover .ovui-radio__inner {
  border-color: rgba(255, 255, 255, 0.75);
  background-color: transparent;
}
.ovui-radio.ovui-radio--disabled .ovui-radio__label,
.ovui-radio.ovui-radio--disabled .ovui-radio__label:hover,
.ovui-radio.ovui-radio--disabled .ovui-radio__label:active {
  color: #d5d6d9;
}
.ovui-radio.ovui-radio--disabled.ovui-radio--checked .ovui-radio__inner {
  border-color: rgba(0, 0, 0, 0);
  background-color: rgba(255, 255, 255, 0.5);
}
.ovui-radio.ovui-radio--disabled.ovui-radio--checked .ovui-radio__inner::after {
  background-color: #302842;
}
.ovui-radio.ovui-radio--disabled.ovui-radio--checked .ovui-radio__label,
.ovui-radio.ovui-radio--disabled.ovui-radio--checked .ovui-radio__label:hover,
.ovui-radio.ovui-radio--disabled.ovui-radio--checked .ovui-radio__label:active {
  color: #d5d6d9;
}
.ovui-radio--xl {
  font-size: 14px;
  line-height: 22px;
}
.ovui-radio--xl .ovui-radio__wrapper {
  margin: 1px 0;
}
.ovui-radio--xl .ovui-radio__inner {
  width: 20px;
  height: 20px;
}
.ovui-radio--xl .ovui-radio__label {
  margin: 0 8px;
}
.ovui-radio--lg {
  font-size: 14px;
  line-height: 22px;
}
.ovui-radio--lg .ovui-radio__wrapper {
  margin: 1px 0;
}
.ovui-radio--lg .ovui-radio__inner {
  width: 20px;
  height: 20px;
}
.ovui-radio--lg .ovui-radio__label {
  margin: 0 8px;
}
.ovui-radio--md {
  font-size: 14px;
  line-height: 22px;
}
.ovui-radio--md .ovui-radio__wrapper {
  margin: 3px 0;
}
.ovui-radio--md .ovui-radio__inner {
  width: 16px;
  height: 16px;
}
.ovui-radio--md .ovui-radio__label {
  margin: 0 8px;
}
.ovui-radio--sm {
  font-size: 12px;
  line-height: 20px;
}
.ovui-radio--sm .ovui-radio__wrapper {
  margin: 3px 0;
}
.ovui-radio--sm .ovui-radio__inner {
  width: 14px;
  height: 14px;
}
.ovui-radio--sm .ovui-radio__label {
  margin: 0 8px;
}
.ovui-radio--xs {
  font-size: 12px;
  line-height: 20px;
}
.ovui-radio--xs .ovui-radio__wrapper {
  margin: 4px 0;
}
.ovui-radio--xs .ovui-radio__inner {
  width: 12px;
  height: 12px;
}
.ovui-radio--xs .ovui-radio__label {
  margin: 0 8px;
}
.ovui-radio + .ovui-radio {
  margin-left: 32px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.ovui-collapse-item {
  overflow: hidden;
}
.ovui-collapse-item--border {
  border: 1px solid #dfe0e2;
  border-top: none;
}
.ovui-collapse-item--disabled {
  cursor: not-allowed;
}
.ovui-collapse-item--disabled .ovui-collapse-item__header,
.ovui-collapse-item--disabled .ovui-collapse-item__icon-wrapper {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.25);
}
.ovui-collapse-item__icon-wrapper {
  display: inline-flex;
  align-items: center;
  transition: transform 0.2s;
  color: rgba(255, 255, 255, 0.5);
}
.ovui-collapse-item__icon-wrapper--start {
  margin-right: 16px;
}
.ovui-collapse-item__icon-wrapper--end {
  margin-left: 16px;
}
.ovui-collapse-item__icon {
  transform: rotate(90deg);
}
.ovui-collapse-item__icon--open {
  transform: rotate(-90deg);
}
.ovui-collapse-item__body {
  color: #ffffff;
  padding: 16px 32px;
  font-size: 14px;
  line-height: 22px;
  word-break: break-all;
}
.ovui-collapse-item__body--border {
  border-top: 1px solid #dfe0e2;
}
.ovui-collapse-item__header {
  position: relative;
  display: flex;
  align-self: stretch;
  align-items: center;
  cursor: pointer;
  padding: 12px 16px;
  color: #ffffff;
  line-height: 22px;
  font-size: 14px;
  font-weight: 500;
  background: #302842;
}
.ovui-collapse-item__header .ovui-collapse-item__title {
  flex: 1;
  overflow: hidden;
}
.ovui-collapse-item--rtl {
  direction: rtl;
}
.ovui-collapse-item--rtl .ovui-collapse-item__icon-wrapper--start {
  margin-right: 0;
  margin-left: 16px;
}
.ovui-collapse-item--rtl .ovui-collapse-item__icon-wrapper--end {
  margin-left: 0;
  margin-right: 16px;
}
.ovui-collapse {
  position: relative;
}
.ovui-collapse-item:first-of-type {
  border-radius: 8px 8px 0 0;
}
.ovui-collapse-item:last-of-type {
  border-radius: 0 0 8px 8px;
}
.ovui-collapse-item--border:first-of-type {
  border-top: 1px solid #dfe0e2;
}
.ovui-collapse-item--border:last-of-type {
  border-bottom: 1px solid #dfe0e2;
}
.ovui-collapse--rtl {
  direction: rtl;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.ovui-count-down {
  display: flex;
  flex-direction: column;
}
.ovui-count-down__title {
  font-size: 12px;
}
.ovui-count-down__time {
  font-size: 30px;
  font-weight: 600;
  line-height: 44px;
  margin-top: 3px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.ovui-statistic {
  display: flex;
  flex-direction: column;
}
.ovui-statistic__title {
  color: #323335;
  font-size: 12px;
  line-height: 20px;
}
.ovui-statistic__content {
  display: flex;
  padding-top: 4px;
  padding-bottom: 12px;
  font-size: 30px;
  line-height: 44px;
}
.ovui-statistic__suffix {
  margin-left: 4px;
}
.ovui-statistic__prefix {
  margin-right: 4px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.ovui-date {
  display: inline-flex;
  flex-direction: column;
  min-width: 288px;
}
.ovui-date--box {
  position: relative;
}
.ovui-date__mask {
  position: absolute;
  z-index: 100;
  display: none;
  background: rgba(51, 51, 51, 0.05);
  border: 1px solid #c1c1c1;
  pointer-events: none;
}
.ovui-date__header {
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  background-color: #3c344d;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 22px;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.ovui-date__header-label {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}
.ovui-date__header-btn {
  cursor: pointer;
  margin: 0 2px;
}
.ovui-date__header-btn:hover {
  color: #ffffff;
}
.ovui-date__header-btn:active {
  color: #ffffff;
}
.ovui-date__header-btn-not-click {
  cursor: unset;
}
.ovui-date__header-btn-not-click:hover {
  color: #ffffff;
}
.ovui-date__header-next-icon,
.ovui-date__header-prev-icon {
  -moz-user-select: none;
       user-select: none;
  color: #ffffff;
  cursor: pointer;
  font-size: 16px;
}
.ovui-date__header-next-icon:hover,
.ovui-date__header-prev-icon:hover {
  color: #651dff;
}
.ovui-date__header-next-icon:active,
.ovui-date__header-prev-icon:active {
  color: rgba(101, 29, 255, 0.75);
}
.ovui-date__header-next-icon--hidden,
.ovui-date__header-prev-icon--hidden {
  visibility: hidden;
}
.ovui-date__header-prev-month {
  margin-left: 8px;
}
.ovui-date__header-prev-month-disabled {
  color: #ebebed;
  cursor: not-allowed;
}
.ovui-date__header-prev-month-disabled:hover {
  color: #ebebed;
}
.ovui-date__header-next-month {
  margin-right: 8px;
}
.ovui-date__body {
  display: flex;
}
.ovui-date__table {
  border: none;
  border-spacing: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 288px;
  height: 240px;
  padding: 16px 16px;
}
.ovui-date__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  font-size: 14px;
  line-height: 22px;
  color: #ffffff;
  flex: 1;
}
.ovui-date__row {
  flex: 1;
  display: flex;
}
.ovui-date__cell {
  position: relative;
  display: inline-flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  line-height: 22px;
}
.ovui-date__cell-inner {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.25);
  border-radius: 24px;
  border: 1px solid transparent;
  background: #302842;
  cursor: pointer;
  z-index: 1;
}
.ovui-date--has-week .ovui-date__week {
  margin: -8px 0;
  padding-top: 44px;
  border-right: 1px solid #ebebed;
  width: 49px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ovui-date--has-week .ovui-date__week-cell {
  position: relative;
  padding: 4px 6px;
  font-size: 14px;
  line-height: 22px;
}
.ovui-date--has-week .ovui-date__week-cell-inner {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  cursor: pointer;
  border: 1px solid transparent;
  background: #302842;
  border-radius: 24px 24px;
}
.ovui-date--has-week .ovui-date__week-cell--week-hover .ovui-date__week-cell-inner {
  background-color: #261d38;
}
.ovui-date--has-week .ovui-date__week-cell--selected .ovui-date__week-cell-inner {
  background-color: #651dff;
  color: rgba(0, 0, 0, 0);
}
.ovui-date--has-week .ovui-date__body {
  padding-left: 0;
}
.ovui-date--has-week .ovui-date__cell--week-hover.ovui-date__cell--inview::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 24px;
  background-color: #391e6f;
}
.ovui-date--has-week .ovui-date__cell--week-hover.ovui-date__cell--inview .ovui-date__cell-inner,
.ovui-date--has-week .ovui-date__cell--week-hover.ovui-date__cell--inview .ovui-date__cell-inner:hover {
  background: #391e6f;
  color: #ffffff;
  border: 1px solid transparent;
}
.ovui-date--has-week .ovui-date__cell--selected::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 24px;
  background-color: #651dff;
}
.ovui-date .ovui-date__cell .ovui-date__cell-inner:hover {
  background-color: #261d38;
}
.ovui-date .ovui-date__cell--inview .ovui-date__cell-inner {
  color: #ffffff;
  background: #302842;
  border: 1px solid transparent;
}
.ovui-date .ovui-date__cell--inview .ovui-date__cell-inner:hover {
  background-color: #261d38;
  color: #ffffff;
  border: 1px solid transparent;
}
.ovui-date .ovui-date__cell--inview .ovui-date__cell-inner:active {
  background-color: #651dff;
  color: #ffffff;
  border: 1px solid transparent;
}
.ovui-date .ovui-date__cell--now .ovui-date__cell-inner {
  color: #ffffff;
  border: 1px solid #651dff;
  background: #302842;
}
.ovui-date .ovui-date__cell--now .ovui-date__cell-inner:hover {
  color: #ffffff;
  border: 1px solid #7433ff;
  background: #302842;
}
.ovui-date .ovui-date__cell--now .ovui-date__cell-inner:active {
  color: #ffffff;
  border: 1px solid #651dff;
  background: #651dff;
}
.ovui-date .ovui-date__cell--selected .ovui-date__cell-inner {
  background: #651dff;
  color: #ffffff;
  border: 1px solid transparent;
}
.ovui-date .ovui-date__cell--selected .ovui-date__cell-inner:hover {
  color: #ffffff;
  background-color: #7433ff;
  border: 1px solid transparent;
}
.ovui-date .ovui-date__cell--selected .ovui-date__cell-inner:active {
  color: #ffffff;
  background-color: rgba(101, 29, 255, 0.75);
  border: 1px solid transparent;
}
.ovui-date .ovui-date__cell--disabled .ovui-date__cell-inner {
  cursor: not-allowed;
}
.ovui-date .ovui-date__cell--disabled .ovui-date__cell-inner,
.ovui-date .ovui-date__cell--disabled .ovui-date__cell-inner:hover,
.ovui-date .ovui-date__cell--disabled .ovui-date__cell-inner:active {
  background-color: #302842;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.25);
}
.ovui-date .ovui-date__cell--disabled.ovui-date__cell--range:not(.ovui-date__cell--selected) .ovui-date__cell-inner,
.ovui-date .ovui-date__cell--disabled.ovui-date__cell--range:not(.ovui-date__cell--selected) .ovui-date__cell-inner:hover,
.ovui-date .ovui-date__cell--disabled.ovui-date__cell--range:not(.ovui-date__cell--selected) .ovui-date__cell-inner:active {
  background: #302842;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.5);
}
.ovui-date .ovui-date__cell--disabled.ovui-date__cell--selected .ovui-date__cell-inner,
.ovui-date .ovui-date__cell--disabled.ovui-date__cell--selected .ovui-date__cell-inner:hover,
.ovui-date .ovui-date__cell--disabled.ovui-date__cell--selected .ovui-date__cell-inner:active {
  background: rgba(101, 29, 255, 0.34);
  border: 1px solid transparent;
  color: #ffffff;
}
.ovui-date .ovui-date__cell--disabled.ovui-date__cell--now .ovui-date__cell-inner,
.ovui-date .ovui-date__cell--disabled.ovui-date__cell--now .ovui-date__cell-inner:hover,
.ovui-date .ovui-date__cell--disabled.ovui-date__cell--now .ovui-date__cell-inner:active {
  background: #302842;
  border: 1px solid rgba(101, 29, 255, 0.34);
  color: rgba(255, 255, 255, 0.5);
}
.ovui-date .ovui-date__cell--range::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 24px;
  background-color: #391e6f;
}
.ovui-date .ovui-date__cell--range:not(.ovui-date__cell--selected) .ovui-date__cell-inner {
  color: #ffffff;
  background: #391e6f;
  border: 1px solid transparent;
}
.ovui-date .ovui-date__cell--range:not(.ovui-date__cell--selected) .ovui-date__cell-inner:hover {
  background-color: #381088;
  color: #ffffff;
  border: 1px solid transparent;
}
.ovui-date .ovui-date__cell--range:not(.ovui-date__cell--selected) .ovui-date__cell-inner:active {
  background-color: #651dff;
  color: #ffffff;
  border: 1px solid transparent;
}
.ovui-date .ovui-date__cell--range-hover::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 24px;
  background-color: #391e6f;
}
.ovui-date .ovui-date__cell--range-hover:not(.ovui-date__cell--selected) .ovui-date__cell-inner {
  color: #ffffff;
  background: #391e6f;
  border: 1px solid transparent;
}
.ovui-date .ovui-date__cell--range-hover:not(.ovui-date__cell--selected) .ovui-date__cell-inner:hover {
  background-color: #381088;
  color: #ffffff;
  border: 1px solid transparent;
}
.ovui-date .ovui-date__cell--range-hover:not(.ovui-date__cell--selected) .ovui-date__cell-inner:active {
  background-color: #651dff;
  color: #ffffff;
  border: 1px solid transparent;
}
.ovui-date .ovui-date__cell--hover::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 24px;
  background: #391e6f;
}
.ovui-date .ovui-date__cell--hover:not(.ovui-date__cell--selected) .ovui-date__cell-inner:hover {
  background-color: transparent;
}
.ovui-date .ovui-date__cell--hover:not(.ovui-date__cell--selected) .ovui-date__cell-inner {
  background-color: #391e6f;
  color: #ffffff;
  border: transparent;
}
.ovui-date .ovui-date__cell--before-left-after-right::before {
  left: 6px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-date .ovui-date__cell--before-left-after-right::after {
  left: 0;
  right: 6px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-date .ovui-date__cell--left .ovui-date__cell-inner {
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-date .ovui-date__cell--left::before {
  left: 6px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-date .ovui-date__cell--left::after {
  left: 6px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-date .ovui-date__cell--before-right-after-left::before {
  right: 6px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-date .ovui-date__cell--before-right-after-left::after {
  right: 0;
  left: 6px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-date .ovui-date__cell--right .ovui-date__cell-inner {
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-date .ovui-date__cell--right::before {
  right: 6px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-date .ovui-date__cell--right::after {
  right: 6px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-date--rtl {
  direction: rtl;
}
.ovui-date--rtl .ovui-date__cell::before,
.ovui-date--rtl .ovui-date__cell::after {
  left: 0;
  right: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
}
.ovui-date--rtl .ovui-date__cell--hover::after {
  left: 0;
  right: 2px;
}
.ovui-date--rtl .ovui-date__cell--before-left-after-right::before {
  right: 6px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-date--rtl .ovui-date__cell--before-left-after-right::after {
  right: 0;
  left: 6px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-date--rtl .ovui-date__cell--left::before {
  right: 6px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-date--rtl .ovui-date__cell--left::after {
  right: 6px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-date--rtl .ovui-date__cell--before-right-after-left::before {
  left: 6px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-date--rtl .ovui-date__cell--before-right-after-left::after {
  left: 0;
  right: 6px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-date--rtl .ovui-date__cell--right::before {
  left: 6px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-date--rtl .ovui-date__cell--right::after {
  left: 6px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-date--rtl.ovui-date--has-week .ovui-date__week {
  border-right: 0;
  border-left: 1px solid #ebebed;
  margin-right: 0;
  margin-left: 6px;
}
.ovui-date--rtl.ovui-date--has-week .ovui-date__body {
  padding-right: 0;
}
.ovui-time {
  display: inline-flex;
  flex: 1;
  flex-direction: column;
}
.ovui-time:not(:first-child) {
  border-left: 1px solid #ebebed;
}
.ovui-time__header {
  background-color: #302842;
  color: #ffffff;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  height: 39px;
}
.ovui-time__body {
  display: flex;
  position: relative;
}
.ovui-time__column {
  flex: 1;
  position: relative;
  display: block;
  width: 67px;
  max-height: 244px;
  overflow-y: auto;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: #ffffff;
  background: #302842;
  cursor: pointer;
}
.ovui-time__column::-webkit-scrollbar-track-piece {
  background-color: transparent;
}
.ovui-time__column::-webkit-scrollbar {
  width: 6px;
  height: 9px;
}
.ovui-time__column::-webkit-scrollbar-thumb {
  background-color: #ebebed;
  border-radius: 3px;
  background-clip: padding-box;
  min-height: 28px;
}
.ovui-time__column::-webkit-scrollbar-thumb:hover {
  background-color: #dfe0e2;
}
.ovui-time__column::after {
  content: "";
  display: block;
  height: calc(100% - 30px);
  width: 100%;
}
.ovui-time__column:not(:first-child) {
  border-left: 1px solid #ebebed;
}
.ovui-time__option {
  position: relative;
  display: block;
  padding: 4px 0;
  margin: 0;
  text-align: center;
}
.ovui-time__option:hover {
  background-color: #3c344d;
  color: #ffffff;
}
.ovui-time__option:active {
  background-color: #1a112e;
  color: #651dff;
}
.ovui-time__option--selected {
  color: #651dff;
  background: #302842;
}
.ovui-time__option--selected:hover {
  color: #651dff;
  background: #261d38;
}
.ovui-time__option--selected:active {
  color: #651dff;
  background: #1a112e;
}
.ovui-time__option--selected::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 32px;
  margin-top: -16px;
}
.ovui-time__option:first-child.ovui-time__option--selected::after {
  border-top: none;
}
.ovui-time__option--disabled {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.25);
  background: #302842;
}
.ovui-time__option--disabled,
.ovui-time__option--disabled:hover,
.ovui-time__option--disabled:active {
  background: #302842;
  color: rgba(255, 255, 255, 0.25);
}
.ovui-time__option--disabled.ovui-time__option--selected {
  color: rgba(101, 29, 255, 0.34);
  background: #302842;
}
.ovui-time__option--disabled.ovui-time__option--selected,
.ovui-time__option--disabled.ovui-time__option--selected:hover,
.ovui-time__option--disabled.ovui-time__option--selected:active {
  color: rgba(101, 29, 255, 0.34);
  background: #302842;
}
.ovui-time--rtl:not(:first-child) {
  border-left: none;
  border-right: 1px solid #ebebed;
}
.ovui-time--rtl .ovui-time__column:not(:first-child) {
  border-left: none;
  border-right: 1px solid #ebebed;
}
.ovui-month {
  display: inline-flex;
  flex-direction: column;
}
.ovui-month__header {
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  background-color: #3c344d;
  padding: 8px 16px;
  font-size: 14px;
  line-height: 22px;
  color: #ffffff;
  border-bottom: 1px solid #ebebed;
}
.ovui-month__header-label {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}
.ovui-month__header-next-icon,
.ovui-month__header-prev-icon {
  -moz-user-select: none;
       user-select: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.ovui-month__header-next-icon:hover,
.ovui-month__header-prev-icon:hover {
  color: #651dff;
}
.ovui-month__body {
  padding: 16px 16px;
  display: flex;
  width: 288px;
  height: 240px;
}
.ovui-month__table {
  border: none;
  border-spacing: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.ovui-month__row {
  flex: 1;
  display: flex;
}
.ovui-month__cell {
  position: relative;
  display: inline-flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  line-height: 22px;
}
.ovui-month__cell-inner {
  width: 48px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.25);
  border-radius: 24px;
  cursor: pointer;
  z-index: 1;
}
.ovui-month .ovui-month__cell .ovui-month__cell-inner:hover {
  background-color: #261d38;
}
.ovui-month .ovui-month__cell--inview .ovui-month__cell-inner {
  color: #ffffff;
  background: #302842;
  border: 1px solid transparent;
}
.ovui-month .ovui-month__cell--inview .ovui-month__cell-inner:hover {
  background-color: #261d38;
  color: #ffffff;
  border: 1px solid transparent;
}
.ovui-month .ovui-month__cell--inview .ovui-month__cell-inner:active {
  background-color: #651dff;
  color: #ffffff;
  border: 1px solid transparent;
}
.ovui-month .ovui-month__cell--now .ovui-month__cell-inner {
  color: #ffffff;
  border: 1px solid #651dff;
  background: #302842;
}
.ovui-month .ovui-month__cell--now .ovui-month__cell-inner:hover {
  color: #ffffff;
  border: 1px solid #7433ff;
  background: #302842;
}
.ovui-month .ovui-month__cell--now .ovui-month__cell-inner:active {
  color: #ffffff;
  border: 1px solid #651dff;
  background: #651dff;
}
.ovui-month .ovui-month__cell--selected .ovui-month__cell-inner {
  background: #651dff;
  color: #ffffff;
  border: 1px solid transparent;
}
.ovui-month .ovui-month__cell--selected .ovui-month__cell-inner:hover {
  color: #ffffff;
  background-color: #7433ff;
  border: 1px solid transparent;
}
.ovui-month .ovui-month__cell--selected .ovui-month__cell-inner:active {
  color: #ffffff;
  background-color: rgba(101, 29, 255, 0.75);
  border: 1px solid transparent;
}
.ovui-month .ovui-month__cell--disabled .ovui-month__cell-inner {
  cursor: not-allowed;
}
.ovui-month .ovui-month__cell--disabled .ovui-month__cell-inner,
.ovui-month .ovui-month__cell--disabled .ovui-month__cell-inner:hover,
.ovui-month .ovui-month__cell--disabled .ovui-month__cell-inner:active {
  background-color: #302842;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.25);
}
.ovui-month .ovui-month__cell--disabled.ovui-month__cell--range:not(.ovui-month__cell--selected) .ovui-month__cell-inner,
.ovui-month .ovui-month__cell--disabled.ovui-month__cell--range:not(.ovui-month__cell--selected) .ovui-month__cell-inner:hover,
.ovui-month .ovui-month__cell--disabled.ovui-month__cell--range:not(.ovui-month__cell--selected) .ovui-month__cell-inner:active {
  background: #302842;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.5);
}
.ovui-month .ovui-month__cell--disabled.ovui-month__cell--selected .ovui-month__cell-inner,
.ovui-month .ovui-month__cell--disabled.ovui-month__cell--selected .ovui-month__cell-inner:hover,
.ovui-month .ovui-month__cell--disabled.ovui-month__cell--selected .ovui-month__cell-inner:active {
  background: rgba(101, 29, 255, 0.34);
  border: 1px solid transparent;
  color: #ffffff;
}
.ovui-month .ovui-month__cell--disabled.ovui-month__cell--now .ovui-month__cell-inner,
.ovui-month .ovui-month__cell--disabled.ovui-month__cell--now .ovui-month__cell-inner:hover,
.ovui-month .ovui-month__cell--disabled.ovui-month__cell--now .ovui-month__cell-inner:active {
  background: #302842;
  border: 1px solid rgba(101, 29, 255, 0.34);
  color: rgba(255, 255, 255, 0.5);
}
.ovui-month .ovui-month__cell--range::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 24px;
  background-color: #391e6f;
}
.ovui-month .ovui-month__cell--range:not(.ovui-month__cell--selected) .ovui-month__cell-inner {
  color: #ffffff;
  background: #391e6f;
  border: 1px solid transparent;
}
.ovui-month .ovui-month__cell--range:not(.ovui-month__cell--selected) .ovui-month__cell-inner:hover {
  background-color: #381088;
  color: #ffffff;
  border: 1px solid transparent;
}
.ovui-month .ovui-month__cell--range:not(.ovui-month__cell--selected) .ovui-month__cell-inner:active {
  background-color: #651dff;
  color: #ffffff;
  border: 1px solid transparent;
}
.ovui-month .ovui-month__cell--range-hover::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 24px;
  background-color: #391e6f;
}
.ovui-month .ovui-month__cell--range-hover:not(.ovui-month__cell--selected) .ovui-month__cell-inner {
  color: #ffffff;
  background: #391e6f;
  border: 1px solid transparent;
}
.ovui-month .ovui-month__cell--range-hover:not(.ovui-month__cell--selected) .ovui-month__cell-inner:hover {
  background-color: #381088;
  color: #ffffff;
  border: 1px solid transparent;
}
.ovui-month .ovui-month__cell--range-hover:not(.ovui-month__cell--selected) .ovui-month__cell-inner:active {
  background-color: #651dff;
  color: #ffffff;
  border: 1px solid transparent;
}
.ovui-month .ovui-month__cell--hover::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 24px;
  background: #391e6f;
}
.ovui-month .ovui-month__cell--hover:not(.ovui-month__cell--selected) .ovui-month__cell-inner:hover {
  background-color: transparent;
}
.ovui-month .ovui-month__cell--hover:not(.ovui-month__cell--selected) .ovui-month__cell-inner {
  background-color: #391e6f;
  color: #ffffff;
  border: transparent;
}
.ovui-month .ovui-month__cell--before-left-after-right::before {
  left: 20px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-month .ovui-month__cell--before-left-after-right::after {
  left: 0;
  right: 20px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-month .ovui-month__cell--left .ovui-month__cell-inner {
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-month .ovui-month__cell--left::before {
  left: 20px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-month .ovui-month__cell--left::after {
  left: 20px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-month .ovui-month__cell--before-right-after-left::before {
  right: 20px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-month .ovui-month__cell--before-right-after-left::after {
  right: 0;
  left: 20px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-month .ovui-month__cell--right .ovui-month__cell-inner {
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-month .ovui-month__cell--right::before {
  right: 20px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-month .ovui-month__cell--right::after {
  right: 20px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-month--rtl .ovui-month__cell::before,
.ovui-month--rtl .ovui-month__cell::after {
  left: 0;
  right: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
}
.ovui-month--rtl .ovui-month__cell--hover::after {
  left: 0;
  right: 2px;
}
.ovui-month--rtl .ovui-month__cell--before-left-after-right::before {
  right: 20px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-month--rtl .ovui-month__cell--before-left-after-right::after {
  right: 0;
  left: 20px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-month--rtl .ovui-month__cell--left::before {
  right: 20px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-month--rtl .ovui-month__cell--left::after {
  right: 20px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-month--rtl .ovui-month__cell--before-right-after-left::before {
  left: 20px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-month--rtl .ovui-month__cell--before-right-after-left::after {
  left: 0;
  right: 20px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-month--rtl .ovui-month__cell--right::before {
  left: 20px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-month--rtl .ovui-month__cell--right::after {
  left: 20px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-year {
  display: inline-flex;
  flex-direction: column;
}
.ovui-year__header {
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  background-color: #3c344d;
  padding: 8px 16px;
  font-size: 14px;
  line-height: 22px;
  color: 14px;
  border-bottom: 1px solid #ebebed;
}
.ovui-year__header-label {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}
.ovui-year__header-next-icon,
.ovui-year__header-prev-icon {
  -moz-user-select: none;
       user-select: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.ovui-year__header-next-icon:hover,
.ovui-year__header-prev-icon:hover {
  color: #651dff;
}
.ovui-year__body {
  padding: 16px 16px;
  display: flex;
  width: 288px;
  height: 240px;
}
.ovui-year__table {
  border: none;
  border-spacing: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.ovui-year__row {
  flex: 1;
  display: flex;
}
.ovui-year__cell {
  position: relative;
  display: inline-flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  line-height: 22px;
}
.ovui-year__cell-inner {
  width: 48px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.25);
  border-radius: 24px;
  cursor: pointer;
  z-index: 1;
}
.ovui-year .ovui-year__cell .ovui-year__cell-inner:hover {
  background-color: #261d38;
}
.ovui-year .ovui-year__cell--inview .ovui-year__cell-inner {
  color: #ffffff;
  background: #302842;
  border: 1px solid transparent;
}
.ovui-year .ovui-year__cell--inview .ovui-year__cell-inner:hover {
  background-color: #261d38;
  color: #ffffff;
  border: 1px solid transparent;
}
.ovui-year .ovui-year__cell--inview .ovui-year__cell-inner:active {
  background-color: #651dff;
  color: #ffffff;
  border: 1px solid transparent;
}
.ovui-year .ovui-year__cell--now .ovui-year__cell-inner {
  color: #ffffff;
  border: 1px solid #651dff;
  background: #302842;
}
.ovui-year .ovui-year__cell--now .ovui-year__cell-inner:hover {
  color: #ffffff;
  border: 1px solid #7433ff;
  background: #302842;
}
.ovui-year .ovui-year__cell--now .ovui-year__cell-inner:active {
  color: #ffffff;
  border: 1px solid #651dff;
  background: #651dff;
}
.ovui-year .ovui-year__cell--selected .ovui-year__cell-inner {
  background: #651dff;
  color: #ffffff;
  border: 1px solid transparent;
}
.ovui-year .ovui-year__cell--selected .ovui-year__cell-inner:hover {
  color: #ffffff;
  background-color: #7433ff;
  border: 1px solid transparent;
}
.ovui-year .ovui-year__cell--selected .ovui-year__cell-inner:active {
  color: #ffffff;
  background-color: rgba(101, 29, 255, 0.75);
  border: 1px solid transparent;
}
.ovui-year .ovui-year__cell--disabled .ovui-year__cell-inner {
  cursor: not-allowed;
}
.ovui-year .ovui-year__cell--disabled .ovui-year__cell-inner,
.ovui-year .ovui-year__cell--disabled .ovui-year__cell-inner:hover,
.ovui-year .ovui-year__cell--disabled .ovui-year__cell-inner:active {
  background-color: #302842;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.25);
}
.ovui-year .ovui-year__cell--disabled.ovui-year__cell--range:not(.ovui-year__cell--selected) .ovui-year__cell-inner,
.ovui-year .ovui-year__cell--disabled.ovui-year__cell--range:not(.ovui-year__cell--selected) .ovui-year__cell-inner:hover,
.ovui-year .ovui-year__cell--disabled.ovui-year__cell--range:not(.ovui-year__cell--selected) .ovui-year__cell-inner:active {
  background: #302842;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.5);
}
.ovui-year .ovui-year__cell--disabled.ovui-year__cell--selected .ovui-year__cell-inner,
.ovui-year .ovui-year__cell--disabled.ovui-year__cell--selected .ovui-year__cell-inner:hover,
.ovui-year .ovui-year__cell--disabled.ovui-year__cell--selected .ovui-year__cell-inner:active {
  background: rgba(101, 29, 255, 0.34);
  border: 1px solid transparent;
  color: #ffffff;
}
.ovui-year .ovui-year__cell--disabled.ovui-year__cell--now .ovui-year__cell-inner,
.ovui-year .ovui-year__cell--disabled.ovui-year__cell--now .ovui-year__cell-inner:hover,
.ovui-year .ovui-year__cell--disabled.ovui-year__cell--now .ovui-year__cell-inner:active {
  background: #302842;
  border: 1px solid rgba(101, 29, 255, 0.34);
  color: rgba(255, 255, 255, 0.5);
}
.ovui-year .ovui-year__cell--range::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 24px;
  background-color: #391e6f;
}
.ovui-year .ovui-year__cell--range:not(.ovui-year__cell--selected) .ovui-year__cell-inner {
  color: #ffffff;
  background: #391e6f;
  border: 1px solid transparent;
}
.ovui-year .ovui-year__cell--range:not(.ovui-year__cell--selected) .ovui-year__cell-inner:hover {
  background-color: #381088;
  color: #ffffff;
  border: 1px solid transparent;
}
.ovui-year .ovui-year__cell--range:not(.ovui-year__cell--selected) .ovui-year__cell-inner:active {
  background-color: #651dff;
  color: #ffffff;
  border: 1px solid transparent;
}
.ovui-year .ovui-year__cell--range-hover::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 24px;
  background-color: #391e6f;
}
.ovui-year .ovui-year__cell--range-hover:not(.ovui-year__cell--selected) .ovui-year__cell-inner {
  color: #ffffff;
  background: #391e6f;
  border: 1px solid transparent;
}
.ovui-year .ovui-year__cell--range-hover:not(.ovui-year__cell--selected) .ovui-year__cell-inner:hover {
  background-color: #381088;
  color: #ffffff;
  border: 1px solid transparent;
}
.ovui-year .ovui-year__cell--range-hover:not(.ovui-year__cell--selected) .ovui-year__cell-inner:active {
  background-color: #651dff;
  color: #ffffff;
  border: 1px solid transparent;
}
.ovui-year .ovui-year__cell--hover::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 24px;
  background: #391e6f;
}
.ovui-year .ovui-year__cell--hover:not(.ovui-year__cell--selected) .ovui-year__cell-inner:hover {
  background-color: transparent;
}
.ovui-year .ovui-year__cell--hover:not(.ovui-year__cell--selected) .ovui-year__cell-inner {
  background-color: #391e6f;
  color: #ffffff;
  border: transparent;
}
.ovui-year .ovui-year__cell--before-left-after-right::before {
  left: 22px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-year .ovui-year__cell--before-left-after-right::after {
  left: 0;
  right: 22px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-year .ovui-year__cell--left .ovui-year__cell-inner {
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-year .ovui-year__cell--left::before {
  left: 22px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-year .ovui-year__cell--left::after {
  left: 22px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-year .ovui-year__cell--before-right-after-left::before {
  right: 22px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-year .ovui-year__cell--before-right-after-left::after {
  right: 0;
  left: 22px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-year .ovui-year__cell--right .ovui-year__cell-inner {
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-year .ovui-year__cell--right::before {
  right: 22px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-year .ovui-year__cell--right::after {
  right: 22px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-year--rtl .ovui-year__cell::before,
.ovui-year--rtl .ovui-year__cell::after {
  left: 0;
  right: 0;
  border-radius: 0;
  border-left: none;
  border-right: none;
}
.ovui-year--rtl .ovui-year__cell--hover::after {
  left: 0;
  right: 2px;
}
.ovui-year--rtl .ovui-year__cell--before-left-after-right::before {
  right: 22px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-year--rtl .ovui-year__cell--before-left-after-right::after {
  right: 0;
  left: 22px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-year--rtl .ovui-year__cell--left::before {
  right: 22px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-year--rtl .ovui-year__cell--left::after {
  right: 22px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-year--rtl .ovui-year__cell--before-right-after-left::before {
  left: 22px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-year--rtl .ovui-year__cell--before-right-after-left::after {
  left: 0;
  right: 22px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-year--rtl .ovui-year__cell--right::before {
  left: 22px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-year--rtl .ovui-year__cell--right::after {
  left: 22px;
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-shortcut {
  padding: 8px 12px;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  cursor: pointer;
}
.ovui-shortcut:hover:not(.ovui-shortcut--disabled) {
  background-color: #3c344d;
  color: #ffffff;
}
.ovui-shortcut:active:not(.ovui-shortcut--disabled) {
  color: rgba(101, 29, 255, 0.75);
}
.ovui-shortcut--disabled {
  color: #d5d6d9;
  cursor: not-allowed;
}
/* Input */
/* Tag */
/* tips */
/* Select */
/* CustomInput */
/* new time panel token */
/* ocean design 2.0 desgin tokens */
.ovui-panel-date,
.ovui-panel-time,
.ovui-panel-datetime,
.ovui-panel-month,
.ovui-panel-year {
  display: flex;
  border-radius: 24px;
  overflow: hidden;
}
.ovui-panel-datetime-range {
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ovui-panel-datetime-range .ovui-time {
  min-width: 288px;
}
.ovui-panel-datetime-range__content {
  display: flex;
}
.ovui-panel-datetime-range__buttons {
  display: flex;
}
.ovui-panel-datetime-range__button {
  flex: 1;
  border-top: 1px solid #ebebed;
  display: flex;
  width: 288px;
}
.ovui-panel-datetime-range__start-date,
.ovui-panel-datetime-range__start-time,
.ovui-panel-datetime-range__end-date,
.ovui-panel-datetime-range__end-time {
  display: flex;
  flex: 1;
  width: 50%;
  cursor: pointer;
  padding: 12px 16px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  line-height: 22px;
  align-items: center;
}
.ovui-panel-datetime-range__start-date-format,
.ovui-panel-datetime-range__start-time-format,
.ovui-panel-datetime-range__end-date-format,
.ovui-panel-datetime-range__end-time-format {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ovui-panel-datetime-range__start-date:hover,
.ovui-panel-datetime-range__start-time:hover,
.ovui-panel-datetime-range__end-date:hover,
.ovui-panel-datetime-range__end-time:hover {
  color: #651dff;
}
.ovui-panel-datetime-range__start-date--selected,
.ovui-panel-datetime-range__start-time--selected,
.ovui-panel-datetime-range__end-date--selected,
.ovui-panel-datetime-range__end-time--selected {
  color: #ffffff;
  font-weight: 600;
}
.ovui-panel-datetime-range__start-date--disabled,
.ovui-panel-datetime-range__start-time--disabled,
.ovui-panel-datetime-range__end-date--disabled,
.ovui-panel-datetime-range__end-time--disabled,
.ovui-panel-datetime-range__start-date--disabled:hover,
.ovui-panel-datetime-range__start-time--disabled:hover,
.ovui-panel-datetime-range__end-date--disabled:hover,
.ovui-panel-datetime-range__end-time--disabled:hover {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.25);
}
.ovui-panel-datetime-range__calendar-icon,
.ovui-panel-datetime-range__time-icon {
  margin-right: 8px;
}
.ovui-panel-datetime-range--rtl .ovui-panel-datetime-range__calendar-icon,
.ovui-panel-datetime-range--rtl .ovui-panel-datetime-range__time-icon {
  margin-right: 0;
  margin-left: 8px;
}
.ovui-date-picker {
  display: inline-flex;
  width: 100%;
}
.ovui-date-picker--multiple {
  height: 32px;
}
.ovui-date-picker--multiple .ovui-custom-input__clear {
  position: absolute;
  right: 0;
  margin-right: 0;
}
.ovui-date-picker .ovui-date-picker__calendar-icon {
  color: rgba(255, 255, 255, 0.5);
}
.ovui-date-picker .ovui-date-picker__calendar-icon--clear {
  opacity: 0;
}
.ovui-date-picker .ovui-date-picker__multiple-input-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ovui-date-picker .ovui-date-picker__multiple-input-total .ovui-date-picker__multiple-input-total-num {
  margin-right: 24px;
  padding: 0 8px;
  border-radius: 50%;
  font-size: 12px;
  border: 1px solid transparent;
  background-color: #302842;
  color: #ffffff;
}
.ovui-date-picker__popper {
  display: none;
  box-shadow: 0px 3px 9px 0 rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  background-color: #302842;
}
.ovui-date-picker__popper--show {
  display: block;
}
.ovui-date-picker__content {
  display: flex;
  align-self: stretch;
}
.ovui-date-picker__shortcuts {
  padding: 4px 0 4px 0;
  max-width: 120px;
  overflow-y: auto;
  border-right: 1px solid #ebebed;
}
.ovui-date-picker__shortcuts::-webkit-scrollbar-track-piece {
  background-color: transparent;
}
.ovui-date-picker__shortcuts::-webkit-scrollbar {
  width: 6px;
  height: 9px;
}
.ovui-date-picker__shortcuts::-webkit-scrollbar-thumb {
  background-color: #ebebed;
  border-radius: 3px;
  background-clip: padding-box;
  min-height: 28px;
}
.ovui-date-picker__shortcuts::-webkit-scrollbar-thumb:hover {
  background-color: #dfe0e2;
}
.ovui-date-picker__shortcuts + div {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.ovui-date-picker__footer-btn {
  padding: 8px 12px;
  border-top: 1px solid #ebebed;
  text-align: right;
}
.ovui-date-picker-fade-enter-active,
.ovui-date-picker-fade-leave-active {
  transition: opacity 0.1s ease-in-out;
}
.ovui-date-picker-fade-enter-from,
.ovui-date-picker-fade-leave-to {
  opacity: 0;
}
.ovui-date-picker-fade-enter-to,
.ovui-date-picker-fade-leave-from {
  opacity: 1;
}
.ovui-date-picker__popper--rtl {
  direction: rtl;
}
.ovui-date-picker__popper--rtl .ovui-date-picker__footer-btn {
  text-align: left;
}
.ovui-date-picker__popper--rtl .ovui-date-picker__shortcuts {
  border-left: 1px solid #ebebed;
  border-right: none;
}
.ovui-panel-datetime__divider {
  width: 0;
  border-left: 1px solid #ebebed;
}
.ovui-date-picker-panel {
  display: inline-flex;
  flex-direction: column;
  border: 1px solid #ebebed;
  border-radius: 24px;
}
.ovui-date-picker-panel__footer-btn {
  padding: 8px 12px;
  border-top: 1px solid #ebebed;
  text-align: right;
}
.ovui-date-picker-panel--rtl {
  direction: rtl;
}
.ovui-date-picker-panel--rtl .ovui-date-picker-panel__footer-btn {
  text-align: left;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* Input */
/* Tag */
/* tips */
/* Select */
/* CustomInput */
/* new time panel token */
/* ocean design 2.0 desgin tokens */
.ovui-date-range-picker {
  display: inline-flex;
  width: 100%;
}
.ovui-date-range-picker__input {
  flex: 1;
}
.ovui-date-range-picker__seperator {
  display: flex;
  align-items: center;
  margin-left: 4px;
  margin-right: 4px;
}
.ovui-date-range-picker__bar {
  position: absolute;
  bottom: 0;
  height: 0;
  left: 0;
  border-bottom: 2px solid #338aff;
  transition: all ease-in-out 0.1s;
}
.ovui-date-range-picker--multiple {
  height: 32px;
}
.ovui-date-range-picker--multiple .ovui-custom-input__clear {
  position: absolute;
  right: 0;
  margin-right: 0;
}
.ovui-date-range-picker .ovui-date-range-picker__calendar-icon {
  color: rgba(255, 255, 255, 0.5);
}
.ovui-date-range-picker .ovui-date-range-picker__calendar-icon--clear {
  opacity: 0;
}
.ovui-date-range-picker .ovui-date-range-picker__multiple-input-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ovui-date-range-picker .ovui-date-range-picker__multiple-input-total .ovui-date-range-picker__multiple-input-total-num {
  margin-right: 24px;
  padding: 0 8px;
  border-radius: 50%;
  font-size: 12px;
  border: 1px solid transparent;
  background-color: #302842;
  color: #ffffff;
}
.ovui-date-range-picker__popper {
  display: none;
  box-shadow: 0px 3px 9px 0 rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  background-color: #302842;
}
.ovui-date-range-picker__popper--show {
  display: block;
}
.ovui-date-range-picker__content {
  display: flex;
  align-self: stretch;
}
.ovui-date-range-picker__shortcuts {
  padding: 4px 0 4px 0;
  max-width: 120px;
  overflow-y: auto;
  border-right: 1px solid #ebebed;
}
.ovui-date-range-picker__shortcuts::-webkit-scrollbar-track-piece {
  background-color: transparent;
}
.ovui-date-range-picker__shortcuts::-webkit-scrollbar {
  width: 6px;
  height: 9px;
}
.ovui-date-range-picker__shortcuts::-webkit-scrollbar-thumb {
  background-color: #ebebed;
  border-radius: 3px;
  background-clip: padding-box;
  min-height: 28px;
}
.ovui-date-range-picker__shortcuts::-webkit-scrollbar-thumb:hover {
  background-color: #dfe0e2;
}
.ovui-date-range-picker__shortcuts + div {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.ovui-date-range-picker__footer-btn {
  padding: 8px 12px;
  border-top: 1px solid #ebebed;
  text-align: right;
}
.ovui-date-range-picker-fade-enter-active,
.ovui-date-range-picker-fade-leave-active {
  transition: opacity 0.1s ease-in-out;
}
.ovui-date-range-picker-fade-enter-from,
.ovui-date-range-picker-fade-leave-to {
  opacity: 0;
}
.ovui-date-range-picker-fade-enter-to,
.ovui-date-range-picker-fade-leave-from {
  opacity: 1;
}
.ovui-date-range-picker__popper--rtl {
  direction: rtl;
}
.ovui-date-range-picker__popper--rtl .ovui-date-range-picker__footer-btn {
  text-align: left;
}
.ovui-date-range-picker__popper--rtl .ovui-date-range-picker__shortcuts {
  border-left: 1px solid #ebebed;
  border-right: none;
}
.ovui-date-range-picker-panel {
  display: inline-flex;
  flex-direction: column;
  border: 1px solid #ebebed;
  border-radius: 24px;
}
.ovui-date-range-picker-panel__footer-btn {
  padding: 8px 12px;
  border-top: 1px solid #ebebed;
  text-align: right;
}
.ovui-date-range-picker-panel--rtl {
  direction: rtl;
}
.ovui-date-range-picker-panel--rtl .ovui-date-range-picker-panel__footer-btn {
  text-align: left;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.ovui-description__title {
  color: #323335;
  font-size: 16px;
  margin-bottom: 24px;
}
.ovui-description__table {
  border-collapse: collapse;
  width: 100%;
  table-layout: auto;
}
.ovui-description__row {
  text-align: start;
}
.ovui-description__row:last-child .ovui-description-item {
  padding-bottom: 0;
}
.ovui-description .ovui-description-item {
  padding-bottom: 16px;
  padding-right: 16px;
  vertical-align: top;
}
.ovui-description .ovui-description-item:last-child {
  padding-right: 0;
}
.ovui-description .ovui-description-item__container {
  display: flex;
  align-items: flex-start;
}
.ovui-description .ovui-description-item div.ovui-description-item__label {
  display: inline-flex;
  font-size: 14px;
  color: #64666b;
  margin-right: 6px;
}
.ovui-description .ovui-description-item div.ovui-description-item__content {
  display: inline-flex;
  font-size: 14px;
  color: #323335;
  word-break: break-word;
  overflow-wrap: break-word;
}
.ovui-description--border .ovui-description-item__label,
.ovui-description--border .ovui-description-item__content {
  padding: 13px 16px;
  border: 1px solid #ebebed;
  margin-right: 0;
  text-align: start;
}
.ovui-description--border .ovui-description-item__label {
  background: rgba(255, 255, 255, 0.50196078);
}
.ovui-description--border .ovui-description-item__content {
  word-break: break-word;
  overflow-wrap: break-word;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.ovui-divider {
  position: relative;
  border-style: solid;
  border-color: #ebebed;
  border-width: 0;
}
.ovui-divider--horizontal {
  border-top-width: 1px;
  display: flex;
  width: 100%;
  margin: 16px 0;
}
.ovui-divider--vertical {
  border-left-width: 1px;
  display: inline-flex;
  height: 1em;
  vertical-align: middle;
  margin: 0 16px;
}
.ovui-divider--dashed {
  border-style: dashed;
}
.ovui-divider__context {
  position: absolute;
  line-height: 24px;
  font-size: 16px;
  font-weight: bold;
  padding: 0px 24px;
  color: #ffffff;
  background-color: #302842;
}
.ovui-divider--center .ovui-divider__context {
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}
.ovui-divider--start .ovui-divider__context {
  left: 32px;
  transform: translateY(-50%);
}
.ovui-divider--end .ovui-divider__context {
  right: 32px;
  transform: translateY(-50%);
}
.ovui-divider--rtl {
  direction: rtl;
}
.ovui-divider--rtl.ovui-divider--end .ovui-divider__context {
  left: 32px;
  right: unset;
  transform: translateY(-50%);
}
.ovui-divider--rtl.ovui-divider--start .ovui-divider__context {
  right: 32px;
  left: unset;
  transform: translateY(-50%);
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* modal */
/**
 * Ocean Design Tokens 2.0
 */
/* drawer */
.ovui-drawer-left-enter-active,
.ovui-drawer-left-leave-active {
  transition: transform 0.3s ease-in-out;
}
.ovui-drawer-left-enter-from,
.ovui-drawer-left-leave-to {
  transform: translateX(-100%);
}
.ovui-drawer-left-enter-to,
.ovui-drawer-left-leave-from {
  transform: translateX(0);
}
.ovui-drawer-right-enter-active,
.ovui-drawer-right-leave-active {
  transition: transform 0.3s ease-in-out;
}
.ovui-drawer-right-enter-from,
.ovui-drawer-right-leave-to {
  transform: translateX(100%);
}
.ovui-drawer-right-enter-to,
.ovui-drawer-right-leave-from {
  transform: translateX(0);
}
.ovui-drawer__wrap {
  position: fixed;
  display: flex;
  top: 0;
  bottom: 0;
  width: 100%;
  align-items: center;
  box-shadow: none;
}
.ovui-drawer__wrap--hide {
  display: none;
}
.ovui-drawer__wrap--no-maskable {
  width: 0;
}
.ovui-drawer__wrap--no-maskable.ovui-drawer__wrap--right {
  right: 0;
}
.ovui-drawer__wrap--no-maskable.ovui-drawer__wrap--left {
  left: 0;
}
.ovui-drawer {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 0;
  bottom: 0;
  background: #302842;
  font-size: 14px;
  box-shadow: 0px 3px 9px 0 rgba(0, 0, 0, 0.08);
  transition: transform 0.3s;
}
.ovui-drawer--right {
  right: 0;
}
.ovui-drawer--left {
  left: 0;
}
.ovui-drawer--no-maskable {
  box-shadow: 0px 3px 9px 0 rgba(0, 0, 0, 0.08);
}
.ovui-drawer__header {
  padding: 24px 24px 20px 24px;
  color: #ffffff;
  background: #302842;
}
.ovui-drawer__header--no-border {
  border-bottom: none;
}
.ovui-drawer__title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #ffffff;
}
.ovui-drawer__body {
  padding: 0 24px 0 24px;
  flex-grow: 1;
  overflow: auto;
}
.ovui-drawer__outer-close-btn {
  position: absolute;
  background: #338aff;
  border-radius: 4px 0 0 4px;
  justify-content: center;
  align-items: center;
  top: 19px;
  left: -32px;
  display: flex;
  color: #fff;
  font-size: 15px;
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.ovui-drawer__close-icon {
  position: absolute;
  width: 20px;
  height: 20px;
  color: #ffffff;
  font-size: 20px;
  top: 25px;
  right: 25px;
  cursor: pointer;
}
.ovui-drawer__close-icon:hover {
  color: #651dff;
}
.ovui-drawer__close-icon:active {
  color: rgba(101, 29, 255, 0.75);
}
.ovui-drawer__close-icon--hide {
  display: none;
}
.ovui-drawer--rtl {
  direction: rtl;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.ovui-dropdown-item {
  display: flex;
  align-self: stretch;
  color: #ffffff;
  cursor: pointer;
}
.ovui-dropdown-item__action {
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
}
.ovui-dropdown-item__content {
  flex: 1;
  align-items: center;
}
.ovui-dropdown-item__content--ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ovui-dropdown-item__expand {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
}
.ovui-dropdown-item__expand--icon {
  color: #ffffff;
}
.ovui-dropdown-item.ovui-dropdown-item--grouped {
  padding-left: 24px;
  padding-right: 24px;
}
.ovui-dropdown-item--single.ovui-dropdown-item--selected {
  color: rgba(255, 255, 255, 0.75);
}
.ovui-dropdown-item.ovui-dropdown-item--disabled {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.25);
}
.ovui-dropdown-item.ovui-dropdown-item--disabled .ovui-dropdown-item__expand--icon {
  color: rgba(255, 255, 255, 0.25);
}
.ovui-dropdown-item.ovui-dropdown-item--disabled.ovui-dropdown-item--single.ovui-dropdown-item--selected {
  color: rgba(255, 255, 255, 0.25);
}
.ovui-dropdown-item:hover:not(.ovui-dropdown-item--disabled) {
  background-color: #3c344d;
}
.ovui-dropdown-item--xs {
  line-height: 20px;
  font-size: 12px;
  padding: 3px 12px;
}
.ovui-dropdown-item--sm {
  line-height: 20px;
  font-size: 12px;
  padding: 5px 12px;
}
.ovui-dropdown-item--md {
  line-height: 22px;
  font-size: 14px;
  padding: 6px 12px;
}
.ovui-dropdown-item--lg {
  line-height: 24px;
  font-size: 16px;
  padding: 7px 12px;
}
.ovui-dropdown-item--xl {
  line-height: 26px;
  font-size: 18px;
  padding: 8px 12px;
}
.ovui-dropdown-item--rtl {
  direction: rtl;
}
.ovui-dropdown-item--rtl .ovui-dropdown-item__action {
  margin-right: 0;
  margin-left: 8px;
}
.ovui-dropdown-item--rtl .ovui-dropdown-item__expand {
  margin-left: 0;
  margin-right: 8px;
}
.ovui-dropdown__popper {
  box-shadow: 0px 3px 9px 0 rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  background-color: #302842;
  max-height: 192px;
  overflow-y: auto;
  padding: 6px 0;
}
.ovui-dropdown__popper--hide {
  display: none;
}
.ovui-dropdown__popper--show {
  display: block;
}
.ovui-dropdown__popper::-webkit-scrollbar-track-piece {
  background-color: transparent;
}
.ovui-dropdown__popper::-webkit-scrollbar {
  width: 6px;
  height: 9px;
}
.ovui-dropdown__popper::-webkit-scrollbar-thumb {
  background-color: #ebebed;
  border-radius: 3px;
  background-clip: padding-box;
  min-height: 28px;
}
.ovui-dropdown__popper::-webkit-scrollbar-thumb:hover {
  background-color: #dfe0e2;
}
.dropdown-transition-enter-active,
.dropdown-transition-leave-active {
  transition: opacity 0.1s ease-in-out;
}
.dropdown-transition-enter-from,
.dropdown-transition-leave-to {
  opacity: 0;
}
.dropdown-transition-enter-to,
.dropdown-transition-leave-from {
  opacity: 1;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* flex-box */
.ovui-box {
  display: flex;
}
.ovui-box--align-top {
  align-items: flex-start;
}
.ovui-box--align-bottom {
  align-items: flex-end;
}
.ovui-box--align-center {
  align-items: center;
}
.ovui-box--justify-start {
  justify-content: flex-start;
}
.ovui-box--justify-center {
  justify-content: center;
}
.ovui-box--justify-end {
  justify-content: flex-end;
}
.ovui-box--justify-space-around {
  justify-content: space-around;
}
.ovui-box--justify-space-between {
  justify-content: space-between;
}
.ovui-box--wrap {
  flex-wrap: wrap;
}
.ovui-box--direction-row {
  flex-direction: row;
}
.ovui-box--direction-column {
  flex-direction: column;
}
.ovui-box--direction-row-reverse {
  flex-direction: row-reverse;
}
.ovui-box--direction-column-reverse {
  flex-direction: column-reverse;
}
.ovui-box--rtl {
  direction: rtl;
}
.ovui-col {
  display: block;
  box-sizing: border-box;
  flex: 1 0 auto;
  max-width: 100%;
  position: relative;
}
.ovui-col--span-0 {
  display: none;
}
@media screen and (min-width: 0) {
  .ovui-col--span-24 {
    flex-basis: 100%;
    max-width: 100%;
  }
  .ovui-col--span-23 {
    flex-basis: 95.83333333%;
    max-width: 95.83333333%;
  }
  .ovui-col--span-22 {
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }
  .ovui-col--span-21 {
    flex-basis: 87.5%;
    max-width: 87.5%;
  }
  .ovui-col--span-20 {
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }
  .ovui-col--span-19 {
    flex-basis: 79.16666667%;
    max-width: 79.16666667%;
  }
  .ovui-col--span-18 {
    flex-basis: 75%;
    max-width: 75%;
  }
  .ovui-col--span-17 {
    flex-basis: 70.83333333%;
    max-width: 70.83333333%;
  }
  .ovui-col--span-16 {
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }
  .ovui-col--span-15 {
    flex-basis: 62.5%;
    max-width: 62.5%;
  }
  .ovui-col--span-14 {
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }
  .ovui-col--span-13 {
    flex-basis: 54.16666667%;
    max-width: 54.16666667%;
  }
  .ovui-col--span-12 {
    flex-basis: 50%;
    max-width: 50%;
  }
  .ovui-col--span-11 {
    flex-basis: 45.83333333%;
    max-width: 45.83333333%;
  }
  .ovui-col--span-10 {
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }
  .ovui-col--span-9 {
    flex-basis: 37.5%;
    max-width: 37.5%;
  }
  .ovui-col--span-8 {
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }
  .ovui-col--span-7 {
    flex-basis: 29.16666667%;
    max-width: 29.16666667%;
  }
  .ovui-col--span-6 {
    flex-basis: 25%;
    max-width: 25%;
  }
  .ovui-col--span-5 {
    flex-basis: 20.83333333%;
    max-width: 20.83333333%;
  }
  .ovui-col--span-4 {
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }
  .ovui-col--span-3 {
    flex-basis: 12.5%;
    max-width: 12.5%;
  }
  .ovui-col--span-2 {
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }
  .ovui-col--span-1 {
    flex-basis: 4.16666667%;
    max-width: 4.16666667%;
  }
  .ovui-col--offset-23 {
    margin-left: 95.83333333%;
  }
  .ovui-col--offset-23.ovui-col--rtl {
    margin-right: 95.83333333%;
    margin-left: 0;
  }
  .ovui-col--offset-22 {
    margin-left: 91.66666667%;
  }
  .ovui-col--offset-22.ovui-col--rtl {
    margin-right: 91.66666667%;
    margin-left: 0;
  }
  .ovui-col--offset-21 {
    margin-left: 87.5%;
  }
  .ovui-col--offset-21.ovui-col--rtl {
    margin-right: 87.5%;
    margin-left: 0;
  }
  .ovui-col--offset-20 {
    margin-left: 83.33333333%;
  }
  .ovui-col--offset-20.ovui-col--rtl {
    margin-right: 83.33333333%;
    margin-left: 0;
  }
  .ovui-col--offset-19 {
    margin-left: 79.16666667%;
  }
  .ovui-col--offset-19.ovui-col--rtl {
    margin-right: 79.16666667%;
    margin-left: 0;
  }
  .ovui-col--offset-18 {
    margin-left: 75%;
  }
  .ovui-col--offset-18.ovui-col--rtl {
    margin-right: 75%;
    margin-left: 0;
  }
  .ovui-col--offset-17 {
    margin-left: 70.83333333%;
  }
  .ovui-col--offset-17.ovui-col--rtl {
    margin-right: 70.83333333%;
    margin-left: 0;
  }
  .ovui-col--offset-16 {
    margin-left: 66.66666667%;
  }
  .ovui-col--offset-16.ovui-col--rtl {
    margin-right: 66.66666667%;
    margin-left: 0;
  }
  .ovui-col--offset-15 {
    margin-left: 62.5%;
  }
  .ovui-col--offset-15.ovui-col--rtl {
    margin-right: 62.5%;
    margin-left: 0;
  }
  .ovui-col--offset-14 {
    margin-left: 58.33333333%;
  }
  .ovui-col--offset-14.ovui-col--rtl {
    margin-right: 58.33333333%;
    margin-left: 0;
  }
  .ovui-col--offset-13 {
    margin-left: 54.16666667%;
  }
  .ovui-col--offset-13.ovui-col--rtl {
    margin-right: 54.16666667%;
    margin-left: 0;
  }
  .ovui-col--offset-12 {
    margin-left: 50%;
  }
  .ovui-col--offset-12.ovui-col--rtl {
    margin-right: 50%;
    margin-left: 0;
  }
  .ovui-col--offset-11 {
    margin-left: 45.83333333%;
  }
  .ovui-col--offset-11.ovui-col--rtl {
    margin-right: 45.83333333%;
    margin-left: 0;
  }
  .ovui-col--offset-10 {
    margin-left: 41.66666667%;
  }
  .ovui-col--offset-10.ovui-col--rtl {
    margin-right: 41.66666667%;
    margin-left: 0;
  }
  .ovui-col--offset-9 {
    margin-left: 37.5%;
  }
  .ovui-col--offset-9.ovui-col--rtl {
    margin-right: 37.5%;
    margin-left: 0;
  }
  .ovui-col--offset-8 {
    margin-left: 33.33333333%;
  }
  .ovui-col--offset-8.ovui-col--rtl {
    margin-right: 33.33333333%;
    margin-left: 0;
  }
  .ovui-col--offset-7 {
    margin-left: 29.16666667%;
  }
  .ovui-col--offset-7.ovui-col--rtl {
    margin-right: 29.16666667%;
    margin-left: 0;
  }
  .ovui-col--offset-6 {
    margin-left: 25%;
  }
  .ovui-col--offset-6.ovui-col--rtl {
    margin-right: 25%;
    margin-left: 0;
  }
  .ovui-col--offset-5 {
    margin-left: 20.83333333%;
  }
  .ovui-col--offset-5.ovui-col--rtl {
    margin-right: 20.83333333%;
    margin-left: 0;
  }
  .ovui-col--offset-4 {
    margin-left: 16.66666667%;
  }
  .ovui-col--offset-4.ovui-col--rtl {
    margin-right: 16.66666667%;
    margin-left: 0;
  }
  .ovui-col--offset-3 {
    margin-left: 12.5%;
  }
  .ovui-col--offset-3.ovui-col--rtl {
    margin-right: 12.5%;
    margin-left: 0;
  }
  .ovui-col--offset-2 {
    margin-left: 8.33333333%;
  }
  .ovui-col--offset-2.ovui-col--rtl {
    margin-right: 8.33333333%;
    margin-left: 0;
  }
  .ovui-col--offset-1 {
    margin-left: 4.16666667%;
  }
  .ovui-col--offset-1.ovui-col--rtl {
    margin-right: 4.16666667%;
    margin-left: 0;
  }
  .ovui-col--offset-0 {
    margin-left: 0%;
  }
  .ovui-col--offset-0.ovui-col--rtl {
    margin-right: 0%;
    margin-left: 0;
  }
  .ovui-col--order-1 {
    order: 1;
  }
  .ovui-col--order-2 {
    order: 2;
  }
  .ovui-col--order-3 {
    order: 3;
  }
  .ovui-col--order-4 {
    order: 4;
  }
  .ovui-col--order-5 {
    order: 5;
  }
  .ovui-col--order-6 {
    order: 6;
  }
  .ovui-col--order-7 {
    order: 7;
  }
  .ovui-col--order-8 {
    order: 8;
  }
  .ovui-col--order-9 {
    order: 9;
  }
  .ovui-col--order-10 {
    order: 10;
  }
  .ovui-col--order-11 {
    order: 11;
  }
  .ovui-col--order-12 {
    order: 12;
  }
  .ovui-col--order-13 {
    order: 13;
  }
  .ovui-col--order-14 {
    order: 14;
  }
  .ovui-col--order-15 {
    order: 15;
  }
  .ovui-col--order-16 {
    order: 16;
  }
  .ovui-col--order-17 {
    order: 17;
  }
  .ovui-col--order-18 {
    order: 18;
  }
  .ovui-col--order-19 {
    order: 19;
  }
  .ovui-col--order-20 {
    order: 20;
  }
  .ovui-col--order-21 {
    order: 21;
  }
  .ovui-col--order-22 {
    order: 22;
  }
  .ovui-col--order-23 {
    order: 23;
  }
  .ovui-col--order-24 {
    order: 24;
  }
  .ovui-col--pull-23 {
    right: 95.83333333%;
  }
  .ovui-col--pull-23.ovui-col--rtl {
    left: 95.83333333%;
    right: 0;
  }
  .ovui-col--pull-22 {
    right: 91.66666667%;
  }
  .ovui-col--pull-22.ovui-col--rtl {
    left: 91.66666667%;
    right: 0;
  }
  .ovui-col--pull-21 {
    right: 87.5%;
  }
  .ovui-col--pull-21.ovui-col--rtl {
    left: 87.5%;
    right: 0;
  }
  .ovui-col--pull-20 {
    right: 83.33333333%;
  }
  .ovui-col--pull-20.ovui-col--rtl {
    left: 83.33333333%;
    right: 0;
  }
  .ovui-col--pull-19 {
    right: 79.16666667%;
  }
  .ovui-col--pull-19.ovui-col--rtl {
    left: 79.16666667%;
    right: 0;
  }
  .ovui-col--pull-18 {
    right: 75%;
  }
  .ovui-col--pull-18.ovui-col--rtl {
    left: 75%;
    right: 0;
  }
  .ovui-col--pull-17 {
    right: 70.83333333%;
  }
  .ovui-col--pull-17.ovui-col--rtl {
    left: 70.83333333%;
    right: 0;
  }
  .ovui-col--pull-16 {
    right: 66.66666667%;
  }
  .ovui-col--pull-16.ovui-col--rtl {
    left: 66.66666667%;
    right: 0;
  }
  .ovui-col--pull-15 {
    right: 62.5%;
  }
  .ovui-col--pull-15.ovui-col--rtl {
    left: 62.5%;
    right: 0;
  }
  .ovui-col--pull-14 {
    right: 58.33333333%;
  }
  .ovui-col--pull-14.ovui-col--rtl {
    left: 58.33333333%;
    right: 0;
  }
  .ovui-col--pull-13 {
    right: 54.16666667%;
  }
  .ovui-col--pull-13.ovui-col--rtl {
    left: 54.16666667%;
    right: 0;
  }
  .ovui-col--pull-12 {
    right: 50%;
  }
  .ovui-col--pull-12.ovui-col--rtl {
    left: 50%;
    right: 0;
  }
  .ovui-col--pull-11 {
    right: 45.83333333%;
  }
  .ovui-col--pull-11.ovui-col--rtl {
    left: 45.83333333%;
    right: 0;
  }
  .ovui-col--pull-10 {
    right: 41.66666667%;
  }
  .ovui-col--pull-10.ovui-col--rtl {
    left: 41.66666667%;
    right: 0;
  }
  .ovui-col--pull-9 {
    right: 37.5%;
  }
  .ovui-col--pull-9.ovui-col--rtl {
    left: 37.5%;
    right: 0;
  }
  .ovui-col--pull-8 {
    right: 33.33333333%;
  }
  .ovui-col--pull-8.ovui-col--rtl {
    left: 33.33333333%;
    right: 0;
  }
  .ovui-col--pull-7 {
    right: 29.16666667%;
  }
  .ovui-col--pull-7.ovui-col--rtl {
    left: 29.16666667%;
    right: 0;
  }
  .ovui-col--pull-6 {
    right: 25%;
  }
  .ovui-col--pull-6.ovui-col--rtl {
    left: 25%;
    right: 0;
  }
  .ovui-col--pull-5 {
    right: 20.83333333%;
  }
  .ovui-col--pull-5.ovui-col--rtl {
    left: 20.83333333%;
    right: 0;
  }
  .ovui-col--pull-4 {
    right: 16.66666667%;
  }
  .ovui-col--pull-4.ovui-col--rtl {
    left: 16.66666667%;
    right: 0;
  }
  .ovui-col--pull-3 {
    right: 12.5%;
  }
  .ovui-col--pull-3.ovui-col--rtl {
    left: 12.5%;
    right: 0;
  }
  .ovui-col--pull-2 {
    right: 8.33333333%;
  }
  .ovui-col--pull-2.ovui-col--rtl {
    left: 8.33333333%;
    right: 0;
  }
  .ovui-col--pull-1 {
    right: 4.16666667%;
  }
  .ovui-col--pull-1.ovui-col--rtl {
    left: 4.16666667%;
    right: 0;
  }
  .ovui-col--pull-0 {
    right: 0%;
  }
  .ovui-col--pull-0.ovui-col--rtl {
    left: 0%;
    right: 0;
  }
  .ovui-col--push-23 {
    left: 95.83333333%;
  }
  .ovui-col--push-23.ovui-col--rtl {
    right: 95.83333333%;
    left: 0;
  }
  .ovui-col--push-22 {
    left: 91.66666667%;
  }
  .ovui-col--push-22.ovui-col--rtl {
    right: 91.66666667%;
    left: 0;
  }
  .ovui-col--push-21 {
    left: 87.5%;
  }
  .ovui-col--push-21.ovui-col--rtl {
    right: 87.5%;
    left: 0;
  }
  .ovui-col--push-20 {
    left: 83.33333333%;
  }
  .ovui-col--push-20.ovui-col--rtl {
    right: 83.33333333%;
    left: 0;
  }
  .ovui-col--push-19 {
    left: 79.16666667%;
  }
  .ovui-col--push-19.ovui-col--rtl {
    right: 79.16666667%;
    left: 0;
  }
  .ovui-col--push-18 {
    left: 75%;
  }
  .ovui-col--push-18.ovui-col--rtl {
    right: 75%;
    left: 0;
  }
  .ovui-col--push-17 {
    left: 70.83333333%;
  }
  .ovui-col--push-17.ovui-col--rtl {
    right: 70.83333333%;
    left: 0;
  }
  .ovui-col--push-16 {
    left: 66.66666667%;
  }
  .ovui-col--push-16.ovui-col--rtl {
    right: 66.66666667%;
    left: 0;
  }
  .ovui-col--push-15 {
    left: 62.5%;
  }
  .ovui-col--push-15.ovui-col--rtl {
    right: 62.5%;
    left: 0;
  }
  .ovui-col--push-14 {
    left: 58.33333333%;
  }
  .ovui-col--push-14.ovui-col--rtl {
    right: 58.33333333%;
    left: 0;
  }
  .ovui-col--push-13 {
    left: 54.16666667%;
  }
  .ovui-col--push-13.ovui-col--rtl {
    right: 54.16666667%;
    left: 0;
  }
  .ovui-col--push-12 {
    left: 50%;
  }
  .ovui-col--push-12.ovui-col--rtl {
    right: 50%;
    left: 0;
  }
  .ovui-col--push-11 {
    left: 45.83333333%;
  }
  .ovui-col--push-11.ovui-col--rtl {
    right: 45.83333333%;
    left: 0;
  }
  .ovui-col--push-10 {
    left: 41.66666667%;
  }
  .ovui-col--push-10.ovui-col--rtl {
    right: 41.66666667%;
    left: 0;
  }
  .ovui-col--push-9 {
    left: 37.5%;
  }
  .ovui-col--push-9.ovui-col--rtl {
    right: 37.5%;
    left: 0;
  }
  .ovui-col--push-8 {
    left: 33.33333333%;
  }
  .ovui-col--push-8.ovui-col--rtl {
    right: 33.33333333%;
    left: 0;
  }
  .ovui-col--push-7 {
    left: 29.16666667%;
  }
  .ovui-col--push-7.ovui-col--rtl {
    right: 29.16666667%;
    left: 0;
  }
  .ovui-col--push-6 {
    left: 25%;
  }
  .ovui-col--push-6.ovui-col--rtl {
    right: 25%;
    left: 0;
  }
  .ovui-col--push-5 {
    left: 20.83333333%;
  }
  .ovui-col--push-5.ovui-col--rtl {
    right: 20.83333333%;
    left: 0;
  }
  .ovui-col--push-4 {
    left: 16.66666667%;
  }
  .ovui-col--push-4.ovui-col--rtl {
    right: 16.66666667%;
    left: 0;
  }
  .ovui-col--push-3 {
    left: 12.5%;
  }
  .ovui-col--push-3.ovui-col--rtl {
    right: 12.5%;
    left: 0;
  }
  .ovui-col--push-2 {
    left: 8.33333333%;
  }
  .ovui-col--push-2.ovui-col--rtl {
    right: 8.33333333%;
    left: 0;
  }
  .ovui-col--push-1 {
    left: 4.16666667%;
  }
  .ovui-col--push-1.ovui-col--rtl {
    right: 4.16666667%;
    left: 0;
  }
  .ovui-col--push-0 {
    left: 0%;
  }
  .ovui-col--push-0.ovui-col--rtl {
    right: 0%;
    left: 0;
  }
}
.ovui-col--span-sm-0 {
  display: none;
}
@media screen and (min-width: 576px) {
  .ovui-col--span-sm-24 {
    flex-basis: 100%;
    max-width: 100%;
  }
  .ovui-col--span-sm-23 {
    flex-basis: 95.83333333%;
    max-width: 95.83333333%;
  }
  .ovui-col--span-sm-22 {
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }
  .ovui-col--span-sm-21 {
    flex-basis: 87.5%;
    max-width: 87.5%;
  }
  .ovui-col--span-sm-20 {
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }
  .ovui-col--span-sm-19 {
    flex-basis: 79.16666667%;
    max-width: 79.16666667%;
  }
  .ovui-col--span-sm-18 {
    flex-basis: 75%;
    max-width: 75%;
  }
  .ovui-col--span-sm-17 {
    flex-basis: 70.83333333%;
    max-width: 70.83333333%;
  }
  .ovui-col--span-sm-16 {
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }
  .ovui-col--span-sm-15 {
    flex-basis: 62.5%;
    max-width: 62.5%;
  }
  .ovui-col--span-sm-14 {
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }
  .ovui-col--span-sm-13 {
    flex-basis: 54.16666667%;
    max-width: 54.16666667%;
  }
  .ovui-col--span-sm-12 {
    flex-basis: 50%;
    max-width: 50%;
  }
  .ovui-col--span-sm-11 {
    flex-basis: 45.83333333%;
    max-width: 45.83333333%;
  }
  .ovui-col--span-sm-10 {
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }
  .ovui-col--span-sm-9 {
    flex-basis: 37.5%;
    max-width: 37.5%;
  }
  .ovui-col--span-sm-8 {
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }
  .ovui-col--span-sm-7 {
    flex-basis: 29.16666667%;
    max-width: 29.16666667%;
  }
  .ovui-col--span-sm-6 {
    flex-basis: 25%;
    max-width: 25%;
  }
  .ovui-col--span-sm-5 {
    flex-basis: 20.83333333%;
    max-width: 20.83333333%;
  }
  .ovui-col--span-sm-4 {
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }
  .ovui-col--span-sm-3 {
    flex-basis: 12.5%;
    max-width: 12.5%;
  }
  .ovui-col--span-sm-2 {
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }
  .ovui-col--span-sm-1 {
    flex-basis: 4.16666667%;
    max-width: 4.16666667%;
  }
  .ovui-col--offset-sm-23 {
    margin-left: 95.83333333%;
  }
  .ovui-col--offset-sm-23.ovui-col--rtl {
    margin-right: 95.83333333%;
    margin-left: 0;
  }
  .ovui-col--offset-sm-22 {
    margin-left: 91.66666667%;
  }
  .ovui-col--offset-sm-22.ovui-col--rtl {
    margin-right: 91.66666667%;
    margin-left: 0;
  }
  .ovui-col--offset-sm-21 {
    margin-left: 87.5%;
  }
  .ovui-col--offset-sm-21.ovui-col--rtl {
    margin-right: 87.5%;
    margin-left: 0;
  }
  .ovui-col--offset-sm-20 {
    margin-left: 83.33333333%;
  }
  .ovui-col--offset-sm-20.ovui-col--rtl {
    margin-right: 83.33333333%;
    margin-left: 0;
  }
  .ovui-col--offset-sm-19 {
    margin-left: 79.16666667%;
  }
  .ovui-col--offset-sm-19.ovui-col--rtl {
    margin-right: 79.16666667%;
    margin-left: 0;
  }
  .ovui-col--offset-sm-18 {
    margin-left: 75%;
  }
  .ovui-col--offset-sm-18.ovui-col--rtl {
    margin-right: 75%;
    margin-left: 0;
  }
  .ovui-col--offset-sm-17 {
    margin-left: 70.83333333%;
  }
  .ovui-col--offset-sm-17.ovui-col--rtl {
    margin-right: 70.83333333%;
    margin-left: 0;
  }
  .ovui-col--offset-sm-16 {
    margin-left: 66.66666667%;
  }
  .ovui-col--offset-sm-16.ovui-col--rtl {
    margin-right: 66.66666667%;
    margin-left: 0;
  }
  .ovui-col--offset-sm-15 {
    margin-left: 62.5%;
  }
  .ovui-col--offset-sm-15.ovui-col--rtl {
    margin-right: 62.5%;
    margin-left: 0;
  }
  .ovui-col--offset-sm-14 {
    margin-left: 58.33333333%;
  }
  .ovui-col--offset-sm-14.ovui-col--rtl {
    margin-right: 58.33333333%;
    margin-left: 0;
  }
  .ovui-col--offset-sm-13 {
    margin-left: 54.16666667%;
  }
  .ovui-col--offset-sm-13.ovui-col--rtl {
    margin-right: 54.16666667%;
    margin-left: 0;
  }
  .ovui-col--offset-sm-12 {
    margin-left: 50%;
  }
  .ovui-col--offset-sm-12.ovui-col--rtl {
    margin-right: 50%;
    margin-left: 0;
  }
  .ovui-col--offset-sm-11 {
    margin-left: 45.83333333%;
  }
  .ovui-col--offset-sm-11.ovui-col--rtl {
    margin-right: 45.83333333%;
    margin-left: 0;
  }
  .ovui-col--offset-sm-10 {
    margin-left: 41.66666667%;
  }
  .ovui-col--offset-sm-10.ovui-col--rtl {
    margin-right: 41.66666667%;
    margin-left: 0;
  }
  .ovui-col--offset-sm-9 {
    margin-left: 37.5%;
  }
  .ovui-col--offset-sm-9.ovui-col--rtl {
    margin-right: 37.5%;
    margin-left: 0;
  }
  .ovui-col--offset-sm-8 {
    margin-left: 33.33333333%;
  }
  .ovui-col--offset-sm-8.ovui-col--rtl {
    margin-right: 33.33333333%;
    margin-left: 0;
  }
  .ovui-col--offset-sm-7 {
    margin-left: 29.16666667%;
  }
  .ovui-col--offset-sm-7.ovui-col--rtl {
    margin-right: 29.16666667%;
    margin-left: 0;
  }
  .ovui-col--offset-sm-6 {
    margin-left: 25%;
  }
  .ovui-col--offset-sm-6.ovui-col--rtl {
    margin-right: 25%;
    margin-left: 0;
  }
  .ovui-col--offset-sm-5 {
    margin-left: 20.83333333%;
  }
  .ovui-col--offset-sm-5.ovui-col--rtl {
    margin-right: 20.83333333%;
    margin-left: 0;
  }
  .ovui-col--offset-sm-4 {
    margin-left: 16.66666667%;
  }
  .ovui-col--offset-sm-4.ovui-col--rtl {
    margin-right: 16.66666667%;
    margin-left: 0;
  }
  .ovui-col--offset-sm-3 {
    margin-left: 12.5%;
  }
  .ovui-col--offset-sm-3.ovui-col--rtl {
    margin-right: 12.5%;
    margin-left: 0;
  }
  .ovui-col--offset-sm-2 {
    margin-left: 8.33333333%;
  }
  .ovui-col--offset-sm-2.ovui-col--rtl {
    margin-right: 8.33333333%;
    margin-left: 0;
  }
  .ovui-col--offset-sm-1 {
    margin-left: 4.16666667%;
  }
  .ovui-col--offset-sm-1.ovui-col--rtl {
    margin-right: 4.16666667%;
    margin-left: 0;
  }
  .ovui-col--offset-sm-0 {
    margin-left: 0%;
  }
  .ovui-col--offset-sm-0.ovui-col--rtl {
    margin-right: 0%;
    margin-left: 0;
  }
  .ovui-col--order-sm-1 {
    order: 1;
  }
  .ovui-col--order-sm-2 {
    order: 2;
  }
  .ovui-col--order-sm-3 {
    order: 3;
  }
  .ovui-col--order-sm-4 {
    order: 4;
  }
  .ovui-col--order-sm-5 {
    order: 5;
  }
  .ovui-col--order-sm-6 {
    order: 6;
  }
  .ovui-col--order-sm-7 {
    order: 7;
  }
  .ovui-col--order-sm-8 {
    order: 8;
  }
  .ovui-col--order-sm-9 {
    order: 9;
  }
  .ovui-col--order-sm-10 {
    order: 10;
  }
  .ovui-col--order-sm-11 {
    order: 11;
  }
  .ovui-col--order-sm-12 {
    order: 12;
  }
  .ovui-col--order-sm-13 {
    order: 13;
  }
  .ovui-col--order-sm-14 {
    order: 14;
  }
  .ovui-col--order-sm-15 {
    order: 15;
  }
  .ovui-col--order-sm-16 {
    order: 16;
  }
  .ovui-col--order-sm-17 {
    order: 17;
  }
  .ovui-col--order-sm-18 {
    order: 18;
  }
  .ovui-col--order-sm-19 {
    order: 19;
  }
  .ovui-col--order-sm-20 {
    order: 20;
  }
  .ovui-col--order-sm-21 {
    order: 21;
  }
  .ovui-col--order-sm-22 {
    order: 22;
  }
  .ovui-col--order-sm-23 {
    order: 23;
  }
  .ovui-col--order-sm-24 {
    order: 24;
  }
  .ovui-col--pull-sm-23 {
    right: 95.83333333%;
  }
  .ovui-col--pull-sm-23.ovui-col--rtl {
    left: 95.83333333%;
    right: 0;
  }
  .ovui-col--pull-sm-22 {
    right: 91.66666667%;
  }
  .ovui-col--pull-sm-22.ovui-col--rtl {
    left: 91.66666667%;
    right: 0;
  }
  .ovui-col--pull-sm-21 {
    right: 87.5%;
  }
  .ovui-col--pull-sm-21.ovui-col--rtl {
    left: 87.5%;
    right: 0;
  }
  .ovui-col--pull-sm-20 {
    right: 83.33333333%;
  }
  .ovui-col--pull-sm-20.ovui-col--rtl {
    left: 83.33333333%;
    right: 0;
  }
  .ovui-col--pull-sm-19 {
    right: 79.16666667%;
  }
  .ovui-col--pull-sm-19.ovui-col--rtl {
    left: 79.16666667%;
    right: 0;
  }
  .ovui-col--pull-sm-18 {
    right: 75%;
  }
  .ovui-col--pull-sm-18.ovui-col--rtl {
    left: 75%;
    right: 0;
  }
  .ovui-col--pull-sm-17 {
    right: 70.83333333%;
  }
  .ovui-col--pull-sm-17.ovui-col--rtl {
    left: 70.83333333%;
    right: 0;
  }
  .ovui-col--pull-sm-16 {
    right: 66.66666667%;
  }
  .ovui-col--pull-sm-16.ovui-col--rtl {
    left: 66.66666667%;
    right: 0;
  }
  .ovui-col--pull-sm-15 {
    right: 62.5%;
  }
  .ovui-col--pull-sm-15.ovui-col--rtl {
    left: 62.5%;
    right: 0;
  }
  .ovui-col--pull-sm-14 {
    right: 58.33333333%;
  }
  .ovui-col--pull-sm-14.ovui-col--rtl {
    left: 58.33333333%;
    right: 0;
  }
  .ovui-col--pull-sm-13 {
    right: 54.16666667%;
  }
  .ovui-col--pull-sm-13.ovui-col--rtl {
    left: 54.16666667%;
    right: 0;
  }
  .ovui-col--pull-sm-12 {
    right: 50%;
  }
  .ovui-col--pull-sm-12.ovui-col--rtl {
    left: 50%;
    right: 0;
  }
  .ovui-col--pull-sm-11 {
    right: 45.83333333%;
  }
  .ovui-col--pull-sm-11.ovui-col--rtl {
    left: 45.83333333%;
    right: 0;
  }
  .ovui-col--pull-sm-10 {
    right: 41.66666667%;
  }
  .ovui-col--pull-sm-10.ovui-col--rtl {
    left: 41.66666667%;
    right: 0;
  }
  .ovui-col--pull-sm-9 {
    right: 37.5%;
  }
  .ovui-col--pull-sm-9.ovui-col--rtl {
    left: 37.5%;
    right: 0;
  }
  .ovui-col--pull-sm-8 {
    right: 33.33333333%;
  }
  .ovui-col--pull-sm-8.ovui-col--rtl {
    left: 33.33333333%;
    right: 0;
  }
  .ovui-col--pull-sm-7 {
    right: 29.16666667%;
  }
  .ovui-col--pull-sm-7.ovui-col--rtl {
    left: 29.16666667%;
    right: 0;
  }
  .ovui-col--pull-sm-6 {
    right: 25%;
  }
  .ovui-col--pull-sm-6.ovui-col--rtl {
    left: 25%;
    right: 0;
  }
  .ovui-col--pull-sm-5 {
    right: 20.83333333%;
  }
  .ovui-col--pull-sm-5.ovui-col--rtl {
    left: 20.83333333%;
    right: 0;
  }
  .ovui-col--pull-sm-4 {
    right: 16.66666667%;
  }
  .ovui-col--pull-sm-4.ovui-col--rtl {
    left: 16.66666667%;
    right: 0;
  }
  .ovui-col--pull-sm-3 {
    right: 12.5%;
  }
  .ovui-col--pull-sm-3.ovui-col--rtl {
    left: 12.5%;
    right: 0;
  }
  .ovui-col--pull-sm-2 {
    right: 8.33333333%;
  }
  .ovui-col--pull-sm-2.ovui-col--rtl {
    left: 8.33333333%;
    right: 0;
  }
  .ovui-col--pull-sm-1 {
    right: 4.16666667%;
  }
  .ovui-col--pull-sm-1.ovui-col--rtl {
    left: 4.16666667%;
    right: 0;
  }
  .ovui-col--pull-sm-0 {
    right: 0%;
  }
  .ovui-col--pull-sm-0.ovui-col--rtl {
    left: 0%;
    right: 0;
  }
  .ovui-col--push-sm-23 {
    left: 95.83333333%;
  }
  .ovui-col--push-sm-23.ovui-col--rtl {
    right: 95.83333333%;
    left: 0;
  }
  .ovui-col--push-sm-22 {
    left: 91.66666667%;
  }
  .ovui-col--push-sm-22.ovui-col--rtl {
    right: 91.66666667%;
    left: 0;
  }
  .ovui-col--push-sm-21 {
    left: 87.5%;
  }
  .ovui-col--push-sm-21.ovui-col--rtl {
    right: 87.5%;
    left: 0;
  }
  .ovui-col--push-sm-20 {
    left: 83.33333333%;
  }
  .ovui-col--push-sm-20.ovui-col--rtl {
    right: 83.33333333%;
    left: 0;
  }
  .ovui-col--push-sm-19 {
    left: 79.16666667%;
  }
  .ovui-col--push-sm-19.ovui-col--rtl {
    right: 79.16666667%;
    left: 0;
  }
  .ovui-col--push-sm-18 {
    left: 75%;
  }
  .ovui-col--push-sm-18.ovui-col--rtl {
    right: 75%;
    left: 0;
  }
  .ovui-col--push-sm-17 {
    left: 70.83333333%;
  }
  .ovui-col--push-sm-17.ovui-col--rtl {
    right: 70.83333333%;
    left: 0;
  }
  .ovui-col--push-sm-16 {
    left: 66.66666667%;
  }
  .ovui-col--push-sm-16.ovui-col--rtl {
    right: 66.66666667%;
    left: 0;
  }
  .ovui-col--push-sm-15 {
    left: 62.5%;
  }
  .ovui-col--push-sm-15.ovui-col--rtl {
    right: 62.5%;
    left: 0;
  }
  .ovui-col--push-sm-14 {
    left: 58.33333333%;
  }
  .ovui-col--push-sm-14.ovui-col--rtl {
    right: 58.33333333%;
    left: 0;
  }
  .ovui-col--push-sm-13 {
    left: 54.16666667%;
  }
  .ovui-col--push-sm-13.ovui-col--rtl {
    right: 54.16666667%;
    left: 0;
  }
  .ovui-col--push-sm-12 {
    left: 50%;
  }
  .ovui-col--push-sm-12.ovui-col--rtl {
    right: 50%;
    left: 0;
  }
  .ovui-col--push-sm-11 {
    left: 45.83333333%;
  }
  .ovui-col--push-sm-11.ovui-col--rtl {
    right: 45.83333333%;
    left: 0;
  }
  .ovui-col--push-sm-10 {
    left: 41.66666667%;
  }
  .ovui-col--push-sm-10.ovui-col--rtl {
    right: 41.66666667%;
    left: 0;
  }
  .ovui-col--push-sm-9 {
    left: 37.5%;
  }
  .ovui-col--push-sm-9.ovui-col--rtl {
    right: 37.5%;
    left: 0;
  }
  .ovui-col--push-sm-8 {
    left: 33.33333333%;
  }
  .ovui-col--push-sm-8.ovui-col--rtl {
    right: 33.33333333%;
    left: 0;
  }
  .ovui-col--push-sm-7 {
    left: 29.16666667%;
  }
  .ovui-col--push-sm-7.ovui-col--rtl {
    right: 29.16666667%;
    left: 0;
  }
  .ovui-col--push-sm-6 {
    left: 25%;
  }
  .ovui-col--push-sm-6.ovui-col--rtl {
    right: 25%;
    left: 0;
  }
  .ovui-col--push-sm-5 {
    left: 20.83333333%;
  }
  .ovui-col--push-sm-5.ovui-col--rtl {
    right: 20.83333333%;
    left: 0;
  }
  .ovui-col--push-sm-4 {
    left: 16.66666667%;
  }
  .ovui-col--push-sm-4.ovui-col--rtl {
    right: 16.66666667%;
    left: 0;
  }
  .ovui-col--push-sm-3 {
    left: 12.5%;
  }
  .ovui-col--push-sm-3.ovui-col--rtl {
    right: 12.5%;
    left: 0;
  }
  .ovui-col--push-sm-2 {
    left: 8.33333333%;
  }
  .ovui-col--push-sm-2.ovui-col--rtl {
    right: 8.33333333%;
    left: 0;
  }
  .ovui-col--push-sm-1 {
    left: 4.16666667%;
  }
  .ovui-col--push-sm-1.ovui-col--rtl {
    right: 4.16666667%;
    left: 0;
  }
  .ovui-col--push-sm-0 {
    left: 0%;
  }
  .ovui-col--push-sm-0.ovui-col--rtl {
    right: 0%;
    left: 0;
  }
}
.ovui-col--span-md-0 {
  display: none;
}
@media screen and (min-width: 768px) {
  .ovui-col--span-md-24 {
    flex-basis: 100%;
    max-width: 100%;
  }
  .ovui-col--span-md-23 {
    flex-basis: 95.83333333%;
    max-width: 95.83333333%;
  }
  .ovui-col--span-md-22 {
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }
  .ovui-col--span-md-21 {
    flex-basis: 87.5%;
    max-width: 87.5%;
  }
  .ovui-col--span-md-20 {
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }
  .ovui-col--span-md-19 {
    flex-basis: 79.16666667%;
    max-width: 79.16666667%;
  }
  .ovui-col--span-md-18 {
    flex-basis: 75%;
    max-width: 75%;
  }
  .ovui-col--span-md-17 {
    flex-basis: 70.83333333%;
    max-width: 70.83333333%;
  }
  .ovui-col--span-md-16 {
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }
  .ovui-col--span-md-15 {
    flex-basis: 62.5%;
    max-width: 62.5%;
  }
  .ovui-col--span-md-14 {
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }
  .ovui-col--span-md-13 {
    flex-basis: 54.16666667%;
    max-width: 54.16666667%;
  }
  .ovui-col--span-md-12 {
    flex-basis: 50%;
    max-width: 50%;
  }
  .ovui-col--span-md-11 {
    flex-basis: 45.83333333%;
    max-width: 45.83333333%;
  }
  .ovui-col--span-md-10 {
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }
  .ovui-col--span-md-9 {
    flex-basis: 37.5%;
    max-width: 37.5%;
  }
  .ovui-col--span-md-8 {
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }
  .ovui-col--span-md-7 {
    flex-basis: 29.16666667%;
    max-width: 29.16666667%;
  }
  .ovui-col--span-md-6 {
    flex-basis: 25%;
    max-width: 25%;
  }
  .ovui-col--span-md-5 {
    flex-basis: 20.83333333%;
    max-width: 20.83333333%;
  }
  .ovui-col--span-md-4 {
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }
  .ovui-col--span-md-3 {
    flex-basis: 12.5%;
    max-width: 12.5%;
  }
  .ovui-col--span-md-2 {
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }
  .ovui-col--span-md-1 {
    flex-basis: 4.16666667%;
    max-width: 4.16666667%;
  }
  .ovui-col--offset-md-23 {
    margin-left: 95.83333333%;
  }
  .ovui-col--offset-md-23.ovui-col--rtl {
    margin-right: 95.83333333%;
    margin-left: 0;
  }
  .ovui-col--offset-md-22 {
    margin-left: 91.66666667%;
  }
  .ovui-col--offset-md-22.ovui-col--rtl {
    margin-right: 91.66666667%;
    margin-left: 0;
  }
  .ovui-col--offset-md-21 {
    margin-left: 87.5%;
  }
  .ovui-col--offset-md-21.ovui-col--rtl {
    margin-right: 87.5%;
    margin-left: 0;
  }
  .ovui-col--offset-md-20 {
    margin-left: 83.33333333%;
  }
  .ovui-col--offset-md-20.ovui-col--rtl {
    margin-right: 83.33333333%;
    margin-left: 0;
  }
  .ovui-col--offset-md-19 {
    margin-left: 79.16666667%;
  }
  .ovui-col--offset-md-19.ovui-col--rtl {
    margin-right: 79.16666667%;
    margin-left: 0;
  }
  .ovui-col--offset-md-18 {
    margin-left: 75%;
  }
  .ovui-col--offset-md-18.ovui-col--rtl {
    margin-right: 75%;
    margin-left: 0;
  }
  .ovui-col--offset-md-17 {
    margin-left: 70.83333333%;
  }
  .ovui-col--offset-md-17.ovui-col--rtl {
    margin-right: 70.83333333%;
    margin-left: 0;
  }
  .ovui-col--offset-md-16 {
    margin-left: 66.66666667%;
  }
  .ovui-col--offset-md-16.ovui-col--rtl {
    margin-right: 66.66666667%;
    margin-left: 0;
  }
  .ovui-col--offset-md-15 {
    margin-left: 62.5%;
  }
  .ovui-col--offset-md-15.ovui-col--rtl {
    margin-right: 62.5%;
    margin-left: 0;
  }
  .ovui-col--offset-md-14 {
    margin-left: 58.33333333%;
  }
  .ovui-col--offset-md-14.ovui-col--rtl {
    margin-right: 58.33333333%;
    margin-left: 0;
  }
  .ovui-col--offset-md-13 {
    margin-left: 54.16666667%;
  }
  .ovui-col--offset-md-13.ovui-col--rtl {
    margin-right: 54.16666667%;
    margin-left: 0;
  }
  .ovui-col--offset-md-12 {
    margin-left: 50%;
  }
  .ovui-col--offset-md-12.ovui-col--rtl {
    margin-right: 50%;
    margin-left: 0;
  }
  .ovui-col--offset-md-11 {
    margin-left: 45.83333333%;
  }
  .ovui-col--offset-md-11.ovui-col--rtl {
    margin-right: 45.83333333%;
    margin-left: 0;
  }
  .ovui-col--offset-md-10 {
    margin-left: 41.66666667%;
  }
  .ovui-col--offset-md-10.ovui-col--rtl {
    margin-right: 41.66666667%;
    margin-left: 0;
  }
  .ovui-col--offset-md-9 {
    margin-left: 37.5%;
  }
  .ovui-col--offset-md-9.ovui-col--rtl {
    margin-right: 37.5%;
    margin-left: 0;
  }
  .ovui-col--offset-md-8 {
    margin-left: 33.33333333%;
  }
  .ovui-col--offset-md-8.ovui-col--rtl {
    margin-right: 33.33333333%;
    margin-left: 0;
  }
  .ovui-col--offset-md-7 {
    margin-left: 29.16666667%;
  }
  .ovui-col--offset-md-7.ovui-col--rtl {
    margin-right: 29.16666667%;
    margin-left: 0;
  }
  .ovui-col--offset-md-6 {
    margin-left: 25%;
  }
  .ovui-col--offset-md-6.ovui-col--rtl {
    margin-right: 25%;
    margin-left: 0;
  }
  .ovui-col--offset-md-5 {
    margin-left: 20.83333333%;
  }
  .ovui-col--offset-md-5.ovui-col--rtl {
    margin-right: 20.83333333%;
    margin-left: 0;
  }
  .ovui-col--offset-md-4 {
    margin-left: 16.66666667%;
  }
  .ovui-col--offset-md-4.ovui-col--rtl {
    margin-right: 16.66666667%;
    margin-left: 0;
  }
  .ovui-col--offset-md-3 {
    margin-left: 12.5%;
  }
  .ovui-col--offset-md-3.ovui-col--rtl {
    margin-right: 12.5%;
    margin-left: 0;
  }
  .ovui-col--offset-md-2 {
    margin-left: 8.33333333%;
  }
  .ovui-col--offset-md-2.ovui-col--rtl {
    margin-right: 8.33333333%;
    margin-left: 0;
  }
  .ovui-col--offset-md-1 {
    margin-left: 4.16666667%;
  }
  .ovui-col--offset-md-1.ovui-col--rtl {
    margin-right: 4.16666667%;
    margin-left: 0;
  }
  .ovui-col--offset-md-0 {
    margin-left: 0%;
  }
  .ovui-col--offset-md-0.ovui-col--rtl {
    margin-right: 0%;
    margin-left: 0;
  }
  .ovui-col--order-md-1 {
    order: 1;
  }
  .ovui-col--order-md-2 {
    order: 2;
  }
  .ovui-col--order-md-3 {
    order: 3;
  }
  .ovui-col--order-md-4 {
    order: 4;
  }
  .ovui-col--order-md-5 {
    order: 5;
  }
  .ovui-col--order-md-6 {
    order: 6;
  }
  .ovui-col--order-md-7 {
    order: 7;
  }
  .ovui-col--order-md-8 {
    order: 8;
  }
  .ovui-col--order-md-9 {
    order: 9;
  }
  .ovui-col--order-md-10 {
    order: 10;
  }
  .ovui-col--order-md-11 {
    order: 11;
  }
  .ovui-col--order-md-12 {
    order: 12;
  }
  .ovui-col--order-md-13 {
    order: 13;
  }
  .ovui-col--order-md-14 {
    order: 14;
  }
  .ovui-col--order-md-15 {
    order: 15;
  }
  .ovui-col--order-md-16 {
    order: 16;
  }
  .ovui-col--order-md-17 {
    order: 17;
  }
  .ovui-col--order-md-18 {
    order: 18;
  }
  .ovui-col--order-md-19 {
    order: 19;
  }
  .ovui-col--order-md-20 {
    order: 20;
  }
  .ovui-col--order-md-21 {
    order: 21;
  }
  .ovui-col--order-md-22 {
    order: 22;
  }
  .ovui-col--order-md-23 {
    order: 23;
  }
  .ovui-col--order-md-24 {
    order: 24;
  }
  .ovui-col--pull-md-23 {
    right: 95.83333333%;
  }
  .ovui-col--pull-md-23.ovui-col--rtl {
    left: 95.83333333%;
    right: 0;
  }
  .ovui-col--pull-md-22 {
    right: 91.66666667%;
  }
  .ovui-col--pull-md-22.ovui-col--rtl {
    left: 91.66666667%;
    right: 0;
  }
  .ovui-col--pull-md-21 {
    right: 87.5%;
  }
  .ovui-col--pull-md-21.ovui-col--rtl {
    left: 87.5%;
    right: 0;
  }
  .ovui-col--pull-md-20 {
    right: 83.33333333%;
  }
  .ovui-col--pull-md-20.ovui-col--rtl {
    left: 83.33333333%;
    right: 0;
  }
  .ovui-col--pull-md-19 {
    right: 79.16666667%;
  }
  .ovui-col--pull-md-19.ovui-col--rtl {
    left: 79.16666667%;
    right: 0;
  }
  .ovui-col--pull-md-18 {
    right: 75%;
  }
  .ovui-col--pull-md-18.ovui-col--rtl {
    left: 75%;
    right: 0;
  }
  .ovui-col--pull-md-17 {
    right: 70.83333333%;
  }
  .ovui-col--pull-md-17.ovui-col--rtl {
    left: 70.83333333%;
    right: 0;
  }
  .ovui-col--pull-md-16 {
    right: 66.66666667%;
  }
  .ovui-col--pull-md-16.ovui-col--rtl {
    left: 66.66666667%;
    right: 0;
  }
  .ovui-col--pull-md-15 {
    right: 62.5%;
  }
  .ovui-col--pull-md-15.ovui-col--rtl {
    left: 62.5%;
    right: 0;
  }
  .ovui-col--pull-md-14 {
    right: 58.33333333%;
  }
  .ovui-col--pull-md-14.ovui-col--rtl {
    left: 58.33333333%;
    right: 0;
  }
  .ovui-col--pull-md-13 {
    right: 54.16666667%;
  }
  .ovui-col--pull-md-13.ovui-col--rtl {
    left: 54.16666667%;
    right: 0;
  }
  .ovui-col--pull-md-12 {
    right: 50%;
  }
  .ovui-col--pull-md-12.ovui-col--rtl {
    left: 50%;
    right: 0;
  }
  .ovui-col--pull-md-11 {
    right: 45.83333333%;
  }
  .ovui-col--pull-md-11.ovui-col--rtl {
    left: 45.83333333%;
    right: 0;
  }
  .ovui-col--pull-md-10 {
    right: 41.66666667%;
  }
  .ovui-col--pull-md-10.ovui-col--rtl {
    left: 41.66666667%;
    right: 0;
  }
  .ovui-col--pull-md-9 {
    right: 37.5%;
  }
  .ovui-col--pull-md-9.ovui-col--rtl {
    left: 37.5%;
    right: 0;
  }
  .ovui-col--pull-md-8 {
    right: 33.33333333%;
  }
  .ovui-col--pull-md-8.ovui-col--rtl {
    left: 33.33333333%;
    right: 0;
  }
  .ovui-col--pull-md-7 {
    right: 29.16666667%;
  }
  .ovui-col--pull-md-7.ovui-col--rtl {
    left: 29.16666667%;
    right: 0;
  }
  .ovui-col--pull-md-6 {
    right: 25%;
  }
  .ovui-col--pull-md-6.ovui-col--rtl {
    left: 25%;
    right: 0;
  }
  .ovui-col--pull-md-5 {
    right: 20.83333333%;
  }
  .ovui-col--pull-md-5.ovui-col--rtl {
    left: 20.83333333%;
    right: 0;
  }
  .ovui-col--pull-md-4 {
    right: 16.66666667%;
  }
  .ovui-col--pull-md-4.ovui-col--rtl {
    left: 16.66666667%;
    right: 0;
  }
  .ovui-col--pull-md-3 {
    right: 12.5%;
  }
  .ovui-col--pull-md-3.ovui-col--rtl {
    left: 12.5%;
    right: 0;
  }
  .ovui-col--pull-md-2 {
    right: 8.33333333%;
  }
  .ovui-col--pull-md-2.ovui-col--rtl {
    left: 8.33333333%;
    right: 0;
  }
  .ovui-col--pull-md-1 {
    right: 4.16666667%;
  }
  .ovui-col--pull-md-1.ovui-col--rtl {
    left: 4.16666667%;
    right: 0;
  }
  .ovui-col--pull-md-0 {
    right: 0%;
  }
  .ovui-col--pull-md-0.ovui-col--rtl {
    left: 0%;
    right: 0;
  }
  .ovui-col--push-md-23 {
    left: 95.83333333%;
  }
  .ovui-col--push-md-23.ovui-col--rtl {
    right: 95.83333333%;
    left: 0;
  }
  .ovui-col--push-md-22 {
    left: 91.66666667%;
  }
  .ovui-col--push-md-22.ovui-col--rtl {
    right: 91.66666667%;
    left: 0;
  }
  .ovui-col--push-md-21 {
    left: 87.5%;
  }
  .ovui-col--push-md-21.ovui-col--rtl {
    right: 87.5%;
    left: 0;
  }
  .ovui-col--push-md-20 {
    left: 83.33333333%;
  }
  .ovui-col--push-md-20.ovui-col--rtl {
    right: 83.33333333%;
    left: 0;
  }
  .ovui-col--push-md-19 {
    left: 79.16666667%;
  }
  .ovui-col--push-md-19.ovui-col--rtl {
    right: 79.16666667%;
    left: 0;
  }
  .ovui-col--push-md-18 {
    left: 75%;
  }
  .ovui-col--push-md-18.ovui-col--rtl {
    right: 75%;
    left: 0;
  }
  .ovui-col--push-md-17 {
    left: 70.83333333%;
  }
  .ovui-col--push-md-17.ovui-col--rtl {
    right: 70.83333333%;
    left: 0;
  }
  .ovui-col--push-md-16 {
    left: 66.66666667%;
  }
  .ovui-col--push-md-16.ovui-col--rtl {
    right: 66.66666667%;
    left: 0;
  }
  .ovui-col--push-md-15 {
    left: 62.5%;
  }
  .ovui-col--push-md-15.ovui-col--rtl {
    right: 62.5%;
    left: 0;
  }
  .ovui-col--push-md-14 {
    left: 58.33333333%;
  }
  .ovui-col--push-md-14.ovui-col--rtl {
    right: 58.33333333%;
    left: 0;
  }
  .ovui-col--push-md-13 {
    left: 54.16666667%;
  }
  .ovui-col--push-md-13.ovui-col--rtl {
    right: 54.16666667%;
    left: 0;
  }
  .ovui-col--push-md-12 {
    left: 50%;
  }
  .ovui-col--push-md-12.ovui-col--rtl {
    right: 50%;
    left: 0;
  }
  .ovui-col--push-md-11 {
    left: 45.83333333%;
  }
  .ovui-col--push-md-11.ovui-col--rtl {
    right: 45.83333333%;
    left: 0;
  }
  .ovui-col--push-md-10 {
    left: 41.66666667%;
  }
  .ovui-col--push-md-10.ovui-col--rtl {
    right: 41.66666667%;
    left: 0;
  }
  .ovui-col--push-md-9 {
    left: 37.5%;
  }
  .ovui-col--push-md-9.ovui-col--rtl {
    right: 37.5%;
    left: 0;
  }
  .ovui-col--push-md-8 {
    left: 33.33333333%;
  }
  .ovui-col--push-md-8.ovui-col--rtl {
    right: 33.33333333%;
    left: 0;
  }
  .ovui-col--push-md-7 {
    left: 29.16666667%;
  }
  .ovui-col--push-md-7.ovui-col--rtl {
    right: 29.16666667%;
    left: 0;
  }
  .ovui-col--push-md-6 {
    left: 25%;
  }
  .ovui-col--push-md-6.ovui-col--rtl {
    right: 25%;
    left: 0;
  }
  .ovui-col--push-md-5 {
    left: 20.83333333%;
  }
  .ovui-col--push-md-5.ovui-col--rtl {
    right: 20.83333333%;
    left: 0;
  }
  .ovui-col--push-md-4 {
    left: 16.66666667%;
  }
  .ovui-col--push-md-4.ovui-col--rtl {
    right: 16.66666667%;
    left: 0;
  }
  .ovui-col--push-md-3 {
    left: 12.5%;
  }
  .ovui-col--push-md-3.ovui-col--rtl {
    right: 12.5%;
    left: 0;
  }
  .ovui-col--push-md-2 {
    left: 8.33333333%;
  }
  .ovui-col--push-md-2.ovui-col--rtl {
    right: 8.33333333%;
    left: 0;
  }
  .ovui-col--push-md-1 {
    left: 4.16666667%;
  }
  .ovui-col--push-md-1.ovui-col--rtl {
    right: 4.16666667%;
    left: 0;
  }
  .ovui-col--push-md-0 {
    left: 0%;
  }
  .ovui-col--push-md-0.ovui-col--rtl {
    right: 0%;
    left: 0;
  }
}
.ovui-col--span-lg-0 {
  display: none;
}
@media screen and (min-width: 992px) {
  .ovui-col--span-lg-24 {
    flex-basis: 100%;
    max-width: 100%;
  }
  .ovui-col--span-lg-23 {
    flex-basis: 95.83333333%;
    max-width: 95.83333333%;
  }
  .ovui-col--span-lg-22 {
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }
  .ovui-col--span-lg-21 {
    flex-basis: 87.5%;
    max-width: 87.5%;
  }
  .ovui-col--span-lg-20 {
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }
  .ovui-col--span-lg-19 {
    flex-basis: 79.16666667%;
    max-width: 79.16666667%;
  }
  .ovui-col--span-lg-18 {
    flex-basis: 75%;
    max-width: 75%;
  }
  .ovui-col--span-lg-17 {
    flex-basis: 70.83333333%;
    max-width: 70.83333333%;
  }
  .ovui-col--span-lg-16 {
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }
  .ovui-col--span-lg-15 {
    flex-basis: 62.5%;
    max-width: 62.5%;
  }
  .ovui-col--span-lg-14 {
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }
  .ovui-col--span-lg-13 {
    flex-basis: 54.16666667%;
    max-width: 54.16666667%;
  }
  .ovui-col--span-lg-12 {
    flex-basis: 50%;
    max-width: 50%;
  }
  .ovui-col--span-lg-11 {
    flex-basis: 45.83333333%;
    max-width: 45.83333333%;
  }
  .ovui-col--span-lg-10 {
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }
  .ovui-col--span-lg-9 {
    flex-basis: 37.5%;
    max-width: 37.5%;
  }
  .ovui-col--span-lg-8 {
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }
  .ovui-col--span-lg-7 {
    flex-basis: 29.16666667%;
    max-width: 29.16666667%;
  }
  .ovui-col--span-lg-6 {
    flex-basis: 25%;
    max-width: 25%;
  }
  .ovui-col--span-lg-5 {
    flex-basis: 20.83333333%;
    max-width: 20.83333333%;
  }
  .ovui-col--span-lg-4 {
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }
  .ovui-col--span-lg-3 {
    flex-basis: 12.5%;
    max-width: 12.5%;
  }
  .ovui-col--span-lg-2 {
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }
  .ovui-col--span-lg-1 {
    flex-basis: 4.16666667%;
    max-width: 4.16666667%;
  }
  .ovui-col--offset-lg-23 {
    margin-left: 95.83333333%;
  }
  .ovui-col--offset-lg-23.ovui-col--rtl {
    margin-right: 95.83333333%;
    margin-left: 0;
  }
  .ovui-col--offset-lg-22 {
    margin-left: 91.66666667%;
  }
  .ovui-col--offset-lg-22.ovui-col--rtl {
    margin-right: 91.66666667%;
    margin-left: 0;
  }
  .ovui-col--offset-lg-21 {
    margin-left: 87.5%;
  }
  .ovui-col--offset-lg-21.ovui-col--rtl {
    margin-right: 87.5%;
    margin-left: 0;
  }
  .ovui-col--offset-lg-20 {
    margin-left: 83.33333333%;
  }
  .ovui-col--offset-lg-20.ovui-col--rtl {
    margin-right: 83.33333333%;
    margin-left: 0;
  }
  .ovui-col--offset-lg-19 {
    margin-left: 79.16666667%;
  }
  .ovui-col--offset-lg-19.ovui-col--rtl {
    margin-right: 79.16666667%;
    margin-left: 0;
  }
  .ovui-col--offset-lg-18 {
    margin-left: 75%;
  }
  .ovui-col--offset-lg-18.ovui-col--rtl {
    margin-right: 75%;
    margin-left: 0;
  }
  .ovui-col--offset-lg-17 {
    margin-left: 70.83333333%;
  }
  .ovui-col--offset-lg-17.ovui-col--rtl {
    margin-right: 70.83333333%;
    margin-left: 0;
  }
  .ovui-col--offset-lg-16 {
    margin-left: 66.66666667%;
  }
  .ovui-col--offset-lg-16.ovui-col--rtl {
    margin-right: 66.66666667%;
    margin-left: 0;
  }
  .ovui-col--offset-lg-15 {
    margin-left: 62.5%;
  }
  .ovui-col--offset-lg-15.ovui-col--rtl {
    margin-right: 62.5%;
    margin-left: 0;
  }
  .ovui-col--offset-lg-14 {
    margin-left: 58.33333333%;
  }
  .ovui-col--offset-lg-14.ovui-col--rtl {
    margin-right: 58.33333333%;
    margin-left: 0;
  }
  .ovui-col--offset-lg-13 {
    margin-left: 54.16666667%;
  }
  .ovui-col--offset-lg-13.ovui-col--rtl {
    margin-right: 54.16666667%;
    margin-left: 0;
  }
  .ovui-col--offset-lg-12 {
    margin-left: 50%;
  }
  .ovui-col--offset-lg-12.ovui-col--rtl {
    margin-right: 50%;
    margin-left: 0;
  }
  .ovui-col--offset-lg-11 {
    margin-left: 45.83333333%;
  }
  .ovui-col--offset-lg-11.ovui-col--rtl {
    margin-right: 45.83333333%;
    margin-left: 0;
  }
  .ovui-col--offset-lg-10 {
    margin-left: 41.66666667%;
  }
  .ovui-col--offset-lg-10.ovui-col--rtl {
    margin-right: 41.66666667%;
    margin-left: 0;
  }
  .ovui-col--offset-lg-9 {
    margin-left: 37.5%;
  }
  .ovui-col--offset-lg-9.ovui-col--rtl {
    margin-right: 37.5%;
    margin-left: 0;
  }
  .ovui-col--offset-lg-8 {
    margin-left: 33.33333333%;
  }
  .ovui-col--offset-lg-8.ovui-col--rtl {
    margin-right: 33.33333333%;
    margin-left: 0;
  }
  .ovui-col--offset-lg-7 {
    margin-left: 29.16666667%;
  }
  .ovui-col--offset-lg-7.ovui-col--rtl {
    margin-right: 29.16666667%;
    margin-left: 0;
  }
  .ovui-col--offset-lg-6 {
    margin-left: 25%;
  }
  .ovui-col--offset-lg-6.ovui-col--rtl {
    margin-right: 25%;
    margin-left: 0;
  }
  .ovui-col--offset-lg-5 {
    margin-left: 20.83333333%;
  }
  .ovui-col--offset-lg-5.ovui-col--rtl {
    margin-right: 20.83333333%;
    margin-left: 0;
  }
  .ovui-col--offset-lg-4 {
    margin-left: 16.66666667%;
  }
  .ovui-col--offset-lg-4.ovui-col--rtl {
    margin-right: 16.66666667%;
    margin-left: 0;
  }
  .ovui-col--offset-lg-3 {
    margin-left: 12.5%;
  }
  .ovui-col--offset-lg-3.ovui-col--rtl {
    margin-right: 12.5%;
    margin-left: 0;
  }
  .ovui-col--offset-lg-2 {
    margin-left: 8.33333333%;
  }
  .ovui-col--offset-lg-2.ovui-col--rtl {
    margin-right: 8.33333333%;
    margin-left: 0;
  }
  .ovui-col--offset-lg-1 {
    margin-left: 4.16666667%;
  }
  .ovui-col--offset-lg-1.ovui-col--rtl {
    margin-right: 4.16666667%;
    margin-left: 0;
  }
  .ovui-col--offset-lg-0 {
    margin-left: 0%;
  }
  .ovui-col--offset-lg-0.ovui-col--rtl {
    margin-right: 0%;
    margin-left: 0;
  }
  .ovui-col--order-lg-1 {
    order: 1;
  }
  .ovui-col--order-lg-2 {
    order: 2;
  }
  .ovui-col--order-lg-3 {
    order: 3;
  }
  .ovui-col--order-lg-4 {
    order: 4;
  }
  .ovui-col--order-lg-5 {
    order: 5;
  }
  .ovui-col--order-lg-6 {
    order: 6;
  }
  .ovui-col--order-lg-7 {
    order: 7;
  }
  .ovui-col--order-lg-8 {
    order: 8;
  }
  .ovui-col--order-lg-9 {
    order: 9;
  }
  .ovui-col--order-lg-10 {
    order: 10;
  }
  .ovui-col--order-lg-11 {
    order: 11;
  }
  .ovui-col--order-lg-12 {
    order: 12;
  }
  .ovui-col--order-lg-13 {
    order: 13;
  }
  .ovui-col--order-lg-14 {
    order: 14;
  }
  .ovui-col--order-lg-15 {
    order: 15;
  }
  .ovui-col--order-lg-16 {
    order: 16;
  }
  .ovui-col--order-lg-17 {
    order: 17;
  }
  .ovui-col--order-lg-18 {
    order: 18;
  }
  .ovui-col--order-lg-19 {
    order: 19;
  }
  .ovui-col--order-lg-20 {
    order: 20;
  }
  .ovui-col--order-lg-21 {
    order: 21;
  }
  .ovui-col--order-lg-22 {
    order: 22;
  }
  .ovui-col--order-lg-23 {
    order: 23;
  }
  .ovui-col--order-lg-24 {
    order: 24;
  }
  .ovui-col--pull-lg-23 {
    right: 95.83333333%;
  }
  .ovui-col--pull-lg-23.ovui-col--rtl {
    left: 95.83333333%;
    right: 0;
  }
  .ovui-col--pull-lg-22 {
    right: 91.66666667%;
  }
  .ovui-col--pull-lg-22.ovui-col--rtl {
    left: 91.66666667%;
    right: 0;
  }
  .ovui-col--pull-lg-21 {
    right: 87.5%;
  }
  .ovui-col--pull-lg-21.ovui-col--rtl {
    left: 87.5%;
    right: 0;
  }
  .ovui-col--pull-lg-20 {
    right: 83.33333333%;
  }
  .ovui-col--pull-lg-20.ovui-col--rtl {
    left: 83.33333333%;
    right: 0;
  }
  .ovui-col--pull-lg-19 {
    right: 79.16666667%;
  }
  .ovui-col--pull-lg-19.ovui-col--rtl {
    left: 79.16666667%;
    right: 0;
  }
  .ovui-col--pull-lg-18 {
    right: 75%;
  }
  .ovui-col--pull-lg-18.ovui-col--rtl {
    left: 75%;
    right: 0;
  }
  .ovui-col--pull-lg-17 {
    right: 70.83333333%;
  }
  .ovui-col--pull-lg-17.ovui-col--rtl {
    left: 70.83333333%;
    right: 0;
  }
  .ovui-col--pull-lg-16 {
    right: 66.66666667%;
  }
  .ovui-col--pull-lg-16.ovui-col--rtl {
    left: 66.66666667%;
    right: 0;
  }
  .ovui-col--pull-lg-15 {
    right: 62.5%;
  }
  .ovui-col--pull-lg-15.ovui-col--rtl {
    left: 62.5%;
    right: 0;
  }
  .ovui-col--pull-lg-14 {
    right: 58.33333333%;
  }
  .ovui-col--pull-lg-14.ovui-col--rtl {
    left: 58.33333333%;
    right: 0;
  }
  .ovui-col--pull-lg-13 {
    right: 54.16666667%;
  }
  .ovui-col--pull-lg-13.ovui-col--rtl {
    left: 54.16666667%;
    right: 0;
  }
  .ovui-col--pull-lg-12 {
    right: 50%;
  }
  .ovui-col--pull-lg-12.ovui-col--rtl {
    left: 50%;
    right: 0;
  }
  .ovui-col--pull-lg-11 {
    right: 45.83333333%;
  }
  .ovui-col--pull-lg-11.ovui-col--rtl {
    left: 45.83333333%;
    right: 0;
  }
  .ovui-col--pull-lg-10 {
    right: 41.66666667%;
  }
  .ovui-col--pull-lg-10.ovui-col--rtl {
    left: 41.66666667%;
    right: 0;
  }
  .ovui-col--pull-lg-9 {
    right: 37.5%;
  }
  .ovui-col--pull-lg-9.ovui-col--rtl {
    left: 37.5%;
    right: 0;
  }
  .ovui-col--pull-lg-8 {
    right: 33.33333333%;
  }
  .ovui-col--pull-lg-8.ovui-col--rtl {
    left: 33.33333333%;
    right: 0;
  }
  .ovui-col--pull-lg-7 {
    right: 29.16666667%;
  }
  .ovui-col--pull-lg-7.ovui-col--rtl {
    left: 29.16666667%;
    right: 0;
  }
  .ovui-col--pull-lg-6 {
    right: 25%;
  }
  .ovui-col--pull-lg-6.ovui-col--rtl {
    left: 25%;
    right: 0;
  }
  .ovui-col--pull-lg-5 {
    right: 20.83333333%;
  }
  .ovui-col--pull-lg-5.ovui-col--rtl {
    left: 20.83333333%;
    right: 0;
  }
  .ovui-col--pull-lg-4 {
    right: 16.66666667%;
  }
  .ovui-col--pull-lg-4.ovui-col--rtl {
    left: 16.66666667%;
    right: 0;
  }
  .ovui-col--pull-lg-3 {
    right: 12.5%;
  }
  .ovui-col--pull-lg-3.ovui-col--rtl {
    left: 12.5%;
    right: 0;
  }
  .ovui-col--pull-lg-2 {
    right: 8.33333333%;
  }
  .ovui-col--pull-lg-2.ovui-col--rtl {
    left: 8.33333333%;
    right: 0;
  }
  .ovui-col--pull-lg-1 {
    right: 4.16666667%;
  }
  .ovui-col--pull-lg-1.ovui-col--rtl {
    left: 4.16666667%;
    right: 0;
  }
  .ovui-col--pull-lg-0 {
    right: 0%;
  }
  .ovui-col--pull-lg-0.ovui-col--rtl {
    left: 0%;
    right: 0;
  }
  .ovui-col--push-lg-23 {
    left: 95.83333333%;
  }
  .ovui-col--push-lg-23.ovui-col--rtl {
    right: 95.83333333%;
    left: 0;
  }
  .ovui-col--push-lg-22 {
    left: 91.66666667%;
  }
  .ovui-col--push-lg-22.ovui-col--rtl {
    right: 91.66666667%;
    left: 0;
  }
  .ovui-col--push-lg-21 {
    left: 87.5%;
  }
  .ovui-col--push-lg-21.ovui-col--rtl {
    right: 87.5%;
    left: 0;
  }
  .ovui-col--push-lg-20 {
    left: 83.33333333%;
  }
  .ovui-col--push-lg-20.ovui-col--rtl {
    right: 83.33333333%;
    left: 0;
  }
  .ovui-col--push-lg-19 {
    left: 79.16666667%;
  }
  .ovui-col--push-lg-19.ovui-col--rtl {
    right: 79.16666667%;
    left: 0;
  }
  .ovui-col--push-lg-18 {
    left: 75%;
  }
  .ovui-col--push-lg-18.ovui-col--rtl {
    right: 75%;
    left: 0;
  }
  .ovui-col--push-lg-17 {
    left: 70.83333333%;
  }
  .ovui-col--push-lg-17.ovui-col--rtl {
    right: 70.83333333%;
    left: 0;
  }
  .ovui-col--push-lg-16 {
    left: 66.66666667%;
  }
  .ovui-col--push-lg-16.ovui-col--rtl {
    right: 66.66666667%;
    left: 0;
  }
  .ovui-col--push-lg-15 {
    left: 62.5%;
  }
  .ovui-col--push-lg-15.ovui-col--rtl {
    right: 62.5%;
    left: 0;
  }
  .ovui-col--push-lg-14 {
    left: 58.33333333%;
  }
  .ovui-col--push-lg-14.ovui-col--rtl {
    right: 58.33333333%;
    left: 0;
  }
  .ovui-col--push-lg-13 {
    left: 54.16666667%;
  }
  .ovui-col--push-lg-13.ovui-col--rtl {
    right: 54.16666667%;
    left: 0;
  }
  .ovui-col--push-lg-12 {
    left: 50%;
  }
  .ovui-col--push-lg-12.ovui-col--rtl {
    right: 50%;
    left: 0;
  }
  .ovui-col--push-lg-11 {
    left: 45.83333333%;
  }
  .ovui-col--push-lg-11.ovui-col--rtl {
    right: 45.83333333%;
    left: 0;
  }
  .ovui-col--push-lg-10 {
    left: 41.66666667%;
  }
  .ovui-col--push-lg-10.ovui-col--rtl {
    right: 41.66666667%;
    left: 0;
  }
  .ovui-col--push-lg-9 {
    left: 37.5%;
  }
  .ovui-col--push-lg-9.ovui-col--rtl {
    right: 37.5%;
    left: 0;
  }
  .ovui-col--push-lg-8 {
    left: 33.33333333%;
  }
  .ovui-col--push-lg-8.ovui-col--rtl {
    right: 33.33333333%;
    left: 0;
  }
  .ovui-col--push-lg-7 {
    left: 29.16666667%;
  }
  .ovui-col--push-lg-7.ovui-col--rtl {
    right: 29.16666667%;
    left: 0;
  }
  .ovui-col--push-lg-6 {
    left: 25%;
  }
  .ovui-col--push-lg-6.ovui-col--rtl {
    right: 25%;
    left: 0;
  }
  .ovui-col--push-lg-5 {
    left: 20.83333333%;
  }
  .ovui-col--push-lg-5.ovui-col--rtl {
    right: 20.83333333%;
    left: 0;
  }
  .ovui-col--push-lg-4 {
    left: 16.66666667%;
  }
  .ovui-col--push-lg-4.ovui-col--rtl {
    right: 16.66666667%;
    left: 0;
  }
  .ovui-col--push-lg-3 {
    left: 12.5%;
  }
  .ovui-col--push-lg-3.ovui-col--rtl {
    right: 12.5%;
    left: 0;
  }
  .ovui-col--push-lg-2 {
    left: 8.33333333%;
  }
  .ovui-col--push-lg-2.ovui-col--rtl {
    right: 8.33333333%;
    left: 0;
  }
  .ovui-col--push-lg-1 {
    left: 4.16666667%;
  }
  .ovui-col--push-lg-1.ovui-col--rtl {
    right: 4.16666667%;
    left: 0;
  }
  .ovui-col--push-lg-0 {
    left: 0%;
  }
  .ovui-col--push-lg-0.ovui-col--rtl {
    right: 0%;
    left: 0;
  }
}
.ovui-col--span-xl-0 {
  display: none;
}
@media screen and (min-width: 1200px) {
  .ovui-col--span-xl-24 {
    flex-basis: 100%;
    max-width: 100%;
  }
  .ovui-col--span-xl-23 {
    flex-basis: 95.83333333%;
    max-width: 95.83333333%;
  }
  .ovui-col--span-xl-22 {
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }
  .ovui-col--span-xl-21 {
    flex-basis: 87.5%;
    max-width: 87.5%;
  }
  .ovui-col--span-xl-20 {
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }
  .ovui-col--span-xl-19 {
    flex-basis: 79.16666667%;
    max-width: 79.16666667%;
  }
  .ovui-col--span-xl-18 {
    flex-basis: 75%;
    max-width: 75%;
  }
  .ovui-col--span-xl-17 {
    flex-basis: 70.83333333%;
    max-width: 70.83333333%;
  }
  .ovui-col--span-xl-16 {
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }
  .ovui-col--span-xl-15 {
    flex-basis: 62.5%;
    max-width: 62.5%;
  }
  .ovui-col--span-xl-14 {
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }
  .ovui-col--span-xl-13 {
    flex-basis: 54.16666667%;
    max-width: 54.16666667%;
  }
  .ovui-col--span-xl-12 {
    flex-basis: 50%;
    max-width: 50%;
  }
  .ovui-col--span-xl-11 {
    flex-basis: 45.83333333%;
    max-width: 45.83333333%;
  }
  .ovui-col--span-xl-10 {
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }
  .ovui-col--span-xl-9 {
    flex-basis: 37.5%;
    max-width: 37.5%;
  }
  .ovui-col--span-xl-8 {
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }
  .ovui-col--span-xl-7 {
    flex-basis: 29.16666667%;
    max-width: 29.16666667%;
  }
  .ovui-col--span-xl-6 {
    flex-basis: 25%;
    max-width: 25%;
  }
  .ovui-col--span-xl-5 {
    flex-basis: 20.83333333%;
    max-width: 20.83333333%;
  }
  .ovui-col--span-xl-4 {
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }
  .ovui-col--span-xl-3 {
    flex-basis: 12.5%;
    max-width: 12.5%;
  }
  .ovui-col--span-xl-2 {
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }
  .ovui-col--span-xl-1 {
    flex-basis: 4.16666667%;
    max-width: 4.16666667%;
  }
  .ovui-col--offset-xl-23 {
    margin-left: 95.83333333%;
  }
  .ovui-col--offset-xl-23.ovui-col--rtl {
    margin-right: 95.83333333%;
    margin-left: 0;
  }
  .ovui-col--offset-xl-22 {
    margin-left: 91.66666667%;
  }
  .ovui-col--offset-xl-22.ovui-col--rtl {
    margin-right: 91.66666667%;
    margin-left: 0;
  }
  .ovui-col--offset-xl-21 {
    margin-left: 87.5%;
  }
  .ovui-col--offset-xl-21.ovui-col--rtl {
    margin-right: 87.5%;
    margin-left: 0;
  }
  .ovui-col--offset-xl-20 {
    margin-left: 83.33333333%;
  }
  .ovui-col--offset-xl-20.ovui-col--rtl {
    margin-right: 83.33333333%;
    margin-left: 0;
  }
  .ovui-col--offset-xl-19 {
    margin-left: 79.16666667%;
  }
  .ovui-col--offset-xl-19.ovui-col--rtl {
    margin-right: 79.16666667%;
    margin-left: 0;
  }
  .ovui-col--offset-xl-18 {
    margin-left: 75%;
  }
  .ovui-col--offset-xl-18.ovui-col--rtl {
    margin-right: 75%;
    margin-left: 0;
  }
  .ovui-col--offset-xl-17 {
    margin-left: 70.83333333%;
  }
  .ovui-col--offset-xl-17.ovui-col--rtl {
    margin-right: 70.83333333%;
    margin-left: 0;
  }
  .ovui-col--offset-xl-16 {
    margin-left: 66.66666667%;
  }
  .ovui-col--offset-xl-16.ovui-col--rtl {
    margin-right: 66.66666667%;
    margin-left: 0;
  }
  .ovui-col--offset-xl-15 {
    margin-left: 62.5%;
  }
  .ovui-col--offset-xl-15.ovui-col--rtl {
    margin-right: 62.5%;
    margin-left: 0;
  }
  .ovui-col--offset-xl-14 {
    margin-left: 58.33333333%;
  }
  .ovui-col--offset-xl-14.ovui-col--rtl {
    margin-right: 58.33333333%;
    margin-left: 0;
  }
  .ovui-col--offset-xl-13 {
    margin-left: 54.16666667%;
  }
  .ovui-col--offset-xl-13.ovui-col--rtl {
    margin-right: 54.16666667%;
    margin-left: 0;
  }
  .ovui-col--offset-xl-12 {
    margin-left: 50%;
  }
  .ovui-col--offset-xl-12.ovui-col--rtl {
    margin-right: 50%;
    margin-left: 0;
  }
  .ovui-col--offset-xl-11 {
    margin-left: 45.83333333%;
  }
  .ovui-col--offset-xl-11.ovui-col--rtl {
    margin-right: 45.83333333%;
    margin-left: 0;
  }
  .ovui-col--offset-xl-10 {
    margin-left: 41.66666667%;
  }
  .ovui-col--offset-xl-10.ovui-col--rtl {
    margin-right: 41.66666667%;
    margin-left: 0;
  }
  .ovui-col--offset-xl-9 {
    margin-left: 37.5%;
  }
  .ovui-col--offset-xl-9.ovui-col--rtl {
    margin-right: 37.5%;
    margin-left: 0;
  }
  .ovui-col--offset-xl-8 {
    margin-left: 33.33333333%;
  }
  .ovui-col--offset-xl-8.ovui-col--rtl {
    margin-right: 33.33333333%;
    margin-left: 0;
  }
  .ovui-col--offset-xl-7 {
    margin-left: 29.16666667%;
  }
  .ovui-col--offset-xl-7.ovui-col--rtl {
    margin-right: 29.16666667%;
    margin-left: 0;
  }
  .ovui-col--offset-xl-6 {
    margin-left: 25%;
  }
  .ovui-col--offset-xl-6.ovui-col--rtl {
    margin-right: 25%;
    margin-left: 0;
  }
  .ovui-col--offset-xl-5 {
    margin-left: 20.83333333%;
  }
  .ovui-col--offset-xl-5.ovui-col--rtl {
    margin-right: 20.83333333%;
    margin-left: 0;
  }
  .ovui-col--offset-xl-4 {
    margin-left: 16.66666667%;
  }
  .ovui-col--offset-xl-4.ovui-col--rtl {
    margin-right: 16.66666667%;
    margin-left: 0;
  }
  .ovui-col--offset-xl-3 {
    margin-left: 12.5%;
  }
  .ovui-col--offset-xl-3.ovui-col--rtl {
    margin-right: 12.5%;
    margin-left: 0;
  }
  .ovui-col--offset-xl-2 {
    margin-left: 8.33333333%;
  }
  .ovui-col--offset-xl-2.ovui-col--rtl {
    margin-right: 8.33333333%;
    margin-left: 0;
  }
  .ovui-col--offset-xl-1 {
    margin-left: 4.16666667%;
  }
  .ovui-col--offset-xl-1.ovui-col--rtl {
    margin-right: 4.16666667%;
    margin-left: 0;
  }
  .ovui-col--offset-xl-0 {
    margin-left: 0%;
  }
  .ovui-col--offset-xl-0.ovui-col--rtl {
    margin-right: 0%;
    margin-left: 0;
  }
  .ovui-col--order-xl-1 {
    order: 1;
  }
  .ovui-col--order-xl-2 {
    order: 2;
  }
  .ovui-col--order-xl-3 {
    order: 3;
  }
  .ovui-col--order-xl-4 {
    order: 4;
  }
  .ovui-col--order-xl-5 {
    order: 5;
  }
  .ovui-col--order-xl-6 {
    order: 6;
  }
  .ovui-col--order-xl-7 {
    order: 7;
  }
  .ovui-col--order-xl-8 {
    order: 8;
  }
  .ovui-col--order-xl-9 {
    order: 9;
  }
  .ovui-col--order-xl-10 {
    order: 10;
  }
  .ovui-col--order-xl-11 {
    order: 11;
  }
  .ovui-col--order-xl-12 {
    order: 12;
  }
  .ovui-col--order-xl-13 {
    order: 13;
  }
  .ovui-col--order-xl-14 {
    order: 14;
  }
  .ovui-col--order-xl-15 {
    order: 15;
  }
  .ovui-col--order-xl-16 {
    order: 16;
  }
  .ovui-col--order-xl-17 {
    order: 17;
  }
  .ovui-col--order-xl-18 {
    order: 18;
  }
  .ovui-col--order-xl-19 {
    order: 19;
  }
  .ovui-col--order-xl-20 {
    order: 20;
  }
  .ovui-col--order-xl-21 {
    order: 21;
  }
  .ovui-col--order-xl-22 {
    order: 22;
  }
  .ovui-col--order-xl-23 {
    order: 23;
  }
  .ovui-col--order-xl-24 {
    order: 24;
  }
  .ovui-col--pull-xl-23 {
    right: 95.83333333%;
  }
  .ovui-col--pull-xl-23.ovui-col--rtl {
    left: 95.83333333%;
    right: 0;
  }
  .ovui-col--pull-xl-22 {
    right: 91.66666667%;
  }
  .ovui-col--pull-xl-22.ovui-col--rtl {
    left: 91.66666667%;
    right: 0;
  }
  .ovui-col--pull-xl-21 {
    right: 87.5%;
  }
  .ovui-col--pull-xl-21.ovui-col--rtl {
    left: 87.5%;
    right: 0;
  }
  .ovui-col--pull-xl-20 {
    right: 83.33333333%;
  }
  .ovui-col--pull-xl-20.ovui-col--rtl {
    left: 83.33333333%;
    right: 0;
  }
  .ovui-col--pull-xl-19 {
    right: 79.16666667%;
  }
  .ovui-col--pull-xl-19.ovui-col--rtl {
    left: 79.16666667%;
    right: 0;
  }
  .ovui-col--pull-xl-18 {
    right: 75%;
  }
  .ovui-col--pull-xl-18.ovui-col--rtl {
    left: 75%;
    right: 0;
  }
  .ovui-col--pull-xl-17 {
    right: 70.83333333%;
  }
  .ovui-col--pull-xl-17.ovui-col--rtl {
    left: 70.83333333%;
    right: 0;
  }
  .ovui-col--pull-xl-16 {
    right: 66.66666667%;
  }
  .ovui-col--pull-xl-16.ovui-col--rtl {
    left: 66.66666667%;
    right: 0;
  }
  .ovui-col--pull-xl-15 {
    right: 62.5%;
  }
  .ovui-col--pull-xl-15.ovui-col--rtl {
    left: 62.5%;
    right: 0;
  }
  .ovui-col--pull-xl-14 {
    right: 58.33333333%;
  }
  .ovui-col--pull-xl-14.ovui-col--rtl {
    left: 58.33333333%;
    right: 0;
  }
  .ovui-col--pull-xl-13 {
    right: 54.16666667%;
  }
  .ovui-col--pull-xl-13.ovui-col--rtl {
    left: 54.16666667%;
    right: 0;
  }
  .ovui-col--pull-xl-12 {
    right: 50%;
  }
  .ovui-col--pull-xl-12.ovui-col--rtl {
    left: 50%;
    right: 0;
  }
  .ovui-col--pull-xl-11 {
    right: 45.83333333%;
  }
  .ovui-col--pull-xl-11.ovui-col--rtl {
    left: 45.83333333%;
    right: 0;
  }
  .ovui-col--pull-xl-10 {
    right: 41.66666667%;
  }
  .ovui-col--pull-xl-10.ovui-col--rtl {
    left: 41.66666667%;
    right: 0;
  }
  .ovui-col--pull-xl-9 {
    right: 37.5%;
  }
  .ovui-col--pull-xl-9.ovui-col--rtl {
    left: 37.5%;
    right: 0;
  }
  .ovui-col--pull-xl-8 {
    right: 33.33333333%;
  }
  .ovui-col--pull-xl-8.ovui-col--rtl {
    left: 33.33333333%;
    right: 0;
  }
  .ovui-col--pull-xl-7 {
    right: 29.16666667%;
  }
  .ovui-col--pull-xl-7.ovui-col--rtl {
    left: 29.16666667%;
    right: 0;
  }
  .ovui-col--pull-xl-6 {
    right: 25%;
  }
  .ovui-col--pull-xl-6.ovui-col--rtl {
    left: 25%;
    right: 0;
  }
  .ovui-col--pull-xl-5 {
    right: 20.83333333%;
  }
  .ovui-col--pull-xl-5.ovui-col--rtl {
    left: 20.83333333%;
    right: 0;
  }
  .ovui-col--pull-xl-4 {
    right: 16.66666667%;
  }
  .ovui-col--pull-xl-4.ovui-col--rtl {
    left: 16.66666667%;
    right: 0;
  }
  .ovui-col--pull-xl-3 {
    right: 12.5%;
  }
  .ovui-col--pull-xl-3.ovui-col--rtl {
    left: 12.5%;
    right: 0;
  }
  .ovui-col--pull-xl-2 {
    right: 8.33333333%;
  }
  .ovui-col--pull-xl-2.ovui-col--rtl {
    left: 8.33333333%;
    right: 0;
  }
  .ovui-col--pull-xl-1 {
    right: 4.16666667%;
  }
  .ovui-col--pull-xl-1.ovui-col--rtl {
    left: 4.16666667%;
    right: 0;
  }
  .ovui-col--pull-xl-0 {
    right: 0%;
  }
  .ovui-col--pull-xl-0.ovui-col--rtl {
    left: 0%;
    right: 0;
  }
  .ovui-col--push-xl-23 {
    left: 95.83333333%;
  }
  .ovui-col--push-xl-23.ovui-col--rtl {
    right: 95.83333333%;
    left: 0;
  }
  .ovui-col--push-xl-22 {
    left: 91.66666667%;
  }
  .ovui-col--push-xl-22.ovui-col--rtl {
    right: 91.66666667%;
    left: 0;
  }
  .ovui-col--push-xl-21 {
    left: 87.5%;
  }
  .ovui-col--push-xl-21.ovui-col--rtl {
    right: 87.5%;
    left: 0;
  }
  .ovui-col--push-xl-20 {
    left: 83.33333333%;
  }
  .ovui-col--push-xl-20.ovui-col--rtl {
    right: 83.33333333%;
    left: 0;
  }
  .ovui-col--push-xl-19 {
    left: 79.16666667%;
  }
  .ovui-col--push-xl-19.ovui-col--rtl {
    right: 79.16666667%;
    left: 0;
  }
  .ovui-col--push-xl-18 {
    left: 75%;
  }
  .ovui-col--push-xl-18.ovui-col--rtl {
    right: 75%;
    left: 0;
  }
  .ovui-col--push-xl-17 {
    left: 70.83333333%;
  }
  .ovui-col--push-xl-17.ovui-col--rtl {
    right: 70.83333333%;
    left: 0;
  }
  .ovui-col--push-xl-16 {
    left: 66.66666667%;
  }
  .ovui-col--push-xl-16.ovui-col--rtl {
    right: 66.66666667%;
    left: 0;
  }
  .ovui-col--push-xl-15 {
    left: 62.5%;
  }
  .ovui-col--push-xl-15.ovui-col--rtl {
    right: 62.5%;
    left: 0;
  }
  .ovui-col--push-xl-14 {
    left: 58.33333333%;
  }
  .ovui-col--push-xl-14.ovui-col--rtl {
    right: 58.33333333%;
    left: 0;
  }
  .ovui-col--push-xl-13 {
    left: 54.16666667%;
  }
  .ovui-col--push-xl-13.ovui-col--rtl {
    right: 54.16666667%;
    left: 0;
  }
  .ovui-col--push-xl-12 {
    left: 50%;
  }
  .ovui-col--push-xl-12.ovui-col--rtl {
    right: 50%;
    left: 0;
  }
  .ovui-col--push-xl-11 {
    left: 45.83333333%;
  }
  .ovui-col--push-xl-11.ovui-col--rtl {
    right: 45.83333333%;
    left: 0;
  }
  .ovui-col--push-xl-10 {
    left: 41.66666667%;
  }
  .ovui-col--push-xl-10.ovui-col--rtl {
    right: 41.66666667%;
    left: 0;
  }
  .ovui-col--push-xl-9 {
    left: 37.5%;
  }
  .ovui-col--push-xl-9.ovui-col--rtl {
    right: 37.5%;
    left: 0;
  }
  .ovui-col--push-xl-8 {
    left: 33.33333333%;
  }
  .ovui-col--push-xl-8.ovui-col--rtl {
    right: 33.33333333%;
    left: 0;
  }
  .ovui-col--push-xl-7 {
    left: 29.16666667%;
  }
  .ovui-col--push-xl-7.ovui-col--rtl {
    right: 29.16666667%;
    left: 0;
  }
  .ovui-col--push-xl-6 {
    left: 25%;
  }
  .ovui-col--push-xl-6.ovui-col--rtl {
    right: 25%;
    left: 0;
  }
  .ovui-col--push-xl-5 {
    left: 20.83333333%;
  }
  .ovui-col--push-xl-5.ovui-col--rtl {
    right: 20.83333333%;
    left: 0;
  }
  .ovui-col--push-xl-4 {
    left: 16.66666667%;
  }
  .ovui-col--push-xl-4.ovui-col--rtl {
    right: 16.66666667%;
    left: 0;
  }
  .ovui-col--push-xl-3 {
    left: 12.5%;
  }
  .ovui-col--push-xl-3.ovui-col--rtl {
    right: 12.5%;
    left: 0;
  }
  .ovui-col--push-xl-2 {
    left: 8.33333333%;
  }
  .ovui-col--push-xl-2.ovui-col--rtl {
    right: 8.33333333%;
    left: 0;
  }
  .ovui-col--push-xl-1 {
    left: 4.16666667%;
  }
  .ovui-col--push-xl-1.ovui-col--rtl {
    right: 4.16666667%;
    left: 0;
  }
  .ovui-col--push-xl-0 {
    left: 0%;
  }
  .ovui-col--push-xl-0.ovui-col--rtl {
    right: 0%;
    left: 0;
  }
}
.ovui-col--span-xxl-0 {
  display: none;
}
@media screen and (min-width: 1400px) {
  .ovui-col--span-xxl-24 {
    flex-basis: 100%;
    max-width: 100%;
  }
  .ovui-col--span-xxl-23 {
    flex-basis: 95.83333333%;
    max-width: 95.83333333%;
  }
  .ovui-col--span-xxl-22 {
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }
  .ovui-col--span-xxl-21 {
    flex-basis: 87.5%;
    max-width: 87.5%;
  }
  .ovui-col--span-xxl-20 {
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }
  .ovui-col--span-xxl-19 {
    flex-basis: 79.16666667%;
    max-width: 79.16666667%;
  }
  .ovui-col--span-xxl-18 {
    flex-basis: 75%;
    max-width: 75%;
  }
  .ovui-col--span-xxl-17 {
    flex-basis: 70.83333333%;
    max-width: 70.83333333%;
  }
  .ovui-col--span-xxl-16 {
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }
  .ovui-col--span-xxl-15 {
    flex-basis: 62.5%;
    max-width: 62.5%;
  }
  .ovui-col--span-xxl-14 {
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }
  .ovui-col--span-xxl-13 {
    flex-basis: 54.16666667%;
    max-width: 54.16666667%;
  }
  .ovui-col--span-xxl-12 {
    flex-basis: 50%;
    max-width: 50%;
  }
  .ovui-col--span-xxl-11 {
    flex-basis: 45.83333333%;
    max-width: 45.83333333%;
  }
  .ovui-col--span-xxl-10 {
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }
  .ovui-col--span-xxl-9 {
    flex-basis: 37.5%;
    max-width: 37.5%;
  }
  .ovui-col--span-xxl-8 {
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }
  .ovui-col--span-xxl-7 {
    flex-basis: 29.16666667%;
    max-width: 29.16666667%;
  }
  .ovui-col--span-xxl-6 {
    flex-basis: 25%;
    max-width: 25%;
  }
  .ovui-col--span-xxl-5 {
    flex-basis: 20.83333333%;
    max-width: 20.83333333%;
  }
  .ovui-col--span-xxl-4 {
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }
  .ovui-col--span-xxl-3 {
    flex-basis: 12.5%;
    max-width: 12.5%;
  }
  .ovui-col--span-xxl-2 {
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }
  .ovui-col--span-xxl-1 {
    flex-basis: 4.16666667%;
    max-width: 4.16666667%;
  }
  .ovui-col--offset-xxl-23 {
    margin-left: 95.83333333%;
  }
  .ovui-col--offset-xxl-23.ovui-col--rtl {
    margin-right: 95.83333333%;
    margin-left: 0;
  }
  .ovui-col--offset-xxl-22 {
    margin-left: 91.66666667%;
  }
  .ovui-col--offset-xxl-22.ovui-col--rtl {
    margin-right: 91.66666667%;
    margin-left: 0;
  }
  .ovui-col--offset-xxl-21 {
    margin-left: 87.5%;
  }
  .ovui-col--offset-xxl-21.ovui-col--rtl {
    margin-right: 87.5%;
    margin-left: 0;
  }
  .ovui-col--offset-xxl-20 {
    margin-left: 83.33333333%;
  }
  .ovui-col--offset-xxl-20.ovui-col--rtl {
    margin-right: 83.33333333%;
    margin-left: 0;
  }
  .ovui-col--offset-xxl-19 {
    margin-left: 79.16666667%;
  }
  .ovui-col--offset-xxl-19.ovui-col--rtl {
    margin-right: 79.16666667%;
    margin-left: 0;
  }
  .ovui-col--offset-xxl-18 {
    margin-left: 75%;
  }
  .ovui-col--offset-xxl-18.ovui-col--rtl {
    margin-right: 75%;
    margin-left: 0;
  }
  .ovui-col--offset-xxl-17 {
    margin-left: 70.83333333%;
  }
  .ovui-col--offset-xxl-17.ovui-col--rtl {
    margin-right: 70.83333333%;
    margin-left: 0;
  }
  .ovui-col--offset-xxl-16 {
    margin-left: 66.66666667%;
  }
  .ovui-col--offset-xxl-16.ovui-col--rtl {
    margin-right: 66.66666667%;
    margin-left: 0;
  }
  .ovui-col--offset-xxl-15 {
    margin-left: 62.5%;
  }
  .ovui-col--offset-xxl-15.ovui-col--rtl {
    margin-right: 62.5%;
    margin-left: 0;
  }
  .ovui-col--offset-xxl-14 {
    margin-left: 58.33333333%;
  }
  .ovui-col--offset-xxl-14.ovui-col--rtl {
    margin-right: 58.33333333%;
    margin-left: 0;
  }
  .ovui-col--offset-xxl-13 {
    margin-left: 54.16666667%;
  }
  .ovui-col--offset-xxl-13.ovui-col--rtl {
    margin-right: 54.16666667%;
    margin-left: 0;
  }
  .ovui-col--offset-xxl-12 {
    margin-left: 50%;
  }
  .ovui-col--offset-xxl-12.ovui-col--rtl {
    margin-right: 50%;
    margin-left: 0;
  }
  .ovui-col--offset-xxl-11 {
    margin-left: 45.83333333%;
  }
  .ovui-col--offset-xxl-11.ovui-col--rtl {
    margin-right: 45.83333333%;
    margin-left: 0;
  }
  .ovui-col--offset-xxl-10 {
    margin-left: 41.66666667%;
  }
  .ovui-col--offset-xxl-10.ovui-col--rtl {
    margin-right: 41.66666667%;
    margin-left: 0;
  }
  .ovui-col--offset-xxl-9 {
    margin-left: 37.5%;
  }
  .ovui-col--offset-xxl-9.ovui-col--rtl {
    margin-right: 37.5%;
    margin-left: 0;
  }
  .ovui-col--offset-xxl-8 {
    margin-left: 33.33333333%;
  }
  .ovui-col--offset-xxl-8.ovui-col--rtl {
    margin-right: 33.33333333%;
    margin-left: 0;
  }
  .ovui-col--offset-xxl-7 {
    margin-left: 29.16666667%;
  }
  .ovui-col--offset-xxl-7.ovui-col--rtl {
    margin-right: 29.16666667%;
    margin-left: 0;
  }
  .ovui-col--offset-xxl-6 {
    margin-left: 25%;
  }
  .ovui-col--offset-xxl-6.ovui-col--rtl {
    margin-right: 25%;
    margin-left: 0;
  }
  .ovui-col--offset-xxl-5 {
    margin-left: 20.83333333%;
  }
  .ovui-col--offset-xxl-5.ovui-col--rtl {
    margin-right: 20.83333333%;
    margin-left: 0;
  }
  .ovui-col--offset-xxl-4 {
    margin-left: 16.66666667%;
  }
  .ovui-col--offset-xxl-4.ovui-col--rtl {
    margin-right: 16.66666667%;
    margin-left: 0;
  }
  .ovui-col--offset-xxl-3 {
    margin-left: 12.5%;
  }
  .ovui-col--offset-xxl-3.ovui-col--rtl {
    margin-right: 12.5%;
    margin-left: 0;
  }
  .ovui-col--offset-xxl-2 {
    margin-left: 8.33333333%;
  }
  .ovui-col--offset-xxl-2.ovui-col--rtl {
    margin-right: 8.33333333%;
    margin-left: 0;
  }
  .ovui-col--offset-xxl-1 {
    margin-left: 4.16666667%;
  }
  .ovui-col--offset-xxl-1.ovui-col--rtl {
    margin-right: 4.16666667%;
    margin-left: 0;
  }
  .ovui-col--offset-xxl-0 {
    margin-left: 0%;
  }
  .ovui-col--offset-xxl-0.ovui-col--rtl {
    margin-right: 0%;
    margin-left: 0;
  }
  .ovui-col--order-xxl-1 {
    order: 1;
  }
  .ovui-col--order-xxl-2 {
    order: 2;
  }
  .ovui-col--order-xxl-3 {
    order: 3;
  }
  .ovui-col--order-xxl-4 {
    order: 4;
  }
  .ovui-col--order-xxl-5 {
    order: 5;
  }
  .ovui-col--order-xxl-6 {
    order: 6;
  }
  .ovui-col--order-xxl-7 {
    order: 7;
  }
  .ovui-col--order-xxl-8 {
    order: 8;
  }
  .ovui-col--order-xxl-9 {
    order: 9;
  }
  .ovui-col--order-xxl-10 {
    order: 10;
  }
  .ovui-col--order-xxl-11 {
    order: 11;
  }
  .ovui-col--order-xxl-12 {
    order: 12;
  }
  .ovui-col--order-xxl-13 {
    order: 13;
  }
  .ovui-col--order-xxl-14 {
    order: 14;
  }
  .ovui-col--order-xxl-15 {
    order: 15;
  }
  .ovui-col--order-xxl-16 {
    order: 16;
  }
  .ovui-col--order-xxl-17 {
    order: 17;
  }
  .ovui-col--order-xxl-18 {
    order: 18;
  }
  .ovui-col--order-xxl-19 {
    order: 19;
  }
  .ovui-col--order-xxl-20 {
    order: 20;
  }
  .ovui-col--order-xxl-21 {
    order: 21;
  }
  .ovui-col--order-xxl-22 {
    order: 22;
  }
  .ovui-col--order-xxl-23 {
    order: 23;
  }
  .ovui-col--order-xxl-24 {
    order: 24;
  }
  .ovui-col--pull-xxl-23 {
    right: 95.83333333%;
  }
  .ovui-col--pull-xxl-23.ovui-col--rtl {
    left: 95.83333333%;
    right: 0;
  }
  .ovui-col--pull-xxl-22 {
    right: 91.66666667%;
  }
  .ovui-col--pull-xxl-22.ovui-col--rtl {
    left: 91.66666667%;
    right: 0;
  }
  .ovui-col--pull-xxl-21 {
    right: 87.5%;
  }
  .ovui-col--pull-xxl-21.ovui-col--rtl {
    left: 87.5%;
    right: 0;
  }
  .ovui-col--pull-xxl-20 {
    right: 83.33333333%;
  }
  .ovui-col--pull-xxl-20.ovui-col--rtl {
    left: 83.33333333%;
    right: 0;
  }
  .ovui-col--pull-xxl-19 {
    right: 79.16666667%;
  }
  .ovui-col--pull-xxl-19.ovui-col--rtl {
    left: 79.16666667%;
    right: 0;
  }
  .ovui-col--pull-xxl-18 {
    right: 75%;
  }
  .ovui-col--pull-xxl-18.ovui-col--rtl {
    left: 75%;
    right: 0;
  }
  .ovui-col--pull-xxl-17 {
    right: 70.83333333%;
  }
  .ovui-col--pull-xxl-17.ovui-col--rtl {
    left: 70.83333333%;
    right: 0;
  }
  .ovui-col--pull-xxl-16 {
    right: 66.66666667%;
  }
  .ovui-col--pull-xxl-16.ovui-col--rtl {
    left: 66.66666667%;
    right: 0;
  }
  .ovui-col--pull-xxl-15 {
    right: 62.5%;
  }
  .ovui-col--pull-xxl-15.ovui-col--rtl {
    left: 62.5%;
    right: 0;
  }
  .ovui-col--pull-xxl-14 {
    right: 58.33333333%;
  }
  .ovui-col--pull-xxl-14.ovui-col--rtl {
    left: 58.33333333%;
    right: 0;
  }
  .ovui-col--pull-xxl-13 {
    right: 54.16666667%;
  }
  .ovui-col--pull-xxl-13.ovui-col--rtl {
    left: 54.16666667%;
    right: 0;
  }
  .ovui-col--pull-xxl-12 {
    right: 50%;
  }
  .ovui-col--pull-xxl-12.ovui-col--rtl {
    left: 50%;
    right: 0;
  }
  .ovui-col--pull-xxl-11 {
    right: 45.83333333%;
  }
  .ovui-col--pull-xxl-11.ovui-col--rtl {
    left: 45.83333333%;
    right: 0;
  }
  .ovui-col--pull-xxl-10 {
    right: 41.66666667%;
  }
  .ovui-col--pull-xxl-10.ovui-col--rtl {
    left: 41.66666667%;
    right: 0;
  }
  .ovui-col--pull-xxl-9 {
    right: 37.5%;
  }
  .ovui-col--pull-xxl-9.ovui-col--rtl {
    left: 37.5%;
    right: 0;
  }
  .ovui-col--pull-xxl-8 {
    right: 33.33333333%;
  }
  .ovui-col--pull-xxl-8.ovui-col--rtl {
    left: 33.33333333%;
    right: 0;
  }
  .ovui-col--pull-xxl-7 {
    right: 29.16666667%;
  }
  .ovui-col--pull-xxl-7.ovui-col--rtl {
    left: 29.16666667%;
    right: 0;
  }
  .ovui-col--pull-xxl-6 {
    right: 25%;
  }
  .ovui-col--pull-xxl-6.ovui-col--rtl {
    left: 25%;
    right: 0;
  }
  .ovui-col--pull-xxl-5 {
    right: 20.83333333%;
  }
  .ovui-col--pull-xxl-5.ovui-col--rtl {
    left: 20.83333333%;
    right: 0;
  }
  .ovui-col--pull-xxl-4 {
    right: 16.66666667%;
  }
  .ovui-col--pull-xxl-4.ovui-col--rtl {
    left: 16.66666667%;
    right: 0;
  }
  .ovui-col--pull-xxl-3 {
    right: 12.5%;
  }
  .ovui-col--pull-xxl-3.ovui-col--rtl {
    left: 12.5%;
    right: 0;
  }
  .ovui-col--pull-xxl-2 {
    right: 8.33333333%;
  }
  .ovui-col--pull-xxl-2.ovui-col--rtl {
    left: 8.33333333%;
    right: 0;
  }
  .ovui-col--pull-xxl-1 {
    right: 4.16666667%;
  }
  .ovui-col--pull-xxl-1.ovui-col--rtl {
    left: 4.16666667%;
    right: 0;
  }
  .ovui-col--pull-xxl-0 {
    right: 0%;
  }
  .ovui-col--pull-xxl-0.ovui-col--rtl {
    left: 0%;
    right: 0;
  }
  .ovui-col--push-xxl-23 {
    left: 95.83333333%;
  }
  .ovui-col--push-xxl-23.ovui-col--rtl {
    right: 95.83333333%;
    left: 0;
  }
  .ovui-col--push-xxl-22 {
    left: 91.66666667%;
  }
  .ovui-col--push-xxl-22.ovui-col--rtl {
    right: 91.66666667%;
    left: 0;
  }
  .ovui-col--push-xxl-21 {
    left: 87.5%;
  }
  .ovui-col--push-xxl-21.ovui-col--rtl {
    right: 87.5%;
    left: 0;
  }
  .ovui-col--push-xxl-20 {
    left: 83.33333333%;
  }
  .ovui-col--push-xxl-20.ovui-col--rtl {
    right: 83.33333333%;
    left: 0;
  }
  .ovui-col--push-xxl-19 {
    left: 79.16666667%;
  }
  .ovui-col--push-xxl-19.ovui-col--rtl {
    right: 79.16666667%;
    left: 0;
  }
  .ovui-col--push-xxl-18 {
    left: 75%;
  }
  .ovui-col--push-xxl-18.ovui-col--rtl {
    right: 75%;
    left: 0;
  }
  .ovui-col--push-xxl-17 {
    left: 70.83333333%;
  }
  .ovui-col--push-xxl-17.ovui-col--rtl {
    right: 70.83333333%;
    left: 0;
  }
  .ovui-col--push-xxl-16 {
    left: 66.66666667%;
  }
  .ovui-col--push-xxl-16.ovui-col--rtl {
    right: 66.66666667%;
    left: 0;
  }
  .ovui-col--push-xxl-15 {
    left: 62.5%;
  }
  .ovui-col--push-xxl-15.ovui-col--rtl {
    right: 62.5%;
    left: 0;
  }
  .ovui-col--push-xxl-14 {
    left: 58.33333333%;
  }
  .ovui-col--push-xxl-14.ovui-col--rtl {
    right: 58.33333333%;
    left: 0;
  }
  .ovui-col--push-xxl-13 {
    left: 54.16666667%;
  }
  .ovui-col--push-xxl-13.ovui-col--rtl {
    right: 54.16666667%;
    left: 0;
  }
  .ovui-col--push-xxl-12 {
    left: 50%;
  }
  .ovui-col--push-xxl-12.ovui-col--rtl {
    right: 50%;
    left: 0;
  }
  .ovui-col--push-xxl-11 {
    left: 45.83333333%;
  }
  .ovui-col--push-xxl-11.ovui-col--rtl {
    right: 45.83333333%;
    left: 0;
  }
  .ovui-col--push-xxl-10 {
    left: 41.66666667%;
  }
  .ovui-col--push-xxl-10.ovui-col--rtl {
    right: 41.66666667%;
    left: 0;
  }
  .ovui-col--push-xxl-9 {
    left: 37.5%;
  }
  .ovui-col--push-xxl-9.ovui-col--rtl {
    right: 37.5%;
    left: 0;
  }
  .ovui-col--push-xxl-8 {
    left: 33.33333333%;
  }
  .ovui-col--push-xxl-8.ovui-col--rtl {
    right: 33.33333333%;
    left: 0;
  }
  .ovui-col--push-xxl-7 {
    left: 29.16666667%;
  }
  .ovui-col--push-xxl-7.ovui-col--rtl {
    right: 29.16666667%;
    left: 0;
  }
  .ovui-col--push-xxl-6 {
    left: 25%;
  }
  .ovui-col--push-xxl-6.ovui-col--rtl {
    right: 25%;
    left: 0;
  }
  .ovui-col--push-xxl-5 {
    left: 20.83333333%;
  }
  .ovui-col--push-xxl-5.ovui-col--rtl {
    right: 20.83333333%;
    left: 0;
  }
  .ovui-col--push-xxl-4 {
    left: 16.66666667%;
  }
  .ovui-col--push-xxl-4.ovui-col--rtl {
    right: 16.66666667%;
    left: 0;
  }
  .ovui-col--push-xxl-3 {
    left: 12.5%;
  }
  .ovui-col--push-xxl-3.ovui-col--rtl {
    right: 12.5%;
    left: 0;
  }
  .ovui-col--push-xxl-2 {
    left: 8.33333333%;
  }
  .ovui-col--push-xxl-2.ovui-col--rtl {
    right: 8.33333333%;
    left: 0;
  }
  .ovui-col--push-xxl-1 {
    left: 4.16666667%;
  }
  .ovui-col--push-xxl-1.ovui-col--rtl {
    right: 4.16666667%;
    left: 0;
  }
  .ovui-col--push-xxl-0 {
    left: 0%;
  }
  .ovui-col--push-xxl-0.ovui-col--rtl {
    right: 0%;
    left: 0;
  }
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.ovui-form {
  display: block;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* Form */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.ovui-form-item {
  display: flex;
  margin-bottom: 32px;
}
.ovui-form-item--with-error {
  margin-bottom: 8px;
}
.ovui-form-item__label {
  line-height: 22px;
  padding: 6px 16px;
  position: relative;
  font-size: 14px;
  color: #31343B !important;
}
.ovui-form-item__label--required::after {
  background-color: #ff0060;
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  top: 15px;
  right: 6px;
  border-radius: 50%;
}
.ovui-form-item--align-left .ovui-form-item__label {
  text-align: left;
}
.ovui-form-item--align-right .ovui-form-item__label {
  text-align: right;
}
.ovui-form-item__control {
  flex: 1 1 0;
  align-items: center;
  flex-direction: column;
}
.ovui-form-item__control__content {
  display: flex;
  align-items: center;
  flex: auto;
  max-width: 100%;
  min-height: 34px;
}
.ovui-form-item__control__extra {
  margin-top: 4px;
}
.ovui-form-item__control__error {
  color: #ff0060;
  font-size: 12px;
  line-height: 20px;
}
.ovui-form-item__control__help {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  line-height: 20px;
}
.ovui-form-item__control__error + .ovui-form-item__control__help {
  padding-bottom: 4px;
}
.ovui-form-item--layout-vertical {
  display: block;
}
.ovui-form-item--layout-vertical .ovui-form-item__label {
  display: block;
  padding: 0;
  text-align: left;
  margin-bottom: 8px;
}
.ovui-form-item--layout-vertical .ovui-form-item__label::after {
  content: none;
}
.ovui-form-item--layout-vertical .ovui-form-item__label--required label {
  position: relative;
  color: #31343B;
}
.ovui-form-item--layout-vertical .ovui-form-item__label--required label::after {
  background-color: #ff0060;
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  top: 7px;
  right: -12px;
  border-radius: 50%;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.ovui-grid {
  display: grid;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.ovui-image-preview {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
}
.ovui-image-preview__mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  background-color: #000;
  opacity: 0.5;
}
.ovui-image-preview__wrap {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  overflow: auto;
  outline: 0;
}
.ovui-image-preview__img-container {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
.ovui-image-preview__img {
  max-height: 100%;
  max-width: 100%;
  margin: auto;
  -moz-user-select: none;
       user-select: none;
  cursor: grab;
  pointer-events: all;
  transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s;
}
.ovui-image-preview__toolbar {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  list-style: none;
  padding: 0 20px;
  border-radius: 24px;
  height: 42px;
  color: rgba(0, 0, 0, 0);
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}
.ovui-image-preview__toolbar-item {
  display: inline-flex;
  justify-content: center;
  margin: 0 8px;
  cursor: pointer;
  -moz-user-select: none;
       user-select: none;
}
.ovui-image-preview__toolbar-item .ovui-icon {
  display: inline-flex;
  align-items: center;
}
.ovui-image-preview__toolbar-item.zoom-percent {
  font-size: 14px;
}
.ovui-image-preview__toolbar-item.divider {
  height: 16px;
  width: 1px;
  background: #302842;
  opacity: 0.3;
}
.ovui-image-preview__toolbar-item__percent {
  display: inline-flex;
  justify-content: center;
  width: 38px;
}
.ovui-image-preview__left-switcher {
  color: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 32px;
  height: 48px;
  width: 48px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.ovui-image-preview__left-switcher .ovui-icon svg {
  width: 20px;
  height: 20px;
}
.ovui-image-preview__right-switcher {
  color: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 32px;
  height: 48px;
  width: 48px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.ovui-image-preview__right-switcher .ovui-icon svg {
  width: 20px;
  height: 20px;
}
.ovui-image-preview__close {
  color: #fff;
  position: absolute;
  top: 32px;
  right: 32px;
  height: 48px;
  width: 48px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.ovui-image {
  display: inline-flex;
}
.ovui-image__hidden {
  display: none;
}
.ovui-image__img {
  width: 100%;
  display: block;
}
.ovui-image__img--preview {
  cursor: zoom-in;
}
.ovui-image__extra-count {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: "OC-OPPOSans";
  font-weight: 600;
  cursor: pointer;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.ovui-infinite-scroll {
  overflow: auto;
}
.ovui-infinite-scroll::-webkit-scrollbar-track-piece {
  background-color: transparent;
}
.ovui-infinite-scroll::-webkit-scrollbar {
  width: 6px;
  height: 9px;
}
.ovui-infinite-scroll::-webkit-scrollbar-thumb {
  background-color: #ebebed;
  border-radius: 3px;
  background-clip: padding-box;
  min-height: 28px;
}
.ovui-infinite-scroll::-webkit-scrollbar-thumb:hover {
  background-color: #dfe0e2;
}
.ovui-infinite-scroll__loader {
  display: flex;
  justify-content: center;
  font-size: 14px;
  line-height: 22px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/**
 * new Design Token
 */
/* Input */
/* Tag */
/* tips */
/* Select */
/* CustomInput */
.ovui-input-number {
  width: auto;
}
.ovui-input-number__content-wrapper {
  width: auto;
  flex: 1;
}
.ovui-input-number__content {
  flex-wrap: nowrap;
}
.ovui-input-number__vertical-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-input-number__up,
.ovui-input-number__down {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  align-self: stretch;
  flex: 1;
  cursor: pointer;
}
.ovui-input-number__up:hover,
.ovui-input-number__down:hover {
  color: #651dff;
}
.ovui-input-number__up:active,
.ovui-input-number__down:active {
  color: rgba(101, 29, 255, 0.75);
}
.ovui-input-number__angle-up {
  transform: rotate(180deg);
}
.ovui-input-number__prev {
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
}
.ovui-input-number__prev::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border-left: 1px solid transparent;
}
.ovui-input-number__next {
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
}
.ovui-input-number__next::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-left: 1px solid transparent;
}
.ovui-input-number__prev,
.ovui-input-number__next {
  position: relative;
  width: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  align-self: stretch;
}
.ovui-input-number__prev:hover,
.ovui-input-number__next:hover {
  color: #651dff;
}
.ovui-input-number__prev:active,
.ovui-input-number__next:active {
  color: rgba(101, 29, 255, 0.75);
}
.ovui-input-number--stroke .ovui-custom-input__prefix {
  height: 100%;
}
.ovui-input-number--stroke .ovui-custom-input__prefix .ovui-input-number__prev {
  height: 100%;
}
.ovui-input-number--stroke .ovui-input-number__prev,
.ovui-input-number--stroke .ovui-input-number__next {
  background-color: rgba(255, 255, 255, 0.50196078);
}
.ovui-input-number--fill .ovui-input-number__prev::after {
  border-color: #dfe0e2;
}
.ovui-input-number--fill .ovui-input-number__next::after {
  border-color: #dfe0e2;
  top: 8px;
  bottom: 8px;
}
.ovui-input-number.ovui-input-number--horizontal {
  padding: 0;
}
.ovui-input-number.ovui-input-number--display-vertical {
  padding-right: 0;
}
.ovui-input-number.ovui-input-number--default-vertical {
  padding-right: 0;
}
.ovui-input-number.ovui-input-number--default-vertical .ovui-input-number__suffix {
  visibility: hidden;
}
.ovui-input-number.ovui-input-number--default-vertical .ovui-input-number__suffix--focused {
  visibility: visible;
}
.ovui-input-number.ovui-input-number--default-vertical:hover .ovui-input-number__suffix {
  visibility: visible;
}
.ovui-input-number--disabled,
.ovui-input-number--disabled .ovui-input-number__content-wrapper {
  cursor: not-allowed;
  color: inherit;
}
.ovui-input-number--disabled .ovui-input-number__vertical-wrapper .ovui-input-number__prev,
.ovui-input-number--disabled .ovui-input-number__next {
  background-color: transparent;
}
.ovui-input-number--disabled .ovui-input-number__up,
.ovui-input-number--disabled .ovui-input-number__down,
.ovui-input-number .ovui-input-number__up--disabled,
.ovui-input-number .ovui-input-number__down--disabled,
.ovui-input-number--disabled .ovui-input-number__divider,
.ovui-input-number--disabled .ovui-input-number__prev,
.ovui-input-number--disabled .ovui-input-number__next,
.ovui-input-number .ovui-input-number__prev--disabled,
.ovui-input-number .ovui-input-number__next--disabled {
  cursor: not-allowed;
  border-color: #f4f4f5;
  color: rgba(255, 255, 255, 0.25);
}
.ovui-input-number--rtl.ovui-input-number--display-vertical,
.ovui-input-number--rtl.ovui-input-number--default-vertical {
  padding-right: 8px;
  padding-left: 0;
}
.ovui-input-number--rtl .ovui-input-number__vertical-wrapper {
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.ovui-input-number--rtl .ovui-input-number__prev {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.ovui-input-number--rtl .ovui-input-number__prev::after {
  left: 0;
  right: auto;
}
.ovui-input-number--rtl .ovui-input-number__next {
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.ovui-input-number--rtl .ovui-input-number__next::after {
  right: 0;
  left: auto;
}
.ovui-input-number--rtl.ovui-input-number--stroke .ovui-input-number__up,
.ovui-input-number--rtl.ovui-input-number--stroke .ovui-input-number__down {
  border-right: 1px solid #dfe0e2;
  border-left: none;
}
.ovui-custom-input--xs .ovui-input-number__vertical-wrapper {
  width: 24px;
}
.ovui-custom-input--xs .ovui-input-number__vertical-wrapper .ovui-input-number__down svg {
  transition: all 0.1s ease-in-out;
}
.ovui-custom-input--xs .ovui-input-number__vertical-wrapper .ovui-input-number__down:hover svg {
  width: 14px;
  height: 14px;
}
.ovui-custom-input--xs .ovui-input-number__vertical-wrapper .ovui-input-number__up:has( + .ovui-input-number__down:hover) svg {
  width: 10px;
  height: 10px;
}
.ovui-custom-input--xs .ovui-input-number__vertical-wrapper .ovui-input-number__up svg {
  transition: all 0.1s ease-in-out;
}
.ovui-custom-input--xs .ovui-input-number__vertical-wrapper .ovui-input-number__up:hover svg {
  width: 14px;
  height: 14px;
}
.ovui-custom-input--xs .ovui-input-number__vertical-wrapper .ovui-input-number__up:hover + .ovui-input-number__down svg {
  width: 10px;
  height: 10px;
}
.ovui-custom-input--sm .ovui-input-number__vertical-wrapper {
  width: 24px;
}
.ovui-custom-input--sm .ovui-input-number__vertical-wrapper .ovui-input-number__down svg {
  transition: all 0.1s ease-in-out;
}
.ovui-custom-input--sm .ovui-input-number__vertical-wrapper .ovui-input-number__down:hover svg {
  width: 14px;
  height: 14px;
}
.ovui-custom-input--sm .ovui-input-number__vertical-wrapper .ovui-input-number__up:has( + .ovui-input-number__down:hover) svg {
  width: 10px;
  height: 10px;
}
.ovui-custom-input--sm .ovui-input-number__vertical-wrapper .ovui-input-number__up svg {
  transition: all 0.1s ease-in-out;
}
.ovui-custom-input--sm .ovui-input-number__vertical-wrapper .ovui-input-number__up:hover svg {
  width: 14px;
  height: 14px;
}
.ovui-custom-input--sm .ovui-input-number__vertical-wrapper .ovui-input-number__up:hover + .ovui-input-number__down svg {
  width: 10px;
  height: 10px;
}
.ovui-custom-input--md .ovui-input-number__vertical-wrapper {
  width: 28px;
}
.ovui-custom-input--md .ovui-input-number__vertical-wrapper .ovui-input-number__down svg {
  transition: all 0.1s ease-in-out;
}
.ovui-custom-input--md .ovui-input-number__vertical-wrapper .ovui-input-number__down:hover svg {
  width: 18px;
  height: 18px;
}
.ovui-custom-input--md .ovui-input-number__vertical-wrapper .ovui-input-number__up:has( + .ovui-input-number__down:hover) svg {
  width: 12px;
  height: 12px;
}
.ovui-custom-input--md .ovui-input-number__vertical-wrapper .ovui-input-number__up svg {
  transition: all 0.1s ease-in-out;
}
.ovui-custom-input--md .ovui-input-number__vertical-wrapper .ovui-input-number__up:hover svg {
  width: 18px;
  height: 18px;
}
.ovui-custom-input--md .ovui-input-number__vertical-wrapper .ovui-input-number__up:hover + .ovui-input-number__down svg {
  width: 12px;
  height: 12px;
}
.ovui-custom-input--xl .ovui-input-number__vertical-wrapper {
  width: 32px;
}
.ovui-custom-input--xl .ovui-input-number__vertical-wrapper .ovui-input-number__down svg {
  transition: all 0.1s ease-in-out;
}
.ovui-custom-input--xl .ovui-input-number__vertical-wrapper .ovui-input-number__down:hover svg {
  width: 18px;
  height: 18px;
}
.ovui-custom-input--xl .ovui-input-number__vertical-wrapper .ovui-input-number__up:has( + .ovui-input-number__down:hover) svg {
  width: 12px;
  height: 12px;
}
.ovui-custom-input--xl .ovui-input-number__vertical-wrapper .ovui-input-number__up svg {
  transition: all 0.1s ease-in-out;
}
.ovui-custom-input--xl .ovui-input-number__vertical-wrapper .ovui-input-number__up:hover svg {
  width: 18px;
  height: 18px;
}
.ovui-custom-input--xl .ovui-input-number__vertical-wrapper .ovui-input-number__up:hover + .ovui-input-number__down svg {
  width: 12px;
  height: 12px;
}
.ovui-custom-input--lg .ovui-input-number__vertical-wrapper {
  width: 28px;
}
.ovui-custom-input--lg .ovui-input-number__vertical-wrapper .ovui-input-number__down svg {
  transition: all 0.1s ease-in-out;
}
.ovui-custom-input--lg .ovui-input-number__vertical-wrapper .ovui-input-number__down:hover svg {
  width: 20px;
  height: 20px;
}
.ovui-custom-input--lg .ovui-input-number__vertical-wrapper .ovui-input-number__up:has( + .ovui-input-number__down:hover) svg {
  width: 14px;
  height: 14px;
}
.ovui-custom-input--lg .ovui-input-number__vertical-wrapper .ovui-input-number__up svg {
  transition: all 0.1s ease-in-out;
}
.ovui-custom-input--lg .ovui-input-number__vertical-wrapper .ovui-input-number__up:hover svg {
  width: 20px;
  height: 20px;
}
.ovui-custom-input--lg .ovui-input-number__vertical-wrapper .ovui-input-number__up:hover + .ovui-input-number__down svg {
  width: 14px;
  height: 14px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.ovui-layout {
  display: flex;
  flex-direction: column;
  flex: auto;
  min-height: 0;
}
.ovui-layout--has-sider {
  flex-direction: row;
}
.ovui-layout--has-sider > .ovui-layout,
.ovui-layout--has-sider > .ovui-layout-content {
  width: 0;
}
.ovui-layout-header,
.ovui-layout-footer {
  flex: 0 0 auto;
}
.ovui-layout-content {
  flex: auto;
  min-height: 0;
}
.ovui-layout-sider {
  position: relative;
  min-width: 0;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.ovui-list {
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 8px;
  border: 1px solid #dfe0e2;
  background-color: #302842;
  overflow: hidden;
}
.ovui-list__header {
  padding: 6px 12px;
  background-color: #3c344d;
  border-bottom: 1px solid #dfe0e2;
  font-size: 14px;
  line-height: 22px;
  display: flex;
  justify-content: space-between;
}
.ovui-list__title {
  font-weight: 600;
  flex: 1;
}
.ovui-list__body--disabled {
  cursor: not-allowed;
}
.ovui-list__body-scroller {
  height: 192px;
  overflow-y: auto;
  padding: 6px 0;
}
.ovui-list__body-scroller::-webkit-scrollbar-track-piece {
  background-color: transparent;
}
.ovui-list__body-scroller::-webkit-scrollbar {
  width: 6px;
  height: 9px;
}
.ovui-list__body-scroller::-webkit-scrollbar-thumb {
  background-color: #ebebed;
  border-radius: 3px;
  background-clip: padding-box;
  min-height: 28px;
}
.ovui-list__body-scroller::-webkit-scrollbar-thumb:hover {
  background-color: #dfe0e2;
}
.ovui-list__body-scroller--hidden {
  display: none;
}
.ovui-list__empty {
  height: 192px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ovui-list__footer {
  padding: 6px 12px;
}
.ovui-list .ovui-list-item__close {
  display: inline-flex;
  align-items: center;
}
.ovui-list .ovui-list-tag {
  display: flex;
  margin: 0 6px 6px 6px;
}
.ovui-list .ovui-list-tag:last-child {
  margin-bottom: 0;
}
.ovui-list .ovui-list-tag__content {
  flex: 1;
}
.ovui-list-item {
  display: flex;
  align-self: stretch;
  color: #ffffff;
  cursor: pointer;
}
.ovui-list-item__action {
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
}
.ovui-list-item__content {
  flex: 1;
  align-items: center;
}
.ovui-list-item__content--ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ovui-list-item__expand {
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
}
.ovui-list-item__expand--icon {
  color: #ffffff;
}
.ovui-list-item.ovui-list-item--grouped {
  padding-left: 24px;
  padding-right: 24px;
}
.ovui-list-item--single.ovui-list-item--selected {
  color: rgba(255, 255, 255, 0.75);
}
.ovui-list-item.ovui-list-item--disabled {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.25);
}
.ovui-list-item.ovui-list-item--disabled .ovui-list-item__expand--icon {
  color: rgba(255, 255, 255, 0.25);
}
.ovui-list-item.ovui-list-item--disabled.ovui-list-item--single.ovui-list-item--selected {
  color: rgba(255, 255, 255, 0.25);
}
.ovui-list-item:hover:not(.ovui-list-item--disabled) {
  background-color: #3c344d;
}
.ovui-list-item--xs {
  line-height: 20px;
  font-size: 12px;
  padding: 3px 12px;
}
.ovui-list-item--sm {
  line-height: 20px;
  font-size: 12px;
  padding: 5px 12px;
}
.ovui-list-item--md {
  line-height: 22px;
  font-size: 14px;
  padding: 6px 12px;
}
.ovui-list-item--lg {
  line-height: 24px;
  font-size: 16px;
  padding: 7px 12px;
}
.ovui-list-item--xl {
  line-height: 26px;
  font-size: 18px;
  padding: 8px 12px;
}
.ovui-list-item--rtl {
  direction: rtl;
}
.ovui-list-item--rtl .ovui-list-item__action {
  margin-right: 0;
  margin-left: 8px;
}
.ovui-list-item--rtl .ovui-list-item__expand {
  margin-left: 0;
  margin-right: 8px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* popover */
/**
 * Ocean Design Tokens 2.0
 */
/* menu */
/* menu-item */
/* menu-item / active / hover */
/* sub-menu */
/* menu-item-group */
.ovui-menu-item {
  height: 46px;
  color: #ffffff;
  font-size: 14px;
}
.ovui-menu-item-group__title {
  display: flex;
  align-items: center;
  height: 46px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}
.ovui-sub-menu__header {
  display: grid;
  grid-template-areas: "icon title arrow";
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: 46px;
  color: #ffffff;
  font-size: 14px;
  transition: color 0.1s, background-color 0.1s;
  padding-right: 18px;
}
.ovui-sub-menu__header:hover {
  cursor: pointer;
  color: #651dff;
  background-color: unset;
}
.ovui-sub-menu__header:hover .ovui-sub-menu__icon-arrow svg {
  fill: currentColor;
}
.ovui-sub-menu__header .ovui-sub-menu__icon-arrow {
  display: inline-flex;
}
.ovui-sub-menu__header .ovui-sub-menu__icon-arrow svg {
  transition: transform 0.2s;
}
.ovui-sub-menu__header--open {
  color: #651dff;
}
.ovui-sub-menu__header--open .ovui-sub-menu__icon-arrow svg {
  transform: rotate(180deg);
}
.ovui-sub-menu__header .ovui-sub-menu__icon {
  grid-area: icon;
  margin-right: 8px;
  display: inline-flex;
}
.ovui-sub-menu__header .ovui-sub-menu__title {
  grid-area: title;
  white-space: nowrap;
}
.ovui-sub-menu__header .ovui-sub-menu__arrow {
  grid-area: arrow;
}
.ovui-sub-menu__header--hide .ovui-sub-menu__title {
  opacity: 0;
}
.ovui-sub-menu__header--hide .ovui-sub-menu__arrow {
  opacity: 0;
}
.ovui-sub-menu__list {
  padding: 0;
  overflow: hidden;
}
.ovui-sub-menu--rtl .ovui-sub-menu__header {
  padding-left: 24px;
}
.ovui-menu-content {
  display: grid;
  grid-template-areas: "icon title";
  grid-template-columns: auto 1fr;
  align-items: center;
  height: 46px;
  color: #ffffff;
  font-size: 14px;
  transition: color 0.1s, background-color 0.1s;
  padding-right: 18px;
}
.ovui-menu-content--active {
  background-color: #381088;
  cursor: pointer;
  color: #651dff;
}
.ovui-menu-content:hover {
  cursor: pointer;
  color: #651dff;
}
.ovui-menu-content.ovui-sub-menu__header:hover {
  background-color: unset;
}
.ovui-menu-content__icon {
  display: inline-flex;
  grid-area: icon;
  margin-right: 8px;
}
.ovui-menu-content__title {
  grid-area: title;
  white-space: nowrap;
  transition: all 0.2s;
}
.ovui-menu-content__title--hide {
  opacity: 0;
}
.ovui-menu-content .ovui-icon__arrow {
  grid-area: arrow;
}
.ovui-menu-content .ovui-icon__arrow svg {
  transition: transform 0.2s;
}
.ovui-menu-content--open {
  color: #651dff;
}
.ovui-menu-content--open .ovui-icon__arrow svg {
  transform: rotate(180deg);
}
.ovui-menu-popper--hide {
  display: none;
}
.ovui-menu-popper .ovui-sub-menu__list--collapsed .ovui-sub-menu__header .ovui-sub-menu__icon-arrow svg {
  transform: rotate(-90deg);
}
.ovui-menu-popper__inner {
  margin: 0 10px;
  box-shadow: 0px 3px 9px 0 rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background: #4c4066;
  padding: 5px 0;
  min-width: 200px;
}
.ovui-menu-popper .ovui-sub-menu__popper-title {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  padding-left: 24px;
  padding-top: 16px;
}
.ovui-menu {
  width: 200px;
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #302842;
  transition: all 0.2s;
  overflow: hidden;
}
.ovui-menu--rtl {
  direction: rtl;
}
.ovui-menu--horizontal {
  display: flex;
  width: auto;
  justify-content: center;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* message */
/**
 * new Design Token
 */
.ovui-message-fade-enter-from,
.ovui-message-fade-leave-to {
  opacity: 0;
  transform: translate(0, -100%);
}
.ovui-message-fade-enter-active,
.ovui-message-fade-leave-active {
  transition: all 0.2s ease-in-out;
}
.ovui-message {
  padding: 6px;
  text-align: center;
}
.ovui-message:first-child {
  margin-top: -6px;
}
.ovui-message__content {
  display: inline-flex;
  align-items: center;
  pointer-events: all;
  background-color: #302842;
  box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 400;
  line-height: 22px;
  color: #ffffff;
  word-break: break-all;
}
.ovui-message__icon + .ovui-message__text {
  margin-left: 8px;
}
.ovui-message__text {
  display: inline-flex;
}
.ovui-message--info .ovui-message__icon {
  color: #651dff;
}
.ovui-message--success .ovui-message__icon {
  color: #00d5a4;
}
.ovui-message--warning .ovui-message__icon {
  color: #ff7c00;
}
.ovui-message--danger .ovui-message__icon {
  color: #ff0060;
}
.ovui-message--loading .ovui-message__icon {
  color: #651dff;
}
.ovui-message--rtl {
  direction: rtl;
}
.ovui-message--rtl .ovui-message__icon + .ovui-message__text {
  margin-right: 8px;
  margin-left: 0;
}
.ovui-message--teleport {
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  z-index: 9999;
}
#okee-message-container {
  position: fixed;
  width: 100%;
  top: 16px;
  left: 0;
  pointer-events: none;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* modal */
/**
 * Ocean Design Tokens 2.0
 */
.ovui-modal-fade-enter-active,
.ovui-modal-fade-leave-active {
  transition: all 0.2s ease-in-out;
}
.ovui-modal-fade-enter-from,
.ovui-modal-fade-leave-to {
  transform: scale(0.8);
}
.ovui-modal-fade-enter-to,
.ovui-modal-fade-leave-from {
  transform: scale(1);
}
.ovui-modal {
  position: relative;
  width: 600px;
  background: #302842;
  border-radius: 24px;
  box-shadow: 0px 3px 9px 0 rgba(0, 0, 0, 0.08);
  margin: auto;
}
.ovui-modal--topfix {
  align-items: flex-start;
}
.ovui-modal--hide {
  display: none;
}
.ovui-modal__wrap {
  display: flex;
  overflow: auto;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
}
.ovui-modal__wrap--hide {
  display: none;
}
.ovui-modal__header {
  padding: 24px 24px 20px 24px;
  color: #ffffff;
}
.ovui-modal__header-with-close {
  margin-right: 25px;
}
.ovui-modal__title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #ffffff;
}
.ovui-modal__body {
  padding: 0 24px 0 24px;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.ovui-modal__body-with-status {
  padding-left: 50px;
}
.ovui-modal__footer {
  padding: 24px 24px 24px 24px;
}
.ovui-modal__close-icon {
  position: absolute;
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.5);
  top: 25px;
  right: 25px;
  cursor: pointer;
  z-index: 1;
}
.ovui-modal__close-icon--hide {
  display: none;
}
.ovui-modal__close-icon:hover {
  color: rgba(255, 255, 255, 0.5);
}
.ovui-modal__close-icon:active {
  color: rgba(255, 255, 255, 0.5);
}
.ovui-modal__header-info,
.ovui-modal__header-success,
.ovui-modal__header-warning,
.ovui-modal__header-error {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
}
.ovui-modal__header-info .ovui-icon,
.ovui-modal__header-success .ovui-icon,
.ovui-modal__header-warning .ovui-icon,
.ovui-modal__header-error .ovui-icon {
  font-size: 18px;
  margin-right: 8px;
}
.ovui-modal__header-info .ovui-icon {
  color: #651dff;
}
.ovui-modal__header-success .ovui-icon {
  color: #00d5a4;
}
.ovui-modal__header-warning .ovui-icon {
  color: #ff7c00;
}
.ovui-modal__header-error .ovui-icon {
  color: #ff0060;
}
.ovui-modal__footer-btn-box {
  display: flex;
  justify-content: flex-end;
}
.ovui-modal__footer-btn-box .ovui-button + .ovui-button {
  margin-left: 12px;
}
.ovui-modal--divider .ovui-modal__header {
  padding: 24px;
}
.ovui-modal--divider .ovui-modal__body {
  background: rgba(255, 255, 255, 0.50196078);
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  padding: 0;
}
.ovui-modal--rtl {
  direction: rtl;
}
.ovui-modal--rtl .ovui-modal__close-icon {
  right: auto;
  left: 25px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* Input */
/* Tag */
/* tips */
/* Select */
/* CustomInput */
.ovui-multiple-input {
  position: relative;
}
.ovui-multiple-input__textarea {
  overflow: auto;
  height: 96px;
  padding: 3px 0 3px 3px !important;
  cursor: inherit;
}
.ovui-multiple-input__textarea .ovui-custom-input__content {
  gap: 4px;
  max-height: 100%;
  padding-right: 6px;
  align-items: self-start;
  align-content: baseline;
  overflow-y: auto;
}
.ovui-multiple-input__textarea .ovui-tag {
  margin: 0 !important;
  cursor: inherit !important;
}
.ovui-multiple-input__textarea .ovui-tag__close {
  cursor: pointer !important;
}
.ovui-multiple-input__textarea .ovui-custom-input__suffix {
  top: 3px;
  right: 8px;
  position: absolute;
}
.ovui-multiple-input__textarea .ovui-custom-input__search {
  margin: 1px 0 1px 2px !important;
}
.ovui-multiple-input__empty .ovui-custom-input__search {
  margin-left: 4px !important;
}
.ovui-multiple-input__total {
  position: absolute;
  right: 8px;
  bottom: 6px;
  color: #969aa0;
  font-size: 14px;
}
.ovui-multiple-input__clearable .ovui-custom-input__content {
  padding-right: 24px;
}
.ovui-multiple-input__total-show .ovui-custom-input__content {
  padding-right: 36px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.ovui-notification {
  display: flex;
  flex-direction: column;
  word-wrap: break-word;
  border-radius: 8px;
  box-shadow: 0px 3px 9px 0 rgba(0, 0, 0, 0.08);
  background: #302842;
  width: 384px;
  line-height: 22px;
  position: relative;
  margin-bottom: 12px;
  margin-left: 28px;
  margin-right: 16px;
  overflow: hidden;
}
.ovui-notification__container {
  padding: 16px;
}
.ovui-notification__header {
  display: flex;
  position: relative;
}
.ovui-notification__header__title {
  display: inline-block;
  width: 100%;
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 0;
  line-height: 22px;
}
.ovui-notification__header__type-icon {
  font-size: 16px;
  position: absolute;
  top: 2px;
  left: 0;
}
.ovui-notification__header__close {
  color: #969aa0;
  font-size: 16px;
  position: absolute;
  right: 0;
  top: 2px;
  cursor: pointer;
}
.ovui-notification__content {
  margin-top: 16px;
  font-size: 12px;
  line-height: 20px;
}
.ovui-notification__action {
  margin-top: 16px;
}
.ovui-notification__description {
  font-size: 12px;
  line-height: 20px;
  color: #666666;
}
.ovui-notification--success .ovui-notification__header__title,
.ovui-notification--warning .ovui-notification__header__title,
.ovui-notification--danger .ovui-notification__header__title,
.ovui-notification--info .ovui-notification__header__title {
  padding-left: 24px;
}
.ovui-notification--success .ovui-notification__header__type-icon {
  color: #00d5a4;
}
.ovui-notification--warning .ovui-notification__header__type-icon {
  color: #ff7c00;
}
.ovui-notification--info .ovui-notification__header__type-icon {
  color: #651dff;
}
.ovui-notification--danger .ovui-notification__header__type-icon {
  color: #ff0060;
}
.ovui-notification--closable .ovui-notification__header__title {
  padding-right: 22px;
}
#__okee-notification-container__ .notification-placement-container {
  position: fixed;
}
#__okee-notification-container__ .notification-placement-container-top-right {
  right: 0;
  top: 24px;
  bottom: auto;
}
#__okee-notification-container__ .notification-placement-container-top-left {
  left: 0;
  top: 24px;
  bottom: auto;
}
#__okee-notification-container__ .notification-placement-container-bottom-right {
  right: 0;
  top: auto;
  bottom: 24px;
}
#__okee-notification-container__ .notification-placement-container-bottom-left {
  left: 0;
  top: auto;
  bottom: 24px;
}
.ovui-notification-transition-top-right-enter-from,
.ovui-notification-transition-top-right-leave-to,
.ovui-notification-transition-bottom-right-enter-from,
.ovui-notification-transition-bottom-right-leave-to {
  opacity: 0;
  transform: translateX(100%);
  padding: 0;
  margin: 0;
}
.ovui-notification-transition-top-left-enter-from,
.ovui-notification-transition-top-left-leave-to,
.ovui-notification-transition-bottom-left-enter-from,
.ovui-notification-transition-bottom-left-leave-to {
  opacity: 0;
  transform: translateX(-100%);
  padding: 0;
  margin: 0;
}
.ovui-notification-transition-top-right-leave-from,
.ovui-notification-transition-top-right-enter-to,
.ovui-notification-transition-bottom-right-leave-from,
.ovui-notification-transition-bottom-right-enter-to,
.ovui-notification-transition-top-left-leave-from,
.ovui-notification-transition-top-left-enter-to,
.ovui-notification-transition-bottom-left-leave-from,
.ovui-notification-transition-bottom-left-enter-to {
  opacity: 1;
  transform: translateX(0%);
}
.ovui-notification-transition-top-right-enter-active,
.ovui-notification-transition-top-right-leave-active,
.ovui-notification-transition-bottom-right-enter-active,
.ovui-notification-transition-bottom-right-leave-active,
.ovui-notification-transition-top-left-enter-active,
.ovui-notification-transition-top-left-leave-active,
.ovui-notification-transition-bottom-left-enter-active,
.ovui-notification-transition-bottom-left-leave-active {
  transition: all 0.2s ease-in-out;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* pagination */
/* page-turner */
/* page-total */
/* page-jumper */
/**
* new design token
*/
.ovui-pagination .ovui-page-turner {
  display: inline-flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ovui-pagination .ovui-page-turner__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  font-size: 12px;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 24px;
  margin-left: 8px;
  padding: 0 5px;
  box-sizing: border-box;
  min-width: 24px;
  background-color: transparent;
}
.ovui-pagination .ovui-page-turner__item:first-of-type {
  margin-left: 0;
}
.ovui-pagination .ovui-page-turner__item .ovui-page-turner__prev-icon {
  transform: rotate(90deg);
}
.ovui-pagination .ovui-page-turner__item .ovui-page-turner__next-icon {
  transform: rotate(-90deg);
}
.ovui-pagination .ovui-page-turner__item--active {
  color: #651dff;
  border-color: #651dff;
  background-color: #302842;
}
.ovui-pagination .ovui-page-turner__item:hover {
  background-color: #302842;
  color: #d220ff;
  border: 1px solid #d220ff;
  cursor: pointer;
}
.ovui-pagination .ovui-page-turner__item:active {
  background-color: #302842;
  color: rgba(210, 32, 255, 0.74901961);
  border: 1px solid #d220ff;
}
.ovui-pagination .ovui-page-turner__item--disabled,
.ovui-pagination .ovui-page-turner__item--disabled:hover {
  border-color: #ffffff;
  background-color: #302842;
  color: rgba(255, 255, 255, 0.25);
  cursor: not-allowed;
}
.ovui-pagination .ovui-page-turner__item--disabled--active,
.ovui-pagination .ovui-page-turner__item--disabled--active:hover {
  border-color: rgba(101, 29, 255, 0.34);
  background-color: #302842;
  color: rgba(101, 29, 255, 0.34);
}
.ovui-pagination .ovui-page-turner__prev-ellipsis,
.ovui-pagination .ovui-page-turner__next-ellipsis {
  display: flex;
  align-items: center;
  margin-left: 8px;
}
.ovui-pagination .ovui-page-turner__prev-ellipsis span,
.ovui-pagination .ovui-page-turner__next-ellipsis span {
  padding-bottom: 0.6em;
}
.ovui-pagination .ovui-page-turner--text .ovui-page-turner__item {
  border: none;
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.08);
  border-color: #302842;
}
.ovui-pagination .ovui-page-turner--text .ovui-page-turner__item:active {
  color: #ffffff;
  background-color: rgba(210, 32, 255, 0.34117647);
  border-color: #1a112e;
}
.ovui-pagination .ovui-page-turner--text .ovui-page-turner__item:hover {
  color: #651dff;
  background-color: rgba(210, 32, 255, 0.34117647);
  border-color: #302842;
}
.ovui-pagination .ovui-page-turner--text .ovui-page-turner__item--active {
  color: #ffffff;
  background-color: rgba(210, 32, 255, 0.34117647);
  border-color: transparent;
}
.ovui-pagination .ovui-page-turner--text .ovui-page-turner__item--disabled {
  color: rgba(255, 255, 255, 0.25);
  background-color: #302842;
  border-color: #302842;
}
.ovui-pagination .ovui-page-turner--text .ovui-page-turner__item--disabled:hover {
  color: rgba(101, 29, 255, 0.34);
  background-color: #302842;
  border-color: rgba(101, 29, 255, 0.34);
}
.ovui-pagination .ovui-page-turner--rtl .ovui-page-turner__item:last-of-type {
  margin-left: 0;
}
.ovui-pagination .ovui-page-turner--rtl .ovui-page-turner__item:first-of-type {
  margin-left: 8px;
}
.ovui-pagination .ovui-page-turner--fill .ovui-page-turner__item {
  border: 1px solid #261d38;
  background-color: #261d38;
  color: #ffffff;
}
.ovui-pagination .ovui-page-turner--fill .ovui-page-turner__item:hover {
  border: 1px solid #651dff;
  background-color: #302842;
  color: #651dff;
  cursor: pointer;
}
.ovui-pagination .ovui-page-turner--fill .ovui-page-turner__item--active {
  color: #651dff;
  border-color: #651dff;
  background-color: #302842;
}
.ovui-pagination .ovui-page-turner--fill .ovui-page-turner__item--active:hover {
  color: #651dff;
  border-color: #651dff;
  background-color: #302842;
}
.ovui-pagination .ovui-page-turner--fill .ovui-page-turner__item:active {
  border: 1px solid #1a112e;
  background-color: #1a112e;
  color: #ffffff;
}
.ovui-pagination .ovui-page-turner--fill .ovui-page-turner__item--disabled,
.ovui-pagination .ovui-page-turner--fill .ovui-page-turner__item--disabled:hover {
  border-color: #302842;
  background-color: #302842;
  color: rgba(255, 255, 255, 0.25);
  cursor: not-allowed;
}
.ovui-pagination .ovui-page-turner--fill .ovui-page-turner__item--disabled--active,
.ovui-pagination .ovui-page-turner--fill .ovui-page-turner__item--disabled--active:hover {
  border-color: rgba(101, 29, 255, 0.34);
  background-color: #302842;
  color: rgba(101, 29, 255, 0.34);
}
.ovui-pagination--sm .ovui-page-turner__item {
  min-width: 28px;
  height: 28px;
  font-size: 12px;
}
.ovui-pagination--disabled .ovui-page-turner__item,
.ovui-pagination--disabled .ovui-page-turner__item:hover {
  border-color: #ffffff;
  background-color: #302842;
  color: rgba(255, 255, 255, 0.25);
  cursor: not-allowed;
}
.ovui-pagination--disabled .ovui-page-turner__item--active,
.ovui-pagination--disabled .ovui-page-turner__item--active:hover {
  border-color: rgba(101, 29, 255, 0.34);
  background-color: #302842;
  color: rgba(101, 29, 255, 0.34);
}
.ovui-pagination--disabled .ovui-page-turner__prev-ellipsis,
.ovui-pagination--disabled .ovui-page-turner__next-ellipsis {
  color: #d5d6d9;
}
.ovui-pagination--disabled .ovui-page-turner--text .ovui-page-turner__item {
  color: rgba(255, 255, 255, 0.25);
  background-color: #302842;
  border-color: #302842;
}
.ovui-pagination--disabled .ovui-page-turner--text .ovui-page-turner__item:hover {
  color: rgba(255, 255, 255, 0.25);
  background-color: #302842;
  border-color: #302842;
}
.ovui-pagination--disabled .ovui-page-turner--text .ovui-page-turner__item--active,
.ovui-pagination--disabled .ovui-page-turner--text .ovui-page-turner__item--active:hover {
  color: rgba(101, 29, 255, 0.34);
  background-color: #302842;
  border-color: rgba(101, 29, 255, 0.34);
}
.ovui-pagination--disabled .ovui-page-turner--fill .ovui-page-turner__item,
.ovui-pagination--disabled .ovui-page-turner--fill .ovui-page-turner__item:hover {
  border-color: #302842;
  background-color: #302842;
  color: rgba(255, 255, 255, 0.25);
  cursor: not-allowed;
}
.ovui-pagination--disabled .ovui-page-turner--fill .ovui-page-turner__item--active,
.ovui-pagination--disabled .ovui-page-turner--fill .ovui-page-turner__item--active:hover {
  border-color: rgba(101, 29, 255, 0.34);
  background-color: #302842;
  color: rgba(101, 29, 255, 0.34);
}
.disabled-pagination-item,
.disabled-pagination-item:hover {
  border-color: #ffffff;
  background-color: #302842;
  color: rgba(255, 255, 255, 0.25);
  cursor: not-allowed;
}
.disabled-pagination-item--active,
.disabled-pagination-item--active:hover {
  border-color: rgba(101, 29, 255, 0.34);
  background-color: #302842;
  color: rgba(101, 29, 255, 0.34);
}
.disabled-pagination-item-fill,
.disabled-pagination-item-fill:hover {
  border-color: #302842;
  background-color: #302842;
  color: rgba(255, 255, 255, 0.25);
  cursor: not-allowed;
}
.disabled-pagination-item-fill--active,
.disabled-pagination-item-fill--active:hover {
  border-color: rgba(101, 29, 255, 0.34);
  background-color: #302842;
  color: rgba(101, 29, 255, 0.34);
}
.ovui-page-total {
  display: inline-flex;
  font-size: 14px;
  color: #ffffff;
}
.ovui-page-jumper {
  display: inline-flex;
  align-items: center;
}
.ovui-page-jumper__label {
  flex-shrink: 0;
  color: #ffffff;
  font-size: 14px;
  margin-right: 8px;
}
.ovui-page-jumper__input {
  width: 56px;
}
.ovui-page-jumper__input.ovui-input--sm {
  padding: 4px 8px !important;
}
.ovui-page-jumper--rtl .ovui-page-jumper__label {
  margin-right: auto;
  margin-left: 8px;
}
.ovui-page-select {
  margin: 0 10px;
  min-width: 100px;
}
.ovui-pagination {
  display: inline-flex;
  align-items: center;
}
.ovui-pagination--rtl {
  direction: rtl;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* progress */
.ovui-progress {
  display: flex;
  height: 8px;
  overflow: hidden;
  position: relative;
  border-radius: 4px;
  text-align: end;
}
.ovui-progress__bar {
  position: relative;
  z-index: 3;
  width: 0%;
  height: 100%;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
}
.ovui-progress__text-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  padding: 0 12px;
  font-size: 12px;
  line-height: 20px;
  color: rgba(0, 0, 0, 0);
  text-align: end;
}
.ovui-progress::before {
  content: "";
  display: block;
  background: #ebebed;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 4px;
}
.ovui-progress--default .ovui-progress__bar {
  background-color: #651dff;
}
.ovui-progress--primary .ovui-progress__bar {
  background-color: #651dff;
}
.ovui-progress--info .ovui-progress__bar {
  background-color: #651dff;
}
.ovui-progress--danger .ovui-progress__bar {
  background-color: #ff0060;
}
.ovui-progress--warning .ovui-progress__bar {
  background-color: #ff7c00;
}
.ovui-progress--success .ovui-progress__bar {
  background-color: #00d5a4;
}
.ovui-progress--right {
  justify-content: flex-end;
}
.ovui-progress--right .ovui-progress__text-wrap {
  text-align: left;
}
.ovui-progress--center {
  justify-content: center;
}
.ovui-progress--center .ovui-progress__text-wrap {
  text-align: center;
}
.ovui-progress--xs {
  height: 2px;
}
.ovui-progress--sm {
  height: 4px;
}
.ovui-progress--md {
  height: 8px;
}
.ovui-progress--inner {
  height: 20px;
}
.ovui-progress--inner,
.ovui-progress--inner::before,
.ovui-progress--inner .ovui-progress__bar {
  border-radius: 10px;
}
.ovui-progress-circular {
  position: relative;
  display: inline-block;
  font-size: 0;
}
.ovui-progress-circular__circle {
  transition: 0.2s;
}
.ovui-progress-circular__content {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.ovui-progress-circular--info {
  stroke: #651dff;
}
.ovui-progress-circular--danger {
  stroke: #ff0060;
}
.ovui-progress-circular--warning {
  stroke: #ff7c00;
}
.ovui-progress-circular--success {
  stroke: #00d5a4;
}
.ovui-progress-circular__circle-bg {
  stroke: #ebebed;
}
.ovui-progress-circular--xs .ovui-progress-circular__content {
  font-size: 12px;
}
.ovui-progress-circular--sm .ovui-progress-circular__content {
  font-size: 16px;
}
.ovui-progress-circular--md .ovui-progress-circular__content {
  font-size: 20px;
}
.ovui-progress--rtl {
  direction: rtl;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* Input */
/* Tag */
/* tips */
/* Select */
/* CustomInput */
/* new time panel token */
/* ocean design 2.0 desgin tokens */
.ovui-range-picker {
  display: inline-flex;
  width: 100%;
}
.ovui-range-picker .ovui-custom-input__prefix {
  color: #31343B;
}
.ovui-range-picker__input {
  flex: 1;
}
.ovui-range-picker__input--disabled {
  color: rgba(255, 255, 255, 0.25);
}
.ovui-range-picker__seperator {
  display: flex;
  align-items: center;
  margin-left: 4px;
  margin-right: 4px;
}
.ovui-range-picker__bar {
  position: absolute;
  bottom: 0;
  height: 0;
  left: 0;
  border-bottom: 2px solid #651dff;
  transition: all ease-in-out 0.1s;
}
.ovui-range-picker--multiple {
  height: 32px;
}
.ovui-range-picker--multiple .ovui-custom-input__clear {
  position: absolute;
  right: 0;
  margin-right: 0;
}
.ovui-range-picker .ovui-range-picker__calendar-icon {
  color: rgba(255, 255, 255, 0.5);
}
.ovui-range-picker .ovui-range-picker__calendar-icon--clear {
  opacity: 0;
}
.ovui-range-picker .ovui-range-picker__multiple-input-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ovui-range-picker .ovui-range-picker__multiple-input-total .ovui-range-picker__multiple-input-total-num {
  margin-right: 24px;
  padding: 0 8px;
  border-radius: 50%;
  font-size: 12px;
  border: 1px solid transparent;
  background-color: #302842;
  color: #ffffff;
}
.ovui-range-picker__popper {
  display: none;
  box-shadow: 0px 3px 9px 0 rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  background-color: #302842;
}
.ovui-range-picker__popper--show {
  display: block;
}
.ovui-range-picker__content {
  display: flex;
  align-self: stretch;
}
.ovui-range-picker__shortcuts {
  padding: 4px 0 4px 0;
  max-width: 120px;
  overflow-y: auto;
  border-right: 1px solid #ebebed;
}
.ovui-range-picker__shortcuts::-webkit-scrollbar-track-piece {
  background-color: transparent;
}
.ovui-range-picker__shortcuts::-webkit-scrollbar {
  width: 6px;
  height: 9px;
}
.ovui-range-picker__shortcuts::-webkit-scrollbar-thumb {
  background-color: #ebebed;
  border-radius: 3px;
  background-clip: padding-box;
  min-height: 28px;
}
.ovui-range-picker__shortcuts::-webkit-scrollbar-thumb:hover {
  background-color: #dfe0e2;
}
.ovui-range-picker__shortcuts + div {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.ovui-range-picker__footer-btn {
  padding: 8px 12px;
  border-top: 1px solid #ebebed;
  text-align: right;
}
.ovui-range-picker-fade-enter-active,
.ovui-range-picker-fade-leave-active {
  transition: opacity 0.1s ease-in-out;
}
.ovui-range-picker-fade-enter-from,
.ovui-range-picker-fade-leave-to {
  opacity: 0;
}
.ovui-range-picker-fade-enter-to,
.ovui-range-picker-fade-leave-from {
  opacity: 1;
}
.ovui-range-picker__popper--rtl {
  direction: rtl;
}
.ovui-range-picker__popper--rtl .ovui-range-picker__footer-btn {
  text-align: left;
}
.ovui-range-picker__popper--rtl .ovui-range-picker__shortcuts {
  border-left: 1px solid #ebebed;
  border-right: none;
}
.ovui-range-picker-panel {
  display: inline-flex;
  flex-direction: column;
  border: 1px solid #ebebed;
  border-radius: 24px;
}
.ovui-range-picker-panel__footer-btn {
  padding: 8px 12px;
  border-top: 1px solid #ebebed;
  text-align: right;
}
.ovui-range-picker-panel--rtl {
  direction: rtl;
}
.ovui-range-picker-panel--rtl .ovui-range-picker-panel__footer-btn {
  text-align: left;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.ovui-rate-item {
  position: relative;
  display: inline-flex;
  color: inherit;
  cursor: pointer;
  line-height: 0;
}
.ovui-rate-item--disabled {
  cursor: not-allowed;
}
.ovui-rate-item__rated {
  position: absolute;
  overflow: hidden;
  width: 50%;
  height: 100%;
  opacity: 0;
  color: #ff7c00;
}
.ovui-rate-item__void {
  width: 100%;
  height: 100%;
  color: #ebebed;
}
.ovui-rate {
  display: inline-flex;
}
.ovui-rate--rtl {
  direction: rtl;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* @schedule-disabled-bg-color: @disabled-default-bg; */
/* @schedule-active-bg-color: @primary-6; */
/* @schedule-popver-bg-color: @bg-10; */
/* @schedule-selected-text-color: @text-gray-5; */
.ovui-schedule {
  -moz-user-select: none;
       user-select: none;
  border: 1px solid #ebebed;
  border-radius: 24px;
  overflow: hidden;
  background-color: #302842;
}
.ovui-schedule th,
.ovui-schedule td {
  padding: 0;
}
.ovui-schedule__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 20px;
  border-bottom: 1px solid #ebebed;
}
.ovui-schedule__header__explain {
  display: flex;
}
.ovui-schedule__header__explain__selected,
.ovui-schedule__header__explain__selectable {
  display: flex;
  color: #ffffff;
  align-items: center;
  margin-right: 11px;
}
.ovui-schedule__header__explain__selected::before,
.ovui-schedule__header__explain__selectable::before {
  content: "";
  display: block;
  width: 12px;
  height: 4px;
  background-color: #651dff;
  border-radius: 2px;
  margin-right: 8px;
}
.ovui-schedule__header__explain__selectable::before {
  border: 1px solid #dadfe3;
  background-color: transparent;
}
.ovui-schedule__time-table-wrap {
  margin: 0 auto;
}
.ovui-schedule__time-table-wrap .ovui-schedule__time-table {
  width: 100%;
  border-spacing: 0;
  table-layout: fixed;
}
.ovui-schedule__time-table-wrap .ovui-schedule__time-table__head__time-range {
  height: 39px;
}
.ovui-schedule__time-table-wrap .ovui-schedule__time-table__head__time-range__title {
  width: 80px;
}
.ovui-schedule__time-table-wrap .ovui-schedule__time-table tr th,
.ovui-schedule__time-table-wrap .ovui-schedule__time-table tr td {
  border-left: none;
  border-top: none;
  border-bottom: 1px solid;
  border-bottom-color: #ebebed;
  border-right: 1px solid;
  border-right-color: #ebebed;
  font-size: 14px;
  text-align: center;
  min-width: 11px;
  line-height: 1.8em;
  transition: all 100ms ease;
  color: #ffffff;
  background: #302842;
}
.ovui-schedule__time-table-wrap .ovui-schedule__time-table tr th:last-child,
.ovui-schedule__time-table-wrap .ovui-schedule__time-table tr td:last-child {
  border-right: none;
}
.ovui-schedule__time-table-wrap .ovui-schedule__time-table tr th .ovui-checkbox,
.ovui-schedule__time-table-wrap .ovui-schedule__time-table tr td .ovui-checkbox {
  padding: 0 2px;
  display: flex;
  line-height: 1.8em;
}
.ovui-schedule__time-table-wrap .ovui-schedule__time-table .ovui-schedule__week-title {
  display: flex;
  justify-content: center;
}
.ovui-schedule__time-table-wrap .ovui-schedule__time-table .ovui-schedule__week-title .ovui-checkbox__label {
  margin: 0 0 0 5px;
}
.ovui-schedule__time-table-wrap .ovui-schedule__time-table .ovui-schedule__atom-time:hover:not(.ovui-schedule__atom-time--disabled) {
  background: #f4f4f5;
}
.ovui-schedule__time-table-wrap .ovui-schedule__time-table .ovui-schedule__atom-time--active:not(.ovui-schedule__atom-time--disabled) {
  background-color: #651dff;
}
.ovui-schedule__time-table-wrap .ovui-schedule__time-table .ovui-schedule__atom-time--active:not(.ovui-schedule__atom-time--disabled):hover {
  background-color: #651dff;
}
.ovui-schedule__time-table-wrap .ovui-schedule__time-table .ovui-schedule__atom-time--active.ovui-schedule__atom-time--disabled {
  background-color: rgba(101, 29, 255, 0.34);
}
.ovui-schedule__time-table-wrap .ovui-schedule__time-table .ovui-schedule__atom-time--disabled {
  background: #fafafa;
  cursor: not-allowed;
}
.ovui-schedule__time-table-wrap tr td.ovui-schedule__selected-display {
  padding: 16px;
  border-bottom-style: none;
}
.ovui-schedule__clear {
  display: flex;
  justify-content: space-between;
  padding-bottom: 12px;
}
.ovui-schedule__selected-des {
  height: 22px;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
}
.ovui-schedule__empty {
  font-size: 14px;
  line-height: 22px;
}
.ovui-schedule__selected-tip-label {
  min-width: 60px;
  margin-right: 8px;
}
.ovui-schedule__selected-time-range {
  display: flex;
  text-align: start;
}
.ovui-schedule__selected-time-range .ovui-schedule__selected-tip-label {
  text-align: left;
}
.ovui-schedule__select-range-mask {
  background: #7433ff;
  width: 0;
  height: 0;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0.6;
}
.ovui-schedule-shortcuts {
  display: flex;
}
.ovui-schedule-shortcuts__shortcut {
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  font-size: 14px;
  margin-right: 24px;
  line-height: 22px;
}
.ovui-schedule-shortcuts__shortcut:hover {
  color: #651dff;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/**
 * OKee Design Component Slider Design Token
 */
.ovui-slider {
  position: relative;
  cursor: pointer;
  box-sizing: content-box;
  touch-action: none;
  height: 4px;
  font-size: 14px;
  border-radius: 3px;
}
.ovui-slider__rail {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 4px;
  background-color: #261d38;
  border-radius: 3px;
  transition: background-color 0.3s;
}
.ovui-slider__track {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  border-radius: 3px;
  background-color: #651dff;
}
.ovui-slider__track:hover {
  background-color: #7433ff;
}
.ovui-slider__track:active {
  background-color: rgba(101, 29, 255, 0.75);
}
.ovui-slider__thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background-color: #302842;
  border: 4px solid #651dff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ovui-slider__thumb:focus {
  outline: none;
}
.ovui-slider__thumb:hover {
  border-color: #7433ff;
  background-color: #302842;
}
.ovui-slider__thumb:active {
  background-color: #302842;
  border-color: rgba(101, 29, 255, 0.75);
}
.ovui-slider__steps__step {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background-color: #302842;
  border: 2px solid #ebebed;
  border-radius: 50%;
}
.ovui-slider__steps__step--active {
  border: 2px solid #651dff;
}
.ovui-slider__marks {
  position: absolute;
  width: 100%;
  top: 18px;
}
.ovui-slider__marks__mark {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 14px;
  word-break: keep-all;
}
.ovui-slider__marks__mark--active {
  color: #651dff;
}
.ovui-slider--disabled .ovui-slider__rail {
  background-color: #534c61;
}
.ovui-slider--disabled .ovui-slider__thumb {
  border-color: rgba(101, 29, 255, 0.34);
  background-color: #302842;
}
.ovui-slider--disabled .ovui-slider__track {
  background-color: rgba(101, 29, 255, 0.34);
}
.ovui-slider--disabled .ovui-slider__steps {
  background-color: rgba(255, 255, 255, 0.50196078);
  border-color: #dfe0e2;
}
.ovui-slider--disabled .ovui-slider__steps--active {
  border-color: rgba(101, 29, 255, 0.34);
}
.ovui-slider--disabled .ovui-slider__steps__step--active {
  border-color: rgba(101, 29, 255, 0.34);
}
.ovui-slider--disabled .ovui-slider__marks__mark {
  color: #d5d6d9;
}
.ovui-slider--disabled .ovui-slider__marks__mark--active {
  color: rgba(101, 29, 255, 0.34);
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* spin */
.ovui-spin__block {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.ovui-spin__fullscreen {
  position: fixed;
  margin: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.ovui-spin .ovui-icon__loading {
  color: #7433ff;
}
.ovui-spin__block-mask {
  position: absolute;
  background: rgba(255, 255, 255, 0.7);
}
.ovui-spin__content {
  display: inline-flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.ovui-inline-spin {
  display: inline-flex;
  color: #7433ff;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.ovui-step {
  display: flex;
  overflow: hidden;
  flex: 1;
  align-self: flex-start;
  margin-right: 16px;
  padding-right: 16px;
}
.ovui-step:last-of-type {
  flex: none;
  margin-right: 0;
  padding-right: 0;
}
.ovui-step:last-of-type .ovui-step__title::after {
  display: none;
}
.ovui-step:last-of-type .ovui-step__click-wrap::after {
  display: none;
}
.ovui-step .ovui-step__click-wrap {
  display: flex;
  position: relative;
}
.ovui-step .ovui-step__click-wrap::after {
  content: "";
  position: absolute;
  width: 10000px;
  height: 0;
  border-top: 1px solid #dfe0e2;
  left: 100%;
  top: 16px;
}
.ovui-step .ovui-step__click-wrap .ovui-step__title::after {
  display: none;
}
.ovui-step .ovui-step__clickable {
  cursor: pointer;
}
.ovui-step .ovui-step__disabled {
  cursor: not-allowed;
}
.ovui-step--space {
  flex: none;
}
.ovui-step--vertical {
  margin-right: 0;
}
.ovui-step--vertical:not(:first-of-type) {
  margin-top: 16px;
}
.ovui-step--vertical:first-of-type .ovui-step__icon::before {
  display: none;
}
.ovui-step--vertical:last-of-type .ovui-step__icon::after {
  display: none;
}
.ovui-step--vertical .ovui-step__title::after {
  display: none;
}
.ovui-step--vertical .ovui-step__icon::after {
  content: "";
  position: absolute;
  height: 10000px;
  width: 0;
  border-left: 1px solid #dfe0e2;
  left: 50%;
  top: 40px;
}
.ovui-step--vertical.ovui-step--order-align-center {
  align-items: center;
}
.ovui-step--vertical.ovui-step--order-align-center:not(:first-of-type) {
  margin-top: 0;
  padding-top: 16px;
}
.ovui-step--vertical.ovui-step--order-align-center .ovui-step__icon::before {
  content: "";
  position: absolute;
  height: 10000px;
  width: 0;
  border-left: 1px solid #dfe0e2;
  left: 50%;
  bottom: 40px;
}
.ovui-step__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.ovui-step__icon .ovui-step__iconbox {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bolder;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.5);
  background-color: #261d38;
  font-size: 18px;
  line-height: 0;
}
.ovui-step__content {
  margin-left: 8px;
}
.ovui-step__title {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.5);
  min-height: 32px;
  margin: 0;
  font-weight: 600;
  padding-right: 16px;
}
.ovui-step__title::after {
  content: "";
  position: absolute;
  width: 10000px;
  height: 0;
  border-top: 1px solid #dfe0e2;
  left: 100%;
  top: 16px;
}
.ovui-step__desc {
  display: flex;
  align-items: center;
  margin: 0;
  min-height: 20px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
.ovui-step__desc-default {
  color: #323335 !important;
}
.ovui-step__desc-auxiliary {
  color: #64666b !important;
}
.ovui-step__desc-secondary {
  color: #969aa0 !important;
}
.ovui-step__desc-primary {
  color: #651dff !important;
}
.ovui-step__desc-danger {
  color: #ff0060 !important;
}
.ovui-step__desc-success {
  color: #4d8b2f !important;
}
.ovui-step__desc-warning {
  color: #eb9617 !important;
}
.ovui-step--dotted .ovui-step__title::after {
  border-top-style: dotted;
}
.ovui-step--dotted .ovui-step__icon::after {
  border-left-style: dotted;
}
.ovui-step--dashed .ovui-step__title::after {
  border-top-style: dashed;
}
.ovui-step--dashed .ovui-step__icon::after {
  border-left-style: dashed;
}
.ovui-step--double .ovui-step__title::after {
  border-top-style: double;
}
.ovui-step--double .ovui-step__icon::after {
  border-left-style: double;
}
.ovui-step--progressing .ovui-step__icon .ovui-step__iconbox {
  color: rgba(0, 0, 0, 0);
  background-color: #651dff;
}
.ovui-step--progressing .ovui-step__icon::before {
  border-left-color: #651dff !important;
}
.ovui-step--progressing .ovui-step__icon::after {
  border-left-color: #dfe0e2;
}
.ovui-step--progressing .ovui-step__title {
  color: #651dff;
}
.ovui-step--progressing .ovui-step__title::before {
  border-left-color: #651dff !important;
}
.ovui-step--progressing .ovui-step__title::after {
  border-top-color: #dfe0e2 !important;
}
.ovui-step--progressing .ovui-step__desc {
  color: #651dff;
}
.ovui-step--finished .ovui-step__icon .ovui-step__iconbox {
  background-color: #381088;
  color: #651dff;
}
.ovui-step--finished .ovui-step__icon .ovui-step__iconbox .ovui-step__icon-check {
  color: #651dff;
}
.ovui-step--finished .ovui-step__icon::before,
.ovui-step--finished .ovui-step__icon::after {
  border-left-color: #651dff !important;
}
.ovui-step--finished .ovui-step__title {
  color: #ffffff;
}
.ovui-step--finished .ovui-step__title::before,
.ovui-step--finished .ovui-step__title::after {
  border-top-color: #651dff !important;
}
.ovui-step--error .ovui-step__icon .ovui-step__iconbox {
  color: rgba(0, 0, 0, 0);
  background-color: #ff0060;
}
.ovui-step--error .ovui-step__icon::after {
  border-left-color: #dfe0e2;
}
.ovui-step--error .ovui-step__title {
  color: #ff0060;
}
.ovui-step--error .ovui-step__title::after {
  border-top-color: #dfe0e2;
}
.ovui-step--error .ovui-step__desc {
  color: #ff0060;
}
.ovui-step--lg .ovui-step__icon,
.ovui-step--xl .ovui-step__icon {
  width: 36px;
  height: 36px;
}
.ovui-step--lg .ovui-step__title,
.ovui-step--xl .ovui-step__title {
  font-size: 18px;
  min-height: 36px;
}
.ovui-step--lg .ovui-step__title::after,
.ovui-step--xl .ovui-step__title::after {
  top: 18px;
}
.ovui-step--lg .ovui-step__desc,
.ovui-step--xl .ovui-step__desc {
  min-height: 22px;
  font-size: 14px;
}
.ovui-step--sm .ovui-step__icon {
  width: 28px;
  height: 28px;
}
.ovui-step--sm .ovui-step__icon::before {
  bottom: 36px !important;
}
.ovui-step--sm .ovui-step__icon::after {
  top: 36px;
}
.ovui-step--sm .ovui-step__iconbox {
  font-size: 14px;
}
.ovui-step--sm .ovui-step__title {
  font-size: 14px;
  min-height: 28px;
  padding-right: 8px;
}
.ovui-step--sm .ovui-step__title::after {
  top: 14px;
}
.ovui-step--sm .ovui-step__desc {
  min-height: 20px;
  font-size: 12px;
}
.ovui-step--xs .ovui-step__icon {
  width: 24px;
  height: 24px;
}
.ovui-step--xs .ovui-step__icon::before {
  bottom: 32px !important;
}
.ovui-step--xs .ovui-step__icon::after {
  top: 32px;
}
.ovui-step--xs .ovui-step__iconbox {
  font-size: 12px;
}
.ovui-step--xs .ovui-step__title {
  font-size: 12px;
  min-height: 24px;
  padding-right: 8px;
}
.ovui-step--xs .ovui-step__title::after {
  top: 12px;
}
.ovui-step--xs .ovui-step__desc {
  min-height: 20px;
  font-size: 12px;
}
/* steps */
/* waiting */
/* progressing */
/* finished */
/* error */
/* desc text  */
.ovui-steps {
  display: flex;
}
.ovui-steps--vertical {
  flex-direction: column;
}
.ovui-steps--rtl {
  direction: rtl;
}
.ovui-steps--rtl.ovui-steps--horizontal .ovui-step--rtl {
  margin-left: 16px;
  padding-left: 16px;
  margin-right: auto;
  padding-right: 0;
}
.ovui-steps--rtl.ovui-steps--horizontal .ovui-step--rtl .ovui-step__content {
  margin-left: auto;
  margin-right: 8px;
}
.ovui-steps--rtl.ovui-steps--horizontal .ovui-step--rtl .ovui-step__content .ovui-step__title {
  padding-right: 0;
  padding-left: 16px;
}
.ovui-steps--rtl.ovui-steps--horizontal .ovui-step--rtl .ovui-step__content .ovui-step__title::after {
  left: auto;
  right: 100%;
}
.ovui-steps--rtl.ovui-steps--horizontal .ovui-step--rtl.ovui-step--xs .ovui-step__content .ovui-step__title,
.ovui-steps--rtl.ovui-steps--horizontal .ovui-step--rtl.ovui-step--md .ovui-step__content .ovui-step__title {
  padding-left: 8px;
}
.ovui-steps--rtl.ovui-steps--vertical .ovui-step:last-of-type {
  padding-right: 16px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* switch */
.ovui-switch {
  display: inline-flex;
  align-items: center;
  -moz-user-select: none;
       user-select: none;
  overflow: hidden;
  cursor: pointer;
}
.ovui-switch__children-placeholder {
  display: flex;
}
.ovui-switch--xs {
  min-width: 28px;
  height: 16px;
  background-color: #3c344d;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
}
.ovui-switch--xs:active .ovui-switch__thumb {
  width: 16px;
  border-radius: 8px;
  transition: all 0.1s ease-in-out;
}
.ovui-switch--xs:active.ovui-switch--checked .ovui-switch__thumb {
  left: calc(100% - 16px - 2px * 2);
}
.ovui-switch--xs .ovui-switch__thumb {
  width: 12px;
  height: 12px;
  background-color: #ffffff;
  border-radius: 50%;
  margin-left: 2px;
  margin-right: 2px;
  position: absolute;
  left: 0;
  transition: all 0.1s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #651dff;
}
@keyframes switch-thumb-change-xs {
  from {
    width: 16px;
    border-radius: 8px;
    left: 0;
  }
  to {
    width: 12px;
    border-radius: 50%;
    right: 0;
  }
}
@keyframes switch-thumb-change1-xs {
  from {
    width: 16px;
    border-radius: 8px;
    right: 0;
  }
  to {
    width: 12px;
    border-radius: 50%;
    left: 0;
  }
}
.ovui-switch--xs .ovui-switch__thumb--to-unchecked {
  animation: switch-thumb-change1-xs 0.1s ease-in-out;
}
.ovui-switch--xs .ovui-switch__thumb--to-checked {
  animation: switch-thumb-change-xs 0.1s ease-in-out;
}
.ovui-switch--xs .ovui-switch__thumb .ovui-switch__loading_wrapper {
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.ovui-switch--xs .ovui-switch__thumb .ovui-switch__truthy-content-wrapper,
.ovui-switch--xs .ovui-switch__thumb .ovui-switch__falsy-content-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  align-items: center;
  display: flex;
  white-space: nowrap;
  font-size: 12px;
}
.ovui-switch--xs .ovui-switch__thumb .ovui-switch__truthy-content-wrapper {
  right: 0;
  padding-right: 18px;
  color: #ffffff;
}
.ovui-switch--xs .ovui-switch__thumb .ovui-switch__falsy-content-wrapper {
  left: 0;
  padding-left: 18px;
  color: #ffffff;
}
.ovui-switch--xs .ovui-switch__content-placeholder {
  visibility: hidden;
  font-size: 12px;
}
.ovui-switch--xs .ovui-switch__content-placeholder .ovui-switch__truthy-placeholder,
.ovui-switch--xs .ovui-switch__content-placeholder .ovui-switch__falsy-placeholder {
  display: flex;
  align-items: center;
}
.ovui-switch--xs .ovui-switch__content-placeholder .ovui-switch__thumb-placeholder {
  width: 18px;
  height: 12px;
  margin-left: 6px;
  margin-right: 6px;
}
.ovui-switch--xs.ovui-switch--disabled,
.ovui-switch--xs.ovui-switch--loading {
  cursor: not-allowed;
  background-color: #302842;
  color: rgba(255, 255, 255, 0.5);
}
.ovui-switch--xs.ovui-switch--disabled .ovui-switch__thumb,
.ovui-switch--xs.ovui-switch--loading .ovui-switch__thumb {
  background-color: rgba(255, 255, 255, 0.5);
  color: #d5c1ff;
}
.ovui-switch--xs.ovui-switch--checked {
  background-color: #00d5a4;
}
.ovui-switch--xs.ovui-switch--checked .ovui-switch__thumb {
  left: calc(100% - 12px - 2px * 2);
  color: #00d5a4;
  background-color: #ffffff;
}
.ovui-switch--xs.ovui-switch--disabled.ovui-switch--checked,
.ovui-switch--xs.ovui-switch--loading.ovui-switch--checked {
  cursor: not-allowed;
  background-color: #302842;
}
.ovui-switch--xs.ovui-switch--disabled.ovui-switch--checked .ovui-switch__thumb,
.ovui-switch--xs.ovui-switch--loading.ovui-switch--checked .ovui-switch__thumb {
  background-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.12);
}
.ovui-switch--xs .ovui-switch__thumb-icon {
  display: inline-flex;
}
.ovui-switch--xs .ovui-switch__thumb-icon .ovui-switch__truthy-icon,
.ovui-switch--xs .ovui-switch__thumb-icon .ovui-switch__falsy-icon {
  display: inline-flex;
}
.ovui-switch--xs.ovui-switch--rtl .ovui-switch__thumb {
  left: auto;
  right: 0;
}
.ovui-switch--xs.ovui-switch--rtl .ovui-switch__thumb .ovui-switch__truthy-content-wrapper {
  left: 0;
  right: auto;
  padding-left: 18px;
  color: #ffffff;
}
.ovui-switch--xs.ovui-switch--rtl .ovui-switch__thumb .ovui-switch__falsy-content-wrapper {
  right: 0;
  left: auto;
  padding-right: 18px;
  color: #ffffff;
}
.ovui-switch--xs.ovui-switch--rtl.ovui-switch--checked .ovui-switch__thumb {
  right: calc(100% - 12px - 2px * 2);
}
.ovui-switch--sm {
  min-width: 28px;
  height: 16px;
  background-color: #3c344d;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
}
.ovui-switch--sm:active .ovui-switch__thumb {
  width: 16px;
  border-radius: 8px;
  transition: all 0.1s ease-in-out;
}
.ovui-switch--sm:active.ovui-switch--checked .ovui-switch__thumb {
  left: calc(100% - 16px - 2px * 2);
}
.ovui-switch--sm .ovui-switch__thumb {
  width: 12px;
  height: 12px;
  background-color: #ffffff;
  border-radius: 50%;
  margin-left: 2px;
  margin-right: 2px;
  position: absolute;
  left: 0;
  transition: all 0.1s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #651dff;
}
@keyframes switch-thumb-change-sm {
  from {
    width: 16px;
    border-radius: 8px;
    left: 0;
  }
  to {
    width: 12px;
    border-radius: 50%;
    right: 0;
  }
}
@keyframes switch-thumb-change1-sm {
  from {
    width: 16px;
    border-radius: 8px;
    right: 0;
  }
  to {
    width: 12px;
    border-radius: 50%;
    left: 0;
  }
}
.ovui-switch--sm .ovui-switch__thumb--to-unchecked {
  animation: switch-thumb-change1-sm 0.1s ease-in-out;
}
.ovui-switch--sm .ovui-switch__thumb--to-checked {
  animation: switch-thumb-change-sm 0.1s ease-in-out;
}
.ovui-switch--sm .ovui-switch__thumb .ovui-switch__loading_wrapper {
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.ovui-switch--sm .ovui-switch__thumb .ovui-switch__truthy-content-wrapper,
.ovui-switch--sm .ovui-switch__thumb .ovui-switch__falsy-content-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  align-items: center;
  display: flex;
  white-space: nowrap;
  font-size: 12px;
}
.ovui-switch--sm .ovui-switch__thumb .ovui-switch__truthy-content-wrapper {
  right: 0;
  padding-right: 18px;
  color: #ffffff;
}
.ovui-switch--sm .ovui-switch__thumb .ovui-switch__falsy-content-wrapper {
  left: 0;
  padding-left: 18px;
  color: #ffffff;
}
.ovui-switch--sm .ovui-switch__content-placeholder {
  visibility: hidden;
  font-size: 12px;
}
.ovui-switch--sm .ovui-switch__content-placeholder .ovui-switch__truthy-placeholder,
.ovui-switch--sm .ovui-switch__content-placeholder .ovui-switch__falsy-placeholder {
  display: flex;
  align-items: center;
}
.ovui-switch--sm .ovui-switch__content-placeholder .ovui-switch__thumb-placeholder {
  width: 18px;
  height: 12px;
  margin-left: 6px;
  margin-right: 6px;
}
.ovui-switch--sm.ovui-switch--disabled,
.ovui-switch--sm.ovui-switch--loading {
  cursor: not-allowed;
  background-color: #302842;
  color: rgba(255, 255, 255, 0.5);
}
.ovui-switch--sm.ovui-switch--disabled .ovui-switch__thumb,
.ovui-switch--sm.ovui-switch--loading .ovui-switch__thumb {
  background-color: rgba(255, 255, 255, 0.5);
  color: #d5c1ff;
}
.ovui-switch--sm.ovui-switch--checked {
  background-color: #00d5a4;
}
.ovui-switch--sm.ovui-switch--checked .ovui-switch__thumb {
  left: calc(100% - 12px - 2px * 2);
  color: #00d5a4;
  background-color: #ffffff;
}
.ovui-switch--sm.ovui-switch--disabled.ovui-switch--checked,
.ovui-switch--sm.ovui-switch--loading.ovui-switch--checked {
  cursor: not-allowed;
  background-color: #302842;
}
.ovui-switch--sm.ovui-switch--disabled.ovui-switch--checked .ovui-switch__thumb,
.ovui-switch--sm.ovui-switch--loading.ovui-switch--checked .ovui-switch__thumb {
  background-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.12);
}
.ovui-switch--sm .ovui-switch__thumb-icon {
  display: inline-flex;
}
.ovui-switch--sm .ovui-switch__thumb-icon .ovui-switch__truthy-icon,
.ovui-switch--sm .ovui-switch__thumb-icon .ovui-switch__falsy-icon {
  display: inline-flex;
}
.ovui-switch--sm.ovui-switch--rtl .ovui-switch__thumb {
  left: auto;
  right: 0;
}
.ovui-switch--sm.ovui-switch--rtl .ovui-switch__thumb .ovui-switch__truthy-content-wrapper {
  left: 0;
  right: auto;
  padding-left: 18px;
  color: #ffffff;
}
.ovui-switch--sm.ovui-switch--rtl .ovui-switch__thumb .ovui-switch__falsy-content-wrapper {
  right: 0;
  left: auto;
  padding-right: 18px;
  color: #ffffff;
}
.ovui-switch--sm.ovui-switch--rtl.ovui-switch--checked .ovui-switch__thumb {
  right: calc(100% - 12px - 2px * 2);
}
.ovui-switch--md {
  min-width: 40px;
  height: 22px;
  background-color: #3c344d;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
}
.ovui-switch--md:active .ovui-switch__thumb {
  width: 24px;
  border-radius: 10px;
  transition: all 0.1s ease-in-out;
}
.ovui-switch--md:active.ovui-switch--checked .ovui-switch__thumb {
  left: calc(100% - 24px - 2px * 2);
}
.ovui-switch--md .ovui-switch__thumb {
  width: 18px;
  height: 18px;
  background-color: #ffffff;
  border-radius: 50%;
  margin-left: 2px;
  margin-right: 2px;
  position: absolute;
  left: 0;
  transition: all 0.1s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #651dff;
}
@keyframes switch-thumb-change-md {
  from {
    width: 24px;
    border-radius: 10px;
    left: 0;
  }
  to {
    width: 18px;
    border-radius: 50%;
    right: 0;
  }
}
@keyframes switch-thumb-change1-md {
  from {
    width: 24px;
    border-radius: 10px;
    right: 0;
  }
  to {
    width: 18px;
    border-radius: 50%;
    left: 0;
  }
}
.ovui-switch--md .ovui-switch__thumb--to-unchecked {
  animation: switch-thumb-change1-md 0.1s ease-in-out;
}
.ovui-switch--md .ovui-switch__thumb--to-checked {
  animation: switch-thumb-change-md 0.1s ease-in-out;
}
.ovui-switch--md .ovui-switch__thumb .ovui-switch__loading_wrapper {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.ovui-switch--md .ovui-switch__thumb .ovui-switch__truthy-content-wrapper,
.ovui-switch--md .ovui-switch__thumb .ovui-switch__falsy-content-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  align-items: center;
  display: flex;
  white-space: nowrap;
  font-size: 14px;
}
.ovui-switch--md .ovui-switch__thumb .ovui-switch__truthy-content-wrapper {
  right: 0;
  padding-right: 24px;
  color: #ffffff;
}
.ovui-switch--md .ovui-switch__thumb .ovui-switch__falsy-content-wrapper {
  left: 0;
  padding-left: 24px;
  color: #ffffff;
}
.ovui-switch--md .ovui-switch__content-placeholder {
  visibility: hidden;
  font-size: 14px;
}
.ovui-switch--md .ovui-switch__content-placeholder .ovui-switch__truthy-placeholder,
.ovui-switch--md .ovui-switch__content-placeholder .ovui-switch__falsy-placeholder {
  display: flex;
  align-items: center;
}
.ovui-switch--md .ovui-switch__content-placeholder .ovui-switch__thumb-placeholder {
  width: 27px;
  height: 18px;
  margin-left: 6px;
  margin-right: 6px;
}
.ovui-switch--md.ovui-switch--disabled,
.ovui-switch--md.ovui-switch--loading {
  cursor: not-allowed;
  background-color: #302842;
  color: rgba(255, 255, 255, 0.5);
}
.ovui-switch--md.ovui-switch--disabled .ovui-switch__thumb,
.ovui-switch--md.ovui-switch--loading .ovui-switch__thumb {
  background-color: rgba(255, 255, 255, 0.5);
  color: #d5c1ff;
}
.ovui-switch--md.ovui-switch--checked {
  background-color: #00d5a4;
}
.ovui-switch--md.ovui-switch--checked .ovui-switch__thumb {
  left: calc(100% - 18px - 2px * 2);
  color: #00d5a4;
  background-color: #ffffff;
}
.ovui-switch--md.ovui-switch--disabled.ovui-switch--checked,
.ovui-switch--md.ovui-switch--loading.ovui-switch--checked {
  cursor: not-allowed;
  background-color: #302842;
}
.ovui-switch--md.ovui-switch--disabled.ovui-switch--checked .ovui-switch__thumb,
.ovui-switch--md.ovui-switch--loading.ovui-switch--checked .ovui-switch__thumb {
  background-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.12);
}
.ovui-switch--md .ovui-switch__thumb-icon {
  display: inline-flex;
}
.ovui-switch--md .ovui-switch__thumb-icon .ovui-switch__truthy-icon,
.ovui-switch--md .ovui-switch__thumb-icon .ovui-switch__falsy-icon {
  display: inline-flex;
}
.ovui-switch--md.ovui-switch--rtl .ovui-switch__thumb {
  left: auto;
  right: 0;
}
.ovui-switch--md.ovui-switch--rtl .ovui-switch__thumb .ovui-switch__truthy-content-wrapper {
  left: 0;
  right: auto;
  padding-left: 24px;
  color: #ffffff;
}
.ovui-switch--md.ovui-switch--rtl .ovui-switch__thumb .ovui-switch__falsy-content-wrapper {
  right: 0;
  left: auto;
  padding-right: 24px;
  color: #ffffff;
}
.ovui-switch--md.ovui-switch--rtl.ovui-switch--checked .ovui-switch__thumb {
  right: calc(100% - 18px - 2px * 2);
}
.ovui-switch--lg {
  min-width: 52px;
  height: 28px;
  background-color: #3c344d;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
}
.ovui-switch--lg:active .ovui-switch__thumb {
  width: 32px;
  border-radius: 14px;
  transition: all 0.1s ease-in-out;
}
.ovui-switch--lg:active.ovui-switch--checked .ovui-switch__thumb {
  left: calc(100% - 32px - 2px * 2);
}
.ovui-switch--lg .ovui-switch__thumb {
  width: 24px;
  height: 24px;
  background-color: #ffffff;
  border-radius: 50%;
  margin-left: 2px;
  margin-right: 2px;
  position: absolute;
  left: 0;
  transition: all 0.1s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #651dff;
}
@keyframes switch-thumb-change-lg {
  from {
    width: 32px;
    border-radius: 14px;
    left: 0;
  }
  to {
    width: 24px;
    border-radius: 50%;
    right: 0;
  }
}
@keyframes switch-thumb-change1-lg {
  from {
    width: 32px;
    border-radius: 14px;
    right: 0;
  }
  to {
    width: 24px;
    border-radius: 50%;
    left: 0;
  }
}
.ovui-switch--lg .ovui-switch__thumb--to-unchecked {
  animation: switch-thumb-change1-lg 0.1s ease-in-out;
}
.ovui-switch--lg .ovui-switch__thumb--to-checked {
  animation: switch-thumb-change-lg 0.1s ease-in-out;
}
.ovui-switch--lg .ovui-switch__thumb .ovui-switch__loading_wrapper {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.ovui-switch--lg .ovui-switch__thumb .ovui-switch__truthy-content-wrapper,
.ovui-switch--lg .ovui-switch__thumb .ovui-switch__falsy-content-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  align-items: center;
  display: flex;
  white-space: nowrap;
  font-size: 14px;
}
.ovui-switch--lg .ovui-switch__thumb .ovui-switch__truthy-content-wrapper {
  right: 0;
  padding-right: 30px;
  color: #ffffff;
}
.ovui-switch--lg .ovui-switch__thumb .ovui-switch__falsy-content-wrapper {
  left: 0;
  padding-left: 30px;
  color: #ffffff;
}
.ovui-switch--lg .ovui-switch__content-placeholder {
  visibility: hidden;
  font-size: 14px;
}
.ovui-switch--lg .ovui-switch__content-placeholder .ovui-switch__truthy-placeholder,
.ovui-switch--lg .ovui-switch__content-placeholder .ovui-switch__falsy-placeholder {
  display: flex;
  align-items: center;
}
.ovui-switch--lg .ovui-switch__content-placeholder .ovui-switch__thumb-placeholder {
  width: 36px;
  height: 24px;
  margin-left: 6px;
  margin-right: 6px;
}
.ovui-switch--lg.ovui-switch--disabled,
.ovui-switch--lg.ovui-switch--loading {
  cursor: not-allowed;
  background-color: #302842;
  color: rgba(255, 255, 255, 0.5);
}
.ovui-switch--lg.ovui-switch--disabled .ovui-switch__thumb,
.ovui-switch--lg.ovui-switch--loading .ovui-switch__thumb {
  background-color: rgba(255, 255, 255, 0.5);
  color: #d5c1ff;
}
.ovui-switch--lg.ovui-switch--checked {
  background-color: #00d5a4;
}
.ovui-switch--lg.ovui-switch--checked .ovui-switch__thumb {
  left: calc(100% - 24px - 2px * 2);
  color: #00d5a4;
  background-color: #ffffff;
}
.ovui-switch--lg.ovui-switch--disabled.ovui-switch--checked,
.ovui-switch--lg.ovui-switch--loading.ovui-switch--checked {
  cursor: not-allowed;
  background-color: #302842;
}
.ovui-switch--lg.ovui-switch--disabled.ovui-switch--checked .ovui-switch__thumb,
.ovui-switch--lg.ovui-switch--loading.ovui-switch--checked .ovui-switch__thumb {
  background-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.12);
}
.ovui-switch--lg .ovui-switch__thumb-icon {
  display: inline-flex;
}
.ovui-switch--lg .ovui-switch__thumb-icon .ovui-switch__truthy-icon,
.ovui-switch--lg .ovui-switch__thumb-icon .ovui-switch__falsy-icon {
  display: inline-flex;
}
.ovui-switch--lg.ovui-switch--rtl .ovui-switch__thumb {
  left: auto;
  right: 0;
}
.ovui-switch--lg.ovui-switch--rtl .ovui-switch__thumb .ovui-switch__truthy-content-wrapper {
  left: 0;
  right: auto;
  padding-left: 30px;
  color: #ffffff;
}
.ovui-switch--lg.ovui-switch--rtl .ovui-switch__thumb .ovui-switch__falsy-content-wrapper {
  right: 0;
  left: auto;
  padding-right: 30px;
  color: #ffffff;
}
.ovui-switch--lg.ovui-switch--rtl.ovui-switch--checked .ovui-switch__thumb {
  right: calc(100% - 24px - 2px * 2);
}
.ovui-switch--xl {
  min-width: 52px;
  height: 28px;
  background-color: #3c344d;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.5);
  position: relative;
}
.ovui-switch--xl:active .ovui-switch__thumb {
  width: 32px;
  border-radius: 14px;
  transition: all 0.1s ease-in-out;
}
.ovui-switch--xl:active.ovui-switch--checked .ovui-switch__thumb {
  left: calc(100% - 32px - 2px * 2);
}
.ovui-switch--xl .ovui-switch__thumb {
  width: 24px;
  height: 24px;
  background-color: #ffffff;
  border-radius: 50%;
  margin-left: 2px;
  margin-right: 2px;
  position: absolute;
  left: 0;
  transition: all 0.1s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #651dff;
}
@keyframes switch-thumb-change-xl {
  from {
    width: 32px;
    border-radius: 14px;
    left: 0;
  }
  to {
    width: 24px;
    border-radius: 50%;
    right: 0;
  }
}
@keyframes switch-thumb-change1-xl {
  from {
    width: 32px;
    border-radius: 14px;
    right: 0;
  }
  to {
    width: 24px;
    border-radius: 50%;
    left: 0;
  }
}
.ovui-switch--xl .ovui-switch__thumb--to-unchecked {
  animation: switch-thumb-change1-xl 0.1s ease-in-out;
}
.ovui-switch--xl .ovui-switch__thumb--to-checked {
  animation: switch-thumb-change-xl 0.1s ease-in-out;
}
.ovui-switch--xl .ovui-switch__thumb .ovui-switch__loading_wrapper {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.ovui-switch--xl .ovui-switch__thumb .ovui-switch__truthy-content-wrapper,
.ovui-switch--xl .ovui-switch__thumb .ovui-switch__falsy-content-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  align-items: center;
  display: flex;
  white-space: nowrap;
  font-size: 14px;
}
.ovui-switch--xl .ovui-switch__thumb .ovui-switch__truthy-content-wrapper {
  right: 0;
  padding-right: 30px;
  color: #ffffff;
}
.ovui-switch--xl .ovui-switch__thumb .ovui-switch__falsy-content-wrapper {
  left: 0;
  padding-left: 30px;
  color: #ffffff;
}
.ovui-switch--xl .ovui-switch__content-placeholder {
  visibility: hidden;
  font-size: 14px;
}
.ovui-switch--xl .ovui-switch__content-placeholder .ovui-switch__truthy-placeholder,
.ovui-switch--xl .ovui-switch__content-placeholder .ovui-switch__falsy-placeholder {
  display: flex;
  align-items: center;
}
.ovui-switch--xl .ovui-switch__content-placeholder .ovui-switch__thumb-placeholder {
  width: 36px;
  height: 24px;
  margin-left: 6px;
  margin-right: 6px;
}
.ovui-switch--xl.ovui-switch--disabled,
.ovui-switch--xl.ovui-switch--loading {
  cursor: not-allowed;
  background-color: #302842;
  color: rgba(255, 255, 255, 0.5);
}
.ovui-switch--xl.ovui-switch--disabled .ovui-switch__thumb,
.ovui-switch--xl.ovui-switch--loading .ovui-switch__thumb {
  background-color: rgba(255, 255, 255, 0.5);
  color: #d5c1ff;
}
.ovui-switch--xl.ovui-switch--checked {
  background-color: #00d5a4;
}
.ovui-switch--xl.ovui-switch--checked .ovui-switch__thumb {
  left: calc(100% - 24px - 2px * 2);
  color: #00d5a4;
  background-color: #ffffff;
}
.ovui-switch--xl.ovui-switch--disabled.ovui-switch--checked,
.ovui-switch--xl.ovui-switch--loading.ovui-switch--checked {
  cursor: not-allowed;
  background-color: #302842;
}
.ovui-switch--xl.ovui-switch--disabled.ovui-switch--checked .ovui-switch__thumb,
.ovui-switch--xl.ovui-switch--loading.ovui-switch--checked .ovui-switch__thumb {
  background-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.12);
}
.ovui-switch--xl .ovui-switch__thumb-icon {
  display: inline-flex;
}
.ovui-switch--xl .ovui-switch__thumb-icon .ovui-switch__truthy-icon,
.ovui-switch--xl .ovui-switch__thumb-icon .ovui-switch__falsy-icon {
  display: inline-flex;
}
.ovui-switch--xl.ovui-switch--rtl .ovui-switch__thumb {
  left: auto;
  right: 0;
}
.ovui-switch--xl.ovui-switch--rtl .ovui-switch__thumb .ovui-switch__truthy-content-wrapper {
  left: 0;
  right: auto;
  padding-left: 30px;
  color: #ffffff;
}
.ovui-switch--xl.ovui-switch--rtl .ovui-switch__thumb .ovui-switch__falsy-content-wrapper {
  right: 0;
  left: auto;
  padding-right: 30px;
  color: #ffffff;
}
.ovui-switch--xl.ovui-switch--rtl.ovui-switch--checked .ovui-switch__thumb {
  right: calc(100% - 24px - 2px * 2);
}
.ovui-switch--round {
  border-radius: 2px;
}
.ovui-switch--round .ovui-switch__thumb {
  border-radius: 2px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* ocean design 2.0 desgin tokens */
.ovui-table {
  border-spacing: 0;
  width: 100%;
  color: #ffffff;
  font-size: 12px;
  line-height: 20px;
  table-layout: fixed;
}
.ovui-table__expand-icon,
.ovui-table__tree-icon {
  color: rgba(255, 255, 255, 0.5);
  transform: rotate(-90deg);
}
.ovui-table__expand-icon:hover,
.ovui-table__tree-icon:hover {
  color: #651dff;
}
.ovui-table__expand-icon--expanded,
.ovui-table__tree-icon--expanded {
  transform: rotate(0deg);
}
.ovui-table__tree-icon {
  margin-right: 8px;
}
.ovui-table__tree-icon-wrapper {
  display: inline-flex;
}
.ovui-table__tree-icon-wrapper--noevents {
  pointer-events: none;
  visibility: hidden;
}
.ovui-td {
  padding: 16px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  font-size: 12px;
  font-weight: 400;
  background-color: #261d38;
  color: #ffffff;
  word-wrap: break-word;
}
.ovui-td--sticky {
  position: sticky;
  z-index: 1;
}
.ovui-td--sticky-left-last::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 15px;
  transform: translateX(100%);
  z-index: 3;
  box-shadow: inset 10px 0 10px -5px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}
.ovui-td--sticky-right-first::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15px;
  transform: translateX(-100%);
  z-index: 3;
  box-shadow: inset -10px 0 10px -5px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}
.ovui-td__cell-group {
  display: flex;
}
.ovui-th {
  background-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
  position: relative;
  padding: 14px 16px;
  text-align: left;
  word-break: break-all;
}
.ovui-th:hover {
  background-color: #261d38;
  color: rgba(255, 255, 255, 0.75);
}
.ovui-th--filterable {
  padding-right: 28px;
}
.ovui-th.ovui-table-cell--right .ovui-th__column-sorter {
  justify-content: end;
}
.ovui-th.ovui-table-cell--center .ovui-th__column-sorter {
  justify-content: center;
}
.ovui-th__column-sorter {
  display: flex;
  align-items: center;
  word-break: break-all;
}
.ovui-th__filter {
  width: 28px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.25);
}
.ovui-th__filter:hover {
  background-color: #dfe0e2;
  color: rgba(255, 255, 255, 0.5);
}
.ovui-th--sticky {
  position: sticky;
  z-index: 2;
}
.ovui-th--sticky-left {
  z-index: 3;
}
.ovui-th--sticky-right {
  z-index: 3;
}
.ovui-th--sticky-left-last::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 15px;
  transform: translateX(100%);
  z-index: 3;
  box-shadow: inset 10px 0 10px -5px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}
.ovui-th--sticky-right-first::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15px;
  transform: translateX(-100%);
  z-index: 3;
  box-shadow: inset -10px 0 10px -5px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}
.ovui-th__sorter {
  display: inline-flex;
  flex-direction: column;
  margin: 0 4px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}
.ovui-th__sorter:hover {
  color: rgba(255, 255, 255, 0.5);
}
.ovui-th__sorter-up {
  transform: rotate(-180deg);
}
.ovui-th__sorter-up:active,
.ovui-th__sorter-down:active {
  color: rgba(101, 29, 255, 0.75);
}
.ovui-th__sorter-up--active,
.ovui-th__sorter-down--active {
  color: #651dff;
}
.ovui-th__resize-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 2px;
  height: 100%;
  cursor: col-resize;
}
.ovui-th__resize-bar:hover {
  background-color: #651dff;
}
.ovui-tr:hover .ovui-td {
  background-color: #3c344d;
  color: #ffffff;
}
.ovui-tr:active .ovui-td {
  background-color: #3c344d;
  color: #ffffff;
}
.ovui-tfoot {
  position: sticky;
  bottom: 0;
  z-index: 3;
}
.ovui-t-summary-cell {
  background-color: rgba(255, 255, 255, 0.50196078);
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  font-weight: 500;
  font-size: 12px;
  line-height: 20px;
  position: relative;
  padding: 16px 16px;
  text-align: left;
  word-wrap: break-word;
}
.ovui-t-summary-cell:hover {
  background-color: #f4f4f5;
}
.ovui-t-summary-cell--sticky {
  position: sticky;
  z-index: 2;
}
.ovui-t-summary-cell--sticky-left {
  z-index: 3;
}
.ovui-t-summary-cell--sticky-left-last::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 15px;
  transform: translateX(100%);
  z-index: 3;
  box-shadow: inset 10px 0 10px -5px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}
.ovui-t-summary-cell--sticky-right-first::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 15px;
  transform: translateX(-100%);
  z-index: 3;
  box-shadow: inset -10px 0 10px -5px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}
.ovui-table-cell--left {
  text-align: left;
}
.ovui-table-cell--center {
  text-align: center;
}
.ovui-table-cell--right {
  text-align: right;
}
.ovui-table-cell--start {
  text-align: start;
}
.ovui-table-cell--end {
  text-align: end;
}
.ovui-table__container {
  position: relative;
}
.ovui-table__container--border::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  border-right: 1px solid rgba(0, 0, 0, 0);
  z-index: 7;
}
.ovui-table__container--border .ovui-td,
.ovui-table__container--border .ovui-th,
.ovui-table__container--border .ovui-t-summary-cell,
.ovui-table__container--border .ovui-table__shadow-right {
  border-right: 1px solid rgba(0, 0, 0, 0);
}
.ovui-table__container--border .ovui-td:first-child,
.ovui-table__container--border .ovui-th:first-child,
.ovui-table__container--border .ovui-t-summary-cell:first-child {
  border-left: 1px solid rgba(0, 0, 0, 0);
}
.ovui-table__container--border thead .ovui-tr:first-child .ovui-th {
  border-top: 1px solid rgba(0, 0, 0, 0);
}
.ovui-table__container--border.ovui-table__container--no-header .ovui-tr:first-child .ovui-td {
  border-top: 1px solid rgba(0, 0, 0, 0);
}
.ovui-table__container .ovui-thead__tree tr .ovui-th {
  border-bottom: 1px solid rgba(0, 0, 0, 0);
  border-left: 1px solid rgba(0, 0, 0, 0);
}
.ovui-table__container .ovui-thead__tree tr .ovui-th__no-left-border {
  border-left: none;
}
.ovui-table__container .ovui-thead__tree tr .ovui-th__no-bottom-border {
  border-bottom: none;
}
.ovui-table__wrapper {
  position: relative;
  overflow: auto;
}
.ovui-table__body-wrapper {
  position: relative;
  overflow: hidden;
}
.ovui-table__head-wrapper {
  position: sticky;
  top: 0;
  overflow: hidden;
  z-index: 2;
}
.ovui-table__empty-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.25);
}
.ovui-table__empty-wrapper .ovui-table__empty {
  margin-top: 48px;
}
.ovui-table__column-resize-line {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #651dff;
  z-index: 7;
}
.ovui-sticky-bar {
  position: sticky;
  overflow: auto;
  bottom: 0;
  z-index: 7;
}
.ovui-sticky-bar__inner {
  height: 1px;
  opacity: 0;
}
.ovui-t-summary:first-child .ovui-t-summary-cell::before {
  content: " ";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  border-top: 1px solid rgba(0, 0, 0, 0);
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* Tabs */
.ovui-tabs__nav {
  display: flex;
  align-items: center;
  white-space: nowrap;
  position: relative;
}
.ovui-tabs__nav::before {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #ebebed;
}
.ovui-tabs__nav-list-scroll-container {
  display: flex;
  max-width: 100%;
  align-self: stretch;
  flex-shrink: 1;
  overflow: hidden;
}
.ovui-tabs__nav-list {
  display: flex;
  position: relative;
  transition: transform 0.1s ease-in-out;
}
.ovui-tabs__nav-list-draggable {
  display: flex;
}
.ovui-tabs__angle-right,
.ovui-tabs__angle-left {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #999999;
}
.ovui-tabs__angle-right svg,
.ovui-tabs__angle-left svg {
  width: 16px;
  height: 16px;
}
.ovui-tabs__angle-right:hover,
.ovui-tabs__angle-left:hover {
  color: #651dff;
}
.ovui-tabs__angle-right--disabled,
.ovui-tabs__angle-left--disabled {
  color: rgba(255, 255, 255, 0.25);
  cursor: not-allowed;
}
.ovui-tabs__angle-right--disabled:hover,
.ovui-tabs__angle-left--disabled:hover {
  color: rgba(255, 255, 255, 0.25);
}
.ovui-tabs__angle-right {
  padding-left: 16px;
}
.ovui-tabs__angle-left {
  padding-right: 16px;
}
.ovui-tabs__tab {
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 24px;
  padding: 5px 0;
  margin-right: 34px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
}
.ovui-tabs__tab--active {
  color: #ffffff;
  font-weight: 600;
}
.ovui-tabs__tab--disabled {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.25);
}
.ovui-tabs__tab-close {
  width: 16px;
  height: 16px;
  margin-left: 4px;
}
.ovui-tabs__tab:nth-last-child(2) {
  padding-right: 0;
}
.ovui-tabs__tab:first-child {
  padding-left: 0;
}
.ovui-tabs__extra-content {
  flex: none;
  margin-left: 16px;
}
.ovui-tabs__panel .ovui-tab {
  display: none;
}
.ovui-tabs__panel .ovui-tab--active {
  display: block;
}
.ovui-tabs__panel .ovui-tab--force-render .ovui-tab {
  display: block;
}
.ovui-tabs__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  transition: transform 0.1s ease-in-out;
  background-color: #d220ff;
  z-index: 1;
  display: none;
}
.ovui-tabs__bar--show {
  display: block;
}
.ovui-tabs--rtl {
  direction: rtl;
}
.ovui-tabs--card > .ovui-tabs__nav {
  background-color: #302842;
}
.ovui-tabs--card > .ovui-tabs__nav .ovui-tabs__nav-list {
  margin-bottom: -1px;
}
.ovui-tabs--card > .ovui-tabs__nav .ovui-tabs__nav-list .ovui-tabs__tab {
  padding: 5px 16px;
  border: 1px solid transparent;
  position: relative;
  margin-right: 0;
}
.ovui-tabs--card > .ovui-tabs__nav .ovui-tabs__nav-list .ovui-tabs__tab::before {
  position: absolute;
  content: "";
  top: 50%;
  left: 0;
  width: 1px;
  height: 14px;
  transform: translateY(-50%);
  background-color: #ffffff;
}
.ovui-tabs--card > .ovui-tabs__nav .ovui-tabs__nav-list .ovui-tabs__tab:first-child::before {
  display: none;
}
.ovui-tabs--card > .ovui-tabs__nav .ovui-tabs__nav-list .ovui-tabs__tab--active {
  border-top-color: #ffffff;
  border-left-color: #ffffff;
  border-right-color: #ffffff;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  background-color: #302842;
}
.ovui-tabs--card > .ovui-tabs__nav .ovui-tabs__nav-list .ovui-tabs__tab--active::before {
  display: none;
}
.ovui-tabs--card > .ovui-tabs__nav .ovui-tabs__nav-list .ovui-tabs__tab--active + .ovui-tabs__tab::before {
  display: none;
}
.ovui-tabs--card > .ovui-tabs__nav .ovui-tabs__nav-list .ovui-tabs__active-bar {
  display: none;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* Input */
.ovui-textarea__wrapper {
  display: inline-flex;
  position: relative;
  border-radius: 24px;
  width: 100%;
}
.ovui-textarea__wrapper .ovui-textarea {
  width: 100%;
  flex: 1;
  outline: none;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0);
  color: inherit;
  cursor: inherit;
  vertical-align: bottom;
}
.ovui-textarea__wrapper .ovui-textarea::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}
.ovui-textarea__wrapper .ovui-textarea:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.ovui-textarea__wrapper .ovui-textarea::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.ovui-textarea__wrapper .ovui-textarea[type="text"],
.ovui-textarea__wrapper .ovui-textarea[type="number"],
.ovui-textarea__wrapper .ovui-textarea[type="password"] {
  -moz-appearance: none;
       appearance: none;
}
.ovui-textarea__wrapper .ovui-textarea[type="number"]::-webkit-inner-spin-button {
  appearance: none;
}
.ovui-textarea__wrapper--fill {
  border: 1px solid #3c344d;
  background-color: #3c344d;
  color: #ffffff;
}
.ovui-textarea__wrapper--fill .ovui-textarea::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}
.ovui-textarea__wrapper--fill .ovui-textarea:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.ovui-textarea__wrapper--fill .ovui-textarea::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.ovui-textarea__wrapper--fill:hover {
  color: #ffffff;
  background-color: #3c344d;
  border-color: #d220ff;
  transition: all 0.1s ease-in-out;
}
.ovui-textarea__wrapper--fill.ovui-textarea__wrapper--focused {
  color: #ffffff;
  background-color: #1a112e;
  border-color: #651dff;
  box-shadow: 0 0 0 2px rgba(101, 29, 255, 0.2);
  animation: bui-input-focus-effect_primary 0.1s ease-in-out;
}
@keyframes bui-input-focus-effect_primary {
  from {
    box-shadow: 0 0 0 0 #651dff;
  }
  to {
    box-shadow: 0 0 0 2px rgba(101, 29, 255, 0.2);
  }
}
.ovui-textarea__wrapper--fill.ovui-textarea__wrapper--error {
  border: 1px solid transparent;
  background-color: rgba(255, 0, 96, 0.06);
  color: #ffffff;
}
.ovui-textarea__wrapper--fill.ovui-textarea__wrapper--error:hover {
  color: #ffffff;
  background-color: rgba(255, 0, 96, 0.06);
  border-color: transparent;
  transition: all 0.1s ease-in-out;
}
.ovui-textarea__wrapper--fill.ovui-textarea__wrapper--error.ovui-textarea__wrapper--focused {
  color: #ffffff;
  background-color: rgba(255, 0, 96, 0.06);
  border-color: #ff0060;
  box-shadow: 0 0 0 2px rgba(255, 0, 96, 0.2);
  animation: bui-input-focus-effect_error 0.1s ease-in-out;
}
@keyframes bui-input-focus-effect_error {
  from {
    box-shadow: 0 0 0 0 #ff0060;
  }
  to {
    box-shadow: 0 0 0 2px rgba(255, 0, 96, 0.2);
  }
}
.ovui-textarea__wrapper--fill.ovui-textarea__wrapper--disabled,
.ovui-textarea__wrapper--fill.ovui-textarea__wrapper--disabled:hover,
.ovui-textarea__wrapper--fill.ovui-textarea__wrapper--disabled.ovui-textarea__wrapper--focused {
  background-color: #302842;
  border-color: #3c344d;
  color: rgba(255, 255, 255, 0.25);
  box-shadow: none;
  animation: none;
}
.ovui-textarea__wrapper--fill.ovui-textarea__wrapper--disabled .ovui-textarea::-moz-placeholder,
.ovui-textarea__wrapper--fill.ovui-textarea__wrapper--disabled:hover .ovui-textarea::-moz-placeholder,
.ovui-textarea__wrapper--fill.ovui-textarea__wrapper--disabled.ovui-textarea__wrapper--focused .ovui-textarea::-moz-placeholder {
  color: rgba(255, 255, 255, 0.25);
  opacity: 1;
}
.ovui-textarea__wrapper--fill.ovui-textarea__wrapper--disabled .ovui-textarea:-ms-input-placeholder,
.ovui-textarea__wrapper--fill.ovui-textarea__wrapper--disabled:hover .ovui-textarea:-ms-input-placeholder,
.ovui-textarea__wrapper--fill.ovui-textarea__wrapper--disabled.ovui-textarea__wrapper--focused .ovui-textarea:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.25);
}
.ovui-textarea__wrapper--fill.ovui-textarea__wrapper--disabled .ovui-textarea::-webkit-input-placeholder,
.ovui-textarea__wrapper--fill.ovui-textarea__wrapper--disabled:hover .ovui-textarea::-webkit-input-placeholder,
.ovui-textarea__wrapper--fill.ovui-textarea__wrapper--disabled.ovui-textarea__wrapper--focused .ovui-textarea::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.25);
}
.ovui-textarea__wrapper--stroke {
  background-color: #3c344d;
  color: #ffffff;
  border: 1px solid #d220ff;
}
.ovui-textarea__wrapper--stroke:hover {
  background-color: #261d38;
  color: #ffffff;
  border-color: #d220ff;
  transition: all 0.1s ease-in-out;
}
.ovui-textarea__wrapper--stroke.ovui-textarea__wrapper--focused {
  background-color: #302842;
  color: #ffffff;
  border-color: #651dff;
  box-shadow: 0 0 0 2px rgba(101, 29, 255, 0.2);
  animation: bui-input-focus-effect_primary 0.1s ease-in-out;
}
@keyframes bui-input-focus-effect_primary {
  from {
    box-shadow: 0 0 0 0 #651dff;
  }
  to {
    box-shadow: 0 0 0 2px rgba(101, 29, 255, 0.2);
  }
}
.ovui-textarea__wrapper--stroke.ovui-textarea__wrapper--error {
  background-color: #3c344d;
  color: #ffffff;
  border: 1px solid #ff0060;
}
.ovui-textarea__wrapper--stroke.ovui-textarea__wrapper--error:hover {
  background-color: #1a112e;
  color: #ffffff;
  border-color: #ff2f7f;
  transition: border-color 0.1s ease-in-out;
}
.ovui-textarea__wrapper--stroke.ovui-textarea__wrapper--error.ovui-textarea__wrapper--focused {
  background-color: #302842;
  color: #ffffff;
  border-color: #ff0060;
  box-shadow: 0 0 0 2px rgba(255, 0, 96, 0.2);
  animation: bui-input-focus-effect_error 0.1s ease-in-out;
}
@keyframes bui-input-focus-effect_error {
  from {
    box-shadow: 0 0 0 0 #ff0060;
  }
  to {
    box-shadow: 0 0 0 2px rgba(255, 0, 96, 0.2);
  }
}
.ovui-textarea__wrapper--stroke.ovui-textarea__wrapper--disabled,
.ovui-textarea__wrapper--stroke.ovui-textarea__wrapper--disabled:hover,
.ovui-textarea__wrapper--stroke.ovui-textarea__wrapper--disabled.ovui-textarea__wrapper--focused {
  color: rgba(255, 255, 255, 0.25);
  background-color: #3c344d;
  border: 1px solid rgba(210, 32, 255, 0.34117647);
  box-shadow: none;
  animation: none;
}
.ovui-textarea__wrapper--stroke.ovui-textarea__wrapper--disabled .ovui-textarea::-moz-placeholder,
.ovui-textarea__wrapper--stroke.ovui-textarea__wrapper--disabled:hover .ovui-textarea::-moz-placeholder,
.ovui-textarea__wrapper--stroke.ovui-textarea__wrapper--disabled.ovui-textarea__wrapper--focused .ovui-textarea::-moz-placeholder {
  color: rgba(255, 255, 255, 0.25);
  opacity: 1;
}
.ovui-textarea__wrapper--stroke.ovui-textarea__wrapper--disabled .ovui-textarea:-ms-input-placeholder,
.ovui-textarea__wrapper--stroke.ovui-textarea__wrapper--disabled:hover .ovui-textarea:-ms-input-placeholder,
.ovui-textarea__wrapper--stroke.ovui-textarea__wrapper--disabled.ovui-textarea__wrapper--focused .ovui-textarea:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.25);
}
.ovui-textarea__wrapper--stroke.ovui-textarea__wrapper--disabled .ovui-textarea::-webkit-input-placeholder,
.ovui-textarea__wrapper--stroke.ovui-textarea__wrapper--disabled:hover .ovui-textarea::-webkit-input-placeholder,
.ovui-textarea__wrapper--stroke.ovui-textarea__wrapper--disabled.ovui-textarea__wrapper--focused .ovui-textarea::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.25);
}
.ovui-textarea__wrapper--xs {
  padding: 1px 8px;
}
.ovui-textarea__wrapper--xs,
.ovui-textarea__wrapper--xs .ovui-textarea {
  font-size: 12px;
  line-height: 20px;
}
.ovui-textarea__wrapper--sm {
  padding: 3px 8px;
}
.ovui-textarea__wrapper--sm,
.ovui-textarea__wrapper--sm .ovui-textarea {
  font-size: 12px;
  line-height: 20px;
}
.ovui-textarea__wrapper--md {
  padding: 4px 8px;
}
.ovui-textarea__wrapper--md,
.ovui-textarea__wrapper--md .ovui-textarea {
  font-size: 14px;
  line-height: 22px;
}
.ovui-textarea__wrapper--lg {
  padding: 8px 8px;
}
.ovui-textarea__wrapper--lg,
.ovui-textarea__wrapper--lg .ovui-textarea {
  font-size: 14px;
  line-height: 22px;
}
.ovui-textarea__wrapper--xl {
  padding: 14px 8px;
}
.ovui-textarea__wrapper--xl,
.ovui-textarea__wrapper--xl .ovui-textarea {
  font-size: 16px;
  line-height: 24px;
}
.ovui-textarea__wrapper--unstyle {
  padding: 0;
  border: none;
  background-color: transparent;
  color: #ffffff;
}
.ovui-textarea__wrapper--noborder {
  background-color: #302842;
  color: #ffffff;
  border: 1px solid #302842;
}
.ovui-textarea__wrapper .ovui-textarea__clear {
  color: rgba(255, 255, 255, 0.5);
  z-index: 3;
  cursor: pointer;
  transition: opacity 0.1s ease-in;
}
.ovui-textarea__wrapper .ovui-textarea__clear--absolute {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}
.ovui-textarea__wrapper .ovui-textarea__clear--margin-right {
  margin-right: 4px;
}
.ovui-textarea__wrapper .ovui-textarea__clear:hover {
  color: rgba(255, 255, 255, 0.75);
}
.ovui-textarea__wrapper .ovui-textarea__clear:active {
  color: #ffffff;
}
.ovui-textarea__wrapper .ovui-textarea__count {
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  position: absolute;
  font-size: 12px;
  line-height: 14px;
  bottom: 4px;
}
.ovui-textarea__wrapper .ovui-textarea__prefix {
  z-index: 1;
  display: flex;
  align-self: stretch;
  align-items: center;
  padding-right: 4px;
  color: #ffffff;
}
.ovui-textarea__wrapper .ovui-textarea__suffix {
  z-index: 1;
  align-self: stretch;
  align-items: center;
  color: #ffffff;
  display: flex;
  padding-left: 4px;
}
.ovui-textarea__wrapper .ovui-textarea__suffix .ovui-textarea__clear {
  opacity: 0;
  pointer-events: none;
}
.ovui-textarea__wrapper .ovui-textarea__suffix .ovui-textarea__clear--show {
  opacity: 1;
  pointer-events: auto;
}
.ovui-textarea__wrapper .ovui-textarea__after {
  z-index: 1;
  align-self: stretch;
  align-items: center;
  color: #ffffff;
  display: flex;
  padding-left: 4px;
}
.ovui-textarea__wrapper .ovui-textarea__after--has-clear .ovui-icon {
  opacity: 0;
}
.ovui-textarea__wrapper .ovui-textarea__after .ovui-textarea__clear {
  display: none;
}
.ovui-textarea__wrapper .ovui-textarea__after .ovui-textarea__clear--show {
  display: block;
  opacity: 1;
}
.ovui-textarea__wrapper--disabled,
.ovui-textarea__wrapper--disabled .ovui-textarea {
  cursor: not-allowed;
}
.ovui-textarea__wrapper--disabled .ovui-textarea__prefix,
.ovui-textarea__wrapper--disabled .ovui-textarea__suffix {
  color: #d5d6d9;
}
.ovui-textarea__wrapper:hover:not(.ovui-textarea__wrapper--disabled):not(.ovui-textarea__wrapper--error) .ovui-textarea--stroke {
  border-color: #651dff;
}
.ovui-textarea__wrapper--rtl {
  direction: rtl;
}
.ovui-textarea__wrapper--rtl .ovui-textarea {
  direction: rtl;
}
.ovui-textarea__wrapper--rtl .ovui-textarea__clear--absolute {
  right: auto;
  left: 12px;
}
.ovui-textarea__wrapper--rtl .ovui-textarea__clear--margin-right {
  margin-right: 0;
  margin-left: 4px;
}
.ovui-textarea__wrapper--rtl .ovui-textarea__prefix {
  padding-right: 0;
  padding-left: 4px;
}
.ovui-textarea__wrapper--rtl .ovui-textarea__suffix,
.ovui-textarea__wrapper--rtl .ovui-textarea__after {
  padding-left: 0;
  padding-right: 4px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.ovui-time-line-item {
  position: relative;
  display: flex;
}
.ovui-time-line-item--start,
.ovui-time-line-item--left {
  justify-content: flex-start;
}
.ovui-time-line-item--start .ovui-time-line-item__container,
.ovui-time-line-item--left .ovui-time-line-item__container {
  align-items: flex-start;
  margin-left: 28px;
}
.ovui-time-line-item--start.ovui-time-line-item--nonunique,
.ovui-time-line-item--left.ovui-time-line-item--nonunique {
  margin-left: 50%;
  transform: translate(-6px);
}
.ovui-time-line-item--start.ovui-time-line-item--nonunique .ovui-time-line-item__container,
.ovui-time-line-item--left.ovui-time-line-item--nonunique .ovui-time-line-item__container {
  align-items: flex-start;
  margin-left: 28px;
}
.ovui-time-line-item--end,
.ovui-time-line-item--right {
  justify-content: flex-end;
}
.ovui-time-line-item--end .ovui-time-line-item__container,
.ovui-time-line-item--right .ovui-time-line-item__container {
  align-items: flex-end;
  margin-right: 28px;
}
.ovui-time-line-item--end.ovui-time-line-item--nonunique,
.ovui-time-line-item--right.ovui-time-line-item--nonunique {
  margin-right: 50%;
  transform: translate(6px);
}
.ovui-time-line-item--end.ovui-time-line-item--nonunique .ovui-time-line-item__container,
.ovui-time-line-item--right.ovui-time-line-item--nonunique .ovui-time-line-item__container {
  align-items: flex-end;
  margin-right: 28px;
}
.ovui-time-line-item__loop {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border-width: 2px;
  border-style: solid;
}
.ovui-time-line-item__loop--default {
  border-color: #c1c1c1;
}
.ovui-time-line-item__loop--info {
  border-color: #338aff;
}
.ovui-time-line-item__loop--success {
  border-color: #6abf40;
}
.ovui-time-line-item__loop--danger {
  border-color: #f65656;
}
.ovui-time-line-item .ovui-time-line-item__line {
  width: 1px;
  transform: translate(-0.5px);
  flex: 1;
  background-color: #c1c1c1;
  margin-bottom: 2px;
  margin-top: 2px;
}
.ovui-time-line-item .ovui-time-line-item__separate {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ovui-time-line-item .ovui-time-line-item__separate .ovui-time-line-item__icon {
  margin: 6px 0px 6px 0px;
}
.ovui-time-line-item .ovui-time-line-item__container {
  display: flex;
  flex-direction: column;
  padding-bottom: 22px;
}
.ovui-time-line-item .ovui-time-line-item__container .ovui-time-line-item__header {
  display: flex;
  align-items: center;
}
.ovui-time-line-item .ovui-time-line-item__container .ovui-time-line-item__header .ovui-time-line-item__title {
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  color: #ffffff;
}
.ovui-time-line-item .ovui-time-line-item__container .ovui-time-line-item__desc {
  margin-top: 4px;
  font-size: 14px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 400;
}
.ovui-time-line-item:last-of-type .ovui-time-line-item__line {
  display: none;
}
.ovui-time-line-item:last-of-type .ovui-time-line-item__container {
  padding-bottom: 0;
}
.ovui-time-line {
  position: relative;
}
.ovui-time-line--rtl {
  direction: rtl;
}
.ovui-time-line--rtl .ovui-time-line-item--left,
.ovui-time-line--rtl .ovui-time-line-item--right {
  direction: ltr;
}
.ovui-time-line--rtl .ovui-time-line-item--start .ovui-time-line-item__container {
  align-items: flex-start;
  margin-right: 28px;
  margin-left: unset;
}
.ovui-time-line--rtl .ovui-time-line-item--start.ovui-time-line-item--nonunique {
  margin-right: 50%;
  margin-left: unset;
  transform: translate(6px);
}
.ovui-time-line--rtl .ovui-time-line-item--start.ovui-time-line-item--nonunique .ovui-time-line-item__container {
  margin-right: 28px;
  margin-left: unset;
}
.ovui-time-line--rtl .ovui-time-line-item--end .ovui-time-line-item__container {
  align-items: flex-end;
  margin-left: 28px;
  margin-right: unset;
}
.ovui-time-line--rtl .ovui-time-line-item--end.ovui-time-line-item--nonunique {
  margin-left: 50%;
  margin-right: unset;
  transform: translate(-6px);
}
.ovui-time-line--rtl .ovui-time-line-item--end.ovui-time-line-item--nonunique .ovui-time-line-item__container {
  margin-left: 28px;
  margin-right: unset;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
/* 滚动条样式 */
/* 全局命名空间 */
/* active */
/* normal */
/* hover or focus */
/* disabled */
/* fill bg */
/* active bg */
/* 中性色 */
/* font-face */
@font-face {
  font-family: "OC-OPPOSans";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-R-subset.ttf");
}
@font-face {
  font-family: "OC-OPPOSans-Bold";
  src: url("//lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_ui/OPPOSans-B-subset.ttf");
}
/* font-family */
/* font-size */
/* line-height */
/* text color 中性色 */
/* #333 */
/* #666 */
/* text color 白色 */
/* background color */
/* drawer & modal mask background */
/* Border */
/*  Border  width */
/* width of the border for a component */
/* style of a components border */
/* border-radius */
/* 动效时间 待UI提供最终结论 */
/* 动效曲线 待UI提供最终结论 */
/* shadow */
/* z-index */
/* space */
/* base border outline a component */
/*  split border inside a component */
/* disabled stroke background & color */
/* disabled fill background & color */
/* ScrollBar */
/* list item hover background */
/* checkbox or radio exit */
/* expand arrow exit */
/*  item group indent 12 */
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
/* UploadViewButton */
/* UploadViewButton variants=normal */
/* UploadViewButton variants=card-block */
/* UploadViewButton variants=card-inline */
/* UploadViewAvatar */
/* UploadViewDrag */
.ovui-upload-view-button .ovui-button--default,
.ovui-upload-view-drag .ovui-button--default {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ovui-upload-view-button__text,
.ovui-upload-view-drag__text {
  margin-left: 4px;
}
.ovui-upload-view-button__filelist,
.ovui-upload-view-drag__filelist {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 16px;
}
.ovui-upload-view-button__fileitem-normal,
.ovui-upload-view-drag__fileitem-normal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 22px;
  font-size: 14px;
  color: #ffffff;
  padding-left: 8px;
}
.ovui-upload-view-button__fileitem-normal:not(:last-of-type),
.ovui-upload-view-drag__fileitem-normal:not(:last-of-type) {
  margin-bottom: 8px;
}
.ovui-upload-view-button__fileitem-normal .ovui-upload-view-button__filename,
.ovui-upload-view-drag__fileitem-normal .ovui-upload-view-button__filename,
.ovui-upload-view-button__fileitem-normal .ovui-upload-view-drag__filename,
.ovui-upload-view-drag__fileitem-normal .ovui-upload-view-drag__filename {
  height: 100%;
  display: flex;
  align-items: center;
}
.ovui-upload-view-button__fileitem-normal .ovui-upload-view-button__filename svg,
.ovui-upload-view-drag__fileitem-normal .ovui-upload-view-button__filename svg,
.ovui-upload-view-button__fileitem-normal .ovui-upload-view-drag__filename svg,
.ovui-upload-view-drag__fileitem-normal .ovui-upload-view-drag__filename svg {
  margin-right: 8px;
}
.ovui-upload-view-button__fileitem-normal .ovui-upload-view-button__close:hover,
.ovui-upload-view-drag__fileitem-normal .ovui-upload-view-button__close:hover,
.ovui-upload-view-button__fileitem-normal .ovui-upload-view-drag__close:hover,
.ovui-upload-view-drag__fileitem-normal .ovui-upload-view-drag__close:hover {
  cursor: pointer;
}
.ovui-upload-view-button__fileitem-normal--error,
.ovui-upload-view-drag__fileitem-normal--error {
  color: #ff0060;
}
.ovui-upload-view-button__fileitem-normal--error .ovui-upload-view-button__close,
.ovui-upload-view-drag__fileitem-normal--error .ovui-upload-view-button__close,
.ovui-upload-view-button__fileitem-normal--error .ovui-upload-view-drag__close,
.ovui-upload-view-drag__fileitem-normal--error .ovui-upload-view-drag__close {
  fill: #ff0060;
}
.ovui-upload-view-button__fileitem-card-block,
.ovui-upload-view-drag__fileitem-card-block {
  margin-bottom: 8px;
}
.ovui-upload-view-button__fileitem-card-block .ovui-upload-view-button__card,
.ovui-upload-view-drag__fileitem-card-block .ovui-upload-view-button__card {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 7px;
  border: 1px solid #dfe0e2;
  box-sizing: border-box;
  border-radius: 8px;
}
.ovui-upload-view-button__fileitem-card-block .ovui-upload-view-button__image,
.ovui-upload-view-drag__fileitem-card-block .ovui-upload-view-button__image {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-size: cover;
}
.ovui-upload-view-button__fileitem-card-block .ovui-upload-view-button__content,
.ovui-upload-view-drag__fileitem-card-block .ovui-upload-view-button__content {
  height: 100%;
  flex: 1;
  margin-left: 8px;
}
.ovui-upload-view-button__fileitem-card-block .ovui-upload-view-button__info,
.ovui-upload-view-drag__fileitem-card-block .ovui-upload-view-button__info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 22px;
  margin-bottom: 4px;
  font-size: 14px;
  color: #ffffff;
}
.ovui-upload-view-button__fileitem-card-block .ovui-upload-view-button__close:hover,
.ovui-upload-view-drag__fileitem-card-block .ovui-upload-view-button__close:hover {
  cursor: pointer;
}
.ovui-upload-view-button__fileitem-card-block .ovui-upload-view-button__progress,
.ovui-upload-view-drag__fileitem-card-block .ovui-upload-view-button__progress {
  position: relative;
  height: 2px;
  border-radius: 8px;
  background-color: #ebebed;
}
.ovui-upload-view-button__fileitem-card-block .ovui-upload-view-button__progress .ovui-upload-view-button__bar,
.ovui-upload-view-drag__fileitem-card-block .ovui-upload-view-button__progress .ovui-upload-view-button__bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #651dff;
  border-radius: 8px;
}
.ovui-upload-view-button__fileitem-card-block--error .ovui-upload-view-button__card,
.ovui-upload-view-drag__fileitem-card-block--error .ovui-upload-view-button__card {
  border: 1px solid #ff0060;
}
.ovui-upload-view-button__fileitem-card-block--error .ovui-upload-view-button__info,
.ovui-upload-view-drag__fileitem-card-block--error .ovui-upload-view-button__info {
  color: #ffffff;
}
.ovui-upload-view-button__fileitem-card-block .ovui-upload-view-button__error,
.ovui-upload-view-drag__fileitem-card-block .ovui-upload-view-button__error {
  font-size: 12px;
  color: #ff0060;
  height: 20px;
  line-height: 20px;
  margin: 0;
  margin-top: 4px;
}
.ovui-upload-view-button--inline .ovui-upload-view-button__filelist,
.ovui-upload-view-drag--inline .ovui-upload-view-button__filelist {
  display: flex;
  flex-wrap: wrap;
  margin-left: -8px;
}
.ovui-upload-view-button--inline .ovui-upload-view-button__filelist .ovui-upload-view-button__fileitem-card-block,
.ovui-upload-view-drag--inline .ovui-upload-view-button__filelist .ovui-upload-view-button__fileitem-card-block {
  width: 200px;
  margin-left: 8px;
}
.ovui-upload-view-avatar {
  width: 120px;
  height: 120px;
  border: 1px dashed #ffffff;
  border-radius: 8px;
}
.ovui-upload-view-drag__dropzone {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 160px;
  border: 1px dashed #ffffff;
  border-radius: 8px;
  cursor: pointer;
}
.ovui-upload-view-drag__dropzone:hover {
  border-color: #ffffff;
}
.ovui-upload-view-drag__dropzone * {
  pointer-events: none;
}
.ovui-upload-view-drag__dropzone--active {
  background-color: #302842;
  border-color: rgba(210, 32, 255, 0.74901961);
  cursor: grab;
}
.ovui-upload-view-drag__upload-icon {
  color: #ffffff;
}
.ovui-upload-view-drag__textwrap {
  font-size: 14px;
  color: #ffffff;
  margin-top: 8px;
}
.ovui-upload-view-drag__textwrap button {
  background-color: transparent;
  border: none;
  color: #651dff;
  padding: 0;
  cursor: pointer;
}
.ovui-upload-view-drag__filelist {
  width: 400px;
}
.ovui-upload-view-drag--error .ovui-upload-view-drag__dropzone {
  border-color: #ff0060;
  background-color: #302842;
}
.ovui-upload-view-drag--disabled .ovui-upload-view-drag__dropzone,
.ovui-upload-view-drag--disabled .ovui-upload-view-drag__dropzone:hover {
  cursor: not-allowed;
  border-color: #ffffff;
  background-color: #302842;
}
.ovui-upload-view-drag--disabled .ovui-upload-view-drag__upload-icon,
.ovui-upload-view-drag--disabled .ovui-upload-view-drag__textwrap {
  color: rgba(255, 255, 255, 0.25);
}
.ovui-upload-view-drag--disabled .ovui-upload-view-drag__upload-icon button,
.ovui-upload-view-drag--disabled .ovui-upload-view-drag__textwrap button {
  color: rgba(101, 29, 255, 0.34);
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-add-button {
  height: 34px;
  text-align: center;
}
.oc-add-button .ovui-button--block {
  display: flex;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-button-wrap {
  display: inline-flex;
}
.oc-button-wrap-block {
  width: 100%;
}
.oc-button-wrap-block .ovui-button {
  white-space: normal;
  display: flex;
}
.oc-button-wrap .ovui-button--md:not(.ovui-button--link, .ovui-button--square, .ovui-button--circle, .ovui-button--text) {
  min-width: 88px;
}
.oc-button-wrap .ovui-button--sm:not(.ovui-button--link, .ovui-button--square, .ovui-button--circle, .ovui-button--text) {
  min-width: 56px;
  padding: 3px 15px;
}
.oc-button-wrap .ovui-button--xs:not(.ovui-button--link, .ovui-button--square, .ovui-button--circle, .ovui-button--text) {
  min-width: 56px;
}
.oc-button-wrap .oc-button-color-inherit {
  color: inherit;
}
.oc-button-wrap .ovui-button--text {
  border: none;
  box-shadow: unset !important;
}
.oc-button-wrap .custom-icon {
  position: absolute;
  top: -1px;
  right: -1px;
  line-height: 0;
}
.oc-button-wrap .prefixIcon + span {
  margin-left: 4px;
}
.oc-button-wrap span + .suffixIcon {
  margin-left: 4px;
}
.oc-button-wrap .ovui-button--loading.oc-button-icon .prefixIcon {
  display: none;
}
.oc-button-wrap .ovui-button--loading.oc-button-icon .suffixIcon {
  display: none;
}
.oc-button-wrap .ovui-button--loading.oc-button-icon .ovui-button__loading-icon {
  margin-right: 0px;
}
.oc-button-selected-wrap .ovui-button--default-stroke {
  border: 1px solid #651dff;
  color: #651dff;
}
.oc-button-scene-ai .ovui-button--primary-fill {
  position: relative;
  background: none;
  border: 1px solid transparent;
}
.oc-button-scene-ai .ovui-button--primary-fill::before {
  content: '';
  position: absolute;
  background: linear-gradient(105deg, #47D7FA -20.46%, #3B7EF4 36.73%, #B84EF1 107.72%, #F355C1 192.67%);
  z-index: -1;
  inset: -1px;
  border-radius: inherit;
  isolation: isolate;
}
.oc-button-scene-ai .ovui-button--primary-fill:hover::before {
  background: linear-gradient(115deg, #47D7FA 0.02%, #3B7EF4 28.15%, #B84EF1 59.13%, #F355C1 78.95%, #F9835F 95.91%);
}
.oc-button-scene-ai .ovui-button--primary-fill:active::before,
.oc-button-scene-ai .ovui-button--primary-fill:focus::before {
  background: linear-gradient(115deg, #379AC7 0.02%, #3066C3 28.15%, #774AC2 59.13%, #AF42AA 78.95%, #C65E63 95.91%);
}
.oc-button-scene-ai .ovui-button--primary-fill.ovui-button--disabled {
  color: rgba(0, 0, 0, 0);
}
.oc-button-scene-ai .ovui-button--primary-fill.ovui-button--disabled::before {
  background: linear-gradient(105deg, rgba(71, 215, 250, 0.2) -20.46%, rgba(59, 126, 244, 0.2) 36.73%, rgba(184, 78, 241, 0.2) 107.72%, rgba(243, 85, 193, 0.2) 192.67%);
}
.oc-button-scene-ai .ovui-button--primary-stroke:not(.ovui-button--link, .ovui-button--square, .ovui-button--circle, .ovui-button--text) {
  border: 1px solid transparent !important;
}
.oc-button-scene-ai .ovui-button--primary-stroke:not(.ovui-button--link, .ovui-button--square, .ovui-button--circle, .ovui-button--text)::before {
  content: "";
  z-index: -1;
  background: linear-gradient(105deg, #47D7FA -20.46%, #3B7EF4 36.73%, #B84EF1 107.72%, #F355C1 192.67%);
  border-radius: inherit;
  position: absolute;
  inset: -1px;
}
.oc-button-scene-ai .ovui-button--primary-stroke:not(.ovui-button--link, .ovui-button--square, .ovui-button--circle, .ovui-button--text)::after {
  content: "";
  z-index: -1;
  background: #302842;
  border-radius: 7px;
  position: absolute;
  inset: 0;
}
.oc-button-scene-ai .ovui-button--primary-stroke,
.oc-button-scene-ai .ovui-button--link,
.oc-button-scene-ai .ovui-button--text {
  background-clip: text;
  -webkit-background-clip: text;
  background-image: linear-gradient(105deg, #47D7FA -20.46%, #3B7EF4 36.73%, #B84EF1 107.72%, #F355C1 192.67%);
}
.oc-button-scene-ai .ovui-button--primary-stroke .button-text,
.oc-button-scene-ai .ovui-button--link .button-text,
.oc-button-scene-ai .ovui-button--text .button-text {
  color: transparent;
}
.oc-button-scene-ai .ovui-button--primary-stroke:hover,
.oc-button-scene-ai .ovui-button--link:hover,
.oc-button-scene-ai .ovui-button--text:hover {
  background-image: linear-gradient(115deg, #47D7FA 0.02%, #3B7EF4 28.15%, #B84EF1 59.13%, #F355C1 78.95%, #F9835F 95.91%);
}
.oc-button-scene-ai .ovui-button--primary-stroke:hover::before,
.oc-button-scene-ai .ovui-button--link:hover::before,
.oc-button-scene-ai .ovui-button--text:hover::before {
  background: linear-gradient(115deg, #47D7FA 0.02%, #3B7EF4 28.15%, #B84EF1 59.13%, #F355C1 78.95%, #F9835F 95.91%);
}
.oc-button-scene-ai .ovui-button--primary-stroke:active,
.oc-button-scene-ai .ovui-button--link:active,
.oc-button-scene-ai .ovui-button--text:active,
.oc-button-scene-ai .ovui-button--primary-stroke:focus,
.oc-button-scene-ai .ovui-button--link:focus,
.oc-button-scene-ai .ovui-button--text:focus {
  background-image: linear-gradient(115deg, #379AC7 0.02%, #3066C3 28.15%, #774AC2 59.13%, #AF42AA 78.95%, #C65E63 95.91%);
}
.oc-button-scene-ai .ovui-button--primary-stroke:active::before,
.oc-button-scene-ai .ovui-button--link:active::before,
.oc-button-scene-ai .ovui-button--text:active::before,
.oc-button-scene-ai .ovui-button--primary-stroke:focus::before,
.oc-button-scene-ai .ovui-button--link:focus::before,
.oc-button-scene-ai .ovui-button--text:focus::before {
  background: linear-gradient(115deg, #379AC7 0.02%, #3066C3 28.15%, #774AC2 59.13%, #AF42AA 78.95%, #C65E63 95.91%);
}
.oc-button-scene-ai .ovui-button--primary-stroke:active::after,
.oc-button-scene-ai .ovui-button--link:active::after,
.oc-button-scene-ai .ovui-button--text:active::after,
.oc-button-scene-ai .ovui-button--primary-stroke:focus::after,
.oc-button-scene-ai .ovui-button--link:focus::after,
.oc-button-scene-ai .ovui-button--text:focus::after {
  background: linear-gradient(122deg, #F0FCFF 10.27%, #EFF5FE 38.69%, #F9F1FE 58.77%, #FEF1FA 75.03%, #FFF5F2 88.94%);
}
.oc-button-scene-ai .ovui-button--primary-stroke.ovui-button--disabled,
.oc-button-scene-ai .ovui-button--link.ovui-button--disabled,
.oc-button-scene-ai .ovui-button--text.ovui-button--disabled {
  background-image: linear-gradient(105deg, rgba(71, 215, 250, 0.2) -20.46%, rgba(59, 126, 244, 0.2) 36.73%, rgba(184, 78, 241, 0.2) 107.72%, rgba(243, 85, 193, 0.2) 192.67%);
}
.oc-button-scene-ai .ovui-button--primary-stroke.ovui-button--disabled::before,
.oc-button-scene-ai .ovui-button--link.ovui-button--disabled::before,
.oc-button-scene-ai .ovui-button--text.ovui-button--disabled::before {
  background: linear-gradient(105deg, rgba(71, 215, 250, 0.2) -20.46%, rgba(59, 126, 244, 0.2) 36.73%, rgba(184, 78, 241, 0.2) 107.72%, rgba(243, 85, 193, 0.2) 192.67%);
}
.oc-button-scene-ai .ovui-button--primary-stroke.ovui-button--disabled::after,
.oc-button-scene-ai .ovui-button--link.ovui-button--disabled::after,
.oc-button-scene-ai .ovui-button--text.ovui-button--disabled::after {
  background: #302842;
}
.hide-border button {
  border-color: #fff !important;
  box-shadow: unset !important;
}
.hide-border .ovui-button--primary-stroke::before,
.hide-border .ovui-button--primary-stroke::after {
  display: none;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-popover {
  display: flex;
}
.oc-popover .oc-popover-icon-wrapper {
  line-height: 0;
  font-size: 0;
}
.oc-popover .oc-popover-icon-wrapper > .oc-icon {
  color: rgba(255, 255, 255, 0.25);
}
.oc-popover .oc-popover-icon-wrapper > .oc-icon:hover {
  cursor: pointer;
  color: #651dff;
}
.oc-popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bolder;
  font-size: 14px;
  line-height: 22px;
  color: #323335;
}
.oc-popover__header .close {
  color: #ffffff;
  padding: 4px;
  color: #969aa0;
}
.oc-popover__header .close:hover {
  color: #651dff;
  cursor: pointer;
}
.oc-popover__header-left {
  display: flex;
  align-items: center;
}
.oc-popover__header-left-icon {
  margin-right: 8px;
}
.oc-popover__header-left iconpark-icon[name="oc-icon-success"] {
  color: #00d5a4;
}
.oc-popover__header-left iconpark-icon[name="oc-icon-primary"] {
  color: #651dff;
}
.oc-popover__header-left iconpark-icon[name="oc-icon-danger"] {
  color: #ff0060;
}
.oc-popover__header-left iconpark-icon[name="oc-icon-warning"] {
  color: #ff7c00;
}
.oc-popover-body {
  max-width: var(--popover-max-width);
  max-height: var(--popover-max-height);
}
.oc-popover-text .warn:not(.warn-all) {
  position: relative;
  padding-top: 8px;
  margin-top: 8px;
}
.oc-popover-text .warn:not(.warn-all)::before {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 1px;
  background: #dfe0e2;
}
.oc-popover-text .warn iconpark-icon[name="oc-icon-warning"] {
  color: #ff7c00;
}
.oc-popover-text .warn iconpark-icon[name="oc-icon-info"] {
  color: #651dff;
}
.oc-popover-text .warn iconpark-icon[name="oc-icon-success"] {
  color: #00d5a4;
}
.oc-popover-text .warn iconpark-icon[name="oc-icon-danger"] {
  color: #ff0060;
}
.oc-popover-text__msg + .oc-popover-text__msg {
  margin-top: 4px;
}
.oc-popover-operate .oc-popover-body {
  width: 320px;
}
.oc-popover-operate__footer {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
}
.oc-popover-operate__footer .tip {
  display: flex;
  align-items: center;
}
.oc-popover-operate__footer .tip__text {
  height: 20px;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #323335;
  margin-left: 8px;
}
.oc-popover-operate__footer .btn__common {
  min-width: 56px;
  height: 24px;
  line-height: 24px;
  box-sizing: border-box;
  padding: 0;
}
.oc-popover-operate__footer .btn__cancel {
  margin-right: 12px;
}
.oc-popover-inline {
  display: inline-block;
}
.oc-popover-inline .oc-popover-icon-wrapper {
  line-height: unset;
  font-size: unset;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-checkbox--blue {
  /* 以下逻辑，是复制 okee 内部代码删减后得到，请尽量保持与 okee 同步
  okee 中有特别支持的 light 主题样式，此处 default 下不支持 light 模式 */
}
.oc-checkbox--blue .ovui-checkbox {
  /* 禁用 + 选中/indeterminate */
}
.oc-checkbox--blue .ovui-checkbox:not(.ovui-checkbox--disabled) {
  /* 未禁用 + 未选中 */
  /* 未禁用 + 选中/indeterminate */
}
.oc-checkbox--blue .ovui-checkbox:not(.ovui-checkbox--disabled) .ovui-checkbox__inner:hover {
  border-color: #651dff;
}
.oc-checkbox--blue .ovui-checkbox:not(.ovui-checkbox--disabled).ovui-checkbox--indeterminate .ovui-checkbox__inner,
.oc-checkbox--blue .ovui-checkbox:not(.ovui-checkbox--disabled).ovui-checkbox--checked .ovui-checkbox__inner,
.oc-checkbox--blue .ovui-checkbox:not(.ovui-checkbox--disabled).ovui-checkbox--indeterminate .ovui-checkbox__inner:hover,
.oc-checkbox--blue .ovui-checkbox:not(.ovui-checkbox--disabled).ovui-checkbox--checked .ovui-checkbox__inner:hover {
  border-color: #651dff;
  background-color: #651dff;
}
.oc-checkbox--blue .ovui-checkbox.ovui-checkbox--disabled.ovui-checkbox--indeterminate .ovui-checkbox__inner,
.oc-checkbox--blue .ovui-checkbox.ovui-checkbox--disabled.ovui-checkbox--checked .ovui-checkbox__inner {
  border-color: rgba(101, 29, 255, 0.34);
  background-color: rgba(101, 29, 255, 0.34);
}
.oc-checkbox__popover-wrap {
  display: inline-flex;
  margin-left: 4px;
}
.oc-checkbox__popover-wrap > .oc-popover {
  display: inline-flex;
}
.oc-checkbox {
  display: inline-flex;
}
.oc-checkbox .ovui-checkbox > .ovui-checkbox__label {
  display: flex;
  align-items: center;
}
.oc-checkbox--no-label .ovui-checkbox > .ovui-checkbox__label {
  margin: 0;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-msg {
  display: flex;
}
.oc-msg-size-xs {
  font-size: 12px;
  line-height: 20px;
}
.oc-msg-size-sm {
  font-size: 14px;
  line-height: 22px;
}
.oc-msg-size-md {
  font-size: 16px;
  line-height: 24px;
}
.oc-msg-size-lg {
  font-size: 18px;
  line-height: 26px;
}
.oc-msg-size-xl {
  font-size: 20px;
  line-height: 28px;
}
.oc-msg-icon {
  height: 14px;
  margin: 2px 4px 0 0;
  font-size: 0;
}
.oc-msg-icon svg {
  display: block;
}
.oc-msg-icon-success {
  color: #00d5a4;
}
.oc-msg-icon-primary {
  color: #651dff;
}
.oc-msg-icon-danger {
  color: #ff0060;
}
.oc-msg-icon-warning {
  color: #ff7c00;
}
.oc-msg-list {
  line-height: 0;
}
.oc-msg-list .oc-typography {
  display: inline;
}
.oc-typography + .oc-msg-list__item-image,
.oc-typography + .oc-msg-list__item-video {
  margin-top: 8px;
}
.oc-msg-list__item-a + .oc-typography {
  margin-left: 4px;
}
.oc-msg-list__item-a + .oc-msg-list__url-icon {
  margin-left: 2px;
}
.oc-msg-list__item-image {
  width: 100%;
}
.oc-msg-list__url-icon {
  vertical-align: middle;
  color: #651dff;
}
.oc-msg-list__url-icon:hover {
  cursor: pointer;
}
.oc-msg-list__url-icon + .oc-typography {
  margin-left: 4px;
}
.oc-typography + .oc-msg-list__item-a {
  margin-left: 4px;
}
.oc-msg-list__item-a + .oc-msg-list__item-a {
  margin-left: 4px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
@keyframes oc-typography-glow {
  0% {
    /* 初始位置在左侧外侧 */
    background-position: 150% 0%;
  }
  100% {
    /* 移动到右侧外侧 */
    background-position: -50% 0%;
  }
}
@keyframes sweep-left-to-right {
  0% {
    /* 初始：背景左边缘对齐元素右端 */
    background-position: 100% 50%;
  }
  100% {
    /* 结束：背景左边缘对齐元素左端 */
    background-position: -100% 50%;
  }
}
.oc-typography {
  font-family: 'pingfang sc', -apple-system, blinkmacsystemfont, 'segoe ui', 'hiragino sans gb', 'microsoft yahei', 'helvetica neue', sans-serif, 'apple color emoji', 'segoe ui emoji';
  font-style: normal;
  font-weight: 400;
  word-break: break-all;
  white-space: normal;
  display: -webkit-box;
  text-rendering: auto;
}
.oc-typography ol,
.oc-typography ul {
  padding: 0;
  margin: 0;
}
.oc-typography ul li,
.oc-typography ol li {
  margin-left: 14px;
}
.oc-typography ul {
  list-style: initial;
}
.oc-typography li + li {
  margin-top: 4px;
}
.oc-typography .oc-typography-value-em {
  color: #651dff;
  font-style: normal;
}
.oc-typography-size-xs {
  font-size: 12px;
  line-height: 20px;
}
.oc-typography-size-sm {
  font-size: 14px;
  line-height: 22px;
}
.oc-typography-size-md {
  font-size: 16px;
  line-height: 24px;
}
.oc-typography-size-lg {
  font-size: 18px;
  line-height: 26px;
}
.oc-typography-size-xl {
  font-size: 20px;
  line-height: 28px;
}
.oc-typography-color-inherit {
  color: inherit;
}
.oc-typography-color-default {
  color: #ffffff;
}
.oc-typography-color-auxiliary {
  color: rgba(255, 255, 255, 0.75);
}
.oc-typography-color-secondary {
  color: rgba(255, 255, 255, 0.5);
}
.oc-typography-color-primary {
  color: #651dff;
}
.oc-typography-color-ai-light {
  background-clip: text;
  -webkit-background-clip: text;
  position: relative;
  overflow: hidden;
  background-image: linear-gradient(115deg, #47D7FA 0.02%, #3B7EF4 28.15%, #B84EF1 59.13%, #F355C1 78.95%, #F9835F 95.91%);
}
.oc-typography-color-ai-light .oc-typography-value-int {
  color: transparent;
}
.oc-typography-color-ai {
  background-clip: text;
  -webkit-background-clip: text;
  overflow: hidden;
  background-image: linear-gradient(90deg, #47D7FA 0%, #3B7EF4 33.18%, #FFF 50%, #B84EF1 67%, #3B7EF4 87.5%, #47D7FA 100%);
  /* 关键动画实现：背景横向位移 */
  background-size: 200% 100%;
  /* 将背景宽度扩为 2 倍 */
  animation: sweep-left-to-right 2s linear infinite;
}
.oc-typography-color-ai .oc-typography-value-int {
  color: transparent;
}
.oc-typography-color-danger {
  color: #ff0060;
}
.oc-typography-color-success {
  color: #00d5a4;
}
.oc-typography-color-warning {
  color: #ff7c00;
}
.oc-typography-disabled {
  color: rgba(255, 255, 255, 0.25);
}
.oc-typography-color-primary.oc-typography.oc-typography-disabled {
  color: rgba(101, 29, 255, 0.34);
}
.oc-typography-bold {
  font-weight: bold;
}
.oc-typography-italic {
  font-style: italic;
}
.oc-typography-dashed span {
  font-weight: bold;
  white-space: break-spaces;
  word-break: break-word;
  text-rendering: optimizeLegibility;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  border-image-slice: 1;
  border-image-source: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 3px, transparent 0, transparent 5px);
  border-width: 0 0 1px;
  border-bottom-style: solid;
  border-bottom: 1px solid;
  border-image-outset: 0px;
}
.oc-typography-dashed span:hover {
  border-image-source: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5) 1px, transparent 0, transparent 1px);
}
.oc-typography-underline {
  text-decoration-line: underline;
  text-decoration-style: solid;
}
.oc-typography-line-through {
  text-decoration-line: line-through;
  text-decoration-style: solid;
}
.oc-typography-type-number,
.oc-typography-type-number * {
  font-family: "OC-OPPOSans", 'pingfang sc', -apple-system, blinkmacsystemfont, 'segoe ui', 'hiragino sans gb', 'microsoft yahei', 'helvetica neue', sans-serif, 'apple color emoji', 'segoe ui emoji';
}
.oc-typography-type-market,
.oc-typography-type-market * {
  font-family: "MF YuanHei", 'pingfang sc', -apple-system, blinkmacsystemfont, 'segoe ui', 'hiragino sans gb', 'microsoft yahei', 'helvetica neue', sans-serif, 'apple color emoji', 'segoe ui emoji';
}
.oc-typography-type-number.oc-typography.oc-typography-bold,
.oc-typography-type-number.oc-typography.oc-typography-bold * {
  font-family: "OC-OPPOSans-Bold", 'pingfang sc', -apple-system, blinkmacsystemfont, 'segoe ui', 'hiragino sans gb', 'microsoft yahei', 'helvetica neue', sans-serif, 'apple color emoji', 'segoe ui emoji';
}
.oc-typography-type-text {
  display: inline-block;
}
.oc-typography-type-span {
  display: inline;
}
.oc-typography-cursor,
.oc-typography-overflow,
.oc-typography-dashed {
  cursor: pointer;
}
.oc-typography-color-primary.oc-typography.oc-typography-cursor:not(.oc-typography-disabled):hover,
.oc-typography-color-default.oc-typography.oc-typography-cursor:not(.oc-typography-disabled):hover,
.oc-typography-color-secondary.oc-typography.oc-typography-cursor:not(.oc-typography-disabled):hover,
.oc-typography-color-auxiliary.oc-typography.oc-typography-cursor:not(.oc-typography-disabled):hover {
  color: #7433ff;
}
.oc-typography-operation-expand {
  margin: 0 0 0 4px;
  cursor: pointer;
  color: #651dff;
}
.oc-typography-operation-icon {
  margin-left: 4px;
  margin-top: -2px;
  vertical-align: middle;
}
.oc-typography-list-span {
  word-break: break-all;
  white-space: normal;
}
.oc-typography-list-span-nowrap {
  white-space: nowrap;
}
.oc-typography-list-icon {
  margin-left: 4px;
  margin-top: -2px;
  vertical-align: middle;
}
.oc-typography-list-style {
  width: 8px;
  height: 8px;
  flex: 1;
  display: inline-block;
  margin-right: 4px;
  background-color: #fff;
  position: relative;
  box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  border: 1px solid #ffffff;
}
.oc-typography-list-style.oc-typography-list-style-circle {
  border-radius: 100%;
}
.oc-typography-list-style.oc-typography-list-style-color-primary {
  background: #651dff;
}
.oc-typography-list-style.oc-typography-list-style-color-danger {
  background: #ff0060;
}
.oc-typography-list-style.oc-typography-list-style-color-success {
  background: #00d5a4;
}
.oc-typography-list-style.oc-typography-list-style-color-warning {
  background: #ff7c00;
}
.oc-typography-list-style.oc-typography-list-style-color-auxiliary {
  background: rgba(255, 255, 255, 0.75);
}
.oc-typography-list-style.oc-typography-list-style-color-secondary {
  background: rgba(255, 255, 255, 0.5);
}
.oc-typography-span-nowrap {
  white-space: nowrap;
}
.oc-typography .oc-popover {
  display: inline-flex;
}
.oc-operation-expand {
  margin: 0 0 0 4px;
  cursor: pointer;
  color: #651dff;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.oc-operation-icon {
  display: inline-flex;
  align-items: center;
}
.oc-typography-list-style {
  width: 8px;
  height: 8px;
  flex: 1;
  display: inline-block;
  margin-right: 4px;
  background-color: #fff;
  position: relative;
  box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  border: 1px solid #ffffff;
}
.oc-typography-list-style.oc-typography-list-style-circle {
  border-radius: 100%;
}
.oc-typography-list-style.oc-typography-list-style-color-primary {
  background: #651dff;
}
.oc-typography-list-style.oc-typography-list-style-color-danger {
  background: #ff0060;
}
.oc-typography-list-style.oc-typography-list-style-color-success {
  background: #00d5a4;
}
.oc-typography-list-style.oc-typography-list-style-color-warning {
  background: #ff7c00;
}
.oc-typography-list-style.oc-typography-list-style-color-auxiliary {
  background: rgba(255, 255, 255, 0.75);
}
.oc-typography-list-style.oc-typography-list-style-color-secondary {
  background: rgba(255, 255, 255, 0.5);
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-iconpark-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.oc-iconpark-icon-wrap .oc-iconpark-icon-svg {
  width: 1em;
  height: 1em;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-help-feedback {
  width: 100%;
  font-size: 12px;
  font-weight: normal;
  margin-top: 6px;
}
.oc-help-feedback .result {
  color: #969aa0;
}
.oc-help-feedback .header-item {
  color: #64666b;
  display: flex;
  cursor: pointer;
}
.oc-help-feedback .header-item.active,
.oc-help-feedback .header-item:hover {
  color: #651dff;
}
.oc-help-feedback .header-item .msg-text {
  margin-left: 4px;
}
.oc-help-feedback--light .header-item {
  color: rgba(0, 0, 0, 0);
  opacity: 0.6;
}
.oc-help-feedback--light .header-item.active,
.oc-help-feedback--light .header-item:hover {
  opacity: 1;
  color: rgba(0, 0, 0, 0);
}
.oc-help-feedback--light .result {
  color: rgba(0, 0, 0, 0);
}
.oc-help-feedback-popper .content {
  margin-top: 4px;
}
.oc-help-feedback-popper .content.ovui-textarea__wrapper--md,
.oc-help-feedback-popper .content .ovui-textarea__wrapper--md .ovui-textarea {
  font-size: 12px;
}
.oc-help-feedback-popper .footer {
  text-align: right;
  margin-top: 4px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.oc-title-prefix {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.oc-title-text + div {
  margin-left: 4px;
}
.oc-title-text .oc-title-required {
  vertical-align: 3px;
  margin-left: 4px;
}
.oc-title-text .oc-title-popover,
.oc-title-text .oc-title-new {
  height: 16px;
  margin-left: 4px;
  vertical-align: sub;
}
.oc-title-text .oc-title-required,
.oc-title-text .oc-title-popover,
.oc-title-text .oc-title-new,
.oc-title-text .oc-title-slot {
  display: inline-block;
}
.oc-title-popover {
  display: flex;
  align-items: center;
}
.oc-title-popover + div {
  margin-left: 4px;
}
.oc-title-slot {
  display: flex;
}
.oc-title-slot + div {
  margin-left: 4px;
}
.oc-title-new {
  display: flex;
  align-items: center;
}
.oc-title-new + div {
  margin-left: 4px;
}
.oc-title-required {
  width: 4px;
  height: 4px;
  background: #ff0060;
  border-radius: 2px;
}
.oc-title-suffix {
  margin-left: 4px;
}
.oc-title.oc-title__align .oc-title-suffix {
  flex: 1;
  display: inline-flex;
}
.oc-title.oc-title__align-center .oc-title-suffix {
  justify-content: center;
}
.oc-title.oc-title__align-end .oc-title-suffix {
  justify-content: flex-end;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-row-input {
  width: 100%;
}
.oc-row-input .oc-input-group-wrap {
  display: flex;
  align-items: center;
}
.oc-row-input .oc-input-group-wrap .oc-input-group .ovui-custom-input {
  cursor: text;
}
.oc-row-input .oc-input-group-wrap .oc-input-group .ovui-textarea__suffix {
  height: 22px;
}
.oc-row-input .oc-input-group-wrap .oc-input-group .suffix-count {
  color: rgba(255, 255, 255, 0.5);
}
.oc-row-input .oc-input-group-wrap .oc-input-group .ovui-textarea__wrapper .ovui-textarea__count {
  font-size: 14px;
  line-height: 20px;
  bottom: 6px;
}
.oc-row-input .prepend-string,
.oc-row-input .append-string,
.oc-row-input .prefix-icon,
.oc-row-input .suffix-icon,
.oc-row-input .suffix-string {
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.oc-row-input .prepend-icon,
.oc-row-input .append-icon {
  color: #ffffff;
  cursor: pointer;
}
.oc-row-input .oc-input-group-prepend {
  position: relative;
}
.oc-row-input .oc-input-group-prepend * {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.oc-row-input .oc-input-group-append {
  position: relative;
}
.oc-row-input .oc-input-group-append * {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.oc-row-input .oc-input-group-append-divider::before {
  content: "";
  width: 1px;
  height: 16px;
  position: absolute;
  display: block;
  background-color: #dfe0e2;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 1;
}
.oc-row-input .oc-input-group-prepend-divider::after {
  content: "";
  width: 1px;
  height: 16px;
  position: absolute;
  display: block;
  background-color: #dfe0e2;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-row .oc-row-msg.oc-msg-secondary {
  margin-top: 8px;
}
.oc-row .oc-row-msg.oc-msg-warning,
.oc-row .oc-row-msg.oc-msg-success,
.oc-row .oc-row-msg.oc-msg-danger {
  margin-top: 4px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.ovui-popover--tooltip.oc-input-group-unit {
  padding: 2px 6px;
  left: var(--input-number-unit-offset) !important;
  border-radius: 8px;
}
.ovui-popover--tooltip.oc-input-group-unit .ovui-popover__arrow {
  display: none;
}
.ovui-popover--tooltip.oc-input-group-unit::after {
  content: "";
  position: absolute;
  left: calc(50% - 4px);
  top: calc(100%);
  width: 0;
  height: 0;
  border-width: 4px 4px 0;
  border-style: solid;
  box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.08);
  border-color: #4c4066 transparent transparent;
}
.oc-row-input-number {
  --input-number-unit-offset: 0px;
}
.oc-row-input-number .append-string,
.oc-row-input-number .append-icon,
.oc-row-input-number .prepend-string,
.oc-row-input-number .prepend-icon {
  color: rgba(255, 255, 255, 0.5);
}
.oc-row-input-number .oc-input-group-wrap {
  display: flex;
  align-items: center;
}
.oc-row-input-number .oc-input-group-wrap .oc-input-group {
  width: auto;
}
.oc-row-input-number .oc-input-group-wrap .oc-input-group .ovui-custom-input {
  cursor: text;
  flex: 1;
}
.oc-row-input-number .oc-input-group-prepend {
  position: relative;
}
.oc-row-input-number .oc-input-group-prepend * {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.oc-row-input-number .oc-input-group-append {
  position: relative;
}
.oc-row-input-number .oc-input-group-append * {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.oc-row-input-number .oc-input-group-append-divider::before {
  content: "";
  width: 1px;
  height: 16px;
  position: absolute;
  display: block;
  background-color: #dfe0e2;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 1;
}
.oc-row-input-number .oc-input-group-prepend-divider::after {
  content: "";
  width: 1px;
  height: 16px;
  position: absolute;
  display: block;
  background-color: #dfe0e2;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-affix {
  display: flex;
}
.oc-affix .oc-typography-dashed span {
  font-weight: unset;
  -webkit-font-smoothing: unset;
}
.oc-affix.oc-affix-disabled .oc-typography-dashed span {
  border-image-source: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25) 3px, transparent 0, transparent 5px);
}
.oc-affix .oc-affix-typography {
  font-size: unset;
  line-height: unset;
  color: unset;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-space {
  display: inline-flex;
}
.oc-space-vertical {
  flex-direction: column;
  display: flex;
}
.oc-space-align-stretch {
  align-items: stretch;
}
.oc-space-align-baseline {
  align-items: baseline;
}
.oc-space-align-start {
  align-items: flex-start;
}
.oc-space-align-end {
  align-items: flex-end;
}
.oc-space-align-center {
  align-items: center;
}
.oc-space-wrap {
  flex-wrap: wrap;
}
.oc-space-rtl {
  direction: rtl;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-checkbox-group__hint-wrap {
  display: inline-flex;
  margin-left: 4px;
}
.oc-checkbox-group__hint-wrap > .oc-popover {
  display: inline-flex;
  align-items: center;
}
.oc-checkbox-group__item-tag {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9;
}
.oc-checkbox-group-plain .ovui-checkbox-group {
  flex-wrap: wrap;
  gap: 8px 0;
}
.oc-checkbox-group-plain .oc-checkbox-group-all,
.oc-checkbox-group-plain .oc-checkbox {
  margin-right: 16px;
}
.oc-checkbox-group-plain :last-child {
  margin-right: unset;
}
.oc-checkbox-group {
  display: inline-flex;
  align-items: center;
}
.oc-checkbox-group-all {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.oc-checkbox-group-all-button {
  margin-top: 0;
  min-width: 88px;
  background-color: #261d38;
  border-radius: 8px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  font-size: 14px;
  line-height: 22px;
  padding: 5px 16px;
  position: relative;
  margin-right: -1px;
  z-index: 2;
}
.oc-checkbox-group-all-button:hover {
  background-color: #302842;
}
.oc-checkbox-group-all-button:hover .ovui-checkbox .ovui-checkbox__label {
  color: #651dff;
}
.oc-checkbox-group-all-button:before {
  content: " ";
  pointer-events: none;
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 16px;
  margin-top: -8px;
  background-color: #dfe0e2;
}
.oc-checkbox-group-all-button.oc-checkbox-group-all-button-checked {
  background-color: #302842;
}
.oc-checkbox-group-all-button.oc-checkbox-group-all-button-checked .ovui-checkbox .ovui-checkbox__label {
  color: #651dff;
}
.oc-checkbox-group-all-button.oc-checkbox-group-all-button-checked:after {
  z-index: 3;
  border-radius: 4px 0 0 4px;
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border: 1px solid #651dff;
}
.oc-checkbox-group-all-button .ovui-checkbox.ovui-checkbox--checked .ovui-checkbox__inner,
.oc-checkbox-group-all-button .ovui-checkbox.ovui-checkbox--checked .ovui-checkbox__inner:hover,
.oc-checkbox-group-all-button .ovui-checkbox.ovui-checkbox--indeterminate .ovui-checkbox__inner,
.oc-checkbox-group-all-button .ovui-checkbox.ovui-checkbox--indeterminate .ovui-checkbox__inner:hover {
  border-color: #651dff;
  background-color: #651dff;
  color: #302842;
}
.oc-checkbox-group .ovui-checkbox-item-group {
  flex-wrap: wrap;
  gap: 8px 0;
}
.oc-checkbox-group .ovui-checkbox-item-group .ovui-checkbox-item {
  margin-top: 0;
}
.oc-checkbox-group .ovui-checkbox-item {
  min-width: 88px;
  justify-content: center;
  margin-top: 8px;
}
.oc-checkbox-group .ovui-checkbox-item .ovui-checkbox.ovui-checkbox--disabled:not(.ovui-checkbox--checked):not(.ovui-checkbox--indeterminate) .ovui-checkbox__inner {
  border-color: rgba(255, 255, 255, 0.25);
  background-color: rgba(255, 255, 255, 0.08);
}
.oc-checkbox-group .ovui-checkbox-item:last-child .oc-checkbox-group__item-tag {
  border-top-right-radius: 4px;
  overflow: hidden;
}
.oc-checkbox-group .ovui-checkbox-item .ovui-checkbox--light.ovui-checkbox--checked .ovui-checkbox__inner,
.oc-checkbox-group .ovui-checkbox-item .ovui-checkbox--light.ovui-checkbox--indeterminate .ovui-checkbox__inner {
  border-color: #651dff;
  background-color: #651dff;
  color: #302842;
}
.oc-checkbox-group .ovui-checkbox-item .ovui-checkbox--light.ovui-checkbox--disabled.ovui-checkbox--checked .ovui-checkbox__inner,
.oc-checkbox-group .ovui-checkbox-item .ovui-checkbox--light.ovui-checkbox--disabled.ovui-checkbox--indeterminate .ovui-checkbox__inner {
  border-color: rgba(101, 29, 255, 0.34);
  background-color: rgba(101, 29, 255, 0.34);
}
.oc-checkbox-group .a-checkbox-item-single .ovui-checkbox {
  display: none;
}
.oc-checkbox-group .a-checkbox-item-all {
  border-radius: 0 !important;
}
.oc-checkbox-group .a-checkbox-item-all:after {
  border-radius: 0 !important;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-banner {
  padding: 16px;
  min-height: 82px;
  border-radius: 24px;
  background-color: #381088;
  display: flex;
  position: relative;
}
.oc-banner .oc-banner-left-wrapper {
  display: flex;
  flex: 1;
}
.oc-banner .oc-banner-left-wrapper .oc-banner-image-wrapper {
  width: 58px;
}
.oc-banner .oc-banner-left-wrapper .oc-banner-image-wrapper img {
  width: 100%;
}
.oc-banner .oc-banner-right {
  margin-left: 8px;
  padding-top: 2px;
}
.oc-banner .oc-banner-right-large {
  padding-top: 4px;
}
.oc-banner-slot-text {
  display: inline-block;
}
.oc-banner-slot-text-inner-style {
  font-family: 'pingfang sc', -apple-system, blinkmacsystemfont, 'segoe ui', 'hiragino sans gb', 'microsoft yahei', 'helvetica neue', sans-serif, 'apple color emoji', 'segoe ui emoji';
  font-style: normal;
  font-weight: 400;
  word-break: break-all;
  white-space: normal;
  display: -webkit-box;
  text-rendering: auto;
  font-size: 12px;
  line-height: 20px;
  color: #ffffff;
}
.oc-banner-slot-text-inner-style p {
  margin: 0;
}
.oc-banner-slot-text-inner-style a {
  color: #651dff;
  text-decoration: none;
}
.oc-banner-slot-text-inner-style a:hover {
  color: #7433ff;
}
.oc-banner-tip {
  min-height: 36px;
  border-radius: 24px;
  padding: 8px 16px;
  display: flex;
}
.oc-banner-tip-title {
  padding: 16px;
}
.oc-banner-tip-title-xs {
  padding: 8px 16px;
}
.oc-banner-tip .oc-banner-tip-left {
  flex: 1;
  display: flex;
  align-items: flex-start;
}
.oc-banner-tip .oc-banner-tip-left .oc-banner-tip-left-content-title {
  display: flex;
  align-items: center;
  gap: 6px;
}
.oc-banner-tip .oc-banner-tip-left-content {
  display: flex;
  flex-direction: column;
}
.oc-banner-tip .oc-banner-tip-left-content .oc-banner-tip-left-content-title {
  margin-bottom: 4px;
}
.oc-banner-tip .oc-banner-tip-left-content-single {
  display: flex;
  align-items: center;
}
.oc-banner-tip .oc-banner-tip-left-content-single .oc-banner-tip-left-content-title {
  margin-right: 8px;
  flex-shrink: 0;
}
.oc-banner-tip .oc-banner-tip-right {
  display: flex;
  gap: 5px;
  padding-top: 2px;
  margin-left: 8px;
}
.oc-banner-tip .oc-banner-tip-right-large {
  padding-top: 4px;
}
.oc-banner-tip .oc-banner-tip-right .oc-banner-switch {
  margin-left: 15px;
}
.oc-banner-tip .oc-banner-tip-right-center {
  align-items: center;
  padding-top: 0px;
}
.oc-banner-tip .oc-msg-icon {
  margin-top: 3px;
}
.oc-banner-tip-success {
  background-color: rgba(0, 213, 164, 0.08);
}
.oc-banner-tip-error {
  background-color: rgba(255, 0, 96, 0.06);
}
.oc-banner-tip-info {
  background-color: #381088;
}
.oc-banner-tip-warning {
  background-color: rgba(255, 124, 0, 0.08);
}
.oc-banner-tip-success-border {
  border: 1px solid #391e6f;
}
.oc-banner-tip-error-border {
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.oc-banner-tip-info-border {
  border: 1px solid #d220ff;
}
.oc-banner-tip-warning-border {
  border: 1px solid rgba(235, 150, 23, 0.2);
}
.oc-banner-tip-text {
  background-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
.oc-banner-close {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.oc-banner-close:hover {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
}
.oc-banner-data-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  margin-left: 16px;
}
.oc-banner-data-content .oc-banner-data-content-title {
  line-height: 24px;
  margin-bottom: 4px;
  color: #ffffff;
  font-size: 16px;
  font-weight: bolder;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-pagination-wrapper .oc-pagination .oc-table-pagination-item {
  margin-left: 8px;
}
.oc-pagination-wrapper .oc-pagination .oc-table-pagination-item ovui-page-select {
  margin: 0;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-page-switch-wrapper {
  display: flex;
  align-items: center;
}
.oc-page-switch-wrapper .oc-page-switch-icon {
  color: #ffffff;
}
.oc-page-switch-wrapper .oc-page-switch-icon:hover {
  cursor: pointer;
}
.oc-page-switch-wrapper .oc-page-switch-icon-disabled {
  color: rgba(255, 255, 255, 0.25);
}
.oc-page-switch-wrapper .oc-page-switch-text {
  color: #ffffff;
  font-size: 12px;
  margin: 0 16px;
}
.oc-page-switch-wrapper .oc-page-switch-text .text-slash {
  margin: 0 8px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-batch-add-input {
  width: 100%;
  min-width: 570px;
}
.oc-batch-add-input-list {
  overflow-y: auto;
  width: 100%;
  padding: 4px;
  margin: -4px;
}
.oc-batch-add-input-list-item {
  margin-top: 8px;
  opacity: 1;
}
.oc-batch-add-input-list-item-input {
  display: flex;
  align-items: center;
  position: relative;
}
.oc-batch-add-input-list-item-input-delete {
  position: absolute;
  right: -23px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
}
.oc-batch-add-input-list-item-input-delete:hover {
  color: #651dff;
}
.oc-batch-add-input-list-item-input-delete-disabled {
  position: absolute;
  right: -23px;
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.12);
  display: flex;
}
.oc-batch-add-input-list-item-fade-enter-active,
.oc-batch-add-input-list-item-fade-leave-active {
  transition: all 0.1s ease-in-out;
}
.oc-batch-add-input-list-item-fade-enter-from,
.oc-batch-add-input-list-item-fade-leave-to {
  opacity: 0;
  max-height: 0;
}
.oc-batch-add-input-list-item-fade-enter-to,
.oc-batch-add-input-list-item-fade-leave-from {
  max-height: 32px;
  opacity: 1;
}
.oc-batch-add-input-list .ovui-button--default-stroke {
  position: relative;
  z-index: 4;
}
.oc-batch-add-input-list .ovui-button--default-stroke:focus {
  color: rgba(255, 255, 255, 0.75);
  background-color: #302842;
  border-color: #ffffff;
}
.oc-batch-add-input-add {
  color: rgba(255, 255, 255, 0.75);
  margin-top: 8px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-breadcrumb-separator-icon {
  display: flex;
  align-items: center;
  height: 100%;
  color: rgba(255, 255, 255, 0.5);
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-breadcrumb-select .ovui-breadcrumb,
.oc-breadcrumb-select .ovui-breadcrumb .ovui-breadcrumb-item .ovui-breadcrumb-item__content {
  display: flex;
  align-items: center;
}
.oc-breadcrumb-select .ovui-breadcrumb .ovui-breadcrumb-item__separator,
.oc-breadcrumb-select .ovui-breadcrumb .ovui-breadcrumb-item .ovui-breadcrumb-item__content .ovui-breadcrumb-item__separator {
  display: none;
}
.ovui-select__popper .ovui-select__options .ovui-option.ovui-option--selected .oc-item-group-content-title .oc-typography-color-default,
.ovui-select__popper .ovui-select__options .ovui-option.ovui-option--selected .oc-item-group-content-title .oc-typography-color-secondary {
  color: #651dff;
}
.oc-breadcrumb-separator {
  padding: 0 6px;
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.5);
}
.oc-breadcrumb-select-group {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.oc-breadcrumb-select-group-media {
  margin-right: 6px;
}
.oc-breadcrumb-select .ovui-select__options {
  max-height: inherit;
}
.oc-breadcrumb-select .ovui-custom-input__content {
  align-items: center;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-dropdown-button-container {
  display: inline-block;
}
.oc-dropdown-button-container .oc-dropdown-button-icon-up {
  transform: rotate(180deg);
}
.oc-dropdown-button-text {
  margin-right: 4px;
}
.oc-dropdown-button-dark .ovui-button {
  color: #ffffff;
}
.oc-dropdown-button-bold .ovui-button {
  font-weight: bold;
}
.oc-dropdown-item-active {
  color: #651dff;
}
.oc-dropdown-item-title {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  line-height: 20px;
  padding: 6px 12px;
}
.oc-dropdown-content-footer {
  margin: 0 12px;
  border-top: 1px solid #dfe0e2;
}
.oc-dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.oc-dropdown-item .oc-dropdown-item-text {
  display: flex;
  align-items: center;
}
.oc-dropdown-item .oc-dropdown-item-operation {
  display: flex;
}
.oc-dropdown-item .oc-dropdown-item-operation .oc-dropdown-item-operation-icon {
  font-size: 14px;
  margin-left: 4px;
  color: rgba(255, 255, 255, 0.5);
}
.oc-dropdown-item .oc-dropdown-item-operation .oc-dropdown-item-operation-icon:hover {
  color: #651dff;
}
.oc-dropdown-item .oc-dropdown-item-operation .oc-dropdown-item-operation-icon-disabled {
  font-size: 14px;
  margin-left: 4px;
  color: rgba(255, 255, 255, 0.5);
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-media-img-popover {
  position: relative;
  padding: 0px !important;
  border-radius: 24px;
  line-height: 0;
}
.oc-media-img-popover .oc-media-preview {
  border-radius: 24px;
  overflow: hidden;
}
.oc-media-img-popover::before {
  content: "";
  display: block;
  box-sizing: content-box;
  height: 100%;
  position: absolute;
  width: 100%;
  padding-right: 10px;
  padding-left: 10px;
  right: -10px;
  z-index: -1;
}
.oc-media-preview-graphic .oc-audio-player {
  position: absolute;
  right: 12px;
  bottom: 22px;
}
.oc-media-preview-graphic .oc-carousel-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #161823;
}
.oc-media-preview-graphic .oc-media-graphic-item-thumb {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.oc-media-image-mode {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 2;
}
.oc-media-wrapper-disabled {
  opacity: 0.5;
}
.oc-media-wrapper .oc-media-thumb-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #261d38;
  border-radius: 24px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.oc-media-wrapper .oc-media-thumb-container .oc-media-thumb-tip {
  position: absolute;
  bottom: 4px;
  left: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  line-height: 18px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0);
  white-space: nowrap;
  text-align: center;
  padding: 0 4px;
}
.oc-media-wrapper .oc-media-thumb-video-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0);
}
.oc-media-wrapper .oc-media-thumb-icon {
  width: 16px;
  height: 16px;
  z-index: 1;
  border-radius: 0px 24px 0px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  right: 0;
}
.oc-media-wrapper .oc-media-thumb-tag {
  position: absolute;
  top: 0;
  left: 0;
}
.oc-media-wrapper .oc-media-thumb-mark {
  position: absolute;
  top: 0;
  right: 0;
}
.oc-media-wrapper .oc-media-thumb-bottom-tag {
  position: absolute;
  right: 0;
  bottom: 0;
}
.oc-media-preview-tag {
  position: absolute;
  line-height: 22px;
  top: 0;
  left: 0;
}
.oc-media-preview-bottom-tag {
  position: absolute;
  line-height: 22px;
  right: 0;
  bottom: 0;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-tag {
  font-size: 0;
  line-height: 0;
}
.oc-tag.oc-tag-type-flex {
  display: inline-flex;
  align-items: center;
}
.oc-tag .ovui-tag {
  cursor: default;
}
.oc-tag .ovui-tag--white {
  background-color: #302842;
  color: #ffffff;
}
.oc-tag .ovui-tag--white.ovui-tag--disabled,
.oc-tag .ovui-tag--white.ovui-tag--disabled:hover {
  color: rgba(255, 255, 255, 0.25);
}
.oc-tag .ovui-tag--white-light {
  background-color: #302842;
  color: #ffffff;
  border: 1px solid #ffffff;
}
.oc-tag .ovui-tag--white-light.ovui-tag--disabled,
.oc-tag .ovui-tag--white-light.ovui-tag--disabled:hover {
  color: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.oc-tag .ovui-tag--xs .oc-tag-text {
  zoom: 0.83333333;
  line-height: 12px;
}
.oc-tag .ovui-tag--xs,
.oc-tag .ovui-tag--sm {
  padding: 0 4px;
  border-width: 0;
}
.oc-tag .ovui-tag--xs.ovui-tag--border,
.oc-tag .ovui-tag--sm.ovui-tag--border {
  padding: 0 3px;
  border-width: 1px;
}
.oc-tag-text {
  font-family: "PingFang SC";
  font-style: normal;
}
.oc-tag-text-bold {
  font-weight: bolder;
}
.oc-tag-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.oc-tag-icon {
  margin-right: 2px;
  display: inline-flex;
  align-items: center;
}
.oc-tag-suffixIcon {
  margin-left: 2px;
  display: inline-flex;
  align-items: center;
}
.oc-tag-douyin .ovui-tag {
  color: #fff;
  border: none;
}
.oc-tag-douyin .ovui-tag--danger-light-fill {
  background: linear-gradient(135deg, #FF1764 0%, #ED3495 100%);
}
.oc-tag-douyin .ovui-tag--default-light-fill {
  background: linear-gradient(135deg, #ABADBA 0%, #84879A 100%);
}
.oc-tag-market .ovui-tag {
  font-weight: bolder;
  border-radius: 8px 0px;
}
.oc-tag-operate .ovui-tag {
  border-radius: 32px 32px 32px 0px;
}
.oc-tag-operate-normal .ovui-tag {
  border-radius: 8px;
}
.oc-tag-ai .oc-tag-text {
  font-family: "PingFang SC";
  font-style: normal;
  line-height: 12px;
  color: transparent;
}
.oc-tag-ai .oc-tag-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(115deg, #47D7FA 0.02%, #3B7EF4 28.15%, #B84EF1 59.13%, #F355C1 78.95%, #F9835F 95.91%);
  background-clip: text;
  -webkit-background-clip: text;
  position: relative;
  z-index: 3;
}
.oc-tag-ai .ovui-tag {
  position: relative;
  border: none;
}
.oc-tag-ai .ovui-tag::before {
  content: '';
  position: absolute;
  background: linear-gradient(105deg, rgba(71, 215, 250, 0.2) -20.46%, rgba(59, 126, 244, 0.2) 36.73%, rgba(184, 78, 241, 0.2) 107.72%, rgba(243, 85, 193, 0.2) 192.67%);
  z-index: 1;
  inset: -1px;
  border-radius: 5px;
}
.oc-tag-ai .ovui-tag::after {
  content: '';
  position: absolute;
  background: linear-gradient(122deg, #F0FCFF 10.27%, #EFF5FE 38.69%, #F9F1FE 58.77%, #FEF1FA 75.03%, #FFF5F2 88.94%);
  z-index: 2;
  inset: 0px;
  border-radius: inherit;
}
.oc-tag-ai .ovui-tag--sm {
  height: 18px;
}
.oc-tag-ai .ovui-tag--xs {
  height: 14px;
}
.oc-tag-ai .ovui-tag--md {
  height: 22px;
}
.oc-tag-operate .ovui-tag,
.oc-tag-operate-normal .ovui-tag {
  font-weight: bolder;
  border: none;
}
.oc-tag-operate .ovui-tag--danger-fill,
.oc-tag-operate-normal .ovui-tag--danger-fill {
  background: linear-gradient(102deg, #FA5089 23.92%, #FC96B8 105.66%);
}
.oc-tag-operate .ovui-tag--warning-fill,
.oc-tag-operate-normal .ovui-tag--warning-fill {
  background: linear-gradient(103deg, #FF734D 3.67%, #FAB426 97.07%);
}
.oc-tag-operate .ovui-tag--success-fill,
.oc-tag-operate-normal .ovui-tag--success-fill {
  background: linear-gradient(101deg, #34BA7B 31.95%, #B6D70F 140.28%);
}
.oc-tag-operate .ovui-tag--info-fill,
.oc-tag-operate-normal .ovui-tag--info-fill {
  background: linear-gradient(103deg, #3865E9 6.94%, #38A1FF 100%);
}
.oc-tag-round .ovui-tag--xs {
  border-radius: 8px;
}
.oc-tag-round .ovui-tag--sm {
  border-radius: 20px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-video-player-wrapper {
  width: 100%;
  height: 100%;
  line-height: 1.15;
}
.oc-video-player-wrapper .xgplayer.not-allow-autoplay .xgplayer-controls,
.oc-video-player-wrapper .xgplayer.xgplayer-nostart .xgplayer-controls,
.oc-video-player-wrapper .xgplayer.xgplayer-inactive .controls-autohide,
.oc-video-player-wrapper .xgplayer.oc-video-player-hide-control .controls-autohide {
  pointer-events: none;
  visibility: hidden;
  cursor: default;
  opacity: 0;
}
.oc-video-player-wrapper .xgplayer.not-allow-autoplay .xgplayer-controls-initshow,
.oc-video-player-wrapper .xgplayer.xgplayer-nostart .xgplayer-controls-initshow {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}
.oc-video-player-wrapper .xgplayer .xgplayer-controls {
  display: block;
  position: absolute;
  visibility: visible;
  height: 48px;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  z-index: 10;
  background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.37), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75));
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.oc-video-player-wrapper .xgplayer .xgplayer-controls.show {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.oc-video-player-wrapper .xgplayer .xg-inner-controls {
  position: absolute;
  height: 40px;
  bottom: 0;
  justify-content: space-between;
  display: flex;
}
.oc-video-player-wrapper .xgplayer .xg-left-grid,
.oc-video-player-wrapper .xgplayer .xg-right-grid {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 1;
  height: 100%;
  z-index: 1;
}
.oc-video-player-wrapper .xgplayer .xg-right-grid {
  flex-direction: row-reverse;
}
.oc-video-player-wrapper .xgplayer .xg-right-grid > :first-child {
  margin-right: 0;
}
.oc-video-player-wrapper .xgplayer .xg-right-grid xg-icon {
  margin-left: 0;
}
.oc-video-player-wrapper .xgplayer .xg-left-grid > :first-child {
  margin-left: 0;
}
.oc-video-player-wrapper .xgplayer .xg-left-grid xg-icon {
  margin-right: 0;
}
.oc-video-player-wrapper .xgplayer .xg-center-grid {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  outline: none;
  top: -20px;
  padding: 5px 0;
  text-align: center;
}
.oc-video-player-wrapper .xgplayer .flex-controls .xg-inner-controls {
  justify-content: space-around;
  display: flex;
  bottom: 8px;
}
.oc-video-player-wrapper .xgplayer .flex-controls .xg-center-grid {
  display: flex;
  flex: 1;
  position: relative;
  top: 0;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  left: 0;
  right: 0;
  padding: 0 16px;
}
.oc-video-player-wrapper .xgplayer.xgplayer-mobile .xg-center-grid {
  z-index: 2;
}
.oc-video-player-wrapper .xgplayer.xgplayer-mobile .flex-controls .xg-center-grid {
  padding: 0 8px;
}
.oc-video-player-wrapper .xgplayer .bottom-controls .xg-center-grid {
  top: 20px;
  padding: 0;
}
.oc-video-player-wrapper .xgplayer .bottom-controls .xg-left-grid,
.oc-video-player-wrapper .xgplayer .bottom-controls .xg-right-grid {
  bottom: 10px;
}
.oc-video-player-wrapper .xgplayer .mini-controls {
  background-image: none;
}
.oc-video-player-wrapper .xgplayer .mini-controls .xg-inner-controls {
  bottom: 0;
  left: 0;
  right: 0;
}
.oc-video-player-wrapper .xgplayer .mini-controls .xg-center-grid {
  bottom: -28px;
  top: auto;
  padding: 0;
}
.oc-video-player-wrapper .xgplayer .mini-controls .xg-left-grid,
.oc-video-player-wrapper .xgplayer .mini-controls .xg-right-grid {
  display: none;
}
.oc-video-player-wrapper .xgplayer .controls-follow {
  bottom: 70px;
  transition: bottom 0.3s ease;
}
.oc-video-player-wrapper .xgplayer.flex-controls .controls-follow {
  bottom: 45px;
}
.oc-video-player-wrapper .xgplayer.xgplayer-inactive .controls-follow,
.oc-video-player-wrapper .xgplayer.no-controls .controls-follow,
.oc-video-player-wrapper .xgplayer.mini-controls .controls-follow {
  bottom: 10px;
}
.oc-video-player-wrapper .xgplayer-fullscreen-parent {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
.oc-video-player-wrapper .xgplayer-fullscreen-parent .xgplayer.xgplayer-is-cssfullscreen,
.oc-video-player-wrapper .xgplayer-fullscreen-parent .xgplayer.xgplayer-is-fullscreen {
  z-index: 10;
  position: absolute;
}
.oc-video-player-wrapper .xgplayer-rotate-parent {
  position: fixed;
  top: 0;
  left: 100%;
  bottom: 0;
  right: 0;
  width: 100vh;
  height: 100vw;
  z-index: 9999;
  transform-origin: top left;
  transform: rotate(90deg);
}
.oc-video-player-wrapper .xgplayer-rotate-parent .xgplayer.xgplayer-rotate-fullscreen {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  transform: rotate(0);
}
.oc-video-player-wrapper .xgplayer-rotate-parent .xgplayer-mobile video {
  z-index: -1;
}
.oc-video-player-wrapper .xgplayer {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: PingFang SC, Helvetica Neue, Helvetica, STHeiTi, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
  font-size: 14px;
  font-weight: 400;
  background: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-touch-callout: none;
  -moz-user-select: none;
  user-select: none;
  cursor: pointer;
}
.oc-video-player-wrapper .xgplayer * {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  white-space: normal;
  word-wrap: normal;
  overflow-wrap: normal;
}
.oc-video-player-wrapper .xgplayer ul,
.oc-video-player-wrapper .xgplayer li {
  list-style: none;
}
.oc-video-player-wrapper .xgplayer .xgplayer-none {
  display: none;
}
.oc-video-player-wrapper .xgplayer.xgplayer-is-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 9999;
}
.oc-video-player-wrapper .xgplayer.xgplayer-is-cssfullscreen {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
.oc-video-player-wrapper .xgplayer.xgplayer-rotate-fullscreen {
  position: fixed;
  top: 0;
  left: 100%;
  bottom: 0;
  right: 0;
  width: 100vh;
  height: 100vw;
  transform-origin: top left;
  transform: rotate(90deg);
  z-index: 9999;
}
.oc-video-player-wrapper .xgplayer.xgplayer-rotate-fullscreen.xgplayer-mobile video {
  z-index: -1;
}
.oc-video-player-wrapper .xgplayer xg-video-container.xg-video-container {
  position: absolute;
  top: 0;
  bottom: 48px;
  display: block;
  width: 100%;
}
.oc-video-player-wrapper .xgplayer video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  outline: none;
}
.oc-video-player-wrapper .xgplayer[data-xgfill="cover"] video {
  -o-object-fit: cover;
  object-fit: cover;
}
.oc-video-player-wrapper .xgplayer[data-xgfill="fill"] video {
  -o-object-fit: fill;
  object-fit: fill;
}
.oc-video-player-wrapper .xgplayer .xg-pos {
  left: 10px;
  right: 10px;
}
.oc-video-player-wrapper .xgplayer .xg-margin {
  margin-left: 16px;
  margin-right: 16px;
}
.oc-video-player-wrapper .xgplayer .xg-bottom {
  bottom: 0;
}
.oc-video-player-wrapper .xgplayer .btn-text {
  position: relative;
  top: 50%;
  height: 24px;
  font-size: 13px;
  text-align: center;
}
.oc-video-player-wrapper .xgplayer .btn-text span {
  display: inline-block;
  min-width: 52px;
  height: 24px;
  line-height: 24px;
  background: rgba(0, 0, 0, 0.38);
  border-radius: 32px;
}
.oc-video-player-wrapper .xgplayer xg-icon {
  position: relative;
  box-sizing: border-box;
  height: 40px;
  margin-left: 16px;
  margin-right: 16px;
  cursor: pointer;
  color: #fffc;
  fill: #fff;
}
.oc-video-player-wrapper .xgplayer xg-icon .xg-tips {
  top: -30px;
  left: 50%;
  transform: translate(-50%);
}
.oc-video-player-wrapper .xgplayer xg-icon:active .xg-tips,
.oc-video-player-wrapper .xgplayer xg-icon:hover .xg-tips {
  display: block;
}
.oc-video-player-wrapper .xgplayer xg-icon:active .xg-tips.hide,
.oc-video-player-wrapper .xgplayer xg-icon:hover .xg-tips.hide {
  display: none;
}
.oc-video-player-wrapper .xgplayer xg-icon .xgplayer-icon {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
.oc-video-player-wrapper .xgplayer xg-icon .xg-icon-disable {
  cursor: not-allowed;
}
.oc-video-player-wrapper .xgplayer xg-icon .xg-img {
  width: 100%;
}
.oc-video-player-wrapper .xgplayer xg-icon svg,
.oc-video-player-wrapper .xgplayer xg-icon img {
  height: 100%;
  display: block;
}
.oc-video-player-wrapper .xgplayer xg-bar {
  display: block;
}
.oc-video-player-wrapper .xgplayer.xgplayer-inactive xg-bar,
.oc-video-player-wrapper .xgplayer.xgplayer-mini xg-bar {
  display: none;
}
.oc-video-player-wrapper .xgplayer.xgplayer-inactive .xg-top-bar {
  display: flex;
}
.oc-video-player-wrapper .xgplayer.xgplayer-inactive .xg-top-bar.top-bar-autohide {
  display: none;
}
.oc-video-player-wrapper .xgplayer .xg-top-bar {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 16px;
  right: 16px;
  display: flex;
  height: 50px;
}
.oc-video-player-wrapper .xgplayer .xg-top-bar xg-icon {
  position: relative;
  top: 10px;
  left: 0;
  width: 34px;
  margin-top: 0;
}
.oc-video-player-wrapper .xgplayer .xg-top-bar xg-icon:first-child {
  margin-left: 0;
}
.oc-video-player-wrapper .xgplayer .xg-left-bar,
.oc-video-player-wrapper .xgplayer .xg-right-bar {
  position: absolute;
  z-index: 9;
  top: 50px;
  bottom: 50px;
  width: 50px;
}
.oc-video-player-wrapper .xgplayer .xg-left-bar {
  left: 0;
}
.oc-video-player-wrapper .xgplayer .xg-right-bar {
  right: 0;
}
.oc-video-player-wrapper .xgplayer .xg-tips {
  display: none;
  position: absolute;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.54);
  border-radius: 8px;
  font-size: 11px;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  opacity: 0.85;
}
.oc-video-player-wrapper .xgplayer .xg-margin {
  left: 0px;
  right: 0px;
}
.oc-video-player-wrapper .xgplayer-mobile {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.oc-video-player-wrapper .xgplayer-mobile * {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.oc-video-player-wrapper .xgplayer-mobile.xgplayer-rotate-fullscreen .xg-top-bar,
.oc-video-player-wrapper .xgplayer-mobile.xgplayer-rotate-fullscreen .xg-pos {
  left: 6%;
  right: 6%;
}
.oc-video-player-wrapper .xgplayer-mobile xg-icon:hover .xg-tips {
  display: none;
}
@media only screen and (max-width: 480px) {
  .oc-video-player-wrapper .xgplayer-mobile xg-icon {
    margin-right: 10px;
    margin-left: 10px;
  }
  .oc-video-player-wrapper .xgplayer-mobile .xg-top-bar {
    left: 10px;
    right: 10px;
  }
}
@media screen and (orientation: portrait) {
  .oc-video-player-wrapper .xgplayer-mobile.xgplayer-is-fullscreen .xgplayer-controls,
  .oc-video-player-wrapper .xgplayer-mobile.xgplayer-is-cssfullscreen .xgplayer-controls {
    bottom: 34px;
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
  }
  .oc-video-player-wrapper .xgplayer-mobile.xgplayer-is-fullscreen .xg-top-bar,
  .oc-video-player-wrapper .xgplayer-mobile.xgplayer-is-cssfullscreen .xg-top-bar {
    top: 34px;
    top: constant(safe-area-inset-top);
    top: env(safe-area-inset-top);
  }
}
@media only screen and (orientation: landscape) {
  .oc-video-player-wrapper .xgplayer-mobile.xgplayer-is-fullscreen .xg-top-bar,
  .oc-video-player-wrapper .xgplayer-mobile.xgplayer-is-fullscreen .xg-pos {
    left: 6%;
    right: 6%;
  }
  .oc-video-player-wrapper .xgplayer-mobile.xgplayer-rotate-fullscreen {
    left: 0;
    width: 100vw;
    height: 100vh;
    transform: rotate(0);
  }
}
.oc-video-player-wrapper .xgplayer .xgplayer-screen-container {
  display: block;
  width: 100%;
}
.oc-video-player-wrapper .xgplayer .xg-options-icon {
  display: none;
  cursor: pointer;
}
.oc-video-player-wrapper .xgplayer .xg-options-icon.show {
  display: block;
}
@keyframes xg_right_options_active {
  0% {
    transform: translate(50%);
  }
  to {
    transform: translate(-50%);
  }
}
@keyframes xg_right_options_hide {
  0% {
    transform: translate(-50%);
  }
  to {
    transform: translate(50%);
  }
}
@keyframes xg_left_options_active {
  0% {
    transform: translate(-50%);
  }
  to {
    transform: translate(50%);
  }
}
@keyframes xg_left_options_hide {
  0% {
    transform: translate(50%);
  }
  to {
    transform: translate(-50%);
  }
}
.oc-video-player-wrapper .xgplayer .xg-options-list {
  display: none;
  position: absolute;
  z-index: 5;
  width: 78px;
  right: 50%;
  bottom: 100%;
  background: rgba(0, 0, 0, 0.54);
  border-radius: 1px;
  transform: translate(50%);
  cursor: pointer;
  overflow: auto;
  height: 0;
  opacity: 0.85;
  font-size: 14px;
  color: #fffc;
}
.oc-video-player-wrapper .xgplayer .xg-options-list li {
  height: 20px;
  line-height: 20px;
  position: relative;
  padding: 4px 0;
  text-align: center;
}
.oc-video-player-wrapper .xgplayer .xg-options-list li:hover,
.oc-video-player-wrapper .xgplayer .xg-options-list li.selected {
  color: red;
  opacity: 1;
}
.oc-video-player-wrapper .xgplayer .xg-options-list li:nth-child(1) {
  position: relative;
  margin-top: 12px;
}
.oc-video-player-wrapper .xgplayer .xg-options-list li:last-child {
  position: relative;
  margin-bottom: 12px;
}
.oc-video-player-wrapper .xgplayer .xg-options-list:hover {
  opacity: 1;
}
.oc-video-player-wrapper .xgplayer .xg-options-list.active {
  display: block;
  height: auto;
}
.oc-video-player-wrapper .xgplayer .xg-options-list.xg-side-list {
  width: 20%;
  height: 100%;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.oc-video-player-wrapper .xgplayer .xg-options-list.xg-side-list li {
  flex: 1;
  width: 100%;
  padding: 0;
  position: relative;
}
.oc-video-player-wrapper .xgplayer .xg-options-list.xg-side-list li span {
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.oc-video-player-wrapper .xgplayer .xg-options-list.xg-side-list li:nth-child(1) {
  margin-top: 20px;
}
.oc-video-player-wrapper .xgplayer .xg-options-list.xg-side-list li:last-child {
  margin-bottom: 20px;
}
.oc-video-player-wrapper .xgplayer .xg-options-list.xg-right-side {
  right: -10.5%;
}
.oc-video-player-wrapper .xgplayer .xg-options-list.xg-right-side.active {
  height: 100%;
  animation: xg_right_options_active 0.2s ease-out forwards;
}
.oc-video-player-wrapper .xgplayer .xg-options-list.xg-right-side.hide {
  height: 100%;
  animation: xg_right_options_hide 0.2s ease-in forwards;
}
.oc-video-player-wrapper .xgplayer .xg-options-list.xg-left-side {
  left: -10.5%;
  transform: translate(-50%);
}
.oc-video-player-wrapper .xgplayer .xg-options-list.xg-left-side.active {
  height: 100%;
  animation: xg_left_options_active 0.2s ease-out forwards;
}
.oc-video-player-wrapper .xgplayer .xg-options-list.xg-left-side.hide {
  height: 100%;
  animation: xg_left_options_hide 0.2s ease-in forwards;
}
@media only screen and (max-width: 480px) {
  .oc-video-player-wrapper .xgplayer-mobile .xg-options-icon.portrait {
    display: none;
  }
}
.oc-video-player-wrapper .xgplayer xg-thumbnail {
  display: block;
}
.oc-video-player-wrapper .xgplayer-replay {
  display: none;
}
.oc-video-player-wrapper .xgplayer .xgplayer-replay {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 5;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.oc-video-player-wrapper .xgplayer .xgplayer-replay .xgplayer-replay-txt {
  display: inline-block;
  font-size: 14px;
  color: #fff;
  line-height: 34px;
  text-align: center;
}
.oc-video-player-wrapper .xgplayer.xgplayer-mobile .xgplayer-replay-svg {
  width: 50px;
  height: 50px;
}
.oc-video-player-wrapper .xgplayer.xgplayer-mobile .xgplayer-replay-txt {
  line-height: 24px;
  font-size: 12px;
}
.oc-video-player-wrapper .xgplayer .xgplayer-poster {
  display: block;
  opacity: 1;
  visibility: visible;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}
.oc-video-player-wrapper .xgplayer .xgplayer-poster.hide,
.oc-video-player-wrapper .xgplayer.xgplayer-playing .xgplayer-poster {
  opacity: 0;
  visibility: hidden;
}
.oc-video-player-wrapper .xgplayer.xgplayer-is-enter .xgplayer-poster.xg-showplay,
.oc-video-player-wrapper .xgplayer.xgplayer-playing .xgplayer-poster.xg-showplay,
.oc-video-player-wrapper .xgplayer.xgplayer-nostart .xgplayer-poster,
.oc-video-player-wrapper .xgplayer.xgplayer-ended .xgplayer-poster,
.oc-video-player-wrapper .xgplayer.not-allow-autoplay .xgplayer-poster {
  opacity: 1;
  visibility: visible;
}
.oc-video-player-wrapper .xgplayer.xgplayer-nostart .xgplayer-poster.hide,
.oc-video-player-wrapper .xgplayer.xgplayer-ended .xgplayer-poster.hide,
.oc-video-player-wrapper .xgplayer.not-allow-autoplay .xgplayer-poster.hide {
  opacity: 0;
  visibility: hidden;
}
@keyframes playPause {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  99% {
    transform: scale(1.3);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 0;
  }
}
.oc-video-player-wrapper .xgplayer xg-start-inner {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.38);
}
.oc-video-player-wrapper .xgplayer .xgplayer-start {
  width: 70px;
  height: 70px;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.oc-video-player-wrapper .xgplayer .xgplayer-start svg {
  width: 100%;
  height: 100%;
}
.oc-video-player-wrapper .xgplayer .xgplayer-start.hide,
.oc-video-player-wrapper .xgplayer .xgplayer-start.focus-hide {
  display: none;
  pointer-events: none;
}
.oc-video-player-wrapper .xgplayer .xgplayer-start:hover {
  opacity: 0.85;
}
.oc-video-player-wrapper .xgplayer .xgplayer-start .xg-icon-play {
  display: block;
}
.oc-video-player-wrapper .xgplayer .xgplayer-start .xg-icon-pause,
.oc-video-player-wrapper .xgplayer .xgplayer-start[data-state="pause"] .xg-icon-play {
  display: none;
}
.oc-video-player-wrapper .xgplayer .xgplayer-start[data-state="pause"] .xg-icon-pause,
.oc-video-player-wrapper .xgplayer .xgplayer-start.interact {
  display: block;
}
.oc-video-player-wrapper .xgplayer .xgplayer-start.interact xg-start-inner {
  animation: playPause 0.4s 0.1s ease-out forwards;
}
.oc-video-player-wrapper .xgplayer .xgplayer-start.show {
  display: block;
}
.oc-video-player-wrapper .xgplayer.xgplayer-mobile xg-start-inner {
  background: initial;
  border-radius: 0;
}
.oc-video-player-wrapper .xgplayer.xgplayer-mobile .xgplayer-start {
  height: 50px;
  width: 50px;
}
.oc-video-player-wrapper .xgplayer.xgplayer-mobile .xgplayer-start:hover {
  opacity: 1;
}
.oc-video-player-wrapper .xgplayer.xgplayer-inactive .xgplayer-start.auto-hide,
.oc-video-player-wrapper .xgplayer.xgplayer-is-enter .xgplayer-start.auto-hide,
.oc-video-player-wrapper .xgplayer.xgplayer-isloading.xgplayer-playing .xgplayer-start,
.oc-video-player-wrapper .xgplayer.xgplayer-is-enter .xgplayer-start,
.oc-video-player-wrapper .xgplayer.xgplayer-is-error .xgplayer-start,
.oc-video-player-wrapper .xgplayer.xgplayer-is-enter .xgplayer-start.show,
.oc-video-player-wrapper .xgplayer.xgplayer-is-error .xgplayer-start.show {
  display: none;
}
.oc-video-player-wrapper .xgplayer-enter {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 5;
  pointer-events: none;
}
.oc-video-player-wrapper .xgplayer-enter .show {
  display: block;
}
.oc-video-player-wrapper .xgplayer-enter .xgplayer-enter-spinner {
  display: block;
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  height: 100px;
  width: 100px;
  transform: translate(-50%, -50%);
}
.oc-video-player-wrapper .xgplayer-enter .xgplayer-enter-spinner div {
  width: 6%;
  height: 13%;
  background-color: #ffffffb3;
  position: absolute;
  left: 45%;
  top: 45%;
  opacity: 0;
  border-radius: 30px;
  animation: fade 1s linear infinite;
}
.oc-video-player-wrapper .xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar1 {
  transform: rotate(0) translateY(-140%);
  animation-delay: 0s;
}
.oc-video-player-wrapper .xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar2 {
  transform: rotate(30deg) translateY(-140%);
  animation-delay: -0.9163s;
}
.oc-video-player-wrapper .xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar3 {
  transform: rotate(60deg) translateY(-140%);
  animation-delay: -0.833s;
}
.oc-video-player-wrapper .xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar4 {
  transform: rotate(90deg) translateY(-140%);
  animation-delay: -0.7497s;
}
.oc-video-player-wrapper .xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar5 {
  transform: rotate(120deg) translateY(-140%);
  animation-delay: -0.6664s;
}
.oc-video-player-wrapper .xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar6 {
  transform: rotate(150deg) translateY(-140%);
  animation-delay: -0.5831s;
}
.oc-video-player-wrapper .xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar7 {
  transform: rotate(180deg) translateY(-140%);
  animation-delay: -0.4998s;
}
.oc-video-player-wrapper .xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar8 {
  transform: rotate(210deg) translateY(-140%);
  animation-delay: -0.4165s;
}
.oc-video-player-wrapper .xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar9 {
  transform: rotate(240deg) translateY(-140%);
  animation-delay: -0.3332s;
}
.oc-video-player-wrapper .xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar10 {
  transform: rotate(270deg) translateY(-140%);
  animation-delay: -0.2499s;
}
.oc-video-player-wrapper .xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar11 {
  transform: rotate(300deg) translateY(-140%);
  animation-delay: -0.1666s;
}
.oc-video-player-wrapper .xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar12 {
  transform: rotate(330deg) translateY(-142%);
  animation-delay: -0.0833s;
}
@keyframes fade {
  0% {
    opacity: 1;
  }
  to {
    opacity: 0.25;
  }
}
.oc-video-player-wrapper .xgplayer.xgplayer-is-enter .xgplayer-enter {
  display: block;
  opacity: 1;
  transition: opacity 0.3s;
}
.oc-video-player-wrapper .xgplayer.xgplayer-nostart .xgplayer-enter {
  display: none;
}
.oc-video-player-wrapper .xgplayer.xgplayer-mobile .xgplayer-enter .xgplayer-enter-spinner {
  width: 70px;
  height: 70px;
}
.oc-video-player-wrapper .xg-mini-layer {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
  background: linear-gradient(180deg, rgba(57, 57, 57, 0.9), rgba(57, 57, 57, 0) 50.27%);
}
.oc-video-player-wrapper .xg-mini-layer .mask {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #0006;
}
.oc-video-player-wrapper .xg-mini-layer xg-mini-header {
  display: flex;
  top: 0;
  left: 0;
  right: 40px;
  box-sizing: border-box;
  padding: 10px 3px 0 8px;
  justify-content: space-between;
  color: #fff;
  font-size: 14px;
  position: absolute;
  z-index: 22;
}
.oc-video-player-wrapper .xg-mini-layer xg-mini-header .xgplayer-pip-disableBtn {
  pointer-events: all;
}
.oc-video-player-wrapper .xg-mini-layer xg-mini-header #disabledMini {
  display: none;
  position: relative;
}
.oc-video-player-wrapper .xg-mini-layer xg-mini-header #disabledMini + label {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
}
.oc-video-player-wrapper .xg-mini-layer xg-mini-header #disabledMini + label:before {
  content: "";
  color: #ff142b;
  background-color: transparent;
  border-radius: 2px;
  border: solid 1px #cdcdcd;
  width: 16px;
  height: 16px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  line-height: 16px;
  margin-right: 7px;
}
.oc-video-player-wrapper .xg-mini-layer xg-mini-header #disabledMini:checked + label {
  color: #ff142b;
}
.oc-video-player-wrapper .xg-mini-layer xg-mini-header #disabledMini:checked + label:before {
  border-color: #ff142b;
}
.oc-video-player-wrapper .xg-mini-layer xg-mini-header #disabledMini:checked + label:after {
  content: "";
  position: absolute;
  width: 4px;
  height: 8px;
  border-color: #ff142b;
  border-style: solid;
  border-width: 0px 2px 2px 0px;
  transform: rotate(45deg);
  left: 6px;
  top: 5px;
}
.oc-video-player-wrapper .xg-mini-layer xg-mini-header .xgplayer-mini-disableBtn xg-tips {
  position: absolute;
  padding: 4px 6px;
  white-space: nowrap;
  bottom: -30px;
  right: 15px;
  border-radius: 8px;
  background-color: #0000008a;
  display: none;
}
.oc-video-player-wrapper .xg-mini-layer xg-mini-header .xgplayer-mini-disableBtn:hover #disabledMini + label:before {
  border-color: #ff142b;
}
.oc-video-player-wrapper .xg-mini-layer xg-mini-header .xgplayer-mini-disableBtn:hover #disabledMini + label {
  color: #ff142b;
}
.oc-video-player-wrapper .xg-mini-layer xg-mini-header .xgplayer-mini-disableBtn:hover xg-tips {
  display: block;
}
.oc-video-player-wrapper .xg-mini-layer .mini-cancel-btn {
  cursor: pointer;
  display: block;
  color: #fff;
  width: 40px;
  height: 38px;
  position: absolute;
  right: 0;
  top: 0;
  text-align: center;
  line-height: 38px;
}
.oc-video-player-wrapper .xg-mini-layer .play-icon {
  cursor: pointer;
  height: 48px;
  width: 48px;
  position: absolute;
  background: rgba(0, 0, 0, 0.54);
  border-radius: 24px;
  top: 50%;
  left: 50%;
  margin: -24px 0 0 -24px;
}
.oc-video-player-wrapper .xg-mini-layer .play-icon svg,
.oc-video-player-wrapper .xg-mini-layer .play-icon img {
  width: 50px;
  height: 50px;
  fill: #faf7f7;
}
.oc-video-player-wrapper .xg-mini-layer .xg-icon-play {
  display: none;
}
.oc-video-player-wrapper .xg-mini-layer .xg-icon-pause,
.oc-video-player-wrapper .xg-mini-layer[data-state="pause"] .xg-icon-play {
  display: block;
}
.oc-video-player-wrapper .xg-mini-layer[data-state="pause"] .xg-icon-pause {
  display: none;
}
.oc-video-player-wrapper .xgplayer-miniicon {
  position: relative;
  outline: none;
  display: block;
}
.oc-video-player-wrapper .xgplayer-miniicon .name {
  text-align: center;
  font-size: 13px;
  height: 20px;
  color: #fffc;
  line-height: 40px;
}
.oc-video-player-wrapper .xgplayer-miniicon .name span {
  font-size: 13px;
  width: 60px;
  height: 20px;
  line-height: 20px;
  background: rgba(0, 0, 0, 0.38);
  border-radius: 10px;
  display: inline-block;
  vertical-align: middle;
}
.oc-video-player-wrapper .xgplayer-mini {
  position: fixed;
  width: 320px;
  height: 180px;
  z-index: 91;
  box-shadow: 0 4px 7px 2px #0003;
}
.oc-video-player-wrapper .xgplayer-mini:hover {
  cursor: move;
}
.oc-video-player-wrapper .xgplayer-mini:hover .xg-mini-layer {
  display: block;
}
.oc-video-player-wrapper .xgplayer-mini.xgplayer-ended .xg-mini-layer {
  display: none;
}
.oc-video-player-wrapper .xgplayer-mobile .xg-mini-layer .play-icon {
  background: none;
  border-radius: initial;
}
.oc-video-player-wrapper .xgplayer.xgplayer-inactive {
  cursor: none;
}
.oc-video-player-wrapper .xgplayer xg-thumbnail {
  display: block;
}
.oc-video-player-wrapper .xgplayer xg-trigger {
  -moz-user-select: none;
  user-select: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.oc-video-player-wrapper .xgplayer xg-trigger .time-preview {
  display: none;
  position: absolute;
  width: 200px;
  margin: 0 auto;
  padding: 0 20px 30px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.54);
  font-size: 17px;
  text-align: center;
  pointer-events: none;
}
.oc-video-player-wrapper .xgplayer xg-trigger .time-preview span {
  line-height: 24px;
}
.oc-video-player-wrapper .xgplayer xg-trigger .time-preview span.xg-cur {
  color: red;
}
.oc-video-player-wrapper .xgplayer xg-trigger .time-preview .xg-seek-show {
  transform: translate(-10px);
}
.oc-video-player-wrapper .xgplayer xg-trigger .time-preview .xg-seek-show.xg-back .xg-seek-pre {
  transform: rotate(180deg) translate(-5px);
}
.oc-video-player-wrapper .xgplayer xg-trigger .time-preview .xg-seek-show.hide-seek-icon .xg-seek-icon {
  display: none;
}
.oc-video-player-wrapper .xgplayer xg-trigger .time-preview .xg-bar {
  width: 96px;
  height: 2px;
  margin: 8px auto 0;
  border-radius: 10px;
  box-sizing: content-box;
  background: rgba(255, 255, 255, 0.3);
}
.oc-video-player-wrapper .xgplayer xg-trigger .time-preview .xg-bar .xg-curbar {
  width: 0;
  height: 100%;
  background-color: red;
}
.oc-video-player-wrapper .xgplayer xg-trigger .time-preview .xg-bar.hide {
  display: none;
}
.oc-video-player-wrapper .xgplayer xg-trigger .mobile-thumbnail {
  position: relative;
  left: 50%;
  transform: translate(-50%);
}
.oc-video-player-wrapper .xgplayer xg-trigger .xg-top-note {
  position: absolute;
  height: 32px;
  width: 135px;
  top: 26px;
  left: 50%;
  margin-left: -78px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 100px;
  color: #fff;
}
.oc-video-player-wrapper .xgplayer xg-trigger .xg-top-note span {
  display: block;
  line-height: 32px;
  height: 32px;
  font-size: 13px;
  text-align: center;
}
.oc-video-player-wrapper .xgplayer xg-trigger .xg-top-note i {
  color: red;
  margin: 0 5px;
}
.oc-video-player-wrapper .xgplayer xg-trigger .xg-playbackrate {
  display: none;
}
.oc-video-player-wrapper .xgplayer xg-trigger[data-xg-action="seeking"] .time-preview {
  display: block;
}
.oc-video-player-wrapper .xgplayer xg-trigger[data-xg-action="playbackrate"] .xg-playbackrate {
  display: block;
}
.oc-video-player-wrapper .xgplayer .gradient {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.36) 20%, rgba(0, 0, 0, 0) 36%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.24) 77%, rgba(0, 0, 0, 0.36) 83%, rgba(0, 0, 0, 0.6));
}
.oc-video-player-wrapper .xgplayer .gradient.top {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.36) 20%, rgba(0, 0, 0, 0) 36%, rgba(0, 0, 0, 0) 70%);
}
.oc-video-player-wrapper .xgplayer .gradient.bottom {
  background-image: linear-gradient(rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.24) 77%, rgba(0, 0, 0, 0.36) 83%, rgba(0, 0, 0, 0.6));
}
.oc-video-player-wrapper .xgplayer .gradient.none,
.oc-video-player-wrapper .xgplayer-mobile .xgplayer-controls {
  background-image: initial;
}
.oc-video-player-wrapper .xgplayer-mobile.xgplayer-playing .gradient {
  display: block;
}
.oc-video-player-wrapper .xgplayer-mobile.xgplayer-inactive .gradient {
  background-image: initial;
}
.oc-video-player-wrapper .xgplayer-mobile .xgmask {
  position: absolute;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  background-color: #0000;
}
@media (prefers-color-scheme: dark) {
  .oc-video-player-wrapper .xgplayer-mobile xg-trigger .time-preview {
    color: #fff;
  }
  .oc-video-player-wrapper .xgplayer-mobile xg-trigger .time-preview span.xg-cur {
    color: red;
  }
  .oc-video-player-wrapper .xgplayer-mobile xg-trigger .time-preview .xg-bar {
    background-color: #ffffff4d;
  }
  .oc-video-player-wrapper .xgplayer-mobile xg-trigger .time-preview .xg-bar.xg-curbar {
    background-color: red;
  }
}
@keyframes loadingRotate {
  0% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes loadingDashOffset {
  0% {
    stroke-dashoffset: 236;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.oc-video-player-wrapper xg-loading-inner {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: center;
  animation: loadingRotate 1s 0.1s linear infinite;
}
.oc-video-player-wrapper .xgplayer-loading {
  display: none;
  width: 70px;
  height: 70px;
  overflow: hidden;
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.oc-video-player-wrapper .xgplayer-loading svg,
.oc-video-player-wrapper .xgplayer-loading img {
  width: 100%;
  height: 100%;
}
.oc-video-player-wrapper .xgplayer-mobile .xgplayer-loading {
  width: 50px;
  height: 50px;
}
.oc-video-player-wrapper .xgplayer-isloading .xgplayer-loading {
  display: block;
}
.oc-video-player-wrapper .xgplayer-nostart .xgplayer-loading,
.oc-video-player-wrapper .xgplayer-pause .xgplayer-loading,
.oc-video-player-wrapper .xgplayer-is-enter .xgplayer-loading,
.oc-video-player-wrapper .xgplayer-is-ended .xgplayer-loading,
.oc-video-player-wrapper .xgplayer-is-error .xgplayer-loading {
  display: none;
}
.oc-video-player-wrapper .xgplayer .xgplayer-progress {
  display: flex;
  align-items: center;
  position: relative;
  min-width: 50px;
  height: 12px;
  left: 0;
  right: 0;
  top: 0;
  outline: none;
  flex: 1;
  cursor: pointer;
}
.oc-video-player-wrapper .xgplayer .xgplayer-progress-outer {
  position: relative;
  width: 100%;
  height: 2px;
  border-radius: 3px;
  cursor: pointer;
}
.oc-video-player-wrapper .xgplayer .progress-list {
  display: flex;
  height: 100%;
  width: 100%;
  border-radius: inherit;
}
.oc-video-player-wrapper .xgplayer .xgplayer-progress-inner {
  position: relative;
  flex: 1;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  transition: height 0.2s ease-in, opacity 0.2s ease-out;
  border-radius: inherit;
  margin-right: 2px;
  pointer-events: none;
}
.oc-video-player-wrapper .xgplayer .xgplayer-progress-inner:last-child,
.oc-video-player-wrapper .xgplayer .xgplayer-progress-inner:only-child {
  margin-right: 0;
}
.oc-video-player-wrapper .xgplayer .inner-focus-point {
  background: #fff;
  position: relative;
}
.oc-video-player-wrapper .xgplayer .inner-focus-point:before,
.oc-video-player-wrapper .xgplayer .inner-focus-point:after {
  position: absolute;
  top: 0;
  content: " ";
  display: block;
  width: 2px;
  height: 300%;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  border-radius: 3px;
  background: #fff;
}
.oc-video-player-wrapper .xgplayer .inner-focus-point:before {
  left: 0;
}
.oc-video-player-wrapper .xgplayer .inner-focus-point:after {
  right: 0;
}
.oc-video-player-wrapper .xgplayer .xgplayer-progress-cache,
.oc-video-player-wrapper .xgplayer .xgplayer-progress-played {
  display: block;
  height: 100%;
  width: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: inherit;
}
.oc-video-player-wrapper .xgplayer .xgplayer-progress-played {
  background: #651dff;
}
.oc-video-player-wrapper .xgplayer .xgplayer-progress-cache {
  background: rgba(255, 255, 255, 0.5);
}
.oc-video-player-wrapper .xgplayer .xgplayer-progress-btn {
  display: block;
  background: rgba(0, 87, 255, 0.304093);
  border: 0.5px solid rgba(0, 87, 255, 0.056545);
  box-shadow: 0 0 1px #0057ff62;
  width: 20px;
  height: 20px;
  border-radius: 30px;
  left: 0;
  top: 50%;
  position: absolute;
  z-index: 1;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  pointer-events: none;
}
.oc-video-player-wrapper .xgplayer .xgplayer-progress-btn:before {
  content: " ";
  display: block;
  position: relative;
  width: 12px;
  height: 12px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 30px;
  background: #ffffff;
}
.oc-video-player-wrapper .xgplayer .xgplayer-progress-btn.active {
  border: 4px solid rgba(0, 87, 255, 0.064057);
}
.oc-video-player-wrapper .xgplayer .xgplayer-progress-btn.active:before {
  box-shadow: 0 0 3px #0057ffb0;
}
.oc-video-player-wrapper .xgplayer .xgplayer-progress-dot {
  display: inline-block;
  position: absolute;
  height: 100%;
  width: 5px;
  top: 0px;
  background: white;
  border-radius: 12px;
  z-index: 16;
}
.oc-video-player-wrapper .xgplayer .xgplayer-progress-dot .xgplayer-progress-tip {
  position: absolute;
  left: 25%;
  top: -40px;
  height: auto;
  line-height: 30px;
  width: auto;
  transform: scale(0.8) translate(-50%);
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.8);
  cursor: default;
  white-space: nowrap;
  display: none;
}
.oc-video-player-wrapper .xgplayer .xgplayer-progress-dot:hover .xgplayer-progress-tip {
  display: block;
}
.oc-video-player-wrapper .xgplayer .flex-controls .xgplayer-progress {
  transform: translateY(0);
}
.oc-video-player-wrapper .xgplayer.xgplayer-pc .xgplayer-progress-btn {
  transform: translate(-50%, -50%) scale(0);
}
.oc-video-player-wrapper .xgplayer.xgplayer-pc .xgplayer-progress-outer {
  height: 3px;
}
.oc-video-player-wrapper .xgplayer.xgplayer-pc .xgplayer-progress-inner {
  margin-right: 4px;
}
.oc-video-player-wrapper .xgplayer.xgplayer-pc .xgplayer-progress-inner:last-child,
.oc-video-player-wrapper .xgplayer.xgplayer-pc .xgplayer-progress-inner:only-child {
  margin-right: 0;
}
.oc-video-player-wrapper .xgplayer.xgplayer-pc .inner-focus-point:before,
.oc-video-player-wrapper .xgplayer.xgplayer-pc .inner-focus-point:after {
  width: 3px;
}
.oc-video-player-wrapper .xgplayer.xgplayer-pc .inner-focus-highlight {
  background: rgba(255, 255, 255, 0.8);
}
.oc-video-player-wrapper .xgplayer.xgplayer-pc .xgplayer-progress.active .xgplayer-progress-outer {
  height: 6px;
  margin-bottom: 3px;
  transition: height 0.3s ease, margin-bottom 0.3s ease;
}
.oc-video-player-wrapper .xgplayer.xgplayer-pc .xgplayer-progress.active .xgplayer-progress-btn {
  transform: translate(-50%, -50%) scale(1);
}
.oc-video-player-wrapper .xgplayer.xgplayer-pc .xgplayer-progress.active .inner-focus-point:before,
.oc-video-player-wrapper .xgplayer.xgplayer-pc .xgplayer-progress.active .inner-focus-point:after {
  width: 6px;
}
.oc-video-player-wrapper .xgplayer .xgplayer-progress-bottom .xgplayer-progress-outer {
  top: 9px;
}
.oc-video-player-wrapper .xgplayer .xgplayer-progress-bottom .xgplayer-progress-btn:before {
  height: 6px;
  width: 6px;
}
.oc-video-player-wrapper .xgplayer.xgplayer-mobile .xgplayer-progress-bottom .xgplayer-progress-outer {
  height: 4px;
}
@media (prefers-color-scheme: dark) {
  .oc-video-player-wrapper .xgplayer .xgplayer-progress .xgplayer-progress-inner {
    background-color: #ffffff4d;
  }
  .oc-video-player-wrapper .xgplayer .xgplayer-progress .inner-focus-highlight {
    background: rgba(255, 255, 255, 0.8);
  }
  .oc-video-player-wrapper .xgplayer .xgplayer-progress .xgplayer-progress-btn {
    background: rgba(0, 87, 255, 0.304093);
    border: 0.5px solid rgba(0, 87, 255, 0.056545);
    box-shadow: 0 0 1px #0057ff62;
  }
  .oc-video-player-wrapper .xgplayer .xgplayer-progress .xgplayer-progress-btn:before {
    background-color: #fff;
  }
  .oc-video-player-wrapper .xgplayer .xgplayer-progress .xgplayer-progress-played {
    background-color: #651dff;
  }
  .oc-video-player-wrapper .xgplayer .xgplayer-progress .xgplayer-progress-cache {
    background-color: #ffffff80;
  }
}
.oc-video-player-wrapper .xg-mini-progress {
  display: none;
  position: absolute;
  height: 2px;
  left: 0;
  right: 0;
  bottom: 0px;
  pointer-events: none;
}
.oc-video-player-wrapper .xg-mini-progress xg-mini-progress-played,
.oc-video-player-wrapper .xg-mini-progress xg-mini-progress-cache {
  height: 100%;
  width: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: inherit;
}
.oc-video-player-wrapper .xg-mini-progress xg-mini-progress-played {
  background: linear-gradient(-90deg, #fa1f41 0%, #e31106 100%);
}
.oc-video-player-wrapper .xg-mini-progress xg-mini-progress-cache {
  background: rgba(255, 255, 255, 0.5);
}
.oc-video-player-wrapper .xgplayer-inactive .xg-mini-progress,
.oc-video-player-wrapper .xgplayer-mini .xg-mini-progress {
  display: block;
}
.oc-video-player-wrapper .xgplayer .xgplayer-play .xg-icon-play {
  display: none;
}
.oc-video-player-wrapper .xgplayer .xgplayer-play .xg-icon-pause,
.oc-video-player-wrapper .xgplayer .xgplayer-play[data-state="pause"] .xg-icon-play {
  display: block;
}
.oc-video-player-wrapper .xgplayer .xgplayer-play[data-state="pause"] .xg-icon-pause,
.oc-video-player-wrapper .xgplayer .xgplayer-fullscreen .xg-exit-fullscreen {
  display: none;
}
.oc-video-player-wrapper .xgplayer .xgplayer-fullscreen .xg-get-fullscreen,
.oc-video-player-wrapper .xgplayer .xgplayer-fullscreen[data-state="full"] .xg-exit-fullscreen {
  display: block;
}
.oc-video-player-wrapper .xgplayer .xgplayer-fullscreen[data-state="full"] .xg-get-fullscreen {
  display: none;
}
.oc-video-player-wrapper .xgplayer .xg-top-bar .xgplayer-back {
  position: relative;
  left: 0;
  top: 16px;
  width: 34px;
  height: 40px;
  display: none;
}
.oc-video-player-wrapper .xgplayer .xg-top-bar .xgplayer-back.show {
  display: block;
}
.oc-video-player-wrapper .xgplayer .xgplayer-time {
  min-width: 40px;
  font-size: 14px;
  font-family: PingFangSC-Semibold;
  color: #fff;
  text-align: center;
  display: inline-block;
  line-height: 40px;
}
.oc-video-player-wrapper .xgplayer .xgplayer-time span {
  display: inline-block;
  line-height: 40px;
  height: 40px;
}
.oc-video-player-wrapper .xgplayer .xgplayer-time .time-duration {
  color: #ffffff80;
}
.oc-video-player-wrapper .xgplayer .xgplayer-time .time-live-tag {
  display: none;
}
.oc-video-player-wrapper .xgplayer .xgplayer-time.xg-time-left {
  margin-left: 0;
}
.oc-video-player-wrapper .xgplayer .xgplayer-time.xg-time-right {
  margin-right: 0;
}
.oc-video-player-wrapper .xgplayer.xgplayer-mobile .xgplayer-time {
  min-width: 30px;
  font-size: 12px;
}
.oc-video-player-wrapper .xgplayer.xgplayer-mobile .xgplayer-time.xg-time-left {
  margin-right: 8px;
}
.oc-video-player-wrapper .xgplayer.xgplayer-mobile .xgplayer-time.xg-time-right {
  margin-left: 8px;
}
.oc-video-player-wrapper .xgplayer .xgplayer-volume.slide-show .xgplayer-slider {
  display: block;
}
.oc-video-player-wrapper .xgplayer .xgplayer-slider {
  display: none;
  position: absolute;
  width: 28px;
  height: 92px;
  background: rgba(0, 0, 0, 0.54);
  border-radius: 1px;
  bottom: 40px;
  outline: none;
}
.oc-video-player-wrapper .xgplayer .xgplayer-slider:after {
  content: " ";
  display: block;
  height: 15px;
  width: 28px;
  position: absolute;
  bottom: -15px;
  left: 0;
  z-index: 20;
  cursor: initial;
}
.oc-video-player-wrapper .xgplayer .xgplayer-value-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  padding: 5px 0 0;
  font-size: 12px;
  background-color: #0000008a;
  color: #fff;
  text-align: center;
}
.oc-video-player-wrapper .xgplayer .xgplayer-bar,
.oc-video-player-wrapper .xgplayer .xgplayer-drag {
  display: block;
  position: absolute;
  bottom: 6px;
  left: 12px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 100px;
  width: 4px;
  height: 76px;
  outline: none;
  cursor: pointer;
}
.oc-video-player-wrapper .xgplayer .xgplayer-drag {
  bottom: 0;
  left: 0;
  background: #651dff;
  max-height: 76px;
}
.oc-video-player-wrapper .xgplayer .xgplayer-drag:after {
  content: " ";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #fff;
  box-shadow: 0 0 5px #00000042;
  position: absolute;
  border-radius: 50%;
  left: -2px;
  top: -4px;
}
.oc-video-player-wrapper .xgplayer .xgplayer-volume[data-state="normal"] .xg-volume {
  display: block;
}
.oc-video-player-wrapper .xgplayer .xgplayer-volume[data-state="normal"] .xg-volume-small,
.oc-video-player-wrapper .xgplayer .xgplayer-volume[data-state="normal"] .xg-volume-mute,
.oc-video-player-wrapper .xgplayer .xgplayer-volume[data-state="small"] .xg-volume {
  display: none;
}
.oc-video-player-wrapper .xgplayer .xgplayer-volume[data-state="small"] .xg-volume-small {
  display: block;
}
.oc-video-player-wrapper .xgplayer .xgplayer-volume[data-state="small"] .xg-volume-mute,
.oc-video-player-wrapper .xgplayer .xgplayer-volume[data-state="mute"] .xg-volume,
.oc-video-player-wrapper .xgplayer .xgplayer-volume[data-state="mute"] .xg-volume-small {
  display: none;
}
.oc-video-player-wrapper .xgplayer .xgplayer-volume[data-state="mute"] .xg-volume-mute {
  display: block;
}
.oc-video-player-wrapper .xgplayer.xgplayer-mobile .xgplayer-volume .xgplayer-slider,
.oc-video-player-wrapper .xgplayer .xgplayer-pip .xg-exit-pip {
  display: none;
}
.oc-video-player-wrapper .xgplayer .xgplayer-pip .xg-get-pip,
.oc-video-player-wrapper .xgplayer .xgplayer-pip[data-state="pip"] .xg-exit-pip {
  display: block;
}
.oc-video-player-wrapper .xgplayer .xgplayer-pip[data-state="pip"] .xg-get-pip {
  display: none;
}
.oc-video-player-wrapper .xgplayer .xgplayer-playnext {
  position: relative;
  display: none;
  cursor: pointer;
}
.oc-video-player-wrapper .xgplayer .xgplayer-playnext .xgplayer-tips .xgplayer-tip-playnext {
  display: block;
}
.oc-video-player-wrapper .xgplayer .xgplayer-playnext:hover {
  opacity: 0.85;
}
.oc-video-player-wrapper .xgplayer .xgplayer-playnext:hover .xgplayer-tips {
  display: block;
}
.oc-video-player-wrapper .lang-is-en .xgplayer-playnext .xgplayer-tips {
  margin-left: -25px;
}
.oc-video-player-wrapper .lang-is-jp .xgplayer-playnext .xgplayer-tips {
  margin-left: -38px;
}
.oc-video-player-wrapper .xgplayer .xgplayer-download {
  position: relative;
  display: block;
  cursor: pointer;
}
.oc-video-player-wrapper .lang-is-en .xgplayer-download .xgplayer-tips {
  margin-left: -32px;
}
.oc-video-player-wrapper .lang-is-jp .xgplayer-download .xgplayer-tips {
  margin-left: -40px;
}
.oc-video-player-wrapper .xgplayer .xgplayer-shot {
  display: none;
}
.oc-video-player-wrapper .xgplayer-definition {
  display: none;
  cursor: pointer;
}
.oc-video-player-wrapper .xgplayer .xgplayer-playbackrate {
  display: none;
  cursor: default;
}
.oc-video-player-wrapper .xgplayer .xgplayer-cssfullscreen .xg-get-cssfull {
  display: block;
}
.oc-video-player-wrapper .xgplayer .xgplayer-cssfullscreen .xg-exit-cssfull,
.oc-video-player-wrapper .xgplayer .xgplayer-cssfullscreen[data-state="full"] .xg-get-cssfull {
  display: none;
}
.oc-video-player-wrapper .xgplayer .xgplayer-cssfullscreen[data-state="full"] .xg-exit-cssfull {
  display: block;
}
.oc-video-player-wrapper .xgplayer-error {
  background: #000;
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  color: #fff;
  text-align: center;
  line-height: 100%;
  justify-content: center;
  align-items: center;
}
.oc-video-player-wrapper .xgplayer-error .xgplayer-error-refresh {
  color: #fa1f41;
  padding: 0 3px;
  cursor: pointer;
}
.oc-video-player-wrapper .xgplayer-error .xgplayer-error-text {
  line-height: 18px;
  margin: auto 6px 20px;
  display: block;
}
.oc-video-player-wrapper .xgplayer-is-error .xgplayer-error {
  display: flex;
}
.oc-video-player-wrapper .xgplayer .xgplayer-prompt {
  display: block;
  pointer-events: none;
  position: absolute;
  z-index: 1;
  padding: 6px 12px 5px;
  opacity: 0;
  left: 10px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50px;
  font-size: 12px;
  line-height: 17px;
  text-align: center;
  color: #fff;
}
.oc-video-player-wrapper .xgplayer .xgplayer-prompt.show {
  display: block;
  opacity: 1;
  z-index: 10;
  pointer-events: initial;
}
.oc-video-player-wrapper .xgplayer .xgplayer-prompt.arrow {
  transform: translate(-50%);
}
.oc-video-player-wrapper .xgplayer .xgplayer-prompt.arrow:after {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid rgba(0, 0, 0, 0.5);
  transform: translate(-50%, 100%);
}
.oc-video-player-wrapper .xgplayer .xgplayer-prompt .highlight {
  display: inline-block;
  margin-left: 6px;
  color: red;
  cursor: pointer;
}
.oc-video-player-wrapper .xgplayer.xgplayer-is-error .xgplayer-prompt.show {
  display: none;
  opacity: 1;
}
.oc-video-player-wrapper .xgplayer .xgplayer-spot {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #fff;
  border-radius: 32px;
}
.oc-video-player-wrapper .xgplayer .xgplayer-spot.mini {
  min-width: 6px;
  transform: translate(-50%);
}
.oc-video-player-wrapper .xgplayer-mobile .xgplayer-spot {
  height: 3px;
  min-width: 3px;
  top: 50%;
  opacity: 1;
  transform: translateY(-50%);
}
.oc-video-player-wrapper .xgplayer-mobile .xgplayer-spot.mini {
  min-width: 3px;
  transform: translate(-50%, -50%);
}
.oc-video-player-wrapper .xgplayer .xgplayer-progress.active .xgplayer-spot {
  opacity: 1;
  transition: opacity 0.3s;
  visibility: visible;
}
.oc-video-player-wrapper .xgplayer .xg-spot-info {
  position: absolute;
  left: 0;
  bottom: 100%;
  display: none;
}
.oc-video-player-wrapper .xgplayer .xg-spot-info.short-line .xg-spot-line {
  height: 6px;
}
.oc-video-player-wrapper .xgplayer .xg-spot-info.short-line .xg-spot-content {
  bottom: -4px;
}
.oc-video-player-wrapper .xgplayer .xg-spot-info.no-thumbnail .xg-spot-thumbnail {
  display: none;
}
.oc-video-player-wrapper .xgplayer .xg-spot-info.no-thumbnail .xgplayer-progress-point {
  display: block;
}
.oc-video-player-wrapper .xgplayer .xg-spot-info.no-timepoint .xgplayer-progress-point,
.oc-video-player-wrapper .xgplayer .xg-spot-info.hide {
  display: none;
}
.oc-video-player-wrapper .xgplayer .xgplayer-progress.active .xg-spot-info {
  display: block;
}
.oc-video-player-wrapper .xgplayer .xgplayer-progress.active .xg-spot-info.hide {
  display: none;
}
.oc-video-player-wrapper .xgplayer .xg-spot-line {
  position: relative;
  bottom: -7px;
  margin-left: 50%;
  display: block;
  width: 1px;
  height: 41px;
  background-color: #fff;
  pointer-events: none;
}
.oc-video-player-wrapper .xgplayer .xgplayer-progress-point {
  display: none;
  position: relative;
  bottom: -4px;
  left: 50%;
  transform: translate(-50%);
  background: rgba(0, 0, 0, 0.54);
  font-size: 11px;
  color: #fff;
  padding: 4px 6px;
  border-radius: 8px;
  text-align: center;
  opacity: 0.85;
  white-space: nowrap;
}
.oc-video-player-wrapper .xgplayer .xg-spot-content {
  position: relative;
  bottom: -7px;
  color: #fff;
  border-radius: 2px 2px 0 0;
}
.oc-video-player-wrapper .xgplayer .xg-spot-ext-text {
  position: relative;
  bottom: -7px;
}
.oc-video-player-wrapper .xgplayer .xg-spot-thumbnail {
  position: relative;
  background-color: #111010;
  pointer-events: none;
  border-radius: 2px 2px 0 0;
}
.oc-video-player-wrapper .xgplayer .xg-spot-time {
  position: absolute;
  bottom: 2px;
  font-size: 12px;
  line-height: 16.8px;
  left: 50%;
  transform: translate(-50%);
  pointer-events: none;
}
.oc-video-player-wrapper .xgplayer .progress-thumbnail {
  margin: 0 auto;
  display: block;
}
.oc-video-player-wrapper .xgplayer .xg-spot-text {
  display: none;
  padding: 5px 8px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 0 0 2px 2px;
  pointer-events: none;
  box-sizing: border-box;
}
.oc-video-player-wrapper .xgplayer .spot-inner-text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 20px;
  font-size: 12px;
  max-height: 40px;
}
.oc-video-player-wrapper .xgplayer .xg-spot-content.show-text .xg-spot-text {
  display: block;
}
.oc-video-player-wrapper .xgplayer .product .xg-spot-text {
  background: #3370ff;
}
.oc-video-player-wrapper .xgplayer .product .xg-spot-line {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 7px solid #3370ff;
  width: 0;
  height: 15px;
  left: -10px;
  background: none;
}
.oc-video-player-wrapper .xgplayer .xgvideo-preview {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: visibility 0.3s, opacity 0.3s;
  background-color: #000;
}
.oc-video-player-wrapper .xgplayer .xgvideo-preview .xgvideo-thumbnail {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 0;
}
.oc-video-player-wrapper .xgplayer .xgvideo-preview.show {
  opacity: 1;
  visibility: visible;
}
.oc-video-player-wrapper .xgplayer-dynamic-bg,
.oc-video-player-wrapper .xgplayer-dynamic-bg canvas,
.oc-video-player-wrapper .xgplayer-dynamic-bg xgmask,
.oc-video-player-wrapper .xgplayer-dynamic-bg xgfilter {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
}
.oc-video-player-wrapper .xgplayer-dynamic-bg canvas {
  transform: translateZ(0);
}
.oc-video-player-wrapper .xgplayer-dynamic-bg xgmask {
  background: rgba(0, 0, 0, 0.7);
}
.oc-video-player-modal-wrapper {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 120px;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.oc-video-player-modal-wrapper .xgplayer.xgplayer-is-cssfullscreen {
  position: relative;
}
.oc-video-player-modal-wrapper .oc-video-player-modal-close {
  color: #fff;
  position: absolute;
  top: 32px;
  right: 32px;
  height: 48px;
  width: 48px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.oc-video-player {
  width: 100% !important;
  height: 100% !important;
  border-radius: 24px;
}
.oc-video-player-hide-start .xgplayer-start {
  display: none !important;
}
.oc-video-player-hide-replay .xgplayer-replay {
  display: none !important;
}
.oc-video-player-new .xgplayer-enter-spinner {
  width: 48px !important;
  height: 48px !important;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  overflow: hidden;
}
.oc-carousel-container {
  width: 100%;
  height: 100%;
  position: relative;
}
.oc-carousel-arrow-btn {
  z-index: 3;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  padding: 8px;
  position: absolute;
  top: calc(50% - 16px);
  min-width: 24px;
  background: rgba(26, 26, 27, 0.3);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
}
.oc-carousel-arrow-btn:hover {
  background: rgba(26, 26, 27, 0.5);
}
.oc-carousel-arrow-show {
  display: flex;
}
.oc-carousel-arrow-left {
  left: 16px;
}
.oc-carousel-arrow-right {
  right: 16px;
}
.oc-carousel-footer {
  z-index: 2;
  position: absolute;
  bottom: 0;
  width: 100%;
  margin: 0;
  background: linear-gradient(180deg, rgba(50, 51, 53, 0) 0%, rgba(50, 51, 53, 0.25) 100%);
}
.oc-carousel-dots {
  width: 100%;
  margin: 0;
  transition-duration: 400ms;
  line-height: 0;
  text-align: center;
  list-style-type: none;
}
.oc-carousel-dots li {
  cursor: pointer;
  display: inline-block;
  list-style: none;
  padding-left: 4px;
  padding-right: 4px;
  padding-top: 16px;
}
.oc-carousel-dots li .oc-carousel-btn {
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.4);
  transition: 0.3s;
  border-radius: 8px;
  cursor: pointer;
}
.oc-carousel-dots li .oc-carousel-btn-active {
  background-color: #fff;
}
.oc-carousel-dots-none {
  display: none;
}
.oc-carousel-dots-solid li .oc-carousel-btn {
  width: 20px !important;
  height: 4px !important;
}
.oc-carousel-dots-auto {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 0 10px;
}
.oc-carousel-dots-auto li {
  flex: 1;
  padding-left: 2px;
  padding-right: 2px;
}
.oc-carousel-dots-auto li .oc-carousel-btn {
  width: 100% !important;
  height: 4px !important;
}
.oc-carousel .carousel-item-img,
.oc-carousel .carousel-item-img img {
  width: 100%;
  height: 100%;
}
.oc-carousel-dark .oc-carousel-arrow-btn {
  background: #fff;
  color: #ffffff;
  box-shadow: 0px 6.4px 19.2px rgba(0, 0, 0, 0.08);
}
.oc-carousel-dark .oc-carousel-arrow-btn:hover {
  color: #651dff;
}
.oc-carousel-dark .oc-carousel-footer {
  background: inherit;
}
.oc-carousel-dark .oc-carousel-dots li .oc-carousel-btn {
  background-color: rgba(0, 0, 0, 0.1);
}
.oc-carousel-dark .oc-carousel-dots li .oc-carousel-btn-active {
  background-color: #651dff;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-carousel-item {
  transform: none;
  float: left;
  width: 100%;
  height: 100%;
  text-align: center;
  overflow: hidden;
  z-index: 0;
  will-change: transform;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-audio-player {
  color: #fff;
  cursor: pointer;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-select {
  display: flex;
  align-items: center;
}
.oc-select .oc-select-after-slot {
  margin-left: 8px;
}
.oc-select .ovui-input__wrapper--xl {
  padding: 3px 8px;
}
.oc-select .ovui-select--fill .ovui-select__tips {
  border-color: #dfe0e2;
}
.oc-select .ovui-custom-input__prefix {
  color: #ffffff;
}
.oc-select__popover {
  /* 以下逻辑，是复制 okee 内部代码删减后得到，请尽量保持与 okee 同步
  okee 中有特别支持的 light 主题样式，此处 default 下不支持 light 模式 */
}
.oc-select__popover .ovui-select__options {
  max-height: unset;
}
.oc-select__popover .ovui-checkbox {
  /* 禁用 + 选中/indeterminate */
}
.oc-select__popover .ovui-checkbox:not(.ovui-checkbox--disabled) {
  /* 未禁用 + 未选中 */
  /* 未禁用 + 选中/indeterminate */
}
.oc-select__popover .ovui-checkbox:not(.ovui-checkbox--disabled) .ovui-checkbox__inner:hover {
  border-color: #323335;
}
.oc-select__popover .ovui-checkbox:not(.ovui-checkbox--disabled).ovui-checkbox--indeterminate .ovui-checkbox__inner,
.oc-select__popover .ovui-checkbox:not(.ovui-checkbox--disabled).ovui-checkbox--checked .ovui-checkbox__inner,
.oc-select__popover .ovui-checkbox:not(.ovui-checkbox--disabled).ovui-checkbox--indeterminate .ovui-checkbox__inner:hover,
.oc-select__popover .ovui-checkbox:not(.ovui-checkbox--disabled).ovui-checkbox--checked .ovui-checkbox__inner:hover {
  border-color: #323335;
  background-color: #323335;
}
.oc-select__popover .ovui-checkbox.ovui-checkbox--disabled.ovui-checkbox--indeterminate .ovui-checkbox__inner,
.oc-select__popover .ovui-checkbox.ovui-checkbox--disabled.ovui-checkbox--checked .ovui-checkbox__inner {
  border-color: #bfc1c5;
  background-color: #bfc1c5;
}
.oc-select__popover .filter-wrapper {
  padding: 12px;
  display: flex;
  flex-direction: column;
}
.oc-select__popover .filter-wrapper-input {
  display: flex;
  align-items: center;
}
.oc-select__popover .filter-wrapper .search-input-suffix {
  margin-left: 8px;
}
.oc-select__popover .filter-wrapper .search-input-footer {
  margin-top: 8px;
}
.oc-select__popover .oc-rolling-load .ovui-infinite-scroll {
  overflow-y: unset;
}
.oc-select-check-all {
  padding: 6px 12px;
}
.oc-select-check-all .ovui-checkbox {
  width: 100%;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-rolling-load {
  width: 100%;
  height: 100%;
  overflow: scroll;
  position: relative;
}
.oc-rolling-load .ovui-infinite-scroll {
  overscroll-behavior: none;
}
.oc-rolling-load .oc-rolling-load-content {
  height: 100%;
}
.oc-rolling-load::-webkit-scrollbar {
  display: none;
}
.oc-rolling-load__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 80px 0;
}
.oc-rolling-load__append {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 8px 0;
}
.oc-rolling-load__append-text {
  margin-left: 4px;
}
.oc-rolling-load__append-xl .ovui-inline-spin {
  height: 56px;
}
.oc-rolling-load__append-lg .ovui-inline-spin {
  height: 36px;
}
.oc-rolling-load__append-md .ovui-inline-spin {
  height: 18px;
}
.oc-rolling-load__append-sm .ovui-inline-spin {
  height: 14px;
}
.oc-rolling-load__append-xs .ovui-inline-spin {
  height: 12px;
}
.oc-rolling-load .ovui-spin__content .ovui-inline-spin {
  height: 18px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-empty {
  min-height: 74px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.oc-empty__icon {
  width: 42px;
  height: 42px;
}
.oc-empty__img-md {
  width: 200px;
  height: 118px;
}
.oc-empty__img-sm {
  width: 120px;
  height: 70px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-group-row-desc {
  display: flex;
  align-items: center;
  flex-direction: row;
  margin-top: 2px;
  gap: 0 12px;
}
.oc-group-row-group-title .oc-space-item {
  width: 100%;
}
.oc-group-row-group-title .oc-group-row-title {
  display: flex;
  align-items: center;
}
.oc-group-row-group-title .oc-group-row-title-title {
  flex: 1;
}
.oc-group-row-group-title .oc-group-row-title-tags {
  display: flex;
  align-items: center;
}
.oc-group-row-group-title .oc-group-row-title-tags .oc-tag {
  margin-right: 8px;
}
.oc-group-row-group-title .oc-group-row-title-left-tags {
  display: flex;
  align-items: center;
}
.oc-group-row-group-title .oc-group-row-title-left-tags .oc-tag {
  margin-left: 8px;
  margin-right: 0;
}
.oc-group-row-group-prefix .oc-tag {
  margin-right: 4px;
}
.oc-group-row-group-prefix .oc-tag:last-child {
  margin-right: 0px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-flex {
  display: flex !important;
}
.oc-flex-right {
  justify-content: flex-end;
  text-align: right;
}
.oc-item-group {
  align-items: center;
}
.oc-item-group-disabled {
  cursor: not-allowed;
}
.oc-item-group-prefix,
.oc-item-group-suffix {
  display: flex;
  flex-wrap: nowrap;
  align-self: center;
  list-style: none;
}
.oc-item-group-content {
  flex: 1;
}
.oc-item-group-content-title {
  line-height: 0;
}
.oc-item-group-content-description {
  margin-top: 2px;
}
.oc-item-group-title,
.oc-item-group-description {
  align-items: center;
}
.oc-item-group-prefix:not(:last-child) {
  margin-right: 8px;
}
.oc-item-group-suffix:not(:first-child) {
  margin-left: 4px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-key-value {
  display: flex;
}
.oc-key-value-disabled {
  cursor: not-allowed;
}
.oc-key-value:has(.oc-key-value-top) {
  flex-direction: column;
}
.oc-key-value-key:has(.oc-key-value-top) + .oc-key-value-value {
  margin-top: 4px;
}
.oc-key-value-key {
  flex: none;
}
.oc-key-value-right {
  display: flex;
  justify-content: flex-end;
}
.oc-key-value-value {
  margin-left: 16px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-promotion-status-tag {
  display: flex;
  gap: 4px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-button-dropdown-wrapper {
  display: inline-flex;
}
.oc-button-dropdown-button .ovui-button {
  min-width: 68px !important;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.oc-button-dropdown-dropdown {
  margin-left: 1px;
  line-height: 0;
}
.oc-button-dropdown-dropdown .ovui-button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-card--sticky {
  position: sticky;
  top: 0;
  z-index: 1;
}
.oc-card-trans {
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.oc-card-shadow {
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
}
.oc-card-fixed {
  padding: 0 24px !important;
}
.oc-card-fixed .oc-card-content {
  height: 64px;
  display: flex;
  align-items: center;
}
.oc-card-gradient {
  position: relative;
  border: 1px solid #302842;
  background-size: 100% 120px;
  background-position: 0 0;
  background-repeat: no-repeat;
  backdrop-filter: blur(2px);
}
.oc-card-gradient.oc-card-scheme-primary {
  background-image: linear-gradient(180deg, #eff5ff 0%, rgba(239, 245, 255, 0) 100%);
}
.oc-card-gradient.oc-card-scheme-success {
  background-image: linear-gradient(180deg, #e9f8f1 0%, rgba(233, 248, 241, 0) 100%);
}
.oc-card-gradient.oc-card-scheme-danger {
  background-image: linear-gradient(180deg, #fdf2f2 0%, rgba(253, 242, 242, 0) 100%);
}
.oc-card-gradient.oc-card-scheme-warning {
  background-image: linear-gradient(180deg, #fff5d0 0%, rgba(255, 245, 208, 0) 100%);
}
.oc-card-gradient.oc-card-scheme-default {
  background-image: --;
}
.oc-card-gradient-fill,
.oc-card-direction-horizontal {
  background-size: 100% 100%;
}
.oc-card-direction-horizontal {
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.oc-card-direction-horizontal.oc-card-scheme-primary {
  background-image: linear-gradient(90deg, #e9eeff 0%, #d1ddff 100%);
}
.oc-card-direction-horizontal.oc-card-scheme-success {
  background-image: linear-gradient(90deg, #e3ffed 0%, #5bd8a8 100%);
}
.oc-card-direction-horizontal.oc-card-scheme-danger {
  background-image: linear-gradient(90deg, #ffede3 0%, #ffc3c3 100%);
}
.oc-card-direction-horizontal.oc-card-scheme-warning {
  background-image: linear-gradient(90deg, #fff4e4 0%, #ffe5a1 100%);
}
.oc-card-direction-horizontal.oc-card-scheme-default {
  background-image: --;
}
.oc-card-wrapper {
  width: 100%;
  padding: 24px;
  box-sizing: border-box;
  position: relative;
  border-radius: inherit;
}
.oc-card-header {
  min-height: 24px;
  position: relative;
}
.oc-card-header__main-with-close {
  margin-right: 24px;
}
.oc-card-header__close {
  position: absolute;
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.5);
  top: 2px;
  right: 0;
  cursor: pointer;
  z-index: 1;
  display: flex;
  align-content: center;
  justify-content: center;
}
.oc-card-header__close:hover {
  color: #651dff;
}
.oc-card-wrapper-extra {
  position: relative;
  z-index: 2;
}
.oc-card-extra {
  background-image: linear-gradient(90deg, #e9eeff 0%, #d1ddff 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.oc-card-extra-top {
  margin-bottom: -12px;
  padding: 8px 24px 20px 24px;
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.oc-card-extra-bottom {
  margin-top: -12px;
  padding: 20px 24px 8px 24px;
  border-radius: inherit;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  position: relative;
  z-index: 1;
}
.oc-card--border {
  border: 1px solid #ffffff;
}
.oc-card--border .oc-card-extra {
  border: none;
}
.oc-card--scheme-default.oc-card--border {
  border: 1.5px solid rgba(255, 255, 255, 0.25);
}
.oc-card--scheme-default.oc-card--border .oc-card-extra {
  background: #261d38;
}
.oc-card--scheme-primary.oc-card--border {
  border: 1.5px solid rgba(101, 29, 255, 0.1);
}
.oc-card--scheme-primary.oc-card--border .oc-card-extra {
  background: #381088;
}
.oc-card--scheme-success.oc-card--border {
  border: 1.5px solid rgba(0, 213, 164, 0.1);
}
.oc-card--scheme-success.oc-card--border .oc-card-extra {
  background: rgba(0, 213, 164, 0.08);
}
.oc-card--scheme-danger.oc-card--border {
  border: 1.5px solid rgba(255, 0, 96, 0.1);
}
.oc-card--scheme-danger.oc-card--border .oc-card-extra {
  background: rgba(255, 0, 96, 0.06);
}
.oc-card--scheme-warning.oc-card--border {
  border: 1.5px solid rgba(255, 124, 0, 0.1);
}
.oc-card--scheme-warning.oc-card--border .oc-card-extra {
  background: rgba(255, 124, 0, 0.08);
}
.oc-card .oc-card-body {
  border-top: 1px solid #ffffff;
  padding-top: 24px;
  padding-bottom: 24px;
  flex: 0;
  line-height: 1;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.ovui-cascader__popper .ovui-cascader-search__filter {
  padding: 12px;
  border-bottom: 1px solid #ffffff;
}
.ovui-cascader__popper .ovui-cascader-search__filter .ovui-input__wrapper,
.ovui-cascader__popper .ovui-cascader-search__filter .ovui-input__wrapper--md,
.ovui-cascader__popper .ovui-cascader-search__filter .ovui-input__wrapper--clearable,
.ovui-cascader__popper .ovui-cascader-search__filter .ovui-input__wrapper--noborder {
  border-radius: 24px;
  border-bottom: none;
  height: 32px;
  border: 1px solid transparent;
  background-color: #261d38;
  color: #ffffff;
}
@keyframes bui-input-focus-effect_primary {
  from {
    box-shadow: 0 0 0 0 #651dff;
  }
  to {
    box-shadow: 0 0 0 2px rgba(101, 29, 255, 0.2);
  }
}
.ovui-cascader__popper .ovui-cascader-search__filter .ovui-input__wrapper:hover,
.ovui-cascader__popper .ovui-cascader-search__filter .ovui-input__wrapper--md:hover,
.ovui-cascader__popper .ovui-cascader-search__filter .ovui-input__wrapper--clearable:hover,
.ovui-cascader__popper .ovui-cascader-search__filter .ovui-input__wrapper--noborder:hover {
  color: #ffffff;
  border-color: #651dff;
  transition: all 0.1s ease-in-out;
}
.ovui-cascader__popper .ovui-cascader-search__filter .ovui-input__wrapper--focused,
.ovui-cascader__popper .ovui-cascader-search__filter .ovui-input__wrapper--md--focused,
.ovui-cascader__popper .ovui-cascader-search__filter .ovui-input__wrapper--clearable--focused,
.ovui-cascader__popper .ovui-cascader-search__filter .ovui-input__wrapper--noborder--focused {
  color: #ffffff;
  background-color: #1a112e;
  border-color: #651dff;
  box-shadow: 0 0 0 2px rgba(101, 29, 255, 0.2);
  animation: bui-input-focus-effect_primary 0.1s ease-in-out;
}
.oc-row-cascader .ovui-cascader-panel .ovui-cascader-panel__main {
  min-width: unset !important;
  width: calc(100% - 216px);
}
.oc-row-cascader .ovui-cascader-panel .ovui-cascader-panel__selection-header {
  white-space: nowrap;
  background-color: #261d38;
}
.oc-row-cascader .ovui-cascader-exb {
  min-width: 200px;
}
.oc-row-cascader .ovui-cascader-exb .ovui-cascader-exb__header {
  background-color: #261d38;
}
.ovui-cascader-panel .oc-row-cascader-list-with-title {
  height: auto;
  max-height: 235px;
}
.ovui-cascader-panel .oc-row-cascader-list {
  height: auto;
  max-height: 195px;
}
.ovui-cascader-panel__list-wrapper .ovui-cascader-panel__placeholder .ovui-empty {
  margin: 30px 0;
}
.ovui-cascader__empty {
  min-width: 200px;
}
.oc-row-cascader-disabled .ovui-cascader-exb__item .ovui-cascader-exb__close:hover {
  cursor: not-allowed;
}
.oc-cascader-tag {
  flex: 1;
  min-width: 60px;
  max-width: 90px;
  justify-content: space-between;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-chart-base {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.oc-chart-base-empty {
  display: flex;
  align-items: center;
}
.oc-chart-base-select-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.oc-chart-base-select-container .select-container {
  position: relative;
  margin-right: 24px;
  display: flex;
  align-items: center;
}
.oc-chart-base-select-container .select-container:last-child {
  margin-right: 0;
}
.oc-chart-base-select-container .select-container .color {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background-color: #651dff;
  margin-right: 4px;
}
.oc-chart-base-select-container .select-container .shape-circle {
  border-radius: 5px;
}
.oc-chart-base-select-container .select-container .shape-rect {
  height: 4px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-ratio-chart-empty {
  display: flex;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-trend-chart-empty {
  display: flex;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-chart-trend-nodes-empty {
  display: flex;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-collapse {
  display: flex;
  flex-direction: column;
  position: relative;
}
.oc-collapse__container {
  transition: all 0.2s ease-in-out;
  overflow: hidden;
}
.oc-collapse__button {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.oc-collapse__button.oc-collapse__button-reverse {
  flex-direction: row-reverse;
}
.oc-collapse__button-text {
  margin: 0 4px;
}
.oc-collapse__button:hover {
  color: #651dff;
}
.oc-collapse__wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 12px;
  line-height: 20px;
  color: #ffffff;
  border-radius: 8px;
}
.oc-collapse__wrapper-primary {
  color: #651dff;
}
.oc-collapse__wrapper-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 0;
  background-color: #261d38;
  cursor: pointer;
  border-radius: 8px;
}
.oc-collapse__wrapper-card:hover {
  background-color: #1a112e;
}
.oc-collapse__wrapper-card .oc-collapse__button {
  width: 100%;
  text-align: center;
  justify-content: center;
}
.oc-collapse__wrapper-bottom,
.oc-collapse__wrapper-top {
  justify-content: center;
}
.oc-collapse__wrapper-bottom-start,
.oc-collapse__wrapper-top-start {
  justify-content: flex-start;
}
.oc-collapse__wrapper-bottom-end,
.oc-collapse__wrapper-top-end {
  justify-content: flex-end;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-color-picker {
  cursor: pointer;
  height: 32px;
  border-radius: 24px;
  background-color: #261d38;
  display: flex;
  justify-content: space-between;
  padding: 6px 8px;
}
.oc-color-picker[disabled="disabled"] {
  cursor: not-allowed;
  background-color: #302842;
  opacity: 0.5;
}
.oc-color-picker[error="error"] {
  background-color: rgba(255, 0, 96, 0.06);
}
.oc-color-picker-selected {
  display: flex;
  align-items: center;
}
.oc-color-picker-selected-text {
  margin-left: 8px;
  color: #ffffff;
  font-size: 14px;
}
.oc-color-picker-placeholder {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  line-height: 22px;
}
.oc-color-picker-wrap {
  position: relative;
  display: inline-block;
  padding: 4px 44px 4px 4px;
  cursor: pointer;
  width: 100%;
  min-height: 100%;
}
.oc-color-picker-wrap .oc-color-option {
  vertical-align: top;
  margin: 0;
  padding: 0;
}
.oc-color-picker-wrap .oc-color-picker-icon-wrap {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 16px;
  height: 16px;
  line-height: 0;
}
.oc-color-picker-wrap .oc-color-picker-icon {
  display: inline-block;
  width: 100%;
  height: 100%;
  transform: rotate(0deg);
  transition: transform 0.2s ease;
  fill: #999999;
}
.oc-color-picker-wrap .oc-color-picker-icon.oc-color-picker-icon-open {
  transform: rotate(180deg);
}
.oc-color-option {
  display: inline-block;
  cursor: pointer;
  position: relative;
  width: 16px;
  height: 16px;
  margin: 2px;
  border-radius: 8px;
}
.oc-color-option .oc-color-option-block {
  outline: 2px solid #e0e0e0;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 3;
  border-radius: 8px;
}
.oc-color-option .oc-color-option-icon-close {
  fill: #999999;
  display: none;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.oc-color-option.oc-color-option-none .oc-color-option-block {
  background-color: rgba(0, 0, 0, 0);
}
.oc-color-option.oc-color-option-none .oc-color-option-icon-close {
  display: block;
}
.oc-color-option.active .oc-color-option-block {
  outline-color: rgba(101, 29, 255, 0.34) !important;
}
.oc-color-option.oc-color-option-xs {
  width: 16px;
  height: 16px;
}
.oc-color-option.oc-color-option-sm {
  width: 20px;
  height: 20px;
}
.oc-color-option.oc-color-option-md {
  width: 24px;
  height: 24px;
}
.oc-color-option.oc-color-option-lg {
  width: 28px;
  height: 28px;
}
.oc-color-option.oc-color-option-xl {
  width: 32px;
  height: 32px;
}
.oc-color-picker-popper {
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15);
  width: 256px;
  background-color: rgba(0, 0, 0, 0);
  padding: 8px;
  margin-top: 4px;
  border-radius: 24px;
}
.oc-color-picker-popper-fade-enter-active,
.oc-color-picker-popper-fade-leave-active {
  transition: opacity 0.1s ease-in-out;
}
.oc-color-picker-popper-fade-enter-from,
.oc-color-picker-popper-fade-leave-to {
  opacity: 0;
}
.oc-color-picker-popper-fade-enter-to,
.oc-color-picker-popper-fade-leave-from {
  opacity: 1;
}
.oc-color-picker-popper .oc-saturation-wrap {
  width: 100%;
  padding-bottom: 75%;
  position: relative;
  overflow: hidden;
}
.oc-color-picker-popper .oc-color-sliders-wrap {
  margin-top: 12px;
}
.oc-color-picker-popper .oc-color-sliders-wrap .oc-hue-wrap {
  position: relative;
  height: 8px;
}
.oc-color-picker-popper .oc-color-sliders-wrap .oc-alpha-wrap {
  position: relative;
  height: 8px;
  margin-top: 8px;
  overflow: hidden;
}
.oc-color-picker-popper .oc-color-value-field {
  margin-top: 12px;
}
.oc-color-picker-popper .oc-color-value-field-prefix-text {
  color: #ffffff;
  font-size: 14px;
  margin-left: 8px;
}
.oc-color-picker-popper .oc-color-value-field-rgba {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}
.oc-color-picker-popper .oc-color-value-field-rgba-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.oc-color-picker-popper .oc-color-value-field-rgba-item .ovui-input-number {
  padding-right: 8px;
}
.oc-color-picker-popper .oc-color-value-field-rgba-item .ovui-input-number .ovui-input {
  font-size: 14px;
}
.oc-color-picker-popper .oc-color-value-field-rgba-item input {
  text-align: center;
}
.oc-color-picker-popper .oc-color-value-field-rgba-item-text {
  font-size: 14px;
  line-height: 22px;
  color: #000;
  margin-top: 2px;
}
.oc-color-picker-popper .oc-color-option-predefine {
  border-top: 1px solid #ebebed;
  padding-top: 12px;
  margin-top: 12px;
  font-size: 0;
}
.oc-color-picker-popper .oc-color-option-predefine-title {
  font-size: 12px;
  line-height: 20px;
  color: #ffffff;
}
.oc-color-picker-popper .oc-color-option-predefine .oc-color-options {
  margin-top: 9px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 11.4px;
}
.oc-color-picker-popper .oc-color-option-predefine .oc-color-options :not(.active) .oc-color-option-block:hover {
  outline-color: #dfe0e2 !important;
}
.oc-color-picker-popper .oc-color-picker-confirm-btn {
  text-align: right;
  margin-top: 12px;
}
.oc-color-picker-popper .oc-color-picker-confirm-btn button {
  min-width: 40px;
}
.oc-color-picker-popper .oc-color-picker-confirm-btn button:first-child {
  margin-right: 8px;
}
.oc-checkerboard {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  border-radius: 8px;
}
.oc-alpha {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}
.oc-alpha-checkboard-wrap {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow: hidden;
  border-radius: 8px;
}
.oc-alpha-gradient {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  border-radius: 8px;
}
.oc-alpha-container {
  cursor: pointer;
  position: relative;
  height: 100%;
  margin: 0 2px;
}
.oc-alpha-container .oc-alpha-pointer {
  z-index: 2;
  position: absolute;
}
.oc-alpha-container .oc-alpha-picker {
  cursor: pointer;
  width: 8px;
  border-radius: 50%;
  height: 8px;
  border: 2px solid rgba(0, 0, 0, 0);
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15);
  transform: translateX(-4px);
}
.oc-hue {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  border-radius: 8px;
}
.oc-hue--horizontal {
  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.oc-hue---vertical {
  background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.oc-hue-container {
  cursor: pointer;
  margin: 0 2px;
  position: relative;
  height: 100%;
}
.oc-hue-pointer {
  z-index: 2;
  position: absolute;
}
.oc-hue-picker {
  cursor: pointer;
  width: 8px;
  border-radius: 50%;
  height: 8px;
  border: 2px solid rgba(0, 0, 0, 0);
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.15);
  transform: translateX(-2px);
}
.oc-saturation,
.oc-saturation--white,
.oc-saturation--black {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.oc-saturation .oc-saturation--white {
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}
.oc-saturation .oc-saturation--black {
  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}
.oc-saturation .oc-saturation-pointer {
  cursor: pointer;
  position: absolute;
}
.oc-saturation .oc-saturation-circle {
  cursor: head;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0);
  transform: translate(-4px, -4px);
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-date-picker-group {
  display: flex;
  align-items: center;
}
.oc-date-picker-group .oc-date-picker-prepend {
  position: relative;
}
.oc-date-picker-group .oc-date-picker-prepend,
.oc-date-picker-group .oc-date-picker-prepend * {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.oc-date-picker-group .oc-date-picker-prepend::after {
  content: "";
  width: 1px;
  height: 16px;
  position: absolute;
  display: block;
  background-color: #dfe0e2;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1;
}
.oc-date-picker-group .oc-date-picker-prepend:has([class*="--focused"]),
.oc-date-picker-group .oc-date-picker-prepend:has([class*="--error"]),
.oc-date-picker-group .oc-date-picker-prepend:hover {
  z-index: 3;
}
.oc-date-picker-group .oc-date-picker-prepend:has([class*="--focused"])::after,
.oc-date-picker-group .oc-date-picker-prepend:has([class*="--error"])::after,
.oc-date-picker-group .oc-date-picker-prepend:hover::after {
  width: 0;
}
.oc-date-picker-group.oc-date-picker-group-has-prepend > :not(:first-child),
.oc-date-picker-group.oc-date-picker-group-has-prepend > :not(:first-child) * {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.oc-date-picker-shortcut {
  max-height: 270px;
}
.oc-date-picker-shortcut-item {
  width: 100px;
  font-size: 12px;
}
.oc-date-picker-multiple-date-selected-panel {
  display: inline-flex;
  margin-left: 8px;
  vertical-align: top;
}
.oc-row > .ovui-date-picker-panel .ovui-date__header {
  background-color: #261d38;
  height: 38px;
}
oc-multiple-date-panel {
  display: inline-block;
  vertical-align: top;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-selected-panel {
  border-radius: 24px;
  border: 1px solid #ffffff;
  background: white;
  height: 280px;
  display: flex;
  flex-direction: column;
}
.oc-selected-panel-title {
  line-height: 38px;
  display: flex;
  justify-content: space-between;
  height: 38px;
  background: #261d38;
  padding: 0 12px;
  border-bottom: 1px solid #ffffff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 24px 24px 0 0;
}
.oc-selected-panel-tabs {
  padding: 12px 12px 0 12px;
}
.oc-selected-panel-body {
  position: relative;
  overflow: auto;
  padding: 12px;
  padding-bottom: 12px;
  flex: 1;
}
.oc-selected-panel-body-slot {
  padding: 0;
  padding-bottom: 12px;
}
.oc-selected-panel-body-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-drag-list {
  display: flex;
  box-sizing: border-box;
  gap: 8px;
  flex-wrap: wrap;
  flex-direction: row;
}
.oc-drag-list-vertical {
  flex-direction: column;
}
.oc-drag-list-item {
  position: relative;
}
.oc-drag-list-item-content {
  padding: 6px 12px;
  background-color: #261d38;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.oc-drag-list-item-has-children.oc-drag-list-sortable-ghost > .oc-drag-list-item-children,
.oc-drag-list-item-has-children.oc-drag-list-sortable-drag > .oc-drag-list-item-children {
  display: none;
}
.oc-drag-list-item-children {
  margin: 8px 0 0 36px;
  position: relative;
}
.oc-drag-list-item-children:not(.oc-drag-list-sortable-drag)::before {
  content: "";
  position: absolute;
  left: -16px;
  top: -8px;
  width: 16px;
  height: var(--oc-drag-list-children-mark-height);
  border-left: 1px solid #dfe0e2;
}
.oc-drag-list-item-children > .oc-drag-list > .oc-drag-list-item:not(.oc-drag-list-sortable-drag)::before {
  content: "";
  position: absolute;
  left: -16px;
  bottom: 50%;
  width: 16px;
  height: 8px;
  border: 1px solid #dfe0e2;
  border-right: 0;
  border-top: 0;
  border-radius: 0 0 0 8px;
}
.oc-drag-list-item-fade-enter-active,
.oc-drag-list-item-fade-leave-active {
  transition: all 0.1s ease-in-out;
}
.oc-drag-list-item-fade-enter-from,
.oc-drag-list-item-fade-leave-to {
  opacity: 0;
  max-height: 0;
}
.oc-drag-list-item-fade-enter-to,
.oc-drag-list-item-fade-leave-from {
  max-height: 32px;
  opacity: 1;
}
.oc-drag-list-item-draggable {
  cursor: move;
}
.oc-drag-list-item-disabled {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.5);
}
.oc-drag-list-item-icon,
.oc-drag-list-item-close {
  align-self: center;
  display: flex;
  align-items: center;
}
.oc-drag-list-item-icon:hover,
.oc-drag-list-item-close:hover {
  color: #ffffff;
}
.oc-drag-list-item-main {
  flex: 1;
  overflow: hidden;
}
.oc-drag-list-item-close {
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-tabs {
  display: flex;
  align-items: center;
}
.oc-tabs .ovui-tabs__tab {
  padding: 4px 0;
}
.oc-tabs-primary .tab--active {
  color: #651dff !important;
}
.oc-tabs__md .ovui-tabs__tab {
  font-size: 14px;
  line-height: 22px;
  margin-right: 24px;
}
.oc-tabs__lg .ovui-tabs__tab {
  line-height: 24px;
  margin-right: 32px;
}
.oc-tabs__lg.oc-tabs__card .ovui-tabs__tab {
  line-height: 28px;
}
.oc-tabs__xl .ovui-tabs__tab {
  font-size: 18px;
  line-height: 28px;
  margin-right: 32px;
}
.oc-tabs__xl.oc-tabs__card .ovui-tabs__tab {
  line-height: 28px;
}
.oc-tabs .row {
  display: flex;
  align-items: center;
}
.oc-tabs .row .tab-icon {
  margin-right: 4px;
}
.oc-tabs .row .after-tab-icon {
  margin-left: 4px;
}
.oc-tabs .ovui-tabs .ovui-tabs__tab-close {
  line-height: 0;
}
.oc-tabs .tab--active {
  color: #ffffff;
}
.oc-tabs .ovui-tabs__tab--active .ovui-tabs__tab-close {
  color: #ffffff;
}
.oc-tabs__card .ovui-tabs > .ovui-tabs__nav {
  background-color: #261d38;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.oc-tabs__line .oc-tabs-hide-line .ovui-tabs__nav::before {
  display: none;
}
.oc-tabs__line .oc-tabs-hide-active-line .ovui-tabs__bar {
  display: none;
}
.oc-tabs__align .ovui-tabs .ovui-tabs__extra-content {
  flex: 1;
  display: inline-flex;
}
.oc-tabs__align-center .ovui-tabs .ovui-tabs__extra-content {
  justify-content: center;
}
.oc-tabs__align-end .ovui-tabs .ovui-tabs__extra-content {
  justify-content: flex-end;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-new-badge {
  position: relative;
  display: flex;
  align-items: center;
}
.oc-new-badge .oc-new-badge-point {
  width: 6px;
  height: 6px;
  background: #ff0060;
  border-radius: 50%;
}
.oc-new-badge:has(.oc-new-badge-point-right-top) {
  align-items: flex-start;
}
.oc-new-badge .oc-new-badge-count {
  background: #ff0060;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-weight: 500;
  color: rgba(0, 0, 0, 0);
  height: 16px;
  border: 1px solid rgba(0, 0, 0, 0);
}
.oc-new-badge .oc-new-badge-count-xs {
  width: 16px;
  border-radius: 50%;
}
.oc-new-badge .oc-new-badge-count-sm {
  width: 20px;
  border-radius: 10px;
}
.oc-new-badge .oc-new-badge-count-md {
  width: 27px;
  border-radius: 10px;
}
.oc-new-badge-right-top:has(.oc-new-badge-count) {
  width: -moz-fit-content;
  width: fit-content;
}
.oc-new-badge-right-top .oc-new-badge-count-right-top {
  position: absolute;
  top: -11px;
}
.oc-new-badge-right-top .oc-new-badge-count {
  box-sizing: content-box;
}
.oc-new-badge-right-top .oc-new-badge-count-xs {
  right: -8px;
}
.oc-new-badge-right-top .oc-new-badge-count-sm {
  right: -12px;
}
.oc-new-badge-right-top .oc-new-badge-count-md {
  right: -19px;
}
.oc-new-badge-right .oc-new-badge-count {
  border: none;
}
.oc-new-badge .oc-new-badge-point-right,
.oc-new-badge .oc-new-badge-count-right,
.oc-new-badge .oc-new-badge-icon-right {
  margin-left: 4px;
}
.oc-new-badge .oc-new-badge-icon-right {
  font-size: 0;
}
.oc-new-badge .oc-new-badge-point-left {
  margin-right: 4px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-detail-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #302842;
  border-radius: 32px;
  margin-bottom: 16px;
}
.oc-detail-bar .oc-detail-bar-text {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: -4px;
  line-height: 48px;
  margin-right: -32px;
}
.oc-detail-bar .oc-detail-bar-text .oc-detail-bar-config-item {
  display: flex;
  margin-right: 32px;
  margin-bottom: 4px;
}
.oc-detail-bar .oc-detail-bar-text .oc-detail-bar-config-item:last-child {
  margin-right: 0;
}
.oc-detail-bar .oc-detail-bar-text .oc-detail-bar-config-item .oc-detail-bar-config-item-label {
  margin-right: 8px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.ovui-drawer__wrap .oc-drawer-header-fix {
  padding: 0px 24px;
}
.ovui-drawer__wrap .oc-drawer-header-custom {
  height: auto;
}
.ovui-drawer__header {
  border-bottom: 1px solid #1a112e;
}
.oc-drawer-header {
  min-height: 64px;
  width: 100%;
  display: flex;
  align-items: center;
}
.oc-drawer-header-icon {
  margin-right: 16px;
}
.oc-drawer-header-extra {
  flex: 1;
  justify-content: flex-end;
  display: inline-flex;
}
.oc-drawer-header-tabs {
  height: 100%;
  display: flex;
}
.oc-drawer-header-title {
  height: 100%;
  display: flex;
  align-items: center;
  justify-self: center;
  font-weight: bolder;
}
.oc-drawer-header-title .after-title-icon {
  margin-left: 4px;
}
.oc-drawer-body-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.oc-drawer-body-wrap .oc-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: -32px;
  top: 13px;
  width: 32px;
  height: 32px;
  border-radius: 8px 0 0 8px;
  background: #651dff;
}
.oc-drawer-body-wrap .oc-drawer-close:hover {
  cursor: pointer;
}
.oc-drawer-body-wrap .oc-default-slot {
  flex: 1;
  overflow: auto;
  padding: 16px;
  overscroll-behavior: none;
}
.oc-drawer-body-wrap .oc-drawer-footer {
  height: 64px;
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 24px;
  background-color: #302842;
}
.oc-drawer-body-wrap .oc-drawer-footer .left-footer-wrap {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
}
.oc-drawer-body-wrap .oc-drawer-footer .oc-footer-btn {
  display: inline-block;
}
.oc-drawer-body-wrap .oc-drawer-footer .oc-button-wrap {
  margin-left: 16px;
}
.ovui-drawer__header {
  height: 64px;
  border-bottom: none;
}
.ovui-drawer--left .oc-drawer-close {
  right: -32px;
  left: inherit;
  border-radius: 0 4px 4px 0;
}
.oc-drawer-body {
  padding: 0px;
  background: rgba(42, 85, 229, 0.06);
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-error-mesasage {
  display: flex;
  font-size: 12px;
  align-items: center;
}
.oc-error-mesasage .oc-error-mesasage-error {
  line-height: 20px;
  max-height: 40px;
}
.oc-error-mesasage .oc-error-mesasage-error .oc-error-mesasage-error-message {
  color: #ff0060;
  float: left;
  height: 20px;
  line-height: 20px;
}
.oc-error-mesasage .oc-error-mesasage-error .oc-error-mesasage-all {
  color: #651dff;
  cursor: pointer;
}
.oc-error-mesasage .oc-error-mesasage-error .oc-error-mesasage-all:hover {
  background: rgba(227, 73, 73, 0.3);
}
.oc-error-mesasage .oc-error-mesasage-warning .oc-error-mesasage-error-message {
  color: #ff7c00;
}
.oc-error-mesasage-error-number,
.oc-error-mesasage-error-all {
  color: #651dff;
  cursor: pointer;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-group-number-val-xl {
  font-size: 32px;
}
.oc-group-number-tail-xl {
  font-size: 24px;
}
.oc-group-number .oc-typography {
  display: inline-block;
}
.oc-group-number-suffix {
  display: inline-flex;
  margin-left: 2px;
}
.oc-group-number-unit {
  position: relative;
  top: 0.5px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-image {
  border-radius: 24px;
  background-color: #261d38;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
}
.oc-image.oc-image-circle {
  border-radius: 50%;
}
.oc-image.oc-image-scroll {
  align-items: flex-start;
}
.oc-image-img {
  width: 100%;
  transition-duration: 0s;
  margin-top: 0px;
}
.oc-image-img img {
  -o-object-fit: contain;
     object-fit: contain;
  vertical-align: middle;
}
.oc-image-img-error {
  visibility: hidden;
}
.oc-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #dfe0e2;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-image-group-preview .ovui-image-group {
  display: none;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-layout {
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: auto;
  min-height: 0;
  min-height: 100vh;
  width: 100vw;
}
.oc-layout .oc-sticky {
  position: sticky;
  top: 16px;
}
.oc-layout .oc-sticky-right {
  top: 0;
}
.oc-layout__wrapper {
  padding: 16px 24px;
  flex: 1;
}
.oc-layout__main {
  display: flex;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
.oc-layout__main-left-sider {
  flex: none;
  position: relative;
  z-index: 2;
}
.oc-layout__main-wrapper {
  flex: 1;
  display: flex;
  flex-direction: row;
  position: relative;
  z-index: 1;
  overflow-x: hidden;
}
.oc-layout__main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
.oc-layout__main-wrapper-fixed .oc-layout__main-content {
  flex: none;
  width: calc(100% - var(--rightSpace));
}
.oc-layout__main-wrapper-fixed .oc-sticky-right {
  position: absolute;
  right: 0;
}
.oc-layout-header-sticky {
  height: 100vh;
}
.oc-layout-header-sticky .oc-sticky {
  top: 0;
}
.oc-layout-header-sticky .oc-layout__main-wrapper {
  height: calc(100vh - var(--headerHeight));
  overflow: auto;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-left-menu {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 16px 0px 0px 16px;
  height: 100%;
}
.oc-left-menu__continer {
  position: relative;
}
.oc-left-menu__continer__item {
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.5);
}
.oc-left-menu__continer__item__unactive:hover {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 16px 0px 0px 16px;
  cursor: pointer;
}
.oc-left-menu__continer__item__active {
  color: #651dff;
  position: relative;
  z-index: 1;
  background: #302842;
  border-radius: 16px 0px 0px 16px;
}
.oc-left-menu__continer__item__disabled {
  color: rgba(255, 255, 255, 0.5);
  opacity: 0.5;
  background: transparent;
}
.oc-left-menu__continer__item__disabled:hover {
  background: transparent;
  border-radius: 0;
  cursor: not-allowed;
}
.oc-left-menu__continer__item__icon {
  margin-bottom: 4px;
}
.oc-left-menu__continer__block {
  width: 100%;
  height: 80px;
  background: #302842;
  border-radius: 12px 0px 0px 12px;
  position: absolute;
  top: 0;
  transition: transform 0.2s ease-in-out;
}
.oc-left-menu__continer__block-empty-text {
  height: 60px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
@property --oc-loading-move-1-x-position {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 93.75%;
}
@property --oc-loading-move-1-y-position {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 8.33%;
}
@property --oc-loading-move-2-x-position {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --oc-loading-move-2-y-position {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --oc-loading-move-3-x-position {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 78.47%;
}
@property --oc-loading-move-3-y-position {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -11.81%;
}
@property --oc-loading-move-4-x-position {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --oc-loading-move-4-y-position {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --oc-loading-move-5-x-position {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --oc-loading-move-5-y-position {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@keyframes move-gradient {
  50% {
    --oc-loading-move-1-x-position: 65.71%;
    --oc-loading-move-1-y-position: 15.98%;
    --oc-loading-move-2-x-position: 107.27%;
    --oc-loading-move-2-y-position: 72.95%;
    --oc-loading-move-3-x-position: 11.01%;
    --oc-loading-move-3-y-position: 124.51%;
    --oc-loading-move-4-x-position: 71.68%;
    --oc-loading-move-4-y-position: -14.1%;
    --oc-loading-move-5-x-position: 0%;
    --oc-loading-move-5-y-position: 100%;
  }
  75% {
    --oc-loading-move-1-x-position: 53.69%;
    --oc-loading-move-1-y-position: 111.56%;
    --oc-loading-move-2-x-position: 44.03%;
    --oc-loading-move-2-y-position: -9.59%;
    --oc-loading-move-3-x-position: 94.33%;
    --oc-loading-move-3-y-position: 148.93%;
    --oc-loading-move-4-x-position: 46.12%;
    --oc-loading-move-4-y-position: 120.33%;
    --oc-loading-move-5-x-position: 51.6%;
    --oc-loading-move-5-y-position: 88.2%;
  }
  100% {
    --oc-loading-move-1-x-position: 93.75%;
    --oc-loading-move-1-y-position: 8.33%;
    --oc-loading-move-2-x-position: 0%;
    --oc-loading-move-2-y-position: 100%;
    --oc-loading-move-3-x-position: 78.47%;
    --oc-loading-move-3-y-position: -11.81%;
    --oc-loading-move-4-x-position: 0%;
    --oc-loading-move-4-y-position: 0%;
    --oc-loading-move-5-x-position: 100%;
    --oc-loading-move-5-y-position: 88.2%;
  }
}
@keyframes moveRight {
  0% {
    transform: skewX(-25deg) translateX(-100%);
  }
  100% {
    transform: skewX(-25deg) translateX(100%);
  }
}
@keyframes loadingMoveRightReset {
  0% {
    transform: translateX(-100%) scaleX(1);
  }
  100% {
    /* scaleX 目标宽度百分比 ÷ 基准宽度百分比(20%) */
    /* translateX 父容器宽度 ÷ 元素基准宽度 */
    transform: translateX(500%) scaleX(2.5);
  }
}
.oc-loading-gradient-bar-wrapper {
  clip-path: inset(0 round 8px);
}
.oc-loading {
  position: relative;
  /* 移动的彩色条 */
}
.oc-loading .oc-loading-gradient-bar {
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  height: 2px;
  overflow: hidden;
  background: linear-gradient(125.44deg, rgba(71, 215, 250, 0.08) 1.2%, rgba(59, 126, 244, 0.08) 35.8%, rgba(184, 78, 241, 0.08) 60.25%, rgba(243, 85, 193, 0.08) 80.04%, rgba(249, 131, 95, 0.08) 96.99%);
}
.oc-loading .oc-loading-moving-gradient {
  position: absolute;
  bottom: 0;
  height: 100%;
  width: 20%;
  background: linear-gradient(90deg, rgba(71, 215, 250, 0) 0%, #3B7EF4 29.65%, #B84EF1 60.72%, #F355C1 80.59%, rgba(249, 131, 95, 0) 100%);
  animation: loadingMoveRightReset 1.2s ease-out infinite;
  transform-origin: left center;
}
.oc-loading .loading-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.oc-loading .loading-content-float {
  position: absolute;
  top: 0;
  left: 0;
  justify-content: center;
}
.oc-loading .loading-content-column-ai-light,
.oc-loading .loading-content-column-ai-light-sync {
  overflow: hidden;
  background-color: #F8FBFF;
}
.oc-loading .loading-content-column-ai-card {
  border-radius: 8px;
  background: linear-gradient(125deg, #F0FCFF 1.2%, #EFF5FE 35.8%, #F9F1FE 60.25%, #FEF1FA 80.04%, #FFF5F2 96.99%);
}
.oc-loading .loading-content-column-ai-card .oc-loading-spin-mask {
  background: none;
}
.oc-loading .loading-content-column-ai-light::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 288px;
  height: 100%;
  background: linear-gradient(289deg, rgba(237, 242, 255, 0.64) 37.69%, rgba(237, 242, 255, 0) 72.92%);
  filter: blur(10px);
  animation: moveRight 2s linear infinite;
}
.oc-loading .loading-content-column-ai-light-sync::after {
  content: '';
  position: absolute;
  z-index: 1;
  background-color: #ff0000;
  width: var(--shine-canvas-width);
  height: var(--shine-canvas-height);
  background: linear-gradient(90deg, rgba(237, 242, 255, 0) 37.69%, rgba(237, 242, 255, 0.64) 72.92%);
  background-size: 288px 100%;
  background-repeat: no-repeat;
  transform: skewX(-25deg) scaleX(var(--shine-skew-scale-x));
  left: var(--shine-offset-x);
  top: var(--shine-offset-y);
  animation: move-shine-background var(--shine-duration) linear infinite;
  filter: blur(10px);
}
.oc-loading .loading-content .oc-loading-inline {
  display: flex;
  align-items: center;
}
.oc-loading .loading-content .ovui-spin__content {
  align-items: center;
  flex-direction: column;
}
.oc-loading .loading-content .loading-text {
  margin-left: 4px;
  white-space: nowrap;
}
.oc-loading .oc-loading-spin-mask {
  background-color: rgba(255, 255, 255, var(--oc-loading-opacity));
}
.oc-loading .oc-loading-spin-ai-card .ovui-spin__content {
  align-items: center;
  flex-direction: row;
  left: 24px;
  transform: translate(0%, -50%);
}
.oc-loading .oc-loading-spin-ai-card .ovui-spin__content .loading-scene-text {
  margin-left: 4px;
  margin-top: 0;
}
.oc-loading .oc-loading-spin-mask-ai-heavy {
  background-color: #f8fbff;
  animation-name: move-gradient;
  animation-iteration-count: infinite;
  animation-duration: 8s;
  transition-timing-function: linear;
}
.oc-loading .loading-scene-text {
  margin-top: 4px;
}
.oc-loading .loading-dots {
  margin-left: 4px;
}
.oc-loading .loading-dots-item:nth-child(2) {
  opacity: 0;
  animation: ellipsis-blink2 1s infinite;
}
.oc-loading .loading-dots-item:nth-child(3) {
  opacity: 0;
  animation: ellipsis-blink3 1s infinite;
}
.oc-loading .loading-dots-item-ai {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.oc-loading .loading-dots-item-ai:nth-child(1) {
  background-image: linear-gradient(135deg, #42acf8 0%, #3e8af6 100%);
}
.oc-loading .loading-dots-item-ai:nth-child(2) {
  background-image: linear-gradient(135deg, #407df4 0%, #666ef3 100%);
}
.oc-loading .loading-dots-item-ai:nth-child(3) {
  background-image: linear-gradient(135deg, #7767f3 0%, #9f58f2 100%);
}
@keyframes ellipsis-blink2 {
  0% {
    opacity: 0;
  }
  33% {
    opacity: 1;
  }
  67% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes ellipsis-blink3 {
  0% {
    opacity: 0;
  }
  33% {
    opacity: 0;
  }
  67% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes move-shine-background {
  0% {
    background-position-x: -288px;
  }
  100% {
    background-position-x: calc(100% + 150px);
  }
}
@keyframes v-ocean-spin-loading-rotate {
  to {
    transform: rotate(360deg);
  }
}
.oc-loading-icon {
  color: #7433ff;
  display: inline-flex;
  transform: rotate(0);
  animation: v-ocean-spin-loading-rotate 0.8s infinite linear;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-progress {
  display: flex;
  align-items: center;
}
.oc-progress-block {
  height: 20px;
}
.oc-progress-chart {
  flex: 1;
}
.oc-progress-content {
  margin-left: 12px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-media-upload-card {
  width: 160px;
  height: 160px;
}
.oc-media-upload-wrapper .oc-media-upload-button {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}
.oc-media-upload-wrapper .oc-media-upload-button .oc-media-upload-tip {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  margin-left: 8px;
}
.oc-media-upload-wrapper .oc-media-upload-list {
  display: flex;
  flex-wrap: wrap;
  margin-left: -16px;
}
.oc-media-upload-wrapper .oc-media-upload-list .oc-media-upload-card {
  margin-left: 16px;
  margin-bottom: 16px;
}
.oc-media-upload-wrapper .oc-media-upload-list-no-margin-top {
  margin-top: 0px;
}
.oc-media-upload-wrapper .oc-media-upload-button-no-margin-bottom {
  margin-bottom: 0px;
}
.oc-file-select-card-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  background: #261d38;
  display: flex;
  align-items: center;
  justify-content: center;
}
.oc-file-select-card-wrapper:hover .oc-file-select-card-del {
  display: block;
}
.oc-file-select-card-wrapper .oc-file-select-card-del {
  position: absolute;
  top: -6px;
  right: -6px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  display: none;
}
.oc-file-select-card-wrapper .oc-file-select-card-add {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-size: 14px;
  color: #ffffff;
}
.oc-file-select-card-wrapper .oc-file-select-card-add .oc-file-select-card-add-text {
  margin-top: 8px;
}
.oc-file-select-card-wrapper .oc-file-select-card-uploading {
  max-width: 80%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-size: 14px;
  color: #ffffff;
}
.oc-file-select-card-wrapper .oc-file-select-card-uploading .oc-file-select-card-uploading-text {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin: 8px 0 0 0;
}
.oc-file-select-card-wrapper .oc-file-select-card-error {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  font-size: 14px;
  padding: 0 16px;
}
.oc-file-select-card-wrapper .oc-file-select-card-error .oc-file-select-card-error-icon {
  margin-bottom: 8px;
  color: #ff0060;
}
.oc-file-select-card-wrapper:hover {
  cursor: pointer;
}
.oc-file-select-card-wrapper:hover .oc-file-select-card-add {
  color: #651dff;
}
.oc-file-select-card-error {
  background: rgba(255, 0, 96, 0.06);
}
.oc-file-select-card-disabled {
  background: #302842;
}
.oc-file-select-card-disabled .oc-file-select-card-add {
  color: rgba(255, 255, 255, 0.25);
}
.oc-file-select-card-disabled:hover {
  cursor: not-allowed;
}
.oc-file-select-card-disabled:hover .oc-file-select-card-add {
  color: rgba(255, 255, 255, 0.25);
}
.ovui-image-preview {
  z-index: 999999;
}
.ovui-image-preview__img {
  max-width: calc(100% - 120px);
  max-height: calc(100% - 120px);
}
.oc-media-upload-preview-card-wrapper {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  position: relative;
  background-color: #261d38;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.oc-media-upload-preview-card-wrapper:hover .oc-media-upload-preview-card-del {
  display: block;
}
.oc-media-upload-preview-card-wrapper:hover .oc-media-upload-preview-card-operate {
  display: flex;
}
.oc-media-upload-preview-card-wrapper:hover .oc-media-upload-preview-card-play {
  display: none;
}
.oc-media-upload-preview-card-wrapper .ovui-image {
  position: absolute;
  width: 0;
  height: 0;
}
.oc-media-upload-preview-card-wrapper .oc-media-upload-preview-card-del {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 3;
  color: rgba(0, 0, 0, 0);
  cursor: pointer;
  display: none;
}
.oc-media-upload-preview-card-wrapper .oc-media-upload-preview-card-play {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  z-index: 1;
  color: rgba(0, 0, 0, 0);
}
.oc-media-upload-preview-card-wrapper .oc-media-upload-preview-card-operate {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 24px;
  background-color: rgba(26, 26, 27, 0.5);
  color: #302842;
  display: flex;
  align-items: center;
  justify-content: center;
  display: none;
  z-index: 2;
}
.oc-media-upload-preview-card-wrapper .oc-media-upload-preview-card-operate .oc-media-upload-preview-card-operate-icon {
  margin-left: 16px;
  cursor: pointer;
}
.oc-media-upload-preview-card-wrapper .oc-media-upload-preview-card-operate .oc-media-upload-preview-card-operate-icon:first-child {
  margin-left: 0;
}
.oc-audio-upload {
  margin-left: 16px;
  margin-bottom: 8px;
  position: relative;
  width: 100%;
}
.oc-audio-upload__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 320px;
  height: 32px;
  padding: 5px 8px;
  padding-right: 32px;
  border-radius: 8px;
  background-color: #261d38;
  position: relative;
}
.oc-audio-upload__info__delete__hide {
  padding-right: 8px;
}
.oc-audio-upload__info__name {
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 14px;
  overflow: hidden;
  flex: 1;
}
.oc-audio-upload__info__name iconpark-icon {
  margin-right: 8px;
}
.oc-audio-upload__info__name__text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
  width: calc(100% - 40px);
}
.oc-audio-upload__info__name__text__fail {
  color: #ff0060;
}
.oc-audio-upload__info__uploading,
.oc-audio-upload__info__success,
.oc-audio-upload__info__fail {
  display: flex;
  align-items: center;
}
.oc-audio-upload__info__fail .oc-fail-tips {
  color: #ff0060;
  font-size: 12px;
}
.oc-audio-upload__info__delete {
  width: 16px;
  height: 16px;
  cursor: pointer;
  position: absolute;
  right: 8px;
  color: rgba(255, 255, 255, 0.5);
}
.oc-audio-upload__after {
  position: absolute;
  left: 320px;
  top: 0;
}
.oc-file-select-card-uploading-text {
  color: #651dff;
  font-size: 12px;
  margin-left: 8px;
}
.oc-audio-upload {
  margin-left: 16px;
  margin-bottom: 8px;
  width: 100%;
}
.oc-audio-upload__info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 320px;
  height: 32px;
  padding: 5px 8px;
  padding-right: 32px;
  border-radius: 24px;
  background-color: #261d38;
  position: relative;
}
.oc-audio-upload__info__delete__hide {
  padding-right: 8px;
}
.oc-audio-upload__info__name {
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 14px;
  overflow: hidden;
  flex: 1;
}
.oc-audio-upload__info__name iconpark-icon {
  margin-right: 8px;
}
.oc-audio-upload__info__name__text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
  width: calc(100% - 40px);
}
.oc-audio-upload__info__uploading,
.oc-audio-upload__info__success,
.oc-audio-upload__info__fail {
  display: flex;
  align-items: center;
}
.oc-audio-upload__info__fail .fail-tips {
  color: #ff0060;
  font-size: 12px;
}
.oc-audio-upload__info__delete {
  width: 16px;
  height: 16px;
  cursor: pointer;
  position: absolute;
  right: 8px;
}
.oc-audio-upload__after {
  position: absolute;
  left: 320px;
  top: 0;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-modal-wrap .ovui-modal {
  max-height: calc(100% - 80px) !important;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
}
.oc-modal-wrap .ovui-modal .ovui-modal__close-icon {
  color: #969aa0;
}
.oc-modal-wrap .ovui-modal .ovui-modal__close-icon:hover {
  color: #651dff;
  cursor: pointer;
}
.oc-modal-wrap .ovui-modal__header-info {
  margin-top: -3px;
}
.oc-modal-wrap .ovui-modal__header-success {
  margin-top: -3px;
}
.oc-modal-wrap .ovui-modal__header-warning {
  margin-top: -3px;
}
.oc-modal-wrap .ovui-modal__header-error {
  margin-top: -3px;
}
.oc-modal-wrap .ovui-modal__close-icon {
  top: 24px;
}
.oc-modal-wrap .ovui-modal__body {
  flex: 1;
  overflow: auto;
  font-size: 14px;
  line-height: normal !important;
  color: #ffffff;
}
.oc-modal-wrap .ovui-modal__body .oc-modal-confirm-body-with-icon {
  padding-left: unset;
}
.oc-modal-wrap .ovui-modal__body-with-status {
  padding-left: 24px;
}
.oc-modal-wrap .ovui-modal__footer-btn-box .ovui-button--md {
  min-width: 88px;
}
.oc-modal-wrap .oc-modal-footer {
  display: flex;
  justify-content: flex-end;
}
.oc-modal-wrap .oc-modal-footer .oc-button-wrap:nth-of-type(1) {
  margin-right: 8px;
}
.oc-modal-wrap .ovui-modal__header {
  font-weight: bolder;
  display: flex;
  align-items: center;
}
.oc-modal-wrap .ovui-modal__header .oc-icon-success {
  color: #00d5a4;
}
.oc-modal-wrap .ovui-modal__header .oc-icon-info {
  color: #651dff;
}
.oc-modal-wrap .ovui-modal__header .oc-icon-danger,
.oc-modal-wrap .ovui-modal__header .oc-icon-close-one {
  color: #ff0060;
}
.oc-modal-wrap .ovui-modal__header .oc-icon-warning {
  color: #ff7c00;
}
.oc-modal-wrap .ovui-modal__footer {
  min-height: 80px;
}
.oc-modal-wrap .oc-modal-body {
  padding: 0 !important;
}
.oc-modal-wrap .oc-modal-header-icon {
  margin-right: 8px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-radio--blue {
  /* 以下逻辑，是复制 okee 内部代码删减后得到，请尽量保持与 okee 同步
  okee 中有特别支持的 light 主题样式，此处 default 下不支持 light 模式 */
}
.oc-radio--blue .ovui-radio {
  /* 禁用 + 选中 */
}
.oc-radio--blue .ovui-radio:not(.ovui-radio--disabled) {
  /* 未禁用 + 未选中 */
  /* 未禁用 + 选中 */
}
.oc-radio--blue .ovui-radio:not(.ovui-radio--disabled) .ovui-radio__inner:hover {
  border-color: #651dff;
}
.oc-radio--blue .ovui-radio:not(.ovui-radio--disabled).ovui-radio--checked .ovui-radio__inner,
.oc-radio--blue .ovui-radio:not(.ovui-radio--disabled).ovui-radio--checked .ovui-radio__inner:hover {
  border-color: #651dff;
  background-color: #651dff;
}
.oc-radio--blue .ovui-radio.ovui-radio--disabled.ovui-radio--checked .ovui-radio__inner {
  border-color: rgba(101, 29, 255, 0.34);
  background-color: rgba(101, 29, 255, 0.34);
}
.oc-radio__popover-wrap {
  display: inline-flex;
  margin-left: 4px;
}
.oc-radio__popover-wrap > .oc-popover {
  display: inline-flex;
}
.oc-radio {
  display: inline-flex;
}
.oc-radio .ovui-radio > .ovui-radio__label {
  display: flex;
  align-items: center;
}
.oc-radio--no-label .ovui-radio > .ovui-radio__label {
  margin: 0;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-radio-group__hint-wrap {
  display: inline-flex;
  margin-left: 4px;
}
.oc-radio-group__hint-wrap > .oc-popover {
  display: inline-flex;
  align-items: center;
}
.oc-radio-group__item-prefix-icon {
  margin-right: 4px;
}
.oc-radio-group__item-suffix-msg {
  margin-left: 4px;
}
.oc-radio-group__item-count {
  margin: auto 0 auto 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  color: rgba(0, 0, 0, 0);
  font-size: 10px;
  text-align: center;
  font-weight: 500;
  line-height: 14px;
  background-color: rgba(255, 255, 255, 0.5);
}
.oc-radio-group__item-tag {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 9;
}
.oc-radio-group-plain .ovui-radio-group {
  flex-wrap: wrap;
}
.oc-radio-group-plain-blue .ovui-radio--checked .ovui-radio__inner,
.oc-radio-group-plain-blue .ovui-radio--checked .ovui-radio__inner:hover {
  background-color: #651dff;
  border-color: #651dff;
}
.oc-radio-group-plain-blue .ovui-radio__inner:hover {
  border-color: #651dff;
}
.oc-radio-group-plain-blue .ovui-radio--disabled.ovui-radio--checked .ovui-radio__inner,
.oc-radio-group-plain-blue .ovui-radio--disabled.ovui-radio--checked .ovui-radio__inner:hover {
  background-color: rgba(101, 29, 255, 0.34);
  border-color: rgba(101, 29, 255, 0.34);
}
.oc-radio-group {
  display: inline-flex;
  align-items: center;
}
.oc-radio-group .ovui-radio-item-group {
  flex-wrap: wrap;
  margin-top: -8px;
}
.oc-radio-group .ovui-radio__label {
  display: inline-flex;
  align-items: center;
}
.oc-radio-group .ovui-radio-item {
  min-width: 88px;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
}
.oc-radio-group .ovui-radio-item:last-child .oc-radio-group__item-tag {
  border-top-right-radius: 4px;
  overflow: hidden;
}
.oc-radio-group .ovui-radio-item--disabled .oc-radio-group__item-count {
  background-color: rgba(255, 255, 255, 0.5) !important;
}
.oc-radio-group .ovui-radio-item:hover .oc-radio-group__item-count {
  background-color: #651dff;
}
.oc-radio-group .ovui-radio-item:hover .oc-dropdown-button-container .ovui-button,
.oc-radio-group .ovui-radio-item:hover .oc-dropdown-button-container .ovui-button:hover {
  color: #651dff;
}
.oc-radio-group .ovui-radio-item--checked .oc-radio-group__item-count {
  background-color: #651dff;
}
.oc-radio-group .only-icon {
  min-width: 32px;
  min-height: 32px;
  padding: 8px;
  margin-right: 0 !important;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-range-picker-group {
  display: flex;
  align-items: center;
}
.oc-range-picker-group .oc-range-picker-prepend {
  position: relative;
}
.oc-range-picker-group .oc-range-picker-prepend,
.oc-range-picker-group .oc-range-picker-prepend * {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.oc-range-picker-group .oc-range-picker-prepend::after {
  content: "";
  width: 1px;
  height: 16px;
  position: absolute;
  display: block;
  background-color: #dfe0e2;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1;
}
.oc-range-picker-group .oc-range-picker-prepend:has([class*="--focused"]),
.oc-range-picker-group .oc-range-picker-prepend:has([class*="--error"]),
.oc-range-picker-group .oc-range-picker-prepend:hover {
  z-index: 3;
}
.oc-range-picker-group .oc-range-picker-prepend:has([class*="--focused"])::after,
.oc-range-picker-group .oc-range-picker-prepend:has([class*="--error"])::after,
.oc-range-picker-group .oc-range-picker-prepend:hover::after {
  width: 0;
}
.oc-range-picker-group.oc-range-picker-group-has-prepend > :not(:first-child),
.oc-range-picker-group.oc-range-picker-group-has-prepend > :not(:first-child) * {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0;
}
.oc-range-picker-shortcut {
  max-height: 270px;
}
.oc-range-picker-shortcut-item {
  width: 100px;
  font-size: 12px;
}
.oc-ranger-picker-light .ovui-custom-input--fill {
  background-color: #fff;
}
.oc-range-picker .ovui-range-picker {
  display: flex;
}
.oc-range-picker .ovui-range-picker .ovui-custom-input__prefix {
  color: #ffffff;
}
.oc-range-picker .ovui-range-picker .ovui-custom-input--disabled .ovui-input__wrapper--unstyle {
  color: rgba(255, 255, 255, 0.25);
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-result {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.oc-result-info {
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.oc-result-btns {
  display: flex;
  margin-bottom: 40px;
}
.oc-result-btns > :not(:last-child) {
  margin-right: 16px;
}
.oc-result-details-title {
  margin-bottom: 8px;
}
.oc-result-details-wrapper {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.oc-result-details-wrapper > :not(:nth-child(2n)) {
  margin-right: 44px;
}
.oc-result-details-wrapper > :last-child {
  margin-right: 0;
}
.oc-result-details-wrapper-card {
  width: calc((100% - 44px) / 2);
  margin-bottom: 16px;
  background-color: #302842;
  padding: 16px;
  border-radius: 32px;
  display: flex;
}
.oc-result-details-wrapper-card-img {
  width: 80px;
  height: 80px;
  margin-right: 24px;
}
.oc-result-details-wrapper-card-info-title {
  margin-bottom: 8px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-row-schedule .ovui-schedule__week-title {
  padding: 0 10px;
  text-wrap: nowrap;
}
.oc-row-schedule .ovui-schedule__week-title .ovui-checkbox {
  display: flex;
  align-items: center;
}
.oc-row-schedule-disabled .ovui-schedule__empty {
  display: none;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-side-bar {
  position: relative;
  transition: width 0.2s;
}
.oc-side-bar-heder {
  margin-bottom: 8px;
}
.oc-side-bar-footer {
  margin-top: 8px;
}
.oc-side-bar .ovui-menu {
  width: 100%;
  background-color: inherit;
}
.oc-side-bar .ovui-popup__mask {
  display: none;
}
.oc-side-bar-collapse-button {
  position: absolute;
  right: 8px;
  bottom: 16px;
  max-width: calc(100% - 32px);
  border-radius: 24px;
  background-color: #fff;
  cursor: pointer;
  color: #ffffff;
  padding: 0 8px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.oc-side-bar-collapse-button:hover {
  color: #651dff;
}
.oc-side-bar-collapse-button__text {
  font-size: 14px;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}
.oc-side-bar .ovui-menu {
  padding-right: 12px;
  overflow-y: auto;
  height: 100%;
}
.oc-side-bar .ovui-menu-item,
.oc-side-bar .ovui-menu-content,
.oc-side-bar .ovui-sub-menu__header {
  height: 40px;
  border-radius: 32px;
  transition: padding-left 0.2s;
}
.oc-side-bar .ovui-menu--collapsed .ovui-menu-content,
.oc-side-bar .ovui-menu--collapsed .ovui-sub-menu__header {
  padding-left: 12px !important;
}
.oc-side-bar .ovui-menu-content {
  padding-right: 8px;
}
.oc-side-bar .ovui-menu-content__icon,
.oc-side-bar .ovui-sub-menu__icon {
  color: rgba(255, 255, 255, 0.5);
}
.oc-side-bar .ovui-menu-item,
.oc-side-bar .ovui-sub-menu {
  margin-bottom: 8px;
}
.oc-side-bar .ovui-menu-item:last-child,
.oc-side-bar .ovui-sub-menu:last-child {
  margin-bottom: 0;
}
.oc-side-bar .ovui-menu-content:hover .ovui-menu-content__icon {
  color: #651dff;
}
.oc-side-bar .ovui-menu-content:hover {
  background-color: rgba(42, 85, 229, 0.06);
}
.oc-side-bar .ovui-menu--collapsed .ovui-sub-menu:hover {
  background-color: rgba(42, 85, 229, 0.06);
  border-radius: 32px;
}
.oc-side-bar .ovui-menu--collapsed .ovui-sub-menu-active,
.oc-side-bar .ovui-menu--collapsed .ovui-sub-menu-active:hover,
.oc-side-bar .ovui-menu-content--active,
.oc-side-bar .ovui-menu-content--active:hover {
  background-color: #302842;
  border-radius: 32px;
}
.oc-side-bar .ovui-menu--collapsed .ovui-sub-menu-active .ovui-menu-content__icon,
.oc-side-bar .ovui-menu--collapsed .ovui-sub-menu-active:hover .ovui-menu-content__icon,
.oc-side-bar .ovui-menu-content--active .ovui-menu-content__icon,
.oc-side-bar .ovui-menu-content--active:hover .ovui-menu-content__icon {
  color: #651dff;
}
.oc-side-bar .ovui-sub-menu .ovui-sub-menu__header:hover {
  color: #651dff;
}
.oc-side-bar .ovui-sub-menu .ovui-sub-menu__header:hover .ovui-sub-menu__icon {
  color: #651dff;
}
.oc-side-bar .ovui-sub-menu .ovui-sub-menu__header {
  color: #ffffff;
}
.oc-side-bar .ovui-sub-menu-active .ovui-sub-menu__header {
  color: #651dff;
}
.oc-side-bar .ovui-sub-menu-active .ovui-sub-menu__header .ovui-sub-menu__icon {
  color: #651dff;
}
.oc-side-bar .ovui-sub-menu__list .ovui-menu-content {
  padding-left: 40px !important;
}
.oc-side-bar-item {
  display: flex;
}
.oc-side-bar-item-icon {
  margin-left: 4px;
}
.oc-side-bar-item-disabled .ovui-menu-content,
.oc-side-bar-item-disabled .ovui-menu-content:hover {
  color: rgba(255, 255, 255, 0.25);
  cursor: not-allowed;
  background-color: inherit;
}
.oc-side-bar-item-disabled .ovui-menu-content__icon {
  color: rgba(255, 255, 255, 0.25);
}
.oc-side-bar-item-last {
  margin-bottom: 0 !important;
}
.ovui-menu-popper__inner {
  border-radius: 32px;
  min-width: 180px;
}
.ovui-menu-popper__inner .ovui-sub-menu__popper-title {
  height: 30px;
  margin-bottom: 15px;
}
.ovui-menu-popper__inner .ovui-menu-item {
  height: 30px;
  margin-bottom: 10px;
}
.ovui-menu-popper__inner .ovui-sub-menu__list {
  margin: 0;
  padding: 8px;
}
.ovui-menu-popper__inner .ovui-menu-content {
  height: 30px;
  border-radius: 24px;
}
.ovui-menu-popper__inner .ovui-menu-content:hover {
  background-color: #261d38;
}
.ovui-menu-popper__inner .ovui-menu-content--active {
  background-color: inherit;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-skeleton-animation .oc-skeleton-shape,
.oc-skeleton-animation .oc-skeleton-line-row {
  background: linear-gradient(90deg, rgba(38, 29, 56, 0.5) 25%, #261d38 37%, rgba(38, 29, 56, 0.5) 63%);
  background-size: 300% 100%;
  animation: oc-skeleton-circle 1.5s cubic-bezier(0, 0, 1, 1) infinite;
}
.oc-skeleton-animation .oc-skeleton-shape-dark,
.oc-skeleton-animation .oc-skeleton-line-row-dark {
  background: linear-gradient(90deg, rgba(38, 29, 56, 0.5) 25%, #1a112e 37%, rgba(38, 29, 56, 0.5) 63%);
  background-size: 300% 100%;
  animation: oc-skeleton-circle 1.5s cubic-bezier(0, 0, 1, 1) infinite;
}
@keyframes oc-skeleton-circle {
  from {
    background-position: 100% 50%;
  }
  to {
    background-position: 0% 50%;
  }
}
.oc-skeleton-line {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.oc-skeleton-line-row {
  background-color: #261d38;
  border-radius: 2px;
  height: 16px;
}
.oc-skeleton-line-row-dark {
  background-color: #1a112e;
}
.oc-skeleton-shape {
  background-color: #261d38;
}
.oc-skeleton-shape-dark {
  background-color: #1a112e;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-splitter {
  display: flex;
  width: 100%;
  height: 100%;
}
.oc-splitter--horizontal {
  flex-direction: row;
}
.oc-splitter--horizontal > .oc-splitter__handle {
  width: 0px;
}
.oc-splitter--horizontal > .oc-splitter__handle::before {
  width: 4px;
  height: 100%;
}
.oc-splitter--horizontal > .oc-splitter__handle::after {
  width: 2px;
  height: 32px;
}
.oc-splitter--horizontal > .oc-splitter__handle .oc-splitter__handle-touch-zone {
  cursor: col-resize;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--oc-splitter-touch-zone-size) / 2);
  right: calc(-1 * var(--oc-splitter-touch-zone-size) / 2);
}
.oc-splitter--vertical {
  flex-direction: column;
}
.oc-splitter--vertical > .oc-splitter__handle {
  height: 0px;
}
.oc-splitter--vertical > .oc-splitter__handle::before {
  height: 4px;
  width: 100%;
}
.oc-splitter--vertical > .oc-splitter__handle::after {
  height: 2px;
  width: 32px;
}
.oc-splitter--vertical > .oc-splitter__handle .oc-splitter__handle-touch-zone {
  cursor: row-resize;
  left: 0;
  right: 0;
  top: calc(-1 * var(--oc-splitter-touch-zone-size) / 2);
  bottom: calc(-1 * var(--oc-splitter-touch-zone-size) / 2);
}
.oc-splitter__handle {
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.oc-splitter__handle--disabled {
  pointer-events: none;
}
.oc-splitter__handle-touch-zone {
  position: absolute;
  background-color: transparent;
}
.oc-splitter__handle::before {
  content: "";
  position: absolute;
  background-color: #261d38;
  border-radius: 2px;
}
.oc-splitter__handle:not(.oc-splitter__handle--disabled)::after {
  content: "";
  position: absolute;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 1px;
  pointer-events: none;
}
.oc-splitter__handle:hover::before {
  background-color: rgba(101, 45, 255, 0.08);
}
.oc-splitter__handle--dragging::before,
.oc-splitter__handle:hover::after,
.oc-splitter__handle--dragging::after {
  background-color: #651dff !important;
}
.oc-splitter__handle:hover:not(.oc-splitter__handle--dragging) .oc-splitter__handle-button {
  opacity: 1;
}
.oc-splitter__handle-button {
  opacity: 0;
  position: absolute;
  z-index: 1000;
  width: 18px;
  box-shadow: 0px 4px 12px 0px #00000014;
}
.oc-splitter__handle-button > button {
  min-width: 18px !important;
  height: 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
}
.oc-splitter__handle-button:hover {
  opacity: 1;
}
.oc-splitter--horizontal .oc-splitter__handle-button--prev {
  transform: translateX(-15px);
}
.oc-splitter--horizontal .oc-splitter__handle-button--collapsed.oc-splitter__handle-button--prev {
  transform: translateX(15px);
}
.oc-splitter--horizontal .oc-splitter__handle-button--next {
  transform: translateX(15px);
}
.oc-splitter--horizontal .oc-splitter__handle-button--collapsed.oc-splitter__handle-button--next {
  transform: translateX(-15px);
}
.oc-splitter--vertical .oc-splitter__handle-button--prev {
  transform: translateY(-15px) rotateZ(90deg);
}
.oc-splitter--vertical .oc-splitter__handle-button--collapsed.oc-splitter__handle-button--prev {
  transform: translateY(15px) rotateZ(90deg);
}
.oc-splitter--vertical .oc-splitter__handle-button--next {
  transform: translateY(15px) rotateZ(90deg);
}
.oc-splitter--vertical .oc-splitter__handle-button--collapsed.oc-splitter__handle-button--next {
  transform: translateY(-15px) rotateZ(90deg);
}
.oc-splitter-panel {
  overflow: hidden;
  flex: 1;
}
.oc-splitter-panel-sized {
  flex: 0 0 auto;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-statistic {
  display: inline-block;
  padding: 16px;
  border-radius: 24px;
}
.oc-statistic-border {
  padding: 15px;
  border: 1px solid var(--borderColor);
}
.oc-statistic.oc-statistic-inline {
  padding: 0;
}
.oc-statistic.oc-statistic-bg-default {
  background-color: #302842;
}
.oc-statistic.oc-statistic-bg-secondary {
  background-color: #f3f3f4;
}
.oc-statistic.oc-statistic-bg-primary {
  background-color: #381088;
}
.oc-statistic.oc-statistic-bg-danger {
  background-color: rgba(255, 0, 96, 0.06);
}
.oc-statistic.oc-statistic-bg-success {
  background-color: rgba(0, 213, 164, 0.08);
}
.oc-statistic.oc-statistic-bg-warning {
  background-color: rgba(255, 124, 0, 0.08);
}
.oc-statistic.oc-statistic-cursor {
  cursor: pointer;
}
.oc-statistic.oc-statistic-cursor:hover {
  background-color: var(--hoverBackgroundColor) !important;
}
.oc-statistic-title,
.oc-statistic-content,
.oc-statistic-extra {
  display: flex;
  align-items: center;
}
.oc-statistic-title {
  margin-bottom: 10px;
  justify-content: space-between;
}
.oc-statistic-title .oc-statistic-title-left {
  display: flex;
  align-items: center;
}
.oc-statistic-extra {
  margin-top: 7px;
  display: inline-flex;
  gap: 0 4px;
}
.oc-statistic-extra-suffix {
  font-size: 0;
}
.oc-statistic-content-prefix {
  margin-right: 4px;
  display: inline-flex;
}
.oc-statistic-content-suffix {
  margin-left: 8px;
  display: inline-flex;
}
.oc-statistic-content-suffix-wrap {
  margin-top: 8px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-sub-side-bar {
  padding: 16px 0;
  height: 100%;
  overflow: auto;
}
.oc-sub-side-bar-title {
  font-family: PingFang SC;
  font-size: 14px;
  font-style: normal;
  line-height: 32px;
  margin: 0;
  list-style: none;
  padding: 0;
  position: relative;
}
.oc-sub-side-bar-title li {
  margin: 0;
  position: relative;
}
.oc-sub-side-bar-title li .oc-sub-menu__list .oc-sub-side-bar-title__header {
  color: rgba(255, 255, 255, 0.75);
  padding: 0 16px 0 32px;
}
.oc-sub-side-bar-title .oc-sub-menu__list {
  padding: 0;
  overflow: hidden;
}
.oc-sub-side-bar-title-line {
  width: 2px;
  height: 32px;
  background-color: #651dff;
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  transition: all 0.1s ease-in-out;
}
.oc-sub-side-bar-item {
  padding: 0 16px;
  display: flex;
  align-items: center;
  height: 32px;
  transition: color 0.1s, background-color 0.1s;
}
.oc-sub-side-bar-item.cursor {
  cursor: pointer;
}
.oc-sub-side-bar-item.cursor:hover {
  background-color: #261d38;
}
.oc-sub-side-bar-item.active {
  color: #651dff;
}
.oc-sub-side-bar-item .oc-sub-side-bar-icon {
  margin-left: 6px;
}
.oc-sub-side-bar-item .badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #ff0060;
  margin-top: -20px;
}
.oc-sub-side-bar-item .num {
  text-align: right;
  flex: 1;
  font-size: 14px;
  line-height: 22px;
  color: #ffffff;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-switch {
  line-height: 0;
}
.oc-switch--blue .ovui-switch--checked {
  background: #651dff;
}
.oc-switch--blue .ovui-switch--checked .ovui-switch__thumb {
  color: #651dff;
}
.oc-switch--blue .ovui-switch--checked.ovui-switch--loading,
.oc-switch--blue .ovui-switch--checked.ovui-switch--disabled {
  background-color: rgba(101, 29, 255, 0.34);
}
.oc-switch--blue .ovui-switch--checked.ovui-switch--loading .ovui-switch__thumb,
.oc-switch--blue .ovui-switch--checked.ovui-switch--disabled .ovui-switch__thumb {
  color: rgba(101, 29, 255, 0.34);
}
.oc-switch--blue .oc-switch-truty {
  color: #651dff;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-switch-card-item {
  border-radius: 24px;
  position: relative;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  background-color: #261d38;
  border: 1px solid #261d38;
  height: 98px;
}
.oc-switch-card-item-header {
  display: flex;
  align-items: center;
}
.oc-switch-card-item-header .icon {
  margin-right: 4px;
}
.oc-switch-card-item-header-tag {
  margin-left: 4px;
}
.oc-switch-card-item-content {
  display: flex;
  flex-direction: column;
  padding: 11px 15px;
  position: relative;
  z-index: 10;
  flex: 1;
}
.oc-switch-card-item-content-align-baseline {
  align-items: baseline;
}
.oc-switch-card-item-content-align-start {
  align-items: flex-start;
}
.oc-switch-card-item-content-align-end {
  align-items: flex-end;
}
.oc-switch-card-item-content-align-center {
  align-items: center;
}
.oc-switch-card-item-badge {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
  background-color: #651dff;
  color: rgba(0, 0, 0, 0);
  border-radius: 0px 8px;
  padding: 0 4px;
  line-height: 20px;
  font-size: 12px;
  zoom: 0.8333;
}
.oc-switch-card-item-desc {
  margin-top: 4px;
}
.oc-switch-card-item-desc-space {
  padding-right: 56px;
}
.oc-switch-card-item-bg {
  width: 64px;
  height: 100%;
  flex: none;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 9;
  border-radius: 24px;
}
.oc-switch-card-item.small {
  height: 100%;
}
.oc-switch-card-item.xsmall {
  height: 100%;
}
.oc-switch-card-item.xsmall .oc-switch-card-item-content {
  padding: 11px 15px;
  flex: 1;
}
.oc-switch-card-item.xsmall .oc-switch-card-item-desc {
  margin-top: 4px;
}
.oc-switch-card-item--checked-icon {
  position: absolute;
  right: 4px;
  top: 1px;
  z-index: 11;
}
.oc-switch-card-item--help {
  position: absolute;
  right: -1px;
  top: -1px;
  z-index: 11;
}
.oc-switch-card-item--help .oc-tag-market .ovui-tag {
  border-radius: 0px 4px 0px 6px;
}
.oc-switch-card-item--market-bit {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: -8px;
  top: -8px;
  color: rgba(0, 0, 0, 0);
  font-size: 12px;
  line-height: 16px;
  height: 16px;
  background: linear-gradient(90deg, #ff4450 0%, #ff7a48 100%);
  border-radius: 8px 8px 8px 0px;
  padding: 0 4px;
}
.oc-switch-card-item--market-bit span {
  zoom: 83.33%;
}
.oc-switch-card-item.active {
  border: 1px solid #651dff;
  background-color: #302842;
}
.oc-switch-card-item.disabled {
  cursor: not-allowed;
  background-color: #302842;
  border: 1px solid #302842;
}
.oc-switch-card-item.disabled.active {
  border: 1px solid rgba(101, 29, 255, 0.34);
  background-color: #302842;
}
.oc-switch-card-item.disabled .ovui-checkbox.ovui-checkbox--checked .ovui-checkbox__inner,
.oc-switch-card-item.disabled .ovui-checkbox.ovui-checkbox--checked .ovui-checkbox__inner:hover {
  background-color: rgba(101, 29, 255, 0.34);
  border-color: rgba(101, 29, 255, 0.34);
}
.oc-switch-card-item.disabled .oc-switch-card-item-option-bg,
.oc-switch-card-item.disabled .icon {
  opacity: 0.5;
}
.oc-switch-card-item.disabled .oc-switch-card-item-badge {
  background-color: rgba(101, 29, 255, 0.34);
}
.oc-switch-card-item:hover:not(.active):not(.disabled) {
  background-color: #302842;
  border: 1px solid #302842;
}
.oc-switch-card-item-option-bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-table-wrapper {
  position: relative;
}
.oc-table-wrapper .ovui-t-summary .ovui-t-summary-cell {
  padding: 0px 16px;
  height: 42px;
  line-height: 18px;
  box-sizing: border-box;
  background-color: #302842;
}
.oc-table-wrapper .ovui-t-summary .ovui-t-summary-cell:hover {
  background-color: #302842;
}
.oc-table-wrapper .ovui-tr:hover .ovui-checkbox.ovui-checkbox--disabled:not(.ovui-checkbox--checked):not(.ovui-checkbox--indeterminate) .ovui-checkbox__inner {
  border-color: rgba(255, 255, 255, 0.25);
  background-color: rgba(255, 255, 255, 0.08);
}
.oc-table-wrapper .ovui-th__sorter {
  color: #969aa0;
  margin: 0 0 0 4px;
}
.oc-table-wrapper .ovui-th {
  font-weight: bolder;
  padding: 0px 16px;
  height: 42px;
  line-height: 18px;
  box-sizing: border-box;
}
.oc-table-wrapper .ovui-td {
  padding: 8px 16px;
  height: 42px;
}
.oc-table-wrapper .ovui-table__tree-icon {
  cursor: pointer;
}
.oc-table-wrapper .oc-table-pagination {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.oc-table-wrapper .oc-table-pagination .oc-table-pagination-item {
  margin-left: 8px;
}
.oc-table-wrapper .oc-table-pagination .oc-table-pagination-item .ovui-page-select {
  margin: 0;
}
.oc-table-wrapper .ovui-th__ocean-tree-col {
  padding-left: 46px !important;
}
.oc-table-wrapper .ovui-td__ocean-tree-child {
  background: #302842;
}
.oc-table-wrapper .ovui-td__ocean-tree-td .ovui-td__ocean-tree-td-wrap {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  height: 100%;
}
.oc-table-wrapper .ovui-td__ocean-tree-td .ovui-td__ocean-tree-td-wrap .ovui-table__tree-icon-wrapper {
  width: 14px;
  margin-right: 16px;
}
.oc-table-wrapper .ovui-td__ocean-tree-td .ovui-td__ocean-tree-td-wrap .ovui-table__tree-icon-wrapper .ovui-table__tree-icon {
  color: #ffffff;
  margin-right: unset;
}
.oc-table-loading-text {
  color: #651dff;
  font-size: 12px;
  line-height: 18px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-tag-input {
  position: relative;
}
.oc-tag-input .ovui-custom-input--md .ovui-custom-input__suffix {
  height: 24px;
}
.oc-tag-input .ovui-custom-input {
  cursor: text;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-textarea-plus-wrapper {
  position: relative;
}
.oc-textarea-plus-wrapper .oc-textarea-plus-operate {
  position: absolute;
  right: 16px;
  top: 8px;
}
.oc-textarea-plus-wrapper .oc-textarea-plus-operate .oc-textarea-plus-operate-btn {
  margin-left: 8px;
}
.oc-textarea-plus-wrapper .oc-textarea-plus-border {
  border-width: 1px;
  border-color: #dfe0e2;
}
.oc-textarea-plus-component {
  /* 组件头部高度 */
  --textarea-plus-header-height: 38px;
  /* 组件输入框高度 */
  --textarea-plus-input-height: 34px;
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  border: 1px solid #dfe0e2;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 24px;
  background-color: #302842;
  font-size: 14px;
  line-height: 22px;
  height: 320px;
}
.oc-textarea-plus-component__header {
  border-bottom: 1px solid #dfe0e2;
  background-color: #f4f4f5;
  height: var(--textarea-plus-header-height, 38px);
  padding: 0 12px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.oc-textarea-plus-component__title {
  font-weight: 600;
  flex: 1;
  text-align: left;
}
.oc-textarea-plus-component__clear {
  cursor: pointer;
  color: #651dff;
}
.oc-textarea-plus-component__clear:hover {
  color: #7433ff;
}
.oc-textarea-plus-component__container {
  flex: 1;
  overflow-y: auto;
}
.oc-textarea-plus-component__disabled {
  background: #302842;
  cursor: not-allowed;
}
.oc-textarea-plus-component__disabled .oc-textarea-plus-component__input {
  cursor: not-allowed;
}
.oc-textarea-plus-component__disabled .oc-textarea-plus-component__input-wrapper:hover {
  background: #302842;
}
.oc-textarea-plus-component__disabled .oc-textarea-plus-component__num {
  color: rgba(255, 255, 255, 0.25);
}
.oc-textarea-plus-component__body {
  display: flex;
  min-height: 100%;
}
.oc-textarea-plus-component__nums {
  flex-shrink: 0;
  border-right: 1px solid #dfe0e2;
  padding: 6px 0;
  min-width: 36px;
}
.oc-textarea-plus-component__num {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 8px;
  height: var(--textarea-plus-input-height, 34px);
  color: rgba(255, 255, 255, 0.5);
}
.oc-textarea-plus-component__num--error {
  color: rgba(0, 0, 0, 0);
}
.oc-textarea-plus-component__num--error::before {
  content: " ";
  position: absolute;
  background-color: #ff0060;
  top: 6px;
  bottom: 6px;
  left: 6px;
  right: 6px;
  border-radius: 2px;
}
.oc-textarea-plus-component__num--error::after {
  content: " ";
  position: absolute;
  background-color: #ff0060;
  top: 14px;
  right: 3px;
  width: 6px;
  height: 6px;
  border-top-right-radius: 2px;
  transform: rotate(45deg);
}
.oc-textarea-plus-component__num-content {
  z-index: 1;
}
.oc-textarea-plus-component__content {
  flex: 1;
  padding: 6px 0;
}
.oc-textarea-plus-component__input-wrapper {
  display: flex;
  height: var(--textarea-plus-input-height, 34px);
  align-items: center;
  align-self: stretch;
}
.oc-textarea-plus-component__input-wrapper .oc-textarea-plus-component__close {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 14px;
  height: 14px;
  font-size: 0;
  cursor: pointer;
  z-index: 1;
}
.oc-textarea-plus-component__input-wrapper .oc-textarea-plus-component__close svg {
  width: 14px;
  height: 14px;
}
.oc-textarea-plus-component__input-wrapper:hover {
  background-color: #261d38;
}
.oc-textarea-plus-component__input-wrapper:hover .oc-textarea-plus-component__close {
  display: block;
}
.oc-textarea-plus-component__input-wrapper:hover .oc-textarea-plus-component__close:hover svg path {
  color: #d220ff;
}
.oc-textarea-plus-component__input-wrapper:hover .oc-textarea-plus-component__length {
  opacity: 0;
}
.oc-textarea-plus-component__input-wrapper--focused {
  background-color: #261d38;
}
.oc-textarea-plus-component__input-wrapper--focused:hover .oc-textarea-plus-component__length {
  opacity: 0;
}
.oc-textarea-plus-component__input-wrapper--focused .oc-textarea-plus-component__length {
  opacity: 1;
}
.oc-textarea-plus-component__input {
  flex: 1;
  font-size: 14px;
  line-height: 22px;
  color: #ffffff;
  padding: 0 12px;
  outline: none;
  border: none;
  background: transparent;
}
.oc-textarea-plus-component__input--disabled {
  color: rgba(255, 255, 255, 0.25);
}
.oc-textarea-plus-component__input::-moz-placeholder {
  color: #d220ff;
}
.oc-textarea-plus-component__input::placeholder {
  color: #d220ff;
}
.oc-textarea-plus-component__input::-moz-placeholder {
  color: #d220ff;
  opacity: 1;
}
.oc-textarea-plus-component__input::-ms-input-placeholder {
  color: #d220ff;
}
.oc-textarea-plus-component__input::-webkit-input-placeholder {
  color: #d220ff;
}
.oc-textarea-plus-component__placeholder {
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: #d220ff;
  min-height: var(--textarea-plus-input-height, 34px);
}
.oc-textarea-plus-component__action-wrapper {
  position: relative;
  margin-right: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  line-height: 20px;
  min-width: 30px;
  text-align: center;
}
.oc-textarea-plus-component__length {
  opacity: 0;
}
.oc-textarea-plus-component__current-length--error {
  color: #ff0060;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-tree {
  padding: 0;
  margin: 0;
}
.oc-tree-control-item {
  position: relative;
  padding: 0;
  cursor: pointer;
  list-style: none;
  margin: 2px 0;
  width: 100%;
  box-sizing: border-box;
}
.oc-tree-control-item > .oc-tree-control-item__item:hover {
  background-color: #261d38;
  border-radius: 24px;
}
.oc-tree-control-item--selected > .oc-tree-control-item__item {
  background-color: #4b445b;
  /* 全局变量中的选中背景色 */
  border-radius: 24px;
  /* 选中时文字颜色同步变化 */
}
.oc-tree-control-item--selected > .oc-tree-control-item__item .oc-typography-color-default {
  color: #651dff;
  /* 选中时的文字主题色 */
}
.oc-tree-control-item--selected > .oc-tree-control-item__item:hover {
  background-color: #4b445b;
  border-radius: 24px;
}
.oc-tree-control-item__item {
  display: flex;
  align-items: center;
  padding-left: var(--oc-tree-item-padding-left);
}
.oc-tree-control-item__item--icon {
  width: 16px;
  height: 16px;
  position: relative;
  vertical-align: middle;
}
.oc-tree-control-item__item--icon:hover {
  color: #651dff;
}
.oc-tree-control-item__item--icon .oc-loading {
  height: 100%;
}
.oc-tree-control-item__item--icon-switcher {
  transform: rotate(-90deg);
  transition: transform 0.2s ease-in-out;
}
.oc-tree-control-item__item--icon-switcher.open {
  transform: rotate(0deg);
}
.oc-tree-control-item__item--icon-switcher.hidden {
  visibility: hidden;
}
.oc-tree-control-item__item--highlight {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0 4px;
  padding: 0 8px;
  border-radius: 24px;
}
.oc-tree-control-item__item--checkbox {
  vertical-align: 0;
}
.oc-tree-control-item__item--title {
  padding: 8px 0;
  line-height: 38px;
  display: flex;
  align-items: center;
  flex: 1;
}
.oc-tree-control-item__item--highlight-disabled {
  cursor: not-allowed;
}
.oc-tree-control-item__children {
  padding-left: 0px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-asset-share-batch-add {
  border: 1px solid #ffffff;
  border-radius: 24px;
}
.oc-asset-share-batch-add .tips-link {
  margin-bottom: 12px;
}
.oc-asset-share-batch-add .oc-textarea-plus-component {
  border: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 1px solid #dfe0e2;
}
.oc-asset-share-batch-add-button {
  display: flex;
  justify-content: flex-end;
  height: 24px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-batch-upload-text-modal .tips-link {
  margin-bottom: 12px;
}
.oc-batch-upload-text-modal-inline-button {
  display: flex;
  margin: 8px 12px 8px 16px;
  justify-content: space-between;
  align-items: center;
}
.oc-batch-upload-text-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0 8px;
}
.oc-batch-upload-text-modal-footer-error-list {
  max-height: 50px;
  overflow-y: auto;
  flex: 1;
}
.oc-batch-upload-text-modal-footer-button {
  display: flex;
  justify-content: flex-end;
}
.oc-batch-upload-text-modal-footer-button .oc-button-wrap:nth-of-type(1) {
  margin-right: 8px;
}
.oc-batch-upload-text-modal-footer-error-list .error-valid-tip {
  color: #ff0060;
  font-size: 12px;
}
.oc-batch-upload-text-modal-footer-error-list .error-lines {
  font-size: 12px;
  color: #651dff;
}
.oc-batch-upload-text-modal-footer-error-list .error-lines span {
  cursor: pointer;
}
.oc-batch-upload-text-modal-footer-error-list .error-lines span:after {
  display: inline-block;
  content: "，";
}
.oc-batch-upload-text-modal-footer-error-list .error-lines span:nth-last-child(1):after {
  display: none;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-asset-share-batch-select {
  display: flex;
}
.oc-asset-share-batch-select-add {
  margin-right: 8px;
}
.oc-asset-share-batch-select .oc-textarea-plus-component {
  height: 278px;
}
.oc-asset-share-batch-select .oc-batch-upload-text-modal-footer-error-list {
  max-height: 150px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-asset-share-drawer-header {
  font-weight: bold;
  font-size: 16px;
}
.oc-asset-share-drawer-content {
  border-radius: 32px;
  background: #fff;
  padding: 24px;
  min-height: 100%;
}
.oc-asset-share-drawer-content .oc-row-input {
  width: auto;
}
.oc-asset-share-drawer-content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.oc-asset-share-drawer-content-header-append {
  cursor: pointer;
  height: 100%;
  padding: 0 8px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
  background-color: #261d38;
  color: #ffffff;
  border-color: #261d38;
  white-space: nowrap;
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
}
.oc-asset-share-drawer-all-account-search {
  margin-bottom: 16px;
}
.oc-asset-share-drawer-all-account-right {
  text-align: right;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-asset-share-modal-batch-tip {
  margin-bottom: 24px;
}
.oc-asset-share-modal-group-select {
  margin-bottom: 24px;
}
.oc-asset-share-modal-share-type {
  margin-bottom: 24px;
}
.oc-asset-share-modal-share-type-select {
  margin-top: 8px;
}
.oc-asset-share-modal-share-company-select {
  margin-bottom: 24px;
  width: 504px;
}
.oc-asset-share-modal-share-company-select-text {
  height: 30px;
  line-height: 30px;
  display: flex;
  align-items: center;
}
.oc-asset-share-modal-search-bar {
  margin-top: 8px;
  margin-bottom: 8px;
}
.oc-asset-share-modal-search-bar-title {
  margin-bottom: 8px;
  margin-top: 8px;
}
.oc-asset-share-modal-search-bar-append {
  cursor: pointer;
  height: 100%;
  padding: 0 8px;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
  background-color: #261d38;
  color: #ffffff;
  border-color: #261d38;
  white-space: nowrap;
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
}
.oc-asset-share-modal-id-input-guide {
  margin-top: 8px;
}
.oc-asset-share-modal-share-select {
  min-height: 320px;
}
.oc-asset-share-modal-share-select-disabled {
  flex-direction: column;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dfe0e2;
  border-radius: 8px;
}
.oc-asset-share-modal-select-account-switch {
  padding-bottom: 12px;
}
.oc-asset-share-modal-select-area-w-100 {
  width: 100%;
}
.oc-asset-share-modal-select-area-label-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.oc-asset-share-modal-select-area-selected {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
.oc-asset-share-modal-select-area .ovui-cascader-exb {
  height: 320px;
}
.oc-asset-share-modal-select-area .ovui-cascader-panel__selection-header {
  background-color: #f4f4f5;
  height: 38px !important;
}
.oc-asset-share-modal-select-area .ovui-cascader-exb__header {
  background-color: #f4f4f5;
}
.oc-asset-share-modal-select-area .ovui-cascader-panel__selection-block {
  height: 318px;
}
.oc-asset-share-modal-select-area-cas {
  height: 320px;
  display: flex;
}
.oc-asset-share-modal-select-area-cas-panel {
  margin-left: 8px;
}
.oc-asset-share-modal-failed-task-footer {
  display: flex;
  justify-content: flex-end;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-action-interest-modal-footer {
  height: auto;
  min-height: 80px;
}
.oc-create-action-interest-modal-footer .footer-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.oc-create-action-interest-modal-footer .error-line .text {
  font-size: 12px;
  color: #ff0060;
}
.oc-create-action-interest-modal-footer .footer-container-left {
  display: flex;
  flex-direction: column;
  width: 544px;
  overflow: hidden;
}
.oc-create-action-interest-modal-footer .line-text {
  color: #651dff;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
}
.oc-create-action-interest-wrap .left-panel-footer {
  margin: 8px 0;
  padding: 0 12px;
  font-size: 12px;
  line-height: 22px;
}
.oc-create-action-interest-wrap .left-panel-footer .title {
  color: #ffffff;
  font-weight: 400;
}
.oc-create-action-interest-wrap .left-panel-footer .title .title-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.oc-create-action-interest-wrap .left-panel-footer .title .title-link {
  font-size: 12px;
  font-weight: 400;
}
.oc-create-action-interest-wrap .left-panel-footer .description {
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
  line-height: 22px;
}
.oc-create-action-interest-wrap .left-panel-footer .description .keywords {
  overflow: hidden;
  height: 22px;
}
.oc-create-action-interest-wrap .left-panel-footer .description .keywords > div {
  display: inline-block;
  font-size: 12px;
  margin-right: 14px;
}
.oc-create-action-interest-wrap .right-panel-content .header {
  color: #ffffff;
  padding: 2px 12px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ffffff;
  font-size: 14px;
  height: 32px;
  word-break: keep-all;
}
.oc-create-action-interest-wrap .right-panel-content .header-filter {
  width: 76px;
}
.oc-create-action-interest-wrap .right-panel-content .header-filter .ovui-button--text {
  color: #ffffff !important;
}
.oc-create-action-interest-wrap .right-panel-content .table-content {
  overflow: auto;
}
.oc-create-action-interest-wrap .right-panel-content .table-content .operation {
  display: flex;
  justify-content: center;
}
.oc-create-action-interest-wrap .right-panel-content .table-content .operation-item {
  cursor: pointer;
}
.oc-create-action-interest-wrap .right-panel-content .table-content .operation-item:hover {
  color: #651dff;
}
.oc-create-action-interest-wrap .right-panel-content .oc-popover span {
  display: flex;
}
.oc-create-action-interest-wrap .action-interest-table-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ffffff;
  align-items: center;
  font-size: 14px;
  line-height: 36px;
  height: 36px;
  padding: 0 12px;
}
.oc-create-action-interest-wrap .action-interest-table-header .label {
  color: #ffffff;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.oc-create-action-interest-wrap .action-interest-table-header .description {
  color: rgba(255, 255, 255, 0.5);
}
.oc-create-action-interest-wrap .action-interest-table-content {
  overflow: auto;
}
.oc-create-action-interest-wrap .right-panel-header {
  display: flex;
  padding: 0 12px;
  height: 36px;
  align-items: center;
  background: #302842;
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
  border-bottom: 1px solid #ffffff;
  border-radius: 24px 24px 0 0;
}
.oc-create-action-interest-wrap .oc-over-count {
  color: #ff0060;
}
.oc-create-action-interest-wrap .right-panel-footer-content {
  display: flex;
  align-items: center;
}
.oc-create-action-interest-wrap .category-content .ovui-cascader-panel__selection-block {
  height: 281px;
}
.oc-create-action-interest-wrap .category-content .ovui-cascader-panel__main--border {
  border: none;
}
.oc-create-action-interest-wrap .header-filter .ovui-button--text {
  color: #ffffff !important;
}
.oc-create-action-interest-table-content .content {
  position: relative;
}
.oc-create-action-interest-form-conainer {
  margin-bottom: 8px;
}
.oc-create-action-interest-form-conainer .action-form {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 8px;
}
.oc-create-action-interest-form-conainer .action-form .select {
  margin: 0 12px;
}
.oc-create-action-interest-form-conainer .action-form .ovui-custom-input {
  overflow-x: hidden;
}
.oc-create-action-interest-selected-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 8px;
}
.oc-create-action-interest-selected-info .selected-info-left {
  display: flex;
}
.oc-create-action-interest-selected-info .selected-info-item {
  margin-right: 12px;
}
.oc-create-action-interest-loading-container {
  position: relative;
}
.oc-create-action-interest-cell {
  line-height: 22px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.oc-create-action-interest-panel-container {
  display: flex;
}
.oc-create-action-interest-panel-container .left-panel,
.oc-create-action-interest-panel-container .right-panel {
  height: 386px;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  border: 1px solid #ffffff;
}
.oc-create-action-interest-panel-container .left-panel .content,
.oc-create-action-interest-panel-container .right-panel .content {
  flex-grow: 1;
  overflow-y: auto;
}
.oc-create-action-interest-panel-container .left-panel .footer,
.oc-create-action-interest-panel-container .right-panel .footer {
  border-top: 1px solid #ffffff;
}
.oc-create-action-interest-panel-container .left-panel .header {
  border-radius: 24px 24px 0 0;
}
.oc-create-action-interest-panel-container .right-panel {
  width: 240px;
  margin-left: 8px;
}
.oc-create-action-interest-panel-container .ovui-cascader-panel__selection-header {
  font-weight: 400;
  background-color: unset;
}
.oc-create-action-interest-panel-container .ovui-cascader-panel__main {
  border-radius: 0;
}
.oc-create-action-interest-panel-container .action-interest-tab {
  height: 36px;
}
.oc-create-action-interest-panel-container .ovui-tabs__nav::before {
  background-color: #1a112e !important;
}
.oc-create-action-interest-panel-container .ovui-tabs__nav-list-scroll-container {
  transform: translateX(12px);
}
.oc-create-action-interest-table-content {
  font-size: 14px;
  color: #ffffff;
}
.oc-create-action-interest-table-content .table-item {
  display: flex;
  padding: 0px 12px;
  height: 32px;
  align-items: center;
}
.oc-create-action-interest-table-content .table-item:hover {
  background: #f4f4f5;
}
.oc-create-action-interest-table-content .empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.oc-create-action-interest-breadcrumb {
  max-width: 230px;
  overflow: hidden;
}
.oc-create-action-interest-breadcrumb .ovui-button {
  color: rgba(255, 255, 255, 0.5);
}
.oc-create-action-interest-breadcrumb .ovui-button:hover {
  color: #651dff;
}
.oc-create-action-interest-breadcrumb > * {
  cursor: pointer;
}
.oc-create-action-interest-breadcrumb .breadcrumb-cell {
  height: 25px;
}
.oc-create-action-interest-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  color: #ffffff;
}
.oc-create-action-interest-input-wrap .input {
  width: 544px;
}
.oc-create-action-interest-input-wrap .icon {
  margin-left: 8px;
  margin-right: 4px;
}
.oc-create-action-interest-input-wrap .search-result {
  position: absolute;
  top: 40px;
  max-height: 321px;
  width: 544px;
  overflow: auto;
  padding-top: 4px;
  background-color: #302842;
  border-radius: 8px;
  box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.08);
  z-index: 1;
}
.oc-create-action-interest-input-wrap .search-result .search-result-label {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
  font-size: 12px;
  margin-bottom: 12px;
  margin-top: 12px;
}
.oc-create-action-interest-input-wrap .search-result .search-result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  margin-bottom: 8px;
  padding: 4px 16px 4px 12px;
}
.oc-create-action-interest-input-wrap .search-result .search-result-item .item-info {
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  color: #ffffff;
  margin-left: 8px;
}
.oc-create-action-interest-input-wrap .search-result .search-result-item .num {
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
}
.oc-create-action-interest-input-wrap .search-result .search-result-item .buttons {
  display: flex;
  align-items: center;
}
.oc-create-action-interest-input-wrap .search-result .search-result-item .buttons .left-button {
  margin-right: 12px;
}
.oc-create-action-interest-input-wrap .search-result .search-result-item .buttons .disabled-left-button {
  cursor: not-allowed;
  opacity: 0.5;
}
.oc-create-action-interest-input-wrap .search-result .search-result-item .buttons > div {
  cursor: pointer;
}
.oc-create-action-interest-input-wrap .search-result .search-result-item:hover {
  background-color: #f4f4f5;
}
.oc-create-action-interest-input-wrap .search-result .search-result-item-left {
  display: flex;
  align-items: center;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-aigc-generate-selector {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  transition: all 0.3s;
}
.oc-create-aigc-generate-selector-disabled-mask {
  z-index: 20;
  position: absolute;
  left: -2px;
  right: -2px;
  top: -2px;
  bottom: -2px;
  background-color: #dfe0e2;
  opacity: 0.5;
}
.oc-create-aigc-generate-selector-disabled-mask:hover {
  cursor: not-allowed;
}
.oc-create-aigc-generate-selector .container {
  transition: all 0.3s;
  margin-bottom: 16px;
}
.oc-create-aigc-generate-selector .container-collapsed {
  margin-bottom: 0 !important;
}
.oc-create-aigc-generate-selector .collapse {
  display: inline-block;
  margin-top: -8px;
  position: absolute;
  right: 16px;
  top: 56%;
  transform: translate(0, -50%);
}
.oc-create-aigc-generate-selector .aigc-title {
  padding: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}
.oc-create-aigc-generate-selector .aigc-title .modal-icon {
  width: 58px;
  z-index: 1;
}
.oc-create-aigc-generate-selector .aigc-title .introduce-text {
  margin-left: 8px;
  margin-top: 1px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  z-index: 1;
}
.oc-create-aigc-generate-selector .modal-background {
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  position: absolute;
  z-index: 0;
}
.oc-create-aigc-generate-selector .modal-background-icon {
  width: 328px;
  height: 165px;
  position: absolute;
  right: 0;
}
.oc-create-aigc-generate-selector .content-container {
  display: flex;
  flex-direction: column;
  padding: 0 16px;
}
.oc-create-aigc-generate-selector .content-container-tabs {
  margin-bottom: 16px;
}
.oc-create-aigc-generate-selector .content-container-bottom {
  position: relative;
}
.oc-create-aigc-generate-selector-candidate-list .empty-container {
  justify-content: center;
  flex-direction: column;
  height: 185px;
  border-radius: 24px;
  opacity: 0.8;
  background: #ffffff;
  padding-top: 8px;
  width: 100%;
}
.oc-create-aigc-generate-selector-candidate-list .candidate-list-container {
  position: relative;
}
.oc-create-aigc-generate-selector-candidate-list .candidate-list-container .candidate-list {
  width: 100%;
  display: flex;
  overflow: hidden;
}
.oc-create-aigc-generate-selector-candidate-list .candidate-list-container .candidate-list .candidate-item {
  margin-right: 16px;
}
.oc-create-aigc-generate-selector-candidate-list .candidate-list-container .candidate-list .candidate-item-large {
  height: 184px;
}
.oc-create-aigc-generate-selector-candidate-list .candidate-list-container .candidate-list .candidate-item-small {
  height: 142px;
}
.oc-create-aigc-generate-selector-candidate-list .candidate-list-container .candidate-list .more-btn {
  cursor: pointer;
}
.oc-create-aigc-generate-selector-candidate-list .candidate-list-container .candidate-list .more-btn.disabled {
  cursor: not-allowed;
}
.oc-create-aigc-generate-selector-candidate-list .candidate-list-container .candidate-list .more-btn .button-box {
  width: 35px;
  height: 100%;
  background: #ffffffcc;
  border-radius: 8px;
  position: relative;
}
.oc-create-aigc-generate-selector-candidate-list .candidate-list-container .candidate-list .more-btn .button-box .button-content {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  line-height: 22px;
  width: 14px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.oc-create-aigc-generate-selector-candidate-list .candidate-list-container .pre-page-btn-wrapper,
.oc-create-aigc-generate-selector-candidate-list .candidate-list-container .next-page-btn-wrapper {
  width: 32px;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 10;
}
.oc-create-aigc-generate-selector-candidate-list .candidate-list-container .pre-page-btn-wrapper {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  left: 0;
  top: 0;
  top: 50%;
  transform: translateY(-50%);
}
.oc-create-aigc-generate-selector-candidate-list .candidate-list-container .next-page-btn-wrapper {
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  right: 0;
  top: 0;
  top: 50%;
  transform: translateY(-50%);
}
.oc-create-aigc-generate-selector-candidate-list .candidate-list-container .pre-page-btn,
.oc-create-aigc-generate-selector-candidate-list .candidate-list-container .next-page-btn {
  box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.08);
  width: 24px;
  height: 24px;
  background-color: #ffffff;
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-material-card-wrapper {
  display: inline-block;
  transition: all 0.5s;
}
.oc-create-material-card-wrapper .oc-create-material-card-content {
  position: relative;
  border-radius: 24px;
  border: 2px solid #dfe0e2;
}
.oc-create-material-card-wrapper .oc-create-material-card-disabled-mask-horizontal {
  z-index: 2;
  position: absolute;
  left: -2px;
  right: -2px;
  top: -2px;
  bottom: -2px;
  background-color: #3c344d;
  border-radius: 24px;
  opacity: 0.5;
}
.oc-create-material-card-wrapper .oc-create-material-card-disabled-mask-horizontal:hover {
  cursor: not-allowed;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  position: relative;
  background: #261d38;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-content-data {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-top {
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  z-index: 2;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-top .oc-create-material-card-top-tag {
  display: flex;
  gap: 4px;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-top .oc-create-material-card-top-tag .ovui-tag--default-fill {
  background-color: rgba(50, 51, 53, 0.6);
  backdrop-filter: blur(2px);
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  font-size: 12px;
  color: #ffffff;
  overflow: hidden;
  border-radius: 0 0 12px 12px;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-bottom .oc-create-material-card-bottom-tag {
  margin: 0 4px 4px 4px;
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-bottom .oc-create-material-card-bottom-tag-horizontal {
  display: flex;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-bottom .oc-create-material-card-bottom-tag-horizontal .ovui-tag--default-fill {
  background-color: transparent;
  text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-bottom .oc-create-material-card-bottom-tag-playtime .oc-tag:last-child {
  flex-shrink: 0;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-bottom .oc-create-material-card-audit {
  margin: 0 4px 4px 4px;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-bottom .oc-create-material-card-tip {
  margin: 0 4px 4px 4px;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-bottom .oc-create-material-card-tab {
  display: flex;
  flex-wrap: nowrap;
  height: 24px;
  width: 100%;
  background: #261d38;
  box-shadow: 0px -7px 10px 0px rgba(0, 0, 0, 0.06);
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-bottom .oc-create-material-card-tab .oc-create-material-card-tab-item {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 100%;
  cursor: pointer;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-bottom .oc-create-material-card-tab .oc-create-material-card-tab-item:hover {
  color: #651dff;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-bottom .oc-create-material-card-tab .oc-create-material-card-tab-item::after {
  content: "";
  height: 16px;
  width: 1px;
  background: #dfe0e2;
  position: absolute;
  right: 0;
  top: 4px;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-bottom .oc-create-material-card-tab .oc-create-material-card-tab-item:last-child::after {
  display: none;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-bottom .oc-create-material-card-tab .oc-create-material-card-tab-item-disabled {
  color: rgba(255, 255, 255, 0.25);
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-bottom .oc-create-material-card-tab .oc-create-material-card-tab-item-disabled:hover {
  color: rgba(255, 255, 255, 0.25);
  cursor: not-allowed;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-bottom .oc-create-material-card-aweme-info {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 7px;
  background: rgba(26, 26, 27, 0.5);
  color: #302842;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-bottom .oc-create-material-card-aweme-info .oc-create-material-card-aweme-info-avatar {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-bottom .oc-create-material-card-aweme-info .oc-create-material-card-aweme-info-avatar .oc-create-material-card-aweme-info-avatar-img {
  width: 16px;
  height: 16px;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-bottom-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  border-radius: 0px 0px 8px 8px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.32) 100%);
  height: 52px;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-select-checkbox .ovui-checkbox__wrapper {
  margin: 0!important;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-select-checkbox,
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-select-radio {
  position: absolute;
  z-index: 2;
  top: 2px;
  right: 2px;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-select-radio .ovui-radio__inner {
  border-color: #dfe0e2;
  border-width: 2px;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-select-checkbox .ovui-checkbox__inner:hover {
  border-color: #651dff;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-select-top-right {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-select-top-right-select {
  right: 20px;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-close {
  display: none;
  position: absolute;
  right: -8px;
  top: -8px;
  color: rgba(255, 255, 255, 0.5);
  z-index: 3;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-close .oc-create-material-card-close-icon {
  border-radius: 50%;
  background: #302842;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-disabled-mask {
  z-index: 2;
  position: absolute;
  left: -2px;
  right: -2px;
  top: -2px;
  bottom: -2px;
  background-color: #dfe0e2;
  border-radius: 24px;
  opacity: 0.5;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-disabled-mask:hover {
  cursor: not-allowed;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-content-show-play {
  position: absolute;
  color: rgba(0, 0, 0, 0);
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-content-show-player {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-content-show-img {
  overflow: hidden;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-content-show-img-media {
  overflow: hidden;
  height: 100%;
  border-radius: 24px;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-content-show-img-media .oc-media-thumb-container {
  height: 100%!important;
  margin-left: -2px;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .oc-create-material-card-content-show-img-media-horizontal .oc-media-thumb-container {
  margin-left: 0;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .group-img-container__list {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90px;
  width: 100%;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .group-img-container__list .group-img-container__list__item {
  width: 26px;
  height: 26px;
  margin: 0 2px 4px;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .group-img-container__list_4 {
  max-width: 60px;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-show .group-img-container__list_3 {
  flex-wrap: wrap-reverse;
}
.oc-create-material-card-wrapper .oc-create-material-card-select {
  border: 2px solid #dfe0e2;
}
.oc-create-material-card-wrapper .oc-create-material-card-select:hover {
  border-color: #651dff;
  cursor: pointer;
}
.oc-create-material-card-wrapper .oc-create-material-card-selected {
  border-color: #651dff;
}
.oc-create-material-card-wrapper .oc-create-material-card-selected .oc-create-material-card-content-show .oc-create-material-card-select-checkbox .ovui-checkbox__inner,
.oc-create-material-card-wrapper .oc-create-material-card-selected .oc-create-material-card-content-show .oc-create-material-card-select-radio .ovui-radio__inner {
  background-color: #651dff;
  border-color: #651dff;
}
.oc-create-material-card-wrapper .oc-create-material-card-closable:hover {
  border-color: #651dff;
}
.oc-create-material-card-wrapper .oc-create-material-card-horizontal {
  display: flex;
  gap: 8px;
  padding: 8px;
  position: relative;
  border: 1px solid #dfe0e2;
}
.oc-create-material-card-wrapper .oc-create-material-card-horizontal .oc-create-material-card-close {
  display: none;
  position: absolute;
  right: -8px;
  top: -8px;
  color: rgba(255, 255, 255, 0.5);
  z-index: 3;
}
.oc-create-material-card-wrapper .oc-create-material-card-horizontal .oc-create-material-card-close .oc-create-material-card-close-icon {
  border-radius: 50%;
  background: #302842;
}
.oc-create-material-card-wrapper .oc-create-material-card-horizontal .oc-create-material-card-horizontal-data {
  width: calc(100% - 100px);
  display: flex;
  flex-direction: column;
}
.oc-create-material-card-wrapper .oc-create-material-card-horizontal .oc-create-material-card-horizontal-data .oc-create-material-card-select-checkbox .ovui-checkbox__inner:hover {
  border-color: #651dff;
}
.oc-create-material-card-wrapper .oc-create-material-card-horizontal .oc-create-material-card-horizontal-data .oc-create-material-card-horizontal-data-name {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.oc-create-material-card-wrapper .oc-create-material-card-horizontal .oc-create-material-card-horizontal-data .oc-create-material-card-horizontal-data-name .oc-create-material-card-select-checkbox {
  margin-left: auto;
}
.oc-create-material-card-wrapper .oc-create-material-card-horizontal .oc-create-material-card-horizontal-data .oc-create-material-card-horizontal-data-tags {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.oc-create-material-card-wrapper .oc-create-material-card-horizontal .oc-create-material-card-horizontal-data .oc-create-material-card-horizontal-data-tags-item {
  display: flex;
  gap: 4px;
}
.oc-create-material-card-wrapper .oc-create-material-card-horizontal .oc-create-material-card-horizontal-data .oc-create-material-card-horizontal-data-tags-popover {
  display: flex;
  gap: 4px;
}
.oc-create-material-card-wrapper .oc-create-material-card-horizontal .oc-create-material-card-horizontal-data .oc-create-material-card-horizontal-data-metric {
  display: flex;
  gap: 4px;
  margin-top: auto;
}
.oc-create-material-card-wrapper .oc-create-material-card-horizontal .oc-create-material-card-horizontal-data .oc-create-material-card-horizontal-data-metric .oc-create-material-card-horizontal-data-metric-item {
  flex: 1;
}
.oc-create-material-card-wrapper .oc-create-material-card-horizontal .oc-create-material-card-horizontal-data .oc-create-material-card-horizontal-data-tabs {
  display: flex;
  gap: 8px;
  margin-top: auto;
}
.oc-create-material-card-wrapper .oc-create-material-card-selected {
  border-color: #651dff;
}
.oc-create-material-card-wrapper .oc-create-material-card-selected .oc-create-material-card-horizontal-data .oc-create-material-card-select-checkbox .ovui-checkbox__inner,
.oc-create-material-card-wrapper .oc-create-material-card-selected .oc-create-material-card-horizontal-data .oc-create-material-card-select-radio .ovui-radio__inner {
  background-color: #651dff;
  border-color: #651dff;
}
.oc-create-material-card-wrapper .oc-create-material-card-name {
  margin-top: 8px;
}
.oc-create-material-card-wrapper .oc-create-material-card-sub {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.oc-create-material-card-wrapper .oc-create-material-card-sub .oc-create-material-card-sub-text {
  display: flex;
  flex-direction: column;
}
.oc-create-material-card-wrapper .oc-create-material-card-aweme-bottom {
  display: flex;
  align-items: center;
  margin-top: 2px;
}
.oc-create-material-card-wrapper .oc-create-material-card-aweme-bottom .oc-create-material-card-aweme-bottom-avatar {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}
.oc-create-material-card-wrapper .oc-create-material-card-aweme-bottom .oc-create-material-card-aweme-bottom-avatar .oc-create-material-card-aweme-bottom-avatar-img {
  width: 16px;
  height: 16px;
}
.oc-create-material-card-wrapper .oc-create-material-card-count-info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 2px;
}
.oc-create-material-card-wrapper .oc-create-material-card-count-info .oc-create-material-card-count-info-item {
  margin-right: 8px;
}
.oc-create-material-card-wrapper .oc-create-material-card-count-info .oc-create-material-card-count-info-icon-wrap {
  display: flex;
  align-items: center;
  margin-right: 2px;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
}
.oc-create-material-card-wrapper .oc-create-material-card-content-carousel .oc-audio-player {
  position: absolute;
  right: 12px;
  bottom: 22px;
  z-index: 10000;
}
.oc-create-material-card-wrapper:hover .oc-create-material-card-content-show .oc-create-material-card-close {
  display: block;
}
.oc-create-material-card-wrapper:hover .oc-create-material-card-horizontal .oc-create-material-card-close {
  display: block;
}
.oc-create-material-card-disabled .ovui-tag--default-fill {
  opacity: 0.5;
}
.oc-create-material-card-disabled .oc-create-material-card-select {
  border-color: #dfe0e2;
}
.oc-create-material-card-disabled .oc-create-material-card-select .oc-create-material-card-content-show .oc-create-material-card-select-checkbox .ovui-checkbox__inner,
.oc-create-material-card-disabled .oc-create-material-card-select .oc-create-material-card-content-show .oc-create-material-card-select-radio .ovui-radio__inner {
  border-color: #dfe0e2;
}
.oc-create-material-card-disabled .oc-create-material-card-select:hover {
  border-color: #dfe0e2;
}
.oc-create-material-card-disabled .oc-create-material-card-select:hover .oc-create-material-card-content-show .oc-create-material-card-select-checkbox .ovui-checkbox__inner,
.oc-create-material-card-disabled .oc-create-material-card-select:hover .oc-create-material-card-content-show .oc-create-material-card-select-radio .ovui-radio__inner {
  border-color: #dfe0e2;
}
.oc-create-material-card-disabled .oc-create-material-card-selected {
  border-color: #651dff;
}
.oc-create-material-card-disabled .oc-create-material-card-selected .oc-create-material-card-content-show .oc-create-material-card-select-checkbox .ovui-checkbox__inner,
.oc-create-material-card-disabled .oc-create-material-card-selected .oc-create-material-card-content-show .oc-create-material-card-select-radio .ovui-radio__inner {
  background: #651dff;
  border-color: #651dff;
}
.oc-create-material-card-disabled .oc-create-material-card-selected:hover {
  border-color: #651dff;
}
.oc-create-material-card-disabled .oc-create-material-card-selected:hover .oc-create-material-card-content-show .oc-create-material-card-select-checkbox .ovui-checkbox__inner,
.oc-create-material-card-disabled .oc-create-material-card-selected:hover .oc-create-material-card-content-show .oc-create-material-card-select-radio .ovui-radio__inner {
  background: #651dff;
  border-color: #651dff;
}
.oc-material-card-resize {
  transform: scale(1.5);
}
.oc-material-card-resize-zindex {
  z-index: 99;
  position: relative;
}
.oc-material-card-video-popover {
  padding: 0px !important;
  line-height: 0;
  border-radius: 24px;
  overflow: hidden;
}
.oc-create-material-card-carousel-content-wrapper {
  height: 100%;
  width: 100%;
}
.oc-create-material-card-carousel-content-wrapper-show-img {
  overflow: hidden;
}
.oc-create-material-card-carousel-content-wrapper-buttons {
  width: 100%;
  display: flex;
  justify-content: end;
  gap: 12px;
  color: #302842;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 20px 10px 16px 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.32) 100%);
}
.oc-create-material-card-carousel-content-wrapper-buttons-item {
  width: 28px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-tip-tag-wrapper {
  padding: 2px 4px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #ffffff;
  white-space: nowrap;
}
.oc-tip-tag-wrapper .oc-tip-tag-icon {
  margin-right: 2px;
}
.oc-tip-tag-info {
  background: rgba(101, 45, 255, 0.08);
}
.oc-tip-tag-info .oc-tip-tag-icon {
  color: #4d00f3;
}
.oc-tip-tag-success {
  background: rgba(0, 213, 164, 0.08);
}
.oc-tip-tag-success .oc-tip-tag-icon {
  color: #00d5a4;
}
.oc-tip-tag-warning {
  background: rgba(255, 124, 0, 0.08);
}
.oc-tip-tag-warning .oc-tip-tag-icon {
  color: #ff7c00;
}
.oc-tip-tag-danger {
  background: rgba(255, 0, 96, 0.06);
}
.oc-tip-tag-danger .oc-tip-tag-icon {
  color: #ff0060;
}
.oc-tip-tag-xs {
  padding: 2px 4px;
}
.oc-tip-tag-sm {
  padding: 5px 4px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-material-audit-suggest-panel-content {
  max-height: 250px;
  overflow-y: auto;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-material-audit-suggest-info-panel .oc-create-material-audit-suggest-info-panel-tab-wrap {
  margin-bottom: 16px;
}
.oc-create-material-audit-suggest-info-panel .oc-create-material-audit-suggest-info-panel-tab-wrap:last-of-type {
  margin-bottom: 0;
}
.oc-create-material-audit-suggest-info-panel .oc-create-material-audit-suggest-info-panel-row-wrap {
  margin-bottom: 16px;
}
.oc-create-material-audit-suggest-info-panel .oc-create-material-audit-suggest-info-panel-row-wrap:last-of-type {
  margin-bottom: 0;
}
.oc-create-material-audit-suggest-info-panel .oc-create-material-audit-suggest-info-panel-row-wrap .render-container {
  margin: 4px 0;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.create-anchor-info {
  display: inline-block;
  padding: 16px;
  background: #323335;
  border-radius: 8px;
  width: 208px;
}
.create-anchor-info .create-anchor-info—type {
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, 0);
  width: 100%;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}
.create-anchor-info .create-anchor-info—type .create-anchor-info-type-icon {
  font-size: 20px;
  margin-right: 8px;
}
.create-anchor-info .create-anchor-info—type .create-anchor-info-type-delimiter {
  width: 1px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.34);
  margin: 0 8px;
}
.create-anchor-info .create-anchor-info—type .create-anchor-info-type-details-names {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.create-anchor-select .create-anchor-select-radio {
  margin-bottom: 24px;
}
.create-anchor-select .create-anchor-info-row {
  margin-bottom: 24px;
}
.create-anchor-select .create-anchor-filter-container {
  background: #302842;
  border-radius: 32px;
  padding: 24px;
  margin-bottom: 16px;
}
.create-anchor-drawer-body .oc-create-material-card-content .oc-create-material-card-content-show .oc-create-material-card-select-top-right {
  width: 375px;
  top: 188px;
  left: 4px;
  right: auto;
  transform: scale(0.44);
  transform-origin: 0 0 0;
}
.create-anchor-drawer-body .oc-create-material-card-content .oc-create-material-card-content-show .oc-create-material-card-select-top-right .create-anchor-select-item-info {
  display: inline-flex;
  align-items: center;
  border-radius: 2px;
  padding: 4px;
  color: rgba(0, 0, 0, 0);
  background: #292929;
}
.create-anchor-drawer-body .oc-create-material-card-content .oc-create-material-card-content-show .oc-create-material-card-select-top-right .create-anchor-select-item-info .create-anchor-select-item-icon {
  margin-right: 8px;
}
.create-anchor-drawer-body .oc-create-material-card-content .oc-create-material-card-content-show .oc-create-material-card-select-top-right .create-anchor-select-item-info .create-anchor-select-item-delimiter {
  width: 1px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.34);
  margin: 0 8px;
}
.create-material-list-filter-option-item {
  max-width: 60px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.create-material-list {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.create-material-list .create-material-list-filter-container {
  background: #302842;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 16px;
}
.create-material-list .create-material-list-before-filter {
  padding-bottom: 16px;
}
.create-material-list .create-material-list-after-filter {
  padding-bottom: 16px;
}
.create-material-list .create-material-list-rolling-load-wrapper {
  background: #302842;
  border-radius: 16px;
  padding: 24px 0 24px 24px;
}
.create-material-list .create-material-list-rolling-load-wrapper .create-material-list-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-right: 24px;
}
.create-material-list .create-material-list-rolling-load-wrapper .create-material-list-card-header .create-material-list-card-header-main {
  display: flex;
  align-items: center;
}
.create-material-list .create-material-list-rolling-load-wrapper .create-material-list-card-header .create-material-list-card-header-slot {
  flex: 1;
  margin-right: 8px;
}
.create-material-list .create-material-list-rolling-load-wrapper .create-material-list-card-header .create-material-list-card-header-count {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 14px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.5);
  margin-right: 8px;
  flex: 1;
}
.create-material-list .create-material-list-rolling-load-wrapper .create-material-list-card-header .create-material-list-sort {
  display: flex;
  margin-left: auto;
}
.create-material-list .create-material-list-rolling-load-wrapper .create-material-list-card-header-sort-text {
  float: left;
  margin-right: 8px;
  line-height: 32px !important;
}
.create-material-list .create-material-list-rolling-load-wrapper .create-material-list-card-container-body {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 16px;
}
.create-material-list .create-material-list-rolling-load-wrapper .oc-rolling-load__empty {
  height: 100% !important;
}
.create-material-list .create-material-list-pagination-list {
  position: relative;
}
.create-material-list .create-material-list-pagination-list .create-material-list-pagination-list-content {
  overflow: auto;
}
.create-material-list .create-material-list-pagination-list .create-material-list-pagination-list-content .create-material-list-card-container-body {
  height: 1px;
}
.create-material-list .create-material-list-pagination-list .create-material-list-pagination-list-content .create-material-list-pagination-list-content-empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.create-material-list .create-material-list-pagination-list .create-material-list-pagination-list-pagination {
  padding-top: 12px;
  margin-right: -10px;
  display: flex;
  justify-content: flex-end;
}
.create-material-list .create-material-list-scroll-content {
  position: relative;
  flex: 1;
}
.create-material-list-flex {
  display: flex;
  flex-direction: column;
}
.create-material-list-flex-auto {
  flex: 1;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.oc-create-filter-bar .create-filter-bar-item-select .oc-select {
  display: flex;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-more-filter-modal {
  overflow: hidden;
}
.popover-footer {
  margin: 16px 8px 8px 0;
}
.oc-more-filter-modal-footer {
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: right;
}
.oc-more-filter-modal-footer .reset-icon {
  cursor: pointer;
  color: #651dff;
  margin-right: 16px;
  display: flex;
  align-items: center;
  justify-content: right;
  font-size: 14px;
}
.oc-more-filter-modal-footer .reset-icon iconpark-icon {
  margin-right: 4px;
}
.oc-more-filter-modal-footer .cancel-btn {
  margin-right: 16px;
}
.oc-more-filter-modal-body {
  border: 1px solid #ffffff;
  border-radius: 32px;
  display: flex;
  overflow: hidden;
}
.oc-more-filter-modal-body .left-content {
  width: 200px;
  max-height: calc(100vh - 80px - 70px - 80px);
  overflow: auto;
  background: #302842;
  padding: 12px 0;
}
.oc-more-filter-modal-body .left-content .title-item {
  width: 100%;
  line-height: 32px;
  position: relative;
  cursor: pointer;
}
.oc-more-filter-modal-body .left-content .title-item .title-item-text {
  padding-left: 16px;
}
.oc-more-filter-modal-body .left-content .title-item .sub-title-item {
  position: relative;
  font-weight: 400;
  padding-left: 32px;
}
.oc-more-filter-modal-body .left-content .title-item .sub-title-item.active {
  color: #651dff;
}
.oc-more-filter-modal-body .left-content .title-item .sub-title-item.active .title-item-active-left {
  display: block;
}
.oc-more-filter-modal-body .left-content .title-item.group-title {
  font-weight: 600;
}
.oc-more-filter-modal-body .left-content .title-item.active {
  color: #651dff;
}
.oc-more-filter-modal-body .left-content .title-item.active .title-item-active-left {
  display: block;
}
.oc-more-filter-modal-body .left-content .title-item .title-item-active-left {
  background-color: #651dff;
  height: 20px;
  width: 2px;
  display: none;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  left: 0;
}
.oc-more-filter-modal-body.full-width {
  border: none;
}
.oc-more-filter-modal-body.full-width .right-content {
  width: 854px;
  padding: 0;
}
.oc-more-filter-modal-body .right-content {
  padding: 16px;
  max-height: calc(100vh - 80px - 70px - 80px);
  overflow: auto;
  width: calc(100% - 200px);
}
.oc-more-filter-modal-body .right-content.only-right {
  width: 100%;
}
.oc-more-filter-modal-body .right-content .config-area {
  margin-bottom: 24px;
}
.oc-more-filter-modal-body .right-content .config-area .group-filter-item {
  margin-bottom: 24px;
}
.oc-more-filter-modal-body .right-content .config-area .group-filter-item:last-child {
  margin-bottom: 0px;
}
.oc-more-filter-modal-body .right-content .config-area .sub-filter-item-title {
  font-weight: 600;
  color: #ffffff;
  margin: 16px 0 16px;
  border-radius: 3px;
}
.oc-more-filter-modal-body .right-content .filter-item-title {
  margin-bottom: 16px;
  font-size: 14px;
  color: #ffffff;
  font-weight: 600;
}
.oc-more-filter-modal-body .right-content .title-item-group:not(:first-child) {
  border-top: 1px solid #dfe0e2;
  padding-top: 24px;
}
.oc-more-filter-modal-body .right-content .title-item-group .filter-item-title {
  font-size: 16px;
}
.oc-more-filter-modal-body .right-content .title-item:last-child .config-area {
  margin-bottom: 0;
}
.oc-more-filter-pop-body {
  display: flex;
  border: none;
  max-width: 840px;
  margin: 8px;
}
.oc-more-filter-pop-body .right-content {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  gap: 24px;
}
.oc-more-filter-pop-body .right-content .config-area {
  width: 264px;
}
.oc-more-filter-pop-body .right-content .filter-item-title {
  margin-bottom: 8px;
  font-size: 14px;
  color: #ffffff;
  font-weight: 600;
}
.oc-more-filter-tile-body {
  display: flex;
  border: none;
  gap: 0 40px;
}
.oc-more-filter-tile-body .right-content {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  gap: 8px 16px;
  width: 100%;
}
.oc-more-filter-tile-body .right-content .title-item {
  display: flex;
  align-items: center;
  gap: 0 16px;
}
.oc-more-filter-tile-body .right-content .reset-icon {
  display: inline-block;
  vertical-align: middle;
  height: 32px;
  line-height: 32px;
  color: #651dff;
  cursor: pointer;
  font-size: 14px;
}
.oc-more-filter-tile-body .right-content .filter-item-title {
  margin-bottom: 8px;
  font-size: 14px;
  color: #ffffff;
  font-weight: 600;
}
.oc-more-filter-tile-body .right-content .title-item-data .ovui-range-picker {
  width: 320px !important;
}
.oc-more-filter-tile-body .right-content .title-item-data .ovui-range-picker .ovui-custom-input__after .ovui-icon {
  color: #651dff;
}
.oc-more-filter-tile-body .right-content .title-item-data .oc-filter-ies-filter .ovui-custom-input--fill {
  background: rgba(42, 85, 229, 0.06);
}
.oc-more-filter-tile-body .right-content .title-item-data .oc-filter-ies-filter .ovui-custom-input--fill.ovui-custom-input--focused,
.oc-more-filter-tile-body .right-content .title-item-data .oc-filter-date-range-filter .ovui-custom-input--fill.ovui-custom-input--focused,
.oc-more-filter-tile-body .right-content .title-item-data .oc-filter-ies-filter .ovui-custom-input--fill:hover,
.oc-more-filter-tile-body .right-content .title-item-data .oc-filter-date-range-filter .ovui-custom-input--fill:hover,
.oc-more-filter-tile-body .right-content .title-item-data .oc-filter-ies-filter .ovui-custom-input--fill:active,
.oc-more-filter-tile-body .right-content .title-item-data .oc-filter-date-range-filter .ovui-custom-input--fill:active,
.oc-more-filter-tile-body .right-content .title-item-data .oc-filter-ies-filter .ovui-custom-input--fill:focus,
.oc-more-filter-tile-body .right-content .title-item-data .oc-filter-date-range-filter .ovui-custom-input--fill:focus {
  border: 1px solid transparent;
  box-shadow: none;
}
.oc-more-filter-tile-body .right-content .title-item-data .oc-filter-ies-filter .oc-typography-color-default,
.oc-more-filter-tile-body .right-content .title-item-data .oc-filter-date-range-filter .oc-typography-color-default,
.oc-more-filter-tile-body .right-content .title-item-data .oc-filter-ies-filter .ovui-custom-input__after,
.oc-more-filter-tile-body .right-content .title-item-data .oc-filter-date-range-filter .ovui-custom-input__after,
.oc-more-filter-tile-body .right-content .title-item-data .oc-filter-ies-filter .ovui-select__arrow,
.oc-more-filter-tile-body .right-content .title-item-data .oc-filter-date-range-filter .ovui-select__arrow,
.oc-more-filter-tile-body .right-content .title-item-data .oc-filter-ies-filter .ovui-custom-input__clear,
.oc-more-filter-tile-body .right-content .title-item-data .oc-filter-date-range-filter .ovui-custom-input__clear,
.oc-more-filter-tile-body .right-content .title-item-data .oc-filter-ies-filter .ovui-custom-input__content,
.oc-more-filter-tile-body .right-content .title-item-data .oc-filter-date-range-filter .ovui-custom-input__content,
.oc-more-filter-tile-body .right-content .title-item-data .oc-filter-ies-filter .ovui-input__wrapper--unstyle,
.oc-more-filter-tile-body .right-content .title-item-data .oc-filter-date-range-filter .ovui-input__wrapper--unstyle {
  color: #651dff;
}
.oc-filter-btn-icon {
  margin-right: 4px;
}
.oc-filter-count-num {
  width: 16px;
  height: 16px;
  background: #651dff;
  border-radius: 50%;
  font-size: 14px;
  margin-left: 8px;
  font-weight: 600;
  color: #fff;
  line-height: 16px;
}
.oc-filter-echo-item {
  background: rgba(42, 85, 229, 0.06);
  border-radius: 24px;
  display: flex;
  cursor: pointer;
  padding: 6px 8px;
  height: 32px;
  font-size: 14px;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  color: #651dff;
  max-width: 264px;
}
.oc-filter-echo-item .echo-num {
  height: 24px;
  width: 24px;
  margin: 0 8px;
  background: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 24px;
}
.oc-filter-echo-body .ovui-cascader-panel__main--border {
  border: none;
}
.oc-filter-echo-body .ovui-cascader-panel__selection-block {
  height: auto;
}
.oc-filter-echo-body .oc-filter-select-filter,
.oc-filter-echo-body .oc-filter-echo-cascader {
  margin: -16px;
}
.oc-filter-echo-item-text {
  overflow: hidden;
  max-width: 200px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.oc-filter-delete-icon {
  height: 14px;
  width: 14px;
  margin-left: 4px;
  cursor: pointer;
}
.oc-filter-more-filter-echo-popover {
  max-height: 195px;
  overflow: auto;
}
.oc-filter-template-list-body {
  width: 200px;
  font-size: 14px;
}
.oc-filter-template-list-body .template-item {
  width: 100%;
  height: 32px;
  line-height: 32px;
  cursor: pointer;
}
.oc-filter-template-list-body .template-item:hover {
  color: #651dff;
}
.oc-filter-template-list-body .custom-action {
  text-align: center;
  color: #651dff;
  cursor: pointer;
  height: 32px;
  line-height: 32px;
}
.oc-filter-template-list-body .sp {
  width: 100%;
  height: 1px;
  margin: 4px 0;
  background: #dfe0e2;
}
.oc-filter-radio-list {
  display: flex;
  flex-flow: wrap;
}
.oc-filter-radio-list .radio-item {
  display: flex;
  align-items: center;
  min-width: 33.33%;
  margin-bottom: 8px;
  padding-right: 8px;
}
.oc-filter-radio-list .radio-item .radio-item-normal {
  display: flex;
  align-items: center;
}
.oc-filter-radio-list .radio-item-text {
  margin-left: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.oc-filter-checkbox-list {
  display: flex;
  flex-flow: wrap;
  gap: 8px 0;
}
.oc-filter-checkbox-list .checkbox-item {
  display: flex;
  align-items: center;
  width: 33.33%;
}
.oc-filter-checkbox-list .checkbox-item-normal {
  display: flex;
  align-items: center;
}
.oc-filter-checkbox-list .checkbox-item-text {
  margin-left: 8px;
  cursor: pointer;
}
.oc-filter-compare-filter {
  display: flex;
  flex-flow: wrap;
}
.oc-filter-compare-filter .type-select {
  margin-right: 8px;
  width: 96px;
}
.oc-filter-compare-filter .sp {
  margin: 0 8px;
  color: #dfe0e2;
  line-height: 32px;
}
.oc-filter-compare-filter-input {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.oc-filter-compare-filter-input .oc-promotion-more-filter-error {
  color: #ff0060;
  position: static;
  font-size: 12px;
  word-break: break-all;
}
.oc-filter-cascader-filter {
  width: 264px;
}
.oc-filter-select-filter .oc-row-cascader .ovui-cascader-panel .ovui-cascader-panel__main {
  width: unset;
}
.oc-filter-select-filter .ovui-cascader-panel__selection-block {
  min-width: 200px;
}
.oc-filter-select-filter .ovui-cascader-panel__main {
  flex: unset;
  min-width: 264px;
}
.search-icon-area {
  display: flex;
}
.oc-filter-input-filter {
  position: relative;
}
.oc-promotion-more-filter-error {
  color: #ff0060;
  position: absolute;
  font-size: 12px;
  word-wrap: break-word;
}
.oc-filter-date-range-filter-primary {
  display: flex;
  align-items: center;
  background: rgba(42, 85, 229, 0.06);
  border-radius: 24px;
  padding-right: 8px;
}
.oc-filter-date-range-filter-primary .ovui-custom-input--fill {
  background: transparent;
}
.oc-filter-date-range-filter-delete-icon {
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #651dff;
}
.oc-filter-tile-compare-body .ovui-cascader-panel__main--border {
  border: none;
}
.oc-filter-tile-compare-body .ovui-cascader-panel__selection-block {
  height: auto;
}
.oc-filter-tile-compare-body .footer {
  margin-top: 16px;
}
.oc-filter-tile-campare-target {
  width: 264px;
}
.oc-filter-footer {
  margin-top: 16px;
}
.search-icon-area {
  display: flex;
}
.oc-filter-select-input {
  position: relative;
}
.oc-promotion-more-filter-error {
  color: #ff0060;
  position: absolute;
  font-size: 12px;
  word-wrap: break-word;
}
.oc-filter-select-input-input {
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
}
.oc-filter-echo-cascader .oc-row-cascader .ovui-cascader-panel .ovui-cascader-panel__main {
  width: unset;
}
.oc-filter-echo-cascader .ovui-cascader-panel__selection-block {
  min-width: 200px;
}
.oc-filter-echo-cascader .ovui-cascader-panel__main {
  flex: unset;
  min-width: 264px;
}
.oc-filter-radio-list-drop {
  display: flex;
}
.oc-filter-radio-list-drop .oc-dropdown-wrapper {
  margin-left: 8px;
  cursor: pointer;
}
.oc-filter-radio-list-drop .ovui-button--text {
  color: inherit;
}
.oc-filter-checkbox-list-drop {
  display: flex;
}
.oc-filter-checkbox-list-drop .oc-dropdown-wrapper {
  margin-left: 8px;
  cursor: pointer;
}
.oc-filter-checkbox-list-drop .ovui-button--text {
  color: inherit;
}
.checkbox-list-drop-item {
  padding: 6px 12px;
  cursor: pointer;
}
.checkbox-list-drop-item:hover {
  background-color: #261d38;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-select-ies-tag-wrapper {
  display: flex;
  gap: 4px;
}
.oc-create-select-ies-desc-wrapper {
  display: flex;
  align-items: center;
  flex-direction: row;
  margin-top: 2px;
}
.oc-create-select-ies-desc-wrapper .oc-key-value {
  margin: 0;
  margin-right: 12px;
  width: var(--descOptionsWidth);
}
.oc-create-select-ies-desc-wrapper .oc-key-value:last-child {
  margin-right: 0;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-material-submit-bar-wrapper {
  height: 64px;
  padding: 0;
  background: #302842;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.oc-create-material-submit-bar-wrapper .oc-create-material-submit-bar-left {
  height: 100%;
  overflow: hidden;
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.oc-create-material-submit-bar-wrapper .oc-create-material-submit-bar-left .oc-create-material-submit-bar-count {
  font-size: 14px;
  color: #ffffff;
  margin-right: 5px;
}
.oc-create-material-submit-bar-wrapper .oc-create-material-submit-bar-left .oc-create-material-submit-bar-list {
  height: 100%;
  line-height: 0;
  font-size: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-right: 10px;
  padding-right: 10px;
  flex: 1;
  overflow-x: auto;
}
.oc-create-material-submit-bar-wrapper .oc-create-material-submit-bar-left .oc-create-material-submit-bar-list .oc-create-material-submit-bar-list-item {
  position: relative;
  margin-right: 12px;
  background: #dfe0e2;
  border-radius: 24px;
}
.oc-create-material-submit-bar-wrapper .oc-create-material-submit-bar-left .oc-create-material-submit-bar-list .oc-create-material-submit-bar-list-item:hover .oc-create-material-submit-bar-list-item-icon {
  display: block;
}
.oc-create-material-submit-bar-wrapper .oc-create-material-submit-bar-left .oc-create-material-submit-bar-list .oc-create-material-submit-bar-list-item .oc-create-material-submit-bar-list-item-icon {
  position: absolute;
  color: rgba(255, 255, 255, 0.5);
  top: -5px;
  right: -6px;
  display: block;
  z-index: 1;
}
.oc-create-material-submit-bar-wrapper .oc-create-material-submit-bar-left .oc-create-material-submit-bar-list .oc-create-material-submit-bar-list-item .oc-create-material-submit-bar-list-item-icon:hover {
  cursor: pointer;
}
.oc-create-material-submit-bar-wrapper .oc-create-material-submit-bar-btn-group .oc-button-wrap {
  margin-left: 16px;
}
.oc-create-material-submit-bar-list-img {
  width: 24px;
  height: 42px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 4px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.create-app-select {
  width: 432px;
}
.create-app-select-input-suffix {
  cursor: pointer;
  line-height: 22px;
  font-size: 14px;
  color: #651dff;
  padding-left: 8px;
  border-left: 1px solid #dfe0e2;
}
.create-app-select-input-suffix[disabled="true"] {
  color: rgba(101, 29, 255, 0.34);
  cursor: not-allowed;
}
.create-app-select-modal-body {
  padding-bottom: 24px;
}
.create-app-select-modal-filter {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.create-app-select-modal-nav {
  margin-bottom: 29px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-audience-age .create-more-wrapper-header__text {
  color: #ffffff;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.create-more-wrapper-rolling-load {
  height: auto !important;
}
.create-more-wrapper-msg {
  margin-top: 8px;
}
.create-more-wrapper-header {
  display: flex;
  justify-content: space-between;
}
.create-more-wrapper-header__text {
  font-size: 14px;
  display: flex;
  height: 22px;
  align-items: center;
}
.create-more-wrapper-header__text-span {
  color: #ffffff;
  font-weight: 500;
}
.create-more-wrapper-header__text-popover {
  margin-left: 4px;
}
.create-more-wrapper-header-left {
  display: flex;
  align-items: center;
}
.create-more-wrapper-header-right {
  display: flex;
}
.create-more-wrapper-header-right__button + .create-more-wrapper-header-right__button {
  margin-left: 8px;
}
.create-more-wrapper-search-icon {
  color: rgba(255, 255, 255, 0.5);
}
.create-more-wrapper-info {
  display: flex;
  flex-wrap: wrap;
  margin-top: 8px;
}
.create-more-wrapper-info-item {
  display: flex;
  color: rgba(255, 255, 255, 0.75);
}
.create-more-wrapper-info span {
  font-size: 14px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.75);
}
.create-more-wrapper-info-item__fast-delete:hover {
  background: #c6dfff;
  border-radius: 2px;
  color: #651dff;
  cursor: pointer;
}
.create-more-wrapper-info-item__fast-delete:hover .create-more-wrapper-info-item__search-key {
  background: #c6dfff;
  color: #651dff;
}
.create-more-wrapper-info-item__fast-delete-btn:hover {
  cursor: pointer;
  color: #651dff;
}
.create-more-wrapper-info-item__search-key {
  background: rgba(101, 45, 255, 0.08);
  border-radius: 2px;
}
.create-more-wrapper-info-disabled .create-more-wrapper-info-item span {
  color: rgba(255, 255, 255, 0.25);
}
.create-more-wrapper-info-disabled .create-more-wrapper-info-item__fast-delete:hover {
  color: rgba(255, 255, 255, 0.25);
  background: none;
  cursor: not-allowed;
}
.create-more-wrapper-autocomplere {
  margin-top: 8px;
  max-width: 544px;
}
.create-more-wrapper-autocomplere__popper .ovui-auto-complete-option {
  padding: 0;
}
.create-more-wrapper-autocomplere__popper-span {
  margin-left: 8px;
}
.create-more-wrapper-autocomplere__popper-span__search-key {
  color: #651dff;
  font-weight: 600;
}
.create-more-wrapper-autocomplere__popper-option {
  width: 100%;
  padding: 6px 12px;
  display: flex;
}
div + .create-more-wrapper-collapse {
  margin-top: 8px;
}
.create-more-wrapper-collapse-open .oc-collapse__container:not(:empty) {
  margin-bottom: 8px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-audience-district-radio {
  flex: 1;
}
.oc-create-audience-district-radio .ovui-radio-group {
  flex-wrap: wrap;
  gap: 4px 8px;
}
.oc-create-audience-district .ml-16 {
  margin-left: 16px;
}
.oc-create-audience-district .before-radio {
  display: flex;
  align-items: center;
  margin-right: 8px;
}
.oc-create-audience-district-city .oc-tabs {
  background: #261d38;
  border-radius: 24px 24px 0 0;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
}
.oc-create-audience-district-city .oc-tabs .ovui-tabs__nav {
  padding-left: 16px;
}
.oc-create-audience-district-city .oc-tabs .switch-text {
  font-size: 14px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.75);
  margin-right: 12px;
  margin-left: 4px;
}
.oc-create-audience-district-city .oc-tabs .ovui-tabs__extra-content {
  align-items: center;
}
.oc-create-audience-district-city .city-tab {
  padding: 7px 0;
  font-weight: 600;
}
.oc-create-audience-district-city .ovui-cascader-panel__main {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.oc-create-audience-district-city .ovui-cascader-panel__main .create-audience-district-city__label-extra > span {
  white-space: nowrap;
}
.oc-create-audience-district-city .after-cascader {
  margin-top: 8px;
  display: flex;
  align-items: center;
}
.oc-create-audience-district-city .create-more-wrapper-header-left {
  color: #ffffff;
}
.oc-create-audience-district-city__header {
  margin-left: 12px;
  font-size: 14px;
  height: 22px;
  display: flex;
  align-items: center;
}
.oc-create-audience-district-city__header-span {
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}
.oc-create-audience-district-city .title-no-bgcolor .ovui-cascader-panel__selection-header {
  background: none;
}
.oc-create-audience-district-city-disabled .title-no-bgcolor .ovui-cascader-panel__selection-header {
  color: #bfc1c5;
}
.oc-create-audience-district-business {
  display: flex;
  flex-direction: row;
}
.oc-create-audience-district-business__map .arco-input-search .arco-input-group {
  width: 544px;
}
.oc-create-audience-district-business__map .arco-input-search .arco-input-group .arco-input-inner-wrapper {
  border-radius: 24px;
}
.oc-create-audience-district-business__map .arco-input-search .arco-input-group .arco-input-group-prefix {
  color: rgba(255, 255, 255, 0.5);
}
.oc-create-audience-district-business__map .amap-maps .text {
  color: #651dff !important;
}
.oc-create-audience-district-business__map .amap-container {
  border-radius: 24px;
}
.oc-create-audience-district-business-disabled-all {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(255, 255, 255, 0.6);
  cursor: not-allowed;
  z-index: 151;
}
.oc-create-audience-district-store {
  display: flex;
  flex-direction: row;
  margin-bottom: 24px;
}
.oc-create-audience-district-store-disabled {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgba(255, 255, 255, 0.6);
  cursor: not-allowed;
}
.oc-create-audience-district-store-disabled-all {
  z-index: 151;
}
.oc-create-audience-district-store__map .arco-spin {
  display: block;
}
.oc-create-audience-district-store__map .arco-input-search,
.oc-create-audience-district-store__map .arco-input-group {
  display: none;
}
.oc-create-audience-district-store__card {
  width: 340px;
  padding: 16px;
  border-radius: 24px;
  background: #302842;
  position: absolute;
  bottom: 290px;
  right: 16px;
  z-index: 1;
}
.oc-create-audience-district-store__card-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.oc-create-audience-district-store__card-footer div + div {
  margin-left: 8px;
}
.oc-create-audience-district-store__card-slider {
  display: flex;
  margin-top: 16px;
}
.oc-create-audience-district-store__card-slider-title {
  font-size: 12px;
  line-height: 20px;
  color: #ffffff;
}
.oc-create-audience-district-store__card-slider-box {
  position: relative;
  width: 248px;
  padding-bottom: 26px;
  margin-top: 8px;
}
.oc-create-audience-district-store__card-slider-box-text {
  position: absolute;
  top: 12px;
  left: 50%;
  color: #651dff;
  font-size: 12px;
  line-height: 20px;
  transform: translate(-50%, 0px);
}
.oc-create-audience-district-store__card-slider-box .ovui-slider__track,
.oc-create-audience-district-store__card-slider-box .ovui-slider__rail {
  height: 2px;
}
.oc-create-audience-district-store__card-slider-box .ovui-slider__thumb {
  width: 12px;
  height: 12px;
}
.oc-create-audience-district-store__card-slider-box .ovui-slider__marks {
  top: 12px;
}
.oc-create-audience-district-store__card-slider-box .ovui-slider__marks span {
  font-size: 12px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.5);
}
.oc-create-audience-district-store__bar {
  padding: 12px;
  position: absolute;
  bottom: 44px;
  right: 16px;
  left: 16px;
  z-index: 1;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
}
.oc-create-audience-district-store__bar .oc-msg-icon {
  color: #4d00f3;
}
.oc-create-audience-district-county__header {
  margin-left: 12px;
  font-size: 14px;
  line-height: 22px;
}
.oc-create-audience-district-county__header-span {
  font-size: 14px;
  color: #ffffff;
  font-weight: 500;
}
.oc-create-audience-district-county .after-cascader {
  margin-top: 8px;
  display: flex;
  align-items: flex-start;
}
.oc-create-audience-district-county .after-cascader-span {
  font-size: 14px;
  color: #ffffff;
  font-weight: 500;
  line-height: 22px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.custom-select-wrapper {
  margin-top: 8px;
  display: flex;
  flex-direction: row;
  align-items: top;
}
.custom-select-wrapper-connect {
  margin: 0 8px;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  color: #ffffff;
  font-weight: 400;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-audience-mobile-brand {
  width: 792px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-audio-card .oc-create-audio-card-wrapper-selected {
  padding: 10px 22px 10px 10px !important;
}
.oc-create-audio-card .oc-create-audio-card-wrapper {
  display: flex;
  flex-direction: row;
  padding: 10px;
  border-radius: 24px;
  background: #302842;
  position: relative;
  width: 100%;
  height: 100%;
}
.oc-create-audio-card .oc-create-audio-card-wrapper .oc-create-audio-card-select-checkbox {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-radius: 8px;
  color: rgba(0, 0, 0, 0);
  background: #302842;
  border: 2px solid #dfe0e2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.oc-create-audio-card .oc-create-audio-card-wrapper .oc-create-audio-card-select-checkbox .oc-create-audio-card-select-checkbox-icon {
  margin-top: 4px;
  display: none;
}
.oc-create-audio-card .oc-create-audio-card-wrapper .oc-create-audio-card-select-radio {
  position: absolute;
  z-index: 2;
  top: 0px;
  right: 0px;
  padding: 2px 4px;
}
.oc-create-audio-card .oc-create-audio-card-wrapper .oc-create-audio-card-select-radio .ovui-radio__inner {
  border-color: #dfe0e2;
  border-width: 2px;
}
.oc-create-audio-card .oc-create-audio-card-wrapper .oc-create-audio-card-close {
  display: none;
  position: absolute;
  right: -8px;
  top: -8px;
  color: rgba(255, 255, 255, 0.5);
  z-index: 3;
  cursor: pointer;
}
.oc-create-audio-card .oc-create-audio-card-wrapper .oc-create-audio-card-closable:hover {
  border-color: #651dff;
}
.oc-create-audio-card .oc-create-audio-card-wrapper .oc-create-audio-card-avatar-wrapper {
  position: relative;
  margin-right: 8px;
  width: 40px;
  height: 40px;
}
.oc-create-audio-card .oc-create-audio-card-wrapper .oc-create-audio-card-avatar-wrapper .oc-image-img {
  height: 100% !important;
}
.oc-create-audio-card .oc-create-audio-card-wrapper .oc-create-audio-card-avatar-wrapper .oc-create-audio-card-avatar-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: unset;
  cursor: pointer;
}
.oc-create-audio-card .oc-create-audio-card-wrapper .oc-create-audio-card-avatar-wrapper .oc-create-audio-card-avatar-mask {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.12);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.oc-create-audio-card .oc-create-audio-card-wrapper .oc-create-audio-card-avatar-wrapper:hover .oc-create-audio-card-avatar-mask {
  background: rgba(0, 0, 0, 0.5);
}
.oc-create-audio-card .oc-create-audio-card-wrapper .oc-create-audio-card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.oc-create-audio-card .oc-create-audio-card-wrapper .oc-create-audio-card-content .oc-create-audio-card-titile {
  margin-bottom: 4px;
}
.oc-create-audio-card .oc-create-audio-card-wrapper .oc-create-audio-card-content .oc-create-audio-card-tag-wrapper {
  margin-bottom: 4px;
  display: flex;
  flex-direction: row;
}
.oc-create-audio-card .oc-create-audio-card-wrapper .oc-create-audio-card-content .oc-create-audio-card-info .oc-create-audio-card-slider-wrapper {
  padding-left: 6px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.oc-create-audio-card .oc-create-audio-card-wrapper .oc-create-audio-card-content .oc-create-audio-card-info .oc-create-audio-card-slider-wrapper .oc-create-audio-card-slider {
  margin-top: 3px;
  margin-right: 8px;
  display: flex;
  flex: 1;
}
.oc-create-audio-card .oc-create-audio-card-wrapper .oc-create-audio-card-content .oc-create-audio-card-info .oc-create-audio-card-slider-wrapper .oc-create-audio-card-slider .ovui-slider__rail {
  background: #302842;
}
.oc-create-audio-card .oc-create-audio-card-wrapper .oc-create-audio-card-content .oc-create-audio-card-info .oc-create-audio-card-slider-wrapper .oc-create-audio-card-slider .ovui-slider__thumb {
  width: 12px !important;
  height: 12px !important;
  border-width: 3px !important;
}
.oc-create-audio-card .oc-create-audio-card-wrapper .oc-create-audio-card-content .oc-create-audio-card-info .oc-create-audio-card-slider-wrapper .ovui-slider--disabled .ovui-slider__rail {
  background-color: #534c61 !important;
}
.oc-create-audio-card .oc-create-audio-card-wrapper:hover .oc-create-audio-card-close {
  display: block;
}
.oc-create-audio-card .oc-create-audio-card-select {
  border: 1px solid #302842;
  box-sizing: border-box;
}
.oc-create-audio-card .oc-create-audio-card-select:hover {
  border-color: #651dff;
  cursor: pointer;
}
.oc-create-audio-card .oc-create-audio-card-select:hover .oc-create-audio-card-select-checkbox {
  border-color: #651dff;
}
.oc-create-audio-card .oc-create-audio-card-selected {
  border-color: #651dff;
}
.oc-create-audio-card .oc-create-audio-card-selected .oc-create-audio-card-select-checkbox {
  background: #651dff;
  border-color: #651dff;
}
.oc-create-audio-card .oc-create-audio-card-selected .oc-create-audio-card-select-checkbox .oc-create-audio-card-select-checkbox-icon {
  display: block;
}
.oc-create-audio-card .oc-create-audio-card-selected .oc-create-audio-card-select-checkbox .oc-create-audio-card-select-radio .ovui-radio__inner {
  background-color: #651dff;
  border-color: #651dff;
}
.oc-create-audio-card-disabled {
  position: relative;
}
.oc-create-audio-card-disabled .oc-create-audio-card-wrapper .oc-create-audio-card-avatar-wrapper .oc-create-audio-card-disabled-mask {
  position: absolute;
  background: rgba(255, 255, 255, 0.5);
  z-index: 3;
  border-radius: 8px;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
}
.oc-create-audio-card-disabled .oc-create-audio-card-wrapper .oc-create-audio-card-avatar-wrapper .oc-create-audio-card-disabled-mask:hover {
  cursor: not-allowed;
}
.oc-create-audio-card-disabled .ovui-tag--default-fill {
  background: rgba(0, 0, 0, 0);
}
.oc-create-audio-card-disabled .oc-create-audio-card-select:hover {
  border-color: #302842;
}
.oc-create-audio-card-disabled .oc-create-audio-card-select:hover .oc-create-audio-card-wrapper .oc-create-audio-card-select-checkbox {
  border-color: #302842;
}
.oc-create-audio-card-disabled .oc-create-audio-card-select:hover .oc-create-audio-card-wrapper .oc-create-audio-card-select-radio .ovui-radio__inner {
  border-color: #302842;
}
.oc-create-audio-card-disabled .oc-create-audio-card-selected .oc-create-audio-card-wrapper .oc-create-audio-card-select-checkbox {
  background: #651dff;
}
.oc-create-audio-card-disabled .oc-create-audio-card-selected .oc-create-audio-card-wrapper .oc-create-audio-card-select-radio .ovui-radio__inner {
  background: #651dff;
}
.oc-create-audio-card-disabled .oc-create-audio-card-selected:hover .oc-create-audio-card-wrapper .oc-create-audio-card-select-checkbox {
  background-color: #651dff;
}
.oc-create-audio-card-disabled .oc-create-audio-card-selected:hover .oc-create-audio-card-wrapper .oc-create-audio-card-select-radio .ovui-radio__inner {
  background: #651dff;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-aweme-star-container {
  width: 792px;
}
.oc-create-aweme-star-container .footer {
  border: none !important;
}
.oc-create-aweme-star-container .fans-num {
  font-weight: 400;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
.oc-create-aweme-star-container .aweme-star-select {
  padding: 12px;
  padding-bottom: 8px;
}
.oc-create-aweme-star-container .aweme-stars-table {
  position: relative;
  height: 292px;
  overflow: auto;
}
.oc-create-aweme-star-container .aweme-stars-table .table-title {
  display: flex;
  align-items: center;
  padding: 0 0 8px 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
  line-height: 20px;
}
.oc-create-aweme-star-container .selected-aweme-stars-table {
  position: relative;
}
.oc-create-aweme-star-container .selected-aweme-stars-table .head {
  border-bottom: 1px solid #ffffff;
  height: 38px;
  display: flex;
  align-items: center;
}
.oc-create-aweme-star-container .selected-aweme-stars-table .body {
  overflow: auto;
  height: 308px;
}
.oc-create-aweme-star-container .selected-aweme-stars-table .head,
.oc-create-aweme-star-container .selected-aweme-stars-table .row {
  display: flex;
  padding: 9px 12px;
  font-size: 14px;
  color: #ffffff;
  font-weight: 400;
  align-items: center;
}
.oc-create-aweme-star-container .selected-aweme-stars-table .head > *,
.oc-create-aweme-star-container .selected-aweme-stars-table .row > * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.oc-create-aweme-star-container .selected-aweme-stars-table .head .name,
.oc-create-aweme-star-container .selected-aweme-stars-table .row .name {
  width: 100px;
}
.oc-create-aweme-star-container .selected-aweme-stars-table .head .count,
.oc-create-aweme-star-container .selected-aweme-stars-table .row .count {
  width: 60px;
  margin-left: 8px;
  margin-right: 8px;
}
.oc-create-aweme-star-container .selected-aweme-stars-table .head .oc-popover span,
.oc-create-aweme-star-container .selected-aweme-stars-table .row .oc-popover span {
  display: flex;
}
.oc-create-aweme-star-container .empty-stars {
  height: 260px;
}
.oc-create-aweme-star-container .right-panel-header {
  display: flex;
  height: 38px;
  padding-left: 12px;
  align-items: center;
  background: #261d38;
  font-weight: 500;
  color: #ffffff;
  font-size: 14px;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #ffffff;
}
.oc-create-aweme-star-container .aweme-star-cascader-panel-footer-show {
  height: 305px;
}
.oc-create-aweme-star-container .aweme-star-cascader-panel-footer-hide {
  height: 343px;
}
.oc-create-aweme-star-container .aweme-star-cascader-panel .ovui-cascader-panel__main--border {
  overflow: hidden;
  border: none;
}
.oc-create-aweme-star-container .aweme-star-cascader-panel-unselected .ovui-cascader-panel__selection-block {
  min-height: 345px;
}
.oc-create-aweme-star-container .aweme-star-cascader-panel-selected .ovui-cascader-panel__selection-block {
  min-height: 305px;
}
.oc-create-aweme-star-container--footer .left-panel .footer {
  border-top: 1px solid #ffffff !important;
}
.oc-create-aweme-star-select-filter {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 14px;
  color: #ffffff;
}
.oc-create-aweme-star-select-filter .behaviors-select {
  width: 180px;
  margin: 0 12px;
}
.oc-create-aweme-star-select-filter .behaviors-select .ovui-custom-input {
  overflow-x: hidden;
}
.oc-create-aweme-star-select-filter .time-select {
  width: 96px;
  margin: 0 12px;
}
.oc-create-aweme-star-input {
  width: calc(100% - 248px);
  margin-bottom: 8px;
}
.oc-create-aweme-star-checkbox-option-container {
  width: 100%;
  margin-left: 0 !important;
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 56px;
  padding: 0 24px 0 12px;
}
.oc-create-aweme-star-checkbox-option-container img {
  width: 100%;
  height: 100%;
}
.oc-create-aweme-star-checkbox-option-container .ovui-checkbox {
  width: 100%;
}
.oc-create-aweme-star-checkbox-option-container .ovui-checkbox__label {
  width: 100%;
}
.oc-create-aweme-star-checkbox-option-container .ovui-checkbox {
  display: flex;
  align-items: center;
}
.oc-create-aweme-star-checkbox-option-container:hover {
  background-color: #1a112e;
}
.oc-create-aweme-star-checkbox-option-container .checkbox-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.oc-create-aweme-star-checkbox-option-container .checkbox-option .left {
  display: flex;
  align-items: center;
}
.oc-create-aweme-star-checkbox-option-container .checkbox-option .left .avatar {
  margin-right: 8px;
  height: 32px;
  width: 32px;
}
.oc-create-aweme-star-checkbox-option-container .checkbox-option .left .title {
  width: 280px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.oc-create-aweme-star-checkbox-option-container .checkbox-option .left .description {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}
.oc-create-aweme-star-auto-complete {
  position: absolute;
  top: 40px;
  width: 544px;
  max-height: 321px;
  padding-top: 12px;
  overflow: auto;
  background-color: #302842;
  line-height: 20px;
  border-radius: 8px;
  box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.08);
  z-index: 3;
}
.oc-create-aweme-star-auto-complete .label {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  padding: 0 12px;
  font-weight: 400;
  line-height: 18px;
}
.oc-create-aweme-star-row {
  padding: 0 12px;
  height: 56px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.oc-create-aweme-star-row:hover {
  background-color: #f4f4f5;
}
.oc-create-aweme-star-row .avatar {
  height: 32px;
  width: 32px;
  margin-right: 8px;
  border-radius: 50%;
}
.oc-create-aweme-star-row .name {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
}
.oc-create-aweme-star-row .num {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-batch-select-input {
  width: 546px;
  margin-bottom: 13px;
}
.oc-create-batch-select-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.oc-create-batch-select-panel {
  display: flex;
}
.oc-create-batch-select-panel-left {
  width: 546px;
  border-radius: 24px;
  border: solid 1px #ebebed;
}
.oc-create-batch-select-panel-left-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 37px;
  background-color: #261d38;
  border-radius: 24px 24px 0 0;
  border-bottom: solid 1px #ebebed;
}
.oc-create-batch-select-panel-left-header-left {
  display: flex;
  align-items: center;
}
.oc-create-batch-select-panel-left-header-title {
  margin-left: 12px;
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  color: #ffffff;
}
.oc-create-batch-select-panel-left-body {
  height: 281px;
  width: 100%;
  overflow-y: scroll;
  padding: 6px 0;
  position: relative;
}
.oc-create-batch-select-panel-left-body-item {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 4px 12px;
  justify-content: space-between;
  cursor: pointer;
}
.oc-create-batch-select-panel-left-body-item-one-line {
  height: 22px;
}
.oc-create-batch-select-panel-left-body-item-prefix {
  display: flex;
  align-items: center;
}
.oc-create-batch-select-panel-left-body-item:hover {
  background-color: #f4f4f5;
}
.oc-create-batch-select-panel-left-body-all {
  padding: 8px 12px;
}
.oc-create-batch-select-panel-left-body-all:hover {
  background-color: #f4f4f5;
}
.oc-create-batch-select-panel-left-empty {
  position: absolute;
  top: 96px;
  width: 100%;
}
.oc-create-batch-select-panel-right {
  margin-left: 8px;
  width: 240px;
  height: 100%;
  border-radius: 24px;
  border: solid 1px #ebebed;
}
.oc-create-batch-select-panel-right-header {
  width: 100%;
  height: 38px;
  background-color: #261d38;
  border-radius: 24px 24px 0 0;
  border-bottom: solid 1px #ebebed;
  font-weight: 600;
  font-size: 14px;
  line-height: 38px;
  color: #ffffff;
  padding-left: 12px;
}
.oc-create-batch-select-panel-right-body {
  height: 280px;
  width: 100%;
  overflow-y: scroll;
  padding: 0 12px 12px 12px;
  position: relative;
}
.oc-create-batch-select-panel-right-body-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}
.oc-create-batch-select-panel-right-empty {
  position: absolute;
  top: 95px;
  width: calc(100% - 24px);
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-brand-custom-audience-package {
  width: 792px;
}
.oc-create-brand-custom-audience-package .brand-custom-audience-package-type {
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 14px;
}
.oc-create-brand-custom-audience-package .brand-custom-audience-package-info {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.oc-create-brand-custom-audience-package .brand-custom-audience-package-info-operate {
  display: flex;
}
.oc-create-brand-custom-audience-package .brand-custom-audience-package-info-operate .oc-typography {
  margin-right: 8px;
}
.oc-create-brand-custom-audience-package .brand-custom-audience-package-info-operate .oc-typography:last-child {
  margin-right: 0;
}
.oc-create-brand-custom-audience-package .brand-custom-audience-package-info-include {
  display: inline-block;
  margin-right: 12px;
}
.oc-create-brand-custom-audience-package .brand-custom-audience-package-info-exclude {
  display: inline-block;
}
.oc-create-brand-custom-audience-package .brand-custom-audience-package-info-num {
  font-weight: 400;
}
.oc-create-brand-custom-audience-package-table {
  margin-top: 8px;
  display: flex;
  height: 322px;
}
.oc-create-brand-custom-audience-package-table-left {
  border: 1px solid #ffffff;
  border-radius: 24px;
  overflow: hidden;
  width: 546px;
}
.oc-create-brand-custom-audience-package-table-left .ovui-cascader-panel__main--border {
  border: 0px;
}
.oc-create-brand-custom-audience-package-table-left .oc-audience-package-table-name {
  display: flex;
  align-items: center;
  padding-left: 32px;
  height: 42px;
  position: relative;
  top: -1px;
}
.oc-create-brand-custom-audience-package-table-right {
  width: 240px;
  margin-left: 8px;
  border: 1px solid #ffffff;
  border-radius: 24px;
  overflow: hidden;
}
.oc-create-brand-custom-audience-package-table-right .brand-package-exhibition {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.oc-create-brand-custom-audience-package-table-right .brand-package-exhibition-header {
  display: flex;
  justify-content: space-between;
  padding: 0 12px;
  background-color: #261d38;
  border-bottom: 1px solid #ffffff;
  font-size: 14px;
  line-height: 36px;
  color: #ffffff;
  font-weight: 600;
}
.oc-create-brand-custom-audience-package-table-right .brand-package-exhibition-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 12px;
  max-height: 283px;
  overflow: auto;
}
.oc-create-brand-custom-audience-package-table-right .brand-package-exhibition-body-empty {
  margin: auto;
}
.oc-create-brand-custom-audience-package-table-right .brand-package-exhibition-body-item {
  margin-top: 8px;
  width: 100%;
  height: 26px;
  background-color: #261d38;
  border-radius: 8px;
  padding: 1px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.oc-create-brand-custom-audience-package-table-right .brand-package-exhibition-body-item iconpark-icon {
  cursor: pointer;
}
.oc-create-brand-custom-audience-package-table-right .brand-package-exhibition-body-item:last-child {
  margin-bottom: 12px;
}
.oc-create-brand-custom-audience-package-table-tab-single .ovui-tabs__bar--show {
  display: none;
}
.oc-create-brand-package-table {
  position: relative;
  width: 544px;
}
.oc-create-brand-package-table .ovui-table__wrapper .ovui-th {
  background-color: #fff;
  height: 32px;
  padding: 0 0 0 12px;
  font-size: 14px;
  line-height: 22px;
  border-bottom: 1px solid #1a112e;
}
.oc-create-brand-package-table .ovui-table__wrapper .ovui-tbody {
  padding: 6px 0;
  overflow-y: scroll;
}
.oc-create-brand-package-table .ovui-table__wrapper .ovui-tbody .ovui-tr:hover {
  background-color: #261d38;
}
.oc-create-brand-package-table .ovui-table__wrapper .ovui-tbody .ovui-tr:hover .ovui-td {
  background: transparent;
}
.oc-create-brand-package-table .ovui-table__wrapper .ovui-tbody .ovui-td {
  padding: 5px 0 5px 12px;
  border: none;
  font-size: 14px;
  line-height: 22px;
}
.oc-create-brand-package-table .ovui-table__wrapper .ovui-tbody .ovui-td:nth-of-type(2) {
  padding: 0px;
}
.brand-package-table-header-tab {
  margin: 0 12px;
  height: 36px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-calendar {
  position: relative;
}
.oc-create-calendar-checkout-today {
  position: absolute;
  right: 0;
  top: 8px;
}
.oc-create-calendar .ovui-date__table {
  height: auto;
  width: auto;
  padding: 0;
}
.oc-create-calendar .ovui-date__table .ovui-date__row {
  gap: 4px;
  margin-top: 4px;
}
.oc-create-calendar .ovui-date__table .ovui-date__cell {
  height: 80px;
  width: 97px;
  border-radius: 24px;
}
.oc-create-calendar .ovui-date-picker-panel {
  border: none;
  border-radius: 0;
}
.oc-create-calendar .ovui-date__header {
  border-bottom: none;
  background-color: transparent;
  line-height: 28px;
}
.oc-create-calendar .ovui-date__header .ovui-date__header-label {
  flex: none;
  margin: 0 66px;
}
.oc-create-calendar-custom-wrapper {
  height: 100%;
  width: 100%;
  position: relative;
  border-radius: 24px;
  color: rgba(255, 255, 255, 0.25);
}
.oc-create-calendar-custom-wrapper-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.oc-create-calendar-custom-wrapper-content-description {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}
.oc-create-calendar-custom-active {
  background-color: #302842;
  border: 1px solid #651dff;
  color: #651dff;
}
.oc-create-calendar-custom-in-week {
  background-color: #381088;
  color: #ffffff;
}
.oc-create-calendar-custom-in-week-grap {
  opacity: 40%;
  color: #ffffff;
}
.oc-create-calendar-custom-in-month {
  background-color: #302842;
  color: #ffffff;
}
.oc-create-calendar-custom-hover {
  background-color: #1a112e;
}
.oc-create-calendar-custom-disabled {
  color: rgba(255, 255, 255, 0.12);
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-item-card {
  display: flex;
  align-items: center;
  width: 544px;
  height: 64px;
  background-color: #261d38;
  border-radius: 24px;
  position: relative;
}
.oc-item-card-errorMsg {
  color: #e5453f;
  font-size: 12px;
  line-height: 18px;
  margin-top: 4px;
}
.oc-item-card-error {
  background-color: rgba(255, 0, 96, 0.06);
}
.oc-item-card-img-box {
  width: 27px;
  height: 48px;
  margin-left: 8px;
  margin-right: 8px;
  overflow: hidden;
  background-color: #261d38;
}
.oc-item-card-img-box .oc-image-img {
  height: 100%;
}
.oc-item-card-img-box .oc-image {
  border-radius: 8px;
}
.oc-item-card-img-box-img {
  width: 100%;
  height: 100%;
}
.oc-item-card-info-title {
  display: flex;
  gap: 4px;
  align-self: center;
  margin-bottom: 8px;
}
.oc-item-card-info-title .oc-tag {
  margin-top: 1px;
}
.oc-item-card-info-extra,
.oc-item-card-info-vertical,
.oc-item-card-info-id {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  line-height: 18px;
}
.oc-item-card-info-vertical-container {
  display: flex;
}
.oc-item-card-info-vertical {
  margin-right: 16px;
}
.oc-item-card-change {
  cursor: pointer;
  position: absolute;
  right: 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #651dff;
  display: flex;
  gap: 4px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-custom-package-wrapper {
  width: 792px;
}
.oc-custom-package-wrapper-header {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.oc-custom-package-wrapper-header-operate {
  display: flex;
}
.oc-custom-package-wrapper-header-operate .oc-typography {
  margin-right: 4px;
}
.oc-custom-package-wrapper-header-operate .oc-typography:last-child {
  margin-right: 0;
}
.oc-custom-package-wrapper-header-include {
  display: inline-block;
  margin-right: 12px;
}
.oc-custom-package-wrapper-header-exclude {
  display: inline-block;
}
.oc-custom-package-wrapper-header-num {
  font-weight: 400;
}
.oc-custom-package-wrapper-header-icon-disabled {
  color: rgba(255, 255, 255, 0.25);
  cursor: not-allowed;
}
.oc-custom-package-wrapper-header-icon {
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
}
.oc-custom-package-wrapper-header-icon span:hover {
  background: #381088;
  border-radius: 4px;
}
.oc-custom-package-wrapper-main {
  margin-top: 8px;
  display: flex;
  height: 322px;
}
.oc-custom-package-wrapper-main-left {
  border: 1px solid #1a112e;
  border-radius: 24px;
  overflow: hidden;
  width: 546px;
}
.oc-custom-package-wrapper-main-right {
  width: 240px;
  margin-left: 8px;
  border: 1px solid #1a112e;
  border-radius: 24px;
  overflow: hidden;
}
.oc-package-exhibition {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.oc-package-exhibition-header {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background-color: #261d38;
  border-bottom: 1px solid #1a112e;
}
.oc-package-exhibition-header span {
  font-size: 14px;
  line-height: 22px;
}
.oc-package-exhibition-tab .ovui-tabs__nav {
  padding-left: 12px;
}
.oc-package-exhibition-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 12px;
  max-height: 253px;
  overflow: auto;
}
.oc-package-exhibition-body-empty {
  margin: auto;
}
.oc-package-exhibition-body-item {
  margin-top: 12px;
  height: 24px;
  background-color: #261d38;
  border-radius: 8px;
  padding: 1px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.oc-package-exhibition-body-item-right {
  flex: none;
  margin-left: 4px;
  font-size: 0;
}
.oc-package-exhibition-body-item:last-child {
  margin-bottom: 12px;
}
.oc-package-table-header-tab {
  margin: 0 12px;
  height: 36px;
}
.oc-package-table {
  position: relative;
  width: 544px;
}
.oc-package-table .ovui-table__wrapper .ovui-th {
  background-color: #fff;
  height: 32px;
  padding: 0 0 0 12px;
  font-size: 14px;
  line-height: 22px;
  border-bottom: 1px solid #1a112e;
}
.oc-package-table .ovui-table__wrapper .ovui-tbody {
  padding: 6px 0;
}
.oc-package-table .ovui-table__wrapper .ovui-tbody .ovui-td {
  padding: 5px 0 5px 12px;
  border: none;
  font-size: 14px;
  line-height: 22px;
}
.oc-package-hide-th .ovui-th {
  display: none;
}
.oc-package-hide-tab .ovui-table__wrapper .ovui-tr .ovui-th {
  background-color: #261d38;
  height: 38px;
}
.oc-package-table-btn-wrapper {
  display: flex;
  margin-right: 12px;
}
.oc-package-table-btn-wrapper .oc-button-wrap {
  margin-right: 14px;
}
.oc-package-table-btn-wrapper .oc-button-wrap:last-child {
  margin-right: 0;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-external-url {
  width: 100%;
  min-width: 570px;
}
.oc-external-url-top-operate {
  display: flex;
  align-items: center;
}
.oc-external-url-top-operate-text {
  margin-left: 8px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  line-height: 22px;
}
.oc-external-url-list {
  overflow-y: auto;
  width: 100%;
}
.oc-external-url-item {
  margin-top: 8px;
}
.oc-external-url-item-box {
  display: flex;
  gap: 4px;
  align-items: center;
}
.oc-external-url-item-input {
  display: flex;
  align-items: center;
  position: relative;
}
.oc-external-url-item-input-change {
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: #651dff;
  margin-right: 3px;
  cursor: pointer;
}
.oc-external-url-item-input-button {
  margin-left: 8px;
}
.oc-external-url-item-input-after {
  margin-left: 8px;
}
.oc-external-url-item-input-change-disabled {
  color: rgba(255, 255, 255, 0.25);
}
.oc-external-url-item-input-delete {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1em;
}
.oc-external-url-item-input-delete:hover {
  color: #651dff;
}
.oc-external-url-item-input-delete-disabled {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
}
.oc-external-url-item-card {
  display: flex;
  margin-top: 4px;
}
.oc-external-url-item-card-delete {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
}
.oc-external-url-item-card-delete:hover {
  color: #651dff;
}
.oc-external-url-item-card-delete-disabled {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
}
.oc-external-url-add {
  margin-top: 8px;
}
.oc-external-url-plus {
  margin-right: 4px;
  color: rgba(255, 255, 255, 0.75);
}
.oc-external-url-drawer-body .oc-create-material-card-select-top-right {
  top: 50% !important;
  left: 50%;
  right: inherit !important;
  transform: translate(-50%, -50%);
  z-index: 10 !important;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-inventory-info {
  width: 100%;
}
.oc-create-inventory-info .oc-title + .content-wrapper {
  padding-top: 8px;
}
.oc-create-inventory-info .content-wrapper {
  display: flex;
  flex-direction: column;
}
.oc-create-inventory-info .content-wrapper .title {
  display: flex;
}
.oc-create-inventory-info .content-wrapper .title-item {
  display: flex;
  align-items: center;
}
.oc-create-inventory-info .content-wrapper .title-item-0 {
  width: 66px;
  padding-left: 8px;
}
.oc-create-inventory-info .content-wrapper .title-item-1,
.oc-create-inventory-info .content-wrapper .title-item-2 {
  flex: 1;
}
.oc-create-inventory-info .content-wrapper .list {
  margin-top: 12px;
}
.oc-create-inventory-info .content-wrapper .list .oc-create-inventory-info-item + .oc-create-inventory-info-item {
  margin-top: 12px;
}
.oc-create-inventory-info-item {
  display: flex;
  align-items: center;
  padding: 8px 14px 8px 8px;
  background-color: #302842;
}
.oc-create-inventory-info-item .img {
  display: flex;
  align-items: center;
  width: 66px;
}
.oc-create-inventory-info-item .img .test {
  width: 28px;
}
.oc-create-inventory-info-item .img .oc-popover {
  margin-left: 4px;
}
.oc-create-inventory-info-item .num,
.oc-create-inventory-info-item .cnt {
  display: flex;
  align-items: center;
  flex: 1;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-kv-info {
  width: 100%;
}
.oc-create-kv-info .oc-title + .content-wrapper {
  padding-top: 8px;
}
.oc-create-kv-info .content-wrapper-top .oc-key-value + .oc-key-value {
  margin-top: 12px !important;
}
.oc-create-kv-info .content-wrapper-left .oc-typography + .oc-typography {
  margin-top: 8px;
}
.oc-create-kv-info .content-wrapper .oc-key-value-value {
  flex: 1;
}
.oc-create-kv-info .oc-create-kv-info-key {
  margin-right: 8px;
  color: rgba(255, 255, 255, 0.75);
}
.oc-create-kv-info .oc-create-kv-info-item {
  padding-top: 8px;
  display: flex;
  padding-bottom: 8px;
}
.oc-create-kv-info .oc-create-kv-info-tag-list {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
}
.oc-create-kv-info .oc-create-kv-info-tag-key {
  margin-right: 4px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  line-height: 18px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-sidebar {
  box-sizing: border-box;
  position: absolute;
  width: 200px !important;
}
.oc-sidebar .oc-card-wrapper {
  height: calc(100vh - 102px);
  overflow-x: hidden;
}
.oc-sidebar::-webkit-scrollbar-track-piece {
  background-color: transparent;
}
.oc-sidebar::-webkit-scrollbar {
  width: 6px;
}
.oc-sidebar::-webkit-scrollbar-thumb {
  background-color: #e7e7e7;
  border-radius: 5px;
  background-clip: padding-box;
  min-height: 28px;
}
.oc-sidebar::-webkit-scrollbar-thumb:hover {
  background-color: #ddd;
}
.oc-sidebar .menu-left {
  padding: 12px 8px;
  width: 100%;
}
.oc-sidebar .item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  height: 38px;
  width: 100%;
  line-height: 22px;
  padding-left: 40px;
  font-size: 14px;
  flex: 1;
  position: relative;
}
.oc-sidebar .menu-left-step {
  margin-bottom: 16px;
}
.oc-sidebar .menu-left-step:last-child {
  margin-bottom: 0;
}
.oc-sidebar .menu-left-step-header {
  font-weight: bolder;
  color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.oc-sidebar .menu-left-step-item {
  color: #ffffff;
}
.oc-sidebar .menu-left-step-item::before {
  content: "";
  width: 4px;
  height: 4px;
  display: block;
  border-radius: 8px;
  background-color: #ffffff;
  position: absolute;
  left: 19px;
  transition: all 0.2s;
}
.oc-sidebar .menu-left-step-item.active,
.oc-sidebar .menu-left-step-item:hover {
  cursor: pointer;
  color: #651dff;
}
.oc-sidebar .menu-left-step-item.active::before,
.oc-sidebar .menu-left-step-item:hover::before {
  background-color: #651dff;
}
.oc-sidebar .menu-left-step-child {
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 20px;
  color: #ffffff;
  padding-left: 50px;
  margin: 8px 0;
  cursor: pointer;
  position: relative;
}
.oc-sidebar .menu-left-step-child__anchor {
  position: relative;
}
.oc-sidebar .menu-left-step-child__anchor::before {
  position: absolute;
  height: 100%;
  left: -16px;
  top: 0;
  background: #dfe0e2;
  width: 2px;
  content: "";
}
.oc-sidebar .menu-left-step-child .menu-left-step-child-item {
  margin-bottom: 12px;
  position: relative;
}
.oc-sidebar .menu-left-step-child .menu-left-step-child-item:last-child {
  margin-bottom: 0;
}
.oc-sidebar .menu-left-step-child .menu-left-step-child-item:hover {
  color: #651dff;
}
.oc-sidebar .menu-left-step-child .menu-left-step-child-item.active {
  color: #651dff;
}
.oc-sidebar .menu-left-step-child .menu-left-step-child-item.active::before {
  position: absolute;
  height: 100%;
  left: -16px;
  top: 0;
  background: #651dff;
  width: 2px;
  content: "";
}
.oc-sidebar .menu-left-step .step,
.oc-sidebar .menu-left-step .icon-name {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  color: rgba(0, 0, 0, 0);
  background-color: #bfc1c5;
  text-align: center;
  display: inline-block;
  line-height: 20px;
  position: absolute;
  left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.oc-sidebar .menu-left-step .step-status {
  width: 14px;
  height: 14px;
  line-height: 14px;
  right: 12px;
  left: inherit;
  position: absolute;
  color: #ff0060;
  top: 50%;
  margin-top: -7px;
  font-size: 14px;
}
.oc-sidebar .menu-left-step .icon-name {
  color: rgba(255, 255, 255, 0.5);
  background-color: inherit;
}
.oc-sidebar .menu-left-step.done {
  cursor: auto;
}
.oc-sidebar .menu-left-step.done .menu-left-step-header {
  color: #ffffff;
}
.oc-sidebar .menu-left-step.done .step {
  background-color: #381088;
  color: #651dff;
}
.oc-sidebar .menu-left-step.done .icon-name {
  color: #651dff;
}
.oc-sidebar .menu-left-step.active .menu-left-step-header {
  color: #651dff;
}
.oc-sidebar .menu-left-step.active .step {
  background-color: #651dff;
  color: rgba(0, 0, 0, 0);
}
.oc-sidebar .menu-left-step.active .icon-name {
  color: #651dff;
}
.oc-create-layout .oc-layout__main-wrapper {
  padding-left: 200px;
}
/*
* 屏幕自适应
* < 1280 滚动条
* 1280-1440 小导航，左右自适应
* 1440-1920 大导航，左右自适应
* > 1902 大导航，左右定宽，1688
*/
.oc-sidebar-collapsed {
  width: 44px !important;
  position: absolute;
  transition: width 0s;
}
.oc-sidebar-collapsed .menu-left {
  padding: 12px 0;
}
.oc-sidebar-collapsed .menu-left__header {
  padding-left: 8px;
}
.oc-sidebar-collapsed .menu-name,
.oc-sidebar-collapsed .menu-left-step-child {
  display: none;
}
.oc-sidebar-collapsed .menu-left-step {
  padding: 0 8px;
}
.oc-sidebar-collapsed .menu-left-step .step {
  left: 4px;
}
.oc-sidebar-collapsed .menu-left-step-item {
  padding: 0;
  width: 36px;
  cursor: pointer;
}
.oc-sidebar-collapsed .menu-left-step-item::before {
  left: 10px;
}
.oc-sidebar-collapsed .menu-left-step-item.error::before {
  background-color: #ff0060;
}
.oc-sidebar-collapsed .menu-left-step-item .step-status {
  display: none !important;
}
.oc-sidebar-collapsed .item {
  padding-left: 28px;
}
.oc-sidebar-collapsed .item .icon-name {
  margin-left: -6px;
}
.oc-sidebar-collapsed:hover {
  width: 200px !important;
  transition: width 0.1s;
}
.oc-sidebar-collapsed:hover .oc-card-wrapper {
  background-color: #302842 !important;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
}
.oc-sidebar-collapsed:hover .menu-left {
  padding: 12px 8px;
}
.oc-sidebar-collapsed:hover .menu-left__header {
  padding-left: 0;
}
.oc-sidebar-collapsed:hover .menu-name,
.oc-sidebar-collapsed:hover .menu-left-step-child {
  display: block;
}
.oc-sidebar-collapsed:hover .menu-left-step {
  padding: 0;
}
.oc-sidebar-collapsed:hover .menu-left-step .step {
  left: 10px;
}
.oc-sidebar-collapsed:hover .menu-left-step-item {
  padding-left: 40px;
  width: 100%;
  cursor: pointer;
}
.oc-sidebar-collapsed:hover .menu-left-step-item::before {
  left: 19px;
}
.oc-sidebar-collapsed:hover .menu-left-step-item.error::before {
  background-color: #ffffff;
}
.oc-sidebar-collapsed:hover .menu-left-step-item.error.active::before {
  background-color: #651dff;
}
.oc-sidebar-collapsed:hover .menu-left-step-item .step-status {
  display: block !important;
}
.oc-sidebar-collapsed:hover .item {
  padding-left: 40px;
}
.oc-sidebar-collapsed:hover .item .icon-name {
  margin-left: 0px;
}
.oc-create-layout-collapsed .oc-layout__main-wrapper {
  padding-left: 44px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.vue-advanced-cropper {
  text-align: center;
  position: relative;
  -moz-user-select: none;
       user-select: none;
  max-height: 100%;
  max-width: 100%;
  direction: ltr;
}
.vue-advanced-cropper__stretcher {
  pointer-events: none;
  position: relative;
  max-width: 100%;
  max-height: 100%;
}
.vue-advanced-cropper__image {
  -moz-user-select: none;
       user-select: none;
  position: absolute;
  transform-origin: center;
  max-width: none !important;
}
.vue-advanced-cropper__background,
.vue-advanced-cropper__foreground {
  opacity: 1;
  background: black;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}
.vue-advanced-cropper__foreground {
  opacity: 0.5;
}
.vue-advanced-cropper__boundaries {
  opacity: 1;
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  top: 50%;
}
.vue-advanced-cropper__cropper-wrapper {
  width: 100%;
  height: 100%;
}
.vue-advanced-cropper__image-wrapper {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}
.vue-advanced-cropper__stencil-wrapper {
  position: absolute;
}
.vue-handler-wrapper {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
}
.vue-handler-wrapper__draggable {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vue-handler-wrapper--west-north {
  cursor: nw-resize;
}
.vue-handler-wrapper--north {
  cursor: n-resize;
}
.vue-handler-wrapper--east-north {
  cursor: ne-resize;
}
.vue-handler-wrapper--east {
  cursor: e-resize;
}
.vue-handler-wrapper--east-south {
  cursor: se-resize;
}
.vue-handler-wrapper--south {
  cursor: s-resize;
}
.vue-handler-wrapper--west-south {
  cursor: sw-resize;
}
.vue-handler-wrapper--west {
  cursor: w-resize;
}
.vue-handler-wrapper--disabled {
  cursor: auto;
}
.vue-line-wrapper {
  background: none;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vue-line-wrapper--north,
.vue-line-wrapper--south {
  height: 12px;
  width: 100%;
  left: 0;
  transform: translateY(-50%);
}
.vue-line-wrapper--north {
  top: 0;
  cursor: n-resize;
}
.vue-line-wrapper--south {
  top: 100%;
  cursor: s-resize;
}
.vue-line-wrapper--east,
.vue-line-wrapper--west {
  width: 12px;
  height: 100%;
  transform: translateX(-50%);
  top: 0;
}
.vue-line-wrapper--east {
  left: 100%;
  cursor: e-resize;
}
.vue-line-wrapper--west {
  left: 0;
  cursor: w-resize;
}
.vue-line-wrapper--disabled {
  cursor: auto;
}
.vue-bounding-box {
  position: relative;
  height: 100%;
  width: 100%;
}
.vue-bounding-box__handler {
  position: absolute;
}
.vue-bounding-box__handler--west-north {
  left: 0;
  top: 0;
}
.vue-bounding-box__handler--north {
  left: 50%;
  top: 0;
}
.vue-bounding-box__handler--east-north {
  left: 100%;
  top: 0;
}
.vue-bounding-box__handler--east {
  left: 100%;
  top: 50%;
}
.vue-bounding-box__handler--east-south {
  left: 100%;
  top: 100%;
}
.vue-bounding-box__handler--south {
  left: 50%;
  top: 100%;
}
.vue-bounding-box__handler--west-south {
  left: 0;
  top: 100%;
}
.vue-bounding-box__handler--west {
  left: 0;
  top: 50%;
}
.vue-draggable-area {
  position: relative;
}
.vue-preview-result {
  overflow: hidden;
  box-sizing: border-box;
  position: absolute;
  height: 100%;
  width: 100%;
}
.vue-preview-result__wrapper {
  position: absolute;
}
.vue-preview-result__image {
  pointer-events: none;
  position: relative;
  -moz-user-select: none;
       user-select: none;
  transform-origin: center;
  max-width: none !important;
}
.vue-simple-handler {
  display: block;
  background: white;
  height: 10px;
  width: 10px;
}
.vue-simple-line {
  background: none;
  transition: border 0.5s;
  border-color: rgba(255, 255, 255, 0.3);
  border-width: 0;
  border-style: solid;
}
.vue-simple-line--south,
.vue-simple-line--north {
  height: 0;
  width: 100%;
}
.vue-simple-line--east,
.vue-simple-line--west {
  height: 100%;
  width: 0;
}
.vue-simple-line--east {
  border-right-width: 1px;
}
.vue-simple-line--west {
  border-left-width: 1px;
}
.vue-simple-line--south {
  border-bottom-width: 1px;
}
.vue-simple-line--north {
  border-top-width: 1px;
}
.vue-simple-line--hover {
  opacity: 1;
  border-color: white;
}
.vue-preview {
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
}
.vue-preview--fill {
  width: 100%;
  height: 100%;
  position: absolute;
}
.vue-preview__wrapper {
  position: absolute;
  height: 100%;
  width: 100%;
}
.vue-preview__image {
  pointer-events: none;
  position: absolute;
  -moz-user-select: none;
       user-select: none;
  transform-origin: center;
  max-width: none !important;
}
.vue-rectangle-stencil {
  position: absolute;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}
.vue-rectangle-stencil__preview {
  position: absolute;
  width: 100%;
  height: 100%;
}
.vue-rectangle-stencil--movable {
  cursor: move;
}
.vue-circle-stencil {
  position: absolute;
  height: 100%;
  width: 100%;
  box-sizing: content-box;
  cursor: move;
}
.vue-circle-stencil__preview {
  border-radius: 50%;
  position: absolute;
  width: 100%;
  height: 100%;
}
.vue-circle-stencil--movable {
  cursor: move;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-material-crop-wrapper .oc-create-material-upload-image-tab {
  margin-bottom: 16px;
}
.oc-create-material-crop-wrapper .oc-create-material-crop-tools {
  height: 400px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.oc-create-material-crop-wrapper .oc-create-material-crop-tools .oc-create-material-crop-tools-cropper {
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 400px;
  overflow: hidden;
  border-radius: 24px;
}
.oc-create-material-crop-wrapper .oc-create-material-crop-tools .oc-create-material-crop-tools-cropper-multiple {
  width: 580px;
}
.oc-create-material-crop-wrapper .oc-create-material-crop-tools .oc-create-material-crop-tools-list {
  height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  margin-left: 16px;
}
.oc-create-material-crop-wrapper .oc-create-material-crop-tools .oc-create-material-crop-tools-list .oc-create-material-crop-tools-list-item {
  margin-bottom: 8px;
}
.oc-create-material-crop-wrapper .oc-create-material-crop-tools .oc-create-material-crop-tools-list .oc-create-material-crop-tools-list-item:last-child {
  margin-bottom: 0;
}
.oc-create-material-crop-wrapper .oc-create-material-crop-tools .oc-create-material-crop-tools-list .oc-create-material-crop-tools-list-item .oc-media-thumb-container {
  height: 90px !important;
}
.oc-create-material-crop-wrapper .oc-create-material-crop-tools .oc-create-material-crop-tools-list .oc-create-material-crop-tools-list-item-select {
  position: relative;
}
.oc-create-material-crop-wrapper .oc-create-material-crop-tools .oc-create-material-crop-tools-list .oc-create-material-crop-tools-list-item-select:after {
  content: "";
  width: 160px;
  height: 90px;
  box-sizing: border-box;
  border: 2px solid #651dff;
  border-radius: 8px;
  position: absolute;
  left: 0;
  top: 0;
}
.create-vue-advanced-cropper-background {
  background: transparent;
}
.create-material-crop-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.create-material-crop-footer .oc-button-wrap {
  margin-left: 16px;
}
.oc-create-material-crop-tip {
  margin-bottom: 16px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-material-lib-body .oc-create-material-submit-bar-wrapper {
  padding: 0;
}
.oc-create-material-lib-body .oc-material-lib-upload-card {
  height: 100%;
}
.oc-create-material-lib-body .oc-material-lib-upload-card-wrapper {
  height: 100%;
  overflow: auto;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-material-upload-image-wrapper .oc-create-material-upload-image-tab {
  margin-bottom: 16px;
}
.oc-create-material-upload-image-wrapper .oc-create-material-upload-image-select {
  margin-bottom: 24px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-upload-select-wrapper {
  height: 240px;
  border: 1px dashed #ffffff;
  background: #261d38;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  position: relative;
}
.oc-create-upload-select-wrapper:hover {
  cursor: pointer;
}
.oc-create-upload-select-wrapper .oc-create-upload-select-desc .oc-create-upload-select-tip {
  display: flex;
  flex-flow: column;
  justify-content: center;
}
.oc-create-upload-select-wrapper .oc-create-upload-select-desc .oc-create-upload-select-tip .oc-create-upload-select-upload-icon {
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 8px;
}
.oc-create-upload-select-wrapper .oc-create-upload-select-desc .oc-create-upload-select-tip .oc-create-upload-select-upload-text {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.oc-create-upload-select-wrapper .oc-create-upload-select-loading {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.oc-create-upload-select-wrapper .oc-create-upload-select-loading .oc-create-upload-select-loading-icon {
  margin-bottom: 8px;
}
.oc-create-upload-select-wrapper-disabled {
  background: #302842;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-upload-table-wrapper .ovui-tr:hover .oc-promotion-operation-action-item {
  color: #651dff;
}
.oc-upload-table-name-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.oc-upload-table-name-wrapper .oc-upload-table-name-right {
  margin-left: 16px;
  min-width: 0;
}
.oc-upload-table-name-wrapper .oc-upload-table-name-right .oc-upload-table-name-text {
  display: flex;
  align-items: center;
}
.oc-upload-table-name-wrapper .oc-upload-table-name-right .oc-upload-table-name-text .oc-upload-table-name-edit-icon {
  margin-left: 5px;
  cursor: pointer;
}
.oc-upload-table-name-wrapper .oc-upload-table-name-right .oc-upload-table-name-progress {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.oc-upload-table-name-wrapper .oc-upload-table-name-right .oc-upload-table-name-progress .oc-upload-table-name-progress-success {
  color: #00d5a4;
  margin-left: 12px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-promotion-operation-com {
  font-size: 12px;
  width: auto;
}
.oc-promotion-operation-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
}
.oc-promotion-operation-wrapper-direction-vertical {
  flex-direction: column;
  gap: 4px;
}
.oc-promotion-operation-wrapper .oc-promotion-operation-action-item {
  line-height: 18px;
}
.oc-promotion-operation-more-action {
  fill: #666;
  cursor: pointer;
  height: 18px;
  display: flex;
  align-items: center;
}
.oc-operation-no-padding {
  padding: 0;
}
.oc-promotion-operation-extra-operation {
  display: inline-flex;
  vertical-align: middle;
  font-size: 12px;
}
.oc-promotion-extra-operation-body {
  background: #fff;
  border-radius: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  line-height: 34px;
  padding: 6px 0;
  color: #ffffff;
}
.oc-promotion-extra-operation-body .oc-promotion-operation-action-item,
.oc-promotion-extra-operation-body .oc-popover {
  height: 34px;
  padding: 0 16px;
  text-align: center;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.oc-promotion-extra-operation-body .oc-promotion-operation-action-item:hover,
.oc-promotion-extra-operation-body .oc-popover:hover {
  background: #edf1fd;
}
.oc-promotion-operation-action-item {
  display: inline-flex;
  vertical-align: middle;
  cursor: pointer;
}
.oc-promotion-operation-loading-container {
  color: rgba(255, 255, 255, 0.25);
}
.oc-promotion-operation-loading-container .oc-loading-icon {
  margin-right: 5px;
  /* 继承父元素的间距 */
  color: rgba(255, 255, 255, 0.25);
  height: 18px;
}
.oc-promotion-operation-disabled-item {
  color: rgba(255, 255, 255, 0.25);
  cursor: not-allowed;
  white-space: nowrap;
}
.oc-promotion-operation-disabled-msg {
  color: #ffffff;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-promotion-name-edit-textarea .ovui-textarea__suffix {
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-material-upload-video-wrapper .oc-create-material-upload-video-tab {
  margin-bottom: 16px;
}
.oc-create-material-upload-video-wrapper .oc-create-material-upload-video-select {
  margin-bottom: 24px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-material-selected-wrapper .oc-create-material-selected-drag {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-material-upload-audio-wrapper .oc-create-material-upload-audio-tab {
  margin-bottom: 16px;
}
.oc-create-material-upload-audio-wrapper .oc-create-material-upload-audio-select {
  margin-bottom: 24px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-num-info {
  width: 272px;
}
.oc-create-num-info .oc-title + .content-wrapper {
  padding-top: 8px;
}
.oc-create-num-info .content-wrapper {
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  display: inline-flex;
}
.oc-create-num-info .content-wrapper .create-num-info-item {
  margin-bottom: 16px;
}
.oc-create-num-info .content-wrapper .no-margin-bottom {
  margin-bottom: 0;
}
.oc-create-num-info-item {
  width: 128px;
}
.oc-create-num-info-item .title,
.oc-create-num-info-item .content {
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.oc-create-num-info-item .title-num,
.oc-create-num-info-item .content-num {
  font-size: 24px;
  line-height: 34px;
}
.oc-create-num-info-item .title {
  align-items: center;
}
.oc-create-num-info-item .title + .content {
  margin-top: 4px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-phone-preview-wrap {
  padding: 12px;
  height: 662px;
  height: 100%;
  width: 100%;
  position: fixed;
  inset: 0px;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.4);
}
.oc-phone-preview-wrap .oc-iframe-preview {
  position: absolute;
  width: 320px;
  height: 662px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: 100% 100%;
  border: 14px solid white;
}
.oc-phone-preview-wrap_close {
  position: absolute;
  top: 20px;
  right: 20px;
  color: rgba(26, 26, 27, 0.5);
  cursor: pointer;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-preview {
  position: relative;
  width: 272px;
  display: flex;
  flex-direction: column;
}
.oc-create-preview__title {
  display: flex;
  height: 24px;
  align-items: center;
  justify-content: space-between;
}
.oc-create-preview__content {
  width: 100%;
}
.oc-create-preview__content-header {
  padding-bottom: 12px;
}
.oc-create-preview__content-app {
  position: relative;
}
.oc-create-preview__content-app .ovui-tabs__nav::before {
  display: none;
}
.oc-create-preview__content-app .ovui-tabs__tab {
  margin-right: 16px;
  padding: 0;
}
.oc-create-preview__content-app .ovui-tabs__tab:nth-last-child(2) {
  margin-right: 0;
}
.oc-create-preview__content-app .ovui-tabs__angle-left {
  padding-right: 8px;
  margin-top: -8px;
}
.oc-create-preview__content-app .ovui-tabs__angle-right {
  padding-left: 8px;
  margin-top: -8px;
}
.oc-create-preview__content-app .oc-create-preview__tab-change {
  padding-bottom: 12px;
}
.oc-create-preview__content-app .tab-item {
  min-width: 32px;
  height: 43px;
  cursor: pointer;
  position: relative;
}
.oc-create-preview__content-app .tab-item::after {
  position: absolute;
  width: 16px;
  height: 2px;
  left: 50%;
  bottom: 0;
  margin-left: -8px;
  background: #651dff;
  border-radius: 20px;
  content: "";
  display: none;
}
.oc-create-preview__content-app .tab-item .app-image {
  width: 32px;
  height: 32px;
  opacity: 0.4;
  border-radius: 12px;
  transition: opacity 0.3s;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}
.oc-create-preview__content-app .tab-item.active::after {
  display: block;
}
.oc-create-preview__content-app .tab-item.active .app-image {
  opacity: 1;
}
.oc-create-preview__content-wrapper,
.oc-create-preview__content-empty {
  width: 100%;
  height: 484px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}
.oc-create-preview__content-wrapper-main {
  height: 100%;
  width: 100%;
  position: relative;
  background-size: 100% 100%;
}
.oc-create-preview__content-wrapper-main .ad-flex {
  display: flex;
  align-items: center;
}
.oc-create-preview__content-wrapper-main .bg {
  cursor: pointer;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 2;
  background-size: 100% 100%;
}
.oc-create-preview__content-wrapper-main .contaniner {
  width: 100%;
  height: 100%;
  background-color: #666;
}
.oc-create-preview__content-wrapper-main .small-text {
  zoom: 0.8;
  font-size: 12px;
  display: flex;
  justify-content: center;
  margin-top: 1px;
}
.oc-create-preview__content-wrapper-main .aweme-avatar {
  position: absolute;
  width: 36px;
  height: 36px;
  z-index: 2;
  right: 4px;
  top: 192px;
  border-radius: 50%;
  border: 1px solid #fff;
  line-height: 48px;
  font-size: 24px;
  overflow: hidden;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.oc-create-preview__content-wrapper-main .aweme-avatar img {
  width: 100%;
  height: 100%;
  display: block;
}
.oc-create-preview__content-wrapper-main .promotion-info {
  color: #fff;
}
.oc-create-preview__content-wrapper-main .ad-logo {
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 14px;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  margin-left: 4px;
  flex: none;
}
.oc-create-preview__content-wrapper-main .ad-logo:after {
  content: "广告";
  font-size: 12px;
  zoom: 0.83333333;
}
.oc-create-preview__content-wrapper-main .ad-logo.dark {
  background: rgba(22, 24, 35, 0.05);
  color: rgba(22, 24, 35, 0.6);
}
.oc-create-preview .oc-typography {
  display: -webkit-inline-box !important;
}
.oc-create-preview-fade-enter-active,
.oc-create-preview-fade-leave-active {
  transition: opacity 0.3s ease-in-out;
}
.oc-create-preview-fade-enter-from,
.oc-create-preview-fade-leave-to {
  opacity: 0;
}
.oc-create-preview-fade-enter-to,
.oc-create-preview-fade-leave-from {
  opacity: 1;
}
.oc-not-support {
  background: #302842;
  display: flex;
}
.oc-create-preview-operating {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10001 !important;
}
.oc-create-preview-operating-bg {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 9;
}
.oc-create-preview-operating-tips {
  width: 100%;
  position: absolute;
  text-align: center;
  z-index: 11;
  top: 8px;
  opacity: 1;
}
.oc-create-preview-operating-tips-main {
  background-color: #302842;
  padding: 4px 8px;
  border-radius: 20px;
  display: inline-block;
  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.08);
  font-size: 0;
}
.oc-create-preview-operating-tips iconpark-icon {
  vertical-align: middle;
  margin-top: -1px;
}
.oc-create-preview-operating-tips span {
  color: #ffffff;
  font-size: 12px;
  zoom: 0.83333;
  line-height: 14px;
  vertical-align: middle;
}
.oc-create-preview-operating-tips-name {
  font-weight: 600;
}
.oc-create-preview-operating-mask {
  position: absolute;
  width: 150px;
  height: 20px;
  left: 7px;
  bottom: 112px;
  z-index: 10;
}
.oc-create-preview-operating-mask::after {
  border-radius: 4px;
  background: radial-gradient(rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.5) 100%);
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  content: "";
  position: absolute;
  filter: blur(1px);
  animation-delay: 1s;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-name: breathing1;
}
.oc-create-preview-operating-mask em {
  position: absolute;
  width: 25px;
  height: 25px;
  color: #fff;
  animation-delay: 1s;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.oc-create-preview-operating-mask-top {
  left: -11px;
  top: -11px;
  animation-name: breathingTop;
}
.oc-create-preview-operating-mask-right {
  right: -11px;
  top: -11px;
  transform: rotate(90deg);
  animation-name: breathingRight;
}
.oc-create-preview-operating-mask-bottom {
  right: -11px;
  bottom: -11px;
  transform: rotate(-180deg);
  animation-name: breathingBottom;
}
.oc-create-preview-operating-mask-left {
  left: -11px;
  bottom: -11px;
  transform: rotate(-90deg);
  animation-name: breathingLeft;
}
/* 定义@keyframes动画 */
@keyframes breathingTop {
  0% {
    transform: translateX(0px) translateY(0px);
  }
  50% {
    transform: translateX(2px) translateY(2px);
  }
  100% {
    transform: translateX(0px) translateY(0px);
  }
}
@keyframes breathingRight {
  0% {
    transform: translateX(0px) translateY(0px) rotate(90deg);
  }
  50% {
    transform: translateX(-2px) translateY(2px) rotate(90deg);
  }
  100% {
    transform: translateX(0px) translateY(0px) rotate(90deg);
  }
}
@keyframes breathingBottom {
  0% {
    transform: translateX(0px) translateY(0px) rotate(-180deg);
  }
  50% {
    transform: translateX(-2px) translateY(-2px) rotate(-180deg);
  }
  100% {
    transform: translateX(0px) translateY(0px) rotate(-180deg);
  }
}
@keyframes breathingLeft {
  0% {
    transform: translateX(0px) translateY(0px) rotate(-90deg);
  }
  50% {
    transform: translateX(2px) translateY(-2px) rotate(-90deg);
  }
  100% {
    transform: translateX(0px) translateY(0px) rotate(-90deg);
  }
}
/* 定义@keyframes动画 */
@keyframes breathing1 {
  0% {
    opacity: 1;
    /* 完全不透明 */
  }
  50% {
    opacity: 0;
    /* 半透明 */
  }
  100% {
    opacity: 1;
    /* 完全不透明 */
  }
}
.preview-douyin-search-bk {
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/douyin-search-new1.png");
}
.preview-douyin-search .oc-video-player-wrapper .xgplayer video {
  -o-object-fit: cover;
     object-fit: cover;
}
.preview-douyin-search.creative-type-double-row .preview-douyin-search-bk {
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/douyin-search-double2.png");
}
.preview-douyin-search .oc-creative-preview-image {
  background-color: #161823;
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/douyin-logo.png");
  background-size: 100px 111px;
  background-position: center center;
  background-repeat: no-repeat;
}
.preview-douyin-search .creative-info {
  position: relative;
  padding: 103px 12px 10px;
  color: #161823;
  bottom: inherit;
  left: 0;
  z-index: 2;
}
.preview-douyin-search .user-info {
  width: 214px;
  display: flex;
  align-items: center;
}
.preview-douyin-search .user-info .source {
  margin-left: 5px;
  font-size: 14px;
  margin-top: 0;
  zoom: 0.7778;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  margin-top: 2px;
}
.preview-douyin-search .user-info .source em {
  font-size: 12px;
  font-weight: normal;
  font-style: normal;
  color: rgba(22, 24, 35, 0.6);
  margin-top: 4px;
}
.preview-douyin-search .user-info .aweme-avatar {
  position: relative;
  top: 0;
  left: 0;
  width: 29px;
  height: 29px;
}
.preview-douyin-search .title {
  zoom: 0.9075;
  font-weight: 300;
  line-height: 18px;
  margin-top: 4px;
}
.preview-douyin-search .promotion-card {
  width: 100%;
  zoom: 0.83;
  margin-top: 8px;
  position: relative;
}
.preview-douyin-search .promotion-card .card-image {
  width: 42px;
  height: 42px;
  margin-left: -12px;
  border-radius: 0;
}
.preview-douyin-search .promotion-card .promotion-card-item {
  background: rgba(22, 24, 35, 0.03);
  color: #161823;
  padding: 6px 12px;
}
.preview-douyin-search .promotion-card .promotion-card-item .card-title {
  zoom: 0.9;
}
.preview-douyin-search .promotion-card .promotion-card-item .card-desc {
  zoom: 0.8333;
}
.preview-douyin-search .promotion-card .card-button {
  background: #fe2c55;
  border-radius: 8px;
  padding: 0 4px;
}
.preview-douyin-search .comment-img {
  width: 100%;
  margin-top: 8px;
}
.preview-douyin-search.image-mode-verticalVideo:not(.creative-type-double-row) .oc-creative-preview-image,
.preview-douyin-search.image-mode-awemePhoto:not(.creative-type-double-row) .oc-creative-preview-image {
  width: 164px;
  height: 218px;
}
.preview-douyin-search.image-mode-verticalVideo:not(.creative-type-double-row) .create-preview-blue-flow,
.preview-douyin-search.image-mode-awemePhoto:not(.creative-type-double-row) .create-preview-blue-flow {
  width: 164px;
}
.preview-douyin-search.image-mode-feedsLive:not(.creative-type-double-row) .oc-creative-preview-image {
  width: 164px;
  height: 218px;
}
.preview-douyin-search.image-mode-feedsLive .oc-creative-preview-image {
  background: #161823;
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/douyin-logo.png");
  background-size: 100px auto;
  background-position: center;
  background-repeat: no-repeat;
}
.preview-douyin-search.image-mode-feedsLive.creative-type-double-row .oc-creative-preview-image {
  background-size: 60px auto;
}
.preview-douyin-search.image-mode-feedsLive.creative-type-double-row .oc-creative-preview-image__tag {
  left: inherit;
  right: 4px;
}
.preview-douyin-search.image-mode-mall .preview-douyin-search-bk,
.preview-douyin-search.image-mode-mallAwemePhoto .preview-douyin-search-bk {
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/douyin-mall.png");
}
.preview-douyin-search.image-mode-mall .product-info,
.preview-douyin-search.image-mode-mallAwemePhoto .product-info {
  display: flex;
  width: 124px;
  height: 189px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 12px;
  background-color: #302842;
  position: absolute;
  left: 8px;
  top: 96px;
  padding: 0;
  overflow: hidden;
}
.preview-douyin-search.image-mode-mall .product-info-img,
.preview-douyin-search.image-mode-mallAwemePhoto .product-info-img {
  width: 124px;
  height: 124px;
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/product.png");
  background-position: center;
  background-size: 100%;
  background-color: #f5f6f9;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.preview-douyin-search.image-mode-mall .product-info-img img,
.preview-douyin-search.image-mode-mallAwemePhoto .product-info-img img {
  width: 100%;
}
.preview-douyin-search.image-mode-mall .product-info-title,
.preview-douyin-search.image-mode-mallAwemePhoto .product-info-title {
  color: #161823;
  zoom: 0.8333;
  padding: 5px 7px;
}
.preview-douyin-search.image-mode-mall .product-info-price,
.preview-douyin-search.image-mode-mallAwemePhoto .product-info-price {
  color: #fe2c55;
  font-size: 18px;
  position: absolute;
  bottom: 9px;
  left: 5px;
  zoom: 0.75;
  display: flex;
  align-items: center;
}
.preview-douyin-search.image-mode-mall .product-info-price em,
.preview-douyin-search.image-mode-mallAwemePhoto .product-info-price em {
  font-size: 16px;
  font-style: normal;
  margin-right: 3px;
}
.preview-douyin-search.image-mode-mall .product-info-price .oc-typography-color-default,
.preview-douyin-search.image-mode-mallAwemePhoto .product-info-price .oc-typography-color-default {
  color: #fe2c55;
}
.preview-toutiao .aweme-avatar {
  top: 242px !important;
}
.preview-toutiao .name {
  display: flex;
  align-items: center;
  gap: 5px;
  zoom: 0.85;
}
.preview-toutiao.image-mode-video,
.preview-toutiao.image-mode-image,
.preview-toutiao.image-mode-verticalVideo {
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/toutiao-image.png");
}
.preview-toutiao.image-mode-video .creative-info,
.preview-toutiao.image-mode-image .creative-info,
.preview-toutiao.image-mode-verticalVideo .creative-info {
  position: absolute;
  top: 184px;
  left: 0;
  right: 0;
  padding: 11px;
  font-size: 0;
}
.preview-toutiao.image-mode-video .oc-creative-preview-image,
.preview-toutiao.image-mode-image .oc-creative-preview-image,
.preview-toutiao.image-mode-verticalVideo .oc-creative-preview-image {
  width: 100%;
  height: 136px;
  border-radius: 24px;
  overflow: hidden;
  margin-top: 5px;
  background-color: #161823;
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/toutiao-logo.png");
  background-size: 57px 57px;
  background-position: center center;
  background-repeat: no-repeat;
}
.preview-toutiao.image-mode-video .name,
.preview-toutiao.image-mode-image .name,
.preview-toutiao.image-mode-verticalVideo .name {
  zoom: 1;
}
.preview-toutiao.image-mode-video .source,
.preview-toutiao.image-mode-image .source,
.preview-toutiao.image-mode-verticalVideo .source {
  zoom: 0.725;
  margin-top: 8px;
  width: 210px;
}
.preview-toutiao.image-mode-video .bg:after,
.preview-toutiao.image-mode-image .bg:after,
.preview-toutiao.image-mode-verticalVideo .bg:after {
  width: 22px;
  height: 22px;
}
.preview-toutiao.image-mode-verticalVideo {
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/toutiao-video.png");
}
.preview-toutiao.image-mode-verticalVideo .creative-info {
  top: 180px;
}
.preview-toutiao.image-mode-verticalVideo .oc-creative-preview-image {
  width: 124.032px;
  height: 165.376px;
}
.preview-toutiao.image-mode-smallImage {
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/toutiao-small.png");
}
.preview-toutiao.image-mode-smallImage .creative-info {
  position: absolute;
  top: 188px;
  left: 0;
  right: 0;
  padding: 10px 11px;
  font-size: 0;
  display: flex;
  align-items: flex-start;
}
.preview-toutiao.image-mode-smallImage .creative-info .left-section {
  flex: 1;
  height: 63.595px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-right: 6px;
}
.preview-toutiao.image-mode-smallImage .creative-info .oc-creative-preview-image {
  width: 81.661px;
  height: 63.595px;
  margin-top: 0;
  background-color: #161823;
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/toutiao-logo.png");
  background-size: 26px 26px;
  background-position: center center;
  background-repeat: no-repeat;
}
.preview-toutiao.image-mode-feedsLive .live-tags {
  display: flex;
  align-items: center;
  gap: 4px;
}
.preview-toutiao.image-mode-feedsLive .live-tags .tags {
  color: #fff;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 2px;
  display: flex;
  gap: 2px;
}
.preview-toutiao.image-mode-feedsLive .live-tags .douyin-tags {
  background-color: #f04142;
}
.preview-toutiao.image-mode-feedsLive .creative-info {
  height: 100%;
}
.preview-toutiao.image-mode-feedsLive .oc-creative-preview-image {
  height: 100%;
  top: 0;
  left: 0;
  padding: 0;
  margin-top: 0;
}
.preview-toutiao.image-mode-feedsLive .info-section {
  position: absolute;
  bottom: 13px;
  width: 210px;
  left: 9px;
  right: 9px;
  z-index: 3;
  color: #ffffff;
}
.preview-toutiao.image-mode-feedsLive .user-info {
  display: flex;
  align-items: center;
  height: 28px;
}
.preview-toutiao.image-mode-feedsLive:after {
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/toutiao-live-bg.png");
  background-size: 100% 100%;
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  z-index: 2;
  border-radius: 5px;
}
.preview-douyin-bk {
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/douyin-new-1.png");
  opacity: 0.5;
}
.preview-douyin.image-mode-verticalVideo .bg,
.preview-douyin.image-mode-video .bg {
  z-index: 3 !important;
}
.preview-douyin .oc-video-player-wrapper,
.preview-douyin .img-container__content {
  background-color: #161823;
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/douyin-logo.png");
  background-size: 200px 221px;
  background-position: center center;
  background-repeat: no-repeat;
}
.preview-douyin .contaniner-right {
  display: flex;
  width: 41.103px;
  height: 293.596px;
  position: absolute;
  right: 0;
  bottom: var(--creativeMaterialBottom);
  z-index: 2;
}
.preview-douyin .contaniner-right::before {
  background-color: #302842;
  width: 11px;
  height: 11px;
  border-radius: 100%;
  position: absolute;
  content: '';
  top: 28px;
  right: 15px;
  z-index: 9;
}
.preview-douyin .contaniner-right::after {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/douyin-avatar.png");
  opacity: 0.5;
  background-size: 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
}
.preview-douyin .aweme-avatar {
  background-color: #000;
  top: 0 !important;
}
.preview-douyin .aweme-plus-icon {
  position: absolute;
  top: 25px;
  right: 13px;
  z-index: 10;
}
.preview-douyin .aweme-avatar-bg {
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/douyin-avatar-bg.png");
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 36px;
  height: 36px;
  content: "";
  position: absolute;
  right: 4px;
  top: 0;
  z-index: 9;
}
.preview-douyin .creative-info {
  position: absolute;
  bottom: var(--creativeMaterialBottom);
  left: 9px;
  width: 188px;
  z-index: 3;
}
.preview-douyin .title {
  margin-top: 9px;
  z-index: 2;
}
.preview-douyin .desc {
  z-index: 2;
  color: rgba(0, 0, 0, 0);
}
.preview-douyin .live-btn {
  width: 197px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fe2c55;
  font-size: 12px;
  color: #fff;
  border-radius: 2px;
  margin-top: 5px;
}
.preview-douyin .shopping-cart {
  width: 146px;
  height: 20px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  border-radius: 2px;
  background: rgba(50, 51, 53, 0.4);
  color: rgba(0, 0, 0, 0);
}
.preview-douyin .shopping-cart-icon {
  width: 14px;
  height: 14px;
}
.preview-douyin .shopping-cart .product-name {
  zoom: 0.75;
  margin-left: 4px;
}
.preview-douyin .oc-ai-info {
  display: flex;
  color: rgba(0, 0, 0, 0);
  font-size: 12px;
  align-items: center;
  line-height: 14px;
  margin-top: 4px;
  gap: 4px;
}
.preview-douyin .oc-live-button {
  background-color: #fe2c55;
  color: #fff;
  font-size: 12px;
  border-radius: 8px;
  line-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
}
.preview-douyin .search-list {
  width: 100%;
  height: 29px;
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/douyin-search-word1.png");
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  color: rgba(0, 0, 0, 0);
  bottom: 39px;
  left: 0;
  padding-left: 26px;
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  padding-right: 20px;
}
.preview-douyin .search-list .search-word {
  zoom: 0.75;
}
.preview-douyin.image-mode-awemePhoto .preview-douyin-bk {
  top: -2px;
  left: 0;
}
.preview-douyin.image-mode-awemePhoto .creative-info {
  bottom: calc(var(--creativeMaterialBottom) + 6px);
}
.preview-douyin.image-mode-feedsLive .bg-live {
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/douyin-live-2.png");
  opacity: 1;
}
.preview-douyin.image-mode-feedsLive .contaniner-live {
  position: absolute;
  bottom: 48px;
  left: 8px;
  right: 8px;
  color: rgba(0, 0, 0, 0);
  display: flex;
  height: auto;
  width: auto;
  flex-direction: column;
  z-index: 2;
  background-color: inherit;
  gap: 4px;
}
.preview-douyin.image-mode-feedsLive .title {
  margin-top: 0;
}
.preview-toutiao-search {
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/toutiao-search.png");
  padding-top: 102px;
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.preview-toutiao-search-bg {
  background-color: #302842;
  border-radius: 11px 11px 0 0;
  flex: 1;
  width: 260px;
}
.preview-toutiao-search-bottom {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  height: 40px;
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/toutiao-search-bottom.png");
  background-size: 100% auto;
}
.preview-toutiao-search .creative-info {
  background-color: #302842;
  border-radius: 11px;
  width: 260px;
  padding: 12px;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.preview-toutiao-search .creative-info .oc-creative-preview-image {
  width: 100%;
  height: 135px;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 0;
  background-color: #161823;
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/toutiao-logo.png");
  background-size: 57px 57px;
  background-position: center center;
  background-repeat: no-repeat;
}
.preview-toutiao-search .creative-info .oc-creative-preview-image .ad-logo {
  position: absolute;
  z-index: 6;
  right: 9px;
  top: 9px;
  background: rgba(0, 0, 0, 0.08);
}
.preview-toutiao-search .creative-info .oc-creative-preview-image .bg:after {
  width: 22px;
  height: 22px;
}
.preview-toutiao-search .creative-info .title .oc-typography {
  line-height: 18px;
}
.preview-toutiao-search .creative-info .card-button {
  display: flex;
  width: 100%;
  padding: 6px;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: #f04142;
  border-radius: 12px;
  border: 0.725px solid rgba(240, 65, 66, 0.12);
  background: rgba(240, 65, 66, 0.05);
}
.preview-toutiao-search .creative-info .promote-card-action {
  display: flex;
  align-items: center;
  color: #5e6570;
  font-size: 12px;
  zoom: 0.83;
}
.preview-toutiao-search .creative-info .promote-card-action .icon {
  margin-right: 3px;
}
.preview-toutiao-search .creative-info .creative-info-abstract {
  margin-top: 6px;
  color: #222;
}
.preview-toutiao-search .creative-info .image-wrapper {
  white-space: nowrap;
  display: flex;
  width: 100%;
  overflow-x: auto;
  height: 64px;
  background-color: #161823;
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/toutiao-logo.png");
  background-size: 26px 26px;
  background-position: center center;
  background-repeat: no-repeat;
}
.preview-toutiao-search .creative-info .image-wrapper::-webkit-scrollbar {
  height: 0;
}
.preview-toutiao-search .creative-info .image-wrapper .image-content {
  display: inline-block;
  margin-right: 5px;
  vertical-align: top;
  position: relative;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}
.preview-toutiao-search .creative-info .image-wrapper .image-content img {
  border-radius: 8px;
  width: 64px;
  height: 64px;
}
.preview-toutiao-search .creative-info .image-wrapper .image-content-pic {
  width: 100%;
  height: 100%;
}
.preview-toutiao-search.image-mode-verticalVideo .oc-creative-preview-image {
  width: 163.2px;
  height: 239.36px;
}
.preview-toutiao-search.image-mode-verticalVideo .card-button {
  width: 163.2px;
}
.preview-toutiao-search.image-mode-image .oc-creative-preview-image {
  height: 101.547px;
  display: flex;
  align-items: center;
}
.preview-toutiao-search.image-mode-image .oc-creative-preview-image img {
  height: auto;
}
.preview-toutiao-search.image-mode-searchMini .creative-main,
.preview-toutiao-search.image-mode-verticalImage .creative-main {
  display: flex;
  align-items: self-start;
  justify-content: flex-end;
  flex-direction: row-reverse;
}
.preview-toutiao-search.image-mode-searchMini .creative-info-abstract,
.preview-toutiao-search.image-mode-verticalImage .creative-info-abstract {
  flex: 1;
  margin-top: 0;
  zoom: 0.9;
  margin-right: 9px;
}
.preview-toutiao-search.image-mode-searchShop .creative-info-abstract {
  margin-top: 0;
}
.preview-toutiao-search.image-mode-searchMini .oc-creative-preview-image {
  width: 72.533px;
  height: 47.872px;
  background-size: 26px 26px;
}
.preview-toutiao-search.image-mode-verticalImage .oc-creative-preview-image {
  width: 62.382px;
  height: 82.692px;
  background-size: 26px 26px;
}
.preview-toutiao-search.image-mode-image .user-name,
.preview-toutiao-search.image-mode-searchMini .user-name,
.preview-toutiao-search.image-mode-verticalImage .user-name,
.preview-toutiao-search.image-mode-searchLarge .user-name,
.preview-toutiao-search.image-mode-searchShop .user-name,
.preview-toutiao-search.image-mode-smallImage .user-name {
  color: #5e6570;
  zoom: 0.83;
}
.preview-xigua .oc-creative-preview-image {
  width: 100%;
  border-radius: 0;
  background-color: #161823;
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/xiguan-logo.png");
  background-size: 114px 114px;
  background-position: center center;
  background-repeat: no-repeat;
}
.preview-xigua .aweme-avatar {
  width: 23px !important;
  height: 23px !important;
  left: 10px;
}
.preview-xigua.image-mode-video,
.preview-xigua.image-mode-image {
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/xigua.png");
}
.preview-xigua.image-mode-video .creative-info,
.preview-xigua.image-mode-image .creative-info {
  position: absolute;
  top: 167px;
  left: 0;
  right: 0;
  padding: 13px 0;
}
.preview-xigua.image-mode-video .creative-info .right-section,
.preview-xigua.image-mode-image .creative-info .right-section {
  margin-left: 33px;
}
.preview-xigua.image-mode-video .creative-info .aweme-avatar,
.preview-xigua.image-mode-image .creative-info .aweme-avatar {
  top: 15px !important;
  height: 26px !important;
  width: 26px !important;
}
.preview-xigua.image-mode-video .creative-info .source,
.preview-xigua.image-mode-image .creative-info .source {
  color: rgba(255, 255, 255, 0.5);
  zoom: 0.9;
}
.preview-xigua.image-mode-video .creative-info .title,
.preview-xigua.image-mode-image .creative-info .title {
  line-height: 16px;
}
.preview-xigua.image-mode-video .creative-info .oc-creative-preview-image,
.preview-xigua.image-mode-image .creative-info .oc-creative-preview-image {
  height: 152px;
  margin-top: 6px;
  background-size: 57px 57px;
}
.preview-xigua.image-mode-video .creative-title,
.preview-xigua.image-mode-image .creative-title {
  padding: 0 9px;
  height: 48px;
}
.preview-xigua.image-mode-video .promote-card-action,
.preview-xigua.image-mode-image .promote-card-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 9px;
  margin-top: 8px;
}
.preview-xigua.image-mode-video .promote-card-action .source,
.preview-xigua.image-mode-image .promote-card-action .source {
  color: #ffffff;
}
.preview-xigua.image-mode-video .promote-card-action .card-button,
.preview-xigua.image-mode-image .promote-card-action .card-button {
  border-radius: 1.451px;
  background: rgba(0, 0, 0, 0.04);
  width: 55.125px;
  height: 20.309px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0c0d0f;
}
.preview-xigua.image-mode-video .bg:after,
.preview-xigua.image-mode-image .bg:after {
  width: 22px;
  height: 22px;
}
.preview-xigua.image-mode-verticalVideo .creative-info,
.preview-xigua.image-mode-feedsLive .creative-info {
  height: 100%;
}
.preview-xigua.image-mode-verticalVideo .aweme-avatar,
.preview-xigua.image-mode-feedsLive .aweme-avatar {
  position: relative;
  top: 0;
  left: 0;
}
.preview-xigua.image-mode-verticalVideo .oc-creative-preview-image,
.preview-xigua.image-mode-feedsLive .oc-creative-preview-image {
  height: 100%;
  top: 0;
  left: 0;
  padding: 0;
  margin-top: 0;
}
.preview-xigua.image-mode-verticalVideo .info-section,
.preview-xigua.image-mode-feedsLive .info-section {
  position: absolute;
  bottom: 58px;
  width: 210px;
  left: 9px;
  right: 9px;
  z-index: 3;
  color: #ffffff;
}
.preview-xigua.image-mode-verticalVideo .source,
.preview-xigua.image-mode-feedsLive .source {
  margin-left: 10px;
}
.preview-xigua.image-mode-verticalVideo .user-info,
.preview-xigua.image-mode-feedsLive .user-info {
  display: flex;
  align-items: center;
  height: 32px;
}
.preview-xigua.image-mode-verticalVideo .title,
.preview-xigua.image-mode-feedsLive .title {
  zoom: 0.833;
}
.preview-xigua.image-mode-verticalVideo .bg {
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/xigua-vertical.png");
  z-index: 1000 !important;
  opacity: 0.5;
}
.preview-xigua.image-mode-feedsLive .live-tags {
  display: flex;
  align-items: center;
  gap: 4px;
}
.preview-xigua.image-mode-feedsLive .live-tags .tags {
  color: #fff;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 2px;
  display: flex;
  gap: 2px;
}
.preview-xigua.image-mode-feedsLive .live-tags .douyin-tags {
  background-image: linear-gradient(102deg, #f38 8.67%, #f35 88.75%);
}
.preview-xigua.image-mode-feedsLive .live-tags .from-tags {
  background-color: rgba(0, 0, 0, 0.3);
}
.preview-xigua.image-mode-feedsLive:after {
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/xigua-vertical.png");
  background-size: 100% 100%;
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  z-index: 1000 !important;
  opacity: 0.5;
}
.preview-fanqie {
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/fanqie.png");
  display: flex;
}
.preview-fanqie .creative-info {
  width: 226px;
  height: 402px;
  position: absolute;
  left: 23px;
  top: 35px;
}
.preview-fanqie .oc-creative-preview-image {
  height: 100%;
  background-color: #212121;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/fanqie-logo2.png");
  background-size: 114px 114px;
  background-position: center center;
  background-repeat: no-repeat;
}
.preview-fanqie .promotion-info {
  position: absolute;
  left: 11px;
  bottom: 11px;
  right: 11px;
  z-index: 10;
}
.preview-fanqie .promotion-info .promotion-card-item {
  background: rgba(0, 0, 0, 0.5);
}
.preview-fanqie .promotion-info .card-title {
  zoom: 0.85;
}
.preview-fanqie .fanqie-logo {
  width: 202px;
  height: 19px;
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/fanqie-tips.png");
  background-size: 100% auto;
  position: absolute;
  top: 9px;
  left: 11px;
  right: 11px;
  z-index: 5;
}
.preview-fanqie.image-mode-image .oc-creative-preview-image img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.preview-union .creative-info,
.preview-union .oc-creative-preview-image {
  width: 100%;
  height: 100%;
  margin-top: 0;
}
.preview-union .oc-creative-preview-image {
  background-color: #161823;
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/union-logo.png");
  background-size: 57px 57px;
  background-position: center center;
  background-repeat: no-repeat;
}
.preview-union .bg:after {
  width: 22px;
  height: 22px;
}
.preview-union .union-logo {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 1px;
  background: rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0);
  font-size: 12px;
  z-index: 4;
  width: 58px;
  height: 24px;
  line-height: 24px;
  padding: 0 5px;
  zoom: 0.6;
}
.preview-union .union-ad-close {
  color: rgba(50, 51, 53, 0.2);
  position: absolute;
  right: 4px;
  top: 4px;
  z-index: 4;
}
.preview-union.image-mode-video .preview-union-bk,
.preview-union.image-mode-image .preview-union-bk {
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/union-new.png");
}
.preview-union.image-mode-video .creative-info,
.preview-union.image-mode-image .creative-info {
  position: absolute;
  top: 149px;
  left: 0;
  right: 0;
  padding: 0 12px;
  height: 201px;
  z-index: 3;
}
.preview-union.image-mode-video .title,
.preview-union.image-mode-image .title {
  color: rgba(255, 255, 255, 0.75);
  height: 20px;
  margin-top: 4px;
  font-weight: 400;
}
.preview-union.image-mode-video .oc-creative-preview-image,
.preview-union.image-mode-image .oc-creative-preview-image {
  height: 140px;
  overflow: hidden;
  border-radius: 8px;
}
.preview-union.image-mode-verticalImage .preview-union-bk,
.preview-union.image-mode-verticalVideo .preview-union-bk {
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/union-vertical.png");
}
.preview-union.image-mode-verticalImage .creative-info,
.preview-union.image-mode-verticalVideo .creative-info {
  position: absolute;
  width: 99px;
  height: 216px;
  top: 24px;
  left: 23px;
  z-index: 3;
}
.preview-union.image-mode-verticalImage .creative-info .oc-creative-preview-image,
.preview-union.image-mode-verticalVideo .creative-info .oc-creative-preview-image {
  height: 176px;
  overflow: hidden;
  border-radius: 2px;
}
.preview-union.image-mode-verticalImage .title,
.preview-union.image-mode-verticalVideo .title {
  zoom: 0.8;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 4px;
}
.preview-union.image-mode-verticalImage .title .oc-typography,
.preview-union.image-mode-verticalVideo .title .oc-typography {
  line-height: 16px;
}
.preview-union-game {
  position: relative;
  height: 100%;
  background: #030301;
  border-radius: 24px;
}
.preview-union-game .oc-creative-preview-image {
  height: 100%;
  background-color: #030301;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  z-index: 3;
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/union-game-logo.png");
  background-size: 114px 114px;
  background-position: center center;
  background-repeat: no-repeat;
}
.preview-union-game-bk {
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/ohayoo-bg.png");
  background-position: center top;
  background-size: 100% auto !important;
  background-repeat: no-repeat;
  height: 120px !important;
  z-index: 4 !important;
}
.preview-union-game .promotion-card {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
}
.preview-union-game .promotion-card .promotion-card-item {
  border-radius: 0;
  color: #161823;
  background-color: #fff;
  height: 58px;
}
.preview-union-game .promotion-card .promotion-card-item .card-image {
  width: 42px;
  height: 42px;
}
.preview-union-game .promotion-card .promotion-card-item .card-title,
.preview-union-game .promotion-card .promotion-card-item .card-desc {
  zoom: 1;
}
.preview-union-game .promotion-card .promotion-card-item .card-button {
  line-height: 26px;
  height: 26px;
}
.preview-union-game .promotion-card.new {
  right: 12px;
  left: 12px;
  top: 75px;
  bottom: inherit;
}
.preview-union-game .promotion-card.new .promotion-card-item {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 24px;
  height: 48px;
}
.preview-union-game .promotion-card.new .card-image {
  width: 32px;
  height: 32px;
}
.preview-union-game .promotion-card.new .card-desc {
  margin-top: -2px;
}
.preview-union-game .promotion-card.new .card-button {
  line-height: 24px;
  height: 24px;
}
.preview-union-game.image-mode-image .oc-creative-preview-image img,
.preview-union-game.image-mode-smallImage .oc-creative-preview-image img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.preview-homed-bg {
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/homed-vertical.png");
  background-size: 100% 100%;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1;
}
.preview-homed-bg.video {
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/homed.png");
}
.preview-homed .creative-info {
  position: absolute;
  right: 2.5px;
  top: 102px;
  background-color: #302842;
  border-radius: 3px;
  width: 131px;
  height: 239px;
  overflow: hidden;
  z-index: 2;
}
.preview-homed .creative-info .oc-creative-preview-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 176px;
  position: relative;
  overflow: hidden;
  margin-top: 0;
  background-color: #161823;
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/homed-logo.png");
  background-size: 57px 57px;
  background-position: center center;
  background-repeat: no-repeat;
}
.preview-homed .creative-info .oc-creative-preview-image img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.preview-homed .creative-info .oc-creative-preview-image .ad-logo {
  position: absolute;
  z-index: 6;
  right: 6px;
  bottom: 6px;
  background: rgba(26, 28, 31, 0.2);
}
.preview-homed .creative-info .info-section {
  height: 63px;
  width: 100%;
  padding: 6px 5px;
  color: #222;
}
.preview-homed .creative-info .info-section .info-scale {
  width: 138%;
  transform: scale(0.72);
  transform-origin: 0 0;
}
.preview-homed .creative-info .info-section .title {
  height: 40px;
}
.preview-homed .creative-info .info-section .source {
  display: flex;
  margin-top: 10px !important;
  color: #999;
  align-items: center;
}
.preview-homed .creative-info .info-section .source .aweme-avatar {
  position: static;
  width: 20px;
  height: 20px;
  margin-right: 4px;
}
.preview-homed .creative-info-video {
  width: 100%;
  height: 100%;
}
.preview-homed .creative-info-video .contaniner {
  background-image: url("https://lf3-ad-platform.byteadverts.com/obj/ad-platform/ocean_uikit_vue3/preview/homed-logo.png");
  background-size: 114px 114px;
  background-position: center center;
  background-repeat: no-repeat;
}
.preview-homed .creative-info-video .aweme-avatar {
  top: 216px;
}
.preview-homed .creative-info-video .aweme-plus-icon {
  position: absolute;
  top: 243px;
  right: 16px;
  z-index: 10;
}
.preview-homed .creative-info-video .promotion-card {
  margin-bottom: 8px;
}
.preview-homed .creative-info-video .promotion-info {
  position: absolute;
  bottom: 13px;
  left: 9px;
  width: 208px;
  z-index: 3;
}
.preview-homed .creative-info-video .desc {
  align-items: flex-end;
}
.preview-homed .creative-info-video .desc-text {
  zoom: 0.83333333;
}
.preview-homed .creative-info-video .desc .ad-logo {
  margin-bottom: 2px;
}
.anchor-card-item,
.promotion-card-item {
  width: 100%;
  padding: 6px;
  display: flex;
  align-items: center;
  border-radius: 12px;
  background: rgba(34, 34, 34, 0.6);
  color: #fff;
}
.anchor-card-item {
  height: 34px;
  gap: 6px;
  zoom: 0.83;
}
.anchor-card-item .card-image,
.anchor-card-item .card-tag,
.anchor-card-item .card-desc {
  flex: none;
}
.anchor-card-item .card-desc-line {
  height: 8px;
  width: 1px;
  border: 1px;
  background-color: rgba(255, 255, 255, 0.5);
}
.anchor-card-item .card-tag {
  opacity: 0.75;
}
.anchor-card-item .card-image {
  width: 18px;
  height: 18px;
  font-size: 0;
}
.anchor-card-item .card-image img {
  width: 100%;
  height: 100%;
}
.promotion-card-item {
  height: 42px;
}
.promotion-card-item .card-image,
.promotion-card-item .card-button {
  flex: none;
}
.promotion-card-item .card-image {
  width: 28px;
  height: 28px;
  background-color: #302842;
  border-radius: 8px;
}
.promotion-card-item .card-image img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
.promotion-card-item .card-container {
  margin: 0 7px;
  flex: 1;
}
.promotion-card-item .card-title {
  margin-top: 0;
  font-weight: 500;
  zoom: 0.75;
}
.promotion-card-item .card-desc {
  width: 110%;
  zoom: 0.66666;
  opacity: 0.6;
}
.promotion-card-item .card-button {
  background: #fe2c55;
  border-radius: 2px;
  font-weight: 600;
  font-size: 12px;
  line-height: 19px;
  text-align: center;
  height: 19px;
  color: rgba(0, 0, 0, 0);
  min-width: 42.75px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.promotion-card-item .card-button .button-text {
  padding: 0 4.5px;
  zoom: 0.75;
}
.search-creative-main {
  position: absolute;
  width: 128px;
  height: 221px;
  right: 5px;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.search-creative-main .oc-creative-preview-image {
  height: 170px;
  overflow: hidden;
  background-color: #161823;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.search-creative-main .ad-logo {
  color: rgba(255, 255, 255, 0.85) !important;
  background: rgba(0, 0, 0, 0.08) !important;
  font-size: 12px;
  padding: 0 6px;
  zoom: 0.6;
  position: absolute;
  right: 5px;
  top: 255px;
}
.search-creative-main .title {
  zoom: 0.833;
  color: #161823;
  margin-top: 0 !important;
}
.search-creative-main .title .oc-typography {
  line-height: 17px;
}
.search-creative-main .creative-info-user {
  zoom: 0.75;
  color: rgba(22, 24, 35, 0.75);
}
.search-creative-main .creative-info-user iconpark-icon {
  display: none;
}
.search-creative-main .card-button {
  background-color: rgba(254, 44, 85, 0.08);
  border-radius: 12px;
  width: 100%;
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-size: 12px;
  color: #fe2c55;
  font-weight: 500;
  zoom: 0.6;
}
.oc-creative-preview-image {
  width: 100%;
  height: 133.461px;
  overflow: hidden;
  margin-top: 8px;
  border-radius: 24px;
  position: relative;
}
.oc-creative-preview-image__tag,
.oc-creative-preview-image__ai {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 10;
}
.oc-creative-preview-image__ai {
  padding: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 14px;
  color: #fff;
  background: rgba(22, 24, 35, 0.34);
  border-radius: 2px;
  line-height: 14px;
}
.oc-creative-preview-image__ai:after {
  content: "AI生成";
  font-size: 12px;
  zoom: 0.7;
}
.img-container__content-tag {
  background-color: rgba(22, 24, 35, 0.34);
  border-radius: 8px;
  padding: 3px 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0);
  font-size: 15px;
  position: absolute;
  right: 6px;
  top: 6px;
  z-index: 4;
  zoom: 0.72533333;
}
.img-container .oc-carousel-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-container .oc-media-graphic-item-thumb {
  width: 100%;
  height: 100%;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
}
.img-container .play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.img-container .oc-carousel-footer {
  z-index: 9;
}
.create-preview-blue-flow {
  width: 100%;
  height: auto;
  padding: 0;
  z-index: 10;
  position: relative;
  margin-top: -23px;
}
.create-preview-blue-flow__link {
  background-color: #fe2c55;
  display: flex;
  height: 23px;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.9);
  font-size: 10px;
  padding: 0 8px;
}
.create-preview-blue-flow__link-left {
  display: flex;
  align-items: center;
  gap: 4px;
}
.create-preview-blue-flow__link-left img {
  width: 12px;
  height: 12px;
}
.create-preview-blue-flow__container {
  background-color: rgba(22, 24, 35, 0.03);
  height: 43.52px;
  border-radius: 0 0 4px 4px;
  display: flex;
}
.create-preview-blue-flow__container-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  position: relative;
  padding: 4px 6px;
}
.create-preview-blue-flow__container-item .flow-title {
  color: rgba(22, 24, 35, 0.75);
  font-size: 9px;
}
.create-preview-blue-flow__container-item .flow-num {
  color: #fe2c55;
  font-size: 10px;
  margin-top: -2px;
}
.create-preview-blue-flow__container-item:not(:last-child)::after {
  content: "";
  width: 0.7px;
  height: 18.858px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(22, 24, 35, 0.12);
}
.create-preview-blue-flow .ad-logo {
  margin-top: 10px;
  display: inline-flex !important;
  margin-left: 0 !important;
}
.live-btn {
  border: 0.725px solid rgba(255, 255, 255, 0.2);
  padding: 3px;
  border-radius: 50px;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  bottom: 172px;
  color: #fff;
  z-index: 10001;
}
.live-btn-main {
  width: 122px;
  height: 28px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.725px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.1);
}
.previe-media {
  width: 100%;
  height: 100%;
  position: relative;
}
.previe-media .bg {
  z-index: 10;
}
.previe-media::after {
  content: "";
  width: 44px;
  height: 44px;
  padding: 0;
  background-image: url("https://p1-ad.byteimg.com/tos-cn-i-yt5q7rszul/6878d3d4beb84b8497875378600e72e4~tplv-yt5q7rszul-image.image");
  background-size: 100% 100%;
  background-color: initial;
  border-radius: 0;
  background-position: center;
  background-repeat: no-repeat;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  filter: drop-shadow(0px 4.41012049px 11.02530003px rgba(0, 0, 0, 0.25));
  display: none;
  position: absolute;
}
.previe-media .xgplayer-start,
.previe-media xg-start-inner {
  display: none !important;
}
.previe-media.pause::after {
  display: block;
}
.creative-info-user {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.creative-info-user .oc-user-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
}
.creative-info-user .user-avatar {
  position: relative;
  width: 23px;
  height: 23px;
  margin-right: 4px;
  display: inline-flex;
  align-items: center;
}
.creative-info-user .user-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-promotion-metric-card .oc-statistic-content {
  align-items: flex-end;
}
.oc-promotion-metric-popover {
  padding: 0;
}
.oc-promotion-metric-chart {
  height: 242px;
  width: 590px;
  display: flex;
  align-content: center;
  justify-content: center;
  background-color: #302842;
  border-radius: 24px;
}
.oc-promotion-metric-card-separator {
  padding: 0 4px;
  display: block;
  line-height: 24px;
}
.metric-card-chart {
  min-width: 80px;
  margin-left: 8px;
  color: rgba(255, 255, 255, 0.5);
}
.metric-card-chart-icon {
  cursor: pointer;
}
.oc-promotion-metric-card-number .oc-typography {
  display: inline-block;
  vertical-align: bottom;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.create-product-add-wrapper .create-product-add-tip {
  margin-bottom: 8px;
}
.create-product-add-wrapper .create-product-add-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  background: #261d38;
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  border-radius: 24px;
}
.create-product-add-wrapper .create-product-add-empty .create-product-add-empty-icon {
  margin-right: 5px;
}
.create-product-add-wrapper .create-product-add-empty .create-product-add-right-top {
  display: block;
  position: absolute;
  right: -6px;
  top: -6px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.create-product-add-wrapper .create-product-add-empty:hover {
  background: #1a112e;
  color: #651dff;
  cursor: pointer;
}
.create-product-add-wrapper .create-product-add-empty-disabled,
.create-product-add-wrapper .create-product-add-empty-disabled:hover {
  background: #302842;
  color: rgba(255, 255, 255, 0.25);
  cursor: not-allowed;
}
.create-product-add-wrapper .create-product-add-empty-error,
.create-product-add-wrapper .create-product-add-empty-error:hover {
  background: rgba(255, 0, 96, 0.06);
}
.create-product-add-wrapper .create-product-add-single {
  position: relative;
}
.create-product-add-wrapper .create-product-add-multiple .create-product-add-multiple-add {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.create-product-add-wrapper .create-product-add-multiple .create-product-add-multiple-add .create-product-add-multiple-add-text {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  margin-left: 8px;
}
.create-product-add-wrapper .create-product-add-multiple .create-product-add-multiple-add .oc-over-count {
  color: #ff0060;
}
.create-product-add-wrapper .create-product-add-empty-slot {
  margin-top: 16px;
}
.create-product-add-group-list {
  margin-top: 3px;
  padding-top: 13px;
}
.create-product-add-group-list .create-product-add-group-list-content {
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.create-product-add-group-list-scroll {
  overflow-y: auto;
  max-height: 615px;
}
.create-product-add-group-list-scroll .create-product-add-group-list-content {
  padding-right: 7px;
}
.oc-product-card-wrapper {
  background: #261d38;
  border-radius: 24px;
  height: 80px;
  display: flex;
  position: relative;
  border: 1px solid transparent;
  box-sizing: content-box;
}
.oc-product-card-wrapper-hoverable:hover {
  background: #261d38;
  border-color: #651dff;
}
.oc-product-card-wrapper-hoverable:hover .oc-product-card-del {
  display: block;
}
.oc-product-card-wrapper-media {
  padding: 8px;
}
.oc-product-card-wrapper .oc-product-card-desc {
  flex: 1;
  display: flex;
  align-self: center;
  flex-direction: column;
  gap: 8px;
  padding-right: 8px;
}
.oc-product-card-wrapper .oc-product-card-desc-name {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}
.oc-product-card-wrapper .oc-product-card-desc-name-tags {
  display: inline-flex;
  gap: 3px;
  justify-content: center;
  margin-right: 4px;
  font-weight: normal;
}
.oc-product-card-wrapper .oc-product-card-desc-middle {
  display: flex;
  gap: 12px;
  align-items: center;
}
.oc-product-card-wrapper .oc-product-card-desc-middle-tags {
  display: flex;
  gap: 4px;
  align-items: center;
}
.oc-product-card-wrapper .oc-product-card-opt {
  padding: 0 16px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.oc-product-card-wrapper .oc-product-card-opt .oc-product-card-opt-edit {
  margin-right: 8px;
}
.oc-product-card-wrapper .oc-product-card-del {
  position: absolute;
  right: -8px;
  top: -8px;
  color: rgba(255, 255, 255, 0.5);
  display: none;
  cursor: pointer;
}
.oc-product-card-wrapper .oc-product-card-right-top {
  display: block;
  position: absolute;
  right: 0px;
  top: 0px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.oc-product-card-wrapper .oc-product-card-left-top {
  position: absolute;
  left: 0;
  top: 0;
  line-height: 22px;
}
.oc-product-card-wrapper-sm {
  height: 60px;
}
.oc-product-card-wrapper-sm .oc-product-card-desc {
  gap: 4px;
}
.oc-product-card-wrapper-disabled {
  background: #302842;
}
.oc-product-card-wrapper-disabled:hover {
  background: #302842;
  border-color: transparent;
}
.oc-product-card-wrapper-error {
  background: rgba(255, 0, 96, 0.06);
}
.oc-product-card-wrapper-error:hover {
  background: rgba(255, 0, 96, 0.06);
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-product-card {
  width: 100%;
  height: 100%;
  display: flex;
  border-radius: 24px;
  background: #302842;
  box-sizing: border-box;
  overflow: hidden;
}
.oc-create-product-card .oc-create-product-card-image {
  margin: 8px 0 8px 8px;
}
.oc-create-product-card .oc-create-product-card-image .ovui-image {
  height: 100%;
  display: block;
}
.oc-create-product-card .oc-create-product-card-image .ovui-image .ovui-image__img-container {
  height: 100%;
}
.oc-create-product-card .oc-create-product-card-image .ovui-image .ovui-image__img-container .ovui-image__img {
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.oc-create-product-card .oc-create-product-card-media-wrapper {
  padding: 8px 0 8px 8px;
}
.oc-create-product-card .oc-create-product-card-content {
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  margin-left: 8px;
  margin-right: auto;
}
.oc-create-product-card .oc-create-product-card-content .oc-create-product-card-content-top .oc-create-product-card-content-title-link {
  color: #651dff;
}
.oc-create-product-card .oc-create-product-card-content .oc-create-product-card-content-top .oc-create-product-card-content-title-link:hover {
  color: #7433ff;
}
.oc-create-product-card .oc-create-product-card-content .oc-create-product-card-content-top .oc-typography-value-int {
  vertical-align: middle;
  line-height: 1px;
}
.oc-create-product-card .oc-create-product-card-content .oc-create-product-card-content-tag {
  display: inline-flex;
  justify-content: center;
  gap: 3px;
  margin-right: 4px;
  font-weight: normal;
}
.oc-create-product-card .oc-create-product-card-content .oc-create-product-card-middle-content-tag {
  justify-content: left;
  margin: 4px 0;
}
.oc-create-product-card .oc-create-product-card-content .oc-create-product-card-content-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: end;
}
.oc-create-product-card .oc-create-product-card-content .oc-create-product-card-content-detail .oc-create-product-card-content-detail-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.oc-create-product-card .oc-create-product-card-right {
  width: 28px;
  margin-left: 4px;
}
.oc-create-product-card .oc-create-product-card-right .oc-create-product-card-right-checkbox {
  margin-top: 8px;
}
.oc-create-product-card .oc-create-product-card-right-block {
  width: 8px;
}
.oc-create-product-card-fill .oc-create-product-card-image {
  background-color: #302842;
}
.oc-create-product-card-disabled {
  background: rgba(248, 248, 249, 0.5);
  border-color: rgba(248, 248, 249, 0.5);
}
.oc-create-product-card-disabled .oc-create-product-card-image {
  opacity: 0.5;
}
.oc-create-product-card-selectable {
  border: 1px solid rgba(255, 255, 255, 0.5);
  background-color: #302842;
}
.oc-create-product-card-selectable:hover {
  cursor: pointer;
  border-color: #651dff;
}
.oc-create-product-card-selectable.oc-create-product-card-disabled,
.oc-create-product-card-selectable.oc-create-product-card-disabled:hover {
  border-color: rgba(255, 255, 255, 0.25);
  cursor: not-allowed;
}
.oc-create-product-card-selected {
  border-color: #651dff;
}
.oc-create-product-card-selected-disabled {
  border-color: rgba(101, 29, 255, 0.34);
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-product-img-add-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  color: #ffffff;
  background-color: #261d38;
  border-color: #261d38;
  border-radius: 24px;
  width: 50px;
  height: 50px;
}
.oc-create-product-img-add-button:hover {
  color: #651dff;
  background-color: #534c61;
  border-color: #534c61;
  transition: all 0.1s ease-in-out;
  cursor: pointer;
}
.oc-create-product-img-add-button:hover .oc-create-product-img-add-text {
  color: #651dff;
}
.oc-create-product-img-add-button-disabled {
  background-color: #302842;
  border-color: #302842;
  color: rgba(255, 255, 255, 0.25);
}
.oc-create-product-img-add-button-disabled:hover {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.25);
}
.oc-create-product-img-spliter {
  width: 1px;
  background-color: rgba(255, 255, 255, 0.12);
  position: absolute;
  right: -4.5px;
  top: 0;
  bottom: 0;
}
.oc-create-product-img-add-text {
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  margin-top: 8px;
}
.oc-create-product-img-add-text-disabled {
  color: rgba(255, 255, 255, 0.25);
}
.oc-create-product-img-list {
  display: flex;
  line-height: 0;
}
.oc-create-product-img-list-space {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 8px;
}
.oc-create-product-img-list-item {
  font-size: inherit;
  width: 50px;
  height: 50px;
  position: relative;
}
.oc-create-product-img-submit-bar-img {
  width: 32px !important;
  height: 32px !important;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-video-list {
  height: 100%;
  width: 100%;
}
.oc-create-video-list-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.oc-create-video-list-top-title,
.oc-create-video-list-top-filter,
.oc-create-video-list-top-checkbox {
  margin-bottom: 16px;
}
.oc-create-video-list-top-title-box {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}
.oc-create-video-list-top-title {
  margin-right: 16px;
}
.oc-create-video-list-pagination-list-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 16px;
}
.oc-create-video-list-pagination-list {
  position: relative;
}
.oc-create-video-list-pagination-list-content {
  overflow: auto;
}
.oc-create-video-list-pagination-list-content-empty {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.oc-create-video-list-pagination-list-pagination {
  padding-top: 16px;
  display: flex;
  justify-content: flex-end;
}
.oc-create-video-list .ovui-page-select {
  margin-right: 0;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-product-tabs-container {
  position: relative;
  width: 100%;
}
.oc-create-product-tabs-container .oc-create-product-tabs-inner {
  width: 100%;
}
.oc-create-product-tabs-container .oc-create-product-tabs-inner.product-tabs-inner-fixed {
  background: #fff;
  padding-top: 8px;
  box-shadow: 0px 8px 24px 0px #00000014;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
.oc-create-product-tabs-container .oc-create-product-tabs-container-pre-block {
  position: absolute;
  width: 50px;
  height: 50px;
  cursor: pointer;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 44.6%, rgba(255, 255, 255, 0) 100%);
  z-index: 1;
}
.oc-create-product-tabs-container .oc-create-product-tabs-container-pre-block .oc-create-product-tabs-container-circle {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -12px;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  box-shadow: 0px 3px 9px 0px #00000014;
}
.oc-create-product-tabs-container .oc-create-product-tabs-container-pre-block .oc-create-product-tabs-container-circle iconpark-icon {
  color: #ffffff;
  margin-left: 4px;
  margin-top: 4px;
}
.oc-create-product-tabs-container .oc-create-product-tabs-container-pre-block-no-selectable {
  background: linear-gradient(90deg, #261d38 0%, #261d38 44.6%, rgba(255, 255, 255, 0) 100%);
}
.oc-create-product-tabs-container .oc-create-product-tabs-container-pre-block-no-selectable .oc-create-product-tabs-container-circle {
  background-color: #302842;
}
.oc-create-product-tabs-container .oc-create-product-tabs-container-next-block {
  cursor: pointer;
  position: absolute;
  right: 0px;
  width: 50px;
  height: 50px;
  background: linear-gradient(270deg, #ffffff 0%, #ffffff 44.6%, rgba(255, 255, 255, 0) 100%);
  z-index: 1;
}
.oc-create-product-tabs-container .oc-create-product-tabs-container-next-block .oc-create-product-tabs-container-circle {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -12px;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  box-shadow: 0px 3px 9px 0px #00000014;
}
.oc-create-product-tabs-container .oc-create-product-tabs-container-next-block .oc-create-product-tabs-container-circle iconpark-icon {
  color: #ffffff;
  margin-left: 4px;
  margin-top: 4px;
}
.oc-create-product-tabs-container .oc-create-product-tabs-container-next-block-no-selectable {
  background: linear-gradient(270deg, #261d38 0%, #261d38 44.6%, rgba(255, 255, 255, 0) 100%);
}
.oc-create-product-tabs-container .oc-create-product-tabs-container-next-block-no-selectable .oc-create-product-tabs-container-circle {
  background-color: #302842;
}
.oc-create-product-tabs-container .oc-create-product-tabs {
  display: flex;
  height: 59px;
  overflow-x: scroll;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.oc-create-product-tabs-container .oc-create-product-tabs .bg {
  border-radius: 24px;
  height: 49px;
  background: #fff;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;
}
.oc-create-product-tabs-container .oc-create-product-tabs .oc-create-product-tabs-container-panel-block {
  height: 46px;
}
.oc-create-product-tabs-container .oc-create-product-tabs .oc-create-product-tabs-container-panel-block:last-child .panel {
  margin-right: 0;
}
.oc-create-product-tabs-container .oc-create-product-tabs::-webkit-scrollbar {
  display: none;
}
.oc-create-product-tabs {
  display: flex;
  height: 70px;
  overflow-x: scroll;
}
.oc-create-product-tabs .oc-create-product-tabs-panel {
  background-color: #fff;
  box-shadow: 0px 4px 12px 0px #00000014;
  height: 50px;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 24px;
  margin-right: 12px;
  cursor: pointer;
}
.oc-create-product-tabs .oc-create-product-tabs-panel .oc-create-product-tabs-panel-product-detail {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.oc-create-product-tabs .oc-create-product-tabs-panel .oc-create-product-tabs-panel-product-detail .oc-create-product-tabs-panel-img-block {
  width: 48px;
  height: 48px;
  padding: 4px 0 4px 4px;
}
.oc-create-product-tabs .oc-create-product-tabs-panel .oc-create-product-tabs-panel-product-detail .oc-create-product-tabs-panel-img-block .oc-create-product-tabs-panel-img {
  position: relative;
  border-radius: 8px;
  width: 40px;
  height: 40px;
}
.oc-create-product-tabs .oc-create-product-tabs-panel .oc-create-product-tabs-panel-product-detail .oc-create-product-tabs-panel-img-block .oc-create-product-tabs-panel-img-info {
  position: absolute;
  left: 4px;
  bottom: 4px;
  line-height: 16px;
  width: 40px;
  font-size: 10px;
  color: rgba(0, 0, 0, 0);
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0 0 4px 4px;
}
.oc-create-product-tabs .oc-create-product-tabs-panel .oc-create-product-tabs-panel-product-detail .oc-create-product-tabs-panel-product-name {
  padding: 0px 8px;
  max-height: 40px;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* 这里是超出几行省略 */
  overflow: hidden;
  font-size: 12px;
  line-height: 18px;
}
.oc-create-product-tabs .oc-create-product-tabs-panel:hover {
  color: #7433ff;
  border: 1px solid #7433ff;
}
.oc-create-product-tabs .oc-create-product-tabs-panel:hover .oc-create-product-tabs-panel-arrow {
  border-top: 1px solid #7433ff;
  border-left: 1px solid #7433ff;
}
.oc-create-product-tabs .warning {
  color: #ff7c00;
  border: 1px solid #ff7c00;
}
.oc-create-product-tabs .warning .oc-create-product-tabs-panel-arrow {
  border-top: 1px solid #ff7c00;
  border-left: 1px solid #ff7c00;
}
.oc-create-product-tabs .error {
  color: #ff0060;
  border: 1px solid #ff0060;
}
.oc-create-product-tabs .error .oc-create-product-tabs-panel-arrow {
  border-top: 1px solid #ff0060;
  border-left: 1px solid #ff0060;
}
.oc-create-product-tabs .active {
  border: 1px solid #651dff;
  color: #651dff;
}
.oc-create-product-tabs .active .oc-create-product-tabs-panel-arrow {
  border-top: 1px solid #651dff;
  border-left: 1px solid #651dff;
}
.oc-create-product-tabs .oc-create-product-tabs-panel-arrow {
  box-sizing: content-box;
  position: absolute;
  bottom: -4px;
  left: 50%;
  margin-left: -4px;
  transform: rotate(-135deg);
  border-bottom: 1px solid transparent;
  height: 6px;
  width: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid transparent;
  background: #fff;
  display: block;
  content: "";
  z-index: 1;
}
.oc-create-product-tabs .oc-create-product-tabs-panel-no-selectable {
  background-color: #261d38;
  box-shadow: unset;
  cursor: unset;
  border: unset;
  color: #ffffff;
}
.oc-create-product-tabs .oc-create-product-tabs-panel-no-selectable:hover {
  color: #ffffff;
  border: unset;
}
.oc-create-product-tabs .oc-create-product-tabs-panel-no-selectable:hover .oc-create-product-tabs-panel-arrow {
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
}
.oc-create-product-tabs .oc-create-product-tabs-panel-no-selectable .warning,
.oc-create-product-tabs .oc-create-product-tabs-panel-no-selectable .error,
.oc-create-product-tabs .oc-create-product-tabs-panel-no-selectable .active {
  color: #ffffff;
  border: unset;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-promotion-card-wrapper .oc-create-promotion-card-container {
  display: flex;
}
.oc-create-promotion-card-wrapper .oc-create-promotion-card-container .oc-create-promotion-card-change-btn {
  margin-left: 12px;
}
.oc-create-promotion-card-wrapper .oc-create-promotion-card-item {
  border-radius: 24px;
  display: flex;
  align-items: center;
  width: 248px;
  background: #261d38;
  padding: 6px;
  position: relative;
}
.oc-create-promotion-card-wrapper .oc-create-promotion-card-item.hover:hover {
  cursor: pointer;
  outline: 1px solid #651dff;
}
.oc-create-promotion-card-wrapper .oc-create-promotion-card-item.hover:hover .oc-create-promotion-card-close-btn {
  display: block;
}
.oc-create-promotion-card-wrapper .oc-create-promotion-card-item .oc-create-promotion-card-close-btn {
  display: none;
  position: absolute;
  top: -10px;
  right: -10px;
}
.oc-create-promotion-card-wrapper .oc-create-promotion-card-item .oc-create-promotion-card-item-img {
  flex-shrink: 0;
}
.oc-create-promotion-card-wrapper .oc-create-promotion-card-item .oc-create-promotion-card-item-info {
  flex: 1;
  margin: 0 12px;
}
.oc-create-promotion-card-wrapper .oc-create-promotion-card-item .oc-create-promotion-card-item-btn {
  flex-shrink: 0;
  width: 64px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 4px;
  color: #302842;
  font-size: 12px;
  font-weight: 600;
  background: #ed5085;
}
.oc-create-promotion-card-wrapper .oc-create-promotion-card-container-simple {
  position: relative;
  height: 32px;
  width: 432px;
  border-radius: 8px;
  background: #261d38;
}
.oc-create-promotion-card-wrapper .oc-create-promotion-card-container-simple-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
}
.oc-create-promotion-card-wrapper .oc-create-promotion-card-container-simple .oc-create-promotion-card-close-btn {
  position: absolute;
  display: none;
  top: -10px;
  right: -10px;
}
.oc-create-promotion-card-wrapper .oc-create-promotion-card-empty-btn {
  margin-right: 8px;
}
.oc-create-promotion-card-wrapper .oc-create-promotion-card-container-simple-del:hover {
  cursor: pointer;
  outline: 1px solid #651dff;
}
.oc-create-promotion-card-wrapper .oc-create-promotion-card-container-simple-del:hover .oc-create-promotion-card-close-btn {
  display: block;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-range-num-info {
  width: 272px;
}
.oc-create-range-num-info .oc-title + .content-wrapper {
  padding-top: 8px;
}
.oc-create-range-num-info-item + .oc-create-range-num-info-item {
  margin-top: 8px;
}
.oc-create-range-num-info-item {
  display: flex;
  align-items: flex-end;
}
.oc-create-range-num-info-item .num {
  font-size: 28px;
  line-height: 34px;
}
.oc-create-range-num-info-item .oc-typography + .oc-typography {
  margin-left: 4px;
}
.oc-create-range-num-info-item .extra {
  width: 24px;
  display: flex;
  justify-content: center;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-range-picker .date-picker-wrapper {
  display: flex;
  align-items: center;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-recommend-tag-under-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 14px;
  gap: 0 8px;
}
.oc-create-recommend-tag-under-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.oc-create-recommend-tag-under-tags .oc-tag .ovui-tag {
  cursor: pointer;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-red-packet-card {
  min-width: 318px;
  height: 212px;
  position: relative;
  overflow: hidden;
}
.oc-create-red-packet-card .oc-create-red-packet-card-border {
  border: 3.5px solid #ff5c64;
  border-radius: 32px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
}
.oc-create-red-packet-card .oc-create-red-packet-card-header {
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  height: 72px;
  z-index: 1;
  /* .@{oc-css-prefix}oc-create-red-packet-card-header-icon {
      width: 80px;
      height: 80px;
      position: absolute;
      right: 8px;
    } */
}
.oc-create-red-packet-card .oc-create-red-packet-card-header .oc-create-red-packet-card-header-bg {
  width: 100%;
  height: 100%;
  border-radius: 32px 32px 0 0;
}
.oc-create-red-packet-card .oc-create-red-packet-card-header .oc-create-red-packet-card-header-data {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 10px 16px;
}
.oc-create-red-packet-card .oc-create-red-packet-card-header .oc-create-red-packet-card-header-data .oc-create-red-packet-card-header-data-title {
  color: #fff;
  display: flex;
  align-items: center;
}
.oc-create-red-packet-card .oc-create-red-packet-card-header .oc-create-red-packet-card-header-data .oc-create-red-packet-card-header-data-title .oc-create-red-packet-card-header-data-title-tag {
  margin-right: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.oc-create-red-packet-card .oc-create-red-packet-card-header .oc-create-red-packet-card-header-data .oc-create-red-packet-card-header-data-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  color: rgba(0, 0, 0, 0);
}
.oc-create-red-packet-card .oc-create-red-packet-card-content {
  margin-top: 72px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #ff405f;
  position: relative;
  z-index: 1;
}
.oc-create-red-packet-card .oc-create-red-packet-card-content .oc-create-red-packet-card-content-top {
  display: flex;
  align-items: center;
  justify-content: center;
}
.oc-create-red-packet-card .oc-create-red-packet-card-content .oc-create-red-packet-card-content-top .oc-create-red-packet-card-content-title-text {
  font-size: 12px;
  align-self: end;
  margin-bottom: 5px;
}
.oc-create-red-packet-card .oc-create-red-packet-card-content .oc-create-red-packet-card-content-top .oc-create-red-packet-card-content-unit {
  font-size: 14px;
  font-weight: bolder;
  margin: 4px 4px -4px 4px;
}
.oc-create-red-packet-card .oc-create-red-packet-card-content .oc-create-red-packet-card-content-top .oc-create-red-packet-card-content-value {
  margin-bottom: 4px;
}
.oc-create-red-packet-card .oc-create-red-packet-card-content .oc-create-red-packet-card-content-top .oc-create-red-packet-card-content-value .oc-promotion-metric-card-number-val {
  font-size: 26px;
}
.oc-create-red-packet-card .oc-create-red-packet-card-content .oc-create-red-packet-card-content-top .oc-create-red-packet-card-content-value .oc-promotion-metric-card-number-tail {
  font-size: 14px;
}
.oc-create-red-packet-card .oc-create-red-packet-card-content .oc-create-red-packet-card-content-top .oc-create-red-packet-card-content-tag-list {
  margin-left: 4px;
  margin-bottom: -4px;
  display: flex;
  gap: 4px;
}
.oc-create-red-packet-card .oc-create-red-packet-card-content .oc-create-red-packet-card-content-desc {
  font-size: 12px;
  color: #969aa0;
  margin-top: 4px;
}
.oc-create-red-packet-card .oc-create-red-packet-card-content .oc-create-red-packet-card-content-icon {
  position: absolute;
  width: 64px;
  height: 64px;
  right: 12px;
  top: 5px;
}
.oc-create-red-packet-card .oc-create-red-packet-card-bottom {
  margin: 0px 16px;
  padding: 8px 0;
  border-top: 1px dashed rgba(255, 68, 80, 0.2);
  position: relative;
  z-index: 1;
}
.oc-create-red-packet-card .oc-create-red-packet-card-bottom .oc-create-red-packet-card-bottom-data {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.oc-create-red-packet-card-gray .oc-create-red-packet-card-border {
  border-color: rgba(255, 255, 255, 0.25);
}
.oc-create-red-packet-card-gray .oc-create-red-packet-card-content {
  color: #969aa0;
}
.oc-create-red-packet-card-gray .oc-create-red-packet-card-bottom {
  border-color: #ffffff;
}
.oc-create-red-packet-card-orange .oc-create-red-packet-card-border {
  border-color: #ff915a;
}
.oc-create-red-packet-card-orange .oc-create-red-packet-card-content {
  color: #ff5f40;
}
.oc-create-red-packet-card-orange .oc-create-red-packet-card-bottom {
  border-color: rgba(255, 68, 80, 0.2);
}
.oc-create-red-packet-card-auto-height {
  height: auto;
}
.oc-create-red-packet-card-auto-height .oc-create-red-packet-card-header {
  position: relative;
}
.oc-create-red-packet-card-auto-height .oc-create-red-packet-card-content {
  padding: 20px 0;
  margin-top: 0;
  height: auto;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-red-packet-line {
  min-width: 350px;
  height: 78px;
  position: relative;
  overflow: hidden;
  display: flex;
}
.oc-create-red-packet-line .oc-create-red-packet-line-border {
  border: 2px solid #FF3757;
  border-radius: 32px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
  background: #302842;
}
.oc-create-red-packet-line .oc-create-red-packet-line-left {
  width: 144px;
  z-index: 1;
  position: relative;
}
.oc-create-red-packet-line .oc-create-red-packet-line-left .oc-create-red-packet-line-left-bg {
  width: 100%;
  height: 100%;
  border-radius: 32px 0 0 32px;
}
.oc-create-red-packet-line .oc-create-red-packet-line-left .oc-create-red-packet-line-left-content {
  margin-right: 20px;
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.oc-create-red-packet-line .oc-create-red-packet-line-left .oc-create-red-packet-line-left-content .oc-create-red-packet-line-left-title {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  color: rgba(0, 0, 0, 0);
}
.oc-create-red-packet-line .oc-create-red-packet-line-left .oc-create-red-packet-line-left-content .oc-create-red-packet-line-left-desc {
  color: rgba(0, 0, 0, 0);
  font-size: 12px;
}
.oc-create-red-packet-line .oc-create-red-packet-line-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  z-index: 5;
}
.oc-create-red-packet-line .oc-create-red-packet-line-right .oc-create-red-packet-line-right-title {
  margin-bottom: 4px;
  font-size: 14px;
}
.oc-create-red-packet-line .oc-create-red-packet-line-right .oc-create-red-packet-line-right-title .oc-create-red-packet-line-right-title-num {
  color: #ffffff;
  font-size: 20px;
  font-style: oblique;
  font-family: "OC-OPPOSans-Bold";
  margin-right: 4px;
}
.oc-create-red-packet-line-pink .oc-create-red-packet-line-border {
  border-color: rgba(227, 73, 73, 0.2);
}
.oc-create-red-packet-line-orange .oc-create-red-packet-line-border {
  border-color: #ff915a;
}
.oc-create-red-packet-line-red .oc-create-red-packet-line-border {
  border-color: #FF3757;
}
.oc-create-red-packet-line-auto-height {
  height: auto;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-select-condition {
  width: 544px;
  border-radius: 24px;
  border: 1px solid #ffffff;
  margin-top: -8px;
}
.oc-create-select-condition-body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0px 12px 12px 12px;
  margin-top: 12px;
}
.oc-create-select-condition-item {
  display: flex;
  align-items: center;
  padding-bottom: 12px;
}
.oc-create-select-condition-item-title {
  padding-right: 12px;
}
.oc-create-select-condition-item-rule {
  padding-right: 12px;
}
.oc-create-select-condition-item-value {
  width: 188px;
  padding-right: 12px;
}
.oc-create-select-condition-item-value-text {
  display: flex;
  height: 34px;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  font-weight: 400;
  font-size: 14px;
  background: #261d38;
  border-radius: 24px;
}
.oc-create-select-condition-item-value-text-disabled {
  background-color: #302842;
  border-color: #302842;
  color: rgba(255, 255, 255, 0.25);
  box-shadow: none;
  animation: none;
}
.oc-create-select-condition-item-value-text-tip {
  color: rgba(255, 255, 255, 0.5);
}
.oc-create-select-condition-item-value-text-tip-disabled {
  color: rgba(255, 255, 255, 0.25);
}
.oc-create-select-condition-item-value-text-select {
  color: #ffffff;
}
.oc-create-select-condition-item-value-text-set {
  color: #651dff;
}
.oc-create-select-condition-item-value-input {
  height: 34px;
}
.oc-create-select-condition-item-remove-icon {
  cursor: pointer;
  color: #969aa0;
}
.oc-create-select-condition-item-remove-icon:hover {
  color: #651dff;
}
.oc-create-select-condition-item-remove-icon:active {
  color: rgba(101, 29, 255, 0.75);
}
.oc-create-select-condition-header {
  display: flex;
  justify-content: space-between;
  height: 38px;
  padding: 8px 12px 0px 12px;
  background: #261d38;
  border-bottom: 1px solid #ffffff;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-select-gear {
  padding: 12px;
}
.oc-create-select-gear-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 32px;
}
.oc-create-select-gear-title-left {
  display: flex;
  align-items: center;
}
.oc-create-select-gear-title-left-text {
  background: linear-gradient(133.49deg, #323439 -67.01%, #122b59 54.93%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 2px;
  font-size: 14px;
  line-height: 32px;
}
.oc-create-select-gear-title-left-text-popover {
  margin-left: 4px;
}
div + .oc-create-select-gear-title-after {
  margin-top: 6px;
}
div + .oc-create-select-gear-content {
  margin-top: 12px;
}
.oc-create-select-gear-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.oc-create-select-gear-content-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: 24px;
  border: 1px solid #ffffff;
  background: #fff;
}
.oc-create-select-gear-content-item-radio {
  margin-right: 12px;
}
.oc-create-select-gear-content-item-right-radio {
  flex-direction: row-reverse;
  justify-content: space-between;
}
.oc-create-select-gear-content-item-right-radio .oc-create-select-gear-content-item-radio {
  margin-left: 12px;
  margin-right: 0px;
}
.oc-create-select-gear-content-item-noradio {
  border: none;
  background-color: #261d38;
  flex-direction: row;
}
.oc-create-select-gear-content-item-noradio:hover {
  cursor: default !important;
  background-color: #4b445b;
}
.oc-create-select-gear-content-item-noradio:hover .oc-create-select-gear-content-item-button-text {
  cursor: pointer;
  color: #651dff;
}
.oc-create-select-gear-content-item-noradio-disabled {
  background-color: #302842;
}
.oc-create-select-gear-content-item-noradio-disabled:hover {
  background-color: #302842;
}
.oc-create-select-gear-content-item-noradio-disabled:hover .oc-create-select-gear-content-item-button-text {
  cursor: not-allowed !important;
  color: rgba(255, 255, 255, 0.25) !important;
}
.oc-create-select-gear-content-item-active {
  border-color: #651dff;
}
.oc-create-select-gear-content-item-disabled {
  border-color: rgba(255, 255, 255, 0.25);
}
.oc-create-select-gear-content-item-disabled:hover {
  cursor: not-allowed !important;
}
.oc-create-select-gear-content-item-active.oc-create-select-gear-content-item-disabled {
  border-color: rgba(101, 29, 255, 0.34);
}
.oc-create-select-gear-content-item:hover {
  cursor: pointer;
}
.oc-create-select-gear-content-item-button-text {
  position: absolute;
  right: 16px;
}
.oc-create-select-gear-content-item-button-text-disabled {
  color: rgba(255, 255, 255, 0.25);
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-select-package .oc-create-select-package-card {
  width: 544px;
  border: 1px solid #ffffff;
  border-radius: 24px;
}
.oc-create-select-package .oc-create-select-package-card .oc-create-select-package-card-header {
  height: 34px;
  padding: 0 12px;
  background-color: #f4f4f5;
  border-bottom: 1px solid #ffffff;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.oc-create-select-package .oc-create-select-package-card .oc-create-select-package-card-content {
  padding: 16px;
  max-height: 218px;
  overflow: auto;
}
.oc-create-select-package .oc-create-select-package-card .oc-create-select-package-card-content .oc-create-select-package-card-content-header {
  margin-bottom: 8px;
}
.oc-create-select-package .oc-create-select-package-card .oc-create-select-package-card-content .oc-empty {
  height: 218px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-select-placement .ovui-cascader-panel__selection-block {
  height: unset;
}
.oc-create-select-placement .ovui-cascader-panel__list-wrapper {
  max-height: 272px;
  overflow-y: scroll;
}
.oc-create-select-placement .create-select-placement-item {
  display: flex;
}
.oc-create-select-placement .create-select-placement-item-img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.oc-create-select-placement .create-select-placement-item-name .oc-typography-bold {
  font-weight: 400;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-text-render-audio {
  display: flex;
  position: relative;
  padding-right: 295px;
  overflow: hidden;
}
.oc-create-text-render-audio-left {
  padding-right: 24px;
  border-right: 1px solid #dfe0e2;
  width: 457px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.oc-create-text-render-audio-left .oc-radio-group-plain .ovui-radio-group {
  row-gap: 4px;
}
.oc-create-text-render-audio-right {
  position: absolute;
  right: 0;
  top: 0;
  overflow-y: auto;
  height: 100%;
  margin-left: 24px;
  width: 271px;
}
.oc-create-text-render-audio-right-body {
  margin-top: 16px;
  height: calc(100% - 38px);
}
.oc-create-text-render-audio-right-body:has(.oc-empty) {
  display: flex;
  align-items: center;
}
.oc-create-text-render-audio-right-body .audio-card + .audio-card {
  margin-top: 16px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-create-word-tag-click-div {
  height: 100%;
  position: relative;
  width: 80px;
  margin-left: 12px;
  cursor: pointer;
}
.oc-create-word-tag-click-div::before {
  content: "";
  width: 1px;
  height: 16px;
  background: #dfe0e2;
  position: absolute;
  left: -12px;
  top: 3px;
}
.oc-create-word-tag-click {
  width: 0;
  height: 100%;
  white-space: nowrap;
  position: relative;
  left: -90px;
  font-size: 14px;
  color: #ffffff;
  z-index: 10;
  cursor: pointer;
}
.oc-create-word-tag-enter {
  margin-left: 8px;
}
.oc-create-word-tag-click-disabled {
  color: rgba(255, 255, 255, 0.25);
  cursor: not-allowed;
}
.oc-create-word-tag-suggest {
  margin-left: 8px;
}
.oc-create-word-tag-panel-info {
  margin-top: 8px;
}
.oc-create-word-tag-panel {
  margin-top: 8px;
}
.oc-create-word-tag-suggest-list .oc-create-word-tag-suggest-list-title {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  padding-left: 12px;
  line-height: 34px;
}
.oc-create-word-tag-suggest-list .ovui-list {
  border: none;
}
.oc-create-word-tag-suggest-list .ovui-list .ovui-list__header {
  display: none;
}
.oc-create-word-tag-suggest-list .ovui-list .ovui-list__body-scroller {
  max-height: 192px;
  height: auto;
}
.oc-create-word-tag-suggest-list .oc-create-word-tag-suggest-empty {
  padding: 20px 0;
}
.oc-create-word-tag-suggest-popper {
  padding: 6px 0;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-tag-panel-wrapper {
  border-radius: 24px;
  border: 1px solid #ffffff;
}
.oc-tag-panel-wrapper .oc-tag-panel-header {
  padding: 0 12px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ffffff;
  border-radius: 24px 24px 0 0;
  background: #261d38;
}
.oc-tag-panel-wrapper .oc-tag-panel-header .oc-tag-panel-header-num {
  font-weight: bolder;
  font-size: 14px;
  color: #ffffff;
}
.oc-tag-panel-wrapper .oc-tag-panel-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 12px;
  margin: 0 -8px -8px 0;
}
.oc-tag-panel-wrapper .oc-tag-panel-list .oc-tag-panel-list-item {
  width: calc(33% - 8px);
  margin: 0 8px 8px 0;
}
.oc-tag-panel-wrapper .oc-tag-panel-list .oc-tag-panel-list-item .oc-tag-panel-list-item-tag {
  height: 24px;
  padding: 0px 8px;
  border-radius: 8px;
  background: #261d38;
  display: flex;
  justify-content: space-between;
}
.oc-tag-panel-wrapper .oc-tag-panel-list .oc-tag-panel-list-item .oc-tag-panel-list-item-tag-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.oc-tag-panel-wrapper .oc-tag-panel-list .oc-tag-panel-list-item .oc-tag-panel-list-item-tag .oc-tag-panel-list-item-close {
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.oc-tag-panel-wrapper .oc-tag-panel-list .oc-tag-panel-list-item .oc-tag-panel-list-item-tag-with-desc {
  height: 54px;
  padding: 6px 12px;
}
.oc-tag-panel-wrapper .oc-tag-panel-list .oc-tag-panel-list-item .oc-tag-panel-list-item-tag-disabled {
  background: #302842;
  color: rgba(255, 255, 255, 0.25);
}
.oc-tag-panel-wrapper .oc-tag-panel-list .oc-tag-panel-list-item .oc-tag-panel-list-item-tag-disabled .oc-tag-panel-list-item-close {
  color: rgba(255, 255, 255, 0.25);
  cursor: not-allowed;
}
.oc-tag-panel-wrapper .oc-tag-panel-list .oc-tag-panel-list-item-with-description {
  width: 100%;
  margin: 0 8px 8px 0;
  display: flex;
  justify-content: space-between;
}
.oc-tag-panel-wrapper .oc-tag-panel-list .oc-tag-panel-list-item-with-description .oc-tag-panel-list-item-tag-content {
  width: 30%;
}
.oc-tag-panel-wrapper .oc-tag-panel-list .oc-tag-panel-list-item-with-description .oc-tag-panel-list-item-tag-content .oc-tag-panel-list-item-tag {
  height: 24px;
  padding: 0px 8px;
  margin-right: 12px;
  margin-bottom: 4px;
  border-radius: 8px;
  background: #261d38;
  display: flex;
  justify-content: space-between;
}
.oc-tag-panel-wrapper .oc-tag-panel-list .oc-tag-panel-list-item-with-description .oc-tag-panel-list-item-tag-content .oc-tag-panel-list-item-tag .oc-tag-panel-list-item-close {
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.oc-tag-panel-wrapper .oc-tag-panel-list .oc-tag-panel-list-item-with-description .oc-tag-panel-list-item-tag-content .oc-tag-panel-list-item-tag-with-desc {
  height: 54px;
  padding: 6px 12px;
}
.oc-tag-panel-wrapper .oc-tag-panel-list .oc-tag-panel-list-item-with-description .oc-tag-panel-list-item-description {
  flex: 1;
}
.oc-tag-panel-wrapper .oc-tag-panel-list .oc-tag-panel-list-item-with-description .oc-tag-panel-list-item-description .oc-tag-panel-list-item-description-input {
  color: #64666b;
  margin-bottom: 2px;
  height: 24px;
  padding-left: 0;
}
.oc-tag-panel-wrapper .oc-tag-panel-list .oc-tag-panel-list-item-with-description .oc-tag-panel-list-item-tag-disabled {
  background: #302842;
  color: rgba(255, 255, 255, 0.25);
}
.oc-tag-panel-wrapper .oc-tag-panel-list .oc-tag-panel-list-item-with-description .oc-tag-panel-list-item-tag-disabled .oc-tag-panel-list-item-close {
  color: rgba(255, 255, 255, 0.25);
  cursor: not-allowed;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.recommend-title-select-modal-tabs {
  margin: 24px 0px;
}
.oc-recommend-title-select-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.oc-recommend-title-select-modal-footer .num {
  font-size: 14px;
  color: #ffffff;
}
.oc-recommend-title-select-modal-footer-button {
  display: flex;
  justify-content: flex-end;
}
.oc-recommend-title-select-modal-footer-button .oc-button-wrap:nth-of-type(1) {
  margin-right: 8px;
}
.recommend-title-filter {
  position: relative;
}
.recommend-title-filter-select {
  position: absolute;
  top: 0px;
  right: 0px;
}
.oc-recommend-modal-title-list {
  margin: 16px -24px 0;
  max-height: 318px;
  overflow-y: auto;
  overflow-x: hidden;
}
.oc-recommend-modal-title-list .oc-recommend-modal-title-total {
  padding: 0 24px 16px;
}
.oc-recommend-modal-title-list .byted-checkbox-group {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.oc-recommend-modal-title-list .list_item {
  padding-left: 8px;
  cursor: pointer;
}
.oc-recommend-modal-title-list .list_item:hover .similar-title {
  display: block;
  font-size: 14px;
}
.oc-recommend-modal-title-list .list_content {
  padding: 0px 24px 4px;
  height: 100%;
}
.oc-recommend-modal-title-list .list_content .recommend-title-checkbox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.oc-recommend-modal-title-list .list_content .recommend-title-checkbox .row-wrapper {
  width: 100%;
}
.oc-recommend-modal-title-list .list_content .recommend-title-checkbox .checkbox-item {
  margin-bottom: 8px;
}
.oc-recommend-modal-title-list .list_content .no-data-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.oc-recommend-modal-title-list .list_content .no-data-wrapper img {
  width: 320px;
}
.oc-recommend-modal-title-list .list_content .no-data-wrapper .no-data-tips {
  color: #999999;
  font-size: 14px;
}
.oc-recommend-modal-title-list .list_item {
  position: relative;
  height: 38px;
  line-height: 38px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 0 8px;
  margin: 0;
}
.oc-recommend-modal-title-list .list_item::first-child {
  margin-left: 16px;
}
.oc-recommend-modal-title-list .list_item label {
  height: 22px;
  margin: 2px 0;
}
.oc-recommend-modal-title-list .list_item .list_item_text {
  width: 360px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.oc-recommend-modal-title-list .list_item .list_item_text .content {
  overflow: hidden;
}
.oc-recommend-modal-title-list .list_item .list_item_text .content p {
  margin: 0;
  display: inline-block;
}
.oc-recommend-modal-title-list .list_item .list_item_text .similar-title {
  display: none;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: #edf1f5;
  padding-left: 14px;
}
.oc-recommend-modal-title-list .list_item:hover {
  background: #edf1f5;
}
.oc-recommend-modal-title-list .list_item .checkbox-disabled {
  cursor: not-allowed;
}
.oc-recommend-modal-title-list .list_item .checkbox-disabled:hover {
  background: transparent;
}
.oc-recommend-modal-title-list .list_item .checkbox-disabled:hover .similar-title {
  display: none;
}
.oc-recommend-modal-title-list .no-hover:hover {
  background: transparent;
}
.highlight-keyword {
  color: red;
  font-weight: 500;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.creative-title-input {
  width: 554px;
}
.oc-bidword-keyword-modal-label {
  margin-right: 6px;
  font-size: 14px;
}
.oc-bidword-keyword-modal-input {
  display: inline-block;
  width: 288px;
}
.oc-bidword-keyword-modal-inputlen {
  color: #666;
  font-size: 12px;
  padding-left: 8px;
}
.oc-bidword-modal-footer {
  display: flex;
  flex-direction: row-reverse;
}
.oc-bidword-modal-footer-button {
  margin-left: 8px;
}
.oc-recommend-title-drop {
  border-radius: 24px;
  padding: 16px;
}
.oc-recommend-title-drop .new-look-more {
  display: flex;
  justify-content: space-between;
  min-height: 22px;
  padding-bottom: 4px;
}
.oc-recommend-title-drop .new-look-more-padding {
  padding-bottom: 8px;
}
.oc-recommend-title-drop .new-look-error {
  margin-bottom: 8px;
}
.oc-recommend-title-drop .suggestion-list .suggestion-item {
  width: 100%;
  color: #ffffff;
  font-size: 14px;
  height: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.oc-recommend-title-drop .suggestion-list .suggestion-item:hover {
  background: #f8f8f8;
}
.dynamic-word-select-modal-words-popover {
  max-height: 200px;
  overflow: scroll;
}
.dynamic-work-tips {
  margin-bottom: 10px;
}
.dynamic-word-modal {
  padding-bottom: 24px !important;
}
.dynamic-word-modal-tabs {
  margin-bottom: 8px;
}
.dynamic-word-modal .ovui-tr .insert .ovui-button--text {
  color: #ffffff;
}
.dynamic-word-modal .ovui-tr:hover .insert .ovui-button--text {
  color: #651dff;
}
.word-insert-top {
  border-top: 1px solid #ffffff;
  padding-top: 8px;
}
.word-insert-wrapper {
  display: flex;
  justify-content: space-between;
}
.word-insert-wrapper .each-word {
  margin: 0 5px;
  cursor: pointer;
}
.word-insert-wrapper .add-link-more {
  margin-right: 0;
}
.word-insert-wrapper .keyword {
  display: flex;
  align-items: center;
  gap: 4px;
}
.word-insert-wrapper .ad-link-text-btn {
  color: #651dff;
  font-weight: 400;
  cursor: pointer;
  font-size: 14px;
}
.word-insert-wrapper .word-and-keyword {
  display: flex;
  font-size: 14px;
}
.word-insert-wrapper .word-and-keyword .insert-tips {
  color: rgba(255, 255, 255, 0.5);
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-creative-title-group {
  width: 544px;
}
.oc-creative-title-group .top-operation {
  display: flex;
  align-items: center;
}
.oc-creative-title-group .top-operation button {
  margin-right: 8px;
}
.oc-creative-title-group .top-operation .total-add {
  font-weight: normal;
  font-size: 14px;
  line-height: 22px;
  color: #666666;
}
.oc-creative-title-group .creative-title-item {
  position: relative;
  margin-bottom: 8px;
}
.oc-creative-title-group .creative-title-item__delete {
  position: absolute;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
  right: -23px;
  display: flex;
  top: 8px;
}
.oc-creative-title-group .creative-title-item__delete:hover {
  color: #651dff;
}
.oc-creative-title-group .creative-title-item__delete-disabled {
  color: rgba(255, 255, 255, 0.25);
  cursor: not-allowed;
}
.oc-creative-title-group .creative-title-item__delete-disabled:hover {
  color: rgba(255, 255, 255, 0.25);
}
.oc-creative-title-group .creative-title-item__prefix-tag-box {
  display: flex;
  gap: 4px;
  align-items: center;
  margin-right: 4px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-general-cascader-pop-filter-panel .ovui-cascader-panel__main--border {
  border: none;
}
.oc-general-cascader-panel-filter {
  margin-bottom: 8px;
}
.oc-general-cascader-filter-input {
  padding: 12px;
  border-bottom: 1px solid #ffffff;
  margin-bottom: 0;
}
.oc-general-cascader-panel-title {
  font-size: 14px;
  color: #323335;
  font-weight: bolder;
  line-height: 38px;
  padding-left: 12px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-general-multi-level-cascader {
  width: 980px;
}
.oc-general-multi-level-cascader-show-border {
  padding: 24px;
  border-radius: 0px 0px 4px 4px;
  border-right: 1px solid #dfe0e2;
  border-bottom: 1px solid #dfe0e2;
  border-left: 1px solid #dfe0e2;
}
.oc-general-multi-level-cascader-content {
  gap: 8px;
  flex-shrink: 0;
}
.oc-general-multi-level-cascader-content-select {
  display: flex;
}
.oc-general-multi-level-cascader-content-select-left {
  width: 686px;
  margin-right: 8px;
}
.oc-general-multi-level-cascader-content-select-right-item {
  background-color: #f4f4f5;
  margin: 8px 12px 0;
  border-radius: 8px;
  padding: 2px 16px;
  position: relative;
  color: #969aa0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* flex-direction: column; */
  gap: 8px 0;
}
.oc-general-multi-level-cascader-content-select-right-item-img {
  height: 32px;
  width: 32px;
  border-radius: 50%;
}
.oc-general-multi-level-cascader-content-select-right-item-close {
  cursor: pointer;
}
.oc-general-multi-level-cascader-content-search {
  margin-bottom: 8px;
}
.general-multi-level-adv-select {
  width: 686px;
}
.general-multi-level-adv-select .general-multi-level-adv-select-ml-8 {
  margin-left: 8px;
}
.general-multi-level-adv-select .general-multi-level-adv-select-text-gray {
  color: rgba(255, 255, 255, 0.5);
}
.general-multi-level-adv-select-title {
  background-color: #261d38;
  height: 38px;
  line-height: 38px;
  padding-left: 12px;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
}
.general-multi-level-group-select {
  width: 686px;
}
.general-multi-level-group-select-title {
  background-color: #261d38;
  height: 38px;
  line-height: 38px;
  padding-left: 12px;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: center;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-material-per-second-view-chart_selector_wrapper {
  align-items: center;
  display: flex;
  margin-bottom: 16px;
}
.oc-material-per-second-view-chart_chart_wrapper {
  position: relative;
  width: auto;
  padding: 0px;
  margin: 0px;
  border-width: 0px;
  cursor: auto;
}
.oc-material-per-second-view-chart_chart_wrapper .progress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 20px;
  pointer-events: none;
  border-right: 1px solid #8146ff;
  background: linear-gradient(270deg, rgba(42, 85, 229, 0.1) 0%, rgba(42, 85, 229, 0) 100%);
}
.oc-material-per-second-view-chart_chart_wrapper .progress-btn {
  position: absolute;
  width: 62px;
  background: #302842;
  box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  line-height: 20px;
  padding: 2px 8px;
  font-weight: 600;
  font-size: 12px;
  transform: translate(-50%, 0);
  cursor: grabbing;
  display: flex;
  justify-content: center;
  align-items: center;
}
.oc-material-per-second-view-chart_chart_wrapper .progress-btn .btn-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 20px;
}
.oc-material-per-second-view-chart_chart_wrapper .progress-btn .btn-wrapper .i-icon {
  display: block;
  height: 14px;
  margin-right: 4px;
}
.lightcharts-tooltip .material-per-second-view-chart_chart-tooltip {
  width: 200px;
  padding: 16px;
  display: flex;
}
.lightcharts-tooltip .material-per-second-view-chart_chart-tooltip__video {
  width: 55px;
  height: 96px;
  border-radius: 8px;
  overflow: hidden;
}
.lightcharts-tooltip .material-per-second-view-chart_chart-tooltip__info {
  margin-left: 10px;
}
.lightcharts-tooltip .material-per-second-view-chart_chart-tooltip__title {
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  color: #ffffff;
  margin-bottom: 12px;
}
.lightcharts-tooltip .material-per-second-view-chart_chart-tooltip__point-list {
  color: #323335;
}
.lightcharts-tooltip .material-per-second-view-chart_chart-tooltip__point {
  display: flex;
  font-weight: 500;
  line-height: 20px;
  height: 20px;
  font-size: 12px;
  align-items: center;
}
.lightcharts-tooltip .material-per-second-view-chart_chart-tooltip__point span + span {
  margin-left: 8px;
}
.lightcharts-tooltip .material-per-second-view-chart_chart-tooltip__point .point-color {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  vertical-align: middle;
}
.lightcharts-tooltip .material-per-second-view-chart_chart-tooltip .material-per-second-view-chart_chart-tooltip__point + .material-per-second-view-chart_chart-tooltip__point {
  margin-top: 8px;
}
.lightcharts-tooltip .material-per-second-view-chart_chart-tooltip.type-vertical {
  width: 137px;
  flex-direction: column;
}
.lightcharts-tooltip .material-per-second-view-chart_chart-tooltip.type-vertical .material-per-second-view-chart_chart-tooltip__video {
  width: 96px;
  height: 55px;
}
.lightcharts-tooltip .material-per-second-view-chart_chart-tooltip.type-vertical .material-per-second-view-chart_chart-tooltip__info {
  margin-left: 0;
  margin-top: 10px;
}
.lightcharts-tooltip .material-per-second-view-chart_chart-tooltip.type-horizontal .material-per-second-view-chart_chart-tooltip__info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-message-content {
  height: 100%;
  overflow-y: auto;
  padding: 24px;
  box-sizing: border-box;
  background: #302842;
  position: relative;
}
.oc-message-content__title {
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  color: #ffffff;
  margin-bottom: 4px;
}
.oc-message-content__create-time {
  font-size: 14px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.5);
}
.oc-message-content__detail {
  font-size: 14px;
  line-height: 22px;
  color: #ffffff;
  margin-top: 24px;
}
.oc-message-content__detail a {
  color: #651dff;
  text-decoration: none;
}
.oc-message-content__detail a:hover {
  color: #7433ff;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-message-drawer.oc-message-drawer__with-footer .message-drawer__pagination {
  bottom: 114px;
}
.oc-message-drawer__header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -2px;
}
.oc-message-drawer__message-content {
  border-radius: 32px;
}
.oc-message-drawer__pagination {
  width: 226px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #302842;
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0px 6px 18px 0 rgba(0, 0, 0, 0.08);
  border-radius: 8px;
}
.oc-message-drawer__pagination-button .ovui-button.ovui-button--md {
  min-width: 0px;
  width: 68px;
}
.oc-message-drawer__pagination-indicator {
  flex: none;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-message-layout {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  background: #302842;
  border-radius: 32px;
}
.oc-message-layout__message-list-container {
  width: 476px;
  border-right: 1px solid #ebebed;
  flex: none;
}
.oc-message-layout__message-content-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
}
.oc-message-layout__footer {
  flex: none;
  height: 65px;
  border-top: 1px solid #ebebed;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-message-list {
  display: flex;
  flex-direction: column;
  padding: 0px 12px;
}
.oc-message-list__read-all-button {
  flex: none;
  margin: 24px 0 12px 24px;
}
.oc-message-list-message {
  display: flex;
  padding: 12px;
  border-radius: 24px;
}
.oc-message-list-message:hover {
  background-color: #261d38;
}
.oc-message-list-message.selected {
  background-color: #381088;
}
.oc-message-list-message.unread .oc-message-list-message__title {
  font-weight: 600;
}
.oc-message-list-message__dot-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 3px;
  margin-right: 8px;
}
.oc-message-list-message__read-dot {
  width: 6px;
  height: 6px;
  background: #ff0060;
  border-radius: 50%;
}
.oc-message-list-message__read-dot.oc-message-list-message__is-read {
  background: #d5d6d9;
}
.oc-message-list-message__title {
  font-size: 14px;
  line-height: 22px;
  color: #ffffff;
}
.oc-message-list-message__desc {
  font-weight: 400;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
.oc-message-list-message__tag-wrapper {
  display: inline-flex;
  align-items: center;
}
.oc-message-list-message__tag {
  display: inline-flex;
}
.oc-message-list-message__create-time {
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
  font-size: 12px;
  line-height: 20px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.navigator {
  min-width: 1280px;
  height: 64px;
  top: 0;
  text-align: left;
  display: flex;
}
.navigator .navigator-left {
  height: 100%;
  position: relative;
  text-align: left;
  display: inline-flex;
}
.navigator .navigator-left-menu {
  margin-left: 12px;
  display: inline-flex;
}
.navigator .navigator-left-menu .menu-arrow-bg-right {
  right: -2px;
  top: 0;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
}
.navigator .navigator-left-menu .menu-arrow-bg-left {
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.08);
  margin-left: -2px;
}
.navigator .navigator-left-menu .menu-arrow-bg-left,
.navigator .navigator-left-menu .menu-arrow-bg-right {
  color: #969aa0;
  position: absolute;
  width: 24px;
  height: 24px;
  margin-top: 20px;
  z-index: 20001;
  flex-shrink: 0;
  border-radius: 999px;
}
.navigator .navigator-left-menu .menu-arrow-bg-left .menu-arrow-right,
.navigator .navigator-left-menu .menu-arrow-bg-right .menu-arrow-right {
  margin: 7px 8px;
}
.navigator .navigator-left-menu .menu-arrow-bg-left .menu-arrow-left,
.navigator .navigator-left-menu .menu-arrow-bg-right .menu-arrow-left {
  margin: 7px;
}
.navigator .menu-arrow:hover,
.navigator .menu-arrow-bg-left:hover,
.navigator .menu-arrow-bg-right:hover {
  cursor: pointer;
  color: #651dff;
  z-index: 20004;
}
.navigator-logo {
  padding-left: 24px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  height: 100%;
}
.navigator-logo .logo {
  height: 40px;
}
.navigator .navigator-right {
  display: flex;
  height: 64px;
  position: absolute;
  flex-wrap: nowrap;
  height: 100%;
  align-items: center;
  right: 0;
  top: 0;
}
.navigator .navigator-right .navigator-right-tool {
  display: flex;
}
.navigator .navigator-right .navigator-right-line {
  width: 1px;
  height: 20px;
  margin-left: 16px;
  margin-right: 16px;
}
.navigator-entrance {
  justify-content: center;
  margin-left: 8px;
  margin-right: 24px;
  cursor: pointer;
}
.nav-right-tool-default .navigator-right-line {
  background: #bfc1c5;
}
.nav-right-tool-transparent .navigator-right-line {
  background: rgba(255, 255, 255, 0.5);
}
.nav-transparent {
  background: transparent;
}
.nav-white {
  background: white;
}
.nav-absolute {
  position: absolute;
}
.nav-relative {
  position: relative;
}
.nav-fixed {
  position: fixed;
}
.navigator-first-con::-webkit-scrollbar {
  width: 0 !important;
}
@-moz-document url-prefix() {
  .navigator-first-con {
    flex-direction: row-reverse;
  }
}
.navigator-first-con {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  overflow-x: hidden;
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}
.navigator-first-con .navigator-first-con-item-flag,
.navigator-first-con .navigator-first-con-item-flag-disabled,
.navigator-first-con .first-con-item-dropdown {
  margin-left: 8px;
}
.navigator-first-con .navigator-first-con-item-flag-disabled {
  cursor: not-allowed;
}
.navigator-first-con .navigator-first-con-item-flag,
.navigator-first-con .first-con-item-button {
  cursor: pointer;
}
.navigator-first-con .navigator-first-con-item-flag,
.navigator-first-con .navigator-first-con-item-flag-disabled,
.navigator-first-con .first-con-item-button {
  padding: 9px 12px;
  display: flex;
}
.navigator-first-con .navigator-first-con-item-flag .first-con-a,
.navigator-first-con .navigator-first-con-item-flag-disabled .first-con-a,
.navigator-first-con .first-con-item-button .first-con-a {
  font-size: 14px;
  position: relative;
  display: block;
}
.navigator-first-con .navigator-first-con-item-flag .first-con-red,
.navigator-first-con .navigator-first-con-item-flag-disabled .first-con-red,
.navigator-first-con .first-con-item-button .first-con-red {
  height: 6px;
  width: 6px;
  background: #ff0060;
  border-radius: 50%;
}
.navigator-first-con .navigator-first-con-item-flag .first-con-text,
.navigator-first-con .navigator-first-con-item-flag-disabled .first-con-text,
.navigator-first-con .first-con-item-button .first-con-text {
  display: flex;
  vertical-align: middle;
}
.navigator-first-con .navigator-first-con-item-flag .first-con-p,
.navigator-first-con .navigator-first-con-item-flag-disabled .first-con-p,
.navigator-first-con .first-con-item-button .first-con-p {
  line-height: 22px;
  font-size: 14px;
  white-space: nowrap;
}
.navigator-first-con .navigator-first-con-item-flag .navigator-first-con-down,
.navigator-first-con .navigator-first-con-item-flag-disabled .navigator-first-con-down,
.navigator-first-con .first-con-item-button .navigator-first-con-down {
  margin-left: 4px !important;
}
.navigator-first-con .navigator-first-con-item-flag:hover,
.navigator-first-con .first-con-item-button:hover {
  border-radius: 24px;
}
.navigator-first-con .navigator-first-con-p-default-flag {
  display: flex;
}
.navigator-first-con .navigator-first-con-p-default-flag firefly-new-badge {
  margin-left: 4px !important;
  display: inline-flex;
  align-self: center !important;
}
.navigator-first-con .is-mark-item {
  font-weight: bolder;
}
.navigator-first-con .first-con-line {
  display: inline-block;
  height: 4px;
  width: 16px;
  position: absolute;
  border-radius: 4px;
  margin: 4px auto 0;
  left: 0;
  right: 0;
}
.navigator-menu-dropdown .menu-dropdown-header {
  padding: 24px 24px 0;
}
.navigator-menu-dropdown .menu-dropdown-footer .menu-dropdown-footer-divider {
  width: 100%;
  height: 1px;
  background: #f4f4f5;
}
.navigator-menu-dropdown .menu-dropdown-footer .menu-dropdown-footer-content {
  padding: 12px 24px;
  align-content: space-between;
  display: flex;
  align-items: self-start;
}
.navigator-menu-dropdown .menu-dropdown-footer .menu-dropdown-footer-left {
  display: flex;
  align-items: self-start;
}
.navigator-menu-dropdown .menu-dropdown-footer .menu-dropdown-footer-left .menu-dropdown-footer-left-icon {
  color: rgba(255, 255, 255, 0.5);
  align-items: self-start;
  display: flex;
}
.navigator-menu-dropdown .menu-dropdown-footer .menu-dropdown-footer-hint {
  color: #ffffff;
  font-size: 12px;
  line-height: 18px;
  flex-wrap: wrap;
}
.navigator-menu-dropdown .menu-dropdown-footer .menu-dropdown-footer-option {
  margin-left: auto;
  flex: 0 0 auto;
  color: #651dff;
  font-size: 14px;
  line-height: 22px;
  cursor: pointer;
  display: flex;
}
.navigator-menu-dropdown .menu-dropdown-footer .menu-dropdown-footer-option .menu-dropdown-footer-option-more {
  margin-left: 16px;
}
.navigator_dopdown {
  max-height: -moz-fit-content !important;
  max-height: fit-content !important;
  box-shadow: 0px 6px 18px 0 rgba(0, 0, 0, 0.08) !important;
  border-radius: 32px !important;
  padding: 0px !important;
  margin-top: 7px !important;
}
.navigator_en_dopdown {
  max-height: -moz-fit-content !important;
  max-height: fit-content !important;
  box-shadow: 0px 6px 18px 0 rgba(0, 0, 0, 0.08) !important;
  border-radius: 32px !important;
  transform: translate3d(0px, 57px, 0px) !important;
  padding: 0px !important;
  width: calc(100vw - 48px) !important;
  margin: 7px 24px 0px 24px !important;
}
.navigator-first-con-item-flag firefly-new-badge {
  margin-left: 4px !important;
  display: inline-flex;
  align-self: center !important;
}
.navigator-first-con-down {
  margin-left: 4px;
}
.navigator-first-con-transparent .navigator-first-con-item-flag-disabled .first-con-p {
  color: rgba(255, 255, 255, 0.3);
}
.navigator-first-con-transparent .navigator-first-con-item-flag .first-con-p,
.navigator-first-con-transparent .first-con-item-button .first-con-p {
  color: rgba(255, 255, 255, 0.8);
}
.navigator-first-con-transparent .is-mark-item {
  color: rgba(0, 0, 0, 0) !important;
}
.navigator-first-con-transparent .is-mark-item icon,
.navigator-first-con-transparent .is-mark-item .first-con-p,
.navigator-first-con-transparent .is-mark-item div,
.navigator-first-con-transparent .is-mark-item iconpark-icon {
  color: rgba(0, 0, 0, 0) !important;
}
.navigator-first-con-transparent .is-common-item {
  color: rgba(0, 0, 0, 0) !important;
}
.navigator-first-con-transparent .navigator-first-con-item-flag:hover,
.navigator-first-con-transparent .first-con-item-button:hover {
  background: rgba(255, 255, 255, 0.1);
}
.navigator-first-con-transparent .first-con-line {
  background: rgba(0, 0, 0, 0) !important;
}
.navigator-first-con-default .navigator-first-con-item-flag-disabled .first-con-p {
  color: rgba(255, 255, 255, 0.25);
}
.navigator-first-con-default .navigator-first-con-item-flag .first-con-p,
.navigator-first-con-default .first-con-item-button .first-con-p {
  color: #ffffff;
}
.navigator-first-con-default .is-mark-item {
  color: #651dff !important;
}
.navigator-first-con-default .is-mark-item icon,
.navigator-first-con-default .is-mark-item .first-con-p,
.navigator-first-con-default .is-mark-item iconpark-icon {
  color: #651dff !important;
}
.navigator-first-con-default .is-common-item {
  color: rgba(255, 255, 255, 0.5);
}
.navigator-first-con-default .navigator-first-con-item-flag:hover,
.navigator-first-con-default .first-con-item-button:hover {
  background: rgba(42, 85, 229, 0.08);
}
.navigator-first-con-default .first-con-line {
  background: #651dff;
}
.navigator-menu-dropdown-content-2 {
  padding: 24px;
  display: flex;
}
.navigator-menu-dropdown-content-2 .menu-dropdown-content-banner {
  border-radius: 8px;
  margin-left: 24px;
}
.navigator-menu-dropdown-content-3 {
  padding: 24px;
}
.navigator-menu-dropdown-content-3 .navigator-menu-dropdown-content-3-1-flag {
  min-width: 180px;
  padding: 4px 8px;
  display: flex;
  line-height: 22px;
  font-size: 14px;
  vertical-align: middle;
  align-items: self-start;
  color: #ffffff;
}
.navigator-menu-dropdown-content-3 .navigator-menu-dropdown-content-3-1-flag:hover {
  background: #261d38;
  border-radius: 8px;
  cursor: pointer;
}
.navigator-menu-dropdown-content-3 .menu-dropdown-content-3-item {
  display: flex;
  color: rgba(255, 255, 255, 0.5);
}
.navigator-menu-dropdown-content-3 .menu-dropdown-content-3-icon {
  margin-right: 8px;
}
.navigator-menu-dropdown-content-3 .menu-dropdown-content-3-name {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  line-height: 22px;
  font-weight: bolder;
}
.navigator-menu-dropdown-content-3 .sub-childern-item-icon-flag {
  margin-left: 4px;
  align-self: center;
  display: flex;
}
.navigator-menu-dropdown-content-3 .menu-dropdown-content-divider {
  width: 100%;
  height: 1px;
  background: #dfe0e2;
  margin-top: 8px;
  margin-bottom: 12px;
}
.navigator-menu-dropdown-content-1 {
  padding: 8px;
}
.navigator-menu-dropdown-content-1 .menu-dropdown-content-item-disabled {
  color: rgba(255, 255, 255, 0.25);
}
.navigator-menu-dropdown-content-1 .menu-dropdown-content-item-disabled oc-icon,
.navigator-menu-dropdown-content-1 .menu-dropdown-content-item-disabled iconpark-icon {
  color: rgba(255, 255, 255, 0.25);
}
.navigator-menu-dropdown-content-1 .menu-dropdown-content-item-disabled :hover {
  cursor: not-allowed;
}
.navigator-menu-dropdown-content-1 .menu-dropdown-content-item {
  color: #ffffff;
}
.navigator-menu-dropdown-content-1 .menu-dropdown-content-item oc-icon,
.navigator-menu-dropdown-content-1 .menu-dropdown-content-item iconpark-icon {
  color: rgba(255, 255, 255, 0.5);
}
.navigator-menu-dropdown-content-1 .menu-dropdown-content-item-info {
  margin-left: 20px;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}
.navigator-menu-dropdown-content-1 .menu-dropdown-content-item-content-menu {
  display: block;
}
.navigator-menu-dropdown-content-1 .menu-dropdown-content-item-title {
  display: flex;
}
.navigator-menu-dropdown-content-1 .menu-dropdown-content-item-disabled,
.navigator-menu-dropdown-content-1 .menu-dropdown-content-item {
  padding: 4px 8px;
  display: flex;
}
.navigator-menu-dropdown-content-1 .menu-dropdown-content-item-disabled span,
.navigator-menu-dropdown-content-1 .menu-dropdown-content-item span {
  margin-left: 4px;
  font-size: 14px;
  line-height: 22px;
}
.navigator-menu-dropdown-content-1 .menu-dropdown-content-item:hover {
  cursor: pointer;
  background: #261d38;
  border-radius: 8px;
}
.navigator-is-mark-item oc-icon,
.navigator-is-mark-item iconpark-icon,
.navigator-is-mark-item oc-typography,
.navigator-is-mark-item .menu-dropdown-content-item-info,
.navigator-is-mark-item span {
  color: #651dff !important;
}
.menu-dropdown-footer-left-icon {
  margin-top: 3px;
}
.navigator-menu-dropdown-content-3-1-flag firefly-new-badge {
  margin-left: 4px !important;
  display: inline-flex;
  align-self: center !important;
}
.navigator_en_space {
  display: flex !important;
  flex: 1 1 0 !important;
  justify-content: space-between !important;
}
.navigator_submenu .menu-dropdown-content-banner {
  border-radius: 8px;
}
.navigator_submenu .navigator-sub-item {
  min-width: 180px;
}
.navigator_submenu .navigator-sub-item .sub-title {
  display: flex;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 4px;
}
.navigator_submenu .navigator-sub-item .sub-name {
  font-weight: bolder;
  color: #ffffff;
  line-height: 22px;
  padding: 4px 8px;
}
.navigator_submenu .navigator-sub-item .sub-childern {
  margin-left: 16px;
}
.navigator_submenu .navigator-sub-item .sub-childern .navigator-sub-childern-item-flag {
  min-width: 164px;
  padding: 4px 8px;
  color: #ffffff;
  display: flex;
  vertical-align: middle;
  align-items: self-start;
}
.navigator_submenu .navigator-sub-item .sub-childern .navigator-sub-childern-item-flag:hover {
  background: #261d38;
  border-radius: 8px;
  cursor: pointer;
}
.navigator_submenu .navigator-sub-item .sub-childern-item-is-mark {
  color: #651dff !important;
}
.navigator_submenu .navigator-sub-item .sub-childern-item-is-mark icon,
.navigator_submenu .navigator-sub-item .sub-childern-item-is-mark span,
.navigator_submenu .navigator-sub-item .sub-childern-item-is-mark oc-typography,
.navigator_submenu .navigator-sub-item .sub-childern-item-is-mark iconpark-icon {
  color: #651dff !important;
}
.navigator_submenu .navigator-sub-item .sub-childern-item-new,
.navigator_submenu .navigator-sub-item .sub-childern-item-icon-flag {
  margin-left: 4px;
  align-self: center;
  display: flex;
}
.navigator-sub-childern-item-flag firefly-new-badge {
  margin-left: 4px !important;
  display: inline-flex;
  align-self: center !important;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.nav-empty-drop {
  margin-top: 11px;
  max-height: none;
}
.nav-empty-drop .empty-dropdown-content {
  border-radius: 32px;
  background: #302842;
}
.navigator-dropdown-wrapper {
  position: relative;
}
.navigator-dropdown-wrapper .tag-number {
  position: absolute;
  top: -2px;
  left: 16px;
  margin: 0;
  color: #302842;
  background-color: #ff0060;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 24px;
  font-size: 12px;
  padding: 0 4px;
  border: 1px solid text-white;
}
.navigator-dropdown-wrapper .tag-number__text {
  transform: scale(0.8);
  display: inline-block;
}
.navigator-dropdown-wrapper .tag-red {
  position: absolute;
  top: 6px;
  left: 24px;
  margin-left: 2px;
  background-color: #ff0060;
  width: 6px;
  height: 6px;
  border-radius: 24px;
}
.navigator-dropdown-wrapper .dropdown-button {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 24px;
  padding: 6px;
  cursor: pointer;
}
.navigator-dropdown-pop {
  margin-top: 11px;
  border-radius: 32px;
  background: #302842;
  max-height: none;
  padding: 8px 0;
  color: #ffffff;
  font-size: 14px;
}
.navigator-dropdown-pop .oc-dropdown-item-text {
  width: 100%;
  display: inline-block;
  text-align: center;
}
.navigator-dropdown-pop .oc-dropdown-item-text .oc-typography-color-inherit {
  display: inline-block;
  text-align: center;
}
.navigator-dropdown-pop .oc-dropdown-item {
  padding: 3px 4px;
  font-size: 14px;
  text-align: center;
}
.navigator-dropdown-pop .oc-dropdown-content-footer {
  margin: 8px 16px 0 16px;
  text-align: center;
}
.navigator-dropdown-pop .navigator-dropdown-header {
  display: flex;
  height: 48px;
  padding: 7px 16px 13px;
  border-bottom: 1px solid #f4f4f5;
  justify-content: space-between;
  align-items: center;
}
.navigator-dropdown-pop .navigator-dropdown-header .navigator-dropdown-header-left {
  display: flex;
}
.navigator-dropdown-pop .navigator-dropdown-header .dropdown-title {
  color: #ffffff;
  font-size: 14px;
  font-weight: bolder;
}
.navigator-dropdown-pop .navigator-dropdown-header .dropdown-subtitle {
  margin-left: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  display: flex;
  align-items: center;
}
.navigator-dropdown-pop .navigator-dropdown-header .drop-message-footer-setting {
  color: #651dff;
  right: 16px;
  cursor: pointer;
  position: absolute;
}
.navigator-dropdown-pop .dropdown-message-footer {
  height: 40px;
  border-top: 1px solid #261d38;
  justify-content: space-between;
  align-items: center;
  display: flex;
  padding: 8px 16px 0px;
}
.navigator-dropdown-pop .dropdown-message-footer .drop-message-footer-all {
  color: #651dff;
  left: 16px;
  line-height: 22px;
  position: absolute;
  cursor: pointer;
}
.navigator-dropdown-pop .dropdown-message-footer .drop-message-footer-ignore {
  color: #651dff;
  line-height: 22px;
  right: 16px;
  cursor: pointer;
  position: absolute;
}
.navigator-pop {
  margin-top: 11px;
  padding: 8px 16px;
}
.nav-message-title-drop {
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
}
.navigator-dropdown-header-left .ovui-button--text {
  color: #ffffff !important;
  font-weight: bolder !important;
}
.nav-message-title-drop-content {
  padding: 6px auto;
  display: block;
}
.nav-message-title-drop-content .nav-message-title-drop-item {
  padding: 6px 12px;
  height: 34px;
}
.nav-message-title-drop-content .nav-message-title-drop-item:hover {
  cursor: pointer;
  background: #261d38;
}
.navigator-dropdown-button-default {
  color: rgba(255, 255, 255, 0.5);
}
.navigator-dropdown-button-default:hover {
  background-color: rgba(42, 85, 229, 0.08);
}
.navigator-dropdown-button-transparent {
  color: #302842;
  opacity: 0.5;
}
.navigator-dropdown-button-transparent:hover {
  background-color: rgba(255, 255, 255, 0.5);
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.navigator-list-message {
  position: relative;
  width: 560px;
}
.navigator-list-message-empty .oc-empty {
  height: 100%;
}
.navigator-list-message-body {
  overflow: auto;
}
.navigator-list-message-body .isRollingLoad {
  max-height: none;
}
.navigator-list-message-list {
  padding-top: 8px;
}
.navigator-list-message-spin-text {
  font-size: 12px;
  margin-left: 4px;
  align-items: center;
  color: #651dff;
  display: flex;
}
.navigator-list-message-item-content {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  line-height: 18px;
  margin-top: 8px;
}
.navigator-list-message-item {
  padding: 8px 16px;
}
.navigator-list-message-item .item-title-content {
  display: flex;
  align-content: space-between;
}
.navigator-list-message-item .item-title-content-left {
  display: flex;
}
.navigator-list-message-item .item-title-content-date {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  flex: 0 0 auto;
  line-height: 20px;
}
.navigator-list-message-item .item-title-content .text {
  flex: 1;
}
.navigator-list-message-item:hover {
  background-color: #261d38;
  cursor: pointer;
}
.navigator-list-message-item:hover .text {
  color: #651dff;
}
.navigator-list-message-item:hover .oc-item-group-content-title .oc-typography-type-text {
  font-size: 14px;
  font-weight: bolder;
  color: #651dff;
}
.navigator-list-message-item .text:hover {
  color: #651dff;
}
.navigator-list-message-item .tag {
  display: inline;
}
.navigator-list-message-item .read-status {
  display: flex;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #ff0060;
}
.navigator-list-message-item .ovui-tag {
  padding: 0 4px;
}
.navigator-list-message-item .oc-item-group-description {
  pointer-events: none;
  margin-top: 8px;
  padding-left: 10px;
}
.navigator-list-message-item .oc-item-group-content-title .oc-typography-type-text {
  font-size: 14px;
  font-weight: bolder;
}
.navigator-list-message-item .oc-item-group-content-title .oc-typography-type-text:hover {
  color: #651dff;
}
.navigator-list-message-item .date {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  margin: 0;
  margin-left: 8px;
}
.navigator-list-message-item.read .oc-item-group-content-title .oc-typography-type-text {
  font-weight: normal;
}
.navigator-list-message-item.read .read-status {
  background-color: rgba(255, 255, 255, 0.12);
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.navigator-tabs {
  padding: 16px;
  padding-bottom: 8px;
  background-color: #fff;
  display: flex;
}
.navigator-tabs-list {
  margin-right: 16px;
  padding-right: 16px;
  border-right: 1px solid #f4f4f5;
}
.navigator-tabs-list .navigator-tab {
  padding: 4px 8px;
  border-radius: 24px;
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 4px;
  cursor: pointer;
}
.navigator-tabs-list .navigator-tab:nth-last-child(1) {
  margin-bottom: 0;
}
.navigator-tabs-list .navigator-tab-active {
  color: #651dff;
  background-color: #381088;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.navigator-account {
  width: 280px;
  cursor: pointer;
  padding: 8px 16px;
  background-color: #fff;
}
.navigator-account .icon-copy {
  color: rgba(255, 255, 255, 0.5);
  display: none;
}
.navigator-account .icon-copy:hover {
  color: #651dff;
}
.navigator-account .icon-check {
  color: #651dff;
}
.navigator-account:hover {
  background-color: #f4f4f5;
  border-radius: 24px;
}
.navigator-account:hover .icon-copy {
  display: flex;
}
.navigator-account .default-avatar {
  line-height: 30px;
  text-align: center;
  font-weight: bolder;
  color: #fff;
  background-color: #651dff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.navigator-account .oc-item-group-prefix,
.navigator-account .oc-item-group-suffix {
  align-self: center;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.navigator-user-button {
  width: 261px;
  border-radius: 34px;
  padding: 4px 8px;
}
.navigator-user-button .oc-item-group-suffix {
  margin-left: 0;
}
.navigator-user-button .down-arrow {
  transition: all 0.1s;
}
.navigator-user-pop {
  width: 320px;
}
.navigator-user-pop .back {
  padding: 9px 16px;
  color: #ffffff;
  font-size: 14px;
  line-height: 22px;
}
.navigator-user-pop .back-button {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.navigator-user-pop .back-button-span {
  margin-left: 2px;
}
.navigator-user-pop .account-diver {
  height: 1px;
  width: 100%;
  background: #dfe0e2;
}
.navigator-user-pop .current-account {
  padding: 16px;
  padding-right: 12px;
}
.navigator-user-pop .current-account-info {
  margin-top: 10px;
}
.navigator-user-pop .setting-list {
  margin: 0;
  padding: 8px 0;
  list-style: none;
}
.navigator-user-pop .setting-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  cursor: pointer;
}
.navigator-user-pop .setting-list-item-content {
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 22px;
  color: #ffffff;
}
.navigator-user-pop .setting-list-item .icon-check {
  color: #651dff;
}
.navigator-user-pop .setting-list-item .item-icon {
  margin-right: 4px;
  height: 16px;
}
.navigator-user-pop .setting-list-item:hover {
  background-color: #f4f4f5;
}
.navigator-user:hover .down-arrow {
  transform: rotate(180deg);
}
.navigator-user-dropdown {
  max-height: none;
  border-radius: 32px;
  padding: 0;
  margin-top: 3px;
}
.navigator-user-transparent .down-arrow {
  color: rgba(255, 255, 255, 0.8);
}
.navigator-user-transparent .navigator-user-button:hover {
  background: rgba(255, 255, 255, 0.1);
}
.navigator-user-default .down-arrow {
  color: rgba(255, 255, 255, 0.5);
}
.navigator-user-default .navigator-user-button:hover {
  background: rgba(42, 85, 229, 0.08);
}
.navigator-user-account-info .default-avatar {
  line-height: 30px;
  text-align: center;
  font-weight: bolder;
  color: #fff;
  background-color: #651dff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.navigator-user-account-info .oc-item-group-description {
  pointer-events: none;
  width: 192px;
}
.navigator-user-account-info .oc-item-group-prefix,
.navigator-user-account-info .oc-item-group-suffix {
  align-self: center;
}
.navigator-user-account-info .account-info-suffix {
  margin-right: 8px;
}
.navigator-user-account-info-title-transparent .oc-typography-color-default,
.navigator-user-account-info-title-transparent .oc-typography-value-int {
  color: #fff;
}
.navigator-user-account-info-description-transparent {
  color: rgba(255, 255, 255, 0.5);
}
.navigator-user-account-info-description-transparent .oc-typography-color-secondary {
  color: rgba(255, 255, 255, 0.5) !important;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-feedback {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  overflow: hidden;
  background: #fff;
  position: relative;
}
.oc-feedback-bg-icon {
  position: absolute;
  top: 0;
  right: 0;
  transform: rotate(-40deg) translate(20px, -10px);
}
.oc-feedback-info {
  background: linear-gradient(90deg, #e9eeff 0%, #d1ddff 100%);
}
.oc-feedback-info-light {
  background: linear-gradient(180deg, #eff5ff 0%, rgba(239, 245, 255, 0) 100%);
}
.oc-feedback-warning {
  background: linear-gradient(90deg, #fff4e4 0%, #ffe5a1 100%);
}
.oc-feedback-warning-light {
  background: linear-gradient(180deg, #fff5d0 0%, rgba(255, 245, 208, 0) 100%);
}
.oc-feedback-error {
  background: linear-gradient(90deg, #ffede3 0%, #ffc3c3 100%);
}
.oc-feedback-error-light {
  background: linear-gradient(180deg, #fdf2f2 0%, rgba(253, 242, 242, 0) 100%);
}
.oc-feedback-header {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}
.oc-feedback-header-wrapper {
  margin-left: 12px;
}
.oc-feedback-header-title-text {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  line-height: 24px;
  margin-right: 8px;
}
.oc-feedback-header-title-num {
  font-size: 26px;
  font-weight: 700;
  line-height: 22px;
  font-family: OC-Number-Bold;
  margin-right: 3px;
}
.oc-feedback-header-title-num-info,
.oc-feedback-header-title-num-info-light {
  color: #651dff;
}
.oc-feedback-header-title-num-warning,
.oc-feedback-header-title-num-warning-light {
  color: #ff7c00;
}
.oc-feedback-header-title-num-error,
.oc-feedback-header-title-num-error-light {
  color: #ff0060;
}
.oc-feedback-header-title-suffix {
  color: #101011;
  font-size: 14px;
  line-height: 22px;
}
.oc-feedback-header-auxiliary {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  line-height: 22px;
}
.oc-feedback-suggest {
  width: 100%;
  border-radius: 32px;
  opacity: 1;
  z-index: 2;
  position: relative;
  background-color: #fff;
  padding: 16px;
}
.oc-feedback-suggest-title {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.oc-feedback-suggest-title-left {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  line-height: 22px;
  display: flex;
  align-items: center;
}
.oc-feedback-suggest-title-left-icon {
  margin-right: 4px;
}
.oc-feedback-suggest-title-right {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 20px;
  display: flex;
  align-items: center;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-guide-modal-wrap-white-close .ovui-modal__close-icon {
  color: rgba(0, 0, 0, 0) !important;
}
.oc-guide-modal-wrap-white-close .ovui-modal__close-icon:hover {
  color: #651dff !important;
  cursor: pointer;
}
.oc-guide-modal-wrap .ovui-modal {
  max-height: 640px;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
}
.oc-guide-modal-wrap .ovui-modal .ovui-modal__close-icon {
  color: #969aa0;
}
.oc-guide-modal-wrap .ovui-modal .ovui-modal__close-icon:hover {
  color: #651dff;
  cursor: pointer;
}
.oc-guide-modal-wrap-header {
  display: flex;
  align-items: center;
  justify-content: center;
}
.oc-guide-modal-wrap-body {
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.oc-guide-modal-wrap-body-box + .oc-guide-modal-wrap-body-text {
  margin-top: 12px;
}
.oc-guide-modal-wrap-body-box-image {
  border-radius: 12px 12px 0px 0px;
}
.oc-guide-modal-wrap-body-box-image-radius {
  border-radius: 32px;
}
.oc-guide-modal-wrap-body-box-video-player .oc-video-player {
  border-radius: 12px 12px 0px 0px;
}
.oc-guide-modal-wrap-body-box-video-player-radius .oc-video-player {
  border-radius: 32px;
}
.oc-guide-modal-wrap-body-text {
  display: flex;
  justify-content: center;
  overflow: auto;
  flex: 1;
  font-size: 14px;
  line-height: 22px;
  color: #ffffff;
}
.oc-guide-modal-wrap-body-nopadding {
  padding: 0;
}
.oc-guide-modal-wrap-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-quick-operation {
  width: 100%;
}
.oc-quick-operation-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #fff;
  border-radius: 32px;
  padding: 16px 0 16px 24px;
}
.oc-quick-operation-wrapper > :not(:last-child) {
  margin-right: 40px;
}
.oc-quick-operation-wrapper-item {
  display: flex;
  align-items: center;
}
.oc-quick-operation-wrapper-item-name {
  margin-left: 4px;
}
.oc-quick-operation-wrapper-primary {
  color: rgba(255, 255, 255, 0.75);
}
.oc-quick-operation-wrapper-primary-icon {
  color: #651dff;
}
.oc-quick-operation-wrapper-primary-popover {
  margin-left: 4px;
  color: rgba(255, 255, 255, 0.5);
}
.oc-quick-operation-wrapper-primary-value {
  margin: 0 4px 0 8px;
  color: #651dff;
}
.oc-quick-operation-wrapper-primary-clickable:hover {
  color: #651dff;
}
.oc-quick-operation-wrapper-primary-clickable:hover .oc-quick-operation-wrapper-primary-popover {
  color: #651dff;
}
.oc-quick-operation-wrapper-primary-clickable:active {
  color: rgba(101, 29, 255, 0.75);
}
.oc-quick-operation-wrapper-primary-clickable:active .oc-quick-operation-wrapper-primary-icon {
  color: rgba(101, 29, 255, 0.75);
}
.oc-quick-operation-wrapper-primary-clickable:active .oc-quick-operation-wrapper-primary-value {
  color: rgba(101, 29, 255, 0.75);
}
.oc-quick-operation-wrapper-primary-clickable:active .oc-quick-operation-wrapper-primary-popover {
  color: rgba(101, 29, 255, 0.75);
}
.oc-quick-operation .oc-quick-operation-wrapper-primary-popover:hover {
  color: #651dff;
}
.oc-quick-operation .oc-quick-operation-wrapper-primary-popover:active {
  color: rgba(101, 29, 255, 0.75);
}
.oc-quick-operation-wrapper-danger {
  color: rgba(255, 255, 255, 0.75);
}
.oc-quick-operation-wrapper-danger-icon {
  color: #ff0060;
}
.oc-quick-operation-wrapper-danger-popover {
  margin-left: 4px;
  color: rgba(255, 255, 255, 0.5);
}
.oc-quick-operation-wrapper-danger-value {
  margin: 0 4px 0 8px;
  color: #ff0060;
}
.oc-quick-operation-wrapper-danger-clickable:hover {
  color: #ff0060;
}
.oc-quick-operation-wrapper-danger-clickable:hover .oc-quick-operation-wrapper-danger-popover {
  color: #ff0060;
}
.oc-quick-operation-wrapper-danger-clickable:active {
  color: #dc0054;
}
.oc-quick-operation-wrapper-danger-clickable:active .oc-quick-operation-wrapper-danger-icon {
  color: #dc0054;
}
.oc-quick-operation-wrapper-danger-clickable:active .oc-quick-operation-wrapper-danger-value {
  color: #dc0054;
}
.oc-quick-operation-wrapper-danger-clickable:active .oc-quick-operation-wrapper-danger-popover {
  color: #dc0054;
}
.oc-quick-operation .oc-quick-operation-wrapper-danger-popover:hover {
  color: #ff0060;
}
.oc-quick-operation .oc-quick-operation-wrapper-danger-popover:active {
  color: #dc0054;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-step-guides {
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  background-color: #fff;
}
.oc-step-guides-title {
  color: #ffffff;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
}
.oc-step-guides-wrapper {
  width: 100%;
}
.oc-step-guides-wrapper-card {
  height: 90px !important;
  padding: 32px 0 8px 0;
}
.oc-step-guides-wrapper-link {
  height: 112px !important;
  margin-top: 24px;
  padding: 32px 0;
  border: 1px solid #ffffff;
  border-radius: 24px;
}
.oc-step-guides-groups {
  display: flex;
  justify-content: center;
  position: relative;
  cursor: default;
}
.oc-step-guides-groups-item {
  display: flex;
  align-items: center;
}
.oc-step-guides-groups-item-info {
  display: flex;
  align-items: center;
}
.oc-step-guides-groups-item-info-desc {
  margin-left: 16px;
  text-align: left;
}
.oc-step-guides-groups-item-info-desc-title {
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  word-break: keep-all;
}
.oc-step-guides-groups-item-info-desc-auxiliary {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  line-height: 20px;
  word-break: keep-all;
}
.oc-step-guides-groups-item-divider {
  border-bottom: 2px dashed #dfe0e2;
}
.oc-step-guides-groups-arrow {
  position: absolute;
  cursor: pointer;
  top: calc(50% - 8px);
}
.oc-step-guides-groups-left-card {
  left: 0;
}
.oc-step-guides-groups-left-link {
  left: 16px;
}
.oc-step-guides-groups-right-card {
  right: 0;
}
.oc-step-guides-groups-right-link {
  right: 16px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-promotion-batch-edit-age-edit .oc-popover span {
  line-height: 0;
}
.oc-promotion-batch-edit-age-edit-icon:hover {
  cursor: pointer;
  color: #651dff;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-modal-wrap .oc-promotion-batch-edit-modal-body {
  position: relative;
  overflow-y: scroll;
}
.oc-modal-wrap .oc-promotion-batch-edit-modal-body-scroll-auto {
  overflow-y: auto;
}
.oc-promotion-batch-edit-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.oc-promotion-batch-edit-modal-footer__left {
  display: flex;
  font-size: 12px;
  align-items: center;
  line-height: 20px;
  margin-right: 16px;
  width: 100%;
}
.oc-promotion-batch-edit-modal-footer__left-error {
  line-height: 20px;
  max-height: 40px;
}
.oc-promotion-batch-edit-modal-footer__left-error-message {
  color: #ff0060;
  float: left;
  height: 20px;
  line-height: 20px;
}
.oc-promotion-batch-edit-modal-footer__left-error-all {
  color: #651dff;
  cursor: pointer;
}
.oc-promotion-batch-edit-modal-footer__left-error-all:hover {
  background: rgba(227, 73, 73, 0.3);
}
.oc-promotion-batch-edit-modal-footer__right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.oc-promotion-batch-edit-next-modal-footer {
  display: flex;
  justify-content: flex-end;
}
.oc-promotion-batch-edit-next-modal-header .oc-modal-header-icon:hover {
  cursor: pointer;
}
.oc-promotion-batch-edit-next-modal-header span:hover {
  cursor: pointer;
}
.oc-promotion-batch-edit-modal-header {
  font-size: 16px;
}
.oc-promotion-batch-edit-modal-header .oc-popover-icon-wrapper {
  margin-left: 4px;
}
div + .oc-promotion-batch-edit-modal-table {
  margin-top: 20px;
}
.batch-edit-modal-table-scroll-row:hover .oc-promotion-operation span {
  color: #651dff;
}
.batch-edit-modal-table-scroll-row:hover [name="oc-icon-light-edit"] {
  color: #651dff;
}
.batch-edit-modal-table-scroll-row:hover .oc-promotion-operation .oc-promotion-operation-disabled-item {
  color: rgba(255, 255, 255, 0.5);
}
.oc-promotion-batch-edit-modal-footer-cancel-button {
  margin-right: 16px;
}
.oc-promotion-batch-edit-modal-body__result-status .oc-icon-success {
  color: #00d5a4;
}
.oc-promotion-batch-edit-modal-body__result-status .oc-icon-close-one {
  color: #ff0060;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-promotion-batch-edit-audience-package-row-empty {
  display: flex;
  align-items: center;
}
.oc-promotion-batch-edit-audience-package-row-empty .oc-popover {
  margin-left: 4px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-promotion-batch-edit-bid-budget-wrapper .batch-edit-bid-budget-effect-type {
  margin-bottom: 24px;
}
.oc-promotion-batch-edit-bid-budget-wrapper .oc-promotion-data-card {
  padding: 0 !important;
}
.oc-promotion-batch-edit-bid-budget-wrapper .change-value-input-group {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  row-gap: 24px;
}
.oc-promotion-batch-edit-bid-budget-wrapper .change-value-input-group .change-value-input-total {
  width: 50%;
  display: flex;
}
.oc-promotion-batch-edit-bid-budget-wrapper .oc-promotion-data-card {
  padding: 0 !important;
}
.oc-promotion-batch-edit-bid-budget-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
}
.oc-promotion-batch-edit-bid-budget-cell .oc-promotion-batch-edit-bid-budget-value .oc-promotion-batch-edit-bid-budget-value-edit {
  font-size: 12px;
  color: #ffffff;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.oc-promotion-batch-edit-bid-budget-cell .oc-promotion-batch-edit-bid-budget-value .oc-promotion-batch-edit-bid-budget-value-edit .oc-promotion-batch-edit-bid-budget-value-edit-icon {
  margin-right: 4px;
  cursor: pointer;
}
.oc-promotion-batch-edit-bid-budget-cell .oc-promotion-batch-edit-bid-budget-value .oc-promotion-batch-edit-bid-budget-value-desc {
  color: rgba(255, 255, 255, 0.5);
}
.oc-promotion-batch-edit-bid-budget-cell .oc-promotion-batch-edit-bid-budget-value-msg {
  flex-basis: 100%;
  display: flex;
  justify-content: flex-end;
}
.ovui-table-cell--right .oc-promotion-batch-edit-bid-budget-value-edit {
  justify-content: flex-end;
}
.oc-change-value-input-wrapper .input-rule-type {
  margin-bottom: 8px;
}
.oc-change-value-input-wrapper .input-rule-type-append {
  min-width: 30px;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  background: #261d38;
  border-radius: 0px 24px 24px 0px;
}
.oc-change-value-input-wrapper .input-rule-type-dropdown {
  min-width: 50px;
}
.oc-change-value-input-wrapper .input-rule-type-dropdown .ovui-button--text {
  color: #ffffff;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-promotion-data-card {
  display: flex;
  cursor: pointer;
  align-items: center;
}
.oc-promotion-data-card .oc-promotion-data-group {
  width: 100%;
  position: relative;
  overflow: hidden;
}
.oc-promotion-data-card .oc-promotion-data-group .edit-absolute {
  display: flex;
  position: absolute;
  left: 0;
  height: 16px;
  z-index: 1;
  padding-right: 24px;
  background: linear-gradient(90deg, #f2f5fd 0%, #e8edfc 51.74%, rgba(234, 239, 253, 0) 100%);
}
.oc-promotion-data-card .oc-promotion-data-group-title,
.oc-promotion-data-card .oc-promotion-data-group-desc {
  display: flex;
  align-items: center;
  gap: 4px;
}
.oc-promotion-data-card .oc-promotion-data-group-title-right,
.oc-promotion-data-card .oc-promotion-data-group-desc-right {
  justify-content: flex-end;
}
.oc-promotion-data-card .oc-promotion-data-edit {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #651dff;
}
.oc-promotion-data-card .oc-promotion-data-edit .edit-icon + .edit-icon {
  margin-left: 4px;
}
.oc-promotion-data-card .oc-promotion-data-edit .edit-icon {
  display: flex;
  align-self: center;
}
.oc-promotion-data-card .oc-promotion-data-tag-text {
  display: flex;
  align-items: center;
}
.oc-promotion-data-card .oc-promotion-data-tag {
  display: flex;
  align-items: center;
}
.oc-promotion-data-card .invisible {
  visibility: hidden;
}
.oc-promotion-data-card .visible {
  visibility: visible;
}
.oc-promotion-data-card .edit-disabled {
  cursor: not-allowed;
  color: rgba(101, 29, 255, 0.34);
}
.oc-promotion-data-card .edit-disabled svg {
  opacity: 0.46;
}
.oc-promotion-data-tag {
  display: flex;
  align-items: center;
  margin: 0 4px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-promotion-bid-wrapper {
  text-align: right;
  width: 100%;
  min-width: auto;
  height: auto;
  min-height: auto;
}
.oc-promotion-bid-header {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
  position: relative;
}
.oc-promotion-bid-header--icon {
  cursor: pointer;
  color: #651dff;
  display: flex;
  align-items: center;
}
.oc-promotion-bid-header .edit-absolute {
  position: absolute;
  left: 0;
  height: 16px;
  z-index: 1;
  padding-right: 24px;
  background: linear-gradient(90deg, #f2f5fd 0%, #e8edfc 51.74%, rgba(234, 239, 253, 0) 100%);
}
.oc-promotion-bid-header .edit-disabled {
  cursor: not-allowed;
  color: rgba(101, 29, 255, 0.34);
  opacity: 0.46;
}
.oc-promotion-bid-header--title {
  font-family: 'pingfang sc', -apple-system, blinkmacsystemfont, 'segoe ui', 'hiragino sans gb', 'microsoft yahei', 'helvetica neue', sans-serif, 'apple color emoji', 'segoe ui emoji';
  font-style: normal;
  word-break: break-all;
  white-space: normal;
  font-size: 12px;
  line-height: 20px;
  color: #ffffff;
  white-space: nowrap;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-promotion-batch-edit-date-edit-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.oc-promotion-batch-edit-date-edit-cell .oc-promotion-batch-edit-date-edit-cell-data {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.oc-promotion-batch-edit-date-edit-cell .oc-promotion-batch-edit-date-edit-cell-text {
  margin-right: 4px;
}
.oc-promotion-batch-edit-date-edit-cell .oc-promotion-batch-edit-date-edit-cell-icon {
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
}
.oc-promotion-batch-edit-date-edit-cell .oc-promotion-batch-edit-date-edit-cell-icon:hover {
  color: #651dff;
}
.oc-promotion-batch-edit-date-poover-form .oc-radio-group {
  width: 100%;
}
.oc-promotion-batch-edit-date-poover-form .ovui-radio-item-group {
  width: 100%;
}
.oc-promotion-batch-edit-date-poover-form .oc-radio-group .ovui-radio-item {
  width: 50%;
}
.oc-promotion-batch-edit-date-poover-form .ovui-date-picker {
  width: 100% !important;
}
.oc-promotion-batch-edit-date-edit-cell-msg {
  display: flex;
  flex-basis: 100%;
  justify-content: flex-end;
}
.oc-promotion-batch-edit-date-form-mode {
  margin-bottom: 8px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.batch-edit-delivery-duration-effect-type {
  margin-bottom: 24px;
}
.batch-edit-delivery-duration-unit {
  margin-left: 8px;
  color: #ffffff;
  font-size: 14px;
}
.delivery-duration-cell-edit {
  display: flex;
  align-items: center;
}
.delivery-duration-edit-icon {
  margin-left: 4px;
}
.delivery-duration-edit-icon:hover {
  cursor: pointer;
  color: #651dff;
}
.delivery-duration-info-slot {
  margin-bottom: 8px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.promotion-batch-edit-district-table {
  margin-top: 24px;
}
.promotion-batch-edit-district-edit-icon:hover {
  cursor: pointer;
  color: #651dff;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.promotion-batch-edit-match-type-edit-cell {
  overflow: auto;
}
.promotion-batch-edit-match-type-edit-cell .ovui-radio-item--checked {
  z-index: 1;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.negative-words-box {
  margin-bottom: 24px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-batch-edit-price-cell-edit {
  display: flex;
  align-items: center;
}
.oc-batch-edit-price-edit-icon {
  margin-right: 4px;
}
.oc-batch-edit-price-edit-icon:hover {
  cursor: pointer;
  color: #651dff;
}
.oc-promotion-batch-edit-price-unit-text {
  color: rgba(255, 255, 255, 0.5);
  padding-right: 8px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.age-edit .oc-popover span {
  line-height: 0;
}
.age-edit .age-edit-select .ovui-select__options > .ovui-option:first-child .ovui-option__action {
  display: none;
}
.promotion-batch-edit-age-edit-icon:hover {
  cursor: pointer;
  color: #651dff;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-batch-ratio-cell-edit {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.oc-batch-ratio-edit-icon {
  margin-right: 4px;
}
.oc-batch-ratio-edit-icon:hover {
  cursor: pointer;
  color: #651dff;
}
.oc-batch-ratio-cell-edit-text {
  max-width: 85px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-batch-edit-roi-goal-cell-edit {
  display: flex;
  align-items: center;
}
.oc-batch-edit-roi-goal-edit-icon {
  margin-right: 4px;
}
.oc-batch-edit-roi-goal-edit-icon:hover {
  cursor: pointer;
  color: #651dff;
}
.oc-batch-edit-roi-goal-cell-edit-ellipsis {
  max-width: 100px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-promotion-batch-edit-schedule-wrapper .oc-promotion-batch-edit-schedule-effect-type {
  margin-bottom: 24px;
}
.oc-promotion-batch-edit-schedule-edit-cell {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.oc-promotion-batch-edit-schedule-edit-cell .oc-promotion-batch-edit-schedule-edit-cell-edit {
  display: flex;
}
.oc-promotion-batch-edit-schedule-edit-cell .oc-promotion-batch-edit-schedule-edit-cell-text {
  white-space: nowrap;
}
.oc-promotion-batch-edit-schedule-edit-cell .oc-promotion-batch-edit-schedule-edit-cell-icon {
  margin-left: 4px;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
}
.oc-promotion-batch-edit-schedule-edit-cell .oc-promotion-batch-edit-schedule-edit-cell-icon:hover {
  color: #651dff;
}
.oc-promotion-batch-edit-schedule-edit-cell .oc-promotion-batch-edit-schedule-value-msg {
  width: 100%;
}
.oc-promotion-batch-edit-schedule-next-name {
  color: #ffffff;
  font-size: 14px;
  margin-bottom: 24px;
}
.oc-promotion-batch-edit-schedule-popover-content {
  max-height: 300px;
  overflow-y: auto;
}
.oc-promotion-batch-edit-schedule-form-wrapper .oc-promotion-batch-edit-schedule-form-type {
  margin-bottom: 24px;
}
.oc-promotion-batch-edit-schedule-form-wrapper .oc-promotion-batch-edit-schedule-form-mode {
  margin-bottom: 8px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-promotion-batch-operation-bar {
  height: 48px;
  border-radius: 8px;
  padding: 0px 16px 0px 16px;
  display: flex;
  background-color: rgba(42, 85, 229, 0.06);
}
.oc-promotion-batch-operation-bar .bar-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
}
.oc-promotion-batch-operation-bar .bar-num {
  font-weight: 600;
  font-size: 14px;
  color: #651dff;
  line-height: 20px;
}
.oc-promotion-batch-operation-bar .bar-groups {
  display: flex;
  align-items: center;
}
.oc-promotion-batch-operation-bar .bar-groups-divider {
  width: 1px;
  height: 12px;
  background-color: #b1caf6;
  margin: 0 24px;
}
.oc-promotion-batch-operation-bar .bar-groups-group {
  display: flex;
  align-items: center;
}
.oc-promotion-batch-operation-bar .bar-groups-group-item .ovui-button--text {
  color: #651dff;
}
.oc-promotion-batch-operation-bar .bar-groups-group-item .ovui-button--disabled {
  color: rgba(101, 29, 255, 0.34);
}
.oc-promotion-batch-operation-bar .bar-groups-group > :nth-child(n) {
  margin-right: 24px;
}
.oc-promotion-batch-operation-bar .bar-groups-group > :last-child {
  margin-right: 0;
}
.oc-promotion-batch-operation-bar .bar-close {
  color: #651dff;
}
.oc-promotion-batch-operation-bar .bar-close:hover {
  cursor: pointer;
}
.oc-promotion-batch-operation-dropdown-popper {
  min-width: 200px;
  max-height: 350px;
}
.oc-promotion-batch-operation-dropdown-popper .ovui-dropdown-item {
  padding-left: 24px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.batch-revive-delivery-input-margin {
  margin: 24px 0 16px 0;
}
.batch-revive-delivery-input-tip {
  margin-bottom: 12px;
}
.batch-revive-delivery-cell-edit {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.batch-revive-delivery-edit-icon {
  margin-left: 4px;
}
.batch-revive-delivery-edit-icon:hover {
  cursor: pointer;
  color: #651dff;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-promotion-budget-popover-body {
  text-align: start;
}
.oc-promotion-budget-popover-body .oc-promotion-budget-title-desc {
  font-size: 12px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.5);
}
.oc-promotion-budget-popover-body .group-margin-bottom {
  margin-bottom: 16px;
}
.oc-promotion-budget-popover-body .group-margin-bottom + .oc-promotion-budget-extra {
  margin-top: -8px;
}
.oc-promotion-budget-popover-body .oc-promotion-budget-reserved-info {
  margin-top: 8px;
  padding: 8px;
  background: #261d38;
  border-radius: 8px;
}
.oc-promotion-budget-popover-body .oc-promotion-budget-reserved-info-num {
  font-weight: bolder;
  color: #ffffff;
  margin: 0 4px;
}
.oc-promotion-budget-popover-body .oc-promotion-budget-reserved-info-mr {
  margin-right: 4px;
}
.oc-promotion-budget-popover-body .oc-promotion-budget-reserved-info-btn {
  display: inline-block;
  cursor: pointer;
  color: #651dff;
}
.oc-promotion-budget-popover-body .oc-promotion-budget-extra {
  margin-top: 8px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.qc-promotion-campaign-modal-btn {
  display: inline-block;
  vertical-align: middle;
}
.oc-scene-item-container {
  background: #302842;
  padding: 12px;
  display: flex;
  align-items: center;
  border-radius: 24px;
}
.oc-scene-item-container .scene-item {
  margin-right: 24px;
  display: flex;
  align-items: center;
}
.oc-scene-item-container .scene-item .key-box {
  font-size: 12px;
  margin-right: 3px;
  color: rgba(255, 255, 255, 0.5);
}
.oc-scene-item-container .scene-item .value-box {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
}
.oc-scene-item-container .ovui-select--text .ovui-select__text-wrapper {
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-promotion-compare-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
.oc-promotion-compare-card .ovui-spin__block-mask,
.oc-promotion-compare-card .ovui-spin__block {
  z-index: 1800 !important;
}
.oc-promotion-compare-select-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.oc-promotion-compare-select-container .select-container {
  position: relative;
  margin-right: 24px;
  display: flex;
  align-items: center;
}
.oc-promotion-compare-select-container .select-container:last-child {
  margin-right: 0;
}
.oc-promotion-compare-select-container .select-container .color {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background-color: #651dff;
  margin-right: 4px;
}
.oc-promotion-compare-select-container-popper {
  padding: 0;
  max-height: -moz-fit-content;
  max-height: fit-content;
}
.oc-promotion-compare-select-item {
  padding: 5px 12px;
  cursor: pointer;
}
.oc-promotion-compare-select-extra .block {
  width: 12px;
  height: 12px;
  margin-right: 4px;
  border-radius: 1px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-promotion-coupon-balance {
  height: 90px;
  display: flex;
  padding: 16px 24px;
  border-radius: 32px;
  background-color: #302842;
  min-width: 600px;
}
.oc-promotion-coupon-balance-total-wrapper {
  min-width: 180px;
}
.oc-promotion-coupon-balance-detail {
  padding-top: 8px;
  display: flex;
  align-items: end;
}
.oc-promotion-coupon-balance-line {
  width: 6px;
  height: 54px;
  margin: 0 16px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-template-list-popover {
  padding: 8px 0;
}
.oc-template-list-wrapper {
  width: 220px;
}
.oc-template-list-wrapper .template-item {
  width: 100%;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  cursor: pointer;
}
.oc-template-list-wrapper .template-item:hover {
  background-color: #261d38;
}
.oc-template-list-wrapper .template-item.selected {
  color: #651dff;
}
.oc-template-list-wrapper .template-item.disabled {
  color: rgba(255, 255, 255, 0.25);
  cursor: not-allowed;
}
.oc-template-list-wrapper .template-label {
  padding: 6px 12px;
  color: rgba(255, 255, 255, 0.5);
}
.oc-template-list-wrapper .divider {
  margin: 4px 12px 4px 12px;
  border-top: 1px solid #dfe0e2;
}
.oc-template-list-wrapper .template-list {
  max-height: 320px;
  overflow-y: auto;
}
.oc-template-list-wrapper .template-list .custom-template-list .custom-template-item {
  display: flex;
  justify-content: space-between;
}
.oc-template-list-wrapper .template-list .custom-template-list .custom-template-item .actions {
  display: flex;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 16px;
  visibility: hidden;
}
.oc-template-list-wrapper .template-list .custom-template-list .custom-template-item .actions .operation-icon:hover {
  color: #651dff;
  cursor: pointer;
}
.oc-template-list-wrapper .template-list .custom-template-list .custom-template-item:hover .actions {
  visibility: visible;
}
.oc-template-list-wrapper .template-list .system-template-list .system-template-item {
  display: flex;
  justify-content: space-between;
}
.oc-template-list-wrapper .oc-template-list-custom-btn .oc-button-wrap {
  width: 100%;
  height: 32px;
}
.oc-template-list-wrapper .oc-template-list-custom-btn .oc-button-wrap .ovui-button {
  width: 100%;
}
.oc-system-template-popover .select-metrics-tip {
  color: #ffffff;
  font-size: 12px;
  line-height: 18px;
}
.oc-system-template-popover .select-metrics-tip .title {
  font-weight: 600;
}
.oc-custom-column-modal-body {
  display: flex;
  padding: 0;
  overflow: hidden !important;
  margin: 0 24px;
  border: 1px solid #ffffff;
  border-radius: 24px;
}
.oc-custom-column-modal-body .left-container {
  display: flex;
  flex-flow: column;
}
.oc-custom-column-modal-body .left-container .metric-search {
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
}
.oc-custom-column-modal-body .left-container .metric-search .ovui-input__wrapper {
  border: none;
  background-color: unset;
  border-radius: unset;
  box-shadow: unset;
}
.oc-custom-column-modal-body .left-container .left-container-bottom {
  display: flex;
  flex: 1;
  max-height: 529px;
  overflow: auto;
}
.oc-custom-column-modal-body .left-container .left-container-bottom .empty-wrapper {
  width: 671px;
  border-right: 1px solid #ffffff;
  display: flex;
  align-items: center;
}
.oc-custom-column-modal-body .left-container .left-container-bottom .oc-tabs {
  border-right: 1px solid #ffffff;
}
.oc-custom-column-modal-body .left-container .left-container-bottom .ovui-tabs__nav {
  padding-left: 12px;
}
.oc-custom-column-modal-body .left-container .left-container-bottom .menu-list {
  width: 200px;
  height: 100%;
  background: #302842;
}
.oc-custom-column-modal-body .left-container .left-container-bottom .metric-select-container {
  overflow-y: auto;
  width: 471px;
  padding: 16px 16px 0 16px;
  border-right: 1px solid #ffffff;
  height: 100%;
}
.oc-custom-column-modal-body .left-container .left-container-bottom .metric-select-container .metric-select-area .first-title {
  display: flex;
  align-items: center;
  height: 22px;
  line-height: 22px;
  font-weight: 600;
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 12px;
}
.oc-custom-column-modal-body .left-container .left-container-bottom .metric-select-container .metric-select-area .select-list .select-item-group {
  border: 1px solid #ffffff;
  border-radius: 12px;
  margin-bottom: 12px;
}
.oc-custom-column-modal-body .left-container .left-container-bottom .metric-select-container .metric-select-area .select-list .second-title {
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  margin-bottom: 12px;
  background-color: #261d38;
  border-radius: 8px;
  color: #ffffff;
}
.oc-custom-column-modal-body .left-container .left-container-bottom .metric-select-container .metric-select-area .select-list .second-title-group {
  flex: 1;
  display: inline-flex;
  justify-content: flex-end;
}
.oc-custom-column-modal-body .left-container .left-container-bottom .metric-select-container .metric-select-area .select-list .metric-item-checkbox-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 8px 16px;
  padding-left: 12px;
  padding-bottom: 12px;
}
.oc-custom-column-modal-body .left-container .left-container-bottom .metric-select-container .metric-select-area .select-list .metric-item-checkbox-wrapper .metric-item-checkbox .ovui-checkbox__label {
  color: rgba(255, 255, 255, 0.75);
}
.oc-custom-column-modal-body .left-container .left-container-bottom .oc-space-item:nth-of-type(1),
.oc-custom-column-modal-body .left-container .left-container-bottom .oc-space-item:nth-of-type(2) {
  max-height: 529px;
  overflow: auto;
  height: 100%;
}
.oc-custom-column-modal-body .left-container .left-container-bottom .oc-space-item:nth-of-type(1) .oc-space,
.oc-custom-column-modal-body .left-container .left-container-bottom .oc-space-item:nth-of-type(2) .oc-space,
.oc-custom-column-modal-body .left-container .left-container-bottom .oc-space-item:nth-of-type(1) .oc-space-item:nth-of-type(1),
.oc-custom-column-modal-body .left-container .left-container-bottom .oc-space-item:nth-of-type(2) .oc-space-item:nth-of-type(1) {
  height: 100%;
}
.oc-custom-column-modal-body .left-container .left-container-bottom .oc-space-item:nth-of-type(1) .first-title .oc-space,
.oc-custom-column-modal-body .left-container .left-container-bottom .oc-space-item:nth-of-type(2) .first-title .oc-space {
  height: auto;
}
.oc-custom-column-modal-body .left-container .left-container-bottom .left-container-space > .oc-space-item:nth-of-type(1) {
  min-height: 30px;
}
.oc-custom-column-modal-body .tabs-left-container .left-container-bottom {
  height: 491px !important;
  overflow: auto;
}
.oc-custom-column-modal-body .tabs-left-container .left-container-bottom > .oc-space > .oc-space-item:nth-of-type(1) {
  height: auto !important;
}
.oc-custom-column-modal-body .tabs-left-container .left-container-bottom > .oc-space > .oc-space-item:nth-of-type(2) {
  height: 491px !important;
  overflow: auto;
}
.oc-custom-column-modal-body .tabs-left-container .left-container-bottom > .oc-space > .oc-space-item:nth-of-type(2) > .oc-space > .oc-space-item:nth-of-type(2) {
  height: 100% !important;
  overflow: auto;
}
.oc-custom-column-modal-body .selected-container {
  width: 280px;
  max-height: 566px;
  padding: 16px;
  overflow-y: auto;
}
.oc-custom-column-modal-body .selected-container .selected-title {
  display: flex;
  justify-content: space-between;
}
.oc-custom-column-modal-body .selected-container .selected-title .text {
  height: 22px;
  font-weight: 600;
}
.oc-custom-column-modal-body .selected-container .selected-list {
  padding-top: 16px;
}
.oc-custom-column-modal-body .selected-container .selected-list .frozen-item-list .oc-drag-list-item .oc-drag-list-item-content,
.oc-custom-column-modal-body .selected-container .selected-list .selected-item-list .oc-drag-list-item .oc-drag-list-item-content {
  padding: 3px 12px;
}
.oc-custom-column-modal-body .selected-container .selected-list .frozen-item-list .oc-drag-list-item-disabled,
.oc-custom-column-modal-body .selected-container .selected-list .selected-item-list .oc-drag-list-item-disabled {
  color: rgba(255, 255, 255, 0.75);
}
.oc-custom-column-modal-body .selected-container .selected-list .frozen-item-list .oc-drag-list-item-disabled .oc-drag-list-item-icon:hover,
.oc-custom-column-modal-body .selected-container .selected-list .selected-item-list .oc-drag-list-item-disabled .oc-drag-list-item-icon:hover {
  color: rgba(255, 255, 255, 0.75);
}
.oc-custom-column-modal-body .selected-container .selected-list .frozen-list-tip-popover-reference {
  flex: 1;
}
.oc-custom-column-modal-body .selected-container .selected-list .frozen-list-tip-wrapper {
  margin-top: 12px;
  margin-bottom: 16px;
}
.oc-custom-column-modal-body .selected-container .selected-list .frozen-list-tip-wrapper .frozen-list-tip {
  display: flex;
  align-items: center;
  flex: 1;
}
.oc-custom-column-modal-body .selected-container .selected-list .frozen-list-tip-wrapper .frozen-list-tip .text {
  padding: 0 8px;
  flex-grow: 0;
  color: rgba(255, 255, 255, 0.5);
}
.oc-custom-column-modal-body .selected-container .selected-list .frozen-list-tip-wrapper .frozen-list-tip .line {
  flex-grow: 1;
  height: 0;
  border: 0.5px solid rgba(255, 255, 255, 0.12);
}
.oc-custom-column-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.oc-custom-column-modal-footer .template-name-input {
  position: relative;
}
.oc-custom-column-modal-footer .template-name-input .tip {
  position: absolute;
  font-size: 10px;
  line-height: 18px;
}
.oc-custom-column-modal-footer .template-name-input .tip.error {
  color: #ff0060;
}
.oc-selected-item-wrapper {
  display: flex;
  align-items: center;
}
.oc-selected-item-wrapper .text {
  flex: 1;
}
.oc-selected-item-wrapper .delete-btn-wrapper {
  display: flex;
}
.oc-selected-item-wrapper .delete-btn-wrapper .delete-btn:hover {
  color: #651dff;
  cursor: pointer;
}
.oc-selected-item-wrapper .delete-btn-wrapper .delete-btn.disabled {
  color: rgba(255, 255, 255, 0.25);
  cursor: not-allowed;
}
.oc-title-suffix-wrapper {
  display: flex;
  align-items: center;
}
.oc-title-suffix-wrapper .question-popover-reference {
  display: flex;
  align-items: center;
}
.oc-title-suffix-wrapper .question-popover-reference .oc-popover-icon-wrapper {
  color: rgba(255, 255, 255, 0.25);
}
.oc-title-suffix-wrapper .question-popover-reference .oc-popover-icon-wrapper:hover {
  cursor: pointer;
}
.oc-title-suffix-wrapper .title-jump-icon {
  display: flex;
  align-items: center;
  color: #651dff;
  cursor: pointer;
}
.oc-title-suffix-wrapper .title-jump-icon .text {
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
}
.oc-title-suffix-wrapper .title-jump-icon .oc-icon-share-wrapper {
  display: flex;
}
.oc-guide-tag-wrapper {
  display: flex;
  align-items: center;
  height: 100%;
}
.oc-guide-tag-wrapper .badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background-color: #ff0060;
  margin-top: -15px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-promotion-data-overview .oc-promotion-data-overview-control-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.oc-promotion-data-overview .oc-promotion-data-overview-control-bar .oc-control-bar-right {
  display: flex;
  align-items: center;
}
.oc-promotion-data-overview .oc-promotion-data-overview-control-bar .oc-control-bar-right .icon-popover-reference {
  margin-left: 16px;
}
.oc-promotion-data-overview .oc-promotion-data-overview-content {
  min-height: 86px;
}
.oc-promotion-data-overview-toggle-btn {
  width: 32px;
  height: 32px;
}
.oc-promotion-data-overview-toggle-btn .ovui-button {
  min-width: 32px !important;
  height: 32px;
  padding: 0;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-promotion-detail-card {
  page-break-inside: avoid;
}
.oc-promotion-detail-card:hover .oc-promotion-detail-card-header .oc-promotion-detail-card-header-left .oc-promotion-detail-card-header-icon-edit {
  display: block;
}
.oc-promotion-detail-card .oc-promotion-detail-card-header {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #302842;
  border-radius: 24px;
  padding: 0 16px;
}
.oc-promotion-detail-card .oc-promotion-detail-card-header .oc-promotion-detail-card-header-left {
  display: flex;
  align-items: center;
}
.oc-promotion-detail-card .oc-promotion-detail-card-header .oc-promotion-detail-card-header-left .oc-promotion-detail-card-header-title {
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  color: #ffffff;
}
.oc-promotion-detail-card .oc-promotion-detail-card-header .oc-promotion-detail-card-header-left .oc-promotion-detail-card-header-icon-edit {
  display: none;
  margin-top: 2px;
  margin-left: 8px;
  cursor: pointer;
  color: #651dff;
}
.oc-promotion-detail-card .oc-promotion-detail-card-header .oc-promotion-detail-card-header-left .oc-promotion-detail-card-header-icon-edit:hover {
  color: #7433ff;
}
.oc-promotion-detail-card .oc-promotion-detail-card-header .oc-promotion-detail-card-header-left .oc-promotion-detail-card-header-icon-edit.disabled {
  cursor: not-allowed;
  color: rgba(101, 29, 255, 0.34);
}
.oc-promotion-detail-card .oc-promotion-detail-card-body {
  margin-top: 8px;
}
.oc-promotion-detail-card .oc-promotion-detail-card-body .oc-promotion-detail-card-body-item {
  display: flex;
  padding: 8px 16px;
  font-size: 14px;
  line-height: 20px;
}
.oc-promotion-detail-card .oc-promotion-detail-card-body .oc-promotion-detail-card-body-item .oc-promotion-detail-card-body-item-component {
  margin-bottom: 4px;
}
.oc-promotion-detail-card .oc-promotion-detail-card-body .oc-promotion-detail-card-body-item .oc-promotion-detail-card-body-item-label {
  min-width: 120px;
  max-width: 120px;
  margin-right: 16px;
  flex-shrink: 0;
}
.oc-promotion-detail-card .oc-promotion-detail-card-body .oc-promotion-detail-card-body-item-right {
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
}
.oc-promotion-detail-card-img-text-tag-wrapper {
  display: flex;
  align-items: center;
}
.oc-promotion-detail-card-img-text-tag-wrapper-img {
  margin-right: 4px;
}
.oc-promotion-detail-card-img-text-tag-wrapper-tag {
  margin-left: 8px;
  margin-top: 1px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-promotion-highlight-card {
  width: 100%;
  padding: 16px;
  background-color: #4b445b;
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.oc-promotion-highlight-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.oc-promotion-highlight-card__header-left {
  display: flex;
  align-items: center;
  gap: 4px;
}
.oc-promotion-highlight-card__header-left-title {
  padding-right: 4px;
  margin-right: -4px;
  background: linear-gradient(104deg, rgba(0, 65, 255, 0.72) 5.13%, rgba(66, 136, 255, 0.72) 94.28%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transform: translateX(0) skewX(-7deg);
  transform-origin: 0 0;
}
.oc-promotion-highlight-card__content {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 24px;
  width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  display: flex;
  gap: 8px;
  position: relative;
  min-height: 82px;
}
.oc-promotion-highlight-card__content-item,
.oc-promotion-highlight-card__content-line {
  flex: none;
}
.oc-promotion-highlight-card__content-line {
  position: relative;
}
.oc-promotion-highlight-card__content-line::after {
  width: 1px;
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.12);
  top: 25%;
  bottom: 25%;
  left: 50%;
}
.oc-promotion-highlight-card__content::-webkit-scrollbar-track-piece {
  background-color: transparent;
}
.oc-promotion-highlight-card__content::-webkit-scrollbar {
  width: 9px;
  height: 6px;
}
.oc-promotion-highlight-card__content::-webkit-scrollbar-thumb {
  background-color: #1a112e;
  border-radius: 3px;
  background-clip: padding-box;
  min-height: 28px;
}
.oc-promotion-highlight-card__content::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.25);
}
.oc-promotion-highlight-card__content-bottom {
  display: flex;
  align-items: center;
  gap: 4px;
}
.oc-promotion-highlight-card__loading-text {
  color: #651dff;
  font-size: 12px;
  line-height: 18px;
  margin-left: 4px;
}
.oc-promotion-highlight-card.oc-promotion-highlight-card__theme-market {
  background-color: #fff4f1;
}
.oc-promotion-highlight-card.oc-promotion-highlight-card__theme-market .oc-promotion-highlight-card__header-left-title {
  background: linear-gradient(113deg, #ff6934 10.06%, #ff9663 80.47%);
  -webkit-background-clip: text;
          background-clip: text;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-promotion-info-card-btn {
  display: inline-block;
  vertical-align: middle;
}
.oc-info-card-container {
  display: flex;
}
.oc-info-card-container.align-center {
  align-items: center;
}
.oc-info-card-container .left-area.sp-line {
  padding-right: 16px;
  border-right: 1px solid #e5e5e5;
}
.oc-info-card-container .right-area {
  margin-left: 16px;
}
.oc-info-card-container .info-item {
  display: flex;
  align-items: center;
}
.oc-info-card-container .info-item.hori-center {
  justify-content: center;
}
.oc-promotion-info-card-img {
  display: flex;
  justify-content: center;
  align-items: center;
}
.oc-promotion-info-card-img.red-light {
  border: 1px solid #fe2c55;
}
.oc-promotion-info-card-tags {
  margin-left: 8px;
}
.oc-promotion-info-card-actions {
  margin-left: 8px;
  font-size: 12px;
  color: #651dff;
  cursor: pointer;
  white-space: nowrap;
}
.oc-promotion-info-card-title {
  line-height: 22px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}
.oc-promotion-info-card-text-value {
  display: flex;
  align-items: center;
  font-size: 12px;
  width: 100%;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.5);
}
.oc-promotion-info-card-text-value .text {
  margin-right: 3px;
}
.oc-promotion-info-card-text {
  display: flex;
  align-items: center;
  font-size: 12px;
  width: 100%;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.5);
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-promotion-key-info-bar {
  padding: 16px;
  background: #261d38;
  width: 100%;
  min-width: 1112px;
  min-height: 86px;
  border-radius: 32px;
  cursor: default;
}
.oc-promotion-key-info-bar-content-box {
  display: flex;
  flex-direction: row;
}
.oc-promotion-key-info-bar-spin-box {
  width: 100%;
  height: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.oc-promotion-key-info-bar-spin-box .oc-promotion-key-info-bar-loading-text {
  margin-left: 5px;
  color: #7433ff;
  font-size: 12px;
}
.oc-promotion-key-info-bar-info-con {
  margin-top: 8px;
}
.oc-promotion-key-info-bar-left-con {
  flex: 1;
}
.oc-promotion-key-info-bar-left-con .oc-promotion-key-info-bar-title-con {
  display: flex;
  align-items: center;
  flex-direction: row;
}
.oc-promotion-key-info-bar-left-con .oc-promotion-key-info-bar-title-con .oc-promotion-key-info-bar-hover-show {
  position: relative;
  top: 2px;
}
.oc-promotion-key-info-bar-right-con {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.oc-promotion-key-info-bar-hover-show {
  margin-left: 4px;
  color: #651dff;
  visibility: hidden;
  cursor: pointer;
  display: inline-block;
  align-items: center;
  height: 16px;
}
.oc-promotion-key-info-bar:hover .oc-promotion-key-info-bar-hover-show {
  visibility: visible;
}
.oc-promotion-key-info-bar-suggestion-con {
  color: #651dff;
  display: inline-flex;
  align-items: center;
}
.oc-promotion-key-info-bar-text-con {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.75);
}
.oc-promotion-key-info-bar-key-value-con {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  display: flex;
  align-items: center;
}
.oc-promotion-key-info-bar-key-value-con .key-con-item {
  white-space: nowrap;
}
.oc-promotion-key-info-bar-key-value-con .value-con-item {
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  font-weight: bolder;
  font-family: "PingFang SC";
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-promotion-live-adinfo {
  font-size: 12px;
}
.oc-promotion-live-adinfo .oc-promotion-live-adinfo-flex {
  display: flex;
  align-items: center;
  gap: 4px;
}
.oc-promotion-live-adinfo .oc-promotion-live-adinfo-content {
  align-items: center;
}
.oc-promotion-live-adinfo-pointer {
  cursor: pointer;
}
.oc-promotion-live-adinfo .oc-promotion-live-adinfo-text {
  max-width: calc(100% - 128px);
  overflow: hidden;
  padding-right: 16px;
}
.oc-promotion-live-adinfo .oc-promotion-live-adinfo-img-wrap {
  position: relative;
  height: 32px;
  width: 32px;
  overflow: hidden;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  background-color: #ffffff;
}
.oc-promotion-live-adinfo .oc-promotion-live-adinfo-material {
  display: flex;
  align-items: center;
  width: 72px;
  color: rgba(255, 255, 255, 0.75);
  gap: 4px;
}
.oc-promotion-live-adinfo .oc-promotion-live-adinfo-aweme {
  cursor: pointer;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-promotion-media-group-wrapper {
  display: flex;
  align-items: center;
}
.oc-promotion-media-group-wrapper .oc-promotion-media-group-detail {
  position: relative;
}
.oc-promotion-media-group-wrapper .oc-promotion-media-group-detail .oc-promotion-media-group-detail-tag {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2000;
}
.oc-promotion-media-group-wrapper .oc-promotion-media-group-detail .oc-promotion-media-group-detail-mark {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2000;
}
.oc-promotion-media-group-wrapper .oc-promotion-media-group-detail .oc-promotion-media-group-list {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
  background: #261d38;
  border-radius: 24px;
}
.oc-promotion-media-group-wrapper .oc-promotion-media-group-detail .oc-promotion-media-group-list .oc-promotion-media-group-list-ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
}
.oc-promotion-media-group-wrapper .oc-promotion-media-group-detail .oc-promotion-media-group-list .oc-media-wrapper .oc-media-thumb-container {
  background-color: #dfe0e2;
}
.oc-promotion-media-group-wrapper .oc-promotion-media-group-detail .oc-promotion-media-group-list-disabled {
  opacity: 0.5;
}
.oc-promotion-media-group-wrapper .oc-promotion-media-group-info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: 16px;
  color: #323335;
  font-size: 12px;
}
.oc-promotion-media-group-preview {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-left: -8px;
}
.oc-promotion-media-group-preview .oc-promotion-media-group-preview-item {
  margin-left: 8px;
  margin-bottom: 8px;
}
.oc-promotion-media-group-preview-popover .oc-popover-body {
  max-height: 250px;
  overflow-y: auto;
  margin-bottom: -8px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-promotion-product-adinfo {
  font-size: 12px;
}
.oc-promotion-product-adinfo-pointer {
  cursor: pointer;
}
.oc-promotion-product-adinfo .oc-promotion-product-adinfo-name {
  font-weight: 600;
  line-height: 18px;
  color: #ffffff;
}
.oc-promotion-product-adinfo .oc-promotion-product-adinfo-ad-name,
.oc-promotion-product-adinfo .oc-promotion-product-adinfo-id-fade {
  display: flex;
  align-items: center;
}
.oc-promotion-product-adinfo .oc-promotion-product-adinfo-aweme-pop-wrap {
  height: 32px;
}
.oc-promotion-product-adinfo .oc-promotion-product-adinfo-x-pop-wrap {
  height: 16px;
}
.oc-promotion-product-adinfo .oc-promotion-product-adinfo-id {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.5);
}
.oc-promotion-product-adinfo .oc-promotion-product-adinfo-other {
  font-size: 12px;
  display: flex;
  margin-top: 4px;
  align-items: center;
  color: rgba(255, 255, 255, 0.75);
}
.oc-promotion-product-adinfo .oc-promotion-product-adinfo-other .oc-promotion-product-adinfo-close-icon {
  color: rgba(255, 255, 255, 0.25);
  margin-right: 4px;
}
.oc-promotion-product-adinfo .oc-promotion-product-adinfo-other img {
  max-height: 32px;
  max-width: 32px;
}
.oc-promotion-product-adinfo .oc-promotion-product-adinfo-aweme {
  margin-right: 4px;
}
.oc-promotion-product-adinfo .oc-promotion-product-adinfo-material {
  display: flex;
  align-items: center;
  margin-left: 16px;
}
.oc-promotion-product-adinfo .oc-promotion-product-adinfo-product-number {
  position: absolute;
  right: 0;
  height: 12px;
  font-size: 10px;
  line-height: 12px;
  font-weight: 600;
  min-width: 16px;
  text-align: center;
  padding: 0 2px;
  bottom: 0;
  background-color: rgba(26, 26, 27, 0.5);
  border-top-left-radius: 4px;
  color: #fff;
}
.oc-promotion-product-adinfo .oc-promotion-product-adinfo-product {
  display: flex;
  align-items: center;
}
.oc-promotion-product-adinfo .oc-promotion-product-adinfo-img-wrap {
  position: relative;
  height: 32px;
  width: 32px;
  overflow: hidden;
  border-radius: 8px;
  margin-right: 4px;
  display: flex;
  justify-content: center;
  background-color: #ffffff;
}
.oc-promotion-product-adinfo-aweme-pop {
  display: flex;
  align-items: center;
}
.oc-promotion-product-adinfo-aweme-pop img {
  height: 32px;
  width: 32px;
  border-radius: 50%;
  margin-right: 8px;
}
.oc-promotion-product-adinfo-ft12 {
  font-size: 12px;
  line-height: 18px;
}
.oc-promotion-product-adinfo-ft14 {
  font-size: 14px;
  line-height: 22px;
}
.oc-promotion-product-adinfo-title {
  color: #ffffff;
}
.oc-promotion-product-adinfo-subtitle {
  font-size: 12px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.5);
}
.oc-promotion-product-adinfo-arrow-name {
  cursor: pointer;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: center;
}
.oc-promotion-product-adinfo-arrow-name-icon {
  color: rgba(255, 255, 255, 0.5);
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-report-live-avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.oc-report-live-avatar .oc-report-live-avatar-content {
  position: relative;
}
.oc-report-live-avatar .oc-report-live-avatar-content-live {
  border-radius: 50%;
  border: 1px solid #ff1764;
}
.oc-report-live-avatar .oc-report-live-avatar-content-live-img {
  border-radius: 50%;
  border: 1px solid #fff;
}
.oc-report-live-avatar .oc-report-live-avatar-content-icon {
  position: absolute;
  top: -5px;
  left: -1px;
  border-radius: 3px;
}
.oc-report-live-avatar-tag {
  display: flex;
  justify-content: center;
  border-radius: 5px;
  border: 1px solid #fff;
  margin-top: -14px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-report-live-card {
  border-radius: 24px;
  background: #fff;
  padding: 16px;
}
.oc-report-live-card-up {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.oc-report-live-card-up-left {
  display: flex;
  align-items: center;
  width: 100%;
}
.oc-report-live-card-up-left-right {
  margin-left: 12px;
  width: 100%;
}
.oc-report-live-card-up-left-right-review {
  margin-left: 8px;
}
.oc-report-live-card-up-left-right span + div {
  margin-top: 4px;
}
.oc-report-live-card-up-left-right-bottom {
  display: flex;
}
.oc-report-live-card-up-left-right-bottom span + span {
  margin-left: 4px;
}
.oc-report-live-card-up-right {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0 12px;
}
.oc-report-live-card-up-right div + div {
  margin-left: 8px;
}
.oc-report-live-card-down {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.oc-report-live-card-down-item {
  display: flex;
  flex-direction: column;
  align-items: start;
}
.oc-report-live-card-down-item-bottom {
  display: flex;
  align-items: center;
}
.oc-report-live-card-down-item0 {
  width: 36%;
}
.oc-report-live-card-down-item1 {
  width: 24%;
}
.oc-report-live-card-down-item2 {
  width: 40%;
}
.oc-report-live-card-middel {
  margin-top: 4px;
}
.oc-report-live-card-horizontal {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.oc-report-live-card-horizontal-middle {
  flex-grow: 1;
  margin-top: 0 !important;
}
.oc-report-live-card-horizontal-left + .oc-report-live-card-horizontal-middle,
.oc-report-live-card-horizontal-middle + .oc-report-live-card-horizontal-right {
  margin-left: 72px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-promotion-status-card {
  padding: 12px 8px 12px 16px;
  width: 100%;
  position: relative;
}
.oc-promotion-status-card .oc-promotion-status-card-wrapper {
  display: flex;
  flex-direction: column;
}
.oc-promotion-status-card .oc-promotion-status-card-wrapper .oc-promotion-status-card-wrapper-title,
.oc-promotion-status-card .oc-promotion-status-card-wrapper .oc-promotion-status-card-wrapper-desc {
  display: flex;
  align-items: center;
}
.oc-promotion-status-card .oc-promotion-status-card-wrapper .oc-promotion-status-card-wrapper-title .oc-promotion-status-card-wrapper-title-suffix,
.oc-promotion-status-card .oc-promotion-status-card-wrapper .oc-promotion-status-card-wrapper-desc .oc-promotion-status-card-wrapper-title-suffix,
.oc-promotion-status-card .oc-promotion-status-card-wrapper .oc-promotion-status-card-wrapper-title .oc-promotion-status-card-wrapper-desc-suffix,
.oc-promotion-status-card .oc-promotion-status-card-wrapper .oc-promotion-status-card-wrapper-desc .oc-promotion-status-card-wrapper-desc-suffix {
  display: flex;
  align-items: center;
}
.oc-promotion-status-card .oc-promotion-status-card-wrapper .oc-promotion-status-card-wrapper-title {
  gap: 4px;
}
.oc-promotion-status-card .oc-promotion-status-card-wrapper .oc-promotion-status-card-wrapper-title-value {
  font-family: 'pingfang sc', -apple-system, blinkmacsystemfont, 'segoe ui', 'hiragino sans gb', 'microsoft yahei', 'helvetica neue', sans-serif, 'apple color emoji', 'segoe ui emoji';
  font-style: normal;
  word-break: break-all;
  white-space: normal;
  font-size: 12px;
  line-height: 20px;
  color: #ffffff;
  white-space: nowrap;
}
.oc-promotion-status-card .oc-promotion-status-card-wrapper .oc-promotion-status-card-wrapper-title-value .list-style {
  width: 8px;
  height: 8px;
  border-radius: 8px;
  margin-right: 4px;
  display: inline-flex;
  position: relative;
  box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  border: 1px solid #ffffff;
}
.oc-promotion-status-card .oc-promotion-status-card-wrapper .oc-promotion-status-card-wrapper-title-value .list-style-color-secondary {
  background: rgba(255, 255, 255, 0.5);
}
.oc-promotion-status-card .oc-promotion-status-card-wrapper .oc-promotion-status-card-wrapper-title-value .list-style-color-primary {
  background: #651dff;
}
.oc-promotion-status-card .oc-promotion-status-card-wrapper .oc-promotion-status-card-wrapper-title-value .list-style-color-danger {
  background: #ff0060;
}
.oc-promotion-status-card .oc-promotion-status-card-wrapper .oc-promotion-status-card-wrapper-title-value .list-style-color-success {
  background: #00d5a4;
}
.oc-promotion-status-card .oc-promotion-status-card-wrapper .oc-promotion-status-card-wrapper-title-value .list-style-color-warning {
  background: #ff7c00;
}
.oc-promotion-status-card .oc-promotion-status-card-wrapper .oc-promotion-status-card-wrapper-desc {
  padding-left: 12px;
}
.oc-promotion-status-card .oc-promotion-status-card-wrapper .oc-promotion-status-card-wrapper-desc .oc-typography {
  padding-right: 4px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-promotion-step {
  display: flex;
}
.oc-promotion-step.vertical {
  flex-direction: column;
}
.oc-promotion-step-item {
  text-align: center;
}
.oc-promotion-step-item.vertical {
  text-align: left;
  display: flex;
  position: relative;
}
.oc-promotion-step-item.vertical .step-content {
  padding: 0 0 0 10px;
}
.oc-promotion-step-item.vertical .step-icon-wrap {
  align-items: flex-start;
  justify-content: left;
}
.oc-promotion-step-item.vertical .step-title {
  margin-top: 0;
}
.oc-promotion-step-item.vertical .step-title .tips-icon {
  position: absolute;
  top: 50%;
  margin-left: 3px;
  color: rgba(255, 255, 255, 0.12);
}
.oc-promotion-step-item.vertical .step-title .iconpark-icon {
  display: block;
}
.oc-promotion-step-item.vertical .step-line {
  height: 100%;
  position: absolute;
  top: 0;
  margin-top: -1px;
  left: 0;
  width: 2px;
  z-index: 1;
  background-color: #c1c1c1;
}
.oc-promotion-step-item.vertical .step-line.last-item {
  height: 100%;
  width: 2px;
}
.oc-promotion-step-item.vertical .step-line.first-item {
  height: 100%;
  width: 2px;
  left: 0;
}
.oc-promotion-step-item .step-content {
  padding: 0 10px;
}
.oc-promotion-step-item .step-title {
  color: #ffffff;
  font-size: 14px;
  display: inline-block;
  margin-top: 10px;
  font-weight: 600;
  justify-content: center;
  align-items: center;
  line-height: 20px;
  position: relative;
}
.oc-promotion-step-item .step-title .tips-icon {
  position: absolute;
  top: 50%;
  margin-left: 3px;
  color: rgba(255, 255, 255, 0.12);
}
.oc-promotion-step-item .step-title .iconpark-icon {
  display: block;
}
.oc-promotion-step-item .step-line {
  width: 100%;
  position: absolute;
  top: 50%;
  margin-top: -1px;
  left: 0;
  height: 2px;
  z-index: 1;
  background-color: #c1c1c1;
}
.oc-promotion-step-item .step-line.last-item {
  width: 50%;
}
.oc-promotion-step-item .step-line.first-item {
  width: 50%;
  right: 0;
  left: auto;
}
.oc-promotion-step-item .step-desc {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  line-height: 20px;
  margin: 4px auto 0px;
  display: flex;
  justify-content: center;
}
.oc-promotion-step-item .step-icon {
  position: relative;
  z-index: 2;
  background: #fff;
  border-radius: 50%;
}
.oc-promotion-step-item .step-icon-wrap {
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: center;
  position: relative;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-promotion-task-notice {
  position: fixed;
  top: 95px;
  right: 32px;
  width: 346px;
  font-size: 14px;
  z-index: 998;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}
.oc-promotion-task-notice__header {
  position: relative;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.oc-promotion-task-notice__header-ver {
  height: 12px;
  width: 1px;
  background: #e0e0e0;
  margin: 0 8px;
}
.oc-promotion-task-notice__header-close-icon {
  cursor: pointer;
  height: 24px;
  width: 24px;
  text-align: center;
  line-height: 24px;
}
.oc-promotion-task-notice__body {
  max-height: 245px;
  overflow: auto;
  min-height: 50px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.oc-promotion-task-notice__body-item {
  position: relative;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #ffffff;
  gap: 4px;
  line-height: 20px;
  font-size: 12px;
}
.oc-promotion-task-notice__body-item-left {
  width: 16px;
  height: 16px;
  position: relative;
  display: flex;
  align-items: center;
}
.oc-promotion-task-notice__body-item-left .oc-loading {
  width: 16px;
  height: 16px;
}
.oc-promotion-task-notice__body-item-left.success {
  color: #00d5a4;
}
.oc-promotion-task-notice__body-item-left.error {
  color: #ff0060;
}
.oc-promotion-task-notice__body-item-left.warn {
  color: #ff7c00;
}
.oc-promotion-task-notice__footer {
  display: flex;
  justify-content: flex-end;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-promotion-title-bar {
  border-radius: 16px;
  background: #302842;
}
.oc-promotion-title-bar-box {
  border-radius: 16px;
}
.oc-promotion-title-bar-box-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
}
.oc-promotion-title-bar-box-title-left {
  display: flex;
  align-items: center;
}
.oc-promotion-title-bar-box-title-left-popover {
  margin-left: 4px;
}
.oc-promotion-title-bar-box-title-left-text {
  font-size: 18px;
  font-weight: 600;
  line-height: 32px;
  color: #ffffff;
}
.oc-promotion-title-bar-box-title-left-icon {
  cursor: pointer;
}
.oc-promotion-title-bar-box-title-left-icon:after {
  display: inline-block;
  content: "";
  width: 1px;
  height: 16px;
  margin: 0 16px;
  background: #dfe0e2;
  border-radius: 2px;
}
.oc-promotion-title-bar-box-title-left-icon:hover {
  color: #651dff;
}
.oc-promotion-title-bar-box-title-left-title-suffix {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
.oc-promotion-title-bar-box-title-left-title-suffix:before {
  display: inline-block;
  content: "";
  width: 1px;
  height: 16px;
  margin: 0 16px;
  background: #dfe0e2;
  border-radius: 2px;
}
.oc-promotion-title-bar-box-title-left-tabs-tab .tab--active {
  color: #651dff;
  font-weight: 600;
}
.oc-promotion-title-bar-box-tabs {
  padding: 0 24px 16px 24px;
}
.oc-promotion-title-bar-box-tabs-has-body {
  padding: 0 24px;
}
.oc-promotion-title-bar-diver {
  height: 1px;
  background: #dfe0e2;
  margin: 0 24px;
}
.oc-promotion-title-bar-body {
  padding: 24px;
}
.oc-promotion-title-bar-has-top-top {
  margin-bottom: -24px;
  border-radius: 16px;
  padding-bottom: 24px;
}
.oc-promotion-title-bar-has-top-box {
  border-radius: 16px;
  background: #302842;
}
.oc-promotion-title-bar-has-top-body {
  border-radius: 0 0 16px 16px;
  background: #302842;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-promotion-tool-bar .oc-card-content {
  justify-content: space-between;
}
.oc-promotion-tool-bar .oc-promotion-tool-bar-left {
  display: flex;
  align-items: center;
}
.oc-promotion-tool-bar .oc-promotion-tool-bar-left .oc-promotion-tool-bar-prefix-icon {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-right: 14px;
}
.oc-promotion-tool-bar .oc-promotion-tool-bar-left .oc-promotion-tool-bar-left-title-wrapper {
  display: flex;
  align-items: center;
}
.oc-promotion-tool-bar .oc-promotion-tool-bar-left .oc-promotion-tool-bar-left-title-wrapper .title-text {
  font-size: 18px;
  color: #ffffff;
  font-weight: 600;
}
.oc-promotion-tool-bar .oc-promotion-tool-bar-left .oc-promotion-tool-bar-left-title-wrapper-separator:after {
  display: inline-block;
  content: "";
  width: 2px;
  height: 12px;
  margin: 0 16px;
  background: #bfc1c5;
  border-radius: 2px;
}
.oc-promotion-tool-bar-dropdown {
  margin-right: 32px;
  display: flex;
  align-items: center;
}
.oc-promotion-tool-bar-dropdown-line::before {
  display: inline-block;
  content: "";
  width: 2px;
  height: 12px;
  margin: 0 16px;
  background: #bfc1c5;
  border-radius: 2px;
}
.oc-promotion-tool-bar-key-value {
  display: flex;
  align-items: center;
  gap: 8px;
}
.oc-promotion-tool-bar-key-value.oc-promotion-tool-bar-key-value-vertical {
  flex-direction: column;
  gap: 4px;
  align-items: self-start;
}
.oc-promotion-tool-bar-key-value-content {
  display: flex;
  align-items: center;
}
.oc-promotion-tool-bar-dropdown-btn {
  display: flex;
  align-items: center;
}
.oc-promotion-tool-bar-dropdown-btn .dropdown-btn-name {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
}
.oc-promotion-tool-bar-dropdown-btn .dropdown-btn-icon {
  margin-left: 4px;
  transition: transform 0.2s;
}
.oc-promotion-tool-bar-dropdown-btn .dropdown-btn-icon-rotate {
  transform: rotate(180deg);
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-report-comment-wrapper {
  display: flex;
}
.oc-report-comment-wrapper .comment-avatar {
  /* flex: 0 0 44px; */
  width: 44px;
  height: 44px;
  margin-right: 16px;
  border-radius: 50%;
  overflow: hidden;
}
.oc-report-comment-wrapper .comment-avatar img {
  width: 100%;
  height: 100%;
}
.oc-report-comment-wrapper .comment-info {
  /* flex: 1 1 auto; */
  width: calc(100% - 44px - 16px);
  font-size: 14px;
  line-height: 22px;
}
.oc-report-comment-wrapper .comment-info .comment-user {
  font-weight: 600;
}
.oc-report-comment-wrapper .comment-info .comment-user .reply-text {
  color: rgba(255, 255, 255, 0.5);
}
.oc-report-comment-wrapper .comment-info .comment-text {
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
}
.oc-report-comment-wrapper .comment-info .time-row {
  display: flex;
  align-items: center;
}
.oc-report-comment-wrapper .comment-info .time-row .time {
  color: rgba(255, 255, 255, 0.5);
  /* 基础字体/Regular/12px */
  font-size: 12px;
  font-weight: 400;
  margin-right: 8px;
}
.oc-report-comment-wrapper .comment-info .time-row .comment-tag {
  margin-right: 8px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
#emoji-tooltip-wrapper {
  background: #1d2129;
  border-radius: 2px;
  filter: alpha(opacity=70);
  padding: 8px 12px;
  position: fixed;
  transform: translateX(calc(-50% + 2px)) translateY(-5px);
  z-index: 9999999;
}
#emoji-tooltip-wrapper span {
  border-color: #1d2129 transparent transparent;
  border-style: solid;
  border-width: 5px 5px 0;
  filter: alpha(opacity=70);
  height: 0;
  left: 50px;
  position: absolute;
  top: -10px;
  transform: translateX(-50%);
  width: 0;
}
#emoji-tooltip-wrapper p {
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
}
#emoji-mobile {
  border-radius: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: none;
}
#emoji-mobile .emoji-item,
#emoji-mobile .recent-item {
  height: 8vw;
  width: 8vw;
}
#emoji-mobile .dynamic-item {
  cursor: pointer;
  height: 11vw;
  margin: 3px;
  overflow: hidden;
  position: relative;
  width: 11vw;
}
#emoji-mobile .empty-item {
  width: 8vw;
}
.emoji-lable {
  height: 28px;
  opacity: 0.7;
  width: 28px;
}
.emoji-title {
  color: #fff;
  display: block;
  font-size: 12px;
  line-height: 2;
}
.emoji-lable:hover {
  color: blue;
  cursor: pointer;
  opacity: 1;
}
.emoji-panel {
  -webkit-touch-callout: none;
  border: 0.5px;
  border-radius: 15px;
  bottom: 100%;
  box-shadow: 1px 1px 4px 2px rgba(0, 0, 0, 0.2);
  display: none;
  overflow: hidden;
  position: absolute;
  transform: translateX(-50%);
  -moz-user-select: none;
       user-select: none;
}
.emoji-panel .empty-item {
  height: 0;
  margin: 3px;
  width: 25px;
}
.emoji-panel.current {
  display: block;
}
.emoji-panel .emoji-page-bar {
  bottom: 0;
  display: flex;
  height: 20px;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
}
.emoji-panel .emoji-page-dot {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  display: block;
  height: 6px;
  margin: 3px;
  position: relative;
  transform: translate(-50%);
  width: 6px;
}
.emoji-panel .emoji-page-dot.current {
  background: blue;
}
.emoji-panel .emoji-page-dot:hover {
  cursor: pointer;
}
.emoji-panel-total {
  -webkit-overflow-scrolling: touch;
  display: block;
  padding: 10px;
  position: relative;
}
.emoji-panel-total::-webkit-scrollbar {
  width: 2px;
}
.emoji-panel-total::-webkit-scrollbar-thumb {
  background: hsla(0, 0%, 100%, 0.5);
  border-radius: 10px;
  width: 2px;
}
.emoji-panel-total::-webkit-scrollbar-track {
  background: hsla(0, 0%, 100%, 0.2);
  border-radius: 0;
}
.emoji-panel-total .emoji-panel-dynamic .emoji-panel-items {
  background-color: inherit;
}
.emoji-panel-total .emoji-panel-dynamic .emoji-line {
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.emoji-panel-items {
  -webkit-overflow-scrolling: touch;
  background: inherit;
  box-sizing: border-box;
  display: flex;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 9999;
}
.emoji-panel-items::-webkit-scrollbar {
  width: 2px;
}
.emoji-panel-items::-webkit-scrollbar-thumb {
  background: hsla(0, 0%, 100%, 0.5);
  border-radius: 10px;
  width: 2px;
}
.emoji-panel-items::-webkit-scrollbar-track {
  background: hsla(0, 0%, 100%, 0.2);
  border-radius: 0;
}
.emoji-panel-items .emoji-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.emoji-panel-items .emoji-page {
  display: none;
  margin: 10px 0 5px;
  width: 100%;
}
.emoji-panel-items .emoji-page.current {
  display: block;
}
.emoji-panel-items .emoji-page .emoji-item {
  cursor: pointer;
  margin: 3px;
  width: 25px;
}
.emoji-panel-recent {
  border-top: 1px solid #eee;
  box-sizing: border-box;
  display: block;
  height: 70px;
  padding: 5px 10px;
}
.emoji-panel-recent-title {
  display: block;
  font-size: 12px;
  line-height: 2;
}
.emoji-panel-recent-items .emoji-line {
  display: flex;
}
.emoji-panel-recent-items .emoji-line .recent-item {
  cursor: pointer;
  height: 25px;
  margin: 3px;
  width: 25px;
}
.emoji-panel-recent-items .emoji-line .recent-item:hover {
  transform: scale(1.2);
}
.emoji-item {
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  height: 25px;
  width: 25px;
}
.emoji-line {
  display: flex;
  justify-content: space-between;
}
.emoji-line .recent-item {
  cursor: pointer;
  height: 25px;
  margin: 3px;
}
.emoji-line .dynamic-item {
  cursor: pointer;
  height: 36px;
  margin: 3px;
  overflow: hidden;
  position: relative;
  width: 36px;
}
.emoji-line .dynamic-item span {
  width: 100%;
}
.emoji-line .dynamic-item .gif-wrapper {
  height: 100%;
}
.emoji-line .dynamic-item img {
  height: auto!important;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 110% !important;
}
[class*=emoji-item__] {
  background-repeat: no-repeat;
  background-size: 200px;
}
#emoji-mobile [class*=emoji-item__] {
  background-size: 64vw;
}
.emoji-panel .emoji-item__0 {
  background-image: url(https://p1-live.byteimg.com/tos-cn-i-gjr78lqtd0/sprites_a_60.png~tplv-gjr78lqtd0-10.image);
}
.emoji-panel .emoji-item__1 {
  background-image: url(https://p1-live.byteimg.com/tos-cn-i-gjr78lqtd0/sprites_b_60.png~tplv-gjr78lqtd0-10.image);
}
.emoji-panel--sg .emoji-item__0 {
  background-image: url(https://p19-live-sg.ibyteimg.com/tos-alisg-i-j963mrpdmh/sprites_a_60.png~tplv-j963mrpdmh-image.image);
}
.emoji-panel--sg .emoji-item__0.use-webp {
  background-image: url(https://p19-live-sg.ibyteimg.com/tos-alisg-i-j963mrpdmh/sprites_a_60.png~tplv-j963mrpdmh-image.webp);
}
.emoji-panel--sg .emoji-item__1 {
  background-image: url(https://p19-live-sg.ibyteimg.com/tos-alisg-i-j963mrpdmh/sprites_b_60.png~tplv-j963mrpdmh-image.image);
}
.emoji-panel--sg .emoji-item__1.use-webp {
  background-image: url(https://p19-live-sg.ibyteimg.com/tos-alisg-i-j963mrpdmh/sprites_b_60.png~tplv-j963mrpdmh-image.webp);
}
.emoji-item__col-0 {
  background-position-x: 0 !important;
}
.emoji-item__row-0 {
  background-position-y: 0 !important;
}
.emoji-item__col-1 {
  background-position-x: -25px !important;
}
.emoji-item__row-1 {
  background-position-y: -25px !important;
}
.emoji-item__col-2 {
  background-position-x: -50px !important;
}
.emoji-item__row-2 {
  background-position-y: -50px !important;
}
.emoji-item__col-3 {
  background-position-x: -75px !important;
}
.emoji-item__row-3 {
  background-position-y: -75px !important;
}
.emoji-item__col-4 {
  background-position-x: -100px !important;
}
.emoji-item__row-4 {
  background-position-y: -100px !important;
}
.emoji-item__col-5 {
  background-position-x: -125px !important;
}
.emoji-item__row-5 {
  background-position-y: -125px !important;
}
.emoji-item__col-6 {
  background-position-x: -150px !important;
}
.emoji-item__row-6 {
  background-position-y: -150px !important;
}
.emoji-item__col-7 {
  background-position-x: -175px !important;
}
.emoji-item__row-7 {
  background-position-y: -175px !important;
}
#emoji-mobile .emoji-item__col-0 {
  background-position-x: 0 !important;
}
#emoji-mobile .emoji-item__row-0 {
  background-position-y: 0 !important;
}
#emoji-mobile .emoji-item__col-1 {
  background-position-x: -8vw !important;
}
#emoji-mobile .emoji-item__row-1 {
  background-position-y: -8vw !important;
}
#emoji-mobile .emoji-item__col-2 {
  background-position-x: -16vw !important;
}
#emoji-mobile .emoji-item__row-2 {
  background-position-y: -16vw !important;
}
#emoji-mobile .emoji-item__col-3 {
  background-position-x: -24vw !important;
}
#emoji-mobile .emoji-item__row-3 {
  background-position-y: -24vw !important;
}
#emoji-mobile .emoji-item__col-4 {
  background-position-x: -32vw !important;
}
#emoji-mobile .emoji-item__row-4 {
  background-position-y: -32vw !important;
}
#emoji-mobile .emoji-item__col-5 {
  background-position-x: -40vw !important;
}
#emoji-mobile .emoji-item__row-5 {
  background-position-y: -40vw !important;
}
#emoji-mobile .emoji-item__col-6 {
  background-position-x: -48vw !important;
}
#emoji-mobile .emoji-item__row-6 {
  background-position-y: -48vw !important;
}
#emoji-mobile .emoji-item__col-7 {
  background-position-x: -56vw !important;
}
#emoji-mobile .emoji-item__row-7 {
  background-position-y: -56vw !important;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-report-comment-textarea-wrapper {
  width: 100%;
}
.oc-report-comment-textarea-wrapper .emoji-textarea-wrapper {
  position: relative;
  margin-bottom: 8px;
}
.oc-report-comment-textarea-wrapper .emoji-textarea-wrapper .ovui-input-group {
  width: 100%;
  max-width: 100% !important;
}
.oc-report-comment-textarea-wrapper .emoji-textarea-wrapper .ovui-textarea__wrapper {
  position: relative;
}
.oc-report-comment-textarea-wrapper .emoji-textarea-wrapper .ovui-textarea__prefix {
  position: absolute;
  bottom: 0px;
  left: 4px;
}
.oc-report-comment-textarea-wrapper .emoji-textarea-wrapper .ovui-textarea__suffix {
  position: absolute;
  bottom: 0;
  right: 4px;
}
.oc-report-comment-textarea-wrapper .emoji-textarea-wrapper .ovui-textarea {
  height: calc(100% - 20px);
}
.oc-report-comment-textarea-wrapper .emoji-textarea-wrapper .emoji-container {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 5;
}
.oc-report-comment-textarea-wrapper .emoji-textarea-wrapper .emoji-container .emoji-btn {
  cursor: pointer;
}
.oc-report-comment-textarea-wrapper .emoji-textarea-wrapper .emoji-container .emoji-btn.disabled {
  cursor: not-allowed;
  pointer-events: none;
}
.oc-report-comment-textarea-wrapper .emoji-textarea-wrapper .emoji-container .emoji-panel {
  background-color: #4c4066;
  z-index: 10;
  bottom: unset;
  top: 0;
  left: 200px;
}
.oc-report-comment-textarea-wrapper .emoji-textarea-wrapper .emoji-container .emoji-panel .emoji-panel-total {
  height: 300px !important;
}
.oc-report-comment-textarea-wrapper .emoji-textarea-wrapper .emoji-container .emoji-panel .emoji-title {
  color: unset;
}
.oc-report-comment-textarea-wrapper .emoji-textarea-wrapper .emoji-container .emoji-panel .emoji-panel-dynamic .emoji-panel-items {
  height: unset;
}
.oc-report-comment-textarea-wrapper .insert-wrapper {
  width: 100%;
}
.oc-report-comment-textarea-wrapper .insert-wrapper .insert-row {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
}
.oc-report-comment-textarea-wrapper .insert-wrapper .insert-row .insert-prefix {
  max-width: 90px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
}
.oc-report-comment-textarea-wrapper .insert-wrapper .insert-row .insert-data {
  flex: 1;
  display: flex;
  margin-right: 12px;
  height: 20px;
}
.oc-report-comment-textarea-wrapper .insert-wrapper .insert-row .insert-data .insert-data-item-typography {
  margin-left: 8px;
  min-width: 20px;
}
.oc-report-comment-textarea-wrapper .insert-wrapper .insert-row .insert-data .insert-data-item-typography:nth-child(1) {
  margin-left: 0;
}
.oc-report-comment-textarea-wrapper .insert-wrapper .insert-row .insert-suffix {
  max-width: 80px;
  align-items: flex-start;
  text-align: right;
}
.oc-report-comment-textarea-wrapper .maxlength {
  color: rgba(255, 255, 255, 0.5);
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-report-creative-analysis-header {
  margin-bottom: 16px;
}
.oc-report-creative-analysis-table {
  display: grid;
  gap: 8px;
  background: var(--report-creative-analysis-table-bg);
  --report-creative-analysis-table-bg: white;
  --report-creative-analysis-table-header-bg: #1a112e;
  --report-creative-analysis-table-sub-title-bg: #261d38;
}
.oc-report-creative-analysis-table-row-header {
  background: var(--report-creative-analysis-table-header-bg);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.oc-report-creative-analysis-table-row-header-arrow::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  border-style: solid;
  border-width: 15px;
  border-color: transparent transparent transparent var(--report-creative-analysis-table-bg);
  height: 100%;
}
.oc-report-creative-analysis-table-row-header-arrow::after {
  content: " ";
  position: absolute;
  top: 0;
  right: -15px;
  border-style: solid;
  border-width: 15px;
  border-color: var(--report-creative-analysis-table-bg) rgba(255, 255, 255, 0) var(--report-creative-analysis-table-bg) var(--report-creative-analysis-table-header-bg);
  height: 100%;
}
.oc-report-creative-analysis-table-row-header-arrow-first::before {
  display: none;
}
.oc-report-creative-analysis-table-row-header-single {
  grid-row-start: 1;
  grid-row-end: var(--report-creative-analysis-table-header-row-end);
}
.oc-report-creative-analysis-table-row-header-multi {
  grid-row-start: 1;
  grid-row-end: var(--report-creative-analysis-table-header-row-end);
}
.oc-report-creative-analysis-table-row-header-multi-grid {
  width: 100%;
  gap: 8px;
  display: grid;
  grid-template-rows: 30px 30px;
}
.oc-report-creative-analysis-table-row-header-multi-parent {
  grid-column-start: 1;
  grid-column-end: -1;
}
.oc-report-creative-analysis-table-row-header-multi-child {
  grid-row-start: 2;
  grid-column-start: span 1;
}
.oc-report-creative-analysis-table-row-item-label {
  background: var(--report-creative-analysis-table-header-bg);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  text-align: center;
}
.oc-report-creative-analysis-table-row-item-label-my {
  grid-row-start: var(--report-creative-analysis-table-header-row-end);
}
.oc-report-creative-analysis-table-row-item-label-bench {
  grid-row-start: calc(var(--report-creative-analysis-table-header-row-end) + 1);
}
.oc-report-creative-analysis-table-row-item {
  display: flex;
  min-width: 100px;
  justify-content: space-between;
}
.oc-report-creative-analysis-table-row-item-multi-grid {
  display: grid;
  gap: 8px;
  height: 100%;
  width: 100%;
}
.oc-report-creative-analysis-table-row-item-multi-child {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.oc-report-creative-analysis-table-row-item-single {
  gap: 8px;
}
.oc-report-creative-analysis-table-row-item-single-child {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.oc-report-creative-analysis-table-row-item-subtitle {
  background-color: var(--report-creative-analysis-table-sub-title-bg);
  width: 100%;
  text-align: center;
  padding: 8px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.oc-report-creative-analysis-table-row-item-content {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  border-width: 1px;
  border-style: solid;
  border-color: #ffffff;
  padding: 8px;
  flex-grow: 1;
  height: 100%;
  min-height: 100px;
  text-align: center;
}
.oc-report-creative-analysis-table-show-conclusion .oc-report-creative-analysis-table-row-item-content-my-selected {
  border-color: #651dff;
}
.oc-report-creative-analysis-table-show-conclusion .oc-report-creative-analysis-table-row-item-content-bench-selected {
  border-color: #ff734d;
}
.oc-report-creative-analysis-table-row-item-my {
  grid-row-start: var(--report-creative-analysis-table-header-row-end);
}
.oc-report-creative-analysis-table-row-item-bench {
  grid-row-start: calc(var(--report-creative-analysis-table-header-row-end) + 1);
}
.oc-report-creative-analysis-conclusion {
  width: 100%;
  display: flex;
  align-items: center;
  background: #302842;
  padding: 16px;
  border-radius: 11px;
  margin-bottom: 16px;
}
.oc-report-creative-analysis-conclusion-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.oc-report-creative-analysis-conclusion-item {
  padding-left: 12px;
}
.oc-report-creative-analysis-conclusion-item-tag {
  text-decoration-color: #fab426;
  text-decoration-thickness: 4px;
  cursor: pointer;
}
.oc-report-creative-analysis-conclusion-item-separator-my {
  color: #651dff;
}
.oc-report-creative-analysis-conclusion-item-separator-bench {
  color: #ff734d;
}
.oc-report-creative-analysis-conclusion-operations {
  margin-right: 24px;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.report-metrics-calculate-tab {
  width: 100%;
  display: flex;
}
.report-metrics-calculate-tab .summary-card {
  flex: 1;
  border-top: 0px;
  border-right: 0px;
}
.report-metrics-calculate-tab .summary-card:hover {
  border-top: 4px solid #651dff !important;
  padding-top: 12px;
  background: linear-gradient(180deg, #eff5ff 0%, rgba(239, 245, 255, 0) 100%) !important;
}
.report-metrics-calculate-tab .summary-card:hover .report-metrics-calculate-tab-card-icon {
  top: calc(50% - 12px);
}
.report-metrics-calculate-tab-card {
  position: relative;
  height: 100px;
  display: flex;
  flex-direction: column;
  padding: 16px;
  cursor: pointer;
  border: 1px solid var(--borderColor);
  background: var(--bgColor);
}
.report-metrics-calculate-tab-card-header {
  height: 22px;
  cursor: pointer;
  display: flex;
}
.report-metrics-calculate-tab-card-value {
  flex: 1;
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  color: #ffffff;
  font-family: OPPOSans;
  font-weight: 400;
  font-style: normal;
}
.report-metrics-calculate-tab-card-value .int-value {
  font-size: 16px;
}
.report-metrics-calculate-tab-card-value .decimal-value {
  font-size: 12px;
}
.report-metrics-calculate-tab-card-ratio {
  height: 18px;
  display: flex;
  align-items: center;
}
.report-metrics-calculate-tab-card-icon {
  position: absolute;
  width: 20px;
  height: 20px;
  left: -10px;
  top: calc(50% - 10px);
  border-radius: 12.5px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.08);
  color: var(--iconColor);
}
.report-metrics-calculate-tab-card-selected {
  border-top: 4px solid #651dff !important;
  border-bottom: 0px;
  border-left: 0px;
  padding-top: 12px;
  background: linear-gradient(180deg, #E5F2FF 0%, rgba(232, 240, 255, 0) 100%);
}
.report-metrics-calculate-tab-card-selected .report-metrics-calculate-tab-card-icon {
  top: calc(50% - 12px);
}
/* 后一个兄弟节点 */
.report-metrics-calculate-tab-card-selected + .report-metrics-calculate-tab-card {
  border-bottom-left-radius: 16px !important;
}
/* 前一个兄弟节点 */
.report-metrics-calculate-tab-card:has( + .report-metrics-calculate-tab-card-selected) {
  border-bottom-right-radius: 16px !important;
  border-right: 1px solid var(--borderColor) !important;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-report-script-analysis {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.oc-report-script-analysis-header {
  width: 100%;
  height: 24px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.oc-report-script-analysis-collapse {
  cursor: pointer;
  display: flex;
  align-items: center;
}
.oc-report-script-analysis-body {
  width: 100%;
  padding: 16px;
  border-radius: 24px;
  background: #302842;
}
.oc-report-script-analysis-script {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.oc-report-script-analysis-script-header {
  width: 100%;
  height: 24px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.oc-report-script-analysis-script-body {
  width: 100%;
}
.oc-report-script-analysis-script-body > span {
  display: inline;
}
.oc-report-script-analysis-formula {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.oc-report-script-analysis-formula-header {
  width: 100%;
  height: 22px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.oc-report-script-analysis-formula-body {
  width: 100%;
  display: flex;
  align-items: center;
}
.oc-report-script-analysis-formula-formula-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.oc-report-script-analysis-formula-formula-item-title {
  height: 20px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}
.oc-report-script-analysis-formula-formula-item-title-label {
  width: 10px;
  height: 10px;
  margin-right: 5px;
}
.oc-report-script-analysis-formula-formula-item-line {
  width: calc(100% - 10px);
  height: 1px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to right, transparent 6px, #d7e0fb 6px, #d7e0fb calc(100% - 6px), transparent calc(100% - 6px));
}
.oc-report-script-analysis-formula-formula-item-content {
  display: flex;
  align-items: center;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.report-select-date-picker-wrapper {
  display: flex;
}
.report-select-date-picker-wrapper .oc-select .ovui-input__wrapper {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.report-select-date-picker-wrapper .oc-select .ovui-input__wrapper--focused {
  z-index: 1;
}
.report-select-date-picker-wrapper .ovui-date-picker .ovui-input__wrapper {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.report-select-date-picker-select-line {
  width: 1px;
  height: 32px;
  background: #261d38;
}
.report-select-date-picker-select-line:after {
  content: "";
  width: 1px;
  height: 16px;
  position: absolute;
  margin-top: 7px;
  background-color: #dfe0e2;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.report-select-range-picker {
  display: flex;
}
.report-select-range-picker .oc-select .ovui-input__wrapper {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.report-select-range-picker .oc-select .ovui-input__wrapper--focused {
  z-index: 1;
}
.report-select-range-picker .oc-range-picker .ovui-custom-input {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.report-select-range-picker-select-line {
  width: 1px;
  height: 32px;
  background: #261d38;
}
.report-select-range-picker-select-line:after {
  content: "";
  width: 1px;
  height: 16px;
  position: absolute;
  margin-top: 7px;
  background-color: #dfe0e2;
}
/**
 * @description 
 *   渐变边框
 *   已经全局导入了，不需要另外导入，参考 apps/platform/vite.config.ts#301
 * @param {string} @color - 渐变颜色
 * @param {number} @width - 边框宽度
 * @param {number} @radius - 圆角半径
 * @param {number} @zindex - 元素层级
 * @param {string} @fallback - 降级颜色
 * 
 * @example 用法 1
 *   &.checked {
 *     .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *   }
 * @example 用法 2
 *   .script-card {
 *     border: 2px solid transparent;
 *     @apply bg-bg-color-select; // 可以实现 rgba 背景色
 *     &--selected {
 *       --border-top-right-radius: 10px; // 如果需要单独修改某个角
 *       --border-bottom-right-radius: 10px;
 *       .gradient-border(var(--brand-color-gradient), 2px, var(--radius-s));
 *     }
 *   }
*/
/**
 * @description 修复小数 dpr 导致的边框错位问题
 *   🌰 修复 1.5dpr 屏幕上，border-width 会被自动计算成 0.6667px，但是 top/left 不会。所以导致渐变边框会错位
 * @param {number} @border-width - 边框宽度，不能是 css 变量
 */
.oc-report-template-card {
  z-index: 1;
  position: relative;
  border-radius: 24px;
  width: 177px;
  cursor: pointer;
  background: linear-gradient(85deg, #dee8ff 7.46%, #ecf2ff 90.49%);
}
.oc-report-template-card-box {
  padding: 12px;
  border-radius: 24px;
  background: transparent;
  position: relative;
  min-height: 92px;
}
.oc-report-template-card-box-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.oc-report-template-card-box-desc {
  margin-top: 4px;
}
.oc-report-template-card-box-title-len2 {
  width: 112px !important;
}
.oc-report-template-card-box-title-len1 {
  width: 96px !important;
}
.oc-report-template-card-box:hover {
  z-index: 2;
  border: 1px solid #651dff;
  padding: 11px;
}
.oc-report-template-card-right-top {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  padding: 3px 5px;
  border-radius: 0px 8px;
  background: #f2f7ff;
}
.oc-report-template-card-right-bottom {
  position: absolute;
  right: 0;
  bottom: -6px;
  z-index: 1;
}