/* // basic */
@use "sass:math";

$loading-cublic-bezier: cubic-bezier(0.42, 0, 0.58, 1);
$raw-radius: 9px;
$raw-width: 100px;
$total: 7;
$transform-scale: 0.45;
$max-scale: 1.2;
$duration: 2.1s;
$interval: 1.869s;
$blue: #0096ff !default;
$green: #25c764 !default;
/* FishEye Color Variables and Functions */
// --------------------------- Color mixing functions ----------------

@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

/*
 --------------------------- Primary Color ---------------------------
*/

$blue: #0096ff !default;
$green: #25c764 !default;
$red: #e75a3a !default;
$orange: #ff9100 !default;
$purple: #6150e2 !default;
$black: #000 !default;
$white: #fff !default;

/*
 ---------------------------When necessary to add at any time---------------------------
*/
$blue-t10: tint($blue, 10%);
$blue-t20: tint($blue, 20%);
$blue-t30: tint($blue, 30%);
$blue-t40: tint($blue, 40%);
$blue-t50: tint($blue, 50%);
$blue-t60: tint($blue, 60%);
$blue-t70: tint($blue, 70%);
$blue-t80: tint($blue, 80%);
$blue-t90: tint($blue, 90%);
$blue-s10: shade($blue, 10%);
$blue-s20: shade($blue, 20%);
$blue-s30: shade($blue, 30%);
$blue-s40: shade($blue, 40%);
$blue-s50: shade($blue, 50%);
$red-t20: tint($red, 20%);
$red-t30: tint($red, 30%);
$red-t40: tint($red, 40%);
$red-t70: tint($red, 70%);
$red-t80: tint($red, 80%);
$red-t90: tint($red, 90%);
$red-s10: shade($red, 10%);
$red-s20: shade($red, 20%);
$green-t20: tint($green, 20%);
$green-t40: tint($green, 40%);
$green-t60: tint($green, 60%);
$green-t80: tint($green, 80%);
$green-t90: tint($green, 90%);
$green-s20: shade($green, 20%);
$orange-t20: tint($orange, 20%);
$orange-t40: tint($orange, 40%);
$orange-t80: tint($orange, 80%);
$orange-t90: tint($orange, 90%);
$orange-s10: shade($orange, 10%);
$orange-s20: shade($orange, 20%);
$purple-t20: tint($purple, 20%);
$purple-t40: tint($purple, 40%);
$purple-t60: tint($purple, 60%);
$purple-t90: tint($purple, 90%);
$purple-s20: shade($purple, 20%);

/* computed */
$raw-diameter: 2 * $raw-radius;
$min-scale: 2 - $max-scale;
$radius: $raw-radius * $transform-scale;
$margin: math.div($transform-scale * $raw-width, $total);
$width: ($total - 1) * $margin + $radius;
$diameter: $raw-diameter * $transform-scale;
$height: 2 * $diameter * $max-scale + $radius;
$top: $diameter - $radius * 0.5;
$negative-top: -$diameter - $radius * 0.5;

// new color ----------
$gray-10: #f2f5fa;
$gray-20: #edf0f7;
$gray-30: #e4e9f2;
$gray-40: #d8deeb;
$gray-50: #ccd4e3;
$gray-60: #a3b4cc;
$gray-70: #6b7d99;
$gray-80: #2d3a56;
$gray-90: #172640;
$gray-100: #0d1b36;
$gray-110: #0a1833;
$gray-120: #00122e;

