* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background-color: #e7ebf0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

header {
  width: 1010px;
  height: 50px;
  background-color: rgb(86, 130, 163);
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
  -ms-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}
.left-side {
  float: left;
  width: 31%;
  height: 100%;
  padding: 14px 20px 15px 22px;
}

.left-side:hover,
.serch:hover,
.dot-btn:hover,
.name-section:hover {
  background-color: #497799;
  cursor: pointer;
}

.left-side:hover .first {
  -webkit-transform: translateY(-1px);
  -ms-transform: translateY(-1px);
  transform: translateY(-1px);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.left-side:hover .last {
  -webkit-transform: translateY(1px);
  -ms-transform: translateY(1px);
  transform: translateY(1px);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.hamburger-btn {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  display: inline-block;
  vertical-align: top;
  margin-top: 2px;
}
.logo {
  width: 62px;
  height: 14px;
  display: inline-block;
  margin-left: 35px;
  vertical-align: top;
  margin-top: 3px;
}
.line {
  width: 18px;
  height: 2px;
  margin-bottom: 4px;
  background-color: white;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  display: block;
}

.right-side {
  width: 69%;
  height: 100%;
  float: right;
  cursor: pointer;
  position: relative;
}

.name-section {
  display: inline-block;
  padding: 15px 19px 15px;
  vertical-align: top;
  width: 85%;
}

.name-section p {
  display: inline-block;
  font: 13px/18px Tahoma, sans-serif, Arial, Helvetica;
  color: white;
  opacity: 0.5;
}

.name-section .title-group {
  font-weight: bolder;
  opacity: 1;
  margin-right: 2px;
}

.name-section:hover .count-members,
.name-section:hover .members-online {
  opacity: 1;
}



.serch-settings {
  width: 15%;
  height: 100%;
  float: right;
}

.serch,
.dot-btn {
  float: right;
  width: 50%;
  height: 100%;
}

.serch-settings .serch {
  padding: 15px 16px 14px 20px;
}

.icon-serch {
  display: inline-block;
  width: 17px;
  height: 17px;
  background-image: url(../image/IconsetW.png);
  background-repeat: no-repeat;
  background-position: -12px -1037px;
  vertical-align: middle;
  opacity: 0.9;
}

.dot-btn {
  padding: 16px 25px;
}
.dot-btn .line {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  margin-bottom: 2px;
}
main {
  width: 1010px;
  height: 91.5vh;
  position: absolute;
  top: 50px;
  left: 50%;
  -webkit-transform: translate(-50.1%, 0%);
  -ms-transform: translate(-50.1%, 0%);
  transform: translate(-50.1%, 0%);
  background-color: white;
}
.all-chat {
  width: 31%;
  height: 100%;
  float: left;
  overflow: hidden;
  border-right: 2px solid #e0e0e0;
}
.conversation {
  width: 69%;
  height: 100%;
  float: right;
  position: relative;
}
.serch-panel {
  width: 100%;
  height: 55px;
  padding: 14px 14px;
  background-color: white;
}
.serch-input {
  font-size: 12px;
  line-height: normal;
  border: none;
  border-radius: 2px;
  padding: 8px 10px 8px 28px;
  margin: 0;
  background-color: #f2f2f2;
  background-image: url(../image/IconsetW.png);
  background-repeat: no-repeat;
  background-position: -7px -207px;
  width: 100%;
}
.serch-input:focus {
  outline: none;
}
.serch-input:not(:valid) + button {
  opacity: 0;
}
.serch-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  position: relative;
  height: 20px;
  width: 20px;
}
.serch-input::-ms-clear {
  -webkit-appearance: none;
  position: relative;
  height: 20px;
  width: 20px;
}
button {
  width: 20px;
  height: 20px;
  border: none;
  background-color: #f2f2f2;
  position: absolute;
  top: 20px;
  left: 27%;
  opacity: 1;
}
button:focus {
  outline: none;
}
.reset {
  background-image: url(../image/IconsetW.png);
  background-position: -12px -189px;
  width: 20px;
  height: 20px;
  display: inline-block;
  cursor: pointer;
}
.chat-wraper {
  width: 100.1%;
  height: 94%;
  overflow-y: scroll;
}
.chat {
  width: 100%;
  height: 62px;
  cursor: pointer;
}
.chat:last-child {
  margin-bottom: 30px;
}
.select {
  background-color: #6490b1 !important;
  color: white !important;
}
.chat:hover {
  background-color: #f2f6fa;
}
.cover {
  width: 24%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  float: left;
}
.icon-chat {
  width: 45px;
  height: 45px;
  border-radius: 100%;
  background-image: url(../image/save.png);
  background-position: center;
  background-size: cover;
  position: absolute;
  top: 52%;
  left: 53%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.saved-message {
  background-image: url(../image/save.png);
}

.chat-discription {
  width: 76%;
  height: 100%;
  float: right;
}

.name-time,
.message-pin {
  width: 100%;
  height: 50%;
  position: relative;
}
.author {
  text-transform: capitalize;
  position: absolute;
  bottom: 5%;
  left: 2%;
  font: 13px/18px Tahoma, sans-serif, Arial, Helvetica;
  font-weight: bold;
}
.time {
  font: 12px/20px Tahoma, sans-serif, Arial, Helvetica;
  position: absolute;
  bottom: 12%;
  right: 6%;
  color: rgb(173, 173, 173);
}

.messages {
  font: 13px/20px Tahoma, sans-serif, Arial, Helvetica;
  position: absolute;
  top: 10%;
  left: 2%;
}

.messages span {
  color: #3a6d99;
}

.pin,
.unread,
.you-message {
  display: inline-block;
  position: absolute;
  right: 8%;
}
.pin {
  top: 25%;
  width: 14px;
  height: 14px;
  background-image: url(../image/general.png);
  background-repeat: no-repeat;
  background-position: -13px -916px;
}

.unread {
  top: 5%;
  width: 20px;
  height: 20px;
  background-color: #bfbfbf;
  color: white;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  font: 11px/20px Tahoma, sans-serif, Arial, Helvetica;
}
.you-message {
  top: 30%;
  width: 9px;
  height: 9px;
  background-color: #c1d6e5;
  border-radius: 50%;
}
.person,
.tut-by,
.disgusting,
.club,
.goToB,
.work,
.onliner,
.osf,
.kimovil,
.food,
.film-review,
.hf {
  background-image: url(../image/cover.png);
  background-repeat: no-repeat;
}

.person {
  background-position: -1px -574px;
}
.tut-by {
  background-position: 0px 4px;
}
.disgusting {
  background-position: 0px -42px;
}
.club {
  background-position: 0px -90px;
}

.goToB {
  background-position: 0px -137px;
}

.work {
  background-position: 0px -187px;
}

.onliner {
  background-position: 0px -233px;
}

.osf {
  background-position: 0px -280px;
}

.kimovil {
  background-position: 0px -328px;
}

.food {
  background-position: 0px -375px;
}

.film-review {
  background-position: 0px -424px;
}

.hf {
  background-position: 0px -474px;
}
.conversation-body {
  width: 100%;
  height: calc(90vh - 140px);
}

.create-group {
  width: 60%;
  height: 420px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font: 13px/20px Tahoma, sans-serif, Arial, Helvetica;
  color: #999999;
  position: relative;
}

.create-group .user {
  font-weight: bold;
  color: #b19b68;
  cursor: pointer;
}

.user:hover {
  text-decoration: underline;
}

.create-group p:first-child {
  padding-top: 50px;
}

.create-group p {
  padding: 10px;
}

.create-group img {
  position: absolute;
  top: 64%;
  left: 50%;
  -webkit-transform: translate(-50%, -40%);
  -ms-transform: translate(-50%, -40%);
  transform: translate(-50%, -40%);
  width: 220px;
  cursor: pointer;
}

.name-group {
  font-weight: bold;
}
.messages-group,
.messages-group-with-link {
  width: 100%;
  height: 70px;
  margin-bottom: 12px;
}

.messages-group-with-link {
  height: 140px;
}

.messages-group-with-link .check-messages .check {
  height: 25%;
  top: 22%;
}

.messages-group-with-link .author-foto img {
  top: 24%;
}
.messages-group-with-link .author-data {
  height: 23%;
}

.messages-group-with-link .messages-text {
  height: 77%;
}

.messages-text a {
  text-decoration: none;
  font: 13px/23px Tahoma, sans-serif, Arial, Helvetica;
  padding: 2px 6px;
  color: #7d9fbc;
}

.link {
  width: 61%;
  height: 73%;
  padding-left: 6px;
  margin-left: 1%;
  border-left: 1px solid rgb(128, 171, 210);
  font: 13px/19px Tahoma, sans-serif, Arial, Helvetica;
}
.link-first-part {
  color: rgb(168, 168, 168);
}

.link-second-part {
  color: #537fa6;
  font-weight: bold;
}

.check-messages {
  width: 8%;
  height: 100%;
  float: left;
}

.author-foto {
  width: 11%;
  height: 100%;
  display: inline-block;
  position: relative;
}

.author-foto img {
  border-radius: 50%;
  width: 67%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.messages-wraper {
  width: 81%;
  height: 100%;
  float: right;
}

.check-messages {
  position: relative;
}

.check-messages .check {
  width: 80%;
  height: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-image: url(../image/IconsetW.png);
  background-position: -2px -475px;
  opacity: 0;
  cursor: pointer;
}

.messages-group:hover .check,
.messages-group-with-link:hover .check {
  opacity: 1;
}

.author-data,
.messages-text {
  width: 100%;
  height: 50%;
  position: relative;
}

.messages-text .text {
  font: 12px/20px Tahoma, sans-serif, Arial, Helvetica;
  padding: 2px 6px;
}

.author-group {
  font: 12px/20px Tahoma, sans-serif, Arial, Helvetica;
  font-weight: bold;
  color: rgb(177, 155, 104);
  position: absolute;
  bottom: 2%;
  left: 4px;
}

.author-group:hover,
.messages-group-with-link a:hover,
.link-second-part:hover {
  text-decoration: underline;
  cursor: pointer;
}
.data-group {
  color: #b7b7b7;
  position: absolute;
  bottom: 2%;
  right: 11.4%;
  font: 11px/20px Tahoma, sans-serif, Arial, Helvetica;
}
.data-group:hover{
  text-decoration: underline;
}

.user-panel {
  width: 100%;
  height: 150px;
  position: absolute;
  bottom: 0px;
}
.main-elements {
  height: 100%;
  width: 80%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
}

.conversation-body .main-elements {
  width: 90%;
  overflow-y: scroll;
  cursor: pointer;
}

.conversation-body .main-elements,
.chat-wraper {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.conversation-body .main-elements::-webkit-scrollbar,
.chat-wraper::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.main-panel,
.emoji-send {
  width: 100%;
  height: 50%;
}

.data-group:hover {
  text-decoration: underline;
}

.user-foto,
.group-cover {
  width: 15%;
  height: 100%;
}

.user-foto {
  float: left;
  position: relative;
}

.user-foto img,
.group-cover img {
  width: 62%;
  height: auto;
  border-radius: 50%;
  position: absolute;
  top: 60%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.group-cover {
  float: right;
  position: relative;
}
.messages-panel {
  width: 70%;
  height: 100%;
  display: inline-block;
  position: relative;
}
textarea {
  position: absolute;
  bottom: 0px;
  resize: none;
  outline: none;
  -moz-appearance: none;
  height: 80%;
  width: 88%;
  font: 12px/20px Tahoma, sans-serif, Arial, Helvetica;
  border: none;
  padding-left: 5px;
  overflow: hidden;
}
.emoji-btn {
  position: absolute;
  top: 20%;
  right: 0px;
  width: 12%;
  height: 45%;
  background-image: url(../image/IconsetW.png);
  background-position: 1px 0px;
  cursor: pointer;
}
.emoji-btn:hover {
  background-position: 1px -32px;
}
.decoration {
  width: 97%;
  height: 2px;
  background-color: #e8e8e8;
  position: absolute;
  bottom: 0;
}

textarea:focus + .decoration {
  background-color: #6490b1;
}

.container {
  width: 69%;
  height: 100%;
  display: block;
  margin-left: 14.5%;
  margin-right: auto;
  position: relative;
}

.elemets-wraper {
  width: 100%;
  height: 50%;
  position: absolute;
  top: 40%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}
.send {
  float: right;
  font: 13px/20px Tahoma, sans-serif, Arial, Helvetica;
  color: #499dd9;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
  padding-top: 8px;
}
.send:hover {
  color: #3b8ac2;
}
.send-type {
  float: left;
  width: 30%;
  height: 100%;
}

.send-type span {
  display: inline-block;
  width: 28px;
  height: 36px;
  cursor: pointer;
}

.send-type span:hover {
  opacity: 1;
}

.send-type .media {
  margin: 0 10px;
}

.media,
.file {
  background-image: url(../image/general.png);
  opacity: 0.7;
}

.media {
  background-position: -6px -390px;
}

.file {
  background-position: -6px -445px;
}

.record {
  background-image: url(../image/IconsetW.png);
  background-position: -6px -277px;
  opacity: 0.7;
}
.emoji-panel {
  width: 55%;
  height: 100%;
  display: inline-block;
  position: relative;
  cursor: default;
}
.emoji-panel span {
  display: inline-block;
  margin-top: 8px;
  cursor: pointer;
  margin-right: 5px;
  padding: 5px;
}

.emoji-panel span:first-child {
  margin-left: 10px;
}

.emoji:hover {
  background-color: rgb(237, 242, 245);
}

.emoji {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  display: inline-block;
  background-image: url(../image/emojisprite_0.png);
  background-size: 540px 140px;
}
.first {
  background-position: -300px -0px;
}

.second {
  background-position: -480px -60px;
}

.third {
  background-position: -440px -0px;
}

.fourth {
  background-position: -140px -0px;
}

.fifth {
  background-position: -200px -120px;
}

.sixth {
  background-position: -120px -0px;
}

.seventh {
  background-position: -60px -0px;
}
@media screen and (max-width: 1010px) {
  header {
    width: 100vw;
  }

  .name-section {
    width: 81%;
  }

  .serch-settings {
    width: 19%;
  }

  main {
    width: 100vw;
    height: 100vh;
  }

  .user-panel {
    bottom: 42px;
  }

  .main-elements {
    width: 100% !important;
  }

  .emoji-panel span:first-child {
    margin-left: 25px;
  }

  .seventh {
    display: none !important;
  }

  .send-type {
    width: 31%;
  }

  .messages {
    width: 74%;
    white-space: nowrap;
    overflow-x: hidden;
  }

  .author {
    width: 62%;
    overflow-x: hidden;
    white-space: nowrap;
  }
  button {
    left: 25.5%;
  }
}