html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
    button {
        font-size: 1.2rem; /* larger font size on small/mobile screens */
        padding: 6px 8px; /* optionally increase padding for better touch targets */
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.overdue {
    color: red;
}

.incomplete {
    color: #f00;
}

.complete {
    color: #00f;
}

.hidden {
    display: none;
}



.button-container {
    display: flex;
    align-items: center;
    width: 100%; /* full page width */
    max-width: 1200px; /* optional max width to limit stretch */
    margin: 0 auto; /* center container if max-width is set */
    padding: 10px; /* optional padding */
    box-sizing: border-box;
}

.button-group-left button {
    margin-right: 8px; /* spacing between left buttons */
}

.button-group-right {
    margin-left: auto; /* push this group right */
}

.geolocate-icon {
    vertical-align: middle;
    margin-left: 5px;
    fill: #007cbf;
}

.notes {
    background-color: #f9f9f9; /* light grey */
    border: 1px solid #ddd;
    padding: 10px 15px;
    margin-top: 20px;
    border-radius: 4px;
}

    .notes strong {
        display: block;
        margin-bottom: 5px;
    }