@media #{$D7} {
  .gutter {
    width:64px;
    float:left;
    border-right:1px solid lightgray;
    position:relative;
    box-sizing: border-box;
    height:458px;
    overflow: scroll;
    background-color:white;
    padding-bottom:80px;
    .search {
      //display:none;
    }
    .contact {
      cursor:pointer;
      float:left;
      width:100%;
      border-bottom:1px solid whitesmoke;
      color:#333;
      &:hover {
        background-color:whitesmoke;
        margin-top:-1px;
        border-bottom:1px solid lightgray;
        border-top:1px solid lightgray;
      }
      &.active {
        background-color:$lightblue;
        margin-top:-1px;
        border-bottom:1px solid lightgray;
        border-top:1px solid lightgray;
      }
      .avatar {
        height:42px;
        width:42px;
        border-radius:42px;
        cursor:pointer;
        display:inline-block;
        margin:10px;
        margin-right:14px;
        float:left;
        clear:both;
        background-color:whitesmoke;
      }
      .contact-details {
        display:none;
      }
    }
  }
}

@media #{$D6} {

  .gutter {
    width:240px;
    height:auto;
    z-index:100;
    .search {
      padding:10px;
      border-bottom:1px solid whitesmoke;
      input[type=search] {
        box-sizing: border-box;
        font-size:12px;
        outline:0;
        width:100%;
        margin:0;
        letter-spacing: 0.25px;
        padding:4px 8px;
        border:1px solid lightgray;
      }
      &.d6 {
        display:block;
      }
    }
    .contact {
      .avatar {
        height:56px;
        width:56px;
      }
      .contact-details {
        display:block;
        position:relative;
        width:156px;
        float:left;
        text-align: left;
        h3 {
          font-size:13px;
          margin-bottom:4px;
        }
        .contact-name {
          width: 105px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .last-message {
          color:lighten(#333, 40%);
          letter-spacing:0.15px;
          -webkit-text-stroke: 0.2px;
          margin:0;
          font-size: 12px;
          width: 150px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .last-timestamp {
          position:absolute;
          top:14px;
          right:8px;
          font-size:12px;
          font-weight: 500;
          color:gray;
        }
      }
    }

  }
}