.root {
  margin-bottom: calc(56px + 3rem) !important;
}

.conv_title {
  font-size: 2rem !important;
  font-weight: 700 !important;
  margin: 1.2rem .2rem !important;
}

.card_single {
  overflow: auto;
}

.preloader {
  height: 60vh;
}

.preloader_msg {
  font-size: 1.4rem;
  margin-top: 2rem;
  font-weight: 700;
}

.card_root {
  cursor: pointer;
}

.avatar_holder {
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: center;
  column-gap: 1rem;
  grid-template-areas: "avatar name"
    "avatar sname";
}

.messages_number {
  margin-top: 1rem;
}

.last_message {
  margin-top: .3rem;
}

.conv_container {
  display: grid;
  row-gap: 10px;
}

.avatar {
  grid-area: avatar;
  height: 45px !important;
  width: 45px !important;
}

.conv_name {
  font-weight: bold;
  font-size: 1.25rem;
  grid-area: name;
  align-self: flex-end;
}

.conv_screen_name {
  color: rgb(65, 65, 65);

  :global .dark :local & {
    color: lighten($color: #000000, $amount: 85);
  }

  font-size: .9rem;
  grid-area: sname;
  align-self: baseline;
}

.group_conv_container {
  display: flex;
  flex-direction: column;
}

.group_conv {
  font-weight: bold;
  font-size: 1.25rem;
}

.group_conv_screen_name {
  color: rgb(65, 65, 65);
  font-size: .9rem;
  align-self: baseline;

  :global .dark :local & {
    color: lighten($color: #000000, $amount: 85);
  }
}
