[v-cloak] {

  display: none;

}

.notification-wrap{

  font-family: 'Roboto', sans-serif;

  position:fixed;

  bottom: 20px;

  left: 2%;

  height: auto;

  width: 100%;

  max-width: 350px;

  padding: 2px;

  z-index: 99999;

  box-sizing: border-box;

  border-bottom-left-radius: 40px;

  border-top-left-radius: 40px;

  border-bottom-right-radius: 40px;

  border-top-right-radius: 40px;

  background-color: #FFF;

  text-align: left;

  box-shadow: 0 0 1px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.05), 0 8px 50px rgba(0,0,0,0.05);

}

.notification-wrap a{

  color: #02bdf2;

}

.img-wrap{

  width: 70px;

  border-radius: 50%;

  overflow: hidden;

  display: table-cell;

  vertical-align: middle;

  background-color: gray;

}

.img-wrap img{

  width: 100%;

}

.content-wrap{

  display: table-cell;

  padding-left: 10px;

  width: calc(100% - 70px);

  padding-top: 5px;

  padding-bottom: 5px;

}

.title{

  font-size: 15px;

  color: #000;

  font-weight: 600;

}

.activity{

  font-size: 14px;

  color: #333;

}

.time{

  font-size: 12px;

  color: #999;

}

.fade-enter-active {

  transition: all 1s ease;

}

.fade-leave-active {

  transition: all 1s ease;

}