@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@400;500;700&display=swap);
@import url(https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css);
@import url(https://cdn-uicons.flaticon.com/uicons-bold-rounded/css/uicons-bold-rounded.css);
@import url(https://cdn-uicons.flaticon.com/uicons-solid-straight/css/uicons-solid-straight.css);
/* $body-font-family: 'Noto Sans HK', sans-serif; */
/*! Copyright (c) 2021 Eric Chow (https://cmchow.com) */
/* ---Typography--- */
* {
  font-family: "Rubik", "Noto Sans HK", sans-serif;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
}

body,
input,
textarea {
  font-size: 1rem;
  font-weight: 400;
}

::-moz-selection {
  color: #fff;
  background: #4367cb;
}

::selection {
  color: #fff;
  background: #4367cb;
}

::-moz-selection {
  color: #fff;
  background: #4367cb;
}

::-webkit-input-placeholder {
  font-family: "Rubik", "Noto Sans HK", sans-serif;
}

:-moz-placeholder {
  font-family: "Rubik", "Noto Sans HK", sans-serif;
}

::-moz-placeholder {
  font-family: "Rubik", "Noto Sans HK", sans-serif;
}

:-ms-input-placeholder {
  font-family: "Rubik", "Noto Sans HK", sans-serif;
}

@font-face {
  font-family: "Rubik";
  src: url(../fonts/Rubik-BlackItalic.0fb5c16a.woff2) format("woff2"), url(../fonts/Rubik-BlackItalic.09b679aa.woff) format("woff");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+00-024F;
}
@font-face {
  font-family: "Rubik";
  src: url(../fonts/Rubik-Black.7dd619c9.woff2) format("woff2"), url(../fonts/Rubik-Black.e3cd8848.woff) format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+00-024F;
}
@font-face {
  font-family: "Rubik";
  src: url(../fonts/Rubik-Bold.93e8362d.woff2) format("woff2"), url(../fonts/Rubik-Bold.04476377.woff) format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
  unicode-range: U+00-024F;
}
@font-face {
  font-family: "Rubik";
  src: url(../fonts/Rubik-BoldItalic.ee244b88.woff2) format("woff2"), url(../fonts/Rubik-BoldItalic.5006fd08.woff) format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
  unicode-range: U+00-024F;
}
@font-face {
  font-family: "Rubik";
  src: url(../fonts/Rubik-ExtraBold.a540772b.woff2) format("woff2"), url(../fonts/Rubik-ExtraBold.832dbd61.woff) format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
  unicode-range: U+00-024F;
}
@font-face {
  font-family: "Rubik";
  src: url(../fonts/Rubik-LightItalic.f3860060.woff2) format("woff2"), url(../fonts/Rubik-LightItalic.7e55c988.woff) format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  unicode-range: U+00-024F;
}
@font-face {
  font-family: "Rubik";
  src: url(../fonts/Rubik-Italic.f1f0cefc.woff2) format("woff2"), url(../fonts/Rubik-Italic.2d80a84a.woff) format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
  unicode-range: U+00-024F;
}
@font-face {
  font-family: "Rubik";
  src: url(../fonts/Rubik-Light.d8afb97e.woff2) format("woff2"), url(../fonts/Rubik-Light.08ce7c57.woff) format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+00-024F;
}
@font-face {
  font-family: "Rubik";
  src: url(../fonts/Rubik-ExtraBoldItalic.d30ea8ff.woff2) format("woff2"), url(../fonts/Rubik-ExtraBoldItalic.292a3b98.woff) format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
  unicode-range: U+00-024F;
}
@font-face {
  font-family: "Rubik";
  src: url(../fonts/Rubik-Medium.df45a068.woff2) format("woff2"), url(../fonts/Rubik-Medium.8e923334.woff) format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+00-024F;
}
@font-face {
  font-family: "Rubik";
  src: url(../fonts/Rubik-Regular.eed30957.woff2) format("woff2"), url(../fonts/Rubik-Regular.8df7c91c.woff) format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
  unicode-range: U+00-024F;
}
@font-face {
  font-family: "Rubik";
  src: url(../fonts/Rubik-MediumItalic.b99ef752.woff2) format("woff2"), url(../fonts/Rubik-MediumItalic.80770168.woff) format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
  unicode-range: U+00-024F;
}
@font-face {
  font-family: "Rubik";
  src: url(../fonts/Rubik-SemiBold.1dcb1d5c.woff2) format("woff2"), url(../fonts/Rubik-SemiBold.fa71e696.woff) format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+00-024F;
}
@font-face {
  font-family: "Rubik";
  src: url(../fonts/Rubik-SemiBoldItalic.db281289.woff2) format("woff2"), url(../fonts/Rubik-SemiBoldItalic.1999bbe5.woff) format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+00-024F;
}
@font-face {
  font-family: "Rubik";
  src: url(../fonts/Rubik-LightItalic.f3860060.woff2) format("woff2"), url(../fonts/Rubik-LightItalic.7e55c988.woff) format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
  unicode-range: U+00-024F;
}
@font-face {
  font-family: "Rubik";
  src: url(../fonts/Rubik-Light.d8afb97e.woff2) format("woff2"), url(../fonts/Rubik-Light.08ce7c57.woff) format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+00-024F;
}
/* @font-face {
    font-family: 'Noto Sans HK';
    src: url('../assets/fonts/noto-sans-hk/NotoSansHK-Bold.otf') format('otf');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
} */
/* @font-face {
    font-family: 'Noto Sans HK';
    src: url('../assets/fonts/noto-sans-hk/NotoSansHK-Light.otf') format('otf');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
} */
/* @font-face {
    font-family: 'Noto Sans HK';
    src: url('../assets/fonts/noto-sans-hk/NotoSansHK-Black.otf') format('otf');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans HK';
    src: url('../assets/fonts/noto-sans-hk/NotoSansHK-Medium.otf') format('otf');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans HK';
    src: url('../assets/fonts/noto-sans-hk/NotoSansHK-Regular.otf') format('otf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
} */
/* @font-face {
    font-family: 'Noto Sans HK';
    src: url('../assets/fonts/noto-sans-hk/NotoSansHK-Thin.otf') format('otf');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
} */
/* $body-font-family: 'Noto Sans HK', sans-serif; */
.v-navigation-drawer {
  background-color: #ffffff !important;
}

.theme--dark.v-navigation-drawer {
  background-color: #33333f !important;
}

.nav-drawer {
  width: 100%;
  overflow: hidden;
}
.nav-drawer .nav-drawer-main {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.nav-drawer .nav-drawer-main .nav-drawer-collapse-container {
  display: flex;
  padding: 0 !important;
  width: 100%;
}
.nav-drawer .nav-drawer-main .nav-drawer-collapse-container::after {
  content: none;
}
.nav-drawer .nav-drawer-main .nav-drawer-collapse-container .drawer-icon:hover {
  cursor: pointer;
}
.nav-drawer .nav-drawer-main .nav-drawer-collapse-container .drawer-icon > img {
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
.nav-drawer .nav-drawer-main .nav-drawer-collapse-container .drawer-collapse-icon {
  height: 18px !important;
  font-size: 18px !important;
  width: 18px !important;
}
.nav-drawer .drawer-list-item:hover {
  background-color: #eeeeee !important;
}
.nav-drawer .drawer-list-item .v-list-item__icon {
  margin-right: 16px !important;
}
.nav-drawer .drawer-list-item .v-list-item__icon .v-icon {
  font-size: 20px;
  width: 20px;
  color: var(--v-colorBlack-base);
}
.nav-drawer .drawer-list-item .v-list-item__icon .v-icon.fi-rr-piggy-bank {
  filter: invert(16%) sepia(0%) saturate(1540%) hue-rotate(172deg) brightness(99%) contrast(78%);
}
.nav-drawer .drawer-list-item .v-list-item__title {
  /* 15px */
  font-size: 0.938rem !important;
  color: var(--v-colorBlack-base);
  line-height: inherit !important;
  font-weight: 600 !important;
}
.nav-drawer .drawer-list-item-active {
  background-color: var(--v-primary-base) !important;
}
.nav-drawer .drawer-list-item-active .v-list-item__icon {
  color: white !important;
}
.nav-drawer .drawer-list-item-active .v-list-item__icon .v-icon {
  color: inherit !important;
}
.nav-drawer .drawer-list-item-active .v-list-item__icon .v-icon.fi-rr-piggy-bank {
  filter: invert(1%) sepia(2%) saturate(436%) hue-rotate(119deg) brightness(113%) contrast(100%);
}
.nav-drawer .drawer-list-item-active .v-list-item__title {
  color: white;
}
.nav-drawer .drawer-list-item-active:hover {
  background-color: var(--v-primary-base) !important;
}
.nav-drawer .drawer-list-item-active::before {
  opacity: 0 !important;
}
.nav-drawer .drawer-dropdown-group:hover {
  border-radius: 4px;
  background-color: #eeeeee !important;
}
.nav-drawer .drawer-dropdown-group.v-list-group--active.primary--text:hover {
  background-color: white !important;
}
.nav-drawer .drawer-dropdown-group .v-list-group__items {
  margin-left: 17px;
  border-left: 2px solid #9e9e9e;
}
.nav-drawer .drawer-dropdown-group .v-list-group__items .drawer-dropdown-item {
  margin-left: 15px;
  padding-left: 13px !important;
}
.nav-drawer .drawer-dropdown-group .v-list-group__items .drawer-dropdown-item .v-list-item__title {
  color: #9e9e9e;
  /* 15px */
  font-size: 0.938rem !important;
  line-height: inherit !important;
}
.nav-drawer .drawer-dropdown-group .v-list-group__items .drawer-dropdown-item.v-list-item--active {
  background-color: var(--v-primary-base) !important;
}
.nav-drawer .drawer-dropdown-group .v-list-group__items .drawer-dropdown-item.v-list-item--active .v-list-item__title {
  color: white !important;
}
.nav-drawer .drawer-dropdown-group .v-list-group__items .drawer-dropdown-item.v-list-item--active:hover {
  background-color: var(--v-primary-base) !important;
}
.nav-drawer .drawer-dropdown-group [role=button] .v-icon {
  color: var(--v-colorBlack-base) !important;
  font-size: 20px;
}
.nav-drawer .drawer-dropdown-group [role=button] .v-icon.fi-rr-piggy-bank {
  filter: invert(16%) sepia(0%) saturate(1540%) hue-rotate(172deg) brightness(99%) contrast(78%);
}
.nav-drawer .drawer-dropdown-group [role=button]:hover {
  background-color: #eeeeee !important;
}
.nav-drawer .drawer-dropdown-group [role=button] .v-list-group__header__prepend-icon {
  margin: 8px 0;
  margin-right: 16px !important;
}
.nav-drawer .drawer-dropdown-group [role=button] .v-list-group__header__append-icon .v-icon {
  color: var(--v-colorBlack-base) !important;
  font-size: 20px;
}
.nav-drawer .drawer-dropdown-group [role=button] .v-list-group__header__append-icon .v-icon.fi-rr-piggy-bank {
  filter: invert(16%) sepia(0%) saturate(1540%) hue-rotate(172deg) brightness(99%) contrast(78%);
}
.nav-drawer .drawer-dropdown-group [role=button] .v-list-item__title {
  line-height: inherit;
  /* 15px */
  font-size: 0.938rem !important;
  color: var(--v-colorBlack-base);
  font-weight: 600 !important;
}
.nav-drawer .drawer-dropdown-group-active:hover {
  color: #eeeeee !important;
  caret-color: #eeeeee !important;
}
.nav-drawer .drawer-dropdown-group-active .v-list-group__header__prepend-icon {
  color: var(--v-colorBlack-base);
}
.nav-drawer .drawer-dropdown-group-active .v-list-item__title {
  color: var(--v-colorBlack-base);
}

.mini-drawer-expand-icon {
  background-color: #eeeeee;
}

.mini-drawer-menu {
  box-shadow: 0px 0px 5px 5px #ecebeb !important;
}
.mini-drawer-menu .mini-drawer-list .v-list-item__content .v-list-item__title {
  /* 15px */
  font-size: 0.938rem !important;
  line-height: inherit !important;
  font-weight: 500;
}
.mini-drawer-menu .mini-drawer-list .drawer-dropdown-item:not(.drawer-dropdown-item-active) .v-list-item__content .v-list-item__title {
  color: #b6b6c9 !important;
}

.mini-drawer-button .v-list-item__icon,
.mini-drawer-menu-button .v-list-item__icon,
.mini-drawer-expand-icon .v-list-item__icon {
  min-width: auto;
}
.mini-drawer-button .v-list-item__icon .v-icon,
.mini-drawer-menu-button .v-list-item__icon .v-icon,
.mini-drawer-expand-icon .v-list-item__icon .v-icon {
  font-size: 20px;
  width: 20px;
  color: var(--v-colorBlack-base);
}
.mini-drawer-button .v-list-item__icon .v-icon.fi-rr-piggy-bank,
.mini-drawer-menu-button .v-list-item__icon .v-icon.fi-rr-piggy-bank,
.mini-drawer-expand-icon .v-list-item__icon .v-icon.fi-rr-piggy-bank {
  /* filter: $colorBlackFilter; */
}

.mini-drawer-button:hover,
.mini-drawer-menu-button:hover {
  background-color: #eeeeee;
}

.mini-drawer-button-active {
  background-color: var(--v-primary-base);
  color: white !important;
}
.mini-drawer-button-active .v-list-item__icon .v-icon {
  color: white !important;
}
.mini-drawer-button-active:hover {
  background-color: var(--v-primary-base);
}

.mini-drawer-menu-button-link-active {
  background-color: var(--v-primary-base) !important;
  opacity: 1;
}
.mini-drawer-menu-button-link-active .v-list-item__icon .v-icon {
  color: white !important;
}
.mini-drawer-menu-button-link-active .v-list-item__icon .v-icon.fi-rr-piggy-bank {
  filter: invert(1%) sepia(2%) saturate(436%) hue-rotate(119deg) brightness(113%) contrast(100%);
}
.mini-drawer-menu-button-link-active:hover {
  background-color: var(--v-primary-base) !important;
}

.mini-drawer-menu-button-active:not(.mini-drawer-menu-button-link-active)::before {
  background-color: white !important;
  opacity: 1;
}
.mini-drawer-menu-button-active:not(.mini-drawer-menu-button-link-active) .v-list-item__icon .v-icon {
  color: var(--v-colorBlack-base) !important;
}
.mini-drawer-menu-button-active:not(.mini-drawer-menu-button-link-active) .v-list-item__icon .v-icon.fi-rr-piggy-bank {
  filter: invert(16%) sepia(0%) saturate(1540%) hue-rotate(172deg) brightness(99%) contrast(78%);
}
.mini-drawer-menu-button-active:not(.mini-drawer-menu-button-link-active):hover {
  background-color: #eeeeee !important;
}

.drawer-dropdown-item-active {
  background-color: var(--v-primary-base);
}
.drawer-dropdown-item-active .v-list-item__title {
  color: white !important;
}

.mobile-nav-action-panel {
  background-color: #eeeeee;
  border-radius: 5px;
  margin-bottom: 20px;
}
.mobile-nav-action-panel .mobile-nav-icon {
  height: 35px !important;
  min-width: 35px !important;
  width: 35px !important;
}
.mobile-nav-action-panel .mobile-nav-icon .icon .v-image__image {
  background-size: contain !important;
}
.mobile-nav-action-panel .mobile-nav-username {
  /* 15px */
  font-size: 0.938rem !important;
  line-height: inherit !important;
  font-weight: 500;
}
.mobile-nav-action-panel .mobile-nav-button {
  padding-left: 20px !important;
}
.mobile-nav-action-panel .mobile-nav-button .v-list-item__icon {
  margin-top: 13px;
  margin-bottom: 13px;
  margin-right: 20px !important;
}
.mobile-nav-action-panel .mobile-nav-button .v-list-item__icon .v-icon {
  width: 18px;
  color: var(--v-colorBlack-base);
  font-size: 18px;
}
.mobile-nav-action-panel .mobile-nav-button .v-list-item__icon .v-icon.fi-rr-piggy-bank {
  filter: invert(16%) sepia(0%) saturate(1540%) hue-rotate(172deg) brightness(99%) contrast(78%);
}
.mobile-nav-action-panel .mobile-nav-button .v-list-item__title {
  /*  margin-left: 20px !important; */
  /* 16px */
  font-size: 1rem !important;
  line-height: inherit !important;
  font-weight: 500;
}

.mobile-nav-action-panel-active {
  color: var(--v-colorBlack-base) !important;
  caret-color: var(--v-colorBlack-base) !important;
}

.mobile-nav-button-active {
  background-color: var(--v-primary-base);
  color: white !important;
}
.mobile-nav-button-active::before {
  opacity: 0 !important;
}

@media only screen and (max-width: 1263.98px) {
  .nav-drawer .drawer-list-item .v-list-item__icon {
    margin-right: 30px !important;
    margin-top: 13px !important;
    margin-bottom: 13px !important;
  }
  .nav-drawer .drawer-list-item .v-list-item__icon .v-icon {
    /* 20px */
    font-size: 1.25rem;
  }
  .nav-drawer .drawer-list-item .v-list-item__content {
    padding: 13px 0 !important;
  }
  .nav-drawer .drawer-list-item .v-list-item__title {
    /* 16px */
    font-size: 1rem !important;
  }
  .nav-drawer .drawer-dropdown-group .v-list-group__items {
    margin-left: 20px;
  }
  .nav-drawer .drawer-dropdown-group .v-list-group__items .drawer-dropdown-item {
    margin-left: 25px;
  }
  .nav-drawer .drawer-dropdown-group .v-list-group__items .drawer-dropdown-item .v-list-item__title {
    /* 16px */
    font-size: 1rem !important;
  }
  .nav-drawer .drawer-dropdown-group [role=button] .v-icon {
    /* 20px */
    font-size: 1.25rem;
  }
  .nav-drawer .drawer-dropdown-group [role=button] .v-list-group__header__prepend-icon {
    margin: 13px 0;
    margin-right: 30px !important;
  }
  .nav-drawer .drawer-dropdown-group [role=button] .v-list-group__header__append-icon .v-icon {
    font-size: 24px;
  }
  .nav-drawer .drawer-dropdown-group [role=button] .v-list-item__title {
    /* 16px */
    font-size: 1rem !important;
  }
}
.page-title,
.input-label,
.custom-table-title,
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--v-colorBlack-base);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
}

html {
  overflow-y: auto !important;
  scrollbar-width: thin;
  scrollbar-color: #fafafa #e0e0e0;
}

body,
input,
textarea {
  font-size: 0.875rem;
}

::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0.5rem rgba(0, 0, 0, 0.1);
  background-color: #fafafa;
}

::-webkit-scrollbar-thumb {
  border-radius: 0.5rem;
  background-color: #e0e0e0;
  box-shadow: inset 0 0 0.5rem rgba(0, 0, 0, 0.1);
}

.v-btn {
  text-transform: capitalize !important;
  white-space: pre-line !important;
}
.v-btn > .v-btn__content {
  text-align: center;
}
.v-btn.unflex > .v-btn__content {
  flex: unset !important;
}

.pointer-none {
  pointer-events: none !important;
}

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

.checkbox-disabled {
  pointer-events: none !important;
  opacity: 0.5 !important;
}

.checkbox-readonly {
  pointer-events: none !important;
  opacity: 0.1 !important;
}

.checkbox-hidden {
  pointer-events: none !important;
  opacity: 0 !important;
}

.container.container--fluid {
  padding-left: 0;
  padding-right: 0;
}

.v-application {
  background-color: var(--v-colorWhite-base) !important;
}

.v-tooltip__content {
  font-weight: bold !important;
}

.v-dialog,
.v-card:not(.elevation-0) {
  box-shadow: 0px 0px 5px -5px rgba(0, 0, 0, 0.2) !important;
  border-radius: 5px !important;
}

.elevation-custom {
  box-shadow: 0px 1px 12px -1px rgba(0, 0, 0, 0.12) !important;
}

.v-toolbar__items > .v-btn {
  border-radius: 5px !important;
}

.toolbar-title {
  /* 14px */
  font-size: 0.875rem !important;
  font-weight: 500;
  overflow: initial !important;
  text-overflow: initial !important;
  white-space: normal !important;
}

.user-menu-open-button.v-btn {
  text-transform: none;
}
.user-menu-open-button.v-btn > .v-btn__content {
  font-size: 0.9375rem;
  font-weight: 500;
}

.user-menu-item .v-list-item__title {
  /* 15px */
  font-weight: bold !important;
  font-size: 0.938rem !important;
}
.user-menu-item .v-list-item__icon {
  margin-right: 12px !important;
}
.user-menu-item .v-list-item__icon .v-icon {
  font-size: 18px !important;
}

.user-menu-item:not(.logout-btn, .lang-btn) .v-list-item__title {
  color: #9e9e9e;
}

.user-menu-item-active {
  background-color: var(--v-primary-base);
}
.user-menu-item-active .v-list-item__title {
  color: white !important;
}
.user-menu-item-active::before {
  opacity: 0 !important;
}

.dropdown-menu-btn {
  border: 2px solid #DEDEDE;
  border-radius: 5px;
  min-width: 20px !important;
  max-height: 20px !important;
}

input[type=password] {
  letter-spacing: 0.3rem;
}

/* change the font size of v-select and v-text-field */
.v-text-field > .v-input__control > .v-input__slot > .v-text-field__slot,
.v-select__selection,
.v-text-field.v-text-field--solo .v-input__control input {
  /* 14px */
  font-size: 0.875rem;
}

.theme--light.v-text-field--solo.v-text-field--filled > .v-input__control > .v-input__slot {
  background: #eeeeee !important;
}
.theme--light.v-text-field--solo > .v-input__control > .v-input__slot {
  border: 1px solid #c7c7c7;
  background: white;
}
.theme--light.v-text-field--solo > .v-input__control > .v-input__slot .v-input__append-inner .v-input__icon--append i {
  font-size: 14px !important;
}
.theme--light.v-text-field--solo.error--text > .v-input__control > .v-input__slot {
  border: 1px solid var(--v-error-base) !important;
}
.theme--light.v-text-field--solo.error--text [role=alert] .v-messages__message {
  color: var(--v-error-base);
}

.v-btn--outlined.v-btn--text.error--text {
  border-color: var(--v-error-base) !important;
}

.timepicker-select.v-text-field--solo.v-text-field--filled > .v-input__control > .v-input__slot {
  background: #eeeeee !important;
}
.timepicker-select.v-text-field--solo [role=button] .v-select__selections {
  position: relative;
  flex-direction: column;
}
.timepicker-select.v-text-field--solo [role=button] .v-select__selections > .v-select__selection {
  position: absolute;
}
.timepicker-select.v-text-field--solo > .v-input__control > .v-input__slot {
  border: none;
  background: white;
}

.timepicker-menu {
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.15), 0px 8px 10px 1px rgba(0, 0, 0, 0.05), 0px 3px 14px 2px rgba(0, 0, 0, 0.02) !important;
}

