@import "base/variavles"



%icons
  content: ''
  display: inline-block
  vertical-align: middle
  margin-right: 5px
  background-size: cover

header
  font-size: 11pt
  ul
    padding-left: 0
    margin: 0
  background-color: #000
  color: #FFF
  .logo
    float: left
    height: 75px
    display: flex
    align-items: center

  .menu-nav
    display: flex
    justify-content: center
    //align-items: center
    height: 75px
    a, a:hover
      color: #FFF
      text-decoration: none
      padding-left: 4px
    .menu-items
      display: inline-flex
      .count
        display: inline-block
        color: red
        font-family: 'pfbeausanspro-reg', sans-serif
        background: none
        border-radius: 0
        position: inherit
        padding-left: 5px
        padding-bottom: 0
        line-height: 1em
        line-break: auto
      li
        list-style: none
      a
        display: flex
        align-items: center

        height: 75px
        margin-right: 20px
        cursor: pointer
        border-bottom: 3px solid black
        pointer-events: stroke
      .icon_tm1 a:before
        @extend %icons
        width: 26px
        height: 26px
        background: url('#{$static}/img/listMain.png') no-repeat 0 0
      .icon_tm2 a:before
        @extend %icons
        width: 22px
        height: 22px
        background: url('#{$static}/img/listMain.png') no-repeat -26px 0
      .icon_tm3 a:before
        @extend %icons
        width: 24px
        height: 24px
        background: url('#{$static}/img/listMain.png') no-repeat -48px 0
      .icon_tml a:before
        @extend %icons
        width: 27px
        height: 24px
        background: url('#{$static}/img/list4.png') no-repeat center

      .icon_tml a:hover
        border-bottom: 3px solid red
        &:before
          background: url('#{$static}/img/list4tml.png') no-repeat center
          background-size: cover
      .icon_tm1 a:hover
        border-bottom: 3px solid red
        &:before
          background-size: cover
          width: 26px
          background: url('#{$static}/img/listMain2.png') no-repeat 0 0
      .icon_tm2 a:hover
        border-bottom: 3px solid red
        &:before
          width: 22px
          background-size: cover
          background: url('#{$static}/img/listMain2.png') no-repeat -26px 0

      .icon_tm3 a:hover
        border-bottom: 3px solid red
        &:before
          background:
            image: url('#{$static}/img/listMain2.png')
            repeat: no-repeat
            position: -50px 0
          background-size: cover
  .user-nav
    float: right
    height: 75px
    .user-items
      display: flex
      align-items: center
      li
        display: inline-block
        .user-info
          vertical-align: middle
          padding-right: 5px
          a
            display: block
            color: white
            cursor: pointer
            &:hover
              text-decoration: none
              color: #FF0029
          .cash
            text-align: right
            padding-top: 4px
          .icon_hand
            padding-left: 26px
            background:
              image: url("#{$static}/img/icons/icon_hands.png")
              size: 24px 24px
              repeat: no-repeat
            &:hover
              background-image: url("#{$static}/img/icons/icon_hands_red.png")
          .icon_chat
            margin-top: 4px
            padding-left: 26px
            background:
              image: url("#{$static}/img/icons/icon_speach-ball.png")
              size: 18px 18px
              repeat: no-repeat
            &:hover
              background-image: url("#{$static}/img/icons/icon_speach-ball_red.png")
      .imgProfile
        margin: 0 //глушим main.css
        img
          width: 75px
          height: 75px
      .reg, .reg:link, .reg:visited
        color: #fb1818
        font-size: 16px
        text-transform: uppercase
        float: left
        line-height: 75px
        font-family: 'pfdintextcomppro-regular', sans-serif
        letter-spacing: 4px
        text-decoration: none

      .lock
        width: 75px
        height: 75px
        background: url('#{$static}/img/lock.png') no-repeat center, white
        float: right
        cursor: pointer
        margin-left: 20px
        margin-right: 0
      .rating
        display: flex
        align-items: center
        position: relative
        cursor: pointer
        margin-left: 10px

      .ratingInset
        width: 46px
        height: 46px
        border-radius: 100%
        background-color: #FF0027
        display: inline-block
        /* position: absolute; */
        /* left: -1.859px; */
        /* bottom: 3px; */
        clip: rect(0, 22px, 50px, 0)
        transform: rotate(-90deg)

      .iconRating
        width: 46px
        height: 46px
        position: absolute
        left: 0
        top: 0
        background: url('#{$static}/img/button12.png') no-repeat center

      .ratingPer
        color: #ff2c2c
        font-size: 18px
        font-family: 'pfdintextcomppro-regular', sans-serif
        margin: 0
        padding-left: 8px

    .infoProfile
    .btn-group
      .btn
        width: 75px
        height: 75px
        float: left
        border-radius: 0 !important
        background-color: black
        border: none
        span
          color: white
          font-size: 26px
      .dropdown-toggle
        &:hover, &:active, &:focus
          -webkit-box-shadow: inset 0 3px 5px rgba(255, 0, 39, 0.99)
          -moz-box-shadow: inset 0 3px 5px rgba(255, 0, 39, 0.99)
          box-shadow: inset 0 3px 5px rgba(255, 0, 39, 0.99)
          background-color: rgb(255, 0, 39)
    .dropdown-menu
      border-radius: 0
      background-color: black
      left: -174px
      margin: -1px 100% 0 0
      float: left
      width: 250px
      height: auto
      padding: 30px 20px 15px 40px
      border-top: 3px solid #ff2c2c
      li
        display: block
        margin-bottom: 10px
        &:last-child
          margin-bottom: 0
        a
          color: white
          font-size: 17px
          font-family: 'pfbeausanspro-reg', sans-serif
          position: relative
          &:link, &:visited
            color: white
            font-size: 17px
            font-family: 'pfbeausanspro-reg', sans-serif
            position: relative
          &:hover, &:active
            background-color: black !important
            color: #ff2c2c
          span
            content: ''
            position: absolute
            width: 20px
            left: -18px
            top: 4px
      .icon_mm1 a span
        height: 20px
        background-size: cover
        background: url('#{$static}/img/menu.png') no-repeat 0 0
      .icon_mm2 a span
        height: 22px
        background-size: cover
        background: url('#{$static}/img/menu.png') no-repeat 0 -20px
      .icon_mm3 a span
        height: 13px
        background-size: cover
        background: url('#{$static}/img/menu.png') no-repeat 0 -42px
        top: 6px
      .icon_mm4 a span
        height: 20px
        background-size: cover
        background: url('#{$static}/img/menu.png') no-repeat 0 -55px
      .icon_mm5 a span
        height: 20px
        background-size: cover
        background: url('#{$static}/img/menu.png') no-repeat 0 -75px
      .icon_mm6 a span
        height: 20px
        background-size: cover
        background: url('#{$static}/img/menu.png') no-repeat 0 -95px
      .icon_mm7 a span
        height: 20px
        background-size: cover
        background: url('#{$static}/img/menu.png') no-repeat 0 0
      .icon_mm8 a span
        height: 20px
        background-size: contain
        background: url('#{$static}/img/user-5.png') no-repeat 0 0
      .icon_chat a span
        height: 20px
        background:
          image: url("#{$static}/img/icons/icon_speach-ball.png")
          size: contain
          repeat: no-repeat
      .icon_chat a
          display: inline-block
      .circle
        background-color: red
        border-radius: 50%
        width: 30px
        height: 30px
        line-height: 30px
        display: inline-block
        text-align: center

      .icon_mm1 a:hover span
        height: 20px
        background: url('#{$static}/img/menu2.png') no-repeat center !important
        background-size: cover !important
        background-position: 0 0 !important
      .icon_mm2 a:hover span
        height: 22px
        background-size: cover
        background: url('#{$static}/img/menu2.png') no-repeat 0 -20px
      .icon_mm3 a:hover span
        height: 13px
        background-size: cover
        background: url('#{$static}/img/menu2.png') no-repeat 0 -42px
      .icon_mm4 a:hover span
        height: 20px
        background-size: cover
        background: url('#{$static}/img/menu2.png') no-repeat 0 -55px
      .icon_mm5 a:hover span
        height: 20px
        background-size: cover
        background: url('#{$static}/img/menu2.png') no-repeat 0 -75px
      .icon_mm6 a:hover span
        height: 20px
        background-size: cover
        background: url('#{$static}/img/menu2.png') no-repeat 0 -95px
      .icon_mm7 a:hover span
        height: 20px
        background-size: cover
        background: url('#{$static}/img/menu2.png') no-repeat 0 0
      .icon_mm8 a:hover span
        height: 20px
        background-size: contain
        background: url('#{$static}/img/user-4.png') no-repeat 0 0
      .icon_chat a:hover span
        height: 20px
        background:
          image: url("#{$static}/img/icons/icon_speach-ball_red.png")
          size: contain
          repeat: no-repeat