/* custom colors */
.dialog {
  --modal-content-width: auto;
  --modal-px: var(--lg);
  --modal-py: var(--lg);
  --modal-head-height: var(--computed-header-height);
  --modal-inner-pt: var(--modal-py);
  --modal-inner-pb: var(--modal-py);
  --modal-inner-px: var(--modal-px);
  width: calc(100% + var(--scrollbar-width)) !important;
  max-width: 100vw !important;
  opacity: 1 !important;
}
.dialog--size-sm {
  --modal-content-width: 360px;
}
.dialog--size-md {
  --modal-content-width: 420px;
}
.dialog--size-lg {
  --modal-content-width: 720px;
}
.dialog--size-container {
  --modal-content-width: var(--container-inner-width);
}
.dialog--position-center .dialog-inner {
  justify-content: center;
  padding: var(--lg) var(--md);
}
.dialog--position-center .dialog-content {
  border-radius: var(--global-border-radius);
  overflow: hidden;
}
.dialog--position-left .dialog-content {
  height: 100%;
}
.dialog--position-left .dialog-inner {
  justify-content: left;
  height: 100%;
}
.dialog--position-left .q-dialog__inner.q-transition--fade-enter-active .dialog-content {
  transform: translateX(-50%);
}
.dialog--position-left .q-dialog__inner.q-transition--fade-leave-active .dialog-content {
  transform: translateX(-50%);
}
.dialog--position-left .q-dialog__inner.q-transition--fade-enter-to .dialog-content {
  transform: translateX(0);
}
.dialog--position-right .dialog-content {
  height: 100%;
}
.dialog--position-right .dialog-inner {
  justify-content: right;
  height: 100%;
}
.dialog--position-right .q-dialog__inner.q-transition--fade-enter-active .dialog-content {
  transform: translateX(50%);
}
.dialog--position-right .q-dialog__inner.q-transition--fade-leave-active .dialog-content {
  transform: translateX(50%);
}
.dialog--position-right .q-dialog__inner.q-transition--fade-enter-to .dialog-content {
  transform: translateX(0);
}
@media (max-width: 479.98px) {
.dialog--mobile-full {
    --modal-px: var(--grid-px);
}
.dialog--mobile-full .dialog-inner {
    height: 100%;
    width: 100%;
    padding: 0;
}
.dialog--mobile-full .dialog-content {
    height: 100%;
    width: 100%;
    max-width: initial;
    overflow: auto;
    border-radius: 0;
}
}
.dialog .q-dialog__inner {
  width: 100%;
  height: 100%;
  bottom: initial;
  right: initial;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  pointer-events: all !important;
  background: var(--theme-color-dialog-overlay);
  transition: opacity var(--q-transition-duration) ease, background-color var(--trs-1) !important;
}
.dialog .q-dialog__inner > div {
  max-height: initial !important;
  max-width: initial;
  box-shadow: initial;
  border-radius: initial;
  overflow: hidden;
}
.dialog .q-dialog__inner--minimized {
  padding: 0;
}
.dialog-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.dialog-inner {
  width: 100%;
  display: flex;
  align-items: center;
}
.dialog-spinner {
  font-size: var(--xl);
  color: var(--theme-color-primary);
}
.dialog-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--modal-content-width);
  background-color: var(--theme-color-bg);
  transition: transform var(--q-transition-duration) ease;
  position: relative;
  will-change: transform;
}
.dialog-content__inner {
  width: 100%;
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  padding: var(--modal-inner-pt) var(--modal-inner-px) var(--modal-inner-pb) var(--modal-inner-px);
}
.dialog-head {
  flex: 0 0 auto;
  width: 100%;
  height: var(--modal-head-height);
  position: sticky;
  z-index: 2;
  top: 0;
  padding: 0 var(--modal-px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--grid-px);
  background-color: var(--theme-color-bg);
  border-bottom: 1px solid var(--theme-color-separator);
}
.dialog-head__title {
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}