@charset "UTF-8";
/* Global Variables
  - 以下定義通用的字體字級和一些不變的元件數值...等資訊
  - 特殊符號請用跳脫字元的方式命名，例如： .opacity\[50\] 或是 .opacity\/50
-------------------------------------------------- */
:root {
  --one-font-family: Roboto, "Open Sans", Arial, Verdana, Tahoma, Helvetica, "Noto Sans TC", "PingFang TC", "Lantinghei TC", 微軟正黑體, "Microsoft JhengHei", 文泉驛正黑, "WenQuanYi Zen Hei", sans-serif !important;
  --one-base-font-size: 1rem;
  --text-13: 0.8125rem;
  --text-14: 0.875rem;
  --text-15: 0.9375rem;
  --text-16: 1rem;
  --text-17: 1.0625rem;
  --text-18: 1.125rem;
  --text-19: 1.1875rem;
  --text-20: 1.25rem;
  --text-22: 1.375rem;
  --text-24: 1.5rem;
  --text-32: 2rem;
  --text-36: 2.25rem;
  --text-40: 2.5rem;
  --z-index-modal: 10000;
  --z-index-top: 9999;
  --z-index-mid: 500;
  --z-index-low: 100;
  --z-index-dropdown: 20;
  --z-index-default: 1;
  --z-index-below: -1;
}

/* Themes
=============================
> A. Light mode (Default)
B. Dark mode
============================= */
html, .light, html.light {
  /* =============================
  > 1. 基礎樣式
  2. 共用設定
  3. Header、Avatar、主選單、Footer
  4. 按鈕
  5. 下拉 / 下拉選單
  6. Dialog / Sheet
  7. Input
  8. Switch
  9. Captcha
  10. Tag
  11. Table
  12. Content Placeholder
  13. Loading/Progress Indicator
  14. Alert
  ============================= */
  --text-primary: hsl(0, 0%, 0%);
  --text-secondary: hsl(0, 0%, 18%);
  --text-tertiary: hsl(0, 0%, 35%);
  --text-quaternary: hsl(0, 0%, 44%);
  --text-quinary: hsl(0, 0%, 53%);
  --text-senary: hsl(0, 0%, 68%);
  --text-content: hsl(0, 0%, 18%);
  --text-hint: hsl(205, 69%, 31%);
  --text-warning: hsl(23, 83%, 53%);
  --text-error: hsl(358, 66%, 45%);
  --text-dynamic: hsl(216, 100%, 25%);
  --text-active: hsl(218, 100%, 14%);
  --text-link-default: hsl(240, 100%, 50%);
  --text-link-hover: hsl(217, 99%, 47%);
  --text-link-active: hsl(245, 86%, 36%);
  --text-link-visited: hsl(300, 100%, 25%);
  --color-white: #fff;
  --color-black: #000;
  --color-dark-grey: #4e4e4e;
  --color-dark: #1b1b1b;
  --color-light-grey: #e2e2e2;
  --color-primary-100: #b7d1e5;
  --color-primary-200: #8faed5;
  --color-primary-300: #678bc5;
  --color-primary-400: #3e68b5;
  --color-primary-500: #254b9e;
  --color-primary-600: #1c3a7d;
  --color-primary-700: #012666;
  --color-primary-800: #001b49;
  --color-primary-900: #001231;
  --app-background: #fff;
  --modal-background: rgba(15,23,42,.3);
  --modal-backdrop-blur: blur(4px);
  --ic-background-default: hsl(222, 7%, 73%);
  --ic-background-hover: hsl(222, 7%, 53%);
  --ic-background-active: hsl(222, 7%, 43%);
  --comp-item-hover: #eef0f3;
  --comp-item-active: #e2e6ea;
  --comp-border-default: #b5b8bf;
  --comp-border-hover: #aaa;
  --comp-border-active: #001b49;
  --comp-inactive-100: #f1f3f4;
  --comp-inactive-200: #e1e3e4;
  --comp-inactive-300: #d1d3d4;
  --comp-border-radius-rounded: 999px;
  --comp-divider-light: rgba(255, 255, 255, 0.3);
  --comp-divider-gray: rgba(0, 0, 0, 0.15);
  --comp-util-default: transparent;
  --comp-util-light-hover: rgba(255, 255, 255, 0.6);
  --comp-util-light-active: rgba(255, 255, 255, 0.8);
  --comp-util-gray-hover: #f1f1f4;
  --comp-util-gray-active: #e6e6ec;
  --comp-box-shadow: 0 0.2rem 0.313rem 0 #e7ecf5;
  /* =============================
  1. 基礎樣式
  > 2. 共用設定
  3. Header、Avatar、主選單、Footer
  4. 按鈕
  5. 下拉 / 下拉選單
  6. Dialog / Sheet
  7. Input
  8. Switch
  9. Captcha
  10. Tag
  11. Table
  12. Content Placeholder
  13. Loading/Progress Indicator
  14. Alert
  ============================= */
  --comp-height-default: 2.25rem;
  /* =============================
  1. 基礎樣式
  2. 共用設定
  > 3. Header、Avatar、主選單、Footer
  4. 按鈕
  5. 下拉 / 下拉選單
  6. Dialog / Sheet
  7. Input
  8. Switch
  9. Captcha
  10. Tag
  11. Table
  12. Content Placeholder
  13. Loading/Progress Indicator
  14. Alert
  ============================= */
  --header-height-default: 4.5rem;
  --header-height-mobile: 3.125rem;
  --header-background: transparent;
  --header-divide: var(--comp-divider-gray);
  --avatar-border-color: #e0e0e2;
  --avatar-background-color: var(--color-white);
  --avatar-shadow: 0 1px 4px 0 rgba(0,0,0,0.10);
  --avatar-color: var(--color-black);
  --avatar-font-size: 1.25rem;
  --no-avatar-border-color: rgba(255, 255, 255, 0.5);
  --nav-width-default: 20rem;
  --nav-height-mobile: 3.75rem;
  --nav-border-color: #d9dae3;
  --nav-background: hsl(220, 16%, 96%);
  --nav-item-color-default: var(--text-tertiary);
  --nav-item-color-hover: var(--text-secondary);
  --nav-item-color-active: var(--text-active);
  --nav-item-font-size: var(--text-16);
  --nav-item-background-default: rgba(255, 255, 255, 0);
  --nav-item-background-active: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 11%, rgba(255,255,255,0.9) 69%, rgba(255,255,255,0.00) 100%);
  --nav-sub-item-font-size: var(--text-15);
  --nav-sub-item-background: rgba(11, 49, 116, .4);
  --nav-icon-background-default: #76808c;
  --nav-icon-background-active: var(--color-primary-800);
  --nav-arrow-background-default: #b1b1b1;
  --nav-arrow-background-mobile: #76808c;
  --footer-height-default: 4rem;
  /* =============================
  1. 基礎樣式
  2. 共用設定
  3. Header、Avatar、主選單、Footer
  > 4. 按鈕
  5. 下拉 / 下拉選單
  6. Dialog / Sheet
  7. Input
  8. Switch
  9. Captcha
  10. Tag
  11. Table
  12. Content Placeholder
  13. Loading/Progress Indicator
  14. Alert
  ============================= */
  --button-font-size: var(--text-14);
  --button-border-radius: 0.25rem;
  --button-hover-shadow: var(--comp-box-shadow);
  --button-default-color: var(--text-secondary);
  --button-default-default: #fff;
  --button-default-hover: #fff;
  --button-default-active: #f7f7f7;
  --button-default-inactive: var(--comp-inactive-100);
  --button-default-border-default: var(--comp-border-default);
  --button-default-border-hover: var(--comp-border-hover);
  --button-default-border-active: var(--comp-border-active);
  --button-default-border-inactive: var(--comp-inactive-100);
  --button-primary-default: var(--color-primary-800);
  --button-primary-hover: var(--color-primary-700);
  --button-primary-active: var(--color-primary-900);
  --button-primary-inactive: var(--comp-inactive-100);
  --button-primary-border-default: var(--color-primary-800);
  --button-primary-border-hover: var(--color-primary-800);
  --button-primary-border-active: var(--color-primary-900);
  --button-primary-border-inactive: var(--comp-inactive-100);
  --button-sheet-default: #f1f1f4;
  --button-sheet-active: #e1e1e6;
  --util-button-default: transparent;
  --util-button-light-hover: var(--comp-util-light-hover);
  --util-button-light-active: var(--comp-util-light-active);
  --util-button-dark-hover: var(--comp-util-gray-hover);
  --util-button-dark-active: var(--comp-util-gray-active);
  --util-button-mask-background-light: #fff;
  --util-button-mask-background-dark: #2F2F2F;
  /* =============================
  1. 基礎樣式
  2. 共用設定
  3. Header、Avatar、主選單、Footer
  4. 按鈕
  > 5. 下拉 / 下拉選單
  6. Dialog / Sheet
  7. Input
  8. Switch
  9. Captcha
  10. Tag
  11. Table
  12. Content Placeholder
  13. Loading/Progress Indicator
  14. Alert
  ============================= */
  --select-padding: 0.5rem 0.875rem;
  --select-border-radius: 0.25rem;
  --select-border-default: var(--comp-border-default);
  --select-border-hover: var(--comp-border-hover);
  --select-border-active: var(--comp-border-active);
  --select-background-default: #fff;
  --select-background-active: #fafafa;
  --select-hover-shadow: var(--comp-box-shadow);
  --select-dropdown-menu-offset-top: 0.25rem;
  --dropdown-menu-default: 160px;
  --dropdown-menu-medium: 15rem;
  --dropdown-menu-offset-top: 0.5rem;
  --dropdown-menu-border-radius: 0.25rem;
  --dropdown-menu-border-default: #e2e6ea;
  --dropdown-menu-divide-border-color: var(--nav-border-color);
  --dropdown-menu-divide-margin: 0rem 0rem 0rem 0.875rem;
  --dropdown-menu-background: #fff;
  --dropdown-menu-shadow: 0 0.5625rem 1.5rem 0 rgba(0, 0, 0, 0.15);
  --dropdown-menu-padding: 0.5rem 0rem;
  --dropdown-menu-head-padding: 0.5rem 0.875rem;
  --dropdown-menu-head-font-size: var(--text-14);
  --dropdown-menu-head-color: var(--text-quaternary);
  --dropdown-menu-item-hover: var(--comp-item-hover);
  --dropdown-menu-item-active: var(--comp-item-active);
  --dropdown-menu-item-padding: 0.5rem 0.875rem;
  --dropdown-menu-item-color-active: var(--color-primary-500);
  --dropdown-menu-item-font-size: var(--text-16);
  /* =============================
  1. 基礎樣式
  2. 共用設定
  3. Header、Avatar、主選單、Footer
  4. 按鈕
  5. 下拉 / 下拉選單
  > 6. Dialog / Sheet
  7. Input
  8. Switch
  9. Captcha
  10. Tag
  11. Table
  12. Content Placeholder
  13. Loading/Progress Indicator
  14. Alert
  ============================= */
  --dialog-small: 31.25rem;
  --dialog-medium: 37.5rem;
  --dialog-large: 43.75rem;
  --dialog-border-default: #cfd1d6;
  --dialog-background: #fff;
  --dialog-border-radius: 0.5rem;
  --dialog-shadow: 0 0.125rem 0.250rem 0 rgba(0,0,0,0.15);
  --dialog-header-color: #000;
  --dialog-header-font-size: var(--text-20);
  --dialog-header-padding: 1.5rem 2rem 2rem 2rem;
  --dialog-btn-close-default: #b1b1b1;
  --dialog-btn-close-hover: #76808c;
  --dialog-btn-close-active: #000;
  --dialog-content-padding: 0rem 2rem 1rem 2rem;
  --dialog-content-font-size: var(--text-14);
  --dialog-footer-padding: 1.5rem 2rem 1.5rem 2rem;
  --sheet-offset-top: 2rem;
  --sheet-border-default: #cfd1d6;
  --sheet-background: #fff;
  --sheet-border-radius: 0.5rem;
  --sheet-shadow: 0 0.125rem 0.250rem 0 rgba(0,0,0,0.15);
  --sheet-header-color: #000;
  --sheet-header-font-size: var(--text-20);
  --sheet-header-padding: 1.5rem 2rem 2rem 2rem;
  --sheet-btn-close-default: #b1b1b1;
  --sheet-btn-close-hover: #76808c;
  --sheet-btn-close-active: #000;
  --sheet-content-padding: 0rem 0rem 0rem 0rem;
  --sheet-content-font-size: var(--text-14);
  --sheet-list-item-padding: 1rem 1.5rem;
  --sheet-list-item-border-default: #e2e6ea;
  --sheet-footer-padding: 1.5rem 2rem 1.5rem 2rem;
  --sheet-btn-height: 2.5rem;
  --sheet-btn-border-radius: 0.5rem;
  /* =============================
  1. 基礎樣式
  2. 共用設定
  3. Header、Avatar、主選單、Footer
  4. 按鈕
  5. 下拉 / 下拉選單
  6. Dialog / Sheet
  > 7. Input
  8. Switch
  9. Captcha
  10. Tag
  11. Table
  12. Content Placeholder
  13. Loading/Progress Indicator
  14. Alert
  ============================= */
  --input-font-size: var(--text-14);
  --input-border-default: var(--comp-border-default);
  --input-border-hover: var(--comp-border-hover);
  --input-border-active: var(--comp-border-active);
  --input-border-inactive: var(--comp-inactive-200);
  --input-border-radius: 0.25rem;
  --input-padding: 0rem 0.875rem;
  --input-background-default: #fff;
  --input-background-active: var(--color-primary-800);
  --input-background-inactive: var(--comp-inactive-100);
  --input-background-inactive-focused:var(--comp-inactive-300);
  --input-background-must-fill: #fff9e2;
  --input-shadow: var(--comp-box-shadow);
  /* =============================
  1. 基礎樣式
  2. 共用設定
  3. Header、Avatar、主選單、Footer
  4. 按鈕
  5. 下拉 / 下拉選單
  6. Dialog / Sheet
  7. Input
  > 8. Switch
  9. Captcha
  10. Tag
  11. Table
  12. Content Placeholder
  13. Loading/Progress Indicator
  14. Alert
  ============================= */
  --switch-background-default: #b1b1b1;
  --switch-background-active: #aabfe1;
  --switch-on-default: var(--color-primary-800);
  --switch-on-hover: var(--color-primary-700);
  --switch-on-active: var(--color-primary-900);
  --switch-off-default: #fff;
  --switch-box-shadow: rgba(0, 0, 0, .1) 0rem 0.063rem 0.125rem 0.063rem;
  /* =============================
  1. 基礎樣式
  2. 共用設定
  3. Header、Avatar、主選單、Footer
  4. 按鈕
  5. 下拉 / 下拉選單
  6. Dialog / Sheet
  7. Input
  8. Switch
  > 9. Captcha
  10. Tag
  11. Table
  12. Content Placeholder
  13. Loading/Progress Indicator
  14. Alert
  ============================= */
  --captcha-background: #fff;
  --captcha-shadow: var(--comp-box-shadow);
  /* =============================
  1. 基礎樣式
  2. 共用設定
  3. Header、Avatar、主選單、Footer
  4. 按鈕
  5. 下拉 / 下拉選單
  6. Dialog / Sheet
  7. Input
  8. Switch
  9. Captcha
  > 10. Tag
  11. Table
  12. Content Placeholder
  13. Loading/Progress Indicator
  14. Alert
  ============================= */
  --tag-padding: 0.25rem 0.75rem;
  --tag-padding-small: 0.1875rem 0.5rem;
  --tag-padding-tiny: 0.1875rem 0.375rem;
  --tag-background-default: #eaeaea;
  --tag-border-radius: 0.25rem;
  /* =============================
  1. 基礎樣式
  2. 共用設定
  3. Header、Avatar、主選單、Footer
  4. 按鈕
  5. 下拉 / 下拉選單
  6. Dialog / Sheet
  7. Input
  8. Switch
  9. Captcha
  10. Tag
  > 11. Table
  12. Content Placeholder
  13. Loading/Progress Indicator
  14. Alert
  ============================= */
  --table-border-default: #dce5ef;
  --table-border-radius: 0.5rem;
  --table-background-default: #fff;
  --table-shadow: var(--comp-box-shadow);
  --table-header-height: 3rem;
  --table-header-background-default: #f7f8f9;
  --table-header-padding: 0rem 1rem;
  --table-row-border-radius: 0.5rem;
  --table-row-background-default: #fff;
  --table-row-shadow: 0 0.125rem 1rem 0 rgba(0, 0, 0, 0.08);
  --table-cell-height: 4rem;
  --table-cell-padding: 0.75rem 1rem;
  --table-m-background-default: #f7f8f9;
  --table-m-header-background-default: #fff;
  --table-m-header-shadow: 0 0.125rem 1rem 0.0625rem rgba(0, 0, 0, 0.1);
  --table-m-sticky-bar: #648DDA;
  /* =============================
  1. 基礎樣式
  2. 共用設定
  3. Header、Avatar、主選單、Footer
  4. 按鈕
  5. 下拉 / 下拉選單
  6. Dialog / Sheet
  7. Input
  8. Switch
  9. Captcha
  10. Tag
  11. Table
  > 12. Content Placeholder
  13. Loading/Progress Indicator
  14. Alert
  ============================= */
  --placeholder-background-default: #f6f7f8;
  --placeholder-background-gradient: linear-gradient(to right, #eee 8%, #ddd 18%, #eee 33%);
  /* =============================
  1. 基礎樣式
  2. 共用設定
  3. Header、Avatar、主選單、Footer
  4. 按鈕
  5. 下拉 / 下拉選單
  6. Dialog / Sheet
  7. Input
  8. Switch
  9. Captcha
  10. Tag
  11. Table
  12. Content Placeholder
  > 13. Loading/Progress Indicator
  14. Alert
  ============================= */
  --loading-indicator-label: #e7ffff;
  --loading-indicator-color: #cce6ff;
  --loading-indicator-padding: 1rem 1.5rem 1rem 1.875rem;
  --loading-indicator-border-radius: 0.375rem;
  --loading-indicator-background-default: #125ed2;
  --loading-indicator-box-shadow: 0 0.5625rem 1.5rem 0 rgba(0, 0, 0, 0.15);
  --loading-indicator-button-default-color: #fff;
  --loading-indicator-button-default: #0048B7;
  --loading-indicator-button-hover: #0042A7;
  --loading-indicator-button-active: #003587;
  /* =============================
  1. 基礎樣式
  2. 共用設定
  3. Header、Avatar、主選單、Footer
  4. 按鈕
  5. 下拉 / 下拉選單
  6. Dialog / Sheet
  7. Input
  8. Switch
  9. Captcha
  10. Tag
  11. Table
  12. Content Placeholder
  13. Loading/Progress Indicator
  > 14. Alert
  ============================= */
  --alert-btn-close-default: #b1b1b1;
  --alert-btn-close-hover: #76808c;
  --alert-btn-close-active: #000;
  --alert-border-default: #e2e6ea;
  --alert-padding: 1rem 1.5rem 1rem 1.5rem;
  --alert-shadow: 0 0.125rem 0.3125rem 0 rgba(0, 0, 0, 0.05);
}

