/* Foundation styles
: Reset */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td {
	margin:0; 
	padding:0; 
}
img {
    max-width: 100%;
	display: block;
}
* {
	box-sizing: border-box;
}

/* Foundation styles
: Colors West Friesland (default)  */

.ds-color {
    display: flex;
    text-align: center;
    font-size: 0.8em;
    align-items: center;
    justify-content: center;
}
:root {
    --ds-black: #333;
    --ds-white: #FFF;
    --ds-primary: #19a149;
    --ds-primary-dark: #009947;
    --ds-primary-contrast: var(--ds-white);
    --ds-primary-light: #14c546;
    --ds-primary-gradient: linear-gradient( to left, var(--ds-primary-light), var(--ds-primary-dark) );
    --ds-support: #389fd8;
    --ds-support-dark: #0d89cb;
    --ds-support-light: #389fd8;
    --ds-support-contrast: #FFF;
    --ds-support-gradient: linear-gradient( to left, var(--ds-support-light), var(--ds-support-dark) );
    /* http://www.colorbox.io/#steps=11#hue_start=198#hue_end=198#hue_curve=linear#sat_start=15#sat_end=15#sat_curve=linear#sat_rate=130#lum_start=98#lum_end=0#lum_curve=easeOutQuad#lock_hex=eef1f8#minor_steps_map=0 */
    --ds-grey-0: #eef1f8;
    --ds-grey-5: #e9edf6;
    --ds-grey-10: #e4eaf4;
    --ds-grey-20: #dae2ed;
    --ds-grey-30: #cdd7e3;
    --ds-grey-40: #bdc8d4;
    --ds-grey-50: #a8b4c0;
    --ds-grey-60: #8f9ba6;
    --ds-grey-70: #707c84;
    --ds-grey-80: #4d565c;
    --ds-grey-90: #262c2f;
    --ds-grey-100: #000000;
    --ds-grey-dark: var(--ds-grey-90);
    --ds-grey-medium: var(--ds-grey-60);
    --ds-grey-light: var(--ds-grey-0);
}
/** optionele footer achtergrond
:root body::before,
:root body.westfriesland::before {
    background-image: url('/img/woonmatch/westfriesland-footer.png');
    background-repeat: no-repeat;
    background-position: bottom;
    background-attachment: fixed;
    background-size: contain;
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    opacity: 0.2;
}
**/

/* Foundation styles
: Colors Viverion
 */

:root .viverion {
    --ds-primary: #571067;
    --ds-primary-dark: #380a42;
    --ds-primary-contrast: var(--ds-white);
    --ds-primary-light: #7b1792;
    --ds-primary-gradient: linear-gradient( to left, var(--ds-primary-light), var(--ds-primary-dark) );
    --ds-support: #6EC05D;
    --ds-support-dark: #468f38;
    --ds-support-light: #8edd7e;
    --ds-support-contrast: #FFF;
    --ds-support-gradient: linear-gradient( to left, var(--ds-support-light), var(--ds-support-dark) );
}


/* Foundation styles
: Colors Kop van Noord Holland */

:root .kopnh {
    --ds-primary: #d60a52;
    --ds-primary-dark: #a6083f;
    --ds-primary-contrast: var(--ds-white);
    --ds-primary-light: #ef0b5b;
    --ds-primary-gradient: linear-gradient( to left, var(--ds-primary-light), var(--ds-primary-dark) );
    --ds-support: #a73794;
    --ds-support-dark: #822b74;
    --ds-support-light: #c34baf;
    --ds-support-contrast: #FFF;
    --ds-support-gradient: linear-gradient( to left, var(--ds-support-light), var(--ds-support-dark) );
}


/* Foundation styles
: Colors Waterland */

:root .waterland {
    --ds-primary: #871654;
    --ds-primary-dark: #65103f;
    --ds-primary-light: #b51c70;
    --ds-primary-contrast: #FFF;
    --ds-primary-gradient: linear-gradient( to left, var(--ds-primary-light), var(--ds-primary-dark) );
    --ds-support: #35A8E0;
    --ds-support-dark: #1e8cc2;
    --ds-support-contrast: var(--ds-white);
    --ds-support-light: #5cb8e6;
    --ds-support-gradient: linear-gradient( to left, var(--ds-support-light), var(--ds-support-dark) );
}

/* Foundation styles
: Colors Algemeen
 */

:root {
    --ds-error-color: rgb(246, 65, 65);
    --ds-warning-color: rgb(247, 200, 62);
    --ds-info-color: rgb(78, 139, 245);
}

/* Foundation styles
: Typography
 */

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,500,500i|Roboto:300,300i,700,700i&display=swap');
:root {
    --ds-body-font: Roboto, sans-serif;
    --ds-heading-font: Montserrat, Helvetica, sans-serif;
}

/* Foundation styles
: Typography
 */

:root {
    --ds-font-size: calc(1.1 * 1rem);
    --ds-font-weight: 300;
    --ds-line-height: calc(1.5 * var(--ds-font-size));
    --ds-color: var(--ds-grey-dark);
    --ds-color-transparent: rgba(38,44,47,0);
    --ds-contrast: var(--ds-grey-medium);
    --ds-background: var(--ds-white);
    --ds-background-transparent: rgba(255,255,255,0);
    --ds-heading-weight: 500;
    --ds-heading-multiplier: 1.1;
    --ds-spacing: calc(0.6 * var(--ds-line-height));
}
body {
    font-family: var(--ds-body-font);
    font-size: var(--ds-font-size);
    font-weight: var(--ds-font-weight);
    line-height: var(--ds-line-height);
    background-color: var(--ds-background);
    color: var(--ds-color);
}
h1 {
    --ds-font-size: calc(1em * var(--ds-heading-multiplier) * var(--ds-heading-multiplier) * var(--ds-heading-multiplier));
    line-height: calc(var(--ds-heading-multiplier) * var(--ds-heading-multiplier) * var(--ds-heading-multiplier) * var(--ds-line-height));
}
h2 {
    --ds-font-size: calc(1em * var(--ds-heading-multiplier) * var(--ds-heading-multiplier));    
    line-height: calc(var(--ds-heading-multiplier) * var(--ds-heading-multiplier) * var(--ds-line-height));
}
h3 {
    --ds-font-size: calc(1em * var(--ds-heading-multiplier));
    line-height: calc(var(--ds-heading-multiplier) * var(--ds-line-height));
}
h1, h2, h3, h4, h5, h6 {
    font-size: var(--ds-font-size);
    font-weight: var(--ds-heading-weight);
    font-family: var(--ds-heading-font);
}
h4, h5, h6 {
    font-size: 1em;
}
h1, h2, h3, h4, h5, h6, p, ol, ul, dl {
    margin: var(--ds-spacing) 0;
}
dd, li, blockquote {
    margin-left: var(--ds-spacing);
}
a.ds-link-normal,
a:link {
    color: var(--ds-support-dark);
    text-decoration: none;
}
a.ds-link-visited,
a:visited {
    color: var(--ds-primary-dark);
}
a.ds-link-visited:hover,
a:visited:hover {
    color: var(--ds-primary-light);
}
a.ds-link-hover,
a:hover {
    color: var(--ds-support-light);
}
a.ds-link-active,
a:active {
    color: var(--ds-support-light);
}
.ds-font-sm {
    font-size: calc(0.85 * var(--ds-font-size));
    line-height: calc(0.85 * var(--ds-line-height));
}
.ds-font-xs {
    font-size: calc(0.65 * var(--ds-font-size));
    line-height: calc(0.65 * var(--ds-line-height));
}
.ds-font-lg {
    font-size: calc(1.25 * var(--ds-font-size));
    line-height: calc(1.25 * var(--ds-line-height));
}

