html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #f4f7fc;
    overflow-x: hidden;
}
/* HEADER */
.header-strip {
    width: 100%;
    background: #357abd;
    color: white;
    font-size: 1.4em;
    padding: 16px 28px 12px 28px;
    font-weight: bold;
    letter-spacing: 2px;
    box-sizing: border-box;
    user-select: none;
}
/*.footer-strip {
    background-color: #f9f871;*/ /* Example background color */
/*color: maroon;*/
/*display: flex;*/
/*align-items: flex-start;*/ /* aligns content to top of the strip */
/*height: 30px;*/ /* Example height of the strip */
/*width: 100%;*/ /* Make it span the full width */
/*padding-top: 1px;*/ /* raise text */
/*padding-bottom: 10px;*/ /* shrink bottom space */
/*padding-left: 10x;*/ /* side space */
/* position: fixed;*/ /* Fix it to the viewport */
/*bottom: 10px;*/ /* Position it at the very bottom */
/*left: 0;*/ /* Align it to the left edge */
/*right: 0;*/
/*text-align: center;*/
/*}*/

body::after {
    content: ""; /* Required for pseudo-elements */
    display: block; /* Make it a block-level element */
    background-color: #e0e0e0; /* Example background color */
    height: 15px; /* Example height of the strip */
    width: 100%; /* Make it span the full width */
    position: fixed; /* Fix it to the viewport */
    bottom: 0; /* Position it at the very bottom */
    left: 0; /* Align it to the left edge */
}

/* Header styling with gradient and shine */
table.glossy-table thead th {
    background: linear-gradient(to bottom, #4a90e2, #357ABD);
    color: white;
    letter-spacing: 1px;
    text-align: left;
    /*width:325px;*/
    /*font-weight: 600;*/
    font-size: 20px;
    padding: 12px 15px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
    border-bottom: 2px solid #2c5aae;
    position: relative;
}
table.glossy-table caption.caption {
    caption-side: top; /* place caption above table */
    width: 100%; /* span full table width */
    background: linear-gradient(to right, #4a90e2, #357ABD); /* glossy strip */
    font-size: 24px; /* text size */
    color: white; /* text color */
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center; /* center text */
    padding: 12px 0; /* vertical spacing */
    border-radius: 8px 8px 0 0; /* rounded top corners */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Override text color specifically for <td> cells */
table.glossy-table tbody tr td {
    color: darkred; /* This will override the row color for each cell */
    font-size: 24px;
    padding: 10px 15px;
}

table.glossy-table tbody th {
   /* width: 325px;*/
    color: #5d835b; /* Your desired blue color */
    letter-spacing: 2px; /* increase space between letters by 2 pixels */
    font-size: 20px;
    border-collapse: collapse; /* Prevents double borders */
    border-right: 1px groove white; /* Adds a 1px solid black border to the right of each cell */
    padding: 8px; /* Adds some padding for better readability */
}
/*.table-label {
    font-size: 24px;
    color: #003399;
}*/
table.glossy-table tbody td {
   /* width: 275px;*/
    font-size: 20px;
    color: darkgreen;
}
/* Shine highlight overlay on header */
table.glossy-table thead th::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0));
    border-radius: 8px 8px 0 0;
    pointer-events: none;
}

/* Body rows */
table.glossy-table tbody tr {
    background: linear-gradient(to bottom, #f9fcff, #dbe9ff);
    border-bottom: 1px solid #c1d1f6;
    width: 275px;
    transition: background 0.3s ease;
    cursor: default;
}

    /* Row hover effect with shine */
    table.glossy-table tbody tr:hover {
        background: linear-gradient(to bottom, #e1eaff, #b6cbff);
        box-shadow: inset 0 8px 15px rgba(255, 255, 255, 0.5);
    }

/* Table cells */
table.glossy-table td {
    padding: 10px 15px;
}

.footer-strip {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #f9f871;
    color: maroon;
    height: 30px;
    z-index: 1000;
    text-align: left; /* Or center/right as needed */
    padding: 5px 24px;
    box-sizing: border-box;
}

    .footer-strip p {
        margin: 0;
        line-height: 1.2;
    }



.copyright-footer {
    /*position: fixed;*/ /* Makes the footer stick to the viewport */
    bottom: 0; /* Positions it at the very bottom */
    left: 0; /* Aligns it to the left edge */
    width: 100%; /* Makes it span the full width of the viewport */
    background-color: #333; /* Dark background color for the strip */
    color: white; /* White text color for readability */
    /*text-align: center;*/ /* Centers the copyright text */
    /*padding: 10px 0;*/ /* Adds some vertical padding */
    font-size: 0.9em; /* Slightly smaller font size */
    z-index: 1000; /* Ensures it appears above other content if necessary */
}