.{newAppName}-tabs
  width 100%
  font-size 18px
  &-content
    //border-top 1px solid main-color01
    .{newAppName}-row-list__item
      padding-top vertical-space
      padding-bottom vertical-space
      @media (max-width: mobile-upper-limit)
        padding-top vertical-space
        padding-bottom vertical-space
        &+.{newAppName}-row-list__item
          border-top none
          padding-top: 0
  &--vertical
    display flex
    .{newAppName}-tabs-navigation
      flex-direction: column
      margin 0
      white-space unset!important
      width 100%
      &-wrapper
        width 34%
        padding-right calc((100% + 20px) / 12)
        border-left 1px solid main-color01
        display inline-table!important
      &__item
        position relative
        display block
        &+.{newAppName}-tabs-navigation__item
          margin-top vertical-space * .5
        &:before
          position absolute
          content ''
          top 0
          left -1px
          width 2px
          height 0
          border-bottom none
          text-shadow 0 0 0
          border-left 2px solid transparent
          transition-timing-function ease-in-out
          transition-duration .2s
          transition-property border, height, text-shadow
        &:hover,
        &:focus,
        &--is-active
          &:before
            height 100%
            border-left-color b2c-purple
      &__item-name
        &:before
          display none
    .{newAppName}-tabs-content
      border-top none
      //padding-left vertical-space * 2
      width 66%
      &__item
        padding-bottom vertical-space * .5
      .rt-font-paragraph
        margin-bottom 5px
        &:not(:first-of-type)
          margin-top vertical-space
  &--centered
    text-align: center
    .{newAppName}-tabs-navigation-wrapper
      display: inline-block
      //border-bottom 1px solid main-color01
      height 35px
      @media (max-width: tablet-upper-limit)
        position relative
        width calc(100% + 40px)
        margin-left -20px
    .{newAppName}-tabs-navigation
      margin-bottom 30px
      //display flex
      //justify-content center
      @media (max-width: tablet-upper-limit)
        width auto
        margin-left 0
        margin-right 0
        overflow-y hidden!important
    .{newAppName}-tabs-navigation__item
      white-space nowrap
    .rt-tabs-content
      border-top none
  .rtk-carousel
    width 100vw
    left -80px
    @media (max-width: tablet-upper-limit)
      left -40px
    @media (max-width: mobile-upper-limit)
      left -20px
    .rtk-carousel__spacer
      @media (max-width: tablet-upper-limit) and (min-width tablet-lower-limit)
        flex-basis 30px

  .rtk-carousel+.rt-container
    @media (max-width: tablet-upper-limit)
      //left -40px
      position relative
    @media (max-width: mobile-upper-limit)
      left -20px

.{newAppName}-tabs-navigation
  display inline-flex
  flex-direction row
  max-width 100%  //calc(100% + 20px)
  //margin-left -(vertical-space)
  //margin-right -(vertical-space)
  scrollbar-width: none
  position relative
  &:after
    content: ''
    position absolute
    bottom 0
    height 2px
    left 0
    width 100%
    background-color b2c-cool-grey
  &::-webkit-scrollbar
    display: none

  .rt-tabs-tablet &
    //display block
    overflow auto
    //overflow-y hidden
    white-space nowrap
    padding-left 40px
    &:after
      //left 40px
      //right 0
      display none
  .rt-tabs-mobile &
    //display block
    overflow auto
    //overflow-y hidden
    white-space nowrap
    padding-left 20px
    &:after
      //left 20px
      //right 0
      display none

.{newAppName}-tabs-navigation-wrapper
  .rt-tabs-tablet &,
  .rt-tabs-mobile &
    width: 100vw
    margin-left calc((100% - 100vw)/2)
    position: relative
    left 0
    &::-webkit-scrollbar
      display: none

.{newAppName}-tabs-navigation__item
  //padding-left vertical-space
  //padding-right vertical-space
  cursor pointer
  z-index 9
  &+&
    margin-left 40px

  .rt-tabs-tablet &
    display inline-block
    position relative
    &:last-child
      padding-right 40px
      &:after
        width calc(100% + 40px - 40px)
    &:first-child
      &:after
        width 100%
        left 0
    &:after
      position absolute
      content: ''
      width calc(100% + 41px)
      left -41px
      bottom 0
      background-color b2c-cool-grey
      height 2px
  .rt-tabs-mobile &
    display inline-block
    position relative
    &:last-child
      padding-right 20px
      &:after
        width calc(100% + 40px - 20px)
    &:first-child
      &:after
        width 100%
        left 0
    &:after
      position absolute
      content: ''
      width calc(100% + 41px)
      left -41px
      bottom 0
      background-color b2c-cool-grey
      height 2px

.{newAppName}-tabs-navigation__item-name
  box-sizing border-box
  text-align inherit
  border none
  outline none
  padding-bottom 12px
  position relative

  &:before
    content ""
    width 0
    height 2px
    text-shadow 0 0 0
    border-bottom 2px solid transparent
    position absolute
    bottom 0
    left 0
    right 0
    border-radius 1px
    transition-timing-function ease-in-out
    transition-duration .2s
    transition-property border, width, text-shadow
    z-index 9
  .{newAppName}-tabs-navigation__item--is-active
    pointer-events: none
  &:hover,
  &:focus,
  .{newAppName}-tabs-navigation__item--is-active &
    &:before
      width 100%
      border-bottom-color b2c-purple

  .{newAppName}-tabs-navigation__item--is-active &
    cursor default

  cursor pointer
