h1, h2, h3, h4, h5, h6 {
    font-family: Bahnschrift;
    padding: 8px 0;
    color: var(--cyfd-raisin-black);
}

h1 {
    font-size: 40px;
    border-radius: 8px 8px;
    color: var(--cyfd-raisin-black);
}

a, a h1 {
    color: var(--cyfd-dark-red) !important;
    text-decoration: none;
}

a:hover, a h1:hover {
    color: var(--cyfd-terracotta) !important;
}

a.button-link, button.btn, a.btn {
    background-color: var(--cyfd-teal) !important;
    color: var(--cyfd-white) !important;
    border: 1px solid var(--cyfd-teal) !important;
}

a.button-link:hover, button.btn:hover, a.btn:hover {
    background-color: var(--cyfd-turquoise-ice) !important;
    color: var(--cyfd-burgandy) !important;
}

label {
    font-family: Bahnschrift;
    font-weight: bold;
}

.breadcrumb {
    padding: 0 8px 0 16px;
}

.breadcrumb-item {
    color: var(--cyfd-blue-grey) !important;
}

main .nav-link, .page-link {
    background-color: var(--cyfd-turquoise-ice) !important;
    color: var(--cyfd-burgandy) !important;
    border: 0 !important;
    border-radius: 6px 6px 0 0 !important;
}

main .nav-link:hover, .page-link:hover {
    background-color: var(--cyfd-jade-compliant) !important;
    color: var(--cyfd-raisin-black) !important;
}

main .nav-link.active, .pagination .active .page-link {
    background-color: var(--cyfd-teal) !important;
    color: var(--cyfd-white) !important;
    border: 0 !important;
    border-radius: 8px 8px 0 0;
}

.formio-component {
    /* Override the background color to force transparency so the main background isnt interrupted */
    background-color: #ffffff00 !important;
}

.pagination {
    border-bottom: 1px solid grey;
}

#wizard-epcnmuj-header {
    padding: 0;
}

.form-check-label:hover, .form-check-label input:hover {
    cursor: pointer;
}