/* Global css */
:root {
    --primary-color: #34b7a7;
    --primary-color-light: #a7ede0;
    --primary-color-dark: #218378;
    --primary-color-dark-rgb: 33, 131, 120;

    --navbar-color: #e9e8e6;

    /* Neutrals */
    --white: #ffffff;
    --black: #000000;
    --gray-100: #f8f9fa;
    --gray-300: #dee2e6;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
}

/* Manage datatables pagination style, overriding bootstrap properties */
.pagination {
    --bs-pagination-color: var(--primary-color);
    --bs-pagination-hover-color: var(--primary-color-dark);
    --bs-pagination-focus-color: var(--primary-color);
    --bs-pagination-active-color: var(--white);
    --bs-pagination-active-bg: var(--primary-color);
    --bs-pagination-active-border-color: var(--primary-color);
    --bs-pagination-focus-box-shadow: none;
}

/* Handled border color of inputs / selects in case of "focus" */
.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0 var(--primary-color-light);
}

/* Customized bootstrap "primary" button colors */
.btn-outline-primary {
    --bs-btn-color: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-focus-shadow-rgb: 13,110,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-color);
    --bs-btn-active-border-color: var(--primary-color);
    --bs-btn-active-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--primary-color);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--primary-color);
    --bs-gradient: none;
    --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--primary-color-dark-rgb), 0.5);
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-color-dark);
    --bs-btn-hover-border-color: var(--primary-color-dark);
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-color-dark);
    --bs-btn-active-border-color: var(--primary-color-dark);
    --bs-btn-active-shadow: inset 0 0px 0px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--primary-color);
    --bs-btn-disabled-border-color: var(--primary-color);;
}

/* Customized bootstrap checkboxes */
.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.form-check-input:hover { cursor: pointer; }
.form-check-input:focus {
    border-color: var(--primary-color);
    outline: 0;
    box-shadow: 0 0 0 0 var(--primary-color);
}

/* Change the style of labels in forms */
.form-label {
    margin-bottom: .3rem !important;
    color: var(--gray-900) !important;
    font-weight: 600 !important;
    font-style: normal !important;
    text-transform: capitalize !important;
}

/* Manage card header background to display information */
.bg-secondary {
    background-color: var(--navbar-color) !important;
    color: var(--gray-900) !important;
}

/* Manage button links with our palette */
.btn-link {
    --bs-btn-font-weight: 400;
    --bs-btn-color: var(--primary-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--primary-color-dark);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--primary-color-dark);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-box-shadow: none;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    text-decoration: underline;
}

/* Report: expansion panel */
.accordion-button:not(.collapsed) {
    color: var(--black);
    background-color: var(--white);
    box-shadow: none;
}
.accordion-button:focus {
    z-index: 3;
    border-color: var(--primary-color);
    outline: 0;
    box-shadow: none;
}
.accordion-button:not(.collapsed)::after {
    filter: brightness(0) saturate(100%) invert(45%) sepia(28%) saturate(990%) hue-rotate(128deg) brightness(92%) contrast(90%) !important;
}