.default {

  --brand-color: #731eff;

 
  --primary-color: #731eff;
  --primary-color5: #9447ff;
  --primary-color4: #b070ff;
  --primary-color3: #ca99ff;
  --primary-color2: #e1c2ff;
  --primary-color1: #f6ebff;


  --primary-background: #f7f7f7;

  --primary-background-hover: #f0f0f0;

  --primary-background-active: #e6e6e6;

 
  --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;


  --two-level-text-color: #4c4c4c;
  --three-level-text-color: #7f7f7f;


  --tooltip-text-color: #b2b2b2;

  --disabled-text-color: #c0c0c0;

  
  --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-color: #f6f5f7;
  --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;
  --primary-btn-bg: #731eff;
  --primary-btn-hover: #8045ed;
  --primary-btn-active: #400eba;
  --primary-btn-disable: #c59cff;
}
.dark {
  --primary-color: #955de6;
  --primary-light-color: #fbeeff;
  --error-color: #f25562;
  --warn-color: #ff9e59;
  --success-color: #47cca0;
  --primary-disable: #dab8ff;
  --primary-hover: #b888f1;
  --primary-highlight: #7343bf;
  --error-disable: #ffabac;
  --error-hover: #ff8288;
  --error-highlight: #cc3d4e;
  --warn-disable: #ffd5ab;
  --warn-hover: #ffbb81;
  --warn-highlight: #d87c41;
  --success-disable: #cbe69a;
  --success-hover: #b0d96f;
  --success-highlight: #71a632;
  --minor-color: #f6f5f7;
  --minor-disable: #f9f9f9;
  --minor-hover: #f0e0ff;
  --minor-highlight: #955de6;
  --h1-color: rgba(255, 255, 255, 0.85);
  --h2-color: rgba(255, 255, 255, 0.65);
  --h3-color: rgba(255, 255, 255, 0.45);
  --h4-color: rgba(255, 255, 255, 0.25);
  --shadow-color: rgba(255, 255, 255, 0.1);
  --border-color: rgba(0, 0, 0, 0.11);
  --theme-background-color: #000000;
  --theme-background-light: #f5f5f5;
  --half-deep: rgba(0, 0, 0, 0.5);
  --btn-color: #ffffff;
  --text-tip-color: #60656c;
}

html {
  overflow: hidden;
}
body {
  overflow: overlay;
  overflow-x: hidden;
}
body[lang=en-US],body[lang=es-ES],body[lang=pt-PT],body[lang=de-DE],body[lang=fr-FR],body[lang=id-ID],body[lang=ja-JP] {
    --pac-font-family: "Gilroy";
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-lg: 20px;
    --fs-xl: 28px;
    --fs-2xl: 32px;
    --fs-3xl: 40px;
    --fs-4xl: 48px;
    --fs-5xl: 56px;
    --fs-6xl: 64px;
    --fw-bold: 600;
    --fw-medium: 500;
    --fw-normal: 400;
    --lh-none: 1;
    --lh-tight: 1.3;
    --lh-normal: 1.5;
    --lh-loose: 2;
    --dialog-tab-title-fs: 16px;
    --dialog-tab-content-fc: #4c4c4c;
    --small-font-color: #7f7f7f;
    --normal-font-color: #191919;
    --dialog-tab-title-margin: 8px 0
}

body[lang=zh-CN] {
    --pac-font-family: "HarmonyOS_Sans_SC";
    --fs-sm: 14px;
    --fs-base: 16px;
    --fs-lg: 20px;
    --fs-xl: 28px;
    --fs-2xl: 32px;
    --fs-3xl: 40px;
    --fs-4xl: 48px;
    --fs-5xl: 56px;
    --fs-6xl: 64px;
    --fw-bold: 600;
    --fw-medium: 500;
    --fw-normal: 400;
    --lh-none: 1.2;
    --lh-tight: 1.5;
    --lh-normal: 1.7;
    --lh-loose: 2.2;
    --dialog-tab-title-fs: 16px;
    --dialog-tab-content-fc: #7f7f7f;
    --small-font-color: #7f7f7f;
    --normal-font-color: #191919;
    --dialog-tab-title-margin: 16px 0 8px 0
}
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: #eeeeee;
  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 {
  /* color: #fff; */
  /* background: var(--primary-hover); */
}
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;*/
}

.animation-opacity {
  opacity: 0;
}
.opacity {
  opacity: 1;
}