zmp-core/zmp.css

Full featured mobile HTML framework for building iOS & Android apps

/**
 * ZMP 2.8.10
 * Full featured mobile HTML framework for building iOS & Android apps
 * https://h5.zalo.me/
 *
 * Copyright 2014-2023 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: May 16, 2023
 */

/*====================
  Core
  ==================== */
:root {
  --zmp-theme-color: #0068FF;
  --zmp-theme-color-rgb: 0, 104, 255;
  --zmp-theme-color-shade: #0057d6;
  --zmp-theme-color-tint: #2980ff;
  --zmp-safe-area-left: 0px;
  --zmp-safe-area-right: 0px;
  --zmp-safe-area-top: 0px;
  --zmp-safe-area-bottom: 0px;
  --zmp-safe-area-outer-left: 0px;
  --zmp-safe-area-outer-right: 0px;
  --zmp-device-pixel-ratio: 1;
}
@supports (left: env(safe-area-inset-left)) {
  :root {
    --zmp-safe-area-top: env(safe-area-inset-top);
    --zmp-safe-area-bottom: env(safe-area-inset-bottom);
  }
  :root .ios-left-edge,
  :root .ios-edges,
  :root .safe-area-left,
  :root .safe-areas,
  :root .popup,
  :root .sheet-modal,
  :root .panel-left {
    --zmp-safe-area-left: env(safe-area-inset-left);
    --zmp-safe-area-outer-left: env(safe-area-inset-left);
  }
  :root .ios-right-edge,
  :root .ios-edges,
  :root .safe-area-right,
  :root .safe-areas,
  :root .popup,
  :root .sheet-modal,
  :root .panel-right {
    --zmp-safe-area-right: env(safe-area-inset-right);
    --zmp-safe-area-outer-right: env(safe-area-inset-right);
  }
  :root .no-safe-areas,
  :root .no-safe-area-left,
  :root .no-ios-edges,
  :root .no-ios-left-edge {
    --zmp-safe-area-left: 0px;
    --zmp-safe-area-outer-left: 0px;
  }
  :root .no-safe-areas,
  :root .no-safe-area-right,
  :root .no-ios-edges,
  :root .no-ios-right-edge {
    --zmp-safe-area-right: 0px;
    --zmp-safe-area-outer-right: 0px;
  }
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  :root {
    --zmp-device-pixel-ratio: 2;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  :root {
    --zmp-device-pixel-ratio: 3;
  }
}
:root .theme-dark,
:root.theme-dark {
  --zmp-theme-color: #4C8AE5;
  --zmp-theme-color-rgb: 76, 138, 229;
  --zmp-theme-color-shade: #2873e0;
  --zmp-theme-color-tint: #70a1ea;
}
/*====================
  Fonts & Bars
  ==================== */
:root {
  --zmp-font-size: 14px;
  /*
  --zmp-bars-link-color: var(--zmp-theme-color);
  */
  --zmp-bars-bg-image: none;
  --zmp-bars-translucent-opacity: 0.8;
  --zmp-bars-translucent-blur: 20px;
  --zmp-bars-shadow-bottom-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
  --zmp-bars-shadow-top-image: linear-gradient(to top, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 40%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0) 90%, rgba(0, 0, 0, 0) 100%);
  --zmp-bars-text-color: #000;
  --zmp-bars-bg-color: #f7f7f8;
  --zmp-bars-bg-color-rgb: 247, 247, 248;
}
:root .theme-dark,
:root.theme-dark {
  --zmp-bars-text-color: #fff;
}
.ios {
  --zmp-font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;
  --zmp-line-height: 1.4;
  --zmp-text-color: #000;
  --zmp-bars-border-color: rgba(0, 0, 0, 0.25);
}
.ios .theme-dark,
.ios.theme-dark {
  --zmp-text-color: #fff;
  --zmp-bars-bg-color: #121212;
  --zmp-bars-bg-color-rgb: 22, 22, 22;
  --zmp-bars-border-color: rgba(255, 255, 255, 0.16);
}
.md {
  --zmp-font-family: Roboto, system-ui, Noto, Helvetica, Arial, sans-serif;
  --zmp-line-height: 1.5;
  --zmp-bars-border-color: transparent;
  --zmp-text-color: #212121;
}
.md .theme-dark,
.md.theme-dark {
  --zmp-text-color: rgba(255, 255, 255, 0.87);
  --zmp-bars-bg-color: #202020;
}
.aurora {
  --zmp-font-family: -apple-system, system-ui, Helvetica, Arial, sans-serif;
  --zmp-line-height: 1.5;
  --zmp-text-color: #000;
  --zmp-bars-border-color: rgba(0, 0, 0, 0.2);
}
.aurora .theme-dark,
.aurora.theme-dark {
  --zmp-text-color: #fff;
  --zmp-bars-bg-color: #202020;
  --zmp-bars-border-color: rgba(255, 255, 255, 0.1);
}
/*====================
  Color Themes
  ==================== */
