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-6: 24px;
  --Spacing-7: 32px;
  --Spacing-41: 16px;

  /* Color */
  --Black-Teal: #233132;
  --Dark-Teal: #519ba1;
  --Green-Accent: #71f268;
  --Grey: #ededed;
  --White: #fff;

  /* Common Style Variables */

  /* Color */
  --color-black: #000;

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

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

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

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

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

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

  /* Opacities */
  --opacity-0_5: 0.5;

  --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: 171px;
  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);
}
.time-dark,
.time-value-icon {
  overflow: hidden;
  flex-shrink: 0;
}
.time-dark {
  width: 54px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.time-value-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;
}
.content,
.frame-parent {
  align-self: stretch;
  display: flex;
}
.content {
  height: 805px;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--Spacing-4);
  box-sizing: border-box;
  gap: var(--Spacing-6);
  text-align: left;
  font-size: var(--fs-14);
  color: var(--Black-Teal);
  font-family: var(--font-synonym);
}
.frame-parent {
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-20);
  flex-shrink: 0;
  text-align: center;
  font-size: 18px;
  font-family: var(--font-general-sans);
}
.arrow-left-parent {
  display: flex;
  align-items: center;
  gap: 16px;
}
.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%;
}
.notificaciones {
  position: relative;
  line-height: 22px;
}
.alertas {
  border-radius: var(--Radius-2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--Spacing-0);
  gap: var(--Spacing-2);
}
.interface-essentialmagnifier,
.menu-dots-2 {
  cursor: pointer;
  border: 0;
  padding: var(--padding-0);
  background-color: transparent;
  width: var(--width-24);
  position: relative;
}
.menu-dots-2 {
  max-height: 100%;
  object-fit: contain;
}
.interface-essentialmagnifier {
  height: var(--height-24);
}
.icon {
  position: absolute;
  height: 82.08%;
  width: 78.33%;
  top: 8.33%;
  right: 9.17%;
  bottom: 9.58%;
  left: 12.5%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.tag-container,
.tag-container-parent {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
}
.tag-container-parent {
  flex-direction: column;
  gap: var(--Spacing-4);
  flex-shrink: 0;
}
.tag-container {
  gap: var(--Spacing-2);
  text-align: center;
  font-size: var(--fs-12);
}
.tag {
  cursor: pointer;
  border: 0;
  padding: var(--padding-6) var(--Spacing-3) var(--Spacing-2);
  background-color: var(--Dark-Teal);
  border-radius: var(--Radius-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.etiqueta {
  position: relative;
  font-size: var(--fs-12);
  line-height: var(--lh-12);
  font-family: var(--font-synonym);
  color: var(--White);
  text-align: center;
}
.tag2 {
  border-radius: var(--Radius-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--padding-6) var(--Spacing-3) var(--Spacing-2);
}
.etiqueta2 {
  position: relative;
  line-height: var(--lh-12);
}
.nuevas-parent {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Spacing-1);
  font-size: var(--fs-16);
}
.new-indicator-icon,
.nuevas {
  align-self: stretch;
  position: relative;
  overflow: hidden;
}
.nuevas {
  line-height: var(--lh-20);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.new-indicator-icon {
  height: 0.5px;
  max-width: 100%;
  max-height: 100%;
}
.notif {
  align-self: stretch;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: var(--Spacing-4);
}
.profile-picture-icon {
  width: var(--width-52);
  border-radius: var(--Radius-4);
  max-height: 100%;
  object-fit: cover;
}
.notif-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--Spacing-0);
  min-width: 162px;
}
.user {
  align-self: stretch;
  display: flex;
  align-items: center;
}
.santiago-andr-dupont-morales-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
}
.santiago-andr-dupont-container {
  flex: 1;
  position: relative;
  line-height: var(--lh-18);
}
.santiago-andr-dupont {
  font-weight: 600;
}
.message {
  align-self: stretch;
  display: flex;
  align-items: center;
  gap: var(--gap-4);
  opacity: var(--opacity-0_5);
  color: var(--color-black);
}
.check,
.h {
  position: relative;
  flex-shrink: 0;
}
.h {
  line-height: var(--lh-18);
}
.check {
  height: var(--height-16);
  width: var(--width-16);
  display: none;
}
.vector-icon2 {
  position: absolute;
  height: 31.25%;
  width: 47.5%;
  top: 34.38%;
  right: 26.25%;
  bottom: 34.38%;
  left: 26.25%;
  max-width: 100%;
  overflow: hidden;
  max-height: 100%;
}
.notif-info2 {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--Spacing-4);
  min-width: 207px;
}
.user-message {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--Spacing-0);
}
.martina-castillo-silva-comenz-parent {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--Spacing-1);
}
.badge {
  height: var(--height-16);
  width: var(--width-16);
  overflow: hidden;
  flex-shrink: 0;
  display: none;
  align-items: center;
  padding: var(--padding-1) var(--padding-2);
  box-sizing: border-box;
}

.notifications-area {
  height: 785px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--Spacing-4);
  flex-shrink: 0;
}
.anteriores-parent {
  width: var(--width-358);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Spacing-1);
  font-size: var(--fs-16);
}
.notif-info3,
.notif4 {
  display: flex;
  gap: var(--Spacing-4);
}
.notif4 {
  width: var(--width-358);
  align-items: flex-start;
}
.notif-info3 {
  flex: 1;
  align-items: center;
}
.joaqun-rossi {
  font-weight: 600;
  font-family: var(--font-general-sans);
}
.message7,
.notif10 {
  display: flex;
  align-items: center;
}
.notif10 {
  width: var(--width-358);
  gap: var(--Spacing-4);
}
.message7 {
  width: 117px;
  height: var(--height-18);
  gap: var(--gap-4);
  opacity: var(--opacity-0_5);
  color: var(--color-black);
}
.notif13 {
  width: var(--width-358);
  display: flex;
  align-items: flex-start;
  gap: var(--Spacing-4);
  font-family: var(--font-general-sans);
}
.comenz-a-seguirte {
  font-family: var(--font-synonym);
}
.message9 {
  align-self: stretch;
  height: var(--height-18);
  display: flex;
  align-items: center;
}
.menu {
  width: 390px;
  border-radius: var(--Radius-21) var(--Radius-21) 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-2);
  background-color: var(--Green-Accent);
  overflow: hidden;
  flex-shrink: 0;
  display: none;
  z-index: 1;
}
.inicio {
  position: relative;
  line-height: var(--lh-18);
}
.vector-icon11,
.vector-icon12,
.vector-icon13,
.vector-icon14,
.vector-icon15 {
  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%;
}
.vector-icon12,
.vector-icon13,
.vector-icon14,
.vector-icon15 {
  height: 6.25%;
  width: 79.17%;
  top: 33.33%;
  right: 10.42%;
  bottom: 60.42%;
  left: 10.42%;
}
.vector-icon13,
.vector-icon14,
.vector-icon15 {
  height: 22.92%;
  width: 14.58%;
  top: 10.42%;
  right: 56.25%;
  bottom: 66.67%;
  left: 29.17%;
}
.vector-icon14,
.vector-icon15 {
  right: 29.17%;
  left: 56.25%;
}
.vector-icon15 {
  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 {
  cursor: pointer;
  border: 0;
  padding: var(--padding-0);
  background-color: transparent;
  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;
}
.icon-background {
  width: var(--width-10);
  height: var(--height-10);
  position: absolute;
  margin: 0 !important;
  top: 20px;
  left: 24px;
  border-radius: var(--Radius-2);
  background-color: var(--Green-Accent);
  overflow: hidden;
  flex-shrink: 0;
  z-index: 2;
}