/* Foundation styles
: Feather Icons */

.ds-icon {
    display: inline-block;
    height: var(--ds-line-height);
    width: 1em;
    vertical-align: bottom;
}

.ds-icon-feather {
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: square;
    stroke-linejoin: square;
    fill: none;
}

/* Grid: 12 column grid */

:root {
    --ds-grid-spacing: var(--ds-spacing);
    --ds-grid-spacing-column: var(--ds-grid-spacing);
    --ds-grid-spacing-row: var(--ds-grid-spacing);
    --ds-grid-columns: 1;
    --ds-screen-size: tiny;
}
.ds-grid-fixed {
    display: grid;
    grid-column-gap: var(--ds-grid-spacing-column);
    grid-row-gap: var(--ds-grid-spacing-row);
    /* add row-gap/column-gap or gap */
    grid-auto-flow: row;
    grid-template-rows: repeat(1, auto);
    grid-template-columns: repeat(var(--ds-grid-columns), 1fr);
}
.ds-grid-dense {
    grid-auto-flow: dense;
}
.ds-grid-fixed > * { /* FIXME: only target grid items */
    max-width: 100%;
    overflow: hidden; /* FIXME: better alternative? */
}
.ds-grid-span-2 {
    grid-column: auto / span 2;
}
.ds-grid-span-3 {
    grid-column: auto / span 3;
}
.ds-grid-span-4 {
    grid-column: auto / span 4;
}
.ds-grid-span-5 {
    grid-column: auto / span 5;
}
.ds-grid-span-6 {
    grid-column: auto / span 6;
}
.ds-grid-span-7 {
    grid-column: auto / span 7;
}
.ds-grid-span-8 {
    grid-column: auto / span 8;
}
.ds-grid-span-9 {
    grid-column: auto / span 9;
}
.ds-grid-span-10 {
    grid-column: auto / span 10;
}
.ds-grid-span-11 {
    grid-column: auto / span 11;
}
.ds-grid-span-6 {
    grid-column: auto / span 12;
}
.ds-grid-span-all {
    grid-column: 1 / -1;
}
.ds-grid-row-2 {
    grid-row: auto / span 2;
}
.ds-grid-row-3 {
    grid-row: auto / span 3;
}
.ds-grid-row-4 {
    grid-row: auto / span 4;
}
.ds-grid-row-5 {
    grid-row: auto / span 5;
}
.ds-grid-row-6 {
    grid-row: auto / span 6;
}
.ds-grid-row-7 {
    grid-row: auto / span 7;
}
.ds-grid-row-8 {
    grid-row: auto / span 8;
}
.ds-grid-row-9 {
    grid-row: auto / span 9;
}
.ds-grid-row-10 {
    grid-row: auto / span 10;
}
:root {
    --ds-screen-size: tiny;
    --ds-grid-columns: 1;
}
@media (min-width: 480px)  {
    :root {
        --ds-screen-size: small;
    }
    :root,
    .ds-grid-2,
    .ds-grid-3,
    .ds-grid-4,
    .ds-grid-6,
    .ds-grid-12 {
        --ds-grid-columns: 2;
    }
}
@media (min-width: 640px) {
    :root {
        --ds-screen-size: tablet;
    }
    :root,
    .ds-grid-4,
    .ds-grid-6,
    .ds-grid-12 {
        --ds-grid-columns: 4;
    }
    .ds-grid-3 {
        --ds-grid-columns: 3;
    }
}
@media (min-width: 992px) {
    :root {
        --ds-screen-size: medium;
    }
    :root,
    .ds-grid-6,
    .ds-grid-12 {
        --ds-grid-columns: 6;
    }
    .ds-grid-6,
    .ds-grid-12 {
        --ds-grid-columns: 6;
    }
}
@media (min-width: 1200px) {
    :root {
        --ds-screen-size: large;
    }
    .ds-grid-12 {
        --ds-grid-columns: 12;
    }
}
@media (min-width: 1800px) {
    :root {
        --ds-screen-size: extra-large;
    }
}


/* Grid: Flexible grid
 */

:root {
    --ds-grid-min-colwidth: 15rem;
}
.ds-grid {
    --ds-grid-spacing-column: var(--ds-grid-spacing);
    --ds-grid-spacing-row: var(--ds-grid-spacing);
    display: grid;
    grid-column-gap: var(--ds-grid-spacing-column);
    grid-row-gap: var(--ds-grid-spacing-row);
    grid-template-columns: repeat(auto-fit, minmax(var(--ds-grid-min-colwidth), 1fr));
}

/* Forms: Buttons */

:root, .ds-button {
    --ds-button-spacing: calc(0.5 * var(--ds-input-spacing));
    --ds-button-bg-color: var(--ds-grey-light);
    --ds-button-default-bg-color: var(--ds-white);
    --ds-button-border-color: var(--ds-grey-light);
    --ds-button-shadow-color: var(--ds-grey-medium);
    --ds-button-disabled-color: var(--ds-grey-medium);
    --ds-button-disabled-bg-color: var(--ds-white);
    --ds-button-primary-bg-color: var(--ds-primary);
    --ds-button-primary-color: var(--ds-primary-contrast);
    --ds-button-primary-border-color: var(--ds-primary);
    --ds-button-support-bg-color: var(--ds-support);
    --ds-button-support-color: var(--ds-support-contrast);
    --ds-button-support-border-color: var(--ds-support);
    --ds-button-line-height: calc(var(--ds-line-height) * 1.5);
}
:root .ds-button {
    line-height: var(--ds-button-line-height);
}
.ds-button {
    margin: 0 var(--ds-button-spacing) var(--ds-button-spacing) 0;
    overflow: visible;
    font: inherit;
    color: inherit;
    display: inline-block;
    box-sizing: border-box;
    padding: 0 calc(0.5 * var(--ds-line-height));
    vertical-align: middle;
    font-size: calc(0.875 * var(--ds-font-size));
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    background-color: var(--ds-button-bg-color);
    outline: 1px solid var(--ds-button-border-color);
    border: 0;
    white-space: nowrap;
}
.ds-button:hover {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 0 3px var(--ds-button-shadow-color);
}
a.ds-button,
a.ds-button:hover,
a.ds-button:active,
a.ds-button:visited {
    color: inherit;
}
.ds-button-default {
    background-color: var(--ds-button-default-bg-color);
}
a.ds-button-primary, a.ds-button-primary:hover,
a.ds-button-primary:active, a.ds-button-primary:visited,
.ds-button-primary, .ds-button-primary:hover {
    background-color: var(--ds-button-primary-bg-color);
    color: var(--ds-button-primary-color);
    border-color: var(--ds-button-primary-border-color);
}
a.ds-button-support, a.ds-button-support:hover,
a.ds-button-support:active, a.ds-button-support:visited,
.ds-button-support, .ds-button-support:hover {
    background-color: var(--ds-button-support-bg-color);
    color: var(--ds-button-support-color);
    border-color: var(--ds-button-support-border-color);
}
.ds-button:disabled {
    background-color: var(--ds-button-disabled-bg-color);
    color: var(--ds-button-disabled-color);
}
.ds-button:disabled:hover {
    cursor: not-allowed;
    box-shadow: 0 0 0;
}
.ds-button-group {
    display: flex;
    flex-wrap: wrap;
}
.ds-button-grow {
    display: block;
    width: 100%;
}
.ds-button-naked {
    border: 0;
    background: none;
    outline: none;
}

