/* Themes */
:root {
  --pbt-theme-version: 459;
  --pbt-theme-list: light, dark, shade, deepblue, green, lightblue, orange, deepgreen, purple;
  /* padding */
  --pbt-padding-base: 4px;
  --pbt-padding-xs: 8px;
  --pbt-padding-sm: 12px;
  --pbt-padding-md: 16px;
  --pbt-padding-lg: 24px;
  --pbt-padding-xl: 32px;

  /* font */
  --pbt-font-size-xxs: 10px;
  --pbt-font-size-xs: 12px;
  --pbt-font-size-sm: 13px;
  --pbt-font-size-md: 14px;
  --pbt-font-size-lg: 16px;
  --pbt-font-size-xl: 18px;
}

/* Component Colors Configure */
:root {
  /* Color Palette */

  /* with alpha */
  /* rgba(var(--pbt-primary-color-rgb), alpha) */

  /* primary */
  --pbt-primary-color: #337eff;
  --pbt-primary-color-rgb: 51, 126, 255;
  --pbt-primary-color-1: #f0f8ff;
  --pbt-primary-color-1-rgb: 240, 248, 255;
  --pbt-primary-color-2: #d6ebff;
  --pbt-primary-color-2-rgb: 214, 235, 255;
  --pbt-primary-color-3: #add3ff;
  --pbt-primary-color-3-rgb: 173, 211, 255;
  --pbt-primary-color-4: #85baff;
  --pbt-primary-color-4-rgb: 133, 186, 255;
  --pbt-primary-color-5: #5c9dff;
  --pbt-primary-color-5-rgb: 92, 157, 255;
  --pbt-primary-color-6: #337eff;
  --pbt-primary-color-6-rgb: 51, 126, 255;
  --pbt-primary-color-7: #215ed9;
  --pbt-primary-color-7-rgb: 33, 94, 217;

  /* success */
  --pbt-success-color: #23c07a;
  --pbt-success-color-rgb: 35, 192, 122;
  --pbt-success-color-1: #f0fff6;
  --pbt-success-color-1-rgb: 240, 255, 246;
  --pbt-success-color-2: #c7f2d9;
  --pbt-success-color-2-rgb: 199, 242, 217;
  --pbt-success-color-3: #97e6bb;
  --pbt-success-color-3-rgb: 151, 230, 187;
  --pbt-success-color-4: #6cd9a1;
  --pbt-success-color-4-rgb: 108, 217, 161;
  --pbt-success-color-5: #45cc8b;
  --pbt-success-color-5-rgb: 69, 204, 139;
  --pbt-success-color-6: #23c07a;
  --pbt-success-color-6-rgb: 35, 192, 122;
  --pbt-success-color-7: #149962;
  --pbt-success-color-7-rgb: 20, 153, 98;

  /* warning */
  --pbt-warning-color: #ffb549;
  --pbt-warning-color-rgb: 255, 181, 73;
  --pbt-warning-color-1: #fffbf0;
  --pbt-warning-color-1-rgb: 255, 251, 240;
  --pbt-warning-color-2: #fffaed;
  --pbt-warning-color-2-rgb: 255, 250, 237;
  --pbt-warning-color-3: #ffedc4;
  --pbt-warning-color-3-rgb: 255, 237, 196;
  --pbt-warning-color-4: #ffde9c;
  --pbt-warning-color-4-rgb: 255, 222, 156;
  --pbt-warning-color-5: #ffcc73;
  --pbt-warning-color-5-rgb: 255, 204, 115;
  --pbt-warning-color-6: #ffb549;
  --pbt-warning-color-6-rgb: 255, 181, 73;
  --pbt-warning-color-7: #d99134;
  --pbt-warning-color-7-rgb: 217, 145, 52;

  /* danger */
  --pbt-danger-color: #ff585d;
  --pbt-danger-color-rgb: 255, 88, 93;
  --pbt-danger-color-1: #fff2f0;
  --pbt-danger-color-1-rgb: 255, 242, 240;
  --pbt-danger-color-2: #fff1f0;
  --pbt-danger-color-2-rgb: 255, 241, 240;
  --pbt-danger-color-3: #ffd7d4;
  --pbt-danger-color-3-rgb: 255, 215, 212;
  --pbt-danger-color-4: #ffaeab;
  --pbt-danger-color-4-rgb: 255, 174, 171;
  --pbt-danger-color-5: #ff8282;
  --pbt-danger-color-5-rgb: 255, 130, 130;
  --pbt-danger-color-6: #ff585d;
  --pbt-danger-color-6-rgb: 255, 88, 93;
  --pbt-danger-color-7: #d9414b;
  --pbt-danger-color-7-rgb: 217, 65, 75;

  /* disabled */
  --pbt-disabled-color: #b9bdc6;
  --pbt-disabled-color-rgb: 185, 189, 198;
  --pbt-disabled-color-1: #f0f7ff;
  --pbt-disabled-color-1-rgb: 240, 247, 255;
  --pbt-disabled-color-2: #ebf1fa;
  --pbt-disabled-color-2-rgb: 235, 241, 250;
  --pbt-disabled-color-3: #dfe5ed;
  --pbt-disabled-color-3-rgb: 223, 229, 237;
  --pbt-disabled-color-4: #d3d8e0;
  --pbt-disabled-color-4-rgb: 211, 216, 224;
  --pbt-disabled-color-5: #c7cbd4;
  --pbt-disabled-color-5-rgb: 199, 203, 212;
  --pbt-disabled-color-6: #b9bdc6;
  --pbt-disabled-color-6-rgb: 185, 189, 198;
  --pbt-disabled-color-7: #8d93a1;
  --pbt-disabled-color-7-rgb: 141, 147, 161;

  /* alert level */
  --pbt-alert-level-color-1: #0097f5;
  --pbt-alert-level-color-1-rgb: 0, 151, 245;
  --pbt-alert-level-color-2: #eaad06;
  --pbt-alert-level-color-2-rgb: 234, 173, 6;
  --pbt-alert-level-color-3: #ec6a32;
  --pbt-alert-level-color-3-rgb: 236, 106, 50;
  --pbt-alert-level-color-4: #f0383e;
  --pbt-alert-level-color-4-rgb: 240, 56, 62;
  --pbt-alert-level-color-5: #f0383e;
  --pbt-alert-level-color-5-rgb: 240, 56, 62;
  --pbt-alert-level-color-6: #f0383e;
  --pbt-alert-level-color-6-rgb: 240, 56, 62;

  /* colorful */
  --pbt-color-blue: #46b7ff;
  --pbt-color-blue-rgb: 70, 183, 255;
  --pbt-color-yellow: #fcc545;
  --pbt-color-yellow-rgb: 252, 197, 69;
  --pbt-color-purple: #db77f8;
  --pbt-color-purple-rgb: 219, 119, 248;
  --pbt-color-green: #50caca;
  --pbt-color-green-rgb: 80, 202, 202;
  --pbt-color-lightgreen: #2ecca9;
  --pbt-color-lightgreen-rgb: 46, 204, 169;
  --pbt-color-red: #ff7ea6;
  --pbt-color-red-rgb: 255, 126, 166;
  --pbt-color-orange: #fc8e63;
  --pbt-color-orange-rgb: 252, 142, 99;
  --pbt-color-lightblue: #52d4f1;
  --pbt-color-lightblue-rgb: 82, 212, 241;

  /* active */
  --pbt-active-color: #ffffff;
  --pbt-active-color-rgb: 255, 255, 255;

  /* active background */
  --pbt-active-background-color: #26324e;
  --pbt-active-background-color-rgb: 38, 50, 78;

  /* mask */
  --pbt-mask-color: #000000;
  --pbt-mask-color-rgb: 0, 0, 0;

  /* text */
  --pbt-text-color: #26324e;
  --pbt-text-color-rgb: 38, 50, 78;
  --pbt-text-color-1: #747c8e;
  --pbt-text-color-1-rgb: 116, 124, 142;
  --pbt-text-color-2: #979daa;
  --pbt-text-color-2-rgb: 151, 157, 170;
  --pbt-text-color-3: #b9bdc6;
  --pbt-text-color-3-rgb: 185, 189, 198;
  --pbt-text-color-4: #dcdee2;
  --pbt-text-color-4-rgb: 220, 222, 226;

  /* background */
  --pbt-background-color: #ffffff;
  --pbt-background-color-rgb: 255, 255, 255;
  --pbt-background-color-1: #f3f7ff;
  --pbt-background-color-1-rgb: 243, 247, 255;
  --pbt-background-color-2: #eef1f7;
  --pbt-background-color-2-rgb: 238, 241, 247;
  --pbt-background-color-3: #e5eaf2;
  --pbt-background-color-3-rgb: 229, 234, 242;
  --pbt-background-color-4: #dce2ea;
  --pbt-background-color-4-rgb: 220, 226, 234;

  /* border */
  --pbt-border-color: #dfe5f2;
  --pbt-border-color-rgb: 223, 229, 242;
  --pbt-border-color-1: #d8deeb;
  --pbt-border-color-1-rgb: 216, 222, 235;
  --pbt-border-color-2: #cfd6e6;
  --pbt-border-color-2-rgb: 207, 214, 230;
  --pbt-border-color-3: #cfd6e6;
  --pbt-border-color-3-rgb: 207, 214, 230;

  /* shadow */
  --pbt-shadow-color: #8fa5c4;
  --pbt-shadow-color-rgb: 143, 165, 196;
  --pbt-shadow-color-1: #26324e;
  --pbt-shadow-color-1-rgb: 38, 50, 78;

  /* font */
  --pbt-font-size-xxs: 10px;
  --pbt-font-size-xs: 12px;
  --pbt-font-size-sm: 13px;
  --pbt-font-size-md: 14px;
  --pbt-font-size-lg: 16px;
  --pbt-font-size-xl: 18px;

  /* border-radius */
  --pbt-border-radius-sm: 2px;
  --pbt-border-radius-md: 4px;
  --pbt-border-radius-lg: 8px;
  --pbt-border-radius-xl: 12px;
}

