.MYUI-TabsView {
  position: relative;
  width: 100%;
  height: auto;
  overflow-x: hidden;
}

.MYUI-TabsView__back {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
}

.MYUI-TabsView__active {
  position: relative;
  width: 100%;
}

.MYUI-TabsView__left .MYUI-TabsView__active::before,
.MYUI-TabsView__right .MYUI-TabsView__back::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

.MYUI-TabsView__right .MYUI-TabsView__back {
  z-index: 3;
  -webkit-animation: leftAnimation .3s ease forwards;
  animation: leftAnimation .3s ease forwards;
}

.MYUI-TabsView__left .MYUI-TabsView__back {
  z-index: 3;
  -webkit-animation: leftBackAnimation .3s ease forwards;
  animation: leftBackAnimation .3s ease forwards;
}


.MYUI-TabsView__right .MYUI-TabsView__active {
  z-index: 3;
  -webkit-animation: rightAnimation .3s ease forwards;
  animation: rightAnimation .3s ease forwards;
}

.MYUI-TabsView__left .MYUI-TabsView__active {
  z-index: 3;
  -webkit-animation: rightBackAnimation .3s ease forwards;
  animation: rightBackAnimation .3s ease forwards;
}



.MYUI-TabsView__active {
  transform: translateX(0%);
}
 .MYUI-TabsView__back {
  transform: translateX(0%);
  opacity: 0;
}



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

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

@keyframes upShadow {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes downShadow {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes rightAnimation {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0%);
  }
}

@keyframes rightBackAnimation {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }

  to {
    opacity: 1;
    transform: translateX(0%);
  }
}


@keyframes leftBackAnimation {
  from {
    opacity: 1;
    transform: translateX(0%);
  }

  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes leftAnimation {
  from {
    opacity: 1;
    transform: translateX(0%);
  }

  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}