/* Forms: Icon Buttons
 */

.ds-button .ds-icon {
    height: var(--ds-button-line-height);
}

.ds-button-bar .ds-button:not(:last-child):not(:only-child) {
    margin-right: 0;
    border-right: 0;
}


/* Forms: Buttons with 2 states
 */

    .ds-button[data-simply-state] {
        height: var(--ds-button-line-height);
        overflow: hidden;
        box-sizing: content-box;
        white-space: normal;
    }
    .ds-button[data-simply-state] .ds-state {
        height: var(--ds-button-line-height);
        transform: translateY(calc(-1 * var(--ds-button-line-height)));
        transition: transform 0.2s ease;
        display: block;
        margin: 0;
    }
    .ds-button[data-simply-state="alt"] .ds-state {
        transform: translateY(0);
    }


/* Forms: Inputs */

:root {
    --ds-input-border: var(--ds-grey-light);
    --ds-input-spacing: var(--ds-spacing);
    --ds-input-font: var(--ds-font-family);
    --ds-input-font-size: 85%;
    --ds-radio-spacing: 0.2em;
}
.ds-form-group {
    clear: both;
    margin: var(--ds-input-spacing) 0;
}
.ds-form-checkbox-group {
    border: 1px solid var(--ds-grey-light);
}
.ds-form-field {
    margin: var(--ds-input-spacing) 0;
}
label.ds-form-field {
    display: block;
}
form.ds-grid-fixed label,
form.ds-grid label,
form .ds-grid-fixed label,
form .ds-grid label {
    margin: 0;
}
input[type="text"],
input[type="number"],
input[type="email"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="week"],
input[type="file"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
select {
    width: 100%;
    display: block;
    height: calc(var(--ds-line-height) * 1.5);
    margin: 0;
    margin-bottom: calc(var(--ds-line-height) * 0.5);
    box-sizing: border-box;
    background: inherit;
    border: 0px;
    outline: 1px solid var(--ds-input-border);
    padding: 0 0.5em;
    font-family: var(--ds-input-font);
    font-size: var(--ds-input-font-size);
    line-height: inherit;
}
select[multiple]{
    height: auto;
}
textarea {
    width: 100%;
    border: 0;
    outline: 1px solid var(--ds-input-border);
    padding: 0 0.5em;
    font-family: var(--ds-input-font);
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    height: calc(3 * var(--ds-line-height));
    margin-bottom: cal(0.5 * var(--ds-line-height));
    display: block;
}
input[type="radio"],
input[type="checkbox"] {
    width: auto;
    height: auto;
    padding: 0;
}
.ds-form-radio label {
    margin: 0;
}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTBweCIgdmlld0JveD0iMCAwIDQwMS45OTggNDAxLjk5OCIgaGVpZ2h0PSIyMHB4Ij4KPHBhdGggZD0iTTczLjA5MiwxNjQuNDUyaDI1NS44MTNjNC45NDksMCw5LjIzMy0xLjgwNywxMi44NDgtNS40MjRjMy42MTMtMy42MTYsNS40MjctNy44OTgsNS40MjctMTIuODQ3ICAgIGMwLTQuOTQ5LTEuODEzLTkuMjI5LTUuNDI3LTEyLjg1TDIxMy44NDYsNS40MjRDMjEwLjIzMiwxLjgxMiwyMDUuOTUxLDAsMjAwLjk5OSwwcy05LjIzMywxLjgxMi0xMi44NSw1LjQyNEw2MC4yNDIsMTMzLjMzMSAgICBjLTMuNjE3LDMuNjE3LTUuNDI0LDcuOTAxLTUuNDI0LDEyLjg1YzAsNC45NDgsMS44MDcsOS4yMzEsNS40MjQsMTIuODQ3QzYzLjg2MywxNjIuNjQ1LDY4LjE0NCwxNjQuNDUyLDczLjA5MiwxNjQuNDUyeiIvPgo8cGF0aCBkPSJNMzI4LjkwNSwyMzcuNTQ5SDczLjA5MmMtNC45NTIsMC05LjIzMywxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MTctNS40MjQsNy44OTgtNS40MjQsMTIuODQ3ICAgIGMwLDQuOTQ5LDEuODA3LDkuMjMzLDUuNDI0LDEyLjg0OEwxODguMTQ5LDM5Ni41N2MzLjYyMSwzLjYxNyw3LjkwMiw1LjQyOCwxMi44NSw1LjQyOHM5LjIzMy0xLjgxMSwxMi44NDctNS40MjhsMTI3LjkwNy0xMjcuOTA2ICAgIGMzLjYxMy0zLjYxNCw1LjQyNy03Ljg5OCw1LjQyNy0xMi44NDhjMC00Ljk0OC0xLjgxMy05LjIyOS01LjQyNy0xMi44NDdDMzM4LjEzOSwyMzkuMzUzLDMzMy44NTQsMjM3LjU0OSwzMjguOTA1LDIzNy41NDl6Ii8+Cjwvc3ZnPg==');
    background-repeat: no-repeat;
    background-position: right 0.3em center;
}
select[multiple] {
    background: none;
    -webkit-appearance: menulist;
    -moz-appearance: menulist; 
    appearance: menulist; 
}
.ds-form-help {
    font-size: 0.8em;
    color: var(--ds-grey-80);
    position: relative;
    top: -1em;
    xmargin-bottom: -1em;
}
.ds-grid-fixed > .ds-form-help,
.ds-grid-fixed + .ds-form-help {
    top: -2em;
    margin-bottom: -2em;
}
label,
.ds-form-field label,
.woonmatch-label {
    text-shadow: 0 0 0 black;
    font-size: 1.15rem;
}
.ds-form-checkbox-group label,
.ds-form-radio-group label {
    text-shadow: none;
    font-size: var(--ds-font-size);
}