/* Component Colors Configure */
:root.dark {
  /* Color Palette */

  /* with alpha */
  /* rgba(var(--pbt-primary-color-rgb), alpha) */

  /* primary */
  --pbt-primary-color: #337efe;
  --pbt-primary-color-rgb: 51, 126, 254;
  --pbt-primary-color-1: #141b2c;
  --pbt-primary-color-1-rgb: 20, 27, 44;
  --pbt-primary-color-2: #172745;
  --pbt-primary-color-2-rgb: 23, 39, 69;
  --pbt-primary-color-3: #1d345a;
  --pbt-primary-color-3-rgb: 29, 52, 90;
  --pbt-primary-color-4: #22447d;
  --pbt-primary-color-4-rgb: 34, 68, 125;
  --pbt-primary-color-5: #2859ac;
  --pbt-primary-color-5-rgb: 40, 89, 172;
  --pbt-primary-color-6: #2e6edb;
  --pbt-primary-color-6-rgb: 46, 110, 219;
  --pbt-primary-color-7: #558fe8;
  --pbt-primary-color-7-rgb: 85, 143, 232;

  /* success */
  --pbt-success-color: #23c07a;
  --pbt-success-color-rgb: 35, 192, 122;
  --pbt-success-color-1: #12221c;
  --pbt-success-color-1-rgb: 18, 34, 28;
  --pbt-success-color-2: #143528;
  --pbt-success-color-2-rgb: 20, 53, 40;
  --pbt-success-color-3: #194833;
  --pbt-success-color-3-rgb: 25, 72, 51;
  --pbt-success-color-4: #1b6142;
  --pbt-success-color-4-rgb: 27, 97, 66;
  --pbt-success-color-5: #1e8456;
  --pbt-success-color-5-rgb: 30, 132, 86;
  --pbt-success-color-6: #21a66b;
  --pbt-success-color-6-rgb: 33, 166, 107;
  --pbt-success-color-7: #40ba7f;
  --pbt-success-color-7-rgb: 64, 186, 127;

  /* warning */
  --pbt-warning-color: #ffb549;
  --pbt-warning-color-rgb: 255, 181, 73;
  --pbt-warning-color-1: #2c2216;
  --pbt-warning-color-1-rgb: 44, 34, 22;
  --pbt-warning-color-2: #45331c;
  --pbt-warning-color-2-rgb: 69, 51, 28;
  --pbt-warning-color-3: #5b4424;
  --pbt-warning-color-3-rgb: 91, 68, 36;
  --pbt-warning-color-4: #7e5c2c;
  --pbt-warning-color-4-rgb: 126, 92, 44;
  --pbt-warning-color-5: #ad7d36;
  --pbt-warning-color-5-rgb: 173, 125, 54;
  --pbt-warning-color-6: #dc9d41;
  --pbt-warning-color-6-rgb: 220, 157, 65;
  --pbt-warning-color-7: #e8ba6a;
  --pbt-warning-color-7-rgb: 232, 186, 106;

  /* danger */
  --pbt-danger-color: #ff585d;
  --pbt-danger-color-rgb: 255, 88, 93;
  --pbt-danger-color-1: #2c181a;
  --pbt-danger-color-1-rgb: 44, 24, 26;
  --pbt-danger-color-2: #451f22;
  --pbt-danger-color-2-rgb: 69, 31, 34;
  --pbt-danger-color-3: #5b282a;
  --pbt-danger-color-3-rgb: 91, 40, 42;
  --pbt-danger-color-4: #7e3335;
  --pbt-danger-color-4-rgb: 126, 51, 53;
  --pbt-danger-color-5: #ad4043;
  --pbt-danger-color-5-rgb: 173, 64, 67;
  --pbt-danger-color-6: #dc4e52;
  --pbt-danger-color-6-rgb: 220, 78, 82;
  --pbt-danger-color-7: #e87777;
  --pbt-danger-color-7-rgb: 232, 119, 119;

  /* disabled */
  --pbt-disabled-color: #b9bdc6;
  --pbt-disabled-color-rgb: 185, 189, 198;
  --pbt-disabled-color-1: #202123;
  --pbt-disabled-color-1-rgb: 32, 33, 35;
  --pbt-disabled-color-2: #323437;
  --pbt-disabled-color-2-rgb: 50, 52, 55;
  --pbt-disabled-color-3: #464749;
  --pbt-disabled-color-3-rgb: 70, 71, 73;
  --pbt-disabled-color-4: #5e6064;
  --pbt-disabled-color-4-rgb: 94, 96, 100;
  --pbt-disabled-color-5: #7f8288;
  --pbt-disabled-color-5-rgb: 127, 130, 136;
  --pbt-disabled-color-6: #a0a4ab;
  --pbt-disabled-color-6-rgb: 160, 164, 171;
  --pbt-disabled-color-7: #b5b9c1;
  --pbt-disabled-color-7-rgb: 181, 185, 193;

  /* alert level */
  --pbt-alert-level-color-1: #0097f5;
  --pbt-alert-level-color-1-rgb: 0, 151, 245;
  --pbt-alert-level-color-2: #eaad06;
  --pbt-alert-level-color-2-rgb: 234, 173, 6;
  --pbt-alert-level-color-3: #ec6a32;
  --pbt-alert-level-color-3-rgb: 236, 106, 50;
  --pbt-alert-level-color-4: #f0383e;
  --pbt-alert-level-color-4-rgb: 240, 56, 62;
  --pbt-alert-level-color-5: #f0383e;
  --pbt-alert-level-color-5-rgb: 240, 56, 62;
  --pbt-alert-level-color-6: #f0383e;
  --pbt-alert-level-color-6-rgb: 240, 56, 62;

  /* colorful */
  --pbt-color-blue: #46b6fe;
  --pbt-color-blue-rgb: 70, 182, 254;
  --pbt-color-yellow: #fcc545;
  --pbt-color-yellow-rgb: 252, 197, 69;
  --pbt-color-purple: #db77f8;
  --pbt-color-purple-rgb: 219, 119, 248;
  --pbt-color-green: #50caca;
  --pbt-color-green-rgb: 80, 202, 202;
  --pbt-color-lightgreen: #5fc8aa;
  --pbt-color-lightgreen-rgb: 95, 200, 170;
  --pbt-color-red: #ff7ea6;
  --pbt-color-red-rgb: 255, 126, 166;
  --pbt-color-orange: #fc8e63;
  --pbt-color-orange-rgb: 252, 142, 99;
  --pbt-color-lightblue: #52d4f1;
  --pbt-color-lightblue-rgb: 82, 212, 241;

  /* active */
  --pbt-active-color: #ffffff;
  --pbt-active-color-rgb: 255, 255, 255;

  /* active background */
  --pbt-active-background-color: #222d3a;
  --pbt-active-background-color-rgb: 34, 45, 58;

  /* mask */
  --pbt-mask-color: #000000;
  --pbt-mask-color-rgb: 0, 0, 0;

  /* text */
  --pbt-text-color: #ffffff;
  --pbt-text-color-rgb: 255, 255, 255;
  --pbt-text-color-1: #dcdee2;
  --pbt-text-color-1-rgb: 220, 222, 226;
  --pbt-text-color-2: #b9bdc6;
  --pbt-text-color-2-rgb: 185, 189, 198;
  --pbt-text-color-3: #979daa;
  --pbt-text-color-3-rgb: 151, 157, 170;
  --pbt-text-color-4: #747c8e;
  --pbt-text-color-4-rgb: 116, 124, 142;

  /* background */
  --pbt-background-color: #161f29;
  --pbt-background-color-rgb: 22, 31, 41;
  --pbt-background-color-1: #0c1117;
  --pbt-background-color-1-rgb: 12, 17, 23;
  --pbt-background-color-2: #222d3a;
  --pbt-background-color-2-rgb: 34, 45, 58;
  --pbt-background-color-3: #293747;
  --pbt-background-color-3-rgb: 41, 55, 71;
  --pbt-background-color-4: #324357;
  --pbt-background-color-4-rgb: 50, 67, 87;

  /* border */
  --pbt-border-color: #323e4e;
  --pbt-border-color-rgb: 50, 62, 78;
  --pbt-border-color-1: #3e4d60;
  --pbt-border-color-1-rgb: 62, 77, 96;
  --pbt-border-color-2: #485a70;
  --pbt-border-color-2-rgb: 72, 90, 112;
  --pbt-border-color-3: #485a70;
  --pbt-border-color-3-rgb: 72, 90, 112;

  /* shadow */
  --pbt-shadow-color: #0c1117;
  --pbt-shadow-color-rgb: 12, 17, 23;
  --pbt-shadow-color-1: #0c1117;
  --pbt-shadow-color-1-rgb: 12, 17, 23;

  /* font */
  --pbt-font-size-xxs: 10px;
  --pbt-font-size-xs: 12px;
  --pbt-font-size-sm: 13px;
  --pbt-font-size-md: 14px;
  --pbt-font-size-lg: 16px;
  --pbt-font-size-xl: 18px;

  /* border-radius */
  --pbt-border-radius-sm: 2px;
  --pbt-border-radius-md: 4px;
  --pbt-border-radius-lg: 8px;
  --pbt-border-radius-xl: 12px;
}

