@font-face {
    font-family: 'DIN Pro';
    src: local('DIN Pro'), local('DINPro'), url(../fonts/DINPro.woff) format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DIN Pro';
    src: local('DIN Pro Medium'), local('DINPro-Medium'), url(../fonts/DINPro-Medium.woff) format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DIN Pro';
    src: local('DIN Pro Bold'), local('DINPro-Bold'), url(../fonts/DINPro-Bold.woff) format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --bs-font-sans-serif: "DIN Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --bs-primary: #337ab7;
    --bs-primary-rgb: 51, 122, 183;
    --bs-link-color: #337ab7;
    --bs-link-color-rgb: 51, 122, 183;
    --bs-link-hover-color: #286090;
    --bs-link-hover-color-rgb: 40, 96, 144;
}

body {
    font-size: 16px;
    letter-spacing: -.02rem;
    min-width: 320px;
}

.page-main {
    padding: 2rem 0 3rem 0;
}

.page-name {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

.btn-primary {
    --bs-btn-bg: #337ab7;
    --bs-btn-border-color: #337ab7;
    --bs-btn-hover-bg: #286090;
    --bs-btn-hover-border-color: #286090;
    --bs-btn-active-bg: #286090;
    --bs-btn-active-border-color: #286090;
    --bs-btn-disabled-bg: #337ab7;
    --bs-btn-disabled-border-color: #337ab7;
    --bs-btn-focus-shadow-rgb: 51, 122, 183;
}

.form-control:focus,
.form-check-input:focus {
    border-color: #8fb6d9;
    box-shadow: 0 0 0 .25rem rgba(51, 122, 183, .25);
}

.form-check-input:checked {
    background-color: #337ab7;
    border-color: #337ab7;
}

.text-primary {
    color: #337ab7 !important;
}

.img-pay-logo {
    filter: grayscale(100%);
}

.img-pay-card {
    width: 50px;
    height: 20px;
}

.pay-cert-note {
    font-size: .875rem;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    padding: .75rem 1rem;
}

.pay-cert-note summary {
    color: #337ab7;
    cursor: pointer;
}

.pay-cert-note li + li {
    margin-top: .375rem;
}

@media (max-width: 575.98px) {
    .page-main {
        padding-top: 1rem;
    }
    .page-name {
        font-size: 1.6rem;
    }
}