/*!*****************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-24.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-24.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-24.use[3]!./src/assets/scss/main.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap);
/*!*********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-24.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-24.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-24.use[3]!./src/assets/scss/main.scss (1) ***!
  \*********************************************************************************************************************************************************************************************************************************************/
/*
16px => 1rem
15px => 0.9375rem
18px => 1.125rem
14px => 0.875
*/
/*
16px => 1rem
15px => 0.9375rem
18px => 1.125rem
14px => 0.875
*/
body {
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  font-family: "Open Sans", sans-serif !important;
  color: var(--v-main-base) !important;
}

.list-unstyled {
  list-style: none !important;
  padding-left: 0 !important;
}
.list-unstyled li {
  padding-left: 0 !important;
}
.list-unstyled li::before {
  content: unset;
}

a {
  text-decoration: none;
}

.w-100 {
  width: 100%;
}

.cursor-point {
  cursor: pointer;
}

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

.rtl {
  direction: rtl;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 420px) {
  .container {
    max-width: 400px;
  }
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
@media (min-width: 1440px) {
  .container {
    max-width: 1400px;
  }
}
html {
  overflow: auto;
}

/* custom scrollbar */
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: var(--v-secondary-background-base);
}

::-webkit-scrollbar-thumb {
  background-color: var(--v-mutedColor-base);
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--v-secondary-base);
}

