.MYUI-ModalRoot {
  overflow: hidden;
  z-index: 100000;
}

.MYUI-ModalRoot[data-active=true] {
  background: rgba(var(--blur_background_modal), 0.4);
  height: 100%;
  width: 100%;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

.MYUI-ModalRoot__back {
  width: 100%;
  height: 100%;
}

.MYUI-ModalRoot__active {
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 3;
  transform: translateY(100%);
}

.MYUI-ModalRoot__active__in {
  z-index: 2;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}


.MYUI-ModalRoot__close {
  top: 0;
  left: 0;
  bottom: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1;
  transform: translateY(0%);
}

.MYUI-ModalRoot__safe .MYUI-ModalRoot__active>.MYUI-Panel>.MYUI-Panel__before,
.MYUI-ModalRoot__safe .MYUI-ModalRoot__back>.MYUI-Panel>.MYUI-Panel__before {
  width: 100%;
  height: 0px;
  padding-top: var(--safe-area-inset-top);
}

.MYUI-ModalRoot__safe .MYUI-ModalRoot__active>.MYUI-Panel>.MYUI-Panel__after,
.MYUI-ModalRoot__safe .MYUI-ModalRoot__back>.MYUI-Panel>.MYUI-Panel__after {
  width: 100%;
  height: 0px;
  padding-bottom: var(--safe-area-inset-bottom);
}



/* 
.MYUI-ModalRoot__next .MYUI-ModalRoot__close .MYUI-ModalPage,
.MYUI-ModalRoot__next .MYUI-ModalRoot__close .MYUI-ModalCard {
  z-index: 3;
  position: relative;
  -webkit-animation: closeAnimation .3s ease-in-out forwards;
  animation: closeAnimation .3s ease-in-out forwards;
}

.MYUI-ModalRoot__next .MYUI-ModalRoot__active .MYUI-ModalPage,
.MYUI-ModalRoot__next .MYUI-ModalRoot__active .MYUI-ModalCard {
  z-index: 4;
  position: relative;
  -webkit-animation: openAnimation .3s ease-in-out forwards;
  animation: openAnimation .3s ease-in-out forwards;
}


.MYUI-ModalRoot__down .MYUI-ModalRoot__close .MYUI-ModalPage,
.MYUI-ModalRoot__down .MYUI-ModalRoot__close .MYUI-ModalCard {
  z-index: 3;
  position: relative;
  -webkit-animation: closeAnimation .3s ease-in-out forwards;
  animation: closeAnimation .3s ease-in-out forwards;
}

.MYUI-ModalRoot__down .MYUI-ModalRoot__active .MYUI-ModalPage,
.MYUI-ModalRoot__down .MYUI-ModalRoot__active .MYUI-ModalCard {
  z-index: 4;
  position: relative;
  -webkit-animation: openAnimation .3s ease-in-out forwards;
  animation: openAnimation .3s ease-in-out forwards;
}

@keyframes closeAnimation {
  from {
    -webkit-transform: translateY(calc(0% + var(--modal_root_transformY)));
    transform: translateY(calc(0% + var(--modal_root_transformY)));
  }

  to {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}

@keyframes openAnimation {
  from {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }

  to {
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
} */