.al-spc
  position: relative
  width: 100%
  height: 100%
  margin-top: 40px
  margin-bottom: 30px
  // @include smart
  //   margin-top: 18px
  @include clearfix
  h3
    max-width: 80%

.al-errorCode
  margin-left: 10px
  margin-bottom: 500px

.al-spcBack
  position: absolute
  top: 0
  right: 0
  overflow: visible
  background-image: url('../images/back_button.png')
  background-repeat: no-repeat
  background-size: 100% 100%
  a
    color: $wildblueyonder
    padding: 9px 10px 10px 14px
    display: inline-block
    font-size: 16px
    text-decoration: none
    border: none
    &:hover
      color: darken($wildblueyonder, 15%)
.al-spcHeader__info
  width: 100%
  margin-bottom: 30px
  h1
    position: relative
    margin-bottom: 10px
  .al-spcBack
    display: inline-block
    position: relative
    top: 0px
    a
      padding: 0 10px 0 14px
      position: relative
      top: -4px
  .al-infoBlock
    margin-left: 10px
    .al-infoBlock--column
      display: inline-block
      margin-right: 10px
      padding: 0 5px
      vertical-align: top
      position: relative
      max-width: 280px
      &:first-child
        padding: 0
        padding-right: 5px

    .al-text--ellipsis
      white-space: nowrap
      overflow: hidden
      text-overflow: ellipsis
    .al-text--clip
      white-space: normal
      overflow: visible
      text-overflow: clip
    h4
      line-height: 1.3
    h5
      cursor: pointer
      position: relative
      padding-top: 10px
      padding-right: 26px
      padding-bottom: 12px
    i
      position: absolute
      right: 0
      top: 0

  .al-infoBlock--more
    margin-top: 10px
    font-size: 12px
    h4
      margin-bottom: 2px
    // .al-infoBlock--column:nth-child(even)
    //   background-color: $mystic

.al-infoBlock--showMore
  cursor: pointer
  color: $wildblueyonder
  i
    position: relative
    // top: 0
    left: 6px
    display: inline-block
    font-size: 20px
  span
    display: inline-block
    vertical-align: top
    border-bottom: 1px solid rgba($wildblueyonder, 0.25)
    &:hover
      border-bottom: 1px solid white

.al-spcHeader__info--s
  margin-bottom: 10px
  overflow: hidden
  @include clearfix
  img
    float: left
    border-radius: 5px
    margin-right: 10px
  h2
    font-size: 18px
    padding-right: 30px
    margin-right: 30px
    width: 100%
  div
    @include clearfix
  table
    margin-top: 15px
    width: 100%
    font-size: 14px
    display: none
    td
      vertical-align: top
      padding: 2px
    td:first-child
      width: 112px
      text-align: right
    td:last-child
      padding-left: 10px
  i
    position: absolute
    top: 10px
    right: -2px
    cursor: pointer

.al-spcHeader__info--d
  width: 85%
  padding-bottom: 20px
  margin-bottom: 20px
  line-height: 1.3
  @include clearfix
  img
    float: left
    border-top-left-radius: 5px
    margin-right: 20px
    // @include smart
    //   border-radius: 5px
  h2
    font-size: 22px
    font-weight: bold
    padding-bottom: 5px
  span
    display: block
  strong
    padding-right: 8px

.al-spcGroups
  width: 100%
  height: 100%
  min-height: 700px
  @include clearfix
  h3
    max-width: initial

.al-spcGroups__search
  width: 100%
  float: left
  vertical-align: top
  // @include tablet
  //   width: 35%
  //   max-width: 300px
  // @include desktop
  width: 295px
  h3
    font-size: 20px
    line-height: 1.5
    font-weight: bold
    margin-bottom: 5px
    margin-left: 10px
  form
    padding: 10px
    background-color: $mystic
    input
      width: 100%
      border-radius: initial
      &:focus
        border-radius: initial
  em
    background-color: $gold

.al-spcGroups__searchTabList
  ul
    list-style-type: none
    margin: 0
    padding: 0
  li
    display: inline-block
    cursor: pointer
    padding: 8px 10px
    font-size: 18px
    &:first-child
      border-top-left-radius: 4px
  .al-active
    color: $monza
    background-color: $mystic

.al-tab
  display: none

.al-tab--active
  display: inline // ie fix
  display: initial