$gray-a30-10:rgba(#001540,0.3);
$gray-a60-1: rgba(#edf1fa, 0.6);
$gray-a60-2: rgba(#e1e6f1, 0.6);
$gray-a60-3: rgba(#d3daeb, 0.6);
$gray-a60-4: rgba(#c0cbe0, 0.6);
$gray-a60-5: rgba(#acbad3, 0.6);
$gray-a60-6: rgba(#6b80a7, 0.6);
$gray-a60-7: rgba(#0a2555, 0.6);
$gray-a60-8: rgba(#2c3852, 0.6);;
$gray-a75-8: rgba(#2c3852, 0.75);
$gray-a80-9: rgba(23, 38, 64, 0.8);

/* blue */
$blue-100: #1d326c;
$blue-80: #005ed1;
$blue-60: #0080ff;
$blue-50: #0080FF;
$blue-40: #009dff;

/* green */
$green-100: #18544f;
$green-80: #008f4c;
$green-60: #00ba5d;
$green-40: #23cf6d;

/* yellow */
$yellow-100: #8e671b;
$yellow-80: #e07f00;
$yellow-60: #fea008;
$yellow-40: #feba33;


$yellow-a10-50:rgba($yellow-60,0.1);

/* red */
$red-100: #7d2126;
$red-80: #c73d31;
$red-60: #f0483e;
$red-40: #ff5252;

/* purple */
$purple-50:#7E41FF;
$purple-a20-50:rgba($purple-50,20%);
$purple-a16-50:rgba($purple-50,16%);
$purple-a10-50:rgba($purple-50,10%);


$fills-opaque-primary-light: $white;
$fills-opaque-secondary-light: $gray-20;
$fills-opaque-terdiary-light: $gray-30;
$fills-opaque-quaternary-light: $gray-40;
$fills-opaque-quinary-light: $gray-50;

$fills-trans-primary-light: $gray-a60-1;
$fills-trans-secondary-light: $gray-a60-2;
$fills-trans-terdiary-light: $gray-a60-3;
$fills-trans-quaternary-light: $gray-a60-4;
$fills-trans-quinary-light: $gray-a60-5;

$text-primary-light: $gray-80;
$text-secondary-light: $gray-a60-8;
$text-terdiary-light: $gray-a60-7;
$text-quaternary-light: $gray-a60-6;
$text-neutral-secondary-light: $gray-a75-8;

$strokes-translucent-1-light: $gray-a60-5;
$strokes-translucent-2-light: $gray-a60-7;

$strokes-light-trans-1: $gray-a60-2;
$strokes-light-trans-2: $gray-a60-3;
$strokes-light-trans-3: $gray-a60-5;
$strokes-light-trans-4: $gray-a60-6;

$separators-translucent-light: $gray-a60-5;
$separators-opaque-light: $gray-40;

$box-shadow-light-onhover: 0px 0px 4px rgba(235, 239, 245, 0.6),
  0px 8px 16px rgba(129, 138, 153, 0.18);
$background-onhover: linear-gradient(
  90deg,
  #ffffff 0%,
  rgba(255, 255, 255, 0.6) 100%
);

$box-shadow-light-selected: 0px 1px 2px rgba(184, 192, 204, 0.6);
$background-selected: linear-gradient(90deg, #0080ff 0%, #005ed1 100%);

// typography
@mixin Inter($weight: normal, $style: normal) {
  font-family: Inter;
  font-style: $style;
  font-weight: $weight;
}

@mixin Uppercase() {
  text-transform: uppercase;
  font-feature-settings: 'cpsp' on;
}

@mixin Monospace() {
  font-feature-settings: 'tnum' on, 'lnum' on, 'case' on;
}

@mixin Slashed {
  font-feature-settings: 'zero' on;
}

@mixin FullScreenContrast {
  background-size: 50%;
  background-repeat: repeat;
  background-image: url('data:image/png;base64, ');
}

@mixin Autofill($background: white) {
  input:-webkit-autofill,
  input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px $background inset !important;
  }
}

/*  palette    global token*/
/* color opaque */

/* color transparent */
/* blue transparent  */
$blue-a20: rgba(#0088ff, 0.2);
$blue-a16: rgba(#0088ff, 0.16);
$blue-a10: rgba(#0088ff, 0.1);
$blue-a4: rgba(#0088ff, 0.04);
/* green transparent  */
$green-a20: rgba(#1ec97f, 0.2);
$green-a16: rgba(#1ec97f, 0.16);
$green-a10: rgba(#1ec97f, 0.1);
$green-a4: rgba(#1ec97f, 0.04);
/* yellow transparent  */
$yellow-a20: rgba(#ffbb00, 0.2);
$yellow-a16: rgba(#ffbb00, 0.16);
$yellow-a10: rgba(#ffbb00, 0.1);
$yellow-a4: rgba(#ffbb00, 0.04);
/* red transparent  */
$red-a20: rgba(#ff4a4a, 0.2);
$red-a16: rgba(#ff4a4a, 0.16);
$red-a10: rgba(#ff4a4a, 0.1);
$red-a4: rgba(#ff4a4a, 0.04);

/* gray transparent */

/* white transparent */
$white-a60: rgba($white, 0.6);

/* gradient opaque */
/* blue radial gradient */
$gradient-blue-1-start: #5bcaff;
$gradient-blue-1-last: #0066ff;

$gradient-blue-1: radial-gradient(
  100% 100% at 0% 100%,
  $gradient-blue-1-start 0%,
  $gradient-blue-1-last 100%
);

/* blue linear gradient */
$gradient-blue-2-start: #0080ff;
$gradient-blue-2-last: #005ed1;

$gradient-blue-2: linear-gradient(
  90deg,
  $gradient-blue-2-start 0%,
  $gradient-blue-2-last 100%
);

/* green radial gradient */
$gradient-green-1-start: #36e0a4;
$gradient-green-1-last: #009449;

$gradient-green-1: radial-gradient(
  100% 100% at 0% 100%,
  $gradient-green-1-start 0%,
  $gradient-green-1-last 100%
);

/* yellow radial gradient */
$gradient-yellow-1-start: #ffd505;
$gradient-yellow-1-last: #f39600;

$gradient-yellow-1: radial-gradient(
  100% 100% at 0% 100%,
  $gradient-yellow-1-start 0%,
  $gradient-yellow-1-last 100%
);

/* red radial gradient */
$gradient-red-1-start: #ff5c78;
$gradient-red-1-last: #dc0000;

$gradient-red-1: radial-gradient(
  100% 100% at 0% 100%,
  $gradient-red-1-start 0%,
  $gradient-red-1-last 100%
);

/* gray radial gradient */
$gradient-gray-1-start: #ccd4e3;
$gradient-gray-1-last: #6b7d99;

$gradient-gray-1: radial-gradient(
  100% 100% at 0% 100%,
  $gradient-gray-1-start 0%,
  $gradient-gray-1-last 100%
);

/* white to gray radial gradient */
$gradient-white-to-gray-1-start: $white;
$gradient-white-to-gray-1-last: #edf0f7;

$gradient-white-to-gray-1: radial-gradient(
  50% 100% at 50% 0%,
  $gradient-white-to-gray-1-start 0%,
  $gradient-white-to-gray-1-last 100%
);

/*  white to gray  linear gradient */
$gradient-white-to-gray-2-start: $white;
$gradient-white-to-gray-2-last: #edf0f7;

$gradient-white-to-gray-2: linear-gradient(
  180deg,
  $gradient-white-to-gray-2-start 0%,
  $gradient-white-to-gray-2-last 100%
);

/* gradient transparent */
$gradient-white-l100r60-start: $white;
$gradient-white-l100r60-last: rgba($white, 0.6);

$gradient-white-l100r60: linear-gradient(
  90deg,
  $gradient-white-l100r60-start 0%,
  $gradient-white-l100r60-last 100%
);

$gradient-white-l60r100: linear-gradient(
  90deg,
  $gradient-white-l100r60-last 0%,
  $gradient-white-l100r60-start 100%
);

/* secondary palette */
$chart-01: #41efc5;
$chart-02: #5ed8ff;
$chart-03: #cfec1b;
$chart-04: #8c83ed;
$chart-05: #de83ed;
$chart-06: #ff9eea;
$chart-07: #ffbf00;

/* purple radial gradient */
$gradient-purple-1-start: #c67eff;
$gradient-purple-1-last: #6a38ff;

$gradient-purple-1: radial-gradient(
  100% 100% at 0% 100%,
  $gradient-purple-1-start 0%,
  $gradient-purple-1-last 100%
);

/*  refine alias color   */
/*  text   */

$text-light-primary: $gray-120;
$text-light-secondary: $gray-a60-8;
$text-light-tertiary: rgba(0, 21, 64, 0.3);
$text-light-quaternary: rgba(3, 30, 79, 0.18);
$text-light-on-tint: $white;
$text-light-super: $blue-100;

$text-light-general: $blue-60;
$text-light-serious: $red-60;
$text-light-notice: $yellow-60;
$text-light-positive: $green-60;

$text-light-storage: rgba(126, 65, 255, 1);
$text-colorful-outstanding: $blue-60;
$text-neutral-tertiary: $gray-a60-8;
$text-neutral-primary: $gray-120;
$text-neutral-secondary: rgba(44, 56, 82, 0.75);
$text-neutral-ontint: #FFFFFF;

$text-colorful-purple: $purple-50;
/*  link   */
$link-light-primary: $blue-60;
$link-light-secondary: #2c3852;
$link-light-serious: $red-60;
$link-outstanding-normal:$blue-50;
$link-outstanding-hover:$blue-40;
$link-outstanding-active:$blue-80;
/*  fill   */
$fills-light-trans-1: rgba(#edf1fa, 0.6);
$fills-light-trans-2: rgba(#e1e6f1, 0.6);
$fills-light-trans-3: rgba(#d3daeb, 0.6);
$fills-light-trans-4: rgba(#c0cbe0, 0.6);
$fills-light-trans-5: rgba(#acbad3, 0.6);
$fills-light-light-white: rgba($white, 0.6);
$fills-light-opaque-1: $gray-10;
$fills-light-opaque-2: $gray-20;
$fills-light-opaque-3: $gray-30;
$fills-light-opaque-4: $gray-40;
$fills-light-opaque-5: $gray-50;
$fills-light-white: $white;

$fills-light-general-general-deep: $blue-100;
$fills-light-general-general-dark: $blue-80;
$fills-light-general-general: $blue-60;
$fills-light-general-general-bright: $blue-40;
$fills-light-general-general-deep-active: rgba(#1d326c, 0.4);
$fills-light-general-general-light-active: rgba(#0088ff, 0.2);
$fills-light-general-general-light-hover: rgba(#0088ff, 0.16);
$fills-light-general-general-light: rgba(#0088ff, 0.1);
$fills-light-general-general-thin: rgba(#0088ff, 0.04);

$fills-light-serious-serious-deep: $red-100;
$fills-light-serious-serious-dark: $red-80;
$fills-light-serious-serious: $red-60;
$fills-light-serious-serious-bright: $red-40;
$fills-light-serious-serious-light-active: rgba(#ff4a4a, 0.2);
$fills-light-serious-serious-light-hover: rgba(#ff4a4a, 0.16);
$fills-light-serious-serious-light: rgba(#ff4a4a, 0.1);
$fills-light-serious-serious-thin: rgba(#ff4a4a, 0.04);

$fills-light-notice-notice-deep: $yellow-100;
$fills-light-notice-notice-dark: $yellow-80;
$fills-light-notice-notice: $yellow-60;
$fills-light-notice-notice-bright: $yellow-40;
$fills-light-notice-notice-light-active: rgba(#ffbb00, 0.2);
$fills-light-notice-notice-light-hover: rgba(#ffbb00, 0.16);
$fills-light-notice-notice-light: rgba(#ffbb00, 0.1);
$fills-light-notice-notice-thin: rgba(#ffbb00, 0.04);

$fills-light-positive-positive-deep: $green-100;
$fills-light-positive-positive-dark: $green-80;
$fills-light-positive-positive: $green-60;
$fills-light-positive-positive-bright: $green-40;
$fills-light-positive-positive-light-active: rgba(#1ec97f, 0.2);
$fills-light-positive-positive-light-hover: rgba(#1ec97f, 0.16);
$fills-light-positive-positive-light: rgba(#1ec97f, 0.1);
$fills-light-positive-positive-thin: rgba(#1ec97f, 0.04);
$fills-light-interaction-purple-hover:rgba(126, 65, 255, 0.16);
$fill-light-element-container-outstanding: rgba(0, 136, 255, 0.10);
$fill-outstanding-light:$blue-a10;
$fill-serious-light:$red-a10;
$fill-notice-light:$yellow-a10-50;
$fill-positive-light:$green-a10;
$fill-neutral-trans-2:$gray-a60-2;
$fill-neutral-trans-1:$gray-a60-1;
$fill-neutral-trans-8:$gray-a80-9;
$fill-outstanding-base:$blue-60;
$fill-outstanding-light-active: rgba(0, 136, 255, 0.20);
$fill-serious-base:$red-60;
$fill-notice-base:$yellow-60;
$fill-positive-base:$green-60;
$fill-outstanding-light-hover:$blue-a16;
$fill-serious-light-hover:$red-a16;
$fill-notice-light-hover:$yellow-a16;
$fill-positive-light-hover:$green-a16;
$fill-neutral-trans-3-trans-2-hover:$gray-a60-3;
$fill-neutral-white:$white;
$fill-neutral-light-white:$white-a60;

$fill-purple-base:$purple-50;
$fill-purple-light:$purple-a10-50;
/*  fill  element  */

$fills-element-light-container-general: rgba(#e1e6f1, 0.6);
$fills-element-light-container-outstanding: rgba(#0088ff, 0.1);
$fills-element-light-container-outstanding-hover: rgba(#0088ff, 0.16);
$fills-element-light-container-serious: rgba(#ff4a4a, 0.1);
$fills-element-light-container-notice: rgba(#ffbb00, 0.1);
$fills-element-light-container-positive: rgba(#1ec97f, 0.1);
$fills-element-light-container-storage: rgba(126, 65, 255, 0.1);

/*  fill  interaction  */

$fills-interaction-light-general-hover: rgba(#d3daeb, 0.6);
$fills-interaction-light-general-active: rgba(#c0cbe0, 0.6);

$fills-interaction-light-outstanding-hover: rgba(#0088ff, 0.16);
$fills-interaction-light-outstanding-active: rgba(#0088ff, 0.2);
$fills-interaction-light-serious-hover: rgba(#ff4a4a, 0.16);
$fills-interaction-light-serious-active: rgba(#ff4a4a, 0.2);
$fills-interaction-light-notice-hover: rgba(#ffbb00, 0.16);
$fills-interaction-light-notice-active: rgba(#ffbb00, 0.2);
$fills-interaction-light-positive-hover: rgba(#1ec97f, 0.16);
$fills-interaction-light-positive-active: rgba(#1ec97f, 0.2);

/*  stroke   */
$strokes-light-trans-1: rgba(#e1e6f1, 0.6);
$strokes-light-trans-2: rgba(#d3daeb, 0.6);
$strokes-light-trans-3: rgba(#acbad3, 0.6);
$strokes-light-trans-4: rgba(#6b80a7, 0.6);
$strokes-light-outstanding-light: rgba(#0088ff, 0.16);
$strokes-light-serious-light: rgba(#ff4a4a, 0.16);
$stroke-neutral-trans-2: $gray-a60-3;
$stroke-neutral-white: $white;

$strokes-light-opaque-1: $gray-20;
$strokes-light-opaque-2: $gray-30;
$strokes-light-opaque-3: $gray-50;
$strokes-light-opaque-4: $gray-60;
$strokes-light-outstanding: $blue-60;
$strokes-light-serious: $red-60;


/*  background   */

$backgrounds-light-primary: $white;
$backgrounds-light-grouped: $gray-20;
$backgrounds-light-focus: radial-gradient(
  50% 100% at 50% 0%,
  $backgrounds-light-primary 0%,
  $backgrounds-light-grouped 100%
);
$backgrounds-light-full-screen-contrast: $white;
$backgrounds-light-natural: linear-gradient(180deg, $white 0%, $gray-20 100%);
/*  dim   */
$dim-light-under-menu: rgba(#3f6394, 0.1);
$dim-light-under-dialog-box: rgba(#101a29, 0.1);

/*  box shadow   */
$shadow-light-hover: 0px 0px 0px 4px rgba(225, 230, 241, 0.6);
$shadow-light-active: 0px 0px 0px 4px rgba(0, 136, 255, 0.16);
$shadow-light-focus: 0px 0px 0px 4px rgba(0, 136, 255, 0.16);
$shadow-light-error: 0px 0px 0px 4px rgba(255, 74, 74, 0.16);
$shadow-list-item-light-hover: 0px 0px 4px rgba(235, 239, 245, 0.6), 0px 8px 16px rgba(129, 138, 153, 0.18);
$shadow-menu-light-default: 0px 0px 10px rgba(107, 125, 153, 0.18), 0px 12px 40px rgba(45, 58, 86, 0.3);
$shadow-light-push-button-ordinary: 0px 1px 2px -1px rgba(44, 56, 82, 0.18);

/*  fisheye   */
$fisheye-gray-010: #f7f8fa;
$fisheye-gray-090: #30343a;
$fisheye-gray-060: #8e9aa9;

/* z-index */

$input-hover-index: 1;
$eagle-table-form-header-index: 2;
$table-header-index: 3;
$table-drag-index: 9;
$table-action-column-index:10;

$text-neutral-primary: #00122E;
$text-neutral-secondary: #2C3852BF;
$text-neutral-tertiary: #2C385299;
$text-neutral-quaternary: #0015404D;
$text-neutral-ontint: #FFFFFF;
$text-neutral-super: #1D326C;
$text-colorful-outstanding: #0080FF;
$text-colorful-serious: #F0483E;
$text-colorful-notice: #FEA008;
$text-colorful-noticedark: #E07F00;
$text-colorful-positive: #00BA5D;
$text-colorful-positivedark: #008F4C;
$text-colorful-purple: #7E41FF;
$link-outstandingnormal: #0080FF;
$link-outstandinghover: #009DFF;
$link-outstandingactive: #005ED1;
$link-neutralnormal: #2C3852BF;
$link-neutralhover: #2C385299;
$link-neutralactive: #172640CC;
$link-seriousnormal: #F0483E;
$link-serioushover: #FF5252;
$link-seriousactive: #C73D31;
$fill-neutral-lightwhite: #FFFFFF99;
$fill-neutral-trans-1: #EDF1FA99;
$fill-neutral-trans-2: #E1E6F199;
$fill-neutral-trans-3: #D3DAEB99;
$fill-neutral-trans-4: #C0CBE099;
$fill-neutral-trans-5: #ACBAD399;
$fill-neutral-trans-7: #0A255599;
$fill-neutral-trans-8: #172640CC;
$fill-neutral-white: #FFFFFF;
$fill-neutral-opaque-1: #F2F5FA;
$fill-neutral-opaque-2: #EDF0F7;
$fill-neutral-opaque-3: #E4E9F2;
$fill-neutral-opaque-4: #D8DEEB;
$fill-neutral-opaque-5: #CCD4E3;
$fill-neutral-opaque-6: #A3B4CC;
$fill-neutral-opaque-7: #6B7D99;
$fill-neutral-opaque-8: #2D3A56;
$fill-purple-base: #7E41FF;
$fill-purple-lightactive: #7E41FF33;
$fill-purple-lighthover: #7E41FF29;
$fill-purple-light: #7E41FF1A;
$fill-outstanding-deep: #1D326C;
$fill-outstanding-dark: #005ED1;
$fill-outstanding-base: #0080FF;
$fill-outstanding-bright: #009DFF;
$fill-outstanding-lightactive: #0088FF33;
$fill-outstanding-lighthover: #0088FF29;
$fill-outstanding-light: #0088FF1A;
$fill-outstanding-thin: #0088FF0A;
$fill-serious-deep: #7D2126;
$fill-serious-dark: #C73D31;
$fill-serious-base: #F0483E;
$fill-serious-bright: #FF5252;
$fill-serious-lightactive: #FF4A4A33;
$fill-serious-lighthover: #FF4A4A29;
$fill-serious-light: #FF4A4A1A;
$fill-serious-thin: #FF4A4A0A;
$fill-notice-deep: #8E671B;
$fill-notice-dark: #E07F00;
$fill-notice-base: #FEA008;
$fill-notice-bright: #FEBA33;
$fill-notice-lightactive: #FEA00833;
$fill-notice-lighthover: #FEA00829;
$fill-notice-light: #FEA0081A;
$fill-notice-thin: #FEA0080A;
$fill-positive-deep: #18544F;
$fill-positive-dark: #008F4C;
$fill-positive-base: #00BA5D;
$fill-positive-bright: #23CF6D;
$fill-positive-lightactive: #1EC97F33;
$fill-positive-lighthover: #1EC97F29;
$fill-positive-light: #1EC97F1A;
$fill-positive-thin: #1EC97F0A;
$stroke-neutral-lightwhite: #FFFFFF99;
$stroke-neutral-trans-1: #E1E6F199;
$stroke-neutral-trans-2: #D3DAEB99;
$stroke-neutral-trans-3: #ACBAD399;
$stroke-neutral-trans-4: #6B80A799;
$stroke-neutral-white: #FFFFFF;
$stroke-neutral-opaque-1: #EDF0F7;
$stroke-neutral-opaque-2: #E4E9F2;
$stroke-neutral-opaque-3: #CCD4E3;
$stroke-neutral-opaque-4: #A3B4CC;
$stroke-outstanding-base: #0080FF;
$stroke-outstanding-light: #0088FF29;
$stroke-serious-base: #F0483E;
$stroke-serious-light: #FF4A4A29;
$stroke-serious-thin: #FF4A4A1A;
$pagebackground-primary: #FFFFFF;
$pagebackground-grouped: #EDF0F7;
$dim-undermenu: #3F63941A;
$dim-single-dialogmask: #101A2966;
$dim-double-dialogmask: #101A2999;
$chart-blue-blue-1: #ADE5FF;
$chart-blue-blue-2: #7FD2FF;
$chart-blue-blue-3: #51BCFF;
$chart-blue-blue-4: #19A3FF;
$chart-blue-blue-5: #008CFF;
$chart-blue-blue-6: #0775F2;
$chart-blue-blue-7: #1064DA;
$chart-blue-blue-8: #0F53C1;
$chart-blue-blue-9: #0C3FA6;
$chart-blue-blue-10: #05318D;
$chart-green-green-1: #A2F0D5;
$chart-green-green-2: #80E4BC;
$chart-green-green-3: #62D9A4;
$chart-green-green-4: #47CD8A;
$chart-green-green-5: #21BE6A;
$chart-green-green-6: #06AC53;
$chart-green-green-7: #0C9646;
$chart-green-green-8: #0C8137;
$chart-green-green-9: #0A6B29;
$chart-green-green-10: #05551B;
$chart-purple-purple-1: #E1C1FF;
$chart-purple-purple-2: #CFA3FF;
$chart-purple-purple-3: #BE89FF;
$chart-purple-purple-4: #A66BFF;
$chart-purple-purple-5: #8E51FF;
$chart-purple-purple-6: #753BF1;
$chart-purple-purple-7: #612FD4;
$chart-purple-purple-8: #4E27B9;
$chart-purple-purple-9: #3D1D9F;
$chart-purple-purple-10: #2B1385;
$chart-red-red-1: #FFBCC1;
$chart-red-red-2: #FFA8A9;
$chart-red-red-3: #FF8989;
$chart-red-red-4: #FC726E;
$chart-red-red-5: #F4554C;
$chart-red-red-6: #DE433B;
$chart-red-red-7: #BB3935;
$chart-red-red-8: #992F2D;
$chart-red-red-9: #782725;
$chart-red-red-10: #571E1E;
$chart-yellow-yellow-1: #FFDE6C;
$chart-yellow-yellow-2: #FED158;
$chart-yellow-yellow-3: #FEC444;
$chart-yellow-yellow-4: #FEB630;
$chart-yellow-yellow-5: #FEA819;
$chart-yellow-yellow-6: #E79305;
$chart-yellow-yellow-7: #BB7A03;
$chart-yellow-yellow-8: #926102;
$chart-yellow-yellow-9: #6B4803;
$chart-yellow-yellow-10: #483100;
$chart-pink-pink-1: #FED1FE;
$chart-pink-pink-2: #FDBCFD;
$chart-pink-pink-3: #F99BF8;
$chart-pink-pink-4: #F573F2;
$chart-pink-pink-5: #ED5BE5;
$chart-pink-pink-6: #E136C6;
$chart-pink-pink-7: #CF23A9;
$chart-pink-pink-8: #B5158D;
$chart-pink-pink-9: #910B6E;
$chart-pink-pink-10: #64054B;
$chart-cyan-cyan-1: #A0ECEC;
$chart-cyan-cyan-2: #83E2E3;
$chart-cyan-cyan-3: #67D8D9;
$chart-cyan-cyan-4: #3AC4C6;
$chart-cyan-cyan-5: #1AACB4;
$chart-cyan-cyan-6: #048BA1;
$chart-cyan-cyan-7: #00728E;
$chart-cyan-cyan-8: #00607B;
$chart-cyan-cyan-9: #005068;
$chart-cyan-cyan-10: #004155;
$white-white: #FFFFFF;
$white-white-a60: #FFFFFF99;
$gray-gray-10: #F2F5FA;
$gray-gray-20: #EDF0F7;
$gray-gray-30: #E4E9F2;
$gray-gray-40: #D8DEEB;
$gray-gray-50: #CCD4E3;
$gray-gray-60: #A3B4CC;
$gray-gray-70: #6B7D99;
$gray-gray-80: #2D3A56;
$gray-gray-90: #172640;
$gray-gray-100: #0D1B36;
$gray-gray-110: #0A1833;
$gray-gray-120: #00122E;
$gray-gray-a60-1: #EDF1FA99;
$gray-gray-a60-2: #E1E6F199;
$gray-gray-a60-3: #D3DAEB99;
$gray-gray-a60-4: #C0CBE099;
$gray-gray-a60-5: #ACBAD399;
$gray-gray-a60-6: #6B80A799;
$gray-gray-a80-6: #6B80A7CC;
$gray-gray-a60-7: #0A255599;
$gray-gray-a60-8: #2C385299;
$gray-gray-a75-8: #2C3852BF;
$gray-gray-a80-9: #172640CC;
$gray-gray-a30-10: #0015404D;
$blue-blue-90: #1D326C;
$blue-blue-60: #005ED1;
$blue-blue-50: #0080FF;
$blue-blue-40: #009DFF;
$blue-blue-a20-50: #0088FF33;
$blue-blue-a16-50: #0088FF29;
$blue-blue-a10-50: #0088FF1A;
$blue-blue-a04-50: #0088FF0A;
$red-red-90: #7D2126;
$red-red-60: #C73D31;
$red-red-50: #F0483E;
$red-red-40: #FF5252;
$red-red-a20-50: #FF4A4A33;
$red-red-a16-50: #FF4A4A29;
$red-red-a10-50: #FF4A4A1A;
$red-red-a04-50: #FF4A4A0A;
$yellow-yellow-90: #8E671B;
$yellow-yellow-60: #E07F00;
$yellow-yellow-50: #FEA008;
$yellow-yellow-40: #FEBA33;
$yellow-yellow-a20-50: #FEA00833;
$yellow-yellow-a16-50: #FEA00829;
$yellow-yellow-a10-50: #FEA0081A;
$yellow-yellow-a04-50: #FEA0080A;
$green-green-90: #18544F;
$green-green-60: #008F4C;
$green-green-50: #00BA5D;
$green-green-40: #23CF6D;
$green-green-a20-50: #1EC97F33;
$green-green-a16-50: #1EC97F29;
$green-green-a10-50: #1EC97F1A;
$green-green-a04-50: #1EC97F0A;
$purple-purple-50: #7E41FF;
$purple-purple-a20-50: #7E41FF33;
$purple-purple-a16-50: #7E41FF29;
$purple-purple-a10-50: #7E41FF1A;