/* dialog - AriaModal hoitaa dialogin keskityksen - TODO: ei sellasta enää oo */
/*
.akx-dialog {
  position: initial !important;
  width: initial !important;
  height: initial !important;
  min-height: initial !important;
 */
  /* ProjectModal dialog animointien takia pitää ainakin animoinnin aikana näkyä overflow kun translatetaan jostain napin kohdalta vaikka dsd kehiin */
/*
  overflow: visible;
}
 */

/* dialog transitions */

/*
.my-dlg-transition-appear {
  opacity: 0;
}
.my-dlg-transition-appear-active {
  opacity: 1;
  transition: opacity 400ms;
}
.my-dlg-transition-enter {
  opacity: 0;
}

.my-dlg-transition-enter-active {
  opacity: 1;
  transition: opacity 400ms;
}
.my-dlg-transition-enter-active .akx-dlg-right .akx-dialogmaincomponent {
  animation: slide-in-from-right-normal 400ms ease-out forwards !important;
}

.my-dlg-transition-exit {
  opacity: 1;
}

.my-dlg-transition-exit-active {
  opacity: 0;
  transition: opacity 400ms;
}
.my-dlg-transition-exit-active .akx-dlg-right .akx-dialogmaincomponent {
  animation: slide-out-to-right-normal 400ms ease-out forwards !important;
}
 */

/*
.my-dlg-transition-exit {
  opacity: 1;
}
 */

/* react-modal */

html.asd-dlg-is-open {
  xwidth: calc(100% - 0px);
  xposition: fixed;
  xtop: -740px;
  xoverflow: hidden;
}

body.asd-dlg-is-open {
  height: 100%;
  overflow: hidden;
}

/* overlay */

.ReactModal__Overlay {
  /*
  opacity: 0;
  transition: opacity 500ms ease-out;
   */

  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 1050;
  overflow: hidden auto;
  text-align: center;
  cursor: pointer;
}

.ReactModal__Overlay--after-open {
  /*
  opacity: 1;
   */
}

.ReactModal__Overlay.asd-overlay-opened {
  background: rgba(0, 0, 0, 0.5); /* NOTE! must be same dialog.css .asd-overlay-opened + projectmodals open/close anim */
}

/* TODO: overlay close anim vaatii että ProjectModals settaa sille jonkun classin samalla kun käynnistää dialogin close animoinnin
.ReactModal__Overlay--before-close {
  background-color: red;
  opacity: 0;
}
 */

.testing-dlg-overlay {
  background: rgb(122, 122, 122) !important;
}

.asd-dlg-content {
  display: inline-block;
  text-align: left;
  top: 0px;
  max-width: 100%;
  cursor: default;
  outline: 0px;
  vertical-align: middle;
  width: 100%;
}
/* huom jotta dlg scroll JA ulkoa sulku toimii, pitää pointer-events olla:
    .asd-dlg-content - auto (että saa klikin joka sulkee)
    .akx-dialog - none (että ei kaappaa klikkiä että se menee .asd-dlg-content:lle)
    .akx-dialogmaincomponent - auto (että scroll jne eventit dialogille)
eiku vasta dlgmaincomp on rajatun levynen, vasta sillä sais olla pointerevents, dlg-contentilla ei saa eikä akxdialogill
MUTTA mitäs akx-dialog ei ois z-index:1, vaan dlgmaincomp ois ... ei auta
===> dialogi ois vähän pakko saada sen kokoseks kun dlgmaincomp
 */
/*
.asd-dlg-content {
  pointer-events: none;
}
.akx-dialog {
  pointer-events: none;
}
.akx-dialogmaincomponent {
  pointer-events: auto;
}
 */
/* ei tää auta tohon, ym ongelmaan, mut nextissä zindex:1 ei kyllä enää varmaan tarttekaan kun portalilla on zindex
.akx-dialog, .akx-page.akx-dialog {
  z-index: unset;
}
 */

.vcenter-cont {
  justify-content: center;
}

/* react-model prevent body scroll */
body.ReactModal__Body--open {
  overflow: hidden;
}

.bug-dlg-overlay, .bug-dlg-content {
  z-index: 9999;
}