:root {
    --base-font-size: 18px;
    --primary-color: #BF311A;
    --bs-primary: #BF311A;
    --primary-color-reverse: #FFFFFF;
    --header-color: #FFF;
    --header-color-reverse: #BF311A;
    --secondary-color: #333F47;
    --bs-secondary: #333F47;
    --secondary-color-reverse: #FFFFFF;
    --gray-lightest: #f8f9fa;
    --gray-light: #e9ecef;
    --gray-medium: #adb5bd;
    --gray-dark: #6c757d;
    --gray-darkest: #495057;
    --white: #FFF;
    --space-xs: 0.5rem;
    --space-sm: 1rem; /* 16px */
    --space-md: 1.5rem;
    --space-lg: 2rem;
}



html {
    font-size: var(--base-font-size);
    position: relative;
    min-height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #333F47;
}

h1, h2, h3, h4, h5, h6 {
    font-family: -apple-system, BlinkMacSystemFont, "ASAP", Arial, sans-serif;
    font-weight: 600;
    line-height: 1.2;
}

.site-dark {
    background: var(--gray-darkest);
    color: var(--white);
}


.site-footer, .alt {
    background-color: #F8F8F8;
}


.site-light {
    background: var(--gray-lightest);
    color: var(--gray-darkest);
}

.gray-medium {
    background: var(--gray-medium);
    color: var(--white);
}



.font-brand {
    color: var(--primary-color);
}

    .font-brand :hover {
        color: var(--gray-dark);
    }

.btn-brand {
    background-color: var(--primary-color);
    color: var(--white);
}


.fs-7 {
    font-size: 0.875rem;
}
.fs-8 {
    font-size: 0.75rem;
}


.text-primary {
    color: var(--primary-color);
}

a {
    color: var(--primary-color);
}

a:hover {
    color: var(--secondary-color);
}


.progress-bar {
    background-color: var(--primary-color);
}



.custom-navbar {
    background-color: var(--white);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

    .custom-navbar .navbar-nav .nav-link {
        color: #999;
    }

    .custom-navbar .navbar-brand {
        color: #999;
    }

    .custom-navbar .navbar-nav .nav-link:hover {
        color: #999;
    }

    .custom-navbar .navbar-nav .nav-link.active {
        color: #999;
    }



.form-check-input:focus {
    box-shadow: none; /* Removes the glow effect */
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-check-input:not(:checked) {
    background-color: transparent;
    border-color: var(--gray-darkest);
}



.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-color-reverse);
}

    .btn-primary:hover {
        background-color: var(--secondary-color);
        border-color: var(--secondary-color-reverse);
        color: #FFF;
    }


    .btn:hover {
        background-color: var(--secondary-color);
        border-color: var(--secondary-color-reverse);
        color: #FFF;
    }



.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    background-color: var(--primary-color-reverse);
    border-color: var(--primary-color-reverse);
    color: var(--gray-dark);
    box-shadow: 0 0 0 0.25rem var(--primary-color);
}



.jumbo-wrap {
    background-size: cover;
    background-color: var(--header-color);
    color: var(--white);
    width: 100%;
    display: flex; /* Flexbox for vertical alignment */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
}

.jumbo-home {
    background-color: var(--header-color);
}



.field-validation-valid {
    display: none;
}

.validation-summary-valid {
    display: none;
}

.validation-summary-errors {
}

    .validation-summary-errors ul {
        padding-left: 0;
        margin-bottom: 15px;
        list-style: none;
    }

    .validation-summary-errors li {
        background: #fff0f0;
        border-color: #ebccd1;
        padding: 5px;
        display: block;
        float: none;
        margin-bottom: 5px;
    }


.filter {
    display: table-cell;
}

.breadcrumb {
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
}

.breadcrumb-item {
    font-size: large;
    font-weight: 500;
}


.pagination .page-item {
    z-index: 3;
    color: #000;
    background-color: #fff;
    border-color: #007bff;
}

    .pagination .page-item a {
        color: #000;
    }

    .pagination .page-item.active .page-link {
        z-index: 3;
        color: #fff;
        background-color: #BF311A;
        border-color: #BF311A;
    }



.table-padded th,
.table-padded td {
    font-size: 1.1rem;
    padding: var(--space-xs);
    margin: 0rem;
}

.close {
    border:0;
    background-color:inherit;
}

form .card .card-body {
    font-size: 1.1rem;
    padding: var(--space-md);
}

form .form-control {
    font-size: 1.1rem;
}

label {
    margin-bottom:5px;
}

.filter-form {
    padding: 1.25rem;
    background-color: var(--gray-lightest);
}

.red-border {
    border:1px solid red;
}

.custom-select-auto-width {
    display: block;
    width: auto;
    min-width: 150px;
}

.numeric-input {
    max-width: 100px;
}

.card.detail-view label {
    font-weight:bold;
}