.text-color-primary {
  --zmp-theme-color-text-color: var(--zmp-theme-color);
}
.bg-color-primary {
  --zmp-theme-color-bg-color: var(--zmp-theme-color);
}
.border-color-primary {
  --zmp-theme-color-border-color: var(--zmp-theme-color);
}
.ripple-color-primary {
  --zmp-theme-color-ripple-color: rgba(var(--zmp-theme-color-rgb), 0.3);
}
:root {
  --zmp-color-red: #ff3b30;
  --zmp-color-red-rgb: 255, 59, 48;
  --zmp-color-red-shade: #ff1407;
  --zmp-color-red-tint: #ff6259;
  --zmp-color-green: #4cd964;
  --zmp-color-green-rgb: 76, 217, 100;
  --zmp-color-green-shade: #2cd048;
  --zmp-color-green-tint: #6ee081;
  --zmp-color-blue: #2196f3;
  --zmp-color-blue-rgb: 33, 150, 243;
  --zmp-color-blue-shade: #0c82df;
  --zmp-color-blue-tint: #48a8f5;
  --zmp-color-pink: #ff2d55;
  --zmp-color-pink-rgb: 255, 45, 85;
  --zmp-color-pink-shade: #ff0434;
  --zmp-color-pink-tint: #ff5676;
  --zmp-color-yellow: #ffcc00;
  --zmp-color-yellow-rgb: 255, 204, 0;
  --zmp-color-yellow-shade: #d6ab00;
  --zmp-color-yellow-tint: #ffd429;
  --zmp-color-orange: #ff9500;
  --zmp-color-orange-rgb: 255, 149, 0;
  --zmp-color-orange-shade: #d67d00;
  --zmp-color-orange-tint: #ffa629;
  --zmp-color-purple: #9c27b0;
  --zmp-color-purple-rgb: 156, 39, 176;
  --zmp-color-purple-shade: #7e208f;
  --zmp-color-purple-tint: #b92fd1;
  --zmp-color-deeppurple: #673ab7;
  --zmp-color-deeppurple-rgb: 103, 58, 183;
  --zmp-color-deeppurple-shade: #563098;
  --zmp-color-deeppurple-tint: #7c52c8;
  --zmp-color-lightblue: #5ac8fa;
  --zmp-color-lightblue-rgb: 90, 200, 250;
  --zmp-color-lightblue-shade: #32bbf9;
  --zmp-color-lightblue-tint: #82d5fb;
  --zmp-color-teal: #009688;
  --zmp-color-teal-rgb: 0, 150, 136;
  --zmp-color-teal-shade: #006d63;
  --zmp-color-teal-tint: #00bfad;
  --zmp-color-lime: #cddc39;
  --zmp-color-lime-rgb: 205, 220, 57;
  --zmp-color-lime-shade: #bac923;
  --zmp-color-lime-tint: #d6e25c;
  --zmp-color-deeporange: #ff6b22;
  --zmp-color-deeporange-rgb: 255, 107, 34;
  --zmp-color-deeporange-shade: #f85200;
  --zmp-color-deeporange-tint: #ff864b;
  --zmp-color-gray: #8e8e93;
  --zmp-color-gray-rgb: 142, 142, 147;
  --zmp-color-gray-shade: #79797f;
  --zmp-color-gray-tint: #a3a3a7;
  --zmp-color-white: #ffffff;
  --zmp-color-white-rgb: 255, 255, 255;
  --zmp-color-white-shade: #ebebeb;
  --zmp-color-white-tint: #ffffff;
  --zmp-color-black: #000000;
  --zmp-color-black-rgb: 0, 0, 0;
  --zmp-color-black-shade: #000000;
  --zmp-color-black-tint: #141414;
  --zmp-color-bd200: #81aded;
  --zmp-color-bd200-rgb: 129, 173, 237;
  --zmp-color-bd200-shade: #5d96e8;
  --zmp-color-bd200-tint: #a5c4f2;
  --zmp-color-bd300: #4c8ae5;
  --zmp-color-bd300-rgb: 76, 138, 229;
  --zmp-color-bd300-shade: #2873e0;
  --zmp-color-bd300-tint: #70a1ea;
  --zmp-color-bd400: #3d6eb7;
  --zmp-color-bd400-rgb: 61, 110, 183;
  --zmp-color-bd400-shade: #335c98;
  --zmp-color-bd400-tint: #5683c7;
  --zmp-color-bd500: #2e5389;
  --zmp-color-bd500-rgb: 46, 83, 137;
  --zmp-color-bd500-shade: #24406a;
  --zmp-color-bd500-tint: #3866a8;
  --zmp-color-bd600: #1e375c;
  --zmp-color-bd600-rgb: 30, 55, 92;
  --zmp-color-bd600-shade: #14253d;
  --zmp-color-bd600-tint: #28497b;
  --zmp-color-bd700: #132339;
  --zmp-color-bd700-rgb: 19, 35, 57;
  --zmp-color-bd700-shade: #09101a;
  --zmp-color-bd700-tint: #1d3658;
  --zmp-color-bl200: #0043a6;
  --zmp-color-bl200-rgb: 0, 67, 166;
  --zmp-color-bl200-shade: #00337d;
  --zmp-color-bl200-tint: #0053cf;
  --zmp-color-bl300: #0068ff;
  --zmp-color-bl300-rgb: 0, 104, 255;
  --zmp-color-bl300-shade: #0057d6;
  --zmp-color-bl300-tint: #2980ff;
  --zmp-color-bl400: #3386ff;
  --zmp-color-bl400-rgb: 51, 134, 255;
  --zmp-color-bl400-shade: #0a6eff;
  --zmp-color-bl400-tint: #5c9eff;
  --zmp-color-bl500: #66a4ff;
  --zmp-color-bl500-rgb: 102, 164, 255;
  --zmp-color-bl500-shade: #3d8cff;
  --zmp-color-bl500-tint: #8fbcff;
  --zmp-color-bl600: #99c3ff;
  --zmp-color-bl600-rgb: 153, 195, 255;
  --zmp-color-bl600-shade: #70abff;
  --zmp-color-bl600-tint: #c2dbff;
  --zmp-color-bl700: #cce1ff;
  --zmp-color-bl700-rgb: 204, 225, 255;
  --zmp-color-bl700-shade: #a3c9ff;
  --zmp-color-bl700-tint: #f5f9ff;
  --zmp-color-nd200: #dbdfe2;
  --zmp-color-nd200-rgb: 219, 223, 226;
  --zmp-color-nd200-shade: #c4cbd0;
  --zmp-color-nd200-tint: #f2f3f4;
  --zmp-color-nd300: #ccd1d6;
  --zmp-color-nd300-rgb: 204, 209, 214;
  --zmp-color-nd300-shade: #b5bdc4;
  --zmp-color-nd300-tint: #e3e5e8;
  --zmp-color-nd400: #8b8f92;
  --zmp-color-nd400-rgb: 139, 143, 146;
  --zmp-color-nd400-shade: #767b7e;
  --zmp-color-nd400-tint: #a0a3a6;
  --zmp-color-nd500: #4a4b4d;
  --zmp-color-nd500-rgb: 74, 75, 77;
  --zmp-color-nd500-shade: #363738;
  --zmp-color-nd500-tint: #5e5f62;
  --zmp-color-nd600: #19191a;
  --zmp-color-nd600-rgb: 25, 25, 26;
  --zmp-color-nd600-shade: #050505;
  --zmp-color-nd600-tint: #2d2d2f;
  --zmp-color-nd700: #090909;
  --zmp-color-nd700-rgb: 9, 9, 9;
  --zmp-color-nd700-shade: #000000;
  --zmp-color-nd700-tint: #1d1d1d;
  --zmp-color-nl100: #050a19;
  --zmp-color-nl100-rgb: 5, 10, 25;
  --zmp-color-nl100-shade: #000000;
  --zmp-color-nl100-tint: #0c183b;
  --zmp-color-nl200: #001121;
  --zmp-color-nl200-rgb: 0, 17, 33;
  --zmp-color-nl200-shade: #000000;
  --zmp-color-nl200-tint: #00264a;
  --zmp-color-nl300: #001a33;
  --zmp-color-nl300-rgb: 0, 26, 51;
  --zmp-color-nl300-shade: #00050a;
  --zmp-color-nl300-tint: #002f5c;
  --zmp-color-nl400: #33485c;
  --zmp-color-nl400-rgb: 51, 72, 92;
  --zmp-color-nl400-shade: #243342;
  --zmp-color-nl400-tint: #425d76;
  --zmp-color-nl500: #667685;
  --zmp-color-nl500-rgb: 102, 118, 133;
  --zmp-color-nl500-shade: #54626e;
  --zmp-color-nl500-tint: #7a8a99;
  --zmp-color-nl600: #99a3ad;
  --zmp-color-nl600-rgb: 153, 163, 173;
  --zmp-color-nl600-shade: #828f9b;
  --zmp-color-nl600-tint: #b0b7bf;
  --zmp-color-nl700: #bfc6cc;
  --zmp-color-nl700-rgb: 191, 198, 204;
  --zmp-color-nl700-shade: #a8b2ba;
  --zmp-color-nl700-tint: #d6dade;
  --zmp-color-gd300: #47bd8e;
  --zmp-color-gd300-rgb: 71, 189, 142;
  --zmp-color-gd300-shade: #3aa178;
  --zmp-color-gd300-tint: #65c8a0;
  --zmp-color-gd400: #399772;
  --zmp-color-gd400-rgb: 57, 151, 114;
  --zmp-color-gd400-shade: #2e795c;
  --zmp-color-gd400-tint: #44b588;
  --zmp-color-gd500: #2b7155;
  --zmp-color-gd500-rgb: 43, 113, 85;
  --zmp-color-gd500-shade: #20533f;
  --zmp-color-gd500-tint: #368f6b;
  --zmp-color-gd600: #1c4c39;
  --zmp-color-gd600-rgb: 28, 76, 57;
  --zmp-color-gd600-shade: #112e23;
  --zmp-color-gd600-tint: #276a4f;
  --zmp-color-gd700: #122f24;
  --zmp-color-gd700-rgb: 18, 47, 36;
  --zmp-color-gd700-shade: #07110d;
  --zmp-color-gd700-tint: #1d4d3b;
  --zmp-color-gl300: #00c578;
  --zmp-color-gl300-rgb: 0, 197, 120;
  --zmp-color-gl300-shade: #009c5f;
  --zmp-color-gl300-tint: #00ee91;
  --zmp-color-gl400: #33d193;
  --zmp-color-gl400-rgb: 51, 209, 147;
  --zmp-color-gl400-shade: #28b37d;
  --zmp-color-gl400-tint: #54d9a5;
  --zmp-color-gl500: #66dcae;
  --zmp-color-gl500-rgb: 102, 220, 174;
  --zmp-color-gl500-shade: #45d49c;
  --zmp-color-gl500-tint: #87e4c0;
  --zmp-color-gl600: #99e8c9;
  --zmp-color-gl600-rgb: 153, 232, 201;
  --zmp-color-gl600-shade: #78e0b7;
  --zmp-color-gl600-tint: #baf0db;
  --zmp-color-gl700: #ccf3e4;
  --zmp-color-gl700-rgb: 204, 243, 228;
  --zmp-color-gl700-shade: #abebd3;
  --zmp-color-gl700-tint: #edfbf5;
  --zmp-color-rd300: #e1807d;
  --zmp-color-rd300-rgb: 225, 128, 125;
  --zmp-color-rd300-shade: #d9605c;
  --zmp-color-rd300-tint: #e9a09e;
  --zmp-color-rd400: #b46664;
  --zmp-color-rd400-rgb: 180, 102, 100;
  --zmp-color-rd400-shade: #a1504e;
  --zmp-color-rd400-tint: #c1817f;
  --zmp-color-rd500: #874d4b;
  --zmp-color-rd500-rgb: 135, 77, 75;
  --zmp-color-rd500-shade: #6d3e3c;
  --zmp-color-rd500-tint: #a15c5a;
  --zmp-color-rd600: #5a3332;
  --zmp-color-rd600-rgb: 90, 51, 50;
  --zmp-color-rd600-shade: #402423;
  --zmp-color-rd600-tint: #744241;
  --zmp-color-rd700: #38201f;
  --zmp-color-rd700-rgb: 56, 32, 31;
  --zmp-color-rd700-shade: #1e1110;
  --zmp-color-rd700-tint: #522f2e;
  --zmp-color-rl300: #ef4e49;
  --zmp-color-rl300-rgb: 239, 78, 73;
  --zmp-color-rl300-shade: #ec2a23;
  --zmp-color-rl300-tint: #f2726f;
  --zmp-color-rl400: #f2716d;
  --zmp-color-rl400-rgb: 242, 113, 109;
  --zmp-color-rl400-shade: #ef4d48;
  --zmp-color-rl400-tint: #f59592;
  --zmp-color-rl500: #f59592;
  --zmp-color-rl500-rgb: 245, 149, 146;
  --zmp-color-rl500-shade: #f2716d;
  --zmp-color-rl500-tint: #f8b9b7;
  --zmp-color-rl600: #f9b8b6;
  --zmp-color-rl600-rgb: 249, 184, 182;
  --zmp-color-rl600-shade: #f69390;
  --zmp-color-rl600-tint: #fcdddc;
  --zmp-color-rl700: #fcdcdb;
  --zmp-color-rl700-rgb: 252, 220, 219;
  --zmp-color-rl700-shade: #f9b7b5;
  --zmp-color-rl700-tint: #ffffff;
  --zmp-color-w300: #ffffff;
  --zmp-color-w300-rgb: 255, 255, 255;
  --zmp-color-w300-shade: #ebebeb;
  --zmp-color-w300-tint: #ffffff;
  --zmp-color-w400: rgba(255, 255, 255, 0.75);
  --zmp-color-w400-rgb: 255, 255, 255;
  --zmp-color-w400-shade: rgba(235, 235, 235, 0.75);
  --zmp-color-w400-tint: rgba(255, 255, 255, 0.75);
  --zmp-color-w500: rgba(255, 255, 255, 0.5);
  --zmp-color-w500-rgb: 255, 255, 255;
  --zmp-color-w500-shade: rgba(235, 235, 235, 0.5);
  --zmp-color-w500-tint: rgba(255, 255, 255, 0.5);
  --zmp-color-w600: rgba(255, 255, 255, 0.25);
  --zmp-color-w600-rgb: 255, 255, 255;
  --zmp-color-w600-shade: rgba(235, 235, 235, 0.25);
  --zmp-color-w600-tint: rgba(255, 255, 255, 0.25);
  --zmp-color-w700: rgba(255, 255, 255, 0.1);
  --zmp-color-w700-rgb: 255, 255, 255;
  --zmp-color-w700-shade: rgba(235, 235, 235, 0.1);
  --zmp-color-w700-tint: rgba(255, 255, 255, 0.1);
  --zmp-color-dg300: #96a3ad;
  --zmp-color-dg300-rgb: 150, 163, 173;
  --zmp-color-dg300-shade: #7f8f9b;
  --zmp-color-dg300-tint: #adb7bf;
  --zmp-color-dg400: #666f76;
  --zmp-color-dg400-rgb: 102, 111, 118;
  --zmp-color-dg400-shade: #535a60;
  --zmp-color-dg400-tint: #79848b;
  --zmp-color-dg500: #363b3e;
  --zmp-color-dg500-rgb: 54, 59, 62;
  --zmp-color-dg500-shade: #232628;
  --zmp-color-dg500-tint: #495054;
  --zmp-color-dg600: #121415;
  --zmp-color-dg600-rgb: 18, 20, 21;
  --zmp-color-dg600-shade: #000000;
  --zmp-color-dg600-tint: #25292b;
  --zmp-color-dg700: #060707;
  --zmp-color-dg700-rgb: 6, 7, 7;
  --zmp-color-dg700-shade: #000000;
  --zmp-color-dg700-tint: #191d1d;
  --zmp-color-lg300: #778d9e;
  --zmp-color-lg300-rgb: 119, 141, 158;
  --zmp-color-lg300-shade: #62798a;
  --zmp-color-lg300-tint: #8fa1af;
  --zmp-color-lg400: #92a4b1;
  --zmp-color-lg400-rgb: 146, 164, 177;
  --zmp-color-lg400-shade: #7a90a0;
  --zmp-color-lg400-tint: #aab8c2;
  --zmp-color-lg500: #adbbc5;
  --zmp-color-lg500-rgb: 173, 187, 197;
  --zmp-color-lg500-shade: #95a7b4;
  --zmp-color-lg500-tint: #c5cfd6;
  --zmp-color-lg600: #c9d1d8;
  --zmp-color-lg600-rgb: 201, 209, 216;
  --zmp-color-lg600-shade: #b1bdc7;
  --zmp-color-lg600-tint: #e1e5e9;
  --zmp-color-lg700: #e4e8ec;
  --zmp-color-lg700-rgb: 228, 232, 236;
  --zmp-color-lg700-shade: #ccd4db;
  --zmp-color-lg700-tint: #fcfcfd;
  --zmp-color-bk300: #000000;
  --zmp-color-bk300-rgb: 0, 0, 0;
  --zmp-color-bk300-shade: #000000;
  --zmp-color-bk300-tint: #141414;
  --zmp-color-bk400: rgba(0, 0, 0, 0.75);
  --zmp-color-bk400-rgb: 0, 0, 0;
  --zmp-color-bk400-shade: rgba(0, 0, 0, 0.75);
  --zmp-color-bk400-tint: rgba(20, 20, 20, 0.75);
  --zmp-color-bk500: rgba(0, 0, 0, 0.5);
  --zmp-color-bk500-rgb: 0, 0, 0;
  --zmp-color-bk500-shade: rgba(0, 0, 0, 0.5);
  --zmp-color-bk500-tint: rgba(20, 20, 20, 0.5);
  --zmp-color-bk600: rgba(0, 0, 0, 0.25);
  --zmp-color-bk600-rgb: 0, 0, 0;
  --zmp-color-bk600-shade: rgba(0, 0, 0, 0.25);
  --zmp-color-bk600-tint: rgba(20, 20, 20, 0.25);
  --zmp-color-bk700: rgba(0, 0, 0, 0.15);
  --zmp-color-bk700-rgb: 0, 0, 0;
  --zmp-color-bk700-shade: rgba(0, 0, 0, 0.15);
  --zmp-color-bk700-tint: rgba(20, 20, 20, 0.15);
  --zmp-color-ol300: #f5832f;
  --zmp-color-ol300-rgb: 245, 131, 47;
  --zmp-color-ol300-shade: #f06c0c;
  --zmp-color-ol300-tint: #f79a56;
  --zmp-color-ol400: #f79c59;
  --zmp-color-ol400-rgb: 247, 156, 89;
  --zmp-color-ol400-shade: #f58532;
  --zmp-color-ol400-tint: #f9b380;
  --zmp-color-ol500: #f9b582;
  --zmp-color-ol500-rgb: 249, 181, 130;
  --zmp-color-ol500-shade: #f79e5b;
  --zmp-color-ol500-tint: #fbcca9;
  --zmp-color-ol600: #fbcdac;
  --zmp-color-ol600-rgb: 251, 205, 172;
  --zmp-color-ol600-shade: #f9b685;
  --zmp-color-ol600-tint: #fde4d3;
  --zmp-color-ol700: #fde6d5;
  --zmp-color-ol700-rgb: 253, 230, 213;
  --zmp-color-ol700-shade: #fbcfae;
  --zmp-color-ol700-tint: #fffdfc;
  --zmp-color-od300: #e39f6d;
  --zmp-color-od300-rgb: 227, 159, 109;
  --zmp-color-od300-shade: #dc884b;
  --zmp-color-od300-tint: #eab68f;
  --zmp-color-od400: #b67f57;
  --zmp-color-od400-rgb: 182, 127, 87;
  --zmp-color-od400-shade: #9f6b45;
  --zmp-color-od400-tint: #c29573;
  --zmp-color-od500: #885f41;
  --zmp-color-od500-rgb: 136, 95, 65;
  --zmp-color-od500-shade: #6c4c34;
  --zmp-color-od500-tint: #a4724e;
  --zmp-color-od600: #5b402c;
  --zmp-color-od600-rgb: 91, 64, 44;
  --zmp-color-od600-shade: #3f2d1f;
  --zmp-color-od600-tint: #775339;
  --zmp-color-od700: #39281b;
  --zmp-color-od700-rgb: 57, 40, 27;
  --zmp-color-od700-shade: #1d150e;
  --zmp-color-od700-tint: #553b28;
  --zmp-color-yl300: #f8d15a;
  --zmp-color-yl300-rgb: 248, 209, 90;
  --zmp-color-yl300-shade: #f6c633;
  --zmp-color-yl300-tint: #fadc81;
  --zmp-color-yl400: #f9d97b;
  --zmp-color-yl400-rgb: 249, 217, 123;
  --zmp-color-yl400-shade: #f7ce54;
  --zmp-color-yl400-tint: #fbe4a2;
  --zmp-color-yl500: #fbe39c;
  --zmp-color-yl500-rgb: 251, 227, 156;
  --zmp-color-yl500-shade: #f9d875;
  --zmp-color-yl500-tint: #fdeec3;
  --zmp-color-yl600: #fcedbd;
  --zmp-color-yl600-rgb: 252, 237, 189;
  --zmp-color-yl600-shade: #fae296;
  --zmp-color-yl600-tint: #fef8e4;
  --zmp-color-yl700: #fef6de;
  --zmp-color-yl700-rgb: 254, 246, 222;
  --zmp-color-yl700-shade: #fdebb6;
  --zmp-color-yl700-tint: #ffffff;
  --zmp-color-yd300: #e9d18b;
  --zmp-color-yd300-rgb: 233, 209, 139;
  --zmp-color-yd300-shade: #e2c369;
  --zmp-color-yd300-tint: #f0dfad;
  --zmp-color-yd400: #baa76f;
  --zmp-color-yd400-rgb: 186, 167, 111;
  --zmp-color-yd400-shade: #ad9653;
  --zmp-color-yd400-tint: #c7b88b;
  --zmp-color-yd500: #8c7d53;
  --zmp-color-yd500-rgb: 140, 125, 83;
  --zmp-color-yd500-shade: #726644;
  --zmp-color-yd500-tint: #a39364;
  --zmp-color-yd600: #5d5438;
  --zmp-color-yd600-rgb: 93, 84, 56;
  --zmp-color-yd600-shade: #443d29;
  --zmp-color-yd600-tint: #766b47;
  --zmp-color-yd700: #3a3423;
  --zmp-color-yd700-rgb: 58, 52, 35;
  --zmp-color-yd700-shade: #211d14;
  --zmp-color-yd700-tint: #534b32;
  --zmp-color-tl300: #00adf4;
  --zmp-color-tl300-rgb: 0, 173, 244;
  --zmp-color-tl300-shade: #0090cb;
  --zmp-color-tl300-tint: #1ebdff;
  --zmp-color-tl400: #33bcf6;
  --zmp-color-tl400-rgb: 51, 188, 246;
  --zmp-color-tl400-shade: #0caff4;
  --zmp-color-tl400-tint: #5ac9f8;
  --zmp-color-tl500: #66cef8;
  --zmp-color-tl500-rgb: 102, 206, 248;
  --zmp-color-tl500-shade: #3fc2f6;
  --zmp-color-tl500-tint: #8ddafa;
  --zmp-color-tl600: #99defb;
  --zmp-color-tl600-rgb: 153, 222, 251;
  --zmp-color-tl600-shade: #72d1f9;
  --zmp-color-tl600-tint: #c0ebfd;
  --zmp-color-tl700: #cceffd;
  --zmp-color-tl700-rgb: 204, 239, 253;
  --zmp-color-tl700-shade: #a5e3fb;
  --zmp-color-tl700-tint: #f3fbff;
  --zmp-color-td300: #4bb2dd;
  --zmp-color-td300-rgb: 75, 178, 221;
  --zmp-color-td300-shade: #29a3d7;
  --zmp-color-td300-tint: #6dc1e3;
  --zmp-color-td400: #3c8eb1;
  --zmp-color-td400-rgb: 60, 142, 177;
  --zmp-color-td400-shade: #327693;
  --zmp-color-td400-tint: #52a2c4;
  --zmp-color-td500: #2d6b85;
  --zmp-color-td500-rgb: 45, 107, 133;
  --zmp-color-td500-shade: #235267;
  --zmp-color-td500-tint: #3784a3;
  --zmp-color-td600: #1e4758;
  --zmp-color-td600-rgb: 30, 71, 88;
  --zmp-color-td600-shade: #142e3a;
  --zmp-color-td600-tint: #286076;
  --zmp-color-td700: #132d37;
  --zmp-color-td700-rgb: 19, 45, 55;
  --zmp-color-td700-shade: #091419;
  --zmp-color-td700-tint: #1d4655;
  --zmp-color-pul300: #7562d8;
  --zmp-color-pul300-rgb: 117, 98, 216;
  --zmp-color-pul300-shade: #5841d0;
  --zmp-color-pul300-tint: #9283e0;
  --zmp-color-pul400: #9181e0;
  --zmp-color-pul400-rgb: 145, 129, 224;
  --zmp-color-pul400-shade: #7460d8;
  --zmp-color-pul400-tint: #aea2e8;
  --zmp-color-pul500: #aca1e8;
  --zmp-color-pul500-rgb: 172, 161, 232;
  --zmp-color-pul500-shade: #8f80e0;
  --zmp-color-pul500-tint: #c9c2f0;
  --zmp-color-pul600: #c8c0ef;
  --zmp-color-pul600-rgb: 200, 192, 239;
  --zmp-color-pul600-shade: #ac9fe7;
  --zmp-color-pul600-tint: #e4e1f7;
  --zmp-color-pul700: #e3e0f7;
  --zmp-color-pul700-rgb: 227, 224, 247;
  --zmp-color-pul700-shade: #c6c0ef;
  --zmp-color-pul700-tint: #ffffff;
  --zmp-color-pud300: #998dd4;
  --zmp-color-pud300-rgb: 153, 141, 212;
  --zmp-color-pud300-shade: #7e6fc9;
  --zmp-color-pud300-tint: #b4abdf;
  --zmp-color-pud400: #7a71aa;
  --zmp-color-pud400-rgb: 122, 113, 170;
  --zmp-color-pud400-shade: #645b98;
  --zmp-color-pud400-tint: #928bb9;
  --zmp-color-pud500: #5c557f;
  --zmp-color-pud500-rgb: 92, 85, 127;
  --zmp-color-pud500-shade: #4a4567;
  --zmp-color-pud500-tint: #6e6597;
  --zmp-color-pud600: #3d3855;
  --zmp-color-pud600-rgb: 61, 56, 85;
  --zmp-color-pud600-shade: #2b283c;
  --zmp-color-pud600-tint: #4f486e;
  --zmp-color-pud700: #262335;
  --zmp-color-pud700-rgb: 38, 35, 53;
  --zmp-color-pud700-shade: #14131c;
  --zmp-color-pud700-tint: #38334e;
  --zmp-color-pkl300: #ea87ff;
  --zmp-color-pkl300-rgb: 234, 135, 255;
  --zmp-color-pkl300-shade: #e35eff;
  --zmp-color-pkl300-tint: #f1b0ff;
  --zmp-color-pkl400: #ee9fff;
  --zmp-color-pkl400-rgb: 238, 159, 255;
  --zmp-color-pkl400-shade: #e776ff;
  --zmp-color-pkl400-tint: #f5c8ff;
  --zmp-color-pkl500: #f2b7ff;
  --zmp-color-pkl500-rgb: 242, 183, 255;
  --zmp-color-pkl500-shade: #eb8eff;
  --zmp-color-pkl500-tint: #f9e0ff;
  --zmp-color-pkl600: #f7cfff;
  --zmp-color-pkl600-rgb: 247, 207, 255;
  --zmp-color-pkl600-shade: #f0a6ff;
  --zmp-color-pkl600-tint: #fef8ff;
  --zmp-color-pkl700: #fbe7ff;
  --zmp-color-pkl700-rgb: 251, 231, 255;
  --zmp-color-pkl700-shade: #f4beff;
  --zmp-color-pkl700-tint: #ffffff;
  --zmp-color-pkd300: #e6abf3;
  --zmp-color-pkd300-rgb: 230, 171, 243;
  --zmp-color-pkd300-shade: #db87ee;
  --zmp-color-pkd300-tint: #f1cff8;
  --zmp-color-pkd400: #b889c2;
  --zmp-color-pkd400-rgb: 184, 137, 194;
  --zmp-color-pkd400-shade: #a86eb4;
  --zmp-color-pkd400-tint: #c8a4d0;
  --zmp-color-pkd500: #8a6792;
  --zmp-color-pkd500-rgb: 138, 103, 146;
  --zmp-color-pkd500-shade: #73567a;
  --zmp-color-pkd500-tint: #9d7ea4;
  --zmp-color-pkd600: #5c4461;
  --zmp-color-pkd600-rgb: 92, 68, 97;
  --zmp-color-pkd600-shade: #453349;
  --zmp-color-pkd600-tint: #735579;
  --zmp-color-pkd700: #3a2b3d;
  --zmp-color-pkd700-rgb: 58, 43, 61;
  --zmp-color-pkd700-shade: #231a25;
  --zmp-color-pkd700-tint: #513c55;
}
.color-theme-red {
  --zmp-theme-color: #ff3b30;
  --zmp-theme-color-rgb: 255, 59, 48;
  --zmp-theme-color-shade: #ff1407;
  --zmp-theme-color-tint: #ff6259;
}
.color-theme-green {
  --zmp-theme-color: #4cd964;
  --zmp-theme-color-rgb: 76, 217, 100;
  --zmp-theme-color-shade: #2cd048;
  --zmp-theme-color-tint: #6ee081;
}
.color-theme-blue {
  --zmp-theme-color: #2196f3;
  --zmp-theme-color-rgb: 33, 150, 243;
  --zmp-theme-color-shade: #0c82df;
  --zmp-theme-color-tint: #48a8f5;
}
.color-theme-pink {
  --zmp-theme-color: #ff2d55;
  --zmp-theme-color-rgb: 255, 45, 85;
  --zmp-theme-color-shade: #ff0434;
  --zmp-theme-color-tint: #ff5676;
}
.color-theme-yellow {
  --zmp-theme-color: #ffcc00;
  --zmp-theme-color-rgb: 255, 204, 0;
  --zmp-theme-color-shade: #d6ab00;
  --zmp-theme-color-tint: #ffd429;
}
.color-theme-orange {
  --zmp-theme-color: #ff9500;
  --zmp-theme-color-rgb: 255, 149, 0;
  --zmp-theme-color-shade: #d67d00;
  --zmp-theme-color-tint: #ffa629;
}
.color-theme-purple {
  --zmp-theme-color: #9c27b0;
  --zmp-theme-color-rgb: 156, 39, 176;
  --zmp-theme-color-shade: #7e208f;
  --zmp-theme-color-tint: #b92fd1;
}
.color-theme-deeppurple {
  --zmp-theme-color: #673ab7;
  --zmp-theme-color-rgb: 103, 58, 183;
  --zmp-theme-color-shade: #563098;
  --zmp-theme-color-tint: #7c52c8;
}
.color-theme-lightblue {
  --zmp-theme-color: #5ac8fa;
  --zmp-theme-color-rgb: 90, 200, 250;
  --zmp-theme-color-shade: #32bbf9;
  --zmp-theme-color-tint: #82d5fb;
}
.color-theme-teal {
  --zmp-theme-color: #009688;
  --zmp-theme-color-rgb: 0, 150, 136;
  --zmp-theme-color-shade: #006d63;
  --zmp-theme-color-tint: #00bfad;
}
.color-theme-lime {
  --zmp-theme-color: #cddc39;
  --zmp-theme-color-rgb: 205, 220, 57;
  --zmp-theme-color-shade: #bac923;
  --zmp-theme-color-tint: #d6e25c;
}
.color-theme-deeporange {
  --zmp-theme-color: #ff6b22;
  --zmp-theme-color-rgb: 255, 107, 34;
  --zmp-theme-color-shade: #f85200;
  --zmp-theme-color-tint: #ff864b;
}
.color-theme-gray {
  --zmp-theme-color: #8e8e93;
  --zmp-theme-color-rgb: 142, 142, 147;
  --zmp-theme-color-shade: #79797f;
  --zmp-theme-color-tint: #a3a3a7;
}
.color-theme-white {
  --zmp-theme-color: #ffffff;
  --zmp-theme-color-rgb: 255, 255, 255;
  --zmp-theme-color-shade: #ebebeb;
  --zmp-theme-color-tint: #ffffff;
}
.color-theme-black {
  --zmp-theme-color: #000000;
  --zmp-theme-color-rgb: 0, 0, 0;
  --zmp-theme-color-shade: #000000;
  --zmp-theme-color-tint: #141414;
}
.color-theme-bd200 {
  --zmp-theme-color: #81aded;
  --zmp-theme-color-rgb: 129, 173, 237;
  --zmp-theme-color-shade: #5d96e8;
  --zmp-theme-color-tint: #a5c4f2;
}
.color-theme-bd300 {
  --zmp-theme-color: #4c8ae5;
  --zmp-theme-color-rgb: 76, 138, 229;
  --zmp-theme-color-shade: #2873e0;
  --zmp-theme-color-tint: #70a1ea;
}
.color-theme-bd400 {
  --zmp-theme-color: #3d6eb7;
  --zmp-theme-color-rgb: 61, 110, 183;
  --zmp-theme-color-shade: #335c98;
  --zmp-theme-color-tint: #5683c7;
}
.color-theme-bd500 {
  --zmp-theme-color: #2e5389;
  --zmp-theme-color-rgb: 46, 83, 137;
  --zmp-theme-color-shade: #24406a;
  --zmp-theme-color-tint: #3866a8;
}
.color-theme-bd600 {
  --zmp-theme-color: #1e375c;
  --zmp-theme-color-rgb: 30, 55, 92;
  --zmp-theme-color-shade: #14253d;
  --zmp-theme-color-tint: #28497b;
}
.color-theme-bd700 {
  --zmp-theme-color: #132339;
  --zmp-theme-color-rgb: 19, 35, 57;
  --zmp-theme-color-shade: #09101a;
  --zmp-theme-color-tint: #1d3658;
}
.color-theme-bl200 {
  --zmp-theme-color: #0043a6;
  --zmp-theme-color-rgb: 0, 67, 166;
  --zmp-theme-color-shade: #00337d;
  --zmp-theme-color-tint: #0053cf;
}
.color-theme-bl300 {
  --zmp-theme-color: #0068ff;
  --zmp-theme-color-rgb: 0, 104, 255;
  --zmp-theme-color-shade: #0057d6;
  --zmp-theme-color-tint: #2980ff;
}
.color-theme-bl400 {
  --zmp-theme-color: #3386ff;
  --zmp-theme-color-rgb: 51, 134, 255;
  --zmp-theme-color-shade: #0a6eff;
  --zmp-theme-color-tint: #5c9eff;
}
.color-theme-bl500 {
  --zmp-theme-color: #66a4ff;
  --zmp-theme-color-rgb: 102, 164, 255;
  --zmp-theme-color-shade: #3d8cff;
  --zmp-theme-color-tint: #8fbcff;
}
.color-theme-bl600 {
  --zmp-theme-color: #99c3ff;
  --zmp-theme-color-rgb: 153, 195, 255;
  --zmp-theme-color-shade: #70abff;
  --zmp-theme-color-tint: #c2dbff;
}
.color-theme-bl700 {
  --zmp-theme-color: #cce1ff;
  --zmp-theme-color-rgb: 204, 225, 255;
  --zmp-theme-color-shade: #a3c9ff;
  --zmp-theme-color-tint: #f5f9ff;
}
.color-theme-nd200 {
  --zmp-theme-color: #dbdfe2;
  --zmp-theme-color-rgb: 219, 223, 226;
  --zmp-theme-color-shade: #c4cbd0;
  --zmp-theme-color-tint: #f2f3f4;
}
.color-theme-nd300 {
  --zmp-theme-color: #ccd1d6;
  --zmp-theme-color-rgb: 204, 209, 214;
  --zmp-theme-color-shade: #b5bdc4;
  --zmp-theme-color-tint: #e3e5e8;
}
.color-theme-nd400 {
  --zmp-theme-color: #8b8f92;
  --zmp-theme-color-rgb: 139, 143, 146;
  --zmp-theme-color-shade: #767b7e;
  --zmp-theme-color-tint: #a0a3a6;
}
.color-theme-nd500 {
  --zmp-theme-color: #4a4b4d;
  --zmp-theme-color-rgb: 74, 75, 77;
  --zmp-theme-color-shade: #363738;
  --zmp-theme-color-tint: #5e5f62;
}
.color-theme-nd600 {
  --zmp-theme-color: #19191a;
  --zmp-theme-color-rgb: 25, 25, 26;
  --zmp-theme-color-shade: #050505;
  --zmp-theme-color-tint: #2d2d2f;
}
.color-theme-nd700 {
  --zmp-theme-color: #090909;
  --zmp-theme-color-rgb: 9, 9, 9;
  --zmp-theme-color-shade: #000000;
  --zmp-theme-color-tint: #1d1d1d;
}
.color-theme-nl100 {
  --zmp-theme-color: #050a19;
  --zmp-theme-color-rgb: 5, 10, 25;
  --zmp-theme-color-shade: #000000;
  --zmp-theme-color-tint: #0c183b;
}
.color-theme-nl200 {
  --zmp-theme-color: #001121;
  --zmp-theme-color-rgb: 0, 17, 33;
  --zmp-theme-color-shade: #000000;
  --zmp-theme-color-tint: #00264a;
}
.color-theme-nl300 {
  --zmp-theme-color: #001a33;
  --zmp-theme-color-rgb: 0, 26, 51;
  --zmp-theme-color-shade: #00050a;
  --zmp-theme-color-tint: #002f5c;
}
.color-theme-nl400 {
  --zmp-theme-color: #33485c;
  --zmp-theme-color-rgb: 51, 72, 92;
  --zmp-theme-color-shade: #243342;
  --zmp-theme-color-tint: #425d76;
}
.color-theme-nl500 {
  --zmp-theme-color: #667685;
  --zmp-theme-color-rgb: 102, 118, 133;
  --zmp-theme-color-shade: #54626e;
  --zmp-theme-color-tint: #7a8a99;
}
.color-theme-nl600 {
  --zmp-theme-color: #99a3ad;
  --zmp-theme-color-rgb: 153, 163, 173;
  --zmp-theme-color-shade: #828f9b;
  --zmp-theme-color-tint: #b0b7bf;
}
.color-theme-nl700 {
  --zmp-theme-color: #bfc6cc;
  --zmp-theme-color-rgb: 191, 198, 204;
  --zmp-theme-color-shade: #a8b2ba;
  --zmp-theme-color-tint: #d6dade;
}
.color-theme-gd300 {
  --zmp-theme-color: #47bd8e;
  --zmp-theme-color-rgb: 71, 189, 142;
  --zmp-theme-color-shade: #3aa178;
  --zmp-theme-color-tint: #65c8a0;
}
.color-theme-gd400 {
  --zmp-theme-color: #399772;
  --zmp-theme-color-rgb: 57, 151, 114;
  --zmp-theme-color-shade: #2e795c;
  --zmp-theme-color-tint: #44b588;
}
.color-theme-gd500 {
  --zmp-theme-color: #2b7155;
  --zmp-theme-color-rgb: 43, 113, 85;
  --zmp-theme-color-shade: #20533f;
  --zmp-theme-color-tint: #368f6b;
}
.color-theme-gd600 {
  --zmp-theme-color: #1c4c39;
  --zmp-theme-color-rgb: 28, 76, 57;
  --zmp-theme-color-shade: #112e23;
  --zmp-theme-color-tint: #276a4f;
}
.color-theme-gd700 {
  --zmp-theme-color: #122f24;
  --zmp-theme-color-rgb: 18, 47, 36;
  --zmp-theme-color-shade: #07110d;
  --zmp-theme-color-tint: #1d4d3b;
}
.color-theme-gl300 {
  --zmp-theme-color: #00c578;
  --zmp-theme-color-rgb: 0, 197, 120;
  --zmp-theme-color-shade: #009c5f;
  --zmp-theme-color-tint: #00ee91;
}
.color-theme-gl400 {
  --zmp-theme-color: #33d193;
  --zmp-theme-color-rgb: 51, 209, 147;
  --zmp-theme-color-shade: #28b37d;
  --zmp-theme-color-tint: #54d9a5;
}
.color-theme-gl500 {
  --zmp-theme-color: #66dcae;
  --zmp-theme-color-rgb: 102, 220, 174;
  --zmp-theme-color-shade: #45d49c;
  --zmp-theme-color-tint: #87e4c0;
}
.color-theme-gl600 {
  --zmp-theme-color: #99e8c9;
  --zmp-theme-color-rgb: 153, 232, 201;
  --zmp-theme-color-shade: #78e0b7;
  --zmp-theme-color-tint: #baf0db;
}
.color-theme-gl700 {
  --zmp-theme-color: #ccf3e4;
  --zmp-theme-color-rgb: 204, 243, 228;
  --zmp-theme-color-shade: #abebd3;
  --zmp-theme-color-tint: #edfbf5;
}
.color-theme-rd300 {
  --zmp-theme-color: #e1807d;
  --zmp-theme-color-rgb: 225, 128, 125;
  --zmp-theme-color-shade: #d9605c;
  --zmp-theme-color-tint: #e9a09e;
}
.color-theme-rd400 {
  --zmp-theme-color: #b46664;
  --zmp-theme-color-rgb: 180, 102, 100;
  --zmp-theme-color-shade: #a1504e;
  --zmp-theme-color-tint: #c1817f;
}
.color-theme-rd500 {
  --zmp-theme-color: #874d4b;
  --zmp-theme-color-rgb: 135, 77, 75;
  --zmp-theme-color-shade: #6d3e3c;
  --zmp-theme-color-tint: #a15c5a;
}
.color-theme-rd600 {
  --zmp-theme-color: #5a3332;
  --zmp-theme-color-rgb: 90, 51, 50;
  --zmp-theme-color-shade: #402423;
  --zmp-theme-color-tint: #744241;
}
.color-theme-rd700 {
  --zmp-theme-color: #38201f;
  --zmp-theme-color-rgb: 56, 32, 31;
  --zmp-theme-color-shade: #1e1110;
  --zmp-theme-color-tint: #522f2e;
}
.color-theme-rl300 {
  --zmp-theme-color: #ef4e49;
  --zmp-theme-color-rgb: 239, 78, 73;
  --zmp-theme-color-shade: #ec2a23;
  --zmp-theme-color-tint: #f2726f;
}
.color-theme-rl400 {
  --zmp-theme-color: #f2716d;
  --zmp-theme-color-rgb: 242, 113, 109;
  --zmp-theme-color-shade: #ef4d48;
  --zmp-theme-color-tint: #f59592;
}
.color-theme-rl500 {
  --zmp-theme-color: #f59592;
  --zmp-theme-color-rgb: 245, 149, 146;
  --zmp-theme-color-shade: #f2716d;
  --zmp-theme-color-tint: #f8b9b7;
}
.color-theme-rl600 {
  --zmp-theme-color: #f9b8b6;
  --zmp-theme-color-rgb: 249, 184, 182;
  --zmp-theme-color-shade: #f69390;
  --zmp-theme-color-tint: #fcdddc;
}
.color-theme-rl700 {
  --zmp-theme-color: #fcdcdb;
  --zmp-theme-color-rgb: 252, 220, 219;
  --zmp-theme-color-shade: #f9b7b5;
  --zmp-theme-color-tint: #ffffff;
}
.color-theme-w300 {
  --zmp-theme-color: #ffffff;
  --zmp-theme-color-rgb: 255, 255, 255;
  --zmp-theme-color-shade: #ebebeb;
  --zmp-theme-color-tint: #ffffff;
}
.color-theme-w400 {
  --zmp-theme-color: rgba(255, 255, 255, 0.75);
  --zmp-theme-color-rgb: 255, 255, 255;
  --zmp-theme-color-shade: rgba(235, 235, 235, 0.75);
  --zmp-theme-color-tint: rgba(255, 255, 255, 0.75);
}
.color-theme-w500 {
  --zmp-theme-color: rgba(255, 255, 255, 0.5);
  --zmp-theme-color-rgb: 255, 255, 255;
  --zmp-theme-color-shade: rgba(235, 235, 235, 0.5);
  --zmp-theme-color-tint: rgba(255, 255, 255, 0.5);
}
.color-theme-w600 {
  --zmp-theme-color: rgba(255, 255, 255, 0.25);
  --zmp-theme-color-rgb: 255, 255, 255;
  --zmp-theme-color-shade: rgba(235, 235, 235, 0.25);
  --zmp-theme-color-tint: rgba(255, 255, 255, 0.25);
}
.color-theme-w700 {
  --zmp-theme-color: rgba(255, 255, 255, 0.1);
  --zmp-theme-color-rgb: 255, 255, 255;
  --zmp-theme-color-shade: rgba(235, 235, 235, 0.1);
  --zmp-theme-color-tint: rgba(255, 255, 255, 0.1);
}
.color-theme-dg300 {
  --zmp-theme-color: #96a3ad;
  --zmp-theme-color-rgb: 150, 163, 173;
  --zmp-theme-color-shade: #7f8f9b;
  --zmp-theme-color-tint: #adb7bf;
}
.color-theme-dg400 {
  --zmp-theme-color: #666f76;
  --zmp-theme-color-rgb: 102, 111, 118;
  --zmp-theme-color-shade: #535a60;
  --zmp-theme-color-tint: #79848b;
}
.color-theme-dg500 {
  --zmp-theme-color: #363b3e;
  --zmp-theme-color-rgb: 54, 59, 62;
  --zmp-theme-color-shade: #232628;
  --zmp-theme-color-tint: #495054;
}
.color-theme-dg600 {
  --zmp-theme-color: #121415;
  --zmp-theme-color-rgb: 18, 20, 21;
  --zmp-theme-color-shade: #000000;
  --zmp-theme-color-tint: #25292b;
}
.color-theme-dg700 {
  --zmp-theme-color: #060707;
  --zmp-theme-color-rgb: 6, 7, 7;
  --zmp-theme-color-shade: #000000;
  --zmp-theme-color-tint: #191d1d;
}
.color-theme-lg300 {
  --zmp-theme-color: #778d9e;
  --zmp-theme-color-rgb: 119, 141, 158;
  --zmp-theme-color-shade: #62798a;
  --zmp-theme-color-tint: #8fa1af;
}
.color-theme-lg400 {
  --zmp-theme-color: #92a4b1;
  --zmp-theme-color-rgb: 146, 164, 177;
  --zmp-theme-color-shade: #7a90a0;
  --zmp-theme-color-tint: #aab8c2;
}
.color-theme-lg500 {
  --zmp-theme-color: #adbbc5;
  --zmp-theme-color-rgb: 173, 187, 197;
  --zmp-theme-color-shade: #95a7b4;
  --zmp-theme-color-tint: #c5cfd6;
}
.color-theme-lg600 {
  --zmp-theme-color: #c9d1d8;
  --zmp-theme-color-rgb: 201, 209, 216;
  --zmp-theme-color-shade: #b1bdc7;
  --zmp-theme-color-tint: #e1e5e9;
}
.color-theme-lg700 {
  --zmp-theme-color: #e4e8ec;
  --zmp-theme-color-rgb: 228, 232, 236;
  --zmp-theme-color-shade: #ccd4db;
  --zmp-theme-color-tint: #fcfcfd;
}
.color-theme-bk300 {
  --zmp-theme-color: #000000;
  --zmp-theme-color-rgb: 0, 0, 0;
  --zmp-theme-color-shade: #000000;
  --zmp-theme-color-tint: #141414;
}
.color-theme-bk400 {
  --zmp-theme-color: rgba(0, 0, 0, 0.75);
  --zmp-theme-color-rgb: 0, 0, 0;
  --zmp-theme-color-shade: rgba(0, 0, 0, 0.75);
  --zmp-theme-color-tint: rgba(20, 20, 20, 0.75);
}
.color-theme-bk500 {
  --zmp-theme-color: rgba(0, 0, 0, 0.5);
  --zmp-theme-color-rgb: 0, 0, 0;
  --zmp-theme-color-shade: rgba(0, 0, 0, 0.5);
  --zmp-theme-color-tint: rgba(20, 20, 20, 0.5);
}
.color-theme-bk600 {
  --zmp-theme-color: rgba(0, 0, 0, 0.25);
  --zmp-theme-color-rgb: 0, 0, 0;
  --zmp-theme-color-shade: rgba(0, 0, 0, 0.25);
  --zmp-theme-color-tint: rgba(20, 20, 20, 0.25);
}
.color-theme-bk700 {
  --zmp-theme-color: rgba(0, 0, 0, 0.15);
  --zmp-theme-color-rgb: 0, 0, 0;
  --zmp-theme-color-shade: rgba(0, 0, 0, 0.15);
  --zmp-theme-color-tint: rgba(20, 20, 20, 0.15);
}
.color-theme-ol300 {
  --zmp-theme-color: #f5832f;
  --zmp-theme-color-rgb: 245, 131, 47;
  --zmp-theme-color-shade: #f06c0c;
  --zmp-theme-color-tint: #f79a56;
}
.color-theme-ol400 {
  --zmp-theme-color: #f79c59;
  --zmp-theme-color-rgb: 247, 156, 89;
  --zmp-theme-color-shade: #f58532;
  --zmp-theme-color-tint: #f9b380;
}
.color-theme-ol500 {
  --zmp-theme-color: #f9b582;
  --zmp-theme-color-rgb: 249, 181, 130;
  --zmp-theme-color-shade: #f79e5b;
  --zmp-theme-color-tint: #fbcca9;
}
.color-theme-ol600 {
  --zmp-theme-color: #fbcdac;
  --zmp-theme-color-rgb: 251, 205, 172;
  --zmp-theme-color-shade: #f9b685;
  --zmp-theme-color-tint: #fde4d3;
}
.color-theme-ol700 {
  --zmp-theme-color: #fde6d5;
  --zmp-theme-color-rgb: 253, 230, 213;
  --zmp-theme-color-shade: #fbcfae;
  --zmp-theme-color-tint: #fffdfc;
}
.color-theme-od300 {
  --zmp-theme-color: #e39f6d;
  --zmp-theme-color-rgb: 227, 159, 109;
  --zmp-theme-color-shade: #dc884b;
  --zmp-theme-color-tint: #eab68f;
}
.color-theme-od400 {
  --zmp-theme-color: #b67f57;
  --zmp-theme-color-rgb: 182, 127, 87;
  --zmp-theme-color-shade: #9f6b45;
  --zmp-theme-color-tint: #c29573;
}
.color-theme-od500 {
  --zmp-theme-color: #885f41;
  --zmp-theme-color-rgb: 136, 95, 65;
  --zmp-theme-color-shade: #6c4c34;
  --zmp-theme-color-tint: #a4724e;
}
.color-theme-od600 {
  --zmp-theme-color: #5b402c;
  --zmp-theme-color-rgb: 91, 64, 44;
  --zmp-theme-color-shade: #3f2d1f;
  --zmp-theme-color-tint: #775339;
}
.color-theme-od700 {
  --zmp-theme-color: #39281b;
  --zmp-theme-color-rgb: 57, 40, 27;
  --zmp-theme-color-shade: #1d150e;
  --zmp-theme-color-tint: #553b28;
}
.color-theme-yl300 {
  --zmp-theme-color: #f8d15a;
  --zmp-theme-color-rgb: 248, 209, 90;
  --zmp-theme-color-shade: #f6c633;
  --zmp-theme-color-tint: #fadc81;
}
.color-theme-yl400 {
  --zmp-theme-color: #f9d97b;
  --zmp-theme-color-rgb: 249, 217, 123;
  --zmp-theme-color-shade: #f7ce54;
  --zmp-theme-color-tint: #fbe4a2;
}
.color-theme-yl500 {
  --zmp-theme-color: #fbe39c;
  --zmp-theme-color-rgb: 251, 227, 156;
  --zmp-theme-color-shade: #f9d875;
  --zmp-theme-color-tint: #fdeec3;
}
.color-theme-yl600 {
  --zmp-theme-color: #fcedbd;
  --zmp-theme-color-rgb: 252, 237, 189;
  --zmp-theme-color-shade: #fae296;
  --zmp-theme-color-tint: #fef8e4;
}
.color-theme-yl700 {
  --zmp-theme-color: #fef6de;
  --zmp-theme-color-rgb: 254, 246, 222;
  --zmp-theme-color-shade: #fdebb6;
  --zmp-theme-color-tint: #ffffff;
}
.color-theme-yd300 {
  --zmp-theme-color: #e9d18b;
  --zmp-theme-color-rgb: 233, 209, 139;
  --zmp-theme-color-shade: #e2c369;
  --zmp-theme-color-tint: #f0dfad;
}
.color-theme-yd400 {
  --zmp-theme-color: #baa76f;
  --zmp-theme-color-rgb: 186, 167, 111;
  --zmp-theme-color-shade: #ad9653;
  --zmp-theme-color-tint: #c7b88b;
}
.color-theme-yd500 {
  --zmp-theme-color: #8c7d53;
  --zmp-theme-color-rgb: 140, 125, 83;
  --zmp-theme-color-shade: #726644;
  --zmp-theme-color-tint: #a39364;
}
.color-theme-yd600 {
  --zmp-theme-color: #5d5438;
  --zmp-theme-color-rgb: 93, 84, 56;
  --zmp-theme-color-shade: #443d29;
  --zmp-theme-color-tint: #766b47;
}
.color-theme-yd700 {
  --zmp-theme-color: #3a3423;
  --zmp-theme-color-rgb: 58, 52, 35;
  --zmp-theme-color-shade: #211d14;
  --zmp-theme-color-tint: #534b32;
}
.color-theme-tl300 {
  --zmp-theme-color: #00adf4;
  --zmp-theme-color-rgb: 0, 173, 244;
  --zmp-theme-color-shade: #0090cb;
  --zmp-theme-color-tint: #1ebdff;
}
.color-theme-tl400 {
  --zmp-theme-color: #33bcf6;
  --zmp-theme-color-rgb: 51, 188, 246;
  --zmp-theme-color-shade: #0caff4;
  --zmp-theme-color-tint: #5ac9f8;
}
.color-theme-tl500 {
  --zmp-theme-color: #66cef8;
  --zmp-theme-color-rgb: 102, 206, 248;
  --zmp-theme-color-shade: #3fc2f6;
  --zmp-theme-color-tint: #8ddafa;
}
.color-theme-tl600 {
  --zmp-theme-color: #99defb;
  --zmp-theme-color-rgb: 153, 222, 251;
  --zmp-theme-color-shade: #72d1f9;
  --zmp-theme-color-tint: #c0ebfd;
}
.color-theme-tl700 {
  --zmp-theme-color: #cceffd;
  --zmp-theme-color-rgb: 204, 239, 253;
  --zmp-theme-color-shade: #a5e3fb;
  --zmp-theme-color-tint: #f3fbff;
}
.color-theme-td300 {
  --zmp-theme-color: #4bb2dd;
  --zmp-theme-color-rgb: 75, 178, 221;
  --zmp-theme-color-shade: #29a3d7;
  --zmp-theme-color-tint: #6dc1e3;
}
.color-theme-td400 {
  --zmp-theme-color: #3c8eb1;
  --zmp-theme-color-rgb: 60, 142, 177;
  --zmp-theme-color-shade: #327693;
  --zmp-theme-color-tint: #52a2c4;
}
.color-theme-td500 {
  --zmp-theme-color: #2d6b85;
  --zmp-theme-color-rgb: 45, 107, 133;
  --zmp-theme-color-shade: #235267;
  --zmp-theme-color-tint: #3784a3;
}
.color-theme-td600 {
  --zmp-theme-color: #1e4758;
  --zmp-theme-color-rgb: 30, 71, 88;
  --zmp-theme-color-shade: #142e3a;
  --zmp-theme-color-tint: #286076;
}
.color-theme-td700 {
  --zmp-theme-color: #132d37;
  --zmp-theme-color-rgb: 19, 45, 55;
  --zmp-theme-color-shade: #091419;
  --zmp-theme-color-tint: #1d4655;
}
.color-theme-pul300 {
  --zmp-theme-color: #7562d8;
  --zmp-theme-color-rgb: 117, 98, 216;
  --zmp-theme-color-shade: #5841d0;
  --zmp-theme-color-tint: #9283e0;
}
.color-theme-pul400 {
  --zmp-theme-color: #9181e0;
  --zmp-theme-color-rgb: 145, 129, 224;
  --zmp-theme-color-shade: #7460d8;
  --zmp-theme-color-tint: #aea2e8;
}
.color-theme-pul500 {
  --zmp-theme-color: #aca1e8;
  --zmp-theme-color-rgb: 172, 161, 232;
  --zmp-theme-color-shade: #8f80e0;
  --zmp-theme-color-tint: #c9c2f0;
}
.color-theme-pul600 {
  --zmp-theme-color: #c8c0ef;
  --zmp-theme-color-rgb: 200, 192, 239;
  --zmp-theme-color-shade: #ac9fe7;
  --zmp-theme-color-tint: #e4e1f7;
}
.color-theme-pul700 {
  --zmp-theme-color: #e3e0f7;
  --zmp-theme-color-rgb: 227, 224, 247;
  --zmp-theme-color-shade: #c6c0ef;
  --zmp-theme-color-tint: #ffffff;
}
.color-theme-pud300 {
  --zmp-theme-color: #998dd4;
  --zmp-theme-color-rgb: 153, 141, 212;
  --zmp-theme-color-shade: #7e6fc9;
  --zmp-theme-color-tint: #b4abdf;
}
.color-theme-pud400 {
  --zmp-theme-color: #7a71aa;
  --zmp-theme-color-rgb: 122, 113, 170;
  --zmp-theme-color-shade: #645b98;
  --zmp-theme-color-tint: #928bb9;
}
.color-theme-pud500 {
  --zmp-theme-color: #5c557f;
  --zmp-theme-color-rgb: 92, 85, 127;
  --zmp-theme-color-shade: #4a4567;
  --zmp-theme-color-tint: #6e6597;
}
.color-theme-pud600 {
  --zmp-theme-color: #3d3855;
  --zmp-theme-color-rgb: 61, 56, 85;
  --zmp-theme-color-shade: #2b283c;
  --zmp-theme-color-tint: #4f486e;
}
.color-theme-pud700 {
  --zmp-theme-color: #262335;
  --zmp-theme-color-rgb: 38, 35, 53;
  --zmp-theme-color-shade: #14131c;
  --zmp-theme-color-tint: #38334e;
}
.color-theme-pkl300 {
  --zmp-theme-color: #ea87ff;
  --zmp-theme-color-rgb: 234, 135, 255;
  --zmp-theme-color-shade: #e35eff;
  --zmp-theme-color-tint: #f1b0ff;
}
.color-theme-pkl400 {
  --zmp-theme-color: #ee9fff;
  --zmp-theme-color-rgb: 238, 159, 255;
  --zmp-theme-color-shade: #e776ff;
  --zmp-theme-color-tint: #f5c8ff;
}
.color-theme-pkl500 {
  --zmp-theme-color: #f2b7ff;
  --zmp-theme-color-rgb: 242, 183, 255;
  --zmp-theme-color-shade: #eb8eff;
  --zmp-theme-color-tint: #f9e0ff;
}
.color-theme-pkl600 {
  --zmp-theme-color: #f7cfff;
  --zmp-theme-color-rgb: 247, 207, 255;
  --zmp-theme-color-shade: #f0a6ff;
  --zmp-theme-color-tint: #fef8ff;
}
.color-theme-pkl700 {
  --zmp-theme-color: #fbe7ff;
  --zmp-theme-color-rgb: 251, 231, 255;
  --zmp-theme-color-shade: #f4beff;
  --zmp-theme-color-tint: #ffffff;
}
.color-theme-pkd300 {
  --zmp-theme-color: #e6abf3;
  --zmp-theme-color-rgb: 230, 171, 243;
  --zmp-theme-color-shade: #db87ee;
  --zmp-theme-color-tint: #f1cff8;
}
.color-theme-pkd400 {
  --zmp-theme-color: #b889c2;
  --zmp-theme-color-rgb: 184, 137, 194;
  --zmp-theme-color-shade: #a86eb4;
  --zmp-theme-color-tint: #c8a4d0;
}
.color-theme-pkd500 {
  --zmp-theme-color: #8a6792;
  --zmp-theme-color-rgb: 138, 103, 146;
  --zmp-theme-color-shade: #73567a;
  --zmp-theme-color-tint: #9d7ea4;
}
.color-theme-pkd600 {
  --zmp-theme-color: #5c4461;
  --zmp-theme-color-rgb: 92, 68, 97;
  --zmp-theme-color-shade: #453349;
  --zmp-theme-color-tint: #735579;
}
.color-theme-pkd700 {
  --zmp-theme-color: #3a2b3d;
  --zmp-theme-color-rgb: 58, 43, 61;
  --zmp-theme-color-shade: #231a25;
  --zmp-theme-color-tint: #513c55;
}
.color-red {
  --zmp-theme-color: #ff3b30;
  --zmp-theme-color-rgb: 255, 59, 48;
  --zmp-theme-color-shade: #ff1407;
  --zmp-theme-color-tint: #ff6259;
}
.text-color-red {
  --zmp-theme-color-text-color: #ff3b30;
}
.bg-color-red {
  --zmp-theme-color-bg-color: #ff3b30;
}
.border-color-red {
  --zmp-theme-color-border-color: #ff3b30;
}
.ripple-color-red,
.ripple-red {
  --zmp-theme-color-ripple-color: rgba(255, 59, 48, 0.3);
}
.color-green {
  --zmp-theme-color: #4cd964;
  --zmp-theme-color-rgb: 76, 217, 100;
  --zmp-theme-color-shade: #2cd048;
  --zmp-theme-color-tint: #6ee081;
}
.text-color-green {
  --zmp-theme-color-text-color: #4cd964;
}
.bg-color-green {
  --zmp-theme-color-bg-color: #4cd964;
}
.border-color-green {
  --zmp-theme-color-border-color: #4cd964;
}
.ripple-color-green,
.ripple-green {
  --zmp-theme-color-ripple-color: rgba(76, 217, 100, 0.3);
}
.color-blue {
  --zmp-theme-color: #2196f3;
  --zmp-theme-color-rgb: 33, 150, 243;
  --zmp-theme-color-shade: #0c82df;
  --zmp-theme-color-tint: #48a8f5;
}
.text-color-blue {
  --zmp-theme-color-text-color: #2196f3;
}
.bg-color-blue {
  --zmp-theme-color-bg-color: #2196f3;
}
.border-color-blue {
  --zmp-theme-color-border-color: #2196f3;
}
.ripple-color-blue,
.ripple-blue {
  --zmp-theme-color-ripple-color: rgba(33, 150, 243, 0.3);
}
.color-pink {
  --zmp-theme-color: #ff2d55;
  --zmp-theme-color-rgb: 255, 45, 85;
  --zmp-theme-color-shade: #ff0434;
  --zmp-theme-color-tint: #ff5676;
}
.text-color-pink {
  --zmp-theme-color-text-color: #ff2d55;
}
.bg-color-pink {
  --zmp-theme-color-bg-color: #ff2d55;
}
.border-color-pink {
  --zmp-theme-color-border-color: #ff2d55;
}
.ripple-color-pink,
.ripple-pink {
  --zmp-theme-color-ripple-color: rgba(255, 45, 85, 0.3);
}
.color-yellow {
  --zmp-theme-color: #ffcc00;
  --zmp-theme-color-rgb: 255, 204, 0;
  --zmp-theme-color-shade: #d6ab00;
  --zmp-theme-color-tint: #ffd429;
}
.text-color-yellow {
  --zmp-theme-color-text-color: #ffcc00;
}
.bg-color-yellow {
  --zmp-theme-color-bg-color: #ffcc00;
}
.border-color-yellow {
  --zmp-theme-color-border-color: #ffcc00;
}
.ripple-color-yellow,
.ripple-yellow {
  --zmp-theme-color-ripple-color: rgba(255, 204, 0, 0.3);
}
.color-orange {
  --zmp-theme-color: #ff9500;
  --zmp-theme-color-rgb: 255, 149, 0;
  --zmp-theme-color-shade: #d67d00;
  --zmp-theme-color-tint: #ffa629;
}
.text-color-orange {
  --zmp-theme-color-text-color: #ff9500;
}
.bg-color-orange {
  --zmp-theme-color-bg-color: #ff9500;
}
.border-color-orange {
  --zmp-theme-color-border-color: #ff9500;
}
.ripple-color-orange,
.ripple-orange {
  --zmp-theme-color-ripple-color: rgba(255, 149, 0, 0.3);
}
.color-purple {
  --zmp-theme-color: #9c27b0;
  --zmp-theme-color-rgb: 156, 39, 176;
  --zmp-theme-color-shade: #7e208f;
  --zmp-theme-color-tint: #b92fd1;
}
.text-color-purple {
  --zmp-theme-color-text-color: #9c27b0;
}
.bg-color-purple {
  --zmp-theme-color-bg-color: #9c27b0;
}
.border-color-purple {
  --zmp-theme-color-border-color: #9c27b0;
}
.ripple-color-purple,
.ripple-purple {
  --zmp-theme-color-ripple-color: rgba(156, 39, 176, 0.3);
}
.color-deeppurple {
  --zmp-theme-color: #673ab7;
  --zmp-theme-color-rgb: 103, 58, 183;
  --zmp-theme-color-shade: #563098;
  --zmp-theme-color-tint: #7c52c8;
}
.text-color-deeppurple {
  --zmp-theme-color-text-color: #673ab7;
}
.bg-color-deeppurple {
  --zmp-theme-color-bg-color: #673ab7;
}
.border-color-deeppurple {
  --zmp-theme-color-border-color: #673ab7;
}
.ripple-color-deeppurple,
.ripple-deeppurple {
  --zmp-theme-color-ripple-color: rgba(103, 58, 183, 0.3);
}
.color-lightblue {
  --zmp-theme-color: #5ac8fa;
  --zmp-theme-color-rgb: 90, 200, 250;
  --zmp-theme-color-shade: #32bbf9;
  --zmp-theme-color-tint: #82d5fb;
}
.text-color-lightblue {
  --zmp-theme-color-text-color: #5ac8fa;
}
.bg-color-lightblue {
  --zmp-theme-color-bg-color: #5ac8fa;
}
.border-color-lightblue {
  --zmp-theme-color-border-color: #5ac8fa;
}
.ripple-color-lightblue,
.ripple-lightblue {
  --zmp-theme-color-ripple-color: rgba(90, 200, 250, 0.3);
}
.color-teal {
  --zmp-theme-color: #009688;
  --zmp-theme-color-rgb: 0, 150, 136;
  --zmp-theme-color-shade: #006d63;
  --zmp-theme-color-tint: #00bfad;
}
.text-color-teal {
  --zmp-theme-color-text-color: #009688;
}
.bg-color-teal {
  --zmp-theme-color-bg-color: #009688;
}
.border-color-teal {
  --zmp-theme-color-border-color: #009688;
}
.ripple-color-teal,
.ripple-teal {
  --zmp-theme-color-ripple-color: rgba(0, 150, 136, 0.3);
}
.color-lime {
  --zmp-theme-color: #cddc39;
  --zmp-theme-color-rgb: 205, 220, 57;
  --zmp-theme-color-shade: #bac923;
  --zmp-theme-color-tint: #d6e25c;
}
.text-color-lime {
  --zmp-theme-color-text-color: #cddc39;
}
.bg-color-lime {
  --zmp-theme-color-bg-color: #cddc39;
}
.border-color-lime {
  --zmp-theme-color-border-color: #cddc39;
}
.ripple-color-lime,
.ripple-lime {
  --zmp-theme-color-ripple-color: rgba(205, 220, 57, 0.3);
}
.color-deeporange {
  --zmp-theme-color: #ff6b22;
  --zmp-theme-color-rgb: 255, 107, 34;
  --zmp-theme-color-shade: #f85200;
  --zmp-theme-color-tint: #ff864b;
}
.text-color-deeporange {
  --zmp-theme-color-text-color: #ff6b22;
}
.bg-color-deeporange {
  --zmp-theme-color-bg-color: #ff6b22;
}
.border-color-deeporange {
  --zmp-theme-color-border-color: #ff6b22;
}
.ripple-color-deeporange,
.ripple-deeporange {
  --zmp-theme-color-ripple-color: rgba(255, 107, 34, 0.3);
}
.color-gray {
  --zmp-theme-color: #8e8e93;
  --zmp-theme-color-rgb: