:root {
        --bs-primary: #245dac;
        --bs-primary-rgb: 36, 93, 172;

        --bs-secondary: #6c757d;
        --bs-secondary-rgb: 108, 117, 125;

        --bs-success: #198754;
        --bs-success-rgb: 25, 135, 84;

        --bs-danger: #dc3545;
        --bs-danger-rgb: 220, 53, 69;

        --bs-warning: #ffc107;
        --bs-warning-rgb: 255, 193, 7;

        --bs-info: #0dcaf0;
        --bs-info-rgb: 13, 202, 240;

        --bs-light: #e9ecef;
        --bs-light-rgb: 233, 236, 239;

        --bs-dark: #212529;
        --bs-dark-rgb: 33, 37, 41;

        --bs-link-color: #245dac;
        --bs-link-hover-color: color-mix(in srgb, var(--bs-link-color) 85%, black);
        --bs-link-color-rgb: 36, 93, 172;
        --bs-link-active-color: color-mix(in srgb, var(--bs-link-color) 85%, black);
        --bs-link-active-color-rgb: 36, 93, 172;

        --font-family-base: Roboto, sans-serif;
    }

    body {
        font-family: var(--font-family-base);
    }

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

    .btn-primary:hover {
        background-color: color-mix(in srgb, var(--bs-primary) 85%, black);
        border-color: color-mix(in srgb, var(--bs-primary) 85%, black);
    }

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

    .bg-primary {
        background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
    }

    .border-primary {
        border-color: var(--bs-primary) !important;
    }

    .nav-link.active {
        color: var(--bs-primary) !important;
    }