/* Components: Accordion */


.ds-accordion summary {
    outline: none;
    cursor: pointer;
    border-top: 1px solid var(--ds-contrast);
    padding: calc(0.5 * var(--ds-spacing)) var(--ds-spacing);
    margin-bottom: -1px; /* to collapse the borders */
}
.ds-accordion summary:last-of-type {
    border-bottom: 1px solid var(--ds-contrast);
}
.ds-accordion summary.ds-grey-light {
    border-color: var(--ds-grey-medium);
}

.ds-accordion details[open] summary ~ * {
    animation: ds-animate-grow 0.5s ease-in-out;
}
.ds-accordion.ds-no-animation details[open] summary ~ * {
    animation: none;
}
@keyframes ds-animate-grow {
    0%   { max-height: 0;  overflow: hidden;}
    99%   { overflow: hidden;}
    100% { max-height: 10em; overflow: auto;}
}
@keyframes ds-animate-sweep {
    0%    { opacity: 0; margin-left: -10px}
    100%  { opacity: 1; margin-left: 0px}
}
.ds-accordion section {
    box-sizing: border-box;
    padding: var(--ds-spacing);
}


/* Components: Barometer */

.barometer {
    width: 1em;
    height: var(--ds-line-height);
    display: inline-block;
    background-image: url('/img/woonmatch/barometer-green.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    position: relative;
    top: 6px
}
.barometer-green {
    background-image: url('/img/woonmatch/barometer-green.png');
}
.barometer-yellow {
    background-image: url('/img/woonmatch/barometer-yellow.png');
}
.barometer-orange {
    background-image: url('/img/woonmatch/barometer-orange.png');
}
.barometer-red {
    background-image: url('/img/woonmatch/barometer-red.png');
}

/* Components: Box */

:root {
    --ds-box-radius: 3px;
    --ds-box-shadow: var(--ds-shadow-small);
}
.ds-box {
    border-radius: var(--ds-box-radius);
    box-shadow: var(--ds-box-shadow);
    position: relative;
    break-inside: avoid;
}
@supports (display: flow-root) {
    .ds-box {
        display: flow-root;
        padding: 0;
    }
}
.ds-box-top {
    border-top-left-radius: var(--ds-box-radius);
    border-top-right-radius: var(--ds-box-radius);
}
.ds-box-bottom {
    border-bottom-left-radius: var(--ds-box-radius);
    border-bottom-right-radius: var(--ds-box-radius);
}
.ds-dark-background {
    color: white;
    text-shadow: 0 0 2px var(--ds-black);
}


/* Components: Card */

:root {
    --ds-card-radius: var(--ds-box-radius);
    --ds-card-padding: var(--ds-spacing);
    --ds-card-shadow: var(--ds-box-shadow);
}
.ds-card {
    display: flex;
    flex-direction: column;
    box-shadow: var(--ds-card-shadow);
    border-radius: var(--ds-card-radius);
    position: relative;
    break-inside: avoid;
    padding: 0.05px;
}
.ds-card-header,
.ds-card-header-image > img {
    border-radius: var(--ds-card-radius) var(--ds-card-radius) 0 0;
}
.ds-card-footer,
.ds-card-footer-image > img {
    border-radius: 0 0 var(--ds-card-radius) var(--ds-card-radius);
}
.ds-card-header,
.ds-card-footer {
    flex-grow: 0;
}
.ds-card-header,
.ds-card-footer,
.ds-card-content {
    position: relative;
}
.ds-card-header-image,
.ds-card-footer-image {
    min-height: calc(var(--ds-line-height) * 6);
    color: white;
    text-shadow: 0 0 3px var(--ds-black);
}
.ds-card-content {
    flex-grow: 1;
}
.ds-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}
.ds-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

/* Components: Dialog */

:root {
    --ds-dialog-radius: calc( 2 * var(--ds-box-radius));
    --ds-dialog-shadow: var(--ds-shadow-large);
}

.ds-dialog {
    border: 0;
    width: calc( 50% - (1/2 * var(--ds-spacing)));
    min-width: 30em;
    box-shadow: var(--ds-dialog-shadow);
    padding: 0;
    z-index: 101;
    border-radius: calc(2px + var(--ds-dialog-radius));
}

.ds-dialog-narrow {
    width: calc( 33% - (1/2 * var(--ds-spacing)));
    min-width: 20em;
}

.ds-dialog-header,
.ds-dialog-header-image > img {
    border-radius: var(--ds-dialog-radius) var(--ds-dialog-radius) 0 0;
}
.ds-dialog-footer,
.ds-dialog-footer-image > img {
    border-radius: 0 0 var(--ds-dialog-radius) var(--ds-dialog-radius);
}

.ds-dialog-header,
.ds-dialog-footer {
    flex-grow: 0;
}

.ds-dialog-header,
.ds-dialog-footer,
.ds-dialog-content {
    position: relative;
    padding: 0.05px; 
}

.ds-dialog-header-image,
.ds-dialog-footer-image {
    min-height: calc(var(--ds-line-height) * 6);
    color: var(--ds-white);
    text-shadow: 0 0 3px var(--ds-black);
}
.ds-dialog-content {
    flex-grow: 1;
}

.ds-dialog-content .ds-alert {
    margin: calc(-1 * var(--ds-dialog-padding));
    margin-bottom: var(--ds-dialog-padding);
}

.ds-dialog-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 11;
    display: none;
}
dialog[open] ~ .ds-dialog-overlay {
    display: block;
}

:host .ds-button-light {
    background: transparent;
    outline: 0;
    line-height: var(--ds-line-height);
    padding: 0;
}

.ds-button-close {
    position: absolute;
    right: var(--ds-spacing);
    margin: 0;
}

/* Components: Media */

:root {
    --ds-media-radius: var(--ds-box-radius);
    --ds-media-shadow: var(--ds-box-shadow);
    --ds-media-media-size: 100px;
}
.ds-media {
    position: relative;
    width: 100%;
}

.ds-media-media {
    width: var(--ds-media-media-size);
    margin: var(--ds-spacing);
    float: left;
}
.ds-media-nospace > .ds-media-media {
    margin-top: 0;
    margin-left: 0;
}
.ds-media-media img {
    width: 100%;
}
.ds-media-content {
    float: left;
    width: calc(100% - var(--ds-media-media-size) - 3 * var(--ds-spacing));
}
.ds-media-nospace > .ds-media-content {
    width: calc(100% - var(--ds-media-media-size) - var(--ds-spacing));
}
.ds-media-nospace > .ds-media-content > :first-child {
    margin-top: 0;
}

/* Components: Caroussel */