/* Component Colors Configure */
:root.shade {
  /* Color Palette */

  /* with alpha */
  /* rgba(var(--pbt-primary-color-rgb), alpha) */

  /* primary */
  --pbt-primary-color: #337efe;
  --pbt-primary-color-rgb: 51, 126, 254;
  --pbt-primary-color-1: #f0f8ff;
  --pbt-primary-color-1-rgb: 240, 248, 255;
  --pbt-primary-color-2: #d6ebff;
  --pbt-primary-color-2-rgb: 214, 235, 255;
  --pbt-primary-color-3: #add3ff;
  --pbt-primary-color-3-rgb: 173, 211, 255;
  --pbt-primary-color-4: #85baff;
  --pbt-primary-color-4-rgb: 133, 186, 255;
  --pbt-primary-color-5: #5c9dff;
  --pbt-primary-color-5-rgb: 92, 157, 255;
  --pbt-primary-color-6: #337efe;
  --pbt-primary-color-6-rgb: 51, 126, 254;
  --pbt-primary-color-7: #215ed9;
  --pbt-primary-color-7-rgb: 33, 94, 217;

  /* success */
  --pbt-success-color: #23c079;
  --pbt-success-color-rgb: 35, 192, 121;
  --pbt-success-color-1: #f0fff6;
  --pbt-success-color-1-rgb: 240, 255, 246;
  --pbt-success-color-2: #c7f2d9;
  --pbt-success-color-2-rgb: 199, 242, 217;
  --pbt-success-color-3: #97e6bb;
  --pbt-success-color-3-rgb: 151, 230, 187;
  --pbt-success-color-4: #6cd9a1;
  --pbt-success-color-4-rgb: 108, 217, 161;
  --pbt-success-color-5: #45cc8b;
  --pbt-success-color-5-rgb: 69, 204, 139;
  --pbt-success-color-6: #23c079;
  --pbt-success-color-6-rgb: 35, 192, 121;
  --pbt-success-color-7: #149962;
  --pbt-success-color-7-rgb: 20, 153, 98;

  /* warning */
  --pbt-warning-color: #ff980f;
  --pbt-warning-color-rgb: 255, 152, 15;
  --pbt-warning-color-1: #fff8e6;
  --pbt-warning-color-1-rgb: 255, 248, 230;
  --pbt-warning-color-2: #ffe8b3;
  --pbt-warning-color-2-rgb: 255, 232, 179;
  --pbt-warning-color-3: #ffd88a;
  --pbt-warning-color-3-rgb: 255, 216, 138;
  --pbt-warning-color-4: #ffc561;
  --pbt-warning-color-4-rgb: 255, 197, 97;
  --pbt-warning-color-5: #ffaf38;
  --pbt-warning-color-5-rgb: 255, 175, 56;
  --pbt-warning-color-6: #ff980f;
  --pbt-warning-color-6-rgb: 255, 152, 15;
  --pbt-warning-color-7: #d97502;
  --pbt-warning-color-7-rgb: 217, 117, 2;

  /* danger */
  --pbt-danger-color: #ff595d;
  --pbt-danger-color-rgb: 255, 89, 93;
  --pbt-danger-color-1: #fff2f0;
  --pbt-danger-color-1-rgb: 255, 242, 240;
  --pbt-danger-color-2: #fff1f0;
  --pbt-danger-color-2-rgb: 255, 241, 240;
  --pbt-danger-color-3: #ffd7d4;
  --pbt-danger-color-3-rgb: 255, 215, 212;
  --pbt-danger-color-4: #ffafab;
  --pbt-danger-color-4-rgb: 255, 175, 171;
  --pbt-danger-color-5: #ff8482;
  --pbt-danger-color-5-rgb: 255, 132, 130;
  --pbt-danger-color-6: #ff595d;
  --pbt-danger-color-6-rgb: 255, 89, 93;
  --pbt-danger-color-7: #d94149;
  --pbt-danger-color-7-rgb: 217, 65, 73;

  /* disabled */
  --pbt-disabled-color: #afafaf;
  --pbt-disabled-color-rgb: 175, 175, 175;
  --pbt-disabled-color-1: #f0f0f0;
  --pbt-disabled-color-1-rgb: 240, 240, 240;
  --pbt-disabled-color-2: #e3e3e3;
  --pbt-disabled-color-2-rgb: 227, 227, 227;
  --pbt-disabled-color-3: #d6d6d6;
  --pbt-disabled-color-3-rgb: 214, 214, 214;
  --pbt-disabled-color-4: #c9c9c9;
  --pbt-disabled-color-4-rgb: 201, 201, 201;
  --pbt-disabled-color-5: #bdbdbd;
  --pbt-disabled-color-5-rgb: 189, 189, 189;
  --pbt-disabled-color-6: #afafaf;
  --pbt-disabled-color-6-rgb: 175, 175, 175;
  --pbt-disabled-color-7: #8a8a8a;
  --pbt-disabled-color-7-rgb: 138, 138, 138;

  /* alert level */
  --pbt-alert-level-color-1: #0097f5;
  --pbt-alert-level-color-1-rgb: 0, 151, 245;
  --pbt-alert-level-color-2: #eaad06;
  --pbt-alert-level-color-2-rgb: 234, 173, 6;
  --pbt-alert-level-color-3: #ec6a32;
  --pbt-alert-level-color-3-rgb: 236, 106, 50;
  --pbt-alert-level-color-4: #f0383e;
  --pbt-alert-level-color-4-rgb: 240, 56, 62;
  --pbt-alert-level-color-5: #f0383e;
  --pbt-alert-level-color-5-rgb: 240, 56, 62;
  --pbt-alert-level-color-6: #f0383e;
  --pbt-alert-level-color-6-rgb: 240, 56, 62;

  /* colorful */
  --pbt-color-blue: #46b6fe;
  --pbt-color-blue-rgb: 70, 182, 254;
  --pbt-color-yellow: #ffcc66;
  --pbt-color-yellow-rgb: 255, 204, 102;
  --pbt-color-purple: #d767f7;
  --pbt-color-purple-rgb: 215, 103, 247;
  --pbt-color-green: #3cc4c4;
  --pbt-color-green-rgb: 60, 196, 196;
  --pbt-color-lightgreen: #2ecca9;
  --pbt-color-lightgreen-rgb: 46, 204, 169;
  --pbt-color-red: #f85c8b;
  --pbt-color-red-rgb: 248, 92, 139;
  --pbt-color-orange: #fb8152;
  --pbt-color-orange-rgb: 251, 129, 82;
  --pbt-color-lightblue: #33d5f9;
  --pbt-color-lightblue-rgb: 51, 213, 249;

  /* active */
  --pbt-active-color: #fff;
  --pbt-active-color-rgb: 255, 255, 255;

  /* active background */
  --pbt-active-background-color: #222222;
  --pbt-active-background-color-rgb: 34, 34, 34;

  /* mask */
  --pbt-mask-color: #000000;
  --pbt-mask-color-rgb: 0, 0, 0;

  /* text */
  --pbt-text-color: #222222;
  --pbt-text-color-rgb: 34, 34, 34;
  --pbt-text-color-1: #444444;
  --pbt-text-color-1-rgb: 68, 68, 68;
  --pbt-text-color-2: #666666;
  --pbt-text-color-2-rgb: 102, 102, 102;
  --pbt-text-color-3: #999999;
  --pbt-text-color-3-rgb: 153, 153, 153;
  --pbt-text-color-4: #b5b5b5;
  --pbt-text-color-4-rgb: 181, 181, 181;

  /* background */
  --pbt-background-color: #fff;
  --pbt-background-color-rgb: 255, 255, 255;
  --pbt-background-color-1: #e0e0e0;
  --pbt-background-color-1-rgb: 224, 224, 224;
  --pbt-background-color-2: #d6d6d6;
  --pbt-background-color-2-rgb: 214, 214, 214;
  --pbt-background-color-3: #cccccc;
  --pbt-background-color-3-rgb: 204, 204, 204;
  --pbt-background-color-4: #c2c2c2;
  --pbt-background-color-4-rgb: 194, 194, 194;

  /* border */
  --pbt-border-color: #d1d1d1;
  --pbt-border-color-rgb: 209, 209, 209;
  --pbt-border-color-1: #c7c7c7;
  --pbt-border-color-1-rgb: 199, 199, 199;
  --pbt-border-color-2: #bdbdbd;
  --pbt-border-color-2-rgb: 189, 189, 189;
  --pbt-border-color-3: #b3b3b3;
  --pbt-border-color-3-rgb: 179, 179, 179;

  /* shadow */
  --pbt-shadow-color: #a3a3a3;
  --pbt-shadow-color-rgb: 163, 163, 163;
  --pbt-shadow-color-1: #0f0f0f;
  --pbt-shadow-color-1-rgb: 15, 15, 15;

  /* font */
  --pbt-font-size-xxs: 10px;
  --pbt-font-size-xs: 12px;
  --pbt-font-size-sm: 13px;
  --pbt-font-size-md: 14px;
  --pbt-font-size-lg: 16px;
  --pbt-font-size-xl: 18px;

  /* border-radius */
  --pbt-border-radius-sm: 2px;
  --pbt-border-radius-md: 4px;
  --pbt-border-radius-lg: 8px;
  --pbt-border-radius-xl: 10px;
}

