body {
  border: 0;
  margin: 0;
  box-sizing: border-box;
  height: 100vh;
  display: flex;
}

.font--family {
  font-family: 'Inter', sans-serif;
}

.left-sidebar {
display: flex;
flex: 1;
flex-direction: column;
align-items: flex-start;
gap: 8px;
flex-shrink: 0;
border-right: 1px solid #D9DCE0;
background: #FFF;
}

.search-bar {
display: flex;
padding: 8px 16px;
align-items: center;
gap: 16px;
align-self: stretch;
}

.menu-icon {
display: flex;
width: 40px;
height: 40px;
padding: 8px;
justify-content: center;
align-items: center;
border-radius: 100px;
}

.search {
display: flex;
height: 40px;
padding: 8px 16px;
align-items: center;
gap: 16px;
flex: 1 0 0;
border-radius: 22px;
background: #F5F5F5;
}

.lupa-icon {
  width: 24px;
  height: 24px;
}

#text-search {
  width: 121px;
  height: 20px;
  color: #707991;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 125% */
}

/* CHATS LIST */

.chats-list {
  display: flex;
  height: 656px;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}

.chat {
  display: flex;
  flex-direction: row;
  height: 72px;
  padding: 12px 16px;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  align-self: stretch;
}

.avatar {
  width: 48px;
  height: 48px;
}

.texts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 1 0 0;
}

.name {
  display: flex;
  align-items: center;
  align-self: stretch;
}

.bot-name {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 0 0;
}

.bot-name p {
  color: #011627;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 125% */
}

.bot-name img {
  width: 24px;
  height: 24px;
}



#horario {
  color: #707991;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 133.333% */
}

.message {
  margin-top: -30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.message p {
  color: #707991;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 128.571% */
}

.new-message {
  display: flex;
  width: 18px;
  height: 18px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  background: #78E378;
}

.new-message p {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #FFF;
  text-align: center;

  /* 12-Reg */
  font-family: "Inter", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
}


/* CHAT ARTCLASS */

.chat-artclass {
  display: flex;
  height: 72px;
  padding: 12px 16px;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  align-self: stretch;
}

.texts-artclass {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 1 0 0;
}

.name-artclass {
  display: flex;
  gap: 175px;
  align-items: center;
  align-self: stretch;
}

.name-artclass p {
  color: var(--Rich-Black, #011627);

/* 16-Semi-Bold */
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 125% */
}

#horario-artclass {
  color: var(--Navy-Grey, #707991);

/* 12-Reg */
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 133.333% */
}

.message-artclass {
    margin-top: -30px;
  display: flex;
  align-items: center;
  gap: 4px;
  align-self: stretch;
}

#emily {
  color: var(--Rich-Black, #011627);

/* 14-Reg */
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 128.571% */
}

.message-artclass img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: url(<path-to-image>) lightgray 50% / cover no-repeat;
}

#editorial {
  color: var(--Navy-Grey, #707991);

/* 14-Reg */
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 128.571% */
}

/* MAIN CHAT */

.content {
  display: flex;
  flex: 3.5;
  flex-direction: column;
  align-items: center;
  background-image: url(../images/background.png);
  background-size: contain;
}

.top-bar {
  display: flex;
  height: 56px;
  padding: 8px 16px;
  align-items: flex-start;
  gap: 8px;
  flex-shrink: 0;
  align-self: stretch;
  border-bottom: 1px solid #D9DCE0;
  background: #FFF;
}

.other-user {
  display: flex;
  padding: 8px 0px;
  align-items: center;
  gap: 16px;
  flex: 1 0 0;
  align-self: stretch;
}

.texts-other-user {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
}

.name-other-user {
  display: flex;
  align-items: center;
  align-self: stretch;
}

.name-other-user p {
  flex: 1 0 0;
  color: var(--Rich-Black, #011627);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 125% */
}

.last-seen-other-user {
  margin-top: -25px;
  display: flex;
  align-items: center;
  align-self: stretch;
}

.last-seen-other-user {
  color: #707991;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 128.571% */
}

.search-messages {
  display: flex;
  width: 40px;
  height: 40px;
  padding: 8px;
  justify-content: center;
  align-items: center;  
  border-radius: 100px;
}

.call-icon {
  display: flex;
  width: 40px;
  height: 40px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
}

.more-icon {
  display: flex;
  width: 40px;
  height: 40px;
  padding: 8px;
  justify-content: center;
  align-items: center;
}

/* MESSAGES */

.messages-content {
  display: flex;
  width: 694px;
  height: 664px;
  padding: 230px 0px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.date-sent-content {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}

.date-group {
  display: flex;
  padding: 0px 15px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  border-radius: 24px;
  background: rgba(61, 112, 184, 0.60);
}

.date-group p {
  color: #FFF;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 125% */
}

.messages-other-user {
  display: flex;
  align-items: center;
  align-self: stretch;
}

.message-other-user {
  display: flex;
  padding: 4px 12px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  border-radius: 12px;
  background: #FFF;
}

.message-other-user p {
  color: var(--Rich-Black, #011627);
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 125% */
}

.time-emoji {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: -20px;
}

.time-emoji p {
  color: var(--Rich-Black, #011627);

/* 12-Reg */
font-family: "Inter", sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 133.333% */
}

.message-you-2 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: stretch;
}

.my-message-you-2 {
  display: flex;
  padding: 4px 12px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  border-radius: 12px;
  background: #78E378;
}

.my-message-you-2 p {
  color: var(--Rich-Black, #011627);

/* 16-Reg */
font-family: "Inter", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 125% */
}

.time {
  display: flex;
  align-items: center;
}

.time p {
  color: #FFF;

/* 12-Reg */
font-family: "Inter", sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 133.333% */
}

.message-you {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  align-self: stretch;
}

.my-message-you {
  display: flex;
  padding: 4px 12px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  border-radius: 12px;
  background: #78E378;
}

.my-message-you p {
  color: var(--Rich-Black, #011627);

/* 16-Reg */
font-family: "Inter", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 125% */
}

.time-my-message-you {
  display: flex;
  align-items: center;
  gap: 4px;
}

.time-my-message-you p {
  color: #FFF;

/* 12-Reg */
font-family: "Inter", sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 133.333% */
}

.input-bar {
  display: flex;
  height: 56px;
  padding: 8px 16px;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  align-self: stretch;
  border-radius: 12px;
  background: #FFF;
}

.input-bar p {
  flex: 1 0 0;
  color: #707991;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 125% */
}