.v-text-field.v-input--dense:not(.v-text-field--outlined) input {
  padding: 0 !important;
}

.input-label {
  font-size: 0.875rem !important;
  font-weight: 500;
  margin-bottom: 5px;
  display: block;
}

.v-radio > .v-label {
  font-size: 0.875rem !important;
  color: var(--v-colorBlack-base) !important;
  font-weight: 500;
}

.v-input.v-input--is-disabled .v-input__slot {
  background: #EEEEEE !important;
}
.v-input.v-input--is-disabled .v-input__slot fieldset {
  border-color: #EEEEEE !important;
}

.v-text-field--single-line .v-select__slot > .v-select__selections {
  height: 100%;
}
.v-text-field--single-line .v-select__slot > .v-input__append-inner {
  margin-top: 12px !important;
}

.v-input__append-outer {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

button {
  font-weight: normal !important;
}

.v-btn .v-btn__content {
  font-size: inherit !important;
}

.v-btn:not(.v-btn--rounded, .v-btn--icon, .custom-outlined, .v-btn--block, .chat-date-filter-btn).v-size--default {
  min-width: 97px;
}

.narrow-btn.v-btn:not(.v-btn--rounded, .v-btn--icon, .custom-outlined).v-size--default {
  min-width: auto !important;
}

.v-btn--active:hover::before,
.v-btn--active::before {
  opacity: 0 !important;
}

.outline-btn {
  background: #ffffff !important;
  border: 1px solid var(--v-colorBlack-base) !important;
  color: var(--v-colorBlack-base) !important;
}

.upload-btn {
  background: transparent !important;
  border: 1px dashed var(--v-primary-base) !important;
  color: var(--v-primary-base) !important;
  width: 100%;
  font-size: 0.75rem;
}

.v-tabs > .v-tabs-bar {
  border-bottom: 1px solid #E2E2E2;
}

.v-tab {
  border-radius: 5px 5px 0 0;
}

.tab-active {
  background: var(--v-accent-base);
}

.v-tabs-items {
  background: transparent !important;
}

.alert-pop {
  position: fixed;
  top: 6%;
  right: 4%;
  width: 250px !important;
  z-index: 99999;
  pointer-events: none;
}

.v-chip {
  font-size: 12px !important;
  font-weight: 500;
  background: var(--v-primary-base) !important;
  color: var(--v-colorWhite-base) !important;
}
.v-chip.chip-active {
  color: var(--v-secondary-base) !important;
  background: var(--v-accent-base) !important;
}
.v-chip.chip-error {
  color: var(--v-colorWhite-base) !important;
  background: var(--v-error-base) !important;
}
.v-chip.chip-inactive {
  color: var(--v-secondary-base) !important;
  background: #C9C9C9 !important;
}

.login {
  display: flex;
  min-height: calc(var(--vh, 1vh) * 100);
  flex-basis: 100%;
  align-items: center;
}
.login > .center-card {
  width: 90%;
  max-width: 420px;
}
.login > .center-card > h1 {
  text-align: center !important;
  display: block;
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 15px;
}

.center-card {
  border: 1px solid #d7d8da;
  margin: 0 auto;
  padding: 0.9375rem 0.875rem;
  border-radius: 0 !important;
}

.custom-pagination .v-pagination__item, .custom-pagination .v-pagination__navigation {
  box-shadow: none !important;
  border: 1px solid #acacac;
}

.custom-table .v-data-table-header:not(.v-data-table-header-mobile) {
  background-color: var(--v-secondary-base) !important;
}
.custom-table .v-data-table-header:not(.v-data-table-header-mobile) [role=columnheader] {
  color: white !important;
}
.custom-table .v-data-table-header:not(.v-data-table-header-mobile) [role=columnheader].sortable.active {
  opacity: 1 !important;
}
.custom-table .v-data-table-header:not(.v-data-table-header-mobile) [role=columnheader] .v-data-table-header__icon {
  color: white !important;
}

.custom-table-title {
  font-size: 0.875rem;
  padding-top: 10px;
  padding-bottom: 5px;
  font-weight: 500;
  margin-top: 8px;
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}

.search-input-field.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state) > .v-input__control > .v-input__slot fieldset,
.search-select-field.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state) > .v-input__control > .v-input__slot fieldset {
  color: #d9d9d9 !important;
}
.search-input-field.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state) > .v-input__control > .v-input__slot .v-text-field__slot .v-label,
.search-select-field.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state) > .v-input__control > .v-input__slot .v-text-field__slot .v-label {
  color: var(--v-colorLightGrey-base) !important;
  /* 14px */
  font-size: 0.875rem;
}
.search-input-field.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state) > .v-input__control > .v-input__slot .v-input__append-inner .v-icon__svg,
.search-select-field.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state) > .v-input__control > .v-input__slot .v-input__append-inner .v-icon__svg {
  fill: var(--v-colorLightGrey-base) !important;
}
.search-input-field.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state) > .v-input__control > .v-input__slot .v-input__append-inner .v-icon,
.search-select-field.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state) > .v-input__control > .v-input__slot .v-input__append-inner .v-icon {
  /* 18px */
  font-size: 1.125rem !important;
}
.search-input-field.v-text-field--outlined .v-select__slot .v-select__selections,
.search-select-field.v-text-field--outlined .v-select__slot .v-select__selections {
  /* 14px */
  font-size: 0.875rem;
}
.search-input-field .v-input__append-inner > button:hover,
.search-select-field .v-input__append-inner > button:hover {
  color: var(--v-primary-base);
}

