/* 共用的一些变量 */
[background-theme='default'],
[background-theme='dark'] {
  /* 品牌颜色 */
  --brand-color: #731eff;

  /* 默认颜色 */
  --primary-color5: #9447ff;
  --primary-color4: #b070ff;
  --primary-color3: #ca99ff;
  --primary-color2: #e1c2ff;
  --primary-color1: #f6ebff;

  --brand-color-hover: var(--primary-color5);
  --brand-color-active: #560fd9;
  --brand-color-disable: var(--primary-color4);

  /* 常用语背景的3种颜色（new） */
  --primary-background1: #f7f7f7;
  --primary-background2: #f0f0f0;
  --primary-background3: #e6e6e6;
  --primary-background4: #e0e0e0;

  /* 分割线 */
  --split-line-color: #dcdcdc;

  /* 按钮描边 */
  --primary-button-border: #eaeaea;

  /* 线框组件描边 */
  --line-type-component-border: #d1d0d2;

  /* 默认可交互组件背景色 */
  --interactive-component-background-color: #f0f0f0;

  /* 禁用组件描边色 */
  --disabled-component-border: #e9e9e9;

  /* 禁用组件背景色 */
  --disabled-component-background: #f7f7f7;

  /* 提示用色 */
  --error-color: #ff445e;
  --warn-color: #ff9947;
  --success-color: #1fd486;

  /* 链接颜色 */
  --link-color: #9155ff;

  --primary-light-color: #fbeeff;

  --primary-disable: #aa87f0;
  --primary-hover: #9155ff;
  --primary-highlight: #5a23d7;

  --error-disable: #ffabac;
  --error-hover: #ff8288;
  --error-highlight: #cc3d4e;

  --warn-disable: #ffd5ab;
  --warn-hover: #ffbb81;
  --warn-highlight: #d87c41;

  --success-disable: #6eedae;
  --success-hover: #45e098;
  --success-highlight: #0fad6f;

  --minor-disable: #f9f9f9;
  --minor-hover: #fbeeff;
  --minor-highlight: #731eff;

  --assist-color: #f9f9f9;
  --assist-highlight: #ededed;
  --assist-disable: #f9f9f9;
  --assist-hover: #f4f3f5;

  --h1-color: rgba(0, 0, 0, 0.85);
  --h2-color: rgba(0, 0, 0, 0.65);
  --h3-color: rgba(0, 0, 0, 0.45);
  --h4-color: rgba(0, 0, 0, 0.25);
  --shadow-color: rgba(0, 0, 0, 0.1);
  --theme-background-color: #ffffff;
  --theme-background-light: #f5f5f5;
  --half-deep: rgba(0, 0, 0, 0.5);
  --btn-color: #ffffff;
  --border-color: rgba(0, 0, 0, 0.11);
  --text-tip-color: #60656c;

  --input-placeholder-color: #b2b2b2;

  --tooltip-yellow-bg: #fff4e7;
  --footer-bg-color: #000000;
}

