.messanger-body {
  display: flex;
  width: calc(100% + 100px);
  position: relative;
  left: -50px; }
  .messanger-body .chat-body {
    position: relative;
    min-height: 100%;
    width: 100%;
    border-right: 1px solid var(--dark-color);
    border-left: 1px solid var(--dark-color);
    background: linear-gradient(45deg, #c8c8c8, #c8c896); }
    .messanger-body .chat-body .choose-chat {
      display: flex;
      width: 100%;
      height: 100%;
      justify-content: center;
      align-items: center; }
      .messanger-body .chat-body .choose-chat h3 {
        color: white; }
    .messanger-body .chat-body .title {
      background-color: white;
      padding: 10px 20px; }
      .messanger-body .chat-body .title p {
        margin: 0;
        font-weight: 500;
        font-size: 15px; }
      .messanger-body .chat-body .title span {
        font-size: 12px; }
    .messanger-body .chat-body .messages .message-container {
      width: 100%; }
    .messanger-body .chat-body .messages .message {
      float: right;
      max-width: 200px;
      min-width: 150px;
      background: white;
      padding: 5px 10px;
      margin: 10px;
      border-radius: 15px;
      min-width: 150px;
      font-size: 12px;
      position: relative; }
      .messanger-body .chat-body .messages .message.left {
        float: left; }
      .messanger-body .chat-body .messages .message .message-bottom {
        position: absolute;
        right: 5px;
        bottom: 5px; }
        .messanger-body .chat-body .messages .message .message-bottom span {
          font-size: 10px; }
        .messanger-body .chat-body .messages .message .message-bottom .ticks {
          margin-left: 5px; }
          .messanger-body .chat-body .messages .message .message-bottom .ticks .tick {
            position: relative;
            -webkit-filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px -1px 0 white);
            filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px -1px 0 white); }
          .messanger-body .chat-body .messages .message .message-bottom .ticks .tick:last-child {
            left: -7px; }
          .messanger-body .chat-body .messages .message .message-bottom .ticks .tick:first-child {
            z-index: 10; }
      .messanger-body .chat-body .messages .message .tick {
        width: 10px;
        height: 7px; }
    .messanger-body .chat-body .bottom {
      position: absolute;
      bottom: 0;
      width: calc(100% - 40px);
      background-color: white;
      padding-top: 15px; }
      .messanger-body .chat-body .bottom textarea {
        width: 90%;
        border: none;
        padding: 10px; }
      .messanger-body .chat-body .bottom button {
        margin: 10px 0px;
        width: 200;
        color: white;
        font-size: 12px;
        padding: 8px 5px; }

.chat-list {
  display: flex;
  flex-direction: column;
  background-color: white;
  min-height: 100%;
  max-height: 100%; }
  .chat-list .chat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 5px;
    cursor: pointer;
    transition: .1s; }
    .chat-list .chat:hover {
      background-color: #f0f0f0; }
    .chat-list .chat.selected {
      background-color: #9696fa; }
      .chat-list .chat.selected * {
        color: white; }
    .chat-list .chat .avatar {
      max-width: 50px;
      min-width: 50px;
      max-height: 50px;
      min-height: 50px;
      border-radius: 50%; }
    .chat-list .chat .title {
      display: flex;
      justify-content: space-between; }
      .chat-list .chat .title p {
        margin: 0px;
        font-weight: 500; }
    .chat-list .chat .content {
      min-width: 250px;
      max-width: 250px; }
    .chat-list .chat .message-text {
      margin: 5px 0px; }

/*# sourceMappingURL=messanger.css.map */