/* Disable loading of source sans pro until the component library styles have removed or self hosted them 
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/sourcesanspro-italic-latin-ext-400.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/sourcesanspro-italic-latin-400.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/sourcesanspro-regular-latin-ext-400.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/sourcesanspro-regular-latin-400.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/sourcesanspro-regular-latin-ext-600.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/sourcesanspro-regular-latin-600.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} 

@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/sourcesanspro-regular-latin-ext-700.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/sourcesanspro-regular-latin-700.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
*/

body {
    padding-top: 150px;
}

body a {
    text-decoration: underline;
}

.btn, .navbar a {
    text-decoration: none;
}

main {
    min-height: 50vh;
}

/** Fix for issue in safari, not in component library **/
.navbar-brand .logo {
    top: 0;
}

.hidden {
    display: none !important; /** i know this is ugly **/
}

.error {
    padding: 1em .5em;
    border-left: 4px solid #E02146;
    background: #ffdde3;
    color: black;
    padding: .5em .5em .5em 1em;
}

.error p {
    margin: 0;
}

.error p + p {
    margin-top: 1em;
}  

.btn-digid {
    background-image: url(../images/digid.svg);
    background-repeat: no-repeat;
    background-position: left .25em center;
    background-size: 2.5em;
    text-indent: 1.75em;
    width: auto;
}

.btn-microsoft {
    background-image: url(../images/ad.svg);
    background-repeat: no-repeat;
    background-position: left .25em center;
    background-size: 2.5em;
    text-indent: 1.75em;
    width: auto;
}

.btn-normal {
    width: auto;
}

.btn-yivi {
    background-image: url(../images/yivi.svg);
    background-repeat: no-repeat;
    background-position: left .25em center;
    background-size: 2.5em;
    text-indent: 1.75em;
    width: auto;
}

.btn-eherkenning {
    background-image: url(../images/eherkenning.png);
    background-repeat: no-repeat;
    background-position: left .25em center;
    background-size: 2.5em;
    text-indent: 1.75em;
    width: auto;
}

.card-number {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 2rem;
}

.card-number>* {
    flex-grow: 1;
    flex-basis: calc((30rem - 100%) * 999);
}

.card-number .card-body h3,
.card-number .card-body h5,
.card-number .card-title {
    font-family: Source Sans Pro;
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    line-height: 35px;
    margin-bottom: 0;
}

.card-number .card-body p {
    margin-top: 8px;
}

.contact .items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.contact i.mdi,
.contact span.mdi {
    width: 2rem;
    color: #a80a2d;
}

.contact .items p {
    width: 100%;
    margin-left: 2rem;
}

.login-selector {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.login-selector > * {
  flex-grow: 1;
  flex-basis: calc(( 33rem - 100%) * 999);
}

.login-selector > :nth-last-child(n+ 3),
.login-selector > :nth-last-child(n+ 3) ~ * {
  flex-basis: 100%;
}

.login-selector a {
    display: block;
}

.login-selector .info {
    background: #40c4ff;
    color: black;
    padding: .5em 1em;
    margin: 1em .5em .5em .5em;
    border-radius: 2px;
}

table {
    margin-bottom: 2rem;
}

table tr th {
    width: 35%;
}

.verwerkingen table tr th {
    width: auto;
}

footer.page-footer {
    margin-top: 4rem;
}

/* svg icons for mdi: not part of component library (yet) */
.card-body svg {
    fill: #a80a2d;
}

.footer-content .link-list li svg {
    font-size: 1.1875rem;
    padding: .625rem .5rem;
    width: 35px;
    height: 40px;
    fill: white;
}

.navbar-nav svg {
    fill: white;
}

.md-form label {
    left: initial;
}