html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

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

.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;
    background-color: whitesmoke;
}

.btn-primary, button {
    background-color: #0c70c8;
    color: white;
}
    .btn-primary:hover, btn-primary:focus, btn-primary:active:focus, button:hover, button:focus, button:active:focus {
        background-color: #020a78;
    }

/* DataTables “Show N entries” dropdown */
/*.dataTables_length .form-select {
    background-image: none !important;*/ /* remove Bootstrap’s SVG chevron */
    /*background-color: #ffffff !important;*/ /* solid bg for contrast calc */
    /*color: #212529 !important;*/ /* dark text (? #212529) */
    /*border-color: #020a78;*/ /* visible border */
/*}*/

    /* Make sure focus is accessible too */
    /*.dataTables_length .form-select:focus {
        outline: 2px solid #0d6efd;
        outline-offset: 2px;
        box-shadow: none;*/ /* optional, if Bootstrap shadow reduces clarity */
    /*}*/

    /* Some browsers render <option> with their own colors—set a safe bg */
    /*.dataTables_length .form-select option {
        background-color: #ffffff;
        color: #212529;
    }*/




     


html, body {
    height: 100%;
    margin: 0;
    background-color: whitesmoke !important;
}

body {
    display: flex;
    flex-direction: column;
}

main[role="main"] {
    flex: 1 1 auto;
    padding-bottom: 1rem;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.container {
    flex: 1 1 auto;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/*Accessible color-profile*/
header.navbar, footer.footer {
    background-color: whitesmoke !important;
    color: #020a78 !important;
}

.navbar-brand, .nav-link {
    color: #020a78 !important; 
}

    .nav-link:hover {
        color: #0c70c8 !important;
    }


.table-borderless td, .table-borderless th {
    border-color: white !important;
}

body {
    background-color: #ffffff;
    color: #333333;
}

h1, h3 {
    color: #020a78;
}

/*strong {
    color: #0e6655;
}*/
table.dataEntry thead th {
    color: #020a78;
    font-weight: bold;
    background-color: #EEF6FF;
    border-radius: 15px;
}


table.dataEntry tbody tr td i {
    color: #020a78;
    font-weight: bold;
    background-color: #EEF6FF;
    border-radius: 15px;
}

table.dataEntry tbody {
    margin-left: 20px;
}

table.tblResults tbody thead tr td {
    padding: 2px;
}

.tblResults td:nth-child(2),
.tblResults th:nth-child(2) {
    width: 200px; /* Adjust as needed */
    white-space: nowrap;
    text-align: right;
}

.solid-header-row td,
.solid-header-row th {
    color: #020a78 !important;
    background-image: none !important;
    font-weight: bold;
    background-color: #EEF6FF !important;
    border-radius: 15px;
}

h1 {
}
/* site.css */
.calc-layout {
    display: grid;
    grid-template-columns: 55% 35%;
    column-gap: 2%;
    align-items: start;
    width: 100%;
    margin-top: 0; /* instead of 25px */
    background-color: whitesmoke;
    padding-top: 10px;
    padding-bottom: 10px;
}

.results, .entry {
    background: #fff;
    margin-left: 25px;
    border-radius: 20px;
    padding: 5px;
}

@media (max-width:992px) {
    .calc-layout {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 1rem;
    }
}
/* remove default margins on headings inside the banner */
.text-center h1,
.text-center h2 {
    margin: 0; /* collapse the whitespace */
    padding: 5px 0; /* optional, keeps breathing room */
}

/* ensure the section below the banner connects without stripe */
.text-center {
    margin-bottom: 0; /* kill default spacing below */
    background-color: whitesmoke;
}

/* tighten up spacing above calculator area */
/*.calc-layout {
    margin-top: 0;*/ /* instead of 25px */
/*background-color: whitesmoke;
    padding-top: 10px;
    padding-bottom: 10px;
}*/
.results-placeholder {
    background-color: whitesmoke; /* light blue background */
    color: #020a78; /* text color */
    border: 1px solid #cfe2ff; /* border */
    padding: 10px 15px;
    border-radius: 5px; /* rounded corners */
    font-weight: bold;
    margin-top: 10px;
}
.table-cila thead th {
    background-color: #0c70c8 !important;
    color: white !important;
    border-color: #020a78 !important;
    vertical-align: middle;
}
/*.table-cila tbody td:nth-child(n+3) {
    background-color: white;
}*/
.table-cila > :not(caption) > * > * {
    background-color: white !important;
    color: #020a78 !important;
    border-color: #020a78 !important;
}
.table-cila tbody{
    background-color: #E6EAFE !important;
    color: var(--bs-table-color) !important;
    border-color: var(--bs-table-border-color) !important;
    }
/* Pagination buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #E6EAFE !important; /* light blue background */
    color: #020a78 !important; /* navy text */
    border: 1px solid #020a78 !important;
    border-radius: 0.375rem; /* match bootstrap rounded corners */
    /*margin: 0 2px;
    padding: 4px 10px;*/
    cursor: pointer;
}

/* Base look */
.dataTables_wrapper .dataTables_paginate .pagination .page-link {
    background-color: #E6EAFE !important;
    color: #020a78 !important;
    border: 1px solid #020a78 !important;
    border-radius: 0.375rem;
}

    /* Hover only = gold */
    .dataTables_wrapper .dataTables_paginate .pagination .page-link:hover {
        background-color: #fbb83a !important;
        color: #020a78 !important;
        border-color: #fbb83a !important;
    }

    /* After click (focus), return to normal blue background */
    .dataTables_wrapper .dataTables_paginate .pagination .page-link:focus {
        background-color: #E6EAFE !important;
        color: #020a78 !important;
        border-color: #020a78 !important;
        box-shadow: 0 0 0 .2rem rgba(212,175,55,.25); /* optional gold focus ring */
    }

/* Active page number stays navy */
.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link {
    background-color: #020a78 !important;
    color: #fff !important;
    border-color: #020a78 !important;
}

/* Disabled prev/next */
.dataTables_wrapper .dataTables_paginate .pagination .page-item.disabled .page-link {
    background-color: #E6EAFE !important;
    color: #6c757d !important;
    border-color: #020a78 !important;
    pointer-events: none;
}


    /* Current/active page button */
    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background-color: #020a78 !important; /* solid navy */
        color: red !important;
        border: 1px solid #020a78 !important;
    }

    /* Disabled buttons (e.g. "Previous" on first page) */
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
       /* background: #f0f0f0 !important;*/
        color: darkgreen !important;
        /*border: 1px solid #ccc !important;*/
        cursor: default;
    }
    /* scope to DataTables pagination */