/* 默认背景色主题 */
[background-theme='default'] {
  /* 下面变量 用于default/dark 模式切换 变量有重复的话需要替换成下面的 */
  /* --------------------start-------------------- */

  /* 背景 - 比默认色浅 */
  --primary-background-light: #ffffff;
  --primary-background-light-pure: var(--primary-background-light);
  /* 默认背景色 */
  --primary-background: #f7f7f7;
  /* 默认背景 hover */
  --primary-background-hover: #f0f0f0;
  /* 默认背景 active */
  --primary-background-active: #e6e6e6;
  /* 描边 - 比默认色浅 */
  --stroke-default-light: #eaeaea;
  /* 描边 - 禁用色 */
  --stroke-disabled: #e9e9e9;
  /* 描边 - 分割线 */
  --stroke-divider: #dcdcdc;
  /* 描边-默认 */
  --stroke-default: #d1d0d2;
  /* 描边 - 默认 - 纯色 */
  --stroke-default-pure: var(--stroke-default);
  /* 提示文字色 */
  --tooltip-text-color: #b2b2b2;
  /*禁用文字色 */
  --disabled-text-color: #c0c0c0;
  /* 一、二、三级标题颜色 */
  --one-level-text-color: #191919; /* grey 12 */
  --two-level-text-color: #4c4c4c; /* grey 11 */
  --three-level-text-color: #7f7f7f; /* grey 10 */

  /* 一、二、三级标题颜色 */
  --one-level-text-color-pure: var(--one-level-text-color);
  --two-level-text-color-pure: var(--two-level-text-color);
  --three-level-text-color-pure: var(--three-level-text-color);

  /* 反色 - rgb */
  --reverse-rgb: 0, 0, 0;
  /* 反色 - 背景 */
  --reverse-background-color: rgba(var(--reverse-rgb), 0.75);
  /* 反色 - 文字 */
  --reverse-text-color: #ffffff;
  /* 反色 - 描述 */
  --reverse-description-color: var(--tooltip-text-color);

  /* 菜单下方遮罩 */
  --menu-mask-color: rgb(238, 238, 238, 0.4);

  /* 图片滤镜 */
  /* --image-filter: ; */
  /* 渐变遮罩 - 开始 */
  --gradient-mask-start-color: rgba(255, 255, 255, 0);
  /* 渐变遮罩 - 结束 */
  --gradient-mask-end-color: var(--primary-background-light);
  /* 渐变遮罩 - 顶部 */
  --gradient-top-mask-end-color: rgba(255, 255, 255, 0.3);

  /* 次要 颜色 */
  --minor-color: #f6f5f7;

  /* 骨架屏图片背景色 */
  --skeleton-image-background-color: var(--minor-color);
  /* 骨架屏图片渐变色 */
  --skeleton-image-gradient-start-color: transparent;
  /* 骨架屏图片渐变色 */
  --skeleton-image-gradient-end-color: #fcfcfc;
  /* 骨架屏 - 文字渐变 */
  --skeleton-text-gradient-end-color: #e3e3e3;

  /* 阴影 */
  --shadow-color: rgba(0, 0, 0, 0.08);

  --footer-bg-color: #191919;
  --brand-teal-color: var(--brand-color);

  /* ai 搜索 特殊背景 */
  --primary-background-ai: var(--primary-background-light-pure);
  --stroke-default-ai: var(--tooltip-text-color);

  /* --------------------end-------------------- */
}

/* 默认暗色主题 */
[background-theme='dark'] {
  /* 下面变量 用于default/dark 模式切换 变量有重复的话需要替换成下面的 */
  /* --------------------start-------------------- */

  /* 背景 - 比默认色浅 */
  --primary-background-light: rgba(0, 0, 0, 0.88);
  --primary-background-light-pure: rgb(6, 6, 6);

  /* 默认背景色 */
  --primary-background: rgba(255, 255, 255, 0.09);
  /* 默认背景 hover */
  --primary-background-hover: rgba(255, 255, 255, 0.12);
  /* 默认背景 active */
  --primary-background-active: rgba(255, 255, 255, 0.21);
  /* 描边 - 比默认色浅 */
  --stroke-default-light: rgba(255, 255, 255, 0.16);
  /* 描边 - 禁用色 */
  --stroke-disabled: rgba(255, 255, 255, 0.18);
  /* 描边 - 分割线 */
  --stroke-divider: rgba(255, 255, 255, 0.25);
  /* 描边-默认 */
  --stroke-default: rgba(255, 255, 255, 0.29);
  /* 描边 - 默认 - 纯色 */
  --stroke-default-pure: #606060;
  /* 提示文字色 */
  --tooltip-text-color: rgba(255, 255, 255, 0.4);
  /*禁用文字色 */
  --disabled-text-color: rgba(255, 255, 255, 0.35);
  /* 一、二、三级标题颜色 */
  --one-level-text-color: rgba(255, 255, 255, 0.92);
  --two-level-text-color: rgba(255, 255, 255, 0.7);
  --three-level-text-color: rgba(255, 255, 255, 0.56);

  /* 一、二、三级标题颜色 */
  --one-level-text-color-pure: #ececec;
  --two-level-text-color-pure: #b8b8b8;
  --three-level-text-color-pure: #969696;

  /* 反色 - rgb */
  --reverse-rgb: 255, 255, 255;
  /* 反色 - 背景 */
  --reverse-background-color: rgba(var(--reverse-rgb), 1);
  /* 反色 - 文字 */
  --reverse-text-color: #191919;
  /* 反色 - 描述 */
  --reverse-description-color: #7f7f7f;

  /* 菜单下方遮罩 */
  --menu-mask-color: rgb(0, 0, 0, 0.4);

  /* 图片滤镜 */
  --image-filter: brightness(0.9) contrast(1) grayscale(0.05);
  /* 渐变遮罩 - 开始 */
  --gradient-mask-start-color: rgba(0, 0, 0, 0);
  /* 渐变遮罩 - 结束 */
  --gradient-mask-end-color: var(--primary-background-light-pure);
  /* 渐变遮罩 - 顶部 */
  --gradient-top-mask-end-color: rgba(0, 0, 0, 0.3);

  /* 次要 颜色 */
  --minor-color: #272727;

  /* 骨架屏图片背景色 */
  --skeleton-image-background-color: var(--minor-color);
  /* 骨架屏图片渐变色 */
  --skeleton-image-gradient-start-color: transparent;
  /* 骨架屏图片渐变色 */
  --skeleton-image-gradient-end-color: #484848;
  /* 骨架屏 - 文字渐变 */
  --skeleton-text-gradient-end-color: var(--skeleton-image-gradient-end-color);

  /* 阴影 */
  --shadow-color: rgba(255, 255, 255, 0.08);

  --footer-bg-color: #000000;
  --primary-background-ai: #1f1f1f;
  --stroke-default-ai: var(--primary-background-active);

  --brand-teal-color: #07a28c;
  /* --------------------end-------------------- */
}