.table-sort-menu {
  border-radius: 5px;
}
.table-sort-menu .table-sort-item {
  font-weight: 500;
  margin: 2px 9px;
  padding: 0 17px;
  border-radius: 5px;
}
.table-sort-menu .table-sort-item:hover {
  background-color: #eee;
}
.table-sort-menu .table-sort-item .v-list-item__title {
  /* 14px */
  font-size: 0.875rem;
  color: #9e9e9e;
}
.table-sort-menu .table-sort-active {
  background-color: var(--v-primary-base);
}
.table-sort-menu .table-sort-active .v-list-item__title {
  color: white;
}
.table-sort-menu .table-sort-active:hover {
  background-color: var(--v-primary-base);
}
.table-sort-menu .table-sort-active::before {
  opacity: 0 !important;
}

.basic-setting-progress.v-progress-linear--rounded {
  border-radius: 5px !important;
}
.basic-setting-progress.v-progress-linear--rounded .v-progress-linear__determinate {
  border-radius: 5px;
}

.custom-table-toolbar .toolbar-left-items {
  max-width: 60%;
  flex-wrap: wrap;
}
.custom-table-toolbar .toolbar-left-items > .v-input.search-select-field {
  max-width: 250px;
}
.custom-table-toolbar .toolbar-left-items > .v-input:not(.search-select-field), .custom-table-toolbar .toolbar-left-items > .custom-input {
  max-width: 320px;
}
.custom-table-toolbar .toolbar-left-items > .custom-input {
  display: flex;
  flex-direction: column;
  height: auto;
  flex-grow: 1;
  flex-wrap: wrap;
  min-width: 0;
}
.custom-table-toolbar .toolbar-right-items {
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.custom-table-toolbar .toolbar-right-items > .v-btn {
  margin: 10px 0;
}

.gender-dot {
  width: 6px;
  min-width: 6px;
  height: 6px;
  border-radius: 100%;
  background: #A7A7A7;
  margin-right: 8px;
}
.gender-dot.gender-m {
  background: #126CC7;
}
.gender-dot.gender-f {
  background: #FA4F91;
}

.calendar-header .v-toolbar__content {
  background-color: var(--v-secondary-base);
}

.belt-color {
  width: 10px;
  min-width: 20px;
  height: 20px;
  position: relative;
}
.belt-color::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-width: 2px;
  border-style: solid;
}
.belt-color.white {
  background-color: #ffffff;
}
.belt-color.white::before {
  border-color: #000000;
}
.belt-color.yellow {
  background-color: #FFFF00;
}
.belt-color.yellow::before {
  border-color: #FFFF00;
}
.belt-color.orange {
  background-color: #FF9402;
}
.belt-color.orange::before {
  border-color: #FF9402;
}
.belt-color.green {
  background-color: #01D011;
}
.belt-color.green::before {
  border-color: #01D011;
}
.belt-color.blue {
  background-color: #0159D0;
}
.belt-color.blue::before {
  border-color: #0159D0;
}
.belt-color.purple {
  background-color: #8001D0;
}
.belt-color.purple::before {
  border-color: #8001D0;
}
.belt-color.brown {
  background-color: #B73F1B;
}
.belt-color.brown::before {
  border-color: #B73F1B;
}
.belt-color.red, .belt-color.red_1 {
  background-color: #EF2525;
}
.belt-color.red::before, .belt-color.red_1::before {
  border-color: #EF2525;
}
.belt-color.red_black {
  background-color: #EF2525;
}
.belt-color.red_black::before {
  border-color: #EF2525;
  background-color: #EF2525;
  height: 50%;
}
.belt-color.red_black::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border: 2px solid #000000;
  background-color: #000000;
  height: 50%;
}
.belt-color.black {
  background-color: #000000;
}
.belt-color.black::before {
  border-color: #000000;
}

