:root {
    --cnvs-themecolor: #54a7da;
    --cnvs-themecolor-rgb: 84, 167, 218;

    /* Bootstrap theme */
    --bs-primary: var(--cnvs-themecolor);
    --bs-primary-rgb: var(--cnvs-themecolor-rgb);

    /* Helpful shared vars */
    --bs-link-color: var(--cnvs-themecolor);
    --bs-link-hover-color: #3f96cb;
    --bs-focus-ring-color: rgba(84, 167, 218, 0.25);

    /* Buttons */
    --bs-btn-primary-bg: var(--cnvs-themecolor);
    --bs-btn-primary-border-color: var(--cnvs-themecolor);
    --bs-btn-primary-color: #fff;

    --bs-btn-primary-hover-bg: #3f96cb;
    --bs-btn-primary-hover-border-color: #3f96cb;
    --bs-btn-primary-hover-color: #fff;

    --bs-btn-primary-active-bg: #3586b6;
    --bs-btn-primary-active-border-color: #3586b6;
    --bs-btn-primary-active-color: #fff;

    --bs-btn-primary-disabled-bg: var(--cnvs-themecolor);
    --bs-btn-primary-disabled-border-color: var(--cnvs-themecolor);
    --bs-btn-primary-disabled-color: #fff;

    --bs-btn-outline-primary-color: var(--cnvs-themecolor);
    --bs-btn-outline-primary-border-color: var(--cnvs-themecolor);
    --bs-btn-outline-primary-hover-bg: var(--cnvs-themecolor);
    --bs-btn-outline-primary-hover-border-color: var(--cnvs-themecolor);
    --bs-btn-outline-primary-active-bg: #3586b6;
    --bs-btn-outline-primary-active-border-color: #3586b6;
}

/* Utilities / common element-level usage */
.text-primary,
.link-primary {
    color: var(--cnvs-themecolor) !important;
}

.bg-primary,
.badge.bg-primary {
    background-color: var(--cnvs-themecolor) !important;
}

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

.text-bg-primary {
    color: #fff !important;
    background-color: var(--cnvs-themecolor) !important;
}

/* Links */
a,
.page-link,
.nav-link:hover,
.nav-link:focus {
    color: var(--cnvs-themecolor);
}

a:hover,
a:focus,
.page-link:hover,
.page-link:focus {
    color: #3f96cb;
}

/* Buttons */
.btn-primary {
    background-color: var(--cnvs-themecolor);
    border-color: var(--cnvs-themecolor);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #3f96cb;
    border-color: #3f96cb;
    color: #fff;
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: #3586b6;
    border-color: #3586b6;
    color: #fff;
}

.btn-outline-primary {
    color: var(--cnvs-themecolor);
    border-color: var(--cnvs-themecolor);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--cnvs-themecolor);
    border-color: var(--cnvs-themecolor);
    color: #fff;
}

/* Forms */
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate,
.form-radio-input:checked {
    background-color: var(--cnvs-themecolor);
    border-color: var(--cnvs-themecolor);
}

.form-range::-webkit-slider-thumb {
    background: var(--cnvs-themecolor);
}

.form-range::-moz-range-thumb {
    background: var(--cnvs-themecolor);
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--cnvs-themecolor-rgb), 0.5);
    box-shadow: 0 0 0 0.25rem rgba(var(--cnvs-themecolor-rgb), 0.25);
}

/* Pagination */
.page-item.active .page-link {
    background-color: var(--cnvs-themecolor);
    border-color: var(--cnvs-themecolor);
    color: #fff;
}

/* Progress */
.progress-bar {
    background-color: var(--cnvs-themecolor);
}

/* Alerts */
.alert-primary {
    color: #0f3f5b;
    background-color: rgba(var(--cnvs-themecolor-rgb), 0.15);
    border-color: rgba(var(--cnvs-themecolor-rgb), 0.35);
}

/* List groups */
.list-group-item-primary {
    color: #0f3f5b;
    background-color: rgba(var(--cnvs-themecolor-rgb), 0.15);
}

/* Accordion */
.accordion-button:not(.collapsed) {
    color: var(--cnvs-themecolor);
}

/* Active nav / pills */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--cnvs-themecolor);
}

/* Dropdown active item */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--cnvs-themecolor);
}

/* Spinners */
.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: var(--cnvs-themecolor) !important;
}