html {
    font-size: 14px;
}

main {
    padding-bottom: 80px;
}

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

.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 #282d31;
}

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

body {
    margin:0;
    padding-bottom: 80px;
}

.h1 {
    font-size: x-small;
}

.btn-primary {
    color: #fff;
    background-color: #758c8D;
    border-color: #758c8D;
}

    .btn-primary:hover {
        color: #fff;
        background-color: #5c636a;
        border-color: #5c636a;
    }

    .btn-check:focus + .btn-primary,
    .btn-primary:focus {
        color: #fff;
        background-color: #2c3e50;
        border-color: #2c3e50;
        box-shadow: 0 0 0 0.25rem #6c757d;
    }

    /* ACTIVE STATE — this is the missing piece */
    .btn-primary:not(:disabled):not(.disabled):active,
    .btn-primary:not(:disabled):not(.disabled).active,
    .show > .btn-primary.dropdown-toggle {
        color: #fff;
        background-color: #2c3e50;
        border-color: #2c3e50;
    }

        .btn-primary:active:focus,
        .btn-primary.active:focus,
        .show > .btn-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.25rem #2c3e50;
        }

    .btn-primary:disabled,
    .btn-primary.disabled {
        color: #fff;
        background-color: #2c3e50;
        border-color: #2c3e50;
    }

.form-check-input:focus {
    border-color: rgba(255, 255, 255, 0.15);
    outline: 0;
    box-shadow: 0 0 0 0.25rem #758c8D;
}

.form-check-input:checked {
    background-color: #758c8D;
    border-color: #758c8D;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background-color: #495057;
}

.nav-link {
    display: block;
    padding: 0.5rem 1rem;
    color: #212529;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

    .nav-link:hover, .nav-link:focus {
        color: #2c3e50;
    }

    .nav-link.disabled {
        color: #6c757d;
        pointer-events: none;
        cursor: default;
    }

.page-item.active .page-link {
    color: #fff !important;
    background-color: #2c3e50 !important;
    border-color: #000 !important;
}

.page-link {
    color: #000 !important;
    background-color: #fff !important;
    border: 1px solid #dee2e6 !important;
}

    .page-link:hover {
        color: #2c3e50 !important;
        background-color: #000 !important;
        border-color: #000 !important;
    }

.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: 0.25rem;
    opacity: 0.5;
}

    .btn-close:hover {
        color: #000;
        text-decoration: none;
        opacity: 0.75;
    }

    .btn-close:focus {
        outline: 0;
        box-shadow: 0 0 0 0.25rem #6c757d;
        opacity: 1;
    }

    .btn-close:disabled, .btn-close.disabled {
        pointer-events: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        opacity: 0.25;
    }

.btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
}


.btn-danger {
    color: #fff;
    background-color: #8c1000;
    border-color: #8c1000;
}

    .btn-danger:hover {
        color: #fff;
        background-color: #bb2d3b;
        border-color: #b02a37;
    }

    .btn-check:focus + .btn-danger, .btn-danger:focus {
        color: #fff;
        background-color: #bb2d3b;
        border-color: #b02a37;
        box-shadow: 0 0 0 0.25rem #6c757d;
    }

    .btn-check:checked + .btn-danger, .btn-check:active + .btn-danger, .btn-danger:active, .btn-danger.active, .show > .btn-danger.dropdown-toggle {
        color: #fff;
        background-color: #b02a37;
        border-color: #a52834;
    }

        .btn-check:checked + .btn-danger:focus, .btn-check:active + .btn-danger:focus, .btn-danger:active:focus, .btn-danger.active:focus, .show > .btn-danger.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.25rem #6c757d;
        }

    .btn-danger:disabled, .btn-danger.disabled {
        color: #fff;
        background-color: #dc3545;
        border-color: #dc3545;
    }

