.vui-popup {
  --vui-popup-mask-bg: var(--vui-color-mask);
  --vui-popup-zindex: 1000;
}
.vui-popup {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: fixed;
  display: flex;
  pointer-events: none;
  z-index: var(--vui-popup-zindex);
}
.vui-popup.center {
  align-items: center;
  justify-content: center;
}
.vui-popup.top {
  flex-direction: column;
  justify-content: flex-start;
}
.vui-popup.top .vui-popup-box {
  width: 100%;
}
.vui-popup.bottom {
  flex-direction: column;
  justify-content: flex-end;
}
.vui-popup.bottom .vui-popup-box {
  width: 100%;
}
.vui-popup.left {
  justify-content: flex-start;
}
.vui-popup.left .vui-popup-box {
  height: 100%;
}
.vui-popup.right {
  justify-content: flex-end;
}
.vui-popup.right .vui-popup-box {
  height: 100%;
}
.vui-popup.inner-popup .vui-popup-box {
  background-color: var(--vui-color-bg-inverse);
  border-radius: var(--vui-popup-title-bar-radius) var(--vui-popup-title-bar-radius) 0 0;
}
.vui-popup-mask {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  pointer-events: auto;
  z-index: 1;
  background-color: var(--vui-popup-mask-bg);
}
.vui-popup-box {
  position: relative;
  pointer-events: auto;
  z-index: 2;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}
.vui-popup-mask {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  pointer-events: auto;
  z-index: 1;
  background-color: var(--vui-popup-mask-bg);
}
.vui-mask-fade-enter-from,
.vui-mask-fade-leave-to {
  opacity: 0.01;
}
.vui-mask-fade-enter-active,
.vui-mask-fade-leave-active {
  transition: opacity 0.25s;
}

/* vue:/home/runner/work/mand-mobile-next/mand-mobile-next/src/packages/popup/title-bar.vue?vue&type=style */
.vui-popup-title-bar {
  --vui-popup-title-bar-bg: var(--vui-color-bg-inverse);
  --vui-popup-title-bar-height: 120px;
  --vui-popup-title-bar-height-large: 180px;
  --vui-popup-title-bar-radius: 28px;
  --vui-popup-title-bar-radius-large: 40px;
  --vui-popup-title-bar-font-size-button: var(--vui-font-caption-large);
  --vui-popup-title-bar-font-weight-button: var(--vui-font-weight-medium);
  --vui-popup-title-bar-font-size-title: 40px;
  --vui-popup-title-bar-font-size-describe: var(--vui-font-body-large);
  --vui-popup-title-bar-color-title: var(--vui-color-text-base);
  --vui-popup-title-bar-color-describe: var(--vui-color-text-caption);
  --vui-popup-title-bar-color-button-left: var(--vui-color-text-minor);
  --vui-popup-title-bar-color-button-right: var(--vui-color-text-highlight);
}
.vui-popup-title-bar {
  position: relative;
  width: 100%;
  background-color: #fff;
  border-radius: var(--vui-popup-title-bar-radius) var(--vui-popup-title-bar-radius) 0 0;
  overflow: hidden;
}
.vui-popup-title-bar.large {
  height: var(--vui-popup-title-bar-height-large);
}
.vui-popup-title-bar.title-align-left .title-bar-title {
  padding-left: var(--vui-h-gap-sl);
  align-items: flex-start;
}
.vui-popup-title-bar.title-align-left .title-bar-left {
  display: none;
}
.vui-popup-title-bar.title-align-right .title-bar-title {
  padding-right: var(--vui-h-gap-sl);
  align-items: flex-end;
}
.vui-popup-title-bar.title-align-right .title-bar-right {
  display: none;
}
.vui-popup-title-bar > div {
  display: flex;
  padding-top: 20px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-overflow: ellipsis;
  word-break: break-all;
  word-wrap: break-word;
  white-space: nowrap;
}
.vui-popup-title-bar .title-bar-left,
.vui-popup-title-bar .title-bar-right {
  position: absolute;
  top: 0;
  width: 20%;
  max-height: var(--vui-popup-title-bar-height);
  font-size: 18px;
  font-weight: var(--vui-popup-title-bar-font-weight-button);
  box-sizing: border-box;
  line-height: 1;
}
.vui-popup-title-bar .title-bar-title {
  width: 100%;
  padding-left: 20%;
  padding-right: 20%;
  box-sizing: border-box;
  line-height: 1;
}
.vui-popup-title-bar .title-bar-title p.title {
  padding: 10px;
  font-size: 16px;
  color: var(--vui-popup-title-bar-color-title);
  margin: 0;
}
.vui-popup-title-bar .title-bar-title p.describe {
  margin-top: 15px;
  font-size: var(--vui-popup-title-bar-font-size-describe);
  color: var(--vui-popup-title-bar-color-describe);
}
.vui-popup-title-bar .title-bar-left {
  left: 0;
  padding-left: var(--vui-h-gap-sl);
  align-items: flex-start;
}
.vui-popup-title-bar .title-bar-right {
  right: 0;
  padding-right: var(--vui-h-gap-sl);
  align-items: flex-end;
}
.vui-popup-title-bar .vui-popup-cancel {
  color: var(--vui-popup-title-bar-color-button-left);
}
.vui-popup-title-bar .vui-popup-confirm {
  color: var(--vui-popup-title-bar-color-button-right);
}
.vui-popup-title-bar .vui-popup-close {
  padding-top: var(--vui-h-gap-sl);
  color: var(--vui-popup-title-bar-color-button-left);
  justify-content: flex-start;
}