/* custom colors */
.modal-aside {
  /* old */
  --modal-aside-content-width: 420px;
  --modal-aside-px: var(--lg);
  --modal-aside-py: var(--modal-aside-px);
  --modal-aside-pa: var(--modal-aside-py) var(--modal-aside-px);
  --modal-content-width: var(--modal-aside-content-width) !important;
  --modal-aside-head-height: var(--computed-header-height);
  --modal-px: 0px !important;
  --modal-py: 0px !important;
}
.modal-aside .dialog-content__inner {
  height: 100% !important;
}
.modal-aside__wrapper {
  height: 100%;
  width: 100%;
}
.modal-aside__inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
}
.modal-aside__head {
  flex: 0 0 auto;
  width: 100%;
  height: var(--modal-aside-head-height);
  position: sticky;
  z-index: 2;
  top: 0;
  padding: 0 var(--modal-aside-px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md);
  background-color: var(--theme-color-bg);
  border-bottom: 1px solid var(--theme-color-separator);
}
.modal-aside__head-button {
  flex: 0 0 auto;
}
.modal-aside__head-title {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}
.modal-aside__content {
  flex: 1 1 auto;
  width: 100%;
  padding: var(--modal-aside-pa);
  position: relative;
  z-index: 1;
}
.modal-aside__bottom {
  position: sticky;
  flex: 0 0 auto;
  width: 100%;
  z-index: 2;
  bottom: 0;
  padding: var(--modal-aside-py) var(--modal-aside-px);
  background-color: var(--theme-color-bg);
  border-top: 1px solid var(--theme-color-separator);
}
@media (max-width: 479.98px) {
.modal-aside {
    --modal-aside-content-width: 100% !important;
    --modal-aside-px: var(--md);
    --modal-aside-py: var(--lg);
}
}