/* Component Colors Configure */
:root.deepblue {
  /* Color Palette */

  /* with alpha */
  /* rgba(var(--pbt-primary-color-rgb), alpha) */

  /* primary */
  --pbt-primary-color: #215bbc;
  --pbt-primary-color-rgb: 33, 91, 188;
  --pbt-primary-color-1: #edf5fc;
  --pbt-primary-color-1-rgb: 237, 245, 252;
  --pbt-primary-color-2: #c5daf0;
  --pbt-primary-color-2-rgb: 197, 218, 240;
  --pbt-primary-color-3: #96bae3;
  --pbt-primary-color-3-rgb: 150, 186, 227;
  --pbt-primary-color-4: #6b9ad6;
  --pbt-primary-color-4-rgb: 107, 154, 214;
  --pbt-primary-color-5: #447ac9;
  --pbt-primary-color-5-rgb: 68, 122, 201;
  --pbt-primary-color-6: #215bbc;
  --pbt-primary-color-6-rgb: 33, 91, 188;
  --pbt-primary-color-7: #143f96;
  --pbt-primary-color-7-rgb: 20, 63, 150;

  /* success */
  --pbt-success-color: #20ad6e;
  --pbt-success-color-rgb: 32, 173, 110;
  --pbt-success-color-1: #dfede4;
  --pbt-success-color-1-rgb: 223, 237, 228;
  --pbt-success-color-2: #b8e0c9;
  --pbt-success-color-2-rgb: 184, 224, 201;
  --pbt-success-color-3: #8cd4ac;
  --pbt-success-color-3-rgb: 140, 212, 172;
  --pbt-success-color-4: #63c794;
  --pbt-success-color-4-rgb: 99, 199, 148;
  --pbt-success-color-5: #3fba7f;
  --pbt-success-color-5-rgb: 63, 186, 127;
  --pbt-success-color-6: #20ad6e;
  --pbt-success-color-6-rgb: 32, 173, 110;
  --pbt-success-color-7: #128756;
  --pbt-success-color-7-rgb: 18, 135, 86;

  /* warning */
  --pbt-warning-color: #e6a342;
  --pbt-warning-color-rgb: 230, 163, 66;
  --pbt-warning-color-1: #fffbf0;
  --pbt-warning-color-1-rgb: 255, 251, 240;
  --pbt-warning-color-2: #fffaed;
  --pbt-warning-color-2-rgb: 255, 250, 237;
  --pbt-warning-color-3: #ffecc4;
  --pbt-warning-color-3-rgb: 255, 236, 196;
  --pbt-warning-color-4: #ffdc9c;
  --pbt-warning-color-4-rgb: 255, 220, 156;
  --pbt-warning-color-5: #f2bf6d;
  --pbt-warning-color-5-rgb: 242, 191, 109;
  --pbt-warning-color-6: #e6a342;
  --pbt-warning-color-6-rgb: 230, 163, 66;
  --pbt-warning-color-7: #bf7e2e;
  --pbt-warning-color-7-rgb: 191, 126, 46;

  /* danger */
  --pbt-danger-color: #e64f54;
  --pbt-danger-color-rgb: 230, 79, 84;
  --pbt-danger-color-1: #fff2f0;
  --pbt-danger-color-1-rgb: 255, 242, 240;
  --pbt-danger-color-2: #fff1f0;
  --pbt-danger-color-2-rgb: 255, 241, 240;
  --pbt-danger-color-3: #ffd4d1;
  --pbt-danger-color-3-rgb: 255, 212, 209;
  --pbt-danger-color-4: #ffaba8;
  --pbt-danger-color-4-rgb: 255, 171, 168;
  --pbt-danger-color-5: #f27979;
  --pbt-danger-color-5-rgb: 242, 121, 121;
  --pbt-danger-color-6: #e64f54;
  --pbt-danger-color-6-rgb: 230, 79, 84;
  --pbt-danger-color-7: #bf3741;
  --pbt-danger-color-7-rgb: 191, 55, 65;

  /* disabled */
  --pbt-disabled-color: #b9bdc6;
  --pbt-disabled-color-rgb: 185, 189, 198;
  --pbt-disabled-color-1: #f0f7ff;
  --pbt-disabled-color-1-rgb: 240, 247, 255;
  --pbt-disabled-color-2: #ebf1fa;
  --pbt-disabled-color-2-rgb: 235, 241, 250;
  --pbt-disabled-color-3: #dfe5ed;
  --pbt-disabled-color-3-rgb: 223, 229, 237;
  --pbt-disabled-color-4: #d3d8e0;
  --pbt-disabled-color-4-rgb: 211, 216, 224;
  --pbt-disabled-color-5: #c7cbd4;
  --pbt-disabled-color-5-rgb: 199, 203, 212;
  --pbt-disabled-color-6: #b9bdc6;
  --pbt-disabled-color-6-rgb: 185, 189, 198;
  --pbt-disabled-color-7: #8d93a1;
  --pbt-disabled-color-7-rgb: 141, 147, 161;

  /* alert level */
  --pbt-alert-level-color-1: #0097f5;
  --pbt-alert-level-color-1-rgb: 0, 151, 245;
  --pbt-alert-level-color-2: #eaad06;
  --pbt-alert-level-color-2-rgb: 234, 173, 6;
  --pbt-alert-level-color-3: #ec6a32;
  --pbt-alert-level-color-3-rgb: 236, 106, 50;
  --pbt-alert-level-color-4: #f0383e;
  --pbt-alert-level-color-4-rgb: 240, 56, 62;
  --pbt-alert-level-color-5: #f0383e;
  --pbt-alert-level-color-5-rgb: 240, 56, 62;
  --pbt-alert-level-color-6: #f0383e;
  --pbt-alert-level-color-6-rgb: 240, 56, 62;
  --pbt-alert-level-color-7: undefined;
  --pbt-alert-level-color-7-rgb: undefined;

  /* colorful */
  --pbt-color-blue: #3fa5e6;
  --pbt-color-blue-rgb: 63, 165, 230;
  --pbt-color-yellow: #e6b33f;
  --pbt-color-yellow-rgb: 230, 179, 63;
  --pbt-color-purple: #bd67d6;
  --pbt-color-purple-rgb: 189, 103, 214;
  --pbt-color-green: #47b3b3;
  --pbt-color-green-rgb: 71, 179, 179;
  --pbt-color-lightgreen: #2bbd9c;
  --pbt-color-lightgreen-rgb: 43, 189, 156;
  --pbt-color-red: #eb7499;
  --pbt-color-red-rgb: 235, 116, 153;
  --pbt-color-orange: #e6815a;
  --pbt-color-orange-rgb: 230, 129, 90;
  --pbt-color-lightblue: #47b8d1;
  --pbt-color-lightblue-rgb: 71, 184, 209;

  /* active */
  --pbt-active-color: #ffffff;
  --pbt-active-color-rgb: 255, 255, 255;

  /* active background */
  --pbt-active-background-color: #26324e;
  --pbt-active-background-color-rgb: 38, 50, 78;

  /* mask */
  --pbt-mask-color: #000000;
  --pbt-mask-color-rgb: 0, 0, 0;

  /* text */
  --pbt-text-color: #26324e;
  --pbt-text-color-rgb: 38, 50, 78;
  --pbt-text-color-1: #747c8e;
  --pbt-text-color-1-rgb: 116, 124, 142;
  --pbt-text-color-2: #979daa;
  --pbt-text-color-2-rgb: 151, 157, 170;
  --pbt-text-color-3: #b9bdc6;
  --pbt-text-color-3-rgb: 185, 189, 198;
  --pbt-text-color-4: #dcdee2;
  --pbt-text-color-4-rgb: 220, 222, 226;

  /* background */
  --pbt-background-color: #ffffff;
  --pbt-background-color-rgb: 255, 255, 255;
  --pbt-background-color-1: #f3f7ff;
  --pbt-background-color-1-rgb: 243, 247, 255;
  --pbt-background-color-2: #eef1f7;
  --pbt-background-color-2-rgb: 238, 241, 247;
  --pbt-background-color-3: #e5eaf2;
  --pbt-background-color-3-rgb: 229, 234, 242;
  --pbt-background-color-4: #dce2ea;
  --pbt-background-color-4-rgb: 220, 226, 234;

  /* border */
  --pbt-border-color: #eaebee;
  --pbt-border-color-rgb: 234, 235, 238;
  --pbt-border-color-1: #eaeef7;
  --pbt-border-color-1-rgb: 234, 238, 247;
  --pbt-border-color-2: #d8deeb;
  --pbt-border-color-2-rgb: 216, 222, 235;
  --pbt-border-color-3: #d8deeb;
  --pbt-border-color-3-rgb: 216, 222, 235;

  /* shadow */
  --pbt-shadow-color: #8fa5c4;
  --pbt-shadow-color-rgb: 143, 165, 196;
  --pbt-shadow-color-1: #26324e;
  --pbt-shadow-color-1-rgb: 38, 50, 78;

  /* font */
  --pbt-font-size-xxs: 10px;
  --pbt-font-size-xs: 12px;
  --pbt-font-size-sm: 13px;
  --pbt-font-size-md: 14px;
  --pbt-font-size-lg: 16px;
  --pbt-font-size-xl: 18px;

  /* border-radius */
  --pbt-border-radius-sm: 3px;
  --pbt-border-radius-md: 5px;
  --pbt-border-radius-lg: 8px;
  --pbt-border-radius-xl: 10px;
}

