.cart
  input
    box-sizing: border-box

.al-notice
  border: 2px solid $deepblush!important
  .al-delivery--header
    color: $monza!important

.al-delivery
  position: relative
  margin: -10px
  padding: 10px
  padding-left: 92px
  border-radius: 4px
  border: 2px solid $toryblue
  i
    display: inline-block
  
  .al-delivery--header
    display: inline-block
    position: relative
    margin-bottom: 16px
    color: $toryblue
    span
      font-size: 18px
      display: inline-block
      margin-top: 10px
    i
      position: absolute
      top: 0
      left: -84px
  .al-delivery--attention
    display: inline-block
    position: relative
    margin-top: 10px
    color: $monza
    span
      font-size: 18px
      display: inline-block

  .al-delivery--choice
    display: inline-block

  .al-delivery--price
    position: absolute
    top: 20px
    right: 8px
    display: inline-block
    font-weight: bold
    font-size: 18px

  .al-delivery--pickup
    display: inline-block
    vertical-align: top
    padding: 20px 150px 14px 10px
    margin-left: 150px
    margin-bottom: -26px
    position: relative
    top: -35px
    border-left: 1px solid $iron
    border-bottom: 1px solid $iron
    border-radius: 2px
    p
      font-size: 14px
    .al-btn--normal
      font-size: 16px
    
  .al-delivery--address
    position: relative
    margin: 30px 0 15px 0
    strong
      position: absolute
      top: -18px
      left: 0
    a
      position: absolute
      top: -18px
      right: 430px
    input
      width: 430px
      height: 32px

  .al-delivery--compsChoice
    position: relative
    margin-top: 20px
    .al-tooltip
      margin-top: 67px
  .al-delivery--compsChoiceBig
    @extend .al-delivery--compsChoice
    left: -82px

  .al-delivery--compsTable
    display: inline-block
    table
      border-collapse: separate
      border-spacing: 0 2px
      font-weight: bold
      thead
        th
          background-color: $linkwater
          padding: 10px 20px 10px 5px
          font-weight: bold
          &:first-child
            font-size: 16px
          &:last-child
            text-align: right
      tbody
        tr:hover
          cursor: pointer
          background-color: rgba($linkwater, 0.5)
        td
          vertical-align: middle
          padding: 5px 20px 5px 5px
          height: 30px
          border-top: 2px solid $linkwater
          border-bottom: 2px solid $linkwater
          &:first-child
            border-left: 2px solid $linkwater
          &:last-child
            border-right: 2px solid $linkwater
            text-align: right
    span.al-del-osc
      color: $monza
    span.al-del-omniva
      display: inline-block
      vertical-align: top
      color: #ca1c64
      font-style: italic
      font-weight: normal

  .al-delivery__fillInfo
    margin-right: -82px
    table
      width: 940px
      table-layout: fixed
      border-collapse: separate
      border-spacing: 0 2px
      font-weight: bold
      thead
        th
          background-color: $linkwater
          padding: 10px 0
          font-weight: bold
          &:first-child
            font-size: 16px
            width: 195px
            padding-left: 5px
      tbody
        td
          padding: 0
    .al-delivery__fillInfo--compsTable
      table
        width: 200px
        table-layout: auto
      tbody
        tr:hover
          cursor: pointer
          background-color: rgba($linkwater, 0.5)
        td
          position: relative
          vertical-align: middle
          padding: 5px
          height: 38px
          border-top: 1px solid $linkwater
          border-bottom: 1px solid $linkwater
          &:first-child
            border-left: 1px solid $linkwater
            white-space: nowrap
          &:last-child
            border-right: 1px solid $linkwater
            text-align: right
      span.al-del-osc
        color: $monza
      span.al-del-omniva
        display: inline-block
        vertical-align: top
        color: #ca1c64
        font-style: italic
        font-weight: normal

  .al-delivery__fullInfo
    overflow: auto
    overflow-x: hidden
    margin-top: 2px
    margin-left: 15px
    padding-right: 15px
    height: 258px
    box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.50)
    span
      font-size: 10px
      font-weight: normal
      line-height: 1
    strong
      display: block
      white-space: nowrap
      font-size: 12px
    i
      vertical-align: middle
      margin-right: 6px
    table
      font-weight: normal
      table-layout: fixed
      width: 710px
      tbody
        tr:nth-child(odd)
          background-color: rgba($linkwater, 0.3)
        tr:hover
          cursor: pointer
          background-color: $linkwater
        td
          vertical-align: middle
          height: 38px
          padding: 0 0 0 8px!important
          white-space: nowrap
        .al-checked
          background-color: $linkwater!important
          font-weight: bold
          span
            font-weight: bold


  .al-delivery__info
    margin-left: 15px
    margin-top: 10px
    padding: 20px
    background-color: $polar
    font-size: 12px


  .al-info__pair
    display: inline-block
    margin-bottom: 16px
    margin-right: 10px
    label
      margin: 3px 0
      font-weight: normal
    input
      font-size: 12px
    .al-info--city
      width: 110px
    .al-info--street
      width: 190px
    .al-info--flat
      width: 90px
    .al-info--index
      width: 90px
    .al-info--country
      width: 140px


  .al-delivery__save
    display: inline-block
    margin-top: 8px
    padding: 5px 5px 5px 10px
    background-color: $polar
    float: right
    span
      display: inline-block
      vertical-align: middle
      margin-right: 30px
      font-size: 12px
      font-weight: lighter 

