.notification-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-top: var(--border-width-thin) var(--border-style-solid) var(--gray-300);
  border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-300);
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

.notification-table th,
.notification-table td {
  border-left: none;
  border-right: none;
}

.notification-table th:first-child{
  border-left: var(--border-width-thin)  var(--border-style-solid) var(--gray-300);
}

.notification-table th:last-child{
  border-right: var(--border-width-thin)  var(--border-style-solid) var(--gray-300);
}

.notification-table th {
  font-weight: var(--font-weight-bold);
  text-align: left;
  padding: var(--spacing-5);
  border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-300);
  background-color: var(--gray-100);
}

.notification-table td {
  padding: var(--spacing-5);
  border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-300);
  vertical-align: middle;
}

.notification-table tr:last-child td {
  border-bottom: none;
}

.notification-table tr.read {
  background-color: var(--gray-100);
}

.notification-table tr.unread {
  background-color: white;
  font-weight: var(--font-weight-semibold);
}

.notification-type {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  white-space: nowrap;
}

.notification-type i {
  font-size: var(--font-size-base);
  display: inline-flex;
  align-items: center;
}

.notification-type i.bi-exclamation-triangle {
  color: var(--warning-500);
}

.notification__mark-as-read-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-sm);
  color: var(--gray-900);
  font-size: var(--font-size-sm);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-weight: var(--font-weight-semibold);
}

.notification__mark-as-read-btn:hover {
  background-color: var(--gray-100);
  color: var(--gray-900);
}

.notification__mark-as-read-btn i {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
}

.notification-button-mark-all-as-read {
  height: 32px !important;
}

.notification-button-mark-all-as-read i {
  font-size: var(--font-size-base);
}

.notification-date-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}