html, body {
    height: 100%;
    background-color: #FFFFFF;
}
body {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    
    /* font-family: "Open Sans", sans-serif; */
    font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    
    font-variation-settings: "wdth" 100;
    line-height: 1.8;
}

p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgb(107, 114, 128);
}


h1 {
    font-weight: 800;
    margin-top: 20px;
}

h2 {
    font-weight: bold;
    margin-top: 20px;
}

h3 {
    font-weight: bold;
    margin-top: 30px;
}

h4 {
    font-weight: bold;
}


table {
}

th {
    font-size: 0.9rem;
}

td {
    font-size: 0.9rem;
}

td.red_cell {
    background: #ffe6e6 !important;
}
td.green_cell {
    background: #e6ffe6 !important;
}

/* Dark garden green background for header and footer */
.component-header .nav {
    background-color: #13a345 !important;
}

/* Ensure header text is readable on dark background */
.component-header .nav-brand,
.component-header .nav-link {
    color: #ffffff !important;
}

.component-header .nav-brand:hover,
.component-header .nav-link:hover {
    color: #c9f4b8 !important;
}

.component-footer .footer {
    background-color: #13a345 !important;
    color: #ffffff;
}

/* Ensure footer text is readable on dark background */
.component-footer .footer-nav a,
.component-footer .footer-copyright {
    color: #ffffff;
}

.component-footer .footer-nav a:hover {
    color: #c9f4b8;
}

/* Override default button background color */
.btn-primary {
    background-color: #185a2f !important;
    border-color: #185a2f !important;
}

.btn-primary:hover {
    background-color: #1f6f3a !important;
    border-color: #1f6f3a !important;
}