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

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

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

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

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

.review-type
  .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: 20px
      height: 24px
      background:
        image: url("#{$static}/img/icons/icon_edit.png")
        size: 20px 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-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: 5px 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)
  &.icon-send
    @extend %icons
    &:before
      width: 25px
      height: 25px
      background:
        image: url("#{$static}/img/icons/icon_arrow_gray.png")
        size: 24px 24px
        repeat: no-repeat

.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_pen_black.png")
      size: 20px 20px
      repeat: no-repeat

.stage-data
  padding-left: 3px
  background-color: #f1f1f1
  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: 12px solid #CFCFCF
    top: 0
    left: 50%
    margin-left: -30px
    &:before
      content: ''
      display: block
      position: absolute
      border: 30px solid transparent
      border-top: 12px solid white
      top: -13px
      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
    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