:root {
  --bs-primary: #066fd1;
  /* Base color for primary text, background, buttons, etc. */
  --bs-secondary: #6c7a91;
  /* Base color for secondary text, background, buttons, etc. */
  --bs-success: #2fb344;
  /* Base color for success text, background, buttons, etc. */
  --bs-warning: #f76707;
  /* Base color for warning text, background, buttons, etc. */
  --bs-danger: #d63939;
  /* Base color for danger text, background, buttons, etc. */
  --bs-dark: #182433;
  /* Base color for dark text, background, buttons, etc. */
  --bs-light: #f6f8fb;
  /* Base color for light text, background, buttons, etc. */
  --bs-info: #4299e1;

  /* Base color for info text, background, buttons, etc. */
  body {
    color: rgba(32, 32, 32, 0.7);
    /* Set a lighter black for all text */
  }

  button,
  input,
  select,
  textarea {
    box-shadow: none !important;
  }

  .card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.089);
    /* Slight shadow */
    border: none;
    /* No border */
    border-radius: 16px;
    /* More curve */

  }

  .card .card-title,
  .card .card-text {
    color: rgba(32, 32, 32, 0.7);
    /* Set a lighter black for card text */
  }
}


body,
html {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.content {
  flex-grow: 1;
  padding-top: 56px;
  /* Offset for fixed top nav */
  padding-bottom: 56px;
  /* Offset for fixed bottom nav */
  display: none;
}

.content.active {
  display: block;
}

.badge-counter {
  position: absolute;
  top: 2px;
  right: 0px;
  transform: translate(25%, -25%);
  border-radius: 100%;
  padding: 0.1em 0.6em;
  /* Reduced padding for smaller size */
  font-size: 0.7rem;
  /* Reduced font size */
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #f8f9fa;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
  padding: 0.5rem 0;
}

.bottom-nav a {
  font-size: 0.8rem;
  color: #495057;
}

.bottom-nav a .tabler-icon {
  font-size: 24px;
}