.browser-IE .rt-card,
.rt-card__content
  min-height inherit

.{newAppName}-card
  display flex
  z-index: 1
  flex 1
  flex-direction column
  align-self stretch
  width 100%
  min-height min-content
  overflow hidden
  transform: translate3d(0, 0, 0)
  backface-visibility: hidden
  color main-color
  background-position-x center
  background-position-y center
  background-repeat no-repeat
  border-radius 10px
  position relative
  box-shadow card-shadow--before-hovered
  transition-timing-function ease-in-out
  transition-duration .2s
  transition-property box-shadow
  &:hover
    @media (hover: hover) {
      box-shadow card-shadow--hovered
    }

  &--custom-height
    min-height initial

  &--has-discount
    margin-top: 50px
    max-height calc(100% - 50px)

  &__border-content
    border-top 1px solid main-color01
    padding-top vertical-space * .5
    padding-left horizontal-space
    padding-right horizontal-space

  &--has-bg-cover
    background-color transparent

  &--transparent
    background-color transparent

  @media (max-width: mobile-upper-limit)
    flex-direction column

  @media (min-width: tablet-lower-limit)
    min-height 364px

  &--has-white-color
    color #fff

  &--has-smoke
    &:before
      content ""
      background-color rgba(0, 0, 0, .5)
      border-radius 10px
      position absolute
      top 0
      bottom 0
      left 0
      right 0
      z-index 2

  &--has-smoke03
    &:before
      content ""
      background-color rgba(0, 0, 0, .3)
      border-radius 10px
      position absolute
      top 0
      bottom 0
      left 0
      right 0
      z-index 2

  &--has-smoke02
    &:before
      content ""
      background-color rgba(0, 0, 0, .2)
      border-radius 10px
      position absolute
      top 0
      bottom 0
      left 0
      right 0
      z-index 2

  &__background
    background-color white
    background-position-x center
    background-position-y center
    background-repeat no-repeat
    border-radius 10px
    position absolute
    top -20px
    bottom -20px
    left -20px
    right -20px
    z-index 1

    .{newAppName}-card-purple &
      background-color b2c-purple

    .{newAppName}-card-purple-low &
      background-color b2c-purple-low

    .{newAppName}-card-purple-high &
      background-color b2c-purple-high

    .{newAppName}-card-red &
      background-color b2c-red

    .{newAppName}-card-red-low &
      background-color b2c-red-low

    .{newAppName}-card-red-high &
      background-color b2c-red-high

    .{newAppName}-card-dark-blue &
      background-color b2c-dark-blue

    .{newAppName}-card-dark-blue-low &
      background-color b2c-dark-blue-low

    .{newAppName}-card-dark-blue-high &
      background-color b2c-dark-blue-high

    .{newAppName}-card-light-blue &
      background-color b2c-light-blue

    .{newAppName}-card-light-blue-low &
      background-color b2c-light-blue-low

    .{newAppName}-card-light-blue-high &
      background-color b2c-light-blue-high

    .{newAppName}-card-yellow &
      background-color b2c-yellow

    .{newAppName}-card-yellow-low &
      background-color b2c-yellow-low

    .{newAppName}-card-yellow-high &
      background-color b2c-yellow-high

    .{newAppName}-card-orange &
      background-color b2c-orange

    .{newAppName}-card-orange-low &
      background-color b2c-orange-low

    .{newAppName}-card-orange-high &
      background-color b2c-orange-high

    .{newAppName}-card-pink &
      background-color b2c-pink

    .{newAppName}-card-pink-low &
      background-color b2c-pink-low

    .{newAppName}-card-pink-high &
      background-color b2c-pink-high

    .{newAppName}-card-green &
      background-color b2c-green

    .{newAppName}-card-green-low &
      background-color b2c-green-low

    .{newAppName}-card-green-high &
      background-color b2c-green-high

    .{newAppName}-card-black &
      background-color dark-card-background

    .{newAppName}-card-slate &
      background-color b2b-state

    .{newAppName}-card-dark-slate &
      background-color b2b-dark-state

    .{newAppName}-card-light-grey &
      background-color light-grey

    &--position-background-top
      background-position-x center
      background-position-y top

    &--position-background-right
      background-position-x calc(100% - 40px)
      background-position-y center

    &--position-background-bottom
      background-position-x center
      background-position-y bottom

    &--position-background-left
      background-position-x 40px
      background-position-y center

    &--position-background-top-right
      background-position-x calc(100% - 40px)
      background-position-y top

    &--position-background-bottom-right
      background-position-x calc(100% - 40px)
      background-position-y bottom

    &--position-background-bottom-left
      background-position-x 40px
      background-position-y bottom

    &--position-background-top-left
      background-position-x 40px
      background-position-y top

    .{newAppName}-card--has-bg-repeat &
      background-repeat repeat

    .{newAppName}-card--has-bg-cover &
      background-size cover

    @media (max-width: mobile-upper-limit)
      .rt-card--hide-background-on-mobile &
        background-image inherit !important

  &__stand-alone-background
    background-size cover
    background-repeat no-repeat
    position absolute
    top 0
    bottom 0
    right 0
    z-index 2

    @media (max-width: mobile-upper-limit)
      width 100% !important
      height 100% !important
      max-height 40vw !important
      background-position center center
      background-size contain
      margin-top vertical-space
      position relative
      top 0 !important
      bottom 0 !important
      left 0 !important
      right 0 !important

  &__content
    display flex
    flex-direction column
    width 100%
    min-width 100%
    min-height auto
    padding vertical-space 0
    position relative
    z-index 3

    @media (min-width: tablet-lower-limit)
      min-height 364px

    &--has-custom-height
      @media (max-width: mobile-upper-limit)
        display flex
        min-height auto

    .rt-col-6 &
      min-width 50%

    &--has-offset-top
      padding-top vertical-space * 9

  &__body
    flex 1 0 auto
    padding-left horizontal-space
    padding-right horizontal-space

    &--is-empty
      @media (max-width: mobile-upper-limit)
        display none

    &--is-static
      flex 0
      flex-grow 0 !important

  &__footer
    padding-left horizontal-space
    padding-right horizontal-space

  &__header
    flex 0 0 auto
    padding-left horizontal-space
    padding-right horizontal-space

    &__image
      max-width 100%

    &>*
      hyphens auto

  &__bottom-list
    border-top 1px solid main-color01
    margin-top vertical-space * 1.5
    padding-top vertical-space
    padding-left horizontal-space
    padding-right horizontal-space

  &-img
    max-width 100%

  &-text
    letter-spacing .18px

  &-list
    &__item
      display flex
      flex-direction row

      & + &
        padding-top vertical-space

    &__icon
      width 56px

    &__name
      display flex
      flex 1 0 auto
      flex-direction row
      align-items center
      width calc(100% - 56px)
      padding-left horizontal-space * .5

  &__popup-benefits,
  &__popup-costs
    display none