@media screen and (max-width: 799.9px) {
  .custom-table-toolbar .v-toolbar__content,
.custom-timetable .v-toolbar__content {
    flex-direction: column;
  }
  .custom-table-toolbar.no-wrap .v-toolbar__content,
.custom-timetable.no-wrap .v-toolbar__content {
    flex-direction: row !important;
  }

  .custom-table-toolbar:not(.no-wrap) .toolbar-left-items {
    width: 100%;
    max-width: initial !important;
  }
  .custom-table-toolbar:not(.no-wrap) .toolbar-left-items > .v-input, .custom-table-toolbar:not(.no-wrap) .toolbar-left-items > .custom-input {
    max-width: initial !important;
  }
  .custom-table-toolbar:not(.no-wrap) .toolbar-right-items {
    width: 100%;
    justify-content: center;
  }
}
@media screen and (min-width: 800px) and (max-width: 960px) {
  .custom-table-toolbar .toolbar-left-items {
    width: 50%;
    max-width: initial !important;
    justify-content: flex-start;
  }
  .custom-table-toolbar .toolbar-left-items > .v-input, .custom-table-toolbar .toolbar-left-items > .custom-input {
    max-width: initial !important;
    width: 100%;
  }
}
@media screen and (max-width: 459.9px) {
  .v-data-footer {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr);
    justify-content: space-between;
  }
  .v-data-footer > .v-data-footer__select {
    justify-content: flex-start;
    grid-column: 1/span 3;
  }
  .v-data-footer > .v-data-footer__pagination {
    margin: 0 5px 0 24px !important;
    grid-column: 5/span 3;
  }
  .v-data-footer > .v-data-footer__icons-before {
    grid-column: 3/span 1;
  }
  .v-data-footer > span {
    grid-column: 4/span 1;
    text-align: center;
  }
  .v-data-footer > .v-data-footer__icons-after {
    grid-column: 5/span 1;
  }
}

