body {
    outline: 5px solid orange;
    padding: 10px;
}

.container {
    margin-top: 20px;
}

footer {
    margin-top: 20px;
}
    .edit-mode {
        background-color: #ffcc80 !important; /* Light orange for edit mode */
    }

    .unsaved-row {
        background-color: #fff3cd !important; /* Light yellow for unsaved changes */
    }

.green { border-color: #8cc63f; border-width-top: 6 }
.orange { border-color: #fbb03b;  border-width-top: 66}
.nav-border {
    border-radius: 30px;    
    }
/* Curve the nav bar with navbar class */
.header-dark .navbar {

border-radius:25px;
}
.navbar {
     border-radius: 30px;
}

    html, body {
      height: 100%;
      background-color: #d3d3d3; /* Set body background to light grey */
    }
    body {
      display: flex;
      flex-direction: column;
    }
    .content {
      flex: 1;
    }
    .navbar {
      padding-top: 0.25rem;
      padding-bottom: 0.25rem;
      margin-bottom: 0; /* Reduce space between navs */
      z-index: 1000; /* Ensure navbar stays on top */
    }
    #toolBar {
      display: flex;
      align-items: center;
      padding-left: 10px;
      height: 40px;
      font-size: 0.875rem; /* Reduced text size */
      border-bottom: 4px solid black; /* Black border on bottom */
      background-color: #f8f9fa; /* Light background to match navbar */
    }
    #toolBar a {
      margin-right: 20px; /* Space icons 20px apart */
    }
    .footer {
      background-color: #343a40; /* Match the theme background */
      color: white; /* Ensure text is visible */
      padding: 10px 0;
      text-align: center;
    }
    #navBar {
      border: 4px solid orange; /* Orange border around all sides */
      border-radius: 15px; /* Curved corners */
    }
    .card-container {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
    }
    .card-icon {
      font-size: 4rem;
    }