.{b2bAppName}-popup-wrapper
  //display none
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  width 100vw
  height 100vh
  //z-index 999
  transition background-color .4s .6s linear
  opacity 0
  background-color transparent
  z-index -1
  &--active
    background-color rgba(255, 255, 255, .75)
    //top 0
    opacity 1
    z-index 999
    .{b2bAppName}-popup
      &--center-center
        transform translateY(-50%)
        top 50vh
        height auto
        @media (max-width: tablet-upper-limit)
          top calc(50vh + 40px)
        @media (max-width: mobile-upper-limit)
          top calc(50vh + 20px)
      &--top-center
        top 0
        max-height calc(100% - 100px)
      &--bottom-center
        top 100vh
        transform translateY(-100%)
        max-height 70vh
        //@media (max-width: tablet-upper-limit)
        //  //top 40px
        //  max-height calc(100vh - 40px)
        @media (max-width: mobile-upper-limit)
          //top 20px
          max-height calc(100vh - 20px)
  &--mobile-only
    @media (min-width: desktop-lower-limit)
      display none

.{b2bAppName}-popup
  position relative
  width 100%
  height auto
  max-height 80vh
  padding 60px
  display inline-block
  background-color b2c-white
  box-sizing border-box
  box-shadow 0 20px 30px rgba(main-color, .2)
  overflow-y auto
  //bottom 100vh
  top -100vh
  transition top .4s ease-in-out
  @media (max-width: desktop-upper-limit)
    padding 40px 20px
  @media (max-width: tablet-upper-limit)
    max-height: calc(100vh - 40px)
  @media (max-width: mobile-upper-limit)
    max-height: calc(100vh - 20px)
    padding-top 45px
  &-close
    position absolute
    top 10px
    right 10px
    cursor pointer
    z-index 9

  .popup-content
    @media (max-width: tablet-upper-limit)
      padding-bottom: 100px

  //.rt-annotation__content
  //  max-height none!important
  @media (max-width: tablet-upper-limit)
    .rt-tabs-navigation-wrapper
      width 100%
      margin-left 0

    .rt-tabs-navigation
      padding-left 0