.{newAppName}-tabs--round-tablet-view
  .{newAppName}-tabs-navigation__item
    padding-left: 0
    padding-right: 0
    background-color: #fff
    &.{newAppName}-tabs-navigation__item--is-active
      background-color: b2c-purple
    &:after
      display none
    &:last-child
      padding-right: 0
    &+.{newAppName}-tabs-navigation__item
      margin-left: 0
      border-left 2px solid b2c-purple
  .rt-tabs-navigation
    margin-left: 0
    margin-right: 0
    border-bottom none
    padding-left: 0
  .rt-tabs-navigation__item-name
    padding 15px 30px
    &:before
      width: 0!important
    &:hover,
    &:focus
      border-bottom-width: 0
    @media (max-width tablet-upper-limit)
      padding-left 20px
      padding-right 20px
    @media (max-width mobile-upper-limit)
      padding-top 8px
      padding-bottom 8px
  .{newAppName}-tabs-navigation
    overflow: hidden
    &:after
      display none
  .{newAppName}-tabs-navigation-wrapper
    overflow: hidden
    display: inline-block
    border-radius 5px
    border 2px solid b2c-purple
    left 0
    width auto
    background-color: b2c-purple
  .{newAppName}-tabs-navigation__item
    background-color: white
    &+&
      margin-left: -1ex
  .{newAppName}-tabs-navigation__item--is-active
    background-color: b2c-purple
    color #fff
  .{newAppName}-tabs-content
    border-top-width: 0

.rt-tabs
  .rt-card--gradient-shadow
    background-color main-color
    .rt-card__background
      height 100%
      width calc(((100vw - 140px - 20px) / 12 * 10) / 2)
      top 0
      bottom 0
      left 0
      z-index 4
      background-position-x 0
      background-size: cover
      @media (min-width: laptop-lower-limit)
        max-width calc(1320px/12*10/2)
      @media (max-width: tablet-upper-limit)
        width calc(((100vw - 20px - 20px) / 2))
      @media (max-width: mobile-upper-limit)
        width 100%
        height calc(100vw - 40px)
      &:after
        position absolute
        top 0
        left 0
        right 0
        bottom 0
        content ''
        background linear-gradient(to right, rgba(16, 24, 40, 0), rgba(16, 24, 40, 0.23) 33%, rgba(16, 24, 40, 0.67) 63%, rgba(16, 24, 40, 0.9) 85%, #101828);//linear-gradient(to right, rgba(16, 24, 40, 0), rgba(16, 24, 40, 0.23) 17%, rgba(16, 24, 40, 0.67) 22%, rgba(16, 24, 40, 0.9) 42%, #101828 50%, #101828 100%)
        z-index 1
        @media (max-width: mobile-upper-limit)
          background linear-gradient(to bottom, rgba(16, 24, 40, 0), rgba(16, 24, 40, 0.23) 33%, rgba(16, 24, 40, 0.67) 63%, rgba(16, 24, 40, 0.9) 85%, #101828);
    .rt-card__content
      z-index 5
  .rt-card--half-white-plus-image
    //height 490px
    display inline-flex
    flex-direction row-reverse
    background-color b2c-white
    @media (max-width: tablet-upper-limit)
      display flex
      flex-direction column
      height auto
    .rt-card__background
      position relative
      top 0
      left auto
      right 0
      bottom 0
      flex-basis 50%
      background-size cover
      border-radius 0
      @media (max-width: tablet-upper-limit)
        flex-basis calc((100vw - 80px) / 2)
      @media (max-width: mobile-upper-limit)
        flex-basis calc((100vw - 40px) / 1.4)
    .rt-card
      &__content
        padding 70px 0
        max-height 100%
        min-width auto
        flex-basis 50%
        @media (max-width: tablet-upper-limit)
          max-height 50%
          min-height auto
          padding 50px 0 60px
        @media (max-width: mobile-upper-limit)
          flex-basis calc(100% - 200px)
          max-height none
          padding 30px 0
      &__content-triangle
        position absolute
        top 0
        right -100px
        @media (max-width: tablet-upper-limit)
          top -100px
          left 0
          right 0
          transform rotate(180 deg) scale(-1)

.{newAppName}-tabs--fill
  width: 100%
  .{newAppName}-tabs-navigation
    display: flex
  &.{newAppName}-tabs--justify-all-width
    .{newAppName}-tabs-navigation
      justify-content: space-between
.{newAppName}-dark-theme
  .rt-tabs-navigation:after
    background-color b2c-white07
  .rt-tabs-navigation__item-name:hover:before,
  .rt-tabs-navigation__item-name:focus:before,
  .rt-tabs-navigation__item--is-active .rt-tabs-navigation__item-name:before
    border-bottom-color b2c-orange
  .rt-tabs--round-tablet-view .rt-tabs-navigation-wrapper
    border-color b2c-orange
  .rt-tabs--round-tablet-view .rt-tabs-navigation__item--is-active
    background-color b2c-orange
  .rt-tabs--round-tablet-view
    .rt-tabs-navigation__item+.rt-tabs-navigation__item
      border-color b2c-orange