@import "base/variavles"
@import "modules/mods"
@import "base/colors"

%icons
  margin-left: 0
  display: inline-flex
  align-items: center
  &:before
    content: ''
    display: inline-block
    width: 20px
    height: 20px
    background-size: cover
    position: relative
    left: -5px

ul.nav li.active
  border-top: 2px solid black

.contractor-notes-block, .team-notes-block, .order-notes-block
  text-align: left
  padding-left: 45px
  font-family: Arial, Verdana, Helvetica, sans-serif

.team-block
  a:visited, a:link
    color: #a8a8a8
  a.my-group
    color: #3d3d3d
  a:hover
    color: black

ol
  li
    display: list-item
    list-style: decimal inside
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis
    max-width: 180px

.note-wrapper
  position: relative

.modal-header
  text-align: center

.fix-wrapper
  width: 100%
  padding-left: 15px
  padding-right: 15px

.switch
  padding-left: 15px

// Системное сообщение
.systemChat
  background-color: #ffe9ed

// Chat message
.insetCommChat
  .message-header
    padding-top: 10px
    padding-bottom: 5px
    .sender_name
        display: inline-block
        font-weight: bold
    .created
      display: inline-block
      margin-left: 15px
  .message-body
    word-wrap: break-word
    max-width: 500px

  .invite
    white-space: nowrap
    .group_name
      display: inline-block
      overflow: hidden
      text-overflow: ellipsis
      max-width: 150px
    .btn.btn-chat
      display: inline-block
      padding: 5px 10px
      font-size: 12pt
      border: 1px solid #BEBEBE
      margin-left: 5px
      margin-right: 5px
      &:hover
        color: #4e4c4c
      &:visited, &:link
        color: #0b0b0b

.numberStepp
  border-bottom: 1px solid #CFCFCF
  &:last-child
    border-bottom: none

.review-type
  margin-bottom: 10px
  .alignleft
    float: left
    //width: 33%
    text-align: left

  .aligncenter
    float: left
    //width: 33%
    text-align: center

  .alignright
    float: right
    //width: 33%
    text-align: right

.chat-button
  transition: all 0.3s
  width: 100%
  background-color: #f1f1f1
  text-transform: uppercase
  color: #373737
  //display: inline-block
  font-family: "pfdintextcomppro-regular", sans-serif
  font-size: 18px
  letter-spacing: 1px
  margin-bottom: 5px
  &:visited, &:link
    color: #373737
  &:hover
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.8)
    transform: scale(1.04)
  //color: #7e7e7e
  padding: 25px 30px
  &.icon-hand
    @extend %icons
    &:before
      width: 25px
      height: 25px
      background:
        image: url("#{$static}/img/icons/icon_hands_gray.png")
        size: 24px 24px
        repeat: no-repeat
  &.icon-books
    @extend %icons
    &:before
      width: 30px
      height: 25px
      background:
        image: url("#{$static}/img/icons/icon_books.png")
        size: 30px 25px
        repeat: no-repeat
  &.icon-print
    @extend %icons
    &:before
      width: 30px
      height: 25px
      background:
        image: url("#{$static}/img/icons/icon_print.png")
        size: 30px 25px
        repeat: no-repeat
  &.icon-change
    @extend %icons
    &:before
      width: 24px
      height: 24px
      background:
        image: url("#{$static}/img/icons/icon_edit.png")
        size: 24px 24px
        repeat: no-repeat
  &.icon-credit_card
    @extend %icons
    &:before
      width: 25px
      height: 28px
      background:
        image: url("#{$static}/img/icons/icon_credit_card_gray.png")
        size: 25px 28px
        repeat: no-repeat
  &.icon-arbitration
    @extend %icons
    &:before
      width: 25px
      height: 28px
      background:
        image: url("#{$static}/img/icons/icon_arbitration.png")
        size: 25px 28px
        repeat: no-repeat

  &.icon-complete_stage
    @extend %icons
    &:before
      width: 25px
      height: 28px
      background:
        image: url("#{$static}/img/icons/icon_complete_stage.png")
        size: 25px 28px
        repeat: no-repeat

  &.icon-close_chat-positive
    @extend %icons
    &:before
      width: 22px
      height: 20px
      background:
        image: url("#{$static}/img/closeChat1.png")
        size: 20px 20px
        repeat: no-repeat

  &.icon-close_chat-negative
    @extend %icons
    &:before
      width: 22px
      height: 20px
      background:
        image: url("#{$static}/img/closeChat2.png")
        size: 20px 20px
        repeat: no-repeat

  &.icon-check
    @extend %icons
    &:before
      width: 25px
      height: 25px
      background:
        image: url("#{$static}/img/icons/icon_check.png")
        size: 25px 25px
        repeat: no-repeat