.no-border-bottom {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.remove-border {
  border: unset !important;
}

.font-weight-light-bold {
  font-weight: 600;
}

.border-radius {
  border-radius: 4px;
}

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

.no-border {
  border: unset !important;
}

svg {
  vertical-align: middle;
}

hr {
  border-color: rgba(125, 125, 125, 0.2);
}

.subtitle {
  font-size: 11px !important;
}

.subtitle-light {
  font-size: 11px !important;
  font-weight: lighter;
}

.subtitle-bold {
  font-size: 11px !important;
  font-weight: bold;
}

.v-item-group {
  display: inline-flex;
  flex-wrap: wrap;
}

.v-input.v-text-field--outlined .v-input__slot, .v-input.v-text-field--solo .v-input__slot {
  background-color: var(--v-input-background-base) !important;
}
.v-input .v-icon {
  color: var(--v-secondary-base) !important;
}
.v-input.v-input--is-disabled .v-chip {
  background: transparent !important;
}
.v-input.v-input--is-disabled .v-chip .v-chip__content {
  color: var(--v-mutedColor-base);
}
.v-input.v-input--is-disabled .v-icon {
  color: var(--v-mutedColor-base) !important;
}
.v-input .v-label {
  color: var(--v-main-base) !important;
  font-size: 0.875rem !important;
}
.v-input .v-label.v-label--active {
  font-size: 1rem !important;
  font-weight: 500;
}
.v-input .v-label.v-label--is-disabled {
  color: var(--v-secondary-base) !important;
}

.theme--dark.v-list-item .v-list-item__mask {
  color: #000000 !important;
}

.v-input input, .v-select__selections {
  font-size: 0.75rem !important;
}

.v-btn--has-bg {
  color: var(--v-button-text-color-base) !important;
}
.v-btn--has-bg .v-btn__content {
  color: var(--v-button-text-color-base) !important;
}
.v-btn--has-bg.default {
  color: var(--v-main-base) !important;
}
.v-btn--has-bg.default .v-btn__content {
  color: var(--v-main-base) !important;
}

.v-btn {
  text-transform: capitalize !important;
}

.v-dialog > .v-card > .v-card__actions {
  padding: 8px 24px !important;
}

.v-card > .v-card__actions {
  padding: 8px 16px !important;
}

.v-card .v-card__title {
  margin-bottom: 5px;
}

.v-card__subtitle, .v-card__text {
  font-size: 0.75rem !important;
}

@media screen and (max-width: 900px) {
  .full-screen-dialog {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    top: 0 !important;
    left: 0 !important;
  }
  .full-screen-dialog .v-card, .full-screen-dialog .v-sheet {
    border-radius: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: scroll !important;
  }
}
table td.text-end {
  padding-right: 0 !important;
}

.v-data-table {
  background: transparent !important;
}

.v-data-table__wrapper {
  border: 1px solid rgba(125, 125, 125, 0.2);
  border-radius: 4px !important;
}

.v-list-item .v-list-item__title {
  padding: 1px;
}

.v-stepper .v-stepper__step__step {
  background-color: var(--v-mutedColor-base) !important;
}
.v-stepper .v-stepper__header {
  box-shadow: unset !important;
}
.v-stepper .v-stepper__label {
  font-size: 0.9375rem !important;
}

.menu-shadow {
  box-shadow: -12px 12px 12px -9px rgba(0, 0, 0, 0.57) !important;
  -webkit-box-shadow: -12px 12px 12px -9px rgba(0, 0, 0, 0.57) !important;
  -moz-box-shadow: -12px 12px 12px -9px rgba(0, 0, 0, 0.57) !important;
}

.swal2-popup {
  background-color: var(--v-secondary-background-base) !important;
  color: var(--v-main-base) !important;
  border-radius: 4px;
}
.swal2-popup .swal2-warning {
  border-color: var(--v-warning-base) !important;
  color: var(--v-warning-base) !important;
}
.swal2-popup .cancel-btn {
  background-color: var(--v-secondary-background-base) !important;
}
.swal2-popup .error-btn {
  background-color: var(--v-error-base) !important;
  color: var(--v-button-text-color-base) !important;
}
.swal2-popup .warning-btn {
  background-color: var(--v-warning-base) !important;
  color: var(--v-button-text-color-base) !important;
}
.swal2-popup .success-btn {
  background-color: var(--v-success-base) !important;
  color: var(--v-button-text-color-base) !important;
}
.swal2-popup .cancel-btn {
  margin-right: 20px;
}

body.v-tour--active {
  pointer-events: none;
}

.v-tour {
  pointer-events: auto;
}

.v-tour__target--highlighted {
  box-shadow: 0 0 0 99999px black !important;
  opacity: 0.86;
  pointer-events: auto;
  z-index: 230 !important;
}

.v-tour__target--relative {
  position: relative;
}

.v-step[data-v-54f9a632] {
  background-color: white;
  color: #171717;
  max-width: 300px;
  border-radius: 10px;
  box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 1rem;
  pointer-events: auto;
  text-align: center;
  z-index: 230;
  border-bottom: 3px solid var(--v-primary-base);
}

.v-step--sticky[data-v-54f9a632] {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.v-step--sticky .v-step__arrow[data-v-54f9a632] {
  display: none;
}

.v-step__arrow[data-v-54f9a632],
.v-step__arrow[data-v-54f9a632]:before {
  position: absolute;
  width: 15px;
  height: 15px;
  background: inherit;
}

.v-step__arrow[data-v-54f9a632] {
  visibility: hidden;
}

.v-step__arrow--dark[data-v-54f9a632]:before {
  background: inherit;
}

.v-step__arrow[data-v-54f9a632]:before {
  visibility: visible;
  content: "";
  transform: rotate(45deg);
  margin-left: -5px;
}

.v-step[data-popper-placement^=top] > .v-step__arrow[data-v-54f9a632] {
  bottom: -5px;
}

.v-step[data-popper-placement^=bottom] > .v-step__arrow[data-v-54f9a632] {
  top: -5px;
}

.v-step[data-popper-placement^=right] > .v-step__arrow[data-v-54f9a632] {
  left: -5px;
}

.v-step[data-popper-placement^=left] > .v-step__arrow[data-v-54f9a632] {
  right: -5px;
}

.v-step__header[data-v-54f9a632] {
  margin: -1rem -1rem 0.5rem;
  padding: 10px 0.5rem;
  background: linear-gradient(to right, var(--v-primary-base) 0%, transparent 90%) left bottom transparent no-repeat;
  background-size: 100% 2px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  font-weight: bold;
}

.v-step__content[data-v-54f9a632] {
  margin: 0 0 1rem 0;
}

.v-step__button[data-v-54f9a632] {
  background: var(--v-primary-base);
  color: var(--v-button-text-color-base);
  cursor: pointer;
  display: inline-block;
  height: 1.8rem;
  line-height: 1rem;
  outline: none;
  margin: 0.5rem 0.5rem;
  padding: 0.35rem 0.8rem;
  font-weight: bold;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
}

.v-step__button-skip {
  background-color: inherit !important;
  border: 1px solid var(--v-warning-base) !important;
  color: var(--v-warning-base) !important;
}

.v-step__button-previous {
  background-color: var(--v-info-base) !important;
}

.v-step__button-stop {
  background-color: var(--v-success-base) !important;
}

.navbar {
  height: 56px !important;
  z-index: 181 !important;
}
@media (max-width: 575px) {
  .navbar .v-toolbar__content {
    height: 56px !important;
  }
}
.navbar .v-toolbar__content {
  border-bottom: 1px solid rgba(125, 125, 125, 0.2);
}
.navbar .menu-button {
  color: var(--v-navbar-secondary-base) !important;
  width: 80px;
  text-align: center;
}
.navbar .menu-button svg {
  height: 12px;
}
.navbar .menu-button .mainn {
  fill: var(--v-navbar-main-base);
  transition: fill 300ms;
}
.navbar .menu-button .sub {
  fill: var(--v-navbar-main-base);
  transition: fill 300ms;
}
.navbar .menu-button:hover {
  color: var(--v-primary);
}
@media (max-width: 1439px) {
  .navbar .menu-button {
    width: 100px;
  }
}
@media (max-width: 1199px) {
  .navbar .menu-button {
    width: 100px;
  }
}
@media (max-width: 767px) {
  .navbar .menu-button {
    width: 60px;
  }
}
.navbar .menu-button-mobile {
  color: var(--v-navbar-secondary-base);
  text-align: center;
  margin-left: 0px;
}
.navbar .menu-button-mobile svg {
  height: 12px;
  fill: var(--v-navbar-main-base);
}
@media (max-width: 767px) {
  .navbar .menu-button-mobile {
    width: 20px;
  }
}
.navbar .logo {
  height: 50px;
  width: 300px;
  overflow: visible;
}
.navbar .logo #icon {
  fill: var(--v-primary-base);
}
.navbar .logo #separator, .navbar .logo #name {
  fill: var(--v-navbar-main-base);
}
@media (max-width: 991px) {
  .navbar .logo {
    height: 30px !important;
    width: 150px !important;
  }
}
@media (max-width: 767px) {
  .navbar .logo {
    height: 30px !important;
    width: 100px !important;
  }
}
@media (max-width: 575px) {
  .navbar .logo {
    height: 30px !important;
    width: 75px !important;
  }
}
.navbar .avatar-name {
  color: var(--v-navbar-main-base);
}
.navbar .avatar-name:hover {
  color: var(--v-primary-base);
}
.navbar .avatar-img {
  height: 40px !important;
  min-width: 40px !important;
  width: 40px !important;
}
@media (max-width: 991px) {
  .navbar .avatar-img {
    height: 35px !important;
    min-width: 35px !important;
    width: 35px !important;
  }
}
@media (max-width: 575px) {
  .navbar .avatar-img {
    height: 30px !important;
    min-width: 30px !important;
    width: 30px !important;
  }
}
.navbar .header-icon i {
  color: var(--v-navbar-secondary-base) !important;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  vertical-align: initial;
  cursor: pointer;
}
.navbar .header-icon i:hover {
  color: var(--v-primary-base) !important;
}
@media (max-width: 1199px) {
  .navbar {
    height: 56px !important;
  }
}
@media (max-width: 991px) {
  .navbar {
    height: 56px !important;
  }
}
@media (max-width: 575px) {
  .navbar {
    height: 50px !important;
  }
}

.navbar-menu-list .v-list-item {
  cursor: pointer;
  color: var(--v-navbar-main-base) !important;
}
.navbar-menu-list .v-list-item i {
  color: var(--v-navbar-secondary-base) !important;
}
.navbar-menu-list .v-list-item:hover {
  color: var(--v-primary-base) !important;
}
.navbar-menu-list .v-list-item:hover i {
  color: var(--v-primary-base) !important;
}