/* 默认颜色主题 */
[color-theme='default'] {
  /* 下面变量 用于主题色切换 变量有重复的话需要替换成下面的 */
  /* --------------------start-------------------- */

  /* 主题色 */
  --primary-color: #8f47ff;
  /* 主题色 - hover */
  --primary-color-hover: #823aec;
  --primary-color-hover-pure: var(--primary-color-hover);
  /* 主题色 - active */
  --primary-color-active: #7832dc;
  /* 主题色 - disable */
  --primary-color-disable: #aa87f0;
  /* 主题色 rgb */
  --primary-color-rgb: 115, 30, 255;
  /* 次要背景色 */
  --secondary-background: rgba(var(--primary-color-rgb), 0.03);
  --secondary-background-pure: var(--secondary-background);
  /* 次要背景色 - hover */
  --secondary-background-hover: rgba(var(--primary-color-rgb), 0.06);
  /* 次要背景色 - active */
  --secondary-background-active: rgba(var(--primary-color-rgb), 0.12);
  /* 辅助背景色（默认情况下是与次要背景色相同） */
  --auxiliary-background: var(--secondary-background);
  /* 描边 - active */
  --stroke-active: var(--primary-color);
  --stroke-active-pure: var(--stroke-active);
  /* 文字icon颜色 - 默认 */
  --text-icon-color: var(--primary-color);
  /* 强调色 */
  --accent-color: var(--primary-color);

  --primary-btn-bg: var(--primary-color);
  --primary-btn-hover: var(--primary-color-hover);
  --primary-btn-active: var(--primary-color-active);
  --primary-btn-disable: var(--primary-color-disable);

  --loading-color: var(--primary-color);
  --brand-teal-color: var(--brand-color);
  /* --------------------end-------------------- */
}

html {
  overflow: hidden;
}
body {
  overflow: overlay;
  overflow-x: hidden;
}
html,
body,
#app {
  width: 100%;
  height: 100%;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
