.alert-box {
  display: flex;
  grid-template-columns: 20px 1fr auto;
  align-items: flex-start;
  gap: .6rem;
  padding: .8rem 1rem;
  border-radius: .5rem;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  font-size: .95rem;
  margin: .5rem 0;
  margin-bottom: 15px;
}
.alert-box .alert-text { flex:1 1 auto; }
.alert-box .alert-close {
  appearance: none; border: 0; background: transparent;
  font-size: 1.2rem; line-height: 1; cursor: pointer;
  padding: 0 .25rem; opacity: .7;
}
.alert-box .alert-close:hover { opacity: 1; }
.alert-box .alert-icon {
  width: 20px;
  height: 17px;
  flex: 0 0 20px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 16px 16px; /* pas aan indien nodig */
}

.alert-time { font-weight: 700; white-space: nowrap; }

.alert-box.success .alert-icon { background-image: url('../images/success.png'); background-size: 16px 16px;}
.alert-box.error   .alert-icon { background-image: url('../images/error.png'); background-size: 16px 16px;}
.alert-box.warning .alert-icon { background-image: url('../images/warning.png');background-size: 16px 16px; }
.alert-box.notice  .alert-icon { background-image: url('../images/notice.png'); background-size: 16px 16px;}
.alert-box.success { background:#ecfdf5; border-color:#10b98133; color:#065f46; }
.alert-box.error   { background:#fef2f2; border-color:#ef444433; color:#7f1d1d; }
.alert-box.warning { background:#fffbeb; border-color:#f59e0b33; color:#92400e; }
.alert-box.notice  { background:#eff6ff; border-color:#3b82f633; color:#1e3a8a; }

.alert-time { font-weight:700; white-space:nowrap; }
.alert-box span { display:block; }