body:before {
  content: none;
}

#view {
  padding-top: 0;
}

.view__desc {
  margin-bottom: var(--spacing-12);
}

/* ============================================================================================== */
/* Cards                                                                                          */
/* ============================================================================================== */

.portal-menu {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-12);
}

.portal-menu__item {
  flex: 1 1 50%;
  position: relative;
  cursor: pointer;
}


.dashboard-card {
  flex: 0 0 calc(50% - var(--spacing-6));
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  width: calc(50% - var(--spacing-6));
  padding: var(--spacing-6);
  border-radius: var(--spacing-2);
  border: 1px solid var(--color-medium);
  background: var(--color-light);
  overflow: hidden;
}

.dashboard-card:is(:hover, :focus, :focus-visible) {
  border-color: var(--color-primary-shade);
  background: var(--color-light-tint);
  color: var(--color-primary-shade);
}


.dashboard-card::before {
  content: "";
  position: relative;
  flex: none;
  display: block;
  width: var(--spacing-16);
  height: var(--spacing-16);
  margin-block: 0 var(--spacing-4);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.dashboard-card--new::before {
  background-image: url('../../../component/StepTemplate/lib/template/advent/img/icon/midf-revamp-icon/file-plus.svg')
}

.dashboard-card--continue::before {
  background-image: url('../../../component/StepTemplate/lib/template/advent/img/icon/midf-revamp-icon/hourglass.svg')
}

.dashboard-card--list::before {
  background-image: url('../../../component/StepTemplate/lib/template/advent/img/icon/midf-revamp-icon/clock-rewind.svg')
}

.dashboard-card__title {
  color: var(--color-light-contrast);
  text-align: center;
}

.dashboard-card__subtitle {
  color: var(--color-primary-shade);
  font-size: 0.8rem;
  text-align: center;
}


@media screen and (max-width: 767.98px) {
  .portal-menu {
    gap: var(--spacing-6);
  }

  .dashboard-card {
    flex: 0 0 100%;
  }
}