*::after,
*::before {
  box-sizing: border-box;
}
[data-title]:hover {
  position: relative;
}
[data-title]::after {
  content: attr(data-title);
  line-height: 22px;
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  position: absolute;
  padding: 5px 16px;
  left: 50%;
  top: -18px;
  transform: translate(-50%, -100%);
  border-radius: 6px;
  white-space: nowrap;
  z-index: 99999;
  visibility: hidden;
  opacity: 0;
}
[data-title]::before {
  content: ' ';
  width: 0;
  height: 0;
  display: inline-block;
  left: 50%;
  top: -18px;
  position: absolute;
  border: solid 6px transparent;
  border-top: solid 6px rgba(0, 0, 0, 0.75);
  transform: translateX(-50%);
  z-index: 99999;
  visibility: hidden;
  opacity: 0;
}
[data-title]:hover::after,
[data-title]:hover::before {
  opacity: 1;
  transition: all 0.1s ease 0.5s;
  visibility: visible;
}
[contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}
body {
  background-color: var(--theme-background-color);
}
body,
button {
  font-family: 'Gilroy', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol' !important;
}
input {
  font-family: unset !important;
}
a {
  text-decoration: none;
  color: #333;
}
a:hover,
a:visited,
a:link,
a:active {
  color: #333;
}
ul,
ol {
  list-style: none;
}
.beautify-scrollbar2 {
  margin-right: -6px;
  padding-right: 2px;
  position: relative;
  overflow: auto;
}
.beautify-scrollbar2::-webkit-scrollbar {
  width: 6px;
  background-color: #fff;
  position: absolute;
  right: 6px;
  opacity: 0;
  /* transition: all 0.3s ease-in-out; */
}

.beautify-scrollbar2::-webkit-scrollbar-thumb {
  border-radius: 4px;
  width: 6px;
  background-color: rgba(0, 0, 0, 0);
}
.beautify-scrollbar2:hover::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
}
.beautify-scrollbar2::-webkit-scrollbar-track {
  width: 6px;
  background-color: transparent;
}

.beautify-scrollbar::-webkit-scrollbar {
  width: 6px;
  background-color: transparent;
  opacity: 0;
}
.beautify-scrollbar::-webkit-scrollbar:active {
  width: 6px;
  background-color: transparent;
  /* opacity: 1; */
}
.beautify-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 4px;
  width: 6px;
  background-color: rgba(0, 0, 0, 0.2);
}
.beautify-scrollbar::-webkit-scrollbar-track {
  width: 16px;
}
@keyframes slide-to-right {
  from {
    background-position: 100% 50%;
  }
  to {
    background-position: 0% 50%;
  }
}
.skeleton-loading {
  position: relative;
  overflow: hidden;
}
.skeleton-loading::after {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  z-index: 999;
  background-image: linear-gradient(90deg, #f2f2f2 7%, #ededed);
  animation: slide-to-right 2s infinite;
  background-size: 400% 400%;
}

.hover-border:hover {
  position: relative;
}
.hover-border:hover::after {
  content: ' ';
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  border: solid 1px var(--primary-color);
}
.active-border {
  position: relative;
}
.active-border::after {
  content: ' ';
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent;
  border: solid 2px var(--primary-color) !important;
}
.pointer {
  cursor: pointer;
}

.bottom-line {
  position: relative;
}
.bottom-line::after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--stroke-default);
  display: inline-block;
  content: ' ';
}

@keyframes message-in {
  from {
    transform: translateY(-24px);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slide-in-bottom {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-left {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-out-bottom {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}

.g-color-picker-box {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.g-color-picker-box .color-picker {
  background-image: conic-gradient(
    rgb(57, 41, 255),
    rgb(57, 107, 235),
    rgb(93, 255, 82),
    rgb(255, 219, 30),
    rgb(255, 118, 118),
    rgb(255, 40, 40),
    rgb(81, 129, 255),
    rgb(57, 41, 255)
  );
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-clip: padding-box;
  background-origin: padding-box;
  position: relative;
}
.g-color-picker-box .color-picker div {
  border-radius: 100%;
  display: inline-block;
  width: 14px;
  height: 14px;
  border: solid 1px #fff;
  margin: 2px;
}

::selection {
}
input::selection,
input::-moz-selection {
  color: #fff;
  background: var(--primary-hover);
}

.mgl0 {
  margin-left: 0;
}
.mgr0 {
  margin-right: 0;
}
.cursor-rotate {
  cursor: url('https://cdn.pacdora.com/ui/cursor/rotate.png') 12 12, default;
}
/* 入场动画需要的 class */
.animation-opacity {
  opacity: 0;
}
.opacity {
  opacity: 1;
}
.not-allowed {
  cursor: not-allowed;
}