body {
  margin: 0;
  line-height: normal;
}

:root {
  /* Figma Variables */

  /* Spacing */
  --Radius-2: 24px;
  --Radius-4: 48px;
  --Radius-21: 24px;
  --Spacing-0: 2px;
  --Spacing-1: 4px;
  --Spacing-2: 8px;
  --Spacing-3: 12px;
  --Spacing-4: 16px;
  --Spacing-7: 32px;
  --Spacing-21: 8px;
  --Spacing-41: 16px;

  /* Color */
  --Black-Teal: #233132;
  --Colors-Licorice: #1c2837;
  --Dark-Teal: #519ba1;
  --Green-Accent: #71f268;
  --Grey: #ededed;
  --Teal-Accent: #15c5c2;
  --White: #fff;

  /* Common Style Variables */

  /* Gap */
  --gap-4: 4px;
  --gap-20: 20px;

  /* Padding */
  --padding-0: 0;
  --padding-1: 1px;
  --padding-2: 2px;

  /* Font */
  --font-general-sans: 'Poppins', sans-serif;
  --font-synonym: 'Poppins', sans-serif;

  /* FontSize */
  --fs-14: 14px;
  --fs-16: 16px;

  /* WidthHeights */
  --height-10: 10px;
  --height-14: 14px;
  --height-16: 16px;
  --height-24: 24px;
  --width-10: 10px;
  --width-16: 16px;
  --width-24: 24px;

  /* LineHeights */
  --lh-18: 18px;
  --lh-20: 20px;

  --left-16: 16px;
  --top-2: 2px;
}
.inbox {
  width: 100%;
  position: relative;
  background-color: var(--Grey);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 79px;
  line-height: normal;
  letter-spacing: normal;
}
.status-bar,
.top-bar-parent {
  align-self: stretch;
  display: flex;
}
.top-bar-parent {
  flex-direction: column;
  align-items: flex-start;
}
.status-bar {
  overflow: hidden;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  gap: var(--gap-20);
}
.icon,
.time-dark {
  overflow: hidden;
  flex-shrink: 0;
}
.time-dark {
  width: 54px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.icon {
  align-self: stretch;
  height: 15px;
  position: relative;
  max-width: 100%;
}
.status-icons {
  display: flex;
  align-items: center;
  gap: var(--gap-4);
}
.network-signal-dark,
.wifi-signal-dark {
  height: var(--height-14);
  position: relative;
}
.network-signal-dark {
  width: 20px;
}
.wifi-signal-dark {
  width: var(--width-16);
}
.battery-dark {
  height: 12px;
  width: 25px;
  position: relative;
}
.arrow-left-parent,
.content {
  display: flex;
  box-sizing: border-box;
  gap: var(--Spacing-4);
}
.content {
  align-self: stretch;
  height: 805px;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--Spacing-4);
  text-align: left;
  font-size: 18px;
  color: var(--Black-Teal);
  font-family: var(--font-general-sans);
}
.arrow-left-parent {
  width: 358px;
  align-items: center;
  padding: 0 16px 0 0;
  flex-shrink: 0;
  text-align: center;
}
.arrow-left {
  cursor: pointer;
  border: 0;
  padding: var(--padding-0);
  background-color: transparent;
  height: var(--height-24);
  width: var(--width-24);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.vector-icon {
  position: absolute;
  height: 50%;
  width: 66.67%;
  top: 25%;
  right: 16.67%;
  bottom: 25%;
  left: 16.67%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.buscar {
  position: relative;
  line-height: 22px;
}
.search {
  align-self: stretch;
  height: 52px;
  border-radius: var(--Radius-2);
  background-color: var(--White);
  display: flex;
  align-items: center;
  padding: var(--Spacing-3) var(--Spacing-41);
  box-sizing: border-box;
  gap: 16px;
  flex-shrink: 0;
}
.magnifer {
  height: var(--height-16);
  width: var(--width-16);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.vector {
  position: absolute;
  height: 88.75%;
  width: 88.75%;
  top: 3.75%;
  right: 7.5%;
  bottom: 7.5%;
  left: 3.75%;
  border-radius: 50%;
  border: 1.5px solid var(--Black-Teal);
  box-sizing: border-box;
}
.vector-icon2 {
  position: absolute;
  height: 14.37%;
  width: 14.37%;
  top: 76.88%;
  right: 8.75%;
  bottom: 8.75%;
  left: 76.88%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.chat-profile,
.container,
.cuentas-destacadas-parent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.container {
  width: calc(100% - 34.3px);
  border: 0;
  outline: 0;
  background-color: transparent;
  flex: 1;
  font-family: var(--font-synonym);
  font-size: var(--fs-16);
  color: var(--Colors-Licorice);
}
.chat-profile,
.cuentas-destacadas-parent {
  align-self: stretch;
}
.chat-profile {
  gap: var(--Spacing-4);
  flex-shrink: 0;
  font-size: var(--fs-14);
}
.cuentas-destacadas-parent {
  gap: var(--Spacing-1);
  font-size: var(--fs-16);
  font-family: var(--font-synonym);
}
.cuentas-destacadas,
.frame-child {
  align-self: stretch;
  position: relative;
  overflow: hidden;
}
.cuentas-destacadas {
  line-height: var(--lh-20);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frame-child {
  height: 0.5px;
  max-width: 100%;
  max-height: 100%;
}
.chat {
  align-self: stretch;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
  gap: var(--Spacing-4);
}
.profile-picture-icon {
  width: 52px;
  border-radius: var(--Radius-4);
  max-height: 100%;
  object-fit: cover;
}
.user-message {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--Spacing-0);
  min-width: 188px;
}
.user,
.user-detail {
  display: flex;
  align-items: center;
}
.user {
  align-self: stretch;
}
.user-detail {
  gap: var(--Spacing-1);
}
.santiago-andr-dupont {
  position: relative;
  line-height: var(--lh-18);
  font-weight: 600;
}
.badge {
  height: var(--height-16);
  width: var(--width-16);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: var(--padding-1) var(--padding-2);
  box-sizing: border-box;
}

.message {
  align-self: stretch;
  display: flex;
  align-items: center;
  font-family: var(--font-synonym);
}
.asistente-de-enfermera {
  flex: 1;
  position: relative;
  line-height: var(--lh-18);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doctora-cirujana-plstica-parent {
  width: 205.5px;
  display: flex;
  align-items: center;
  gap: var(--Spacing-21);
}
.doctora-cirujana-plstica {
  position: relative;
  line-height: var(--lh-18);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.check-read {
  height: var(--height-16);
  width: var(--width-16);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: none;
}
.vector-icon3,
.vector-icon4 {
  position: absolute;
  height: 37.5%;
  width: 45.63%;
  top: 31.25%;
  right: 37.5%;
  bottom: 31.25%;
  left: 16.88%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.vector-icon4 {
  width: 37.5%;
  right: 16.88%;
  left: 45.63%;
}
.message3 {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: var(--gap-4);
  font-family: var(--font-synonym);
}
.consultorio-estetico {
  flex: 1;
  position: relative;
  line-height: var(--lh-18);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}
.chat-profile-inner {
  cursor: pointer;
  border: 0;
  padding: var(--padding-0);
  background-color: transparent;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
.more-button-parent {
  display: flex;
  align-items: flex-end;
  gap: var(--gap-4);
}
.more-button {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ver-ms {
  position: relative;
  font-size: var(--fs-16);
  line-height: var(--lh-20);
  font-weight: 600;
  font-family: var(--font-synonym);
  color: var(--Black-Teal);
  text-align: left;
}
.vector-icon7 {
  position: absolute;
  height: 25%;
  width: 58.13%;
  top: 37.5%;
  right: 21.25%;
  bottom: 37.5%;
  left: 20.63%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.post-header,
.post-header-parent {
  display: flex;
  flex-direction: column;
}
.post-header-parent {
  height: 785px;
  align-items: center;
  gap: var(--Spacing-4);
  flex-shrink: 0;
  font-size: var(--fs-16);
  font-family: var(--font-synonym);
}
.post-header {
  align-self: stretch;
  align-items: flex-start;
  gap: var(--Spacing-1);
}
.post-pair,
.posts-grid {
  display: flex;
  gap: var(--Spacing-21);
}
.posts-grid {
  width: 358px;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
}
.post-pair {
  align-self: stretch;
  height: 233px;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;
}
.post-pair-child {
  align-self: stretch;
  flex: 1;
  position: relative;
  border-radius: var(--Radius-21);
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
  object-fit: cover;
  min-width: 114px;
}
.menu {
  width: 390px;
  border-radius: var(--Radius-2) var(--Radius-2) 0 0;
  background-color: var(--White);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--Spacing-41) var(--Spacing-7);
  box-sizing: border-box;
  gap: var(--gap-20);
  text-align: left;
  font-size: var(--fs-14);
  color: var(--Black-Teal);
  font-family: var(--font-synonym);
}
.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--Spacing-1);
}
.huge-icon,
.menu-icon {
  position: relative;
  overflow: hidden;
}
.menu-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--Spacing-0);
  isolation: isolate;
  gap: var(--gap-4);
}
.huge-icon {
  cursor: pointer;
  border: 0;
  padding: var(--padding-0);
  background-color: transparent;
  width: var(--width-24);
  height: var(--height-24);
  flex-shrink: 0;
  z-index: 0;
}
.huge-icon-child,
.huge-icon-item {
  position: absolute;
  height: 83.33%;
  width: 75%;
  top: 8.33%;
  right: 12.5%;
  bottom: 8.33%;
  left: 12.5%;
  border-radius: 4px;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.huge-icon-item {
  height: 6.25%;
  width: 16.67%;
  top: 75%;
  right: 41.67%;
  bottom: 18.75%;
  left: 41.67%;
  border-radius: 2px;
}
.menu-icon-child {
  width: var(--width-10);
  height: var(--height-10);
  position: absolute;
  margin: 0 !important;
  top: 2px;
  left: 16px;
  border-radius: var(--Radius-21);
  background-color: var(--Green-Accent);
  overflow: hidden;
  flex-shrink: 0;
  display: none;
  z-index: 1;
}
.inicio {
  position: relative;
  line-height: var(--lh-18);
}
.chat-icon,
.vector-icon10,
.vector-icon11,
.vector-icon8,
.vector-icon9 {
  position: absolute;
  height: 83.33%;
  width: 83.33%;
  top: 8.33%;
  right: 8.33%;
  bottom: 8.33%;
  left: 8.33%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.chat-icon,
.vector-icon10,
.vector-icon11,
.vector-icon9 {
  height: 6.25%;
  width: 79.17%;
  top: 33.33%;
  right: 10.42%;
  bottom: 60.42%;
  left: 10.42%;
}
.chat-icon,
.vector-icon10,
.vector-icon11 {
  height: 22.92%;
  width: 14.58%;
  top: 10.42%;
  right: 56.25%;
  bottom: 66.67%;
  left: 29.17%;
}
.chat-icon,
.vector-icon11 {
  right: 29.17%;
  left: 56.25%;
}
.vector-icon11 {
  height: 25%;
  width: 20.83%;
  top: 47.92%;
  right: 37.5%;
  bottom: 27.08%;
  left: 41.67%;
}
.interface-essentialchat {
  cursor: pointer;
  border: 0;
  padding: var(--padding-0);
  background-color: transparent;
  width: var(--width-24);
  height: var(--height-24);
  position: relative;
  z-index: 0;
}
.icon2 {
  position: absolute;
  height: 80%;
  width: 80%;
  top: 8.33%;
  right: 11.67%;
  bottom: 11.67%;
  left: 8.33%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.menu-item5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  isolation: isolate;
  gap: var(--Spacing-1);
}
.story-frame-icon {
  width: 28px;
  border-radius: var(--Radius-4);
  max-height: 100%;
  object-fit: cover;
  z-index: 0;
}
.perfil {
  position: relative;
  line-height: var(--lh-18);
  z-index: 1;
}
.menu-item-child {
  width: var(--width-10);
  height: var(--height-10);
  position: absolute;
  margin: 0 !important;
  top: 20px;
  left: 24px;
  border-radius: var(--Radius-21);
  background-color: var(--Green-Accent);
  overflow: hidden;
  flex-shrink: 0;
  z-index: 2;
}