.dialog_container {
  position: absolute;
  width: 100vw;
  max-width: 600px;
  background-color: var(--light-grey);
  box-sizing: border-box;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-100%);
  transform: translateX(-50%) translateY(-100%);
  -webkit-transition: var(--transition-all);
  transition: var(--transition-all);
  z-index: 1000;
}

.dialog_container.dialog_show {
  -webkit-transform: translateY(0) translateX(-50%);
  transform: translateY(0) translateX(-50%);
}

.dialog_container.dialog_show.dialog_soft_hide {
  opacity: .25;
}

#dialog_wrapper {
  position: relative;
  -webkit-transition: var(--transition-all);
  transition: var(--transition-all);
  max-height: 100000px;
  opacity: 1;
}

body.dialog_collapsed {
  background-color: rgba(0,0,0,.8);
}

.dialog_collapsed #dialog_wrapper {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}