/* Component Colors Configure */
:root.green {
  /* Color Palette */

  /* with alpha */
  /* rgba(var(--pbt-primary-color-rgb), alpha) */

  /* primary */
  --pbt-primary-color: #0b8279;
  --pbt-primary-color-rgb: 11, 130, 121;
  --pbt-primary-color-1: #aec2bd;
  --pbt-primary-color-1-rgb: 174, 194, 189;
  --pbt-primary-color-2: #82b5aa;
  --pbt-primary-color-2-rgb: 130, 181, 170;
  --pbt-primary-color-3: #5ea89b;
  --pbt-primary-color-3-rgb: 94, 168, 155;
  --pbt-primary-color-4: #3e9c8e;
  --pbt-primary-color-4-rgb: 62, 156, 142;
  --pbt-primary-color-5: #228f82;
  --pbt-primary-color-5-rgb: 34, 143, 130;
  --pbt-primary-color-6: #0b8279;
  --pbt-primary-color-6-rgb: 11, 130, 121;
  --pbt-primary-color-7: #035c57;
  --pbt-primary-color-7-rgb: 3, 92, 87;

  /* success */
  --pbt-success-color: #20ad6e;
  --pbt-success-color-rgb: 32, 173, 110;
  --pbt-success-color-1: #dfede4;
  --pbt-success-color-1-rgb: 223, 237, 228;
  --pbt-success-color-2: #b8e0c9;
  --pbt-success-color-2-rgb: 184, 224, 201;
  --pbt-success-color-3: #8cd4ac;
  --pbt-success-color-3-rgb: 140, 212, 172;
  --pbt-success-color-4: #63c794;
  --pbt-success-color-4-rgb: 99, 199, 148;
  --pbt-success-color-5: #3fba7f;
  --pbt-success-color-5-rgb: 63, 186, 127;
  --pbt-success-color-6: #20ad6e;
  --pbt-success-color-6-rgb: 32, 173, 110;
  --pbt-success-color-7: #128756;
  --pbt-success-color-7-rgb: 18, 135, 86;

  /* warning */
  --pbt-warning-color: #e6a342;
  --pbt-warning-color-rgb: 230, 163, 66;
  --pbt-warning-color-1: #fffbf0;
  --pbt-warning-color-1-rgb: 255, 251, 240;
  --pbt-warning-color-2: #fffaed;
  --pbt-warning-color-2-rgb: 255, 250, 237;
  --pbt-warning-color-3: #ffecc4;
  --pbt-warning-color-3-rgb: 255, 236, 196;
  --pbt-warning-color-4: #ffdc9c;
  --pbt-warning-color-4-rgb: 255, 220, 156;
  --pbt-warning-color-5: #f2bf6d;
  --pbt-warning-color-5-rgb: 242, 191, 109;
  --pbt-warning-color-6: #e6a342;
  --pbt-warning-color-6-rgb: 230, 163, 66;
  --pbt-warning-color-7: #bf7e2e;
  --pbt-warning-color-7-rgb: 191, 126, 46;

  /* danger */
  --pbt-danger-color: #e64f54;
  --pbt-danger-color-rgb: 230, 79, 84;
  --pbt-danger-color-1: #fff2f0;
  --pbt-danger-color-1-rgb: 255, 242, 240;
  --pbt-danger-color-2: #fff1f0;
  --pbt-danger-color-2-rgb: 255, 241, 240;
  --pbt-danger-color-3: #ffd4d1;
  --pbt-danger-color-3-rgb: 255, 212, 209;
  --pbt-danger-color-4: #ffaba8;
  --pbt-danger-color-4-rgb: 255, 171, 168;
  --pbt-danger-color-5: #f27979;
  --pbt-danger-color-5-rgb: 242, 121, 121;
  --pbt-danger-color-6: #e64f54;
  --pbt-danger-color-6-rgb: 230, 79, 84;
  --pbt-danger-color-7: #bf3741;
  --pbt-danger-color-7-rgb: 191, 55, 65;

  /* disabled */
  --pbt-disabled-color: #c2c6c6;
  --pbt-disabled-color-rgb: 194, 198, 198;
  --pbt-disabled-color-1: #f0fffc;
  --pbt-disabled-color-1-rgb: 240, 255, 252;
  --pbt-disabled-color-2: #ebfaf8;
  --pbt-disabled-color-2-rgb: 235, 250, 248;
  --pbt-disabled-color-3: #dfedec;
  --pbt-disabled-color-3-rgb: 223, 237, 236;
  --pbt-disabled-color-4: #d3e0e0;
  --pbt-disabled-color-4-rgb: 211, 224, 224;
  --pbt-disabled-color-5: #c7d4d3;
  --pbt-disabled-color-5-rgb: 199, 212, 211;
  --pbt-disabled-color-6: #c2c6c6;
  --pbt-disabled-color-6-rgb: 194, 198, 198;
  --pbt-disabled-color-7: #95a0a1;
  --pbt-disabled-color-7-rgb: 149, 160, 161;

  /* alert level */
  --pbt-alert-level-color-1: #0097f5;
  --pbt-alert-level-color-1-rgb: 0, 151, 245;
  --pbt-alert-level-color-2: #eaad06;
  --pbt-alert-level-color-2-rgb: 234, 173, 6;
  --pbt-alert-level-color-3: #ec6a32;
  --pbt-alert-level-color-3-rgb: 236, 106, 50;
  --pbt-alert-level-color-4: #f0383e;
  --pbt-alert-level-color-4-rgb: 240, 56, 62;
  --pbt-alert-level-color-5: #f0383e;
  --pbt-alert-level-color-5-rgb: 240, 56, 62;
  --pbt-alert-level-color-6: #f0383e;
  --pbt-alert-level-color-6-rgb: 240, 56, 62;
  --pbt-alert-level-color-7: undefined;
  --pbt-alert-level-color-7-rgb: undefined;

  /* colorful */
  --pbt-color-blue: #3fa5e6;
  --pbt-color-blue-rgb: 63, 165, 230;
  --pbt-color-yellow: #e6b33f;
  --pbt-color-yellow-rgb: 230, 179, 63;
  --pbt-color-purple: #bd67d6;
  --pbt-color-purple-rgb: 189, 103, 214;
  --pbt-color-green: #47b3b3;
  --pbt-color-green-rgb: 71, 179, 179;
  --pbt-color-lightgreen: #8cd4ac;
  --pbt-color-lightgreen-rgb: 140, 212, 172;
  --pbt-color-red: #eb7499;
  --pbt-color-red-rgb: 235, 116, 153;
  --pbt-color-orange: #e6815a;
  --pbt-color-orange-rgb: 230, 129, 90;
  --pbt-color-lightblue: #47b8d1;
  --pbt-color-lightblue-rgb: 71, 184, 209;

  /* active */
  --pbt-active-color: #ffffff;
  --pbt-active-color-rgb: 255, 255, 255;

  /* active background */
  --pbt-active-background-color: #283332;
  --pbt-active-background-color-rgb: 40, 51, 50;

  /* mask */
  --pbt-mask-color: #000000;
  --pbt-mask-color-rgb: 0, 0, 0;

  /* text */
  --pbt-text-color: #283332;
  --pbt-text-color-rgb: 40, 51, 50;
  --pbt-text-color-1: #73807f;
  --pbt-text-color-1-rgb: 115, 128, 127;
  --pbt-text-color-2: #99a3a3;
  --pbt-text-color-2-rgb: 153, 163, 163;
  --pbt-text-color-3: #c2c6c6;
  --pbt-text-color-3-rgb: 194, 198, 198;
  --pbt-text-color-4: #d6dada;
  --pbt-text-color-4-rgb: 214, 218, 218;

  /* background */
  --pbt-background-color: #ffffff;
  --pbt-background-color-rgb: 255, 255, 255;
  --pbt-background-color-1: #f0f5f4;
  --pbt-background-color-1-rgb: 240, 245, 244;
  --pbt-background-color-2: #f2f7f7;
  --pbt-background-color-2-rgb: 242, 247, 247;
  --pbt-background-color-3: #d7e0e0;
  --pbt-background-color-3-rgb: 215, 224, 224;
  --pbt-background-color-4: #d7e0e0;
  --pbt-background-color-4-rgb: 215, 224, 224;

  /* border */
  --pbt-border-color: #eaeeee;
  --pbt-border-color-rgb: 234, 238, 238;
  --pbt-border-color-1: #d3dbdb;
  --pbt-border-color-1-rgb: 211, 219, 219;
  --pbt-border-color-2: #d3dbdb;
  --pbt-border-color-2-rgb: 211, 219, 219;
  --pbt-border-color-3: #d3dbdb;
  --pbt-border-color-3-rgb: 211, 219, 219;

  /* shadow */
  --pbt-shadow-color: #8da3a2;
  --pbt-shadow-color-rgb: 141, 163, 162;
  --pbt-shadow-color-1: #8da3a2;
  --pbt-shadow-color-1-rgb: 141, 163, 162;

  /* font */
  --pbt-font-size-xxs: 10px;
  --pbt-font-size-xs: 12px;
  --pbt-font-size-sm: 13px;
  --pbt-font-size-md: 14px;
  --pbt-font-size-lg: 16px;
  --pbt-font-size-xl: 18px;

  /* border-radius */
  --pbt-border-radius-sm: 2px;
  --pbt-border-radius-md: 4px;
  --pbt-border-radius-lg: 8px;
  --pbt-border-radius-xl: 10px;
}

/* Component Colors Configure */
:root.lightblue {
  /* Color Palette */

  /* with alpha */
  /* rgba(var(--pbt-primary-color-rgb), alpha) */

  /* primary */
  --pbt-primary-color: #1e99e6;
  --pbt-primary-color-rgb: 30, 153, 230;
  --pbt-primary-color-1: #edfbff;
  --pbt-primary-color-1-rgb: 237, 251, 255;
  --pbt-primary-color-2: #c4f0ff;
  --pbt-primary-color-2-rgb: 196, 240, 255;
  --pbt-primary-color-3: #9ce3ff;
  --pbt-primary-color-3-rgb: 156, 227, 255;
  --pbt-primary-color-4: #73d3ff;
  --pbt-primary-color-4-rgb: 115, 211, 255;
  --pbt-primary-color-5: #46b6f2;
  --pbt-primary-color-5-rgb: 70, 182, 242;
  --pbt-primary-color-6: #1e99e6;
  --pbt-primary-color-6-rgb: 30, 153, 230;
  --pbt-primary-color-7: #0f76bf;
  --pbt-primary-color-7-rgb: 15, 118, 191;

  /* success */
  --pbt-success-color: #23c07a;
  --pbt-success-color-rgb: 35, 192, 122;
  --pbt-success-color-1: #f0fff6;
  --pbt-success-color-1-rgb: 240, 255, 246;
  --pbt-success-color-2: #c7f2d9;
  --pbt-success-color-2-rgb: 199, 242, 217;
  --pbt-success-color-3: #97e6bb;
  --pbt-success-color-3-rgb: 151, 230, 187;
  --pbt-success-color-4: #6cd9a1;
  --pbt-success-color-4-rgb: 108, 217, 161;
  --pbt-success-color-5: #45cc8b;
  --pbt-success-color-5-rgb: 69, 204, 139;
  --pbt-success-color-6: #23c07a;
  --pbt-success-color-6-rgb: 35, 192, 122;
  --pbt-success-color-7: #149962;
  --pbt-success-color-7-rgb: 20, 153, 98;

  /* warning */
  --pbt-warning-color: #ffb549;
  --pbt-warning-color-rgb: 255, 181, 73;
  --pbt-warning-color-1: #fffbf0;
  --pbt-warning-color-1-rgb: 255, 251, 240;
  --pbt-warning-color-2: #fffaed;
  --pbt-warning-color-2-rgb: 255, 250, 237;
  --pbt-warning-color-3: #ffedc4;
  --pbt-warning-color-3-rgb: 255, 237, 196;
  --pbt-warning-color-4: #ffde9c;
  --pbt-warning-color-4-rgb: 255, 222, 156;
  --pbt-warning-color-5: #ffcc73;
  --pbt-warning-color-5-rgb: 255, 204, 115;
  --pbt-warning-color-6: #ffb549;
  --pbt-warning-color-6-rgb: 255, 181, 73;
  --pbt-warning-color-7: #d99134;
  --pbt-warning-color-7-rgb: 217, 145, 52;

  /* danger */
  --pbt-danger-color: #ff585d;
  --pbt-danger-color-rgb: 255, 88, 93;
  --pbt-danger-color-1: #fff2f0;
  --pbt-danger-color-1-rgb: 255, 242, 240;
  --pbt-danger-color-2: #fff1f0;
  --pbt-danger-color-2-rgb: 255, 241, 240;
  --pbt-danger-color-3: #ffd7d4;
  --pbt-danger-color-3-rgb: 255, 215, 212;
  --pbt-danger-color-4: #ffaeab;
  --pbt-danger-color-4-rgb: 255, 174, 171;
  --pbt-danger-color-5: #ff8282;
  --pbt-danger-color-5-rgb: 255, 130, 130;
  --pbt-danger-color-6: #ff585d;
  --pbt-danger-color-6-rgb: 255, 88, 93;
  --pbt-danger-color-7: #d9414b;
  --pbt-danger-color-7-rgb: 217, 65, 75;

  /* disabled */
  --pbt-disabled-color: #b9c1c6;
  --pbt-disabled-color-rgb: 185, 193, 198;
  --pbt-disabled-color-1: #f0fcff;
  --pbt-disabled-color-1-rgb: 240, 252, 255;
  --pbt-disabled-color-2: #ebf6fa;
  --pbt-disabled-color-2-rgb: 235, 246, 250;
  --pbt-disabled-color-3: #dfe9ed;
  --pbt-disabled-color-3-rgb: 223, 233, 237;
  --pbt-disabled-color-4: #d3dce0;
  --pbt-disabled-color-4-rgb: 211, 220, 224;
  --pbt-disabled-color-5: #c7cfd4;
  --pbt-disabled-color-5-rgb: 199, 207, 212;
  --pbt-disabled-color-6: #b9c1c6;
  --pbt-disabled-color-6-rgb: 185, 193, 198;
  --pbt-disabled-color-7: #8d99a1;
  --pbt-disabled-color-7-rgb: 141, 153, 161;

  /* alert level */
  --pbt-alert-level-color-1: #0097f5;
  --pbt-alert-level-color-1-rgb: 0, 151, 245;
  --pbt-alert-level-color-2: #eaad06;
  --pbt-alert-level-color-2-rgb: 234, 173, 6;
  --pbt-alert-level-color-3: #ec6a32;
  --pbt-alert-level-color-3-rgb: 236, 106, 50;
  --pbt-alert-level-color-4: #f0383e;
  --pbt-alert-level-color-4-rgb: 240, 56, 62;
  --pbt-alert-level-color-5: #f0383e;
  --pbt-alert-level-color-5-rgb: 240, 56, 62;
  --pbt-alert-level-color-6: #f0383e;
  --pbt-alert-level-color-6-rgb: 240, 56, 62;

  /* colorful */
  --pbt-color-blue: #478bff;
  --pbt-color-blue-rgb: 71, 139, 255;
  --pbt-color-yellow: #fcc545;
  --pbt-color-yellow-rgb: 252, 197, 69;
  --pbt-color-purple: #db77f8;
  --pbt-color-purple-rgb: 219, 119, 248;
  --pbt-color-green: #50caca;
  --pbt-color-green-rgb: 80, 202, 202;
  --pbt-color-lightgreen: #2ecca9;
  --pbt-color-lightgreen-rgb: 46, 204, 169;
  --pbt-color-red: #ff7ea6;
  --pbt-color-red-rgb: 255, 126, 166;
  --pbt-color-orange: #fc8e63;
  --pbt-color-orange-rgb: 252, 142, 99;
  --pbt-color-lightblue: #52d4f1;
  --pbt-color-lightblue-rgb: 82, 212, 241;

  /* active */
  --pbt-active-color: #ffffff;
  --pbt-active-color-rgb: 255, 255, 255;

  /* active background */
  --pbt-active-background-color: #202a31;
  --pbt-active-background-color-rgb: 32, 42, 49;

  /* mask */
  --pbt-mask-color: #000000;
  --pbt-mask-color-rgb: 0, 0, 0;

  /* text */
  --pbt-text-color: #202a31;
  --pbt-text-color-rgb: 32, 42, 49;
  --pbt-text-color-1: #657179;
  --pbt-text-color-1-rgb: 101, 113, 121;
  --pbt-text-color-2: #94a0a7;
  --pbt-text-color-2-rgb: 148, 160, 167;
  --pbt-text-color-3: #b9c1c6;
  --pbt-text-color-3-rgb: 185, 193, 198;
  --pbt-text-color-4: #dce0e2;
  --pbt-text-color-4-rgb: 220, 224, 226;

  /* background */
  --pbt-background-color: #ffffff;
  --pbt-background-color-rgb: 255, 255, 255;
  --pbt-background-color-1: #f3faff;
  --pbt-background-color-1-rgb: 243, 250, 255;
  --pbt-background-color-2: #eef4f7;
  --pbt-background-color-2-rgb: 238, 244, 247;
  --pbt-background-color-3: #e5edf2;
  --pbt-background-color-3-rgb: 229, 237, 242;
  --pbt-background-color-4: #dce5ea;
  --pbt-background-color-4-rgb: 220, 229, 234;

  /* border */
  --pbt-border-color: #dfebf2;
  --pbt-border-color-rgb: 223, 235, 242;
  --pbt-border-color-1: #d8e4eb;
  --pbt-border-color-1-rgb: 216, 228, 235;
  --pbt-border-color-2: #cfdde6;
  --pbt-border-color-2-rgb: 207, 221, 230;
  --pbt-border-color-3: #cfdde6;
  --pbt-border-color-3-rgb: 207, 221, 230;

  /* shadow */
  --pbt-shadow-color: #8fb0c4;
  --pbt-shadow-color-rgb: 143, 176, 196;
  --pbt-shadow-color-1: #202a31;
  --pbt-shadow-color-1-rgb: 32, 42, 49;

  /* font */
  --pbt-font-size-xxs: 10px;
  --pbt-font-size-xs: 12px;
  --pbt-font-size-sm: 13px;
  --pbt-font-size-md: 14px;
  --pbt-font-size-lg: 16px;
  --pbt-font-size-xl: 18px;

  /* border-radius */
  --pbt-border-radius-sm: 2px;
  --pbt-border-radius-md: 4px;
  --pbt-border-radius-lg: 8px;
  --pbt-border-radius-xl: 12px;
}