.dataTables_wrapper .dataTables_paginate .pagination .page-link {
    background-color: #E6EAFE !important;
    color: #020a78 !important;
    border: 1px solid #020a78 !important;
    border-radius: 0.375rem; /* optional */
}



/* current/active page */
.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link {
    background-color: #020a78 !important;
    color: #fff !important;
    border-color: #020a78 !important;
}

/* disabled (e.g., "Previous" on first page) */
.dataTables_wrapper .dataTables_paginate .pagination .page-item.disabled .page-link {
  background-color: #E6EAFE !important;
  color: #6c757d !important;
  border-color: #020a78 !important;
  pointer-events: none;
}
.dataTables_wrapper .dataTables_paginate .pagination .page-link:focus:not(:focus-visible) {
    box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .pagination .page-link:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(212,175,55,.35);
}
/* DataTables pagination — final */
.dataTables_wrapper .dataTables_paginate .pagination .page-link {
    background-color: #E6EAFE !important;
    color: #020a78 !important;
    border: 1px solid #020a78 !important;
    border-radius: 0.375rem;
}

    /* hover only (gold); no sticky focus */
    .dataTables_wrapper .dataTables_paginate .pagination .page-link:hover {
        background-color: #fbb83a !important;
        color: #020a78 !important;
        border-color: #fbb83a !important;
    }

    /* focus returns to normal blue (optional ring) */
    .dataTables_wrapper .dataTables_paginate .pagination .page-link:focus {
        background-color: #E6EAFE !important;
        color: #020a78 !important;
        border-color: #020a78 !important;
        box-shadow: 0 0 0 .2rem rgba(212,175,55,.25);
    }

        /* keyboard-only focus ring (prevents ring after mouse click) */
        .dataTables_wrapper .dataTables_paginate .pagination .page-link:focus:not(:focus-visible) {
            box-shadow: none !important;
        }

    .dataTables_wrapper .dataTables_paginate .pagination .page-link:focus-visible {
        box-shadow: 0 0 0 .2rem rgba(212,175,55,.35);
    }

/* active page stays navy */
.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link {
    background-color: #020a78 !important;
    color: #fff !important;
    border-color: #020a78 !important;
}

/* disabled prev/next */
.dataTables_wrapper .dataTables_paginate .pagination .page-item.disabled .page-link {
    background-color: #E6EAFE !important;
    color: #6c757d !important;
    border-color: #020a78 !important;
    pointer-events: none;
}