@keyframes wizz {
      0% {
        transform: translateX(-1vw) rotate(-3deg);
      }
      10% {
        transform: translateX(1vw) rotate(0deg);
      }
      20% {
        transform: translateX(-1vw) rotate(3deg);
      }
      30% {
        transform: translateX(1vw) rotate(0deg);
      }
      40% {
        transform: translateX(-1vw) rotate(-3deg);
      }
      50% {
        transform: translateX(1vw) rotate(0deg);
      }
      60% {
        transform: translateX(-1vw) rotate(3deg);
      }
      70% {
        transform: translateX(1vw) rotate(0deg);
      }
      80% {
        transform: translateX(-1vw) rotate(3deg);
      }
      90% {
        transform: translateX(1vw) rotate(0deg);
      }
      100% {
        transform: translateX(0) rotate(0deg);
      }
    }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.chat-wrapper {
  width: 100%;
  height: 100%;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/238916/1200x768_fond-ecran-defaut-windows-xp.jpeg");
  background-size: cover;
  .chat {
    width: 497px;
    height:502px;
    border-radius: 5px;
      position: absolute;
  top:0;left:0;right:0;bottom:0;
    padding: 85px 165px 170px 20px;
    box-sizing: border-box;
  margin: auto;
    background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/238916/msn.png");
    background-size: cover;
  }
}

.status {
  position: absolute;
  top: 22px;
  left: 33px;
  font-size: 12px;
  color: grey;
}

.is-writting {
  position: absolute;
  bottom: 30px;
  left: 16px;
  font-size: 12px;
  color: grey;
}

 .avatar-1 {
    width: 97px;
    height:97px;
    position: absolute;
    top:92px;right:25px;bottom:0;
    background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/238916/avatar.png");
    background-size: cover;
   background-color: #fafafa;
  }
 .avatar-2 {
    width: 97px;
    height:97px;
    position: absolute;
    top:356px;right:25px;bottom:0;
    background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/238916/avatar.png");
    background-size: cover;
   background-color: #fafafa;
  }

.chat {
  &.wizz {
    animation: wizz .5s ease-in-out 1 backwards;
  }
}

.chat-container {
  overflow-y: scroll;
  overflow-x: hidden;
  width: 2315px;
  height: 245px;
  position: relative;
  z-index: 0;
  &:before {
    content: "";
    position: absolute;
    top:0;
    right: -10px;
    z-index: 99999999;
    width: 10px;
    height: 100%;
    background-color:white;
  }
}

.name {
  position: absolute;
  top: 4px; left: 32px; 
  font-weight: bold;
  color:rgba(0,0,0,0.8);
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  padding-top:4px;
  &.one {
    color: red;
  }
  &.two {
    color: blue;
  }
  &:first-child {
    padding-top: 10px;
  }
  label {
    font-size: 12px;
    img {
      width: 15px;
      height: 15px;
      margin-left:3px;
      margin-right:3px;
      display: inline;
    }
  }
  label:first-child {
    display: block;
    color: rgba(0,0,0,0.6);
  }
  
}

html {
  font-family: Sans, sans-serif;   
}