.btn-light {
    color: #000;
    background-color: #BDC3C7;
    border-color: #BDC3C7;
}

    .btn-light:hover {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
    }

    .btn-check:focus + .btn-light, .btn-light:focus {
        color: #000;
        background-color: #BDC3C7;
        border-color: #BDC3C7;
        box-shadow: 0 0 0 0.25rem #BDC3C7;
    }

    .btn-check:checked + .btn-light, .btn-check:active + .btn-light, .btn-light:active, .btn-light.active, .show > .btn-light.dropdown-toggle {
        color: #000;
        background-color: #BDC3C7;
        border-color: #BDC3C7;
    }

        .btn-check:checked + .btn-light:focus, .btn-check:active + .btn-light:focus, .btn-light:active:focus, .btn-light.active:focus, .show > .btn-light.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
        }

    .btn-light:disabled, .btn-light.disabled {
        color: #000;
        background-color: #BDC3C7;
        border-color: #BDC3C7;
    }

a {
    color: #dc3545;
    text-decoration: underline;
}

    a:hover {
        color: #8c1000;
    }

    a:not([href]):not([class]), a:not([href]):not([class]):hover {
        color: inherit;
        text-decoration: none;
    }
table.dataTable thead th {
    border-bottom: 2px solid currentColor !important;
}
table.dataTable {
    border-bottom: 2px solid #000 !important;
}
    table.dataTable tbody tr {
        border-bottom: 1px solid #dee2e6 !important; /* lighter grey */
    }

/* Base button */
.btn-brpa {
    background-color: #758C8D;
    border-color: #758C8D;
    color: #fff;
}

    /* Hover */
    .btn-brpa:hover {
        background-color: #64797A;
        border-color: #64797A;
        color: #fff;
    }

    /* Active / Click */
    .btn-brpa:active,
    .btn-brpa:focus,
    .btn-brpa:active:focus {
        background-color: #556769;
        border-color: #556769;
        color: #fff;
        box-shadow: none;
    }

    /* Disabled */
    .btn-brpa:disabled,
    .btn-brpa.disabled {
        background-color: #AEB8B9;
        border-color: #AEB8B9;
        color: #eee;
    }

.cookie-banner {
    position: fixed;
    bottom: -200px; /* hidden initially */
    left: 0;
    width: 100%;
    background: #2c3e50; /* Dark Blue */
    color: #ECF0F1; /* Off White */
    padding: 20px 0;
    font-size: 1.1rem;
    border-top: 3px solid #34495e; /* Medium Blue accent */
    z-index: 9999;
    display: block;
    transition: bottom 0.6s ease;
}

    .cookie-banner.show {
        bottom: 0; /* slide up */
    }

    .cookie-banner .btn {
        background-color: #758c8D;
        border-color: #758c8D;
        color: white;
    }

        .cookie-banner .btn:hover {
            background-color: #64797A;
            border-color: #64797A;
        }

    .cookie-banner .btn-outline-light {
        border-color: #ECF0F1;
        color: #ECF0F1;
    }

        .cookie-banner .btn-outline-light:hover {
            background-color: rgba(255,255,255,0.2);
            color: white;
        }

/* BRPA progress bar styling */
.progress {
    background-color: #E5E8E8;
    border-radius: 6px;
    height: 18px;
}

.progress-bar {
    background-color: #758C8D;
    transition: width 0.4s ease-in-out, opacity 0.6s ease-in-out;
    border-radius: 6px;
}

    /* Completed state */
    .progress-bar.completed {
        opacity: 0.4; /* fade out */
        background-color: #4A5A5B; /* darker BRPA tone */
    }

.vertical-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 3rem;
    font-weight: 600;
    letter-spacing: 5px;
    color: #34495E; /* BRPA dark slate tone */
    padding: 10px 0;
    opacity: 0.8;
}

.brpa-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6c757d; /* Bootstrap secondary grey */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.brpa-value {
    font-size: 1rem;
    font-weight: 500;
    color: #2c3e50; /* BRPA dark slate */
}

.brpa-row {
    padding: 8px 0;
    border-bottom: 1px solid #e5e7eb;
}

.brpa-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #2c3e50;
    border-bottom: 2px solid #758c8D;
    padding-bottom: 4px;
    margin-bottom: 12px;
}