.ds-slides {
	display: flex;
    width: 100%;
    height: 100%;
	position: relative;
	overflow-y: hidden;
	overflow-x: scroll;
	/* IE10 (touch only) + Edge*/
	-ms-scroll-snap-type: mandatory;
	/* safari 9 */
	-webkit-scroll-snap-type: mandatory;
	-webkit-scroll-snap-points-x: repeat(100%);
	-webkit-overflow-scrolling: touch;
	/* firefox */
	scroll-snap-destination: 0% 100%;
	scroll-snap-points-x: repeat(100%);
	scroll-snap-type: mandatory;
	/* standard */
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
}
.ds-slide {
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	/* standard */
	scroll-snap-align: start;
}
.ds-slide {
	position: relative;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.ds-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ds-slide:not(:first-child) .ds-slide-prev:before {
	content: "\3008";
	position: absolute;
	top: 50%;
	left: 1em;
	color: var(--ds-white);
	font-size: var(--ds-line-height);
	font-weight: bold;
	margin-top: calc(-0.5 * var(--ds-line-height));
	text-shadow: 0 0 2px var(--ds-black);
}
.ds-slide:not(:last-child) .ds-slide-next:before {
	content: "\3009";
	text-shadow: 0 0 3px var(--ds-black);
	position: absolute;
	z-index: 10;
	top: 50%;
	right: 1em;
	color: var(--ds-white);
	font-size: var(--ds-line-height);
	font-weight: bold;
	margin-top: calc(-0.5 * var(--ds-line-height));
}

/* Components: Navigation */

.ds-navbar {
    display: flex;
    background-color: var(--ds-primary);
    box-shadow: 0 4px 8px var(--ds-grey-60);
}
.ds-navbar .ds-button {
    border-top: 0;
    border-bottom: 0;
    outline: 0;
}
ul.ds-navbar {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
.ds-navbar-left {
    padding-left: 1em;
}
.ds-navbar-right {
    margin-left: auto;
    padding-right: 1em;
}
.ds-navbar-center {
    margin: 0 auto;
}
.ds-navbar-nav {
    margin: 0;
    padding: 0;
    display: flex;
}
.ds-navbar-nav li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ds-navbar-nav a {
    text-decoration: none;
    color: inherit;
    padding: 0 var(--input-spacing) 0 0;
}
.ds-navbar-nav .ds-button {
    margin-bottom: 0;
}
.ds-navbar-nav .ds-button:last-child {
    margin-right: 0;
}
.ds-navbar-sticky {
    position: sticky;
    top: 0;
    z-index: 101;
}

/* Components: Paging */

.ds-navbar-nav.ds-paging {
    display: none;
    line-height: var(--ds-button-line-height);
}
.ds-paging .ds-navbar-nav.ds-paging {
    display: flex;
}
.ds-paging .ds-paging-info {
    padding: 0 1em;
}
.ds-paging li:first-child .ds-button {
    margin-right: 0;
}

/* Components: Scroll Box
 */

.ds-scrollbox {
    --ds-scrollbox-height: calc(8 * var(--ds-line-height));
    max-height: var(--ds-scrollbox-height);
    overflow: auto;
	background:
		/* Shadow covers */
		linear-gradient(var(--ds-background) 30%, var(--ds-background-transparent)),
		linear-gradient(var(--ds-background-transparent), var(--ds-background) 70%) 0 100%,
		
		/* Shadows */
		radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
		radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
	background:
		/* Shadow covers */
		linear-gradient(var(--ds-background) 30%, var(--ds-background-transparent)),
		linear-gradient(var(--ds-background-transparent), var(--ds-background) 70%) 0 100%,
		
		/* Shadows */
		radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
		radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
	background-repeat: no-repeat;
	background-color: white;
	background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
    /* Opera doesn't support this in the shorthand */
	background-attachment: local, local, scroll, scroll;
}


/* Components: Tags */

.ds-tag {
    display: inline-block;
    align-items: center;
    background: var(--ds-grey-50);
    color: var(--ds-white);
    border-radius: 5px;
    padding: 0 0.4em;
    min-width: 50px;
    text-align: center;   
    overflow: hidden;
    font-size: 0.85rem;
    line-height: 1.8em;
    margin-right: 0.4em;
}
.ds-tag-label {
    display: inline-flex;
    margin: 0;
    margin-left: -0.4em;
    margin-right: 0.4em;
    padding: 0 0.5em;
    color: var(--ds-primary-contrast);
    float: left;
    min-height: var(--ds-line-height);
    align-items: center;
}
a.ds-tag {
    color: inherit;
}
.ds-tag-inline {
    display: inline;
}
.ds-tag-inverted {
    color: var(--ds-primary-contrast);
}
.ds-tag-inverted .ds-tag-label {
    color: var(--ds-white);
}
.ds-tag {
    background: linear-gradient(to left, var(--ds-grey-50), var(--ds-grey-50) 50%, var(--ds-primary) 50%, var(--ds-primary) 100%);
}
.ds-tag.ds-tag-inverted {
    background: linear-gradient(to left, var(--ds-primary), var(--ds-primary) 50%, var(--ds-grey-50) 50%, var(--ds-grey-50) 100%);
}
.ds-badge {
    --ds-badge-color: var(--ds-grey-50);
    --ds-badge-font-color: var(--ds-white);
    --ds-badge-label-color: var(--ds-primary);
    --ds-badge-label-contrast-color: var(--ds-primary-contrast);
    --ds-badge-font-size: 0.66em;
    --ds-badge-height: 2em;
    font-size: var(--ds-badge-font-size);
    display: inline-block;
    align-items: center;
    background: var(--ds-badge-color);
    color: var(--ds-badge-font-color);
    border-radius: 0.3em;
    padding: 0 0.6em;
    text-align: center;   
    margin: 0.05em 0;
    margin-right: 0.3em;
    line-height: var(--ds-badge-height);
    max-height: var(--ds-badge-height);
    position: relative;
}
.ds-badge-label,
.ds-badge > label {
    display: inline-flex;
    margin: 0;
    margin-left: -0.6em;
    margin-right: 0.6em;
    padding: 0 0.5em;
    background: var(--ds-badge-label-color);
    color: var(--ds-badge-label-contrast-color);
    float: left;
    min-height: var(--ds-badge-height);
    align-items: center;
    border-radius: 0.3em 0 0 0.3em;
}
a.ds-badge {
    color: inherit;
}
.ds-badge label .ds-icon,
.ds-badge-label .ds-icon {
    margin-top: 0;
    height: var(--ds-badge-height);
}
.ds-badge-inline {
    display: inline;
}
.ds-badge-inverted {
    background: var(--ds-badge-label-color);
    color: var(--ds-badge-label-contrast-color);
}
.ds-badge-inverted .ds-badge-label {
    background: var(--ds-badge-color);
    color: var(--ds-badge-font-color);
}
.ds-badge-tag {
    position: relative;
    border-radius: 0.3em 0 0 0.3em;
    padding-right: 0.2em;
    margin-right: 0.6em;
}
.ds-badge-tag::after {
    content: "";
    display: block;
    border: calc(0.5 * var(--ds-badge-height)) solid transparent;
    border-left: 0.8em solid var(--ds-badge-color); 
    position: absolute;
    top: 0;
    left: 100%;
}
.ds-badge-tag-reverse {
    position: relative;
    border-radius: 0 5px 5px 0;
    padding-left: 0.2em;
    margin-left: 0.6em;
}
.ds-badge-tag-reverse::before {
    content: "";
    display: block;
    border: calc(0.5 * var(--ds-badge-height)) solid transparent;
    border-right: 0.8em solid var(--ds-badge-color); 
    position: absolute;
    top: 0;
    right: 100%;
}
.ds-badge-inverted.ds-badge-tag::after {
    border-left-color: var(--ds-badge-label-color);
}
.ds-badge-inverted.ds-badge-tag-reverse::before {
    border-right-color: var(--ds-badge-label-color);
}


/* Components: Toast */


:root {
    --ds-toast-height: 60px;
    --ds-toast-hide-delay: 3s;
    --ds-toast-show-duration: 0.3s;
    --ds-toast-hide-duration: 0.5s;
    --ds-toast-margin: 20px;
}

ul.ds-toasts,
ol.ds-toasts,
.ds-toasts {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1001;
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 50%;
    min-width: 300px;
}
.ds-toast,
li.ds-toast {
    min-width: 300px;
    float: right;
    clear: both;
    margin-top: var(--ds-spacing);
    margin-right: var(--ds-spacing);
    background-color: var(--ds-grey-80);
    color: var(--ds-white);
    display: block;
    border-left: 10px solid var(--ds-grey-50);
    box-shadow: 4px 4px 8px var(--ds-grey-50);
}
.ds-toast-error,
li.ds-toast-error {
    border-color: var(--ds-error-color);
}
.ds-toast-info,
li.ds-toast-info {
    border-color: var(--ds-info-color);
}
.ds-toast-warning,
li.ds-toast-warning {
    border-color: var(--ds-warning-color);
}

@keyframes ds-toast-show {
    0% {
        transform: scaleX(0);
        transform-origin: right;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scaleX(1);
        transform-origin: right;
        opacity: 1;
    }
}
@keyframes ds-toast-hide {
    0% {
        transform: scaleX(1);
        transform-origin: right;
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scaleX(0);
        transform-origin: right;
        opacity: 0;
    }
}
@keyframes ds-toast-move {
    0% {
        transform: translateY(-80px); /* toast-height + toast-margin */
    }
    100% {
        transform: translateY(0px);
    }
}
.ds-toast[data-state="new"] {
    animation: ds-toast-show var(--ds-toast-show-duration) forwards;
}
.ds-toast-autohide[data-state="new"] {
    animation: ds-toast-show var(--ds-toast-show-duration);
    animation-delay: 0s;
}
.ds-toast-autohide.ds-toast-animated[data-state="shown"] {
    animation: ds-toast-hide var(--ds-toast-hide-duration) forwards;
    animation-delay: calc(var(--ds-toast-hide-delay) - var(--ds-toast-show-duration));
}
.ds-toast-autohide:not(.ds-toast-animated)[data-state="shown"] {
    animation: ds-toast-move var(--ds-toast-show-duration), ds-toast-hide var(--ds-toast-hide-duration) forwards;
    animation-delay: 0s, var(--ds-toast-hide-delay);
}


/* Headers: Header */

header > nav.ds-navbar-nav {
    margin-bottom: 20px;
    transform: scale(1.5);
    width: 66.7%; 
    transform-origin: top left;
}
header {
    margin-bottom: 20px;
}

main {
    max-height: calc(100% - 68px);
    overflow: auto;
    max-width: 900px;
    margin: 0 auto;
}
.ds-navbar-vertical {
    flex-direction: column;
}

.woonmatch-menu,
.woonmatch-menu a {
    background-color: var(--ds-grey-90);
    color: var(--ds-white);
}
.woonmatch-menu {
    position: absolute;
    z-index: 102;
    width: 100%;
    display: flex;
    max-height: 80vh;
    overflow: hidden;
    transition: max-height 0.2s ease-in-out;
}
.woonmatch-menu li {
    padding: 10px 0;
}
.woonmatch-profile {
    text-align: right;
    justify-content: flex-end
}
.woonmatch-alerts {
    position: relative;
    z-index: 101;
}
.woonmatch-back {
    display: none;
}
body.showPdf .woonmatch-back {
    display: block;
}
body.showPdf .woonmatch-menu-left {
    display: none;
}

/* Selectie Pagina
: Selectie */

img.wm-logo {
    display: inline-block;
    height: 10vh;
}
.wm-selection {
    margin: var(--ds-spacing) auto;
    max-width: 640px;
}
.wm-selection .ds-box img {
    display: block;
    width: 90%;
}
.wm-selection .ds-box {
    height: 25vh;
}
@media (max-width: 479px) {
    margin: 0 5px;
}
body.regio-selectie header {
    display: none;
}

/* Pages
: Woonmatch start */

.wm-logo {
    max-width: 100%;
    margin: 60px auto;
    margin-top: 40px;
    margin-bottom: 20px;
}

/* Pages
: Registratie */



/* Pages
: Login */



/* Pages
: Wachtwoord vergeten */



/* Pages
: Wachtwoord herstel
 */



/* Pages
: Wachtwoord instellen
 */



/* Pages
: Woonvoorkeur
 */

.ds-flex {
    display: flex;
}
.ds-form-inline {
    line-height: calc(var(--ds-line-height) * 1.5);

}
.ds-space-horizontal {
    margin-left: var(--ds-spacing);
    margin-right: var(--ds-spacing);
}
.woonmatch-inline {
    --ds-spacing: 10px;
}

.woonmatch-checkbox-list {
    max-height: 200px;
    padding: calc(0.5 * var(--ds-spacing));
    overflow: auto;
}

/* Pages
: Woningaanbod */

a.woonmatch-woning,
a.woonmatch-woning:visited,
a.woonmatch-woning:hover {
    color: inherit;
    clear: both;
}
.woonmatch-reaction-period,
.woonmatch-address {
    font-weight: bold;
    color: var(--ds-support-dark);
}
.woonmatch-price {
    font-weight: bold;
}
.woonmatch-current-filters {
    margin-bottom: var(--ds-spacing);
    display: flow-root;
}
.woonmatch-filters-list:not(:empty):before {
    content: "Huidige filters:";
    display: block;
}
.woonmatch-woonvoorkeuren-list:not(.simply-empty):before {
    content: "Huidige woonvoorkeuren:";
    display: block;
}
.woonmatch-woonvoorkeuren-list.simply-empty ~ .woonmatch-woonvoorkeuren-empty {
    max-height: unset;
    overflow: visible;
}
.woonmatch-current-filter {
    display: block;
    float: left;
    border: 1px solid var(--ds-grey-40);
    padding: 0px 7px 0px 4px;
    font-size: 85%;
    margin: 8px 8px 0 0;
    position: relative;
    background-color: var(--ds-button-bg-color);
}
.woonmatch-current-filter .ds-icon {
    font-size: 120%;
}
.woonmatch-title {
    position: relative;
    line-height: var(--ds-button-line-height);
}
.woonmatch-action {
    float: right;
    margin:0;
    position: relative;
    z-index: 1;
}
.woonmatch-photo {
    width: 100%;
    max-width: 480px;
    position: relative;
    float: left;
    margin-right: var(--ds-spacing);
    margin-bottom: var(--ds-spacing);
    background: var(--ds-grey-20);
}
.woonmatch-photo > img {
    max-height: 40vh;
    margin: 0 auto;
}
.woonmatch-photo .woonmatch-energy {
    background-color: var(--ds-support);
    color: var(--ds-support-contrast);
    padding: 2px 8px;
    font-size: 11px;
    position: absolute;
    top: 7px;
    left: 7px;
}
.woonmatch-banner-list {
    font-size: 11px;
    position: absolute;
    bottom: 7px;
    left: 7px;
}
.woonmatch-banner {
    background-color: var(--ds-primary);
    color: var(--ds-primary-contrast);
    padding: 2px 8px;
    margin-right: 7px;
    display: inline-block;
}
.woonmatch-woning {
    --ds-media-media-size: 130px;
    margin-bottom: var(--ds-spacing);
    margin-top: var(--ds-spacing);
}
.woonmatch-woning::after {
    content: "";
    display: block;
    margin: calc(var(--ds-spacing)) auto;
    width: 70%;
    height: 1px;
    background-color: var(--ds-grey-30);
    border-radius: 3px;
    clear: both;
}
.woonmatch-woning:last-child::after,
.woonmatch-woning:last-of-type::after {
    display: none;
}

.woonmatch-filters.closed {
    xdisplay: none;
}
.woonmatch-woning-icon {
    position: absolute;
    right: 0;
}
.woonmatch-woning .woonmatch-aanbieder img {
    max-height: 60px;
}
.woonmatch-aanbieder {
    line-height: 60px;
    vertical-align: middle;
}
.woonmatch-aanbieder span {
    line-height: 60px;
    vertical-align: top;
    display: inline-block;
}
.woonmatch-aanbieder img {
    display: inline;
    margin-right: var(--ds-spacing);
}
.woonmatch-action .ds-button[data-simply-state="checked"] .ds-icon:not([data-simply-state="checked"]),
.woonmatch-action .ds-button[data-simply-state="unchecked"] .ds-icon:not([data-simply-state="unchecked"]) {
    display: none;
}


/* Pages
: Bewaarde woningen */

.woonmatch-aangeboden {
    clear: both;
    position: relative;
}
.ds-icon-filled {
    fill: currentColor;
}
.woonmatch-favorites.simply-empty:before {
    content: "Er zijn geen bewaarde woningen.";
}
.woonmatch-reactions.simply-empty:before {
    content: "Er zijn geen advertenties gevonden.";
}
.woonmatch-favorites .ds-button[data-simply-state="checked"] .ds-icon:not([data-simply-state="checked"]),
.woonmatch-favorites .ds-button[data-simply-state="unchecked"] .ds-icon:not([data-simply-state="unchecked"]) {
    display: none;
}


/* Pages
: Woninginformatie */

.ds-accordion {
    margin: var(--ds-spacing) 0;
}
.woonmatch-slides {
    height: auto;
    width: auto;
}
.woonmatch-requirements {
    clear: both;
}
.woonmatch-requirements.simply-empty {
    display: none;
}
.woonmatch-aanvullend.simply-empty::after {
    content: "Geen aanvullende informatie beschikbaar.";
}
.ds-negative-space-horizontal {
    margin-left: calc(-1 * var(--ds-spacing));
    margin-right: calc(-1 * var(--ds-spacing));
}
@media (min-width: 481px) {
    .woonmatch-slides {
        height: 360px;
        min-height: auto;
        margin: 0;
        margin-bottom: var(--ds-line-height);
    } 
}
.ds-no-space {
    margin: 0;
}
h1.ds-no-space,
h2.ds-no-space {
    margin: 0;
}
.woonmatch-indeling td {
    padding: 5px;
}
.woonmatch-map {
    width: 100%;
}
.ds-button[data-simply-state="unchecked"] .ds-icon {
    transform: translateY(0)
}


/* Pages
: Reageren */

.woonmatch-ok {
    background-color: var(--ds-button-support-bg-color);
}
.woonmatch-ok .ds-icon {
    display: inline-block;
    margin-left: 10px;
}
.woonmatch-reaction summary .dc-icon {
    display: none;
}
.woonmatch-upload input {
    display: none;    
}

/* Pages
: Aangeboden woning
 */



/* Pages
: Berichten settings
 */

.woonmatch-checkbox {
    display: inline-block;
}

/* Pages
: Algemene informatie pagina
 */



/* Pages
: Privacy statement
 */



/* Pages
: Algemene voorwaarden
 */



/* Pages
: FAQ */



/* Pages
: Berichtenoverzicht */

.messages.simply-empty:before {
    content: "Er zijn geen berichten.";
}
.woonmatch-list {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid var(--ds-grey-40);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    color: var(--ds-black);
}
.woonmatch-list:last-of-type {
    border-bottom: 0;
}
.woonmatch-list a {
    display: flex;
    flex-direction: row;
}    
.woonmatch-list a,
.woonmatch-list a:visited {
    color: black;
}
.woonmatch-list-alert,
.woonmatch-list-action {
    flex-grow: 0;
    flex-shrink: 0;
}
.woonmatch-list-title {
    flex-grow: 1;
}
.woonmatch-list-alert {
    visibility: hidden;
    color: var(--ds-support);
    padding-right: var(--ds-spacing);
}
.woonmatch-list-alert .ds-icon {
    height: var(--ds-line-height);
}
.woonmatch-list-action {
    margin-left: 0.5rem;
}

.letters .woonmatch-list .woonmatch-list-alert,
.woonmatch-list[data-read="false"] .woonmatch-list-alert,
.woonmatch-list[data-read="0"] .woonmatch-list-alert {
    visibility: visible;
}
.woonmatch-list[data-read="0"] > a > div,
.woonmatch-list[data-read="false"] > a > div {
     font-weight: bold;
 }
 .woonmatch-list-action .ds-button {
     margin: 0;
     margin-left: var(--ds-spacing);
 }

/* Pages
: Bericht inhoud
 */

.ds-card.woonmatch-msg {
    margin: var(--ds-spacing) 0;
    box-shadow: none; 
}
.woonmatch-msg .ds-card-header {
    padding: 0 10px 10px;
    border-bottom: 1px solid var(--ds-grey-40);
}
span.woonmatch-msg-alert {
    padding-right: var(--ds-space);
    color: var(--ds-support);
}
span.woonmatch-msg-trash .ds-icon,
span.woonmatch-msg-icon .ds-icon,
span.woonmatch-msg-alert .ds-icon {
    height: var(--ds-line-height);
}
span.woonmatch-msg-short-date {
    display: inline-block;
    vertical-align: text-bottom;
}
span.woonmatch-msg-trash,
span.woonmatch-msg-icon {
    float: right;
    height: var(--ds-line-height);
}


/* Pages
: Brief inhoud
 */

.ds-button-danger {
    background-color: #cc3300;
    color: white;
}
.woonmatch-hidden {
    display: none;
}

/* Pages
: Profiel */

.woonmatch-upload {
    width: 100px;
}
.woonmatch-upload-field {
    position: relative;
}

.woonmatch-upload-field progress {
    width: 100%;
    left: 0;
    position: absolute;
    bottom: 0;
    height: 8px;
    border: 0;
    display: none;
}
.woonmatch-uploading .woonmatch-upload {
    background-color: var(--ds-grey-60);
}
.woonmatch-uploading progress {
    display: block;
}
.woonmatch-documents.simply-empty::before {
    content: "Geen documenten";
}

.woonmatch-documents > details.woonmatch-document-group summary {
    padding-left: 36px;
}
.ds-accordion > .ds-accordion {
    margin: 0;
}

/* Pages
: Documenten */



/* Pages
: File upload
 */

a.woonmatch-example-url {
    display: none;
}
a.woonmatch-example-url:link {
    display: block;
}
.woonmatch-upload-progress {
    width: 100%;
    height: 8px;
    border: 0;
    margin-bottom: calc(0.5 * var(--ds-line-height));
    visibility: hidden;
}
.woonmatch-uploading .woonmatch-upload-progress.woonmatch-active {
    visibility: visible;
}
.ds-form-hint {
    color: var(--ds-grey-80);
    font-size: 0.8em;
}

/* Pages
: File view
 */

.woonmatch-document-properties label {
    display: block;
    margin-bottom: var(--ds-line-height);
}

/* Pages
: PDF View */

.woonmatch-pdf {
    width: 100%;
    height: calc(100% - calc(1.51 * var(--ds-button-line-height)));
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: calc(1.5 * var(--ds-button-line-height));
}

/* Utility: Background Image
 */

.ds-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}


/* Utility: Color classes
 */

 .ds-bg-primary {
    background: var(--ds-primary);
    color: var(--ds-primary-contrast);
    --ds-contrast: var(--ds-primary-contrast);
}
.ds-bg-primary-gradient {
    background: var(--ds-primary-gradient);
    color: var(--ds-primary-contrast);
    --ds-contrast: var(--ds-primary-contrast);
}
.ds-bg-support {
    background: var(--ds-support);
    color: var(--ds-support-contrast);
    --ds-contrast: var(--ds-support-contrast);
}
.ds-bg-support-gradient {
    background: var(--ds-support-gradient);
    color: var(--ds-support-contrast);
    --ds-contrast: var(--ds-support-contrast);
}
.ds-bg-grey-dark {
    background: var(--ds-grey-dark);
    color: var(--ds-white);
    --ds-contrast: var(--ds-white);
}
.ds-bg-grey-medium {
    background: var(--ds-grey-medium);
    color: var(--ds-white);
    --ds-contrast: var(--ds-white);
}
.ds-bg-grey-light {
    background: var(--ds-grey-light);
    color: var(--ds-black);
    --ds-contrast: var(--ds-black);
}
.ds-color-primary {
    color: var(--ds-primary);
}
.ds-color-support {
    color: var(--ds-support);
}

/* Utility: Hide items
 */

.ds-hidden {
    max-height: 0;
    overflow: hidden;
}

/* Utility: Contain Margins
 */

.ds-contain {
    padding: 0.05px; /* IE fallback */
}
@supports (display: flow-root) {
    .ds-contain {
        padding: 0;
        display: flow-root;
    }
}

/* Utility: Alignment */

.ds-center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}
.ds-center-middle {
    display: flex;
    align-items: center;
    justify-content: center;
}
.ds-align-right {
    float: right;
}