.copyright[data-v-f79970f8] {
  font-size: .8rem;
}

/* $body-font-family: 'Noto Sans HK', sans-serif; */
[data-v-cdf58fd2] .custom-dialog .custom-dialog-toolbar {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: none !important;
}
[data-v-cdf58fd2] .custom-dialog .custom-dialog-toolbar > .v-toolbar__content {
  padding: 0;
}
/* $body-font-family: 'Noto Sans HK', sans-serif; */
.boxed-container[data-v-46d46bae] {
  max-width: 1450px;
  margin-left: auto;
  margin-right: auto;
}
.fullW-container[data-v-46d46bae] {
  max-width: calc(100% - 60px);
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (max-width: 1263.98px) {
.fullW-container[data-v-46d46bae] {
    max-width: calc(100% - 20px);
}
}
/* $body-font-family: 'Noto Sans HK', sans-serif; */
.bg-gradient-primary {
  background: var(--v-primary-base);
}

.v-application.theme--light .bg-card {
  background-color: #fff;
}

.v-application.theme--dark .bg-card {
  background-color: #312d4b;
}

.v-application.theme--light .bg-body {
  background-color: #f4f5fa;
}

.v-application.theme--dark .bg-body {
  background-color: #28243d;
}

.row.match-height .v-card {
  height: 100%;
}

.multi-col-validation.v-form .v-text-field__details {
  margin-bottom: 0 !important;
  min-height: unset;
}
.multi-col-validation.v-form .v-text-field__details .v-messages:not([role=alert]) {
  min-height: unset;
}
.multi-col-validation.v-form .v-text-field__details .v-messages:not([role=alert]) .v-messages__wrapper {
  min-height: unset;
}

.text-xs {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
}

.text-sm {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

.text-base {
  font-size: 1rem !important;
  line-height: 1.5rem !important;
}

.text-lg {
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
}

.text-xl {
  font-size: 1.25rem !important;
  line-height: 1.75rem !important;
}

.text-2xl {
  font-size: 1.5rem !important;
  line-height: 2rem !important;
}

.text-3xl {
  font-size: 1.875rem !important;
  line-height: 2.25rem !important;
}

.text-4xl {
  font-size: 2.25rem !important;
  line-height: 2.5rem !important;
}

.text-5xl {
  font-size: 3rem !important;
  line-height: 1 !important;
}

.font-weight-semibold {
  font-weight: 600 !important;
}

.cursor-pointer {
  cursor: pointer;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.table-rounded.v-data-table thead tr th {
  border-top: 0;
}
.table-rounded.v-data-table thead tr th:first-child {
  border-top-left-radius: 6px;
}
.table-rounded.v-data-table thead tr th:last-child {
  border-top-right-radius: 6px;
}

.theme--light.v-application {
  color: rgba(94, 86, 105, 0.87) !important;
}

.theme--dark.v-application {
  color: rgba(231, 227, 252, 0.87) !important;
}

.theme--light.v-card {
  color: rgba(94, 86, 105, 0.87) !important;
}

.theme--dark.v-card {
  color: rgba(231, 227, 252, 0.87) !important;
}

.theme--light.v-sheet {
  color: rgba(94, 86, 105, 0.87) !important;
}
.theme--light.v-sheet .v-card__title {
  color: rgba(94, 86, 105, 0.87) !important;
}

.theme--dark.v-sheet {
  color: rgba(231, 227, 252, 0.87) !important;
}
.theme--dark.v-sheet .v-card__title {
  color: rgba(231, 227, 252, 0.87) !important;
}

button:focus {
  outline: none;
}

.v-application.theme--light .elevation-1 {
  box-shadow: 0 1px 3px 0 rgba(94, 86, 105, 0.2), 0 2px 1px -1px rgba(94, 86, 105, 0.12), 0 1px 1px 0 rgba(94, 86, 105, 0.14) !important;
}

.v-application.theme--dark .elevation-1 {
  box-shadow: 0 1px 3px 0 rgba(19, 17, 32, 0.2), 0 2px 1px -1px rgba(19, 17, 32, 0.12), 0 1px 1px 0 rgba(19, 17, 32, 0.14) !important;
}

.v-application.theme--light .elevation-2 {
  box-shadow: 0 1px 3px 0 rgba(94, 86, 105, 0.2), 0 3px 1px -2px rgba(94, 86, 105, 0.12), 0 2px 2px 0 rgba(94, 86, 105, 0.14) !important;
}

.v-application.theme--dark .elevation-2 {
  box-shadow: 0 1px 3px 0 rgba(19, 17, 32, 0.2), 0 3px 1px -2px rgba(19, 17, 32, 0.12), 0 2px 2px 0 rgba(19, 17, 32, 0.14) !important;
}

.v-application.theme--light .elevation-3 {
  box-shadow: 0 4px 8px -4px rgba(94, 86, 105, 0.42) !important;
}

.v-application.theme--dark .elevation-3 {
  box-shadow: 0 4px 8px -4px rgba(19, 17, 32, 0.42) !important;
}

.v-application.theme--light .elevation-4 {
  box-shadow: 0 6px 18px -8px rgba(94, 86, 105, 0.56) !important;
}

.v-application.theme--dark .elevation-4 {
  box-shadow: 0 6px 18px -8px rgba(19, 17, 32, 0.56) !important;
}

.v-application.theme--light .elevation-6 {
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12) !important;
}

.v-application.theme--dark .elevation-6 {
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12) !important;
}

.v-application.theme--light .elevation-8 {
  box-shadow: 0 4px 14px 0 rgba(94, 86, 105, 0.14) !important;
}

.v-application.theme--dark .elevation-8 {
  box-shadow: 0 4px 14px 0 rgba(19, 17, 32, 0.14) !important;
}

.v-application.theme--light .elevation-9 {
  box-shadow: 0 5px 6px -3px rgba(94, 86, 105, 0.2), 0 3px 16px 2px rgba(94, 86, 105, 0.12), 0 9px 12px 1px rgba(94, 86, 105, 0.14) !important;
}

.v-application.theme--dark .elevation-9 {
  box-shadow: 0 5px 6px -3px rgba(19, 17, 32, 0.2), 0 3px 16px 2px rgba(19, 17, 32, 0.12), 0 9px 12px 1px rgba(19, 17, 32, 0.14) !important;
}

.v-application.theme--light .elevation-12 {
  box-shadow: 0 7px 8px -4px rgba(94, 86, 105, 0.2), 0 5px 22px 4px rgba(94, 86, 105, 0.12), 0 12px 17px 2px rgba(94, 86, 105, 0.14) !important;
}

.v-application.theme--dark .elevation-12 {
  box-shadow: 0 7px 8px -4px rgba(19, 17, 32, 0.2), 0 5px 22px 4px rgba(19, 17, 32, 0.12), 0 12px 17px 2px rgba(19, 17, 32, 0.14) !important;
}

.v-application.theme--light .elevation-16 {
  box-shadow: 0 8px 10px -5px rgba(94, 86, 105, 0.2), 0 6px 30px 5px rgba(94, 86, 105, 0.12), 0 16px 24px 2px rgba(94, 86, 105, 0.14) !important;
}

.v-application.theme--dark .elevation-16 {
  box-shadow: 0 8px 10px -5px rgba(19, 17, 32, 0.2), 0 6px 30px 5px rgba(19, 17, 32, 0.12), 0 16px 24px 2px rgba(19, 17, 32, 0.14) !important;
}

.v-application.theme--light .elevation-24 {
  box-shadow: 0 18px 42px -6px rgba(94, 86, 105, 0.18) !important;
}

.v-application.theme--dark .elevation-24 {
  box-shadow: 0 18px 42px -6px rgba(19, 17, 32, 0.18) !important;
}

.v-application.theme--light .v-item-group.v-bottom-navigation {
  box-shadow: 0 6px 18px -8px rgba(94, 86, 105, 0.56) !important;
}

.v-application.theme--dark .v-item-group.v-bottom-navigation {
  box-shadow: 0 6px 18px -8px rgba(19, 17, 32, 0.56) !important;
}

.v-application.theme--light .v-btn--is-elevated {
  box-shadow: 0 1px 3px 0 rgba(94, 86, 105, 0.2), 0 3px 1px -2px rgba(94, 86, 105, 0.12), 0 2px 2px 0 rgba(94, 86, 105, 0.14);
}

.v-application.theme--dark .v-btn--is-elevated {
  box-shadow: 0 1px 3px 0 rgba(19, 17, 32, 0.2), 0 3px 1px -2px rgba(19, 17, 32, 0.12), 0 2px 2px 0 rgba(19, 17, 32, 0.14);
}

.v-application.theme--light .v-btn--is-elevated::after {
  box-shadow: 0 6px 18px -8px rgba(94, 86, 105, 0.56);
}

.v-application.theme--dark .v-btn--is-elevated::after {
  box-shadow: 0 6px 18px -8px rgba(19, 17, 32, 0.56);
}

.v-application.theme--light .v-btn--is-elevated::active {
  box-shadow: 0 4px 14px 0 rgba(94, 86, 105, 0.14);
}

.v-application.theme--dark .v-btn--is-elevated::active {
  box-shadow: 0 4px 14px 0 rgba(19, 17, 32, 0.14);
}

.v-application.theme--light .v-btn--is-elevated.v-btn-fab {
  box-shadow: 0 2px 10px 0 rgba(94, 86, 105, 0.1);
}

.v-application.theme--dark .v-btn--is-elevated.v-btn-fab {
  box-shadow: 0 2px 10px 0 rgba(19, 17, 32, 0.1);
}

.v-application.theme--light .v-btn--is-elevated.v-btn-fab::after {
  box-shadow: 0 4px 14px 0 rgba(94, 86, 105, 0.14);
}

.v-application.theme--dark .v-btn--is-elevated.v-btn-fab::after {
  box-shadow: 0 4px 14px 0 rgba(19, 17, 32, 0.14);
}

.v-application.theme--light .v-btn--is-elevated.v-btn-fab::active {
  box-shadow: 0 7px 8px -4px rgba(94, 86, 105, 0.2), 0 5px 22px 4px rgba(94, 86, 105, 0.12), 0 12px 17px 2px rgba(94, 86, 105, 0.14);
}

.v-application.theme--dark .v-btn--is-elevated.v-btn-fab::active {
  box-shadow: 0 7px 8px -4px rgba(19, 17, 32, 0.2), 0 5px 22px 4px rgba(19, 17, 32, 0.12), 0 12px 17px 2px rgba(19, 17, 32, 0.14);
}

.v-application.theme--light .v-sheet.v-card--hover:hover {
  box-shadow: 0 4px 14px 0 rgba(94, 86, 105, 0.14);
}

.v-application.theme--dark .v-sheet.v-card--hover:hover {
  box-shadow: 0 4px 14px 0 rgba(19, 17, 32, 0.14);
}

.v-application.theme--light .v-sheet.v-card--hover:focus {
  box-shadow: 0 4px 14px 0 rgba(94, 86, 105, 0.14);
}

.v-application.theme--dark .v-sheet.v-card--hover:focus {
  box-shadow: 0 4px 14px 0 rgba(19, 17, 32, 0.14);
}

.v-application.theme--light .v-card--raised {
  box-shadow: 0 4px 14px 0 rgba(94, 86, 105, 0.14);
}

.v-application.theme--dark .v-card--raised {
  box-shadow: 0 4px 14px 0 rgba(19, 17, 32, 0.14);
}

.v-application.theme--light .v-chip--clickable:active {
  box-shadow: 0 1px 3px 0 rgba(94, 86, 105, 0.2), 0 3px 1px -2px rgba(94, 86, 105, 0.12), 0 2px 2px 0 rgba(94, 86, 105, 0.14);
}

.v-application.theme--dark .v-chip--clickable:active {
  box-shadow: 0 1px 3px 0 rgba(19, 17, 32, 0.2), 0 3px 1px -2px rgba(19, 17, 32, 0.12), 0 2px 2px 0 rgba(19, 17, 32, 0.14);
}

.v-application.theme--light .v-color-picker {
  box-shadow: 0 1px 3px 0 rgba(94, 86, 105, 0.2), 0 3px 1px -2px rgba(94, 86, 105, 0.12), 0 2px 2px 0 rgba(94, 86, 105, 0.14);
}

.v-application.theme--dark .v-color-picker {
  box-shadow: 0 1px 3px 0 rgba(19, 17, 32, 0.2), 0 3px 1px -2px rgba(19, 17, 32, 0.12), 0 2px 2px 0 rgba(19, 17, 32, 0.14);
}

.v-application.theme--light .v-color-picker__preview:not(.v-slider--disabled) .v-slider__thumb {
  box-shadow: 0 4px 8px -4px rgba(94, 86, 105, 0.42);
}

.v-application.theme--dark .v-color-picker__preview:not(.v-slider--disabled) .v-slider__thumb {
  box-shadow: 0 4px 8px -4px rgba(19, 17, 32, 0.42);
}

.v-application.theme--light .v-dialog {
  box-shadow: 0 18px 42px -6px rgba(94, 86, 105, 0.18);
}

.v-application.theme--dark .v-dialog {
  box-shadow: 0 18px 42px -6px rgba(19, 17, 32, 0.18);
}

.v-application.theme--light .v-expansion-panel::before {
  box-shadow: 0 1px 3px 0 rgba(94, 86, 105, 0.2), 0 3px 1px -2px rgba(94, 86, 105, 0.12), 0 2px 2px 0 rgba(94, 86, 105, 0.14);
}

.v-application.theme--dark .v-expansion-panel::before {
  box-shadow: 0 1px 3px 0 rgba(19, 17, 32, 0.2), 0 3px 1px -2px rgba(19, 17, 32, 0.12), 0 2px 2px 0 rgba(19, 17, 32, 0.14);
}

.v-application.theme--light .v-menu__content {
  box-shadow: 0 4px 14px 0 rgba(94, 86, 105, 0.14);
}

.v-application.theme--dark .v-menu__content {
  box-shadow: 0 4px 14px 0 rgba(19, 17, 32, 0.14);
}

.v-application.theme--light .v-menu__content.theme--dark {
  box-shadow: 0 5px 6px -3px rgba(94, 86, 105, 0.2), 0 3px 16px 2px rgba(94, 86, 105, 0.12), 0 9px 12px 1px rgba(94, 86, 105, 0.14);
}

.v-application.theme--dark .v-menu__content.theme--dark {
  box-shadow: 0 5px 6px -3px rgba(19, 17, 32, 0.2), 0 3px 16px 2px rgba(19, 17, 32, 0.12), 0 9px 12px 1px rgba(19, 17, 32, 0.14);
}

.v-application.theme--light .v-navigation-drawer--is-mobile:not(.v-navigation-drawer--close) {
  box-shadow: 0 8px 10px -5px rgba(94, 86, 105, 0.2), 0 6px 30px 5px rgba(94, 86, 105, 0.12), 0 16px 24px 2px rgba(94, 86, 105, 0.14);
}

.v-application.theme--dark .v-navigation-drawer--is-mobile:not(.v-navigation-drawer--close) {
  box-shadow: 0 8px 10px -5px rgba(19, 17, 32, 0.2), 0 6px 30px 5px rgba(19, 17, 32, 0.12), 0 16px 24px 2px rgba(19, 17, 32, 0.14);
}

.v-application.theme--light .v-navigation-drawer--temporary:not(.v-navigation-drawer--close) {
  box-shadow: 0 8px 10px -5px rgba(94, 86, 105, 0.2), 0 6px 30px 5px rgba(94, 86, 105, 0.12), 0 16px 24px 2px rgba(94, 86, 105, 0.14);
}

.v-application.theme--dark .v-navigation-drawer--temporary:not(.v-navigation-drawer--close) {
  box-shadow: 0 8px 10px -5px rgba(19, 17, 32, 0.2), 0 6px 30px 5px rgba(19, 17, 32, 0.12), 0 16px 24px 2px rgba(19, 17, 32, 0.14);
}

.v-application.theme--light .v-pagination__item {
  box-shadow: 0 1px 3px 0 rgba(94, 86, 105, 0.2), 0 3px 1px -2px rgba(94, 86, 105, 0.12), 0 2px 2px 0 rgba(94, 86, 105, 0.14);
}

.v-application.theme--dark .v-pagination__item {
  box-shadow: 0 1px 3px 0 rgba(19, 17, 32, 0.2), 0 3px 1px -2px rgba(19, 17, 32, 0.12), 0 2px 2px 0 rgba(19, 17, 32, 0.14);
}

.v-application.theme--light .v-pagination__item--active {
  box-shadow: 0 6px 18px -8px rgba(94, 86, 105, 0.56);
}

.v-application.theme--dark .v-pagination__item--active {
  box-shadow: 0 6px 18px -8px rgba(19, 17, 32, 0.56);
}

.v-application.theme--light .v-pagination__navigation {
  box-shadow: 0 1px 3px 0 rgba(94, 86, 105, 0.2), 0 3px 1px -2px rgba(94, 86, 105, 0.12), 0 2px 2px 0 rgba(94, 86, 105, 0.14);
}

.v-application.theme--dark .v-pagination__navigation {
  box-shadow: 0 1px 3px 0 rgba(19, 17, 32, 0.2), 0 3px 1px -2px rgba(19, 17, 32, 0.12), 0 2px 2px 0 rgba(19, 17, 32, 0.14);
}

.v-application.theme--light .v-stepper:not(.v-sheet--outlined) {
  box-shadow: 0 2px 10px 0 rgba(94, 86, 105, 0.1);
}

.v-application.theme--dark .v-stepper:not(.v-sheet--outlined) {
  box-shadow: 0 2px 10px 0 rgba(19, 17, 32, 0.1);
}

.v-application.theme--light .v-stepper__content {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}

.v-application.theme--dark .v-stepper__content {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}

.v-application.theme--light .v-input--switch:not(v-input--switch--flat):not(v-input--switch--inset) .v-input--switch__thumb {
  box-shadow: 0 1px 3px 0 rgba(94, 86, 105, 0.2), 0 2px 1px -1px rgba(94, 86, 105, 0.12), 0 1px 1px 0 rgba(94, 86, 105, 0.14);
}

.v-application.theme--dark .v-input--switch:not(v-input--switch--flat):not(v-input--switch--inset) .v-input--switch__thumb {
  box-shadow: 0 1px 3px 0 rgba(19, 17, 32, 0.2), 0 2px 1px -1px rgba(19, 17, 32, 0.12), 0 1px 1px 0 rgba(19, 17, 32, 0.14);
}

.v-application.theme--light .v-text-field.v-text-field--solo:not(.v-text-field--solo-flat) > .v-input__control > .v-input__slot {
  box-shadow: 0 1px 3px 0 rgba(94, 86, 105, 0.2), 0 3px 1px -2px rgba(94, 86, 105, 0.12), 0 2px 2px 0 rgba(94, 86, 105, 0.14);
}

.v-application.theme--dark .v-text-field.v-text-field--solo:not(.v-text-field--solo-flat) > .v-input__control > .v-input__slot {
  box-shadow: 0 1px 3px 0 rgba(19, 17, 32, 0.2), 0 3px 1px -2px rgba(19, 17, 32, 0.12), 0 2px 2px 0 rgba(19, 17, 32, 0.14);
}

.v-application.theme--light .v-timeline-item__dot {
  box-shadow: 0 1px 3px 0 rgba(94, 86, 105, 0.2), 0 2px 1px -1px rgba(94, 86, 105, 0.12), 0 1px 1px 0 rgba(94, 86, 105, 0.14);
}

.v-application.theme--dark .v-timeline-item__dot {
  box-shadow: 0 1px 3px 0 rgba(19, 17, 32, 0.2), 0 2px 1px -1px rgba(19, 17, 32, 0.12), 0 1px 1px 0 rgba(19, 17, 32, 0.14);
}

.v-application.theme--light .v-toolbar {
  box-shadow: 0 6px 18px -8px rgba(94, 86, 105, 0.56);
}

.v-application.theme--dark .v-toolbar {
  box-shadow: 0 6px 18px -8px rgba(19, 17, 32, 0.56);
}

.v-application.theme--light .v-application.kbd {
  box-shadow: 0 6px 18px -8px rgba(94, 86, 105, 0.56);
}

.v-application.theme--dark .v-application.kbd {
  box-shadow: 0 6px 18px -8px rgba(19, 17, 32, 0.56);
}

.v-application.theme--light .v-sheet.v-alert:not(.v-sheet--outlined) {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}

.v-application.theme--dark .v-sheet.v-alert:not(.v-sheet--outlined) {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}

.v-application.theme--light .v-sheet.v-app-bar.v-toolbar:not(.v-sheet--outlined) {
  box-shadow: 0 6px 18px -8px rgba(94, 86, 105, 0.56);
}

.v-application.theme--dark .v-sheet.v-app-bar.v-toolbar:not(.v-sheet--outlined) {
  box-shadow: 0 6px 18px -8px rgba(19, 17, 32, 0.56);
}

.v-application.theme--light .v-sheet.v-banner:not(.v-sheet--outlined) {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12) !important;
}