/* Themes
=============================
A. Light mode (Default)
> B. Dark mode
============================= */
/* SASS Variables
-------------------------------------------------- */
/* Box sizing rules */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* Remove default margin */
html,
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul,
ul[role=list],
ol,
ol[role=list] {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Disable Text Selection */
button,
select {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

/* Setting cursor for disabled input */
input:disabled {
  cursor: default;
}

/* Remove default input style */
input[type=text], input[type=password], input[type=email], input[type=number], input[type=tel] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Remove Arrows/Spinners for Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Remove Arrows/Spinners for Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* Remove outline style */
.modal-open .modal,
*:focus {
  outline: none !important;
}

/* Remove input autofill background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
}

/* Reset placeholder color and size */
::-webkit-input-placeholder {
  color: var(--text-senary);
  font-weight: 400;
  font-size: 0.875rem;
}

::-moz-placeholder {
  color: var(--text-senary);
  font-weight: 400;
  font-size: 0.875rem;
} /* firefox 19+ */
:-ms-input-placeholder {
  color: var(--text-senary);
  font-weight: 400;
  font-size: 0.875rem;
} /* ie */
input:-moz-placeholder {
  color: var(--text-senary);
  font-weight: 400;
  font-size: 0.875rem;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    -webkit-animation-duration: 0.01ms !important;
            animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
            animation-iteration-count: 1 !important;
    -webkit-transition-duration: 0.01ms !important;
            transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* 定義不同標籤之下的字型樣式
-------------------------------------------------- */
/* Util Class
-------------------------------------------------- */
.position-absolute {
  position: absolute;
}

.position-relative {
  position: relative;
}

.bg-inherit {
  background-color: inherit;
}

.bg-current {
  background-color: currentColor;
}

.bg-transparent {
  background-color: transparent;
}

.bg-white {
  background-color: rgb(255, 255, 255);
}

.bg-black {
  background-color: rgb(0, 0, 0);
}

.cursor-default {
  cursor: default !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

.hide {
  display: none !important;
}

.pull-right {
  float: right;
}

.pull-left {
  float: left;
}

.clear:after {
  content: "";
  display: block;
  clear: both;
}

.white-space-normal {
  white-space: normal;
}

.disable-scrolling {
  overflow: hidden;
}

.display-inline {
  display: inline;
}

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

.display-block {
  display: block;
}

.display-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.display-inline-flex {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.text-align-left {
  text-align: left;
}

.text-align-left-important {
  text-align: left !important;
}

.text-align-right {
  text-align: right;
}

.text-align-right-important {
  text-align: right !important;
}

.text-align-center {
  text-align: center;
}

.text-align-center-important {
  text-align: center !important;
}

.vertical-align-top {
  vertical-align: top;
}

.vertical-align-bottom {
  vertical-align: bottom;
}

.vertical-align-middle {
  vertical-align: middle;
}

.vertical-align-text-top {
  vertical-align: text-top;
}

.vertical-align-text-bottom {
  vertical-align: text-bottom;
}

.flex-direction-row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.flex-direction-row-reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

.flex-direction-column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.align-items-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.align-items-start {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.align-items-end {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.align-items-baseline {
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

.align-self-start {
  -ms-flex-item-align: start;
      align-self: flex-start;
}

.align-self-end {
  -ms-flex-item-align: end;
      align-self: flex-end;
}

.justify-content-start {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.justify-content-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.justify-content-space-between {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.justify-content-end {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.flex-limited-width {
  width: 0;
}

.flex-min-width-0 {
  min-width: 0;
}

.flex-1 {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.flex-initial {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
}

.flex-wrap-wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.flex-wrap-nowrap {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.flex-none {
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
}

.no-border-top {
  border-top: 0 !important;
}

.no-border-left {
  border-left: 0 !important;
}

.no-border-bottom {
  border-bottom: 0 !important;
}

.no-border-right {
  border-right: 0 !important;
}

/* Padding / Margin
-------------------------------------------------- */
.pt-0 {
  padding-top: 0rem !important;
}

.pr-0 {
  padding-right: 0rem !important;
}

.pb-0 {
  padding-bottom: 0rem !important;
}

.pl-0 {
  padding-left: 0rem !important;
}

.mt-0 {
  margin-top: 0rem !important;
}

.mr-0 {
  margin-right: 0rem !important;
}

.mb-0 {
  margin-bottom: 0rem !important;
}

.ml-0 {
  margin-left: 0rem !important;
}

.-mt-0 {
  margin-top: 0rem !important;
}

.-mr-0 {
  margin-right: 0rem !important;
}

.-mb-0 {
  margin-bottom: 0rem !important;
}

.-ml-0 {
  margin-left: 0rem !important;
}

.pt-1 {
  padding-top: 0.0625rem !important;
}

.pr-1 {
  padding-right: 0.0625rem !important;
}

.pb-1 {
  padding-bottom: 0.0625rem !important;
}

.pl-1 {
  padding-left: 0.0625rem !important;
}

.mt-1 {
  margin-top: 0.0625rem !important;
}

.mr-1 {
  margin-right: 0.0625rem !important;
}

.mb-1 {
  margin-bottom: 0.0625rem !important;
}

.ml-1 {
  margin-left: 0.0625rem !important;
}

.-mt-1 {
  margin-top: -0.0625rem !important;
}

.-mr-1 {
  margin-right: -0.0625rem !important;
}

.-mb-1 {
  margin-bottom: -0.0625rem !important;
}

.-ml-1 {
  margin-left: -0.0625rem !important;
}

.pt-2 {
  padding-top: 0.125rem !important;
}

.pr-2 {
  padding-right: 0.125rem !important;
}

.pb-2 {
  padding-bottom: 0.125rem !important;
}

.pl-2 {
  padding-left: 0.125rem !important;
}

.mt-2 {
  margin-top: 0.125rem !important;
}

.mr-2 {
  margin-right: 0.125rem !important;
}

.mb-2 {
  margin-bottom: 0.125rem !important;
}

.ml-2 {
  margin-left: 0.125rem !important;
}

.-mt-2 {
  margin-top: -0.125rem !important;
}

.-mr-2 {
  margin-right: -0.125rem !important;
}

.-mb-2 {
  margin-bottom: -0.125rem !important;
}

.-ml-2 {
  margin-left: -0.125rem !important;
}

.pt-3 {
  padding-top: 0.1875rem !important;
}

.pr-3 {
  padding-right: 0.1875rem !important;
}

.pb-3 {
  padding-bottom: 0.1875rem !important;
}

.pl-3 {
  padding-left: 0.1875rem !important;
}

.mt-3 {
  margin-top: 0.1875rem !important;
}

.mr-3 {
  margin-right: 0.1875rem !important;
}

.mb-3 {
  margin-bottom: 0.1875rem !important;
}

.ml-3 {
  margin-left: 0.1875rem !important;
}

.-mt-3 {
  margin-top: -0.1875rem !important;
}

.-mr-3 {
  margin-right: -0.1875rem !important;
}

.-mb-3 {
  margin-bottom: -0.1875rem !important;
}

.-ml-3 {
  margin-left: -0.1875rem !important;
}

.pt-4 {
  padding-top: 0.25rem !important;
}

.pr-4 {
  padding-right: 0.25rem !important;
}

.pb-4 {
  padding-bottom: 0.25rem !important;
}

.pl-4 {
  padding-left: 0.25rem !important;
}

.mt-4 {
  margin-top: 0.25rem !important;
}

.mr-4 {
  margin-right: 0.25rem !important;
}

.mb-4 {
  margin-bottom: 0.25rem !important;
}

.ml-4 {
  margin-left: 0.25rem !important;
}

.-mt-4 {
  margin-top: -0.25rem !important;
}

.-mr-4 {
  margin-right: -0.25rem !important;
}

.-mb-4 {
  margin-bottom: -0.25rem !important;
}

.-ml-4 {
  margin-left: -0.25rem !important;
}

.pt-5 {
  padding-top: 0.3125rem !important;
}

.pr-5 {
  padding-right: 0.3125rem !important;
}

.pb-5 {
  padding-bottom: 0.3125rem !important;
}

.pl-5 {
  padding-left: 0.3125rem !important;
}

.mt-5 {
  margin-top: 0.3125rem !important;
}

.mr-5 {
  margin-right: 0.3125rem !important;
}

.mb-5 {
  margin-bottom: 0.3125rem !important;
}

.ml-5 {
  margin-left: 0.3125rem !important;
}

.-mt-5 {
  margin-top: -0.3125rem !important;
}

.-mr-5 {
  margin-right: -0.3125rem !important;
}

.-mb-5 {
  margin-bottom: -0.3125rem !important;
}

.-ml-5 {
  margin-left: -0.3125rem !important;
}

.pt-6 {
  padding-top: 0.375rem !important;
}

.pr-6 {
  padding-right: 0.375rem !important;
}

.pb-6 {
  padding-bottom: 0.375rem !important;
}

.pl-6 {
  padding-left: 0.375rem !important;
}

.mt-6 {
  margin-top: 0.375rem !important;
}

.mr-6 {
  margin-right: 0.375rem !important;
}

.mb-6 {
  margin-bottom: 0.375rem !important;
}

.ml-6 {
  margin-left: 0.375rem !important;
}

.-mt-6 {
  margin-top: -0.375rem !important;
}

.-mr-6 {
  margin-right: -0.375rem !important;
}

.-mb-6 {
  margin-bottom: -0.375rem !important;
}

.-ml-6 {
  margin-left: -0.375rem !important;
}

.pt-7 {
  padding-top: 0.4375rem !important;
}

.pr-7 {
  padding-right: 0.4375rem !important;
}

.pb-7 {
  padding-bottom: 0.4375rem !important;
}

.pl-7 {
  padding-left: 0.4375rem !important;
}

.mt-7 {
  margin-top: 0.4375rem !important;
}

.mr-7 {
  margin-right: 0.4375rem !important;
}

.mb-7 {
  margin-bottom: 0.4375rem !important;
}

.ml-7 {
  margin-left: 0.4375rem !important;
}

.-mt-7 {
  margin-top: -0.4375rem !important;
}

.-mr-7 {
  margin-right: -0.4375rem !important;
}

.-mb-7 {
  margin-bottom: -0.4375rem !important;
}

.-ml-7 {
  margin-left: -0.4375rem !important;
}

.pt-8 {
  padding-top: 0.5rem !important;
}

.pr-8 {
  padding-right: 0.5rem !important;
}

.pb-8 {
  padding-bottom: 0.5rem !important;
}

.pl-8 {
  padding-left: 0.5rem !important;
}

.mt-8 {
  margin-top: 0.5rem !important;
}

.mr-8 {
  margin-right: 0.5rem !important;
}

.mb-8 {
  margin-bottom: 0.5rem !important;
}

.ml-8 {
  margin-left: 0.5rem !important;
}

.-mt-8 {
  margin-top: -0.5rem !important;
}

.-mr-8 {
  margin-right: -0.5rem !important;
}

.-mb-8 {
  margin-bottom: -0.5rem !important;
}

.-ml-8 {
  margin-left: -0.5rem !important;
}

.pt-9 {
  padding-top: 0.5625rem !important;
}

.pr-9 {
  padding-right: 0.5625rem !important;
}

.pb-9 {
  padding-bottom: 0.5625rem !important;
}

.pl-9 {
  padding-left: 0.5625rem !important;
}

.mt-9 {
  margin-top: 0.5625rem !important;
}

.mr-9 {
  margin-right: 0.5625rem !important;
}

.mb-9 {
  margin-bottom: 0.5625rem !important;
}

.ml-9 {
  margin-left: 0.5625rem !important;
}

.-mt-9 {
  margin-top: -0.5625rem !important;
}

.-mr-9 {
  margin-right: -0.5625rem !important;
}

.-mb-9 {
  margin-bottom: -0.5625rem !important;
}

.-ml-9 {
  margin-left: -0.5625rem !important;
}

.pt-10 {
  padding-top: 0.625rem !important;
}

.pr-10 {
  padding-right: 0.625rem !important;
}

.pb-10 {
  padding-bottom: 0.625rem !important;
}

.pl-10 {
  padding-left: 0.625rem !important;
}

.mt-10 {
  margin-top: 0.625rem !important;
}

.mr-10 {
  margin-right: 0.625rem !important;
}

.mb-10 {
  margin-bottom: 0.625rem !important;
}

.ml-10 {
  margin-left: 0.625rem !important;
}

.-mt-10 {
  margin-top: -0.625rem !important;
}

.-mr-10 {
  margin-right: -0.625rem !important;
}

.-mb-10 {
  margin-bottom: -0.625rem !important;
}

.-ml-10 {
  margin-left: -0.625rem !important;
}

.pt-11 {
  padding-top: 0.6875rem !important;
}

.pr-11 {
  padding-right: 0.6875rem !important;
}

.pb-11 {
  padding-bottom: 0.6875rem !important;
}

.pl-11 {
  padding-left: 0.6875rem !important;
}

.mt-11 {
  margin-top: 0.6875rem !important;
}

.mr-11 {
  margin-right: 0.6875rem !important;
}

.mb-11 {
  margin-bottom: 0.6875rem !important;
}

.ml-11 {
  margin-left: 0.6875rem !important;
}

.-mt-11 {
  margin-top: -0.6875rem !important;
}

.-mr-11 {
  margin-right: -0.6875rem !important;
}

.-mb-11 {
  margin-bottom: -0.6875rem !important;
}

.-ml-11 {
  margin-left: -0.6875rem !important;
}

.pt-12 {
  padding-top: 0.75rem !important;
}

.pr-12 {
  padding-right: 0.75rem !important;
}

.pb-12 {
  padding-bottom: 0.75rem !important;
}

.pl-12 {
  padding-left: 0.75rem !important;
}

.mt-12 {
  margin-top: 0.75rem !important;
}

.mr-12 {
  margin-right: 0.75rem !important;
}

.mb-12 {
  margin-bottom: 0.75rem !important;
}

.ml-12 {
  margin-left: 0.75rem !important;
}

.-mt-12 {
  margin-top: -0.75rem !important;
}

.-mr-12 {
  margin-right: -0.75rem !important;
}

.-mb-12 {
  margin-bottom: -0.75rem !important;
}

.-ml-12 {
  margin-left: -0.75rem !important;
}

.pt-13 {
  padding-top: 0.8125rem !important;
}

.pr-13 {
  padding-right: 0.8125rem !important;
}

.pb-13 {
  padding-bottom: 0.8125rem !important;
}

.pl-13 {
  padding-left: 0.8125rem !important;
}

.mt-13 {
  margin-top: 0.8125rem !important;
}

.mr-13 {
  margin-right: 0.8125rem !important;
}

.mb-13 {
  margin-bottom: 0.8125rem !important;
}

.ml-13 {
  margin-left: 0.8125rem !important;
}

.-mt-13 {
  margin-top: -0.8125rem !important;
}

.-mr-13 {
  margin-right: -0.8125rem !important;
}

.-mb-13 {
  margin-bottom: -0.8125rem !important;
}

.-ml-13 {
  margin-left: -0.8125rem !important;
}

.pt-14 {
  padding-top: 0.875rem !important;
}

.pr-14 {
  padding-right: 0.875rem !important;
}

.pb-14 {
  padding-bottom: 0.875rem !important;
}

.pl-14 {
  padding-left: 0.875rem !important;
}

.mt-14 {
  margin-top: 0.875rem !important;
}

.mr-14 {
  margin-right: 0.875rem !important;
}

.mb-14 {
  margin-bottom: 0.875rem !important;
}

.ml-14 {
  margin-left: 0.875rem !important;
}

.-mt-14 {
  margin-top: -0.875rem !important;
}

.-mr-14 {
  margin-right: -0.875rem !important;
}

.-mb-14 {
  margin-bottom: -0.875rem !important;
}

.-ml-14 {
  margin-left: -0.875rem !important;
}

.pt-15 {
  padding-top: 0.9375rem !important;
}

.pr-15 {
  padding-right: 0.9375rem !important;
}

.pb-15 {
  padding-bottom: 0.9375rem !important;
}

.pl-15 {
  padding-left: 0.9375rem !important;
}

.mt-15 {
  margin-top: 0.9375rem !important;
}

.mr-15 {
  margin-right: 0.9375rem !important;
}

.mb-15 {
  margin-bottom: 0.9375rem !important;
}

.ml-15 {
  margin-left: 0.9375rem !important;
}

.-mt-15 {
  margin-top: -0.9375rem !important;
}

.-mr-15 {
  margin-right: -0.9375rem !important;
}

.-mb-15 {
  margin-bottom: -0.9375rem !important;
}

.-ml-15 {
  margin-left: -0.9375rem !important;
}

.pt-16 {
  padding-top: 1rem !important;
}

.pr-16 {
  padding-right: 1rem !important;
}

.pb-16 {
  padding-bottom: 1rem !important;
}

.pl-16 {
  padding-left: 1rem !important;
}

.mt-16 {
  margin-top: 1rem !important;
}

.mr-16 {
  margin-right: 1rem !important;
}

.mb-16 {
  margin-bottom: 1rem !important;
}

.ml-16 {
  margin-left: 1rem !important;
}

.-mt-16 {
  margin-top: -1rem !important;
}

.-mr-16 {
  margin-right: -1rem !important;
}

.-mb-16 {
  margin-bottom: -1rem !important;
}

.-ml-16 {
  margin-left: -1rem !important;
}

.pt-17 {
  padding-top: 1.0625rem !important;
}

.pr-17 {
  padding-right: 1.0625rem !important;
}

.pb-17 {
  padding-bottom: 1.0625rem !important;
}

.pl-17 {
  padding-left: 1.0625rem !important;
}

.mt-17 {
  margin-top: 1.0625rem !important;
}

.mr-17 {
  margin-right: 1.0625rem !important;
}

.mb-17 {
  margin-bottom: 1.0625rem !important;
}

.ml-17 {
  margin-left: 1.0625rem !important;
}

.-mt-17 {
  margin-top: -1.0625rem !important;
}

.-mr-17 {
  margin-right: -1.0625rem !important;
}

.-mb-17 {
  margin-bottom: -1.0625rem !important;
}

.-ml-17 {
  margin-left: -1.0625rem !important;
}

.pt-18 {
  padding-top: 1.125rem !important;
}

.pr-18 {
  padding-right: 1.125rem !important;
}

.pb-18 {
  padding-bottom: 1.125rem !important;
}

.pl-18 {
  padding-left: 1.125rem !important;
}

.mt-18 {
  margin-top: 1.125rem !important;
}

.mr-18 {
  margin-right: 1.125rem !important;
}

.mb-18 {
  margin-bottom: 1.125rem !important;
}

.ml-18 {
  margin-left: 1.125rem !important;
}

.-mt-18 {
  margin-top: -1.125rem !important;
}

.-mr-18 {
  margin-right: -1.125rem !important;
}

.-mb-18 {
  margin-bottom: -1.125rem !important;
}

.-ml-18 {
  margin-left: -1.125rem !important;
}

.pt-19 {
  padding-top: 1.1875rem !important;
}

.pr-19 {
  padding-right: 1.1875rem !important;
}

.pb-19 {
  padding-bottom: 1.1875rem !important;
}

.pl-19 {
  padding-left: 1.1875rem !important;
}

.mt-19 {
  margin-top: 1.1875rem !important;
}

.mr-19 {
  margin-right: 1.1875rem !important;
}

.mb-19 {
  margin-bottom: 1.1875rem !important;
}

.ml-19 {
  margin-left: 1.1875rem !important;
}

.-mt-19 {
  margin-top: -1.1875rem !important;
}

.-mr-19 {
  margin-right: -1.1875rem !important;
}

.-mb-19 {
  margin-bottom: -1.1875rem !important;
}

.-ml-19 {
  margin-left: -1.1875rem !important;
}

.pt-20 {
  padding-top: 1.25rem !important;
}

.pr-20 {
  padding-right: 1.25rem !important;
}

.pb-20 {
  padding-bottom: 1.25rem !important;
}

.pl-20 {
  padding-left: 1.25rem !important;
}

.mt-20 {
  margin-top: 1.25rem !important;
}

.mr-20 {
  margin-right: 1.25rem !important;
}

.mb-20 {
  margin-bottom: 1.25rem !important;
}

.ml-20 {
  margin-left: 1.25rem !important;
}

.-mt-20 {
  margin-top: -1.25rem !important;
}

.-mr-20 {
  margin-right: -1.25rem !important;
}

.-mb-20 {
  margin-bottom: -1.25rem !important;
}

.-ml-20 {
  margin-left: -1.25rem !important;
}

.pt-21 {
  padding-top: 1.3125rem !important;
}

.pr-21 {
  padding-right: 1.3125rem !important;
}

.pb-21 {
  padding-bottom: 1.3125rem !important;
}

.pl-21 {
  padding-left: 1.3125rem !important;
}

.mt-21 {
  margin-top: 1.3125rem !important;
}

.mr-21 {
  margin-right: 1.3125rem !important;
}

.mb-21 {
  margin-bottom: 1.3125rem !important;
}

.ml-21 {
  margin-left: 1.3125rem !important;
}

.-mt-21 {
  margin-top: -1.3125rem !important;
}

.-mr-21 {
  margin-right: -1.3125rem !important;
}

.-mb-21 {
  margin-bottom: -1.3125rem !important;
}

.-ml-21 {
  margin-left: -1.3125rem !important;
}

.pt-22 {
  padding-top: 1.375rem !important;
}

.pr-22 {
  padding-right: 1.375rem !important;
}

.pb-22 {
  padding-bottom: 1.375rem !important;
}

.pl-22 {
  padding-left: 1.375rem !important;
}

.mt-22 {
  margin-top: 1.375rem !important;
}

.mr-22 {
  margin-right: 1.375rem !important;
}

.mb-22 {
  margin-bottom: 1.375rem !important;
}

.ml-22 {
  margin-left: 1.375rem !important;
}

.-mt-22 {
  margin-top: -1.375rem !important;
}

.-mr-22 {
  margin-right: -1.375rem !important;
}

.-mb-22 {
  margin-bottom: -1.375rem !important;
}

.-ml-22 {
  margin-left: -1.375rem !important;
}

.pt-23 {
  padding-top: 1.4375rem !important;
}

.pr-23 {
  padding-right: 1.4375rem !important;
}

.pb-23 {
  padding-bottom: 1.4375rem !important;
}

.pl-23 {
  padding-left: 1.4375rem !important;
}

.mt-23 {
  margin-top: 1.4375rem !important;
}

.mr-23 {
  margin-right: 1.4375rem !important;
}

.mb-23 {
  margin-bottom: 1.4375rem !important;
}

.ml-23 {
  margin-left: 1.4375rem !important;
}

.-mt-23 {
  margin-top: -1.4375rem !important;
}

.-mr-23 {
  margin-right: -1.4375rem !important;
}

.-mb-23 {
  margin-bottom: -1.4375rem !important;
}

.-ml-23 {
  margin-left: -1.4375rem !important;
}

.pt-24 {
  padding-top: 1.5rem !important;
}

.pr-24 {
  padding-right: 1.5rem !important;
}

.pb-24 {
  padding-bottom: 1.5rem !important;
}

.pl-24 {
  padding-left: 1.5rem !important;
}

.mt-24 {
  margin-top: 1.5rem !important;
}

.mr-24 {
  margin-right: 1.5rem !important;
}

.mb-24 {
  margin-bottom: 1.5rem !important;
}

.ml-24 {
  margin-left: 1.5rem !important;
}

.-mt-24 {
  margin-top: -1.5rem !important;
}

.-mr-24 {
  margin-right: -1.5rem !important;
}

.-mb-24 {
  margin-bottom: -1.5rem !important;
}

.-ml-24 {
  margin-left: -1.5rem !important;
}

.pt-25 {
  padding-top: 1.5625rem !important;
}

.pr-25 {
  padding-right: 1.5625rem !important;
}

.pb-25 {
  padding-bottom: 1.5625rem !important;
}

.pl-25 {
  padding-left: 1.5625rem !important;
}

.mt-25 {
  margin-top: 1.5625rem !important;
}

.mr-25 {
  margin-right: 1.5625rem !important;
}

.mb-25 {
  margin-bottom: 1.5625rem !important;
}

.ml-25 {
  margin-left: 1.5625rem !important;
}

.-mt-25 {
  margin-top: -1.5625rem !important;
}

.-mr-25 {
  margin-right: -1.5625rem !important;
}

.-mb-25 {
  margin-bottom: -1.5625rem !important;
}

.-ml-25 {
  margin-left: -1.5625rem !important;
}

.pt-26 {
  padding-top: 1.625rem !important;
}

.pr-26 {
  padding-right: 1.625rem !important;
}

.pb-26 {
  padding-bottom: 1.625rem !important;
}

.pl-26 {
  padding-left: 1.625rem !important;
}

.mt-26 {
  margin-top: 1.625rem !important;
}

.mr-26 {
  margin-right: 1.625rem !important;
}

.mb-26 {
  margin-bottom: 1.625rem !important;
}

.ml-26 {
  margin-left: 1.625rem !important;
}

.-mt-26 {
  margin-top: -1.625rem !important;
}

.-mr-26 {
  margin-right: -1.625rem !important;
}

.-mb-26 {
  margin-bottom: -1.625rem !important;
}

.-ml-26 {
  margin-left: -1.625rem !important;
}

.pt-27 {
  padding-top: 1.6875rem !important;
}

.pr-27 {
  padding-right: 1.6875rem !important;
}

.pb-27 {
  padding-bottom: 1.6875rem !important;
}

.pl-27 {
  padding-left: 1.6875rem !important;
}

.mt-27 {
  margin-top: 1.6875rem !important;
}

.mr-27 {
  margin-right: 1.6875rem !important;
}

.mb-27 {
  margin-bottom: 1.6875rem !important;
}

.ml-27 {
  margin-left: 1.6875rem !important;
}

.-mt-27 {
  margin-top: -1.6875rem !important;
}

.-mr-27 {
  margin-right: -1.6875rem !important;
}

.-mb-27 {
  margin-bottom: -1.6875rem !important;
}

.-ml-27 {
  margin-left: -1.6875rem !important;
}

.pt-28 {
  padding-top: 1.75rem !important;
}

.pr-28 {
  padding-right: 1.75rem !important;
}

.pb-28 {
  padding-bottom: 1.75rem !important;
}

.pl-28 {
  padding-left: 1.75rem !important;
}

.mt-28 {
  margin-top: 1.75rem !important;
}

.mr-28 {
  margin-right: 1.75rem !important;
}

.mb-28 {
  margin-bottom: 1.75rem !important;
}

.ml-28 {
  margin-left: 1.75rem !important;
}

.-mt-28 {
  margin-top: -1.75rem !important;
}

.-mr-28 {
  margin-right: -1.75rem !important;
}

.-mb-28 {
  margin-bottom: -1.75rem !important;
}

.-ml-28 {
  margin-left: -1.75rem !important;
}

.pt-29 {
  padding-top: 1.8125rem !important;
}

.pr-29 {
  padding-right: 1.8125rem !important;
}

.pb-29 {
  padding-bottom: 1.8125rem !important;
}

.pl-29 {
  padding-left: 1.8125rem !important;
}

.mt-29 {
  margin-top: 1.8125rem !important;
}

.mr-29 {
  margin-right: 1.8125rem !important;
}

.mb-29 {
  margin-bottom: 1.8125rem !important;
}

.ml-29 {
  margin-left: 1.8125rem !important;
}

.-mt-29 {
  margin-top: -1.8125rem !important;
}

.-mr-29 {
  margin-right: -1.8125rem !important;
}

.-mb-29 {
  margin-bottom: -1.8125rem !important;
}

.-ml-29 {
  margin-left: -1.8125rem !important;
}

.pt-30 {
  padding-top: 1.875rem !important;
}

.pr-30 {
  padding-right: 1.875rem !important;
}

.pb-30 {
  padding-bottom: 1.875rem !important;
}

.pl-30 {
  padding-left: 1.875rem !important;
}

.mt-30 {
  margin-top: 1.875rem !important;
}

.mr-30 {
  margin-right: 1.875rem !important;
}

.mb-30 {
  margin-bottom: 1.875rem !important;
}

.ml-30 {
  margin-left: 1.875rem !important;
}

.-mt-30 {
  margin-top: -1.875rem !important;
}

.-mr-30 {
  margin-right: -1.875rem !important;
}

.-mb-30 {
  margin-bottom: -1.875rem !important;
}

.-ml-30 {
  margin-left: -1.875rem !important;
}

.pt-31 {
  padding-top: 1.9375rem !important;
}

.pr-31 {
  padding-right: 1.9375rem !important;
}

.pb-31 {
  padding-bottom: 1.9375rem !important;
}

.pl-31 {
  padding-left: 1.9375rem !important;
}

.mt-31 {
  margin-top: 1.9375rem !important;
}

.mr-31 {
  margin-right: 1.9375rem !important;
}

.mb-31 {
  margin-bottom: 1.9375rem !important;
}

.ml-31 {
  margin-left: 1.9375rem !important;
}

.-mt-31 {
  margin-top: -1.9375rem !important;
}

.-mr-31 {
  margin-right: -1.9375rem !important;
}

.-mb-31 {
  margin-bottom: -1.9375rem !important;
}

.-ml-31 {
  margin-left: -1.9375rem !important;
}

.pt-32 {
  padding-top: 2rem !important;
}

.pr-32 {
  padding-right: 2rem !important;
}

.pb-32 {
  padding-bottom: 2rem !important;
}

.pl-32 {
  padding-left: 2rem !important;
}

.mt-32 {
  margin-top: 2rem !important;
}

.mr-32 {
  margin-right: 2rem !important;
}

.mb-32 {
  margin-bottom: 2rem !important;
}

.ml-32 {
  margin-left: 2rem !important;
}

.-mt-32 {
  margin-top: -2rem !important;
}

.-mr-32 {
  margin-right: -2rem !important;
}

.-mb-32 {
  margin-bottom: -2rem !important;
}

.-ml-32 {
  margin-left: -2rem !important;
}

.pt-33 {
  padding-top: 2.0625rem !important;
}

.pr-33 {
  padding-right: 2.0625rem !important;
}

.pb-33 {
  padding-bottom: 2.0625rem !important;
}

.pl-33 {
  padding-left: 2.0625rem !important;
}

.mt-33 {
  margin-top: 2.0625rem !important;
}

.mr-33 {
  margin-right: 2.0625rem !important;
}

.mb-33 {
  margin-bottom: 2.0625rem !important;
}

.ml-33 {
  margin-left: 2.0625rem !important;
}

.-mt-33 {
  margin-top: -2.0625rem !important;
}

.-mr-33 {
  margin-right: -2.0625rem !important;
}

.-mb-33 {
  margin-bottom: -2.0625rem !important;
}

.-ml-33 {
  margin-left: -2.0625rem !important;
}

.pt-34 {
  padding-top: 2.125rem !important;
}

.pr-34 {
  padding-right: 2.125rem !important;
}

.pb-34 {
  padding-bottom: 2.125rem !important;
}

.pl-34 {
  padding-left: 2.125rem !important;
}

.mt-34 {
  margin-top: 2.125rem !important;
}

.mr-34 {
  margin-right: 2.125rem !important;
}

.mb-34 {
  margin-bottom: 2.125rem !important;
}

.ml-34 {
  margin-left: 2.125rem !important;
}

.-mt-34 {
  margin-top: -2.125rem !important;
}

.-mr-34 {
  margin-right: -2.125rem !important;
}

.-mb-34 {
  margin-bottom: -2.125rem !important;
}

.-ml-34 {
  margin-left: -2.125rem !important;
}

.pt-35 {
  padding-top: 2.1875rem !important;
}

.pr-35 {
  padding-right: 2.1875rem !important;
}

.pb-35 {
  padding-bottom: 2.1875rem !important;
}

.pl-35 {
  padding-left: 2.1875rem !important;
}

.mt-35 {
  margin-top: 2.1875rem !important;
}

.mr-35 {
  margin-right: 2.1875rem !important;
}

.mb-35 {
  margin-bottom: 2.1875rem !important;
}

.ml-35 {
  margin-left: 2.1875rem !important;
}

.-mt-35 {
  margin-top: -2.1875rem !important;
}

.-mr-35 {
  margin-right: -2.1875rem !important;
}

.-mb-35 {
  margin-bottom: -2.1875rem !important;
}

.-ml-35 {
  margin-left: -2.1875rem !important;
}

.pt-36 {
  padding-top: 2.25rem !important;
}

.pr-36 {
  padding-right: 2.25rem !important;
}

.pb-36 {
  padding-bottom: 2.25rem !important;
}

.pl-36 {
  padding-left: 2.25rem !important;
}

.mt-36 {
  margin-top: 2.25rem !important;
}

.mr-36 {
  margin-right: 2.25rem !important;
}

.mb-36 {
  margin-bottom: 2.25rem !important;
}

.ml-36 {
  margin-left: 2.25rem !important;
}

.-mt-36 {
  margin-top: -2.25rem !important;
}

.-mr-36 {
  margin-right: -2.25rem !important;
}

.-mb-36 {
  margin-bottom: -2.25rem !important;
}

.-ml-36 {
  margin-left: -2.25rem !important;
}

.pt-37 {
  padding-top: 2.3125rem !important;
}

.pr-37 {
  padding-right: 2.3125rem !important;
}

.pb-37 {
  padding-bottom: 2.3125rem !important;
}

.pl-37 {
  padding-left: 2.3125rem !important;
}

.mt-37 {
  margin-top: 2.3125rem !important;
}

.mr-37 {
  margin-right: 2.3125rem !important;
}

.mb-37 {
  margin-bottom: 2.3125rem !important;
}

.ml-37 {
  margin-left: 2.3125rem !important;
}

.-mt-37 {
  margin-top: -2.3125rem !important;
}

.-mr-37 {
  margin-right: -2.3125rem !important;
}

.-mb-37 {
  margin-bottom: -2.3125rem !important;
}

.-ml-37 {
  margin-left: -2.3125rem !important;
}

.pt-38 {
  padding-top: 2.375rem !important;
}

.pr-38 {
  padding-right: 2.375rem !important;
}

.pb-38 {
  padding-bottom: 2.375rem !important;
}

.pl-38 {
  padding-left: 2.375rem !important;
}

.mt-38 {
  margin-top: 2.375rem !important;
}

.mr-38 {
  margin-right: 2.375rem !important;
}

.mb-38 {
  margin-bottom: 2.375rem !important;
}

.ml-38 {
  margin-left: 2.375rem !important;
}

.-mt-38 {
  margin-top: -2.375rem !important;
}

.-mr-38 {
  margin-right: -2.375rem !important;
}

.-mb-38 {
  margin-bottom: -2.375rem !important;
}

.-ml-38 {
  margin-left: -2.375rem !important;
}

.pt-39 {
  padding-top: 2.4375rem !important;
}

.pr-39 {
  padding-right: 2.4375rem !important;
}

.pb-39 {
  padding-bottom: 2.4375rem !important;
}

.pl-39 {
  padding-left: 2.4375rem !important;
}

.mt-39 {
  margin-top: 2.4375rem !important;
}

.mr-39 {
  margin-right: 2.4375rem !important;
}

.mb-39 {
  margin-bottom: 2.4375rem !important;
}

.ml-39 {
  margin-left: 2.4375rem !important;
}

.-mt-39 {
  margin-top: -2.4375rem !important;
}

.-mr-39 {
  margin-right: -2.4375rem !important;
}

.-mb-39 {
  margin-bottom: -2.4375rem !important;
}

.-ml-39 {
  margin-left: -2.4375rem !important;
}

.pt-40 {
  padding-top: 2.5rem !important;
}

.pr-40 {
  padding-right: 2.5rem !important;
}

.pb-40 {
  padding-bottom: 2.5rem !important;
}

.pl-40 {
  padding-left: 2.5rem !important;
}

.mt-40 {
  margin-top: 2.5rem !important;
}

.mr-40 {
  margin-right: 2.5rem !important;
}

.mb-40 {
  margin-bottom: 2.5rem !important;
}

.ml-40 {
  margin-left: 2.5rem !important;
}

.-mt-40 {
  margin-top: -2.5rem !important;
}

.-mr-40 {
  margin-right: -2.5rem !important;
}

.-mb-40 {
  margin-bottom: -2.5rem !important;
}

.-ml-40 {
  margin-left: -2.5rem !important;
}

.pt-41 {
  padding-top: 2.5625rem !important;
}

.pr-41 {
  padding-right: 2.5625rem !important;
}

.pb-41 {
  padding-bottom: 2.5625rem !important;
}

.pl-41 {
  padding-left: 2.5625rem !important;
}

.mt-41 {
  margin-top: 2.5625rem !important;
}

.mr-41 {
  margin-right: 2.5625rem !important;
}

.mb-41 {
  margin-bottom: 2.5625rem !important;
}

.ml-41 {
  margin-left: 2.5625rem !important;
}

.-mt-41 {
  margin-top: -2.5625rem !important;
}

.-mr-41 {
  margin-right: -2.5625rem !important;
}

.-mb-41 {
  margin-bottom: -2.5625rem !important;
}

.-ml-41 {
  margin-left: -2.5625rem !important;
}

.pt-42 {
  padding-top: 2.625rem !important;
}

.pr-42 {
  padding-right: 2.625rem !important;
}

.pb-42 {
  padding-bottom: 2.625rem !important;
}

.pl-42 {
  padding-left: 2.625rem !important;
}

.mt-42 {
  margin-top: 2.625rem !important;
}

.mr-42 {
  margin-right: 2.625rem !important;
}

.mb-42 {
  margin-bottom: 2.625rem !important;
}

.ml-42 {
  margin-left: 2.625rem !important;
}

.-mt-42 {
  margin-top: -2.625rem !important;
}

.-mr-42 {
  margin-right: -2.625rem !important;
}

.-mb-42 {
  margin-bottom: -2.625rem !important;
}

.-ml-42 {
  margin-left: -2.625rem !important;
}

.pt-43 {
  padding-top: 2.6875rem !important;
}

.pr-43 {
  padding-right: 2.6875rem !important;
}

.pb-43 {
  padding-bottom: 2.6875rem !important;
}

.pl-43 {
  padding-left: 2.6875rem !important;
}

.mt-43 {
  margin-top: 2.6875rem !important;
}

.mr-43 {
  margin-right: 2.6875rem !important;
}

.mb-43 {
  margin-bottom: 2.6875rem !important;
}

.ml-43 {
  margin-left: 2.6875rem !important;
}

.-mt-43 {
  margin-top: -2.6875rem !important;
}

.-mr-43 {
  margin-right: -2.6875rem !important;
}

.-mb-43 {
  margin-bottom: -2.6875rem !important;
}

.-ml-43 {
  margin-left: -2.6875rem !important;
}

.pt-44 {
  padding-top: 2.75rem !important;
}

.pr-44 {
  padding-right: 2.75rem !important;
}

.pb-44 {
  padding-bottom: 2.75rem !important;
}

.pl-44 {
  padding-left: 2.75rem !important;
}

.mt-44 {
  margin-top: 2.75rem !important;
}

.mr-44 {
  margin-right: 2.75rem !important;
}

.mb-44 {
  margin-bottom: 2.75rem !important;
}

.ml-44 {
  margin-left: 2.75rem !important;
}

.-mt-44 {
  margin-top: -2.75rem !important;
}

.-mr-44 {
  margin-right: -2.75rem !important;
}

.-mb-44 {
  margin-bottom: -2.75rem !important;
}

.-ml-44 {
  margin-left: -2.75rem !important;
}

.pt-45 {
  padding-top: 2.8125rem !important;
}

.pr-45 {
  padding-right: 2.8125rem !important;
}

.pb-45 {
  padding-bottom: 2.8125rem !important;
}

.pl-45 {
  padding-left: 2.8125rem !important;
}

.mt-45 {
  margin-top: 2.8125rem !important;
}

.mr-45 {
  margin-right: 2.8125rem !important;
}

.mb-45 {
  margin-bottom: 2.8125rem !important;
}

.ml-45 {
  margin-left: 2.8125rem !important;
}

.-mt-45 {
  margin-top: -2.8125rem !important;
}

.-mr-45 {
  margin-right: -2.8125rem !important;
}

.-mb-45 {
  margin-bottom: -2.8125rem !important;
}

.-ml-45 {
  margin-left: -2.8125rem !important;
}

.pt-46 {
  padding-top: 2.875rem !important;
}

.pr-46 {
  padding-right: 2.875rem !important;
}

.pb-46 {
  padding-bottom: 2.875rem !important;
}

.pl-46 {
  padding-left: 2.875rem !important;
}

.mt-46 {
  margin-top: 2.875rem !important;
}

.mr-46 {
  margin-right: 2.875rem !important;
}

.mb-46 {
  margin-bottom: 2.875rem !important;
}

.ml-46 {
  margin-left: 2.875rem !important;
}

.-mt-46 {
  margin-top: -2.875rem !important;
}

.-mr-46 {
  margin-right: -2.875rem !important;
}

.-mb-46 {
  margin-bottom: -2.875rem !important;
}

.-ml-46 {
  margin-left: -2.875rem !important;
}

.pt-47 {
  padding-top: 2.9375rem !important;
}

.pr-47 {
  padding-right: 2.9375rem !important;
}

.pb-47 {
  padding-bottom: 2.9375rem !important;
}

.pl-47 {
  padding-left: 2.9375rem !important;
}

.mt-47 {
  margin-top: 2.9375rem !important;
}

.mr-47 {
  margin-right: 2.9375rem !important;
}

.mb-47 {
  margin-bottom: 2.9375rem !important;
}

.ml-47 {
  margin-left: 2.9375rem !important;
}

.-mt-47 {
  margin-top: -2.9375rem !important;
}

.-mr-47 {
  margin-right: -2.9375rem !important;
}

.-mb-47 {
  margin-bottom: -2.9375rem !important;
}

.-ml-47 {
  margin-left: -2.9375rem !important;
}

.pt-48 {
  padding-top: 3rem !important;
}

.pr-48 {
  padding-right: 3rem !important;
}

.pb-48 {
  padding-bottom: 3rem !important;
}

.pl-48 {
  padding-left: 3rem !important;
}

.mt-48 {
  margin-top: 3rem !important;
}

.mr-48 {
  margin-right: 3rem !important;
}

.mb-48 {
  margin-bottom: 3rem !important;
}

.ml-48 {
  margin-left: 3rem !important;
}

.-mt-48 {
  margin-top: -3rem !important;
}

.-mr-48 {
  margin-right: -3rem !important;
}

.-mb-48 {
  margin-bottom: -3rem !important;
}

.-ml-48 {
  margin-left: -3rem !important;
}

.pt-49 {
  padding-top: 3.0625rem !important;
}

.pr-49 {
  padding-right: 3.0625rem !important;
}

.pb-49 {
  padding-bottom: 3.0625rem !important;
}

.pl-49 {
  padding-left: 3.0625rem !important;
}

.mt-49 {
  margin-top: 3.0625rem !important;
}

.mr-49 {
  margin-right: 3.0625rem !important;
}

.mb-49 {
  margin-bottom: 3.0625rem !important;
}

.ml-49 {
  margin-left: 3.0625rem !important;
}

.-mt-49 {
  margin-top: -3.0625rem !important;
}

.-mr-49 {
  margin-right: -3.0625rem !important;
}

.-mb-49 {
  margin-bottom: -3.0625rem !important;
}

.-ml-49 {
  margin-left: -3.0625rem !important;
}

.pt-50 {
  padding-top: 3.125rem !important;
}

.pr-50 {
  padding-right: 3.125rem !important;
}

.pb-50 {
  padding-bottom: 3.125rem !important;
}

.pl-50 {
  padding-left: 3.125rem !important;
}

.mt-50 {
  margin-top: 3.125rem !important;
}

.mr-50 {
  margin-right: 3.125rem !important;
}

.mb-50 {
  margin-bottom: 3.125rem !important;
}

.ml-50 {
  margin-left: 3.125rem !important;
}

.-mt-50 {
  margin-top: -3.125rem !important;
}

.-mr-50 {
  margin-right: -3.125rem !important;
}

.-mb-50 {
  margin-bottom: -3.125rem !important;
}

.-ml-50 {
  margin-left: -3.125rem !important;
}

.pt-51 {
  padding-top: 3.1875rem !important;
}

.pr-51 {
  padding-right: 3.1875rem !important;
}

.pb-51 {
  padding-bottom: 3.1875rem !important;
}

.pl-51 {
  padding-left: 3.1875rem !important;
}

.mt-51 {
  margin-top: 3.1875rem !important;
}

.mr-51 {
  margin-right: 3.1875rem !important;
}

.mb-51 {
  margin-bottom: 3.1875rem !important;
}

.ml-51 {
  margin-left: 3.1875rem !important;
}

.-mt-51 {
  margin-top: -3.1875rem !important;
}

.-mr-51 {
  margin-right: -3.1875rem !important;
}

.-mb-51 {
  margin-bottom: -3.1875rem !important;
}

.-ml-51 {
  margin-left: -3.1875rem !important;
}

.pt-52 {
  padding-top: 3.25rem !important;
}

.pr-52 {
  padding-right: 3.25rem !important;
}

.pb-52 {
  padding-bottom: 3.25rem !important;
}

.pl-52 {
  padding-left: 3.25rem !important;
}

.mt-52 {
  margin-top: 3.25rem !important;
}

.mr-52 {
  margin-right: 3.25rem !important;
}

.mb-52 {
  margin-bottom: 3.25rem !important;
}

.ml-52 {
  margin-left: 3.25rem !important;
}

.-mt-52 {
  margin-top: -3.25rem !important;
}

.-mr-52 {
  margin-right: -3.25rem !important;
}

.-mb-52 {
  margin-bottom: -3.25rem !important;
}

.-ml-52 {
  margin-left: -3.25rem !important;
}

.pt-53 {
  padding-top: 3.3125rem !important;
}

.pr-53 {
  padding-right: 3.3125rem !important;
}

.pb-53 {
  padding-bottom: 3.3125rem !important;
}

.pl-53 {
  padding-left: 3.3125rem !important;
}

.mt-53 {
  margin-top: 3.3125rem !important;
}

.mr-53 {
  margin-right: 3.3125rem !important;
}

.mb-53 {
  margin-bottom: 3.3125rem !important;
}

.ml-53 {
  margin-left: 3.3125rem !important;
}

.-mt-53 {
  margin-top: -3.3125rem !important;
}

.-mr-53 {
  margin-right: -3.3125rem !important;
}

.-mb-53 {
  margin-bottom: -3.3125rem !important;
}

.-ml-53 {
  margin-left: -3.3125rem !important;
}

.pt-54 {
  padding-top: 3.375rem !important;
}

.pr-54 {
  padding-right: 3.375rem !important;
}

.pb-54 {
  padding-bottom: 3.375rem !important;
}

.pl-54 {
  padding-left: 3.375rem !important;
}

.mt-54 {
  margin-top: 3.375rem !important;
}

.mr-54 {
  margin-right: 3.375rem !important;
}

.mb-54 {
  margin-bottom: 3.375rem !important;
}

.ml-54 {
  margin-left: 3.375rem !important;
}

.-mt-54 {
  margin-top: -3.375rem !important;
}

.-mr-54 {
  margin-right: -3.375rem !important;
}

.-mb-54 {
  margin-bottom: -3.375rem !important;
}

.-ml-54 {
  margin-left: -3.375rem !important;
}

.pt-55 {
  padding-top: 3.4375rem !important;
}

.pr-55 {
  padding-right: 3.4375rem !important;
}

.pb-55 {
  padding-bottom: 3.4375rem !important;
}

.pl-55 {
  padding-left: 3.4375rem !important;
}

.mt-55 {
  margin-top: 3.4375rem !important;
}

.mr-55 {
  margin-right: 3.4375rem !important;
}

.mb-55 {
  margin-bottom: 3.4375rem !important;
}

.ml-55 {
  margin-left: 3.4375rem !important;
}

.-mt-55 {
  margin-top: -3.4375rem !important;
}

.-mr-55 {
  margin-right: -3.4375rem !important;
}

.-mb-55 {
  margin-bottom: -3.4375rem !important;
}

.-ml-55 {
  margin-left: -3.4375rem !important;
}

.pt-56 {
  padding-top: 3.5rem !important;
}

.pr-56 {
  padding-right: 3.5rem !important;
}

.pb-56 {
  padding-bottom: 3.5rem !important;
}

.pl-56 {
  padding-left: 3.5rem !important;
}

.mt-56 {
  margin-top: 3.5rem !important;
}

.mr-56 {
  margin-right: 3.5rem !important;
}

.mb-56 {
  margin-bottom: 3.5rem !important;
}

.ml-56 {
  margin-left: 3.5rem !important;
}

.-mt-56 {
  margin-top: -3.5rem !important;
}

.-mr-56 {
  margin-right: -3.5rem !important;
}

.-mb-56 {
  margin-bottom: -3.5rem !important;
}

.-ml-56 {
  margin-left: -3.5rem !important;
}

.pt-57 {
  padding-top: 3.5625rem !important;
}

.pr-57 {
  padding-right: 3.5625rem !important;
}

.pb-57 {
  padding-bottom: 3.5625rem !important;
}

.pl-57 {
  padding-left: 3.5625rem !important;
}

.mt-57 {
  margin-top: 3.5625rem !important;
}

.mr-57 {
  margin-right: 3.5625rem !important;
}

.mb-57 {
  margin-bottom: 3.5625rem !important;
}

.ml-57 {
  margin-left: 3.5625rem !important;
}

.-mt-57 {
  margin-top: -3.5625rem !important;
}

.-mr-57 {
  margin-right: -3.5625rem !important;
}

.-mb-57 {
  margin-bottom: -3.5625rem !important;
}

.-ml-57 {
  margin-left: -3.5625rem !important;
}

.pt-58 {
  padding-top: 3.625rem !important;
}

.pr-58 {
  padding-right: 3.625rem !important;
}

.pb-58 {
  padding-bottom: 3.625rem !important;
}

.pl-58 {
  padding-left: 3.625rem !important;
}

.mt-58 {
  margin-top: 3.625rem !important;
}

.mr-58 {
  margin-right: 3.625rem !important;
}

.mb-58 {
  margin-bottom: 3.625rem !important;
}

.ml-58 {
  margin-left: 3.625rem !important;
}

.-mt-58 {
  margin-top: -3.625rem !important;
}

.-mr-58 {
  margin-right: -3.625rem !important;
}

.-mb-58 {
  margin-bottom: -3.625rem !important;
}

.-ml-58 {
  margin-left: -3.625rem !important;
}

.pt-59 {
  padding-top: 3.6875rem !important;
}

.pr-59 {
  padding-right: 3.6875rem !important;
}

.pb-59 {
  padding-bottom: 3.6875rem !important;
}

.pl-59 {
  padding-left: 3.6875rem !important;
}

.mt-59 {
  margin-top: 3.6875rem !important;
}

.mr-59 {
  margin-right: 3.6875rem !important;
}

.mb-59 {
  margin-bottom: 3.6875rem !important;
}

.ml-59 {
  margin-left: 3.6875rem !important;
}

.-mt-59 {
  margin-top: -3.6875rem !important;
}

.-mr-59 {
  margin-right: -3.6875rem !important;
}

.-mb-59 {
  margin-bottom: -3.6875rem !important;
}

.-ml-59 {
  margin-left: -3.6875rem !important;
}

.pt-60 {
  padding-top: 3.75rem !important;
}

.pr-60 {
  padding-right: 3.75rem !important;
}

.pb-60 {
  padding-bottom: 3.75rem !important;
}

.pl-60 {
  padding-left: 3.75rem !important;
}

.mt-60 {
  margin-top: 3.75rem !important;
}

.mr-60 {
  margin-right: 3.75rem !important;
}

.mb-60 {
  margin-bottom: 3.75rem !important;
}

.ml-60 {
  margin-left: 3.75rem !important;
}

.-mt-60 {
  margin-top: -3.75rem !important;
}

.-mr-60 {
  margin-right: -3.75rem !important;
}

.-mb-60 {
  margin-bottom: -3.75rem !important;
}

.-ml-60 {
  margin-left: -3.75rem !important;
}

.pt-61 {
  padding-top: 3.8125rem !important;
}

.pr-61 {
  padding-right: 3.8125rem !important;
}

.pb-61 {
  padding-bottom: 3.8125rem !important;
}

.pl-61 {
  padding-left: 3.8125rem !important;
}

.mt-61 {
  margin-top: 3.8125rem !important;
}

.mr-61 {
  margin-right: 3.8125rem !important;
}

.mb-61 {
  margin-bottom: 3.8125rem !important;
}

.ml-61 {
  margin-left: 3.8125rem !important;
}

.-mt-61 {
  margin-top: -3.8125rem !important;
}

.-mr-61 {
  margin-right: -3.8125rem !important;
}

.-mb-61 {
  margin-bottom: -3.8125rem !important;
}

.-ml-61 {
  margin-left: -3.8125rem !important;
}

.pt-62 {
  padding-top: 3.875rem !important;
}

.pr-62 {
  padding-right: 3.875rem !important;
}

.pb-62 {
  padding-bottom: 3.875rem !important;
}

.pl-62 {
  padding-left: 3.875rem !important;
}

.mt-62 {
  margin-top: 3.875rem !important;
}

.mr-62 {
  margin-right: 3.875rem !important;
}

.mb-62 {
  margin-bottom: 3.875rem !important;
}

.ml-62 {
  margin-left: 3.875rem !important;
}

.-mt-62 {
  margin-top: -3.875rem !important;
}

.-mr-62 {
  margin-right: -3.875rem !important;
}

.-mb-62 {
  margin-bottom: -3.875rem !important;
}

.-ml-62 {
  margin-left: -3.875rem !important;
}

.pt-63 {
  padding-top: 3.9375rem !important;
}

.pr-63 {
  padding-right: 3.9375rem !important;
}

.pb-63 {
  padding-bottom: 3.9375rem !important;
}

.pl-63 {
  padding-left: 3.9375rem !important;
}

.mt-63 {
  margin-top: 3.9375rem !important;
}

.mr-63 {
  margin-right: 3.9375rem !important;
}

.mb-63 {
  margin-bottom: 3.9375rem !important;
}

.ml-63 {
  margin-left: 3.9375rem !important;
}

.-mt-63 {
  margin-top: -3.9375rem !important;
}

.-mr-63 {
  margin-right: -3.9375rem !important;
}

.-mb-63 {
  margin-bottom: -3.9375rem !important;
}

.-ml-63 {
  margin-left: -3.9375rem !important;
}

.pt-64 {
  padding-top: 4rem !important;
}

.pr-64 {
  padding-right: 4rem !important;
}

.pb-64 {
  padding-bottom: 4rem !important;
}

.pl-64 {
  padding-left: 4rem !important;
}

.mt-64 {
  margin-top: 4rem !important;
}

.mr-64 {
  margin-right: 4rem !important;
}

.mb-64 {
  margin-bottom: 4rem !important;
}

.ml-64 {
  margin-left: 4rem !important;
}

.-mt-64 {
  margin-top: -4rem !important;
}

.-mr-64 {
  margin-right: -4rem !important;
}

.-mb-64 {
  margin-bottom: -4rem !important;
}

.-ml-64 {
  margin-left: -4rem !important;
}

.pt-65 {
  padding-top: 4.0625rem !important;
}

.pr-65 {
  padding-right: 4.0625rem !important;
}

.pb-65 {
  padding-bottom: 4.0625rem !important;
}

.pl-65 {
  padding-left: 4.0625rem !important;
}

.mt-65 {
  margin-top: 4.0625rem !important;
}

.mr-65 {
  margin-right: 4.0625rem !important;
}

.mb-65 {
  margin-bottom: 4.0625rem !important;
}

.ml-65 {
  margin-left: 4.0625rem !important;
}

.-mt-65 {
  margin-top: -4.0625rem !important;
}

.-mr-65 {
  margin-right: -4.0625rem !important;
}

.-mb-65 {
  margin-bottom: -4.0625rem !important;
}

.-ml-65 {
  margin-left: -4.0625rem !important;
}

.pt-66 {
  padding-top: 4.125rem !important;
}

.pr-66 {
  padding-right: 4.125rem !important;
}

.pb-66 {
  padding-bottom: 4.125rem !important;
}

.pl-66 {
  padding-left: 4.125rem !important;
}

.mt-66 {
  margin-top: 4.125rem !important;
}

.mr-66 {
  margin-right: 4.125rem !important;
}

.mb-66 {
  margin-bottom: 4.125rem !important;
}

.ml-66 {
  margin-left: 4.125rem !important;
}

.-mt-66 {
  margin-top: -4.125rem !important;
}

.-mr-66 {
  margin-right: -4.125rem !important;
}

.-mb-66 {
  margin-bottom: -4.125rem !important;
}

.-ml-66 {
  margin-left: -4.125rem !important;
}

.pt-67 {
  padding-top: 4.1875rem !important;
}

.pr-67 {
  padding-right: 4.1875rem !important;
}

.pb-67 {
  padding-bottom: 4.1875rem !important;
}

.pl-67 {
  padding-left: 4.1875rem !important;
}

.mt-67 {
  margin-top: 4.1875rem !important;
}

.mr-67 {
  margin-right: 4.1875rem !important;
}

.mb-67 {
  margin-bottom: 4.1875rem !important;
}

.ml-67 {
  margin-left: 4.1875rem !important;
}

.-mt-67 {
  margin-top: -4.1875rem !important;
}

.-mr-67 {
  margin-right: -4.1875rem !important;
}

.-mb-67 {
  margin-bottom: -4.1875rem !important;
}

.-ml-67 {
  margin-left: -4.1875rem !important;
}

.pt-68 {
  padding-top: 4.25rem !important;
}

.pr-68 {
  padding-right: 4.25rem !important;
}

.pb-68 {
  padding-bottom: 4.25rem !important;
}

.pl-68 {
  padding-left: 4.25rem !important;
}

.mt-68 {
  margin-top: 4.25rem !important;
}

.mr-68 {
  margin-right: 4.25rem !important;
}

.mb-68 {
  margin-bottom: 4.25rem !important;
}

.ml-68 {
  margin-left: 4.25rem !important;
}

.-mt-68 {
  margin-top: -4.25rem !important;
}

.-mr-68 {
  margin-right: -4.25rem !important;
}

.-mb-68 {
  margin-bottom: -4.25rem !important;
}

.-ml-68 {
  margin-left: -4.25rem !important;
}

.pt-69 {
  padding-top: 4.3125rem !important;
}

.pr-69 {
  padding-right: 4.3125rem !important;
}

.pb-69 {
  padding-bottom: 4.3125rem !important;
}

.pl-69 {
  padding-left: 4.3125rem !important;
}

.mt-69 {
  margin-top: 4.3125rem !important;
}

.mr-69 {
  margin-right: 4.3125rem !important;
}

.mb-69 {
  margin-bottom: 4.3125rem !important;
}

.ml-69 {
  margin-left: 4.3125rem !important;
}

.-mt-69 {
  margin-top: -4.3125rem !important;
}

.-mr-69 {
  margin-right: -4.3125rem !important;
}

.-mb-69 {
  margin-bottom: -4.3125rem !important;
}

.-ml-69 {
  margin-left: -4.3125rem !important;
}

.pt-70 {
  padding-top: 4.375rem !important;
}

.pr-70 {
  padding-right: 4.375rem !important;
}

.pb-70 {
  padding-bottom: 4.375rem !important;
}

.pl-70 {
  padding-left: 4.375rem !important;
}

.mt-70 {
  margin-top: 4.375rem !important;
}

.mr-70 {
  margin-right: 4.375rem !important;
}

.mb-70 {
  margin-bottom: 4.375rem !important;
}

.ml-70 {
  margin-left: 4.375rem !important;
}

.-mt-70 {
  margin-top: -4.375rem !important;
}

.-mr-70 {
  margin-right: -4.375rem !important;
}

.-mb-70 {
  margin-bottom: -4.375rem !important;
}

.-ml-70 {
  margin-left: -4.375rem !important;
}

.pt-71 {
  padding-top: 4.4375rem !important;
}

.pr-71 {
  padding-right: 4.4375rem !important;
}

.pb-71 {
  padding-bottom: 4.4375rem !important;
}

.pl-71 {
  padding-left: 4.4375rem !important;
}

.mt-71 {
  margin-top: 4.4375rem !important;
}

.mr-71 {
  margin-right: 4.4375rem !important;
}

.mb-71 {
  margin-bottom: 4.4375rem !important;
}

.ml-71 {
  margin-left: 4.4375rem !important;
}

.-mt-71 {
  margin-top: -4.4375rem !important;
}

.-mr-71 {
  margin-right: -4.4375rem !important;
}

.-mb-71 {
  margin-bottom: -4.4375rem !important;
}

.-ml-71 {
  margin-left: -4.4375rem !important;
}

.pt-72 {
  padding-top: 4.5rem !important;
}

.pr-72 {
  padding-right: 4.5rem !important;
}

.pb-72 {
  padding-bottom: 4.5rem !important;
}

.pl-72 {
  padding-left: 4.5rem !important;
}

.mt-72 {
  margin-top: 4.5rem !important;
}

.mr-72 {
  margin-right: 4.5rem !important;
}

.mb-72 {
  margin-bottom: 4.5rem !important;
}

.ml-72 {
  margin-left: 4.5rem !important;
}

.-mt-72 {
  margin-top: -4.5rem !important;
}

.-mr-72 {
  margin-right: -4.5rem !important;
}

.-mb-72 {
  margin-bottom: -4.5rem !important;
}

.-ml-72 {
  margin-left: -4.5rem !important;
}

/* % Width / Height
-------------------------------------------------- */
.w-0 {
  width: 0% !important;
}

.h-0 {
  height: 0% !important;
}

.min-w-0 {
  min-width: 0% !important;
}

.min-h-0 {
  min-height: 0% !important;
}

.max-w-0 {
  max-width: 0% !important;
}

.max-h-0 {
  max-height: 0% !important;
}

.w-1 {
  width: 1% !important;
}

.h-1 {
  height: 1% !important;
}

.min-w-1 {
  min-width: 1% !important;
}

.min-h-1 {
  min-height: 1% !important;
}

.max-w-1 {
  max-width: 1% !important;
}

.max-h-1 {
  max-height: 1% !important;
}

.w-2 {
  width: 2% !important;
}

.h-2 {
  height: 2% !important;
}

.min-w-2 {
  min-width: 2% !important;
}

.min-h-2 {
  min-height: 2% !important;
}

.max-w-2 {
  max-width: 2% !important;
}

.max-h-2 {
  max-height: 2% !important;
}

.w-3 {
  width: 3% !important;
}

.h-3 {
  height: 3% !important;
}

.min-w-3 {
  min-width: 3% !important;
}

.min-h-3 {
  min-height: 3% !important;
}

.max-w-3 {
  max-width: 3% !important;
}

.max-h-3 {
  max-height: 3% !important;
}

.w-4 {
  width: 4% !important;
}

.h-4 {
  height: 4% !important;
}

.min-w-4 {
  min-width: 4% !important;
}

.min-h-4 {
  min-height: 4% !important;
}

.max-w-4 {
  max-width: 4% !important;
}

.max-h-4 {
  max-height: 4% !important;
}

.w-5 {
  width: 5% !important;
}

.h-5 {
  height: 5% !important;
}

.min-w-5 {
  min-width: 5% !important;
}

.min-h-5 {
  min-height: 5% !important;
}

.max-w-5 {
  max-width: 5% !important;
}

.max-h-5 {
  max-height: 5% !important;
}

.w-6 {
  width: 6% !important;
}

.h-6 {
  height: 6% !important;
}

.min-w-6 {
  min-width: 6% !important;
}

.min-h-6 {
  min-height: 6% !important;
}

.max-w-6 {
  max-width: 6% !important;
}

.max-h-6 {
  max-height: 6% !important;
}

.w-7 {
  width: 7% !important;
}

.h-7 {
  height: 7% !important;
}

.min-w-7 {
  min-width: 7% !important;
}

.min-h-7 {
  min-height: 7% !important;
}

.max-w-7 {
  max-width: 7% !important;
}

.max-h-7 {
  max-height: 7% !important;
}

.w-8 {
  width: 8% !important;
}

.h-8 {
  height: 8% !important;
}

.min-w-8 {
  min-width: 8% !important;
}

.min-h-8 {
  min-height: 8% !important;
}

.max-w-8 {
  max-width: 8% !important;
}

.max-h-8 {
  max-height: 8% !important;
}

.w-9 {
  width: 9% !important;
}

.h-9 {
  height: 9% !important;
}

.min-w-9 {
  min-width: 9% !important;
}

.min-h-9 {
  min-height: 9% !important;
}

.max-w-9 {
  max-width: 9% !important;
}

.max-h-9 {
  max-height: 9% !important;
}

.w-10 {
  width: 10% !important;
}

.h-10 {
  height: 10% !important;
}

.min-w-10 {
  min-width: 10% !important;
}

.min-h-10 {
  min-height: 10% !important;
}

.max-w-10 {
  max-width: 10% !important;
}

.max-h-10 {
  max-height: 10% !important;
}

.w-11 {
  width: 11% !important;
}

.h-11 {
  height: 11% !important;
}

.min-w-11 {
  min-width: 11% !important;
}

.min-h-11 {
  min-height: 11% !important;
}

.max-w-11 {
  max-width: 11% !important;
}

.max-h-11 {
  max-height: 11% !important;
}

.w-12 {
  width: 12% !important;
}

.h-12 {
  height: 12% !important;
}

.min-w-12 {
  min-width: 12% !important;
}

.min-h-12 {
  min-height: 12% !important;
}

.max-w-12 {
  max-width: 12% !important;
}

.max-h-12 {
  max-height: 12% !important;
}

.w-13 {
  width: 13% !important;
}

.h-13 {
  height: 13% !important;
}

.min-w-13 {
  min-width: 13% !important;
}

.min-h-13 {
  min-height: 13% !important;
}

.max-w-13 {
  max-width: 13% !important;
}

.max-h-13 {
  max-height: 13% !important;
}

.w-14 {
  width: 14% !important;
}

.h-14 {
  height: 14% !important;
}

.min-w-14 {
  min-width: 14% !important;
}

.min-h-14 {
  min-height: 14% !important;
}

.max-w-14 {
  max-width: 14% !important;
}

.max-h-14 {
  max-height: 14% !important;
}

.w-15 {
  width: 15% !important;
}

.h-15 {
  height: 15% !important;
}

.min-w-15 {
  min-width: 15% !important;
}

.min-h-15 {
  min-height: 15% !important;
}

.max-w-15 {
  max-width: 15% !important;
}

.max-h-15 {
  max-height: 15% !important;
}

.w-16 {
  width: 16% !important;
}

.h-16 {
  height: 16% !important;
}

.min-w-16 {
  min-width: 16% !important;
}

.min-h-16 {
  min-height: 16% !important;
}

.max-w-16 {
  max-width: 16% !important;
}

.max-h-16 {
  max-height: 16% !important;
}

.w-17 {
  width: 17% !important;
}

.h-17 {
  height: 17% !important;
}

.min-w-17 {
  min-width: 17% !important;
}

.min-h-17 {
  min-height: 17% !important;
}

.max-w-17 {
  max-width: 17% !important;
}

.max-h-17 {
  max-height: 17% !important;
}

.w-18 {
  width: 18% !important;
}

.h-18 {
  height: 18% !important;
}

.min-w-18 {
  min-width: 18% !important;
}

.min-h-18 {
  min-height: 18% !important;
}

.max-w-18 {
  max-width: 18% !important;
}

.max-h-18 {
  max-height: 18% !important;
}

.w-19 {
  width: 19% !important;
}

.h-19 {
  height: 19% !important;
}

.min-w-19 {
  min-width: 19% !important;
}

.min-h-19 {
  min-height: 19% !important;
}

.max-w-19 {
  max-width: 19% !important;
}

.max-h-19 {
  max-height: 19% !important;
}

.w-20 {
  width: 20% !important;
}

.h-20 {
  height: 20% !important;
}

.min-w-20 {
  min-width: 20% !important;
}

.min-h-20 {
  min-height: 20% !important;
}

.max-w-20 {
  max-width: 20% !important;
}

.max-h-20 {
  max-height: 20% !important;
}

.w-21 {
  width: 21% !important;
}

.h-21 {
  height: 21% !important;
}

.min-w-21 {
  min-width: 21% !important;
}

.min-h-21 {
  min-height: 21% !important;
}

.max-w-21 {
  max-width: 21% !important;
}

.max-h-21 {
  max-height: 21% !important;
}

.w-22 {
  width: 22% !important;
}

.h-22 {
  height: 22% !important;
}

.min-w-22 {
  min-width: 22% !important;
}

.min-h-22 {
  min-height: 22% !important;
}

.max-w-22 {
  max-width: 22% !important;
}

.max-h-22 {
  max-height: 22% !important;
}

.w-23 {
  width: 23% !important;
}

.h-23 {
  height: 23% !important;
}

.min-w-23 {
  min-width: 23% !important;
}

.min-h-23 {
  min-height: 23% !important;
}

.max-w-23 {
  max-width: 23% !important;
}

.max-h-23 {
  max-height: 23% !important;
}

.w-24 {
  width: 24% !important;
}

.h-24 {
  height: 24% !important;
}

.min-w-24 {
  min-width: 24% !important;
}

.min-h-24 {
  min-height: 24% !important;
}

.max-w-24 {
  max-width: 24% !important;
}

.max-h-24 {
  max-height: 24% !important;
}

.w-25 {
  width: 25% !important;
}

.h-25 {
  height: 25% !important;
}

.min-w-25 {
  min-width: 25% !important;
}

.min-h-25 {
  min-height: 25% !important;
}

.max-w-25 {
  max-width: 25% !important;
}

.max-h-25 {
  max-height: 25% !important;
}

.w-26 {
  width: 26% !important;
}

.h-26 {
  height: 26% !important;
}

.min-w-26 {
  min-width: 26% !important;
}

.min-h-26 {
  min-height: 26% !important;
}

.max-w-26 {
  max-width: 26% !important;
}

.max-h-26 {
  max-height: 26% !important;
}

.w-27 {
  width: 27% !important;
}

.h-27 {
  height: 27% !important;
}

.min-w-27 {
  min-width: 27% !important;
}

.min-h-27 {
  min-height: 27% !important;
}

.max-w-27 {
  max-width: 27% !important;
}

.max-h-27 {
  max-height: 27% !important;
}

.w-28 {
  width: 28% !important;
}

.h-28 {
  height: 28% !important;
}

.min-w-28 {
  min-width: 28% !important;
}

.min-h-28 {
  min-height: 28% !important;
}

.max-w-28 {
  max-width: 28% !important;
}

.max-h-28 {
  max-height: 28% !important;
}

.w-29 {
  width: 29% !important;
}

.h-29 {
  height: 29% !important;
}

.min-w-29 {
  min-width: 29% !important;
}

.min-h-29 {
  min-height: 29% !important;
}

.max-w-29 {
  max-width: 29% !important;
}

.max-h-29 {
  max-height: 29% !important;
}

.w-30 {
  width: 30% !important;
}

.h-30 {
  height: 30% !important;
}

.min-w-30 {
  min-width: 30% !important;
}

.min-h-30 {
  min-height: 30% !important;
}

.max-w-30 {
  max-width: 30% !important;
}

.max-h-30 {
  max-height: 30% !important;
}

.w-31 {
  width: 31% !important;
}

.h-31 {
  height: 31% !important;
}

.min-w-31 {
  min-width: 31% !important;
}

.min-h-31 {
  min-height: 31% !important;
}

.max-w-31 {
  max-width: 31% !important;
}

.max-h-31 {
  max-height: 31% !important;
}

.w-32 {
  width: 32% !important;
}

.h-32 {
  height: 32% !important;
}

.min-w-32 {
  min-width: 32% !important;
}

.min-h-32 {
  min-height: 32% !important;
}

.max-w-32 {
  max-width: 32% !important;
}

.max-h-32 {
  max-height: 32% !important;
}

.w-33 {
  width: 33% !important;
}

.h-33 {
  height: 33% !important;
}

.min-w-33 {
  min-width: 33% !important;
}

.min-h-33 {
  min-height: 33% !important;
}

.max-w-33 {
  max-width: 33% !important;
}

.max-h-33 {
  max-height: 33% !important;
}

.w-34 {
  width: 34% !important;
}

.h-34 {
  height: 34% !important;
}

.min-w-34 {
  min-width: 34% !important;
}

.min-h-34 {
  min-height: 34% !important;
}

.max-w-34 {
  max-width: 34% !important;
}

.max-h-34 {
  max-height: 34% !important;
}

.w-35 {
  width: 35% !important;
}

.h-35 {
  height: 35% !important;
}

.min-w-35 {
  min-width: 35% !important;
}

.min-h-35 {
  min-height: 35% !important;
}

.max-w-35 {
  max-width: 35% !important;
}

.max-h-35 {
  max-height: 35% !important;
}

.w-36 {
  width: 36% !important;
}

.h-36 {
  height: 36% !important;
}

.min-w-36 {
  min-width: 36% !important;
}

.min-h-36 {
  min-height: 36% !important;
}

.max-w-36 {
  max-width: 36% !important;
}

.max-h-36 {
  max-height: 36% !important;
}

.w-37 {
  width: 37% !important;
}

.h-37 {
  height: 37% !important;
}

.min-w-37 {
  min-width: 37% !important;
}

.min-h-37 {
  min-height: 37% !important;
}

.max-w-37 {
  max-width: 37% !important;
}

.max-h-37 {
  max-height: 37% !important;
}

.w-38 {
  width: 38% !important;
}

.h-38 {
  height: 38% !important;
}

.min-w-38 {
  min-width: 38% !important;
}

.min-h-38 {
  min-height: 38% !important;
}

.max-w-38 {
  max-width: 38% !important;
}

.max-h-38 {
  max-height: 38% !important;
}

.w-39 {
  width: 39% !important;
}

.h-39 {
  height: 39% !important;
}

.min-w-39 {
  min-width: 39% !important;
}

.min-h-39 {
  min-height: 39% !important;
}

.max-w-39 {
  max-width: 39% !important;
}

.max-h-39 {
  max-height: 39% !important;
}

.w-40 {
  width: 40% !important;
}

.h-40 {
  height: 40% !important;
}

.min-w-40 {
  min-width: 40% !important;
}

.min-h-40 {
  min-height: 40% !important;
}

.max-w-40 {
  max-width: 40% !important;
}

.max-h-40 {
  max-height: 40% !important;
}

.w-41 {
  width: 41% !important;
}

.h-41 {
  height: 41% !important;
}

.min-w-41 {
  min-width: 41% !important;
}

.min-h-41 {
  min-height: 41% !important;
}

.max-w-41 {
  max-width: 41% !important;
}

.max-h-41 {
  max-height: 41% !important;
}

.w-42 {
  width: 42% !important;
}

.h-42 {
  height: 42% !important;
}

.min-w-42 {
  min-width: 42% !important;
}

.min-h-42 {
  min-height: 42% !important;
}

.max-w-42 {
  max-width: 42% !important;
}

.max-h-42 {
  max-height: 42% !important;
}

.w-43 {
  width: 43% !important;
}

.h-43 {
  height: 43% !important;
}

.min-w-43 {
  min-width: 43% !important;
}

.min-h-43 {
  min-height: 43% !important;
}

.max-w-43 {
  max-width: 43% !important;
}

.max-h-43 {
  max-height: 43% !important;
}

.w-44 {
  width: 44% !important;
}

.h-44 {
  height: 44% !important;
}

.min-w-44 {
  min-width: 44% !important;
}

.min-h-44 {
  min-height: 44% !important;
}

.max-w-44 {
  max-width: 44% !important;
}

.max-h-44 {
  max-height: 44% !important;
}

.w-45 {
  width: 45% !important;
}

.h-45 {
  height: 45% !important;
}

.min-w-45 {
  min-width: 45% !important;
}

.min-h-45 {
  min-height: 45% !important;
}

.max-w-45 {
  max-width: 45% !important;
}

.max-h-45 {
  max-height: 45% !important;
}

.w-46 {
  width: 46% !important;
}

.h-46 {
  height: 46% !important;
}

.min-w-46 {
  min-width: 46% !important;
}

.min-h-46 {
  min-height: 46% !important;
}

.max-w-46 {
  max-width: 46% !important;
}

.max-h-46 {
  max-height: 46% !important;
}

.w-47 {
  width: 47% !important;
}

.h-47 {
  height: 47% !important;
}

.min-w-47 {
  min-width: 47% !important;
}

.min-h-47 {
  min-height: 47% !important;
}

.max-w-47 {
  max-width: 47% !important;
}

.max-h-47 {
  max-height: 47% !important;
}

.w-48 {
  width: 48% !important;
}

.h-48 {
  height: 48% !important;
}

.min-w-48 {
  min-width: 48% !important;
}

.min-h-48 {
  min-height: 48% !important;
}

.max-w-48 {
  max-width: 48% !important;
}

.max-h-48 {
  max-height: 48% !important;
}

.w-49 {
  width: 49% !important;
}

.h-49 {
  height: 49% !important;
}

.min-w-49 {
  min-width: 49% !important;
}

.min-h-49 {
  min-height: 49% !important;
}

.max-w-49 {
  max-width: 49% !important;
}

.max-h-49 {
  max-height: 49% !important;
}

.w-50 {
  width: 50% !important;
}

.h-50 {
  height: 50% !important;
}

.min-w-50 {
  min-width: 50% !important;
}

.min-h-50 {
  min-height: 50% !important;
}

.max-w-50 {
  max-width: 50% !important;
}

.max-h-50 {
  max-height: 50% !important;
}

.w-51 {
  width: 51% !important;
}

.h-51 {
  height: 51% !important;
}

.min-w-51 {
  min-width: 51% !important;
}

.min-h-51 {
  min-height: 51% !important;
}

.max-w-51 {
  max-width: 51% !important;
}

.max-h-51 {
  max-height: 51% !important;
}

.w-52 {
  width: 52% !important;
}

.h-52 {
  height: 52% !important;
}

.min-w-52 {
  min-width: 52% !important;
}

.min-h-52 {
  min-height: 52% !important;
}

.max-w-52 {
  max-width: 52% !important;
}

.max-h-52 {
  max-height: 52% !important;
}

.w-53 {
  width: 53% !important;
}

.h-53 {
  height: 53% !important;
}

.min-w-53 {
  min-width: 53% !important;
}

.min-h-53 {
  min-height: 53% !important;
}

.max-w-53 {
  max-width: 53% !important;
}

.max-h-53 {
  max-height: 53% !important;
}

.w-54 {
  width: 54% !important;
}

.h-54 {
  height: 54% !important;
}

.min-w-54 {
  min-width: 54% !important;
}

.min-h-54 {
  min-height: 54% !important;
}

.max-w-54 {
  max-width: 54% !important;
}

.max-h-54 {
  max-height: 54% !important;
}

.w-55 {
  width: 55% !important;
}

.h-55 {
  height: 55% !important;
}

.min-w-55 {
  min-width: 55% !important;
}

.min-h-55 {
  min-height: 55% !important;
}

.max-w-55 {
  max-width: 55% !important;
}

.max-h-55 {
  max-height: 55% !important;
}

.w-56 {
  width: 56% !important;
}

.h-56 {
  height: 56% !important;
}

.min-w-56 {
  min-width: 56% !important;
}

.min-h-56 {
  min-height: 56% !important;
}

.max-w-56 {
  max-width: 56% !important;
}

.max-h-56 {
  max-height: 56% !important;
}

.w-57 {
  width: 57% !important;
}

.h-57 {
  height: 57% !important;
}

.min-w-57 {
  min-width: 57% !important;
}

.min-h-57 {
  min-height: 57% !important;
}

.max-w-57 {
  max-width: 57% !important;
}

.max-h-57 {
  max-height: 57% !important;
}

.w-58 {
  width: 58% !important;
}

.h-58 {
  height: 58% !important;
}

.min-w-58 {
  min-width: 58% !important;
}

.min-h-58 {
  min-height: 58% !important;
}

.max-w-58 {
  max-width: 58% !important;
}

.max-h-58 {
  max-height: 58% !important;
}

.w-59 {
  width: 59% !important;
}

.h-59 {
  height: 59% !important;
}

.min-w-59 {
  min-width: 59% !important;
}

.min-h-59 {
  min-height: 59% !important;
}

.max-w-59 {
  max-width: 59% !important;
}

.max-h-59 {
  max-height: 59% !important;
}

.w-60 {
  width: 60% !important;
}

.h-60 {
  height: 60% !important;
}

.min-w-60 {
  min-width: 60% !important;
}

.min-h-60 {
  min-height: 60% !important;
}

.max-w-60 {
  max-width: 60% !important;
}

.max-h-60 {
  max-height: 60% !important;
}

.w-61 {
  width: 61% !important;
}

.h-61 {
  height: 61% !important;
}

.min-w-61 {
  min-width: 61% !important;
}

.min-h-61 {
  min-height: 61% !important;
}

.max-w-61 {
  max-width: 61% !important;
}

.max-h-61 {
  max-height: 61% !important;
}

.w-62 {
  width: 62% !important;
}

.h-62 {
  height: 62% !important;
}

.min-w-62 {
  min-width: 62% !important;
}

.min-h-62 {
  min-height: 62% !important;
}

.max-w-62 {
  max-width: 62% !important;
}

.max-h-62 {
  max-height: 62% !important;
}

.w-63 {
  width: 63% !important;
}

.h-63 {
  height: 63% !important;
}

.min-w-63 {
  min-width: 63% !important;
}

.min-h-63 {
  min-height: 63% !important;
}

.max-w-63 {
  max-width: 63% !important;
}

.max-h-63 {
  max-height: 63% !important;
}

.w-64 {
  width: 64% !important;
}

.h-64 {
  height: 64% !important;
}

.min-w-64 {
  min-width: 64% !important;
}

.min-h-64 {
  min-height: 64% !important;
}

.max-w-64 {
  max-width: 64% !important;
}

.max-h-64 {
  max-height: 64% !important;
}

.w-65 {
  width: 65% !important;
}

.h-65 {
  height: 65% !important;
}

.min-w-65 {
  min-width: 65% !important;
}

.min-h-65 {
  min-height: 65% !important;
}

.max-w-65 {
  max-width: 65% !important;
}

.max-h-65 {
  max-height: 65% !important;
}

.w-66 {
  width: 66% !important;
}

.h-66 {
  height: 66% !important;
}

.min-w-66 {
  min-width: 66% !important;
}

.min-h-66 {
  min-height: 66% !important;
}

.max-w-66 {
  max-width: 66% !important;
}

.max-h-66 {
  max-height: 66% !important;
}

.w-67 {
  width: 67% !important;
}

.h-67 {
  height: 67% !important;
}

.min-w-67 {
  min-width: 67% !important;
}

.min-h-67 {
  min-height: 67% !important;
}

.max-w-67 {
  max-width: 67% !important;
}

.max-h-67 {
  max-height: 67% !important;
}

.w-68 {
  width: 68% !important;
}

.h-68 {
  height: 68% !important;
}

.min-w-68 {
  min-width: 68% !important;
}

.min-h-68 {
  min-height: 68% !important;
}

.max-w-68 {
  max-width: 68% !important;
}

.max-h-68 {
  max-height: 68% !important;
}

.w-69 {
  width: 69% !important;
}

.h-69 {
  height: 69% !important;
}

.min-w-69 {
  min-width: 69% !important;
}

.min-h-69 {
  min-height: 69% !important;
}

.max-w-69 {
  max-width: 69% !important;
}

.max-h-69 {
  max-height: 69% !important;
}

.w-70 {
  width: 70% !important;
}

.h-70 {
  height: 70% !important;
}

.min-w-70 {
  min-width: 70% !important;
}

.min-h-70 {
  min-height: 70% !important;
}

.max-w-70 {
  max-width: 70% !important;
}

.max-h-70 {
  max-height: 70% !important;
}

.w-71 {
  width: 71% !important;
}

.h-71 {
  height: 71% !important;
}

.min-w-71 {
  min-width: 71% !important;
}

.min-h-71 {
  min-height: 71% !important;
}

.max-w-71 {
  max-width: 71% !important;
}

.max-h-71 {
  max-height: 71% !important;
}

.w-72 {
  width: 72% !important;
}

.h-72 {
  height: 72% !important;
}

.min-w-72 {
  min-width: 72% !important;
}

.min-h-72 {
  min-height: 72% !important;
}

.max-w-72 {
  max-width: 72% !important;
}

.max-h-72 {
  max-height: 72% !important;
}

.w-73 {
  width: 73% !important;
}

.h-73 {
  height: 73% !important;
}

.min-w-73 {
  min-width: 73% !important;
}

.min-h-73 {
  min-height: 73% !important;
}

.max-w-73 {
  max-width: 73% !important;
}

.max-h-73 {
  max-height: 73% !important;
}

.w-74 {
  width: 74% !important;
}

.h-74 {
  height: 74% !important;
}

.min-w-74 {
  min-width: 74% !important;
}

.min-h-74 {
  min-height: 74% !important;
}

.max-w-74 {
  max-width: 74% !important;
}

.max-h-74 {
  max-height: 74% !important;
}

.w-75 {
  width: 75% !important;
}

.h-75 {
  height: 75% !important;
}

.min-w-75 {
  min-width: 75% !important;
}

.min-h-75 {
  min-height: 75% !important;
}

.max-w-75 {
  max-width: 75% !important;
}

.max-h-75 {
  max-height: 75% !important;
}

.w-76 {
  width: 76% !important;
}

.h-76 {
  height: 76% !important;
}

.min-w-76 {
  min-width: 76% !important;
}

.min-h-76 {
  min-height: 76% !important;
}

.max-w-76 {
  max-width: 76% !important;
}

.max-h-76 {
  max-height: 76% !important;
}

.w-77 {
  width: 77% !important;
}

.h-77 {
  height: 77% !important;
}

.min-w-77 {
  min-width: 77% !important;
}

.min-h-77 {
  min-height: 77% !important;
}

.max-w-77 {
  max-width: 77% !important;
}

.max-h-77 {
  max-height: 77% !important;
}

.w-78 {
  width: 78% !important;
}

.h-78 {
  height: 78% !important;
}

.min-w-78 {
  min-width: 78% !important;
}

.min-h-78 {
  min-height: 78% !important;
}

.max-w-78 {
  max-width: 78% !important;
}

.max-h-78 {
  max-height: 78% !important;
}

.w-79 {
  width: 79% !important;
}

.h-79 {
  height: 79% !important;
}

.min-w-79 {
  min-width: 79% !important;
}

.min-h-79 {
  min-height: 79% !important;
}

.max-w-79 {
  max-width: 79% !important;
}

.max-h-79 {
  max-height: 79% !important;
}

.w-80 {
  width: 80% !important;
}

.h-80 {
  height: 80% !important;
}

.min-w-80 {
  min-width: 80% !important;
}

.min-h-80 {
  min-height: 80% !important;
}

.max-w-80 {
  max-width: 80% !important;
}

.max-h-80 {
  max-height: 80% !important;
}

.w-81 {
  width: 81% !important;
}

.h-81 {
  height: 81% !important;
}

.min-w-81 {
  min-width: 81% !important;
}

.min-h-81 {
  min-height: 81% !important;
}

.max-w-81 {
  max-width: 81% !important;
}

.max-h-81 {
  max-height: 81% !important;
}

.w-82 {
  width: 82% !important;
}

.h-82 {
  height: 82% !important;
}

.min-w-82 {
  min-width: 82% !important;
}

.min-h-82 {
  min-height: 82% !important;
}

.max-w-82 {
  max-width: 82% !important;
}

.max-h-82 {
  max-height: 82% !important;
}

.w-83 {
  width: 83% !important;
}

.h-83 {
  height: 83% !important;
}

.min-w-83 {
  min-width: 83% !important;
}

.min-h-83 {
  min-height: 83% !important;
}

.max-w-83 {
  max-width: 83% !important;
}

.max-h-83 {
  max-height: 83% !important;
}

.w-84 {
  width: 84% !important;
}

.h-84 {
  height: 84% !important;
}

.min-w-84 {
  min-width: 84% !important;
}

.min-h-84 {
  min-height: 84% !important;
}

.max-w-84 {
  max-width: 84% !important;
}

.max-h-84 {
  max-height: 84% !important;
}

.w-85 {
  width: 85% !important;
}

.h-85 {
  height: 85% !important;
}

.min-w-85 {
  min-width: 85% !important;
}

.min-h-85 {
  min-height: 85% !important;
}

.max-w-85 {
  max-width: 85% !important;
}

.max-h-85 {
  max-height: 85% !important;
}

.w-86 {
  width: 86% !important;
}

.h-86 {
  height: 86% !important;
}

.min-w-86 {
  min-width: 86% !important;
}

.min-h-86 {
  min-height: 86% !important;
}

.max-w-86 {
  max-width: 86% !important;
}

.max-h-86 {
  max-height: 86% !important;
}

.w-87 {
  width: 87% !important;
}

.h-87 {
  height: 87% !important;
}

.min-w-87 {
  min-width: 87% !important;
}

.min-h-87 {
  min-height: 87% !important;
}

.max-w-87 {
  max-width: 87% !important;
}

.max-h-87 {
  max-height: 87% !important;
}

.w-88 {
  width: 88% !important;
}

.h-88 {
  height: 88% !important;
}

.min-w-88 {
  min-width: 88% !important;
}

.min-h-88 {
  min-height: 88% !important;
}

.max-w-88 {
  max-width: 88% !important;
}

.max-h-88 {
  max-height: 88% !important;
}

.w-89 {
  width: 89% !important;
}

.h-89 {
  height: 89% !important;
}

.min-w-89 {
  min-width: 89% !important;
}

.min-h-89 {
  min-height: 89% !important;
}

.max-w-89 {
  max-width: 89% !important;
}

.max-h-89 {
  max-height: 89% !important;
}

.w-90 {
  width: 90% !important;
}

.h-90 {
  height: 90% !important;
}

.min-w-90 {
  min-width: 90% !important;
}

.min-h-90 {
  min-height: 90% !important;
}

.max-w-90 {
  max-width: 90% !important;
}

.max-h-90 {
  max-height: 90% !important;
}

.w-91 {
  width: 91% !important;
}

.h-91 {
  height: 91% !important;
}

.min-w-91 {
  min-width: 91% !important;
}

.min-h-91 {
  min-height: 91% !important;
}

.max-w-91 {
  max-width: 91% !important;
}

.max-h-91 {
  max-height: 91% !important;
}

.w-92 {
  width: 92% !important;
}

.h-92 {
  height: 92% !important;
}

.min-w-92 {
  min-width: 92% !important;
}

.min-h-92 {
  min-height: 92% !important;
}

.max-w-92 {
  max-width: 92% !important;
}

.max-h-92 {
  max-height: 92% !important;
}

.w-93 {
  width: 93% !important;
}

.h-93 {
  height: 93% !important;
}

.min-w-93 {
  min-width: 93% !important;
}

.min-h-93 {
  min-height: 93% !important;
}

.max-w-93 {
  max-width: 93% !important;
}

.max-h-93 {
  max-height: 93% !important;
}

.w-94 {
  width: 94% !important;
}

.h-94 {
  height: 94% !important;
}

.min-w-94 {
  min-width: 94% !important;
}

.min-h-94 {
  min-height: 94% !important;
}

.max-w-94 {
  max-width: 94% !important;
}

.max-h-94 {
  max-height: 94% !important;
}

.w-95 {
  width: 95% !important;
}

.h-95 {
  height: 95% !important;
}

.min-w-95 {
  min-width: 95% !important;
}

.min-h-95 {
  min-height: 95% !important;
}

.max-w-95 {
  max-width: 95% !important;
}

.max-h-95 {
  max-height: 95% !important;
}

.w-96 {
  width: 96% !important;
}

.h-96 {
  height: 96% !important;
}

.min-w-96 {
  min-width: 96% !important;
}

.min-h-96 {
  min-height: 96% !important;
}

.max-w-96 {
  max-width: 96% !important;
}

.max-h-96 {
  max-height: 96% !important;
}

.w-97 {
  width: 97% !important;
}

.h-97 {
  height: 97% !important;
}

.min-w-97 {
  min-width: 97% !important;
}

.min-h-97 {
  min-height: 97% !important;
}

.max-w-97 {
  max-width: 97% !important;
}

.max-h-97 {
  max-height: 97% !important;
}

.w-98 {
  width: 98% !important;
}

.h-98 {
  height: 98% !important;
}

.min-w-98 {
  min-width: 98% !important;
}

.min-h-98 {
  min-height: 98% !important;
}

.max-w-98 {
  max-width: 98% !important;
}

.max-h-98 {
  max-height: 98% !important;
}

.w-99 {
  width: 99% !important;
}

.h-99 {
  height: 99% !important;
}

.min-w-99 {
  min-width: 99% !important;
}

.min-h-99 {
  min-height: 99% !important;
}

.max-w-99 {
  max-width: 99% !important;
}

.max-h-99 {
  max-height: 99% !important;
}

.w-100 {
  width: 100% !important;
}

.h-100 {
  height: 100% !important;
}

.min-w-100 {
  min-width: 100% !important;
}

.min-h-100 {
  min-height: 100% !important;
}

.max-w-100 {
  max-width: 100% !important;
}

.max-h-100 {
  max-height: 100% !important;
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.w-screen {
  width: 100vw;
}

.w-min {
  width: -webkit-min-content;
  width: -moz-min-content;
  width: min-content;
}

.w-max {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

.w-fit {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.max-w-auto {
  max-width: auto;
}

.max-w-full {
  max-width: 100%;
}

.max-w-screen {
  max-width: 100vh;
}

.max-w-min {
  max-width: -webkit-min-content;
  max-width: -moz-min-content;
  max-width: min-content;
}

.max-w-max {
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
}

.max-w-fit {
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
}

.min-w-auto {
  min-width: auto;
}

.min-w-full {
  min-width: 100%;
}

.min-w-screen {
  min-width: 100vh;
}

.min-w-min {
  min-width: -webkit-min-content;
  min-width: -moz-min-content;
  min-width: min-content;
}

.min-w-max {
  min-width: -webkit-max-content;
  min-width: -moz-max-content;
  min-width: max-content;
}

.min-w-fit {
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

.h-min {
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
}

.h-max {
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
}

.h-fit {
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.max-h-auto {
  max-height: auto;
}

.max-h-full {
  max-height: 100%;
}

.max-h-screen {
  max-height: 100vh;
}

.max-h-min {
  max-height: -webkit-min-content;
  max-height: -moz-min-content;
  max-height: min-content;
}

.max-h-max {
  max-height: -webkit-max-content;
  max-height: -moz-max-content;
  max-height: max-content;
}

.max-h-fit {
  max-height: -webkit-fit-content;
  max-height: -moz-fit-content;
  max-height: fit-content;
}

.min-h-auto {
  min-height: auto;
}

.min-h-full {
  min-height: 100%;
}

.min-h-screen {
  min-height: 100vh;
}

.min-h-min {
  min-height: -webkit-min-content;
  min-height: -moz-min-content;
  min-height: min-content;
}

.min-h-max {
  min-height: -webkit-max-content;
  min-height: -moz-max-content;
  min-height: max-content;
}

.min-h-fit {
  min-height: -webkit-fit-content;
  min-height: -moz-fit-content;
  min-height: fit-content;
}

/* Text
-------------------------------------------------- */
.text-12 {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}

.text-13 {
  font-size: 0.8125rem !important;
  line-height: 1.125rem !important;
}

.text-14 {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

.text-15 {
  font-size: 0.9375rem !important;
  line-height: 1.375rem !important;
}

.text-16 {
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}

.text-17 {
  font-size: 1.0625rem !important;
  line-height: 1.625rem !important;
}

.text-18 {
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
}

.text-19 {
  font-size: 1.1875rem !important;
  line-height: 1.875rem !important;
}

.text-20 {
  font-size: 1.25rem !important;
  line-height: 2rem !important;
}

.text-21 {
  font-size: 1.3125rem !important;
  line-height: 2.125rem !important;
}

.text-22 {
  font-size: 1.375rem !important;
  line-height: 2.25rem !important;
}

.text-23 {
  font-size: 1.4375rem !important;
  line-height: 2.375rem !important;
}

.text-24 {
  font-size: 1.5rem !important;
  line-height: 2.5rem !important;
}

.text-25 {
  font-size: 1.5625rem !important;
  line-height: 2.625rem !important;
}

.text-26 {
  font-size: 1.625rem !important;
  line-height: 2.75rem !important;
}

.text-27 {
  font-size: 1.6875rem !important;
  line-height: 2.875rem !important;
}

.text-28 {
  font-size: 1.75rem !important;
  line-height: 3rem !important;
}

.text-29 {
  font-size: 1.8125rem !important;
  line-height: 3.125rem !important;
}

.text-30 {
  font-size: 1.875rem !important;
  line-height: 3.25rem !important;
}

.text-31 {
  font-size: 1.9375rem !important;
  line-height: 3.375rem !important;
}

.text-32 {
  font-size: 2rem !important;
  line-height: 3.5rem !important;
}

.text-33 {
  font-size: 2.0625rem !important;
  line-height: 3.625rem !important;
}

.text-34 {
  font-size: 2.125rem !important;
  line-height: 3.75rem !important;
}

.text-35 {
  font-size: 2.1875rem !important;
  line-height: 3.875rem !important;
}

.text-36 {
  font-size: 2.25rem !important;
  line-height: 4rem !important;
}

.text-37 {
  font-size: 2.3125rem !important;
  line-height: 4.125rem !important;
}

.text-38 {
  font-size: 2.375rem !important;
  line-height: 4.25rem !important;
}

.text-39 {
  font-size: 2.4375rem !important;
  line-height: 4.375rem !important;
}

.text-40 {
  font-size: 2.5rem !important;
  line-height: 4.5rem !important;
}

.text-41 {
  font-size: 2.5625rem !important;
  line-height: 4.625rem !important;
}

.text-42 {
  font-size: 2.625rem !important;
  line-height: 4.75rem !important;
}

.text-43 {
  font-size: 2.6875rem !important;
  line-height: 4.875rem !important;
}

.text-44 {
  font-size: 2.75rem !important;
  line-height: 5rem !important;
}

.text-45 {
  font-size: 2.8125rem !important;
  line-height: 5.125rem !important;
}

.text-46 {
  font-size: 2.875rem !important;
  line-height: 5.25rem !important;
}

.text-47 {
  font-size: 2.9375rem !important;
  line-height: 5.375rem !important;
}

.text-48 {
  font-size: 3rem !important;
  line-height: 5.5rem !important;
}

.text-49 {
  font-size: 3.0625rem !important;
  line-height: 5.625rem !important;
}

.text-50 {
  font-size: 3.125rem !important;
  line-height: 5.75rem !important;
}

.text-51 {
  font-size: 3.1875rem !important;
  line-height: 5.875rem !important;
}

.text-52 {
  font-size: 3.25rem !important;
  line-height: 6rem !important;
}

.text-53 {
  font-size: 3.3125rem !important;
  line-height: 6.125rem !important;
}

.text-54 {
  font-size: 3.375rem !important;
  line-height: 6.25rem !important;
}

.text-55 {
  font-size: 3.4375rem !important;
  line-height: 6.375rem !important;
}

.text-56 {
  font-size: 3.5rem !important;
  line-height: 6.5rem !important;
}

.text-57 {
  font-size: 3.5625rem !important;
  line-height: 6.625rem !important;
}

.text-58 {
  font-size: 3.625rem !important;
  line-height: 6.75rem !important;
}

.text-59 {
  font-size: 3.6875rem !important;
  line-height: 6.875rem !important;
}

.text-60 {
  font-size: 3.75rem !important;
  line-height: 7rem !important;
}

.text-61 {
  font-size: 3.8125rem !important;
  line-height: 7.125rem !important;
}

.text-62 {
  font-size: 3.875rem !important;
  line-height: 7.25rem !important;
}

.text-63 {
  font-size: 3.9375rem !important;
  line-height: 7.375rem !important;
}

.text-64 {
  font-size: 4rem !important;
  line-height: 7.5rem !important;
}

.text-65 {
  font-size: 4.0625rem !important;
  line-height: 7.625rem !important;
}

.text-66 {
  font-size: 4.125rem !important;
  line-height: 7.75rem !important;
}

.text-67 {
  font-size: 4.1875rem !important;
  line-height: 7.875rem !important;
}

.text-68 {
  font-size: 4.25rem !important;
  line-height: 8rem !important;
}

.text-69 {
  font-size: 4.3125rem !important;
  line-height: 8.125rem !important;
}

.text-70 {
  font-size: 4.375rem !important;
  line-height: 8.25rem !important;
}

.text-71 {
  font-size: 4.4375rem !important;
  line-height: 8.375rem !important;
}

.text-72 {
  font-size: 4.5rem !important;
  line-height: 8.5rem !important;
}

.font-thin {
  font-weight: 100;
}

.font-extralight {
  font-weight: 200;
}

.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-black {
  font-weight: 900;
}

.line-height-075 {
  line-height: 0.75rem; /* 12px */
}

.line-height-1 {
  line-height: 1rem; /* 16px */
}

.line-height-125 {
  line-height: 1.25rem; /* 20px */
}

.line-height-15 {
  line-height: 1.5rem; /* 24px */
}

.line-height-175 {
  line-height: 1.75rem; /* 28px */
}

.line-height-2 {
  line-height: 2rem; /* 32px */
}

.line-height-225 {
  line-height: 2.25rem; /* 36px */
}

.line-height-25 {
  line-height: 2.5rem; /* 40px */
}

.line-height-normal {
  line-height: normal;
}

.\!line-height-normal {
  line-height: normal !important;
}

.text-overflow-ellipsis {
  text-overflow: ellipsis;
}

.white-space-normal {
  white-space: normal;
}

.white-space-nowrap {
  white-space: nowrap;
}

.word-break-normal {
  word-break: normal;
}

.word-break-keep-all {
  word-break: keep-all;
}

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

.word-break-break-word {
  word-break: break-word;
}

.word-wrap-normal {
  word-wrap: normal;
}

.word-wrap-break-word {
  word-wrap: break-word;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.letter-sp1 {
  letter-spacing: 0.0625rem;
}

.letter-sp2 {
  letter-spacing: 0.125rem;
}

.letter-sp3 {
  letter-spacing: 0.1875rem;
}

.letter-sp4 {
  letter-spacing: 0.25rem;
}

.letter-sp5 {
  letter-spacing: 0.3125rem;
}

.letter-sp6 {
  letter-spacing: 0.375rem;
}

.letter-sp7 {
  letter-spacing: 0.4375rem;
}

.letter-sp8 {
  letter-spacing: 0.5rem;
}

.letter-sp9 {
  letter-spacing: 0.5625rem;
}

.letter-sp10 {
  letter-spacing: 0.625rem;
}

.color-red {
  color: hsl(0, 95%, 44%) !important;
}

.color-orange {
  color: hsl(23, 94%, 51%) !important;
}

.color-blue {
  color: hsl(216, 81%, 39%) !important;
}

.color-indigo {
  color: hsl(205, 69%, 31%) !important;
}

.color-gray {
  color: hsl(0, 0%, 42%) !important;
}

.color-dark-gray {
  color: hsl(0, 0%, 30%) !important;
}

.color-blue-gray {
  color: hsl(217, 26%, 69%) !important;
}

.color-black {
  color: var(--color-black) !important;
}

.color-white {
  color: var(--color-white) !important;
}

.bg-stripes-purple {
  background-color: rgba(192, 132, 252, 0.1019607843);
  background-image: linear-gradient(135deg, rgba(168, 85, 247, 0.5019607843) 10%, transparent 0, transparent 50%, rgba(168, 85, 247, 0.5019607843) 0, rgba(168, 85, 247, 0.5019607843) 60%, transparent 0, transparent);
  background-size: 7.07px 7.07px;
}

.bg-stripes-pink {
  background-color: rgba(244, 114, 182, 0.1019607843);
  background-image: linear-gradient(135deg, rgba(236, 72, 153, 0.5019607843) 10%, transparent 0, transparent 50%, rgba(236, 72, 153, 0.5019607843) 0, rgba(236, 72, 153, 0.5019607843) 60%, transparent 0, transparent);
  background-size: 7.07px 7.07px;
}

.bg-stripes-indigo {
  background-color: rgba(129, 140, 248, 0.1019607843);
  background-image: linear-gradient(135deg, rgba(99, 102, 241, 0.5019607843) 10%, transparent 0, transparent 50%, rgba(99, 102, 241, 0.5019607843) 0, rgba(99, 102, 241, 0.5019607843) 60%, transparent 0, transparent);
  background-size: 7.07px 7.07px;
}

.bg-stripes-blue {
  background-color: rgba(96, 165, 250, 0.1019607843);
  background-image: linear-gradient(135deg, rgba(59, 130, 246, 0.5019607843) 10%, transparent 0, transparent 50%, rgba(59, 130, 246, 0.5019607843) 0, rgba(59, 130, 246, 0.5019607843) 60%, transparent 0, transparent);
  background-size: 7.07px 7.07px;
}

.bg-stripes-gray {
  background-color: rgba(238, 240, 243, 0.1019607843);
  background-image: linear-gradient(135deg, #d8dbdf 10%, transparent 0, transparent 50%, #d8dbdf 0, #d8dbdf 60%, transparent 0, transparent);
  background-size: 7.07px 7.07px;
}

/* Main
-------------------------------------------------- */
.app-root > .app-footer, .app-footer {
  font-size: var(--text-14);
  color: var(--text-tertiary);
  text-align: center;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

/* Add-Ons 附加組件
=============================
> 1. 容器設定
2. 密碼強弱
3. Captcha
============================= */
.comp-add-ons {
  position: relative;
  padding: 0;
  margin: 0;
}

/* =============================
1. 容器設定
> 2. 密碼強弱
3. Captcha
============================= */
.comp-add-ons .pwd-strength {
  width: 100%;
  padding: 0.5rem 0rem 0.5rem;
}

.pwd-strength__meter {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  width: 100%;
  margin-bottom: 0.3125rem;
}
.pwd-strength__meter .light-bar {
  width: 25%;
  height: 0.1875rem;
  border-right: 0.25rem solid #fff;
  background-color: var(--comp-border-default);
}
.pwd-strength__meter .light-bar:first-child {
  border-top-left-radius: 0.1875rem;
  border-bottom-left-radius: 0.1875rem;
}
.pwd-strength__meter .light-bar:last-child {
  border-right: 0;
  border-top-right-radius: 0.1875rem;
  border-bottom-right-radius: 0.1875rem;
}

.pwd-strength__meter.weak .light-bar:first-child {
  background-color: #db0606;
}

.pwd-strength__meter.fair .light-bar:not(:nth-child(n+3)) {
  background-color: #ffad00;
}

.pwd-strength__meter.good .light-bar:not(:last-child) {
  background-color: #4599ec;
}

.pwd-strength__meter.strong .light-bar {
  background-color: #3abb1c;
}

.pwd-strength__lv {
  font-size: var(--text-14);
  color: var(--text-tertiary);
  margin-top: 0.25rem;
}
.pwd-strength__lv span {
  display: inline-block;
}
.pwd-strength__lv span:not(:last-child) {
  margin-right: 0.5rem;
}

/* =============================
1. 容器設定
2. 密碼強弱
> 3. Captcha
============================= */
.comp-add-ons .captcha {
  position: relative;
  background: var(--captcha-background);
  -webkit-box-shadow: var(--captcha-shadow);
          box-shadow: var(--captcha-shadow);
}

.captcha__img {
  padding: 0.5rem 0.5rem;
  border: 1px solid var(--comp-border-default);
  border-bottom: 0;
  border-radius: 0.25rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  min-height: 6rem;
  text-align: center;
  overflow: hidden;
}

.captcha__input .input-field--hybrid input, .comp-input.captcha__input .input-field--hybrid input {
  border-top-left-radius: 0;
}
.captcha__input .input-field--hybrid .q-btn, .comp-input.captcha__input .input-field--hybrid .q-btn {
  border-top-right-radius: 0;
}
.captcha__input .input-field--hybrid::after, .comp-input.captcha__input .input-field--hybrid::after {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Dropdown Alert
=============================
> 1. 落下式 Alert 容器設定
2. 落下式 Alert 內容設定
============================= */
.comp-alert {
  position: fixed;
  width: 100%;
  z-index: var(--z-index-top);
  -webkit-transition: top 0.8s ease-in-out;
  transition: top 0.8s ease-in-out;
}

/* =============================
1. 落下式 Alert 容器設定
> 2. 落下式 Alert 內容設定
============================= */
.alert-content {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: auto;
  min-height: 4rem;
  padding: var(--alert-padding);
  border-bottom: 1px solid var(--alert-border-default);
  background-color: #fff;
  -webkit-box-shadow: var(--alert-shadow);
          box-shadow: var(--alert-shadow);
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.alert-content.show-alert {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}

.alert-content__btn-close {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  position: absolute;
  width: 0.875rem;
  min-width: 0.875rem;
  height: 0.875rem;
  top: 1.5rem;
  right: 1rem;
  padding: 0px;
  margin-left: auto;
  opacity: 0.7;
}
.alert-content__btn-close::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%3e%3cpolygon%20fill-rule='evenodd'%20points='5.548%206.473%200%20.925%20.925%200%206.473%205.548%2012.021%200%2012.945%20.925%207.397%206.473%2012.945%2012.021%2012.021%2012.945%206.473%207.397%20.925%2012.945%200%2012.021'%20transform='translate(.548%20.548)'/%3e%3c/svg%3e");
          mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%3e%3cpolygon%20fill-rule='evenodd'%20points='5.548%206.473%200%20.925%20.925%200%206.473%205.548%2012.021%200%2012.945%20.925%207.397%206.473%2012.945%2012.021%2012.021%2012.945%206.473%207.397%20.925%2012.945%200%2012.021'%20transform='translate(.548%20.548)'/%3e%3c/svg%3e");
  -webkit-mask-size: 100%;
          mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  background-color: var(--alert-btn-close-default);
}
.alert-content__btn-close:hover {
  opacity: 1;
}

.alert-content__text {
  text-align: left;
  display: inline-block;
  font-size: var(--text-16);
  line-height: 1.4;
  padding: 0rem 2rem;
}

.alert-content--error {
  color: #a50f14;
  border-bottom: 1px solid #f5c2c7;
  background-color: #f8d7da;
}
.alert-content--error a {
  color: #71020b;
}
.alert-content--error .alert-content__btn-close::before {
  background-color: #a50f14;
}

.alert-content--success {
  color: #155724;
  border-bottom: 1px solid #a9d9b3;
  background-color: #d4edda;
}
.alert-content--success a {
  color: #0b2e13;
}
.alert-content--success .alert-content__btn-close::before {
  background-color: #155724;
}

.alert-content--warning {
  color: #856404;
  border-bottom: 1px solid #f1e3b3;
  background-color: #fff3cd;
}
.alert-content--warning a {
  color: #533f03;
}
.alert-content--warning .alert-content__btn-close::before {
  background-color: #856404;
}

.alert-content--info {
  color: #004085;
  border-bottom: 1px solid #b6d4fe;
  background-color: #cfe2ff;
}
.alert-content--info a {
  color: #062c33;
}
.alert-content--info .alert-content__btn-close::before {
  background-color: #004085;
}

.comp-avatar {
  line-height: normal;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--avatar-border-color);
  border-radius: 100%;
  -webkit-box-shadow: var(--avatar-shadow);
          box-shadow: var(--avatar-shadow);
  background-color: var(--avatar-background-color);
  overflow: hidden;
  cursor: pointer;
}
.comp-avatar img {
  text-align: center;
  width: 100%;
}

.comp-avatar.no-avatar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: var(--avatar-font-size);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--avatar-color);
  border-color: var(--no-avatar-border-color);
  background-color: var(--avatar-background-color);
}
.comp-avatar.no-avatar span {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
}

/* Button
=============================
> 1. 按鈕樣式原型
2. 預設按鈕樣式
3. 主要按鈕樣式
4. 功能按鈕樣式
5. 組合
============================= */
.q-btn {
  display: inline-block;
  max-width: 100%;
  min-width: 5.625rem;
  height: var(--comp-height-default);
  min-height: var(--comp-height-default);
  padding: 0.5rem 1.375rem;
  margin-bottom: 0;
  font-size: var(--button-font-size);
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  vertical-align: middle;
  border-style: solid;
  border-width: 1px;
  border-radius: var(--button-border-radius);
  background-image: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -ms-touch-action: manipulation;
      touch-action: manipulation;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
}
.q-btn:hover {
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  -webkit-box-shadow: var(--button-hover-shadow);
          box-shadow: var(--button-hover-shadow);
}
.q-btn:active {
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
}

.q-btn.disabled,
.q-btn[disabled],
.q-btn-default.disabled,
.q-btn-default[disabled],
.q-btn-default:disabled,
.q-btn-primary.disabled,
.q-btn-primary[disabled],
.q-btn-primary:disabled {
  pointer-events: none;
  color: var(--text-senary);
  background-color: var(--button-default-inactive);
  border-color: var(--button-default-border-inactive);
}
.q-btn.disabled:hover, .q-btn.disabled:active,
.q-btn[disabled]:hover,
.q-btn[disabled]:active,
.q-btn-default.disabled:hover,
.q-btn-default.disabled:active,
.q-btn-default[disabled]:hover,
.q-btn-default[disabled]:active,
.q-btn-default:disabled:hover,
.q-btn-default:disabled:active,
.q-btn-primary.disabled:hover,
.q-btn-primary.disabled:active,
.q-btn-primary[disabled]:hover,
.q-btn-primary[disabled]:active,
.q-btn-primary:disabled:hover,
.q-btn-primary:disabled:active {
  color: var(--text-disabled);
  background-color: var(--button-default-inactive);
  border-color: var(--button-default-border-inactive);
  -webkit-box-shadow: none;
          box-shadow: none;
}

.q-btn.btn-round-full {
  border-radius: var(--comp-border-radius-rounded);
}

.q-btn.btn-full-width {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.q-btn.btn-tiny {
  font-size: var(--text-13);
  padding: 0.25rem 1rem;
  height: 1.75rem;
  min-height: 0;
}

.q-btn.btn-small {
  font-size: var(--text-14);
  padding: 0.25rem 1.375rem;
  height: 2rem;
  min-height: 0;
}

.q-btn.btn-medium {
  font-size: var(--text-16);
  padding: 0.563rem 2rem;
  height: auto;
  border-radius: 1.875rem;
}

.q-btn.btn-large {
  font-size: var(--text-18);
  padding: 0.75rem 2.125rem;
  min-width: 8rem;
  height: auto;
  border-radius: 1.875rem;
}

/* =============================
1. 按鈕樣式原型
> 2. 預設按鈕樣式
3. 主要按鈕樣式
4. 功能按鈕樣式
5. 組合
============================= */
.q-btn--default {
  color: var(--button-default-color);
  border-color: var(--button-default-border-default);
  background-color: var(--button-default-default);
}
.q-btn--default:hover, .q-btn--default.btn-hover {
  border-color: var(--button-default-border-hover);
  background-color: var(--button-default-hover);
  -webkit-box-shadow: var(--button-hover-shadow);
          box-shadow: var(--button-hover-shadow);
}
.q-btn--default:active, .q-btn--default.btn-active {
  border-color: var(--button-default-border-active);
  background-color: var(--button-default-active);
}

/* =============================
1. 按鈕樣式原型
2. 預設按鈕樣式
> 3. 主要按鈕樣式
4. 功能按鈕樣式
5. 組合
============================= */
.q-btn--primary {
  color: var(--color-white);
  border-color: var(--button-primary-border-default);
  background-color: var(--button-primary-default);
}
.q-btn--primary:hover, .q-btn--primary.btn-hover {
  border-color: var(--button-primary-border-hover);
  background-color: var(--button-primary-hover);
  -webkit-box-shadow: var(--button-hover-shadow);
          box-shadow: var(--button-hover-shadow);
}
.q-btn--primary:active, .q-btn--primary.btn-active {
  border-color: var(--button-primary-border-active);
  background-color: var(--button-primary-active);
}

/* =============================
1. 按鈕樣式原型
2. 預設按鈕樣式
3. 主要按鈕樣式
> 4. 功能按鈕樣式
5. 組合
============================= */
.util-btn {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 100%;
  cursor: pointer;
}
.util-btn:hover {
  background-color: var(--util-button-light-hover);
}
.util-btn.active {
  background-color: var(--util-button-light-active);
}
.util-btn:last-child {
  margin-right: 0;
}

.util-btn > img {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.util-btn > .comp-dropdown {
  top: 100%;
}

.util-btn > * + .comp-dropdown {
  top: 0%;
}

/* =============================
1. 按鈕樣式原型
2. 預設按鈕樣式
3. 主要按鈕樣式
4. 功能按鈕樣式
> 5. 組合
============================= */
.q-btn-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.q-btn-group .q-btn:not(:last-child) {
  margin-right: 0.5rem;
}

.q-btn-group.btn-align-left {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.q-btn-group.btn-align-right {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.q-btn.q-btn--sheet {
  border: 0;
  background-color: var(--button-sheet-default);
}
.q-btn.q-btn--sheet:hover {
  border-color: 0;
  background-color: var(--button-sheet-default);
  -webkit-box-shadow: none;
          box-shadow: none;
}
.q-btn.q-btn--sheet:active {
  background-color: var(--button-sheet-active);
}

/* Checkbox
=============================
> 1. checkbox 樣式設定
2. checkbox 狀態設定
============================= */
.comp-checkbox {
  position: relative;
  display: inline-block;
}

.comp-checkbox .q-checkbox {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1.25rem 0.75rem auto;
  grid-template-columns: 1.25rem auto;
  gap: 0.75rem;
  font-size: var(--text-14);
  color: var(--text-primary);
  line-height: 1.45;
}
.comp-checkbox .q-checkbox input[type=checkbox] {
  display: -ms-grid;
  display: grid;
  place-content: center;
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: var(--input-background-default);
  /* Not removed via appearance */
  margin: 0;
  font: inherit;
  color: var(--text-primary);
  width: 1.25rem;
  height: 1.25rem;
  border: 0.0938rem solid var(--input-border-default);
  border-radius: 0.25rem;
  -webkit-transition: background-color 150ms ease-out;
  transition: background-color 150ms ease-out;
  cursor: pointer;
}
.comp-checkbox .q-checkbox input[type=checkbox]::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border-radius: 0.125rem;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: -webkit-transform 120ms ease-in-out;
  transition: -webkit-transform 120ms ease-in-out;
  transition: transform 120ms ease-in-out;
  transition: transform 120ms ease-in-out, -webkit-transform 120ms ease-in-out;
  -webkit-box-shadow: inset 1rem 1rem var(--color-white);
          box-shadow: inset 1rem 1rem var(--color-white);
  -webkit-transform-origin: center center;
          transform-origin: center center;
  clip-path: polygon(13.9% 53.3%, 22.7% 44.5%, 40.4% 62.1%, 80.2% 22.4%, 89% 31.2%, 40.4% 79.8%);
  /* Windows High Contrast Mode */
  background-color: CanvasText;
}

/* =============================
1. checkbox 樣式設定
> 2. checkbox 狀態設定
============================= */
.comp-checkbox .q-checkbox--indeterminate input[type=checkbox]::before {
  clip-path: polygon(15% 44%, 85% 44%, 85% 56%, 13% 56%);
}
.comp-checkbox .q-checkbox input[type=checkbox]:checked {
  border-color: var(--input-border-active);
  background-color: var(--color-primary-800);
}
.comp-checkbox .q-checkbox input[type=checkbox]:checked::before {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.comp-checkbox .q-checkbox--disabled {
  color: var(--text-senary);
  pointer-events: none;
}
.comp-checkbox .q-checkbox input[type=checkbox]:disabled {
  color: var(--text-senary);
  border: 0.0938rem solid var(--input-border-inactive);
  background-color: var(--input-background-inactive);
}
.comp-checkbox .q-checkbox input[type=checkbox]:disabled::before {
  -webkit-box-shadow: inset 1rem 1rem var(--input-background-inactive-focused);
          box-shadow: inset 1rem 1rem var(--input-background-inactive-focused);
}

/* Content Placeholder Animation
=============================
> 1. placeholder 動畫設定
2. placeholder 內容設定
============================= */
@-webkit-keyframes placeholder-timer {
  0% {
    background-position: -100vw 0;
  }
  100% {
    background-position: 100vw 0;
  }
}
@keyframes placeholder-timer {
  0% {
    background-position: -100vw 0;
  }
  100% {
    background-position: 100vw 0;
  }
}
@-webkit-keyframes placeholder-intro {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes placeholder-intro {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
.placeholder-animation, .comp-placeholder [class*=placeholder--]::before {
  -webkit-animation: placeholder-timer 1.5s linear infinite forwards, placeholder-intro 0.8s ease-in-out normal forwards;
          animation: placeholder-timer 1.5s linear infinite forwards, placeholder-intro 0.8s ease-in-out normal forwards;
  background: var(--placeholder-background-default);
  background: var(--placeholder-background-gradient);
  background-size: 200vw auto;
  position: relative;
}

/* =============================
1. placeholder 動畫設定
> 2. placeholder 內容設定
============================= */
.comp-placeholder {
  position: relative;
}
.comp-placeholder [class*=placeholder--] {
  position: relative;
}
.comp-placeholder [class*=placeholder--]::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0.25rem;
}
.comp-placeholder .placeholder--img {
  width: 2rem;
  height: 2rem;
}
.comp-placeholder .placeholder--avatar {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 4.5rem;
}
.comp-placeholder .placeholder--title {
  width: 25%;
  height: 2rem;
}
.comp-placeholder .placeholder--title-half {
  width: 50%;
  height: 2rem;
}
.comp-placeholder .placeholder--title-two-thirds {
  width: 66%;
  height: 2rem;
}
.comp-placeholder .placeholder--title-three-quarters {
  width: 75%;
  height: 2rem;
}
.comp-placeholder .placeholder--title-full {
  width: 100%;
  height: 2rem;
}
.comp-placeholder .placeholder--toolbar {
  width: 25%;
  height: 2rem;
}
.comp-placeholder .placeholder--toolbar-half {
  width: 50%;
  height: 2rem;
}
.comp-placeholder .placeholder--toolbar-two-thirds {
  width: 66%;
  height: 2rem;
}
.comp-placeholder .placeholder--toolbar-three-quarters {
  width: 75%;
  height: 2rem;
}
.comp-placeholder .placeholder--toolbar-full {
  width: 100%;
  height: 2rem;
}
.comp-placeholder .placeholder--btn {
  width: 100%;
  max-width: 11.25rem;
  height: 2rem;
}
.comp-placeholder .placeholder--search {
  width: 100%;
  max-width: 16.875rem;
  height: 2rem;
}
.comp-placeholder .placeholder--text-half {
  width: 50%;
  height: 1rem;
}
.comp-placeholder .placeholder-text-two-thirds {
  width: 66%;
  height: 1rem;
}
.comp-placeholder .placeholder--text-three-quarters {
  width: 75%;
  height: 1rem;
}
.comp-placeholder .placeholder--text-full {
  width: 100%;
  height: 1rem;
}
@media screen and (max-width: 767px) {
  .comp-placeholder[class*=placeholder--title] {
    width: 50%;
  }
  .comp-placeholder[class*=placeholder--toolbar] {
    width: 100%;
  }
}

/* Dialog
=============================
> 1. 容器設定
2. Header
3. Body
4. Footer
5. 轉為手機版面時的樣式設定
============================= */
.comp-dialog {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: var(--z-index-modal);
  background-color: var(--modal-background);
}

.comp-dialog .dialog {
  position: relative;
  width: var(--dialog-medium);
  margin: 5% auto;
  background-color: var(--dialog-background);
  border: 1px solid var(--dialog-border-default);
  border-radius: var(--dialog-border-radius);
  -webkit-box-shadow: var(--dialog-shadow);
          box-shadow: var(--dialog-shadow);
}

/* =============================
1. 容器設定
> 2. Header
3. Body
4. Footer
5. 轉為手機版面時的樣式設定
============================= */
.dialog-header {
  position: relative;
  padding: var(--dialog-header-padding);
}

.dialog-header__title {
  width: 95%;
  font-size: var(--dialog-header-font-size);
  color: var(--dialog-header-color);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialog-header__btn-close {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 0.875rem;
  height: 0.875rem;
  padding: 0px;
}
.dialog-header__btn-close::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%3e%3cpolygon%20fill-rule='evenodd'%20points='5.548%206.473%200%20.925%20.925%200%206.473%205.548%2012.021%200%2012.945%20.925%207.397%206.473%2012.945%2012.021%2012.021%2012.945%206.473%207.397%20.925%2012.945%200%2012.021'%20transform='translate(.548%20.548)'/%3e%3c/svg%3e");
          mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%3e%3cpolygon%20fill-rule='evenodd'%20points='5.548%206.473%200%20.925%20.925%200%206.473%205.548%2012.021%200%2012.945%20.925%207.397%206.473%2012.945%2012.021%2012.021%2012.945%206.473%207.397%20.925%2012.945%200%2012.021'%20transform='translate(.548%20.548)'/%3e%3c/svg%3e");
  -webkit-mask-size: 100%;
          mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  background-color: var(--dialog-btn-close-default);
}
.dialog-header__btn-close:hover::before {
  background-color: var(--dialog-btn-close-hover);
}
.dialog-header__btn-close:active::before {
  background-color: var(--dialog-btn-close-active);
}

/* =============================
1. 容器設定
2. Header
> 3. Body
4. Footer
5. 轉為手機版面時的樣式設定
============================= */
.dialog-body {
  position: relative;
  line-height: 1.45;
  min-height: 6.25rem;
}

.dialog-content {
  position: relative;
  font-size: var(--dialog-content-font-size);
  color: var(--text-primary);
  padding: var(--dialog-content-padding);
}

/* =============================
1. 容器設定
2. Header
3. Body
> 4. Footer
5. 轉為手機版面時的樣式設定
============================= */
.dialog-footer {
  position: relative;
  padding: var(--dialog-footer-padding);
}

/* =============================
1. 容器設定
2. Header
3. Body
4. Footer
> 5. 轉為手機版面時的樣式設定
============================= */
@media screen and (max-width: 767px) {
  .comp-dialog .dialog {
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: auto 1fr auto;
    grid-template-rows: auto 1fr auto;
    width: 100vw;
    height: 100vh;
    margin: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .dialog-body {
    overflow-y: scroll;
  }
}
/* Dropdown
=============================
> 1. 容器設定
2. 基礎選單
3. 內容區間
4. 雙層選單
============================= */
.comp-dropdown {
  position: relative;
  z-index: var(--z-index-dropdown);
}

/* =============================
1. 容器設定
> 2. 基礎選單
3. 內容區間
4. 雙層選單
============================= */
.comp-dropdown .dropdown-menu {
  position: absolute;
  width: auto;
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
  max-height: calc(100vh - var(--header-height-default));
  padding: var(--dropdown-menu-padding);
  overflow-y: auto;
  top: var(--dropdown-menu-offset-top);
  background-color: var(--dropdown-menu-background);
  border: 1px solid var(--dropdown-menu-border-default);
  border-radius: 0.625rem;
  -webkit-box-shadow: var(--dropdown-menu-shadow);
          box-shadow: var(--dropdown-menu-shadow);
  cursor: default;
}

.comp-dropdown .dropdown-menu.dropdown-menu-scroll {
  max-height: 23rem;
  overflow-y: auto;
  -ms-scroll-snap-type: y mandatory;
      scroll-snap-type: y mandatory;
}

.comp-dropdown.menu-align-left .dropdown-menu {
  left: 0;
  right: auto;
}

.comp-dropdown.menu-align-right .dropdown-menu {
  left: auto;
  right: 0;
}

.comp-dropdown.menu-align-top .dropdown-menu {
  top: auto;
  bottom: calc(var(--comp-height-default) + var(--select-dropdown-menu-offset-top));
}

.comp-dropdown.menu-align-trigger-bottom .dropdown-menu {
  top: auto;
  bottom: 0rem;
}

/* =============================
1. 容器設定
2. 基礎選單
> 3. 內容區間
4. 雙層選單
============================= */
.dropdown-menu__head {
  color: var(--dropdown-menu-head-color);
  font-size: var(--dropdown-menu-head-font-size);
  padding: var(--dropdown-menu-head-padding);
}

.dropdown-menu__item {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: var(--comp-height-default);
  color: var(--text-content);
  font-size: var(--dropdown-menu-item-font-size);
  padding: var(--dropdown-menu-item-padding);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown-menu__item:hover, .dropdown-menu__item.pendding {
  background-color: var(--dropdown-menu-item-hover);
}
.dropdown-menu__item:active {
  background-color: var(--dropdown-menu-item-active);
}
.dropdown-menu__item.active {
  color: var(--dropdown-menu-item-color-active);
}

.dropdown-menu__item.marked {
  pointer-events: none;
}

.dropdown-menu__item.marked::before {
  content: "";
  display: block;
  position: absolute;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 0.25rem;
  background-color: var(--dropdown-menu-item-color-active);
  left: 0.25rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.dropdown-menu__item-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  line-height: 0;
}

.dropdown-menu__item-group__label {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  font-size: var(--dropdown-menu-item-font-size);
  line-height: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-menu__divider {
  display: block;
  height: 1px;
  background-color: var(--dropdown-menu-divide-border-color);
  margin: var(--dropdown-menu-divide-margin);
}

/* =============================
1. 容器設定
2. 基礎選單
3. 內容區間
> 4. 雙層選單
============================= */
.comp-dropdown .multi-level-dropdown {
  position: absolute;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  max-height: calc(100vh - var(--header-height-default));
  top: var(--dropdown-menu-offset-top);
  background-color: var(--dropdown-menu-background);
  border: 1px solid var(--dropdown-menu-border-default);
  border-radius: var(--dropdown-menu-border-radius);
  -webkit-box-shadow: var(--dropdown-menu-shadow);
          box-shadow: var(--dropdown-menu-shadow);
  overflow: hidden;
}
.comp-dropdown .multi-level-dropdown .dropdown-menu {
  position: relative;
  top: 0;
  border: 0;
  border-radius: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
  opacity: 1;
  -webkit-transition-property: opacity, max-height, -webkit-transform;
  transition-property: opacity, max-height, -webkit-transform;
  transition-property: opacity, max-height, transform;
  transition-property: opacity, max-height, transform, -webkit-transform;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
}
.comp-dropdown .multi-level-dropdown .dropdown-menu[level="2"] {
  max-height: 0rem;
  padding: 0rem 0rem;
}
.comp-dropdown .multi-level-dropdown .dropdown-menu__navbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: var(--comp-height-default);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--dropdown-menu-border-default);
}
.comp-dropdown .multi-level-dropdown .dropdown-menu__navbar__back {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
  border-radius: var(--button-border-radius);
  color: var(--text-quaternary);
}
.comp-dropdown .multi-level-dropdown .dropdown-menu__navbar__back:hover {
  color: var(--text-content);
  background-color: var(--dropdown-menu-item-hover);
}
.comp-dropdown .multi-level-dropdown .dropdown-menu__navbar__back:active {
  background-color: var(--dropdown-menu-item-active);
}
.comp-dropdown .multi-level-dropdown .dropdown-menu__navbar__label {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  font-size: var(--dropdown-menu-item-font-size);
}
.comp-dropdown .multi-level-dropdown .dropdown-menu__scroll-content {
  padding: 0.5rem 0.5rem;
  max-height: calc(100vh - var(--header-height-default) - 4rem);
  overflow-y: auto;
  -ms-scroll-snap-type: y mandatory;
      scroll-snap-type: y mandatory;
}

.multi-level-dropdown.show-secondary-menu .dropdown-menu:not([level="2"]) {
  opacity: 0;
  -webkit-transform: translateX(calc(var(--dropdown-menu-medium) * -1));
          transform: translateX(calc(var(--dropdown-menu-medium) * -1));
}
.multi-level-dropdown.show-secondary-menu .dropdown-menu[level="2"] {
  max-height: calc(100vh - var(--header-height-default));
  -webkit-transform: translateX(calc(var(--dropdown-menu-medium) * -1));
          transform: translateX(calc(var(--dropdown-menu-medium) * -1));
}

/* Input
=============================
> 1. 輸入框樣式設定
2. 輸入框狀態設定
3. 組合式輸入框
============================= */
input[type=text], input[type=password], input[type=number], input[type=tel] {
  margin: 0;
  padding: var(--input-padding);
  min-height: var(--comp-height-default);
  font-size: var(--input-font-size);
  border: 1px solid var(--input-border-default);
  border-radius: var(--input-border-radius);
}
input[type=text]:hover, input[type=password]:hover, input[type=number]:hover, input[type=tel]:hover {
  border-color: var(--input-border-hover);
  -webkit-box-shadow: var(--input-shadow);
          box-shadow: var(--input-shadow);
}
input[type=text]:active, input[type=text]:focus, input[type=text].input-used, input[type=text].active, input[type=password]:active, input[type=password]:focus, input[type=password].input-used, input[type=password].active, input[type=number]:active, input[type=number]:focus, input[type=number].input-used, input[type=number].active, input[type=tel]:active, input[type=tel]:focus, input[type=tel].input-used, input[type=tel].active {
  border-color: var(--input-border-active);
  -webkit-box-shadow: var(--input-shadow);
          box-shadow: var(--input-shadow);
}

/* =============================
1. 輸入框樣式設定
> 2. 輸入框狀態設定
3. 組合式輸入框
============================= */
input[type=text].round-full,
input[type=password].round-full,
input[type=number].round-full,
input[type=tel].round-full {
  border-radius: var(--comp-border-radius-rounded);
}

input[type=text].input--invalid,
input[type=password].input--invalid,
input[type=number].input--invalid,
input[type=tel].input--invalid {
  border-color: var(--text-error);
}

input[type=text].input--must-fill,
input[type=password].input--must-fill,
input[type=number].input--must-fill,
input[type=tel].input--must-fill {
  background-color: var(--input-background-must-fill);
}

input[type=text].input--disabled,
input[type=password].input--disabled,
input[type=number].input--disabled,
input[type=tel].input--disabled,
input[type=text]:disabled,
input[type=password]:disabled,
input[type=number]:disabled,
input[type=tel]:disabled {
  cursor: default;
  pointer-events: none;
  color: var(--text-quaternary);
  border-color: var(--input-border-inactive);
  background-color: var(--input-background-inactive);
}
input[type=text].input--disabled:hover,
input[type=password].input--disabled:hover,
input[type=number].input--disabled:hover,
input[type=tel].input--disabled:hover,
input[type=text]:disabled:hover,
input[type=password]:disabled:hover,
input[type=number]:disabled:hover,
input[type=tel]:disabled:hover {
  border-color: var(--input-border-inactive);
}
input[type=text].input--disabled:active, input[type=text].input--disabled:focus,
input[type=password].input--disabled:active,
input[type=password].input--disabled:focus,
input[type=number].input--disabled:active,
input[type=number].input--disabled:focus,
input[type=tel].input--disabled:active,
input[type=tel].input--disabled:focus,
input[type=text]:disabled:active,
input[type=text]:disabled:focus,
input[type=password]:disabled:active,
input[type=password]:disabled:focus,
input[type=number]:disabled:active,
input[type=number]:disabled:focus,
input[type=tel]:disabled:active,
input[type=tel]:disabled:focus {
  border-color: var(--input-border-inactive);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-transition: background-color 5000s ease-in-out 0s !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* =============================
1. 輸入框樣式設定
2. 輸入框狀態設定
> 3. 組合式輸入框
  - 各式包含輸入框的組件樣式
  - 3-1 密碼輸入框
  - 3-2 下拉選單 + 輸入框
  - 3-3 搜尋輸入框
============================= */
.comp-input {
  position: relative;
  padding: 0;
  margin: 0;
}

.comp-input--disabled {
  cursor: default;
  pointer-events: none;
}

/* =============================
1. 輸入框樣式設定
2. 輸入框狀態設定
> 3. 組合式輸入框
  - 各式包含輸入框的組件樣式
  > 3-1 密碼輸入框
  - 3-2 下拉選單 + 輸入框
  - 3-3 搜尋輸入框
============================= */
.comp-input .input-field--pwd {
  position: relative;
}
.comp-input .input-field--pwd input[type=password] {
  width: 100%;
  padding-right: 2.5rem;
}

.input-toggle--pwd.ic-eye-open::before {
  -webkit-mask-position: 1.875rem 0rem, 0rem 0rem;
          mask-position: 1.875rem 0rem, 0rem 0rem;
}

.input-toggle--pwd.ic-eye-close::before {
  -webkit-mask-position: 0rem 0rem, 1.875rem 0rem;
          mask-position: 0rem 0rem, 1.875rem 0rem;
}

/* =============================
1. 輸入框樣式設定
2. 輸入框狀態設定
> 3. 組合式輸入框
  - 各式包含輸入框的組件樣式
  - 3-1 密碼輸入框
  > 3-2 下拉選單 + 輸入框 + 按鈕
  - 3-3 搜尋輸入框
============================= */
.comp-input .input-field--hybrid {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  vertical-align: middle;
  width: 100%;
}
.comp-input .input-field--hybrid::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--comp-height-default);
  border: 1px solid var(--comp-border-default);
  border-radius: var(--button-border-radius);
  z-index: 0;
  pointer-events: none;
}
.comp-input .input-field--hybrid .comp-select:not(:last-child) .q-select,
.comp-input .input-field--hybrid .comp-select:nth-child(n+1) .q-select {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-color: transparent;
}
.comp-input .input-field--hybrid .comp-select:not(:last-child) .q-select::after,
.comp-input .input-field--hybrid .comp-select:nth-child(n+1) .q-select::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 60%;
  background-color: var(--comp-border-default);
  right: -1px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.comp-input .input-field--hybrid .comp-select:hover,
.comp-input .input-field--hybrid .comp-select .q-select:hover {
  border-color: var(--comp-border-hover);
  z-index: 1;
}
.comp-input .input-field--hybrid .comp-select:hover::after,
.comp-input .input-field--hybrid .comp-select .q-select:hover::after {
  display: none;
}
.comp-input .input-field--hybrid .comp-select.active,
.comp-input .input-field--hybrid .comp-select .q-select.active,
.comp-input .input-field--hybrid .comp-select .q-select:active {
  border-color: var(--comp-border-active);
  z-index: 2;
}
.comp-input .input-field--hybrid .comp-select.active .q-select__arrow::before,
.comp-input .input-field--hybrid .comp-select .q-select.active .q-select__arrow::before,
.comp-input .input-field--hybrid .comp-select .q-select:active .q-select__arrow::before {
  background-color: var(--ic-background-active);
}
.comp-input .input-field--hybrid .comp-select.active::after,
.comp-input .input-field--hybrid .comp-select .q-select.active::after,
.comp-input .input-field--hybrid .comp-select .q-select:active::after {
  display: none;
}
.comp-input .input-field--hybrid input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}
.comp-input .input-field--hybrid input:not(:first-child),
.comp-input .input-field--hybrid input:nth-child(n+2) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-color: transparent;
}
.comp-input .input-field--hybrid input:not(:last-child),
.comp-input .input-field--hybrid input:nth-child(n+2) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-color: transparent;
}
.comp-input .input-field--hybrid input:hover {
  z-index: 1;
  border-color: var(--comp-border-hover);
}
.comp-input .input-field--hybrid input:focus {
  z-index: 2;
  border-color: var(--comp-border-active);
}
.comp-input .input-field--hybrid input:disabled {
  background-color: var(--color-white);
}
.comp-input .input-field--hybrid input.input--invalid {
  border: 1px solid var(--text-error);
  z-index: 2;
}
.comp-input .input-field--hybrid .q-btn:not(:first-child),
.comp-input .input-field--hybrid .q-btn:nth-child(n+3) {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  min-width: auto;
  padding-left: 1.125rem;
  padding-right: 1.125rem;
  margin-left: -1px;
  color: var(--text-dynamic);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-color: transparent;
  background-color: transparent;
}
.comp-input .input-field--hybrid .q-btn:not(:first-child):hover,
.comp-input .input-field--hybrid .q-btn:nth-child(n+3):hover {
  color: var(--text-dynamic);
  text-decoration: underline;
  -webkit-box-shadow: none;
          box-shadow: none;
  z-index: 1;
}
.comp-input .input-field--hybrid .q-btn:not(:first-child):active,
.comp-input .input-field--hybrid .q-btn:nth-child(n+3):active {
  color: var(--text-active);
  background-color: transparent;
}
.comp-input .input-field--hybrid .q-btn:not(:first-child):disabled,
.comp-input .input-field--hybrid .q-btn:nth-child(n+3):disabled {
  color: var(--text-quaternary);
  background-color: transparent;
  cursor: default;
}

/* =============================
1. 輸入框樣式設定
2. 輸入框狀態設定
> 3. 組合式輸入框
  - 各式包含輸入框的組件樣式
  - 3-1 密碼輸入框
  - 3-2 下拉選單 + 輸入框 + 按鈕
  > 3-3 搜尋輸入框
============================= */
.comp-input .input-field--search {
  position: relative;
}
.comp-input .input-field--search input {
  width: 100%;
  padding-left: 2.5rem;
}
.comp-input .input-field--search input:focus {
  padding-right: 2.5rem;
}
.comp-input .input-field--search input:focus + .input-ic--search + .input-toggle--clear {
  display: block;
}
.comp-input .input-field--search .input-toggle--clear {
  display: none;
}

.input-toggle--clear {
  display: inline-block;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 0.625rem;
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}
.input-toggle--clear::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%3e%3cpolygon%20fill-rule='evenodd'%20points='5.548%206.473%200%20.925%20.925%200%206.473%205.548%2012.021%200%2012.945%20.925%207.397%206.473%2012.945%2012.021%2012.021%2012.945%206.473%207.397%20.925%2012.945%200%2012.021'%20transform='translate(.548%20.548)'/%3e%3c/svg%3e");
          mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%3e%3cpolygon%20fill-rule='evenodd'%20points='5.548%206.473%200%20.925%20.925%200%206.473%205.548%2012.021%200%2012.945%20.925%207.397%206.473%2012.945%2012.021%2012.021%2012.945%206.473%207.397%20.925%2012.945%200%2012.021'%20transform='translate(.548%20.548)'/%3e%3c/svg%3e");
  -webkit-mask-size: 100%;
          mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  background-color: var(--ic-background-default);
}
.input-toggle--clear:hover::before {
  background-color: var(--ic-background-hover);
}
.input-toggle--clear:active::before {
  background-color: var(--ic-background-active);
}

/* Popover
=============================
> 1. 容器設定
2. 基礎選單
3. 內容區間
4. 客製選單
============================= */
.comp-popover {
  position: relative;
  z-index: var(--z-index-dropdown);
}

/* =============================
1. 容器設定
> 2. 基礎選單
3. 內容區間
4. 客製選單
============================= */
.comp-popover .popover-menu {
  position: absolute;
  width: auto;
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
  max-height: calc(100vh - var(--header-height-default));
  padding: var(--dropdown-menu-padding);
  overflow-y: auto;
  background-color: var(--dropdown-menu-background);
  border: 1px solid var(--dropdown-menu-border-default);
  border-radius: var(--dropdown-menu-border-radius);
  -webkit-box-shadow: var(--dropdown-menu-shadow);
          box-shadow: var(--dropdown-menu-shadow);
  cursor: default;
}

.comp-popover.menu-align-left .popover-menu {
  left: 0;
  right: auto;
}

.comp-popover.menu-align-right .popover-menu {
  left: auto;
  right: 0;
}

/* =============================
1. 容器設定
2. 基礎選單
> 3. 內容區間
4. 客製選單
============================= */
.popover-menu__head {
  color: var(--dropdown-menu-head-color);
  font-size: var(--dropdown-menu-head-font-size);
  padding: var(--dropdown-menu-head-padding);
}

.popover-menu__item {
  position: relative;
  color: var(--text-content);
  font-size: var(--dropdown-menu-item-font-size);
  padding: var(--dropdown-menu-item-padding);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.popover-menu__item:hover {
  background-color: var(--dropdown-menu-item-hover);
}
.popover-menu__item:active {
  background-color: var(--dropdown-menu-item-active);
}
.popover-menu__item.active {
  color: var(--dropdown-menu-item-color-active);
}

.popover-menu__item.marked::before {
  content: "";
  display: block;
  position: absolute;
  width: 0.25rem;
  height: 0.25rem;
  border-radius: 0.25rem;
  background-color: var(--dropdown-menu-item-color-active);
  left: 0.5rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.popover-menu__item-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  line-height: 0;
}

.popover-menu__item-group__label {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  font-size: var(--dropdown-menu-item-font-size);
  line-height: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.popover-menu__divider {
  display: block;
  height: 1px;
  background-color: var(--dropdown-menu-divide-border-color);
  margin: 0rem 0rem 0rem 1.5rem;
}

/* =============================
1. 容器設定
2. 基礎選單
3. 內容區間
> 4. 客製選單
============================= */
.comp-popover .popover-menu.popover-menu--pwd-rules {
  width: 100%;
}
.comp-popover .popover-menu.popover-menu--pwd-rules .popover-menu__head {
  color: var(--text-secondary);
  font-weight: 500;
}
.comp-popover .popover-menu.popover-menu--pwd-rules .popover-menu__item {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.comp-popover .popover-menu.popover-menu--pwd-rules .popover-menu__item .rule-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.comp-popover .popover-menu.popover-menu--pwd-rules .popover-menu__item .rule-group:not(:last-child) {
  margin-bottom: 0.25rem;
}
.comp-popover .popover-menu.popover-menu--pwd-rules .popover-menu__item .rule-group__check {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  display: -ms-grid;
  display: grid;
  place-content: center;
  width: 1.125rem;
  min-width: 1.125rem;
  height: 1.5rem;
  margin-right: 0.5rem;
}
.comp-popover .popover-menu.popover-menu--pwd-rules .popover-menu__item .rule-group__check::before {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
  clip-path: polygon(13.9% 53.3%, 22.7% 44.5%, 40.4% 62.1%, 80.2% 22.4%, 89% 31.2%, 40.4% 79.8%);
  background-color: var(--text-senary);
}
.comp-popover .popover-menu.popover-menu--pwd-rules .popover-menu__item .rule-group__label {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  color: var(--text-quinary);
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.comp-popover .popover-menu.popover-menu--pwd-rules .popover-menu__item .rule-group.done .rule-group__check::before {
  background-color: #10adc1;
}
.comp-popover .popover-menu.popover-menu--pwd-rules .popover-menu__item .rule-group.done .rule-group__label {
  color: var(--text-content);
}
.comp-popover .popover-menu.popover-menu--pwd-rules .popover-menu__item:hover, .comp-popover .popover-menu.popover-menu--pwd-rules .popover-menu__item:active {
  background-color: var(--color-white);
}

/* DC Loading Indicator
=============================
> 1. DC 共模 loading 容器設定
2. DC 共模 loading 內容設定
3. DC 共模 loading keyframe 設定
============================= */
.comp-loading-indicator {
  position: fixed;
  width: 100vw;
  height: 100vh;
  min-height: 100%;
  left: 0;
  top: 0;
  z-index: var(--z-index-modal);
}

/* =============================
1. DC 共模 loading 容器設定
> 2. DC 共模 loading 內容設定
3. DC 共模 loading keyframe 設定
============================= */
.loading-indicator {
  position: absolute;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-width: 13.25rem;
  top: 3rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  padding: var(--loading-indicator-padding);
  border-radius: var(--loading-indicator-border-radius);
  background-color: var(--loading-indicator-background-default);
  -webkit-box-shadow: var(--loading-indicator-box-shadow);
          box-shadow: var(--loading-indicator-box-shadow);
  z-index: var(--z-index-default);
}
.loading-indicator .q-btn {
  margin-left: 3.75rem;
  height: 1.875rem;
  border: 0;
  background-color: var(--loading-indicator-button-default);
  color: var(--loading-indicator-button-default-color);
}
.loading-indicator .q-btn:hover {
  background-color: var(--loading-indicator-button-hover);
  -webkit-box-shadow: none;
          box-shadow: none;
}
.loading-indicator .q-btn:active {
  background-color: var(--loading-indicator-button-active);
}

.loading-indicator--q2-dialog {
  background-color: #39279f;
}
.loading-indicator--q2-dialog .q-btn {
  background-color: #624ae5;
}
.loading-indicator--q2-dialog .q-btn:hover {
  background-color: #5e46e4;
}
.loading-indicator--q2-dialog .q-btn:active {
  background-color: #523bd7;
}

.loading-indicator__anime {
  position: relative;
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  width: 1.875rem;
  min-width: 1.875rem;
  height: 1.875rem;
}
.loading-indicator__anime > .anime-dash--color1 {
  position: absolute;
  width: 1.875rem;
  height: 1.875rem;
  background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='82px'%20height='82px'%20viewBox='0%200%2082%2082'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3eloading-dash-1%3c/title%3e%3cg%20id='Page-1'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%3e%3cg%20id='loading'%20fill='%23FFFFFF'%20fill-rule='nonzero'%3e%3cpath%20d='M18.778818,65.3965831%20C32.240818,77.6375831%2053.152818,76.6425831%2065.393818,63.1795831%20C73.434818,54.3355831%2076.065818,41.7945831%2072.259818,30.4495831%20C70.483818,25.1515831%2067.343818,20.3505831%2063.179818,16.5645831%20C59.483818,13.2045831%2055.203818,10.7815831%2050.457818,9.36258312%20C38.359818,5.74658312%2025.055818,9.44358312%2016.564818,18.7815831%20C4.32381801,32.2445831%205.31681801,53.1555831%2018.778818,65.3965831%20M68.561818,10.6455831%20C73.732818,15.3475831%2077.634818,21.3155831%2079.844818,27.9055831%20C84.570818,41.9965831%2081.301818,57.5745831%2071.312818,68.5615831%20C56.102818,85.2885831%2030.122818,86.5235831%2013.396818,71.3155831%20C-3.32818199,56.1075831%20-4.56218199,30.1265831%2010.646818,13.3995831%20C21.194818,1.79958312%2037.720818,-2.79341688%2052.749818,1.69858312%20C58.651818,3.46258312%2063.971818,6.47258312%2068.561818,10.6455831'%20id='el_54GQfInDLm'%20fill-opacity='0'%3e%3c/path%3e%3cpath%20d='M68.560118,10.6436831%20C69.928118,11.8876831%2071.222118,13.2326831%2072.405118,14.6426831%20C73.826118,16.3336831%2073.607118,18.8566831%2071.915118,20.2776831%20C70.225118,21.6976831%2067.695118,21.4806831%2066.280118,19.7876831%20C64.372118,17.5166831%2062.115118,15.4646831%2059.673118,13.7806831%20C57.847118,12.5286831%2057.397118,10.0356831%2058.651118,8.21668312%20C59.905118,6.39768312%2062.396118,5.94068312%2064.215118,7.19468312%20C65.730118,8.23968312%2067.192118,9.39968312%2068.560118,10.6436831'%20id='el_dash-1'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
  background-size: 1.875rem 1.875rem;
  background-repeat: no-repeat;
  -webkit-animation: loading-indicator-rotate 1s 0s ease-in-out infinite;
          animation: loading-indicator-rotate 1s 0s ease-in-out infinite;
}
.loading-indicator__anime > .anime-dash--color2 {
  position: absolute;
  width: 1.875rem;
  height: 1.875rem;
  background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='82px'%20height='82px'%20viewBox='0%200%2082%2082'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3eloading-dash-2%3c/title%3e%3cg%20id='Page-1'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%3e%3cg%20id='loading'%20fill-rule='nonzero'%3e%3cpath%20d='M18.778818,65.3965831%20C32.240818,77.6375831%2053.152818,76.6425831%2065.393818,63.1795831%20C73.434818,54.3355831%2076.065818,41.7945831%2072.259818,30.4495831%20C70.483818,25.1515831%2067.343818,20.3505831%2063.179818,16.5645831%20C59.483818,13.2045831%2055.203818,10.7815831%2050.457818,9.36258312%20C38.359818,5.74658312%2025.055818,9.44358312%2016.564818,18.7815831%20C4.32381801,32.2445831%205.31681801,53.1555831%2018.778818,65.3965831%20M68.561818,10.6455831%20C73.732818,15.3475831%2077.634818,21.3155831%2079.844818,27.9055831%20C84.570818,41.9965831%2081.301818,57.5745831%2071.312818,68.5615831%20C56.102818,85.2885831%2030.122818,86.5235831%2013.396818,71.3155831%20C-3.32818199,56.1075831%20-4.56218199,30.1265831%2010.646818,13.3995831%20C21.194818,1.79958312%2037.720818,-2.79341688%2052.749818,1.69858312%20C58.651818,3.46258312%2063.971818,6.47258312%2068.561818,10.6455831'%20id='el_54GQfInDLm'%20fill-opacity='0'%20fill='%23FFFFFF'%3e%3c/path%3e%3cpath%20d='M51.089918,1.24518312%20C52.881918,1.70218312%2054.655918,2.28218312%2056.361918,2.97018312%20C58.410918,3.79618312%2059.402918,6.12718312%2058.575918,8.17618312%20C57.748918,10.2241831%2055.413918,11.2201831%2053.369918,10.3891831%20C50.618918,9.28018312%2047.662918,8.52718312%2044.715918,8.18618312%20C42.515918,7.93918312%2040.947918,5.94818312%2041.201918,3.75418312%20C41.454918,1.55918312%2043.439918,-0.0138168774%2045.633918,0.240183123%20C47.462918,0.451183123%2049.297918,0.789183123%2051.089918,1.24518312'%20id='el_dash-2'%20fill='%23DEFF59'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
  background-size: 1.875rem 1.875rem;
  background-repeat: no-repeat;
  -webkit-animation: loading-indicator-rotate 1s 0.07s ease-in-out infinite;
          animation: loading-indicator-rotate 1s 0.07s ease-in-out infinite;
}
.loading-indicator__anime > .anime-dash--color3 {
  position: absolute;
  width: 1.875rem;
  height: 1.875rem;
  background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='82px'%20height='82px'%20viewBox='0%200%2082%2082'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3eloading-dash-3%3c/title%3e%3cg%20id='Page-1'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%3e%3cg%20id='loading'%20fill-rule='nonzero'%3e%3cpath%20d='M18.778818,65.3965831%20C32.240818,77.6375831%2053.152818,76.6425831%2065.393818,63.1795831%20C73.434818,54.3355831%2076.065818,41.7945831%2072.259818,30.4495831%20C70.483818,25.1515831%2067.343818,20.3505831%2063.179818,16.5645831%20C59.483818,13.2045831%2055.203818,10.7815831%2050.457818,9.36258312%20C38.359818,5.74658312%2025.055818,9.44358312%2016.564818,18.7815831%20C4.32381801,32.2445831%205.31681801,53.1555831%2018.778818,65.3965831%20M68.561818,10.6455831%20C73.732818,15.3475831%2077.634818,21.3155831%2079.844818,27.9055831%20C84.570818,41.9965831%2081.301818,57.5745831%2071.312818,68.5615831%20C56.102818,85.2885831%2030.122818,86.5235831%2013.396818,71.3155831%20C-3.32818199,56.1075831%20-4.56218199,30.1265831%2010.646818,13.3995831%20C21.194818,1.79958312%2037.720818,-2.79341688%2052.749818,1.69858312%20C58.651818,3.46258312%2063.971818,6.47258312%2068.561818,10.6455831'%20id='el_54GQfInDLm'%20fill-opacity='0'%20fill='%23FFFFFF'%3e%3c/path%3e%3cpath%20d='M31.252518,1.14898312%20C33.048518,0.709983123%2034.887518,0.389983123%2036.717518,0.195983123%20C38.914518,-0.0360168774%2040.883518,1.55698312%2041.115518,3.75398312%20C41.347518,5.94998312%2039.753518,7.92498312%2037.558518,8.15198312%20C34.608518,8.46398312%2031.645518,9.18798312%2028.883518,10.2699831%20C26.825518,11.0839831%2024.505518,10.0629831%2023.699518,8.00598312%20C22.892518,5.94898312%2023.906518,3.62798312%2025.963518,2.82198312%20C27.676518,2.14998312%2029.456518,1.58698312%2031.252518,1.14898312'%20id='el_dash-3'%20fill='%233FCC18'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
  background-size: 1.875rem 1.875rem;
  background-repeat: no-repeat;
  -webkit-animation: loading-indicator-rotate 1s 0.14s ease-in-out infinite;
          animation: loading-indicator-rotate 1s 0.14s ease-in-out infinite;
}
.loading-indicator__anime > .anime-dash--color4 {
  position: absolute;
  width: 1.875rem;
  height: 1.875rem;
  background-image: url("data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='UTF-8'?%3e%3csvg%20width='82px'%20height='82px'%20viewBox='0%200%2082%2082'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3ctitle%3eloading-dash-4%3c/title%3e%3cg%20id='Page-1'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%3e%3cg%20id='loading'%20fill-rule='nonzero'%3e%3cpath%20d='M18.778818,65.3965831%20C32.240818,77.6375831%2053.152818,76.6425831%2065.393818,63.1795831%20C73.434818,54.3355831%2076.065818,41.7945831%2072.259818,30.4495831%20C70.483818,25.1515831%2067.343818,20.3505831%2063.179818,16.5645831%20C59.483818,13.2045831%2055.203818,10.7815831%2050.457818,9.36258312%20C38.359818,5.74658312%2025.055818,9.44358312%2016.564818,18.7815831%20C4.32381801,32.2445831%205.31681801,53.1555831%2018.778818,65.3965831%20M68.561818,10.6455831%20C73.732818,15.3475831%2077.634818,21.3155831%2079.844818,27.9055831%20C84.570818,41.9965831%2081.301818,57.5745831%2071.312818,68.5615831%20C56.102818,85.2885831%2030.122818,86.5235831%2013.396818,71.3155831%20C-3.32818199,56.1075831%20-4.56218199,30.1265831%2010.646818,13.3995831%20C21.194818,1.79958312%2037.720818,-2.79341688%2052.749818,1.69858312%20C58.651818,3.46258312%2063.971818,6.47258312%2068.561818,10.6455831'%20id='el_54GQfInDLm'%20fill-opacity='0'%20fill='%23FFFFFF'%3e%3c/path%3e%3cpath%20d='M13.691918,10.3765831%20C15.071918,9.14658312%2016.544918,8.00058312%2018.069918,6.96958312%20C19.899918,5.73358312%2022.386918,6.21458312%2023.623918,8.04558312%20C24.858918,9.87658312%2024.378918,12.3695831%2022.546918,13.5995831%20C20.088918,15.2595831%2017.811918,17.2905831%2015.881918,19.5425831%20C14.446918,21.2275831%2011.919918,21.4145831%2010.241918,19.9775831%20C8.56491801,18.5395831%208.36991801,16.0145831%209.80691801,14.3365831%20C11.004918,12.9395831%2012.311918,11.6065831%2013.691918,10.3765831'%20id='el_dash-4'%20fill='%23EFBD1D'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
  background-size: 1.875rem 1.875rem;
  background-repeat: no-repeat;
  -webkit-animation: loading-indicator-rotate 1s 0.21s ease-in-out infinite;
          animation: loading-indicator-rotate 1s 0.21s ease-in-out infinite;
}

.loading-indicator__content {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  min-width: 0;
  margin-left: 1.125rem;
}
.loading-indicator__content .indicator--head {
  color: var(--loading-indicator-label);
  font-weight: 500;
  line-height: 1.5rem;
  letter-spacing: 0.031rem;
  margin-bottom: 0.25rem;
}
.loading-indicator__content .indicator--head .percentage {
  margin-left: 0.25rem;
}
.loading-indicator__content .indicator--detals {
  color: var(--loading-indicator-color);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.loading-indicator__content .indicator--detals > .time {
  margin-left: 0.625rem;
  font-weight: 400;
}
.loading-indicator__content a {
  display: inline-block;
  padding: 0rem 0.25rem;
  color: var(--loading-indicator-color);
  text-decoration: underline;
}

/* =============================
1. DC 共模 loading 容器設定
2. DC 共模 loading 內容設定
> 3. DC 共模 loading keyframe 設定
============================= */
@-webkit-keyframes loading-indicator-rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loading-indicator-rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 1, 100;
    stroke-dashoffset: 0px;
  }
  50% {
    stroke-dasharray: 60, 100;
    stroke-dashoffset: -20px;
  }
  100% {
    stroke-dasharray: 100, 100;
    stroke-dashoffset: -100px;
  }
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 100;
    stroke-dashoffset: 0px;
  }
  50% {
    stroke-dasharray: 60, 100;
    stroke-dashoffset: -20px;
  }
  100% {
    stroke-dasharray: 100, 100;
    stroke-dashoffset: -100px;
  }
}
/* Radio button
=============================
> 1. radio 樣式設定
2. radio 狀態設定
============================= */
.comp-radio {
  position: relative;
  display: inline-block;
}

.comp-radio .q-radio {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1.25rem 0.75rem auto;
  grid-template-columns: 1.25rem auto;
  gap: 0.75rem;
  font-size: var(--text-14);
  color: var(--text-primary);
  line-height: 1.45;
}
.comp-radio .q-radio input[type=radio] {
  display: -ms-grid;
  display: grid;
  place-content: center;
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: var(--input-background-default);
  /* Not removed via appearance */
  margin: 0;
  font: inherit;
  color: var(--text-primary);
  width: 1.25rem;
  height: 1.25rem;
  border: 0.0938rem solid var(--input-border-default);
  border-radius: 50%;
  -webkit-transition: background-color 150ms ease-out;
  transition: background-color 150ms ease-out;
  cursor: pointer;
}
.comp-radio .q-radio input[type=radio]::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: 120ms -webkit-transform ease-in-out;
  transition: 120ms -webkit-transform ease-in-out;
  transition: 120ms transform ease-in-out;
  transition: 120ms transform ease-in-out, 120ms -webkit-transform ease-in-out;
  -webkit-box-shadow: inset 1rem 1rem var(--color-white);
          box-shadow: inset 1rem 1rem var(--color-white);
  /* Windows High Contrast Mode */
  background-color: CanvasText;
}

/* =============================
1. radio 樣式設定
> 2. radio 狀態設定
============================= */
.comp-radio .q-radio input[type=radio]:checked {
  border-color: var(--input-border-active);
  background-color: var(--color-primary-800);
}
.comp-radio .q-radio input[type=radio]:checked::before {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.comp-radio .q-radio--disabled {
  color: var(--text-senary);
  pointer-events: none;
}
.comp-radio .q-radio input[type=radio]:disabled {
  color: var(--text-senary);
  border: 0.0938rem solid var(--input-border-inactive);
  background-color: var(--input-background-inactive);
}
.comp-radio .q-radio input[type=radio]:disabled::before {
  -webkit-box-shadow: inset 1rem 1rem var(--input-background-inactive-focused);
          box-shadow: inset 1rem 1rem var(--input-background-inactive-focused);
}

/* Select
=============================
> 1. select 樣式設定
2. 下拉選單設定
3. 在特定模式下轉為手機版面時，下拉選單的樣式設定
============================= */
.comp-select {
  position: relative;
  display: inline-block;
  max-width: 18.75rem;
}

.comp-select .q-select {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  min-width: 7.5rem;
  height: var(--comp-height-default);
  padding: var(--select-padding);
  margin: 0;
  border: 1px solid var(--select-border-default);
  border-radius: var(--select-border-radius);
  background-color: var(--select-background-default);
}
.comp-select .q-select:hover {
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
  border-color: var(--select-border-hover);
  -webkit-box-shadow: var(--select-hover-shadow);
          box-shadow: var(--select-hover-shadow);
}
.comp-select .q-select:hover .q-select__arrow::before {
  background-color: var(--ic-background-hover);
}
.comp-select .q-select:active {
  -webkit-transform: translateY(0px);
          transform: translateY(0px);
  border-color: var(--select-border-active);
  background-color: var(--select-background-active);
}
.comp-select .q-select:active .q-select__arrow::before {
  background-color: var(--ic-background-active);
}
.comp-select .q-select.invalid {
  border-color: var(--text-error);
}

.comp-select.active .q-select,
.comp-select .q-select.active {
  border-color: var(--select-border-active);
  background-color: var(--select-background-active);
  -webkit-box-shadow: var(--select-hover-shadow);
          box-shadow: var(--select-hover-shadow);
}

.comp-select.active .q-select__arrow::before,
.comp-select .q-select.active .q-select__arrow::before {
  -webkit-mask-position: 1.5rem 0rem, 0rem 0rem;
          mask-position: 1.5rem 0rem, 0rem 0rem;
}

.comp-select.auto-width {
  width: auto;
  min-width: auto;
  max-width: 100%;
}

.q-select__label {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  color: var(--text-secondary);
  font-size: var(--text-14);
  line-height: normal;
  padding-right: 0.625rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

/* =============================
1. select 樣式設定
> 2. 下拉選單設定
3. 在特定模式下轉為手機版面時，下拉選單的樣式設定
============================= */
.comp-select .q-select + .comp-dropdown {
  display: none;
}

.comp-select.active .q-select + .comp-dropdown,
.comp-select .q-select.active + .comp-dropdown {
  display: block;
}

.comp-select .q-select + .comp-dropdown .dropdown-menu {
  min-width: 100%;
  top: var(--select-dropdown-menu-offset-top);
}

.comp-select .q-select + .comp-dropdown.menu-align-top .dropdown-menu {
  top: auto;
  bottom: calc(var(--comp-height-default) + var(--select-dropdown-menu-offset-top));
}

.comp-select .q-select + .comp-dropdown.menu-align-trigger-bottom .dropdown-menu {
  top: auto;
  bottom: 0rem;
}

/* =============================
1. select 樣式設定
2. 下拉選單設定
> 3. 在特定模式下轉為手機版面時，下拉選單的樣式設定
============================= */
@media screen and (max-width: 767px) {
  .comp-select.active .q-select + .comp-dropdown.comp-dropdown--as-sheet,
  .comp-select .q-select.active + .comp-dropdown.comp-dropdown--as-sheet {
    display: block;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: var(--z-index-modal);
    background-color: var(--modal-background);
  }
  .comp-select.active .q-select + .comp-dropdown.comp-dropdown--as-sheet .dropdown-menu,
  .comp-select .q-select.active + .comp-dropdown.comp-dropdown--as-sheet .dropdown-menu {
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    min-width: var(--dialog-medium);
    max-width: 70vw;
    padding: 0rem 0rem;
    margin: 0rem auto;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    border-radius: var(--sheet-border-radius);
  }
  .comp-select.active .q-select + .comp-dropdown.comp-dropdown--as-sheet .dropdown-menu .dropdown-menu__item,
  .comp-select .q-select.active + .comp-dropdown.comp-dropdown--as-sheet .dropdown-menu .dropdown-menu__item {
    display: block;
    text-align: center;
    font-size: var(--sheet-content-font-size);
    padding: var(--sheet-list-item-padding);
    color: var(--text-primary);
  }
  .comp-select.active .q-select + .comp-dropdown.comp-dropdown--as-sheet .dropdown-menu .dropdown-menu__item:hover,
  .comp-select .q-select.active + .comp-dropdown.comp-dropdown--as-sheet .dropdown-menu .dropdown-menu__item:hover {
    background-color: var(--dropdown-menu-background);
  }
  .comp-select.active .q-select + .comp-dropdown.comp-dropdown--as-sheet .dropdown-menu .dropdown-menu__item:not(:last-child),
  .comp-select .q-select.active + .comp-dropdown.comp-dropdown--as-sheet .dropdown-menu .dropdown-menu__item:not(:last-child) {
    border-bottom: 1px solid var(--sheet-list-item-border-default);
  }
}
@media screen and (max-width: 641px) {
  .comp-select.active .q-select + .comp-dropdown.comp-dropdown--as-sheet .dropdown-menu,
  .comp-select .q-select.active + .comp-dropdown.comp-dropdown--as-sheet .dropdown-menu {
    position: absolute;
    width: 100vw;
    max-width: 100vw;
    min-width: 0;
    height: auto;
    max-height: calc(100vh - var(--sheet-offset-top));
    top: auto;
    bottom: 0;
    -webkit-transform: none;
            transform: none;
    overflow: hidden;
    border: 1px solid var(--sheet-border-default);
    border-top-left-radius: var(--sheet-border-radius);
    border-top-right-radius: var(--sheet-border-radius);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-color: var(--sheet-background);
    -webkit-box-shadow: var(--sheet-shadow);
            box-shadow: var(--sheet-shadow);
  }
}
/* Sheet
=============================
> 1. 容器設定
2. Header
3. Body
4. Footer
5. 非手機版面時的樣式設定
============================= */
.comp-sheet {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: var(--z-index-modal);
  background-color: var(--modal-background);
}

.comp-sheet .sheet {
  position: absolute;
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: auto 1fr auto;
  grid-template-rows: auto 1fr auto;
  width: 100vw;
  height: auto;
  max-height: calc(100vh - var(--sheet-offset-top));
  bottom: 0;
  overflow: hidden;
  border: 1px solid var(--sheet-border-default);
  border-top-left-radius: var(--sheet-border-radius);
  border-top-right-radius: var(--sheet-border-radius);
  background-color: var(--sheet-background);
  -webkit-box-shadow: var(--sheet-shadow);
          box-shadow: var(--sheet-shadow);
}

/* =============================
1. 容器設定
> 2. Header
3. Body
4. Footer
5. 非手機版面時的樣式設定
============================= */
.sheet-header {
  position: relative;
  padding: var(--sheet-header-padding);
}

.sheet-header__title {
  font-size: var(--sheet-header-font-size);
  color: var(--sheet-header-color);
  font-weight: 500;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sheet-header__btn-close {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 0.875rem;
  height: 0.875rem;
  padding: 0px;
}
.sheet-header__btn-close::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%3e%3cpolygon%20fill-rule='evenodd'%20points='5.548%206.473%200%20.925%20.925%200%206.473%205.548%2012.021%200%2012.945%20.925%207.397%206.473%2012.945%2012.021%2012.021%2012.945%206.473%207.397%20.925%2012.945%200%2012.021'%20transform='translate(.548%20.548)'/%3e%3c/svg%3e");
          mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%3e%3cpolygon%20fill-rule='evenodd'%20points='5.548%206.473%200%20.925%20.925%200%206.473%205.548%2012.021%200%2012.945%20.925%207.397%206.473%2012.945%2012.021%2012.021%2012.945%206.473%207.397%20.925%2012.945%200%2012.021'%20transform='translate(.548%20.548)'/%3e%3c/svg%3e");
  -webkit-mask-size: 100%;
          mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  background-color: var(--sheet-btn-close-default);
}
.sheet-header__btn-close:hover::before {
  background-color: var(--sheet-btn-close-hover);
}
.sheet-header__btn-close:active::before {
  background-color: var(--sheet-btn-close-active);
}

/* =============================
1. 容器設定
2. Header
> 3. Body
4. Footer
5. 非手機版面時的樣式設定
============================= */
.sheet-body {
  position: relative;
  line-height: 1.45;
  overflow-y: auto;
}

.sheet-content {
  position: relative;
  font-size: var(--sheet-content-font-size);
  color: var(--text-primary);
  padding: var(--sheet-content-padding);
}

.sheet-list {
  position: relative;
}

.sheet-list__item {
  text-align: center;
  padding: var(--sheet-list-item-padding);
}
.sheet-list__item:not(:last-child) {
  border-bottom: 1px solid var(--sheet-list-item-border-default);
}

/* =============================
1. 容器設定
2. Header
3. Body
> 4. Footer
5. 非手機版面時的樣式設定
============================= */
.sheet-footer {
  position: relative;
  padding: var(--sheet-footer-padding);
}
.sheet-footer .q-btn-group, .sheet-footer .q-btn {
  height: var(--sheet-btn-height);
  border-radius: var(--sheet-btn-border-radius);
}

/* =============================
1. 容器設定
2. Header
3. Body
4. Footer
> 5. 非手機版面時的樣式設定
============================= */
@media screen and (min-width: 767px) {
  .comp-sheet .sheet {
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    min-width: var(--dialog-medium);
    max-width: 70vw;
    margin: 0 auto;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    border-radius: var(--sheet-border-radius);
  }
}
/* Switch
-------------------------------------------------- */
.comp-switch {
  position: relative;
  display: inline-block;
  width: 2.188rem;
  height: 1.25rem;
}

.comp-switch .q-switch {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 0.625rem;
  top: 0;
  bottom: 0;
  margin: auto;
  border-radius: 0.625rem;
  background-color: var(--switch-background-default);
  -webkit-transition: background-color 0.4s ease-in-out;
  transition: background-color 0.4s ease-in-out;
}
.comp-switch .q-switch::before {
  position: absolute;
  content: "";
  height: 1rem;
  width: 1rem;
  left: 0px;
  bottom: -0.188rem;
  background-color: white;
  -webkit-transition: background-color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0rem 0.063rem 0.125rem 0.063rem;
          box-shadow: rgba(0, 0, 0, 0.1) 0rem 0.063rem 0.125rem 0.063rem;
  border-radius: 50%;
}
.comp-switch .q-switch.switch-on {
  background-color: var(--switch-background-active);
}
.comp-switch .q-switch.switch-on::before {
  -webkit-transform: translateX(1.188rem);
          transform: translateX(1.188rem);
  background-color: var(--switch-on-default);
}
.comp-switch .q-switch.switch-on:hover::before {
  background-color: var(--switch-on-hover);
}
.comp-switch .q-switch.switch-on:active::before {
  background-color: var(--switch-on-active);
}
.comp-switch .q-switch.switch-off {
  background-color: var(--switch-background-default);
}
.comp-switch .q-switch.switch-off::before {
  -webkit-transform: translateX(0rem);
          transform: translateX(0rem);
  background-color: var(--switch-off-default);
}

/* Table
=============================
> 1. table 容器樣式設定
2. table header 設定
3. table body 設定
============================= */
.comp-table {
  position: relative;
}

.table-wrapper {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  width: 100%;
  height: 100%;
  background-color: var(--table-background-default);
  border-radius: var(--table-border-radius);
  -webkit-box-shadow: var(--table-shadow);
          box-shadow: var(--table-shadow);
}

/* =============================
1. table 容器樣式設定
> 2. table header 設定
3. table body 設定
============================= */
.table-header {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  width: 100%;
  height: var(--table-header-height);
  min-height: var(--table-header-height);
  border: 1px solid var(--table-border-default);
  border-top-left-radius: var(--table-border-radius);
  border-top-right-radius: var(--table-border-radius);
}

.table-header__cell {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-width: 0;
  height: var(--table-header-height);
  min-height: var(--table-header-height);
  padding: var(--table-header-padding);
  font-size: var(--text-13);
  color: var(--text-content);
}
.table-header__cell:not(:last-child)::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 50%;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background-color: var(--table-border-default);
}

.table-header__cell__sort {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-width: 0;
  max-width: 100%;
}
.table-header__cell__sort .cell__sort-label {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table-header__cell__sort .cell__sort-arrow.arrow-down::before {
  -webkit-mask-position: 0rem 0rem, 1.5rem 0rem;
          mask-position: 0rem 0rem, 1.5rem 0rem;
}
.table-header__cell__sort .cell__sort-arrow.arrow-up::before {
  -webkit-mask-position: 1.5rem 0rem, 0rem 0rem;
          mask-position: 1.5rem 0rem, 0rem 0rem;
}
.table-header__cell__sort:hover .cell__sort-arrow::before {
  background-color: var(--ic-background-hover);
}
.table-header__cell__sort:active .cell__sort-arrow::before {
  background-color: var(--ic-background-active);
}

/* =============================
1. table 容器樣式設定
2. table header 設定
> 3. table body 設定
============================= */
.table-body {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 1px solid var(--table-border-default);
  border-top: 0;
  border-bottom-left-radius: var(--table-border-radius);
  border-bottom-right-radius: var(--table-border-radius);
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .table-body {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
  }
}

.table-row {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  min-height: var(--table-cell-height);
  border-right: 1px solid transparent;
  border-left: 1px solid transparent;
  border-bottom: 1px solid var(--table-border-default);
  -webkit-transition: -webkit-box-shadow 0.15s ease-out;
  transition: -webkit-box-shadow 0.15s ease-out;
  transition: box-shadow 0.15s ease-out;
  transition: box-shadow 0.15s ease-out, -webkit-box-shadow 0.15s ease-out;
}
.table-row:hover {
  z-index: var(--z-index-low);
  -webkit-box-shadow: var(--table-row-shadow);
          box-shadow: var(--table-row-shadow);
}
.table-row:last-child {
  border-bottom: 0;
}

.table-row__cell {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  min-width: 0;
  padding: var(--table-cell-padding);
  font-size: var(--text-14);
  line-height: 1.4;
}

.table__cell {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Table for Mobile
=============================
> 1. table 容器樣式設定
2. table header 設定
3. table body 設定
============================= */
.comp-table-m {
  position: relative;
}

.table-m-wrapper {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  background-color: var(--table-m-background-default);
  overflow: hidden;
}

.table-m--scroll-y {
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
}

.table-m--scroll-x {
  overflow-y: hidden;
  overflow-x: auto;
  width: auto;
  min-width: 100%;
  min-height: 100%;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
}

/* =============================
1. table 容器樣式設定
> 2. table header 設定
3. table body 設定
============================= */
.table-m-header {
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
  height: 2.1875rem;
  top: 0;
  padding: 0 0.625rem;
  border-bottom: 1px solid var(--table-border-default);
  background-color: var(--table-m-header-background-default);
  -webkit-box-shadow: var(--table-m-header-shadow);
          box-shadow: var(--table-m-header-shadow);
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  z-index: var(--z-index-default);
}

.table-m-header__cell {
  padding: 0rem 0.625rem;
  font-size: var(--text-13);
  color: var(--text-content);
}
.table-m-header__cell:last-child {
  border-right: 0;
}

/* =============================
1. table 容器樣式設定
2. table header 設定
> 3. table body 設定
============================= */
.table-m-body {
  display: inline-block;
  min-width: 100%;
  min-height: 100%;
  padding: 2.8125rem 0.625rem 0.625rem;
  background-color: var(--table-m-background-default);
}

.table-m-row {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
  color: var(--text-content);
  margin-bottom: 0.5rem;
  border: 1px solid var(--table-border-default);
  border-radius: var(--table-row-border-radius);
  background-color: var(--table-row-background-default);
}

.table-m-row__sticky {
  position: sticky;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: 3rem;
  top: 2.1875rem;
  left: 0rem;
  padding-left: 0.625rem;
  border-radius: var(--table-row-border-radius);
  background-color: var(--table-row-background-default);
  background: -webkit-gradient(linear, left top, right top, from(rgb(255, 255, 255)), color-stop(30%, rgba(255, 255, 255, 0.8)), color-stop(80%, rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%);
}
.table-m-row__sticky > .sticky-img {
  width: 2rem;
  height: 2rem;
  line-height: 0;
  margin-right: 0.25rem;
  margin-left: 0.25rem;
}
.table-m-row__sticky > .sticky-img img {
  width: 100%;
  max-width: 100%;
}
.table-m-row__sticky > .sticky-label {
  color: var(--text-content);
  font-size: var(--text-14);
  font-weight: 700;
}
.table-m-row__sticky::before {
  content: "";
  width: 0.25rem;
  height: 1.25rem;
  background-color: var(--table-m-sticky-bar);
  border-radius: 1.25rem;
}

.table-m-row__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 100%;
}

.table-m-row__cell {
  padding: 0.25rem 10px 0.5rem;
  color: var(--text-content);
  scroll-snap-align: start;
  scroll-margin-left: 0.625rem;
}
.table-m-row__cell:last-child {
  border-right: 0;
}

.table-m__cell {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  width: 14rem;
  min-width: 14rem;
  overflow-wrap: anywhere;
  word-break: break-word;
  border-right: 1px solid var(--table-border-default);
}
.table-m__cell:last-child {
  border-right: 0;
}

/* Tag
-------------------------------------------------- */
.comp-tag {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.q-tag {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 0;
  color: var(--text-secondary);
  padding: var(--tag-padding);
  background-color: var(--tag-background-default);
  border-radius: var(--tag-border-radius);
}

.tag__img {
  width: 1.25rem;
  height: 1.25rem;
  line-height: 0;
}
.tag__img img {
  width: 100%;
  max-width: 100%;
}

.tag__label {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  font-size: var(--text-16);
  line-height: normal;
}

.tag__label:not(:first-child) {
  font-size: var(--text-13);
}

.tag__btn-close {
  position: relative;
  width: 0.625rem;
  height: 0.625rem;
  padding: 0px;
}
.tag__btn-close::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%3e%3cpolygon%20fill-rule='evenodd'%20points='5.548%206.473%200%20.925%20.925%200%206.473%205.548%2012.021%200%2012.945%20.925%207.397%206.473%2012.945%2012.021%2012.021%2012.945%206.473%207.397%20.925%2012.945%200%2012.021'%20transform='translate(.548%20.548)'/%3e%3c/svg%3e");
          mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%3e%3cpolygon%20fill-rule='evenodd'%20points='5.548%206.473%200%20.925%20.925%200%206.473%205.548%2012.021%200%2012.945%20.925%207.397%206.473%2012.945%2012.021%2012.021%2012.945%206.473%207.397%20.925%2012.945%200%2012.021'%20transform='translate(.548%20.548)'/%3e%3c/svg%3e");
  -webkit-mask-size: 100%;
          mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  background-color: var(--text-quinary);
}
.tag__btn-close:hover::before {
  background-color: var(--text-quaternary);
}
.tag__btn-close:active::before {
  background-color: var(--text-secondary);
}

.q-tag--small {
  padding: var(--tag-padding-small);
}
.q-tag--small .tag__label {
  font-size: var(--text-15);
}

.q-tag--tiny {
  height: auto;
  padding: var(--tag-padding-tiny);
}
.q-tag--tiny .tag__label {
  font-size: var(--text-13);
}

/* Header
=============================
> 1. header 預設樣式
2. logo
3. utils 功能選單
4. 轉為手機版面時 header 的樣式設定
============================= */
.app-root > .app-head, .app-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0rem 1.5rem 0rem 1.125rem;
  background-color: var(--header-background);
  background: var(--header-inner-shadow);
}
@supports (padding: max(0px)) {
  .app-root > .app-head, .app-head {
    padding-left: max(1.125rem, env(safe-area-inset-left));
    padding-right: max(1.5rem, env(safe-area-inset-right));
  }
}

/* =============================
1. header 預設樣式
> 2. logo
3. utils 功能選單
4. 轉為手機版面時 header 的樣式設定
============================= */
.app-head .brand {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  width: auto;
  min-width: 0;
  margin-right: auto;
}
.app-head .brand .logo {
  width: auto;
  height: 3rem;
  margin-top: 0.375rem;
  background-color: transparent;
}
.app-head .brand .logo img {
  height: 100%;
}

/* =============================
1. header 預設樣式
2. logo
> 3. utils 功能選單
4. 轉為手機版面時 header 的樣式設定
============================= */
.app-head .utils {
  min-width: 0;
}
.app-head .utils .util-btn {
  margin-right: 1rem;
}
.app-head .utils .util-btn .comp-dropdown .dropdown-menu {
  border-radius: 0.5rem;
}
.app-head .utils .util-btn.active .comp-dropdown {
  display: block !important;
}
.app-head .utils .util-btn[util-type=lang]::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%20viewBox='0%200%2040%2040'%3e%3cg%20fill-rule='evenodd'%20transform='translate(8%208)'%3e%3cpath%20d='M12.7157895,1.26315789%20L12.7151579,5.55715789%20L21.4736842,5.55789474%20L21.4736842,6.98947368%20L12.7151579,6.98915789%20L12.7151579,11.2841579%20L22.7368421,11.2842105%20L22.7368421,12.7157895%20L12.7151579,12.7151579%20L12.7151579,17.0101579%20L21.4736842,17.0105263%20L21.4736842,18.4421053%20L12.7151579,18.4411579%20L12.7157895,22.7368421%20L11.2842105,22.7368421%20L11.2841579,18.4411579%20L2.52631579,18.4421053%20L2.52631579,17.0105263%20L11.2841579,17.0101579%20L11.2841579,12.7151579%20L1.26315789,12.7157895%20L1.26315789,11.2842105%20L11.2841579,11.2841579%20L11.2841579,6.98915789%20L2.52631579,6.98947368%20L2.52631579,5.55789474%20L11.2841579,5.55715789%20L11.2842105,1.26315789%20L12.7157895,1.26315789%20Z'/%3e%3cpath%20fill-rule='nonzero'%20d='M12,22.7368421%20C8.06861163,22.7368421%205.05263158,17.8815712%205.05263158,12%20C5.05263158,6.11842882%208.06861163,1.26315789%2012,1.26315789%20C15.9313884,1.26315789%2018.9473684,6.11842882%2018.9473684,12%20C18.9473684,17.8815712%2015.9313884,22.7368421%2012,22.7368421%20Z%20M12,21.4736842%20C15.0426932,21.4736842%2017.6842105,17.2807995%2017.6842105,12%20C17.6842105,6.71920048%2015.0426932,2.52631579%2012,2.52631579%20C8.95730683,2.52631579%206.31578947,6.71920048%206.31578947,12%20C6.31578947,17.2807995%208.95730683,21.4736842%2012,21.4736842%20Z'/%3e%3cpath%20fill-rule='nonzero'%20d='M12,0%20C18.627417,0%2024,5.372583%2024,12%20C24,18.627417%2018.627417,24%2012,24%20C5.372583,24%200,18.627417%200,12%20C0,5.372583%205.372583,0%2012,0%20Z%20M11.9,1.6%20C6.10101013,1.6%201.4,6.30101013%201.4,12.1%20C1.4,17.8989899%206.10101013,22.6%2011.9,22.6%20C17.6989899,22.6%2022.4,17.8989899%2022.4,12.1%20C22.4,6.30101013%2017.6989899,1.6%2011.9,1.6%20Z'/%3e%3c/g%3e%3c/svg%3e");
          mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%20viewBox='0%200%2040%2040'%3e%3cg%20fill-rule='evenodd'%20transform='translate(8%208)'%3e%3cpath%20d='M12.7157895,1.26315789%20L12.7151579,5.55715789%20L21.4736842,5.55789474%20L21.4736842,6.98947368%20L12.7151579,6.98915789%20L12.7151579,11.2841579%20L22.7368421,11.2842105%20L22.7368421,12.7157895%20L12.7151579,12.7151579%20L12.7151579,17.0101579%20L21.4736842,17.0105263%20L21.4736842,18.4421053%20L12.7151579,18.4411579%20L12.7157895,22.7368421%20L11.2842105,22.7368421%20L11.2841579,18.4411579%20L2.52631579,18.4421053%20L2.52631579,17.0105263%20L11.2841579,17.0101579%20L11.2841579,12.7151579%20L1.26315789,12.7157895%20L1.26315789,11.2842105%20L11.2841579,11.2841579%20L11.2841579,6.98915789%20L2.52631579,6.98947368%20L2.52631579,5.55789474%20L11.2841579,5.55715789%20L11.2842105,1.26315789%20L12.7157895,1.26315789%20Z'/%3e%3cpath%20fill-rule='nonzero'%20d='M12,22.7368421%20C8.06861163,22.7368421%205.05263158,17.8815712%205.05263158,12%20C5.05263158,6.11842882%208.06861163,1.26315789%2012,1.26315789%20C15.9313884,1.26315789%2018.9473684,6.11842882%2018.9473684,12%20C18.9473684,17.8815712%2015.9313884,22.7368421%2012,22.7368421%20Z%20M12,21.4736842%20C15.0426932,21.4736842%2017.6842105,17.2807995%2017.6842105,12%20C17.6842105,6.71920048%2015.0426932,2.52631579%2012,2.52631579%20C8.95730683,2.52631579%206.31578947,6.71920048%206.31578947,12%20C6.31578947,17.2807995%208.95730683,21.4736842%2012,21.4736842%20Z'/%3e%3cpath%20fill-rule='nonzero'%20d='M12,0%20C18.627417,0%2024,5.372583%2024,12%20C24,18.627417%2018.627417,24%2012,24%20C5.372583,24%200,18.627417%200,12%20C0,5.372583%205.372583,0%2012,0%20Z%20M11.9,1.6%20C6.10101013,1.6%201.4,6.30101013%201.4,12.1%20C1.4,17.8989899%206.10101013,22.6%2011.9,22.6%20C17.6989899,22.6%2022.4,17.8989899%2022.4,12.1%20C22.4,6.30101013%2017.6989899,1.6%2011.9,1.6%20Z'/%3e%3c/g%3e%3c/svg%3e");
  -webkit-mask-size: 100%;
          mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  background-color: var(--util-button-mask-background-dark);
}
.app-head .utils .util-btn[util-type=lang] .comp-dropdown {
  display: none;
}
.app-head .utils .util-btn[util-type=lang] .comp-dropdown .dropdown-menu .dropdown-menu__item {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.app-head .utils .util-btn[util-type=lang] .comp-dropdown .dropdown-menu .dropdown-menu__item.active::before {
  left: 0.5rem;
}
.app-head .utils .util-btn[util-type=account] {
  margin-right: 0;
}
.app-head .utils .util-btn[util-type=account] .comp-avatar.no-avatar {
  color: #26249a;
}
.app-head .utils .divide {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  width: 1px;
  height: 2.5rem;
  background-color: var(--header-divide);
  margin-right: 1rem;
}
.app-head .utils .util-btn .comp-dropdown .dropdown-menu {
  min-width: var(--dropdown-menu-default);
  right: 0;
}

/* Main
-------------------------------------------------- */
@property --bg-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.app-root > .app-main, .app-main {
  color: var(--text-primary);
  padding: 3rem 2rem;
}
.app-root > .app-main .container--slogan .slogan__text, .app-main .container--slogan .slogan__text {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
.app-root > .app-main .container--slogan h1, .app-main .container--slogan h1 {
  font-size: var(--text-20);
  font-weight: 500;
}
.app-root > .app-main .container--slogan p, .app-main .container--slogan p {
  font-size: var(--text-16);
  margin-top: 1rem;
  margin-bottom: 2.5rem;
}
.app-root > .app-main .container--slogan p a, .app-main .container--slogan p a {
  color: var(--text-primary);
}
.app-root > .app-main .container--plans, .app-main .container--plans {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 3.5rem 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.app-root > .app-main .plans, .app-main .plans {
  -ms-grid-column-align: end;
      justify-self: end;
  width: 100%;
  max-width: 22.5rem;
  padding: 0.2656rem 0.2656rem;
  border-radius: 0.875rem;
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0.25rem 0.625rem 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.25rem 0.625rem 0 rgba(0, 0, 0, 0.1);
}
.app-root > .app-main .plans .plan-content, .app-main .plans .plan-content {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 1.5rem 2rem;
  border-radius: 0.625rem;
  background-color: var(--color-white);
  z-index: 1;
}
.app-root > .app-main .plans .plan-content__title, .app-main .plans .plan-content__title {
  position: relative;
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  font-size: var(--text-20);
  font-weight: 500;
  color: #001B49;
  padding-left: 0.75rem;
  margin-bottom: 1.875rem;
}
.app-root > .app-main .plans .plan-content__title::before, .app-main .plans .plan-content__title::before {
  content: "";
  position: absolute;
  display: block;
  width: 0.25rem;
  height: 70%;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border-radius: 3.125rem;
  background-color: #8a98d5;
}
.app-root > .app-main .plans .plan-content__pricing, .app-main .plans .plan-content__pricing {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 4rem;
  font-size: var(--text-36);
}
.app-root > .app-main .plans .plan-content__pricing .plan-content__pricing__ic, .app-main .plans .plan-content__pricing .plan-content__pricing__ic {
  position: relative;
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  width: 8.4608px;
  height: 1.045rem;
  margin-right: 0.25rem;
  margin-top: 0.0625rem;
}
.app-root > .app-main .plans .plan-content__pricing .plan-content__pricing__ic::before, .app-main .plans .plan-content__pricing .plan-content__pricing__ic::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='17'%20viewBox='0%200%2010%2017'%3e%3cpath%20d='M6.31933594,11.5224609%20C6.31933594,11.0244141%206.16113281,10.612793%205.84472656,10.2875977%20C5.52832031,9.96240234%205.00097656,9.66943359%204.26269531,9.40869141%20C3.52441406,9.14794922%202.95019531,8.90625%202.54003906,8.68359375%20C1.17480469,7.95117188%200.4921875,6.8671875%200.4921875,5.43164062%20C0.4921875,4.45898438%200.788085938,3.65917969%201.37988281,3.03222656%20C1.97167969,2.40527344%202.77441406,2.03320312%203.78808594,1.91601562%20L3.78808594,0%20L5.19433594,0%20L5.19433594,1.93359375%20C6.21386719,2.08007812%207.00195312,2.51220703%207.55859375,3.22998047%20C8.11523438,3.94775391%208.39355469,4.88085938%208.39355469,6.02929688%20L6.26660156,6.02929688%20C6.26660156,5.29101562%206.10107422,4.70947266%205.77001953,4.28466797%20C5.43896484,3.85986328%204.98925781,3.64746094%204.42089844,3.64746094%20C3.85839844,3.64746094%203.41894531,3.79980469%203.10253906,4.10449219%20C2.78613281,4.40917969%202.62792969,4.84570312%202.62792969,5.4140625%20C2.62792969,5.92382812%202.78466797,6.33251953%203.09814453,6.64013672%20C3.41162109,6.94775391%203.94335938,7.23925781%204.69335938,7.51464844%20C5.44335938,7.79003906%206.03222656,8.04492188%206.45996094,8.27929688%20C6.88769531,8.51367188%207.24804688,8.78173828%207.54101562,9.08349609%20C7.83398438,9.38525391%208.05957031,9.73242188%208.21777344,10.125%20C8.37597656,10.5175781%208.45507812,10.9775391%208.45507812,11.5048828%20C8.45507812,12.4951172%208.15185547,13.2978516%207.54541016,13.9130859%20C6.93896484,14.5283203%206.09375,14.8916016%205.00976562,15.0029297%20L5.00976562,16.7167969%20L3.61230469,16.7167969%20L3.61230469,15.0117188%20C2.45214844,14.8828125%201.56005859,14.4667969%200.936035156,13.7636719%20C0.312011719,13.0605469%200,12.1289062%200,10.96875%20L2.13574219,10.96875%20C2.13574219,11.7070312%202.32177734,12.2783203%202.69384766,12.6826172%20C3.06591797,13.0869141%203.59179688,13.2890625%204.27148438,13.2890625%20C4.93945312,13.2890625%205.44775391,13.1279297%205.79638672,12.8056641%20C6.14501953,12.4833984%206.31933594,12.0556641%206.31933594,11.5224609%20Z'%20transform='translate(.879%20.138)'/%3e%3c/svg%3e");
          mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='17'%20viewBox='0%200%2010%2017'%3e%3cpath%20d='M6.31933594,11.5224609%20C6.31933594,11.0244141%206.16113281,10.612793%205.84472656,10.2875977%20C5.52832031,9.96240234%205.00097656,9.66943359%204.26269531,9.40869141%20C3.52441406,9.14794922%202.95019531,8.90625%202.54003906,8.68359375%20C1.17480469,7.95117188%200.4921875,6.8671875%200.4921875,5.43164062%20C0.4921875,4.45898438%200.788085938,3.65917969%201.37988281,3.03222656%20C1.97167969,2.40527344%202.77441406,2.03320312%203.78808594,1.91601562%20L3.78808594,0%20L5.19433594,0%20L5.19433594,1.93359375%20C6.21386719,2.08007812%207.00195312,2.51220703%207.55859375,3.22998047%20C8.11523438,3.94775391%208.39355469,4.88085938%208.39355469,6.02929688%20L6.26660156,6.02929688%20C6.26660156,5.29101562%206.10107422,4.70947266%205.77001953,4.28466797%20C5.43896484,3.85986328%204.98925781,3.64746094%204.42089844,3.64746094%20C3.85839844,3.64746094%203.41894531,3.79980469%203.10253906,4.10449219%20C2.78613281,4.40917969%202.62792969,4.84570312%202.62792969,5.4140625%20C2.62792969,5.92382812%202.78466797,6.33251953%203.09814453,6.64013672%20C3.41162109,6.94775391%203.94335938,7.23925781%204.69335938,7.51464844%20C5.44335938,7.79003906%206.03222656,8.04492188%206.45996094,8.27929688%20C6.88769531,8.51367188%207.24804688,8.78173828%207.54101562,9.08349609%20C7.83398438,9.38525391%208.05957031,9.73242188%208.21777344,10.125%20C8.37597656,10.5175781%208.45507812,10.9775391%208.45507812,11.5048828%20C8.45507812,12.4951172%208.15185547,13.2978516%207.54541016,13.9130859%20C6.93896484,14.5283203%206.09375,14.8916016%205.00976562,15.0029297%20L5.00976562,16.7167969%20L3.61230469,16.7167969%20L3.61230469,15.0117188%20C2.45214844,14.8828125%201.56005859,14.4667969%200.936035156,13.7636719%20C0.312011719,13.0605469%200,12.1289062%200,10.96875%20L2.13574219,10.96875%20C2.13574219,11.7070312%202.32177734,12.2783203%202.69384766,12.6826172%20C3.06591797,13.0869141%203.59179688,13.2890625%204.27148438,13.2890625%20C4.93945312,13.2890625%205.44775391,13.1279297%205.79638672,12.8056641%20C6.14501953,12.4833984%206.31933594,12.0556641%206.31933594,11.5224609%20Z'%20transform='translate(.879%20.138)'/%3e%3c/svg%3e");
  -webkit-mask-size: 100%;
          mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  background-color: var(--util-button-mask-background-dark);
}
.app-root > .app-main .plans .plan-content__pricing .plan-content__pricing__price, .app-main .plans .plan-content__pricing .plan-content__pricing__price {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.875rem;
  margin-right: 0.875rem;
}
.app-root > .app-main .plans .plan-content__pricing .plan-content__pricing__price .plan-content__pricing__price__discount, .app-main .plans .plan-content__pricing .plan-content__pricing__price .plan-content__pricing__price__discount {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0.25rem;
  margin-right: 0.625rem;
}
.app-root > .app-main .plans .plan-content__pricing .plan-content__pricing__price .plan-content__pricing__price__discount .text1, .app-main .plans .plan-content__pricing .plan-content__pricing__price .plan-content__pricing__price__discount .text1 {
  font-size: var(--text-40);
}
.app-root > .app-main .plans .plan-content__pricing .plan-content__pricing__price .plan-content__pricing__price__discount .text2, .app-main .plans .plan-content__pricing .plan-content__pricing__price .plan-content__pricing__price__discount .text2 {
  font-size: var(--text-24);
}
.app-root > .app-main .plans .plan-content__pricing .plan-content__pricing__price .plan-content__pricing__price__discount .text3, .app-main .plans .plan-content__pricing .plan-content__pricing__price .plan-content__pricing__price__discount .text3 {
  font-size: var(--text-24);
}
.app-root > .app-main .plans .plan-content__pricing .plan-content__pricing__price .color-black, .app-main .plans .plan-content__pricing .plan-content__pricing__price .color-black {
  font-size: var(--text-15);
  line-height: 1.35;
}
.app-root > .app-main .plans .plan-content__pricing .plan-content__pricing__desc, .app-main .plans .plan-content__pricing .plan-content__pricing__desc {
  margin-top: 0.25rem;
  font-size: var(--text-15);
  line-height: 1.35;
}
.app-root > .app-main .plans .divider, .app-main .plans .divider {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  width: 100%;
  height: 1px;
  background-color: var(--comp-divider-gray);
  margin: 1.25rem 0 1.25rem;
}
.app-root > .app-main .plans .plan-content__list, .app-main .plans .plan-content__list {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.app-root > .app-main .plans .plan-content__list .item-group, .app-main .plans .plan-content__list .item-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.app-root > .app-main .plans .plan-content__list .item-group__check, .app-main .plans .plan-content__list .item-group__check {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  display: -ms-grid;
  display: grid;
  place-content: center;
  width: 1.125rem;
  min-width: 1.125rem;
  height: 1.5rem;
  margin-right: 0.5rem;
}
.app-root > .app-main .plans .plan-content__list .item-group__check::before, .app-main .plans .plan-content__list .item-group__check::before {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
  clip-path: polygon(13.9% 53.3%, 22.7% 44.5%, 40.4% 62.1%, 80.2% 22.4%, 89% 31.2%, 40.4% 79.8%);
  background-color: #aea6ff;
}
.app-root > .app-main .plans .plan-content__list .item-group__label, .app-main .plans .plan-content__list .item-group__label {
  position: relative;
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  min-width: 0;
  color: var(--text-primary);
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.app-root > .app-main .plans .plan-content__list .item-group__info, .app-main .plans .plan-content__list .item-group__info {
  position: relative;
  width: 1.125rem;
  min-width: 1.125rem;
  height: 1.125rem;
  margin: 0 0.25rem;
  opacity: 0.5;
}
.app-root > .app-main .plans .plan-content__list .item-group__info::before, .app-main .plans .plan-content__list .item-group__info::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20viewBox='0%200%2018%2018'%3e%3cg%20fill='none'%20fill-rule='evenodd'%20transform='translate(1%20.985)'%3e%3cpath%20stroke='%23000'%20stroke-width='1.5'%20d='M8,0%20C3.6,0%200,3.6%200,8%20C0,12.4%203.6,16%208,16%20C12.4,16%2016,12.4%2016,8%20C16,3.6%2012.4,0%208,0%20Z'/%3e%3ccircle%20cx='8'%20cy='3.556'%20r='1'%20fill='%23000'/%3e%3crect%20width='1.778'%20height='7.111'%20x='7.111'%20y='6.222'%20fill='%23000'%20rx='.889'/%3e%3c/g%3e%3c/svg%3e");
          mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='18'%20height='18'%20viewBox='0%200%2018%2018'%3e%3cg%20fill='none'%20fill-rule='evenodd'%20transform='translate(1%20.985)'%3e%3cpath%20stroke='%23000'%20stroke-width='1.5'%20d='M8,0%20C3.6,0%200,3.6%200,8%20C0,12.4%203.6,16%208,16%20C12.4,16%2016,12.4%2016,8%20C16,3.6%2012.4,0%208,0%20Z'/%3e%3ccircle%20cx='8'%20cy='3.556'%20r='1'%20fill='%23000'/%3e%3crect%20width='1.778'%20height='7.111'%20x='7.111'%20y='6.222'%20fill='%23000'%20rx='.889'/%3e%3c/g%3e%3c/svg%3e");
  -webkit-mask-size: 100%;
          mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  background-color: var(--color-dark-grey);
}
.app-root > .app-main .plans .plan-content__list .item-group__info:hover, .app-main .plans .plan-content__list .item-group__info:hover {
  opacity: 1;
}
.app-root > .app-main .plans .plan-content__list .item-group__info:hover .item-group__hint, .app-main .plans .plan-content__list .item-group__info:hover .item-group__hint {
  display: block;
}
.app-root > .app-main .plans .plan-content__list .item-group__hint, .app-main .plans .plan-content__list .item-group__hint {
  position: absolute;
  display: none;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  max-width: 15.625rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 110%;
  color: var(--color-white);
  font-size: var(--text-14);
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  background-color: rgba(0, 0, 0, 0.85);
  -webkit-box-shadow: 0 0.25rem 0.625rem 0 rgba(0, 0, 0, 0.1);
          box-shadow: 0 0.25rem 0.625rem 0 rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: var(--modal-backdrop-blur);
          backdrop-filter: var(--modal-backdrop-blur);
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  z-index: var(--z-index-low);
}
.app-root > .app-main .plans .plan-content__action, .app-main .plans .plan-content__action {
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  margin-top: 1.5rem;
}
.app-root > .app-main .plans .plan-content__action .q-btn--primary, .app-main .plans .plan-content__action .q-btn--primary {
  background-color: #26249a;
}
.app-root > .app-main .plans .plan-content__action .q-btn--primary:hover, .app-main .plans .plan-content__action .q-btn--primary:hover {
  background-color: #2c29b2;
}
.app-root > .app-main .plans .plan-content__action .q-btn--primary:active, .app-main .plans .plan-content__action .q-btn--primary:active {
  background-color: #212084;
}
.app-root > .app-main .plans.premium, .app-main .plans.premium {
  position: relative;
  -ms-grid-column-align: start;
      justify-self: start;
  background: rgb(82, 113, 232);
}
.app-root > .app-main .plans.premium .plan-content__title::before, .app-main .plans.premium .plan-content__title::before {
  background-color: #f79b3f;
}
.app-root > .app-main .plans.premium .plan-content__pricing .plan-content__pricing__price, .app-main .plans.premium .plan-content__pricing .plan-content__pricing__price {
  position: relative;
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  min-width: -webkit-fit-content;
  min-width: -moz-fit-content;
  min-width: fit-content;
  font-size: var(--text-40);
}
.app-root > .app-main .plans.premium::before, .app-main .plans.premium::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 0.875rem;
  background: linear-gradient(135deg, rgb(82, 113, 232) 0%, rgb(222, 137, 181) 50%, rgb(58, 109, 215) 100%);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 0;
}
.app-root > .app-main .plans.premium::after, .app-main .plans.premium::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 0.875rem;
  background-image: conic-gradient(from var(--bg-angle), rgb(61, 92, 214), rgb(222, 137, 181), rgb(50, 101, 212), rgb(222, 137, 181), rgb(61, 92, 214));
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 0;
  -webkit-animation: 6s conic-gradient-spin linear infinite;
          animation: 6s conic-gradient-spin linear infinite;
}
@-webkit-keyframes conic-gradient-spin {
  from {
    --bg-angle: 0deg;
  }
  to {
    --bg-angle: 360deg;
  }
}
@keyframes conic-gradient-spin {
  from {
    --bg-angle: 0deg;
  }
  to {
    --bg-angle: 360deg;
  }
}
.app-root > .app-main .terms, .app-main .terms {
  font-size: var(--text-14);
  color: var(--text-tertiary);
  text-align: center;
  padding: 1.5rem 1rem;
}
.app-root > .app-main .form-group, .app-main .form-group {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 0.5rem 1fr;
  grid-template-columns: auto 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.5rem;
}
.app-root > .app-main .form-group label, .app-main .form-group label {
  font-size: var(--text-15);
  color: var(--text-quaternary);
}
.app-root > .app-main .form-group .comp-select .q-select, .app-main .form-group .comp-select .q-select {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  border-color: transparent;
  border-radius: var(--comp-border-radius-rounded);
  background-color: #eef1ff;
}
.app-root > .app-main .form-group .comp-select .q-select:hover, .app-main .form-group .comp-select .q-select:hover {
  border-color: #dbe0f8;
  background-color: #f4f6ff;
}
.app-root > .app-main .form-group .comp-select .q-select:active, .app-root > .app-main .form-group .comp-select .q-select.active, .app-main .form-group .comp-select .q-select:active, .app-main .form-group .comp-select .q-select.active {
  border-color: #dee3f7;
  background-color: #e3e8fc;
}
.app-root > .app-main .form-group .comp-select .q-select .q-select__arrow, .app-main .form-group .comp-select .q-select .q-select__arrow {
  position: relative;
  width: 0.375rem;
  min-width: 0.375rem;
  height: 0.6875rem;
}
.app-root > .app-main .form-group .comp-select .q-select .q-select__arrow::before, .app-main .form-group .comp-select .q-select .q-select__arrow::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='6'%20height='11'%20viewBox='0%200%206%2011'%3e%3cg%20fill='none'%20fill-rule='evenodd'%3e%3crect%20width='6'%20height='11'/%3e%3cpath%20fill='%2376808C'%20d='M2.93721278,7.20710678%20L5.41208652,9.68198052%20C5.66742932,9.93732332%205.66742932,10.3513158%205.41208652,10.6066586%20C5.15674371,10.8620014%204.74275123,10.8620014%204.48740842,10.6066586%20L2.93721278,9.05646298%20L2.93721278,9.05646298%20L1.38701715,10.6066586%20C1.13167434,10.8620014%200.717681855,10.8620014%200.462339049,10.6066586%20C0.206996243,10.3513158%200.206996243,9.93732332%200.462339049,9.68198052%20L2.93721278,7.20710678%20L2.93721278,7.20710678%20Z'%20transform='rotate(-180%202.937%209.138)'/%3e%3cpath%20fill='%2376808C'%20d='M2.93721278,0.207106781%20L5.41208652,2.68198052%20C5.66742932,2.93732332%205.66742932,3.35131581%205.41208652,3.60665861%20C5.15674371,3.86200142%204.74275123,3.86200142%204.48740842,3.60665861%20L2.93721278,2.05646298%20L2.93721278,2.05646298%20L1.38701715,3.60665861%20C1.13167434,3.86200142%200.717681855,3.86200142%200.462339049,3.60665861%20C0.206996243,3.35131581%200.206996243,2.93732332%200.462339049,2.68198052%20L2.93721278,0.207106781%20L2.93721278,0.207106781%20Z'/%3e%3c/g%3e%3c/svg%3e");
          mask-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='6'%20height='11'%20viewBox='0%200%206%2011'%3e%3cg%20fill='none'%20fill-rule='evenodd'%3e%3crect%20width='6'%20height='11'/%3e%3cpath%20fill='%2376808C'%20d='M2.93721278,7.20710678%20L5.41208652,9.68198052%20C5.66742932,9.93732332%205.66742932,10.3513158%205.41208652,10.6066586%20C5.15674371,10.8620014%204.74275123,10.8620014%204.48740842,10.6066586%20L2.93721278,9.05646298%20L2.93721278,9.05646298%20L1.38701715,10.6066586%20C1.13167434,10.8620014%200.717681855,10.8620014%200.462339049,10.6066586%20C0.206996243,10.3513158%200.206996243,9.93732332%200.462339049,9.68198052%20L2.93721278,7.20710678%20L2.93721278,7.20710678%20Z'%20transform='rotate(-180%202.937%209.138)'/%3e%3cpath%20fill='%2376808C'%20d='M2.93721278,0.207106781%20L5.41208652,2.68198052%20C5.66742932,2.93732332%205.66742932,3.35131581%205.41208652,3.60665861%20C5.15674371,3.86200142%204.74275123,3.86200142%204.48740842,3.60665861%20L2.93721278,2.05646298%20L2.93721278,2.05646298%20L1.38701715,3.60665861%20C1.13167434,3.86200142%200.717681855,3.86200142%200.462339049,3.60665861%20C0.206996243,3.35131581%200.206996243,2.93732332%200.462339049,2.68198052%20L2.93721278,0.207106781%20L2.93721278,0.207106781%20Z'/%3e%3c/g%3e%3c/svg%3e");
  -webkit-mask-size: 100%;
          mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  background-color: var(--color-black);
}
.app-root > .app-main .form-group .selected-region, .app-main .form-group .selected-region {
  color: var(--text-primary);
}
@media screen and (max-width: 767px) {
  .app-root > .app-main, .app-main {
    margin: 0;
  }
  .app-root > .app-main .container--plans, .app-main .container--plans {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    -ms-grid-rows: auto 1.5rem auto;
    grid-template-rows: auto auto;
    gap: 1.5rem;
  }
  .app-root > .app-main .container--plans > *:nth-child(1), .app-main .container--plans > *:nth-child(1) {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }
  .app-root > .app-main .container--plans > *:nth-child(2), .app-main .container--plans > *:nth-child(2) {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
  .app-root > .app-main .container--plans .plans, .app-main .container--plans .plans {
    -ms-grid-column-align: start;
        justify-self: start;
    width: 100%;
    max-width: 100%;
  }
  .app-root > .app-main .container--plans .plans .plan-content, .app-main .container--plans .plans .plan-content {
    padding: 1rem 1.5rem 1.5rem;
  }
  .app-root > .app-main .container--plans .plans .plan-content__title, .app-main .container--plans .plans .plan-content__title {
    margin-bottom: 1.5rem;
  }
  .app-root > .app-main .container--plans .plans .plan-content__pricing, .app-main .container--plans .plans .plan-content__pricing {
    min-height: -webkit-fit-content;
    min-height: -moz-fit-content;
    min-height: fit-content;
  }
}

/* Layout
-------------------------------------------------- */
.app-root {
  position: relative;
  width: 100%;
  height: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  -ms-grid-rows: var(--header-height-default) 1fr;
  grid-template-rows: var(--header-height-default) 1fr;
      grid-template-areas: "header" "main";
}
.app-root .app-head {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: header;
}
.app-root .app-main {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: main;
}

/* Font setting
  - 對應語系或樣式設定需求的字體
-------------------------------------------------- */
html[lang=zh_TW], html[lang=zh_TW] body, html[lang=zh_TW] div, html[lang=zh_TW] h1, html[lang=zh_TW] h2, html[lang=zh_TW] h3, html[lang=zh_TW] h4, html[lang=zh_TW] h5, html[lang=zh_TW] h6, html[lang=zh_TW] input, html[lang=zh_TW] li, html[lang=zh_TW] p, html[lang=zh_TW] select, html[lang=zh_TW] td, html form[lang=zh_TW], html form[lang=zh_TW] body, html form[lang=zh_TW] div, html form[lang=zh_TW] h1, html form[lang=zh_TW] h2, html form[lang=zh_TW] h3, html form[lang=zh_TW] h4, html form[lang=zh_TW] h5, html form[lang=zh_TW] h6, html form[lang=zh_TW] input, html form[lang=zh_TW] li, html form[lang=zh_TW] p, html form[lang=zh_TW] select, html form[lang=zh_TW] td, html[lang=zh-TW], html[lang=zh-TW] body, html[lang=zh-TW] div, html[lang=zh-TW] h1, html[lang=zh-TW] h2, html[lang=zh-TW] h3, html[lang=zh-TW] h4, html[lang=zh-TW] h5, html[lang=zh-TW] h6, html[lang=zh-TW] input, html[lang=zh-TW] li, html[lang=zh-TW] p, html[lang=zh-TW] select, html[lang=zh-TW] td, html form[lang=zh-TW], html form[lang=zh-TW] body, html form[lang=zh-TW] div, html form[lang=zh-TW] h1, html form[lang=zh-TW] h2, html form[lang=zh-TW] h3, html form[lang=zh-TW] h4, html form[lang=zh-TW] h5, html form[lang=zh-TW] h6, html form[lang=zh-TW] input, html form[lang=zh-TW] li, html form[lang=zh-TW] p, html form[lang=zh-TW] select, html form[lang=zh-TW] td, html[lang=zh-HK], html[lang=zh-HK] body, html[lang=zh-HK] div, html[lang=zh-HK] h1, html[lang=zh-HK] h2, html[lang=zh-HK] h3, html[lang=zh-HK] h4, html[lang=zh-HK] h5, html[lang=zh-HK] h6, html[lang=zh-HK] input, html[lang=zh-HK] li, html[lang=zh-HK] p, html[lang=zh-HK] select, html[lang=zh-HK] td, html form[lang=zh-HK], html form[lang=zh-HK] body, html form[lang=zh-HK] div, html form[lang=zh-HK] h1, html form[lang=zh-HK] h2, html form[lang=zh-HK] h3, html form[lang=zh-HK] h4, html form[lang=zh-HK] h5, html form[lang=zh-HK] h6, html form[lang=zh-HK] input, html form[lang=zh-HK] li, html form[lang=zh-HK] p, html form[lang=zh-HK] select, html form[lang=zh-HK] td, html[lang=zh-Hant], html[lang=zh-Hant] body, html[lang=zh-Hant] div, html[lang=zh-Hant] h1, html[lang=zh-Hant] h2, html[lang=zh-Hant] h3, html[lang=zh-Hant] h4, html[lang=zh-Hant] h5, html[lang=zh-Hant] h6, html[lang=zh-Hant] input, html[lang=zh-Hant] li, html[lang=zh-Hant] p, html[lang=zh-Hant] select, html[lang=zh-Hant] td, html form[lang=zh-Hant], html form[lang=zh-Hant] body, html form[lang=zh-Hant] div, html form[lang=zh-Hant] h1, html form[lang=zh-Hant] h2, html form[lang=zh-Hant] h3, html form[lang=zh-Hant] h4, html form[lang=zh-Hant] h5, html form[lang=zh-Hant] h6, html form[lang=zh-Hant] input, html form[lang=zh-Hant] li, html form[lang=zh-Hant] p, html form[lang=zh-Hant] select, html form[lang=zh-Hant] td, html[lang=zh-Hant-TW], html[lang=zh-Hant-TW] body, html[lang=zh-Hant-TW] div, html[lang=zh-Hant-TW] h1, html[lang=zh-Hant-TW] h2, html[lang=zh-Hant-TW] h3, html[lang=zh-Hant-TW] h4, html[lang=zh-Hant-TW] h5, html[lang=zh-Hant-TW] h6, html[lang=zh-Hant-TW] input, html[lang=zh-Hant-TW] li, html[lang=zh-Hant-TW] p, html[lang=zh-Hant-TW] select, html[lang=zh-Hant-TW] td, html form[lang=zh-Hant-TW], html form[lang=zh-Hant-TW] body, html form[lang=zh-Hant-TW] div, html form[lang=zh-Hant-TW] h1, html form[lang=zh-Hant-TW] h2, html form[lang=zh-Hant-TW] h3, html form[lang=zh-Hant-TW] h4, html form[lang=zh-Hant-TW] h5, html form[lang=zh-Hant-TW] h6, html form[lang=zh-Hant-TW] input, html form[lang=zh-Hant-TW] li, html form[lang=zh-Hant-TW] p, html form[lang=zh-Hant-TW] select, html form[lang=zh-Hant-TW] td, html[lang=zh-Hant-HK], html[lang=zh-Hant-HK] body, html[lang=zh-Hant-HK] div, html[lang=zh-Hant-HK] h1, html[lang=zh-Hant-HK] h2, html[lang=zh-Hant-HK] h3, html[lang=zh-Hant-HK] h4, html[lang=zh-Hant-HK] h5, html[lang=zh-Hant-HK] h6, html[lang=zh-Hant-HK] input, html[lang=zh-Hant-HK] li, html[lang=zh-Hant-HK] p, html[lang=zh-Hant-HK] select, html[lang=zh-Hant-HK] td, html form[lang=zh-Hant-HK], html form[lang=zh-Hant-HK] body, html form[lang=zh-Hant-HK] div, html form[lang=zh-Hant-HK] h1, html form[lang=zh-Hant-HK] h2, html form[lang=zh-Hant-HK] h3, html form[lang=zh-Hant-HK] h4, html form[lang=zh-Hant-HK] h5, html form[lang=zh-Hant-HK] h6, html form[lang=zh-Hant-HK] input, html form[lang=zh-Hant-HK] li, html form[lang=zh-Hant-HK] p, html form[lang=zh-Hant-HK] select, html form[lang=zh-Hant-HK] td, html[lang=zh-Hant-CN], html[lang=zh-Hant-CN] body, html[lang=zh-Hant-CN] div, html[lang=zh-Hant-CN] h1, html[lang=zh-Hant-CN] h2, html[lang=zh-Hant-CN] h3, html[lang=zh-Hant-CN] h4, html[lang=zh-Hant-CN] h5, html[lang=zh-Hant-CN] h6, html[lang=zh-Hant-CN] input, html[lang=zh-Hant-CN] li, html[lang=zh-Hant-CN] p, html[lang=zh-Hant-CN] select, html[lang=zh-Hant-CN] td, html form[lang=zh-Hant-CN], html form[lang=zh-Hant-CN] body, html form[lang=zh-Hant-CN] div, html form[lang=zh-Hant-CN] h1, html form[lang=zh-Hant-CN] h2, html form[lang=zh-Hant-CN] h3, html form[lang=zh-Hant-CN] h4, html form[lang=zh-Hant-CN] h5, html form[lang=zh-Hant-CN] h6, html form[lang=zh-Hant-CN] input, html form[lang=zh-Hant-CN] li, html form[lang=zh-Hant-CN] p, html form[lang=zh-Hant-CN] select, html form[lang=zh-Hant-CN] td, body.ff-global {
  --one-font-family: Roboto, "Open Sans", Arial, Verdana, Tahoma, Helvetica, "Noto Sans TC", "PingFang TC", "Lantinghei TC", 微軟正黑體, "Microsoft JhengHei", 文泉驛正黑, "WenQuanYi Zen Hei", sans-serif !important;
}

html[lang=zh], html[lang=zh] body, html[lang=zh] div, html[lang=zh] h1, html[lang=zh] h2, html[lang=zh] h3, html[lang=zh] h4, html[lang=zh] h5, html[lang=zh] h6, html[lang=zh] input, html[lang=zh] li, html[lang=zh] p, html[lang=zh] select, html[lang=zh] td, html form[lang=zh], html form[lang=zh] body, html form[lang=zh] div, html form[lang=zh] h1, html form[lang=zh] h2, html form[lang=zh] h3, html form[lang=zh] h4, html form[lang=zh] h5, html form[lang=zh] h6, html form[lang=zh] input, html form[lang=zh] li, html form[lang=zh] p, html form[lang=zh] select, html form[lang=zh] td, html[lang=zh_CN], html[lang=zh_CN] body, html[lang=zh_CN] div, html[lang=zh_CN] h1, html[lang=zh_CN] h2, html[lang=zh_CN] h3, html[lang=zh_CN] h4, html[lang=zh_CN] h5, html[lang=zh_CN] h6, html[lang=zh_CN] input, html[lang=zh_CN] li, html[lang=zh_CN] p, html[lang=zh_CN] select, html[lang=zh_CN] td, html form[lang=zh_CN], html form[lang=zh_CN] body, html form[lang=zh_CN] div, html form[lang=zh_CN] h1, html form[lang=zh_CN] h2, html form[lang=zh_CN] h3, html form[lang=zh_CN] h4, html form[lang=zh_CN] h5, html form[lang=zh_CN] h6, html form[lang=zh_CN] input, html form[lang=zh_CN] li, html form[lang=zh_CN] p, html form[lang=zh_CN] select, html form[lang=zh_CN] td, html[lang=zh-CN], html[lang=zh-CN] body, html[lang=zh-CN] div, html[lang=zh-CN] h1, html[lang=zh-CN] h2, html[lang=zh-CN] h3, html[lang=zh-CN] h4, html[lang=zh-CN] h5, html[lang=zh-CN] h6, html[lang=zh-CN] input, html[lang=zh-CN] li, html[lang=zh-CN] p, html[lang=zh-CN] select, html[lang=zh-CN] td, html form[lang=zh-CN], html form[lang=zh-CN] body, html form[lang=zh-CN] div, html form[lang=zh-CN] h1, html form[lang=zh-CN] h2, html form[lang=zh-CN] h3, html form[lang=zh-CN] h4, html form[lang=zh-CN] h5, html form[lang=zh-CN] h6, html form[lang=zh-CN] input, html form[lang=zh-CN] li, html form[lang=zh-CN] p, html form[lang=zh-CN] select, html form[lang=zh-CN] td, html[lang=zh-Hans], html[lang=zh-Hans] body, html[lang=zh-Hans] div, html[lang=zh-Hans] h1, html[lang=zh-Hans] h2, html[lang=zh-Hans] h3, html[lang=zh-Hans] h4, html[lang=zh-Hans] h5, html[lang=zh-Hans] h6, html[lang=zh-Hans] input, html[lang=zh-Hans] li, html[lang=zh-Hans] p, html[lang=zh-Hans] select, html[lang=zh-Hans] td, html form[lang=zh-Hans], html form[lang=zh-Hans] body, html form[lang=zh-Hans] div, html form[lang=zh-Hans] h1, html form[lang=zh-Hans] h2, html form[lang=zh-Hans] h3, html form[lang=zh-Hans] h4, html form[lang=zh-Hans] h5, html form[lang=zh-Hans] h6, html form[lang=zh-Hans] input, html form[lang=zh-Hans] li, html form[lang=zh-Hans] p, html form[lang=zh-Hans] select, html form[lang=zh-Hans] td, html[lang=zh-Hans-CN], html[lang=zh-Hans-CN] body, html[lang=zh-Hans-CN] div, html[lang=zh-Hans-CN] h1, html[lang=zh-Hans-CN] h2, html[lang=zh-Hans-CN] h3, html[lang=zh-Hans-CN] h4, html[lang=zh-Hans-CN] h5, html[lang=zh-Hans-CN] h6, html[lang=zh-Hans-CN] input, html[lang=zh-Hans-CN] li, html[lang=zh-Hans-CN] p, html[lang=zh-Hans-CN] select, html[lang=zh-Hans-CN] td, html form[lang=zh-Hans-CN], html form[lang=zh-Hans-CN] body, html form[lang=zh-Hans-CN] div, html form[lang=zh-Hans-CN] h1, html form[lang=zh-Hans-CN] h2, html form[lang=zh-Hans-CN] h3, html form[lang=zh-Hans-CN] h4, html form[lang=zh-Hans-CN] h5, html form[lang=zh-Hans-CN] h6, html form[lang=zh-Hans-CN] input, html form[lang=zh-Hans-CN] li, html form[lang=zh-Hans-CN] p, html form[lang=zh-Hans-CN] select, html form[lang=zh-Hans-CN] td, html[lang=zh-Hans-HK], html[lang=zh-Hans-HK] body, html[lang=zh-Hans-HK] div, html[lang=zh-Hans-HK] h1, html[lang=zh-Hans-HK] h2, html[lang=zh-Hans-HK] h3, html[lang=zh-Hans-HK] h4, html[lang=zh-Hans-HK] h5, html[lang=zh-Hans-HK] h6, html[lang=zh-Hans-HK] input, html[lang=zh-Hans-HK] li, html[lang=zh-Hans-HK] p, html[lang=zh-Hans-HK] select, html[lang=zh-Hans-HK] td, html form[lang=zh-Hans-HK], html form[lang=zh-Hans-HK] body, html form[lang=zh-Hans-HK] div, html form[lang=zh-Hans-HK] h1, html form[lang=zh-Hans-HK] h2, html form[lang=zh-Hans-HK] h3, html form[lang=zh-Hans-HK] h4, html form[lang=zh-Hans-HK] h5, html form[lang=zh-Hans-HK] h6, html form[lang=zh-Hans-HK] input, html form[lang=zh-Hans-HK] li, html form[lang=zh-Hans-HK] p, html form[lang=zh-Hans-HK] select, html form[lang=zh-Hans-HK] td, html[lang=zh-Hans-TW], html[lang=zh-Hans-TW] body, html[lang=zh-Hans-TW] div, html[lang=zh-Hans-TW] h1, html[lang=zh-Hans-TW] h2, html[lang=zh-Hans-TW] h3, html[lang=zh-Hans-TW] h4, html[lang=zh-Hans-TW] h5, html[lang=zh-Hans-TW] h6, html[lang=zh-Hans-TW] input, html[lang=zh-Hans-TW] li, html[lang=zh-Hans-TW] p, html[lang=zh-Hans-TW] select, html[lang=zh-Hans-TW] td, html form[lang=zh-Hans-TW], html form[lang=zh-Hans-TW] body, html form[lang=zh-Hans-TW] div, html form[lang=zh-Hans-TW] h1, html form[lang=zh-Hans-TW] h2, html form[lang=zh-Hans-TW] h3, html form[lang=zh-Hans-TW] h4, html form[lang=zh-Hans-TW] h5, html form[lang=zh-Hans-TW] h6, html form[lang=zh-Hans-TW] input, html form[lang=zh-Hans-TW] li, html form[lang=zh-Hans-TW] p, html form[lang=zh-Hans-TW] select, html form[lang=zh-Hans-TW] td, body.ff-cn {
  --one-font-family: Roboto, "Open Sans", Arial, Verdana, Tahoma, Helvetica, "Noto Sans SC", "PingFang SC", "Lantinghei SC", 微軟正黑體, "Microsoft JhengHei", 文泉驛正黑, "WenQuanYi Zen Hei", sans-serif;
}

html[lang=ja], html[lang=ja] body, html[lang=ja] div, html[lang=ja] button, html[lang=ja] h1, html[lang=ja] h2, html[lang=ja] h3, html[lang=ja] h4, html[lang=ja] h5, html[lang=ja] h6, html[lang=ja] input, html[lang=ja] li, html[lang=ja] p, html[lang=ja] select, html[lang=ja] td, html[lang=ja] .q-btn, html form[lang=ja], html form[lang=ja] body, html form[lang=ja] div, html form[lang=ja] button, html form[lang=ja] h1, html form[lang=ja] h2, html form[lang=ja] h3, html form[lang=ja] h4, html form[lang=ja] h5, html form[lang=ja] h6, html form[lang=ja] input, html form[lang=ja] li, html form[lang=ja] p, html form[lang=ja] select, html form[lang=ja] td, html form[lang=ja] .q-btn, html[lang=ja-JP], html[lang=ja-JP] body, html[lang=ja-JP] div, html[lang=ja-JP] button, html[lang=ja-JP] h1, html[lang=ja-JP] h2, html[lang=ja-JP] h3, html[lang=ja-JP] h4, html[lang=ja-JP] h5, html[lang=ja-JP] h6, html[lang=ja-JP] input, html[lang=ja-JP] li, html[lang=ja-JP] p, html[lang=ja-JP] select, html[lang=ja-JP] td, html[lang=ja-JP] .q-btn, html form[lang=ja-JP], html form[lang=ja-JP] body, html form[lang=ja-JP] div, html form[lang=ja-JP] button, html form[lang=ja-JP] h1, html form[lang=ja-JP] h2, html form[lang=ja-JP] h3, html form[lang=ja-JP] h4, html form[lang=ja-JP] h5, html form[lang=ja-JP] h6, html form[lang=ja-JP] input, html form[lang=ja-JP] li, html form[lang=ja-JP] p, html form[lang=ja-JP] select, html form[lang=ja-JP] td, html form[lang=ja-JP] .q-btn, body.ff-jp {
  --one-font-family: Roboto, "Open Sans", Arial, Verdana, Tahoma, Helvetica, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", 文泉驛正黑, "WenQuanYi Zen Hei", sans-serif;
}

/* Main
-------------------------------------------------- */
html {
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  font-family: var(--one-font-family);
  font-size: var(--one-base-font-size);
  color: var(--color-black);
  background-color: var(--color-white);
}

body {
  text-rendering: auto;
  height: 100%;
  margin: 0;
  padding: 0;
}

.app {
  position: relative;
  width: 100vw;
  height: auto;
  min-height: 100vh;
  color: var(--color-black);
  background-image: url("/q2/assets/background-rk-8biy_.png");
  background-size: 100% 100%;
  background-position: top left;
  background-attachment: fixed;
}

/* Root font size
  - DC 規範：對應不同瀏覽器寬度，指定不同字級
-------------------------------------------------- */
@media screen and (max-width: 1280px) {
  html {
    font-size: calc(var(--one-base-font-size) * 0.9375);
  }
}
@media screen and (min-width: 2560px) {
  html {
    font-size: calc(var(--one-base-font-size) * 1.25);
  }
}
@media screen and (min-width: 3740px) {
  html {
    font-size: calc(var(--one-base-font-size) * 1.375);
  }
}