.v-toolbar__content {
  height: unset !important;
}

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  padding-top: 56px;
  z-index: 190;
  height: calc(100% - 56px);
  transition: border-radius 300ms;
}
.sidebar .ps-container {
  margin-right: 0;
  padding-right: 0;
}
.sidebar .main-menu {
  width: 100px;
  height: calc(100% - 56px);
  background: var(--v-sidebar-bg-base);
  z-index: 189;
  position: fixed;
  padding-top: 10px;
  padding-bottom: 10px;
  left: 0;
  border-right: 1px solid rgba(125, 125, 125, 0.3);
}
.sidebar .main-menu .scroll {
  padding-right: unset;
  margin-right: unset;
  height: 100%;
}
.sidebar .main-menu .scroll .ps__thumb-y {
  right: 0;
}
.sidebar .main-menu .scroll .ps__rail-y.ps--clicking .ps__thumb-y, .sidebar .main-menu .scroll .ps__rail-y:focus > .ps__thumb-y, .sidebar .main-menu .scroll .ps__rail-y:hover > .ps__thumb-y {
  width: 6px;
}
.sidebar .main-menu .scroll .ps__rail-x.ps--clicking, .sidebar .main-menu .scroll .ps__rail-x:focus, .sidebar .main-menu .scroll .ps__rail-x:hover, .sidebar .main-menu .scroll .ps__rail-y.ps--clicking, .sidebar .main-menu .scroll .ps__rail-y:focus, .sidebar .main-menu .scroll .ps__rail-y:hover {
  background-color: transparent !important;
}
.sidebar .main-menu.main-hidden {
  transform: translateX(-100px);
}
.sidebar .main-menu ul li {
  position: relative;
}
.sidebar .main-menu ul li span {
  text-align: center;
  padding: 0 10px;
  line-height: 14px;
}
.sidebar .main-menu ul li a {
  color: var(--v-sidebar-main-text-base);
  height: 85px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  border-bottom: 1px solid rgba(125, 125, 125, 0.2);
  transition: color 300ms;
  transition: background 300ms;
}
.sidebar .main-menu ul li a.disable-item {
  color: var(--v-sidebar-disable-icon-base) !important;
}
.sidebar .main-menu ul li a.disable-item i {
  color: var(--v-sidebar-main-disable-icon-base) !important;
}
.sidebar .main-menu ul li:hover i, .sidebar .main-menu ul li:hover a, .sidebar .main-menu ul li:focus i, .sidebar .main-menu ul li:focus a {
  color: var(--v-primary-base);
}
.sidebar .main-menu ul li i {
  font-size: 32px;
  line-height: 42px;
  color: var(--v-sidebar-secondary-base);
}
.sidebar .main-menu ul li.active a, .sidebar .main-menu ul li.active i {
  color: var(--v-primary-base);
}
.sidebar .main-menu ul li.active:after {
  content: " ";
  background: var(--v-primary-base);
  border-radius: 10px;
  position: absolute;
  width: 6px;
  height: 90px;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}
.sidebar .main-menu ul li:last-of-type a {
  border-bottom: initial;
}
@media (max-width: 1439px) {
  .sidebar .main-menu {
    width: 100px;
    height: calc(100% - 56px);
  }
}
@media (max-width: 1199px) {
  .sidebar .main-menu {
    width: 100px;
    height: calc(100% - 56px);
  }
}
@media (max-width: 767px) {
  .sidebar .main-menu {
    width: 90px;
    height: calc(100% - 50px);
  }
  .sidebar .main-menu ul li i {
    font-size: 28px;
    line-height: 38px;
  }
  .sidebar .main-menu ul li a {
    height: 90px;
  }
  .sidebar .main-menu ul li.active:after {
    width: 3px;
    height: 60px;
  }
}
.sidebar .sub-menu {
  width: 210px;
  border-radius: 0 4px 4px 0;
  background: var(--v-sidebar-bg-base);
  z-index: 188;
  position: fixed;
  left: 100px;
  border-left: 1px solid rgba(125, 125, 125, 0.2);
  height: calc(100% - 56px);
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 0;
}
.sidebar .sub-menu .title {
  color: var(--v-sidebar-main-text-base);
  margin: 0 0 5px 0;
  padding: 0 0 3px 5px !important;
  background: linear-gradient(to right, var(--v-sidebar-main-text-base) 0%, transparent 90%) left bottom transparent no-repeat;
  background-size: 100% 1px;
  font-weight: bold;
}
.sidebar .sub-menu .scroll {
  margin-right: unset;
  padding-right: unset;
  height: 100%;
}
.sidebar .sub-menu .scroll .ps__thumb-y {
  right: 0;
}
.sidebar .sub-menu .scroll.ps-container {
  padding-bottom: 15px;
}
.sidebar .sub-menu .scroll .ps__rail-y.ps--clicking .ps__thumb-y, .sidebar .sub-menu .scroll .ps__rail-y:focus > .ps__thumb-y, .sidebar .sub-menu .scroll .ps__rail-y:hover > .ps__thumb-y {
  width: 6px;
}
.sidebar .sub-menu .scroll .ps__rail-x.ps--clicking, .sidebar .sub-menu .scroll .ps__rail-x:focus, .sidebar .sub-menu .scroll .ps__rail-x:hover, .sidebar .sub-menu .scroll .ps__rail-y.ps--clicking, .sidebar .sub-menu .scroll .ps__rail-y:focus, .sidebar .sub-menu .scroll .ps__rail-y:hover {
  background-color: transparent !important;
}
.sidebar .sub-menu ul {
  display: none;
}
.sidebar .sub-menu ul .treeview-subnav:hover .disable-item span {
  color: var(--v-sidebar-main-disable-icon-base) !important;
}
.sidebar .sub-menu ul .treeview-subnav .list-subnav {
  position: relative;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--v-sidebar-main-text-base);
}
.sidebar .sub-menu ul .treeview-subnav .list-subnav i {
  font-size: 1.3em;
  margin-right: 10px;
  color: var(--v-sidebar-secondary-base);
}
.sidebar .sub-menu ul .treeview-subnav .list-subnav.active i, .sidebar .sub-menu ul .treeview-subnav .list-subnav.active {
  color: var(--v-primary-base);
}
.sidebar .sub-menu ul .treeview-subnav .list-subnav.active:after {
  content: " ";
  background: var(--v-primary-base);
  border-radius: 10px;
  position: absolute;
  width: 4px;
  height: 4px;
  top: 50%;
  transform: translateY(-50%);
  left: -16px;
}
.sidebar .sub-menu ul .treeview-subnav .list-subnav i, .sidebar .sub-menu ul .treeview-subnav .list-subnav span {
  transition: color 300ms;
}
.sidebar .sub-menu ul .treeview-subnav .list-subnav.disable-item {
  color: var(--v-sidebar-main-disable-icon-base) !important;
}
.sidebar .sub-menu ul .treeview-subnav .list-subnav.disable-item i {
  color: var(--v-sidebar-main-disable-icon-base) !important;
}
.sidebar .sub-menu ul .has-sub-item.active:after {
  content: " " !important;
  background: inherit !important;
}
.sidebar .sub-menu ul ul.third-level-menu {
  display: block !important;
}
.sidebar .sub-menu ul ul.third-level-menu li a,
.sidebar .sub-menu ul ul.third-level-menu li i {
  color: var(--v-primary-base);
}
.sidebar .sub-menu ul ul.third-level-menu li a:hover, .sidebar .sub-menu ul ul.third-level-menu li.active i, .sidebar .sub-menu ul ul.third-level-menu li.active a {
  color: var(--v-primary-base);
}
.sidebar .sub-menu ul ul.third-level-menu li.active:after {
  left: -22px;
}
@media (max-width: 1439px) {
  .sidebar .sub-menu {
    left: 100px;
    width: 210px;
    height: calc(100% - 56px);
  }
}
@media (max-width: 1199px) {
  .sidebar .sub-menu {
    left: 100px;
    width: 210px;
    height: calc(100% - 56px);
  }
}
@media (max-width: 767px) {
  .sidebar .sub-menu {
    left: 90px;
    width: 230px;
    height: calc(100% - 50px);
  }
}
@media (max-width: 1439px) {
  .sidebar {
    padding-top: 56px;
    height: calc(100% - 56px);
  }
}
@media (max-width: 1199px) {
  .sidebar {
    padding-top: 56px;
    height: calc(100% - 56px);
  }
}
@media (max-width: 767px) {
  .sidebar {
    padding-top: 50px;
    height: calc(100% - 50px);
    box-shadow: 0 1px 15px rgba(0, 0, 0, 0.04), 0 1px 6px rgba(0, 0, 0, 0.04);
  }
}

