.notifications .items .item {
  padding: 0.75rem;
  margin-block-end: 0.75rem;
  background-color: var(--color-blue-50);
  border-inline-end: 4px solid var(--color-blue-500);
  border-radius: 0.5rem;
}
.notifications .items .item.green {
  background-color: var(--color-green-50);
  border-inline-end: 4px solid var(--color-green-500);
}
.notifications .items .item .icon {
  width: 2rem;
  height: 2rem;
  background-color: var(--color-blue-100);
  border-radius: 100%;
  margin-block-start: 0.125rem;
}
.notifications .items .item.green .icon {
  background-color: var(--color-green-100);
}
.notifications .items .item.green .icon i {
  color: var(--color-green-600);
}
.notifications .items .item .content {
  width: 100%;
}
.notifications .items .item .content .title {
  margin-block-end: 0.25rem;
}
.notifications .items .item.green .content .title > span {
  color: var(--color-green-600);
}
.notifications .items .item .content p {
  margin-block-end: 0.5rem;
}
.notifications .showmore {
    text-align: center;
    padding-block-start: 1rem;
    margin-block-start: 1rem;
    border-block-start: 1px solid var(--color-gray-100);
}
.notifications .showmore button {
    width: 100%;
    cursor: pointer;
    color: var(--color-blue-600);
}