/*!
 * 
 *     zarm
 *
 *     Github: https://github.com/ZhongAnTech/zarm
 *
 *     Copyright (c) 2013-present, ZhonganTech, Inc.
 *
 *     This source code is licensed under the MIT license found in the
 *     LICENSE file in the root directory of this source tree.
 *
 */
/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!../../node_modules/resolve-url-loader/index.js!../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!../../node_modules/normalize.css/normalize.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************************************/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}
/*!********************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!../../node_modules/resolve-url-loader/index.js!../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./src/style/entry.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************************/
:root {
  --za-theme-default: hsl(0, 0%, 90%);
  --za-theme-default-h: 0;
  --za-theme-default-s: 0%;
  --za-theme-default-l: 90%;
  --za-theme-default-light: hsl(0, 0%, 94%);
  --za-theme-default-light-h: 0;
  --za-theme-default-light-s: 0%;
  --za-theme-default-light-l: 94%;
  --za-theme-default-lighter: hsl(0, 0%, 95%);
  --za-theme-default-lighter-h: 0;
  --za-theme-default-lighter-s: 0%;
  --za-theme-default-lighter-l: 95%;
  --za-theme-default-dark: hsl(0, 0%, 86%);
  --za-theme-default-dark-h: 0;
  --za-theme-default-dark-s: 0%;
  --za-theme-default-dark-l: 86%;
  --za-theme-default-darker: hsl(0, 0%, 20%);
  --za-theme-default-darker-h: 0;
  --za-theme-default-darker-s: 0%;
  --za-theme-default-darker-l: 20%;
  --za-theme-primary: hsl(156, 100%, 36.9%);
  --za-theme-primary-h: 156;
  --za-theme-primary-s: 100%;
  --za-theme-primary-l: 36.9%;
  --za-theme-primary-light: hsl(156, 100%, 40.9%);
  --za-theme-primary-light-h: 156;
  --za-theme-primary-light-s: 100%;
  --za-theme-primary-light-l: 40.9%;
  --za-theme-primary-lighter: hsl(156, 100%, 95%);
  --za-theme-primary-lighter-h: 156;
  --za-theme-primary-lighter-s: 100%;
  --za-theme-primary-lighter-l: 95%;
  --za-theme-primary-dark: hsl(156, 100%, 32.9%);
  --za-theme-primary-dark-h: 156;
  --za-theme-primary-dark-s: 100%;
  --za-theme-primary-dark-l: 32.9%;
  --za-theme-primary-darker: hsl(156, 100%, 20%);
  --za-theme-primary-darker-h: 156;
  --za-theme-primary-darker-s: 100%;
  --za-theme-primary-darker-l: 20%;
  --za-theme-success: hsl(156, 100%, 36.9%);
  --za-theme-success-h: 156;
  --za-theme-success-s: 100%;
  --za-theme-success-l: 36.9%;
  --za-theme-success-light: hsl(156, 100%, 40.9%);
  --za-theme-success-light-h: 156;
  --za-theme-success-light-s: 100%;
  --za-theme-success-light-l: 40.9%;
  --za-theme-success-lighter: hsl(156, 100%, 95%);
  --za-theme-success-lighter-h: 156;
  --za-theme-success-lighter-s: 100%;
  --za-theme-success-lighter-l: 95%;
  --za-theme-success-dark: hsl(156, 100%, 32.9%);
  --za-theme-success-dark-h: 156;
  --za-theme-success-dark-s: 100%;
  --za-theme-success-dark-l: 32.9%;
  --za-theme-success-darker: hsl(156, 100%, 20%);
  --za-theme-success-darker-h: 156;
  --za-theme-success-darker-s: 100%;
  --za-theme-success-darker-l: 20%;
  --za-theme-warning: hsl(31, 83.1%, 55.9%);
  --za-theme-warning-h: 31;
  --za-theme-warning-s: 83.1%;
  --za-theme-warning-l: 55.9%;
  --za-theme-warning-light: hsl(31, 83.1%, 59.9%);
  --za-theme-warning-light-h: 31;
  --za-theme-warning-light-s: 83.1%;
  --za-theme-warning-light-l: 59.9%;
  --za-theme-warning-lighter: hsl(31, 83.1%, 95%);
  --za-theme-warning-lighter-h: 31;
  --za-theme-warning-lighter-s: 83.1%;
  --za-theme-warning-lighter-l: 95%;
  --za-theme-warning-dark: hsl(31, 83.1%, 51.9%);
  --za-theme-warning-dark-h: 31;
  --za-theme-warning-dark-s: 83.1%;
  --za-theme-warning-dark-l: 51.9%;
  --za-theme-warning-darker: hsl(31, 83.1%, 20%);
  --za-theme-warning-darker-h: 31;
  --za-theme-warning-darker-s: 83.1%;
  --za-theme-warning-darker-l: 20%;
  --za-theme-danger: hsl(0, 100%, 65.7%);
  --za-theme-danger-h: 0;
  --za-theme-danger-s: 100%;
  --za-theme-danger-l: 65.7%;
  --za-theme-danger-light: hsl(0, 100%, 69.7%);
  --za-theme-danger-light-h: 0;
  --za-theme-danger-light-s: 100%;
  --za-theme-danger-light-l: 69.7%;
  --za-theme-danger-lighter: hsl(0, 100%, 95%);
  --za-theme-danger-lighter-h: 0;
  --za-theme-danger-lighter-s: 100%;
  --za-theme-danger-lighter-l: 95%;
  --za-theme-danger-dark: hsl(0, 100%, 61.7%);
  --za-theme-danger-dark-h: 0;
  --za-theme-danger-dark-s: 100%;
  --za-theme-danger-dark-l: 61.7%;
  --za-theme-danger-darker: hsl(0, 100%, 20%);
  --za-theme-danger-darker-h: 0;
  --za-theme-danger-darker-s: 100%;
  --za-theme-danger-darker-l: 20%;
  --za-color-text: #343434;
  --za-color-text-inverse: #fff;
  --za-color-text-placeholder: rgba(128, 128, 132, 0.3);
  --za-color-text-disabled: #bcbcbc;
  --za-color-text-caption: #909090;
  --za-color-link: var(--za-theme-primary);
  --za-color-shadow: rgba(56, 56, 56, 0.15);
  --za-background-color: #fff;
  --za-background-active: rgba(0, 0, 0, 0.15);
  --za-background-disabled: #f2f2f2;
  --za-border-color: rgba(60, 60, 67, 0.36);
  --za-border-disabled: #e6e6e6;
  --za-radius-xs: 4px;
  --za-radius-sm: 4px;
  --za-radius-md: 4px;
  --za-radius-lg: 8px;
  --za-radius-xl: 8px;
  --za-radius-round: 1000px;
  --za-radius-circle: 50%;
  --za-padding-h-xs: 8px;
  --za-padding-h-sm: 12px;
  --za-padding-h-md: 16px;
  --za-padding-h-lg: 20px;
  --za-padding-h-xl: 24px;
  --za-padding-v-xs: 6px;
  --za-padding-v-sm: 8px;
  --za-padding-v-md: 12px;
  --za-padding-v-lg: 16px;
  --za-padding-v-xl: 18px;
  --za-height-xs: 28px;
  --za-height-sm: 36px;
  --za-height-md: 44px;
  --za-height-lg: 52px;
  --za-height-xl: 60px;
  --za-font-size-xs: 14px;
  --za-font-size-sm: 14px;
  --za-font-size-md: 17px;
  --za-font-size-lg: 20px;
  --za-font-size-xl: 22px;
  --za-zindex-mask: 1000;
  --za-zindex-popup: 1100;
  --za-zindex-tooltip: 1700;
  --za-opacity-disabled: 0.5;
  --za-opacity-mask: 0.4;
  --za-opacity-toast: 0.8;
  --za-animation-duration: 0.3s;
  --za-arrow-color: rgba(0, 0, 0, 0.2);
  --za-arrow-size: 10px;
  --za-arrow-width: 2px;
}

