.dialog__content,
.dialog__footer,
.dialog__header {
  display: block;
}
.dialog {
  visibility: hidden;
}
.dialog--visible {
  visibility: visible;
}
.dialog-overlay {
  z-index: 30;
}
.dialog {
  z-index: 40;
}
.dialog--visible {
  z-index: 90;
}
.dialog--black .dialog__header {
  background-color: #4a4a4a;
  color: #f4f5f5;
}
.dialog--blue .dialog__header {
  background-color: #388cbf;
  color: #f4f5f5;
}
.dialog--gray .dialog__header {
  background-color: #e2e8ec;
  color: #4a4a4a;
}
.dialog--green .dialog__header {
  background-color: #5ee6a5;
  color: #408665;
}
.dialog--orange .dialog__header {
  background-color: #ffbc89;
  color: #b5792b;
}
.dialog--purple .dialog__header {
  background-color: #d08bfa;
  color: #3f0658;
}
.dialog--red .dialog__header {
  background-color: #e32d2d;
  color: #ffe3e3;
}
.dialog--yellow .dialog__header {
  background-color: #fffba4;
  color: #7d7945;
}
.dialog {
  background-color: #fff;
  color: #949494;
}
.dialog-overlay.dialog-overlay--visible {
  display: block;
}
.dialog--full-size {
  display: -ms-flexbox;
  -js-display: flex;
  display: flex;
}
.dialog-overlay {
  display: none;
}
.dialog {
  border-radius: 8px/3px;
  box-shadow: 0 8px 21px -8px rgba(0,0,0,0.21), 0 0 3px 1px rgba(0,0,0,0.13);
  max-height: 90vh;
  max-width: 640px;
  min-width: 380px;
  opacity: 0;
  position: fixed;
  left: 50%;
  overflow: hidden;
  transform: translateX(-50%);
  transition: 0.4s ease-in-out;
}
.dialog--full-size {
  -ms-flex-flow: column;
  flex-flow: column;
  max-width: none;
  height: 90vh;
  width: 90vw;
}
.dialog-overlay {
  background-color: rgba(0,0,0,0.21);
  position: fixed;
  top: 0;
  left: 0;
}
.dialog-overlay {
  height: 100%;
  width: 100%;
}
.dialog--visible {
  opacity: 1;
}
.dialog--bottom {
  bottom: 0;
}
.dialog--center {
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.dialog--top {
  top: 0;
}
.dialog__content {
  overflow-y: scroll;
}
.dialog__content,
.dialog__footer,
.dialog__header {
  padding: 1em;
}
.dialog--full-size .dialog__content {
  -ms-flex-positive: 1;
  flex-grow: 1;
}