.al-delivery--active
  background-color: $linkwater
  position: relative
  &:hover
    background-color: $linkwater!important
  td:last-child
    &:after
      position: absolute
      top: -2px
      right: -12px
      content: ' '
      width: 0
      height: 0
      border-top: 26px solid transparent
      border-bottom: 26px solid transparent
      border-left: 12px solid $linkwater

.al-hidden
  cursor: not-allowed!important
  &:hover
    background-color: transparent!important
  td
    position: relative
    border-color: rgba($alto, 0.2)!important
    &:after
      content: " "
      z-index: 10
      display: block
      position: absolute
      height: 100%
      top: 0
      left: 0
      right: 0
      background: rgba(white, 0.8)


.al-tooltip
  display: inline-block
  font-size: 14px
  line-height: 24px
  vertical-align: top
  position: relative
  margin-left: 40px
  margin-top: -5px
  background-color: $alto
  padding: 8px
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.5)
  &:before
    position: absolute
    top: 0
    left: -16px
    content: ' '
    width: 0
    height: 0
    border-top: 20px solid transparent
    border-bottom: 20px solid transparent
    border-right: 16px solid $alto

// ################################

i.al-delivery-icon-newTab
  margin: 0 2px
  position: relative
  bottom: -1px

.al-code__discount
  display: inline-block
  vertical-align: top
  background-color: $wildsand
  padding: 6px 16px 6px 6px
  font-size: 14px
  line-height: 1.5
  i
    display: inline-block
    margin-right: 5px
  .al-delivery-icon-plus
    position: relative
    bottom: -3px
  .al-input
    margin-top: 6px
    display: block
    padding-left: 22px
    input
      padding: 6px !important
      font-size: 16px !important
    input[type="text"]
      width: 130px
      height: 18px
    input[type="button"]
      padding: 0 13px !important
      display: inline-block
      vertical-align: bottom
      height: 32px
    a
      display: inline-block
      margin: 6px 0
      float: right
    strong
      display: inline-block
      margin: 5px 0 6px 0
      margin-right: 5px
    span
      font-style: italic

// ################################
// width sum must be 710
.al-filler
  width: 15px
.al-fillInfo--adress
  width: 130px
.al-fillInfo--point
  width: 280px
.al-fillInfo--km
  width: 60px
.al-fillInfo--deltime
  width: 90px
.al-fillInfo--price
  width: 70px
.al-fillInfo__btn
  width: 80px

.al-circle
  display: inline-block
  text-align: center
  border-radius: 50%

.al-circle--error
  background-color: $monza
.al-circle--success
  background-color: $greenhaze

.al-circle--s
  @extend .al-circle
  /* width, height and line-height can be anything, as long as they're equal */
  width: 22px
  height: 22px
  line-height: 22px
  font-size: 16px
  background-color: $wildsand

.al-circle--m
  @extend .al-circle
  width: 32px
  height: 32px
  line-height: 32px
  color: white
  font-size: 16px
  
.al-circle--l
  @extend .al-circle
  width: 42px
  height: 42px
  line-height: 42px
  color: white
  font-size: 16px