@import "client/common";


$fluid-break: 1335px;
@mixin layout-small {
  @media (max-width: #{$fluid-break - 1px}) {
    @content;
  }
}

@mixin layout-normal {
  @media (min-width: #{$fluid-break}) {
    @content;
  }
}


#test-drive-selection {



  div[data-react-class="TestDriveSelection"] {
    height: 100%;
  }
  .content-body-scroller {
    height: 100%;
    padding: 30px;
    @include border_box_sizing;
  }

  h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px !important;
    display: inline-block;
  }

  .test-drive-selection-wrapper {
    float:left;
    text-align:center;
    width:31%;

    &.select-4 {

    }
    &.select-2 {
      margin:0 3.5%;
    }
    &.select-1 {

    }
  }
  .test-drive-selection {
    display:inline-block;
    border-radius:10px;
    border-width:1px;
    border-color:$ColorScreenPrimary;
    border-style:solid;
    margin-bottom:15px;

    @media (max-width: 1180px) {
      min-height:360px;
    }
    @media (min-width: 1181px) {
      min-height:340px;
    }
    @media (min-width: 1450px) {
      min-height:305px;
    }
  }

  a.select-package {
    margin-bottom:15px;
    max-width: 140px;
    width: 100%;
  }

  .price-notice {
    color:white;
    font-size:16px;
  }

  .td-header {
    height:45px;
    color:white;
    text-align:center;
    font-size:24px;
    line-height: 45px;
    vertical-align: middle;
    background-color:$ColorScreenPrimary;

    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    @media (max-width: 1130px) {
      font-size:16px;
    }
  }
  .td-content {
    @include border-box_sizing;
    padding:10px;
    width:100%;

  }

  .avatars {
    margin-bottom:20px;
  }
  .td-msg {
    margin-bottom:20px;

    @media (max-width: 1400px) {
      min-height:42px;
    }
  }
  .td-desc {
    line-height:120%;
    color:$ColorTextTypical;
  }

  .avatar-header {
    display:inline-block;
  }
  .avatar {
    display:inline-block;
    padding:1px;
    width:48px;
    height:48px;
    background-color:#ed4818;
    margin:10px 8px 0 0;
    -webkit-border-radius:24px;
    -moz-border-radius:24px;
    border-radius:24px;
    float:none;

    @include layout-small {
      width:32px;
      height:32px;
      -webkit-border-radius:16px;
      -moz-border-radius:16px;
      border-radius:16px;
      margin:10px 6px 0 0;
    }
  }
  .avatar img {
    width: 48px;
    height: 48px;
    -webkit-border-radius:24px;
    -moz-border-radius:24px;
    border-radius:24px;
    @include layout-small {
      width:32px;
      height:32px;
      -webkit-border-radius:16px;
      -moz-border-radius:16px;
      border-radius:16px;
    }
  }
  .selection-area {
    width:100%;
    padding-top:20px;
  }

}