/* Utility: Shadows
 */

:root {
    --ds-shadow-light: var(--ds-grey-medium);
    --ds-shadow-middle: var(--ds-grey-dark);
    --ds-shadow-dark: var(--ds-black);
    --ds-shadow-small: 0 0 3px var(--ds-shadow-light);
    --ds-shadow-medium: 0 0 6px var(--ds-shadow-middle);
    --ds-shadow-large: 0 0 12px var(--ds-shadow-dark);
}
.ds-shadow-small {
    box-shadow: var(--ds-shadow-small);
}
.ds-shadow-medium {
    box-shadow: var(--ds-shadow-medium);
}
.ds-shadow-large {
    box-shadow: var(--ds-shadow-large);
}

/* Utility: Space */

.ds-space {
    margin: var(--ds-spacing);
}
.ds-space-vertical {
    margin-top: var(--ds-spacing);
    margin-bottom: var(--ds-spacing);
}
.ds-space-horizontal {
    margin-left: var(--ds-spacing);
    margin-right: var(--ds-spacing);
}
.ds-margin-up {
    margin-top: calc(-1 * var(--ds-spacing));
}
.ds-no-space {
    margin: 0;
}
.ds-space-left {
    margin-left: var(--ds-spacing);
}
.ds-space-right {
    margin-right: var(--ds-spacing);
}
.ds-space-top {
    margin-top: var(--ds-spacing);
}
.ds-space-bottom {
    margin-bottom: var(--ds-spacing);
}