.v-application.theme--dark .v-sheet.v-banner:not(.v-sheet--outlined) {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12) !important;
}

.v-application.theme--light .v-sheet.v-card:not(.v-sheet--outlined) {
  box-shadow: 0 2px 10px 0 rgba(94, 86, 105, 0.1);
}

.v-application.theme--dark .v-sheet.v-card:not(.v-sheet--outlined) {
  box-shadow: 0 2px 10px 0 rgba(19, 17, 32, 0.1);
}

.v-application.theme--light .v-sheet.v-footer:not(.v-sheet--outlined) {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}

.v-application.theme--dark .v-sheet.v-footer:not(.v-sheet--outlined) {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}

.v-application.theme--light .v-sheet.v-list:not(.v-sheet--outlined) {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}

.v-application.theme--dark .v-sheet.v-list:not(.v-sheet--outlined) {
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}

.v-application.theme--light .v-sheet.v-snack__wrapper:not(.v-sheet--outlined) {
  box-shadow: 0 2px 10px 0 rgba(94, 86, 105, 0.1) !important;
}

.v-application.theme--dark .v-sheet.v-snack__wrapper:not(.v-sheet--outlined) {
  box-shadow: 0 2px 10px 0 rgba(19, 17, 32, 0.1) !important;
}

.v-application.theme--light .v-sheet.v-toolbar:not(.v-sheet--outlined) {
  box-shadow: 0 6px 18px -8px rgba(94, 86, 105, 0.56);
}