/* Component Colors Configure */
:root.orange {
  /* Color Palette */

  /* with alpha */
  /* rgba(var(--pbt-primary-color-rgb), alpha) */

  /* primary */
  --pbt-primary-color: #f0690f;
  --pbt-primary-color-rgb: 240, 105, 15;
  --pbt-primary-color-1: #fff4e6;
  --pbt-primary-color-1-rgb: 255, 244, 230;
  --pbt-primary-color-2: #ffdbb3;
  --pbt-primary-color-2-rgb: 255, 219, 179;
  --pbt-primary-color-3: #ffc48a;
  --pbt-primary-color-3-rgb: 255, 196, 138;
  --pbt-primary-color-4: #ffab61;
  --pbt-primary-color-4-rgb: 255, 171, 97;
  --pbt-primary-color-5: #fc8d38;
  --pbt-primary-color-5-rgb: 252, 141, 56;
  --pbt-primary-color-6: #f0690f;
  --pbt-primary-color-6-rgb: 240, 105, 15;
  --pbt-primary-color-7: #c94b02;
  --pbt-primary-color-7-rgb: 201, 75, 2;

  /* success */
  --pbt-success-color: #23c07a;
  --pbt-success-color-rgb: 35, 192, 122;
  --pbt-success-color-1: #f0fff6;
  --pbt-success-color-1-rgb: 240, 255, 246;
  --pbt-success-color-2: #c7f2d9;
  --pbt-success-color-2-rgb: 199, 242, 217;
  --pbt-success-color-3: #97e6bb;
  --pbt-success-color-3-rgb: 151, 230, 187;
  --pbt-success-color-4: #6cd9a1;
  --pbt-success-color-4-rgb: 108, 217, 161;
  --pbt-success-color-5: #45cc8b;
  --pbt-success-color-5-rgb: 69, 204, 139;
  --pbt-success-color-6: #23c07a;
  --pbt-success-color-6-rgb: 35, 192, 122;
  --pbt-success-color-7: #149962;
  --pbt-success-color-7-rgb: 20, 153, 98;

  /* warning */
  --pbt-warning-color: #ffb549;
  --pbt-warning-color-rgb: 255, 181, 73;
  --pbt-warning-color-1: #fffbf0;
  --pbt-warning-color-1-rgb: 255, 251, 240;
  --pbt-warning-color-2: #fffaed;
  --pbt-warning-color-2-rgb: 255, 250, 237;
  --pbt-warning-color-3: #ffedc4;
  --pbt-warning-color-3-rgb: 255, 237, 196;
  --pbt-warning-color-4: #ffde9c;
  --pbt-warning-color-4-rgb: 255, 222, 156;
  --pbt-warning-color-5: #ffcc73;
  --pbt-warning-color-5-rgb: 255, 204, 115;
  --pbt-warning-color-6: #ffb549;
  --pbt-warning-color-6-rgb: 255, 181, 73;
  --pbt-warning-color-7: #d99134;
  --pbt-warning-color-7-rgb: 217, 145, 52;

  /* danger */
  --pbt-danger-color: #ff585d;
  --pbt-danger-color-rgb: 255, 88, 93;
  --pbt-danger-color-1: #fff2f0;
  --pbt-danger-color-1-rgb: 255, 242, 240;
  --pbt-danger-color-2: #fff1f0;
  --pbt-danger-color-2-rgb: 255, 241, 240;
  --pbt-danger-color-3: #ffd7d4;
  --pbt-danger-color-3-rgb: 255, 215, 212;
  --pbt-danger-color-4: #ffaeab;
  --pbt-danger-color-4-rgb: 255, 174, 171;
  --pbt-danger-color-5: #ff8282;
  --pbt-danger-color-5-rgb: 255, 130, 130;
  --pbt-danger-color-6: #ff585d;
  --pbt-danger-color-6-rgb: 255, 88, 93;
  --pbt-danger-color-7: #d9414b;
  --pbt-danger-color-7-rgb: 217, 65, 75;

  /* disabled */
  --pbt-disabled-color: #c6beb9;
  --pbt-disabled-color-rgb: 198, 190, 185;
  --pbt-disabled-color-1: #fff8f0;
  --pbt-disabled-color-1-rgb: 255, 248, 240;
  --pbt-disabled-color-2: #faf3eb;
  --pbt-disabled-color-2-rgb: 250, 243, 235;
  --pbt-disabled-color-3: #ede6df;
  --pbt-disabled-color-3-rgb: 237, 230, 223;
  --pbt-disabled-color-4: #e0d9d3;
  --pbt-disabled-color-4-rgb: 224, 217, 211;
  --pbt-disabled-color-5: #d4ccc7;
  --pbt-disabled-color-5-rgb: 212, 204, 199;
  --pbt-disabled-color-6: #c6beb9;
  --pbt-disabled-color-6-rgb: 198, 190, 185;
  --pbt-disabled-color-7: #a1948d;
  --pbt-disabled-color-7-rgb: 161, 148, 141;

  /* alert level */
  --pbt-alert-level-color-1: #0097f5;
  --pbt-alert-level-color-1-rgb: 0, 151, 245;
  --pbt-alert-level-color-2: #eaad06;
  --pbt-alert-level-color-2-rgb: 234, 173, 6;
  --pbt-alert-level-color-3: #ff5638;
  --pbt-alert-level-color-3-rgb: 255, 86, 56;
  --pbt-alert-level-color-4: #f0383e;
  --pbt-alert-level-color-4-rgb: 240, 56, 62;
  --pbt-alert-level-color-5: #f0383e;
  --pbt-alert-level-color-5-rgb: 240, 56, 62;
  --pbt-alert-level-color-6: #f0383e;
  --pbt-alert-level-color-6-rgb: 240, 56, 62;

  /* colorful */
  --pbt-color-blue: #46b7ff;
  --pbt-color-blue-rgb: 70, 183, 255;
  --pbt-color-yellow: #fcc545;
  --pbt-color-yellow-rgb: 252, 197, 69;
  --pbt-color-purple: #db77f8;
  --pbt-color-purple-rgb: 219, 119, 248;
  --pbt-color-green: #50caca;
  --pbt-color-green-rgb: 80, 202, 202;
  --pbt-color-lightgreen: #2ecca9;
  --pbt-color-lightgreen-rgb: 46, 204, 169;
  --pbt-color-red: #ff7ea6;
  --pbt-color-red-rgb: 255, 126, 166;
  --pbt-color-orange: #fc8e63;
  --pbt-color-orange-rgb: 252, 142, 99;
  --pbt-color-lightblue: #52d4f1;
  --pbt-color-lightblue-rgb: 82, 212, 241;

  /* active */
  --pbt-active-color: #ffffff;
  --pbt-active-color-rgb: 255, 255, 255;

  /* active background */
  --pbt-active-background-color: #2c2b2a;
  --pbt-active-background-color-rgb: 44, 43, 42;

  /* mask */
  --pbt-mask-color: #000000;
  --pbt-mask-color-rgb: 0, 0, 0;

  /* text */
  --pbt-text-color: #2c2b2a;
  --pbt-text-color-rgb: 44, 43, 42;
  --pbt-text-color-1: #6d6662;
  --pbt-text-color-1-rgb: 109, 102, 98;
  --pbt-text-color-2: #93908b;
  --pbt-text-color-2-rgb: 147, 144, 139;
  --pbt-text-color-3: #c6beb9;
  --pbt-text-color-3-rgb: 198, 190, 185;
  --pbt-text-color-4: #d9d3d0;
  --pbt-text-color-4-rgb: 217, 211, 208;

  /* background */
  --pbt-background-color: #ffffff;
  --pbt-background-color-rgb: 255, 255, 255;
  --pbt-background-color-1: #f9f6f4;
  --pbt-background-color-1-rgb: 249, 246, 244;
  --pbt-background-color-2: #f5f5f5;
  --pbt-background-color-2-rgb: 245, 245, 245;
  --pbt-background-color-3: #e8e8e8;
  --pbt-background-color-3-rgb: 232, 232, 232;
  --pbt-background-color-4: #d9dadb;
  --pbt-background-color-4-rgb: 217, 218, 219;

  /* border */
  --pbt-border-color: #f0e6df;
  --pbt-border-color-rgb: 240, 230, 223;
  --pbt-border-color-1: #e8ddd7;
  --pbt-border-color-1-rgb: 232, 221, 215;
  --pbt-border-color-2: #e0d6ce;
  --pbt-border-color-2-rgb: 224, 214, 206;
  --pbt-border-color-3: #e0d6ce;
  --pbt-border-color-3-rgb: 224, 214, 206;

  /* shadow */
  --pbt-shadow-color: #afa49c;
  --pbt-shadow-color-rgb: 175, 164, 156;
  --pbt-shadow-color-1: #2c2b2a;
  --pbt-shadow-color-1-rgb: 44, 43, 42;

  /* font */
  --pbt-font-size-xxs: 10px;
  --pbt-font-size-xs: 12px;
  --pbt-font-size-sm: 13px;
  --pbt-font-size-md: 14px;
  --pbt-font-size-lg: 16px;
  --pbt-font-size-xl: 18px;

  /* border-radius */
  --pbt-border-radius-sm: 2px;
  --pbt-border-radius-md: 4px;
  --pbt-border-radius-lg: 8px;
  --pbt-border-radius-xl: 12px;
}


