/**
* 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: 142, 142, 147;
--zmp-theme-color-shade: #79797f;
--zmp-theme-color-tint: #a3a3a7;
}
.text-color-gray {
--zmp-theme-color-text-color: #8e8e93;
}
.bg-color-gray {
--zmp-theme-color-bg-color: #8e8e93;
}
.border-color-gray {
--zmp-theme-color-border-color: #8e8e93;
}
.ripple-color-gray,
.ripple-gray {
--zmp-theme-color-ripple-color: rgba(142, 142, 147, 0.3);
}
.color-white {
--zmp-theme-color: #ffffff;
--zmp-theme-color-rgb: 255, 255, 255;
--zmp-theme-color-shade: #ebebeb;
--zmp-theme-color-tint: #ffffff;
}
.text-color-white {
--zmp-theme-color-text-color: #ffffff;
}
.bg-color-white {
--zmp-theme-color-bg-color: #ffffff;
}
.border-color-white {
--zmp-theme-color-border-color: #ffffff;
}
.ripple-color-white,
.ripple-white {
--zmp-theme-color-ripple-color: rgba(255, 255, 255, 0.3);
}
.color-black {
--zmp-theme-color: #000000;
--zmp-theme-color-rgb: 0, 0, 0;
--zmp-theme-color-shade: #000000;
--zmp-theme-color-tint: #141414;
}
.text-color-black {
--zmp-theme-color-text-color: #000000;
}
.bg-color-black {
--zmp-theme-color-bg-color: #000000;
}
.border-color-black {
--zmp-theme-color-border-color: #000000;
}
.ripple-color-black,
.ripple-black {
--zmp-theme-color-ripple-color: rgba(0, 0, 0, 0.3);
}
.color-bd200 {
--zmp-theme-color: #81aded;
--zmp-theme-color-rgb: 129, 173, 237;
--zmp-theme-color-shade: #5d96e8;
--zmp-theme-color-tint: #a5c4f2;
}
.text-color-bd200 {
--zmp-theme-color-text-color: #81aded;
}
.bg-color-bd200 {
--zmp-theme-color-bg-color: #81aded;
}
.border-color-bd200 {
--zmp-theme-color-border-color: #81aded;
}
.ripple-color-bd200,
.ripple-bd200 {
--zmp-theme-color-ripple-color: rgba(129, 173, 237, 0.3);
}
.color-bd300 {
--zmp-theme-color: #4c8ae5;
--zmp-theme-color-rgb: 76, 138, 229;
--zmp-theme-color-shade: #2873e0;
--zmp-theme-color-tint: #70a1ea;
}
.text-color-bd300 {
--zmp-theme-color-text-color: #4c8ae5;
}
.bg-color-bd300 {
--zmp-theme-color-bg-color: #4c8ae5;
}
.border-color-bd300 {
--zmp-theme-color-border-color: #4c8ae5;
}
.ripple-color-bd300,
.ripple-bd300 {
--zmp-theme-color-ripple-color: rgba(76, 138, 229, 0.3);
}
.color-bd400 {
--zmp-theme-color: #3d6eb7;
--zmp-theme-color-rgb: 61, 110, 183;
--zmp-theme-color-shade: #335c98;
--zmp-theme-color-tint: #5683c7;
}
.text-color-bd400 {
--zmp-theme-color-text-color: #3d6eb7;
}
.bg-color-bd400 {
--zmp-theme-color-bg-color: #3d6eb7;
}
.border-color-bd400 {
--zmp-theme-color-border-color: #3d6eb7;
}
.ripple-color-bd400,
.ripple-bd400 {
--zmp-theme-color-ripple-color: rgba(61, 110, 183, 0.3);
}
.color-bd500 {
--zmp-theme-color: #2e5389;
--zmp-theme-color-rgb: 46, 83, 137;
--zmp-theme-color-shade: #24406a;
--zmp-theme-color-tint: #3866a8;
}
.text-color-bd500 {
--zmp-theme-color-text-color: #2e5389;
}
.bg-color-bd500 {
--zmp-theme-color-bg-color: #2e5389;
}
.border-color-bd500 {
--zmp-theme-color-border-color: #2e5389;
}
.ripple-color-bd500,
.ripple-bd500 {
--zmp-theme-color-ripple-color: rgba(46, 83, 137, 0.3);
}
.color-bd600 {
--zmp-theme-color: #1e375c;
--zmp-theme-color-rgb: 30, 55, 92;
--zmp-theme-color-shade: #14253d;
--zmp-theme-color-tint: #28497b;
}
.text-color-bd600 {
--zmp-theme-color-text-color: #1e375c;
}
.bg-color-bd600 {
--zmp-theme-color-bg-color: #1e375c;
}
.border-color-bd600 {
--zmp-theme-color-border-color: #1e375c;
}
.ripple-color-bd600,
.ripple-bd600 {
--zmp-theme-color-ripple-color: rgba(30, 55, 92, 0.3);
}
.color-bd700 {
--zmp-theme-color: #132339;
--zmp-theme-color-rgb: 19, 35, 57;
--zmp-theme-color-shade: #09101a;
--zmp-theme-color-tint: #1d3658;
}
.text-color-bd700 {
--zmp-theme-color-text-color: #132339;
}
.bg-color-bd700 {
--zmp-theme-color-bg-color: #132339;
}
.border-color-bd700 {
--zmp-theme-color-border-color: #132339;
}
.ripple-color-bd700,
.ripple-bd700 {
--zmp-theme-color-ripple-color: rgba(19, 35, 57, 0.3);
}
.color-bl200 {
--zmp-theme-color: #0043a6;
--zmp-theme-color-rgb: 0, 67, 166;
--zmp-theme-color-shade: #00337d;
--zmp-theme-color-tint: #0053cf;
}
.text-color-bl200 {
--zmp-theme-color-text-color: #0043a6;
}
.bg-color-bl200 {
--zmp-theme-color-bg-color: #0043a6;
}
.border-color-bl200 {
--zmp-theme-color-border-color: #0043a6;
}
.ripple-color-bl200,
.ripple-bl200 {
--zmp-theme-color-ripple-color: rgba(0, 67, 166, 0.3);
}
.color-bl300 {
--zmp-theme-color: #0068ff;
--zmp-theme-color-rgb: 0, 104, 255;
--zmp-theme-color-shade: #0057d6;
--zmp-theme-color-tint: #2980ff;
}
.text-color-bl300 {
--zmp-theme-color-text-color: #0068ff;
}
.bg-color-bl300 {
--zmp-theme-color-bg-color: #0068ff;
}
.border-color-bl300 {
--zmp-theme-color-border-color: #0068ff;
}
.ripple-color-bl300,
.ripple-bl300 {
--zmp-theme-color-ripple-color: rgba(0, 104, 255, 0.3);
}
.color-bl400 {
--zmp-theme-color: #3386ff;
--zmp-theme-color-rgb: 51, 134, 255;
--zmp-theme-color-shade: #0a6eff;
--zmp-theme-color-tint: #5c9eff;
}
.text-color-bl400 {
--zmp-theme-color-text-color: #3386ff;
}
.bg-color-bl400 {
--zmp-theme-color-bg-color: #3386ff;
}
.border-color-bl400 {
--zmp-theme-color-border-color: #3386ff;
}
.ripple-color-bl400,
.ripple-bl400 {
--zmp-theme-color-ripple-color: rgba(51, 134, 255, 0.3);
}
.color-bl500 {
--zmp-theme-color: #66a4ff;
--zmp-theme-color-rgb: 102, 164, 255;
--zmp-theme-color-shade: #3d8cff;
--zmp-theme-color-tint: #8fbcff;
}
.text-color-bl500 {
--zmp-theme-color-text-color: #66a4ff;
}
.bg-color-bl500 {
--zmp-theme-color-bg-color: #66a4ff;
}
.border-color-bl500 {
--zmp-theme-color-border-color: #66a4ff;
}
.ripple-color-bl500,
.ripple-bl500 {
--zmp-theme-color-ripple-color: rgba(102, 164, 255, 0.3);
}
.color-bl600 {
--zmp-theme-color: #99c3ff;
--zmp-theme-color-rgb: 153, 195, 255;
--zmp-theme-color-shade: #70abff;
--zmp-theme-color-tint: #c2dbff;
}
.text-color-bl600 {
--zmp-theme-color-text-color: #99c3ff;
}
.bg-color-bl600 {
--zmp-theme-color-bg-color: #99c3ff;
}
.border-color-bl600 {
--zmp-theme-color-border-color: #99c3ff;
}
.ripple-color-bl600,
.ripple-bl600 {
--zmp-theme-color-ripple-color: rgba(153, 195, 255, 0.3);
}
.color-bl700 {
--zmp-theme-color: #cce1ff;
--zmp-theme-color-rgb: 204, 225, 255;
--zmp-theme-color-shade: #a3c9ff;
--zmp-theme-color-tint: #f5f9ff;
}
.text-color-bl700 {
--zmp-theme-color-text-color: #cce1ff;
}
.bg-color-bl700 {
--zmp-theme-color-bg-color: #cce1ff;
}
.border-color-bl700 {
--zmp-theme-color-border-color: #cce1ff;
}
.ripple-color-bl700,
.ripple-bl700 {
--zmp-theme-color-ripple-color: rgba(204, 225, 255, 0.3);
}
.color-nd200 {
--zmp-theme-color: #dbdfe2;
--zmp-theme-color-rgb: 219, 223, 226;
--zmp-theme-color-shade: #c4cbd0;
--zmp-theme-color-tint: #f2f3f4;
}
.text-color-nd200 {
--zmp-theme-color-text-color: #dbdfe2;
}
.bg-color-nd200 {
--zmp-theme-color-bg-color: #dbdfe2;
}
.border-color-nd200 {
--zmp-theme-color-border-color: #dbdfe2;
}
.ripple-color-nd200,
.ripple-nd200 {
--zmp-theme-color-ripple-color: rgba(219, 223, 226, 0.3);
}
.color-nd300 {
--zmp-theme-color: #ccd1d6;
--zmp-theme-color-rgb: 204, 209, 214;
--zmp-theme-color-shade: #b5bdc4;
--zmp-theme-color-tint: #e3e5e8;
}
.text-color-nd300 {
--zmp-theme-color-text-color: #ccd1d6;
}
.bg-color-nd300 {
--zmp-theme-color-bg-color: #ccd1d6;
}
.border-color-nd300 {
--zmp-theme-color-border-color: #ccd1d6;
}
.ripple-color-nd300,
.ripple-nd300 {
--zmp-theme-color-ripple-color: rgba(204, 209, 214, 0.3);
}
.color-nd400 {
--zmp-theme-color: #8b8f92;
--zmp-theme-color-rgb: 139, 143, 146;
--zmp-theme-color-shade: #767b7e;
--zmp-theme-color-tint: #a0a3a6;
}
.text-color-nd400 {
--zmp-theme-color-text-color: #8b8f92;
}
.bg-color-nd400 {
--zmp-theme-color-bg-color: #8b8f92;
}
.border-color-nd400 {
--zmp-theme-color-border-color: #8b8f92;
}
.ripple-color-nd400,
.ripple-nd400 {
--zmp-theme-color-ripple-color: rgba(139, 143, 146, 0.3);
}
.color-nd500 {
--zmp-theme-color: #4a4b4d;
--zmp-theme-color-rgb: 74, 75, 77;
--zmp-theme-color-shade: #363738;
--zmp-theme-color-tint: #5e5f62;
}
.text-color-nd500 {
--zmp-theme-color-text-color: #4a4b4d;
}
.bg-color-nd500 {
--zmp-theme-color-bg-color: #4a4b4d;
}
.border-color-nd500 {
--zmp-theme-color-border-color: #4a4b4d;
}
.ripple-color-nd500,
.ripple-nd500 {
--zmp-theme-color-ripple-color: rgba(74, 75, 77, 0.3);
}
.color-nd600 {
--zmp-theme-color: #19191a;
--zmp-theme-color-rgb: 25, 25, 26;
--zmp-theme-color-shade: #050505;
--zmp-theme-color-tint: #2d2d2f;
}
.text-color-nd600 {
--zmp-theme-color-text-color: #19191a;
}
.bg-color-nd600 {
--zmp-theme-color-bg-color: #19191a;
}
.border-color-nd600 {
--zmp-theme-color-border-color: #19191a;
}
.ripple-color-nd600,
.ripple-nd600 {
--zmp-theme-color-ripple-color: rgba(25, 25, 26, 0.3);
}
.color-nd700 {
--zmp-theme-color: #090909;
--zmp-theme-color-rgb: 9, 9, 9;
--zmp-theme-color-shade: #000000;
--zmp-theme-color-tint: #1d1d1d;
}
.text-color-nd700 {
--zmp-theme-color-text-color: #090909;
}
.bg-color-nd700 {
--zmp-theme-color-bg-color: #090909;
}
.border-color-nd700 {
--zmp-theme-color-border-color: #090909;
}
.ripple-color-nd700,
.ripple-nd700 {
--zmp-theme-color-ripple-color: rgba(9, 9, 9, 0.3);
}
.color-nl100 {
--zmp-theme-color: #050a19;
--zmp-theme-color-rgb: 5, 10, 25;
--zmp-theme-color-shade: #000000;
--zmp-theme-color-tint: #0c183b;
}
.text-color-nl100 {
--zmp-theme-color-text-color: #050a19;
}
.bg-color-nl100 {
--zmp-theme-color-bg-color: #050a19;
}
.border-color-nl100 {
--zmp-theme-color-border-color: #050a19;
}
.ripple-color-nl100,
.ripple-nl100 {
--zmp-theme-color-ripple-color: rgba(5, 10, 25, 0.3);
}
.color-nl200 {
--zmp-theme-color: #001121;
--zmp-theme-color-rgb: 0, 17, 33;
--zmp-theme-color-shade: #000000;
--zmp-theme-color-tint: #00264a;
}
.text-color-nl200 {
--zmp-theme-color-text-color: #001121;
}
.bg-color-nl200 {
--zmp-theme-color-bg-color: #001121;
}
.border-color-nl200 {
--zmp-theme-color-border-color: #001121;
}
.ripple-color-nl200,
.ripple-nl200 {
--zmp-theme-color-ripple-color: rgba(0, 17, 33, 0.3);
}
.color-nl300 {
--zmp-theme-color: #001a33;
--zmp-theme-color-rgb: 0, 26, 51;
--zmp-theme-color-shade: #00050a;
--zmp-theme-color-tint: #002f5c;
}
.text-color-nl300 {
--zmp-theme-color-text-color: #001a33;
}
.bg-color-nl300 {
--zmp-theme-color-bg-color: #001a33;
}
.border-color-nl300 {
--zmp-theme-color-border-color: #001a33;
}
.ripple-color-nl300,
.ripple-nl300 {
--zmp-theme-color-ripple-color: rgba(0, 26, 51, 0.3);
}
.color-nl400 {
--zmp-theme-color: #33485c;
--zmp-theme-color-rgb: 51, 72, 92;
--zmp-theme-color-shade: #243342;
--zmp-theme-color-tint: #425d76;
}
.text-color-nl400 {
--zmp-theme-color-text-color: #33485c;
}
.bg-color-nl400 {
--zmp-theme-color-bg-color: #33485c;
}
.border-color-nl400 {
--zmp-theme-color-border-color: #33485c;
}
.ripple-color-nl400,
.ripple-nl400 {
--zmp-theme-color-ripple-color: rgba(51, 72, 92, 0.3);
}
.color-nl500 {
--zmp-theme-color: #667685;
--zmp-theme-color-rgb: 102, 118, 133;
--zmp-theme-color-shade: #54626e;
--zmp-theme-color-tint: #7a8a99;
}
.text-color-nl500 {
--zmp-theme-color-text-color: #667685;
}
.bg-color-nl500 {
--zmp-theme-color-bg-color: #667685;
}
.border-color-nl500 {
--zmp-theme-color-border-color: #667685;
}
.ripple-color-nl500,
.ripple-nl500 {
--zmp-theme-color-ripple-color: rgba(102, 118, 133, 0.3);
}
.color-nl600 {
--zmp-theme-color: #99a3ad;
--zmp-theme-color-rgb: 153, 163, 173;
--zmp-theme-color-shade: #828f9b;
--zmp-theme-color-tint: #b0b7bf;
}
.text-color-nl600 {
--zmp-theme-color-text-color: #99a3ad;
}
.bg-color-nl600 {
--zmp-theme-color-bg-color: #99a3ad;
}
.border-color-nl600 {
--zmp-theme-color-border-color: #99a3ad;
}
.ripple-color-nl600,
.ripple-nl600 {
--zmp-theme-color-ripple-color: rgba(153, 163, 173, 0.3);
}
.color-nl700 {
--zmp-theme-color: #bfc6cc;
--zmp-theme-color-rgb: 191, 198, 204;
--zmp-theme-color-shade: #a8b2ba;
--zmp-theme-color-tint: #d6dade;
}
.text-color-nl700 {
--zmp-theme-color-text-color: #bfc6cc;
}
.bg-color-nl700 {
--zmp-theme-color-bg-color: #bfc6cc;
}
.border-color-nl700 {
--zmp-theme-color-border-color: #bfc6cc;
}
.ripple-color-nl700,
.ripple-nl700 {
--zmp-theme-color-ripple-color: rgba(191, 198, 204, 0.3);
}
.color-gd300 {
--zmp-theme-color: #47bd8e;
--zmp-theme-color-rgb: 71, 189, 142;
--zmp-theme-color-shade: #3aa178;
--zmp-theme-color-tint: #65c8a0;
}
.text-color-gd300 {
--zmp-theme-color-text-color: #47bd8e;
}
.bg-color-gd300 {
--zmp-theme-color-bg-color: #47bd8e;
}
.border-color-gd300 {
--zmp-theme-color-border-color: #47bd8e;
}
.ripple-color-gd300,
.ripple-gd300 {
--zmp-theme-color-ripple-color: rgba(71, 189, 142, 0.3);
}
.color-gd400 {
--zmp-theme-color: #399772;
--zmp-theme-color-rgb: 57, 151, 114;
--zmp-theme-color-shade: #2e795c;
--zmp-theme-color-tint: #44b588;
}
.text-color-gd400 {
--zmp-theme-color-text-color: #399772;
}
.bg-color-gd400 {
--zmp-theme-color-bg-color: #399772;
}
.border-color-gd400 {
--zmp-theme-color-border-color: #399772;
}
.ripple-color-gd400,
.ripple-gd400 {
--zmp-theme-color-ripple-color: rgba(57, 151, 114, 0.3);
}
.color-gd500 {
--zmp-theme-color: #2b7155;
--zmp-theme-color-rgb: 43, 113, 85;
--zmp-theme-color-shade: #20533f;
--zmp-theme-color-tint: #368f6b;
}
.text-color-gd500 {
--zmp-theme-color-text-color: #2b7155;
}
.bg-color-gd500 {
--zmp-theme-color-bg-color: #2b7155;
}
.border-color-gd500 {
--zmp-theme-color-border-color: #2b7155;
}
.ripple-color-gd500,
.ripple-gd500 {
--zmp-theme-color-ripple-color: rgba(43, 113, 85, 0.3);
}
.color-gd600 {
--zmp-theme-color: #1c4c39;
--zmp-theme-color-rgb: 28, 76, 57;
--zmp-theme-color-shade: #112e23;
--zmp-theme-color-tint: #276a4f;
}
.text-color-gd600 {
--zmp-theme-color-text-color: #1c4c39;
}
.bg-color-gd600 {
--zmp-theme-color-bg-color: #1c4c39;
}
.border-color-gd600 {
--zmp-theme-color-border-color: #1c4c39;
}
.ripple-color-gd600,
.ripple-gd600 {
--zmp-theme-color-ripple-color: rgba(28, 76, 57, 0.3);
}
.color-gd700 {
--zmp-theme-color: #122f24;
--zmp-theme-color-rgb: 18, 47, 36;
--zmp-theme-color-shade: #07110d;
--zmp-theme-color-tint: #1d4d3b;
}
.text-color-gd700 {
--zmp-theme-color-text-color: #122f24;
}
.bg-color-gd700 {
--zmp-theme-color-bg-color: #122f24;
}
.border-color-gd700 {
--zmp-theme-color-border-color: #122f24;
}
.ripple-color-gd700,
.ripple-gd700 {
--zmp-theme-color-ripple-color: rgba(18, 47, 36, 0.3);
}
.color-gl300 {
--zmp-theme-color: #00c578;
--zmp-theme-color-rgb: 0, 197, 120;
--zmp-theme-color-shade: #009c5f;
--zmp-theme-color-tint: #00ee91;
}
.text-color-gl300 {
--zmp-theme-color-text-color: #00c578;
}
.bg-color-gl300 {
--zmp-theme-color-bg-color: #00c578;
}
.border-color-gl300 {
--zmp-theme-color-border-color: #00c578;
}
.ripple-color-gl300,
.ripple-gl300 {
--zmp-theme-color-ripple-color: rgba(0, 197, 120, 0.3);
}
.color-gl400 {
--zmp-theme-color: #33d193;
--zmp-theme-color-rgb: 51, 209, 147;
--zmp-theme-color-shade: #28b37d;
--zmp-theme-color-tint: #54d9a5;
}
.text-color-gl400 {
--zmp-theme-color-text-color: #33d193;
}
.bg-color-gl400 {
--zmp-theme-color-bg-color: #33d193;
}
.border-color-gl400 {
--zmp-theme-color-border-color: #33d193;
}
.ripple-color-gl400,
.ripple-gl400 {
--zmp-theme-color-ripple-color: rgba(51, 209, 147, 0.3);
}
.color-gl500 {
--zmp-theme-color: #66dcae;
--zmp-theme-color-rgb: 102, 220, 174;
--zmp-theme-color-shade: #45d49c;
--zmp-theme-color-tint: #87e4c0;
}
.text-color-gl500 {
--zmp-theme-color-text-color: #66dcae;
}
.bg-color-gl500 {
--zmp-theme-color-bg-color: #66dcae;
}
.border-color-gl500 {
--zmp-theme-color-border-color: #66dcae;
}
.ripple-color-gl500,
.ripple-gl500 {
--zmp-theme-color-ripple-color: rgba(102, 220, 174, 0.3);
}
.color-gl600 {
--zmp-theme-color: #99e8c9;
--zmp-theme-color-rgb: 153, 232, 201;
--zmp-theme-color-shade: #78e0b7;
--zmp-theme-color-tint: #baf0db;
}
.text-color-gl600 {
--zmp-theme-color-text-color: #99e8c9;
}
.bg-color-gl600 {
--zmp-theme-color-bg-color: #99e8c9;
}
.border-color-gl600 {
--zmp-theme-color-border-color: #99e8c9;
}
.ripple-color-gl600,
.ripple-gl600 {
--zmp-theme-color-ripple-color: rgba(153, 232, 201, 0.3);
}
.color-gl700 {
--zmp-theme-color: #ccf3e4;
--zmp-theme-color-rgb: 204, 243, 228;
--zmp-theme-color-shade: #abebd3;
--zmp-theme-color-tint: #edfbf5;
}
.text-color-gl700 {
--zmp-theme-color-text-color: #ccf3e4;
}
.bg-color-gl700 {
--zmp-theme-color-bg-color: #ccf3e4;
}
.border-color-gl700 {
--zmp-theme-color-border-color: #ccf3e4;
}
.ripple-color-gl700,
.ripple-gl700 {
--zmp-theme-color-ripple-color: rgba(204, 243, 228, 0.3);
}
.color-rd300 {
--zmp-theme-color: #e1807d;
--zmp-theme-color-rgb: 225, 128, 125;
--zmp-theme-color-shade: #d9605c;
--zmp-theme-color-tint: #e9a09e;
}
.text-color-rd300 {
--zmp-theme-color-text-color: #e1807d;
}
.bg-color-rd300 {
--zmp-theme-color-bg-color: #e1807d;
}
.border-color-rd300 {
--zmp-theme-color-border-color: #e1807d;
}
.ripple-color-rd300,
.ripple-rd300 {
--zmp-theme-color-ripple-color: rgba(225, 128, 125, 0.3);
}
.color-rd400 {
--zmp-theme-color: #b46664;
--zmp-theme-color-rgb: 180, 102, 100;
--zmp-theme-color-shade: #a1504e;
--zmp-theme-color-tint: #c1817f;
}
.text-color-rd400 {
--zmp-theme-color-text-color: #b46664;
}
.bg-color-rd400 {
--zmp-theme-color-bg-color: #b46664;
}
.border-color-rd400 {
--zmp-theme-color-border-color: #b46664;
}
.ripple-color-rd400,
.ripple-rd400 {
--zmp-theme-color-ripple-color: rgba(180, 102, 100, 0.3);
}
.color-rd500 {
--zmp-theme-color: #874d4b;
--zmp-theme-color-rgb: 135, 77, 75;
--zmp-theme-color-shade: #6d3e3c;
--zmp-theme-color-tint: #a15c5a;
}
.text-color-rd500 {
--zmp-theme-color-text-color: #874d4b;
}
.bg-color-rd500 {
--zmp-theme-color-bg-color: #874d4b;
}
.border-color-rd500 {
--zmp-theme-color-border-color: #874d4b;
}
.ripple-color-rd500,
.ripple-rd500 {
--zmp-theme-color-ripple-color: rgba(135, 77, 75, 0.3);
}
.color-rd600 {
--zmp-theme-color: #5a3332;
--zmp-theme-color-rgb: 90, 51, 50;
--zmp-theme-color-shade: #402423;
--zmp-theme-color-tint: #744241;
}
.text-color-rd600 {
--zmp-theme-color-text-color: #5a3332;
}
.bg-color-rd600 {
--zmp-theme-color-bg-color: #5a3332;
}
.border-color-rd600 {
--zmp-theme-color-border-color: #5a3332;
}
.ripple-color-rd600,
.ripple-rd600 {
--zmp-theme-color-ripple-color: rgba(90, 51, 50, 0.3);
}
.color-rd700 {
--zmp-theme-color: #38201f;
--zmp-theme-color-rgb: 56, 32, 31;
--zmp-theme-color-shade: #1e1110;
--zmp-theme-color-tint: #522f2e;
}
.text-color-rd700 {
--zmp-theme-color-text-color: #38201f;
}
.bg-color-rd700 {
--zmp-theme-color-bg-color: #38201f;
}
.border-color-rd700 {
--zmp-theme-color-border-color: #38201f;
}
.ripple-color-rd700,
.ripple-rd700 {
--zmp-theme-color-ripple-color: rgba(56, 32, 31, 0.3);
}
.color-rl300 {
--zmp-theme-color: #ef4e49;
--zmp-theme-color-rgb: 239, 78, 73;
--zmp-theme-color-shade: #ec2a23;
--zmp-theme-color-tint: #f2726f;
}
.text-color-rl300 {
--zmp-theme-color-text-color: #ef4e49;
}
.bg-color-rl300 {
--zmp-theme-color-bg-color: #ef4e49;
}
.border-color-rl300 {
--zmp-theme-color-border-color: #ef4e49;
}
.ripple-color-rl300,
.ripple-rl300 {
--zmp-theme-color-ripple-color: rgba(239, 78, 73, 0.3);
}
.color-rl400 {
--zmp-theme-color: #f2716d;
--zmp-theme-color-rgb: 242, 113, 109;
--zmp-theme-color-shade: #ef4d48;
--zmp-theme-color-tint: #f59592;
}
.text-color-rl400 {
--zmp-theme-color-text-color: #f2716d;
}
.bg-color-rl400 {
--zmp-theme-color-bg-color: #f2716d;
}
.border-color-rl400 {
--zmp-theme-color-border-color: #f2716d;
}
.ripple-color-rl400,
.ripple-rl400 {
--zmp-theme-color-ripple-color: rgba(242, 113, 109, 0.3);
}
.color-rl500 {
--zmp-theme-color: #f59592;
--zmp-theme-color-rgb: 245, 149, 146;
--zmp-theme-color-shade: #f2716d;
--zmp-theme-color-tint: #f8b9b7;
}
.text-color-rl500 {
--zmp-theme-color-text-color: #f59592;
}
.bg-color-rl500 {
--zmp-theme-color-bg-color: #f59592;
}
.border-color-rl500 {
--zmp-theme-color-border-color: #f59592;
}
.ripple-color-rl500,
.ripple-rl500 {
--zmp-theme-color-ripple-color: rgba(245, 149, 146, 0.3);
}
.color-rl600 {
--zmp-theme-color: #f9b8b6;
--zmp-theme-color-rgb: 249, 184, 182;
--zmp-theme-color-shade: #f69390;
--zmp-theme-color-tint: #fcdddc;
}
.text-color-rl600 {
--zmp-theme-color-text-color: #f9b8b6;
}
.bg-color-rl600 {
--zmp-theme-color-bg-color: #f9b8b6;
}
.border-color-rl600 {
--zmp-theme-color-border-color: #f9b8b6;
}
.ripple-color-rl600,
.ripple-rl600 {
--zmp-theme-color-ripple-color: rgba(249, 184, 182, 0.3);
}
.color-rl700 {
--zmp-theme-color: #fcdcdb;
--zmp-theme-color-rgb: 252, 220, 219;
--zmp-theme-color-shade: #f9b7b5;
--zmp-theme-color-tint: #ffffff;
}
.text-color-rl700 {
--zmp-theme-color-text-color: #fcdcdb;
}
.bg-color-rl700 {
--zmp-theme-color-bg-color: #fcdcdb;
}
.border-color-rl700 {
--zmp-theme-color-border-color: #fcdcdb;
}
.ripple-color-rl700,
.ripple-rl700 {
--zmp-theme-color-ripple-color: rgba(252, 220, 219, 0.3);
}
.color-w300 {
--zmp-theme-color: #ffffff;
--zmp-theme-color-rgb: 255, 255, 255;
--zmp-theme-color-shade: #ebebeb;
--zmp-theme-color-tint: #ffffff;
}
.text-color-w300 {
--zmp-theme-color-text-color: #ffffff;
}
.bg-color-w300 {
--zmp-theme-color-bg-color: #ffffff;
}
.border-color-w300 {
--zmp-theme-color-border-color: #ffffff;
}
.ripple-color-w300,
.ripple-w300 {
--zmp-theme-color-ripple-color: rgba(255, 255, 255, 0.3);
}
.color-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);
}
.text-color-w400 {
--zmp-theme-color-text-color: rgba(255, 255, 255, 0.75);
}
.bg-color-w400 {
--zmp-theme-color-bg-color: rgba(255, 255, 255, 0.75);
}
.border-color-w400 {
--zmp-theme-color-border-color: rgba(255, 255, 255, 0.75);
}
.ripple-color-w400,
.ripple-w400 {
--zmp-theme-color-ripple-color: rgba(255, 255, 255, 0.3);
}
.color-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);
}
.text-color-w500 {
--zmp-theme-color-text-color: rgba(255, 255, 255, 0.5);
}
.bg-color-w500 {
--zmp-theme-color-bg-color: rgba(255, 255, 255, 0.5);
}
.border-color-w500 {
--zmp-theme-color-border-color: rgba(255, 255, 255, 0.5);
}
.ripple-color-w500,
.ripple-w500 {
--zmp-theme-color-ripple-color: rgba(255, 255, 255, 0.3);
}
.color-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);
}
.text-color-w600 {
--zmp-theme-color-text-color: rgba(255, 255, 255, 0.25);
}
.bg-color-w600 {
--zmp-theme-color-bg-color: rgba(255, 255, 255, 0.25);
}
.border-color-w600 {
--zmp-theme-color-border-color: rgba(255, 255, 255, 0.25);
}
.ripple-color-w600,
.ripple-w600 {
--zmp-theme-color-ripple-color: rgba(255, 255, 255, 0.3);
}
.color-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);
}
.text-color-w700 {
--zmp-theme-color-text-color: rgba(255, 255, 255, 0.1);
}
.bg-color-w700 {
--zmp-theme-color-bg-color: rgba(255, 255, 255, 0.1);
}
.border-color-w700 {
--zmp-theme-color-border-color: rgba(255, 255, 255, 0.1);
}
.ripple-color-w700,
.ripple-w700 {
--zmp-theme-color-ripple-color: rgba(255, 255, 255, 0.3);
}
.color-dg300 {
--zmp-theme-color: #96a3ad;
--zmp-theme-color-rgb: 150, 163, 173;
--zmp-theme-color-shade: #7f8f9b;
--zmp-theme-color-tint: #adb7bf;
}
.text-color-dg300 {
--zmp-theme-color-text-color: #96a3ad;
}
.bg-color-dg300 {
--zmp-theme-color-bg-color: #96a3ad;
}
.border-color-dg300 {
--zmp-theme-color-border-color: #96a3ad;
}
.ripple-color-dg300,
.ripple-dg300 {
--zmp-theme-color-ripple-color: rgba(150, 163, 173, 0.3);
}
.color-dg400 {
--zmp-theme-color: #666f76;
--zmp-theme-color-rgb: 102, 111, 118;
--zmp-theme-color-shade: #535a60;
--zmp-theme-color-tint: #79848b;
}
.text-color-dg400 {
--zmp-theme-color-text-color: #666f76;
}
.bg-color-dg400 {
--zmp-theme-color-bg-color: #666f76;
}
.border-color-dg400 {
--zmp-theme-color-border-color: #666f76;
}
.ripple-color-dg400,
.ripple-dg400 {
--zmp-theme-color-ripple-color: rgba(102, 111, 118, 0.3);
}
.color-dg500 {
--zmp-theme-color: #363b3e;
--zmp-theme-color-rgb: 54, 59, 62;
--zmp-theme-color-shade: #232628;
--zmp-theme-color-tint: #495054;
}
.text-color-dg500 {
--zmp-theme-color-text-color: #363b3e;
}
.bg-color-dg500 {
--zmp-theme-color-bg-color: #363b3e;
}
.border-color-dg500 {
--zmp-theme-color-border-color: #363b3e;
}
.ripple-color-dg500,
.ripple-dg500 {
--zmp-theme-color-ripple-color: rgba(54, 59, 62, 0.3);
}
.color-dg600 {
--zmp-theme-color: #121415;
--zmp-theme-color-rgb: 18, 20, 21;
--zmp-theme-color-shade: #000000;
--zmp-theme-color-tint: #25292b;
}
.text-color-dg600 {
--zmp-theme-color-text-color: #121415;
}
.bg-color-dg600 {
--zmp-theme-color-bg-color: #121415;
}
.border-color-dg600 {
--zmp-theme-color-border-color: #121415;
}
.ripple-color-dg600,
.ripple-dg600 {
--zmp-theme-color-ripple-color: rgba(18, 20, 21, 0.3);
}
.color-dg700 {
--zmp-theme-color: #060707;
--zmp-theme-color-rgb: 6, 7, 7;
--zmp-theme-color-shade: #000000;
--zmp-theme-color-tint: #191d1d;
}
.text-color-dg700 {
--zmp-theme-color-text-color: #060707;
}
.bg-color-dg700 {
--zmp-theme-color-bg-color: #060707;
}
.border-color-dg700 {
--zmp-theme-color-border-color: #060707;
}
.ripple-color-dg700,
.ripple-dg700 {
--zmp-theme-color-ripple-color: rgba(6, 7, 7, 0.3);
}
.color-lg300 {
--zmp-theme-color: #778d9e;
--zmp-theme-color-rgb: 119, 141, 158;
--zmp-theme-color-shade: #62798a;
--zmp-theme-color-tint: #8fa1af;
}
.text-color-lg300 {
--zmp-theme-color-text-color: #778d9e;
}
.bg-color-lg300 {
--zmp-theme-color-bg-color: #778d9e;
}
.border-color-lg300 {
--zmp-theme-color-border-color: #778d9e;
}
.ripple-color-lg300,
.ripple-lg300 {
--zmp-theme-color-ripple-color: rgba(119, 141, 158, 0.3);
}
.color-lg400 {
--zmp-theme-color: #92a4b1;
--zmp-theme-color-rgb: 146, 164, 177;
--zmp-theme-color-shade: #7a90a0;
--zmp-theme-color-tint: #aab8c2;
}
.text-color-lg400 {
--zmp-theme-color-text-color: #92a4b1;
}
.bg-color-lg400 {
--zmp-theme-color-bg-color: #92a4b1;
}
.border-color-lg400 {
--zmp-theme-color-border-color: #92a4b1;
}
.ripple-color-lg400,
.ripple-lg400 {
--zmp-theme-color-ripple-color: rgba(146, 164, 177, 0.3);
}
.color-lg500 {
--zmp-theme-color: #adbbc5;
--zmp-theme-color-rgb: 173, 187, 197;
--zmp-theme-color-shade: #95a7b4;
--zmp-theme-color-tint: #c5cfd6;
}
.text-color-lg500 {
--zmp-theme-color-text-color: #adbbc5;
}
.bg-color-lg500 {
--zmp-theme-color-bg-color: #adbbc5;
}
.border-color-lg500 {
--zmp-theme-color-border-color: #adbbc5;
}
.ripple-color-lg500,
.ripple-lg500 {
--zmp-theme-color-ripple-color: rgba(173, 187, 197, 0.3);
}
.color-lg600 {
--zmp-theme-color: #c9d1d8;
--zmp-theme-color-rgb: 201, 209, 216;
--zmp-theme-color-shade: #b1bdc7;
--zmp-theme-color-tint: #e1e5e9;
}
.text-color-lg600 {
--zmp-theme-color-text-color: #c9d1d8;
}
.bg-color-lg600 {
--zmp-theme-color-bg-color: #c9d1d8;
}
.border-color-lg600 {
--zmp-theme-color-border-color: #c9d1d8;
}
.ripple-color-lg600,
.ripple-lg600 {
--zmp-theme-color-ripple-color: rgba(201, 209, 216, 0.3);
}
.color-lg700 {
--zmp-theme-color: #e4e8ec;
--zmp-theme-color-rgb: 228, 232, 236;
--zmp-theme-color-shade: #ccd4db;
--zmp-theme-color-tint: #fcfcfd;
}
.text-color-lg700 {
--zmp-theme-color-text-color: #e4e8ec;
}
.bg-color-lg700 {
--zmp-theme-color-bg-color: #e4e8ec;
}
.border-color-lg700 {
--zmp-theme-color-border-color: #e4e8ec;
}
.ripple-color-lg700,
.ripple-lg700 {
--zmp-theme-color-ripple-color: rgba(228, 232, 236, 0.3);
}
.color-bk300 {
--zmp-theme-color: #000000;
--zmp-theme-color-rgb: 0, 0, 0;
--zmp-theme-color-shade: #000000;
--zmp-theme-color-tint: #141414;
}
.text-color-bk300 {
--zmp-theme-color-text-color: #000000;
}
.bg-color-bk300 {
--zmp-theme-color-bg-color: #000000;
}
.border-color-bk300 {
--zmp-theme-color-border-color: #000000;
}
.ripple-color-bk300,
.ripple-bk300 {
--zmp-theme-color-ripple-color: rgba(0, 0, 0, 0.3);
}
.color-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);
}
.text-color-bk400 {
--zmp-theme-color-text-color: rgba(0, 0, 0, 0.75);
}
.bg-color-bk400 {
--zmp-theme-color-bg-color: rgba(0, 0, 0, 0.75);
}
.border-color-bk400 {
--zmp-theme-color-border-color: rgba(0, 0, 0, 0.75);
}
.ripple-color-bk400,
.ripple-bk400 {
--zmp-theme-color-ripple-color: rgba(0, 0, 0, 0.3);
}
.color-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);
}
.text-color-bk500 {
--zmp-theme-color-text-color: rgba(0, 0, 0, 0.5);
}
.bg-color-bk500 {
--zmp-theme-color-bg-color: rgba(0, 0, 0, 0.5);
}
.border-color-bk500 {
--zmp-theme-color-border-color: rgba(0, 0, 0, 0.5);
}
.ripple-color-bk500,
.ripple-bk500 {
--zmp-theme-color-ripple-color: rgba(0, 0, 0, 0.3);
}
.color-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);
}
.text-color-bk600 {
--zmp-theme-color-text-color: rgba(0, 0, 0, 0.25);
}
.bg-color-bk600 {
--zmp-theme-color-bg-color: rgba(0, 0, 0, 0.25);
}
.border-color-bk600 {
--zmp-theme-color-border-color: rgba(0, 0, 0, 0.25);
}
.ripple-color-bk600,
.ripple-bk600 {
--zmp-theme-color-ripple-color: rgba(0, 0, 0, 0.3);
}
.color-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);
}
.text-color-bk700 {
--zmp-theme-color-text-color: rgba(0, 0, 0, 0.15);
}
.bg-color-bk700 {
--zmp-theme-color-bg-color: rgba(0, 0, 0, 0.15);
}
.border-color-bk700 {
--zmp-theme-color-border-color: rgba(0, 0, 0, 0.15);
}
.ripple-color-bk700,
.ripple-bk700 {
--zmp-theme-color-ripple-color: rgba(0, 0, 0, 0.3);
}
.color-ol300 {
--zmp-theme-color: #f5832f;
--zmp-theme-color-rgb: 245, 131, 47;
--zmp-theme-color-shade: #f06c0c;
--zmp-theme-color-tint: #f79a56;
}
.text-color-ol300 {
--zmp-theme-color-text-color: #f5832f;
}
.bg-color-ol300 {
--zmp-theme-color-bg-color: #f5832f;
}
.border-color-ol300 {
--zmp-theme-color-border-color: #f5832f;
}
.ripple-color-ol300,
.ripple-ol300 {
--zmp-theme-color-ripple-color: rgba(245, 131, 47, 0.3);
}
.color-ol400 {
--zmp-theme-color: #f79c59;
--zmp-theme-color-rgb: 247, 156, 89;
--zmp-theme-color-shade: #f58532;
--zmp-theme-color-tint: #f9b380;
}
.text-color-ol400 {
--zmp-theme-color-text-color: #f79c59;
}
.bg-color-ol400 {
--zmp-theme-color-bg-color: #f79c59;
}
.border-color-ol400 {
--zmp-theme-color-border-color: #f79c59;
}
.ripple-color-ol400,
.ripple-ol400 {
--zmp-theme-color-ripple-color: rgba(247, 156, 89, 0.3);
}
.color-ol500 {
--zmp-theme-color: #f9b582;
--zmp-theme-color-rgb: 249, 181, 130;
--zmp-theme-color-shade: #f79e5b;
--zmp-theme-color-tint: #fbcca9;
}
.text-color-ol500 {
--zmp-theme-color-text-color: #f9b582;
}
.bg-color-ol500 {
--zmp-theme-color-bg-color: #f9b582;
}
.border-color-ol500 {
--zmp-theme-color-border-color: #f9b582;
}
.ripple-color-ol500,
.ripple-ol500 {
--zmp-theme-color-ripple-color: rgba(249, 181, 130, 0.3);
}
.color-ol600 {
--zmp-theme-color: #fbcdac;
--zmp-theme-color-rgb: 251, 205, 172;
--zmp-theme-color-shade: #f9b685;
--zmp-theme-color-tint: #fde4d3;
}
.text-color-ol600 {
--zmp-theme-color-text-color: #fbcdac;
}
.bg-color-ol600 {
--zmp-theme-color-bg-color: #fbcdac;
}
.border-color-ol600 {
--zmp-theme-color-border-color: #fbcdac;
}
.ripple-color-ol600,
.ripple-ol600 {
--zmp-theme-color-ripple-color: rgba(251, 205, 172, 0.3);
}
.color-ol700 {
--zmp-theme-color: #fde6d5;
--zmp-theme-color-rgb: 253, 230, 213;
--zmp-theme-color-shade: #fbcfae;
--zmp-theme-color-tint: #fffdfc;
}
.text-color-ol700 {
--zmp-theme-color-text-color: #fde6d5;
}
.bg-color-ol700 {
--zmp-theme-color-bg-color: #fde6d5;
}
.border-color-ol700 {
--zmp-theme-color-border-color: #fde6d5;
}
.ripple-color-ol700,
.ripple-ol700 {
--zmp-theme-color-ripple-color: rgba(253, 230, 213, 0.3);
}
.color-od300 {
--zmp-theme-color: #e39f6d;
--zmp-theme-color-rgb: 227, 159, 109;
--zmp-theme-color-shade: #dc884b;
--zmp-theme-color-tint: #eab68f;
}
.text-color-od300 {
--zmp-theme-color-text-color: #e39f6d;
}
.bg-color-od300 {
--zmp-theme-color-bg-color: #e39f6d;
}
.border-color-od300 {
--zmp-theme-color-border-color: #e39f6d;
}
.ripple-color-od300,
.ripple-od300 {
--zmp-theme-color-ripple-color: rgba(227, 159, 109, 0.3);
}
.color-od400 {
--zmp-theme-color: #b67f57;
--zmp-theme-color-rgb: 182, 127, 87;
--zmp-theme-color-shade: #9f6b45;
--zmp-theme-color-tint: #c29573;
}
.text-color-od400 {
--zmp-theme-color-text-color: #b67f57;
}
.bg-color-od400 {
--zmp-theme-color-bg-color: #b67f57;
}
.border-color-od400 {
--zmp-theme-color-border-color: #b67f57;
}
.ripple-color-od400,
.ripple-od400 {
--zmp-theme-color-ripple-color: rgba(182, 127, 87, 0.3);
}
.color-od500 {
--zmp-theme-color: #885f41;
--zmp-theme-color-rgb: 136, 95, 65;
--zmp-theme-color-shade: #6c4c34;
--zmp-theme-color-tint: #a4724e;
}
.text-color-od500 {
--zmp-theme-color-text-color: #885f41;
}
.bg-color-od500 {
--zmp-theme-color-bg-color: #885f41;
}
.border-color-od500 {
--zmp-theme-color-border-color: #885f41;
}
.ripple-color-od500,
.ripple-od500 {
--zmp-theme-color-ripple-color: rgba(136, 95, 65, 0.3);
}
.color-od600 {
--zmp-theme-color: #5b402c;
--zmp-theme-color-rgb: 91, 64, 44;
--zmp-theme-color-shade: #3f2d1f;
--zmp-theme-color-tint: #775339;
}
.text-color-od600 {
--zmp-theme-color-text-color: #5b402c;
}
.bg-color-od600 {
--zmp-theme-color-bg-color: #5b402c;
}
.border-color-od600 {
--zmp-theme-color-border-color: #5b402c;
}
.ripple-color-od600,
.ripple-od600 {
--zmp-theme-color-ripple-color: rgba(91, 64, 44, 0.3);
}
.color-od700 {
--zmp-theme-color: #39281b;
--zmp-theme-color-rgb: 57, 40, 27;
--zmp-theme-color-shade: #1d150e;
--zmp-theme-color-tint: #553b28;
}
.text-color-od700 {
--zmp-theme-color-text-color: #39281b;
}
.bg-color-od700 {
--zmp-theme-color-bg-color: #39281b;
}
.border-color-od700 {
--zmp-theme-color-border-color: #39281b;
}
.ripple-color-od700,
.ripple-od700 {
--zmp-theme-color-ripple-color: rgba(57, 40, 27, 0.3);
}
.color-yl300 {
--zmp-theme-color: #f8d15a;
--zmp-theme-color-rgb: 248, 209, 90;
--zmp-theme-color-shade: #f6c633;
--zmp-theme-color-tint: #fadc81;
}
.text-color-yl300 {
--zmp-theme-color-text-color: #f8d15a;
}
.bg-color-yl300 {
--zmp-theme-color-bg-color: #f8d15a;
}
.border-color-yl300 {
--zmp-theme-color-border-color: #f8d15a;
}
.ripple-color-yl300,
.ripple-yl300 {
--zmp-theme-color-ripple-color: rgba(248, 209, 90, 0.3);
}
.color-yl400 {
--zmp-theme-color: #f9d97b;
--zmp-theme-color-rgb: 249, 217, 123;
--zmp-theme-color-shade: #f7ce54;
--zmp-theme-color-tint: #fbe4a2;
}
.text-color-yl400 {
--zmp-theme-color-text-color: #f9d97b;
}
.bg-color-yl400 {
--zmp-theme-color-bg-color: #f9d97b;
}
.border-color-yl400 {
--zmp-theme-color-border-color: #f9d97b;
}
.ripple-color-yl400,
.ripple-yl400 {
--zmp-theme-color-ripple-color: rgba(249, 217, 123, 0.3);
}
.color-yl500 {
--zmp-theme-color: #fbe39c;
--zmp-theme-color-rgb: 251, 227, 156;
--zmp-theme-color-shade: #f9d875;
--zmp-theme-color-tint: #fdeec3;
}
.text-color-yl500 {
--zmp-theme-color-text-color: #fbe39c;
}
.bg-color-yl500 {
--zmp-theme-color-bg-color: #fbe39c;
}
.border-color-yl500 {
--zmp-theme-color-border-color: #fbe39c;
}
.ripple-color-yl500,
.ripple-yl500 {
--zmp-theme-color-ripple-color: rgba(251, 227, 156, 0.3);
}
.color-yl600 {
--zmp-theme-color: #fcedbd;
--zmp-theme-color-rgb: 252, 237, 189;
--zmp-theme-color-shade: #fae296;
--zmp-theme-color-tint: #fef8e4;
}
.text-color-yl600 {
--zmp-theme-color-text-color: #fcedbd;
}
.bg-color-yl600 {
--zmp-theme-color-bg-color: #fcedbd;
}
.border-color-yl600 {
--zmp-theme-color-border-color: #fcedbd;
}
.ripple-color-yl600,
.ripple-yl600 {
--zmp-theme-color-ripple-color: rgba(252, 237, 189, 0.3);
}
.color-yl700 {
--zmp-theme-color: #fef6de;
--zmp-theme-color-rgb: 254, 246, 222;
--zmp-theme-color-shade: #fdebb6;
--zmp-theme-color-tint: #ffffff;
}
.text-color-yl700 {
--zmp-theme-color-text-color: #fef6de;
}
.bg-color-yl700 {
--zmp-theme-color-bg-color: #fef6de;
}
.border-color-yl700 {
--zmp-theme-color-border-color: #fef6de;
}
.ripple-color-yl700,
.ripple-yl700 {
--zmp-theme-color-ripple-color: rgba(254, 246, 222, 0.3);
}
.color-yd300 {
--zmp-theme-color: #e9d18b;
--zmp-theme-color-rgb: 233, 209, 139;
--zmp-theme-color-shade: #e2c369;
--zmp-theme-color-tint: #f0dfad;
}
.text-color-yd300 {
--zmp-theme-color-text-color: #e9d18b;
}
.bg-color-yd300 {
--zmp-theme-color-bg-color: #e9d18b;
}
.border-color-yd300 {
--zmp-theme-color-border-color: #e9d18b;
}
.ripple-color-yd300,
.ripple-yd300 {
--zmp-theme-color-ripple-color: rgba(233, 209, 139, 0.3);
}
.color-yd400 {
--zmp-theme-color: #baa76f;
--zmp-theme-color-rgb: 186, 167, 111;
--zmp-theme-color-shade: #ad9653;
--zmp-theme-color-tint: #c7b88b;
}
.text-color-yd400 {
--zmp-theme-color-text-color: #baa76f;
}
.bg-color-yd400 {
--zmp-theme-color-bg-color: #baa76f;
}
.border-color-yd400 {
--zmp-theme-color-border-color: #baa76f;
}
.ripple-color-yd400,
.ripple-yd400 {
--zmp-theme-color-ripple-color: rgba(186, 167, 111, 0.3);
}
.color-yd500 {
--zmp-theme-color: #8c7d53;
--zmp-theme-color-rgb: 140, 125, 83;
--zmp-theme-color-shade: #726644;
--zmp-theme-color-tint: #a39364;
}
.text-color-yd500 {
--zmp-theme-color-text-color: #8c7d53;
}
.bg-color-yd500 {
--zmp-theme-color-bg-color: #8c7d53;
}
.border-color-yd500 {
--zmp-theme-color-border-color: #8c7d53;
}
.ripple-color-yd500,
.ripple-yd500 {
--zmp-theme-color-ripple-color: rgba(140, 125, 83, 0.3);
}
.color-yd600 {
--zmp-theme-color: #5d5438;
--zmp-theme-color-rgb: 93, 84, 56;
--zmp-theme-color-shade: #443d29;
--zmp-theme-color-tint: #766b47;
}
.text-color-yd600 {
--zmp-theme-color-text-color: #5d5438;
}
.bg-color-yd600 {
--zmp-theme-color-bg-color: #5d5438;
}
.border-color-yd600 {
--zmp-theme-color-border-color: #5d5438;
}
.ripple-color-yd600,
.ripple-yd600 {
--zmp-theme-color-ripple-color: rgba(93, 84, 56, 0.3);
}
.color-yd700 {
--zmp-theme-color: #3a3423;
--zmp-theme-color-rgb: 58, 52, 35;
--zmp-theme-color-shade: #211d14;
--zmp-theme-color-tint: #534b32;
}
.text-color-yd700 {
--zmp-theme-color-text-color: #3a3423;
}
.bg-color-yd700 {
--zmp-theme-color-bg-color: #3a3423;
}
.border-color-yd700 {
--zmp-theme-color-border-color: #3a3423;
}
.ripple-color-yd700,
.ripple-yd700 {
--zmp-theme-color-ripple-color: rgba(58, 52, 35, 0.3);
}
.color-tl300 {
--zmp-theme-color: #00adf4;
--zmp-theme-color-rgb: 0, 173, 244;
--zmp-theme-color-shade: #0090cb;
--zmp-theme-color-tint: #1ebdff;
}
.text-color-tl300 {
--zmp-theme-color-text-color: #00adf4;
}
.bg-color-tl300 {
--zmp-theme-color-bg-color: #00adf4;
}
.border-color-tl300 {
--zmp-theme-color-border-color: #00adf4;
}
.ripple-color-tl300,
.ripple-tl300 {
--zmp-theme-color-ripple-color: rgba(0, 173, 244, 0.3);
}
.color-tl400 {
--zmp-theme-color: #33bcf6;
--zmp-theme-color-rgb: 51, 188, 246;
--zmp-theme-color-shade: #0caff4;
--zmp-theme-color-tint: #5ac9f8;
}
.text-color-tl400 {
--zmp-theme-color-text-color: #33bcf6;
}
.bg-color-tl400 {
--zmp-theme-color-bg-color: #33bcf6;
}
.border-color-tl400 {
--zmp-theme-color-border-color: #33bcf6;
}
.ripple-color-tl400,
.ripple-tl400 {
--zmp-theme-color-ripple-color: rgba(51, 188, 246, 0.3);
}
.color-tl500 {
--zmp-theme-color: #66cef8;
--zmp-theme-color-rgb: 102, 206, 248;
--zmp-theme-color-shade: #3fc2f6;
--zmp-theme-color-tint: #8ddafa;
}
.text-color-tl500 {
--zmp-theme-color-text-color: #66cef8;
}
.bg-color-tl500 {
--zmp-theme-color-bg-color: #66cef8;
}
.border-color-tl500 {
--zmp-theme-color-border-color: #66cef8;
}
.ripple-color-tl500,
.ripple-tl500 {
--zmp-theme-color-ripple-color: rgba(102, 206, 248, 0.3);
}
.color-tl600 {
--zmp-theme-color: #99defb;
--zmp-theme-color-rgb: 153, 222, 251;
--zmp-theme-color-shade: #72d1f9;
--zmp-theme-color-tint: #c0ebfd;
}
.text-color-tl600 {
--zmp-theme-color-text-color: #99defb;
}
.bg-color-tl600 {
--zmp-theme-color-bg-color: #99defb;
}
.border-color-tl600 {
--zmp-theme-color-border-color: #99defb;
}
.ripple-color-tl600,
.ripple-tl600 {
--zmp-theme-color-ripple-color: rgba(153, 222, 251, 0.3);
}
.color-tl700 {
--zmp-theme-color: #cceffd;
--zmp-theme-color-rgb: 204, 239, 253;
--zmp-theme-color-shade: #a5e3fb;
--zmp-theme-color-tint: #f3fbff;
}
.text-color-tl700 {
--zmp-theme-color-text-color: #cceffd;
}
.bg-color-tl700 {
--zmp-theme-color-bg-color: #cceffd;
}
.border-color-tl700 {
--zmp-theme-color-border-color: #cceffd;
}
.ripple-color-tl700,
.ripple-tl700 {
--zmp-theme-color-ripple-color: rgba(204, 239, 253, 0.3);
}
.color-td300 {
--zmp-theme-color: #4bb2dd;
--zmp-theme-color-rgb: 75, 178, 221;
--zmp-theme-color-shade: #29a3d7;
--zmp-theme-color-tint: #6dc1e3;
}
.text-color-td300 {
--zmp-theme-color-text-color: #4bb2dd;
}
.bg-color-td300 {
--zmp-theme-color-bg-color: #4bb2dd;
}
.border-color-td300 {
--zmp-theme-color-border-color: #4bb2dd;
}
.ripple-color-td300,
.ripple-td300 {
--zmp-theme-color-ripple-color: rgba(75, 178, 221, 0.3);
}
.color-td400 {
--zmp-theme-color: #3c8eb1;
--zmp-theme-color-rgb: 60, 142, 177;
--zmp-theme-color-shade: #327693;
--zmp-theme-color-tint: #52a2c4;
}
.text-color-td400 {
--zmp-theme-color-text-color: #3c8eb1;
}
.bg-color-td400 {
--zmp-theme-color-bg-color: #3c8eb1;
}
.border-color-td400 {
--zmp-theme-color-border-color: #3c8eb1;
}
.ripple-color-td400,
.ripple-td400 {
--zmp-theme-color-ripple-color: rgba(60, 142, 177, 0.3);
}
.color-td500 {
--zmp-theme-color: #2d6b85;
--zmp-theme-color-rgb: 45, 107, 133;
--zmp-theme-color-shade: #235267;
--zmp-theme-color-tint: #3784a3;
}
.text-color-td500 {
--zmp-theme-color-text-color: #2d6b85;
}
.bg-color-td500 {
--zmp-theme-color-bg-color: #2d6b85;
}
.border-color-td500 {
--zmp-theme-color-border-color: #2d6b85;
}
.ripple-color-td500,
.ripple-td500 {
--zmp-theme-color-ripple-color: rgba(45, 107, 133, 0.3);
}
.color-td600 {
--zmp-theme-color: #1e4758;
--zmp-theme-color-rgb: 30, 71, 88;
--zmp-theme-color-shade: #142e3a;
--zmp-theme-color-tint: #286076;
}
.text-color-td600 {
--zmp-theme-color-text-color: #1e4758;
}
.bg-color-td600 {
--zmp-theme-color-bg-color: #1e4758;
}
.border-color-td600 {
--zmp-theme-color-border-color: #1e4758;
}
.ripple-color-td600,
.ripple-td600 {
--zmp-theme-color-ripple-color: rgba(30, 71, 88, 0.3);
}
.color-td700 {
--zmp-theme-color: #132d37;
--zmp-theme-color-rgb: 19, 45, 55;
--zmp-theme-color-shade: #091419;
--zmp-theme-color-tint: #1d4655;
}
.text-color-td700 {
--zmp-theme-color-text-color: #132d37;
}
.bg-color-td700 {
--zmp-theme-color-bg-color: #132d37;
}
.border-color-td700 {
--zmp-theme-color-border-color: #132d37;
}
.ripple-color-td700,
.ripple-td700 {
--zmp-theme-color-ripple-color: rgba(19, 45, 55, 0.3);
}
.color-pul300 {
--zmp-theme-color: #7562d8;
--zmp-theme-color-rgb: 117, 98, 216;
--zmp-theme-color-shade: #5841d0;
--zmp-theme-color-tint: #9283e0;
}
.text-color-pul300 {
--zmp-theme-color-text-color: #7562d8;
}
.bg-color-pul300 {
--zmp-theme-color-bg-color: #7562d8;
}
.border-color-pul300 {
--zmp-theme-color-border-color: #7562d8;
}
.ripple-color-pul300,
.ripple-pul300 {
--zmp-theme-color-ripple-color: rgba(117, 98, 216, 0.3);
}
.color-pul400 {
--zmp-theme-color: #9181e0;
--zmp-theme-color-rgb: 145, 129, 224;
--zmp-theme-color-shade: #7460d8;
--zmp-theme-color-tint: #aea2e8;
}
.text-color-pul400 {
--zmp-theme-color-text-color: #9181e0;
}
.bg-color-pul400 {
--zmp-theme-color-bg-color: #9181e0;
}
.border-color-pul400 {
--zmp-theme-color-border-color: #9181e0;
}
.ripple-color-pul400,
.ripple-pul400 {
--zmp-theme-color-ripple-color: rgba(145, 129, 224, 0.3);
}
.color-pul500 {
--zmp-theme-color: #aca1e8;
--zmp-theme-color-rgb: 172, 161, 232;
--zmp-theme-color-shade: #8f80e0;
--zmp-theme-color-tint: #c9c2f0;
}
.text-color-pul500 {
--zmp-theme-color-text-color: #aca1e8;
}
.bg-color-pul500 {
--zmp-theme-color-bg-color: #aca1e8;
}
.border-color-pul500 {
--zmp-theme-color-border-color: #aca1e8;
}
.ripple-color-pul500,
.ripple-pul500 {
--zmp-theme-color-ripple-color: rgba(172, 161, 232, 0.3);
}
.color-pul600 {
--zmp-theme-color: #c8c0ef;
--zmp-theme-color-rgb: 200, 192, 239;
--zmp-theme-color-shade: #ac9fe7;
--zmp-theme-color-tint: #e4e1f7;
}
.text-color-pul600 {
--zmp-theme-color-text-color: #c8c0ef;
}
.bg-color-pul600 {
--zmp-theme-color-bg-color: #c8c0ef;
}
.border-color-pul600 {
--zmp-theme-color-border-color: #c8c0ef;
}
.ripple-color-pul600,
.ripple-pul600 {
--zmp-theme-color-ripple-color: rgba(200, 192, 239, 0.3);
}
.color-pul700 {
--zmp-theme-color: #e3e0f7;
--zmp-theme-color-rgb: 227, 224, 247;
--zmp-theme-color-shade: #c6c0ef;
--zmp-theme-color-tint: #ffffff;
}
.text-color-pul700 {
--zmp-theme-color-text-color: #e3e0f7;
}
.bg-color-pul700 {
--zmp-theme-color-bg-color: #e3e0f7;
}
.border-color-pul700 {
--zmp-theme-color-border-color: #e3e0f7;
}
.ripple-color-pul700,
.ripple-pul700 {
--zmp-theme-color-ripple-color: rgba(227, 224, 247, 0.3);
}
.color-pud300 {
--zmp-theme-color: #998dd4;
--zmp-theme-color-rgb: 153, 141, 212;
--zmp-theme-color-shade: #7e6fc9;
--zmp-theme-color-tint: #b4abdf;
}
.text-color-pud300 {
--zmp-theme-color-text-color: #998dd4;
}
.bg-color-pud300 {
--zmp-theme-color-bg-color: #998dd4;
}
.border-color-pud300 {
--zmp-theme-color-border-color: #998dd4;
}
.ripple-color-pud300,
.ripple-pud300 {
--zmp-theme-color-ripple-color: rgba(153, 141, 212, 0.3);
}
.color-pud400 {
--zmp-theme-color: #7a71aa;
--zmp-theme-color-rgb: 122, 113, 170;
--zmp-theme-color-shade: #645b98;
--zmp-theme-color-tint: #928bb9;
}
.text-color-pud400 {
--zmp-theme-color-text-color: #7a71aa;
}
.bg-color-pud400 {
--zmp-theme-color-bg-color: #7a71aa;
}
.border-color-pud400 {
--zmp-theme-color-border-color: #7a71aa;
}
.ripple-color-pud400,
.ripple-pud400 {
--zmp-theme-color-ripple-color: rgba(122, 113, 170, 0.3);
}
.color-pud500 {
--zmp-theme-color: #5c557f;
--zmp-theme-color-rgb: 92, 85, 127;
--zmp-theme-color-shade: #4a4567;
--zmp-theme-color-tint: #6e6597;
}
.text-color-pud500 {
--zmp-theme-color-text-color: #5c557f;
}
.bg-color-pud500 {
--zmp-theme-color-bg-color: #5c557f;
}
.border-color-pud500 {
--zmp-theme-color-border-color: #5c557f;
}
.ripple-color-pud500,
.ripple-pud500 {
--zmp-theme-color-ripple-color: rgba(92, 85, 127, 0.3);
}
.color-pud600 {
--zmp-theme-color: #3d3855;
--zmp-theme-color-rgb: 61, 56, 85;
--zmp-theme-color-shade: #2b283c;
--zmp-theme-color-tint: #4f486e;
}
.text-color-pud600 {
--zmp-theme-color-text-color: #3d3855;
}
.bg-color-pud600 {
--zmp-theme-color-bg-color: #3d3855;
}
.border-color-pud600 {
--zmp-theme-color-border-color: #3d3855;
}
.ripple-color-pud600,
.ripple-pud600 {
--zmp-theme-color-ripple-color: rgba(61, 56, 85, 0.3);
}
.color-pud700 {
--zmp-theme-color: #262335;
--zmp-theme-color-rgb: 38, 35, 53;
--zmp-theme-color-shade: #14131c;
--zmp-theme-color-tint: #38334e;
}
.text-color-pud700 {
--zmp-theme-color-text-color: #262335;
}
.bg-color-pud700 {
--zmp-theme-color-bg-color: #262335;
}
.border-color-pud700 {
--zmp-theme-color-border-color: #262335;
}
.ripple-color-pud700,
.ripple-pud700 {
--zmp-theme-color-ripple-color: rgba(38, 35, 53, 0.3);
}
.color-pkl300 {
--zmp-theme-color: #ea87ff;
--zmp-theme-color-rgb: 234, 135, 255;
--zmp-theme-color-shade: #e35eff;
--zmp-theme-color-tint: #f1b0ff;
}
.text-color-pkl300 {
--zmp-theme-color-text-color: #ea87ff;
}
.bg-color-pkl300 {
--zmp-theme-color-bg-color: #ea87ff;
}
.border-color-pkl300 {
--zmp-theme-color-border-color: #ea87ff;
}
.ripple-color-pkl300,
.ripple-pkl300 {
--zmp-theme-color-ripple-color: rgba(234, 135, 255, 0.3);
}
.color-pkl400 {
--zmp-theme-color: #ee9fff;
--zmp-theme-color-rgb: 238, 159, 255;
--zmp-theme-color-shade: #e776ff;
--zmp-theme-color-tint: #f5c8ff;
}
.text-color-pkl400 {
--zmp-theme-color-text-color: #ee9fff;
}
.bg-color-pkl400 {
--zmp-theme-color-bg-color: #ee9fff;
}
.border-color-pkl400 {
--zmp-theme-color-border-color: #ee9fff;
}
.ripple-color-pkl400,
.ripple-pkl400 {
--zmp-theme-color-ripple-color: rgba(238, 159, 255, 0.3);
}
.color-pkl500 {
--zmp-theme-color: #f2b7ff;
--zmp-theme-color-rgb: 242, 183, 255;
--zmp-theme-color-shade: #eb8eff;
--zmp-theme-color-tint: #f9e0ff;
}
.text-color-pkl500 {
--zmp-theme-color-text-color: #f2b7ff;
}
.bg-color-pkl500 {
--zmp-theme-color-bg-color: #f2b7ff;
}
.border-color-pkl500 {
--zmp-theme-color-border-color: #f2b7ff;
}
.ripple-color-pkl500,
.ripple-pkl500 {
--zmp-theme-color-ripple-color: rgba(242, 183, 255, 0.3);
}
.color-pkl600 {
--zmp-theme-color: #f7cfff;
--zmp-theme-color-rgb: 247, 207, 255;
--zmp-theme-color-shade: #f0a6ff;
--zmp-theme-color-tint: #fef8ff;
}
.text-color-pkl600 {
--zmp-theme-color-text-color: #f7cfff;
}
.bg-color-pkl600 {
--zmp-theme-color-bg-color: #f7cfff;
}
.border-color-pkl600 {
--zmp-theme-color-border-color: #f7cfff;
}
.ripple-color-pkl600,
.ripple-pkl600 {
--zmp-theme-color-ripple-color: rgba(247, 207, 255, 0.3);
}
.color-pkl700 {
--zmp-theme-color: #fbe7ff;
--zmp-theme-color-rgb: 251, 231, 255;
--zmp-theme-color-shade: #f4beff;
--zmp-theme-color-tint: #ffffff;
}
.text-color-pkl700 {
--zmp-theme-color-text-color: #fbe7ff;
}
.bg-color-pkl700 {
--zmp-theme-color-bg-color: #fbe7ff;
}
.border-color-pkl700 {
--zmp-theme-color-border-color: #fbe7ff;
}
.ripple-color-pkl700,
.ripple-pkl700 {
--zmp-theme-color-ripple-color: rgba(251, 231, 255, 0.3);
}
.color-pkd300 {
--zmp-theme-color: #e6abf3;
--zmp-theme-color-rgb: 230, 171, 243;
--zmp-theme-color-shade: #db87ee;
--zmp-theme-color-tint: #f1cff8;
}
.text-color-pkd300 {
--zmp-theme-color-text-color: #e6abf3;
}
.bg-color-pkd300 {
--zmp-theme-color-bg-color: #e6abf3;
}
.border-color-pkd300 {
--zmp-theme-color-border-color: #e6abf3;
}
.ripple-color-pkd300,
.ripple-pkd300 {
--zmp-theme-color-ripple-color: rgba(230, 171, 243, 0.3);
}
.color-pkd400 {
--zmp-theme-color: #b889c2;
--zmp-theme-color-rgb: 184, 137, 194;
--zmp-theme-color-shade: #a86eb4;
--zmp-theme-color-tint: #c8a4d0;
}
.text-color-pkd400 {
--zmp-theme-color-text-color: #b889c2;
}
.bg-color-pkd400 {
--zmp-theme-color-bg-color: #b889c2;
}
.border-color-pkd400 {
--zmp-theme-color-border-color: #b889c2;
}
.ripple-color-pkd400,
.ripple-pkd400 {
--zmp-theme-color-ripple-color: rgba(184, 137, 194, 0.3);
}
.color-pkd500 {
--zmp-theme-color: #8a6792;
--zmp-theme-color-rgb: 138, 103, 146;
--zmp-theme-color-shade: #73567a;
--zmp-theme-color-tint: #9d7ea4;
}
.text-color-pkd500 {
--zmp-theme-color-text-color: #8a6792;
}
.bg-color-pkd500 {
--zmp-theme-color-bg-color: #8a6792;
}
.border-color-pkd500 {
--zmp-theme-color-border-color: #8a6792;
}
.ripple-color-pkd500,
.ripple-pkd500 {
--zmp-theme-color-ripple-color: rgba(138, 103, 146, 0.3);
}
.color-pkd600 {
--zmp-theme-color: #5c4461;
--zmp-theme-color-rgb: 92, 68, 97;
--zmp-theme-color-shade: #453349;
--zmp-theme-color-tint: #735579;
}
.text-color-pkd600 {
--zmp-theme-color-text-color: #5c4461;
}
.bg-color-pkd600 {
--zmp-theme-color-bg-color: #5c4461;
}
.border-color-pkd600 {
--zmp-theme-color-border-color: #5c4461;
}
.ripple-color-pkd600,
.ripple-pkd600 {
--zmp-theme-color-ripple-color: rgba(92, 68, 97, 0.3);
}
.color-pkd700 {
--zmp-theme-color: #3a2b3d;
--zmp-theme-color-rgb: 58, 43, 61;
--zmp-theme-color-shade: #231a25;
--zmp-theme-color-tint: #513c55;
}
.text-color-pkd700 {
--zmp-theme-color-text-color: #3a2b3d;
}
.bg-color-pkd700 {
--zmp-theme-color-bg-color: #3a2b3d;
}
.border-color-pkd700 {
--zmp-theme-color-border-color: #3a2b3d;
}
.ripple-color-pkd700,
.ripple-pkd700 {
--zmp-theme-color-ripple-color: rgba(58, 43, 61, 0.3);
}
@font-face {
font-family: 'zmp-core-icons';
src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAzQABAAAAAAGGwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABbAAAABoAAAAcjtboWUdERUYAAAGIAAAAIwAAACQAewBXR1BPUwAAAawAAAAuAAAANuAY7+xHU1VCAAAB3AAAAZ4AAAP6ALYH7k9TLzIAAAN8AAAASgAAAGBRKF+WY21hcAAAA8gAAACJAAABYt6F0cBjdnQgAAAEVAAAAAQAAAAEABEBRGdhc3AAAARYAAAACAAAAAj//wADZ2x5ZgAABGAAAASAAAAJvIVgCq9oZWFkAAAI4AAAADAAAAA2GfP/aWhoZWEAAAkQAAAAIAAAACQHgQM7aG10eAAACTAAAABcAAABHC1sAAFsb2NhAAAJjAAAAJAAAACQQehEdm1heHAAAAocAAAAHwAAACAAjQBMbmFtZQAACjwAAAFPAAAC2VmaSiNwb3N0AAALjAAAAUMAAAJaVPYZiHicY2BgYGQAghsJmjkg+rZ1fBmMBgA8PQWlAAB4nGNgZGBg4AFiGSBmAkJmBk0GRgYtBjcgmwUsxgAADWAA0wB4nGNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB4nHVTW07CQBQ9Q2vAJwhVGwW0UJEgvt+Kb+XDT3dAYjQmxA9DXIDLMC7CLz9dg3EJfrkLPDMF+pg0TTPTe84998ydWwgAIyiiDtFudZ6QgskIul1IRLQfH1qMwfsiZqo1BWF8IAkLL4lO4scwDddowGC8iia2kYbDp4gKd5Ncy3yKyPMrjxyuMBHAHdiYxgwZHrqK8QA6xxpTAyyNBdzgGW/4wq8wRUU0xb14Fe/iU3yLP9a2qGRhUeUXIuoZuCrucHdGtTDTrxTk7Wq8nHJWiPCOeM4wz8V8hLOscYLubMZKWCcvzpfHuNAY0Q6ucI3TkPh+D89iVt3OUsTnBm8grsI5xrRcz9dmD9GrNjSk38M1jGpq0uEBZ1LvppyvGu//kh4tpV7mm1Ycl6zcwMsxd3EMqX+C4RAuY3K6t3hKOa02fdt0lVF7z0GWfKltDarIjFP2qkx92UF/an18h5UyVJeRfnyI/ajSwy3ucMh8S+VmeeLwPdTYhSDmZdeVdz8qvV+zMzLHn5I9/p39iHe6JHOy3BXYSQelf3GmQG8AAHicY2Bh/MI4gYGVgYHRhzGNgYHBHUp/ZZBkaGFgYGJgZWaAAUYGJBCQ5prC0MCgwFDFeOD/AQY9ps+MxTA1jAfAShQYxABDtQxkAAB4nGNgYGBmgGAZBkYGEIgB8hjBfBYGByDNw8DBwARkKzDoMlgyxDNU/f8PFAXxDIC8xP///z/+f/3/1f8b/q+HmgAHjGwMcCFGJiDBxICmAGI1HLAwMLCysXNwcnHz8PIxEAP4GQQEhYRFRMXEJSSlpGVk5eQVFJWUVVTV1DU0iTKA1gAAxH4T6AAAAAARAUQAAAAB//8AAnic7VXPbxtFFH5vHXvcuN611/au8KHEzno3CEiJ1/aG4iQWSThEEFCVQMilSVX5QkCNkM3Nzq1RRWSEUkWJeosEEpzyQyBVIkm5pKowlaweKpRTOCChcMqFSs2aN7s2JOl/gCrN7Jv5Zjzz5nvfewYBwgCwipPgAQa9GwiX85usA/5Kb/i8B/lNj0BD2PBw2MvhTebDZ/lN5LgZNsOGGe4OL35RLOKk/X0YTToNqe05nUbhPj5+gb3A/veYcArzEPqm4MDQQf0CfoDTlGESxEAFkJO+qJLOZfS0EvUl9YzXMiRULeO7iXx+In93bmxsbgyHgzdFcV6cx0J+YmBg4sMxDj8VbwY56PrQvI8mXSIDpJKSwE8aQkPP5NIvo4IGIv4e6FICu7sBJRE4lDYF4TCgdAV2djl6KLk+N//APfyG6sBLdIrKjKzh607yM5RYlKlJ7iV5i4UFfYH1Do3Ozt6+3sN+mBkZmRleWtCrMdYze3t2dnSwlw3PDA/POH6BDjv0Xi9AhNGR1k65rK2tYc4x0PL9GNdwCfx0ayzBN6kM1+wHNa1e12q/ZVzb2gtB/Blv8PMsVNGwaihpdr2mTbYsYPMpcfEqcUH1zMoNIbkfJUo5vZdR9yK9nN68s8Pffyg9Qs8h54TmLhP8jijsuz5b5Ixh7a9r1ar2I30rqbPrWXJVZa3lVKWqOTzaSx1F4RgCPL4pgzaoFkXUMoQuTQjJWleHHBKEwn5uv93esn+1T1ZW0INp9Kys/LlvtZesZwf/wvYJ3/Y8Z5wwqr8WrnGezK/2uMF+IrDNWQHfwwL4aKKyPtqNr2gH8xphZLrfdffM4duoQ4hGnC6HK0c9Vg4zIltkCnVR8ZdKftRFPuGYyEol5rwZprFOv+f/HTCAiZg3m4hh3Taxfmyaq6ZJcfkbPobH+DqIABQVVZFQRLrFyqljM52hUOen3ojvSlCULn75tdQZkL71IytIF4Oi6981fIfO5zoihTBj3SEddceAq19QcITiEqTMAgrMKfX6Wto9mopMaW9Y4+OfjW9MDQ5ODS58FJm6RLNxq+/KEEfOcsHVQwnkSIfxpDpDhCKutGkolwk76ydFnOLu+nltXatUNCfHloQiHhNLEYBMiJwL+ZJI72mrZNve3rahGS8W262AsLXVhC1cPQW2c6GIn5POAJlDinMlFms1rd3w/VMTikHT3hWOhD2IA3jDDjdha5AnB0OfkTSwl+KdVrFfy6R+kTMRWbYfxuLxiP1QxoiclT8RjuKpVPwkWufzDF8VIpiTTdrZ0toluIfXOXc5V0P/JeC9s7LpDfkX/VHqIcVVkfv7UapjuqNVR6oWmo9uyFd/wqhjztcUXi0MqiRaqYTTZMrllhaa00Jd0OEC1wLxbHKiu5ORU9nYWL7TaNxZXq7kKtSq/Psa9jQa9pMG3q1alYpVdb7n8825M5FNGHWeZ/YD7K/hEh9mnHzzcP8Ek/zjuUCxCWfdbOBdME/qbidmMgtOO89byJUcz0G3iJPYbjF2y+/KDK8+x9s/0/HZNXicY2BkYGAA4i/2pjLx/DZfGbiZGEDgtnV8GYz+/+NfL0sa02cgl4MBLA0AMbUL9HicY2BkYGD6/K+XQY8l7f8PBgaWNAagCApwBwCRUwXDeJxj2M0gyAACqxgGNWAMAGIdID4A5OwD0rOA+BBI7P9PhuNAMSBmSYOK+wKxExCfBYqf/f+D0Q3IdoGKAdlMIHVAzPTm/3+G3UC2McRMprMQ/UwgPlAcAGckFoUAAAAqACoAKgA0AD4ASABSAFwAZgBwAHoAhACOAJgAogCsALYAwADKANQA3gDoAPIA/AEGARABGgEkAS4BOAFCAUwBVgFgAWoBdAF+AYgBkgGcAaYBsgHeAgACKgI8AlICZAKEApQCpALWAuwC/gMeAzADTgNgA4QDogOyA9gD8gQiBEIEVARmBI4EpAS+BN54nGNgZGBgcGeQZmBhAAEmIGZkAIk5MOiBBAANmwDaAHicrZA/b8IwEMWf+Se1Q9Wh2W8ERJDJgsRYJBaWqkP2NLhgQWJ0REKoX6Zbt47d+im6dOreb9GLcaUODB2IdPIvz+/sewZwhVcoHL8u7gMrRHgJ3MAlPgI3MVK3gVuI1HPgNq7VZ+AOokYkTtW6kL8731WzQh9PgRu4wXvgJh7wFbiFvqoCt0HqLXBH9G9M4bDFAQyLJVaoQDJzjp6sCbSvgXCKDTIsxFVIsShzcWdCtV7IGdbvYuq2B7bLVUXdvEeJTvSA0k22sIVlmq8y3mTF1i7E+SjNdavBXoZgrDFGLFfXbISs5xI7sXJWmL3j9TjOHZvY5q4U+aT3r2HmxcqvLPmMTzWUTISJ1P9HOPrr14i95/dtMHNlNXO8NJQMNU3o5KiiJzoex/VznCN4Kj6Wfet9JHNojHwu7bMhNbyzriStR0OtNZ3h0h8bQoX1AHicbVCJTsJAFJwBlVuK3Id+jPG+79s0pS3SCF2yXcSfN7rQNtDETTbZNzNvdt5DCovz+wPiv3OoL5FCGgaqqKGOBppooY0OuuhhF3vYx4HWHeEYJzjFGc5xgUtc4Ro3uMUd7vGARzzhGS94xRvemWKaa1znBjPMMsc8CyyyxE2WabDCLVZZY50NNtlimx122eM2d/KBa0l7aHoiqNhD90sK35Tex1DNkVxEjp1yzI3cgdJ1yZJSzOKqoFn7sy++9dtIKLVJKWFbXKUbvlDewLMt5WnEHonAnXeUQ/O+UEqMtWVOWo4n5kw17nbEzDetqRTSygRCqihiGCLE87F2OilFc4REZUlESHHVtuy4I1e5phRT35n/HtV66ImSZphtNcti0KVRmEELjOQ+9WoSzlqxGZrFfHYxicZryc7Q+w/2brRkAA==') format('woff');
font-weight: 400;
font-style: normal;
}
html {
direction: rtl;
}
html,
body,
.zmp-root {
position: relative;
height: 100%;
width: 100%;
overflow-x: hidden;
}
body {
margin: 0;
padding: 0;
width: 100%;
background: #fff;
overflow: hidden;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
font-family: var(--zmp-font-family);
font-size: var(--zmp-font-size);
line-height: var(--zmp-line-height);
color: var(--zmp-text-color);
}
.theme-dark body,
body.theme-dark {
background: #000;
}
.theme-dark {
color: var(--zmp-text-color);
}
.zmp-root {
overflow: hidden;
box-sizing: border-box;
}
.zmp-initializing *,
.zmp-initializing *:before,
.zmp-initializing *:after {
transition-duration: 0ms !important;
}
.device-ios,
.device-android {
cursor: pointer;
}
.device-ios {
touch-action: manipulation;
}
@media (width: 1024px) and (height: 691px) and (orientation: landscape) {
html,
body,
.zmp-root {
height: 671px;
}
}
@media (width: 1024px) and (height: 692px) and (orientation: landscape) {
html,
body,
.zmp-root {
height: 672px;
}
}
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
}
a,
input,
textarea,
select {
outline: 0;
}
a {
cursor: pointer;
text-decoration: none;
color: var(--zmp-theme-color);
}
.link,
.item-link {
cursor: pointer;
}
p {
margin: 1em 0;
}
.disabled {
opacity: 0.55 !important;
pointer-events: none !important;
}
html.device-full-viewport,
html.device-full-viewport body {
height: 100vh;
}
.ios .md-only,
.ios .if-md,
.ios .aurora-only,
.ios .if-aurora,
.ios .if-not-ios,
.ios .not-ios {
display: none !important;
}
@media (width: 1024px) and (height: 691px) and (orientation: landscape) {
.ios,
.ios body,
.ios .zmp-root {
height: 671px;
}
}
@media (width: 1024px) and (height: 692px) and (orientation: landscape) {
.ios,
.ios body,
.ios .zmp-root {
height: 672px;
}
}
.md .ios-only,
.md .if-ios,
.md .aurora-only,
.md .if-aurora,
.md .if-not-md,
.md .not-md {
display: none !important;
}
.aurora .ios-only,
.aurora .if-ios,
.aurora .md-only,
.aurora .if-md,
.aurora .if-not-aurora,
.aurora .not-aurora {
display: none !important;
}
/* === Statusbar === */
/* === Views === */
.views,
.view {
position: relative;
height: 100%;
z-index: 5000;
overflow: hidden;
box-sizing: border-box;
}
.zmp-root > .view,
.zmp-root > .views {
height: calc(100% - var(--zmp-appbar-app-offset, 0px));
}
.view-resize-handler {
width: 6px;
height: 100%;
position: absolute;
left: var(--zmp-page-master-width);
margin-left: -3px;
top: 0;
cursor: col-resize;
z-index: 1000;
display: none;
}
.view-master-detail .view-resize-handler {
display: block;
}
/* === Pages === */
:root {
--zmp-page-master-width: 320px;
--zmp-page-master-border-color: rgba(0, 0, 0, 0.1);
--zmp-page-master-border-width: 1px;
--zmp-page-swipeback-transition-duration: 300ms;
--zmp-page-parallax-transition-duration: 500ms;
--zmp-page-cover-transition-duration: 450ms;
--zmp-page-dive-transition-duration: 500ms;
--zmp-page-fade-transition-duration: 500ms;
--zmp-page-flip-transition-duration: 700ms;
--zmp-page-push-transition-duration: 500ms;
/*
--zmp-page-content-extra-padding-top: 0px;
--zmp-page-content-extra-padding-bottom: 0px;
*/
--zmp-page-title-line-height: 1.2;
--zmp-page-title-text-color: inherit;
--zmp-page-title-padding-left: 16px;
--zmp-page-title-padding-right: 16px;
}
.ios {
--zmp-page-transition-duration: 400ms;
--zmp-page-title-font-size: 34px;
--zmp-page-title-font-weight: 700;
--zmp-page-title-letter-spacing: -0.03em;
--zmp-page-title-padding-vertical: 6px;
--zmp-page-bg-color: #efeff4;
}
.ios .theme-dark,
.ios.theme-dark {
--zmp-page-bg-color: #000;
}
.md {
--zmp-page-transition-duration: 250ms;
--zmp-page-title-font-size: 34px;
--zmp-page-title-font-weight: 500;
--zmp-page-title-letter-spacing: 0;
--zmp-page-title-padding-vertical: 8px;
--zmp-page-bg-color: #fff;
}
.md .theme-dark,
.md.theme-dark {
--zmp-page-bg-color: #121212;
}
.aurora {
--zmp-page-transition-duration: 250ms;
--zmp-page-title-font-size: 28px;
--zmp-page-title-font-weight: bold;
--zmp-page-title-letter-spacing: 0;
--zmp-page-title-padding-vertical: 7px;
--zmp-page-bg-color: #f3f4f6;
}
.aurora .theme-dark,
.aurora.theme-dark {
--zmp-page-bg-color: #121212;
}
.theme-dark {
--zmp-page-master-border-color: rgba(255, 255, 255, 0.2);
}
.pages {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.page {
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: none;
background-color: var(--zmp-page-bg-color);
z-index: 1;
}
.page.stacked {
display: none;
}
.page-with-navbar-large-collapsed {
--zmp-navbar-large-collapse-progress: 1;
}
.page-previous {
pointer-events: none;
}
.page-content {
overflow: auto;
-webkit-overflow-scrolling: touch;
box-sizing: border-box;
height: 100%;
position: relative;
z-index: 1;
padding-top: calc(var(--zmp-page-navbar-offset, 0px) + var(--zmp-page-toolbar-top-offset, 0px) + var(--zmp-page-subnavbar-offset, 0px) + var(--zmp-page-searchbar-offset, 0px) + var(--zmp-page-content-extra-padding-top, 0px));
padding-bottom: calc(var(--zmp-page-toolbar-bottom-offset, 0px) + var(--zmp-safe-area-bottom) + var(--zmp-page-content-extra-padding-bottom, 0px));
}
.page-transitioning,
.page-transitioning .page-shadow-effect,
.page-transitioning .page-opacity-effect {
transition-duration: var(--zmp-page-transition-duration);
}
.page-transitioning-swipeback,
.page-transitioning-swipeback .page-shadow-effect,
.page-transitioning-swipeback .page-opacity-effect {
transition-duration: var(--zmp-page-swipeback-transition-duration);
}
.router-transition-forward .page-next,
.router-transition-backward .page-next,
.router-transition-forward .page-current,
.router-transition-backward .page-current,
.router-transition-forward .page-previous:not(.stacked),
.router-transition-backward .page-previous:not(.stacked) {
pointer-events: none;
}
.page-shadow-effect {
position: absolute;
top: 0;
width: 16px;
bottom: 0;
z-index: -1;
content: '';
opacity: 0;
left: 100%;
background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
}
.page-opacity-effect {
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.1);
width: 100%;
bottom: 0;
content: '';
opacity: 0;
z-index: 10000;
}
.ios .page-previous {
transform: translate3d(20%, 0, 0);
}
.ios .page-next {
transform: translate3d(-100%, 0, 0);
}
.ios .page-previous .page-opacity-effect {
opacity: 1;
}
.ios .page-previous:after {
opacity: 1;
}
.ios .page-current .page-shadow-effect {
opacity: 1;
}
.ios .router-transition-forward .page-next {
animation: ios-page-next-to-current var(--zmp-page-transition-duration) forwards;
}
.ios .router-transition-forward .page-next:before {
position: absolute;
top: 0;
width: 16px;
bottom: 0;
z-index: -1;
content: '';
opacity: 0;
left: 100%;
background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
animation: ios-page-element-fade-in var(--zmp-page-transition-duration) forwards;
}
.ios .router-transition-forward .page-current {
animation: ios-page-current-to-previous var(--zmp-page-transition-duration) forwards;
}
.ios .router-transition-forward .page-current:after {
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.1);
width: 100%;
bottom: 0;
content: '';
opacity: 0;
z-index: 10000;
animation: ios-page-element-fade-in var(--zmp-page-transition-duration) forwards;
}
.ios .router-transition-backward .page-previous {
animation: ios-page-previous-to-current var(--zmp-page-transition-duration) forwards;
}
.ios .router-transition-backward .page-previous:after {
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.1);
width: 100%;
bottom: 0;
content: '';
opacity: 0;
z-index: 10000;
animation: ios-page-element-fade-out var(--zmp-page-transition-duration) forwards;
}
.ios .router-transition-backward .page-current {
animation: ios-page-current-to-next var(--zmp-page-transition-duration) forwards;
}
.ios .router-transition-backward .page-current:before {
position: absolute;
top: 0;
width: 16px;
bottom: 0;
z-index: -1;
content: '';
opacity: 0;
left: 100%;
background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, 0.01) 50%, rgba(0, 0, 0, 0.2) 100%);
animation: ios-page-element-fade-out var(--zmp-page-transition-duration) forwards;
}
@keyframes ios-page-next-to-current {
from {
transform: translate3d(-100%, 0, 0);
}
to {
transform: translate3d(0%, 0, 0);
}
}
@keyframes ios-page-previous-to-current {
from {
transform: translate3d(20%, 0, 0);
}
to {
transform: translate3d(0%, 0, 0);
}
}
@keyframes ios-page-current-to-previous {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(20%, 0, 0);
}
}
@keyframes ios-page-current-to-next {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(-100%, 0, 0);
}
}
@keyframes ios-page-element-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes ios-page-element-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.md .page-next {
opacity: 0;
pointer-events: none;
transform: translate3d(0, 56px, 0);
}
.md .page-next.page-next-on-right {
transform: translate3d(-100%, 0, 0);
}
.md .router-transition-forward .page-next {
animation: md-page-next-to-current var(--zmp-page-transition-duration) forwards;
}
.md .router-transition-forward .page-current {
animation: none;
}
.md .router-transition-backward .page-current {
animation: md-page-current-to-next var(--zmp-page-transition-duration) forwards;
}
.md .router-transition-backward .page-previous {
animation: none;
}
@keyframes md-page-next-to-current {
from {
transform: translate3d(0, 56px, 0);
opacity: 0;
}
to {
transform: translate3d(0, 0px, 0);
opacity: 1;
}
}
@keyframes md-page-current-to-next {
from {
transform: translate3d(0, 0, 0);
opacity: 1;
}
to {
transform: translate3d(0, 56px, 0);
opacity: 0;
}
}
.aurora .page-next {
opacity: 0;
pointer-events: none;
transform: translate3d(0, 0px, 0);
}
.aurora .page-next.page-next-on-right {
transform: translate3d(-100%, 0, 0);
}
.aurora .router-transition-forward .page-next {
animation: aurora-page-next-to-current var(--zmp-page-transition-duration) forwards;
}
.aurora .router-transition-forward .page-current {
animation: none;
}
.aurora .router-transition-backward .page-current {
animation: aurora-page-current-to-next var(--zmp-page-transition-duration) forwards;
}
.aurora .router-transition-backward .page-previous {
animation: none;
}
@keyframes aurora-page-next-to-current {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes aurora-page-current-to-next {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.view:not(.view-master-detail) .page-master-stacked {
display: none;
}
.view:not(.view-master-detail) .navbar-master-stacked {
display: none;
}
.view-master-detail .page-master,
.view-master-detail .navbar-master {
width: var(--zmp-page-master-width);
left: auto;
right: 0;
--zmp-safe-area-left: 0px;
--zmp-safe-area-outer-left: 0px;
border-left: var(--zmp-page-master-border-width) solid var(--zmp-page-master-border-color);
}
.view-master-detail .page-master-detail,
.view-master-detail .navbar-master-detail {
width: calc(100% - var(--zmp-page-master-width));
--zmp-safe-area-right: 0px;
--zmp-safe-area-outer-right: 0px;
right: var(--zmp-page-master-width);
}
.view-master-detail .page-master-detail > .navbar-master-detail {
left: 0;
right: 0;
width: 100%;
}
.view-master-detail .page-master {
z-index: 2;
transform: none;
pointer-events: auto;
}
.view-master-detail .page-master:before,
.view-master-detail .page-master:after {
display: none;
}
.view-master-detail.router-transition .page-master {
animation: none;
}
.md .router-transition-custom .page-previous,
.ios .router-transition-custom .page-previous,
.aurora .router-transition-custom .page-previous,
.md .router-transition-custom .page-next,
.ios .router-transition-custom .page-next,
.aurora .router-transition-custom .page-next {
opacity: 1;
transform: none;
}
.md .router-transition-custom.view-master-detail .page-master,
.ios .router-transition-custom.view-master-detail .page-master,
.aurora .router-transition-custom.view-master-detail .page-master {
animation: none;
}
.page-title {
position: relative;
z-index: 10;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--zmp-page-title-text-color);
letter-spacing: var(--zmp-page-title-letter-spacing);
font-size: var(--zmp-page-title-font-size);
font-weight: var(--zmp-page-title-font-weight);
line-height: var(--zmp-page-title-line-height);
padding-left: calc(var(--zmp-page-title-padding-left) + var(--zmp-safe-area-left));
padding-right: calc(var(--zmp-page-title-padding-right) + var(--zmp-safe-area-right));
padding-top: var(--zmp-page-title-padding-vertical);
padding-bottom: var(--zmp-page-title-padding-vertical);
box-sizing: border-box;
overflow: hidden;
width: 100%;
}
.router-transition-zmp-circle-forward:after,
.router-transition-zmp-circle-backward:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 100vmax;
height: 100vmax;
margin-left: -50vmax;
margin-top: -50vmax;
background: var(--zmp-page-bg-color);
z-index: 100;
}
.router-transition-zmp-circle-forward .page-next,
.router-transition-zmp-circle-backward .page-next,
.router-transition-zmp-circle-forward .page-current,
.router-transition-zmp-circle-backward .page-current,
.router-transition-zmp-circle-forward .page-previous:not(.stacked),
.router-transition-zmp-circle-backward .page-previous:not(.stacked) {
pointer-events: none;
}
.router-transition-zmp-circle-forward:after {
transform: scale(0);
border-radius: 50%;
animation: zmp-circle-circle-in 400ms forwards;
}
.router-transition-zmp-circle-forward .page-next {
opacity: 0 !important;
transform: scale(0.9) !important;
animation: zmp-circle-next-to-current 300ms forwards;
animation-delay: 300ms;
z-index: 150;
}
.router-transition-zmp-circle-backward:after {
animation: zmp-circle-circle-out 300ms forwards;
animation-delay: 350ms;
}
.router-transition-zmp-circle-backward .page-current {
animation: zmp-circle-current-to-next 700ms forwards;
z-index: 150;
}
@keyframes zmp-circle-circle-in {
from {
transform: scale(0);
border-radius: 50%;
}
50% {
border-radius: 50%;
}
to {
transform: scale(1);
border-radius: 0%;
}
}
@keyframes zmp-circle-circle-out {
from {
transform: scale(1);
border-radius: 0%;
}
50% {
border-radius: 50%;
}
to {
transform: scale(0);
border-radius: 50%;
}
}
@keyframes zmp-circle-next-to-current {
from {
transform: scale(0.9);
opacity: 0;
}
40% {
transform: scale(1.035);
opacity: 1;
}
to {
transform: scale(1);
opacity: 1;
}
}
@keyframes zmp-circle-current-to-next {
from {
transform: scale(1);
opacity: 1;
}
34% {
transform: scale(1.035);
opacity: 1;
}
57% {
transform: scale(0.9);
opacity: 0;
}
to {
transform: scale(0.9);
opacity: 0;
}
}
.router-transition-zmp-cover-v-forward,
.router-transition-zmp-cover-v-backward {
background: #000;
perspective: 1200px;
}
.router-transition-zmp-cover-v-forward .page-next,
.router-transition-zmp-cover-v-backward .page-next,
.router-transition-zmp-cover-v-forward .page-current,
.router-transition-zmp-cover-v-backward .page-current,
.router-transition-zmp-cover-v-forward .page-previous:not(.stacked),
.router-transition-zmp-cover-v-backward .page-previous:not(.stacked) {
pointer-events: none;
}
.router-transition-zmp-cover-v-forward .page-next {
animation: zmp-cover-v-next-to-current var(--zmp-page-cover-transition-duration) forwards;
}
.router-transition-zmp-cover-v-forward .page-current {
animation: zmp-cover-v-current-to-prev var(--zmp-page-cover-transition-duration) forwards;
}
.router-transition-zmp-cover-v-backward .page-current {
animation: zmp-cover-v-current-to-next var(--zmp-page-cover-transition-duration) forwards;
}
.router-transition-zmp-cover-v-backward .page-previous {
animation: zmp-cover-v-prev-to-current var(--zmp-page-cover-transition-duration) forwards;
}
@keyframes zmp-cover-v-next-to-current {
from {
transform: translateY(100%);
}
to {
transform: translateY(0%);
}
}
@keyframes zmp-cover-v-current-to-next {
from {
transform: translateY(0%);
}
to {
transform: translateY(100%);
}
}
@keyframes zmp-cover-v-current-to-prev {
from {
transform: translateZ(0);
opacity: 1;
}
to {
transform: translateZ(-300px);
opacity: 0.5;
}
}
@keyframes zmp-cover-v-prev-to-current {
from {
transform: translateZ(-300px);
opacity: 0.5;
}
to {
transform: translateZ(0);
opacity: 1;
}
}
.router-transition-zmp-cover-forward,
.router-transition-zmp-cover-backward {
background: #000;
perspective: 1200px;
}
.router-transition-zmp-cover-forward .page-next,
.router-transition-zmp-cover-backward .page-next,
.router-transition-zmp-cover-forward .page-current,
.router-transition-zmp-cover-backward .page-current,
.router-transition-zmp-cover-forward .page-previous:not(.stacked),
.router-transition-zmp-cover-backward .page-previous:not(.stacked) {
pointer-events: none;
}
.router-transition-zmp-cover-forward .page-next {
animation: zmp-cover-next-to-current var(--zmp-page-cover-transition-duration) forwards;
}
.router-transition-zmp-cover-forward .page-current {
animation: zmp-cover-current-to-prev var(--zmp-page-cover-transition-duration) forwards;
}
.router-transition-zmp-cover-backward .page-current {
animation: zmp-cover-current-to-next var(--zmp-page-cover-transition-duration) forwards;
}
.router-transition-zmp-cover-backward .page-previous {
animation: zmp-cover-prev-to-current var(--zmp-page-cover-transition-duration) forwards;
}
@keyframes zmp-cover-next-to-current {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0%);
}
}
@keyframes zmp-cover-current-to-next {
from {
transform: translateX(0%);
}
to {
transform: translateX(-100%);
}
}
@keyframes zmp-cover-current-to-prev {
from {
transform: translateZ(0);
opacity: 1;
}
to {
transform: translateZ(-300px);
opacity: 0.5;
}
}
@keyframes zmp-cover-prev-to-current {
from {
transform: translateZ(-300px);
opacity: 0.5;
}
to {
transform: translateZ(0);
opacity: 1;
}
}
.router-transition-zmp-dive-forward,
.router-transition-zmp-dive-backward {
background: var(--zmp-page-bg-color);
perspective: 1200px;
}
.router-transition-zmp-dive-forward .page-next,
.router-transition-zmp-dive-backward .page-next,
.router-transition-zmp-dive-forward .page-current,
.router-transition-zmp-dive-backward .page-current,
.router-transition-zmp-dive-forward .page-previous:not(.stacked),
.router-transition-zmp-dive-backward .page-previous:not(.stacked) {
pointer-events: none;
}
.router-transition-zmp-dive-forward .page-next {
animation: zmp-dive-next-to-current var(--zmp-page-dive-transition-duration) forwards;
}
.router-transition-zmp-dive-forward .page-current {
animation: zmp-dive-current-to-prev var(--zmp-page-dive-transition-duration) forwards;
}
.router-transition-zmp-dive-backward .page-current {
animation: zmp-dive-current-to-next var(--zmp-page-dive-transition-duration) forwards;
}
.router-transition-zmp-dive-backward .page-previous {
animation: zmp-dive-prev-to-current var(--zmp-page-dive-transition-duration) forwards;
}
@keyframes zmp-dive-next-to-current {
from {
opacity: 0;
transform: translateZ(-150px);
}
50% {
opacity: 0;
}
to {
opacity: 1;
transform: translateZ(0px);
}
}
@keyframes zmp-dive-current-to-next {
from {
opacity: 1;
transform: translateZ(0px);
}
50% {
opacity: 0;
}
to {
opacity: 0;
transform: translateZ(-150px);
}
}
@keyframes zmp-dive-current-to-prev {
from {
transform: translateZ(0px);
opacity: 1;
}
50% {
opacity: 0;
}
to {
opacity: 0;
transform: translateZ(150px);
}
}
@keyframes zmp-dive-prev-to-current {
from {
opacity: 0;
transform: translateZ(150px);
}
50% {
opacity: 0;
}
to {
opacity: 1;
transform: translateZ(0px);
}
}
.router-transition-zmp-fade-forward,
.router-transition-zmp-fade-backward {
background: var(--zmp-page-bg-color);
}
.router-transition-zmp-fade-forward .page-next,
.router-transition-zmp-fade-backward .page-next,
.router-transition-zmp-fade-forward .page-current,
.router-transition-zmp-fade-backward .page-current,
.router-transition-zmp-fade-forward .page-previous:not(.stacked),
.router-transition-zmp-fade-backward .page-previous:not(.stacked) {
pointer-events: none;
}
.router-transition-zmp-fade-forward .page-next {
opacity: 0 !important;
animation: zmp-fade-in var(--zmp-page-fade-transition-duration) forwards;
}
.router-transition-zmp-fade-forward .page-current {
animation: zmp-fade-out var(--zmp-page-fade-transition-duration) forwards;
}
.router-transition-zmp-fade-backward .page-current {
animation: zmp-fade-out var(--zmp-page-fade-transition-duration) forwards;
}
.router-transition-zmp-fade-backward .page-previous {
animation: zmp-fade-in var(--zmp-page-fade-transition-duration) forwards;
}
@keyframes zmp-fade-in {
from {
opacity: 0;
}
50% {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes zmp-fade-out {
from {
opacity: 1;
}
50% {
opacity: 0;
}
to {
opacity: 0;
}
}
.router-transition-zmp-flip-forward,
.router-transition-zmp-flip-backward {
background: #000;
perspective: 1200px;
}
.router-transition-zmp-flip-forward .page,
.router-transition-zmp-flip-backward .page {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.router-transition-zmp-flip-forward .page-next,
.router-transition-zmp-flip-backward .page-next,
.router-transition-zmp-flip-forward .page-current,
.router-transition-zmp-flip-backward .page-current,
.router-transition-zmp-flip-forward .page-previous:not(.stacked),
.router-transition-zmp-flip-backward .page-previous:not(.stacked) {
pointer-events: none;
}
.router-transition-zmp-flip-forward .page-next {
animation: zmp-flip-next-to-current var(--zmp-page-flip-transition-duration) forwards;
}
.router-transition-zmp-flip-forward .page-current {
animation: zmp-flip-current-to-prev var(--zmp-page-flip-transition-duration) forwards;
}
.router-transition-zmp-flip-backward .page-current {
animation: zmp-flip-current-to-next var(--zmp-page-flip-transition-duration) forwards;
}
.router-transition-zmp-flip-backward .page-previous {
animation: zmp-flip-prev-to-current var(--zmp-page-flip-transition-duration) forwards;
}
@keyframes zmp-flip-next-to-current {
from {
border-radius: 30px;
transform: translateZ(-100vmax) rotateY(-180deg);
}
to {
border-radius: 0;
transform: translateZ(0px) rotateY(0deg);
}
}
@keyframes zmp-flip-current-to-next {
from {
border-radius: 0px;
transform: translateZ(0px) rotateY(0deg);
}
to {
border-radius: 30px;
transform: translateZ(-100vmax) rotateY(-180deg);
}
}
@keyframes zmp-flip-current-to-prev {
from {
border-radius: 0px;
transform: translateZ(0px) rotateY(0deg);
}
to {
border-radius: 30px;
transform: translateZ(-100vmax) rotateY(180deg);
}
}
@keyframes zmp-flip-prev-to-current {
from {
border-radius: 30px;
transform: translateZ(-100vmax) rotateY(180deg);
}
to {
border-radius: 0px;
transform: translateZ(0px) rotateY(0deg);
}
}
.router-transition-zmp-parallax-forward .page-next {
animation: zmp-parallax-next-to-current var(--zmp-page-parallax-transition-duration) forwards;
}
.router-transition-zmp-parallax-forward .page-current {
animation: zmp-parallax-current-to-prev var(--zmp-page-parallax-transition-duration) forwards;
}
.router-transition-zmp-parallax-backward .page-current {
animation: zmp-parallax-current-to-next var(--zmp-page-parallax-transition-duration) forwards;
}
.router-transition-zmp-parallax-backward .page-previous {
animation: zmp-parallax-prev-to-current var(--zmp-page-parallax-transition-duration) forwards;
}
.router-transition-zmp-parallax-forward .page-next,
.router-transition-zmp-parallax-backward .page-next,
.router-transition-zmp-parallax-forward .page-current,
.router-transition-zmp-parallax-backward .page-current,
.router-transition-zmp-parallax-forward .page-previous:not(.stacked),
.router-transition-zmp-parallax-backward .page-previous:not(.stacked) {
pointer-events: none;
}
@keyframes zmp-parallax-next-to-current {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0%);
}
}
@keyframes zmp-parallax-current-to-next {
from {
transform: translateX(0%);
}
to {
transform: translateX(-100%);
}
}
@keyframes zmp-parallax-current-to-prev {
from {
transform: translateX(0%);
}
to {
transform: translateX(20%);
}
}
@keyframes zmp-parallax-prev-to-current {
from {
transform: translateX(20%);
}
to {
transform: translateX(0%);
}
}
.router-transition-zmp-push-forward .page-next {
animation: zmp-push-next-to-current var(--zmp-page-push-transition-duration) forwards;
}
.router-transition-zmp-push-forward .page-current {
animation: zmp-push-current-to-prev var(--zmp-page-push-transition-duration) forwards;
}
.router-transition-zmp-push-backward .page-current {
animation: zmp-push-current-to-next var(--zmp-page-push-transition-duration) forwards;
}
.router-transition-zmp-push-backward .page-previous {
animation: zmp-push-prev-to-current var(--zmp-page-push-transition-duration) forwards;
}
.router-transition-zmp-push-forward .page-next,
.router-transition-zmp-push-backward .page-next,
.router-transition-zmp-push-forward .page-current,
.router-transition-zmp-push-backward .page-current,
.router-transition-zmp-push-forward .page-previous:not(.stacked),
.router-transition-zmp-push-backward .page-previous:not(.stacked) {
pointer-events: none;
}
@keyframes zmp-push-next-to-current {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0%);
}
}
@keyframes zmp-push-current-to-next {
from {
transform: translateX(0%);
}
to {
transform: translateX(-100%);
}
}
@keyframes zmp-push-current-to-prev {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
@keyframes zmp-push-prev-to-current {
from {
transform: translateX(100%);
}
to {
transform: translateX(0%);
}
}
/* === Link === */
:root {
--zmp-link-highlight-black: rgba(0, 0, 0, 0.1);
--zmp-link-highlight-white: rgba(255, 255, 255, 0.15);
--zmp-link-highlight-color: rgba(var(--zmp-theme-color-rgb), 0.15);
}
.ios {
--zmp-link-pressed-opacity: 0.3;
}
.aurora {
--zmp-link-pressed-opacity: 0.3;
--zmp-link-hover-opacity: 0.65;
}
.link,
.tab-link {
display: inline-flex;
align-items: center;
align-content: center;
justify-content: center;
position: relative;
box-sizing: border-box;
z-index: 1;
--zmp-touch-ripple-color: var(--zmp-link-touch-ripple-color, rgba(var(--zmp-theme-color-rgb), 0.25));
}
.link i + span,
.link i + i,
.link span + i,
.link span + span {
margin-right: 4px;
}
.ios .link {
transition: opacity 300ms;
}
.ios .link.active-state {
opacity: var(--zmp-link-pressed-opacity);
transition-duration: 0ms;
}
.aurora .link {
transition: opacity 300ms;
}
.aurora .link.active-state {
opacity: var(--zmp-link-pressed-opacity);
transition-duration: 0ms;
}
.aurora.device-desktop .link:not(.active-state):not(.no-hover):hover {
opacity: var(--zmp-link-hover-opacity);
transition-duration: 0ms;
}
/* === Touch Ripple === */
:root {
--zmp-touch-ripple-black: rgba(0, 0, 0, 0.1);
--zmp-touch-ripple-white: rgba(255, 255, 255, 0.3);
--zmp-touch-ripple-color: var(--zmp-touch-ripple-black);
}
.theme-dark {
--zmp-touch-ripple-color: var(--zmp-touch-ripple-white);
}
.ripple,
.fab a,
.link,
.item-link,
.list-button,
.button,
.dialog-button,
.tab-link,
.radio,
.checkbox,
.actions-button,
.speed-dial-buttons a {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.ripple-wave {
left: 0;
top: 0;
position: absolute !important;
border-radius: 50%;
pointer-events: none;
z-index: -1;
padding: 0;
margin: 0;
font-size: 0;
transform: translate3d(0px, 0px, 0) scale(0);
background-color: var(--zmp-touch-ripple-color);
animation: touch-ripple-in 200ms forwards;
}
.ripple-wave.ripple-wave-out {
transform: var(--zmp-ripple-transform);
animation: touch-ripple-out 300ms forwards;
}
.button-fill .ripple-wave,
.picker-calendar-day .ripple-wave,
.menu .ripple-wave {
z-index: 1;
}
.checkbox .ripple-wave,
.radio .ripple-wave,
.data-table .sortable-cell .ripple-wave {
z-index: 0;
}
[class*='ripple-color-'] {
--zmp-touch-ripple-color: var(--zmp-theme-color-ripple-color);
}
@keyframes touch-ripple-in {
from {
transform: translate3d(0px, 0px, 0) scale(0);
}
to {
transform: var(--zmp-ripple-transform);
}
}
@keyframes touch-ripple-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* === Navbar === */
:root {
/*
--zmp-navbar-bg-color: var(--zmp-bars-bg-color);
--zmp-navbar-bg-color-rgb: var(--zmp-bars-bg-color-rgb);
--zmp-navbar-bg-image: var(--zmp-bars-bg-image);
--zmp-navbar-border-color: var(--zmp-bars-border-color);
--zmp-navbar-link-color: var(--zmp-bars-link-color);
--zmp-navbar-text-color: var(--zmp-bars-text-color);
*/
--zmp-navbar-hide-show-transition-duration: 400ms;
--zmp-navbar-title-line-height: 1.2;
--zmp-navbar-title-font-size: inherit;
--zmp-navbar-subtitle-text-align: inherit;
--zmp-navbar-large-title-line-height: 1.2;
--zmp-navbar-large-title-text-color: inherit;
--zmp-navbar-large-title-padding-left: 16px;
--zmp-navbar-large-title-padding-right: 16px;
}
.ios {
--zmp-navbar-height: 44px;
--zmp-navbar-tablet-height: 44px;
--zmp-navbar-font-size: 17px;
--zmp-navbar-inner-padding-left: 8px;
--zmp-navbar-inner-padding-right: 8px;
--zmp-navbar-title-font-weight: 600;
--zmp-navbar-title-margin-left: 0;
--zmp-navbar-title-margin-right: 0;
--zmp-navbar-title-text-align: center;
--zmp-navbar-subtitle-font-size: 10px;
--zmp-navbar-subtitle-line-height: 1;
--zmp-navbar-shadow-image: none;
--zmp-navbar-large-title-height: 52px;
--zmp-navbar-large-title-font-size: 34px;
--zmp-navbar-large-title-font-weight: 700;
--zmp-navbar-large-title-letter-spacing: -0.03em;
--zmp-navbar-large-title-padding-vertical: 6px;
/*
--zmp-navbar-link-height: var(--zmp-navbar-height);
--zmp-navbar-link-line-height: var(--zmp-navbar-height);
*/
--zmp-navbar-subtitle-text-color: rgba(0, 0, 0, 0.55);
}
.ios .theme-dark,
.ios.theme-dark {
--zmp-navbar-subtitle-text-color: rgba(255, 255, 255, 0.55);
}
.md {
--zmp-navbar-height: 56px;
--zmp-navbar-tablet-height: 64px;
--zmp-navbar-font-size: 20px;
--zmp-navbar-inner-padding-left: 4px;
--zmp-navbar-inner-padding-right: 4px;
--zmp-navbar-title-font-weight: 500;
--zmp-navbar-title-margin-left: 20px;
--zmp-navbar-title-margin-right: 16px;
--zmp-navbar-title-text-align: left;
--zmp-navbar-subtitle-font-size: 14px;
--zmp-navbar-subtitle-line-height: 1.2;
--zmp-navbar-shadow-image: var(--zmp-bars-shadow-bottom-image);
--zmp-navbar-large-title-font-size: 34px;
--zmp-navbar-large-title-height: 56px;
--zmp-navbar-large-title-font-weight: 500;
--zmp-navbar-large-title-letter-spacing: 0;
--zmp-navbar-large-title-padding-vertical: 8px;
--zmp-navbar-link-height: 48px;
--zmp-navbar-link-line-height: 48px;
--zmp-navbar-subtitle-text-color: rgba(0, 0, 0, 0.85);
}
.md .theme-dark,
.md.theme-dark {
--zmp-navbar-subtitle-text-color: rgba(255, 255, 255, 0.85);
}
.aurora {
--zmp-navbar-height: 56px;
--zmp-navbar-tablet-height: 56px;
--zmp-navbar-font-size: 18px;
--zmp-navbar-inner-padding-left: 16px;
--zmp-navbar-inner-padding-right: 16px;
--zmp-navbar-title-font-weight: bold;
--zmp-navbar-title-margin-left: 0;
--zmp-navbar-title-margin-right: 0;
--zmp-navbar-title-text-align: center;
--zmp-navbar-subtitle-font-size: 14px;
--zmp-navbar-subtitle-line-height: 1;
--zmp-navbar-shadow-image: none;
--zmp-navbar-large-title-height: 48px;
--zmp-navbar-large-title-font-size: 28px;
--zmp-navbar-large-title-font-weight: bold;
--zmp-navbar-large-title-letter-spacing: 0;
--zmp-navbar-large-title-padding-vertical: 7px;
--zmp-navbar-link-height: auto;
--zmp-navbar-link-line-height: inherit;
--zmp-navbar-subtitle-text-color: rgba(0, 0, 0, 0.6);
}
.aurora .theme-dark,
.aurora.theme-dark {
--zmp-navbar-subtitle-text-color: rgba(255, 255, 255, 0.5);
}
.navbars,
.navbar {
z-index: 500;
left: 0;
top: 0;
width: 100%;
}
.navbars {
position: absolute;
}
.navbars .navbar {
z-index: auto;
}
.navbars .navbar-transitioning {
z-index: 500;
}
.navbar {
--zmp-navbar-large-collapse-progress: 0;
position: relative;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
box-sizing: border-box;
margin: 0;
height: calc(var(--zmp-navbar-height) + var(--zmp-safe-area-top));
color: var(--zmp-navbar-text-color, var(--zmp-bars-text-color));
font-size: var(--zmp-navbar-font-size);
}
.navbar.stacked {
display: none;
}
.navbar b {
font-weight: 500;
}
.navbar a {
color: var(--zmp-navbar-link-color, var(--zmp-bars-link-color, var(--zmp-theme-color)));
}
.navbar a.link {
display: flex;
justify-content: flex-start;
line-height: var(--zmp-navbar-link-line-height, var(--zmp-navbar-height));
height: var(--zmp-navbar-link-height, var(--zmp-navbar-height));
}
.navbar .title,
.navbar .left,
.navbar .right {
position: relative;
z-index: 10;
}
.navbar .title {
position: relative;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex-shrink: 10;
font-weight: var(--zmp-navbar-title-font-weight);
display: inline-block;
line-height: var(--zmp-navbar-title-line-height);
text-align: var(--zmp-navbar-title-text-align);
font-size: var(--zmp-navbar-title-font-size);
margin-right: var(--zmp-navbar-title-margin-left);
margin-left: var(--zmp-navbar-title-margin-left);
}
.navbar .subtitle {
display: block;
color: var(--zmp-navbar-subtitle-text-color);
font-weight: normal;
font-size: var(--zmp-navbar-subtitle-font-size);
line-height: var(--zmp-navbar-subtitle-line-height);
text-align: var(--zmp-navbar-subtitle-text-align);
}
.navbar .left,
.navbar .right {
flex-shrink: 0;
display: flex;
justify-content: flex-start;
align-items: center;
}
.navbar .right:first-child {
position: absolute;
height: 100%;
}
.navbar.no-hairline .navbar-bg:after,
.navbar.no-border .navbar-bg:after,
.navbar .no-hairline .navbar-bg:after,
.navbar .no-border .navbar-bg:after {
display: none !important;
}
.navbar.no-hairline .title-large:after,
.navbar.no-border .title-large:after,
.navbar .no-hairline .title-large:after,
.navbar .no-border .title-large:after {
display: none !important;
}
.navbar.no-shadow .navbar-bg:before,
.navbar .no-shadow .navbar-bg:before {
display: none !important;
}
.navbar.navbar-hidden .navbar-bg:before,
.navbar-hidden .navbar .navbar-bg:before {
opacity: 0 !important;
}
.navbar-bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
background: var(--zmp-navbar-bg-color);
background-image: var(--zmp-navbar-bg-image, var(--zmp-bars-bg-image));
background-color: var(--zmp-navbar-bg-color, var(--zmp-bars-bg-color));
transition-property: transform;
}
@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
.ios-translucent-bars .navbar-bg {
background-color: rgba(var(--zmp-navbar-bg-color-rgb, var(--zmp-bars-bg-color-rgb)), var(--zmp-bars-translucent-opacity));
-webkit-backdrop-filter: saturate(180%) blur(var(--zmp-bars-translucent-blur));
backdrop-filter: saturate(180%) blur(var(--zmp-bars-translucent-blur));
}
}
.navbar-bg:after,
.navbar-bg:before {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.navbar-bg:after {
content: '';
position: absolute;
background-color: var(--zmp-navbar-border-color, var(--zmp-bars-border-color));
display: block;
z-index: 15;
top: auto;
right: auto;
bottom: 0;
left: 0;
height: 1px;
width: 100%;
transform-origin: 50% 100%;
transform: scaleY(calc(1 / var(--zmp-device-pixel-ratio)));
}
.navbar-bg:before {
content: '';
position: absolute;
right: 0;
width: 100%;
top: 100%;
bottom: auto;
height: 8px;
pointer-events: none;
background: var(--zmp-navbar-shadow-image);
}
.navbar-bg:after {
z-index: 1;
}
@media (min-width: 768px) and (min-height: 600px) {
:root {
--zmp-navbar-height: var(--zmp-navbar-tablet-height);
}
}
.navbar-transitioning,
.navbar-transitioning .left,
.navbar-transitioning .title,
.navbar-transitioning .right,
.navbar-transitioning .title-large-text,
.navbar-transitioning .navbar-bg,
.navbar-transitioning .subnavbar,
.navbar-transitioning .navbar-bg:before {
transition-duration: var(--zmp-navbar-hide-show-transition-duration);
}
.navbar-page-transitioning {
transition-duration: var(--zmp-page-swipeback-transition-duration) !important;
}
.navbar-page-transitioning .title-large-text,
.navbar-page-transitioning .navbar-bg {
transition-duration: var(--zmp-page-swipeback-transition-duration) !important;
}
.navbar-hidden {
transform: translate3d(0, calc(-1 * var(--zmp-navbar-height)), 0);
}
.navbar-hidden .navbar-inner {
pointer-events: none;
}
.navbar-hidden .navbar-inner > .left,
.navbar-hidden .navbar-inner > .title,
.navbar-hidden .navbar-inner > .right {
opacity: 0 !important;
}
.navbar-hidden .subnavbar {
pointer-events: auto;
}
.navbar-hidden-statusbar {
transform: translate3d(0, calc(-1 * var(--zmp-navbar-height) - var(--zmp-safe-area-top)), 0);
}
.navbar-large-hidden .navbar-large {
--zmp-navbar-large-collapse-progress: 1;
}
.navbar-inner {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
padding: var(--zmp-safe-area-top) calc(var(--zmp-navbar-inner-padding-right) + var(--zmp-safe-area-right)) 0 calc(var(--zmp-navbar-inner-padding-left) + var(--zmp-safe-area-left));
transform: translate3d(0, 0, 0);
z-index: 10;
}
.views > .navbar,
.view > .navbar,
.page > .navbar,
.navbars > .navbar {
position: absolute;
}
.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible):not(.with-searchbar-expandable-enabled) .navbar-bg,
.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible):not(.with-searchbar-expandable-enabled) .title {
opacity: 0;
}
.navbar-large .navbar-bg {
height: calc(100% + var(--zmp-navbar-large-title-height));
transform: translate3d(0px, calc(-1 * var(--zmp-navbar-large-collapse-progress) * var(--zmp-navbar-large-title-height)), 0);
}
.navbar-large-transparent .navbar-bg,
.navbar-large.navbar-transparent .navbar-bg {
opacity: var(--zmp-navbar-large-collapse-progress);
height: 100%;
transform: none;
}
.ios .router-navbar-transition-to-large .navbar-bg,
.ios .router-navbar-transition-from-large .navbar-bg,
.navbar-bg.ios-swipeback-navbar-bg-large,
.navbar-large-transparent .navbar-bg.ios-swipeback-navbar-bg-large,
.navbar-large.navbar-transparent .navbar-bg.ios-swipeback-navbar-bg-large {
height: calc(100% + var(--zmp-navbar-large-title-height));
transform: translate3d(0px, calc(-1 * var(--zmp-navbar-large-collapse-progress) * var(--zmp-navbar-large-title-height)), 0);
}
.ios .navbar:not(.navbar-large) .navbar-bg {
--zmp-navbar-large-collapse-progress: 1;
}
.navbar-large .title {
opacity: var(--zmp-navbar-large-collapse-progress);
}
.navbar-large-collapsed {
--zmp-navbar-large-collapse-progress: 1;
}
.navbar-large-collapsed .title-large {
pointer-events: none;
}
.navbar .title-large {
box-sizing: border-box;
position: absolute;
left: 0;
right: 0;
top: 100%;
display: flex;
align-items: flex-end;
white-space: nowrap;
overflow: hidden;
height: var(--zmp-navbar-large-title-height);
z-index: 5;
}
.navbar .title-large-text {
text-overflow: ellipsis;
white-space: nowrap;
color: var(--zmp-navbar-large-title-text-color);
letter-spacing: var(--zmp-navbar-large-title-letter-spacing);
font-size: var(--zmp-navbar-large-title-font-size);
font-weight: var(--zmp-navbar-large-title-font-weight);
line-height: var(--zmp-navbar-large-title-line-height);
padding-left: calc(var(--zmp-navbar-large-title-padding-left) + var(--zmp-safe-area-left));
padding-right: calc(var(--zmp-navbar-large-title-padding-right) + var(--zmp-safe-area-right));
padding-top: var(--zmp-navbar-large-title-padding-vertical);
padding-bottom: var(--zmp-navbar-large-title-padding-vertical);
box-sizing: border-box;
overflow: hidden;
width: 100%;
transform: translate3d(0px, calc(-1 * var(--zmp-navbar-large-collapse-progress) * var(--zmp-navbar-large-title-height)), 0);
transform-origin: calc(100% - var(--zmp-navbar-large-title-padding-left) - var(--zmp-safe-area-left)) center;
}
.navbar-no-title-large-transition .title-large-text {
transition-duration: 0ms;
}
.navbar ~ *,
.navbars ~ * {
--zmp-page-navbar-offset: calc(var(--zmp-navbar-height) + var(--zmp-safe-area-top));
}
.navbar ~ * .page-with-navbar-large,
.navbar ~ .page-with-navbar-large,
.navbars ~ * .page-with-navbar-large,
.navbars ~ .page-with-navbar-large,
.page-with-navbar-large .navbar ~ * {
--zmp-page-navbar-offset: calc(var(--zmp-navbar-height) + var(--zmp-navbar-large-title-height) + var(--zmp-safe-area-top));
}
.page.no-navbar,
.page.no-navbar .navbar ~ * {
--zmp-page-navbar-offset: var(--zmp-safe-area-top);
}
.ios {
--zmp-navbarLeftTextOffset: calc(4px + 12px + var(--zmp-navbar-inner-padding-left));
--zmp-navbarTitleLargeOffset: var(--zmp-navbar-large-title-padding-left);
--zmp-navbar-large-transparent-bg-center: translateX(0);
--zmp-navbar-large-bg-center-top: translateX(0) translateY(calc(-1 * var(--zmp-navbar-large-title-height)));
--zmp-navbar-large-bg-center-bottom: translateX(0) translateY(0);
--zmp-navbar-large-transparent-bg-left: translateX(100%);
--zmp-navbar-large-bg-left-top: translateX(100%) translateY(calc(-1 * var(--zmp-navbar-large-title-height)));
--zmp-navbar-large-bg-left-bottom: translateX(100%) translateY(0);
--zmp-navbar-large-bg-right-top: translateX(-100%) translateY(calc(-1 * var(--zmp-navbar-large-title-height)));
--zmp-navbar-large-bg-right-bottom: translateX(-100%) translateY(0);
}
.ios .navbar a.icon-only {
width: 44px;
margin: 0;
justify-content: center;
}
.ios .navbar .left a + a,
.ios .navbar .right a + a {
margin-right: 16px;
}
.ios .navbar b {
font-weight: 600;
}
.ios .navbar .left {
margin-left: 10px;
}
.ios .navbar .right {
margin-right: 10px;
}
.ios .navbar .right:first-child {
left: calc(8px + var(--zmp-safe-area-left));
}
.ios .navbar-inner {
justify-content: space-between;
}
.ios .navbar-inner-left-title {
justify-content: flex-start;
}
.ios .navbar-inner-left-title .right {
margin-right: auto;
}
.ios .navbar-inner-left-title .title {
text-align: left;
margin-left: 10px;
}
.ios .view-master-detail .navbar-previous:not(.navbar-master) .left,
.ios .view:not(.view-master-detail) .navbar-previous .left,
.ios .navbar-next .left,
.ios .view-master-detail .navbar-previous:not(.navbar-master) .title,
.ios .view:not(.view-master-detail) .navbar-previous .title,
.ios .navbar-next .title,
.ios .view-master-detail .navbar-previous:not(.navbar-master) .right,
.ios .view:not(.view-master-detail) .navbar-previous .right,
.ios .navbar-next .right,
.ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar,
.ios .view:not(.view-master-detail) .navbar-previous .subnavbar,
.ios .navbar-next .subnavbar,
.ios .view-master-detail .navbar-previous:not(.navbar-master) .fading,
.ios .view:not(.view-master-detail) .navbar-previous .fading,
.ios .navbar-next .fading {
opacity: 0;
}
.ios .view-master-detail .navbar-previous:not(.navbar-master),
.ios .view:not(.view-master-detail) .navbar-previous {
pointer-events: none;
}
.ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large,
.ios .view:not(.view-master-detail) .navbar-previous .title-large {
opacity: 0;
transition-duration: 0ms;
}
.ios .view-master-detail .navbar-previous:not(.navbar-master) .title-large .title-large-text,
.ios .view:not(.view-master-detail) .navbar-previous .title-large .title-large-text {
transform: scale(0.5);
transition-duration: 0ms;
}
.ios .view-master-detail .navbar-previous:not(.navbar-master) .subnavbar.sliding,
.ios .view:not(.view-master-detail) .navbar-previous .subnavbar.sliding,
.ios .view-master-detail .navbar-previous:not(.navbar-master) .sliding .subnavbar,
.ios .view:not(.view-master-detail) .navbar-previous .sliding .subnavbar {
opacity: 1;
transform: translate3d(100%, 0, 0);
}
.ios .view:not(.view-master-detail) .navbar-previous .navbar-bg,
.ios .view-master-detail .navbar-previous:not(.navbar-master) .navbar-bg {
transform: translateX(-100%);
}
.ios .navbar-next {
pointer-events: none;
}
.ios .navbar-next .navbar-bg {
transform: translateX(-100%);
}
.ios .navbar-next .title-large .title-large-text {
transition-duration: 0ms;
transform: translateX(-100%) translateY(calc(-1 * var(--zmp-navbar-large-title-height)));
}
.ios .navbar-next .subnavbar.sliding,
.ios .navbar-next .sliding .subnavbar {
opacity: 1;
transform: translate3d(-100%, 0, 0);
}
.ios .router-transition .navbar,
.ios .router-transition .navbar-bg {
transition-duration: var(--zmp-page-transition-duration);
}
.ios .router-transition .navbar-bg {
animation-duration: var(--zmp-page-transition-duration);
animation-fill-mode: forwards;
}
.ios .router-transition .title-large,
.ios .router-transition .title-large-text {
transition-duration: 0ms;
}
.ios .router-transition .navbar-current .left,
.ios .router-transition .navbar-current .title,
.ios .router-transition .navbar-current .right,
.ios .router-transition .navbar-current .subnavbar {
animation: ios-navbar-element-fade-out var(--zmp-page-transition-duration) forwards;
}
.ios .router-transition .navbar-current .sliding.left,
.ios .router-transition .navbar-current .sliding.left .icon + span,
.ios .router-transition .navbar-current .sliding.title,
.ios .router-transition .navbar-current .sliding.right,
.ios .router-transition .navbar-current .sliding .left,
.ios .router-transition .navbar-current .sliding .left .icon + span,
.ios .router-transition .navbar-current .sliding .title,
.ios .router-transition .navbar-current .sliding .right {
transition-duration: var(--zmp-page-transition-duration);
opacity: 0 !important;
animation: none;
}
.ios .router-transition .navbar-current .sliding .subnavbar,
.ios .router-transition .navbar-current .sliding.subnavbar {
transition-duration: var(--zmp-page-transition-duration);
animation: none;
opacity: 1;
}
.ios .router-transition-forward .navbar-next .left,
.ios .router-transition-backward .navbar-previous .left,
.ios .router-transition-forward .navbar-next .title,
.ios .router-transition-backward .navbar-previous .title,
.ios .router-transition-forward .navbar-next .right,
.ios .router-transition-backward .navbar-previous .right,
.ios .router-transition-forward .navbar-next .subnavbar,
.ios .router-transition-backward .navbar-previous .subnavbar {
animation: ios-navbar-element-fade-in var(--zmp-page-transition-duration) forwards;
}
.ios .router-transition-forward .navbar-next .sliding.left,
.ios .router-transition-backward .navbar-previous .sliding.left,
.ios .router-transition-forward .navbar-next .sliding.left .icon + span,
.ios .router-transition-backward .navbar-previous .sliding.left .icon + span,
.ios .router-transition-forward .navbar-next .sliding.title,
.ios .router-transition-backward .navbar-previous .sliding.title,
.ios .router-transition-forward .navbar-next .sliding.right,
.ios .router-transition-backward .navbar-previous .sliding.right,
.ios .router-transition-forward .navbar-next .sliding .left,
.ios .router-transition-backward .navbar-previous .sliding .left,
.ios .router-transition-forward .navbar-next .sliding .left .icon + span,
.ios .router-transition-backward .navbar-previous .sliding .left .icon + span,
.ios .router-transition-forward .navbar-next .sliding .title,
.ios .router-transition-backward .navbar-previous .sliding .title,
.ios .router-transition-forward .navbar-next .sliding .right,
.ios .router-transition-backward .navbar-previous .sliding .right,
.ios .router-transition-forward .navbar-next .sliding .subnavbar,
.ios .router-transition-backward .navbar-previous .sliding .subnavbar {
transition-duration: var(--zmp-page-transition-duration);
animation: none;
transform: translate3d(0, 0, 0) !important;
opacity: 1 !important;
}
.ios .router-transition-forward .navbar-next.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .title,
.ios .router-transition-backward .navbar-previous.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .title {
animation: none;
}
.ios .router-transition-forward .navbar-next.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .sliding.title,
.ios .router-transition-backward .navbar-previous.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .sliding.title,
.ios .router-transition-forward .navbar-next.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .sliding .title,
.ios .router-transition-backward .navbar-previous.navbar-transparent:not(.navbar-large):not(.navbar-transparent-visible) .sliding .title {
opacity: 0 !important;
}
.ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled-no-transition .left,
.ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled .left,
.ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled-no-transition .title,
.ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled .title,
.ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled-no-transition .right,
.ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled .right,
.ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled-no-transition .subnavbar,
.ios .router-transition-backward .navbar-previous.with-searchbar-expandable-enabled .subnavbar {
animation: none;
}
.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large,
.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large {
overflow: visible;
}
.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text,
.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text {
animation: ios-navbar-large-title-text-slide-up var(--zmp-page-transition-duration) forwards, ios-navbar-large-title-text-fade-out var(--zmp-page-transition-duration) forwards;
}
.ios .router-transition-forward .navbar-next.router-navbar-transition-from-large .left .back span {
animation: ios-navbar-back-text-next-to-current var(--zmp-page-transition-duration) forwards;
transition: none;
transform-origin: right center;
}
.ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
overflow: visible;
}
.ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
animation: ios-navbar-large-title-text-slide-left var(--zmp-page-transition-duration) forwards;
}
.ios .router-transition-forward .navbar-next.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text {
animation: ios-navbar-large-title-text-slide-left var(--zmp-page-transition-duration) forwards;
}
.ios .router-transition-forward .navbar-next.navbar-large:not(.navbar-large-collapsed) .title,
.ios .router-transition-forward .navbar-current.navbar-large:not(.navbar-large-collapsed) .title {
animation: none;
opacity: 0 !important;
transition-duration: 0;
}
.ios .router-transition-backward .navbar-current.router-navbar-transition-to-large .left .back span {
animation: ios-navbar-back-text-current-to-previous var(--zmp-page-transition-duration) forwards;
transition: none;
transform-origin: right center;
}
.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large {
overflow: visible;
}
.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text {
animation: ios-navbar-large-title-text-slide-right var(--zmp-page-transition-duration) forwards;
}
.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .title-large .title-large-text {
animation: ios-navbar-large-title-text-slide-right var(--zmp-page-transition-duration) forwards;
}
.ios .router-transition-backward .navbar-current.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
opacity: 0;
}
.ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large,
.ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large {
overflow: visible;
opacity: 1;
}
.ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large.router-navbar-transition-to-large .title-large .title-large-text,
.ios .router-transition-backward .navbar-previous.router-navbar-transition-to-large:not(.router-navbar-transition-from-large) .title-large .title-large-text {
animation: ios-navbar-large-title-text-slide-down var(--zmp-page-transition-duration) forwards, ios-navbar-large-title-text-fade-in var(--zmp-page-transition-duration) forwards;
}
.ios .router-transition-backward .navbar-current.navbar-large:not(.navbar-large-collapsed) .title,
.ios .router-transition-backward .navbar-previous.navbar-large:not(.navbar-large-collapsed) .title {
animation: none;
opacity: 0 !important;
transition-duration: 0;
}
.ios .router-transition-forward .navbar-current .navbar-bg {
animation-name: ios-navbar-bg-from-cb-to-lb;
}
.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large.router-navbar-transition-to-large .navbar-bg {
animation-name: ios-navbar-bg-from-cb-to-lb;
}
.ios .router-transition-forward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .navbar-bg {
animation-name: ios-navbar-bg-from-cb-to-lt;
}
.ios .router-transition-forward .navbar-current:not(.router-navbar-transition-from-large).router-navbar-transition-to-large .navbar-bg {
animation-name: ios-navbar-bg-from-ct-to-lb;
}
.ios .router-transition-forward .navbar-current.navbar-large-collapsed:not(.router-navbar-transition-to-large) .navbar-bg {
animation-name: ios-navbar-bg-from-ct-to-lt;
}
.ios .router-transition-forward .navbar-current.navbar-large-collapsed.navbar-large-transparent:not(.router-navbar-transition-to-large) .navbar-bg,
.ios .router-transition-forward .navbar-current.navbar-large-collapsed.navbar-large.navbar-transparent:not(.router-navbar-transition-to-large) .navbar-bg {
animation-name: ios-navbar-transparent-bg-from-c-to-l;
}
.ios .router-transition-forward .navbar-next .navbar-bg {
animation-name: ios-navbar-bg-from-rb-to-cb;
}
.ios .router-transition-forward .navbar-next.router-navbar-transition-from-large.router-navbar-transition-to-large .navbar-bg {
animation-name: ios-navbar-bg-from-rb-to-cb;
}
.ios .router-transition-forward .navbar-next.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .navbar-bg {
animation-name: ios-navbar-bg-from-rb-to-ct;
}
.ios .router-transition-forward .navbar-next:not(.router-navbar-transition-from-large).router-navbar-transition-to-large .navbar-bg {
animation-name: ios-navbar-bg-from-rt-to-cb;
}
.ios .router-transition-backward .navbar-current .navbar-bg {
animation-name: ios-navbar-bg-from-cb-to-rb;
}
.ios .router-transition-backward .navbar-current:not(.router-navbar-transition-from-large).router-navbar-transition-to-large .navbar-bg {
animation-name: ios-navbar-bg-from-ct-to-rb;
}
.ios .router-transition-backward .navbar-current.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .navbar-bg {
animation-name: ios-navbar-bg-from-cb-to-rt;
}
.ios .router-transition-backward .navbar-current.navbar-large-collapsed .navbar-bg {
animation-name: ios-navbar-bg-from-ct-to-rt;
}
.ios .router-transition-backward .navbar-current.navbar-large-collapsed.navbar-large-transparent .navbar-bg,
.ios .router-transition-backward .navbar-current.navbar-large-collapsed.navbar-large.navbar-transparent .navbar-bg {
animation-name: ios-navbar-bg-from-cb-to-rb;
}
.ios .router-transition-backward .navbar-current.navbar-large-collapsed.router-navbar-transition-to-large .navbar-bg {
animation-name: ios-navbar-bg-from-ct-to-rb;
}
.ios .router-transition-backward .navbar-previous .navbar-bg {
animation-name: ios-navbar-bg-from-lb-to-cb;
}
.ios .router-transition-backward .navbar-previous:not(.router-navbar-transition-from-large).router-navbar-transition-to-large .navbar-bg {
animation-name: ios-navbar-bg-from-lt-to-cb;
}
.ios .router-transition-backward .navbar-previous.router-navbar-transition-from-large:not(.router-navbar-transition-to-large) .navbar-bg {
animation-name: ios-navbar-bg-from-lb-to-ct;
}
.ios .router-transition-backward .navbar-previous.navbar-large-collapsed .navbar-bg {
animation-name: ios-navbar-bg-from-lt-to-ct;
}
.ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large-transparent .navbar-bg,
.ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large.navbar-transparent .navbar-bg {
animation-name: ios-navbar-transparent-bg-from-l-to-c;
}
.ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large-transparent.router-navbar-transition-from-large .navbar-bg,
.ios .router-transition-backward .navbar-previous.navbar-large-collapsed.navbar-large.navbar-transparent.router-navbar-transition-from-large .navbar-bg {
animation-name: ios-navbar-bg-from-lb-to-ct;
}
.view-master-detail .navbars {
z-index: auto;
}
.view-master-detail .page-master {
z-index: 525;
}
.view-master-detail .navbar-master .navbar-inner,
.view-master-detail .navbar-master .navbar-bg {
z-index: 550;
}
.view-master-detail .navbar-master-detail .navbar-inner,
.view-master-detail .navbar-master-detail .navbar-bg {
z-index: 500;
}
.view-master-detail .navbar-master.navbar-previous {
pointer-events: auto;
}
.view-master-detail .navbar-master.navbar-previous .left,
.view-master-detail .navbar-master.navbar-previous:not(.navbar-large) .title,
.view-master-detail .navbar-master.navbar-previous .right,
.view-master-detail .navbar-master.navbar-previous .subnavbar {
opacity: 1;
}
.view-master-detail.router-transition .navbar-master .left,
.view-master-detail.router-transition .navbar-master .left .icon + span,
.view-master-detail.router-transition .navbar-master:not(.navbar-large) .title,
.view-master-detail.router-transition .navbar-master .right,
.view-master-detail.router-transition .navbar-master .subnavbar,
.view-master-detail.router-transition .navbar-master .fading {
opacity: 1 !important;
transition-duration: 0ms;
transform: none !important;
animation: none !important;
}
.view-master-detail.router-transition .navbar-master .navbar-bg {
transition-duration: 0ms;
animation: none !important;
}
.view-master-detail.router-transition .navbar-master.navbar-large .title {
opacity: calc(-1 + 2 * var(--zmp-navbar-large-collapse-progress)) !important;
transition-duration: 0ms;
transform: none !important;
animation: none !important;
}
.view-master-detail.router-transition .navbar-master.navbar-large .title-large,
.view-master-detail.router-transition .navbar-master.navbar-large .title-large-text {
transition-duration: 0ms;
animation: none !important;
}
.view-master-detail.router-transition .navbar-master.navbar-large-transparent .navbar-bg,
.view-master-detail.router-transition .navbar-master.navbar-large.navbar-transparent .navbar-bg {
height: 100% !important;
opacity: var(--zmp-navbar-large-collapse-progress) !important;
}
@keyframes ios-navbar-element-fade-in {
0% {
opacity: 0;
}
25% {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes ios-navbar-element-fade-out {
from {
opacity: 1;
}
75% {
opacity: 0;
}
to {
opacity: 0;
}
}
@keyframes ios-navbar-large-title-text-slide-up {
0% {
transform: translateX(0px) translateY(0%) scale(1);
}
100% {
transform: translateX(calc(-1 * (var(--zmp-navbarLeftTextOffset) - var(--zmp-navbarTitleLargeOffset)))) translateY(calc(-1 * var(--zmp-navbar-large-title-height) + var(--zmp-navbar-large-title-padding-vertical))) scale(0.5);
}
}
@keyframes ios-navbar-large-title-text-slide-down {
0% {
transform: translateX(calc(-1 * (var(--zmp-navbarLeftTextOffset) - var(--zmp-navbarTitleLargeOffset)))) translateY(calc(-1 * var(--zmp-navbar-large-title-height) + var(--zmp-navbar-large-title-padding-vertical) / 2)) scale(0.5);
}
100% {
transform: translateX(0px) translateY(0%) scale(1);
}
}
@keyframes ios-navbar-large-title-text-slide-left {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0%);
}
}
@keyframes ios-navbar-large-title-text-slide-right {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
@keyframes ios-navbar-large-title-text-fade-out {
0% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes ios-navbar-large-title-text-fade-in {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes ios-navbar-back-text-current-to-previous {
0% {
opacity: 1;
transform: translateY(0px) translateX(0px) scale(1);
}
80% {
opacity: 0;
}
100% {
opacity: 0;
transform: translateX(calc(-1 * (var(--zmp-navbarTitleLargeOffset) - var(--zmp-navbarLeftTextOffset)))) translateY(calc(1 * var(--zmp-navbar-large-title-height) - var(--zmp-navbar-large-title-padding-vertical) / 2)) scale(2);
}
}
@keyframes ios-navbar-back-text-next-to-current {
0% {
opacity: 0;
transform: translateX(calc(-1 * (var(--zmp-navbarTitleLargeOffset) - var(--zmp-navbarLeftTextOffset)))) translateY(calc(1 * var(--zmp-navbar-large-title-height) + var(--zmp-navbar-large-title-padding-vertical) / 2)) scale(2);
}
20% {
opacity: 0;
}
100% {
opacity: 1;
transform: translateX(0px) translateY(0px) scale(1);
}
}
@keyframes ios-navbar-bg-from-cb-to-lb {
from {
transform: var(--zmp-navbar-large-bg-center-bottom);
}
to {
transform: var(--zmp-navbar-large-bg-left-bottom);
}
}
@keyframes ios-navbar-bg-from-cb-to-lt {
from {
transform: var(--zmp-navbar-large-bg-center-bottom);
}
to {
transform: var(--zmp-navbar-large-bg-left-top);
}
}
@keyframes ios-navbar-bg-from-ct-to-lb {
from {
transform: var(--zmp-navbar-large-bg-center-top);
}
to {
transform: var(--zmp-navbar-large-bg-left-bottom);
}
}
@keyframes ios-navbar-bg-from-ct-to-lt {
from {
transform: var(--zmp-navbar-large-bg-center-top);
}
to {
transform: var(--zmp-navbar-large-bg-left-top);
}
}
@keyframes ios-navbar-bg-from-rb-to-cb {
from {
transform: var(--zmp-navbar-large-bg-right-bottom);
}
to {
transform: var(--zmp-navbar-large-bg-center-bottom);
}
}
@keyframes ios-navbar-bg-from-rb-to-ct {
from {
transform: var(--zmp-navbar-large-bg-right-bottom);
}
to {
transform: var(--zmp-navbar-large-bg-center-top);
}
}
@keyframes ios-navbar-bg-from-rt-to-cb {
from {
transform: var(--zmp-navbar-large-bg-right-top);
}
to {
transform: var(--zmp-navbar-large-bg-center-bottom);
}
}
@keyframes ios-navbar-bg-from-cb-to-rb {
from {
transform: var(--zmp-navbar-large-bg-center-bottom);
}
to {
transform: var(--zmp-navbar-large-bg-right-bottom);
}
}
@keyframes ios-navbar-bg-from-ct-to-rb {
from {
transform: var(--zmp-navbar-large-bg-center-top);
}
to {
transform: var(--zmp-navbar-large-bg-right-bottom);
}
}
@keyframes ios-navbar-bg-from-cb-to-rt {
from {
transform: var(--zmp-navbar-large-bg-center-bottom);
}
to {
transform: var(--zmp-navbar-large-bg-right-top);
}
}
@keyframes ios-navbar-bg-from-ct-to-rt {
from {
transform: var(--zmp-navbar-large-bg-center-top);
}
to {
transform: var(--zmp-navbar-large-bg-right-top);
}
}
@keyframes ios-navbar-bg-from-lb-to-cb {
from {
transform: var(--zmp-navbar-large-bg-left-bottom);
}
to {
transform: var(--zmp-navbar-large-bg-center-bottom);
}
}
@keyframes ios-navbar-bg-from-lt-to-cb {
from {
transform: var(--zmp-navbar-large-bg-left-top);
}
to {
transform: var(--zmp-navbar-large-bg-center-bottom);
}
}
@keyframes ios-navbar-bg-from-lb-to-ct {
from {
transform: var(--zmp-navbar-large-bg-left-bottom);
}
to {
transform: var(--zmp-navbar-large-bg-center-top);
}
}
@keyframes ios-navbar-bg-from-lt-to-ct {
from {
transform: var(--zmp-navbar-large-bg-left-top);
}
to {
transform: var(--zmp-navbar-large-bg-center-top);
}
}
@keyframes ios-navbar-transparent-bg-from-l-to-c {
from {
transform: var(--zmp-navbar-large-transparent-bg-left);
}
to {
transform: var(--zmp-navbar-large-transparent-bg-center);
}
}
@keyframes ios-navbar-transparent-bg-from-c-to-l {
from {
transform: var(--zmp-navbar-large-transparent-bg-center);
}
to {
transform: var(--zmp-navbar-large-transparent-bg-left);
}
}
.md .navbar a.link {
padding: 0 12px;
min-width: 48px;
}
.md .navbar a.link:before {
content: '';
width: 152%;
height: 152%;
left: -26%;
top: -26%;
position: absolute;
background-image: radial-gradient(circle at center, var(--zmp-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
opacity: 0;
pointer-events: none;
transition-duration: 300ms;
transition-property: opacity;
}
.md .navbar a.link.icon-only:before,
.md .navbar a.link.ripple-inset:before,
.md .navbar a.link.searchbar-disable-button:before,
.md .navbar a.link.input-clear-button:before,
.md .navbar a.link.notification-close-button:before {
width: 100%;
height: 100%;
left: 0;
top: 0;
background-image: radial-gradient(circle at center, var(--zmp-link-highlight-color) 71%, rgba(255, 255, 255, 0) 71%);
}
.md .navbar a.link.active-state:before {
opacity: 1;
transition-duration: 150ms;
}
.md .navbar a.icon-only {
min-width: 0;
flex-shrink: 0;
width: 48px;
}
.md .navbar .right {
margin-right: auto;
}
.md .navbar .right:first-child {
left: var(--zmp-safe-area-left);
}
.md .navbar-inner {
justify-content: flex-start;
overflow: hidden;
}
.md .navbar-large:not(.navbar-large-collapsed) .navbar-inner {
overflow: visible;
}
.md .page.page-with-subnavbar .navbar-inner {
overflow: visible;
}
.md .navbar-inner-centered-title {
justify-content: space-between;
}
.md .navbar-inner-centered-title .right {
margin-right: 0;
}
.md .navbar-inner-centered-title .title {
text-align: center;
}
.aurora .navbar a.icon-only {
margin: 0;
justify-content: center;
}
.aurora .navbar .left a + a,
.aurora .navbar .right a + a {
margin-right: 10px;
}
.aurora .navbar b {
font-weight: bold;
}
.aurora .navbar .left {
margin-left: 16px;
}
.aurora .navbar .right {
margin-right: 16px;
}
.aurora .navbar .right:first-child {
left: calc(16px + var(--zmp-safe-area-left));
}
.aurora .navbar-inner {
justify-content: space-between;
}
.aurora .navbar-inner-left-title {
justify-content: flex-start;
}
.aurora .navbar-inner-left-title .right {
margin-right: auto;
}
.aurora .navbar-inner-left-title .title {
text-align: left;
margin-left: 16px;
}
/* === Toolbar === */
:root {
/*
--zmp-toolbar-bg-color: var(--zmp-bars-bg-color);
--zmp-toolbar-bg-color-rgb: var(--zmp-bars-bg-color-rgb);
--zmp-toolbar-bg-image: var(--zmp-bars-bg-image);
--zmp-toolbar-border-color: var(--zmp-bars-border-color);
--zmp-toolbar-link-color: var(--zmp-bars-link-color);
--zmp-toolbar-text-color: var(--zmp-bars-text-color);
--zmp-tabbar-link-active-color: var(--zmp-theme-color);
*/
--zmp-tabbar-link-active-bg-color: transparent;
--zmp-tabbar-label-text-transform: none;
--zmp-toolbar-hide-show-transition-duration: 400ms;
}
.ios {
--zmp-toolbar-height: 44px;
--zmp-toolbar-font-size: 17px;
--zmp-toolbar-inner-padding-left: 8px;
--zmp-toolbar-inner-padding-right: 8px;
/*
--zmp-toolbar-link-height: var(--zmp-toolbar-height);
--zmp-toolbar-link-line-height: var(--zmp-toolbar-height);
*/
--zmp-tabbar-labels-height: 50px;
--zmp-tabbar-labels-tablet-height: 50px;
--zmp-toolbar-top-shadow-image: none;
--zmp-toolbar-bottom-shadow-image: none;
--zmp-tabbar-icon-size: 28px;
--zmp-tabbar-link-text-transform: none;
--zmp-tabbar-link-font-weight: 400;
--zmp-tabbar-link-letter-spacing: 0;
--zmp-tabbar-label-font-size: 12px;
--zmp-tabbar-label-tablet-font-size: 14px;
--zmp-tabbar-label-font-weight: 500;
--zmp-tabbar-label-letter-spacing: 0.01;
--zmp-tabbar-link-inactive-color: rgba(0, 0, 0, 0.4);
}
.ios .theme-dark,
.ios.theme-dark {
--zmp-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
}
.md {
--zmp-toolbar-height: 48px;
--zmp-toolbar-font-size: 14px;
--zmp-toolbar-inner-padding-left: 0px;
--zmp-toolbar-inner-padding-right: 0px;
/*
--zmp-toolbar-link-height: var(--zmp-toolbar-height);
--zmp-toolbar-link-line-height: var(--zmp-toolbar-height);
*/
--zmp-tabbar-labels-height: 56px;
--zmp-tabbar-labels-tablet-height: 56px;
/*
--zmp-tabbar-link-active-border-color: var(--zmp-theme-color);
*/
--zmp-toolbar-top-shadow-image: var(--zmp-bars-shadow-bottom-image);
--zmp-toolbar-bottom-shadow-image: var(--zmp-bars-shadow-top-image);
--zmp-tabbar-icon-size: 24px;
--zmp-tabbar-link-text-transform: uppercase;
--zmp-tabbar-link-font-weight: 500;
--zmp-tabbar-link-letter-spacing: 0.05em;
--zmp-tabbar-label-font-size: 14px;
--zmp-tabbar-label-tablet-font-size: 14px;
--zmp-tabbar-label-font-weight: 400;
--zmp-tabbar-label-letter-spacing: 0;
--zmp-tabbar-link-inactive-color: rgba(0, 0, 0, 0.54);
}
.md .theme-dark,
.md.theme-dark {
--zmp-tabbar-link-inactive-color: rgba(255, 255, 255, 0.54);
}
.aurora {
--zmp-toolbar-height: 48px;
--zmp-toolbar-font-size: 16px;
--zmp-toolbar-inner-padding-left: 16px;
--zmp-toolbar-inner-padding-right: 16px;
--zmp-toolbar-link-height: auto;
--zmp-toolbar-link-line-height: inherit;
--zmp-tabbar-labels-height: 52px;
--zmp-tabbar-labels-tablet-height: 52px;
/*
--zmp-tabbar-link-active-border-color: var(--zmp-theme-color);
*/
--zmp-toolbar-top-shadow-image: none;
--zmp-toolbar-bottom-shadow-image: none;
--zmp-tabbar-icon-size: 24px;
--zmp-tabbar-link-text-transform: none;
--zmp-tabbar-link-font-weight: 500;
--zmp-tabbar-link-letter-spacing: 0;
--zmp-tabbar-label-font-size: 14px;
--zmp-tabbar-label-tablet-font-size: 14px;
--zmp-tabbar-label-font-weight: 500;
--zmp-tabbar-label-letter-spacing: 0;
--zmp-tabbar-link-inactive-color: rgba(0, 0, 0, 0.5);
}
.aurora .theme-dark,
.aurora.theme-dark {
--zmp-tabbar-link-inactive-color: rgba(255, 255, 255, 0.5);
}
.toolbar {
width: 100%;
position: relative;
margin: 0;
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 600;
box-sizing: border-box;
left: 0;
height: var(--zmp-toolbar-height);
background-image: var(--zmp-toolbar-bg-image, var(--zmp-bars-bg-image));
background-color: var(--zmp-toolbar-bg-color, var(--zmp-bars-bg-color));
color: var(--zmp-toolbar-text-color, var(--zmp-bars-text-color));
font-size: var(--zmp-toolbar-font-size);
}
@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
.ios-translucent-bars .toolbar {
background-color: rgba(var(--zmp-toolbar-bg-color-rgb, var(--zmp-bars-bg-color-rgb)), var(--zmp-bars-translucent-opacity));
-webkit-backdrop-filter: saturate(180%) blur(var(--zmp-bars-translucent-blur));
backdrop-filter: saturate(180%) blur(var(--zmp-bars-translucent-blur));
}
}
.toolbar b {
font-weight: 600;
}
.toolbar a {
color: var(--zmp-toolbar-link-color, var(--zmp-bars-link-color, var(--zmp-theme-color)));
box-sizing: border-box;
flex-shrink: 1;
position: relative;
white-space: nowrap;
text-overflow: ellipsis;
}
.toolbar .link {
display: flex;
line-height: var(--zmp-toolbar-link-line-height, var(--zmp-toolbar-height));
height: var(--zmp-toolbar-link-height, var(--zmp-toolbar-height));
}
.toolbar i.icon {
display: block;
}
.toolbar:after,
.toolbar:before {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.views > .toolbar,
.view > .toolbar,
.page > .toolbar {
position: absolute;
}
.toolbar-top,
.ios .toolbar-top-ios,
.md .toolbar-top-md,
.aurora .toolbar-top-aurora {
top: 0;
}
.toolbar-top .tab-link-highlight,
.ios .toolbar-top-ios .tab-link-highlight,
.md .toolbar-top-md .tab-link-highlight,
.aurora .toolbar-top-aurora .tab-link-highlight {
bottom: 0;
}
.toolbar-top.no-hairline:after,
.ios .toolbar-top-ios.no-hairline:after,
.md .toolbar-top-md.no-hairline:after,
.aurora .toolbar-top-aurora.no-hairline:after,
.toolbar-top.no-border:after,
.ios .toolbar-top-ios.no-border:after,
.md .toolbar-top-md.no-border:after,
.aurora .toolbar-top-aurora.no-border:after {
display: none !important;
}
.toolbar-top.no-shadow:before,
.ios .toolbar-top-ios.no-shadow:before,
.md .toolbar-top-md.no-shadow:before,
.aurora .toolbar-top-aurora.no-shadow:before,
.toolbar-top.toolbar-hidden:before,
.ios .toolbar-top-ios.toolbar-hidden:before,
.md .toolbar-top-md.toolbar-hidden:before,
.aurora .toolbar-top-aurora.toolbar-hidden:before {
display: none !important;
}
.toolbar-top:after,
.ios .toolbar-top-ios:after,
.md .toolbar-top-md:after,
.aurora .toolbar-top-aurora:after,
.toolbar-top:before,
.ios .toolbar-top-ios:before,
.md .toolbar-top-md:before,
.aurora .toolbar-top-aurora:before {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.toolbar-top:after,
.ios .toolbar-top-ios:after,
.md .toolbar-top-md:after,
.aurora .toolbar-top-aurora:after {
content: '';
position: absolute;
background-color: var(--zmp-toolbar-border-color, var(--zmp-bars-border-color));
display: block;
z-index: 15;
top: auto;
right: auto;
bottom: 0;
left: 0;
height: 1px;
width: 100%;
transform-origin: 50% 100%;
transform: scaleY(calc(1 / var(--zmp-device-pixel-ratio)));
}
.toolbar-top:before,
.ios .toolbar-top-ios:before,
.md .toolbar-top-md:before,
.aurora .toolbar-top-aurora:before {
content: '';
position: absolute;
right: 0;
width: 100%;
top: 100%;
bottom: auto;
height: 8px;
pointer-events: none;
background: var(--zmp-toolbar-top-shadow-image);
}
.toolbar-bottom,
.ios .toolbar-bottom-ios,
.md .toolbar-bottom-md,
.aurora .toolbar-bottom-aurora {
bottom: 0;
height: calc(var(--zmp-toolbar-height) + var(--zmp-safe-area-bottom));
}
.toolbar-bottom .tab-link-highlight,
.ios .toolbar-bottom-ios .tab-link-highlight,
.md .toolbar-bottom-md .tab-link-highlight,
.aurora .toolbar-bottom-aurora .tab-link-highlight {
top: 0;
}
.toolbar-bottom .toolbar-inner,
.ios .toolbar-bottom-ios .toolbar-inner,
.md .toolbar-bottom-md .toolbar-inner,
.aurora .toolbar-bottom-aurora .toolbar-inner {
height: auto;
top: 0;
bottom: var(--zmp-safe-area-bottom);
}
.toolbar-bottom.no-hairline:before,
.ios .toolbar-bottom-ios.no-hairline:before,
.md .toolbar-bottom-md.no-hairline:before,
.aurora .toolbar-bottom-aurora.no-hairline:before,
.toolbar-bottom.no-border:before,
.ios .toolbar-bottom-ios.no-border:before,
.md .toolbar-bottom-md.no-border:before,
.aurora .toolbar-bottom-aurora.no-border:before {
display: none !important;
}
.toolbar-bottom.no-shadow:after,
.ios .toolbar-bottom-ios.no-shadow:after,
.md .toolbar-bottom-md.no-shadow:after,
.aurora .toolbar-bottom-aurora.no-shadow:after,
.toolbar-bottom.toolbar-hidden:after,
.ios .toolbar-bottom-ios.toolbar-hidden:after,
.md .toolbar-bottom-md.toolbar-hidden:after,
.aurora .toolbar-bottom-aurora.toolbar-hidden:after {
display: none !important;
}
.toolbar-bottom:before,
.ios .toolbar-bottom-ios:before,
.md .toolbar-bottom-md:before,
.aurora .toolbar-bottom-aurora:before {
content: '';
position: absolute;
background-color: var(--zmp-toolbar-border-color, var(--zmp-bars-border-color));
display: block;
z-index: 15;
top: 0;
right: auto;
bottom: auto;
left: 0;
height: 1px;
width: 100%;
transform-origin: 50% 0%;
transform: scaleY(calc(1 / var(--zmp-device-pixel-ratio)));
}
.toolbar-bottom:after,
.ios .toolbar-bottom-ios:after,
.md .toolbar-bottom-md:after,
.aurora .toolbar-bottom-aurora:after {
content: '';
position: absolute;
right: 0;
width: 100%;
bottom: 100%;
height: 8px;
top: auto;
pointer-events: none;
background: var(--zmp-toolbar-bottom-shadow-image);
transform: translate3d(0, 0, 0);
}
.toolbar-inner {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
box-sizing: border-box;
align-items: center;
align-content: center;
overflow: hidden;
padding: 0 calc(var(--zmp-toolbar-inner-padding-right) + var(--zmp-safe-area-right)) 0 calc(var(--zmp-toolbar-inner-padding-left) + var(--zmp-safe-area-left));
}
.views > .tabbar,
.views > .tabbar-labels {
z-index: 5001;
}
.tabbar a,
.tabbar-labels a {
color: var(--zmp-tabbar-link-inactive-color);
}
.tabbar .link,
.tabbar-labels .link {
line-height: 1.4;
}
.tabbar .tab-link,
.tabbar-labels .tab-link,
.tabbar .link,
.tabbar-labels .link {
height: 100%;
width: 100%;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-transform: var(--zmp-tabbar-link-text-transform);
font-weight: var(--zmp-tabbar-link-font-weight);
letter-spacing: var(--zmp-tabbar-link-letter-spacing);
overflow: hidden;
}
.tabbar .tab-link-active,
.tabbar-labels .tab-link-active {
color: var(--zmp-tabbar-link-active-color, var(--zmp-theme-color));
background-color: var(--zmp-tabbar-link-active-bg-color, transparent);
}
.tabbar i.icon,
.tabbar-labels i.icon {
font-size: var(--zmp-tabbar-icon-size);
height: var(--zmp-tabbar-icon-size);
line-height: var(--zmp-tabbar-icon-size);
}
.tabbar-labels {
--zmp-toolbar-height: var(--zmp-tabbar-labels-height);
}
.tabbar-labels .tab-link,
.tabbar-labels .link {
height: 100%;
justify-content: space-between;
align-items: center;
}
.tabbar-labels .tabbar-label {
display: block;
line-height: 1;
margin: 0;
position: relative;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--zmp-tabbar-label-font-size);
text-transform: var(--zmp-tabbar-label-text-transform);
font-weight: var(--zmp-tabbar-label-font-weight);
letter-spacing: var(--zmp-tabbar-label-letter-spacing);
}
@media (min-width: 768px) and (min-height: 600px) {
:root {
--zmp-tabbar-labels-height: var(--zmp-tabbar-labels-tablet-height);
--zmp-tabbar-label-font-size: var(--zmp-tabbar-label-tablet-font-size);
}
}
.tabbar-scrollable .toolbar-inner {
justify-content: flex-start;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.tabbar-scrollable .toolbar-inner::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
opacity: 0 !important;
}
.tabbar-scrollable .tab-link,
.tabbar-scrollable .link {
width: auto;
flex-shrink: 0;
}
.toolbar-transitioning,
.navbar-transitioning + .toolbar,
.navbar-transitioning ~ * .toolbar {
transition-duration: var(--zmp-toolbar-hide-show-transition-duration);
}
.toolbar-bottom ~ *,
.ios .toolbar-bottom-ios ~ *,
.md .toolbar-bottom-md ~ *,
.aurora .toolbar-bottom-aurora ~ * {
--zmp-page-toolbar-bottom-offset: var(--zmp-toolbar-height);
}
.toolbar-bottom.tabbar-labels ~ *,
.ios .toolbar-bottom-ios.tabbar-labels ~ *,
.md .toolbar-bottom-md.tabbar-labels ~ *,
.aurora .toolbar-bottom-aurora.tabbar-labels ~ * {
--zmp-page-toolbar-bottom-offset: var(--zmp-tabbar-labels-height);
}
.toolbar-bottom.toolbar-hidden,
.ios .toolbar-bottom-ios.toolbar-hidden,
.md .toolbar-bottom-md.toolbar-hidden,
.aurora .toolbar-bottom-aurora.toolbar-hidden {
transform: translate3d(0, 100%, 0);
}
.toolbar-top ~ *,
.ios .toolbar-top-ios ~ *,
.md .toolbar-top-md ~ *,
.aurora .toolbar-top-aurora ~ * {
--zmp-page-toolbar-top-offset: var(--zmp-toolbar-height);
}
.toolbar-top.tabbar-labels ~ *,
.ios .toolbar-top-ios.tabbar-labels ~ *,
.md .toolbar-top-md.tabbar-labels ~ *,
.aurora .toolbar-top-aurora.tabbar-labels ~ * {
--zmp-page-toolbar-top-offset: var(--zmp-tabbar-labels-height);
}
.toolbar-top.toolbar-hidden,
.ios .toolbar-top-ios.toolbar-hidden,
.md .toolbar-top-md.toolbar-hidden,
.aurora .toolbar-top-aurora.toolbar-hidden {
transform: translate3d(0, -100%, 0);
}
.navbar ~ .toolbar-top,
.navbars ~ .toolbar-top,
.ios .navbar ~ .toolbar-top-ios,
.ios .navbars ~ .toolbar-top-ios,
.md .navbar ~ .toolbar-top-md,
.aurora .navbar ~ .toolbar-top-aurora,
.navbar ~ * .toolbar-top,
.navbars ~ * .toolbar-top,
.ios .navbar ~ * .toolbar-top-ios,
.ios .navbars ~ * .toolbar-top-ios,
.md .navbar ~ * .toolbar-top-md,
.aurora .navbar ~ * .toolbar-top-aurora,
.navbar ~ .page:not(.no-navbar) .toolbar-top,
.navbars ~ .page:not(.no-navbar) .toolbar-top,
.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios,
.ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios,
.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md,
.aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora {
top: calc(var(--zmp-navbar-height) + var(--zmp-safe-area-top));
}
.navbar ~ .toolbar-top.toolbar-hidden,
.navbars ~ .toolbar-top.toolbar-hidden,
.ios .navbar ~ .toolbar-top-ios.toolbar-hidden,
.ios .navbars ~ .toolbar-top-ios.toolbar-hidden,
.md .navbar ~ .toolbar-top-md.toolbar-hidden,
.aurora .navbar ~ .toolbar-top-aurora.toolbar-hidden,
.navbar ~ * .toolbar-top.toolbar-hidden,
.navbars ~ * .toolbar-top.toolbar-hidden,
.ios .navbar ~ * .toolbar-top-ios.toolbar-hidden,
.ios .navbars ~ * .toolbar-top-ios.toolbar-hidden,
.md .navbar ~ * .toolbar-top-md.toolbar-hidden,
.aurora .navbar ~ * .toolbar-top-aurora.toolbar-hidden,
.navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden,
.navbars ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden,
.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
.ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden,
.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden,
.aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden {
transform: translate3d(0, calc(-1 * (var(--zmp-navbar-height) + var(--zmp-toolbar-height) + var(--zmp-safe-area-top))), 0);
}
.navbar ~ .toolbar-top.toolbar-hidden.tabbar-labels,
.navbars ~ .toolbar-top.toolbar-hidden.tabbar-labels,
.ios .navbar ~ .toolbar-top-ios.toolbar-hidden.tabbar-labels,
.ios .navbars ~ .toolbar-top-ios.toolbar-hidden.tabbar-labels,
.md .navbar ~ .toolbar-top-md.toolbar-hidden.tabbar-labels,
.aurora .navbar ~ .toolbar-top-aurora.toolbar-hidden.tabbar-labels,
.navbar ~ * .toolbar-top.toolbar-hidden.tabbar-labels,
.navbars ~ * .toolbar-top.toolbar-hidden.tabbar-labels,
.ios .navbar ~ * .toolbar-top-ios.toolbar-hidden.tabbar-labels,
.ios .navbars ~ * .toolbar-top-ios.toolbar-hidden.tabbar-labels,
.md .navbar ~ * .toolbar-top-md.toolbar-hidden.tabbar-labels,
.aurora .navbar ~ * .toolbar-top-aurora.toolbar-hidden.tabbar-labels,
.navbar ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-labels,
.navbars ~ .page:not(.no-navbar) .toolbar-top.toolbar-hidden.tabbar-labels,
.ios .navbar ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-labels,
.ios .navbars ~ .page:not(.no-navbar) .toolbar-top-ios.toolbar-hidden.tabbar-labels,
.md .navbar ~ .page:not(.no-navbar) .toolbar-top-md.toolbar-hidden.tabbar-labels,
.aurora .navbar ~ .page:not(.no-navbar) .toolbar-top-aurora.toolbar-hidden.tabbar-labels {
transform: translate3d(0, calc(-1 * (var(--zmp-navbar-height) + var(--zmp-tabbar-labels-height) + var(--zmp-safe-area-top))), 0);
}
.navbar-hidden + .toolbar-top:not(.toolbar-hidden),
.ios .navbar-hidden + .toolbar-top-ios:not(.toolbar-hidden),
.md .navbar-hidden + .toolbar-top-md:not(.toolbar-hidden),
.aurora .navbar-hidden + .toolbar-top-aurora:not(.toolbar-hidden),
.navbar-hidden ~ * .toolbar-top:not(.toolbar-hidden),
.ios .navbar-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
.md .navbar-hidden ~ * .toolbar-top-md:not(.toolbar-hidden),
.aurora .navbar-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
transform: translate3d(0, calc(0px - var(--zmp-navbar-height)), 0);
}
.navbar-large-hidden + .toolbar-top:not(.toolbar-hidden),
.ios .navbar-large-hidden + .toolbar-top-ios:not(.toolbar-hidden),
.md .navbar-large-hidden + .toolbar-top-md:not(.toolbar-hidden),
.navbar-large-hidden ~ * .toolbar-top:not(.toolbar-hidden),
.ios .navbar-large-hidden ~ * .toolbar-top-ios:not(.toolbar-hidden),
.md .navbar-large-hidden ~ * .toolbar-top-md:not(.toolbar-hidden),
.aurora .navbar-large-hidden ~ * .toolbar-top-aurora:not(.toolbar-hidden) {
transform: translate3d(0, calc(0px - var(--zmp-navbar-height) - var(--zmp-navbar-large-title-height)), 0);
}
.ios .toolbar a.icon-only {
min-height: var(--zmp-toolbar-height);
display: flex;
justify-content: center;
align-items: center;
margin: 0;
min-width: 44px;
}
.ios .tabbar-labels .tab-link,
.ios .tabbar-labels .link {
padding-top: 4px;
padding-bottom: 4px;
}
.ios .tabbar-labels .tab-link i + span,
.ios .tabbar-labels .link i + span {
margin: 0;
}
@media (min-width: 768px) and (min-height: 600px) {
.ios .tabbar .tab-link,
.ios .tabbar-labels .tab-link,
.ios .tabbar .link,
.ios .tabbar-labels .link {
justify-content: center;
flex-direction: row;
}
.ios .tabbar .tab-link i + span,
.ios .tabbar-labels .tab-link i + span,
.ios .tabbar .link i + span,
.ios .tabbar-labels .link i + span {
margin-left: 5px;
}
}
.ios .tabbar-scrollable .toolbar-inner {
justify-content: flex-start;
}
.ios .tabbar-scrollable .tab-link,
.ios .tabbar-scrollable .link {
padding: 0 8px;
}
.md .toolbar .link {
justify-content: center;
padding: 0 12px;
min-width: 48px;
}
.md .toolbar .link:before {
content: '';
width: 152%;
height: 152%;
left: -26%;
top: -26%;
position: absolute;
background-image: radial-gradient(circle at center, var(--zmp-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
opacity: 0;
pointer-events: none;
transition-duration: 300ms;
transition-property: opacity;
}
.md .toolbar .link.icon-only:before,
.md .toolbar .link.ripple-inset:before,
.md .toolbar .link.searchbar-disable-button:before,
.md .toolbar .link.input-clear-button:before,
.md .toolbar .link.notification-close-button:before {
width: 100%;
height: 100%;
left: 0;
top: 0;
background-image: radial-gradient(circle at center, var(--zmp-link-highlight-color) 71%, rgba(255, 255, 255, 0) 71%);
}
.md .toolbar .link.active-state:before {
opacity: 1;
transition-duration: 150ms;
}
.md .toolbar a.icon-only {
min-width: 0;
flex-shrink: 0;
}
.md .tabbar .tab-link,
.md .tabbar-labels .tab-link,
.md .tabbar .link,
.md .tabbar-labels .link {
padding-left: 0;
padding-right: 0;
}
.md .tabbar a.icon-only,
.md .tabbar-labels a.icon-only {
flex-shrink: initial;
}
.md .tabbar .tab-link,
.md .tabbar-labels .tab-link {
transition-duration: 300ms;
overflow: hidden;
position: relative;
}
.md .tabbar .tab-link-highlight,
.md .tabbar-labels .tab-link-highlight {
position: absolute;
left: 0;
height: 2px;
background: var(--zmp-tabbar-link-active-border-color, var(--zmp-theme-color));
transition-duration: 300ms;
right: 0;
}
.md .tabbar-labels .tab-link,
.md .tabbar-labels .link {
padding-top: 7px;
padding-bottom: 7px;
}
.md .tabbar-label {
max-width: 100%;
overflow: hidden;
line-height: 1.2;
}
.md .tabbar-scrollable .toolbar-inner {
overflow: auto;
}
.md .tabbar-scrollable .tab-link,
.md .tabbar-scrollable .link {
padding: 0 12px;
}
.aurora .toolbar a.icon-only {
min-height: var(--zmp-toolbar-height);
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
.aurora .tabbar .tab-link-highlight,
.aurora .tabbar-labels .tab-link-highlight {
position: absolute;
left: 0;
height: 2px;
background: var(--zmp-tabbar-link-active-border-color, var(--zmp-theme-color));
transition-duration: 300ms;
right: 0;
}
.aurora .tabbar .toolbar-inner,
.aurora .tabbar-labels .toolbar-inner {
padding-left: 0;
padding-right: 0;
}
.aurora .tabbar .tab-link,
.aurora .tabbar-labels .tab-link,
.aurora .tabbar .link,
.aurora .tabbar-labels .link {
transition-duration: 200ms;
}
.aurora .tabbar-labels .tab-link,
.aurora .tabbar-labels .link {
padding-top: 5px;
padding-bottom: 5px;
}
.aurora .tabbar-labels .tab-link i + span,
.aurora .tabbar-labels .link i + span {
margin: 0;
}
.aurora .tabbar-scrollable .toolbar-inner {
justify-content: flex-start;
}
.aurora .tabbar-scrollable .tab-link,
.aurora .tabbar-scrollable .link {
padding: 0 16px;
}
/* === Subnavbar === */
:root {
/*
--zmp-subnavbar-bg-image: var(--zmp-bars-bg-image);
--zmp-subnavbar-bg-color: var(--zmp-bars-bg-color);
--zmp-subnavbar-bg-color-rgb: var(--zmp-bars-bg-color-rgb);
--zmp-subnavbar-border-color: var(--zmp-bars-border-color);
--zmp-subnavbar-link-color: var(--zmp-bars-link-color);
--zmp-subnavbar-text-color: var(--zmp-bars-text-color);
*/
--zmp-subnavbar-title-line-height: 1.2;
}
.ios {
--zmp-subnavbar-height: 44px;
--zmp-subnavbar-inner-padding-left: 8px;
--zmp-subnavbar-inner-padding-right: 8px;
--zmp-subnavbar-title-font-size: 34px;
--zmp-subnavbar-title-font-weight: 700;
--zmp-subnavbar-title-letter-spacing: -0.03em;
--zmp-subnavbar-title-margin-left: 8px;
--zmp-subnavbar-shadow-image: none;
/*
--zmp-subnavbar-link-height: var(--zmp-subnavbar-height);
--zmp-subnavbar-link-line-height: var(--zmp-subnavbar-height);
*/
}
.md {
--zmp-subnavbar-height: 48px;
--zmp-subnavbar-inner-padding-left: 16px;
--zmp-subnavbar-inner-padding-right: 16px;
--zmp-subnavbar-title-font-size: 20px;
--zmp-subnavbar-title-font-weight: 500;
--zmp-subnavbar-title-letter-spacing: 0;
--zmp-subnavbar-title-margin-left: 0px;
--zmp-subnavbar-shadow-image: var(--zmp-bars-shadow-bottom-image);
/*
--zmp-subnavbar-link-height: var(--zmp-subnavbar-height);
--zmp-subnavbar-link-line-height: var(--zmp-subnavbar-height);
*/
}
.aurora {
--zmp-subnavbar-height: 48px;
--zmp-subnavbar-inner-padding-left: 16px;
--zmp-subnavbar-inner-padding-right: 16px;
--zmp-subnavbar-title-font-size: 28px;
--zmp-subnavbar-title-font-weight: bold;
--zmp-subnavbar-title-letter-spacing: 0em;
--zmp-subnavbar-title-margin-left: 0px;
--zmp-subnavbar-shadow-image: none;
--zmp-subnavbar-link-height: auto;
--zmp-subnavbar-link-line-height: inherit;
}
.subnavbar {
width: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 600;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
background-image: var(--zmp-subnavbar-bg-image, var(--zmp-bars-bg-image));
background-color: var(--zmp-subnavbar-bg-color, var(--zmp-bars-bg-color));
color: var(--zmp-subnavbar-text-color, var(--zmp-bars-text-color));
}
@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
.ios-translucent-bars .subnavbar {
background-color: rgba(var(--zmp-subnavbar-bg-color-rgb, var(--zmp-bars-bg-color-rgb)), var(--zmp-bars-translucent-opacity));
-webkit-backdrop-filter: saturate(180%) blur(var(--zmp-bars-translucent-blur));
backdrop-filter: saturate(180%) blur(var(--zmp-bars-translucent-blur));
}
}
.subnavbar .subnavbar-title {
position: relative;
overflow: hidden;
text-overflow: ellpsis;
white-space: nowrap;
font-size: var(--zmp-subnavbar-title-font-size);
font-weight: var(--zmp-subnavbar-title-font-weight);
text-align: left;
display: inline-block;
line-height: var(--zmp-subnavbar-title-line-height);
letter-spacing: var(--zmp-subnavbar-title-letter-spacing);
margin-right: var(--zmp-subnavbar-title-margin-left);
}
.subnavbar .left,
.subnavbar .right {
flex-shrink: 0;
display: flex;
justify-content: flex-start;
align-items: center;
}
.subnavbar .right:first-child {
position: absolute;
height: 100%;
}
.subnavbar a {
color: var(--zmp-subnavbar-link-color, var(--zmp-bars-link-color, var(--zmp-theme-color)));
}
.subnavbar a.link {
line-height: var(--zmp-subnavbar-link-line-height, var(--zmp-subnavbar-height));
height: var(--zmp-subnavbar-link-height, var(--zmp-subnavbar-height));
}
.subnavbar a.icon-only {
min-width: var(--zmp-subnavbar-height);
}
.subnavbar.no-hairline:after,
.subnavbar.no-border:after {
display: none !important;
}
.subnavbar.no-shadow:before,
.subnavbar.navbar-hidden:before {
display: none !important;
}
.subnavbar:after,
.subnavbar:before {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.subnavbar:after {
content: '';
position: absolute;
background-color: var(--zmp-subnavbar-border-color, var(--zmp-bars-border-color));
display: block;
z-index: 15;
top: auto;
right: auto;
bottom: 0;
left: 0;
height: 1px;
width: 100%;
transform-origin: 50% 100%;
transform: scaleY(calc(1 / var(--zmp-device-pixel-ratio)));
}
.subnavbar:before {
content: '';
position: absolute;
right: 0;
width: 100%;
top: 100%;
bottom: auto;
height: 8px;
pointer-events: none;
background: var(--zmp-subnavbar-shadow-image);
}
.subnavbar-inner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
box-sizing: border-box;
justify-content: space-between;
overflow: hidden;
padding: 0 calc(var(--zmp-subnavbar-inner-padding-left) + var(--zmp-safe-area-right)) 0 calc(var(--zmp-subnavbar-inner-padding-right) + var(--zmp-safe-area-left));
}
.subnavbar-inner.stacked {
display: none;
}
.navbar .subnavbar {
top: 100%;
}
.views > .subnavbar,
.view > .subnavbar,
.page > .subnavbar {
position: absolute;
}
.navbar ~ * .subnavbar,
.navbars ~ * .subnavbar,
.page-with-subnavbar .navbar ~ .subnavbar,
.page-with-subnavbar .navbar ~ * .subnavbar,
.navbar ~ .page-with-subnavbar:not(.no-navbar) .subnavbar,
.navbar ~ .subnavbar,
.navbars ~ .page-with-subnavbar:not(.no-navbar) .subnavbar,
.navbars ~ .subnavbar {
top: calc(var(--zmp-navbar-height) + var(--zmp-safe-area-top));
}
.navbar ~ .page-with-navbar-large:not(.no-navbar) .subnavbar,
.navbars ~ .page-with-navbar-large:not(.no-navbar) .subnavbar,
.page-with-subnavbar.page-with-navbar-large .navbar ~ .subnavbar,
.page-with-subnavbar.page-with-navbar-large .navbar ~ * .subnavbar,
.navbar .title-large ~ .subnavbar {
top: calc(var(--zmp-navbar-height) + var(--zmp-navbar-large-title-height) + var(--zmp-safe-area-top));
transform: translate3d(0, calc(-1 * var(--zmp-navbar-large-collapse-progress) * var(--zmp-navbar-large-title-height)), 0);
}
.page-with-subnavbar,
.subnavbar ~ * {
--zmp-page-subnavbar-offset: var(--zmp-subnavbar-height);
}
.ios .subnavbar {
height: calc(var(--zmp-subnavbar-height) + 1px);
margin-top: -1px;
padding-top: 1px;
}
.ios .subnavbar .title {
align-self: flex-start;
flex-shrink: 10;
}
.ios .subnavbar .left a + a,
.ios .subnavbar .right a + a {
margin-right: 16px;
}
.ios .subnavbar .left {
margin-left: 10px;
}
.ios .subnavbar .right {
margin-right: 10px;
}
.ios .subnavbar .right:first-child {
left: 8px;
}
.ios .subnavbar a.link {
justify-content: flex-start;
}
.ios .subnavbar a.icon-only {
justify-content: center;
margin: 0;
}
.md .subnavbar {
height: var(--zmp-subnavbar-height);
}
.md .subnavbar .right {
margin-right: auto;
}
.md .subnavbar .right:first-child {
left: 16px;
}
.md .subnavbar a.link {
justify-content: center;
padding: 0 12px;
}
.md .subnavbar a.link:before {
content: '';
width: 152%;
height: 152%;
left: -26%;
top: -26%;
position: absolute;
background-image: radial-gradient(circle at center, var(--zmp-link-highlight-color) 66%, rgba(255, 255, 255, 0) 66%);
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
opacity: 0;
pointer-events: none;
transition-duration: 300ms;
transition-property: opacity;
}
.md .subnavbar a.link.icon-only:before,
.md .subnavbar a.link.ripple-inset:before,
.md .subnavbar a.link.searchbar-disable-button:before,
.md .subnavbar a.link.input-clear-button:before,
.md .subnavbar a.link.notification-close-button:before {
width: 100%;
height: 100%;
left: 0;
top: 0;
background-image: radial-gradient(circle at center, var(--zmp-link-highlight-color) 71%, rgba(255, 255, 255, 0) 71%);
}
.md .subnavbar a.link.active-state:before {
opacity: 1;
transition-duration: 150ms;
}
.md .subnavbar a.icon-only {
flex-shrink: 0;
padding: 0 12px;
}
.md .subnavbar-inner > a.link:first-child {
margin-right: calc(-1 * var(--zmp-subnavbar-inner-padding-right));
}
.md .subnavbar-inner > a.link:last-child {
margin-left: calc(-1 * var(--zmp-subnavbar-inner-padding-left));
}
.aurora .subnavbar {
height: calc(var(--zmp-subnavbar-height) + 1px);
margin-top: -1px;
padding-top: 1px;
}
.aurora .subnavbar .title {
align-self: flex-start;
flex-shrink: 10;
}
.aurora .subnavbar .left a + a,
.aurora .subnavbar .right a + a {
margin-right: 10px;
}
.aurora .subnavbar .left {
margin-left: 16px;
}
.aurora .subnavbar .right {
margin-right: 16px;
}
.aurora .subnavbar .right:first-child {
left: 16px;
}
.aurora .subnavbar a.link {
justify-content: flex-start;
}
.aurora .subnavbar a.icon-only {
justify-content: center;
margin: 0;
}
/* === Icon === */
.zmp-icons,
.material-icons {
width: 1em;
height: 1em;
}
i.icon {
display: inline-block;
vertical-align: middle;
background-size: 100% auto;
background-position: center;
background-repeat: no-repeat;
font-style: normal;
position: relative;
}
.icon-back:after,
.icon-prev:after,
.icon-forward:after,
.icon-next:after {
font-family: 'zmp-core-icons';
font-weight: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
text-align: center;
display: block;
width: 100%;
height: 100%;
font-size: 20px;
}
.icon[class*='color-'] {
color: var(--zmp-theme-color);
}
.ios .icon-back,
.ios .icon-prev,
.ios .icon-forward,
.ios .icon-next {
width: 12px;
height: 20px;
line-height: 20px;
}
.ios .icon-back:after,
.ios .icon-prev:after,
.ios .icon-forward:after,
.ios .icon-next:after {
line-height: inherit;
}
.ios .icon-prev:after,
.ios .icon-next:after {
font-size: 16px;
}
.ios .icon-back:after,
.ios .icon-prev:after {
content: 'chevron_right_ios';
}
.ios .icon-forward:after,
.ios .icon-next:after {
content: 'chevron_left_ios';
}
.md .icon-back,
.md .icon-forward,
.md .icon-next,
.md .icon-prev {
width: 24px;
height: 24px;
}
.md .icon-back:after,
.md .icon-forward:after,
.md .icon-next:after,
.md .icon-prev:after {
line-height: 1.2;
}
.md .icon-back:after {
content: 'arrow_right_md';
}
.md .icon-forward:after {
content: 'arrow_left_md';
}
.md .icon-next:after {
content: 'chevron_left_md';
}
.md .icon-prev:after {
content: 'chevron_right_md';
}
.aurora .zmp-icons,
.aurora .material-icons {
font-size: 24px;
}
.aurora .icon-back,
.aurora .icon-prev,
.aurora .icon-forward,
.aurora .icon-next {
width: 12px;
height: 20px;
line-height: 20px;
}
.aurora .icon-back:after,
.aurora .icon-prev:after,
.aurora .icon-forward:after,
.aurora .icon-next:after {
line-height: inherit;
}
.aurora .icon-prev:after,
.aurora .icon-next:after {
font-size: 16px;
}
.aurora .icon-back:after,
.aurora .icon-prev:after {
content: 'chevron_right_ios';
}
.aurora .icon-forward:after,
.aurora .icon-next:after {
content: 'chevron_left_ios';
}
.custom-modal-backdrop {
z-index: 10500;
}
.custom-modal-backdrop,
.actions-backdrop,
.dialog-backdrop,
.popover-backdrop,
.popup-backdrop,
.preloader-backdrop,
.sheet-backdrop,
.fab-backdrop {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 13000;
visibility: hidden;
opacity: 0;
transition-duration: 400ms;
}
.custom-modal-backdrop.not-animated,
.actions-backdrop.not-animated,
.dialog-backdrop.not-animated,
.popover-backdrop.not-animated,
.popup-backdrop.not-animated,
.preloader-backdrop.not-animated,
.sheet-backdrop.not-animated,
.fab-backdrop.not-animated {
transition-duration: 0ms;
}
.custom-modal-backdrop.backdrop-in,
.actions-backdrop.backdrop-in,
.dialog-backdrop.backdrop-in,
.popover-backdrop.backdrop-in,
.popup-backdrop.backdrop-in,
.preloader-backdrop.backdrop-in,
.sheet-backdrop.backdrop-in,
.fab-backdrop.backdrop-in {
visibility: visible;
opacity: 1;
}