.xpopover {
  --xpopover-pt: 16px;
  --xpopover-pb: 16px;
  --xpopover-pi: 0px;
  padding-inline: var(--xpopover-pi);
  padding-top: var(--xpopover-pt);
  padding-bottom: var(--xpopover-pb);
  position: fixed;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: end;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  background: var(--card_bg_black);
  width: min(100%, 315px);
  transition: opacity 0.3s ease-in-out;
  box-shadow: 0px 5px 30px rgb(34 34 34 / 10%);
  border-radius: 12px;
  border-radius: var(--theme-outer-border-radius);
  max-height: 100dvh;
  overflow: hidden;
}
.xpopover.clone {
  visibility: hidden !important;
  opacity: 0 !important;
  transition: none !important;
}
.xpopover.show {
  display: flex !important;
  opacity: 1;
  visibility: visible;
}
.xpopover > .scrollbar {
  max-height: calc(100dvh - var(--xpopover-pt) - var(--xpopover-pb));
  display: block;
  height: 100%;
}
.xpopover .xpopover-content {
  --xpopover-content-pt: 0px;
  --xpopover-content-pb: 0px;
  --xpopover-content-pi: 16px;
  padding-inline: var(--xpopover-content-pi);
  padding-top: var(--xpopover-content-pt);
  padding-bottom: var(--xpopover-content-pb);
  color: #222;
  color: var(--white_text_black);
  font-size: 1rem;
  line-height: calc(1em + 10px);
  word-break: break-word;
}
.xpopover .xpopover-content--no-inline-gutters {
  --xpopover-content-pi: 0px;
}
.xpopover .xpopover-drag {
  width: 40px;
  height: 4px;
  background-color: #dadada;
  background-color: var(--light, #dadada) var(--dark, var(--stroke_black));
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 10px;
  cursor: pointer;
  display: none;
}
.xpopover-overlay {
  background: #3a3f44;
  opacity: 0.7 !important;
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 3000;
  display: none;
}

@media (max-width: 380px), (max-width: 760px) and (min-resolution: 2dppx) {
  .xpopover {
    --xpopover-pb: 0px;
    max-width: 100%;
    width: 100% !important;
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    top: initial !important;
    border: none !important;
    z-index: 3000 !important;
    transform: translate(0, 100%) !important;
    min-height: min(204px, 100dvh);
    justify-content: center;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out !important;
    border-radius: var(--theme-outer-border-radius, 12px) var(--theme-outer-border-radius, 12px) 0 0;
  }
  .xpopover.show {
    transform: translate(0, 0) !important;
  }
  .xpopover .xpopover-drag {
    display: block;
  }
  .xpopover .xpopover-content {
    --xpopover-content-pb: 16px;
  }
  .xpopover .xpopover-content--top-offset {
    --xpopover-content-pt: 16px;
  }
  .xpopover .xpopover-content--mobile-center {
    text-align: center;
  }
  .xpopover-overlay {
    display: block;
  }
}

.xpopover--placement-nested {
  border-radius: var(--theme-outer-border-radius) var(--theme-outer-border-radius) 0 0;
  bottom: 0px !important;
  left: 0px !important;
  min-height: min(204px, 100dvh);
  position: absolute;
  right: 0px !important;
  top: initial !important;
  transform: translate(0, 100%) !important;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out !important;
  width: 100%;

  &.show {
    transform: translate(0, 0) !important;
  }
}
.xpopover-overlay--placement-nested {
  display: block;
  position: absolute;
}