.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--navbar-padding-x);
  padding-block: var(--navbar-padding-y);
  border-radius: var(--navbar-border-radius);
  border-width: var(--navbar-border-width);
  border-style: var(--navbar-border-style);
  border-color: var(--navbar-border-color);
}

.navbar-toggle {
  display: none;
}

.navbar-body {
  display: flex;
  width: 100%;
  text-align: center;
}
.navbar-body.navbar-left, .navbar-body.navbar-start {
  justify-content: flex-start;
  align-items: flex-start;
}
.navbar-body.navbar-center {
  justify-content: center;
  align-items: center;
}
.navbar-body.navbar-right, .navbar-body.navbar-end {
  justify-content: flex-end;
  align-items: flex-end;
}

.navbar-collapse {
  display: flex;
  padding-block: var(--navbar-collapse-padding-y);
  padding-inline: var(--navbar-collapse-padding-x);
  gap: var(--navbar-collapse-gap);
}
.navbar-collapse.list > .list-item {
  align-self: center;
  border-radius: var(--list-border-radius);
}
.navbar-collapse.list > .list-item .list-link {
  align-self: center;
}

@media (max-width: 768px) {
  .navbar {
    flex-wrap: wrap;
  }
  .navbar .navbar-body {
    flex-direction: column;
  }
  .navbar .navbar-body.navbar-left-bp, .navbar .navbar-body.navbar-start-bp {
    justify-content: flex-start;
    align-items: flex-start;
  }
  .navbar .navbar-body.navbar-center-bp {
    justify-content: center;
    align-items: center;
  }
  .navbar .navbar-body.navbar-right-bp, .navbar .navbar-body.navbar-end-bp {
    justify-content: flex-end;
    align-items: flex-end;
  }
  .navbar .navbar-body[hidden] {
    display: none;
  }
  .navbar .navbar-toggle {
    display: block;
  }
  .navbar .navbar-collapse {
    padding-block: var(--navbar-collapse-padding-y);
    padding-inline: var(--navbar-collapse-padding-x);
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .navbar-xs {
    flex-wrap: wrap;
  }
  .navbar-xs .navbar-body {
    flex-direction: column;
  }
  .navbar-xs .navbar-body.navbar-left-bp, .navbar-xs .navbar-body.navbar-start-bp {
    justify-content: flex-start;
    align-items: flex-start;
  }
  .navbar-xs .navbar-body.navbar-center-bp {
    justify-content: center;
    align-items: center;
  }
  .navbar-xs .navbar-body.navbar-right-bp, .navbar-xs .navbar-body.navbar-end-bp {
    justify-content: flex-end;
    align-items: flex-end;
  }
  .navbar-xs .navbar-body[hidden] {
    display: none;
  }
  .navbar-xs .navbar-toggle {
    display: block;
  }
  .navbar-xs .navbar-collapse {
    padding-block: var(--navbar-collapse-padding-y);
    padding-inline: var(--navbar-collapse-padding-x);
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .navbar-sm {
    flex-wrap: wrap;
  }
  .navbar-sm .navbar-body {
    flex-direction: column;
  }
  .navbar-sm .navbar-body.navbar-left-bp, .navbar-sm .navbar-body.navbar-start-bp {
    justify-content: flex-start;
    align-items: flex-start;
  }
  .navbar-sm .navbar-body.navbar-center-bp {
    justify-content: center;
    align-items: center;
  }
  .navbar-sm .navbar-body.navbar-right-bp, .navbar-sm .navbar-body.navbar-end-bp {
    justify-content: flex-end;
    align-items: flex-end;
  }
  .navbar-sm .navbar-body[hidden] {
    display: none;
  }
  .navbar-sm .navbar-toggle {
    display: block;
  }
  .navbar-sm .navbar-collapse {
    padding-block: var(--navbar-collapse-padding-y);
    padding-inline: var(--navbar-collapse-padding-x);
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .navbar-md {
    flex-wrap: wrap;
  }
  .navbar-md .navbar-body {
    flex-direction: column;
  }
  .navbar-md .navbar-body.navbar-left-bp, .navbar-md .navbar-body.navbar-start-bp {
    justify-content: flex-start;
    align-items: flex-start;
  }
  .navbar-md .navbar-body.navbar-center-bp {
    justify-content: center;
    align-items: center;
  }
  .navbar-md .navbar-body.navbar-right-bp, .navbar-md .navbar-body.navbar-end-bp {
    justify-content: flex-end;
    align-items: flex-end;
  }
  .navbar-md .navbar-body[hidden] {
    display: none;
  }
  .navbar-md .navbar-toggle {
    display: block;
  }
  .navbar-md .navbar-collapse {
    padding-block: var(--navbar-collapse-padding-y);
    padding-inline: var(--navbar-collapse-padding-x);
    flex-direction: column;
  }
}

@media (max-width: 1024px) {
  .navbar-lg {
    flex-wrap: wrap;
  }
  .navbar-lg .navbar-body {
    flex-direction: column;
  }
  .navbar-lg .navbar-body.navbar-left-bp, .navbar-lg .navbar-body.navbar-start-bp {
    justify-content: flex-start;
    align-items: flex-start;
  }
  .navbar-lg .navbar-body.navbar-center-bp {
    justify-content: center;
    align-items: center;
  }
  .navbar-lg .navbar-body.navbar-right-bp, .navbar-lg .navbar-body.navbar-end-bp {
    justify-content: flex-end;
    align-items: flex-end;
  }
  .navbar-lg .navbar-body[hidden] {
    display: none;
  }
  .navbar-lg .navbar-toggle {
    display: block;
  }
  .navbar-lg .navbar-collapse {
    padding-block: var(--navbar-collapse-padding-y);
    padding-inline: var(--navbar-collapse-padding-x);
    flex-direction: column;
  }
}

@media (max-width: 1280px) {
  .navbar-xl {
    flex-wrap: wrap;
  }
  .navbar-xl .navbar-body {
    flex-direction: column;
  }
  .navbar-xl .navbar-body.navbar-left-bp, .navbar-xl .navbar-body.navbar-start-bp {
    justify-content: flex-start;
    align-items: flex-start;
  }
  .navbar-xl .navbar-body.navbar-center-bp {
    justify-content: center;
    align-items: center;
  }
  .navbar-xl .navbar-body.navbar-right-bp, .navbar-xl .navbar-body.navbar-end-bp {
    justify-content: flex-end;
    align-items: flex-end;
  }
  .navbar-xl .navbar-body[hidden] {
    display: none;
  }
  .navbar-xl .navbar-toggle {
    display: block;
  }
  .navbar-xl .navbar-collapse {
    padding-block: var(--navbar-collapse-padding-y);
    padding-inline: var(--navbar-collapse-padding-x);
    flex-direction: column;
  }
}

@media (max-width: 1536px) {
  .navbar-xxl {
    flex-wrap: wrap;
  }
  .navbar-xxl .navbar-body {
    flex-direction: column;
  }
  .navbar-xxl .navbar-body.navbar-left-bp, .navbar-xxl .navbar-body.navbar-start-bp {
    justify-content: flex-start;
    align-items: flex-start;
  }
  .navbar-xxl .navbar-body.navbar-center-bp {
    justify-content: center;
    align-items: center;
  }
  .navbar-xxl .navbar-body.navbar-right-bp, .navbar-xxl .navbar-body.navbar-end-bp {
    justify-content: flex-end;
    align-items: flex-end;
  }
  .navbar-xxl .navbar-body[hidden] {
    display: none;
  }
  .navbar-xxl .navbar-toggle {
    display: block;
  }
  .navbar-xxl .navbar-collapse {
    padding-block: var(--navbar-collapse-padding-y);
    padding-inline: var(--navbar-collapse-padding-x);
    flex-direction: column;
  }
}