.al-spcGroups__list
  float: left
  // @include tablet
  //   width: 65%
  //   padding-left: 24px
  // @include desktop
  width: 75%
  height: 100%
  min-height: 700px
  background: url('../images/vinlandcontent/lincoln.png') no-repeat
  background-position: 20% 90%
  position: relative
  h3
    margin-left: 175px
    margin-top: 40px
    font-size: 20px
    font-weight: bold
  span
    margin-left: 175px
    display: block
    font-size: 18px
    line-height: 1.3
  img
    position: absolute
    top: 88px
    left: 10px

.al-spcGroups__nodes
  float: left
  width: 75%
  margin-top: 15px
  padding: 0 12px
  h2
    font-size: 20px
    font-weight: bold
    margin-top: 40px
    margin-bottom: 20px

.al-spcGroup
  position: relative
  border: 1px solid $mystic
  float: left
  margin: 10px 0
  margin-left: 14px
  border-radius: 5px
  width: 210px
  height: 200px
  padding: 10px
  cursor: pointer

  &:hover
    box-shadow: 0 0 10px 1px rgba($wildblueyonder, 0.75)
    a
      color: $monza
      border-bottom: 1px solid white!important
  img
    margin-bottom: 10px
    max-width: 200px
  a
    color: black
    border-bottom: 1px solid darken(white, 25%)
    line-height: 1
    font-size: 20px
  h5
    position: absolute
    bottom: 15px
    left: 10px
    right: 10px
    background-color: white
    padding-top: 5px

.al-spcNode
  margin-bottom: 10px
  position: relative
  border: 1px solid $mystic
  border-radius: 5px
  width: 100%
  padding: 10px
  cursor: pointer
  &:hover
    border-bottom: 1px solid transparent!important
    text-decoration: none
    box-shadow: 0px 5px 15px 0px rgba($wildblueyonder, 0.75)
  img
    margin-bottom: 10px
    max-width: 200px
    display: inline-block
    vertical-align: top
  .al-spcNode--info
    display: inline-block
    width: 80%
    margin-left: 10px
    h3
      font-size: 18px
      padding: 0
      margin-bottom: 6px
    h4
      font-size: 14px
      padding: 0
      margin-bottom: 6px
      color: $gray
    ul
      list-style: none
      margin-bottom: 6px
    li
      padding: 4px 0
    .al-info--nmr
      display: inline-block
      vertical-align: top
      width: 24px
      margin-right: 10px
      color: $gray
      font-size: 14px
    .al-info--text
      display: inline-block
      font-size: 14px
      max-width: 90%
    a
      margin-left: 38px
      font-size: 14px
      margin-bottom: 6px
      color: black
      border-bottom: 1px solid $mystic

  // a
  //   color: black
  //   border-bottom: 1px solid darken(white, 25%)
  //   line-height: 1
  //   font-size: 20px
  // h5
  //   position: absolute
  //   bottom: 15px
  //   left: 10px
  //   right: 10px
  //   background-color: white
  //   padding-top: 5px

.al-brands--header
  margin-left: 30px

.al-marksList
  // width: 100%
  // overflow: auto
  // padding-bottom: 20px
  // @include clearfix
  margin-left: 30px
  margin-bottom: 20px
  ul
    margin: 0 10px
    display: inline-block
    vertical-align: top
    min-width: 230px
    &:first-of-type
      min-width: 200px
  li
    line-height: 2
    font-size: 20px
  a
    display: inline-block
    margin-left: 30px
    position: relative
    color: black
    line-height: 1.1
    // border-bottom: 1px solid $mystic
    &:hover
      color: $monza
      border-bottom: 1px solid rgba(white, 0.25)!important
  img
    display: inline-block
    position: absolute
    left: -32px
    top: -2px
  i
    display: inline-block
    position: absolute
    left: -32px
    top: -2px
    // width: 24px
    // height: 24px
// .al-marksGlobal
//   svg
//     color: $monza
//     margin-left: 5px
//     width: 10px
//     height: 10px

// .al-marksList-col
//   float: left
//   width: 25%
//   height: 100%
//   padding-top: 15px
//   dl
//     font-size: 20px
//     line-height: 1.5
//   dt
//     clear: both
//     float: left
//     color: darken(white, 30%)
//     width: 30px
//     line-height: 2
//   dd
//     margin-left: 30px
//     line-height: 2
//   ul li:last-child
//     padding-bottom: 10px
//   span
//     display: inline-block
//     line-height: 1.1
//     border-bottom: 1px solid $mystic
//     color: black
//     cursor: pointer
//     position: relative
//     &:hover
//       color: $monza
//       border-bottom: 1px dashed $monza
//   a
//     display: inline-block
//     position: relative
//     color: black
//     line-height: 1.1
//     border-bottom: 1px solid $mystic
//     &:hover
//       color: $monza
//       border-bottom: 1px solid rgba(white, 0.25)!important