.sub-hidden .main-menu,
.menu-sub-hidden .main-menu {
  border-radius: 0 0 4px 0;
}

.sub-show-temporary .main-menu {
  border-radius: 0;
}

body.default-transition .sidebar .sub-menu {
  transition: transform 300ms;
}

body.default-transition .sidebar .main-menu {
  transition: transform 300ms, border-radius 300ms;
}

.sub-hidden .menu-button .sub,
.menu-sub-hidden .menu-button .sub {
  fill: var(--v-navbar-main-base);
}

.main-hidden .menu-button .main,
.main-hidden .menu-button .sub,
.menu-hidden .menu-button .main,
.menu-hidden .menu-button .sub {
  fill: var(--v-sidebar-secondary-base);
}

.sub-hidden .sub-menu,
.menu-sub-hidden .sub-menu,
.menu-hidden .sub-menu {
  transform: translateX(-210px);
}
@media (max-width: 1439px) {
  .sub-hidden .sub-menu,
.menu-sub-hidden .sub-menu,
.menu-hidden .sub-menu {
    transform: translateX(-210px);
  }
}
@media (max-width: 1199px) {
  .sub-hidden .sub-menu,
.menu-sub-hidden .sub-menu,
.menu-hidden .sub-menu {
    transform: translateX(-210px);
  }
}
@media (max-width: 767px) {
  .sub-hidden .sub-menu,
.menu-sub-hidden .sub-menu,
.menu-hidden .sub-menu {
    transform: translateX(-230px);
  }
}

.main-hidden .main-menu,
.menu-hidden .main-menu {
  transform: translateX(-100px);
}
@media (max-width: 1439px) {
  .main-hidden .main-menu,
.menu-hidden .main-menu {
    transform: translateX(-100px);
  }
}
@media (max-width: 1199px) {
  .main-hidden .main-menu,
.menu-hidden .main-menu {
    transform: translateX(-100px);
  }
}
@media (max-width: 767px) {
  .main-hidden .main-menu,
.menu-hidden .main-menu {
    transform: translateX(-90px);
  }
}

.main-hidden.sub-hidden .sub-menu,
.menu-hidden .sub-menu {
  transform: translateX(-310px);
}
@media (max-width: 1439px) {
  .main-hidden.sub-hidden .sub-menu,
.menu-hidden .sub-menu {
    transform: translateX(-310px);
  }
}
@media (max-width: 1199px) {
  .main-hidden.sub-hidden .sub-menu,
.menu-hidden .sub-menu {
    transform: translateX(-310px);
  }
}
@media (max-width: 767px) {
  .main-hidden.sub-hidden .sub-menu,
.menu-hidden .sub-menu {
    transform: translateX(-320px);
  }
}

.menu-mobile .main-menu {
  transform: translateX(-90px);
}
.menu-mobile .sub-menu {
  transform: translateX(-370px);
  box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1), 0 3px 20px rgba(0, 0, 0, 0.1);
}

.main-show-temporary .main-menu {
  transform: translateX(0);
}
.main-show-temporary .sub-menu {
  transform: translateX(-210px);
}
@media (max-width: 1439px) {
  .main-show-temporary .main-menu {
    transform: translateX(0);
  }
  .main-show-temporary .sub-menu {
    transform: translateX(-210px);
  }
}
@media (max-width: 1199px) {
  .main-show-temporary .main-menu {
    transform: translateX(0);
  }
  .main-show-temporary .sub-menu {
    transform: translateX(-210px);
  }
}
@media (max-width: 767px) {
  .main-show-temporary .sub-menu {
    transform: translateX(-230px);
  }
}

.sub-show-temporary .sub-menu,
.menu-mobile.sub-show-temporary .sub-menu {
  transform: translateX(0);
  box-shadow: 0 3px 30px rgba(0, 0, 0, 0.1), 0 3px 20px rgba(0, 0, 0, 0.1);
}

/* 15.Main*/
.app-layout main {
  margin-left: 310px;
  margin-top: 56px;
  margin-right: 0px;
  margin-bottom: -20px;
}
.app-layout main.sub-hidden {
  margin-left: 100px;
}
.app-layout main.main-hidden {
  margin-left: 0px;
}
.app-layout main .container-fluid {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 1439px) {
  .app-layout main {
    margin-left: 310px;
    margin-right: 0px;
    margin-top: 56px;
    margin-bottom: 30px;
  }
}
@media (max-width: 1199px) {
  .app-layout main {
    margin-left: 310px;
    margin-right: 0px;
    margin-top: 56px;
    margin-bottom: 20px;
  }
}
@media (max-width: 767px) {
  .app-layout main {
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: 56px !important;
    margin-bottom: 0;
  }
}
@media (max-width: 575px) {
  .app-layout main {
    margin-top: 50px !important;
    margin-bottom: 0;
  }
}