.v-application.theme--dark .v-sheet.v-toolbar:not(.v-sheet--outlined) {
  box-shadow: 0 6px 18px -8px rgba(19, 17, 32, 0.56);
}

.v-chip .v-chip__content .v-icon--dense {
  height: 20px;
  width: 20px;
}

.v-application .v-btn:not(.v-btn--outlined).primary, .v-application .v-btn:not(.v-btn--outlined).secondary, .v-application .v-btn:not(.v-btn--outlined).accent, .v-application .v-btn:not(.v-btn--outlined).success, .v-application .v-btn:not(.v-btn--outlined).error, .v-application .v-btn:not(.v-btn--outlined).warning, .v-application .v-btn:not(.v-btn--outlined).info {
  color: #fff;
}

.v-btn:not(.v-btn--round).v-size--x-small {
  height: 26px !important;
}
.v-btn:not(.v-btn--round).v-size--small {
  height: 30px !important;
}
.v-btn:not(.v-btn--round).v-size--default {
  height: 38px !important;
}
.v-btn:not(.v-btn--round).v-size--large {
  height: 42px !important;
}
.v-btn:not(.v-btn--round).v-size--x-large {
  height: 46px !important;
}

.v-btn--icon.v-size--x-small {
  height: 26px !important;
  width: 26px !important;
}
.v-btn--icon.v-size--small {
  height: 30px !important;
  width: 30px !important;
}
.v-btn--icon.v-size--default {
  height: 38px !important;
  width: 38px !important;
}
.v-btn--icon.v-size--large {
  height: 42px !important;
  width: 42px !important;
}
.v-btn--icon.v-size--x-large {
  height: 46px !important;
  width: 46px !important;
}