// .al-marksList-col--brands
//   @extend .al-marksList-col
//   i
//     display: inline-block
//     position: absolute
//     left: -32px
//     top: -2px
//   dt
//     width: 70px
//   dd
//     margin-left: 70px

.al-spcInfo
  width: 50%
  float: left
  h4
    font-size: 20px
    line-height: 24px
    padding-bottom: 10px

.al-spcInfo__block
  padding: 10px
  line-height: 22px
  border: 1px solid $mystic
  border-radius: 10px
  &:hover
    background-color: $mystic
    cursor: pointer
  @include clearfix
  .al-spcInfo--number
    float: left
    padding-right: 10px
    font-size: 16px
    font-weight: bold
  .al-spcInfo--name
    float: left
    width: 70%
    font-size: 16px
    padding-right: 5px
  .al-spcInfo--price
    float: right
    text-align: right
    line-height: 22px
    strong
      display: block
  .al-spcInfo--amount
    float: right
    font-style: bold
    width: 100px
    span:first-of-type
      float: left
      width: 17px
      display: inline-block
      font-weight: 600
    span:last-of-type
      float: left
      margin-left: 10px
.al-spcInfo__block--active
  @extend .al-spcInfo__block
  border: 1px solid $gold
  &:hover
    background-color: white
    cursor: auto
  .al-spcInfo--name
    width: 65%
  img
    float: left
    margin-right: 5px
  .al-spcInfo--avail
    float: left
    width: 100%
    padding: 10px
    margin-top: 10px
    border-radius: 5px
    background-color: $mystic
    text-align: center
    font-style: italic
  .al-price
    margin-bottom: 10px
  .al-price--old
    @extend .al-price
    font-weight: bold
    text-decoration: line-through
  .al-price--new
    @extend .al-price
    font-size: 26px
    font-weight: bold
  .al-price--dif
    @extend .al-price
    font-style: italic
  input[type="button"]
    background-color: $gold
    font-size: 20px
    padding: 10px
    border: none
    border-radius: 5px
    margin-bottom: 10px

.al-spcPlugin
  width: 50%
  float: right
  img
    margin: 0 auto

.al-advertisement
  padding: 20px 0
  p
    font-size: 16px
    line-height: 1.5
    margin: 15px 0

.al-search--spc
  margin-top: 30px
  span.al-h1--spc
    display: block

  .al-search__info
    // @include clearfix
    margin-top: 20px
    margin-right: 5px
    display: inline-block
    min-width: 412px
    max-width: 590px
    vertical-align: top
    // img
    //   float: left
    //   margin-right: 20px
    //   width: 177px
    //   border-top-left-radius: 10px
    a
      color: black
      background-color: white
      padding: 10px
      overflow: hidden
      display: inline-block
      border: 1px solid $mystic
      border-radius: 4px
      &:hover
        border-bottom: 1px solid transparent!important
        text-decoration: none
        box-shadow: 0px 5px 15px 0px rgba($wildblueyonder, 0.75)

  .al-search__info--text
    float: left
    max-width: 580px
    h2
      font-size: 22px
      font-weight: bold
      margin-bottom: 10px
      min-width: 390px
    dl
      font-size: 14px
      line-height: 1.3
      display: block
      padding-right: 10px
    dt
      font-weight: bold
      margin-right: 4px
      float: left

  .al-infoBlock--showMore
    margin: 10px 0 3px
    i
      left: 3px

// .al-searchModel--title
//   h1
//     display: inline-block
//     vertical-align: top
//   .al-spcBack
//     display: inline-block
//     position: relative
//     top: 0px
//     a
//       padding: 0 10px 0 14px
//       position: relative
//       top: -4px

.al-searchModel
  i
    vertical-align: top

.al-searchModel--box
  display: inline-block
  margin-left: 10px
  // width: 200px
  h1
    display: inline-block
    margin-left: 0
  h4
    font-weight: bold
    font-size: 18px
    margin: 20px 0
  // .selectize-control
  //   margin-bottom: 10px
  .al-spcBack
    display: inline-block
    position: relative
    top: 0px
    a
      padding: 0 10px 0 14px
      position: relative
      top: -4px

.al-searchModel--select
  width: 200px
  position: relative

  .al-clear
    display: inline-block
    position: absolute
    top: 10px
    left: 150px
    z-index: 3
    a
      color: #d0d0d0 // color from selectize
      text-decoration: none
      border-bottom: none
      &:hover
        color: $monza

  .selectize-input
    padding-right: 53px