body.default-transition main {
  transition: margin-left 300ms;
}

.sub-hidden main,
.menu-sub-hidden main,
.menu-hidden main {
  margin-left: 100px;
}

.main-hidden main,
.menu-hidden main {
  margin-left: 0px;
}

@media (max-width: 1439px) {
  .sub-hidden main,
.menu-sub-hidden main,
.menu-hidden main {
    margin-left: 100px;
  }

  .main-hidden main,
.menu-hidden main {
    margin-left: 0px;
  }
}
@media (max-width: 1199px) {
  .sub-hidden main,
.menu-sub-hidden main,
.menu-hidden main {
    margin-left: 100px;
  }

  .main-hidden main,
.menu-hidden main {
    margin-left: 0px;
  }
}
.authlayout {
  color: var(--v-main-base) !important;
}
.authlayout .header {
  text-align: center;
  font-size: 2rem;
  line-height: 2.2rem;
  margin-bottom: 24px;
}
.authlayout .dashspacer {
  width: 80px;
  height: 4px;
  background-color: var(--v-main-base);
  margin: 24px auto;
}
.authlayout hr {
  color: var(--v-separator-color-base);
}
.authlayout .footer .socialgroup button:hover, .authlayout .footer .socialgroup button:active, .authlayout .footer .socialgroup button:focus {
  color: var(--v-primary-base) !important;
}
.authlayout .footer .socialgroup button:hover i, .authlayout .footer .socialgroup button:active i, .authlayout .footer .socialgroup button:focus i {
  color: var(--v-primary-base) !important;
}
.authlayout .header__center {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr max-content 1fr;
  grid-column-gap: 1.2rem;
  align-items: center;
}
.authlayout .header__center::before, .authlayout .header__center::after {
  font-weight: 400;
  content: "";
  display: block;
  height: 0.5px;
  background-color: var(--v-separator-color-base);
}

.logo {
  height: 40px;
  width: 150px;
  overflow: visible;
}
.logo #icon {
  fill: var(--v-primary-base);
}
.logo #iconText {
  fill: var(--v-navbar-secondary-base);
}
.logo #separator, .logo #name {
  fill: white;
}
@media (max-width: 991px) {
  .logo {
    height: 30px !important;
    width: 150px !important;
  }
}
@media (max-width: 767px) {
  .logo {
    height: 30px !important;
    width: 100px !important;
  }
}
@media (max-width: 575px) {
  .logo {
    height: 30px !important;
    width: 75px !important;
  }
}
.logo.navigation-logo {
  height: 30px !important;
  width: 75px !important;
}

.vue-grid-item {
  background-color: var(--v-secondary-background-base);
  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;
  border-radius: 4px;
  overflow: hidden;
  touch-action: none;
}
.vue-grid-item.vue-grid-placeholder {
  background: var(--v-primary-base) !important;
}

.grid::before {
  content: "";
  background-size: calc(calc(100% - 5px) / 12) 40px;
  background-image: linear-gradient(to right, lightgrey 1px, transparent 1px), linear-gradient(to bottom, lightgrey 1px, transparent 1px);
  height: calc(100% - 5px);
  width: calc(100% - 5px);
  position: absolute;
  background-repeat: repeat;
  margin: 5px;
}

.document-content .image-helper {
  width: 100%;
  height: auto;
}
.document-content table thead tr th {
  background: var(--v-background-base);
  color: var(--v-table-header-text-base);
  padding: 3px;
  text-align: center;
}
.document-content table tbody tr td {
  background: var(--v-input-background-base);
  color: var(--v-main-base);
  padding: 1px 3px;
  text-align: center;
}
.document-content table tbody tr td strong {
  color: var(--v-primary-base);
}
.document-content table tbody tr:nth-child(even) td {
  background: var(--v-table-even-row-base);
}
.document-content p {
  color: var(--v-main-base);
}
.document-content p strong {
  color: var(--v-primary-base);
}
.document-content h1, .document-content h2, .document-content h3, .document-content h4, .document-content h5, .document-content h6 {
  color: var(--v-navbar-main-base);
  margin: 10px 0 5px 0;
  padding: 0 0 3px 0;
  background: linear-gradient(to right, var(--v-primary-base) 0%, transparent 90%) left bottom transparent no-repeat;
  background-size: 100% 1px;
}
.document-content ul li, .document-content ol li {
  color: var(--v-main-base);
}
.document-content ul li::marker, .document-content ol li::marker {
  color: var(--v-info-base);
}
.document-content img {
  border: 2px dashed var(--v-secondary-base);
  border-spacing: 10px;
  border-radius: 10px;
  max-width: 100%;
}

.expression-output .output-number-color {
  color: var(--v-info-base) !important;
}
.expression-output .output-operator-color {
  color: var(--v-primary-base) !important;
}
.expression-output .output-expression-color {
  color: var(--v-warning-base) !important;
}

.theme--light.v-treeview--hoverable .v-treeview-node__root:hover i, .theme--light.v-treeview--hoverable .v-treeview-node__root:hover span {
  color: var(--v-primary-base) !important;
}

.treeview-subnav .v-treeview-node__root {
  margin-left: -8px;
}

.v-treeview-node__children {
  margin-left: 24px;
}

.v-treeview-node__level {
  width: 0px !important;
}

.header-table table thead tr th {
  background: var(--v-table-header-background-base) !important;
  color: var(--v-table-header-text-base) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}
.header-table table thead tr th .v-data-table-header__sort-badge {
  color: var(--v-header-secondary-base) !important;
  background-color: white !important;
}
.header-table table thead tr th:hover {
  color: var(--v-primary-base) !important;
}
.header-table table thead tr th:hover i {
  color: var(--v-primary-base) !important;
}
.header-table table tbody tr:not(.v-data-table__expanded__content):nth-child(even) td {
  background-color: var(--v-table-even-row-base) !important;
}
.header-table table tbody tr:not(.v-data-table__expanded__content):hover td {
  background-color: var(--v-table-hover-base) !important;
  border-color: rgba(125, 125, 125, 0.3) !important;
}
.header-table table tbody tr:not(.v-data-table__expanded__content) td {
  font-size: 0.75rem !important;
  background-color: var(--v-secondary-background-base) !important;
}

.row-clickable table tbody tr {
  cursor: pointer;
}
@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotating {
  animation: rotating 0.7s linear infinite;
}

.fixed-name-col {
  position: sticky !important;
  position: -webkit-sticky !important;
  left: 150px;
  z-index: 2 !important;
}