.{newAppName}-card-image
  flex-direction column
  background-color transparent

  &__content
    flex 1
    background-color white
    padding-top vertical-space

  .rt-card__body
    padding-bottom vertical-space

  &__figure
    flex 0
    width 100%
    height 364px
    min-height 364px
    background-position center
    background-size cover

  &-list
    border-top 1px solid card-list-border
    border-bottom 1px solid card-list-border
    padding-top vertical-space * .5
    padding-bottom vertical-space * .5
    padding-left horizontal-space
    padding-right horizontal-space

    &--without-top-border
      border-top-width 0

    & + &
      margin-top -1px

    &--has-icon
      display flex
      flex-direction row
      align-items center

      &__icon
        width 55px + horizontal-space * .5
        box-sizing border-box
        padding-right horizontal-space * .5

  .{newAppName}-card-image-list:last-child
    border-bottom-width 0

.{newAppName}-card-buy
  min-height inherit
  background-color b2c-white
  position relative

.{newAppName}-card-buy__info
  position relative

.{newAppName}-card-buy__form
  width 100%
  background-color b2c-white
  opacity 0
  visibility hidden
  position absolute
  top -50%
  left 0
  right 0
  z-index 2
  transition-timing-function ease-in-out
  transition-duration .2s
  transition-property top, opacity, visibility, max-height
  .rt-close
    right: 20px
    top: 20px
    position: absolute
    cursor: pointer
    transition-timing-function ease-in-out
    transition-duration .4s
    transition-property transform
    z-index: 2
    &:hover
      transform rotate(180deg)
  .rt-card-buy__form-horizontal &
    max-height 0
    max-height 0
    overflow hidden
    background-color transparent
    top 0
    transition-property opacity, visibility, max-height
    animation none

  .rt-card-buy__form-horizontal.{newAppName}-card-buy--show-form &
    max-height 2000px
    position relative

  .{newAppName}-card-buy--show-form &
    opacity 1
    visibility visible
    position relative
    top 0
    animation .4s showCardForm linear

  .{newAppName}-card-buy--show-form.rt-card-buy--is-horizontal &
    max-height 3000px
    animation none

.{newAppName}-card-buy__content
  min-height 300px
  position relative
  top 0
  left 0
  right 0
  transition-timing-function ease-in-out
  transition-duration .2s
  transition-property top, opacity, max-height

  .{newAppName}-card-buy--show-form &
    display none
    max-height 0
    overflow hidden
    opacity 0
    position absolute
    top -100%
    animation .4s hideCardContent linear

  .rt-card-buy--is-horizontal &
    max-height 2000px
    overflow hidden
    top 0
    animation none

  .{newAppName}-card-buy--show-form.rt-card-buy--is-horizontal &
    max-height 0
    opacity 0
    top 0
    animation none

@keyframes showCardForm
  0%
    opacity 0
    position absolute
    top -50%

  50%
    opacity .5
    position relative
    top -25%

  99%
    opacity 1
    position relative
    top 0

  100%
    opacity 1
    top 0

@keyframes hideCardContent
  0%
    opacity 1
    position relative
    top 0

  50%
    opacity .5
    position relative
    top 0

  99%
    opacity 0
    position relative
    top -50%

  100%
    opacity 0
    position absolute
    top -50%

.{newAppName}-card-buy__image
  width 100%
  background-position center
  background-size contain
  background-repeat no-repeat

.card-long__image
  max-width 100%
  max-height 160px

.{newAppName}-tariff-card
  box-shadow 0 2px 4px 0 rgba(0,0,0,0.5)
  overflow: visible
  padding: 20px
  background-color: #fff
  .{newAppName}-dark-theme &
    background-color: main-color
    color b2c-white09


.tariff-cards-background
  background-color: #E3E8EC

.tariff-cards-test
  .rt-price__value
    font-size: 50px
    font-weight: 500


.{newAppName}-tariff-card-icons
  @media (min-width: desktop-lower-limit)
    height: 61px

.{newAppName}-card-seal
  position: absolute
  right: 0
  top: 0

.{newAppName}-card-discount
  right: -15px
  top: 15px
  position: absolute
.{newAppName}-card-discount__value
  position: absolute
  color: #fff
  font-size: 16px
  top: 4px
  left: 0
  right: 0
  text-align: center