.v-application.theme--light .v-btn--is-elevated {
  box-shadow: 0 4px 8px -4px rgba(94, 86, 105, 0.42) !important;
}

.v-application.theme--dark .v-btn--is-elevated {
  box-shadow: 0 4px 8px -4px rgba(19, 17, 32, 0.42) !important;
}

.v-application.theme--light .v-btn--is-elevated:hover {
  box-shadow: 0 6px 18px -8px rgba(94, 86, 105, 0.56) !important;
}

.v-application.theme--dark .v-btn--is-elevated:hover {
  box-shadow: 0 6px 18px -8px rgba(19, 17, 32, 0.56) !important;
}

.v-application.theme--light .v-btn--is-elevated:active {
  box-shadow: 0 1px 3px 0 rgba(94, 86, 105, 0.2), 0 3px 1px -2px rgba(94, 86, 105, 0.12), 0 2px 2px 0 rgba(94, 86, 105, 0.14) !important;
}

.v-application.theme--dark .v-btn--is-elevated:active {
  box-shadow: 0 1px 3px 0 rgba(19, 17, 32, 0.2), 0 3px 1px -2px rgba(19, 17, 32, 0.12), 0 2px 2px 0 rgba(19, 17, 32, 0.14) !important;
}

.v-card .v-card__title {
  line-height: 1;
  padding-top: 20px;
  padding-bottom: 20px;
}
.v-card .v-card__title ~ .v-card__title {
  padding-top: 16px;
}
.v-card .v-card__subtitle,
.v-card .v-card__text,
.v-card .v-card__actions {
  padding-top: 0;
}
.v-card > .v-card__subtitle:first-child,
.v-card > .v-card__text:first-child,
.v-card > .v-card__actions:first-child {
  padding-top: 20px;
}

.v-card .v-card__subtitle:last-child,
.v-card .v-card__text:last-child,
.v-card .v-card__actions:last-child {
  padding-bottom: 20px;
}
.v-card .v-divider + .v-card__subtitle,
.v-card .v-divider + .v-card__text,
.v-card .v-divider + .v-card__actions {
  padding-top: 16px;
}
.v-card .v-card__actions.dense {
  padding: 0 calc(20px - 8px) calc(20px - 8px);
}
.v-card .v-card__actions.dense .v-btn:not(.v-btn--icon) {
  min-width: 68px;
}

.v-badge__badge .v-icon {
  height: 12px;
  width: 12px;
}

.v-badge--dot .v-badge__badge {
  height: 10px !important;
  width: 10px !important;
}
.v-badge--dot .v-badge__badge::after {
  border-width: 2px !important;
}

.v-date-picker-table .v-date-picker-table__current.accent,
.v-date-picker-table .v-btn--active.accent {
  background-color: var(--v-primary-base) !important;
  border-color: var(--v-primary-base) !important;
}
.v-date-picker-table .v-date-picker-table__current.accent--text,
.v-date-picker-table .v-btn--active.accent--text {
  color: var(--v-primary-base) !important;
  caret-color: var(--v-primary-base) !important;
}

.v-date-picker-header .v-date-picker-header__value .accent--text button:hover {
  color: var(--v-primary-base);
}

.v-picker--time .v-time-picker-clock__hand.accent {
  background-color: var(--v-primary-base) !important;
  border-color: var(--v-primary-base) !important;
}
.v-picker--time .v-time-picker-clock__item--active.accent {
  background-color: var(--v-primary-base) !important;
  border-color: var(--v-primary-base) !important;
}

.theme--light.v-expansion-panels .v-expansion-panel-content__wrap {
  color: rgba(94, 86, 105, 0.68);
}

.theme--dark.v-expansion-panels .v-expansion-panel-content__wrap {
  color: rgba(231, 227, 252, 0.68);
}

.v-expansion-panels.v-expansion-panels--focusable .v-expansion-panel--active > .v-expansion-panel-header {
  min-height: unset;
}
.v-expansion-panels.v-expansion-panels--focusable .v-expansion-panel-content__wrap {
  padding-top: 1rem;
}

.v-application.theme--light .v-expansion-panel.v-expansion-panel--active {
  box-shadow: 0 4px 8px -4px rgba(94, 86, 105, 0.42) !important;
}

.v-application.theme--dark .v-expansion-panel.v-expansion-panel--active {
  box-shadow: 0 4px 8px -4px rgba(19, 17, 32, 0.42) !important;
}

.v-expansion-panel .v-expansion-panel-header {
  padding: 1rem;
}
.v-expansion-panel .v-expansion-panel-content__wrap {
  padding: 0rem 1rem 1rem;
}

.v-dialog .v-divider + .v-card__actions {
  padding-top: 16px !important;
}

.v-application[class*=theme] .v-pagination__item,
.v-application[class*=theme] .v-pagination__navigation {
  box-shadow: none !important;
}

.theme--light.v-pagination .v-pagination__item:hover,
.theme--light.v-pagination .v-pagination__navigation:hover {
  background-color: rgba(94, 86, 105, 0.04);
}

.theme--dark.v-pagination .v-pagination__item:hover,
.theme--dark.v-pagination .v-pagination__navigation:hover {
  background-color: rgba(231, 227, 252, 0.08);
}

.v-autocomplete .v-input__icon--clear svg,
.v-select .v-input__icon--clear svg {
  height: 20px;
  width: 20px;
}

.theme--light.v-text-field:not(.v-input--has-state):hover > .v-input__control > .v-input__slot:before {
  border-color: rgba(94, 86, 105, 0.28) !important;
}

.theme--dark.v-text-field:not(.v-input--has-state):hover > .v-input__control > .v-input__slot:before {
  border-color: rgba(231, 227, 252, 0.28) !important;
}

.v-date-picker-table .v-btn.v-btn--active.v-btn--disabled {
  color: #fff !important;
  opacity: 0.5;
}

.v-application--wrap .theme--light.v-picker .v-picker__body {
  border: 1px solid rgba(94, 86, 105, 0.22);
}
.v-application--wrap .theme--dark.v-picker .v-picker__body {
  border: 1px solid rgba(231, 227, 252, 0.22);
}

.theme--light.v-picker .v-picker__actions {
  background-color: #fff;
}

.theme--dark.v-picker .v-picker__actions {
  background-color: #28243d;
}

.v-snack__wrapper .v-snack__content {
  letter-spacing: 0.25px;
}

.theme--light.v-snack__wrapper:not([class*="--text"]) .v-snack__content {
  color: #5e5669;
}

.theme--dark.v-snack__wrapper:not([class*="--text"]) .v-snack__content {
  color: #fff;
}
/* $body-font-family: 'Noto Sans HK', sans-serif; */
.page-title[data-v-0eb0bb4a] {
  /* 18px */
  font-size: 1.125rem;
  font-weight: 500;
}
.back-button-icon[data-v-0eb0bb4a] {
  font-size: 14px !important;
}
.top-right-class[data-v-0eb0bb4a] {
  /* d-flex align-center my-2 ml-2*/
  display: flex;
  align-content: center;
  margin-left: 8px;
}
.bottom-left-class[data-v-0eb0bb4a] {
  display: flex;
  align-content: center;
}
.bottom-right-class[data-v-0eb0bb4a] {
  display: flex;
  align-content: center;
}