.fixed-favorite-col {
  position: sticky !important;
  position: -webkit-sticky !important;
  left: 110px;
  z-index: 2 !important;
}

.fixed-action-col {
  position: sticky !important;
  position: -webkit-sticky !important;
  left: 50px;
  z-index: 2 !important;
}

.most-index {
  z-index: 3 !important;
}

.property-fixed-table .v-data-table-header .text-start:nth-child(1) {
  position: sticky !important;
  position: -webkit-sticky !important;
  left: 0;
  z-index: 3 !important;
}

.property-fixed-table tbody > tr td.text-start > span > i > .v-icon {
  z-index: 1 !important;
}
.property-fixed-table tbody > tr .text-start:nth-child(1) {
  position: sticky !important;
  position: -webkit-sticky !important;
  left: 0;
  z-index: 3 !important;
}

.column {
  z-index: 4 !important;
}

.v-data-table > .v-data-table__wrapper > table {
  /*
   1. Make table fill screen view.
   2. When a th text is long, display it in one-line and prevent to showing th in multi-line.
   */
  min-width: -moz-max-content !important;
  min-width: max-content !important;
  width: 100% !important;
}

fieldset {
  border: 1px solid var(--v-separator-color-darken1);
}
fieldset.border-top {
  border-width: 1px 0 0 0;
}

.v-tabs .v-tabs-bar .v-tab {
  font-size: 0.9375rem;
  text-transform: unset !important;
}
.v-tabs .v-tabs-bar .v-tab:not(.v-tab--active) {
  color: var(--v-main-base) !important;
  font-weight: 500;
}

.theme--light.v-card .v-card__text {
  color: var(--v-main-base) !important;
}

.mt-card {
  background: var(--v-secondary-background-base);
  border-radius: 4px;
}
.mt-card .mt-title {
  padding: 10px;
  border-radius: 4px 4px 0 0;
  background: var(--v-header-bg-base);
  color: var(--v-card-title-text-base);
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
}
.mt-card .mt-title i {
  color: var(--v-card-title-icon-base);
}
.mt-card .mt-body {
  height: 100%;
  overflow-y: auto;
}
.mt-card .mt-collapse {
  position: relative;
  height: 20px;
  transition: all 0.5s ease;
}
.mt-card .mt-collapse:hover {
  height: 50px;
}

.tooltip {
  position: absolute;
  padding: 5px 15px 5px 15px;
  border-radius: 4px;
  background: #535357;
  opacity: 0.8;
  max-width: 300px;
}

.v-tooltip__content, .tooltip {
  font-size: 0.75rem !important;
  max-height: 300px;
  color: white;
  z-index: 210 !important;
  overflow: hidden;
}

.table-report {
  margin: 15px 0 0 0;
  border-collapse: collapse;
  width: 100%;
}
.table-report th {
  width: 40%;
}
.table-report td {
  width: 60%;
}
.table-report tr:nth-child(even) th, .table-report tr:nth-child(even) td {
  background: var(--v-table-even-row-base);
}
.table-report th, .table-report td {
  border-collapse: collapse;
  padding: 5px;
  text-align: left;
}
.table-report.border th, .table-report.border td {
  border: 1px solid var(--v-separator-color-darken1);
}
.table-report.no-border th, .table-report.no-border td {
  border: 0;
}
.table-report.border-bottom th, .table-report.border-bottom td {
  border-bottom: 1px solid var(--v-separator-color-darken1);
}

.font-weight-medium-bold {
  font-weight: 600 !important;
}

.header-6 {
  font-weight: 600 !important;
  font-size: 0.875rem !important;
}

.header-5 {
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
}

.header-4 {
  font-weight: 700 !important;
  font-size: 1rem !important;
}

.font-4 {
  font-size: 1rem !important;
}

.font-5 {
  font-size: 0.9375rem !important;
}

.font-6 {
  font-size: 0.875rem !important;
}

.border-bottom {
  border-bottom: 1px solid rgba(125, 125, 125, 0.25);
}

.border-bottom-dark {
  border-bottom: 1px solid rgba(125, 125, 125, 0.3);
}

.border-bottom-light {
  border-bottom: 1px solid rgba(125, 125, 125, 0.2);
}

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

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

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

.ql-align-justify {
  text-align: justify;
}

.ql-tooltip {
  position: static !important;
  z-index: 190;
}

.ql-syntax {
  display: inline-block;
  padding: 10px;
  border-radius: 3px;
  background-color: var(--v-main-base);
  color: var(--v-input-background-base);
}

blockquote {
  padding-left: 15px;
  border-left: 4px solid var(--v-separator-color-base);
}

.v-application button {
  text-transform: none !important;
}

.q-input {
  width: 100%;
  height: 120px;
  position: relative;
  overflow-x: hidden;
}
.q-input .label {
  width: 100%;
  font-size: 16px;
  font-weight: 700;
  color: var(--v-q-black-base);
}
.q-input .input-place {
  position: relative;
  width: 100%;
}
.q-input .input-place .input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--v-q-gray-400-base);
  color: var(--v-q-gray-900-base);
  font-size: 16px;
  padding: 12px 15px;
}
.q-input .input-place .icon {
  position: absolute;
  font-size: 24px;
  left: 10px;
  top: 13px;
  color: var(--v-q-gray-900-base);
}
.q-input .input-place .disabled-color {
  color: var(--v-q-gray-500-base);
}
.q-input .input-place .more-padding {
  padding: 12px 40px;
}
.q-input .input-place .hint-icon {
  position: absolute;
  font-size: 24px;
  right: 10px;
  top: 13px;
  color: var(--v-q-primary-normal-base);
  cursor: pointer;
}
.q-input .input-place .edit-icon {
  position: absolute;
  font-size: 24px;
  right: 10px;
  top: 13px;
  color: var(--v-q-primary-normal-base);
  cursor: pointer;
}
.q-input .error {
  background-color: var(--v-q-red-normal-base);
  color: var(--v-q-white-base);
  border-radius: 4px;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 5px 5px 10px;
  position: absolute;
  margin-top: 5px;
  left: -100%;
}
.q-input .error.active {
  left: 0;
  animation: errorAnimation 0.6s;
}
.q-input .error::before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: -5px;
  left: 5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--v-q-red-normal-base);
}

.q-input-svg {
  position: absolute;
  border-radius: 8px;
}