.za-fade-enter,
.za-fade-appear {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-fade-leave {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-fade-enter.za-fade-enter-active,
.za-fade-appear.za-fade-appear-active {
  -webkit-animation-name: za-fade-in;
          animation-name: za-fade-in;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.za-fade-leave.za-fade-leave-active {
  -webkit-animation-name: za-fade-out;
          animation-name: za-fade-out;
  -webkit-animation-play-state: running;
          animation-play-state: running;
  pointer-events: none;
}

.za-fade-enter,
.za-fade-appear {
  opacity: 0;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

.za-fade-leave {
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

@-webkit-keyframes za-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes za-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes za-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes za-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.za-door-enter,
.za-door-appear {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-door-leave {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-door-enter.za-door-enter-active,
.za-door-appear.za-door-appear-active {
  -webkit-animation-name: za-door-in;
          animation-name: za-door-in;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.za-door-leave.za-door-leave-active {
  -webkit-animation-name: za-door-out;
          animation-name: za-door-out;
  -webkit-animation-play-state: running;
          animation-play-state: running;
  pointer-events: none;
}

.za-door-enter,
.za-door-appear {
  opacity: 0;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0, 0);
          animation-timing-function: cubic-bezier(0.4, 0, 0, 0);
}

.za-door-leave {
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}

@-webkit-keyframes za-door-in {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0, 1, 1);
            transform: scale3d(0, 1, 1);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 0.1);
            transform: scale3d(1, 1, 0.1);
  }
}

@keyframes za-door-in {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0, 1, 1);
            transform: scale3d(0, 1, 1);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 0.1);
            transform: scale3d(1, 1, 0.1);
  }
}
@-webkit-keyframes za-door-out {
  from {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  60% {
    -webkit-transform: scale3d(0.01, 1, 1);
            transform: scale3d(0.01, 1, 1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0, 1, 0.1);
            transform: scale3d(0, 1, 0.1);
  }
}
@keyframes za-door-out {
  from {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  60% {
    -webkit-transform: scale3d(0.01, 1, 1);
            transform: scale3d(0.01, 1, 1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0, 1, 0.1);
            transform: scale3d(0, 1, 0.1);
  }
}
.za-flip-enter,
.za-flip-appear {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-flip-leave {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-flip-enter.za-flip-enter-active,
.za-flip-appear.za-flip-appear-active {
  -webkit-animation-name: za-flip-in;
          animation-name: za-flip-in;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.za-flip-leave.za-flip-leave-active {
  -webkit-animation-name: za-flip-out;
          animation-name: za-flip-out;
  -webkit-animation-play-state: running;
          animation-play-state: running;
  pointer-events: none;
}

.za-flip-enter,
.za-flip-appear {
  opacity: 0;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0, 0);
          animation-timing-function: cubic-bezier(0.4, 0, 0, 0);
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
}

.za-flip-leave {
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
}

@-webkit-keyframes za-flip-in {
  from {
    opacity: 0;
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 60deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 60deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
  }
  to {
    opacity: 1;
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}

@keyframes za-flip-in {
  from {
    opacity: 0;
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 60deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 60deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
  }
  to {
    opacity: 1;
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
}
@-webkit-keyframes za-flip-out {
  from {
    opacity: 1;
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
  }
  to {
    opacity: 0;
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 45deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 45deg);
  }
}
@keyframes za-flip-out {
  from {
    opacity: 1;
    -webkit-transform: perspective(400px);
            transform: perspective(400px);
  }
  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
            transform: perspective(400px) rotate3d(1, 0, 0, -15deg);
  }
  to {
    opacity: 0;
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 45deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 45deg);
  }
}
.za-rotate-enter,
.za-rotate-appear {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-rotate-leave {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-rotate-enter.za-rotate-enter-active,
.za-rotate-appear.za-rotate-appear-active {
  -webkit-animation-name: za-rotate-in;
          animation-name: za-rotate-in;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.za-rotate-leave.za-rotate-leave-active {
  -webkit-animation-name: za-rotate-out;
          animation-name: za-rotate-out;
  -webkit-animation-play-state: running;
          animation-play-state: running;
  pointer-events: none;
}

.za-rotate-enter,
.za-rotate-appear {
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}

.za-rotate-leave {
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}

@-webkit-keyframes za-rotate-in {
  from {
    opacity: 0;
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -180deg) scale3d(0.3, 0.3, 0.3);
            transform: rotate3d(0, 0, 1, -180deg) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 1;
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes za-rotate-in {
  from {
    opacity: 0;
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -180deg) scale3d(0.3, 0.3, 0.3);
            transform: rotate3d(0, 0, 1, -180deg) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 1;
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@-webkit-keyframes za-rotate-out {
  from {
    opacity: 1;
    -webkit-transform-origin: center;
            transform-origin: center;
  }
  to {
    opacity: 0;
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 180deg) scale3d(0.3, 0.3, 0.3);
            transform: rotate3d(0, 0, 1, 180deg) scale3d(0.3, 0.3, 0.3);
  }
}
@keyframes za-rotate-out {
  from {
    opacity: 1;
    -webkit-transform-origin: center;
            transform-origin: center;
  }
  to {
    opacity: 0;
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 180deg) scale3d(0.3, 0.3, 0.3);
            transform: rotate3d(0, 0, 1, 180deg) scale3d(0.3, 0.3, 0.3);
  }
}
.za-slide-up-enter,
.za-slide-up-appear {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-slide-up-leave {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-slide-up-enter.za-slide-up-enter-active,
.za-slide-up-appear.za-slide-up-appear-active {
  -webkit-animation-name: za-slide-up-in;
          animation-name: za-slide-up-in;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.za-slide-up-leave.za-slide-up-leave-active {
  -webkit-animation-name: za-slide-up-out;
          animation-name: za-slide-up-out;
  -webkit-animation-play-state: running;
          animation-play-state: running;
  pointer-events: none;
}

.za-slide-up-enter,
.za-slide-up-appear {
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}

.za-slide-up-leave {
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
}

.za-slide-down-enter,
.za-slide-down-appear {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-slide-down-leave {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-slide-down-enter.za-slide-down-enter-active,
.za-slide-down-appear.za-slide-down-appear-active {
  -webkit-animation-name: za-slide-down-in;
          animation-name: za-slide-down-in;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.za-slide-down-leave.za-slide-down-leave-active {
  -webkit-animation-name: za-slide-down-out;
          animation-name: za-slide-down-out;
  -webkit-animation-play-state: running;
          animation-play-state: running;
  pointer-events: none;
}

.za-slide-down-enter,
.za-slide-down-appear {
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}

.za-slide-down-leave {
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
}

.za-slide-left-enter,
.za-slide-left-appear {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-slide-left-leave {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-slide-left-enter.za-slide-left-enter-active,
.za-slide-left-appear.za-slide-left-appear-active {
  -webkit-animation-name: za-slide-left-in;
          animation-name: za-slide-left-in;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.za-slide-left-leave.za-slide-left-leave-active {
  -webkit-animation-name: za-slide-left-out;
          animation-name: za-slide-left-out;
  -webkit-animation-play-state: running;
          animation-play-state: running;
  pointer-events: none;
}

.za-slide-left-enter,
.za-slide-left-appear {
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}

.za-slide-left-leave {
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
}

.za-slide-right-enter,
.za-slide-right-appear {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-slide-right-leave {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-slide-right-enter.za-slide-right-enter-active,
.za-slide-right-appear.za-slide-right-appear-active {
  -webkit-animation-name: za-slide-right-in;
          animation-name: za-slide-right-in;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.za-slide-right-leave.za-slide-right-leave-active {
  -webkit-animation-name: za-slide-right-out;
          animation-name: za-slide-right-out;
  -webkit-animation-play-state: running;
          animation-play-state: running;
  pointer-events: none;
}

.za-slide-right-enter,
.za-slide-right-appear {
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}

.za-slide-right-leave {
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
}

@-webkit-keyframes za-slide-up-in {
  from {
    -webkit-transform: translate3d(0, 100px, 0);
            transform: translate3d(0, 100px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes za-slide-up-in {
  from {
    -webkit-transform: translate3d(0, 100px, 0);
            transform: translate3d(0, 100px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes za-slide-up-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 100px, 0);
            transform: translate3d(0, 100px, 0);
  }
}
@keyframes za-slide-up-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 100px, 0);
            transform: translate3d(0, 100px, 0);
  }
}
@-webkit-keyframes za-slide-down-in {
  from {
    -webkit-transform: translate3d(0, -100px, 0);
            transform: translate3d(0, -100px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes za-slide-down-in {
  from {
    -webkit-transform: translate3d(0, -100px, 0);
            transform: translate3d(0, -100px, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes za-slide-down-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, -100px, 0);
            transform: translate3d(0, -100px, 0);
  }
}
@keyframes za-slide-down-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, -100px, 0);
            transform: translate3d(0, -100px, 0);
  }
}
@-webkit-keyframes za-slide-left-in {
  from {
    -webkit-transform: translate3d(-150px, 0, 0);
            transform: translate3d(-150px, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes za-slide-left-in {
  from {
    -webkit-transform: translate3d(-150px, 0, 0);
            transform: translate3d(-150px, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes za-slide-left-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-150px, 0, 0);
            transform: translate3d(-150px, 0, 0);
  }
}
@keyframes za-slide-left-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-150px, 0, 0);
            transform: translate3d(-150px, 0, 0);
  }
}
@-webkit-keyframes za-slide-right-in {
  from {
    -webkit-transform: translate3d(150px, 0, 0);
            transform: translate3d(150px, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes za-slide-right-in {
  from {
    -webkit-transform: translate3d(150px, 0, 0);
            transform: translate3d(150px, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes za-slide-right-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(150px, 0, 0);
            transform: translate3d(150px, 0, 0);
  }
}
@keyframes za-slide-right-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(150px, 0, 0);
            transform: translate3d(150px, 0, 0);
  }
}
.za-menu-slide-up-enter,
.za-menu-slide-up-appear {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-menu-slide-up-leave {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-menu-slide-up-enter.za-menu-slide-up-enter-active,
.za-menu-slide-up-appear.za-menu-slide-up-appear-active {
  -webkit-animation-name: za-menu-slide-up-in;
          animation-name: za-menu-slide-up-in;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.za-menu-slide-up-leave.za-menu-slide-up-leave-active {
  -webkit-animation-name: za-menu-slide-up-out;
          animation-name: za-menu-slide-up-out;
  -webkit-animation-play-state: running;
          animation-play-state: running;
  pointer-events: none;
}

.za-menu-slide-up-enter,
.za-menu-slide-up-appear {
  -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
          animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

.za-menu-slide-up-leave {
  -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
          animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}

.za-menu-slide-down-enter,
.za-menu-slide-down-appear {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-menu-slide-down-leave {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-menu-slide-down-enter.za-menu-slide-down-enter-active,
.za-menu-slide-down-appear.za-menu-slide-down-appear-active {
  -webkit-animation-name: za-menu-slide-down-in;
          animation-name: za-menu-slide-down-in;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.za-menu-slide-down-leave.za-menu-slide-down-leave-active {
  -webkit-animation-name: za-menu-slide-down-out;
          animation-name: za-menu-slide-down-out;
  -webkit-animation-play-state: running;
          animation-play-state: running;
  pointer-events: none;
}

.za-menu-slide-down-enter,
.za-menu-slide-down-appear {
  -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
          animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

.za-menu-slide-down-leave {
  -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
          animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}

@-webkit-keyframes za-menu-slide-up-in {
  0% {
    -webkit-transform: scaleY(0.8);
            transform: scaleY(0.8);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 0;
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
}

@keyframes za-menu-slide-up-in {
  0% {
    -webkit-transform: scaleY(0.8);
            transform: scaleY(0.8);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 0;
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
}
@-webkit-keyframes za-menu-slide-up-out {
  0% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(0.8);
            transform: scaleY(0.8);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 0;
  }
}
@keyframes za-menu-slide-up-out {
  0% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(0.8);
            transform: scaleY(0.8);
    -webkit-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
    opacity: 0;
  }
}
@-webkit-keyframes za-menu-slide-down-in {
  0% {
    -webkit-transform: scaleY(0.8);
            transform: scaleY(0.8);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    opacity: 1;
  }
}
@keyframes za-menu-slide-down-in {
  0% {
    -webkit-transform: scaleY(0.8);
            transform: scaleY(0.8);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    opacity: 0;
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    opacity: 1;
  }
}
@-webkit-keyframes za-menu-slide-down-out {
  0% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(0.8);
            transform: scaleY(0.8);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    opacity: 0;
  }
}
@keyframes za-menu-slide-down-out {
  0% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(0.8);
            transform: scaleY(0.8);
    -webkit-transform-origin: 100% 100%;
            transform-origin: 100% 100%;
    opacity: 0;
  }
}
.za-zoom-enter,
.za-zoom-appear {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-zoom-leave {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-zoom-enter.za-zoom-enter-active,
.za-zoom-appear.za-zoom-appear-active {
  -webkit-animation-name: za-zoom-in;
          animation-name: za-zoom-in;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.za-zoom-leave.za-zoom-leave-active {
  -webkit-animation-name: za-zoom-out;
          animation-name: za-zoom-out;
  -webkit-animation-play-state: running;
          animation-play-state: running;
  pointer-events: none;
}

.za-zoom-enter,
.za-zoom-appear {
  -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
          animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
}

.za-zoom-leave {
  -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
          animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
}

@-webkit-keyframes za-zoom-in {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes za-zoom-in {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@-webkit-keyframes za-zoom-out {
  from {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
}
@keyframes za-zoom-out {
  from {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
}
.za-zoom-fade-enter,
.za-zoom-fade-appear {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-zoom-fade-leave {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-zoom-fade-enter.za-zoom-fade-enter-active,
.za-zoom-fade-appear.za-zoom-fade-appear-active {
  -webkit-animation-name: za-zoom-fade-in;
          animation-name: za-zoom-fade-in;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.za-zoom-fade-leave.za-zoom-fade-leave-active {
  -webkit-animation-name: za-zoom-fade-out;
          animation-name: za-zoom-fade-out;
  -webkit-animation-play-state: running;
          animation-play-state: running;
  pointer-events: none;
}

.za-zoom-fade-enter,
.za-zoom-fade-appear {
  opacity: 0;
  -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
          animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
}

.za-zoom-fade-leave {
  -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
          animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
}

@-webkit-keyframes za-zoom-fade-in {
  0% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

@keyframes za-zoom-fade-in {
  0% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes za-zoom-fade-out {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 0;
  }
}
@keyframes za-zoom-fade-out {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 0;
  }
}
.za-move-up-enter,
.za-move-up-appear {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-move-up-leave {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-move-up-enter.za-move-up-enter-active,
.za-move-up-appear.za-move-up-appear-active {
  -webkit-animation-name: za-move-up-in;
          animation-name: za-move-up-in;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.za-move-up-leave.za-move-up-leave-active {
  -webkit-animation-name: za-move-up-out;
          animation-name: za-move-up-out;
  -webkit-animation-play-state: running;
          animation-play-state: running;
  pointer-events: none;
}

.za-move-up-enter,
.za-move-up-appear {
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}

.za-move-up-leave {
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
}

.za-move-down-enter,
.za-move-down-appear {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-move-down-leave {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-move-down-enter.za-move-down-enter-active,
.za-move-down-appear.za-move-down-appear-active {
  -webkit-animation-name: za-move-down-in;
          animation-name: za-move-down-in;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.za-move-down-leave.za-move-down-leave-active {
  -webkit-animation-name: za-move-down-out;
          animation-name: za-move-down-out;
  -webkit-animation-play-state: running;
          animation-play-state: running;
  pointer-events: none;
}

.za-move-down-enter,
.za-move-down-appear {
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}

.za-move-down-leave {
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
}

.za-move-left-enter,
.za-move-left-appear {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-move-left-leave {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-move-left-enter.za-move-left-enter-active,
.za-move-left-appear.za-move-left-appear-active {
  -webkit-animation-name: za-move-left-in;
          animation-name: za-move-left-in;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.za-move-left-leave.za-move-left-leave-active {
  -webkit-animation-name: za-move-left-out;
          animation-name: za-move-left-out;
  -webkit-animation-play-state: running;
          animation-play-state: running;
  pointer-events: none;
}

.za-move-left-enter,
.za-move-left-appear {
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}

.za-move-left-leave {
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
}

.za-move-right-enter,
.za-move-right-appear {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-move-right-leave {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-duration: var(--za-animation-duration);
          animation-duration: var(--za-animation-duration);
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.za-move-right-enter.za-move-right-enter-active,
.za-move-right-appear.za-move-right-appear-active {
  -webkit-animation-name: za-move-right-in;
          animation-name: za-move-right-in;
  -webkit-animation-play-state: running;
          animation-play-state: running;
}

.za-move-right-leave.za-move-right-leave-active {
  -webkit-animation-name: za-move-right-out;
          animation-name: za-move-right-out;
  -webkit-animation-play-state: running;
          animation-play-state: running;
  pointer-events: none;
}

.za-move-right-enter,
.za-move-right-appear {
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
}

.za-move-right-leave {
  -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
}

@-webkit-keyframes za-move-up-in {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes za-move-up-in {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes za-move-up-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}
@keyframes za-move-up-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}
@-webkit-keyframes za-move-down-in {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes za-move-down-in {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes za-move-down-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}
@keyframes za-move-down-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}
@-webkit-keyframes za-move-left-in {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes za-move-left-in {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes za-move-left-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}
@keyframes za-move-left-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}
@-webkit-keyframes za-move-right-in {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes za-move-right-in {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes za-move-right-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
}
@keyframes za-move-right-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
}
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

*[contenteditable] {
  -webkit-user-select: auto !important;
     -moz-user-select: auto !important;
      -ms-user-select: auto !important;
          user-select: auto !important;
}

*:focus {
  outline: none;
}

a {
  background: transparent;
  text-decoration: none;
  outline: none;
}

.za-action-sheet {
  --background: var(--za-action-sheet-background, #fff);
  --border-radius: var(--za-action-sheet-border-radius, 14px);
  --spacing-margin: var(--za-action-sheet-spacing-margin, 8px);
  --item-height: var(--za-action-sheet-item-height, 56px);
  --item-font-size: var(--za-action-sheet-item-font-size, 20px);
  --item-font-weight: var(--za-action-sheet-item-font-weight, 500);
  --item-active-background: var(--za-action-sheet-item-active-background, var(--za-background-active));
  --item-opacity-disabled: var(--za-action-sheet-item-opacity-disabled, var(--za-opacity-disabled));
  --item-text-color: var(--za-action-sheet-item-text-color, var(--za-theme-primary));
  --cancel-text-color: var(--za-action-sheet-cancel-text-color, var(--za-theme-primary));
  --cancel-margin-top: var(--za-action-sheet-cancel-margin-top, 8px);
}
.za-action-sheet--spacing {
  margin: var(--spacing-margin);
}
.za-action-sheet--spacing .za-action-sheet__actions, .za-action-sheet--spacing .za-action-sheet__cancel {
  border-radius: var(--border-radius);
}

.za-action-sheet__actions, .za-action-sheet__cancel {
  overflow: hidden;
  background: var(--background);
}

.za-action-sheet__cancel {
  margin-top: var(--cancel-margin-top);
}
.za-action-sheet__cancel .za-action-sheet__item {
  color: var(--cancel-text-color);
}

.za-action-sheet__item {
  position: relative;
  display: block;
  height: var(--item-height);
  line-height: var(--item-height);
  font-size: var(--item-font-size);
  color: var(--item-text-color);
  text-align: center;
}
.za-action-sheet__item:not(.za-action-sheet__item--disabled):active {
  background: var(--item-active-background);
}
.za-action-sheet__item:not(:first-of-type):after {
  content: "";
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 0;
  border: 0 solid rgba(60, 60, 67, 0.36);
  border: 0 solid var(--za-border-color);
  /* prettier-ignore */
  border-top-width: 1PX;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .za-action-sheet__item:not(:first-of-type):after {
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  .za-action-sheet__item:not(:first-of-type):after {
    width: 300%;
    height: 300%;
    -webkit-transform: scale(0.3333);
        -ms-transform: scale(0.3333);
            transform: scale(0.3333);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}
.za-action-sheet__item--bold {
  font-weight: var(--item-font-weight);
}

.za-action-sheet__item--disabled {
  --item-text-color: var(--za-action-sheet-item-text-color, var(--za-color-text-disabled));
  cursor: not-allowed;
  pointer-events: none;
}

.za-action-sheet__item--default {
  --item-text-color: var(--za-action-sheet-item-text-color, var(--za-color-text));
}

.za-action-sheet__item--danger {
  --item-text-color: var(--za-action-sheet-item-text-color, var(--za-theme-danger));
}

.za-loading {
  --size: var(--za-loading-size, 24px);
  --size-large: var(--za-loading-size-large, 36px);
  --stroke-color: var(--za-loading-stroke-color, #e6e6e6);
  --stroke-active-color: var(--za-loading-stroke-active-color, var(--za-theme-primary));
  --spinner-item-color: var(--za-loading-spinner-item-color, #80858e);
  --spinner-item-width: var(--za-loading-spinner-item-width, 3px);
  --spinner-item-height: var(--za-loading-spinner-item-height, 32%);
  --spinner-item-border-radius: var(--za-loading-spinner-item-border-radius, 1.5px);
  display: inline-block;
  position: relative;
  -webkit-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
          transform: rotate(-90deg);
  vertical-align: middle;
  width: 24px;
  width: var(--size);
  height: 24px;
  height: var(--size);
  /* sizes */
}
.za-loading__stroke {
  stroke: var(--stroke-color);
}

.za-loading__line {
  stroke: var(--stroke-active-color);
}

.za-loading--circular {
  display: inline-block;
}
.za-loading--circular svg {
  vertical-align: top;
  -webkit-animation: za-loading_rotate360 2s linear infinite;
          animation: za-loading_rotate360 2s linear infinite;
}
.za-loading--circular circle {
  stroke-linecap: round;
  stroke: var(--stroke-active-color);
  -webkit-animation: za-loading_rotate-circular 1.5s ease-in-out infinite;
          animation: za-loading_rotate-circular 1.5s ease-in-out infinite;
}

.za-loading--spinner {
  -webkit-animation: za-loading_rotate360 0.8s linear infinite;
          animation: za-loading_rotate360 0.8s linear infinite;
  -webkit-animation-timing-function: steps(8);
          animation-timing-function: steps(8);
}
.za-loading--spinner div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.za-loading--spinner div:nth-of-type(1) {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  opacity: 0.125;
}
.za-loading--spinner div:nth-of-type(2) {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
  opacity: 0.25;
}
.za-loading--spinner div:nth-of-type(3) {
  -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg);
  opacity: 0.375;
}
.za-loading--spinner div:nth-of-type(4) {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
  opacity: 0.5;
}
.za-loading--spinner div:nth-of-type(5) {
  -webkit-transform: rotate(225deg);
      -ms-transform: rotate(225deg);
          transform: rotate(225deg);
  opacity: 0.625;
}
.za-loading--spinner div:nth-of-type(6) {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
  opacity: 0.75;
}
.za-loading--spinner div:nth-of-type(7) {
  -webkit-transform: rotate(315deg);
      -ms-transform: rotate(315deg);
          transform: rotate(315deg);
  opacity: 0.875;
}
.za-loading--spinner div:nth-of-type(8) {
  -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
  opacity: 1;
}
.za-loading--spinner div::before {
  content: "";
  display: block;
  width: var(--spinner-item-width);
  height: var(--spinner-item-height);
  margin: 0 auto;
  background-color: var(--spinner-item-color);
  border-radius: var(--spinner-item-border-radius);
}

.za-loading--lg {
  width: var(--size-large);
  height: var(--size-large);
}

@-webkit-keyframes za-loading_rotate-circular {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 120, 200;
    stroke-dashoffset: -60;
  }
  100% {
    stroke-dasharray: 120, 200;
    stroke-dashoffset: -180;
  }
}

@keyframes za-loading_rotate-circular {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 120, 200;
    stroke-dashoffset: -60;
  }
  100% {
    stroke-dasharray: 120, 200;
    stroke-dashoffset: -180;
  }
}
@-webkit-keyframes za-loading_rotate360 {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes za-loading_rotate360 {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.za-affix {
  --zindex: var(--za-affix-zindex, 10);
  z-index: 10;
  z-index: var(--zindex);
}

.za-badge {
  --dot-size: var(--za-badge-dot-size, 8px);
  --color: var(--za-badge-color, var(--za-theme-danger));
  --text-color: var(--za-badge-text-color, #fff);
  --border-color: var(--za-badge-border-color, #fff);
  --font-size: var(--za-badge-font-size, 12px);
  --font-weight: var(--za-badge-font-weight, 600);
  --height: var(--za-badge-height, 20px);
  --padding-horizontal: var(--za-badge-padding-horizontal, 4px);
  --border-radius: var(--za-badge-border-radius, var(--za-radius-sm));
  --top: var(--za-badge-top, 0);
  --right: var(--za-badge-right, 0);
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.za-badge .za-icon {
  color: inherit;
}
.za-badge__content {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  top: auto;
  background-color: var(--color);
  color: var(--text-color);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  height: var(--height);
  padding: 0 var(--padding-horizontal);
  white-space: nowrap;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.za-badge--dot {
  --height: var(--za-badge-height, var(--dot-size));
}
.za-badge--dot .za-badge__content {
  width: var(--height);
  border-radius: 50%;
  padding: 0;
}

.za-badge--radius .za-badge__content {
  border-radius: var(--border-radius);
}

.za-badge--round .za-badge__content {
  min-width: var(--height);
  border-radius: var(--height);
}

.za-badge--circle .za-badge__content {
  width: var(--height);
  border-radius: 50%;
  padding: 0;
}

.za-badge--leaf .za-badge__content {
  min-width: var(--height);
  border-radius: var(--height) var(--height) var(--height) 0;
}

.za-badge--sup {
  --font-size: var(--za-badge-font-size, 10px);
  --height: var(--za-badge-height, 16px);
}
.za-badge--sup.za-badge--dot {
  --height: var(--za-badge-height, var(--dot-size));
}

.za-badge--sup .za-badge__content {
  position: absolute;
  top: var(--top);
  right: var(--right);
  -webkit-transform: translate3d(calc(100% - var(--height) / 2), -50%, 0);
          transform: translate3d(calc(100% - var(--height) / 2), -50%, 0);
}

.za-badge--bordered .za-badge__content {
  border: 1px solid var(--border-color);
}

.za-button {
  --height: var(--za-button-height, var(--za-height-md));
  --border-radius: var(--za-button-border-radius, 0);
  /* prettier-ignore */
  --border-width: var(--za-button-border-width, 1PX);
  --padding-horizontal: var(--za-button-padding-horizontal, var(--za-padding-h-md));
  --font-size: var(--za-button-font-size, var(--za-font-size-md));
  --icon-size: var(--za-button-icon-size, 22px);
  --background: var(--za-button-background, #fff);
  --border-color: var(--za-button-border-color, var(--za-theme-default));
  --text-color: var(--za-button-text-color, var(--za-color-text));
  --loading-color: var(--za-button-loading-color, var(--za-theme-primary));
  --active-background: var(--za-button-active-background, #e6e6e6);
  --active-border-color: var(--za-button-active-border-color, #e6e6e6);
  --active-text-color: var(--za-button-active-text-color, var(--za-color-text));
  --active-loading-color: var(--za-button-active-loading-color, var(--za-theme-primary-dark));
  --shadow: var(--za-button-shadow, 0 3px 3px 0 rgba(230, 230, 230, 0.3));
  --primary-background: var(--za-button-primary-background, var(--za-theme-primary));
  --primary-border-color: var(--za-button-primary-border-color, var(--za-theme-primary));
  --primary-text-color: var(--za-button-primary-text-color, var(--za-color-text-inverse));
  --primary-loading-color: var(--za-button-primary-loading-color, var(--za-color-text-inverse));
  --primary-active-background: var(--za-button-primary-active-background, var(--za-theme-primary-dark));
  --primary-active-border-color: var(--za-button-primary-active-border-color, var(--za-theme-primary-dark));
  --primary-active-text-color: var(--za-button-primary-active-text-color, rgba(255, 255, 255, 0.4));
  --primary-active-loading-color: var(--za-button-primary-active-loading-color, rgba(255, 255, 255, 0.4));
  --primary-shadow: var(--za-button-primary-shadow, 0 3px 3px 0 rgba(0, 188, 112, 0.3));
  --danger-background: var(--za-button-danger-background, var(--za-theme-danger));
  --danger-border-color: var(--za-button-danger-border-color, var(--za-theme-danger));
  --danger-text-color: var(--za-button-danger-text-color, var(--za-color-text-inverse));
  --danger-loading-color: var(--za-button-danger-loading-color, var(--za-color-text-inverse));
  --danger-active-background: var(--za-button-danger-active-background, var(--za-theme-danger-dark));
  --danger-active-border-color: var(--za-button-danger-active-border-color, var(--za-theme-danger-dark));
  --danger-active-text-color: var(--za-button-danger-active-text-color, rgba(255, 255, 255, 0.4));
  --danger-active-loading-color: var(--za-button-danger-active-loading-color, rgba(255, 255, 255, 0.4));
  --danger-shadow: var(--za-button-danger-shadow, 0 3px 3px 0 rgba(255, 80, 80, 0.3));
  --ghost-border-color: var(--za-button-ghost-border-color, var(--za-color-text-inverse));
  --ghost-text-color: var(--za-button-ghost-text-color, var(--za-color-text-inverse));
  --ghost-active-border-color: var(--za-button-ghost-active-border-color, var(--za-theme-default-dark));
  --ghost-active-text-color: var(--za-button-ghost-active-text-color, var(--za-theme-default-dark));
  display: inline-block;
  vertical-align: middle;
  padding: 0;
  border: none;
  text-align: center;
  outline: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  -webkit-appearance: none;
  padding: 0 16px;
  padding: 0 var(--padding-horizontal);
  font-size: 17px;
  font-size: var(--font-size);
  height: 44px;
  height: var(--height);
  line-height: 1.4;
  border-style: solid;
  border-width: 1PX;
  border-width: var(--border-width);
  border-radius: 0;
  border-radius: var(--border-radius);
}
.za-button__content {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.za-button--disabled {
  cursor: not-allowed;
  opacity: 0.5;
  opacity: var(--za-opacity-disabled);
  pointer-events: none;
}

.za-button--block {
  display: block;
  width: 100%;
}

.za-button--circle {
  width: var(--height);
  padding: 0;
}

.za-button .za-icon {
  font-size: var(--icon-size);
}
.za-button--loading .za-loading {
  width: var(--font-size);
  height: var(--font-size);
}

.za-button * + span {
  margin-left: calc(var(--padding-horizontal) / 2);
}
.za-button--default {
  background-color: var(--background);
  border-color: var(--border-color);
  color: var(--text-color);
}
.za-button--default.za-button--shadow {
  -webkit-box-shadow: var(--shadow);
          box-shadow: var(--shadow);
}

.za-button--default .za-loading.za-loading--circular circle {
  stroke: var(--loading-color);
}

.za-button--default:active {
  background-color: var(--active-background);
  border-color: var(--active-border-color);
  color: var(--active-text-color);
}
.za-button--default:active .za-loading.za-loading--circular circle {
  stroke: var(--active-loading-color);
}

.za-button--primary {
  background-color: var(--primary-background);
  border-color: var(--primary-border-color);
  color: var(--primary-text-color);
}
.za-button--primary.za-button--shadow {
  -webkit-box-shadow: var(--primary-shadow);
          box-shadow: var(--primary-shadow);
}

.za-button--primary .za-loading.za-loading--circular circle {
  stroke: var(--primary-loading-color);
}

.za-button--primary:active {
  background-color: var(--primary-active-background);
  border-color: var(--primary-active-border-color);
  color: var(--primary-active-text-color);
}
.za-button--primary:active .za-loading.za-loading--circular circle {
  stroke: var(--primary-active-loading-color);
}

.za-button--danger {
  background-color: var(--danger-background);
  border-color: var(--danger-border-color);
  color: var(--danger-text-color);
}
.za-button--danger.za-button--shadow {
  -webkit-box-shadow: var(--danger-shadow);
          box-shadow: var(--danger-shadow);
}

.za-button--danger .za-loading.za-loading--circular circle {
  stroke: var(--danger-loading-color);
}

.za-button--danger:active {
  background-color: var(--danger-active-background);
  border-color: var(--danger-active-border-color);
  color: var(--danger-active-text-color);
}
.za-button--danger:active .za-loading.za-loading--circular circle {
  stroke: var(--danger-active-loading-color);
}

.za-button--lg {
  --height: var(--za-button-height, var(--za-height-lg));
  --padding-horizontal: var(--za-button-padding-horizontal, var(--za-padding-h-lg));
  --font-size: var(--za-button-font-size, var(--za-font-size-lg));
  --icon-size: var(--za-button-icon-size, 26px);
}

.za-button--sm {
  --height: var(--za-button-height, var(--za-height-sm));
  --padding-horizontal: var(--za-button-padding-horizontal, var(--za-padding-h-sm));
  --font-size: var(--za-button-font-size, var(--za-font-size-sm));
  --icon-size: var(--za-button-icon-size, 18px);
}

.za-button--xs {
  --height: var(--za-button-height, var(--za-height-xs));
  --padding-horizontal: var(--za-button-padding-horizontal, var(--za-padding-h-xs));
  --font-size: var(--za-button-font-size, var(--za-font-size-xs));
  --icon-size: var(--za-button-icon-size, 16px);
}

.za-button--radius {
  --border-radius: var(--za-button-border-radius, var(--za-radius-md));
}

.za-button--round {
  --border-radius: var(--za-button-border-radius, var(--height));
}

.za-button--circle {
  --border-radius: var(--za-button-border-radius, 50%);
}

.za-button--link {
  line-height: calc(var(--height) - var(--border-width) * 2);
  background-color: transparent;
  border-color: transparent;
}
.za-button--link:active {
  background: var(--active-background);
  border-color: var(--active-border-color);
}
.za-button--link.za-button--primary {
  --primary-text-color: var(--za-button-primary-text-color, var(--za-theme-primary));
  --primary-active-text-color: var(--za-button-primary-active-text-color, var(--za-theme-primary-dark));
}

.za-button--link.za-button--danger {
  --danger-text-color: var(--za-button-danger-text-color, var(--za-theme-danger));
  --danger-active-text-color: var(--za-button-danger-active-text-color, var(--za-theme-danger-dark));
}

.za-button--ghost {
  background-color: transparent;
}
.za-button--ghost:active {
  background-color: transparent;
}
.za-button--ghost.za-button--default {
  border-color: var(--ghost-border-color);
  color: var(--ghost-text-color);
}
.za-button--ghost.za-button--default:active {
  border-color: var(--ghost-active-border-color);
  color: var(--ghost-active-text-color);
}

.za-button--ghost.za-button--primary {
  --primary-text-color: var(--za-button-primary-text-color, var(--za-theme-primary));
  --primary-active-text-color: var(--za-button-primary-active-text-color, var(--za-theme-primary-dark));
}

.za-button--ghost.za-button--danger {
  --danger-text-color: var(--za-button-danger-text-color, var(--za-theme-danger));
  --danger-active-text-color: var(--za-button-danger-active-text-color, var(--za-theme-danger-dark));
}

.za-back-top {
  --right: var(--za-back-top-right, 50px);
  --bottom: var(--za-back-top-bottom, 50px);
  right: 50px;
  right: var(--right);
  bottom: 50px;
  bottom: var(--bottom);
}

.za-calendar {
  --background: var(--za-calendar-background, #fff);
  --padding-horizontal: var(--za-calendar-padding-horizontal, var(--za-padding-h-md));
  --padding-vertical: var(--za-calendar-padding-vertical, 10px);
  --header-height: var(--za-calendar-header-height, var(--za-height-md));
  --week-height: var(--za-calendar-week-height, 40px);
  --week-font-size: var(--za-calendar-week-font-size, 13px);
  --week-font-weight: var(--za-calendar-week-font-weight, 500);
  --week-background: var(--za-calendar-week-background, #f2f2f2);
  --week-text-color: var(--za-calendar-week-text-color, var(--za-color-text-caption));
  --month-font-size: var(--za-calendar-month-font-size, 17px);
  --month-font-weight: var(--za-calendar-month-font-weight, 500);
  --month-height: var(--za-calendar-month-height, 50px);
  --month-scroll-background: var(--za-calendar-month-scroll-background, #fff);
  --day-height: var(--za-calendar-day-height, 30px);
  --day-width: var(--za-calendar-day-width, 30px);
  --day-font-size: var(--za-calendar-day-font-size, 16px);
  --day-text-color: var(--za-calendar-day-text-color, var(--za-color-text));
  --day-today-background: var(--za-calendar-day-today-background, var(--za-theme-primary-lighter));
  --day-today-text-color: var(--za-calendar-day-today-text-color, var(--za-theme-primary));
  --day-selected-background: var(--za-calendar-day-selected-background, var(--za-theme-primary));
  --day-selected-border-radius: var(--za-calendar-day-selected-border-radius, 50%);
  --day-margin-vertical: var(--za-calendar-day-margin-vertical, 10px);
  --day-selected-text-color: var(--za-calendar-day-selected-text-color, #fff);
  --day-selected-shadow: var(--za-calendar-day-selected-shadow, 0 2px 5px 0 var(--za-theme-primary-lighter));
  --day-range-background: var(--za-calendar-day-range-background, var(--za-theme-primary-lighter));
  --day-range-text-color: var(--za-calendar-day-range-text-color, var(--za-theme-primary));
  --action-btn-disabled: var(--za-calendar-action-btn-disabled, var(--za-color-text-disabled));
  background: #fff;
  background: var(--background);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: relative;
}
.za-calendar ul {
  list-style-type: disc;
}
.za-calendar li {
  display: inline-block;
  width: 14.2857142857%;
  text-align: center;
  vertical-align: middle;
}
.za-calendar .za-picker-view {
  position: absolute;
  top: var(--header-height);
  z-index: 10;
}
.za-calendar__week {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  height: var(--week-height);
  line-height: var(--week-height);
  color: var(--week-text-color);
  background: var(--week-background);
  font-size: var(--week-font-size);
  font-weight: var(--week-font-weight);
  margin: 0;
  padding: 0 var(--padding-horizontal);
}

.za-calendar__header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 0 var(--padding-horizontal);
  height: var(--header-height);
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.za-calendar__action {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.za-calendar__action .za-calendar__action-btn--disabled {
  color: var(--action-btn-disabled);
}

.za-calendar__title--animate .za-icon {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}

.za-calendar__body {
  padding: var(--padding-vertical) 0;
  overflow: auto;
}

.za-calendar__scroll-month {
  display: none;
  position: absolute;
  top: var(--week-height);
  width: 100%;
  height: var(--month-height);
  line-height: var(--month-height);
  text-align: center;
  -webkit-transition: opacity 300ms ease-in-out;
  transition: opacity 300ms ease-in-out;
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--month-scroll-background)), to(transparent));
  background-image: -webkit-linear-gradient(var(--month-scroll-background), transparent);
  background-image: linear-gradient(var(--month-scroll-background), transparent);
  font-weight: var(--month-font-weight);
  font-size: var(--month-font-size);
}
.za-calendar__scroll-month--entering, .za-calendar__scroll-month--entered {
  display: block;
  opacity: 1;
}

.za-calendar__scroll-month--exiting {
  display: block;
  opacity: 0;
}

.za-calendar__month__wrapper {
  padding: 0 var(--padding-horizontal);
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  width: 100%;
}
.za-calendar__month__wrapper ul {
  margin: 0;
  padding: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.za-calendar__month {
  height: var(--month-height);
  line-height: var(--month-height);
  padding: 0 var(--padding-horizontal);
  font-size: var(--month-font-size);
  font-weight: var(--month-font-weight);
}

.za-calendar__day {
  margin: var(--day-margin-vertical) 0;
  position: relative;
  font-size: var(--day-font-size);
  color: var(--day-text-color);
  cursor: pointer;
}
.za-calendar__day__content {
  width: var(--day-width);
  height: var(--day-height);
  background-color: transparent;
  border-radius: var(--day-selected-border-radius);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
}
.za-calendar__day--today .za-calendar__day__content {
  background: var(--day-today-background);
  color: var(--day-today-text-color);
}

.za-calendar__day--selected .za-calendar__day__content {
  background: var(--day-selected-background);
  color: var(--day-selected-text-color);
  -webkit-box-shadow: var(--day-selected-shadow);
          box-shadow: var(--day-selected-shadow);
}

.za-calendar__day--disabled {
  cursor: auto;
}
.za-calendar__day--disabled .za-calendar__day__content {
  color: #bcbcbc;
  color: var(--za-color-text-disabled);
}

.za-calendar__day--range {
  background: var(--day-range-background);
  color: var(--day-range-text-color);
}
.za-calendar__day--range .za-calendar__day__content {
  background: var(--day-range-background);
}

.za-calendar__day--range:first-child {
  background-color: transparent;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, transparent), color-stop(50%, transparent), color-stop(50%, hsl(156, 100%, 95%)));
  background-image: -webkit-linear-gradient(left, transparent 0, transparent 50%, hsl(156, 100%, 95%) 50%);
  background-image: linear-gradient(to right, transparent 0, transparent 50%, hsl(156, 100%, 95%) 50%);
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, transparent), color-stop(50%, transparent), color-stop(50%, var(--za-theme-primary-lighter)));
  background-image: -webkit-linear-gradient(left, transparent 0, transparent 50%, var(--za-theme-primary-lighter) 50%);
  background-image: linear-gradient(to right, transparent 0, transparent 50%, var(--za-theme-primary-lighter) 50%);
}
.za-calendar__day--range:last-child {
  background-color: transparent;
  background-image: -webkit-gradient(linear, right top, left top, color-stop(0, transparent), color-stop(50%, transparent), color-stop(50%, hsl(156, 100%, 95%)));
  background-image: -webkit-linear-gradient(right, transparent 0, transparent 50%, hsl(156, 100%, 95%) 50%);
  background-image: linear-gradient(to left, transparent 0, transparent 50%, hsl(156, 100%, 95%) 50%);
  background-image: -webkit-gradient(linear, right top, left top, color-stop(0, transparent), color-stop(50%, transparent), color-stop(50%, var(--za-theme-primary-lighter)));
  background-image: -webkit-linear-gradient(right, transparent 0, transparent 50%, var(--za-theme-primary-lighter) 50%);
  background-image: linear-gradient(to left, transparent 0, transparent 50%, var(--za-theme-primary-lighter) 50%);
}

.za-calendar__day--d6 {
  background-color: transparent;
  background-image: -webkit-gradient(linear, right top, left top, color-stop(0, transparent), color-stop(50%, transparent), color-stop(50%, hsl(156, 100%, 95%)));
  background-image: -webkit-linear-gradient(right, transparent 0, transparent 50%, hsl(156, 100%, 95%) 50%);
  background-image: linear-gradient(to left, transparent 0, transparent 50%, hsl(156, 100%, 95%) 50%);
  background-image: -webkit-gradient(linear, right top, left top, color-stop(0, transparent), color-stop(50%, transparent), color-stop(50%, var(--za-theme-primary-lighter)));
  background-image: -webkit-linear-gradient(right, transparent 0, transparent 50%, var(--za-theme-primary-lighter) 50%);
  background-image: linear-gradient(to left, transparent 0, transparent 50%, var(--za-theme-primary-lighter) 50%);
}

.za-calendar__day--d7 {
  background-color: transparent;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, transparent), color-stop(50%, transparent), color-stop(50%, hsl(156, 100%, 95%)));
  background-image: -webkit-linear-gradient(left, transparent 0, transparent 50%, hsl(156, 100%, 95%) 50%);
  background-image: linear-gradient(to right, transparent 0, transparent 50%, hsl(156, 100%, 95%) 50%);
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, transparent), color-stop(50%, transparent), color-stop(50%, var(--za-theme-primary-lighter)));
  background-image: -webkit-linear-gradient(left, transparent 0, transparent 50%, var(--za-theme-primary-lighter) 50%);
  background-image: linear-gradient(to right, transparent 0, transparent 50%, var(--za-theme-primary-lighter) 50%);
}

.za-calendar__day--start {
  background-color: transparent;
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, transparent), color-stop(50%, transparent), color-stop(50%, hsl(156, 100%, 95%)));
  background-image: -webkit-linear-gradient(left, transparent 0, transparent 50%, hsl(156, 100%, 95%) 50%);
  background-image: linear-gradient(to right, transparent 0, transparent 50%, hsl(156, 100%, 95%) 50%);
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0, transparent), color-stop(50%, transparent), color-stop(50%, var(--za-theme-primary-lighter)));
  background-image: -webkit-linear-gradient(left, transparent 0, transparent 50%, var(--za-theme-primary-lighter) 50%);
  background-image: linear-gradient(to right, transparent 0, transparent 50%, var(--za-theme-primary-lighter) 50%);
}

.za-calendar__day--end {
  background-color: transparent;
  background-image: -webkit-gradient(linear, right top, left top, color-stop(0, transparent), color-stop(50%, transparent), color-stop(50%, hsl(156, 100%, 95%)));
  background-image: -webkit-linear-gradient(right, transparent 0, transparent 50%, hsl(156, 100%, 95%) 50%);
  background-image: linear-gradient(to left, transparent 0, transparent 50%, hsl(156, 100%, 95%) 50%);
  background-image: -webkit-gradient(linear, right top, left top, color-stop(0, transparent), color-stop(50%, transparent), color-stop(50%, var(--za-theme-primary-lighter)));
  background-image: -webkit-linear-gradient(right, transparent 0, transparent 50%, var(--za-theme-primary-lighter) 50%);
  background-image: linear-gradient(to left, transparent 0, transparent 50%, var(--za-theme-primary-lighter) 50%);
}

.za-calendar__day--last, .za-calendar__day--first {
  background-image: none;
}

.za-carousel {
  --pagination-margin: var(--za-carousel-pagination-margin, 8px);
  --pagination-item-width: var(--za-carousel-pagination-item-width, 18px);
  --pagination-item-height: var(--za-carousel-pagination-item-height, 4px);
  --pagination-item-border-radius: var(--za-carousel-pagination-item-border-radius, 1px);
  --pagination-item-spacing: var(--za-carousel-pagination-item-spacing, 2px);
  --pagination-item-background: var(--za-carousel-pagination-item-background, rgba(255, 255, 255, 0.6));
  --pagination-item-active-background: var(--za-carousel-pagination-item-active-background, #fff);
  position: relative;
  overflow: hidden;
  -ms-touch-action: none;
      touch-action: none;
}
.za-carousel__items {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}

.za-carousel__item {
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  position: relative;
  width: 100%;
  height: 100%;
  vertical-align: top;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}

.za-carousel__pagination {
  position: absolute;
}

.za-carousel__pagination__item {
  background: var(--pagination-item-background);
  cursor: pointer;
  border-radius: var(--pagination-item-border-radius);
}
.za-carousel__pagination__item--active {
  background: var(--pagination-item-active-background);
}

.za-carousel--horizontal .za-carousel__items {
  white-space: nowrap;
}

.za-carousel--horizontal .za-carousel__pagination {
  left: 50%;
  bottom: var(--pagination-margin);
  -webkit-transform: translate3d(-50%, 0, 0);
          transform: translate3d(-50%, 0, 0);
}

.za-carousel--horizontal .za-carousel__pagination__item {
  display: inline-block;
  width: var(--pagination-item-width);
  height: var(--pagination-item-height);
}
.za-carousel--horizontal .za-carousel__pagination__item:not(:last-child) {
  margin-right: var(--pagination-item-spacing);
}

.za-carousel--vertical .za-carousel__items {
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-touch-action: none;
      touch-action: none;
}

.za-carousel--vertical .za-carousel__pagination {
  top: 50%;
  right: var(--pagination-margin);
  -webkit-transform: translate3d(0, -50%, 0);
          transform: translate3d(0, -50%, 0);
}

.za-carousel--vertical .za-carousel__pagination__item {
  width: var(--pagination-item-height);
  height: var(--pagination-item-width);
}
.za-carousel--vertical .za-carousel__pagination__item:not(:last-child) {
  margin-bottom: var(--pagination-item-spacing);
}

.za-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.za-list > *:first-child .za-list-item__wrapper::after {
  content: none;
}

.za-list--unbordered .za-list-item .za-list-item__wrapper:after {
  content: none;
}

.za-list-item {
  --height: var(--za-list-item-height, 44px);
  --padding-horizontal: var(--za-list-item-padding-horizontal, 16px);
  --padding-vertical: var(--za-list-item-padding-vertical, 8px);
  --background: var(--za-list-item-background, #fff);
  --active-background: var(--za-list-item-active-background, var(--za-background-active));
  --separator-color: var(--za-list-item-separator-color, var(--za-border-color));
  --title-font-size: var(--za-list-item-title-font-size, var(--za-font-size-md));
  --title-white-space: var(--za-list-item-title-white-space, nowrap);
  --title-line-height: var(--za-list-item-title-line-height, calc(var(--height) - var(--padding-vertical) * 2));
  --suffix-text-color: var(--za-list-item-suffix-text-color, rgba(0, 0, 0, 0.45));
  --space: var(--za-list-item-space, 5px);
  --arrow-width: var(--za-list-item-arrow-width, var(--za-arrow-width));
  --arrow-color: var(--za-list-item-arrow-color, var(--za-arrow-color));
  --arrow-size: var(--za-list-item-arrow-size, var(--za-arrow-size));
  --description-font-size: var(--za-list-item-description-font-size, 12px);
  --description-text-color: var(--za-list-item-description-text-color, var(--za-color-text-caption));
  --description-line-height: var(--za-list-item-description-line-height, 16px);
  --inline-title-width: var(--za-list-item-inline-title-width, 100px);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  padding-left: 16px;
  padding-left: var(--padding-horizontal);
  background: #fff;
  background: var(--background);
  font-size: 17px;
  font-size: var(--title-font-size);
}
.za-list-item a,
.za-list-item a:hover {
  text-decoration: none;
}
.za-list-item__prefix {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: var(--padding-horizontal);
  padding: var(--padding-vertical) 0;
  min-height: var(--height);
}

.za-list-item__wrapper {
  -webkit-flex: 1 1;
      -ms-flex: 1 1;
          flex: 1 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: var(--height);
  padding: var(--padding-vertical) 0;
  padding-right: var(--padding-horizontal);
}
.za-list-item__wrapper:after {
  content: "";
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 0;
  border: 0 solid var(--separator-color);
  /* prettier-ignore */
  border-top-width: 1PX;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .za-list-item__wrapper:after {
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  .za-list-item__wrapper:after {
    width: 300%;
    height: 300%;
    -webkit-transform: scale(0.3333);
        -ms-transform: scale(0.3333);
            transform: scale(0.3333);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}

.za-list-item__inner {
  -webkit-flex: 1 1;
      -ms-flex: 1 1;
          flex: 1 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  min-width: 0;
  line-height: var(--title-line-height);
}

.za-list-item__title {
  white-space: var(--title-white-space);
  overflow: hidden;
  text-overflow: ellipsis;
}

.za-list-item__content {
  -webkit-flex: 1 1;
      -ms-flex: 1 1;
          flex: 1 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: var(--title-line-height);
}

.za-list-item__suffix {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
          flex-shrink: 0;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: var(--title-line-height);
  margin-left: auto;
  padding-left: var(--space);
  color: var(--suffix-text-color);
}

.za-list-item__arrow {
  margin-left: var(--space);
  margin-right: var(--arrow-width);
}
.za-list-item__arrow:after {
  content: "";
  display: inline-block;
  border-right: var(--arrow-width) solid var(--arrow-color);
  border-top: var(--arrow-width) solid var(--arrow-color);
  width: var(--arrow-size);
  height: var(--arrow-size);
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}

.za-list-item__description {
  font-size: var(--description-font-size);
  color: var(--description-text-color);
  line-height: var(--description-line-height);
}

.za-list-item--inline .za-list-item__inner {
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.za-list-item--inline .za-list-item__title {
  width: var(--inline-title-width);
  line-height: var(--title-line-height);
}

.za-list-item--link {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition-duration: 0.1s;
          transition-duration: 0.1s;
  -webkit-transition-property: background, color;
  transition-property: background, color;
}
.za-list-item--link:active {
  background: var(--active-background);
}

.za-checkbox {
  --icon-size: var(--za-checkbox-icon-size, 22px);
  --icon-background: var(--za-checkbox-icon-background, transparent);
  --icon-border-radius: var(--za-checkbox-icon-border-radius, 22px);
  --icon-border-width: var(--za-checkbox-icon-border-width, 1px);
  --icon-border-color: var(--za-checkbox-icon-border-color, rgb(199, 199, 204));
  --tick-font-size: var(--za-checkbox-tick-font-size, 16px);
  --tick-color: var(--za-checkbox-tick-color, #fff);
  --tick-transition: var(--za-checkbox-tick-transition, all 0.2s cubic-bezier(0.71, -0.46, 0.88, 0.6));
  --text-margin-horizontal: var(--za-checkbox-text-margin-horizontal, 8px);
  --active-opacity: var(--za-checkbox-active-opacity, 0.6);
  --checked-icon-background: var(--za-checkbox-checked-icon-background, var(--za-theme-primary));
  --checked-icon-border-color: var(--za-checkbox-checked-icon-border-color, var(--za-theme-primary));
  --checked-tick-color: var(--za-checkbox-checked-tick-color, #fff);
  --disabled-icon-background: var(--za-checkbox-disabled-icon-background, #f2f2f2);
  --disabled-icon-border-color: var(--za-checkbox-disabled-icon-border-color, rgba(199, 199, 204, 0.7));
  --disabled-text-color: var(--za-checkbox-disabled-text-color, rgba(0, 0, 0, 0.3));
  --disabled-tick-color: var(--za-checkbox-disabled-tick-color, #bcbcbc);
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: text-bottom;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}
.za-checkbox:not(.za-checkbox--disabled):active {
  opacity: var(--active-opacity);
}
.za-checkbox__icon {
  display: inline-block;
  vertical-align: middle;
}

.za-checkbox__input {
  display: none;
}

.za-checkbox__text {
  vertical-align: middle;
  margin: 0 var(--text-margin-horizontal);
}

.za-checkbox__tick {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  border: var(--icon-border-width) solid var(--icon-border-color);
  border-radius: var(--icon-border-radius);
  background: var(--icon-background);
}
.za-checkbox__tick .za-icon {
  font-size: var(--tick-font-size);
  color: var(--tick-color);
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-transition: var(--tick-transition);
  transition: var(--tick-transition);
}

.za-checkbox--checked .za-checkbox__tick, .za-checkbox--indeterminate .za-checkbox__tick {
  border-color: var(--checked-icon-border-color);
  background: var(--checked-icon-background);
}
.za-checkbox--checked .za-checkbox__tick .za-icon, .za-checkbox--indeterminate .za-checkbox__tick .za-icon {
  color: var(--checked-tick-color);
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

.za-checkbox--disabled .za-checkbox__input {
  cursor: not-allowed;
}

.za-checkbox--disabled .za-checkbox__text {
  color: var(--disabled-text-color);
}

.za-checkbox--disabled .za-checkbox__tick {
  border-color: var(--disabled-icon-border-color);
  background: var(--disabled-icon-background);
}

.za-checkbox--disabled.za-checkbox--checked .za-checkbox__tick {
  border-color: var(--disabled-icon-border-color);
  background: var(--disabled-icon-background);
}
.za-checkbox--disabled.za-checkbox--checked .za-checkbox__tick .za-icon {
  color: var(--disabled-tick-color);
}

.za-checkbox-group {
  --group-spacing-vertical: var(--za-checkbox-group-group-spacing-vertical, 8px);
  --group-spacing-horizontal: var(--za-checkbox-group-group-spacing-horizontal, 24px);
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
}
.za-checkbox-group__inner {
  margin-right: calc(var(--group-spacing-horizontal) * -1);
  margin-bottom: calc(var(--group-spacing-vertical) * -1);
  line-height: 1;
}

.za-checkbox-group .za-checkbox {
  margin-right: var(--group-spacing-horizontal);
  margin-bottom: var(--group-spacing-vertical);
}
.za-checkbox-group--block {
  width: 100%;
}
.za-checkbox-group--block .za-checkbox-group__inner {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.za-checkbox-group--block .za-checkbox {
  -webkit-flex: 1 1;
      -ms-flex: 1 1;
          flex: 1 1;
}

.za-checkbox-group--button {
  --group-spacing-vertical: var(--za-checkbox-group-group-spacing-vertical, var(--za-padding-v-xs));
  --group-spacing-horizontal: var(--za-checkbox-group-group-spacing-horizontal, var(--za-padding-h-xs));
}

.za-checkbox-group--list {
  display: block;
  overflow: visible;
}
.za-checkbox-group--list .za-checkbox-group__inner {
  margin-right: 0;
  margin-bottom: 0;
}

.za-checkbox-group--list .za-checkbox {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-right: 0;
  margin-bottom: 0;
}
.za-checkbox-group--list .za-checkbox .za-checkbox__text {
  margin-left: 0;
}

.za-collapse {
  --border-color: var(--za-collapse-border-color, var(--za-border-color));
  --arrow-color: var(--za-collapse-arrow-color, var(--za-arrow-color));
  --arrow-size: var(--za-collapse-arrow-size, var(--za-arrow-size));
  --arrow-width: var(--za-collapse-arrow-width, var(--za-arrow-width));
  --arrow-disabled-color: var(--za-collapse-arrow-disabled-color, #eee);
  --header-height: var(--za-collapse-header-height, 44px);
  --header-padding-horizontal: var(--za-collapse-header-padding-horizontal, 16px);
  --header-padding-vertical: var(--za-collapse-header-padding-vertical, 15px);
  --header-disable-color: var(--za-collapse-header-disable-color, var(--za-color-text-disabled));
  --content-color: var(--za-collapse-content-color, var(--za-color-text-caption));
  --content-padding-vertical: var(--za-collapse-content-padding-vertical, var(--za-padding-v-sm));
  --content-padding-horizontal: var(--za-collapse-content-padding-horizontal, var(--za-padding-h-sm));
  position: relative;
}
.za-collapse:after {
  content: "";
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 0;
  border: 0 solid var(--border-color);
  /* prettier-ignore */
  border-top-width: 1PX;
  /* prettier-ignore */
  border-bottom-width: 1PX;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .za-collapse:after {
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  .za-collapse:after {
    width: 300%;
    height: 300%;
    -webkit-transform: scale(0.3333);
        -ms-transform: scale(0.3333);
            transform: scale(0.3333);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}
.za-collapse--animated .za-collapse-item__content {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.za-collapse-item:not(.za-collapse-item--disabled) .za-collapse-item__header:active {
  background-color: rgba(0, 0, 0, 0.15);
  background-color: var(--za-background-active);
}

.za-collapse-item__header {
  position: relative;
  overflow: hidden;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: var(--header-height);
  padding: 0 var(--header-padding-horizontal);
  -webkit-transition-duration: 0.1s;
          transition-duration: 0.1s;
  -webkit-transition-property: background-color, color;
  transition-property: background-color, color;
}
.za-collapse-item__header:after {
  content: "";
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 0;
  border: 0 solid var(--border-color);
  /* prettier-ignore */
  border-top-width: 1PX;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .za-collapse-item__header:after {
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  .za-collapse-item__header:after {
    width: 300%;
    height: 300%;
    -webkit-transform: scale(0.3333);
        -ms-transform: scale(0.3333);
            transform: scale(0.3333);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}
.za-collapse-item__header:after {
  left: var(--header-padding-horizontal);
}

.za-collapse-item__title {
  -webkit-flex: 1 1;
      -ms-flex: 1 1;
          flex: 1 1;
  font-size: 17px;
}

.za-collapse-item__content {
  position: relative;
  height: 0;
  overflow: hidden;
  font-size: 13px;
  color: var(--content-color);
  will-change: height;
}
.za-collapse-item__content:after {
  content: "";
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 0;
  border: 0 solid var(--border-color);
  /* prettier-ignore */
  border-top-width: 1PX;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .za-collapse-item__content:after {
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  .za-collapse-item__content:after {
    width: 300%;
    height: 300%;
    -webkit-transform: scale(0.3333);
        -ms-transform: scale(0.3333);
            transform: scale(0.3333);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}
.za-collapse-item__content:after {
  left: var(--header-padding-horizontal);
}

.za-collapse-item__content__inner {
  padding: var(--content-padding-vertical) var(--content-padding-horizontal);
}

.za-collapse-item__arrow {
  margin-top: -3px;
  margin-left: 5px;
  margin-right: 2px;
}
.za-collapse-item__arrow:after {
  display: inline-block;
  content: "";
  border-right: var(--arrow-width) solid var(--arrow-color);
  border-top: var(--arrow-width) solid var(--arrow-color);
  width: var(--arrow-size);
  height: var(--arrow-size);
  -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.za-collapse-item--disabled .za-collapse-item__title {
  color: var(--header-disable-color);
}

.za-collapse-item--disabled .za-collapse-item__arrow:after {
  border-right-color: var(--arrow-disabled-color);
  border-top-color: var(--arrow-disabled-color);
}

.za-collapse-item--active .za-collapse-item__content {
  height: auto;
}

.za-collapse-item--active .za-collapse-item__arrow {
  margin-top: 0;
}
.za-collapse-item--active .za-collapse-item__arrow:after {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.za-date-select {
  --arrow-color: var(--za-date-select-arrow-color, var(--za-arrow-color));
  --arrow-size: var(--za-date-select-arrow-size, var(--za-arrow-size));
  --arrow-width: var(--za-date-select-arrow-width, var(--za-arrow-width));
  --placeholder-color: var(--za-date-select-placeholder-color, var(--za-color-text-placeholder));
  --disabled-color: var(--za-date-select-disabled-color, var(--za-color-text-disabled));
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}
.za-date-select__input {
  -webkit-flex: 1 1;
      -ms-flex: 1 1;
          flex: 1 1;
  position: relative;
  width: 100%;
}

.za-date-select--placeholder .za-date-select__input {
  color: var(--placeholder-color);
}

.za-date-select__arrow {
  margin-left: 5px;
  margin-top: calc(var(--arrow-size) / -2);
}
.za-date-select__arrow:after {
  display: inline-block;
  content: "";
  border-right: var(--arrow-width) solid var(--arrow-color);
  border-bottom: var(--arrow-width) solid var(--arrow-color);
  width: var(--arrow-size);
  height: var(--arrow-size);
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}

.za-date-select--visible .za-date-select__arrow:after {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.za-date-select--disabled .za-date-select__input {
  color: var(--disabled-color);
}

.za-file-picker {
  --opacity-disabled: var(--za-file-picker-opacity-disabled, var(--za-opacity-disabled));
  position: relative;
}
.za-file-picker__input {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.za-file-picker--disabled {
  opacity: var(--opacity-disabled);
}

:root {
  --za-theme-default: hsl(0, 0%, 90%);
  --za-theme-primary: hsl(156, 100%, 36.9%);
  --za-theme-success: hsl(156, 100%, 36.9%);
  --za-theme-warning: hsl(31, 83.1%, 55.9%);
  --za-theme-danger: hsl(0, 100%, 65.7%);
}

.za-icon {
  --color: var(--za-icon-color, inherit);
  --font-size: var(--za-icon-font-size, 24px);
  display: inline-block;
  font-style: normal;
  line-height: 0;
  text-align: center;
  text-transform: none;
  vertical-align: -0.125em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: inherit;
  color: var(--color);
  font-size: 24px;
  font-size: var(--font-size);
  /* icon themes */
  /* icon sizes */
}
.za-icon[type=search] {
  -webkit-appearance: initial !important;
}
.za-icon--font {
  /* stylelint-disable-next-line */
  font-family: "zaicon";
  line-height: 1;
}

.za-icon--primary {
  --color: var(--za-icon-color, var(--za-theme-primary));
}

.za-icon--success {
  --color: var(--za-icon-color, var(--za-theme-success));
}

.za-icon--warning {
  --color: var(--za-icon-color, var(--za-theme-warning));
}

.za-icon--danger {
  --color: var(--za-icon-color, var(--za-theme-danger));
}

.za-icon--sm {
  --font-size: var(--za-icon-font-size, 16px);
}

.za-icon--lg {
  --font-size: var(--za-icon-font-size, 32px);
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

*[contenteditable] {
  -webkit-user-select: auto !important;
     -moz-user-select: auto !important;
      -ms-user-select: auto !important;
          user-select: auto !important;
}

*:focus {
  outline: none;
}

@-webkit-keyframes virtual-cursor {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes virtual-cursor {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.za-custom-input {
  --color: var(--za-custom-input-color, var(--za-color-text));
  --font-size: var(--za-custom-input-font-size, var(--za-font-size-md));
  --height: var(--za-custom-input-height, 28px);
  --line-height: var(--za-custom-input-line-height, 28px);
  --label-font-size: var(--za-custom-input-label-font-size, var(--za-font-size-sm));
  --placeholder-color: var(--za-custom-input-placeholder-color, var(--za-color-text-placeholder));
  --disabled-color: var(--za-custom-input-disabled-color, var(--za-color-text-disabled));
  --clear-icon-size: var(--za-custom-input-clear-icon-size, 16px);
  --clear-icon-color: var(--za-custom-input-clear-icon-color, #ccc);
  --cursor-height: var(--za-custom-input-cursor-height, 20px);
  --cursor-width: var(--za-custom-input-cursor-width, 2px);
  --cursor-color: var(--za-custom-input-cursor-color, #597cf6);
  position: relative;
  width: 100%;
  color: #343434;
  color: var(--color);
  font-size: 17px;
  font-size: var(--font-size);
}
.za-custom-input__label {
  font-size: var(--label-font-size);
  line-height: var(--line-height);
}

.za-custom-input__content {
  position: relative;
  height: var(--height);
  line-height: var(--line-height);
}

.za-custom-input__placeholder {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: var(--placeholder-color);
}

.za-custom-input__virtual-input {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.za-custom-input--focus .za-custom-input__virtual-input {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.za-custom-input--focus .za-custom-input__virtual-input:after {
  content: "";
  display: inline-block;
  height: var(--cursor-height);
  border-right: var(--cursor-width) solid var(--cursor-color);
  -webkit-transition: opacity 0.1s ease-out;
  transition: opacity 0.1s ease-out;
  -webkit-animation: virtual-cursor 1s infinite step-start;
          animation: virtual-cursor 1s infinite step-start;
}

.za-custom-input--clearable .za-custom-input__clear {
  position: absolute;
  visibility: hidden;
  color: var(--clear-icon-color);
  width: var(--clear-icon-size);
  text-align: center;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 0;
  font-size: 16px;
}

.za-custom-input--clearable.za-custom-input--focus {
  padding-right: var(--clear-icon-size);
}
.za-custom-input--clearable.za-custom-input--focus .za-custom-input__clear {
  visibility: visible;
}

.za-custom-input--readonly .za-custom-input__content {
  height: auto;
}

.za-custom-input--disabled .za-custom-input__content, .za-custom-input--disabled .za-custom-input__placeholder {
  cursor: not-allowed;
  color: var(--disabled-color);
}

.za-input {
  --color: var(--za-input-color, var(--za-color-text));
  --font-size: var(--za-input-font-size, var(--za-font-size-md));
  --height: var(--za-input-height, 28px);
  --line-height: var(--za-input-line-height, 28px);
  --label-font-size: var(--za-input-label-font-size, var(--za-font-size-sm));
  --placeholder-color: var(--za-input-placeholder-color, var(--za-color-text-placeholder));
  --disabled-color: var(--za-input-disabled-color, var(--za-color-text-disabled));
  --clear-icon-size: var(--za-input-clear-icon-size, 16px);
  --clear-icon-color: var(--za-input-clear-icon-color, #ccc);
  --textarea-length-font-size: var(--za-input-textarea-length-font-size, var(--za-font-size-sm));
  --textarea-length-color: var(--za-input-textarea-length-color, var(--za-color-text-disabled));
  position: relative;
  width: 100%;
  color: #343434;
  color: var(--color);
  font-size: 17px;
  font-size: var(--font-size);
}
.za-input input,
.za-input textarea {
  -webkit-flex: 1 1;
      -ms-flex: 1 1;
          flex: 1 1;
  position: relative;
  width: 100%;
  padding: 0;
  background-color: transparent;
  background-image: none;
  border: 0;
  outline: 0;
  -webkit-appearance: none;
  font-size: var(--font-size);
  color: var(--color);
  line-height: var(--line-height);
}
.za-input input::-webkit-input-placeholder, .za-input textarea::-webkit-input-placeholder {
  color: var(--placeholder-color);
}
.za-input input::-moz-placeholder, .za-input textarea::-moz-placeholder {
  color: var(--placeholder-color);
}
.za-input input:-ms-input-placeholder, .za-input textarea:-ms-input-placeholder {
  color: var(--placeholder-color);
}
.za-input input::-ms-input-placeholder, .za-input textarea::-ms-input-placeholder {
  color: var(--placeholder-color);
}
.za-input input::placeholder,
.za-input textarea::placeholder {
  color: var(--placeholder-color);
}
.za-input input {
  display: inline-block;
  height: var(--height);
}
.za-input textarea {
  display: block;
  resize: none;
  word-break: break-all;
  word-wrap: break-word;
  overflow: visible;
}
.za-input__label {
  font-size: var(--label-font-size);
  line-height: var(--line-height);
}

.za-input__content {
  position: relative;
  height: var(--height);
  line-height: var(--line-height);
}

.za-input::-webkit-input-placeholder {
  color: var(--placeholder-color);
}

.za-input::-moz-placeholder {
  color: var(--placeholder-color);
}

.za-input:-ms-input-placeholder {
  color: var(--placeholder-color);
}

.za-input::-ms-input-placeholder {
  color: var(--placeholder-color);
}

.za-input::placeholder {
  color: var(--placeholder-color);
}
.za-input--textarea .za-input__length {
  text-align: right;
  color: var(--textarea-length-color);
  font-size: var(--textarea-length-font-size);
}

.za-input--clearable input::-webkit-search-cancel-button {
  display: none;
}
.za-input--clearable .za-input__clear {
  position: absolute;
  visibility: hidden;
  color: var(--clear-icon-color);
  text-align: center;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 0;
  font-size: var(--clear-icon-size);
}

.za-input--clearable.za-input--focus {
  padding-right: var(--clear-icon-size);
}
.za-input--clearable.za-input--focus .za-input__clear {
  visibility: visible;
}

.za-input--readonly .za-input__content {
  height: auto;
}

.za-input--disabled input,
.za-input--disabled textarea {
  cursor: not-allowed;
  color: var(--disabled-color);
  -webkit-text-fill-color: var(--disabled-color);
  opacity: 1;
}
.za-input--disabled input::-webkit-input-placeholder, .za-input--disabled textarea::-webkit-input-placeholder {
  color: var(--disabled-color);
}
.za-input--disabled input::-moz-placeholder, .za-input--disabled textarea::-moz-placeholder {
  color: var(--disabled-color);
}
.za-input--disabled input:-ms-input-placeholder, .za-input--disabled textarea:-ms-input-placeholder {
  color: var(--disabled-color);
}
.za-input--disabled input::-ms-input-placeholder, .za-input--disabled textarea::-ms-input-placeholder {
  color: var(--disabled-color);
}
.za-input--disabled input::placeholder,
.za-input--disabled textarea::placeholder {
  color: var(--disabled-color);
}
.za-input--disabled .za-input__content {
  cursor: not-allowed;
  color: var(--disabled-color);
}

.za-keyboard {
  --background: var(--za-keyboard-background, #d8d8d8);
  --item-background: var(--za-keyboard-item-background, #fff);
  --item-active-background: var(--za-keyboard-item-active-background, rgba(162, 165, 176, 0.8));
  --item-gap: var(--za-keyboard-item-gap, 6px);
  --item-height: var(--za-keyboard-item-height, 52px);
  --item-font-size: var(--za-keyboard-item-font-size, 30px);
  --item-border-radius: var(--za-keyboard-item-border-radius, 5px);
  --item-box-shadow: var(--za-keyboard-item-box-shadow, 0 1px 0 #898a8d);
  --ok-background: var(--za-keyboard-ok-background, var(--za-theme-primary));
  --ok-font-size: var(--za-keyboard-ok-font-size, 20px);
  --ok-text-color: var(--za-keyboard-ok-text-color, #fff);
  --opacity-disabled: var(--za-keyboard-opacity-disabled, var(--za-opacity-disabled));
  display: grid;
  gap: 6px;
  grid-gap: 6px;
  grid-gap: var(--item-gap);
  gap: var(--item-gap);
  background: #d8d8d8;
  background: var(--background);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding: 6px;
  padding: var(--item-gap);
}
.za-keyboard__item {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: var(--item-font-size);
  color: var(--item-text-color);
  background: var(--item-background);
  height: var(--item-height);
  border-radius: var(--item-border-radius);
  -webkit-box-shadow: var(--item-box-shadow);
          box-shadow: var(--item-box-shadow);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.za-keyboard__item:not(.za-keyboard__item--disabled):not(.za-keyboard__item--blank):active {
  background: var(--item-active-background);
  -webkit-box-shadow: none;
          box-shadow: none;
}
.za-keyboard__item--ok {
  background: var(--ok-background);
  font-size: var(--ok-font-size);
  color: var(--ok-text-color);
}

.za-keyboard__item--blank {
  background: transparent;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.za-keyboard__item--disabled, .za-keyboard__item--disabled:hover, .za-keyboard__item--disabled:active {
  opacity: var(--opacity-disabled);
}

.za-keyboard-picker {
  --background: var(--za-keyboard-picker-background, #d8d8d8);
  background: #d8d8d8;
  background: var(--background);
}

.za-marquee {
  --transform-x: 200%;
  --transform-y: 200%;
  width: 100%;
  overflow: hidden;
}
.za-marquee__body {
  white-space: nowrap;
  width: 100%;
  -webkit-transform: translate3d(var(--transform-x), var(--transform-y), 0);
          transform: translate3d(var(--transform-x), var(--transform-y), 0);
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-fill-mode: none;
          animation-fill-mode: none;
  -webkit-animation-play-state: running;
          animation-play-state: running;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: za-marqueue-animation;
          animation-name: za-marqueue-animation;
}

.za-marquee__content {
  display: inline-block;
}

@-webkit-keyframes za-marqueue-animation {
  100% {
    -webkit-transform: translate3d(var(--distance-x), var(--distance-y), 0);
            transform: translate3d(var(--distance-x), var(--distance-y), 0);
  }
}

@keyframes za-marqueue-animation {
  100% {
    -webkit-transform: translate3d(var(--distance-x), var(--distance-y), 0);
            transform: translate3d(var(--distance-x), var(--distance-y), 0);
  }
}
.za-mask {
  --zindex: var(--za-mask-zindex, var(--za-zindex-mask));
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  z-index: var(--zindex);
}

.za-message {
  --line-height: var(--za-message-line-height, 18px);
  --font-size: var(--za-message-font-size, var(--za-font-size-xs));
  --icon-size: var(--za-message-icon-size, 14px);
  --padding: var(--za-message-padding, 6px 8px);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  line-height: 18px;
  line-height: var(--line-height);
  padding: 6px 8px;
  padding: var(--padding);
  font-size: 14px;
  font-size: var(--font-size);
  color: hsl(0, 0%, 90%);
  color: var(--za-theme-default);
  background-color: hsla(0, 0%, 90%, 0.1);
  background-color: hsla(var(--za-theme-default-h), var(--za-theme-default-s), var(--za-theme-default-l), 0.1);
}
.za-message .za-icon {
  color: hsl(0, 0%, 90%);
  color: var(--za-theme-default);
}
.za-message__header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1;
}

.za-message__icon {
  margin-right: 4px;
}
.za-message__icon .za-icon {
  font-size: var(--icon-size);
}

.za-message__body {
  -webkit-flex: 1 1;
      -ms-flex: 1 1;
          flex: 1 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.za-message__footer {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: right;
  padding-left: 10px;
}
.za-message__footer .za-icon {
  font-size: var(--icon-size);
  cursor: pointer;
}

.za-message--link {
  cursor: pointer;
}

.za-message--primary {
  color: hsl(156, 100%, 36.9%);
  color: var(--za-theme-primary);
  background-color: hsla(156, 100%, 36.9%, 0.1);
  background-color: hsla(var(--za-theme-primary-h), var(--za-theme-primary-s), var(--za-theme-primary-l), 0.1);
}
.za-message--primary .za-icon {
  color: hsl(156, 100%, 36.9%);
  color: var(--za-theme-primary);
}

.za-message--success {
  color: hsl(156, 100%, 36.9%);
  color: var(--za-theme-success);
  background-color: hsla(156, 100%, 36.9%, 0.1);
  background-color: hsla(var(--za-theme-success-h), var(--za-theme-success-s), var(--za-theme-success-l), 0.1);
}
.za-message--success .za-icon {
  color: hsl(156, 100%, 36.9%);
  color: var(--za-theme-success);
}

.za-message--warning {
  color: hsl(31, 83.1%, 55.9%);
  color: var(--za-theme-warning);
  background-color: hsla(31, 83.1%, 55.9%, 0.1);
  background-color: hsla(var(--za-theme-warning-h), var(--za-theme-warning-s), var(--za-theme-warning-l), 0.1);
}
.za-message--warning .za-icon {
  color: hsl(31, 83.1%, 55.9%);
  color: var(--za-theme-warning);
}

.za-message--danger {
  color: hsl(0, 100%, 65.7%);
  color: var(--za-theme-danger);
  background-color: hsla(0, 100%, 65.7%, 0.1);
  background-color: hsla(var(--za-theme-danger-h), var(--za-theme-danger-s), var(--za-theme-danger-l), 0.1);
}
.za-message--danger .za-icon {
  color: hsl(0, 100%, 65.7%);
  color: var(--za-theme-danger);
}

.za-modal {
  --background: var(--za-modal-background, rgb(242, 242, 242));
  --border-radius: var(--za-modal-border-radius, 14px);
  --shadow: var(--za-modal-shadow, 0 7px 21px var(--za-color-shadow));
  --title-font-size: var(--za-modal-title-font-size, 17px);
  --title-font-weight: var(--za-modal-title-font-weight, 500);
  --title-text-color: var(--za-modal-title-text-color, var(--za-color-text));
  --close-size: var(--za-modal-close-size, 20px);
  --close-color: var(--za-modal-close-color, #ccc);
  --close-active-color: var(--za-modal-close-active-color, #999);
  --body-font-size: var(--za-modal-body-font-size, 13px);
  --body-text-color: var(--za-modal-body-text-color, var(--za-color-text));
  --body-padding: var(--za-modal-body-padding, 16px);
  --button-height: var(--za-modal-button-height, 44px);
  --button-font-size: var(--za-modal-button-font-size, 17px);
  --button-font-weight: var(--za-modal-button-font-weight, 500);
  --button-text-color: var(--za-modal-button-text-color, var(--za-theme-primary));
  --button-background: var(--za-modal-button-background, transparent);
  --button-active-background: var(--za-modal-button-active-background, var(--za-background-active));
  --button-disabled-opacity: var(--za-modal-button-disabled-opacity, var(--za-opacity-disabled));
  -webkit-overflow-scrolling: touch;
}
.za-modal .za-popup {
  position: relative;
  background: var(--background);
  -webkit-box-shadow: var(--shadow);
          box-shadow: var(--shadow);
  overflow: hidden;
}
.za-modal--radius .za-popup {
  border-radius: var(--border-radius);
}

.za-modal__body {
  position: relative;
  font-size: var(--body-font-size);
  color: var(--body-text-color);
  padding: var(--body-padding);
  -webkit-user-select: auto;
     -moz-user-select: auto;
      -ms-user-select: auto;
          user-select: auto;
}
.za-modal__body .za-modal__title {
  text-align: center;
  font-size: var(--title-font-size);
  font-weight: var(--title-font-weight);
  color: var(--title-text-color);
  margin-bottom: 6px;
}

.za-modal__body .za-modal__close {
  position: absolute;
  top: 0;
  right: 0;
  color: var(--close-color);
  font-size: var(--close-size);
  margin: var(--body-padding);
  cursor: pointer;
}
.za-modal__body .za-modal__close:hover {
  color: var(--close-active-color);
}

.za-modal__action {
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.za-modal__action:after {
  content: "";
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 0;
  border: 0 solid rgba(60, 60, 67, 0.36);
  border: 0 solid var(--za-border-color);
  /* prettier-ignore */
  border-top-width: 1PX;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .za-modal__action:after {
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  .za-modal__action:after {
    width: 300%;
    height: 300%;
    -webkit-transform: scale(0.3333);
        -ms-transform: scale(0.3333);
            transform: scale(0.3333);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}

.za-modal__button {
  position: relative;
  display: block;
  width: 100%;
  height: var(--button-height);
  line-height: var(--button-height);
  background: var(--button-background);
  font-size: var(--button-font-size);
  color: var(--button-text-color);
  text-align: center;
}
.za-modal__button:active {
  background: var(--button-active-background);
}
.za-modal__button:not(:first-of-type):after {
  content: "";
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 0;
  border: 0 solid rgba(60, 60, 67, 0.36);
  border: 0 solid var(--za-border-color);
  /* prettier-ignore */
  border-left-width: 1PX;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .za-modal__button:not(:first-of-type):after {
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  .za-modal__button:not(:first-of-type):after {
    width: 300%;
    height: 300%;
    -webkit-transform: scale(0.3333);
        -ms-transform: scale(0.3333);
            transform: scale(0.3333);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}
.za-modal__button--bold {
  font-weight: var(--button-font-weight);
}

.za-modal__button--disabled {
  --item-text-color: var(--za-modal-item-text-color, var(--za-color-text));
  cursor: not-allowed;
  opacity: var(--button-disabled-opacity);
  pointer-events: none;
}

.za-modal__button--default {
  --button-text-color: var(--za-modal-button-text-color, var(--za-color-text));
}

.za-modal__button--danger {
  --button-text-color: var(--za-modal-button-text-color, var(--za-theme-danger));
}

.za-alert .za-modal__body, .za-confirm .za-modal__body {
  text-align: center;
}

.za-nav-bar {
  --background: var(--za-nav-bar-background, rgba(249, 249, 249, 0.94));
  --height: var(--za-nav-bar-height, 44px);
  --title-color: var(--za-nav-bar-title-color, var(--za-color-text));
  --title-font-size: var(--za-nav-bar-title-font-size, var(--za-font-size-md));
  --title-font-weight: var(--za-nav-bar-title-font-weight, 500);
  --side-font-size: var(--za-nav-bar-side-font-size, var(--za-font-size-md));
  --padding-horizontal: var(--za-nav-bar-padding-horizontal, 16px);
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 44px;
  height: var(--height);
  background: rgba(249, 249, 249, 0.94);
  background: var(--background);
}
.za-nav-bar__title {
  position: absolute;
  left: 50%;
  white-space: nowrap;
  color: var(--title-color);
  font-size: var(--title-font-size);
  font-weight: var(--title-font-weight);
  -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  margin-left: auto;
}

.za-nav-bar__side {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: hsl(156, 100%, 36.9%);
  color: var(--za-theme-primary);
  font-size: var(--side-font-size);
  margin-left: auto;
}
.za-nav-bar__side--left {
  margin-left: var(--padding-horizontal);
}

.za-nav-bar__side--right {
  margin-right: var(--padding-horizontal);
}

.za-notice-bar {
  --height: var(--za-notice-bar-height, 40px);
  --padding: var(--za-notice-bar-padding, 8px 12px);
  --icon-size: var(--za-notice-bar-icon-size, 16px);
}
.za-notice-bar .za-message {
  --font-size: var(--za-message-font-size, var(--za-font-size-sm));
  height: var(--height);
  font-size: 14px;
  font-size: var(--font-size);
  padding: var(--padding);
}
.za-notice-bar .za-message__icon {
  margin-right: 6px;
}
.za-notice-bar .za-message__icon .za-icon {
  font-size: var(--icon-size);
}

.za-notice-bar .za-message__footer .za-icon {
  font-size: var(--icon-size);
}

.za-notice-bar__body {
  position: relative;
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
}

.za-notice-bar__content {
  position: absolute;
  left: 0;
  white-space: nowrap;
}

.za-panel {
  --header-padding: var(--za-panel-header-padding, 25px 16px 10px 16px);
  --header-font-size: var(--za-panel-header-font-size, 13px);
  --header-color: var(--za-panel-header-color, rgba(60, 60, 67, 0.6));
  --body-background: var(--za-panel-body-background, #fff);
  --body-font-size: var(--za-panel-body-font-size, var(--za-font-size-md));
  --body-color: var(--za-panel-body-color, var(--za-color-text));
  --body-border-radius: var(--za-panel-body-border-radius, 10px);
  --spacing-padding-horizontal: var(--za-panel-spacing-padding-horizontal, 16px);
}
.za-panel__header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: var(--header-padding);
  font-size: var(--header-font-size);
  color: var(--header-color);
}

.za-panel__title {
  -webkit-flex: 1 1;
      -ms-flex: 1 1;
          flex: 1 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.za-panel__more {
  margin-left: auto;
}

.za-panel__body {
  position: relative;
  background: var(--body-background);
  font-size: var(--body-font-size);
  color: var(--body-color);
}

.za-panel--spacing {
  padding: 0 var(--spacing-padding-horizontal);
}
.za-panel--spacing .za-panel__body {
  border-radius: var(--body-border-radius);
  overflow: hidden;
}
.za-panel--spacing .za-panel__body:after {
  content: none;
}

.za-panel:not(.za-panel--spacing).za-panel--bordered .za-panel__body:after {
  content: "";
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 0;
  border: 0 solid rgba(60, 60, 67, 0.36);
  border: 0 solid var(--za-border-color);
  /* prettier-ignore */
  border-top-width: 1PX;
  /* prettier-ignore */
  border-bottom-width: 1PX;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .za-panel:not(.za-panel--spacing).za-panel--bordered .za-panel__body:after {
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  .za-panel:not(.za-panel--spacing).za-panel--bordered .za-panel__body:after {
    width: 300%;
    height: 300%;
    -webkit-transform: scale(0.3333);
        -ms-transform: scale(0.3333);
            transform: scale(0.3333);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}

.za-picker {
  --header-height: var(--za-picker-header-height, 45px);
  --header-font-size: var(--za-picker-header-font-size, 16px);
  --header-background: var(--za-picker-header-background, #f7f7f7);
  --header-title-text-color: var(--za-picker-header-title-text-color, var(--za-color-text));
  --header-confirm-text-color: var(--za-picker-header-confirm-text-color, var(--za-theme-primary));
  --header-cancel-text-color: var(--za-picker-header-cancel-text-color, var(--za-color-text-caption));
  --background: var(--za-picker-background, #fff);
  --content-background: var(--za-picker-content-background, #fff);
  --content-padding: var(--za-picker-content-padding, 16px);
  --content-mask-start-background: var(--za-picker-content-mask-start-background, rgba(255, 255, 255, 0.4));
  --content-mask-end-background: var(--za-picker-content-mask-end-background, rgba(255, 255, 255, 0.8));
  --wheel-item-rows: var(--za-picker-wheel-item-rows, 5);
  --wheel-item-height: var(--za-picker-wheel-item-height, 34px);
  --wheel-item-font-size: var(--za-picker-wheel-item-font-size, 20px);
  --wheel-item-text-color: var(--za-picker-wheel-item-text-color, var(--za-color-text));
  --wheel-item-disabled-text-color: var(--za-picker-wheel-item-disabled-text-color, var(--za-color-text-disabled));
  --wheel-item-selected-background: var(--za-picker-wheel-item-selected-background, rgba(116, 116, 128, 0.08));
  --wheel-item-selected-border-radius: var(--za-picker-wheel-item-selected-border-radius, 7px);
  ---wheel-item-rows: var(--za-picker--wheel-item-rows, var(--wheel-item-rows));
  ---wheel-item-height: var(--za-picker--wheel-item-height, var(--wheel-item-height));
  ---wheel-item-font-size: var(--za-picker--wheel-item-font-size, var(--wheel-item-font-size));
  ---wheel-item-text-color: var(--za-picker--wheel-item-text-color, var(--wheel-item-text-color));
  ---wheel-item-disabled-text-color: var(--za-picker--wheel-item-disabled-text-color, var(--wheel-item-disabled-text-color));
  ---wheel-item-selected-background: var(--za-picker--wheel-item-selected-background, var(--wheel-item-selected-background));
  ---wheel-item-selected-border-radius: var(--za-picker--wheel-item-selected-border-radius, var(--wheel-item-selected-border-radius));
  background: #fff;
  background: var(--background);
}
.za-picker .za-picker-view {
  --background: var(--za-picker-view-background, var(--content-background));
  --padding: var(--za-picker-view-padding, var(--content-padding));
  --mask-start-background: var(--za-picker-view-mask-start-background, var(--content-mask-start-background));
  --mask-end-background: var(--za-picker-view-mask-end-background, var(--content-mask-end-background));
  --wheel-item-rows: var(--za-picker-view-wheel-item-rows, var(---wheel-item-rows));
  --wheel-item-height: var(--za-picker-view-wheel-item-height, var(---wheel-item-height));
  --wheel-item-font-size: var(--za-picker-view-wheel-item-font-size, var(---wheel-item-font-size));
  --wheel-item-text-color: var(--za-picker-view-wheel-item-text-color, var(---wheel-item-text-color));
  --wheel-item-disabled-text-color: var(--za-picker-view-wheel-item-disabled-text-color, var(---wheel-item-disabled-text-color));
  --wheel-item-selected-background: var(--za-picker-view-wheel-item-selected-background, var(---wheel-item-selected-background));
  --wheel-item-selected-border-radius: var(--za-picker-view-wheel-item-selected-border-radius, var(---wheel-item-selected-border-radius));
}
.za-picker__header {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  width: 100%;
  height: var(--header-height);
  line-height: var(--header-height);
  font-size: var(--header-font-size);
  background: var(--header-background);
}
.za-picker__header:after {
  content: "";
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 0;
  border: 0 solid rgba(60, 60, 67, 0.36);
  border: 0 solid var(--za-border-color);
  /* prettier-ignore */
  border-top-width: 1PX;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .za-picker__header:after {
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  .za-picker__header:after {
    width: 300%;
    height: 300%;
    -webkit-transform: scale(0.3333);
        -ms-transform: scale(0.3333);
            transform: scale(0.3333);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}

.za-picker__body {
  width: 100%;
  height: 100%;
  -webkit-flex: 1 1;
      -ms-flex: 1 1;
          flex: 1 1;
}

.za-picker__cancel, .za-picker__confirm {
  -webkit-flex: 1 1;
      -ms-flex: 1 1;
          flex: 1 1;
  padding: 0 20px;
  cursor: pointer;
}

.za-picker__cancel {
  text-align: left;
  color: var(--header-cancel-text-color);
}

.za-picker__confirm {
  text-align: right;
  color: var(--header-confirm-text-color);
}

.za-picker__title {
  color: var(--header-title-text-color);
}

.za-picker-view {
  --background: var(--za-picker-view-background, #fff);
  --padding: var(--za-picker-view-padding, 16px);
  --mask-start-background: var(--za-picker-view-mask-start-background, rgba(255, 255, 255, 0.4));
  --mask-end-background: var(--za-picker-view-mask-end-background, rgba(255, 255, 255, 0.8));
  --wheel-item-rows: var(--za-picker-view-wheel-item-rows, 5);
  --wheel-item-height: var(--za-picker-view-wheel-item-height, 34px);
  --wheel-item-font-size: var(--za-picker-view-wheel-item-font-size, 20px);
  --wheel-item-text-color: var(--za-picker-view-wheel-item-text-color, var(--za-color-text));
  --wheel-item-disabled-text-color: var(--za-picker-view-wheel-item-disabled-text-color, var(--za-color-text-disabled));
  --wheel-item-selected-background: var(--za-picker-view-wheel-item-selected-background, rgba(116, 116, 128, 0.08));
  --wheel-item-selected-border-radius: var(--za-picker-view-wheel-item-selected-border-radius, 7px);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  width: 100%;
  padding: 16px;
  padding: var(--padding);
  background: #fff;
  background: var(--background);
}
.za-picker-view .za-wheel {
  --item-rows: var(--za-wheel-item-rows, var(--wheel-item-rows));
  --item-height: var(--za-wheel-item-height, var(--wheel-item-height));
  --item-font-size: var(--za-wheel-item-font-size, var(--wheel-item-font-size));
  --item-text-color: var(--za-wheel-item-text-color, var(--wheel-item-text-color));
  --item-disabled-text-color: var(--za-wheel-item-disabled-text-color, var(--wheel-item-disabled-text-color));
}
.za-picker-view:before {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(100% - var(--padding) * 2);
  height: var(--wheel-item-height);
  left: var(--padding);
  margin-top: calc(var(--wheel-item-height) / -2);
  background: var(--wheel-item-selected-background);
  border-radius: var(--wheel-item-selected-border-radius);
}
.za-picker-view__mask {
  width: 100%;
  height: calc((100% - var(--wheel-item-height)) / 2);
  pointer-events: none;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
}
.za-picker-view__mask--top {
  position: absolute;
  top: 0;
  background: -webkit-gradient(linear, left bottom, left top, from(var(--mask-start-background)), to(var(--mask-end-background)));
  background: -webkit-linear-gradient(bottom, var(--mask-start-background), var(--mask-end-background));
  background: linear-gradient(to top, var(--mask-start-background), var(--mask-end-background));
}

.za-picker-view__mask--bottom {
  position: absolute;
  bottom: 0;
  background: -webkit-gradient(linear, left top, left bottom, from(var(--mask-start-background)), to(var(--mask-end-background)));
  background: -webkit-linear-gradient(top, var(--mask-start-background), var(--mask-end-background));
  background: linear-gradient(to bottom, var(--mask-start-background), var(--mask-end-background));
}

.za-picker-view__content {
  -webkit-flex: 1 1;
      -ms-flex: 1 1;
          flex: 1 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.za-popup {
  -webkit-overflow-scrolling: touch;
  margin: auto;
  -webkit-transform: perspective(0);
          transform: perspective(0);
}
.za-popup__wrapper {
  --mask-zindex: var(--za-popup-mask-zindex, var(--za-zindex-mask));
  position: fixed;
  z-index: 1000;
  z-index: var(--mask-zindex);
}
.za-popup__wrapper--center {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: auto;
  padding: 60px 0;
  -webkit-overflow-scrolling: touch;
}

.za-popup--bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

.za-popup--top {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
}

.za-popup--left {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
}

.za-popup--right {
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
}

.za-progress {
  --background: var(--za-progress-background, #f2f2f2);
  --width: var(--za-progress-width, 100%);
  --size: var(--za-progress-size, 150px);
  --font-size: var(--za-progress-font-size, 24px);
  display: inline-block;
  position: relative;
}
.za-progress__outer {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.za-progress__text {
  display: inline-block;
  margin-left: 5px;
}

.za-progress--line.za-progress--primary .za-progress__thumb {
  background-color: hsl(156, 100%, 36.9%);
  background-color: var(--za-theme-primary);
}

.za-progress--line.za-progress--success .za-progress__thumb {
  background-color: hsl(156, 100%, 36.9%);
  background-color: var(--za-theme-success);
}

.za-progress--line.za-progress--warning .za-progress__thumb {
  background-color: hsl(31, 83.1%, 55.9%);
  background-color: var(--za-theme-warning);
}

.za-progress--line.za-progress--danger .za-progress__thumb {
  background-color: hsl(0, 100%, 65.7%);
  background-color: var(--za-theme-danger);
}

.za-progress--line.za-progress--lg {
  width: 100%;
}
.za-progress--line.za-progress--lg .za-progress__text {
  font-size: 16px;
}

.za-progress--line.za-progress--md {
  width: var(--width);
}
.za-progress--line.za-progress--md .za-progress__text {
  font-size: calc(var(--font-size) * 2 / 3);
}

.za-progress--line.za-progress--sm {
  width: 140px;
}
.za-progress--line.za-progress--sm .za-progress__text {
  font-size: 14px;
}

.za-progress--line .za-progress__track {
  width: 100%;
  height: 100%;
  background: var(--background);
  overflow: hidden;
}

.za-progress--line .za-progress__thumb {
  height: 100%;
  width: 0;
  -webkit-transition: width 0.6s ease, background-color 0.6s ease;
  transition: width 0.6s ease, background-color 0.6s ease;
}

.za-progress--circle {
  display: inline-block;
}
.za-progress--circle .za-progress__track {
  stroke: var(--background);
  fill-opacity: 0;
}

.za-progress--circle .za-progress__thumb {
  fill-opacity: 0;
  -webkit-transition: stroke-dashoffset 0.6s ease, stroke 0.6s ease;
  transition: stroke-dashoffset 0.6s ease, stroke 0.6s ease;
}

.za-progress--circle.za-progress--primary .za-progress__thumb {
  stroke: hsl(156, 100%, 36.9%);
  stroke: var(--za-theme-primary);
}

.za-progress--circle.za-progress--success .za-progress__thumb {
  stroke: hsl(156, 100%, 36.9%);
  stroke: var(--za-theme-success);
}

.za-progress--circle.za-progress--warning .za-progress__thumb {
  stroke: hsl(31, 83.1%, 55.9%);
  stroke: var(--za-theme-warning);
}

.za-progress--circle.za-progress--danger .za-progress__thumb {
  stroke: hsl(0, 100%, 65.7%);
  stroke: var(--za-theme-danger);
}

.za-progress--circle svg {
  width: 100%;
  height: 100%;
}
.za-progress--circle .za-progress__text {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  margin: 0;
  text-align: center;
  line-height: 1;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.za-progress--circle.za-progress--lg {
  width: 200px;
  height: 200px;
}
.za-progress--circle.za-progress--lg .za-progress__text {
  font-size: 30px;
}

.za-progress--circle.za-progress--md {
  width: var(--size);
  height: var(--size);
}
.za-progress--circle.za-progress--md .za-progress__text {
  font-size: var(--font-size);
}

.za-progress--circle.za-progress--sm {
  width: 80px;
  height: 80px;
}
.za-progress--circle.za-progress--sm .za-progress__text {
  font-size: 18px;
}

.za-progress--semi-circle {
  display: inline-block;
}
.za-progress--semi-circle .za-progress__track {
  stroke: var(--background);
  fill-opacity: 0;
}

.za-progress--semi-circle .za-progress__thumb {
  fill-opacity: 0;
  -webkit-transition: stroke-dashoffset 0.6s ease, stroke 0.6s ease;
  transition: stroke-dashoffset 0.6s ease, stroke 0.6s ease;
}

.za-progress--semi-circle.za-progress--primary .za-progress__thumb {
  stroke: hsl(156, 100%, 36.9%);
  stroke: var(--za-theme-primary);
}

.za-progress--semi-circle.za-progress--success .za-progress__thumb {
  stroke: hsl(156, 100%, 36.9%);
  stroke: var(--za-theme-success);
}

.za-progress--semi-circle.za-progress--warning .za-progress__thumb {
  stroke: hsl(31, 83.1%, 55.9%);
  stroke: var(--za-theme-warning);
}

.za-progress--semi-circle.za-progress--danger .za-progress__thumb {
  stroke: hsl(0, 100%, 65.7%);
  stroke: var(--za-theme-danger);
}

.za-progress--semi-circle svg {
  width: 100%;
  height: 100%;
}
.za-progress--semi-circle .za-progress__text {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  text-align: center;
  line-height: 1;
}

.za-progress--semi-circle.za-progress--lg {
  width: 200px;
  height: 100px;
}
.za-progress--semi-circle.za-progress--lg .za-progress__text {
  font-size: 30px;
}

.za-progress--semi-circle.za-progress--md {
  width: var(--size);
  height: calc(var(--size) / 2);
}
.za-progress--semi-circle.za-progress--md .za-progress__text {
  font-size: var(--font-size);
}

.za-progress--semi-circle.za-progress--sm {
  width: 80px;
  height: 40px;
}
.za-progress--semi-circle.za-progress--sm .za-progress__text {
  font-size: 18px;
}

.za-pull {
  --control-height: var(--za-pull-control-height, 50px);
  --control-font-size: var(--za-pull-control-font-size, 14px);
  --control-padding-vertical: var(--za-pull-control-padding-vertical, 20px);
  --control-text-color: var(--za-pull-control-text-color, var(--za-color-text-caption));
  --control-icon-size: var(--za-pull-control-icon-size, 22px);
  overflow: hidden;
  min-height: 50px;
  min-height: var(--control-height);
  -ms-touch-action: pan-y;
      touch-action: pan-y;
}
.za-pull__content {
  will-change: transform;
  -webkit-transform: translate3d(0, var(--control-height), 0);
          transform: translate3d(0, var(--control-height), 0);
}

.za-pull__refresh, .za-pull__load {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
  width: 100%;
}

.za-pull__refresh {
  margin-top: calc(var(--control-height) * -1);
  height: var(--control-height);
}

.za-pull__load {
  height: 0;
}
.za-pull__load--show {
  height: var(--control-height);
}

.za-pull__control {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: var(--control-padding-vertical) 0;
  height: var(--control-height);
  color: var(--control-text-color);
  font-size: var(--control-font-size);
}
.za-pull__control .za-icon {
  font-size: var(--control-icon-size);
}
.za-pull__control * + span {
  margin-left: 8px;
}

.za-radio {
  --icon-size: var(--za-radio-icon-size, 22px);
  --icon-background: var(--za-radio-icon-background, transparent);
  --icon-border-radius: var(--za-radio-icon-border-radius, 22px);
  --icon-border-width: var(--za-radio-icon-border-width, 1px);
  --icon-border-color: var(--za-radio-icon-border-color, rgb(199, 199, 204));
  --tick-font-size: var(--za-radio-tick-font-size, 16px);
  --tick-color: var(--za-radio-tick-color, var(--za-theme-primary));
  --tick-transition: var(--za-radio-tick-transition, all 0.2s cubic-bezier(0.71, -0.46, 0.88, 0.6));
  --text-margin-horizontal: var(--za-radio-text-margin-horizontal, 8px);
  --active-opacity: var(--za-radio-active-opacity, 0.6);
  --checked-icon-background: var(--za-radio-checked-icon-background, transparent);
  --checked-icon-border-color: var(--za-radio-checked-icon-border-color, var(--za-theme-primary));
  --checked-tick-color: var(--za-radio-checked-tick-color, var(--za-theme-primary));
  --disabled-icon-background: var(--za-radio-disabled-icon-background, #f2f2f2);
  --disabled-icon-border-color: var(--za-radio-disabled-icon-border-color, rgba(199, 199, 204, 0.7));
  --disabled-text-color: var(--za-radio-disabled-text-color, rgba(0, 0, 0, 0.3));
  --disabled-tick-color: var(--za-radio-disabled-tick-color, #bcbcbc);
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: text-bottom;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
}
.za-radio:not(.za-radio--disabled):active {
  opacity: var(--active-opacity);
}
.za-radio__icon {
  display: inline-block;
  vertical-align: middle;
}

.za-radio__input {
  display: none;
}

.za-radio__text {
  vertical-align: middle;
  margin: 0 var(--text-margin-horizontal);
}

.za-radio__tick {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  border: var(--icon-border-width) solid var(--icon-border-color);
  border-radius: var(--icon-border-radius);
  background: var(--icon-background);
}
.za-radio__tick .za-icon {
  font-size: var(--tick-font-size);
  color: var(--tick-color);
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-transition: var(--tick-transition);
  transition: var(--tick-transition);
}

.za-radio--checked .za-radio__tick, .za-radio--indeterminate .za-radio__tick {
  border-color: var(--checked-icon-border-color);
  background: var(--checked-icon-background);
}
.za-radio--checked .za-radio__tick .za-icon, .za-radio--indeterminate .za-radio__tick .za-icon {
  color: var(--checked-tick-color);
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

.za-radio--disabled .za-radio__input {
  cursor: not-allowed;
}

.za-radio--disabled .za-radio__text {
  color: var(--disabled-text-color);
}

.za-radio--disabled .za-radio__tick {
  border-color: var(--disabled-icon-border-color);
  background: var(--disabled-icon-background);
}

.za-radio--disabled.za-radio--checked .za-radio__tick {
  border-color: var(--disabled-icon-border-color);
  background: var(--disabled-icon-background);
}
.za-radio--disabled.za-radio--checked .za-radio__tick .za-icon {
  color: var(--disabled-tick-color);
}

.za-radio-group {
  --group-spacing-vertical: var(--za-radio-group-group-spacing-vertical, 8px);
  --group-spacing-horizontal: var(--za-radio-group-group-spacing-horizontal, 24px);
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
}
.za-radio-group__inner {
  margin-right: calc(var(--group-spacing-horizontal) * -1);
  margin-bottom: calc(var(--group-spacing-vertical) * -1);
  line-height: 1;
}

.za-radio-group .za-radio {
  margin-right: var(--group-spacing-horizontal);
  margin-bottom: var(--group-spacing-vertical);
}
.za-radio-group--block {
  width: 100%;
}
.za-radio-group--block .za-radio-group__inner {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.za-radio-group--block .za-radio {
  -webkit-flex: 1 1;
      -ms-flex: 1 1;
          flex: 1 1;
}

.za-radio-group--button {
  --group-spacing-vertical: var(--za-radio-group-group-spacing-vertical, var(--za-padding-v-xs));
  --group-spacing-horizontal: var(--za-radio-group-group-spacing-horizontal, var(--za-padding-h-xs));
}
.za-radio-group--button.za-radio-group--button-compact .za-radio:not(:last-child) {
  /* prettier-ignore */
  margin-right: -1PX;
}
.za-radio-group--button.za-radio-group--button-compact .za-radio:first-child .za-button {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.za-radio-group--button.za-radio-group--button-compact .za-radio:last-child .za-button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.za-radio-group--button.za-radio-group--button-compact .za-radio:not(:first-child):not(:last-child) .za-button {
  border-radius: 0;
}
.za-radio-group--button.za-radio-group--button-compact .za-radio.za-radio--checked .za-button {
  z-index: 1;
}

.za-radio-group--list {
  display: block;
  overflow: visible;
}
.za-radio-group--list .za-radio-group__inner {
  margin-right: 0;
  margin-bottom: 0;
}

.za-radio-group--list .za-radio {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-right: 0;
  margin-bottom: 0;
}
.za-radio-group--list .za-radio .za-radio__text {
  margin-left: 0;
}

.za-radio-group--list .za-radio .za-radio__tick {
  --icon-border-width: var(--za-radio-icon-border-width, 0);
  background: transparent;
}
.za-radio-group--list .za-radio .za-radio__tick .za-icon {
  font-size: var(--icon-size);
}

.za-search-bar {
  --background: var(--za-search-bar-background, transparent);
  --height: var(--za-search-bar-height, 52px);
  --padding-horizontal: var(--za-search-bar-padding-horizontal, 16px);
  --input-padding-horizontal: var(--za-search-bar-input-padding-horizontal, 8px);
  --input-height: var(--za-search-bar-input-height, 36px);
  --input-background: var(--za-search-bar-input-background, rgba(118, 118, 128, 0.12));
  --input-font-size: var(--za-search-bar-input-font-size, var(--za-font-size-md));
  --input-placeholder-color: var(--za-search-bar-input-placeholder-color, #808084);
  --input-clear-icon-color: var(--za-search-bar-input-clear-icon-color, #8e8e92);
  --input-border-radius: var(--za-search-bar-input-border-radius, 10px);
  --cancel-font-size: var(--za-search-bar-cancel-font-size, var(--za-font-size-md));
  --cancel-color: var(--za-search-bar-cancel-color, var(--za-theme-primary));
  --cancel-margin-left: var(--za-search-bar-cancel-margin-left, 13px);
  --cancel-transition: var(--za-search-bar-cancel-transition, all 0.2s);
  --icon-margin-right: var(--za-search-bar-icon-margin-right, 6px);
  --icon-color: var(--za-search-bar-icon-color, #808084);
  background: transparent;
  background: var(--background);
}
.za-search-bar__form {
  height: var(--height);
  margin: 0 var(--padding-horizontal);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
}

.za-search-bar__content {
  -webkit-flex: 1 1;
      -ms-flex: 1 1;
          flex: 1 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 var(--input-padding-horizontal);
  height: var(--input-height);
  background: var(--input-background);
  overflow: hidden;
}
.za-search-bar__content .za-search-bar__icon {
  margin-right: var(--icon-margin-right);
  color: var(--icon-color);
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.za-search-bar .za-input {
  --placeholder-color: var(--za-input-placeholder-color, var(--input-placeholder-color));
  --clear-icon-color: var(--za-input-clear-icon-color, var(--input-clear-icon-color));
  -webkit-flex: 1 1;
      -ms-flex: 1 1;
          flex: 1 1;
  font-size: var(--input-font-size);
  background-color: transparent;
}
.za-search-bar .za-input input::-webkit-search-cancel-button {
  display: none;
}
.za-search-bar__cancel {
  font-size: var(--cancel-font-size);
  color: var(--cancel-color);
  margin-left: var(--cancel-margin-left);
  -webkit-transition: var(--cancel-transition);
  transition: var(--cancel-transition);
}

.za-search-bar--focus .za-search-bar__cancel {
  margin-right: 0;
}

.za-search-bar--radius .za-search-bar__content {
  border-radius: var(--input-border-radius);
}

.za-search-bar--round .za-search-bar__content {
  border-radius: 1000px;
  border-radius: var(--za-radius-round);
}

.za-select {
  --height: var(--za-select-height, 28px);
  --disabled-color: var(--za-select-disabled-color, var(--za-color-text-disabled));
  --placeholder-color: var(--za-select-placeholder-color, var(--za-color-text-placeholder));
  --arrow-color: var(--za-select-arrow-color, var(--za-arrow-color));
  --arrow-size: var(--za-select-arrow-size, var(--za-arrow-size));
  --arrow-width: var(--za-select-arrow-width, var(--za-arrow-width));
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}
.za-select__input {
  -webkit-flex: 1 1;
      -ms-flex: 1 1;
          flex: 1 1;
  position: relative;
  width: 100%;
  height: var(--height);
  line-height: var(--height);
}

.za-select--placeholder .za-select__input {
  color: var(--placeholder-color);
}

.za-select__arrow {
  margin-left: 5px;
  margin-top: calc(var(--arrow-size) / -2);
}
.za-select__arrow::after {
  display: inline-block;
  content: "";
  border-right: var(--arrow-width) solid var(--arrow-color);
  border-bottom: var(--arrow-width) solid var(--arrow-color);
  width: var(--arrow-size);
  height: var(--arrow-size);
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}

.za-select--disabled .za-select__input {
  color: var(--disabled-color);
}

.za-select--visible .za-select__arrow::after {
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.za-skeleton {
  --width: var(--za-skeleton-width, 100%);
  --height: var(--za-skeleton-height, 18px);
  --border-radius: var(--za-skeleton-border-radius, 2px);
  --margin: var(--za-skeleton-margin, 0);
  --background: var(--za-skeleton-background, rgba(190, 190, 190, 0.2));
  --animated-background: var(--za-skeleton-animated-background, rgba(129, 129, 129, 0.24));
  width: 100%;
  width: var(--width);
  height: 18px;
  height: var(--height);
  margin: 0;
  margin: var(--margin);
  background: rgba(190, 190, 190, 0.2);
  background: var(--background);
}
.za-skeleton--radius {
  border-radius: var(--border-radius);
}

.za-skeleton--rect {
  border-radius: 0;
}

.za-skeleton--circle {
  --width: var(--za-skeleton-width, 50px);
  --height: var(--za-skeleton-height, 50px);
  border-radius: 50%;
}

.za-skeleton--animated {
  background: -webkit-gradient(linear, left top, right top, color-stop(25%, var(--background)), color-stop(37%, var(--animated-background)), color-stop(63%, var(--background)));
  background: -webkit-linear-gradient(left, var(--background) 25%, var(--animated-background) 37%, var(--background) 63%);
  background: linear-gradient(90deg, var(--background) 25%, var(--animated-background) 37%, var(--background) 63%);
  background-size: 400% 100%;
  -webkit-animation: skeleton-loading 1.4s ease infinite;
          animation: skeleton-loading 1.4s ease infinite;
}

@-webkit-keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
.za-skeleton__title {
  --width: var(--za-skeleton-width, 45%);
  --height: var(--za-skeleton-height, 32px);
  --margin: var(--za-skeleton-margin, 16px 0);
}

.za-skeleton__paragraph .za-skeleton__line {
  --margin: var(--za-skeleton-margin, 12px 0);
}
.za-skeleton__paragraph .za-skeleton__line:last-of-type {
  width: 65%;
}

.za-slider {
  --line-size: var(--za-slider-line-size, 4px);
  --line-border-radius: var(--za-slider-line-border-radius, 2px);
  --line-background: var(--za-slider-line-background, rgba(120, 120, 128, 0.2));
  --line-active-background: var(--za-slider-line-active-background, var(--za-theme-primary));
  --dot-size: var(--za-slider-dot-size, 10px);
  --dot-background: var(--za-slider-dot-background, var(--za-background-color));
  --dot-border-color: var(--za-slider-dot-border-color, rgba(120, 120, 128, 0.2));
  --dot-border-width: var(--za-slider-dot-border-width, 2px);
  --dot-active-border-color: var(--za-slider-dot-active-border-color, var(--za-theme-primary));
  --knob-size: var(--za-slider-knob-size, 28px);
  --knob-size-small: var(--za-slider-knob-size-small, 20px);
  --knob-background: var(--za-slider-knob-background, #fff);
  --knob-box-shadow: var(--za-slider-knob-box-shadow, 0 1px 3px rgba(0, 0, 0, 0.4));
  --mark-font-size: var(--za-slider-mark-font-size, 15px);
  --mark-text-color: var(--za-slider-mark-text-color, var(--za-theme-primary));
  --mark-spacing: var(--za-slider-mark-spacing, 15px);
  --disabled-opacity: var(--za-slider-disabled-opacity, var(--za-opacity-disabled));
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
}
.za-slider__content {
  -webkit-flex: 1 1;
      -ms-flex: 1 1;
          flex: 1 1;
  position: relative;
  margin: calc(var(--knob-size) / 2) calc(var(--knob-size) / 2);
}

.za-slider__line {
  -webkit-flex: 1 1;
      -ms-flex: 1 1;
          flex: 1 1;
  position: relative;
  height: var(--line-size);
  background: var(--line-background);
  border-radius: var(--line-border-radius);
  cursor: pointer;
}
.za-slider__line .za-slider__line__bg {
  height: 100%;
  background: var(--line-active-background);
  border-radius: var(--line-border-radius);
}

.za-slider__dot {
  position: absolute;
  width: var(--dot-size);
  height: var(--dot-size);
  margin-top: calc((var(--dot-size) + var(--line-size)) / -2);
  margin-left: calc(var(--dot-size) / -2);
  background: var(--dot-background);
  border: var(--dot-border-width) solid var(--dot-border-color);
  border-radius: 50%;
  cursor: pointer;
}
.za-slider__dot--active {
  border-color: var(--dot-active-border-color);
}

.za-slider__knob {
  position: absolute;
  left: 0;
  margin-top: calc((var(--knob-size) + var(--line-size)) / -2);
  margin-left: calc(var(--knob-size) / -2);
  width: var(--knob-size);
  height: var(--knob-size);
  border-radius: 50%;
  background: var(--knob-background);
  -webkit-box-shadow: var(--knob-box-shadow);
          box-shadow: var(--knob-box-shadow);
  -ms-touch-action: none;
      touch-action: none;
  cursor: pointer;
}
.za-slider__knob .za-tooltip {
  display: block;
}
.za-slider__knob .za-slider__knob__shadow {
  width: var(--knob-size);
  height: var(--knob-size);
}

.za-slider__marks {
  position: absolute;
  top: var(--mark-spacing);
  left: 0;
  right: 0;
}
.za-slider__marks .za-slider__mark {
  position: absolute;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  font-size: var(--mark-font-size);
  color: var(--mark-text-color);
}

.za-slider--marked {
  --knob-size: var(--za-slider-knob-size, var(--knob-size-small));
}

.za-slider--disabled {
  cursor: not-allowed;
  opacity: var(--disabled-opacity);
}

.za-slider--vertical {
  -webkit-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  width: auto;
  height: 100%;
  -webkit-align-items: initial;
      -ms-flex-align: initial;
          align-items: initial;
}
.za-slider--vertical .za-slider__line {
  width: var(--line-size);
  position: absolute;
  top: 0;
  height: 100%;
}
.za-slider--vertical .za-slider__line .za-slider__line__bg {
  position: absolute;
  bottom: 0;
  width: var(--line-size);
}

.za-slider--vertical .za-slider__dot {
  margin-bottom: calc(var(--dot-size) / -2);
  margin-left: calc((var(--dot-size) - var(--line-size)) / -2);
}

.za-slider--vertical .za-slider__knob {
  margin-top: 0;
  margin-bottom: calc(var(--knob-size) / -2);
  margin-left: calc((var(--knob-size) - var(--line-size)) / -2);
}

.za-slider--vertical.za-slider--marked .za-slider__marks {
  top: 0;
  left: var(--mark-spacing);
  height: 100%;
}

.za-slider--vertical.za-slider--marked .za-slider__mark {
  -webkit-transform: translateY(50%);
      -ms-transform: translateY(50%);
          transform: translateY(50%);
}

.za-stepper {
  --height: var(--za-stepper-height, 28px);
  --input-width: var(--za-stepper-input-width, 56px);
  --input-background: var(--za-stepper-input-background, transparent);
  --input-border-width: var(--za-stepper-input-border-width, 1px);
  --input-border-color: var(--za-stepper-input-border-color, transparent);
  --input-border-radius: var(--za-stepper-input-border-radius, var(--za-radius-md));
  --input-text-color: var(--za-stepper-input-text-color, var(--za-color-text));
  --input-font-size: var(--za-stepper-input-font-size, var(--za-font-size-md));
  --input-disabled-text-color: var(--za-stepper-input-disabled-text-color, var(--za-color-text-disabled));
  --input-disabled-opacity: var(--za-stepper-input-disabled-opacity, var(--za-opacity-disabled));
  --input-margin: var(--za-stepper-input-margin, 0 4px);
  --input-padding: var(--za-stepper-input-padding, 0 8px);
  --icon-font-size: var(--za-stepper-icon-font-size, 12px);
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.za-stepper .za-input input {
  height: 100%;
  text-align: center;
  -moz-appearance: textfield;
}
.za-stepper .za-input input::-webkit-outer-spin-button, .za-stepper .za-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.za-stepper .za-input--disabled input {
  color: var(--input-text-color);
  -webkit-text-fill-color: var(--input-text-color);
  cursor: auto;
}

.za-stepper .za-input__content {
  height: 100%;
  -webkit-flex: 1 1;
      -ms-flex: 1 1;
          flex: 1 1;
}

.za-stepper .za-custom-input--disabled__virtual-input {
  color: var(--input-text-color);
  -webkit-text-fill-color: var(--input-text-color);
  cursor: auto;
}

.za-stepper .za-custom-input__content {
  height: 100%;
  -webkit-flex: 1 1;
      -ms-flex: 1 1;
          flex: 1 1;
}

.za-stepper .za-custom-input__virtual-input {
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.za-stepper__sub, .za-stepper__plus {
  width: var(--height);
  padding: 0;
}
.za-stepper__sub .za-icon, .za-stepper__plus .za-icon {
  font-size: var(--icon-font-size);
}

.za-stepper__input {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  width: var(--input-width);
  height: var(--height);
  margin: var(--input-margin);
  padding: var(--input-padding);
  font-size: var(--input-font-size);
  background: var(--input-background);
  color: var(--input-text-color);
  text-align: center;
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: 0;
  outline: 0;
  -webkit-appearance: none;
}

.za-stepper--disabled .za-stepper__input input {
  color: var(--input-disabled-text-color);
  -webkit-text-fill-color: var(--input-disabled-text-color);
  opacity: var(--input-disabled-opacity);
}

.za-stepper--radius .za-stepper__input {
  border-radius: var(--input-border-radius);
}

.za-stepper--circle .za-stepper__input {
  border-radius: var(--height);
}

.za-stepper--lg {
  --height: var(--za-stepper-height, 36px);
  --input-width: var(--za-stepper-input-width, 72px);
  --input-margin: var(--za-stepper-input-margin, 0 6px);
  --input-padding: var(--za-stepper-input-padding, 0 8px);
  --icon-font-size: var(--za-stepper-icon-font-size, 14px);
}

.za-swipe-action {
  --background: var(--za-swipe-action-background, #fff);
  position: relative;
  overflow: hidden;
  -ms-touch-action: none;
      touch-action: none;
}
.za-swipe-action__content {
  position: relative;
  background: var(--background);
}

.za-swipe-action__actions {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  height: 100%;
  top: 0;
}
.za-swipe-action__actions--left {
  left: 0;
}

.za-swipe-action__actions--right {
  right: 0;
}

.za-swipe-action .za-button {
  font-size: 14px;
}

.za-swipe-action-item__item {
  height: 100%;
}

.za-switch {
  --width: var(--za-switch-width, 52px);
  --height: var(--za-switch-height, 32px);
  --background: var(--za-switch-background, rgba(120, 120, 128, 0.16));
  --border-radius: var(--za-switch-border-radius, var(--za-radius-round));
  --transition: var(--za-switch-transition, all 0.3s);
  --checked-background: var(--za-switch-checked-background, var(--za-theme-primary));
  --knob-background: var(--za-switch-knob-background, #fff);
  --knob-size: var(--za-switch-knob-size, 28px);
  --knob-box-shadow: var(--za-switch-knob-box-shadow, 0 3px 1px rgba(0, 0, 0, 0.06), 0 3px 8px rgba(0, 0, 0, 0.15));
  --knob-border-color: var(--za-switch-knob-border-color, rgba(0, 0, 0, 0.04));
  --knob-border-width: var(--za-switch-knob-border-width, 0.5px);
  --knob-transition: var(--za-switch-knob-transition, transform 0.3s cubic-bezier(0.45, 1, 0.4, 1), transform 0.3s cubic-bezier(0.4, 0.4, 0.25, 1.35));
}
.za-switch__input {
  position: relative;
  width: var(--width);
  height: var(--height);
  border: calc((var(--height) - var(--knob-size)) / 2) solid transparent;
  border-radius: var(--border-radius);
  background: var(--background);
  vertical-align: middle;
  -webkit-transition: var(--transition);
  transition: var(--transition);
  outline: 0;
  -webkit-appearance: none;
}
.za-switch__input:before, .za-switch__input:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: var(--knob-size);
  border-radius: var(--border-radius);
}
.za-switch__input:before {
  width: calc(var(--width) - var(--height) + var(--knob-size));
  -webkit-transition: var(--knob-transition);
  transition: var(--knob-transition);
}
.za-switch__input:after {
  width: var(--knob-size);
  background: var(--knob-background);
  border: var(--knob-border-width) solid var(--knob-border-color);
  -webkit-box-shadow: var(--knob-box-shadow);
          box-shadow: var(--knob-box-shadow);
  -webkit-transition: var(--knob-transition);
  transition: var(--knob-transition);
}
.za-switch__input:checked {
  background: var(--checked-background);
}
.za-switch__input:checked:after {
  -webkit-transform: translateX(calc(var(--width) - var(--height)));
      -ms-transform: translateX(calc(var(--width) - var(--height)));
          transform: translateX(calc(var(--width) - var(--height)));
}

.za-switch--disabled .za-switch__input {
  cursor: not-allowed;
  opacity: 0.5;
  opacity: var(--za-opacity-disabled);
}

.za-tabs {
  --font-size: var(--za-tabs-font-size, var(--za-font-size-md));
  --color: var(--za-tabs-color, var(--za-color-text));
  --color-disabled: var(--za-tabs-color-disabled, var(--za-color-text-disabled));
  --height: var(--za-tabs-height, 45px);
  --active-color: var(--za-tabs-active-color, var(--za-theme-primary));
  --active-text-color: var(--za-tabs-active-text-color, var(--za-color-text));
  --active-line-height: var(--za-tabs-active-line-height, 2px);
  --padding-horizontal: var(--za-tabs-padding-horizontal, var(--za-padding-h-lg));
  --padding-vertical: var(--za-tabs-padding-vertical, var(--za-padding-v-md));
}
.za-tabs__header {
  position: relative;
  overflow: hidden;
}

.za-tabs__tablist {
  position: relative;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.za-tabs__panel {
  display: none;
  position: relative;
  -webkit-transition: height 0.3s;
  transition: height 0.3s;
  height: 100%;
}
.za-tabs__panel--active {
  display: block;
}

.za-tabs__tab {
  -webkit-flex: 1 1;
      -ms-flex: 1 1;
          flex: 1 1;
  text-align: center;
  color: var(--color);
  font-size: var(--font-size);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.za-tabs__tab--disabled {
  color: var(--color-disabled);
  cursor: not-allowed;
}

.za-tabs__tab--active {
  color: var(--active-text-color);
}

.za-tabs__line {
  position: absolute;
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  background-color: var(--active-color);
}
.za-tabs__line__inner {
  display: block;
  margin: auto;
  height: 100%;
  background-color: var(--active-color);
}

.za-tabs--scroll .za-tabs__tablist::-webkit-scrollbar {
  display: none;
}

.za-tabs--top, .za-tabs--bottom, .za-tabs--horizontal {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.za-tabs--top .za-tabs__header, .za-tabs--bottom .za-tabs__header, .za-tabs--horizontal .za-tabs__header {
  width: 100%;
}

.za-tabs--top .za-tabs__tablist, .za-tabs--bottom .za-tabs__tablist, .za-tabs--horizontal .za-tabs__tablist {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: var(--height);
  line-height: var(--height);
}

.za-tabs--top .za-tabs__line, .za-tabs--bottom .za-tabs__line, .za-tabs--horizontal .za-tabs__line {
  height: var(--active-line-height);
  left: 0;
}

.za-tabs--top.za-tabs--scroll .za-tabs__tablist, .za-tabs--bottom.za-tabs--scroll .za-tabs__tablist, .za-tabs--horizontal.za-tabs--scroll .za-tabs__tablist {
  overflow-x: auto;
}

.za-tabs--top.za-tabs--scroll .za-tabs__tab, .za-tabs--bottom.za-tabs--scroll .za-tabs__tab, .za-tabs--horizontal.za-tabs--scroll .za-tabs__tab {
  overflow: visible;
  padding: 0 var(--padding-horizontal);
}

.za-tabs--left, .za-tabs--right, .za-tabs--vertical {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}
.za-tabs--left .za-tabs__tablist, .za-tabs--right .za-tabs__tablist, .za-tabs--vertical .za-tabs__tablist {
  height: 100%;
}

.za-tabs--left .za-tabs__tab, .za-tabs--right .za-tabs__tab, .za-tabs--vertical .za-tabs__tab {
  text-align: center;
  padding: var(--padding-vertical) var(--padding-horizontal);
}

.za-tabs--left .za-tabs__line, .za-tabs--right .za-tabs__line, .za-tabs--vertical .za-tabs__line {
  width: var(--active-line-height);
  top: 0;
}

.za-tabs--left .za-tabs__body, .za-tabs--right .za-tabs__body, .za-tabs--vertical .za-tabs__body {
  -webkit-flex: 1 1;
      -ms-flex: 1 1;
          flex: 1 1;
  position: relative;
}

.za-tabs--left.za-tabs--scroll .za-tabs__tablist, .za-tabs--right.za-tabs--scroll .za-tabs__tablist, .za-tabs--vertical.za-tabs--scroll .za-tabs__tablist {
  overflow-y: auto;
}

.za-tabs--right .za-tabs__header, .za-tabs--bottom .za-tabs__header {
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}

.za-tabs--left .za-tabs__header:after, .za-tabs--vertical .za-tabs__header:after {
  content: "";
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 0;
  border: 0 solid rgba(60, 60, 67, 0.36);
  border: 0 solid var(--za-border-color);
  /* prettier-ignore */
  border-right-width: 1PX;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .za-tabs--left .za-tabs__header:after, .za-tabs--vertical .za-tabs__header:after {
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  .za-tabs--left .za-tabs__header:after, .za-tabs--vertical .za-tabs__header:after {
    width: 300%;
    height: 300%;
    -webkit-transform: scale(0.3333);
        -ms-transform: scale(0.3333);
            transform: scale(0.3333);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}

.za-tabs--left .za-tabs__line, .za-tabs--vertical .za-tabs__line {
  right: 0;
}

.za-tabs--right .za-tabs__header:after {
  content: "";
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 0;
  border: 0 solid rgba(60, 60, 67, 0.36);
  border: 0 solid var(--za-border-color);
  /* prettier-ignore */
  border-left-width: 1PX;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .za-tabs--right .za-tabs__header:after {
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  .za-tabs--right .za-tabs__header:after {
    width: 300%;
    height: 300%;
    -webkit-transform: scale(0.3333);
        -ms-transform: scale(0.3333);
            transform: scale(0.3333);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}

.za-tabs--right .za-tabs__line {
  left: 0;
}

.za-tabs--top .za-tabs__header:after, .za-tabs--horizontal .za-tabs__header:after {
  content: "";
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 0;
  border: 0 solid rgba(60, 60, 67, 0.36);
  border: 0 solid var(--za-border-color);
  /* prettier-ignore */
  border-bottom-width: 1PX;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .za-tabs--top .za-tabs__header:after, .za-tabs--horizontal .za-tabs__header:after {
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  .za-tabs--top .za-tabs__header:after, .za-tabs--horizontal .za-tabs__header:after {
    width: 300%;
    height: 300%;
    -webkit-transform: scale(0.3333);
        -ms-transform: scale(0.3333);
            transform: scale(0.3333);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}

.za-tabs--top .za-tabs__line, .za-tabs--horizontal .za-tabs__line {
  bottom: 0;
}

.za-tabs--bottom .za-tabs__header:after {
  content: "";
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 0;
  border: 0 solid rgba(60, 60, 67, 0.36);
  border: 0 solid var(--za-border-color);
  /* prettier-ignore */
  border-top-width: 1PX;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .za-tabs--bottom .za-tabs__header:after {
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  .za-tabs--bottom .za-tabs__header:after {
    width: 300%;
    height: 300%;
    -webkit-transform: scale(0.3333);
        -ms-transform: scale(0.3333);
            transform: scale(0.3333);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}

.za-tabs--bottom .za-tabs__line {
  top: 0;
}

.za-toast {
  --text-color: var(--za-toast-text-color, var(--za-color-text-inverse));
  --font-size: var(--za-toast-font-size, 13px);
  --border-radius: var(--za-toast-border-radius, 6px);
  --background: var(--za-toast-background, rgba(0, 0, 0, var(--za-opacity-toast)));
  --icon-color: var(--za-toast-icon-color, var(--za-color-text-inverse));
  --icon-size: var(--za-toast-icon-size, 50px);
  max-width: 85%;
  color: #fff;
  color: var(--text-color);
  font-size: 13px;
  font-size: var(--font-size);
  line-height: 1.5;
  position: relative;
  border-radius: 6px;
  border-radius: var(--border-radius);
  background: rgba(0, 0, 0, 0.8);
  background: var(--background);
  margin: 0 32px;
  text-align: center;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.za-toast__wrapper {
  pointer-events: none;
}

.za-toast--text {
  padding: 12px 16px;
  padding: var(--za-padding-v-md) var(--za-padding-h-md);
  pointer-events: all;
}

.za-toast--icon {
  padding: 15px;
  pointer-events: all;
}
.za-toast--icon .za-toast__text {
  min-width: 70px;
  margin-top: 12px;
  margin-top: var(--za-padding-v-md);
}

.za-toast__text {
  word-break: break-all;
}

.za-toast__icon {
  min-width: 50px;
  min-height: 50px;
  color: var(--icon-color);
  font-size: var(--icon-size);
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.za-toast__icon .za-icon {
  --font-size: var(--za-icon-font-size, var(--icon-size));
}

.za-tooltip {
  --font-size: var(--za-tooltip-font-size, 12px);
  --color: var(--za-tooltip-color, var(--za-color-text-inverse));
  --background: var(--za-tooltip-background, rgba(0, 0, 0, 0.8));
  --zindex: var(--za-tooltip-zindex, 1700);
  --spacing: var(--za-tooltip-spacing, 3px);
  --padding-vertical: var(--za-tooltip-padding-vertical, var(--za-padding-v-xs));
  --padding-horizontal: var(--za-tooltip-padding-horizontal, var(--za-padding-h-xs));
  --arrow-size: var(--za-tooltip-arrow-size, 4px);
  --arrow-horizontal-offset: var(--za-tooltip-arrow-horizontal-offset, 10px);
  --arrow-vertical-offset: var(--za-tooltip-arrow-vertical-offset, 6px);
  padding: 6px 8px;
  padding: var(--padding-vertical) var(--padding-horizontal);
  background: rgba(0, 0, 0, 0.8);
  background: var(--background);
  border-radius: 4px;
  font-size: 12px;
  font-size: var(--font-size);
  color: #fff;
  color: var(--color);
  z-index: 1700;
  z-index: var(--zindex);
}
.za-tooltip[data-popper-placement^=right] {
  margin-left: var(--spacing);
}
.za-tooltip[data-popper-placement^=right] .za-popper__arrow {
  left: calc(var(--arrow-size) * -1);
  border-width: var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;
  border-right-color: var(--background);
}

.za-tooltip[data-popper-placement^=top] {
  margin-top: calc(var(--spacing) * -1);
}
.za-tooltip[data-popper-placement^=top] .za-popper__arrow {
  bottom: calc(var(--arrow-size) * -1);
  border-width: var(--arrow-size) var(--arrow-size) 0;
  border-top-color: var(--background);
}

.za-tooltip[data-popper-placement^=bottom] {
  margin-top: var(--spacing);
}
.za-tooltip[data-popper-placement^=bottom] .za-popper__arrow {
  top: calc(var(--arrow-size) * -1);
  border-width: 0 var(--arrow-size) var(--arrow-size) var(--arrow-size);
  border-bottom-color: var(--background);
}

.za-tooltip[data-popper-placement^=left] {
  margin-left: calc(var(--spacing) * -1);
}
.za-tooltip[data-popper-placement^=left] .za-popper__arrow {
  right: calc(var(--arrow-size) * -1);
  border-width: var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);
  border-left-color: var(--background);
}

.za-tooltip[data-popper-placement=top-start] .za-popper__arrow, .za-tooltip[data-popper-placement=bottom-start] .za-popper__arrow {
  left: var(--arrow-horizontal-offset);
}

.za-tooltip[data-popper-placement=top-end] .za-popper__arrow, .za-tooltip[data-popper-placement=bottom-end] .za-popper__arrow {
  right: var(--arrow-horizontal-offset);
}

.za-tooltip[data-popper-placement=left-start] .za-popper__arrow, .za-tooltip[data-popper-placement=right-start] .za-popper__arrow {
  top: var(--arrow-vertical-offset);
}

.za-tooltip[data-popper-placement=left-end] .za-popper__arrow, .za-tooltip[data-popper-placement=right-end] .za-popper__arrow {
  bottom: var(--arrow-vertical-offset);
}

.za-tooltip .za-popper__arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.za-wheel {
  --item-rows: var(--za-wheel-item-rows, 5);
  --item-height: var(--za-wheel-item-height, 34px);
  --item-font-size: var(--za-wheel-item-font-size, 20px);
  --text-color: var(--za-wheel-text-color, var(--za-color-text));
  --disabled-text-color: var(--za-wheel-disabled-text-color, var(--za-color-text-disabled));
  display: block;
  position: relative;
  width: 100%;
  height: calc(5 * 34px);
  height: calc(var(--item-rows) * var(--item-height));
  overflow: hidden;
}
.za-wheel__content {
  margin-top: calc(var(--item-height) * 2);
}

.za-wheel__item {
  text-align: center;
  font-size: var(--item-font-size);
  line-height: var(--item-height);
  height: var(--item-height);
  color: var(--text-color);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.za-wheel__item--disabled {
  color: var(--disabled-text-color);
}

.za-tab-bar {
  --font-size: var(--za-tab-bar-font-size, 12px);
  --background: var(--za-tab-bar-background, #fff);
  --height: var(--za-tab-bar-height, 50px);
  --color: var(--za-tab-bar-color, var(--za-color-text));
  --active-color: var(--za-tab-bar-active-color, var(--za-theme-primary));
  background: #fff;
  background: var(--background);
}
.za-tab-bar__wrapper {
  min-height: var(--height);
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  overflow: hidden;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.za-tab-bar__item {
  -webkit-flex: 1 1;
      -ms-flex: 1 1;
          flex: 1 1;
}
.za-tab-bar__item .za-tab-bar__title {
  font-size: var(--font-size);
  line-height: 1;
  margin-top: 2px;
  color: var(--color);
}

.za-tab-bar__item .za-tab-bar__icon {
  display: inline-block;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  font-size: 18px;
}

.za-tab-bar__item .za-badge .za-badge__content {
  --top: 6px;
}

.za-tab-bar__item--active .za-tab-bar__title {
  color: var(--active-color);
}

.za-tab-bar__item--active .za-icon {
  color: var(--active-color);
}

.za-image-preview {
  --footer-padding: var(--za-image-preview-footer-padding, var(--za-padding-v-lg) var(--za-padding-h-lg));
  --pagination-text-color: var(--za-image-preview-pagination-text-color, var(--za-color-text-inverse));
  --pagination-font-size: var(--za-image-preview-pagination-font-size, var(--za-font-size-lg));
  padding: 0;
}
.za-image-preview__title {
  text-align: center;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  height: 60px;
  line-height: 60px;
  font-size: var(--title-font-size);
  font-weight: var(--title-font-weight);
  color: #fff;
  color: var(--za-color-text-inverse);
}

.za-image-preview__content {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  width: 100%;
}

.za-image-preview__item img {
  max-width: 100%;
  max-height: 100%;
  display: none;
}

.za-image-preview__loading {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 10;
}

.za-image-preview__footer {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
  padding: var(--footer-padding);
}

.za-image-preview__pagination {
  -webkit-flex: 1 1;
      -ms-flex: 1 1;
          flex: 1 1;
  text-align: right;
  color: var(--pagination-text-color);
  font-size: var(--pagination-font-size);
}

.za-image-preview .za-popup {
  width: 100%;
  height: 100%;
}
.za-image-preview .za-carousel {
  height: 100%;
  width: 100%;
}
.za-image-preview .za-carousel__items {
  height: 100%;
}

.za-pinch-zoom {
  -ms-touch-action: none;
      touch-action: none;
  min-height: 100%;
}
.za-pinch-zoom > * {
  -webkit-transform: scale(var(--scale)) translate(var(--x), var(--y));
      -ms-transform: scale(var(--scale)) translate(var(--x), var(--y));
          transform: scale(var(--scale)) translate(var(--x), var(--y));
  -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
          transform-origin: 0 0;
}

.za-cascader {
  --background: var(--za-cascader-background, #fff);
  --option-text-color: var(--za-cascader-option-text-color, var(--za-color-text));
  --option-active-text-color: var(--za-cascader-option-active-text-color, var(--za-theme-primary));
  --tab-text-color: var(--za-cascader-tab-text-color, var(--za-color-text-placeholder));
  --tab-active-text-color: var(--za-cascader-tab-active-text-color, var(--za-theme-primary));
  --option-font-size: var(--za-cascader-option-font-size, var(--za-font-size-sm));
  --option-height: var(--za-cascader-option-height, 44px);
  --options-height: var(--za-cascader-options-height, 300px);
  --padding: var(--za-cascader-padding, var(--za-padding-v-sm));
  ---background: var(--za-cascader--background, var(--background));
  ---option-text-color: var(--za-cascader--option-text-color, var(--option-text-color));
  ---option-active-text-color: var(--za-cascader--option-active-text-color, var(--option-active-text-color));
  ---tab-text-color: var(--za-cascader--tab-text-color, var(--tab-text-color));
  ---tab-active-text-color: var(--za-cascader--tab-active-text-color, var(--tab-active-text-color));
  ---option-font-size: var(--za-cascader--option-font-size, var(--option-font-size));
  ---option-height: var(--za-cascader--option-height, var(--option-height));
  ---options-height: var(--za-cascader--options-height, var(--options-height));
  ---padding: var(--za-cascader--padding, var(--padding));
}
.za-cascader .za-cascader-view {
  --background: var(--za-cascader-view-background, var(---background));
  --option-text-color: var(--za-cascader-view-option-text-color, var(---option-text-color));
  --option-active-text-color: var(--za-cascader-view-option-active-text-color, var(---option-active-text-color));
  --tab-text-color: var(--za-cascader-view-tab-text-color, var(---tab-text-color));
  --tab-active-text-color: var(--za-cascader-view-tab-active-text-color, var(---tab-active-text-color));
  --option-font-size: var(--za-cascader-view-option-font-size, var(---option-font-size));
  --option-height: var(--za-cascader-view-option-height, var(---option-height));
  --options-height: var(--za-cascader-view-options-height, var(---options-height));
  --padding: var(--za-cascader-view-padding, var(---padding));
}

.za-cascader-view {
  --background: var(--za-cascader-view-background, #fff);
  --padding: var(--za-cascader-view-padding, var(--za-padding-v-sm));
  --tab-text-color: var(--za-cascader-view-tab-text-color, var(--za-color-text-placeholder));
  --tab-active-text-color: var(--za-cascader-view-tab-active-text-color, var(--za-theme-primary));
  --options-height: var(--za-cascader-view-options-height, auto);
  --option-text-color: var(--za-cascader-view-option-text-color, var(--za-color-text));
  --option-active-text-color: var(--za-cascader-view-option-active-text-color, var(--za-theme-primary));
  --option-font-size: var(--za-cascader-view-option-font-size, var(--za-font-size-sm));
  --option-height: var(--za-cascader-view-option-height, 44px);
  background: #fff;
  background: var(--background);
}
.za-cascader-view__tab-text--unselected {
  color: var(--tab-text-color);
}

.za-cascader-view__content {
  height: var(--options-height);
  overflow-y: scroll;
}
.za-cascader-view__content .za-list-item .za-list-item__wrapper {
  min-height: var(--option-height);
}

.za-cascader-view__content .za-list-item .za-list-item__inner {
  line-height: calc(var(--option-height) - var(--padding) * 2);
}

.za-cascader-view__content-item {
  padding-left: 20px;
  background: var(--background);
  font-size: var(--option-font-size);
  color: var(--option-color-text);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.za-cascader-view__content-item--active {
  color: var(--option-active-text-color);
}

.za-cascader-view-tabs .za-tabs__tab {
  -webkit-flex: none;
      -ms-flex: none;
          flex: none;
  font-size: var(--option-font-size);
}
.za-cascader-view-tabs .za-tabs__tab--active {
  color: var(--tab-active-text-color);
}

.za-cascader-view-tabs .za-tabs .za-carousel__items {
  -webkit-transition-duration: 0;
          transition-duration: 0;
}

.za-image {
  --background: var(--za-image-background, #fafafa);
  --text-color: var(--za-image-text-color, var(--za-color-text));
  --font-size: var(--za-image-font-size, 12px);
  --radius: var(--za-image-radius, var(--za-radius-lg));
  --width: var(--za-image-width, 100%);
  --height: var(--za-image-height, 100%);
  position: relative;
  display: inline-block;
  width: 100%;
  width: var(--width);
  height: 100%;
  height: var(--height);
  overflow: hidden;
}
.za-image--radius {
  border-radius: var(--radius);
}

.za-image--circle {
  border-radius: 50%;
}

.za-image__img {
  display: block;
  width: 100%;
  height: 100%;
}

.za-image__loading, .za-image__fallback {
  position: absolute;
  left: 0;
  top: 0;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  text-align: center;
  background: var(--background);
  color: var(--text-color);
  font-size: var(--font-size);
}

.za-rate {
  --size: var(--za-rate-size, 20px);
  --color: var(--za-rate-color, #eee);
  --active-color: var(--za-rate-active-color, #fadb14);
  --gap: var(--za-rate-gap, 4px);
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  cursor: pointer;
}
.za-rate__item {
  line-height: 1;
  position: relative;
  color: var(--color);
  font-size: var(--size);
}
.za-rate__item:not(:last-child) {
  margin-right: var(--gap);
}
.za-rate__item .za-icon {
  --color: var(--za-icon-color, var(--color));
  font-size: var(--size);
}
.za-rate__item--active {
  color: var(--active-color);
}
.za-rate__item--active .za-icon {
  --color: var(--za-icon-color, var(--active-color));
}

.za-rate__item--half .za-rate__character__half {
  color: var(--active-color);
}
.za-rate__item--half .za-rate__character__half .za-icon {
  color: var(--active-color);
}

.za-rate__character__half {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.za-rate--readonly {
  cursor: default;
}

.za-water-mark {
  position: relative;
}

.za-grid {
  --border-color: var(--za-grid-border-color, var(--za-border-color));
  --item-background: var(--za-grid-item-background, var(--za-background-color));
  --item-active-background: var(--za-grid-item-active-background, var(--za-background-active));
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  position: relative;
}
.za-grid--bordered:after {
  content: "";
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 0;
  border: 0 solid var(--border-color);
  /* prettier-ignore */
  border-top-width: 1PX;
  /* prettier-ignore */
  border-left-width: 1PX;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .za-grid--bordered:after {
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  .za-grid--bordered:after {
    width: 300%;
    height: 300%;
    -webkit-transform: scale(0.3333);
        -ms-transform: scale(0.3333);
            transform: scale(0.3333);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}
.za-grid--bordered::after {
  z-index: 1;
}
.za-grid--bordered .za-grid-item .za-grid-item__content:after {
  content: "";
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 0;
  border: 0 solid var(--border-color);
  /* prettier-ignore */
  border-right-width: 1PX;
  /* prettier-ignore */
  border-bottom-width: 1PX;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .za-grid--bordered .za-grid-item .za-grid-item__content:after {
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  .za-grid--bordered .za-grid-item .za-grid-item__content:after {
    width: 300%;
    height: 300%;
    -webkit-transform: scale(0.3333);
        -ms-transform: scale(0.3333);
            transform: scale(0.3333);
    -webkit-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
            transform-origin: 0 0;
    border-radius: 0;
  }
}
.za-grid--bordered .za-grid-item .za-grid-item__content::after {
  z-index: 1;
}

.za-grid--bordered .za-grid-item.za-grid-item--horizontal-bordered .za-grid-item__content::after {
  border-left-width: 1px;
  border-right-width: 1px;
}

.za-grid--bordered .za-grid-item.za-grid-item--vertical-bordered .za-grid-item__content::after {
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.za-grid--square .za-grid-item {
  height: 0;
}
.za-grid--square .za-grid-item .za-grid-item__content {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

.za-grid-item {
  position: relative;
}
.za-grid-item--clickable .za-grid-item__content:active {
  background: var(--item-active-background);
}

.za-grid-item__content {
  height: 100%;
  background: var(--item-background);
  position: relative;
  -webkit-transition: 200ms;
  transition: 200ms;
}

.za-safe-area {
  width: 100%;
  display: block;
}
.za-safe-area__position-top {
  padding-top: env(safe-area-inset-top);
  padding-top: constant(safe-area-inset-top);
}

.za-safe-area__position-bottom {
  padding-bottom: env(safe-area-inset-bottom);
  padding-bottom: constant(safe-area-inset-bottom);
}