/* Component Colors Configure */
:root.deepgreen {
  /* Color Palette */

  /* with alpha */
  /* rgba(var(--pbt-primary-color-rgb), alpha) */

  /* primary */
  --pbt-primary-color: #18555b;
  --pbt-primary-color-rgb: 24, 85, 91;
  --pbt-primary-color-1: #929c9b;
  --pbt-primary-color-1-rgb: 146, 156, 155;
  --pbt-primary-color-2: #818f8e;
  --pbt-primary-color-2-rgb: 129, 143, 142;
  --pbt-primary-color-3: #608281;
  --pbt-primary-color-3-rgb: 96, 130, 129;
  --pbt-primary-color-4: #447475;
  --pbt-primary-color-4-rgb: 68, 116, 117;
  --pbt-primary-color-5: #2c6669;
  --pbt-primary-color-5-rgb: 44, 102, 105;
  --pbt-primary-color-6: #18555b;
  --pbt-primary-color-6-rgb: 24, 85, 91;
  --pbt-primary-color-7: #0b3136;
  --pbt-primary-color-7-rgb: 11, 49, 54;

  /* success */
  --pbt-success-color: #169f62;
  --pbt-success-color-rgb: 22, 159, 98;
  --pbt-success-color-1: #d1ded6;
  --pbt-success-color-1-rgb: 209, 222, 214;
  --pbt-success-color-2: #a3d1b6;
  --pbt-success-color-2-rgb: 163, 209, 182;
  --pbt-success-color-3: #7ac49b;
  --pbt-success-color-3-rgb: 122, 196, 155;
  --pbt-success-color-4: #54b884;
  --pbt-success-color-4-rgb: 84, 184, 132;
  --pbt-success-color-5: #33ab71;
  --pbt-success-color-5-rgb: 51, 171, 113;
  --pbt-success-color-6: #169f62;
  --pbt-success-color-6-rgb: 22, 159, 98;
  --pbt-success-color-7: #0b784a;
  --pbt-success-color-7-rgb: 11, 120, 74;

  /* warning */
  --pbt-warning-color: #e9911c;
  --pbt-warning-color-rgb: 233, 145, 28;
  --pbt-warning-color-1: #fffaeb;
  --pbt-warning-color-1-rgb: 255, 250, 235;
  --pbt-warning-color-2: #ffedc2;
  --pbt-warning-color-2-rgb: 255, 237, 194;
  --pbt-warning-color-3: #ffdd99;
  --pbt-warning-color-3-rgb: 255, 221, 153;
  --pbt-warning-color-4: #ffcb70;
  --pbt-warning-color-4-rgb: 255, 203, 112;
  --pbt-warning-color-5: #f5ae45;
  --pbt-warning-color-5-rgb: 245, 174, 69;
  --pbt-warning-color-6: #e9911c;
  --pbt-warning-color-6-rgb: 233, 145, 28;
  --pbt-warning-color-7: #c26e0e;
  --pbt-warning-color-7-rgb: 194, 110, 14;

  /* danger */
  --pbt-danger-color: #c3494d;
  --pbt-danger-color-rgb: 195, 73, 77;
  --pbt-danger-color-1: #fff2f0;
  --pbt-danger-color-1-rgb: 255, 242, 240;
  --pbt-danger-color-2: #f5e8e6;
  --pbt-danger-color-2-rgb: 245, 232, 230;
  --pbt-danger-color-3: #e8c8c5;
  --pbt-danger-color-3-rgb: 232, 200, 197;
  --pbt-danger-color-4: #db9a97;
  --pbt-danger-color-4-rgb: 219, 154, 151;
  --pbt-danger-color-5: #cf6d6d;
  --pbt-danger-color-5-rgb: 207, 109, 109;
  --pbt-danger-color-6: #c3494d;
  --pbt-danger-color-6-rgb: 195, 73, 77;
  --pbt-danger-color-7: #9c3239;
  --pbt-danger-color-7-rgb: 156, 50, 57;

  /* disabled */
  --pbt-disabled-color: #c0c6c6;
  --pbt-disabled-color-rgb: 192, 198, 198;
  --pbt-disabled-color-1: #f0fffc;
  --pbt-disabled-color-1-rgb: 240, 255, 252;
  --pbt-disabled-color-2: #ebfaf8;
  --pbt-disabled-color-2-rgb: 235, 250, 248;
  --pbt-disabled-color-3: #dfedec;
  --pbt-disabled-color-3-rgb: 223, 237, 236;
  --pbt-disabled-color-4: #d3e0e0;
  --pbt-disabled-color-4-rgb: 211, 224, 224;
  --pbt-disabled-color-5: #c7d4d3;
  --pbt-disabled-color-5-rgb: 199, 212, 211;
  --pbt-disabled-color-6: #c0c6c6;
  --pbt-disabled-color-6-rgb: 192, 198, 198;
  --pbt-disabled-color-7: #94a0a1;
  --pbt-disabled-color-7-rgb: 148, 160, 161;

  /* alert level */
  --pbt-alert-level-color-1: #0097f5;
  --pbt-alert-level-color-1-rgb: 0, 151, 245;
  --pbt-alert-level-color-2: #eaad06;
  --pbt-alert-level-color-2-rgb: 234, 173, 6;
  --pbt-alert-level-color-3: #ec6a32;
  --pbt-alert-level-color-3-rgb: 236, 106, 50;
  --pbt-alert-level-color-4: #f0383e;
  --pbt-alert-level-color-4-rgb: 240, 56, 62;
  --pbt-alert-level-color-5: #f0383e;
  --pbt-alert-level-color-5-rgb: 240, 56, 62;
  --pbt-alert-level-color-6: #f0383e;
  --pbt-alert-level-color-6-rgb: 240, 56, 62;

  /* colorful */
  --pbt-color-blue: #3fa5e6;
  --pbt-color-blue-rgb: 63, 165, 230;
  --pbt-color-yellow: #e6b33f;
  --pbt-color-yellow-rgb: 230, 179, 63;
  --pbt-color-purple: #bd67d6;
  --pbt-color-purple-rgb: 189, 103, 214;
  --pbt-color-green: #47b3b3;
  --pbt-color-green-rgb: 71, 179, 179;
  --pbt-color-lightgreen: #2cb596;
  --pbt-color-lightgreen-rgb: 44, 181, 150;
  --pbt-color-red: #eb7499;
  --pbt-color-red-rgb: 235, 116, 153;
  --pbt-color-orange: #e6815a;
  --pbt-color-orange-rgb: 230, 129, 90;
  --pbt-color-lightblue: #47b8d1;
  --pbt-color-lightblue-rgb: 71, 184, 209;

  /* active */
  --pbt-active-color: #ffffff;
  --pbt-active-color-rgb: 255, 255, 255;

  /* active background */
  --pbt-active-background-color: #2b3738;
  --pbt-active-background-color-rgb: 43, 55, 56;

  /* mask */
  --pbt-mask-color: #000000;
  --pbt-mask-color-rgb: 0, 0, 0;

  /* text */
  --pbt-text-color: #2b3738;
  --pbt-text-color-rgb: 43, 55, 56;
  --pbt-text-color-1: #7a8485;
  --pbt-text-color-1-rgb: 122, 132, 133;
  --pbt-text-color-2: #a8b2b3;
  --pbt-text-color-2-rgb: 168, 178, 179;
  --pbt-text-color-3: #c0c6c6;
  --pbt-text-color-3-rgb: 192, 198, 198;
  --pbt-text-color-4: #dce2e2;
  --pbt-text-color-4-rgb: 220, 226, 226;

  /* background */
  --pbt-background-color: #ffffff;
  --pbt-background-color-rgb: 255, 255, 255;
  --pbt-background-color-1: #f2f7f7;
  --pbt-background-color-1-rgb: 242, 247, 247;
  --pbt-background-color-2: #e9f3f5;
  --pbt-background-color-2-rgb: 233, 243, 245;
  --pbt-background-color-3: #e0eced;
  --pbt-background-color-3-rgb: 224, 236, 237;
  --pbt-background-color-4: #dae7e8;
  --pbt-background-color-4-rgb: 218, 231, 232;

  /* border */
  --pbt-border-color: #e1eff0;
  --pbt-border-color-rgb: 225, 239, 240;
  --pbt-border-color-1: #daeaeb;
  --pbt-border-color-1-rgb: 218, 234, 235;
  --pbt-border-color-2: #cedfe0;
  --pbt-border-color-2-rgb: 206, 223, 224;
  --pbt-border-color-3: #cedfe0;
  --pbt-border-color-3-rgb: 206, 223, 224;

  /* shadow */
  --pbt-shadow-color: #8fc0c4;
  --pbt-shadow-color-rgb: 143, 192, 196;
  --pbt-shadow-color-1: #2b3738;
  --pbt-shadow-color-1-rgb: 43, 55, 56;

  /* font */
  --pbt-font-size-xxs: 10px;
  --pbt-font-size-xs: 12px;
  --pbt-font-size-sm: 13px;
  --pbt-font-size-md: 14px;
  --pbt-font-size-lg: 16px;
  --pbt-font-size-xl: 18px;

  /* border-radius */
  --pbt-border-radius-sm: 2px;
  --pbt-border-radius-md: 4px;
  --pbt-border-radius-lg: 8px;
  --pbt-border-radius-xl: 10px;
}