.q-input-line {
  stroke-dasharray: 260;
  stroke-width: 5px;
  z-index: 1 !important;
  fill: transparent;
  stroke: var(--v-q-secondary-normal-base);
  animation: svgAnimation 1.2s linear infinite;
}

#app:is([class]) .theme--dark .q-input .label {
  color: var(--v-q-white-base);
}
#app:is([class]) .theme--dark .q-input .input-place .input {
  border: 1px solid var(--v-q-gray-400-base);
  color: var(--v-q-white-base);
}
#app:is([class]) .theme--dark .q-input .input-place .icon {
  color: var(--v-q-gray-50-base);
}
#app:is([class]) .theme--dark .q-input .input-place .disabled-color {
  color: var(--v-q-gray-400-base);
}

@keyframes svgAnimation {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 1000;
  }
}
@keyframes errorAnimation {
  0% {
    left: 0;
  }
  20% {
    left: 10%;
  }
  35% {
    left: 5%;
  }
  45% {
    left: 0;
  }
  65% {
    left: 2%;
  }
  100% {
    left: 0;
  }
}
.q-btn {
  position: relative;
  display: inline-block;
  color: var(--v-q-white-base);
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  padding: 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.27s ease-in-out;
}
.q-btn.wide {
  width: 100%;
  font-size: 20px;
}
.q-btn.primary-btn {
  background-color: var(--v-q-primary-normal-base);
}
.q-btn.primary-btn .icon {
  color: var(--v-q-white-base);
}
.q-btn.primary-btn.loading-btn {
  --c: var(--v-q-primary-normal-hover-base) 92%, var(--v-q-primary-normal-base);
  background: radial-gradient(circle closest-side, var(--c)) calc(100% / -4) 0, radial-gradient(circle closest-side, var(--c)) calc(100% / 4) 0;
  cursor: wait;
  background-size: calc(100% / 3) 100%;
  animation: lb 1.5s infinite;
}
.q-btn.primary-btn:hover {
  background-color: var(--v-q-primary-normal-hover-base);
}
.q-btn.primary-btn:active {
  background-color: var(--v-q-primary-normal-active-base);
}
.q-btn.primary-outline-btn {
  color: var(--v-q-primary-normal-base);
  border: 1.5px solid var(--v-q-primary-normal-base);
}
.q-btn.primary-outline-btn .icon {
  color: var(--v-q-primary-normal-base);
}
.q-btn.primary-outline-btn.loading-btn {
  --c: var(--v-q-primary-normal-hover-base) 92%, var(--v-q-primary-normal-base);
  background: radial-gradient(circle closest-side, var(--c)) calc(100% / -4) 0, radial-gradient(circle closest-side, var(--c)) calc(100% / 4) 0;
  cursor: wait;
  background-size: calc(100% / 3) 100%;
  animation: lb 1.5s infinite;
}
.q-btn.primary-outline-btn:hover {
  background-color: var(--v-q-primary-light-hover-base);
}
.q-btn.primary-outline-btn:active {
  background-color: var(--v-q-primary-light-active-base);
}
.q-btn.warning-btn {
  border: 2px solid var(--v-q-yellow-normal-base);
  background-color: var(--v-q-yellow-light-base);
  color: var(--v-q-yellow-normal-base);
}
.q-btn.warning-btn .icon {
  color: var(--v-q-white-base);
}
.q-btn.warning-btn.loading-btn {
  --c: var(--v-q-yellow-normal-base) 92%, var(--v-q-yellow-light-base);
  background: radial-gradient(circle closest-side, var(--c)) calc(100% / -4) 0, radial-gradient(circle closest-side, var(--c)) calc(100% / 4) 0;
  cursor: wait;
  background-size: calc(100% / 3) 100%;
  animation: lb 1.5s infinite;
}
.q-btn.warning-btn:hover {
  background-color: var(--v-q-yellow-normal-base);
  color: var(--v-q-white-base);
}
.q-btn.disabled-btn {
  cursor: not-allowed;
  background-color: var(--v-q-gray-100-base);
  color: var(--v-q-gray-600-base);
}
.q-btn.disabled-btn:hover {
  cursor: not-allowed;
  background-color: var(--v-q-gray-100-base);
  color: var(--v-q-gray-600-base);
}
.q-btn.disabled-btn:active {
  cursor: not-allowed;
  background-color: var(--v-q-gray-100-base);
  color: var(--v-q-gray-600-base);
}

@keyframes lb {
  0% {
    background-position: calc(100% / -4) 0, calc(100% / 4) 0;
  }
  50% {
    background-position: calc(100%/-4) -12px, calc(100% / 4) 12px;
  }
  100% {
    background-position: calc(100%/4) -12px, calc(3 * 100% / 4) 12px;
  }
}
#app:is([class]) .theme--dark .card-view-header {
  background-color: var(--v-q-gray-600-base);
}
#app:is([class]) .theme--dark .card-view-header .add-btn:active {
  background-color: var(--v-q-primary-dark-base);
}
#app:is([class]) .theme--dark .card-view-header .refresh {
  background: var(--v-q-gray-500-base);
}
#app:is([class]) .theme--dark .card-view-header .refresh .icon {
  color: var(--v-q-gray-300-base);
}
#app:is([class]) .theme--dark .warning-alert {
  background-color: var(--v-q-yellow-darker-base);
}
#app:is([class]) .theme--dark .success-alert {
  background-color: var(--v-q-primary-darker-base);
  color: var(--v-q-white-base);
}
#app:is([class]) .theme--dark .q-btn.primary-btn:active {
  background-color: var(--v-q-primary-dark-base);
}
#app:is([class]) .theme--dark .q-btn.primary-outline-btn:hover {
  background-color: var(--v-q-primary-darker-hover-base);
}
#app:is([class]) .theme--dark .q-btn.primary-outline-btn:active {
  background-color: var(--v-q-primary-darker-active-base);
}
#app:is([class]) .theme--dark .q-btn.warning-btn {
  background-color: var(--v-q-yellow-darker-base);
}
#app:is([class]) .theme--dark .q-btn.warning-btn.loading-btn {
  --c: var(--v-q-yellow-normal-base) 92%, var(--v-q-yellow-darker-base);
  background: radial-gradient(circle closest-side, var(--c)) calc(100% / -4) 0, radial-gradient(circle closest-side, var(--c)) calc(100% / 4) 0;
  cursor: wait;
  background-size: calc(100% / 3) 100%;
  animation: lb 1.5s infinite;
}
#app:is([class]) .theme--dark .q-btn.warning-btn:hover {
  background-color: var(--v-q-yellow-normal-base);
  color: var(--v-q-white-base);
}
#app:is([class]) .theme--dark .q-btn.disabled-btn {
  cursor: not-allowed;
  background-color: var(--v-q-gray-900-base);
  color: var(--v-q-gray-50-base);
}
#app:is([class]) .theme--dark .q-btn.disabled-btn:hover {
  cursor: not-allowed;
  background-color: var(--v-q-gray-900-base);
  color: var(--v-q-gray-50-base);
}
#app:is([class]) .theme--dark .q-btn.disabled-btn:active {
  cursor: not-allowed;
  background-color: var(--v-q-gray-900-base);
  color: var(--v-q-gray-50-base);
}

