.bg-lightred {
  background-color: #f7f7f7;
}

.text-red {
  color: #ff4550;
}

.text-lightred {
  color: #f7f7f7;
}

.text-mango {
  color: #fdc06f;
}

.text-skyblue {
  color: #1cc4f3;
}

.text-green {
  color: #89c541;
}

.text-green-2 {
  color: #4cbc9a;
}

.text-orange {
  color: #f26929;
}

.text-magnolia {
  color: #f3f4fe;
}

.text-lightpurple {
  color: #a098ae;
}

.text-purple {
  color: #9f2c93;
}

.text-rhino {
  color: #303972;
}

main {
  width: 1283px;
  max-width: 100%;
}

.navbar {
  background: #3aa5f3 !important;
}

.notification {
  background: #303972 !important;
}

.notification-container {
  background: white;
  width: 100%;
  padding: 32px;
  border-radius: 20px;
}

.notification-container .day {
  margin-bottom: 50px;
}

.notification-container .event {
  position: relative;
  padding-left: 25px;
  margin-bottom: 30px;
}

.notification-container .event::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  height: calc(100% + 30px);
  width: 2px;
  background: #a098ae;
}

.notification-container .event::after {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  height: 8px;
  width: 8px;
  background: white;
  border-radius: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  outline: 7px solid #303972;
  z-index: 10;
}

.notification-container .dayend::before {
  display: none;
}
/*# sourceMappingURL=notification.css.map */