/* Component Colors Configure */
:root.purple {
  /* Color Palette */

  /* with alpha */
  /* rgba(var(--pbt-primary-color-rgb), alpha) */

  /* primary */
  --pbt-primary-color: #644cfe;
  --pbt-primary-color-rgb: 100, 76, 254;
  --pbt-primary-color-1: #f4f0ff;
  --pbt-primary-color-1-rgb: 244, 240, 255;
  --pbt-primary-color-2: #f4f0ff;
  --pbt-primary-color-2-rgb: 244, 240, 255;
  --pbt-primary-color-3: #d4c7ff;
  --pbt-primary-color-3-rgb: 212, 199, 255;
  --pbt-primary-color-4: #b19eff;
  --pbt-primary-color-4-rgb: 177, 158, 255;
  --pbt-primary-color-5: #8c75ff;
  --pbt-primary-color-5-rgb: 140, 117, 255;
  --pbt-primary-color-6: #644cfe;
  --pbt-primary-color-6-rgb: 100, 76, 254;
  --pbt-primary-color-7: #4636d9;
  --pbt-primary-color-7-rgb: 70, 54, 217;

  /* success */
  --pbt-success-color: #23c07a;
  --pbt-success-color-rgb: 35, 192, 122;
  --pbt-success-color-1: #f0fff6;
  --pbt-success-color-1-rgb: 240, 255, 246;
  --pbt-success-color-2: #c7f2d9;
  --pbt-success-color-2-rgb: 199, 242, 217;
  --pbt-success-color-3: #97e6bb;
  --pbt-success-color-3-rgb: 151, 230, 187;
  --pbt-success-color-4: #6cd9a1;
  --pbt-success-color-4-rgb: 108, 217, 161;
  --pbt-success-color-5: #45cc8b;
  --pbt-success-color-5-rgb: 69, 204, 139;
  --pbt-success-color-6: #23c07a;
  --pbt-success-color-6-rgb: 35, 192, 122;
  --pbt-success-color-7: #149962;
  --pbt-success-color-7-rgb: 20, 153, 98;

  /* warning */
  --pbt-warning-color: #ffb549;
  --pbt-warning-color-rgb: 255, 181, 73;
  --pbt-warning-color-1: #fffbf0;
  --pbt-warning-color-1-rgb: 255, 251, 240;
  --pbt-warning-color-2: #fffaed;
  --pbt-warning-color-2-rgb: 255, 250, 237;
  --pbt-warning-color-3: #ffedc4;
  --pbt-warning-color-3-rgb: 255, 237, 196;
  --pbt-warning-color-4: #ffde9c;
  --pbt-warning-color-4-rgb: 255, 222, 156;
  --pbt-warning-color-5: #ffcc73;
  --pbt-warning-color-5-rgb: 255, 204, 115;
  --pbt-warning-color-6: #ffb549;
  --pbt-warning-color-6-rgb: 255, 181, 73;
  --pbt-warning-color-7: #d99134;
  --pbt-warning-color-7-rgb: 217, 145, 52;

  /* danger */
  --pbt-danger-color: #ff585d;
  --pbt-danger-color-rgb: 255, 88, 93;
  --pbt-danger-color-1: #fff2f0;
  --pbt-danger-color-1-rgb: 255, 242, 240;
  --pbt-danger-color-2: #fff1f0;
  --pbt-danger-color-2-rgb: 255, 241, 240;
  --pbt-danger-color-3: #ffd7d4;
  --pbt-danger-color-3-rgb: 255, 215, 212;
  --pbt-danger-color-4: #ffaeab;
  --pbt-danger-color-4-rgb: 255, 174, 171;
  --pbt-danger-color-5: #ff8282;
  --pbt-danger-color-5-rgb: 255, 130, 130;
  --pbt-danger-color-6: #ff585d;
  --pbt-danger-color-6-rgb: 255, 88, 93;
  --pbt-danger-color-7: #d9414b;
  --pbt-danger-color-7-rgb: 217, 65, 75;

  /* disabled */
  --pbt-disabled-color: #bdbcc6;
  --pbt-disabled-color-rgb: 189, 188, 198;
  --pbt-disabled-color-1: #f4f0ff;
  --pbt-disabled-color-1-rgb: 244, 240, 255;
  --pbt-disabled-color-2: #eeebfa;
  --pbt-disabled-color-2-rgb: 238, 235, 250;
  --pbt-disabled-color-3: #e2dfed;
  --pbt-disabled-color-3-rgb: 226, 223, 237;
  --pbt-disabled-color-4: #d5d3e0;
  --pbt-disabled-color-4-rgb: 213, 211, 224;
  --pbt-disabled-color-5: #c9c7d4;
  --pbt-disabled-color-5-rgb: 201, 199, 212;
  --pbt-disabled-color-6: #bdbcc6;
  --pbt-disabled-color-6-rgb: 189, 188, 198;
  --pbt-disabled-color-7: #9291a1;
  --pbt-disabled-color-7-rgb: 146, 145, 161;

  /* alert level */
  --pbt-alert-level-color-1: #0097f5;
  --pbt-alert-level-color-1-rgb: 0, 151, 245;
  --pbt-alert-level-color-2: #eaad06;
  --pbt-alert-level-color-2-rgb: 234, 173, 6;
  --pbt-alert-level-color-3: #ec6a32;
  --pbt-alert-level-color-3-rgb: 236, 106, 50;
  --pbt-alert-level-color-4: #f0383e;
  --pbt-alert-level-color-4-rgb: 240, 56, 62;
  --pbt-alert-level-color-5: #f0383e;
  --pbt-alert-level-color-5-rgb: 240, 56, 62;
  --pbt-alert-level-color-6: #f0383e;
  --pbt-alert-level-color-6-rgb: 240, 56, 62;

  /* colorful */
  --pbt-color-blue: #46b6fe;
  --pbt-color-blue-rgb: 70, 182, 254;
  --pbt-color-yellow: #fcc545;
  --pbt-color-yellow-rgb: 252, 197, 69;
  --pbt-color-purple: #db77f8;
  --pbt-color-purple-rgb: 219, 119, 248;
  --pbt-color-green: #50caca;
  --pbt-color-green-rgb: 80, 202, 202;
  --pbt-color-lightgreen: #2ecca9;
  --pbt-color-lightgreen-rgb: 46, 204, 169;
  --pbt-color-red: #ff7ea6;
  --pbt-color-red-rgb: 255, 126, 166;
  --pbt-color-orange: #fc8e63;
  --pbt-color-orange-rgb: 252, 142, 99;
  --pbt-color-lightblue: #52d4f1;
  --pbt-color-lightblue-rgb: 82, 212, 241;

  /* active */
  --pbt-active-color: #ffffff;
  --pbt-active-color-rgb: 255, 255, 255;

  /* active background */
  --pbt-active-background-color: #221e3d;
  --pbt-active-background-color-rgb: 34, 30, 61;

  /* mask */
  --pbt-mask-color: #000000;
  --pbt-mask-color-rgb: 0, 0, 0;

  /* text */
  --pbt-text-color: #221e3d;
  --pbt-text-color-rgb: 34, 30, 61;
  --pbt-text-color-1: #767385;
  --pbt-text-color-1-rgb: 118, 115, 133;
  --pbt-text-color-2: #a19fb3;
  --pbt-text-color-2-rgb: 161, 159, 179;
  --pbt-text-color-3: #bdbcc6;
  --pbt-text-color-3-rgb: 189, 188, 198;
  --pbt-text-color-4: #dddce2;
  --pbt-text-color-4-rgb: 221, 220, 226;

  /* background */
  --pbt-background-color: #ffffff;
  --pbt-background-color-rgb: 255, 255, 255;
  --pbt-background-color-1: #f3f2f7;
  --pbt-background-color-1-rgb: 243, 242, 247;
  --pbt-background-color-2: #eae9f0;
  --pbt-background-color-2-rgb: 234, 233, 240;
  --pbt-background-color-3: #e7e5f2;
  --pbt-background-color-3-rgb: 231, 229, 242;
  --pbt-background-color-4: #dedcea;
  --pbt-background-color-4-rgb: 222, 220, 234;

  /* border */
  --pbt-border-color: #e3e1f0;
  --pbt-border-color-rgb: 227, 225, 240;
  --pbt-border-color-1: #dcdaeb;
  --pbt-border-color-1-rgb: 220, 218, 235;
  --pbt-border-color-2: #d1cee0;
  --pbt-border-color-2-rgb: 209, 206, 224;
  --pbt-border-color-3: #d1cee0;
  --pbt-border-color-3-rgb: 209, 206, 224;

  /* shadow */
  --pbt-shadow-color: #968fc4;
  --pbt-shadow-color-rgb: 150, 143, 196;
  --pbt-shadow-color-1: #221e3d;
  --pbt-shadow-color-1-rgb: 34, 30, 61;

  /* font */
  --pbt-font-size-xxs: 10px;
  --pbt-font-size-xs: 12px;
  --pbt-font-size-sm: 13px;
  --pbt-font-size-md: 14px;
  --pbt-font-size-lg: 16px;
  --pbt-font-size-xl: 18px;

  /* border-radius */
  --pbt-border-radius-sm: 2px;
  --pbt-border-radius-md: 4px;
  --pbt-border-radius-lg: 8px;
  --pbt-border-radius-xl: 10px;
}