/* Utility: Text on dark and light backgrounds
 */

.ds-dark-background {
    color: white;
    text-shadow: 0 0 2px var(--ds-black);
}
.ds-light-background {
    color: var(--ds-color);
    text-shadow: 0 0 3px white;
}

/* Utility: Loading animation
 */

 @keyframes loading {
        0% {
            box-shadow: 
                1em 0 0 0 transparent, 
                3em 0 0 0 transparent, 
                5em 0 0 0 transparent;
        }
        25% {
            box-shadow: 
                1em 0 0 0 var(--ds-primary), 
                3em 0 0 0 transparent, 
                5em 0 0 0 transparent;
        }
        50% {
            box-shadow: 
                1em 0 0 0 var(--ds-primary), 
                3em 0 0 0 var(--ds-primary), 
                5em 0 0 0 transparent;
        }
        75% {
            box-shadow: 
                1em 0 0 0 var(--ds-primary), 
                3em 0 0 0 var(--ds-primary), 
                5em 0 0 0 var(--ds-primary);
        }
        100% {
            box-shadow: 
                1em 0 0 0 transparent, 
                3em 0 0 0 transparent, 
                5em 0 0 0 transparent;
        }
    }
    [data-loading="true"]::before {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        background: rgba(255,255,255,0.7);
        content: "";
        z-index: 1001;
    }
    [data-loading="true"]::after {
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 20px;
        margin-left: -3.5em;
        margin-top: -.5em;
        animation: loading 1s linear infinite;
        border-radius: 50%;
        width: 1em;
        height: 1em;
        z-index: 1002;
    }