a.btn.btn-send
  transition: all 0.3s
  padding: 4px 25px !important
  background-color: white
  border: 1px solid #BEBEBE
  border-radius: 40px
  &:hover
    //transform: scale(1.04)
    //box-shadow: 0 0 15px rgba(0, 0, 0, 0.2)
    background-color: #e6e6e6
    border-color: #adadad
  &.icon-send
    @extend %icons
    &:before
      width: 20px
      height: 20px
      background:
        image: url("#{$static}/img/icons/icon_arrow_gray.png")
        size: 20px 20px
        repeat: no-repeat

.upload-new p
  font-family: 'pfdintextcomppro-regular', sans-serif !important
  font-size: 15px !important
  letter-spacing: 1px !important

.icon-protect
  display: inline-block
  @extend %icons
  &:before
    width: 18px
    height: 20px
    left: 0
    background:
      image: url("#{$static}/img/icons/icon_protect.png")
      size: 18px 20px
      repeat: no-repeat

.icon-note
  display: inline-block
  @extend %icons
  &:before
    width: 30px
    height: 20px
    left: 0
    background:
      image: url("#{$static}/img/icons/icon_hand_pen.png")
      size: 20px 20px
      repeat: no-repeat

.linkChat11:hover > .glyphicon-info-sign
  color: red

.stage-data
  padding-left: 3px
  background-color: #f1f1f1
  color: #8c8c8c
  font-size: 12px

.stage-header
  white-space: nowrap

.annotate
  padding-top: 5px
  color: #8c8c8c
  font-size: 12px

.stage-status
  font-style: italic
  color: #5e5e5e

.stages-paid
  li
    padding-left: 25px
    margin-top: 15px
  .text
    padding-left: 10px
  .reserved
    //display: inline-block
    @extend %icons
    &:before
      width: 25px
      height: 25px
      background:
        image: url("#{$static}/img/icons/icon_coins_green.png")
        size: 25px 25px
        repeat: no-repeat

  .unreserved
    //display: inline-block
    color: #FD010E
    @extend %icons
    &:before
      width: 25px
      height: 25px
      background:
        image: url("#{$static}/img/icons/icon_coins_red.png")
        size: 25px 25px
        repeat: no-repeat
  .closed
    //display: inline-block
    @extend %icons
    &:before
      width: 25px
      height: 25px
      background:
        image: url("#{$static}/img/icons/icon_coins_gray.png")
        size: 25px 25px
        repeat: no-repeat

.border
  border-top: 1px solid #CFCFCF
  position: relative
  height: 20px
  margin-top: 10px
  .bird
    position: absolute
    border: 30px solid transparent
    border-top: 15px solid #CFCFCF
    top: 0
    left: 50%
    margin-left: -30px
    &:before
      content: ''
      display: block
      position: absolute
      border: 30px solid transparent
      border-top: 15px solid white
      top: -16px
      left: 50%
      margin-left: -30px

.select
  color: #FD010E

.note
  color: #FD010E
  padding-top: 10px
  font-size: 12px

//Team
.team-block
  .team-user-list
    overflow-y: auto
    display: -webkit-box
    line-height: 16px
    max-height: 64px
    hyphens: none

  .max-rows
    overflow-y: hidden
    display: -webkit-box
    line-height: 16px
    max-height: 32px

  .icon-hand
    @extend %icons
    &:before
      width: 25px
      height: 25px
      background:
        image: url("#{$static}/img/icons/icon_hands_gray.png")
        size: 24px 24px
        repeat: no-repeat

  a
    cursor: crosshair
    &:visited
      color: #333333
    &:hover
      color: black

a.docs
  &-more, &-less
    font-style: italic
    color: #{map_get($component_colors, select)}
    cursor: pointer
    &:hover
      color: darken(#FD010E, 25%)
      box-shadow: none

  &-more:before
    content: '...Развернуть'
  &-less:before
    content: '...Cвернуть'

.remove-note
  position: absolute
  width: 11px
  height: 11px
  background: url('../img/delDoc.png') no-repeat center
  background-size: cover
  right: -20px !important
  top: 2px
  cursor: pointer