.q-color .white {
  color: var(--v-q-white-base);
}
.q-color .black {
  color: var(--v-q-black-base);
}
.q-color .yellow {
  color: var(--v-q-yellow-normal-base);
}
.q-color .red .light {
  color: var(--v-q-red-light-base);
}
.q-color .red .light-active {
  color: var(--v-q-red-light-active-base);
}
.q-color .red .normal {
  color: var(--v-q-red-normal-base);
}
.q-color .gray .tune-100 {
  color: var(--v-q-gray-100-base);
}
.q-color .gray .tune-200 {
  color: var(--v-q-gray-200-base);
}
.q-color .gray .tune-300 {
  color: var(--v-q-gray-300-base);
}
.q-color .gray .tune-400 {
  color: var(--v-q-gray-400-base);
}
.q-color .gray .tune-500 {
  color: var(--v-q-gray-500-base);
}
.q-color .gray .tune-600 {
  color: var(--v-q-gray-600-base);
}
.q-color .primary .light {
  color: var(--v-q-primary-light-base);
}
.q-color .primary .light-hover {
  color: var(--v-q-primary-light-hover-base);
}
.q-color .primary .light-active {
  color: var(--v-q-primary-light-active-base);
}
.q-color .primary .normal {
  color: var(--v-q-primary-normal-base);
}
.q-color .primary .normal-hover {
  color: var(--v-q-primary-normal-hover-base);
}
.q-color .primary .normal-active {
  color: var(--v-q-primary-normal-active-base);
}
.q-color .primary .dark {
  color: var(--v-q-primary-dark-base);
}
.q-color .primary .dark-hover {
  color: var(--v-q-primary-dark-hover-base);
}
.q-color .primary .dark-active {
  color: var(--v-q-primary-dark-active-base);
}
.q-color .primary .darker {
  color: var(--v-q-primary-darker-base);
}
.q-color .secondary .light {
  color: var(--v-q-secondary-light-base);
}
.q-color .secondary .light-hover {
  color: var(--v-q-secondary-light-hover-base);
}
.q-color .secondary .light-active {
  color: var(--v-q-secondary-light-active-base);
}
.q-color .secondary .normal {
  color: var(--v-q-secondary-normal-base);
}
.q-color .secondary .normal-hover {
  color: var(--v-q-secondary-normal-hover-base);
}
.q-color .secondary .normal-active {
  color: var(--v-q-secondary-normal-active-base);
}
.q-color .secondary .dark {
  color: var(--v-q-secondary-dark-base);
}
.q-color .secondary .dark-hover {
  color: var(--v-q-secondary-dark-hover-base);
}
.q-color .secondary .dark-active {
  color: var(--v-q-secondary-dark-active-base);
}
.q-color .secondary .darker {
  color: var(--v-q-secondary-darker-base);
}

.link {
  color: var(--v-q-primary-normal-base);
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
}

.card-view-header {
  background-color: var(--v-q-gray-100-base);
  width: 100%;
  display: flex;
  justify-content: start;
  gap: 20px;
  padding: 10px;
  border-radius: 20px;
}
.card-view-header .add-btn {
  padding: 10px 15px;
  background-color: var(--v-q-primary-normal-base);
  color: var(--v-q-white-base);
  font-weight: 600;
  border-radius: 12px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.27s ease-in-out;
}
.card-view-header .add-btn .icon {
  font-size: 20px;
  color: var(--v-q-white-base);
  margin-top: -4px;
}
.card-view-header .add-btn:hover {
  background-color: var(--v-q-primary-normal-hover-base);
}
.card-view-header .add-btn:active {
  background-color: var(--v-q-primary-normal-active-base);
}
.card-view-header .refresh {
  background: var(--v-q-white-base);
  border-radius: 12px;
  padding: 10px 14px 10px 14px;
  display: flex;
  flex-direction: row;
  gap: 9px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  position: relative;
  float: right;
  cursor: pointer;
}
.card-view-header .refresh .icon {
  flex-shrink: 0;
  font-size: 24px;
  color: var(--v-q-gray-600-base);
  position: relative;
  overflow: visible;
}
.card-view-header .refresh.loading {
  cursor: not-allowed;
  animation: l1 1s infinite linear;
}

.warning-alert {
  background-color: var(--v-q-yellow-light-base);
  color: var(--v-q-yellow-normal-base);
  border-radius: 8px;
  border-left: 8px solid var(--v-q-yellow-normal-base);
  padding: 16px;
  font-weight: 600;
  font-size: 16px;
}

.success-alert {
  background-color: var(--v-q-primary-light-base);
  color: var(--v-q-success-normal-base);
  border-radius: 8px;
  border-left: 8px solid var(--v-q-primary-normal-base);
  padding: 16px;
  font-weight: 600;
  font-size: 16px;
}

@keyframes l1 {
  0% {
    background: transparent;
  }
  100% {
    background: var(--v-q-secondary-normal-base);
    color: var(--v-q-white-base);
  }
}
#app:is([class]) .theme--dark .card-view-header {
  background-color: var(--v-q-gray-600-base);
}
#app:is([class]) .theme--dark .card-view-header .add-btn:active {
  background-color: var(--v-q-primary-dark-base);
}
#app:is([class]) .theme--dark .card-view-header .refresh {
  background: var(--v-q-gray-500-base);
}
#app:is([class]) .theme--dark .card-view-header .refresh .icon {
  color: var(--v-q-gray-300-base);
}
#app:is([class]) .theme--dark .warning-alert {
  background-color: var(--v-q-yellow-darker-base);
}
#app:is([class]) .theme--dark .success-alert {
  background-color: var(--v-q-primary-darker-base);
  color: var(--v-q-white-base);
}