/* Root Variables */
:root {
  --cwhite: #ffffff;
  --cblack: #0C0C0C;
  --gray-darker: #505050;
  --gray-neutral: #cbcbcb;
  --primary-900: #021736;
  --primary-700: #042352;
  --primary-600: #2f0155;
  --primary-500: #063a88;
  --primary-400: #0951be;
  --primary-100: #428af6;
  --primary-75: #78abf9;
  --primary-50: #e2beff;
  --primary-25: #e4eefe;
  --primary-color: #4c0387;
  --primary-alt: #f45e0c;
  --secondary-color: #a34fde;
  --secondary-alt-100: #fddbc9;
  --neutral-light: #ededed;
  --natural-lighter: #F9F9F9;
  --success-light: #d1f7e5;
  --success: #146c43;
  --error: #c91433;
}

/* custom classes */
.active-page-path {
  border-bottom: 3px solid var(--primary-color);
  color: var(--primary-color);
}

.active-account-page {
  border-left: 3px solid var(--primary-color);
}

.active-account-page .account-dashboard__menu-text {
  color: var(--primary-color);
}

/* account page: personal information */
.account-dashboard__sidebar {
  width: 390px !important;
}

.account-dashboard__menu-item:hover {
  border-left: 3px solid var(--primary-color);
}

.account-dashboard__menu-item:hover .account-dashboard__menu-text {
  color: var(--primary-color);
}

.account-dashboard__menu-arrow {
  display: none;
  color: var(--gray-darker);
}

.account-personal-info__list,
.security-settings__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 30px 20px;
}

/* payment */
.payment-history__table-container {
  overflow: auto;
}

.tapel-paid {
  border: 1px solid var(--success);
  color: var(--success);
  background-color: hsla(152, 69%, 25%, 0.250);
  padding: 10px;
}

.tapel-Onschedule {
  border: 1px solid var(--primary-400);
  color: var(--primary-400);
  background-color: hwb(216 4% 25% / 0.250);
  padding: 10px;
}

@media (max-width: 1024px) {
  table {
    min-width: 1000px;
  }
}

/* orders */
.order-history__title {}

.order-history__subtitle {}


.order-history-tap-active {
  border-bottom: 3px solid var(--primary-color);
  color: var(--primary-color);
}

/* .order-history__tab-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
} */

.order-history__tab:hover {
  border-bottom: 3px solid var(--primary-color);
  color: var(--primary-color);
}

/* notifcations */
.notifications__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px 20px;
}


/* account page responsive */
.hidden-dashboard {
  display: none;
}

@media (max-width: 640px) {
  #account-dashboard-sidebar {
    transition: transform 0.3s ease-in-out;
    transform: translateX(-150%);
  }

  #account-dashboard-sidebar.show {
    transform: translateX(0);
  }

  .account-dashboard__sidebar {
    position: absolute;
    z-index: 20;
    left: 0;
    top: 0;
    width: 100% !important;
    min-height: 100vh !important;
  }

  .account-dashboard__menu-arrow {
    display: block;
    right: 20px;
  }

  .account-personal-info__list,
  .security-settings__list {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}